/* ============================================================
   ADV PILOTAGE — Direction artistique globale (DA = "B3")
   Feuille de style partagée. À charger sur TOUTES les pages
   du dashboard, avant les styles spécifiques de page.
   Validée par Jérémy le 11/08/2026.
   ============================================================ */

:root{
  /* --- Couleurs de marque --- */
  --adv-red:      #e2001a;   /* accent action principale (CTA, logo) */
  --adv-red-d:    #b80016;   /* rouge foncé (hover CTA) */
  --navy:         #1f3a56;   /* bleu institutionnel (titres, valeurs) */
  --head1:        #2f5074;   /* header dégradé — départ */
  --head2:        #26557a;   /* header dégradé — fin */

  /* --- Accents fonctionnels (repris des KPI / badges) --- */
  --cyan:   #0e8ba8;   /* CA / info */
  --green:  #1e7e46;   /* payé / actif / SEPA OK */
  --amber:  #c77d12;   /* dormant / à relancer / attention */
  --violet: #6c5ce7;   /* secondaire optionnel */

  /* --- Fonds & surfaces --- */
  --bg:     #eef2f6;   /* fond de page */
  --card:   #ffffff;   /* cartes, modale, tuiles */
  --panel:  #f5f8fb;   /* surface secondaire (KPI, info-box) */
  --line:   #e3eaf1;   /* filets / bordures */

  /* --- Texte --- */
  --txt:    #1c2a3a;   /* texte principal */
  --muted:  #6b7d90;   /* texte secondaire / labels */

  /* --- États (fonds doux) --- */
  --ok-bg:   #e7f6ec; --ok-tx:   #1e7e46;
  --warn-bg: #fdf6ea; --warn-tx: #c77d12; --warn-bd:#f0d9a8;
  --err-bg:  #fdeceb; --err-tx:  #c0392b;
  --info-bg: #eef5fd; --info-tx: #0f5fb0; --info-bd:#bcd6f5;

  /* --- Rayons / ombres / typo --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow-card: 0 1px 3px rgba(31,58,86,.08);
  --shadow-modal: 0 26px 66px rgba(31,58,86,.28);
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);}

/* ---------- Header de page / bandeau ---------- */
.adv-topbar{
  background:linear-gradient(120deg,var(--head1),var(--head2));
  color:#fff;padding:16px 24px;display:flex;align-items:center;gap:14px;
}
.adv-topbar .brand{font-weight:700;font-size:16px;letter-spacing:.2px;}
.adv-topbar .brand small{opacity:.8;font-weight:400;}

/* ---------- Cartes ---------- */
.adv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);overflow:hidden;}
.adv-card > h3{margin:0;padding:12px 15px;font-size:12.5px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--line);}
.adv-card > .c{padding:12px 15px;}

/* ---------- KPI (liseré coloré à gauche) ---------- */
.adv-kpis{display:grid;gap:12px;}
.adv-kpi{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r-md);padding:14px 15px;}
.adv-kpi.c-cyan{border-left-color:var(--cyan);}
.adv-kpi.c-navy{border-left-color:var(--navy);}
.adv-kpi.c-green{border-left-color:var(--green);}
.adv-kpi.c-amber{border-left-color:var(--amber);}
.adv-kpi.c-red{border-left-color:var(--adv-red);}
.adv-kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.adv-kpi .v{font-size:24px;font-weight:700;margin-top:4px;color:var(--navy);}

/* ---------- Tableaux ---------- */
.adv-table{width:100%;border-collapse:collapse;font-size:13px;}
.adv-table th,.adv-table td{text-align:left;padding:8px 6px;border-bottom:1px solid #f1f4f8;}
.adv-table th{font-size:10.5px;text-transform:uppercase;color:var(--muted);letter-spacing:.3px;}
.adv-table td.n,.adv-table th.n{text-align:right;font-variant-numeric:tabular-nums;}
/* En-tête triable (listes Clients) : le tri porte sur la donnée, pas sur le DOM. */
.adv-table th.tri{cursor:pointer;user-select:none;white-space:nowrap;}
.adv-table th.tri:hover{color:var(--cyan);}
.adv-table th.tri.actif{color:var(--cyan);}
.adv-table th.tri .ar{font-size:9px;margin-left:4px;vertical-align:1px;}
.adv-table tbody tr:hover{background:var(--panel);}

/* ---------- Badges & tags ---------- */
.adv-badge{font-size:12px;font-weight:600;padding:3px 11px;border-radius:20px;border:1px solid;display:inline-block;}
.adv-badge.warn{color:var(--warn-tx);border-color:var(--warn-bd);background:var(--warn-bg);}
.adv-badge.info{color:var(--info-tx);border-color:var(--info-bd);background:var(--info-bg);}
.adv-badge.ok{color:var(--ok-tx);border-color:#b6e2c6;background:var(--ok-bg);}
.adv-tag{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:20px;}
.adv-tag.ok{background:var(--ok-bg);color:var(--ok-tx);}
.adv-tag.err{background:var(--err-bg);color:var(--err-tx);}
.adv-tag.warn{background:var(--warn-bg);color:var(--warn-tx);}
/* Étiquette neutre (repère, pas un état) : emplacement de rangement, code… — un `.adv-tag`
   nu n'avait aucun fond, et détourner « ok »/« warn » ferait dire un état à un simple repère. */
.adv-tag.neutre{background:var(--panel);color:var(--navy);border:1px solid var(--line);}

/* ---------- Boutons ---------- */
.adv-btn{border:1px solid #cfd8e2;background:#fff;color:#33424f;border-radius:var(--r-sm);padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s;}
.adv-btn:hover{background:var(--panel);}
.adv-btn.primary{background:var(--adv-red);border-color:var(--adv-red);color:#fff;}
.adv-btn.primary:hover{background:var(--adv-red-d);border-color:var(--adv-red-d);}
.adv-btn.ghost{background:transparent;border-color:transparent;color:var(--muted);}
.adv-btn.block{width:100%;justify-content:center;}

/* ---------- Encadrés d'état ---------- */
.adv-note{border-left:2px solid var(--cyan);padding:3px 0 3px 11px;margin:0 0 11px;}
.adv-note .m{font-size:11px;color:var(--muted);}
.adv-note .t{font-size:13px;margin-top:1px;}
.adv-next{border:1px solid var(--warn-bd);background:var(--warn-bg);border-radius:10px;padding:11px 13px;}
.adv-next .l{font-size:11px;text-transform:uppercase;color:var(--amber);letter-spacing:.3px;}
.adv-next .t{font-size:14px;font-weight:600;margin-top:2px;color:#7a5a10;}

/* ---------- Modale / pop-up (fiche client, commande, retour) ---------- */
.adv-overlay{position:fixed;inset:0;background:rgba(31,58,86,.4);display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 34px;overflow:auto;z-index:1000;}
.adv-modal{width:860px;max-width:100%;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-modal);overflow:hidden;}
.adv-modal .head{padding:22px 24px 20px;background:linear-gradient(120deg,var(--head1),var(--head2));color:#fff;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.adv-modal .head .sub{font-size:11px;letter-spacing:.6px;opacity:.85;text-transform:uppercase;}
.adv-modal .head h2{margin:5px 0 12px;font-size:22px;font-weight:700;}
.adv-modal .head .badges{display:flex;gap:8px;flex-wrap:wrap;}
.adv-modal .head .adv-badge{background:rgba(255,255,255,.16);border:none;color:#fff;}
.adv-modal .x{background:rgba(255,255,255,.16);border:none;color:#fff;width:34px;height:34px;border-radius:9px;font-size:16px;cursor:pointer;flex:none;}
.adv-modal .body{padding:22px 24px;}
.adv-modal .actions{display:flex;gap:8px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--line);background:#fafbfc;}

/* ---------- Menu latéral gauche ---------- */
.adv-side{background:var(--card);border-right:1px solid var(--line);}
.adv-side a{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--txt);text-decoration:none;font-size:14px;border-left:3px solid transparent;}
.adv-side a:hover{background:var(--panel);}
.adv-side a.active{background:var(--info-bg);border-left-color:var(--adv-red);color:var(--navy);font-weight:600;}
.adv-side a .count{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:var(--adv-red);border-radius:20px;padding:1px 8px;}
/* LA PASTILLE D'UN ONGLET REPLIÉ (02/09). Quand un onglet est fermé, ses sous-entrées ne se
   voient pas : leur badge rouge non plus. Un point rouge sur le parent dit qu'il y a du
   nouveau là-dedans, sans annoncer un nombre qui serait la somme de choses différentes.
   Même rouge que le badge, pour qu'on lise la même chose. */
.adv-side a .neuf{margin-left:auto;width:8px;height:8px;border-radius:50%;
  background:var(--adv-red);flex:0 0 8px;}
/* Un onglet replié peut porter le point ET son chevron : le point garde alors sa place à
   droite du libellé, le chevron reste au bout. */
.adv-side a .neuf + .chev{margin-left:6px;}
/* LA LIGNE EN SURBRILLANCE (02/09, 2ᵉ passe) : « il est arrivé du nouveau ici depuis TA
   dernière visite ». Elle vit À CÔTÉ du compteur chiffré, qui dit le travail restant — deux
   faits différents, deux signaux différents, et les deux lisibles ensemble.
   Même grammaire que `.active` (filet de gauche rouge) mais un fond distinct : on doit
   pouvoir séparer « je suis ici » de « il y a du neuf ». En pratique les deux ne se croisent
   pas — ouvrir une entrée éteint son neuf — mais le style ne doit pas en dépendre.
   Le badge `.count`, blanc sur rouge, reste parfaitement lisible sur ce fond. */
.adv-side a.neuf-ligne{background:#fdecee;border-left-color:var(--adv-red);
  color:var(--adv-red-d);font-weight:600;}
.adv-side a.neuf-ligne:hover{background:#fbdfe3;}

/* ============================================================
   Ajouts 11/08 — mise en œuvre C1 (fiche client)
   Composants manquants pour rendre maquette-B3-clair.html :
   la grille .cols n'était définie que dans le media query, .adv-kpis
   n'avait pas de colonnes, et le bouton « Informations société »
   n'existait pas. Ajoutés ici (et pas en local) comme prévu par la SPEC.
   ============================================================ */
/* Grille 2 colonnes de la modale : historique à gauche, suivi à droite */
.adv-modal .body .cols{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start;}
/* Rangée de KPI : 4 de front dans la modale, empilés quand la place manque */
.adv-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.adv-kpi .h{font-size:11px;color:var(--muted);margin-top:3px;}
/* Bouton dépliant « Informations société » */
.adv-info-btn{width:100%;border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:12px;font-size:13.5px;font-weight:600;color:var(--cyan);cursor:pointer;text-align:center;}
.adv-info-btn:hover{background:#eaf1f8;}
/* Légende sous un tableau / une carte */
.adv-foot{font-size:11px;color:var(--muted);padding-top:8px;}
/* Intertitre de section dans la modale */
.adv-modal h4{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin:16px 0 6px;}
.adv-modal .actions .spacer{margin-left:auto;}

/* ============================================================
   Ajouts 11/08 (2) — reskin de l'onglet Clients
   Composants transverses apparus en habillant les 6 écrans.
   ============================================================ */
/* Sous-texte discret sous une valeur de tableau (ville, zone, action à faire…) */
.sous{font-size:12px;color:var(--muted);margin-top:2px;}
/* Ligne de tableau en alerte (relance en retard) */
.adv-table tbody tr.l-retard{background:var(--err-bg);}
.adv-table tbody tr.l-retard:hover{background:#fbdedc;}
/* Lots (17/08) : « survente possible » est la seule info actionnable de la page — la ligne se
   repère d'un coup d'œil, sans crier (fond d'avertissement, pas d'erreur : rien n'est cassé,
   c'est un risque de vente à surveiller). */
.adv-table tbody tr.l-risque{background:var(--warn-bg);}
.adv-table tbody tr.l-risque:hover{background:#f9edd7;}
/* Carte dépliante : <details class="adv-card"><summary>…</summary><div class="c">… */
.adv-card > summary{padding:12px 15px;font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none;}
.adv-card > summary::-webkit-details-marker{display:none;}
.adv-card > summary:hover{background:var(--panel);}
.adv-card[open] > summary{border-bottom:1px solid var(--line);}
/* Bouton compact (actions de ligne dans une liste) */
.adv-btn.sm{padding:6px 10px;font-size:12.5px;}

/* ---------- Barre de filtre partagée (onglet Clients) ---------- */
.adv-filtre{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);
  padding:10px 12px;margin-bottom:16px;}
.adv-filtre .f-txt{margin:0;flex:1 1 220px;max-width:320px;}
.adv-filtre .f-lab{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;
  letter-spacing:.3px;color:var(--muted);}
.adv-filtre .f-sel{padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--txt);font-size:13px;text-transform:none;letter-spacing:0;}
.adv-filtre .f-sel:disabled{opacity:.5;cursor:not-allowed;}
/* Critère indisponible (donnée non lue) : grisé, et la cause est dite juste à côté. */
.adv-filtre .f-lab.off{opacity:.55;}
.adv-filtre .adv-tag{text-transform:none;letter-spacing:0;}
.adv-filtre .f-info{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap;}
@media(max-width:720px){
  .adv-filtre .f-txt{max-width:none;flex:1 1 100%;}
  .adv-filtre .f-info{margin-left:0;}
}

/* ---------- Rail latéral DROIT (outils de page) ---------- */
/* Décidé le 14/08 par Jérémy pour l'export / import Excel : ce ne sont pas des contenus, ils
   n'ont rien à faire dans une carte. Ils occupent le fond resté vide À DROITE de la colonne
   de contenu, empilés en haut. Une vue s'y branche en renvoyant { html, rail } (cf. render).
   Le contenu garde sa largeur de lecture (1050 px) : le rail s'ajoute à côté, il ne la rogne pas. */
.adv-zone{display:flex;align-items:flex-start;gap:20px;}
.adv-zone > .z-main{flex:1 1 auto;min-width:0;max-width:1050px;}
.adv-rail{flex:0 0 208px;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  position:sticky;top:16px;}
.adv-rail .adv-tag{align-self:flex-start;}
/* Message d'état sous les boutons (« Préparation du fichier… », « … téléchargé »). Il vit
   hors de .adv-filtre, où la classe .f-info n'a aucun effet : il a donc son propre style. */
.adv-xl-msg{font-size:12px;color:var(--muted);padding-top:4px;}
/* Sous 1100 px la place manque pour deux colonnes : le rail repasse SOUS le contenu, en
   rangée horizontale (et non en pile pleine largeur, qui donnerait deux gros boutons). */
@media(max-width:1100px){
  .adv-zone{display:block;}
  .adv-rail{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:16px;}
  .adv-rail .adv-btn.block{width:auto;}
  .adv-rail .adv-xl-msg{flex:1 1 100%;padding-top:0;}
}

/* ---------- Formulaire de quantité (Stock : définir / ajouter) ---------- */
/* Les champs portaient .f-lab/.f-sel, qui ne sont stylés QUE dans .adv-filtre : hors de la
   barre de filtre ils retombaient sur le rendu brut du navigateur, hors DA. On reprend ici
   la même grammaire, pour la page comme pour la pop-up. */
.adv-qt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;}
.adv-qt .f-lab{display:flex;flex-direction:column;gap:4px;font-size:11px;text-transform:uppercase;
  letter-spacing:.3px;color:var(--muted);}
.adv-qt .f-sel{padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--txt);font-size:13px;text-transform:none;letter-spacing:0;}
.adv-qt .f-sel:focus{outline:2px solid var(--info-bd);outline-offset:1px;}
/* Ligne d'identité au-dessus du formulaire (réf. + état + désignation) : elle était posée
   sans style, la référence se noyait dans le texte courant. */
.dl-plat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--navy);}

/* ---------- Rafraîchir + fraîcheur de l'instantané, dans le bandeau (17/08) ----------
   Les écrans Stock lisent un instantané rafraîchi en fond : l'utilisateur doit pouvoir voir
   DE QUAND il date, et le forcer. Discret par construction — ce n'est pas une alerte. */
.adv-topbar .maj{display:flex;align-items:center;gap:8px;margin-left:auto;}
.adv-topbar .maj + .status{margin-left:14px;}
.adv-topbar .maj #majQuand{font-size:11.5px;color:rgba(255,255,255,.8);white-space:nowrap;}
.adv-topbar .maj .adv-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff;}
.adv-topbar .maj .adv-btn:hover{background:rgba(255,255,255,.26);}
.adv-topbar .maj .adv-btn:disabled{opacity:.55;cursor:progress;}

/* ---------- Alertes de fond (échec d'une écriture optimiste, 17/08) ----------
   Une écriture partie en arrière-plan peut échouer alors que l'utilisateur est passé à autre
   chose : le message doit le rattraper où qu'il soit, sans voler le focus ni bloquer l'écran. */
.adv-alertes{position:fixed;top:14px;right:14px;z-index:1200;display:flex;flex-direction:column;
  gap:8px;max-width:min(420px,calc(100vw - 28px));}
.adv-alerte{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--adv-red);
  border-radius:var(--r-md);box-shadow:var(--shadow-modal);padding:11px 13px;font-size:13px;
  color:var(--txt);display:flex;gap:10px;align-items:flex-start;}
.adv-alerte.ok{border-left-color:var(--green);}
.adv-alerte .t{font-weight:700;display:block;margin-bottom:2px;color:var(--navy);}
.adv-alerte .x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px;margin-left:auto;flex:none;}

/* ---------- Choix entre deux chemins d'action (Réceptions Glavista, 17/08) ----------
   Deux gestes exclusifs qui n'ont pas les mêmes conséquences : l'un fait entrer du stock,
   l'autre prépare un mail au fournisseur. Ils sont donc présentés à POIDS ÉGAL et en pleine
   largeur, côte à côte — pas noyés dans une rangée avec les actions secondaires. */
.adv-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.adv-choix .adv-btn{width:100%;padding:13px 15px;font-size:14px;}
@media(max-width:600px){ .adv-choix{grid-template-columns:1fr;} }
/* Variante « alerte » : le chemin non conforme doit se distinguer du chemin normal sans
   crier au danger (ce n'est pas destructif) — on reprend les jetons d'avertissement. */
.adv-btn.alerte{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-tx);}
.adv-btn.alerte:hover{background:#f9edd7;}
/* Actions secondaires sous le choix (photo) : visibles, mais clairement d'un autre rang. */
.adv-secondaire{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line);}

/* ---------- Fenêtre de confirmation, empilée au-dessus de la pop-up (17/08) ---------- */
/* `.dessus` : la pop-up article vaut z-index 1000, la confirmation doit passer devant SANS
   la fermer — on garde le contexte de ce qu'on valide sous les yeux. */
.adv-overlay.dessus{z-index:1100;background:rgba(31,58,86,.55);align-items:center;padding:34px 16px;}
/* Une confirmation n'est pas un écran de travail : coque plus étroite que la fiche (860 px). */
.adv-modal.cf{width:560px;}
.adv-modal.cf .head h2{font-size:19px;}
.adv-modal.cf .body{padding:18px 24px;}
.adv-modal.cf .actions{align-items:center;}
@media(max-width:720px){
  .adv-overlay.dessus{align-items:flex-start;padding:10px 8px 24px;}
}

/* ============================================================
   Ajout 18/08 — LOTS : lignes dépliables (lecture seule)
   Le contenu d'un lot se lit sans ouvrir la pop-up : un chevron déplie la ligne sur place et
   montre ses fiches. Le déplié est une SURFACE SECONDAIRE (var(--panel)) portant une petite
   table encadrée : on voit tout de suite que c'est du détail, pas une nouvelle liste.
   ============================================================ */
.adv-chev{display:inline-block;width:14px;margin-right:6px;text-align:center;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;user-select:none;
  transition:transform .12s ease,color .12s;}
.adv-chev:hover{color:var(--cyan);}
.adv-chev:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px;}
.adv-chev.ouvert{transform:rotate(90deg);color:var(--cyan);}
/* La ligne dépliée et son détail forment un bloc : même fond, et pas d'effet de survol sur le
   détail (il n'y a rien à y cliquer). */
.adv-table tbody tr.l-ouvert{background:var(--panel);}
.adv-table tbody tr.l-fiches > td{padding:0 6px 10px 26px;background:var(--panel);}
.adv-table tbody tr.l-fiches:hover{background:var(--panel);cursor:default;}
.adv-sous-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;}
.adv-sous-table th,.adv-sous-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #f1f4f8;}
.adv-sous-table tbody tr:last-child td{border-bottom:none;}
.adv-sous-table th{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.3px;}
.adv-sous-table td.n,.adv-sous-table th.n{text-align:right;font-variant-numeric:tabular-nums;}

/* ============================================================
   Ajout 18/08 — COCKPIT de l'onglet Stock
   Deux zones titrées, et des TUILES D'ACTION : une tuile est un bouton (le clic emmène sur
   l'écran concerné, déjà filtré). Une pile vide passe en neutre et cesse d'être un bouton —
   pas d'alarme rouge pour rien. Même grammaire que les KPI (.adv-kpi) pour ne pas inventer
   un second langage visuel.
   ============================================================ */
.adv-zone-t{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  margin:0 0 8px;font-weight:700;}
.adv-zone-t + .adv-kpis, .adv-zone-t + .adv-tuiles{margin-bottom:18px;}
.adv-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.adv-tuile{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;font-family:inherit;cursor:pointer;
  transition:.12s;box-shadow:var(--shadow-card);}
.adv-tuile .l{font-size:11.5px;color:var(--muted);font-weight:600;}
.adv-tuile .v{font-size:22px;font-weight:800;color:var(--navy);line-height:1.15;}
.adv-tuile .h{font-size:11px;color:var(--muted);}
.adv-tuile:hover{border-color:#cfd8e2;transform:translateY(-1px);box-shadow:0 4px 14px rgba(31,58,86,.10);}
.adv-tuile:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
/* Couleur = urgence de la pile, portée par le filet de gauche (le chiffre reste lisible). */
.adv-tuile.c-red{border-left-color:var(--adv-red);} .adv-tuile.c-red .v{color:var(--adv-red);}
.adv-tuile.c-amber{border-left-color:var(--amber);} .adv-tuile.c-amber .v{color:var(--amber);}
.adv-tuile.c-cyan{border-left-color:var(--cyan);} .adv-tuile.c-cyan .v{color:var(--cyan);}
.adv-tuile.c-navy{border-left-color:var(--navy);}
/* Pile vide (ou source muette) : discrète, non cliquable, aucun effet de survol. */
.adv-tuile.c-neutre{border-left-color:var(--line);background:var(--panel);cursor:default;
  box-shadow:none;}
.adv-tuile.c-neutre .v{color:var(--muted);font-weight:700;}
.adv-tuile.c-neutre:hover{transform:none;box-shadow:none;border-color:var(--line);}
/* Bouton « voir tout » (18/08) — l'action de sortie d'une pile / d'un aperçu. C'était un lien
   texte gris (.adv-btn.ghost) : on ne le voyait pas. Il devient un vrai bouton posé sur la surface
   secondaire, avec un liseré d'accent CYAN — pas de ROUGE, réservé au CTA principal d'un écran.
   La flèche est portée par le CSS (::after) pour qu'aucun libellé n'ait à la transporter. */
.adv-btn.voir{background:var(--panel);border-color:var(--line);border-left:3px solid var(--cyan);
  color:var(--navy);font-weight:700;display:inline-flex;align-items:center;gap:7px;}
.adv-btn.voir::after{content:"→";font-size:14px;line-height:1;color:var(--cyan);transition:transform .12s;}
.adv-btn.voir:hover{background:#e9f1f7;border-color:#cfd8e2;border-left-color:var(--cyan);
  color:var(--cyan);}
.adv-btn.voir:hover::after{transform:translateX(2px);}
.adv-btn.voir:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

/* Bandeau « pile de travail » posé sur la liste du dépôt quand on arrive par une tuile. */
.adv-selection{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;
  padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--txt);}

/* ---------- Zone de contenu EN PLEIN (une page servie telle quelle dans le dash) ----------
   Un écran « plein » (la page SEPA) prend TOUTE la zone à droite du menu : ni gouttière, ni
   largeur maximale, et la hauteur qui reste sous le bandeau. Le menu de gauche ne bouge pas.
   LA RÈGLE : UN SEUL DÉFILEMENT, celui de la page. La colonne de contenu fait exactement une
   hauteur d'écran, donc le dashboard ne défile pas ; la page, elle, défile normalement dans
   la place qu'on lui donne. `:has()` fait le travail proprement ; la hauteur calculée reste
   comme filet pour un navigateur qui ne le connaîtrait pas (72 px = le bandeau haut). */
.content:has(> main.plein){display:flex;flex-direction:column;height:100vh;height:100dvh;}
main.plein{padding:0;max-width:none;display:flex;flex-direction:column;min-height:0;
  flex:1 1 auto;height:calc(100vh - 72px);}
main.plein > iframe{flex:1 1 auto;display:block;width:100%;min-height:0;border:0;
  background:#fff;}
/* LA BARRE DE DOCUMENTS de l'écran SEPA (08/09). Elle est DANS le dashboard, posée au-dessus
   de la page servie en plein : elle prend sa hauteur naturelle (`flex:0 0 auto`) et l'iframe
   prend tout le reste. LA RÈGLE NE CHANGE PAS — un seul défilement, celui de la page. */
.sepa-docs{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--txt);}
.sepa-docs .sd-t{font-weight:600;color:var(--navy);}
.sepa-docs .sd-msg{color:var(--muted);}
@media(max-width:720px){ .sepa-docs{padding:8px 10px;} }
@media print{ .sepa-docs{display:none !important;} }
/* Le menu reste visible et défile lui-même s'il dépasse (il ne dépasse pas aujourd'hui). */
.layout:has(main.plein) .adv-side{overflow-y:auto;}
@media(max-width:720px){ main.plein{height:calc(100dvh - 64px);} }
@media print{ main.plein{display:none !important;} }

/* ---------- Référence technique tronquee (IBAN, RUM) ----------
   Un IBAN masque se lit chiffre par chiffre : chasse fixe, et des chiffres a largeur egale
   pour que deux mandats s'alignent verticalement dans la colonne. */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--txt);white-space:nowrap;}

/* ---------- Navigateur de période (Compta / Finance) ----------
   Deux flèches et la période en clair, dans la barre de filtres. Le libellé est en gras
   parce que c'est LUI qu'on lit pour savoir ce que montrent les chiffres au-dessus. */
.adv-per{display:inline-flex;align-items:center;gap:8px;}
.adv-per b{font-size:13px;color:var(--navy);min-width:9ch;text-align:center;}
.adv-per .adv-btn[disabled]{opacity:.4;cursor:default;}

/* ---------- État vide « À venir » (squelette d'un écran pas encore livré) ----------
   Un écran qui n'a rien à montrer le dit dans une carte, au centre, en teinte secondaire :
   ni tableau à colonnes vides (qui laisse croire à un bug), ni page blanche. Le liseré
   pointillé signale « emplacement réservé », pas « erreur » — donc aucune couleur d'état. */
.adv-avenir{text-align:center;padding:26px 16px;border:1px dashed var(--line);
  border-radius:var(--r-sm);background:var(--panel);}
.adv-avenir .ic{font-size:26px;line-height:1;margin-bottom:8px;}
.adv-avenir b{display:block;color:var(--navy);font-size:13px;}
.adv-avenir p{margin:6px auto 0;max-width:52ch;font-size:12px;color:var(--muted);line-height:1.5;}

/* ============================================================
   Ajout 18/08 — IMPRESSION (sous-onglet Mouvements)
   Le papier n'a pas de menu, pas de bouton et pas de filtre : il porte un en-tête ADV, ce qui a
   été filtré, le tableau, et un pied qui dit combien de lignes ont été tirées. Tout le chrome du
   dashboard est masqué ; les deux blocs `.impr-seul` sont au contraire RÉVÉLÉS.
   ============================================================ */
.impr-seul{display:none;}
@media print{
  /* 1. Le chrome disparaît : menu, bandeau, filtres, boutons, KPI, rail, notes de bas d'écran. */
  .adv-side, .adv-topbar, .adv-filtre, .adv-kpis, .adv-rail, .adv-btn, .adv-alerte,
  .adv-overlay, .adv-foot{display:none !important;}
  /* 2. La page occupe la feuille : pas de colonnes, pas d'ombre, pas de fond gris. */
  body{background:#fff !important;color:#000;}
  .adv-zone, .adv-zone > .z-main, #app, #appwrap{display:block !important;width:auto !important;
    max-width:none !important;margin:0 !important;padding:0 !important;}
  .adv-card{border:none !important;box-shadow:none !important;}
  .adv-card > h3{display:none !important;}
  .adv-card > .c{padding:0 !important;}
  /* 3. Le tableau ne défile plus : il se coupe proprement d'une page à l'autre. */
  .adv-scrollx{overflow:visible !important;}
  .adv-table{font-size:10.5px;width:100% !important;min-width:0 !important;}
  .adv-table th{color:#000;border-bottom:1px solid #000;}
  .adv-table td{border-bottom:1px solid #ddd;}
  .adv-table tr{page-break-inside:avoid;}
  .adv-table thead{display:table-header-group;}   /* l'en-tête se répète à chaque page */
  /* Les étiquettes de couleur redeviennent du texte encadré : une puce grise ne dit rien sur
     une feuille en noir et blanc. */
  .adv-tag{background:none !important;color:#000 !important;border:1px solid #999;padding:0 4px;}
  .empty{color:#666;}
  /* 4. Les blocs d'impression, eux, apparaissent. */
  .impr-seul{display:block !important;}
  .impr-entete{margin:0 0 10px;padding:0 0 8px;border-bottom:2px solid #000;}
  .impr-marque{font-size:15px;font-weight:800;letter-spacing:.5px;}
  .impr-marque span{font-size:10px;font-weight:600;letter-spacing:.2px;margin-left:6px;}
  .impr-entete h1{font-size:17px;margin:6px 0 4px;}
  .impr-meta{font-size:10.5px;color:#333;}
  .impr-pied{margin-top:10px;padding-top:6px;border-top:1px solid #000;font-size:10.5px;}
  /* LOTS : la feuille a ses propres colonnes (lot · véhicules · fiches · stock partagé ·
     emplacement · valeur), donc la table de l'écran sort et la table dédiée entre. Les
     sous-lignes de références passent en petit sous la désignation. */
  .impr-lots-ecran{display:none !important;}
  .impr-sous{font-size:9px;color:#444;}

  /* La feuille « état du stock » ne porte pas le PRIX DE REVENTE : un état de stock se lit au
     coût. La colonne est masquée par sa POSITION (6ᵉ de COLS_STOCK) et seulement dans cette
     table (`.impr-stock`) ; un contrôle de rendu verrouille cette position pour que le jour où
     l'ordre des colonnes change, le test le dise au lieu de masquer la mauvaise colonne. */
  .impr-stock .adv-table th:nth-child(6), .impr-stock .adv-table td:nth-child(6){display:none !important;}

  /* LISTE DE PRÉPARATION (22/08) : la 5ᵉ colonne ne porte que le bouton « Marquer préparée » —
     sur papier elle serait une colonne vide. Masquée par sa POSITION et seulement dans cette
     table (`.impr-prep`), comme la colonne de prix de l'état du stock ; un contrôle de rendu
     verrouille cette position, pour que le jour où l'ordre des colonnes change le test le dise
     au lieu de masquer la mauvaise colonne. */
  .impr-prep .adv-table th:nth-child(5), .impr-prep .adv-table td:nth-child(5){display:none !important;}
  /* Les pièces à sortir restent LISIBLES : l'emplacement en gras, à droite, comme à l'écran —
     c'est ce qu'on suit du doigt dans l'allée. C'est un document INTERNE, l'emplacement y est. */
  .p-prep{border-bottom:1px solid #eee !important;padding:2px 0 !important;}
  .p-prep > .r{font-size:10px;} .p-prep > .r .d{color:#444;}
  .p-prep > .e{font-size:10px;}
  .p-prep > .e .empl{font-weight:700;}
  .prep-pieces{border-top:1px solid #999 !important;margin-top:4px !important;}

  @page{margin:14mm 12mm;}
}
/* ---------- Responsive ---------- */
@media(max-width:720px){
  /* Stock (S1) : 6 colonnes dont trois chiffrées. Sur un téléphone en dépôt, les écraser
     rendrait les montants illisibles -> le tableau défile HORIZONTALEMENT dans son propre
     conteneur (.adv-scrollx), jamais la page. Posé explicitement par l'écran Stock, pour ne
     rien changer au rendu des autres onglets. */
  .adv-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .adv-scrollx > .adv-table{min-width:700px;}   /* 7 colonnes depuis S1b (achat + revente) */
  .adv-modal .body .cols{grid-template-columns:1fr;}
  .adv-overlay{padding:10px 8px 24px;}          /* pop-up quasi plein écran sur mobile */
  .adv-modal{border-radius:var(--r-md);}
  .adv-modal .head{padding:16px;} .adv-modal .body{padding:16px;} .adv-modal .actions{padding:12px 16px;}
  /* LIVRAISONS (19/08) : ces deux listes portent un BOUTON D'ACTION en dernière colonne. Le
     défilement horizontal du Stock ne convient pas — le bouton finit hors écran et personne
     ne va le chercher. Chaque ligne devient donc une CARTE empilée, libellé de colonne à
     gauche de la valeur (data-l), et l'action en pleine largeur au bas de la carte. */
  .adv-scrollx > .adv-table.adv-livr{min-width:0;}
  .adv-livr thead{display:none;}
  .adv-livr, .adv-livr tbody, .adv-livr tr, .adv-livr td{display:block;width:100%;}
  .adv-livr tr{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
    margin-bottom:10px;padding:9px 12px;}
  .adv-livr tr:hover{background:var(--card);}
  .adv-livr td{border:none;padding:3px 0;display:flex;gap:10px;align-items:baseline;}
  .adv-livr td::before{content:attr(data-l);flex:0 0 96px;font-size:10.5px;text-transform:uppercase;
    letter-spacing:.3px;color:var(--muted);}
  .adv-livr td.n{text-align:left;}
  .adv-livr td.act{display:block;padding-top:9px;}
  .adv-livr td.act::before{content:none;}
  .adv-livr td.act .adv-btn{width:100%;}
  /* La ligne « vide » (aucune commande) n'est pas une carte de données : elle garde son texte. */
  .adv-livr td.empty::before{content:none;}
  .adv-livr td.empty{display:block;text-align:center;}
  /* La saisie de livraison : le champ « Centre livré » prend toute la largeur du téléphone. */
  .adv-qt .f-lab{width:100%;}
  /* SAISIE PAR PIÈCE sur téléphone (2ᵉ passe) : la bascule Conforme / Cassée s'empile — deux
     moitiés de 160 px côte à côte sur un écran de 360 px, on tape à côté. Et les vignettes
     grossissent : une photo de vitrage fêlé à 72 px ne prouve rien à bout de bras. */
  .adv-bascule{flex-direction:column;}
  .adv-bascule .b{border-right:none;border-bottom:1px solid #cfd8e2;padding:12px;}
  .adv-bascule .b:last-child{border-bottom:none;}
  .adv-vig, .adv-vig img{width:88px;}
  .adv-vig img{height:88px;}
  .adv-piece > .tete{flex-wrap:wrap;}
}

/* ---------- Livraisons — LA SAISIE PAR PIÈCE (2ᵉ passe, 19/08) ----------
   Une carte par ligne de commande : numéro, réf + désignation, la bascule d'état, l'observation
   quand c'est cassé, les vignettes. Le liseré GAUCHE porte l'état — c'est ce qu'on voit en
   premier en descendant la liste sur un téléphone. Ambre pour la casse (un constat, pas une
   erreur de l'utilisateur : le rouge reste au CTA et aux échecs). */
.adv-piece{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;}
.adv-piece.casse{border-left-color:var(--amber);background:var(--warn-bg);}
.adv-piece > .tete{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-bottom:1px solid var(--line);}
.adv-piece.casse > .tete{border-bottom-color:var(--warn-bd);}
.adv-piece > .tete .num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.adv-piece > .tete .id{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--navy);}
.adv-piece > .tete .id .qte{margin-left:7px;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.adv-piece > .tete .adv-tag{flex:none;align-self:center;}
.adv-piece > .corps{padding:10px 12px;display:flex;flex-direction:column;gap:10px;}

/* LA CASE « LIVRÉE » (3ᵉ passe) — première chose de la carte, parce que c'est la première
   décision : cette pièce part-elle aujourd'hui ? Cochée par défaut. La zone de tap fait toute la
   hauteur de l'étiquette (doigt sur un quai, pas souris). */
.adv-piece > .tete .coche{flex:none;display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:4px 8px 4px 4px;border-radius:var(--r-sm);user-select:none;}
.adv-piece > .tete .coche:hover{background:var(--panel);}
.adv-piece > .tete .coche input{width:20px;height:20px;accent-color:var(--green);margin:0;cursor:pointer;}
.adv-piece > .tete .coche span{font-size:11px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--muted);font-weight:600;}
.adv-piece > .tete .coche.fige{cursor:default;opacity:.7;}
.adv-piece > .tete .coche.fige:hover{background:transparent;}
/* Pièce DÉCOCHÉE : elle reste lisible mais s'efface — son corps n'est même pas rendu. */
.adv-piece.non-livree{background:var(--panel);border-left-color:var(--line);}
.adv-piece.non-livree > .tete{border-bottom:none;}
.adv-piece.non-livree > .tete .id{color:var(--muted);}
/* Pièce d'un tour PRÉCÉDENT : acquise, verrouillée, liseré vert. */
.adv-piece.verrou{border-left-color:var(--green);}
.adv-piece.verrou > .tete{border-bottom-color:var(--line);}

/* La bascule Conforme / Cassée : deux moitiés d'un même bouton, l'actif rempli. Pas une case à
   cocher perdue dans un formulaire — le statut est LA décision de l'écran. */
.adv-bascule{display:flex;border:1px solid #cfd8e2;border-radius:var(--r-sm);overflow:hidden;}
.adv-bascule .b{flex:1 1 0;padding:10px 12px;font-size:13.5px;font-weight:600;cursor:pointer;
  background:var(--card);color:var(--muted);border:none;border-right:1px solid #cfd8e2;
  transition:.12s;}
.adv-bascule .b:last-child{border-right:none;}
.adv-bascule .b:hover{background:var(--panel);}
.adv-bascule .b.actif{background:var(--navy);color:#fff;}
.adv-bascule .b.ko.actif{background:var(--amber);color:#fff;}
.adv-bascule .b:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}

/* L'observation d'une pièce cassée : obligatoire, et le dit. */
.adv-obs-piece{display:flex;flex-direction:column;gap:4px;font-size:11px;text-transform:uppercase;
  letter-spacing:.3px;color:var(--muted);}
.adv-obs-piece .req{text-transform:none;letter-spacing:0;color:var(--warn-tx);font-weight:600;}
.adv-obs-piece textarea{text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--txt);
  font-family:var(--font);}

/* Les vignettes : on VOIT la photo, on ne lit pas un nom de fichier. */
.adv-vignettes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.adv-vig{position:relative;margin:0;width:72px;}
.adv-vig img{display:block;width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);}
.adv-vig .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--err-tx);font-size:11px;
  line-height:1;cursor:pointer;box-shadow:var(--shadow-card);}
.adv-vig .x:hover{background:var(--err-bg);}
.adv-vig .x:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.adv-vig figcaption{font-size:10.5px;color:var(--muted);text-align:center;margin-top:3px;}

/* ===================== LISTE DE PICKING (Préparation, 22/08) =====================
   Premier ajout au CSS depuis 7 passes : la ligne de picking est un objet visuel réellement
   nouveau. Une pièce à sortir se lit en deux temps — CE QU'ON PREND à gauche (réf en gras, c'est
   ce qui est écrit sur l'étiquette du vitrage, puis la désignation), OÙ ON LE PREND à droite.
   L'emplacement est aligné à droite et en chiffres tabulaires : en descendant la liste du regard,
   les allées se lisent en colonne. Aucune couleur d'état ici : ce n'est ni une alerte ni un
   succès, c'est une adresse. */
.prep-pieces{margin-top:8px;border-top:1px solid var(--line);}
.p-prep{display:flex;align-items:baseline;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line);}
.p-prep:last-child{border-bottom:none;}
.p-prep > .r{flex:1 1 auto;min-width:0;font-size:13px;color:var(--navy);}
.p-prep > .r .qte{margin-left:6px;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.p-prep > .r .d{display:block;font-size:12px;color:var(--muted);}
.p-prep > .e{flex:none;text-align:right;font-size:13px;}
.p-prep > .e .empl{font-variant-numeric:tabular-nums;letter-spacing:.2px;color:var(--navy);}
@media(max-width:720px){
  /* PICKING SUR TÉLÉPHONE. La cellule des pièces ne peut pas partager sa ligne avec l'étiquette
     de 96 px des cartes repliées : la liste d'allées serait comprimée à rien. Elle prend donc
     toute la largeur, son étiquette passe au-dessus, et la ligne de pièce s'aère (l'emplacement
     reste à droite : c'est ce qu'on suit du pouce en descendant). */
  .adv-livr td.prep-cell{display:block;}
  .adv-livr td.prep-cell::before{display:block;flex:none;margin-bottom:5px;}
  .prep-pieces{margin-top:6px;}
  .p-prep{padding:8px 0;gap:12px;}
  .p-prep > .r{font-size:14px;}
  .p-prep > .e{font-size:14px;}
}

/* ============ GRAPHIQUES DU COCKPIT PRÉVISIONNEL (21/08) ============
   Un canvas n'a pas de hauteur propre : sans conteneur dimensionné, Chart.js retombe sur un
   ratio et le graphique s'étire ou disparaît. La hauteur est donc posée ICI, et elle diminue sur
   téléphone — un graphique de 300 px sur un écran de 640 px de haut mange tout l'écran. */
.adv-graph{position:relative;height:300px;width:100%;}
.adv-graph.sm{height:250px;}
/* Deux graphiques côte à côte, qui s'empilent quand la place manque. */
.adv-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
/* Le tableau de saisie des charges : le champ occupe la cellule, et une ligne incomplète est
   signalée par un fond — elle n'est PAS comptée dans le total, il faut que ça se voie. */
.adv-table input.f-sel.plein{width:100%;min-width:120px;}
.adv-table input.f-sel.num{width:120px;text-align:right;}
.adv-table tr.incomplet>td{background:var(--warn-bg,#fdf6e7);}
.adv-table tfoot td{border-top:2px solid var(--line);font-size:13.5px;padding-top:10px;}
@media(max-width:900px){
  .adv-duo{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .adv-graph{height:240px;}
  .adv-graph.sm{height:220px;}
  .adv-table input.f-sel.num{width:100%;}
}

/* ===== JAUGE — l'objectif du mois (Accueil, 03/09) =====
   Trois éléments et pas un de plus : la piste, le remplissage, le repère du seuil. Le seuil est
   posé EN ABSOLU sur la même piste — c'est ce qui permet de lire « je couvre mes charges » et
   « j'atteins mon objectif » d'un seul coup d'œil, sans légende. */
.adv-jauge{position:relative;height:28px;border-radius:14px;background:var(--bg);
  border:1px solid var(--line);overflow:hidden;}
.adv-jauge .rempli{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);opacity:.85;
  transition:width .25s ease;}
.adv-jauge.atteint .rempli{background:var(--green);}
.adv-jauge .txt{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:800;color:var(--navy);}
.adv-jauge-seuil{position:absolute;top:0;bottom:0;width:2px;background:var(--adv-red);z-index:2;}
.adv-jauge-pied{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-size:11.5px;color:var(--muted);}
/* Deux barres sur la meme echelle (03/09) : un libelle a gauche, la piste a droite. Le
   REALISE est en plein, le PROJETE en teinte — un fait et une prevision ne se lisent pas
   avec le meme poids visuel. */
.adv-jauge-ligne{display:grid;grid-template-columns:66px 1fr;align-items:center;gap:10px;}
.adv-jauge-ligne + .adv-jauge-ligne{margin-top:8px;}
.adv-jauge-ligne .lib{font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;}
.adv-jauge .rempli.teinte{opacity:.32;}
@media (max-width:520px){.adv-jauge-ligne{grid-template-columns:52px 1fr;gap:7px;}}

/* ===== UN KPI QUI MÈNE QUELQUE PART (03/09) =====
   Il garde EXACTEMENT l'aspect d'un KPI — c'est le même fait, à la même place — et ne gagne
   que l'affordance du clic. Sans cette règle, le navigateur dessinerait un bouton gris avec
   sa police par défaut : une classe posée sans règle est inerte (leçon du 31/08). */
.adv-kpi-vers{display:block;width:100%;text-align:left;font:inherit;color:inherit;
  cursor:pointer;appearance:none;-webkit-appearance:none;}
.adv-kpi-vers:hover{border-color:#cfd8e2;transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(31,58,86,.10);}
.adv-kpi-vers:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}