/* ═══ Thème Art Déco — noir & doré (bleu paon en 3ᵉ couleur) ═══════════
       La sémantique des variables est conservée : ce qui était « bleu »
       (structure/accent : nav, titres, en-têtes, focus, liens) devient l'OR ;
       ce qui était « blanc » (fonds de cartes/champs) devient une surface
       sombre ; le texte s'inverse en ivoire. L'impression (@media print)
       reste en noir sur blanc plus bas. */
    :root {
      /* ═══ Tokens sémantiques — source de vérité (DESIGN_SYSTEM §2) ══════
         Thème Art Déco noir & doré. Les anciens noms trompeurs (--bleu=doré,
         --blanc=surface sombre…) deviennent des ALIAS rétro-compatibles plus
         bas — utilisés notamment en styles inline dans le JS. */
      /* Neutres / structure */
      --fond:              #0d0c11;   /* fond de page */
      --surface:           #16141c;   /* cartes, champs, modales */
      --surface-2:         #211e28;   /* sous-sections, hover, en-têtes */
      --bordure:           #3d372c;   /* filets, séparateurs */
      --texte:             #ece6d6;   /* texte principal — ivoire */
      --texte-secondaire:  #a99f88;   /* labels, texte discret (AA sur sombre) */
      /* Accent doré — action primaire, actif, focus */
      --accent:            #c9a24b;
      --accent-clair:      #e3c774;
      --accent-sombre:     #8a6f2e;
      --accent-pale:       #4a3d1c;   /* fonds d'accent discrets */
      /* Accent secondaire */
      --info:              #2e86c1;   /* bleu paon (data-viz, liens info) */
      /* États */
      --vert:       #58c98a;   --vert-pale:  #15321f;
      --rouge:      #e5736a;   --rouge-pale: #3a1b18;
      --orange:     #e0a24a;   --orange-pale:#3a2c13;

      /* ── Alias rétro-compatibles (anciens noms, dépréciés — ne plus
         utiliser dans du code neuf ; conservés pour les références JS). ─── */
      --or: var(--accent);  --or-clair: var(--accent-clair);  --or-sombre: var(--accent-sombre);
      --bleu: var(--accent);  --bleu-clair: var(--accent-clair);  --bleu-pale: var(--accent-pale);
      --paon: var(--info);
      --noir: var(--fond);  --noir-2: var(--surface);  --noir-3: var(--surface-2);
      --gris-fonce: var(--texte);  --gris: var(--texte-secondaire);  --gris-clair: var(--surface-2);
      --blanc: var(--surface);
      /* Rendu natif sombre des contrôles de formulaire (popups de <select>,
         cases, scrollbars…) : évite le fond blanc par défaut des <option>. */
      color-scheme: dark;
      --ombre:      0 3px 14px rgba(0,0,0,.55);
      --rayon:      4px;        /* Art Déco : angles plus francs */

      /* ═══ Échelles de tokens (DESIGN_SYSTEM §3–6) ═══════════════════════
         Introduites pour résorber les valeurs magiques. La typographie est
         déjà câblée dessus ; espacements/ombres/rayons sont disponibles et
         seront appliqués progressivement (migration incrémentale). */
      /* Typographie — valeurs canoniques (px) */
      --txt-xs:   12px;   /* badges, métadonnées, légendes (11–12) */
      --txt-sm:   13px;   /* labels, texte secondaire, btn-sm */
      --txt-base: 15px;   /* corps, boutons, cellules (14–15) */
      --txt-md:   16px;   /* champs de formulaire mobile (anti-zoom iOS) */
      --txt-lg:   18px;   /* titres de modale / section (17–18) */
      --txt-xl:   22px;   /* titres d'écran (20–22) */
      --txt-2xl:  26px;   /* valeurs KPI */
      /* Police décorative Art Déco (auto-hébergée) — réservée aux GROS TITRES
         (marque « ASTONIA », titres d'écran/section/modale). Jamais le corps. */
      --police-titre: 'Limelight', 'Segoe UI', Arial, sans-serif;
      /* Espacement — échelle 4 pt */
      --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
      --esp-5: 20px; --esp-6: 24px; --esp-8: 32px;
      /* Rayons de bordure */
      --rayon-sm:   3px;
      --rayon-lg:   8px;
      --rayon-full: 50%;
      /* Ombres */
      --ombre-sm: 0 1px 3px rgba(0,0,0,.4);
      --ombre-lg: 0 8px 32px rgba(0,0,0,.5);
    }

    /* Police display Art Déco « Limelight » — auto-hébergée (CSP font-src 'self').
       Caractères capitales uniquement ; utilisée via --police-titre sur les titres. */
    @font-face {
      font-family: 'Limelight';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/assets/fonts/limelight.woff2') format('woff2');
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Focus clavier visible partout (boutons, liens, cartes cliquables…) —
       n'apparaît qu'à la navigation clavier, pas au clic souris/tactile. */
    :focus-visible {
      outline: 2px solid var(--accent-clair);
      outline-offset: 2px;
    }

    /* Lien d'évitement : invisible hors focus, permet au clavier de sauter
       directement au contenu sans traverser toute la navigation. */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      background: var(--accent);
      color: var(--surface);
      padding: 10px 16px;
      z-index: 300;
      border-radius: 0 0 var(--rayon) 0;
      text-decoration: none;
      font-weight: 600;
    }
    .skip-link:focus { left: 0; }
    #contenu:focus { outline: none; }

    /* Bouton qui ressemble à un lien (noms cliquables dans les tableaux) */
    .btn-lien {
      background: none;
      border: none;
      padding: 0;
      color: var(--accent-clair);
      text-decoration: underline;
      cursor: pointer;
      font-size: inherit;
      font-family: inherit;
      text-align: left;
    }
    .btn-lien:hover { color: var(--accent); }

    /* Cartes KPI cliquables : raccourcis vers la section concernée */
    .kpi-cliquable { cursor: pointer; transition: transform .1s, box-shadow .15s; }
    .kpi-cliquable:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.15); }

    /* ── Tableau de bord sur mobile ──────────────────────────────────────
       Les 5 onglets restent sur UNE ligne qui défile horizontalement
       (au lieu de s'empiler sur 3 lignes), les KPI passent en 2×2 compact,
       le sélecteur de propriétaire prend toute la largeur. */
    @media (max-width: 640px) {
      .param-onglets {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }
      .param-onglet { white-space: nowrap; flex: 0 0 auto; }
      .kpi-grille { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .kpi-carte { padding: 12px; }
      .kpi-valeur { font-size: 20px; }
      .selecteur-proprietaire, .selecteur-proprietaire select { width: 100%; }
      .tuiles-ligne { margin-left: 0; }
      .tuile-compte-nom { margin-left: 0; }
    }

    /* Écrans tactiles : cibles d'au moins 44 px (recommandation WCAG/Apple/Google) */
    @media (pointer: coarse) {
      nav button, .btn, .champ input, .champ select, .champ textarea {
        min-height: 44px;
      }
    }

    /* Filet de sécurité anti-scroll horizontal du document (MOBILE_UI_GUIDELINES R8).
       Le défilement horizontal reste possible dans les conteneurs .*-conteneur { overflow-x:auto }. */
    html, body { overflow-x: hidden; max-width: 100%; }

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      font-size: var(--txt-base);
      color: var(--texte);
      background: var(--fond);
      min-height: 100vh;
    }

    nav {
      background: var(--accent);
      color: var(--surface);
      padding: 0 20px;
      display: flex;
      align-items: stretch;
      gap: 6px;
      height: 52px;
      box-shadow: 0 2px 4px rgba(0,0,0,.3);
      position: sticky;
      top: 0;
      z-index: 100;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    nav .app-titre {
      font-family: var(--police-titre);
      font-size: 17px;
      font-weight: 700;
      margin-right: 10px;
      letter-spacing: .3px;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    nav button {
      background: transparent;
      border: none;
      border-bottom: 3px solid transparent;
      color: rgba(255,255,255,.75);
      padding: 0 12px;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: var(--txt-sm);
      transition: color .15s, border-color .15s;
      white-space: nowrap;
    }

    nav button:hover { color: var(--surface); }
    nav button.actif { color: var(--surface); border-bottom-color: var(--surface); font-weight: 600; }
    #nav-parametres { margin-left: auto; }

    nav a.app-titre {
      text-decoration: none;
      color: var(--surface);
      cursor: pointer;
      transition: opacity .15s;
    }
    nav a.app-titre:hover { opacity: .85; }

    @media (max-width: 640px) {
      nav { padding: 0 8px; gap: 4px; }
      nav .app-titre .nav-app-nom { display: none; }
      nav a.app-titre { font-size: var(--txt-md); margin-right: 0; padding: 6px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: var(--rayon); }
      nav .nav-label { display: none; }
      nav button { padding: 6px 8px; font-size: var(--txt-md); }
    }

    main {
      max-width: 1000px;
      margin: 28px auto;
      padding: 0 16px 60px;
    }

    /* Grands écrans : plus d'air pour les tableaux (relevés, suivi locataires) */
    @media (min-width: 1440px) {
      main { max-width: 1280px; }
    }

    .breadcrumb {
      font-size: var(--txt-sm);
      color: var(--texte-secondaire);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .breadcrumb span { cursor: pointer; color: var(--accent-clair); text-decoration: underline; }
    .breadcrumb span:last-child { color: var(--texte); text-decoration: none; cursor: default; font-weight: 600; }
    .breadcrumb .sep { color: var(--bordure); }

    .carte {
      background: var(--surface);
      border-radius: var(--rayon);
      box-shadow: var(--ombre);
      padding: 22px;
      margin-bottom: 18px;
    }

    .carte-titre {
      font-family: var(--police-titre);
      font-size: var(--txt-md);
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--accent-pale);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .grille-form {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px;
    }

    .champ-complet { grid-column: 1 / -1; }

    .champ label {
      display: block;
      font-size: var(--txt-sm);
      font-weight: 600;
      color: var(--texte-secondaire);
      margin-bottom: 4px;
    }

    .champ input,
    .champ select,
    .champ textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      font-size: 14px;
      font-family: inherit;
      background: var(--surface);
      color: var(--texte);
      transition: border-color .15s;
    }

    .champ input:focus,
    .champ select:focus,
    .champ textarea:focus {
      outline: none;
      border-color: var(--accent-clair);
      box-shadow: 0 0 0 3px rgba(46,134,193,.15);
    }

    .champ input:disabled,
    .champ select:disabled,
    .champ textarea:disabled {
      background: var(--surface-2);
      color: var(--texte);
      cursor: default;
    }

    .champ textarea { resize: vertical; min-height: 70px; }
    .champ-inline { display: flex; gap: 8px; align-items: center; }
    .champ-inline input[type="checkbox"] { width: auto; }

    .sous-section {
      grid-column: 1 / -1;
      margin-top: 6px;
      padding: 14px;
      background: var(--surface-2);
      border-radius: var(--rayon);
    }

    .sous-section-titre {
      font-size: var(--txt-xs);
      font-weight: 700;
      color: var(--texte-secondaire);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 10px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 16px;
      border: none;
      border-radius: var(--rayon);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity .15s, transform .1s;
    }

    .btn:active { transform: scale(.97); }
    .btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
    .btn:not(:disabled):hover { opacity: .85; }

    .btn-primaire   { background: var(--accent-clair); color: var(--surface); }
    .btn-succes     { background: var(--vert);       color: var(--surface); }
    .btn-danger     { background: var(--rouge);      color: var(--surface); }
    .btn-secondaire { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bordure); }
    .btn-orange     { background: var(--orange);     color: var(--surface); }
    .btn-sm         { padding: 5px 10px; font-size: var(--txt-xs); }

    .barre-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .barre-actions .separateur { flex: 1; }

    /* Sélecteur-titre de la fiche locataire (permet de switcher de locataire) */
    .select-titre-locataire {
      font-size: 1.1rem; font-weight: 600; padding: 8px 10px; max-width: 100%;
      border-radius: var(--rayon); background: var(--surface-2);
      color: var(--texte); border: 1px solid var(--bordure); cursor: pointer;
    }

    /* Vignettes de documents (fiche locataire) : plus lisibles que des boutons
       sur mobile. Une vignette grisée = document absent. */
    .vignettes-docs { display: flex; flex-wrap: wrap; gap: 8px; }
    .vignette-doc {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 4px; width: 84px; min-height: 74px; padding: 8px 6px;
      background: var(--surface-2); color: var(--texte);
      border: 1px solid var(--bordure); border-radius: var(--rayon);
      cursor: pointer; font-size: var(--txt-xs); text-align: center; line-height: 1.2;
    }
    .vignette-doc:hover { background: var(--accent-pale); }
    .vignette-doc-icone { font-size: var(--txt-xl); }
    .vignette-doc:disabled, .vignette-doc.disabled {
      opacity: .4; cursor: not-allowed; filter: grayscale(1);
    }
    .vignette-doc:disabled:hover, .vignette-doc.disabled:hover { background: var(--surface-2); }
    /* Vignette « vide » : document absent, grisée mais cliquable (pour ajouter) */
    .vignette-doc.vide { opacity: .5; filter: grayscale(1); border-style: dashed; }
    .vignette-doc.vide:hover { opacity: .8; background: var(--accent-pale); }

    table { width: 100%; border-collapse: collapse; font-size: 14px; }

    th {
      background: var(--surface-2);
      color: var(--accent);
      padding: 9px 12px;
      text-align: left;
      font-weight: 600;
      font-size: var(--txt-sm);
    }

    th:first-child { border-radius: var(--rayon) 0 0 0; }
    th:last-child  { border-radius: 0 var(--rayon) 0 0; }

    td {
      padding: 9px 12px;
      border-bottom: 1px solid var(--surface-2);
      vertical-align: middle;
    }

    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--surface-2); }

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: var(--txt-xs);
      font-weight: 700;
    }

    .badge-vert   { background: var(--vert-pale);   color: var(--vert);   }
    .badge-rouge  { background: var(--rouge-pale);  color: var(--rouge);  }
    /* Bleu → bleu paon (3ᵉ couleur), distinct de l'or. Source unique (cf. DESIGN_SYSTEM §8). */
    .badge-bleu   { background: rgba(46,134,193,.18); color: #6bb6e8; }
    /* Orange : variante Art Déco (angle franc + filet). Source unique (cf. DESIGN_SYSTEM §8). */
    .badge-orange { background: var(--orange-pale); color: var(--orange); border: 1px solid var(--accent-sombre); border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .badge-gris   { background: var(--surface-2);       color: var(--texte-secondaire);   }

    .barre-progression {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 120px;
    }
    .barre-progression-piste {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      background: var(--surface-2);
      overflow: hidden;
    }
    .barre-progression-remplissage {
      height: 100%;
      border-radius: 4px;
      background: var(--accent-clair);
    }
    .barre-progression-pct {
      font-size: var(--txt-xs);
      font-weight: 600;
      color: var(--texte-secondaire);
      white-space: nowrap;
    }

    .message {
      padding: 11px 15px;
      border-radius: var(--rayon);
      margin-bottom: 14px;
      font-size: 14px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .message-info   { background: var(--accent-pale);   color: var(--accent);   }
    .message-succes { background: var(--vert-pale);   color: var(--vert);   }
    .message-erreur { background: var(--rouge-pale);  color: var(--rouge);  }
    .message-alerte { background: var(--orange-pale); color: var(--orange); }

    .message-vide {
      text-align: center;
      color: var(--texte-secondaire);
      padding: 36px 20px;
      font-size: var(--txt-base);
    }

    .message-vide .icone { font-size: 36px; display: block; margin-bottom: 10px; }

    .avert {
      background: rgba(201,162,75,.10);
      border: 1px solid var(--accent-sombre);
      border-radius: var(--rayon);
      padding: 10px 14px;
      font-size: var(--txt-sm);
      color: var(--accent-clair);
      margin-bottom: 12px;
    }

    .dc-entete {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem;
    }
    .dc-filtres {
      display: flex;
      gap: .75rem;
      margin: 1rem 0;
      flex-wrap: wrap;
    }
    .dc-filtres select, .dc-filtres input {
      flex: 1;
      min-width: 180px;
    }
    .dc-liste {
      border: 1px solid var(--surface-2);
      border-radius: var(--rayon);
      overflow: hidden;
    }
    .dc-liste .dc-entete-colonne {
      padding: 10px 12px;
      font-weight: 700;
      color: var(--surface);
      background: var(--accent);
    }
    .dc-liste .ct-section {
      padding: 8px 12px;
      font-size: var(--txt-sm);
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-pale);
    }
    .dc-liste .ct-vide {
      padding: 1.5rem;
      text-align: center;
      color: var(--texte-secondaire);
    }
    .dc-liste .ct-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border-top: 1px solid rgba(0,0,0,.06);
    }
    .dc-liste .ct-item.ct-vert   { background: var(--vert-pale); }
    .dc-liste .ct-item.ct-orange { background: var(--orange-pale); }
    .dc-liste .ct-libelle { flex: 1; font-size: 14px; }
    .dc-liste .ct-action { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .dc-liste .ct-action.ct-action-row { flex-direction: row; align-items: center; }
    .dc-liste .ct-prix { font-size: var(--txt-xs); color: var(--texte-secondaire); white-space: nowrap; }
    .dc-liste .ct-prix-multi { white-space: normal; }

    .modal-fond {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 200;
      align-items: flex-start;
      justify-content: center;
      padding: 30px 16px;
      overflow-y: auto;
    }

    .modal-fond.ouvert { display: flex; }

    .modal {
      background: var(--surface);
      border-radius: var(--rayon);
      box-shadow: 0 8px 32px rgba(0,0,0,.25);
      width: 100%;
      max-width: 680px;
      padding: 26px;
      max-height: 90vh;
      overflow-y: auto;
    }

    .modal-lg { max-width: 820px; }

    .modal-titre {
      font-family: var(--police-titre);
      font-size: 17px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 18px;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 22px;
      padding-top: 14px;
      border-top: 1px solid var(--surface-2);
    }

    #modal-confirm .modal { max-width: 420px; }
    #modal-confirm p { margin-bottom: 6px; font-size: var(--txt-base); }
    #modal-confirm .detail { color: var(--rouge); font-weight: 600; margin-top: 8px; }

    #toast {
      position: fixed;
      bottom: 22px;
      right: 22px;
      z-index: 999;
      max-width: 340px;
      display: none;
    }

    #toast.visible { display: block; }

    .toast-msg {
      padding: 13px 16px;
      border-radius: var(--rayon);
      color: var(--surface);
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
      animation: glisser .25s ease;
    }

    .toast-succes { background: var(--vert); }
    .toast-erreur { background: var(--rouge); }

    @keyframes glisser {
      from { transform: translateX(120%); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }

    .stats-accueil {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .stat-carte {
      background: var(--surface);
      border-radius: var(--rayon);
      box-shadow: var(--ombre);
      padding: 16px;
      text-align: center;
    }

    .stat-nombre { font-size: 30px; font-weight: 800; color: var(--accent-clair); }
    .stat-label  { font-size: 11px; color: var(--texte-secondaire); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }

    .kpi-grille {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .kpi-carte {
      background: var(--surface);
      border-radius: var(--rayon);
      box-shadow: var(--ombre);
      padding: 16px;
    }

    .kpi-titre { display: flex; align-items: center; gap: 6px; font-size: var(--txt-xs); color: var(--texte-secondaire); font-weight: 600; }

    .selecteur-proprietaire { display: flex; align-items: center; gap: 8px; }
    .selecteur-proprietaire label { font-weight: 600; font-size: var(--txt-sm); color: var(--texte-secondaire); }
    .selecteur-proprietaire select {
      padding: 6px 10px;
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      background: var(--surface);
      font-size: 14px;
    }

    @media (max-width: 640px) {
      .stats-accueil, .kpi-grille { grid-template-columns: repeat(2, 1fr); }
    }
    .kpi-valeur { font-size: var(--txt-2xl); font-weight: 800; color: var(--texte); margin-top: 6px; }
    .kpi-sous   { font-size: 11.5px; color: var(--texte-secondaire); margin-top: 4px; }

    .graphe-legende { display: flex; gap: 18px; font-size: var(--txt-xs); color: var(--texte-secondaire); margin-bottom: 8px; }
    .graphe-puce { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
    .graphe-puce.graphe-recette, .graphe-barre.graphe-recette { background: var(--info); }
    .graphe-puce.graphe-depense, .graphe-barre.graphe-depense { background: var(--rouge); }
    .graphe-zone { display: flex; gap: 8px; }
    .graphe-axe-y {
      display: flex; flex-direction: column; justify-content: space-between;
      height: 160px; padding-top: 10px; padding-bottom: 17px;
      font-size: 10.5px; color: var(--texte-secondaire); text-align: right; white-space: nowrap;
    }
    .graphe-conteneur { position: relative; display: flex; align-items: flex-end; gap: 10px; padding-top: 10px; flex: 1; }
    .graphe-mois { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
    .graphe-barres { display: flex; align-items: flex-end; gap: 4px; height: 160px; }
    .graphe-barre { width: 14px; min-height: 2px; border-radius: 3px 3px 0 0; transition: height .2s; }
    .graphe-barre.graphe-projection { opacity: .75; }
    .graphe-barre.graphe-recette.graphe-projection {
      background-image: repeating-linear-gradient(45deg, var(--info) 0 4px, var(--accent-pale) 4px 8px);
    }
    .graphe-barre.graphe-depense.graphe-projection {
      background-image: repeating-linear-gradient(45deg, var(--rouge) 0 4px, var(--rouge-pale) 4px 8px);
    }
    .graphe-mois-label { font-size: 11px; color: var(--texte-secondaire); margin-top: 6px; }
    /* Point de solde de fin de mois (positionné en % par-dessus les colonnes) */
    .graphe-solde-point { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: auto; }

    /* Graphique compact sur mobile : toute l'année tient à l'écran, on masque
       les axes chiffrés et on affine les barres. .masq-mobile disparaît. */
    @media (max-width: 640px) {
      .masq-mobile { display: none; }
      .graphe-zone { gap: 2px; }
      .graphe-axe-y { display: none; }
      .graphe-conteneur { gap: 3px; }
      .graphe-barres { gap: 2px; }
      .graphe-barre { width: 7px; border-radius: 2px 2px 0 0; }
      .graphe-mois-label { font-size: 9px; margin-top: 3px; }
      .graphe-legende { gap: 10px; }
    }

    /* Onglet "Suivi locataires" de la page Banque : grille mensuelle payé/partiel/impayé */
    .suivi-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: .75rem; font-size: .85rem; color: var(--texte); }
    .suivi-puce { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
    .suivi-tableau-conteneur { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); }
    .suivi-tableau { border-collapse: collapse; width: 100%; font-size: .82rem; }
    /* nowrap réservé aux tables larges (matrices) enveloppées dans un conteneur
       défilant. Les récapitulatifs .suivi-tableau « nus » laissent le texte se
       replier → pas de débordement/rognage sur mobile (MOBILE_UI_GUIDELINES §4). */
    .suivi-tableau-conteneur .suivi-tableau { white-space: nowrap; }
    .suivi-tableau th, .suivi-tableau td { padding: 6px 10px; border-bottom: 1px solid var(--surface-2); text-align: center; }
    .suivi-tableau thead th { background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
    .suivi-cell-nom { text-align: left !important; font-weight: 600; position: sticky; left: 0; background: var(--surface); z-index: 2; box-shadow: 1px 0 0 var(--bordure); }
    .suivi-tableau thead .suivi-cell-nom { background: var(--surface-2); z-index: 3; }
    .suivi-cell-paye    { background: var(--vert-pale);   color: var(--vert); }
    .suivi-cell-partiel { background: var(--orange-pale); color: var(--orange); }
    .suivi-cell-impaye  { background: var(--rouge-pale);  color: var(--rouge); }

    /* ─── Documents (quittances / reçus / avis d'échéance) : lignes en CARTES
       sur mobile (MOBILE_UI_GUIDELINES §5 « préférer la carte au tableau dense »).
       Structure des 6 colonnes : checkbox · période · statut · générer ·
       télécharger · envoyer. Sur ≤ 640px : titre de période en haut, puis
       checkbox + statut à gauche et icônes d'action à droite. Aucun scroll H. */
    @media (max-width: 640px) {
      .suivi-tableau-conteneur:has(.suivi-tableau-docs) { border: none; overflow: visible; }
      .suivi-tableau-conteneur .suivi-tableau.suivi-tableau-docs { white-space: normal; }
      .suivi-tableau-docs thead { display: none; }
      .suivi-tableau-docs, .suivi-tableau-docs tbody { display: block; }
      .suivi-tableau-docs tbody { display: flex; flex-direction: column; gap: 8px; }
      .suivi-tableau-docs tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
        border: 1px solid var(--bordure); border-radius: var(--rayon);
        padding: 10px 12px; background: var(--surface-2);
      }
      .suivi-tableau-docs td {
        display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
        padding: 0; border: none; text-align: left;
      }
      .suivi-tableau-docs td:nth-child(2) { order: 1; flex: 1 1 100%; font-weight: 600; } /* période (haut) */
      .suivi-tableau-docs td:nth-child(1) { order: 2; flex: 0 0 auto; }                    /* checkbox */
      .suivi-tableau-docs td:nth-child(3) { order: 3; margin-right: auto; }                /* statut → pousse les actions à droite */
      .suivi-tableau-docs td:nth-child(4) { order: 4; }                                    /* aperçu */
      .suivi-tableau-docs td:nth-child(5) { order: 5; }                                    /* générer */
      .suivi-tableau-docs td:nth-child(6) { order: 6; }                                    /* télécharger */
      .suivi-tableau-docs td:nth-child(7) { order: 7; }                                    /* envoyer */
      .suivi-tableau-docs td[colspan] { order: 1; flex: 1 1 100% !important; color: var(--gris); } /* lignes-message */
      .suivi-tableau-docs .qt-montant { display: none; }                                   /* pas de montant sur mobile */
      .suivi-tableau-docs .btn-sm { padding: 7px 9px; }                                    /* cibles tactiles */

      /* Quittances / reçus (3 colonnes) : en-tête = checkbox + période + type sur
         la 1ʳᵉ ligne, puis TOUTES les icônes d'action alignées sur la ligne du
         dessous. Surcharge les ordres génériques ci-dessus (placé après). */
      .suivi-docs-cards td:nth-child(1) { order: 1; flex: 0 0 auto; }                     /* checkbox (gauche) */
      .suivi-docs-cards td:nth-child(2) { order: 2; flex: 1 1 auto; font-weight: 600; }   /* période + type */
      .suivi-docs-cards td:nth-child(3) { order: 3; flex: 1 1 100%; margin: 0; }          /* actions → nouvelle ligne */
      .suivi-docs-cards .qt-actions { justify-content: flex-end; gap: 6px; }

      /* Correspondance (4 colonnes : date · nature · statut · actions) : date +
         nature + statut sur la 1ʳᵉ ligne, puis les icônes d'action alignées sur
         la ligne du dessous — même principe que les quittances. */
      .suivi-docs-corr td:nth-child(1) { order: 1; flex: 0 0 auto; font-weight: 600; }  /* date */
      .suivi-docs-corr td:nth-child(2) { order: 2; flex: 1 1 auto; font-weight: 400; }  /* nature */
      .suivi-docs-corr td:nth-child(3) { order: 3; flex: 0 0 auto; }                    /* statut */
      .suivi-docs-corr td:nth-child(4) { order: 4; flex: 1 1 100%; margin: 0; }         /* actions → ligne du dessous */
      .suivi-docs-corr .qt-actions { justify-content: flex-end; gap: 6px; }
    }

    /* Cellule d'actions (quittances/reçus/avis/correspondance/ajustements) :
       icônes espacées et TOUJOURS alignées à droite de la cellule, pour un rendu
       homogène (desktop = td normal, boutons inline poussés à droite ; mobile =
       td inline-flex justifié à droite via les variantes cartes). Ordre des
       icônes porté par le HTML : Générer → Voir → Télécharger → Envoyer →
       Modifier → Corbeille. */
    td.qt-actions { text-align: right; white-space: nowrap; }
    .qt-actions .btn-sm { margin-left: 2px; }
    /* Statut « envoyé » lisible par la couleur (plus de badge) : icône verte. */
    .qt-ico-envoye { color: var(--vert); border-color: var(--vert); }

    /* Relevé bancaire mensuel (fiche compte > Voir le compte) */
    .releve-tableau-conteneur { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); }
    .releve-tableau { border-collapse: collapse; width: 100%; font-size: .85rem; }
    .releve-tableau th, .releve-tableau td { padding: 8px 10px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
    .releve-tableau thead th { background: var(--surface-2); text-align: left; }
    .releve-tableau tfoot td { border-bottom: none; border-top: 2px solid var(--bordure); }
    .releve-mois-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
    .releve-tableau tr.ligne-a-rapprocher { background: var(--orange-pale); }
    .suivi-cell-vide    { background: var(--surface-2);  color: var(--texte-secondaire); }

    .logement-carte {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 13px 14px;
      border-bottom: 1px solid var(--surface-2);
      transition: background .1s;
    }

    .logement-carte:last-child { border-bottom: none; }
    .logement-carte:hover { background: var(--surface-2); }
    .logement-info { flex: 1; min-width: 0; }

    /* Arborescence accueil */
    .arbre-container { display: flex; flex-direction: column; gap: 18px; padding: 4px 0; }
    .arbre-entite { display: flex; flex-direction: column; gap: 8px; }
    .arbre-entite-titre {
      display: flex; align-items: center; gap: 8px;
      font-weight: 700; font-size: var(--txt-md); color: var(--accent);
      padding-bottom: 6px; border-bottom: 1px solid var(--bordure);
    }
    .arbre-logements { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; }

    /* Vignettes (tuiles de navigation) — dashboard : comptes bancaires, locataires */
    .tuile-compte-nom { font-weight: 700; font-size: 14px; margin: 4px 0 6px 22px; }
    .tuiles-ligne {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin: 0 0 20px 22px;
    }
    .tuiles-ligne-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin: 0 0 20px 22px;
    }
    .tuile {
      background: var(--surface);
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      box-shadow: var(--ombre);
      padding: 20px 16px;
      cursor: pointer;
      font-size: var(--txt-base);
      font-weight: 700;
      text-decoration: none;
      color: var(--texte);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 80px;
    }
    .tuile:hover { background: var(--accent-pale); }
    @media (max-width: 640px) {
      .tuiles-ligne, .tuiles-ligne-4 { grid-template-columns: repeat(2, 1fr); margin-left: 0; }
    }
    .arbre-occupant { font-size: var(--txt-sm); color: var(--texte-secondaire); display: flex; align-items: center; gap: 6px; }
    .arbre-occupant.occupe { color: var(--texte); font-weight: 600; }
    .arbre-actions-logement { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

    /* === Accueil cards === */
    .accueil-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 4px 0; }
    .accueil-card { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
    .accueil-card-titre {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; background: var(--surface-2);
      border-bottom: 1px solid var(--bordure);
      font-family: var(--police-titre); font-weight: 700; font-size: var(--txt-base); gap: 8px;
    }
    .accueil-card-outils { display: flex; gap: 4px; flex-shrink: 0; }
    .accueil-card-corps { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
    .accueil-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .accueil-label { font-size: 14px; flex: 1; }
    .accueil-label-gris { font-size: var(--txt-sm); color: var(--texte-secondaire); font-style: italic; flex: 1; }
    .accueil-btn-sortie { margin-top: 2px; }
    .arbre-logement { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
    .arbre-logement-entete {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--bordure);
    }
    .arbre-logement-nom { font-weight: 700; font-size: var(--txt-base); }
    .arbre-logement-actions { display: flex; gap: 6px; }
    .arbre-edl-liste { padding: 8px 16px 10px 16px; display: flex; flex-direction: column; gap: 6px; }
    .arbre-edl-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
    .arbre-branche { color: var(--texte-secondaire); font-family: monospace; font-size: var(--txt-sm); }
    .arbre-edl-date { color: var(--texte-secondaire); font-size: var(--txt-sm); flex: 1; }
    .arbre-vide { font-size: var(--txt-sm); color: var(--texte-secondaire); font-style: italic; padding: 4px 0; }

    .logement-adresse {
      font-weight: 700;
      font-size: var(--txt-base);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logement-details { font-size: var(--txt-sm); color: var(--texte-secondaire); margin-top: 3px; }
    .logement-id      { font-size: 11px; color: var(--texte-secondaire); font-family: monospace; }

    .piece-ligne {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--surface-2);
      transition: background .1s;
      cursor: pointer;
    }

    .piece-ligne:last-child { border-bottom: none; }
    .piece-ligne:hover { background: var(--accent-pale); }
    .piece-nom   { font-weight: 700; flex: 1; }
    .piece-meta  { font-size: var(--txt-xs); color: var(--texte-secondaire); margin-top: 2px; }

    .el-ligne {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--surface-2);
    }

    .el-ligne:last-child { border-bottom: none; }
    .el-ligne.suspendu { opacity: .6; }
    .el-info   { flex: 1; min-width: 0; }
    .el-nom    { font-weight: 600; font-size: 14px; }
    .el-meta   { font-size: var(--txt-xs); color: var(--texte-secondaire); margin-top: 3px; }
    .el-constat{ font-size: var(--txt-xs); margin-top: 4px; }

    .conf-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid var(--surface-2);
      font-size: 14px;
    }

    .conf-item:last-child { border-bottom: none; }
    .conf-ok  { color: var(--vert);  font-size: var(--txt-md); }
    .conf-ko  { color: var(--rouge); font-size: var(--txt-md); font-weight: 700; }

    .compteur-groupe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .cles-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

    /* === Lot 3 : EDL & constats === */

    .edl-onglets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      border-bottom: 2px solid var(--bordure);
      margin-bottom: 16px;
      padding-bottom: 0;
    }

    .edl-onglet {
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 14px;
      color: var(--texte-secondaire);
      transition: color .15s;
    }

    .edl-onglet:hover { color: var(--primaire); }
    .edl-onglet.actif { color: var(--primaire); border-bottom-color: var(--primaire); font-weight: 600; }

    .constat-carte {
      background: var(--surface);
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      padding: 14px;
      margin-bottom: 12px;
    }

    .constat-titre {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .constat-axe { margin-bottom: 10px; }
    .constat-axe-label {
      display: block;
      font-size: var(--txt-xs);
      font-weight: 700;
      color: var(--texte-secondaire);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 5px;
    }

    .radio-groupe { display: flex; gap: 6px; flex-wrap: wrap; }

    .radio-btn {
      background: var(--surface-2);
      border: 1px solid var(--bordure);
      color: var(--texte);
      padding: 6px 12px;
      border-radius: var(--rayon);
      cursor: pointer;
      font-size: var(--txt-sm);
      font-weight: 600;
      transition: background .12s, color .12s, border-color .12s;
    }

    .radio-btn:hover { background: var(--accent-pale); }
    .radio-btn.actif      { background: var(--accent-clair); color: var(--surface); border-color: var(--accent-clair); }
    .radio-btn.actif-ok   { background: var(--vert);       color: var(--surface); border-color: var(--vert); }
    .radio-btn.actif-ko   { background: var(--rouge);      color: var(--surface); border-color: var(--rouge); }
    .radio-btn.actif-warn { background: var(--orange);     color: var(--surface); border-color: var(--orange); }
    .radio-btn:disabled { opacity: .6; cursor: default; pointer-events: none; }

    .constat-textarea {
      width: 100%;
      padding: 7px 10px;
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      font-size: var(--txt-sm);
      font-family: inherit;
      resize: vertical;
      min-height: 50px;
    }

    .constat-textarea:disabled { background: var(--surface-2); }

    /* Accordéon mobile constats */
    .constat-accordeon-entete { display: none; }
    .constat-accordeon-corps  { display: block; }
    .constat-titre-desktop    { display: block; }

    .mt8  { margin-top: 8px; }
    .mt16 { margin-top: 16px; }
    .small { font-size: var(--txt-xs); color: var(--texte-secondaire); }
    /* Textes non cassables (email, IBAN, adresse, URL) : retour à la ligne forcé
       pour empêcher tout débordement horizontal (MOBILE_UI_GUIDELINES R5). */
    .small, .cassable { overflow-wrap: anywhere; }
    .nowrap { white-space: nowrap; }
    .tbl-edl-resume, .tbl-loc-resume, .tbl-log-desig { display: none; }
    .btn-label-mobile { display: none; }
    .no-pdf-mobile { display: none; }

    @page {
      margin: 15mm 10mm 15mm 10mm;
      @bottom-right {
        content: counter(page) " / " counter(pages);
        font-family: Georgia, serif;
        font-size: 8pt;
        color: #888;
      }
    }

    @media print {
      nav, .barre-actions, .modal-fond, #toast,
      .btn, .param-onglets, .breadcrumb { display: none !important; }
      body { background: white; color: black; font-family: Georgia, serif; font-size: 11pt; }
      main { max-width: 100%; margin: 0; padding: 0; }

      /* Seul le contenu PDF est imprimé */
      #contenu > *:not(.pdf-document) { display: none !important; }
      .pdf-document { display: block !important; }
      .apercu-barre { display: none !important; }

      /* En-tête et pied de page fixes répétés sur chaque page */
      .pdf-pied-locataire {
        flex: 1;
        text-align: center;
        font-size: 8pt;
        color: #aaa;
        letter-spacing: .5pt;
      }
      .pdf-pied-page {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: white;
        padding: 3pt 12pt;
        display: flex;
        align-items: center;
        gap: 8pt;
      }
      .pdf-case-entree {
        background: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 0.5pt solid #ccc;
        padding: 2pt 10pt;
        font-size: 8pt;
        color: #aaa;
        text-align: center;
        min-width: 80pt;
      }
      .pdf-case-sortie {
        background: #ececec !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 0.5pt solid #bbb;
        padding: 2pt 10pt;
        font-size: 8pt;
        color: white;
        text-align: center;
        min-width: 80pt;
        margin-left: auto;
      }

      /* Blocs de texte */
      .pdf-bloc {
        margin-bottom: 10pt;
        white-space: pre-wrap;
        line-height: 1.3;
      }
      .pdf-bloc.insecable { break-inside: avoid; }
      .pdf-saut-page { break-before: page; }

      /* Tableau des éléments */
      .pdf-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-bottom: 18pt; }
      .pdf-table th {
        background: #222 !important;
        color: white !important;
        padding: 5pt 6pt;
        text-align: left;
        font-size: 9pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .pdf-table td { padding: 4pt 6pt; border-bottom: 1px solid #ccc; vertical-align: top; }
      .pdf-table tr:nth-child(even) td { background: #f5f5f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .pdf-td-sortie { background: #ececec !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .pdf-encadre-sortie { background: #ececec; border: 1pt solid #bbb; padding: 14pt 18pt; white-space: pre-wrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .pdf-table-titre {
        font-size: 11pt;
        font-weight: bold;
        margin: 14pt 0 4pt 0;
        break-after: avoid;
      }

      /* En-têtes de section */
      .pdf-section-titre {
        font-size: 12pt;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .5pt;
        border-bottom: 1.5pt solid black;
        margin: 20pt 0 10pt 0;
        padding-bottom: 3pt;
        break-after: avoid;
      }

      /* Annexe photographique */
      .pdf-annexe-photo-page {
        display: flex;
        flex-direction: column;
        gap: 10pt;
      }
      .pdf-photo-slot {
        display: flex;
        flex-direction: column;
      }
      .pdf-photo-slot img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        border: 1pt solid #ccc;
        display: block;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .pdf-photo-legende { font-size: 8pt; color: #555; margin-top: 2pt; }
    }

    @media (max-width: 640px) {
      .grille-form { grid-template-columns: 1fr; }
      .cles-grille { grid-template-columns: repeat(2, 1fr); }
      .compteur-groupe { grid-template-columns: 1fr; }
      nav .app-titre { font-size: 14px; }

      /* Empêche le zoom automatique iOS sur focus */
      input, select, textarea { font-size: var(--txt-md) !important; }

      /* Tables : priorité de colonnes (remplace le masquage nth-child fragile,
         qui cassait dès qu'une colonne était ajoutée/déplacée). Chaque th/td
         secondaire porte col-p2 (masquée sur mobile) ou col-p3 (colonne
         technique, ex. ID — plus basse priorité) ; col-p1 = toujours visible.
         Le masquage est ainsi indépendant de l'ordre des colonnes. */
      th.col-p2, td.col-p2, th.col-p3, td.col-p3 { display: none; }

      /* Colonnes « résumé » : masquées sur desktop, seules affichées sur mobile
         (carte empilée). Elles priment sur col-p2/p3 sur leur propre table. */
      .tbl-logements th.tbl-log-desig, .tbl-logements td.tbl-log-desig { display: table-cell; font-weight: 700; width: 100%; }
      .tbl-edl th.tbl-edl-resume, .tbl-edl td.tbl-edl-resume { display: table-cell; white-space: normal; line-height: 1.5; width: 100%; }
      .tbl-locataires th.tbl-loc-resume, .tbl-locataires td.tbl-loc-resume { display: table-cell; white-space: normal; line-height: 1.5; width: 100%; }
      .tbl-edl tr[data-statut="Validé"]    { background: rgba(88,201,138,.12); }
      .tbl-edl tr[data-statut="Brouillon"] { background: rgba(224,162,74,.12); }
      .tbl-locataires tr[data-statut="Actif"]   { background: rgba(88,201,138,.12); }
      .tbl-locataires tr[data-statut="Inactif"] { background: var(--surface-2); }
      .btn-label-desktop { display: none; }
      .btn-label-mobile  { display: inline; }
      .no-pdf-mobile { display: inline; font-size: var(--txt-sm); color: var(--texte-secondaire); padding: 6px 4px; }

      /* Constats en accordéon sur mobile */
      .constat-accordeon-entete {
        display: flex; align-items: center; gap: 8px;
        padding: 12px 14px; cursor: pointer; min-height: 44px;
        border-bottom: 1px solid var(--surface-2);
      }
      .constat-accordeon-nom { flex: 1; font-weight: 600; font-size: var(--txt-sm); }
      .constat-accordeon-arrow { font-size: 11px; color: var(--texte-secondaire); }
      .constat-accordeon-corps { display: none; padding: 12px 14px 4px; }
      .constat-accordeon-corps.ouvert { display: block; }
      .constat-titre-desktop { display: none; }
      .constat-carte { padding: 0; }

      /* Zones tactiles ≥ 44px sur mobile */
      .radio-btn { min-height: 44px; padding: 10px 14px; font-size: 14px; }
      .btn-sm { min-height: 36px; padding: 8px 12px; font-size: var(--txt-sm); }
      .constat-carte { padding: 16px; }
      .radio-groupe { gap: 8px; }

      /* Barres d'actions dans les tables : autoriser le retour à la ligne */
      td.nowrap { white-space: normal; }
      td.nowrap .btn { margin-bottom: 4px; }

      /* Adresse logement : permettre le retour à la ligne sur très petit écran */
      .logement-adresse { white-space: normal; }

      .barre-accueil { display: none; }

      /* Accueil arborescence : icônes fiche/modifier restent à droite, boutons d'action en icônes seules sur mobile */
      .arbre-logement-entete { flex-direction: row; align-items: center; gap: 8px; }
      .arbre-logement-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .arbre-logement-actions { flex-wrap: nowrap; flex-shrink: 0; }
      .arbre-actions-logement .btn-label-desktop { display: none; }
      .arbre-actions-logement .btn-label-mobile { display: inline; }
      .arbre-edl-item { flex-wrap: wrap; }
      .arbre-branche { display: none; }
      .arbre-edl-date { flex: unset; width: 100%; order: -1; }
      .arbre-edl-liste { padding: 8px 10px 10px 10px; }

      /* Modales plein écran sur mobile */
      .modal-fond {
        padding: 0;
        align-items: flex-end;
      }
      .modal, .modal-lg {
        max-width: 100%;
        width: 100%;
        border-radius: var(--rayon) var(--rayon) 0 0;
        padding: 20px 16px 32px;
        max-height: 92dvh;
        overflow-y: auto;
      }
      .modal-actions {
        flex-wrap: wrap;
      }
      .modal-actions button {
        flex: 1 1 auto;
      }
    }

    /* ===== LOT 4 — PHOTOS ===== */

    /* Grille de vignettes : 2 colonnes sur PC, 1 sur mobile */
    .galerie-photos {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
      margin-top: 12px;
    }

    /* Carte d'une photo */
    .vignette {
      background: var(--surface);
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      overflow: hidden;
      box-shadow: var(--ombre);
      position: relative;
    }

    /* Image en ratio 4:3 fixe, recadrée proprement sans déformation */
    .vignette img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      background: var(--surface-2);
    }

    /* Zone texte sous l'image : légende + numéro d'ordre */
    .vignette-bas {
      padding: 8px 10px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .vignette-legende {
      flex: 1;
      font-size: var(--txt-sm);
      color: var(--texte);
      line-height: 1.4;
      word-break: break-word;
    }

    .vignette-legende.vide {
      color: var(--texte-secondaire);
      font-style: italic;
    }

    /* Badge numéro d'ordre affiché en haut à gauche de l'image */
    .vignette-ordre {
      position: absolute;
      top: 6px;
      left: 6px;
      background: rgba(0,0,0,.55);
      color: var(--surface);
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 20px;
      pointer-events: none;
    }

    /* Boutons d'action (Modifier / Supprimer) : invisibles par défaut,
       apparaissent au survol de la carte */
    .vignette-actions {
      position: absolute;
      top: 6px;
      right: 6px;
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity .15s;
    }

    .vignette:hover .vignette-actions { opacity: 1; }

    /* Sur mobile : toujours visibles (pas de survol possible) */
    @media (max-width: 640px) {
      .vignette-actions { opacity: 1; }
      .galerie-photos { grid-template-columns: 1fr; }
    }

    /* Boutons superposés sur la photo */
    .vignette-actions button {
      background: rgba(0,0,0,.6);
      border: none;
      color: var(--surface);
      border-radius: var(--rayon);
      padding: 4px 8px;
      font-size: var(--txt-sm);
      cursor: pointer;
      transition: background .15s;
    }

    .vignette-actions button:hover { background: rgba(0,0,0,.85); }

    /* Boutons de réordonnancement (flèches) à côté de la légende */
    .vignette-fleches {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .vignette-fleches button {
      background: var(--surface-2);
      border: 1px solid var(--bordure);
      border-radius: 3px;
      padding: 1px 5px;
      font-size: 11px;
      cursor: pointer;
      line-height: 1.4;
      color: var(--texte);
    }

    .vignette-fleches button:hover { background: var(--accent-pale); }

    /* Section photos à l'intérieur d'une pièce dans l'écran EDL */
    .section-photos-piece {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--bordure);
    }

    .section-photos-piece .titre-photos {
      font-size: var(--txt-sm);
      font-weight: 700;
      color: var(--texte-secondaire);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* === Paramètres === */
    .titre-ecran { font-family: var(--police-titre); font-weight: 700; font-size: var(--txt-md); }

    .param-onglets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      border-bottom: 2px solid var(--bordure);
      margin-bottom: 16px;
      padding-bottom: 0;
    }
    .param-onglet {
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 14px;
      color: var(--texte-secondaire);
      transition: color .15s;
    }
    .param-onglet:hover { color: var(--primaire); }
    .param-onglet.actif { color: var(--primaire); border-bottom-color: var(--primaire); font-weight: 600; }

    .bloc-ligne {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--bordure);
    }
    .bloc-ligne:last-child { border-bottom: none; }
    .bloc-ligne-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
    .bloc-titre-interne { font-weight: 600; font-size: 14px; }
    .bloc-extrait { color: var(--texte-secondaire); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bloc-ligne-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

    /* Ligne de devis (écran "Tous les devis") : 3 colonnes compactes, optimisées mobile */
    .devis-ligne { flex-wrap: wrap; align-items: flex-start; }
    .devis-ligne-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 0 0 auto; min-width: 96px; font-size: var(--txt-sm); padding-top: 2px; }
    .devis-ligne-statut { line-height: 1; }
    .devis-ligne-montant { font-weight: 600; color: var(--texte); }
    .devis-ligne-avancement { display: flex; align-items: center; gap: 6px; color: var(--texte-secondaire); }
    .devis-ligne-avancement .barre-progression-piste { width: 46px; height: 6px; flex: none; }
    .devis-ligne-avancement .barre-progression-pct { font-size: var(--txt-sm); font-weight: 600; }
    .devis-ligne .bloc-ligne-actions { align-items: flex-start; padding-top: 2px; }
    .devis-ligne .bloc-ligne-actions .btn-sm { padding: 4px 8px; font-size: var(--txt-sm); }
    @media (max-width: 640px) {
      .devis-ligne .bloc-ligne-info { flex-basis: 100%; }
    }

    /* Liste compacte des biens (page Biens ▸ Propriétaires) : 3 icônes d'action sur une seule ligne */
    .bien-compact-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .bien-compact-actions .btn-sm { padding: 3px 6px; font-size: var(--txt-xs); }

    /* === Aperçu PDF (écran) === */
    .pdf-document {
      display: none; /* masqué par défaut, affiché par renderApercuPDF */
      background: white;
      color: #111;
      font-family: Georgia, serif;
      font-size: var(--txt-xs);
      line-height: 1.6;
      max-width: 794px; /* ~A4 à 96dpi */
      margin: 0 auto;
      padding: 40px 60px;
      box-shadow: 0 2px 16px rgba(0,0,0,.15);
      border-radius: 4px;
    }
    .pdf-document.visible { display: block; }
    .pdf-bloc { margin-bottom: 10px; white-space: pre-wrap; line-height: 1.3; }
    .pdf-section-titre {
      font-size: var(--txt-sm);
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 2px solid #111;
      margin: 20px 0 10px;
      padding-bottom: 4px;
    }
    .pdf-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 16px; }
    .pdf-table th { background: #222; color: white; padding: 5px 6px; text-align: left; font-size: 10px; }
    .pdf-table td { padding: 4px 6px; border-bottom: 1px solid #ddd; vertical-align: top; }
    .pdf-table tr:nth-child(even) td { background: #f9f9f9; }
    .pdf-td-sortie { background: #ececec !important; }
    .pdf-encadre-sortie { background: #ececec; border: 1px solid #bbb; padding: 14px 18px; white-space: pre-wrap; border-radius: 4px; }
    .pdf-pied-locataire {
      flex: 1;
      text-align: center;
      font-size: 11px;
      color: #aaa;
      letter-spacing: .5px;
    }
    .pdf-pied-page {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      margin-top: 24px;
      border-top: 1px solid #eee;
    }
    .pdf-case-entree {
      background: white;
      border: 1px solid #ddd;
      padding: 4px 12px;
      font-size: 11px;
      color: #bbb;
      text-align: center;
      border-radius: 3px;
    }
    .pdf-case-sortie {
      background: #ececec;
      border: 1px solid #bbb;
      padding: 4px 12px;
      font-size: 11px;
      color: white;
      text-align: center;
      border-radius: 3px;
      margin-left: auto;
    }
    .pdf-table-titre { font-size: var(--txt-xs); font-weight: bold; margin: 14px 0 4px; }
    .pdf-annexe-photo-page { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
    .pdf-photo-slot { display: flex; flex-direction: column; }
    .pdf-photo-slot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid #ccc; display: block; }
    .pdf-photo-legende { font-size: 10px; color: #666; margin-top: 3px; }
    .apercu-barre {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 16px;
      padding: 10px 0;
      border-bottom: 1px solid var(--bordure);
    }
    .apercu-mobile-avert {
      display: none;
      background: #fff3cd;
      border: 1px solid #ffc107;
      border-radius: var(--rayon);
      padding: 10px 14px;
      font-size: 14px;
      margin-bottom: 12px;
    }
    @media (max-width: 640px) {
      .apercu-mobile-avert { display: block; }
      /* Aperçus A4 (quittances, avis, relevés) : réduire les marges internes
         sur mobile pour laisser respirer les tableaux du document. */
      .pdf-document { padding: 20px 14px; }
    }
    .equipements-grille {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      margin-top: 6px;
    }
    .equipements-grille .champ-inline {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: var(--txt-sm);
      cursor: pointer;
    }


    /* ══════════════════════════════════════════════════════════════════════
       THÈME ART DÉCO — surcharges (noir & doré, filets géométriques)
       Placé en fin de feuille : gagne la cascade sur les règles génériques.
       N'affecte pas les documents PDF (.pdf-*) ni l'impression (@media print).
       ══════════════════════════════════════════════════════════════════════ */

    /* Barre de navigation : noir profond, filet doré, onglets ivoire → or */
    nav {
      background: linear-gradient(180deg, #14121a 0%, #0c0b10 100%);
      border-bottom: 1px solid var(--accent-sombre);
      box-shadow: 0 2px 12px rgba(0,0,0,.6);
    }
    nav button { color: var(--texte-secondaire); border-bottom-width: 2px; }
    nav button:hover { color: var(--accent-clair); }
    nav button.actif { color: var(--accent); border-bottom-color: var(--accent); }
    nav a.app-titre { color: var(--accent); letter-spacing: .18em; font-weight: 800; text-transform: uppercase; }
    nav a.app-titre:hover { color: var(--accent-clair); opacity: 1; }
    @media (max-width: 640px) {
      nav a.app-titre { border-color: var(--accent-sombre); }
    }

    /* Cartes : surface sombre, liseré doré en tête (motif Art Déco discret) */
    .carte {
      border: 1px solid var(--bordure);
      border-top: 2px solid var(--accent-sombre);
      background: linear-gradient(180deg, #191720 0%, var(--surface) 100%);
    }
    .carte-titre { letter-spacing: .04em; }

    /* En-têtes de tableau : bandeau neutre (surface-2) + libellé doré et filet
       doré discret — le doré redevient accent, pas structure (DESIGN_SYSTEM §2). */
    th { letter-spacing: .05em; border-bottom: 1px solid var(--accent-sombre); }

    /* Squelettes de chargement (perf perçue, MOBILE_UI_GUIDELINES §11) */
    .sk-wrap { padding: 4px 0; }
    .sk-titre { height: 22px; width: 40%; margin-bottom: var(--esp-4); border-radius: var(--rayon-sm); }
    .sk-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: var(--esp-4); margin-bottom: var(--esp-3); }
    .sk-ligne { height: 14px; margin: var(--esp-3) 0; border-radius: var(--rayon-sm); }
    .sk-ligne.court { width: 60%; }
    .sk-titre, .sk-ligne {
      background: linear-gradient(90deg, var(--surface-2) 25%, var(--bordure) 37%, var(--surface-2) 63%);
      background-size: 400% 100%;
      animation: sk-shimmer 1.4s ease infinite;
    }
    @keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
    @media (prefers-reduced-motion: reduce) { .sk-titre, .sk-ligne { animation: none; } }

    /* Boutons primaires : or plein sur texte noir ; hover plus clair */
    .btn-primaire { background: linear-gradient(180deg, var(--accent-clair), var(--accent)); color: #14121a; }
    .btn-orange   { background: linear-gradient(180deg, #e9b45c, var(--orange)); color: #14121a; }
    .btn:not(:disabled):hover { opacity: .88; filter: brightness(1.08); }

    /* KPI : chiffres en or, liseré supérieur doré */
    .kpi-carte { border: 1px solid var(--bordure); border-top: 2px solid var(--accent-sombre); background: var(--surface); }
    .kpi-valeur { color: var(--accent); }
    .kpi-titre, .kpi-sous { color: var(--texte-secondaire); }

    /* Onglets internes (param-onglet) : soulignés d'or quand actifs */
    .param-onglets { border-bottom-color: var(--bordure); }
    .param-onglet.actif { color: var(--accent); border-bottom-color: var(--accent); }

    /* Tuiles : surface sombre, survol doré */
    .tuile { background: var(--surface); border-color: var(--bordure); }
    .tuile:hover { background: var(--surface-2); border-color: var(--accent-sombre); }

    /* Champs de saisie : fond sombre, focus doré */
    .champ input, .champ select, .champ textarea { background: var(--surface-2); }
    .champ input:focus, .champ select:focus, .champ textarea:focus {
      border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,162,75,.20);
    }

    /* Sélecteur de propriétaire, selects génériques hérités */
    select, input[type="text"], input[type="number"], input[type="date"],
    input[type="month"], input[type="password"], input[type="email"], textarea {
      color: var(--texte);
    }
    /* Menu déroulant des <select> : fond sombre + texte ivoire lisible.
       (Sans cela, la liste d'options ouverte reste blanche/texte gris clair
       sur certains navigateurs/OS.) */
    select { background-color: var(--surface-2); }
    select option, select optgroup {
      background-color: var(--surface-2);
      color: var(--texte);
    }
    select optgroup { font-weight: 700; }
    select option:checked,
    select option:hover {
      background-color: var(--accent-pale);
      color: var(--texte);
    }

    /* Barres de défilement discrètes, teinte dorée */
    * { scrollbar-color: var(--accent-sombre) var(--surface); scrollbar-width: thin; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--surface); }
    ::-webkit-scrollbar-thumb { background: var(--accent-sombre); border-radius: 6px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* Logo doré réutilisable : <img src=astonia-logo.png class=logo-astonia>.
       Le logo source est noir sur transparent ; le filtre le teinte en or. */
    .logo-astonia {
      display: inline-block;
      object-fit: contain;
      filter: invert(78%) sepia(56%) saturate(380%) hue-rotate(3deg) brightness(92%);
    }

    /* Correctifs de lisibilité Art Déco */
    .suivi-tableau thead th,
    .suivi-tableau thead .suivi-cell-nom {
      background: var(--surface-2); color: var(--accent);
      border-bottom: 1px solid var(--accent-sombre);
    }
    .suivi-cell-nom { background: var(--surface); }
    /* Liens et éléments cliquables génériques : or */
    a { color: var(--accent-clair); }

    /* Onglet Comptes : ligne de compte cliquable (Art Déco) */
    .compte-ligne {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
      background: var(--surface); border: 1px solid var(--bordure);
      border-left: 3px solid var(--accent-sombre); border-radius: var(--rayon);
      transition: border-color .15s, background .15s;
    }
    .compte-ligne:hover { background: var(--surface-2); border-left-color: var(--accent); }
    .compte-ligne-nom { font-weight: 700; color: var(--texte); flex: 1; min-width: 0; }
    .compte-ligne-solde { font-weight: 700; font-variant-numeric: tabular-nums; }

    /* ═══ Tableau de bord de pilotage du risque (js/risque.js) ═══ */
    .pilotage-grille { display: flex; flex-direction: column; gap: 16px; }
    .pilotage-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .pilotage-bloc { margin: 0; }

    /* 3 cartes de statistique (solde / projection / risque) */
    .pilotage-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
    .stat-carte {
      background: var(--surface-2); border: 1px solid var(--bordure);
      border-radius: var(--rayon); padding: 12px 14px;
    }
    .stat-cliquable { cursor: pointer; transition: border-color .15s; }
    .stat-cliquable:hover { border-color: var(--accent); }
    .stat-carte .stat-label { text-transform: uppercase; letter-spacing: .4px; font-size: var(--txt-xs); color: var(--texte-secondaire); font-weight: 600; }
    .stat-valeur { font-size: var(--txt-xl); font-weight: 800; color: var(--texte); margin-top: 4px; font-variant-numeric: tabular-nums; }
    .stat-sous { font-size: var(--txt-xs); color: var(--texte-secondaire); margin-top: 4px; }

    /* Donut SVG */
    .donut-wrap { position: relative; flex: 0 0 auto; }
    .donut-svg circle { transition: opacity .15s; }
    .donut-svg circle[onclick]:hover { opacity: .8; }
    .donut-centre {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center; pointer-events: none;
    }
    .donut-centre-val { font-size: var(--txt-xl); font-weight: 800; color: var(--texte); line-height: 1.1; }
    .donut-centre-lbl { font-size: var(--txt-xs); color: var(--texte-secondaire); }

    /* Bloc impayés + camembert de criticité */
    .pilotage-impayes { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 16px; align-items: center; margin-top: 8px; }
    .impayes-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: center; }
    .impayes-donut .crit-legende { flex: 1; min-width: 220px; }
    /* Synthèse des paiements : légende → camembert par nb de loc. → montant total → camembert par montant */
    .synthese-paiements { margin-top: 8px; }
    .synthese-paiements .crit-legende { max-width: 460px; margin: 0 auto; }
    .synthese-camembert { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0; }
    .synthese-camembert-titre { color: var(--texte-secondaire); font-weight: 600; text-align: center; }
    .crit-legende-ligne {
      display: grid; grid-template-columns: 16px 1fr auto auto 42px; align-items: center;
      gap: 8px; padding: 3px 0; font-size: var(--txt-sm);
    }
    .crit-legende-ligne[onclick]:hover { color: var(--accent-clair); }
    .crit-puce { width: 12px; height: 12px; border-radius: var(--rayon-full); }
    .crit-nom { color: var(--texte); }
    .crit-nb, .crit-dette, .crit-pct { color: var(--texte-secondaire); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
    .crit-dette { color: var(--texte); font-weight: 600; }

    /* Top 5 des dossiers prioritaires */
    .top5-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    .top5-ligne {
      display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
      background: var(--surface-2); border: 1px solid var(--bordure);
      border-radius: var(--rayon); transition: border-color .15s, background .15s;
    }
    .top5-ligne:hover { border-color: var(--accent); background: var(--surface); }
    .top5-rang {
      flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--rayon-full);
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; color: #14120b; font-size: var(--txt-sm);
    }
    .top5-nom { flex: 2; min-width: 120px; }
    .top5-col { flex: 1; min-width: 74px; font-variant-numeric: tabular-nums; }
    .top5-col .small { color: var(--texte-secondaire); }
    .top5-tend { flex: 1.4; min-width: 130px; }
    .top5-chev { flex: 0 0 auto; color: var(--texte-secondaire); font-size: var(--txt-lg); }

    /* Vacance locative */
    .vacance-corps { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
    .vacance-stats { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
    .vac-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bordure); font-size: var(--txt-sm); }
    .vac-ligne span { color: var(--texte-secondaire); }
    .vac-ligne strong { font-variant-numeric: tabular-nums; }

    /* Révisions de loyers */
    .revision-entete { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
    .revision-entete .stat-carte { text-align: center; }
    .revision-entete .stat-valeur { font-size: var(--txt-2xl); }
    .revision-liste { margin-top: 10px; }
    .revision-ligne {
      display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
      background: var(--surface-2); border: 1px solid var(--bordure);
      border-radius: var(--rayon); margin-bottom: 6px; font-size: var(--txt-sm); flex-wrap: wrap;
    }
    .revision-ligne:hover { border-color: var(--accent); }
    .revision-log { flex: 1; min-width: 120px; color: var(--texte); font-weight: 600; }
    .revision-date { font-variant-numeric: tabular-nums; color: var(--texte-secondaire); }

    @media (max-width: 820px) {
      .pilotage-2col { grid-template-columns: 1fr; }
      .pilotage-impayes { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .pilotage-stats3 { grid-template-columns: 1fr; }
      .crit-legende-ligne { grid-template-columns: 14px 1fr auto auto; }
      .crit-legende-ligne .crit-pct { display: none; }
      .top5-ligne { flex-wrap: wrap; }
      .top5-col, .top5-tend { min-width: 46%; }
    }

    /* ═══ Navigation mobile ═══
       Plus de barre du bas : le changement de module se fait via « Accueil »
       (logo ⬅ Astonia) et le hub d'accueil ; la nav du module reste en haut.
       On conserve seulement le retrait de sécurité pour l'encoche du bas. */
    @media (max-width: 640px) {
      body { padding-bottom: env(safe-area-inset-bottom, 0px); }
    }