/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  LES POLICES SONT HÉBERGÉES ICI, ET C'EST UNE DÉCISION                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   La maquette les chargeait depuis Google Fonts. Dans une application qui sera
   joignable depuis internet et qui recueille la situation d'une personne, ça
   ferait appeler Google par le navigateur de CHAQUE cliente — son adresse IP,
   l'heure de sa visite, la page qu'elle lit. Un modèle souverain en Suisse et
   des polices chez un tiers, c'est une souveraineté qui s'arrête à la couche
   qu'on regarde.

   Trois familles sous SIL Open Font License, donc redistribuables. Sous-ensemble
   `latin` SEULEMENT : le français y tient en entier, œ et Œ compris, et
   `latin-ext` ne couvre que l'Europe centrale. Et seuls les poids réellement
   appelés — Spectral n'habille que les titres, DM Mono que les étiquettes.

   176 Ko au total, contre 404 Ko pour tous les sous-ensembles et tous les poids.
   La première peinture d'une cliente sur un réseau mobile se paie en kilo-octets.

   `font-display: swap` : le texte s'affiche tout de suite dans la police de
   repli, et bascule quand la nôtre arrive. Jamais un écran vide en attendant
   une police. */
@font-face{font-family:Spectral;src:url(/static/polices/spectral-500-latin.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(/static/polices/spectral-600-latin.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/polices/archivo-400-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/polices/archivo-500-latin.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/polices/archivo-600-latin.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url(/static/polices/dm-mono-400-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

/* accordoir — une seule feuille, aucune police distante, aucun CDN.
   La page doit fonctionner dans un tunnel fermé : rien ne sort. */
/* LA PALETTE SE CHANGE ICI, ET NULLE PART AILLEURS. Les composants ne portent
   aucune couleur littérale : passer du sable chaud à l'ardoise froide, puis à
   l'ivoire de YHB, n'a demandé que ces lignes — et c'est tout ce que vaut un
   système de jetons.

   ELLE EST CELLE DE YAN HALTEY BRANDS depuis le 20.10.2026. Demandé par Yan :
   « par défaut, il faudrait que ça prenne YHB ». Avant, c'était un bleu ardoise
   posé en maquette, l'identité de personne. Relevée de
   `02_BRANDS/MAISON/YHBR_Yan_Haltey_Brands/00_IDENTITY/YHB-brand-identity/
   design-system/visual-tokens.md`, qui tient ses valeurs du `site.css` en
   production.

   DEUX MAGENTAS, ET LA CHARTE AVAIT RAISON D'EN DÉCLARER DEUX. `--accent-vif`
   `#E6008A` rend 3,93:1 sur l'ivoire : assez pour un aplat (seuil 3:1), pas
   pour du texte (4,5:1). `--accent` porte les liens et l'onglet courant, il
   prend donc l'`accent-ink` de la charte, `#B7006F` — 5,74:1. Mesuré, pas
   supposé, et `bancs/parcours.py` le remesure.

   JAMAIS DE NOIR PUR : règle impérative de la charte, d'où `#0B0B0E` et
   `#14141A`.

   LES POLICES RESTENT SPECTRAL ET ARCHIVO. La charte déclare Manrope et IBM
   Plex Mono, libres toutes deux — mais aucun woff2 n'est livré avec le design
   system, et le site les charge d'ailleurs. Annoncer Manrope et servir
   Helvetica serait pire que servir Archivo. Dérogation datée dans
   `DEFINITION.md`. */
:root{
  --fond:#f4f1ea; --fond2:#fbf9f4; --fond3:#ece7dd; --trait:#d8d5cf; --trait2:#bfbab1;
  --texte:#0b0b0e; --texte2:#56544f; --texte3:#8a877f;
  --accent:#b7006f; --accent-vif:#e6008a; --accent-fond:#f9e4f0;
  --chaud:#8a6118; --chaud-fond:#f3ecd9;
  --rouge:#a33b28; --rouge-fond:#f6e4de; --vert:#3d6630; --vert-fond:#e6eee2;
  --display:Spectral,Georgia,"Times New Roman",serif;
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* PLUS DE COLONNE FIXE. Le 16.10 j'avais borné la page à 1280 px puis fait
     déborder les tableaux jusqu'aux bords : deux cadrages dans une même page,
     et Yan l'a nommé le 20.10 — « on a comme deux viewports ».

     Tout le chrome suit donc la fenêtre, avec une seule marge. Ce qui se borne,
     ce sont les CHAMPS et le texte rédigé, pas le cadre : un champ de 1000 px
     pour saisir « 90 » n'aide personne, et au-delà de 70 caractères l'œil perd
     sa ligne en revenant à la marge. */
  --marge:28px;
  --champ:17rem;      /* un champ court : nom, durée, code, date */
  --champ-moyen:30rem; /* une liste longue, une adresse */
  --lecture:68ch;     /* un champ rédigé, et tout texte courant */
}
/* LA NUIT DE YHB, et c'est une identité, pas une inversion. Le principe est
   écrit dans sa charte : « Dualité : Rêve = l'encre, fonds sombres · Réel = le
   papier, fonds clairs ». En sombre, ses deux magentas se confondent — la
   charte l'écrit telle quelle — et `#FF2EA6` rend 5,41:1 sur `#14141A`. */
@media(prefers-color-scheme:dark){:root{
  --fond:#14141a; --fond2:#25242a; --fond3:#1b1b22; --trait:#2c2c32; --trait2:#3d3d45;
  --texte:#faf8f3; --texte2:#c8c4bb; --texte3:#928e86;
  --accent:#ff2ea6; --accent-vif:#ff2ea6; --accent-fond:#2a1220;
  --chaud:#d6a254; --chaud-fond:#2a2113;
  --rouge:#e08a72; --rouge-fond:#2c1c18; --vert:#9ac184; --vert-fond:#1a2417;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
code{font-family:var(--mono);font-size:.88em;background:var(--fond3);padding:1px 5px;border-radius:4px}
.gris{color:var(--texte3)}
/* LE SERIF NE SERT QU'AUX TITRES. Spectral porte la voix, Archivo porte la
   lecture : un serif de texte sur un écran de travail fatigue, et un grotesque
   en titre n'annonce rien. */
h1{font-family:var(--display);font-weight:600;font-size:1.6rem;margin:0 0 4px;
  letter-spacing:-.015em;line-height:1.15}
h2{font-family:var(--display);font-weight:500;font-size:1.25rem;margin:28px 0 10px;
  letter-spacing:-.01em}
h3{font-size:.95rem;margin:22px 0 8px;color:var(--texte2)}
.sous{color:var(--texte2);margin:0 0 18px}
.souci{background:var(--rouge-fond);color:var(--rouge);padding:10px 13px;border-radius:9px;
  margin:12px 0;font-size:.9rem}
.vide{color:var(--texte3);font-size:.9rem}

/* ─── le rail de l'atelier ─── */
.rail{display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-bottom:1px solid var(--trait);background:var(--fond2);font-size:.86rem}
.rail .marque{font-weight:650;text-decoration:none;color:var(--texte)}
.rail .tiret{color:var(--texte3)}
.rail .qui{color:var(--texte2)}
.rail .qui em{font-style:normal;font-size:.72rem;background:var(--fond3);
  padding:2px 7px;border-radius:999px;color:var(--texte3)}
.rail form{margin-left:auto}
.lien{background:none;border:0;color:var(--texte3);cursor:pointer;font-size:.84rem;
  text-decoration:underline;font-family:inherit}
.page{padding:26px var(--marge) 80px}
/* Le texte courant d'un écran, lui, se borne : un paragraphe de 2000 px ne se
   lit pas. Les tableaux et les grilles s'en affranchissent explicitement. */
.page > p, .page > .avis, .page > .aide, .page > .prudence{max-width:var(--lecture)}
.retour{font-size:.84rem;text-decoration:none;display:inline-block;margin-bottom:14px}

/* ─── la porte ─── */
.porte{max-width:380px;margin:12vh auto;padding:0 18px}
.porte h1{font-size:1.6rem}
.porte label{display:block;font-size:.84rem;color:var(--texte2);margin:14px 0 0}
input,select,textarea{width:100%;font-family:inherit;font-size:1rem;padding:11px 12px;
  margin-top:5px;border:1px solid var(--trait2);border-radius:10px;
  background:var(--fond2);color:var(--texte)}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
button{font-family:inherit;font-size:.92rem;padding:10px 16px;border-radius:10px;
  border:1px solid var(--trait2);background:var(--fond2);color:var(--texte);cursor:pointer}
button:hover{border-color:var(--trait2);background:var(--fond3)}
button.p{background:var(--accent);color:#fff;border-color:transparent;font-weight:600}
button.discret{border:0;background:none;color:var(--texte3);text-decoration:underline;padding:8px 6px}
.porte button.p{width:100%;margin-top:20px;padding:12px}

/* ─── avis ─── */
.avis{background:var(--chaud-fond);border-radius:11px;padding:14px 16px;margin:0 0 22px;font-size:.9rem}
.avis p{margin:0 0 7px}.avis p:last-child{margin:0}
.avis.fort{background:var(--accent-fond)}
.secret{font-family:var(--mono);font-size:1.05rem}

/* ─── jetons, tables ─── */
.jetons{display:flex;flex-wrap:wrap;gap:8px}
.jeton{display:inline-flex;gap:7px;align-items:baseline;font-size:.88rem;padding:7px 13px;
  border-radius:999px;background:var(--fond3);color:var(--texte2);text-decoration:none;
  border:1px solid transparent}
.jeton.on{background:var(--accent);color:#fff}
.jeton em{font-style:normal;font-size:.72rem;opacity:.75}
.liste{width:100%;border-collapse:collapse;font-size:.88rem;margin:14px 0}
/* Un tableau à quatorze colonnes se serre : la densité est ce qu'on vient y
   chercher, et c'est elle qui rend la comparaison possible. */
.liste th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texte3);padding:7px 9px;background:var(--fond3);white-space:nowrap}
.liste td{padding:8px 9px;border-bottom:1px solid var(--trait);vertical-align:top}
.compte{font-family:var(--mono);font-size:.86rem}
.etat{font-size:.7rem;font-family:var(--mono);padding:2px 8px;border-radius:999px;
  background:var(--fond3);color:var(--texte2);white-space:nowrap}
.etat.clos,.etat.remis{background:var(--vert-fond);color:var(--vert)}
.etat\.en-cours,.etat.en-cours{background:var(--chaud-fond);color:var(--chaud)}
/* Les deux états que l'écran des accès a introduits. `ouvert` est calme — un
   compte qui marche n'a rien à réclamer ; `abandonne` est rouge, parce qu'une
   personne suspendue est une décision qu'on doit revoir. */
.etat.ouvert{background:var(--accent-fond);color:var(--accent)}
.etat.abandonne{background:var(--rouge-fond);color:var(--rouge)}
/* EN GRILLE, PAS EN RANGÉE QUI S'ENROULE. En `flex:1`, chaque champ grandissait
   pour remplir la ligne : sur un écran large ça donnait les champs de 1000 px
   que Yan a relevés. Une grille à colonnes bornées range les champs courts par
   quatre ou cinq et les laisse à leur taille. */
.ouvrir{display:grid;gap:14px 20px;margin:10px 0 6px;align-items:end;
  justify-content:start;
  grid-template-columns:repeat(auto-fill,minmax(13rem,var(--champ)))}
.ouvrir label{font-size:.8rem;color:var(--texte2);min-width:0}
/* UN CHAMP RÉDIGÉ NE PREND PLUS LA LIGNE ENTIÈRE. Il la prenait, borné à la
   largeur de lecture : sur un écran large, les trois champs rédigés de la fiche
   d'un modèle s'empilaient donc l'un sous l'autre, chacun à 68 ch, et laissaient
   les trois quarts droits de la page blancs sur toute leur hauteur. Yan l'a
   nommé le 20.10.2026 : « ça prend toute la place en hauteur, il y a trois
   quarts de l'espace qui est blanc à droite ».

   Deux colonnes de grille chacun : trois tiennent côte à côte sur un écran
   large, deux sur un écran moyen, un seul sur un téléphone. La hauteur du
   panneau est divisée par trois, et la largeur de lecture tient toujours —
   deux colonnes de 17 rem font 34 rem, et le texte s'arrête à 68 ch. */
.ouvrir label.large{grid-column:span 2;max-width:var(--lecture)}
.ouvrir label.moyen{grid-column:span 2;max-width:var(--champ-moyen)}
/* ON NE DEMANDE LA LIGNE ENTIÈRE QUE QUAND ON EN A BESOIN — un brouillon de
   message, une liste d'options qu'on relit ligne à ligne. */
.ouvrir label.pleine{grid-column:1/-1;max-width:var(--lecture)}
/* Un bouton ne s'étire pas sur sa cellule de grille : il fait la largeur de
   son texte, sinon « Enregistrer » occupe dix-sept rem pour onze lettres. */
.ouvrir button{align-self:end;justify-self:start}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0}
.renvoi{margin-top:16px;max-width:520px}
.renvoi label{font-size:.82rem;color:var(--texte2);display:block}
.renvoi button{margin-top:9px}

/* ─── les cartes du dossier ─── */
.carte{background:var(--fond2);border:1px solid var(--trait);border-left:3px solid var(--trait2);
  border-radius:9px;padding:10px 12px;margin-bottom:8px}
.carte.repondue{border-left-color:var(--vert)}
.carte.laissee{border-left-color:var(--trait2);opacity:.72}
.carte.a-venir{border-left-color:var(--trait);opacity:.6}
.carte.non-posee{border-left-style:dotted;opacity:.5}
.carte.doute{border-left-color:var(--chaud);border-left-style:dashed}
.carte.demande{border-left-color:var(--accent)}
.carte .cle{font-family:var(--mono);font-size:.66rem;color:var(--texte3)}
.carte .lab{font-size:.86rem;margin-top:2px}
.carte .val{font-size:.9rem;margin-top:3px}
.carte .meta{font-size:.68rem;color:var(--texte3);margin-top:5px}
.tag{font-size:.64rem;background:var(--chaud-fond);color:var(--chaud);padding:1px 7px;
  border-radius:999px;margin-left:6px;white-space:nowrap}
.tag.doux{background:var(--fond3);color:var(--texte3)}

/* ─── le fil ─── */
.fil{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.bulle{max-width:84%;padding:10px 13px;border-radius:14px;font-size:.92rem;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word}
.bulle.sys,.bulle.conducteur{background:var(--fond3);border-bottom-left-radius:4px}
.bulle.moi,.bulle.client{background:var(--accent-fond);align-self:flex-end;
  border-bottom-right-radius:4px}
.bulle .qui{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--texte3);font-weight:700;margin-bottom:4px}
.bulle.courante{background:transparent;border:1px solid var(--trait);max-width:100%}
.bulle.courante .label{font-weight:600}
.bulle.courante .aide{font-size:.84rem;color:var(--texte2);margin-top:6px}

/* ─── la conduite ─── */
/*
  EXACTEMENT LA HAUTEUR DU VIEWPORT, ET CHAQUE COLONNE DÉFILE POUR SON COMPTE.
  Avec `min-height:100vh` la grille GRANDISSAIT avec la plus haute des deux
  colonnes : un parcours à quatorze questions rendait la colonne de droite plus
  longue que l'écran, donc la gauche aussi, donc le composeur passait sous la
  ligne de flottaison — on ne voyait plus où répondre. Rapporté par Yan, écran
  en main.

  `dvh` ET NON `vh` : sur un téléphone, `vh` compte la barre d'adresse du
  navigateur comme si elle n'existait pas, et le bas de la page reste caché.
  `dvh` suit la hauteur réellement visible.
*/
.conduite{display:grid;grid-template-columns:1fr 340px;gap:0;
  height:100dvh;overflow:hidden;max-width:1120px;margin:0 auto}
.conduite .gauche{padding:20px 20px 16px;display:flex;flex-direction:column;
  border-right:1px solid var(--trait);min-height:0;overflow:hidden}
.conduite .droite{padding:20px 18px 60px;background:var(--fond3);
  overflow-y:auto;min-height:0}
.conduite .entete{flex:none}
/*
  `min-height:0` EST LA LIGNE QUI FAIT TOUT. Un enfant de conteneur flex a pour
  taille minimale sa taille de contenu : sans cette ligne il REFUSE de se
  réduire, donc il ne défile pas et il pousse ses voisins dehors. C'est le même
  mécanisme que pour un tableau dense dans `docs/ECRANS.md` de la console.
*/
.conduite .fil{flex:1 1 auto;min-height:0;overflow-y:auto;
  justify-content:flex-end;padding-right:4px}
/* Quand le fil est court, le contenu se pose JUSTE AU-DESSUS du composeur
   plutôt qu'en haut d'un grand vide — c'est le premier écran d'un client. */
.conduite .composer{flex:none}
.conduite .droite h2{margin-top:0}
.entete .nom{font-size:1.05rem;font-weight:650}
.entete .pas{font-size:.78rem;color:var(--texte2);margin-top:2px}
.jauge{height:5px;border-radius:999px;background:var(--trait);overflow:hidden;margin:9px 0 4px}
.jauge i{display:block;height:100%;background:var(--accent)}
/* ── LE COMPOSEUR, AU DESSIN DE MNÉORA ──────────────────────────────────────
   `templates/_composer.html` de la console : UN SEUL CADRE — le texte, et sous
   lui ce qu'on peut faire, en ronds. Pas une zone de saisie puis une rangée de
   boutons détachée : un objet, qui se tient. */
.composer{flex:none;border:1px solid var(--trait2);border-radius:16px;
  background:var(--fond2);padding:10px 12px 8px;margin-top:10px;
  transition:border-color .12s}
.composer:focus-within{border-color:var(--accent)}
.composer textarea,.composer input[type=number],.composer input[type=date]{
  border:0;background:none;padding:2px 2px 0;margin:0;font-size:1rem;
  line-height:1.5;resize:none;width:100%;max-height:220px;overflow-y:auto}
.composer textarea:focus,.composer input:focus{outline:none}
.composer-bas{display:flex;align-items:center;gap:7px;margin-top:6px}
.rond{width:32px;height:32px;min-width:32px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--trait);
  background:var(--fond);color:var(--texte2);cursor:pointer;flex:none}
.rond:hover{background:var(--fond3);color:var(--texte)}
.rond:disabled{opacity:.45;cursor:default}
.rond.micro.actif{background:var(--rouge);border-color:transparent;color:#fff}
.rond.envoyer{margin-left:auto;background:var(--accent);border-color:transparent;
  color:#fff;font-size:1.05rem;line-height:1}
.composer-etat{font-size:.74rem;color:var(--texte3);margin-left:6px;flex:1;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer-etat.doux{color:var(--chaud)}
.composer-etat.proche{color:var(--rouge)}
/* Les options d'un `select` : au-dessus du texte, dans le même cadre. */
.composer .choix{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.composer .choix button{font-size:.86rem;padding:7px 13px;border-radius:999px;
  border:1px solid var(--trait2);background:var(--fond)}
.composer .choix button:hover{background:var(--accent-fond);border-color:var(--accent);
  color:var(--accent)}

/* ── L'AVANCEMENT PAR MODULE, repris de `realisons-app` ───────────────────
   Une barre globale dit « 3 sur 10 » ; elle ne dit pas qu'il reste deux parties
   ni laquelle est en cours. Sur une préparation de 45 min, c'est la différence
   entre « c'est long » et « j'y suis presque ». */
.etapes{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 2px}
.etape{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;
  color:var(--texte3);background:var(--fond3);border-radius:999px;padding:3px 10px}
.etape i{width:6px;height:6px;border-radius:50%;background:var(--trait2);flex:none}
.etape em{font-style:normal;font-family:var(--mono);font-size:.66rem;opacity:.8}
.etape.ici{background:var(--accent-fond);color:var(--accent);font-weight:600}
.etape.ici i{background:var(--accent)}
.etape.faite i{background:var(--vert)}
.etape.faite{color:var(--texte2)}

/* ── LA PASTILLE D'ACCUSÉ DE RÉCEPTION ─────────────────────────────────────
   Récupérée de `QuestionCompletionBadges` de realisons-app. Sans elle, le
   client écrit, la carte apparaît dans la colonne de droite — sous le pli sur
   un téléphone — et le fil ne dit rien. Il recommence, ou il doute. */
.pastille{align-self:flex-start;margin:0;font-size:.74rem;color:var(--vert);
  background:var(--vert-fond);border-radius:999px;padding:4px 12px;
  display:inline-flex;align-items:center;gap:6px;max-width:92%}
.pastille::before{content:"✓";font-weight:700;font-size:.8rem}

.droite .carte{cursor:pointer}
.droite summary{list-style:none;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.droite summary::-webkit-details-marker{display:none}
.droite .lab{font-size:.74rem;color:var(--texte3)}
.droite .val{font-size:.86rem}
.corriger{margin-top:9px}
.corriger button{margin-top:7px;font-size:.82rem;padding:7px 12px}
.pied-client{text-align:center;font-size:.76rem;color:var(--texte3);padding:18px}

@media(max-width:860px){
  /*
    SUR TÉLÉPHONE, ON NE DÉFILE PAS DEUX PANNEAUX DANS UN ÉCRAN FIXE. Deux zones
    de défilement empilées sur 390 px rendent impossible de savoir laquelle on
    fait glisser. La page reprend son flux naturel, et le composeur devient
    collant en bas : il reste à portée de pouce sans voler de la hauteur au fil.
  */
  .conduite{grid-template-columns:1fr;height:auto;overflow:visible}
  .conduite .gauche{border-right:0;overflow:visible;min-height:auto;padding-bottom:0}
  .conduite .fil{overflow:visible;justify-content:flex-start}
  .conduite .composer{position:sticky;bottom:10px;margin-bottom:10px;
    box-shadow:0 6px 20px -10px rgba(0,0,0,.45)}
  .conduite .droite{border-top:1px solid var(--trait);overflow:visible}
  .bulle{max-width:92%}
  .liste{font-size:.82rem}

  /* LA GRILLE DE FORMULAIRE PREND LA LARGEUR, EN UNE COLONNE. La règle qui
     vivait ici disait `flex-direction:column;align-items:stretch` — inerte
     depuis que `.ouvrir` est passée de `flex` à `grid` le 20.10.2026 : un
     `flex-direction` sur une grille ne fait rien. Elle avait l'air d'un
     réglage, et c'est pire qu'une absence de réglage. */
  .ouvrir{grid-template-columns:1fr}
  .ouvrir label.large,.ouvrir label.moyen{grid-column:1/-1;max-width:none}
  .depot label{flex:1 1 100%}

  /* ── LES CIBLES DU DOIGT FONT 44 px ────────────────────────────────────────
     Les ronds du composeur font 32 px, dessinés pour une souris au pixel.
     Le micro et l'envoi sont les deux choses que le client touche le plus
     souvent, et sur un téléphone 32 px se rate — surtout en marchant, et
     surtout à soixante-dix ans. WCAG 2.5.5 demande 44 ; on les lui donne. */
  .rond{width:44px;height:44px;min-width:44px}
  .rond svg{width:18px;height:18px}
  .rond.envoyer{font-size:1.3rem}
  .composer-bas{gap:9px}
  /* LES OPTIONS SE TOUCHENT. Une pastille de 31 px entre deux autres se rate
     une fois sur trois, et se rater ici veut dire répondre « non » à la place
     de « oui ». */
  .composer .choix{gap:8px}
  .composer .choix button{min-height:44px;padding:9px 16px;font-size:.95rem}
  .droite summary{padding:3px 0}
  .corriger button,.corriger select{min-height:44px}

  /* LE COMPOSEUR NE PASSE PAS SOUS LA BARRE DU TÉLÉPHONE. Sur un iPhone, les
     10 px du bas tombent derrière l'indicateur d'accueil : on garde le plus
     grand des deux, la marge voulue et celle que l'appareil déclare. */
  .conduite .composer{margin-bottom:max(10px, env(safe-area-inset-bottom))}
}

/* ── LE BLOC DU LIEN ────────────────────────────────────────────────────────
   Yan, le 20.10.2026 : « ça prend énormément de place pour pas grand-chose »,
   et « il y a beaucoup de trucs qui sont tout à gauche ». L'encadré précédent
   faisait six lignes de prose au-dessus de deux valeurs, le tout dans une
   colonne de 400 px contre le bord.

   Trois rangées, une par chose qu'on transmet, chacune sur une ligne : le
   libellé, la valeur en chasse fixe qui prend la place qu'il lui faut, et les
   actions à droite. Ce qu'on vient chercher — l'adresse — est ce qui est le
   plus large. */
/* Le champ qui filtre une liste longue : au-dessus d'elle, plus discret
   qu'elle — il cherche, il ne choisit pas. */
/* L'autre chemin, sur une porte : discret, mais présent. Sans lui, la porte
   du compte n'existe pour personne — aucun écran ne la nommait. */
/* Les trois blocs d'une question : ce que le client lit, ce que la maison
   lit, comment elle se répond. Un titre de bloc est plus discret qu'un titre
   d'écran — il range, il n'annonce pas. */
.bloc-dit{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--texte3);font-weight:700;margin:22px 0 2px;font-family:var(--sans)}
.sous-bloc{margin-top:0}
.selon-type[hidden]{display:none}

.autre-porte{margin:22px 0 0;font-size:.84rem;color:var(--texte2);
  padding-top:16px;border-top:1px solid var(--trait)}

.filtre-modele{font-size:.86rem;padding:7px 10px;margin-bottom:5px;
  background:var(--fond);border-style:dashed}

.lien-bloc{border:1px solid var(--trait);border-radius:11px;padding:12px 16px;
  margin:0 0 18px;background:var(--fond2);max-width:var(--lecture)}
.lien-bloc.fort{background:var(--accent-fond);border-color:var(--accent)}
.lien-dit{margin:0 0 10px;font-size:.86rem}
.lien-rangee{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:5px 0;border-top:1px solid var(--trait)}
.lien-rangee:first-of-type{border-top:0}
.lien-rangee .etiq{flex:0 0 7.5rem}
.lien-rangee .url{flex:1 1 18rem;min-width:0;word-break:break-all}
.lien-rangee form{margin:0}
/* LE RETOUR DU PRESSE-PAPIER SE VOIT, sinon on clique deux fois sans savoir. */
.lien-rangee button.copie{color:var(--vert)}

/* ─── la remise d'un lien : une adresse complète, jamais un bout ─── */
.remise{display:flex;flex-wrap:wrap;gap:18px;margin:12px 0 4px}
.champ-remise{display:flex;flex-direction:column;gap:3px}
.etiq{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--texte3);font-weight:700}
.url{font-family:var(--mono);font-size:.95rem;word-break:break-all;color:var(--accent)}
.url.mot{color:var(--texte);letter-spacing:.04em;-webkit-user-select:all;user-select:all}
.url.petite{font-size:.76rem}
.aremettre{margin:16px 0 6px;font-size:.86rem}
/* LA LARGEUR EST SUR LA CLASSE, ET NON SUR `form > .amessage`. Elle vivait
   plus bas sous ce sélecteur-là, et les deux brouillons de l'écran d'un dossier
   ne sont pas au même endroit : celui de la notification est bien un enfant
   direct de son formulaire, celui « à copier tel quel » est posé sous le lien,
   hors formulaire. Résultat : le premier faisait 68 caractères, le second toute
   la fenêtre — un textarea de mille pixels, exactement ce que Yan a relevé le
   20.10.2026. Un sélecteur qui dépend de l'arbre borne les cas qu'on a vus. */
.amessage{font-family:var(--sans);font-size:.86rem;line-height:1.5;background:var(--fond2);
  border-color:var(--trait);cursor:pointer;display:block;max-width:var(--lecture)}
.prudence{font-size:.82rem;color:var(--texte2);background:var(--chaud-fond);
  border-radius:9px;padding:10px 13px;margin:14px 0 0}

/* ─────────────────────────────────────────────────────────────────────────────
   SON ESPACE — la porte de retour et ses dossiers. Côté client, donc les mêmes
   règles que la conduite : une colonne, des cibles larges, rien sous le pli qui
   compte. Ajouté le 12.10.2026 avec le mécanisme de compte.
   ───────────────────────────────────────────────────────────────────────────── */
.espace{max-width:36rem;margin:0 auto;padding:1.5rem 1rem 2rem}
.espace-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.espace-tete h1{margin:0 0 .15rem}
.espace .sous{margin:0;font-family:var(--mono,monospace);font-size:.82rem;opacity:.7}

ul.dossiers{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.dossier-ligne{border:1px solid var(--trait);border-radius:.6rem;padding:.85rem 1rem}
.dossier-ligne .titre{display:block;font-weight:600;font-size:1.02rem;margin-bottom:.3rem}
.dossier-ligne a.titre{text-decoration:none}
.dossier-ligne a.titre:hover{text-decoration:underline}
.dossier-ligne .etat{font-size:.82rem}
/* La jauge d'un dossier : plate, sans animation, et elle ne porte aucun chiffre
   que le texte ne donne déjà. */
.dossier-ligne .jauge{display:block;height:3px;border-radius:2px;margin-top:.55rem;
  background:var(--trait);overflow:hidden}
.dossier-ligne .jauge i{display:block;height:100%;background:currentColor;opacity:.55}

/* Le rail de la maison porte maintenant un onglet. */
.rail .onglet{font-size:.86rem;text-decoration:none;opacity:.8}
.rail .onglet:hover{opacity:1;text-decoration:underline}

/* Les rattrapages tiennent dans une cellule, l'un sous l'autre. */
td.actions{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}

/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  LES ÉCRANS DE GESTION — posés le 16.10.2026                             │
   ╰──────────────────────────────────────────────────────────────────────────╯ */

/* Le titre d'un écran et son action principale, sur la même ligne et séparés du
   corps par un filet : c'est ce qui sépare « où je suis » de « ce qu'il y a ».
   Sans ce filet, le haut et le bas se confondent dès que la liste est longue. */
.tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--trait)}
.tete h2{margin:0 0 2px}
.tete .sous{margin:0;font-size:.86rem}

/* AJOUTER EST REPLIÉ PAR DÉFAUT. Un formulaire de création toujours ouvert
   occupe le haut de l'écran pour une action qu'on fait une fois par semaine, et
   repousse sous le pli la liste qu'on vient lire. */
details.ajout{margin:0}
details.ajout summary{cursor:pointer;list-style:none;display:inline-block;
  font-size:.84rem;font-weight:600;padding:7px 13px;border-radius:7px;
  background:var(--accent);color:var(--fond2)}
details.ajout summary::-webkit-details-marker{display:none}
details.ajout[open] summary{background:transparent;color:var(--accent);
  border:1px solid var(--accent);padding:6px 12px}
details.ajout[open]{display:block;width:100%}
details.ajout .ouvrir{margin-top:12px}

.chercher{display:flex;gap:9px;align-items:center;margin:14px 0 4px;flex-wrap:wrap}
/* Un filtre est une liste courte : il n'a aucune raison de faire la fenêtre. */
.chercher select{flex:0 1 var(--champ);min-width:12rem}
.chercher input{flex:0 1 var(--champ-moyen);min-width:180px;font-family:var(--sans);font-size:.86rem;
  padding:7px 11px;border:1px solid var(--trait);border-radius:7px;
  background:var(--fond2);color:var(--texte)}

/* Un constat qui a réussi. Vert sobre : il confirme, il ne célèbre pas. */
.fait{background:var(--vert-fond);color:var(--vert);padding:10px 13px;border-radius:9px;
  margin:12px 0;font-size:.9rem}

/* Les actions d'une ligne, l'un sous l'autre dans leur cellule. */
td.actions form{margin:0}

/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  LA BARRE D'EN-TÊTE — 16.10.2026                                         │
   ╰──────────────────────────────────────────────────────────────────────────╯

   Elle remplace la colonne essayée le 12.10. Six entrées courtes n'ont pas
   besoin de 186 pixels de large, et la largeur rendue sert aux tableaux : c'est
   eux qu'on vient lire.

   ELLE COLLE EN HAUT. On revient à la liste des clients cinquante fois par
   heure ; une navigation qu'il faut remonter chercher est une navigation qu'on
   contourne par le bouton « retour » du navigateur. */
/* LE FILET VA D'UN BORD À L'AUTRE, SON CONTENU NON. La barre sépare, donc elle
   traverse ; ce qu'elle porte prend la même marge que la page, pour que le logo
   soit au-dessus du titre et non trois cents pixels à côté — reproche de Yan du
   16.10.2026. Le 20.10, la colonne fixe a disparu : la barre et la page suivent
   toutes deux la fenêtre, et il n'y a plus qu'un seul cadrage. */
.barre{position:sticky;top:0;z-index:5;background:var(--fond2);
  border-bottom:1px solid var(--trait)}
.barre .dedans{padding:0 var(--marge);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.barre .marque{font-family:var(--display);font-weight:600;font-size:1.1rem;
  letter-spacing:-.015em;text-decoration:none;color:var(--texte);padding:13px 0}
.barre nav{display:flex;gap:2px;flex-wrap:wrap;flex:1;min-width:0}
.barre .moi{display:flex;align-items:center;gap:12px;margin-left:auto}
.barre .moi form{margin:0}

.barre .onglet{display:inline-flex;align-items:baseline;gap:7px;font-size:.88rem;
  text-decoration:none;color:var(--texte);padding:13px 11px;
  border-bottom:2px solid transparent}
.barre .onglet:hover{background:var(--fond3)}
.barre .onglet .n{font-family:var(--mono);font-size:.72rem;color:var(--texte3)}
/* LA VUE COURANTE SE MARQUE PAR UN FILET SOUS L'ONGLET, et non par un pavé plein.
   Dans une barre, un pavé plein se lit comme un bouton qu'on pourrait presser ;
   un filet dit « vous êtes ici » sans promettre une action. */
.barre .onglet.ici{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
.barre .onglet.ici .n{color:var(--accent)}
.barre .moi em{font-style:normal;font-size:.68rem;background:var(--fond3);
  padding:1px 7px;border-radius:999px;margin-left:2px;color:var(--texte2)}

/* Sous 720 pixels la barre passe sur deux lignes : les onglets gardent leur
   cible tactile plutôt que de rétrécir. */
@media(max-width:720px){
  :root{--marge:16px}
  .barre .dedans{gap:0 14px}
  .barre .marque{padding:11px 0}
  .barre nav{order:3;width:100%;border-top:1px solid var(--trait);overflow-x:auto}
  .barre .onglet{padding:10px 9px;white-space:nowrap}
}

/* ═══ les vues d'un même écran ═══════════════════════════════════════════════
   Deux vues sous un seul onglet de la barre : « En cours » et « Modèles » pour
   les parcours, « Le dossier » et « Le fil » pour un dossier. Elles se marquent
   comme les onglets du haut — un filet, pas un pavé — mais en plus petit : la
   barre dit où l'on est dans l'application, celles-ci où l'on est dans l'écran,
   et deux marquages identiques feraient deux niveaux indiscernables. */
.vues{display:flex;gap:4px;border-bottom:1px solid var(--trait);margin:0 0 18px}
.vues a{font-size:.86rem;text-decoration:none;color:var(--texte2);padding:9px 13px;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;
  align-items:baseline;gap:7px}
.vues a:hover{color:var(--texte)}
.vues a .n{font-family:var(--mono);font-size:.72rem;color:var(--texte3)}
.vues a.ici{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
.vues a.ici .n{color:var(--accent)}

/* ═══ une information par colonne ════════════════════════════════════════════
   Consigne de Yan, répétée deux fois le 16.10.2026 : « une information par
   colonne, toujours ». Ce qui suit est l'outillage de cette règle — sans lui on
   réempile deux faits dans une cellule pour éviter d'en écrire une de plus. */

/* UN NOMBRE SE LIT EN COLONNE, pas en phrase. Aligné à droite et en chasse fixe,
   l'œil compare dix lignes d'un coup ; en chasse variable il faut les lire. */
.liste .n{text-align:right;font-family:var(--mono);font-size:.84rem;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.liste th.n{text-align:right}
/* ZÉRO NE S'ÉCRIT PAS COMME TROIS. Un zéro en gris dit « rien ici » sans faire
   de bruit ; en noir il se compte comme une valeur qu'on vient de relever. */
.liste .n.zero{color:var(--texte3)}
/* L'IDENTIFIANT TECHNIQUE EST UNE COLONNE, et il se lit en chasse fixe : c'est
   une chaîne qu'on recopie, pas un nom qu'on lit. */
.liste .cle{font-family:var(--mono);font-size:.78rem;color:var(--texte2);
  white-space:nowrap}
.liste .date{font-size:.8rem;color:var(--texte2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* LE TABLEAU PEUT DÉPASSER, et c'est préférable à des colonnes écrasées : on
   fait défiler une table, on ne déchiffre pas une cellule de trois caractères. */
.cadre-liste{overflow-x:auto;margin:14px 0}
.cadre-liste .liste{margin:0;min-width:100%}

/* ═══ la peau d'une marque ═══════════════════════════════════════════════════ */
.peau{display:grid;gap:12px;justify-content:start;
  grid-template-columns:repeat(auto-fill,minmax(10rem,12rem));margin:12px 0 4px}
.peau label{font-size:.78rem;color:var(--texte2);display:block}
/* LE SÉLECTEUR NATIF, et pas une bibliothèque. Il est accessible, il connaît la
   pipette du système, et il ne sort pas du tunnel. */
.peau input[type=color]{width:100%;height:42px;padding:3px;cursor:pointer;
  margin-top:5px;border:1px solid var(--trait2);border-radius:9px;
  background:var(--fond2)}
.peau .valeur{font-family:var(--mono);font-size:.72rem;color:var(--texte3);
  display:block;margin-top:3px}
/* LA PASTILLE DE LA LISTE : on ne lit pas un #8f3d26, on le regarde. */
.pastilles{display:inline-flex;gap:3px;vertical-align:middle}
.pastilles i{width:15px;height:15px;border-radius:4px;display:inline-block;
  border:1px solid var(--trait)}

/* ═══ exporter ═══════════════════════════════════════════════════════════════
   Quatre formats côte à côte plutôt qu'un menu déroulant : quatre liens tiennent
   sur une ligne, et un menu qu'il faut ouvrir pour voir ce qu'il contient cache
   trois formats sur quatre. */
.exports{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin:0}
.exports .etiq{font-size:.78rem;color:var(--texte3)}
.exports a{font-size:.8rem;font-family:var(--mono);text-decoration:none;
  padding:4px 9px;border:1px solid var(--trait);border-radius:7px;
  background:var(--fond2);color:var(--texte2)}
.exports a:hover{border-color:var(--accent);color:var(--accent)}

/* Le dépôt d'un fichier. `input[type=file]` natif, pour la même raison que le
   sélecteur de couleur : il marche sans JavaScript et sans rien télécharger. */
.depot{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:10px 0}
.depot label{font-size:.8rem;color:var(--texte2);flex:0 1 var(--champ-moyen);min-width:220px}
.depot input[type=file]{font-size:.84rem;padding:8px}

/* Le texte d'un tour : il fait parfois trois cents mots, et il ne doit ni
   écraser les cinq colonnes d'à côté ni s'étirer sur toute la largeur — au-delà
   de 90 caractères, l'œil perd sa ligne en revenant à la marge. */
.liste .dit{max-width:70ch;white-space:pre-wrap}
/* Une ligne dont la confiance est basse se signale par un filet à gauche, pas
   par un fond : un fond coloré sur une ligne de tableau se lit comme une
   sélection. */
.liste tr.doute td:first-child{box-shadow:inset 3px 0 0 var(--chaud)}
/* LA LIGNE QUE LE PANNEAU DU DESSOUS RÈGLE. Ici un fond EST juste, parce que
   c'est exactement une sélection — le commentaire ci-dessus dit pourquoi il ne
   l'est pas pour un doute. */
.liste tr.retenue{background:var(--accent-fond)}
.liste tr.retenue td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* `label.large` EST DÉFINI PLUS HAUT, avec la grille. La version qui vivait ici
   datait de la mise en page en `flex` du 16.10 et portait `min-width:100%` :
   venant après, elle écrasait le `max-width` de lecture et rendait les
   textareas pleine fenêtre. Trouvé le 20.10 en lisant la feuille SERVIE — la
   source, elle, avait l'air juste. */
.ouvrir label.case{display:flex;align-items:center;gap:8px;grid-column:auto}
.ouvrir label.case input,.depot label.case input{width:auto;margin:0}
.depot label.case{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
/* Deux dépliants côte à côte dans l'en-tête d'un écran. */
.tete .actions{margin:0;align-items:flex-start}
.peau .case-jeton{display:flex;align-items:center;gap:7px}
.peau .case-jeton input{width:auto;margin:0}

/* LES QUATRE EXPORTS SUR UNE LIGNE DANS UN TABLEAU. En `flex-wrap:wrap` dans une
   cellule étroite, ils s'empilaient sur quatre lignes et donnaient 95 pixels de
   haut à CHAQUE rangée — dix-neuf modèles faisaient trois écrans et demi. */
.liste .exports{flex-wrap:nowrap;white-space:nowrap}
.liste .exports a{padding:2px 6px;font-size:.72rem}
/* Le libellé humain ne se casse pas en trois lignes pour laisser de la place à
   des colonnes de nombres qui n'en demandent pas. */
.liste .nom{min-width:210px}

/* ═══ un tableau large ══════════════════════════════════════════════════════
   Un tableau à quatorze colonnes se balaie de haut en bas : il n'a pas le
   problème du texte long, et il a besoin de toute la largeur. Depuis le
   20.10.2026 il l'a sans rien faire — la page suit la fenêtre. */
/* Le débordement hors colonne n'a plus lieu d'être : la page fait déjà la
   largeur de la fenêtre. Reste le défilement, pour les tableaux à quatorze
   colonnes sur un écran étroit — écraser une colonne à trois caractères ne
   serait pas une réponse. */
/* Le `overflow-x` reste : à partir d'un certain nombre de colonnes, défiler est
   la seule issue honnête — écraser une colonne à trois caractères n'en est pas
   une. */

/* Une liste dans un encadré : serrée, sans puces lointaines. */
.avis ul.serree{margin:6px 0 0;padding-left:20px}
.avis ul.serree li{margin:2px 0}
/* L'accent vif ne porte jamais de texte — il n'a que le seuil des composants.
   Il sert aux aplats et aux repères : la pastille d'une peau, un filet d'appui. */
.pastilles i.vif{border-color:var(--accent-vif)}

/* Les trois genres de message, côte à côte au-dessus du brouillon. */
.genres{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 10px}
.genres .case-jeton{font-size:.86rem;color:var(--texte)}
/* Un bouton d'action posé DANS une cellule de tableau, sur la même ligne que
   ce qu'il commente : il ne doit pas pousser la cellule sur deux lignes. */
.enligne{display:inline;margin:0}
.enligne button{padding:0;margin-left:6px}

/* La ligne de compteurs sous un titre : les faits calculés d'un objet, sans le
   tableau à douze colonnes qui répétait le formulaire d'à côté. */
.compteurs{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  margin:0 0 20px;font-size:.86rem;color:var(--texte2);max-width:none}
.compteurs b{color:var(--texte);font-weight:600}
/* Un formulaire `inert` ne se saisit pas : on le montre éteint plutôt que de le
   cacher, pour qu'on voie CE QUI serait éditable ailleurs. */
form[inert]{opacity:.55}