/* studio-vues.css — la grammaire Studio appliquée page par page.
 *
 * studio.css porte la coque et les deux écrans de référence (le Bureau, la
 * liste des projets). Ce fichier porte le reste, dans l'ordre des passes de
 * documents/GRAMMAIRE_STUDIO.md §4 : d'abord ce que la grammaire tranche pour
 * tout le produit (§2), puis une section par page. Aucune valeur neuve : tout
 * vient des jetons relevés sur les écrans de référence. */

/* ═════════════════════ §2 · Ce que la grammaire tranche ═════════════════════ */

/* Les cibles : les segments et les listes du Studio mesuraient 38 px. La
 * règle d'accessibilité (§14) est de 44 ; elle vaut aussi pour la référence. */
.studio-statuts button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.studio-filtre select { min-height: 44px; }

/* Le sélecteur de mode : segments, pastille, la question dessous. */
.st-modes { margin: 0 0 24px; }
.st-modes .studio-statuts { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.st-modes .studio-statuts button { font-weight: 500; }
.st-modes-q { margin-top: 10px; font-size: 13px; color: var(--clair-terne); }
.studio-statuts .studio-compte { background: var(--surface-1); }
.studio-statuts button.active .studio-compte { background: var(--surface-3); }
/* Le compteur d'alerte : la couleur est dans le texte, jamais en aplat. */
.studio-compte.alerte { color: var(--bloquant); font-weight: 600; }

/* Le geste texte. Bleu hors d'une rangée d'actions ; gris dedans, comme
 * « Ouvrir le dossier » sous la pièce du Bureau. */
.studio-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  font: 500 13px var(--affichage); color: var(--studio-bleu); text-decoration: none; }
.studio-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.studio-actions .studio-lien { font-size: 14px; font-weight: 400; color: var(--clair-terne); }
.studio-actions .studio-lien:hover { color: var(--clair); }

/* L'état par la forme : un filet de 3 px et la couleur dans le texte. */
.f-alerte { --ton: var(--bloquant); }
.f-attente { --ton: var(--arbitrage); }
.f-or { --ton: var(--info); }
.f-calme { --ton: var(--trait-clair); }
.studio-piece.f-alerte, .studio-piece.f-attente, .studio-piece.f-or, .studio-piece.f-calme {
  border-left: 3px solid var(--ton); border-top-left-radius: 3px; border-bottom-left-radius: 3px; }

/* Les boutons : deux gestes dans la référence, le plein bleu et le geste
 * texte. `.b` seul garde un filet pour se voir hors d'une rangée ; `.bouton`,
 * resté sans règle depuis la v3, prend les mêmes. */
.b { background: var(--surface-1); color: var(--clair); border: 1px solid var(--trait);
  font: 500 14px var(--affichage); padding: 6px 12px; }
.b:hover { border-color: var(--trait-clair); color: var(--clair); }
.b.nu { background: none; border-color: transparent; color: var(--clair-terne); }
.b.nu:hover { color: var(--clair); border-color: transparent; }
.bouton { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--studio-bleu); color: var(--surface-1); border: 1px solid var(--studio-bleu);
  font: 600 14px var(--affichage); padding: 6px 14px; }
.bouton.creux { background: none; border-color: transparent; color: var(--studio-bleu);
  font-weight: 500; padding: 0 8px; }
.bouton.creux:hover { text-decoration: underline; text-underline-offset: 3px; filter: none; }

/* Les bannières et les prix : filet d'état, texte à l'encre, pas d'aplat.
 * Leurs couleurs étaient écrites en dur pour le sombre (#e5c88c sur blanc). */
.prix, .banniere { background: var(--surface-1); border: 1px solid var(--trait);
  border-left: 3px solid var(--ton, var(--arbitrage)); border-radius: 6px;
  color: var(--clair); padding: 10px 14px; font-size: 13px; line-height: 1.5; }
.prix .signe, .banniere .b-ico { color: var(--ton, var(--arbitrage)); }
.prix.rouge, .banniere.rouge { --ton: var(--bloquant); color: var(--clair); background: var(--surface-1); border-color: var(--trait); border-left-color: var(--bloquant); }
.prix.vert, .banniere.vert { --ton: var(--succes); color: var(--clair); background: var(--surface-1); border-color: var(--trait); border-left-color: var(--succes); }

/* Le rail d'une page : une pile de sections blanches. Le panneau de contexte
 * gris ne vit que dans une table ; sur la toile grise, le rail est blanc. */
.aside { gap: 16px; }
.panneau-lat { background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px;
  padding: 18px 20px 20px; font-size: 13px; }
.panneau-lat h3 { font: 550 17px/1.3 var(--affichage); letter-spacing: -.01em; color: var(--clair);
  text-transform: none; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.panneau-lat h3 .droite { margin-left: auto; font: 550 12px var(--affichage); letter-spacing: 0; }
.panneau-lat .jauge { height: 4px; background: var(--surface-3); border-radius: 2px; margin: 4px 0 10px; overflow: hidden; }
.panneau-lat .jauge i { border-radius: 2px; }

/* Le blocage : un élément de liste blanc à filet gauche coloré — quoi, depuis
 * (coloré), coût (gris), gestes (texte bleu). */
.blocages { display: grid; gap: 8px; }
.blocage { --ton: var(--bloquant); background: var(--surface-1); border: 1px solid var(--trait);
  border-left: 3px solid var(--ton); border-radius: 6px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; }
.blocage.f-attente { --ton: var(--arbitrage); }
.blocage b { font: 550 13px/1.45 var(--affichage); color: var(--clair); letter-spacing: 0; }
.blocage .quand { font: 550 12px var(--affichage); color: var(--ton); letter-spacing: 0; }
.blocage .cout { font-size: 12px; line-height: 1.5; color: var(--clair-terne); letter-spacing: 0; }
.blocage .gestes { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 2px 0 -8px -8px; }
.blocage .gestes:empty { display: none; }

/* Le titre de bloc (`.section-titre`) : une tête de section Studio, en
 * minuscules — titre 550, pastille de compte, et ce qui va à droite. */
.section-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
  font: 550 17px/1.3 var(--affichage); letter-spacing: -.01em; color: var(--clair); text-transform: none; }
.section-titre .n { color: var(--studio-bleu); }
.section-titre .compte, .section-titre .taille { font: 500 12px var(--affichage); color: var(--clair-terne);
  background: var(--surface-3); border-radius: 5px; padding: 3px 7px; letter-spacing: 0; }
.section-titre .droite { margin-left: auto; max-width: 100%; font: 500 12px var(--affichage); letter-spacing: 0; color: var(--clair-terne); }
/* Une taille n'est pas une priorité : « 9 supports » est un inventaire, « 7
 * décisions » est une réclamation. Deux sens, deux classes. */
.taille { color: var(--clair-terne); font-size: 12px; }

/* La bande de recevabilité — le motif central : une question, des contrôles,
 * le prix de l'écart, le geste. Une section blanche à filet d'état. */
.recev { --ton: var(--trait-clair); display: grid; gap: 12px; padding: 16px 18px;
  background: var(--surface-1); border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.recev.tenu { --ton: var(--succes); }
.recev.manque { --ton: var(--bloquant); }
.recev.flou { --ton: var(--arbitrage); }
.rv-question { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rq-t { font: 550 17px/1.35 var(--affichage); color: var(--clair); }
.rq-etat { margin-left: auto; font: 550 12px var(--affichage); color: var(--ton); }
.recev.flou .rq-etat { color: var(--clair-terne); }
.rq-etat:first-letter { text-transform: uppercase; }
.rv-controles { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-i { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 5px;
  background: var(--surface-4); border: 1px solid var(--trait); font-size: 12px; color: var(--clair); }
.rc-i .m { color: var(--bloquant); font-size: 11px; }
.rc-i.ok { color: var(--clair-terne); }
.rc-i.ok .m { color: var(--succes); }
.rv-prix { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--clair); }
.rv-prix svg { color: var(--ton); margin-top: 3px; flex: 0 0 auto; }
/* Un coût s'écrit en minuscules pour s'insérer dans une phrase ; seul en tête
 * de ligne, il prend sa majuscule. */
.rv-prix > span { display: block; }
.rv-prix > span::first-letter { text-transform: uppercase; }
.rv-gestes { display: flex; gap: 8px; flex-wrap: wrap; }

/* La validation d'un document : sa version, puis les verdicts. */
.vd { display: grid; gap: 8px; }
.vd-gestes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vd-v { font: 500 12px var(--affichage); color: var(--clair-terne); background: var(--surface-3);
  border-radius: 5px; padding: 3px 7px; margin-right: 4px; }
.vd-gestes .b { font-size: 13px; }
/* Le verdict positif garde sa couleur dans le texte, pas en aplat : sur un
 * écran qui a déjà son action principale, il n'en devient pas une seconde. */
.vd-gestes .b.vert { background: var(--surface-1); color: var(--succes); border-color: var(--trait); font-weight: 600; }
.vd-gestes .b.vert:hover { border-color: var(--succes); }

/* Les champs d'une section : chaque champ est un bouton — et un champ vide se
 * voit, puisque c'est celui qu'on vient remplir. Une section blanche de lignes. */
.se-champs { margin-top: 28px; background: var(--surface-1); border: 1px solid var(--trait);
  border-radius: 10px; padding: 18px 22px 8px; }
.sec-t { display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font: 550 17px var(--affichage); color: var(--clair); text-transform: none; letter-spacing: 0; }
.sec-t span { font: 500 12px var(--affichage); }
.ch-e { display: grid; gap: 3px; width: calc(100% + 16px); margin: 0 -8px; text-align: left; padding: 12px 8px 12px 11px;
  color: inherit; font: inherit; background: none; border: 0; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--trait); cursor: pointer; min-height: 44px; }
.se-champs .ch-e:last-child { border-bottom: 0; }
.ch-e:hover { background: var(--surface-4); }
.che-n { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--clair-terne); }
.che-i { color: var(--arbitrage); font-weight: 550; }
.che-v { font-size: 14px; line-height: 1.55; color: var(--clair); max-width: 65ch; overflow-wrap: anywhere; }
.ch-e.vide .che-v { color: var(--clair-terne); }
.ch-e.infere { border-left-color: var(--arbitrage); }
.ch-e.autrui { border-left-color: var(--info); }
.ch-aide { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 65ch; margin-bottom: 10px; }

@media print { .recev { display: none !important; } }

/* L'étiquette d'état (`UI.eti`) : minuscules, contour, couleur dans le texte.
 * Un état encodé par la seule couleur n'existe pas pour qui ne la distingue
 * pas : chaque étiquette d'état porte un signe avant son texte (§14). */
.eti { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--trait); background: var(--surface-1); color: var(--clair);
  font: 550 11px/1.4 var(--affichage); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.eti.vert { color: var(--succes); }
.eti.attente { color: var(--arbitrage); }
.eti.alerte { color: var(--bloquant); }
.eti.or { color: var(--studio-bleu); }
.eti.terne { color: var(--clair-terne); }
.eti.plein { color: var(--surface-1); background: var(--clair); border-color: var(--clair); }
.eti.alerte::before { content: "●"; font-size: .9em; }
.eti.attente::before { content: "◐"; font-size: .9em; }
.eti.vert::before { content: "✓"; font-size: .9em; }

/* La vignette (`IMAGE.vignette`) : l'aplat pâle des couvertures du Bureau. */
.vignette { background: var(--surface-3); border: 0; border-radius: 4px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; flex: 0 0 auto; position: relative; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette .absente { font-size: 11px; line-height: 1.4; color: var(--clair-terne); text-align: center; padding: 6px; }
.vignette.v-ligne { width: 100%; max-width: 118px; height: 74px; }
.vignette.v-carte { width: 100%; height: 128px; }
.vignette.v-mini { width: 44px; height: 44px; }
.vignette.v-grande { width: 100%; height: 260px; }
.vignette.v-planche { width: 100%; height: 100%; border: 0; border-radius: 0; }
/* Le vide qui se nomme : sous quel nom le fichier arrivera, et ce qui manque
 * pour qu'il arrive. Il se lit comme du texte — aligné à gauche, en haut — et
 * le pointillé dit la seule chose qu'une bordure a le droit de dire ici :
 * quelque chose se pose là. Un nom trop long se coupe par les points de
 * suspension, jamais par le bord ; le nom entier reste dans l'infobulle. */
.vignette.vide.attente { display: grid; align-content: center; justify-content: stretch; justify-items: start; gap: 3px; padding: 8px 10px;
  text-align: left; background: var(--surface-4); border: 1px dashed var(--trait-clair); }
.va-f { font-size: 12px; line-height: 1.4; color: var(--clair); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.va-f.sans { color: var(--clair-terne); }
.va-q { font-size: 11px; line-height: 1.4; color: var(--clair-terne); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* Les puces de filtre (`vtf`) : blanches à filet ; l'active prend le bleu pâle
 * et l'encre bleue — du noir sur l'accent plein tombait à 3,28:1. */
.vt-f { display: grid; gap: 8px; }
.vtf-g { display: flex; flex-wrap: wrap; gap: 6px; }
.vtf { min-height: 44px; padding: 0 12px; border-radius: 6px; cursor: pointer; background: var(--surface-1);
  border: 1px solid var(--trait); font: 500 13px var(--affichage); color: var(--clair); }
.vtf:hover { border-color: var(--trait-clair); }
.vtf.ici { background: var(--studio-bleu-pale); border-color: var(--studio-bleu); color: var(--studio-bleu); font-weight: 600; }

/* Les onglets d'une fiche (`UI.onglets`) : texte, filet bleu sous l'actif. */
.onglets { display: flex; gap: 4px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.onglet { min-height: 44px; padding: 8px 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; font: 550 13px var(--affichage); color: var(--clair-terne); white-space: nowrap; }
.onglet:hover { color: var(--clair); }
.onglet[aria-current="true"] { color: var(--clair); border-bottom-color: var(--studio-bleu); }
.onglet .etat { margin-left: 4px; font-weight: 400; font-size: 12px; color: var(--clair-terne); }
.onglet .etat.manque { color: var(--bloquant); }

/* Les puces : blanches à filet ; l'active prend le bleu pâle et l'encre bleue
 * (du noir sur l'accent plein tombait à 2,86:1). Un bouton-puce garde 44 px. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px;
  background: var(--surface-1); border: 1px solid var(--trait); font: 500 12px var(--affichage); color: var(--clair); }
button.chip { min-height: 44px; padding: 0 12px; font-size: 13px; cursor: pointer; }
button.chip:hover { border-color: var(--trait-clair); }
.chip[aria-pressed="true"] { background: var(--studio-bleu-pale); border-color: var(--studio-bleu); color: var(--studio-bleu); }
.chip .n { color: var(--clair-terne); }

/* Le document compilé — fin de mois, brief de production, pages compilées de la
 * présentation : un seul moteur de mise en page, sinon deux documents de la
 * même maison ne se ressemblent plus au bout de trois semaines. Il se lit à la
 * mesure du papier. Il était en sérif, titres de bloc en capitales, et pâlissait
 * ses mentions par l'opacité ; il passe à l'Asap, en casse de phrase, et pâlit
 * par l'encre (sous .6 d'opacité, le texte tombait sous 4,5:1). */
.co { display: grid; gap: 12px; }
.co-doc { display: grid; gap: 16px; max-width: 72ch; padding: 24px 28px; background: var(--surface-1); color: var(--clair);
  border: 1px solid var(--trait); border-radius: 10px; }
.cod-tete { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); }
.cod-tete h3 { font: 600 24px/1.2 var(--affichage); letter-spacing: -.03em; color: var(--studio-encre); }
.codt-s { margin-top: 4px; font-size: 12px; color: var(--clair-terne); }
.cod-logo { flex: 0 0 56px; height: 56px; display: grid; place-items: center; overflow: hidden; }
.cod-logo img { width: 100%; height: 100%; object-fit: contain; }
.co-blocs { display: grid; gap: 16px; }
.co-b { display: grid; gap: 4px; }
.co-b.fort { padding-left: 12px; border-left: 3px solid var(--studio-bleu); }
.cob-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font: 550 13px var(--affichage); color: var(--clair); }
.cob-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.cob-c { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 65ch; }
.co-b.fort .cob-c { font: 500 17px/1.45 var(--affichage); color: var(--studio-encre); }
.co-b.vide .cob-t, .co-b.vide .cob-c { color: var(--clair-terne); }
.cob-v { font-size: 13px; color: var(--clair-terne); }
.cob-v.bon { color: var(--clair); }
.cob-cit { font-size: 11px; color: var(--clair-terne); }
.cob-p { list-style: none; display: grid; gap: 3px; }
.cob-p li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; max-width: 65ch; }
.cob-p li::before { content: "—"; position: absolute; left: 0; color: var(--clair-terne); }
.cob-l { display: grid; gap: 2px; }
.cobl { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.5; }
.cobl-q { color: var(--clair-terne); }
.cobl-v.vide { color: var(--clair-terne); }
.cob-a { display: grid; gap: 8px; }
.coba { padding-left: 10px; border-left: 3px solid var(--trait-clair); }
.coba-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font: 550 14px var(--affichage); }
.coba-c { padding: 0 5px; border: 1px solid var(--trait); border-radius: 4px; font: 500 11px var(--affichage); color: var(--clair-terne); }
.coba-l, .coba-d { font-size: 12px; color: var(--clair-terne); }
.coba-q { font-size: 13px; line-height: 1.5; color: var(--clair); }
.co-elts { display: flex; flex-wrap: wrap; gap: 8px; }
.co-e { width: 8rem; }
.co-e .vignette { height: 5rem; border: 0; background: var(--surface-3); }
.co-e span { display: block; margin-top: 3px; font-size: 11px; color: var(--clair-terne); }
.co-gamme { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 8px; }
.co-g .vignette { height: 5.5rem; border: 0; background: var(--surface-3); }
.cog-n { display: block; margin-top: 3px; font-size: 13px; }
.cog-q, .cog-m { display: block; font-size: 11px; color: var(--clair-terne); }
.co-doc .rt-mur { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
/* Les mesures : le chiffre grand, le libellé petit, la conséquence dessous ;
 * l'état dans le filet, jamais dans l'encre du chiffre. Une mesure sans
 * assise n'a rien à dire de bon ni de mauvais : elle pâlit. */
.cob-me { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px 24px; margin-top: 4px; }
.cobm { --ton: transparent; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline;
  padding-left: 10px; border-left: 3px solid var(--ton); }
.cobm.alerte { --ton: var(--bloquant); }
.cobm.vert { --ton: var(--succes); }
.cobm-v { grid-row: 1 / 3; font: 550 28px/1 var(--affichage); letter-spacing: -.03em; color: var(--clair); font-variant-numeric: tabular-nums; }
.cobm.creux .cobm-v, .cobm.creux .cobm-n { color: var(--clair-terne); }
.cobm-n { font-size: 13px; }
.cobm-e { margin-left: 6px; font-size: 11px; color: var(--clair-terne); }
.cobm-e.mieux::before { content: "▲ "; color: var(--succes); }
.cobm-e.moins::before { content: "▼ "; color: var(--bloquant); }
.cobm-q { grid-column: 2; font-size: 12px; line-height: 1.4; color: var(--clair-terne); }
.cob-eq { display: grid; gap: 8px; margin-top: 4px; }
.cobe { display: grid; gap: 2px; }
.cobe-n { font: 550 14px var(--affichage); }
.cobe-c { font-size: 12px; color: var(--clair-terne); }
.cobe-m { font-size: 12px; color: var(--clair); }
.cobe-m::before { content: "● "; color: var(--bloquant); }
@media (max-width: 700px) {
  .co-doc { padding: 18px 16px; }
  .cob-me { grid-template-columns: minmax(0, 1fr); }
  .cobl { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media print {
  .co-doc { max-width: none; padding: 0; border: 0; background: #fff; color: #111; }
  .co-b { break-inside: avoid; }
}

/* Le jeton d'un poste : une étiquette à filet, la couleur du poste dans la
 * pastille. */
.jeton { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 1px solid var(--trait); border-radius: 4px;
  font: 500 11px var(--affichage); color: var(--clair); background: var(--surface-1); white-space: nowrap; }
.jeton::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--poste, var(--clair-terne)); }
/* Une zone de texte se vise au doigt, même sur deux lignes. */
textarea { min-height: 44px; }
/* Le texte d'un retour : c'est un humain qui l'a écrit — l'aplat d'intention. */
.fb-texte { padding: 12px 14px; border-radius: 5px; background: var(--studio-intention); font: 500 15px/1.5 var(--affichage);
  color: var(--studio-encre); overflow-wrap: anywhere; max-width: 70ch; }

/* Le sous-bloc d'une fiche ou d'un panneau : un titre 12 px, puis son contenu. */
.sousbloc { margin-top: 16px; }
.sousbloc h3 { font: 700 12px var(--affichage); color: var(--clair); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
ul.puces { list-style: none; padding: 0; margin: 0; }
ul.puces li { position: relative; padding: 3px 0 3px 14px; font-size: 13px; line-height: 1.5; color: var(--clair); }
ul.puces li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--studio-bleu); }

/* La ligne de liste (`UI.fileItem`) : vignette, nom, méta, étiquette. */
.file-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.file-item:last-child { border-bottom: 0; }
.fi-corps { min-width: 0; flex: 1; }
.fi-nom { font: 550 13px/1.4 var(--affichage); color: var(--clair); }
.file-item:hover .fi-nom { color: var(--studio-bleu); }
.file-item.parti .fi-nom { color: var(--clair-terne); }
.fi-meta { font-size: 12px; line-height: 1.45; color: var(--clair-terne); }
.fi-eti { flex: 0 0 auto; }

/* La liste de critères d'un verdict : le signe se colore, le texte reste lisible. */
.criteres-l { display: grid; gap: 2px; }
.critere-l { display: grid; grid-template-columns: 1.4rem 1fr; gap: 8px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid var(--trait); font-size: 13px; line-height: 1.5; color: var(--clair); }
button.critere-l { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font: inherit; min-height: 44px; }
.critere-l .marque { color: var(--clair-terne); }
.critere-l.tenu .marque { color: var(--succes); }
.critere-l.rate .marque { color: var(--bloquant); }

/* Les verdicts (la revue, la fiche, le panneau d'examen du Bureau). */
.rc-verdicts { display: grid; gap: 6px; }
.rc-v { display: grid; grid-template-columns: 1.4rem auto 1fr; gap: 10px; align-items: baseline; width: 100%; min-height: 44px;
  padding: 10px 12px; text-align: left; cursor: pointer; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px;
  font: inherit; color: var(--clair); }
.rc-v:hover { border-color: var(--trait-clair); background: var(--surface-4); }
.rc-v .v-signe { font-size: 15px; }
.rc-v .v-signe { color: var(--clair-terne); }
/* Le signe porte la couleur du verdict, et elle vient des jetons : la couleur
 * écrite dans la maison (#B07714, #C7501F) tombait à 3,2:1 sur le blanc. */
.rc-v.approuve .v-signe { color: var(--succes); }
.rc-v.reserve .v-signe, .rc-v.retour .v-signe { color: var(--arbitrage); }
.rc-v.hors .v-signe { color: var(--bloquant); }
.rc-v .v-nom { font: 550 14px var(--affichage); }
.rc-v .v-cout { font-size: 12px; line-height: 1.45; color: var(--clair-terne); text-align: right; }
.rc-v .v-cout.alerte { color: var(--bloquant); }
.rc-v.pasamoi { border-style: dashed; }

/* La ligne d'un projet dans sa marque ou sa campagne. Elle s'appelait `.dlp`,
 * comme les carrés d'avancement du navigateur : les deux règles se
 * marchaient dessus (10 px de large d'un côté, 100 % de l'autre). Un flux qui
 * passe à la ligne : une grille fixe coinçait le nom à zéro quand le rail
 * réduisait la place. */
.mpl-liste { display: grid; border-top: 1px solid var(--trait); }
.mpl { --ton: transparent; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; width: 100%;
  min-height: 48px; padding: 12px 14px 12px 11px; border-left: 3px solid var(--ton); border-bottom: 1px solid var(--trait);
  color: var(--clair); text-decoration: none; }
.mpl.f-alerte { --ton: var(--bloquant); }
.mpl:hover { background: var(--surface-4); }
.mpl:hover .mpl-n { color: var(--studio-bleu); }
.mpl-r { flex: 0 0 auto; font-size: 11px; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.mpl-n { flex: 1 1 14rem; min-width: 0; font: 550 14px/1.4 var(--affichage); overflow-wrap: anywhere; }
.mpl-t, .mpl-q { flex: 0 0 auto; font-size: 12px; color: var(--clair-terne); }
.mpl-signe { color: var(--ton); }
.mpl.clos .mpl-n { font-weight: 500; color: var(--clair-doux); }
.mpl.clos .mpl-signe { color: var(--clair-terne); }

/* Le graphe des dépendances : une boîte pâle sous le dessin. */
.graphe-boite { background: var(--surface-4); border: 1px solid var(--trait); border-radius: 8px; padding: 10px; margin-bottom: 12px; overflow-x: auto; }

/* L'état et sa conséquence (`ETAT.ligne`) : le nom court en couleur, puis ce
 * qu'il produit ou empêche, en gris. La pastille seule reste l'exception. */
.etat-l, .bic-etat, .bii-etat, .ati-etat, .dmd-etat { display: block; font-size: 12px; line-height: 1.5;
  color: var(--clair-terne); max-width: 70ch; letter-spacing: 0; }
.etat-l b, .bic-etat b, .bii-etat b, .ati-etat b, .dmd-etat b { font-weight: 550; color: var(--clair); margin-right: 6px; }
.etat-l.vert b, .bic-etat.vert b, .bii-etat.vert b, .ati-etat.vert b, .dmd-etat.vert b { color: var(--succes); }
.etat-l.attente b, .bic-etat.attente b, .bii-etat.attente b, .ati-etat.attente b, .dmd-etat.attente b { color: var(--arbitrage); }
.etat-l.alerte b, .bic-etat.alerte b, .bii-etat.alerte b, .ati-etat.alerte b, .dmd-etat.alerte b { color: var(--bloquant); }
.etat-l.or b, .bic-etat.or b, .bii-etat.or b, .ati-etat.or b, .dmd-etat.or b { color: var(--studio-bleu); }
.bic-etat { padding: 0 12px 2px; }
.dmd-etat { padding: 0 14px 3px; }

/* ═════════════════════ Passe 1 · Décisions ═════════════════════ */

.dc { display: block; min-width: 0; }
/* La zone historique est une grille : sans min-width, une file qui défile à
 * l'horizontale élargit toute la page au lieu de défiler. */
.dc-corps, .dc-corps > *, .studio-table > * { min-width: 0; max-width: 100%; }
.dc .studio-entete { padding-bottom: 24px; }
.dc .studio-entete h1 { font-size: clamp(30px, 3vw, 44px); }

/* À traiter — la table du Bureau, à l'identique. */
.dx .studio-table { grid-template-columns: 230px minmax(0, 1fr) 280px; }
.dx .studio-file { max-height: 720px; }
.dx-i strong { font-size: 14px; line-height: 1.4; }
.dx-i .studio-piece-ref { color: var(--ton, var(--clair-terne)); font-weight: 500; }
.dx-i.active .studio-piece-ref { color: var(--ton, var(--studio-bleu)); }
.dx-age { color: var(--clair-terne); }
.dx-scene { gap: 0; }
.dx-depuis { color: var(--ton); font-weight: 550; }
.dx-titre { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.dx-quoi { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.dx-visuels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.dx-visuel { margin: 0; min-width: 0; }
.dx-visuel .vignette { width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--surface-3);
  border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dx-visuel .vignette img { width: 100%; height: 100%; object-fit: contain; }
.dx-visuel figcaption { margin-top: 6px; font-size: 11px; color: var(--clair-terne); }
.dx-action { margin: 22px 0 16px; padding-top: 18px; border-top: 1px solid var(--trait); }
.dx-action h4 { font-size: 12px; font-weight: 700; color: var(--clair); margin-bottom: 6px; }
.dx-action p { font-size: 14px; line-height: 1.6; max-width: 65ch; }
.dx-contexte h3 { margin-bottom: 12px; }
.dx-pourquoi { line-height: 1.65; color: var(--clair-terne); }
.dx-verbatim { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--trait); }
.dx-verbatim h4 { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
/* Ce qu'un humain a écrit : l'aplat d'intention, en Asap 500. */
.dx-verbatim blockquote { margin: 0; padding: 16px; background: var(--studio-intention); border-radius: 5px;
  font: 500 15px/1.45 var(--affichage); color: var(--studio-encre); overflow-wrap: anywhere;
  max-height: 260px; overflow-y: auto; }
.dx-verbatim small { display: block; margin-top: 8px; font-size: 11px; color: var(--clair-terne); }

/* Retours attendus — les débiteurs en file, leurs dettes en lignes. */
.du .studio-table { grid-template-columns: 230px minmax(0, 1fr) 260px; }
.du .studio-file { max-height: 720px; }
.du-debiteur strong { font-size: 14px; }
.du-debiteur small { color: var(--ton); font-weight: 550; }
.du-lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.du-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 16px; align-items: center;
  min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.dul-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dul-cat { font-size: 11px; color: var(--clair-terne); letter-spacing: .02em; }
.dul-texte strong { font-size: 14px; font-weight: 550; color: var(--clair); line-height: 1.4; }
.dul-meta { font-size: 12px; color: var(--clair-terne); overflow-wrap: anywhere; }
.dul-age { display: flex; flex-direction: column; gap: 5px; }
.dul-j { font-size: 12px; font-weight: 550; color: var(--ton); }
.f-calme .dul-j { color: var(--clair-terne); }
/* L'âge est l'axe : un filet dont la longueur est l'âge, sur l'échelle commune. */
.dul-barre { display: block; height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.dul-barre i { display: block; height: 100%; background: var(--ton); border-radius: 2px; }
.du-qui { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.du-qui h3 { margin: 0; }
.du-qui small { font-size: 12px; color: var(--clair-terne); }
.du-contexte dl { margin-top: 16px; }
.du-revenues { padding: 20px 24px; border-top: 1px solid var(--trait); }
.du-revenues h3 { display: flex; align-items: center; gap: 10px; font: 550 17px var(--affichage); margin-bottom: 10px; }
.du-rev { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--trait); font-size: 13px; }
.du-rev-j { color: var(--succes); white-space: nowrap; }
.du-revenues-rien { padding: 20px 24px; font-size: 13px; color: var(--clair-terne); }

@media (max-width: 1200px) {
  .dx .studio-table, .du .studio-table { grid-template-columns: 190px minmax(0, 1fr); }
  .dx-contexte, .du-contexte { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .du-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .dul-age { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .dx .studio-table, .du .studio-table { display: flex; flex-direction: column; }
  .dx .studio-file, .du .studio-file { display: flex; overflow-x: auto; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--trait); gap: 8px; align-items: flex-start; }
  .dx-i, .du-debiteur { min-width: 190px; width: 190px; margin: 0; flex-shrink: 0; }
  .dx-visuels { grid-template-columns: 1fr; }
  .dx-contexte, .du-contexte { border-left: 0; border-top: 1px solid var(--trait); }
  .du-scene { padding: 16px; }
}

/* ═════════════════════ Passe 2 · Dossier : en-tête, navigateur, rail ═════════════════════ */

.pj { gap: 28px; }
.pj-corps { min-width: 0; }
.pj-entete { padding: 0 0 20px; align-items: flex-start; }
.pj-id { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.pj-id .pastille, .pj-id > :first-child { flex-shrink: 0; margin-top: 2px; }
.pj-id-t { min-width: 0; }
.pj-id-t .studio-date { margin-bottom: 8px; }
.pj-entete h1 { font: 600 clamp(28px, 2.8vw, 42px)/1.08 var(--affichage); letter-spacing: -.045em;
  color: var(--studio-encre); text-wrap: balance; overflow-wrap: anywhere; }
.pj-entete .studio-intro { margin-top: 8px; }

/* La ligne d'état : le signe et le compte portent la couleur, la phrase non. */
.pj-etat { margin-top: 14px; max-width: 75ch; font-size: 13px; line-height: 1.6; color: var(--clair-terne); }
.pj-etat .pj-signe { color: var(--ton); margin-right: 6px; }
.pj-etat b { color: var(--ton); font-weight: 600; }
.pj-etat.f-vert { --ton: var(--succes); }
.pj-etat.f-calme b, .pj-etat.f-calme .pj-signe { color: var(--clair); }

/* La méta : une section blanche, des définitions. */
.pj-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0;
  margin: 0; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.pj-m { padding: 14px 18px; border-right: 1px solid var(--trait); min-width: 0; }
.pj-m:last-child { border-right: 0; }
.pj-m dt { font-size: 11px; color: var(--clair-terne); margin-bottom: 4px; }
.pj-m dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--clair); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pj-m dd.vide { color: var(--clair-terne); }

/* Le même dossier chez People : une ligne de contexte, pas un encadré. */
.pj-corps .pe-people { margin: 12px 0 0; padding: 10px 14px; background: none; border: 0;
  border-left: 3px solid var(--trait-clair); display: grid; gap: 2px; }
.pj-corps .pe-people.multiple { border-left-color: var(--arbitrage); }
.pj-corps .pep-t { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--clair-terne); }
.pj-corps .pep-r { font-size: 13px; color: var(--clair); }
.pj-corps .pep-n { font-size: 12px; line-height: 1.55; color: var(--clair-terne); }
.pj-corps .pe-people.multiple .pep-n { color: var(--clair-terne); }

/* Le navigateur : le sélecteur de mode, qui porte son avancement. */
.pj-nav { margin-top: 24px; }
.pj-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px;
  background: var(--surface-3); padding: 4px; border-radius: 8px; }
.pj-phase { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 44px; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 13px var(--affichage); color: var(--clair-terne); }
.pj-phase:hover { background: var(--surface-4); }
.pj-phase.active { background: var(--surface-1); color: var(--clair); box-shadow: var(--elev-1); }
.pjp-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pjp-n { font-weight: 550; font-size: 14px; color: var(--clair); }
.pj-phase .studio-compte { background: var(--surface-1); }
.pj-phase.active .studio-compte { background: var(--surface-3); }
.pjp-q { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjp-b { display: block; height: 3px; background: var(--trait); border-radius: 2px; overflow: hidden; }
.pjp-b i { display: block; height: 100%; background: var(--studio-bleu); }
.pj-phase.fait .pjp-b i { background: var(--succes); }

.pj-etapes { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; border-bottom: 1px solid var(--trait); }
.pj-etape { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 6px 0 10px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  text-align: left; font: 13px var(--affichage); color: var(--clair-terne); }
.pj-etape:hover { color: var(--clair); }
.pj-etape.active { border-bottom-color: var(--studio-bleu); color: var(--clair); }
.pje-n { font-weight: 550; display: flex; align-items: center; gap: 6px; }
.pje-s { font-size: 11px; }
.pj-etape.plein .pje-s { color: var(--succes); }
.pj-etape.partiel .pje-s { color: var(--arbitrage); }
.pj-etape.vide .pje-s { color: var(--clair-terne); }
.pje-e { font-size: 11px; color: var(--clair-terne); }

/* Les lignes d'état du navigateur : filet, texte à l'encre, geste à droite. */
.pj-ligne { --ton: var(--arbitrage); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding: 10px 14px; background: var(--surface-1); border: 1px solid var(--trait);
  border-left: 3px solid var(--ton); border-radius: 6px; }
.pj-ligne.f-vert { --ton: var(--succes); }
.pj-ligne.f-alerte { --ton: var(--bloquant); }
.pjl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--clair-terne); line-height: 1.5; }
.pjl-t b { font: 550 13px var(--affichage); color: var(--clair); }
.pj-ligne > button { flex-shrink: 0; }
.pj-section { margin-top: 24px; }

/* Le rail du dossier. */
.pj-rail .psa-q { margin: 0; font-size: 13px; line-height: 1.6; color: var(--clair-terne); letter-spacing: 0; }
.pj-rail .psa-q + .psa-q { margin-top: 6px; }
.pj-rail .psa-reste { font-size: 12px; color: var(--clair-terne); letter-spacing: 0; }
.pj-rail .file-item { border-bottom-color: var(--trait); }
.pj-rail .fi-nom { font-size: 13px; }
.pj-rail .fi-meta { font-size: 12px; color: var(--clair-terne); }
.pj-rail .rlv-eti { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--clair); margin-bottom: 4px; }
.pj-rail .rlv-r { font-size: 13px; color: var(--clair); }
/* La preuve est ce qu'un humain a écrit : l'aplat d'intention, en Asap. */
.pj-rail .rlv-p { font: 500 13px/1.55 var(--affichage); font-style: normal; color: var(--studio-encre);
  background: var(--studio-intention); padding: 10px 12px; border-radius: 5px; max-width: none; }
.pj-rail .res-l { border-top-color: var(--trait); }
.pj-rail .res-l b { font: 550 13px var(--affichage); }
.pj-rail .res-s { font-size: 12px; color: var(--clair-terne); letter-spacing: 0; }
.pj-rail .panneau-lat > div > .studio-lien:first-child, .pj-rail .panneau-lat .bouton.creux { margin-left: -8px; }

/* Le rail de navigation : le dossier ouvert, sans doublon de l'écran. */
.rail .bloc-projets .rail-titre { display: flex; justify-content: space-between; align-items: baseline; }
.rail .rd-changer { font: 12px var(--affichage); letter-spacing: 0; min-height: 32px; cursor: pointer; }
.rail .rd { border-radius: 7px; overflow: hidden; }
.rail .rd-nom { font: 550 13px/1.35 var(--affichage); letter-spacing: 0; color: var(--studio-rail-texte); }
.rail .rd-ref { font-size: 11px; letter-spacing: 0; }
.rail .rde { font-size: 11px; letter-spacing: 0; padding: 0; border: 0; background: none; color: var(--studio-rail-secondaire); }
.rail .rde.alerte::before { content: "● "; color: #f19aa6; }
.rail .rde.attente::before { content: "◐ "; color: #e8c07a; }
.rail .rde.vert::before { content: "✓ "; color: #8fd3b4; }
.rail .rd-ech, .rail .rd-ech.alerte, .rail .rd-ech.attente { font-size: 11px; letter-spacing: 0; color: var(--studio-rail-secondaire); }

@media (max-width: 1200px) {
  .pj-m { border-bottom: 1px solid var(--trait); }
}
@media (max-width: 800px) {
  .pj-phases { grid-template-columns: 1fr; }
  .pj-ligne { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .pj-id { gap: 12px; }
  .pj-id > :first-child { width: 36px; height: 36px; }
  .pj-meta { grid-template-columns: 1fr 1fr; }
}

/* ═════════════════════ Passe 3 · Dossier : les sections Cadrer ═════════════════════
 *
 * À partir d'ici, une classe encore vivante n'est plus surchargée : son
 * ancienne définition est retirée et elle est écrite ici, une fois. */

/* Le titre et le chapô d'une section : titre de section Studio, chapô gris. */
.pj-section h3.id-t, .pj-section .se-t { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em;
  color: var(--clair); max-width: 40ch; text-wrap: balance; }
.pj-section .id-s { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }

/* ——— Identité : un document à signer ———
 * Une grille uniforme ne distingue pas ce qui est reçu de ce qui est supposé.
 * C'est pourtant la seule chose qui compte : l'un s'oppose au client, l'autre
 * fait travailler l'équipe et ne prouve rien. Deux colonnes dans une section. */
.id { display: grid; gap: 16px; }
.id-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 4px;
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.id-col { padding: 18px 22px 10px; min-width: 0; }
.id-col + .id-col { border-left: 1px solid var(--trait); }
.id-col.infere { background: var(--surface-4); }
.idc-t { display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font: 700 12px var(--affichage); color: var(--clair); }
.id-col.infere .idc-t { color: var(--arbitrage); }
.id-l { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.id-l:last-child { border-bottom: 0; }
button.id-l, button.id-v, .idl-h { width: 100%; text-align: left; background: none; border: 0;
  cursor: pointer; font: inherit; color: inherit; border-radius: 5px; }
button.id-l, button.id-v { padding: 12px 8px; margin: 0 -8px; width: calc(100% + 16px); border-bottom: 1px solid var(--trait); border-radius: 0; }
button.id-l:hover, button.id-v:hover, .idl-h:hover { background: var(--surface-4); }
.idl-h { display: grid; gap: 2px; padding: 0; position: relative; min-height: 0; }
.idl-h::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  min-height: 44px; height: 100%; }
.idl-n { font-size: 11px; color: var(--clair-terne); }
.idl-v { font-size: 14px; line-height: 1.55; color: var(--clair); }
.idl-p { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--clair-terne); font-style: italic; max-width: 65ch; }
.idl-g { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 2px 0 -6px -8px; }
.idl-g .idl-faux { color: var(--clair-terne); }

.id-vides { background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; padding: 18px 22px 8px; }
.id-v { display: grid; gap: 2px; }
.id-vides button.id-v:last-child { border-bottom: 0; }
.idv-n { font: 550 14px var(--affichage); color: var(--clair); display: flex; align-items: center; gap: 8px; }
.idv-s { color: var(--arbitrage); font-size: 12px; }
.idv-x { font-size: 12px; line-height: 1.55; color: var(--clair-terne); padding-left: 20px; max-width: 65ch; }

/* La bande de contreseing : une ligne d'état, qui nomme qui doit signer. */
.id-sign { --ton: var(--arbitrage); display: grid; gap: 8px; padding: 16px 18px;
  background: var(--surface-1); border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.id-sign.ok { --ton: var(--succes); }
.ids-t { font: 700 12px var(--affichage); color: var(--ton); }
.ids-c p { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 65ch; }
.ids-g { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

@media (max-width: 900px) {
  .id-g { grid-template-columns: minmax(0, 1fr); }
  .id-col + .id-col { border-left: 0; border-top: 1px solid var(--trait); }
}
/* (passe 2, rattrapé en passe 3) Le champ manquant : le signe se colore, pas le texte. */
.pj-rail .psa-m { display: flex; gap: 8px; font-size: 13px; color: var(--clair); }
.pj-rail .psa-s { color: var(--arbitrage); flex-shrink: 0; }

/* ——— Brief : ce dossier est-il fondé ? ——— */
.bf { display: grid; gap: 20px; }
.bf-vide { display: grid; gap: 6px; }
.bf-vide p { font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 70ch; }
.bf-vide a { color: var(--studio-bleu); font-weight: 550; text-decoration: none; }
.bf-vide a:hover { text-decoration: underline; }
.bf-l { display: grid; gap: 10px; }
.bfl-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 550 17px var(--affichage); color: var(--clair); }
.bfl-q { font: 400 13px var(--affichage); color: var(--clair-terne); }
/* Une carte de brief : section blanche à filet d'état ; son coût reste gris. */
.bfc { --ton: var(--bloquant); display: grid; gap: 6px; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 8px; }
.bfc.ok { --ton: var(--succes); }
.bfc.partiel { --ton: var(--arbitrage); }
.bfc-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bfc-n { font: 550 16px var(--affichage); color: var(--clair); }
.bfc-f { font-size: 11px; color: var(--clair-terne); background: var(--surface-3); border-radius: 5px; padding: 3px 7px; }
/* Un brief est le socle d'une demande et la boussole d'un suivi : chaque carte
 * dit les deux, sans quoi c'est un formulaire de plus. Le tableau des briefs
 * et le brief de plateforme de la marque partagent ces deux lignes. */
.bfc-r { display: grid; gap: 4px; }
.bfcr { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px; align-items: baseline;
  font-size: 13px; line-height: 1.55; color: var(--clair); max-width: 70ch; }
.bfcr b { font-size: 11px; font-weight: 400; color: var(--clair-terne); }
.bfcr b:first-letter { text-transform: uppercase; }
@media (max-width: 700px) { .bfcr { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.bfc-e { margin-left: auto; font: 550 12px var(--affichage); color: var(--ton); }
.bfc-q { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 70ch; }
.bfc-c { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
.bfc-c.ok { color: var(--succes); }
.bfc-g { display: flex; gap: 0 8px; flex-wrap: wrap; margin: 0 0 -8px -8px; }
@media (max-width: 560px) { .bfc-e { margin-left: 0; } }

/* ——— Le rendu générique d'une section (brief-back, et toute section sans vue propre) ——— */
.se-propre { display: grid; gap: 14px; }
.section-titre.se-titre { font-size: 21px; letter-spacing: -.02em; margin-bottom: 0; }
.se-propre > .se-champs { margin-top: 0; }
.se-propre .form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— Plateforme de marque (le socle) ———
 * Ce qui définit une marque vaut plusieurs années. La campagne le LIT ; ce qui
 * manque au vault manque à toutes ses campagnes, et le geste renvoie là-bas. */
.so, .sv { display: grid; gap: 20px; }
.sv-h { display: grid; gap: 8px; justify-items: start; }
.sv-t { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); max-width: 40ch; text-wrap: balance; }
.sv-s { font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.sv-h .b.or { margin-top: 4px; text-decoration: none; }
.sv-l { display: grid; gap: 16px; }
/* Une marque : une section blanche. */
.svm { display: grid; gap: 18px; padding: 20px 22px; background: var(--surface-1);
  border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.svm-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.svm-l { display: grid; place-items: center; width: 64px; height: 44px; border-radius: 6px;
  background: var(--surface-4); overflow: hidden; flex-shrink: 0; }
.svm-l img { max-width: 100%; max-height: 100%; object-fit: contain; }
.svm-l.vide { font-size: 11px; color: var(--clair-terne); }
.svm-i { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.svm-n { font: 550 17px var(--affichage); color: var(--clair); }
.svm-q { font-size: 12px; color: var(--clair-terne); }
.svm-v { font-size: 13px; color: var(--clair-terne); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.svm-v:hover { color: var(--studio-bleu); }
.svmg-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 700 12px var(--affichage); color: var(--clair); }
.svmg-t span { font-weight: 400; color: var(--clair-terne); }

/* Deux champs servent à refuser, ils passent devant et en grand ; les sept
 * autres se consultent. La section annonce neuf champs, elle en montre neuf.
 * Le champ est un lien vers la bibliothèque : il s'écrit là où il appartient. */
.svm-f { display: grid; gap: 10px; }
.svf { --ton: var(--studio-bleu); display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--ton);
  border-radius: 0 6px 6px 0; background: var(--surface-4); color: inherit; text-decoration: none; min-width: 0; }
.svf:hover { background: var(--surface-3); }
.svf.vide { --ton: var(--trait-clair); }
/* Seuls les deux champs qui servent à refuser crient quand ils manquent :
 * dix-sept filets rouges sur ce qui se consulte, c'est du bruit. */
.svf.grand.vide { --ton: var(--bloquant); }
.svf.herite { --ton: var(--trait-clair); }
.svf-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--clair-terne); }
.svf-h { font-style: italic; }
.svf-v { font-size: 13px; line-height: 1.55; color: var(--clair); overflow-wrap: anywhere; }
.svf.grand .svf-v { font: 500 17px/1.45 var(--affichage); color: var(--studio-encre); }
.svf.vide .svf-v, .svf.grand.vide .svf-v { font: 400 13px/1.55 var(--affichage); color: var(--clair-terne); }
.svm-r { display: grid; gap: 10px; }
.svm-rc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }

/* La gamme : un DA doit avoir les packs sous les yeux avant de dessiner ; ceux
 * que la campagne retient passent devant, et se distinguent par un filet — pas
 * par l'opacité, qui fait tomber un libellé sous 4,5:1. */
.svm-p { display: grid; gap: 10px; }
.svp-l { display: flex; flex-wrap: wrap; gap: 8px; }
.svp { display: grid; gap: 4px; justify-items: center; width: 84px; padding: 6px; border-radius: 6px;
  background: var(--surface-1); border: 1px solid var(--trait); }
.svp.ici { border-color: var(--succes); box-shadow: inset 0 -2px 0 var(--succes); }
.svp img { width: 100%; height: 54px; object-fit: contain; }
.svp-v { display: grid; place-items: center; width: 100%; height: 54px; color: var(--clair-terne); }
.svp-n { font-size: 11px; line-height: 1.3; color: var(--clair-terne); text-align: center; overflow-wrap: anywhere; }
.svp.ici .svp-n { color: var(--clair); }
.svp-x { font-size: 12px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }

/* Les éléments de marque, par rôle. */
.svm-e { display: grid; gap: 10px; }
.svm-ec { display: grid; gap: 10px; }
.sve { display: grid; gap: 4px; }
.sve-r { font-size: 11px; color: var(--clair-terne); }
.sve-l { display: flex; flex-wrap: wrap; gap: 6px; }
.sve-v { display: grid; place-items: center; width: 70px; height: 50px; padding: 4px; border-radius: 5px; background: var(--surface-4); }
.sve-v img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sve-x { font-size: 11px; color: var(--clair-terne); }

/* Les gammes qui ont leur propre socle. */
.svm-g { display: grid; gap: 8px; }
.svm-gc { display: flex; flex-wrap: wrap; gap: 6px; }
.svg { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 5px;
  background: var(--surface-4); border: 1px solid var(--trait); font-size: 12px; color: var(--clair-terne); }
.svg.ici { color: var(--clair); box-shadow: inset 3px 0 0 var(--studio-bleu); }
.svg i { font-style: normal; font-size: 11px; color: var(--clair-terne); }

/* Le socle d'un dossier sans marque au vault : les deux cartes qui servent à
 * refuser montent, le reste se consulte. */
.sh { display: grid; gap: 20px; }
.sh-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sh-f { --ton: var(--studio-bleu); display: grid; gap: 8px; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 8px; }
.sh-f.vide { --ton: var(--bloquant); }
/* Un bouton remet la couleur et la fonte à celles du navigateur : tout
 * enrobage de contenu hérite donc explicitement. */
.shf-h, .sh-c { display: grid; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; color: inherit; font: inherit; }
.shf-t { display: grid; gap: 2px; font: 700 12px var(--affichage); color: var(--clair); }
.shf-r { font: 400 12px var(--affichage); color: var(--clair-terne); }
.shf-v { font: 500 17px/1.45 var(--affichage); color: var(--studio-encre); }
.shf-h:hover .shf-v { color: var(--studio-bleu); }
.shf-x { display: grid; gap: 6px; justify-items: start; font-size: 13px; line-height: 1.55; color: var(--clair-terne); }
.shf-a { font: 500 13px var(--affichage); color: var(--studio-bleu); }
.sh-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 550 17px var(--affichage); color: var(--clair); }
.sh-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.sh-reste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sh-c:hover .carte-n { border-color: var(--trait-clair); }

/* Le moodboard : chaque image dit ce qu'elle fait là. */
.mb { display: grid; gap: 12px; padding: 20px 22px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.mb-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-tete .t { font: 550 17px var(--affichage); color: var(--clair); }
.mb-tete .n { flex: 1; font: 500 12px var(--affichage); color: var(--clair-terne); }
.mb-groupe { display: grid; gap: 8px; }
.mbg-t { display: flex; gap: 8px; align-items: center; font: 700 12px var(--affichage); color: var(--clair); }
.mbg-t span { font-weight: 500; color: var(--clair-terne); }

/* ——— Stratégie : insight → territoire → axes ———
 * Rendus en profondeur. C'est l'emboîtement qui porte l'information : une piste
 * qui ne remonte à rien flotte visiblement, et deux racines dans un même
 * dossier se voient d'un seul regard. */
.rais { display: grid; gap: 20px; }
.rais-arbre { display: grid; gap: 16px; }
.rin { --ton: var(--trait-clair); display: grid; gap: 14px; padding: 20px 22px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; min-width: 0; }
.rin.alerte { --ton: var(--bloquant); }
.rin.attente { --ton: var(--arbitrage); }
.rin.vert { --ton: var(--succes); }
.rin-tete { display: grid; gap: 8px; }
.rin-c { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rin-couche { font: 550 12px var(--affichage); color: var(--clair); background: var(--surface-3); border-radius: 5px; padding: 3px 8px; }
.rin-couche.sans { color: var(--bloquant); background: none; border: 1px dashed var(--bloquant); }
.rin-v { font: 550 12px var(--affichage); color: var(--clair-terne); }
.rin-v.alerte { color: var(--bloquant); }
.rin-v.attente { color: var(--arbitrage); }
.rin-v.vert { color: var(--succes); }
/* L'insight est ce qu'un humain a écrit : l'aplat d'intention, en Asap 500. */
.rin-p { font: 500 19px/1.4 var(--affichage); letter-spacing: -.01em; color: var(--studio-encre);
  background: var(--studio-intention); padding: 14px 16px; border-radius: 6px; overflow-wrap: anywhere; text-wrap: pretty; }
.rin-cmd { font-size: 13px; line-height: 1.55; color: var(--clair); }
.rin-e { font-size: 12px; line-height: 1.55; color: var(--clair-terne); }
.rin-g { display: flex; gap: 4px; flex-wrap: wrap; margin-left: -8px; }
/* Le décalage de couche : la faute la plus chère, dite à l'endroit où elle se
 * décide, avec la seule chose qui la ferme. */
.rin-dec { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--arbitrage); border-radius: 6px; }
.rind-t { font: 550 13px/1.45 var(--affichage); color: var(--clair); }
.rind-q { font-size: 12px; line-height: 1.55; color: var(--clair-terne); }

/* Le chemin — trois passes de l'insight, trois versions de la réduction. */
.chem { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chem-e { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.chem-n { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 10px;
  background: var(--surface-3); font: 550 11px var(--affichage); color: var(--clair); }
.chem-e.vide .chem-n { color: var(--clair-terne); }
.chem-c { display: grid; gap: 2px; min-width: 0; }
.chem-t { font-size: 11px; color: var(--clair-terne); }
.chem-x { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 70ch; }
.chem-e.vide .chem-x { color: var(--clair-terne); }
.chem-m { font-size: 11px; color: var(--clair-terne); }

/* Les territoires, emboîtés dans leur insight. */
.rin-ter { display: grid; gap: 10px; justify-items: start; padding-top: 14px; border-top: 1px solid var(--trait); }
.rint-t { font: 700 12px var(--affichage); color: var(--clair); }
.rin-ter > .b.nu { margin-left: -8px; }
.rte { --ton: var(--trait-clair); display: grid; gap: 6px; width: 100%; padding: 12px 14px; background: var(--surface-4);
  border-left: 3px solid var(--ton); border-radius: 0 6px 6px 0; }
.rte.alerte { --ton: var(--bloquant); }
.rte.attente { --ton: var(--arbitrage); }
.rte.vert { --ton: var(--succes); }
.rte-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rte-n { font: 550 15px var(--affichage); color: var(--clair); }
.rte-ec { font-size: 11px; color: var(--clair); background: var(--surface-1); border: 1px solid var(--trait); border-radius: 5px; padding: 2px 7px; }
.rte-c { margin-left: auto; font-size: 12px; color: var(--clair-terne); }
.rte-q { font-size: 13px; line-height: 1.55; color: var(--clair); }
.rte-e { font-size: 12px; line-height: 1.55; color: var(--clair-terne); }
.rte-preuve { display: grid; gap: 2px; padding: 8px 10px; background: var(--surface-1); border: 1px dashed var(--trait-clair); border-radius: 5px; }
.rte-preuve.ok { border-style: solid; border-color: var(--succes); }
.rtp-t { font: 700 11px var(--affichage); color: var(--clair); }
.rtp-x { font-size: 13px; line-height: 1.5; color: var(--clair); }
.rtp-p { font-size: 12px; color: var(--arbitrage); }
.rte-preuve.ok .rtp-p { color: var(--succes); }
.rte-pi { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rtep { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.rtep-n { color: var(--clair); }
.rtep-r { font-size: 11px; color: var(--clair-terne); }
.rtep.defendue .rtep-r { color: var(--studio-bleu); font-weight: 550; }
.rtep-s { font: 550 11px var(--affichage); color: var(--succes); }
.rte-g { display: flex; gap: 4px; margin-left: -8px; }

/* Les pistes qui ne remontent à rien. */
.rais-orph { display: grid; gap: 8px; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--bloquant); border-radius: 10px; }
.rao-t { font: 550 15px var(--affichage); color: var(--clair); }
.rao-q { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
.rao-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rao-l li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rao-n { font-size: 13px; color: var(--clair); }

/* L'ordre de travail, quand rien n'est encore écrit. */
.rais-vide { display: grid; gap: 14px; }
.rais-ordre { display: grid; gap: 8px; padding: 18px 22px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.ro-t { font: 550 17px var(--affichage); color: var(--clair); }
.ro-q { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
.ro-l { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ro-l li { display: grid; gap: 2px; }
.ro-n { font: 550 14px var(--affichage); color: var(--clair); }
.ro-x { font-size: 12px; color: var(--clair); }
.ro-s { font-size: 12px; color: var(--clair-terne); }

/* L'école, étage par étage. */
.eco { --ton: var(--trait-clair); display: grid; gap: 12px; padding: 20px 22px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.eco.alerte { --ton: var(--bloquant); }
.eco.attente { --ton: var(--arbitrage); }
.eco.vert { --ton: var(--succes); }
.eco-tete { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.eco-t { font: 550 17px var(--affichage); color: var(--clair); }
.eco-e { margin-left: auto; font: 550 12px var(--affichage); color: var(--ton); }
.eco.alerte .eco-e, .eco.attente .eco-e { color: var(--ton); }
.eco-q { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
.eco-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ecoe { --ton: var(--trait); display: grid; gap: 3px; justify-items: start; padding: 12px 14px; background: var(--surface-4);
  border-top: 3px solid var(--ton); border-radius: 0 0 6px 6px; }
.ecoe.posee { --ton: var(--succes); }
.ecoe.manque { --ton: var(--bloquant); }
.ecoe-t { font-size: 11px; color: var(--clair-terne); }
.ecoe-n { font: 550 15px var(--affichage); color: var(--clair); }
.ecoe.vide .ecoe-n { color: var(--clair-terne); font-weight: 400; }
.ecoe-m { font-size: 11px; color: var(--clair-terne); }
.ecoe-p { font-size: 12px; line-height: 1.5; color: var(--clair); }
.ecoe-x, .ecoe-l { font-size: 12px; line-height: 1.5; color: var(--clair-terne); margin: 0; }
.ecoe > .b.nu { margin-left: -8px; }
.eco-tab summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 500 13px var(--affichage); color: var(--studio-bleu); }
.eco-tab { overflow-x: auto; }
.ecot { width: 100%; border-collapse: collapse; font-size: 12px; }
.ecot th, .ecot td { text-align: left; padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--trait); }
.ecot th { font-weight: 550; color: var(--clair-terne); }
.ecot tr.corpus td { color: var(--clair-terne); }
.eco-n { display: block; color: var(--clair); font-style: normal; font-weight: 550; }
.eco-m { display: block; color: var(--clair-terne); }
/* Les fiches d'école, au choix. */
.ecc-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ecc { display: grid; gap: 4px; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.ecc:hover { border-color: var(--trait-clair); }
.ecc.ici { box-shadow: inset 3px 0 0 var(--studio-bleu); border-color: var(--trait-clair); }
.ecc.corpus { border-style: dashed; }
.ecc-t { display: grid; gap: 1px; }
.ecc-n { font: 550 14px var(--affichage); color: var(--clair); }
.ecc-m { font-size: 11px; color: var(--clair-terne); }
.ecc-p { font-size: 13px; line-height: 1.5; color: var(--clair); margin: 0; }
.ecc-pr, .ecc-lim, .ecc-loc { font-size: 12px; line-height: 1.5; margin: 0; color: var(--clair-terne); }
.ecc-e { font-weight: 700; color: var(--clair); }
.ecc-ok { color: var(--bloquant); }
.ecc-ok.ok { color: var(--succes); }

/* L'efficacité : tout est en lecture, et chaque nombre porte sa réserve. C'est
 * la condition pour emprunter un corpus sans refaire l'erreur qu'on reproche
 * aux doctrines. */
.eff { display: grid; gap: 12px; padding: 20px 22px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.eff-t { font: 550 17px var(--affichage); color: var(--clair); }
.eff-q { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
.eff-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.eff-c { display: grid; gap: 3px; justify-items: start; padding: 12px 14px; background: var(--surface-4); border-radius: 6px; }
.effc-t { font-size: 11px; color: var(--clair-terne); }
.effc-n { font: 550 24px/1.2 var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.effc-n.sans { font: 400 14px var(--affichage); color: var(--clair-terne); }
.effc-x { font-size: 13px; line-height: 1.5; color: var(--clair); }
.effc-r { font-size: 11px; line-height: 1.5; color: var(--clair-terne); }
.eff-sharp { display: grid; gap: 8px; }
.effs-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.effs { --ton: var(--trait); display: grid; gap: 1px; padding-left: 10px; border-left: 3px solid var(--ton); }
.effs.ok { --ton: var(--succes); }
.effs.non { --ton: var(--arbitrage); }
.effs-n { font: 550 13px var(--affichage); color: var(--clair); }
.effs-q, .effs-x { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }

/* Les énoncés (le cadre de la stratégie, et partout où un texte se lit à la
 * largeur d'une colonne de lecture) : chaque énoncé est un bouton. */
.st { display: grid; gap: 0; max-width: 75ch; }
.rais-reste { display: grid; gap: 10px; padding: 18px 22px 8px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.rais-reste .section-titre { margin-bottom: 0; }
.rais-reste .st { max-width: none; }
.st-e { display: grid; gap: 4px; }
button.st-e { width: calc(100% + 16px); margin: 0 -8px; padding: 12px 8px; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--trait); border-radius: 0; cursor: pointer; color: inherit; font: inherit; min-height: 44px; }
button.st-e:last-child { border-bottom: 0; }
button.st-e:hover { background: var(--surface-4); }
.ste-n { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--clair-terne); }
.ste-i { color: var(--arbitrage); font-weight: 550; }
.ste-v { font-size: 15px; line-height: 1.6; color: var(--clair); }
.ste-l { display: grid; gap: 6px; padding-left: 18px; margin: 0; }
.ste-l li { font-size: 14px; line-height: 1.55; color: var(--clair); }
.ste-x { font-size: 13px; line-height: 1.55; color: var(--clair-terne); }
.st-e.vide .ste-n::before { content: "○"; color: var(--arbitrage); margin-right: 2px; }
.ste-p { font-size: 12px; line-height: 1.55; color: var(--clair-terne); font-style: italic; }

/* ═════════════════════ Passe 4a · Dossier : l'atelier ═════════════════════ */

.at { display: grid; gap: 16px; }
/* « Idées retenues émanant de juniors » est une ligne de la fiche 03, et cet
 * écran est le seul endroit où elle bouge : un chiffre-clé, en tête. */
.aj { --ton: var(--trait-clair); display: flex; align-items: center; gap: 18px; padding: 16px 20px;
  background: var(--surface-1); border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.aj.ok { --ton: var(--succes); }
.aj.zero { --ton: var(--arbitrage); }
.aj-c { font: 550 36px/1 var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.aj.ok .aj-c { color: var(--succes); }
.aj.zero .aj-c { color: var(--arbitrage); }
.aj-t { display: grid; gap: 3px; }
.aj-n { font: 550 15px var(--affichage); color: var(--clair); }
.aj-x { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
/* Le briefing de l'atelier : une ligne d'état, et le document qui la ferme. */
.at-brief { --ton: var(--succes); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px;
  background: var(--surface-1); border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.at-brief.manque { --ton: var(--arbitrage); }
.atb-c { flex: 1; min-width: 0; display: grid; gap: 2px; }
.atb-t { font: 700 12px var(--affichage); color: var(--clair); }
.atb-q { font-size: 13px; line-height: 1.5; color: var(--clair-terne); }

/* Deux colonnes : les idées, la conversation. Chacune une section blanche. */
.at-corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.at-idees, .at-fil { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface-1);
  border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.at-tete { display: flex; align-items: center; gap: 10px; }
.at-tete .t { font: 550 17px var(--affichage); color: var(--clair); }
.at-tete .n { font: 500 12px var(--affichage); color: var(--clair-terne); background: var(--surface-3); border-radius: 5px; padding: 3px 7px; }
.at-groupe { display: grid; gap: 8px; }
.atg-t { font: 700 12px var(--affichage); color: var(--clair-terne); }
.at-groupe.retenue .atg-t { color: var(--succes); }
/* Une idée : ce qu'un humain a écrit, en Asap 500, avec son auteur. */
.at-i { --ton: var(--trait-clair); display: flex; gap: 12px; padding: 12px 14px; background: var(--surface-4);
  border-left: 3px solid var(--ton); border-radius: 0 6px 6px 0; }
.at-i.retenue { --ton: var(--succes); }
.at-i.ecartee { --ton: var(--trait); }
.ati-v { flex: 0 0 92px; }
.ati-v .vignette { height: 70px; border-radius: 4px; overflow: hidden; }
.ati-c { min-width: 0; flex: 1; display: grid; gap: 6px; }
.ati-t { font: 500 15px/1.45 var(--affichage); color: var(--studio-encre); overflow-wrap: anywhere; }
.at-groupe.ecartee .ati-t { color: var(--clair-terne); }
.ati-m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--clair-terne); }
.ati-q { margin-left: auto; }
.ati-mo { font-size: 12px; line-height: 1.5; color: var(--clair-terne); font-style: italic; }
.ati-g { display: flex; gap: 0 4px; flex-wrap: wrap; margin: 0 0 -8px -8px; }

/* Un fil de conversation. Clos, il garde son texte lisible : c'est son relief
 * qui baisse, pas son encre. */
.at-f { --ton: var(--arbitrage); display: grid; gap: 10px; padding: 12px 14px; background: var(--surface-4);
  border-left: 3px solid var(--ton); border-radius: 0 6px 6px 0; }
.at-f.clos { --ton: var(--trait-clair); }
.atf-tete { display: flex; align-items: center; gap: 8px; }
.atf-s { flex: 1; font: 550 14px/1.4 var(--affichage); color: var(--clair); }
.atf-msgs { display: grid; gap: 10px; }
.atf-m { display: flex; gap: 8px; align-items: flex-start; }
.atfm-t { font-size: 13px; line-height: 1.55; color: var(--clair); overflow-wrap: anywhere; }
.atfm-q { font-size: 11px; color: var(--clair-terne); margin-top: 2px; }
.atf-c { font-size: 13px; line-height: 1.5; color: var(--clair); padding-left: 10px; border-left: 3px solid var(--succes); }
.atf-g { display: flex; gap: 0 4px; flex-wrap: wrap; margin: 0 0 -8px -8px; }

@media (max-width: 900px) { .at-corps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .aj { align-items: flex-start; } .aj-c { font-size: 28px; } }

/* ═════════════════════ Passe 4b · Dossier : la big idea ═════════════════════ */

.bi { display: grid; gap: 16px; }
/* L'idée est la plus grosse chose à l'écran, et elle passe devant ses
 * conditions. C'est ce qu'un humain a écrit : l'aplat d'intention du Bureau. */
.bi-idee { display: grid; gap: 12px; padding: 24px 26px; background: var(--studio-intention); border-radius: 10px; color: var(--studio-encre); }
.bii-nom { font: 550 12px var(--affichage); color: var(--studio-encre); opacity: 1; }
.bii-phrase { font: 500 clamp(22px, 2.2vw, 32px)/1.25 var(--affichage); letter-spacing: -.025em; color: var(--studio-encre);
  overflow-wrap: anywhere; text-wrap: balance; }
.bii-sign { font: 500 15px/1.5 var(--affichage); color: var(--studio-encre); }
.bii-pied { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(25,51,71,.15); }
.bii-a { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--studio-encre); }
.bi-idee .bii-m { font-size: 13px; line-height: 1.5; color: var(--studio-encre); }

/* Les idées de l'atelier : ont-elles servi ? */
.bi-atelier { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.bir-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 550 17px var(--affichage); color: var(--clair); }
.bir-e { margin-left: auto; font: 500 12px var(--affichage); color: var(--clair-terne); }
.bir-e.alerte { color: var(--bloquant); font-weight: 550; }
.bi-idees { display: grid; gap: 8px; }
.bii { --ton: var(--trait-clair); display: grid; gap: 6px; padding: 12px 14px; background: var(--surface-4);
  border-left: 3px solid var(--ton); border-radius: 0 6px 6px 0; }
.bii.retenue { --ton: var(--succes); }
.bii.ecartee { --ton: var(--trait); }
.bii-t { font: 500 14px/1.45 var(--affichage); color: var(--studio-encre); overflow-wrap: anywhere; }
.bii.ecartee .bii-t { color: var(--clair-terne); }
.bii .bii-m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--clair-terne); }
.bii-r { color: var(--succes); font-weight: 550; }
.bii-r.vide { color: var(--clair-terne); }
.bii-mo { font-size: 12px; line-height: 1.5; color: var(--clair-terne); font-style: italic; }
.bii > .studio-lien { justify-self: start; margin-left: -8px; }
.bi-exec { display: grid; gap: 12px; }

/* Le rail de la big idea : la validation, centrale puis locale. */
.val-l { display: grid; gap: 2px; }
.val-l .v-t, .val-locales .v-t { font-size: 11px; color: var(--clair-terne); }
.val-l .v-v { font-size: 13px; color: var(--clair); }
.val-l .v-v.vide { color: var(--clair-terne); }
.val-locales { display: grid; gap: 6px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--trait); }
.val-m { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.val-m .v-etat { margin-left: auto; font: 550 12px var(--affichage); color: var(--arbitrage); font-variant-numeric: tabular-nums; }
.val-m .v-etat.ok { color: var(--succes); }

/* ═════════════════════ Passe 4c · Dossier : les pistes ═════════════════════ */

/* ——— La route retenue ——— */
.rt { display: grid; gap: 16px; }
.rt-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-tete h2 { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.rt-controle { margin-left: auto; font: 550 12px var(--affichage); color: var(--arbitrage); }
/* Le visuel maître, en grand : c'est lui qu'on juge. */
.rt-scene { display: grid; gap: 8px; }
.rts-toile { background: var(--surface-3); border-radius: 8px; overflow: hidden; }
.rts-toile .vignette { height: auto; border-radius: 0; }
.rts-toile .vignette img { height: auto; width: 100%; object-fit: contain; max-height: 46vh; }
.rts-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rts-auteurs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--clair-terne); }
/* L'argumentaire : accroches (ce qu'un humain a écrit), sacrifice, argument. */
.rt-arg { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.rta-accroches { display: flex; gap: 8px; flex-wrap: wrap; }
.rta-a { font: 500 17px/1.4 var(--affichage); color: var(--studio-encre); background: var(--studio-intention);
  padding: 8px 12px; border-radius: 5px; }
.rta-a.trop { background: var(--surface-1); color: var(--clair); box-shadow: inset 3px 0 0 var(--bloquant); border: 1px solid var(--trait); }
.rt-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rtb { --ton: var(--trait-clair); padding: 2px 0 2px 12px; border-left: 3px solid var(--ton); }
.rtb.alerte { --ton: var(--bloquant); }
.rtb.vert { --ton: var(--succes); }
.rtb .t { font: 700 12px var(--affichage); color: var(--clair); margin-bottom: 4px; letter-spacing: 0; }
.rtb .v { font-size: 13px; line-height: 1.55; color: var(--clair); }
.rta-porteurs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rta-porteurs .t { font: 700 12px var(--affichage); color: var(--clair); letter-spacing: 0; margin-right: 4px; }

/* Les blocs de la route : chacun une section blanche. */
.rt-bloc { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.rtbl-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rtbl-tete .t { font: 550 17px var(--affichage); color: var(--clair); letter-spacing: 0; }
.rtbl-tete .n { font: 500 12px var(--affichage); color: var(--clair-terne); background: var(--surface-3); border-radius: 5px; padding: 3px 7px; letter-spacing: 0; }
.rtbl-tete .b, .rtbl-tete .b.nu { margin-left: auto; }

/* Le mur : une image, son nom, sa qualification. Rien d'autre. */
.rt-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rt-c { --ton: transparent; position: relative; display: block; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--trait); border-radius: 6px; aspect-ratio: 4 / 3;
  box-shadow: inset 0 3px 0 var(--ton); font: inherit; color: inherit; text-align: left; }
.rt-c:hover { border-color: var(--trait-clair); box-shadow: inset 0 3px 0 var(--ton), var(--elev-1); }
.rt-c.maitre { --ton: var(--studio-bleu); }
/* Hors de l'écart déclaré de son marché : un jugement à rendre, pas un blocage.
 * Le filet prend le ton de l'arbitrage ; une référence dépassée garde le sien. */
.rt-c.hors-ecart { --ton: var(--arbitrage); }
.rt-c.ecart, .rt-c.perime { --ton: var(--bloquant); }
.rt-c .vignette { height: 100%; border-radius: 0; }
.rt-c .vignette img { height: 100%; object-fit: cover; }
.rtc-code { position: absolute; left: 6px; top: 8px; z-index: 1; font: 550 11px var(--affichage);
  padding: 2px 6px; border-radius: 4px; background: var(--surface-1); color: var(--clair); }
.rtc-r { position: absolute; right: 6px; top: 8px; z-index: 1; min-width: 20px; height: 20px; display: grid; place-items: center;
  font: 550 11px var(--affichage); border-radius: 10px; padding: 0 6px; background: var(--arbitrage); color: var(--surface-1); }
/* Le bandeau de la carte : un bloc opaque, pas un dégradé — une carte se lit
 * ou n'existe pas. */
.rtc-bas { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 6px 8px 7px;
  text-align: left; background: var(--surface-1); border-top: 1px solid var(--trait); }
.rtc-n { font: 550 12px/1.3 var(--affichage); color: var(--clair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtc-m { font-size: 11px; color: var(--clair-terne); }
.rtc-e { font: 550 11px var(--affichage); color: var(--bloquant); }
.rtc-ok { font: 550 11px var(--affichage); color: var(--succes); }
.rtc-hors { font: 550 11px var(--affichage); color: var(--arbitrage); }

/* Les déclinaisons, repliées par groupe ; la tête dit ce que le groupe cache. */
.rt-groupe { border-top: 1px solid var(--trait); }
.rt-groupe:first-of-type { border-top: 0; }
.rtg-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; padding: 6px 0;
  cursor: pointer; list-style: none; }
.rtg-tete::-webkit-details-marker { display: none; }
.rtg-tete::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 12px; transition: transform var(--tr-rapide); }
.rt-groupe[open] > .rtg-tete::before { transform: rotate(90deg); }
.rtg-code { font: 550 11px var(--affichage); padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--clair); }
.rt-groupe.orphelin .rtg-code { color: var(--bloquant); background: none; border: 1px dashed var(--bloquant); }
.rtg-nom { font: 550 13px var(--affichage); color: var(--clair); flex: 1; min-width: 0; }
.rtg-x { font: 550 11px var(--affichage); }
.rtg-x.alerte { color: var(--bloquant); }
.rtg-x.attente { color: var(--arbitrage); }
.rtg-n { font-size: 12px; color: var(--clair-terne); }
.rt-groupe > .rt-mur { padding: 4px 0 16px; }

/* ——— L'axe créatif ———
 * L'axe avant l'argumentaire : le sacrifice et l'argument défendent quelque
 * chose, et ce quelque chose est l'axe. */
.axe-bloc { --ton: var(--studio-bleu); display: grid; gap: 12px; padding: 18px 20px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.axe-bloc.vide { --ton: var(--bloquant); }
.axe-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.axet-l { font: 550 17px var(--affichage); color: var(--clair); }
.axet-e { margin-left: auto; font: 550 12px var(--affichage); color: var(--clair-terne); }
.axet-e.vert { color: var(--succes); }
.axet-e.attente { color: var(--arbitrage); }
.axet-e.alerte { color: var(--bloquant); }
.axe-q { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
.axe-rien { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 70ch; }
.axe-c { display: grid; gap: 10px; }
.axec { display: grid; gap: 2px; }
.axec-l { font-size: 11px; color: var(--clair-terne); }
.axec-v { font-size: 14px; line-height: 1.55; color: var(--clair); }
.axec-v.manque { font-size: 13px; color: var(--clair-terne); }
.axec-p { display: flex; gap: 6px; flex-wrap: wrap; }
.axe-val { font: 500 12px var(--affichage); color: var(--clair); background: var(--surface-3); border-radius: 5px; padding: 3px 8px; }
/* Le ton est ce qu'un humain a écrit : Asap 500, pas le sérif. */
.axe-ton { font: 500 15px/1.45 var(--affichage); color: var(--studio-encre); }
.axe-jum { font-size: 12px; line-height: 1.5; color: var(--arbitrage); }
/* Ce que la marque impose déjà, sous les yeux de qui écrit l'axe. */
.axe-socle { display: grid; gap: 8px; padding: 14px 16px; background: var(--surface-4); border: 1px solid var(--trait); border-radius: 8px; }
.axsoc-l { font: 700 12px var(--affichage); color: var(--clair); }
.axsoc-r { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--trait); }
.axsocr-n { font-size: 12px; color: var(--clair-terne); }
.axsocr-v { font-size: 13px; line-height: 1.5; color: var(--clair); }
.axsocr-s { font-size: 11px; color: var(--clair-terne); }
.axsoc-i { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
@media (max-width: 560px) { .axsoc-r { grid-template-columns: 1fr; gap: 2px; } }
/* Une carte sans visuel porte du texte, et un ratio fixe l'ampute : elle prend
 * la hauteur qu'il lui faut, le bandeau passe dessous, et le texte d'attente
 * descend sous la pastille de code. */
.rt-c:has(> .vignette.vide) { display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: auto; min-height: 118px; }
.rt-c:has(> .vignette.vide) .rtc-bas { position: static; }
.rt-c:has(> .rtc-code) > .vignette.vide.attente { padding-top: 30px; align-content: start; }
/* La scène vide garde une hauteur de scène. */
.rts-toile .vignette.vide { min-height: 180px; }

/* ——— La bande de priorité : où en est la piste, commercialement ——— */
.pr-band { --ton: var(--trait-clair); display: grid; gap: 10px; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.pr-band.vert { --ton: var(--succes); }
.pr-band.or { --ton: var(--studio-bleu); }
.pr-band.attente { --ton: var(--arbitrage); }
.prb-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prb-r { font: 600 14px var(--affichage); color: var(--ton); }
.pr-band.terne .prb-r { color: var(--clair-terne); }
.prb-q { flex: 1; font-size: 13px; color: var(--clair-terne); }
.prb-m { font: 550 12px var(--affichage); color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.prb-regle { font-size: 14px; line-height: 1.55; color: var(--clair); max-width: 70ch; }
.prb-jalons { display: flex; gap: 6px; flex-wrap: wrap; }
.prbj { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 5px;
  background: var(--surface-4); border: 1px solid var(--trait); font-size: 12px; color: var(--clair-terne); }
.prbj .m { color: var(--clair-terne); }
.prbj.ok { color: var(--clair); }
.prbj.ok .m { color: var(--succes); }
.prbj.min:not(.ok) { color: var(--clair); box-shadow: inset 3px 0 0 var(--bloquant); }
.prbj.min:not(.ok) .m { color: var(--bloquant); }
.prb-dates { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--clair); font-variant-numeric: tabular-nums; }
.prb-dates .vide { color: var(--clair-terne); }
.prb-dates .vert { color: var(--succes); font-weight: 550; }
.prb-g { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— Le rétroplanning : les phases, et les productions lourdes dans leur fenêtre ——— */
.re-l { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.re-p { --ton: transparent; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; width: 100%;
  text-align: left; padding: 10px 10px 10px 12px; background: none; border: 0; border-left: 3px solid var(--ton);
  border-bottom: 1px solid var(--trait); cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
.re-p:hover { background: var(--surface-4); }
.re-p.faite { --ton: var(--succes); }
.re-p.ici { --ton: var(--studio-bleu); background: var(--surface-4); }
.re-p.retard { --ton: var(--bloquant); }
.re-p.hors { cursor: default; color: var(--clair-terne); }
.re-p.hors:hover { background: none; }
.rep-n { grid-column: 1; font: 550 14px var(--affichage); color: var(--clair); }
.re-p.hors .rep-n { color: var(--clair-terne); font-weight: 400; }
.rep-n i { font: 400 12px var(--affichage); color: var(--clair-terne); font-style: normal; margin-left: 6px; }
.rep-d { grid-column: 1; font-size: 12px; color: var(--clair); font-variant-numeric: tabular-nums; }
.rep-q { grid-column: 1; font-size: 12px; line-height: 1.45; color: var(--clair-terne); max-width: 70ch; }
.rep-e { grid-column: 2; grid-row: 1; text-align: right; font: 550 12px var(--affichage); color: var(--clair-terne); }
.re-p.faite .rep-e { color: var(--succes); }
.re-p.ici .rep-e { color: var(--studio-bleu); }
.re-p.retard .rep-e { color: var(--bloquant); }
.rep-w { grid-column: 2; grid-row: 2; text-align: right; font-size: 11px; color: var(--clair-terne); }

.re-prod { display: grid; gap: 8px; }
.rep-t { display: flex; align-items: center; gap: 10px; font: 700 12px var(--affichage); color: var(--clair); }
.rep-t span { font: 500 12px var(--affichage); color: var(--clair-terne); background: var(--surface-3); border-radius: 5px; padding: 3px 7px; }
.rep-p { --ton: var(--trait-clair); background: var(--surface-4); border-left: 3px solid var(--ton); border-radius: 0 6px 6px 0; }
.rep-p.deborde { --ton: var(--bloquant); }
.repp-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none; }
.repp-t::-webkit-details-marker { display: none; }
.repp-t::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 10px; transition: transform var(--tr-rapide); }
.rep-p[open] > .repp-t::before { transform: rotate(90deg); }
.repp-n { font: 550 13px var(--affichage); color: var(--clair); }
.repp-j { font-size: 12px; color: var(--clair); font-variant-numeric: tabular-nums; }
.repp-x-d { font: 550 12px var(--affichage); color: var(--bloquant); }
.repp-f { margin-left: auto; font-size: 12px; color: var(--clair-terne); }
.rep-p > .banniere { margin: 0 12px 10px; }
.repp-l { display: grid; gap: 6px; padding: 0 12px 12px 34px; }
.repp-x { display: grid; gap: 1px; padding-left: 10px; border-left: 1px solid var(--trait-clair); }
.reppx-n { font: 550 12px var(--affichage); color: var(--clair); }
.reppx-n i { font: 400 11px var(--affichage); color: var(--clair-terne); font-style: normal; margin-left: 6px; }
.reppx-d { font-size: 12px; color: var(--clair); font-variant-numeric: tabular-nums; }
.reppx-q { font-size: 12px; line-height: 1.45; color: var(--clair-terne); }

/* ——— Le comparateur de pistes ———
 * Des cartes empilées se lisent verticalement : on découvre une piste, puis
 * l'autre, et on compare de mémoire. La décision est une comparaison : elle se
 * lit en travers. Une colonne de libellés, une colonne par piste. */
.cmp { display: grid; gap: 16px; }
.cmp-t { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); max-width: 40ch; text-wrap: balance; }
.cmp-s { font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.cmp-g { display: grid; align-items: stretch; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
/* Le libellé de ligne porte le coût, une fois, au lieu d'une fois par colonne. */
.cmpg-l { display: grid; align-content: start; gap: 3px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--trait);
  font: 700 12px var(--affichage); color: var(--clair); background: var(--surface-4); }
.cmpgl-c { font: 400 11px/1.45 var(--affichage); color: var(--clair-terne); }
.cmp-h { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-bottom: 1px solid var(--trait); border-left: 1px solid var(--trait); }
.cmp-h.retenue { box-shadow: inset 0 -3px 0 var(--succes); }
.cmph-n { font: 550 15px var(--affichage); color: var(--clair); }
.cmph-e { font: 550 12px var(--affichage); color: var(--succes); }
.cmp-c { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-bottom: 1px solid var(--trait); border-left: 1px solid var(--trait); min-width: 0; }
.cmp-c.visuel { padding: 12px; background: none; border-top: 0; border-right: 0; cursor: pointer; font: inherit; text-align: left; }
.cmp-c.visuel .vignette { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 5px; }
.cmp-c.visuel .vignette img { width: 100%; height: 100%; object-fit: cover; }
.cmp-c.visuel:hover .vignette { box-shadow: 0 0 0 2px var(--studio-bleu); }
.cmpc-p { font-size: 14px; line-height: 1.55; color: var(--clair); }
.cmpc-n { font-size: 14px; color: var(--clair); }
/* Une case vide dit ce qui manque, en trois mots ; le pourquoi est à gauche. */
.cmp-vide { font-size: 13px; line-height: 1.5; color: var(--clair-terne); }
.cmp-vide b { color: var(--clair); font-weight: 550; }
.cmp-manque { font-size: 13px; color: var(--clair-terne); }
.cmp-al { font: 550 12px var(--affichage); color: var(--bloquant); }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-chip { font-size: 12px; padding: 3px 8px; border-radius: 5px; background: var(--surface-3); color: var(--clair); }
.cmp-disp { display: grid; gap: 6px; }
.cmpd { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
.cmpd-c { font: 550 11px var(--affichage); color: var(--clair); background: var(--surface-3); border-radius: 4px; padding: 2px 0; text-align: center; }
.cmpd-n { font-size: 13px; color: var(--clair); }
/* La frise : chaque jalon peut se serrer, et son libellé se coupe plutôt que
 * de pousser la grille. */
.cmp-frise { display: flex; gap: 2px; min-width: 0; }
.cmpf { display: grid; justify-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.cmpf-d { font: 550 11px var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.cmpf-r { width: 7px; height: 7px; border-radius: 50%; background: var(--studio-bleu); position: relative; }
.cmpf-r::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%; height: 1px; background: var(--trait-clair); }
.cmpf:first-child .cmpf-r::before { display: none; }
.cmpf-d, .cmpf-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpf-n { font-size: 11px; color: var(--clair-terne); text-align: center; }
.cmp-v { display: grid; align-content: center; justify-items: center; padding: 14px 16px; border-left: 1px solid var(--trait); }
.cmpv-b { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.cmpv-ok { font: 550 13px/1.45 var(--affichage); color: var(--succes); text-align: center; }
.cmp-pied { font-size: 13px; line-height: 1.55; color: var(--clair-terne); }
/* Au doigt, on ne compare pas en travers : chaque piste devient un bloc, et le
 * libellé repasse au-dessus de sa valeur. */
@media (max-width: 900px) {
  .cmp-g { grid-template-columns: minmax(0, 1fr) !important; }
  .cmpg-l { padding: 12px 16px 4px; border-bottom: 0; }
  .cmp-c, .cmp-h, .cmp-v { border-left: 0; }
}

/* ═════════════════════ Passe 5a · Dossier : la planche des KV ═════════════════════ */

.pl { display: grid; gap: 16px; }
.pl-vide { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center;
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.pl-vide svg { color: var(--trait-clair); }
.pl-vide .plv-t { font: 550 17px var(--affichage); color: var(--clair); }
.plv-s { font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 55ch; }
.pl-tete { display: flex; justify-content: flex-end; }
.pl-densite .pld { text-transform: none; letter-spacing: 0; }
/* Trois densités : la planche se lit de loin ou de près. Une section par ligne. */
.pl-grille { display: grid; gap: 16px; }
.pl-marque { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.plm-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plm-nom { font: 550 17px var(--affichage); color: var(--clair); }
.plm-n { font: 500 12px var(--affichage); color: var(--clair-terne); background: var(--surface-3); border-radius: 5px; padding: 3px 7px; }
.pl-cases { display: grid; gap: 12px; }
.pl-grille.dense .pl-cases { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pl-grille.moyen .pl-cases { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pl-grille.grand .pl-cases { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
/* Une case : l'image, puis son bandeau opaque — l'accroche et ce qui la
 * qualifie. Le dégradé noir venait du sombre, et tombait à 1,32:1 en clair. */
.pl-c { --ton: var(--succes); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-c.ecart { --ton: var(--bloquant); }
.plc-visuel { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; box-shadow: inset 0 3px 0 var(--ton);
  font: inherit; color: inherit; text-align: left; }
.plc-visuel:hover { border-color: var(--trait-clair); box-shadow: inset 0 3px 0 var(--ton), var(--elev-1); }
.plc-visuel > .vignette { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.plc-visuel > .vignette img { height: 100%; object-fit: cover; }
.plc-visuel > .vignette.vide.attente { padding-top: 30px; align-content: start; }
.plc-haut { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 6px 0; pointer-events: none; }
.plc-marche { font: 550 11px var(--affichage); padding: 2px 6px; border-radius: 4px; background: var(--surface-1); color: var(--clair); }
.plc-droite { display: flex; gap: 4px; }
.plc-retours, .plc-pastille { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 10px; font: 550 11px var(--affichage); }
.plc-retours { background: var(--arbitrage); color: var(--surface-1); }
.plc-pastille.ok { background: var(--surface-1); color: var(--succes); }
.plc-pastille.ecart { background: var(--surface-1); color: var(--bloquant); }
.plc-bas { display: grid; gap: 2px; padding: 8px 10px 10px; border-top: 1px solid var(--trait); }
/* L'accroche est ce qu'un humain a écrit : Asap 500. */
.plc-copy { font: 500 15px/1.3 var(--affichage); color: var(--studio-encre); }
.plc-copy.vide { font: 400 13px var(--affichage); color: var(--clair-terne); }
.plc-sous { font-size: 11px; line-height: 1.45; color: var(--clair-terne); }
.pl-grille.dense .plc-copy { font-size: 13px; }
.pl-grille.grand .plc-copy { font-size: 17px; }
.plc-a { font-size: 11px; padding: 2px 6px; border: 1px solid var(--trait); border-radius: 4px; color: var(--clair); }
.plc-a.vide { color: var(--clair-terne); border-style: dashed; }
/* Les manquements se nomment, et disent combien de formats en héritent — c'est
 * ce nombre qui décide si on corrige maintenant ou jamais. */
.plc-m { display: grid; gap: 4px; }
.plcm-t { font: 550 12px var(--affichage); color: var(--bloquant); }
.plcm-l { display: grid; gap: 2px; }
.plcm { display: grid; gap: 1px; text-align: left; background: none; border: 0; border-left: 3px solid var(--bloquant);
  padding: 6px 8px; border-radius: 0 5px 5px 0; cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
.plcm:hover { background: var(--surface-3); }
.plcm-q { font: 550 13px var(--affichage); color: var(--clair); }
.plcm-x { font-size: 12px; line-height: 1.45; color: var(--clair-terne); }
.plc-m > .b.nu { justify-self: start; margin-left: -8px; }
/* Le signal « hors écart déclaré » : distinct des manquements, au ton de
 * l'arbitrage. Il ouvre la revue ; il ne bloque rien. */
.plc-hors { display: grid; gap: 1px; text-align: left; background: none; border: 0; border-left: 3px solid var(--arbitrage);
  padding: 6px 8px; border-radius: 0 5px 5px 0; cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
.plc-hors:hover { background: var(--surface-3); }
.plch-q { font: 550 13px var(--affichage); color: var(--arbitrage); }
.plch-x { font-size: 12px; line-height: 1.45; color: var(--clair-terne); }
.plc-gestes { display: flex; gap: 0 4px; flex-wrap: wrap; align-items: center; margin-left: -8px; }
.pl-grille.dense .plc-gestes { display: none; }
.pl-grille.dense .pl-c:hover .plc-gestes, .pl-grille.dense .pl-c:focus-within .plc-gestes { display: flex; }
@media (max-width: 900px) { .pl-cases { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; } }
@media print { .pl-cases { grid-template-columns: repeat(4, 1fr) !important; } .plc-gestes { display: none !important; } }

/* ═════════════════════ Passe 5b · Dossier : les livrables ═════════════════════ */

/* Une ombrelle, plusieurs marques : ce qui se produit une fois, puis ce qui se
 * produit — et se valide — une fois par marque. */
.pc { display: grid; gap: 16px; margin-bottom: 28px; }
.pc-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pch-o { display: grid; gap: 3px; }
.pcho-t { font-size: 12px; color: var(--clair-terne); }
.pcho-n { font: 550 21px var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.pcho-x { font-size: 13px; line-height: 1.5; color: var(--clair); max-width: 60ch; }
.pcho-x::before { content: "◐ "; color: var(--arbitrage); }
.pch-n { font-size: 13px; color: var(--clair-terne); }
.pc-p { display: grid; gap: 8px; padding: 16px 20px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.pcp-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 550 15px var(--affichage); color: var(--clair); }
.pcp-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.pcp-l { display: grid; gap: 0; }
.pcp-i { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--trait); }
.pcpi-q { font-size: 12px; color: var(--clair-terne); }
.pcpi-v { font-size: 14px; line-height: 1.55; color: var(--clair); }
.pc-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
/* La couleur de la marque identifie : elle tient la pastille et le filet ; le
 * nom garde une encre lisible. */
.pcm { display: grid; gap: 12px; align-content: start; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-top: 3px solid var(--trait-clair); border-radius: 10px; min-width: 0; }
.pcm-t { display: grid; gap: 2px; }
.pcmt-n { display: flex; align-items: center; gap: 8px; font: 550 16px var(--affichage); color: var(--clair); }
.pcmt-p { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pcmt-v { font-size: 13px; color: var(--clair-terne); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pcmt-v:hover { color: var(--studio-bleu); }
.pcm-b { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--trait); }
.pcmb-t { font: 700 12px var(--affichage); color: var(--clair); margin-bottom: 2px; }
.pcmb-l, .pcmb-promo { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
.pcmbl-lg { font: 550 11px var(--affichage); color: var(--clair-terne); }
.pcmb-promo .pcmbl-lg { color: var(--arbitrage); }
/* Le message et la signature sont ce qu'un humain a écrit : Asap 500. */
.pcmbl-v { font: 500 15px/1.4 var(--affichage); color: var(--studio-encre); }
.pcmbl-v i { display: block; font: 400 12px var(--affichage); color: var(--clair-terne); font-style: normal; }
.pcm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pcm-chip { font-size: 12px; padding: 3px 8px; border-radius: 5px; background: var(--surface-3); color: var(--clair); }
.pcm-sel { display: grid; gap: 4px; }
.pcmsel { display: grid; grid-template-columns: 4.5rem auto; gap: 2px 10px; align-items: baseline; }
.pcmsel-c { font: 550 15px var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.pcmsel-n { font-size: 13px; color: var(--clair-terne); }
.pcmsel-d { grid-column: 2; font-size: 11px; color: var(--clair-terne); }
.pcms { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.pcms-c { font: 550 24px/1 var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.pcms-n { font-size: 14px; color: var(--clair); }
.pcms-x { font-size: 13px; color: var(--clair-terne); }
.pcm-e { font-size: 13px; line-height: 1.5; color: var(--clair); padding-top: 10px; border-top: 1px solid var(--trait); }
.pcm-e::before { content: "◐ "; color: var(--arbitrage); }
.pcm-e.ok::before { content: "✓ "; color: var(--succes); }
.pcm-n { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }

/* Le mur, par piste puis par marque puis par KV maître ; replié, chaque bloc
 * ne garde que sa ligne, et c'est elle qui doit suffire. */
.mr-f { margin-bottom: 16px; }
.mrf-e { font-size: 13px; line-height: 1.55; color: var(--clair-terne); }
.mur-r { display: grid; gap: 16px; }
.mr-piste { --ton: var(--trait-clair); display: grid; gap: 10px; padding: 18px 20px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; min-width: 0; }
.mr-piste.retenue { --ton: var(--succes); }
.mr-piste.hors { --ton: var(--bloquant); }
.mr-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mrt-nom { font: 550 17px var(--affichage); color: var(--clair); text-transform: none; letter-spacing: 0; }
.mrt-n { flex: 1; font-size: 12px; color: var(--clair-terne); }
/* Un en-tête de bloc est un bouton : il hérite explicitement de la couleur et
 * de la fonte, que le navigateur remet sinon à ses valeurs. */
.mr-mq { display: grid; gap: 6px; padding-left: 12px; border-left: 3px solid var(--trait-clair); }
.mrmq-t, .mrg-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; min-height: 44px;
  padding: 6px 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.mrmqt-n { display: flex; align-items: center; gap: 8px; font: 550 15px var(--affichage); color: var(--clair); }
.mrmqt-q { flex: 1; font-size: 12px; color: var(--clair-terne); }
.mrmqt-x, .mrg-x { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px;
  background: var(--surface-3); color: var(--clair); font: 550 14px var(--affichage); }
.mr-groupe { display: grid; gap: 6px; }
.mr-groupe > .rt-mur { padding-bottom: 8px; }
.mrg-code { font: 550 11px var(--affichage); padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--clair); }
.mr-groupe.orphelin .mrg-code, .mr-groupe.trou .mrg-code { background: none; color: var(--bloquant); border: 1px dashed var(--bloquant); }
.mrg-nom { font: 550 13px var(--affichage); color: var(--clair); }
.mrg-n { font-size: 12px; color: var(--clair-terne); }
@media (max-width: 560px) { .pcp-i { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ——— Le calendrier d'un cycle éditorial ———
 * Un cycle se pilote sur deux dates : celle où l'on remet, celle où ça paraît ;
 * et sur le texte du post, qui est tout ce dont l'équipe a besoin. */
.cy { display: grid; gap: 16px; }
.cy-f { margin-bottom: 4px; }
.cy-sem { display: grid; gap: 16px; }
.cys { display: grid; gap: 8px; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.cys-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cyst-n { font: 550 17px var(--affichage); color: var(--clair); }
.cyst-d { font-size: 13px; color: var(--clair-terne); }
.cyst-q { margin-left: auto; font-size: 12px; color: var(--clair-terne); }
.cys-l { display: grid; gap: 6px; }
/* Une publication : sa ligne dit déjà ce qu'elle coûte ; on ne déplie que pour
 * agir. Parue sans trace, c'est une documentation en retard, pas un défaut. */
.cyp { --ton: var(--trait-clair); background: var(--surface-4); border-left: 3px solid var(--ton); border-radius: 0 6px 6px 0; }
.cyp.remiseRatee, .cyp.sansqui { --ton: var(--bloquant); }
.cyp.aDocumenter, .cyp.demandee { --ton: var(--arbitrage); }
.cyp.soumise { --ton: var(--studio-bleu); }
.cyp.prete { --ton: var(--succes); }
.cyp-h { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 8px 12px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.cyp-h:hover .cyph-n { color: var(--studio-bleu); }
.cyph-d { display: flex; align-items: baseline; gap: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.cyphd-r { color: var(--clair); font-weight: 550; }
.cyphd-f { color: var(--clair-terne); }
.cyphd-p { color: var(--clair-terne); }
.cyp.remiseRatee .cyphd-r { color: var(--bloquant); }
.cyp.aDocumenter .cyphd-p { color: var(--arbitrage); }
.cyph-c { display: grid; gap: 2px; min-width: 0; }
.cyph-n { font: 550 14px/1.4 var(--affichage); color: var(--clair); }
.cyph-m { font-size: 12px; color: var(--clair-terne); }
.cyph-e { font: 550 11px var(--affichage); padding: 2px 7px; border-radius: 5px; background: var(--surface-1);
  border: 1px solid var(--trait); color: var(--ton); white-space: nowrap; }
.cyph-x { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: var(--surface-3);
  font: 550 14px var(--affichage); color: var(--clair); }
.cyp-q { padding: 0 12px 10px calc(11rem + 24px); font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
/* Le contenu du post, tel qu'il a été arrêté : c'est ce qu'on venait chercher. */
.cyp-b { display: grid; gap: 12px; padding: 12px; border-top: 1px solid var(--trait); background: var(--surface-1); border-radius: 0 0 6px 0; }
.cypb { display: grid; gap: 3px; }
.cypb-t { font: 700 12px var(--affichage); color: var(--clair); text-transform: none; letter-spacing: 0; }
.cypb-c { font: 500 14px/1.55 var(--affichage); color: var(--studio-encre); white-space: pre-wrap; max-width: 70ch; }
.cyp-r { display: grid; gap: 4px; }
.cypr { font-size: 13px; line-height: 1.5; color: var(--clair); }
.cypr b { display: inline-block; min-width: 9rem; font: 400 12px var(--affichage); color: var(--clair-terne); text-transform: none; letter-spacing: 0; }
/* Le découpage d'une animatique : sans lui, c'est une intention, pas un brief. */
.cyp-sc { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--trait-clair); }
.cypsc-t { font: 700 12px var(--affichage); color: var(--clair); text-transform: none; letter-spacing: 0; }
.cypsc { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 8px; }
.cypsc-n { font: 550 12px var(--affichage); color: var(--studio-bleu); }
.cypsc-c { display: grid; gap: 2px; }
.cypsc-e { font-size: 13px; line-height: 1.5; color: var(--clair); }
.cypsc-i, .cypsc-v { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
.cyp-qui { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--clair); }
.cyp-dm { display: flex; gap: 6px; flex-wrap: wrap; }
.cypdm { font: 550 11px var(--affichage); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--trait); color: var(--arbitrage); background: var(--surface-1); }
.cypdm.rendu { color: var(--succes); }
@media (max-width: 760px) {
  .cyp-h { grid-template-columns: minmax(0, 1fr) auto; }
  .cyph-d { grid-column: 1 / -1; }
  .cyp-q { padding-left: 12px; }
}

/* ═════════════════════ Passe 5c · Dossier : la livraison ═════════════════════ */

.plv { display: grid; gap: 16px; }
.plv-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plv-tete .plv-t { display: grid; gap: 2px; }
.plv-n { font: 550 28px/1.1 var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.plv-q { font-size: 13px; line-height: 1.5; color: var(--clair-terne); max-width: 60ch; }
.plv-familles { display: grid; gap: 16px; }
/* Une famille de SKU : là où une décision technique se prend une fois — la
 * place du code-barres, la cible du QR, le gabarit d'exé. */
.plv-f { display: grid; gap: 12px; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.plvf-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; }
summary.plvf-tete { cursor: pointer; min-height: 44px; }
summary.plvf-tete::-webkit-details-marker { display: none; }
summary.plvf-tete::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 10px; transition: transform var(--tr-rapide); }
.plv-f[open] > summary.plvf-tete::before { transform: rotate(90deg); }
.plvf-tete h3 { font: 550 17px var(--affichage); color: var(--clair); }
.plvf-v { font-size: 12px; color: var(--clair-terne); }
.plvf-n { margin-left: auto; font: 550 12px var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums;
  background: var(--surface-3); border-radius: 5px; padding: 3px 7px; }
.plvf-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.plvc { --ton: transparent; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 118px;
  padding: 0; cursor: pointer; overflow: hidden; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px;
  box-shadow: inset 0 3px 0 var(--ton); font: inherit; color: inherit; text-align: left; }
.plvc.tracee { --ton: var(--succes); }
.plvc:hover { border-color: var(--trait-clair); box-shadow: inset 0 3px 0 var(--ton), var(--elev-1); }
.plvc.pleine { aspect-ratio: 4 / 3; }
.plvc.pleine .plvc-bas { position: absolute; left: 0; right: 0; bottom: 0; }
.plvc .vignette { height: 100%; border-radius: 0; }
.plvc .vignette img { height: 100%; object-fit: cover; }
.plvc.vide .vignette.vide.attente { align-content: start; }
.plvc-bas { display: grid; gap: 1px; padding: 6px 8px 7px; background: var(--surface-1); border-top: 1px solid var(--trait); }
.plvc-n { font: 550 12px/1.3 var(--affichage); color: var(--clair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plvc-m { font-size: 11px; color: var(--clair-terne); }
@media print {
  .plv-modes, .plvc.vide { display: none !important; }
  .plvc, .plv-f { break-inside: avoid; }
}

/* ═════════════════════ Passe 5d · Dossier : la présentation ═════════════════════ */

.pr { display: grid; gap: 16px; }
/* La salle : qui décide, et la structure de deck qu'elle appelle. */
.salle { --ton: var(--trait-clair); display: grid; gap: 10px; padding: 16px 18px; margin: 0; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.salle.accord { --ton: var(--succes); }
.salle.ecart { --ton: var(--arbitrage); }
.salle.sans { --ton: var(--bloquant); }
.sal-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; width: 100%; }
.sal-c { display: grid; gap: 2px; }
.sal-t { font-size: 11px; color: var(--clair-terne); }
.sal-n { font: 550 15px var(--affichage); color: var(--clair); }
.sal-n.sans { color: var(--clair-terne); font-weight: 400; }
.sal-x { font-size: 12px; color: var(--clair-terne); }
.sal-q { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
.sal-i { font-size: 12px; line-height: 1.5; color: var(--clair); }
.sal-i::before { content: "◐ "; color: var(--arbitrage); }
.salle > .b.nu { justify-self: start; margin-left: -8px; }

/* Le montage client n'est pas le dossier amputé : c'est un choix, et il doit se
 * voir — à gauche ce qui part, à droite ce qu'on retire et pourquoi. */
.pr-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.prd-c { display: grid; gap: 10px; align-content: start; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.prd-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 550 15px var(--affichage); color: var(--clair); }
.prd-t span { font: 500 12px var(--affichage); color: var(--clair-terne); background: var(--surface-3); border-radius: 5px; padding: 3px 7px; }
.prd-c.retire { background: var(--surface-4); }
.prd-x { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
.pr-pages { display: grid; gap: 6px; }
.pr-p { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px;
  background: var(--surface-4); border-radius: 6px; }
.pr-p.dette { box-shadow: inset 3px 0 0 var(--bloquant); }
.prp-rang { font: 550 15px var(--affichage); color: var(--clair-terne); text-align: center; font-variant-numeric: tabular-nums; }
.prp-corps { min-width: 0; display: grid; gap: 4px; }
.prp-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.prp-type { font: 550 14px var(--affichage); color: var(--clair); }
.prp-tire { font-size: 12px; color: var(--clair-terne); }
.prp-l { font-size: 13px; line-height: 1.5; color: var(--clair); }
.prp-vide { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--clair-terne); }
.prp-grille { display: flex; gap: 6px; flex-wrap: wrap; }
.prp-c { width: 84px; }
.prp-c span { display: block; font-size: 11px; color: var(--clair-terne); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prp-c .vignette.v-case { height: 54px; }
.prp-plus { display: grid; place-items: center; width: 44px; height: 54px; border: 1px dashed var(--trait-clair); border-radius: 4px;
  background: none; cursor: pointer; color: var(--clair-terne); font: 550 16px var(--affichage); }
.prp-gestes { display: flex; gap: 0; }
.prp-gestes .b { min-width: 32px; justify-content: center; }
.pr-ret { display: grid; }
.prr { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--trait); }
.prr-q { font: 550 14px var(--affichage); color: var(--clair); }
.prr-q::first-letter { text-transform: uppercase; }
.prr-d { font-size: 12px; color: var(--clair-terne); }
.prr-p { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
@media print { .prp-gestes, .pr-pages, .pr-deux { display: none !important; } }

/* ═════════════════════ Passe 6 · Le livrable (la fiche) ═════════════════════ */

.as { display: grid; gap: 16px; }
.as-tete { display: flex; gap: 16px; align-items: flex-start; }
.ast-v { flex: 0 0 12rem; }
.ast-v .vignette { height: 8rem; border-radius: 6px; }
.ast-c { min-width: 0; display: grid; gap: 6px; align-content: start; }
.ast-n { font: 550 19px/1.3 var(--affichage); letter-spacing: -.01em; color: var(--clair); }
.ast-m, .ast-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--clair-terne); }
.ast-r .alerte { color: var(--bloquant); font-weight: 550; }

/* La porte de production : on ne franchit pas un BAT comme on pose une
 * vignette. Le passage est vertical, il a un chambranle, une ligne de
 * non-retour, et un seul étage occupé à la fois. */
.pt { display: grid; gap: 12px; }
.pt-c { --ton: var(--succes); display: grid; gap: 4px; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.pt-c.hors { --ton: var(--bloquant); }
.ptc-t { font: 700 12px var(--affichage); color: var(--clair); }
.ptc-n { font: 550 24px/1.2 var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.ptc-n span { margin-left: 8px; font: 400 13px var(--affichage); color: var(--clair-terne); }
.ptc-r { font-size: 13px; line-height: 1.55; color: var(--clair); }
.pt-p { display: grid; gap: 8px; }
.pt-e { display: grid; }
/* La ligne de non-retour : le seul endroit où le coût est irréversible. */
.pt-l { display: grid; gap: 2px; margin: 4px 0; padding: 10px 14px; border-top: 2px dashed var(--bloquant); border-bottom: 2px dashed var(--bloquant); }
.ptl-t { font: 700 12px var(--affichage); color: var(--bloquant); }
.ptl-s { font-size: 12px; color: var(--clair-terne); }
.pt-f { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.ptf-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ptf-c { color: var(--succes); font-size: 14px; }
.ptf-n { font: 550 14px var(--affichage); color: var(--clair); }
.ptf-q, .ptf-x { font-size: 12px; color: var(--clair-terne); }
.ptf-x { font-style: italic; }
.ptf-fs { display: grid; gap: 4px; padding-left: 22px; }
.ptff { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ptff-n { font-size: 13px; color: var(--clair); }
.ptff-m { font-size: 11px; color: var(--clair-terne); }
.ptf-v { display: flex; gap: 8px; padding-left: 22px; flex-wrap: wrap; }
.ptfv { display: grid; gap: 3px; width: 8rem; }
.ptfv span { font-size: 11px; color: var(--clair-terne); }
.pt-f > .b.nu { justify-self: start; margin-left: 14px; }
/* L'étage où l'on est : le seul qui prend de la place. */
.pt-o { --ton: var(--studio-bleu); display: grid; gap: 12px; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.pt-o.dur { --ton: var(--bloquant); }
.pto-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pto-i { font: 550 11px var(--affichage); color: var(--ton); background: var(--studio-bleu-pale); border-radius: 5px; padding: 3px 8px; }
.pt-o.dur .pto-i { background: var(--surface-4); }
.pto-n { font: 550 19px var(--affichage); color: var(--clair); }
.pto-e { font-size: 12px; color: var(--clair-terne); }
.pto-b { display: grid; gap: 0; }
.ptob, .pto-c { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--trait);
  font-size: 13px; line-height: 1.5; color: var(--clair); }
.ptob b, .pto-c b { font: 400 12px var(--affichage); color: var(--clair-terne); letter-spacing: 0; text-transform: none; }
.ptob i { font-style: normal; color: var(--clair-terne); }
.ptob i::before { content: "◐ "; color: var(--arbitrage); }
.pto-z { display: flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; padding: 8px 14px;
  background: var(--surface-4); border: 1px dashed var(--trait-clair); border-radius: 6px; cursor: pointer; font: inherit; color: inherit; }
.pto-z:hover { border-color: var(--studio-bleu); }
.ptoz-p { font: 550 18px/1 var(--affichage); color: var(--studio-bleu); }
.ptoz-t { font: 550 14px var(--affichage); color: var(--clair); }
.pto-a { font-size: 13px; line-height: 1.5; color: var(--clair); }
.pto-a::before { content: "● "; color: var(--bloquant); }
.pt-x { display: grid; grid-template-columns: 1.2rem 11rem minmax(0, 1fr); gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.ptx-c { color: var(--clair-terne); }
.ptx-n { font-size: 13px; color: var(--clair-terne); }
.ptx-q { font-size: 12px; color: var(--clair-terne); }
.ptx-o { grid-column: 2 / -1; font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
.pt-hs { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }

/* Les packs montrés : le contrôle qui vaut le plus cher. */
.pm { --ton: var(--trait-clair); display: grid; gap: 10px; margin-top: 16px; padding: 16px 18px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.pm.alerte { --ton: var(--bloquant); }
.pm-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 550 15px var(--affichage); color: var(--clair); }
.pm-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.pm-x { font-size: 13px; line-height: 1.55; color: var(--clair-terne); }
.pm-h { display: grid; gap: 2px; padding: 10px 12px; border-radius: 6px; background: var(--surface-4); box-shadow: inset 3px 0 0 var(--bloquant); }
.pmh-t { font: 550 13px var(--affichage); color: var(--clair); }
.pmh-x { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
.pm-m { font-size: 12px; line-height: 1.5; color: var(--clair); }
.pm-m::before { content: "◐ "; color: var(--arbitrage); }
.pmc-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; cursor: pointer; list-style: none;
  font: 550 13px var(--affichage); color: var(--accent); }
.pmc-t::-webkit-details-marker { display: none; }
.pmc-t::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 12px; transition: transform var(--tr-rapide); }
.pm-cat[open] > .pmc-t::before { transform: rotate(90deg); }
.pmc-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.pm-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 6px; }
.pmp { display: grid; gap: 2px; padding: 8px; text-align: left; background: var(--surface-1); border: 1px solid var(--trait);
  border-radius: 6px; cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
.pmp:hover { border-color: var(--trait-clair); }
.pmp.ici { box-shadow: inset 3px 0 0 var(--succes); background: var(--surface-4); }
.pmp.hors { box-shadow: inset 3px 0 0 var(--bloquant); }
.pmp-v { display: block; width: 100%; height: 52px; overflow: hidden; }
.pmp-v img { width: 100%; height: 100%; object-fit: contain; }
.pmp-n { font: 550 12px var(--affichage); color: var(--clair); }
.pmp-m { font-size: 11px; color: var(--clair-terne); }

/* Ce que le client en a dit, et la version précédente. */
.as-bloc { display: grid; gap: 8px; }
.asb-t { display: flex; align-items: baseline; gap: 10px; font: 700 12px var(--affichage); color: var(--clair); letter-spacing: 0; }
.asb-t span { font-weight: 400; color: var(--clair-terne); }
.as-fb { --ton: var(--trait-clair); display: grid; gap: 4px; padding: 10px 12px; background: var(--surface-4);
  border-left: 3px solid var(--ton); border-radius: 0 6px 6px 0; }
.as-fb.attente { --ton: var(--arbitrage); }
.as-fb.alerte { --ton: var(--bloquant); }
.as-fb.vert { --ton: var(--succes); }
/* Le retour client est ce qu'un humain a écrit : Asap 500. */
.asfb-t { font: 500 14px/1.5 var(--affichage); color: var(--studio-encre); }
.asfb-m { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--clair-terne); }
.asfb-mo { font-size: 12px; line-height: 1.5; color: var(--clair-terne); font-style: italic; }
.as-prec { display: grid; gap: 6px; }
.asp-v span { font-size: 12px; color: var(--clair-terne); }
.asp-c { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface-4); border-radius: 6px; }
.aspc-o { font: 550 12px var(--affichage); color: var(--clair); }
.aspc-m { font-size: 13px; line-height: 1.5; color: var(--clair); }
.aspc-q, .aspc-d { font-size: 12px; color: var(--clair-terne); }

/* Les mises en situation. */
.mk { display: grid; gap: 8px; margin-top: 20px; }
.mk-tete { display: flex; align-items: center; gap: 10px; }
.mk-t { font: 700 12px var(--affichage); color: var(--clair); }
.mk-n { flex: 1; font-size: 12px; color: var(--clair-terne); }
.mk-bande { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.mk-c { background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; overflow: hidden; }
.mk-c.perime { box-shadow: inset 0 3px 0 var(--bloquant); }
.mk-l { font: 550 12px/1.3 var(--affichage); color: var(--clair); padding: 6px 8px 0; }
.mk-g { display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 8px; }
.mk-v { font-size: 11px; color: var(--clair-terne); }
.mk-vide { font-size: 12px; line-height: 1.5; color: var(--clair-terne); }
.mk-apercu { margin-top: 6px; max-width: 200px; }
@media (max-width: 700px) {
  .as-tete { flex-direction: column; }
  .ast-v { flex: none; width: 100%; }
  .ptob, .pto-c { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pt-x { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .ptx-q { grid-column: 2; }
}

/* ═════════════════════ Passe 7a · La marque : la lentille ═════════════════════ */
/* Une ligne par marque dans une section blanche. Le filet et le signe ne
 * marquent que la marque sans rythme : c'est la seule qui appelle un geste. */
.mql-fil { color: var(--clair-terne); }
.mql-fil:hover { color: var(--studio-bleu); }
.mql-liste { background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; padding: 4px 0; }
.mql-r { --ton: transparent; display: grid; grid-template-columns: minmax(0, 1fr) 11rem 13rem 8rem; gap: 16px;
  align-items: center; min-height: 60px; padding: 10px 20px 10px 17px; border-left: 3px solid var(--ton);
  border-bottom: 1px solid var(--trait); color: var(--clair); text-decoration: none; }
.mql-r.f-attente { --ton: var(--arbitrage); }
.mql-r:last-child { border-bottom: 0; }
.mql-r:hover { background: var(--surface-4); }
.mql-r:hover .mql-n { color: var(--studio-bleu); }
.mql-n { font: 550 17px/1.35 var(--affichage); min-width: 0; overflow-wrap: anywhere; }
.mql-o { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--clair); font-variant-numeric: tabular-nums; }
.mql-o small { font-size: 11px; color: var(--clair-terne); }
.mql-c, .mql-s { font-size: 13px; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.mql-signe { color: var(--ton); }
.mql-dort { margin-top: 20px; }
.mql-dort-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 48px; cursor: pointer;
  list-style: none; font: 550 15px var(--affichage); color: var(--clair); }
.mql-dort-t::-webkit-details-marker { display: none; }
.mql-dort-t::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 12px; transition: transform var(--tr-rapide); }
.mql-dort[open] > .mql-dort-t { margin-bottom: 8px; }
.mql-dort[open] > .mql-dort-t::before { transform: rotate(90deg); }
.mql-dort-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.mql-pied { margin-top: 18px; font-size: 12px; color: var(--clair-terne); max-width: 65ch; line-height: 1.6; }
@media (max-width: 900px) {
  .mql-r { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 16px 12px 13px; }
  .mql-o { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .mql-s { display: none; }
}

/* ═════════════════════ Passe 7b · La marque : sa page ═════════════════════ */
/* Le rythme d'abord (les campagnes), puis ce qui n'est rattaché à rien, puis
 * le socle replié. Une campagne est une section ; son régime est une
 * étiquette, pas un état. */
.mqp-vie { margin-top: 6px; font-size: 13px; color: var(--clair-terne); max-width: 65ch; line-height: 1.6; }
.mqp-cmps { display: grid; gap: 16px; }
.mqp-cmp, .mqp-vide { background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; padding: 20px 22px 8px; }
.mqp-orph { margin-top: 16px; }
.mqp-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.mqp-t h2 { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); min-width: 0; overflow-wrap: anywhere; }
.mqp-t h2 a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.mqp-t h2 a:hover { color: var(--studio-bleu); }
.mqp-r, .mqp-i { font-size: 11px; color: var(--clair-terne); }
.mqp-i { --ton: var(--arbitrage); }
.mqp-signe { color: var(--ton); }
.mqp-q { margin: 6px 0 14px; font-size: 13px; color: var(--clair-terne); max-width: 65ch; line-height: 1.6; }
.mqp-cmp .mpl-liste { margin: 0 -22px; }
.mqp-cmp .mpl:last-child { border-bottom: 0; }
.mqp-cmp .mpl { padding-left: 19px; padding-right: 22px; }
.mqp-vide { padding-bottom: 20px; border-left: 3px solid var(--ton); }
.mqp-vide h2 { font: 550 21px/1.3 var(--affichage); color: var(--clair); }
.mqp-vide p { margin-top: 8px; font-size: 13px; color: var(--clair-terne); max-width: 65ch; line-height: 1.6; }
.mqp-socle { margin-top: 24px; }
.mqp-socle-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 48px; cursor: pointer;
  list-style: none; font: 550 15px var(--affichage); color: var(--clair); }
.mqp-socle-t::-webkit-details-marker { display: none; }
.mqp-socle-t::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 12px; transition: transform var(--tr-rapide); }
.mqp-socle[open] > .mqp-socle-t { margin-bottom: 12px; }
.mqp-socle[open] > .mqp-socle-t::before { transform: rotate(90deg); }
.mqp-socle-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
@media (max-width: 700px) {
  .mqp-cmp, .mqp-vide { padding: 16px 16px 6px; }
  .mqp-cmp .mpl-liste { margin: 0 -16px; }
  .mqp-cmp .mpl { padding-left: 13px; padding-right: 16px; }
}

/* ═════════════════════ Passe 7c · La marque : le socle ═════════════════════ */
/* Ce qui dure : les quatre piliers, le brief de plateforme, les décideurs, les
 * promos, le catalogue, les marchés, les campagnes, la vie. Chaque bloc est
 * une section blanche ; les champs suivent le motif des champs de dossier
 * (passe 3). Le même corps sert la page de marque et le portefeuille. */
.vn-b { display: grid; gap: 16px; }
.vn > .vn-b { margin: 10px 0 6px 26px; }
@media (max-width: 760px) { .vn > .vn-b { margin-left: 8px; } }
.vtb-piliers { display: grid; gap: 12px; }
.vtb-pil, .vtb-bp, .vtb-d, .vtb-p, .vtb-k, .vtb-m, .vtb-c, .vtb-vie {
  display: grid; gap: 10px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px;
  padding: 16px 22px; min-width: 0; }
.vtb-signe { color: var(--ton, var(--clair-terne)); }

/* Le titre d'un bloc : le nom, son compte, son geste à droite. */
.vtbk-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; }
.vtbk-t h3 { font: 550 17px/1.35 var(--affichage); color: var(--clair); }
.vtbk-t > span { font-size: 12px; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.vtbk-t > .b { margin-left: auto; }

/* Les piliers, repliés : on vient lire un état, pas parcourir un formulaire.
 * L'en-tête porte le compte et ce qu'on perd quand le pilier est muet. */
.vtb-pil { padding-top: 6px; padding-bottom: 6px; }
.vtb-pil > summary { cursor: pointer; list-style: none; padding: 8px 0; min-height: 44px; }
.vtb-pil > summary::-webkit-details-marker { display: none; }
.vtbp-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.vtbp-t b { font: 550 17px/1.35 var(--affichage); color: var(--clair); }
.vtbp-t b::before { content: "›"; display: inline-block; width: 14px; text-align: center; color: var(--clair-terne);
  transform-origin: 50% 55%; transition: transform var(--tr-rapide); }
.vtb-pil[open] > summary .vtbp-t b::before { transform: rotate(90deg); }
.vtbp-f { font-size: 12px; color: var(--clair-terne); }
.vtbp-t .droite { margin-left: auto; font-size: 12px; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.vtbp-q { margin-top: 4px; padding-left: 14px; font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
/* Muet : l'encre pâlit, jamais l'opacité — et le signe de l'attente le dit. */
.vtb-pil.muet { --ton: var(--arbitrage); border-left: 3px solid var(--ton); }
.vtb-pil.muet .vtbp-t b { color: var(--clair-doux); }
.vtb-pil[open] > summary { margin-bottom: 4px; }

/* Les champs : chaque champ est un bouton, et le champ vide se voit. */
.vtb-s { display: grid; border-top: 1px solid var(--trait); }
.vtc { display: grid; gap: 3px; width: calc(100% + 16px); margin: 0 -8px; padding: 12px 8px 12px 11px; min-height: 44px;
  text-align: left; color: inherit; font: inherit; background: none; border: 0; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--trait); cursor: pointer; }
.vtb-s .vtc:last-child { border-bottom: 0; }
.vtc:hover { background: var(--surface-4); }
.vtc-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: var(--clair-terne); }
.vtc-h { font-size: 11px; color: var(--clair-terne); }
.vtc-v { font-size: 14px; line-height: 1.55; color: var(--clair); max-width: 65ch; overflow-wrap: anywhere; }
.vtc.herite .vtc-v { color: var(--clair-doux); }
.vtc.vide { border-left-color: var(--arbitrage); }
.vtc.vide .vtc-v { color: var(--clair-terne); }
/* Dans un pilier muet, c'est le pilier qui porte le filet : le répéter sur
 * chacun de ses champs doublait la barre sans rien dire de plus. */
.vtb-pil.muet .vtc.vide { border-left-color: transparent; }
/* Depuis quand la valeur tient, et ce qu'elle a remplacé. */
.vtc-r { font-size: 11px; color: var(--clair-terne); }

/* Le brief de plateforme : le filet et le signe disent s'il est recevable. */
.vtb-bp { border-left: 3px solid var(--ton); }
.vtb-bp.ok { --ton: var(--succes); }
.vtb-bp.partiel { --ton: var(--arbitrage); }
.vtb-bp.absent { --ton: var(--bloquant); }

/* Qui décide, et les promos : des lignes. */
.vt-dec, .vt-pr, .vt-cp, .vt-arch { display: grid; border-top: 1px solid var(--trait); }
.vtd { --ton: transparent; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center;
  width: calc(100% + 16px); margin: 0 -8px; padding: 10px 8px 10px 11px; min-height: 48px; text-align: left;
  background: none; border: 0; border-left: 3px solid var(--ton); border-bottom: 1px solid var(--trait);
  cursor: pointer; color: inherit; font: inherit; }
.vtd:hover { background: var(--surface-4); }
.vtd.ici { --ton: var(--succes); }
.vtd-n { font: 550 14px var(--affichage); color: var(--clair); }
.vtd-r { grid-column: 1; font-size: 12px; color: var(--clair-terne); }
.vtd-x { grid-column: 2; grid-row: 1 / 3; font-size: 12px; color: var(--clair-terne); }
.vtb-x { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 70ch; }
.vtpr { --ton: transparent; display: grid; gap: 2px; padding: 10px 0 10px 11px; border-left: 3px solid var(--ton);
  border-bottom: 1px solid var(--trait); }
.vtpr.usage { --ton: var(--arbitrage); }
.vtpr-n { font: 550 14px var(--affichage); color: var(--clair); }
.vtpr-d, .vtpr-q, .vtpr-u { font-size: 12px; color: var(--clair-terne); }

/* Le catalogue : des tuiles blanches ; la fiche incomplète porte le filet. */
.vt-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 8px; }
.vtp { --ton: transparent; display: grid; align-content: start; gap: 2px; padding: 8px; text-align: left; cursor: pointer;
  color: inherit; font: inherit; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px;
  box-shadow: inset 3px 0 0 var(--ton); }
.vtp:hover { border-color: var(--trait-clair); }
.vtp:hover .vtp-n { color: var(--studio-bleu); }
.vtp.aq { --ton: var(--arbitrage); }
.vtp-v { display: block; width: 100%; height: 76px; overflow: hidden; }
.vtp-v img { width: 100%; height: 100%; object-fit: contain; }
.vtp-n { font: 550 13px var(--affichage); color: var(--clair); overflow-wrap: anywhere; }
.vtp-m, .vtp-x, .vtp-ok { font-size: 11px; color: var(--clair-terne); }
.vtp-ok { --ton: var(--succes); }
.vtb-a { display: grid; gap: 6px; margin-top: 8px; }
.vta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--trait); }
.vta-n { font-size: 13px; color: var(--clair-doux); }
/* « archivé le 12 septembre 2026 » ne tient pas dans une colonne étroite au
 * téléphone : la date porte des mots longs et sans point de coupe. */
.vta-m { grid-column: 1; font-size: 11px; color: var(--clair-terne); overflow-wrap: anywhere; }
.vta .b.nu { grid-column: 2; grid-row: 1 / 3; }

/* Ce qui se déplie dans un bloc : le catalogue, les campagnes au-delà de six. */
.vtk-l { display: grid; gap: 10px; }
.vtk-dt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; cursor: pointer;
  list-style: none; font: 550 13px var(--affichage); color: var(--studio-bleu); }
.vtk-dt::-webkit-details-marker { display: none; }
.vtk-dt::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 12px; transition: transform var(--tr-rapide); }
.vtk-d[open] > .vtk-dt { margin-bottom: 8px; }
.vtk-d[open] > .vtk-dt::before { transform: rotate(90deg); }
.vtk-dt span { font: 400 12px var(--affichage); color: var(--clair-terne); }

/* Les marchés : des puces à filet, le code à l'encre. */
.vt-mk { display: flex; flex-wrap: wrap; gap: 6px; }
.vtmk { display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 6px 10px;
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; font-size: 13px; color: var(--clair); }
.vtmk b { font-weight: 550; }
.vtmk i { font-style: normal; font-size: 11px; color: var(--clair-terne); }

/* Les campagnes qui s'en servent : des lignes, comme les projets. */
.vtcp { display: grid; gap: 2px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--trait); text-decoration: none; }
.vtcp:hover .vtcp-n { color: var(--studio-bleu); }
.vtcp-n { font: 550 14px var(--affichage); color: var(--clair); }
.vtcp-q { font-size: 12px; color: var(--clair-terne); }

/* La vie de la marque : repliée ; une ligne par acte, datée, attribuée. Le
 * filet dit la nature de l'acte ; on éteint par l'encre, pas par l'opacité. */
.vtb-vie > summary { cursor: pointer; list-style: none; min-height: 44px; }
.vtb-vie > summary::-webkit-details-marker { display: none; }
.vtb-vie > summary .vtbk-t h3::before { content: "›"; display: inline-block; width: 14px; text-align: center; color: var(--clair-terne);
  transform-origin: 50% 55%; transition: transform var(--tr-rapide); }
.vtb-vie[open] > summary .vtbk-t h3::before { transform: rotate(90deg); }
.vtb-vie.muet { --ton: var(--arbitrage); border-left: 3px solid var(--ton); }
.vie-l { display: grid; border-top: 1px solid var(--trait); }
.vie-a { --ton: transparent; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 2px 14px; align-items: baseline;
  padding: 10px 0 10px 11px; border-left: 3px solid var(--ton); border-bottom: 1px solid var(--trait); }
.vie-a.vert { --ton: var(--succes); }
.vie-a.attente { --ton: var(--arbitrage); }
.viea-d { font-size: 11px; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.viea-q { font-size: 13px; color: var(--clair); }
.vie-a.terne .viea-q { color: var(--clair-doux); }
.viea-p { margin-left: 8px; font-size: 11px; color: var(--clair-terne); }
.viea-x { grid-column: 2; font-size: 12px; color: var(--clair-terne); overflow-wrap: anywhere; }
.vie-reste { margin-top: 8px; font-size: 12px; color: var(--clair-terne); }
@media (max-width: 700px) {
  .vtb-pil, .vtb-bp, .vtb-d, .vtb-p, .vtb-k, .vtb-m, .vtb-c, .vtb-vie { padding: 14px 16px; }
  .vie-a { grid-template-columns: minmax(0, 1fr); }
  .viea-x { grid-column: 1; }
}

/* ═════════════════════ Passe 8 · La campagne ═════════════════════ */
/* L'étage où une campagne se compose : la piste qui gouverne les frères, ce que
 * l'occasion appelle, et les projets avec leur chaînage. Préfixe `cg-` : `cmp-`
 * est la grille de comparaison des pistes (passe 4c). */
.cg-piste, .cg-bloc { background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px;
  padding: 18px 22px; margin-bottom: 16px; min-width: 0; }
.cg-piste.f-attente, .cg-bloc.f-attente { border-left: 3px solid var(--ton); }
/* Les versions arrêtées du bilan : la plus récente en tête, le texte déplié à la demande. */
.cg-versions { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.cg-versions summary { cursor: pointer; font-size: 13px; overflow-wrap: anywhere; }
.cg-l { font-size: 11px; color: var(--clair-terne); }
.cg-signe { color: var(--ton, var(--clair-terne)); }
/* Le titre de la piste, écrit par quelqu'un : l'aplat d'intention. */
.cg-titre { display: inline-block; margin-top: 8px; padding: 8px 12px; border-radius: 5px; background: var(--studio-intention);
  font: 500 19px/1.35 var(--affichage); color: var(--studio-encre); overflow-wrap: anywhere; }
.cg-q { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.cg-bloc .cg-q { margin: 0 0 12px; }
.cg-l + .cg-q { margin-top: 6px; }
.cg-liste { display: grid; }
.cg-c { --ton: transparent; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 56px;
  padding: 8px 0 8px 11px; border-left: 3px solid var(--ton); border-top: 1px solid var(--trait); }
.cg-c.f-attente { --ton: var(--arbitrage); }
.cg-c.ouvert { --ton: transparent; }
.cg-c.ouvert .cg-signe { color: var(--succes); }
.cg-n { flex: 1 1 15rem; min-width: 0; display: grid; gap: 2px; font: 550 14px var(--affichage); color: var(--clair); }
.cg-nq { font: 400 12px/1.5 var(--affichage); color: var(--clair-terne); overflow-wrap: anywhere; }
.cg-c.ecarte .cg-n { font-weight: 500; color: var(--clair-doux); }
.cg-e { flex: 0 1 auto; font-size: 12px; color: var(--clair-terne); overflow-wrap: anywhere; }
.cg-e a { color: var(--studio-bleu); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.cg-g { flex: 0 0 auto; margin-left: auto; display: flex; gap: 4px; }
/* Le chaînage se déclare là où l'on voit les frères ensemble. */
.cg-pr { --ton: transparent; border-bottom: 1px solid var(--trait); }
.cg-pr .mpl { border-bottom: 0; }
.cg-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 0 14px 12px 14px; }
/* Le sélecteur prend la largeur qu'on lui laisse : fixé à 22 rem, il poussait
 * la page hors de l'écran au téléphone. */
.cg-ch select { width: 100%; max-width: 24rem; min-width: 0; min-height: 44px; padding: 6px 28px 6px 10px;
  font: 13px var(--affichage); color: var(--clair); background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.cg-pr.f-attente { --ton: var(--arbitrage); }
.cg-cha { font-size: 12px; color: var(--clair-terne); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .cg-piste, .cg-bloc { padding: 16px; }
  .cg-g { margin-left: 0; width: 100%; }
}

/* ═════════════════════ Passe 9a · Planning : priorités et plan de charge ═════════════════════ */
/* Les cinq chiffres : une section blanche de cellules. Le nombre reste à
 * l'encre ; l'état se dit par le filet haut et le signe. */
.pp-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--surface-1);
  border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.pp-s { --ton: transparent; display: grid; align-content: start; gap: 2px; padding: 14px 16px; border-top: 3px solid var(--ton);
  box-shadow: inset -1px 0 0 var(--trait); }
.pp-s.t-alerte { --ton: var(--bloquant); }
.pp-s.t-attente { --ton: var(--arbitrage); }
.pp-s.t-vert { --ton: var(--succes); }
.pp-s b { font: 550 28px/1.1 var(--affichage); letter-spacing: -.03em; color: var(--clair); font-variant-numeric: tabular-nums; }
.pps-t { font-size: 13px; color: var(--clair); }
.pps-s { font-size: 12px; line-height: 1.45; color: var(--clair-terne); }
.pp-signe { color: var(--ton, var(--clair-terne)); }
.pp-signe.t-alerte { color: var(--bloquant); }

.pp { display: grid; gap: 20px; }
.pp-titre { display: grid; gap: 6px; }
.pp-titre h2 { font: 550 24px/1.25 var(--affichage); letter-spacing: -.03em; color: var(--clair); text-wrap: balance; }
.pp-titre p { font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }

/* La balance : deux plateaux qui se font face, dont la hauteur est le temps
 * consommé — le déséquilibre se voit avant de se lire. Le côté porte sa
 * couleur par le filet, jamais par un aplat. */
.pp-bal { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 24px; align-items: end;
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; padding: 20px 22px; }
.pp-axe { align-self: stretch; background: var(--trait); }
.pp-c { display: grid; gap: 8px; align-content: end; min-width: 0; }
.pp-c.vendu { --ton: var(--succes); }
.pp-c.parie { --ton: var(--arbitrage); }
.ppc-t { font: 550 17px var(--affichage); color: var(--clair); }
.ppc-p { display: grid; gap: 6px; align-content: end; }
.pp-b { display: grid; gap: 2px; align-content: start; padding: 10px 12px; overflow: hidden; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.pp-b.creux { border-style: dashed; border-left: 3px dashed var(--trait-clair); }
.ppb-n { font: 550 14px var(--affichage); color: var(--clair); }
.ppb-c { font-size: 12px; color: var(--clair-terne); }
.ppb-v { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.ppb-v .vignette { width: 34px; height: 22px; border-radius: 2px; }
.ppc-s { font-size: 12px; color: var(--clair-terne); }

.pp-d, .pp-conflit, .pp-mur { display: grid; gap: 10px; background: var(--surface-1); border: 1px solid var(--trait);
  border-radius: 10px; padding: 18px 22px; }
.pp-d h3, .pp-conflit h3, .ppm-t { font: 550 17px var(--affichage); color: var(--clair); }
.pp-d p { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 65ch; }
.pp-conflit { border-left: 3px solid var(--ton); }
.ppc-l { display: flex; gap: 10px; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--trait); }
.ppcl-n { font-size: 14px; line-height: 1.5; color: var(--clair); }
.ppcl-d { font-size: 12px; color: var(--clair-terne); }
.ppc-r { font-size: 12px; color: var(--clair-terne); }

/* Le mur : les images SONT le contenu. Ce qui va tomber passe devant et plus
 * grand ; ce qui tient descend. Le risque se dit par le filet sous l'image. */
.ppm-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ppm-t span:not(.pp-signe) { font: 400 12px var(--affichage); color: var(--clair-terne); }
.ppm-l { display: grid; gap: 14px; }
.ppm-l.chaud { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ppm-l.calme { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.ppm-p { --ton: var(--trait); display: grid; gap: 3px; min-width: 0; padding: 0; text-align: left; cursor: pointer;
  color: var(--clair); font: inherit; background: none; border: 0; }
.ppm-p.chaud { --ton: var(--bloquant); }
.ppm-p .vignette { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; border-bottom: 3px solid var(--ton); }
.ppm-p:hover .vignette { box-shadow: 0 0 0 2px var(--studio-bleu); }
.ppmp-n { font: 550 13px/1.4 var(--affichage); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppm-l.chaud .ppmp-n { font-size: 14px; }
.ppmp-c { font-size: 12px; color: var(--clair-terne); }
.ppmp-q { font-size: 11px; color: var(--clair-terne); }
@media (max-width: 900px) {
  .pp-bal { grid-template-columns: minmax(0, 1fr); }
  .pp-axe { display: none; }
}
@media (max-width: 700px) {
  .pp-bal, .pp-d, .pp-conflit, .pp-mur { padding: 16px; }
  .pp-titre h2 { font-size: 21px; }
}

/* ═════════════════════ Passe 9b · Planning : l'équipe ═════════════════════ */
/* La semaine, puis ce que je dirige, puis ce qui s'impose. Trois sections
 * blanches ; les blocs de la semaine perdent leurs aplats rouge et ambre
 * (texte sombre dessus : 1,55:1) pour un filet et l'encre. */
.cmd-file { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--clair-terne); }
.cmd-rien, .cc-rien { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; color: var(--clair-terne); }
.cmd-corps { display: block; }
.sm-signe { color: var(--ton, var(--bloquant)); }

.sm, .cmd-centre, .bande-eng { display: grid; gap: 14px; background: var(--surface-1); border: 1px solid var(--trait);
  border-radius: 10px; padding: 20px 22px; margin-bottom: 16px; min-width: 0; }
.sm-t { display: grid; gap: 6px; }
.sm-t h2, .cc-tete h2, .bande-eng h2 { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.bande-eng h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.bande-eng h2 span { font: 400 12px var(--affichage); letter-spacing: 0; color: var(--clair-terne); }
.sm-t p { font-size: 13px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }

/* Cinq jours en colonnes, une personne par ligne, la ligne de capacité. */
.sm-g { display: grid; }
.smg-h { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--trait); }
.smgh-l { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.smgh-j { font-size: 11px; color: var(--clair-terne); }
.smgh-j.auj { color: var(--studio-bleu); font-weight: 550; }
.sm-r { --ton: transparent; display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 6px 14px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--trait); border-left: 3px solid var(--ton); }
.sm-r.mur { --ton: var(--bloquant); }
.smr-q { display: flex; gap: 10px; align-items: flex-start; padding-left: 8px; min-width: 0; }
.smrq-n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 550 14px var(--affichage); color: var(--clair); }
.smrq-p, .smrq-c { font-size: 12px; color: var(--clair-terne); }
.smr-j { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-height: 46px; align-content: start; }
.smr-c { display: flex; flex-direction: column; gap: 3px; align-content: start; min-height: 46px; padding-left: 5px; border-left: 1px solid var(--trait); }
.smr-c.auj { border-left-color: var(--studio-bleu); }
.smr-b { --ton: var(--arbitrage); position: relative; display: block; min-height: 28px; padding: 5px 6px 5px 8px; overflow: hidden;
  text-align: left; cursor: pointer; font: 500 11px/1.3 var(--affichage); color: var(--clair);
  background: var(--surface-4); border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 4px; }
.smr-b.retard { --ton: var(--bloquant); }
.smr-b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); min-height: 44px; }
.smr-b:hover { border-color: var(--trait-clair); border-left-color: var(--ton); }
.smr-b span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smr-plus { order: 9; font-size: 11px; color: var(--clair-terne); padding: 2px 0 0 2px; }
.smr-rien { grid-column: 1 / -1; align-self: center; font-size: 12px; color: var(--clair-terne); }
.smr-mur { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--clair-terne); pointer-events: none; }
.smr-mur span { position: absolute; top: -14px; left: 3px; font-size: 10px; line-height: 1; color: var(--clair-terne); }
.smr-t { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--clair-terne); }
.smr-t.alerte { --ton: var(--bloquant); }
.smr-x { --ton: var(--bloquant); }
.sm-vides { border-top: 1px solid var(--trait); }
.bande-eng .sm-vides { border-top: 0; }
.smv-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 48px; cursor: pointer; list-style: none;
  font: 550 13px var(--affichage); color: var(--studio-bleu); }
.smv-t::-webkit-details-marker { display: none; }
.smv-t::before { content: "›"; color: var(--clair-terne); font-size: 16px; width: 12px; transition: transform var(--tr-rapide); }
.sm-vides[open] > .smv-t::before { transform: rotate(90deg); }
.smv-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.sm-d { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--trait); }
.sm-d h3 { font: 550 17px var(--affichage); color: var(--clair); }
.sm-d p { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 65ch; }

/* Ce que je dirige : des cartes qui portent les trois décisions. */
.cc-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.cc-compte { margin-left: auto; font-size: 12px; color: var(--clair-terne); }
.cc-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-content: start; }
.cc-plus { justify-self: start; }
.piece-c { display: grid; overflow: hidden; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.piece-c.choisie { border-color: var(--studio-bleu); box-shadow: inset 0 0 0 1px var(--studio-bleu); }
.piece-c.attend { box-shadow: inset 3px 0 0 var(--violet); }
.pc-visuel { position: relative; display: block; padding: 0; cursor: pointer; background: none; border: 0; }
.pc-visuel .vignette { height: 96px; border: 0; border-bottom: 1px solid var(--trait); }
.pc-bat { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.pc-coche { position: absolute; top: 5px; left: 5px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 4px; background: var(--studio-bleu); color: var(--surface-1); font-size: 11px; }
.pc-nom { padding: 8px 10px 6px; font: 550 12px/1.35 var(--affichage); color: var(--clair); overflow-wrap: anywhere; }
.pc-cmd { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--trait); }
.cmd-b { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 36px;
  padding: 4px; cursor: pointer; background: var(--surface-1); border: 0; box-shadow: inset -1px 0 0 var(--trait);
  font: 500 12px var(--affichage); color: var(--clair); }
.cmd-b:last-child { box-shadow: none; }
.cmd-b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); min-height: 44px; }
.cmd-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-b:hover { background: var(--surface-4); }
.cmd-b.manque { color: var(--clair-terne); }
.cmd-b.manque span::before { content: "◐ "; color: var(--arbitrage); }
.pc-select { position: relative; min-height: 32px; padding: 4px; cursor: pointer; background: none; border: 0; border-top: 1px solid var(--trait);
  font: 500 12px var(--affichage); color: var(--clair-terne); }
.pc-select::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); min-height: 44px; }
.pc-select:hover { color: var(--studio-bleu); }

/* Ce qui s'impose : une pastille par dossier ouvert, l'intenable devant. */
.be-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.eng { --ton: var(--trait-clair); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 44px; padding: 8px 12px;
  cursor: pointer; text-align: left; font: inherit; color: var(--clair); background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.eng:hover { border-color: var(--trait-clair); border-left-color: var(--ton); }
.eng.tenable { --ton: var(--succes); }
.eng.intenable { --ton: var(--bloquant); }
.eng.inconnu { --ton: var(--arbitrage); }
.e-nom { font: 550 13px var(--affichage); }
.e-date, .e-charge, .e-inconnu, .e-manque { font-size: 12px; color: var(--clair-terne); font-variant-numeric: tabular-nums; }

/* Les gestes sur une sélection. */
.zone-gestes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; background: var(--surface-1);
  border: 1px solid var(--studio-bleu); border-radius: 10px; }
.zone-gestes.repos { border-color: var(--trait); }
.g-selection { display: flex; align-items: baseline; gap: 6px; }
.g-selection b { font: 550 21px var(--affichage); color: var(--studio-bleu); }
.g-selection span { font-size: 12px; color: var(--clair-terne); }
.g-verbes { display: flex; flex-wrap: wrap; gap: 6px; }
.verbe { min-height: 44px; padding: 0 14px; cursor: pointer; font: 500 14px var(--affichage); color: var(--clair);
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.verbe:hover { border-color: var(--studio-bleu); color: var(--studio-bleu); }
.filtres-l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.filtres-l .f-t, .f-aide { font-size: 12px; color: var(--clair-terne); }
.sousbloc-q { font-size: 13px; color: var(--clair-terne); margin-bottom: 8px; }
@media (max-width: 900px) {
  .smg-h { display: none; }
  .sm-r { grid-template-columns: minmax(0, 1fr); }
  .smr-t { grid-column: 1; }
  /* Empilée, la ligne de capacité passe sous le portrait : son étiquette le
   * chevauchait. Le pointillé suffit. */
  .smr-mur span { display: none; }
}
@media (max-width: 700px) {
  .sm, .cmd-centre, .bande-eng { padding: 16px; }
  .smr-j { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
}

/* ═════════════════════ Passe 9c · Planning : les livraisons ═════════════════════ */
/* Ce qui remplace le tableur. Une ligne se lit de gauche à droite dans l'ordre
 * du contrat : l'état, ce dont il s'agit, qui le porte, et le geste — à droite,
 * parce qu'on y arrive après avoir lu. Pas de damier : un filet par ligne. */
/* Une piste bornée : sans elle, le sélecteur imposait la largeur de son plus
 * long nom de dossier à toute la grille, et la page débordait au téléphone. */
.liv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.liv-filtres { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.liv-deg { display: flex; flex-wrap: wrap; gap: 6px; }
.liv-p { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.liv-p label { font-size: 12px; color: var(--clair-terne); }
.liv-p select { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 22rem; min-height: 44px; padding: 6px 28px 6px 10px;
  font: 13px var(--affichage); color: var(--clair); background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.liv-liste { display: grid; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; padding: 4px 0; }
.livl { --ton: var(--arbitrage); display: grid; grid-template-columns: 9rem minmax(0, 1fr) 11rem auto; gap: 6px 16px; align-items: start;
  padding: 14px 20px 14px 17px; border-left: 3px solid var(--ton); border-bottom: 1px solid var(--trait); }
.livl:last-child { border-bottom: 0; }
.livl.alerte { --ton: var(--bloquant); }
/* Plus clair, jamais plus sombre : le survol ne fait perdre aucun contraste. */
.livl:hover { background: var(--surface-4); }
.livl-e { display: grid; gap: 2px; }
.livl-deg { font: 550 12px var(--affichage); color: var(--clair); }
.livl-signe { color: var(--ton); }
.livl-j { font-size: 11px; color: var(--clair-terne); }
.livl-c { display: grid; gap: 2px; min-width: 0; }
.livl-n { font: 550 14px/1.4 var(--affichage); color: var(--clair); overflow-wrap: anywhere; }
.livl-m, .livl-q { font-size: 12px; color: var(--clair-terne); overflow-wrap: anywhere; }
.livl-f { font-size: 12px; color: var(--clair); overflow-wrap: anywhere; }
.livl-fe { margin-right: 6px; font-size: 11px; color: var(--clair-terne); }
.livl-qui { display: grid; gap: 2px; }
.livl-p { font-size: 13px; color: var(--clair); }
.livl-d { font-size: 12px; color: var(--clair-terne); }
.livl-p.sans, .livl-d.sans { font-size: 12px; color: var(--clair-terne); }
.livl-g { display: flex; align-items: center; gap: 6px; }
.liv-plus { justify-self: start; }
@media (max-width: 900px) {
  .livl { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 12px 13px; }
}
@media print {
  .liv-filtres, .livl-g, .liv-plus { display: none; }
  .livl:hover { background: transparent; }
}

/* ═════════════════════ Passe 10a · Bilan : indicateurs et reprises ═════════════════════ */
/* Six chiffres de même taille, c'est six chiffres qu'on ne lit pas. Celui qui
 * décroche prend l'écran avec sa cause et son geste ; les cinq autres restent
 * lisibles sans rien réclamer. Le nombre reste à l'encre : l'état se dit par le
 * filet et le signe. Préfixe `sd-` : `.stc` est la fiche de structure de deck. */
.sd-signe { color: var(--ton, var(--clair-terne)); }
.sd-gros { --ton: var(--trait-clair); display: grid; gap: 8px; max-width: 70rem; padding: 22px 24px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.sd-gros.ko { --ton: var(--bloquant); }
.sd-gros.ok { --ton: var(--succes); }
.sdg-r { font-size: 12px; color: var(--clair-terne); }
.sdg-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.sdg-v { font: 600 clamp(36px, 4vw, 52px)/1 var(--affichage); letter-spacing: -.05em; color: var(--clair); font-variant-numeric: tabular-nums; }
.sd-gros.creux .sdg-v { color: var(--clair-terne); }
.sdg-n { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.sdg-q { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 65ch; }
.sdg-p { display: grid; gap: 2px; margin-top: 6px; }
.sdg-p span { font-size: 11px; color: var(--clair-terne); }
.sdg-p p { font-size: 13px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.sdg-g { margin-top: 6px; }
.sd-cinq { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: 16px; background: var(--surface-1);
  border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.sd-c { --ton: transparent; display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-top: 3px solid var(--ton);
  box-shadow: inset -1px 0 0 var(--trait); }
.sd-c.ko { --ton: var(--bloquant); }
.sdc-v { font: 550 24px/1.1 var(--affichage); letter-spacing: -.03em; color: var(--clair); font-variant-numeric: tabular-nums; }
.sd-c.creux .sdc-v { color: var(--clair-terne); }
.sdc-n { font-size: 13px; color: var(--clair); }
.sdc-q { font-size: 12px; line-height: 1.45; color: var(--clair-terne); }
.sd-cibles { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; font-size: 12px; color: var(--clair-terne); }

/* La ventilation par compte et par marché : une barre dit l'écart mieux
 * qu'une colonne de pourcentages. */
.cs-bloc { display: grid; gap: 10px; margin-top: 16px; padding: 18px 22px; background: var(--surface-1);
  border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.csb-t { font: 550 17px var(--affichage); color: var(--clair); }
.cs-v { display: grid; gap: 2px; }
.cs-l { --ton: var(--bloquant); display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 32px; }
.csl-n { font-size: 13px; color: var(--clair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csl-b { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.csl-b i { display: block; height: 100%; background: var(--clair-terne); }
.csl-c { font-size: 12px; color: var(--clair-terne); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Le grand livre des reprises : une asymétrie, ce que l'agence a payé contre ce
 * qu'elle a refacturé. Les barres gardent leur couleur (elles sont la donnée),
 * mais le chiffre sort de la barre : écrit dessus, il tombait à 1,55:1. */
.gl { display: grid; gap: 20px; }
.gl-t { display: grid; gap: 4px; }
.glt-c { font: 600 clamp(32px, 3.6vw, 48px)/1.05 var(--affichage); letter-spacing: -.05em; color: var(--clair); }
.glt-m { font: 550 21px var(--affichage); color: var(--clair); }
.gl-t p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.gl-h { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 1px minmax(0, 1fr); gap: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--trait); }
.glh-a, .glh-f { font-size: 12px; color: var(--clair-terne); }
.glh-a { grid-column: 2; text-align: right; }
.glh-f { grid-column: 4; }
.gl-l { display: grid; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; padding: 0 20px; }
.gl-r { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 1px minmax(0, 1fr); gap: 6px 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--trait); }
.gl-r:last-child { border-bottom: 0; }
.glr-q { display: flex; gap: 10px; align-items: center; min-width: 0; }
.glrq-n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 550 14px var(--affichage); color: var(--clair); }
.glrq-p { font-size: 12px; color: var(--clair-terne); }
.glr-a { display: flex; justify-content: flex-end; gap: 3px; }
.glr-f { display: flex; gap: 3px; }
.glr-x { align-self: stretch; background: var(--trait); }
.glr-b { display: flex; align-items: flex-end; flex-direction: column; justify-content: center; gap: 3px; min-width: 3.2rem; }
.glr-b::before { content: ""; display: block; width: 100%; height: 10px; border-radius: 3px; background: var(--ton); }
.glr-b b { font: 550 12px var(--affichage); color: var(--clair); }
.glr-b.abs { --ton: var(--bloquant); }
.glr-b.att { --ton: var(--arbitrage); }
.glr-b.fac { --ton: var(--succes); align-items: flex-start; }
.glr-rien { font-size: 12px; color: var(--clair-terne); }
.glr-d { grid-column: 2 / -1; display: grid; gap: 3px; margin-top: 4px; }
.glrd { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.glrd-d, .glrd-n { font-size: 11px; color: var(--clair-terne); white-space: nowrap; }
.glrd-t { font-size: 13px; color: var(--clair); overflow-wrap: anywhere; }
.gl-g { --ton: var(--arbitrage); display: grid; gap: 8px; max-width: 70rem; padding: 18px 22px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.glg-t { font: 550 17px var(--affichage); color: var(--clair); }
.gl-g p { font-size: 14px; line-height: 1.6; color: var(--clair); max-width: 65ch; }
@media (max-width: 1000px) {
  .gl-h { display: none; }
  .gl-r { grid-template-columns: minmax(0, 1fr); }
  .glr-x { display: none; }
  .glr-a { justify-content: flex-start; }
  .glr-b, .glr-b.fac { align-items: flex-start; }
  .glr-d { grid-column: 1; }
}
@media (max-width: 700px) {
  .cs-l { grid-template-columns: minmax(0, 1fr) auto; }
  .csl-b { grid-column: 1 / -1; }
  .glrd { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sd-gros, .cs-bloc, .gl-g { padding: 16px; }
  .gl-l { padding: 0 16px; }
}

/* ═════════════════════ Passe 10b · Bilan : l'évaluation ═════════════════════ */
/* Un tableau à colonnes alignées répond d'un regard à la seule question qui
 * compte : qui n'a jamais eu sa chance. Fermée, une ligne ne montre que ce qui
 * appelle une action ; ouverte, la matière de l'entretien. */
.eq { display: grid; gap: 16px; }
.eq-signe { color: var(--ton, var(--clair-terne)); }
.eqt { display: grid; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 0; min-width: 0; }
.eqt-h { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 6.5rem); gap: 14px; padding: 6px 20px 8px; border-bottom: 1px solid var(--trait); }
.eqth-p, .eqth-c { font-size: 11px; color: var(--clair-terne); }
.eqth-c { text-align: right; }
.eqt-l { display: grid; }
.eqt-r { --ton: transparent; border-bottom: 1px solid var(--trait); border-left: 3px solid var(--ton); }
.eqt-r:last-child { border-bottom: 0; }
.eqt-r.manque { --ton: var(--arbitrage); }
.eqt-r.ici { background: var(--surface-4); }
.eqtr-c { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 6.5rem); gap: 14px; align-items: center; width: 100%;
  min-height: 56px; padding: 10px 20px 10px 17px; text-align: left; cursor: pointer; font: inherit; color: var(--clair); background: none; border: 0; }
.eqtr-c:hover { background: var(--surface-4); }
.eqtr-p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eqtr-n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 550 14px var(--affichage); }
.eqtr-q { display: block; font-size: 12px; color: var(--clair-terne); }
.eqtr-v { text-align: right; font: 550 17px/1.1 var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.eqtr-v.t-vert { --ton: var(--succes); }
.eqtr-v.t-alerte { --ton: var(--bloquant); }
.eqtr-v.t-attente { --ton: var(--arbitrage); }
.eqtr-m { padding: 0 20px 12px calc(17px + 32px + 10px); font-size: 13px; color: var(--clair); max-width: 80ch; }
.eqt-r.manque .eqtr-m { --ton: var(--arbitrage); }
@media (max-width: 1000px) {
  .eqt-h { display: none; }
  .eqtr-c { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); row-gap: 8px; }
  .eqtr-p { grid-column: 1 / -1; }
  .eqtr-v { text-align: left; }
  .eqtr-v::before { content: attr(data-col); display: block; margin-bottom: 2px; font: 400 11px var(--affichage); color: var(--clair-terne); }
  .eqtr-m { padding-left: 17px; }
}

/* Ouvert. */
.eqp-detail { display: grid; gap: 18px; padding: 6px 20px 18px 17px; }
.eqd-bloc { display: grid; gap: 8px; }
.eqdb-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 36px; padding-bottom: 4px;
  border-bottom: 1px solid var(--trait); font: 550 15px var(--affichage); color: var(--clair); }
.eqdb-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.eqdb-t button { margin-left: auto; }
.eqd-charge { display: grid; gap: 4px; }
.eqdc-b { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.eqdc-b i { display: block; height: 100%; background: var(--clair-terne); }
.eqdc-t { font-size: 12px; color: var(--clair-terne); }
.eqd-cums, .eqd-engs, .eqd-prod, .eqd-crits { display: grid; gap: 4px; }
.eqd-cum, .eqd-eng, .eqd-pr, .eqd-cr { --ton: var(--trait-clair); padding: 6px 10px; border-left: 3px solid var(--ton); font-size: 13px; color: var(--clair); }
.eqd-cum { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 12px; }
.eqd-cum.echue, .eqd-cum.sansPart { --ton: var(--bloquant); }
.eqd-cum.sansEcheance { --ton: var(--arbitrage); }
.eqdc-q { font-size: 12px; color: var(--clair-terne); }
.eqd-ctrl { font-size: 12px; color: var(--clair-terne); }
.eqd-eng { --ton: var(--succes); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 13rem) auto; gap: 12px; align-items: center; }
.eqd-eng.retard { --ton: var(--bloquant); }
.eqd-eng.jamais { --ton: var(--arbitrage); }
.eqde-r, .eqde-t { font-size: 12px; color: var(--clair-terne); }
.eqd-pr { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.eqd-pr.retenu { --ton: var(--succes); }
.eqdp-t, .eqdp-e { font-size: 12px; color: var(--clair-terne); }
.eqdp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqd-cr { display: grid; gap: 2px; }
.eqd-cr.retenu { --ton: var(--succes); }
.eqd-cr.ecarte { --ton: var(--info); }
.eqdc-h { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--clair-terne); }
.eqdc-m { font-size: 13px; line-height: 1.5; color: var(--clair-terne); max-width: 65ch; }
@media (max-width: 820px) {
  .eqd-eng, .eqd-cum, .eqd-pr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Ce qui est tracé, et ce qui ne l'est pas : « 0 soumis » lu sans contexte
 * accuse une personne d'un défaut d'outil. Le contexte vient avant le chiffre. */
.trc-p { --ton: var(--trait-clair); display: grid; gap: 4px; padding-left: 10px; border-left: 3px solid var(--ton); }
.trc-p.vert { --ton: var(--succes); }
.trc-p.attente { --ton: var(--arbitrage); }
.trc-p.alerte { --ton: var(--bloquant); }
.trc-p b { font: 550 14px var(--affichage); color: var(--clair); }
.trc-p span { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 65ch; }
.trc-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.trc-c { --ton: var(--trait); display: grid; gap: 2px; padding-top: 6px; border-top: 3px solid var(--ton); }
.trc-c.vert { --ton: var(--succes); }
.trc-c.attente { --ton: var(--arbitrage); }
.trc-c.alerte { --ton: var(--bloquant); }
.trcc-v { font: 550 21px/1.1 var(--affichage); color: var(--clair); font-variant-numeric: tabular-nums; }
.trcc-n { font-size: 13px; color: var(--clair); }
.trcc-q { font-size: 12px; color: var(--clair-terne); }
/* L'étiquette de trace, partout où un livrable dit s'il est tracé. */
.trc { --ton: var(--clair-terne); display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--trait);
  border-radius: 4px; font: 500 11px var(--affichage); color: var(--clair); }
.trc::before { content: "●"; font-size: 8px; color: var(--ton); }
.trc.attente { --ton: var(--arbitrage); }
.trc.alerte { --ton: var(--bloquant); }
.trc.vert { --ton: var(--succes); }

/* ═════════════════════ Passe 10c · Bilan : la fin de mois ═════════════════════ */
.fm { display: grid; gap: 16px; }
.fm-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.fmb-q { display: flex; align-items: center; gap: 8px; }
.fmb-q label { font-size: 12px; color: var(--clair-terne); }
.fmb-q select { min-height: 44px; padding: 6px 28px 6px 10px; font: 13px var(--affichage); color: var(--clair);
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.fmb-g { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 700px) { .fmb-g { margin-left: 0; width: 100%; } }
/* Ce qui sert à décider quoi imprimer ne s'imprime pas : la bande de
 * recevabilité, les modes, la barre de période. Reste la feuille. */
@media print {
  .fm-barre, .st-modes, .dc-tete, .dc-modes { display: none !important; }
  .fm { gap: 0; }
}

/* ═════════════════════ Passe 10d · Bilan : les arbitrages ═════════════════════ */
/* Ce qui demande à devenir un critère passe devant — le seul endroit du produit
 * où le référentiel se complète tout seul ; le corpus vient après, en matière de
 * consultation ; le fil, sur demande. */
.ju { display: grid; gap: 16px; }
.ju-e, .ju-c { display: grid; gap: 12px; padding: 20px 22px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.jue-t { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.ju-liste { display: grid; gap: 8px; }
.jum { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 65ch; }
/* Un groupe de motifs qui appelle un critère. */
.ju-g { --ton: var(--arbitrage); display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.jug-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.jug-m { font: 550 14px var(--affichage); color: var(--clair); }
.jug-n { font-size: 12px; color: var(--clair-terne); }
.jug-t button, .jug-d { margin-left: auto; }
.jug-d { font-size: 12px; color: var(--clair-terne); }
.jug-d::before { content: "✓ "; color: var(--succes); }
.jug-e { font-size: 13px; line-height: 1.5; color: var(--clair-terne); max-width: 65ch; }
.jug-cas { display: grid; gap: 4px; }
.jug-c { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.jugc-d { font-size: 11px; color: var(--clair-terne); }
.jugc-m { font-size: 13px; line-height: 1.5; color: var(--clair); max-width: 65ch; }
.ju-rappel { display: grid; gap: 4px; margin: 10px 0; }
/* Un critère : ce qu'il dit, combien de fois il a servi, et si la ligne tient. */
.ju-cr { --ton: transparent; border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.ju-cr.ici { background: var(--surface-4); }
.ju-cr.eclate { --ton: var(--bloquant); }
.jucr-t { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; width: 100%;
  min-height: 44px; padding: 10px 14px 4px; text-align: left; cursor: pointer; font: inherit; color: var(--clair); background: none; border: 0; }
.jucr-t:hover .jucr-n { color: var(--studio-bleu); }
.jucr-f, .jucr-c, .jucr-e { font-size: 12px; color: var(--clair-terne); white-space: nowrap; }
.jucr-n { font: 550 14px/1.4 var(--affichage); }
.jucr-q { padding: 0 14px 10px calc(14px + 7rem + 12px); font-size: 12px; line-height: 1.5; color: var(--clair-terne); max-width: 90ch; }
.ju-cr.eclate .jucr-q::before { content: "● "; color: var(--bloquant); }
.jucr-cas { display: grid; gap: 8px; padding: 10px 14px 12px calc(14px + 7rem + 12px); border-top: 1px solid var(--trait); }
.ju-cas { display: grid; gap: 2px; }
.jucas-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--clair-terne); }
.jucas-p { display: inline-flex; align-items: center; min-height: 32px; color: var(--studio-bleu); text-decoration: none; }
.jucas-v { color: var(--clair); }
.jucas-v.v-approuve .v-signe { color: var(--succes); }
.jucas-v.v-reserve .v-signe, .jucas-v.v-retour .v-signe { color: var(--arbitrage); }
.jucas-v.v-hors .v-signe { color: var(--bloquant); }
.jucas-o { font-size: 13px; color: var(--clair); }
.jucas-m { font-size: 13px; line-height: 1.5; color: var(--clair-terne); max-width: 65ch; }
.jucas-a { font-size: 12px; color: var(--clair-terne); }
.jucas-a.atteste { color: var(--vert); }
/* Les critères jamais invoqués : un inventaire, pas une alerte. */
.ju-jamais { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--trait); }
.jub-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font: 550 15px var(--affichage); color: var(--clair); }
.jub-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.ju-jl { display: flex; flex-wrap: wrap; gap: 6px; }
.juj { padding: 3px 8px; border: 1px solid var(--trait); border-radius: 5px; font-size: 12px; color: var(--clair); }
/* Le fil. */
.ju-fil { display: grid; gap: 12px; justify-items: start; }
.ju-f { display: grid; gap: 12px; width: 100%; }
.ju-rech { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ju-rech input { flex: 1 1 16rem; max-width: 32rem; min-height: 44px; padding: 6px 12px; font: 14px var(--affichage); color: var(--clair);
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.ju-rech span { font-size: 12px; color: var(--clair-terne); white-space: nowrap; }
.ju-fc { --ton: var(--trait-clair); display: grid; gap: 4px; padding: 10px 14px; background: var(--surface-1); border: 1px solid var(--trait);
  border-left: 3px solid var(--ton); border-radius: 6px; }
.ju-fc.sur { --ton: var(--succes); }
.jufc-c { font-size: 12px; color: var(--clair-terne); }
@media (max-width: 820px) {
  .jucr-t { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .jucr-f { grid-column: 1 / -1; }
  .jucr-q, .jucr-cas { padding-left: 14px; }
  .jug-c { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 700px) { .ju-e, .ju-c { padding: 16px; } }

/* ═════════════════════ Passe 11a · Ressources : le portefeuille ═════════════════════ */
/* Trois niveaux — l'ombrelle, la marque, la gamme. L'indentation dit la
 * descendance ; un champ hérité porte le nom de celui dont il vient. Une
 * ombrelle sans dossier ouvert replie ses marques sous leur compte. */
.vt { display: grid; gap: 16px; }
.vt-s { font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.vt-orph { --ton: var(--arbitrage); display: grid; gap: 8px; padding: 18px 22px; background: var(--surface-1);
  border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 10px; }
.vto-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font: 550 17px var(--affichage); color: var(--clair); }
.vto-t span { font: 400 12px var(--affichage); color: var(--clair-terne); }
.vto-x { font-size: 13px; line-height: 1.55; color: var(--clair-terne); max-width: 65ch; }
.vt-og { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 8px; }
.vto { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px; border: 1px solid var(--trait); border-radius: 6px; }
.vto-v { display: block; width: 34px; height: 34px; overflow: hidden; border-radius: 4px; background: var(--surface-3); }
.vto-v img { width: 100%; height: 100%; object-fit: contain; }
.vto-n { grid-column: 2; font-size: 12px; color: var(--clair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vto select { grid-column: 2; min-height: 44px; padding: 4px 24px 4px 8px; font: 13px var(--affichage); color: var(--clair);
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.vt-arbre { display: grid; gap: 10px; }
.vn { --ton: transparent; display: grid; gap: 4px; }
.vn.n0 { padding: 10px 14px 12px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.vn.n1, .vn.n2 { margin-left: 22px; padding-left: 14px; border-left: 1px solid var(--trait); }
.vn-k { display: grid; gap: 6px; margin-top: 4px; }
.vn-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: 100%; min-height: 44px; padding: 6px 8px;
  text-align: left; cursor: pointer; font: inherit; color: inherit; background: none; border: 0; border-radius: 6px; }
.vn-h:hover, .vn.ici > .vn-h { background: var(--surface-4); }
.vn-h.fixe { cursor: default; }
.vn-h.fixe:hover { background: none; }
.vn-e { width: 14px; text-align: center; font-size: 17px; line-height: 1; color: var(--clair-terne); }
.vn-p { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; background: var(--trait-clair); }
.vn-l { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 28px; padding: 2px; overflow: hidden; border-radius: 4px; background: var(--surface-3); }
.vn-l img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vn-n { font: 550 17px var(--affichage); color: var(--clair); }
.vn.n1 .vn-n, .vn.n2 .vn-n { font-size: 14px; }
.vn-r { padding: 1px 6px; border: 1px solid var(--trait); border-radius: 4px; font-size: 11px; color: var(--clair-terne); }
.vn-q { flex: 1 1 auto; font-size: 12px; color: var(--clair-terne); }
/* Le statut de la marque — fermée, proposition, référence — avant son résumé. */
.vn-st { flex: 0 0 auto; font-size: 12px; color: var(--clair-terne); border: 1px solid var(--trait); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.vn-st.eteinte { border-style: dashed; }
.vn-c { padding-left: 32px; font-size: 13px; line-height: 1.5; color: var(--clair-terne); max-width: 80ch; }
.vn-c.manque { --ton: var(--arbitrage); }
.vn-signe { color: var(--ton); }
.vn-kd { margin-top: 2px; }
.vn-kdt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; padding-left: 32px; cursor: pointer;
  list-style: none; font: 550 13px var(--affichage); color: var(--studio-bleu); }
.vn-kdt::-webkit-details-marker { display: none; }
.vn-kdt::before { content: "›"; margin-left: -18px; width: 12px; font-size: 16px; color: var(--clair-terne); transition: transform var(--tr-rapide); }
.vn-kd[open] > .vn-kdt::before { transform: rotate(90deg); }
.vn-kdt span { font: 400 12px var(--affichage); color: var(--clair-terne); }
@media (max-width: 760px) {
  .vn.n1, .vn.n2 { margin-left: 8px; padding-left: 10px; }
  .vn-c { padding-left: 10px; }
  .vn-kdt { padding-left: 28px; }
}

/* ═════════════════════ Passe 11b · Ressources : marchés et supports ═════════════════════ */
/* Le référentiel est une hiérarchie : le marché gouverne sa langue, ses
 * mentions, ses gabarits, son décideur ; le support n'existe que servi sur un
 * marché. Les supports se replient par marché — cent dix-huit manques réels
 * répétés à plat ne se traitent pas, ils se noient. */
.rf-h { display: grid; gap: 6px; margin-bottom: 20px; }
.rf-t { font: 550 24px/1.25 var(--affichage); letter-spacing: -.03em; color: var(--clair); max-width: 40ch; text-wrap: balance; }
.rf-s, .rf-p { font-size: 14px; line-height: 1.6; color: var(--clair-terne); max-width: 65ch; }
.rf-p { font-size: 13px; }
.rf-signe { color: var(--ton, var(--clair-terne)); }
.rf-b { display: grid; gap: 12px; margin-bottom: 16px; padding: 18px 22px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.rfb-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; }
.rfb-t h3 { font: 550 17px var(--affichage); color: var(--clair); }
.rfb-t span { flex: 1 1 auto; font-size: 12px; color: var(--clair-terne); }
.rf-l { display: grid; }
.rf-m { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--trait); }
.rfm-h { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; padding: 0;
  text-align: left; cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
.rfm-code { min-width: 2.4rem; font: 600 21px/1 var(--affichage); color: var(--clair); }
.rfm-n { font: 550 17px var(--affichage); color: var(--clair); }
.rfm-h:hover .rfm-n { color: var(--studio-bleu); }
.rfm-l, .rfm-q { font-size: 12px; color: var(--clair-terne); }
.rfm-x, .rfm-c { font-size: 13px; line-height: 1.5; color: var(--clair-terne); max-width: 70ch; }
.rfm-x.manque { --ton: var(--arbitrage); }
.rfm-c { --ton: var(--bloquant); }
.rf-plus { justify-self: start; min-height: 44px; padding: 0 12px; cursor: pointer; font: 500 13px var(--affichage); color: var(--studio-bleu);
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: 6px; }
.rf-plus:hover { border-color: var(--trait-clair); }
.rf-plus.manque::before { content: "◐ "; color: var(--arbitrage); }
.rf-plus.ici { border-color: var(--studio-bleu); }
.rf-sup { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 4px; }
.rf-s { --ton: var(--succes); display: grid; gap: 2px; padding: 8px 10px; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface-1); border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.rf-s:hover { border-color: var(--trait-clair); border-left-color: var(--ton); }
.rf-s.manque { --ton: var(--arbitrage); }
.rfs-n { font: 550 13px var(--affichage); color: var(--clair); }
.rfs-q, .rfs-g { font-size: 11px; color: var(--clair-terne); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; cursor: pointer; font: 500 13px var(--affichage);
  color: var(--clair); background: var(--surface-1); border: 1px dashed var(--trait-clair); border-radius: 6px; }
.rf-chip:hover { border-color: var(--studio-bleu); }
.rf-a { display: grid; gap: 6px; }
.rf-as { --ton: var(--trait-clair); display: grid; gap: 2px; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface-1); border: 1px solid var(--trait); border-left: 3px solid var(--ton); border-radius: 6px; }
.rf-as:hover { border-color: var(--trait-clair); border-left-color: var(--ton); }
.rf-as.bientot { --ton: var(--arbitrage); }
.rf-as.perime { --ton: var(--bloquant); }
.rfa-n { font: 550 14px var(--affichage); color: var(--clair); }
.rfa-s, .rfa-z, .rfa-e { font-size: 12px; color: var(--clair-terne); }
.rfa-e.manque { --ton: var(--arbitrage); }
@media (max-width: 700px) { .rf-b { padding: 16px; } }

/* ═════════════════════ Passe 11c · Ressources : les registres ═════════════════════ */
/* People, Radar, boîte d'entrée : trois registres relevés, jamais saisis, qui
 * disent pour chaque ligne de la source s'il y a de quoi la suivre ici. Même
 * charpente : le relevé daté, les comptes, la conséquence dite une fois, les
 * lignes ; ce qui n'appelle aucun geste se replie sous son compte. */
.reg { display: grid; gap: 14px; padding: 20px 22px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; min-width: 0; }
.reg-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.regt-l { font: 550 21px/1.3 var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.regt-d { font-size: 12px; color: var(--clair-terne); }
.reg-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.reg-cc { --ton: var(--trait); display: grid; gap: 2px; padding-top: 6px; border-top: 3px solid var(--ton); }
.reg-cc.vert { --ton: var(--succes); }
.reg-cc.attente { --ton: var(--arbitrage); }
.reg-cc.alerte { --ton: var(--bloquant); }
.reg-cc.terne { --ton: var(--trait-clair); }
.regc-v { font: 550 24px/1.1 var(--affichage); letter-spacing: -.03em; color: var(--clair); font-variant-numeric: tabular-nums; }
.regc-n { font-size: 13px; color: var(--clair); }
.regc-q { font-size: 12px; color: var(--clair-terne); }
/* La conséquence, dite une fois au-dessus de la liste. */
.reg-n { --ton: var(--arbitrage); padding-left: 12px; border-left: 3px solid var(--ton); font-size: 13px; line-height: 1.6; color: var(--clair); max-width: 75ch; }
.reg-n b { font-weight: 550; }
.reg-l { display: grid; }
.reg-r { --ton: transparent; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 11rem 12rem auto; gap: 4px 12px; align-items: baseline;
  min-height: 44px; padding: 8px 0 8px 10px; border-top: 1px solid var(--trait); border-left: 3px solid var(--ton); }
.reg-r.aveugle { --ton: var(--arbitrage); }
.reg-r.malforme { --ton: var(--bloquant); }
.regr-ref { font-size: 11px; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
/* Les intitulés viennent d'un registre : parenthèses, barres obliques, sigles
 * collés. Sans point de coupe, le mot déborde au lieu de passer à la ligne. */
.regr-n { font: 550 14px/1.4 var(--affichage); color: var(--clair); overflow-wrap: anywhere; }
.reg-r.hors .regr-n, .reg-r.doublon .regr-n { font-weight: 500; color: var(--clair-doux); }
.regr-s { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.regrs-e { font-size: 12px; color: var(--clair); }
.regrs-e::before { content: "● "; color: var(--ton, var(--clair-terne)); }
.regrs-e.vert { --ton: var(--succes); }
.regrs-e.vert::before { content: "✓ "; }
.regrs-e.attente { --ton: var(--arbitrage); }
.regrs-e.attente::before { content: "◐ "; }
.regrs-e.alerte { --ton: var(--bloquant); }
.regrs-e.terne::before { content: ""; }
.regrs-p { padding: 0 6px; border: 1px solid var(--bloquant); border-radius: 4px; font: 550 11px var(--affichage); color: var(--clair); }
.regr-q { font-size: 12px; color: var(--clair-terne); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regr-q::first-letter, .regc-q::first-letter { text-transform: uppercase; }
.regr-g { justify-self: end; }
.rad-grappe { display: block; }
/* Un maître porte ses tâches : le rang se lit à l'indentation et au filet,
 * pas à une puce — à trois étages, les puces se confondent. */
.rad-fils { margin-left: 18px; padding-left: 12px; border-left: 1px solid var(--trait); }
.rad-n { margin-left: 8px; font: 400 11px var(--affichage); color: var(--clair-terne); white-space: nowrap; }
.reg-plus { border-top: 1px solid var(--trait); }
.reg-plus > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 48px; cursor: pointer; list-style: none;
  font: 550 13px var(--affichage); color: var(--studio-bleu); }
.reg-plus > summary::-webkit-details-marker { display: none; }
.reg-plus > summary::before { content: "›"; width: 12px; font-size: 16px; color: var(--clair-terne); transition: transform var(--tr-rapide); }
.reg-plus[open] > summary::before { transform: rotate(90deg); }
.reg-plus > summary b { font-weight: 550; }
.reg-plus .dl-clos-q { font: 400 12px var(--affichage); color: var(--clair-terne); }
/* La boîte d'entrée : le seul endroit où l'on a le droit d'être sale. */
.ink-l { display: grid; }
.ink-r { --ton: var(--arbitrage); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 48px;
  padding: 10px 0 10px 12px; border-top: 1px solid var(--trait); border-left: 3px solid var(--ton); }
.ink-r.vieille { --ton: var(--bloquant); }
.ink-r.range { --ton: var(--trait); }
.ink-signe { color: var(--ton); }
.inkr-t { flex: 1 1 18rem; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--clair); overflow-wrap: anywhere; }
.ink-r.range .inkr-t { color: var(--clair-doux); }
.inkr-d, .inkr-q { flex: 0 1 auto; font-size: 12px; color: var(--clair-terne); overflow-wrap: anywhere; }
.inkr-g { flex: 0 0 auto; margin-left: auto; display: flex; gap: 4px; }
@media (max-width: 900px) {
  .reg-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .regr-g { justify-self: start; }
  .regr-q { white-space: normal; }
}
@media (max-width: 760px) { .rad-fils { margin-left: 6px; padding-left: 8px; } }
@media (max-width: 700px) {
  .reg { padding: 16px; }
  .inkr-g { margin-left: 0; width: 100%; }
}

/* ————— Chercher la big idea par école (bigidea-ecoles.js) —————
 * Une section blanche, les endroits d'abord, les propositions ensuite. Une
 * proposition est un élément de liste, pas une carte à ombre : filet, rayon 6. */
.be { display: grid; gap: 16px; padding: 20px 24px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.be-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.be-t { display: flex; align-items: center; gap: 10px; font: 550 21px var(--affichage); letter-spacing: -.02em; color: var(--clair); }
.be-chapo { margin: 6px 0 0; max-width: 65ch; font: 400 14px/1.6 var(--affichage); color: var(--clair-terne); }
.be-endroits { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.be-en { display: grid; gap: 3px; padding: 10px 12px; border: 1px dashed var(--trait); border-radius: 6px; background: var(--surface-4); }
.be-en.plein { border-style: solid; background: var(--surface-1); }
.be-en-n { font: 550 13px var(--affichage); color: var(--clair); }
.be-en-c { font: 400 12px var(--affichage); color: var(--clair-terne); }
.be-en.plein .be-en-c { color: var(--studio-bleu); font-weight: 500; }
.be-en-e { font: 400 11px/1.4 var(--affichage); color: var(--clair-terne); }
.be-racines { display: grid; gap: 8px; }
.be-rg { display: grid; gap: 6px; }
.be-rgl { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 6px; background: var(--surface-4); font: 400 13px/1.5 var(--affichage); color: var(--clair); }
.be-rgl-c, .be-rgl-n { font-size: 11px; color: var(--clair-terne); }
.be-rgl.sans .be-rgl-c { color: var(--bloquant); }
.be-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.be-c { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface-1); min-width: 0; }
.be-c.retenue { border-color: var(--studio-bleu); box-shadow: var(--elev-1); }
.be-c.ecartee { opacity: .6; }
.be-c-e { display: grid; gap: 2px; }
.be-c-ecole { font: 700 12px var(--affichage); color: var(--studio-bleu); }
.be-c-ou { font: 400 11px/1.4 var(--affichage); color: var(--clair-terne); }
.be-c-titre { font: 550 17px var(--affichage); color: var(--clair); }
.be-c-phrase { font: italic 400 16px/1.45 var(--lecture, Georgia, serif); color: var(--clair); }
.be-c-phrase.vide { font-style: normal; font-size: 13px; color: var(--bloquant); }
.be-c-l { display: grid; gap: 8px; }
.be-cl { display: grid; gap: 2px; }
.be-cl-q { font: 400 11px var(--affichage); color: var(--clair-terne); }
.be-cl-v { font: 400 13px/1.5 var(--affichage); color: var(--clair); overflow-wrap: anywhere; }
.be-cl-v.vide { color: var(--clair-terne); font-style: italic; }
.be-c-test { padding: 8px 10px; border-left: 2px solid var(--trait); font: 400 12px/1.5 var(--affichage); color: var(--clair-terne); }
.be-c-etat { font: 500 12px/1.4 var(--affichage); color: var(--clair); }
.be-c-etat.attente { color: var(--arbitrage); }
.be-c-etat.alerte { color: var(--bloquant); }
.be-c-etat.vert { color: var(--succes); }
.be-c-inf { font: 400 12px/1.5 var(--affichage); color: var(--clair-terne); }
.be-c-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--trait); }
.be-c-a { display: inline-flex; align-items: center; gap: 6px; font: 400 12px var(--affichage); color: var(--clair); }
.be-c-a.vide { color: var(--clair-terne); }
.be-c-g { display: inline-flex; align-items: center; gap: 12px; }
.be-f-ecole { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 12px; border-radius: 6px; background: var(--surface-4); }
.be-f-q { font: 550 15px/1.4 var(--affichage); color: var(--clair); }
.be-f-p { font: 400 13px/1.5 var(--affichage); color: var(--clair); }
.be-f-lim { font: 400 12px/1.5 var(--affichage); color: var(--clair-terne); }
@media (max-width: 600px) {
  .be { padding: 16px; }
  .be-grille { grid-template-columns: minmax(0, 1fr); }
  .be-rgl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Ce que la préparation a proposé et que l'équipe n'a pas encore signé. */
.rin-inf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 10px; border-left: 2px solid var(--arbitrage); font: 400 12px/1.5 var(--affichage); color: var(--clair-terne); }
.rin-inf.signe { border-left-color: var(--succes); }
/* Un champ de plateforme proposé par la préparation, pas encore signé. */
.vtc.infere { border-left-color: var(--arbitrage); }
.vtc-i { font-size: 11px; color: var(--arbitrage); }
.svf-h.infere { color: var(--arbitrage); }
.svm.gamme { border-color: var(--studio-bleu); }

/* ————— Préparer la séance (preparation.js) ————— */
.prep { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--trait); border-radius: 10px; }
.prep-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.prep-t { display: flex; align-items: center; gap: 10px; font: 550 17px var(--affichage); color: var(--clair); }
.prep-q { margin: 6px 0 0; max-width: 65ch; font: 500 15px/1.5 var(--affichage); color: var(--clair); }
.prep-q.vide { font-weight: 400; color: var(--clair-terne); }
.prep-docs summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font: 550 13px var(--affichage); color: var(--clair); }
.prep-dl { display: grid; gap: 6px; }
.prep-d { display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; background: var(--surface-4); }
.prep-d.ko { border-left: 2px solid var(--bloquant); }
.prep-dn { font: 500 13px var(--affichage); color: var(--clair); overflow-wrap: anywhere; }
.prep-dq, .prep-dt { font: 400 12px/1.5 var(--affichage); color: var(--clair-terne); }
.vtc-s { font-size: 11px; color: var(--clair-terne); font-style: italic; }

/* La campagne du projet, sous le client : un projet n'est presque jamais seul. */
.pj-cmp { margin: var(--e2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); font-size: var(--t-meta); color: var(--clair-doux); }
.pj-cmp-e { font-size: var(--t-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--clair-terne); }
.pj-cmp a { color: var(--clair); }
.pj-cmp-v { color: var(--arbitrage); }
/* Ranger des projets existants dans une campagne. */
.cmp-accs { display: grid; gap: var(--e1); max-height: 52vh; overflow-y: auto; margin: var(--e3) 0; }
.cmp-acc { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e2) var(--e1); min-height: 44px; border-bottom: 1px solid var(--trait); cursor: pointer; }
.cmp-acc input { margin-top: 4px; flex: 0 0 auto; }
.cmp-acc-q { display: block; font-size: var(--t-eti); color: var(--clair-terne); }

/* ————— Les couvertures : KV, logo et packs, ou mosaïque ————— */
.vignette.couv { position: relative; overflow: hidden; }
.vignette.couv > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.couv-mos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--surface-3); }
.couv-mos.n2 { grid-template-rows: 1fr; }
.couv-mos.n3 > img:first-child { grid-row: span 2; }
.couv-mos > img { width: 100% !important; height: 100% !important; min-height: 0; object-fit: cover; display: block; }
.couv-mq { display: flex; align-items: center; justify-content: center; gap: 6%; padding: 6%; background: var(--papier); }
.couv-mq .couv-logo { max-width: 46%; max-height: 72%; width: auto !important; height: auto !important; object-fit: contain; }
.couv-packs { display: flex; gap: 4%; align-items: flex-end; justify-content: center; max-width: 48%; height: 84%; }
.couv-packs > img { height: 100% !important; width: auto !important; max-width: 32%; object-fit: contain; }
/* La campagne a un visage : son KV en tête d'écran, d'où il vient en légende. */
.cg-couv { margin: 0 0 var(--e5); display: grid; gap: var(--e2); }
.cg-couv .vignette { width: 100%; height: clamp(160px, 28vw, 320px); border-radius: var(--r-m); }
.cg-couv figcaption { font-size: var(--t-eti); color: var(--clair-terne); }
.mqp-couv { display: block; margin-bottom: var(--e3); }
.mqp-couv .vignette { width: 100%; height: 140px; border-radius: var(--r-s); }
/* Le fonds visuel, les pièces relevées, les inclassables : repliés, lisibles. */
.fonds { margin: var(--e4) 0; border-top: 1px solid var(--trait); }
.fonds > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font-size: var(--t-meta); color: var(--clair); }
.fonds-q { font-size: var(--t-eti); color: var(--clair-terne); }
.fonds-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e3); padding: var(--e3) 0; }
.fonds-c { margin: 0; display: grid; gap: var(--e1); min-width: 0; }
.fonds-c img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--surface-3); }
.fonds-c figcaption { font-size: var(--t-micro); color: var(--clair-terne); overflow-wrap: anywhere; }
.fonds-v { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-3); font-size: var(--t-micro); color: var(--clair-terne); border-radius: var(--r-s); }
.fonds-l { margin: 0; padding: var(--e2) 0; list-style: none; display: grid; gap: var(--e2); }
.fonds-l li { font-size: var(--t-eti); line-height: var(--lh-eti); overflow-wrap: anywhere; }
.fonds-l li span { display: block; color: var(--clair-terne); }
/* La structure : Matanga, UPgraders, Friends Studio, nom propre. Une étiquette, pas un état. */
.st-badge { display: inline-flex; align-items: center; font-size: var(--t-micro); letter-spacing: var(--ls-micro); padding: 1px 8px; border-radius: var(--r-pilule); border: 1px solid var(--trait); color: var(--clair-doux); margin-left: var(--e2); white-space: nowrap; }
.st-badge.st-upgraders { border-color: var(--violet); color: var(--violet); }
.st-badge.st-friends { border-color: var(--info); color: var(--info); }
.st-badge.st-nom-propre { border-style: dashed; }
.pj-cmp .st-badge { margin-left: 0; }
.pj-struct-q { font-size: var(--t-eti); color: var(--clair-terne); }
.pj-struct-q.absent { color: var(--arbitrage); }
.pj-struct-n { margin: var(--e1) 0 0; font-size: var(--t-eti); color: var(--clair-terne); max-width: 72ch; }
.st-filtre { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0; }
.st-f { min-height: 44px; display: inline-flex; align-items: center; gap: var(--e2); padding: 0 var(--e4); border-radius: var(--r-pilule); border: 1px solid var(--trait); background: transparent; color: var(--clair); font: inherit; font-size: var(--t-meta); cursor: pointer; }
.st-f span { font-size: var(--t-eti); color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.st-f.ici { background: var(--clair); color: var(--surface-1); border-color: var(--clair); }
.st-f.ici span { color: var(--surface-1); }

/* ————— La galerie : les campagnes, en images ————— */
.galerie .gal-filtres { display: grid; gap: var(--e3); margin: var(--e5) 0 var(--e3); }
.gal-f { display: flex; flex-wrap: wrap; gap: var(--e2); }
.gal-filtres input[type="search"] { min-height: 44px; max-width: 420px; width: 100%; padding: 0 var(--e4); border: 1px solid var(--trait); border-radius: var(--r-pilule); font: inherit; font-size: var(--t-meta); background: var(--surface-1); color: var(--clair); }
.gal-annee { margin-top: var(--e8); }
.gal-an { display: flex; align-items: baseline; gap: var(--e3); margin: 0 0 var(--e4); font-family: var(--affichage); font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--clair); border-bottom: 1px solid var(--trait); padding-bottom: var(--e2); }
.gal-an span { font-size: var(--t-eti); color: var(--clair-terne); font-family: var(--affichage); }
.gal-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e6) var(--e5); }
.gal-carte { display: grid; gap: var(--e3); align-content: start; text-decoration: none; color: inherit; border-radius: var(--r-m); min-width: 0; }
.gal-carte:focus-visible { outline: 2px solid var(--info); outline-offset: 4px; }
.gal-visuel { aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: var(--surface-3); }
.gal-visuel .vignette { width: 100%; height: 100%; border: 0; border-radius: 0; }
.gal-carte:hover .gal-visuel { box-shadow: var(--elev-2); }
@media (prefers-reduced-motion: no-preference) {
  .gal-visuel { transition: box-shadow var(--tr-standard) var(--easing, ease); }
  .gal-visuel img { transition: transform 400ms var(--easing, ease); }
  .gal-carte:hover .gal-visuel img { transform: scale(1.03); }
}
.gal-typo { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--e1); padding: var(--e5); background: var(--surface-2); color: var(--clair); }
.gal-typo.teinte { background: var(--gal-fond); color: #fff; }
.gal-typo-p { font-family: var(--affichage); font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.gal-typo-t { font-size: var(--t-eti); opacity: .85; }
.gal-texte { display: grid; gap: var(--e1); min-width: 0; }
.gal-porteur { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e1); font-size: var(--t-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--clair-terne); }
.gal-porteur .st-badge { text-transform: none; letter-spacing: 0; }
.gal-titre { margin: 0; font-family: var(--affichage); font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); overflow-wrap: anywhere; }
.gal-meta { margin: 0; font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
@media (max-width: 560px) { .gal-grille { grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e3); } .gal-typo-p { font-size: var(--t-titre); } }

/* Au disque : les vidéos se regardent, les EXE s'ouvrent (en local). */
.disque-vg { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.disque-v video, .disque-v img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--r-s); background: var(--surface-3); }
.disque-m { display: block; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.disque-g { display: flex; gap: var(--e2); flex-wrap: wrap; }
.disque-g .studio-lien { min-height: 44px; }
.disque-e { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--e2); align-items: center; min-width: 0; }
.disque-e img, .disque-ext { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-s); background: var(--surface-3); }
.disque-ext { display: grid; place-items: center; font-size: var(--t-micro); color: var(--clair-terne); letter-spacing: .04em; }
.disque-t { display: grid; min-width: 0; font-size: var(--t-meta); }
.disque-t b { font-weight: 500; overflow-wrap: anywhere; }
.disque-t span { font-size: var(--t-micro); color: var(--clair-terne); }
@media (max-width: 480px) { .disque-e { grid-template-columns: 48px 1fr; } .disque-e .disque-g { grid-column: 2; } }
.disque-a audio { width: 100%; max-width: 420px; height: 36px; margin-top: var(--e1); }

/* La réserve de concepts. */
.co-l { display: grid; gap: var(--e3); padding: var(--e3) 0; }
.co-c { display: grid; gap: var(--e2); padding: var(--e3); border: 1px solid var(--trait); border-radius: var(--r-s); min-width: 0; }
.co-t { display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; }
.co-t h3 { margin: 0; font-family: var(--ecrit, var(--lecture)); font-style: italic; font-weight: 500; }
.co-p { margin: 0; max-width: 65ch; }
.co-x, .co-m { margin: 0; font-size: var(--t-meta); color: var(--clair-terne); max-width: 65ch; }
.co-v { display: flex; gap: var(--e2); flex-wrap: wrap; }
.co-v img { height: 90px; width: auto; max-width: none; border-radius: var(--r-s); }

/* La fabrique d'une piste. */
.fb-bloc { margin: var(--e4) 0; }
.fb-p { display: grid; gap: var(--e1); margin: var(--e2) 0; }
.fb-pt { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); font-size: var(--t-meta); color: var(--clair-terne); }
.fb-pre { margin: 0; padding: var(--e2) var(--e3); white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-micro); line-height: 1.5; background: var(--surface-3); border-radius: var(--r-s); max-height: 420px; overflow: auto; }
.fb-copier { min-height: 44px; }
.fb-n { margin: var(--e2) 0; font-size: var(--t-meta); max-width: 70ch; }
.fb-notes { margin: var(--e2) 0; padding-left: 1.2em; display: grid; gap: var(--e1); font-size: var(--t-meta); max-width: 75ch; }
.fb-tw { overflow-x: auto; }
.fb-t { width: 100%; border-collapse: collapse; font-size: var(--t-meta); min-width: 560px; }
.fb-t th, .fb-t td { text-align: left; vertical-align: top; padding: var(--e1) var(--e2); border-bottom: 1px solid var(--trait); }
.fb-t th { color: var(--clair-terne); font-weight: 500; }
.fb-f h4 { margin: var(--e3) 0 var(--e1); }
.fb-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e3); padding: var(--e3) 0; }
.fb-kvc { margin: 0; display: grid; gap: var(--e1); }
.fb-kvc img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; background: #fff; border-radius: var(--r-s); }
.fb-kvc figcaption { font-size: var(--t-micro); color: var(--clair-terne); }
.fb-r { margin: 0; padding-left: 1.1em; font-size: var(--t-micro); display: grid; gap: 2px; }
.fb-r li.fait { text-decoration: line-through; color: var(--clair-terne); }
.fb-sb { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e3); padding: var(--e3) 0; }
.fb-case { display: grid; gap: var(--e1); align-content: start; min-width: 0; }
.fb-case img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: var(--r-s); background: #fff; }
.fb-vide { width: 100%; aspect-ratio: 9 / 16; max-height: 200px; border-radius: var(--r-s); background: var(--surface-3); }
.fb-vide { display: grid; place-items: center; font-size: var(--t-micro); color: var(--clair-terne); border: 1px dashed var(--trait); }
.fb-ct { font-size: var(--t-micro); color: var(--clair-terne); }
.fb-a { margin: 0; font-size: var(--t-meta); }
.fb-m { margin: 0; font-size: var(--t-micro); color: var(--clair-terne); }
.fb-cp > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--t-micro); }
.fb-sb.h { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fb-sb.h .fb-vide { aspect-ratio: 16 / 9; max-height: none; }

/* La big idea en affiche (refonte du 07/10/2026). */
.bia { display: grid; gap: var(--e6); margin-bottom: var(--e7); }
.bia-mur { padding: var(--e8) var(--e8) var(--e6); background: var(--papier); color: var(--papier-encre); border-radius: var(--r-m); display: grid; gap: var(--e4); }
.bia-phrase { margin: 0; font-family: var(--ecrit); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem); line-height: 1.15; letter-spacing: -0.01em; max-width: 30ch; text-wrap: balance; color: var(--papier-encre); }
.bia-sign { margin: 0; font-family: var(--ecrit); font-style: italic; font-size: var(--t-titre); color: var(--papier-encre); }
.bia-qui { margin: 0; display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; font-size: var(--t-meta); color: var(--papier-terne); }
.bia-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e5) var(--e7); }
.bia-grille.bia-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bia-col { display: grid; gap: var(--e2); align-content: start; padding-top: var(--e3); border-top: 2px solid var(--trait); min-width: 0; }
.bia-col.bia-oui { border-top-color: var(--succes); }
.bia-col.bia-non { border-top-color: var(--bloquant-txt); }
.bia-col h3 { margin: 0; font-family: var(--affichage); font-size: var(--t-meta); font-weight: 600; color: var(--clair); }
.bia-col p { margin: 0; font-family: var(--lecture); font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux); max-width: 62ch; }
ul.bia-l { margin: 0; padding: 0; display: grid; gap: var(--e2); }
ul.bia-l li { position: relative; padding-left: var(--e5); font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux); }
ul.bia-l li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--clair-terne); }
.bia-oui ul.bia-l li::before { background: var(--succes); }
.bia-non ul.bia-l li::before { width: 8px; height: 2px; border-radius: 0; top: .8em; background: var(--bloquant-txt); }
.bia-v { margin: 0; font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); max-width: 72ch; padding-top: var(--e3); border-top: 1px solid var(--trait); }
.se-proc { margin-top: var(--e6); }
@media (max-width: 720px) { .bia-mur { padding: var(--e6) var(--e5) var(--e5); } }

/* La planche des pistes (refonte du 07/10/2026). */
.pp-liste { display: grid; gap: var(--e8); margin: var(--e5) 0 var(--e9); }
.pp { display: grid; gap: var(--e5); padding-bottom: var(--e8); border-bottom: 1px solid var(--trait); }
.pp:last-child { border-bottom: 0; }
.pp-tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--e6); align-items: start; }
.pp-kv { padding: 0; border: 0; background: #fff; border-radius: var(--r-m); overflow: hidden; cursor: pointer; display: block; width: 100%; box-shadow: 0 1px 2px rgba(36,28,24,.08), 0 8px 24px -12px rgba(36,28,24,.25); }
.pp-kv img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.pp-kv:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }
.pp-kv-v { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-3); color: var(--clair-terne); font-size: var(--t-meta); }
.pp-id { display: grid; gap: var(--e4); align-content: start; min-width: 0; }
.pp-titre { display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; }
.pp-titre h3 { margin: 0; font-family: var(--ecrit); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.1; color: var(--clair); text-wrap: balance; }
.pp-qui { margin: 0; font-size: var(--t-meta); color: var(--clair-terne); }
.pp-idee { margin: 0; font-family: var(--lecture); font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); max-width: 52ch; }
.pp-acc { display: flex; gap: var(--e2); flex-wrap: wrap; }
.pp-acc span { font-family: var(--ecrit); font-style: italic; font-size: var(--t-lire); padding: var(--e1) var(--e3); border-radius: var(--r-pilule); background: var(--papier); color: var(--papier-encre); }
.pp-gestes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.pp-var { display: grid; gap: var(--e5); }
.pp-g { display: grid; gap: var(--e2); min-width: 0; }
.pp-g h4 { margin: 0; font-family: var(--affichage); font-size: var(--t-meta); font-weight: 600; color: var(--clair); display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; }
.pp-g h4 span { font-weight: 400; font-size: var(--t-eti); color: var(--clair-terne); }
.pp-fil { display: flex; gap: var(--e3); overflow-x: auto; padding-bottom: var(--e2); scroll-snap-type: x proximity; }
/* Une bande = une hauteur commune ; chaque image garde ses proportions, la légende suit sa largeur. */
.pp-t { margin: 0; flex: 0 0 auto; width: min-content; display: grid; gap: var(--e1); scroll-snap-align: start; }
.pp-t img { display: block; height: 120px; width: auto; min-width: 90px; max-width: none; background: #fff; border-radius: var(--r-s); border: 1px solid var(--trait); }
.pp-tv { width: 160px; height: 120px; border-radius: var(--r-s); border: 1px solid var(--trait); }
.pp-tv { display: grid; place-items: center; padding: var(--e2); text-align: center; font-size: var(--t-micro); color: var(--clair-terne); background: var(--surface-2); border-style: dashed; }
.pp-t figcaption { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.pp-kvv img { height: 160px; }
.pp-sb .pp-t img { height: 180px; min-width: 101px; }  /* la largeur 9:16, tant que l'image charge */
.pp-sb .pp-tv { width: 101px; height: 180px; }
.pp-sb.h .pp-t img { height: 110px; min-width: 196px; }
.pp-sb.h .pp-tv { width: 196px; height: 110px; }
.pp-n { margin: 0; font-size: var(--t-eti); color: var(--clair-terne); }
.pp-cmp-t { margin-top: var(--e4); }
@media (max-width: 860px) { .pp-tete { grid-template-columns: 1fr; } }

/* La portée du spot */
.fb-portee { margin: 0; font-size: var(--t-meta); line-height: var(--lh-meta, 1.5); color: var(--clair); max-width: 75ch; }
.fb-portee p { margin: 0; }
.fb-portee ul { margin: var(--e1) 0 0; padding-left: 1.2em; display: grid; gap: 2px; color: var(--clair-terne); }
.fb-bloc > .fb-portee { margin: var(--e3) 0; }

/* L'animatique */
.fb-film { display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-s); margin: var(--e3) 0; }
.pp-anim { display: grid; gap: var(--e1); max-width: 640px; }
.fb-film.petit { margin: 0; max-width: 640px; }
.fb-par { margin: 0; font-family: var(--ecrit); font-style: italic; font-size: var(--t-meta); color: var(--clair); }
.fb-st { margin: 0; font-size: var(--t-micro); color: var(--clair-terne); }
.fb-st.a-faire { color: var(--arbitrage); font-weight: 600; }
.fb-perso { display: block; width: 100%; max-width: 760px; height: auto; margin: var(--e2) 0; background: #fff; border-radius: var(--r-s); }
.fb-sons { display: grid; gap: var(--e2); margin: var(--e2) 0; }
.fb-son { display: grid; gap: var(--e1); font-size: var(--t-meta); }
.fb-son audio { width: 100%; max-width: 520px; }
.fb-film.vertical { aspect-ratio: 9 / 16; width: auto; height: min(70vh, 640px); max-width: 100%; }
.plc-hors.as-hors { width: 100%; margin: .8rem 0 0; }