/* ============================================================
   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:#8B949A;
    --line:#E1E5E2;       --line-strong:#D2D7D3;
    --prussian:#1B3A47;   --prussian-2:#264F60; --prussian-tint:#E8EEF0;
    --accent:#EE6C1F;     --accent-soft:#FBE9DA;
    --pay:#2E7D52;        --pay-bg:#E6F1EA;
    --late:#B23A2E;       --late-bg:#F8EAE6;
    --warn:#A9701A;       --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:#7f909a; margin-top:3px; }
.nav { display:flex; flex-direction:column; gap:2px; }
.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:#7f909a; }

/* 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); }

/* 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(--accent); border-color:var(--accent); 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; }

/* 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); }
/* 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; }

/* Responsive : sidebar horizontale sur petit ecran (ajustements MOBILE uniquement —
   tout est dans cette media query, le rendu desktop ne change pas). */
@media (max-width:880px){
  .app { flex-direction:column; }
  /* La barre laterale devient une barre horizontale ; c'est la NAV (icones) qui scrolle,
     pour que la marque a gauche et le pied (compte + deconnexion) a droite restent visibles. */
  /* #23 : safe-area iOS (PWA plein ecran) — l'encoche mord en haut, les coins arrondis
     sur les cotes. On ajoute les retraits ; env(...,0px) = 0 sur un ecran sans encoche,
     donc navigateur classique et emulateur restent inchanges. */
  .side { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;
          padding:calc(10px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 10px calc(14px + env(safe-area-inset-left,0px)); }
  .brand { flex-shrink:0; }
  .brand .sub { display:none; }
  /* #4 : la nav passe sur sa PROPRE ligne (pleine largeur) -> les 9 sections sont visibles
     d'un coup au lieu d'etre ecrasees dans un ruban de ~90px. Scroll horizontal en secours
     si l'ecran est vraiment tres etroit. */
  .nav { order:1; flex:0 0 100%; flex-direction:row; gap:4px; justify-content:space-between; overflow-x:auto; }
  .nav a { padding:9px; flex-shrink:0; }
  .nav a .lbl { display:none; }
  .nav a.on { box-shadow:inset 0 -3px 0 var(--accent); }

  /* #3 : compte (le nom mene a « Mon compte ») + deconnexion, a droite de la 1re ligne. */
  .side .foot { display:flex; flex-shrink:0; margin:0 0 0 auto; padding:0; border-top:none; gap:8px; align-items:center; }
  .side .foot .role { display:none; }
  .side .foot .who-wrap { max-width:120px; }
  .side .foot .logout-form { margin-left:0; }

  .topbar, .content { padding-left:calc(18px + env(safe-area-inset-left,0px)); padding-right:calc(18px + env(safe-area-inset-right,0px)); }
  /* Barre « home » iOS en bas : on prolonge le retrait sous le contenu. */
  .content { padding-bottom:calc(46px + env(safe-area-inset-bottom,0px)); }
  /* #2 : les actions de la barre 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; }

  /* #1 : tableaux scrollables horizontalement (au lieu d'etre compresses/illisibles).
     Repli tablette (561-880px) ; sur telephone (<=560px) les tables .cards passent en
     cartes empilees, cf. bloc ci-dessous. */
  .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; } }