/* planche.css — la planche des KV, l'annotation, les mockups, la présentation.
 *
 * Quatre écrans qui partagent une chose : l'image est l'objet, le texte est
 * son commentaire. Ici la vignette occupe la place, le reste se range autour.
 */

/* ————————————————————— L'annotation ————————————————————— */

.an { display: grid; gap: .9rem; }
.an-scene { display: grid; gap: .35rem; }
.an-toile { position: relative; cursor: crosshair; }
.an-toile .vignette { height: 340px; }
.an-aide { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.an-point {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 11px; cursor: pointer;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); display: grid; place-items: center;
  border: 2px solid var(--nuit); color: var(--nuit); background: var(--attente);
}
.an-point.vert { background: var(--vert); }
.an-point.terne { background: var(--clair-terne); }
.an-point.actif { border-color: var(--or); transform: translate(-50%, -50%) scale(1.15); }

.an-cote { display: grid; gap: .45rem; }
.an-tete { display: flex; justify-content: space-between; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.an-o.alerte { color: var(--bloquant-txt); }

.an-l {
  border-left: 2px solid var(--trait-clair); padding: .35rem .5rem;
  background: var(--nuit-carte); cursor: pointer;
}
.an-l.attente { border-left-color: var(--attente); }
.an-l.vert { border-left-color: var(--vert); }
.an-l.terne { border-left-color: var(--trait-clair); opacity: .6; }
.an-l.actif { background: var(--nuit-relief); }
.anl-tete { display: flex; gap: .4rem; align-items: baseline; }
.anl-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); flex: 0 0 auto; }
.anl-texte { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); flex: 1; }
.anl-meta { display: flex; gap: .35rem; align-items: center; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .2rem; }
.anl-gestes { display: flex; gap: .3rem; margin-top: .25rem; }
.anl-gestes .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .12rem .3rem; }
.anl-etat { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .2rem; }

/* ————————————————————— La présentation ————————————————————— */

.pr-apres { background: var(--nuit-carte); padding: .7rem .8rem; display: grid; gap: .5rem; }
.pra-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.pra-q { display: block; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .1rem; }
.pra-v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.5; color: var(--clair-doux); }
.pra-l { display: grid; gap: .25rem; }
.pra-r { display: flex; justify-content: space-between; gap: .6rem; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  border-bottom: 1px solid var(--trait); padding: .25rem 0; }
.prar-c { color: var(--clair-terne); font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); flex: 0 0 auto; }

/* Le rang portait la couleur d'un filet : 1,57:1, illisible. Un ordre de
 * passage n'est pas une décoration — il se lit. */

.pr-choix { display: grid; gap: .3rem; }
.pr-ch {
  display: grid; gap: .1rem; text-align: left; cursor: pointer; font: inherit;
  background: var(--nuit-carte); border: 1px solid var(--trait); padding: .45rem .55rem; color: var(--clair);
}
.pr-ch:hover { border-color: var(--or); }
.pr-ch span { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* ————————————————————— Le mode présenter ————————————————————— */

.pr-scene {
  position: fixed; inset: 0; z-index: 90; background: var(--nuit);
  display: grid; grid-template-rows: 1fr auto;
}
.pr-toile { overflow: auto; display: grid; place-items: center; padding: 2.2rem; }
.pr-pied {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-top: 1px solid var(--trait); padding: .5rem .9rem; background: var(--nuit-panneau);
}
.prp-fil { display: flex; gap: 3px; flex-wrap: wrap; }
.prf-p { width: 22px; height: 4px; border: 0; background: var(--trait-clair); cursor: pointer; padding: 0; }
.prf-p.actif { background: var(--or); }
.prp-cmd { display: flex; gap: .4rem; align-items: center; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.pg { width: min(1240px, 100%); display: grid; gap: .8rem; }
.pg-eti { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--or); }
.pg-t { font-size: var(--t-nombre); letter-spacing: var(--ls-nombre); line-height: 1.12; }
.pg-s { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--clair-doux); }
.pg-phrase { font-size: var(--t-ecran); letter-spacing: var(--ls-ecran); line-height: 1.22; font-family: var(--lecture); }
.pg-sign { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--or); }
.pg-corps { font-size: var(--t-lire); letter-spacing: var(--ls-lire); line-height: 1.6; color: var(--clair-doux); max-width: 70ch; }
.pg-note { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pg-note.alerte { color: var(--bloquant-txt); }

/* En présentation on ne recadre rien : un visuel montré à moitié n'est pas
 * le visuel qu'on fait valider. */
.pg .vignette { height: auto; background: var(--nuit-carte); }
.pg .vignette img { height: auto; width: 100%; object-fit: contain; }

.pg-titre { justify-items: center; text-align: center; position: relative; }
.pg-fond { width: 100%; overflow: hidden; opacity: .55; margin-bottom: .8rem; }
.pg-fond .vignette img { max-height: 46vh; }

.pg-route { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 1.4rem; }
.pg-gauche .vignette img { max-height: 64vh; }
.pg-droite { display: grid; gap: .6rem; }
.pg-blocs { display: grid; gap: .5rem; }
.pg-b .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne); }
.pg-b .v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; }

.pg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.pgc .vignette img { max-height: 160px; }
.pgc-l { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); margin-top: .25rem; }
.pgc-m { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pg-mockup .pgc .vignette img { max-height: 260px; }

.pg-tab { width: 100%; border-collapse: collapse; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.pg-tab td { border-bottom: 1px solid var(--trait); padding: .35rem .5rem; }
.pg-tab td:first-child { color: var(--clair); }
.pg-tab td:not(:first-child) { color: var(--clair-terne); }

.pg-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.pg-deux .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne); margin-bottom: .4rem; }
.pg-deux ul { list-style: none; display: grid; gap: .35rem; }
.pg-deux li { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); padding-left: 1rem; position: relative; }
.pg-deux li::before { content: "—"; position: absolute; left: 0; color: var(--or); }
.pg-deux ul.gris li { color: var(--clair-terne); }
.pg-deux ul.gris li::before { color: var(--trait-clair); }

/* ————————————————————— Étroit ————————————————————— */

/* Écran seulement : à l'impression, la largeur se mesure sur la page par défaut
 * (816 px) et non sur la diapositive — les pistes s'empilaient dans le PDF. */
@media screen and (max-width: 900px) {
  
  .pg-route, .pg-deux { grid-template-columns: minmax(0, 1fr); }
  .pg-gauche .vignette { height: 38vh; }
  .pg-t { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); }
  .pg-phrase { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); }
  .pr-toile { padding: 1rem; }
  
}

/* ————————————————————— Papier ————————————————————— */

@media print {
  
  .pr-pied { display: none; }
  .pr-scene { position: static; }
  .pg { page-break-after: always; }
}

/* ————————————————————— La route, en entier ————————————————————— */

/* Le texte décide de la hauteur, jamais l'inverse.
 *
 * Une carte à visuel tient son 4/3 : l'image y est recadrée sans perte de
 * sens. Une carte sans visuel porte quatre lignes de texte, et un ratio fixe
 * les ampute — c'est le nom du fichier qui saute, donc précisément ce qu'on
 * était venu lire. Elle prend donc la hauteur qu'il lui faut, et la rangée
 * s'aligne dessus. */
.rt-c.sans-visuel { display: grid; grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: auto; min-height: 118px; }
.rt-c.sans-visuel .rtc-bas { position: static; }
.rt-c.sans-visuel .vignette.vide.attente { align-content: start; padding: .45rem .5rem; gap: .12rem; }
@media (max-width: 760px) {
  .rt-c.sans-visuel .vignette.vide.attente .va-q { -webkit-line-clamp: 2; }
}

/* ————————————————————— L'inférence ————————————————————— */

.inf {
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  color: var(--attente); border: 1px solid var(--attente); padding: 0 .25rem;
  margin-left: .35rem; vertical-align: middle;
}

.inf-l { border-left: 2px solid var(--attente); padding: .45rem .6rem;
  background: var(--nuit-carte); margin-bottom: .45rem; }
.inf-l.critique { border-left-color: var(--bloquant-txt); }
.infl-tete { display: flex; align-items: baseline; gap: .45rem; }
.infl-nom { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.infl-poste { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-left: auto; }
.infl-v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair); margin: .25rem 0; line-height: 1.4; }
.infl-p { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); line-height: 1.45; }
.infl-g { display: flex; gap: .35rem; margin-top: .45rem; flex-wrap: wrap; }
.infl-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .16rem .4rem; }

/* Les fruits d'une route, sur sa carte */
.route-fruits { display: flex; gap: .5rem; flex-wrap: wrap; margin: .3rem 0; }
.rf { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.rf b { color: var(--clair); font-weight: 600; }
.rf.alerte, .rf.alerte b { color: var(--bloquant-txt); }

/* Une IA a un poste, pas un blanc-seing : son avatar le dit. */
.avatar.ia { border-style: dashed; }

.retour { background: none; border: 0; color: var(--clair-terne); font: inherit; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  cursor: pointer; padding: 0 0 .7rem; }
.retour:hover { color: var(--or); }

/* Garde-fou général : une grille sans gabarit ne doit jamais élargir sa colonne
 * au-delà de la place disponible. */
.zone .aside > *, .zone > div > * { min-width: 0; }

/* ————————————————————— Le versionnage ————————————————————— */

.vs { display: grid; gap: .5rem; }
.vs-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.vs-l { display: grid; gap: .3rem; }
.vs-v { display: flex; gap: .55rem; align-items: flex-start;
  border-left: 2px solid var(--trait-clair); padding: .3rem .55rem; background: var(--nuit-carte); }
.vs-v.cout { border-left-color: var(--bloquant-txt); }
.vs-v.actuelle { border-left-color: var(--or); }
.vsv-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); flex: 0 0 2rem; }
.vsv-c { min-width: 0; }
.vsv-o { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); display: flex; gap: .35rem; align-items: center; }
.vsv-m { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.4; }
.vsv-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* ————————————————————— La validation d'un document ————————————————————— */

.motifs { display: grid; gap: .25rem; }
.motif { text-align: left; background: var(--nuit-carte); border: 1px solid var(--trait);
  color: var(--clair-doux); font: inherit; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); padding: .3rem .5rem; cursor: pointer; }
.motif:hover { border-color: var(--trait-clair); }
.motif.actif { border-color: var(--or); color: var(--clair); }

/* ————————————————————— La comparaison des routes ————————————————————— */

.bic { display: grid; gap: .45rem; align-content: start;
  background: var(--nuit-carte); border: 1px solid var(--trait);
  border-top: 2px solid var(--trait-clair); padding-bottom: .6rem; }
.bic.retenue { border-top-color: var(--vert); }
.bic.ecartee { opacity: .55; }
.bic-v { position: relative; display: block; padding: 0; border: 0; background: none;
  cursor: pointer; aspect-ratio: 16/9; overflow: hidden; }
.bic-v .vignette { height: 100%; }
.bic-v .vignette img { height: 100%; object-fit: cover; }
.bic-v:hover { outline: 1px solid var(--or); outline-offset: -1px; }
.bic-eti { position: absolute; left: 0; top: 0; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  padding: .1rem .4rem; background: rgba(14,15,17,.86); color: var(--clair); }
.bic.retenue .bic-eti { background: var(--vert); }
.bic-t { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); padding: 0 .65rem; }
.bic-a { display: flex; align-items: center; gap: .3rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne); padding: 0 .65rem; }
.bic-acc { font-family: var(--lecture); font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--or); padding: 0 .65rem; }
.bic-c { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; color: var(--clair-doux); padding: 0 .65rem; }

.bic-arg { display: grid; gap: .4rem; padding: .2rem .65rem; }
.bica { border-left: 2px solid var(--trait-clair); padding-left: .5rem; }
.bica.sacrifice { border-left-color: var(--bloquant-txt); }
.bica.argument { border-left-color: var(--vert); }
.bica .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne); }
.bica .v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; }
.bica .v.vide { color: var(--bloquant-txt); font-style: italic; }

.bic-src { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); padding: 0 .65rem; line-height: 1.4; }
.bic-src.vide { color: var(--clair-terne); font-style: italic; }
.bic-n { display: flex; gap: .7rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); padding: 0 .65rem; }
.bic-n b { color: var(--clair); }
.bic-n .alerte, .bic-n .alerte b { color: var(--bloquant-txt); }
.bic-g { padding: .2rem .65rem 0; }
.bic-g .b { width: 100%; }

/* ————————————————————— Le dispositif ————————————————————— */

.di-canal { display: grid; gap: .35rem; margin-bottom: .7rem; }
.dic-t { display: flex; align-items: center; gap: .5rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.dic-b { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; padding: .08rem .38rem;
  border: 1px solid currentColor; }
.dic-b.or { color: var(--or); }
.dic-b.vert { color: var(--vert); }
.dic-b.violet { color: var(--violet); }

.di-l { display: grid; gap: .3rem; }
.di-a { text-align: left; background: var(--nuit-carte); border: 1px solid var(--trait);
  border-left: 2px solid var(--trait-clair); padding: .45rem .6rem; cursor: pointer;
  font: inherit; color: var(--clair); display: grid; gap: .2rem; }
.di-a:hover { border-color: var(--trait-clair); }
.di-a.tenu { border-left-color: var(--vert); }
.di-a.tendu { border-left-color: var(--attente); }
.di-a.depasse { border-left-color: var(--bloquant-txt); }
.dia-h { display: flex; align-items: baseline; gap: .5rem; }
.dia-lieu { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne);
  border: 1px solid var(--trait); padding: 0 .28rem; }
.dia-nom { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); flex: 1; }
.dia-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.di-a.depasse .dia-t { color: var(--bloquant-txt); }
.di-a.tendu .dia-t { color: var(--attente); }
.di-a.tenu .dia-t { color: var(--vert); }
.dia-q { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.4; }
.dia-m { display: flex; gap: .6rem; flex-wrap: wrap; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.dia-m .alerte { color: var(--bloquant-txt); }

.coche { display: flex; align-items: center; gap: .45rem; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); margin-top: .5rem; }

/* ————————————————————— Le pipeline ————————————————————— */

.pi-charge { display: grid; gap: 1.6rem; }
.pi-p { display: grid; gap: .7rem; }
.pip-tete { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; }
.pip-nom { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--clair); text-decoration: none; }
.pip-nom:hover { color: var(--or); }
.pip-ref { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0; color: var(--clair-terne); }
.pip-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-left: auto; }

.pi-etages { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.pie { display: grid; gap: .2rem; }
.pie-t { display: flex; justify-content: space-between; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pie-t span { color: var(--clair-doux); }

.pi-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; }
.pil { position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  background: var(--nuit-carte); border-top: 2px solid var(--trait-clair);
  aspect-ratio: 4/3; overflow: hidden; }
.pil:hover { outline: 1px solid var(--or); outline-offset: -1px; }
.pil .vignette { height: 100%; }
.pil .vignette img { height: 100%; object-fit: cover; }
.pil-bas { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .05rem;
  padding: 1.2rem .4rem .35rem; text-align: left;
  background: linear-gradient(to top, rgba(14,15,17,.93) 40%, rgba(14,15,17,0)); }
.pil-n { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair); line-height: 1.2; }
.pil-m { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-doux); }
.pil-ok { position: absolute; right: .3rem; top: .3rem; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 9px; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  background: var(--vert); color: var(--clair); }
.pip-plus { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); text-decoration: none; }
.pip-plus:hover { color: var(--or); }

/* Les retours */
.pi-fbs { display: grid; gap: .6rem; }
.pi-fb { background: var(--nuit-carte); 
 border-left: 2px solid var(--trait-clair); padding: .6rem .7rem; display: grid; gap: .35rem; }
.pi-fb.attente { border-left-color: var(--attente); }
.pi-fb.alerte { border-left-color: var(--bloquant-txt); }
.pi-fb.vert { border-left-color: var(--vert); }
.pifb-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.pifb-d { color: var(--clair); }
.pifb-a { color: var(--clair-doux); }
.pifb-c, .pifb-p { color: var(--clair-terne); }
.pifb-p { text-decoration: none; }
.pifb-p:hover { color: var(--or); }
.pifb-t { font-size: var(--t-lire); letter-spacing: var(--ls-lire); line-height: 1.45; font-family: var(--lecture); }
.pifb-i { display: flex; gap: .8rem; flex-wrap: wrap; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pifb-i b { color: var(--clair); }
.pifb-i .alerte, .pifb-i .alerte b { color: var(--bloquant-txt); }
.pifb-m { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.pifbm-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--bloquant-txt); }
.pifbm-l { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); border: 1px solid var(--trait); padding: 0 .3rem; }
.pifb-mo { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); border-left: 2px solid var(--trait);
  padding-left: .5rem; }
.pifb-g { display: flex; gap: .35rem; }
.pifb-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .16rem .4rem; }

/* Qui bouscule */
.pi-auteurs { display: grid; gap: .5rem; margin: .8rem 0; }
.pi-au { background: var(--nuit-carte); padding: .55rem .7rem;
 display: grid; gap: .3rem; }
.pi-au.client { border-left: 2px solid var(--or); }
.piau-h { display: flex; align-items: center; gap: .5rem; }
.piau-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.piau-p { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-left: auto; }
.piau-b { height: 5px; background: var(--nuit); }
.piau-b i { display: block; height: 100%; background: var(--or); }
.pi-au.client .piau-b i { background: var(--accent); }
.piau-c { display: flex; gap: .8rem; flex-wrap: wrap; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.piau-c b { color: var(--clair); }
.piau-c .alerte, .piau-c .alerte b { color: var(--bloquant-txt); }
.piau-c .vert, .piau-c .vert b { color: var(--vert); }
.piau-c .attente, .piau-c .attente b { color: var(--attente); }

/* ————————————————————— L'écran d'asset ————————————————————— */

.as-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.as-c { background: var(--nuit-carte); 
 border-top: 2px solid var(--trait-clair); padding: .55rem .6rem; display: grid; gap: .4rem;
 align-content: start; }
.as-c.vide { border-style: dashed; }
.as-c.vide.dur { border-top-color: var(--bloquant-txt); }
.as-c.pleine { border-top-color: var(--vert); }
.as-c.horssujet { opacity: .4; }
.asc-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); display: flex; justify-content: space-between; gap: .4rem; align-items: baseline; }
.asc-ext, .asc-n { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.asc-zone { display: grid; place-items: center; gap: .1rem; min-height: 80px;
  border: 1px dashed var(--trait-clair); background: none; cursor: pointer;
  font: inherit; color: var(--clair-terne); }
.asc-zone:hover { border-color: var(--or); color: var(--or); }
.ascz-plus { font-size: var(--t-titre); letter-spacing: var(--ls-titre); line-height: 1; }
.ascz-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.asc-brief { display: grid; gap: .18rem; }
.ascb-l { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); line-height: 1.4; }
.ascb-l b { display: block; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne);
  font-weight: 400; }
.ascb-l i { color: var(--attente); font-style: italic; }
.asc-cout { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); line-height: 1.4; }
.as-c.horssujet .asc-cout { color: var(--clair-terne); }
.asc-vues { display: flex; gap: .3rem; flex-wrap: wrap; }
.ascv { width: 72px; }
.ascv .vignette { height: 48px; }
.ascv span { display: block; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.asc-fs { display: grid; gap: .25rem; }
.ascf { display: grid; gap: .05rem; border-left: 2px solid var(--vert); padding-left: .4rem; }
.ascf-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.ascf-m { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.ascf .b { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); padding: .08rem .25rem; justify-self: start; }
.asc-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .12rem .3rem; }

/* ————————————————————— Mes briefs et leur chaîne ————————————————————— */

.br-chaine-l { display: grid; gap: 1rem; }
.br-c { background: var(--nuit-carte); 
 border-left: 2px solid var(--attente); padding: .7rem .8rem; display: grid; gap: .55rem; }
.br-c.complet { border-left-color: var(--vert); }
.brc-h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.brc-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--clair); text-decoration: none; }
.brc-n:hover { color: var(--or); }
.brc-r { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0; color: var(--clair-terne); }
.brc-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.brc-e { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-left: auto; }
.brc-e.alerte { color: var(--bloquant-txt); }
.brc-e.attente { color: var(--attente); }

.br-chaine { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 2px; }
.brp { display: grid; gap: .1rem; text-decoration: none; padding: .35rem .45rem;
  background: var(--nuit); border-top: 2px solid var(--trait); }
.brp:hover { background: var(--nuit-relief); }
.brp.fait { border-top-color: var(--vert); }
.brp.ici { border-top-color: var(--or); background: var(--nuit-relief); }
.brp-n { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); line-height: 1.25; }
.brp.fait .brp-n { color: var(--clair); }
.brp-e { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.brp.fait .brp-e { color: var(--vert); }
.brp.ici .brp-e { color: var(--or); }

.brc-p { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); display: grid; gap: .1rem;
  border-left: 2px solid var(--or); padding-left: .55rem; }
.brc-p.vert { border-left-color: var(--vert); }
.brc-p b { color: var(--clair); font-weight: 400; }
.brc-p span { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.brc-d { display: flex; gap: .5rem; flex-wrap: wrap; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.brcd { display: flex; align-items: center; gap: .3rem; }
.brc-g { display: flex; gap: .4rem; flex-wrap: wrap; }
.brc-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .2rem .5rem; }

/* ————————————————————— La demande de proposition ————————————————————— */

.dm { display: grid; gap: .6rem; }
.dm-l { display: grid; gap: .35rem; }
.dm-d { text-align: left; background: var(--nuit-carte); border: 1px solid var(--trait);
  border-left: 2px solid var(--trait-clair); padding: .45rem .6rem; cursor: pointer;
  font: inherit; color: var(--clair); display: grid; gap: .2rem; }
.dm-d:hover { border-color: var(--trait-clair); }
.dm-d.attente { border-left-color: var(--attente); }
.dm-d.vert { border-left-color: var(--vert); }
.dm-d.manque { border-left-color: var(--bloquant-txt); }
.dmd-h { display: flex; align-items: center; gap: .45rem; }
.dmd-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); flex: 1; }
.dmd-m { display: flex; gap: .7rem; flex-wrap: wrap; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.dmd-m .alerte { color: var(--bloquant-txt); }
.dmd-m .attente { color: var(--attente); }
.dmd-k { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); }

.dm-e { display: grid; gap: .25rem; margin: .9rem 0; padding-left: .6rem;
  border-left: 2px solid var(--trait); }
.dme-t { display: flex; align-items: baseline; gap: .45rem; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.dme-n { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid var(--or); color: var(--or); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); border-radius: 9px; }
.dme-a { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); line-height: 1.45; }
.dme-c { margin-top: .2rem; }
.dme-c textarea, .dme-c select, .dme-c input { width: 100%; }

/* ————————————————————— L'ordre du pipeline ————————————————————— */

.pi-rangs { display: grid; gap: 1.6rem; margin-top: 1.2rem; }
.pi-rang { display: grid; gap: .5rem; }
.pir-tete { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--trait-clair); padding-bottom: .3rem; }
.pi-rang.vert .pir-tete { border-bottom-color: var(--vert); }
.pi-rang.or .pir-tete { border-bottom-color: var(--or); }
.pi-rang.attente .pir-tete { border-bottom-color: var(--attente); }
.pir-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: 0; }
.pi-rang.vert .pir-n { color: var(--vert); }
.pi-rang.or .pir-n { color: var(--or); }
.pi-rang.attente .pir-n { color: var(--attente); }
.pi-rang.terne .pir-n { color: var(--clair-terne); }
.pir-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); flex: 1; }
.pir-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pir-regle { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); line-height: 1.45;
  border-left: 2px solid var(--trait); padding-left: .55rem; }
.pir-l { display: grid; gap: .8rem; }

.pi-rc { display: grid; gap: .4rem; }
.pirc-h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pirc-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--clair); text-decoration: none; }
.pirc-n:hover { color: var(--or); }
.pirc-p { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); flex: 1; }
.pirc-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.pirc-m { display: flex; align-items: center; gap: .5rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pircm-b { display: block; width: 120px; height: 4px; background: var(--nuit); }
.pircm-b i { display: block; height: 100%; background: var(--or); }
.pirc-m .vert { color: var(--vert); }
.pirc-m .alerte { color: var(--bloquant-txt); }
.pirc-r { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); }
.pirc-d { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pil-exe { position: absolute; left: 0; top: 0; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  padding: .08rem .3rem; background: var(--vert); color: var(--clair); }

/* ————————————————————— L'ingesteur de brief ————————————————————— */

.br-ing { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.bri-s { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.bri-s.vide { color: var(--attente); }

.ing { display: grid; gap: .8rem; }
.ing-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .9rem;
  align-items: start; }
.ing-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--or);
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; margin-bottom: .5rem;
  display: flex; justify-content: space-between; }
.ing-t span { color: var(--clair-terne); letter-spacing: 0; }
.ing-src { width: 100%; font-family: var(--lecture); font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.6; }

.ing-droite { display: grid; gap: .35rem; max-height: 62vh; overflow-y: auto; padding-right: .3rem; }
.ing-c { background: var(--nuit-carte); border-left: 2px solid var(--trait); padding: .4rem .55rem;
  display: grid; gap: .25rem; }
.ing-c.rempli { border-left-color: var(--vert); }
.ing-c.manque { border-left-color: var(--bloquant-txt); }
.ingc-t { display: flex; align-items: baseline; gap: .4rem; }
.ingc-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); flex: 1; }
.ingc-p { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.ingc-v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; color: var(--clair); }
.ingc-cit { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); font-style: italic; line-height: 1.4; }
.ingc-cit.sans { color: var(--attente); }
.ing-c .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .14rem .4rem; justify-self: start; }
.ingc-sugg { display: grid; gap: .2rem; margin-top: .25rem; }
.ingcs { text-align: left; background: none; border: 1px dashed var(--trait-clair);
  color: var(--clair-doux); font: inherit; font-size: var(--t-eti); letter-spacing: var(--ls-eti); line-height: 1.4;
  padding: .25rem .4rem; cursor: pointer; }
.ingcs:hover { border-color: var(--or); color: var(--clair); }
.ingc-f { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--attente); }

.ing-pied { display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  flex-wrap: wrap; border-top: 1px solid var(--trait); padding-top: .6rem; }
.ingp-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* Écran seulement : à l'impression, la largeur se mesure sur la page par défaut
 * (816 px) et non sur la diapositive — les pistes s'empilaient dans le PDF. */
@media screen and (max-width: 900px) {
  .ing-corps { grid-template-columns: minmax(0, 1fr); }
  .ing-droite { max-height: none; }
}

/* ————————————————————— La file : que dois-je faire maintenant ————————————————————— */

.fi { display: grid; gap: .8rem; }
.fi-tete { display: flex; align-items: center; gap: .8rem; }
.fit-n { font-size: var(--t-nombre); letter-spacing: var(--ls-nombre); line-height: 1; color: var(--or); }
.fit-t { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.fit-s { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.fi-vide { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; border-left: 2px solid var(--vert); }
.fi-vide svg { color: var(--vert); }
.fiv-t { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.fiv-s { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne); max-width: 46ch; line-height: 1.5; }

.fi-l { display: grid; gap: .8rem; }
.fi-f { display: grid; gap: .3rem; }
.fif-t { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--trait); padding-bottom: .25rem; }
.fift-n { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; }
.fi-f.alerte .fift-n { color: var(--bloquant-txt); }
.fi-f.attente .fift-n { color: var(--attente); }
.fi-f.or .fift-n { color: var(--or); }
.fift-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.fi-x { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit;
  background: var(--nuit-carte); border: 1px solid var(--trait);
  border-left: 2px solid var(--trait-clair); padding: .5rem .65rem; }
.fi-x:hover { border-color: var(--trait-clair); background: var(--nuit-relief); }
.fi-f.alerte .fi-x { border-left-color: var(--bloquant-txt); }
.fi-f.attente .fi-x { border-left-color: var(--attente); }
.fi-f.or .fi-x { border-left-color: var(--or); }
.fix-c { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.fix-q { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.fix-k { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); line-height: 1.4; }
.fix-v { display: flex; gap: 3px; flex: 0 0 auto; }
.fix-v .vignette { width: 46px; height: 34px; }
.fix-f { color: var(--clair-terne); font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); flex: 0 0 auto; }
.fi-x:hover .fix-f { color: var(--or); }

.cmd-sep { display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 .2rem; }
.cmd-sep::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.cmd-sep span { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne); }

/* Les trois groupes du rail */
.rail-groupe { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne);
  padding: .8rem .9rem .25rem; }
.rail-nav > div:first-child .rail-groupe { padding-top: .3rem; }

/* Les écarts, dans Mes attentes */
.ec-l { display: grid; gap: 1rem; margin-top: .6rem; }
.ec-g { display: grid; gap: .35rem; }
.ecg-t { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--trait); padding-bottom: .25rem; }
.ec-g.alerte .ecg-t { border-bottom-color: var(--bloquant-txt); }
.ec-g.attente .ecg-t { border-bottom-color: var(--attente); }
.ec-g.or .ecg-t { border-bottom-color: var(--or); }
.ecg-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.ec-g.alerte .ecg-n { color: var(--bloquant-txt); }
.ec-g.or .ecg-n { color: var(--or); }
.ecg-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); flex: 1; }
.ecg-q { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); line-height: 1.45; }
.ec-lignes { display: grid; gap: .3rem; }
.ec-x { display: flex; gap: .6rem; background: var(--nuit-carte); padding: .4rem .55rem;
  border-left: 2px solid var(--trait); }
.ecx-v { flex: 0 0 76px; }
.ecx-v .vignette { height: 52px; }
.ecx-c { min-width: 0; flex: 1; display: grid; gap: .12rem; }
.ecx-q { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.35; }
.ecx-m { display: flex; gap: .6rem; flex-wrap: wrap; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.ecx-m .alerte { color: var(--bloquant-txt); }
.ecx-k { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); line-height: 1.4; }
.ecx-g { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .15rem; }
.ecx-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .1rem .3rem; }

/* Un retour client hiérarchisé : son niveau, son onde, et ce qui passe avant */
.ec-x.fb { border-left-width: 2px; }
.ec-x.fb.attend { opacity: .72; border-left-style: dashed; }
.ecx-h { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .15rem; }
.ecx-niv { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; border: 1px solid currentColor;
  padding: .04rem .3rem; color: var(--clair-terne); }
.ecx-niv.alerte { color: var(--bloquant-txt); }
.ecx-niv.attente { color: var(--attente); }
.ecx-niv.or { color: var(--or); }
.ecx-onde { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.ecx-m .or { color: var(--or); }
.ecx-att { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--attente); line-height: 1.4;
  border-left: 2px solid var(--attente); padding-left: .45rem; margin-top: .15rem; }
.ecx-pret { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); line-height: 1.4; }


/* ————————————————————— L'importeur de fil ————————————————————— */

.if { display: grid; gap: .8rem; }
.if-l { display: grid; gap: .35rem; max-height: 46vh; overflow-y: auto; padding-right: .3rem; }
.if-m { background: var(--nuit-carte); border-left: 2px solid var(--trait);
  padding: .4rem .55rem; display: grid; gap: .2rem; }
.if-m.idee { border-left-color: var(--or); }
.if-m.deja { opacity: .5; }
.ifm-h { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ifm-q { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.ifm-d { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.ifm-h select { margin-left: auto; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .1rem .2rem; }
.ifm-t { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; white-space: pre-wrap; }
.ifm-b { justify-self: start; background: none; border: 1px solid var(--trait);
  color: var(--clair-terne); font: inherit; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .1rem .35rem; cursor: pointer; }
.ifm-b:hover { border-color: var(--or); color: var(--or); }
.ifm-b.actif { border-color: var(--or); color: var(--or); }
.ifm-e { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--vert); }
.ifm-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .4rem; }

/* ————————————————————— La mesure : plafonner la lecture ————————————————————— */

/* Un titre, un coût, une phrase : rien de tout ça ne se lit sur deux mille
 * pixels. On plafonne à la mesure, on ne centre pas — le regard démarre
 * toujours au même endroit. */
.fix-c, .fix-q, .fix-k,
.ecx-q, .ecx-k, .ecx-att, .ecx-pret,
.pir-regle, .brc-p,
.bic-c, .bica .v,
.rtb .v, .dia-q { max-width: var(--mesure); }

.pifb-t, .ifm-t, .fb-texte, .vsv-m { max-width: var(--mesure-large); }

/* Une ligne de file ne s'étire pas non plus : elle garde sa mesure et laisse
 * le reste respirer. */
.fi-x { max-width: calc(var(--mesure-large) + 12rem); }
.fi-tete { max-width: var(--mesure-large); }



/* Le rythme vertical : les séparations de section respirent sans creuser. */
.cmd-sep { margin: 1.4rem 0 .4rem; }

/* ————————————————————— Les avis ————————————————————— */

.avis-pile { position: fixed; right: 1rem; bottom: 1rem; z-index: 120;
  display: grid; gap: .4rem; max-width: min(30rem, calc(100vw - 2rem)); }
.avis { display: flex; gap: .6rem; align-items: flex-start;
  background: var(--nuit-relief); border: 1px solid var(--trait-clair);
  border-left: 3px solid var(--clair-terne); padding: .65rem .75rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.avis.refus { border-left-color: var(--attente); }
.avis.fait { border-left-color: var(--vert); }
.avis.grave { border-left-color: var(--bloquant-txt); background: var(--nuit-carte); }
.avis-t { flex: 1; font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; }
.avis.grave .avis-t { color: var(--bloquant-txt); }
.avis-x { background: none; border: 0; color: var(--clair-terne); font: inherit;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); cursor: pointer; padding: 0 .2rem; }
.avis-x:hover { color: var(--clair); }

.rail-plein { display: block; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--attente);
  text-decoration: none; margin-top: .2rem; }
.rail-plein.echec { color: var(--bloquant-txt); }
.rail-plein:hover { text-decoration: underline; }

/* L'en-tête d'une pièce : ce qu'on voit avant de juger */

.o-v.sans { color: var(--clair-terne); }

/* ————————————————————— Les éléments de marque ————————————————————— */

.mq { display: grid; gap: .9rem; margin: 1.2rem 0; }
.mq-tete { display: flex; align-items: center; gap: .8rem;
  border-bottom: 1px solid var(--trait); padding-bottom: .6rem; }
.mqt-c { flex: 1; min-width: 0; }
.mqt-n { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); }
.mqt-q { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne); }

/* Le logo a une place certaine : partout où la marque est nommée. */
.mq-p { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden;
  background: var(--papier); border: 1px solid var(--trait-clair); }
.mq-p img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mq-p.sans { background: none; border-style: dashed; color: var(--attente);
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }

.mq-roles { display: grid; gap: .9rem; }
.mq-r { display: grid; gap: .4rem; }
.mqr-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  color: var(--or); display: flex; gap: .5rem; align-items: baseline; }
.mqr-t span { color: var(--clair-terne); letter-spacing: 0; text-transform: none;
  font-size: var(--t-eti); line-height: var(--lh-eti); }

.mq-gamme { display: grid; gap: .4rem; }
.mq-sku { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.mq-s { background: var(--nuit-carte); 
 border-top: 2px solid var(--trait-clair); display: grid; gap: .25rem; }
.mq-s.montre { border-top-color: var(--vert); }
.mq-s .vignette { height: 6.5rem; border: 0; }
.mqs-sans { height: 6.5rem; display: grid; place-items: center;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); background: var(--nuit); }
.mqs-c { padding: 0 .5rem .5rem; display: grid; gap: .1rem; }
.mqs-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.mqs-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.mqs-m { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.mqs-m.vert { color: var(--vert); }
.mqs-m .alerte { color: var(--bloquant-txt); }
.mq-note { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.5;
  max-width: var(--mesure); margin: .5rem 0; }


/* ————————————————————— Une intention, trois modes ————————————————————— */

/* Un mode n'est pas une catégorie : on n'a pas à choisir avant d'arriver.
 * Il se présente donc après le titre, pas comme une navigation. */
.dc { display: grid; gap: 1.2rem; }
.dc-tete { max-width: var(--mesure); }
.dct-c h2 { font-size: var(--t-ecran); letter-spacing: var(--ls-ecran); line-height: 1.15; }
.dct-q { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne); margin-top: .3rem; line-height: 1.5; }

.dc-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2px; align-items: stretch; }
.dcm { position: relative; min-width: 0; text-align: left; cursor: pointer;
  font: inherit; background: none; border: 0; border-bottom: 2px solid var(--trait);
  color: var(--clair-doux); padding: .5rem .7rem .55rem; display: grid; gap: .1rem;
  align-content: center; }
.dcm-n, .dcm-q { padding-right: 2rem; }
.dcm:hover { background: var(--nuit-carte); color: var(--clair); }
.dcm.ici { border-bottom-color: var(--or); color: var(--clair); background: var(--nuit-carte); }
.dcm-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0; }
.dcm-q { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.dcm-c { position: absolute; right: .6rem; top: .5rem; min-width: 1.15rem; height: 1.15rem;
  display: grid; place-items: center; border-radius: .6rem; padding: 0 .3rem;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
  background: var(--alerte); color: var(--n900); font-weight: 600;
  border-radius: var(--r-pilule); }

.dc-corps { display: grid; gap: 1.2rem; }
.dc-corps > .zone, .dc-corps .zone { padding: 0; max-width: none; }

/* ————————————————————— Le rail : quatre intentions ————————————————————— */

.rail-i { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .9rem;
  text-decoration: none; color: var(--clair-doux); border-left: 2px solid transparent; }
.rail-i:hover { background: var(--nuit-carte); color: var(--clair); }
.rail-i[aria-current] { background: var(--nuit-carte); color: var(--clair);
  border-left-color: var(--or); }
.rail-i .ico { flex: 0 0 auto; opacity: .8; margin-top: .1rem; }
.rail-i[aria-current] .ico { opacity: 1; color: var(--or); }
.rail-c { flex: 1; min-width: 0; display: grid; gap: .05rem; }
.rail-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0; }
.rail-q { font-size: var(--t-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); line-height: 1.3; }

@media (max-width: 820px) {
  .rail-i { padding: .45rem .7rem; }
  .rail-q { display: none; }
  .dc-modes { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* ————————————————————— Constater ————————————————————— */


/* Les objectifs : ils vivent ici parce qu'ils regardent le mois. */
.cs-obj { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.cs-o { position: relative; text-align: left; cursor: pointer; font: inherit;
  background: var(--nuit-carte); border: 1px solid var(--trait);
  border-left: 2px solid var(--trait-clair); color: var(--clair);
  padding: .55rem .65rem .7rem; display: grid; gap: .1rem; }
.cs-o:hover { border-color: var(--trait-clair); }
.cs-o.tenu { border-left-color: var(--vert); }
.cs-o.manque { border-left-color: var(--bloquant-txt); }
.cs-o.flou { border-left-color: var(--trait-clair); }
.cso-v { font-size: var(--t-nombre); letter-spacing: var(--ls-nombre); line-height: 1; }
.cs-o.tenu .cso-v { color: var(--vert); }
.cs-o.manque .cso-v { color: var(--bloquant-txt); }
.cso-v.sans { color: var(--clair-terne); }
.cso-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.cso-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); margin-top: .2rem; }
.cso-j { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--nuit); }
.cso-j i { display: block; height: 100%; background: var(--trait-clair); }
.cs-o.tenu .cso-j i { background: var(--vert); }
.cs-o.manque .cso-j i { background: var(--alerte); }

@media (max-width: 700px) {
  .cs-l { grid-template-columns: minmax(0, 1fr) auto; }
  .csl-b { grid-column: 1 / -1; }
}


/* ————————————————————— Ma fin de mois ————————————————————— */





.ci-l { display: grid; gap: .4rem; margin-top: .6rem; }
.ci-o { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .1rem .7rem;
  text-align: left; font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--clair); padding: .5rem .6rem; border-left: 2px solid var(--trait-clair);
  border-radius: var(--r-xs); }
.ci-o:hover { background: var(--surface-1); }
.ci-o.tenu { border-left-color: var(--succes); }
.ci-o.manque { border-left-color: var(--bloquant); }
.cio-v { grid-row: 1 / 3; font-size: var(--t-titre); line-height: 1; }
.cio-c { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.cio-n { font-size: var(--t-meta); line-height: var(--lh-meta); }

/* ————————————————————— Les réglages : un avertissement, puis des réglages ————————————————————— */

.rg-tete { display: grid; gap: .9rem; padding: 1.2rem 1.4rem 1.1rem;
  background: var(--surface-2); border-radius: var(--r-m);
  border-left: 2px solid var(--trait-clair); max-width: var(--mesure-large); }
.rg-tete.risque { border-left-color: var(--bloquant); }
.rg-tete.sain { border-left-color: var(--succes); }
.rgt-c { display: flex; gap: .9rem; align-items: flex-start; }
.rgt-h { font-size: var(--t-ecran); line-height: 1; }
.rg-tete.risque .rgt-h { color: var(--bloquant-txt); }
.rg-tete.sain .rgt-h { color: var(--succes); }
.rg-tete h2 { font-size: var(--t-ecran); line-height: var(--lh-ecran);
  letter-spacing: var(--ls-ecran); font-weight: 500; }
.rg-tete.risque h2 { color: var(--bloquant-txt); }
.rgt-q { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); margin-top: .3rem; }
.rgt-s { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); margin-top: .35rem; }
.rgt-g { display: flex; gap: .5rem; flex-wrap: wrap; }
.rgt-j { display: grid; gap: .25rem; }
.rgt-j i { display: block; height: 3px; background: var(--arbitrage);
  border-radius: var(--r-pilule); }
.rgt-j span { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }

/* ————————————————————— Mon équipe : le tableau comparable ————————————————————— */


/* Les initiales d'un avatar sont du texte : la couleur du poste reste au
 * filet, l'encre passe le minimum de contraste. */
.avatar { color: var(--clair-doux); border-width: 2px; font-weight: 500; }
.avatar.vide { color: var(--clair-terne); }

/* D'où vient ce que ce navigateur détient. */
.prov { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .04em; }
.prov.disque { color: var(--clair-terne); }
.prov.navigateur, .prov.fichier-impossible { color: var(--arbitrage); }
.prov.attente, .prov.exemple { color: var(--clair-terne); }



/* ————————————————————— La matrice : le trou nommé ————————————————————— */

/* Un marché promis que rien ne porte occupait un blanc — donc rien. Il occupe
 * désormais une case, hachurée et bordée : un vide qui se compte du regard,
 * au même encombrement qu'une pièce réelle. */
.rt-c.trou {
  display: grid; align-content: center; justify-items: center; gap: .3rem;
  background: repeating-linear-gradient(-45deg,
    transparent 0 7px, rgba(255, 77, 79, .06) 7px 14px);
  border: 1px dashed var(--bloquant); border-top-width: 2px; border-top-style: solid;
}
.rt-c.trou:hover { outline-color: var(--bloquant); background: rgba(255, 77, 79, .1); }
.rt-c.trou.mou { border-color: var(--arbitrage); border-top-color: var(--arbitrage);
  background: repeating-linear-gradient(-45deg,
    transparent 0 7px, rgba(245, 166, 35, .06) 7px 14px); }
.rt-c.trou.mou:hover { outline-color: var(--arbitrage); }

.rtct-c { font-size: var(--t-h2); line-height: 1; color: var(--bloquant-txt);
  letter-spacing: .04em; }
.rt-c.trou.mou .rtct-c { color: var(--arbitrage); }
.rtct-x { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0;
  color: var(--clair-terne); }
.rt-c.trou .rtc-bas { position: static; background: none; padding: .2rem .5rem 0;
  text-align: center; }

/* ————————————————————— La liste des dossiers ————————————————————— */

/* Des cartes d'un quart d'écran ne tiennent plus à quatre dossiers, et elles
 * rangent par date d'arrivée. Ici : une ligne par dossier, l'ordre est celui
 * de ce qui ne tient pas, et ce qui tient pâlit et descend. */
.dl { display: grid; gap: 1.2rem; }
.dl-h { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; }
.dl-t { font-size: var(--t-ecran); line-height: var(--lh-ecran); letter-spacing: var(--ls-ecran);
  color: var(--clair); max-width: 26ch; }
.dl-s { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); margin-top: .3rem; }

.dl-corps { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem;
  align-items: start; }
.dl-liste { display: grid; }

.dl-r { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: .9rem; align-items: center; padding: .85rem 0 .85rem .9rem;
  border-bottom: 1px solid var(--trait); border-left: 2px solid transparent;
  text-decoration: none; transition: background var(--tr-rapide); }
.dl-r:hover { background: var(--surface-2); }
.dl-r.tenable { opacity: .72; }
.dl-r.tenable:hover { opacity: 1; }
.dl-r.flou { border-left-color: var(--arbitrage); }
.dl-r.intenable { border-left-color: var(--bloquant); }

.dlr-v { display: block; width: 4.5rem; height: 3.2rem; overflow: hidden;
  border-radius: var(--r-xs); background: var(--surface-3); }
.dlr-v .vignette, .dlr-v img { width: 100%; height: 100%; object-fit: cover; }
.dlr-c { display: grid; gap: .12rem; min-width: 0; }
.dlr-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.dlr-m { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.dlr-verdict { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--succes); }
.dl-r.intenable .dlr-verdict { color: var(--bloquant-txt); }
.dl-r.flou .dlr-verdict { color: var(--arbitrage); }
.dlr-b2 { color: var(--clair-terne); }
.dlr-d { display: flex; align-items: center; gap: .8rem; }
.dlr-fl { color: var(--clair-terne); font-size: var(--t-titre); line-height: 1; }
.dl-r:hover .dlr-fl { color: var(--accent); }

/* Le dossier en défaut prend la place : c'est le seul sur lequel il y a
 * quelque chose à faire aujourd'hui. */
.dl-r.grand { grid-template-columns: 11rem minmax(0, 1fr) auto;
  padding: 1.3rem 0 1.4rem 1.1rem; align-items: start; }
/* Sans visuel, la colonne d'image ne se réserve pas : le texte la prend. */
.dl-r.grand.sansvisuel { grid-template-columns: minmax(0, 1fr) auto; }
.dlr-sv { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  font-style: italic; margin-top: .35rem; }
/* Une tuile de 72 px ne porte pas le mot « aucun visuel » : elle reste sourde. */
.dlr-v.vide { background: var(--surface-3); }
.dl-r.grand .dlr-v { width: 11rem; height: 8rem; }
.dl-r.grand .dlr-c { gap: .3rem; }
.dl-r.grand .dlr-n { font-size: var(--t-h2); line-height: var(--lh-h2); }
.dl-r.grand .dlr-verdict { font-size: var(--t-titre); line-height: var(--lh-titre); margin-top: .35rem; }
.dlr-b { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--bloquant-txt); }
.dlr-cout { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); margin-top: .3rem; }
.dl-r.grand .dlr-d { flex-direction: column; align-items: flex-end; gap: .6rem; }
.dlr-eq { display: flex; gap: .2rem; }
.dlr-sans { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne);
  font-style: italic; }

.dl-pips { display: flex; gap: 2px; }
.dlp { width: 10px; height: 10px; border-radius: 2px; background: var(--trait-clair); }
.dlp.ok, .dlp.vert { background: var(--succes); }
.dlp.attente, .dlp.orange { background: var(--arbitrage); }
.dlp.alerte, .dlp.rouge { background: var(--bloquant); }

/* ————— Ce qui bloque, tous dossiers ————— */
/* Cinq dossiers sans décideur, c'est une question à poser une fois. */
.dl-mur { display: grid; gap: .5rem; align-content: start;
  border-left: 1px solid var(--trait); padding-left: 1.5rem; }
.dlm-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  color: var(--clair-terne); }
.dlm-l { display: grid; }
.dlm-b { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .1rem .7rem;
  padding: .7rem 0; border-bottom: 1px solid var(--trait); }
.dlmb-p { width: 10px; height: 10px; border-radius: 50%; background: var(--arbitrage);
  margin-top: .35rem; }
.dlm-b.dur .dlmb-p { background: var(--bloquant); }
.dlmb-c { display: grid; gap: .15rem; }
.dlmb-q { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.dlmb-q b { font-weight: 400; color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.dlmb-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.dlmb-d { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }

.dl-pied { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  font-style: italic; }

/* Les dossiers clos, repliés. L'histoire reste entière et à un clic ; elle
   n'occupe simplement pas la place de ce qui demande une décision. */
.dl-clos { margin-top: 1.4rem; border-top: 1px solid var(--trait); padding-top: .9rem; }
.dl-clos > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem; min-height: var(--cible); padding: .5rem 0;
  font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.dl-clos > summary b { color: var(--clair); }
.dl-clos-q { color: var(--clair-terne); }
.dl-clos > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dl-clos[open] > summary { margin-bottom: .6rem; }

@media (max-width: 1100px) {
  .dl-corps { grid-template-columns: minmax(0, 1fr); }
  .dl-mur { border-left: 0; padding-left: 0; border-top: 1px solid var(--trait); padding-top: 1rem; }
}
@media (max-width: 700px) {
  .dl-r, .dl-r.grand { grid-template-columns: 3.5rem minmax(0, 1fr); }
  /* Sans visuel, la colonne d'image ne se réserve pas — ici comme au bureau.
     La règle existait pour le grand écran et manquait ici : le titre du
     dossier tombait dans une colonne de 3,5 rem et débordait de 89 px. */
  .dl-r.sansvisuel, .dl-r.grand.sansvisuel { grid-template-columns: minmax(0, 1fr); }
  /* La ligne entière est un lien : au doigt, la flèche ne sert qu'à déborder. */
  .dlr-fl { display: none; }
  .dl-r.grand .dlr-v { width: 3.5rem; height: 2.6rem; }
  .dlr-d { grid-column: 2; justify-content: flex-start; }
  /* Sans visuel il n'y a qu'une colonne : épingler la bande d'état sur la
     deuxième en crée une implicite, dimensionnée par son contenu, et le titre
     du dossier se retrouve dans 45 px. Elle passe dessous, comme le reste. */
  .dl-r.sansvisuel .dlr-d { grid-column: 1; }
  .dl-r.grand .dlr-d { flex-direction: row; align-items: center; }
}


/* ————————————————————— Écarté ne veut pas dire illisible ————————————————————— */

/* Une idée écartée porte le motif qui l'a écartée — c'est la matière de la
 * jurisprudence, et c'est justement ce qu'on relit. L'atténuer à .55 la faisait
 * passer sous le seuil : elle s'atténue par la bordure et l'encre. */
.bic.ecartee, .route.ecartee { opacity: 1; }
.bic.ecartee .bic-t { color: var(--clair-doux); }
.bic.ecartee .bic-m { color: var(--clair-terne); }
.bic.ecartee,
.route.ecartee { border-left: 2px solid var(--trait-clair); }

/* Le gris atténué frôle le seuil sur les fonds de surface : deux crans plus
 * clair, et il le passe partout. */
.dlr-m, .dlr-b2 { color: var(--clair-doux); }

/* ————————————————————— Chaque champ porte son geste ————————————————————— */

/* Les lignes de l'identité et les énoncés de la stratégie deviennent des
 * boutons : même geste, même retour visuel, aucune décoration en plus. */



.vt-l { display: grid; gap: .5rem; }
.vt-m { display: grid; gap: .3rem; padding: .9rem 1.1rem; background: var(--surface-2);
  border-radius: var(--r-m); }
.vtm-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; width: 100%;
  text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; position: relative; }
.vtm-h::after { content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); min-height: var(--cible); height: 100%; }
.vtm-p { width: 11px; height: 11px; border-radius: 3px; background: var(--trait-clair);
  flex: 0 0 auto; }
.vtm-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.vtm-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  flex: 1 1 auto; }
.vtm-e { font-size: var(--t-titre); color: var(--clair-terne); }
.vtm-c { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure-large); }
.vtm-c.manque { color: var(--arbitrage); }

.vtm-b { display: grid; gap: 1.2rem; margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--trait); }

/* ————————————————————— La fiche d'un pack ————————————————————— */

/* Un pack est un article, pas une vignette : son code, ses mentions, les
 * marchés qui le vendent, et les pièces qui le montrent. */
.fi { display: grid; gap: 1.1rem; }
.fi-v { width: 100%; max-height: 190px; display: grid; place-items: center;
  background: var(--surface-3); border-radius: var(--r-s); overflow: hidden; padding: .6rem; }
.fi-v img { max-width: 100%; max-height: 178px; object-fit: contain; }

.fi-ctrl { display: grid; gap: .35rem; padding: .9rem 1rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 3px solid var(--arbitrage); }
.fic-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  color: var(--arbitrage); }
.fic { display: grid; gap: .05rem; }
.fic-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.fic-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.fi-ok { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--succes);
  padding: .8rem 1rem; background: var(--surface-2); border-radius: var(--r-m);
  border-left: 3px solid var(--succes); }

.fi-champs { display: grid; }
.fi-b { display: grid; gap: .4rem; }
.fib-t { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  color: var(--clair-terne); border-bottom: 1px solid var(--trait); padding-bottom: .3rem; }
.fib-t span { letter-spacing: 0; }

.fi-mk { display: flex; flex-wrap: wrap; gap: .3rem; }
.fimk { min-height: var(--cible); padding: 0 .8rem; background: none;
  border: 1px solid var(--trait-clair); border-radius: var(--r-xs);
  color: var(--clair-terne); font-size: var(--t-meta); cursor: pointer; }
.fimk:hover { border-color: var(--accent); color: var(--clair); }
.fimk.ici { background: var(--succes); border-color: var(--succes); color: var(--n900); }

.fi-u { display: grid; gap: .2rem; }
.fiu { display: grid; gap: .05rem; padding: .45rem .6rem; background: var(--surface-3);
  border-radius: var(--r-xs); border-left: 2px solid transparent; }
.fiu.hors { border-left-color: var(--bloquant); }
.fiu-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
.fiu-m { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.fiu.hors .fiu-m { color: var(--bloquant-txt); }

.fi-f { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .15rem .7rem;
  padding-top: .6rem; border-top: 1px solid var(--trait); }
.fif-l { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
  color: var(--clair-terne); }
.fif-v { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux);
  overflow-wrap: anywhere; }
.fif-v.alerte { color: var(--arbitrage); }


/* ————— Créer, archiver, remettre ————— */
.fi-g { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ————— Passer d'une fiche à l'autre ————— */
.fi-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--trait); }
.fin-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  font-variant-numeric: tabular-nums; }
.fi-nav .b.nu[disabled] { opacity: .35; cursor: default; }

/* ————— Un champ qui appartient à quelqu'un d'autre ————— */
/* Il ne s'invente pas : il se réclame. La couleur le dit avant le clic. */

.che-p { font-size: var(--t-micro); line-height: 1; letter-spacing: 0;
  color: var(--clair-terne); border: 1px solid var(--trait-clair);
  border-radius: var(--r-xs); padding: .1rem .35rem; }
.fic-a { font-size: var(--t-micro); line-height: 1; letter-spacing: 0;
  color: var(--clair-terne); border: 1px solid var(--trait-clair);
  border-radius: var(--r-xs); padding: .1rem .35rem; margin-left: .4rem; }
.fic-q { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }

/* ————— Une campagne à plusieurs marques ————— */
.mq-multi { display: grid; gap: .7rem; }
.mqm { display: grid; gap: .5rem; padding: .8rem 1rem; background: var(--surface-2);
  border-radius: var(--r-m); }
.mqm-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.mqm-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.mqm-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  flex: 1 1 auto; }
.mqm-v { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  text-decoration: none; position: relative; }
.mqm-v::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); min-height: var(--cible); height: 100%; }
.mq-el { display: flex; flex-wrap: wrap; gap: .4rem; }
.mqe { display: grid; place-items: center; width: 62px; height: 46px;
  background: var(--surface-3); border-radius: var(--r-xs); overflow: hidden; padding: .2rem; }
.mqe img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mqe-x { font-size: var(--t-micro); color: var(--clair-terne); }

/* ————— Les champs à références multiples ————— */
.ch-multi { display: flex; flex-wrap: wrap; gap: .3rem; }
.ch-mi { min-height: var(--cible); padding: 0 .8rem; background: none;
  border: 1px solid var(--trait-clair); border-radius: var(--r-xs);
  color: var(--clair-terne); font-size: var(--t-meta); cursor: pointer; }
.ch-mi:hover { border-color: var(--accent); color: var(--clair); }
.ch-mi.ici { background: var(--accent); border-color: var(--accent); color: var(--n900); }


/* ————————————————————— Les packs montrés par une pièce ————————————————————— */

/* Une pièce montre des produits. Lesquels, ça ne se devine pas — et c'est le
 * seul endroit d'où l'on voit qu'un pack apparaît là où il n'est pas vendu. */

.pmh-t { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--bloquant-txt); }
.pmh-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux);
  max-width: var(--mesure); }

/* ————— La gamme sur la plateforme de marque ————— */
/* Le nom de la campagne est un geste. */
.pe-nom { background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: inherit; font: inherit; position: relative; }
.pe-nom::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); min-height: var(--cible); height: 100%; }
.pe-nom:hover h2 { color: var(--accent); }


/* La santé du dossier ne commande jamais. */
.psa-q {
  margin: .5rem 0 0;
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  color: var(--clair-doux);
}
.psa-reste {
  margin-top: .35rem;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne);
}

/* ————————————————————— Le même dossier, chez People ————————————————————— */

.pe-people {
  display: grid; gap: .2rem; margin-top: .7rem;
  padding: .55rem .8rem; background: var(--nuit-carte);
  border-left: 2px solid var(--trait-clair);
}
.pe-people.multiple { border-left-color: var(--attente); }
.pe-people.absent { border-left-color: var(--trait); }
.pep-t {
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0;
 color: var(--clair-terne);
}
.pep-r { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
.pe-people.absent .pep-r { color: var(--clair-terne); font-style: italic; }
.pep-n {
  margin: .15rem 0 0;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-doux); max-width: var(--mesure);
}
.pe-people.multiple .pep-n { color: var(--attente); }

/* ————————————————————— Une pièce qui dure ————————————————————— */

/* Un film se regarde. Il s'affichait par son arrêt sur image, ce qui revenait
 * à juger un film sur une photo. */
.v-film { display: block; background: var(--n900); }
.v-film video { display: block; width: 100%; height: auto; max-height: 62vh; }
.v-toile.v-film video, .an-toile.film video { max-height: 58vh; }

.dt-media { margin-bottom: .7rem; }
.dt-fichiers { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.dtf { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--accent);
  text-decoration: none; border-bottom: 1px solid var(--trait-clair); }
.dtf:hover { border-bottom-color: var(--accent); }

/* On annote là où le film est arrêté : « à 0:12 » se retrouve, « au milieu » non. */
.an-toile.film { cursor: default; }
.an-film { display: grid; gap: .35rem; margin-top: .5rem; }
.anf-a { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  color: var(--clair-terne); }
.anl-tc { min-height: var(--cible); padding: 0 .45rem;
  background: var(--nuit-relief); border: 1px solid var(--accent); border-radius: var(--r-xs);
  color: var(--accent); font: inherit;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  cursor: pointer; white-space: nowrap; }
.anl-tc:hover { background: var(--accent); color: #000; }

/* ═══════════════ LA PROSE N'EST PAS UNE LÉGENDE ═══════════════
 *
 * Mesure faite sur l'application : 56 % des caractères affichés l'étaient à
 * 11 ou 12 px, et 4 % seulement à la taille du texte principal. Ce n'était pas
 * l'échelle qui était fausse — c'était l'affectation. Des phrases entières,
 * des verbatims client, des motifs d'arbitrage étaient réglés en taille de
 * légende, et c'est ça qui donnait la sensation de densité.
 *
 * Trente-six classes portent des phrases. Elles montent d'un cran. Les
 * libellés en capitales espacées, eux, restent en bas de gamme : ils se lisent
 * plus grands que leur taille.
 */

/* Ce qui porte une phrase de contexte ou de conséquence — se lit vraiment. */
.dcm-q, .juj, .vide-ref, .eqpd, .cobm-q, .cobe-c, .cobe-m, .slfi-q, .stc-q, .pir-q, .pirc-p, .mqs-q,
.atdq-o, .auteurs, .codt-s, .sld-m, .e-charge, .slp-a, .atx-k, .bri-s,
.rail-q, .rd-ref, .poste, .pil-n, .eqp-q,
.pirc-d, .egc-verdict, .pip-n, .atdq-p, .cobl-v, .l-v, .b-v, .critere,
.ecx-m, .ecx-k, .fix-k {
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
}

/* Ce qui porte un motif, un argument, un coût écrit — la matière du poste. */
.pir-regle, .jum, .bic-src, .egc-cout,
.f-aide, .vide, .cout, .b-texte, .prix span, .fix-k {
  font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire);
  max-width: var(--mesure);
}

/* Un verbatim se lit comme une citation, pas comme une note de bas de page. */
blockquote, .message, .verbatim {
  font-size: var(--t-lire); line-height: 1.6;
}



/* Une personne archivée garde sa place au rail — on n'efface pas une
 * paternité — mais elle ne se lit plus comme quelqu'un qu'on peut affecter. */

.fi-parti { margin-left: .45rem; font-size: var(--t-eti); line-height: var(--lh-eti);
  letter-spacing: var(--ls-eti); color: var(--bloquant-txt); }
.fi-motif { margin-top: .25rem; font-size: var(--t-eti); line-height: var(--lh-eti);
  letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* ————————————————————— La planche de présentation / livraison ————————————————————— */

/* Un lot survolé. Le pointillé dit la cible, jamais un remplissage : on doit
 * continuer à lire ce qu'il y a dessous pour savoir où on lâche. */
.survol-lot { outline: 2px dashed var(--or); outline-offset: 4px; }

/* ————————————————————— L'arbitrage d'un lot ————————————————————— */

.arb { display: grid; max-height: 46vh; overflow-y: auto; margin: .6rem 0; }
.arb-l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .6rem; align-items: center; padding: .5rem .2rem;
  border-bottom: 1px solid var(--trait); border-left: 2px solid transparent; padding-left: .5rem; }
.arb-l.sur { border-left-color: var(--succes); }
.arb-l.hesite { border-left-color: var(--arbitrage); }
.arb-l.aucun { border-left-color: var(--bloquant); }
.arb-f { display: grid; gap: .08rem; min-width: 0; }
.arb-fn { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  color: var(--clair-doux); overflow-wrap: anywhere; }
.arb-e { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.arb-l.hesite .arb-e { color: var(--arbitrage); }
.arb-l.aucun .arb-e { color: var(--bloquant-txt); }
.arb-c select { width: 100%; min-width: 0; }

@media (max-width: 760px) {
  .arb-l { grid-template-columns: 1fr; gap: .3rem; }
}

/* ————————————————————— Les diapositives que le deck ne savait pas rendre ————————————————————— */

/* La slide d'arbitrage. C'est le seul endroit du document où l'agence prend un
 * risque — la page lui donne la place que ce risque mérite. */
.pg-arb { display: grid; align-content: center; gap: .9rem; }
.pg-arb .pg-phrase { font-family: var(--lecture); font-size: var(--t-display);
  line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--clair);
  text-wrap: balance; max-width: 22ch; }
.pg-arb .pg-phrase.alerte { color: var(--bloquant-txt); font-style: italic; }
.pg-arb .pg-blocs { display: grid; gap: .5rem; max-width: var(--mesure); }

/* Les pistes côte à côte : même largeur, même finition. Une piste bâclée se
 * voit, et elle discrédite les deux autres. */
.pg-comp { display: grid; align-content: center; gap: .8rem; }
.pg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.pg-col { display: grid; gap: .25rem; align-content: start; padding: .7rem .8rem;
  background: var(--surface-1); border-top: 2px solid var(--trait-clair); }
.pg-col .t { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--clair); }
.pg-col .v { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); }

/* Le manifesto et la vérité inconfortable : écrits pour être dits. Rythme
 * marqué, une idée par ligne, et rien autour. */
.pg-manif { display: grid; align-content: center; gap: .8rem; }
.pg-manif-t { font-family: var(--lecture); font-size: var(--t-display); line-height: 1.25;
  letter-spacing: var(--ls-display); color: var(--clair); max-width: 26ch; text-wrap: balance; }

/* De … à … : le passage est l'information, pas les deux états. */
.pg-trans { display: grid; align-content: center; gap: 1rem; }
.pg-trans .pg-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.pg-trans .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne); }
.pg-trans .v { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre);
  color: var(--clair); text-wrap: balance; }

/* Un document projeté : il se lit, il ne se survole pas. On lui donne le
 * défilement plutôt que de l'amputer. */
.pg-doc { overflow-y: auto; align-content: start; padding: 1.2rem 1.6rem; }
.pg-doc .co-doc { max-width: var(--mesure); }

.pg-puces { margin: .3rem 0; padding-left: 1.2rem; display: grid; gap: .25rem; max-width: var(--mesure); }
.pg-puces li { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--clair-doux); }
.pg-texte .pg-phrase { font-family: var(--lecture); font-size: var(--t-h2); line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2); color: var(--clair); max-width: var(--mesure); text-wrap: balance; }

@media (max-width: 760px) {
  .pg-trans .pg-deux { grid-template-columns: 1fr; }
}

/* ————— Le registre du Radar : la hiérarchie des briefs —————
 *
 * Un brief maître porte ses tâches, et ses tâches portent les leurs. Le rang
 * se lit à l'indentation et au filet, pas à une puce : à trois étages, les
 * puces se confondent et l'arbre redevient une liste. */


/* ————— Le panneau « relevé » : les mots d'un document, pas une saisie ————— */
.rlv-eti { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
 color: var(--clair-terne); margin-bottom: .3rem; }
.rlv-r { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.rlv-r + .rlv-r { margin-top: .15rem; }
/* La citation se lit comme une citation : la serif de lecture, en italique.
   C'est la marque de ce qu'un humain a écrit, par opposition au calculé. */
.rlv-p { font-family: var(--lecture); font-style: italic;
  font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux);
  margin: 0; max-width: var(--mesure); }


/* ————— L'arbre par marque : marque → campagne → projet ————— */
/* La lentille par marque est réécrite dans studio-vues.css (passe 7a). */

.dl-fil { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  margin: 0 0 .2rem; }
.dl-fil a { color: var(--clair-terne); }

/* ————— Le chiffrage : jours par poste ————— */
.chf-l { display: grid; gap: .3rem; }
.chf-r { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem auto;
  gap: .5rem; align-items: center; }
.chf-t { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux);
  font-variant-numeric: tabular-nums; margin-left: auto; }
@media (max-width: 700px) { .chf-r { grid-template-columns: minmax(0, 1fr) 4.5rem auto; } }


/* ————— Le manifeste de remise ————— */
.rms { display: grid; gap: .5rem; }
.rms-p { padding: .6rem .7rem; border-left: 2px solid var(--bloquant);
  background: var(--surface-2); }
.rms-p.ok { border-left-color: var(--vert); }
.rmsp-n { font-family: var(--affichage); font-size: var(--t-meta);
  line-height: var(--lh-meta); color: var(--clair); overflow-wrap: anywhere; }
.rmsp-v { margin-left: .4rem; font-size: var(--t-micro); color: var(--clair-terne); }
.rmsp-m { font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-terne); margin-top: .1rem; overflow-wrap: anywhere; }
.rmsp-d { margin-top: .3rem; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-doux); overflow-wrap: anywhere; }
.rmsp-x { margin-top: .3rem; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--bloquant-txt); overflow-wrap: anywhere; }
/* Le résultat d'un projet : ce qu'on a mesuré, et d'où ça vient. */
.res-l { padding: .35rem 0; border-top: 1px solid var(--trait); }
.res-l b { display: block; font-size: var(--t-meta); line-height: var(--lh-meta);
  color: var(--clair); font-weight: 400; overflow-wrap: anywhere; }
.res-v { margin-left: .4rem; color: var(--vert); font-variant-numeric: tabular-nums; }
.res-s { display: block; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-terne); overflow-wrap: anywhere; }
/* Une statistique qui se saisit reste une statistique : le bouton ne se voit
   qu'au survol et au focus, la tuile ne change pas de forme. */
button.st.nu { appearance: none; background: none; border: 0; padding: 0;
  text-align: inherit; font: inherit; color: inherit; cursor: pointer;
  border-radius: var(--r-xs); }
button.st.nu:hover { background: var(--surface-2); }
button.st.nu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ————————————————————— La diapositive client : une page de papier ————————————————————— */

/* Le deck se lit sur papier, en 16:9, quel que soit le thème de l'écran : c'est
 * ce que le client reçoit et imprime. Les jetons de couleur sont redéfinis dans
 * la page, si bien que chaque gabarit existant passe au papier sans réécriture. */
.pg {
  --clair: var(--papier-encre); --clair-doux: #39413C; --clair-terne: var(--papier-terne);
  --trait: #D9D4C9; --trait-clair: #C9C2B4; --surface-1: #FAF8F3; --nuit-carte: transparent;
  --or: #8A5D10;
  width: min(1240px, 100%); aspect-ratio: 16 / 9; box-sizing: border-box;
  padding: clamp(1.4rem, 4vw, 3.4rem) clamp(1.4rem, 5vw, 4.4rem);
  background: var(--papier); color: var(--papier-encre);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 18px 40px -22px rgba(0,0,0,.55);
  align-content: center;
}
/* Une phrase longue ne se compose pas comme un titre : elle se lit. */
.pg .pg-phrase.long { font-size: var(--t-titre); line-height: 1.4; max-width: 56ch; }
.pg .pg-t { color: var(--papier-encre); text-wrap: balance; }
.pg .pg-eti { font-family: var(--affichage); font-weight: 600; font-size: var(--t-meta); color: var(--or); letter-spacing: 0; }
.pg .pg-phrase { color: var(--papier-encre); text-wrap: balance; max-width: 30ch; }
.pg .pg-b .v, .pg .pg-col .v { color: #39413C; }
.pg .pg-col { background: transparent; border-top: 2px solid var(--papier-encre); padding: .6rem 0 0; }
.pg .pg-col .t { font-family: var(--affichage); font-weight: 600; font-size: var(--t-meta); }

/* L'ouverture : le nom de la campagne, seul. */
.pg-titre { justify-items: start; text-align: left; align-content: end; }
.pg-titre .pg-t { font-family: var(--affichage); font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.03em; max-width: 18ch; }
.pg-date { font-size: var(--t-meta); color: var(--papier-terne); }

/* L'intercalaire : l'étage qui commence, en grand, sur l'encre. */
.pg-etape { background: var(--papier-encre); color: var(--papier); align-content: end; gap: 1rem; }
.pg-etape .pg-t { color: var(--papier); font-family: var(--affichage); font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.025em; }
.pg-etape-p { font-family: var(--lecture); font-size: var(--t-titre); line-height: 1.4; color: #D9D4C9; max-width: 52ch; text-wrap: pretty; }
.pg-etape.e-pistes { background: #8E1B17; }
.pg-etape.e-pistes .pg-etape-p { color: #F3D9D4; }

/* La plateforme : l'idée directrice en grand, ses trois appuis dessous. */
.pg-plateforme { gap: 1.2rem; }
.pg-plateforme .pg-phrase { font-family: var(--lecture); font-size: clamp(1.4rem, 2.9vw, 2.4rem); line-height: 1.22; max-width: 34ch; }

/* La piste : son KV à gauche, son idée à droite. */
.pg-piste { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 2.6rem); }
.pg-piste .pg-gauche .vignette img, .pg-kv .vignette img { max-height: 62vh; width: 100%; object-fit: contain; background: #fff; }
.pg-piste .pg-t { font-family: var(--ecrit); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.1; }
.pg-lede { font-family: var(--lecture); font-size: var(--t-titre); line-height: 1.4; color: var(--papier-encre); max-width: 46ch; }

/* Le KV, en grand, avec ses accroches. */
.pg-kv { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 2.4rem); }
.pg-kv .pg-t { font-family: var(--ecrit); font-style: italic; font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.12; }
.pg-kv-l { display: grid; gap: .7rem; align-content: center; }
.pg-acc { display: grid; gap: .3rem; font-family: var(--ecrit); font-style: italic; font-size: var(--t-titre); line-height: 1.35; }

/* Le spot : l'animatique, puis le storyboard en bande. */
.pg-spot { align-content: start; gap: .7rem; }
.pg-spot-l { font-size: var(--t-meta); line-height: 1.5; color: var(--papier-terne); }
.pg-film { width: 100%; max-height: 46vh; aspect-ratio: 16 / 9; background: #000; }
.pg-sb { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.pg-sb.h { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pg-sbc { margin: 0; display: grid; gap: .25rem; align-content: start; }
.pg-sbc img { width: 100%; height: auto; background: #fff; border: 1px solid var(--trait); }
.pg-sbv { aspect-ratio: 9 / 16; border: 1px dashed var(--trait-clair); padding: .5rem; font-size: var(--t-eti); line-height: 1.35; color: var(--papier-terne); overflow: hidden; }
.pg-sb.h .pg-sbv { aspect-ratio: 16 / 9; }
.pg-sbc figcaption { font-family: var(--ecrit); font-style: italic; font-size: var(--t-eti); line-height: 1.3; color: #39413C; }

/* Le dossier : les diapositives empilées, comme le client les recevra. */
/* Des colonnes bornées : une largeur en pourcentage ne doit pas se calculer contre
 * une colonne dimensionnée par son contenu (le dossier s'élargissait à 5 000 px). */
.pr-dossier { grid-template-columns: minmax(0, 1fr); }
.prd-diapos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; justify-items: center; }
.pr-diapo { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.prd-annexes { border-top: 1px solid var(--trait); padding-top: .8rem; }
.prd-annexes > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--clair-terne); }
.prd-retirees { margin: 0 0 .6rem; font-size: var(--t-meta); color: var(--clair-terne); }

/* Écran seulement : à l'impression, la largeur se mesure sur la page par défaut
 * (816 px) et non sur la diapositive — les pistes s'empilaient dans le PDF. */
@media screen and (max-width: 900px) {
  .pg { aspect-ratio: auto; min-height: 56vw; }
  .pg-piste, .pg-kv { grid-template-columns: minmax(0, 1fr); }
}

/* Imprimée, une diapositive est une page au format écran large (13,33 × 7,5 pouces,
 * celui d'un deck) : une page nommée, pour ne pas imposer ce format au reste. */
@page diapo { size: 13.333in 7.5in; margin: 0; }
@media print {
  .prd-annexes, .prd-tete, .pr .bande, .pt-bloc { display: none; }
  .prd-diapos, .pt-impression { gap: 0; }
  .pr-diapo { page: diapo; break-after: page; display: block; }
  .pr-diapo .pg { width: 13.333in; height: 7.5in; max-width: none; aspect-ratio: auto; box-shadow: none; overflow: hidden; }
  .pg-film { display: none; }
}

/* ————————————————————— Le partage ————————————————————— */

.pt-bloc { display: grid; gap: .6rem; }
.pt-liste { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.pt-l, .pt-pdf { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--trait); }
.pt-n { display: grid; gap: .1rem; }
.pt-n span { font-size: var(--t-meta); color: var(--clair-terne); }
.pt-g { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.pt-q { font-size: var(--t-meta); color: var(--clair-terne); max-width: 75ch; margin: 0; }

/* La page partagée : un document, sur papier, sans l'application autour. */
body[data-vue="partage"] { background: var(--papier); color: var(--papier-encre); }
body[data-vue="partage"] .rail { display: none; }
.pt-page { max-width: 1240px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.4rem) 16px 3rem; display: grid; gap: 1.6rem;
  --clair: var(--papier-encre); --clair-doux: #39413C; --clair-terne: var(--papier-terne); --trait: #D9D4C9; }
.pt-tete { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; border-bottom: 2px solid var(--papier-encre); }
.pt-tete h1 { margin: .15rem 0; font-family: var(--affichage); font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; }
.pt-doc { font-family: var(--affichage); font-weight: 600; color: #8A5D10; }
.pt-meta { font-size: var(--t-meta); color: var(--papier-terne); }
.pt-tete-d { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pt-pied { font-size: var(--t-eti); color: var(--papier-terne); border-top: 1px solid #D9D4C9; padding-top: .8rem; }
.pt-vide { padding: 4rem 0; display: grid; gap: .6rem; }
body[data-impression="1"] { background: #fff; }
.pt-impression { display: grid; gap: 0; }
.pt-impression .pr-diapo { break-after: page; }
.pt-impression .pg { width: 100%; box-shadow: none; }
@media print {
  .pt-tete-d { display: none; }
  .pt-page { padding: 0; }
}

/* La piste : pour qui, et ce qui la distingue des autres. */
.pg-pour { font-family: var(--affichage); font-weight: 600; font-size: var(--t-meta); color: #8E1B17; }
.pg-dist { font-size: var(--t-meta); line-height: 1.5; color: #39413C; max-width: 60ch; padding-left: .7rem; border-left: 2px solid #8E1B17; }
.pg-dist b { font-family: var(--affichage); font-weight: 600; color: var(--papier-encre); }

/* Le comparatif et la couverture du brief : un tableau, une colonne par piste. */
.pg-comp { align-content: start; }
.pg-tw { overflow: visible; }  /* un conteneur défilant empêcherait la diapositive de s'allonger */
.pg-cmp { width: 100%; border-collapse: collapse; font-size: var(--t-meta); line-height: 1.4; table-layout: fixed; }
.pg-cmp th, .pg-cmp td { text-align: left; vertical-align: top; padding: .45rem .55rem; border-bottom: 1px solid #D9D4C9; }
.pg-cmp thead th { font-family: var(--ecrit); font-style: italic; font-weight: 500; font-size: var(--t-lire); border-bottom: 2px solid var(--papier-encre); }
.pg-cmp tbody th { font-family: var(--affichage); font-weight: 600; width: 16%; color: var(--papier-encre); }
.pg-cmp td { color: #39413C; }
.pg-cmp td.vide { color: #B3AC9F; }

/* Le dispositif : trois colonnes, ATL, BTL, TTL. */
.pg-disp { align-content: start; gap: 1rem; }
.pg-disp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.pg-disp-c { display: grid; gap: .6rem; align-content: start; }
.pg-disp-k { font-family: var(--affichage); font-weight: 700; font-size: var(--t-titre); color: #8E1B17; border-bottom: 2px solid var(--papier-encre); padding-bottom: .25rem; display: grid; }
.pg-disp-k span { font-weight: 400; font-size: var(--t-eti); color: var(--papier-terne); }
.pg-disp-a { display: grid; gap: .15rem; font-size: var(--t-meta); line-height: 1.4; color: #39413C; }
.pg-disp-a b { font-family: var(--affichage); color: var(--papier-encre); }
.pg-disp-m { font-size: var(--t-eti); color: var(--papier-terne); }

/* ————————————————————— Le style de la maison Matanga ————————————————————— */

/* Repris des decks de l'agence (End of Year Campaign, octobre 2026) : papier
 * chaud, titres en serif rouge, couverture et insight sur l'encre, pages concept
 * avec la boîte MESSAGE, pages KEY VISUAL, « Merci. » pour finir. Le contenu
 * reste celui de LA BARRE ; seul l'habillage vient du deck. */
.pg {
  --m-papier: #FBF4EF; --m-rouge: #C8372D; --m-encre: #1F1A19; --m-or: #E7B96B; --m-orange: #E8762B;
  --m-condense: "Futura Condensed ExtraBold", "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
  background: var(--m-papier); color: var(--m-encre);
}
.pg .pg-eti { font-family: var(--lecture); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.15; color: var(--m-rouge); letter-spacing: -.01em; }
.pg .pg-b, .pg .pg-col { background: #fff; border: 0; border-radius: 4px; padding: .7rem .8rem; }
.pg .pg-b .t, .pg .pg-col .t { font-family: var(--affichage); font-weight: 700; font-size: var(--t-meta); color: var(--m-rouge); }
.pg .pg-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }

/* La couverture : l'encre, le logo, le titre en capitales, la montagne. */
.pg.t-titre { background: #0E0D0D; color: #fff; position: relative; overflow: hidden; align-content: center; justify-items: start; }
.pg-titre .pg-logo { position: absolute; top: 7%; left: 5%; width: 18%; height: auto; }
.pg-titre .pg-montagne { position: absolute; right: 0; bottom: 0; width: 42%; height: auto; }
.pg-titre-b { position: relative; display: grid; gap: .8rem; max-width: 60%; }
.pg-titre .pg-t { font-family: var(--affichage); font-weight: 800; text-transform: uppercase; color: #fff; font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.01em; }
.pg-trait { width: 2.4rem; height: .4rem; background: var(--m-rouge); }
.pg-titre .pg-s, .pg-titre .pg-date { color: #BDB6B0; }

/* Les intercalaires et l'insight : l'encre. */
.pg.t-etape { background: var(--m-encre); }
.pg.t-etape.e-pistes { background: var(--m-encre); }
.pg-etape .pg-t { font-family: var(--affichage); font-weight: 800; text-transform: uppercase; color: #fff; }
.pg-etape .pg-t::after { content: ""; display: block; width: 2.4rem; height: .35rem; background: var(--m-rouge); margin-top: .9rem; }
.pg.t-strategie { background: var(--m-encre); color: #F3EDE7; }
.pg.t-strategie .pg-eti { color: var(--m-or); }
.pg.t-strategie .pg-phrase { font-family: var(--lecture); font-style: italic; color: #fff; }
.pg.t-strategie .pg-corps { color: #CFC7C0; }
.pg.t-strategie .pg-b { background: transparent; padding: 0; }
.pg.t-strategie .pg-b .t { color: var(--m-or); }
.pg.t-strategie .pg-b .v { color: #E4DDD6; }

/* La piste : la page concept. */
.pg.t-piste { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: clamp(1rem, 3vw, 2.4rem); }
.pg-concept-g, .pg-concept-d { display: grid; gap: .8rem; align-content: start; }
.pg.t-piste .pg-eti { font-family: var(--affichage); font-size: var(--t-eti); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.pg.t-piste .pg-t { font-family: var(--m-condense); font-style: normal; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.02; color: var(--m-encre); }
.pg.t-piste .pg-lede { font-family: var(--lecture); font-style: italic; font-weight: 700; font-size: var(--t-titre); line-height: 1.35; color: var(--m-encre); }
.pg-pills { display: grid; gap: .45rem; }
.pg-pill { display: grid; grid-template-columns: 8.5rem 1fr; gap: .7rem; align-items: center; font-size: var(--t-meta); line-height: 1.35; }
.pg-pill span { background: var(--m-rouge); color: #fff; border-radius: 999px; padding: .2rem .7rem; font-family: var(--m-condense); font-weight: 800; text-transform: uppercase; font-size: var(--t-eti); text-align: center; letter-spacing: .03em; }
.pg-message { background: var(--m-rouge); color: #fff; border-radius: 4px; padding: .8rem 1rem; display: grid; gap: .25rem; }
.pg-message span { font-size: var(--t-eti); text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-family: var(--affichage); font-weight: 700; }
.pg-message div { font-family: var(--m-condense); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.1; }
.pg-carte { background: #fff; border-radius: 4px; padding: .8rem 1rem; display: grid; gap: .6rem; }
.pg-carte .pg-b { padding: 0; background: transparent; }
.pg-noir { background: var(--m-encre); color: #fff; border-radius: 4px; padding: .8rem 1rem; display: grid; gap: .25rem; }
.pg-noir span { font-size: var(--t-eti); color: var(--m-or); text-transform: uppercase; letter-spacing: .08em; font-family: var(--affichage); font-weight: 700; }
.pg-noir div { font-family: var(--lecture); font-style: italic; font-weight: 700; line-height: 1.35; }

/* KEY VISUAL : le KV en grand, l'étiquette en haut à gauche. */
.pg.t-kv { grid-template-columns: minmax(0, .32fr) minmax(0, 1fr); align-items: stretch; gap: 1.2rem; padding-right: 0; padding-top: 0; padding-bottom: 0; }
.pg.t-kv .pg-kv-l { align-content: start; padding-top: clamp(1.2rem, 3vw, 2.4rem); }
.pg.t-kv .pg-eti { font-family: var(--affichage); font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .08em; }
.pg-kv-var { font-family: var(--lecture); font-style: italic; font-size: var(--t-meta); line-height: 1.35; color: var(--m-rouge); }
.pg-kv-n { font-family: var(--m-condense); font-weight: 800; text-transform: uppercase; font-size: var(--t-titre); line-height: 1.1; }
.pg.t-kv .pg-kv-v { display: grid; align-items: center; background: #fff; }
.pg.t-kv .pg-kv-v .vignette img { max-height: none; height: 100%; width: 100%; object-fit: contain; }

/* Merci. */
.pg.t-merci { background: #0E0D0D; color: #fff; justify-items: center; align-content: center; text-align: center; gap: .6rem; }
.pg-merci .pg-logo { width: 14%; height: auto; }
.pg-merci .pg-t { font-family: var(--affichage); font-weight: 500; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1; color: #fff; letter-spacing: -.03em; }
.pg-merci-c { font-family: var(--m-condense); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2.6vw, 2.1rem); color: var(--m-orange); }

/* Écran seulement : à l'impression, la largeur se mesure sur la page par défaut
 * (816 px) et non sur la diapositive — les pistes s'empilaient dans le PDF. */
@media screen and (max-width: 900px) {
  .pg.t-piste, .pg.t-kv { grid-template-columns: minmax(0, 1fr); }
  .pg-titre-b { max-width: 100%; }
}
/* Une animatique verticale garde ses proportions dans la diapositive. */
.pg-film.vertical { aspect-ratio: 9 / 16; width: auto; height: 46vh; max-height: 46vh; justify-self: start; }