/* Polices hébergées avec l'application (Asap et Asap Condensed, licence SIL OFL 1.1) :
   aucune requête vers un tiers, et l'écran reste identique sans connexion. */
@font-face{font-family:Asap;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/asap-latin-400-normal.245cfa00ed80.woff2") format("woff2")}
@font-face{font-family:Asap;font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/asap-latin-500-normal.e501d90909c0.woff2") format("woff2")}
@font-face{font-family:Asap;font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/asap-latin-600-normal.34a9b4758dab.woff2") format("woff2")}
@font-face{font-family:Asap;font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/asap-latin-700-normal.c1cd13c22d3f.woff2") format("woff2")}
@font-face{font-family:"Asap Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/asap-condensed-latin-600-normal.8968f07236d0.woff2") format("woff2")}
@font-face{font-family:"Asap Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/asap-condensed-latin-700-normal.7ed5693d85a0.woff2") format("woff2")}
/* Système de design Anticip — jetons issus de la charte graphique (Pantone 433C / 165C / 151C)
   et des six gammes complémentaires. Voir « Système de design Anticip ». */
:root{
  --anthracite:#323744; --gris:#81828C; --orange:#F26729; --orange-2:#F58220;
  --action:#B54809; --action-h:#9C3E07;
  --ink:#232733; --ink-2:#4A4E5C; --muted:#6E707B;
  --paper:#F6F6F8; --surface:#fff; --surface-2:#F0F0F3; --rule:#E1E2E7; --rule-2:#CBCDD5;
  --ok:#124734; --ok-bg:#DCF2E7; --ok-line:#6BCDB2;
  --warn:#74531B; --warn-bg:#FCF1D3; --warn-line:#FFBF3C;
  /* Échéance proche — et rien d'autre. L'ambre ci-dessus dit déjà « à questionner » ;
     deux sens sur une même couleur, et la pastille ne veut plus rien dire. */
  --soon:#8A4B12; --soon-bg:#FDE8CE; --soon-line:#F5A04A;
  --crit:#B22A1F; --crit-bg:#F9E4E1; --crit-line:#E0796C;
  --hold:#582C5F; --hold-bg:#EEE7EF; --hold-line:#8F6C95;
  --neu:#323744; --neu-bg:#ECECEF; --neu-line:#B9BBC3;
  --shadow:0 1px 2px rgba(35,39,51,.06), 0 10px 28px -20px rgba(35,39,51,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Asap,"Segoe UI",system-ui,sans-serif;font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--action)}
.bar{display:flex;align-items:center;gap:1.2rem;padding:.7rem clamp(1rem,3vw,2rem);
  background:var(--surface);border-bottom:3px solid var(--orange);position:sticky;top:0;z-index:5}
.lk{font-weight:700;letter-spacing:.05em;color:var(--anthracite);font-size:.95rem;text-decoration:none}
.lk span{font-weight:400;color:var(--gris)}
nav.main{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
nav.main a{font-family:"Asap Condensed",Asap,sans-serif;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;padding:.35rem .6rem;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-.7rem}
nav.main a.on{color:var(--anthracite);border-bottom-color:var(--action)}
main{padding:clamp(1rem,3vw,2rem);max-width:1400px;margin:0 auto}
/* Le kanban prend la largeur de l'écran : sur un grand écran, plus de regroupements d'un coup d'oeil. */
main:has(.kb-wrap){max-width:none;min-width:0}
h1{font-family:"Asap Condensed",Asap,sans-serif;font-weight:700;font-size:1.9rem;line-height:1.1;margin:0 0 .3rem;color:var(--anthracite)}
h2{font-family:"Asap Condensed",Asap,sans-serif;font-weight:700;font-size:1.25rem;margin:1.6rem 0 .6rem;color:var(--anthracite)}
.sub{color:var(--muted);font-size:.92rem;margin:0 0 1.2rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:1.2rem}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:.7rem .8rem;text-decoration:none;color:inherit;display:block}
.tile:hover{border-color:var(--rule-2)}
.tile .lab{display:block;font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile .big{display:block;font-size:1.7rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--anthracite)}
.tile.crit .big{color:var(--crit)} .tile.warn .big{color:var(--warn)} .tile.hold .big{color:var(--hold)}
.tile.soon .big{color:var(--soon)}
/* Le libellé d'une ligne est un lien : il ne se souligne qu'au survol, mais un chevron dit qu'on peut l'ouvrir. */
.lien-fiche{color:inherit;text-decoration:none}
.lien-fiche::after{content:"\203A";margin-left:.45rem;color:var(--muted);font-weight:700}
.lien-fiche:hover,.lien-fiche:focus-visible{text-decoration:underline;text-decoration-color:var(--action);text-underline-offset:3px}
.tile .big:has(+ .seuil){display:inline-block}
.tile .seuil{display:inline-block;font-size:.78rem;color:var(--ink-2);margin-left:.45rem}
form.filtres{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-bottom:1rem;
  background:var(--surface);border:1px solid var(--rule);padding:.8rem;border-radius:5px}
form.filtres label{display:block;font-family:"Asap Condensed",Asap,sans-serif;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
form.filtres input,form.filtres select{font-family:Asap,sans-serif;font-size:.95rem;padding:.4rem .5rem;
  border:1px solid var(--rule-2);border-radius:4px;background:var(--surface);color:var(--ink);max-width:230px}
form.filtres input,form.filtres select,form.filtres .btn,form.filtres button{box-sizing:border-box;height:2.15rem;line-height:1.2}
form.filtres .btn,form.filtres button{display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
form.filtres input:focus,form.filtres select:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--anthracite)}
.btn{font-family:Asap,sans-serif;font-size:.92rem;font-weight:600;border-radius:4px;padding:.45rem .9rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
.btn-primary{background:var(--action);color:#fff}.btn-primary:hover{background:var(--action-h)}
.btn-secondary{background:var(--surface);color:var(--anthracite);border-color:var(--rule-2)}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);border-radius:5px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
thead th{font-family:"Asap Condensed",Asap,sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:left;color:var(--muted);padding:.6rem .7rem;background:var(--surface-2);
  border-bottom:1px solid var(--rule-2);white-space:nowrap}
tbody td{padding:.55rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top}
/* Une cellule d'en-tête DANS le corps du tableau nomme sa ligne : elle se lit à
   gauche comme le reste, pas centrée en gras par défaut du navigateur. */
tbody th{padding:.55rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top;
  text-align:left;font-weight:600;color:var(--anthracite)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.id{font-variant-numeric:tabular-nums;font-weight:700;color:var(--anthracite);white-space:nowrap}
td.id a{text-decoration:none;color:inherit}
td.id a:hover{color:var(--action)}
.ref{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.st{display:inline-flex;align-items:center;gap:.35rem;font-family:"Asap Condensed",Asap,sans-serif;font-size:.78rem;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:.15em .5em;border-radius:3px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.st-avenir{background:var(--ok-bg);color:var(--ok)}.st-avenir::before{background:var(--ok-line)}
.st-retard{background:var(--crit-bg);color:var(--crit)}.st-retard::before{background:var(--crit-line)}
.st-proche{background:var(--soon-bg);color:var(--soon)}.st-proche::before{background:var(--soon-line)}
.st-gelee{background:var(--hold-bg);color:var(--hold)}.st-gelee::before{background:var(--hold-line)}
.st-close{background:var(--neu-bg);color:var(--neu)}.st-close::before{background:var(--neu-line)}
.st-ecart{background:var(--warn-bg);color:var(--warn)}.st-ecart::before{background:var(--warn-line)}
/* « À revoir » : le seul objet nouveau du bouclage vers les risques et les
   opportunités. Même palette que les régimes à questionner — c'est la même
   nature de signal, une question posée, pas une faute constatée. */
.st-revoir{background:var(--warn-bg);color:var(--warn)}.st-revoir::before{background:var(--warn-line)}
.st-sans{background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2)}
.st-sans::before{background:transparent;box-shadow:inset 0 0 0 2px var(--rule-2)}
.who{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--anthracite);color:#fff;font-size:.66rem;font-weight:700;margin-right:.15rem}
.who.ref{background:var(--orange)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:1.1rem 1.3rem;margin-bottom:1rem}
/* Un champ masqué l'est vraiment : `.kv > div` pose un display qui, sans
   cette règle, l'emporte sur l'attribut `hidden`. */
[hidden]{display:none !important}
.kv{margin:0}
.kv > div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.6rem;padding:.42rem 0;border-bottom:1px solid var(--rule);font-size:.92rem}
.kv > div:last-child{border-bottom:0}
.kv dt{font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.kv dd{margin:0;min-width:0}
/* Aucun champ ne déborde de sa colonne, quelle que soit la longueur de ses
   options : c'est ce qui tenait la mise en page en otage. */
.kv select,.kv input,.kv textarea{max-width:100%}
.kv select{text-overflow:ellipsis}
.aide-degre{margin:.3rem 0 0;max-width:36rem;line-height:1.4;overflow-wrap:anywhere}
.aide-degre:empty{display:none}
/* Un élément de grille a par défaut une largeur minimale égale à son contenu :
   un menu déroulant aux libellés longs — les échelons de cotation en portent —
   imposait sa largeur à toute la colonne de gauche, et écrasait celle de droite
   jusqu'à un mot par ligne. `minmax(0, …)` rend la colonne compressible, et le
   plancher de 17rem garantit que la colonne de droite reste lisible. */
.grid2{display:grid;grid-template-columns:1fr;gap:1rem}
.grid2 > div{min-width:0}
/* Trois colonnes égales — les trois issues d'un point de revue. */
.grid3{display:grid;grid-template-columns:1fr;gap:1rem}
.grid3 > div{min-width:0}
@media(min-width:900px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.grid2{grid-template-columns:minmax(0,1.6fr) minmax(17rem,1fr)}}
/* Le formulaire de la fiche : la colonne de droite ne porte qu'une liste courte (« Pour
   clôturer », points de vigilance). Elle garde une largeur de lecture, le reste va à la saisie. */
@media(min-width:900px){.grid2.saisie{grid-template-columns:minmax(0,1fr) 16rem}}
.jrnl{list-style:none;padding:0;margin:0;font-size:.87rem;color:var(--ink-2)}
.jrnl li{padding:.3rem 0;border-bottom:1px solid var(--rule)}
.jrnl li:last-child{border-bottom:0}
.jrnl time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem;margin-right:.4rem}
ul.sa{list-style:none;padding:0;margin:0}
ul.sa li{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem 0;border-bottom:1px solid var(--rule);font-size:.92rem}
ul.sa li:last-child{border-bottom:0}
.box{display:inline-block;width:15px;height:15px;border:1.5px solid var(--rule-2);border-radius:3px;flex:0 0 auto;margin-top:.18rem;text-align:center;line-height:12px;font-size:.7rem;color:var(--ok)}
.box.oui{border-color:var(--ok-line);background:var(--ok-bg)}
.box.conf{border-style:dashed}
.hint{color:var(--muted);font-size:.8rem}
.empty{padding:2.5rem;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--rule-2);border-radius:5px}
footer{padding:1.5rem clamp(1rem,3vw,2rem);color:var(--muted);font-size:.8rem;border-top:1px solid var(--rule);margin-top:2rem}

/* --- écriture : la fiche est un formulaire ------------------------------ */
.t0{margin-top:0}
.titre-ligne{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.etroit{max-width:640px}
.badge{display:inline-block;font-family:"Asap Condensed",Asap,sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;background:var(--surface-2);color:var(--anthracite);
  border:1px solid var(--rule-2);border-radius:3px;padding:.1em .5em}
.qui{font-size:.82rem;color:var(--muted);align-self:center;margin-left:.6rem}
.sortir{display:inline;margin-left:.4rem}
.sortir button{font-family:"Asap Condensed",Asap,sans-serif;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;background:none;border:0;color:var(--muted);cursor:pointer;padding:.35rem .3rem}
.sortir button:hover{color:var(--action)}

input[type=text],input[type=search],input[type=password],input[type=date],input[type=number],
select,textarea{font-family:Asap,sans-serif;font-size:.95rem;padding:.38rem .5rem;
  border:1px solid var(--rule-2);border-radius:4px;background:var(--surface);color:var(--ink);max-width:100%}
textarea{line-height:1.45;resize:vertical}
.wide{width:100%}
select[multiple]{min-height:6rem}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--anthracite)}
input[type=checkbox],input[type=radio]{accent-color:var(--action);width:16px;height:16px}
.kv ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.15rem 1rem}
.kv ul li label{font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}
.kv > div.tall{align-items:start}
.kv > div.ko{background:var(--crit-bg);margin:0 -.5rem;padding-left:.5rem;padding-right:.5rem;border-radius:3px}
.kv dd .hint{margin:.15rem 0 0}
.err{color:var(--crit);font-size:.84rem;margin:.2rem 0 0;font-weight:600}
.ok-line{color:var(--ok);font-size:.9rem;margin:0}

.flash{border-radius:4px;padding:.6rem .8rem;margin:0 0 .9rem;font-size:.92rem;border:1px solid}
.flash.success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.flash.error{background:var(--crit-bg);border-color:var(--crit-line);color:var(--crit)}
.flash.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.card.alerte{border-left:4px solid var(--warn-line)}
/* le fil des étapes : où en est la fiche, et quoi faire maintenant */
.cote-neuve{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--rule-2)}
.cote-neuve h3.zone{margin-bottom:.5rem}
details.cote-neuve>summary{cursor:pointer;margin-bottom:.5rem}
details.cote-neuve[open]>summary{margin-bottom:.9rem}
.card.etape{border-left:4px solid var(--orange);padding:.8rem 1.1rem}
.card.etape .flow{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 .5rem}
.card.etape .step{border:1px solid var(--rule-2);border-radius:20px;padding:.15rem .7rem;
  font-family:"Asap Condensed",Asap,sans-serif;font-size:.85rem;font-weight:600;color:var(--muted)}
.card.etape .step.now{background:var(--anthracite);border-color:var(--anthracite);color:#fff}
.card.etape .arrow{color:var(--rule-2);font-weight:700}
.card.etape .etape-txt{margin:0;font-size:.95rem;color:var(--ink-2)}
details.card>summary{cursor:pointer;font-family:"Asap Condensed",Asap,sans-serif;
  font-size:1.1rem;font-weight:700;color:var(--anthracite)}
details.card[open]>summary{margin-bottom:.6rem}
details.card>summary h2{display:inline;margin:0}
/* Tuiles dont le libellé passe sur deux lignes : les nombres restent alignés en bas. */
.tiles.egales .tile{display:flex;flex-direction:column;justify-content:space-between}
/* la grille de cotation, repliée par défaut : elle ne coûte qu'une ligne */
details.grille>summary{cursor:pointer;font-family:"Asap Condensed",Asap,sans-serif;
  font-size:1.02rem;font-weight:700;color:var(--anthracite)}
details.grille[open]>summary{margin-bottom:.7rem}
.duo{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr}}
table.mat{width:100%;border-collapse:collapse;margin:.3rem 0 .2rem}
table.mat th{font-family:"Asap Condensed",Asap,sans-serif;font-size:.8rem;font-weight:600;
  color:var(--ink-2);padding:.3rem .4rem;text-align:left;white-space:nowrap;background:none;
  border:0;text-transform:none;letter-spacing:0}
table.mat thead th{text-align:center;color:var(--muted)}
table.mat td{text-align:center;padding:.25rem;border:0}
.n{display:inline-block;min-width:2.1rem;padding:.2rem .35rem;border-radius:4px;
  font-weight:700;font-variant-numeric:tabular-nums}
.n-crit{background:var(--crit-bg);color:var(--crit)}
.n-warn{background:var(--warn-bg);color:var(--warn)}
.n-ok{background:var(--ok-bg);color:var(--ok)}
.n-neutre{background:var(--surface-2);color:var(--muted)}

.sa-tbl{width:100%;font-size:.9rem}
.sa-tbl thead th{background:transparent;border-bottom:1px solid var(--rule-2);padding:.3rem .4rem .4rem}
.sa-tbl td{padding:.4rem .4rem;border-bottom:1px solid var(--rule);vertical-align:top}
.sa-tbl tr:last-child td{border-bottom:0}
.sa-tbl tr.ko td{background:transparent}
.sa-tbl tr.ko td:first-child{box-shadow:inset 3px 0 0 var(--crit-line)}
.sa-tbl tr.pr td:first-child{box-shadow:inset 3px 0 0 var(--soon-line)}
.sa-tbl th.mini,.sa-tbl td.mini{width:3.5rem;text-align:center}
/* Colonnes courtes (dates, niveaux, états) : centrées et sur une seule ligne. */
.sa-tbl th.c,.sa-tbl td.c{text-align:center;white-space:nowrap}
.sa-tbl select,.sa-tbl input[type=date]{font-size:.88rem;padding:.3rem .35rem}
.sa-tbl .hint{display:block}

.ctrl{list-style:none;margin:.2rem 0 0;padding:0;font-size:.9rem}
.ctrl li{padding:.4rem 0 .4rem .95rem;border-left:3px solid var(--rule-2);margin-bottom:.4rem}
.ctrl li.ko{border-left-color:var(--crit-line);color:var(--crit)}
.ctrl li.warn{border-left-color:var(--warn-line);color:var(--warn)}

.msg{border-left:3px solid var(--rule-2);padding:.1rem 0 .1rem .8rem;margin:0 0 .9rem}
.msg p{margin:0;font-size:.92rem}
.ajout{border-top:1px solid var(--rule);padding-top:.8rem;margin-top:.4rem}
.ajout textarea{margin-bottom:.5rem}
.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 1.2rem}
.jrnl li b{font-family:"Asap Condensed",Asap,sans-serif;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;color:var(--anthracite)}
.jrnl li .hint{display:block}
@media(min-width:900px){.grid2 > div:last-child > .card:last-child{position:sticky;top:5rem}}
ul.liens{list-style:none;margin:.6rem 0 0;padding:0;font-size:.9rem}
ul.liens li{padding:.35rem 0;border-bottom:1px solid var(--rule);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
ul.liens li:last-child{border-bottom:0}
.kv select[multiple]{min-height:8rem}
h3.zone{font-family:"Asap Condensed",Asap,sans-serif;font-size:1.02rem;margin:0 0 .6rem;color:var(--anthracite)}
.sub .badge{margin-right:.3rem}

/* --- mes actions : cocher sans quitter la liste ------------------------- */
/* Le geste le plus fréquent du registre. Depuis cette page il doit tenir en un
   clic et laisser la liste en place — sinon cocher trois lignes demande trois
   allers-retours, et personne ne coche plus rien. */
/* Le tableau des actions se répartit à largeur fixe : sans cela, ce sont les
   menus déroulants qui décident, et la colonne « ce qu'il y a à faire » — la
   seule qu'on lit vraiment — se retrouve la plus étroite. */
table.agir{table-layout:fixed;width:100%}
table.agir .c-quoi{width:44%}table.agir .c-qui{width:19%}
table.agir .c-quand{width:14%}table.agir .c-ou{width:16%}table.agir .c-ret{width:7%}
/* Le libellé d'une action se lit en entier : zone qui grandit avec le texte (le champ
   d'une ligne le coupait à quarante caractères). */
table.agir td textarea{width:100%;min-height:2.6rem;resize:vertical;field-sizing:content;line-height:1.35;overflow:hidden}
table.agir th{white-space:normal}
table.agir td select,table.agir td input{max-width:100%}
table.actions{width:100%}
table.actions td form{margin:0}
/* La case porte une coche pâle même vide : un carré sans rien dedans ne dit
   pas qu'il se clique. */
.coche{width:1.7rem;height:1.7rem;border-radius:4px;border:1px solid var(--rule-2);
  background:var(--surface);color:var(--rule-2);cursor:pointer;font-weight:700;line-height:1;
  font-size:.95rem;padding:0}
.coche:hover{border-color:var(--ok);color:var(--ok)}
.coche.faite{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.coche:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
table.actions tr.ko td{background:transparent}
table.actions tr.ko td:first-child{box-shadow:inset 3px 0 0 var(--crit-line)}
table.actions td .hint{display:block}

/* --- les champs à cases à cocher, repliés sur ce qu'ils retiennent ------ */
/* Quatre listes — processus secondaires, domaines, axes de politique,
   contributeurs — occupaient à elles seules la moitié de la fiche, presque
   toujours pour montrer des cases vides. Repliées, elles tiennent sur une
   ligne qui dit ce qui est retenu ; ouvertes, elles n'ont rien perdu. */
details.choix > summary{cursor:pointer;list-style:none;padding:.15rem .5rem .15rem 1.1rem;
  border:1px solid var(--rule-2);border-radius:4px;background:var(--surface);
  position:relative;line-height:1.5}
details.choix > summary::-webkit-details-marker{display:none}
details.choix > summary::before{content:"\25B8";position:absolute;left:.4rem;color:var(--muted);
  font-size:.7rem;top:.35rem}
details.choix[open] > summary::before{content:"\25BE"}
details.choix > summary:hover{border-color:var(--action);color:var(--action)}
details.choix > summary .rien{color:var(--muted);font-style:italic}
/* Le pli du bloc Qualifier. Une ligne sobre : elle dit ce qui manque, pas ce
   qu'on a caché — un pli qui crie est un pli qu'on rouvre pour rien. */
details.qualif{margin-top:.6rem;border-top:1px solid var(--rule);padding-top:.5rem}
details.qualif > summary{cursor:pointer;font-size:.88rem;color:var(--ink-2);
  padding:.15rem 0;list-style:none;position:relative;padding-left:1rem}
details.qualif > summary::-webkit-details-marker{display:none}
details.qualif > summary::before{content:"\25B8";position:absolute;left:0;color:var(--muted)}
details.qualif[open] > summary::before{content:"\25BE"}
details.qualif > summary:hover{color:var(--action)}
details.qualif[open] > summary{margin-bottom:.4rem}
details.qualif .kv{margin-top:0}
details.choix[open] > summary{margin-bottom:.45rem}
details.choix ul{padding:.1rem 0 .2rem .2rem}

/* --- les critères de l'échelle, écrits plutôt que survolés -------------- */
/* Ils vivaient dans un attribut `title` : invisibles à qui ne survole pas,
   invisibles sur un écran tactile, invisibles à l'impression. Or c'est ce
   qu'un auditeur demande à voir — sur quoi cotez-vous ? */
dl.criteres{margin:.9rem 0 0;font-size:.8rem}
dl.criteres .axe{font-family:"Asap Condensed",Asap,sans-serif;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.06em;color:var(--muted);margin:0 0 .25rem}
dl.criteres dd{margin:0 0 .25rem;padding-left:2.2rem;text-indent:-2.2rem;color:var(--muted);line-height:1.4}
dl.criteres dd strong{color:var(--anthracite)}
dl.criteres .ech{display:inline-block;width:1.5rem;margin-right:.55rem;text-indent:0;
  text-align:center;border-radius:3px;background:var(--surface-2);color:var(--muted);
  font-weight:700;font-variant-numeric:tabular-nums;font-size:.82rem}

/* la nature, tranchée dans le bloc Analyser plutôt que dans la décision */
.kv.nature{margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--rule)}

/* --- l'état de la fiche : des gestes, pas un menu déroulant -------------- */
/* Geler et clore sortent du formulaire de saisie : ils se posent, ils ne se
   choisissent pas dans une liste. Deux colonnes côte à côte, chacune avec sa
   phrase et son motif — la clôture d'abord, parce que c'est celle qu'on
   cherche ; le gel ensuite, parce que c'est celle qu'on regrette. */
.card.etat{border-left:4px solid var(--rule-2)}
.card.etat .gestes{display:grid;gap:1.1rem}
@media(min-width:760px){.card.etat .gestes{grid-template-columns:1fr 1fr;gap:1.6rem}}
.card.etat .gestes .geste + .geste{border-left:0;border-top:1px solid var(--rule);padding-top:1rem}
@media(min-width:760px){.card.etat .gestes .geste + .geste{border-top:0;border-left:1px solid var(--rule);padding-top:0;padding-left:1.6rem}}
.card.etat .geste .hint{margin:0 0 .6rem}
.card.etat .geste input[type=text]{margin-bottom:.6rem}
.card.etat .btn[disabled]{opacity:.45;cursor:not-allowed}

/* --- tri du registre : l'en-tête est un lien, l'état de tri se voit ------ */
thead th a.th-tri{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:.35rem}
thead th a.th-tri:hover{color:var(--action)}
thead th a.th-tri .fl{font-size:.72em;color:var(--rule-2);font-variant-numeric:tabular-nums}
thead th a.th-tri:hover .fl{color:var(--action)}
/* La double flèche des colonnes non triées ressemblait à des deux-points : elle n'apparaît qu'au survol. */
thead th:not(.trie) a.th-tri .fl{visibility:hidden}
thead th:not(.trie) a.th-tri:hover .fl,thead th:not(.trie) a.th-tri:focus-visible .fl{visibility:visible}
thead th a.th-tri:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px}
thead th.trie{color:var(--anthracite);background:var(--surface)}
thead th.trie a.th-tri .fl{color:var(--action)}


/* --- kanban : la même liste, rangée en colonnes -------------------------
   Pas de glisser-déposer, donc aucun affordance de préhension : une carte est
   un lien vers la fiche, et rien d'autre. Les colonnes défilent
   horizontalement, jamais la page. */
.titre-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.kb-barre{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.kb-onglets{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.kb-lab{font-family:"Asap Condensed",Asap,sans-serif;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-right:.3rem}
.kb-onglet{font-family:"Asap Condensed",Asap,sans-serif;font-size:.84rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--muted);
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:.3rem .7rem}
.kb-onglet:hover{border-color:var(--rule-2);color:var(--anthracite)}
.kb-onglet.on{background:var(--anthracite);border-color:var(--anthracite);color:#fff}
.kb-onglet:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.kb-closes{margin-left:auto;font-size:.85rem;color:var(--action)}
.kb-filtres{margin-bottom:.8rem}
.kb-filtres > summary{cursor:pointer;font-family:"Asap Condensed",Asap,sans-serif;font-size:.84rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted);
  padding:.3rem 0;list-style-position:inside}
.kb-filtres > summary:hover{color:var(--anthracite)}
.kb-filtres[open] > summary{color:var(--anthracite)}
.kb-filtres form.filtres{margin-top:.4rem}
/* Le tableau est une fenêtre, pas une page qui s'allonge : il occupe ce qui
   reste de l'écran et défile à l'intérieur, dans les deux sens. C'est ce qui
   permet aux noms de colonnes de rester en vue — une colonne de vingt cartes
   dont on ne lit plus le titre ne dit plus de quoi elle parle.

   `position: sticky` se cale sur le conteneur qui défile : il faut donc que ce
   soit CE bloc-là, et pas la page. D'où la hauteur bornée. */
.kb-wrap{overflow:auto;padding-bottom:.6rem;max-height:calc(100dvh - 17rem);min-height:22rem;
  overscroll-behavior:contain}
.kb{display:flex;gap:.7rem;align-items:flex-start;min-width:min-content}
.kb-col{flex:0 0 clamp(240px,22vw,300px);background:var(--surface-2);border:1px solid var(--rule);
  border-radius:5px;padding:0 .6rem .6rem;max-height:none}
.kb-col.vide{background:var(--surface);border-style:dashed}
/* L'en-tête reste en haut de la fenêtre de défilement. Il est opaque et déborde
   sur les côtés (marges négatives) pour que les cartes passent dessous sans
   laisser voir un liseré du fond de colonne. */
.kb-tete{min-height:5.8rem;box-sizing:border-box;align-content:flex-start;position:sticky;top:0;z-index:2;display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap;
  margin:0 -.6rem .5rem;padding:.6rem .6rem .45rem;background:var(--surface-2);
  border-bottom:1px solid var(--rule);border-radius:4px 4px 0 0;
  box-shadow:0 6px 6px -6px rgba(35,39,51,.16)}
.kb-col.vide .kb-tete{background:var(--surface)}
.kb-titre{font-family:"Asap Condensed",Asap,sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--anthracite);margin:0}
.kb-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted);font-size:.9rem}
.kb-detail{flex:1 1 100%;color:var(--muted);font-size:.78rem;line-height:1.3}
.kb-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.kb-carte{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--rule-2);
  border-radius:4px;padding:.55rem .6rem}
.kb-carte:hover{border-color:var(--rule-2);box-shadow:var(--shadow)}
.kb-carte.e-retard{border-left-color:var(--crit-line)}
.kb-carte.e-proche{border-left-color:var(--soon-line)}
.kb-carte.e-avenir{border-left-color:var(--ok-line)}
.kb-carte.e-gelee{border-left-color:var(--hold-line)}
.kb-carte.e-close{border-left-color:var(--neu-line);background:var(--surface-2)}
.kb-lien{display:block;text-decoration:none;color:var(--anthracite)}
.kb-lien:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.kb-num{font-variant-numeric:tabular-nums;font-weight:700;font-size:.8rem;color:var(--muted);margin-right:.35rem}
.kb-libelle{font-weight:600;font-size:.92rem;line-height:1.3}
.kb-lien:hover .kb-libelle{color:var(--action)}
.kb-meta{margin:.25rem 0 0;color:var(--muted);font-size:.78rem}
.kb-etape{margin:.35rem 0 0;font-size:.8rem;color:var(--ink-2);line-height:1.35}
.kb-etape .badge{font-size:.7rem;margin-right:.25rem}
.kb-pied{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin-top:.45rem;
  padding-top:.4rem;border-top:1px solid var(--rule)}
.kb-qui{margin-left:auto;display:flex}
.kb-rien{color:var(--muted);font-size:.82rem;padding:.4rem .1rem}
/* Déposer une carte : seules les colonnes qui portent un champ de la fiche
   s'ouvrent, et elles le montrent — une zone qui accepte tout ferait croire
   que tout se déplace. */
.kb-carte[draggable]{cursor:grab}
.kb-carte[draggable]:active{cursor:grabbing}
.kb-carte.pris{opacity:.45}
.kb-col.depot.survol{background:var(--warn-bg);border-color:var(--orange);
  box-shadow:inset 0 0 0 2px var(--orange)}
.kb-annul{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.kb-annul form{margin-left:auto}

@media(max-width:700px){
  /* Sur un téléphone, une bande de colonnes étroites ne se lit pas : elles
     s'empilent, et c'est la page qui défile — une fenêtre de défilement dans
     une page qui défile déjà est intenable au doigt. Le glissement n'y a pas
     cours non plus : c'est la fiche qui sert, comme au clavier. */
  .kb-wrap{overflow:visible;max-height:none;min-height:0}
  .kb-tete{position:static;margin-bottom:.5rem}
  .kb{flex-direction:column;min-width:0}
  .kb-col{flex:1 1 auto;width:100%}
  .kb-col.vide{display:none}
}


/* --- la revue CAP : un écran qu'on conduit ------------------------------
   Rien ne clignote et rien ne réclame : c'est une liste qu'on descend, point
   par point, pendant une réunion. */
.rv-bloc{margin-top:1.8rem}
.rv-bloc h2{margin-bottom:.2rem}
.rv-n{font-family:Asap,sans-serif;font-size:.9rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;margin-left:.3rem}
.rv-liste{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.rv-point{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--rule-2);
  border-radius:5px;padding:.75rem .9rem}
.rv-point.e-traite{border-left-color:var(--ok-line)}
.rv-point.e-traite .rv-lien{color:var(--muted)}
.rv-point.e-reporte{border-left-color:var(--hold-line);background:var(--surface-2)}
.rv-point.e-non_abordee{border-left-color:var(--rule-2);background:var(--surface-2)}
/* Les trois issues d'un point, à l'écran de clôture : trois choix sur une
   ligne, et rien d'autre. */
.rv-issue{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin-top:.5rem;font-size:.9rem}
.rv-issue label{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.rv-tete{display:flex;gap:.6rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.rv-lien{text-decoration:none;color:var(--anthracite);font-weight:600;font-size:.98rem}
.rv-lien:hover{color:var(--action)}
.rv-num{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700;font-size:.85rem;margin-right:.3rem}
.rv-meta{margin:.25rem 0 0;color:var(--muted);font-size:.82rem}
.rv-etape{margin:.4rem 0 0;font-size:.88rem;color:var(--ink-2)}
.rv-etape .badge{font-size:.72rem;margin-right:.3rem}
.rv-gestes{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.rv-gestes form{margin:0}
.rv-fin{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:2rem}
.rv-fin .rv-gestes{margin-top:0}
details.card summary{cursor:pointer;font-size:.92rem}
/* La page d'aide : des tuiles qui portent une phrase, pas un chiffre. */
.rv-aide-t{display:block;font-size:.9rem;line-height:1.45;color:var(--ink-2);margin-top:.2rem}
.etroit-large{max-width:62ch}

/* --- calendrier du système ---------------------------------------------- */
/* Deux jetons neufs, pour les deux états propres aux activités du système.
   « Ce mois-ci » puise dans la gamme bleue ; « mois dépassé » dans le gris
   chaud-beige (449C) : l'ambre dit déjà « à questionner » et « efficacité à
   évaluer » dans le registre — deux sens sur une couleur, et la pastille ne
   veut plus rien dire. Le rouge reste aux échéances fermes. */
:root{--mois:#004E59; --mois-bg:#DDF3F6; --mois-line:#00BED6;
  --dep:#544627; --dep-bg:#F1EDE2; --dep-line:#B2A77E}
.st-mois{background:var(--mois-bg);color:var(--mois)}.st-mois::before{background:var(--mois-line)}
.st-depasse{background:var(--dep-bg);color:var(--dep)}.st-depasse::before{background:var(--dep-line)}
.tile.mois .big{color:var(--mois)} .tile.dep .big{color:var(--dep)} .tile.neu .big{color:var(--neu)}
.tile.on{border-color:var(--anthracite);box-shadow:inset 0 0 0 1px var(--anthracite)}
.familles{display:grid;grid-template-columns:1fr;gap:.8rem;margin-bottom:.4rem}
@media(min-width:900px){.familles{grid-template-columns:3fr 2fr 2fr}}
.famille .tiles{margin-bottom:.6rem;grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.famille-cap{font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .3rem .1rem}
.famille-ferme .famille-cap{color:var(--crit)} .famille-systeme .famille-cap{color:var(--mois)}
.famille .tile .lab{min-height:3.2em}
.familles{margin-top:1rem}
table.mx tfoot th{text-align:left}
details.matrice>summary{font-size:1rem}
.tbl-wrap.nu{border:0}
table.mx td,table.mx th{padding:.35rem .6rem}
table.mx tfoot th,table.mx tfoot td{border-top:2px solid var(--rule-2);font-weight:600}
table.mx a{text-decoration:none;font-weight:700}
table.mx .zero{color:var(--rule-2)}
.n-retard{color:var(--crit)} .n-proche{color:var(--soon)} .n-mois{color:var(--mois)}
.n-depasse{color:var(--dep)} .n-inconnue,.n-avenir{color:var(--anthracite)}
/* `.actions` range des boutons en ligne ; la table « mes actions » portait la
   même classe et s'affichait en flex, en-têtes tassés à gauche. */
table.actions{display:table}
.btn.petit{font-size:.8rem;padding:.25rem .55rem;white-space:nowrap}
.card.etape .etape-txt{margin-bottom:1rem}
/* la frise : une ligne par activité, un mois par colonne */
.frise-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);border-radius:5px}
table.frise{min-width:900px;table-layout:fixed}
table.frise th.lbl{width:19rem;font-weight:500;background:var(--surface);position:sticky;left:0;z-index:1}
table.frise thead th{text-align:center;padding:.45rem .2rem}
table.frise thead th.lbl{text-align:left}
table.frise thead th .an{display:block;font-size:.68rem;color:var(--muted);letter-spacing:.04em}
table.frise td{text-align:center;vertical-align:middle;padding:.35rem .15rem;white-space:nowrap}
table.frise .courant{background:#FFF7F1}
table.frise thead th.courant{color:var(--action)}
table.frise tr.grp th{background:var(--surface-2);font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:.35rem .7rem}
table.frise tr.lecture th.lbl a{color:var(--muted)}
table.frise th.lbl a{text-decoration:none;color:var(--ink)}
table.frise th.lbl a:hover{color:var(--action)}
table.frise th.lbl .st{margin-left:.3rem;font-size:.66rem}
.mk{display:inline-block;width:13px;height:13px;border-radius:50%;margin:0 1px;vertical-align:middle;box-sizing:border-box}
.mk.fait{background:var(--ok)}
.mk.so{width:12px;height:4px;border-radius:2px;background:var(--rule-2)}
.mk.prevue{border:2px solid var(--mois)}
.mk.depasse{background:var(--dep-line);border:2px solid var(--dep)}
.mk.projetee{border:2px solid var(--mois-line);opacity:.45}
.mk.verif{border:2px solid var(--hold)}
.mk.butoir{border-radius:2px;transform:rotate(45deg);width:11px;height:11px}
.mk.butoir.prevue{border:2px solid var(--crit);background:none}
.mk.butoir.proche{background:var(--soon-line);border:0}
.mk.butoir.retard{background:var(--crit);border:0}
.mk.butoir.projetee{border:2px solid var(--crit-line);opacity:.45}
.mk.avant{position:relative;margin-left:9px}
.mk.avant::before{content:"◂";position:absolute;left:-11px;top:-5px;font-size:.8rem;color:var(--muted);transform:none}
.mk.butoir.avant::before{transform:rotate(-45deg)}
.mk.apres{position:relative;margin-right:9px}
.mk.apres::after{content:"▸";position:absolute;right:-11px;top:-5px;font-size:.8rem;color:var(--muted)}
.mk.butoir.apres::after{transform:rotate(-45deg)}
.mk-n{display:inline-block;min-width:1.2rem;font-size:.72rem;font-weight:700;color:var(--hold);
  border:1.5px solid var(--hold);border-radius:9px;padding:0 .25rem}
.legende{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.82rem;color:var(--ink-2);margin:.6rem 0 .2rem}
.legende span{display:inline-flex;align-items:center;gap:.35rem}
.gestes form{min-width:0}
.gestes .kv > div{grid-template-columns:1fr;gap:.1rem}
ul.mode{margin:.2rem 0 .6rem;padding-left:1.1rem;font-size:.92rem}
pre.repris{white-space:pre-wrap;font-family:inherit;font-size:.86rem;color:var(--ink-2);margin:.4rem 0 0}
details.repris>summary{cursor:pointer;font-size:.86rem;color:var(--muted);margin-top:.6rem}
.rdv{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:900px){.rdv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rdv .rythme{margin:.1rem 0 .4rem;color:var(--mois);font-weight:600;font-size:.92rem}
.cal-bloc h2{margin-top:1.8rem}
.en-ligne{display:inline-block;margin-right:.4rem;vertical-align:middle}
details.en-ligne>summary{cursor:pointer}
details.en-ligne[open]{display:block;margin-top:.3rem}
table.parts{margin:.4rem 0 1rem}
/* frise : un type d'activité se replie d'un clic */
.frise-outils{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .5rem}
button.plier{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
button.plier:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
button.plier .chevron{display:inline-block;transition:transform .15s}
button.plier .nb{font-size:.9em;color:var(--muted);text-transform:none;letter-spacing:0}
tbody.groupe.replie tr.ligne{display:none}
tbody.groupe.replie button.plier .chevron{transform:rotate(-90deg)}
table.frise tr.sous th.lbl{padding-left:2rem;font-size:.86rem;color:var(--ink-2)}
table.frise tr.sous th.lbl .who{width:20px;height:20px;font-size:.6rem}
table.cycles td{vertical-align:middle}
table.cycles form{display:inline-flex;gap:.3rem;align-items:center;margin:0}
table.cycles input[type=date]{font-size:.85rem;padding:.2rem .3rem}
table.suivis td{padding:.25rem .4rem}

/* Les filtres tiennent sur une ligne dès que l'écran le permet : chaque champ
   prend sa part de la largeur au lieu d'imposer la sienne. En dessous de
   900 px, ils reviennent à la ligne comme avant. */
@media(min-width:900px){
  form.filtres{flex-wrap:nowrap;gap:.4rem;padding:.55rem .7rem}
  form.filtres > div{flex:1 1 0;min-width:0}
  form.filtres > div:has(> .btn),form.filtres > div:has(> button){flex:0 0 auto}
  form.filtres input,form.filtres select{width:100%;max-width:none;font-size:.88rem;padding:.3rem .4rem}
  form.filtres label{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  form.filtres .btn{padding:.34rem .7rem;font-size:.86rem;white-space:nowrap}
}
p.hint.constat{margin-top:.8rem}

/* équipe et départ */
.card.depart .depart-tete{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.card.depart .depart-tete label{font-size:.9rem;color:var(--ink-2);display:flex;gap:.5rem;align-items:center}
.card.depart .nb,.bloc-inv .nb{font-size:.8rem;color:var(--muted);font-weight:400}
.card.depart details{margin-top:.5rem}
.bloc-inv{border-bottom:1px solid var(--rule);padding:.4rem 0}
.bloc-inv>summary{cursor:pointer;font-weight:600;color:var(--anthracite)}

/* --- une activité non personnelle : une ligne, le reste replié -------------- */
table.cycles.une form.realiser{flex-wrap:wrap}
table.cycles details.plus{flex-basis:100%;font-size:.85rem}
table.cycles details.plus summary{cursor:pointer;color:var(--ink-2)}
table.cycles details.plus input{display:block;width:100%;margin-top:.3rem;font-size:.85rem}
.card.etape details.autre{margin-top:.8rem;border-top:1px solid var(--rule);padding-top:.6rem}
.card.etape details.autre summary{cursor:pointer;color:var(--ink-2);font-size:.9rem}
.card.etape details.autre .grid2{margin-top:.8rem}
.card.etape details.autre .kv > div{grid-template-columns:1fr;gap:.25rem;border-bottom:0}
.card.etape details.autre .kv input,.card.etape details.autre .kv textarea,.card.etape details.autre .kv select{width:100%}

/* --- calendrier, 19/09/2026 : trois tuiles, une focale, six symboles ------------ */
/* L'ambre (--soon) dit « à surveiller » : mois dépassé ou échéance proche, la
   position avant ou après aujourd'hui dit lequel. Le rouge reste aux seules
   échéances fermes en retard. L'orange de marque reste une action. */
.cal-tuiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:1rem}
.tile .detail{display:block;font-size:.8rem;color:var(--ink-2);margin-top:.1rem}
.tile.att .big{color:var(--soon)}
.frise-tete{background:var(--surface);border:1px solid var(--rule);border-bottom:0;border-radius:5px 5px 0 0;
  padding:.55rem .7rem .45rem;position:sticky;top:3.35rem;z-index:3}
.frise-tete + .frise-wrap{border-radius:0 0 5px 5px}
.frise-tete .frise-outils{margin:0 0 .4rem}
.frise-outils .pousse{flex:1}
.frise-outils .etendue{font-family:"Asap Condensed",Asap,sans-serif;font-weight:700;color:var(--anthracite);margin-left:.2rem}
.frise-outils .btn.inactif{opacity:.5}
nav.focale{display:inline-flex;border:1px solid var(--rule-2);border-radius:5px;overflow:hidden}
nav.focale a{padding:.22rem .7rem;font-size:.84rem;font-weight:600;text-decoration:none;color:var(--ink-2);background:var(--surface)}
nav.focale a + a{border-left:1px solid var(--rule-2)}
nav.focale a.on{background:var(--anthracite);color:#fff}
.frise-tete .legende{margin:0;font-size:.8rem;gap:.25rem .95rem}
.legende .sep{width:1px;height:1rem;background:var(--rule-2)}
.legende .fl{color:var(--muted);font-size:.8rem}
svg.sy{width:17px;height:17px;vertical-align:middle;flex:none}
table.frise .case{display:inline-flex;align-items:center;gap:2px;cursor:default}
table.frise .case .fl{font-size:.72rem;color:var(--muted)}
.frac{font-size:.68rem;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dl{display:inline-block;font-size:.66rem;font-weight:600;color:var(--action);border:1px solid #E8C4AE;
  border-radius:3px;padding:0 .3rem;margin-left:.4rem;vertical-align:1px;white-space:nowrap;line-height:1.35}
table.frise tr.grp th .pastille{display:inline-block;margin-left:.45rem;font-family:Asap,sans-serif;font-size:.72rem;
  font-weight:600;letter-spacing:0;text-transform:none;border-radius:9px;padding:0 .45rem;text-decoration:none;vertical-align:1px}
.pastille.crit{background:var(--crit-bg);color:var(--crit)}
.pastille.att{background:var(--soon-bg);color:var(--soon)}
.pastille.neu{background:var(--neu-bg);color:var(--ink-2)}
.pastille:hover{box-shadow:inset 0 0 0 1px currentColor}
table.frise.focale-annees{min-width:760px}

/* --- calendrier, 19/09/2026 (2) : rouge = date limite, ambre = hors de son mois --
   La ligne des mois reste figée en haut en défilant. Pour que « sticky » vaille
   contre la page, le cadre de la frise ne défile plus à l'horizontale quand
   l'écran est assez large ; en dessous, il défile et la ligne ne se fige pas. */
.frise-tete{position:static}
table.frise thead th{position:sticky;top:var(--sous-barre,3.35rem);z-index:2;background:var(--surface-2)}
table.frise thead th.courant{background:#FFEFE3}
table.frise thead th.lbl{z-index:3;background:var(--surface)}
@media(min-width:1100px){.frise-wrap{overflow:visible}}
.legende.par-famille{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;align-items:center}
.legende.par-famille .fam{font-family:"Asap Condensed",Asap,sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);display:block}
.legende.par-famille .fam small{font-family:Asap,sans-serif;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:.3rem}
.legende.par-famille .its{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.legende.par-famille .its > span{display:inline-flex;align-items:center;gap:.35rem}
@media(max-width:700px){.legende.par-famille{grid-template-columns:1fr}}
.tile .detail{display:flex;align-items:center;gap:.35rem}
.tile .detail svg.sy{width:14px;height:14px}
.pastille svg.sy{width:12px;height:12px;margin-right:.25rem;vertical-align:-1px}

/* --- calendrier, 19/09/2026 (3) : cinq symboles, trois tuiles fixes ------------- */
.cal-tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.cal-tuiles{grid-template-columns:1fr}}
.cal-tuiles .tile{border-top:3px solid var(--rule)}
.cal-tuiles .tile.t-fermes.crit,.cal-tuiles .tile.t-fermes.att{border-top-color:var(--crit)}
.cal-tuiles .tile.t-systeme.att{border-top-color:var(--soon-line)}
.cal-tuiles .tile.t-prevues.mois{border-top-color:var(--mois)}
.cal-tuiles .tile .lab{display:flex;align-items:center;gap:.35rem}
.cal-tuiles .tile .lab svg.sy{width:14px;height:14px}
.tile.zero .big{color:var(--ink-2)}
.tile .detail.discret{color:var(--muted)}
.dl{color:var(--crit);border-color:#EBC0BA;background:#FDF3F1}
.dl.inconnue{color:var(--ink-2);border-color:var(--rule-2);background:var(--surface-2)}

/* --- réunions internes : la trace des séances, sans alerte (19/09/2026) -------- */
.rdv .bande{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin:.4rem 0 .2rem}
.rdv .bande span{height:34px;border-radius:3px;background:var(--surface-2);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding-top:2px}
.rdv .bande span i{font-style:normal;font:600 .76rem "Asap Condensed",Asap,sans-serif;color:var(--muted)}
.rdv .bande span.tenue{background:var(--ok-bg)}
.rdv .bande svg.sy{width:13px;height:13px}
.rdv .derniere{font-size:.88rem;color:var(--ink-2);margin:.35rem 0 .5rem}
.rdv form.seance{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:0 0 .4rem}
.rdv form.seance input[type=text]{flex:1;min-width:12rem;font-size:.85rem;padding:.2rem .4rem}
.rdv form.seance input[type=date]{font-size:.85rem;padding:.2rem .3rem}
.rdv details.histo{font-size:.88rem;margin:.2rem 0 .4rem}
.rdv details.histo summary{cursor:pointer;color:var(--ink-2)}

/* Audit : qui a audité qui, confirmé à la réalisation (19/09/2026) */
table.cycles.une td:first-child .hint{display:block}
p.hint.signal{color:var(--warn,#9a5b00)}
.card.etape details.autre .kv input[type=checkbox]{width:16px}
.card.etape details.autre .kv dd > div[id]{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.card.etape details.autre .kv dd > div[id] label{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;cursor:pointer}

/* Le nom de l'organisation cliente, à côté du produit (20/09/2026) */
.bar .org{font-size:.85rem;color:var(--ink-2);padding-left:.8rem;margin-left:-.4rem;border-left:1px solid var(--rule-2)}

/* Sous-titre d'un bloc : « Qualifier  l'événement ». Il héritait de la police
   condensée grasse du titre ; il se lit maintenant comme une précision (20/09/2026). */
h2 .hint,h3 .hint,summary .hint{font-family:Asap,"Segoe UI",system-ui,sans-serif;font-weight:400;
  font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:.55rem}

/* Registre : les colonnes courtes ne se coupent plus en deux lignes */
table.registre td:nth-child(5){white-space:nowrap}

/* Colonnes redimensionnables (static/js/colonnes.js) */
table.redim thead th{position:relative}
table.redim.fige{table-layout:fixed;min-width:0}
table.redim.fige td,table.redim.fige th{overflow:hidden;text-overflow:ellipsis}
table.redim .poignee{position:absolute;top:0;right:-3px;width:8px;height:100%;cursor:col-resize;z-index:2}
table.redim .poignee:hover,body.redim-en-cours table.redim .poignee:hover{background:var(--rule-2)}
body.redim-en-cours{cursor:col-resize;user-select:none}
.raz-colonnes{margin:.4rem 0 0;background:none;border:0;padding:0;font:inherit;font-size:.8rem;
  color:var(--action);text-decoration:underline;cursor:pointer}

/* ── La barre à rubriques (20/09/2026) ─────────────────────────────────────
   Trois menus à gauche, ce qui est personnel à droite : la barre se lit du
   collectif vers soi. Les entrées viennent de core/navigation.py. */
nav.main{margin-left:1.2rem;flex:1 1 auto;align-items:center}
nav.main .pousse{flex:1 1 auto}
nav.main a.mini{font-size:.78rem;opacity:.85}

.rub{position:relative}
.rub>summary{font-family:"Asap Condensed",Asap,sans-serif;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;padding:.35rem .6rem;color:var(--muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-.7rem;list-style:none;white-space:nowrap}
.rub>summary::-webkit-details-marker{display:none}
.rub>summary::after{content:"\25BE";margin-left:.35rem;font-size:.7em;vertical-align:.15em;color:var(--rule-2)}
.rub>summary:hover{color:var(--anthracite)}
.rub>summary:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
.rub.on>summary{color:var(--anthracite);border-bottom-color:var(--action)}
.rub[open]>summary{color:var(--anthracite)}
.rub[open]>summary::after{color:var(--action)}

.rub .tombe{position:absolute;top:100%;left:0;margin-top:.7rem;z-index:10;display:flex;flex-direction:column;
  min-width:15rem;padding:.3rem;background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  box-shadow:var(--shadow)}
nav.main .tombe a{font-family:Asap,"Segoe UI",system-ui,sans-serif;font-size:.95rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink);padding:.45rem .6rem;margin:0;border-bottom:0;
  border-radius:4px;white-space:nowrap}
nav.main .tombe a:hover{background:var(--surface-2)}
nav.main .tombe a.on{color:var(--action);font-weight:600}

@media(max-width:760px){
  .rub .tombe{position:static;margin-top:.4rem;box-shadow:none;min-width:0}
  nav.main{flex-wrap:wrap}
}

/* La barre du haut : une seule boîte verticale pour tout ce qui s'y range
   (21/09/2026). Les entrées de menu portent un filet de 3px et remontent de
   .7rem, pour que le filet de la page active se pose sur celui de la barre.
   Le nom de la personne et « Sortir » n'avaient ni l'un ni l'autre : centrés
   sur une boîte plus haute, leurs textes se plaçaient 4,6 px au-dessus des
   entrées — repéré en capture. La hauteur de ligne est fixée en rem pour que
   trois tailles de police donnent la même boîte. */
nav.main a,.rub>summary,.qui,.sortir button{line-height:1.2rem}
.qui{padding:.35rem .2rem;border-bottom:3px solid transparent;margin-bottom:-.7rem}
.sortir{display:flex;padding:0;border-bottom:3px solid transparent;margin-bottom:-.7rem}
/* La remontée de .7rem rapprochait aussi les lignes quand la barre passe à
   la ligne sur un écran étroit : l'écart entre lignes se redonne ici, sans
   effet quand tout tient sur une seule ligne. */
nav.main{row-gap:.9rem}


/* ---- « Faut-il revoir un risque ou une opportunité ? » -------------------
   Deux réponses en gros boutons, parce que c'est la question ; la liste des
   fiches vient après, en petit, parce que c'est la réponse. */
.card.revoir{border-left:4px solid var(--warn-line)}
.card.revoir p.bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 .5rem}
.card.revoir p.bar .txt{font-size:.9rem;color:var(--ink-2)}
.card.revoir form{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:0}
.incidence ul.reponses{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem}
.incidence ul.reponses label{display:flex;gap:.55rem;align-items:center;border:1px solid var(--rule-2);
  border-radius:6px;padding:.5rem .7rem;cursor:pointer;font-size:.95rem;background:var(--surface)}
.incidence .choix{margin:.7rem 0 0;padding-left:.9rem;border-left:3px solid var(--rule-2)}
.incidence p.fam{font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:.55rem 0 .2rem}
.incidence ul.fiches{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.incidence ul.fiches label{display:inline-flex;gap:.45rem;align-items:baseline;font-size:.92rem;cursor:pointer}
.incidence details.autres summary{font-size:.9rem;color:var(--action);cursor:pointer;margin-top:.6rem}
.incidence p.ajout{margin-top:.7rem}

/* Sauvegardes : le seul bouton qui écrase quelque chose. Sa couleur est celle des états
   « en retard » : l'échelle des états ne change jamais, et personne ne la confond avec la marque. */
.btn-danger{background:var(--surface);color:var(--crit);border-color:var(--crit-line)}
.btn-danger:hover{background:var(--crit-bg)}
.btn-danger:disabled{opacity:.5;cursor:not-allowed}


/* --- le bandeau de la fiche : parcours, ce qui reste, gestes d'état ------ */
.band{margin-bottom:1rem;background:var(--surface);border-radius:5px;border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band-haut{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.band-parcours{flex:1 1 24rem;min-width:0}
.band-gestes{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.band-gestes form{margin:0}
.band-gestes .hint{margin:0;max-width:22rem}
.menu-geste{position:relative}
.menu-geste > summary{list-style:none;cursor:pointer;display:inline-block}
.menu-geste > summary::-webkit-details-marker{display:none}
.menu-geste .pop{position:absolute;right:0;top:calc(100% + .3rem);z-index:6;width:min(22rem,80vw);
  background:var(--surface);border:1px solid var(--rule-2);border-radius:5px;padding:.8rem;box-shadow:var(--shadow)}
.menu-geste .pop .hint{margin:0 0 .6rem}
.menu-geste .pop input[type=text]{margin-bottom:.6rem}
.band .btn[disabled]{opacity:.45;cursor:not-allowed}
.band-points{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--rule);
  display:flex;gap:.5rem .8rem;flex-wrap:wrap;align-items:baseline}
.band-points .lab{font-family:"Asap Condensed",Asap,sans-serif;font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
ul.pastilles{list-style:none;margin:0;padding:0;display:flex;gap:.4rem;flex-wrap:wrap}
ul.pastilles li{border-left:3px solid var(--rule-2);background:var(--surface-2);border-radius:3px;
  padding:.15rem .6rem;font-size:.88rem}
ul.pastilles li.ko{border-left-color:var(--crit-line);background:var(--crit-bg);color:var(--crit)}
ul.pastilles li.warn{border-left-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}

/* --- Qualifier sur deux colonnes : les champs courts vont par deux -------- */
.kv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
.kv2 > div{grid-template-columns:minmax(0,1fr);gap:.15rem;padding:.5rem 0}
.kv2 > div.pleine{grid-column:1/-1}
.kv2 dt{padding-top:0}
@media(max-width:760px){.kv2{grid-template-columns:minmax(0,1fr)}}

.band{border-left:4px solid var(--orange);padding:.8rem 1.1rem}
.band .flow{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 .5rem}
.band .step{border:1px solid var(--rule-2);border-radius:20px;padding:.15rem .7rem;font-family:"Asap Condensed",Asap,sans-serif;font-size:.85rem;font-weight:600;color:var(--muted)}
.band .step.now{background:var(--anthracite);border-color:var(--anthracite);color:#fff}
.band .arrow{color:var(--rule-2);font-weight:700}
.band .etape-txt{margin:0;font-size:.95rem;color:var(--ink-2)}


/* --- blocs de la fiche : un seul développé, les autres résumés sur une ligne ---- */
details.blk > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.4rem .9rem;
  flex-wrap:wrap;position:relative;padding-left:1.1rem;margin:0}
details.blk > summary::-webkit-details-marker{display:none}
details.blk > summary::before{content:"\25B8";position:absolute;left:0;top:.15rem;color:var(--muted);font-size:.85rem}
details.blk[open] > summary::before{content:"\25BE"}
details.blk > summary h2{margin:0}
details.blk > summary .res{color:var(--muted);font-size:.9rem}
details.blk[open] > summary{margin-bottom:.9rem}
details.blk[open] > summary .res{display:none}
details.blk > summary:hover h2{color:var(--action)}
p.tout{margin:0 0 .5rem;text-align:right;font-size:.85rem;color:var(--muted)}
button.lien{background:none;border:0;padding:0;font:inherit;color:var(--action);text-decoration:underline;cursor:pointer}

/* --- discussion, journal, liens : trois onglets ----------------------------- */
.onglets .tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--rule-2);flex-wrap:wrap}
.onglets:not(.js) .tabs{display:none}
.onglets .tabs button{font-family:"Asap Condensed",Asap,sans-serif;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;border:0;background:none;padding:.55rem .9rem;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.onglets .tabs button.on{color:var(--anthracite);border-bottom-color:var(--action)}
.onglets .pane{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:1.1rem 1.3rem;margin-bottom:1rem}
.onglets.js .pane{display:none;border-top:0;border-radius:0 0 5px 5px}
.onglets.js .pane.on{display:block}
.onglets .pane h2.t0{display:none}
.onglets:not(.js) .pane h2.t0{display:block}

.band-titre{flex:1 1 20rem;min-width:0}
.band h1{margin:0 0 .3rem}
.band .sub{margin:0}
.band-parcours{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--rule)}
details.pts{margin-top:.6rem;font-size:.9rem}
details.pts > summary{cursor:pointer;color:var(--ink-2)}
details.pts .pastilles{margin-top:.5rem}

a.vers{color:inherit;text-decoration:none}
a.vers:hover{text-decoration:underline}
a.step.vers:hover{border-color:var(--anthracite);text-decoration:none}
details.blk{scroll-margin-top:5rem}
ul.flash-liste{margin:.3rem 0 0;padding-left:1.2rem}

/* Constat d'une nouvelle évaluation : deux choix en colonne, sans puces */
.kv .constat ul{list-style:none;margin:0;padding:0}
.kv .constat li{margin:.15rem 0}
.kv .constat label{font-weight:400}

/* Le bandeau de la fiche reste visible sous la barre ; défilé, il se réduit au titre et aux gestes. */
.band{position:sticky;top:var(--barre-h,3.1rem);z-index:4;box-shadow:0 -10px 0 var(--paper),0 10px 0 var(--paper)}
.band.reduit .band-parcours,.band.reduit .pts{display:none}
.band.reduit{padding-top:.5rem;padding-bottom:.5rem}
.band.reduit h1{font-size:1.25rem;margin:0}
.blk{scroll-margin-top:9rem}
p.ajout{margin:.6rem 0 0}

/* En-têtes du tableau du registre figés : le conteneur ne doit pas défiler lui-même (sinon `sticky` ne s'y accroche pas). */
@media(min-width:1100px){
  .tbl-wrap:has(table.registre){overflow:visible}
  table.redim.registre thead th{position:sticky;top:var(--barre-h,3.1rem);z-index:2;background:var(--surface-2)}
}

/* Même logique pour tous les tableaux de liste : les titres de colonnes restent sous la barre. */
@media(min-width:1100px){
  .tbl-wrap{overflow:visible}
  .tbl-wrap > table thead th{position:sticky;top:var(--barre-h,3.1rem);z-index:2;background:var(--surface-2)}
  table.sa-tbl.actions thead th{position:sticky;top:var(--barre-h,3.1rem);z-index:2;background:var(--surface-2)}
}

/* Barre d'enregistrement : toujours visible en bas de l'écran */
form#fiche .actions{position:sticky;bottom:0;z-index:3;background:var(--surface);
  border-top:1px solid var(--rule);box-shadow:0 -6px 12px rgba(0,0,0,.05);padding:.6rem 1rem;margin:0 -1rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.btn[aria-disabled=true]{opacity:.45;cursor:default}
.non-enreg{font-weight:700;color:var(--action)}
.non-enreg.alerte{background:var(--action);color:#fff;padding:.15rem .6rem;border-radius:4px}

/* Bandeau : le libellé de la fiche en grand, puis une seule ligne d'étiquettes (type, échéance, état)
   toutes de la même taille — plus petites que le titre, pour que ce soit lui qu'on lise d'abord. */
.band{padding:.55rem 1rem .6rem}
.band h1{font-size:1.9rem;line-height:1.12;margin:0 0 .5rem}
.band .sub{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;line-height:1}
.band .sub > a.vers{display:inline-flex;text-decoration:none}
.band .type-fiche,.band .sub .st,.band .sub .badge{
  box-sizing:border-box;display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;margin:0;
  padding:0 .6rem;border:1px solid transparent;border-radius:4px;
  font-family:"Asap Condensed",Asap,sans-serif;font-size:.78rem;font-weight:600;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.band .type-fiche,.band .sub .badge{background:var(--surface-2);color:var(--anthracite);border-color:var(--rule-2)}
.band-parcours{margin-top:.5rem;padding-top:.5rem}
.band .flow{margin:0}
.band .etape-txt{margin:.45rem 0 0}
details.pts{margin-top:.4rem}
/* Défilé : le titre reste plus grand que les étiquettes, sur la même ligne qu'elles. */
.band.reduit .band-titre{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap}
.band.reduit h1{font-size:1.45rem;margin:0}
.band.reduit{padding-top:.4rem;padding-bottom:.4rem}

/* « Programmé » : un seul bloc. On lit de haut en bas comme on s'en sert : quand, qui, puis la
   confirmation — la seule chose qui fige. Rien d'autre à l'écran. */
.card.etape .pg-derniere{margin:-.4rem 0 1rem;color:var(--muted);font-size:.9rem}
.programme .pg-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem 1.5rem}
.programme .pg-champ label,.programme .pg-audites legend{
  display:block;margin:0 0 .3rem;font-family:"Asap Condensed",Asap,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.programme .pg-champ input:not([type=checkbox]),.programme .pg-champ select{width:100%}
.programme .pg-champ .hint{margin:.3rem 0 0}
.programme details.ext{margin-top:.6rem}
.programme details.ext summary{cursor:pointer;color:var(--action);font-size:.9rem;width:max-content}
.programme details.ext input{margin-top:.5rem}
.programme .pg-audites{border:0;padding:0;margin:1.2rem 0 0}
.programme .pg-audites legend{padding:0}
.programme .pg-audites > div{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.programme .pg-audites > div > div{margin:0}
.programme .pg-audites label{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-family:inherit;
  font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.programme .confirmer{margin-top:1.4rem;padding:1rem 1.1rem;background:var(--surface-2);border:1px solid var(--rule);border-radius:5px}
.programme .confirmer h3{margin:0 0 .2rem}
.programme .confirmer > .hint{margin:0 0 .8rem}
.programme .confirmer-gestes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
/* Historique : une ligne lisible par fois, les précisions à la suite plutôt qu'empilées. */
table.histo td.ref{white-space:nowrap;padding-right:1.5rem}
table.histo td .hint{display:inline}
table.histo td .hint::before{content:" · "}
table.histo td .st + .hint::before,table.histo td > .hint:first-child::before{content:""}
.programme .confirmer-ligne{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:flex-end}
.programme .confirmer-ligne label{display:flex;flex-direction:column;margin:0;font-family:"Asap Condensed",Asap,sans-serif;
  font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
/* Mode opératoire : ce qu'on suit pendant l'activité — des étapes numérotées, lisibles d'un coup d'œil. */
.card.mode-carte{border-left:3px solid var(--action)}
.mode-etapes{margin:.2rem 0 0;padding-left:1.4rem;font-size:1.05rem;line-height:1.5}
.mode-etapes li{margin:.35rem 0;padding-left:.2rem}
.mode-etapes li::marker{font-weight:700;color:var(--action)}

/* Page d'une activité : une seule colonne, dans l'ordre où l'on s'en sert. */
.page-activite{display:grid;grid-template-columns:minmax(0,1fr) 23rem;gap:1.25rem;align-items:start;max-width:90rem}
.page-activite .col-principale > .card{margin-bottom:1rem}
.col-definition{position:sticky;top:1rem}
.col-definition dl.kv{display:block;margin:0}
.col-definition dl.kv > div{display:block;padding:.55rem 0}
.col-definition dl.kv dt{margin:0 0 .25rem;width:auto}
.col-definition dl.kv dd{margin:0}
.col-definition input[type=text],.col-definition select,.col-definition textarea,.col-definition input[type=number]{max-width:100%;box-sizing:border-box}
.col-definition input.wide,.col-definition textarea.wide{width:100%}
.modele-carte summary{cursor:pointer;font-weight:600}
@media (max-width:980px){.page-activite{grid-template-columns:minmax(0,1fr)}.col-definition{position:static}}
.qui-ligne{margin-top:.2rem;color:var(--ink-2)}
.qui-ligne b{font-weight:600;color:var(--ink)}

/* Étapes de préparation d'une fois */
.preparation{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--bord,#d9d9d9)}
.preparation h3.zone{margin-top:0}
table.etapes select,table.etapes input[type=date],table.etapes input[type=number]{max-width:100%}
table.etapes input[type=number]{width:5rem}
table.etapes tr.faite td:nth-child(2){color:#555}
.etapes-histo{display:block}

/* ========================================================================
   Revue UX (01/10/2026) — panneau latéral, aperçu, fiche en deux colonnes,
   vues rapides, clavier. Poste de travail : écran large, souris et clavier.
   ======================================================================== */

/* --- accessibilité clavier ------------------------------------------- */
.evitement{position:absolute;left:.5rem;top:-4rem;z-index:50;background:var(--anthracite);color:#fff;
  padding:.5rem .9rem;border-radius:0 0 5px 5px;text-decoration:none;font-weight:600}
.evitement:focus{top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--anthracite);outline-offset:2px;border-radius:2px}
.btn:focus-visible,button:focus-visible{outline:3px solid var(--anthracite);outline-offset:2px}
main:focus{outline:none}

/* (la recherche globale viendra plus tard : une loupe qui cherche partout) */
.btn.mini-btn{font-size:.85rem;padding:.3rem .8rem;white-space:nowrap;text-decoration:none}

/* --- vues rapides et filtres en cours --------------------------------- */
.vues{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .7rem}
.vues-lab,.puces-lab{font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vue{font-size:.88rem;text-decoration:none;color:var(--ink-2);background:var(--surface);border:1px solid var(--rule-2);
  padding:.2rem .75rem;border-radius:999px}
.vue:hover{border-color:var(--anthracite);color:var(--ink)}
.vue.on{background:var(--anthracite);border-color:var(--anthracite);color:#fff}
.puces{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:-.4rem 0 .8rem}
.puce{font-size:.84rem;text-decoration:none;color:var(--ink);background:var(--neu-bg);border:1px solid var(--neu-line);
  padding:.1rem .6rem;border-radius:999px}
.puce:hover{border-color:var(--anthracite)}
.puce-champ{color:var(--muted)}
.tile.zero{opacity:.55}
.tile.zero .big{color:var(--muted)}

/* --- registre plus dense, ligne entière cliquable ---------------------- */
table.registre td{padding:.38rem .6rem;vertical-align:middle}
table.registre td .ref{font-size:.74rem}
table.registre td.court,table.registre td.ech{white-space:nowrap}
table.registre td.ech .ref{margin-left:.35rem}
table.registre td.court{font-size:.9rem}
table.registre tbody tr[data-fiche]{cursor:pointer}
table.registre tbody tr[data-fiche]:hover td{background:var(--surface-2)}
table.registre tbody tr.ouverte td{background:#FFF3EA;box-shadow:inset 0 0 0 0 transparent}
table.registre tbody tr.ouverte td:first-child{box-shadow:inset 3px 0 0 var(--action)}
table.registre tbody tr.hors-filtre td{opacity:.5}
.ouverte{outline:0}
li.ouverte,.kb-carte.ouverte{box-shadow:0 0 0 2px var(--action)}

/* --- le panneau latéral ------------------------------------------------ */
body.avec-panneau main{max-width:none;margin:0;padding-right:calc(clamp(1rem,3vw,2rem) + min(40rem,46vw))}
.pan{position:fixed;top:var(--barre-h,3.1rem);right:0;bottom:0;width:min(40rem,46vw);z-index:20;display:flex;flex-direction:column;
  background:var(--surface);border-left:3px solid var(--orange);box-shadow:-14px 0 30px -22px rgba(35,39,51,.55)}
.pan[hidden]{display:none}
.pan-tete{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .7rem;
  background:var(--surface-2);border-bottom:1px solid var(--rule)}
.pan-tete button{font:inherit;font-size:.88rem;background:var(--surface);color:var(--ink);border:1px solid var(--rule-2);
  border-radius:4px;padding:.2rem .6rem;cursor:pointer;min-width:2rem}
.pan-tete button:hover:not(:disabled){border-color:var(--anthracite)}
.pan-tete button:disabled{opacity:.4;cursor:default}
.pan-nav,.pan-outils{display:inline-flex;align-items:center;gap:.35rem}
.pan-pos{font-size:.84rem;color:var(--muted);min-width:3.5rem;text-align:center;font-variant-numeric:tabular-nums}
.pan.sans-liste .pan-nav{visibility:hidden}
.pan-cadre{flex:1;width:100%;border:0;background:var(--paper)}
.pan-voile{position:fixed;inset:0;z-index:19;background:rgba(35,39,51,.45)}
.pan-voile[hidden]{display:none}
.pan.grand{top:0;left:0;width:100vw;border-left:0;box-shadow:none;z-index:21}
body.pan-grand{overflow:hidden}

/* dans le cadre : pas de barre, un peu moins de marge */
body.en-panneau{background:var(--paper)}
body.en-panneau main{padding:.9rem 1.1rem 2rem;max-width:none}
body.en-panneau h1{font-size:1.5rem}
body.en-panneau .band{top:0}
body.en-panneau form#fiche .actions{bottom:0}

/* --- l'aperçu : une lecture ---------------------------------------------- */
.apercu .ref{margin:0 0 .2rem}
.apercu h1{margin:0 0 .4rem}
.apercu .sub{display:flex;flex-wrap:wrap;gap:.3rem .7rem;align-items:center;margin:0 0 .8rem}
.apercu .flow{margin:0 0 .9rem}
.ap-bloc{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:.6rem .9rem .7rem;margin:0 0 .7rem}
.ap-bloc h2{margin:0 0 .35rem;font-size:1.05rem}
.ap-bloc p{margin:.2rem 0}
.ap-n{font-family:Asap,sans-serif;font-weight:400;font-size:.82rem;color:var(--muted);margin-left:.3rem}
.ap-actions{list-style:none;margin:0;padding:0}
.ap-actions li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:baseline;padding:.25rem 0;border-top:1px solid var(--rule)}
.ap-actions li:first-child{border-top:0}
.ap-msg p{margin:0;font-size:.95rem}
.ap-kv{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.4rem 1rem}
.ap-kv.un{grid-template-columns:1fr;gap:.25rem}
.ap-kv > div{display:flex;flex-direction:column}
.ap-kv.un > div{flex-direction:row;gap:.6rem;align-items:baseline}
.ap-kv dt{font-family:"Asap Condensed",Asap,sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ap-kv.un dt{min-width:7.5rem}
.ap-kv dd{margin:0}
.ap-gestes{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}

/* --- la fiche en deux colonnes sur écran large ------------------------- */
.fiche-grille{display:block}
.fiche-cote{margin-top:1rem}
.fiche-cote .card.details{margin-bottom:1rem}
.fiche-cote .t0{margin-top:0}
@media (min-width:1200px){
  body:not(.en-panneau) .fiche-grille{display:grid;grid-template-columns:minmax(0,1fr) 24rem;gap:1.4rem;align-items:start}
  body:not(.en-panneau) .fiche-cote{margin-top:0;position:sticky;
    top:calc(var(--barre-h,3.1rem) + var(--band-h,0px) + 1.2rem);max-height:calc(100vh - var(--barre-h,3.1rem) - var(--band-h,0px) - 2rem);overflow:auto}
}
/* dans un panneau large (grand), la colonne latérale reprend sa place */
@media (min-width:1000px){
  body.en-panneau .fiche-grille{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.2rem;align-items:start}
  body.en-panneau .fiche-cote{margin-top:0}
}
form#fiche textarea{max-width:48rem}
.msg.replie p.corps{max-height:7.5em;overflow:hidden}
.msg .deplier{font-size:.84rem}

/* --- « Retirer » : dit ce qu'il fera, estompe ce qui partira ----------- */
label.retirer{display:inline-flex;gap:.3rem;align-items:center;cursor:pointer;font-size:.82rem;color:var(--ink-2);
  border:1px solid var(--rule-2);border-radius:4px;padding:.1rem .5rem;white-space:nowrap}
label.retirer input{position:absolute;opacity:0;width:1px;height:1px}
label.retirer .lib-annule{display:none}
label.retirer:hover{border-color:var(--anthracite)}
label.retirer:has(input:focus-visible){outline:3px solid var(--anthracite);outline-offset:2px}
label.retirer:has(input:checked){background:var(--crit-bg);border-color:var(--crit-line);color:var(--crit)}
label.retirer:has(input:checked) .lib-retirer{display:none}
label.retirer:has(input:checked) .lib-annule{display:inline}
tr:has(label.retirer input:checked) td:not(.mini){opacity:.45;text-decoration:line-through}

/* --- kanban allégé ------------------------------------------------------- */
.kb-carte .kb-meta{color:var(--muted);font-size:.8rem}

/* --- titres condensés : l'espace de la police est étroit (137/1000), on l'élargit un peu --- */
h1,h2,h3,.kb-titre,.tile .lab{word-spacing:.12em}
.apercu .flow{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.apercu .step{border:1px solid var(--rule-2);border-radius:20px;padding:.15rem .7rem;font-family:"Asap Condensed",Asap,sans-serif;font-size:.85rem;font-weight:600;color:var(--muted)}
.apercu .step.now{background:var(--anthracite);border-color:var(--anthracite);color:#fff}
.apercu .arrow{color:var(--rule-2);font-weight:700}

/* --- « Grand » prend tout l'écran ; le contenu garde une largeur de lecture ----- */
.pan.grand .pan-tete{padding:.45rem 1.2rem}
body.en-panneau main{margin:0 auto;max-width:112rem}
@media (min-width:1500px){
  body.en-panneau .fiche-grille{grid-template-columns:minmax(0,1fr) 26rem}
}
.empty details.choix-texte{margin:.8rem auto 0;max-width:46rem;text-align:left}
.empty details.choix-texte > summary{cursor:pointer;color:var(--action);text-align:center}
.empty details.choix-texte p{margin:.6rem 0 0}

/* Colonnes de nombres : le titre s'aligne à droite, comme les chiffres dessous
   (le lien de tri est un flex, il ignorait le text-align de l'en-tête). */
thead th.num{text-align:right}
thead th.num a.th-tri{justify-content:flex-end}
.pan-tete button.primaire{background:var(--action);border-color:var(--action);color:#fff;font-weight:600}
.pan-tete button.primaire:hover:not(:disabled){background:var(--action-h);border-color:var(--action-h)}
.pan-tete button[hidden]{display:none}

/* « Réalisée le… » : la date se choisit, aujourd'hui par défaut */
form.realise-le{display:flex;gap:.4rem;align-items:center;white-space:nowrap}
form.realise-le label{font-size:.82rem;color:var(--ink-2);display:flex;gap:.3rem;align-items:center}
form.realise-le input[type=date]{font:inherit;font-size:.82rem;padding:.2rem .35rem;border:1px solid var(--rule);border-radius:4px}
/* Équipe : les gestes rares dans un menu « … » */
details.plus{display:inline-block;position:relative;vertical-align:middle}
details.plus>summary{list-style:none;cursor:pointer;min-width:2rem;text-align:center}
details.plus>summary::-webkit-details-marker{display:none}
details.plus .plus-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;background:var(--surface);
  border:1px solid var(--rule);border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.12);padding:.25rem;min-width:8rem}
details.plus .plus-menu a{display:block;padding:.4rem .6rem;border-radius:3px;text-decoration:none;color:var(--ink)}
details.plus .plus-menu a:hover{background:var(--surface-2);color:var(--action)}

/* ---- Contexte : enjeux, parties intéressées (02/10/2026) -------------------------------------
   Mêmes jetons que le reste : l'orange est une action, jamais un état. Les teintes disent la
   nature et l'effet d'un enjeu, et chaque pastille porte toujours un mot. */
.sous-onglets{display:flex;gap:.2rem;margin:0 0 1rem;border-bottom:1px solid var(--rule)}
.sous-onglets a{font-family:"Asap Condensed",Asap,sans-serif;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;padding:.5rem .9rem;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.sous-onglets a.on{color:var(--anthracite);border-bottom-color:var(--action)}
.st-interne{background:var(--neu-bg);color:var(--neu)}.st-interne::before{background:var(--neu-line)}
.st-externe{background:var(--mois-bg);color:var(--mois)}.st-externe::before{background:var(--mois-line)}
.st-attente{background:var(--hold-bg);color:var(--hold)}.st-attente::before{background:var(--hold-line)}
.st-aide{background:var(--ok-bg);color:var(--ok)}.st-aide::before{background:var(--ok-line)}
.st-gene{background:var(--warn-bg);color:var(--warn)}.st-gene::before{background:var(--warn-line)}
.st-hausse{background:var(--warn-bg);color:var(--warn)}.st-hausse::before{background:var(--warn-line)}
.st-stable{background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2)}.st-stable::before{background:var(--neu-line)}
.st-baisse{background:var(--neu-bg);color:var(--neu)}.st-baisse::before{background:var(--neu-line)}
.bouge-tete{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.bouge-tete h2{margin:0}
.ligne-signal{display:flex;gap:.5rem;align-items:center;margin:.4rem 0 .6rem}
.ligne-signal input{flex:1;min-width:12rem}
ul.signaux li{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center}
form.en-ligne{display:inline-flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0}
.gestes{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:.6rem 0 0}
.deux-colonnes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media(max-width:1000px){.deux-colonnes{grid-template-columns:minmax(0,1fr)}}
/* Lecture « forces et faiblesses » : deux champs croisés, rien de plus à saisir. */
.sfw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:.6rem 0 1rem}
.sfw-case{border-radius:6px;padding:.8rem 1rem;border:1px solid var(--rule-2)}
.sfw-case h3{margin:0 0 .4rem;font-size:1rem}
.sfw-case ul{margin:0;padding-left:1.1rem}
.sfw-ok{background:var(--ok-bg);border-color:var(--ok-line)}
.sfw-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.sfw-bleu{background:var(--mois-bg);border-color:var(--mois-line)}
.sfw-hold{background:var(--hold-bg);border-color:var(--hold-line)}
/* Lecture « environnement » : un thème par ligne, un thème vide se voit. */
.env-ligne{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.env-ligne h3{margin:0;font-size:1rem}
.env-ligne ul{margin:0;padding-left:1.1rem}
/* Carte des parties intéressées : l'organisation au centre, les groupes autour. */
.carte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:.6rem 0 1rem}
.carte-centre{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;background:var(--anthracite);
  color:#fff;border-radius:50%;aspect-ratio:1;max-width:11rem;margin:auto;padding:1rem;text-align:center;font-weight:600}
.carte-groupe{background:var(--surface);border:1px solid var(--rule-2);border-radius:6px;padding:.7rem .9rem}
.carte-groupe h3{margin:0 0 .3rem;font-size:.98rem}
.carte-groupe ul{margin:0;padding-left:1.1rem}
@media(max-width:1000px){.carte{grid-template-columns:repeat(2,minmax(0,1fr))}.carte-centre{grid-column:1/-1;grid-row:1}}

/* Choix courts affichés sur une ligne (formulaire d'un enjeu) */
.kv .radios-ligne{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.kv .radios-ligne > div{display:inline-block}
.kv .radios-ligne label{display:inline-flex;align-items:center;gap:.35rem}

/* L'avis de l'équipe en un clic */
.ligne-avis{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1rem;padding:.45rem 0;border-bottom:1px solid var(--rule)}
.ligne-avis > div{flex:1 1 20rem;min-width:0}
.ligne-avis form{display:flex;flex-wrap:wrap;gap:.3rem}
.mes-themes{margin-top:.6rem}
.mes-themes .cases{list-style:none;margin:.3rem 0;padding:0;columns:2 14rem}
.mes-themes .cases li{break-inside:avoid;margin:.15rem 0}

/* Le tour d'horizon en schéma : quatre temps, flèche entre chacun. */
.schema-tour { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; margin: .8rem 0 .2rem; padding: 0; }
.schema-tour .etape { position: relative; flex: 1 1 11rem; display: flex; flex-direction: column; gap: .3rem;
  padding: .7rem .8rem; border: 1px solid var(--ligne, #d9dce3); border-radius: 8px; background: #fff; }
.schema-tour .etape + .etape::before { content: "\2192"; position: absolute; left: -1.35rem; top: 50%; transform: translateY(-50%);
  font-size: 1.2rem; color: var(--action, #B54809); }
.schema-tour .num { align-self: flex-start; min-width: 1.5rem; text-align: center; border-radius: 999px;
  background: var(--action, #B54809); color: #fff; font-size: .8rem; padding: .05rem .4rem; }
.schema-tour .qui { font-size: .78rem; color: var(--gris, #6b7280); text-transform: uppercase; letter-spacing: .04em; }
.schema-tour .l { font-size: .9rem; }
.schema-tour .l::before { content: "\00b7  "; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--action, #B54809); text-decoration: underline; cursor: pointer; }
.actions-ligne { display: flex; gap: .6rem; margin-top: .8rem; }
@media (max-width: 700px) { .schema-tour .etape + .etape::before { content: "\2193"; left: 50%; top: -1.3rem; transform: translateX(-50%); } }


/* Formulaire d'enjeu : assez large pour que les libellés et les choix tiennent sur une ligne. */
.form-enjeu{max-width:56rem}
.form-enjeu .kv > div{grid-template-columns:9rem minmax(0,1fr);align-items:center}
.form-enjeu .kv > div.tall,.form-enjeu .kv > div:first-child{align-items:start}
.form-enjeu .kv dt{white-space:nowrap}
.form-enjeu .kv textarea.wide,.form-enjeu .kv select{width:100%}
.form-enjeu .kv select{max-width:22rem}
.form-enjeu .radios-ligne{flex-wrap:nowrap;gap:.2rem 1.2rem}
.form-enjeu .radios-ligne label{white-space:nowrap}
@media (max-width:700px){.form-enjeu .kv > div{grid-template-columns:minmax(0,1fr)}.form-enjeu .radios-ligne{flex-wrap:wrap}}

/* La porte d'entrée : quatre tuiles à choisir, les champs s'ouvrent dessous. */
.tuiles-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem;margin:0 0 .6rem}
.tuile-choix{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:.7rem .8rem .7rem 2.6rem;background:#fff;border:1px solid var(--rule,#d9dce3);border-radius:8px;cursor:pointer}
.tuile-choix input{position:absolute;left:.85rem;top:.85rem;margin:0}
.form-enjeu .tuiles-choix{margin-top:1rem}
.tuile-choix .t{font-weight:600;color:var(--anthracite,#2f3441)}
.tuile-choix .p{font-size:.85rem;color:var(--muted,#6b7280)}
.tuile-choix:has(input:checked){border-color:var(--action,#B54809);box-shadow:0 0 0 1px var(--action,#B54809)}
.tuile-choix:focus-within{outline:2px solid var(--action,#B54809);outline-offset:2px}
[data-bloc][hidden]{display:none}


/* ---- Le « + » global (03/10/2026) ----------------------------------------
   Une seule liste d'ajouts, à droite de la barre, avant « Mes actions ». Elle
   mène aux portes qui existent déjà ; les ajouts de la rubrique courante passent
   en premier. Les entrées viennent de core/navigation.py (AJOUTS). */
.rub.plus>summary{color:var(--action);border-bottom-color:transparent}
.rub.plus .plus-signe{display:inline-block;font-size:1.15rem;font-weight:700;line-height:1;margin-right:.1rem;vertical-align:-.05rem}
.rub.plus .tombe{left:auto;right:0;min-width:17rem}
nav.main .rub.plus .tombe a{display:flex;flex-direction:column;gap:.05rem;white-space:normal}
nav.main .rub.plus .tombe a small{font-size:.8rem;color:var(--muted)}
.rub.plus .tombe hr{border:0;border-top:1px solid var(--rule);margin:.3rem .4rem}
@media(max-width:760px){.rub.plus .tombe{right:auto}}

/* finalité et priorités du moment (04/10/2026) */
.orientation .finalite-texte{font-size:1.25rem;line-height:1.35;max-width:48ch;margin:.2rem 0 .4rem}
.liste-priorites{list-style:none;margin:.3rem 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.liste-priorites li{display:flex;gap:.8rem;align-items:flex-start}
.liste-priorites .rang{font-size:1.4rem;line-height:1;color:var(--action);width:1.2rem;flex:none;font-variant-numeric:tabular-nums}
.liste-priorites .corps{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.geste-priorite{border-top:1px solid var(--rule);padding:.6rem 0}
.geste-priorite .libelle{margin:0 0 .3rem}
.geste-priorite form.en-ligne{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center}
.avis-fait{margin:.2rem 0}

/* finalité à gauche, priorités à droite (rev. 04/10/2026) */
.orientation-duo{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:.4rem}
@media(min-width:900px){.orientation-duo:not(.seul){grid-template-columns:minmax(16rem,1fr) minmax(0,2fr)}}
.orientation-duo .card{margin-bottom:0}
.orientation .finalite-texte{font-size:1.2rem;max-width:none}
.liste-priorites .libelle{font-size:1.05rem;color:var(--ink);text-decoration:none}
.liste-priorites a.libelle:hover{text-decoration:underline}
.pied-carte{margin:.6rem 0 0}
.dernier-changement{margin:.1rem 0 1rem}
.liste-liens{max-height:16rem;overflow:auto;border:1px solid var(--rule);border-radius:6px;padding:.4rem .6rem;list-style:none;margin:.2rem 0 .6rem}

/* le tour d'horizon tenu à l'écran (04/10/2026) */
.seance{display:grid;grid-template-columns:1fr;gap:1rem;margin:1rem 0}
@media(min-width:900px){.seance{grid-template-columns:minmax(17rem,1fr) minmax(0,2fr);align-items:start}}
.seance .card{margin-bottom:0}
.odj ul{list-style:none;margin:0;padding:0}
.odj-titre{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:.9rem 0 .2rem;font-weight:500}
.odj a.pt{display:flex;gap:.5rem;align-items:flex-start;padding:.35rem .5rem;border:1px solid transparent;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.92rem}
.odj a.pt:hover{background:var(--surface-2)}
.odj a.pt.courant{border-color:var(--ink);background:var(--surface)}
.pastille-issue{flex:none;width:.7rem;height:.7rem;border-radius:50%;border:2px solid var(--muted);margin-top:.35rem}
.pastille-issue.traite{background:var(--ink);border-color:var(--ink)}
.pastille-issue.reporte{background:var(--action);border-color:var(--action)}
.pastille-issue.non_aborde{border-style:dashed}
.ajout-point{margin-top:1rem;display:flex;flex-direction:column;gap:.3rem}
.lien-bouton{background:none;border:0;padding:0;color:var(--action);text-decoration:underline;cursor:pointer;font:inherit;margin-top:.6rem}
.detail-point .t0{margin:.1rem 0 .3rem}
.commentaire{border-top:1px solid var(--rule);padding:.4rem 0}
.commentaire p{margin:.1rem 0}
.ligne-commentaire{display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem}
.pied-seance{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between;margin:1rem 0}
.presents .pastille{display:inline-flex;gap:.2rem;align-items:center;margin-right:.6rem}
.photo-priorites{border:1px dashed var(--rule-2);border-radius:6px;padding:.6rem .9rem;background:var(--surface-2);margin:.8rem 0}
.photo-priorites ol{margin:.3rem 0 0;padding-left:1.2rem}
.cloture label{display:block;margin-top:.9rem}
.aide-centree{max-width:46rem;margin:0 auto;text-align:center}
.etapes-centrees{list-style:none;padding:0;margin:1.2rem 0;display:flex;flex-direction:column;gap:.7rem;align-items:center}
.etapes-centrees .etape{border:1px solid var(--ink);border-radius:6px;background:var(--surface);padding:.8rem 1rem;width:100%;max-width:34rem;display:flex;flex-direction:column;gap:.2rem;align-items:center}
.etapes-centrees .num{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--action);color:#fff;font-size:.9rem}
.lancer-tour{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between}
.lancer-tour .info{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:16rem}
.lancer-tour .actions{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.historique-tours table{width:100%}
.detail-point h3.fam{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500;margin:1.1rem 0 .3rem}
.ligne-commentaire{flex-direction:row;flex-wrap:wrap;align-items:center}
.ligne-commentaire label{flex-basis:100%}
.ligne-commentaire input{flex:1;min-width:12rem;width:auto}
.ajout-point{flex-direction:row;flex-wrap:wrap;align-items:center}
.ajout-point label{flex-basis:100%}
.ajout-point input{flex:1;min-width:8rem;width:auto}

/* alignements de la page d'état des lieux du tour d'horizon (rev. 2, 04/10/2026) */
/* le titre d'une carte colle au haut de la carte : plus de bande vide au-dessus */
.card.orientation h2.zone{margin:0 0 .7rem;font-size:1.15rem;line-height:1.2}
.card.orientation>:last-child{margin-bottom:0}
.orientation-duo{align-items:stretch}
.orientation-duo .card{display:flex;flex-direction:column;padding:1rem 1.3rem}
.orientation .finalite-texte{margin:0 0 .6rem}
.orientation .pied-carte{margin-top:auto;padding-top:.7rem}
.orientation .mes-themes{margin-top:auto}
.liste-priorites{margin:0}
.liste-priorites li{align-items:baseline}
/* le bandeau : textes empilés serrés, centrés en hauteur avec le bouton */
.lancer-tour{padding:.9rem 1.3rem;align-items:center}
.lancer-tour .info{justify-content:center;gap:.2rem}
.lancer-tour .info p{margin:0}
.lancer-tour .actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem}
.lancer-tour .actions form,.lancer-tour .actions p{margin:0}
/* même règle pour les autres cartes de l'onglet : le titre commence en haut de la carte */
.card.avis-enjeux>h2:first-child,.card>h2:first-child,.historique-tours>h2:first-child{margin-top:0}
.card>h2.zone,.card>form>h2.zone{margin-top:0}

/* Un seul gabarit de tuile pour tout l'outil (04/10/2026) : centrée, hauteur commune,
   chiffre en haut, libellé dessous, seuil ou détail en dernière ligne discrète. */
.tiles{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));align-items:stretch}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:.25rem;min-height:5.4rem;padding:.7rem .6rem;border-radius:8px}
a.tile:hover{border-color:var(--action)}
.tile .big{order:1;line-height:1;display:block}
.tile:has(.big) .lab{order:2}
.tile .lab{font-family:inherit;font-size:.84rem;letter-spacing:0;text-transform:none;line-height:1.2;text-wrap:balance;color:var(--muted)}
.tile .seuil,.tile .detail{order:3;display:block;margin:0;font-size:.76rem;line-height:1.2;color:var(--muted)}
.tile .big:has(+ .seuil){display:block}
.tile .detail{display:flex;align-items:center;justify-content:center;gap:.35rem}
.cal-tuiles .tile .lab{justify-content:center}
.tiles.egales .tile{justify-content:center}
.tile .rv-aide-t{margin-top:.1rem;text-wrap:balance}
.tile:has(.rv-aide-t){justify-content:flex-start;padding-top:.9rem;gap:.35rem}

/* espacements (04/10/2026) : l'écartement des mots n'est que pour les titres condensés ;
   une phrase d'aide posée dans un titre, et le libellé d'une tuile, gardent l'espace normal */
h2 .hint,h3 .hint,summary .hint,.tile .lab,.tile .detail,.tile .seuil{word-spacing:normal}
/* tuiles du calendrier : on revient à la présentation d'origine (libellé, chiffre, détails,
   alignés à gauche), plus lisible avec trois lignes de texte par tuile. */
.cal-tuiles .tile{display:block;align-items:initial;justify-content:initial;text-align:left;
  gap:0;min-height:0;padding:.7rem .8rem;border-radius:5px}
.cal-tuiles .tile .lab{display:flex;align-items:center;justify-content:flex-start;gap:.35rem;order:0;
  font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  line-height:normal;text-wrap:wrap;color:var(--muted);word-spacing:.12em}
.cal-tuiles .tile .big{order:0;display:block;line-height:1.15;margin:0}
.cal-tuiles .tile .detail{order:0;display:flex;align-items:center;justify-content:flex-start;gap:.35rem;
  font-size:.8rem;line-height:normal;color:var(--ink-2);margin:.1rem 0 0}
.cal-tuiles .tile .detail.discret{color:var(--muted)}

/* fil d'Ariane des écrans d'administration atteints depuis Réglages (Sauvegardes) */
.fil{margin:0 0 .6rem;font-size:.88rem;color:var(--muted)}
.fil a{color:var(--action)}

/* Équipe, onglet Rôles (04/10/2026) */
.tab-roles td{vertical-align:middle}
.tab-roles tr.grp td{background:var(--surface-2);font-family:"Asap Condensed",Asap,sans-serif;font-weight:700;color:var(--anthracite);letter-spacing:.03em}
.tab-roles .code{font-family:"Asap Condensed",Asap,sans-serif;font-weight:700;color:var(--muted);margin-right:.5rem}
.tab-roles .ce-que{color:var(--ink-2);font-size:.9rem;border-left:1px solid var(--rule);vertical-align:top}
.tab-roles .vide{color:var(--muted);border:1px dashed var(--rule-2);border-radius:4px;padding:.15rem .5rem;font-size:.88rem}
.tab-roles select{max-width:100%}
.tab-roles td:nth-child(2),.tab-roles td:nth-child(3){white-space:nowrap}
.cases-personnes{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.cases-personnes label{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}

/* Demandes entre personnes (Mes actions) */
.demandes { list-style: none; margin: 0 0 14px; padding: 0; }
.demandes li { padding: 10px 0; border-top: 1px solid var(--line, #e3e1dc); }
.demandes li:first-child { border-top: 0; }
.demandes p { margin: 0 0 6px; }
.demandes .gestes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.demandes .gestes form { display: flex; gap: 6px; align-items: center; margin: 0; }
.demandes .gestes input[type=text] { min-width: 12rem; }

/* Aide de la réunion de suivi : trois pas, une échelle, trois issues */
.aide-pas { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.aide-pas li { background: #fff; border: 1px solid var(--line, #e3e1dc); border-radius: 10px; padding: 16px 18px; text-align: center; position: relative; }
.aide-pas li:not(:last-child)::after { content: "›"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; color: var(--accent, #b0481f); line-height: 1; }
.aide-pas svg { width: 52px; height: 52px; fill: none; stroke: #3d4256; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aide-pas svg .accent { stroke: var(--accent, #b0481f); }
.aide-pas h2 { margin: 6px 0 4px; font-size: 1.15rem; }
.aide-pas p { margin: 0; color: #4a4f61; }
.aide-note { margin: 14px 0 20px; }
.aide-note p { margin: 0; }
.aide-echelle { list-style: none; margin: 8px 0 22px; padding: 0; display: grid; gap: 6px; }
.aide-echelle li { width: var(--w); min-width: 18rem; background: #fff; border: 1px solid var(--line, #e3e1dc); border-left: 5px solid var(--accent, #b0481f); border-radius: 6px; padding: 8px 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.aide-echelle li span { font-weight: 700; color: var(--accent, #b0481f); }
.aide-echelle li i { font-style: normal; color: #6a6f80; font-size: .92rem; }
.aide-issues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 22px; }
.aide-issues > div { background: #fff; border: 1px solid var(--line, #e3e1dc); border-radius: 10px; padding: 14px 16px; }
.aide-issues svg { width: 30px; height: 30px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aide-issues .ok svg { stroke: #2e7d4f; }
.aide-issues .att svg { stroke: #b07a1f; }
.aide-issues .non svg { stroke: #7a7f90; }
.aide-issues h3 { margin: 6px 0 2px; }
.aide-issues p { margin: 0; color: #4a4f61; }
.aide-plus { margin-top: 10px; }
.aide-plus summary { cursor: pointer; font-weight: 700; }
.hors-grille dt { font-weight: 700; }
@media (max-width: 760px) {
  .aide-pas, .aide-issues { grid-template-columns: 1fr; }
  .aide-pas li:not(:last-child)::after { display: none; }
  .aide-echelle li { width: 100%; }
}

/* Aide réunion : tout centré, lignes équilibrées */
.aide-issues > div { text-align: center; }
.aide-issues h3, .aide-pas h2 { text-align: center; }
.aide-note { max-width: 40rem; margin: 16px auto 22px; text-align: center; }
.aide-pas p, .aide-issues p, .aide-note p { text-wrap: balance; }
.aide-echelle { justify-items: center; }
.aide-echelle li { justify-content: flex-start; }
@media (max-width: 760px) { .aide-pas p br, .aide-issues p br, .aide-note p br { display: none; } }

/* Compétences : un degré se lit en couleur, et le chiffre reste pour qui ne distingue pas les teintes.
   Une seule teinte qui s'assombrit avec le degré : on voit d'un coup d'oeil où l'équipe est forte. */
:root{--d0:#ECECEF;--d0-t:#6E707B;--d1:#DDF3F6;--d1-t:#004E59;--d2:#97D8E3;--d2-t:#00323A;
  --d3:#0A7A8C;--d3-t:#fff;--d4:#004E59;--d4-t:#fff}
.dg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;
  font-size:.8rem;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(35,39,51,.12)}
.dg.d0{background:var(--d0);color:var(--d0-t)} .dg.d1{background:var(--d1);color:var(--d1-t)}
.dg.d2{background:var(--d2);color:var(--d2-t)} .dg.d3{background:var(--d3);color:var(--d3-t)}
.dg.d4{background:var(--d4);color:var(--d4-t)}
.dg.dn{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-2);opacity:.55;width:12px;height:12px;border-radius:50%}
.dg.vieux{outline:2px solid var(--warn-line);outline-offset:1px}
.dg.pt{width:20px;height:20px;font-size:.7rem;margin-right:2px}
/* Couverture : un point, sans jugement sur personne. */
.ep{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex:0 0 auto;vertical-align:baseline}
.e-couverte{background:var(--ok-line)} .e-avec_appui{background:var(--mois-line)}
.e-manque{background:var(--warn-line)} .e-sans_cible{background:transparent;box-shadow:inset 0 0 0 2px var(--rule-2)}
.cache{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;padding:0;border:0}
form.filtres .tiles.resume{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:.7rem}
button.tile{font:inherit;text-align:left;cursor:pointer;width:100%}
.tile.ok .big{color:var(--ok)} .tile.mois .big{color:var(--mois)}
.filtres-ligne{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin:.2rem 0 .8rem}
.filtres-ligne label{font-size:.85rem;color:var(--ink-2)}
.choix-personnes{position:relative}
.choix-personnes summary{cursor:pointer;font-size:.9rem;color:var(--ink-2)}
.choix-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.2rem .8rem;max-height:14rem;overflow:auto;
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:.5rem .7rem;margin-top:.3rem}
.choix-liste label{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--ink)}
.legende{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;font-size:.82rem;color:var(--ink-2);margin:.2rem 0 .7rem}
.legende .leg-titre{font-family:"Asap Condensed",Asap,sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legende .leg{display:inline-flex;align-items:center;gap:.3rem}
.legende .dg.pt{margin-right:0}
/* La grille garde son en-tête et sa première colonne : 50 personnes, c'est un défilement, pas un puzzle. */
.heat-wrap{max-height:72vh;overflow:auto}
table.heat,table.synth{border-collapse:separate;border-spacing:0;width:100%}
table.heat th,table.heat td,table.synth th,table.synth td{padding:.22rem .45rem;border-bottom:1px solid var(--rule);vertical-align:middle}
table.heat thead th,table.synth thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:left;
  font-family:"Asap Condensed",Asap,sans-serif;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
table.heat th.lbl,table.synth th.lbl{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;font-weight:500;
  min-width:15rem;max-width:22rem;box-shadow:1px 0 0 var(--rule)}
table.heat thead th.lbl,table.synth thead th.lbl{z-index:3;background:var(--surface-2)}
table.heat th.lbl .hint,table.synth th.lbl .hint{display:block;margin-left:1.05rem}
table.heat th.c,table.heat td.c{text-align:center;padding:.22rem .15rem;min-width:34px}
table.heat td.cible,table.synth td.cible{white-space:nowrap}
table.heat tr.grp th.zone,table.synth tr.grp th.zone{position:static;background:var(--surface-2);font-family:"Asap Condensed",Asap,sans-serif;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:.35rem .7rem;box-shadow:none}
table.heat tbody tr:hover th.lbl,table.heat tbody tr:hover td{background:#FAFAFB}
/* La synthèse : une barre par compétence, longue comme la part de l'équipe déjà évaluée, découpée par degré. */
table.synth td.qui{min-width:16rem}
.barre-fond{height:22px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin-bottom:.15rem}
.barre{display:flex;height:100%;min-width:0}
.barre .seg{display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;min-width:1.2rem}
.barre .seg.d1{background:var(--d1);color:var(--d1-t)} .barre .seg.d2{background:var(--d2);color:var(--d2-t)}
.barre .seg.d3{background:var(--d3);color:var(--d3-t)} .barre .seg.d4{background:var(--d4);color:var(--d4-t)}
table.synth td .hint{display:block}

/* le formulaire de filtres est un flex en ligne ailleurs : ici deux blocs pleine largeur */
form.filtres{flex-wrap:wrap}
form.filtres > .tiles.resume,form.filtres > .filtres-ligne{flex:1 1 100%;width:100%;min-width:0}
form.filtres .filtres-ligne label{display:inline;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:.85rem}
form.filtres .filtres-ligne select{width:auto;min-width:11rem;max-width:18rem}
form.filtres .filtres-ligne input[type=search]{width:14rem;max-width:100%}
form.filtres .filtres-ligne input[type=checkbox]{width:auto;height:auto}

/* matrices : les colonnes se règlent à la poignée (static/js/colonnes.js, mode libre) */
table.heat.redim.fige th.lbl,table.synth.redim.fige th.lbl{max-width:none}
table.heat th.c{font-size:.72rem}
.gestion{font-size:.9rem;margin:.2rem 0 .6rem}
table.heat.redim th.lbl,table.synth.redim th.lbl{min-width:6rem}
table.heat.redim th.c,table.heat.redim td.c{min-width:28px}

/* Compétences, 06/10/2026 : hors périmètre, appui externe, libellé cliquable */
table.heat td.c.hors{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--surface-2) 5px 7px)}
table.heat th.c.ext,table.heat td.c.ext{border-left:1px solid var(--rule-2)}
.ext-case{display:inline-flex;align-items:center;gap:2px}
.ext-n{font-size:.7rem;color:var(--ink-2);font-weight:600}
/* Matrice aux colonnes réglées : le cadre se resserre sur le tableau (colonnes.js, 06/10/2026) */
.tbl-wrap.ajuste{width:fit-content;max-width:100%}
.dg.dq{background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2)}
a.lien-comp{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rule-2)}
a.lien-comp:hover{color:var(--action);border-bottom-color:var(--action)}
.legende .ep.e-hors{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--rule-2) 3px 5px);border-radius:2px}
table.cibles input[type=number]{width:3.4rem}
table.cibles td.coche{width:2rem;text-align:center}
table.cibles .suit{color:var(--ink-2);font-style:italic}
table.prest-grille select{width:auto;min-width:8rem}

/* Métiers, fiche d'une compétence, parcours (06/10/2026) */
.qual{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;border-radius:999px;padding:.05rem .5rem;margin:.1rem 0;white-space:nowrap}
.qual .who{margin-right:0}
.q-qualifie{background:var(--ok-bg);color:var(--ok)}
.q-demande{background:var(--warn-bg);color:var(--warn)}
.q-en_devenir{background:var(--surface-2);color:var(--ink-2)}
.etiquettes{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .8rem}
.grille-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:.8rem;margin-bottom:.8rem;align-items:start}
.grille-fiche .card{margin:0}
.grille-fiche ul,ul.parcours{margin:.3rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
ul.liste-qui{list-style:none;padding-left:0}
ul.liste-qui li{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
ul.parcours li{line-height:1.45}
ul.parcours .an{display:inline-block;min-width:4.6rem;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
ul.parcours li.a-relire{background:var(--warn-bg);border-radius:4px;padding:.2rem .4rem;list-style-position:inside}
ul.parcours .st,.preuves .st{margin:.1rem .15rem .1rem 0}
.chemin{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;color:var(--ink-2);word-break:break-all;user-select:all}
.gestes-el{margin-left:.4rem;font-size:.85rem}
.gestes-el a,.gestes-el .en-ligne{margin-left:.35rem}
.preuves{display:flex;flex-direction:column;gap:.15rem;margin-top:.3rem;font-size:.82rem;color:var(--ink-2)}
.preuves label{display:flex;gap:.3rem;align-items:baseline;text-transform:none;letter-spacing:0;font-weight:400}
.metier-perso{border-top:1px solid var(--rule);padding-top:.6rem;margin-top:.6rem}
.metier-perso:first-of-type{border-top:0;margin-top:0}
section.card.a-valider{border-color:var(--warn-line)}
section.card.metier h2 .petit{font-size:.8rem;font-weight:400;margin-left:.4rem}
.metiers-simples{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .6rem}
a.tag-comp{display:inline-block;font-size:.76rem;line-height:1.3;padding:.05rem .45rem;margin:.1rem .1rem .1rem 0;border-radius:3px;background:var(--surface-2);color:var(--ink-2);text-decoration:none;border:1px solid var(--rule)}
a.tag-comp:hover{color:var(--action);border-color:var(--action)}
button.lien.doc{font-size:.8rem;margin-left:.3rem}

/* Preuves et revue de cohérence (07/10/2026) */
.sorte{display:inline-block;font-family:"Asap Condensed",Asap,sans-serif;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:.02rem .4rem;border-radius:3px;border:1px solid var(--rule-2);color:var(--ink-2);vertical-align:.05rem}
.sorte.s-certificat{border-color:var(--action);color:var(--action)}
.sorte.s-experience{border-color:var(--ok-line);color:var(--ok)}
a.tag-comp.a-confirmer{border-style:dashed;background:transparent}
.revue-bandeau{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.2rem 0 .6rem}
.preuve-revue{border-top:1px solid var(--rule);padding:.6rem 0}
.preuve-revue:first-of-type{border-top:0}
.choix-liens{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.3rem}
.choix-liens label{display:inline-flex;gap:.3rem;align-items:baseline;text-transform:none;letter-spacing:0;font-weight:400;font-size:.92rem}
.choix-liens label.declare{color:var(--ink-2)}
.preuve-mini{display:inline-block;font-size:.76rem;padding:0 .35rem;margin:.05rem .15rem .05rem 0;border-radius:3px;background:var(--surface-2);font-variant-numeric:tabular-nums}
.preuve-revue a.petit,.preuve-revue label.petit{font-size:.8rem;font-weight:400;margin-left:.4rem;white-space:nowrap}
.titre-sorte{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6b6b6b);margin:1.6rem 0 .4rem}

/* 13/10/2026 : « grâce à un prestataire » en violet, pour ne plus se confondre avec les bleus des niveaux. */
.e-avec_appui{background:var(--hold-line)}
.sortir button.vue-membre-on{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}

/* 15/10/2026 : logo de l'organisation (barre, connexion, impression) et icônes de la barre. */
.bar .org-logo{display:flex;align-items:center;gap:.5rem}
.bar .org-logo img{height:30px;max-width:150px;object-fit:contain;display:block}
.logo-impression{display:none}
@media print{.logo-impression{display:block;margin:0 0 .6rem}.logo-impression img{height:36px;max-width:200px;object-fit:contain}}
.logo-connexion{display:block;max-height:64px;max-width:240px;object-fit:contain;margin:0 0 1rem}
nav.main .rub summary .ic,nav.main .tombe a .ic{color:var(--ink-2)}
nav.main .rub.on summary .ic,nav.main .tombe a.on .ic{color:var(--orange)}
.sous-onglets a .ic,.atelier-nav a .ic,.dossier-onglets a .ic{margin-right:.35em}
.sous-onglets a.on .ic,.dossier-onglets a.on .ic{color:var(--orange)}