/*
 * enzo.immo — espace de travail (/app/). Feuille commune : jetons, coquille, composants partagés.
 * Guide à suivre : design/GUIDE_PRESENTATION.md. Les règles propres à un écran vont dans ecrans/<écran>.css
 * (chargées après cette feuille par base.html), jamais ici.
 *
 * Partis pris (brief du dirigeant, 26/09/2026) : une seule famille sans empattement (Inter) et une mono
 * (IBM Plex Mono) pour les montants et codes ; palette neutre grise ; UN accent bleu réservé au bouton principal,
 * au lien de navigation actif, à l'onglet actif et au focus ; pastilles neutres sauf « Problème » (rouge) et
 * « À vérifier » (ambre) ; échelle d'espacement 4/8/12/16/24/32/48 ; deux rayons (6 px contrôles, 12 px cartes) ;
 * une seule ombre pour ce qui flotte ; mouvement 150 ms ease-out sur panneau et toast seulement.
 * Thème : clair par défaut, sombre selon le système ou <html data-theme="dark|light">. Téléphone (< 768 px) :
 * barre d'onglets en bas, panneau → tiroir, lignes de tableau → cartes. Aucun style en ligne dans les gabarits.
 */

/* ------------------------------------------------------------------ jetons */
:root {
  --fond: #F7F7F8;
  --surface: #FFFFFF;
  --surface-2: #F2F2F4;
  --bordure: #E5E5EA;
  --bordure-forte: #D0D0D6;
  --bordure-douce: #EEEEF1;
  --encre: #1B1B1F;
  --encre-2: #3A3A40;
  --discret: #6B6F78;
  --accent: #2B5BD7;
  --accent-fort: #1F46AD;
  --accent-doux: #EAF0FD;
  --accent-bouton: #2B5BD7;
  --accent-bouton-fort: #1F46AD;
  --sur-accent: #FFFFFF;
  /* États : seuls « à vérifier » (ambre) et « problème » (rouge) portent une couleur ; « sûr », « info » et
     « neutre » sont gris (les jetons restent pour les gabarits existants). */
  --sur: #3A3A40;         --sur-fond: #F2F2F4;        --sur-bord: #E5E5EA;
  --verifier: #8A5A00;    --verifier-fond: #FBF3E0;   --verifier-bord: #EBD9A8;
  --probleme: #B42318;    --probleme-fond: #FDECEA;   --probleme-bord: #F3C2BC;
  --info: #3A3A40;        --info-fond: #F2F2F4;
  --neutre: #3A3A40;      --neutre-fond: #F2F2F4;
  --point-ok: #8A8F99;
  --point-attention: #BF7A00;
  --point-probleme: #D92D20;
  --point-arrete: #9A9EA8;
  --point-info: #8A8F99;
  --case-bord: #82868F;
  --toast-fond: #1B1B1F;
  --toast-texte: #ECECEF;
  --toast-bord: #4A4B52;
  --toast-coche: #ECECEF;
  --toast-discret: #A0A3AB;
  --voile: rgba(27, 27, 31, 0.35);
  --ombre-flottant: 0 8px 24px rgba(27, 27, 31, 0.08);
  --ombre-panneau: -8px 0 24px rgba(27, 27, 31, 0.08);
  --ombre-tiroir: 0 -8px 24px rgba(27, 27, 31, 0.14);
  --ombre-toast: 0 8px 24px rgba(27, 27, 31, 0.24);
  --rayon-s: 6px;
  --rayon-m: 8px;
  --rayon-l: 12px;
  --rayon-rond: 999px;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titre: var(--police);
  --police-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --largeur-barre: 232px;
  --hauteur-entete: 60px;
  --largeur-panneau: 440px;
  --gouttiere: 32px;
  --duree: 150ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #121316;
    --surface: #1A1B1F;
    --surface-2: #222327;
    --bordure: #2C2D33;
    --bordure-forte: #3B3D45;
    --bordure-douce: #26272C;
    --encre: #E8E9ED;
    --encre-2: #C4C6CD;
    --discret: #9A9EA8;
    --accent: #8AB4F8;
    --accent-fort: #A9C7FA;
    --accent-doux: #1E2A48;
    --accent-bouton: #2F62D9;
    --accent-bouton-fort: #3A6EDF;
    --sur-accent: #FFFFFF;
    --sur: #C4C6CD;         --sur-fond: #222327;        --sur-bord: #2C2D33;
    --verifier: #E2B45A;    --verifier-fond: color-mix(in srgb, #E2B45A 14%, transparent);   --verifier-bord: color-mix(in srgb, #E2B45A 35%, transparent);
    --probleme: #F28B82;    --probleme-fond: color-mix(in srgb, #F28B82 14%, transparent);   --probleme-bord: color-mix(in srgb, #F28B82 35%, transparent);
    --info: #C4C6CD;        --info-fond: #222327;
    --neutre: #C4C6CD;      --neutre-fond: #26272C;
    --point-ok: #8A8F99;
    --point-attention: #E2B45A;
    --point-probleme: #F28B82;
    --point-arrete: #6B6F78;
    --point-info: #8A8F99;
    --case-bord: #6B6F78;
    --toast-fond: #E8E9ED;
    --toast-texte: #1B1B1F;
    --toast-bord: #C4C6CD;
    --toast-coche: #1B1B1F;
    --toast-discret: #62666F;
    --voile: rgba(0, 0, 0, 0.55);
    --ombre-flottant: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ombre-panneau: -8px 0 24px rgba(0, 0, 0, 0.45);
    --ombre-tiroir: 0 -8px 24px rgba(0, 0, 0, 0.5);
    --ombre-toast: 0 8px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fond: #121316;
  --surface: #1A1B1F;
  --surface-2: #222327;
  --bordure: #2C2D33;
  --bordure-forte: #3B3D45;
  --bordure-douce: #26272C;
  --encre: #E8E9ED;
  --encre-2: #C4C6CD;
  --discret: #9A9EA8;
  --accent: #8AB4F8;
  --accent-fort: #A9C7FA;
  --accent-doux: #1E2A48;
  --accent-bouton: #2F62D9;
  --accent-bouton-fort: #3A6EDF;
  --sur-accent: #FFFFFF;
  --sur: #C4C6CD;         --sur-fond: #222327;        --sur-bord: #2C2D33;
  --verifier: #E2B45A;    --verifier-fond: color-mix(in srgb, #E2B45A 14%, transparent);   --verifier-bord: color-mix(in srgb, #E2B45A 35%, transparent);
  --probleme: #F28B82;    --probleme-fond: color-mix(in srgb, #F28B82 14%, transparent);   --probleme-bord: color-mix(in srgb, #F28B82 35%, transparent);
  --info: #C4C6CD;        --info-fond: #222327;
  --neutre: #C4C6CD;      --neutre-fond: #26272C;
  --point-ok: #8A8F99;
  --point-attention: #E2B45A;
  --point-probleme: #F28B82;
  --point-arrete: #6B6F78;
  --point-info: #8A8F99;
  --case-bord: #6B6F78;
  --toast-fond: #E8E9ED;
  --toast-texte: #1B1B1F;
  --toast-bord: #C4C6CD;
  --toast-coche: #1B1B1F;
  --toast-discret: #62666F;
  --voile: rgba(0, 0, 0, 0.55);
  --ombre-flottant: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ombre-panneau: -8px 0 24px rgba(0, 0, 0, 0.45);
  --ombre-tiroir: 0 -8px 24px rgba(0, 0, 0, 0.5);
  --ombre-toast: 0 8px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 14px;
  line-height: 1.5;
  background: var(--fond);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--bordure-forte); text-underline-offset: 2px; }
a:hover { color: var(--encre); text-decoration-color: var(--encre-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.mono { font-family: var(--police-mono); font-size: 13px; }
.discret { color: var(--discret); }
.petit { font-size: 12px; }
.fort { font-weight: 600; }
.negatif { color: var(--probleme); }
.a-droite { text-align: right; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Les textes réservés aux lecteurs d'écran restent dans leur conteneur (pas de défilement horizontal parasite). */
.onglets, .onglet, .puces, .puce, .filtre-texte, .recherche, .mois, .btn, .nav-lien, .ligne, .cellule, .candidat,
.toast, .un-mois, .liste-liens a { position: relative; }
.evitement {
  position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: var(--rayon-m);
  background: var(--accent-bouton); color: var(--sur-accent); font-weight: 600; text-decoration: none;
}
.evitement:focus { top: 12px; color: var(--sur-accent); }
.icone { flex-shrink: 0; }
/* Étiquette de bloc (12 px, casse normale, gris) : jamais de capitales espacées. */
.etiquette { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--discret); }
.expert { color: var(--discret); font-size: 12px; text-decoration: none; }
.expert:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ coquille */
.coquille { display: flex; min-height: 100vh; }
.barre {
  width: var(--largeur-barre); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--bordure);
  display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 16px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marque {
  font-family: var(--police); font-size: 15px; font-weight: 600; color: var(--encre); letter-spacing: 0;
  text-decoration: none; padding: 6px 12px 18px 12px;
}
.marque:hover { color: var(--encre); text-decoration: none; }
.nav-lien {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--rayon-m);
  color: var(--encre-2); font-weight: 500; text-decoration: none; min-height: 36px;
}
.nav-lien:hover { background: var(--surface-2); color: var(--encre); text-decoration: none; }
.nav-lien[aria-current="page"] {
  background: var(--surface-2); color: var(--encre); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent);
}
.nav-lien .nav-texte { flex: 1; min-width: 0; }
.nav-compteur {
  font-size: 11px; font-weight: 500; line-height: 18px; min-width: 20px; text-align: center; padding: 0 6px;
  border-radius: var(--rayon-s); background: var(--neutre-fond); color: var(--discret);
}
.nav-lien[aria-current="page"] .nav-compteur { background: var(--surface); color: var(--encre-2); }
.nav-compteur--probleme { background: var(--probleme-fond); color: var(--probleme); }
.nav-externe { color: var(--discret); }
.barre-espace { flex: 1; }
.barre-trait { border-top: 1px solid var(--bordure); margin: 8px 0 4px 0; }
.nav-pied {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--rayon-m);
  color: var(--discret); font-size: 13px; text-decoration: none; background: none; border: 0; width: 100%;
  text-align: left; min-height: 36px;
}
.nav-pied:hover { background: var(--surface-2); color: var(--encre); text-decoration: none; }
.nav-pied[aria-current="page"] { color: var(--encre); font-weight: 600; }
/* Sélecteur de palette (barre latérale, menu « Plus ») : la même ligne que « Clair ou sombre », un <select> discret ;
   les palettes elles-mêmes sont dans palettes.css (jetons seulement). */
.nav-pied--choix { cursor: pointer; }
.nav-pied--choix .nav-texte { flex: 1; min-width: 0; }
.palette-choix {
  height: 26px; padding: 0 4px; max-width: 120px; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s);
  background: var(--surface); color: var(--encre-2); font-size: 12px; font-weight: 500;
}
.liste-liens .ligne-choix {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px; min-height: 44px; color: var(--encre); cursor: pointer;
}
.liste-liens .ligne-choix .icone { color: var(--discret); }
.liste-liens .ligne-choix .espace { flex: 1; }
.liste-liens .ligne-choix .palette-choix { height: 32px; font-size: 13px; max-width: 160px; }
.menu-carte .liste-liens .ligne-choix { padding: 10px 8px; border-radius: var(--rayon-s); font-size: 15px; }

.colonne { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entete {
  height: var(--hauteur-entete); flex-shrink: 0; display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gouttiere); background: var(--surface); border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 20;
}
.recherche {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin: 0;
  border: 1px solid var(--bordure); border-radius: var(--rayon-m); background: var(--surface-2);
  width: 420px; max-width: 100%; color: var(--discret);
}
.recherche:focus-within { border-color: var(--accent); background: var(--surface); }
.recherche input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--encre); }
.recherche input::placeholder { color: var(--discret); }
.touche {
  font-family: var(--police-mono); font-size: 11px; border: 1px solid var(--bordure-forte); border-radius: 4px;
  padding: 0 5px; color: var(--discret); line-height: 18px;
}
.entete-espace { flex: 1; }
.entete-date { font-size: 13px; color: var(--discret); white-space: nowrap; }
.moi { display: flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; }
.moi:hover { text-decoration: none; }
.moi-nom { font-weight: 500; line-height: 1.2; font-size: 13px; }
.moi-role { display: block; font-size: 12px; color: var(--discret); font-weight: 400; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--neutre-fond); color: var(--encre-2);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px;
  flex-shrink: 0;
}
.avatar--grand { width: 36px; height: 36px; }
.entete-mobile, .btn.recherche-mobile { display: none; }

/* ------------------------------------------------------------------ page : en-tête, zone d'actions, rythme */
.principal {
  flex: 1; min-width: 0; padding: 32px var(--gouttiere) 48px var(--gouttiere);
  display: flex; flex-direction: column; gap: 24px;
}
/* Le panneau latéral ne recouvre plus la liste sur grand écran : la page se rétrécit. */
@media (min-width: 1280px) {
  body:has(#panneau:not(:empty)) .principal { padding-right: calc(var(--largeur-panneau) + var(--gouttiere)); }
}
/* Le fragment HTMX d'un écran (#ecran) empile ses blocs avec le même rythme que la page. */
.ecran { display: flex; flex-direction: column; gap: 24px; }
/* Un formulaire porteur de champs cachés (ciblé par form= des boutons) n'occupe aucune place. */
.formulaire-cache { display: none; }
/* En-tête en grille : le titre et la zone d'actions partagent TOUJOURS la première rangée (titre à gauche,
   actions à droite, même quand la page se rétrécit sous le panneau) ; le sous-titre passe dessous, sur toute la
   largeur. .page-titres s'efface (display: contents) pour que ses deux enfants soient placés par la grille. */
.page-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 4px; align-items: center;
}
.page-titres { display: contents; }
.page-titre {
  grid-column: 1; grid-row: 1; min-width: 0;
  font-family: var(--police); font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.3;
}
.page-sous-titre { grid-column: 1 / -1; grid-row: 2; color: var(--discret); font-size: 13px; max-width: 720px; }
.page-actions {
  grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex-wrap: nowrap; min-height: 36px;
}
.page-tete > :not(.page-titres):not(.page-actions) { grid-column: 1 / -1; }
/* Zone d'actions sur deux étages (bouton + note dessous, ex. Export Vilogi) : elle occupe les deux rangées et le
   sous-titre reste collé au titre, dans la colonne de gauche. */
.page-tete:has(.page-actions-colonne) { align-items: start; }
.page-tete:has(.page-actions-colonne) .page-titre { min-height: 36px; display: flex; align-items: center; }
.page-tete:has(.page-actions-colonne) .page-actions { grid-row: 1 / span 2; }
.page-tete:has(.page-actions-colonne) .page-sous-titre { grid-column: 1; }
/* Boutons sobres de l'en-tête qui passent en icône seule quand la place manque (texte gardé pour les lecteurs
   d'écran, et en title). */
.btn-sobre-compact .btn-texte { display: inline; }
@media (max-width: 1100px) {
  .btn-sobre-compact { width: 36px; padding: 0; }
  .btn-sobre-compact .btn-texte { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1280px) {
  body:has(#panneau:not(:empty)) .btn-sobre-compact { width: 36px; padding: 0; }
  body:has(#panneau:not(:empty)) .btn-sobre-compact .btn-texte { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.page-actions-note { font-size: 12px; color: var(--discret); }
.titre-section { font-family: var(--police); font-size: 16px; font-weight: 600; letter-spacing: 0; }
/* Regroupements : l'en-tête et ses onglets, la barre d'outils et son tableau, se tiennent à 16 px ; tout le reste à 24 px. */
.page-tete + .onglets, .page-tete + .barre-outils { margin-top: -8px; }
.barre-outils + .tableau, .barre-outils + .carte, .barre-outils + .ligne-statut, .ligne-statut + .tableau { margin-top: -8px; }
.fil-ariane { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--discret); }
.fil-ariane a { color: var(--encre-2); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ onglets */
.onglets {
  display: flex; gap: 2px; border-bottom: 1px solid var(--bordure); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.onglet {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 10px 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--discret); font-weight: 500; text-decoration: none;
  white-space: nowrap;
}
.onglet:hover { color: var(--encre); text-decoration: none; }
.onglet[aria-current="page"] { border-bottom-color: var(--accent); color: var(--encre); font-weight: 600; }
.onglet .icone { opacity: 0.7; }
/* Barre d'onglets qui déborde (page rétrécie par le panneau, fenêtre étroite) : fondu à droite, comme sur
   téléphone, au lieu d'un onglet coupé net. Animation liée au défilement de la barre elle-même : sans débordement
   la chronologie est inactive, donc aucun fondu ; arrivé au bout, le fondu disparaît. */
@keyframes fondu-onglets {
  from { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  96% { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  to { -webkit-mask-image: none; mask-image: none; }
}
@supports (animation-timeline: scroll()) {
  .onglets, .puces { animation: fondu-onglets linear both; animation-timeline: scroll(self inline); }
}

/* ================================================================== navigation de Finances (début du bloc)
   Demande du dirigeant (28/09/2026) : plus aucun défilement horizontal. Gabarit espace/finances/_onglets.html,
   données espace/finances/vues.py (onglets). Rien ici ne sert à un autre écran.
   - La barre (.rubriques-barre, conteneur de requêtes « rubriques ») garde les rubriques fréquentes : rang 1
     toujours, rangs 2 puis 3 dès que la place le permet ; la rubrique active (--actif) ne se cache jamais.
   - Seuils (em : 14 px au bureau, 15 px au téléphone) = largeurs mesurées des onglets en Inter (28/09 : À valider
     84, Tous les mouvements 170, Registre 79, Balance âgée 114, Quittancement 123, Prélèvements & CAF 160,
     Comptes 84, Payeurs connus 131 ; + 2 en gras, + 2 d'écart) + 8 px ; les polices de repli sont plus étroites.
     Quand la rubrique active n'est pas d'un rang affiché, --actif-rN lui réserve sa place (seuils plus hauts).
     Repères (barre latérale et barre de défilement comprises) : 1440 et 1280 px → 7 onglets ; 1024 px → 5 ;
     panneau ouvert → 2 ou 3 ; téléphone → la rubrique active seule. Filet : un onglet mal estimé passe à la ligne,
     jamais de défilement. Un libellé changé ou une rubrique ajoutée à la barre : remesurer et revoir ces seuils.
   - Le menu « Rubriques » (<details>) montre toutes les rubriques par groupe. Un clic en dehors le referme sans
     JavaScript : un voile transparent (::before du bouton) couvre la page, sous le menu. */
.rubriques {
  position: relative; z-index: 15;              /* au-dessus des en-têtes de tableau collants (5), sous l'en-tête (20) */
  display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--bordure);
}
.page-tete + .rubriques { margin-top: -8px; }
.rubriques-barre {
  container: rubriques / inline-size; flex: 1 1 0; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none;
}
.rubriques-item { display: flex; min-width: 0; max-width: 100%; }
.rubriques-item .onglet { max-width: 100%; }
.rubriques-item .nav-compteur, .rubriques-lien .nav-compteur { margin-left: 2px; }   /* compteur éventuel */
/* Rangs 1 à 3 : ~1 010 px (avec les écarts) (+ 135 si la rubrique active est de rang 4). */
@container rubriques (width < 92em) {
  .rubriques-barre--actif-r4 .rubriques-item--r3:not(.rubriques-item--actif) { display: none; }
}
@container rubriques (width < 82em) {
  .rubriques-item--r3:not(.rubriques-item--actif) { display: none; }
}
/* Rangs 1 et 2 : 626 px (+ 117 si la rubrique active est de rang 3, + 135 si elle est de rang 4). */
@container rubriques (width < 55em) {
  .rubriques-barre--actif-r4 .rubriques-item--r2:not(.rubriques-item--actif) { display: none; }
}
@container rubriques (width < 57em) {
  .rubriques-barre--actif-r3 .rubriques-item--r2:not(.rubriques-item--actif) { display: none; }
}
@container rubriques (width < 45.5em) {
  .rubriques-item--r2:not(.rubriques-item--actif) { display: none; }
}
/* Rang 1 : 258 px (+ 164, 117 ou 135 si la rubrique active est de rang 2, 3 ou 4). En dessous : la rubrique
   active seule. */
@container rubriques (width < 30.75em) {
  .rubriques-barre--actif-r2 .rubriques-item--r1:not(.rubriques-item--actif) { display: none; }
}
@container rubriques (width < 28.75em) {
  .rubriques-barre--actif-r4 .rubriques-item--r1:not(.rubriques-item--actif) { display: none; }
}
@container rubriques (width < 27.5em) {
  .rubriques-barre--actif-r3 .rubriques-item--r1:not(.rubriques-item--actif) { display: none; }
}
@container rubriques (width < 19em) {
  .rubriques-item--r1:not(.rubriques-item--actif) { display: none; }
}
/* Très petit téléphone (320 px) : le libellé de la rubrique active passe sur deux lignes plutôt que de déborder. */
@container rubriques (width < 13em) {
  .rubriques-item .onglet { white-space: normal; }
}
.rubriques-plus { flex: none; }
.rubriques-bouton { list-style: none; cursor: pointer; user-select: none; }
.rubriques-bouton::-webkit-details-marker { display: none; }
.rubriques-chevron { transform: rotate(90deg); }
.rubriques-plus[open] > .rubriques-bouton { color: var(--encre); }
.rubriques-plus[open] .rubriques-chevron { transform: rotate(-90deg); }
.rubriques-plus[open] > .rubriques-bouton::before { content: ""; position: fixed; inset: 0; cursor: default; }
.rubriques-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1; width: min(840px, 100%);   /* 4 groupes côte à côte */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 16px 24px; padding: 16px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l);
  box-shadow: var(--ombre-flottant);
}
.rubriques-groupe { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rubriques-titre { font-size: 12px; font-weight: 500; color: var(--discret); padding: 0 8px; }
.rubriques-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rubriques-lien {
  display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; border-radius: var(--rayon-s);
  color: var(--encre-2); font-weight: 500; text-decoration: none;
}
.rubriques-lien:hover { background: var(--surface-2); color: var(--encre); text-decoration: none; }
.rubriques-lien[aria-current="page"] {
  background: var(--surface-2); color: var(--encre); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent);
}
.rubriques-lien .icone { color: var(--discret); }
@media (max-width: 767px) {
  .rubriques-item .onglet, .rubriques-bouton { min-height: 44px; }
  .rubriques-menu { left: 0; width: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .rubriques-lien { min-height: 44px; }
  /* Place sous le menu pour le faire défiler au-dessus des barres collées en bas, même sur une page courte. */
  .rubriques-menu::after { content: ""; position: absolute; top: 100%; left: 0; width: 1px; height: 160px; }
}
@media print {
  .rubriques-plus { display: none; }
}
/* ================================================================== navigation de Finances (fin du bloc) */

/* ------------------------------------------------------------------ boutons : principal (bleu), secondaire (bordé), discret (texte) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  border-radius: var(--rayon-m); border: 1px solid var(--bordure-forte); background: var(--surface);
  color: var(--encre); font-weight: 500; text-decoration: none; line-height: 1.3; white-space: nowrap;
  min-height: 36px;
}
.btn:hover { background: var(--surface-2); color: var(--encre); border-color: var(--bordure-forte); text-decoration: none; }
.btn-principal {
  background: var(--accent-bouton); border-color: var(--accent-bouton); color: var(--sur-accent); font-weight: 600;
  padding: 0 14px;
}
.btn-principal:hover { background: var(--accent-bouton-fort); border-color: var(--accent-bouton-fort); color: var(--sur-accent); }
.btn-discret, .btn-sobre { background: transparent; border-color: transparent; color: var(--encre-2); font-weight: 500; }
.btn-discret:hover, .btn-sobre:hover { background: var(--surface-2); border-color: transparent; color: var(--encre); }
.btn-destructeur { background: var(--surface); border-color: var(--bordure-forte); color: var(--probleme); font-weight: 500; }
.btn-destructeur:hover { background: var(--probleme-fond); border-color: var(--probleme-bord); color: var(--probleme); }
.btn-lien-rouge { background: transparent; border-color: transparent; color: var(--discret); font-weight: 500; }
.btn-lien-rouge:hover, .btn-lien-rouge:focus-visible { background: var(--probleme-fond); border-color: transparent; color: var(--probleme); }
.btn-icone { width: 36px; height: 36px; padding: 0; min-height: 0; }
.btn-petit { min-height: 32px; height: 32px; padding: 0 10px; font-size: 13px; border-radius: var(--rayon-s); }
.btn-valider-icone {
  width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: var(--rayon-s); border-color: var(--bordure-forte);
  background: var(--surface); color: var(--encre-2);
}
.btn-valider-icone:hover, .btn-valider-icone:focus-visible {
  background: var(--accent-bouton); color: var(--sur-accent); border-color: var(--accent-bouton);
}
.btn-plein { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--neutre-fond); border-color: var(--bordure); color: var(--discret); cursor: not-allowed;
  box-shadow: none;
}
.btn.htmx-request { opacity: 0.6; cursor: progress; }
/* Bouton en cours (espace.js) : bloqué pendant la requête, un indicateur qui tourne à la place de l'icône ; il garde
   sa couleur (pas l'aspect « désactivé ») pour qu'on voie que l'action est partie. */
button[aria-busy="true"], input[type="submit"][aria-busy="true"] { pointer-events: none; cursor: progress; }
button[aria-busy="true"]:not(.btn) { opacity: 0.7; }
.btn[aria-busy="true"] svg { display: none; }
.btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tourner 0.7s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }
label[aria-busy="true"] { pointer-events: none; cursor: progress; }
.piece-etat--encours { color: var(--encre); }
.piece-etat--encours::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tourner 0.7s linear infinite;
}
.piece-resultat { color: var(--encre-2); }
form.en-ligne { display: inline; margin: 0; }
/* « Joindre » : le champ fichier est visuellement caché ; l'étiquette sert de bouton et porte l'anneau de focus (Finances, Assurances). */
.joindre label.btn { cursor: pointer; }
.joindre input[type="file"]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.rang { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rang--droite { justify-content: flex-end; }

/* ------------------------------------------------------------------ pastilles : neutres, sauf Problème (rouge) et À vérifier (ambre) */
.pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--rayon-s);
  font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  border: 1px solid var(--bordure); background: transparent; color: var(--encre-2);
}
.pastille .point { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--point-arrete); }
.pastille .icone { color: var(--discret); }
.pastille--sur, .pastille--info, .pastille--neutre { border-color: var(--bordure); background: transparent; color: var(--encre-2); }
.pastille--sur .point, .pastille--info .point, .pastille--neutre .point { background: var(--point-arrete); }
.pastille--verifier { background: var(--verifier-fond); border-color: var(--verifier-bord); color: var(--verifier); }
.pastille--verifier .point { background: var(--point-attention); }
.pastille--verifier .icone { color: var(--verifier); }
.pastille--probleme { background: var(--probleme-fond); border-color: var(--probleme-bord); color: var(--probleme); }
.pastille--probleme .point { background: var(--point-probleme); }
.pastille--probleme .icone { color: var(--probleme); }
/* Score de confiance en chiffres à côté du mot (Finances, panneau) : mono, gris ; rouge si problème ou < 70 %. */
.c-score { font-family: var(--police-mono); font-size: 13px; color: var(--encre-2); white-space: nowrap; }
.c-score--probleme { color: var(--probleme); }
.etiquette-imputation {
  display: inline-block; padding: 0 6px; border-radius: var(--rayon-s); font-size: 11px; font-weight: 500; line-height: 18px;
  border: 1px solid var(--bordure); color: var(--encre-2); white-space: nowrap;
}
.etiquette-imputation--neutre { color: var(--discret); }
/* Même composant que la pastille, ancien nom (Connexions). */
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--rayon-s); font-size: 12px;
  font-weight: 500; border: 1px solid var(--bordure); color: var(--encre-2);
}
.badge--sur, .badge--neutre { color: var(--encre-2); }
.badge--verifier { background: var(--verifier-fond); border-color: var(--verifier-bord); color: var(--verifier); }
.badge--probleme { background: var(--probleme-fond); border-color: var(--probleme-bord); color: var(--probleme); }
.point-sante { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--point-arrete); }
.point-sante--ok { background: var(--point-ok); }
.point-sante--attention { background: var(--point-attention); }
.point-sante--probleme { background: var(--point-probleme); }
.point-sante--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--point-arrete); }

/* ------------------------------------------------------------------ filtres, champs */
.barre-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barre-outils .espace { flex: 1 1 0; }
.mois {
  display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-m); background: var(--surface);
}
.mois-fleche {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--encre-2); border-radius: var(--rayon-s); text-decoration: none; border: 0; background: none;
}
.mois-fleche:hover { background: var(--surface-2); color: var(--encre); }
.mois-fleche[aria-disabled="true"] { color: var(--bordure-forte); pointer-events: none; }
.mois-libelle { padding: 0 8px; font-weight: 600; min-width: 130px; text-align: center; font-size: 13px; }
.puces { display: flex; gap: 6px; flex-wrap: wrap; }
.puce {
  display: inline-flex; align-items: center; padding: 0 10px; min-height: 32px; border-radius: var(--rayon-m);
  border: 1px solid var(--bordure); background: var(--surface); color: var(--encre-2); font-size: 13px;
  font-weight: 500; text-decoration: none; white-space: nowrap; line-height: 1.2;
}
.puce:hover { border-color: var(--bordure-forte); color: var(--encre); text-decoration: none; }
.puce[aria-current="true"], .puce[aria-pressed="true"] {
  background: var(--surface-2); border-color: var(--bordure-forte); color: var(--encre); font-weight: 600;
}
.segments { display: inline-flex; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); overflow: hidden; background: var(--surface); }
.segment {
  padding: 0 10px; border: 0; border-right: 1px solid var(--bordure); background: var(--surface);
  color: var(--discret); font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 32px;
}
.segment:last-child { border-right: 0; }
.segment:hover { color: var(--encre); text-decoration: none; }
.segment[aria-pressed="true"], .segment[aria-current="true"] { background: var(--surface-2); color: var(--encre); font-weight: 600; }
.segment--actif[aria-pressed="true"] { background: var(--surface-2); color: var(--encre); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ-etiquette { font-size: 13px; font-weight: 500; }
.champ-aide { font-size: 12px; color: var(--discret); }
.champ-erreur { font-size: 12px; color: var(--probleme); }
.saisie {
  height: 36px; padding: 0 12px; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m);
  background: var(--surface); width: 100%;
}
textarea.saisie { height: auto; padding: 8px 12px; }
.saisie:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.saisie-etroite { width: auto; }
.barre-outils .saisie { width: auto; min-width: 180px; }
.case-ligne { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; }
.filtre-texte {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-m); background: var(--surface); color: var(--discret); margin: 0;
}
.barre-outils .filtre-texte { flex: 1 1 200px; min-width: 200px; max-width: 320px; }
.filtre-texte:focus-within { border-color: var(--accent); }
.filtre-texte input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--encre); }
.filtre-texte input::placeholder { color: var(--discret); }

/* ------------------------------------------------------------------ cartes, indicateur, bandeaux */
.carte {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l); padding: 16px 20px;
}
.carte:has(> .carte-tete) { padding: 0; }
.carte-tete { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--bordure); min-height: 48px; }
.carte-tete .espace, .carte-entete-legere .espace { flex: 1; }
.carte-tete + .carte-corps, .carte > .detail-corps { padding: 16px 20px; }
.carte-titre { font-size: 14px; font-weight: 600; }
.carte-titre .compte { color: var(--discret); font-weight: 500; }
.carte-explication { font-size: 12px; color: var(--discret); }
.carte--liste { padding: 0; overflow: hidden; }
.carte-entete-legere { display: flex; align-items: center; gap: 8px; }
.carte-entete-legere .fort { font-size: 14px; }
.carte-pied {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px;
  border-top: 1px solid var(--bordure);
}
.compteur-accent {
  font-size: 12px; background: var(--neutre-fond); color: var(--encre-2); border-radius: var(--rayon-s);
  padding: 0 6px; font-weight: 500; line-height: 20px;
}
/* Indicateur du mois : une ligne de statut sobre, jauge fine neutre. */
.indicateur {
  display: flex; align-items: center; gap: 12px; padding: 0; background: transparent; border: 0; flex-wrap: wrap;
  font-size: 13px; color: var(--encre-2);
}
.ligne-statut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--encre-2); min-height: 24px; }
.indicateur-valeur { font-size: 14px; font-weight: 600; font-family: var(--police-mono); letter-spacing: 0; }
.jauge { width: 120px; height: 8px; flex-shrink: 0; overflow: visible; }
.jauge-fond { fill: var(--neutre-fond); }
.jauge-niveau { fill: var(--discret); }
.jauge-niveau--haut { fill: var(--encre-2); }
.jauge-seuil { fill: var(--discret); }
.indicateur-texte { font-size: 13px; flex: 1; min-width: 240px; }
.indicateur-ok { color: var(--encre-2); font-weight: 500; }
.indicateur-ko { color: var(--verifier); font-weight: 500; }
.bandeau {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--rayon-m);
  background: var(--verifier-fond); border: 1px solid var(--verifier-bord); flex-wrap: wrap; font-size: 13px;
}
.bandeau-point { width: 8px; height: 8px; border-radius: 50%; background: var(--point-attention); flex-shrink: 0; margin-top: 6px; }
.bandeau-titre { font-weight: 500; color: var(--verifier); }
.bandeau--info { background: var(--surface); border-color: var(--bordure); color: var(--encre-2); }
.bandeau--info .bandeau-point { display: none; }
.bandeau--probleme { background: var(--probleme-fond); border-color: var(--probleme-bord); }
.bandeau--probleme .bandeau-point { background: var(--point-probleme); }
.bandeau--probleme .bandeau-titre { color: var(--probleme); font-weight: 500; }
.bandeau-texte { flex: 1; min-width: 240px; }
.bandeau .btn { align-self: center; }
/* Bandeau d'une ligne avec son unique bouton (bordé, 32 px) aligné à droite. */
.bandeau--action { align-items: center; gap: 12px 16px; padding: 10px 12px 10px 16px; }
.bandeau--action .bandeau-texte { color: var(--encre); }
.bandeau--action .btn { margin-left: auto; flex-shrink: 0; }
.fait-bandeau {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rayon-m);
  background: var(--surface-2); color: var(--encre-2); border: 1px solid var(--bordure);
}
.fait-bandeau .icone { color: var(--discret); }
.fait-bandeau .texte { flex: 1; font-weight: 500; }
.fait-bandeau .btn { min-height: 32px; padding: 0 10px; font-size: 13px; }
.confirmation { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--rayon-m); background: var(--surface); border: 1px solid var(--bordure-forte); }
.texte-fait { font-size: 13px; color: var(--encre-2); font-weight: 500; }
.texte-corrige { color: var(--verifier); }

/* ------------------------------------------------------------------ tableau (grilles, jamais <table>) */
.tableau {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l); overflow: clip;
  display: flex; flex-direction: column;
}
.tableau-tete, .ligne { display: grid; gap: 12px; align-items: center; padding: 8px 16px; }
.tableau-tete {
  border-bottom: 1px solid var(--bordure); font-size: 12px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--discret); background: var(--surface-2); min-height: 36px;
  position: sticky; top: var(--hauteur-entete); z-index: 5;
}
.tableau .carte-tete + .tableau-tete { position: static; }
.ligne { border-bottom: 1px solid var(--bordure-douce); background: var(--surface); min-height: 48px; }
.ligne:last-child { border-bottom: 0; }
.ligne:hover { background: var(--surface-2); }
.ligne.ouverte { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bordure-forte); }
.ligne:has(.case:checked) { background: var(--surface-2); }
.ligne--faite { background: var(--surface-2); }
.ligne--cliquable { text-decoration: none; color: inherit; }
.cellule { min-width: 0; }
.c-date { font-size: 13px; color: var(--encre-2); }
.c-montant { text-align: right; font-weight: 500; white-space: nowrap; font-family: var(--police-mono); font-size: 13px; }
/* Un débit n'est pas un problème : le signe suffit, la pastille porte l'état. */
.c-montant.negatif, .detail-montant.negatif { color: var(--encre-2); }
.c-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-qui { min-width: 0; }
.lien-qui {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; color: inherit;
  text-decoration: none; border-radius: 4px;
}
.lien-qui:hover { color: inherit; text-decoration: none; }
.lien-qui:hover .libelle { text-decoration: underline; text-decoration-color: var(--bordure-forte); }
.libelle {
  font-family: var(--police-mono); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; color: var(--encre);
}
.sous-ligne { display: block; font-size: 12px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-pourquoi { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-start; }
.c-pourquoi > * { max-width: 100%; }
.c-pourquoi .nom { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--encre); text-decoration: none; }
.c-pourquoi a.nom:hover { text-decoration: underline; text-decoration-color: var(--bordure-forte); }
.c-etat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.c-etat .pastille { min-width: 92px; justify-content: flex-start; }
.c-etat-ligne { display: flex; align-items: center; gap: 8px; }
/* L'avis du robot explique l'état : en entier, sans survol (demande du dirigeant, 28/09). */
.c-avis { font-size: 12px; line-height: 1.35; color: var(--discret); overflow-wrap: anywhere; }
.avis-points { margin: 0; padding-left: 14px; }
.avis-points li { margin: 0 0 1px; }
.avis-points li::marker { color: var(--bordure-forte); }
.avis-points .avis-attention { color: var(--encre); font-weight: 500; }
.avis-points .avis-ia { color: var(--encre-2); }
/* Sous le bail proposé : loyer, écart avec le montant reçu, solde du compte — lisible sans ouvrir le panneau. */
.chiffres-bail { display: block; font-size: 12px; line-height: 1.35; color: var(--discret); white-space: normal; }
.chiffres-bail .ecart-recu { color: var(--encre); font-weight: 500; }
.c-avis .ia { font-weight: 500; color: var(--encre-2); }
.case { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tableau-pied {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--bordure);
  font-size: 12px; color: var(--discret); flex-wrap: wrap; min-height: 36px;
}
.tableau-pied .espace { flex: 1; }
.tableau-pied a { font-weight: 500; color: var(--discret); text-decoration: none; }
.tableau-pied a:hover { color: var(--encre); text-decoration: underline; }
.barre-selection {
  display: none; align-items: center; gap: 8px; padding: 0 0 0 4px; border-radius: var(--rayon-m);
  color: var(--encre-2);
}
.ecran:has(.case:checked) .barre-selection { display: flex; }
.ecran:has(.case:checked) .btn-valider-surs { display: none; }   /* jamais deux boutons principaux */
.barre-selection .compte { font-weight: 500; font-size: 13px; padding-right: 4px; }

/* ------------------------------------------------------------------ état vide */
.vide {
  border: 1px dashed var(--bordure-forte); border-radius: var(--rayon-l); padding: 32px 20px; margin: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--encre);
}
.vide .icone { color: var(--discret); margin-bottom: 4px; }
.vide-titre { font-weight: 600; font-size: 14px; }
.vide-texte { font-size: 13px; color: var(--discret); max-width: 420px; }
.vide a.fort { font-weight: 500; font-size: 13px; margin-top: 8px; }

/* ------------------------------------------------------------------ panneau latéral / tiroir */
.panneau:empty { display: none; }
.panneau {
  position: fixed; top: var(--hauteur-entete); right: 0; bottom: 0; width: var(--largeur-panneau); max-width: 100%;
  background: var(--surface); border-left: 1px solid var(--bordure); box-shadow: var(--ombre-panneau);
  z-index: 30; display: flex; flex-direction: column; animation: glisser-gauche var(--duree) ease-out;
}
@keyframes glisser-gauche { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes monter { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.detail-tete {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 14px 20px; border-bottom: 1px solid var(--bordure);
}
.detail-tete .titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.detail-contexte { font-size: 12px; color: var(--discret); }
.detail-montant { font-size: 22px; font-weight: 600; letter-spacing: 0; line-height: 1.25; outline: none; font-family: var(--police-mono); }
.detail-titre-texte { font-family: var(--police); font-size: 18px; }
.detail-etat { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.detail-etat:empty { display: none; }
.btn-fermer {
  width: 32px; height: 32px; border-radius: var(--rayon-s); border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--discret); padding: 0; flex-shrink: 0;
  text-decoration: none;
}
.btn-fermer:hover { background: var(--surface-2); color: var(--encre); }
.poignee { display: none; }
.detail-corps { flex: 1; overflow: auto; padding: 16px 20px 20px 20px; display: flex; flex-direction: column; gap: 20px; }
.bloc { display: flex; flex-direction: column; gap: 6px; }
.bloc-titre { font-size: 12px; font-weight: 600; color: var(--encre-2); }
.libelle-exact { font-family: var(--police-mono); font-size: 13px; word-break: break-word; }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.deux-colonnes .titre { font-size: 12px; color: var(--discret); }
.robot {
  border-radius: var(--rayon-m); background: var(--surface-2); border: 1px solid var(--bordure); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.robot-grille { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.robot-cle { font-size: 12px; font-weight: 500; color: var(--discret); padding-top: 2px; }
.robot-valeur { font-size: 13px; }
.robot-ia { border-top: 1px solid var(--bordure); padding-top: 8px; font-size: 13px; display: flex; gap: 12px; }
/* Même colonne de clés que .robot-grille : « Agents IA » ne se casse plus en deux lignes. */
.robot-ia .robot-cle { width: 132px; flex-shrink: 0; white-space: nowrap; }
.proposition {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--rayon-m);
  border: 1px solid var(--bordure);
}
.proposition .centre { flex: 1; min-width: 0; }
.proposition .nom { font-weight: 500; text-decoration: none; }
.proposition a.nom:hover { text-decoration: underline; }
.proposition .droite { text-align: right; white-space: nowrap; }
.proposition .droite .fort { font-family: var(--police-mono); font-size: 13px; font-weight: 500; }
.proposition-vide {
  padding: 10px 12px; border-radius: var(--rayon-m); border: 1px dashed var(--bordure-forte); font-size: 13px;
  color: var(--encre-2);
}
.lignes-lot { display: flex; flex-direction: column; border: 1px solid var(--bordure); border-radius: var(--rayon-m); }
.lignes-lot .l {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 12px; align-items: center;
  border-bottom: 1px solid var(--bordure-douce); font-size: 13px;
}
.lignes-lot .l:last-child { border-bottom: 0; }
.lignes-lot .fort { font-family: var(--police-mono); font-weight: 500; }
.actions-panneau { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--bordure-douce); }
.actions-panneau .rang { display: flex; gap: 8px; flex-wrap: wrap; }
.actions-panneau .rang form { display: flex; }
.actions-panneau .rang--secondaire .btn { font-size: 13px; }
.actions-panneau .aide { font-size: 12px; color: var(--discret); }
.correction { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--bordure); border-radius: var(--rayon-m); }
.correction-tete { display: flex; align-items: center; gap: 8px; }
.correction-tete .etiquette, .correction-tete .bloc-titre { flex: 1; font-size: 13px; font-weight: 600; color: var(--encre); }
.candidat {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--rayon-m);
  border: 1px solid var(--bordure); background: var(--surface); text-align: left; width: 100%; min-height: 40px;
}
.candidat:hover { border-color: var(--bordure-forte); background: var(--surface-2); }
.candidat--propose { border-color: var(--bordure-forte); background: var(--surface-2); }
.candidat .nom { flex: 1; font-weight: 500; min-width: 0; }
.candidat .note { font-size: 12px; color: var(--discret); text-align: right; max-width: 45%; }
.historique { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.historique .evt { display: flex; gap: 10px; }
.historique .quand { font-family: var(--police-mono); font-size: 12px; color: var(--discret); width: 96px; flex-shrink: 0; padding-top: 1px; }
.liens-detail { display: flex; gap: 12px; font-size: 12px; flex-wrap: wrap; margin-top: 4px; }
.liens-detail a { font-weight: 500; color: var(--discret); text-decoration: none; }
.liens-detail a:hover { color: var(--encre); text-decoration: underline; }
.page-detail { max-width: 760px; }
.page-detail .detail { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l); }
.page-detail .detail-corps { overflow: visible; }
.page-detail-large { max-width: 1040px; }

.tiroir {
  border: 0; padding: 0; margin: auto; width: min(560px, calc(100% - 32px)); max-height: 85vh;
  background: var(--surface); color: var(--encre); border-radius: var(--rayon-l); box-shadow: var(--ombre-flottant);
}
.tiroir::backdrop { background: var(--voile); }
.tiroir[open] { animation: monter var(--duree) ease-out; }
.tiroir-contenu { padding: 8px 20px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.tiroir-poignee { width: 40px; height: 4px; border-radius: 2px; background: var(--bordure-forte); margin: 4px auto 0 auto; }
.tiroir-tete { display: flex; align-items: center; gap: 10px; }
.tiroir-titre { flex: 1; font-size: 16px; font-weight: 600; }

/* ------------------------------------------------------------------ toast */
.zone-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  width: max-content; max-width: min(760px, calc(100% - 32px));
}
.toast {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--rayon-l); min-width: min(520px, calc(100vw - 32px));
  background: var(--toast-fond); color: var(--toast-texte); box-shadow: var(--ombre-toast);
  animation: monter var(--duree) ease-out;
}
.toast .icone { color: var(--toast-coche); }
.toast--erreur .icone { color: var(--point-probleme); }
.toast-texte { flex: 1; }
.toast .btn-annuler {
  padding: 0 12px; border-radius: var(--rayon-m); border: 1px solid var(--toast-bord); background: transparent;
  color: var(--toast-texte); font-weight: 500; min-height: 32px;
}
.toast .btn-annuler:hover { background: rgba(127, 127, 127, 0.18); }
.toast-fermer {
  width: 28px; height: 28px; border-radius: var(--rayon-s); border: 0; background: transparent; color: var(--toast-discret);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.toast-fermer:hover { color: var(--toast-texte); }

/* ------------------------------------------------------------------ pages socle (menu, mode expert, refus) */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.liste-liens { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.liste-liens li { border-bottom: 1px solid var(--bordure-douce); }
.liste-liens li:last-child { border-bottom: 0; }
.liste-liens a, .liste-liens button {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px; text-decoration: none; color: var(--encre);
  min-height: 44px; width: 100%; text-align: left; background: none; border: 0; font-size: inherit;
}
.liste-liens a:hover, .liste-liens button:hover { color: var(--encre); background: var(--surface-2); }
.liste-liens a .espace, .liste-liens button .espace { flex: 1; }
.texte-long { max-width: 720px; color: var(--encre-2); }
.texte-long p + p { margin-top: 8px; }
.flex-1 { flex: 1; min-width: 0; }
.liste-points { margin: 4px 0 0 0; padding-left: 18px; }
.liste-points li { margin-bottom: 2px; }

/* ------------------------------------------------------------------ éléments partagés par plusieurs écrans */
.champs-cle-valeur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; font-size: 13px; }
.champs-cle-valeur dt { color: var(--discret); }
.champs-cle-valeur dd { margin: 0; text-align: right; font-weight: 500; }
.deux-colonnes-info { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; font-size: 13px; }
.deux-colonnes-info dt { color: var(--discret); }
.deux-colonnes-info dd { margin: 0; font-size: 14px; }
.agenda-ligne { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--bordure-douce); align-items: baseline; }
.agenda-heure { width: auto; min-width: 48px; flex-shrink: 0; white-space: nowrap; }
.ligne-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ligne-actions .saisie { width: auto; flex: 1 1 200px; max-width: 320px; }
.actions-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.etape-liste { display: flex; flex-direction: column; }
.carte--liste .etape-liste { padding: 0 20px; }
.etape { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-top: 1px solid var(--bordure-douce); }
.etape-liste > .etape:first-child { border-top: 0; }
.etape-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.etape .avatar { margin-top: 1px; }
.carte-espacee { display: flex; flex-direction: column; gap: 10px; }
.carte--verifier { border-color: var(--verifier-bord); background: var(--verifier-fond); }

/* ------------------------------------------------------------------ barre d'onglets du téléphone, HTMX */
.onglets-mobile, .action-mobile { display: none; }
.htmx-indicator { opacity: 0; transition: opacity var(--duree) ease-out; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ================================================================== téléphone */
@media (max-width: 767px) {
  :root { --gouttiere: 16px; --hauteur-entete: 56px; }
  body { font-size: 15px; }
  .barre { display: none; }
  .entete { gap: 10px; padding: 0 var(--gouttiere); }
  .entete .recherche, .entete-date, .moi-texte { display: none; }
  .entete-mobile { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .btn.recherche-mobile { display: inline-flex; }
  .entete-espace { display: none; }
  .entete-mobile .marque { padding: 0; font-size: 16px; }
  .btn-icone { width: 44px; height: 44px; }
  .principal { padding: 20px var(--gouttiere) 176px var(--gouttiere); gap: 20px; }
  .ecran { gap: 20px; }
  .page-titre { font-size: 20px; }
  .page-tete { gap: 12px; }
  .page-sous-titre { display: none; }
  .page-actions { display: none; }
  .btn { min-height: 44px; }
  .btn-petit { min-height: 44px; height: auto; padding: 0 14px; font-size: 15px; }
  .btn-icone { min-height: 0; }
  .barre-outils { gap: 8px; }
  .puces, .onglets { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; padding-right: 24px;
    mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .onglets, .puces { scrollbar-width: none; }
  .onglets::-webkit-scrollbar, .puces::-webkit-scrollbar { display: none; }
  .puce, .segment { min-height: 40px; }
  .filtre-texte { width: 100%; min-width: 0; height: 44px; }
  .barre-outils .filtre-texte { max-width: none; flex-basis: 100%; }
  .barre-outils .saisie { width: 100%; }
  .mois { height: 44px; }
  .mois-fleche { width: 44px; height: 42px; }
  .saisie { height: 44px; }
  .case-ligne { min-height: 44px; }
  .btn-principal-bureau { display: none; }
  .barre-selection, .ecran:has(.case:checked) .barre-selection { display: none; }
  .carte { padding: 14px 16px; }
  .carte-tete { flex-wrap: wrap; padding: 12px 16px; }
  .carte-tete + .carte-corps, .carte > .detail-corps { padding: 14px 16px; }

  /* tableaux → cartes */
  .tableau { background: transparent; border: 0; border-radius: 0; overflow: visible; gap: 10px; }
  .tableau-tete { display: none !important; }
  .ligne {
    border: 1px solid var(--bordure); border-radius: var(--rayon-l); padding: 12px 14px; gap: 6px 8px; min-height: 0;
    align-items: start; text-align: left;
  }
  .ligne:last-child { border-bottom: 1px solid var(--bordure); }
  .ligne.ouverte { border-color: var(--bordure-forte); background: var(--surface); box-shadow: none; }
  .c-date { font-size: 12px; color: var(--discret); }
  .c-etat { flex-direction: row; align-items: center; }
  .c-etat .pastille { min-width: 0; }
  .c-montant { font-size: 16px; }
  .lien-qui .libelle { white-space: normal; font-size: 12px; color: var(--encre-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .sous-ligne { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
  .c-pourquoi { flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .c-actions { justify-content: stretch; }
  .c-actions > *, .c-actions form { flex: 1; display: flex; }
  .c-actions .btn { flex: 1; min-height: 44px; height: auto; font-size: 15px; }
  .c-actions .btn-valider-icone { width: auto; }
  .c-actions .btn-valider-icone::after { content: "Valider"; font-weight: 500; }
  .tableau-pied { border: 0; padding: 4px 2px; }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .deux-colonnes-info { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .deux-colonnes-info dd + dt { margin-top: 10px; }
  .grille-cartes { gap: 16px; }
  .bandeau { align-items: flex-start; }
  .bandeau--action { flex-direction: column; align-items: stretch; padding: 12px 14px; }
  .bandeau--action .bandeau-texte { min-width: 0; }
  .bandeau--action .btn { margin-left: 0; width: 100%; min-height: 44px; }
  .robot-ia { flex-direction: column; gap: 2px; }
  .robot-ia .robot-cle { width: auto; }

  /* panneau → tiroir en bas */
  .panneau {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; border-left: 0;
    border-radius: var(--rayon-l) var(--rayon-l) 0 0; box-shadow: var(--ombre-tiroir), 0 0 0 100vmax var(--voile);
    animation-name: monter; z-index: 70;
  }
  .panneau .poignee { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--bordure-forte); margin: 8px auto 0 auto; }
  .panneau .detail-tete { padding: 8px 16px 12px 16px; }
  .panneau .detail-corps { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)) 16px; }
  .detail-contexte-long { display: none; }
  .robot-grille { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .robot-grille .robot-valeur + .robot-cle { margin-top: 8px; }
  .btn-fermer { width: 44px; height: 44px; border-radius: var(--rayon-m); }
  .actions-panneau .rang { flex-direction: column; align-items: stretch; }
  .actions-panneau .rang > *, .actions-panneau .rang form, .actions-panneau .rang .btn, .actions-panneau .rang a { width: 100%; flex: 1; }
  .actions-panneau .btn { min-height: 44px; }
  .actions-panneau .btn-principal { min-height: 48px; font-size: 15px; }
  .candidat { min-height: 48px; }
  .page-detail .detail { border-radius: var(--rayon-l); }

  /* barre d'action collante + onglets en bas */
  .action-mobile {
    display: block; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 25;
    padding: 10px 16px; background: var(--fond); border-top: 1px solid var(--bordure);
  }
  .action-mobile .btn-principal { width: 100%; min-height: 48px; font-size: 15px; border-radius: var(--rayon-m); }
  .onglets-mobile {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0;
    bottom: 0; z-index: 26; background: var(--surface); border-top: 1px solid var(--bordure);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)) 4px;
  }
  .onglet-mobile {
    min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    text-decoration: none; color: var(--discret); font-size: 11px; font-weight: 500; border-radius: var(--rayon-m);
  }
  .onglet-mobile[aria-current="page"] { color: var(--encre); font-weight: 600; }
  .zone-toast { bottom: calc(80px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  body:has(.action-mobile) .zone-toast { bottom: calc(146px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; gap: 10px; padding: 12px 14px; font-size: 13px; }
  .toast-fermer { width: 36px; height: 36px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  :root { --gouttiere: 24px; --largeur-barre: 200px; }
  .entete-date { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .barre, .entete, .onglets-mobile, .action-mobile, .zone-toast, .panneau, .c-actions { display: none !important; }
}

/* ==================================================================================================================
   RÈGLES HÉRITÉES PROPRES À UN ÉCRAN — à déplacer dans ecrans/<écran>.css par le groupe concerné (Locataires :
   fait, règles dans ecrans/locataires.css ; Incidents et Courrier & factures : fait, les anciennes grilles —
   grille-incidents, fiche-colonnes, ligne-journal, grille-courrier, visionneuse-pdf… — sont supprimées, seule source
   ecrans/incidents.css et ecrans/courrier.css ; restent Robots/Réglages/Recherche), puis à supprimer ici. Elles
   sont conservées, avec les deux blocs @media autrefois jamais refermés (lignes 982 et 1101 de l'ancienne feuille)
   corrigés, pour que ces écrans ne se cassent pas d'ici là. Rien de ce qui suit ne concerne Aujourd'hui, Finances,
   Incidents ni Courrier & factures.
   ================================================================================================================== */

/* ------------------------------------------------------------------ robots (E39), connexions (E40) */
.resume-robots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.resume-robots .carte { display: flex; flex-direction: column; gap: 2px; }
.resume-chiffre { font-size: 22px; font-weight: 600; letter-spacing: 0; font-family: var(--police-mono); }
.groupe-robots { padding: 0; overflow: clip; }
.groupe-titre { padding: 10px 20px; border-bottom: 1px solid var(--bordure); background: var(--surface-2); font-size: 13px; font-weight: 600; }
.grille-robots { grid-template-columns: 16px minmax(0, 1.2fr) minmax(0, 1.5fr) 130px 260px 84px; }
.c-robot-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; color: inherit; text-decoration: none; }
.c-robot-nom .nom { font-weight: 500; }
.c-robot-etat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-robot-etat .bilan { font-size: 12px; color: var(--discret); }
.c-robot-dernier { font-size: 12px; color: var(--discret); }
.cellule--marches { display: flex; flex-direction: column; gap: 6px; }
.marche-bloc { display: flex; flex-direction: column; gap: 4px; }
.marche-bloc .source { font-size: 12px; color: var(--discret); }
.connexions-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.connexion-tete { display: flex; align-items: center; gap: 10px; }
.connexion-tete .titre { flex: 1; font-weight: 600; }
@media (max-width: 767px) {
  .grille-robots { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .grille-robots > * { min-width: 0; width: 100%; }
  .grille-robots .point-sante { display: none; }
  .c-robot-nom .sous-ligne { white-space: normal; }
  .connexions-grille { grid-template-columns: minmax(0, 1fr); }
  .resume-robots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connexion-tete { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ réglages (E41) */
.grille-comptes { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) 150px 80px; }
.grille-libelles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 90px; }
.grille-routage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.grille-utilisateurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px 90px 150px; }
.societe-carte { border-top: 1px solid var(--bordure-douce); padding: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.societe-carte:first-child { border-top: 0; }
.grille-champs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grille-champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.reglage-serveur { color: var(--encre-2); background: var(--surface); }
.section-verrouillee { display: flex; align-items: center; gap: 12px; color: var(--discret); }
.carte--horizontale { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.carte--horizontale-texte { flex: 1; min-width: 220px; }
@media (max-width: 767px) {
  .grille-champs-3, .grille-champs-2 { grid-template-columns: minmax(0, 1fr); }
  .grille-comptes, .grille-libelles, .grille-routage, .grille-utilisateurs { display: flex; flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------------ recherche globale (E42) */
.recherche-champ { max-width: 560px; height: 44px; }
.recherche-mise { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.recherche-colonne { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.recherche-aside { display: flex; flex-direction: column; gap: 24px; }
.groupe-recherche { padding: 0; overflow: clip; }
.resultat-ligne {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--bordure-douce);
  text-decoration: none; color: var(--encre);
}
.groupe-recherche .resultat-ligne:last-child { border-bottom: 0; }
.resultat-ligne:hover { background: var(--surface-2); text-decoration: none; }
.resultat-ligne .icone { flex-shrink: 0; color: var(--discret); }
.resultat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resultat-titre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.resultat-detail { font-size: 12px; color: var(--discret); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat-ligne .pastille { flex-shrink: 0; }
.carte-meilleur { display: flex; flex-direction: column; gap: 10px; }
.carte-meilleur .resultat-ligne { padding: 0; border-bottom: 0; }
.liste-astuces { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.liste-astuces .mono { background: var(--surface-2); border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
@media (max-width: 767px) {
  .recherche-champ { width: 100%; max-width: none; height: 44px; }
  .recherche-mise { grid-template-columns: minmax(0, 1fr); }
  .resultat-ligne { padding: 12px 14px; }
  .resultat-titre, .resultat-detail { white-space: normal; }
}
/* ------------------------------------------------------------------ solde du compte locataire (lot grand livre)
   Dérogation explicite du dirigeant (26/09/2026, design/ARCHITECTURE_GESTION.md § 3) : le solde locataire est le SEUL
   endroit de l'espace où le vert est permis (positif = en avance), rouge s'il est négatif (doit), gris à zéro. Ces
   deux jetons ne servent qu'aux classes .solde-locataire* (ecrans/compte_locataire.css). Contraste ≥ 4,5:1 sur
   --surface et --fond (clair 5,1:1, sombre 7,3:1). */
:root { --solde-positif: #1A7F37; --solde-negatif: var(--probleme); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --solde-positif: #5DBB7E; --solde-negatif: var(--probleme); } }
:root[data-theme="dark"] { --solde-positif: #5DBB7E; --solde-negatif: var(--probleme); }