/* Cube Pasteur (Chiffres Pasteur v7) — système de design (brief docs/DESIGN.md, chantier DESIGN 06/11/2026).
   Un seul langage visuel : variables en tête (couleurs, typographie Inter, grille 8 px, rayons, états), puis composants
   (coque, tuiles, cartes, tableaux, formulaires, boutons, pastilles, états, panneau latéral, toasts), thèmes Tabulator / ECharts « cube »,
   utilitaires, page par page SEULEMENT quand une exception est justifiée (commentée), iPhone en dernier.
   Aucune valeur en dur dans les pages : tout passe par ces variables et ces classes. */

/* ======================================================================
   1. Fondations : variables
   ====================================================================== */
:root{
  /* Palette Pasteur */
  --vert-900:#0f2f27; --vert-800:#143d31; --vert-700:#1f5c48; --vert-500:#2a9d8f; --vert-100:#e8f5f2; --vert-200:#c9e6df;
  --sable:#d8cfa8; --or:#e9c46a; --or-100:#fdf6e3; --or-200:#f0d9a8; --or-900:#7a5a00;
  --rouge:#c0392b; --rouge-100:#fdecea; --rouge-200:#f3b9b2; --rouge-900:#7a241a; --vert-ok:#1e7f4f; --orange:#c9700c; --violet:#4a3a7a; --violet-100:#f2eefb; --violet-200:#b8a9d9;
  --g-900:#1c2422; --g-700:#2a3a35; --g-600:#5c6b66; --g-400:#8a9792; --g-300:#cfd8d3; --g-200:#e1e6e3; --g-150:#edf0ee; --g-100:#f3f5f4; --g-50:#f7f9f8; --blanc:#fff;
  /* Rôles (thème clair) */
  --fond:var(--g-100); --surface:var(--blanc); --surface-2:var(--g-50); --surface-3:var(--g-150);
  --texte:var(--g-900); --texte-2:var(--g-600); --texte-3:var(--g-400); --bord:var(--g-200); --bord-2:var(--g-300);
  --accent:var(--vert-500); --vert-texte:var(--vert-700); --primaire:var(--vert-700); --primaire-fonce:var(--vert-800); --titre:var(--vert-800);
  --side-fond:var(--vert-800); --side-texte:#cfe0d8; --side-texte-2:#8fb3a4; --side-actif:var(--vert-700); --side-bord:#2f6a56; --side-survol:rgba(255,255,255,.06);
  --focus:rgba(42,157,143,.45); --voile:rgba(20,61,49,.38); --ombre:0 8px 24px rgba(15,47,39,.14); --ombre-survol:0 2px 10px rgba(20,61,49,.10);
  /* Anciens noms (compatibilité des pages livrées avant le chantier DESIGN) */
  --vert-fonce:var(--vert-800); --vert:var(--vert-700); --vert-clair:var(--vert-500); --vert-pale:var(--vert-100);
  /* Typographie : Inter, échelle 11 / 12.5 / 13.5 / 15 / 18 / 22 / 28 */
  --police:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; --mono:ui-monospace,Menlo,Consolas,monospace;
  --fs-11:11px; --fs-12:12.5px; --fs-13:13.5px; --fs-15:15px; --fs-18:18px; --fs-22:22px; --fs-28:28px;
  /* Espacement (grille 8), rayons */
  --e1:8px; --e2:16px; --e3:24px; --gout:24px; --r-carte:10px; --r-btn:7px; --r-pill:18px;
  --largeur-side:232px; --largeur-side-replie:64px; --haut-top:56px;
  --vitesse:.15s;
}
/* Thème sombre (préférence système, sauf choix explicite clair) */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark;
  --fond:#0e1715; --surface:#172220; --surface-2:#1d2a27; --surface-3:#243330; --texte:#e6ece9; --texte-2:#9fb0aa; --texte-3:#6f807a; --bord:#27363200; --bord:#2a3a36; --bord-2:#3a4c47;
  --titre:#dff3ec; --vert-100:#1b3a33; --vert-200:#245247; --vert-texte:#8fd4c2; --or-100:#3a3118; --or-200:#5a4a1e; --or-900:#f0d58a; --rouge-100:#3d1f1b; --rouge-200:#5c2d27; --rouge-900:#f3b9b2; --violet-100:#2c2542; --violet-200:#4a3a7a; --violet:#c9bde8;
  --g-50:#1d2a27; --g-150:#243330; --side-fond:#0f1f1a; --side-bord:#24463b; --vert-ok:#4cc38a; --orange:#f0a24a; --rouge:#e3675a; --focus:rgba(42,157,143,.55); --voile:rgba(0,0,0,.55); --ombre:0 8px 24px rgba(0,0,0,.5); --ombre-survol:0 2px 10px rgba(0,0,0,.35); } }
:root[data-theme="dark"]{ color-scheme:dark;
  --fond:#0e1715; --surface:#172220; --surface-2:#1d2a27; --surface-3:#243330; --texte:#e6ece9; --texte-2:#9fb0aa; --texte-3:#6f807a; --bord:#2a3a36; --bord-2:#3a4c47;
  --titre:#dff3ec; --vert-100:#1b3a33; --vert-200:#245247; --vert-texte:#8fd4c2; --or-100:#3a3118; --or-200:#5a4a1e; --or-900:#f0d58a; --rouge-100:#3d1f1b; --rouge-200:#5c2d27; --rouge-900:#f3b9b2; --violet-100:#2c2542; --violet-200:#4a3a7a; --violet:#c9bde8;
  --g-50:#1d2a27; --g-150:#243330; --side-fond:#0f1f1a; --side-bord:#24463b; --vert-ok:#4cc38a; --orange:#f0a24a; --rouge:#e3675a; --focus:rgba(42,157,143,.55); --voile:rgba(0,0,0,.55); --ombre:0 8px 24px rgba(0,0,0,.5); --ombre-survol:0 2px 10px rgba(0,0,0,.35); }

/* ======================================================================
   2. Base
   ====================================================================== */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--police);font-size:var(--fs-13);line-height:1.45;color:var(--texte);background:var(--fond);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:var(--vert-texte);cursor:pointer;text-decoration:none}
a:hover{text-decoration:underline}
[v-cloak]{display:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
code{font-family:var(--mono);font-size:var(--fs-11);background:var(--surface-3);padding:1px 5px;border-radius:4px}
:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
::selection{background:var(--vert-200)}
.num,.tab td,.tabulator,.tuile-v,.kpi .v,.kpi .c{font-variant-numeric:tabular-nums}
svg.ico{width:16px;height:16px;flex:none;vertical-align:-3px;stroke-width:2}
.h-titre{font-size:var(--fs-22);font-weight:600;color:var(--titre);letter-spacing:-.01em}
.h-section{font-size:var(--fs-15);font-weight:600;color:var(--titre)}

/* ======================================================================
   3. Coque : barre latérale, barre du haut, contenu, mobile
   ====================================================================== */
.app{display:grid;grid-template-columns:var(--largeur-side) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--vitesse)}
.app.replie{grid-template-columns:var(--largeur-side-replie) minmax(0,1fr)}
.side{background:var(--side-fond);color:var(--side-texte);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.side .logo{display:flex;align-items:center;gap:10px;padding:12px 14px 8px;font-weight:700;color:#fff;font-size:var(--fs-15);white-space:nowrap;min-height:52px}
.side .logo i{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--or);color:var(--vert-800);font-style:normal;font-weight:800;font-size:13px;letter-spacing:.02em}
.side .logo small{display:block;font-size:10.5px;font-weight:500;color:var(--side-texte-2);letter-spacing:.04em}
.side nav{display:flex;flex-direction:column;gap:2px;padding:4px 10px}
.side .sec{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--side-texte-2);margin:10px 10px 3px;white-space:nowrap}
.side a{display:flex;align-items:center;gap:10px;color:var(--side-texte);padding:5px 10px;border-radius:7px;font-size:13px;line-height:1.5;white-space:nowrap;position:relative;text-decoration:none}
.side a:hover{background:var(--side-survol);text-decoration:none}
.side a.on{background:var(--side-actif);color:#fff;font-weight:600}
.side a.on:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--or)}
.side a .ico{width:17px;height:17px;stroke-width:1.9;opacity:.9}
.side a.sous{padding-left:28px;font-size:12.5px}
.side a.sous .ico{width:14px;height:14px}
.side a .b{margin-left:auto;background:var(--rouge);color:#fff;border-radius:10px;font-size:10.5px;padding:1px 7px;font-weight:600;line-height:16px}
.side a .b.or{background:var(--or);color:var(--vert-900)}
.side .bas{margin-top:auto;padding:10px 12px 12px 16px;font-size:11px;color:var(--side-texte-2);line-height:1.45;border-top:1px solid var(--side-bord);white-space:nowrap;display:flex;align-items:center;gap:8px}
.side .bas>div{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.side .bas b{color:var(--side-texte);font-weight:600}
.side .plier{background:none;border:1px solid var(--side-bord);color:var(--side-texte);border-radius:6px;padding:4px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.side .plier:hover{background:var(--side-survol)}
.app.replie .side .logo span,.app.replie .side .sec,.app.replie .side a span,.app.replie .side .bas>div{display:none}
.app.replie .side .logo{justify-content:center;padding:12px 0 8px}
.app.replie .side nav{padding:4px 8px}
.app.replie .side a{justify-content:center;padding:9px 0}
.app.replie .side a.sous{padding-left:0}
.app.replie .side a .b{position:absolute;top:2px;right:4px;padding:0 5px;font-size:9.5px;line-height:14px}
.app.replie .side a.on:before{left:-8px}
.app.replie .side .bas{justify-content:center;padding:10px 8px}
/* Info-bulle du menu replié */
.app.replie .side a[data-tip]:hover:after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--vert-900);color:#fff;padding:5px 9px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:300;box-shadow:var(--ombre);font-weight:500}
.voile{display:none}

.main{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.top{display:flex;align-items:center;gap:10px;padding:0 var(--gout);height:var(--haut-top);background:var(--surface);border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:40}
.top .titre{display:flex;flex-direction:column;justify-content:center;min-width:160px;flex:1 1 0;margin-right:8px}
.top .selecteurs,.top .assistant-btn,.top .chip-utilisateur,.top .search{flex:none}
.top .t{font-size:var(--fs-18);font-weight:600;color:var(--titre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.top .sp{flex:0 1 8px;min-width:8px}
.top .burger{display:none}
.btn-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-btn);border:1px solid transparent;background:none;color:var(--texte-2);flex:none}
.btn-ico:hover{background:var(--surface-2);color:var(--texte);border-color:var(--bord)}
.btn-ico .ico{width:18px;height:18px}
.progression{height:2px;background:transparent;position:sticky;top:var(--haut-top);z-index:39}
.progression.on{background:linear-gradient(90deg,var(--vert-500),var(--or),var(--vert-500));background-size:200% 100%;animation:glisse 1.2s linear infinite}
@keyframes glisse{from{background-position:0 0}to{background-position:200% 0}}
.content{padding:20px var(--gout) 32px;display:flex;flex-direction:column;gap:var(--e2);flex:1}
.content>.colonne{gap:var(--e2)}
.pied{font-size:var(--fs-11);color:var(--texte-3);margin-top:4px;line-height:1.5}
/* Fil d'Ariane */
.fil{display:flex;align-items:center;gap:4px;font-size:var(--fs-11);color:var(--texte-3);white-space:nowrap;overflow:hidden;line-height:1.2;margin-top:2px}
.fil a{color:var(--texte-2)}
.fil .ico{width:11px;height:11px;opacity:.7}
.fil b{color:var(--texte-2);font-weight:500}
/* Barre inférieure (iPhone) et feuille des sélecteurs */
.barre-bas{display:none}
.feuille-fond{position:fixed;inset:0;background:var(--voile);z-index:120;display:flex;align-items:flex-end}
.feuille{background:var(--surface);border-radius:14px 14px 0 0;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));width:100%;max-height:85vh;overflow:auto;display:flex;flex-direction:column;gap:12px;box-shadow:var(--ombre)}
.feuille .poignee{width:40px;height:4px;border-radius:2px;background:var(--bord-2);margin:0 auto 4px}
.feuille h4{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.06em;color:var(--texte-2);margin:4px 0 0}
.feuille .it{padding:9px 10px;border-radius:7px;display:flex;align-items:center;gap:8px;cursor:pointer}
.feuille .it.on{background:var(--vert-100);color:var(--vert-texte);font-weight:600}
.feuille .it small{color:var(--texte-3);margin-left:auto}
/* Palette de recherche (Ctrl+K) */
.palette-fond{position:fixed;inset:0;background:var(--voile);z-index:130;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.palette{background:var(--surface);border:1px solid var(--bord);border-radius:12px;width:640px;max-width:100%;box-shadow:var(--ombre);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.palette .saisie{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bord)}
.palette .saisie input{flex:1;border:none;background:none;font-size:var(--fs-15);outline:none;min-width:0}
.palette .saisie kbd{font-family:var(--police);font-size:10.5px;color:var(--texte-3);border:1px solid var(--bord-2);border-radius:4px;padding:1px 5px}
.palette .liste{overflow:auto;padding:6px}
.palette .cat{font-size:10.5px;color:var(--texte-3);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 2px}
.palette .it{padding:7px 10px;border-radius:7px;cursor:pointer;display:flex;gap:10px;align-items:center;font-size:var(--fs-13)}
.palette .it .ico{color:var(--texte-3);width:15px;height:15px}
.palette .it small{color:var(--texte-3);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.palette .it.on,.palette .it:hover{background:var(--vert-100);color:var(--vert-texte)}
.palette .vide{padding:20px}

/* ======================================================================
   4. Boutons, pastilles d'action, chips, champs
   ====================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--primaire);background:var(--primaire);color:#fff;border-radius:var(--r-btn);padding:6px 13px;font-weight:600;font-size:var(--fs-12);white-space:nowrap;line-height:1.3;transition:background var(--vitesse),box-shadow var(--vitesse);text-decoration:none}
.btn:hover{background:var(--primaire-fonce);border-color:var(--primaire-fonce);text-decoration:none}
.btn .ico{width:14px;height:14px}
.btn.o{background:var(--surface);color:var(--vert-texte);border-color:var(--vert-texte)}          /* secondaire (contour) */
.btn.o:hover{background:var(--vert-100)}
.btn.s{background:var(--surface);color:var(--texte);border-color:var(--bord-2);font-weight:500}  /* discret */
.btn.s:hover{background:var(--surface-2);border-color:var(--texte-3)}
.btn.t{background:none;border-color:transparent;color:var(--vert-texte);font-weight:500;padding-left:8px;padding-right:8px}  /* texte seul */
.btn.t:hover{background:var(--vert-100)}
.btn.r{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn.r:hover{filter:brightness(.92)}
.btn.p{padding:4px 9px;font-size:11.5px}
.btn.g{padding:9px 18px;font-size:var(--fs-13)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.ic{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--bord-2);border-radius:6px;padding:1px 7px;font-size:var(--fs-11);color:var(--texte-2);background:var(--surface-2);cursor:pointer;white-space:nowrap;line-height:1.5;text-decoration:none}
.ic .ico{width:12px;height:12px}
.ic:hover{background:var(--vert-100);color:var(--vert-texte);text-decoration:none}
.ic.ok{border-color:#9fd3c3;background:var(--vert-100);color:var(--vert-texte)}
.ic.ko{border-color:var(--rouge-200);background:var(--rouge-100);color:var(--rouge)}
.ic.att{border-color:var(--or-200);background:var(--or-100);color:var(--or-900)}
.ic.vif{border-color:var(--primaire);background:var(--primaire);color:#fff}
.ic.vif:hover{background:var(--primaire-fonce);color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bord-2);background:var(--surface);border-radius:var(--r-pill);padding:5px 12px;font-size:var(--fs-12);color:var(--texte);cursor:pointer;white-space:nowrap;position:relative;line-height:1.3}
.chip .ico{width:13px;height:13px;color:var(--texte-2)}
.chip:hover{border-color:var(--texte-3)}
.chip.v{border-color:var(--vert-500);background:var(--vert-100);color:var(--vert-texte);font-weight:600}
.chip.j{border-color:var(--or);background:var(--or-100);color:var(--or-900)}
.chip.r{border-color:var(--rouge-200);background:var(--rouge-100);color:var(--rouge)}
.chip.g{border-color:var(--bord-2);background:var(--surface-2);color:var(--texte-2)}
.chip x.suppr{margin-left:2px;font-style:normal}
.chip.normal{white-space:normal;line-height:1.35}
.inp{border:1px solid var(--bord-2);border-radius:var(--r-btn);padding:6px 10px;background:var(--surface);font-size:var(--fs-12);color:var(--texte);min-width:0;line-height:1.3;transition:border-color var(--vitesse),box-shadow var(--vitesse)}
.inp:hover{border-color:var(--texte-3)}
.inp:focus{outline:none;border-color:var(--vert-500);box-shadow:0 0 0 3px var(--focus)}
.inp.l{width:100%}
.inp:disabled{background:var(--surface-2);color:var(--texte-3)}
.inp.err{border-color:var(--rouge)}
select.inp{padding-right:26px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6b66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
textarea.inp{resize:vertical;line-height:1.45}
label.lab,.lab{font-size:var(--fs-11);color:var(--texte-2);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:4px;font-weight:500}
.champ{display:flex;flex-direction:column;gap:0;min-width:0}
.champ .aide{font-size:var(--fs-11);color:var(--texte-3);margin-top:3px}
.champ .erreur{font-size:var(--fs-11);color:var(--rouge);margin-top:3px}
.case{display:inline-flex;gap:6px;align-items:center;cursor:pointer;font-size:var(--fs-12)}
.case input{accent-color:var(--vert-500);margin:0}
input[type=checkbox],input[type=radio]{accent-color:var(--vert-500)}
.ligne{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.colonne{display:flex;flex-direction:column;gap:8px;min-width:0}
.sepv{width:1px;height:20px;background:var(--bord-2);display:inline-block;margin:0 4px}
x.suppr,.pill x{color:var(--texte-3);cursor:pointer;font-style:normal}
x.suppr:hover,.pill x:hover{color:var(--rouge)}

/* Menus déroulants des chips et des boutons */
.menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--bord);border-radius:9px;box-shadow:var(--ombre);z-index:60;min-width:240px;padding:6px;color:var(--texte);font-weight:400;text-align:left;cursor:default}
.menu .it,.menu a.it{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:var(--fs-12);display:flex;gap:8px;align-items:center;color:var(--texte);text-decoration:none}
.menu .it:hover{background:var(--vert-100);color:var(--vert-texte)}
.menu .it.on{font-weight:600;color:var(--vert-texte)}
.menu .it small{color:var(--texte-3);margin-left:auto}
.menu .sep{border-top:1px solid var(--bord);margin:6px 0}
.menu .bloc{padding:6px 10px;display:flex;flex-direction:column;gap:6px}
.menu .cat{font-size:10.5px;color:var(--texte-3);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 2px}
.menu-droite{left:auto;right:0}

/* ======================================================================
   5. Grilles, cartes, tuiles
   ====================================================================== */
.grid{display:grid;gap:var(--e2)}
.grid>*{min-width:0}
.g6{grid-template-columns:repeat(6,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.card,.carte{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);padding:var(--e2);min-width:0}
.card h3,.carte-t h3{font-size:var(--fs-13);font-weight:600;color:var(--titre);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;line-height:1.35}
.card h3 .x,.carte-x{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card.clic,.carte.clic{cursor:pointer;transition:box-shadow var(--vitesse),border-color var(--vitesse)}
.card.clic:hover,.carte.clic:hover{box-shadow:var(--ombre-survol);border-color:var(--vert-200)}
.carte-t{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.carte-t h3{margin:0}
.carte-titre{min-width:0;flex:1}
.carte-sous{font-size:var(--fs-11);color:var(--texte-3);margin-top:1px}
.carte-pied{font-size:var(--fs-11);color:var(--texte-3);margin-top:10px;line-height:1.5}
.carte-def{font-size:var(--fs-11);color:var(--texte-2);margin-top:8px}
.carte-def summary{cursor:pointer;color:var(--texte-3)}
.carte.plein{padding:0}
.carte.plein .carte-t{padding:12px var(--e2) 0}
.carte.plein .carte-pied{padding:0 var(--e2) 12px}
/* Tuile KPI */
.kpi .l,.tuile-l{font-size:var(--fs-11);color:var(--texte-2);text-transform:uppercase;letter-spacing:.06em;font-weight:500;display:flex;align-items:center;gap:5px;line-height:1.3}
.kpi .v,.tuile-v{font-size:var(--fs-28);font-weight:700;color:var(--titre);margin:6px 0 2px;white-space:nowrap;letter-spacing:-.02em;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.kpi .v small,.tuile-v small{font-size:var(--fs-12);color:var(--texte-2);font-weight:500;margin-left:5px;letter-spacing:0}
.kpi .c,.tuile-c{font-size:var(--fs-12);color:var(--texte-2);line-height:1.4;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tuile{position:relative;overflow:hidden;container-type:inline-size}
@container (max-width:200px){.tuile-v{font-size:var(--fs-22)}}
@container (max-width:160px){.tuile-v{font-size:20px}}
@container (max-width:130px){.tuile-v{font-size:var(--fs-18)}}
.tuile.clic{cursor:pointer}
.tuile .spark{display:block;width:100%;height:26px;margin-top:8px;opacity:.9}
.tuile .spark polyline{fill:none;stroke:var(--vert-500);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.tuile .spark polygon{fill:var(--vert-500);opacity:.12}
.tuile .spark circle{fill:var(--vert-500)}
.tuile.compacte{padding:10px 12px}
.tuile.compacte .tuile-v{font-size:var(--fs-18);margin:3px 0 1px}
.tuile.compacte .tuile-l{font-size:10.5px}
.tuile.compacte .tuile-c{font-size:var(--fs-11)}
.tuile.compacte .spark{height:18px;margin-top:5px}
.tuile .tuile-l .ico{width:12px;height:12px;color:var(--texte-3);cursor:help}
.kpi.l-moyen .v{font-size:var(--fs-22)}
.kpi.l-petit .v{font-size:var(--fs-18)}
.up{color:var(--vert-ok);font-weight:600}.dn{color:var(--rouge);font-weight:600}.neutre{color:var(--texte-2);font-weight:600}
.up .ico,.dn .ico,.neutre .ico{width:13px;height:13px;vertical-align:-2px}
.num{font-variant-numeric:tabular-nums;text-align:right}
.gris{color:var(--texte-3)}
.petit{font-size:var(--fs-11);color:var(--texte-2)}
.mono{font-family:var(--mono)}

/* ======================================================================
   6. Tableaux HTML sobres + Tabulator (thème « cube »)
   ====================================================================== */
table.tab{border-collapse:collapse;width:100%;font-size:var(--fs-12);font-variant-numeric:tabular-nums}
.tab th,.tab td{padding:6px 8px;border-bottom:1px solid var(--g-150);text-align:right;white-space:nowrap;vertical-align:middle}
.tab th{color:var(--texte-2);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;background:var(--surface-2);position:sticky;top:0;z-index:1}
.tab th:first-child,.tab td:first-child{text-align:left}
.tab td.g,.tab th.g{text-align:left}
.tab td.normal{white-space:normal}
.tab tr.tot td{font-weight:700;border-top:2px solid var(--titre);background:var(--surface-2)}
.tab tr.st td{color:var(--texte-2);background:var(--surface-2);font-weight:600}
.tab tr.clic{cursor:pointer}.tab tr.clic:hover td{background:var(--surface-2)}
.tab tr.on td{background:var(--vert-100)}
.tab tr.alerte td{background:var(--rouge-100)}
.tab tr.rub td{background:var(--surface-2);border-top:1px solid var(--bord-2)}
.tab tr.gris td{color:var(--texte-3)}
.tab .ic{vertical-align:middle}
.tab.compact th,.tab.compact td{padding:3px 6px}
/* Densité compacte (menu utilisateur) : tableaux et tuiles resserrés */
[data-densite="compacte"] .tab th,[data-densite="compacte"] .tab td{padding:3px 6px}
[data-densite="compacte"] .tabulator-row{min-height:22px}
[data-densite="compacte"] .tabulator-row .tabulator-cell{padding:2px 6px}
[data-densite="compacte"] .card,[data-densite="compacte"] .carte{padding:12px}
[data-densite="compacte"] .content{gap:12px}
.defile{overflow-x:auto;max-width:100%}
.bar{display:inline-block;height:8px;background:var(--vert-500);border-radius:3px;vertical-align:middle;opacity:.85}
.part{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.part i{display:inline-block;height:7px;width:60px;background:var(--g-150);border-radius:3px;overflow:hidden;position:relative}
.part i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--vert-500);border-radius:3px}
/* Tabulator */
.tabulator{font-size:var(--fs-12);border:none;background:var(--surface);font-variant-numeric:tabular-nums;font-family:inherit;color:var(--texte)}
.tabulator .tabulator-header{background:var(--surface-2);border-bottom:1px solid var(--bord);color:var(--texte-2);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.tabulator .tabulator-header .tabulator-col{background:var(--surface-2);border-right:1px solid var(--g-150)}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:7px 8px}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{background:var(--surface-3)}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{color:var(--texte-3)}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom-color:var(--vert-500)}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top-color:var(--vert-500)}
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid var(--g-150)}
.tabulator .tabulator-header .tabulator-col.tabulator-col-group>.tabulator-col-content{text-align:center;background:var(--vert-100);text-transform:none;font-size:var(--fs-12);color:var(--vert-texte)}
.tabulator-row{border-bottom:1px solid var(--g-150);min-height:28px;background:var(--surface);color:var(--texte)}
.tabulator-row.tabulator-row-even{background:var(--surface)}
.tabulator-row:hover{background:var(--surface-2) !important}
.tabulator-row .tabulator-cell{padding:5px 8px;border-right:1px solid var(--g-150)}
.tabulator-row .tabulator-cell.cell-num{text-align:right}
.tabulator-row .tabulator-frozen{background:inherit}
.tabulator-row .tabulator-frozen.tabulator-frozen-left{border-right:2px solid var(--bord-2)}
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid var(--bord-2)}
.tabulator .tabulator-footer{background:var(--surface-2);border-top:1px solid var(--bord);font-weight:400;padding:4px 8px;color:var(--texte)}
.tabulator .tabulator-footer .tabulator-calcs-holder{background:var(--surface-2) !important;border-top:2px solid var(--titre) !important;border-bottom:none !important}
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:var(--surface-2) !important;font-weight:700}
.tabulator .tabulator-footer .tabulator-page{border:1px solid var(--bord-2);border-radius:5px;background:var(--surface);color:var(--texte);font-size:var(--fs-12);padding:3px 8px;margin:0 2px}
.tabulator .tabulator-footer .tabulator-page.active{background:var(--primaire);color:#fff;border-color:var(--primaire)}
.tabulator .tabulator-footer .tabulator-page-size{border:1px solid var(--bord-2);border-radius:5px;padding:2px 6px;background:var(--surface);color:var(--texte)}
.tabulator .tabulator-footer .tabulator-paginator{color:var(--texte-2)}
.tabulator-row.tabulator-tree-level-0{font-weight:600;background:var(--surface-2)}
.tabulator-row.tabulator-tree-level-1{font-weight:500}
.tabulator-row.tabulator-tree-level-2,.tabulator-row.tabulator-tree-level-3{color:var(--texte)}
.tabulator-row .tabulator-data-tree-control{border-color:var(--vert-500);color:var(--vert-500);background:var(--surface)}
.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:var(--vert-500)}
.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:var(--vert-500)}
.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{color:var(--texte-3);font-size:var(--fs-12);font-weight:400;background:none}
.tabulator .tabulator-tableholder{background:var(--surface)}
.tabulator.compacte .tabulator-row{min-height:22px}
.tabulator.compacte .tabulator-row .tabulator-cell{padding:2px 6px}
.mf-rouge{color:var(--rouge);font-weight:600}.mf-vert{color:var(--vert-ok);font-weight:600}.mf-orange{color:var(--orange);font-weight:600}.mf-gras{font-weight:700;color:var(--texte)}
.controle-ok{color:var(--vert-ok);font-weight:600}.controle-ko{color:var(--rouge);font-weight:600}

/* ======================================================================
   7. États : chargement, squelettes, vide, erreur, bandeaux, toasts
   ====================================================================== */
.chargement{color:var(--texte-2);font-size:var(--fs-12);padding:10px 0;display:flex;align-items:center;gap:8px}
.chargement:before{content:"";width:14px;height:14px;border:2px solid var(--bord-2);border-top-color:var(--vert-500);border-radius:50%;animation:tourne .8s linear infinite;display:inline-block;flex:none}
@keyframes tourne{to{transform:rotate(360deg)}}
.squelette{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.squelette i,.sq{display:block;height:12px;border-radius:5px;background:linear-gradient(90deg,var(--g-150) 25%,var(--surface-3) 37%,var(--g-150) 63%);background-size:400% 100%;animation:brille 1.4s ease infinite}
.squelette i.l28{height:26px;width:60%}.squelette i.l18{height:18px;width:45%}.squelette i.l12{height:12px;width:80%}.squelette i.l12b{height:12px;width:55%}.squelette i.ligne{height:28px;width:100%;border-radius:4px}
@keyframes brille{0%{background-position:100% 0}100%{background-position:0 0}}
.vide,.etat-vide{color:var(--texte-3);font-size:var(--fs-12);padding:20px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.etat-vide .ico{width:26px;height:26px;color:var(--bord-2);stroke-width:1.5}
.etat-vide p{max-width:420px;line-height:1.5}
.bandeau{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:8px;background:var(--or-100);border:1px solid var(--or-200);font-size:var(--fs-12);color:var(--texte);line-height:1.45}
.bandeau b{color:var(--or-900);white-space:nowrap}
.bandeau.r{background:var(--rouge-100);border-color:var(--rouge-200);color:var(--rouge-900)}
.bandeau.r b{color:var(--rouge)}
.bandeau.v{background:var(--vert-100);border-color:var(--vert-200);color:var(--vert-texte)}
.bandeau.v b{color:var(--vert-texte)}
.bandeau.i{background:var(--surface-2);border-color:var(--bord)}
.bandeau.i b{color:var(--titre)}
.bandeau>.ico{width:15px;height:15px;flex:none;margin-top:1px}
.bandeau span{flex:1;min-width:0}
.bandeau .fermer{margin-left:auto;background:none;border:none;color:inherit;font-size:16px;line-height:1;padding:0 4px;opacity:.7}
.bandeau .fermer:hover{opacity:1}
.bandeau .btn{margin-left:auto;flex:none}
.bandeaux{position:sticky;top:calc(var(--haut-top) + 2px);z-index:30;display:flex;flex-direction:column;gap:6px;padding:8px var(--gout) 0}
.bandeaux:empty{display:none}
.help{font-size:var(--fs-12);color:var(--texte-2);padding:8px 12px;border-left:3px solid var(--or);background:var(--or-100);border-radius:0 6px 6px 0;line-height:1.5}
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--vert-900);color:#fff;border-radius:9px;padding:10px 12px;font-size:var(--fs-12);box-shadow:var(--ombre);animation:monte .18s ease-out;line-height:1.4}
.toast .ico{width:15px;height:15px;flex:none;margin-top:1px;color:var(--or)}
.toast.r{background:var(--rouge)}.toast.r .ico{color:#fff}
.toast.j{background:var(--or-900)}.toast.j .ico{color:var(--or)}
.toast a{color:#fff;text-decoration:underline}
.toast .fermer{margin-left:auto;background:none;border:none;color:#fff;opacity:.7;padding:0 2px;font-size:15px;line-height:1}
@keyframes monte{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.etapes-long{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-12);color:var(--texte-2)}
.etapes-long div{display:flex;gap:8px;align-items:center}
.etapes-long .ok{color:var(--vert-ok)}

/* ======================================================================
   8. Pastilles / badges
   ====================================================================== */
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-pill);padding:2px 9px;font-size:var(--fs-11);font-weight:600;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.badge .ico{width:11px;height:11px}
.badge.gris,.badge.brouillon,.badge.neutre{background:var(--surface-3);color:var(--texte-2);border-color:var(--bord)}
.badge.or,.badge.verification,.badge.att,.badge.complet,.badge.a_confirmer{background:var(--or-100);color:var(--or-900);border-color:var(--or-200)}
.badge.vert,.badge.valide,.badge.ok,.badge.ajour{background:var(--vert-100);color:var(--vert-texte);border-color:var(--vert-200)}
.badge.fonce,.badge.arrete{background:var(--vert-800);color:#fff;border-color:var(--vert-800)}
.badge.sombre,.badge.archive{background:var(--g-600);color:#fff;border-color:var(--g-600)}
.badge.rouge,.badge.ko,.badge.erreur{background:var(--rouge-100);color:var(--rouge);border-color:var(--rouge-200)}
.badge.violet,.badge.non_additif{background:var(--violet-100);color:var(--violet);border-color:var(--violet-200)}

/* ======================================================================
   9. Panneaux, onglets, zones, arbre, modale, drawer
   ====================================================================== */
.panel{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);overflow:hidden;min-width:0}
.panel h4{margin:0;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--bord);font-size:var(--fs-11);color:var(--titre);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px;font-weight:600}
.panel h4 .x{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;color:var(--texte-2);display:flex;gap:6px;align-items:center}
.panel .corps{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.panel.debord{overflow:visible}
.panel .recherche{padding:8px 10px 0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--bord);padding:0 4px;overflow-x:auto;scrollbar-width:none;align-items:center}
.tabs>span{padding:9px 12px;font-size:var(--fs-12);color:var(--texte-2);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.tabs>span:hover{color:var(--texte)}
.tabs>span.on{color:var(--titre);border-color:var(--vert-500);font-weight:600}
.tabs>span .ic,.tabs>span .badge{margin-left:2px}
.tabs .fin{margin-left:auto;border:none;padding:4px 0;display:flex;gap:6px;align-items:center}
.tabs.secondaires{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);padding:0 8px}
.tabs.pilules{border:none;gap:6px;padding:0}
.tabs.pilules>span{border:1px solid var(--bord-2);border-radius:var(--r-pill);padding:4px 12px;margin:0;background:var(--surface)}
.tabs.pilules>span.on{background:var(--vert-800);color:#fff;border-color:var(--vert-800)}
.meta{display:flex;gap:16px;font-size:var(--fs-11);color:var(--texte-2);padding:8px 12px;background:var(--surface-2);border-top:1px solid var(--bord);flex-wrap:wrap;align-items:center}
.sql{font-family:var(--mono);font-size:var(--fs-12);white-space:pre-wrap;background:var(--surface-2);padding:10px 12px;margin:0;border-radius:6px;max-height:300px;overflow:auto;color:var(--texte)}
.outils{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);padding:8px 12px}
.barre-actions{position:sticky;bottom:0;z-index:35;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);padding:8px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;box-shadow:0 -4px 16px rgba(15,47,39,.06)}
.barre-actions .sp{flex:1}
/* Zones de composition (constructeur, explorateur) */
.zone{border:1.5px dashed var(--bord-2);border-radius:8px;padding:8px 10px;min-height:44px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--surface-2)}
.zone .lab{font-size:var(--fs-11);color:var(--texte-2);text-transform:uppercase;letter-spacing:.05em;width:76px;flex:none;margin:0}
.zone.haut{align-items:flex-start}
.zone.jointure{background:var(--or-100);border-color:var(--or-200)}
.zone.survol,.zone-items.survol{background:var(--vert-100);border-color:var(--vert-500)}
.zone-items{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:26px;min-width:40px}
.zone-items.niveaux .pill+.pill:before{content:"›";color:var(--texte-3);margin-right:4px;font-weight:400}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--bord-2);border-radius:14px;padding:3px 10px;font-size:var(--fs-12);cursor:default;position:relative;line-height:1.4;color:var(--texte)}
.pill.m{border-color:var(--vert-500);background:var(--vert-100);color:var(--vert-texte);font-weight:600}
.pill.a{border-color:var(--or);background:var(--or-100);color:var(--or-900);font-weight:600}
.pill.f{border-color:var(--bord-2);background:var(--surface-3);color:var(--texte-2)}
.pill.c{border-color:var(--violet-200);background:var(--violet-100);color:var(--violet);font-weight:600}
.pill.g{border-color:var(--bord);background:var(--surface-3);color:var(--texte-3)}
.pill.drag,.pill.poignee{cursor:grab}
.pill .niv{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--or);color:var(--vert-900);font-size:10px;text-align:center;line-height:16px;font-style:normal;font-weight:700}
.pill x.plus{font-weight:700;letter-spacing:1px}
.pill.case{cursor:pointer}
.fantome{opacity:.4;background:var(--vert-100) !important;border:1.5px dashed var(--vert-500) !important;border-radius:8px}
.choisi{box-shadow:0 2px 8px rgba(20,61,49,.25)}
.menu-axe{top:26px;left:0;min-width:260px}
.menu-export{top:30px;left:auto;right:0;min-width:300px}
.menu-export .bloc{gap:4px}
.filtre{display:grid;grid-template-columns:minmax(120px,1.2fr) 110px minmax(140px,2fr) 28px;gap:6px;align-items:center}
.valeurs{border:1px solid var(--bord-2);border-radius:6px;max-height:160px;overflow:auto;padding:4px 8px;background:var(--surface);font-size:var(--fs-12);margin-top:4px}
.valeurs label{display:flex;gap:6px;align-items:center;padding:2px 0;cursor:pointer}
.barre-prog{height:8px;background:var(--g-150);border-radius:4px;overflow:hidden;width:220px}
.barre-prog i{display:block;height:100%;background:var(--vert-500);transition:width .3s}
.graph{height:300px;width:100%}
.graph.petit{height:220px}
.graph.grand{height:360px}
.graph.tres-grand{height:440px}
.info{cursor:help}
.lignes-select{border:1px solid var(--bord-2);border-radius:6px;max-height:220px;overflow:auto;background:var(--surface)}
.lignes-select .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-2);padding:6px 8px 2px;background:var(--surface-2);position:sticky;top:0}
.lignes-select label{display:flex;gap:6px;align-items:center;padding:3px 8px;cursor:pointer;font-size:var(--fs-12)}
.lignes-select label:hover{background:var(--vert-100)}
.calcul{border:1px solid var(--bord);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2)}
.calcul textarea{font-family:var(--mono);font-size:var(--fs-12)}
.codes{max-height:110px;overflow:auto;gap:4px}
.codes .ic{font-family:var(--mono);font-size:var(--fs-11)}
/* Arbre (catalogue, explorateur, regroupements) */
.tree{padding:6px 8px;font-size:var(--fs-12);line-height:1.75;max-height:70vh;overflow:auto}
.tree .d{font-weight:600;color:var(--titre);cursor:pointer;display:flex;gap:6px;align-items:center;padding:2px 4px;border-radius:5px}
.tree .d:hover{background:var(--surface-2)}
.tree .d .ico{width:13px;height:13px;color:var(--texte-3);transition:transform var(--vitesse)}
.tree .d.ouvert .ico{transform:rotate(90deg)}
.tree .d small{color:var(--texte-3);font-weight:400;margin-left:auto}
.tree .t{padding:1px 6px 1px 18px;color:var(--texte);cursor:pointer;display:flex;gap:6px;align-items:center;border-radius:5px}
.tree .t:hover{background:var(--surface-2)}
.tree .t.on{background:var(--vert-100);font-weight:600;color:var(--vert-texte)}
.tree .t small{color:var(--texte-3);font-weight:400}
.tree .c{padding-left:30px;color:var(--texte);display:flex;gap:6px;align-items:center}
.tree .c.k .ico-cle{width:11px;height:11px;color:var(--or-900)}
.tree .c.s{color:var(--texte-3)}
.tree .c.drag{cursor:grab}
.tree .c label{cursor:pointer;display:flex;gap:6px;align-items:center;flex:1;min-width:0}
.tree .c label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cols3{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--e2);align-items:start}
.cols3>*{min-width:0}
.contents{display:contents}
.pleine-ligne{flex-basis:100%}
.cols-constructeur{display:grid;grid-template-columns:250px 320px minmax(0,1fr);gap:var(--e2);align-items:start}
.cols-constructeur>*{min-width:0}
.cols-constructeur.replie{grid-template-columns:250px 44px minmax(0,1fr)}
.cols-constructeur .zones-repliees{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;min-height:200px}
.cols-constructeur .zones-repliees .vertical{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.06em;color:var(--texte-2);font-weight:600}
.menu.haut{top:auto;bottom:calc(100% + 6px)}
@media (max-width:1280px){.cols-constructeur,.cols-constructeur.replie{grid-template-columns:260px minmax(0,1fr)}.cols-constructeur .apercu{grid-column:1/-1}}
/* Modale */
.modale-fond{position:fixed;inset:0;background:var(--voile);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modale{background:var(--surface);border-radius:12px;padding:18px 20px;width:480px;max-width:100%;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:10px;box-shadow:var(--ombre);border:1px solid var(--bord)}
.modale h3{color:var(--titre);font-size:var(--fs-15);font-weight:600}
.modale.large{width:760px}
.modale .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
/* Panneau latéral (drawer) */
.drawer-fond{position:fixed;inset:0;background:var(--voile);z-index:110;display:flex;justify-content:flex-end}
.drawer{background:var(--surface);width:520px;max-width:100%;height:100%;display:flex;flex-direction:column;box-shadow:var(--ombre);animation:glisse-g .18s ease-out;border-left:1px solid var(--bord)}
.drawer.large{width:860px}
.drawer-t{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bord);background:var(--surface-2)}
.drawer-t h3{font-size:var(--fs-15);font-weight:600;color:var(--titre);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-t .sous{font-size:var(--fs-11);color:var(--texte-3);font-weight:400}
.drawer-corps{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.drawer-pied{padding:10px 16px;border-top:1px solid var(--bord);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2)}
@keyframes glisse-g{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
details summary::-webkit-details-marker{color:var(--vert-500)}
details.panel summary{cursor:pointer;list-style:none}
details.panel summary h4:before{content:"▸ ";color:var(--vert-500)}
details.panel[open] summary h4:before{content:"▾ "}
details.sobre summary{cursor:pointer;font-weight:600;color:var(--titre);font-size:var(--fs-12)}

/* ======================================================================
   10. Pages — styles conservés seulement quand la structure l'exige
   ====================================================================== */
/* Assistant : fil centré 800 px, bulles sobres */
.assistant{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--e2);min-height:calc(100vh - 120px);align-items:stretch}
.assistant.replie{grid-template-columns:44px minmax(0,1fr)}
.assistant .convs{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.assistant .convs .entete{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--bord);background:var(--surface-2)}
.assistant .convs .entete .t{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.06em;color:var(--titre);font-weight:600;flex:1}
.assistant.replie .convs .entete{justify-content:center;padding:8px 4px}
.assistant .convs .liste{overflow:auto;flex:1}
.assistant .conv{padding:8px 12px;border-bottom:1px solid var(--g-150);cursor:pointer;position:relative}
.assistant .conv:hover{background:var(--surface-2)}
.assistant .conv.on{background:var(--vert-100)}
.assistant .conv .titre{font-size:var(--fs-12);font-weight:600;color:var(--titre);padding-right:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assistant .conv .sous{font-size:var(--fs-11);color:var(--texte-3)}
.assistant .conv .fermer{position:absolute;right:6px;top:6px;background:none;border:none;color:var(--texte-3);padding:0 4px;line-height:1}
.assistant .conv .fermer:hover{color:var(--rouge)}
.assistant .fil-ia{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.assistant .messages{flex:1;overflow:auto;padding:20px 16px;display:flex;flex-direction:column;gap:14px;min-height:300px;align-items:center}
.assistant .messages>*{width:100%;max-width:800px}
.assistant .accueil{margin:auto;max-width:640px;text-align:center;display:flex;flex-direction:column;gap:10px;padding:20px 0;align-items:center}
.assistant .accueil h3{color:var(--titre);font-size:var(--fs-18);font-weight:600}
.assistant .accueil .ico{width:30px;height:30px;color:var(--vert-500);stroke-width:1.5}
.assistant .suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.assistant .sugg{border:1px solid var(--bord-2);background:var(--surface);color:var(--texte);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--fs-12);cursor:pointer}
.assistant .sugg:hover{border-color:var(--vert-500);background:var(--vert-100);color:var(--vert-texte)}
.assistant .msg{display:flex}
.assistant .msg.moi{justify-content:flex-end}
.assistant .bulle{max-width:100%;border-radius:12px;padding:10px 14px;font-size:var(--fs-13);line-height:1.5;min-width:0}
.assistant .msg.moi .bulle{background:var(--vert-800);color:#fff;border-bottom-right-radius:3px;white-space:pre-wrap;max-width:85%}
.assistant .msg.ia .bulle{background:var(--surface-2);border:1px solid var(--bord);border-bottom-left-radius:3px;width:100%}
.assistant .texte p{margin:0 0 6px}.assistant .texte p:last-child{margin:0}.assistant .texte ul{margin:4px 0;padding-left:18px}
.assistant .action{margin:6px 0 4px}
.assistant .resultat{background:var(--surface);border:1px solid var(--bord);border-radius:8px;margin-top:8px;overflow:hidden}
.assistant .resultat .entete-res{padding:8px 10px 4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.assistant .resultat .boutons{padding:6px 8px;border-top:1px solid var(--bord);background:var(--surface-2)}
.assistant .resultat details{padding:4px 10px}
.assistant .resume{margin-top:6px;white-space:pre-wrap}
.assistant .etapes{margin-top:6px}
.assistant .etapes div{padding:2px 0}
.assistant .date{text-align:right;margin-top:4px}
.assistant .msg.moi .date{color:var(--side-texte)}
.assistant .saisie{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--bord);align-items:flex-end;justify-content:center}
.assistant .saisie>*{max-width:800px}
.assistant .saisie textarea{flex:1;resize:vertical;min-height:44px}
.assistant .mention{font-size:var(--fs-11);color:var(--texte-3);padding:6px 16px 8px;background:var(--surface-2);border-top:1px solid var(--bord);text-align:center}
/* Regroupements */
.regroupements .tree .t{flex-wrap:wrap;row-gap:0}
.regroupements .tree .t>span{width:100%;line-height:1.4;padding-top:3px}
.regroupements .tree .t .badge{margin-left:auto}
.regroupements .lignes-valeurs{max-height:56vh;overflow:auto}
.regroupements table.tab td{white-space:normal}
/* Comptabilité */
.compta .tab.bilan td:first-child{white-space:normal;min-width:200px}
.compta .selecteurs{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tab.capacite td{padding:3px 6px}
/* Rapports : aperçu A4 centré + panneau d'actions */
.rapport-vue{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--e2);align-items:start}
.rapport-vue .apercu{min-height:70vh;background:var(--surface-3);padding:20px;display:flex;justify-content:center;border-radius:var(--r-carte);border:1px solid var(--bord);overflow:auto}
.rapport-vue .apercu iframe{width:210mm;max-width:100%;height:calc(100vh - 190px);min-height:600px;border:none;background:#fff;display:block;box-shadow:0 6px 24px rgba(0,0,0,.14);border-radius:2px}
.blocs-comm{max-height:60vh;overflow:auto}
.blocs-comm .sec-titre{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.05em;color:var(--texte-2);margin-top:6px;font-weight:600}
.blocs-comm .bloc-comm{display:flex;flex-direction:column;gap:4px;padding:4px 0;border-bottom:1px solid var(--g-150)}
ul.blocs{margin:4px 0 6px;padding-left:16px;font-size:var(--fs-12);line-height:1.7}
/* Scénarios */
.curseurs{display:flex;flex-direction:column;gap:10px}
.curseur{padding:8px 10px;border:1px solid var(--bord);border-radius:8px;background:var(--surface-2)}
.curseur .val{font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.curseur input[type=range]{accent-color:var(--vert-500);flex:1}
/* Recouvrement : historique */
.histo{display:flex;flex-direction:column;gap:0;max-height:300px;overflow:auto}
.histo>div{border-bottom:1px solid var(--g-150);padding:6px 0;font-size:var(--fs-12)}
/* Connexion */
.connexion{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--vert-900),var(--vert-700) 60%,var(--vert-500));padding:16px}
.connexion .boite{background:var(--surface);border-radius:14px;padding:28px 30px;width:380px;max-width:100%;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.connexion .logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--titre);font-size:var(--fs-18);margin-bottom:4px}
.connexion .logo i{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:var(--or);color:var(--vert-800);font-style:normal;font-weight:800;font-size:14px}
.connexion input{border:1px solid var(--bord-2);border-radius:var(--r-btn);padding:9px 11px;font-size:14px;width:100%;background:var(--surface)}
.connexion input:focus{outline:none;border-color:var(--vert-500);box-shadow:0 0 0 3px var(--focus)}
.connexion .btn{padding:10px;font-size:14px}
/* Tableau de rapports / vues (lignes cliquables avec actions à droite) */
.actions-ligne{display:inline-flex;gap:4px;justify-content:flex-end;flex-wrap:nowrap}

/* ======================================================================
   11. Utilitaires (remplacent les styles inline des pages)
   ====================================================================== */
.flex1{flex:1;min-width:0}.flex2{flex:2;min-width:0}.sp{flex:1}
.jc-end{justify-content:flex-end}.jc-sb{justify-content:space-between}.ai-start{align-items:flex-start}.nowrap{flex-wrap:nowrap}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.ml4{margin-left:4px}.ml8{margin-left:8px}.mla{margin-left:auto}
.p0{padding:0}.p8{padding:8px}.p12{padding:12px}.px12{padding-left:12px;padding-right:12px}.pb8{padding-bottom:8px}
.ta-c{text-align:center}.ta-r{text-align:right}.normal{white-space:normal}.pre{white-space:pre-wrap}
.w60{width:60px}.w70{width:70px}.w110{width:110px}.w120{width:120px}.w150{width:150px}.w170{width:170px}.w180{width:180px}.w200{width:200px}.w220{width:220px}.w240{width:240px}.w260{width:260px}.w320{width:320px}
.maxw200{max-width:200px}.maxw220{max-width:220px;overflow:hidden;text-overflow:ellipsis}.maxw320{max-width:320px}.maxw360{max-width:360px}.maxw420{max-width:420px}.maxw640{max-width:640px}
.minw160{min-width:160px}.minw180{min-width:180px}.minw200{min-width:200px}.minw240{min-width:240px}
.gap4{gap:4px}.gap6{gap:6px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}
.rouge{color:var(--rouge)}.vert{color:var(--vert-ok)}.titre-c{color:var(--titre)}
.fs-11{font-size:var(--fs-11)}.fs-12{font-size:var(--fs-12)}.fs-15{font-size:var(--fs-15)}.fs-18{font-size:var(--fs-18)}.fs-22{font-size:var(--fs-22)}
.gras{font-weight:600}.gras7{font-weight:700}.maj{text-transform:uppercase;letter-spacing:.05em}
.defilant{max-height:40vh;overflow:auto}.defilant-260{max-height:260px;overflow:auto}
.seul-sm{display:none !important}.ordre2{order:2}
.masque{visibility:hidden}

/* ======================================================================
   12. iPhone / petits écrans
   ====================================================================== */
@media (max-width:1100px){
  .g6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  :root{--gout:16px;--haut-top:52px}
  .app,.app.replie{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:272px;z-index:200;transform:translateX(-100%);transition:transform .2s;height:100vh;height:100dvh}
  .app.menu-ouvert .side{transform:none}
  .app.replie .side .logo span,.app.replie .side .sec,.app.replie .side a span{display:initial}
  .app.replie .side .bas>div{display:block}
  .app.replie .side .logo{justify-content:flex-start;padding:12px 14px 8px}
  .app.replie .side nav{padding:4px 10px}
  .app.replie .side a{justify-content:flex-start;padding:7px 10px}
  .app.replie .side a.sous{padding-left:28px}
  .app.replie .side a .b{position:static;padding:1px 7px;font-size:10.5px;line-height:16px}
  .app.replie .side a[data-tip]:hover:after{display:none}
  .side .plier{display:none}
  .app.menu-ouvert .voile{display:block;position:fixed;inset:0;background:var(--voile);z-index:150}
  .burger{display:inline-flex}
  .top{padding:0 12px;gap:6px}
  .top .t{font-size:var(--fs-15)}
  .top .titre{flex:1}
  .top .selecteurs,.top .search,.top .assistant-btn,.top .chip-utilisateur,.top .btn-theme{display:none}
  .content{padding:12px 12px calc(72px + env(safe-area-inset-bottom,0px))}
  .bandeaux{padding:8px 12px 0}
  .g6{grid-template-columns:1fr 1fr}.g4,.g3,.g2,.g21,.g12{grid-template-columns:1fr 1fr}
  .cols3,.cols-constructeur{grid-template-columns:1fr}
  .tree{max-height:40vh}
  .kpi .v,.tuile-v{font-size:var(--fs-22)}
  .tuile .spark{height:20px}
  .filtre{grid-template-columns:1fr 1fr;grid-auto-rows:auto;padding-bottom:8px;border-bottom:1px dashed var(--bord-2)}
  .filtre>div{grid-column:1/-1}
  .filtre .btn{grid-column:1/-1;justify-self:end}
  .menu{left:auto;right:0}
  .tabs{flex-wrap:nowrap}
  .assistant,.assistant.replie{grid-template-columns:1fr;min-height:auto}
  .assistant .convs{max-height:200px}
  .assistant.replie .convs{max-height:44px}
  .assistant .messages{min-height:220px;max-height:62vh;padding:10px}
  .assistant .msg.moi .bulle{max-width:100%}
  .assistant .saisie{padding:8px 10px}
  .outils{padding:6px 8px}
  .menu-axe{left:0;right:auto;min-width:230px}
  .modale.large{width:100%}
  .drawer,.drawer.large{width:100%}
  .rapport-vue{grid-template-columns:1fr}
  .rapport-vue .apercu{padding:8px}
  .rapport-vue .apercu iframe{height:70vh;min-height:420px}
  .barre-actions{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .toasts{right:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  /* Barre inférieure : 5 entrées */
  .barre-bas{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--bord);z-index:140;justify-content:space-around;align-items:stretch}
  .barre-bas a,.barre-bas button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--texte-2);text-decoration:none;background:none;border:none;padding:4px 2px;font-weight:500;position:relative}
  .barre-bas .ico{width:20px;height:20px;stroke-width:1.9}
  .barre-bas .on{color:var(--vert-700);font-weight:600}
  .barre-bas .on .ico{color:var(--vert-500)}
  .barre-bas .b{position:absolute;top:4px;right:calc(50% - 18px);background:var(--rouge);color:#fff;border-radius:8px;font-size:9px;padding:0 4px;line-height:14px}
  .cache-sm{display:none !important}
  .seul-sm{display:inline-flex !important}
}
@media (max-width:520px){
  .g6,.g4,.g3,.g2,.g21,.g12{grid-template-columns:1fr 1fr;gap:10px}
  .g3,.g2,.g21,.g12{grid-template-columns:1fr}
  .card,.carte{padding:12px}
  .zone .lab{width:100%}
  .w220,.w240,.w260,.w320{width:100%}
}
@media print{.side,.top,.barre-bas,.toasts,.bandeaux,.barre-actions{display:none !important}.app{grid-template-columns:1fr}.content{padding:0}}

/* 06/11/2026 — iPhone : un tableau plus large que sa carte fait défiler la carte, jamais la page (contrôle final : « Ce qui a bougé » débordait de 17 px) */
@media (max-width: 520px) {
  .card, .carte, .panel { overflow-x: auto; }
  .card table.tab, .carte table.tab { min-width: 100%; }
}
/* 06/11/2026 — un panneau latéral replié (translateX) élargissait la zone défilable de la page de 36 px : la page ne défile jamais horizontalement */
html, body, .app { overflow-x: clip; }