/* ═══════════════════════════════════════════════════════════════
   KCP — la feuille de style du site. Chargee par les dix-sept pages.
   Ce fichier est la PROPOSITION : la palette de kcp.css est reprise
   telle quelle (c'est l'identite de KCP, on n'y touche pas).
   Ce qui change : la typographie, l'echelle, et le rythme vertical.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Palette : INCHANGEE, reprise de kcp.css ── */
  --bg:#f6f4ee; --surface:#ffffff; --surface2:#efece2; --surface3:#e7e3d3;
  --border:#d3cebd; --border-strong:#b8b2a0;
  --ink:#16150f; --ink-soft:#3d3b30; --muted:#524e3e;
  --accent:#c8f55a; --accent-deep:#4d6b14;
  --dark:#14160f; --dark-soft:#1d2016; --dark-border:#2c2f22;
  --dark-text:#eef0e5; --dark-muted:#9aa088;
  --danger:#8a2f2f; --danger-bg:rgba(138,47,47,0.06); --danger-br:rgba(138,47,47,0.28);

  /* ── CE QUI CHANGE 1 : trois polices, trois roles ── */
  --brand:'Syne', system-ui, sans-serif;        /* MARQUE SEULE : le K et le mot KCP */
  --display:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            Helvetica, Arial, sans-serif;        /* titres : police systeme, standard */
  --text:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         Helvetica, Arial, sans-serif;           /* NOUVEAU : tout texte suivi */
  --mono:'DM Mono', ui-monospace, monospace;     /* donnees seules : dates, ids, #slug */

  /* ── CE QUI CHANGE 2 : six pas au lieu de quatorze tailles ──
     L'echelle retenue le 2 septembre. Elle etait posee au runtime par le
     selecteur de la maquette ; sans lui, la feuille doit la porter, sinon
     le site publie rend un cran au-dessus de ce qui a ete valide. */
  --t-meta:11px; --t-sm:12.5px; --t-body:14px;
  --t-lg:17px;   --t-xl:21px;   --t-display:27px;

  /* ── CE QUI CHANGE 3 : un rythme unique, plus de surcharge par page ── */
  --s1:0.5rem; --s2:0.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem; --s6:3rem;
  --r:14px; --r-sm:10px;
  --lh:1.55;
}

/* La barre laterale garde l'echelle precedente : elle est un chrome de
   navigation, pas du contenu, et ses entrees valent alors exactement la
   taille du texte courant. C'est ce qui a ete valide. */
.side { --t-meta:12px; --t-sm:14px; --t-body:16px;
        --t-lg:20px;   --t-xl:24px; --t-display:32px; }

html { background:var(--bg); }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:var(--t-body); line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}

/* ── Typographie ─────────────────────────────────────────────── */
h1,h2,h3 { font-family:var(--display); letter-spacing:-0.015em; line-height:1.25; color:var(--ink); }
h1 { font-size:var(--t-xl); font-weight:700; }      /* 24, pas 32 : moins de declamation */
h2 { font-size:var(--t-lg); font-weight:700; }
h3 { font-size:var(--t-body); font-weight:700; }
p  { max-width:68ch; }                    /* mesure de lecture bornee */
.sub  { color:var(--muted); font-size:var(--t-sm); }
.meta { font-family:var(--mono); font-size:var(--t-meta); color:var(--muted); }
.data { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.eyebrow { font-family:var(--mono); font-size:var(--t-meta); color:var(--accent-deep);
  letter-spacing:0.14em; text-transform:uppercase; }
.sect-h { font-family:var(--mono); font-size:var(--t-meta); color:var(--muted);
  letter-spacing:0.12em; text-transform:uppercase; }

/* ── Titre de section DANS un contenu (fiche, note, panneau).
   Il pese plus que le texte qu'il coiffe : c'est la hierarchie, pas un ornement.
   Le filet fait le travail de separation que l'ancienne etiquette mono ne faisait pas. ── */
.sect-title { font-family:var(--display); font-size:var(--t-body); font-weight:700;
  color:var(--ink); letter-spacing:0; text-transform:none;
  padding-bottom:var(--s1); border-bottom:1.5px solid var(--border);
  margin-top:var(--s4); margin-bottom:var(--s2); }
.sect-title:first-child { margin-top:0; }

/* ── Barre laterale (modele : Wispr Flow / Excalidraw) ───────── */
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.side { background:var(--surface2); border-right:1.5px solid var(--border);
  display:flex; flex-direction:column; padding:var(--s3); gap:var(--s4); position:sticky; top:0; height:100vh; }
.side-brand { display:flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s2); }
.mark { width:30px; height:30px; border-radius:8px; background:var(--accent); color:var(--dark);
  display:grid; place-items:center; font-family:var(--brand); font-weight:700; font-size:var(--t-sm); }
.side-name { font-family:var(--brand); font-weight:700; font-size:var(--t-body); }
.tag-beta { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-deep); padding:2px 6px; border-radius:5px; font-weight:500; }
.side nav { display:flex; flex-direction:column; gap:2px; }
.side-grp { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); padding:var(--s2) var(--s2) var(--s1); }
.nav-i { display:flex; align-items:center; gap:var(--s2); padding:0.5rem var(--s2);
  border-radius:var(--r-sm); color:var(--ink-soft); text-decoration:none; font-size:var(--t-sm);
  transition:background .12s;
  /* un <button> centre son texte et n'herite pas de la police : on force les deux */
  width:100%; text-align:left; font-family:inherit; border:none; background:none; cursor:pointer; }
.nav-i:hover { background:var(--surface3); color:var(--ink); }
.nav-i[aria-current="page"] { background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:0 1px 3px rgba(22,21,15,.06); }
/* Une icone dessinee s'aligne sur la ligne de base comme un caractere, ce qui
   la fait remonter de trois pixels. La sortir du flux de ligne et centrer sa
   boite la remet exactement a la place qu'occuperait un glyphe. La regle vaut
   pour les deux natures : un caractere seul dans une boite centree ne bouge
   pas, un dessin oui. */
.nav-i .ico { width:17px; flex-shrink:0; opacity:.75;
  display:inline-flex; align-items:center; justify-content:center; }
.nav-i .ico svg { display:block; width:16px; height:16px; }
.nav-i .n { margin-left:auto; background:var(--accent-deep); color:#fff; font-family:var(--mono);
  font-size:10px; min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; padding:0 5px; }
.side-foot { margin-top:auto; border-top:1.5px solid var(--border); padding-top:var(--s2); }
.who { display:flex; align-items:center; gap:var(--s2); padding:var(--s2); border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink); }
.who:hover { background:var(--surface3); }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--dark); color:var(--accent);
  display:grid; place-items:center; font-family:var(--brand); font-weight:700; font-size:var(--t-sm); }
.who-n { font-size:var(--t-sm); font-weight:600; line-height:1.25; }
.who-s { font-size:var(--t-meta); color:var(--muted); }

/* ── Zone principale ─────────────────────────────────────────── */
.main { padding:var(--s5) var(--s5) var(--s6); max-width:1080px; }
.stack { display:flex; flex-direction:column; gap:var(--s4); }

/* ── Cartes et lignes ────────────────────────────────────────── */
.card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r);
  box-shadow:0 1px 6px rgba(22,21,15,.06); }
.card-pad { padding:var(--s4); }
.card-h { padding:var(--s2) var(--s4); border-bottom:1.5px solid var(--border); background:var(--surface2);
  border-radius:var(--r) var(--r) 0 0; display:flex; align-items:center; justify-content:space-between; }
.row { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  border-top:1px solid var(--border); text-decoration:none; color:inherit; }
.row:first-of-type { border-top:none; }
.row:hover { background:var(--surface2); }
.row-t { font-family:var(--display); font-weight:600; font-size:var(--t-body); }
.kpi b, .plan-n { font-family:var(--display); }
.row-s { font-size:var(--t-sm); color:var(--muted); }
.row-arr { margin-left:auto; color:var(--border-strong); }
.pill { background:var(--accent-deep); color:#fff; font-family:var(--mono); font-size:var(--t-meta);
  min-width:22px; height:22px; border-radius:11px; display:grid; place-items:center; padding:0 7px; }

/* ── Boutons ─────────────────────────────────────────────────── */
.btn { font-family:var(--display); font-size:var(--t-sm); font-weight:600; padding:0.6rem 1rem;
  border-radius:var(--r-sm); border:1.5px solid var(--border-strong); background:var(--surface);
  color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  gap:var(--s1); }
.btn:hover { border-color:var(--ink); }
.btn-1 { background:var(--dark); color:var(--dark-text); border-color:var(--dark); }
.btn-1:hover { background:var(--dark-soft); }
.btn-danger { color:var(--danger); border-color:var(--danger-br); background:transparent; }
.btn-danger:hover { background:var(--danger-bg); border-color:var(--danger); }

/* ── Note ────────────────────────────────────────────────────── */
.note { display:flex; gap:var(--s2); padding:var(--s3); background:rgba(77,107,20,.06);
  border:1px solid rgba(77,107,20,.18); border-left:3px solid var(--accent-deep);
  border-radius:var(--r-sm); font-size:var(--t-sm); color:var(--ink-soft); }
.note b { color:var(--accent-deep); }

/* ── Focus visible : jamais d'outline supprime sans remplacant ── */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline:2px solid var(--accent-deep); outline-offset:2px; }

/* ── Mouvement : respecte la preference systeme ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (max-width:880px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; }
  .side nav, .side-grp { display:none; }
  .main { padding:var(--s4) var(--s3) var(--s5); }
}

/* ═══ v3 — navigation par niveau, fiche ═══════════════════════════ */

/* Fil d'Ariane : on descend d'un niveau a la fois, on doit pouvoir remonter. */
.fil { display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap; font-size:var(--t-sm); }
.fil a { color:var(--muted); text-decoration:none; }
.fil a:hover { color:var(--ink); text-decoration:underline; }
.fil .sep { color:var(--border-strong); }
.fil .ici { color:var(--ink); font-weight:600; }

/* Carte d'un enfant direct. Le noeud et le tiroir ne se ressemblent pas :
   la nature se lit au prefixe de l'identifiant, jamais au nombre d'enfants. */
.doc { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r);
  padding:var(--s3); position:relative; display:flex; flex-direction:column; gap:var(--s1); min-height:132px; }
.doc:hover { border-color:var(--border-strong); box-shadow:0 2px 10px rgba(22,21,15,.07); }
.doc:focus-within { border-color:var(--ink); }
.doc-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.doc-n a { color:inherit; text-decoration:none; }
.doc-n a::after { content:''; position:absolute; inset:0; border-radius:var(--r); }
.doc-r { font-size:var(--t-sm); color:var(--ink-soft); line-height:1.5; }
.doc-f { margin-top:auto; display:flex; gap:var(--s2); align-items:center; }
.doc.sujet .doc-n { font-family:var(--mono); font-size:var(--t-sm); font-weight:500; color:var(--accent-deep); }
.doc.ens { background:var(--surface2); }
.doc.ens .doc-n { font-family:var(--display); font-size:var(--t-body); font-weight:700; color:var(--ink); }
.doc.alerte { border-color:var(--accent-deep); }
.grid-doc { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s3); }

/* Fiche : les cinq sections du modele, dans l'ordre. Titres en S3. */
.fiche-sec { margin-top:var(--s4); }
.fiche-sec .sect-title { margin-top:0; }
.fiche-ul { margin:0 0 0 1.15rem; }
.fiche-ul li { margin-bottom:.4rem; font-size:var(--t-body); color:var(--ink-soft); }
.fiche-ul li::marker { color:var(--accent-deep); }
.fiche-vide { font-size:var(--t-sm); color:var(--muted); font-style:italic; }
/* Les echeances d'une fiche : une date, son objet, une paire par ligne.
   `config.js` construit cette grille pour toutes les pages, mais sa mise en
   forme ne vivait que dans deux d'entre elles. Partout ailleurs les paires se
   suivaient en flux : la date collee a son texte, et l'echeance suivante collee
   a la precedente. Le code partage ne depend plus d'une regle locale. */
.ech { display:grid; grid-template-columns:auto 1fr; gap:.35rem var(--s3); }
.ech .d { font-family:var(--mono); font-size:var(--t-sm); color:var(--accent-deep); white-space:nowrap; }
.ech .o { font-size:var(--t-body); color:var(--ink-soft); }

/* ═══ v4 — moins d'elements, plus d'air ═════════════════════════ */

/* Filtre discret : il vit dans la ligne du titre, pas en bandeau plein. */
.ligne-titre { display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  border-bottom:1.5px solid var(--border); padding-bottom:var(--s1); margin-bottom:var(--s3); }
.ligne-titre .sect-title { border:none; margin:0; padding:0; }
.filtre { display:flex; align-items:center; gap:var(--s1); background:var(--surface);
  border:1.5px solid var(--border); border-radius:8px; padding:.3rem .6rem; min-width:190px; }
.filtre:focus-within { border-color:var(--ink); }
.filtre input { flex:1; border:none; outline:none; background:transparent; font-family:var(--text);
  font-size:var(--t-sm); color:var(--ink); min-width:0; }

/* Portfolio en liste : une ligne par entree. Neuf lignes tiennent a l'ecran. */
.pf { border:1.5px solid var(--border); border-radius:var(--r); background:var(--surface); overflow:hidden; }
.pf-l { display:grid; grid-template-columns:210px 1fr auto; gap:var(--s3); align-items:baseline;
  padding:var(--s3) var(--s4); border-top:1px solid var(--border); position:relative; }
.pf-l:first-child { border-top:none; }
.pf-l:hover { background:var(--surface2); }
.pf-n a { text-decoration:none; color:inherit; }
.pf-n a::after { content:''; position:absolute; inset:0; }
.pf-l.ens .pf-n { font-family:var(--display); font-weight:700; font-size:var(--t-body); }
.pf-l.sujet .pf-n { font-family:var(--mono); font-size:var(--t-sm); font-weight:500; color:var(--accent-deep); }
.pf-r { font-size:var(--t-sm); color:var(--ink-soft); line-height:1.5; }
.pf-m { display:flex; align-items:center; gap:var(--s2); white-space:nowrap; }
.pf-l.frais { box-shadow:inset 3px 0 0 var(--accent-deep); }
@media(max-width:760px){ .pf-l{ grid-template-columns:1fr; gap:var(--s1); } }

/* Arbre : la carte, en organigramme descendant. Ordre alphabetique stable. */
.arbre { display:block; margin:0 auto; }
.arbre text { font-family:var(--text); }
.arbre .lien { stroke:var(--border-strong); stroke-width:1.4; fill:none; }
.arbre .b-ens { fill:var(--surface2); stroke:var(--border-strong); stroke-width:1.5; }
.arbre .b-suj { fill:var(--surface); stroke:var(--border); stroke-width:1.5; }
.arbre .b-head { fill:var(--dark); stroke:var(--dark); }
.arbre .n-ens { font-size:15px; font-weight:700; fill:var(--ink); }
.arbre .n-suj { font-family:'DM Mono',monospace; font-size:13.5px; fill:var(--accent-deep); }
.arbre .n-head { font-size:15px; font-weight:700; fill:var(--dark-text); }
.arbre .cnt { font-family:'DM Mono',monospace; font-size:12.5px; fill:var(--muted); }
.arbre .chevron { font-size:19px; fill:var(--ink-soft); }
.arbre .chev:hover .chevron { fill:var(--ink); }
.arbre g.item { cursor:pointer; }
.arbre g.item:hover rect { stroke:var(--ink); }
.arbre g.item.on rect { stroke:var(--accent-deep); stroke-width:2.5; }

/* ═══ v5 ═════════════════════════════════════════════════════════ */

/* Groupes de la barre laterale, mieux delimites : de l'air au-dessus et un
   filet. Separer par du blanc plutot que par des traits partout — le filet
   ne sert qu'a ouvrir un groupe, pas a encadrer chaque entree. */
.side-grp { padding:var(--s4) var(--s2) var(--s1); margin-top:var(--s1);
  border-top:1px solid var(--border); color:var(--ink-soft); font-weight:500; }
.side nav > .side-grp:first-child { border-top:none; margin-top:0; padding-top:var(--s2); }

/* La carte deborde en largeur : elle defile dans son propre cadre, jamais la page. */
.carte-cadre { border:1.5px solid var(--border); border-radius:var(--r); background:var(--surface);
  padding:var(--s4) var(--s3); overflow-x:auto; }

/* Sujets d'un ensemble, en liste nue : le nom seul, pas de resume. */
.puces { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--s1) var(--s3); }
.puces a { display:block; padding:.4rem .6rem; border-radius:8px; text-decoration:none;
  font-family:var(--mono); font-size:var(--t-sm); color:var(--accent-deep); }
.puces a:hover { background:var(--surface2); }

/* Section vide : elle s'affiche comme les autres, avec sa mention. */
.rien { font-size:var(--t-sm); color:var(--muted); }

/* ═══ v6 ═════════════════════════════════════════════════════════ */

/* Une ligne ENTRE les questions, jamais avant la premiere. */
.q + .q { border-top:1px solid var(--border); }

/* Sujets d'un ensemble — proposition A : ligne dense a trois colonnes. */
.lst { border:1.5px solid var(--border); border-radius:var(--r); background:var(--surface); overflow:hidden; }
.lst-l { display:grid; grid-template-columns:200px 1fr auto; gap:var(--s3); align-items:baseline;
  padding:var(--s2) var(--s3); border-top:1px solid var(--border); position:relative; }
.lst-l:first-child { border-top:none; }
.lst-l:hover { background:var(--surface2); }
.lst-n { font-family:var(--mono); font-size:var(--t-sm); color:var(--accent-deep); }
.lst-n a { color:inherit; text-decoration:none; }
.lst-n a::after { content:''; position:absolute; inset:0; }
.lst-r { font-size:var(--t-sm); color:var(--ink-soft); }
.lst-m { font-family:var(--mono); font-size:var(--t-meta); color:var(--muted); white-space:nowrap; }
.lst-l.frais { box-shadow:inset 3px 0 0 var(--accent-deep); }
@media(max-width:820px){ .lst-l{grid-template-columns:1fr;gap:2px} }

/* Proposition B : vignettes compactes, deux lignes. */
.vign { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:var(--s2); }
.vign > div { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:var(--s2) var(--s3); position:relative; }
.vign > div:hover { border-color:var(--border-strong); }
.vign .t { font-family:var(--mono); font-size:var(--t-sm); color:var(--accent-deep); }
.vign .t a { color:inherit; text-decoration:none; }
.vign .t a::after { content:''; position:absolute; inset:0; border-radius:var(--r-sm); }
.vign .m { font-family:var(--mono); font-size:var(--t-meta); color:var(--muted); margin-top:2px; }

/* Proposition C : deux paquets, ce qui a bouge et le reste. */
.paquet + .paquet { margin-top:var(--s4); }
.paquet-h { display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2); }
.paquet-h .lb { font-family:var(--display); font-size:var(--t-sm); font-weight:700; }
.paquet-h .n { font-family:var(--mono); font-size:var(--t-meta); color:var(--muted); }

/* Chat — depose et interrogation partagent le meme chassis. */
.fil-msg { display:flex; flex-direction:column; gap:var(--s3); }
/* `pre-line` rend les sauts de ligne du message et replie le reste : sans
   lui, retraduire les <br> du moteur ne se verrait pas. */
.msg { max-width:76%; padding:var(--s2) var(--s3); border-radius:var(--r-sm); font-size:var(--t-body); line-height:var(--lh); white-space:pre-line; }
.msg.moi { align-self:flex-end; background:var(--dark); color:var(--dark-text); }
.msg.lui { align-self:flex-start; background:var(--surface); border:1.5px solid var(--border); }
.saisie { display:flex; gap:var(--s2); align-items:flex-end; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--r); padding:var(--s2); }
.saisie textarea { flex:1; border:none; outline:none; resize:none; background:transparent; min-height:56px;
  font-family:var(--text); font-size:var(--t-body); line-height:var(--lh); color:var(--ink); }
.cible { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }

/* Champs de formulaire, communs a toutes les pages de saisie. */
.champ { display:flex; flex-direction:column; gap:var(--s1); }
.champ label { font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.champ .aide { font-size:var(--t-sm); color:var(--muted); }
.champ input[type=text], .champ input[type=email], .champ input[type=password],
.champ select, .champ textarea, .cible select, .saisie textarea {
  width:100%; background:var(--surface2); border:1.5px solid var(--border); border-radius:8px;
  padding:.6rem .8rem; font-family:var(--text); font-size:var(--t-body); color:var(--ink); outline:none; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .cible select:focus {
  border-color:var(--ink); background-color:var(--surface); }
.champ select, .cible select { appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
  linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2.4rem; }
/* Une zone de texte ne s'agrandit qu'en hauteur : l'etirer en largeur casse la
   colonne de lecture et deborde de la carte. */
textarea { resize:vertical; }

/* Onglets, pour les modules qui en portent. */
.ong { display:flex; gap:var(--s1); border-bottom:1.5px solid var(--border); }
.ong button { font-family:var(--display); font-size:var(--t-sm); font-weight:600; padding:.5rem .9rem;
  border:none; background:none; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1.5px; }
.ong button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent-deep); }

/* Etat vide, partout le meme. */
.vide-etat { padding:var(--s6) var(--s4); text-align:center; color:var(--muted); font-size:var(--t-sm); }

/* ═══ v7 ═════════════════════════════════════════════════════════ */

/* Un element a traiter est un BLOC : cadre, fond, respiration. Le traiter le
   fait disparaitre et la file remonte — on nettoie, et ca se voit. */
.bloc { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r);
  padding:var(--s3) var(--s4); }
.bloc + .bloc { margin-top:var(--s3); }
.bloc-h { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s2); }
/* Le sujet ouvre la ligne ; ce qui la ferme se pose a droite, que ce soit un
   niveau ou le nom d'un defaut. Une seule regle, pour que les deux pages
   n'aient pas a le redire chacune de son cote. */
.bloc-h > .crit { margin-left:auto; }
/* Combien de fois le systeme a vu la chose. A gauche de l'etiquette, en
   metadonnee : c'est un compte, pas un jugement. */
.bloc-h > .vues { margin-left:auto; font-family:var(--mono); font-size:var(--t-meta);
  color:var(--muted); white-space:nowrap; }
.bloc-h > .vues + .crit { margin-left:var(--s2); }

/* Le moteur rend le constat avec ses sauts de ligne et ses tirets : sans
   `pre-wrap`, tout se replie en un pave d'une seule coulee. */
.bloc-q { font-size:var(--t-body); line-height:var(--lh); white-space:pre-wrap; }
.bloc-a { margin-top:var(--s3); display:grid; grid-template-columns:1fr auto auto; gap:var(--s2); align-items:stretch; }
.bloc-a textarea { min-height:44px; }
.bloc-a .btn { white-space:nowrap; }
.bloc.parti { opacity:0; transform:translateY(-6px); transition:opacity .18s, transform .18s; }
.etiq { font-family:var(--display); font-size:var(--t-sm); font-weight:700; color:var(--ink); }
.raison { font-size:var(--t-sm); color:var(--muted); margin-top:var(--s1); }

/* Le « ? » des champs qui demandent une explication — repris de la production. */
.lbl-q { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.lbl-q > span:first-child { display:inline-flex; align-items:center; gap:.45rem; }
.qmark { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--ink-soft); font-family:var(--mono); font-size:11px;
  line-height:1; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.qmark:hover { border-color:var(--ink); color:var(--ink); }
.pop-voile { position:fixed; inset:0; background:rgba(22,21,15,.45); z-index:60; display:none; }
.pop-voile.on { display:block; }
.pop { position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(480px,calc(100vw - 2.5rem)); max-height:85vh; overflow:auto; background:var(--surface);
  border:1.5px solid var(--border-strong); border-radius:var(--r); padding:var(--s4); display:none;
  flex-direction:column; gap:var(--s3); box-shadow:0 18px 50px rgba(22,21,15,.25); }
.pop.on { display:flex; }
/* Une fenetre de confirmation : le titre, ce que le geste fait vraiment,
   puis Annuler et le geste. L'action est a droite, la sortie a gauche. */
.pop-t { font-family:var(--display); font-size:var(--t-lg); font-weight:700; color:var(--ink); }
.pop-c { display:flex; flex-direction:column; gap:var(--s2); font-size:var(--t-sm);
  line-height:1.55; color:var(--ink-soft); }
.pop-c p { margin:0; }
.pop-a { display:flex; gap:var(--s2); justify-content:flex-end; flex-wrap:wrap; }
/* Une fenetre qui porte un formulaire a deux colonnes a besoin de largeur. */
.pop.large { width:min(760px,calc(100vw - 2.5rem)); }
.pop .champ + .champ { margin-top:var(--s3); }
.pop-form { display:flex; flex-direction:column; gap:var(--s3); }
.pop .perim-cmp { margin-top:0; }
.btn-danger-plein { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger-plein:hover { background:#732727; border-color:#732727; }
/* L'accuse de reception. Un mot, dans le coin haut droit, cale sur la ligne
   du titre et sur le bord droit de la colonne. Il ne dit que « c'est parti » :
   quand le message a quelque chose a apprendre, il reste dans la page, a
   l'endroit ou l'on vient d'agir. */
.entete-geste { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s3); }
.envoye { display:inline-flex; align-items:center; gap:.45rem; flex-shrink:0;
  height:calc(var(--t-xl) * 1.25); padding:0 var(--s3); border-radius:999px;
  font-family:var(--display); font-size:var(--t-sm); font-weight:600;
  background:var(--n1-bg); border:1.5px solid var(--n1-br); color:var(--n1);
  opacity:0; transition:opacity .18s; }
.envoye.on { opacity:1; }
.envoye .c { display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--n1); color:#fff;
  font-size:10px; line-height:1; }
@media (prefers-reduced-motion: reduce) { .envoye { transition:none; } }

/* Ce qui manque se signale. Un geste principal reste eteint tant que son
   formulaire ne tient pas ; quand on le sollicite quand meme, ce qui reste a
   remplir s'allume. Un bouton qui ne repond pas sans rien dire laisse
   chercher, et c'est toujours au mauvais endroit qu'on cherche. */
.btn.eteint { opacity:.5; cursor:not-allowed; }
.a-completer { animation:kcp-signale .9s ease-out 2; }
.a-completer, .a-completer .perim-vu, .a-completer input, .a-completer select,
.a-completer textarea { border-color:var(--danger) !important; }
.a-completer .btn { border-color:var(--danger); color:var(--danger); }
@keyframes kcp-signale {
  0%, 100% { box-shadow:0 0 0 0 rgba(138,47,47,0); }
  35%      { box-shadow:0 0 0 4px rgba(138,47,47,.22); }
}
@media (prefers-reduced-motion: reduce) { .a-completer { animation:none; } }

/* Un bouton qui ferme definitivement. Il se distingue par sa teinte, mais
   PAS par le rouge : celui-la dit deja le niveau eleve d'une question, et
   deux rouges dans le meme bloc se parasitent. Le beige du site suffit a
   le mettre a part ; le rouge revient dans la fenetre, ou il est seul. */
.btn-sortie { background:var(--surface3); border-color:var(--border-strong); color:var(--muted); }
.btn-sortie:hover { border-color:var(--ink); color:var(--ink); background:var(--surface2); }
.ex-t { font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.ex { padding:var(--s2) var(--s3); border-radius:8px; font-size:var(--t-sm); line-height:1.5; }
.ex.bad { background:rgba(138,47,47,.07); border:1px solid rgba(138,47,47,.2); }
.ex.good { background:rgba(77,107,20,.07); border:1px solid rgba(77,107,20,.2); }

/* Multi-selection a puces — le motif de la production, conserve. */
.ms { position:relative; }
.ms-trigger { width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--surface2); border:1.5px solid var(--border); border-radius:8px; padding:.6rem .8rem;
  font-family:var(--text); font-size:var(--t-body); color:var(--ink); cursor:pointer; text-align:left; }
.ms-trigger.vide { color:var(--muted); }
.ms-panel { position:absolute; top:calc(100% + .3rem); left:0; right:0; z-index:20; display:none;
  flex-direction:column; max-height:230px; overflow-y:auto; background:var(--surface);
  border:1.5px solid var(--border-strong); border-radius:8px; box-shadow:0 10px 26px rgba(22,21,15,.14); }
.ms-panel.on { display:flex; }
.ms-panel button { text-align:left; background:none; border:none; padding:.5rem .8rem; cursor:pointer;
  font-family:var(--mono); font-size:var(--t-sm); color:var(--accent-deep); }
.ms-panel button:hover { background:var(--surface2); }
.ms-panel button[disabled] { color:var(--muted); cursor:not-allowed; }
.puces-sel { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--s2); }
.puce { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:var(--t-meta);
  background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:3px 8px; color:var(--accent-deep); }
.puce button { border:none; background:none; color:var(--muted); cursor:pointer; padding:0; font-size:13px; line-height:1; }
.puce button:hover { color:var(--danger); }

/* Chat : la conversation occupe toute la hauteur, dans son cadre. */
.chat { display:flex; flex-direction:column; height:calc(100vh - 2 * var(--s5)); gap:var(--s3); }
.chat-fil { flex:1; overflow-y:auto; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.chat-fil.depot { background:var(--surface2); }

/* Champ en lecture seule : on montre l'etat courant sans le rendre modifiable. */
.fige { background:var(--surface3); border:1.5px solid var(--border); border-radius:8px;
  padding:.6rem .8rem; font-size:var(--t-body); color:var(--ink-soft); }

/* Les questions d'une fiche, quand on veut les distinguer de l'etat. */
.zone-q { background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--r);
  padding:var(--s3) var(--s4); margin-top:var(--s3); }
.qf { display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:center; padding:var(--s2) 0; }
.qf + .qf { border-top:1px solid var(--border); }
.btn-s { font-size:var(--t-meta); padding:.35rem .7rem; }

/* ═══ v8 ═════════════════════════════════════════════════════════ */

/* Accueil est le point d'ancrage : il se distingue toujours, sans etre allume.
   Un liseré discret quand on n'y est pas, le fond plein quand on y est. */
.nav-i.ancre:not([aria-current]) { border:1px solid var(--border); background:rgba(255,255,255,.45); }
.nav-i.ancre:not([aria-current]):hover { border-color:var(--border-strong); }

/* Criticite d'une question : trois niveaux, lisibles sans legende. */
/* ═══ Le niveau ════════════════════════════════════════════════════
   Trois niveaux, trois couleurs, un seul jeu pour tout le site. La couleur
   dit le NIVEAU et rien d'autre : jamais le type d'un geste, jamais une
   categorie. Les noms metier changent selon le module — eleve/moyen/faible
   pour une question, mauvais/moyen/bon pour un perimetre — la classe est la
   meme : `.n3` ce qui reclame une action, `.n2` l'entre-deux, `.n1` ce qui
   va bien. Les anciens noms restent en alias pour ne rien casser. */
:root {
  --n3:#8a2f2f; --n3-bg:rgba(138,47,47,.10); --n3-br:rgba(138,47,47,.30);
  --n2:#8a6420; --n2-bg:rgba(138,100,32,.11); --n2-br:rgba(138,100,32,.30);
  --n1:#4d6b14; --n1-bg:rgba(77,107,20,.10); --n1-br:rgba(77,107,20,.28);
}
.n3, .crit.haute, .bloc.haute, .bloc.n3 { --niv:var(--n3); --niv-bg:var(--n3-bg); --niv-br:var(--n3-br); }
.n2, .crit.moyenne, .bloc.moyenne, .bloc.n2 { --niv:var(--n2); --niv-bg:var(--n2-bg); --niv-br:var(--n2-br); }
.n1, .crit.basse, .bloc.basse, .bloc.n1 { --niv:var(--n1); --niv-bg:var(--n1-bg); --niv-br:var(--n1-br); }
/* Le quatrieme etat : l'ABSENCE de niveau. Gris, jauge eteinte. Ce n'est pas
   un cran de l'echelle, c'est ce qui se dit quand on n'a rien lu. Le cran le
   plus bas dit « solide » : le mettre ici serait affirmer que le perimetre
   est bon alors que personne ne l'a juge. */
.n0, .bloc.n0 { --niv:var(--muted); --niv-bg:var(--surface2); --niv-br:var(--border); }

/* L'etiquette de niveau. Une jauge de reseau : trois barres allumees quand
   tout va bien, une seule quand il faut agir. La forme porte l'information
   autant que la couleur — elle reste comprise en niveaux de gris.
   Toutes les etiquettes ont la MEME largeur : une colonne de niveaux se lit
   comme une colonne, pas comme un escalier. */
.crit { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono);
  font-size:var(--t-meta); font-weight:600; padding:4px 10px; border-radius:6px;
  letter-spacing:.01em; white-space:nowrap; min-width:196px;
  background:var(--niv-bg); color:var(--niv); border:1px solid var(--niv-br); }
.crit .jauge { display:inline-flex; gap:2px; align-items:flex-end; flex-shrink:0; }
.crit .jauge i { width:3px; background:var(--niv); opacity:.22; border-radius:1px; }
.crit .jauge i:nth-child(1) { height:5px; }
.crit .jauge i:nth-child(2) { height:8px; }
.crit .jauge i:nth-child(3) { height:11px; }
/* Le nombre de barres et la couleur sont DEUX informations distinctes.
   La couleur dit l'urgence — rouge il faut agir, vert tout va bien. Les
   barres comptent ce que l'echelle nomme : une importance elevee en allume
   trois, un perimetre solide aussi. Sans cette separation, la jauge devrait
   se lire a l'envers d'une page a l'autre. */
.j3 .jauge i { opacity:1; }
.j2 .jauge i:nth-child(-n+2) { opacity:1; }
.j1 .jauge i:nth-child(1) { opacity:1; }

.bloc.haute, .bloc.moyenne, .bloc.basse,
.bloc.n0, .bloc.n1, .bloc.n2, .bloc.n3 { border-left:4px solid var(--niv); }
.bloc.basse { border-left:3px solid var(--border-strong); }

/* La pastille du sujet, sur fond tenu — plus de blanc sur blanc. */
/* Le nom d'un sujet. Neutre : le vert dit « c'est bon » ailleurs sur le
   site, et un nom ne dit ni bien ni mal. */
.chip-s { font-family:var(--mono); font-size:var(--t-meta); color:var(--ink-soft);
  background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:2px 8px; }

/* La rangee d'actions d'un bloc : le geste franc a gauche, ce qui repousse
   pousse a droite. Commune a A clarifier et a Ameliorer, qui ont la meme
   forme et doivent donc avoir les memes espacements. */
.actions-B { display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; margin-top:var(--s3); }
.actions-B .repousse { margin-left:auto; display:flex; gap:var(--s2); }


/* Zone de reponse : le meme confort que le depot. Les boutons restent en haut
   quand la zone s'agrandit, ils ne s'etirent plus avec elle. */
.rep-zone { display:grid; grid-template-columns:1fr auto auto; gap:var(--s2); align-items:start;
  margin-top:var(--s3); }
.rep-zone textarea { width:100%; min-height:76px; background:var(--surface2);
  border:1.5px solid var(--border); border-radius:var(--r-sm); padding:var(--s2) var(--s3);
  font-family:var(--text); font-size:var(--t-body); line-height:var(--lh); color:var(--ink);
  outline:none; resize:vertical; }
.rep-zone textarea:focus { border-color:var(--ink); background:var(--surface); }
.rep-zone .btn { white-space:nowrap; }

/* Titre d'un sujet : un badge tenu, plus une ligne de mono nue. */
.badge-sujet { display:inline-flex; align-items:center; gap:.15rem; font-family:var(--mono);
  font-size:var(--t-lg); font-weight:500; color:var(--accent-deep);
  background:rgba(77,107,20,.10); border:1.5px solid rgba(77,107,20,.24);
  border-radius:10px; padding:.35rem .8rem; }
.badge-sujet .h { color:var(--border-strong); }

/* Actions d'un document : deux colonnes de trois, memes libelles partout. */
.actions-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s1) var(--s3); }
.actions-2 a { font-size:var(--t-sm); color:var(--ink-soft); text-decoration:none; padding:.15rem 0; }
.actions-2 a:hover { color:var(--ink); text-decoration:underline; }

/* Petite fenetre de reponse : on repond sans quitter le sujet. */
.mini-voile { position:fixed; inset:0; background:rgba(22,21,15,.45); z-index:60; display:none; }
.mini-voile.on { display:block; }
.mini { position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 2.5rem)); background:var(--surface); border:1.5px solid var(--border-strong);
  border-radius:var(--r); padding:var(--s4); display:none; flex-direction:column; gap:var(--s3);
  box-shadow:0 18px 50px rgba(22,21,15,.25); }
.mini.on { display:flex; }
.mini textarea { width:100%; min-height:120px; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--r-sm); padding:var(--s2) var(--s3); font-family:var(--text); font-size:var(--t-body);
  line-height:var(--lh); color:var(--ink); outline:none; resize:vertical; }
.mini textarea:focus { border-color:var(--ink); background:var(--surface); }

/* Choix multiple : un V discret marque ce qui est pris, le menu reste ouvert. */
.ms-panel { max-height:320px; }
.ms-panel button { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.ms-panel .v { color:var(--accent-deep); font-size:13px; visibility:hidden; }
.ms-panel button.pris .v { visibility:visible; }
.ms-panel button.pris { color:var(--ink-soft); }

/* ── Le formulaire et sa colonne de droite ──
   Un repere visuel constant : ce qu'on fait a gauche, ce qu'il faut en
   savoir a droite. Ce qui vivait en bas de page, sous le bouton, n'etait
   lu qu'apres coup — donc jamais. */
.duo { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--s5); align-items:start; }
@media(max-width:960px){ .duo{grid-template-columns:minmax(0,1fr)} }
.duo > aside { display:flex; flex-direction:column; gap:var(--s3); }
.aside-b { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r);
  padding:var(--s3); }
.aside-b p { font-size:var(--t-sm); color:var(--ink-soft); max-width:none; }
.aside-b p + p { margin-top:var(--s2); }
.aside-b b { color:var(--accent-deep); }
/* Le premier bloc de la colonne porte l'essentiel : son liseré le dit. */
.aside-b.cle { border-color:var(--accent-deep); }
.etapes { display:grid; grid-template-columns:auto 1fr; gap:var(--s2); align-items:baseline; }
.etapes .n { font-family:var(--mono); font-size:var(--t-meta); color:var(--accent-deep); }
.etapes .x { font-size:var(--t-sm); color:var(--ink-soft); }

/* Deux boutons cote a cote, centres, qui ne prennent pas toute la largeur. */
.duo-btn { display:flex; gap:var(--s3); justify-content:center; }
.duo-btn .btn { flex:0 1 200px; justify-content:center; }

/* Reglages : le premier groupe respire comme les suivants. */
.m-nav .side-grp:first-child { padding-top:var(--s2); border-top:none; margin-top:0; }
.m-nav .side-grp { border-top:1px solid var(--border); }

/* ═══ v9 ═══════════════════════════════════════════════════════════ */

/* La carte respire : le cadre a une hauteur de confort, le dessin est centre. */
.carte-cadre { min-height:340px; display:flex; align-items:center; justify-content:center; }

/* Chevron de depliage, distinct du nom : cliquer le nom descend, cliquer le
   chevron deplie. Deux cibles, deux gestes. */
.arbre .chev { cursor:pointer; }
.arbre .chev rect { fill:transparent; stroke:none; }
.arbre .chev:hover text { fill:var(--ink); }

/* Une puce entiere se clique pour se retirer — plus besoin de viser la croix. */
.puce.otable { cursor:pointer; }
.puce.otable:hover { border-color:var(--danger); color:var(--danger); background:rgba(138,47,47,.05); }
.puce.otable:hover .x { color:var(--danger); }

/* Reinitialiser : un rond discret, comme en production. */
.reset-btn { width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--ink-soft); font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
.reset-btn:hover { color:var(--ink); border-color:var(--ink); }

/* Le duo d'actions se distingue des trois destinations : un filet au-dessus. */
.duo-btn { border-top:1px solid var(--border); padding-top:var(--s4); }
.duo-btn .btn { font-size:var(--t-body); padding:.7rem 1rem; }

/* Chat : un seul corps de texte, un peu plus petit, la saisie s'y aligne. */
.msg, .saisie textarea { font-size:var(--t-sm); line-height:1.55; }
.saisie { align-items:flex-start; }
.saisie .btn { margin-top:0; }

/* Depot : ce qu'on tape a la meme taille que l'exemple. */
.depot textarea { font-size:var(--t-body) !important; }

/* Une valeur qu'on doit pouvoir lire et recopier. */
.val-box { font-family:var(--mono); font-size:var(--t-sm); color:var(--ink-soft);
  background:var(--surface); border:1.5px solid var(--border); border-radius:8px;
  padding:.45rem .7rem; display:inline-block; }

/* Bandeau de confirmation qui laisse les champs libres pour recommencer. */
.confirme { display:flex; align-items:flex-start; gap:var(--s2); padding:var(--s3);
  background:rgba(77,107,20,.08); border:1.5px solid rgba(77,107,20,.25);
  border-radius:var(--r-sm); font-size:var(--t-sm); color:var(--ink-soft); }
.confirme b { color:var(--accent-deep); }
/* Recopier ce qui est deja en memoire : aucun appel, donc aucune attente. Le
   bouton se cale sur la PREMIERE LIGNE du message, pas sur le bloc — centre sur
   le bloc, il descendait de trois pixels sur un message d'une ligne et de neuf
   sur deux. Sa hauteur est celle de la ligne, ce qui aligne les deux centres
   sans decalage a corriger et sans agrandir le bloc. */
.confirme > .recopier { margin-left:auto; flex-shrink:0; align-self:flex-start;
  height:calc(var(--t-sm) * var(--lh)); padding-top:0; padding-bottom:0;
  position:relative; }
/* A cette hauteur le bouton mesure dix-neuf pixels, sous la cible de clic
   recommandee. La pastille invisible la ramene a trente et un sans changer ce
   qu'on voit ni pousser quoi que ce soit. */
.confirme > .recopier::after { content:''; position:absolute; inset:-6px; }

/* ═══ v10 ══════════════════════════════════════════════════════════ */

/* Un schema de structure, en CSS pur : ce qu'on est en train de fabriquer se
   voit. Reprend le motif de la page de creation en production. */
.schema { display:flex; flex-direction:column; align-items:center; }
.schema .tronc { width:1.5px; height:22px; background:var(--border-strong); }
.schema .barre { height:1.5px; background:var(--border-strong); }
.schema-bas { display:grid; gap:var(--s3); width:100%; }
.schema-bas > * { position:relative; }
.schema-bas > *::before { content:''; position:absolute; top:-22px; left:50%;
  width:1.5px; height:22px; background:var(--border-strong); }
.deux-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media(max-width:700px){ .deux-col{grid-template-columns:1fr} }
.encadre { background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--r);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }

/* Le sujet vise, sur une seule ligne : le depot ne perd plus de hauteur. */
.rangee-cible { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.rangee-cible select { min-width:230px; max-width:280px; }

/* Le sujet sur lequel un geste porte : un champ qu'on lit sans pouvoir le
   changer. Il a la forme d'un champ parce qu'il en occupe la place, et le
   cadenas dit pourquoi il ne repond pas. */
.sujet-fige { display:flex; align-items:center; gap:var(--s2); width:100%;
  background:var(--surface3); border:1.5px solid var(--border); border-radius:8px;
  padding:.6rem .8rem; font-family:var(--mono); font-size:var(--t-sm); color:var(--ink); }
.sujet-fige .cad { color:var(--muted); font-size:12px; flex-shrink:0; }
.sujet-fige .fl { color:var(--muted); font-family:var(--text); flex-shrink:0; }

/* Un champ que l'on lit sans pouvoir le changer garde exactement son apparence. */
input[readonly] { cursor:default; }
input[readonly]:focus { border-color:var(--border); background:var(--surface); }

/* ═══ v11 ══════════════════════════════════════════════════════════ */

/* Le compteur de caracteres : une seule forme, quel que soit le module. */
.hint { font-size:var(--t-meta); font-family:var(--text); font-weight:400;
  color:var(--muted); letter-spacing:0; text-transform:none; }

/* « ranger dans » est un libelle de champ, pas une etiquette technique. */
.rangee-cible label { font-family:var(--text); font-size:var(--t-sm);
  font-weight:500; color:var(--muted); letter-spacing:0; text-transform:none; }
.rangee-cible select, .cible select {
  background:var(--surface2); border:1.5px solid var(--border); border-radius:8px;
  padding:.5rem .8rem; font-family:var(--text); font-size:var(--t-sm); color:var(--ink);
  outline:none; appearance:none; padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
    linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.rangee-cible select:focus, .cible select:focus { border-color:var(--ink); background-color:var(--surface); }

/* Un bloc de structure : le cadre delimite l'entite, sans aplat gris. */
.encadre { background:var(--surface); }

/* La fourchette. Scinder et Fusionner dessinent la MEME piece, retournee :
   une source qui se divise, deux sources qui se rejoignent. Un seul jeu de
   mesures, sinon les deux onglets divergent d'un pixel a chaque retouche.
   `haut` est le segment vertical au-dessus de la barre, `bas` celui du
   dessous ; ce que l'un appelle tronc, l'autre l'appelle descente. */
.branches, .converge { position:relative; width:100%; height:34px; }
.branches .bar, .converge .bar { position:absolute; top:17px; height:1.5px;
  background:var(--border-strong); }
.branches .haut, .converge .haut { position:absolute; top:0; width:1.5px; height:17px;
  background:var(--border-strong); }
.branches .bas, .converge .bas { position:absolute; top:17px; width:1.5px; height:17px;
  background:var(--border-strong); }
/* Fusionner n'a qu'une seule descente, au milieu, et n'a pas besoin de la placer. */
.converge > .bas { left:50%; }

/* Reorganiser reprend la forme d'A clarifier : un bloc par element, un liseré
   qui dit la nature du geste, une action franche. */
/* Le nom d'un geste. Meme boite que l'etiquette de niveau : les deux se
   font face d'un bloc a l'autre, dans la meme colonne. Sans point : le
   rond n'ajoutait rien et ramenait l'idee d'un niveau qui n'existe pas. */
/* Le defaut nomme : ce qui ne va pas, pas ce qu'on va faire. Une pastille
   sourde — une boite, mais sans bordure et sans relief : elle se lit comme
   une etiquette collee, jamais comme quelque chose qui se clique.
   Largeur commune : une colonne de defauts se lit comme une colonne. */
/* La teinte dit « defaut », pas un niveau : elle est CONSTANTE sur les sept
   termes. Une couleur qui ne varie jamais ne code rien d'autre qu'elle-meme,
   et le gris faisait passer pour neutre ce qui ne l'est pas. */


/* Les boutons d'une meme rangee de reglages ont la meme largeur. */
.grp .btn { min-width:132px; justify-content:center; }

/* ═══ v12 ══════════════════════════════════════════════════════════ */

/* Une zone de texte s'agrandit, elle ne se reduit jamais sous sa hauteur utile.
   min-height borne le redimensionnement vers le bas ; resize:vertical interdit
   l'etirement lateral. */
textarea { resize:vertical; min-height:96px; }
.rep-zone textarea { min-height:96px; }
.mini textarea { min-height:120px; }
.depot textarea { min-height:200px; }
.saisie textarea { min-height:64px; }
.encadre textarea, .champ textarea { min-height:96px; }

/* Le bloc des actions se distingue a peine : le meme fond que la zone des
   questions. Aucun vocabulaire visuel nouveau, et le bloc entier dit « on agit ». */
.aside-b.actions { background:var(--surface2); }

/* Reorganiser : une couleur par geste, du plus leger au plus lourd. */
/* Un geste n'a pas de niveau : il a un nom. Le colorer par type faisait lire
   une criticite la ou il n'y en a pas — c'est precisement ce qui trompait. */
.bloc.g1, .bloc.g2, .bloc.g3, .bloc.g4 { border-left:4px solid var(--border-strong); }

/* Une proposition et son etiquette forment un ensemble : de l'air entre deux. */
.item + .item { margin-top:var(--s4); }

/* Les lignes d'une note, chacune avec son marqueur. */
.lignes { display:flex; flex-direction:column; gap:var(--s1); }
.lignes > div { display:flex; gap:var(--s2); align-items:flex-start; }
.lignes .m { color:var(--accent-deep); flex-shrink:0; }
.lignes u { text-decoration-color:var(--border-strong); text-underline-offset:3px; }

/* Un champ fige a la hauteur d'un champ de saisie : les blocs s'alignent. */
.fige { min-height:42px; display:flex; align-items:center; }

/* Etat d'un connecteur. */
.etat-ok { font-family:var(--mono); font-size:var(--t-meta); color:var(--accent-deep); white-space:nowrap; }
.etat-non { font-family:var(--mono); font-size:var(--t-meta); color:var(--danger); white-space:nowrap; }

/* Les boutons d'un meme groupe de reglages ont la meme hauteur. */
.grp .btn, .grp a.btn { min-height:38px; align-items:center; }

/* ═══ v13 ══════════════════════════════════════════════════════════ */

/* [hidden] doit gagner sur toute classe qui pose un display. C'est la cause
   du bloc « nom de l'ensemble » resté visible en mode sujets freres, et c'etait
   deja celle de la fenetre de parametres qui ne se fermait pas. Une regle,
   toute la classe de defauts. */
[hidden] { display:none !important; }

/* Une colonne de grille ne doit pas s'elargir a cause de son contenu : sans
   min-width, la carte poussait la colonne et faisait deborder tout le layout. */
.duo > * { min-width:0; }

/* Un champ fige a exactement la hauteur d'un champ de saisie. */
.fige { min-height:0; padding:.6rem .8rem; line-height:var(--lh);
  font-size:var(--t-body); display:block; }

/* La fourchette : le tronc et la barre au meme niveau, des deux cotes. */

/* ═══ v14 — etats reseau, communs a toutes les pages ══════════════ */

/* Une erreur reseau ou un refus du back-end : le meme bandeau partout. */
.alerte-err { display:flex; gap:var(--s2); padding:var(--s3); background:var(--danger-bg);
  border:1.5px solid var(--danger-br); border-left:3px solid var(--danger);
  border-radius:var(--r-sm); font-size:var(--t-sm); color:var(--danger); }

/* L'attente d'une reponse : une ligne sobre, jamais un ecran fige. */
.chargement { font-size:var(--t-sm); color:var(--muted); padding:var(--s3) 0; }

/* ═══ v15 — l'attente, la carte, les questions ═══════════════════ */

/* ── Un bouton qui travaille le dit ──
   `aria-busy` n'est pas decoratif : un lecteur d'ecran annonce l'attente.
   `currentColor` fait que l'anneau prend la couleur du bouton, clair sur
   fond sombre et sombre sur fond clair, sans une regle de plus.
   Regle : l'anneau apparait si et seulement si le bouton appelle le reseau. */
@keyframes kcp-tourne { to { transform: rotate(360deg); } }
.btn[aria-busy="true"] { pointer-events:none; opacity:.75; }
.btn[aria-busy="true"]::before {
  content:''; width:13px; height:13px; flex-shrink:0;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation:kcp-tourne .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::before { animation-duration:1.6s; }
}

/* ── La carte se ramene a la largeur disponible ──
   Elle garde sa taille naturelle tant qu'elle tient, et ne se reduit que du
   strict necessaire au-dela ; elle ne grossit jamais. `min-width:0` est
   indispensable : un enfant de boite flexible refuse par defaut de descendre
   sous la largeur de son contenu. */
.carte-cadre #svg-boite { min-width:0; max-width:100%; }
.carte-cadre .arbre { max-width:100%; height:auto; }

/* ── Les questions ouvertes, dans la carte ──
   Pleine : les questions du document. Creuse : celles de sa descendance,
   posee la ou s'affichait le compte d'enfants. Le lisere la detache de la
   bordure de la case, quel que soit le fond. */
.arbre .q-pastille { fill:var(--accent-deep); stroke:var(--surface); stroke-width:1.5; }
.arbre .q-chiffre { fill:#fff; font-family:'DM Mono',monospace; font-size:11px; font-weight:500; }
.arbre .q-pastille.creuse { fill:var(--surface); stroke:var(--accent-deep); stroke-width:1.5; }
.arbre .q-chiffre.creuse { fill:var(--accent-deep); }

/* ── La fiche en fenetre, ouverte depuis la carte ──
   Pas de filet pleine largeur sous l'en-tete : le premier titre de section
   porte deja le sien. */
.f-voile { position:fixed; inset:0; background:rgba(22,21,15,.45); z-index:60; display:none; }
.f-voile.on { display:block; }
.fiche-w { position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(720px,calc(100vw - 2.5rem)); max-height:86vh; background:var(--surface);
  border:1.5px solid var(--border-strong); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(22,21,15,.25); display:none; flex-direction:column; overflow:hidden; }
.fiche-w.on { display:flex; }
.f-tete { padding:var(--s4) var(--s4) var(--s2); }
.f-ligne { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.f-corps { padding:0 var(--s4) var(--s4); overflow-y:auto; flex:1; }
.f-pied { padding:var(--s3) var(--s4); border-top:1.5px solid var(--border); background:var(--surface2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }

/* La pastille de questions, en face du nom. Elle mene au bloc de reponse. */
.f-notif { display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0;
  background:rgba(77,107,20,.10); border:1px solid rgba(77,107,20,.24); border-radius:999px;
  padding:.3rem .7rem .3rem .55rem; cursor:pointer; color:var(--accent-deep);
  font-family:var(--mono); font-size:var(--t-sm); line-height:1; }
.f-notif:hover { background:rgba(77,107,20,.17); border-color:var(--accent-deep); }
.f-notif .ico { font-size:14px; }
.f-notif .n { font-weight:500; }

.f-questions { background:rgba(77,107,20,.06); border:1px solid rgba(77,107,20,.18);
  border-left:3px solid var(--accent-deep); border-radius:var(--r-sm);
  padding:var(--s3); margin-top:var(--s4); scroll-margin-top:var(--s3); }
.f-questions.vise { animation:kcp-attire 1.1s ease-out; }
@keyframes kcp-attire {
  0%,100% { box-shadow:0 0 0 0 rgba(77,107,20,0); }
  30% { box-shadow:0 0 0 4px rgba(77,107,20,.22); }
}
@media (prefers-reduced-motion: reduce) { .f-questions.vise { animation:none; } }
.f-q-tete { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.f-q-n { background:var(--accent-deep); color:#fff; font-family:var(--mono); font-size:var(--t-meta);
  min-width:22px; height:22px; border-radius:11px; display:grid; place-items:center; padding:0 7px; }
.f-q-t { font-family:var(--display); font-size:var(--t-sm); font-weight:700; color:var(--accent-deep); }
.f-q-liste { margin:var(--s2) 0 0; padding-left:1.1rem; }
.f-q-liste li { font-size:var(--t-sm); color:var(--ink-soft); margin-bottom:.35rem; line-height:1.5; }
.f-q-liste li::marker { color:var(--accent-deep); }
.f-q-a { margin-top:var(--s2); }

/* ── Initialiser une IA : une ligne par assistant, la destination est l'action ──
   La marque herite de `color`, donc le MEME trace sert le blanc-sur-orange
   et l'orange-sur-blanc. */
.llm-lignes { display:flex; flex-direction:column; gap:var(--s2); }
.llm-l { display:flex; align-items:center; gap:var(--s3);
  border:1.5px solid var(--border); border-radius:var(--r-sm); padding:var(--s2) var(--s3);
  background:var(--surface); transition:border-color .15s; }
.llm-l:hover { border-color:var(--border-strong); }
.llm-l[data-off="1"] { opacity:.4; pointer-events:none; }
.llm-pastille { width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:grid; place-items:center; }
.llm-pastille.claude { background:#D97757; color:#fff; }
.llm-pastille.claude-mcp { background:var(--surface); border:1.5px solid #D97757; color:#D97757; }
.llm-pastille.chatgpt { background:#10A37F; color:#fff; }
.llm-nom { font-family:var(--display); font-size:var(--t-body); font-weight:600; }
.llm-sous { font-size:var(--t-sm); color:var(--muted); }
.llm-a { margin-left:auto; display:flex; gap:var(--s2); align-items:center; flex-shrink:0; }

/* ── Tout deplier, tout replier ──
   Deux boutons opposes, au coin du cadre de la carte. Ils ne dependent
   d'aucun etat : replier une carte deja repliee ne fait simplement rien.
   Le cadre ne deborde plus horizontalement depuis la mise a l'echelle,
   donc un enfant en position absolue n'y defile pas. */
.carte-cadre { position:relative; }
/* Deux actions opposees qui portent sur le meme objet forment UN controle,
   pas deux : une seule bordure, deux moities separees par un filet. */
.plier { position:absolute; top:var(--s2); right:var(--s2); z-index:2;
  display:inline-flex; border:1.5px solid var(--border-strong); border-radius:8px;
  overflow:hidden; background:var(--surface); }
/* Le centrage est declare, jamais deduit des metriques de la police :
   l'espace au-dessus et au-dessous d'un glyphe n'est pas symetrique, et
   padding + line-height laissent donc le texte flotter au-dessus du milieu. */
.plier button { display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 .7rem; border:none; background:none; color:var(--ink-soft);
  cursor:pointer; font-family:var(--text); font-size:var(--t-meta); line-height:1; }
.plier button + button { border-left:1.5px solid var(--border-strong); }
.plier button:hover { background:var(--surface2); color:var(--ink); }

/* ═══ v16 — Ameliorer, le perimetre en trois questions ════════════ */

/* ── Les trois onglets d'Ameliorer, en pastilles ──
   Pleine sur Confirmees : le compte compte. Neutre sur Potentielles et
   Analyser : ils n'interpellent pas. */
.bascule { display:inline-flex; gap:.4rem; flex-wrap:wrap; }
.bascule button { display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid var(--border);
  background:var(--surface); color:var(--muted); font-family:var(--display);
  font-size:var(--t-sm); font-weight:600; padding:.5rem .9rem; border-radius:999px; cursor:pointer; }
.bascule button[aria-selected="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.bascule .p { min-width:1.35rem; height:1.35rem; border-radius:999px; display:inline-grid;
  place-items:center; font-family:var(--mono); font-size:.72rem; padding:0 .3rem; }
.bascule .p-alerte { background:var(--accent); color:var(--accent-deep); }
.bascule .p-neutre { background:var(--surface3); color:var(--muted); }
.bascule button[aria-selected="true"] .p-neutre { background:rgba(255,255,255,.18); color:var(--surface); }
/* Le niveau de confiance ouvre l'onglet : ce qu'il vaut, et pourquoi. Une
   ligne grise ne se lisait pas ; un bloc teinte dit lequel des deux on
   regarde avant meme d'avoir lu. */
.conf { display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap;
  padding:var(--s2) var(--s3); border-radius:var(--r-sm);
  background:var(--niv-bg); border:1px solid var(--niv-br); border-left:4px solid var(--niv); }
.conf .t { font-family:var(--display); font-size:var(--t-sm); font-weight:700; color:var(--niv); }
.conf .x { font-size:var(--t-sm); color:var(--ink-soft); line-height:1.5; }
/* Un onglet sans niveau garde la meme forme, en gris : la coherence tient a
   la forme, pas a la couleur. */
.conf.neutre { --niv:var(--muted); --niv-bg:var(--surface2); --niv-br:var(--border); }

/* La coupure entre ce qui reclame une action et ce qui n'en reclame pas.
   Ce n'est pas un degre de plus, c'est une autre nature : le blanc autour
   d'elle vaut plus que celui qui separe deux blocs, et le mot se voit. */
/* Le meme blanc de part et d'autre : une coupure separe deux ensembles, elle
   n'appartient a aucun des deux. */
.coupure { display:flex; align-items:center; gap:var(--s3); margin:calc(var(--s6) * 1.5) 0; }
.coupure::before, .coupure::after { content:''; flex:1; height:1.5px; background:var(--n1);
  opacity:.35; }
.coupure span { display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--display); font-size:var(--t-sm); font-weight:700; color:var(--n1);
  background:var(--n1-bg); border:1.5px solid var(--n1-br); border-radius:999px;
  padding:5px 14px; white-space:nowrap; }
.coupure span .c { display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--n1); color:#fff; font-size:10px;
  line-height:1; flex-shrink:0; }

/* Les trois volets d'Ameliorer respirent au meme pas que le reste. */
#v-conf, #v-pot, #v-ana { display:flex; flex-direction:column; gap:var(--s4); }

/* Un signal : une observation brute, sans proposition redigee. */

/* L'onglet Analyser : un seul geste, qui se voit. */
/* La rangee des onglets porte le geste de l'onglet actif, a son extremite
   droite : il se lit sur la meme ligne que l'onglet qu'il sert, et son bord
   droit tombe sur celui de la colonne de droite. */
.rangee-onglets { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.rangee-onglets > .btn { margin-left:auto; }

/* ── Un perimetre analyse ──
   A gauche ce qui est ecrit, a droite ce que l'IA propose. Le fond distingue
   les deux : on ne confond jamais son texte avec celui de la machine. */
.perim-cmp { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s3); }
@media(max-width:700px){ .perim-cmp{grid-template-columns:1fr} }
.perim-cmp > div { display:flex; flex-direction:column; gap:var(--s1); }
.perim-cmp .t { font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.perim-cmp .txt { padding:var(--s2) var(--s3); border-radius:8px; font-size:var(--t-sm);
  line-height:1.55; white-space:pre-wrap; }
/* `flex:1` imposait la hauteur et rendait la poignee de redimensionnement
   inoperante : on tirait, rien ne bougeait. La hauteur est libre, bornee en
   bas seulement, et les deux colonnes se synchronisent par script. */
.perim-cmp textarea.txt { min-height:180px; height:180px; }
.perim-cmp .actuel .txt { background:var(--surface2); border:1px solid var(--border); color:var(--ink-soft); }
.perim-cmp .propose .t { color:var(--accent-deep); }
.perim-cmp .propose .txt { background:rgba(77,107,20,.07); border:1px solid rgba(77,107,20,.22);
  color:var(--accent-deep); }
.perim-cmp .txt.vide { color:var(--muted); font-style:italic; }
/* Une zone de texte garde exactement l'aspect du cadre qu'elle remplace. */
.perim-cmp textarea.txt { font-family:var(--text); resize:vertical; outline:none; width:100%; }
.perim-cmp .actuel textarea.txt:focus { border-color:var(--border-strong); }
.perim-cmp .propose textarea.txt:focus { border-color:var(--accent-deep); }
.perim-cmp > div > .btn { align-self:flex-start; }
/* Quand deux textes s'offrent, celui qui partira se signale. */
.perim-cmp > .choisie > .txt { box-shadow:0 0 0 2px var(--niv, var(--accent-deep)); }

/* ── L'onglet Perimetres prend toute la largeur ───────────────────────
   Mesure sur le parc reel : la correction proposee fait 5,8 fois le perimetre
   qu'elle remplace. Les colonnes restent egales — c'est ce qui se lit le mieux
   — et c'est la hauteur qui absorbe l'ecart, chaque zone epousant son contenu.
   A 772px de large, le plus long des textes demande 198px : le plancher de 200
   ne tronque donc rien et rend toutes les fiches egales en hauteur. */
.main.large { max-width:1660px; }
/* La page borne elle-meme sa colonne de lecture : sur cet onglet on la leve,
   sinon elargir `main` ne se voit nulle part. */
.main.large .z { max-width:none; }
.main.large .duo { grid-template-columns:minmax(0,1fr); }
/* Le repere ayant remonte en tete, la colonne de droite n'a plus rien a
   montrer ici : elle ne doit pas laisser un blanc sous la liste. */
.main.large .duo > aside:empty { display:none; }
#v-ana .perim-cmp textarea.txt { min-height:200px; height:auto; }
/* Les deux boutons portent le geste de la page : un cran au-dessus du bouton
   discret, sans aller jusqu'au bouton pleine taille. */
#v-ana .perim-cmp > div > .btn { font-size:var(--t-sm); padding:.45rem .85rem; }
/* Le repere de droite remonte sur la ligne du titre : sur cet onglet la largeur
   sert aux textes, pas a une colonne de service. */
/* Hors du flux : le bloc est plus haut que le titre, et dans le flux il
   poussait les onglets de 50px des qu'on passait sur cet onglet-la. La barre
   de navigation ne doit pas sauter d'un onglet a l'autre. */
.entete-geste { position:relative; }
.savoir-ana { position:absolute; right:0; top:0; width:340px; background:var(--surface);
  border:1.5px solid var(--accent-deep); border-radius:var(--r); padding:var(--s3); }
/* Trop etroit pour tenir a cote du titre : il repasse dans le flux, ou il ne
   chevauche rien. Le saut des onglets y est sans consequence, la colonne de
   lecture ayant deja change de forme. */
@media (max-width:1200px) { .savoir-ana { position:static; width:auto; } }
.savoir-ana p { font-size:var(--t-sm); color:var(--ink-soft); max-width:none;
  margin-top:var(--s2); }
.savoir-ana b { color:var(--accent-deep); }

/* Un perimetre juge bon : rien a faire, et ca se dit. */
.valide { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono);
  font-size:var(--t-meta); color:var(--n1); }
.valide .c { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:var(--n1); color:#fff; font-size:10px; line-height:1; }

/* ── Le perimetre : une phrase, puis une question a la fois ──
   L'humain n'ecrit qu'une phrase ; le systeme propose, il repond oui ou non.
   La forme le dit : une grande zone au depart, une seule carte au centre
   pendant les questions, un texte relisible a la fin. */

/* La phrase de depart. Grande : c'est tout ce qu'on demande. */
.perim-graine { width:100%; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:8px; padding:.85rem 1rem; font-family:var(--text); font-size:var(--t-body);
  line-height:1.5; color:var(--ink); outline:none; resize:vertical; min-height:110px; }
.perim-graine:focus { border-color:var(--ink); background:var(--surface); }
.perim-graine::placeholder { color:var(--muted); }

/* L'attente : un decompte qui ne ment pas. */
.perim-attente { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm);
  color:var(--muted); }
.perim-rond { width:14px; height:14px; border-radius:50%; border:2px solid var(--border);
  border-top-color:var(--accent-deep); animation:perim-tourne 1s linear infinite; flex-shrink:0; }
@keyframes perim-tourne { to { transform:rotate(360deg); } }

/* Une question, seule au centre. Deux reponses franches, une sortie
   discrete : la difference de taille dit laquelle est le geste normal. */
.perim-une { border:1.5px solid var(--border-strong); border-radius:var(--r); padding:var(--s5) var(--s4);
  display:flex; flex-direction:column; gap:var(--s3); align-items:center; text-align:center;
  background:var(--surface2); }
.perim-une .q { font-family:var(--display); font-size:var(--t-lg); font-weight:700; line-height:1.35;
  max-width:34ch; }
.perim-une .aide { font-size:var(--t-sm); color:var(--muted); }
/* L'avertissement de recouvrement. Il nomme un sujet voisin — ce que le
   perimetre enregistre n'a JAMAIS le droit de faire. D'ou sa place ici, a
   l'ecran de la question, et nulle part ailleurs. */
.perim-recouvre { display:flex; gap:var(--s2); align-items:flex-start; text-align:left;
  background:var(--n2-bg); border:1px solid var(--n2-br); border-radius:8px;
  padding:var(--s2) var(--s3); max-width:46ch; }
.perim-recouvre .ic { color:var(--n2); flex-shrink:0; font-size:var(--t-body); line-height:1.35; }
.perim-recouvre .l1 { font-size:var(--t-sm); color:var(--n2); line-height:1.45; }
.perim-recouvre .l1 b { font-family:var(--mono); }
.perim-recouvre .l2 { font-size:var(--t-sm); color:var(--muted); line-height:1.45; margin-top:.15rem; }

.perim-duo-b { display:flex; gap:var(--s2); margin-top:var(--s1); }
.perim-duo-b .btn { min-width:132px; justify-content:center; font-size:var(--t-body);
  padding:.65rem 1rem; }
.perim-duo-b .btn.oui { background:var(--n1); border-color:var(--n1); color:#fff; }
.perim-duo-b .btn.oui:hover { background:#3f5810; border-color:#3f5810; }
.perim-duo-b .btn.non { background:var(--n3); border-color:var(--n3); color:#fff; }
.perim-duo-b .btn.non:hover { background:#732727; border-color:#732727; }
.perim-passer { color:var(--muted); }
.perim-points { display:flex; gap:5px; }
.perim-points i { width:7px; height:7px; border-radius:50%; background:var(--border); }
.perim-points i.fait { background:var(--accent-deep); }
.perim-points i.ici { background:var(--ink); transform:scale(1.35); }

/* Sur la page : ce qui est defini se lit dans un bloc gris, et un bouton
   ouvre la fenetre. Ces trois regles avaient disparu avec la refonte du
   module, et le texte se retrouvait nu sur le fond de la carte. */
.perim-champ { display:flex; flex-direction:column; gap:var(--s1); }
.perim-vu { background:var(--surface2); border:1.5px solid var(--border); border-radius:8px;
  padding:var(--s3); font-size:var(--t-sm); line-height:1.5; color:var(--ink-soft);
  white-space:pre-line; }
.perim-vu.vide { color:var(--muted); font-style:italic; }
.perim-vu.relu { color:var(--accent-deep); }
.perim-a { display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }

/* La reformulation. Pas de poignee : elle grandit avec son texte, et le
   blanc sous la derniere ligne vaut celui du dessus. */
.perim-reform { background:rgba(77,107,20,.07); border:1px solid rgba(77,107,20,.22);
  border-radius:8px; padding:var(--s2) var(--s3); margin-top:var(--s2); }
.perim-reform textarea { width:100%; background:transparent; border:0; outline:none;
  resize:none; overflow:hidden; font-family:var(--text); font-size:var(--t-body);
  line-height:1.5; color:var(--accent-deep); display:block; padding:0;
  min-height:0; height:auto; }

/* Le bilan. Une ligne ne change jamais de place quand elle change de camp. */
.perim-bilan { display:flex; flex-direction:column; gap:.4rem; margin-top:var(--s2); }
.perim-bilan .rangee { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm);
  padding:.4rem .6rem; border:1px solid var(--border); border-radius:8px; background:var(--surface2); }
.perim-bilan .nom { flex:1; line-height:1.4; }
.perim-bilan .marq { font-family:var(--mono); font-size:var(--t-meta); padding:2px 8px;
  border-radius:5px; flex-shrink:0; min-width:62px; text-align:center; }
.perim-bilan .marq.oui { background:rgba(77,107,20,.12); color:var(--n1); }
.perim-bilan .marq.non { background:rgba(138,47,47,.09); color:var(--n3); }
/* Retirer une ligne. Discret au repos — ce n'est pas le geste courant — et
   franchement rouge des qu'on le vise. */
.perim-bilan .perim-x { flex-shrink:0; min-width:0; padding:.35rem .55rem; line-height:1;
  font-size:var(--t-sm); color:var(--muted); }
.perim-bilan .perim-x:hover, .perim-bilan .perim-x:focus-visible {
  color:var(--n3); border-color:var(--n3); }
/* Ajouter : sous la liste, aligne a gauche comme une entree de plus. */
.perim-plus { margin-top:.4rem; align-self:flex-start; }
/* La ligne qu'on ecrit garde exactement la forme des autres, pour qu'elle
   prenne leur place sans que rien ne bouge. */
.rangee-neuve { margin-top:.4rem;
  display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm);
  padding:.4rem .6rem; border:1.5px solid var(--ink); border-radius:8px; background:var(--surface); }
.rangee-neuve .marq-sel { flex-shrink:0; font-family:var(--mono); font-size:var(--t-meta);
  padding:2px 6px; border:1px solid var(--border); border-radius:5px; background:var(--surface2);
  color:var(--ink-soft); }
.rangee-neuve .nom-neuf { flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:var(--text); font-size:var(--t-sm); color:var(--ink); }
.rangee-neuve .nom-neuf::placeholder { color:var(--muted); }

/* Le texte enregistre. Modifiable : c'est lui qui part. */
.perim-assemble { width:100%; margin-top:var(--s2); background:var(--surface2);
  border:1.5px solid var(--border); border-radius:8px; padding:var(--s3);
  font-family:var(--text); font-size:var(--t-sm); line-height:1.6; color:var(--ink-soft);
  outline:none; resize:vertical; min-height:132px; }
.perim-assemble:focus { border-color:var(--ink); background:var(--surface); color:var(--ink); }
/* Rouvrir un perimetre : le texte est seul dans la fenetre, il l'occupe.
   La hauteur est POSEE, jamais deduite du flex : `flex:1` l'emporterait sur
   la hauteur que la poignee de redimensionnement ecrit, et tirer dessus ne
   ferait rien. `flex:none` laisse donc la main a `height`, celle d'ici comme
   celle que l'utilisateur pose ; le corps defile quand ca deborde. */
.perim-assemble.perim-seul { margin-top:0; flex:none; height:46vh; min-height:320px; }

.perim-fen { position:fixed; z-index:71; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(860px,calc(100vw - 2.5rem)); max-height:90vh; background:var(--surface);
  border:1.5px solid var(--border-strong); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(22,21,15,.25); display:none; flex-direction:column; overflow:hidden; }
.perim-fen.on { display:flex; }
.perim-fen-voile { position:fixed; inset:0; background:rgba(22,21,15,.45); z-index:70; display:none; }
.perim-fen-voile.on { display:block; }
.perim-fen-tete { padding:var(--s4) var(--s4) var(--s3); border-bottom:1.5px solid var(--border); }
.perim-fen-tete h2 { font-size:var(--t-lg); }
.perim-fen-tete .sub { margin-top:.3rem; }
.perim-fen-tete .sub:empty { display:none; }
.perim-fen-corps { padding:var(--s4); overflow-y:auto; flex:1;
  display:flex; flex-direction:column; gap:var(--s4); }
.perim-fen-pied { padding:var(--s3) var(--s4); border-top:1.5px solid var(--border);
  background:var(--surface2); display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
/* Ce qui agit se range a droite ; ce qui informe ou fait marche arriere
   reste a gauche. Le meme partage que dans une rangee d'actions. */
.perim-fen-pied .droite { margin-left:auto; display:flex; gap:var(--s2); }
.t-sec { font-family:var(--mono); font-size:var(--t-meta); color:var(--muted);
  letter-spacing:.09em; text-transform:uppercase; }

/* ── MAQUETTE — la carte blanche autour d'un formulaire, en option ──
   Elle enferme le formulaire dans une boite alors que la page en est
   deja une. Sans elle, les champs se posent directement sur le fond. */

/* La carte d'un formulaire de geste. Une seule definition pour les trois
   pages : trois copies identiques finissaient par diverger d'un pas. */
.carte-f { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4); }
.modes { display:flex; gap:var(--s1); }
.apercu { font-family:var(--mono); font-size:var(--t-meta); color:var(--accent-deep); }
.hint.err { color:var(--danger); }
.panneau { display:none; flex-direction:column; gap:var(--s4); }
.panneau.on { display:flex; }
/* Un bouton d'action se dimensionne a son texte : dans une colonne flexible
   il s'etirerait sur toute la largeur et passerait pour une barre. */
.carte-f > .btn, .panneau > .btn { align-self:flex-start; }
/* Le geste qui conclut le formulaire garde une largeur minimale : reduit a
   son seul texte, « Creer → » se perdrait sous la carte. */
.carte-f > .btn-1, .panneau > .btn-1 { min-width:168px; justify-content:center; }

/* Deux encadres cote a cote : leurs contenus se font face parce qu'ils
   ont la meme forme — un libelle, une commande, une aide — et la meme
   hauteur, le champ fige valant exactement celle d'une liste. */
.encadre.serre { padding:var(--s3); }
/* Un bloc seul sous deux colonnes garde la largeur d'une colonne et se
   place au milieu : il resume les deux, il ne les surpasse pas. */
.deux-col > .col-centree { grid-column:1 / -1; width:calc(50% - var(--s3) / 2); margin:0 auto; }
@media(max-width:700px){ .deux-col > .col-centree { width:100%; } }
.encadre.serre .fige, .encadre.serre select { min-height:38px; display:flex; align-items:center; }