:root{--forest:#0A463C;--mint:#DCFAD2;--taupe:#E1E1D2;--ciel:#DCF5FA;--red:#C0392B;--grn:#1E8449;
  /* Jetons de conception (18 août, vague 5d) -- rayon/ombre/typographie, ajoutés en pur
     alias des valeurs déjà dominantes (aucun changement visuel) pour arrêter la dérive
     de nouvelles valeurs ad hoc. Voir la note de suivi du dossier « Mise en place app
     Atreum » (mon-outil) pour le recensement complet ayant guidé ces paliers. */
  --radius-sm:8px;--radius-md:10px;--radius-pill:20px;
  --shadow-ring-forest:0 0 0 3px rgba(10,70,60,.08);--shadow-card-subtle:0 1px 2px rgba(16,40,34,.04);
  --fs-2xs:9px;--fs-xs:10px;--fs-sm:11px;--fs-md:12px;--fs-lg:13px;--fs-xl:14px;--fs-2xl:16px;
}
*{box-sizing:border-box}
/* 24 juillet, retour de Patrick : "le tout blanc rend la lecture et la séparation des
   sections et éléments difficile" -- diagnostic : le fond de page (#f5f7f5) et les
   cartes blanches (#fff) n'avaient que 10 points RGB d'écart, et la bordure/l'ombre des
   cartes étaient si pâles (bordure quasi blanche, ombre à 3% d'opacité) qu'elles ne se
   voyaient quasiment pas -- même chose pour le séparateur de ligne des tableaux
   (#eef2f0, à peine plus foncé que blanc). Corrigé ici + .card/.icard + th,td ci-dessous
   -- même changement appliqué en double dans app.js::immoCss() (feuille de style du
   module Immo, injectée à l'exécution, copie parallèle de .card/.it -- garder les DEUX
   synchronisées). Les panneaux internes gris (background:#f5f7f5 inline, ex. formulaires
   repliables) restent inchangés -- ils sont toujours plus foncés que le blanc des cartes
   dans lesquelles ils s'insèrent, donc pas d'effet de bord. */
body{font-family:'Manrope',-apple-system,Segoe UI,Arial,sans-serif;margin:0;color:#1c2421;background:#eef1ee}
/* 30 juillet, demandé par Patrick : « fixe le bandeau du haut, si je me promène et descend
   une page il demeure toujours visible ». Même raisonnement que le rail (29 juillet) :
   position:sticky plutôt que fixed, pour que l'en-tête reste dans le flux et n'oblige pas à
   compenser sa hauteur par une marge sur le contenu.
   z-index 550 : au-dessus du fil de discussion mobile (500, qui s'ancre déjà sous
   --haut-entete) mais SOUS les tiroirs et fenêtres modales (999-1000) -- un en-tête qui
   passerait devant une fenêtre de dialogue serait pire que le défaut corrigé. */
/* 21 août, demandé par Patrick (« style Google, fluide, simple ») : coffrage clair, le vert
   forêt réservé à l'accent -- header{background:var(--forest)} pleine couleur était la seule
   pièce du coffrage encore foncée, le rail (.rail, plus bas) était déjà blanc avec juste
   l'item actif en menthe. Maquette comparative validée par Patrick avant ce changement (voir
   note du dossier Knowlton, Mon Outil). border-bottom au lieu d'un bloc de couleur pour
   séparer le bandeau du contenu -- même langage que .rail{border-right:1px solid #dde5e0}
   et nav{border-bottom:1px solid #dde5e0} déjà en place. */
header{background:#fff;color:#1c2421;border-bottom:1px solid #dde5e0;padding:13px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  position:sticky;top:0;z-index:550}
header h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.3px}
header h1.logo-h1{display:flex;align-items:center;line-height:0}
/* 21 août (suite) : le SVG a un fond menthe plein à coins carrés jusqu'au bord (aucune
   variante à fond transparent dans le dépôt) -- sur le bandeau blanc, ce rectangle
   flottait comme un autocollant. Coins arrondis (overflow:hidden) pour lire comme un
   badge intentionnel plutôt qu'un recadrage brut ; 10px reste bien en deçà de la marge
   réelle du contenu dans le SVG (~16-17px), donc aucun risque de rogner le logo. */
header .logo{height:50px;width:auto;display:block;border-radius:var(--radius-md);overflow:hidden}
header .badge{background:var(--mint);color:var(--forest);font-size:var(--fs-sm);font-weight:700;padding:3px 9px;border-radius:var(--radius-pill)}
/* Bordure neutre + survol forêt (21 août) : le bordé menthe/blanc-au-survol de l'ancienne
   version supposait un bandeau foncé pour ressortir -- même bordure et même survol que
   n'importe quel <select> ordinaire de l'app maintenant que le bandeau est clair. */
header .portail-sel{background-color:#fff;color:var(--forest);border:1px solid #c7d2cc;border-radius:var(--radius-sm);
  padding:6px 30px 6px 11px;font-size:var(--fs-lg);font-weight:700;cursor:pointer;min-width:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A463C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:13px}
header .portail-sel:hover{border-color:var(--forest)}
/* Grappe d'actions/compte, alignée à droite du bandeau (12 juillet, retour Patrick :
   la déconnexion se retrouvait « n'importe où » — elle héritait juste de la position DOM
   de #user-sel, au milieu du bandeau. Un seul conteneur avec margin-left:auto pousse
   +Créer, l'identité/déconnexion ET le statut de connexion ensemble à droite, dans cet
   ordre, plutôt que de compter sur .db{margin-left:auto} seul comme avant. */
header .header-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Bouton « Créer » flottant (12 juillet, retour Patrick : « quelque chose de flottant en
   bas à gauche, évident, mais qui se fond bien dans le design ») -- même vert forêt que
   .btn (l'action primaire déjà établie ailleurs dans l'app), pas le mint du bandeau
   (mint sur le fond gris clair du canevas principal aurait eu un contraste faible ;
   forêt reprend le langage « action principale » déjà en place). Panneau ancré vers le
   HAUT (bottom:100%) puisque le bouton est maintenant en bas de l'écran, pas en haut. */
.creer-wrap{position:fixed;left:24px;bottom:24px;z-index:150}
.creer-btn{background:var(--forest);color:#fff;border:none;border-radius:30px;padding:14px 22px 14px 20px;
  font-size:var(--fs-xl);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 18px rgba(10,70,60,.35);transition:box-shadow .15s,transform .15s}
.creer-btn:hover{box-shadow:0 8px 24px rgba(10,70,60,.45);transform:translateY(-1px)}
.creer-btn:active{transform:translateY(0)}
.creer-panel{position:absolute;bottom:calc(100% + 12px);left:0;background:#fff;color:#1c2421;border-radius:var(--radius-md);
  box-shadow:0 10px 32px rgba(0,0,0,.24);padding:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:18px;z-index:200;min-width:360px}
.creer-panel h4{margin:0 0 6px;font-size:var(--fs-sm);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7a8a83}
.creer-panel a{display:block;padding:5px 6px;border-radius:6px;color:#1c2421;text-decoration:none;font-size:13.5px;cursor:pointer}
.creer-panel a:hover{background:var(--taupe,#E1E1D2)}
nav{display:flex;gap:2px;background:#fff;border-bottom:1px solid #dde5e0;padding:0 14px}
nav button{background:none;border:none;padding:13px 18px;font-size:var(--fs-xl);cursor:pointer;color:#5a6b64;border-bottom:3px solid transparent;font-weight:600}
nav button.active{color:var(--forest);border-bottom-color:var(--forest)}
main{padding:22px 30px}
/* Icônes SVG au trait (image de marque) : héritent la couleur du contexte (currentColor) */
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.ic-sm{width:14px;height:14px;stroke-width:2;vertical-align:-2px}
.ic-h{width:18px;height:18px;vertical-align:-3px;margin-right:3px}
.ic-btn{width:15px;height:15px;vertical-align:-2px;margin-right:1px}
.dot-reel{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--grn);vertical-align:1px}
/* Coquille à 2 niveaux : rail de modules (gauche) + panneau du module (onglets + contenu) */
.shell{display:flex;align-items:stretch;min-height:calc(100vh - 66px)}
/* 29 juillet, demandé par Patrick : « quand je descends dans une page je veux que le rail
   à gauche demeure (comme figer une colonne dans Excel) ». position:sticky plutôt que fixed :
   le rail reste dans le flux (donc garde sa largeur et pousse le contenu normalement), il se
   contente de ne plus défiler une fois collé sous l'en-tête. `align-self:flex-start` est
   indispensable -- sans lui, .shell{align-items:stretch} étire le rail sur toute la hauteur
   et sticky n'a plus rien à coller. Le rail défile lui-même si la liste des modules dépasse
   l'écran (overflow-y), pour ne jamais rendre les derniers modules inatteignables. */
/* 30 juillet : le rail se colle désormais SOUS l'en-tête (lui-même collant) plutôt qu'en
   haut de la fenêtre -- sinon ses premiers modules passeraient derrière le bandeau.
   --haut-entete est publiée par _majHauteurEntete() (app.js) et suivie au redimensionnement :
   l'en-tête change de hauteur selon la largeur (flex-wrap), une valeur codée en dur
   laisserait un décalage. */
.rail{flex:0 0 190px;background:#fff;border-right:1px solid #dde5e0;padding:12px 10px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:var(--haut-entete,66px);align-self:flex-start;
  max-height:calc(100vh - var(--haut-entete,66px));overflow-y:auto}
.rail-btn{display:flex;align-items:center;gap:10px;background:none;border:none;border-radius:9px;padding:11px 12px;font-size:13.5px;font-weight:600;color:#5a6b64;cursor:pointer;text-align:left;position:relative}
.rail-btn:hover{background:#f0f4f2}
.rail-btn.active{background:var(--mint);color:var(--forest)}
.rail-btn .rail-ic{display:inline-flex;line-height:0}
.rail-btn .rail-ic .ic{width:19px;height:19px;vertical-align:middle}
.rail-btn.bientot{opacity:.45;cursor:default}
.rail-btn .rail-soon{position:absolute;right:8px;font-size:var(--fs-2xs);font-weight:700;color:#8a9a92;text-transform:uppercase}
.module-pane{flex:1;min-width:0;display:flex;flex-direction:column}
/* Navigation principale (groupes) */
.tabs{display:flex;gap:1px;background:#fff;border-bottom:2px solid #dde5e0;padding:0 14px;flex-wrap:wrap;align-items:stretch}
.tabs button{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 14px;font-size:.85rem;font-weight:600;color:#5a6b64;cursor:pointer;white-space:nowrap;transition:color .15s}
.tabs button:hover{color:var(--forest);background:#f4f7f5}
.tabs button.active{border-bottom-color:var(--forest);color:var(--forest)}
/* Sous-onglets (items du groupe actif) */
.subtabs{display:flex;gap:1px;background:#f7faf8;border-bottom:1px solid #dde5e0;padding:0 20px;flex-wrap:wrap}
.subtabs button{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:6px 11px;font-size:.8rem;font-weight:500;color:#7a8a83;cursor:pointer;white-space:nowrap;transition:color .12s}
.subtabs button:hover{color:var(--forest);background:#edf2ee}
.subtabs button.active{border-bottom-color:var(--forest);color:var(--forest);font-weight:700}
/* Tableau de bord */
.dash-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dash-kpi{flex:1;min-width:150px;background:var(--ciel);border:1px solid #cfe9f0;border-radius:9px;padding:12px 14px}
.dash-l{font-size:var(--fs-sm);color:#5a6b64;text-transform:uppercase;font-weight:700}
.dash-v{font-size:20px;font-weight:800;color:var(--forest);margin-top:3px}
.dash-sub{font-size:var(--fs-sm);color:#7a8a83;margin-top:2px}
.dash-alertes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.dash-alertes li{padding:9px 12px;border-radius:var(--radius-sm);font-size:var(--fs-lg);display:flex;align-items:center;gap:10px;justify-content:space-between}
/* Grille de widgets personnalisables (24 juillet) : deux colonnes par défaut, un widget
   "demi" occupe une colonne, un widget "pleine" s'étend sur les deux. */
.dash-perso-bar{display:flex;justify-content:flex-end;margin:10px 0}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dash-grid>.dash-item{min-width:0}
.dash-grid>.dash-item[data-largeur="pleine"]{grid-column:1 / -1}
.dash-grid>.dash-item>.card{height:100%;margin-bottom:0}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}.dash-grid>.dash-item[data-largeur="demi"]{grid-column:auto}}
/* 18 août, affichage progressif du tableau de bord : squelette sobre (le titre du widget
   est déjà connu sans réseau, seul le contenu attend) -- pas d'animation shimmer, juste
   un peu de retenue visuelle le temps que la carte se peuple. */
.dash-skel{opacity:.6}
.dash-skel h2{color:#7a8a83}
.dash-perso-panel table td, .dash-perso-panel table th{padding:6px 10px}
.al-red{background:#fdece9;color:var(--red);font-weight:600}
.al-warn{background:#fff6e5;color:#9a6a00;font-weight:600}
.al-info{background:var(--ciel);color:#1c6b86}
.card{background:#fff;border:1px solid #d6ded9;border-radius:var(--radius-md);padding:18px 20px;margin-bottom:18px;box-shadow:0 1px 4px rgba(20,40,30,.07)}
/* Variante « carte à surveiller » — même gabarit que .card, juste un accent + fond teinté
   (remplace les styles inline ad hoc du même usage, ex. horaire de garde à confirmer). */
.card-attention{border-color:#f0d68a;border-left:4px solid #dba300;background:#fffbf0}
h2{font-size:15px;color:var(--forest);margin:0 0 4px}
.sub{color:#7a8a83;font-size:12.5px;margin:0 0 14px}
/* Menus déroulants (12 juillet, retour Patrick : « améliore ces menus ») — flèche
   personnalisée (l'apparence système par défaut ne s'accorde à aucune marque) + anneau
   de focus cohérent avec les champs texte (.rh-section .champ input, .immo-form input),
   qui n'existait pour aucun <select> jusqu'ici. */
select{padding:8px 32px 8px 12px;border:1px solid #c7d2cc;border-radius:7px;font-size:var(--fs-xl);
  min-width:240px;background-color:#fff;color:#1c2421;font-family:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;
  transition:border-color .15s,box-shadow .15s}
select:hover{border-color:#a8b8b0}
select:focus{outline:none;border-color:var(--forest);box-shadow:var(--shadow-ring-forest)}
select:disabled{background-color:#f2f4f3;color:#9aa8a2;cursor:not-allowed}
select::-ms-expand{display:none}
/* Zones de texte brutes (11 août, retour Patrick : « on dirait de la dactylo » — Stratégie/
   EOS notamment, des <textarea> posés sans wrapper .champ n'avaient AUCUN style, donc la
   police et la bordure par défaut du navigateur). Même traitement que select ci-dessus.
   .champ textarea (règle plus spécifique, ci-dessus) continue de gagner où elle s'applique. */
textarea{border:1px solid #c7d2cc;border-radius:7px;padding:8px 10px;font-size:13.5px;
  font-family:inherit;color:#1c2421;background-color:#fff;resize:vertical;
  transition:border-color .15s,box-shadow .15s}
textarea:hover{border-color:#a8b8b0}
textarea:focus{outline:none;border-color:var(--forest);box-shadow:var(--shadow-ring-forest)}
textarea:disabled{background-color:#f2f4f3;color:#9aa8a2;cursor:not-allowed}
table{border-collapse:collapse;width:100%;font-size:var(--fs-lg)}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid #e2e8e4}
th:first-child,td:first-child{text-align:left}
/* 21 août (suite) : le bloc vert forêt plein sur CHAQUE tableau de l'app (des dizaines
   d'écrans) contredit le fond clair déjà adopté pour le bandeau du haut -- Patrick :
   « ça manque de finition et de professionnalisme » en voyant deux styles d'en-tête sur
   le même tableau de bord. Harmonisé sur le style déjà validé du widget d'alerte
   (.dash-table thead th, ligne ~407), le seul endroit qui avait ce traitement clair
   avant aujourd'hui -- pas un nouveau patron inventé. */
thead th{background:#f5f8f5;color:#5a6b64;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid #e0e8e0}
.sec{background:var(--mint);font-weight:700;color:var(--forest)}
.tot{background:#f0f5f1;font-weight:700}
.dash-clic{cursor:pointer}
.lien-entite{color:var(--forest);font-weight:600;text-decoration:none;border-bottom:1px dashed #b7c9c1}
.lien-entite:hover{border-bottom-color:var(--forest);color:#0d5a4c}
.dash-clic:hover td{background:#eef4f0}
.gh-probleme td{background:#fdeceb}
.gh-attention td{background:#fdf6e3}
@keyframes surligne-flash{0%,100%{background:transparent}20%,60%{background:#fff3b0}}
.surligne td{animation:surligne-flash 2.5s ease}
.vlo-t{font-size:var(--fs-md)} .vlo-t th,.vlo-t td{padding:5px 6px}
.vlo-t select{min-width:0;width:104px;padding:4px 6px;font-size:var(--fs-md)}
.vlo-t input.amt{width:84px}
.soustot{background:#f0f5f1;font-weight:700;color:#3a4a44}

/* Postes du budget pilotés automatiquement (source unique ailleurs) → lecture seule ici */
.src-auto{display:inline-block;background:#eef2f0;color:#5a6b64;font-size:var(--fs-xs);font-weight:700;
  padding:2px 8px;border-radius:var(--radius-pill);margin-left:7px;letter-spacing:.2px;white-space:nowrap}
.src-auto:hover{background:var(--ciel);color:#1c6b86;text-decoration:underline}
tr.ligne-auto{background:#fafbfa} tr.ligne-auto>td:first-child span:first-child{color:#5a6b64}

/* Tableau des dettes — présentation soignée (rayures, alignements, champs discrets) */
.det-t{font-size:12.5px;border:1px solid #e3e9e5;border-radius:9px;overflow:hidden}
.det-t th,.det-t td{padding:8px 11px;border-bottom:1px solid #eef2f0;vertical-align:middle}
.det-t thead th{white-space:nowrap}
.det-t th.num,.det-t td.num{text-align:right;font-variant-numeric:tabular-nums}
.det-t tbody tr:nth-child(even):not(.tot):not(.sec){background:#fafcfb}
.det-t tbody tr:hover:not(.tot):not(.sec){background:var(--ciel)}
.det-t tbody tr:last-child td{border-bottom:none}
.det-t .tot{background:#eef4f0;color:#2a3a34}
.det-t input,.det-t select{font-size:12.5px}
.det-t input.det,.det-t input.amt{border:1px solid transparent;background:transparent;border-radius:5px;
  padding:4px 6px;font-weight:600;color:#0046b8}
.det-t input.det:hover,.det-t input.amt:hover{border-color:#c7d2cc;background:#fbfdfc}
.det-t input.det:focus,.det-t input.amt:focus{border-color:var(--forest);background:#fff;outline:none}
.det-t input[type=date].det{color:#3a4a44;font-weight:500}
.det-t select.det{border:1px solid transparent;background:transparent;color:#3a4a44;font-weight:500}
.det-t select.det:hover{border-color:#c7d2cc;background:#fbfdfc}
/* En-têtes groupés du tableau des dettes (Conditions / Aujourd'hui / Fin du terme) */
.det-grp thead th.grp{text-align:center;border-bottom:1px solid rgba(255,255,255,.25);font-size:10.5px;opacity:.92}
/* color:#fff explicite (21 août) : ces 2 cellules restent volontairement des blocs
   foncés (sous-groupes de colonnes) même après l'allègement du thead th global --
   sans ça le texte hériterait le gris foncé du nouveau défaut, illisible ici. */
.det-grp thead th.grp-now{background:#0d5045;color:#fff} .det-grp thead th.grp-fin{background:#123f5a;color:#fff}
.det-grp td.grp-now{background:rgba(220,245,250,.35)} .det-grp td.grp-fin{background:rgba(220,250,210,.30)}
.det-grp tbody tr:hover td.grp-now{background:rgba(220,245,250,.6)} .det-grp tbody tr:hover td.grp-fin{background:rgba(220,250,210,.55)}
.grand{background:var(--mint);font-weight:800;color:var(--forest)}
.neg{color:var(--red)} .pos{color:var(--grn)}
input.amt{width:92px;text-align:right;border:1px solid transparent;border-radius:5px;padding:4px 6px;font-size:var(--fs-lg);background:#fbfdfc;color:#0046b8;font-weight:600}
input.amt:hover{border-color:#c7d2cc} input.amt:focus{border-color:var(--forest);outline:none;background:#fff}
input.amt.saving{background:#fff7e0}
input.amt:disabled{background:#eef2f0;color:#9aa8a2;cursor:not-allowed;font-weight:400}
input.cal-montant{width:100px;text-align:right;border:1px solid transparent;border-radius:5px;padding:4px 6px;font-size:var(--fs-lg);background:#fbfdfc;color:#0046b8;font-weight:600}
input.cal-montant.neg{color:var(--red)}
input.cal-jour{width:48px;text-align:center;border:1px solid #c7d2cc;border-radius:5px;padding:4px;font-size:var(--fs-lg);font-weight:600;color:var(--forest)}
input.cal-montant:hover,input.cal-jour:hover{border-color:var(--forest)}
input.cal-montant:focus,input.cal-jour:focus{border-color:var(--forest);outline:none;background:#fff}
input.cal-montant.saving,input.cal-jour.saving{background:#fff7e0}
input.cal-montant:disabled,input.cal-jour:disabled{background:#eef2f0;color:#9aa8a2;cursor:not-allowed;font-weight:400}
.fc-inp{border:1px solid #c7d2cc;border-radius:5px;padding:3px 5px;font-size:12.5px;background:#fbfdfc;color:#0046b8;font-weight:600}
.fc-inp:focus{border-color:var(--forest);outline:none;background:#fff}
.fc-mini{width:64px;text-align:right}
select.fc-inp{color:#1c2421;font-weight:500;min-width:auto;max-width:170px}
.badge-reel{font-size:var(--fs-sm);white-space:nowrap}
/* Table des facilités de crédit */
table.fac{font-size:12.5px}
table.fac th,table.fac td{padding:6px 8px;vertical-align:middle}
table.fac tr.fac-alerte{background:#fff5f3}
.badge-marge,.badge-carte{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.badge-marge{background:var(--ciel);color:#1565a8}
.badge-carte{background:#f3e8ff;color:#7b3fb0}
input.fc-nom{min-width:150px;width:100%}
input.fc-taux{width:48px;text-align:right}
.pwrap{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;color:#6b7a75}
.util{min-width:120px}
.usebar{display:inline-block;width:84px;height:8px;background:#e8edea;border-radius:5px;overflow:hidden;vertical-align:middle}
.usebar-fill{display:block;height:100%;border-radius:5px}
.usebar-fill.u-bas{background:var(--grn)}
.usebar-fill.u-moyen{background:#e0a200}
.usebar-fill.u-haut{background:var(--red)}
.usepct{font-size:10.5px;color:#6b7a75;margin-left:6px}
input.mg-inp{width:96px;text-align:right;border:1px solid transparent;border-radius:5px;padding:4px 6px;font-size:var(--fs-lg);background:#fbfdfc;color:#0046b8;font-weight:600}
input.mg-taux{width:64px}
input.mg-inp:hover{border-color:#c7d2cc} input.mg-inp:focus{border-color:var(--forest);outline:none;background:#fff}
.alerte{background:#fdece9;color:var(--red);font-weight:700;font-size:var(--fs-sm);padding:3px 9px;border-radius:var(--radius-pill)}
.ok{color:var(--grn);font-weight:700;font-size:var(--fs-md)}
input.tp-inp{width:88px;text-align:right;border:1px solid transparent;border-radius:5px;padding:4px 6px;font-size:var(--fs-lg);background:#fbfdfc;color:#0046b8;font-weight:600}
input.tp-inp:hover{border-color:#c7d2cc} input.tp-inp:focus{border-color:var(--forest);outline:none;background:#fff}
td.sous-tampon{background:#fdece9;color:var(--red);font-weight:700}
button.lock{border:none;background:none;cursor:pointer;font-size:var(--fs-md);padding:0 3px;vertical-align:middle}
button.lock:hover{filter:brightness(1.2)}
.barre{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.barre label{font-size:var(--fs-lg);color:#5a6b64;font-weight:600;display:flex;gap:6px;align-items:center}
.barre select{min-width:auto}
.btn-sec{background:#fff;color:var(--forest);border:1px solid var(--forest);padding:7px 13px;border-radius:7px;font-size:12.5px;cursor:pointer;font-weight:600}
.btn-sec:hover{background:var(--mint)}
.etat-verr{font-size:var(--fs-md);color:var(--red);font-weight:700;background:#fdece9;padding:4px 10px;border-radius:var(--radius-pill)}
.cmp{border-left:4px solid var(--forest)}
.cmp-t{margin-top:6px}
.cmp-t th,.cmp-t td{text-align:right}
.cmp-t th:first-child,.cmp-t td:first-child{text-align:left}
.cmp-sec{font-size:10.5px;color:#7a8a83;text-transform:uppercase;font-weight:700;margin-left:6px}
.kpi{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.kpi .b{flex:1;min-width:150px;background:var(--ciel);border-radius:9px;padding:12px 14px;border:1px solid #cfe9f0}
.kpi .b .l{font-size:var(--fs-sm);color:#5a6b64;text-transform:uppercase;font-weight:700}
.kpi .b .v{font-size:20px;font-weight:800;color:var(--forest);margin-top:3px}
.mat-wrap{overflow-x:auto}
.mat th{font-size:11.5px;white-space:nowrap}
.mat td.hit{background:#fdece9;color:var(--red);font-weight:700}
.mat td.zero{color:#cfd8d3}
.cal-ajout{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid #e6ece9}
.cal-ajout input,.cal-ajout select{border:1px solid #c7d2cc;border-radius:6px;padding:6px 8px;font-size:var(--fs-lg)}
.legend{font-size:var(--fs-md);color:#5a6b64;margin-top:12px;line-height:1.7}
button.del{border:none;background:none;color:var(--red);cursor:pointer;font-size:var(--fs-sm);opacity:.35;padding:0 5px;border-radius:4px}
button.del:hover{opacity:1;background:#fdece9}
.btn{background:var(--forest);color:#fff;border:none;padding:7px 13px;border-radius:7px;font-size:12.5px;cursor:pointer;font-weight:600}
.btn:hover{background:#0d5a4c}
.btn:disabled{background:#b8c6c0;cursor:not-allowed}
/* .btn-pri (21 août, vague 6) : posé sur des dizaines de boutons dans app.js depuis des
   semaines (class="btn btn-pri") sans jamais avoir été défini ici -- visuellement
   identique à .btn tout ce temps. C'est LE bouton d'action la plus probable d'un écran
   qui en a plusieurs (ex. "Sauvegarder" à côté d'un "Annuler" en .btn-sec) : doit ressortir
   sans ambiguïté, jamais deviné. Réutilise les jetons ombre/rayon déjà posés le 18 août
   plutôt que d'inventer de nouvelles valeurs.*/
.btn-pri{box-shadow:var(--shadow-ring-forest),0 2px 6px rgba(10,70,60,.28);font-size:13.5px;padding:8px 16px}
.btn-pri:hover{box-shadow:var(--shadow-ring-forest),0 3px 10px rgba(10,70,60,.36)}
/* Taille compacte pour .btn/.btn-sec (ex. puces de filtre) -- même trou que .btn-pri :
   déjà posé dans app.js (class="btn-sec btn-xs" etc.), jamais stylé. */
.btn-xs{padding:4px 9px;font-size:11px;border-radius:6px}
/* Module Fournisseurs */
.fourn-form{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.fourn-form label{font-size:12.5px;color:#5a6b64;font-weight:600;display:flex;gap:6px;align-items:center}
.fourn-lignes-t{margin:8px 0}
.fourn-lignes-t select.fl-compte{min-width:200px}
.fourn-lignes-t select.fl-taxe{min-width:90px}
.fourn-lignes-t input.fl-montant{width:110px}
.fourn-totaux{margin:10px 0;padding:8px 12px;background:var(--mint);border-radius:var(--radius-sm);font-size:13.5px}
.fourn-grand{font-size:15px;font-weight:800;color:var(--forest)}
.fourn-actions{display:flex;gap:10px;margin-top:8px}
.fourn-payrow td{background:var(--ciel)}
.f-pay-compte{min-width:180px}
.btn-mini{background:#fff;color:var(--forest);border:1px solid var(--forest);padding:3px 9px;border-radius:6px;font-size:11.5px;cursor:pointer;font-weight:600}
.btn-mini:hover{background:var(--mint)}
.btn-mini.active{background:var(--forest);color:#fff;border-color:var(--forest)}
/* Action destructrice (21 août, vague 6) : avant, .btn-mini.neg/.btn-sec.neg ne changeaient
   que la couleur du TEXTE (.neg, utilitaire générique réutilisé tel quel comme "variante"
   de bouton) -- une "Supprimer" avait donc la même bordure/fond neutre qu'une action sans
   conséquence. Fond/bordure teintés rouge pâle, même palette que .etat-verr/.badge2.st-annul
   déjà utilisée ailleurs pour signaler un état négatif -- cohérent, pas une nouvelle couleur. */
.btn-mini.neg,.btn-sec.neg{background:#fdece9;border-color:#f0b8ae;color:var(--red)}
.btn-mini.neg:hover,.btn-sec.neg:hover{background:#f8d5cd;border-color:var(--red)}
.badge2{font-size:var(--fs-sm);font-weight:700;padding:2px 9px;border-radius:var(--radius-pill);text-transform:capitalize}
.badge2.st-brouillon{background:#eef1f0;color:#6b7a75}
.badge2.st-compt{background:var(--ciel);color:#1c6b86}
.badge2.st-payee{background:var(--mint);color:var(--forest)}
.badge2.st-annul{background:#fdece9;color:var(--red)}

/* .ibadge (24 juillet) -- utilisée depuis longtemps un peu partout (immo, société, RH,
   dossiers standards...) mais JAMAIS stylée : rendu en texte brut sans pastille depuis le
   début. Même patron que .badge2/.badge-marge/.badge-carte ci-dessus -- corrige d'un coup
   toutes les pastilles de statut existantes, pas seulement les nouvelles. */
.ibadge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);
  white-space:nowrap;text-transform:capitalize}
.ibadge.iok{background:var(--mint);color:var(--forest)}
.ibadge.iwarn{background:#fff4e0;color:#a15c00}
.ibadge.ibad{background:#fdece9;color:var(--red)}
.ibadge.ineu{background:#eef1f0;color:#6b7a75}
.ibadge.iinfo{background:var(--ciel);color:#1565a8}
.cc-atelier{border-left:4px solid var(--forest)}
.cc-badge{display:inline-block;background:var(--mint);color:var(--forest);font-size:var(--fs-xs);font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);margin-right:6px;text-transform:uppercase;letter-spacing:.3px}
.cc-appris{display:inline-block;color:#1c6b86;background:var(--ciel);font-size:var(--fs-sm);font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);margin-left:6px}
.cc-regle{display:inline-block;color:#0A463C;background:#DCFAD2;font-size:var(--fs-sm);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);margin-left:6px;letter-spacing:.02em}
.cc-hypo-badge{display:inline-block;color:#5a2800;background:#FFF0E8;border:1px solid #d8956a;font-size:var(--fs-sm);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);letter-spacing:.02em}
.cc-memo-label{font-size:var(--fs-sm);color:#888;margin-left:6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}

/* ── Tableau alertes liquidité ─────────────────────────────────────────────── */
.liq-alerte-card{padding:16px 20px}
.liq-titre-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}
.liq-banner{padding:9px 14px;border-radius:7px;font-size:var(--fs-lg);font-weight:600;margin-bottom:14px}
.liq-banner-alerte{background:#fdecea;border:1.5px solid #e74c3c;color:#922b21}
.liq-banner-attention{background:#fef9e7;border:1.5px solid #f0a500;color:#7d6608}
.liq-banner-ok{background:#eafaf1;border:1.5px solid #27ae60;color:#1e8449}
.liq-table{width:100%;border-collapse:collapse;font-size:var(--fs-lg)}
.liq-table thead tr{border-bottom:2px solid #d8e8d8}
.liq-table th{padding:6px 10px;text-align:left;font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#7a8a83;white-space:nowrap}
.liq-table td{padding:8px 10px;border-bottom:1px solid #f0f0f0;vertical-align:top}
.liq-table tbody tr:last-child td{border-bottom:none}
.liq-table tbody tr:hover{background:#f9faf9}
.liq-alerte td{background:#fff5f5}
.liq-attention td{background:#fffdf0}
.liq-ok td{background:#f6fef8}
.liq-inconnu td{background:#fafafa;color:#aaa}
.liq-badge{display:inline-block;font-size:var(--fs-sm);font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.liq-alerte .liq-badge{background:#fdecea;color:#c0392b}
.liq-attention .liq-badge{background:#fef9e7;color:#8a6a00}
.liq-ok .liq-badge{background:#eafaf1;color:#1e8449}
.liq-inconnu .liq-badge{background:#f0f0f0;color:#888}
/* Même palette que ci-dessus, en classe composée (pas descendante) : le tableau de
   bord (dashLigneHTML) met liq-alerte/liq-ok DIRECTEMENT sur le span .liq-badge, pas
   sur un ancêtre -- trouvé le 21 août en cherchant pourquoi le badge du tableau de
   bord ne prenait jamais de couleur (juste un émoji + texte noir, contrairement à ce
   patron pourtant déjà défini). */
.liq-badge.liq-alerte{background:#fdecea;color:#c0392b}
.liq-badge.liq-ok{background:#eafaf1;color:#1e8449}
.liq-code{font-weight:700;color:var(--forest);white-space:nowrap}
.liq-solde-td,.liq-tampon-td,.liq-prevu-td,.liq-paie-td{text-align:right}
.liq-date{display:block;font-size:var(--fs-xs);color:#aaa;margin-top:2px}
.liq-nd{color:#ccc}
.liq-warn{color:#a05000;font-weight:700}
.liq-inject{display:block;font-size:var(--fs-sm);color:#c0392b;font-weight:700;margin-top:3px}
.liq-nb{display:inline-block;background:#f0e0ff;color:#6b3fa0;font-size:var(--fs-xs);font-weight:700;padding:1px 6px;border-radius:var(--radius-md);margin-right:4px}
.liq-det{margin-top:4px}
.liq-det-row{display:flex;justify-content:space-between;gap:6px;font-size:var(--fs-sm);color:#666;padding:1px 0;border-top:1px dotted #eee;margin-top:2px}
.liq-det-date{color:#aaa;white-space:nowrap;flex-shrink:0}
.liq-det-lib{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liq-det-amt{font-weight:600;color:var(--forest);white-space:nowrap;flex-shrink:0}
.liq-tampon-td{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.liq-tampon-val{font-variant-numeric:tabular-nums}
.liq-tampon-edit{background:none;border:none;cursor:pointer;color:#aaa;font-size:var(--fs-md);padding:0 2px;line-height:1}
.liq-tampon-edit:hover{color:var(--forest)}
.liq-note{margin-top:10px;margin-bottom:0;font-size:var(--fs-sm)}

/* ── DASHBOARD ACCUEIL ───────────────────────────────────────────────────── */
.dash-header-card{padding:12px 18px}
.dash-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dash-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dash-filters select{font-size:12.5px;padding:5px 8px;border:1px solid #c7d2cc;border-radius:6px;background:#fff}
.dash-filters #dash-sel-portail{min-width:130px}
.dash-filters #dash-sel-soc{min-width:170px}
.dash-filters #dash-sel-periode{min-width:160px}
.dash-banner{padding:8px 14px;border-radius:7px;font-size:var(--fs-lg);line-height:1.4}
.dash-banner-alerte{background:#fff0f0;border:1.5px solid #e05050;color:#8b0000}
.dash-banner-attention{background:#fffbf0;border:1.5px solid #e0a020;color:#6b4400}
.dash-banner-ok{background:#f0faf2;border:1.5px solid #4caf78;color:#175c30}
.dash-banner-meta{color:#999;font-size:var(--fs-sm)}

/* Table principale */
.dash-table{width:100%;border-collapse:collapse;font-size:var(--fs-lg)}
.dash-table thead th{background:#f5f8f5;padding:8px 10px;text-align:left;font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#6a7a6a;border-bottom:2px solid #e0e8e0;white-space:nowrap}
.dash-table th.dash-num,.dash-table td.dash-num{text-align:right}
.dash-tr{border-bottom:1px solid #eef2ee}
.dash-tr td{padding:9px 10px;vertical-align:middle}
.dtr-alerte{border-left:3px solid #e05050;background:#fffafa}
.dtr-attention{border-left:3px solid #e0a020;background:#fffdf5}
.dtr-ok{border-left:3px solid #4caf78}
.dtr-inconnu{border-left:3px solid #c0c8c4}
.dash-td-sub{font-size:10.5px;color:#9aaa9a;display:block}
.dash-nd{color:#c0c8c4;font-weight:400}
.dash-val-warn{color:#c07000}

.dash-portail-tag{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 5px;border-radius:4px}
.dash-portail-fonds{background:#dcf5fa;color:#0a6080}
.dash-portail-groupe{background:#dcfad2;color:#0a4630}
.dash-tampon-val{font-variant-numeric:tabular-nums}
.dash-inject-badge{background:#fff0f0;border:1.5px solid #e05050;color:#8b0000;border-radius:5px;padding:2px 7px;font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.dash-paie-toggle{background:none;border:none;cursor:pointer;color:var(--forest,#0A463C);font-weight:700;font-size:var(--fs-lg);font-variant-numeric:tabular-nums;padding:0;text-decoration:underline dotted}
.dash-paie-nb{display:inline-block;background:#e8f5ee;color:var(--forest,#0A463C);border-radius:var(--radius-md);font-size:var(--fs-xs);padding:1px 5px;margin-left:3px;font-weight:700}
.btn-link{background:none;border:none;cursor:pointer;padding:0}

/* Ligne de détail paiements */
.dash-detail-row td{padding:0}
.dash-detail-paies{padding:8px 12px 10px 52px;display:flex;flex-direction:column;gap:3px;background:#fafcfa}
.dash-paie-row{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-md);color:#4a5a50}
.dash-paie-date{font-size:10.5px;color:#9aaa9a;white-space:nowrap;min-width:72px}
.dash-paie-lib{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-paie-amt{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--forest,#0A463C)}
.dash-paie-passe{opacity:.45}
.dash-paie-passe .dash-paie-amt{color:#8a9a90}

.cc-memo-label input{margin:0}
.docs-drop{border:2px dashed #c7d2cc;border-radius:var(--radius-md);padding:22px;text-align:center;color:#7a8a83;font-size:var(--fs-xl);background:#fbfdfc}
.docs-drop.over{border-color:var(--forest);background:var(--menthe,#DCFAD2)}
.docs-pick{color:var(--forest);font-weight:700;cursor:pointer;text-decoration:underline}
.docs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.docs-item{border:1px solid #e3e9e5;border-radius:var(--radius-md);padding:12px 14px;margin-bottom:12px;background:#fff}
.docs-item.docs-dbl{border-color:#f0b8ae;background:#fffaf9}
.docs-regle{color:var(--forest);font-weight:800;margin-left:3px}
.docs-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.docs-head b{font-size:var(--fs-xl);color:var(--forest)}
.docs-conf{font-size:var(--fs-xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.3px;background:#f0f5f1}
.docs-conf.pos{background:var(--menthe,#DCFAD2);color:var(--forest)} .docs-conf.neg{background:#fdece9;color:var(--red)} .docs-conf.al-warn{background:#fff6e5;color:#9a6a00}
.docs-pdf{margin-left:auto;font-size:var(--fs-md);color:#1c6b86;font-weight:600}
.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.docs-grid label{display:flex;flex-direction:column;font-size:var(--fs-sm);color:#7a8a83;gap:3px}
.docs-grid select,.docs-grid input{min-width:0}

/* Formulaires de tiroir (drw-body) — utilisé par la plupart des « Nouveau X » / « Modifier X » */
/* align-items:start (21 août, demandé par Patrick) : empêche une grille d'étirer chaque
   case à la hauteur de la plus haute de sa rangée -- utile pour un item avec sa PROPRE
   boîte visible (bordure/fond, ex. l'ancien .bt-exception) qui se serait sinon étiré sans
   raison. N'A PAS suffi à corriger l'inconfort visuel sur "Unité"/"Assigné à" : un <label>
   simple (texte + input, sans boîte propre) n'a rien à étirer -- son contenu reste collé en
   haut qu'il soit stretch ou start, donc RIEN ne changeait à l'oeil. La vraie cause de la
   rangée trop haute, c'est .form-note (juste en dessous) qui hérite bêtement la taille du
   label (12px) et prend 2 lignes dans une colonne étroite -- corrigé en lui donnant sa
   propre taille, plus petite (comme un vrai texte d'aide devrait l'être). */
.immo-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px;align-items:start}
/* min-width:0 (21 août, la VRAIE cause du texte qui empiète sur la case voisine, capture
   d'écran de Patrick -- ni le raccourcissement des notes ni --fs-sm n'avaient réglé ça) :
   un item de grille (ce <label>) a par défaut min-width:auto, pas 0 -- il refuse de
   rétrécir sous la largeur de son contenu le plus large. Le texte d'un .form-note un peu
   long forçait donc CE label à dépasser sa colonne de ~180-200px plutôt que de renvoyer le
   texte à la ligne, débordant visuellement sur la case voisine (ex. "Titre"), dont la boîte
   à bordure se dessinait par-dessus. min-width:0 force le navigateur à respecter la largeur
   de colonne réelle -- le texte peut alors renvoyer à la ligne normalement, comme prévu. */
.immo-form label{display:flex;flex-direction:column;font-size:var(--fs-md);color:#5a6b64;gap:4px;font-weight:600;min-width:0}
/* .form-note (21 août) : 194 usages dans app.js, jamais eu de style propre -- héritait
   toujours la taille du texte parent (souvent 12-13px, la taille d'un LABEL), ce qui la
   faisait souvent passer sur 2 lignes dans une colonne étroite de .immo-form/.champ-duo et
   déséquilibrait la hauteur de toute la rangée (signalé par Patrick, capture d'écran, sur
   "Unité"/"Assigné à"). Un texte d'aide doit être plus petit que le label qu'il complète,
   pas de la même taille -- jetons déjà posés le 18 août (--fs-sm), jamais utilisés ici. */
.form-note{font-size:var(--fs-sm);color:#7a8a83}
/* 21 août -- LA vraie cause, trouvée en inspectant le DOM en direct dans le vrai
   navigateur (getBoundingClientRect) après 5 correctifs qui n'avaient réglé que des
   symptômes voisins (voir les commentaires ci-dessus, tous vrais mais insuffisants) :
   la règle globale `select{min-width:240px}` (ligne ~145, tout <select> de l'app) reste en
   vigueur ICI aussi -- .immo-form select (juste en dessous) ne redéfinit jamais min-width,
   et la cascade CSS s'applique propriété par propriété, pas règle par règle. Un <select>
   dans une colonne de grille de ~180-200px (ex. "Unité") était donc forcé à 240px, débordant
   sur la case voisine ("Titre") -- la ligne verticale que Patrick voyait traverser le texte
   de la note. min-width:0 ici laisse le select respecter sa vraie colonne. */
.immo-form select{min-width:0}
.immo-form input,.immo-form select,.immo-form textarea{font-size:var(--fs-lg);padding:7px 9px;border:1px solid #d7ded9;
  border-radius:7px;font-family:inherit;color:#1c2421}
.immo-form input:focus,.immo-form select:focus,.immo-form textarea:focus{outline:none;border-color:var(--forest)}
.immo-form textarea{resize:vertical}
.docs-actions{margin-top:10px}
.cc-import{margin-top:12px;padding:12px;background:var(--ciel);border-radius:9px}
.cc-import input[type=file]{margin-left:8px;font-size:12.5px}
.cc-map{margin-top:10px}
.cc-apercu{margin:8px 0;font-size:11.5px}
.cc-apercu th,.cc-apercu td{padding:3px 7px}
.tx-blocs{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 14px}
.tx-carte{flex:1;min-width:280px;background:var(--taupe);border-radius:var(--radius-md);padding:12px 16px}
.tx-carte h3{margin:0 0 6px}
.tx-carte table{width:100%}
.tx-net td{border-top:2px solid var(--forest);padding-top:6px}
.tx-total{display:flex;justify-content:space-between;align-items:center;background:var(--menthe);
  border-radius:var(--radius-md);padding:14px 18px;font-size:var(--fs-2xl)}
.tx-total b{font-family:Gellix,Manrope,sans-serif;font-size:24px;color:var(--forest)}
.tx-total.tx-remb{background:var(--ciel)}
/* Notes discrètes sur une cellule de prévision */
td.cell{position:relative}
.note-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;padding:0;border-radius:50%;
  border:1px solid var(--forest);background:transparent;opacity:0;cursor:pointer;z-index:3;
  transition:opacity .12s}
td.cell:hover .note-dot{opacity:.4}
.note-dot.has-note{opacity:1;background:var(--forest)}
.note-dot:hover{opacity:1}
.note-pop{position:absolute;z-index:60;width:244px;padding:10px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.note-ta{width:100%;box-sizing:border-box;font:inherit;resize:vertical;border:1px solid var(--taupe);border-radius:6px;padding:6px}
.note-actions{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
/* Perspective pluriannuelle */
.an-sec td{background:var(--menthe);font-weight:600}
.an-noi td,.an-flux td{border-top:2px solid var(--forest);font-weight:700}
.an-flux td{background:var(--ciel)}
.an-add{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Indicateur lecture seule (rôle sans droit d'écriture) */
body.ro::after{content:"Lecture seule";position:fixed;bottom:12px;right:14px;background:var(--taupe);
  color:var(--forest);padding:5px 12px;border-radius:var(--radius-sm);font-size:var(--fs-md);font-weight:600;
  z-index:90;box-shadow:0 3px 12px rgba(0,0,0,.15)}
/* Notification flottante (12 juillet, remplace la ligne de statut fixe du bandeau) */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);
  background:#1c2421;color:#fff;padding:10px 20px;border-radius:var(--radius-md);font-size:13.5px;
  font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;z-index:1200;max-width:min(90vw,420px);
  text-align:center}
.toast.toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.toast-err{background:#7a2620}

/* Dialogue de confirmation (18 août, remplace confirm() natif) -- z-index au-dessus des
   tiroirs (999-1000) et de .pol-img-ovl (2000), même hiérarchie de boutons que partout
   ailleurs dans l'app (.btn-sec/.btn), pas de bouton rouge dédié : le geste destructeur
   est déjà signalé par le texte et par le bouton qui a ouvert le dialogue. */
.confirm-ovl{position:fixed;inset:0;background:rgba(10,70,60,.35);z-index:2500;
  display:flex;align-items:center;justify-content:center;padding:20px}
.confirm-box{background:#fff;border-radius:var(--radius-md);box-shadow:0 12px 36px rgba(0,0,0,.25);
  padding:20px 22px;max-width:420px;width:100%}
.confirm-box p{margin:0;font-size:var(--fs-xl);line-height:1.5;color:#1c2421;white-space:normal}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* Connexion & compte (bandeau) */
/* Avatar rond + menu déroulant (12 juillet, remplace le texte+bouton en ligne qui
   pouvait atterrir n'importe où dans le bandeau -- voir header .header-right). Même
   langage que .rh-avatar (initiales sur fond menthe) pour rester cohérent avec le reste
   de l'app plutôt que d'inventer un nouveau style d'avatar. */
.acct-wrap{position:relative}
.acct-avatar{width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--forest);
  border:none;font-size:12.5px;font-weight:800;letter-spacing:.2px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:box-shadow .15s}
/* 21 août : l'anneau blanc-translucide se voyait sur le bandeau foncé, invisible sur
   fond blanc -- réutilise l'anneau forêt déjà défini comme token (même halo que les
   champs focus, --shadow-ring-forest). */
.acct-avatar:hover{box-shadow:var(--shadow-ring-forest)}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;color:#1c2421;
  border-radius:var(--radius-md);box-shadow:0 8px 28px rgba(0,0,0,.22);padding:14px;min-width:200px;z-index:200}
.acct-menu-nom{font-size:13.5px;font-weight:700;color:#1c2421}
.acct-menu-role{font-size:11.5px;color:#7a8a83;margin:2px 0 12px}
.acct-menu .btn-sec{width:100%;justify-content:center}

/* Cloche de notifications (12 juillet, demandé par Patrick) -- regroupe les mêmes
   signaux garde que le push (horaire à confirmer, échange reçu), pour un accès sans
   dépendre d'avoir reçu/cliqué la notification elle-même. Masquée par défaut, affichée
   seulement pour un compte relié à un employé (voir chargerClocheNotifications). */
/* display:flex ici est nécessaire pour #outils-perso-wrap (22 juillet, Tâches+Messages) :
   ce conteneur réutilise .cloche-wrap mais contient DEUX <button> -- sans flex, deux
   éléments block s'empilaient verticalement au lieu de se placer côte à côte. Un seul
   bouton (cas .cloche-btn de la cloche) n'est pas affecté par ce changement. */
.cloche-wrap{position:relative;display:flex;align-items:center;gap:2px}
/* 21 août : icône foncée + survol clair (au lieu de blanc + éclaircissement blanc), même
   raison que .portail-sel ci-dessus -- le bandeau n'est plus foncé. Même couleur que
   .rail-btn au repos (#5a6b64), même survol (#f0f4f2) pour rester cohérent avec le rail
   juste à côté. */
.cloche-btn{background:none;border:none;color:#5a6b64;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;transition:background .15s}
.cloche-btn:hover{background:#f0f4f2}
.cloche-badge{position:absolute;top:1px;right:1px;background:var(--red);color:#fff;
  font-size:var(--fs-xs);font-weight:800;min-width:16px;height:16px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  box-shadow:0 0 0 2px #fff;font-variant-numeric:tabular-nums}
.cloche-menu{min-width:280px;max-width:340px;max-height:60vh;overflow-y:auto}
/* Une ligne = un lien (va au bon écran) + un bouton « marquer lu » séparé (12 juillet,
   demandé par Patrick -- indépendant de l'action réelle, voir _clocheMarquerLu). */
.cloche-item{display:flex;align-items:flex-start;gap:2px;border-radius:6px}
.cloche-item:hover{background:var(--taupe,#E1E1D2)}
.cloche-item a{flex:1;display:flex;align-items:flex-start;gap:6px;padding:8px 4px 8px 6px;
  color:#1c2421;text-decoration:none;font-size:var(--fs-lg);cursor:pointer;line-height:1.4}
.cloche-item a .ic{color:var(--forest);margin-top:1px}
.cloche-lu{flex:none;background:none;border:none;color:#9aa8a2;cursor:pointer;
  padding:8px 6px 8px 2px;border-radius:6px;transition:color .12s}
.cloche-lu:hover{color:var(--forest)}
.login-overlay{position:fixed;inset:0;background:var(--forest);display:flex;align-items:center;
  justify-content:center;z-index:1000}
.login-card{width:340px;display:flex;flex-direction:column;gap:8px}
.login-card label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-lg);font-weight:600}
.login-card input{padding:8px;border:1px solid var(--taupe);border-radius:6px;font:inherit}
.login-card .btn{margin-top:4px}
.sched{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:var(--fs-sm);color:#6b7a75;white-space:nowrap;font-weight:400;vertical-align:middle}
.sched input[type=checkbox]{accent-color:var(--forest);cursor:pointer;opacity:.3;transition:opacity .12s}
.sched input[type=checkbox]:checked{opacity:1}
tr:hover .sched input[type=checkbox]{opacity:.85}
.cal-when{display:inline-flex;align-items:center;gap:2px}
.sched input[type=checkbox]:not(:checked) ~ .cal-when{display:none}   /* jour masqué tant que non coché */
.cal-day{width:38px;padding:1px 3px;border:1px solid #c7d2cc;border-radius:5px;font-size:var(--fs-sm);text-align:center}
.regl{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:var(--fs-sm);color:#6b7a75;font-weight:400;vertical-align:middle}
.regl-sel{font-size:var(--fs-sm);padding:2px 4px;border:1px solid #c7d2cc;border-radius:5px;min-width:auto;max-width:170px;color:#1c2421;background:#fff;font-weight:500}
.regl-jour{display:inline-flex;align-items:center;gap:2px}
.regl-ancrage{display:inline-flex;align-items:center;gap:4px}
.regl-ancrage input{font-size:var(--fs-sm);padding:1px 2px;border:1px solid #c7d2cc;border-radius:4px;color:#1c2421}
.regl-plan{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;cursor:pointer}
.regl-plan input{accent-color:var(--forest);cursor:pointer}
.avert{background:#fff8e6;border:1px solid #e8d48a;color:#7a5b00;padding:9px 12px;border-radius:7px;font-size:12.5px;margin:8px 0}
.tc-avis{margin-top:10px;padding:7px 12px;background:#fffbe6;border:1px solid #f5d87a;border-radius:var(--radius-sm);font-size:12.5px;color:#7a5a00}
.ent-badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.3px}
.ent-interne{background:var(--mint);color:var(--forest)}
.ent-externe{background:var(--ciel,#DCF5FA);color:#0a3a5c}
.btn-active{background:var(--forest)!important;color:#fff!important}
.tc-tab{background:#f4f7f5;color:var(--forest);border:1px solid #c7d2cc;padding:5px 14px;border-radius:var(--radius-pill);font-size:var(--fs-md);cursor:pointer;font-weight:600;transition:background .15s}
.tc-tab:hover{background:var(--mint)}
.tc-tab-on{background:var(--forest);color:#fff;border-color:var(--forest)}
.addposte{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-lg);padding-top:12px;border-top:1px dashed #dde5e0}
.addposte input{padding:6px 10px;border:1px solid #c7d2cc;border-radius:7px;font-size:var(--fs-lg);min-width:220px}
.addposte select{min-width:auto}
.log{font-size:11.5px;color:#6b7a75;max-height:160px;overflow:auto;margin-top:8px;border-top:1px dashed #dde5e0;padding-top:8px;line-height:1.7}
/* .bt-exception (le <details> "facturer à une autre société" du formulaire de bon de
   travail) retiré le 21 août, demandé par Patrick (« ça ne devrait pas arriver ») -- voir
   app.js::showBtForm. Règle plus jamais référencée. */
/* Les trois chemins d'une dépense (29 juillet) — même bloc sur les trois écrans, celui où
   l'on se trouve mis en évidence. Voir _cheminsDepenseHTML (app.js). */
.chemins-dep{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
@media (max-width:900px){.chemins-dep{grid-template-columns:1fr}}
.chemin-dep{border:1px solid #dde5e0;border-radius:9px;padding:9px 11px;background:#fbfcfb}
.chemin-dep-ici{border-color:var(--forest);background:var(--mint)}
.chemin-dep-titre{font-size:12.5px;font-weight:700;color:var(--forest);margin-bottom:3px}
.chemin-dep-quoi{font-size:11.5px;color:#5a6b64;line-height:1.45}
.chemin-dep-ou{font-size:var(--fs-sm);color:#7a8a83;margin-top:5px;font-style:italic}
.chemin-dep-ici .chemin-dep-ou{font-style:normal;font-weight:600;color:var(--forest)}
/* État des intégrations externes (Administratif) */
.cfg-ligne{padding:10px 0;border-top:1px solid #eef2f0}
.cfg-ligne:first-child{border-top:none}
.cfg-tete{display:flex;align-items:center;gap:8px;font-size:var(--fs-xl);color:var(--forest)}
.cfg-vars{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cfg-var{font-size:var(--fs-sm);padding:2px 8px;border-radius:var(--radius-pill);font-family:ui-monospace,monospace}
.cfg-ok{background:var(--mint);color:var(--forest)}
.cfg-manque{background:#fdecec;color:#8c2f2f;font-weight:600}
.cfg-opt{background:#f4f7f5;color:#6b7a75}
/* Traductions d'une procédure (état par langue + commandes) */
.pol-bloc{border:1px solid #dde5e0;border-radius:9px;padding:10px 12px;margin-top:12px}
.pol-trad-ligne{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #eef2f0;font-size:var(--fs-lg);flex-wrap:wrap}
.pol-trad-ligne:first-of-type{border-top:none}
.pol-trad-nom{font-weight:600;min-width:70px}
/* Langue dans le menu du compte (toujours accessible, même sans fiche employé) */
.acct-menu-langue{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:#6b7a75;margin:8px 0}
.acct-menu-langue select{padding:4px 8px;border:1px solid #c7d2cc;border-radius:7px;font-size:12.5px}
/* Choix de langue sur l'écran de connexion (avant de connaître le compte) */
.login-langues{display:flex;gap:6px;justify-content:center;margin-top:12px;padding-top:10px;border-top:1px dashed #dde5e0}
.lang-choix{background:#f4f7f5;color:var(--forest);border:1px solid #c7d2cc;border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--fs-md);cursor:pointer}
.lang-choix:hover{background:var(--mint)}
.lang-on{background:var(--forest);color:#fff;border-color:var(--forest);font-weight:600}
/* Assistant « Importer depuis l'immeuble » (budget par immeuble) */
.imp-groupe{margin-bottom:16px}
.imp-groupe h4{margin:0 0 6px;font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.04em;color:#6b7a75}
.imp-ligne{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid #dde5e0;border-radius:9px;margin-bottom:6px;background:#fff}
.imp-ligne.imp-off{opacity:.55;background:#f7f9f8}
.imp-chk{padding-top:2px}
.imp-corps{flex:1;min-width:0}
.imp-titre{font-weight:600;font-size:13.5px}
.imp-detail{font-size:var(--fs-md);color:#6b7a75;margin-top:2px}
.imp-avis{font-size:var(--fs-md);color:#8a6d1f;background:#fdf6e3;border-radius:6px;padding:5px 8px;margin-top:6px}
.imp-avis-fort{color:#8c2f2f;background:#fdecec}
.imp-champs{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.imp-champs label{font-size:11.5px;color:#6b7a75;display:flex;flex-direction:column;gap:3px}
.imp-champs select,.imp-champs input{padding:5px 8px;border:1px solid #c7d2cc;border-radius:7px;font-size:12.5px}
.imp-champs .imp-total,.imp-champs .imp-jour{width:110px}
.imp-champs .imp-jour{width:70px}
.imp-montant{text-align:right;font-weight:600;font-size:13.5px;white-space:nowrap}
.imp-montant .sub{display:block;font-size:10.5px;font-weight:400;margin:0}
.imp-pied{display:flex;gap:8px;margin-top:14px;position:sticky;bottom:0;background:#fff;padding-top:10px}
/* Ventilation d'un poste corporatif vers ses immeubles */
button.vent{background:#f4f7f5;color:var(--forest);border:1px solid #c7d2cc;border-radius:var(--radius-pill);font-size:var(--fs-sm);padding:2px 9px;cursor:pointer;font-weight:600;margin-left:4px}
button.vent:hover{background:var(--mint)}
.vent-ligne{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid #dde5e0;border-radius:9px;margin-bottom:6px}
.vent-ligne.vent-reste{border-style:dashed;background:#f7f9f8}
.vent-chk{font-size:13.5px;display:flex;gap:6px;align-items:center}
.vent-pct{font-size:var(--fs-md);color:#6b7a75;display:flex;gap:5px;align-items:center;white-space:nowrap}
.vent-pctv{width:80px;padding:5px 8px;border:1px solid #c7d2cc;border-radius:7px;font-size:12.5px}
.vent-fusion{display:flex;gap:6px;align-items:center;font-size:12.5px;color:#6b7a75;margin-top:8px}
/* Bâtir le budget d'un immeuble depuis le réel */
.reel-table{width:100%;border-collapse:collapse;font-size:var(--fs-lg);margin-top:10px}
.reel-table th{text-align:left;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;color:#6b7a75;padding:6px 8px;border-bottom:1px solid #dde5e0}
.reel-table td{padding:7px 8px;border-bottom:1px solid #eef2f0;vertical-align:middle}
.reel-table tfoot td{border-top:2px solid #dde5e0;border-bottom:none;padding-top:10px}
.reel-num{text-align:right;white-space:nowrap}
.reel-meta{font-size:var(--fs-sm);color:#6b7a75;margin-top:2px}
.reel-taux,.reel-fixe{width:78px;padding:4px 7px;border:1px solid #c7d2cc;border-radius:7px;font-size:12.5px;text-align:right}
.reel-src{font-size:10.5px;padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap}
.reel-src-gl{background:var(--mint);color:var(--forest)}
.reel-src-op{background:var(--ciel,#DCF5FA);color:#0a3a5c}
/* Grand livre — éditeur d'écriture */
table.gl-edit{margin-top:4px}
table.gl-edit select.gl-cpt{min-width:260px}
input.gl-deb,input.gl-cre{width:120px}
#gl-lib{padding:8px 12px;border:1px solid #c7d2cc;border-radius:7px;font-size:var(--fs-xl);flex:1;min-width:240px}
.gl-tot{font-size:var(--fs-lg);color:#5a6b64;margin-left:6px}
.err{color:var(--red);font-weight:600}

/* Reddition de compte — impression */
@media print {
  #rail, #topbar, #tabs, .btn, select, input { display: none !important; }
  .view { display: block !important; }
  .redd-fiche { break-inside: avoid; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  body { font-size:var(--fs-sm); }
}

.alerte-crit{color:#b71c1c;font-weight:700}
.gl-reel{color:var(--forest);font-weight:600}

/* Panneau tiroir générique (côté droit, glissant) — module RH et réutilisable ailleurs.
   Patron repris du drawer déjà utilisé par le module Immo (immo-drawer/immo-ovl dans app.js),
   mais défini ici en statique pour ne pas dépendre d'un module qui l'injecte à l'exécution. */
.side-drawer{position:fixed;top:0;right:0;width:460px;max-width:95vw;height:100%;background:#fff;
  box-shadow:-6px 0 28px rgba(0,0,0,.13);z-index:1000;overflow-y:auto;
  transform:translateX(100%);transition:transform .25s ease}
.side-drawer.open{transform:translateX(0)}
.side-ovl{display:none;position:fixed;inset:0;background:rgba(10,70,60,.25);z-index:999}
.side-ovl.open{display:block}
.drw-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
  border-bottom:1px solid #e3e9e5;position:sticky;top:0;background:#fff}
.drw-head h3{margin:0;font-size:15px;font-weight:700;color:var(--forest)}
.drw-close{background:none;border:none;cursor:pointer;color:#7a8a83;border-radius:6px;
  padding:4px 8px;font-size:var(--fs-xl);font-weight:700;font-family:inherit}
.drw-close:hover{background:#f0f4f2;color:var(--forest)}
.drw-body{padding:20px}

/* Politiques & procédures (17 juillet, demandé par Patrick) : lecture en plein écran sur
   ordinateur -- le panneau générique de 460px (.side-drawer, réutilisé ailleurs, voir plus
   haut) est trop étroit pour un texte structuré en plusieurs sections. Ciblé sur #pol-drawer
   précisément (jamais .side-drawer directement) pour ne rien changer aux autres tiroirs.
   Le panneau lui-même couvre tout le viewport ; seule la colonne de lecture (.drw-body)
   garde une largeur confortable, centrée, pour ne pas étirer le texte d'un bord à l'autre
   sur un grand écran. */
@media (min-width: 900px) {
  #pol-drawer{width:100%;max-width:100%}
  #pol-drawer .drw-body{max-width:760px;margin:0 auto;padding:32px 40px}
  #pol-drawer .drw-head{padding:16px 40px}
  /* 18 juillet : même traitement que #immo-drawer (plein écran partout) -- fondu plutôt que
     glissement, fond jamais assombri (le panneau est déjà opaque et couvre tout l'écran).
     transform:none seul rendrait le panneau visible en permanence (la classe .open ne
     pilotait QUE le transform) -- il faut donc reprendre le pilotage de la visibilité via
     opacity/visibility, comme #immo-drawer. */
  #pol-drawer{transform:none !important;opacity:0;visibility:hidden;
    transition:opacity .18s ease,visibility 0s linear .18s}
  #pol-drawer.open{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s linear 0s}
  #pol-ovl{display:none !important}
}

/* Postes & services (12 juillet) — deux listes gérées côte à côte */
.rhref-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rhref-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rhref-item{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid #f0f3f1;transition:opacity .15s}
.rhref-item:last-child{border-bottom:none}
.rhref-item.rhref-inactif{opacity:.45}
.rhref-nom{flex:1;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rhref-compte{font-size:var(--fs-sm);color:#7a8a83;white-space:nowrap}
.rhref-actions{display:flex;gap:4px;flex:none}
.rhref-actions .btn-mini{padding:5px 8px;display:inline-flex;align-items:center}
.rhref-ajout{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed #dde5e0}
.rhref-ajout input{flex:1;border:1px solid #d7ded9;border-radius:7px;padding:7px 10px;font-size:var(--fs-lg);font-family:inherit}
.rhref-ajout input:focus{outline:none;border-color:var(--forest);box-shadow:var(--shadow-ring-forest)}
@media (max-width:960px){.rhref-grid{grid-template-columns:1fr}}

/* Module RH — table Personnel */
.rh-row-nom{display:flex;align-items:center;gap:10px}
.rh-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--forest);
  font-size:var(--fs-md);font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.2px}
table.rh-t tbody tr{cursor:pointer;transition:background .1s}
table.rh-t tbody tr:hover{background:var(--ciel)}
/* Bogue réel du 13 juillet (signalé par Patrick) : les <th> de ce tableau sont alignés à
   gauche (inline style), mais les <td> n'avaient aucun alignement propre -- ils retombaient
   sur la règle globale th,td{text-align:right} (seule la 1re colonne étant à gauche par
   défaut). Résultat : Poste/Service/Société/Garde/Statut avaient leur titre à gauche et
   leur contenu à droite. Toutes les colonnes de ce tableau sont du texte, jamais des
   montants -- alignées à gauche partout. */
table.rh-t th,table.rh-t td{text-align:left}

/* Fiche employé (tiroir) — style « Google Contacts » : avatar en tête, champs groupés par
   section avec une petite étiquette, plutôt qu'une longue liste plate de labels/inputs. */
.rh-avatar-lg{width:64px;height:64px;border-radius:50%;background:var(--mint);color:var(--forest);
  font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;letter-spacing:.2px}
.rh-section{margin-bottom:18px}
.rh-section-titre{font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#7a8a83;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #eef2ef}
/* .immo-form est déjà lui-même une grille (repeat(auto-fit,minmax(180px,1fr))) -- un
   .rh-section posé tel quel comme enfant direct deviendrait une SEULE cellule de cette
   grille (tous ses champs écrasés dans ~180px de large). Vague 5e (bons de travail) :
   le section fait sa propre ligne pleine largeur, avec sa propre sous-grille identique. */
.immo-form .rh-section{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px;align-items:start}
.immo-form .rh-section-titre{grid-column:1/-1}
/* .champ/.champ-duo : rendu global depuis le 11 août (retour Patrick : « manque de
   finition, on dirait de la dactylo » sur Stratégie/EOS, puis Projets → Catalogue de
   coûts). Auparavant scopé à .rh-section — même bug déjà trouvé et corrigé une fois pour
   Politiques & procédures (13 juillet, voir plus bas) en enveloppant dans .rh-section,
   mais le vrai problème est le SCOPING lui-même : .champ est réutilisé partout dans l'app
   (142 usages) sans que chaque appelant pense à l'envelopper. Retirer le préfixe .rh-section
   rend le style inconditionnel — aucune régression pour les écrans déjà enveloppés (résultat
   identique, spécificité CSS inchangée dans ce sens), et corrige d'un coup tous les .champ
   orphelins, présents et futurs.*/
.champ{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;min-width:0}
.champ label{font-size:var(--fs-md);color:#5b6b64;font-weight:600}
/* min-width:0 sur le select (21 août, même bug que .immo-form select ci-dessus, même
   correctif) : la règle globale select{min-width:240px} déborde aussi dans .champ-duo,
   grille à 2 colonnes utilisée par les formulaires du module Projets. */
.champ select{min-width:0}
.champ input,.champ select,.champ textarea{
  border:1px solid #d7ded9;border-radius:var(--radius-sm);padding:8px 10px;font-size:13.5px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--forest);box-shadow:var(--shadow-ring-forest)}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.rh-collapsible{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease;margin-bottom:10px}
.rh-collapsible.ouvert{grid-template-rows:1fr}
.rh-collapsible>div{overflow:hidden}
.rh-toggle{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);font-weight:600;color:#1c2421;
  cursor:pointer;padding:9px 10px;border-radius:var(--radius-sm);background:#f7f9f7;user-select:none}
.rh-toggle:hover{background:var(--ciel)}
.rh-fieldbox{border:1px solid #e3e9e5;border-radius:9px;padding:12px;margin-top:8px;background:#fafcfb}

/* Dossiers standards (24 juillet) : composant renderDossier() -- un "slot" par emplacement
   attendu (voir app/dossiers.py::dossier), rempli ou non, réutilisé sur toutes les fiches
   (société/immeuble/unité/locataire/propriétaire/bail/employé/investisseur/fournisseur).
   Même langage visuel que .rh-section/.rh-toggle plutôt qu'un style inventé à part. */
.dossier-slot{padding:8px 10px;border-radius:var(--radius-sm);margin-bottom:4px;background:#fafcfb;
  border:1px solid #eef2ef}
.dossier-slot.dossier-ok{background:var(--mint)}
.dossier-slot.dossier-manquant{background:#fdece9;border-color:#f6c9c1}
.ds-inactif{opacity:.45}

/* Politiques & procédures (13 juillet, retour de Patrick : le tiroir d'ajout n'était pas
   à la hauteur — les .champ y étaient posés sans wrapper .rh-section, donc SANS AUCUN style
   (input/label bruts du navigateur). Corrigé en réutilisant .rh-section partout ; ici,
   seulement l'habillage propre à ce module (liste, lecture, pastille de classification). */
.pol-liste{display:flex;flex-direction:column}
.pol-row{display:flex;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid #eef2ef;
  cursor:pointer;border-radius:6px;transition:background .12s}
.pol-row:last-child{border-bottom:none}
.pol-row:hover{background:var(--ciel)}
.pol-row-titre{flex:1;font-size:13.5px;font-weight:600;color:#1c2421}
.pol-row-code{font-size:var(--fs-sm);color:#8a978f;font-family:ui-monospace,monospace}
.pol-lecture-tete{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid #eef2ef}
.pol-lecture-corps{font-size:13.5px;line-height:1.65;color:#1c2421}
.pol-drawer-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid #eef2ef}

/* Rendu markdown-lite du contenu d'une procédure (16 juillet -- lecture directe dans le
   panneau, sans téléchargement : voir _mdLite() dans app.js). Volontairement minimal --
   ## titre de section, - liste, > astuce mise en évidence, **gras** -- une syntaxe assez
   simple pour que Patrick tape directement dans le même champ Contenu qu'aujourd'hui. */
.pol-lecture-corps p{margin:0 0 12px}
.pol-lecture-corps p:last-child{margin-bottom:0}
.pol-lecture-corps ul{margin:0 0 12px;padding-left:22px}
.pol-lecture-corps li{margin:0 0 6px}
.pol-lecture-corps h4.pol-section-titre{font-family:Gellix,Manrope,sans-serif;font-size:14.5px;
  font-weight:800;color:var(--forest);margin:20px 0 8px;scroll-margin-top:70px}
.pol-lecture-corps h4.pol-section-titre:first-child{margin-top:0}
.pol-lecture-corps .pol-astuce{background:var(--taupe);border-radius:var(--radius-sm);padding:10px 14px;
  margin:0 0 12px;font-size:var(--fs-lg);line-height:1.6}
/* Capture d'écran inline (14 août, Formation -- guides pas-à-pas). Cadre léger + légende,
   même esprit que .pol-astuce : mis en évidence sans casser le rythme de lecture. */
.pol-lecture-corps .pol-fig{margin:0 0 16px;border:1px solid #eef2ef;border-radius:9px;
  overflow:hidden;box-shadow:0 1px 2px rgba(10,70,60,.05)}
.pol-lecture-corps .pol-fig img{display:block;width:100%;height:auto;cursor:zoom-in}
.pol-lecture-corps .pol-fig figcaption{font-size:var(--fs-md);color:#8a978f;padding:8px 12px;
  border-top:1px solid #eef2ef}

/* Capture agrandie (14 août, demandé par Patrick) -- voir _polAgrandir() dans app.js. Un
   clic (n'importe où) ou Échap referme ; pas de galerie, une image à la fois. */
.pol-img-ovl{position:fixed;inset:0;background:rgba(10,20,16,.85);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out}
.pol-img-ovl img{max-width:100%;max-height:100%;display:block;border-radius:var(--radius-sm);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}

/* Table des matières d'un guide de Formation (14 août, demandé par Patrick : « une barre
   de navigation à gauche pour aller directement à une section »). Masquée par défaut --
   pas assez de place à côté de la colonne de lecture avant 1100px -- réapparaît une fois
   le panneau assez large (voir la largeur élargie de #pol-drawer .drw-body ci-dessous,
   #pol-drawer .drw-body:has(.pol-toc-layout)). En dessous, on lit simplement de haut en
   bas comme avant : rien ne casse, la table des matières est un bonus, pas une dépendance. */
.pol-toc{display:none}
.pol-toc-titre{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:#8a978f;
  font-weight:700;margin-bottom:8px}
.pol-toc a{display:block;font-size:var(--fs-lg);color:#4b584f;text-decoration:none;padding:6px 10px;
  border-radius:7px;border-left:2px solid transparent;line-height:1.35}
.pol-toc a:hover{background:var(--ciel);color:var(--forest);border-left-color:var(--forest)}
@media (min-width:1100px) {
  #pol-drawer .drw-body:has(.pol-toc-layout){max-width:1060px}
  .pol-toc-layout{display:flex;gap:36px;align-items:flex-start}
  .pol-toc{display:flex;flex-direction:column;gap:1px;width:210px;flex:0 0 210px;
    position:sticky;top:56px}   /* sous #pol-drawer .drw-head, lui-même sticky top:0 */
  .pol-toc-layout .pol-lecture-corps{flex:1;min-width:0}
}
@media (prefers-reduced-motion:no-preference) { #pol-drawer{scroll-behavior:smooth} }

/* Autocomplétion d'adresse Google (14 juillet) : liseré vert une fois une vraie suggestion
   choisie, ambre tant que c'est du texte libre non confirmé -- jamais rouge/bloquant, une
   adresse rurale ou avec numéro d'unité ne matche pas toujours Google parfaitement. */
input.js-adresse.adresse-validee{border-color:var(--forest, #0A463C);
  box-shadow:0 0 0 1px var(--forest, #0A463C)}
input.js-adresse.adresse-a-verifier{border-color:#c99a2e}
/* Liste de suggestions maison (appels REST Places API directs, pas le widget Google --
   voir _initAdresseAutocomplete dans app.js, 14 juillet). */
.js-adresse-suggestions{background:#fff;border:1px solid #d7ded9;border-radius:var(--radius-sm);
  box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:10000;max-height:220px;overflow-y:auto;
  font-size:13.5px}
.js-adresse-suggestion{padding:8px 10px;cursor:pointer}
.js-adresse-suggestion:hover{background:var(--ciel, #DCF5FA)}

/* Horaire de garde — style « Google Calendar » : grille de la semaine plutôt qu'une longue
   liste de 30 lignes, navigation semaine par semaine, puces d'état colorées.
   12 juillet, passe de finition (retour de Patrick : « look pas assez pro ») : les jours
   passent d'un aplat pastel plein (façon brouillon) à une carte blanche + liseré d'accent +
   pastille d'état, le même langage déjà utilisé ailleurs dans l'app pour les tableaux de
   bord (.dtr-alerte, .liq-alerte) — cohérence avec le reste, pas un nouveau style isolé. */
.gh-nav{display:flex;align-items:center;gap:8px}
.gh-nav .btn-mini{padding:5px 11px}
.gh-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--radius-pill);
  font-size:var(--fs-md);font-weight:700}
.gh-pill-rouge{background:#fdeceb;color:#b3261e}
.gh-pill-jaune{background:#fdf6e3;color:#8a6d00}
.gh-pill-vert{background:var(--mint);color:var(--forest)}
.gh-semaine{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.gh-jour{position:relative;background:#fff;border:1px solid #e7ece9;border-top:3px solid #d7ded9;
  border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:9px;
  min-height:158px;min-width:0;box-shadow:var(--shadow-card-subtle);
  transition:box-shadow .15s,transform .15s}
.gh-jour:hover{box-shadow:0 6px 16px rgba(16,40,34,.10);transform:translateY(-1px)}
.gh-jour.gh-aujourdhui{border-top-color:var(--forest)}
.gh-jour.gh-aujourdhui .gh-jour-date{color:var(--forest)}
.gh-jour.gh-probleme{border-top-color:#c0392b}
.gh-jour.gh-attention{border-top-color:#dba300}
.gh-jour.gh-ok{border-top-color:var(--grn)}
.gh-jour-entete{display:flex;align-items:center;justify-content:space-between;line-height:1.25;
  flex-wrap:wrap;row-gap:2px}
.gh-jour-nomdate{display:flex;flex-direction:column;min-width:0}
.gh-jour-nom{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a9791}
.gh-jour-date{font-size:var(--fs-2xl);font-weight:800;color:#1c2421;white-space:nowrap}
.gh-jour-aujourdhui-badge{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--forest);background:var(--mint);padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap}
.gh-jour-chip{display:flex;align-items:center;gap:7px;background:#fbfdfc;border:1px solid #e7ece9;
  border-radius:var(--radius-pill);padding:4px 10px 4px 4px;font-size:var(--fs-md);font-weight:700;min-width:0;
  max-width:calc(100% - 2px);overflow:hidden;box-shadow:var(--shadow-card-subtle)}
/* Bogue réel du 13 juillet : le nom était un texte NU (pas dans un élément), donc cette
   troncature ne s'appliquait en fait jamais à lui (elle visait l'avatar, seul enfant-élément) --
   un nom long débordait de la carte-jour. Fixé en enveloppant le nom dans son propre <span>
   (voir renderGardeHoraire) ; min-width:0 ici nécessaire pour qu'un enfant flex accepte de
   rétrécir sous sa largeur de contenu naturelle avant de tronquer. */
.gh-jour-chip>*:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gh-jour-chip .rh-avatar{width:23px;height:23px;font-size:var(--fs-xs);box-shadow:inset 0 0 0 1px rgba(10,70,60,.12);flex-shrink:0}
.gh-jour-vide{display:flex;align-items:center;gap:7px;color:#b3261e;font-size:var(--fs-md);font-weight:700;
  padding:4px 2px}
.gh-jour-select{width:100%;max-width:100%;min-width:0;border:1px solid #d7ded9;background:#fbfdfc;border-radius:var(--radius-sm);
  padding:6px 7px;font-size:11.5px;font-family:inherit;margin-top:auto;box-sizing:border-box;
  transition:border-color .12s,background .12s}
/* Bogue réel du 13 juillet (signalé par Patrick) : un <select> est un enfant flex dans
   .gh-jour (column) -- son min-width par défaut est "auto" (= largeur de sa plus longue
   <option>), ce qui ANNULE width:100% dès qu'un nom d'employé est assez long -- le menu
   débordait largement de la carte-jour. min-width:0 force le select à respecter width:100%. */
.gh-jour-select:hover{border-color:#c7d2cc}
.gh-jour-select:focus{outline:none;border-color:var(--forest);background:#fff}
.gh-jour-dispo{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;color:#7a8a83;
  background:#f0f4f2;border-radius:var(--radius-pill);padding:2px 9px;width:fit-content}
.gh-jour.gh-probleme .gh-jour-dispo{color:#b3261e;background:#fdeceb}
.gh-jour.gh-attention .gh-jour-dispo{color:#8a6d00;background:#fdf6e3}
@media (max-width:960px){.gh-semaine{grid-template-columns:repeat(7,minmax(120px,1fr));overflow-x:auto}}

/* Module Ménage — horaire (14 juillet, réutilise la grille .gh-semaine/.gh-jour du
   module Garde pour une cohérence visuelle -- même patron « Google Calendar » déjà
   approuvé par Patrick, adapté ici pour PLUSIEURS quarts par jour avec heures propres). */
.gh-jour-chip{cursor:pointer;transition:box-shadow .12s}
.gh-jour-chip:hover{box-shadow:0 3px 8px rgba(16,40,34,.12)}
.gh-jour-chip.mh-non-attribue{background:#fdeceb;border-color:#f0b8ae;color:#b3261e}
.mh-chip-add{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;
  border:1.5px dashed #c7d2cc;border-radius:var(--radius-pill);padding:5px 10px;background:none;
  font-size:11.5px;font-weight:700;color:#7a8a83;cursor:pointer;margin-top:auto;
  transition:border-color .12s,color .12s}
.mh-chip-add:hover{border-color:var(--forest);color:var(--forest)}

/* Module Garde d'urgence — calendrier de disponibilités (self-service) */
.garde-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px;margin:14px 0}
.gc-jour{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 4px;border-radius:var(--radius-sm);
  border:1px solid #e3e9e5;background:#fafcfb;cursor:pointer;font-family:inherit;transition:transform .08s}
.gc-jour:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.gc-jour:disabled{cursor:not-allowed;opacity:.5}
.gc-sem{font-size:var(--fs-xs);color:#7a8a83;text-transform:uppercase;font-weight:700}
.gc-num{font-size:var(--fs-2xl);font-weight:800;color:#1c2421}
.gc-mois{font-size:var(--fs-xs);color:#7a8a83}
.gc-oui{background:var(--mint);border-color:var(--forest)}
.gc-oui .gc-num{color:var(--forest)}
.gc-non{background:#fdece9;border-color:var(--red)}
.gc-non .gc-num{color:var(--red)}
.gc-vide{background:#fafcfb}
.gc-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:2px;border:1px solid #e3e9e5}
.gl-dot{font-size:var(--fs-2xs);vertical-align:middle;margin-right:2px}
.gl-proj{background:rgba(10,70,60,.04)}

/* ===================== Mobile ===================== */
/* Sans ce point de rupture, le rail de gauche (190px fixes) et les tableaux larges
   rendaient l'app inutilisable sur téléphone — nécessaire pour que « Numérisation de
   pièces » et « Horaire de garde » (entre autres) soient réellement accessibles en
   mobilité, pas seulement sur ordinateur.
   Corrigé le 20 juillet : (max-width) seul repassait en layout desktop dès qu'un
   téléphone passait en mode PAYSAGE (la plupart dépassent 700px de large tournés,
   ex. 844px sur iPhone) -- (max-height) en plus garde le mobile stable dans les deux
   orientations (l'une des deux dimensions d'un téléphone reste toujours petite), sans
   pour autant capter une vraie tablette (768px+ dans les DEUX dimensions). Même requête
   utilisée dans app.js::estMobile() -- garder les deux synchronisées. */
@media (max-width:700px), (max-height:700px){
  /* En-tête sur une seule ligne (12 juillet, retour Patrick : bandeau mobile plus soigné) --
     sans le statut de connexion permanent (voir .toast) ni +Créer (flottant, plus dans le
     bandeau, voir .creer-wrap), il ne reste que le logo + l'avatar de compte : tient sans
     repli sur une 2e ligne, contrairement à avant. */
  header{padding:10px 14px;gap:8px}
  header h1{font-size:15px}
  header .logo{height:34px}
  header .header-right{gap:8px}
  .acct-menu{right:-4px}
  /* Bogue réel trouvé à l'audit du 12 juillet : .cloche-menu hérite de .acct-menu un
     ancrage right:0, mais la cloche N'EST PAS le dernier élément du bandeau (l'avatar
     vient après) -- sur petit écran, le panneau (jusqu'à 340px) débordait hors de
     l'écran à gauche. Ancré à gauche de la cloche plutôt qu'à sa droite. */
  .cloche-menu{left:0;right:auto}
  /* Le bouton flottant doit dégager la barre de navigation fixe du bas (.rail, voir plus
     bas) -- sinon les deux se chevauchent. */
  .creer-wrap{bottom:calc(72px + env(safe-area-inset-bottom))}
  .creer-panel{max-width:calc(100vw - 48px)}
  main{padding:12px 10px 84px}

  /* Rail de modules : colonne fixe (gauche) -> barre de navigation FIXE EN BAS, convention
     Material/Google (Gmail, Maps, YouTube) — refonte du 9 juillet suite au retour
     "interface encore difficile et pas assez intuitive". Le HTML/JS n'a pas besoin de
     changer : renderRail() (app.js) émet déjà une icône + une étiquette par bouton, ce
     qui correspond directement au motif icône-au-dessus-du-texte d'une barre du bas. */
  .shell{flex-direction:column;min-height:auto}
  /* top:auto / max-height:none sont INDISPENSABLES (bogue réel trouvé le 1er août) : la
     règle de base (.rail, plus haut) pose position:sticky + top:var(--haut-entete) ; en
     passant à position:fixed ici SANS réinitialiser top, la barre restait ancrée EN HAUT
     à la hauteur de l'en-tête au lieu de descendre en bas, et recouvrait la rangée de
     sous-onglets (nav#tabs, même bande verticale, z-index inférieur). Effet : sur tout
     écran de moins de 700px de large OU de haut -- donc TOUS les téléphones -- les
     sous-onglets étaient invisibles ET non cliquables (elementFromPoint rendait le rail).
     Concrètement, une employée de ménage ne pouvait pas atteindre « Mon espace > Ménage »
     pour pointer ses heures : zéro punch en production depuis la mise en service. */
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:none;
    z-index:600;flex:0 0 auto;width:100%;
    flex-direction:row;justify-content:space-around;overflow-x:visible;gap:0;
    padding:4px 2px calc(4px + env(safe-area-inset-bottom));
    border-right:none;border-top:1px solid #dde5e0;background:#fff;
    box-shadow:0 -2px 10px rgba(0,0,0,.08)}
  .rail-btn{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:6px 2px;
    border-radius:var(--radius-md);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;text-align:center}
  .rail-btn .rail-ic .ic{width:21px;height:21px}
  .rail-btn .rail-nom{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .rail-btn .rail-soon{position:static;display:block;margin:0;font-size:8px}

  /* Le compteur de non-lus sur le bouton Messages de la barre du bas : ancré à l'icône,
     pas au bouton (dont le texte occupe déjà le bas). */
  #rail-chat .rail-ic{position:relative}
  #rail-chat .cloche-badge{position:absolute;top:-4px;right:-8px}
  /* Feuille « Plus » : le reste des modules, en grille lisible plutôt que 13 icônes de
     25 px dans la barre (29 juillet, retour de Patrick). Ancrée au-dessus de la barre. */
  .rail-plus-feuille{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));
    z-index:640;background:#fff;border-top:1px solid #dde5e0;border-radius:16px 16px 0 0;
    box-shadow:0 -6px 24px rgba(0,0,0,.18);padding:8px 12px 14px;max-height:60vh;overflow-y:auto}
  .rail-plus-poignee{width:38px;height:4px;border-radius:4px;background:#dde5e0;margin:2px auto 10px}
  .rail-plus-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .rail-plus-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;
    background:#f7f9f8;border:1px solid #eef2f0;border-radius:12px;font-size:11.5px;font-weight:600;
    color:var(--forest);cursor:pointer;text-align:center;line-height:1.25}
  .rail-plus-item:disabled{opacity:.45}
  .rail-plus-item .ic{width:22px;height:22px}

  /* Onglets de module (.tabs) et barre de sous-onglets (.subtabs) : ces classes ont déjà
     plus de spécificité CSS que le sélecteur générique "nav" (qui ne s'appliquait donc
     jamais réellement ici — bogue silencieux, corrigé) ; on cible les vraies classes pour
     de plus grandes cibles tactiles, en laissant le retour à la ligne déjà en place plutôt
     qu'un défilement horizontal peu découvrable au doigt. */
  /* 29 juillet, retour de Patrick (« sur mobile je vois tous les onglets, c'est illisible ») :
     le retour à la ligne empilait jusqu'à 4 rangées de boutons AVANT le contenu, mangeant la
     moitié de l'écran. Une seule rangée qui DÉFILE horizontalement, avec accrochage : on voit
     tout de suite où commence le contenu, et l'onglet actif est ramené dans la vue par JS
     (voir _defilerVersOngletActif). Le dégradé à droite indique qu'il y en a d'autres. */
  .tabs,.subtabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 8px;position:relative}
  .tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}
  .tabs button,.subtabs button{scroll-snap-align:start;flex:0 0 auto}
  .tabs button{padding:12px 14px;font-size:13.5px;white-space:nowrap}
  .subtabs button{padding:9px 12px;font-size:12.5px;white-space:nowrap}
  .barre{flex-wrap:wrap;gap:8px}

  /* Tout tableau devient indépendamment défilable horizontalement plutôt que de
     casser la mise en page (pas besoin de toucher chaque écran individuellement) */
  table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%}
  .det-t{display:block;overflow-x:auto}
  .det-t table{display:table;white-space:normal}

  /* Listes « Historique » les plus consultées en mobilité (Mes heures, Mes factures) :
     tableau -> liste de cartes, une entrée par carte plutôt qu'un tableau à faire défiler
     horizontalement. Opt-in via .it-mobile-cards (posé par app.js) pour ne toucher que ces
     écrans-là ; n'a aucun effet en desktop (règle uniquement dans cette media query). */
  table.it-mobile-cards{white-space:normal}
  table.it-mobile-cards thead{display:none}
  table.it-mobile-cards,table.it-mobile-cards tbody,table.it-mobile-cards tr,table.it-mobile-cards td{display:block;width:100%}
  table.it-mobile-cards tr{margin-bottom:10px;border:1px solid #e3e9e5;border-radius:12px;padding:4px 12px;background:#fff}
  table.it-mobile-cards td{border:none;padding:7px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:right}
  table.it-mobile-cards td:not(:last-child){border-bottom:1px solid #f0f3f1}
  table.it-mobile-cards td[data-label]::before{content:attr(data-label);font-weight:700;color:#7a8a83;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;text-align:left}
  table.it-mobile-cards td:not([data-label])::before{content:none}
  table.it-mobile-cards td:empty,table.it-mobile-cards td:has(> :only-child:empty){display:none}

  /* Formulaires de saisie (numérisation de pièces, tiroirs, etc.) : 1 colonne, cible
     tactile plus grande */
  .docs-grid{grid-template-columns:1fr}
  .immo-form{grid-template-columns:1fr !important;gap:18px !important}
  .immo-form .rh-section{grid-template-columns:1fr !important;gap:18px !important}
  input,select,textarea,button,.btn,.btn-mini,.btn-sec{font-size:var(--fs-2xl)}

  /* Boutons « très googleish » (demandé 9 juillet) : cibles tactiles généreuses (48px de
     hauteur, repère Material Design), plus arrondis, légère élévation sur le bouton
     principal. L'action principale d'un formulaire self-service (Mes heures/Mes factures —
     bouton seul, enfant direct de .immo-form, pas dans une rangée à plusieurs boutons)
     s'étire pleine largeur, comme un bouton « rempli » Material. */
  .btn,.btn-sec{padding:13px 20px;border-radius:12px;min-height:48px;font-weight:700}
  .btn{box-shadow:0 2px 6px rgba(10,70,60,.25)}
  .btn-mini{padding:9px 13px;border-radius:var(--radius-md);min-height:38px}
  .immo-form>.btn{width:100%;display:block;text-align:center}
  /* !important nécessaire : ce style perd sinon contre la règle .immo-form injectée
     dynamiquement par immoCss() (app.js), ajoutée au <head> après ce stylesheet statique
     — même raison que .immo-form{grid-template-columns:1fr !important} juste au-dessus. */
  .immo-form input,.immo-form select,.immo-form textarea{padding:13px 14px !important;border-radius:var(--radius-md) !important}
  .card{padding:20px;border-radius:14px}

  /* Numérisation de pièces : boutons de dépôt/caméra empilés, pleine largeur */
  .docs-drop{padding:16px}
  .docs-pick{display:inline-block;margin:4px 0}
  .docs-item{padding:10px}

  /* Horaire de garde : une carte-jour par ligne plutôt que 7 colonnes serrées */
  .gh-semaine{grid-template-columns:1fr;overflow-x:visible}
  .gh-jour{min-width:0}

  /* Tiroir (#immo-drawer) : panneau latéral étroit -> feuille plein écran depuis le bas
     (motif « bottom sheet » Material), plus naturel au doigt qu'un panneau de 640px qui
     ne laisse presque rien voir de large sur un téléphone.
     !important nécessaire sur les propriétés de position/taille : #immo-drawer est un
     sélecteur d'ID défini dans le <style> injecté dynamiquement par immoCss() (app.js),
     ajouté au <head> APRÈS ce feuille de style statique — à spécificité égale (ID contre
     ID), c'est l'ordre dans le DOM qui tranche, et immoCss() gagne sans !important (même
     raison que les autres !important de ce bloc, voir plus haut). */
  #immo-drawer{top:auto !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100% !important;max-width:100% !important;height:92vh !important;
    border-radius:16px 16px 0 0 !important;box-shadow:0 -8px 30px rgba(0,0,0,.22) !important;
    transform:translateY(100%) !important;transition:transform .32s cubic-bezier(.19,1,.22,1) !important}
  #immo-drawer.open{transform:translateY(0) !important}
}
/* Budget de projet (3 août) — formulaires en ligne, masqués tant qu'on n'en a pas besoin :
   l'écran reste lisible en consultation, qui est 90 % de l'usage. */
.pb-form { background: var(--taupe, #E1E1D2); padding: 10px 12px; border-radius: 6px;
           margin-top: 8px; }

/* ---------- Stratégie (EOS) — 6 août : mise en page inspirée des gabarits officiels
   EOS (V/TO, Level 10 Meeting, Accountability Chart, People Analyzer, Delegate & Elevate,
   voir EOS/ à la racine du dépôt), en couleurs Atreum (Forêt) plutôt que l'orange EOS —
   demandé par Patrick : « je veux que les outils ressemblent davantage à ceux fournis ». */
.eos-head{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.eos-head .eos-bar{width:5px;align-self:stretch;background:var(--forest);border-radius:2px;min-height:22px}
.eos-head h2{margin:0;font-size:1.1rem;font-weight:800;letter-spacing:.2px}
.eos-label{color:var(--forest);font-weight:800;font-size:.72rem;letter-spacing:.6px;text-transform:uppercase}

/* V/TO — page Vision : bandeau de gauche coloré (Core Values/Focus/Cible/Marketing) +
   colonne "Portrait à 3 ans" à droite, comme le gabarit officiel à deux colonnes. */
.eos-vto-grid{display:grid;grid-template-columns:2fr 1fr;border:1px solid #d8ded9;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.eos-vto-rows{display:flex;flex-direction:column;min-width:0}
.eos-vto-row{display:grid;grid-template-columns:150px 1fr;border-top:1px solid #d8ded9;min-width:0}
.eos-vto-row:first-child{border-top:none}
.eos-vto-row .eos-vto-lbl{background:var(--forest);color:#fff;font-weight:800;font-size:.76rem;letter-spacing:.3px;padding:10px;display:flex;align-items:center}
.eos-vto-row .eos-vto-body{padding:10px;min-width:0}
.eos-vto-3y{border-left:1px solid #d8ded9;display:flex;flex-direction:column}
.eos-vto-3y .eos-vto-lbl{background:#4f7166;color:#fff;font-weight:800;font-size:.76rem;letter-spacing:.3px;padding:10px;text-align:center}
.eos-vto-3y .eos-vto-body{padding:10px;flex:1}

/* V/TO — page Traction : 3 colonnes égales (Plan d'un an / Priorités / Enjeux), comme
   le gabarit officiel. */
.eos-traction{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #d8ded9;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.eos-traction>div{border-left:1px solid #d8ded9;display:flex;flex-direction:column;min-width:0}
.eos-traction>div:first-child{border-left:none}
.eos-traction .eos-t-head{background:var(--forest);color:#fff;font-weight:800;font-size:.76rem;letter-spacing:.4px;text-align:center;padding:10px}
.eos-traction .eos-t-body{padding:10px;flex:1;min-width:0}

@media (max-width:760px){
  .eos-vto-grid,.eos-traction{grid-template-columns:1fr}
  .eos-vto-row{grid-template-columns:1fr}
  .eos-vto-3y{border-left:none;border-top:1px solid #d8ded9}
  .eos-traction>div{border-left:none;border-top:1px solid #d8ded9}
  .eos-traction>div:first-child{border-top:none}
}

/* Level 10 Meeting — agenda façon gabarit officiel : item à gauche, minutes à droite. */
.eos-agenda{display:flex;flex-direction:column}
.eos-agenda-item{display:flex;justify-content:space-between;gap:10px;padding:6px 2px;border-bottom:1px dashed #dde5e0}
.eos-agenda-item:last-child{border-bottom:none}
.eos-agenda-item b{font-weight:700}
.eos-agenda-item span{color:#5a6b64;font-weight:700;white-space:nowrap}

/* Delegate & Elevate — grille 2×2, dégradé Forêt (à garder) → rouge (à déléguer), comme
   le gabarit officiel qui fonce vers le quadrant prioritaire. */
.eos-delegate-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d8ded9;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.eos-delegate-grid>div{border-top:1px solid #d8ded9;border-left:1px solid #d8ded9}
.eos-delegate-grid>div:nth-child(1),.eos-delegate-grid>div:nth-child(2){border-top:none}
.eos-delegate-grid>div:nth-child(1),.eos-delegate-grid>div:nth-child(3){border-left:none}
.eos-dq-head{color:#fff;font-weight:800;letter-spacing:.3px;padding:9px 12px;text-transform:uppercase;font-size:.78rem}
.eos-dq-body{padding:10px}
@media (max-width:600px){.eos-delegate-grid{grid-template-columns:1fr}
  .eos-delegate-grid>div:nth-child(3){border-left:none}}

/* People Analyzer — entêtes de colonnes en diagonale, comme le gabarit officiel. */
.eos-pa-table{border-collapse:collapse}
/* thead th{background:var(--forest)} (règle globale des tableaux) rendrait ce texte
   invisible -- vert sur vert -- d'où le fond blanc explicite ici. Largeur généreuse
   (80px, pas juste assez pour la diagonale) : sinon le texte tourné déborde dans la
   colonne voisine et se fait couper par SON fond blanc opaque à elle (constaté à
   l'aperçu visuel du 6 août -- chaque <th> peint son propre fond par-dessus ce qui
   déborde de son voisin). */
.eos-pa-table th.eos-pa-diag{height:64px;position:relative;padding:0 4px;border:none;vertical-align:bottom;width:80px;min-width:80px;background:#fff}
.eos-pa-table th.eos-pa-diag span{position:absolute;bottom:4px;left:6px;transform:rotate(-35deg);transform-origin:left bottom;
  white-space:nowrap;font-size:.72rem;font-weight:700;color:var(--forest)}
.eos-pa-table th.eos-pa-diag .ep-rmv{position:static;transform:none;display:inline-block;margin-left:4px}

/* Accountability Chart — arbre en CSS pur (lignes de connexion), comme le gabarit
   officiel. Patron classique boîte+traits ; couleur des traits = vert Forêt éclairci.
   Classes dédiées .org-tree-ul/.org-tree-li (plutôt que le sélecteur descendant générique
   ".org-tree li") : sinon les puces <li> de la liste de rôles À L'INTÉRIEUR de chaque
   boîte -- elle aussi imbriquée sous .org-tree -- héritaient du style de nœud d'arbre
   (mise en page flex + traits de connexion), constaté à l'aperçu visuel du 6 août. */
.org-tree{overflow-x:auto;padding:8px 4px 20px}
.org-tree-ul{padding-top:20px;position:relative;display:flex;justify-content:center;margin:0}
.org-tree>.org-tree-ul{padding-top:0}
.org-tree-li{display:flex;flex-direction:column;align-items:center;list-style:none;position:relative;padding:20px 10px 0;margin:0}
.org-tree-li::before,.org-tree-li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid #9db3ab;width:50%;height:20px}
.org-tree-li::after{right:auto;left:50%;border-left:2px solid #9db3ab}
.org-tree-li:only-child::after,.org-tree-li:only-child::before{display:none}
.org-tree-li:only-child{padding-top:0}
.org-tree>.org-tree-ul>.org-tree-li{padding-top:0}
.org-tree>.org-tree-ul>.org-tree-li::before,.org-tree>.org-tree-ul>.org-tree-li::after{display:none}
.org-tree-li:first-child::before,.org-tree-li:last-child::after{border:0 none}
.org-tree-li:last-child::before{border-right:2px solid #9db3ab;border-radius:0 6px 0 0}
.org-tree-li:first-child::after{border-radius:6px 0 0 0}
.org-tree-ul .org-tree-ul::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid #9db3ab;width:0;height:20px}
.org-box{display:inline-block;border:1.5px solid var(--forest);border-radius:var(--radius-sm);background:#fff;width:210px;text-align:left;padding:9px 10px 10px;box-shadow:0 1px 3px rgba(10,70,60,.1)}
.org-fn{background:var(--forest);color:#fff;font-weight:800;font-size:.74rem;letter-spacing:.3px;text-transform:uppercase;
  margin:-9px -10px 6px;padding:6px 10px;border-radius:6px 6px 0 0}
.org-name{font-weight:700;border-bottom:1.5px solid var(--forest);padding-bottom:3px;margin-bottom:6px;min-height:1.1em}
.org-roles{margin:0 0 6px;padding-left:16px;font-size:.79rem}
.org-roles li{margin-bottom:2px}
.org-badge{margin-bottom:4px}
.pb-form label { font-size: .9em; }