/* ============================================================================
   AgentFlow · Console cabinet — COMPOSANTS
   Dépend de theme.css. Zéro librairie, zéro build. Charger dans cet ordre.
   ========================================================================== */

*{box-sizing:border-box}
html,body{margin:0}
body{
  /* Pas de fonts.googleapis.com : une console qui affiche « 100 % local (UE) »
     ne va pas chercher sa typo chez Google à chaque chargement. Pile système
     (Segoe UI Variable sur Windows, SF sur Mac) ; si Inter est auto-hébergé
     ou installé, il est pris en premier. Recette d'auto-hébergement : SKILL.md */
  font-family:'Inter var','Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',
    'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:14px; line-height:1.5; letter-spacing:-.01em;
  /* ⛔ PLUS DE VOILE (24/09/2026, tour 6, T6-A6) : deux dégradés radiaux, dont
     un à 7 % de l'accent, peignaient un rectangle rose-sable derrière la
     première rangée de chaque page (« se lit comme une tache »). Fond plat. */
  background:var(--bg);
}
/* LARGEUR DES PAGES — 1200 px jusqu'au 15/08/2026, min(1600px,100%) depuis.
   Copie amont du kit servi (`console-os/deployer/kit-console.css`) : sans elle,
   le prochain build reposerait 1200 px par-dessus la flotte. Voir le bloc du
   meme nom dans le kit pour la mesure (hote de 1625 px a 1920, contenu arrete
   a 1200) et pour la raison de 1600 plutot que `none`.
   Le clamp de goutiere remplace le centrage qui faisait respirer le contenu
   sous 1600 px de place. */
.wrap{max-width:min(1600px,100%);margin:0 auto;padding:16px clamp(26px,2.2vw,44px) 72px}
/* `.wrap.wide` RETIRE : a 1200 de base il elargissait, a 1600 il retrecirait.
   Aucun code servi ne le posait (mesure du 15/08). */
.mono{font-variant-numeric:tabular-nums}
.hint{margin:0 0 16px;font-size:12.5px;color:var(--ink-3)}
.sec{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin:26px 2px 13px}

/* Accessibilité : un anneau de focus visible partout, jamais supprimé.
   :focus-visible → invisible à la souris, présent au clavier. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--royal); outline-offset:2px; border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- en-tête -- */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px}
.logo{width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:-.02em;
  box-shadow:var(--glow);flex:none}
.brand h1{font-size:19px;margin:0;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.brand p{margin:1px 0 0;font-size:13px;color:var(--ink-3);letter-spacing:-.01em}
.head-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.updated{font-size:12.5px;color:var(--ink-3)}
.updated b{color:var(--ink-2);font-weight:600}

/* ---------------------------------------------------------------- boutons --
   Loi : UN SEUL bouton en dégradé par écran (l'action primaire). Tout le
   reste est fantôme. Le destructif n'est jamais en dégradé. */
.btn{border:0;color:#fff;background:var(--af-action,var(--grad));padding:9px 16px;border-radius:11px;
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  box-shadow:var(--shadow-btn);
  transition:transform var(--t-fast) ease, box-shadow var(--t-fast) ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn-h)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:var(--shadow-btn)}

.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--border-2);
  box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);transform:none;box-shadow:none}

.btn.danger{background:var(--err-bg);color:var(--err-tx);border:1px solid var(--err-br);
  box-shadow:none}
.btn.danger:hover{background:color-mix(in srgb,var(--err-dot) 12%,var(--surface));
  transform:none;box-shadow:none}

.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px}
.btn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- onglets --
   Le segmenté se pose aussi bien sur le blanc d'une barre d'OS que sur le gris
   d'une page : la piste est DESSINÉE (liseré), la pilule active porte une ombre
   ET un anneau, et l'inactif recule d'un ton. Le seul remplissage --surface-3
   ne suffit pas : sur du blanc il cesse de se voir (mesuré le 01/08 dans la
   barre de Surveillance, 2 % d'écart avec le fond, la pilule blanche tenue par
   une ombre unique). L'anneau est une BORDURE, pas une ombre : le style « doux »
   de l'OS impose box-shadow:none !important sur tout [role="tab"], une pilule qui
   ne tenait que par son ombre redevenait invisible (mesuré sur la démo le 01/08).
   Bordure transparente sur TOUS les onglets : l'actif ne décale personne. */
.tabs{display:flex;gap:3px;background:var(--surface-3);border:1px solid var(--border);
  border-radius:11px;padding:3px;margin-bottom:22px;width:fit-content;max-width:100%;
  overflow-x:auto}
.tab{border:1px solid transparent;background:transparent;color:var(--ink-3);padding:6px 15px;
  border-radius:8px;
  font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.01em;
  white-space:nowrap;transition:color var(--t-ui) ease,background var(--t-ui) ease,
  border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.tab:hover{color:var(--ink-2);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);
  border-color:color-mix(in srgb,var(--ink) 13%,transparent);
  box-shadow:0 1px 2px rgba(16,24,40,.10)}
.vue{display:none} .vue.on{display:block}

/* ------------------------------------------------------------------- KPI ---
   4 tuiles max. UNE SEULE porte l'accent (.accent) : celle qui répond à la
   question que le cabinet se pose en ouvrant la page. */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.kpi{padding:20px 20px 18px;position:relative;overflow:hidden}
.kpi .lbl{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.kpi .val{font-size:36px;font-weight:600;letter-spacing:-.03em;margin:9px 0 3px;line-height:1;
  font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em}
.kpi .sub b{color:var(--ok-tx);font-weight:600}
/* ⛔ L'accent n'est pas une encre (doctrine du 19/09 ; T4-05, 23/09/2026) : la
   tuile « accent » porte son chiffre à l'encre, sans filet de couleur. */
.kpi.accent .val{color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
.kpi.accent::after{content:none}
.kpi.prio .val{color:var(--prio-tx)}
.kpi.alert .val{color:var(--err-tx)}

/* --------------------------------------------------------------- bandeaux --
   Un bandeau n'existe que s'il y a quelque chose à faire. Sinon il est absent
   (pas « tout va bien » en vert : c'est du bruit permanent). */
.banner{display:none;align-items:center;gap:13px;margin-bottom:20px;padding:15px 19px;
  border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid transparent}
.banner.on{display:flex}
.banner .ic{width:34px;height:34px;border-radius:10px;color:#fff;display:grid;place-items:center;
  flex:none;font-size:16px;font-weight:700}
/* ⛔ LE TEXTE D'UN BANDEAU SE REPLIE (02/09/2026). Un enfant de flex a
   `min-width:auto` : une phrase longue refuse de rétrécir, pousse la croix de
   fermeture hors de l'écran et fait DÉFILER LA PAGE horizontalement. Mesuré
   sur la Révision à 1 024 px : page 1 301 px, croix à +277 px. Une page de
   console ne défile jamais de côté. */
.banner>*:not(.ic){min-width:0}
.banner .tt{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.banner .st{font-size:12.5px;margin-top:1px;opacity:.9;overflow-wrap:anywhere}
.banner .go{margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap}
.banner[data-s="err"]{background:var(--err-bg);border-color:var(--err-br);color:var(--err-tx)}
.banner[data-s="err"] .ic{background:var(--err-dot)}
.banner[data-s="warn"]{background:var(--warn-bg);border-color:var(--warn-br);color:var(--warn-tx)}
.banner[data-s="warn"] .ic{background:var(--warn-dot)}
.banner[data-s="info"]{background:var(--info-bg);border-color:color-mix(in srgb,var(--info-dot) 30%,var(--surface));color:var(--info-tx)}
.banner[data-s="info"] .ic{background:var(--info-dot)}
.banner[role="button"]{cursor:pointer;transition:filter var(--t-ui) ease}
.banner[role="button"]:hover{filter:brightness(.97)}

/* --------------------------------------------------------- tuiles cliquables */
/* `auto-fit`, PAS `auto-fill` (15/08) : a 1600 px, `auto-fill` fabrique les
   colonnes que la largeur permet et laisse vides celles qu'il ne peut pas
   remplir (3 tuiles serrees a gauche d'une grille de 6, moitie d'ecran
   vide sur Pilotage). `auto-fit` reduit les pistes vides a zero. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.tile{padding:17px 18px;cursor:pointer;position:relative;overflow:hidden;text-align:left;
  transition:transform var(--t-fast) ease, box-shadow var(--t-fast) ease}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.tile[aria-pressed="true"]{border-color:var(--royal);box-shadow:var(--ring)}
.tile .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tile .nm{font-weight:600;font-size:14.5px;letter-spacing:-.015em}
.tile .cnt{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;margin:14px 0 2px;
  font-variant-numeric:tabular-nums}
.tile .cnt.n{color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
.tile .cnt.z{color:var(--ink-4)}
.tile .cl{font-size:12px;color:var(--ink-3)}

/* --------------------------------------------------------------- panneaux -- */
.row{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:20px}
/* Un enfant de grille a min-width:auto : il REFUSE de descendre sous son
   min-content et élargit la page entière au lieu de rétrécir. Douze étiquettes
   de dates en nowrap dans un graphe suffisent à faire déborder tout le site sur
   mobile. min-width:0 est la seule ligne qui l'empêche. */
.row > *{min-width:0}
.panel{padding:20px 22px}
.panel h3{margin:0 0 2px;font-size:15px;font-weight:600;letter-spacing:-.018em}

/* --------------------------------------------------------------- toolbar --- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:8px 0 13px;flex-wrap:wrap}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);
  padding:7px 14px;border-radius:22px;font-size:12.5px;font-weight:500;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:7px;letter-spacing:-.005em;
  transition:background var(--t-ui) ease,border-color var(--t-ui) ease}
.pill:hover{background:var(--surface-2);border-color:var(--ink-4)}
.pill[aria-pressed="true"]{background:var(--af-action,var(--grad));border-color:transparent;color:#fff;
  box-shadow:var(--shadow-btn);font-weight:600}
/* 23/08/2026 : `opacity:.62` rendait le compteur EFFECTIVEMENT #99999c
   sur blanc, soit 2,84:1 — axe-core l'a leve en « serious ». Une mesure
   du couple (color, backgroundColor) ne le VOIT PAS : les deux valeurs
   sont conformes, c'est la composition qui ne l'est pas. L'opacite est
   un troisieme terme, et on l'oublie parce qu'elle ne vit pas dans les
   deux proprietes qu'on a l'habitude de lire.
   Le compteur reste DISCRET par sa couleur, plus par sa transparence. */
.pill .c{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.pill[aria-pressed="true"] .c{opacity:.85}
.search{position:relative}
.search input{border:1px solid var(--border-2);border-radius:11px;padding:9px 13px 9px 35px;
  font-size:13px;width:262px;max-width:100%;background:var(--surface);color:var(--ink);
  outline:none;font-family:inherit;transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{border-color:var(--royal);box-shadow:var(--ring)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.fld{border:1px solid var(--border-2);border-radius:10px;padding:9px 13px;font-size:13px;
  font-family:inherit;background:var(--surface);color:var(--ink);outline:none;
  transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.fld:focus{border-color:var(--royal);box-shadow:var(--ring)}

/* --------------------------------------------------------------- tableau --- */
.tablecard{overflow:hidden}
/* Un en-tête collant (thead th ci-dessous) ne colle QUE dans un conteneur qui
   défile vraiment. Sans hauteur max, .tscroll grandit à la taille du tableau,
   ne défile jamais, et c'est la PAGE qui bouge : l'en-tête part en haut et le
   cabinet lit 300 lignes sans savoir quelle colonne il regarde. D'où le
   plafond. Une console qui veut un tableau court : --tscroll-max:none. */
.tscroll{overflow:auto;-webkit-overflow-scrolling:touch;max-height:var(--tscroll-max,64vh)}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);
  white-space:nowrap;position:sticky;top:0;z-index:1}
tbody td{padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:var(--surface-2)}
tbody tr[data-open]{cursor:pointer}
tbody tr.prio{background:color-mix(in srgb,var(--prio-dot) 5%,var(--surface))}
tbody tr.prio:hover{background:color-mix(in srgb,var(--prio-dot) 9%,var(--surface))}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.z{color:var(--ink-4)}          /* un zéro s'écrit « · », il ne hurle pas */
.cell-when{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.cell-2l small{display:block;color:var(--ink-3);font-size:11.5px;font-weight:400}

/* Tri : le th EST un bouton (clavier + lecteur d'écran), pas un th cliquable. */
th.sort{padding:0}
th.sort button{width:100%;display:flex;align-items:center;gap:5px;background:none;border:0;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;
  padding:12px 18px;white-space:nowrap}
th.n.sort button{justify-content:flex-end}
/* ⛔ L'ACCENT DE MARQUE BRUT NE PASSE PAS SUR UN FOND CLAIR. Mesure du
   03/09 sur la demo (accent #e05207) : le libelle d'en-tete au survol et
   la fleche de la colonne triee tombaient a 3,71:1 sur #fbfbfd, leve
   `serious` par axe-core. Un texte de 11 px et un glyphe de 9 px
   demandent 4,5:1.
   On ASSOMBRIT l'accent de 28 % au lieu de le remplacer : la couleur du
   cabinet reste reconnaissable, et le contraste passe quel que soit son
   accent (6,5:1 sur l'orange d'AgentFlow, 7,9:1 sur le bleu). Un repli
   `--ink` couvre les navigateurs sans `color-mix`. */
th.sort button:hover{color:var(--ink);color:color-mix(in srgb, var(--royal) 72%, #000)}
/* ⛔ LA FLÈCHE EST À GAUCHE DU TITRE (demande d'Augustin, 03/09/2026, sur la
   page Banque). À droite, elle se colle au titre de la colonne suivante quand
   l'en-tête est serré, et sur une colonne alignée à droite (`th.n`) elle passe
   carrément AVANT le libellé : l'œil ne sait plus à quelle colonne elle
   appartient. À gauche, elle est toujours du même côté, au même endroit,
   quelle que soit l'alignement de la colonne.
   `::before` et l'ordre du flex suffisent : rien à écrire dans les pages. */
th.sort button::before{content:"⇅";opacity:.3;font-size:9px}
th[aria-sort="ascending"] button::before{content:"↑";opacity:1;color:var(--ink);color:color-mix(in srgb, var(--royal) 72%, #000)}
th[aria-sort="descending"] button::before{content:"↓";opacity:1;color:var(--ink);color:color-mix(in srgb, var(--royal) 72%, #000)}
/* Sur une colonne de chiffres, le contenu est poussé à droite : la flèche
   reste NÉANMOINS avant le libellé (elle est le premier enfant en flux). */
th.n.sort button::before{order:-1}

/* ------------------------------------------------------- puces & étiquettes --
   6 tons, pas un de plus. L'app mappe SES statuts métier dessus :
   <span class="badge" data-s="ok">Classée</span> */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 9px;border-radius:20px;
  font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:-.005em;
  background:var(--mut-bg);color:var(--mut-tx)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9;flex:none}
.badge[data-s="ok"]{background:var(--ok-bg);color:var(--ok-tx)}
.badge[data-s="ok"] .dot{background:var(--ok-dot);opacity:1}
.badge[data-s="info"]{background:var(--info-bg);color:var(--info-tx)}
.badge[data-s="info"] .dot{background:var(--info-dot);opacity:1}
.badge[data-s="warn"]{background:var(--warn-bg);color:var(--warn-tx)}
.badge[data-s="warn"] .dot{background:var(--warn-dot);opacity:1}
.badge[data-s="prio"]{background:var(--prio-bg);color:var(--prio-tx)}
.badge[data-s="prio"] .dot{background:var(--prio-dot);opacity:1}
.badge[data-s="err"]{background:var(--err-bg);color:var(--err-tx)}
.badge[data-s="err"] .dot{background:var(--err-dot);opacity:1}
.badge[data-s="mut"]{background:var(--mut-bg);color:var(--mut-tx)}
.badge[data-s="mut"] .dot{background:var(--mut-dot);opacity:1}

/* Identifiant (code dossier, n° de pièce) : teinte de marque, jamais un statut. */
/* 23/09/2026 (Augustin) : une etiquette est a l'encre sur fond sable, jamais a l'accent (doctrine du 19/09). */
.chip{display:inline-block;background:var(--surface-3);color:var(--ink);
  border:1px solid var(--border);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}

/* ------------------------------------------------------- actions de ligne -- */
.kebab{border:0;background:transparent;color:var(--ink-3);font-size:17px;font-weight:700;
  width:28px;height:28px;border-radius:8px;cursor:pointer;line-height:1}
.kebab:hover{background:var(--mut-bg);color:var(--ink)}
.menu{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-pop);min-width:230px;padding:6px;display:none}
.menu.open{display:block}
.menu .mh{font-size:10.5px;color:var(--ink-3);padding:6px 10px 4px;text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
  padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit}
.menu button:hover{background:var(--surface-2)}
.menu button.danger{color:var(--err-tx)}
.menu button.danger:hover{background:var(--err-bg)}

/* ----------------------------------------------------------------- modale -- */
.ovl{position:fixed;inset:0;background:rgba(29,29,31,.45);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:50;padding:24px}
.ovl.open{display:flex}
.modal{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-modal);
  width:min(860px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal.lg{width:min(1040px,100%)}
/* ⛔ `.lg` EST DÉJÀ PRIS : c'est la légende d'un graphe (plus bas dans
   ce fichier), et elle porte `flex-wrap:wrap` + `gap:16px`. Déclarée
   APRÈS celle-ci à spécificité égale, elle les impose à toute modale
   `modal lg` : dès que son contenu dépasse 92vh, la colonne enveloppe
   et l'en-tête, le corps et le pied se posent CÔTE À CÔTE, hors de la
   boîte. Mesuré le 02/09 sur la carte de connexion de Collecte
   (modal-h 190 px à x=440, modal-b à x=646, modal-f à x=1702).
   On rétablit ici ce que `.modal` voulait dire. */
.modal.lg{flex-wrap:nowrap;gap:0}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-h h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.018em}
.modal-x{border:0;background:var(--mut-bg);color:var(--ink-2);width:30px;height:30px;border-radius:9px;
  cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;flex:none}
.modal-x:hover{background:var(--border)}
.modal-b{padding:18px 22px;overflow:auto}
.modal-b.split{display:grid;grid-template-columns:280px 1fr;gap:20px}
/* Pied de modale : message à gauche (margin-right:auto), actions à droite,
   la primaire toujours la plus à droite — c'est là que le pouce/curseur finit. */
.modal-f{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:15px 22px;border-top:1px solid var(--border);background:var(--surface-2)}
.msg{font-size:12.5px;margin-right:auto}
.msg.ok{color:var(--ok-tx)} .msg.err{color:var(--err-tx)}
.meta{display:flex;flex-direction:column;gap:11px;font-size:13px}
.meta .k{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.meta .v{margin-top:2px;color:var(--ink);word-break:break-word}
.prev{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;min-height:300px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.prev img{max-width:100%;max-height:60vh;object-fit:contain;display:block}
.prev iframe{width:100%;height:60vh;border:0}
.prev .noprev{color:var(--ink-3);font-size:13px;text-align:center;padding:28px}

/* ------------------------------------------------------------------ toast --
   Le retour d'une action déclenchée HORS modale (menu ⋮, tuile) vient ici.
   Ne jamais l'écrire dans le pied de page : personne ne le lit. */
.toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;
  padding:10px 14px;border-radius:11px;box-shadow:var(--shadow-pop);max-width:380px;
  display:flex;align-items:center;gap:9px;animation:toast-in .22s var(--ease)}
.toast.out{animation:toast-out .18s ease forwards}
.toast[data-s="ok"]{background:var(--ok-tx);color:#fff}
.toast[data-s="err"]{background:var(--err-tx);color:#fff}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}

/* ----------------------------------------------------------- progression --- */
.prog{display:none;align-items:center;gap:11px;margin-bottom:16px;padding:11px 15px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.prog.on{display:flex}
.prog .track{flex:1;height:7px;background:var(--surface-3);border-radius:5px;overflow:hidden}
.prog .fill{height:100%;background:var(--grad);border-radius:5px;transition:width .4s ease}
.prog .txt{font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- graphes ---
   Aucune librairie. Des div et un SVG suffisent, et rien ne casse au build. */
.bars{display:flex;align-items:flex-end;gap:9px;padding-top:8px;height:172px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.bar-wrap{width:100%;height:140px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;position:relative}
/* Pas de `transition:height` ici : une barre est recréée par innerHTML à chaque
   rendu, elle NAÎT à sa hauteur finale — la transition ne se joue jamais. C'est
   de l'animation morte, qui fait croire que ça bouge alors que rien ne bouge.
   L'entrée animée est un opt-in `.bars.anim`, réservé aux pages qui NE se
   rafraîchissent PAS toutes seules (rapport statique). Sur une console en
   auto-refresh, elle rejouerait toutes les 20 s : un clignotement, pas une info. */
/* ⚠ .bar est réservé aux barres HTML de AF.bars(). NE JAMAIS la poser sur un
   <rect> SVG : en SVG, `width` est une PROPRIÉTÉ CSS qui écrase l'attribut de
   géométrie. Le rect ferait 66 % de la largeur du graphe pendant que son
   attribut width dirait encore 29 — un graphe faux qu'aucune mesure d'attribut
   ne peut détecter (vécu le 14/07 sur l'histogramme YRIA). Une barre SVG se
   nomme autrement (.hb) et se vérifie avec getBBox(), jamais getAttribute(). */
.bar{width:66%;max-width:34px;background:var(--grad);border-radius:7px 7px 4px 4px;min-height:2px;
  box-shadow:0 4px 12px color-mix(in srgb,var(--grad-to) 20%,transparent);
  transform-origin:bottom;transition:filter var(--t-fast) ease}
.bars.anim .bar{animation:bar-in var(--t-move) var(--ease) both}
@keyframes bar-in{from{transform:scaleY(0)}}
.bar.zero{background:var(--border);box-shadow:none}  /* un jour à zéro reste visible */
.bar-wrap:hover .bar{filter:brightness(1.08)}
.bar-v{font-size:10.5px;font-weight:600;color:var(--ink-2);margin-bottom:3px;
  font-variant-numeric:tabular-nums;min-height:14px}
.bar-x{font-size:11px;color:var(--ink-3);white-space:nowrap;text-align:center}
.bar-x small{display:block;color:var(--ink-4);font-size:9.5px;margin-top:1px}
.tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:7px;
  background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:500;padding:5px 10px;
  border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;z-index:2;
  transition:opacity var(--t-fast) ease}
.bar-wrap:hover .tip,.bar-wrap:focus-within .tip{opacity:1}
/* Une infobulle centrée sur la 1re/dernière colonne dépasse du panneau et
   allonge la page. On l'ancre au bord au lieu de la centrer. */
.bar-col:first-child .tip{left:0;transform:none}
.bar-col:last-child .tip{left:auto;right:0;transform:none}
.bar-g{font-size:10px;font-weight:700;color:var(--ok-tx);background:var(--ok-bg);border-radius:20px;
  padding:1px 7px;margin-bottom:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-g.z{color:var(--ink-3);background:var(--surface-3);font-weight:600}

/* barre empilée + légende (répartition) */
.stack{height:9px;border-radius:6px;background:var(--surface-3);overflow:hidden;display:flex;margin-bottom:12px}
.stack span{height:100%}
.stack.anim span{animation:seg-in var(--t-move) var(--ease) both}
@keyframes seg-in{from{width:0}}
.legend{display:flex;flex-direction:column;gap:12px}
.legend .li{display:flex;align-items:center;gap:10px;font-size:13px}
.legend .dot{width:9px;height:9px;border-radius:3px;flex:none}
.legend .nm{color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .n{font-weight:600;font-variant-numeric:tabular-nums}

/* barres horizontales (charge par personne) */
.hbars{display:flex;flex-direction:column;gap:13px}
.hbar{display:grid;grid-template-columns:110px 1fr 168px;align-items:center;gap:13px;
  border-radius:10px;padding:5px 7px;margin:-5px -7px;text-align:left;background:none;border:0;
  font:inherit;color:inherit;width:calc(100% + 14px);cursor:pointer;
  transition:background var(--t-fast) ease}
.hbar:hover{background:var(--surface-2)}
.hbar:hover .who{color:var(--royal)}
.hbar .who{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.hbar .who small{display:block;color:var(--ink-3);font-weight:400;font-size:11px;letter-spacing:0}
.hbar .track{height:26px;background:var(--surface-3);border-radius:8px;overflow:hidden;display:flex}
.hbar .seg{height:100%}
.hbars.anim .seg{animation:seg-in var(--t-move) var(--ease) both}
.hbar .num{display:flex;align-items:baseline;gap:7px;justify-content:flex-end}
.hbar .num b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hbar .num small{font-size:11.5px;color:var(--ink-3)}
.hbar .num .tr{color:var(--ok-tx);font-weight:600;font-size:12px}
.lg{display:flex;gap:16px;margin-top:16px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;
  vertical-align:-1px;font-style:normal}

/* jauges + sparkline */
.gauges{display:flex;gap:26px;justify-content:center;padding:6px 0 16px;flex-wrap:wrap}
.gauge{text-align:center}
.gauge svg{display:block;margin:0 auto 7px}
.gauges.anim circle.v{animation:gauge-in var(--t-move) var(--ease) both}
@keyframes gauge-in{from{stroke-dashoffset:var(--c)}}
.gauge .gv{font-size:19px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gauge .gl{font-size:11px;color:var(--ink-3);margin-top:2px}
.spark{display:flex;align-items:flex-end;gap:5px;height:56px;padding:6px 0}
.spark i{flex:1;background:var(--grad);border-radius:4px 4px 2px 2px;min-height:3px;position:relative;
  font-style:normal}
.spark i.z{background:var(--border)}
.spark i small{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:10px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ------------------------------------------------ vide / squelette / pied -- */
.empty{padding:52px 20px;text-align:center;color:var(--ink-3)}
.empty .big{font-size:34px;margin-bottom:8px;color:var(--ink-4)}
.empty .t{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:3px}
.skel td{padding:13px 18px}
.skel i{display:block;height:11px;border-radius:6px;background:var(--surface-3);
  animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.foot{margin-top:16px;font-size:12px;color:var(--ink-3);text-align:center}

/* ============================================================================
   PAGE DE LOGIN — accueil du cabinet.
   Style Hermès : une page CLAIRE, la marque du cabinet en accent, son logo en
   filigrane, une carte blanche posée dessus. Accueillant sans être chargé.
   Tout dérive des 3 couleurs de theme.css. Le logo se pose en 1 variable.
   ========================================================================== */

/* La scène : occupe l'écran, centre la carte, et porte les ambiances de marque.
   `--brand-logo` (url d'une image) OU rien → repli sur la pastille d'initiales. */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  padding:24px;position:relative;overflow:hidden;isolation:isolate}

/* Deux halos de marque + un lavis très doux : la page respire la couleur du
   cabinet sans jamais la saturer (on n'est pas dans une bannière marketing). */
.login::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 620px at 12% -8%,  color-mix(in srgb,var(--grad-to) 20%,var(--bg)) 0%, transparent 55%),
    radial-gradient(1000px 640px at 100% 108%, color-mix(in srgb,var(--grad-from) 16%,var(--bg)) 0%, transparent 55%),
    var(--surface-2)}

/* Le logo du cabinet EN FILIGRANE, dominant mais discret : grand, très pâle,
   légèrement incliné, derrière la carte. C'est ce qui rend la page « à eux ». */
.login-wm{position:absolute;z-index:-1;inset:0;display:grid;place-items:center;
  pointer-events:none;overflow:hidden}
.login-wm .mark{width:min(58vw,560px);height:min(58vw,560px);border-radius:28%;
  display:grid;place-items:center;color:#fff;font-weight:800;
  font-size:min(26vw,240px);letter-spacing:-.04em;background:var(--grad);
  transform:rotate(-8deg);opacity:.06;filter:blur(.5px)}
.login-wm img{width:min(60vw,600px);max-width:none;opacity:.05;transform:rotate(-8deg);
  filter:grayscale(.2)}

/* La carte : blanche, posée, l'objet net au milieu du flou. */
.login-card{position:relative;z-index:1;width:min(416px,100%);
  background:var(--surface);border:1px solid var(--border);border-radius:22px;
  box-shadow:var(--shadow-modal);padding:38px 36px 30px;
  animation:login-rise .5s var(--ease) both}
@keyframes login-rise{from{opacity:0;transform:translateY(12px)}}
/* Liseré de marque en tête de carte — le seul trait de couleur franc. */
.login-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  border-radius:22px 22px 0 0;background:var(--grad)}

.login-head{text-align:center;margin-bottom:24px}
/* Le logo net du cabinet : image (.login-logo img) ou pastille d'initiales. */
.login-logo{width:60px;height:60px;border-radius:16px;margin:0 auto 15px;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:23px;
  letter-spacing:-.03em;background:var(--grad);box-shadow:var(--glow);overflow:hidden}
.login-logo img{width:100%;height:100%;object-fit:contain;padding:8px;background:var(--surface)}
.login-head h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.login-head p{margin:5px 0 0;font-size:13.5px;color:var(--ink-3);letter-spacing:-.01em}

.login-form{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.field .fld{width:100%;padding:11px 13px;font-size:14px;border-radius:11px}
/* Champ mot de passe : l'œil de bascule vit DANS le champ, à droite. */
.field.pw{position:relative}
.field.pw .fld{padding-right:44px}
.field.pw .eye{position:absolute;right:6px;bottom:5px;width:32px;height:32px;border:0;
  background:transparent;color:var(--ink-3);border-radius:8px;cursor:pointer;
  display:grid;place-items:center}
.field.pw .eye:hover{background:var(--surface-3);color:var(--ink-2)}

/* Message d'erreur : présent SEULEMENT en cas d'échec (pas de bloc vide réservé). */
.login-err{display:none;align-items:center;gap:9px;font-size:12.8px;font-weight:500;
  color:var(--err-tx);background:var(--err-bg);border:1px solid var(--err-br);
  border-radius:11px;padding:10px 13px}
.login-err.on{display:flex}
.login-err svg{flex:none}

.login-form .btn{width:100%;justify-content:center;padding:12px;font-size:14px;margin-top:3px}
.login-aux{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.login-aux a{font-size:12.5px;color:var(--royal);text-decoration:none;font-weight:500}
.login-aux a:hover{text-decoration:underline}
.login-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.login-check input{width:15px;height:15px;accent-color:var(--royal);cursor:pointer}

/* Pied : la réassurance (souveraineté des données), pas une pub. */
.login-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  text-align:center;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.login-foot .lock{display:inline-flex;align-items:center;gap:5px}

/* Étape 2FA (code e-mail) : même carte, on masque le formulaire, on montre le code.
   La console 2MLEC en a besoin ; les autres laissent [data-step] sur "login". */
.login[data-step="code"] .step-login{display:none}
.login:not([data-step="code"]) .step-code{display:none}
.code-inputs{display:flex;gap:9px;justify-content:center;margin:6px 0 2px}
.code-inputs input{width:46px;height:54px;text-align:center;font-size:22px;font-weight:600;
  font-variant-numeric:tabular-nums;border:1px solid var(--border-2);border-radius:12px;
  background:var(--surface);color:var(--ink);outline:none;font-family:inherit;
  transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.code-inputs input:focus{border-color:var(--royal);box-shadow:var(--ring)}
.login-back{display:block;margin:14px auto 0;background:none;border:0;font:inherit;
  font-size:12.5px;color:var(--ink-3);cursor:pointer}
.login-back:hover{color:var(--ink-2)}

/* --------------------------------------------------------------- réactif --- */
@media(max-width:880px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr}
  .modal-b.split{grid-template-columns:1fr}
  .hbar{grid-template-columns:1fr;gap:6px}
  .hbar .num{justify-content:flex-start}
  .search input{width:100%}
  .search{flex:1;min-width:180px}
  .hide-sm{display:none}
  .wrap{padding:22px 16px 56px}
  /* Le graphe défile DANS son panneau : écrasé sur 12 colonnes de 18 px, il ne
     dit plus rien. Colonnes à largeur plancher + défilement du seul ruban.
     L'infobulle disparaît : elle serait rognée par le défilement, et le tactile
     n'a pas de survol — la valeur est déjà écrite au-dessus de la barre. */
  .bars{overflow-x:auto;overflow-y:hidden;height:190px;padding-bottom:6px}
  .bar-col{flex:0 0 30px}
  .tip{display:none}
  .login-card{padding:30px 22px 24px;border-radius:18px}
}

/* ------------------------------------------------------- accessibilité ------
   Un cabinet peut avoir un collaborateur sensible au mouvement. On coupe tout,
   on ne « réduit » pas : une barre qui grandit en 450 ms n'a aucune valeur
   informative, seule la hauteur finale compte. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:hover,.tile:hover{transform:none}
  /* EXCEPTION : les spinners de CHARGEMENT gardent leur rotation même en
     animations réduites — un spinner figé ne signale plus rien. On réactive
     UNIQUEMENT les indicateurs de chargement (classe contenant « spin »),
     pas le décoratif. Voir hermes-cabinet/references/pieges.md #46. */
  [class*="spin"],[class*="spin"] svg{
    animation-duration:.8s!important;animation-iteration-count:infinite!important}
}

/* ------------------------------------------------------------- impression --
   Les cabinets impriment. Sans ça, la page sort avec les boutons et le fond. */
@media print{
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  header .head-right,.tabs,.toolbar,.kebab,.btn,.menu,.ovl,.toasts,.prog,.banner .go{display:none!important}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  thead th{position:static}
  tbody tr{break-inside:avoid}
  .kpi.accent .val{-webkit-text-fill-color:currentColor;color:#000}
}

@media (prefers-reduced-motion:reduce){[class*="spin"],[class*="spin"] svg{animation-duration:.8s!important;animation-iteration-count:infinite!important}} /* #46 spinners immunises reduced-motion */

/* ------------------------------------------------ tuiles sur téléphone -----
   Miroir de la règle posée le 16/08 dans `console-os/deployer/kit-console.css`
   (la feuille RÉELLEMENT servie aux six consoles). Elle est ici aussi parce
   que c'est ce fichier que `build_plugin.py` inline dans les aperçus de banc :
   sans elle, le banc montrerait un rendu que la console n'a pas.

   Défaut corrigé : sous 880 px le kit s'arrêtait à deux colonnes. À 375 px,
   une tuile faisait 162 px pour un chiffre de 36 px, et `.kpi{overflow:hidden}`
   TRANCHAIT le sous-titre en plein mot, sans ellipse. */
.kpi .sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;hyphens:auto}
@media(max-width:520px){
  .kpis{grid-template-columns:1fr;gap:12px;margin-bottom:16px}
  .kpi{padding:15px 16px 14px}
  .kpi .val{font-size:28px;margin:6px 0 3px}
  .kpi .sub{-webkit-line-clamp:4}
}

/* ---------------------------------------------------------------------------
   UN BANDEAU SE CHASSE — la croix, À DROITE (16/08, place corrigée le 17/08)
   ---------------------------------------------------------------------------
   Reproche d'Augustin du 16/08 : « ce type de bandeau doit être supprimable,
   c'est important, sinon ça gêne. » Un bandeau d'explication est utile UNE
   fois ; ensuite il mange le premier écran tous les jours.

   La croix est POSÉE par le runtime (bloc jumeau dans console.js), donc aucune
   page n'a à l'écrire et un bandeau non fermable ne peut plus s'écrire. Elle
   prend `currentColor`, donc le ton du bandeau : une règle habille les six
   tons.

   `banner-x-pousse` (posée par le runtime, pas ici) est ce qui la colle à
   droite. Elle n'arrive que si RIEN ne pousse déjà : un bandeau qui porte un
   `.go` (« Voir → ») a sa propre marge auto, et deux marges auto se PARTAGENT
   l'espace libre — « Voir → » finirait au milieu du bandeau.
   -------------------------------------------------------------------------- */
.af-bandeau-masque{display:none!important}
/* ⛔ UNE COMMANDE À MOITIÉ EFFACÉE EST UNE COMMANDE QU'ON NE TROUVE PAS (19/09).
   Augustin, sur la Collecte : « on ne peut pas le fermer ». Mesuré sur la
   console servie : la croix est là, elle marche au clic, mais elle fait 26 px
   à `opacity:.5` au bout d'un bandeau de 1 173 px — il avait sélectionné le
   texte en cherchant comment le fermer. Troisième reproche sur le même objet
   (17/08 : cible tactile), donc on change le DÉFAUT : elle se lit comme un
   bouton au repos. `currentColor` la garde dans le ton des six bandeaux. */
.banner-x{flex:none;width:26px;height:26px;margin:-1px -6px -1px 0;
  padding:0;border:0;color:inherit;opacity:.85;
  background:color-mix(in srgb,currentColor 10%,transparent);
  border-radius:8px;display:grid;place-items:center;cursor:pointer;
  transition:opacity var(--t-ui,.14s) ease,background var(--t-ui,.14s) ease}
.banner-x-pousse{margin-left:auto}
.banner-x>svg{width:14px;height:14px;display:block}
.banner-x:hover{opacity:1;background:color-mix(in srgb,currentColor 22%,transparent)}
.banner-x:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:1px}
@media print{.banner-x{display:none!important}}
/* ⛔ LA CROIX DOIT ÊTRE ATTEIGNABLE AU DOIGT (17/08).
   Frédéric Martin, 17/08 07h33, sur son iPad : « ok pour la croix mais j'ai dû
   AGRANDIR pour activer ». Il n'avait pas tort de croire la croix morte : à
   26x26 px elle est sous les 44 px de la cible tactile d'iOS, et un pouce qui
   la rate n'a aucun retour — l'écran ne bouge pas, donc le bouton est cassé.
   On garde le DESSIN à 26 px (une croix de 44 px pleine écraserait le bandeau)
   et on étend la CIBLE par un pseudo-élément centré, qui ne prend aucune place
   dans le flux. `pointer:coarse` seulement : à la souris, 26 px se cliquent
   très bien, et une zone invisible de 44 px avalerait le survol du texte
   voisin. Vaut pour toute croix de bandeau du parc, puisque la règle est au
   kit. */
@media (pointer:coarse){
  .banner-x{position:relative}
  .banner-x::after{content:"";position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* ===== LE PARCOURS DE MISE EN ROUTE (composant du kit, 01/09) ============
   Une seule action visible à la fois : un rail de puces NOMMÉES, une carte
   (verbe, phrase mesurée, bouton), le reste replié. Écrit UNE fois ici ; une
   page ne redéclare aucune de ces classes. Voir AF.parcours dans console.js. */
.pc{max-width:760px;margin:0 auto;padding-top:10px}
/* La JAUGE : des segments, pas une seconde barre d'onglets (08/09/2026). Le
   rail portait 4 a 7 boutons libelles sous les 6 a 9 onglets de la page : deux
   navigations empilees, que rien ne distinguait. Meme dessin que la porte de
   l'OS. Le bouton reste large au doigt (22 px) tout en paraissant fin :
   le padding est transparent, `background-clip` peint la seule barre. */
.pc-jauge{display:flex;align-items:center;gap:6px;list-style:none;margin:0 0 22px;
  padding:0;justify-content:center;flex-wrap:wrap}
.pc-case{display:flex}
.pc-seg{width:26px;height:22px;padding:8px 0;border:0;background:var(--border);
  background-clip:content-box;border-radius:999px;cursor:pointer;
  transition:background-color .15s ease}
.pc-seg:hover{background:var(--ink-3)}
.pc-seg:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
.pc-case[data-e="fait"] .pc-seg{background:var(--ok-fg,#166534)}
.pc-case[aria-current="step"] .pc-seg{background:var(--royal)}
.pc-jauge-n{margin-left:8px;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.pc-aide .pc-mesure{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.pc-carte{border:1px solid var(--border);border-radius:16px;background:var(--card,var(--surface));
  padding:30px 28px 26px;text-align:center}
.pc-carte h3{margin:0 0 8px;font-size:23px;letter-spacing:-.02em;line-height:1.2}
.pc-carte .pc-quoi{margin:0 auto 14px;max-width:46ch;font-size:14px;line-height:1.55;color:var(--ink-2)}
.pc-sert{margin:0 0 18px;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;
  justify-content:center;gap:6px;flex-wrap:wrap}
.pc-src{font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface-3);
  border:1px solid transparent;padding:3px 10px;border-radius:20px;cursor:pointer}
.pc-src:hover{border-color:var(--royal);color:var(--ink);background:var(--card,var(--surface))}
.pc-src:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
.pc-carte .btn{font-size:14.5px;padding:10px 22px}
.pc-fait{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ok-tx);background:var(--ok-bg);padding:5px 13px;border-radius:20px;margin-bottom:16px}
.pc-fait svg{width:14px;height:14px}
.pc-aide{margin:18px auto 0;max-width:52ch;text-align:left}
.pc-aide > summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-3);
  text-align:center;padding:6px;display:flex;align-items:center;justify-content:center;gap:5px}
.pc-aide > summary::-webkit-details-marker{display:none}
.pc-aide > summary::marker{content:""}
/* ⛔ AUCUN TEXTE CLIQUABLE HORS BOUTON (Augustin ; relevé dans Départs le
   12/10, « Comment ça marche ? › » sous « Produire le courrier ») : le
   dépliant a la forme d'un bouton discret, cadre et fond, centré. */
.pc-aide > summary{width:max-content;max-width:100%;margin:0 auto;padding:6px 12px;
  border:1px solid var(--border,var(--line));border-radius:8px;background:var(--surface,#fff);color:var(--ink-2)}
.pc-aide > summary:hover{color:var(--ink);background:var(--surface-2,#f5f4f2)}
.pc-aide > summary svg,.pc-bloc > summary svg{width:13px;height:13px;flex:0 0 auto;transition:transform .18s ease}
.pc-aide[open] > summary svg,.pc-bloc[open] > summary svg{transform:rotate(90deg)}
.pc-aide > summary:focus-visible{outline:2px solid var(--royal);outline-offset:2px;border-radius:6px}
.pc-aide ol{margin:6px 0 0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.pc-aide li{margin:4px 0}
.pc-aide .pc-si{margin:12px 0 0;font-size:12.5px;color:var(--ink-3);border-left:2px solid var(--border);
  padding-left:11px;line-height:1.5}
.pc-aide .mer-ag{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.pc-suite{margin:16px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3)}
.pc-suite b{color:var(--ink-2);font-weight:600}
.pc-bloc{margin-top:12px;border:1px solid var(--border);border-radius:12px;background:var(--card,var(--surface));overflow:hidden}
.pc-bloc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  padding:13px 16px;font-size:13.5px;font-weight:600}
.pc-bloc > summary::-webkit-details-marker{display:none}
.pc-bloc > summary::marker{content:""}
.pc-bloc > summary:hover{background:color-mix(in srgb,var(--royal) 4%,transparent)}
.pc-bloc > summary:focus-visible{outline:2px solid var(--royal);outline-offset:-2px}
.pc-bloc .pc-bloc-n{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-3)}
.pc-bloc[open] > summary{border-bottom:1px solid var(--line,var(--border))}
.pc-bloc .pc-bloc-c{padding:16px}
.pc-bloc .mer-e{border-radius:10px}
.mer-e{border:1px solid var(--line,var(--border,#e8e8ed));border-radius:12px;
  background:var(--card,var(--surface,#fff));overflow:hidden}
.mer-e + .mer-e{margin-top:8px}
.mer-e>summary{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.mer-e>summary::-webkit-details-marker{display:none}
.mer-e>summary::marker{content:""}
.mer-e>summary:hover{background:var(--surface-3)}
.mer-e>summary:focus-visible{outline:2px solid var(--royal);outline-offset:-2px}
.mer-p{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;margin-top:1px;border:1.5px solid transparent}
.mer-p svg{width:12px;height:12px}
.mer-e[data-e="fait"] .mer-p{background:var(--ok-bg,#dcfce7);color:var(--ok-fg,#166534)}
.mer-e[data-e="partiel"] .mer-p{background:var(--warn-bg,#fef3c7);color:var(--warn-fg,#8a5b00)}
.mer-e[data-e="a_faire"] .mer-p{background:var(--surface-3);color:var(--ink-3);border-color:var(--border)}
.mer-e[data-e="non_mesure"] .mer-p{background:transparent;color:var(--ink-3);border-color:var(--border);border-style:dashed}
.mer-e[data-e="facultatif"] .mer-p{background:transparent;color:var(--ink-4,var(--ink-3));border-color:var(--border)}
.mer-t{min-width:0;flex:1 1 auto}
.mer-t b{display:block;font-size:13.5px;font-weight:650}
.mer-t .m{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.mer-e[data-e="fait"] .mer-t .m{color:var(--ink-3)}
.mer-lb{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;
  border-radius:999px;flex:none;margin-top:2px;background:var(--surface-3);color:var(--ink-3);border:1px solid var(--border)}
.mer-e .chev{width:12px;height:12px;flex:none;margin-top:6px;color:var(--ink-3);transition:transform .15s}
.mer-e[open] .chev{transform:rotate(90deg)}
.mer-c{padding:0 14px 14px 48px;border-top:1px solid var(--border);background:var(--surface)}
.mer-c ol{margin:11px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.mer-c li{font-size:13px;line-height:1.55;color:var(--ink-2)}
.mer-c code{font-size:12px;background:var(--surface-3);border:1px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--ink)}
.mer-si{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3);border-left:2px solid var(--border);padding-left:11px}
.mer-si b{color:var(--ink-2)}
.mer-ag{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
@media (prefers-reduced-motion: reduce){.mer-e .chev,.pc-aide > summary svg,.pc-bloc > summary svg{transition:none}}


/* ------------------------------------------------------------------- aide --
   Le petit « ? » rond posé à côté d'une chose (`AF.aide()`). Le clic et la
   bulle sont gérés par l'OS ; en console autonome le `title` fait le travail. */
/* Le ⓘ se voit (24/09/2026, T5-A2) : encre secondaire, legere graisse ; a
   l'encre pleine au survol, jamais a l'accent. */
.af-aide-i{display:inline;padding:0;border:0;background:transparent;color:var(--mut-tx,#665e56);
  font:inherit;font-weight:600;line-height:inherit;cursor:pointer;transition:color var(--t-ui)}
.af-aide-i:hover,.af-aide-i[aria-expanded="true"]{color:var(--ink)}
/* une regle d'auteur `display:inline` bat le [hidden] du navigateur : on le redit */
.af-aide-i[hidden]{display:none}
/* Le bloc d'aide d'une page est lu par l'OS, jamais affiché en place. */
.af-aide{display:none !important}

/* ---------------------------------------------------------------- filtres --
   Les filtres d'un tableau (`AF.filtres()`, repensés le 04/09) : une barre de
   colonnes toujours visibles, chacune un bouton qui dit sa valeur. */
/* ⛔ 17/09 : pas de virgule dans un commentaire posé juste avant une règle : le
   scopage de kit-console.css le recopiait dans le sélecteur et le navigateur
   jetait la règle (filtres collés sur quinze pages). */
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.filtre{position:relative;display:inline-flex}
.filtre-col{display:inline-flex;align-items:center;gap:6px;max-width:260px;
  padding:6px 9px 6px 11px;border:1px solid var(--border-2);border-radius:10px;
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color var(--t-ui),background var(--t-ui),color var(--t-ui)}
.filtre-col:hover{border-color:var(--ink-4);color:var(--ink)}
.filtre-k{white-space:nowrap}
.filtre-k::after{content:" ·";color:var(--ink-4)}
.filtre-v{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filtre-chev{flex:none;color:var(--ink-4);transition:transform var(--t-ui)}
.filtre.on > .filtre-col{border-color:var(--royal);background:color-mix(in srgb,var(--royal) 8%,var(--surface));color:var(--ink)}
.filtre.on > .filtre-col .filtre-v{color:var(--royal)}
.filtre.ouvert > .filtre-col{border-color:var(--royal)}
.filtre.ouvert > .filtre-col .filtre-chev{transform:rotate(180deg)}
.filtre-raz{display:inline-flex;align-items:center;border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;
  cursor:pointer;padding:6px 11px;border-radius:10px;text-decoration:none;transition:border-color var(--t-ui),color var(--t-ui)}
.filtre-raz:hover{color:var(--ink);border-color:var(--ink-4)}
.filtre-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:230px;max-width:360px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-menu,var(--shadow-modal));padding:6px;display:flex;flex-direction:column;gap:2px}
.filtre-cherche{margin:2px 4px 6px;padding:7px 10px;border:1px solid var(--border-2);border-radius:8px;
  font:inherit;font-size:13px;background:var(--surface-2);color:var(--ink)}
.filtre-valeurs{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.filtre-val{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.filtre-val:hover{background:var(--surface-2)}
.filtre-val input{margin:0;accent-color:var(--royal)}
.filtre-val-l{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtre-val-n{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12px}
.filtre-vide{margin:0;padding:10px;font-size:12.5px;color:var(--ink-3)}
.filtre-menu-pied{display:flex;justify-content:space-between;gap:8px;padding:6px 4px 2px;
  border-top:1px solid var(--border);margin-top:4px}
.filtre-tout,.filtre-ok{border:0;background:transparent;font:inherit;font-size:12.5px;cursor:pointer;
  padding:6px 8px;border-radius:7px;color:var(--ink-2)}
.filtre-tout:disabled{color:var(--ink-4);cursor:default}
.filtre-tout:not(:disabled):hover{color:var(--ink);background:var(--surface-2)}
.filtre-ok{font-weight:600;color:var(--royal)}
.filtre-ok:hover{background:var(--surface-2)}

/* ==== T5 (24/09/2026) : vues, anneau, tableau de bord — debut ==== */
/* ------------------------------------------------------------------ vues ---
   LE SÉLECTEUR DE VUE (`.af-vue`, `AF.vues()`, 24/09/2026, T5-A4) : une pilule
   sur fond sable, le choix actif en blanc avec une ombre légère, le texte à
   l'encre ; jamais l'accent. À distinguer des onglets d'une page (soulignés).
   Classe doublée et `!important` sur le rayon et l'ombre : la console arrondit
   tout bouton à 10 px et lui retire son ombre (`:root[data-af-style="doux"]
   button`), et c'est ce qui dessinait le « crochet » du Jour/Semaine/Mois. */
.af-vue{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--surface-3);max-width:100%;overflow-x:auto;scrollbar-width:none;vertical-align:middle;flex-wrap:nowrap}
.af-vue::-webkit-scrollbar{display:none}
.af-vue.af-vue > button{flex:none;appearance:none;margin:0;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:500;line-height:1.2;padding:6px 14px;border-radius:999px !important;box-shadow:none !important;cursor:pointer;white-space:nowrap;transition:background var(--t-ui) ease,color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.af-vue.af-vue > button:hover{color:var(--ink)}
.af-vue.af-vue > button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(35,32,28,.16),0 1px 1px rgba(35,32,28,.06) !important}
.af-vue.af-vue > button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.af-vue > button .n{margin-left:6px;font-size:12px;font-weight:600;color:var(--ink-3)}
.af-vue.sm.sm > button{padding:4px 11px;font-size:12.5px}

/* ---------------------------------------------------------------- anneau --- */
.af-an{display:flex;align-items:center;justify-content:center;gap:22px 30px;flex-wrap:wrap}
.af-an-d{position:relative;width:150px;height:150px;flex:none}
.af-an-d svg{width:100%;height:100%;display:block;overflow:visible}
.af-an-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.af-an-c b{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.af-an-c small{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)}
.af-an-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0;max-width:460px}
.af-an-l li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 46px;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;font-size:13px}
.af-an-l li i{width:10px;height:10px;border-radius:3px}
.af-an-l .nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-an-l .v{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.af-an-l .p{font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- tableau de bord ---
   `AF.tableauDeBord()` (24/09/2026, T5-A5) : grille, disposition, grand écran,
   clic sur une part. Voir le runtime pour le contrat. */
.af-tdb{position:relative;container-type:inline-size}
.af-tdb-barre{display:flex;justify-content:flex-end;margin:0 0 10px}
.af-tdb-barre .btn svg,.af-tdb-pied .btn svg{margin-right:6px;vertical-align:-2px}
.af-tdb-grille{display:grid;grid-template-columns:repeat(var(--af-tdb-cols,2),minmax(0,1fr));gap:16px;align-items:stretch}
.af-tdb-carte{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px 20px 16px}
.af-tdb-carte[data-taille="2"]{grid-column:span 2}
.af-tdb-tete{display:flex;align-items:flex-start;gap:8px;min-width:0}
.af-tdb-titre{flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.35;color:var(--ink)}
.af-tdb-outils{display:flex;gap:1px;flex:none;margin:-5px -8px 0 0}
.af-tdb-outil{width:28px;height:28px;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer;opacity:.55;transition:opacity var(--t-fast),background var(--t-fast),color var(--t-fast)}
.af-tdb-carte:hover .af-tdb-outil,.af-tdb-outil:focus-visible{opacity:1}
.af-tdb-outil:hover{background:var(--surface-3);color:var(--ink)}
.af-tdb-outil:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.af-tdb-poignee{cursor:move;touch-action:none}
.af-tdb-agrandir{cursor:zoom-in}
.af-tdb-i-re,.af-tdb-i-moins{display:none}
.af-tdb-large-on .af-tdb-i-el{display:none}
.af-tdb-large-on .af-tdb-i-re{display:block}
.af-tdb-chiffre{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:4px 0 0}
.af-tdb-chiffre[hidden]{display:none}
.af-tdb-chiffre b{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.af-tdb-chiffre span{font-size:13px;color:var(--ink-2)}
.af-tdb-chiffre.alerte b{color:var(--err-tx)}
.af-tdb-corps{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;margin-top:14px}
.af-tdb-vide{margin:0;max-width:40ch;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.af-tdb-corps-vide{align-items:center;text-align:center;gap:9px;min-height:150px}
.af-tdb-corps-vide::before{content:"";width:34px;height:34px;flex:none;border-radius:50%;border:2px dashed var(--border);opacity:.85}
.af-tdb-part{cursor:pointer}
.af-tdb-part:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.af-an-l li.af-tdb-part:hover,.af-an-l li.af-tdb-part:focus-visible{background:var(--surface-3)}
.af-an-l li.af-tdb-part:hover .nm{color:var(--ink)}
.af-an-arc.af-tdb-part{transition:opacity var(--t-fast)}
.af-an-d:has(.af-an-arc.af-tdb-part:hover) .af-an-arc:not(:hover){opacity:.45}
.legend .li.af-tdb-part{margin:-5px -7px;padding:5px 7px;border-radius:8px}
.legend .li.af-tdb-part:hover,.legend .li.af-tdb-part:focus-visible{background:var(--surface-3)}
/* dans une carte large, la legende d'une barre empilee se range en colonnes :
   un libelle a 1 000 px de son nombre ne se lit pas d'un coup d'oeil */
.af-tdb-carte .legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 40px}
.stack span.af-tdb-part:hover{filter:brightness(1.18)}
.af-tdb .bar,.af-tdb-voile .bar{background:var(--s1);box-shadow:none}
.af-tdb .bar.zero,.af-tdb-voile .bar.zero{background:var(--border)}
.bar-wrap.af-tdb-part:hover .bar{filter:brightness(1.18)}
.af-tdb-carte.af-tdb-saisie{opacity:.5;outline:2px dashed color-mix(in srgb,var(--ink) 45%,var(--border));outline-offset:2px}
.af-tdb-grille.af-tdb-deplace,.af-tdb-grille.af-tdb-deplace *{cursor:move !important}
.af-tdb-repere{position:absolute;top:0;left:0;z-index:5;width:3px;border-radius:3px;background:var(--ink);pointer-events:none;opacity:0;transition:opacity .1s}
.af-tdb-repere.h{height:3px}
.af-tdb-repere.on{opacity:1}
.af-tdb-pied{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:12px 2px 0;font-size:12.5px;color:var(--ink-3)}
.af-tdb-pied[hidden]{display:none}
.af-tdb-annonce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.af-tdb-voile{position:fixed;inset:0;display:none;padding:clamp(14px,3vw,38px);background:rgba(26,26,26,.42);backdrop-filter:blur(2px)}
.af-tdb-voile.on{display:flex}
.af-tdb-scene{margin:auto;width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column}
.af-tdb-voile .af-tdb-carte{width:100%;max-height:100%;overflow:auto;padding:22px 26px 20px;box-shadow:var(--shadow-modal)}
.af-tdb-voile .af-tdb-titre{font-size:18px}
.af-tdb-voile .af-tdb-outil{opacity:1}
.af-tdb-voile .af-tdb-poignee,.af-tdb-voile .af-tdb-large,.af-tdb-voile [data-tdb="masquer"]{display:none}
.af-tdb-voile .af-tdb-agrandir{cursor:zoom-out}
.af-tdb-voile .af-tdb-i-plus{display:none}
.af-tdb-voile .af-tdb-i-moins{display:block}
.af-tdb-voile .af-tdb-corps{min-height:min(52vh,430px)}
.af-tdb-voile .af-an-d{width:260px;height:260px}
.af-tdb-voile .af-an-c b{font-size:38px}
.af-tdb-voile .af-tdb-chiffre b{font-size:34px}
.af-tdb-modal.af-tdb-modal-etroite{width:min(640px,100%)}
.af-tdb-modal .modal-f[hidden]{display:none}
/* la fenêtre d'une part et « Disposition » : titre et libellés à l'encre, à la
   taille du texte. Dans une console, la feuille de l'OS grise et rapetisse tout
   `label` d'un dialogue (0,3,1 !important) : on la passe à quatre classes. */
.af-tdb-modal .modal-h h3{color:var(--ink)}
.af-tdb-dl .af-tdb-dl-l.af-tdb-dl-l{font-size:14px !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:normal !important}
.af-tdb-liste{max-height:min(62vh,560px)}
.af-tdb-liste .af-tdb-nom{font-weight:600;color:var(--ink)}
.af-tdb-chev{width:34px;text-align:right;color:var(--ink-3)}
.af-tdb-chev svg{vertical-align:middle}
.af-tdb-liste tr[data-open]:hover .af-tdb-chev{color:var(--ink)}
.af-tdb-geste{text-align:right;white-space:nowrap}
.af-tdb-att{margin:0;padding:28px 6px;text-align:center;font-size:13.5px;color:var(--ink-3)}
.af-tdb-att .btn{margin-top:10px}
.af-tdb-dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.af-tdb-dl li{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}
.af-tdb-dl li:last-child{border-bottom:0}
.af-tdb-dl-l{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer}
.af-tdb-dl-l input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--ink);cursor:pointer}
.af-tdb-dl-f{display:flex;gap:1px}
.af-tdb-dl-f .af-tdb-outil{opacity:1;font-size:15px}
@container (min-width: 1700px){.af-tdb-grille{grid-template-columns:repeat(var(--af-tdb-cols,3),minmax(0,1fr))}}
@container (max-width: 760px){.af-tdb-grille{grid-template-columns:minmax(0,1fr)}.af-tdb-carte{grid-column:auto !important}.af-tdb-large{display:none}.af-tdb-carte{padding:16px 16px 14px}}
@media (max-width: 560px){.af-tdb-dl li{flex-wrap:wrap}.af-tdb-voile{padding:10px}.af-tdb-voile .af-tdb-carte{padding:16px}.af-tdb-voile .af-an-d{width:200px;height:200px}}
@media (prefers-reduced-motion: reduce){.af-tdb-repere,.af-tdb-outil,.af-an-arc.af-tdb-part{transition:none}}
/* ==== T5 (24/09/2026) : vues, anneau, tableau de bord — fin ==== */

/* SQUELETTE ET ARRIVÉE (24/09/2026, tour 6, T6-A2) : AF.squelette, AF.arrivee.
   La forme de la page tout de suite, un balayage lent (éteint en mouvement
   réduit), aux jetons du kit : aucune couleur à part. */
.af-sq{display:flex;flex-direction:column;gap:16px}
.af-sq i{display:block;border-radius:6px;background:var(--surface-3);position:relative;overflow:hidden}
.af-sq i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:af-sq-balaye 1.4s ease-in-out infinite}
.af-sq-pastilles{display:flex;gap:8px;flex-wrap:wrap}
.af-sq-pastilles i{height:34px;border-radius:999px}
.af-sq-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.af-sq-carte{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}
.af-sq-carte .t{height:14px;width:42%}
.af-sq-carte .l{height:10px;width:78%}
.af-sq-carte .l.c{width:56%}
.af-sq-tableau{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.af-sq-tete,.af-sq-ligne{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:18px;padding:15px 18px;border-bottom:1px solid var(--line)}
.af-sq-tete{background:var(--surface-2)}
.af-sq-tete i{height:9px;width:50%}
.af-sq-ligne i{height:11px}
.af-sq-ligne:last-child{border-bottom:0}
.af-arr-err{padding:44px 20px;text-align:center;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:16px}
.af-arr-err p{margin:0 0 14px}
@keyframes af-sq-balaye{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.af-sq i::after{animation:none}}

/* TIROIR DE FILTRES (24/09/2026, tour 6, T6-A3) : trois colonnes en vue, les
   autres derrière « Filtres (n) ». Les valeurs d'une colonne s'ouvrent DANS le
   tiroir, sous son bouton. */
.filtre-plus .filtre-ic{flex:none;color:var(--ink-2)}
.filtre-tiroir{position:fixed;top:0;left:0;max-height:calc(100vh - 32px);overflow:auto;z-index:40;width:max-content;min-width:260px;max-width:min(560px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-menu,var(--shadow-modal));padding:12px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;box-sizing:border-box}
.filtre-tiroir .filtre{flex-direction:column;align-items:stretch}
.filtre-tiroir .filtre-menu{position:static!important;margin-top:6px;box-shadow:none;max-width:none}

/* GRAPHIQUES SOBRES ET COMMANDES DISCRÈTES (24/09/2026, tour 6, T6-A4).
   Barres à l'encre secondaire (`--af-barre`), la dernière période à l'encre,
   une valeur anormale au ton de la doctrine ; angles nets. Barre empilée nette,
   un trait de 1 px entre les parts, sans arrondi de pilule. Les commandes d'une
   carte (glisser, largeur, masquer, grand écran) paraissent au survol et au
   focus ; au doigt, derrière le ⋮ de la carte. */
.bar{border-radius:2px 2px 0 0;background:var(--af-barre,color-mix(in srgb,var(--ink) 34%,var(--surface)));box-shadow:none}
.af-tdb .bar,.af-tdb-voile .bar{background:var(--af-barre,color-mix(in srgb,var(--ink) 34%,var(--surface)))}
.bar.en-avant,.af-tdb .bar.en-avant,.af-tdb-voile .bar.en-avant{background:var(--ink)}
.bar.ton-err,.af-tdb .bar.ton-err,.af-tdb-voile .bar.ton-err{background:var(--err-tx)}
.bar.ton-warn,.af-tdb .bar.ton-warn,.af-tdb-voile .bar.ton-warn{background:var(--warn-tx)}
.bar.ton-ok,.af-tdb .bar.ton-ok,.af-tdb-voile .bar.ton-ok{background:var(--ok-tx)}
.bar.ton-info,.af-tdb .bar.ton-info,.af-tdb-voile .bar.ton-info{background:var(--info-tx)}
.bar.zero,.af-tdb .bar.zero,.af-tdb-voile .bar.zero{background:var(--border)}
.stack{border-radius:2px;background:var(--surface-3)}
.stack span{border-radius:0}
.stack span+span{box-shadow:inset 1px 0 0 var(--surface)}
.af-tdb-outil{opacity:0}
.af-tdb-carte:hover .af-tdb-outil,.af-tdb-carte:focus-within .af-tdb-outil,.af-tdb-voile .af-tdb-outil{opacity:1}
.af-tdb-kebab{display:none}
@media (hover:none){.af-tdb-carte:has(.af-tdb-kebab) .af-tdb-outil{display:none}.af-tdb-carte:not(:has(.af-tdb-kebab)) .af-tdb-outil{opacity:1}.af-tdb-carte:has(.af-tdb-kebab) .af-tdb-outil.af-tdb-kebab{display:grid;opacity:1}.af-tdb-carte:has(.af-tdb-kebab).af-tdb-outils-on .af-tdb-outil{display:grid;opacity:1}.af-tdb-voile .af-tdb-carte:has(.af-tdb-kebab) .af-tdb-outil,.af-tdb-voile .af-tdb-outil{display:grid;opacity:1}.af-tdb-voile .af-tdb-carte:has(.af-tdb-kebab) .af-tdb-outil.af-tdb-kebab,.af-tdb-voile .af-tdb-kebab{display:none}}

/* L'ANNEAU (24/09/2026, tour 6, T6-A7) : entrée d'un seul tenant, la part
   survolée ou sous le focus (arc ou ligne de légende) au centre, la légende
   survolée met son arc devant. Rien en mouvement réduit. */
.af-an-d svg{animation:af-an-in .42s cubic-bezier(.2,.7,.3,1) both}
.af-an-arc{cursor:pointer}
.af-an-c-p{display:none;max-width:88px}
.af-an-c-p small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-an:has(.af-an-arc:hover) .af-an-c-t,.af-an:has(.af-an-arc:focus-visible) .af-an-c-t,.af-an:has(.af-an-l li:hover) .af-an-c-t,.af-an:has(.af-an-l li:focus-visible) .af-an-c-t{display:none}
.af-an:has(.af-an-arc[data-i="0"]:hover) .af-an-c-p[data-i="0"],.af-an:has(.af-an-l li[data-i="0"]:hover) .af-an-c-p[data-i="0"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="0"]:focus-visible) .af-an-c-p[data-i="0"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="0"]:focus-visible) .af-an-c-p[data-i="0"]{display:block}
.af-an:has(.af-an-l li[data-i="0"]:hover) .af-an-arc:not([data-i="0"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="0"]:focus-visible) .af-an-arc:not([data-i="0"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="1"]:hover) .af-an-c-p[data-i="1"],.af-an:has(.af-an-l li[data-i="1"]:hover) .af-an-c-p[data-i="1"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="1"]:focus-visible) .af-an-c-p[data-i="1"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="1"]:focus-visible) .af-an-c-p[data-i="1"]{display:block}
.af-an:has(.af-an-l li[data-i="1"]:hover) .af-an-arc:not([data-i="1"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="1"]:focus-visible) .af-an-arc:not([data-i="1"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="2"]:hover) .af-an-c-p[data-i="2"],.af-an:has(.af-an-l li[data-i="2"]:hover) .af-an-c-p[data-i="2"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="2"]:focus-visible) .af-an-c-p[data-i="2"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="2"]:focus-visible) .af-an-c-p[data-i="2"]{display:block}
.af-an:has(.af-an-l li[data-i="2"]:hover) .af-an-arc:not([data-i="2"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="2"]:focus-visible) .af-an-arc:not([data-i="2"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="3"]:hover) .af-an-c-p[data-i="3"],.af-an:has(.af-an-l li[data-i="3"]:hover) .af-an-c-p[data-i="3"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="3"]:focus-visible) .af-an-c-p[data-i="3"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="3"]:focus-visible) .af-an-c-p[data-i="3"]{display:block}
.af-an:has(.af-an-l li[data-i="3"]:hover) .af-an-arc:not([data-i="3"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="3"]:focus-visible) .af-an-arc:not([data-i="3"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="4"]:hover) .af-an-c-p[data-i="4"],.af-an:has(.af-an-l li[data-i="4"]:hover) .af-an-c-p[data-i="4"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="4"]:focus-visible) .af-an-c-p[data-i="4"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="4"]:focus-visible) .af-an-c-p[data-i="4"]{display:block}
.af-an:has(.af-an-l li[data-i="4"]:hover) .af-an-arc:not([data-i="4"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="4"]:focus-visible) .af-an-arc:not([data-i="4"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="5"]:hover) .af-an-c-p[data-i="5"],.af-an:has(.af-an-l li[data-i="5"]:hover) .af-an-c-p[data-i="5"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="5"]:focus-visible) .af-an-c-p[data-i="5"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="5"]:focus-visible) .af-an-c-p[data-i="5"]{display:block}
.af-an:has(.af-an-l li[data-i="5"]:hover) .af-an-arc:not([data-i="5"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="5"]:focus-visible) .af-an-arc:not([data-i="5"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="6"]:hover) .af-an-c-p[data-i="6"],.af-an:has(.af-an-l li[data-i="6"]:hover) .af-an-c-p[data-i="6"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="6"]:focus-visible) .af-an-c-p[data-i="6"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="6"]:focus-visible) .af-an-c-p[data-i="6"]{display:block}
.af-an:has(.af-an-l li[data-i="6"]:hover) .af-an-arc:not([data-i="6"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="6"]:focus-visible) .af-an-arc:not([data-i="6"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="7"]:hover) .af-an-c-p[data-i="7"],.af-an:has(.af-an-l li[data-i="7"]:hover) .af-an-c-p[data-i="7"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="7"]:focus-visible) .af-an-c-p[data-i="7"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="7"]:focus-visible) .af-an-c-p[data-i="7"]{display:block}
.af-an:has(.af-an-l li[data-i="7"]:hover) .af-an-arc:not([data-i="7"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="7"]:focus-visible) .af-an-arc:not([data-i="7"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="8"]:hover) .af-an-c-p[data-i="8"],.af-an:has(.af-an-l li[data-i="8"]:hover) .af-an-c-p[data-i="8"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="8"]:focus-visible) .af-an-c-p[data-i="8"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="8"]:focus-visible) .af-an-c-p[data-i="8"]{display:block}
.af-an:has(.af-an-l li[data-i="8"]:hover) .af-an-arc:not([data-i="8"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="8"]:focus-visible) .af-an-arc:not([data-i="8"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="9"]:hover) .af-an-c-p[data-i="9"],.af-an:has(.af-an-l li[data-i="9"]:hover) .af-an-c-p[data-i="9"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="9"]:focus-visible) .af-an-c-p[data-i="9"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="9"]:focus-visible) .af-an-c-p[data-i="9"]{display:block}
.af-an:has(.af-an-l li[data-i="9"]:hover) .af-an-arc:not([data-i="9"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="9"]:focus-visible) .af-an-arc:not([data-i="9"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="10"]:hover) .af-an-c-p[data-i="10"],.af-an:has(.af-an-l li[data-i="10"]:hover) .af-an-c-p[data-i="10"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="10"]:focus-visible) .af-an-c-p[data-i="10"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="10"]:focus-visible) .af-an-c-p[data-i="10"]{display:block}
.af-an:has(.af-an-l li[data-i="10"]:hover) .af-an-arc:not([data-i="10"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="10"]:focus-visible) .af-an-arc:not([data-i="10"]){opacity:.4}
.af-an:has(.af-an-arc[data-i="11"]:hover) .af-an-c-p[data-i="11"],.af-an:has(.af-an-l li[data-i="11"]:hover) .af-an-c-p[data-i="11"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-arc[data-i="11"]:focus-visible) .af-an-c-p[data-i="11"],.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="11"]:focus-visible) .af-an-c-p[data-i="11"]{display:block}
.af-an:has(.af-an-l li[data-i="11"]:hover) .af-an-arc:not([data-i="11"]),.af-an:not(:has(.af-an-arc:hover,.af-an-l li:hover)):has(.af-an-l li[data-i="11"]:focus-visible) .af-an-arc:not([data-i="11"]){opacity:.4}
@keyframes af-an-in{from{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){.af-an-d svg{animation:none}}