/* Feuille de style de Pulse Executive.
   Extraite du fichier unique le 12/08/2026 — contenu inchange.
 */

/* ---------- charte ADVENS ----------
   Bleu #384566 et chevron #7D6E96 → #B493C1 relevés sur le logotype officiel. */
/* ---------- Cahier d'exploitation — jetons ----------
   Le thème est piloté par data-theme sur :root, valeurs "clair" et "sombre"
   (00-socle.js:39). Les alias "light"/"dark" sont acceptés pour un futur
   sélecteur natif. Aucun composant ne contient de littéral de couleur. */
:root{
  color-scheme:light dark;

  --marque-marine:#384566;
  --marque-violet:#8A72A8;
  --violet-clair:#B493C1;

  --marine:#2E3C5C;
  --accent:#2E3C5C;
  --accent-doux:#E2E6EF;
  --sur-accent:#FFFFFF;
  --violet:#7A5F9C;
  --sur-violet:#FFFFFF;

  --encre:#171C26;
  --encre-2:#414A5C;
  --encre-3:#575F72;

  --fond:#EDEEE9;
  --carte:#FCFCFA;
  --relief:#FFFFFF;
  --survol:#E4E6DF;

  --trait:#D6D9D2;
  --trait-fort:#B4B9AE;
  --trait-relief:#CDD1C9;
  --arete:#E6E8E2;
  --bord-champ:#7B8291;
  --voile:rgba(15,18,24,.42);
  --ombre-bord:rgba(23,28,38,.14);

  --reel:#1F5D45;      --reel-fond:#E7F1EB;
  --absent:#6E5210;    --absent-fond:#F6EEDC;
  --alerte:#9C3124;    --alerte-fond:#F7E7E4;

  --pile-labeur:-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pile-titre:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --pile-chiffre:"Cascadia Mono","Segoe UI Mono",ui-monospace,Consolas,Menlo,monospace;

  --t-11:.6875rem;
  --t-12:.75rem;
  --t-13:.8125rem;
  --t-14:.875rem;
  --t-15:.9375rem;
  --t-16:1rem;
  --t-20:1.25rem;
  --t-26:1.625rem;
  --t-28:1.75rem;
  --caps:.09em;

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;

  --r:2px;
  --r-nul:0;
  --barre:238px;
  /* LE PLAFOND DE LA COMPOSITION. 1320 px laissait 366 a 391 px morts
     sur quatorze ecrans a 1900 px. 1700 px prend toute la place quand
     elle existe et s'arrete avant qu'une ligne ne traverse un moniteur
     de 2560 px d'un bord a l'autre. */
  --large-max:1700px;
  /* LE PANNEAU CONTEXTUEL — assez large pour une liste de sources ou
     de personnes, assez etroit pour que la colonne principale reste la
     colonne principale. */
  --panneau:360px;
  --gouttiere:24px;
  --colonne-texte:78ch;
  --haut-imperso:0px;
  --ligne-tableau:36px;

  --duree-panneau:160ms;
  --duree-survol:90ms;
  --duree-jauge:220ms;
  --courbe-panneau:cubic-bezier(.2,0,0,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]):not([data-theme="light"]){
    --accent:#A8B8DC; --accent-doux:#232B3C; --sur-accent:#14171B;
    --marine:#A8B8DC; --violet:#C3A6DC; --sur-violet:#14171B;
    --encre:#E7E9E3; --encre-2:#AAB2C0; --encre-3:#949DAB;
    --fond:#14171B; --carte:#1E222A; --relief:#262C36; --survol:#252A33;
    --trait:#3E4654; --trait-fort:#59637A; --trait-relief:#4A5464;
    --arete:#48525F; --bord-champ:#77808F;
    --voile:rgba(6,8,11,.62);
    --ombre-bord:rgba(0,0,0,.55);
    --reel:#74C4A0;   --reel-fond:#14251E;
    --absent:#D9B36B; --absent-fond:#241E12;
    --alerte:#E28579; --alerte-fond:#2A1B19;
  }
}

:root[data-theme="sombre"],:root[data-theme="dark"]{
  --accent:#A8B8DC; --accent-doux:#232B3C; --sur-accent:#14171B;
  --marine:#A8B8DC; --violet:#C3A6DC; --sur-violet:#14171B;
  --encre:#E7E9E3; --encre-2:#AAB2C0; --encre-3:#949DAB;
  --fond:#14171B; --carte:#1E222A; --relief:#262C36; --survol:#252A33;
  --trait:#3E4654; --trait-fort:#59637A; --trait-relief:#4A5464;
  --arete:#48525F; --bord-champ:#77808F;
  --voile:rgba(6,8,11,.62);
  --ombre-bord:rgba(0,0,0,.55);
  --reel:#74C4A0;   --reel-fond:#14251E;
  --absent:#D9B36B; --absent-fond:#241E12;
  --alerte:#E28579; --alerte-fond:#2A1B19;
}

:root[data-theme="clair"],:root[data-theme="light"]{
  --accent:#2E3C5C; --accent-doux:#E2E6EF; --sur-accent:#FFFFFF;
  --marine:#2E3C5C; --violet:#7A5F9C; --sur-violet:#FFFFFF;
  --encre:#171C26; --encre-2:#414A5C; --encre-3:#575F72;
  --fond:#EDEEE9; --carte:#FCFCFA; --relief:#FFFFFF; --survol:#E4E6DF;
  --trait:#D6D9D2; --trait-fort:#B4B9AE; --trait-relief:#CDD1C9;
  --arete:#E6E8E2; --bord-champ:#7B8291;
  --voile:rgba(15,18,24,.42);
  --ombre-bord:rgba(23,28,38,.14);
  --reel:#1F5D45;   --reel-fond:#E7F1EB;
  --absent:#6E5210; --absent-fond:#F6EEDC;
  --alerte:#9C3124; --alerte-fond:#F7E7E4;
}
*{box-sizing:border-box}

/* ---------- marque ---------- */

/* ---------- coquille ---------- */
/* Une regle d'auteur portant `display` l'emporte sur le `display:none`
   que le navigateur attache a [hidden] : sans cette garde, masquer un
   element ne le masque pas. Constate le 12/08 — le formulaire de
   connexion et l'application s'affichaient ensemble. */
[hidden]{display:none !important}

header .enseigne{display:none;align-items:center;gap:11px;padding-right:15px;
  border-right:1px solid var(--trait)}


.enveloppe{overflow-x:auto}

#tiroir h3{margin:0 0 4px;font-size:16px}

#connexion input{width:100%;padding:9px 11px;margin-bottom:10px;border:1px solid var(--trait);
  border-radius:var(--r);background:var(--fond);color:var(--encre)}


.modale input,.modale select{width:100%;padding:8px 11px;border:1px solid var(--trait);
  border-radius:var(--r);background:var(--fond);color:var(--encre)}


.menu-ctx button.danger{color:var(--alerte)}


/* ---------------------------------------------------------------------------
   Mise en page etroite — corrige le debordement horizontal constate le 12/08.

   Une piste de grille a `min-width: auto` : elle ne descend pas sous la
   largeur minimale de son contenu. Sans `min-width: 0`, un seul tableau large
   elargit toute la page et la fait defiler lateralement.
   --------------------------------------------------------------------------- */
#coquille > *, main, #vue, .carte, .grille > *, .enveloppe { min-width: 0; }

/* Le contenu large defile dans son propre cadre, jamais la page entiere. */
.enveloppe { overflow-x: auto; }
table.versions { width: 100%; }

/* Une transition sur une couleur issue d'un jeton fige cette couleur quand le
   jeton change : apres une bascule de theme, l'element gardait son ancien
   fond. Le temps d'un rendu, on suspend toute transition — sans quoi le
   piege reviendrait sur chaque composant anime qu'on ajoutera. */
:root.bascule-theme *,
:root.bascule-theme *::before,
:root.bascule-theme *::after{transition:none !important}

/* ---------- famille etats, bandeau, mot de passe ----------
   `data-ferie` n'est pose par aucun script : la regle de jour ferie n'est
   pas reprise. Elle reste une capacite future, pas une ligne de feuille. */
.etat{display:inline-flex;align-items:center;gap:var(--e1);font-size:var(--t-13)}
.etat::before{content:"";width:8px;height:8px;flex:none;background:var(--encre-3)}
.etat[data-e="actif"]::before{background:var(--reel)}
.etat[data-e="suspendu"]::before{background:var(--absent)}
.etat[data-e="desactive"]::before{background:var(--alerte)}
.etat[data-e="invite"]::before{background:var(--accent)}
/* Regarder sous une autre identite doit se voir sans ambiguite : le violet
   dit ou l'on est, et le filet d'alerte dit que ce n'est pas normal. */
.barre-imperso{background:var(--violet);color:var(--sur-violet);
  padding:var(--e2) var(--e5);font-size:var(--t-13);display:flex;
  align-items:center;gap:var(--e3);flex-wrap:wrap;position:sticky;top:0;z-index:9;
  border-bottom:2px solid var(--alerte)}
.barre-imperso button{background:var(--sur-violet);color:var(--violet);border:0;
  border-radius:var(--r);padding:var(--e1) var(--e3);cursor:pointer;
  font-size:var(--t-13);font-weight:700}
.mdp-unique{display:flex;gap:var(--e2);align-items:center;margin:var(--e3) 0;
  padding:var(--e3);border:1px solid var(--alerte);
  border-left:3px solid var(--alerte);border-radius:var(--r);
  background:var(--alerte-fond)}
.mdp-unique code{flex:1;font-size:var(--t-16);letter-spacing:.06em;
  word-break:break-all;color:var(--encre)}
.badge-idx{display:inline-block;padding:2px 8px;border-radius:var(--r);
  border:1px solid transparent}
.badge-idx[data-e="OK"]{background:var(--reel-fond);color:var(--reel);
  border-color:var(--reel)}
.badge-idx[data-e="EN_ATTENTE"]{background:var(--absent-fond);color:var(--absent);
  border-color:var(--absent)}
.badge-idx[data-e="ERREUR"],.badge-idx[data-e="NON_SUPPORTE"]{
  background:var(--alerte-fond);color:var(--alerte);border-color:var(--alerte)}

/* ---------- famille depot et jauges ---------- */
.depot{border:1px dashed var(--bord-champ);border-radius:var(--r);
  padding:var(--e6);text-align:center;color:var(--encre-2);
  font-size:var(--t-13);margin-bottom:var(--e3);cursor:pointer;
  background:var(--carte)}
/* Ce qui accepte un depot est ce qui agit : accent, pas violet. */
.depot[data-survol="1"]{border-color:var(--accent);border-style:solid;
  background:var(--accent-doux);color:var(--encre)}
.depot b{display:block;color:var(--encre);font-size:var(--t-15);
  margin-bottom:var(--e1)}
.progression{margin-top:var(--e3)}
.progression .ligne{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e1) 0;font-size:var(--t-13)}
.jauge,.progression .barre{flex:1;height:6px;background:var(--trait);
  border-radius:var(--r);overflow:hidden;margin:var(--e2) 0}
.jauge div,.progression .barre i{display:block;height:100%;
  background:var(--accent);width:0;transition:width var(--duree-jauge) ease-out}
.progression .etat{display:block;min-width:88px;text-align:right;
  font-size:var(--t-12);color:var(--encre-3)}
.progression .etat::before{content:none}
/* Fini ou echoue ne se distinguait qu'a la teinte : un signe est ecrit. */
.progression .etat[data-e="erreur"]{color:var(--alerte)}
.progression .etat[data-e="erreur"]::after{content:" \00D7"}
.progression .etat[data-e="fini"]{color:var(--reel)}
.progression .etat[data-e="fini"]::after{content:" \2713"}

/* ---------- famille fiche document ---------- */
#fiche{display:grid;grid-template-columns:1fr 380px;gap:var(--e4);
  align-items:start}
.visio{width:100%;height:min(72vh,760px);border:1px solid var(--trait);
  border-radius:var(--r);background:var(--carte)}
.visio img{max-width:100%;max-height:100%;display:block;margin:auto}
.liste-pieces{list-style:none;margin:var(--e2) 0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2)}
.liste-pieces li{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  padding:var(--e2) var(--e3);border:1px solid var(--trait);
  border-radius:var(--r);background:var(--carte);min-width:0}
.liste-pieces .lien{min-width:0;overflow-wrap:anywhere}

/* ---------- famille marque et panneaux ----------
   `#voile` et `data-defile` de la specification ne sont portes par aucun
   element : ils ne sont pas repris. Le mouvement du tiroir porte sur
   `transform`, pas sur une couleur — le piege du jeton fige ne s'y
   applique pas. */
.logo{height:21px;width:auto;max-width:100%;object-fit:contain;display:block;
  align-self:flex-start;flex:none}
.logo.clair{display:none}
:root[data-theme="sombre"] .logo.sombre{display:none}
:root[data-theme="sombre"] .logo.clair{display:block}
.identite{display:flex;flex-direction:column;gap:4px;line-height:1.15}
.produit{font-size:13px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--encre)}
.signature{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-2)}
.signature b{font-weight:700;color:var(--encre-2)}
.filet{height:2px;width:26px;border-radius:0;
  background:linear-gradient(90deg,var(--marque-violet) 0%,var(--violet-clair) 100%)}
#tiroir{--trait:var(--trait-relief);position:fixed;top:0;right:0;
  width:min(460px,100vw);height:100vh;background:var(--relief);
  border-left:1px solid var(--trait-fort);transform:translateX(100%);
  transition:transform 160ms cubic-bezier(.2,0,0,1);z-index:20;
  overflow-y:auto;padding:24px}
#tiroir[data-ouvert="1"]{transform:none}
#tiroir::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--accent)}
.fermer{position:absolute;top:12px;right:16px;background:none;border:0;
  font-size:20px;color:var(--encre-2);cursor:pointer;min-width:32px;min-height:32px}
.modale{position:fixed;inset:0;background:var(--voile);display:grid;
  place-items:center;z-index:40;padding:16px}
.modale > div{--trait:var(--trait-relief);background:var(--relief);
  border:1px solid var(--trait-fort);border-top:2px solid var(--accent);
  border-radius:var(--r);padding:24px;width:min(560px,100%);max-height:88vh;
  overflow-y:auto}
.modale label{display:block;margin:16px 0 4px}
.menu-ctx{--trait:var(--trait-relief);position:fixed;background:var(--relief);
  border:1px solid var(--trait-fort);border-radius:var(--r);z-index:50;
  padding:4px;min-width:190px}
.menu-ctx button{display:block;width:100%;text-align:left;background:none;
  border:0;padding:8px 12px;border-radius:0;cursor:pointer;
  color:var(--encre-2);font-size:13px}
.menu-ctx button:hover{background:var(--survol);color:var(--encre)}
.menu-ctx hr{border:0;border-top:1px solid var(--trait);margin:4px 0}
#connexion{max-width:372px;margin:12vh auto;background:var(--relief);
  border:1px solid var(--trait-fort);border-top:3px solid var(--accent);
  border-radius:var(--r);padding:32px 32px 24px}
#connexion .marque{border:0;padding:0 0 24px;align-items:flex-start}
/* Une invite qui disparait a la saisie ne remplace pas une etiquette. */
#connexion label{display:block;margin:12px 0 4px;font-size:11px;font-weight:700;
  letter-spacing:var(--caps);text-transform:uppercase;color:var(--encre-2)}
#connexion .bouton{width:100%;margin-top:16px}
#connexion .logo{height:24px}
#err-connexion{margin:12px 0 0}
/* Un champ en erreur se lit au filet ET a la couleur : jamais a la
   seule teinte. */
#connexion input[aria-invalid="true"],
.modale input[aria-invalid="true"],
input[aria-invalid="true"],textarea[aria-invalid="true"],
select[aria-invalid="true"]{border-color:var(--alerte);
  border-bottom-width:2px}
#err-connexion:empty{display:none}
/* Le paragraphe porte `meta`, pas `.mention` : on style ce qui est la. */
#connexion .meta{margin-top:24px;font-size:14px;color:var(--encre-2);
  border-left:2px solid var(--accent);padding-left:12px;text-align:left}

/* ---------- famille contenu ----------
   `.avis`, `.squelette` et la grille a douze colonnes de la specification
   ne sont emises par aucun des onze fichiers JS : elles ne sont pas
   reprises. Une regle que rien n'atteint trompe le prochain lecteur. */
.grille{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,336px),1fr))}
@media (min-width:1400px){.grille{gap:var(--gouttiere)}}
.carte{background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r);padding:16px 24px}
.carte h2{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--trait);
  display:flex;gap:12px;align-items:baseline;justify-content:space-between}
.etiq{display:inline-block;padding:2px 8px;border-radius:var(--r);
  margin-bottom:12px}
.etiq.reel{background:var(--reel-fond);color:var(--reel)}
.etiq.absent{background:var(--absent-fond);color:var(--absent)}
.meta{color:var(--encre-3);font-size:13px;margin-top:2px}
.vide{color:var(--encre-2);font-size:13px;font-style:italic;padding:8px 0}
/* La priorite est ecrite dans la puce : la couleur appuie, elle ne porte pas. */
.puce{display:inline-block;font-size:11px;padding:1px 8px;border-radius:var(--r);
  background:var(--accent-doux);color:var(--encre-2);font-weight:700;
  margin-right:4px}
.puce[data-n="4"],.puce[data-n="5"]{background:var(--alerte-fond);color:var(--alerte)}
.puce[data-n="3"]{background:var(--absent-fond);color:var(--absent)}
/* Posee a la main : un filet interne, pas une teinte de plus. */
.puce.manuelle{background:var(--carte);color:var(--encre-2);
  border:1px solid var(--trait-fort);box-shadow:inset 2px 0 0 var(--accent)}
.jeton{display:inline-block;font-size:11px;padding:2px 8px;border-radius:var(--r);
  background:var(--accent-doux);color:var(--encre-2);font-weight:700;
  margin:0 4px 3px 0}
.jeton.sys{background:transparent;color:var(--encre-2);
  border:1px dashed var(--bord-champ)}
.err{color:var(--alerte);font-size:13px}
.err[data-t="ok"]{color:var(--reel)}
.avert{background:var(--absent-fond);color:var(--encre);
  border-left:3px solid var(--absent);border-radius:0;padding:8px 12px;
  font-size:13px;margin-bottom:12px}
.bloc{margin-top:24px}
.bloc h4{margin:0 0 8px}
.paire{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
  border-top:1px solid var(--trait);font-size:13px}
.paire span:first-child{color:var(--encre-3)}
.grille .paire,.barre-outils .paire{border-top:0;justify-content:flex-start;gap:8px}
.src{border-top:1px solid var(--trait);padding:12px 0}
.src .doc{font-weight:600;font-size:14px}
.src .ext{color:var(--encre-2);font-size:13px;margin:4px 0;font-style:italic}
.refuse{text-align:center;padding:48px 24px;color:var(--encre-2)}
.refuse b{display:block;color:var(--encre);font-size:16px;margin-bottom:8px}
.fil{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;
  margin-bottom:12px}
.fil button{background:none;border:0;color:var(--accent);cursor:pointer;
  padding:2px 3px;font-size:13px;text-decoration:underline}
.fil span{color:var(--encre-3)}

/* ---------- base et roles typographiques ----------
   Trois piles, trois roles, jamais melanges : un labeur systeme pour le
   texte courant, une chasse fixe pour ce qui s'aligne, un serif pour les
   titres. Le focus prend l'accent — c'est une intention, pas un lieu : le
   violet est reserve a la position. */
body{margin:0;background:var(--fond);color:var(--encre);
  font:15px/1.55 var(--pile-labeur)}
a,.lien{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--encre)}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{margin:0}
ul{list-style:none;margin:0;padding:0}
li{padding:8px 0;border-top:1px solid var(--trait);font-size:14px}
li:first-child{border-top:0}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bouton:focus-visible{outline-color:var(--encre)}
/* Micro-etiquettes : elles nomment une zone sans lui voler l'attention. */
.carte h2,.famille-menu,.bloc h4,.pied,.etiq,.badge-idx,.statut-v,.modale label,
.champ-m365,table.ged th,table.versions th,.ag-entete,.ag-fiche dt{
  font-family:var(--pile-labeur);font-size:11px;line-height:1.2;font-weight:700;
  letter-spacing:var(--caps);text-transform:uppercase;color:var(--encre-2)}
/* Chiffres de largeur fixe : sans cela une colonne de nombres tremble. */
.ag-num,.md-quand,.progression .etat,td,th,.puce,.jeton{
  font-variant-numeric:tabular-nums}
/* Chasse fixe pour ce qui s'aligne ou se copie. Pas pour un nom de personne. */
.uri-m365 code,.exemple-valeur,.mdp-unique code,.statut-v,.badge-idx,
.etape-m365,.item .g{font-family:var(--pile-chiffre)}
header h1,#tiroir h3,.modale h3,.ag-periode{font-family:var(--pile-titre);
  font-weight:400;text-wrap:balance}
header h1{font-size:26px;line-height:1.15;letter-spacing:-.01em;color:var(--encre)}
#tiroir h3,.modale h3{font-size:20px;line-height:1.25;margin:0 0 8px}
.ag-periode{font-size:20px;min-width:180px}
/* Une ligne de texte trop longue se lit mal : on la borne. */
.meta,.pedago p,.bloc p{max-width:var(--colonne-texte)}

/* ---------- tableaux : un seul materiau ----------
   Le tri se lit au chevron ET au filet de tete qui prend l'accent. La
   selection, a la teinte ET au filet interne. Jamais la seule couleur. */
table.ged,table.versions{width:100%;border-collapse:collapse;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r)}
table.ged th,table.versions th{text-align:left;padding:8px 12px;
  border-bottom:2px solid var(--trait-fort);cursor:pointer;user-select:none;
  white-space:nowrap;background:var(--carte)}
table.ged th::after,table.versions th::after{content:"";display:inline-block;
  width:1.1em;text-align:center;color:var(--encre-3)}
table.ged th[aria-sort="ascending"],table.versions th[aria-sort="ascending"],
table.ged th[aria-sort="descending"],table.versions th[aria-sort="descending"]{
  color:var(--encre);border-bottom-color:var(--accent)}
table.ged th[aria-sort="ascending"]::after,
table.versions th[aria-sort="ascending"]::after{content:"\25B2";color:var(--accent)}
table.ged th[aria-sort="descending"]::after,
table.versions th[aria-sort="descending"]::after{content:"\25BC";color:var(--accent)}
table.ged td,table.versions td{padding:8px 12px;border-top:1px solid var(--trait);
  font-size:14px;vertical-align:middle;height:36px}
table.ged tbody tr,table.versions tbody tr[onclick]{cursor:pointer}
/* Transition sur une couleur de jeton : sans la garde `.bascule-theme`,
   elle figerait la couleur au changement de theme. */
table.ged tbody tr:hover,table.versions tbody tr[onclick]:hover{
  background:var(--survol);transition:background-color 90ms linear}
table.ged tbody tr[aria-selected="true"]{background:var(--accent-doux);
  box-shadow:inset 3px 0 0 var(--accent)}
table.ged tbody tr:focus-visible,table.versions tbody tr:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px}
/* Le nom reste lisible quand on fait defiler vers la droite. */
table.ged thead th:first-child,table.ged tbody td:first-child{position:sticky;
  left:0;background:var(--carte);border-right:1px solid var(--trait)}
table.ged tbody tr:hover td:first-child{background:var(--survol)}
table.ged tbody tr[aria-selected="true"] td:first-child{background:var(--accent-doux)}
.nom-cell{display:flex;align-items:center;gap:8px;min-width:0}
.icone{width:22px;height:22px;flex:none;border-radius:var(--r);
  background:var(--accent-doux);color:var(--encre-2);display:grid;
  place-items:center;font-size:11px;font-weight:700}
.icone.dossier{background:transparent;color:var(--accent);
  border:1px solid var(--bord-champ)}
/* 32 px : l'etoile faisait 15 px de haut, sous le minimum utilisable au doigt. */
.fav{background:none;border:0;cursor:pointer;color:var(--encre-3);font-size:16px;
  min-width:32px;min-height:32px;display:inline-grid;place-items:center;padding:0}
.fav[data-actif="1"]{color:var(--accent)}

/* ---------- famille controles ----------
   Le bouton prend `--accent` et `--sur-accent` : en theme sombre l'accent
   devient clair, et un texte blanc dessus serait illisible. L'accent change
   de clarte, jamais de famille, et le texte suit. */
.bouton{background:var(--accent);color:var(--sur-accent);
  border:1px solid var(--accent);border-radius:var(--r);padding:8px 16px;
  cursor:pointer;font-size:14px;line-height:1.2}
.bouton.fantome{background:transparent;color:var(--encre-2);
  border-color:var(--bord-champ)}
.bouton.fantome:hover{background:var(--survol);color:var(--encre)}
.bouton.petit{padding:4px 12px;font-size:13px}
.bouton.danger,.act .danger,.menu-ctx button.danger{color:var(--alerte)}
.bouton.danger{background:transparent;border-color:var(--alerte);font-weight:600}
.bouton.actif,.bouton.fantome.actif{background:var(--accent-doux);
  color:var(--encre);border-color:var(--accent);font-weight:600}
.act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.act button{background:transparent;border:1px solid var(--bord-champ);
  border-radius:var(--r);padding:4px 12px;color:var(--encre-2);cursor:pointer;
  font-size:13px}
.act button.danger{color:var(--alerte);border-color:var(--alerte);font-weight:600}
/* Desactive : la teinte s'efface ET la bordure passe en pointilles. Deux
   canaux — une seule couleur laisserait un daltonien deviner. */
[disabled],[aria-disabled="true"]{opacity:1;color:var(--encre-3);
  cursor:not-allowed;border-style:dashed}
.bouton[disabled]{background:transparent;color:var(--encre-3);
  border-color:var(--bord-champ)}
.lien{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;
  text-align:left;text-decoration:underline;text-underline-offset:2px}
.lien:hover{color:var(--encre)}
/* Les cases a cocher, boutons radio et champs fichier sortent du groupe :
   sans cette exclusion, une case a cocher s'affichait en 100 % de large,
   avec fond et bordure. */
.champ,.recherche input,
.modale input:not([type=checkbox]):not([type=radio]):not([type=file]),
.modale select,.modale textarea,#connexion input,.md-saisie input,.df-corps,.champ-m365 input,
.ac-droit select,textarea{width:100%;padding:8px 12px;
  border:1px solid var(--bord-champ);border-radius:var(--r);
  background:var(--carte);color:var(--encre);font-family:inherit;font-size:14px}
.recherche input,.champ{flex:1;min-width:0}
/* Une invite disparait a la premiere frappe : l'etiquette reste. */
.etiq-groupe{margin:16px 0 4px;font-size:11px;font-weight:700;
  letter-spacing:var(--caps);text-transform:uppercase;color:var(--encre-2)}
.etiq-champ{flex:none;align-self:center;font-size:11px;font-weight:700;
  letter-spacing:var(--caps);text-transform:uppercase;color:var(--encre-2)}
/* Le focus epaissit le filet du bas : la hauteur ne bouge pas, rien ne saute
   autour du champ. */
.champ:focus,.recherche input:focus,.modale input:focus,.modale select:focus,
.modale textarea:focus,#connexion input:focus,textarea:focus{
  border-bottom-width:2px;padding-bottom:7px}
.recherche{display:flex;gap:8px;margin-bottom:12px}
.barre-outils{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  align-items:center}

/* ---------- coquille et navigation ----------
   La position courante se lit au filet violet, a la teinte ET a la graisse :
   trois canaux, jamais la couleur seule. Le violet dit ou l'on est ; le
   marine dit ce qui se clique. Les deux ne se melangent pas. */
#coquille{display:grid;grid-template-columns:var(--barre) 1fr;min-height:100vh}
nav#barre{background:var(--fond);border-right:1px solid var(--trait);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.marque{padding:16px 16px 12px;border-bottom:1px solid var(--trait);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#menu{flex:1;overflow-y:auto;padding:8px 8px 24px}
.pied{padding:12px 16px;border-top:1px solid var(--trait);color:var(--encre-3)}
#bandeau-imperso{position:sticky;top:0;z-index:12}
#bandeau-imperso:empty{display:none}
/* `--haut-imperso` est pose par le script qui remplit le bandeau : sans lui,
   l'en-tete collant et le bandeau collant se recouvriraient. */
header{display:flex;align-items:flex-start;gap:16px;padding:12px 24px;
  background:var(--fond);border-bottom:3px solid var(--accent);
  position:sticky;top:var(--haut-imperso,0px);z-index:8;flex-wrap:wrap;row-gap:8px}
.grandit{flex:1}
/* `#qui` est un <span> ou le script ecrit `textContent` : ni clic, ni gras
   interne. Un curseur en main sur un texte inerte promet ce qui n'existe pas. */
#qui{display:block;font-size:12px;line-height:1.35;color:var(--encre-2);
  text-align:right}
/* LA ZONE APPLICATIVE PREND LA PLACE DISPONIBLE, jusqu'a --large-max.
   Le texte, lui, reste tenu par --colonne-texte la ou il se lit : un
   conteneur large n'est pas un paragraphe large. */
main{padding:24px 24px 64px;max-width:var(--large-max)}

/* =====================================================================
   LE PANNEAU CONTEXTUEL — un seul motif pour toute l'application
   =====================================================================
   La demande (point 13) veut un panneau droit commun : details,
   sources, relations, personnes, historique, proprietes. Sans motif
   partage, chaque module reinvente sa grille et les pages cessent de
   s'aligner.

   Usage : <div class="avec-panneau"><div>…principal…</div>
                                     <aside class="panneau">…</aside></div>

   La colonne principale est en `minmax(0,1fr)` et non `1fr` : sans le
   `minmax(0,…)`, un tableau large pousserait la grille et ferait
   deborder la page — exactement ce que le point 11 interdit. */
.avec-panneau{display:grid;gap:var(--e5);align-items:start;
  grid-template-columns:minmax(0,1fr)}
.panneau{display:flex;flex-direction:column;gap:var(--e4);min-width:0}
/* LE PANNEAU SUIT LA LECTURE. Sans cela, il s'arrete a mi-hauteur et
   laisse sa colonne vide pendant qu'on lit le bas de la page. Il garde
   son propre defilement : plus haut que la fenetre, il piegerait sinon
   le defilement de la page. La hauteur retranche l'en-tete collant et
   la gouttiere, sinon son dernier bloc passe sous le bord. */
@media (min-width:1500px){
  .panneau{position:sticky;top:calc(var(--haut-imperso,0px) + 84px);
    max-height:calc(100vh - var(--haut-imperso,0px) - 108px);
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;padding-right:2px}
}
.panneau > section{background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r);padding:var(--e4)}
.panneau h3{font-size:var(--t-13);letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-2);margin:0 0 var(--e3)}
.panneau p{max-width:none}

/* LE PANNEAU N'APPARAIT QUE QUAND LA PLACE EXISTE VRAIMENT. A 1200 px,
   une colonne principale de 800 px face a un panneau de 360 px serre
   les deux ; on prefere le panneau dessous, ou il garde sa lisibilite. */
@media (min-width:1500px){
  .avec-panneau{grid-template-columns:minmax(0,1fr) var(--panneau)}
}

/* QUAND LA COLONNE PRINCIPALE EST ETROITE PAR NATURE — un formulaire,
   une fiche — le panneau n'a pas a attendre 1500 px. Un formulaire
   borne a 34rem plus un panneau de 360 px tiennent dans 928 px. Le
   seuil general reste plus haut pour les compositions dont la colonne
   principale porte des grilles : les serrer ferait perdre une colonne
   d'un cote pour en gagner une de l'autre. */
@media (min-width:1180px){
  .avec-panneau-tot{grid-template-columns:minmax(0,1fr) var(--panneau)}
  .avec-panneau-tot > .panneau{position:sticky;
    top:calc(var(--haut-imperso,0px) + 84px);
    max-height:calc(100vh - var(--haut-imperso,0px) - 108px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* =====================================================================
   L'ECHELLE RESPONSIVE, NOMMEE UNE FOIS
   =====================================================================
   Les paliers sur lesquels s'appuient les regles de composition. Ils
   ne remplacent pas les media queries deja posees composant par
   composant : les reecrire toutes changerait le comportement de
   trente elements pour un gain theorique.

     >= 1600   grand desktop   toute la place, panneaux visibles
     1200-1599 desktop         2 a 3 colonnes
      900-1199 petit desktop   simplification progressive
      768-899  tablette        1 a 2 colonnes
      375-767  mobile          une colonne, panneaux en tiroirs
   ===================================================================== */
.item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;border-left:3px solid transparent;color:var(--encre-2);
  padding:8px 12px;border-radius:0;cursor:pointer;font-size:14px;
  /* Une entree de menu est le controle le plus vise de l'application, et
     souvent au pouce. Mesuree a 38 px, elle passait sous le seuil de
     44 px. Le texte ne grossit pas : c'est la zone qui s'ouvre. */
  min-height:44px}
.item:hover{background:var(--survol);color:var(--encre)}
.item[aria-current="page"]{border-left-color:var(--violet);
  background:var(--accent-doux);color:var(--encre);font-weight:600}
.item .g{width:22px;flex:none;text-align:center;font-size:11px;font-weight:700;
  letter-spacing:.04em;color:var(--encre-3)}
.item[aria-current="page"] .g{color:var(--encre-2)}
.item .pastille{margin-left:auto;font-size:11px;background:var(--absent-fond);
  color:var(--absent);padding:1px 4px;border-radius:var(--r);font-weight:700}
.famille-menu{padding:24px 12px 4px;border-top:1px solid var(--trait);
  margin-top:12px}
#menu > .famille-menu:first-child{margin-top:0;border-top:0;padding-top:8px}

/* ---------- onglets : un seul idiome d'onglet ----------
   Le front en avait quatre — pastilles marine, pastilles violettes, puces
   bordees — dont trois disaient « vous etes ici » par la seule couleur.
   Un filet de 2 px sous l'onglet actif, plus la graisse : deux canaux,
   jamais un seul. L'accent change de clarte entre les themes, pas de
   famille : aucune surcharge manuelle n'est necessaire. */
.ged-onglets,.sous-onglets,.ag-modes,.onglets,.etapes-m365{display:flex;
  flex-wrap:wrap;gap:20px;align-items:flex-end;
  border-bottom:1px solid var(--trait);margin-bottom:14px;padding:0}
.ged-onglets button,.sous-onglets button,.ag-modes button,.onglets .onglet,
.onglets button,.etape-m365{background:none;border:0;
  border-bottom:2px solid transparent;border-radius:0;padding:8px 2px;
  margin-bottom:-1px;color:var(--encre-2);font-size:13px;cursor:pointer;
  white-space:nowrap}
.ged-onglets button:hover,.sous-onglets button:hover,.ag-modes button:hover,
.onglets .onglet:hover,.onglets button:hover,.etape-m365:hover{
  color:var(--encre)}
.ged-onglets button[aria-pressed="true"],
.sous-onglets button[aria-pressed="true"],
.ag-modes button[aria-pressed="true"],
.onglets button[aria-pressed="true"],
.onglets .onglet.actif,.etape-m365.actif{color:var(--encre);font-weight:600;
  border-bottom-color:var(--accent)}
/* Une etape franchie se lit au filet ET a la couleur semantique : c'est un
   etat de progression, pas une position. */
.etape-m365{font-size:12px;letter-spacing:.02em}
.etape-m365[data-fait="1"]{border-bottom-color:var(--reel);color:var(--encre-2)}

/* Une barre d'onglets passe a la ligne plutot que de pousser la page. */
.onglets, .sous-onglets, .ged-onglets { flex-wrap: wrap; }

/* Les mots tres longs — une URL, un identifiant — ne debordent plus. */
.carte, .meta, td, th { overflow-wrap: anywhere; }


/* --- Debordement horizontal, seconde passe (12/08) -------------------------
   Constate a l'ecran en 375 px : l'en-tete depassait de 54 px et le tiroir
   ferme, gare a droite, allongeait la zone de defilement. Un element hors
   ecran a droite fait defiler la page ; une transformation, non.
   ------------------------------------------------------------------------- */
header { flex-wrap: wrap; row-gap: 6px; }

/* Le tiroir utilisait deja `position: fixed` + `transform` : sa mecanique
   etait correcte, on ne la redefinit pas. C'est `overflow-x: hidden`
   ci-dessous qui empeche un element hors ecran d'allonger la zone de
   defilement. */

/* Filet de securite : rien ne fait defiler la page horizontalement. Le
   contenu large a son propre cadre de defilement (.enveloppe). */
html, body { overflow-x: hidden; }


/* ======================================================================
   VEILLE — le radar métier
   ----------------------------------------------------------------------
   Mêmes composants que le cockpit : lignes exécutives, étiquettes en
   capitales espacées, liens discrets. Rien de nouveau — c'est le même
   produit, et un second idiome visuel se paierait à chaque écran suivant.

   La largeur : la veille est dense (listes de signaux à cinq notes), elle
   sort donc du gabarit. Une vue légère le garderait.
   ====================================================================== */
main#vue[data-vue="veille"]{max-width:none}

.vm-quoi{margin:var(--e2) 0 var(--e3)}

/* --- les vues métier : une barre qui défile plutôt qu'un menu --------- */
.vm-onglets{display:flex;flex-wrap:wrap;gap:var(--e1);margin:var(--e3) 0 0}
.vm-vue{padding:5px 12px;border:1px solid var(--trait);border-radius:999px;
  background:none;color:var(--encre-2);cursor:pointer;font:inherit;
  font-size:var(--t-13);min-height:30px}
.vm-vue:hover{background:var(--survol);color:var(--encre)}
/* La position tient au fond ET à la graisse, jamais à la teinte seule. */
.vm-vue[aria-current="true"]{background:var(--accent-doux);color:var(--encre);
  font-weight:600;border-color:var(--bord-champ)}
.vm-vue:focus-visible{outline:2px solid var(--encre);outline-offset:2px}

/* --- le brief : un angle par carte ------------------------------------ */
/* DEUX COLONNES DES QUE LA PLACE EXISTE. Mesure a 1900 px : les cartes
   de signaux occupaient toute la largeur, mais leur texte s arretait vers
   1100 px — 639 px vides, soit 38 % de la zone utile, le pire ecran de
   l application. Un titre de signal tient a l aise en 800 px ; deux
   colonnes remplissent la place ET divisent par deux la hauteur de page.
   Une grille en auto-fill plutot qu un nombre de colonnes fixe : a
   1200 px elle retombe seule sur une colonne, sans seuil a tenir. */
.vm-brief{display:grid;gap:var(--e2);margin-top:var(--e3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,34rem),1fr))}
/* Le titre du brief traverse les colonnes : il les annonce, il n en est
   pas un element. */
.vm-brief > .ck-h{grid-column:1 / -1}
.vm-angle{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:var(--e3);background:var(--carte);border:0;
  border-left:2px solid var(--trait-fort);border-radius:var(--r)}
.vm-angle:hover{background:var(--survol)}
.vm-angle:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
/* Un angle sans signal n'est pas une erreur : c'est une information. Il se
   montre en retrait, sans occuper la place d'un angle plein. */
.vm-angle.vide{cursor:default;background:var(--fond);
  border-left-color:var(--trait);padding:var(--e2) var(--e3);
  flex-direction:row;align-items:baseline;gap:var(--e2)}
.vm-angle.vide:hover{background:var(--fond)}

/* --- ce qui interrompt --------------------------------------------- */
.vm-alertes{display:grid;gap:var(--e2);margin-bottom:var(--e3)}
.vm-alerte{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:100%;text-align:left;font:inherit;cursor:pointer;padding:var(--e3);
  background:var(--alerte-fond);border:0;
  border-left:3px solid var(--alerte);border-radius:var(--r)}
.vm-alerte .ck-etiq{color:var(--alerte)}
.vm-alerte:focus-visible{outline:2px solid var(--encre);outline-offset:2px}

/* --- une ligne de signal --------------------------------------------- */
.vm-liste{display:grid;gap:var(--e2);margin-top:var(--e3)}
.vm-signal,.vm-source{display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;width:100%;text-align:left;font:inherit;padding:var(--e3);
  background:var(--carte);border:0;border-left:2px solid var(--trait-fort);
  border-radius:var(--r)}
.vm-signal{cursor:pointer}
.vm-signal:hover{background:var(--survol)}
.vm-signal:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.vm-source.branchee{border-left-color:var(--accent)}

.vm-titre{font-size:15px;font-weight:600;line-height:1.3;color:var(--encre)}
.vm-faits{font-size:var(--t-12);color:var(--encre-2)}
/* La raison du classement. Toujours affichée : c'est la contrepartie du
   tri, et sans elle le classement devient un score opaque. */
.vm-raison{font-size:var(--t-12);color:var(--encre-3);font-style:italic}

/* --- les cinq notes, séparées ---------------------------------------- */
.vm-notes{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:2px}
.vm-note{font-size:11px;padding:1px 7px;border-radius:var(--r);
  background:var(--fond);color:var(--encre-2);
  font-variant-numeric:tabular-nums}
.vm-note.fort{background:var(--alerte-fond);color:var(--alerte);font-weight:600}

/* --- l'état vide : un mode d'emploi, pas une zone grise -------------- */
.vm-vide{background:var(--carte);border-radius:var(--r);padding:var(--e5);
  margin-top:var(--e3);max-width:none}
.vm-vide.court{padding:var(--e4)}
.vm-vide h2{margin:0 0 var(--e2);font-size:17px}
.vm-vide p{max-width:var(--colonne-texte)}
.vm-etat{display:grid;grid-template-columns:auto 1fr;gap:var(--e1) var(--e3);
  margin:var(--e3) 0;font-size:var(--t-13);align-items:baseline}
.vm-etat dt{color:var(--encre-3)}
.vm-etat dd{margin:0;color:var(--encre);font-variant-numeric:tabular-nums}
.vm-actions{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin-top:var(--e3)}

/* --- la fiche -------------------------------------------------------- */
.vm-fiche{display:grid;grid-template-columns:auto 1fr;
  gap:var(--e1) var(--e3);align-items:baseline;font-size:var(--t-13)}
.vm-fiche dt{color:var(--encre-3);white-space:nowrap}
.vm-fiche dd{margin:0}
.vm-sources,.vm-fil{margin:var(--e2) 0 0;padding-left:var(--e4);
  font-size:var(--t-13)}
.vm-sources li{margin-bottom:var(--e2);list-style:none;margin-left:calc(-1*var(--e4))}
/* Le rôle d'une source s'écrit. Une contradiction ne doit pas ressembler à
   une confirmation, et la couleur seule ne suffirait pas à l'en distinguer. */
.vm-role{font-size:11px;padding:1px 7px;border-radius:var(--r);
  background:var(--fond);color:var(--encre-2)}
.vm-role.primaire{background:var(--accent-doux);color:var(--encre);
  font-weight:600}
.vm-role.contradiction{background:var(--alerte-fond);color:var(--alerte);
  font-weight:600}
.vm-niveau{font-size:11px;color:var(--encre-3)}
.vm-niveau-bloc{margin-top:var(--e5)}

/* ---------- carnet d'adresses ----------
   Deux colonnes : les dossiers a gauche, les fiches a droite. Sous 900 px
   la colonne des dossiers passe au-dessus et defile horizontalement — une
   liste verticale de dossiers y mangerait tout l'ecran avant la premiere
   fiche. */
.ctc-corps{display:grid;grid-template-columns:220px 1fr;gap:var(--e3);
  align-items:start}
#ctc-dossiers{display:flex;flex-direction:column;gap:var(--e1)}
.ctc-dossier{display:flex;align-items:center;gap:var(--e1);width:100%;
  min-height:36px;padding:6px 10px;text-align:left;background:none;
  border:1px solid transparent;border-radius:var(--r);color:var(--encre-2);
  cursor:pointer;font-size:14px}
.ctc-dossier:hover{background:var(--survol);color:var(--encre)}
/* La position ne tient pas qu'a la couleur : le fond ET le poids changent,
   et `aria-current` la porte pour qui n'entend pas les couleurs. */
.ctc-dossier[aria-current="true"]{background:var(--accent-doux);
  color:var(--encre);font-weight:600;border-color:var(--bord-champ)}
.carte.ctc-fiche{position:relative}
.carte.ctc-fiche h2{padding-right:76px;font-size:16px}
.ctc-ligne{display:grid;grid-template-columns:96px 1fr;gap:var(--e1);
  font-size:13px;color:var(--encre-2);padding:2px 0}
.ctc-etiq{color:var(--encre-3)}
.ctc-case{display:flex;align-items:center;gap:var(--e1);margin-top:var(--e2);
  font-size:13px;color:var(--encre-2)}

/* ---------- outils d'une tuile d'espace ----------
   Deux boutons en haut a droite. 32 px : en dessous on les rate et on entre
   dans l'espace — la faute la plus penible, parce qu'elle est silencieuse. */
.carte.espace{position:relative}
.esp-outils{position:absolute;top:var(--e2);right:var(--e2);display:flex;
  gap:var(--e1)}
.esp-bouton{min-width:32px;min-height:32px;display:inline-grid;
  place-items:center;background:none;border:1px solid transparent;
  border-radius:var(--r);color:var(--encre-3);cursor:pointer;font-size:15px;
  padding:0}
.esp-bouton:hover{background:var(--survol);border-color:var(--bord-champ);
  color:var(--encre)}
.esp-bouton.danger:hover{color:var(--alerte);border-color:var(--alerte)}
/* Le titre s'arrete avant les boutons : sans cette reserve, un nom long
   passe dessous et devient illisible. */
.carte.espace h2{padding-right:76px}

/* ---------- famille actualites et sondages ----------
   Trois regles, pas une de plus : tout le reste — cartes, onglets,
   jauges, etiquettes, modales — vient de la phase 10. */
.actu-corps{max-width:var(--colonne-texte);margin:var(--e2) 0}
.actu-corps p{margin:0 0 var(--e2)}
.actu-corps img{max-width:100%;height:auto;border-radius:var(--r)}
.actu-corps ul,.actu-corps ol{list-style:revert;padding-left:var(--e5)}
.actu-corps li{border-top:0;padding:2px 0}
.actu-pied{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3);
  padding-top:var(--e2);border-top:1px solid var(--trait)}
/* Le pourcentage est ecrit a cote de la jauge : une barre seule ne se lit
   pas quand on ne distingue pas les longueurs. */
.sond-ligne{margin-bottom:var(--e3)}
.sond-ligne .jauge{margin-top:var(--e1)}

/* ---------- famille assistant Microsoft 365 ----------
   `.ou-trouver` n'est emise par aucun script : seule `.guide-blocs summary`
   est vivante. L'accent porte ce qui se clique ou se deplie ; le violet est
   reserve a la position. */
.pedago{background:var(--fond);border-left:3px solid var(--accent);
  border-radius:var(--r-nul);padding:var(--e3);margin:var(--e3) 0}
.aide-m365{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:var(--r);background:var(--accent);
  color:var(--sur-accent);font-size:var(--t-11);cursor:help;
  vertical-align:middle;margin-left:3px}
.pas-a-pas{margin:var(--e3) 0 var(--e3) var(--e5);line-height:1.7;
  font-size:var(--t-14);color:var(--encre-2)}
.pas-a-pas li{margin-bottom:var(--e1);border-top:0;padding:0}
.champ-m365{display:block}
.champ-m365 input{display:block;width:100%;margin-top:var(--e1)}
.uri-m365{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;
  margin:var(--e3) 0}
.uri-m365 code{flex:1;min-width:0;padding:var(--e2) var(--e3);
  background:var(--fond);border:1px solid var(--trait);border-radius:var(--r);
  font-size:var(--t-12);overflow-wrap:anywhere}
.etapes-m365{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e2)}
.champ-guide{border:1px solid var(--trait);border-radius:var(--r);
  padding:var(--e3);margin:var(--e4) 0;background:var(--carte)}
.guide-blocs{margin-top:var(--e3);display:flex;flex-direction:column;gap:2px}
.guide-blocs summary{cursor:pointer;font-size:var(--t-13);color:var(--accent);
  padding:var(--e1) 0;font-weight:600}
.guide-blocs details[open] summary{margin-bottom:var(--e1)}
.guide-blocs .meta{padding-bottom:var(--e2);line-height:1.6}
.exemple-valeur{display:inline-block;padding:var(--e1) var(--e2);
  background:var(--fond);border:1px dashed var(--bord-champ);
  border-radius:var(--r);font-size:var(--t-12);color:var(--encre-2);
  overflow-wrap:anywhere}
.schema{width:460px;max-width:460px;height:auto;display:block}
/* Retrecir le schema rendrait son texte illisible : on le fait defiler. */
.schema-cadre{overflow-x:auto;margin:var(--e2) 0 var(--e1);
  -webkit-overflow-scrolling:touch}

/* ---------- famille agenda ----------
   `data-ferie` n'est pose par aucun script : la regle correspondante n'est
   pas reprise. */
/* LARGEUR — l'agenda seul sort du gabarit de 1320 px.
   Mesure en 1920 px avant correction : la zone de contenu s'arrêtait à
   1558 px et laissait **362 px de vide** à droite, pendant que la grille du
   mois se serrait sur 1040 px. Un calendrier est la seule vue du produit
   dont la lisibilité croît avec la largeur : sept colonnes gagnent à
   respirer, là où un texte perdrait à s'étirer.
   La règle ne vise QUE l'agenda — `main` garde son gabarit partout
   ailleurs, et `--colonne-texte` continue de borner les paragraphes. */
main#vue[data-vue="agenda"]{max-width:none}

/* ======================================================================
   COCKPIT — finition exécutive
   ----------------------------------------------------------------------
   Trois niveaux de poids visuel, et un seul par information :

   1. les chiffres, sobres et grands ;
   2. les priorités et l'attention immédiate, denses et titrées ;
   3. le contexte, en mini-cartes de même hauteur.

   Ce qui a été retiré, et pourquoi : le quadrillage. Une carte autour de
   chaque morceau de texte fait voir des cases, pas des groupes. Les
   surfaces se distinguent maintenant du fond par une teinte, pas par un
   trait — le trait ne reste que là où il sépare deux choses de même nature.

   Aucun aplat de couleur : la teinte ne sert qu'à signifier, et jamais
   seule — un mot l'accompagne toujours.
   ====================================================================== */

/* LARGEUR — le cockpit sort du gabarit de 1320 px.
   Mesure : en 1920 px, 362 px restaient vides à droite. Un tableau de bord
   gagne à organiser DAVANTAGE d'informations, pas à étirer les mêmes — la
   largeur récupérée sert des colonnes, jamais des lignes plus longues. */
main#vue[data-vue="cockpit"]{max-width:none}

/* --- niveau 1 : les chiffres ---------------------------------------- */
.ck-kpi{display:grid;gap:var(--e3);
  grid-template-columns:repeat(4,minmax(0,1fr))}
/* Pas de bordure : une surface légèrement détachée du fond suffit à dire
   « ceci est un bloc ». Quatre cadres alignés faisaient un formulaire. */
.ck-tuile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:var(--e3) var(--e4);background:var(--carte);border:0;
  border-radius:var(--r);cursor:pointer;font:inherit;text-align:left;
  border-left:2px solid transparent;transition:border-color .12s}
.ck-tuile:hover{border-left-color:var(--accent);background:var(--survol)}
.ck-tuile:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.ck-n{font-size:2rem;font-weight:600;line-height:1;color:var(--encre);
  font-variant-numeric:tabular-nums}

/* L'étiquette : petite, espacée, en capitales douces. C'est elle qui donne
   au reste son air de rapport plutôt que de formulaire. */
.ck-etiq{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-3);font-weight:600}

/* --- la composition : huit colonnes, puis quatre -------------------- */
.ck-haut{display:grid;gap:var(--gouttiere);margin-top:var(--gouttiere);
  grid-template-columns:8fr 4fr;align-items:start}
.ck-bloc{background:var(--carte);border-radius:var(--r);padding:var(--e4)}
.ck-h{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-3);font-weight:600;margin:0 0 var(--e3)}
.ck-source{font-size:11px;font-weight:400;color:var(--encre-3);
  margin-left:var(--e2);text-transform:none;letter-spacing:0}
.ck-note{font-size:var(--t-12);color:var(--encre-3);margin:var(--e3) 0 0;
  max-width:var(--colonne-texte)}

/* --- niveau 2 : une priorité ---------------------------------------- */
/* Deux à trois lignes : ce que c'est, de quoi il s'agit, ce qui presse.
   Le filet de gauche remplace la carte — six cartes dans une septième
   créaient six bordures pour rien. */
.ck-prio{padding:var(--e2) 0 var(--e3) var(--e3);
  border-left:2px solid var(--trait-fort);margin-bottom:var(--e3)}
.ck-prio:last-of-type{margin-bottom:0}
.ck-genre{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-3);font-weight:600;margin-bottom:2px}
.ck-titre-objet{font-size:15px;font-weight:600;line-height:1.3;
  color:var(--encre)}
.ck-faits{font-size:var(--t-12);color:var(--encre-2);margin-top:3px;
  font-variant-numeric:tabular-nums}
.ck-raison{font-size:var(--t-12);color:var(--encre-3);margin-top:3px}
.ck-rouge{color:var(--alerte)}

/* --- niveau 2 : l'attention immédiate -------------------------------- */
.ck-attention{display:flex;flex-direction:column;gap:var(--e2)}
/* Une sous-carte = un bouton. Elle mène quelque part, cela doit se voir et
   se taper au clavier. */
.ck-att{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:var(--e2) var(--e3);background:var(--fond);border:0;
  border-left:2px solid var(--trait-fort);border-radius:var(--r)}
.ck-att:hover{background:var(--survol)}
.ck-att:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
/* Urgent : le filet ET le mot. La couleur ne porte jamais seule. */
.ck-att.urgent{border-left-color:var(--alerte)}
.ck-att.urgent .ck-etiq{color:var(--alerte)}
.ck-att-objet{font-size:var(--t-13);color:var(--encre);line-height:1.35}
.ck-reste{color:var(--encre-3);font-weight:400}
.ck-att-vide{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e2);padding:var(--e2) var(--e3);border-radius:var(--r);
  background:var(--fond)}
.ck-rien{font-size:var(--t-12);color:var(--encre-3)}

/* --- niveau 3 : le contexte ------------------------------------------ */
.ck-sections{display:grid;gap:var(--gouttiere);align-items:start;
  grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--gouttiere)}
/* Toutes les mini-cartes ont la même hauteur une fois repliées : une rangée
   de blocs inégaux se lit comme un accident. */
.ck-mini{background:var(--carte);border-radius:var(--r);padding:0;
  min-height:96px}
.ck-mini>summary{display:block;padding:var(--e3);cursor:pointer;
  list-style:none;border-radius:var(--r)}
.ck-mini>summary::-webkit-details-marker{display:none}
.ck-mini>summary:hover{background:var(--survol)}
.ck-mini>summary:focus-visible{outline:2px solid var(--encre);
  outline-offset:-2px}
/* Le chevron appartient à l'en-tête, aligné avec le compteur — seul au
   milieu d'un blanc, il n'appartenait à rien. */
.ck-mini-tete{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e2)}
.ck-mini-tete::after{content:"\203a";color:var(--encre-3);font-size:17px;
  line-height:1;transition:transform .15s;margin-left:auto;order:3}
.ck-mini[open] .ck-mini-tete::after{transform:rotate(90deg)}
.ck-mini.vide .ck-mini-tete::after{content:""}
.ck-mini-n{font-size:17px;font-weight:600;color:var(--encre);
  font-variant-numeric:tabular-nums;order:2}
.ck-mini-n.urgent{color:var(--alerte)}
.ck-mini .ck-etiq{order:1}
.ck-mini-corps{display:block;margin-top:var(--e2);font-size:var(--t-12);
  color:var(--encre-2);line-height:1.4;
  /* Deux lignes au plus : au-delà, la rangée perd son alignement. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.ck-mini.vide .ck-mini-corps{color:var(--encre-3)}
.ck-mini[open] .ck-apercu{display:none}
.ck-detail{padding:0 var(--e3) var(--e3)}

/* --- lignes exécutives, à la place des tableaux ---------------------- */
.ck-ligne{padding:var(--e2) 0;border-top:1px solid var(--trait)}
.ck-ligne:first-child{border-top:0;padding-top:0}
.ck-objet{font-size:var(--t-13);font-weight:600;color:var(--encre);
  line-height:1.3}
.ck-sous{font-size:var(--t-12);color:var(--encre-3);margin-top:1px}
.ck-jetons{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e1)}
/* Un jeton écrit ce qu'il signifie : « gravité 20 », « échéance dépassée ».
   Le ton ne fait qu'appuyer un mot déjà lisible sans lui. */
.ck-jeton{font-size:11px;padding:1px 7px;border-radius:var(--r);
  background:var(--fond);color:var(--encre-2);
  font-variant-numeric:tabular-nums}
.ck-jeton.alerte{background:var(--alerte-fond);color:var(--alerte);
  font-weight:600}
.ck-jeton.attention{background:var(--absent-fond);color:var(--absent)}

/* --- les liens de pied ----------------------------------------------- */
/* Un bouton encadré à chaque pied de carte cassait le rendu : ces liens
   sont des sorties, pas des actions. */
/* 19 px de haut mesures : sous le seuil confortable de 24. Deux pixels de
   garde en haut et en bas suffisent, sans deplacer la ligne de texte. */
.ck-lien{display:inline-block;margin-top:var(--e2);font-size:var(--t-12);
  color:var(--accent);text-decoration:none;font-weight:600;
  padding:3px 0;min-height:24px}
.ck-lien:hover{text-decoration:underline}
.ck-lien:focus-visible{outline:2px solid var(--encre);outline-offset:2px}

/* Après un saut vers un bloc, il faut voir où l'on a atterri. */
.ck-vise{outline:2px solid var(--violet);outline-offset:2px}
/* Une priorité : un filet à gauche, pas une carte dans une carte. Six
   cartes imbriquées dans une septième créaient six bordures pour rien. */
.ck-prio{border-left:3px solid var(--trait-fort);padding:var(--e2) 0 var(--e2) var(--e3);
  margin-bottom:var(--e2)}
.ck-prio:last-child{margin-bottom:0}
.ck-faits{margin-top:3px;color:var(--encre-2)}
/* La provenance accompagne le titre au lieu de lui disputer la ligne. */
.ck-source{font-size:var(--t-12);font-weight:400;color:var(--encre-3);
  margin-left:var(--e2);text-transform:lowercase}
/* Après un saut vers un bloc, il faut voir où l'on a atterri. */
.ck-vise{outline:2px solid var(--violet);outline-offset:2px}

.ag-barre{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;
  margin-bottom:var(--e3)}
/* Trois groupes, une seule ligne : modes à gauche, déplacement au centre,
   actions à droite. Le centre pousse les deux autres aux extrémités. */
.ag-nav{display:flex;align-items:center;gap:var(--e1);margin:0 auto}
.ag-actions{display:flex;align-items:center;gap:var(--e2)}
.ag-corps{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--e3)}
.ag-lat{min-width:0}
.ag-genre{margin-top:var(--e2)}
/* Une seule ligne par agenda. `align-items:center` aligne case, pastille et
   nom sur la même assise — l'ancien `flex-start` les décalait de trois
   pixels chacun et la colonne paraissait bancale. */
.ag-cal{display:flex;align-items:center;gap:var(--e2);padding:3px 0;
  font-size:var(--t-13);cursor:pointer;border-radius:var(--r)}
.ag-cal:hover{background:var(--survol)}
.ag-cal input{flex:none;margin:0}
.ag-nom{min-width:0;line-height:1.25}
/* Le droit se consulte, il ne se lit pas à chaque coup d'œil : il descend
   d'une ligne, en petit, et n'occupe plus la hauteur d'un nom. */
.ag-droit{display:block;font-size:var(--t-12);color:var(--encre-3)}
.ag-pastille{width:11px;height:11px;border-radius:1px;flex:none}
.ag-grille{min-width:0;overflow-x:auto}
.ag-mois{display:grid;grid-template-columns:repeat(7,minmax(104px,1fr));
  border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
/* Une semaine se lit d'un bloc. Sans séparation, six rangées de sept cases
   forment un damier où l'œil perd la ligne : le filet du haut de chaque
   septième cellule redonne la rangée. */
.ag-mois .ag-jour:nth-child(7n+8){border-top:1px solid var(--trait-fort)}
.ag-entete{background:var(--fond);padding:var(--e2) var(--e1);text-align:center;
  border-bottom:1px solid var(--trait)}
/* La largeur récupérée sert à respirer : cellules plus hautes, air autour
   des événements. Le minimum de colonne monte de 88 à 104 px — sept fois
   104 tiennent désormais dans la place disponible. */
.ag-jour{min-height:118px;border-right:1px solid var(--trait);
  border-bottom:1px solid var(--trait);padding:var(--e1);position:relative;
  background:var(--carte);min-width:0}
/* Hors du mois : la teinte s'efface et le numero s'incline. Deux canaux. */
.ag-jour[data-hors="1"]{background:var(--fond)}
.ag-jour[data-hors="1"] .ag-num{color:var(--encre-3);font-style:italic}
/* Aujourd'hui : le violet dit la position — et le numero passe en gras,
   pour qu'on le trouve sans voir la couleur. */
/* Trois canaux, dont aucun n'est la couleur seule : le filet violet, le fond
   très légèrement teinté, et le numéro en gras dans une pastille. Sur un
   écran large, un simple filet de 3 px se perdait parmi quarante-deux
   cellules. */
.ag-jour[data-today="1"]{box-shadow:inset 3px 0 0 var(--violet);
  background:var(--accent-doux)}
.ag-jour[data-today="1"] .ag-num{font-weight:700;color:var(--sur-accent);
  background:var(--violet);border-radius:999px;padding:1px 7px}
.ag-num{font-size:var(--t-12);color:var(--encre-2);text-align:right;
  padding:1px 3px;display:inline-block;float:right}
/* La couleur de l'agenda tient le filet, pas le fond : elle est choisie par
   l'utilisateur, et un texte blanc sur un jaune clair est illisible. Le
   texte reste sur la surface de la carte, dont le contraste est maitrise. */
.ag-evt{display:block;width:100%;text-align:left;font-size:var(--t-12);
  line-height:1.3;padding:2px var(--e1);margin:1px 0;border:0;
  border-left:3px solid var(--trait-fort);border-radius:var(--r-nul);
  cursor:pointer;background:var(--carte);color:var(--encre);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ag-evt:hover{background:var(--survol)}
/* « En attente » se lit sur trois canaux, jamais sur la seule couleur :
   le filet devient pointille, l'encre s'affaiblit, un signe est ecrit. */
.ag-evt[data-attente="1"]{border-left-style:dashed;color:var(--encre-2)}
.ag-evt[data-attente="1"]::before{content:"? ";color:var(--encre-3)}
.ag-evt[data-important="1"]{font-weight:700}
.ag-jours{display:grid;border:1px solid var(--trait);border-radius:var(--r);
  overflow:hidden}
.ag-col{border-right:1px solid var(--trait);min-height:340px;padding:3px;
  background:var(--carte);min-width:0;position:relative}
.ag-vide{padding:var(--e6);text-align:center;color:var(--encre-2);
  font-size:var(--t-13)}
.ag-fiche dt{margin-top:var(--e2)}
.ag-fiche dd{margin:1px 0 0}
/* Leve au survol seul, ce bouton etait inatteignable au clavier. */
.ag-ajout{position:absolute;inset:auto 3px 3px 3px;opacity:0;
  font-size:var(--t-11);border:1px dashed var(--bord-champ);
  border-radius:var(--r);background:transparent;color:var(--encre-2);
  cursor:pointer;padding:1px;min-height:24px}
/* `:focus` et non `:focus-visible` : un element focalise mais
   invisible est un piege, quelle que soit la facon dont le focus
   est arrive. */
.ag-jour:hover .ag-ajout,.ag-col:hover .ag-ajout,
.ag-ajout:focus{opacity:1}
.ag-jour[data-survol="1"],.ag-col[data-survol="1"]{background:var(--accent-doux)}

/* ---------- famille messagerie directe ----------
   Le point de presence ne tenait qu'a la couleur : absent, il devient un
   anneau creux ; present, un disque plein. La forme porte l'etat. */
.md-corps{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--e3);
  min-height:420px}
.md-lat{min-width:0}
.md-fil{display:flex;gap:var(--e2);align-items:center;width:100%;
  text-align:left;padding:var(--e2);border:0;
  border-left:3px solid transparent;border-radius:var(--r-nul);background:none;
  cursor:pointer;color:inherit;font:inherit}
.md-fil:hover{background:var(--survol)}
.md-fil[aria-current="true"]{border-left-color:var(--violet);
  background:var(--accent-doux);font-weight:600}
.md-point{width:9px;height:9px;border-radius:50%;flex:none;background:none;
  border:2px solid var(--trait-fort)}
.md-point[data-en-ligne="1"]{background:var(--reel);border-color:var(--reel)}
.md-nonlus{margin-left:auto;background:var(--accent);color:var(--sur-accent);
  font-size:var(--t-11);border-radius:var(--r);padding:1px var(--e2);flex:none;
  font-family:var(--pile-chiffre);font-variant-numeric:tabular-nums}
.md-echange{display:flex;flex-direction:column;min-height:340px;
  border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.md-messages{flex:1;overflow-y:auto;max-height:52vh;padding:var(--e3);
  display:flex;flex-direction:column;gap:var(--e2);background:var(--fond)}
.md-bulle{max-width:76%;padding:var(--e2) var(--e3);border-radius:var(--r);
  font-size:var(--t-14);line-height:1.45;background:var(--carte);
  border:1px solid var(--trait);align-self:flex-start;word-break:break-word}
/* Mes messages : le cote et le filet suffisent a les distinguer. */
.md-bulle[data-moi="1"]{align-self:flex-end;background:var(--accent-doux);
  border-color:var(--accent)}
.md-bulle[data-genre="visio"]{border-style:dashed}
.md-quand{font-size:var(--t-11);color:var(--encre-3);margin-top:3px;
  font-variant-numeric:tabular-nums}
.md-saisie{display:flex;gap:var(--e2);padding:var(--e2);
  border-top:1px solid var(--trait);background:var(--carte)}
.md-saisie input{flex:1;min-width:0}

/* ---------- famille diffusion ---------- */
.df-liste{display:flex;flex-direction:column;gap:var(--e2)}
.df-ligne{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3);
  border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);
  cursor:pointer;text-align:left;width:100%;color:inherit;font:inherit}
.df-ligne:hover{background:var(--survol)}
/* L'etat est ecrit en toutes lettres : la teinte et le filet l'appuient. */
.df-etat{font-size:var(--t-11);border-radius:var(--r);padding:1px var(--e2);
  flex:none;border:1px solid transparent;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--caps)}
.df-etat[data-e="envoye"]{background:var(--reel-fond);color:var(--reel);
  border-color:var(--reel)}
.df-etat[data-e="echec"]{background:var(--alerte-fond);color:var(--alerte);
  border-color:var(--alerte)}
.df-etat[data-e="brouillon"]{color:var(--encre-2);border-color:var(--bord-champ);
  border-style:dashed}
/* Le filet et le fond viennent du groupement des controles : seule la
   hauteur minimale est propre a la diffusion. */
.df-corps{min-height:180px}
.df-depot{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  margin-top:var(--e3)}
.df-depot input[type=file]{max-width:100%;min-width:0;flex:1 1 200px}

/* Le bouton de menu ne sert que quand la barre devient un tiroir ;
   la media query, ecrite plus bas, le rallume. */
#brule{display:none}

/* ---------------------------------------------------------------
   Adaptations, en fin de feuille — et c'est leur place.
   Une media query corrige une regle de base : ecrite avant elle,
   elle perd a specificite egale. Mesure a 768 px : la barre
   laterale restait `sticky` au lieu de devenir un tiroir fixe,
   parce que la famille « coquille » etait ecrite plus bas.
   ---------------------------------------------------------------- */
@media (max-width:900px){
  .ctc-corps{grid-template-columns:1fr}
  #ctc-dossiers{flex-direction:row;overflow-x:auto;padding-bottom:var(--e1)}
  /* `flex:0 0 auto` : sans lui les boutons se compriment au lieu de garder
     leur largeur, la barre ne defile jamais et les noms longs deviennent
     illisibles. Mesure au navigateur en 375 px : scrollWidth restait egal a
     clientWidth. */
  .ctc-dossier{width:auto;white-space:nowrap;flex:0 0 auto}
  #coquille{grid-template-columns:1fr}
  nav#barre{position:fixed;left:0;top:0;width:var(--barre);z-index:30;
    transform:translateX(-100%);transition:transform .18s ease}
  nav#barre[data-ouvert="1"]{transform:none}
  /* `!important` indispensable : `#brule{display:none}` suit cette media
     query a specificite egale et l'emporterait sinon — le bouton de menu
     disparaitrait sous 900 px, seul acces a la navigation. */
  #brule{display:inline-flex;align-items:center;
    /* 44 px : sous 900 px c'est le SEUL acces a la navigation, et il se
       touche au pouce. Mesure au navigateur : il faisait 40 px. */
    justify-content:center;min-width:44px;min-height:44px}
  /* La barre laterale devient un tiroir : l'en-tete reprend alors la marque,
     de sorte qu'une seule identite est visible a tout moment. */
  header .enseigne{display:flex;border:0;padding-right:0}
  main{padding:16px 15px 50px}
  .grille{grid-template-columns:1fr}
  .recherche{flex-direction:column}
  .recherche .bouton{width:100%}
  /* L'identite sous laquelle on regarde ne se cache jamais :
     elle passe en pleine largeur, pas a la trappe. */
  #qui{order:9;width:100%;text-align:left;font-size:var(--t-11)}
}
@media (max-width:1100px){#fiche{grid-template-columns:1fr}}
/* Sept colonnes de 88 px et leurs filets demandent 618 px. Avec la barre
   laterale de l'agenda, la manchette et les marges, ce budget n'est tenu
   qu'au-dela de 1140 px : en dessous, la grille du mois se mettait a defiler
   lateralement dans son cadre sur un portable ordinaire. La colonne des
   calendriers passe donc au-dessus plus tot — la page, elle, n'a jamais
   defile. */
/* Le cockpit repasse en une colonne quand deux ne tiennent plus : à
   1280 px, la colonne de droite descendait sous 380 px et ses tableaux
   commençaient à défiler dans leur cadre. */
/* Le contexte : quatre mini-cartes de front au-dela de 1400 px, deux
   jusqu'a 900, une en dessous. Sous 1400, la quatrieme descend sous 300 px
   et son apercu se coupe au premier mot. */
@media (max-width:1400px){
  .ck-sections{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ck-sections{grid-template-columns:minmax(0,1fr)}
}
/* Les priorites et l'attention immediate se separent quand la colonne de
   droite passe sous 300 px : en dessous, ses sous-cartes tronquent au lieu
   d'informer. */
@media (max-width:1180px){
  .ck-haut{grid-template-columns:minmax(0,1fr)}
  .ck-attention{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .vm-fiche,.vm-etat{grid-template-columns:minmax(0,1fr)}
  .vm-fiche dt,.vm-etat dt{margin-top:var(--e2)}
}
@media (max-width:760px){
  .ck-attention{grid-template-columns:minmax(0,1fr)}
}
/* Quatre indicateurs sur une ligne demandent environ 4 × 180 px plus les
   gouttières. En dessous, deux par deux — jamais trois puis un. */
@media (max-width:980px){
  .ck-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .ck-kpi{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1140px){
  .ag-corps{grid-template-columns:minmax(0,1fr)}
  /* La colonne repasse au-dessus : elle se couche et défile plutôt que
     d'empiler quinze agendas avant le calendrier. */
  .ag-lat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);
    overflow-x:auto}
  .ag-genre{margin-top:0}
  .ag-cal{padding:3px var(--e1)}
  /* Le droit disparaît sur cette forme : il ferait trois hauteurs de ligne
     dans une barre horizontale. L'attribut `title` le porte encore. */
  .ag-droit{display:none}
}
@media (max-width:760px){
  /* La barre de commande se plie : modes sur une ligne, déplacement et
     actions sur la suivante. `margin:0 auto` centrerait dans le vide. */
  /* Le groupe de déplacement tenait en `nowrap` sur 312 px dans un
     conteneur de 295 : les boutons se comprimaient et leur texte se
     cassait verticalement — 203 px de haut pour trois boutons. Ils gardent
     donc leur largeur, et la période descend d'une ligne. */
  .ag-nav{margin:0;flex-wrap:wrap}
  .ag-nav .bouton{flex:0 0 auto}
  .ag-periode{width:100%}
  /* `flex-wrap:nowrap` est le point qui compte : sans lui les six modes
     s'empilaient et la barre montait à 363 px de haut en 375 px — le
     calendrier commençait sous la ligne de flottaison. Mesuré, pas supposé. */
  .ag-modes{width:100%;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .ag-modes button{flex:0 0 auto}
}
@media (max-width:820px){
  .md-corps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  header{flex-wrap:wrap;row-gap:6px}
  header .bouton{padding:5px 9px;font-size:var(--t-13)}
  /* Sur mobile, un tableau large defile dans son cadre, pas la page. */
  .enveloppe{-webkit-overflow-scrolling:touch}
  /* Les blocs a deux colonnes construits en ligne repassent en une. */
  [style*="grid-template-columns: 1fr 380px"]{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ============================================================
   TABLEAU DEFILANT — partage (Veille administration, Actions)
   Un tableau large ne doit jamais faire deborder la PAGE : il defile
   dans sa propre boite. C'est la seule facon d'avoir des colonnes
   lisibles sur 375 px sans mentir sur la mesure de debordement.
   ============================================================ */
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0}
.tableau table{border-collapse:collapse;width:100%;min-width:640px;
  font-size:var(--t-13)}
.tableau th{text-align:left;font-weight:600;color:var(--encre-3);
  font-size:var(--t-11);letter-spacing:var(--caps);text-transform:uppercase;
  border-bottom:1px solid var(--trait-fort);padding:6px 10px;
  white-space:nowrap}
.tableau td{border-bottom:1px solid var(--trait);padding:8px 10px;
  vertical-align:top}
.tableau tr:last-child td{border-bottom:0}
.tableau .num{text-align:right;font-family:var(--pile-chiffre);
  font-variant-numeric:tabular-nums}

/* ============================================================
   ACTIONS — le poste de travail
   ============================================================ */
.ac-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin-bottom:10px}
.ac-tete h2{margin:0;flex:0 0 auto}
.ac-resume{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto}
.ac-tete .bouton{margin-left:auto}
@media(max-width:600px){.ac-tete .bouton{margin-left:0;width:100%}}

/* Le compteur d'une vue : le nombre EST l'information, il est donc
   compose en chiffres tabulaires. */
.ac-cpt{font-family:var(--pile-chiffre);font-variant-numeric:tabular-nums;
  font-weight:600}

.ac-grille{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){
  .ac-grille{grid-template-columns:206px minmax(0,1fr);align-items:start}
}
.ac-lat{display:flex;flex-direction:column;gap:2px}
.ac-lat button{display:flex;justify-content:space-between;gap:8px;
  align-items:center;width:100%;text-align:left;border:0;cursor:pointer;
  background:transparent;color:var(--encre-2);font:inherit;
  font-size:var(--t-13);padding:7px 10px;border-radius:7px}
.ac-lat button:hover{background:var(--survol)}
/* La position se dit par le violet — la regle du produit. */
.ac-lat button[aria-current="true"]{background:var(--accent-doux);
  color:var(--encre);font-weight:600;
  box-shadow:inset 3px 0 0 var(--violet)}
.ac-lat .ac-cpt{color:var(--encre-3);font-weight:500}

.ac-liste{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:3px}
.ac-item{display:flex;flex-direction:column;gap:5px;padding:10px 12px;
  border:1px solid var(--trait);border-radius:8px;background:var(--carte);
  cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit}
.ac-item:hover{background:var(--survol)}
.ac-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ac-item[aria-expanded="true"]{border-color:var(--accent);
  background:var(--relief)}
.ac-l1{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ac-titre{font-weight:600;flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}
.ac-l2{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-12);
  color:var(--encre-3)}
.ac-prog{display:flex;align-items:center;gap:7px;min-width:8rem;
  flex:0 1 12rem}
.ac-prog .jauge{flex:1 1 auto;margin:0}
.ac-prog .num{font-family:var(--pile-chiffre);
  font-variant-numeric:tabular-nums}

/* La priorite decidee par un humain ne se confond pas avec celle que la
   machine calcule : elle porte son mot, pas seulement sa teinte. */
.ac-manuelle{background:var(--violet);color:var(--sur-violet);
  border-radius:999px;padding:1px 9px;font-size:var(--t-11);
  font-weight:600;white-space:nowrap}

.ac-fiche{border:1px solid var(--accent);border-radius:8px;
  background:var(--relief);padding:12px 14px;margin:3px 0 6px}
.ac-fiche h3{margin:0 0 8px;font-size:var(--t-16)}
.ac-champs{display:grid;gap:8px 18px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:10px}
.ac-champ span:first-child{display:block;font-size:var(--t-11);
  letter-spacing:var(--caps);text-transform:uppercase;color:var(--encre-3)}
.ac-champ span+span{font-size:var(--t-14)}
.ac-outils{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* La provenance : d'ou vient cette action. Un signal de veille devenu
   action doit rester rattachable a son signal. */
.ac-source{font-size:var(--t-12);color:var(--encre-3);
  border-left:3px solid var(--violet-clair);padding-left:9px;margin:8px 0}

/* Pieces jointes d'une action : sobre, dans la fiche, pas une GED. */
.ac-pj{margin-top:10px;border-top:1px solid var(--trait);padding-top:8px}
.ac-pj h4{margin:0 0 6px;font-size:var(--t-12);letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-3);font-weight:600}
.ac-pj-liste{list-style:none;margin:0 0 8px;padding:0;display:flex;
  flex-direction:column;gap:4px}
.ac-pj-liste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.ac-pj-liste .meta{flex:1 1 10rem}
/* La mention n'a pas le poids d'un bouton d'action : c'est du texte. */
.ac-mention{margin:8px 0 0;font-size:var(--t-13);color:var(--encre-3)}
.ac-mention .lien{font:inherit}

/* ============================================================
   ADMINISTRATION — lecture d'abord
   ------------------------------------------------------------
   Aucun littéral de couleur : tout passe par les jetons déjà
   définis en tête de feuille, donc le thème sombre suit sans une
   seule règle de plus. Un état se dit toujours par trois canaux —
   le mot, le signe, la teinte — jamais par la teinte seule.
   ============================================================ */

/* La phrase qui ouvre une section : elle explique de quoi il s'agit avant
   de montrer quoi que ce soit. Le filet d'accent la distingue d'un
   paragraphe de contenu sans en faire un encadré de plus. */
.adm-intro{border-left:3px solid var(--accent);padding:var(--e1) var(--e3);
  margin:0 0 var(--e4);color:var(--encre-2);font-size:var(--t-14);
  max-width:var(--colonne-texte)}
.adm-intro b{color:var(--encre)}

.adm-titre{font-family:var(--pile-titre);font-weight:400;font-size:var(--t-20);
  color:var(--encre);margin:var(--e5) 0 var(--e2);
  border-bottom:1px solid var(--trait);padding-bottom:var(--e2);
  display:block;text-transform:none;letter-spacing:normal}

/* Un état : mot, signe, teinte. Le signe est masqué aux lecteurs d'écran,
   qui entendent déjà le mot — le répéter en « symbole coche » le noierait. */
.adm-signe{display:inline-flex;align-items:baseline;gap:var(--e1);
  padding:2px var(--e2);border-radius:var(--r);font-size:var(--t-12);
  font-weight:600;white-space:nowrap;
  background:var(--accent-doux);color:var(--encre-2)}
.adm-signe[data-ton="bon"]{background:var(--reel-fond);color:var(--reel)}
.adm-signe[data-ton="attention"]{background:var(--absent-fond);
  color:var(--absent)}
.adm-signe[data-ton="grave"]{background:var(--alerte-fond);color:var(--alerte)}
.adm-signes{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e2);
  margin:var(--e2) 0}

/* La date absolue accompagne la date relative : elle sert à comparer, pas à
   être lue en premier. Elle prend donc la chasse fixe et le gris. */
.adm-abs{color:var(--encre-3);font-family:var(--pile-chiffre);
  font-size:var(--t-11)}

/* Une information que l'API n'expose pas. Le pointillé dit « rien à lire
   ici », là où un tiret plein se lirait comme un zéro. */
.adm-inconnu{color:var(--encre-3);font-style:italic;
  border-bottom:1px dashed var(--trait-fort)}

/* Un écran vide qui apprend quelque chose. */
.adm-vide{border:1px dashed var(--trait-fort);border-radius:var(--r);
  padding:var(--e5) var(--e4);background:var(--carte);
  max-width:var(--colonne-texte)}
.adm-vide b{display:block;color:var(--encre);font-size:var(--t-16);
  margin-bottom:var(--e2)}
.adm-vide .bouton{margin-top:var(--e3)}

/* Liste filtrable : les filtres à gauche sur large, au-dessus sur étroit.
   `min-width:0` sur les pistes, sans quoi un tableau large élargirait la
   grille entière au lieu de défiler dans sa boîte. */
.adm-cadre{display:grid;gap:var(--e4);grid-template-columns:minmax(0,1fr)}
.adm-cadre > *{min-width:0}
@media(min-width:980px){
  .adm-cadre{grid-template-columns:230px minmax(0,1fr);align-items:start}
}
.adm-lat{display:flex;flex-wrap:wrap;gap:2px}
@media(min-width:980px){.adm-lat{flex-direction:column;flex-wrap:nowrap}}
.adm-lat button{display:flex;justify-content:space-between;gap:var(--e2);
  align-items:center;text-align:left;border:0;cursor:pointer;
  background:transparent;color:var(--encre-2);font:inherit;
  font-size:var(--t-13);padding:7px var(--e3);border-radius:var(--r)}
@media(min-width:980px){.adm-lat button{width:100%}}
.adm-lat button:hover{background:var(--survol);color:var(--encre)}
/* La position se dit par le violet — la règle du produit — doublée de la
   graisse et du fond : trois canaux. */
.adm-lat button[aria-current="true"]{background:var(--accent-doux);
  color:var(--encre);font-weight:600;box-shadow:inset 3px 0 0 var(--violet)}
.adm-lat .ac-cpt{color:var(--encre-3);font-size:var(--t-12)}
.adm-lat button[aria-current="true"] .ac-cpt{color:var(--encre-2)}
.adm-groupe{width:100%;margin:var(--e3) 0 var(--e1);font-size:var(--t-11);
  font-weight:700;letter-spacing:var(--caps);text-transform:uppercase;
  color:var(--encre-3)}
.adm-lat > .adm-groupe:first-child{margin-top:0}

.adm-compte{margin-bottom:var(--e2)}
.adm-liste{display:flex;flex-direction:column}
.adm-liste li{padding:0;border-top:1px solid var(--trait)}
.adm-liste li:first-child{border-top:0}

/* Une ligne de personne : pastille d'initiales, identité, état. Le tout est
   un bouton — la ligne entière ouvre la fiche, pas seulement le nom. */
.adm-ligne{display:flex;gap:var(--e3);align-items:flex-start;width:100%;
  text-align:left;background:transparent;border:0;cursor:pointer;
  color:var(--encre);font:inherit;padding:var(--e3) var(--e2);
  border-radius:var(--r)}
.adm-ligne:hover{background:var(--survol)}
.adm-ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--e1)}
.adm-l1{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1) var(--e2)}
.adm-nom{font-weight:600;font-size:var(--t-15)}
.adm-l2{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e4);
  font-size:var(--t-12);color:var(--encre-3)}
.adm-mail{font-family:var(--pile-chiffre);font-size:var(--t-11);
  overflow-wrap:anywhere}

/* Les initiales tiennent lieu de portrait : Pulse n'héberge aucune photo,
   et un rond vide serait un manque plutôt qu'un repère. */
.adm-ini{flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;border-radius:var(--r);
  background:var(--accent-doux);color:var(--encre-2);
  font-family:var(--pile-chiffre);font-size:var(--t-12);font-weight:700}
.adm-ini.petit{width:22px;height:22px;font-size:var(--t-11)}
.adm-ini.grand{width:48px;height:48px;font-size:var(--t-16)}

/* ---------- fiche dans le tiroir ---------- */
.adm-fiche-tete{display:flex;gap:var(--e3);align-items:center;
  margin-bottom:var(--e4)}
.adm-fiche-tete h3{margin:0}
.adm-fiche-role{border-top:1px solid var(--trait);padding:var(--e2) 0}
.adm-fiche-role:first-of-type{border-top:0}
.adm-fiche-role .jeton{margin-left:var(--e2)}

/* L'édition est repliée : on vient lire, on modifie quand on le demande. */
.adm-edition{margin-top:var(--e5);border-top:1px solid var(--trait-fort);
  padding-top:var(--e2)}
.adm-edition > summary{cursor:pointer;font-size:var(--t-13);font-weight:600;
  color:var(--accent);padding:var(--e2) 0}

/* Ce qui est irréversible se voit comme tel avant d'être cliqué. */
.adm-danger{border-left:3px solid var(--alerte);padding-left:var(--e3);
  background:var(--alerte-fond)}
.carte.adm-danger{border-left-width:3px;border-left-color:var(--alerte)}

.adm-journal{display:flex;flex-direction:column}
.adm-journal li{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--e2);font-size:var(--t-13);padding:var(--e2) 0}

/* ---------- galerie d'intégrations ---------- */
/* L'état se lit AVANT d'entrer : la conséquence métier passe donc en
   premier plan, la configuration technique en gris dessous. */
.adm-galerie .carte{display:flex;flex-direction:column}
.adm-conseq{margin:var(--e2) 0;font-size:var(--t-14);color:var(--encre);
  max-width:var(--colonne-texte)}
.adm-pied{margin-top:auto;padding-top:var(--e3);display:flex;flex-wrap:wrap;
  gap:var(--e2);align-items:center}
.adm-integ h2,.adm-tache h2,.adm-equipe h2{text-transform:none;
  letter-spacing:normal;font-size:var(--t-16);font-weight:600;
  color:var(--encre);font-family:var(--pile-labeur)}
.adm-ref{font-family:var(--pile-chiffre);font-size:var(--t-11);
  color:var(--encre-3);margin-left:auto}

/* ---------- équipes ---------- */
.adm-membres{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e3)}
.adm-membre{display:inline-flex;align-items:center;gap:var(--e1);
  background:transparent;border:1px solid var(--trait);border-radius:var(--r);
  padding:2px var(--e2) 2px 2px;cursor:pointer;color:var(--encre-2);
  font:inherit;font-size:var(--t-12)}
.adm-membre:hover{background:var(--survol);color:var(--encre)}
.carte.adm-equipe[data-vise="1"]{border-color:var(--violet);
  box-shadow:inset 3px 0 0 var(--violet)}

/* ---------- audit ---------- */
.adm-filtres{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3);
  margin-bottom:var(--e3);align-items:flex-end}
.adm-filtres label{display:flex;flex-direction:column;gap:var(--e1);
  font-size:var(--t-11);font-weight:700;letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-2);flex:1 1 11rem;min-width:0}
.adm-filtres select,.adm-filtres input{width:100%;padding:6px var(--e2);
  border:1px solid var(--bord-champ);border-radius:var(--r);
  background:var(--carte);color:var(--encre);font-family:var(--pile-labeur);
  font-size:var(--t-13);font-weight:400;letter-spacing:normal;
  text-transform:none}
.adm-filtres .adm-rech{flex:2 1 16rem}
.adm-quand{white-space:nowrap}
.adm-brut summary{cursor:pointer;font-size:var(--t-11);color:var(--encre-3)}
.adm-brut code{display:block;font-size:var(--t-11);color:var(--encre-3);
  overflow-wrap:anywhere;margin-top:var(--e1)}

/* ============================================================
   ADMINISTRATION — rôles et matrice de permissions
   ------------------------------------------------------------
   Aucun littéral de couleur : uniquement les jetons du cahier
   d'exploitation. L'état d'une case se lit au glyphe, au mot et
   au nom accessible ; la teinte n'arrive qu'en quatrième et ne
   porte jamais seule.
   ============================================================ */

/* Réservé aux lecteurs d'écran. `clip-path` plutôt que `display:none`,
   qui retirerait le texte de l'arbre d'accessibilité. */
.adm-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.adm-tete{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-start;
  justify-content:space-between;margin-bottom:var(--e3)}
.adm-tete .meta{flex:1 1 22rem;margin:0}
.adm-fil{margin-bottom:var(--e3)}

/* Le nom d'un rôle est un nom, pas une micro-étiquette : il échappe à la
   règle des titres de carte en capitales de onze pixels, qui le rendrait
   illisible au profit du chrome. */
.adm-role h2>span:first-child,
.adm-entete h2>span:first-child{font-size:var(--t-16);line-height:1.3;
  text-transform:none;letter-spacing:0;font-weight:600;color:var(--encre)}
.adm-role h2,.adm-entete h2{align-items:center;flex-wrap:wrap;gap:var(--e2)}
.adm-role h2 .jeton,.adm-entete h2 .jeton{margin:0}

/* La phrase qui dit ce que le rôle permet — c'est elle qui remplace le code
   interne au premier rang de lecture. */
.adm-role-quoi{margin:0 0 var(--e3);font-size:var(--t-14);color:var(--encre-2);
  max-width:var(--colonne-texte)}
.adm-chiffres{margin:0 0 var(--e2);font-size:var(--t-13);color:var(--encre-2)}
.adm-chiffres .meta{display:inline;font-size:inherit}

/* La jauge appuie le chiffre ; son nom accessible porte le même nombre. */
.adm-jauge{height:3px;background:var(--accent-doux);border-radius:var(--r);
  overflow:hidden;margin-bottom:var(--e3)}
.adm-jauge>div{height:100%;background:var(--accent)}

.adm-voir{display:inline-block;font-size:var(--t-14)}

/* Le code et le rang descendent d'un cran : consultables, jamais dominants. */
.adm-tech{margin-top:var(--e3);border-top:1px solid var(--trait);
  padding-top:var(--e2)}
.adm-tech>summary{cursor:pointer;font-size:var(--t-11);font-weight:700;
  letter-spacing:var(--caps);text-transform:uppercase;color:var(--encre-3)}
.adm-tech>summary:hover{color:var(--encre-2)}
.adm-tech .paire{font-size:var(--t-12)}
.adm-code{font-family:var(--pile-chiffre);font-size:var(--t-12);
  color:var(--encre-3)}

.adm-entete{margin-bottom:var(--e4)}
.adm-outils{margin:var(--e3) 0 0;align-items:flex-end}
.adm-comparer,.adm-portee{display:flex;flex-direction:column;gap:var(--e1);
  min-width:14rem}
.adm-comparer select,.adm-portee select{width:100%}

/* Le mode édition se signale par un bandeau et un filet, pas par un fond
   coloré : le fond général reste neutre. */
.adm-edition-bandeau{margin-top:var(--e3);padding:var(--e3);
  border:1px solid var(--trait);border-left:3px solid var(--accent);
  border-radius:var(--r);background:var(--fond)}
.adm-edition-bandeau .meta{margin:0 0 var(--e2)}
.adm-edition-bandeau .err{margin-top:var(--e2);max-width:var(--colonne-texte)}

.adm-bloc{margin-bottom:var(--e4)}
.adm-h2{font-size:var(--t-11);font-weight:700;letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-2);margin:0 0 var(--e2)}

/* ---------------------------------------------------------- la matrice */
/* Dix colonnes ne tiennent pas sous 900 px : le tableau défile DANS sa
   boîte, jamais la page. C'est la règle déjà posée pour `.tableau`. */
.adm-matrice table{min-width:900px}
.adm-matrice th[scope="row"]{font-size:var(--t-13);font-weight:600;
  color:var(--encre);text-transform:none;letter-spacing:0;white-space:nowrap;
  border-bottom:1px solid var(--trait);vertical-align:middle}
.adm-matrice td.adm-c{padding:var(--e1) var(--e2);vertical-align:middle}
.adm-c-autres{font-size:var(--t-12);color:var(--encre-2);white-space:nowrap}

/* Trois canaux : le glyphe, le mot, le nom accessible. */
.adm-etat{display:inline-flex;align-items:center;gap:var(--e1);
  font-size:var(--t-12);color:var(--encre-2);white-space:nowrap}
.adm-g{flex:none;width:1em;text-align:center;font-weight:700}
.adm-oui>.adm-g{color:var(--reel)}
.adm-non>.adm-g{color:var(--encre-3)}
.adm-na{color:var(--encre-3)}
.adm-na>.adm-g{color:var(--encre-3)}

/* En consultation, aucun fond : cent vingt-neuf cases teintées seraient
   un sapin de Noël, et le refus n'est pas une alerte. La teinte n'apparaît
   qu'en édition, là où elle accompagne un geste. */
.adm-case{padding:3px var(--e2);border:1px solid var(--trait);
  border-radius:var(--r);cursor:pointer;background:var(--carte)}
.adm-case:hover{border-color:var(--trait-fort)}
.adm-case input[type="checkbox"]{flex:none;margin:0;cursor:pointer}
.adm-case.adm-oui{background:var(--reel-fond);border-color:var(--reel)}
.adm-case.adm-non{background:var(--alerte-fond);border-color:var(--trait-fort)}
.adm-case.adm-oui>.adm-m{color:var(--encre)}
.adm-case.adm-non>.adm-m{color:var(--encre-2)}
/* Le focus se voit sur l'étiquette entière : la case seule est trop petite
   pour qu'on retrouve la position au clavier. */
.adm-case:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* La note ne sert qu'en dessous de 768 px, où la matrice cède la place. */
.adm-note-mobile{display:none}

/* --------------------------------------------- blocs repliables par module */
.adm-blocs{display:flex;flex-direction:column;gap:var(--e2)}
.adm-mod{background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r)}
.adm-mod>summary{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--e2) var(--e3);padding:var(--e3) var(--e4);cursor:pointer}
.adm-mod>summary::-webkit-details-marker{display:none}
.adm-mod>summary:hover{background:var(--survol)}
.adm-mod>summary:focus-visible{outline:2px solid var(--accent);
  outline-offset:-2px}
.adm-mod[open]>summary{border-bottom:1px solid var(--trait)}
.adm-mod-nom{font-size:var(--t-14);font-weight:600;color:var(--encre);
  flex:1 1 12rem}
.adm-mod-cpt{font-size:var(--t-13);color:var(--encre-3)}
.adm-mod-etat{margin-bottom:0;font-size:var(--t-11);font-weight:700;
  letter-spacing:var(--caps);text-transform:uppercase}
/* « Partiel » n'a ni le vert ni l'ambre : il n'est ni un succès ni un
   manque. Il prend le fond neutre du bandeau. */
.adm-mod-etat:not(.reel):not(.absent){background:var(--accent-doux);
  color:var(--encre-2)}

.adm-mod-actions{padding:var(--e2) var(--e4) 0}
.adm-perms{list-style:none;margin:0;padding:0}
.adm-perms>li{display:flex;align-items:flex-start;gap:var(--e3);
  padding:var(--e2) var(--e4);border-top:1px solid var(--trait);
  font-size:var(--t-14)}
.adm-perms>li:first-child{border-top:0}
.adm-p>.adm-etat{flex:none;min-width:6.5rem;padding-top:2px}
.adm-p-label{display:flex;align-items:flex-start;gap:var(--e3);width:100%;
  margin:0;cursor:pointer}
.adm-p-label>input[type="checkbox"]{flex:none;margin:3px 0 0;cursor:pointer}
.adm-p-corps{display:block;min-width:0}
.adm-p-nom{display:inline;font-size:var(--t-14);font-weight:600;
  color:var(--encre)}
.adm-p-desc{display:block;font-size:var(--t-13);color:var(--encre-3);
  max-width:var(--colonne-texte);margin-top:2px}
.adm-p-tech{display:block;font-size:var(--t-11);color:var(--encre-3);
  letter-spacing:var(--caps);text-transform:uppercase;margin-top:var(--e1)}
.adm-p-tech .adm-code{text-transform:none;letter-spacing:0}
.adm-sensible{background:var(--absent-fond);color:var(--absent);
  margin-left:var(--e2)}
/* En édition, la ligne autorisée prend un filet vert à gauche : un fond
   plein sur cent vingt-neuf lignes noierait la lecture. */
.adm-p.adm-case{border-radius:0;border:0;border-top:1px solid var(--trait);
  background:transparent;box-shadow:inset 3px 0 0 var(--trait)}
.adm-p.adm-case.adm-oui{background:var(--reel-fond);
  box-shadow:inset 3px 0 0 var(--reel)}
.adm-p.adm-case.adm-non{background:transparent;
  box-shadow:inset 3px 0 0 var(--trait-fort)}
.adm-p.adm-case:focus-within{outline:2px solid var(--accent);
  outline-offset:-2px}

/* ------------------------------------------------------------ comparaison */
.adm-compare table{min-width:680px}
.adm-compare th[scope="row"]{font-size:var(--t-13);font-weight:600;
  color:var(--encre);text-transform:none;letter-spacing:0}
.adm-compare th[scope="row"] .adm-code{display:block;margin-top:2px}

/* ------------------------------------------------- assistant de création */
/* La modale standard fait 560 px : une matrice n'y entre pas. Seul
   l'assistant s'élargit — les autres modales gardent leur mesure. */
.adm-assistant>div{width:min(1280px,100%)}
.adm-as-etapes{display:flex;flex-wrap:wrap;gap:var(--e3);
  border-bottom:1px solid var(--trait);margin-bottom:var(--e4);padding:0}
.adm-as-corps{max-height:58vh;overflow-y:auto;padding-right:var(--e2)}
.adm-as-pied{margin-top:var(--e4);padding-top:var(--e3);
  border-top:1px solid var(--trait)}
.adm-as-resume .paire{border-top:1px solid var(--trait)}
.adm-modeles{list-style:none;margin:var(--e3) 0 0;padding:0}
.adm-modeles>li{border-top:0;padding:0}
.adm-modeles .ag-cal{align-items:flex-start;padding:var(--e2)}
.adm-modeles input[type="radio"]{margin-top:3px}
/* `.modale input` impose une largeur pleine, un fond et un filet à TOUT
   champ : sans cette exception, chaque case à cocher de l'assistant
   s'afficherait en pleine largeur, comme une zone de saisie. */
.adm-assistant input[type="checkbox"],
.adm-assistant input[type="radio"]{width:auto;padding:0;border:0;
  background:none}
/* De même, `.modale label` met chaque étiquette en bloc avec seize pixels
   de marge : la matrice deviendrait une colonne de mille lignes. */
.adm-assistant .adm-case,
.adm-assistant .adm-p-label{display:inline-flex;margin:0}
.adm-assistant .adm-p-label{display:flex}
/* `.modale label` impose des capitales de onze pixels a TOUTE etiquette
   d'une modale. Dans une matrice de cent vingt-neuf cases, « AUTORISÉ »
   hurlait a chaque ligne. On rend a ces deux etiquettes la typographie
   du texte courant — elles nomment un etat, elles ne titrent rien. */
.adm-assistant label.adm-etat,
.adm-assistant label.adm-p-label{font-size:var(--t-12);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--encre-2)}
.adm-assistant .adm-bloc{margin:var(--e4) 0 var(--e3);padding:var(--e3);
  background:transparent;border:0}
.adm-assistant .adm-bloc>h2{padding-left:0}

/* -------------------------------------------------------------- étroit */
/* Sous 768 px, une matrice de dix colonnes ne se lit pas, même en défilant :
   on la retire et on laisse les blocs par module, qui disent exactement la
   même chose — un module à la fois, une permission par ligne, ✓ ou ✕. */
@media (max-width:767px){
  .adm-matrice{display:none}
  .adm-note-mobile{display:block}
  .adm-bloc-matrice>h2>.meta{display:none}
  .adm-perms>li{padding:var(--e2) var(--e3);flex-direction:column;
    gap:var(--e1)}
  .adm-p>.adm-etat{min-width:0}
  .adm-p-label{flex-direction:row}
  .adm-mod>summary{padding:var(--e3)}
  .adm-mod-actions{padding:var(--e2) var(--e3) 0}
  .adm-tete .bouton{width:100%}
  .adm-comparer,.adm-portee{min-width:0;width:100%}
  /* La matrice est retiree : la phrase qui decrit ses colonnes n'a plus
     d'objet. Seule reste la note qui dit ou lire la meme information. */
  .adm-bloc-matrice>p.meta:not(.adm-note-mobile){display:none}
  .adm-as-corps{max-height:50vh}
}

/* >>> PULSE-ADM-NAV — debut du bloc pose par la refonte Administration */
/* ======================================================================
   ADMINISTRATION — navigation à deux niveaux et page de synthèse
   ----------------------------------------------------------------------
   Onze onglets sur une seule ligne obligeaient à lire toute la barre pour
   trouver une section, et ne disaient nulle part où ranger la douzième. Le
   premier niveau porte donc un domaine de responsabilité, le second
   l'écran. La colonne reprend la grammaire déjà posée par `.ac-lat` — même
   filet violet pour la position, mêmes jetons — sans emprunter ses classes :
   le préfixe par module est la convention du produit, et une retouche des
   Actions ne doit pas déplacer l'Administration.
   ====================================================================== */
.admn{display:grid;gap:var(--e4);grid-template-columns:minmax(0,1fr)}
@media (min-width:901px){
  .admn{grid-template-columns:206px minmax(0,1fr);gap:var(--e5);
    align-items:start}
}
.admn-corps{min-width:0}

.admn-nav{display:flex;flex-direction:column;gap:var(--e4)}
.admn-fam{display:flex;flex-direction:column;gap:2px}
.admn-fam-t{font-size:var(--t-11);letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-3);font-weight:700;
  padding:0 10px var(--e1)}
.admn-lien{display:block;width:100%;text-align:left;border:0;cursor:pointer;
  background:transparent;color:var(--encre-2);font:inherit;
  font-size:var(--t-13);padding:7px 10px;border-radius:7px;min-height:32px}
.admn-lien:hover{background:var(--survol);color:var(--encre)}
/* La position se dit par le violet — la règle du produit. */
.admn-lien[aria-current="page"]{background:var(--accent-doux);
  color:var(--encre);font-weight:600;box-shadow:inset 3px 0 0 var(--violet)}
.admn-lien:focus-visible{outline-offset:-2px}

/* Sous 900 px, la colonne devient un sélecteur natif : les familles y restent
   des groupes d'options. L'aplatir aurait rendu la refonte sans effet là où
   l'écran est le plus étroit. */
.admn-sel{display:none}
.admn-sel .etiq-groupe{display:block;margin:0 0 var(--e1)}
@media (max-width:900px){
  .admn-nav{display:none}
  .admn-sel{display:block}
}

.admn-tete{margin-bottom:var(--e4)}
.admn-fil{font-size:var(--t-11);letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-3);font-weight:700}
.admn-tete h2{margin:2px 0 var(--e1);font-size:var(--t-20);color:var(--encre)}
.admn-phrase{margin:0;font-size:var(--t-14);color:var(--encre-2);
  max-width:var(--colonne-texte)}

/* Les tuiles de synthèse sont des BOUTONS : chacune mène quelque part. Elles
   sont plus étroites que `.grille` — on doit en embrasser huit d'un regard,
   pas trois. */
.admn-tuiles{display:grid;gap:var(--e3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.admn-tuile{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--e1);width:100%;text-align:left;font:inherit;color:inherit;
  cursor:pointer;padding:var(--e3) var(--e4)}
.admn-tuile:hover{background:var(--survol);border-color:var(--trait-fort)}
.admn-tuile .etiq{margin:var(--e1) 0 0}
.admn-t-titre{font-size:var(--t-11);letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-3);font-weight:700}
.admn-t-chiffre{font-size:var(--t-28);line-height:1.05;color:var(--encre)}
/* Quand l'information n'est pas un nombre, elle ne prend pas la place d'un
   nombre : « Non exposé » composé en 28 px se lirait comme une mesure. */
.admn-t-mot{font-size:var(--t-16);font-weight:600;color:var(--encre);
  line-height:1.25}
.admn-t-detail{font-size:var(--t-13);color:var(--encre-2)}
.admn-t-aller{margin-top:auto;padding-top:var(--e2);font-size:var(--t-12);
  color:var(--accent);font-weight:700}

/* Un écran vide doit enseigner : ce que la section contient, pourquoi elle
   est vide, ce qu'on peut faire. Le filet pointillé dit « il n'y a rien »
   sans imiter une carte pleine. */
.admn-vide{border:1px dashed var(--trait-fort);border-radius:var(--r);
  padding:var(--e5);background:var(--carte)}
.admn-vide b{display:block;font-size:var(--t-16);color:var(--encre);
  margin-bottom:var(--e2)}
.admn-vide p{margin:0 0 var(--e3);font-size:var(--t-13);color:var(--encre-2);
  max-width:var(--colonne-texte)}
/* <<< PULSE-ADM-NAV — fin du bloc */

/* =====================================================================
   MÉMOIRE — l'espace de connaissance
   ---------------------------------------------------------------------
   Aucune couleur ne porte seule. La nature s'écrit (« Hypothèse »), l'état
   s'écrit (« Remplacée »), le désaccord s'écrit (« 2 désaccords ») ; la
   teinte ne fait que confirmer ce que le mot dit déjà. Un daltonien, un
   écran en plein soleil et une impression en noir et blanc lisent la
   même chose.

   Le violet dit la position — l'onglet où l'on est. Le marine dit ce qui
   se clique. L'alerte dit ce qui empêche de se fier au reste, et ne
   colore jamais une donnée : elle borde le cadre qui la contient.
   ===================================================================== */

/* ------------------------------------------------------ les mesures */
.mem-mesures{
  display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  margin-bottom:var(--e5);
}
.mem-mesure{
  display:flex; flex-direction:column; gap:var(--e1); align-items:flex-start;
  padding:var(--e4); text-align:left; cursor:pointer;
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--r); color:var(--encre);
  transition:border-color var(--duree-survol), background var(--duree-survol);
}
.mem-mesure:hover{ background:var(--survol); border-color:var(--trait-fort); }
.mem-mesure:focus-visible{ outline:2px solid var(--marine); outline-offset:2px; }
.mem-n{ font-size:var(--t-26); font-weight:600; font-variant-numeric:tabular-nums; }
.mem-quoi{ font-size:var(--t-12); color:var(--encre-2); }
/* Un désaccord non résolu n'est pas une statistique de plus : c'est ce
   qui empêche de se fier au reste de l'écran. Le filet le dit. */
.mem-mesure[data-vif="1"]{ border-left:3px solid var(--alerte); }
.mem-mesure[data-vif="1"] .mem-n{ color:var(--alerte); }

/* --------------------------------------------------- barre et recherche */
.mem-barre{
  display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center;
  justify-content:space-between; margin-bottom:var(--e4);
}
.mem-barre .recherche{ flex:1 1 16rem; max-width:26rem; }

/* ------------------------------------------------------- la synthèse */
.mem-grille{ display:grid; gap:var(--e5); }
@media (min-width:1100px){
  .mem-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mem-grille > .mem-alerte{ grid-column:1 / -1; }
}
.mem-bloc > .meta{ margin:0 0 var(--e3); }
.mem-alerte{ border-left:3px solid var(--alerte); }

/* ------------------------------------------------------- une ligne */
.mem-liste{ display:flex; flex-direction:column; gap:var(--e2); }
.mem-item{
  display:flex; flex-direction:column; gap:var(--e1);
  width:100%; text-align:left; cursor:pointer;
  padding:var(--e3) var(--e4);
  background:transparent; color:var(--encre);
  border:1px solid var(--trait); border-radius:var(--r);
  border-left:3px solid var(--trait);
}
.mem-item:hover{ background:var(--survol); }
.mem-item:focus-visible{ outline:2px solid var(--marine); outline-offset:2px; }
/* Le filet redit la nature que le mot annonce déjà, jamais à sa place. */
.mem-item[data-nature="fait"]{ border-left-color:var(--reel); }
.mem-item[data-nature="decision"]{ border-left-color:var(--marine); }
.mem-item[data-nature="hypothese"],
.mem-item[data-nature="opinion"]{ border-left-color:var(--absent); }
.mem-item[data-etat="SUPERSEDED"]{ opacity:.72; }

.mem-l1{ display:flex; flex-wrap:wrap; gap:var(--e2); align-items:baseline; }
.mem-titre{ font-weight:600; }
.mem-resume{ color:var(--encre-2); font-size:var(--t-13); }
.mem-l2{
  display:flex; flex-wrap:wrap; gap:var(--e2);
  color:var(--encre-3); font-size:var(--t-11);
}

.mem-nature,.mem-etat,.mem-conflit,.mem-valider{
  font-size:var(--t-11); letter-spacing:var(--caps); text-transform:uppercase;
  padding:.1rem .4rem; border-radius:var(--r-nul); white-space:nowrap;
}
.mem-nature{ background:var(--voile); color:var(--encre-2); }
.mem-etat{ border:1px solid var(--trait-fort); color:var(--encre-2); }
.mem-etat[data-etat="ACTIVE"]{ border-color:var(--reel); color:var(--reel); }
.mem-conflit{ background:var(--alerte-fond); color:var(--alerte); }
.mem-valider{ border:1px dashed var(--trait-fort); color:var(--encre-2); }

/* -------------------------------------------------- une contradiction */
.mem-cartes{ display:flex; flex-direction:column; gap:var(--e4); }
.mem-conflit-carte{
  border:1px solid var(--trait); border-left:3px solid var(--alerte);
  border-radius:var(--r); padding:var(--e4); margin-bottom:var(--e3);
  background:var(--carte);
}
.mem-conflit-motif{ font-weight:600; margin:0 0 var(--e1); }
/* Les deux côtés côte à côte, de même largeur : une colonne plus large
   laisserait croire qu'un camp pèse plus lourd. */
.mem-cotes{
  display:grid; gap:var(--e3); margin:var(--e3) 0;
  grid-template-columns:1fr auto 1fr; align-items:start;
}
.mem-cote{
  padding:var(--e3); border:1px solid var(--trait); border-radius:var(--r);
  min-width:0;
}
.mem-cote-t{ margin:0 0 var(--e1); }
.mem-cote-r{ margin:0 0 var(--e1); color:var(--encre-2); font-size:var(--t-13); }
.mem-versus{
  align-self:center; font-size:var(--t-11); letter-spacing:var(--caps);
  text-transform:uppercase; color:var(--encre-3);
}
@media (max-width:800px){
  /* Empilés, « contre » devient une barre horizontale : sans elle, les
     deux blocs se liraient comme une suite, pas comme une opposition. */
  .mem-cotes{ grid-template-columns:1fr; }
  .mem-versus{
    justify-self:stretch; text-align:center; padding:var(--e1) 0;
    border-top:1px solid var(--trait); border-bottom:1px solid var(--trait);
  }
}
.mem-tranche{
  margin:var(--e2) 0 0; padding-top:var(--e2);
  border-top:1px solid var(--trait); color:var(--encre-2);
  font-size:var(--t-13);
}
.mem-conflit-mini{
  padding:var(--e3) 0; border-bottom:1px solid var(--trait);
}
.mem-conflit-mini:last-child{ border-bottom:0; }
.mem-autre{
  display:block; width:100%; text-align:left; margin:var(--e2) 0;
  padding:var(--e2) var(--e3); cursor:pointer;
  background:transparent; color:var(--marine);
  border:1px solid var(--trait); border-radius:var(--r);
}
.mem-autre:hover{ background:var(--survol); }

/* ----------------------------------------------------------- la fiche */
.mem-fiche-tete{
  display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center;
  margin:var(--e2) 0;
}
.mem-pourquoi{ border-left:3px solid var(--reel); padding-left:var(--e3); }
/* Une affirmation que rien ne soutient ne reçoit pas le filet du réel :
   le cadre dirait « établie » alors que le texte dit le contraire. */
.mem-pourquoi[data-etablie="0"]{
  border-left-color:var(--absent); border-left-style:dashed;
}
.mem-src{ list-style:none; margin:var(--e2) 0 0; padding:0; }
.mem-src li{
  padding:var(--e2) 0; border-top:1px solid var(--trait);
  font-size:var(--t-13); color:var(--encre-2);
}
.mem-extrait{
  display:block; margin-top:var(--e1); padding-left:var(--e3);
  border-left:2px solid var(--trait); color:var(--encre-3);
  font-style:italic;
}
.mem-versions{ list-style:none; margin:0; padding:0; }
.mem-versions li{
  padding:var(--e2) 0; border-top:1px solid var(--trait);
  font-size:var(--t-13);
}
.mem-versions li[data-courante="1"]{ font-weight:600; }
.mem-v{ font-variant-numeric:tabular-nums; color:var(--encre-3); }
.mem-v-titre{ display:block; color:var(--encre-2); }
.mem-corr{
  padding:var(--e3) 0; border-top:1px solid var(--trait);
  font-size:var(--t-13);
}
.mem-corr-champ{
  margin:0 0 var(--e1); font-size:var(--t-11);
  letter-spacing:var(--caps); text-transform:uppercase; color:var(--encre-3);
}
.mem-corr-avant,.mem-corr-apres{ margin:0 0 var(--e1); }
.mem-corr-avant{ color:var(--encre-3); text-decoration:line-through; }
.mem-corr-avant span,.mem-corr-apres span{
  display:inline-block; min-width:3.6rem; font-size:var(--t-11);
  letter-spacing:var(--caps); text-transform:uppercase; color:var(--encre-3);
  text-decoration:none;
}

/* --------------------------------------------------------- les formes */
.mem-form{ display:flex; flex-direction:column; gap:var(--e3); }
.mem-actions{
  display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e3);
}

/* Le seul bouton d'action de l'ecran : il se distingue par le marine,
   qui dit ce qui se clique, et par rien d'autre. */
.mem-ajouter{
  padding:var(--e2) var(--e4); cursor:pointer; white-space:nowrap;
  background:var(--marine); color:var(--sur-accent);
  border:1px solid var(--marine); border-radius:var(--r);
}
.mem-ajouter:hover{ filter:brightness(1.08); }
.mem-ajouter:focus-visible{ outline:2px solid var(--encre); outline-offset:2px; }
.mem-h{ margin:var(--e5) 0 var(--e2); font-size:var(--t-16); }
.mem-h:first-child{ margin-top:0; }

/* =====================================================================
   PROJETS — une vue de direction
   ---------------------------------------------------------------------
   L'état avant le contenu, et jamais une couleur seule : chaque mesure
   porte son mot. Le filet de gauche ne fait que confirmer ce que la
   ligne dit déjà, pour qu'un écran en plein soleil ou une impression en
   noir et blanc se lisent pareil.
   ===================================================================== */

/* Une grille, pas une pile : l'encre des cartes s'arretait a 919 px
   sur 1662 disponibles. Voir le commentaire de `liste_projets`. */
.proj-liste{ display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,30rem),1fr));
  align-items:start; }
.proj-carte{
  display:flex; flex-direction:column; gap:var(--e2);
  width:100%; text-align:left; cursor:pointer; padding:var(--e4);
  background:var(--carte); color:var(--encre);
  border:1px solid var(--trait); border-left:3px solid var(--trait);
  border-radius:var(--r);
  transition:background var(--duree-survol), border-color var(--duree-survol);
}
.proj-carte:hover{ background:var(--survol); border-color:var(--trait-fort); }
.proj-carte:focus-visible{ outline:2px solid var(--marine); outline-offset:2px; }
.proj-carte[data-alerte="grave"]{ border-left-color:var(--alerte); }
.proj-carte[data-alerte="attention"]{ border-left-color:var(--absent); }
.proj-carte[data-alerte="calme"]{ border-left-color:var(--reel); }

.proj-nom{ font-weight:600; font-size:var(--t-16); }
.proj-objectif{ color:var(--encre-2); font-size:var(--t-13); }
.proj-mesures{ display:flex; flex-wrap:wrap; gap:var(--e2); }
.proj-mesure{
  font-size:var(--t-11); letter-spacing:var(--caps); text-transform:uppercase;
  padding:.1rem .4rem; border-radius:var(--r-nul);
  background:var(--voile); color:var(--encre-2); white-space:nowrap;
}
.proj-mesure[data-vif="1"]{ background:var(--alerte-fond); color:var(--alerte); }
.proj-pied{
  display:flex; flex-wrap:wrap; gap:var(--e2);
  color:var(--encre-3); font-size:var(--t-11);
}

/* ------------------------------------------------------ l'attention */
.proj-attention{
  margin-bottom:var(--e4); border-left:3px solid var(--absent);
}
.proj-attention[data-grave="1"]{ border-left-color:var(--alerte); }
.proj-alertes{ list-style:none; margin:var(--e2) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--e2); }
.proj-alertes li{
  padding-left:var(--e3); border-left:2px solid var(--trait-fort);
}
.proj-alertes li[data-gravite="grave"]{ border-left-color:var(--alerte); }
.proj-calme{
  margin-bottom:var(--e4); padding:var(--e3) var(--e4);
  border:1px solid var(--trait); border-left:3px solid var(--reel);
  border-radius:var(--r); color:var(--encre-2); font-size:var(--t-13);
  max-width:var(--colonne-texte);
}

/* ------------------------------------------------------- l'en-tête */
.proj-tete{ margin-bottom:var(--e4); }
.proj-but{ max-width:var(--colonne-texte); }
.proj-champs{
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5);
  margin-top:var(--e3);
}

/* ---------------------------------------------------------- les blocs */
.proj-grille{ display:grid; gap:var(--e4); }
@media (min-width:1100px){
  .proj-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.proj-bloc > .meta{ margin:0 0 var(--e2); }
.proj-items{ list-style:none; margin:0; padding:0; }
.proj-items > li{
  padding:var(--e2) 0; border-top:1px solid var(--trait);
  display:flex; flex-direction:column; gap:2px;
}
.proj-items > li:first-child{ border-top:0; }
.proj-item{ cursor:pointer; }
.proj-item:hover{ background:var(--survol); }
.proj-item-t{ display:block; }
.proj-retard,.proj-prio{
  display:inline-block; margin-right:var(--e2);
  font-size:var(--t-11); letter-spacing:var(--caps); text-transform:uppercase;
  padding:.1rem .4rem; border-radius:var(--r-nul);
}
.proj-retard{ background:var(--alerte-fond); color:var(--alerte); }
.proj-prio{ background:var(--voile); color:var(--encre-2);
  font-variant-numeric:tabular-nums; }

/* =====================================================================
   CONTACTS — la fiche relationnelle
   ---------------------------------------------------------------------
   Les listes de relations sont des listes de LIENS : ce qui s'ouvre le
   montre au survol et au clavier, ce qui ne s'ouvre pas ne le montre
   pas. Un élément qui a l'air cliquable sans l'être coûte un clic à
   chaque lecture.
   ===================================================================== */

.ctc-fiche[role="button"]{ cursor:pointer; }
.ctc-fiche[role="button"]:hover{ border-color:var(--trait-fort); }
.ctc-fiche[role="button"]:focus-visible{
  outline:2px solid var(--marine); outline-offset:2px;
}

.ctc-rel{ list-style:none; margin:var(--e2) 0 0; padding:0; }
.ctc-rel > li{
  padding:var(--e2) 0; border-top:1px solid var(--trait);
  display:flex; flex-direction:column; gap:2px; font-size:var(--t-13);
}
.ctc-rel > li:first-child{ border-top:0; }
.ctc-rel-item{ cursor:pointer; }
.ctc-rel-item:hover{ background:var(--survol); }

/* Ce qu'un échange engage se détache du résumé : c'est ce qui demande
   une réponse, pas ce qui raconte. */
.ctc-engage{
  display:block; margin-top:var(--e1); padding-left:var(--e3);
  border-left:2px solid var(--accent); color:var(--encre-2);
}

/* La barre de lot n'existe que quand une sélection existe. */
.ctc-lot[data-actif="0"]{ display:none; }
.ctc-lot[data-actif="1"]{
  display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center;
  margin-bottom:var(--e3); padding:var(--e2) var(--e3);
  border:1px solid var(--trait); border-left:3px solid var(--accent);
  border-radius:var(--r); font-size:var(--t-13);
}
.ctc-outils-dossier{
  display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e3);
}
.ctc-outils-dossier button{ font-size:var(--t-12); }
.ctc-case-l{ float:right; margin-left:var(--e2); }

/* =====================================================================
   FORUM
   ---------------------------------------------------------------------
   Un sujet non lu se signale par un mot ET par un filet — jamais par la
   seule couleur. Une conversation se lit en colonne, les citations en
   retrait : c'est la seule mise en page qui rende l'ordre des réponses
   sans obliger à compter les indentations.
   ===================================================================== */

.fm-liste{ display:flex; flex-direction:column; gap:var(--e2); }
.fm-carte{
  display:flex; flex-direction:column; gap:var(--e1);
  width:100%; text-align:left; cursor:pointer;
  padding:var(--e3) var(--e4);
  background:transparent; color:var(--encre);
  border:1px solid var(--trait); border-left:3px solid var(--trait);
  border-radius:var(--r);
}
.fm-carte:hover{ background:var(--survol); }
.fm-carte:focus-visible{ outline:2px solid var(--marine); outline-offset:2px; }
.fm-carte[data-nonlu="1"]{ border-left-color:var(--accent); }

.fm-l1{ display:flex; flex-wrap:wrap; gap:var(--e2); align-items:baseline; }
.fm-titre{ font-weight:600; }
.fm-resume{ color:var(--encre-2); font-size:var(--t-13); }
.fm-l2{
  display:flex; flex-wrap:wrap; gap:var(--e2);
  color:var(--encre-3); font-size:var(--t-11);
}
.fm-marque,.fm-nonlu{
  font-size:var(--t-11); letter-spacing:var(--caps); text-transform:uppercase;
  padding:.1rem .4rem; border-radius:var(--r-nul); white-space:nowrap;
}
.fm-marque{ background:var(--voile); color:var(--encre-2); }
.fm-nonlu{ background:var(--accent-doux); color:var(--accent); }

/* ------------------------------------------------------ un sujet */
.fm-tete{ margin-bottom:var(--e4); }
.fm-corps{ max-width:var(--colonne-texte); }
.fm-corps p{ margin:0 0 var(--e2); }

.fm-messages{ display:flex; flex-direction:column; gap:var(--e3); }
.fm-message{
  padding:var(--e3) var(--e4);
  border:1px solid var(--trait); border-radius:var(--r);
  background:var(--carte);
}
.fm-qui{ margin:0 0 var(--e1); font-weight:600; }
.fm-m-titre{ margin:0 0 var(--e1); }
/* Une citation se lit en retrait, jamais en couleur seule : la phrase
   « en réponse à » porte l'information à elle seule. */
.fm-cite{
  margin:0 0 var(--e2); padding-left:var(--e3);
  border-left:2px solid var(--trait-fort);
  color:var(--encre-3); font-size:var(--t-13); font-style:italic;
}
.fm-outils{
  display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e2);
  padding-top:var(--e2); border-top:1px solid var(--trait);
}
.fm-repondre{ margin-top:var(--e4); }
.fm-repondre textarea{ width:100%; }

/* ---------------------------------------------------------------
   ANNEXES — pièces, commentaires, mentions
   Le panneau est une annexe, pas une section : il se lit après le
   contenu et ne doit jamais lui disputer le regard. D'où le filet
   discret à gauche plutôt qu'un cadre, et un titre de rang 4.
   --------------------------------------------------------------- */
.anx{margin-top:var(--e3)}
.anx-bloc{margin-top:var(--e3);padding-left:var(--e3);
  border-left:2px solid var(--trait)}
.anx-bloc h4{margin:0 0 var(--e2);font-size:.92rem;font-weight:600;
  letter-spacing:.02em;color:var(--encre-3)}
.anx-err:empty{display:none}
.anx-c{margin-bottom:var(--e2)}
/* Une réponse se décale : la conversation garde sa forme. Le décalage
   reste modeste pour qu'un fil de trois niveaux tienne en 375 px. */
.anx-c-reponse{margin-left:var(--e3)}
.anx-c-texte{white-space:pre-wrap;overflow-wrap:anywhere}
.anx .mem-actions{flex-wrap:wrap;align-items:center;gap:var(--e2)}
.anx .mem-actions textarea{flex:1 1 14rem;min-width:0}
.anx .mem-actions input[type=file]{max-width:100%}
@media (max-width:600px){
  /* Le nom d'un fichier ne pousse pas la page : il se replie. */
  .anx .liste-pieces li{align-items:flex-start;flex-direction:column;
    gap:var(--e1)}
}

/* ---------------------------------------------------------------
   VISIONNEUSE — le document au centre, la commande discrète
   Le document occupe l'écran ; la barre est une ligne, pas un
   bandeau d'outils. Ce qu'on regarde doit peser plus lourd que ce
   avec quoi on le regarde.
   --------------------------------------------------------------- */
body.vs-ouverte { overflow: hidden; }

.vs{
  position:fixed; inset:0; z-index:900;
  display:flex; flex-direction:column;
  background:var(--voile);
  backdrop-filter:blur(2px);
}

/* --- la barre haute --- */
.vs-barre{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--e3);
  justify-content:space-between;
  padding:var(--e2) var(--e3);
  background:var(--carte); border-bottom:1px solid var(--trait);
  min-height:44px;
}
.vs-titre{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.vs-nom{
  font-weight:600; font-size:var(--t-14);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:46vw;
}
.vs-meta{ font-size:var(--t-12); color:var(--encre-3); }
.vs-outils{
  display:flex; align-items:center; gap:var(--e1);
  /* Le filet : si la barre s'allonge, elle defile dans son cadre
     plutot que de sortir de l'ecran. Un bouton hors d'atteinte est
     pire qu'un bouton serre. */
  min-width:0; overflow-x:auto; scrollbar-width:none;
}
.vs-outils::-webkit-scrollbar{ display:none; }
/* La sortie est hors du defilement, et le reste a toutes les largeurs.
   Un ecran plein dont on ne peut pas sortir n'est pas un ecran, c'est un
   piege. */
.vs-sortie{ flex:0 0 auto; display:flex; align-items:center;
  padding-left:var(--e1); border-left:1px solid var(--arete); }

.vs-b{
  border:1px solid transparent; background:transparent; color:var(--encre-2);
  border-radius:var(--r); cursor:pointer;
  min-width:32px; height:32px; padding:0 var(--e2);
  font-size:var(--t-15); line-height:1;
}
.vs-b:hover{ background:var(--survol); }
.vs-b:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.vs-fermer:hover{ background:var(--alerte-fond); color:var(--alerte); }

.vs-pages{ display:flex; align-items:center; gap:var(--e1); }
.vs-num{
  width:3.2rem; text-align:center; height:30px;
  border:1px solid var(--trait); border-radius:var(--r);
  background:var(--relief); color:var(--encre);
  font-variant-numeric:tabular-nums;
}
.vs-versions{
  height:30px; max-width:12rem;
  border:1px solid var(--trait); border-radius:var(--r);
  background:var(--relief); color:var(--encre); font-size:var(--t-13);
}

/* --- le corps --- */
.vs-corps{ flex:1 1 auto; display:flex; min-height:0; }
.vs-scene{
  flex:1 1 auto; min-width:0; overflow:auto;
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--e4); background:var(--fond);
}
.vs-attente{ color:var(--encre-3); padding:var(--e6); }

/* --- le PDF et les images --- */
.vs-pdf-cadre, .vs-image-cadre{
  display:flex; justify-content:center; width:100%;
}
.vs-toile, .vs-image{
  max-width:100%; height:auto;
  background:var(--relief);
  box-shadow:0 1px 8px var(--ombre-bord);
  transform-origin:center top;
}

/* --- le texte --- */
.vs-texte-cadre{ width:100%; max-width:var(--colonne-texte); }
.vs-tronque{ margin-bottom:var(--e2); }
.vs-texte{
  margin:0; padding:var(--e4);
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--r);
  font-family:var(--pile-chiffre); font-size:var(--t-13); line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere; color:var(--encre);
}

/* --- le classeur --- */
.vs-classeur{ width:100%; display:flex; flex-direction:column; gap:var(--e2); }
.vs-onglets{
  display:flex; gap:var(--e1); overflow-x:auto; padding-bottom:2px;
}
.vs-onglets button{
  flex:0 0 auto; padding:var(--e2) var(--e3);
  border:1px solid var(--trait); border-bottom:none;
  border-radius:var(--r) var(--r) 0 0;
  background:var(--fond); color:var(--encre-2);
  font-size:var(--t-13); cursor:pointer; white-space:nowrap;
}
.vs-onglets button[aria-selected="true"]{
  background:var(--carte); color:var(--encre); font-weight:600;
  border-bottom:1px solid var(--carte); margin-bottom:-1px;
}
.vs-grille{ background:var(--carte); border:1px solid var(--trait); }
/* La grille défile DANS son cadre. C'est ce qui interdit à un classeur
   de cinquante colonnes de pousser la page entière. */
.vs-grille-defile{ overflow:auto; max-height:70vh; }
.vs-table{ border-collapse:collapse; font-size:var(--t-13); }
.vs-table th, .vs-table td{
  border:1px solid var(--arete); padding:3px var(--e2);
  white-space:nowrap; max-width:22rem;
  overflow:hidden; text-overflow:ellipsis;
}
.vs-table thead th, .vs-rang{
  position:sticky; background:var(--fond); color:var(--encre-3);
  font-weight:600; font-size:var(--t-11); text-align:center;
}
.vs-table thead th{ top:0; z-index:2; }
.vs-rang{ left:0; z-index:1; }
.vs-table thead th:first-child{ z-index:3; }
.vs-nombre{ text-align:right; font-variant-numeric:tabular-nums; }
.vs-pagination{
  display:flex; align-items:center; gap:var(--e3);
  padding:var(--e2) var(--e3); flex-wrap:wrap;
}

/* --- le format sans aperçu --- */
.vs-vide{
  margin:auto; text-align:center; max-width:30rem;
  padding:var(--e6) var(--e4); color:var(--encre-2);
}
.vs-icone{
  display:inline-block; margin-bottom:var(--e3);
  padding:var(--e3) var(--e4);
  border:2px solid var(--trait-fort); border-radius:var(--r);
  font-family:var(--pile-chiffre); font-weight:600; color:var(--encre-3);
  letter-spacing:var(--caps);
}
.vs-vide-titre{ font-weight:600; color:var(--encre); overflow-wrap:anywhere; }

/* --- le panneau d'informations --- */
.vs-infos{
  flex:0 0 22rem; overflow:auto;
  background:var(--carte); border-left:1px solid var(--trait);
  padding:var(--e3);
}
.vs-infos-tete{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e2); margin-bottom:var(--e3);
}
.vs-infos-tete h3{ margin:0; font-size:var(--t-14); }
.vs-infos-liste{ margin:0; }
.vs-info{
  display:grid; grid-template-columns:8.5rem 1fr; gap:var(--e2);
  padding:var(--e1) 0; border-bottom:1px solid var(--arete);
}
.vs-info dt{ color:var(--encre-3); font-size:var(--t-12); }
.vs-info dd{ margin:0; font-size:var(--t-13); overflow-wrap:anywhere; }
.vs-infos-bloc{ margin-top:var(--e3); }
.vs-infos-bloc h4{ margin:0 0 var(--e1); font-size:var(--t-13); }
.vs-infos-technique{ margin-top:var(--e3); }
.vs-infos-technique summary{
  cursor:pointer; color:var(--encre-3); font-size:var(--t-12);
  padding:var(--e2) 0;
}
.vs-trouve{ list-style:none; margin:0; padding:0; }
.vs-trouve li{
  display:flex; flex-direction:column; gap:1px;
  padding:var(--e2) 0; border-bottom:1px solid var(--arete);
}
.vs-trouve .meta{ overflow-wrap:anywhere; }

/* --- téléphone et tablette --- */
@media (max-width:900px){
  /* Le panneau devient un tiroir : sur un écran étroit, une colonne de
     22 rem ne laisserait plus rien au document. */
  .vs-infos{
    position:absolute; inset:44px 0 0 auto; width:min(22rem, 92vw);
    z-index:2; box-shadow:-2px 0 12px var(--ombre-bord);
  }
  .vs-nom{ max-width:38vw; }
  .vs-scene{ padding:var(--e2); }
  .vs-grille-defile{ max-height:60vh; }
}
@media (max-width:600px){
  .vs-barre{ padding:var(--e1) var(--e2); gap:var(--e2); }
  .vs-nom{ max-width:38vw; font-size:var(--t-13); }
  .vs-meta{ display:none; }
  .vs-b{ min-width:28px; height:30px; padding:0 2px; font-size:var(--t-14); }
  .vs-versions{ display:none; }
  .vs-infos{ inset:40px 0 0 0; width:100%; }
  /* Mesure a 375 px : la barre sortait de 52 px et la fermeture etait
     hors d'atteinte. La rotation redresse un scan — un geste de bureau ;
     l'ajustement a la largeur est deja le defaut. Les deux s'effacent,
     et ce qui reste tient. */
  .vs-b[data-vs="rotation"], .vs-b[data-vs="largeur"]{ display:none; }
  .vs-num{ width:2.4rem; }
  .vs-pages .meta{ font-size:var(--t-11); }
}

/* Le mouvement se retire quand on l'a demandé. */
@media (prefers-reduced-motion:reduce){
  .vs{ backdrop-filter:none; }
  .vs-toile, .vs-image{ transition:none; }
}

/* ---------------------------------------------------------------
   RECHERCHE & INNOVATION
   Un laboratoire se lit, il ne se dépouille pas. D'où des cartes et
   des sections plutôt que des tables : ce qu'on cherche à savoir en
   arrivant est une question, pas une ligne.
   --------------------------------------------------------------- */
.rd-tete{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--e4); flex-wrap:wrap; margin-bottom:var(--e4);
}
.rd-h1{ margin:0; font-family:var(--pile-titre); font-size:var(--t-26); }
.rd-accroche{ margin:var(--e1) 0 0; color:var(--encre-3);
  font-size:var(--t-14); max-width:52ch; }

/* --- les mesures : peu, et aucune décorative --- */
.rd-mesures{
  display:flex; flex-wrap:wrap; gap:var(--e3); margin-bottom:var(--e4);
}
.rd-mesure{
  flex:0 1 auto; min-width:8.5rem;
  padding:var(--e3) var(--e4);
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--r);
  display:flex; flex-direction:column; gap:2px;
}
/* L'alerte se voit par le filet ET par le chiffre : jamais par la
   seule couleur. */
.rd-mesure.rd-alerte{ border-left:3px solid var(--alerte); }
.rd-nombre{
  font-family:var(--pile-chiffre); font-size:var(--t-26);
  font-variant-numeric:tabular-nums; line-height:1;
}
.rd-libelle{ font-size:var(--t-12); color:var(--encre-3); }

/* --- les cartes de projet --- */
.rd-cartes{
  display:grid; gap:var(--e4);
  grid-template-columns:repeat(auto-fill, minmax(21rem, 1fr));
}
.rd-carte{
  display:flex; flex-direction:column; gap:var(--e2);
  padding:var(--e4);
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--r);
}
.rd-carte-tete{ display:flex; align-items:baseline; gap:var(--e2);
  justify-content:space-between; }
.rd-carte-tete h3{ margin:0; font-size:var(--t-16); overflow-wrap:anywhere; }
.rd-jetons{ display:flex; flex-wrap:wrap; gap:var(--e1); align-items:center; }
.rd-trl{ font-family:var(--pile-chiffre); font-variant-numeric:tabular-nums; }
.rd-quoi{ margin:0; color:var(--encre-2); font-size:var(--t-13);
  overflow-wrap:anywhere; }
.rd-faits{ margin:0; padding-left:var(--e4); font-size:var(--t-13);
  color:var(--encre-2); }
.rd-carte-pied{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e2); flex-wrap:wrap; margin-top:auto; padding-top:var(--e2);
  border-top:1px solid var(--arete);
}
.rd-retard{ color:var(--alerte); }

/* --- le laboratoire --- */
.rd-labo-tete{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--e4); flex-wrap:wrap; margin:var(--e3) 0 var(--e4);
}
.rd-pourquoi{
  padding:var(--e4); margin-bottom:var(--e4);
  background:var(--carte); border:1px solid var(--trait);
  border-left:3px solid var(--violet); border-radius:var(--r);
  max-width:var(--colonne-texte);
}
.rd-pourquoi h3{ margin:var(--e3) 0 var(--e1); font-size:var(--t-13);
  color:var(--encre-3); letter-spacing:var(--caps);
  text-transform:uppercase; }
.rd-pourquoi h3:first-child{ margin-top:0; }
.rd-pourquoi p{ margin:0; }
.rd-question{ font-family:var(--pile-titre); font-size:var(--t-16); }

.rd-colonnes{
  display:grid; gap:var(--e4);
  grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr));
}
.rd-bloc{
  padding:var(--e4); background:var(--carte);
  border:1px solid var(--trait); border-radius:var(--r);
}
.rd-bloc h3{ margin:0 0 var(--e2); font-size:var(--t-14); }
.rd-liste{ margin:0; padding-left:var(--e4); font-size:var(--t-13); }
.rd-liste li{ margin-bottom:var(--e1); overflow-wrap:anywhere; }

.rd-liste-cartes{ display:flex; flex-direction:column; gap:var(--e3); }
.rd-h{
  padding:var(--e4); background:var(--carte);
  border:1px solid var(--trait); border-radius:var(--r);
}
.rd-h header{ display:flex; align-items:baseline; gap:var(--e2);
  flex-wrap:wrap; }
.rd-h h4{ margin:0; font-size:var(--t-15); overflow-wrap:anywhere; }
.rd-h p{ margin:var(--e2) 0 0; font-size:var(--t-13); }
.rd-h details summary{ cursor:pointer; color:var(--encre-3);
  font-size:var(--t-12); padding:var(--e2) 0; }

/* L'état porte un filet à gauche : la couleur appuie, elle ne dit pas
   seule. Une hypothèse réfutée reste lisible — c'est un résultat. */
.jeton.rd-e-soutenue{ border-left:3px solid var(--reel); }
.jeton.rd-e-refutee{ border-left:3px solid var(--alerte); }
.jeton.rd-e-a_analyser, .jeton.rd-e-inconclusive{
  border-left:3px solid var(--absent); }

/* --- le journal --- */
.rd-saisie{
  padding:var(--e4); margin-bottom:var(--e4);
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--r);
}
.rd-duo{ display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); }
.rd-journal{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--e2); }
.rd-entree{
  padding:var(--e3) var(--e4); background:var(--carte);
  border:1px solid var(--trait); border-radius:var(--r);
  border-left:3px solid var(--trait-fort);
}
/* Une entrée corrigée reste là, marquée. Un cahier de laboratoire
   qu'on rature ne prouve plus la chronologie. */
.rd-corrigee{ border-left-color:var(--absent); }
.rd-entree-tete{ display:flex; align-items:center; gap:var(--e2);
  flex-wrap:wrap; margin-bottom:var(--e1); }
.rd-texte{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.rd-corrige{ font-style:italic; }

/* --- documents et chronologie --- */
.rd-docs{ list-style:none; margin:0; padding:0; }
.rd-docs li{ display:flex; align-items:baseline; gap:var(--e2);
  flex-wrap:wrap; padding:var(--e2) 0; border-bottom:1px solid var(--arete); }
.rd-doc{ text-align:left; overflow-wrap:anywhere; }

.rd-chrono{ list-style:none; margin:0; padding:0; }
.rd-chrono li{
  display:grid; grid-template-columns:9rem 8rem 1fr; gap:var(--e3);
  align-items:baseline; padding:var(--e2) 0;
  border-bottom:1px solid var(--arete);
}
.rd-chrono-date{ font-size:var(--t-12); color:var(--encre-3);
  font-variant-numeric:tabular-nums; }
.rd-chrono-quoi{ overflow-wrap:anywhere; }

@media (max-width:900px){
  .rd-cartes{ grid-template-columns:1fr; }
  .rd-colonnes{ grid-template-columns:1fr; }
  /* La chronologie passe en pile : trois colonnes sur un téléphone
     donneraient neuf caractères par ligne. */
  .rd-chrono li{ grid-template-columns:1fr; gap:var(--e1); }
}
@media (max-width:600px){
  .rd-tete, .rd-labo-tete{ gap:var(--e2); }
  .rd-mesure{ min-width:7rem; padding:var(--e2) var(--e3); }
  .rd-nombre{ font-size:var(--t-20); }
}

/* ===================================================================
   L'INSTRUCTION SCIENTIFIQUE — verrous, critères d'arrêt, synthèse
   -------------------------------------------------------------------
   AUCUNE COULEUR PAR FAMILLE DE VERROU. Les quatre familles portent des
   conséquences différentes, mais ce sont des classifications, pas des
   états : leur donner quatre teintes reviendrait à colorer une donnée.
   La conséquence est écrite en toutes lettres sous l'intitulé — c'est
   elle qui informe, pas une pastille dont il faudrait apprendre le code.

   LA JAUGE PORTE SON ÉTAT SUR DEUX CANAUX : la barre et sa couleur
   d'intention, ET le mot « Franchi » / « Non franchi » écrit à côté.
   Un lecteur qui ne distingue pas le vert du rouge lit la même chose.
   =================================================================== */

.rd-ou-en-est{
  margin:0; font-family:var(--pile-titre); font-size:var(--t-15);
  color:var(--encre);
}
.rd-carte[role="button"]{ cursor:pointer; }
.rd-carte[role="button"]:hover{ background:var(--survol); }
.rd-carte[role="button"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* Un projet non instruit n'est pas une erreur : c'est du travail qui
   reste. L'arête suffit à le signaler, sans crier. */
.rd-carte.rd-alerte{ border-left:3px solid var(--absent); }

/* La conséquence d'un verrou, et la décision écrite d'avance : ce sont
   des phrases qui engagent, pas des métadonnées. */
.rd-consequence{
  margin:var(--e2) 0 0; padding-left:var(--e3);
  border-left:2px solid var(--trait-fort);
  color:var(--encre-2); font-size:var(--t-13);
}

/* ------------------------------------------------------- les jauges */
.rd-jauges{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--e4); }
.rd-jauges > li{ display:flex; flex-direction:column; gap:var(--e1); }

.rd-jauge-tete{ display:flex; align-items:baseline; gap:var(--e2);
  justify-content:space-between; flex-wrap:wrap; }
.rd-jauge-barre{
  /* Le rail est `--survol`, pas `--arete` : mesuré au navigateur, le
     remplissage rouge n'atteignait que 2,97:1 contre `--arete` en thème
     sombre — sous les 3:1 exigés d'un élément graphique. Sur `--survol`
     il tient 5,40 en sombre et 5,80 en clair. */
  height:6px; background:var(--survol); border-radius:var(--r);
  overflow:hidden;
}
.rd-jauge-barre{ position:relative; }
.rd-jauge-barre > span{
  display:block; height:100%; background:var(--encre-3);
  transition:width var(--duree-jauge) var(--courbe-panneau);
}
/* Le repère du seuil, au milieu du rail. Il est la seule chose fixe :
   c'est par rapport à lui qu'on lit la barre. */
.rd-jauge-seuil{
  position:absolute; top:-2px; bottom:-2px; left:50%;
  width:2px; margin-left:-1px; background:var(--encre);
}
.rd-jauge-ok .rd-jauge-barre > span{ background:var(--reel); }
.rd-jauge-sous .rd-jauge-barre > span{ background:var(--alerte); }
.rd-jauge-pied{
  margin:0; font-family:var(--pile-chiffre);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-13); color:var(--encre-2);
}

/* ------------------------------------------- les onze questions */
.rd-questions{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--e5); }
.rd-q{ display:flex; gap:var(--e4); align-items:flex-start; }
/* La numérotation n'est pas décorative : l'ordre des onze questions EST
   la méthode d'instruction. */
.rd-q-num{
  flex:none; width:1.75rem; height:1.75rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--trait-fort); border-radius:var(--r);
  font-family:var(--pile-chiffre); font-variant-numeric:tabular-nums;
  font-size:var(--t-13); color:var(--encre-2);
}
.rd-q h4{ margin:0; font-size:var(--t-14); color:var(--encre-2);
  font-weight:600; letter-spacing:var(--caps); text-transform:uppercase; }
.rd-q-rep{ margin:var(--e1) 0 0; font-family:var(--pile-titre);
  font-size:var(--t-16); max-width:var(--colonne-texte); }
/* « Non renseigné » se voit sans s'imposer : c'est une information, pas
   une alarme. */
.rd-q-vide .rd-q-num{ border-style:dashed; color:var(--encre-3); }
.rd-sous-liste{ list-style:none; margin:var(--e2) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--e1);
  font-size:var(--t-13); color:var(--encre-2); }

/* --------------------------------------- le seuil et sa constatation */
.rd-seuil, .rd-valeur{ margin:var(--e2) 0 0; font-size:var(--t-14); }
.rd-seuil b, .rd-valeur b{ font-family:var(--pile-chiffre);
  font-variant-numeric:tabular-nums; }
/* Un critère franchi appelle une décision : l'arête le dit, et le jeton
   « Franchi » l'écrit. */
.rd-h.rd-c-franchi{ border-left:3px solid var(--alerte); }
.rd-h.rd-c-non_franchi{ border-left:3px solid var(--reel); }
.rd-h.rd-c-confronte{ border-left:3px solid var(--absent); }
/* Un verrou structurel interdit de promettre le projet. */
.rd-h.rd-v-structurel{ border-left:3px solid var(--alerte); }
.rd-h.rd-v-leve{ border-left:3px solid var(--reel); }

/* La reponse de l'assistant garde ses retours a la ligne sans qu'on
   reinjecte du balisage dans une chaine venue d'un modele. */
.rd-reponse{ white-space:pre-wrap; }
.rd-reserves{ margin-bottom:var(--e4); }

.rd-historique{ margin-top:var(--e5); }
.rd-historique summary{ cursor:pointer; color:var(--encre-3);
  font-size:var(--t-13); }

.rd-trio{ display:grid; gap:var(--e3);
  grid-template-columns:repeat(3, minmax(0,1fr)); }

@media (max-width:600px){
  .rd-trio{ grid-template-columns:1fr; }
  .rd-q{ gap:var(--e3); }
  .rd-q-rep{ font-size:var(--t-15); }
}

/* ===================================================================
   LES VISUELS R&D — graphiques, chaîne d'instruction, relations
   -------------------------------------------------------------------
   AUCUNE COULEUR NE PORTE SEULE UNE INFORMATION. La famille d'un verrou
   est un signe ET un mot ; un seuil franchi est une teinte ET le mot
   « franchi » ; une barre négative se voit à sa position par rapport au
   zéro, pas seulement à sa couleur.

   LES BARRES SONT DU HTML, PAS DU SVG. Le texte reste du texte : il se
   sélectionne, il est lu par un lecteur d'écran, et il ne rétrécit pas
   avec le dessin sur un écran de 375 px.
   =================================================================== */

.rd-proposition{
  margin:0; font-family:var(--pile-titre); font-size:var(--t-15);
  color:var(--encre); max-width:var(--colonne-texte);
}
.rd-carte-ligne{
  margin:var(--e2) 0 0; display:flex; gap:var(--e2);
  font-size:var(--t-13); align-items:baseline;
}
.rd-carte-cle{
  flex:none; min-width:6.5rem; color:var(--encre-3);
  text-transform:uppercase; letter-spacing:var(--caps);
  font-size:var(--t-11);
}
.rd-carte-pied{ margin-top:auto; padding-top:var(--e3);
  border-top:1px solid var(--arete); }

/* Le programme n'est pas une carte de projet : il les coiffe. */
.rd-programme{
  padding:var(--e4); margin-bottom:var(--e5);
  background:var(--carte); border:1px solid var(--trait);
  border-left:3px solid var(--accent); border-radius:var(--r);
}
.rd-programme-tete{ display:flex; align-items:baseline; gap:var(--e2);
  flex-wrap:wrap; }
.rd-programme-tete h3{ margin:0; font-size:var(--t-16); }

/* Le signe d'une famille de verrou : lisible en niveaux de gris. */
.rv-signe{ font-family:var(--pile-chiffre); color:var(--encre-2);
  padding-right:.15em; }

/* ------------------------------------------------- les graphiques */
.rv-graphe{ margin-bottom:var(--e5); }
.rv-question{ margin:var(--e2) 0 var(--e3); font-family:var(--pile-titre);
  font-size:var(--t-15); max-width:var(--colonne-texte); }
.rv-source{ margin-top:var(--e3); }

.rv-barres{ width:100%; border-collapse:collapse; }
.rv-barres th[scope="row"]{
  text-align:left; font-weight:400; font-size:var(--t-13);
  padding:var(--e2) var(--e3) var(--e2) 0;
  /* Une largeur BORNEE, pas `width:1%` : la piste prenait tout le
     reste et etranglait les autres colonnes. */
  width:34%; max-width:20rem; color:var(--encre-2);
  vertical-align:top;
}
.rv-barres td{ vertical-align:top; padding:var(--e2) 0; }
.rv-note{ display:block; margin-top:2px; font-size:var(--t-12);
  color:var(--encre-3); }
.rv-piste{
  position:relative; width:100%; min-width:5rem;
  background:var(--survol); height:14px; border-radius:var(--r);
}
.rv-barre{
  display:block; height:14px; background:var(--accent);
  border-radius:var(--r); min-width:2px;
}
/* Une valeur négative se lit à sa POSITION par rapport au zéro, pas
   seulement à sa teinte. */
.rv-negative{ background:var(--alerte); }
.rv-zero{ position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--encre); }
.rv-valeur{ white-space:nowrap; padding-left:var(--e3);
  font-family:var(--pile-chiffre); font-variant-numeric:tabular-nums;
  font-size:var(--t-13); text-align:right; }


.rv-cadre{ overflow-x:auto; }
/* UN SVG A SA TAILLE, PAS CELLE DU CONTENEUR.
   Avec `width:100%`, un viewBox de 620 x 160 s'etirait a 1024 px de
   large : le texte interne, fixe en unites du viewBox, passait de 11 a
   18 px, les etiquettes d'axe se chevauchaient, et le graphe des
   relations occupait un ecran entier. Vu dans Chrome.
   On borne donc la largeur a la taille naturelle du dessin, et on le
   laisse retrecir en dessous — jamais grandir au-dela. */
.rv-courbe{ width:100%; max-width:620px; height:auto; display:block; }
.rv-relations{ width:100%; max-width:500px; height:auto; display:block;
  margin:0 auto; }
.rv-axe{ stroke:var(--arete); stroke-width:1; }
.rv-trait{ fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linejoin:round; }
.rv-point{ fill:var(--accent); }
.rv-tick{ fill:var(--encre-2); font-size:11px;
  font-family:var(--pile-chiffre); }
.rv-legende{ list-style:none; margin:var(--e3) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--e2) var(--e5);
  font-size:var(--t-13); color:var(--encre-2); }

/* ------------------------------------------ la chaîne d'instruction */
.rv-chaine{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--e3); }
.rv-etape{
  padding:var(--e3) var(--e4); background:var(--carte);
  border:1px solid var(--trait); border-radius:var(--r);
  position:relative;
}
/* Le chaînage se voit : une étape découle de la précédente. */
.rv-etape + .rv-etape::before{
  content:""; position:absolute; left:calc(var(--e4) + .75rem);
  top:calc(var(--e3) * -1 - 1px); height:var(--e3);
  border-left:2px solid var(--trait-fort);
}
.rv-etape-vide{ opacity:.62; }
.rv-etape-tete{ display:flex; align-items:baseline; gap:var(--e2); }
.rv-etape-tete h4{ margin:0; font-size:var(--t-14);
  text-transform:uppercase; letter-spacing:var(--caps);
  color:var(--encre-2); }
.rv-etape-rang{
  flex:none; width:1.5rem; height:1.5rem; display:flex;
  align-items:center; justify-content:center;
  border:1px solid var(--trait-fort); border-radius:var(--r);
  font-family:var(--pile-chiffre); font-size:var(--t-11);
  color:var(--encre-2);
}
.rv-noeuds{ display:flex; flex-wrap:wrap; gap:var(--e2);
  margin-top:var(--e2); }
.rv-noeud{
  display:flex; flex-direction:column; gap:2px; text-align:left;
  padding:var(--e2) var(--e3); max-width:26rem;
  background:var(--relief); border:1px solid var(--trait);
  border-radius:var(--r); color:var(--encre);
  font:inherit; font-size:var(--t-13);
}
button.rv-noeud{ cursor:pointer; }
button.rv-noeud:hover{ background:var(--survol);
  border-color:var(--trait-fort); }
button.rv-noeud:focus-visible{ outline:2px solid var(--accent);
  outline-offset:2px; }
.rv-noeud-inerte{ opacity:.75; }
.rv-noeud-titre{ font-weight:600; overflow-wrap:anywhere; }

/* ----------------------------------------------- la matrice */
.rv-matrice th[scope="row"]{ text-align:left; font-weight:600;
  vertical-align:top; }
.rv-matrice td{ vertical-align:top; }

/* ------------------------------------------- la carte des relations */
.rv-arete{ stroke:var(--trait-fort); stroke-width:2; }
.rv-rond{ fill:var(--accent); }
/* Un projet à verrou structurel se distingue par sa teinte ET par son
   nom, qui l'écrit juste à côté. */
.rv-rond-alerte{ fill:var(--alerte); }
.rv-etiquette{ fill:var(--encre); font-size:11px;
  font-family:var(--pile-labeur); }

/* Ce qui n'est là que pour les lecteurs d'écran. */
.sr-seul{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (max-width:600px){
  .rd-carte-ligne{ flex-direction:column; gap:0; }
  .rd-carte-cle{ min-width:0; }
  .rv-barres th[scope="row"]{ width:42%; }

}

/* ===================================================================
   LA CIBLE TACTILE — un lien n'est pas un contrôle
   -------------------------------------------------------------------
   MESURE : « Ouvrir le programme… » faisait 150 × 23 px. Un doigt vise
   mal en dessous de 44 px.

   MAIS ON NE TRANSFORME PAS TOUS LES LIENS EN GROS BOUTONS. Un lien au
   fil d'un paragraphe doit rester un lien : l'élargir casserait
   l'interligne et donnerait à un texte l'allure d'une barre d'outils.

   DEUX TRAITEMENTS, SELON CE QUE L'ÉLÉMENT EST :

   · UN LIEN DANS DU TEXTE garde exactement sa taille. On lui ajoute une
     zone de contact invisible, plus haute que lui, qui ne participe pas
     au flux — ni la ligne ni le paragraphe ne bougent.

   · UN LIEN QUI EST UNE ACTION — dans une barre d'outils, dans une zone
     d'actions — devient un vrai contrôle de 44 px de haut, avec son
     survol. C'est ce qu'il est déjà pour l'utilisateur ; il en prend la
     taille.

   Les tableaux et les listes ne sont PAS concernés : ils ne portent pas
   ces classes, et une rangée de 44 px y serait de l'espace perdu.
   =================================================================== */

/* LA RÈGLE EST POSÉE UNE FOIS, POUR TOUS LES CONTRÔLES.
   Énumérer les classes une à une — .onglet, .jeton, .admn-lien,
   .esp-bouton, .ck-lien… — c'est se condamner à recommencer à chaque
   écran nouveau. Un bouton est un bouton : la zone de contact lui vient
   de ce qu'il EST, pas de la classe qu'il porte.

   Écraser un ::after existant effacerait un chevron ou un compteur. Les
   neuf sélecteurs de la feuille qui portent un `content` ont été relevés :
   .etat, .ag-evt, .ck-mini-tete, th[aria-sort], .progression .etat — aucun
   n'est un bouton ni un lien. La règle ne recouvre donc rien. */
#vue button, #vue a[href], #vue [role="button"], #vue summary,
header button, header a[href], #barre button, .lien {
  position: relative;
}

/* La zone de contact déborde en hauteur sans rien décaler. `right:0`
   la borne à la largeur du contrôle : deux contrôles côte à côte ne se
   recouvrent pas. */
#vue button::after, #vue a[href]::after, #vue [role="button"]::after,
#vue summary::after, header button::after, header a[href]::after,
#barre button::after, .lien::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
  /* Sous le contenu : une zone posée au-dessus intercepterait le survol
     d'un chevron ou d'une icône enfant. */
  z-index: 0;
}

/* Une action est un contrôle. */
.mem-actions .lien,
.barre-outils .lien {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--e3); margin: 0 calc(var(--e3) * -1);
  text-decoration: none; border-radius: var(--r);
}
/* La zone invisible n'a plus lieu d'être : la vraie l'a remplacée. */
.mem-actions .lien::after,
.barre-outils .lien::after { content: none; }

.mem-actions .lien:hover,
.barre-outils .lien:hover { background: var(--survol); color: var(--encre); }
.mem-actions .lien:focus-visible,
.barre-outils .lien:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* Une zone d'actions garde ses éléments espacés : sans cela, deux
   contrôles de 44 px se toucheraient et l'on cliquerait le mauvais. */
.mem-actions { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e1) var(--e4); }

/* Un bouton EST un contrôle : il n'a pas d'excuse. Mesuré à 35 px dans le
   corps et à 28 px dans l'en-tête replié — la hauteur venait du padding,
   donc changeait avec la media query. `min-height` la fixe une fois. La
   LARGEUR, elle, reste celle du texte : un bouton ne devient pas carré. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
}

/* UNE BANDE QUI DÉFILE ROGNE CE QUI DÉPASSE D'ELLE — y compris la zone de
   contact de ses propres boutons : `overflow-x:auto` rend `overflow-y`
   calculé à `auto`, donc coupant. Mesuré en 375 px : le bouton « Mois »
   tombait à 38 px parce que sa bande n'en faisait que 37. Une bande de
   contrôles fait donc au moins 44 px de haut. */
.ag-modes, #ctc-dossiers, .barre-outils {
  min-height: 44px; align-items: center;
}

/* `.petit` doit rester petit — c'est sa raison d'être : il vit dans une
   rangée de tableau, où 44 px de haut multiplieraient la hauteur de la
   liste. Il reçoit donc la ZONE DE CONTACT, pas la taille. */
.bouton.petit { min-height: 0; position: relative; }
.bouton.petit::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}

/* ===================================================================
   CE QU'UNE FICHE ATTEND D'UN HUMAIN
   -------------------------------------------------------------------
   Une marque « à qualifier » n'est pas une alerte : rien n'est cassé.
   Elle n'est pas non plus une étiquette décorative : quelqu'un doit
   trancher. Elle prend donc la forme d'une mention sobre, en tête de
   fiche, dans la teinte d'attention — et jamais celle de l'erreur.
   =================================================================== */

/* AUCUNE COULEUR D'INTENTION ICI. Le rouge dirait « c'est cassé », et
   rien n'est cassé : quelque chose attend une décision. La mention se
   signale par sa FORME — capitales, filet, place en tête — et par ses
   mots. Un état porté par la seule teinte se perdrait de toute façon
   au premier daltonien et au premier changement de thème. */
.proj-qualifier, .rd-qualifier {
  display: block; font-size: var(--t-12); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--encre-2);
  border-left: 3px solid var(--trait-fort); padding-left: var(--e2);
  margin-bottom: var(--e2);
  /* Un nom long ne doit pas casser la carte : il se coupe, et le titre
     complet reste atteignable au survol. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Porter n'est pas instruire : la mention se lit sous le nom, en
   secondaire, parce qu'elle qualifie le sujet sans le résumer. */
.rd-porteuse {
  margin: 0 0 var(--e2); font-size: var(--t-12); color: var(--encre-2);
}
.rd-porteuse .vide { font-style: italic; }

/* ===================================================================
   LE PROGRAMME CADRE, IL NE FUSIONNE PAS
   -------------------------------------------------------------------
   Il porte son nom, son porteur, son jalon commun, et une ligne de
   STATUTS. Rien d'autre : les sujets gardent chacun leur carte, leurs
   verrous, leurs critères et leurs calculs. Une vue qui rangerait les
   cinq sujets dans un même tableau de résultats finirait par se lire
   comme un seul objet — et c'est précisément ce qu'ils ne sont pas.
   =================================================================== */

.rd-programme-somme {
  margin: 0 0 var(--e2); font-size: var(--t-13); color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
/* La phrase qui dit ce que la ligne EST. Sans elle, une suite de
   comptes se lit comme un resultat consolide — exactement ce qu'un
   programme ne doit jamais donner a croire. */
.rd-somme-note { color: var(--encre-3); }

/* ===================================================================
   CONTACTS — UN CARNET SE LIT EN RANGÉES
   -------------------------------------------------------------------
   MESURE : en vignettes de 220 px, « ABOUMOUSSA » se coupait en trois
   lignes. Le nom est ce qu'on cherche ; c'est lui qui cassait.

   Une rangée occupe la largeur. Le nom a la place qu'il demande, la
   société situe la personne, les liens disent ce qui engage, et les
   onze champs d'état civil sont dans la fiche — pas dans la liste.

   La grille reste disponible pour qui la préfère : le mode se choisit
   et se retient. Ce qui change, c'est le DÉFAUT.
   =================================================================== */

/* --- LA BARRE : chercher domine, le reste suit ------------------- */
.ctc-barre {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e2); margin-bottom: var(--e3); position: relative;
}
.ctc-chercher { flex: 1 1 280px; min-width: 0; }
.ctc-chercher input { width: 100%; }
.ctc-barre select { max-width: 220px; }

/* Le menu secondaire s'ouvre sous son bouton, et se referme en
   cliquant ailleurs — il ne prend jamais la place de la liste. */
.ctc-secondaire {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 2px; padding: var(--e2);
  background: var(--relief); border: 1px solid var(--trait-fort);
  border-radius: var(--r); box-shadow: 0 6px 20px var(--ombre-bord);
  min-width: 220px;
}
.ctc-secondaire[hidden] { display: none; }
.ctc-secondaire .lien { text-align: left; }

/* --- LES DOSSIERS : un rangement, en bande ----------------------- */
/* `#ctc-dossiers` EST UN SELECTEUR D'ID : il pese 100, ma classe pese
   10, et il gagne quelle que soit sa place dans la feuille. Mesure a
   l'ecran : la bande s'affichait en colonne, « Tous les contacts »
   centre en gros bouton et « Contacts historiques » dessous. On ecrit
   donc l'ID ici aussi — non par gout, mais parce que la cascade ne se
   contourne pas par l'ordre. */
#ctc-dossiers.ctc-dossiers-bande {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  gap: var(--e1); overflow-x: auto; padding-bottom: var(--e1);
  margin-bottom: var(--e3);
  border-bottom: 1px solid var(--trait);
}
#ctc-dossiers.ctc-dossiers-bande .ctc-dossier {
  /* 44 px : mesure au navigateur, la puce faisait 40 px. Une bande qui
     defile rogne la zone de contact de ses boutons — c'est la boite
     elle-meme qui doit atteindre le seuil. */
  flex: 0 0 auto; width: auto; white-space: nowrap; min-height: 44px;
}

/* La société se clique : elle situe, donc elle regroupe. Elle garde la
   taille et la couleur du texte secondaire — la transformer en bouton
   ferait de chaque rangée une barre d'outils. Seul le soulignement au
   survol dit qu'elle agit.

   Sa zone de contact de 44 px est CONSERVÉE : elle est invisible et ne
   décale rien. La retirer rendrait ce lien intouchable au doigt, et
   c'est précisément ce qu'on vient de corriger partout ailleurs. */
.ctc-societe {
  font: inherit; color: inherit; text-decoration: none;
  padding: 0; min-height: 0; display: inline; text-align: left;
}
.ctc-societe:hover { color: var(--accent); text-decoration: underline; }

/* --- LES RANGÉES ------------------------------------------------- */
.ctc-corps[data-mode="liste"] { display: block; }
.ctc-rangs {
  border: 1px solid var(--trait); border-radius: var(--r);
  overflow: hidden; background: var(--carte);
}
.ctc-rang {
  display: grid;
  /* case · initiales · identité · joindre · liens · marques · outils.
     L'identité prend le reste : c'est elle qu'on lit. */
  grid-template-columns:
    auto auto minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.4fr) auto auto;
  align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--trait);
  cursor: pointer; min-height: 56px;
}
.ctc-rang:first-child { border-top: 0; }
.ctc-rang:hover { background: var(--survol); }
.ctc-rang:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* Les initiales ne sont pas une photo : elles ne prétendent pas en
   être une. Un disque sobre, du nom qui est écrit juste à côté. */
.ctc-avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-doux); color: var(--encre-2);
  font-size: var(--t-12); font-weight: 700; letter-spacing: .02em;
}

.ctc-ident { display: flex; flex-direction: column; min-width: 0; }
.ctc-nom {
  font-weight: 600; color: var(--encre);
  /* Le nom peut passer à la ligne — il ne se coupe PAS au milieu d'un
     mot, qui était précisément le défaut mesuré. */
  overflow-wrap: normal; word-break: keep-all;
}
.ctc-situe {
  font-size: var(--t-12); color: var(--encre-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctc-situe.vide { font-style: italic; color: var(--encre-3); }

.ctc-joindre-z {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1);
  min-width: 0; font-size: var(--t-12);
}
.ctc-joindre {
  /* Mesure au navigateur : 19 px sous 900 px. L'adresse et le numero
     passent alors sur deux lignes, et leurs zones de contact de 44 px
     se recouvraient — chacune rognait celle de l'autre. La boite prend
     donc la hauteur elle-meme : deux boites de 44 px ne se marchent
     pas dessus, deux zones de 44 px autour de boites de 19 px si. */
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.ctc-joindre:hover { text-decoration: underline; }
.ctc-sep { color: var(--encre-3); }

/* Les liens : ce qui engage d'abord, le volume ensuite. Le poids ne
   vient pas de la couleur seule — le mot le dit aussi. */
.ctc-liens-z {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1);
}
.ctc-compte {
  font-size: var(--t-11); padding: 2px 8px; border-radius: var(--r);
  background: var(--absent-fond); color: var(--encre-2);
  white-space: nowrap;
}
.ctc-compte[data-vif="1"] {
  background: var(--alerte-fond); color: var(--alerte);
  font-weight: 700;
}
/* Porteur, instructeur : le rôle R&D se lit depuis le carnet. */
.ctc-role {
  font-size: var(--t-11); padding: 2px 8px; border-radius: var(--r);
  background: var(--accent-doux); color: var(--encre-2);
  font-weight: 700; text-transform: capitalize; white-space: nowrap;
}

.ctc-marques-z, .ctc-outils-z {
  display: flex; align-items: center; gap: var(--e1);
}
/* Les outils n'apparaissent qu'au survol ou au clavier : une rangée
   couverte de boutons se lit moins bien qu'une rangée de texte. Ils
   restent toujours accessibles au clavier, jamais masqués à un lecteur
   d'écran — `visibility` les retirerait de l'ordre de tabulation. */
.ctc-outils-z { opacity: 0; transition: opacity var(--duree-survol, .12s); }
.ctc-rang:hover .ctc-outils-z,
.ctc-rang:focus-within .ctc-outils-z { opacity: 1; }
@media (hover: none) {
  /* Au doigt il n'y a pas de survol : les outils restent visibles. */
  .ctc-outils-z { opacity: 1; }
}

/* --- LE TIROIR N'ÉCRASE PLUS LA LISTE ---------------------------- */
/* Sur un écran large, la fiche s'ouvre À CÔTÉ de la liste plutôt que
   PAR-DESSUS : comparer deux personnes demande de voir les deux. */
@media (min-width: 1280px) {
  body:has(#tiroir[data-ouvert="1"]) #vue[data-vue="contacts"] {
    padding-right: min(460px, 40vw);
  }
}

/* --- PETITS ÉCRANS ----------------------------------------------- */
/* En dessous de 1100 px, les colonnes de liens et de marques passent
   sous l'identité : les comprimer les rendrait illisibles sans les
   rendre plus courtes. */
@media (max-width: 1100px) {
  .ctc-rang {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "case avatar ident   outils"
      ".    .      marques marques"
      ".    .      joindre joindre"
      ".    .      liens   liens";
    row-gap: var(--e1);
  }
  .ctc-rang > .ctc-case-l { grid-area: case; }
  .ctc-avatar { grid-area: avatar; }
  .ctc-ident { grid-area: ident; }
  .ctc-joindre-z { grid-area: joindre; }
  .ctc-liens-z { grid-area: liens; }
  .ctc-outils-z { grid-area: outils; opacity: 1; }
  /* LES MARQUES NE DISPARAISSENT PAS. Elles passent sous l'identité,
     qu'elles qualifient. Les masquer au petit écran effacerait
     « Identité à confirmer » — c'est-à-dire précisément ce qu'on avait
     mis là pour cesser de présenter comme établi ce qui ne l'est pas. */
  .ctc-marques-z { grid-area: marques; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .ctc-rang { gap: var(--e2); padding: var(--e2); }
  .ctc-avatar { width: 30px; height: 30px; }
  .ctc-barre select { max-width: 100%; flex: 1 1 160px; }
  .ctc-secondaire { left: 0; right: 0; min-width: 0; }
}

/* ===================================================================
   LES DOCUMENTS D'UN SUJET — VOIR AVANT D'OUVRIR
   -------------------------------------------------------------------
   La liste était sept liens de texte nu : rien ne distinguait une
   proposition d'un cahier d'expérimentation avant de l'avoir ouvert.
   Une vignette de la première page le dit d'un coup d'œil.

   La vignette ne remplace pas le nom, elle l'accompagne : c'est le nom
   qui reste l'intitulé, et la vignette est décorative pour un lecteur
   d'écran. Une image seule ne se cherche pas au clavier.
   =================================================================== */

.rd-docs { list-style: none; margin: var(--e3) 0 0; padding: 0;
  display: grid; gap: var(--e2); }

/* LES DEUX RÈGLES DE L'ANCIENNE LISTE SONT NEUTRALISÉES ICI, PAS
   EFFACÉES PLUS HAUT. Elles décrivaient une liste de liens : un `li` en
   flex avec un filet sous chaque ligne, qui poserait maintenant un trait
   sous chaque carte. Et surtout `overflow-wrap: anywhere` sur `.rd-doc`,
   qui coupe un mot n'importe où — c'est exactement le défaut corrigé
   dans le carnet, et il est hérité par le nom du document. */
.rd-docs li.rd-doc-l {
  display: block; padding: 0; border-bottom: 0;
}
.rd-doc { overflow-wrap: normal; }

/* Toute la carte est le contrôle : viser une vignette de 120 px est
   plus facile que viser une ligne de texte, et un doigt n'a pas à
   choisir entre les deux. */
.rd-doc {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3); align-items: center; width: 100%; text-align: left;
  padding: var(--e2); min-height: 44px;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); cursor: pointer; color: var(--encre);
  font: inherit;
}
.rd-doc:hover { border-color: var(--trait-fort); background: var(--survol); }
.rd-doc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La case garde sa place AVANT que l'image n'arrive : sans hauteur
   fixe, la liste sursauterait à chaque vignette chargée. */
.rd-vg {
  display: grid; place-items: center; overflow: hidden;
  width: 92px; height: 120px; flex: 0 0 auto;
  background: var(--absent-fond); border: 1px solid var(--trait);
  border-radius: var(--r-nul, 3px);
}
.rd-vg img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}
/* Quand il n'y a pas d'image, on dit POURQUOI — « aperçu indisponible »
   pour un format sans pages n'est pas une panne. */
.rd-vg-mot {
  font-size: var(--t-11); color: var(--encre-3); text-align: center;
  padding: 0 6px; line-height: 1.3;
}

.rd-doc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-doc-n {
  font-weight: 600;
  /* Un nom de document est long et porte ses points : il passe à la
     ligne, il ne se coupe pas au milieu d'un mot. */
  overflow-wrap: break-word; word-break: normal;
}

@media (max-width: 560px) {
  .rd-vg { width: 68px; height: 88px; }
}

/* ===================================================================
   LA BIBLIOGRAPHIE
   =================================================================== */

/* Le tiroir s'élargit pour une bibliographie : une référence tient mal
   sur 460 px, et la comparer à la suivante demande de les voir. */
#tiroir[data-large="1"] { width: min(720px, 100vw); }

.bb-barre { margin: var(--e3) 0 var(--e2); }
.bb-barre input { width: 100%; }

.bb-filtres {
  display: flex; flex-wrap: wrap; gap: var(--e1); margin-bottom: var(--e3);
}
.bb-f {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 var(--e2); background: none; border: 1px solid var(--trait);
  border-radius: var(--r); color: var(--encre-2); cursor: pointer;
  font: inherit; font-size: var(--t-12);
}
.bb-f:hover { background: var(--survol); }
.bb-f[aria-pressed="true"] {
  background: var(--accent-doux); border-color: var(--accent);
  color: var(--encre); font-weight: 600;
}
.bb-n {
  font-size: var(--t-11); font-weight: 700; padding: 1px 6px;
  border-radius: var(--r); background: var(--absent-fond);
}

.bb-liste { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--e3); }
.bb-liste-page { max-width: 900px; }
.bb-r {
  padding: var(--e3); background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r);
}
.bb-t { font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
.bb-m {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin-top: 4px; font-size: var(--t-12); color: var(--encre-2);
}
.bb-doi { font-family: var(--pile-chiffre, inherit); }
.bb-role {
  font-size: var(--t-11); font-weight: 700; padding: 2px 8px;
  border-radius: var(--r); background: var(--accent-doux);
}
.bb-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e1) var(--e3); margin-top: var(--e2);
}
/* Dire l'absence du texte intégral une fois par référence, en gris :
   c'est une information constante, pas une alerte. */
.bb-integral {
  margin: var(--e2) 0 0; font-size: var(--t-11); color: var(--encre-3);
}
.bb-avert {
  margin: var(--e2) 0 0; padding: var(--e2);
  font-size: var(--t-12); color: var(--encre-2);
  background: var(--absent-fond); border-radius: var(--r);
}
.bb-brut {
  padding: var(--e2); background: var(--absent-fond);
  border-radius: var(--r); font-size: var(--t-13); line-height: 1.5;
  overflow-wrap: break-word;
}
.bb-projets {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1);
  margin-top: var(--e2);
}
.bb-projets .ctc-role { cursor: pointer; border: 0; font: inherit;
  font-size: var(--t-11); font-weight: 700; }
.bb-objet { margin-top: var(--e4); }
.bb-r-court { padding: var(--e2); }

@media (max-width: 700px) {
  #tiroir[data-large="1"] { width: 100vw; }
  .cp-tete { flex-direction: column; align-items: stretch; }
  .cp-biblio { justify-content: center; }
}

/* ===================================================================
   LA BIBLIOGRAPHIE
   =================================================================== */

/* Le tiroir s'élargit pour une bibliographie : une référence tient mal
   sur 460 px, et la comparer à la suivante demande de les voir. */
#tiroir[data-large="1"] { width: min(720px, 100vw); }

.bb-barre { margin: var(--e3) 0 var(--e2); }
.bb-barre input { width: 100%; }

.bb-filtres {
  display: flex; flex-wrap: wrap; gap: var(--e1); margin-bottom: var(--e3);
}
.bb-f {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 var(--e2); background: none; border: 1px solid var(--trait);
  border-radius: var(--r); color: var(--encre-2); cursor: pointer;
  font: inherit; font-size: var(--t-12);
}
.bb-f:hover { background: var(--survol); }
.bb-f[aria-pressed="true"] {
  background: var(--accent-doux); border-color: var(--accent);
  color: var(--encre); font-weight: 600;
}
.bb-n {
  font-size: var(--t-11); font-weight: 700; padding: 1px 6px;
  border-radius: var(--r); background: var(--absent-fond);
}

.bb-liste { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--e3); }
.bb-liste-page { max-width: 900px; }
.bb-r {
  padding: var(--e3); background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r);
}
.bb-t { font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
.bb-m {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin-top: 4px; font-size: var(--t-12); color: var(--encre-2);
}
.bb-doi { font-family: var(--pile-chiffre, inherit); }
.bb-role {
  font-size: var(--t-11); font-weight: 700; padding: 2px 8px;
  border-radius: var(--r); background: var(--accent-doux);
}
.bb-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e1) var(--e3); margin-top: var(--e2);
}
/* Dire l'absence du texte intégral une fois par référence, en gris :
   c'est une information constante, pas une alerte. */
.bb-integral {
  margin: var(--e2) 0 0; font-size: var(--t-11); color: var(--encre-3);
}
.bb-avert {
  margin: var(--e2) 0 0; padding: var(--e2);
  font-size: var(--t-12); color: var(--encre-2);
  background: var(--absent-fond); border-radius: var(--r);
}
.bb-brut {
  padding: var(--e2); background: var(--absent-fond);
  border-radius: var(--r); font-size: var(--t-13); line-height: 1.5;
  overflow-wrap: break-word;
}
.bb-projets {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1);
  margin-top: var(--e2);
}
.bb-projets .ctc-role { cursor: pointer; border: 0; font: inherit;
  font-size: var(--t-11); font-weight: 700; }
.bb-objet { margin-top: var(--e4); }
.bb-r-court { padding: var(--e2); }

@media (max-width: 700px) {
  #tiroir[data-large="1"] { width: 100vw; }
  .cp-tete { flex-direction: column; align-items: stretch; }
  .cp-biblio { justify-content: center; }
}

/* --- LES HUIT BLOCS ---------------------------------------------- */
/* L'ordre est celui des questions qu'on se pose. Chaque bloc dit ce
   qu'il répond : sans ce sous-titre, huit sections se ressemblent. */
.cp-blocs { max-width: 900px; }
.cp-sous {
  margin: -4px 0 var(--e3); font-size: var(--t-13); color: var(--encre-3);
}
.cp-verrou {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--e3); margin-bottom: var(--e3);
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 3px solid var(--alerte); border-radius: var(--r);
}

/* Le schéma principal se montre EN GRAND. Un schéma de principe qu'il
   faut agrandir pour lire n'explique rien. */
.cp-principale { margin: 0 0 var(--e4); }
.cp-vg-grande { max-height: none; }
.cp-vg-grande img { width: 100%; height: auto; }
.cp-principale figcaption {
  display: flex; flex-direction: column; gap: 4px; margin-top: var(--e2);
}

/* ===================================================================
   COMPRENDRE UN SUJET — trois profondeurs, une provenance partout
   -------------------------------------------------------------------
   Rien ici n'est décoratif. Chaque marque dit une chose vérifiable :
   d'où vient un texte, d'où vient une figure, ce qui est mesuré et ce
   qui ne l'est pas.

   LA DISTINCTION QUI COMPTE : « Source documentaire » et
   « Visualisation Pulse » ne se ressemblent pas. Elle ne repose PAS
   sur la seule couleur — le mot le dit aussi, et le mot survit au
   thème comme au daltonisme.
   =================================================================== */

.cp-tete {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--e3);
  margin-bottom: var(--e4);
}

/* Les trois profondeurs. Le chiffre les ordonne : on descend, on ne
   choisit pas entre trois options équivalentes. */
.cp-profondeurs { display: flex; flex-wrap: wrap; gap: var(--e1); }
.cp-profondeurs button {
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: 44px; padding: 0 var(--e3);
  background: none; border: 1px solid var(--trait);
  border-radius: var(--r); color: var(--encre-2);
  cursor: pointer; font: inherit;
}
.cp-profondeurs button:hover { background: var(--survol); }
.cp-profondeurs button[aria-selected="true"] {
  background: var(--accent-doux); color: var(--encre);
  border-color: var(--accent); font-weight: 600;
}
.cp-n {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--trait); color: var(--encre-2);
  font-size: var(--t-11); font-weight: 700;
}
.cp-profondeurs button[aria-selected="true"] .cp-n {
  background: var(--accent); color: var(--sur-accent);
}

.cp-biblio { display: inline-flex; align-items: center; gap: var(--e2); }
.cp-compte {
  font-size: var(--t-11); font-weight: 700; padding: 2px 8px;
  border-radius: var(--r); background: var(--accent-doux);
  color: var(--encre-2);
}

/* --- LES TRENTE SECONDES ----------------------------------------- */
.cp-30 { max-width: var(--colonne-texte, 68ch); }
.cp-p { margin: 0 0 var(--e3); line-height: 1.6; }

/* La provenance suit le texte, en retrait : elle ne se lit pas d'abord,
   mais elle est toujours là. */
.cp-prov {
  display: block; margin-top: 4px;
  font-size: var(--t-11); color: var(--encre-3);
}
.cp-prov .lien { font-size: var(--t-11); }
.cp-pulse { font-style: italic; }

.cp-cartes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3); margin-top: var(--e5);
}
.cp-carte {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: var(--e3); min-height: 44px;
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 3px solid var(--accent); border-radius: var(--r);
  color: var(--encre); font: inherit;
}
button.cp-carte { cursor: pointer; }
button.cp-carte:hover { border-color: var(--trait-fort);
  background: var(--survol); }
.cp-carte-t {
  font-size: var(--t-11); text-transform: uppercase;
  letter-spacing: .04em; color: var(--encre-3);
}
.cp-carte-v { font-weight: 600; }
.cp-carte-d { font-size: var(--t-12); color: var(--encre-2); }

/* --- COMPRENDRE --------------------------------------------------- */
.cp-bloc { margin-bottom: var(--e6); }
.cp-bloc h3 {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e2);
}
.cp-2 .cp-p, .cp-3 .cp-p { max-width: var(--colonne-texte, 68ch); }

/* Les chiffres s'alignent au chiffre : sinon on ne les compare pas, on
   les lit un par un. */
.cp-chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e2);
}
.cp-chiffre {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e3); background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r);
}
.cp-ch-g { font-size: var(--t-12); color: var(--encre-2); }
.cp-ch-v {
  font-size: var(--t-26); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cp-ch-v small { font-size: var(--t-14); font-weight: 400;
  color: var(--encre-2); }
.cp-ch-e, .cp-ch-s { font-size: var(--t-11); color: var(--encre-3); }
/* L'état se lit dans le MOT, pas dans le filet : celui-ci ne fait que
   confirmer ce que la ligne dit déjà. */
.cp-chiffre[data-etat="franchi"] { border-left: 3px solid var(--reel); }
.cp-chiffre[data-etat="non_franchi"] { border-left: 3px solid var(--alerte); }
.cp-chiffre[data-etat="etabli"] { border-left: 3px solid var(--absent); }

/* --- LES SCHÉMAS -------------------------------------------------- */
.cp-schemas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e4);
}
.cp-schema { margin: 0; }
.cp-vg {
  display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--absent-fond); border: 1px solid var(--trait);
  border-radius: var(--r); overflow: hidden; min-height: 44px;
}
.cp-vg:hover { border-color: var(--trait-fort); }
.cp-vg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-vg img { display: block; width: 100%; height: auto; }
.cp-vg-mot {
  display: grid; place-items: center; min-height: 120px;
  font-size: var(--t-11); color: var(--encre-3);
}
.cp-schema figcaption {
  display: flex; flex-direction: column; gap: 4px; margin-top: var(--e2);
}
.cp-lg { font-size: var(--t-13); line-height: 1.4; }
.cp-src { font-size: var(--t-11); color: var(--encre-3); }

.cp-grand { margin: var(--e3) 0; }
.cp-grand img {
  width: 100%; height: auto; border: 1px solid var(--trait);
  border-radius: var(--r); background: var(--carte);
}

/* Un diagramme tracé par Pulse le DIT. La mention est dans le titre,
   pas dans une nuance de fond. */
.cp-diag h3 .etiq { font-size: var(--t-11); }
.cp-fonde {
  margin-top: var(--e2); font-size: var(--t-11); color: var(--encre-3);
  font-style: italic;
}

/* --- LE GLOSSAIRE ------------------------------------------------- */
.cp-glos { margin: 0; display: grid; gap: var(--e3); }
.cp-glos dt { font-weight: 600; }
.cp-glos dd { margin: 2px 0 0; color: var(--encre-2); line-height: 1.5; }

/* ===================================================================
   LA BIBLIOGRAPHIE
   =================================================================== */

/* Le tiroir s'élargit pour une bibliographie : une référence tient mal
   sur 460 px, et la comparer à la suivante demande de les voir. */
#tiroir[data-large="1"] { width: min(720px, 100vw); }

.bb-barre { margin: var(--e3) 0 var(--e2); }
.bb-barre input { width: 100%; }

.bb-filtres {
  display: flex; flex-wrap: wrap; gap: var(--e1); margin-bottom: var(--e3);
}
.bb-f {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 var(--e2); background: none; border: 1px solid var(--trait);
  border-radius: var(--r); color: var(--encre-2); cursor: pointer;
  font: inherit; font-size: var(--t-12);
}
.bb-f:hover { background: var(--survol); }
.bb-f[aria-pressed="true"] {
  background: var(--accent-doux); border-color: var(--accent);
  color: var(--encre); font-weight: 600;
}
.bb-n {
  font-size: var(--t-11); font-weight: 700; padding: 1px 6px;
  border-radius: var(--r); background: var(--absent-fond);
}

.bb-liste { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--e3); }
.bb-liste-page { max-width: 900px; }
.bb-r {
  padding: var(--e3); background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r);
}
.bb-t { font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
.bb-m {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin-top: 4px; font-size: var(--t-12); color: var(--encre-2);
}
.bb-doi { font-family: var(--pile-chiffre, inherit); }
.bb-role {
  font-size: var(--t-11); font-weight: 700; padding: 2px 8px;
  border-radius: var(--r); background: var(--accent-doux);
}
.bb-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e1) var(--e3); margin-top: var(--e2);
}
/* Dire l'absence du texte intégral une fois par référence, en gris :
   c'est une information constante, pas une alerte. */
.bb-integral {
  margin: var(--e2) 0 0; font-size: var(--t-11); color: var(--encre-3);
}
.bb-avert {
  margin: var(--e2) 0 0; padding: var(--e2);
  font-size: var(--t-12); color: var(--encre-2);
  background: var(--absent-fond); border-radius: var(--r);
}
.bb-brut {
  padding: var(--e2); background: var(--absent-fond);
  border-radius: var(--r); font-size: var(--t-13); line-height: 1.5;
  overflow-wrap: break-word;
}
.bb-projets {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1);
  margin-top: var(--e2);
}
.bb-projets .ctc-role { cursor: pointer; border: 0; font: inherit;
  font-size: var(--t-11); font-weight: 700; }
.bb-objet { margin-top: var(--e4); }
.bb-r-court { padding: var(--e2); }

@media (max-width: 700px) {
  #tiroir[data-large="1"] { width: 100vw; }
  .cp-tete { flex-direction: column; align-items: stretch; }
  .cp-biblio { justify-content: center; }
}

/* --- LES HUIT BLOCS ---------------------------------------------- */
/* L'ordre est celui des questions qu'on se pose. Chaque bloc dit ce
   qu'il répond : sans ce sous-titre, huit sections se ressemblent. */
.cp-blocs { max-width: 900px; }
.cp-sous {
  margin: -4px 0 var(--e3); font-size: var(--t-13); color: var(--encre-3);
}
.cp-verrou {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--e3); margin-bottom: var(--e3);
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 3px solid var(--alerte); border-radius: var(--r);
}

/* Le schéma principal se montre EN GRAND. Un schéma de principe qu'il
   faut agrandir pour lire n'explique rien. */
.cp-principale { margin: 0 0 var(--e4); }
.cp-vg-grande { max-height: none; }
.cp-vg-grande img { width: 100%; height: auto; }
.cp-principale figcaption {
  display: flex; flex-direction: column; gap: 4px; margin-top: var(--e2);
}

/* Les filtres se groupent par ce qu'ils filtrent. Trois rangées sans
   étiquette se liraient comme une seule longue liste de mots. */
.bb-groupe { margin-bottom: var(--e2); }
.bb-g-t {
  display: block; margin-bottom: 4px;
  font-size: var(--t-11); text-transform: uppercase;
  letter-spacing: .04em; color: var(--encre-3);
}
/* Ce qu'une référence dit en plus : combien de fois elle est citée,
   par combien de sujets, et si le corpus la dit vérifiée. Trois
   informations distinctes, en petit — elles complètent, elles ne
   remplacent pas le titre. */
.bb-occ {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  margin-top: var(--e1); font-size: var(--t-11); color: var(--encre-3);
}
.bb-verif { font-style: italic; }


/* ---------- le panneau d'un sujet R&D ---------- */
/* Les compteurs se lisent en diagonale : le nombre d'abord, aligne, et
   le libelle apres. `tabular-nums` pour que 3 et 11 commencent au meme
   endroit — sans quoi la colonne ondule. */
.rd-pts{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2)}
.rd-pt{display:flex;align-items:baseline;gap:var(--e3)}
.rd-pt-n{font-variant-numeric:tabular-nums;font-weight:700;
  min-width:2.2ch;text-align:right;color:var(--encre)}
.rd-pt-l{font-size:var(--t-13);color:var(--encre-2)}
/* L'ALERTE NE PASSE PAS QUE PAR LA COULEUR : le nombre s'epaissit et
   le libelle se souligne. Un seul canal exclurait qui ne distingue pas
   les teintes. */
.rd-pt-alerte .rd-pt-n{color:var(--alerte,var(--encre))}
.rd-pt-alerte .rd-pt-l{text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:3px}
.rd-trl{margin:0;font-size:var(--t-16)}


/* ---------- les agents specialises ---------- */
/* Huit cartes empilees laissaient 65 % de la largeur vide et faisaient
   une page de 1600 px de haut. Une famille par case : la hierarchie
   reste lisible, la largeur sert. */
.ag-grille{ display:grid; gap:var(--e3); align-items:start;
  /* 22rem et non 26 : deux colonnes des 728 px au lieu de 844.
     Une carte d'agent porte un titre court et deux lignes. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr)); }
.ag-famille{ display:flex; flex-direction:column; gap:var(--e2); }
/* Le retrait dit « celui-ci depend de celui du dessus ». Il ne se
   double pas d'une couleur : la relation est structurelle, pas un
   etat. */
.ag-sous{ margin-left:22px; }
/* La cible tient sa hauteur d'elle-meme, pas de ses voisins : la
   grille a resserre les marges qui la lui pretaient, et elle est
   tombee a 35 px. */
.agent-histo{ display:inline-flex; align-items:center; min-height:44px; }


/* ---------- mon compte ---------- */
/* UN CHAMP N'EST PAS PLUS LARGE QUE CE QU'ON Y TAPE. Les trois champs
   de mot de passe s'etiraient sur 1590 px : la place gagnee doit servir
   aux explications, pas a la saisie. 34rem tient une phrase de passe
   de quatre mots sans la couper. */
.mp-cadre .champ-m365 input{ max-width:34rem; }


/* ---------- les partenaires scientifiques ---------- */
/* Des cartes relationnelles sobres : le nom, le type, le rattachement,
   ce que le corpus en dit. Pas de table — la demande l'exclut. */
.pt-cartes{display:grid;gap:var(--e3);align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.pt-carte{display:flex;flex-direction:column;gap:var(--e1);
  text-align:left;font:inherit;cursor:pointer;padding:var(--e3) var(--e4);
  background:var(--carte);color:var(--encre);
  border:1px solid var(--trait);border-left:3px solid var(--violet);
  border-radius:var(--r)}
.pt-carte:hover{background:var(--survol);border-color:var(--trait-fort);
  border-left-color:var(--violet)}
.pt-carte:focus-visible{outline:2px solid var(--marine);outline-offset:2px}
.pt-nom{font-weight:600}
.pt-type{font-size:var(--t-12);letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-2)}
.pt-dom{font-size:var(--t-13);color:var(--encre-2)}
.pt-faits{font-size:var(--t-12);color:var(--encre-3)}
.pt-src{display:block;font-size:var(--t-12);color:var(--encre-3);
  max-width:var(--colonne-texte)}
.pt-gens{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2)}
.pt-gen{display:flex;flex-direction:column}
.pt-gen-n{font-weight:600}
.pt-prog{display:flex;flex-direction:column;gap:2px;
  padding:var(--e2) 0;border-bottom:1px solid var(--trait)}
.pt-prog:last-child{border-bottom:0}
.pt-rel{display:flex;flex-direction:column;gap:3px;
  padding:var(--e2) 0;border-bottom:1px solid var(--trait)}
.pt-rel:last-child{border-bottom:0}
.rd-tete-actions{display:flex;gap:var(--e2);align-items:flex-start;
  flex-wrap:wrap}

/* LE DIAGRAMME DE COLLABORATION. Trois colonnes et des fleches : la
   chaine se lit de gauche a droite, Advens vers ses partenaires vers
   les programmes. Sous 900 px les colonnes s'empilent et les fleches
   tournent — la chaine se lit alors de haut en bas. */
.pt-diag{display:flex;gap:var(--e3);align-items:stretch;
  flex-wrap:wrap;margin-top:var(--e3)}
.pt-diag-col{display:flex;flex-direction:column;gap:var(--e2);
  flex:1 1 14rem;min-width:0}
.pt-diag-titre{font-size:var(--t-11);letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--encre-3)}
.pt-diag-noeud{display:flex;flex-direction:column;gap:2px;
  text-align:left;font:inherit;padding:var(--e2) var(--e3);
  background:var(--carte);color:var(--encre);
  border:1px solid var(--trait-fort);border-radius:var(--r)}
button.pt-diag-noeud{cursor:pointer;min-height:44px}
button.pt-diag-noeud:hover{background:var(--survol)}
button.pt-diag-noeud:focus-visible{outline:2px solid var(--marine);
  outline-offset:2px}
.pt-diag-advens{border-left:3px solid var(--accent)}
.pt-diag-lien{align-self:center;color:var(--encre-3);
  font-size:var(--t-20);flex:none}
@media (max-width:900px){
  .pt-diag{flex-direction:column}
  .pt-diag-lien{transform:rotate(90deg);align-self:flex-start;
    margin-left:var(--e4)}
}