* { box-sizing: border-box; margin: 0; padding: 0; }
/* L'attribut `hidden` doit toujours l'emporter, même sur un élément dont une
   classe fixe `display` (nav-item, badge de la cloche, pastilles, bandeau
   client…) : sans cette règle, `display:flex/inline-flex` masque le
   comportement de [hidden] et le badge « 0 » resterait visible. */
[hidden] { display: none !important; }

:root {
  /* Design system "Vert notarial" — tokens de marque (brief 3.5, bloc 4.1).
     Toute couleur du reste de la feuille de style dérive de ceux-ci. */
  --vert-bouteille: #17402F;
  --vert-profond:  #0C2A1E;
  --vert-pale:     #E8F0EB;
  --papier:        #FAF8F3;
  --blanc:         #FFFFFF;
  --encre:         #1B1F1D;
  --encre-douce:   #5C6660;
  --encre-legere:  #8A9189;
  --or-patrimoine: #A8843C;
  /* Un seul vert sur tout le site : l'état « ok / positif » N'EST PAS un vert
     distinct — il pointe vers le vert bouteille de marque (brief tâche 2).
     --vert-profond = hover/active, --vert-pale = fonds légers. Seuls amber,
     danger, info gardent une teinte propre (statuts non-verts). */
  --ok:            var(--vert-bouteille);
  --attention:     #9A6B15;
  --danger:        #A93226;
  --info:          #2C5878;
  --ok-light:      var(--vert-pale);
  --attention-light: #F6ECD8;
  --danger-light:  #F5E4E1;
  --info-light:    #E3EDF3;
  --ok-dark:       var(--vert-profond);
  --attention-dark: #5C4009;
  --danger-dark:   #6E2015;
  --info-dark:     #1B3A4C;

  /* Alias de compatibilité : le reste de la feuille de style et les styles
     inline de app.js référencent encore ces noms historiques — ils pointent
     tous vers les tokens ci-dessus (source de vérité unique, rien en dur). */
  --bg: var(--papier);
  --surface: var(--blanc);
  --surface2: #F1EEE6;
  --border: #E3DFD3;
  --text: var(--encre);
  --text2: var(--encre-douce);
  --text3: var(--encre-legere);
  --green: var(--vert-bouteille);
  --green-light: var(--vert-pale);
  --green-dark: var(--vert-profond);
  --amber: var(--attention);
  --amber-light: var(--attention-light);
  --amber-dark: var(--attention-dark);
  --red: var(--danger);
  --red-light: var(--danger-light);
  --red-dark: var(--danger-dark);
  --blue: var(--info);
  --blue-light: var(--info-light);
  --blue-dark: var(--info-dark);
  --sidebar-w: 224px;

  /* Échelle de rayons resserrée : les grands arrondis uniformes sont le premier
     marqueur « template ». Cartes 8, boutons 6, badges 4, inputs 6 (brief 5.1).
     Exceptions volontaires : cercles (avatars, pastilles, dots), pilules
     (chat fab, segmented) et le bloc signature DPE gardent leur forme propre. */
  --radius-card:  8px;
  --radius-btn:   6px;
  --radius-badge: 4px;
  --radius-input: 6px;

  /* Échelle typographique — 12/14/16/20/28/40 (brief 4.2) */
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 28px;
  --fs-6: 40px;

  /* Typographie — 2 rôles : Fraunces pour les chiffres héros et titres,
     Public Sans (tabular-nums) pour tout le reste, y compris TOUS les montants
     courants. Aucune police mono sur les montants (règle typographique unique). */
  --font-display: 'Fraunces', serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Filet de sécurité : tout contrôle natif restant (checkbox, radio, select,
     barre de progression) se teinte en vert de marque au lieu du bleu système.
     Les champs date, eux, sont remplacés par le datepicker Bailin. */
  accent-color: var(--vert-bouteille);
}

body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 13.5px; line-height: 1.5; display: flex; height: 100vh; overflow: hidden; }
.table, .metric-value, .metric-sub { font-variant-numeric: tabular-nums; }
input::placeholder { color: var(--encre-legere); opacity: 1; }

/* AUTOFILL CHROME — le remplissage automatique impose un fond bleu pâle qui
   écrase le design sur TOUS les formulaires du site (auth, profil, mots de
   passe, formulaires de bien). Le fond ne peut pas être redéfini directement :
   on le masque par une ombre interne opaque, et la transition à 5000 s empêche
   Chrome de repeindre le bleu à la reprise du focus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--blanc) inset;
  box-shadow: 0 0 0 1000px var(--blanc) inset;
  -webkit-text-fill-color: var(--encre);
  caret-color: var(--encre);
  transition: background-color 5000s ease-in-out 0s;
}

/* SIDEBAR — fond vert bouteille, marque immédiatement identifiable (brief 4.4) */
.sidebar { width: var(--sidebar-w); background: var(--vert-bouteille); border-right: 1px solid var(--vert-profond); display: flex; flex-direction: column; flex-shrink: 0; height: 100vh; font-family: var(--font-body); }
.logo { padding: 20px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.12); }
/* Logo = wordmark seul (pas de pictogramme). Fraunces, grand, point final or. */
.logo-text { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--vert-bouteille); letter-spacing: -0.01em; }
.logo-text::after { content: '.'; color: var(--or-patrimoine); font-weight: 700; font-size: 1.1em; }
.sidebar .logo-text { color: var(--papier); }
.nav { padding: 8px 0; flex: 1; overflow-y: auto; }
.nav-section { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; padding: 14px 16px 4px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 16px; font-size: 12.5px; font-family: var(--font-body); color: rgba(255,255,255,0.82); font-weight: 600; cursor: pointer; border-radius: 0; margin: 0; transition: background 0.1s; text-decoration: none; position: relative; }
.nav-item:hover { background: rgba(255,255,255,0.08); }
.nav-item.active { background: var(--vert-profond); color: #fff; }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--or-patrimoine); border-radius: 0 2px 2px 0; }
.nav-item i { font-size: 16px; color: inherit; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--papier); flex-shrink: 0; }
.avatar-name { font-size: 12px; font-weight: 500; font-family: var(--font-body); color: var(--papier); }
.avatar-plan { font-size: 11px; color: rgba(255,255,255,0.6); }
.logout-btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.6); font-size: 13px; padding: 0; display: flex; align-items: center; gap: 5px; }
.logout-btn:hover { color: #fff; }

/* MAIN */
.main { flex: 1; overflow-y: auto; padding: 32px 32px 48px; position: relative; }
.page { display: none; }
.page.active { display: block; }
/* Bandeau d'en-tête de page (tâche 6) : titre Fraunces + sous-titre + action,
   posé sur un léger fond papier chaud avec un filet or en pied — présent sur
   toutes les pages catégories via la classe .page-header. */
/* Toutes les pages ont la même charpente d'en-tête : le titre à gauche, les
   actions à droite — dont la cloche de notifications, toujours en dernier
   (tâche 3). */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding: 0 0 16px; border-bottom: 2px solid var(--or-patrimoine); }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.page-title { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.page-sub { font-size: 12.5px; color: var(--text3); margin-top: 3px; letter-spacing: 0.01em; }

/* CLOCHE — icône seule (le libellé est porté par aria-label/title), carrée, au
   même gabarit que les boutons voisins. La pastille rouge signale des items
   jamais consultés ; elle s'éteint à l'ouverture du panneau. */
.btn-cloche { padding: 7px; width: 32px; height: 32px; justify-content: center; position: relative; }
.btn-cloche i { font-size: 16px; }
.notif-point { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--papier); }

/* METRICS — fond blanc uniforme, l'état se lit via une bordure gauche de 3px
   (classes .kpi--ok/--warning/--danger/--neutral posées en JS, brief 2.2/4.3) */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.metric { background: var(--blanc); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: none; }
.metric.kpi--neutral { border-left-color: var(--border); }
.metric.kpi--ok { border-left-color: var(--ok); }
.metric.kpi--warning { border-left-color: var(--attention); }
.metric.kpi--danger { border-left-color: var(--danger); }
.metric-label { font-size: 10.5px; color: var(--encre-douce); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; font-variant-caps: all-small-caps; }
.metric-label-help { cursor: help; display: inline-flex; align-items: center; gap: 4px; }
.metric-label-help .ti-info-circle { font-size: 11px; }
/* Règle typographique unique des montants : Public Sans + tabular-nums partout,
   Fraunces réservé aux chiffres héros (KPI du dashboard, totaux de la page
   Revenus, jours restants du compte à rebours DPE). */
.metric-value { font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.metrics .metric-value, #revenus-totaux .metric-value { font-family: var(--font-display); font-size: var(--fs-5); }
.metric-sub { font-size: 11px; margin-top: 4px; }
.ok { color: var(--ok); font-family: var(--font-body); }
.warn { color: var(--attention-dark); }
.danger { color: var(--danger-dark); }

/* GRID */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }

/* CARD — bordure unique 1px vert pâle, pas d'ombre (hiérarchie : les cartes
   standard s'effacent, seul le compte à rebours DPE est un bloc sombre) */
.card { background: var(--surface); border: 1px solid var(--vert-pale); border-radius: var(--radius-card); padding: 24px; box-shadow: none; }

/* EN-TÊTE DE SECTION — titre Fraunces en casse normale (plus de PETITES
   MAJUSCULES ni d'icône décorative), prolongé par un filet fin vert pâle qui
   court jusqu'au bord de la section. L'action éventuelle (« Voir le détail »)
   reste alignée à droite sur la même ligne (brief 5.2). */
.section-header { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
.section-header::after { content: ''; flex: 1; height: 1px; background: var(--vert-pale); }
.card-title-row { display: flex; align-items: center; gap: 14px; }
.card-title-row .section-header { flex: 1; margin-bottom: 0; }

/* Rythme vertical du dashboard : sections espacées d'un multiple de 8px */
.section-block { margin-bottom: 24px; }

/* Le dashboard est repassé en une seule colonne pleine largeur (tâche 3) : le
   rail droit permanent faisait doublon avec la cloche, « À traiter » vit
   désormais dans le panneau latéral. Les 4 KPI tiennent donc sur une ligne
   (règle générale `.metrics`), puis 2 sous 860px et 1 sous 480px. */
.btn-link { background: none; border: none; color: var(--green-dark); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; text-decoration: underline; }
.btn-link:hover { opacity: 0.75; }
.btn-link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }

/* COMPTE À REBOURS DPE — composant signature */
.dpe-countdown { background: var(--green-dark); border-radius: 14px; padding: 24px 26px; color: #F3F5F2; }
.dpe-countdown + .dpe-countdown { margin-top: 12px; }
.dpe-countdown-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.dpe-countdown-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #A9C2B4; display: flex; align-items: center; gap: 7px; }
.dpe-countdown-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,0.12); }
.dpe-countdown-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dpe-countdown-days { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.dpe-countdown-days-label { font-size: 12.5px; color: #C7D9CE; max-width: 34ch; line-height: 1.5; }
.dpe-countdown-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.15); overflow: hidden; margin-bottom: 16px; }
.dpe-countdown-bar-fill { height: 100%; border-radius: 99px; background: var(--or-patrimoine); transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .dpe-countdown-bar-fill { transition: none; } }
.dpe-countdown-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #DCE5E0; }
.dpe-countdown-cost strong { color: #fff; font-variant-numeric: tabular-nums; }
.dpe-countdown-link { color: #fff; font-weight: 600; text-decoration: underline; display: inline-flex; align-items: center; gap: 5px; }
.dpe-countdown-link:hover { opacity: 0.85; }

/* GRAPHIQUE REVENUS */
.revenu-chart-wrap { position: relative; }
.revenu-bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 8px; }
.revenu-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; cursor: default; border-radius: 6px; }
.revenu-bar-track { position: relative; width: 100%; max-width: 28px; flex: 1; background: var(--surface2); border-radius: 4px; overflow: visible; display: flex; align-items: flex-end; }
.revenu-bar-fill { width: 100%; border-radius: 4px; min-height: 2px; transition: height 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .revenu-bar-fill, .score-fill { transition: none; } }
.revenu-bar-ok { background: var(--green); }
.revenu-bar-warn { background: var(--amber); }
.revenu-bar-danger { background: var(--red); }
.revenu-bar-none, .revenu-bar-attente { background: var(--border); }
.revenu-bar-target { position: absolute; left: -3px; right: -3px; height: 2px; background: var(--text); opacity: 0.4; }
.revenu-bar-label { font-size: 10.5px; color: var(--text3); margin-top: 8px; text-transform: capitalize; }
.revenu-tooltip { position: absolute; transform: translate(-50%, -100%) translateY(-8px); background: var(--text); color: var(--surface); font-size: 11.5px; line-height: 1.5; padding: 8px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-variant-numeric: tabular-nums; }
.revenu-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 11.5px; color: var(--text2); }
.revenu-legend span { display: flex; align-items: center; gap: 6px; }
.revenu-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.revenu-target-icon { width: 10px; height: 2px; background: var(--text); opacity: 0.4; display: inline-block; }

/* SEGMENTED CONTROL — sélecteur de période (page Revenus) */
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden; flex-shrink: 0; }
.segmented-btn { padding: 6px 13px; font-size: 12px; font-weight: 600; border: none; border-right: 1px solid var(--border); background: var(--surface); color: var(--text2); cursor: pointer; font-family: inherit; }
.segmented-btn:last-child { border-right: none; }
.segmented-btn:hover { background: var(--surface2); }
.segmented-btn.active { background: var(--green); color: #fff; }

/* TABLE */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--vert-pale); }

/* RANGÉES CLIQUABLES (tâche 2) — la ligne entière ouvre la fiche, le survol la
   désigne d'un aplat vert pâle, et les actions destructrices ne se montrent
   qu'au survol : une table se lit d'abord, elle ne se pilote qu'ensuite. */
.table-clic tbody tr { cursor: pointer; }
.table-clic tbody tr td { transition: background 0.12s ease; }
.table-clic tbody tr:focus-visible { outline: 2px solid var(--vert-bouteille); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .table-clic tbody tr td { transition: none; } }
/* Actions de rangée : invisibles au repos, révélées au survol ou au focus
   clavier (jamais inaccessibles — `visibility` reste `visible`). */
.table .row-actions { opacity: 0; transition: opacity 0.12s ease; justify-content: flex-end; }
.table tbody tr:hover .row-actions,
.table tbody tr:focus-within .row-actions { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .table .row-actions { transition: none; } }
@media (hover: none) { .table .row-actions { opacity: 1; } }
/* Bouton d'action de rangée : icône seule, discrète, qui ne prend sa couleur
   d'état (rouge pour la suppression) qu'au survol. */
.row-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: var(--radius-btn); border: 1px solid var(--vert-pale); background: var(--blanc); color: var(--encre-douce); cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; }
.row-btn i { font-size: 15px; }
.row-btn:hover { background: var(--blanc); border-color: var(--vert-bouteille); color: var(--vert-bouteille); }
.row-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
@media (prefers-reduced-motion: reduce) { .row-btn { transition: none; } }

/* Cellule principale d'une rangée : libellé fort + précision discrète dessous
   (adresse d'un bien, contact d'un client). */
.cell-titre { font-weight: 600; color: var(--encre); }
.cell-sub { font-size: 11px; color: var(--encre-legere); margin-top: 1px; }
.cell-vide { color: var(--encre-legere); }
.cell-nom { display: flex; align-items: center; gap: 9px; }
/* Montants et mesures : toujours en chiffres tabulaires, alignés en colonne. */
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pastille DPE — la classe énergétique est une donnée séquentielle : lettre
   blanche sur l'aplat officiel de sa classe, jamais un simple texte coloré. */
.dpe-pastille { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-badge); font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: 0; }

/* En-tête de groupe par client (Pro, tâche 7). Il coiffe désormais une grille
   de fiches et non plus une table : la mise en forme ne dépend d'aucun <tr>. */
.table-groupe { display: flex; align-items: center; gap: 14px; padding: 18px 14px 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--encre); }
.table-groupe::after { content: ''; flex: 1; height: 1px; background: var(--vert-pale); }
.table-groupe-compte { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--encre-legere); letter-spacing: 0.01em; }

/* Filet de sécurité : sous les écrans larges, une table défile dans son propre
   conteneur — jamais la page entière. */
.table-scroll { overflow-x: auto; }
.loc-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--vert-pale); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--vert-profond); flex-shrink: 0; }
.loc-contact { color: var(--text2); font-size: 12px; line-height: 1.45; }
.loc-tel { color: var(--text3); font-variant-numeric: tabular-nums; }

/* FILTRE PAR PERSONNE (tâche 8) — champ de recherche + suggestions, en haut à
   gauche des pages Biens, Locataires et Clients en contexte pro. Bordure vert
   pâle, dropdown blanc, survol vert pâle : mêmes conventions que le switcher. */
.fp { position: relative; width: 280px; max-width: 100%; margin-bottom: 14px; }
.fp-champ { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--blanc); border: 1px solid var(--vert-pale); border-radius: var(--radius-input); transition: border-color 0.12s; }
.fp-champ:focus-within { border-color: var(--vert-bouteille); }
@media (prefers-reduced-motion: reduce) { .fp-champ { transition: none; } }
.fp-ic { font-size: 15px; color: var(--encre-legere); flex-shrink: 0; }
.fp-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 12.5px; color: var(--encre); }
.fp-x { display: flex; background: none; border: none; cursor: pointer; color: var(--encre-douce); padding: 0; font-size: 15px; }
.fp-x:hover { color: var(--vert-bouteille); }
.fp-sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--blanc); border: 1px solid var(--vert-pale); border-radius: var(--radius-card); box-shadow: 0 12px 30px rgba(12,42,30,0.14); padding: 6px; display: flex; flex-direction: column; }
.fp-item { text-align: left; background: none; border: none; padding: 8px 10px; border-radius: var(--radius-btn); font-family: inherit; font-size: 12.5px; color: var(--encre); cursor: pointer; }
.fp-item:hover { background: var(--vert-pale); }
.fp-vide { padding: 8px 10px; font-size: 12px; color: var(--encre-legere); }

/* BADGE — inline-flex et non inline : la hauteur et l'alignement vertical d'un
   badge ne doivent pas dépendre du contenu de la cellule voisine (tâche 2.5). */
.badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-badge); letter-spacing: 0.01em; line-height: 1.5; white-space: nowrap; }
.badge-ok { background: var(--green-light); color: var(--green-dark); }
/* Le fond du badge « ok » EST le vert pâle du survol de rangée : sur la ligne
   survolée, il disparaissait et le badge « Actif » semblait différent d'une
   rangée à l'autre (tâche 2.5). Sur fond survolé, il repasse en blanc — même
   forme, même poids, sur toutes les lignes. */
.table tbody tr:hover .badge-ok { background: var(--blanc); }
.badge-warn { background: var(--amber-light); color: var(--amber-dark); }
.badge-danger { background: var(--red-light); color: var(--red-dark); }
.badge-info { background: var(--surface2); color: var(--text2); }

/* À TRAITER — pas une carte : liste d'items avec pastille de niveau, bordure
   gauche colorée et fond légèrement teinté par niveau */
.traiter-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-card); margin-bottom: 8px; border-left: 3px solid var(--encre-legere); background: var(--surface2); }
.traiter-item:last-child { margin-bottom: 0; }
.traiter-danger { border-left-color: var(--danger); background: var(--danger-light); }
.traiter-warning { border-left-color: var(--attention); background: var(--attention-light); }
.traiter-info { border-left-color: var(--info); background: var(--info-light); }
.traiter-clickable { cursor: pointer; transition: filter 0.12s; }
.traiter-clickable:hover { filter: brightness(0.97); }
.traiter-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--encre-legere); }
.traiter-danger .traiter-dot { background: var(--danger); }
.traiter-warning .traiter-dot { background: var(--attention); }
.traiter-info .traiter-dot { background: var(--info); }
.traiter-item > i.ti { font-size: 15px; margin-top: 1px; flex-shrink: 0; color: var(--text2); }
.traiter-danger > i.ti { color: var(--danger); }
.traiter-warning > i.ti { color: var(--attention); }
.traiter-info > i.ti { color: var(--info); }
.traiter-content { flex: 1; min-width: 0; }
.traiter-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.traiter-danger .traiter-title { color: var(--danger-dark); }
.traiter-warning .traiter-title { color: var(--attention-dark); }
.traiter-info .traiter-title { color: var(--info-dark); }
.traiter-text { font-size: 12px; color: var(--text2); margin-top: 2px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.traiter-chevron { font-size: 14px; color: var(--text3); flex-shrink: 0; margin-top: 2px; transition: transform 0.15s; }
.traiter-item[aria-expanded="true"] .traiter-chevron { transform: rotate(90deg); }
.traiter-irl-detail { margin-top: 10px; padding: 12px 14px; background: var(--blanc); border: 1px solid var(--vert-pale); border-radius: var(--radius-card); font-size: 12.5px; color: var(--text2); line-height: 1.7; font-variant-numeric: tabular-nums; }
.traiter-irl-detail strong { color: var(--vert-profond); }
.traiter-empty { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-card); background: var(--ok-light); color: var(--ok-dark); font-size: 12.5px; font-weight: 500; }
.traiter-empty i { color: var(--ok); font-size: 16px; }

/* ACTIVITÉ RÉCENTE — timeline : liste simple, filet séparateur, pas de cartes */
.timeline-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--vert-pale); }
.timeline-item:last-child { border-bottom: none; }
.timeline-item i.ti { font-size: 15px; margin-top: 1px; flex-shrink: 0; color: var(--encre-legere); }
.timeline-item.ok i.ti { color: var(--ok); }
.timeline-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.timeline-text { font-size: 12px; color: var(--text2); margin-top: 1px; line-height: 1.5; font-variant-numeric: tabular-nums; }

/* CHAT */
/* Le bouton et le panneau vivent au-dessus de tout le contenu (z-index 900/901).
   Le rail du dashboard est en position:sticky — donc dans son propre contexte
   d'empilement : sans un z-index franchement supérieur, le contenu du rail
   repeignait par-dessus le panneau (« fragments coupés » derrière le chat). */
/* ── Switcher de client (Pro, tâche 3) ─────────────────────────────────────── */
.client-switcher { position: relative; margin: 10px 12px 2px; }
.cs-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border-radius: var(--radius-btn); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); color: var(--papier); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.cs-btn:hover { background: rgba(255,255,255,0.17); }
.cs-ic { font-size: 15px; opacity: 0.85; }
.cs-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chev { font-size: 15px; opacity: 0.8; }
.cs-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--vert-pale); border-radius: var(--radius-card); box-shadow: 0 12px 30px rgba(12,42,30,0.22); z-index: 950; padding: 8px; }
.cs-search { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 7px 10px; font-size: 12.5px; font-family: inherit; outline: none; margin-bottom: 6px; background: var(--blanc); color: var(--encre); }
.cs-search:focus { border-color: var(--vert-bouteille); }
.cs-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.cs-item { text-align: left; background: none; border: none; padding: 8px 10px; border-radius: var(--radius-btn); font-family: inherit; font-size: 12.5px; color: var(--encre); cursor: pointer; }
.cs-item:hover { background: var(--vert-pale); }
.cs-item.sel { background: var(--vert-pale); font-weight: 600; color: var(--vert-bouteille); }
.cs-item i { font-size: 14px; }

/* Bandeau contexte client */
.client-banner { display: flex; align-items: center; gap: 7px; padding: 8px 16px; background: var(--vert-pale); color: var(--vert-profond); font-size: 12.5px; border-bottom: 1px solid var(--border); }
.client-banner b { font-weight: 700; }
.client-banner i { font-size: 15px; }
.client-banner-x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--vert-bouteille); font-size: 15px; display: flex; }

.badge-neutre { background: var(--surface2); color: var(--encre-douce); }

/* Pastille de menu : point rouge discret sur une entrée de nav concernée */
.nav-pastille {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 2px var(--vert-bouteille);
}
.nav-item.active .nav-pastille { box-shadow: 0 0 0 2px var(--vert-profond); }

/* PANNEAU LATÉRAL « À TRAITER » (tâche 3) — glisse depuis le bord droit, par
   dessus un voile léger. Il remplace à la fois l'ancien panneau flottant de la
   cloche et le rail droit permanent du dashboard, qui disaient la même chose. */
.drawer-voile { position: fixed; inset: 0; background: rgba(27,31,29,0.28); z-index: 940; animation: voile-fondu 0.16s ease-out; }
@keyframes voile-fondu { from { opacity: 0; } to { opacity: 1; } }
.notif-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw;
  background: var(--surface); border-left: 1px solid var(--vert-pale);
  z-index: 941; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -14px 0 40px rgba(12,42,30,0.18);
  transform: translateX(100%); transition: transform 0.2s ease-out;
  visibility: hidden;
}
.notif-drawer.open { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .notif-drawer { transition: none; }
  .drawer-voile { animation: none; }
}
.drawer-entete { display: flex; align-items: center; gap: 12px; padding: 20px 20px 0; }
.drawer-entete .section-header { flex: 1; margin-bottom: 0; font-size: 17px; }
.drawer-corps { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
/* Dans 400px, les items se resserrent d'un cran (mêmes cartes qu'au rail) */
.drawer-corps .traiter-item { padding: 10px 12px; }
.drawer-corps .traiter-title { font-size: 12px; }
.drawer-corps .traiter-text { font-size: 11.5px; }
.notif-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 18px; display: flex; padding: 2px; }
.notif-close:hover { color: var(--encre); }

/* ── Relance locataire : modale 3 étapes + fil d'échanges (tâche 5) ─────────── */
.relance-titre { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--encre); margin-bottom: 14px; }
.relance-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.relance-step { font-size: 11.5px; font-weight: 600; color: var(--encre-legere); }
.relance-step.active { color: var(--vert-bouteille); }
.relance-step.done { color: var(--vert-bouteille); opacity: 0.7; }
.relance-step-sep { font-size: 13px; color: var(--encre-legere); }
.relance-cats { display: flex; flex-direction: column; gap: 8px; }
.relance-cat { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-btn); cursor: pointer; font-size: 13px; transition: border-color 0.12s, background 0.12s; }
.relance-cat:hover { background: var(--vert-pale); }
.relance-cat.sel { border-color: var(--vert-bouteille); background: var(--vert-pale); }
.relance-cat input { accent-color: var(--vert-bouteille); }
.relance-cat span { flex: 1; }
.relance-sugg { flex: none !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--or); background: #F6EEDD; padding: 2px 7px; border-radius: var(--radius-badge); }
.relance-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--encre-douce); margin-bottom: 5px; }
.relance-input, .relance-textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-input); padding: 9px 11px; font-size: 13px; font-family: inherit; background: var(--blanc); color: var(--encre); outline: none; }
.relance-input:focus, .relance-textarea:focus { border-color: var(--vert-bouteille); }
.relance-textarea { resize: vertical; line-height: 1.55; }
.relance-meta { font-size: 11px; color: var(--encre-legere); margin-top: 10px; }
.relance-alerte { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 12px; border-radius: var(--radius-btn); background: var(--attention-light); color: var(--attention-dark); font-size: 12px; }
.relance-apercu { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; background: var(--papier); }
.relance-apercu-objet { font-weight: 600; font-size: 13.5px; color: var(--encre); padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--border); }
.relance-apercu-corps { font-size: 12.5px; line-height: 1.6; color: var(--encre); }
.relance-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.echanges-fil { display: flex; flex-direction: column; gap: 10px; }
.echange { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 11px 13px; background: var(--blanc); }
.echange-out { border-left: 3px solid var(--vert-bouteille); }
.echange-in { border-left: 3px solid var(--or); background: var(--papier); }
.echange-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.echange-cat { font-size: 11.5px; font-weight: 600; color: var(--vert-bouteille); }
.echange-statut { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--radius-badge); }
.echange-statut.est-ok { background: var(--vert-pale); color: var(--vert-bouteille); }
.echange-statut.est-err { background: var(--danger-light); color: var(--danger); }
.echange-statut.est-neutre { background: var(--surface2); color: var(--encre-douce); }
.echange-date { font-size: 11px; color: var(--encre-legere); margin-left: auto; }
.echange-objet { font-size: 12.5px; font-weight: 600; color: var(--encre); margin-bottom: 3px; }
.echange-corps { font-size: 12px; line-height: 1.5; color: var(--encre-douce); }

.chat-fab { position: fixed; bottom: 24px; right: 24px; height: 44px; padding: 0 18px 0 16px; border-radius: 99px; background: var(--green); border: 1px solid var(--green-dark); cursor: pointer; display: flex; align-items: center; gap: 8px; z-index: 900; transition: background 0.15s; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.chat-fab:hover { background: var(--green-dark); }
.chat-fab i { font-size: 18px; color: #fff; }
.chat-fab span { color: #fff; font-size: 13px; font-weight: 600; font-family: var(--font-body); }
/* Panneau flottant, ancré en bas à droite juste au-dessus du bouton. En
   position:fixed il est retiré du flux : l'ouvrir ne pousse aucun élément de la
   page. Fermé, il reste dans le DOM mais non peint (display:none via l'absence
   de .open) pour ne pas capturer les clics. */
.chat-panel { position: fixed; bottom: 84px; right: 24px; width: 380px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px); background: var(--surface); border: 1px solid var(--vert-pale); border-radius: var(--radius-card); z-index: 901; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 16px 44px rgba(12,42,30,0.24); transform-origin: bottom right; }
.chat-panel.open { display: flex; animation: chat-pop 0.16s ease-out; }
@keyframes chat-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .chat-panel.open { animation: none; } }
.chat-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.chat-header-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.chat-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 18px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.msg-bot { background: var(--bg); color: var(--text); align-self: flex-start; }
.msg-user { background: var(--green); color: #fff; align-self: flex-end; }
.chat-input-wrap { padding: 10px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.chat-input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-input); padding: 8px 12px; font-size: 12px; outline: none; background: var(--bg); color: var(--text); font-family: inherit; }
.chat-input:focus { border-color: var(--green); }
.chat-send { width: 32px; height: 32px; background: var(--green); border: none; border-radius: var(--radius-btn); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-send i { font-size: 16px; color: #fff; }

/* SCORE BAR */
.score-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 6px; }
.score-fill { height: 6px; border-radius: 3px; transition: width 0.3s; }

/* ÉTAT VIDE — nomme ce qui manque et porte l'action, jamais une grille de zéros */
.etat-vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px; }
.etat-vide > i.ti { font-size: 30px; color: var(--vert-bouteille); opacity: 0.55; }
.etat-vide-maison { width: 56px; height: 56px; margin-bottom: 2px; }
.etat-vide-titre { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--encre); }
.etat-vide-texte { font-size: 13px; color: var(--encre-douce); max-width: 46ch; line-height: 1.6; }
.etat-vide .btn { margin-top: 4px; }

/* LOADING */
.loading { text-align: center; padding: 40px; color: var(--text3); font-size: 13px; }

/* SKELETON — état de chargement, jamais un texte "Chargement..." qui peut rester figé */
.skeleton-row { height: 36px; border-radius: 6px; margin-bottom: 8px; background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.skeleton-row:last-child { margin-bottom: 0; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-row { animation: none; background: var(--surface2); } }

/* ERREUR DE SECTION — jamais de chargement permanent : un message explicite + un retry */
.section-error { color: var(--red-dark); font-size: 12.5px; padding: 10px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* BTN — bouton secondaire du design system : fond blanc, bordure vert bouteille,
   texte vert (le primaire est plein, .btn-primary) */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-btn); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--vert-bouteille); background: var(--blanc); color: var(--vert-bouteille); transition: background 0.12s, border-color 0.12s; font-family: inherit; }
.btn:hover { background: var(--vert-pale); }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green-dark); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
/* Bouton désactivé : présent et lisible, mais visiblement inerte — son `title`
   dit pourquoi (« Aucun retard en cours »). */
.btn:disabled, .btn:disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--blanc); }
.btn-primary:disabled, .btn-primary:disabled:hover { background: var(--green); }
.btn i { font-size: 15px; }
.row-actions { display: flex; gap: 6px; }

/* AUTH — l'écran d'entrée est le premier contact avec la marque : fond vert
   bouteille pleine hauteur, wordmark papier POSÉ SUR LE VERT, et une seule
   carte claire qui porte le formulaire. Le formulaire lui-même reste clair
   (labels encre, inputs blancs) : le vert est le décor, pas le papier. */
.auth-overlay { position: fixed; inset: 0; background: var(--vert-bouteille); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 20px; overflow-y: auto; }
.auth-overlay.hidden { display: none; }
.auth-card { background: var(--papier); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-card); padding: 36px 40px; width: 420px; max-width: 100%; flex-shrink: 0; box-shadow: 0 18px 48px rgba(0,0,0,0.24); }
/* Logo hors carte, sur le fond vert — même traitement que la sidebar */
.auth-overlay > .auth-logo { display: flex; align-items: center; justify-content: center; margin: 0; flex-shrink: 0; }
.auth-overlay > .auth-logo .logo-text { font-size: 40px; color: var(--papier); letter-spacing: -0.01em; }
.auth-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--encre); margin-bottom: 6px; letter-spacing: -0.01em; }
.auth-sub { font-size: 13px; color: var(--encre-douce); margin-bottom: 24px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--encre); margin-bottom: 5px; }
.auth-field input { width: 100%; padding: 9px 12px; border: 1px solid var(--vert-pale); border-radius: var(--radius-input); font-size: 13px; background: var(--blanc); color: var(--encre); outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; }
.auth-field input:focus { border-color: var(--vert-bouteille); box-shadow: 0 0 0 3px rgba(23,64,47,0.12); }
.auth-btn { width: 100%; padding: 10px; background: var(--vert-bouteille); color: var(--papier); border: 1px solid var(--vert-profond); border-radius: var(--radius-btn); font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 6px; transition: background 0.15s; font-family: inherit; }
.auth-btn:hover { background: var(--vert-profond); }
.auth-switch { margin-top: 16px; text-align: center; font-size: 12px; color: var(--encre-douce); }
/* Liens du formulaire : vert bouteille, soulignés au survol uniquement */
.auth-card a, .auth-switch a { color: var(--vert-bouteille); cursor: pointer; font-weight: 600; text-decoration: none; }
.auth-card a:hover, .auth-switch a:hover { text-decoration: underline; }
.auth-error { margin-top: 10px; padding: 8px 12px; background: var(--red-light); color: var(--red-dark); border-radius: var(--radius-input); font-size: 12px; display: none; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-card hr { border: none; border-top: 1px solid var(--vert-pale); margin: 20px 0; }

/* CHOIX D'AFFICHAGE DES LOYERS (cc / hc) — inscription + Paramètres */
.rent-mode-choice { display: flex; flex-direction: column; gap: 8px; }
/* Sélecteur descendant obligatoire : ces options sont des <label> posés dans un
   .auth-field, et `.auth-field label { display: block }` l'emporterait sinon
   sur le flex (spécificité 0-1-1 contre 0-1-0) — la puce passerait au-dessus
   du libellé au lieu d'être à sa gauche. */
.rent-mode-choice .rent-mode-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-input); cursor: pointer; transition: border-color 0.12s, background 0.12s; margin-bottom: 0; }
.rent-mode-choice .rent-mode-opt:hover { border-color: var(--vert-bouteille); }
.rent-mode-choice .rent-mode-opt input { flex-shrink: 0; accent-color: var(--vert-bouteille); width: 16px; height: 16px; }
.rent-mode-choice .rent-mode-opt:has(input:checked) { border-color: var(--vert-bouteille); background: var(--vert-pale); }
/* Sur la carte papier de l'inscription, les options reprennent le fond blanc
   des inputs et le filet vert pâle — le formulaire reste clair de bout en bout. */
.auth-card .rent-mode-choice .rent-mode-opt { background: var(--blanc); border-color: var(--vert-pale); }
.auth-card .rent-mode-choice .rent-mode-opt:has(input:checked) { border-color: var(--vert-bouteille); background: var(--vert-pale); }
.rent-mode-text { display: flex; flex-direction: column; gap: 1px; }
.rent-mode-title { font-size: 13px; font-weight: 600; color: var(--text); }
.rent-mode-ex { font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; }

/* Toggles « Emails automatiques » (tâche 1) : interrupteur vert de marque */
.auto-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; border-top: 1px solid var(--vert-pale); }
.auto-toggle:first-child { border-top: none; }
.auto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.auto-toggle-switch { flex-shrink: 0; width: 34px; height: 20px; border-radius: 999px; background: var(--border); position: relative; transition: background 0.15s; }
.auto-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.auto-toggle input:checked + .auto-toggle-switch { background: var(--vert-bouteille); }
.auto-toggle input:checked + .auto-toggle-switch::after { transform: translateX(14px); }
.auto-toggle input:focus-visible + .auto-toggle-switch { outline: 2px solid var(--vert-bouteille); outline-offset: 2px; }
.auto-toggle-label { font-size: 12.5px; color: var(--text); line-height: 1.4; }

/* Modale de régularisation des charges (tâche 8) */
.regul-label { display: block; font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 5px; }
.regul-input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-input); font-size: 13px; background: var(--surface); color: var(--text); outline: none; width: 100%; }
.regul-input:focus { border-color: var(--vert-bouteille); }
.logout-btn { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 13px; padding: 0; display: flex; align-items: center; gap: 5px; }
.logout-btn:hover { color: var(--red-dark); }

/* CASH-FLOW — courbe cumulée façon graphique boursier. Le trait plein est le
   réalisé, les pointillés la projection avec révisions IRL ; la frontière est
   matérialisée par un filet vertical étiqueté « Aujourd'hui ». */
.cashflow-formule { font-size: 12px; color: var(--encre-douce); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.cashflow-formule span { color: var(--encre-legere); margin: 0 2px; }
/* En-tête Cash-flow : filtre par bien (tâche 5) à gauche du sélecteur de
   période (tâche 3), alignés à droite du titre de section. */
.cashflow-controls { display: flex; align-items: center; gap: 10px; }
/* Filtre par bien : même gabarit que les boutons de période (padding/police),
   bordure --vert-pale, chevron maison (select natif dé-stylé). */
.cf-bien-filter {
  appearance: none; -webkit-appearance: none;
  padding: 6px 30px 6px 13px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  color: var(--text2); background-color: var(--surface);
  border: 1px solid var(--vert-pale); border-radius: var(--radius-btn);
  cursor: pointer; line-height: 1.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5d54' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.cf-bien-filter:hover { background-color: var(--surface2); }
.cf-bien-filter:focus-visible { outline: 2px solid var(--vert-pale); outline-offset: 1px; }
.cf-totaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.cf-totaux .metric-value { font-family: var(--font-display); font-size: var(--fs-5); }
.cf-pos { color: var(--vert-bouteille); }
.cf-neg { color: var(--danger); }
.cf-encart { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 16px; border-radius: var(--radius-card); background: var(--vert-pale); color: var(--vert-profond); font-size: 12px; }
.cf-encart i { font-size: 15px; flex-shrink: 0; }
.cf-wrap { position: relative; }
/* Hauteur auto + viewBox à la largeur mesurée = mise à l'échelle UNIFORME :
   le texte et les traits ne sont jamais étirés, quelle que soit la largeur. */
.cf-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cf-grille { stroke: var(--vert-pale); stroke-width: 1; }
.cf-axe-y, .cf-axe-x { font-family: var(--font-body); font-size: 10px; fill: var(--encre-legere); font-variant-numeric: tabular-nums; }
.cf-axe-x { text-transform: capitalize; }
/* Le zéro est un repère de lecture, pas une graduation comme les autres */
.cf-zero { stroke: var(--encre-douce); stroke-width: 1; opacity: 0.55; }
.cf-ligne { fill: none; stroke: var(--vert-bouteille); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cf-ligne-neg { stroke: var(--danger); }
/* Projection : même vert, atténué, en pointillés */
.cf-ligne-proj { stroke: var(--vert-bouteille); opacity: 0.62; stroke-dasharray: 5 4; }
.cf-aujourdhui { stroke: var(--encre-legere); stroke-width: 1; stroke-dasharray: 3 3; }
/* Label discret posé verticalement le long de la ligne pointillée (11px, petites
   capitales, --encre-douce) — surtout pas un titre en travers du graphe. */
.cf-aujourdhui-txt { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--encre-douce); text-transform: uppercase; letter-spacing: 0.08em; }
.cf-pt { fill: var(--vert-bouteille); stroke: var(--blanc); stroke-width: 1.5; cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.cf-pt-proj { fill: var(--vert-bouteille); opacity: 0; }
/* Un point de révision IRL reste visible en permanence : c'est l'évènement que
   la projection est censée donner à voir, pas un détail au survol. */
.cf-pt-rev { fill: var(--or-patrimoine); opacity: 1; }
/* Fin de crédit : anneau or (contour plein, centre papier) pour se distinguer
   du point plein d'une révision IRL — deux évènements, deux marques. */
.cf-pt-fincredit { fill: var(--papier); stroke: var(--or-patrimoine); stroke-width: 2.5; opacity: 1; }
.cf-svg:hover .cf-pt, .cf-pt:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cf-pt { transition: none; } }
.cf-tooltip { position: absolute; transform: translate(-50%, -100%) translateY(-10px); background: var(--encre); color: var(--papier); font-size: 11.5px; line-height: 1.55; padding: 8px 10px; border-radius: var(--radius-btn); white-space: nowrap; pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.18); font-variant-numeric: tabular-nums; }
.cf-tip-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-badge); background: rgba(255,255,255,0.16); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cf-tip-rev { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.2); color: #E8C98A; }
.cf-legende { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 11.5px; color: var(--encre-douce); }
.cf-legende span { display: flex; align-items: center; gap: 7px; }
.cf-icone-plein { width: 16px; height: 2px; background: var(--vert-bouteille); display: inline-block; }
.cf-icone-pointille { width: 16px; height: 0; border-top: 2px dashed var(--vert-bouteille); opacity: 0.6; display: inline-block; }
.cf-icone-rev { width: 9px; height: 9px; border-radius: 50%; background: var(--or-patrimoine); display: inline-block; }

/* DATEPICKER BAILIN — calendrier unique du site (cf. static/datepicker.js).
   Les contrôles natifs restants (checkbox, radio, select) héritent du vert de
   marque via `accent-color` posé sur :root, plus bas dans ce fichier. */
.dp-input { font-variant-numeric: tabular-nums; }
.dp-pop {
  position: absolute; z-index: 1200; width: 296px; padding: 14px;
  background: var(--blanc); border: 1px solid var(--vert-pale);
  border-radius: var(--radius-card); box-shadow: 0 10px 28px rgba(27,31,29,0.13);
  font-family: var(--font-body); font-variant-numeric: tabular-nums;
}
.dp-entete { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
/* En-tête du mois en Fraunces : même signature typographique que les titres de section */
.dp-mois { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--encre); }
/* Menus mois/année : sélection rapide, dé-stylés au design system (chevron maison). */
.dp-selects { display: flex; gap: 6px; align-items: center; flex: 1; justify-content: center; }
.dp-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--encre);
  background-color: var(--blanc); border: 1px solid var(--vert-pale); border-radius: var(--radius-btn);
  padding: 4px 22px 4px 9px; cursor: pointer; line-height: 1.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5d54' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 6px center;
}
.dp-select:hover { background-color: var(--vert-pale); }
.dp-select:focus-visible { outline: 2px solid var(--vert-pale); outline-offset: 1px; }
.dp-select-mois { flex: 1; }
.dp-nav {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--vert-pale); border-radius: var(--radius-btn);
  background: var(--blanc); color: var(--vert-bouteille); cursor: pointer; padding: 0;
}
.dp-nav:hover { background: var(--vert-pale); }
.dp-nav i { font-size: 15px; }
.dp-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-entete-jours { margin-bottom: 4px; }
.dp-nom-jour {
  text-align: center; font-size: 10px; font-weight: 600; color: var(--encre-legere);
  text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0;
}
.dp-jour {
  height: 32px; border: none; background: none; cursor: pointer; padding: 0;
  border-radius: var(--radius-btn); font-family: inherit; font-size: 12.5px;
  color: var(--encre); font-variant-numeric: tabular-nums; position: relative;
}
.dp-jour:hover { background: var(--vert-pale); }
.dp-hors { color: var(--encre-legere); }
/* Aujourd'hui : cercle or patrimoine — repère, pas sélection */
.dp-aujourdhui { box-shadow: inset 0 0 0 1.5px var(--or-patrimoine); font-weight: 600; }
/* Jour sélectionné : plein vert bouteille, texte papier */
.dp-selectionne, .dp-selectionne:hover { background: var(--vert-bouteille); color: var(--papier); font-weight: 600; }
.dp-selectionne.dp-aujourdhui { box-shadow: inset 0 0 0 1.5px var(--or-patrimoine); }
.dp-pied {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vert-pale);
}
/* « Effacer » / « Aujourd'hui » : des liens verts, pas des boutons système */
.dp-lien {
  background: none; border: none; padding: 2px 2px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--vert-bouteille);
  text-decoration: none;
}
.dp-lien:hover { text-decoration: underline; }

/* FICHES — biens et locataires.
   Deux par ligne, dans l'esprit des bulles du tableau de bord : fond blanc,
   filet vert pâle, liseré de statut à gauche. Elles remplacent les tableaux,
   qui obligeaient à lire une ligne de huit colonnes pour situer un locataire. */
.fiches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.fiche {
  background: var(--blanc); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--radius-card);
  padding: 16px 18px; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; color: inherit; display: block;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.fiche:hover { border-color: var(--vert-bouteille); box-shadow: 0 4px 14px rgba(12, 42, 30, 0.10); transform: translateY(-1px); }
.fiche:focus-visible { outline: 2px solid var(--vert-bouteille); outline-offset: 2px; }
.fiche.kpi--ok { border-left-color: var(--ok); }
.fiche.kpi--warning { border-left-color: var(--attention); }
.fiche.kpi--danger { border-left-color: var(--danger); }

/* Bandeau du haut : identité à gauche, statut à droite. */
.fiche-tete { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.fiche-ident { flex: 1; min-width: 0; }
.fiche-titre {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 600;
  color: var(--text); letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fiche-sub {
  font-size: 12px; color: var(--encre-douce); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Faits saillants : deux ou trois colonnes de couples libellé / valeur. */
.fiche-faits { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.fiche-fait { min-width: 0; }
.fiche-fait-label {
  font-size: 10px; color: var(--encre-douce); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px;
}
.fiche-fait-valeur { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Pied : contact ou actions, séparé par un filet. */
.fiche-pied {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--vert-pale);
  font-size: 12px; color: var(--encre-douce); min-width: 0;
}
.fiche-pied-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Les actions destructrices n'apparaissent qu'au survol sur pointeur fin ;
   au doigt, elles sont toujours visibles (sinon inatteignables). */
.fiche-actions { opacity: 0; transition: opacity 0.12s; }
.fiche:hover .fiche-actions, .fiche:focus-within .fiche-actions { opacity: 1; }
@media (hover: none) { .fiche-actions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fiche, .fiche-actions { transition: none; }
  .fiche:hover { transform: none; }
}

/* En-tête de groupe (vue consolidée pro) : occupe toute la largeur de la
   grille, comme le faisait la ligne de groupe dans le tableau. */
.fiche-groupe { grid-column: 1 / -1; margin: 6px 0 -4px; }
.fiche-groupe:first-child { margin-top: 0; }

.fiches-vide { grid-column: 1 / -1; text-align: center; padding: 28px; color: var(--encre-douce); }

/* NAVIGATION MOBILE — bouton « trois bandes » et voile.
   Ils n'apparaissent qu'en dessous de 720 px ; sur grand écran la barre
   latérale est toujours là et ces éléments n'ont aucune raison d'exister. */
.nav-burger { display: none; }
.nav-scrim { display: none; }

/* RESPONSIVE */
@media (max-width: 860px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  /* Les fiches passent sur une colonne : à cette largeur, deux fiches côte à
     côte deviendraient illisibles. */
  .fiches { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { display: block; height: auto; overflow: visible; }

  /* Trois bandes, en haut à GAUCHE, au-dessus de tout le reste. Elles se
     transforment en croix quand le tiroir est ouvert. */
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 12px; left: 12px; z-index: 980;
    width: 42px; height: 42px; padding: 0 10px;
    background: var(--vert-bouteille); border: none;
    border-radius: var(--radius-btn); cursor: pointer;
    box-shadow: 0 2px 10px rgba(12, 42, 30, 0.28);
  }
  .nav-burger span {
    display: block; height: 2px; background: var(--papier); border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* La barre latérale devient un tiroir qui entre par la gauche, en gardant
     ses catégories empilées de haut en bas — la même liste que sur ordinateur,
     pas une barre horizontale qui défile. */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 975;
    width: 264px; max-width: 84vw; height: 100%;
    flex-direction: column; overflow-y: auto;
    transform: translateX(-100%); transition: transform 0.22s ease;
  }
  .sidebar.ouverte { transform: none; }
  .logo { padding: 18px 18px 18px 62px; }   /* dégage la place des trois bandes */
  .nav { display: block; overflow: visible; padding: 8px 0; }

  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 970; background: rgba(12, 42, 30, 0.45); }

  .main { padding: 66px 16px 32px; }        /* sous le bouton, qui est fixe */
  .page-header { flex-direction: column; align-items: stretch !important; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .nav-burger span { transition: none; }
}
@media (max-width: 480px) {
  .metrics { grid-template-columns: 1fr; }
  .revenu-bar-label { font-size: 9px; }
}