/* =============================================================================
   SOUFFLEUR · « Glacier » v1
   Maquette de la phase 3. Contrat visuel — le code de production s'y conforme.

   Filiation assumée : l'ossature est celle de SERRE (Sancho v2.1) — échelles
   fermées, la machine en mono, provenance de premier rang, deux niveaux
   d'élévation, icônes filaires trait 1.75, focus en encre. Ce qui change est
   la TEMPÉRATURE : Serre est chaud (ivoire, pistache, lime), Glacier est froid
   (blanc bleuté, ciel, menthe).

   L'ACCENT EST LE CORAIL (arbitré sur maquette, 9 août 2026) : un chaud posé
   sur une palette froide — le contraste vient de la température, pas de la
   saturation. Écartés en essai : magenta #FF4D9D, bleu électrique #3B6BFF (il
   se noie dans un canvas déjà bleuté), citron #D9F24E (il rejouait le lime de
   Serre). Le triplet ci-dessous garde la bascule possible en trois valeurs.
   ========================================================================== */

:root{
  /* --- CANVAS : blanc bleuté, glacial mais pas clinique ------------------- */
  --canvas:#F1F4F7;
  --canvas-deep:#E5EAEF;    /* zone survolée, bande alternée, filets */
  --carte:#FFFFFF;
  --carte-alt:#F7F9FB;      /* en-tête de carte, bloc de provenance */
  --border:#DDE4EA;

  /* --- LES LAVIS : ils soulignent, ils ne peignent pas -------------------- */
  --givre:#D9EBF2;          /* ciel — avatars, pastilles, état actif discret */
  --givre-deep:#BFDCE8;
  --menthe:#D6EFE4;         /* second lavis — l'acquis */

  /* --- ENCRES : bleu-noir qui se lit noir --------------------------------- */
  --ink:#15202A;            /* 15,1:1 sur canvas */
  --ink-2:#4A5866;          /* 7,2:1 */
  /* Mesuré le 16/08 : l'ancien #75838F annonçait 4,5:1 et valait 3,89:1 sur
     carte, 3,52:1 sur canvas. Il portait ~376 nœuds de texte par page. Voici
     le premier gris qui passe AA sur les QUATRE surfaces où il atterrit, sans
     changer de température. */
  --ink-3:#5E6A75;          /* 5,53:1 carte · 5,01:1 canvas · 4,57:1 canvas-deep */

  /* --- L'ACCENT : la signature, en trois variables et pas une.
     --accent        la teinte pure : pastilles, jauge, coche. Ne porte JAMAIS de texte.
     --accent-solid  la même teinte rendue sûre comme FOND de bouton.
     --accent-ink    ce qui s'écrit dessus. C'est là que le citron se distingue :
                     il veut de l'encre, le bleu et le corail veulent du blanc.
     Une teinte change, l'ossature ne bouge pas. ---------------------------- */
  --accent:#FF6B52;         /* la teinte pure — pastilles, jauge, coche */
  /* Le commentaire annonçait 4,6:1 ; la mesure donne 4,21:1, sous le seuil AA
     de 4,5:1 pour du texte normal. Mario a tranché le 16/08 de garder cette
     valeur, qu'il juge plus lisible que le #D13C24 conforme. Le chiffre est
     corrigé, la couleur est un choix assumé. */
  --accent-solid:#E1412A;   /* fond de bouton, 4,21:1 sous du blanc */
  --accent-ink:#FFFFFF;
  --bleu:#1F5F84;           /* le bleu lisible : liens, secondaire (5,8:1) */
  --bleu-deep:#164A69;

  /* --- LE SOMBRE : bleu-noir froid ---------------------------------------- */
  --nuit:#141B22;
  --nuit-alt:#1F2831;
  --nuit-text:#EFF4F8;      /* 15,4:1 sur nuit */
  --nuit-muted:#9AA8B4;     /*  5,6:1 sur nuit */

  /* --- ÉTATS : encre + lavis froid ---------------------------------------- */
  --st-ok:#1C5C48;      --st-ok-bg:#D6EFE4;
  --st-wait:#6B5417;    --st-wait-bg:#F3EBD4;
  --st-no:#8A2740;      --st-no-bg:#F7DFE7;
  --st-info:#1F5F84;    --st-info-bg:#DEEAF2;

  /* --- ESPACEMENT : échelle de 4, 8 paliers ------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:72px;

  /* --- RAYONS : 4 paliers -------------------------------------------------- */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;

  /* --- TEXTE : 7 paliers, pas un de plus ----------------------------------- */
  --t-xs:11px; --t-sm:12.5px; --t-base:14px; --t-md:15px;
  --t-lg:18px; --t-xl:21px; --t-2xl:30px;

  /* --- ÉLÉVATION : 2 niveaux, ombre longue et froide ----------------------- */
  --sh:0 1px 2px rgba(21,32,42,.05);
  --sh-lg:0 2px 4px rgba(21,32,42,.05), 0 24px 48px -24px rgba(21,32,42,.28);

  /* --- MOUVEMENT ----------------------------------------------------------- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-micro:120ms; --d-ui:200ms; --d-panel:260ms;

  /* --- FAMILLES : deux voix ------------------------------------------------ */
  --f-sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --player-h:84px;          /* hauteur du bandeau audio flottant */
  --topbar-h:78px;          /* barre de navigation collante, marge comprise */
}

/* -----------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
/* L'attribut `hidden` ne pose qu'un `display:none` de la feuille du navigateur :
   n'importe quelle règle d'auteur portant `display` le bat en silence. Vu le
   28/08 sur `.btn[hidden]`, qui restait affiché parce que `.btn` déclare
   `display:inline-flex`. On rend l'attribut plus fort que les règles. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font:400 var(--t-md)/1.6 var(--f-sans);
  -webkit-font-smoothing:antialiased;min-height:100dvh;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.15}
h1{font-size:clamp(34px,4vw,48px);letter-spacing:-.045em;line-height:1}
h2{font-size:var(--t-2xl)} h3{font-size:var(--t-xl)} h4{font-size:var(--t-lg)}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:is(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--accent-solid);color:var(--accent-ink)}

.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
    stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:14px;height:14px}

/* L'étiquette de section : la machine parle en mono, en petit, en capitales. */
.sur{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:var(--s3);
}

/* -----------------------------------------------------------------------------
   NAVIGATION — île claire posée sur le canvas
   -------------------------------------------------------------------------- */
/* `top:var(--s4)` collait l'île 16 px sous le haut de la fenêtre, mais laissait
   au-dessus d'elle une bande transparente de la même hauteur : le texte de la
   page y défilait en continu, une tranche de phrase glissant au-dessus de la
   navigation. On colle la barre à `top:0` et on déplace l'écart dans son
   padding, peint en couleur de canvas : la bande devient un masque opaque. */
.topbar{
  position:sticky;top:0;z-index:50;max-width:1180px;margin:0 auto;
  padding:var(--s4) var(--s5) var(--s2);background:var(--canvas);
}
.topbar-in{
  display:flex;align-items:center;gap:var(--s2);min-width:0;
  background:var(--carte);border-radius:var(--r-full);
  padding:10px var(--s4);box-shadow:var(--sh-lg);
}
.brand{display:flex;align-items:center;gap:10px;margin-right:var(--s4);font-weight:600;font-size:17px;letter-spacing:-.02em}
/* Le symbole B3b encre + corail reprend sans rupture les deux couleurs que la
   navigation employait déjà pour l'ancienne marque. */
.brand .mark{
  width:26px;height:26px;border-radius:8px;display:block;flex:none;
}
.nav{display:flex;gap:var(--s1);min-width:0}
.nav a{
  position:relative;
  display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:500;
  font-size:var(--t-base);padding:8px 14px;border-radius:var(--r-full);
  transition:background var(--d-micro) var(--ease-out),color var(--d-micro) var(--ease-out);
}
.nav a:hover{background:var(--canvas);color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{background:var(--nuit);color:var(--nuit-text)}
.nav a[aria-current="page"] .n{background:var(--accent-solid);color:var(--accent-ink)}
.nav .n{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  background:var(--canvas-deep);color:var(--ink-2);padding:1px 7px;border-radius:var(--r-full)}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:var(--t-sm);color:var(--ink-2)}
/* Sorti des styles en ligne du HTML : une règle en ligne l'emporte sur toute
   media query, et la recherche continuait donc de déborder de la barre aux
   largeurs où elle doit céder la place. */
#form-recherche{display:flex;align-items:center;gap:6px}
/* Spécificité alignée sur celle de la règle qui la rallume sous 900 px : un
   `.loupe-recherche` seul se ferait écraser par `.btn-ic`, déclaré plus bas. */
.topbar .who .loupe-recherche{display:none}
#form-recherche input{font:400 var(--t-sm) var(--f-sans);border:1px solid var(--border);
  border-radius:var(--r-full);padding:7px 14px;width:150px;background:var(--canvas)}
.who .av{width:30px;height:30px;border-radius:var(--r-full);background:var(--givre);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;color:var(--ink)}

/* -----------------------------------------------------------------------------
   GABARIT D'ÉCRAN
   -------------------------------------------------------------------------- */
.page{max-width:1180px;margin:0 auto;padding:var(--s7) var(--s5) calc(var(--player-h) + 80px)}
/* Lecteur fermé, la réserve de bas de page n'a plus rien à dégager. */
body.sans-player .page{padding-bottom:var(--s7)}
.head{margin-bottom:var(--s6)}
/* Le titre à deux tons remplace le surtitre qui paraphrasait : la hiérarchie
   vient de la valeur, pas de la taille. Le `.sur` retrouve son emploi utile,
   les vraies étiquettes de rubrique. */
.head h1 .quoi{color:var(--ink-3);font-weight:600}
.head .lede{font-size:var(--t-lg);color:var(--ink-2);max-width:56ch;margin:var(--s4) 0 0;line-height:1.5}
.head .lede b{color:var(--ink);font-weight:600}

/* Le relevé : des chiffres dans le texte, sous leur icône. Pas de tuiles. */
.releve{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);padding:var(--s4) 0 0;margin-top:var(--s3);
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-2);
}
.releve span{display:flex;align-items:center;gap:8px}
.releve .ic{width:15px;height:15px;color:var(--ink-3)}
.releve b{font-size:var(--t-base);color:var(--ink);font-weight:500}

/* -----------------------------------------------------------------------------
   FILTRES
   -------------------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s6) 0 var(--s4)}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font:500 var(--t-base)/1 var(--f-sans);color:var(--ink-2);
  background:transparent;border:1px solid var(--border);border-radius:var(--r-full);
  padding:9px 16px;cursor:pointer;transition:all var(--d-micro) var(--ease-out);
}
.chip:hover{background:var(--carte);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--carte)}
.chip .n{font-family:var(--f-mono);font-size:var(--t-xs);opacity:.65}

/* La barre de la liste : les mêmes chips que l'écran Actions, et le champ qui
   filtre sur place. Douze cartes se parcourent à l'œil, cent non. */
.barre-liste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s6) 0 var(--s4)}
.barre-liste .chips{margin:0}
.recherche-liste{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--carte);min-width:260px;
  transition:border-color var(--d-micro) var(--ease-out);
}
.recherche-liste:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.recherche-liste .ic{width:15px;height:15px;color:var(--ink-3);flex:none}
.recherche-liste input{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  font:400 var(--t-base)/1.2 var(--f-sans);color:var(--ink);
}
@media (max-width:720px){
  .recherche-liste{margin-left:0;width:100%;min-width:0}
}

/* -----------------------------------------------------------------------------
   PRIMITIVES DE SURFACE — source unique.
   Deux supports, pas trois : la CARTE (un objet posé) et la LIGNE (un objet
   qu'on parcourt, séparé par un filet).
   -------------------------------------------------------------------------- */
.fiche,.bloc,.panneau{background:var(--carte)}
.seg,.pt-l,.action{border-top:1px solid var(--canvas-deep)}

/* -----------------------------------------------------------------------------
   LA FICHE — une réunion dans la liste
   -------------------------------------------------------------------------- */
.pile{display:flex;flex-direction:column;gap:var(--s3)}
.fiche{
  display:block;border-radius:var(--r-lg);padding:var(--s5);color:inherit;
  transition:box-shadow var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);
}
a.fiche:hover{box-shadow:var(--sh-lg);text-decoration:none;transform:translateY(-1px)}
.fiche-top{display:flex;align-items:flex-start;gap:var(--s4)}
.fiche .av{
  width:44px;height:44px;border-radius:var(--r-md);background:var(--givre);
  display:grid;place-items:center;flex:none;color:var(--ink);
}
.fiche .av .ic{width:20px;height:20px}
.fiche .qui{flex:1;min-width:0}
.fiche .nom{font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em}
.fiche .meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:6px;
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3);
}
.fiche .meta span{display:flex;align-items:center;gap:6px}
.fiche .meta .ic{width:14px;height:14px}
.fiche .dit{margin:var(--s4) 0 0;font-size:var(--t-md);line-height:1.55;color:var(--ink-2);max-width:78ch}
.fiche-foot{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--canvas-deep)}
/* Une réunion sans action ni point ouvert n'a rien à mettre dans son pied :
   le filet et la marge dessineraient une bande vide, soit exactement le
   remplissage que le produit s'interdit. Le chevron garde sa place. */
.fiche-foot.nu{border-top:none;margin-top:0;padding-top:0}
.fiche-foot .droite{margin-left:auto;display:flex;align-items:center;gap:var(--s3);
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}
/* La provenance : qui a écrit ce compte rendu. Discrète, jamais absente. */
.fiche-foot .machine{display:inline-flex;align-items:center;gap:6px}
.fiche-foot .machine .ic{width:13px;height:13px}

/* L'avancement reste dans la fiche : on voit le travail sans quitter la liste. */
/* Une réunion en cours de traitement se signale par son fond, pas par une
   barre de couleur collée au bord. Un liseré vertical est l'ornement qu'on
   ajoute faute d'avoir décidé ce qui distingue vraiment deux états : il crie
   sans rien dire, et il se répète de carte en carte jusqu'à ne plus rien
   signifier. La jauge et le pourcentage, eux, disent déjà tout. */
.fiche.travaille{background:linear-gradient(180deg,rgba(255,107,82,.045),transparent 120px)}
.avancement-carte{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--canvas-deep)}
.avancement-texte{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-size:var(--t-base);color:var(--ink-2)}
.avancement-texte strong{font-weight:600;color:var(--ink)}
.avancement-texte span{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}
.barre{height:7px;margin-top:10px;border-radius:var(--r-full);overflow:hidden;background:var(--canvas-deep)}
.barre>span{display:block;height:100%;border-radius:inherit;background:var(--accent);position:relative;
  transition:width .6s var(--ease-out)}
.barre>span::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65) 48%,transparent 76%);
  transform:translateX(-100%);animation:balayer 1.8s ease-in-out infinite}
.failed .barre>span,.orbite.failed{background:var(--st-no-bg);color:var(--st-no)}
.failed .barre>span::after{display:none}
@keyframes balayer{to{transform:translateX(100%)}}

.parcours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:12px;position:relative}
.parcours::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:1px;background:var(--border)}
.jalon{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:0;color:var(--ink-3);font:400 9px/1.2 var(--f-mono);text-align:center}
.jalon .point{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  background:var(--carte);box-shadow:inset 0 0 0 1px var(--border);font-size:8px}
.jalon .point .ic{width:10px;height:10px}
/* L'acquis prend le bleu glacier et non la menthe. Le corail marque déjà
   l'étape EN COURS : l'employer aussi pour les étapes faites écraserait la
   distinction, et le vert introduisait une troisième température dans un
   écran qui n'en demandait pas. */
.jalon.fait .point{background:var(--givre-deep);box-shadow:none;color:var(--bleu-deep)}
.jalon.actif{color:var(--ink);font-weight:500}
.jalon.actif .point{background:var(--nuit);box-shadow:0 0 0 4px var(--givre);color:var(--nuit-text)}

/* -----------------------------------------------------------------------------
   PILULES D'ÉTAT — trois registres, pas cinq teintes de SaaS.
     · l'ATTENTE (défaut) : filet neutre, icône + mot
     · le TRAVAIL EN COURS : nuit pleine, point magenta
     · l'ACQUIS : lavis menthe
   -------------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;font:500 var(--t-sm)/1 var(--f-sans);
  padding:6px 11px;border-radius:var(--r-full);white-space:nowrap;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--border);
}
.temps-traitement{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);
  font-family:var(--f-mono);font-size:var(--t-sm)}
.temps-traitement .ic{width:13px;height:13px}
.pill .ic{width:13px;height:13px}
.pill.encours{background:var(--nuit);color:var(--nuit-text);box-shadow:none}
.pill.encours::after{content:"";width:6px;height:6px;border-radius:var(--r-full);
  background:var(--accent);order:-1;animation:pulse 1.6s ease-in-out infinite}
.pill.encours .ic{display:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pill.ok{background:var(--menthe);color:var(--st-ok);box-shadow:none}
.pill.relu{background:var(--givre);color:var(--st-info);box-shadow:none}
.pill.erreur{background:var(--st-no-bg);color:var(--st-no);box-shadow:none}

/* Écran de transition : une salle d'attente calme, pas un spinner technique. */
.transition-traitement{max-width:820px;margin:0 auto;text-align:center;padding:var(--s7) var(--s5) var(--s8);
  background:var(--carte);border-radius:var(--r-lg);box-shadow:var(--sh)}
.transition-traitement .retour{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);
  font-size:var(--t-sm);margin-bottom:var(--s6)}
.transition-traitement .retour .ic{width:14px;height:14px;transform:rotate(180deg)}
.transition-traitement h1{font-size:var(--t-2xl);margin:var(--s2) auto var(--s5);max-width:20ch}
.transition-traitement h2{font-size:var(--t-xl);margin:0 0 var(--s2)}
.transition-traitement>p{max-width:58ch;margin:0 auto;color:var(--ink-2);line-height:1.6}
.chrono-traitement{display:flex;justify-content:center;align-items:center;gap:7px;
  margin:var(--s4) auto 0;color:var(--ink-2);font-family:var(--f-mono);font-size:var(--t-sm)}
.chrono-traitement .ic{width:15px;height:15px;color:var(--accent)}
.chrono-traitement strong{font-size:var(--t-base);color:var(--ink)}
.transition-actions{display:flex;justify-content:center;margin-top:var(--s5)}
.transition-actions .btn:disabled{opacity:.7;cursor:wait}
.mini-charge{width:13px;height:13px;border-radius:50%;border:2px solid var(--nuit-muted);
  border-top-color:var(--accent);animation:tourner .8s linear infinite}
.orbite{width:112px;height:112px;margin:0 auto var(--s5);border-radius:50%;display:grid;place-items:center;
  position:relative;background:var(--nuit);color:var(--nuit-text);font:500 30px/1 var(--f-mono)}
.orbite::before{content:"";position:absolute;inset:-8px;border:2px solid var(--givre-deep);border-top-color:var(--accent);
  border-radius:50%;animation:tourner 2.4s linear infinite}
.orbite small{font-size:12px;margin-left:2px;color:var(--nuit-muted)}
@keyframes tourner{to{transform:rotate(360deg)}}
.barre.grande{height:9px;margin:var(--s6) auto var(--s5);max-width:620px}
.parcours.grand{max-width:680px;margin:0 auto var(--s6)}
.parcours.grand::before{top:13px;left:13px;right:13px}
.parcours.grand .jalon{font-size:var(--t-xs);gap:8px}
.parcours.grand .point{width:27px;height:27px;font-size:10px}
.parcours.grand .point .ic{width:13px;height:13px}
.transition-traitement .confidentialite{display:flex;justify-content:center;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}
.confidentialite .ic{width:14px;height:14px}

@media (max-width:620px){
  /* Pas de `top` ici : décoller l'île du haut de la fenêtre rouvrait la bande
     transparente dans laquelle le texte de la page défilait. */
  .topbar{padding:var(--s2) var(--s3)}
  .topbar-in{padding:8px 10px;border-radius:var(--r-lg)}
  .brand{font-size:0;margin-right:2px;gap:0}
  .nav{flex:1;justify-content:flex-start}
  .nav a{font-size:var(--t-sm);padding:7px 9px;gap:5px}
  .nav a .ic{width:15px;height:15px}
  /* Le bouton d'enregistrement survit jusqu'en bas : c'est la seule porte
     d'entrée du produit, et un téléphone est exactement l'endroit d'où l'on
     enregistre une réunion en présentiel. */
  .topbar .who{margin-left:0}
  .page{padding-left:var(--s3);padding-right:var(--s3)}
  .jalon-nom{display:none}
  .transition-traitement{padding:var(--s6) var(--s4)}
  .parcours.grand .jalon-nom{display:block;font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  .barre>span::after,.orbite::before,.pill.encours::after{animation:none}
}

/* -----------------------------------------------------------------------------
   BOUTONS — trois registres, le texte réservé au geste qui engage.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 var(--t-base)/1 var(--f-sans);letter-spacing:-.01em;
  border:none;border-radius:var(--r-full);padding:11px 18px;cursor:pointer;
  background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--border);
  transition:all var(--d-micro) var(--ease-out);
}
.btn:hover{background:var(--carte-alt);color:var(--ink)}
.btn .ic{width:16px;height:16px}
.btn.decide{background:var(--nuit);color:var(--nuit-text);box-shadow:none}
.btn.decide:hover{background:var(--nuit-alt)}
.btn.prime{background:var(--accent-solid);color:var(--accent-ink);box-shadow:none}
.btn.prime:hover{filter:brightness(.92)}
.btn.sm{padding:7px 13px;font-size:var(--t-sm)}
.btn-ic{
  display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);
  background:transparent;border:none;cursor:pointer;color:var(--ink-2);
  transition:background var(--d-micro) var(--ease-out);
}
.btn-ic:hover{background:var(--canvas);color:var(--ink)}

/* -----------------------------------------------------------------------------
   LE COMPTE RENDU
   -------------------------------------------------------------------------- */
.grille{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s5);align-items:start}
@media (max-width:920px){.grille{grid-template-columns:minmax(0,1fr)}}

/* La colonne de droite suit la page. Le compte rendu d'une longue réunion fait
   plusieurs dizaines d'écrans : figée, la colonne laissait une moitié d'écran
   blanche jusqu'en bas, et le sommaire, les intervenants et l'écoute restaient
   au premier écran. */
.grille aside{
  position:sticky;top:calc(var(--topbar-h) + var(--s3));
  max-height:calc(100vh - var(--topbar-h) - var(--s5));
  display:flex;flex-direction:column;overflow:hidden;
}
/* Seul le sommaire se raccourcit : l'écoute et les intervenants gardent leur
   taille, sinon la colonne les repousserait hors de la fenêtre exactement comme
   avant. */
.grille aside .bloc{flex:none}
.grille aside details.sommaire-bloc[open]{
  flex:1 1 auto;min-height:160px;overflow:hidden;display:flex;flex-direction:column;
}
/* Chrome interpose `::details-content` entre le `details` et son contenu : la
   liste n'est donc pas un enfant flex du bloc, et le `flex:1;min-height:0`
   qu'elle porte ne s'applique à rien. Sans ce relais, le bloc la coupait à
   7 rubriques sur 18 et sans ascenseur - le sommaire affirmait qu'il n'y avait
   rien d'autre. Mesuré le 31/08 sur la fiche la plus longue. */
.grille aside details.sommaire-bloc[open]::details-content{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
/* Les intervenants ferment la colonne : c'est à eux de céder la place, jamais à
   l'écoute ni au sommaire, qui sont les deux gestes de la colonne. */
.grille aside .bloc:last-child{flex:0 1 auto;min-height:0;overflow-y:auto}
/* Sous 920 px la colonne n'a plus de place à elle : ses blocs reprennent leur
   rang dans le fil du document. L'écoute et le sommaire passent devant le
   compte rendu, les intervenants derrière. `display:contents` est ce qui
   permet de les ranger séparément sans les déplacer dans le HTML. */
@media (max-width:920px){
  /* `align-items:start` vient du gabarit à deux colonnes ; en colonne il devient
     un alignement horizontal, et les blocs se rétractaient à leur texte. */
  .grille{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3)}
  .grille aside{display:contents}
  .grille aside .bloc{max-height:none;overflow:visible;margin-bottom:0}
  /* Le bouton d'écoute passe devant, sa glose non : sur un téléphone chaque
     ligne repousse d'autant la première phrase du compte rendu. */
  .grille aside>.bloc:first-child{order:-2}
  .grille aside>.bloc:first-child p{display:none}
  .grille aside>.sommaire-bloc{order:-1}
  .grille>div{order:0}
  .grille aside>.bloc:last-child{order:1}
}
/* Le sommaire fait défiler jusqu'à une rubrique : elle doit s'arrêter sous la
   barre collante, pas derrière. */
.grille > div > .bloc{scroll-margin-top:calc(var(--topbar-h) + var(--s3))}

.sommaire-bloc>summary{
  display:flex;align-items:center;gap:var(--s2);cursor:pointer;list-style:none;
}
.sommaire-bloc>summary::-webkit-details-marker{display:none}
.sommaire-bloc>summary .chevron{
  width:14px;height:14px;flex:none;color:var(--ink-3);
  transition:transform var(--d-micro) var(--ease-out);
}
.sommaire-bloc[open]>summary .chevron{transform:rotate(90deg)}
/* `flex:1 1 auto` et pas seulement `overflow-y:auto` : sans lui la liste garde
   sa hauteur naturelle, le parent la coupe, et rien ne defile. Mesure du 31/08 :
   287 px montres pour 623 px de contenu, soit 10 rubriques sur 18 inatteignables
   a la souris sur la fiche la plus longue. Un sommaire tronque sans ascenseur
   est pire que pas de sommaire : il affirme qu'il n'y a rien d'autre. */
.sommaire{
  display:grid;gap:1px;margin-top:var(--s2);
  flex:1 1 auto;min-height:0;overflow-y:auto;
  /* La barre de defilement est en surimpression sur macOS : elle n'apparait
     qu'au geste, donc au repos rien ne disait qu'il restait onze rubriques en
     dessous, et la derniere ligne visible paraissait coupee par erreur. Le
     fondu dit les deux a la fois : il y a une suite, et elle se deroule. */
  mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.sommaire button{
  display:block;width:100%;text-align:left;padding:6px 9px;border:none;cursor:pointer;
  background:transparent;color:var(--ink-2);font:500 var(--t-base) var(--f-sans);
  border-radius:var(--r-sm);
  transition:background var(--d-micro) var(--ease-out),color var(--d-micro) var(--ease-out);
}
.sommaire button:hover{background:var(--canvas);color:var(--ink)}

/* Le transcript replié : sa poignée est un titre de rubrique, pas un lien de
   bas de page, parce que c'est bien une des rubriques du document. */
/* `flex-wrap` : la poignee porte deux pastilles dont l'une compte les repliques.
   A trois chiffres (« 218 repliques ») elle depassait de 15 px a 375 px et
   faisait defiler toute la page en travers. Une pastille passe a la ligne. */
.repli-transcript>summary{
  display:flex;align-items:center;gap:var(--s3);cursor:pointer;list-style:none;
  flex-wrap:wrap;
}
.repli-transcript>summary h3{min-width:0}
.repli-transcript>summary::-webkit-details-marker{display:none}
.repli-transcript>summary h3{margin:0;font-size:var(--t-lg)}
.repli-transcript>summary .pill:first-of-type{margin-left:auto}
.repli-transcript>summary .chevron{
  width:16px;height:16px;flex:none;color:var(--ink-3);
  transition:transform var(--d-micro) var(--ease-out);
}
.repli-transcript[open]>summary .chevron{transform:rotate(90deg)}
.repli-transcript>summary:hover .chevron{color:var(--ink)}
.corps-transcript{margin-top:var(--s4)}

.bloc{border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s3)}

/* La colonne du compte rendu est UN document, pas treize objets flottants.
   Le sectionnement passe du contour à la typographie, qui est son travail :
   treize cartes au même rayon et à la même ombre ne disent pas ce qui compte. */
.grille > div > .bloc{border-radius:0;margin-bottom:0;border-top:1px solid var(--canvas-deep)}
.grille > div > .bloc:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0;border-top:none}
.grille > div > .bloc:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.grille > div > .bloc h3{font-size:var(--t-lg)}
.bloc h3{margin-bottom:var(--s3)}

/* Le TL;DR porte le lavis : c'est la seule phrase que tout le monde lira. */
/* Remonte à 21 px : redevient la seule chose plus grosse que le corps, et
   comble une partie du trou entre 21 et 48 de l'échelle. */
.tldr{font-size:var(--t-xl);line-height:1.45;color:var(--ink)}
.tldr b{font-weight:600;box-shadow:inset 0 -.45em 0 var(--givre)}

/* Décisions et points ouverts : des lignes, pas des cartes. */
.pt-l{display:flex;gap:var(--s3);padding:12px 0;font-size:var(--t-md);color:var(--ink)}
.pt-l:first-of-type{border-top:none}
.pt-l .ic{width:16px;height:16px;margin-top:4px;flex:none;color:var(--ink-3)}
.ts{
  flex:none;margin-left:auto;font-family:var(--f-mono);font-size:var(--t-sm);
  color:var(--bleu);background:transparent;border:none;cursor:pointer;padding:2px 6px;
  border-radius:var(--r-sm);
}
.ts:hover{background:var(--givre)}

/* Les actions : une case à cocher, un porteur, une échéance, une preuve. */
.action{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s3);padding:14px 0}
.action:first-of-type{border-top:none}
.action input[type=checkbox]{
  appearance:none;width:19px;height:19px;flex:none;margin-top:2px;cursor:pointer;
  border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--border);background:var(--carte);
  transition:all var(--d-micro) var(--ease-out);
}
.action input[type=checkbox]:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.action input[type=checkbox]:checked{background:var(--nuit);box-shadow:none}
.action input[type=checkbox]:checked::after{
  content:"";display:block;width:5px;height:9px;margin:2px auto 0;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.action .corps{flex:1;min-width:0}
.action.fait .quoi{color:var(--ink-3);text-decoration:line-through}
.action .quoi{font-size:var(--t-md);color:var(--ink)}
.action .sous{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);margin-top:5px;
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3);
}
.action .porteur{
  display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;
}
.action .porteur .in{
  width:20px;height:20px;border-radius:var(--r-full);background:var(--givre);
  display:grid;place-items:center;font-size:10px;
}
.action .echeance{color:var(--st-wait)}

/* -----------------------------------------------------------------------------
   LES INTERVENANTS — le nom suggéré n'est jamais acquis tant qu'on ne l'a
   pas confirmé. C'est la contrainte RGPD rendue visible : la machine propose,
   l'humain tranche.
   -------------------------------------------------------------------------- */
.gens{display:flex;flex-direction:column;gap:var(--s2)}
.g{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:8px 0}
.g .in{
  width:32px;height:32px;border-radius:var(--r-full);flex:none;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--t-sm);
  font-weight:500;background:var(--givre);color:var(--ink);
}
.g .n{flex:1;min-width:0;font-size:var(--t-base)}
.g .n .propose{color:var(--ink-3);font-style:italic}
.g .n .sr{display:block;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);margin-top:1px}
.g.confirme .in{background:var(--menthe)}
.editeur-nom{
  flex:1 0 100%;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s2);padding:var(--s3);margin-top:var(--s2);
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--carte-alt)
}
.editeur-nom[hidden]{display:none}
.editeur-nom label{grid-column:1/-1;font:600 var(--t-xs)/1 var(--f-mono);
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.editeur-nom input{min-width:0;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--carte);color:var(--ink);padding:9px 11px;font:500 var(--t-base)/1.2 var(--f-sans)}
.editeur-nom input:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-color:var(--accent)}
.editeur-actions{display:flex;gap:var(--s2)}
@media(max-width:560px){.editeur-nom{grid-template-columns:1fr}.editeur-actions{justify-content:flex-end}}

/* -----------------------------------------------------------------------------
   LE TRANSCRIPT — la preuve. Chaque réplique renvoie à sa seconde d'audio.
   -------------------------------------------------------------------------- */
.seg{display:flex;gap:var(--s4);padding:14px 0;scroll-margin-top:120px}
.seg:first-of-type{border-top:none}
.seg .col{flex:none;width:104px;display:flex;flex-direction:column;gap:3px}
.seg .qui{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.seg .t{
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--bleu);
  background:none;border:none;padding:0;cursor:pointer;text-align:left;
}
.seg .t:hover{text-decoration:underline;text-underline-offset:3px}
.seg .txt{font-size:var(--t-md);line-height:1.6;color:var(--ink);max-width:72ch}
.seg.actif{background:var(--carte-alt);border-radius:var(--r-sm)}
.seg.actif .txt{color:var(--ink)}

/* -----------------------------------------------------------------------------
   PROVENANCE & CONFORMITÉ — de premier rang, jamais en pied de page gris.
   La mention AI Act n'est pas une note légale honteuse : c'est une information
   sur la fabrication du document, au même niveau que sa date.
   -------------------------------------------------------------------------- */
.prov{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--s4);
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-2);
}
.prov .ic{width:14px;height:14px;color:var(--ink-3)}
.prov .machine{display:inline-flex;align-items:center;gap:6px}
.langue-notes{
  display:inline-flex;align-items:center;gap:7px;padding:4px 5px 4px 9px;
  border:1px solid var(--border);border-radius:var(--r-full);
  background:color-mix(in srgb,var(--carte) 72%,transparent);color:var(--ink-3);
  font:500 var(--t-sm)/1 var(--f-mono);white-space:nowrap;
  transition:border-color var(--d-micro) var(--ease-out),background var(--d-micro) var(--ease-out)
}
.langue-notes:hover{border-color:var(--ink-3);background:var(--carte)}
.langue-notes:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.langue-notes>.ic{width:13px;height:13px;color:var(--ink-3)}
.langue-notes select{
  appearance:none;max-width:190px;border:0;border-radius:var(--r-full);
  background:var(--canvas-deep);color:var(--ink);padding:6px 28px 6px 10px;
  font:600 var(--t-sm)/1.2 var(--f-sans);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center
}
.langue-notes select:focus{outline:none}
.langue-notes select:disabled{opacity:.55}
@media(max-width:560px){
  .langue-notes{width:100%;justify-content:flex-start}
  .langue-notes select{margin-left:auto;max-width:58%}
}
.relu{
  display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--canvas-deep);
}
.relu .txt{flex:1;font-size:var(--t-sm);color:var(--ink-2);font-family:var(--f-mono)}

/* -----------------------------------------------------------------------------
   LE BANDEAU AUDIO — la seule surface en verre du produit.
   Le verre est réservé à ce qui FLOTTE au-dessus du contenu : ici la lecture
   suit la page pendant qu'on lit le transcript. Partout ailleurs, le blanc
   plein — un verre appliqué à tout n'est plus un signal, c'est un décor.

   Un SEUL objet, pas deux. Le transcript défilant et la barre de transport
   étaient deux panneaux cousus à 12 px : deux bordures, deux ombres, deux
   flous, pour un geste unique — écouter en suivant ce qui se dit. La coquille
   vit désormais sur `.player-boite` ; ses deux zones ne portent qu'un filet
   pour se séparer.
   -------------------------------------------------------------------------- */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--s3) var(--s5) var(--s4);
}
.player-boite{
  max-width:1180px;margin:0 auto;
  border-radius:var(--r-lg);
  /* Le souffle est arrondi par la boîte, pas par lui-même : sans ce
     découpage son texte déborderait dans les coins. */
  overflow:hidden;
  background:rgba(20,27,34,.94);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, var(--sh-lg);
  border:1px solid rgba(255,255,255,.10);
}
.player-in{
  height:var(--player-h);
  display:flex;align-items:center;gap:var(--s4);padding:0 var(--s5);
}
/* Le filet n'existe que lorsqu'il y a deux zones à séparer. Souffle replié,
   la boîte est une barre pleine et une ligne en haut ne séparerait rien. */
.souffle:not([hidden]) + .player-in{border-top:1px solid rgba(255,255,255,.10)}

/* --- Le souffle : transcript défilant pendant l'écoute -----------------------
   La piste entière est rendue puis translatée pour amener la réplique courante
   au centre — c'est ce qui donne le glissement continu plutôt qu'un texte qui
   se remplace d'un coup. Le masque dégradé fait disparaître le haut et le bas :
   l'œil n'a pas de bord net à accrocher, seule la ligne nette compte.
   -------------------------------------------------------------------------- */
/* Zone nue : le verre, la bordure et l'ombre appartiennent à `.player-boite`. */
.souffle{height:268px;position:relative}
/* Le masque porte sur le texte seul. Sur .souffle il effacerait aussi le verre,
   et la page défilerait au travers du panneau. */
.souffle-vue{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 68%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 68%,transparent 100%);
}
/* La colonne de texte est plus étroite que le panneau et centrée : des lignes
   de 84 caractères étalées sur 1180 px laisseraient un grand vide à droite. */
.souffle-piste{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(920px, calc(100% - 2 * var(--s5)));
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.souffle .ligne{
  display:flex;gap:var(--s4);align-items:baseline;padding:8px 0;
  cursor:pointer;opacity:.3;
  transition:opacity .35s var(--ease-out), color .35s var(--ease-out);
}
.souffle .ligne .qui{
  flex:none;width:96px;text-align:right;font-size:var(--t-sm);font-weight:600;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.souffle .ligne .dit{font-size:var(--t-md);line-height:1.55;color:var(--nuit-muted)}
.souffle .ligne.pres{opacity:.55}
.souffle .ligne.actif{opacity:1}
.souffle .ligne.actif .dit{color:var(--nuit-text);font-weight:500}
.souffle .ligne.actif .qui{color:var(--accent)}
.souffle .ligne:hover{opacity:.85}
/* Le mot déjà prononcé passe au corail : on voit la voix avancer dans la ligne. */
.souffle .m{font-style:normal;transition:color .12s linear}
.souffle .ligne.actif .m.dite{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .souffle-piste{transition:none}
}
@media (max-width:720px){
  .souffle{height:196px}
  .souffle .ligne{flex-direction:column;gap:2px;padding:7px 0}
  .souffle .ligne .qui{width:auto;text-align:left}
}
/* `.btn-ic` est taillé pour le fond clair : dans le bandeau nuit, ses deux
   couleurs se retournent, sans quoi la croix de fermeture serait illisible. */
.player .btn-ic{color:var(--nuit-muted)}
.player .btn-ic:hover{background:rgba(255,255,255,.12);color:var(--nuit-text)}
#bascule-souffle[aria-pressed="true"]{color:var(--accent-solid);background:var(--canvas-deep)}

.player .lire{
  width:46px;height:46px;border-radius:var(--r-full);flex:none;cursor:pointer;
  background:var(--accent-solid);color:#FFFFFF;border:none;display:grid;place-items:center;
  transition:background var(--d-micro) var(--ease-out);
}
.player .lire:hover{filter:brightness(.92)}
.player .lire .ic{width:20px;height:20px}
.player .corps{flex:1;min-width:0}
.player .titre{font-size:var(--t-sm);font-weight:600;color:var(--nuit-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .piste{
  position:relative;height:4px;border-radius:var(--r-full);
  background:rgba(255,255,255,.16);margin-top:9px;cursor:pointer;
}
.player .fait{position:absolute;inset:0 auto 0 0;width:34%;border-radius:var(--r-full);background:var(--accent)}
.player .tete{
  position:absolute;top:50%;left:34%;width:12px;height:12px;border-radius:var(--r-full);
  background:var(--nuit-text);box-shadow:0 0 0 2px var(--accent),var(--sh);transform:translate(-50%,-50%);
}
.player .temps{
  flex:none;font-family:var(--f-mono);font-size:var(--t-sm);color:var(--nuit-muted);
  font-variant-numeric:tabular-nums;
}
.player .vitesse{
  flex:none;font-family:var(--f-mono);font-size:var(--t-sm);color:var(--nuit-muted);
  background:transparent;border:none;cursor:pointer;padding:6px 10px;border-radius:var(--r-full);
}
.player .vitesse:hover{background:rgba(255,255,255,.12);color:var(--nuit-text)}
@media (max-width:720px){
  .player .temps,.player .vitesse{display:none}
}

/* -----------------------------------------------------------------------------
   DÉPÔT — la porte d'entrée

   C'est le seul vrai geste du produit, et il portait la même grisaille que le
   reste : pointillés gris, icône grise, aucun bouton plein. Le corail avait
   été dépensé ailleurs, sur cinq filtres alignés. Rendu aux filtres leur encre,
   il revient ici — une couleur qui marque tout ne marque plus rien.
   -------------------------------------------------------------------------- */
.depot{
  border-radius:var(--r-lg);padding:var(--s8) var(--s5);text-align:center;
  background:var(--carte);border:1.5px dashed var(--accent);
  transition:all var(--d-ui) var(--ease-out);
}
.depot:hover{border-color:var(--accent-solid);background:var(--carte-alt)}
.depot .ic{width:30px;height:30px;color:var(--accent-solid);margin-bottom:var(--s3)}
.depot h3{margin-bottom:var(--s2)}
.depot p{margin:0 auto;color:var(--ink-2);max-width:46ch;font-size:var(--t-base)}
/* Faux bouton : le label parent ouvre déjà le sélecteur. Un vrai `button`
   imbriqué dans un `label` empile deux contrôles pour un seul geste. */
.depot .btn{margin-top:var(--s4)}

/* Le vide : jamais une page blanche, toujours le prochain geste. */
.vide{text-align:center;padding:var(--s8) var(--s5);color:var(--ink-2)}
.vide .ic{width:28px;height:28px;color:var(--ink-3);margin-bottom:var(--s3)}




/* -----------------------------------------------------------------------------
   LES SOURCES — un dossier surveillé est un objet du produit, pas une ligne
   de fichier de configuration. Il a un état, une politique, une histoire.
   -------------------------------------------------------------------------- */
.source .chemin{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}

/* Le réglage vit DANS la carte de sa source : on ne va pas le chercher
   ailleurs, et on voit ce sur quoi il agit. */
.reglage{
  margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-md);
  background:var(--carte-alt);
}
.reglage .quoi{
  display:block;font-family:var(--f-mono);font-size:var(--t-sm);
  color:var(--ink-2);margin-bottom:10px;
}
.reglage .pourquoi{
  margin:10px 0 0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-3);max-width:64ch;
}

/* Contrôle segmenté : deux états mutuellement exclusifs, visibles d'un coup.
   Un interrupteur cacherait l'option non choisie — or c'est justement le
   choix qu'on veut donner à voir sur une action destructive. */
.segmente{display:inline-flex;background:var(--canvas-deep);border-radius:var(--r-full);padding:3px}
.segmente button{
  font:500 var(--t-sm)/1 var(--f-sans);color:var(--ink-2);
  background:transparent;border:none;cursor:pointer;
  padding:8px 15px;border-radius:var(--r-full);
  transition:all var(--d-micro) var(--ease-out);
}
.segmente button:hover{color:var(--ink)}
.segmente button[aria-pressed="true"]{background:var(--carte);color:var(--ink);box-shadow:var(--sh)}

/* La note : une explication de mécanique, pas un avertissement. Elle a le
   calme d'une carte ordinaire — pas de fond jaune, pas d'icône d'alerte. */
.note{border-radius:var(--r-lg);padding:var(--s5)}
/* Une mise en route technique, repliée : hors du chemin principal, jamais
   perdue. */
.reglage-technique>summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:var(--t-md);font-weight:600;color:var(--ink);
}
.reglage-technique>summary::-webkit-details-marker{display:none}
.reglage-technique>summary .ic{width:14px;height:14px;color:var(--ink-3);
  transition:transform var(--d-micro) var(--ease-out)}
.reglage-technique[open]>summary .ic{transform:rotate(90deg)}
.reglage-technique p{margin-top:var(--s3)}
.note p{margin:0;font-size:var(--t-base);line-height:1.6;color:var(--ink-2);max-width:74ch}
.note b{color:var(--ink);font-weight:600}


/* =============================================================================
   LA MARQUE DU PROPOSÉ — la grammaire centrale du produit.

   Tout ce que la machine avance et que personne n'a encore validé porte le
   MÊME signe : un liseré corail à gauche. Un client deviné, un nom
   d'intervenant, une décision extraite, une clôture d'engagement suggérée —
   un seul signe pour les six objets de l'ontologie.

   Ce n'est pas une convention d'affichage : c'est la colonne `origine`
   (propose | confirme) rendue visible. Une notion, du schéma jusqu'au pixel.

   C'est aussi la réponse à l'article 50 de l'AI Act. La mention « rédigé par
   IA » cesse d'être une note de bas de page pour devenir la texture de
   l'écran : on voit en permanence ce que la machine avance et ce qu'un humain
   a tranché.
   ========================================================================== */
/* Le liseré vertical est tombé : le dégradé disait déjà « proposé », et la
   barre ne faisait que le répéter en criant. La grammaire du proposé ne perd
   rien, elle cesse de porter deux marques pour une seule notion. */
.prop{
  padding-left:var(--s4);
  background:linear-gradient(90deg,rgba(255,107,82,.10),rgba(255,107,82,.02) 55%,transparent);
  border-radius:var(--r-sm);
}
/* Inline : un mot proposé au milieu d'une phrase (un client deviné). */
.mot-prop{border-bottom:1.5px dashed var(--accent);padding-bottom:1px;font-style:normal}

/* Accepter est un geste léger et réversible : pas un bouton plein. */
.valider{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font:500 var(--t-sm)/1 var(--f-sans);color:var(--accent-solid);
  background:transparent;border:none;cursor:pointer;padding:6px 11px;
  border-radius:var(--r-full);transition:background var(--d-micro) var(--ease-out);
}
.valider:hover{background:var(--givre)}
.valider .ic{width:14px;height:14px}
.ecarter{color:var(--ink-3)}
.ecarter:hover{background:var(--canvas-deep)}

/* Le repli des écartés. Un tri invisible est indistinguable d'un tri raté :
   ce que la vérification a retiré reste consultable, toujours. */
.ecartes{margin-top:var(--s4);border-top:1px solid var(--canvas-deep);padding-top:var(--s3)}
.ecartes summary{
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
}
.ecartes summary::-webkit-details-marker{display:none}
.ecartes summary:hover{color:var(--ink-2)}
.ecartes .ic{width:14px;height:14px;transition:transform var(--d-micro) var(--ease-out)}
.ecartes[open] summary .ic{transform:rotate(90deg)}
.ecartes .item{padding:10px var(--s4);margin-top:var(--s3);
  background:var(--canvas);border-radius:var(--r-sm)}
.ecartes .item .txt{font-size:var(--t-base);color:var(--ink-3)}
/* Le motif complet ne s'affiche plus par défaut : une étiquette courte tient
   la ligne, le paragraphe du modèle attend qu'on le demande. */
.ecartes .pourquoi{margin-top:6px}
.ecartes .etiquette{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
  padding:3px 9px;border-radius:var(--r-full);background:var(--canvas-deep);
  font:500 var(--t-xs)/1.4 var(--f-sans);color:var(--ink-3);
}
.ecartes .etiquette::-webkit-details-marker{display:none}
.ecartes .etiquette::before{content:"";width:5px;height:5px;border-radius:var(--r-full);
  background:var(--ink-3);opacity:.55}
.ecartes .etiquette:hover{background:var(--givre);color:var(--ink-2)}
.ecartes .pourquoi[open] .etiquette{background:var(--givre);color:var(--ink-2)}
.ecartes .item .motif{margin-top:6px;font-size:var(--t-sm);color:var(--ink-3);max-width:62ch}

/* =============================================================================
   ORGANISATIONS ET ENGAGEMENTS — le contexte devient navigable.
   ========================================================================== */
.head-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5)}
.grille-organisations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.organisation-card .sceau,.orga .sceau{
  width:56px;height:56px;border-radius:var(--r-md);flex:none;
  background:var(--nuit);color:var(--accent);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:var(--t-lg);font-weight:500;letter-spacing:-.02em;
}
.organisation-card .chevron{width:18px;height:18px;color:var(--ink-3);align-self:center}
.stats-organisation{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--canvas-deep);font-family:var(--f-mono);
  font-size:var(--t-sm);color:var(--ink-3)}
.stats-organisation b{color:var(--ink);font-weight:500}
.creation{display:grid;grid-template-columns:2fr 1fr 2fr auto;gap:var(--s3);align-items:end;
  background:var(--carte);border-radius:var(--r-lg);padding:var(--s5);margin:calc(-1 * var(--s3)) 0 var(--s5)}
.creation[hidden]{display:none}
.creation label{display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);
  font-size:var(--t-sm);color:var(--ink-3)}
.creation input,.creation select{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--canvas);color:var(--ink);padding:10px 12px;font:400 var(--t-base) var(--f-sans)}
.creation.compacte{grid-template-columns:1fr auto;padding:var(--s3);margin:var(--s3) 0 0;background:var(--canvas)}
.creation.compacte label+label{grid-column:1}
.section-organisation{margin-top:var(--s7)}
.titre-section{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s3)}
.titre-section h2{font-size:var(--t-xl)}
.titre-section>a{font-size:var(--t-sm);font-weight:500}
.annexes{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s7)}
.annexes .bloc{margin:0}
.liste-simple{list-style:none}
.liste-simple li{display:flex;justify-content:space-between;gap:var(--s3);padding:12px 0;
  border-top:1px solid var(--canvas-deep);font-size:var(--t-md)}
.liste-simple li:first-child{border-top:none}
.liste-simple li span{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}
.etat-vide{padding:var(--s5);border:1px dashed var(--border);border-radius:var(--r-md);color:var(--ink-3)}
.mini-pile .fiche{padding:var(--s4)}
.retour{display:inline-flex;align-items:center;gap:5px;margin-bottom:var(--s5);color:var(--ink-2);
  font-size:var(--t-sm);font-weight:500}
.retour .ic{width:14px;height:14px;transform:rotate(180deg)}
.filtres{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.liste-engagements{background:var(--carte);border-radius:var(--r-lg);padding:0 var(--s5)}
/* Les actions regroupées par client : le titre porte le compte des retards,
   pour que l'endroit où aller se lise avant la première description. */
.engagements-groupes{display:flex;flex-direction:column;gap:var(--s5)}
.groupe-engagements{background:var(--carte);border-radius:var(--r-lg);padding:var(--s4) var(--s5) var(--s3)}
.titre-groupe{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);
  font-size:var(--t-md);font-weight:600;padding-bottom:var(--s3);
  border-bottom:1px solid var(--canvas-deep)}
.titre-groupe .ic{width:16px;height:16px;color:var(--ink-3)}
.titre-groupe .compte-groupe{margin-left:auto;font-family:var(--f-mono);
  font-size:var(--t-sm);font-weight:400;color:var(--ink-3)}
.groupe-engagements .engagement:first-of-type{border-top:none}
/* La seule marque rouge de la ligne : ce qui a dépassé sa date. */
.marque-retard{display:inline-flex;align-items:center;flex:none;padding:2px 8px;
  border-radius:var(--r-full);background:var(--st-no-bg);color:var(--st-no);
  font:600 var(--t-xs)/1.5 var(--f-sans);letter-spacing:.01em}
.engagement{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--canvas-deep)}
.engagement:first-child{border-top:none}
.engagement input[type=checkbox]{appearance:none;width:20px;height:20px;flex:none;margin-top:2px;cursor:pointer;
  border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--border);background:var(--carte)}
.engagement input[type=checkbox]:checked{background:var(--nuit);box-shadow:none}
.engagement input[type=checkbox]:checked::after{content:"";display:block;width:5px;height:9px;margin:2px auto 0;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.engagement .corps{flex:1;min-width:0}.engagement .quoi{display:block;font-size:var(--t-md)}
.engagement .sous{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);margin-top:6px;
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}
.engagement .porteur{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500}
.engagement .porteur .in{width:20px;height:20px;border-radius:var(--r-full);background:var(--givre);
  display:grid;place-items:center;font-size:10px}.engagement .echeance{color:var(--st-wait)}
/* La pastille porte le rouge ; la date qui la suit redevient une donnée
   calme, sinon deux marques crient la même chose. */
.echeance.en-retard{color:var(--ink-2);font-weight:500}
.engagement.fait .quoi{color:var(--ink-3);text-decoration:line-through}
.source-engagement,.source-ligne{color:var(--bleu)}
.source-ligne{display:block;margin-top:5px;font-family:var(--f-mono);font-size:var(--t-sm)}
.section-organisation .item{padding:12px 0;border-top:1px solid var(--canvas-deep)}
.section-organisation .item:first-child{border-top:none}
.partage{position:relative}.partage summary{list-style:none;cursor:pointer}
.partage summary::-webkit-details-marker{display:none}
.menu-partage{position:absolute;right:0;top:calc(100% + 6px);z-index:10;min-width:190px;
  padding:6px;background:var(--carte);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg)}
.menu-partage a{display:block;padding:9px 10px;border-radius:var(--r-sm);color:var(--ink);font-size:var(--t-sm)}
.menu-partage a:hover{background:var(--canvas);text-decoration:none}
.partage-organisation{margin-left:auto}
.menu-partage button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;
  border:none;background:none;border-radius:var(--r-sm);color:var(--ink);
  font:400 var(--t-sm) var(--f-sans);text-align:left;cursor:pointer}
.menu-partage button:hover{background:var(--canvas)}
/* Le rouge n'apparaît qu'ici : il dit « ceci ne se défait pas ». Utilisé
   ailleurs, il ne dirait plus rien le jour où il compte. */
.menu-partage button.destructif{color:var(--st-no)}
.menu-partage button.destructif:hover{background:var(--st-no-bg)}

/* Le titre d'une réunion s'édite là où il s'affiche. */
.titre-reunion{display:flex;align-items:center;gap:var(--s2)}
.titre-reunion h1{min-width:0}
.titre-reunion h1.en-edition{outline:2px solid var(--accent);outline-offset:4px;
  border-radius:var(--r-sm)}
.menu-reunion summary{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:var(--r-full);color:var(--ink-3)}
.menu-reunion summary:hover{background:var(--canvas-deep);color:var(--ink)}

/* Corriger une action : responsable et échéance sont des boutons, et le
   formulaire s'ouvre sous la ligne plutôt que dans une boîte par-dessus. */
.action .coche,.engagement .coche{display:flex;flex:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.action .sous button.porteur,.engagement .sous button.porteur,
.action .sous button.echeance,.engagement .sous button.echeance,
.sous button.a-poser{
  border:none;background:none;padding:2px 6px;margin:-2px -6px;border-radius:var(--r-sm);
  font:inherit;cursor:pointer;color:inherit}
/* Le champ manquant se dit par son icône dans un cadre pointillé, plus par une
   phrase répétée sur trente lignes. Le libellé vit dans title et aria-label. */
.sous button.a-poser{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;
  margin:0;color:var(--ink-3);border:1px dashed var(--border);border-radius:var(--r-full);
  opacity:.65}
.sous button.a-poser .ic{width:13px;height:13px}
.engagement:hover .a-poser,.action:hover .a-poser,.sous button.a-poser:focus-visible{opacity:1}
.sous button.porteur:hover,.sous button.echeance:hover,.sous button.a-poser:hover{
  background:var(--canvas-deep);color:var(--ink)}
/* `flex:0 0 100%` : la ligne d'action est un conteneur flex, et sans cette
   base le formulaire se rangerait À CÔTÉ de l'action au lieu de dessous. */
.regle-tache{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);
  margin:var(--s3) 0 var(--s2) 31px;padding:var(--s3);background:var(--canvas);
  border-radius:var(--r-md)}
.regle-tache label{display:flex;flex-direction:column;gap:4px}
.regle-tache .sur{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.regle-tache input{font:400 var(--t-sm) var(--f-sans);padding:7px 10px;background:var(--carte);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--ink)}
.regle-boutons{display:flex;gap:var(--s2)}
.ecartes .item .repecher{margin-top:8px}
@media(max-width:640px){
  .regle-tache{margin-left:0}
  .regle-tache label{flex:1 1 100%}
  .regle-tache input{width:100%}
}

/* Sous 900 px, le chrome se resserre mais le geste d'enregistrer reste.
   Il partait avec le reste du bloc `.who`, or 900 px est exactement la largeur
   d'un demi-écran posé à côté d'une visio : l'usage réel du produit. On ne peut
   pas enlever le bouton d'enregistrement à la seule largeur où l'on enregistre.
   La recherche, elle, cède la place : elle se retrouve depuis n'importe quel
   écran, l'enregistrement ne se rattrape pas. */
@media(max-width:900px){
  .topbar .who{gap:6px}
  .topbar-in>#form-recherche{display:none}
  .topbar .who .loupe-recherche{display:grid}
  .brand{margin-right:var(--s2)}
  .nav a{padding:8px 10px}
  /* Les libellés de nav tombaient 120 px plus bas que la recherche (780 px).
     Entre les deux seuils, la nav en toutes lettres restait seule à occuper la
     largeur libérée et poussait le bouton d'enregistrement hors de l'île : à
     800 px il était coupé. Les deux cèdent maintenant au même seuil, celui où
     le chrome se resserre. */
  .nav a .lb{display:none}
  /* Une icône muette suivie d'un « 12 » détaché se lit comme deux objets sans
     rapport. Collé en pastille sur le coin de l'icône, le nombre redevient le
     compte DE cette destination : la convention est connue de tous. */
  .nav a:has(.n){padding-right:23px}
  .nav a .n{
    position:absolute;top:2px;right:2px;padding:1px 4px;line-height:1.25;
    font-size:10px;background:var(--canvas-deep);color:var(--ink-2);
    border:1.5px solid var(--carte);
  }
  .nav a[aria-current="page"] .n{border-color:var(--nuit)}
  /* L'icône porte le geste, comme elle porte la destination dans la nav. */
  .enregistrer .lb{display:none}
  .btn.sm.enregistrer{padding:8px 10px}
  /* Le repli de la recherche : la loupe déplie le champ sur une seconde ligne
     de l'île plutôt que de le glisser dans une largeur qui n'existe plus. */
  .topbar-in.recherche-ouverte{flex-wrap:wrap}
  .topbar-in.recherche-ouverte>#form-recherche{display:flex;flex:0 0 100%;margin-top:8px}
  .topbar-in.recherche-ouverte>#form-recherche input{width:100%}
}
/* Même contrat que Sancho v2 : quand le chrome se resserre, l'icône porte la
   destination et le compteur reste visible. Le libellé demeure dans le DOM et
   chaque lien possède un aria-label explicite. */
@media(max-width:780px){
  .topbar{margin:0;padding:var(--s2)}
  .topbar-in{padding:9px var(--s3);gap:6px}
  .brand{margin-right:var(--s2)}
  .nav{flex:1;justify-content:center}
  .nav a{padding:8px 10px}
}
@media(max-width:760px){
  .grille-organisations,.annexes{grid-template-columns:1fr}
  .creation{grid-template-columns:1fr}.creation.compacte{grid-template-columns:1fr auto}
  .head-actions{align-items:flex-start;flex-direction:column}
}
@media(max-width:620px){
  .topbar-in{overflow:visible}.nav{min-width:0;justify-content:space-evenly}
  .nav a{padding:7px 8px}.head-actions .btn{width:100%}
}

/* =============================================================================
   L'EN-TÊTE D'ORGANISATION — le client comme sujet, pas comme filtre.
   ========================================================================== */
.orga{display:flex;align-items:center;gap:var(--s4)}

/* Le rattachement d'une réunion : client · projet, en tête de fiche. */
.rattache{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-2);
  background:var(--canvas-deep);padding:3px 10px;border-radius:var(--r-full);
}
.rattache .ic{width:13px;height:13px;color:var(--ink-3)}
.pastilles-reunion{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
a.rattache{color:var(--ink-2)}
a.rattache:hover,.rattache.cliquable:hover{background:var(--givre);color:var(--ink);text-decoration:none}
.rattache.cliquable{border:none;cursor:pointer;font-weight:500}
#boite-rattachement{margin-top:var(--s3)}
.editeur-rattachement{
  display:flex;align-items:end;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);
  padding:var(--s2);width:max-content;max-width:100%;border-radius:var(--r-md);
  background:var(--canvas-deep);font-family:var(--f-mono);font-size:var(--t-sm);
}
.editeur-rattachement>svg{width:16px;height:16px;align-self:center;color:var(--ink-3);margin:0 3px}
.editeur-rattachement label{display:grid;gap:3px;color:var(--ink-3)}
.editeur-rattachement select{min-width:170px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--carte);padding:7px 30px 7px 10px;font:500 var(--t-sm) var(--f-sans);color:var(--ink)}
.editeur-rattachement.prop{box-shadow:none}
/* L'origine se dit par la pastille, jamais par une phrase en note de bas de
   bloc : « propose | confirme » est une colonne, elle a droit au même signe
   partout. */
.marque-propose{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:var(--r-full);background:var(--givre);color:var(--ink-2);
  font:500 var(--t-xs)/1.5 var(--f-sans)}
.marque-propose .ic{width:12px;height:12px;color:var(--accent-solid)}
.rattachement-organisation{grid-template-columns:2fr 1fr auto;margin:0 0 var(--s4)}
@media(max-width:620px){
  .editeur-rattachement{width:100%;align-items:stretch}
  .editeur-rattachement>svg{display:none}
  .editeur-rattachement label{flex:1 1 100%}.editeur-rattachement select{width:100%}
  .rattachement-organisation{grid-template-columns:1fr}
}

/* Une décision remplacée par une plus récente. On ne l'efface pas : savoir
   qu'un arbitrage a changé vaut autant que l'arbitrage lui-même. */
.remplacee .txt{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.remplacee .par{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:var(--t-sm);
  color:var(--ink-3);text-decoration:none;
}

/* -----------------------------------------------------------------------------
   JUGER — le jeu étalon

   Un seul candidat à l'écran, et rien d'autre. C'est un geste répété cent
   quarante fois : toute décoration devient un obstacle, et tout ce qui bouge
   entre deux candidats casse le rythme. D'où une boîte de hauteur fixe, où
   seuls l'énoncé et la jauge changent.
   -------------------------------------------------------------------------- */
.juge{
  max-width:720px;margin:0 auto;background:var(--carte);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s6) var(--s6) var(--s5);text-align:center;
}
.juge-jauge{
  height:4px;border-radius:var(--r-full);background:var(--canvas-deep);
  overflow:hidden;margin-bottom:var(--s2);
}
.juge-jauge span{display:block;height:100%;background:var(--accent-solid);
  transition:width .2s var(--ease-out)}
.juge-compte{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s5)}
.juge-question{color:var(--ink-2);font-size:var(--t-base);margin:var(--s2) 0 var(--s4)}
/* L'énoncé porte la taille de lecture du compte rendu : c'est le même texte,
   jugé ici et lu là-bas. Une hauteur minimale évite que les boutons sautent
   entre un énoncé d'une ligne et un de quatre. */
.juge-enonce{
  font-size:var(--t-xl);line-height:1.45;color:var(--ink);
  margin:0 0 var(--s6);padding:var(--s5);min-height:8.5em;
  display:flex;align-items:center;justify-content:center;
  background:var(--canvas-deep);border-radius:var(--r-md);
}
.juge-actions{display:flex;gap:var(--s3);justify-content:center}
.juge-actions .btn{min-width:170px;justify-content:center}
.juge-actions kbd{
  margin-left:var(--s2);padding:1px 6px;border-radius:var(--r-sm);
  font:600 12px/1.6 var(--f-mono);background:rgba(0,0,0,.12);
}
.juge-actions .prime kbd{background:rgba(255,255,255,.22)}
.juge-aide{font-size:var(--t-sm);color:var(--ink-3);margin:var(--s4) 0 0}
@media (max-width:720px){
  .juge-actions{flex-direction:column}
  .juge-enonce{font-size:var(--t-lg);min-height:0}
}

/* -----------------------------------------------------------------------------
   LA RELATION — ce qu'on lit en marchant vers le rendez-vous

   Trois blocs, tous calculés sans modèle : de quel côté est la balle, ce qu'on
   s'est dit dans l'ordre, et comment les chiffres ont bougé. La fiche rendait
   jusqu'ici trois listes plates : on y voyait des objets, jamais une histoire.
   -------------------------------------------------------------------------- */
.balle{
  display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 0;
  font-size:var(--t-base);font-weight:500;color:var(--ink-2);
}
.balle .ic{color:var(--st-ok)}
/* Un retard n'est pas une erreur, c'est une urgence : il colore, il n'alarme pas. */
.balle.tendue{color:var(--st-wait)}
.balle.tendue .ic{color:var(--st-wait)}

/* Le fil : une colonne de dates, un filet, et ce qui s'est dit. */
.fil-relation{list-style:none;margin:0;padding:0}
.fil-relation li{
  position:relative;padding:0 0 var(--s5) var(--s6);
  border-left:1px solid var(--border);margin-left:6px;
}
.fil-relation li:last-child{border-left-color:transparent;padding-bottom:0}
.fil-relation li::before{
  content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;
  border-radius:var(--r-full);background:var(--accent);
}
.fil-relation .quand{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:2px;
}
.fil-relation .quoi-dit{font-weight:600;color:var(--ink);font-size:var(--t-lg)}
/* Le resume d'une reunion fait dix lignes ; une chronologie doit se parcourir.
   On coupe a trois lignes plutot que de tronquer le texte : le document entier
   reste dans le DOM pour la lecture d'ecran et le copier-coller. */
.fil-relation p{
  margin:var(--s2) 0;color:var(--ink-2);max-width:76ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.fil-relation .compte{font-size:var(--t-sm);color:var(--ink-3)}

/* Les chiffres : la valeur en mono pour qu'une colonne se lise d'un coup d'œil. */
.fluctuations{width:100%;border-collapse:collapse;font-size:var(--t-base)}
.fluctuations td{padding:9px 0;border-top:1px solid var(--border);vertical-align:baseline}
.fluctuations tr:first-child td{border-top:none}
.fluctuations .quand{
  width:96px;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  white-space:nowrap;
}
/* Deux montants tenus par la même phrase tiennent sur la même ligne : les
   séparer donnait deux lignes jumelles qu'on lisait comme un doublon. */
.fluctuations .valeur{
  width:190px;font-family:var(--f-mono);font-weight:500;color:var(--ink);
  padding-right:var(--s4);
}
.mouvement{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-full);
  font-size:var(--t-xs);font-weight:500;
  background:var(--givre);color:var(--ink-2);
}
.mouvement.hausse{background:var(--st-wait-bg);color:var(--st-wait)}
.mouvement.baisse{background:var(--st-info-bg);color:var(--st-info)}
.fluctuations .phrase a{color:var(--ink-2)}
.fluctuations .phrase a:hover{color:var(--ink)}
@media (max-width:720px){
  .fluctuations,.fluctuations tbody,.fluctuations tr,.fluctuations td{display:block}
  .fluctuations td{border:none;padding:2px 0}
  .fluctuations tr{border-top:1px solid var(--border);padding:var(--s3) 0}
  .fluctuations .quand,.fluctuations .valeur{width:auto}
}

/* -----------------------------------------------------------------------------
   LA CAPTURE — la porte d'entrée qui manquait

   Même vêtement que le lecteur, et pour la même raison : le verre est réservé
   à ce qui FLOTTE au-dessus du contenu. Ces deux panneaux sont le même genre
   d'objet, celui qu'on regarde pendant que l'audio vit — l'un pendant qu'on
   écoute, l'autre pendant qu'on enregistre. Les habiller différemment
   laisserait croire à deux mécanismes sans rapport.

   Panneau flottant et non écran : on déclenche un enregistrement en pleine
   navigation, et il doit survivre au changement de page.
   -------------------------------------------------------------------------- */
.enregistrer{gap:6px}
.enregistrer .ic{color:var(--accent-solid)}

.capture{
  position:fixed;inset:auto var(--s5) var(--s5) auto;z-index:70;
  max-width:min(420px, calc(100vw - 2 * var(--s5)));
}
.capture-in{
  border-radius:var(--r-lg);padding:var(--s5);
  /* Du verre, pas une plaque : ce qu'il y a derriere reste devine, ce qui ancre
     le panneau a la page au lieu de le poser dessus. .80 et non moins : sous
     .78 on lit litteralement le texte de la page a travers le panneau, et un
     transcript qu'on suit en parlant a un client ne se lit pas par-dessus
     autre chose. Le flou monte pour garder le verre malgre l'opacite. */
  background:rgba(18,24,31,.80);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, var(--sh-lg);
  border:1px solid rgba(255,255,255,.08);
  /* Colonne bornee : sans elle, le `flex:1` du fil ne s'applique a rien et le
     fil garderait une hauteur figee au lieu de prendre ce qui reste. */
  display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--s5));
  /* La seule couleur d'alerte du panneau. Elle n'est pas le corail : le corail
     dit « ce qui compte », l'alerte dit « ce qui se perd ». Deux sens, deux
     valeurs (REFERENCE.md, regle 10). */
  --nuit-alerte:#FFB4A6;
}
/* Plusieurs blocs du panneau portent un display explicite, qui l'emporte sur
   l'attribut hidden : sans cette regle, masquer la niche ou la rangee d'actions
   n'avait aucun effet. */
.capture [hidden]{display:none}
/* Le corps relaie la colonne : sans lui, le `flex:1` du fil s'appliquerait a un
   bloc a hauteur libre, donc a rien. */
#capture-corps{display:flex;flex-direction:column;flex:1;min-height:0}
.capture-etat{display:flex;align-items:center;gap:var(--s3)}
.capture-qui{flex:1;min-width:0}
.capture-titre{
  font-weight:600;font-size:var(--t-base);line-height:1.35;letter-spacing:-.01em;
  color:var(--nuit-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* La plomberie descend d'une ligne, en mono : ce qui compte dans cette barre
   est le nom de la reunion, pas le reglage technique qui l'a captee. */
/* En bloc et non en flex : l'ellipse ne s'applique pas au texte nu d'un
   conteneur flex, et cette ligne se coupait net au milieu d'un mot. */
.capture-source{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--nuit-muted);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.capture-source .ic{width:13px;height:13px;margin-right:6px;vertical-align:-2px}
.capture-temps{font-family:var(--f-mono);font-size:var(--t-base);color:var(--nuit-muted);
  flex:none;font-variant-numeric:tabular-nums}

/* Replier : le panneau devient sa propre ligne d'état. On continue
   d'enregistrer en regardant la fiche du client qu'on a au téléphone, ce
   qu'aucune sortie ne permettait puisque « Fermer » disparaît au démarrage. */
.capture-reduire{
  display:grid;place-items:center;width:28px;height:28px;flex:none;
  border:none;border-radius:var(--r-full);background:transparent;cursor:pointer;
  color:var(--nuit-muted);transition:background var(--d-micro) var(--ease-out);
}
.capture-reduire:hover{background:rgba(255,255,255,.10);color:var(--nuit-text)}
/* Aucune rotation : le sens du bouton est porte par le glyphe, pas par un
   pivot. Croix hors enregistrement, moins pendant. */
.capture-reduire .ic{width:15px;height:15px}
/* Replie, le panneau garde sa largeur et ses deux lignes, et se contente de
   retirer les blocs : une carte qui retrecit ET change de taille de texte se
   deplace sous l'oeil de quelqu'un qui parle. */
.capture.replie #capture-corps{display:none}

/* La pastille ne bat que pendant l'enregistrement : un point fixe ne dit pas
   si la machine écoute vraiment. */
.pastille{
  width:10px;height:10px;border-radius:var(--r-full);flex:none;
  background:rgba(255,255,255,.22);
}
.capture.enregistre .pastille{background:var(--accent);animation:bat 1.4s infinite}
.capture.enregistre .capture-temps{color:var(--accent)}
@keyframes bat{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .capture.enregistre .pastille{animation:none}
}

/* L'annonce aux participants n'est pas un ornement : capter la voix d'un tiers
   est un traitement de données personnelles, et il s'annonce. Elle est donc
   dans le panneau, pas dans une documentation que personne n'ouvre. */
/* Elle est la SEULE phrase du panneau qui se prononce a voix haute : elle est
   donc ecrite comme on la lit, en pleine encre, et non rangee dans l'encart
   gris le plus efface de l'ecran. */
.capture-annonce{
  margin:var(--s5) 0 var(--s5);font-size:var(--t-base);line-height:1.6;
  color:var(--nuit-text);
}
.capture-annonce .sur{color:var(--nuit-muted);margin-bottom:var(--s3)}
/* Les deux sources, en pastilles cliquables. Une case a cocher n'avait qu'un
   etat visible ; ici le choix « micro seul » se voit autant que l'autre. */
.capture-sources{display:flex;gap:var(--s3);margin-bottom:var(--s5)}
.capture-source-choix{
  flex:1;display:flex;align-items:flex-start;text-align:left;gap:var(--s3);cursor:pointer;
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);
  font-size:var(--t-sm);color:var(--nuit-muted);line-height:1.4;
}
.capture-source-choix .ic{color:var(--nuit-muted);width:16px;height:16px;margin-top:1px;flex:none}
.capture-source-choix b{font-weight:600;color:var(--nuit-text)}
.capture-source-choix[aria-pressed=true]{
  border-color:rgba(255,107,82,.45);background:rgba(255,107,82,.10);color:var(--nuit-text);
}
.capture-source-choix[aria-pressed=true] .ic{color:var(--accent)}
/* La largeur est un choix, pas un defaut : a parts egales, l'action principale
   et la sortie avaient le meme poids visuel. Seul le bouton principal
   s'etale. */
.capture-actions{display:flex;gap:var(--s2)}
.capture-actions .btn{justify-content:center}
.capture-actions .btn.large{flex:1}
/* Les boutons de contour vivent ici sur du noir : leur encre par défaut y
   serait illisible. Même traitement que la barre de transport du lecteur. */
.capture-actions .btn:not(.prime){
  color:var(--nuit-muted);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.capture-actions .btn:not(.prime):hover{
  background:rgba(255,255,255,.10);color:var(--nuit-text);
}
/* Jeter n'est ni l'action principale ni un bouton anodin : contour d'alerte,
   texte d'alerte, jamais de fond plein. Le corail dit « ce qui compte », cette
   teinte dit « ce qui se perd » : deux sens, deux valeurs. */
.capture-actions .btn.jeter,.capture-confirme .btn.jeter{
  color:var(--nuit-alerte);box-shadow:inset 0 0 0 1px rgba(255,180,166,.40);background:transparent;
}
.capture-actions .btn.jeter:hover,.capture-confirme .btn.jeter:hover{
  background:rgba(255,180,166,.14);color:var(--nuit-alerte);
}
/* La demande remplace la rangée d'actions à l'intérieur du panneau. Pas une
   boîte de dialogue par-dessus une modale, et surtout rien qui déplace le fil :
   l'enregistrement continue tant qu'on n'a pas répondu. */
.capture-confirme{
  padding:var(--s4);border-radius:var(--r-md);
  background:rgba(255,180,166,.07);border:1px solid rgba(255,180,166,.22);
}
.capture-confirme p{
  margin:0 0 var(--s4);font-size:var(--t-sm);line-height:1.6;color:var(--nuit-text);
}
.capture-confirme b{color:var(--nuit-alerte)}
.capture-rangee{display:flex;gap:var(--s2)}
.capture-rangee .btn{flex:1;justify-content:center}
.capture-rangee .btn:not(.jeter){
  color:var(--nuit-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);background:transparent;
}
.capture-rangee .btn:not(.jeter):hover{background:rgba(255,255,255,.10)}
/* L'envoi. Une barre dit que quelque chose se passe, une phrase dit ce qui va
   arriver ensuite. Un rouet seul ment sur la durée et ne dit rien de l'état. */
.capture-envoi{margin:0 0 var(--s4)}
.capture-barre{
  height:3px;border-radius:var(--r-full);overflow:hidden;
  background:rgba(255,255,255,.10);margin-bottom:var(--s3);
}
.capture-barre i{
  display:block;height:100%;width:38%;background:var(--accent);border-radius:inherit;
  animation:glisse 1.6s var(--ease-out) infinite;
}
@keyframes glisse{0%{margin-left:-38%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.capture-barre i{animation:none;width:100%}}
.capture-envoi p{
  margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--nuit-muted);
}
.capture-erreur{
  margin:var(--s3) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:rgba(255,180,166,.07);border:1px solid rgba(255,180,166,.22);
  font-size:var(--t-sm);line-height:1.6;color:var(--nuit-text);
}
/* Un intitule sur sa propre ligne : sans lui, on ne sait pas ce qui a rate
   avant d'avoir lu le paragraphe entier. */
.capture-erreur b{color:var(--nuit-alerte);display:block;margin-bottom:4px}
/* Le libelle du bouton d'enregistrement ne cede qu'a 720 px : il ne concerne
   pas le panneau, dont la rupture est plus haut (voir la fin de cette
   section). */
@media (max-width:720px){
  .enregistrer .lb{display:none}
}

/* Ce que Chrome va demander, dit avant qu'il le demande : son sélecteur parle
   de partage d'écran, ce qui surprend quand on croyait ne partager qu'un son.
   Traitement discret : encadree en corail, elle se disputait l'oeil avec la
   niche du souffleur, et deux corails dans un panneau n'en font plus aucun. */
.capture-consigne{
  margin:0 0 var(--s5);padding:var(--s3) var(--s4);border-radius:var(--r-md);
  border:none;background:rgba(255,255,255,.04);
  font-size:var(--t-sm);line-height:1.6;color:var(--nuit-muted);
}
.capture-consigne b{color:var(--nuit-text);font-weight:600}

/* Le décalage au-dessus du lecteur est posé en JavaScript : sa hauteur varie
   du simple au quadruple selon que le transcript est déplié, et une valeur
   figée poserait la capture par-dessus la barre de transport. */

/* Un résultat de recherche est un moment qu'on peut entendre, pas un document
   à ouvrir. L'heure passe donc devant, en mono, et l'icône de lecture dit que
   cliquer fera du bruit. */
.resultat .quand-mono{
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3);
  background:var(--canvas-deep);border-radius:var(--r-sm);
  padding:5px 9px;flex:none;white-space:nowrap;
}
.resultat .ecouter{
  margin-left:auto;width:32px;height:32px;border-radius:var(--r-full);flex:none;
  display:grid;place-items:center;background:var(--canvas-deep);color:var(--ink-2);
  transition:background var(--d-micro) var(--ease-out),color var(--d-micro) var(--ease-out);
}
.resultat:hover .ecouter{background:var(--accent-solid);color:var(--accent-ink)}

/* Le transcript qui arrive pendant la réunion. Hauteur bornée et défilement
   par le bas : on regarde ce qui vient d'être dit, pas le début.

   Un bloc par passage de parole, coupé sur les silences et horodaté. Un pavé
   continu ne disait ni quand une chose avait été dite, ni où l'une finissait
   et l'autre commençait. */
/* Le fil, et le bouton qui rend la main au direct. La pastille flotte au-dessus
   du fil, donc le conteneur porte le positionnement et le fil garde le scroll. */
/* Il prend la hauteur restante au lieu des 190 px figes : le fil rendait
   190 px dans un panneau de 416, c'est-a-dire moins de la moitie de ce qui
   etait disponible pour la seule chose qu'on lit pendant la reunion. */
.capture-fil-boite{position:relative;flex:1;min-height:0;margin:0 0 var(--s4)}
.capture-fil{
  height:100%;max-height:min(46vh, 340px);min-height:200px;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--s3);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
/* Les trente premieres secondes sont un etat frequent : elles meritent un
   rendu, pas une absence qui fait sauter le panneau au premier mot. */
.capture-fil-vide{
  display:grid;place-items:center;height:200px;text-align:center;
  color:var(--nuit-muted);font-size:var(--t-sm);line-height:1.5;padding:0 var(--s5);
}
.au-direct{
  position:absolute;left:50%;bottom:var(--s2);transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 13px;border:none;border-radius:var(--r-full);
  background:var(--accent-solid);color:var(--accent-ink);
  font:500 var(--t-sm)/1 var(--f-sans);box-shadow:var(--sh-lg);
}
.au-direct .ic{width:13px;height:13px;transform:rotate(90deg)}
.au-direct[hidden]{display:none}
.capture-fil .bulle{
  margin:0;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:rgba(255,255,255,.045);color:var(--nuit-text);
  font-size:var(--t-sm);line-height:1.65;
}
/* Toutes les repliques restent lisibles : dans une reunion, la phrase utile est
   rarement la derniere. C'est le bloc en cours qui se distingue par sa surface,
   pas les autres par leur effacement. L'horodatage quitte le corail, qui se
   repetait a chaque bulle jusqu'a ne plus rien dire. */
.capture-fil .bulle:last-child{background:rgba(255,255,255,.085)}
.capture-fil .quand-mono{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--nuit-muted);
  margin-right:var(--s2);background:none;padding:0;
}
/* Le fil est ancre en bas : ce qui vient d'etre dit est au niveau du pouce, pas
   en haut d'une colonne a moitie vide. Apres la regle des bulles, qui remet
   leur marge a zero a specificite egale. */
.capture-fil > :first-child{margin-top:auto}

/* Sous 900 px, le panneau flottant n'a plus rien a masquer d'utile : il prend
   la place. C'est exactement la largeur d'un demi-ecran a cote d'une visio,
   c'est-a-dire l'usage reel. Apres les regles du fil, sinon le plafond de
   340 px ecrase ce `none` a specificite egale. */
@media (max-width:900px){
  /* `pointer-events:none` sur le cadre : plein ecran, `.capture` s'etend sur
     toute la hauteur alors que sa carte s'arrete au tiers. Transparent mais
     cliquable, il avalait 313 px sur 812 a 375 px de large, soit 38 % de la
     page morte sous le panneau au repos. La carte, elle, reprend les clics. */
  .capture{inset:var(--s4);max-width:none;pointer-events:none}
  .capture-in{pointer-events:auto}
  /* `max-height` et non `height` : plein cadre, le panneau au repos n'aurait
     que trois blocs a montrer et laisserait un vide de la hauteur de l'ecran
     sous « Demarrer ». Il grandit avec le fil, jusqu'a l'ecran entier. */
  .capture-in{width:100%;max-height:100%}
  .capture-fil{max-height:none}
}

/* Le contexte donné avant de commencer. Il disparaît dès que l'enregistrement
   part : on ne modifie pas rétroactivement ce qu'on a annoncé. */
.capture-contexte{display:block;margin-bottom:var(--s4)}
.capture-contexte .sur{color:var(--nuit-muted);margin-bottom:var(--s2)}
.capture-contexte textarea{
  width:100%;resize:vertical;
  font:400 var(--t-sm)/1.6 var(--f-sans);color:var(--nuit-text);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);padding:var(--s3);
}
.capture-contexte textarea::placeholder{color:rgba(255,255,255,.35)}

/* La niche du souffleur. Il ne clignote pas, il ne sonne pas, il ne demande
   rien : il est là. Un souffleur de théâtre est présent en continu, à une place
   fixe, et l'acteur regarde quand il en a besoin.

   D'où la hauteur constante. Le souffle apparaissait et disparaissait, poussant
   le transcript de soixante à quatre-vingts pixels à chaque fois : c'est le
   comportement d'une notification, sous un texte qui promet le contraire. La
   niche ne surgit plus, elle change de contenu. Muette, elle n'a aucune
   surface ; pleine, elle en gagne une, teintée. C'est le fond qui parle, pas un
   liseré qui s'allume. */
.capture-souffle{
  display:flex;align-items:flex-start;gap:var(--s3);
  /* Hauteur FIXE, pas un minimum : celle d'un souffle de deux lignes plus sa
     source, c'est-à-dire le plus grand qu'elle puisse porter. Avec un minimum,
     la niche grandissait encore de vingt-six pixels au moment où le souffle
     arrive, et le panneau sautait sous les yeux de quelqu'un qui parle. */
  height:80px;margin:0 0 var(--s4);
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:transparent;
  color:var(--nuit-muted);font-size:var(--t-sm);line-height:1.5;
  transition:background var(--d-ui) var(--ease-out),color var(--d-ui) var(--ease-out);
}
.capture-souffle .ic{color:var(--nuit-muted);opacity:.5;margin-top:2px;
  width:15px;height:15px;flex:none}
.capture-souffle.plein{background:rgba(255,107,82,.10);color:var(--nuit-text)}
.capture-souffle.plein .ic{color:var(--accent);opacity:1}
/* Deux lignes au maximum. Au-delà ce n'est plus un souffle, c'est un document,
   et on ne lit pas un document en parlant à quelqu'un. */
.capture-souffle b{
  font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.capture-souffle .doux{
  display:block;margin-top:4px;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--nuit-muted);font-weight:400;
}

/* Ce que le copilote a soufflé pendant la réunion, relu après coup. Deux
   horodatages y coexistent et ne disent pas la même chose : l'heure du souffle
   dans CETTE réunion (cliquable, on réentend le moment), et le lien vers la
   réunion PASSÉE d'où le souffle venait. */
.trace{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--border)}
.trace:first-of-type{border-top:none}
.trace > div{flex:1;min-width:0}
.trace p{margin:0;color:var(--ink)}
.trace .source-ligne{display:inline-block;margin-top:4px}
.lede-bloc{margin:calc(-1 * var(--s2)) 0 var(--s3);color:var(--ink-3);font-size:var(--t-sm)}

/* ── Page Traitement (mode cloud / local) ──────────────────────────────────
   Contrat visuel : mockups/traitement-local-cloud.html. Classes préfixées trt-
   pour ne pas heurter les .opt/.verite d'autres écrans. Les quelques washes
   absents des tokens globaux sont définis ici, localement. */
/* Tokens Givre absents de glacier.css, ajoutes au :root pour tout l'ecran
   (les definir sur .trt-choix ne cascadait pas jusqu'a .trt-verite). */
:root{
  --accent-wash:#FFE7E2; --border-fort:#C4D0DA;
  --bleu-wash:#DEEAF2; --vert:#1C5C48; --vert-wash:#D6EFE4;
  --ambre:#6B5417; --ambre-wash:#F3EBD4}
.trt-choix{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-top:var(--s5)}
@media (max-width:720px){ .trt-choix{grid-template-columns:1fr} }
.trt-opt{
  text-align:left; cursor:pointer; background:var(--carte); font:inherit; color:inherit;
  border:1.5px solid var(--border); border-radius:var(--r-lg); padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3); transition:border-color .15s, box-shadow .15s}
.trt-opt:hover{border-color:var(--border-fort)}
.trt-opt:focus-visible{outline:2px solid var(--accent-solid); outline-offset:2px}
.trt-opt[aria-pressed=true]{border-color:var(--accent-solid); box-shadow:0 0 0 3px var(--accent-wash)}
.trt-opt[disabled]{opacity:.55; cursor:not-allowed}
.trt-tete{display:flex; align-items:center; gap:var(--s3)}
.trt-radio{width:20px; height:20px; border-radius:50%; border:2px solid var(--border-fort);
  flex:none; display:grid; place-items:center}
.trt-opt[aria-pressed=true] .trt-radio{border-color:var(--accent-solid)}
.trt-opt[aria-pressed=true] .trt-radio::after{content:""; width:10px; height:10px;
  border-radius:50%; background:var(--accent-solid)}
.trt-titre{font-size:1.05rem; font-weight:600; letter-spacing:-.01em}
.trt-badge{margin-left:auto; font-family:var(--f-mono,ui-monospace); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; border-radius:999px; padding:3px 9px;
  white-space:nowrap}
.trt-badge.defaut{color:var(--accent-solid); background:var(--accent-wash)}
.trt-badge.dispo{color:var(--ink-3); border:1px solid var(--border)}
.trt-accroche{color:var(--ink-2); font-size:14px}
.trt-pts{display:flex; flex-direction:column; gap:var(--s2)}
.trt-pts span{display:flex; gap:var(--s3); font-size:13.5px; color:var(--ink-2); line-height:1.45}
.trt-ic{width:16px; height:16px; flex:none; margin-top:2px; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.trt-ic.ok{stroke:var(--vert)} .trt-ic.warn{stroke:var(--ambre)}
.trt-prix{margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--border);
  font-size:12.5px; color:var(--ink-3)}
.trt-prix b{color:var(--ink)}
.trt-verite{margin-top:var(--s5); border-radius:var(--r-md); padding:var(--s4) var(--s5);
  display:flex; gap:var(--s3); align-items:flex-start; font-size:14px; line-height:1.5}
.trt-verite .trt-ic{width:18px; height:18px}
.trt-verite.cloud{background:var(--bleu-wash)} .trt-verite.cloud .trt-ic{stroke:var(--bleu)}
.trt-verite.local{background:var(--vert-wash)} .trt-verite.local .trt-ic{stroke:var(--vert)}
.trt-consent{display:flex; gap:var(--s2); align-items:flex-start; margin-top:var(--s3);
  font-size:13px; color:var(--ink-2); cursor:pointer}
.trt-consent input{margin-top:3px; flex:none}
.trt-lien{display:inline-block; margin-top:var(--s3); background:none; border:none; padding:0;
  color:var(--ink-3); font:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer}
.trt-usage{margin-top:var(--s4); color:var(--ink-3); font-size:13px}
.trt-usage b{color:var(--ink)}