/* =====================================================================
   TOUMA V2 · LE SOCLE VISUEL
   ---------------------------------------------------------------------
   CE QUE CE FICHIER CHERCHE

   Un centre de commande, pas un tableau de bord. La difference tient en
   trois choses, et elles sont toutes ici :

     LA PROFONDEUR   le fond n'est pas plat. Des halos tres sourds
                     posent un relief, les surfaces flottent au-dessus,
                     et l'oeil sait tout de suite ce qui est au premier
                     plan. Un aplat gris donne un formulaire.

     LA LUMIERE      ce qui est actif porte un filet lumineux, pas un
                     aplat de couleur. Une selection qui s'allume se
                     lit sans effort et ne crie pas.

     LA DENSITE      des chiffres tres grands, des etiquettes tres
                     petites, et de l'air entre les deux. Un ecart de
                     graisse fait la hierarchie mieux qu'un encadre.

   Il ne redefinit AUCUNE couleur de marque : il lit les jetons de
   styles.css, qui portent deja le theme sombre. Tout est prefixe `v2-`.
   ===================================================================== */

:root{
  --v2-r: 14px;
  --v2-r-s: 10px;
  --v2-rail: 248px;
  --v2-panneau: 420px;
  --v2-panneau-large: 620px;
  --v2-bandeau: 60px;
  --v2-t: 180ms;
  --v2-t-lent: 260ms;
  /* les couches, en clair */
  --v2-fond: #F2F5F9;
  --v2-halo-1: rgba(15,61,138,.07);
  --v2-halo-2: rgba(232,121,29,.05);
  --v2-verre: rgba(255,255,255,.82);
  --v2-surface: #FFFFFF;
  --v2-surface-2: #F7F9FC;
  --v2-trait: #E6EBF2;
  --v2-trait-fort: #D3DBE6;
  --v2-ombre: 0 1px 2px rgba(16,28,48,.04), 0 12px 28px -18px rgba(16,28,48,.28);
  --v2-ombre-haute: 0 24px 60px -28px rgba(16,28,48,.45);
  --v2-lueur: 0 0 0 1px rgba(15,61,138,.10), 0 8px 24px -12px rgba(15,61,138,.35);
}
:root[data-theme="dark"]{
  --v2-fond: #070B12;
  --v2-halo-1: rgba(47,70,116,.30);
  --v2-halo-2: rgba(232,121,29,.07);
  --v2-verre: rgba(17,24,38,.78);
  --v2-surface: #0F1725;
  --v2-surface-2: #131C2C;
  --v2-trait: #1C2537;
  --v2-trait-fort: #2A3548;
  --v2-ombre: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -20px rgba(0,0,0,.8);
  --v2-ombre-haute: 0 28px 70px -30px rgba(0,0,0,.9);
  --v2-lueur: 0 0 0 1px rgba(143,179,245,.16), 0 10px 30px -14px rgba(60,100,180,.55);
}

/* ================= la coquille ================= */
.v2{position:fixed;inset:0;display:flex;flex-direction:column;
  background:var(--v2-fond);color:var(--ink);font-family:var(--ui);font-size:13.5px;overflow:hidden}
.v2::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--v2-halo-1), transparent 62%),
    radial-gradient(900px 520px at 96% 4%, var(--v2-halo-2), transparent 60%),
    radial-gradient(1200px 700px at 50% 112%, var(--v2-halo-1), transparent 65%)}
.v2 *{box-sizing:border-box}
.v2-corps{position:relative;z-index:1;flex:1;display:flex;min-height:0}
.v2-page{flex:1;min-width:0;position:relative;overflow:auto;display:flex;flex-direction:column}
.v2-page::-webkit-scrollbar{width:10px;height:10px}
.v2-page::-webkit-scrollbar-thumb{background:var(--v2-trait-fort);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
.v2-page::-webkit-scrollbar-track{background:transparent}

/* ================= le bandeau ================= */
.v2-bandeau{position:relative;z-index:3;height:var(--v2-bandeau);flex-shrink:0;
  display:flex;align-items:center;gap:20px;padding:0 20px 0 18px;
  background:var(--v2-verre);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--v2-trait)}
.v2-marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  padding:6px 10px 6px 6px;border-radius:var(--v2-r-s);transition:background var(--v2-t)}
.v2-marque:hover{background:var(--v2-surface-2)}
.v2-marque img{display:block;height:28px;width:auto}
/* La pastille DEV : discrete, mais impossible a manquer. */
.v2-env{font:600 10px/1 var(--v2-police, inherit);letter-spacing:.08em;padding:4px 6px;
  border-radius:4px;color:#fff;background:#c2410c}
.v2-sep{width:1px;height:24px;background:var(--v2-trait);flex-shrink:0}
.v2-grandir{flex:1}

/* le fil : permanent, cliquable, discret */
/* OU L'ON SE TROUVE SE LIT D'UN COUP D'OEIL.
   Le pays et le territoire etaient ecrits en 13,5 px, en gris, colles au
   logo : sur une barre large et vide, la premiere information de l'ecran
   -- QUEL pays, QUEL territoire -- etait la moins visible de la page. */
.v2-fil{display:flex;align-items:center;gap:11px;font-size:16px;min-width:0;flex-wrap:nowrap}
.v2-fil a{color:var(--muted);font-weight:600;text-decoration:none;white-space:nowrap;
  padding:4px 7px;border-radius:7px;transition:background var(--v2-t),color var(--v2-t)}
.v2-fil a:hover{background:var(--v2-surface-2);color:var(--brand-2)}
.v2-fil b{font-weight:800;color:var(--ink);white-space:nowrap;padding:4px 2px;letter-spacing:-.01em}
.v2-fil svg{flex-shrink:0;opacity:.4}

/* l'heure du pays : discrete, jamais celle du navigateur */
.v2-heure{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;flex-shrink:0}
.v2-heure .h{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.v2-heure .d{font-size:11px;color:var(--muted)}

/* Le temps qu'il fait au chef-lieu. Meme forme que l'heure, a sa gauche :
   deux reperes de contexte, pas deux widgets. Vide tant que la source n'a
   pas repondu -- une case vide se remplit, un tiret ressemble a une
   valeur. */
.v2-meteo{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;flex-shrink:0}
.v2-meteo .t{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.v2-meteo .d{font-size:11px;color:var(--muted)}

/* la recherche : une touche, pas un champ qui traine */
.v2-loupe{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px 0 13px;min-width:230px;
  background:var(--v2-surface);border:1px solid var(--v2-trait);border-radius:var(--v2-r-s);
  color:var(--muted);cursor:text;font:inherit;font-size:13px;transition:border-color var(--v2-t),box-shadow var(--v2-t)}
.v2-loupe:hover{border-color:var(--v2-trait-fort)}
.v2-loupe kbd{margin-left:auto;font:600 10.5px var(--ui);letter-spacing:.04em;color:var(--muted);
  background:var(--v2-surface-2);border:1px solid var(--v2-trait);border-radius:6px;padding:3px 6px}

/* ================= le rail ================= */
.v2-rail{position:relative;z-index:2;width:var(--v2-rail);flex-shrink:0;display:flex;flex-direction:column;
  background:var(--v2-verre);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-right:1px solid var(--v2-trait)}
.v2-rail-nav{flex:1;overflow:auto;padding:16px 12px 8px;display:flex;flex-direction:column;gap:2px}
.v2-rail-nav::-webkit-scrollbar{width:0}
.v2-sect{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:16px 12px 7px}
.v2-sect:first-child{padding-top:4px}
.v2-nav{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--v2-r-s);
  color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:600;border:0;background:transparent;
  width:100%;text-align:left;cursor:pointer;font-family:inherit;
  transition:background var(--v2-t),color var(--v2-t)}
.v2-nav:hover{background:var(--v2-surface-2);color:var(--ink)}
.v2-nav svg{flex-shrink:0;opacity:.75}
.v2-nav.on{background:linear-gradient(90deg,var(--brand-soft),transparent 130%);color:var(--brand);font-weight:700}
.v2-nav.on svg{opacity:1}
.v2-nav.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--brand);box-shadow:0 0 12px 1px rgba(31,95,204,.55)}
.v2-nav .cnt{margin-left:auto;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;
  background:var(--surface-3);color:var(--ink-2)}
.v2-nav .cnt.crit{background:var(--crit-soft);color:var(--crit)}
.v2-nav .cnt.warn{background:var(--warn-soft);color:var(--warn)}

/* le profil, en bas du rail */
.v2-profil{flex-shrink:0;border-top:1px solid var(--v2-trait);padding:10px 12px}
.v2-profil-b{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;background:transparent;
  border-radius:var(--v2-r-s);cursor:pointer;font-family:inherit;text-align:left;
  transition:background var(--v2-t)}
.v2-profil-b:hover{background:var(--v2-surface-2)}
.v2-pastille{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));box-shadow:var(--v2-lueur)}
.v2-profil-t{min-width:0;flex:1}
.v2-profil-t .n{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-profil-t .o{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* le menu du profil */
.v2-menu{position:fixed;z-index:80;min-width:262px;background:var(--v2-surface);border:1px solid var(--v2-trait);
  border-radius:var(--v2-r);box-shadow:var(--v2-ombre-haute);padding:7px;
  animation:v2-monte var(--v2-t) ease-out}
@keyframes v2-monte{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.v2-menu button,.v2-menu a{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;
  background:transparent;border-radius:9px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);
  text-align:left;text-decoration:none;transition:background var(--v2-t)}
.v2-menu button:hover,.v2-menu a:hover{background:var(--v2-surface-2)}
.v2-menu .sep{height:1px;background:var(--v2-trait);margin:6px 4px}
.v2-menu .tt{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:8px 11px 5px}
.v2-menu .val{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600}
/* Le sous-menu lateral : meme boite, pose a cote de son entree. */
.v2-sous-menu{min-width:214px;z-index:81}

/* ================= titres, etiquettes, chiffres ================= */
.v2-h1{margin:0;font-size:36px;font-weight:800;letter-spacing:-.035em;line-height:1.02}
.v2-h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.025em}
.v2-h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.v2-lab{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.v2-sub{font-size:12.5px;color:var(--ink-2)}
.v2-faible{font-size:12px;color:var(--muted)}
.v2-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.v2-n{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;display:inline-block;
  padding-bottom:5px;border-bottom:4px solid transparent;font-variant-numeric:tabular-nums}
.v2-n.xl{font-size:58px}
.v2-n.m{font-size:32px;border-bottom-width:3px}
.v2-n.s{font-size:23px;border-bottom-width:3px;padding-bottom:3px}
.v2-n.xs{font-size:16px;border-bottom-width:2.5px;padding-bottom:2px}
.v2-mesure{border-bottom-color:var(--good)}
.v2-declare{border-bottom-color:var(--brand)}
.v2-estime{border-bottom-style:dashed;border-bottom-color:var(--s-ref)}
.v2-inconnu{color:var(--faint);border-bottom-style:dotted;border-bottom-color:var(--line-2)}
.v2-defaut{color:var(--warn);border-bottom-style:dotted;border-bottom-color:var(--orange)}
.v2-conflit{color:var(--warn);border-bottom-style:double;border-bottom-width:4px;border-bottom-color:var(--orange)}
.v2-unite{font-size:15px;font-weight:600;color:var(--ink-2);margin-left:7px}

/* La meme grammaire, en taille de tableau. Un chiffre porte sa provenance
   partout ou il s'affiche, sinon la regle ne tient que sur les grands. */
.v2-val{display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;
  padding-bottom:2px;border-bottom:2px solid transparent}
.v2-val.v2-mesure{border-bottom-color:var(--good)}
.v2-val.v2-declare{border-bottom-color:var(--brand)}
.v2-val.v2-estime{border-bottom-style:dashed;border-bottom-color:var(--s-ref)}
.v2-val.v2-inconnu{color:var(--faint);font-weight:500;border-bottom-style:dotted;border-bottom-color:var(--line-2)}
.v2-val.v2-defaut{color:var(--warn);border-bottom-style:dotted;border-bottom-color:var(--orange)}
.v2-val.v2-conflit{color:var(--warn);border-bottom-style:double;border-bottom-width:3px;border-bottom-color:var(--orange)}

/* ================= la barre de filtres ================= */
.v2-filtres{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v2-champ{display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;min-width:260px;
  background:var(--v2-surface);border:1px solid var(--v2-trait);border-radius:var(--v2-r-s);
  color:var(--muted);box-shadow:var(--v2-ombre)}
.v2-champ:focus-within{border-color:var(--brand);box-shadow:var(--v2-lueur)}
.v2-champ input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;
  color:var(--ink);outline:none}
.v2-puces{display:flex;gap:7px;flex-wrap:wrap}
.v2-puces .v2-puce{padding:8px 13px;font-size:12.5px;display:inline-flex;align-items:baseline;gap:7px}

/* ================= surfaces ================= */
.v2-carte{position:relative;background:var(--v2-surface);border:1px solid var(--v2-trait);
  border-radius:var(--v2-r);padding:22px 24px;box-shadow:var(--v2-ombre)}
.v2-carte.creuse{background:transparent;box-shadow:none;border-style:dashed}
.v2-carte.sombre{background:linear-gradient(160deg,#101a2c,#0a1220);border-color:#1e293c;color:#E6EBF3}
.v2-carte.clic{cursor:pointer;transition:transform var(--v2-t),box-shadow var(--v2-t),border-color var(--v2-t)}
.v2-carte.clic:hover{transform:translateY(-2px);box-shadow:var(--v2-ombre-haute);border-color:var(--v2-trait-fort)}
.v2-grille{display:grid;gap:18px}
.v2-rangee{display:flex;gap:18px}

/* ================= boutons ================= */
.v2-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--v2-trait-fort);background:var(--v2-surface);color:var(--ink);
  border-radius:var(--v2-r-s);padding:10px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background var(--v2-t),border-color var(--v2-t),transform var(--v2-t)}
.v2-b:hover{background:var(--v2-surface-2);border-color:var(--muted)}
.v2-b:active{transform:translateY(1px)}
.v2-b.premier{background:linear-gradient(140deg,var(--brand),var(--brand-2));border-color:transparent;
  color:#fff;font-weight:700;box-shadow:var(--v2-lueur)}
.v2-b.premier:hover{filter:brightness(1.06)}
.v2-b.sm{padding:7px 12px;font-size:12.5px}
.v2-b.plein{width:100%}
.v2-b[disabled]{opacity:.45;cursor:not-allowed}

.v2-seg{display:inline-flex;background:var(--v2-surface);border:1px solid var(--v2-trait);
  border-radius:var(--v2-r-s);padding:3px;box-shadow:var(--v2-ombre)}
.v2-seg button{border:0;background:transparent;color:var(--ink-2);border-radius:7px;padding:7px 14px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background var(--v2-t),color var(--v2-t)}
.v2-seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface);font-weight:700}

.v2-puce{border:1px solid var(--v2-trait);background:var(--v2-surface);color:var(--ink-2);border-radius:20px;
  padding:7px 14px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:all var(--v2-t)}
.v2-puce:hover{border-color:var(--v2-trait-fort)}
.v2-puce[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600}
.v2-puce .n{color:var(--muted);margin-left:6px}

/* ================= le panneau contextuel =================
   Il s'ancre au CORPS, qui ne defile pas, et non a la page qui defile :
   sinon il se pose au haut du contenu -- donc hors de vue des qu'on a
   descendu -- et sa largeur allonge la page vers la droite. Voir le
   commentaire de `shell.js`, au montage.

   `overflow:hidden` sur le corps garde le panneau ferme hors du cadre :
   glisse a droite, il ne doit pas exister. */
.v2-corps{overflow:hidden}
.v2-panneau{position:absolute;right:0;top:0;bottom:0;width:var(--v2-panneau);z-index:40;
  background:var(--v2-surface);border-left:1px solid var(--v2-trait);box-shadow:var(--v2-ombre-haute);
  display:flex;flex-direction:column;
  transform:translateX(calc(100% + 40px));transition:transform var(--v2-t-lent) cubic-bezier(.22,.7,.3,1)}
.v2-panneau.ouvert{transform:none}
.v2-panneau.large{width:min(var(--v2-panneau-large), 92vw)}
.v2-panneau-tete{padding:22px 24px 18px;border-bottom:1px solid var(--v2-trait);display:flex;gap:12px;align-items:flex-start}
.v2-panneau-corps{padding:20px 24px;display:flex;flex-direction:column;gap:22px;flex:1;overflow:auto}
.v2-panneau-pied{padding:16px 24px;border-top:1px solid var(--v2-trait);display:flex;flex-direction:column;gap:9px;
  background:var(--v2-surface-2)}
.v2-fermer{width:32px;height:32px;border-radius:9px;border:1px solid var(--v2-trait);background:var(--v2-surface);
  color:var(--muted);font-size:16px;cursor:pointer;flex-shrink:0;line-height:1;transition:background var(--v2-t)}
.v2-fermer:hover{background:var(--v2-surface-2);color:var(--ink)}

/* ================= la palette de commandes ================= */
.v2-palette-fond{position:fixed;inset:0;z-index:90;background:rgba(8,14,26,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-start;
  justify-content:center;padding-top:12vh;animation:v2-fondu var(--v2-t) ease-out}
@keyframes v2-fondu{from{opacity:0}to{opacity:1}}
.v2-palette{width:min(680px,92vw);background:var(--v2-surface);border:1px solid var(--v2-trait);
  border-radius:16px;box-shadow:var(--v2-ombre-haute);overflow:hidden;animation:v2-monte var(--v2-t) ease-out}
.v2-palette-haut{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--v2-trait)}
.v2-palette-haut input{flex:1;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}
.v2-palette-liste{max-height:54vh;overflow:auto;padding:8px}
.v2-res{display:flex;align-items:center;gap:13px;width:100%;padding:10px 12px;border:0;background:transparent;
  border-radius:10px;cursor:pointer;font:inherit;text-align:left;color:var(--ink)}
.v2-res:hover,.v2-res.on{background:var(--brand-soft)}
.v2-res .ic{width:30px;height:30px;border-radius:9px;background:var(--v2-surface-2);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-2)}
.v2-res > svg{flex-shrink:0;color:var(--ink-2)}
.v2-res .t{flex:1;min-width:0}
.v2-res .t .n{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-res .t .d{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-res .k{font-size:10.5px;color:var(--faint);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.v2-palette-haut kbd{font:600 10.5px var(--ui);letter-spacing:.04em;color:var(--muted);
  background:var(--v2-surface-2);border:1px solid var(--v2-trait);border-radius:6px;padding:3px 7px;flex-shrink:0}
.v2-palette-pied{padding:10px 18px;border-top:1px solid var(--v2-trait);background:var(--v2-surface-2);
  font-size:11.5px;color:var(--muted)}
.v2-palette .v2-sect{padding:12px 12px 5px}
.v2-palette .v2-sect:first-child{padding-top:6px}

/* ================= tables ================= */
.v2-tbl{width:100%;border-collapse:collapse;font-size:13px}
.v2-tbl thead th{text-align:left;padding:11px 14px;background:var(--v2-surface-2);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--v2-trait);position:sticky;top:0;z-index:2;cursor:pointer;white-space:nowrap}
.v2-tbl thead th:hover{color:var(--ink)}
.v2-tbl tbody td{padding:13px 14px;border-bottom:1px solid var(--v2-trait)}
.v2-tbl tbody tr{cursor:pointer;transition:background var(--v2-t)}
.v2-tbl tbody tr:hover{background:var(--v2-surface-2)}
.v2-tbl tbody tr.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.v2-tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.v2-tbl .nom{font-weight:600}
.v2-tbl .sous{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.v2-tbl thead th .u{display:block;margin-top:3px;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:none;color:var(--faint)}
.v2-tbl thead th[aria-sort]{color:var(--ink)}
.v2-tbl thead th[aria-sort]::after{content:" ↓";font-size:10px}
.v2-tbl thead th[aria-sort="ascending"]::after{content:" ↑"}

/* ================= jauges, crans, barres ================= */
.v2-jauge{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden;display:flex}
.v2-jauge i{display:block;height:100%;transition:width var(--v2-t-lent) ease-out}
.v2-crans{display:flex;gap:5px}
.v2-crans i{flex:1;height:7px;border-radius:4px;background:var(--surface-3)}
.v2-crans i.on{background:var(--good)}
.v2-crans i.en{background:var(--brand)}
.v2-hachure{background:repeating-linear-gradient(135deg,var(--s-ref) 0 5px,transparent 5px 10px)}

/* ================= etat vide, concu ================= */
.v2-vide{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:48px 40px;gap:14px;color:var(--ink-2);flex:1}
.v2-vide svg{opacity:.35}
.v2-vide .t{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* ================= le bandeau de presentation ================= */
.v2-presentation{position:relative;z-index:4;display:flex;align-items:center;gap:14px;
  padding:9px 20px;background:linear-gradient(90deg,var(--orange-soft),transparent 70%);
  border-bottom:1px solid var(--orange);font-size:12.5px}
.v2-presentation b{color:var(--warn)}

/* ================= la banniere d'un ecran ================= */
/* Une image du territoire, pleine largeur, et des chiffres poses dessus.
   C'est la signature de Touma : on voit le pays avant de lire un mot. */
.v2-hero{position:relative;overflow:hidden;flex-shrink:0;display:flex;flex-direction:column;
  background:#0C1320;color:#fff}
.v2-hero .voile{position:absolute;inset:0;pointer-events:none}
.v2-hero .dedans{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:26px 30px 24px}
.v2-hero a{color:#C7D1E0}

/* La carte occupe tout l'ecran, et ses commandes flottent dessus. Les
   boutons viennent du MOTEUR (`.map-ctl`, avec la vue entiere) : le socle
   les habille au lieu d'en poser une seconde serie qui en saurait moins. */
.v2 .v2-carte-boite{background:var(--map-bg)}
.v2 .map-ctl{right:18px;top:18px;gap:7px;z-index:3}
.v2 .map-ctl button{width:36px;height:36px;border-radius:10px;font-size:17px;
  background:var(--v2-verre);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--v2-trait);box-shadow:var(--v2-ombre);transition:background var(--v2-t)}
.v2 .map-hint{left:18px;bottom:16px;z-index:3;font-family:var(--ui);font-size:11px;padding:6px 11px;
  border-radius:8px;background:var(--v2-verre);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--v2-trait);opacity:1}

/* une ligne de couverture, dans la colonne posee sur la carte */
.v2-pref{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font:inherit;color:var(--ink);padding:9px 10px;border-radius:9px;transition:background var(--v2-t)}
.v2-pref:hover{background:var(--v2-surface-2)}

/* une decision : une ligne qui s'ouvre, pas une carte de plus */
.v2-decision{transition:background var(--v2-t),padding-left var(--v2-t)}
.v2-decision:hover{background:var(--v2-surface-2);padding-left:8px;border-radius:9px}
.v2-decision svg{opacity:.4}

/* ================= une scene ================= */
/* Un fond profond pour une figure qui doit dominer l'ecran : la chaine
   de l'energie, une carte, un flux. Ce n'est pas une carte de plus dans
   une grille, c'est le sujet de la page. */
.v2-scene{position:relative;overflow:hidden;flex-shrink:0;
  background:linear-gradient(170deg,var(--v2-surface) 0%,var(--v2-surface-2) 100%);
  border-bottom:1px solid var(--v2-trait)}
.v2-scene .voile{position:absolute;inset:0;pointer-events:none;opacity:.6}
.v2-maillon{cursor:pointer;outline:none}
.v2-maillon rect{transition:opacity var(--v2-t)}
.v2-maillon:hover rect,.v2-maillon:focus-visible rect{fill-opacity:1;filter:brightness(1.08)}
.v2-maillon:focus-visible rect{stroke:var(--brand);stroke-width:2;stroke-dasharray:none}

.v2-select{height:38px;padding:0 12px;border-radius:var(--v2-r-s);border:1px solid var(--v2-trait);
  background:var(--v2-surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;
  box-shadow:var(--v2-ombre)}
.v2-select:focus{outline:none;border-color:var(--brand);box-shadow:var(--v2-lueur)}

/* ================= onglets d'un ecran ================= */
/* Un onglet n'est pas un bouton de plus : il dit ou on est dans un meme
   sujet. Le filet sous l'actif suffit, et il ne crie pas. */
.v2-onglet{position:relative;border:0;background:transparent;color:var(--ink-2);font:inherit;
  font-size:13.5px;font-weight:600;padding:11px 15px;cursor:pointer;border-radius:9px 9px 0 0;
  transition:color var(--v2-t),background var(--v2-t)}
.v2-onglet:hover{color:var(--ink);background:var(--v2-surface-2)}
.v2-onglet.on{color:var(--brand);font-weight:700}
.v2-onglet.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2.5px;
  border-radius:3px 3px 0 0;background:var(--brand);box-shadow:0 0 10px 0 rgba(31,95,204,.5)}

/* La barre d'un espace de travail : elle porte les sous-sections d'une
   meme entree de rail, et se pose sous le titre de l'espace. */
.v2-espace-barre{display:flex;gap:4px;margin-top:20px;flex-wrap:wrap}

/* ================= une ligne qui s'ouvre ================= */
.v2-ligne{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  color:var(--ink);cursor:pointer;padding:14px 18px;border-radius:var(--v2-r);
  background:var(--v2-surface);border:1px solid var(--v2-trait);box-shadow:var(--v2-ombre);
  transition:border-color var(--v2-t),transform var(--v2-t)}
.v2-ligne:hover{border-color:var(--v2-trait-fort);transform:translateX(2px)}
.v2-ligne .sev{width:4px;align-self:stretch;border-radius:3px;flex-shrink:0}
.v2-ligne svg{opacity:.35;flex-shrink:0}

/* ================= un tableau de cartes ================= */
.v2-kanban{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
.v2-col{flex:1;min-width:230px;background:var(--v2-surface-2);border:1px solid var(--v2-trait);
  border-radius:var(--v2-r);padding:12px;display:flex;flex-direction:column;gap:10px}
.v2-col .tete{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:2px 4px 6px}
.v2-col .tete .n{margin-left:auto;font-size:11px;letter-spacing:0;color:var(--ink-2)}
.v2-tk{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;font:inherit;
  color:var(--ink);cursor:pointer;padding:12px 13px;border-radius:10px;background:var(--v2-surface);
  border:1px solid var(--v2-trait);transition:border-color var(--v2-t),transform var(--v2-t)}
.v2-tk:hover{border-color:var(--brand);transform:translateY(-1px)}
.v2-tk .t{font-size:13px;font-weight:700}
.v2-tk .b{font-size:11.5px;color:var(--muted)}
.v2-tk .r{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--ink-2)}
.v2-tk .jauge{display:block;height:4px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.v2-tk .jauge i{display:block;height:100%;background:var(--brand)}

/* ================= crans d'un cycle ================= */
.v2-cran{width:14px;height:5px;border-radius:3px;background:var(--surface-3);display:inline-block}
.v2-cran.on{background:var(--good)}

/* ================= suggestions sous un champ ================= */
.v2-suggestions{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:280px;
  background:var(--v2-surface);border:1px solid var(--v2-trait);border-radius:var(--v2-r);
  box-shadow:var(--v2-ombre-haute);padding:6px;max-height:280px;overflow:auto}

/* ================= la fin d'une session ================= */
/* L'avis : discret, en bas a droite, il n'interrompt pas la saisie en
   cours. Quelqu'un qui l'ignore perd sa session, pas son travail : il a
   ete prevenu et il peut encore agir. */
.v2-avis{position:fixed;right:20px;bottom:20px;z-index:85;display:flex;align-items:center;gap:13px;
  padding:13px 16px;border-radius:var(--v2-r);background:var(--v2-surface);
  border:1px solid var(--orange);box-shadow:var(--v2-ombre-haute);font-size:13px;max-width:440px;
  animation:v2-monte var(--v2-t) ease-out}
.v2-avis .pt{width:9px;height:9px;border-radius:50%;background:var(--orange);flex-shrink:0}

/* La fin : un voile, une phrase, un bouton. Rien derriere ne se lit plus,
   et c'est voulu : les chiffres affiches ne se rafraichissent plus. */
.v2-fin{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  background:rgba(8,14,26,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:v2-fondu var(--v2-t) ease-out}
.v2-fin .boite{width:min(430px,92vw);padding:30px 32px;border-radius:16px;text-align:center;
  background:var(--v2-surface);border:1px solid var(--v2-trait);box-shadow:var(--v2-ombre-haute)}

/* ================= animations d'entree ================= */
.v2-apparait{animation:v2-apparait var(--v2-t-lent) ease-out both}
@keyframes v2-apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Le panneau est HORS de cette regle. Une animation en `both` fige sa
   derniere image, `transform:none`, et un panneau ferme resterait alors
   ouvert par-dessus l'ecran : l'animation gagne toujours contre la
   propriete. Le bogue est invisible a la lecture, pas a l'usage. */
.v2-page > *:not(.v2-panneau){animation:v2-apparait var(--v2-t-lent) ease-out both}

/* ================= lu, mais pas vu =================

   UN ECRAN PEUT NE PAS AVOIR DE TITRE VISIBLE SANS ETRE SANS TITRE.

   La carte du territoire est une toile plein cadre : lui poser un grand
   titre par-dessus mangerait la carte, qui EST la page. Mais un document
   sans `h1` n'a pas de plan : un lecteur d'ecran annonce « region
   principale », sans dire de quoi, et l'utilisateur doit explorer pour
   comprendre ou il vient d'arriver.

   Ce titre existe donc, et il ne se voit pas. Pas `display:none`, qui le
   retirerait aussi des lecteurs d'ecran : la technique qui garde
   l'element dans l'arbre d'accessibilite tout en le sortant du dessin. */
.v2-hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ================= responsive ================= */
@media (max-width:1240px){
  :root{--v2-rail:72px;--v2-panneau:380px}
  .v2-nav span.t,.v2-sect,.v2-profil-t{display:none}
  .v2-nav{justify-content:center;padding:11px 0}
  .v2-nav .cnt{position:absolute;top:4px;right:10px;margin:0}
  .v2-profil-b{justify-content:center}
  .v2-loupe{min-width:44px;padding:0 11px}
  .v2-loupe span.t,.v2-loupe kbd{display:none}
}
@media (max-width:820px){
  :root{--v2-panneau:100%}
  .v2-h1{font-size:28px}
  .v2-n{font-size:34px}
  .v2-n.xl{font-size:42px}
  .v2-heure,.v2-meteo{display:none}
}

/* ================= le rail passe EN BAS sur un telephone =================

   A 375 px, un rail lateral replie prend 72 px : dix-neuf pour cent de la
   largeur, en permanence, pour une colonne d'icones. Sur le terrain, c'est
   la place d'un nom de batiment ou d'une valeur de compteur.

   Et ce n'est pas seulement une question de place : sur un telephone tenu
   d'une main, le haut de l'ecran et le bord gauche sont ce que le pouce
   atteint le plus mal. La navigation descend donc la ou le pouce arrive.

   CE QUI CHANGE, ET CE QUI NE CHANGE PAS

   Le rail devient une barre fixe en bas, en rangee, defilable
   horizontalement si les entrees ne tiennent pas. Le profil en sort : il
   rejoint le bandeau du haut, ou il est rare qu'on ait besoin de lui vite.
   Les SECTIONS disparaissent -- « COMMANDER », « CONNAITRE », « AGIR »
   n'ont pas de sens en rangee.

   Le contenu garde sa place sous la barre grace a `padding-bottom` : sans
   cela, la derniere ligne de chaque ecran vit sous la barre et ne se lit
   jamais. C'est le defaut classique des barres basses, et il ne se voit
   qu'en bas de page.

   On garde la marque de l'ecran actif, en trait au-DESSUS de l'entree
   plutot qu'a gauche : le meme signe, tourne avec la barre.
   ========================================================================= */
@media (max-width:640px){
  .v2-page{flex-direction:column}
  .v2-rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;
    flex-direction:row;z-index:30;
    border-right:0;border-top:1px solid var(--v2-trait);
    box-shadow:0 -6px 24px -14px rgba(10,16,28,.5);
    /* La barre ne mange pas la zone du geste de retour des telephones. */
    padding-bottom:env(safe-area-inset-bottom,0)
  }
  .v2-rail-nav{
    flex:1;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:6px 8px;gap:2px;scroll-snap-type:x proximity
  }
  .v2-rail-nav .v2-sect{display:none}
  .v2-nav{
    flex-direction:column;gap:4px;min-width:64px;padding:7px 6px;
    font-size:10.5px;font-weight:600;text-align:center;scroll-snap-align:center
  }
  /* Le libelle revient : une rangee d'icones sans mot se devine, elle ne
     se lit pas. Il est petit, mais il est la. */
  .v2-nav span.t{display:block;font-size:10px;line-height:1.15;
    max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .v2-nav .cnt{position:absolute;top:2px;right:10px;margin:0;font-size:9.5px;padding:1px 5px}
  .v2-nav.on::before{left:12px;right:12px;top:0;bottom:auto;width:auto;height:3px;
    border-radius:0 0 3px 3px}
  /* LE PROFIL RESTE, REDUIT A SA PASTILLE.

     Un premier jet le cachait : en bas, il prend la place d'un ecran, et
     on ne l'ouvre qu'une fois par session. Mais le bandeau du haut ne
     porte ni le compte, ni la langue, ni le theme, ni la deconnexion :
     le cacher les rendait tous les quatre INATTEIGNABLES sur telephone.
     Un raccourci qu'on retire doit laisser un autre chemin ; sinon ce
     n'est pas un gain de place, c'est une fonction perdue. */
  .v2-profil{border-top:0;border-left:1px solid var(--v2-trait);
    padding:6px 8px;display:flex;align-items:center}
  .v2-profil-b{padding:7px 8px;min-width:48px;justify-content:center}
  .v2-profil-t{display:none}
  .v2-corps{padding-bottom:calc(66px + env(safe-area-inset-bottom,0))}
  /* Le panneau lateral couvre l'ecran entier sur telephone : il doit donc
     passer AU-DESSUS de la barre, sinon ses boutons sont sous elle. */
  .v2-panneau{z-index:40;bottom:0}
  .v2-panneau-pied{padding-bottom:calc(16px + env(safe-area-inset-bottom,0))}
}
@media (prefers-reduced-motion:reduce){
  .v2-panneau,.v2-jauge i,.v2-b,.v2-carte.clic{transition:none}
  .v2-page > *,.v2-apparait,.v2-menu,.v2-palette,.v2-palette-fond{animation:none}
}

/* UNE LIGNE QU'ON PEUT CORRIGER SE VOIT AU SURVOL, PAS AVANT.
   Elle garde l'allure d'une ligne de lecture : souligner en permanence
   dix lignes de fiche ferait un formulaire la ou l'on vient lire. */
.v2-ligne-clic { transition: background .12s ease, color .12s ease; }
.v2-ligne-clic svg { opacity: 0; color: var(--brand); transition: opacity .12s ease; }
.v2-ligne-clic:hover, .v2-ligne-clic:focus-visible { background: var(--surface-2); }
.v2-ligne-clic:hover svg, .v2-ligne-clic:focus-visible svg { opacity: 1; }

/* ---------------------------------------------------------------------
   LE COCKPIT : UNE GRILLE DE DOUZE

   Un poste de pilotage doit porter plusieurs lectures cote a cote. Une
   pile de cartes pleine largeur laisse 70 % de vide sur un moniteur et
   oblige a faire defiler pour comparer deux chiffres qui se repondent.

   Sous 1180 px, chaque carte reprend la largeur entiere : comparer cote
   a cote n'a plus de sens quand chaque colonne fait 200 px.
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .v2-cockpit > * { grid-column: 1 / -1 !important; }
}

/* ---------------------------------------------------------------------
   LE PILOTAGE TERRITORIAL

   Trois colonnes : l'arbre du pays, la carte, la synthese de la zone.
   Sous 1240 px elles s'empilent -- trois colonnes de 250 px ne sont pas
   trois colonnes, et la carte y devient un timbre.
   --------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .v2-terr { grid-template-columns: 1fr !important; }
  .v2-terr > * { min-height: 320px; }
}

/* Un noeud de l'arbre. Le decalage dit le niveau ; il n'y a ni chevron
   ni ligne pointillee, parce qu'on ne deplie que la zone ouverte. */
.v2-arbre { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  border:0; background:transparent; font:inherit; font-size:13px; font-weight:600;
  color:var(--ink); padding:7px 9px; border-radius:8px; cursor:pointer;
  transition:background var(--v2-t), color var(--v2-t) }
.v2-arbre:hover { background:var(--v2-surface-2) }
.v2-arbre.actif { background:var(--ink); color:var(--surface) }
.v2-arbre.n1 { padding-left:15px }
.v2-arbre.n2 { padding-left:27px; font-weight:500; font-size:12.5px; color:var(--ink-2) }
.v2-arbre .n { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; opacity:.7 }