/* ============================================================
   Regie — design tokens « livre de gerance »
   Cales sur regie-plan-de-build.md ; miroir de regie-prototype.html.
   ============================================================ */
:root {
    --paper:#ECEFEC;      --surface:#FFFFFF;
    --ink:#1E2A2F;        --ink-soft:#5B666B;   --ink-faint:#676E72; /* S4 : 4,50:1 sur --paper (etait #8B949A, 3,09) */
    --line:#E1E5E2;       --line-strong:#D2D7D3;
    --prussian:#1B3A47;   --prussian-2:#264F60; --prussian-tint:#E8EEF0;
    --accent:#EE6C1F;     --accent-soft:#FBE9DA;
    /* S4 : orange de marque #EE6C1F garde son role (FAB, accents, icones, 3:1 OK
       pour composant UI). Les boutons PLEINS PORTANT DU TEXTE passent sur
       --orange-cta (#BE5619 = marque x0,80) -> 4,63:1 sur blanc, AA texte. */
    --orange-cta:#BE5619;
    /* Orange foncé pour TEXTE sur fond clair-orangé (badge .b-acc) : 4,51:1 sur --accent-soft. */
    --accent-deep:#AD5019;
    --pay:#2D7A50;        --pay-bg:#E6F1EA;   /* S4 : 4,51:1 sur --pay-bg (etait #2E7D52, 4,35) ; reste le vert de confirmation S1 */
    --late:#B23A2E;       --late-bg:#F8EAE6;
    --warn:#8F5E15; /* S4 : 4,82:1 sur --warn-bg (etait #A9701A, 3,63) */  --warn-bg:#F6EEDF;
    --radius:12px;        --radius-card:12px;   --radius-control:9px;
}

html, body { margin:0; padding:0; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:15px;
    -webkit-font-smoothing: antialiased;
}

/* Chiffres, montants, indices : mono tabulaire — TOUS les nombres passent par la. */
.num, .mono {
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-weight:500;
    font-variant-numeric: tabular-nums;
    font-feature-settings:"tnum" 1;
}

/* Titres editoriaux (bandeau du jour) : serif, avec retenue. */
.editorial {
    font-family:"Newsreader", Georgia, serif;
    font-weight: 400;
    line-height: 1.34;
}

/* Icones Material Symbols Outlined, graisse 300 (parite prototype). */
.material-symbols-outlined {
    font-family:"Material Symbols Outlined";
    font-weight: normal; font-style: normal; line-height: 1;
    letter-spacing: normal; text-transform: none; white-space: nowrap;
    display: inline-block;
    font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* Boutons MudBlazor : pas de capitales forcees (identite prototype). */
.mud-button-root { text-transform: none; }

a { color: inherit; text-decoration: none; }

/* FocusOnNavigate (template) place le focus sur le h1 apres chaque navigation :
   ce focus programmatique ne doit pas dessiner de cadre. */
h1:focus, h1:focus-visible { outline: none; }

/* --- Blazor : styles utiles conserves du template --- */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
}
.blazor-error-boundary::after { content: "Une erreur est survenue."; }
.validation-message { color: var(--late); }

/* ============================================================
   Layout & composants — portes de regie-prototype.html (reference UI).
   ============================================================ */
.app { display:flex; min-height:100vh; }

/* Sidebar bleu de Prusse */
.side { width:238px; flex-shrink:0; background:var(--prussian); color:#C7D2D9; display:flex; flex-direction:column; padding:20px 14px; gap:24px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:12px; padding:2px 6px; }
.brand .mark { width:36px; height:36px; }
.brand .mark svg, .auth-brand .mark svg { width:100%; height:100%; display:block; }
.brand .name { font-weight:600; font-size:18px; color:#fff; line-height:1.05; }
.brand .sub { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.06em; color:#96A6B0; margin-top:3px; } /* S4 : 4,81:1 sur --prussian (etait #7f909a, 3,65) */
.nav { display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
/* D4 — groupes nommés : l'intitulé structure sans crier (M2). */
.navgroup { margin-top:15px; }
.navgroup:first-child { margin-top:0; }
.navgroup-label { font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#96A6B0; padding:4px 11px 6px; } /* S4 : 4,81:1 sur --prussian */
.nav a { display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:9px; font-size:14px; color:#AEBBC3; cursor:pointer; transition:background .15s,color .15s; }
.nav a .material-symbols-outlined { font-size:20px; opacity:.9; }
.nav a:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav a.on { background:rgba(255,255,255,.07); color:#fff; box-shadow:inset 3px 0 0 var(--accent); }
.side .foot { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.09); display:flex; align-items:center; gap:11px; }
.side .foot .av { width:32px; height:32px; border-radius:50%; background:var(--prussian-2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.side .foot .who { font-size:13px; color:#fff; }
.side .foot .role { font-size:11px; color:#96A6B0; } /* S4 : 4,81:1 sur --prussian (etait #7f909a, 3,65) */

/* Zone principale + bandeau */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 34px; border-bottom:1px solid var(--line); background:var(--surface); min-height:59px; }
.topbar h1 { margin:0; font-size:18px; font-weight:600; }
.crumb { font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; }
.crumb b { color:var(--ink); font-weight:600; }
.crumb .sep { color:var(--ink-faint); }
.crumb a { cursor:pointer; }
.crumb a:hover { color:var(--ink); }
.tright { display:flex; align-items:center; gap:16px; }
.seg { display:flex; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; font-size:13px; }
.seg span { padding:6px 13px; color:var(--ink-soft); cursor:pointer; }
.seg span.on { background:var(--prussian); color:#fff; }
.date { font-size:13px; color:var(--ink-soft); }
.ghost { font-size:13px; font-weight:500; padding:8px 14px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; }
.ghost:hover { background:var(--paper); }
.ghost.pri { background:var(--prussian); border-color:var(--prussian); color:#fff; }
.ghost.pri:hover { background:var(--prussian-2); }

.content { padding:28px 34px 46px; max-width:1010px; width:100%; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ink-soft); margin:0 0 13px; }
.eyebrow.mt { margin-top:32px; }
.lead { font-family:"Newsreader",Georgia,serif; font-size:20px; line-height:1.4; color:var(--ink); max-width:640px; margin:0 0 8px; }
.lead b { font-weight:500; }
.subhint { font-size:13px; color:var(--ink-soft); margin:0 0 24px; display:flex; align-items:center; gap:6px; }
.subhint .material-symbols-outlined { font-size:17px; color:var(--ink-faint); }

/* Badges */
.badge { font-size:12px; padding:4px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; }
.badge .material-symbols-outlined { font-size:15px; }
.b-neutral { background:var(--prussian-tint); color:var(--prussian); }
.b-ok { background:var(--pay-bg); color:var(--pay); }
.b-late { background:var(--late-bg); color:var(--late); }
.b-warn { background:var(--warn-bg); color:var(--warn); }

/* Cartes & cle-valeur */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px 19px; }
.card h2 { margin:0 0 14px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.card h2 .material-symbols-outlined { font-size:19px; color:var(--prussian); }
.kv { display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:14px; border-top:1px solid var(--line); }
.kv:first-of-type { border-top:none; }
.kv .k { color:var(--ink-soft); }
.kv .v { color:var(--ink); text-align:right; }
.kv .v.ok { color:var(--pay); display:inline-flex; align-items:center; gap:4px; }
.kv .v .material-symbols-outlined { font-size:16px; vertical-align:-3px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }

/* KPIs */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; }
.kpi .lab { font-size:12px; color:var(--ink-faint); margin-bottom:6px; }
.kpi .val { font-size:24px; line-height:1; }
.kpi .ft { font-size:12px; color:var(--ink-soft); margin-top:6px; }
.kpi .ft.alert { color:var(--late); }

/* Bandeau discret des chiffres du mois (D3) — remplace l'ancien daybar editorial sur le dashboard. */
.monthstrip { display:flex; align-items:center; flex-wrap:wrap; gap:0 28px; padding:2px 2px 26px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.monthstrip .ms-mois { font-size:13px; font-weight:600; color:var(--ink); margin-right:4px; }
.monthstrip .ms { display:flex; align-items:baseline; gap:7px; padding:6px 0; }
.monthstrip .ms .msv { font-size:15px; color:var(--ink); }
.monthstrip .ms .msl { font-size:12.5px; color:var(--ink-soft); }
.monthstrip .ms.alert .msv { color:var(--late); }

/* Bloc « a traiter » (dashboard) */
.todo { display:flex; flex-direction:column; gap:10px; }
.act { display:flex; align-items:center; gap:15px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; }
.act .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.act .ic .material-symbols-outlined { font-size:22px; }
.ic.late { background:var(--late-bg); color:var(--late); }
.ic.idx { background:var(--prussian-tint); color:var(--prussian); }
.ic.warn { background:var(--warn-bg); color:var(--warn); }
.act .body { flex:1; min-width:0; }
.act .t { font-size:15px; font-weight:600; margin:0; }
.act .d { font-size:13px; color:var(--ink-soft); margin:3px 0 0; }
.btn { font-size:13px; font-weight:500; padding:8px 15px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { background:var(--paper); }
.btn.primary { background:var(--prussian); border-color:var(--prussian); color:#fff; }
.btn.primary:hover { background:var(--prussian-2); }
.btn.fix { background:var(--orange-cta); border-color:var(--orange-cta); color:#fff; }

/* Vue par societe (dashboard) */
.soc { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.soc .row { display:flex; align-items:center; gap:14px; padding:14px 17px; }
.soc .row+.row { border-top:1px solid var(--line); }
.soc .dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.soc .nm { flex:1; min-width:0; font-size:14px; font-weight:500; }
.soc .meta { font-size:13px; color:var(--ink-soft); }
.soc .meta .num { color:var(--ink); }

/* Bandeau editorial du jour */
.daybar { margin-bottom:32px; }
.daybar .rule { width:44px; height:2px; background:var(--accent); margin-bottom:14px; }
.daybar .stamp { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--accent); margin-bottom:8px; }
.daybar .line { font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:25px; line-height:1.34; max-width:640px; }
.daybar .line b { font-weight:500; }

/* Filtres & recherche */
.filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.chip { font-size:13px; padding:6px 13px; border:1px solid var(--line-strong); border-radius:20px; background:var(--surface); color:var(--ink-soft); cursor:pointer; }
.chip.on { background:var(--prussian); border-color:var(--prussian); color:#fff; }
.search { flex:1; min-width:160px; display:flex; align-items:center; gap:7px; border:1px solid var(--line-strong); border-radius:9px; padding:6px 12px; color:var(--ink-faint); font-size:13px; }
.search .material-symbols-outlined { font-size:18px; }
.search input { border:none; outline:none; background:transparent; font-family:inherit; font-size:13px; color:var(--ink); width:100%; }

/* Tables */
.tbl { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tbl th { text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:11px 16px; border-bottom:1px solid var(--line); background:#F7F9F7; }
.tbl td { padding:12px 16px; font-size:14px; border-bottom:1px solid var(--line); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover td { background:#FAFBFA; }
.tbl .sub { font-size:12px; color:var(--ink-soft); }
.tbl .r { text-align:right; }
.rowlink { cursor:pointer; }

/* ---- Loyers : encodage d'etat (D7). SEUL --late colore un etat ; le reste est neutre.
   Le nominal (paye / du a l'heure) ne porte AUCUN badge : seule l'exception se signale. ---- */
.tbl tr.retard td:first-child { box-shadow:inset 3px 0 0 var(--late); }   /* retard = barre laterale, pas de fond teinte */
.solde { font-weight:600; }                 /* solde restant : poids typo distinct du montant du (500) */
.solde.late { color:var(--late); }          /* rouge UNIQUEMENT en retard */
.statut-retard { display:inline-flex; align-items:center; gap:5px; color:var(--late); font-weight:500; }
.statut-retard .material-symbols-outlined { font-size:16px; }
/* Exception NON urgente (partiel a venir) : puce neutre, texte + forme, aucune couleur d'etat. */
.statut-partiel { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-soft);
    border:1px solid var(--line-strong); border-radius:20px; padding:3px 10px; }
.statut-partiel .material-symbols-outlined { font-size:15px; color:var(--ink-faint); }

/* Cycle de vie d'une intervention (stepper horizontal) + suggestions tapables */
.lifecycle { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.lifecycle .st { font-size:12px; padding:5px 11px; border-radius:20px; background:var(--paper); color:var(--ink-faint); border:1px solid var(--line); display:inline-flex; align-items:center; gap:5px; }
.lifecycle .st.done { color:var(--pay); border-color:var(--pay-bg); background:var(--pay-bg); }
.lifecycle .st.now { background:var(--prussian); border-color:var(--prussian); color:#fff; }
.lifecycle .st .material-symbols-outlined { font-size:14px; }
.suggest { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.suggest .sg { font-size:12.5px; padding:5px 11px; border:1px dashed var(--line-strong); border-radius:20px; background:var(--surface); color:var(--prussian); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.suggest .sg:hover { border-color:var(--prussian-2); background:var(--prussian-tint); }
.suggest .sg .material-symbols-outlined { font-size:15px; }
.b-acc { background:var(--accent-soft); color:var(--accent-deep); }
.prio-urg { color:var(--late); }

/* Batiments (Parc) */
.bldg { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:12px; }
.bldg .bh { display:flex; align-items:center; gap:13px; padding:15px 18px; border-bottom:1px solid var(--line); }
.bldg .bh .ico { width:38px; height:38px; border-radius:10px; background:var(--prussian-tint); color:var(--prussian); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bldg .bh .nm { flex:1; min-width:0; }
.bldg .bh .nm .t { font-size:15px; font-weight:600; }
.bldg .bh .nm .a { font-size:13px; color:var(--ink-soft); }
.bldg .bh .st { font-size:13px; color:var(--ink-soft); text-align:right; }
.bldg .bh .st .num { color:var(--ink); }
.lotline { display:flex; align-items:center; gap:12px; padding:11px 18px; border-top:1px solid var(--line); cursor:pointer; }
.lotline:hover { background:#FAFBFA; }
.lotline .lt { flex:1; font-size:14px; }
.lotline .lt .sub { font-size:12px; color:var(--ink-soft); }
.lotline .rr { font-size:14px; color:var(--ink-soft); }
.lotline .rr .num { color:var(--ink); }
.emptyline { padding:14px 18px; font-size:13px; color:var(--ink-faint); border-top:1px solid var(--line); }

/* Fiche signaletique batiment : en-tete de section (titre + lien « plongee ») + totaux de table */
.sech { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 12px; }
.sech h2 { margin:0; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.sech h2 .material-symbols-outlined { font-size:19px; color:var(--prussian); }
.sech .helper-btn { display:inline-flex; align-items:center; gap:3px; }
.tbl tfoot td { font-weight:600; color:var(--ink); background:#F7F9F7; border-top:1px solid var(--line-strong); }
.tbl .faint { color:var(--ink-faint); }
.bldg .bh .nm.nmlink { cursor:pointer; }
.bldg .bh .nm.nmlink:hover .t { text-decoration:underline; }

/* Formulaires (Nouveau lot / bail) */
.form { max-width:640px; }
.fsec { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; }
.fsec h2 { margin:0 0 16px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.fsec h2 .material-symbols-outlined { font-size:19px; color:var(--prussian); }
.field { margin-bottom:15px; }
.field:last-child { margin-bottom:0; }
.field > label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
.field input, .field select { width:100%; font-family:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); color:var(--ink); }
.field input::placeholder { color:var(--ink-faint); }
.field input:focus, .field select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.hintline { font-size:12px; color:var(--ink-soft); margin-top:6px; display:flex; align-items:flex-start; gap:5px; }
.hintline .material-symbols-outlined { font-size:15px; margin-top:1px; color:var(--ink-faint); }
/* Variante erreur de formulaire : colore le texte ET l'icone (sinon l'icone garde --ink-faint). */
.hintline.err, .hintline.err .material-symbols-outlined { color:var(--late); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.with-eur { position:relative; }
.with-eur input { padding-right:30px; }
.with-eur .eur { position:absolute; right:12px; top:9px; color:var(--ink-soft); font-family:"JetBrains Mono",monospace; }
.tgs { display:flex; gap:8px; }
.tg { flex:1; text-align:center; font-size:14px; padding:10px; border:1px solid var(--line-strong); border-radius:9px; cursor:pointer; background:var(--surface); }
.tg.on { background:var(--prussian); border-color:var(--prussian); color:#fff; }
/* Repeteur de personnes (locataires / garants) sur le formulaire bail. */
.pcard { border:1px solid var(--line-strong); border-radius:var(--radius-control); padding:14px 15px 15px; margin-bottom:12px; background:#FCFDFC; }
.pchead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.pcnum { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.pcnum .pcdot { width:22px; height:22px; border-radius:50%; background:var(--prussian-tint); color:var(--prussian); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:"JetBrains Mono",monospace; }
.pcrm { display:inline-flex; align-items:center; gap:3px; }
.pcrm .material-symbols-outlined { font-size:15px; }
.addrow { width:100%; border:1.5px dashed var(--line-strong); background:transparent; color:var(--prussian); border-radius:var(--radius-control); padding:11px; font-size:13.5px; font-weight:500; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.addrow:hover { background:var(--prussian-tint); border-color:var(--prussian-2); }
.addrow .material-symbols-outlined { font-size:18px; }
.field label .opt { color:var(--ink-faint); font-weight:400; }
.pempty { font-size:13px; color:var(--ink-faint); padding:2px 2px 12px; }
.prefill { background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:13px; color:var(--ink-soft); display:flex; align-items:flex-start; gap:8px; margin-top:8px; }
.prefill .material-symbols-outlined { font-size:17px; color:var(--pay); margin-top:1px; }
.prefill .num { color:var(--ink); }
.prefill.miss { background:var(--warn-bg); border-color:transparent; color:var(--warn); }
.prefill.miss .material-symbols-outlined { color:var(--warn); }
.swline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.swline:first-of-type { border-top:none; }
.swline .lb { font-size:14px; font-weight:500; }
.swline .sub { font-size:12px; color:var(--ink-soft); }
.sw { width:42px; height:24px; border-radius:20px; background:var(--pay); position:relative; flex-shrink:0; cursor:pointer; border:none; padding:0; }
.sw::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:21px; transition:left .15s; }
.sw.off { background:var(--line-strong); }
.sw.off::after { left:3px; }
.formbar { display:flex; gap:10px; justify-content:flex-end; margin-top:2px; }
.bigbtn { font-size:14px; font-weight:500; padding:11px 22px; border-radius:9px; cursor:pointer; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); }
.bigbtn:hover { background:var(--paper); }
.bigbtn.primary { background:var(--prussian); border-color:var(--prussian); color:#fff; }
.bigbtn.primary:hover { background:var(--prussian-2); }
.bigbtn:disabled { opacity:.5; cursor:not-allowed; }
.helper-btn { font-size:12px; color:var(--prussian); cursor:pointer; font-weight:400; background:none; border:none; padding:0; }
.helper-btn.danger { color:var(--late); }

/* ============================================================
   LOT 3 — Relevé des compteurs (M4a liste de bâtiments / M4b saisie inline).
   Conventions prod (--radius, bordures) ; le polish D8 (ombres, respiration) reste LOT 5.
   ============================================================ */
/* M4a — liste des bâtiments à relever */
.blist { display:flex; flex-direction:column; gap:10px; }
.brow { display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; cursor:pointer; text-decoration:none; color:inherit; }
.brow:hover { background:#FAFBFA; }
.brow .bic { width:40px; height:40px; border-radius:11px; background:var(--prussian-tint); color:var(--prussian); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brow .bic .material-symbols-outlined { font-size:22px; }
.brow .bb { flex:1; min-width:0; }
.brow .bt { font-size:15px; font-weight:600; }
.brow .bd { font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.brow .bd .num { color:var(--ink); }
.brow .bd-cta { color:var(--prussian); font-weight:500; }
.brow .chev { color:var(--ink-faint); flex-shrink:0; }

/* M4b — saisie inline des index */
.inlinedate { border:1px solid var(--line-strong); border-radius:7px; padding:3px 8px; font-family:inherit; font-size:13px; color:var(--ink); background:var(--surface); }
.rellist { display:flex; flex-direction:column; gap:11px; margin-bottom:12px; }
.relcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px 15px; }
.relcard .rh { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.relcard .tic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.relcard .tic .material-symbols-outlined { font-size:19px; }
.relcard .tic.gaz { background:var(--warn-bg); color:var(--warn); }
.relcard .tic.eau { background:var(--prussian-tint); color:var(--prussian); }
.relcard .tic.elec { background:var(--accent-soft); color:var(--accent-deep); }
.relcard .rname { font-size:14.5px; font-weight:600; }
.relcard .rsub { font-size:12px; color:var(--ink-soft); }
.relcard .rin { display:flex; }
.relcard .rfield { flex:1; display:flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:10px; padding:0 14px; background:var(--surface); transition:border-color .15s; }
.relcard .rfield:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(238,108,31,.12); }
.relcard .rfield input { border:none; outline:none; background:transparent; font-family:"JetBrains Mono",monospace; font-weight:500; font-size:19px; color:var(--ink); width:100%; padding:11px 0; -moz-appearance:textfield; }
.relcard .rfield input::-webkit-outer-spin-button, .relcard .rfield input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.relcard .rfield input::placeholder { color:var(--ink-faint); font-weight:400; }
.relcard .rfield .unit { font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--ink-soft); padding-left:6px; }
.relcard .rlast { font-size:12px; color:var(--ink-soft); margin-top:9px; display:flex; align-items:center; gap:6px; }
.relcard .rlast .material-symbols-outlined { font-size:15px; color:var(--ink-faint); }
.relcard.filled { border-color:var(--pay-bg); }
.relcard.filled .rfield { border-color:var(--pay); }
.relcard.baisse .rfield { border-color:var(--warn); }              /* S3 : ambre, jamais rouge */
.relcard .rwarn { margin-top:10px; display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.45; color:var(--warn); background:var(--warn-bg); border-radius:9px; padding:9px 11px; }
.relcard .rwarn .material-symbols-outlined { font-size:16px; margin-top:1px; flex-shrink:0; }

/* Bouton collant orange plein largeur (S4 : --orange-cta -> texte blanc AA). */
.bigbtn.accent { background:var(--orange-cta); border-color:var(--orange-cta); color:#fff; }
.bigbtn.accent:hover { background:var(--accent-deep); }
.formbar.sticky.relbar { justify-content:stretch; }
.formbar.sticky.relbar .bigbtn { flex:1; }
/* Barre d'action COLLANTE pour les longs formulaires (audit lot D, finding 3) : reste
   a portee de clic sans devoir scroller jusqu'en bas. Reservee aux formulaires-page
   (classe .sticky) ; les sous-formulaires inline gardent .formbar sans .sticky. */
.formbar.sticky { position:sticky; bottom:0; z-index:2; margin-top:10px; padding:12px 0;
  background:rgba(236,239,236,.9); backdrop-filter:blur(6px); border-top:1px solid var(--line-strong); }
.upload { border:1.5px dashed var(--line-strong); border-radius:10px; padding:20px; text-align:center; color:var(--ink-soft); font-size:13px; cursor:pointer; display:block; }
.upload:hover { border-color:var(--accent); color:var(--ink); }
.upload .material-symbols-outlined { font-size:26px; color:var(--ink-faint); display:block; margin:0 auto 6px; }
.upload input[type=file] { display:none; }
.filepick { display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--line-strong); border-radius:9px; padding:10px 14px; cursor:pointer; font-size:13px; color:var(--ink-soft); background:var(--surface); }
.filepick:hover { border-color:var(--accent); color:var(--ink); }
.filepick input[type=file] { display:none; }
.filepick .material-symbols-outlined { font-size:18px; }

/* Indexation assistee (ecran s-index du prototype) */
.ix { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; overflow:hidden; }
.ix .top { display:flex; align-items:center; gap:12px; padding:15px 18px; }
.ixwho { flex:1; min-width:0; }
.ixwho .nm { font-size:15px; font-weight:600; }
.ixwho .lo { font-size:13px; color:var(--ink-soft); }
.tag { font-size:11px; padding:3px 10px; border-radius:20px; flex-shrink:0; }
.t-ready { background:var(--pay-bg); color:var(--pay); }
.t-com { background:var(--prussian-tint); color:var(--prussian); }
.t-block { background:var(--late-bg); color:var(--late); }
.calc { display:flex; align-items:center; gap:18px; padding:4px 18px 16px; flex-wrap:wrap; }
.calc .from { font-size:16px; color:var(--ink-soft); }
.calc .arrow { color:var(--ink-faint); display:flex; }
.calc .to { font-size:26px; color:var(--ink); }
.calc .pct { font-size:12px; padding:3px 9px; border-radius:20px; background:var(--pay-bg); color:var(--pay); }
.calc .detail { margin-left:auto; text-align:right; font-size:12px; color:var(--ink-soft); line-height:1.5; }
.calc.muted .to, .calc.muted .from { color:var(--ink-faint); }
.flag { display:flex; align-items:flex-start; gap:9px; padding:11px 18px; font-size:13px; border-top:1px solid var(--line); }
.flag .material-symbols-outlined { font-size:18px; flex-shrink:0; margin-top:1px; }
.flag.warn { background:var(--warn-bg); color:var(--warn); }
.flag.block { background:var(--late-bg); color:var(--late); }
.flag b { font-weight:600; }
.actions { display:flex; gap:9px; justify-content:flex-end; padding:13px 18px; border-top:1px solid var(--line); }

/* Echeances (ecran s-ech du prototype) */
.ech { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.ech .e { display:flex; align-items:center; gap:14px; padding:14px 18px; }
.ech .e+.e { border-top:1px solid var(--line); }
.ech .e.rowlink { cursor:pointer; }
.ech .e.rowlink:hover { background:#FAFBFA; }
.ech .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ech .ic .material-symbols-outlined { font-size:20px; }
.ech .b { flex:1; min-width:0; }
.ech .b .t { font-size:14px; font-weight:500; }
.ech .b .d { font-size:12px; color:var(--ink-soft); }
.ech .when { font-family:"JetBrains Mono",monospace; font-size:13px; text-align:right; color:var(--ink-soft); flex-shrink:0; }
.ech .when.retard { color:var(--late); }
.ech .b .d a.att { display:inline-flex; align-items:center; gap:3px; font-weight:500; cursor:pointer; }
.ech .b .d a.att.ok { color:var(--pay); }
.ech .b .d a.att.miss { color:var(--prussian); }
.ech .b .d a.att .material-symbols-outlined { font-size:14px; }

/* Pied de la sidebar : utilisateur connecte + deconnexion */
.side .foot .who-wrap { min-width:0; }
.side .foot .who { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side .foot .logout-form { margin-left:auto; display:flex; }
.side .foot .logout-btn { background:transparent; border:none; color:#8fa0aa; cursor:pointer; display:flex; align-items:center; padding:6px; border-radius:8px; }
.side .foot .logout-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.side .foot .logout-btn .material-symbols-outlined { font-size:20px; }

/* ============================================================
   Ecrans d'authentification (connexion, 2FA, gestion du compte).
   Aux couleurs de Regie : bleu de Prusse, marque orange, polices maison.
   ============================================================ */
.auth-shell { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:32px 18px; background:var(--paper); }
.auth-card { width:100%; max-width:410px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:30px 30px 26px; box-shadow:0 1px 2px rgba(30,42,47,.05), 0 16px 40px -22px rgba(27,58,71,.34); }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-brand .mark { width:38px; height:38px; }
.auth-brand .name { font-weight:600; font-size:19px; color:var(--ink); line-height:1.05; }
.auth-brand .sub { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.06em; color:var(--ink-faint); margin-top:3px; }
.auth-title { font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:23px; color:var(--ink); margin:0 0 5px; }
.auth-lead { font-size:13px; color:var(--ink-soft); margin:0 0 22px; line-height:1.5; }
.auth-field { margin-bottom:15px; }
.auth-field > label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--ink); }
.auth-field input { width:100%; box-sizing:border-box; font-family:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); color:var(--ink); }
.auth-field input::placeholder { color:var(--ink-faint); }
.auth-field input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.auth-check { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); margin:4px 0 20px; cursor:pointer; user-select:none; }
.auth-check input { width:16px; height:16px; accent-color:var(--prussian); }
.auth-btn { width:100%; font-size:14px; font-weight:500; padding:11px 18px; border-radius:9px; cursor:pointer; border:1px solid var(--prussian); background:var(--prussian); color:#fff; }
.auth-btn:hover { background:var(--prussian-2); }
.auth-btn:disabled { opacity:.55; cursor:not-allowed; }
.auth-btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.auth-btn.ghost:hover { background:var(--paper); }
.auth-err { background:var(--late-bg); color:var(--late); border-radius:9px; padding:10px 12px; font-size:13px; margin-bottom:18px; display:flex; align-items:flex-start; gap:8px; line-height:1.45; }
.auth-err .material-symbols-outlined { font-size:18px; flex-shrink:0; }
.auth-ok { background:var(--pay-bg); color:var(--pay); border-radius:9px; padding:10px 12px; font-size:13px; margin-bottom:18px; display:flex; align-items:flex-start; gap:8px; line-height:1.45; }
.auth-ok .material-symbols-outlined { font-size:18px; flex-shrink:0; }
.auth-info { background:var(--prussian-tint); color:var(--prussian); border-radius:9px; padding:10px 12px; font-size:13px; margin-bottom:18px; line-height:1.5; }
.auth-foot { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.04em; color:var(--ink-faint); }
.auth-links { margin-top:18px; font-size:13px; color:var(--ink-soft); text-align:center; }
.auth-links a { color:var(--prussian); font-weight:500; cursor:pointer; }
.auth-splash { padding:40px; text-align:center; color:var(--ink-soft); font-size:14px; }
.auth-denied { padding:28px 34px; color:var(--late); }

/* « Mon compte » : sous-navigation + blocs 2FA */
.subnav { display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.subnav a { display:flex; align-items:center; gap:7px; padding:9px 13px; font-size:13px; font-weight:500; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.subnav a:hover { color:var(--ink); }
.subnav a.on { color:var(--prussian); border-bottom-color:var(--accent); }
.subnav a .material-symbols-outlined { font-size:18px; }
.qrbox { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.qrbox img { border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff; }
.qrkey .lbl { font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.qrkey code { font-size:15px; letter-spacing:.04em; background:var(--paper); padding:8px 12px; border-radius:8px; display:inline-block; color:var(--ink); }
.reccodes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; max-width:380px; }
.reccodes code { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:14px; letter-spacing:.05em; text-align:center; color:var(--ink); }
.side .foot .who-link { cursor:pointer; border-radius:8px; }
.side .foot .who-link:hover .who { text-decoration:underline; }

/* ============================================================
   Navigation MOBILE (LOT 1) — en-tete (logo + profil) + barre du bas fixe
   (5 emplacements, FAB [+] central) + panneau a 3 gestes (Signaler/Relever/Pointer).
   Remplace la barre laterale horizontale. display:none par defaut ; la media
   query <=880px l'active. Le rendu desktop ne change pas.
   ============================================================ */
.mtopbar { display:none; align-items:center; gap:12px; background:var(--surface);
  border-bottom:1px solid var(--line); padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px; }
.mtopbar .mbrand { display:flex; align-items:center; gap:10px; }
.mtopbar .mmark { width:30px; height:30px; flex-shrink:0; }
.mtopbar .mmark svg { width:100%; height:100%; display:block; }
.mtopbar .mname { font-weight:600; font-size:17px; color:var(--ink); }
.mtopbar .mav { margin-left:auto; width:32px; height:32px; border-radius:50%; background:var(--prussian);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; }

.tabbar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:1230; height:76px;
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); align-items:flex-start; justify-content:space-around; }
.tabbar .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 0 0;
  color:#626B71; cursor:pointer; text-decoration:none; }   /* S4 : 5,44:1 sur blanc — marge sous le tabbar translucide (etait #6F787E, 4,50 -> limite quand du contenu passe derriere) */
.tabbar .tab .material-symbols-outlined { font-size:24px; }
.tabbar .tab .tl { font-size:10.5px; font-weight:500; }
.tabbar .tab.on { color:var(--prussian); }
.tabbar .tab.on .material-symbols-outlined { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
.tabbar .fab { flex:0 0 auto; width:58px; margin-top:-20px; }
.tabbar .fab button { width:58px; height:58px; border-radius:20px; border:none; cursor:pointer;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(238,108,31,.42), 0 2px 4px rgba(238,108,31,.3); }
.tabbar .fab button .material-symbols-outlined { font-size:30px; font-variation-settings:'FILL' 0,'wght' 400; transition:transform .18s; }
.tabbar .fab.open button { background:var(--prussian); }
.tabbar .fab.open button .material-symbols-outlined { transform:rotate(45deg); }
/* S7 : pas de geste flottant au-dessus d'un formulaire. Le FAB s'efface des qu'une
   barre d'action collante (.formbar.sticky) est presente. visibility:hidden (et non
   display:none) : l'emplacement du FAB reste RESERVE, vide et non tappable — les 4
   onglets ne se re-repartissent pas. Une cible de nav ne bouge JAMAIS d'un ecran a l'autre. */
.app:has(.formbar.sticky) .tabbar .fab { visibility:hidden; }

/* Panneau [+] : voile + feuille. La barre du bas garde le z le plus haut (le FAB
   affiche la croix de fermeture), la feuille reserve sa hauteur en bas. */
.scrim { position:fixed; inset:0; z-index:1210; background:rgba(16,34,43,.34); }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:1220; background:var(--surface);
  border-radius:26px 26px 0 0; padding:12px 16px calc(92px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 50px -20px rgba(27,58,71,.4); }
.sheet .grip { width:38px; height:4px; border-radius:4px; background:var(--line-strong); margin:2px auto 12px; }
.sheet .sheet-lead { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); padding:2px 6px 12px; }
.sheet-action { display:flex; width:100%; align-items:center; gap:15px; padding:15px 14px; border-radius:16px;
  cursor:pointer; background:none; border:none; text-align:left; font-family:inherit; }
.sheet-action:hover { background:var(--paper); }
.sheet-action .sic { width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sheet-action .sic .material-symbols-outlined { font-size:25px; }
.sic.signaler { background:var(--accent-soft); color:var(--accent-deep); }
.sic.relever { background:var(--prussian-tint); color:var(--prussian); }
.sic.pointer { background:var(--pay-bg); color:var(--pay); }
.sheet-action .sheet-txt { display:flex; flex-direction:column; min-width:0; }
.sheet-action .st { font-size:16px; font-weight:600; color:var(--ink); }
.sheet-action .sd { font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.sheet-action .chev { margin-left:auto; color:var(--ink-faint); flex-shrink:0; }

/* Responsive : la barre laterale disparait sur mobile, remplacee par la nav du bas.
   Tout est dans cette media query ; le rendu desktop ne change pas. */
@media (max-width:880px){
  .app { flex-direction:column; }
  /* LOT 1 : plus de barre laterale (ni horizontale) sur mobile. */
  .side { display:none; }
  .mtopbar { display:flex; }
  .tabbar { display:flex; }
  /* E (D3/M3) : le monthstrip (chiffres du mois) est un élément DESKTOP. Sur mobile la
     maquette M3 va droit à « À traiter » — le bandeau mangeait deux cartes (D3 inversé).
     Le retard reste visible dans les cartes « À traiter ». */
  .monthstrip { display:none; }

  /* safe-area iOS (PWA plein ecran) : retraits lateraux ; env(...,0px)=0 sans encoche. */
  .topbar, .content { padding-left:calc(18px + env(safe-area-inset-left,0px)); padding-right:calc(18px + env(safe-area-inset-right,0px)); }
  /* Le contenu ne passe pas sous la barre du bas fixe (+ retrait « home » iOS). */
  .content { padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
  /* Barre d'action collante des formulaires : au-dessus de la barre du bas, pas dessous. */
  .formbar.sticky { bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
  /* Les actions de la barre du haut passent a la ligne au lieu de deborder. */
  .topbar { flex-wrap:wrap; row-gap:10px; }
  .tright { flex-wrap:wrap; row-gap:8px; }
  .row2, .row3 { grid-template-columns:1fr; }

  /* Tableaux scrollables horizontalement (repli tablette 561-880px ; <=560px -> cartes). */
  .tbl { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl th, .tbl td { white-space:nowrap; }
}

/* Cartes empilees sur TELEPHONE (<=560px) : chaque ligne d'une table .cards devient une
   carte. Les en-tetes de colonne (masques) sont reportes en libelle via data-label, si
   bien que la colonne-cle — a droite en desktop (loyer courant, renouvellement, precompte,
   cout) — et les actions (Modifier/Supprimer) redeviennent visibles SANS scroll horizontal.
   Ne touche que <=560px : tablette et desktop gardent la table classique, rendu inchange. */
@media (max-width:560px){
  .tbl.cards { display:block; border:none; background:transparent; overflow:visible; }
  .tbl.cards thead { display:none; }
  .tbl.cards tbody, .tbl.cards tfoot, .tbl.cards tr, .tbl.cards td { display:block; }
  .tbl.cards tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:3px 15px; margin-bottom:10px; }
  .tbl.cards tr:last-child { margin-bottom:0; }
  .tbl.cards td { padding:9px 0; border-bottom:1px solid var(--line); white-space:normal; text-align:left; }
  .tbl.cards td:last-child { border-bottom:none; }
  /* La 1re cellule (nom de l'entite) n'a pas de data-label : elle reste le titre de la carte.
     Les autres colonnes portent leur intitule a gauche (data-label) et leur valeur a droite. */
  .tbl.cards td[data-label] { text-align:right; }
  .tbl.cards td[data-label]::before { content:attr(data-label); float:left; margin-right:14px; font-size:12px; font-weight:600; color:var(--ink-soft); }
  /* Pied de table (totaux) : liseré appuyé pour le distinguer des lignes. */
  .tbl.cards tfoot tr { border-color:var(--line-strong); background:#F7F9F7; }
}
@media (prefers-reduced-motion:reduce){ * { transition:none!important; } }