/* 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.
 */

/* ————————————————————— La planche ————————————————————— */

.pl { display: grid; gap: 1.1rem; }

.pl-vide {
  display: grid; justify-items: center; gap: .5rem; text-align: center;
  padding: 3rem 1.5rem; border: 1px dashed var(--trait-clair); color: var(--clair-terne);
}
.pl-vide svg { color: var(--trait-clair); }
.plv-t { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--clair); }
.plv-s { font-size: var(--t-meta); letter-spacing: var(--ls-meta); max-width: 42ch; line-height: 1.5; }

.pl-tete { display: flex; justify-content: flex-end; }
.pl-densite { display: flex; gap: 2px; }
.pld {
  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: .12rem .45rem; cursor: pointer;
}
.pld.actif { color: var(--or); border-color: var(--or); }

.pl-grille { display: grid; gap: 1.6rem; }
.plm-tete {
  display: flex; align-items: baseline; gap: .6rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--trait); margin-bottom: .8rem;
}
.plm-nom { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: .04em; text-transform: uppercase; }
.plm-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* Trois densités. La case est une image ; le reste s'y pose. */
.pl-cases { display: grid; gap: .7rem; }
.pl-grille.dense .pl-cases { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.pl-grille.moyen .pl-cases { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }
.pl-grille.grand .pl-cases { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

.pl-c { display: flex; flex-direction: column; gap: .3rem; }

.plc-visuel {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--nuit-carte); border: 0; overflow: hidden;
  border-top: 2px solid var(--trait-clair);
  aspect-ratio: 16 / 10;
}
.pl-c.ok .plc-visuel { border-top-color: var(--vert); }
.pl-c.ecart .plc-visuel { border-top-color: var(--bloquant-txt); }
.plc-visuel:hover { outline: 1px solid var(--or); outline-offset: -1px; }
.plc-visuel .vignette { height: 100%; }
.plc-visuel .vignette img { height: 100%; object-fit: cover; }

.plc-haut {
  position: absolute; left: 0; right: 0; top: 0; display: flex;
  justify-content: space-between; align-items: flex-start; pointer-events: none;
}
.plc-marche {
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .1em; padding: .12rem .4rem;
  background: rgba(14,15,17,.86); color: var(--clair);
}
.plc-droite { display: flex; gap: 3px; padding: .25rem; }
.plc-retours, .plc-pastille {
  min-width: 19px; height: 19px; display: grid; place-items: center;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); border-radius: 10px; padding: 0 .28rem; color: var(--nuit);
}
.plc-retours { background: var(--or); }
.plc-pastille.ecart { background: var(--alerte); color: var(--clair); }
.plc-pastille.ok { background: var(--vert); color: var(--clair); }

/* Le bas de l'image : l'accroche, puis ce qui la qualifie. */
.plc-bas {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .1rem;
  padding: 1.6rem .55rem .45rem; pointer-events: none;
  background: linear-gradient(to top, rgba(14,15,17,.92) 42%, rgba(14,15,17,0));
}
.plc-copy { font-size: var(--t-lire); letter-spacing: var(--ls-lire); line-height: 1.25; color: var(--clair); }
.plc-copy.vide { color: var(--clair-terne); font-style: italic; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.plc-sous { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.pl-grille.dense .plc-copy { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.pl-grille.dense .plc-sous { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); }
.pl-grille.grand .plc-copy { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }

.plc-a { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .1rem .3rem; border: 1px solid var(--trait); color: var(--clair-doux); }
.plc-a.vide { color: var(--clair-terne); border-style: dashed; font-style: italic; }

.plc-ecart {
  text-align: left; width: 100%; cursor: pointer; background: none; border: 0;
  border-left: 2px solid var(--alerte); padding: .1rem .45rem;
  font: inherit; font-size: var(--t-eti); letter-spacing: var(--ls-eti); line-height: 1.35; color: var(--bloquant-txt);
}
.plc-gestes { display: flex; gap: .3rem; flex-wrap: wrap; }
.plc-gestes .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .16rem .32rem; }
.pl-grille.dense .plc-gestes { display: none; }
.pl-grille.dense .pl-c:hover .plc-gestes { display: flex; }

/* ————————————————————— 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; }

/* ————————————————————— Les mockups ————————————————————— */

.mk { display: grid; gap: .5rem; }
.mk-tete { display: flex; align-items: baseline; gap: .5rem; }
.mk-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; color: var(--clair-terne); }
.mk-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); flex: 1; }
.mk-bande { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.mk-c { background: var(--nuit-carte); }
.mk-c.perime { border-color: var(--alerte); }
.mk-l { font-size: var(--t-eti); letter-spacing: var(--ls-eti); padding: .3rem .4rem 0; line-height: 1.3; }
.mk-g { display: flex; justify-content: space-between; align-items: center; padding: .15rem .4rem .35rem; }
.mk-v { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.mk-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .1rem .28rem; }
.mk-vide { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); font-style: italic; line-height: 1.45; }
.mk-apercu { margin-top: .4rem; max-width: 200px; }

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

.pr { display: grid; gap: 1rem; }

.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; }

.pr-pages { display: grid; gap: .4rem; }
.pr-p {
 display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: start;
 background: var(--nuit-carte); padding: .55rem .6rem;
}
.pr-p.dette { border-left: 2px solid var(--alerte); }
.prp-rang { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); color: var(--trait-clair); text-align: center; }
.prp-corps { min-width: 0; display: grid; gap: .35rem; }
.prp-tete { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.prp-type { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: .03em; }
.prp-tire { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.prp-l { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.4; }
.prp-vide { display: flex; gap: .5rem; align-items: center; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); flex-wrap: wrap; }
.prp-vide .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .12rem .3rem; }
.prp-grille { display: flex; gap: .35rem; flex-wrap: wrap; }
.prp-c { width: 84px; }
.prp-c span { display: block; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); margin-top: .15rem; }
.prp-c .vignette.v-case { height: 54px; }
.prp-plus { display: grid; place-items: center; width: 44px; height: 54px;
  border: 1px dashed var(--trait-clair); font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.prp-gestes { display: flex; gap: .15rem; }
.prp-gestes .b { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); padding: .1rem .32rem; }

.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: .16em; color: var(--or); text-transform: uppercase; }
.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: .13em; 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: .13em; 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 ————————————————————— */

@media (max-width: 900px) {
  .pl-cases { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .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; }
  .pr-p { grid-template-columns: 1.4rem 1fr auto; }
}

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

@media print {
  .pl-cases { grid-template-columns: repeat(4, 1fr); }
  .plc-gestes, .prp-gestes, .pr-pied { display: none; }
  .pr-scene { position: static; }
  .pg { page-break-after: always; }
}

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

.rt { display: grid; gap: 1.1rem; }

.rt-scene { display: grid; gap: .4rem; }
.rts-toile { background: var(--nuit-carte); }
.rts-toile .vignette { height: auto; border: 0; }
.rts-toile .vignette img { height: auto; width: 100%; object-fit: contain; max-height: 46vh; }
.rts-pied { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.rts-auteurs { 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-doux); }

.rt-arg { display: grid; gap: .7rem; }
.rta-accroches { display: flex; gap: .4rem; flex-wrap: wrap; }
.rta-a {
  font-family: var(--lecture); font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); color: var(--clair);
  border-left: 2px solid var(--or); padding: .1rem .6rem;
}
.rta-a.trop { border-left-color: var(--bloquant-txt); color: var(--bloquant-txt); }

.rt-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.rtb { border-left: 2px solid var(--trait-clair); padding: .1rem .6rem; }
.rtb.alerte { border-left-color: var(--bloquant-txt); }
.rtb.vert { border-left-color: var(--vert); }
.rtb .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; color: var(--clair-terne); margin-bottom: .2rem; }
.rtb .v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.5; color: var(--clair-doux); }

.rta-porteurs { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.rta-porteurs .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; color: var(--clair-terne); }

.rt-bloc { display: grid; gap: .6rem; }
.rtbl-tete { display: flex; align-items: baseline; gap: .6rem;
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; }
.rtbl-tete .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--or); }
.rtbl-tete .n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.rt-groupe { display: grid; gap: .4rem; }
.rt-groupe.orphelin .rtg-code { background: var(--alerte); color: var(--clair); }
.rtg-tete { display: flex; align-items: baseline; gap: .5rem; }
.rtg-code { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .08em; padding: .08rem .34rem;
  background: var(--nuit-relief); color: var(--clair-doux); }
.rtg-nom { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.rtg-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* Le mur : une image, son nom, sa qualification. Rien d'autre. */
.rt-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .5rem; }

.rt-c {
  position: relative; display: block; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--nuit-carte); border: 0; border-top: 2px solid var(--trait-clair);
  aspect-ratio: 4 / 3;
}
.rt-c:hover { outline: 1px solid var(--or); outline-offset: -1px; }
.rt-c.grand { grid-column: span 2; aspect-ratio: 16 / 9; border-top-color: var(--or); }
.rt-c.ecart { border-top-color: var(--bloquant-txt); }
.rt-c.perime { border-top-color: var(--bloquant-txt); }
.rt-c .vignette { height: 100%; }
.rt-c .vignette img { height: 100%; object-fit: cover; }

.rtc-code {
  position: absolute; left: 0; top: 0; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .1em;
  padding: .1rem .38rem; background: rgba(14,15,17,.86); color: var(--clair);
}
.rtc-r {
  position: absolute; right: .25rem; top: .25rem; min-width: 18px; height: 18px;
  display: grid; place-items: center; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); border-radius: 9px;
  padding: 0 .26rem; background: var(--or); color: var(--nuit);
}
.rtc-bas {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .05rem;
  padding: 1.4rem .45rem .38rem; text-align: left;
  background: linear-gradient(to top, rgba(14,15,17,.93) 40%, rgba(14,15,17,0));
}
.rtc-n { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair); line-height: 1.2; }
.rt-c.grand .rtc-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.rtc-m { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-doux); }
.rtc-e { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--bloquant-txt); }
.rtc-ok { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--vert); }

/* ————————————————————— Le mur des livrables, par route ————————————————————— */

.mur-r { display: grid; gap: 1.6rem; }
.mr-route { display: grid; gap: .8rem; }
.mr-tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--trait); padding-bottom: .35rem; }
.mr-route.retenue .mr-tete { border-bottom-color: var(--vert); }
.mr-route.hors .mr-tete { border-bottom-color: var(--bloquant-txt); }
.mrt-nom { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: .04em; text-transform: uppercase; }
.mrt-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); flex: 1; }
.mr-tete .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .14rem .4rem; }

.mr-groupe { display: grid; gap: .4rem; }
.mr-groupe.orphelin .mrg-code { background: var(--alerte); color: var(--clair); }
.mrg-tete { display: flex; align-items: baseline; gap: .5rem; }
.mrg-code { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .08em; padding: .08rem .34rem;
  background: var(--nuit-relief); color: var(--clair-doux); }
.mrg-nom { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.mrg-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

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

.inf {
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .08em; text-transform: uppercase;
  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); }

@media (max-width: 900px) {
  .rt-c.grand { grid-column: span 2; }
  .rt-mur { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

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

.rt-tete { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.rt-tete h2 { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: .01em; }
.rt-controle { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--attente); border: 1px solid var(--attente);
  padding: .08rem .38rem; margin-left: auto; }
.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 ————————————————————— */

.vd { display: grid; gap: .5rem; }
.vd-gestes { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.vd-v { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); border: 1px solid var(--trait);
  padding: .1rem .35rem; margin-right: .2rem; }
.vd-gestes .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .18rem .45rem; }

.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); }

/* ————————————————————— Le moodboard ————————————————————— */

.mb { display: grid; gap: .6rem; margin-top: 1.4rem; }
.mb-tete { display: flex; align-items: baseline; gap: .6rem;
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; }
.mb-tete .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--or); }
.mb-tete .n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); flex: 1; }
.mb-groupe { display: grid; gap: .35rem; }
.mbg-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; color: var(--clair-terne); display: flex; gap: .4rem; }
.mbg-t span { color: var(--clair-doux); }

/* ————————————————————— L'atelier ————————————————————— */

.at { display: grid; gap: 1rem; }
.at-corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.at-tete { display: flex; align-items: baseline; gap: .6rem;
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; margin-bottom: .6rem; }
.at-tete .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--or); }
.at-tete .n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.at-groupe { display: grid; gap: .4rem; margin-bottom: .9rem; }
.atg-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em; color: var(--clair-terne); }
.at-groupe.retenue .atg-t { color: var(--vert); }
.at-groupe.ecartee { opacity: .55; }

.at-i { display: flex; gap: .6rem; background: var(--nuit-carte);
 border-left: 2px solid var(--trait-clair); padding: .5rem .6rem; }
.at-i.retenue { border-left-color: var(--vert); }
.at-i.ecartee { border-left-color: var(--trait-clair); }
.ati-v { flex: 0 0 92px; }
.ati-v .vignette { height: 70px; }
.ati-c { min-width: 0; flex: 1; }
.ati-t { font-size: var(--t-lire); letter-spacing: var(--ls-lire); line-height: 1.35; font-family: var(--lecture); }
.ati-m { display: flex; align-items: center; gap: .35rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne); margin-top: .3rem; flex-wrap: wrap; }
.ati-q { margin-left: auto; }
.ati-mo { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); margin-top: .3rem;
  border-left: 2px solid var(--trait-clair); padding-left: .5rem; }
.ati-g { display: flex; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
.ati-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .14rem .32rem; }

.at-f { background: var(--nuit-carte); padding: .5rem .6rem;
 margin-bottom: .5rem; display: grid; gap: .4rem; }
/* Un fil clos garde son texte lisible : c'est son relief qui baisse, pas son encre. */
.at-f.clos { border-left-color: var(--trait-clair); }
.at-f.clos .atf-c, .at-f.clos .atfm-q { color: var(--clair-terne); }
.atf-tete { display: flex; align-items: center; gap: .5rem; }
.atf-s { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); flex: 1; }
.atf-msgs { display: grid; gap: .45rem; }
.atf-m { display: flex; gap: .45rem; align-items: flex-start; }
.atfm-t { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; }
.atfm-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.atf-c { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--vert); border-left: 2px solid var(--vert); padding-left: .5rem; }
.atf-g { display: flex; gap: .3rem; flex-wrap: wrap; }
.atf-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .14rem .32rem; }

@media (max-width: 1000px) {
  .at-corps { grid-template-columns: minmax(0, 1fr); }
}

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

.bi-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .9rem; }
.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: .1em;
  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: .12em; 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%; }

/* ————————————————————— Les idées de l'atelier, dans la big idea ————————————————————— */

.bi-atelier { display: grid; gap: .6rem; margin-top: 1.4rem; }
.bi-idees { display: grid; gap: .35rem; }
.bii { background: var(--nuit-carte); border-left: 2px solid var(--trait-clair);
  padding: .4rem .6rem; display: grid; gap: .2rem; }
.bii.retenue { border-left-color: var(--vert); }
.bii.ecartee { opacity: .55; }
.bii-t { font-size: var(--t-meta); letter-spacing: var(--ls-meta); font-family: var(--lecture); line-height: 1.35; }
.bii-m { display: flex; align-items: center; gap: .35rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne); flex-wrap: wrap; }
.bii-r { color: var(--vert); }
.bii-r.vide { color: var(--bloquant-txt); font-style: italic; }
.bii-mo { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); border-left: 2px solid var(--trait);
  padding-left: .5rem; }

/* ————————————————————— 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: .1em; 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: .08em; 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-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .6rem; margin: 1rem 0 1.2rem; }
.pi-k { background: var(--nuit-carte); 
 border-top: 2px solid var(--trait-clair); padding: .6rem .7rem; display: grid; gap: .1rem; }
.pi-k.alerte { border-top-color: var(--bloquant-txt); }
.pi-k.attente { border-top-color: var(--attente); }
.pi-k.vert { border-top-color: var(--vert); }
.pi-k b { font-size: var(--t-ecran); letter-spacing: var(--ls-ecran); line-height: 1; font-weight: 400; }
.pi-k.alerte b { color: var(--bloquant-txt); }
.pi-k.attente b { color: var(--attente); }
.pi-k.vert b { color: var(--vert); }
.pik-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.pik-s { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.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: .08em; 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: .08em; 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; }
.fb-texte { font-size: var(--t-lire); letter-spacing: var(--ls-lire); line-height: 1.5; font-family: var(--lecture);
  border-left: 2px solid var(--or); padding-left: .6rem; }

/* 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 { display: grid; gap: 1rem; }
.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: .08em; 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; }

.as-bloc { display: grid; gap: .5rem; }
.asb-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--or);
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem;
  display: flex; justify-content: space-between; }
.asb-t span { color: var(--clair-terne); letter-spacing: 0; }
.as-fb { border-left: 2px solid var(--trait-clair); padding: .35rem .6rem; display: grid; gap: .2rem;
  background: var(--nuit-carte); }
.as-fb.attente { border-left-color: var(--attente); }
.as-fb.alerte { border-left-color: var(--bloquant-txt); }
.as-fb.vert { border-left-color: var(--vert); }
.asfb-t { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.4; }
.asfb-m { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.asfb-mo { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.as-prec { display: grid; gap: .3rem; }
.asp-v span { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); font-style: italic; }
.aspc-o { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.aspc-m { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.4; }
.aspc-q, .aspc-d { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* ————————————————————— 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: .08em; 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%; }

/* ————————————————————— Le rétroplanning ————————————————————— */

.re-l { display: grid; gap: 2px; }
.re-p { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; text-align: left;
  background: var(--nuit-carte); border: 0; border-left: 2px solid var(--trait-clair);
  padding: .4rem .6rem; cursor: pointer; font: inherit; color: var(--clair); }
.re-p:hover { background: var(--nuit-relief); }
.re-p.faite { border-left-color: var(--vert); }
.re-p.ici { border-left-color: var(--or); background: var(--nuit-relief); }
.re-p.retard { border-left-color: var(--bloquant-txt); }
.re-p.hors { opacity: .4; cursor: default; }
.rep-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); grid-column: 1; }
.rep-n i { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); font-style: normal; margin-left: .4rem; }
.rep-d { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); grid-column: 1; }
.rep-q { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); grid-column: 1; line-height: 1.35; }
.rep-e { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); grid-column: 2; grid-row: 1; text-align: right; color: var(--clair-terne); }
.re-p.faite .rep-e { color: var(--vert); }
.re-p.ici .rep-e { color: var(--or); }
.re-p.retard .rep-e { color: var(--bloquant-txt); }
.rep-w { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); grid-column: 2; grid-row: 2; text-align: right; color: var(--clair-terne); }

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

.pi-conflit { background: var(--nuit-carte); border: 1px solid var(--alerte);
  border-left: 3px solid var(--alerte); padding: .7rem .8rem; display: grid; gap: .5rem;
  margin-bottom: 1.2rem; }
.pic-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--bloquant-txt); }
.pic-l { display: flex; gap: .55rem; align-items: flex-start; }
.picl-n { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.4; }
.picl-d { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.pic-r { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); border-top: 1px solid var(--trait);
  padding-top: .45rem; }

.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: .06em; }
.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: .1em;
  padding: .08rem .3rem; background: var(--vert); color: var(--clair); }

/* ————————————————————— L'état commercial d'une route ————————————————————— */

.pr-band { background: var(--nuit-carte); 
 border-left: 3px solid var(--trait-clair); padding: .65rem .8rem; display: grid; gap: .45rem; }
.pr-band.vert { border-left-color: var(--vert); }
.pr-band.or { border-left-color: var(--or); }
.pr-band.attente { border-left-color: var(--attente); }
.prb-h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.prb-r { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: .1em; }
.pr-band.vert .prb-r { color: var(--vert); }
.pr-band.or .prb-r { color: var(--or); }
.pr-band.attente .prb-r { color: var(--attente); }
.pr-band.terne .prb-r { color: var(--clair-terne); }
.prb-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); flex: 1; }
.prb-m { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.prb-regle { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.45; }
.prb-jalons { display: flex; gap: .3rem; flex-wrap: wrap; }
.prbj { display: flex; align-items: center; gap: .25rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne); border: 1px solid var(--trait); padding: .1rem .35rem; }
.prbj .m { color: var(--trait-clair); }
.prbj.ok { color: var(--clair-doux); border-color: var(--trait-clair); }
.prbj.ok .m { color: var(--vert); }
.prbj.min:not(.ok) { border-color: var(--alerte); color: var(--bloquant-txt); }
.prbj.min:not(.ok) .m { color: var(--bloquant-txt); }
.prb-dates { 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-doux); }
.prb-dates .vide { color: var(--clair-terne); }
.prb-dates .vert { color: var(--vert); }
.prb-g { display: flex; gap: .4rem; flex-wrap: wrap; }
.prb-g .b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); padding: .2rem .5rem; }

/* ————————————————————— Le navigateur du dossier ————————————————————— */

.nav-p { display: grid; gap: .5rem; margin-top: 1.2rem; }

.np-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.npp { position: relative; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .5rem; text-align: left; cursor: pointer; font: inherit;
  background: var(--nuit-carte); border: 1px solid var(--trait);
  border-top: 2px solid var(--trait); color: var(--clair); padding: .5rem .6rem .55rem; }
.npp:hover { border-color: var(--trait-clair); }
.npp.vierge { border-top-color: var(--trait); }
.npp.encours { border-top-color: var(--attente); }
.npp.fait { border-top-color: var(--vert); }
.npp.ici { background: var(--nuit-relief); border-top-color: var(--or); }

.npp-r { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto;
  border: 1px solid var(--trait-clair); border-radius: 11px;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.npp.fait .npp-r { border-color: var(--vert); color: var(--vert); }
.npp.ici .npp-r { border-color: var(--or); color: var(--or); }
.npp-c { min-width: 0; display: grid; gap: .05rem; }
.npp-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: .02em; }
.npp-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.npp.encours .npp-q { color: var(--attente); }
.npp-j { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.npp-b { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--nuit); }
.npp-b i { display: block; height: 100%; background: var(--trait-clair); }
.npp.encours .npp-b i { background: var(--attente); }
.npp.fait .npp-b i { background: var(--vert); }
.npp.ici .npp-b i { background: var(--or); }

.np-etapes { display: flex; gap: 2px; flex-wrap: wrap; }
.npe { flex: 1 1 auto; 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: .32rem .5rem; display: grid; gap: .05rem; }
.npe:hover { background: var(--nuit-carte); color: var(--clair); }
.npe.partiel { border-bottom-color: var(--attente); }
.npe.plein { border-bottom-color: var(--vert); }
.npe.ici { border-bottom-color: var(--or); background: var(--nuit-carte); color: var(--clair); }
.npe-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.npe-e { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.npe.partiel .npe-e { color: var(--attente); }
.npe.vide .npe-e { color: var(--clair-terne); }
.npe.plein .npe-e { color: var(--vert); }

.np-cout { display: grid; gap: .05rem; border-left: 2px solid var(--attente);
  padding: .1rem .55rem; }
.np-cout b { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); font-weight: 400; color: var(--attente); }
.np-cout span { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); line-height: 1.4; }

@media (max-width: 820px) {
  .np-phases { grid-template-columns: minmax(0, 1fr); }
  .npe { flex: 1 1 40%; }
}

/* ————————————————————— 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: .16em; 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); }

@media (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: .16em; }
.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: .16em; color: var(--clair-terne); }

/* Les trois groupes du rail */
.rail-groupe { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .18em; 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; }

/* Les productions lourdes, imbriquées dans le rétroplanning de campagne */
.re-prod { display: grid; gap: .45rem; margin: .6rem 0; }
.rep-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; color: var(--clair-terne);
  display: flex; gap: .5rem; }
.rep-t span { color: var(--clair-doux); letter-spacing: 0; }
.rep-p { background: var(--nuit-carte); border-left: 2px solid var(--trait-clair);
  padding: .45rem .6rem; display: grid; gap: .3rem; }
.rep-p.deborde { border-left-color: var(--bloquant-txt); }
.repp-t { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.repp-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.repp-j { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.repp-f { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-left: auto; }
.repp-l { display: grid; gap: .15rem; }
.repp-x { display: grid; gap: .02rem; border-left: 1px solid var(--trait); padding-left: .5rem; }
.reppx-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.reppx-n i { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); font-style: normal; margin-left: .35rem; }
.reppx-d { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.reppx-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* 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: .12em; 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; }

/* ————————————————————— Les deux documents compilés ————————————————————— */

.co { display: grid; gap: .8rem; }
.co-doc { background: var(--papier); color: var(--papier-encre); padding: 1.2rem 1.4rem;
  display: grid; gap: .9rem; }
.cod-tete { border-bottom: 2px solid var(--papier-encre); padding-bottom: .5rem; }
.cod-tete h3 { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); font-family: var(--lecture); }
.codt-s { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); opacity: .7; margin-top: .15rem; }

.co-blocs { display: grid; gap: .8rem; }
.co-b { display: grid; gap: .2rem; }
.co-b.fort { border-left: 3px solid var(--accent); padding-left: .7rem; }
.co-b.vide { opacity: .45; }
.cob-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; text-transform: uppercase;
  display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.cob-t span { letter-spacing: 0; text-transform: none; font-size: var(--t-eti); line-height: var(--lh-eti); font-style: italic; }
.cob-c { font-size: var(--t-lire); letter-spacing: var(--ls-lire); line-height: 1.55; font-family: var(--lecture); }
.co-b.fort .cob-c { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); }
.cob-v { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-style: italic; color: var(--clair-terne); }
.cob-cit { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); opacity: .55; font-style: italic; }
.cob-p { list-style: none; display: grid; gap: .15rem; }
.cob-p li { font-size: var(--t-meta); letter-spacing: var(--ls-meta); padding-left: .9rem; position: relative; line-height: 1.45; }
.cob-p li::before { content: "—"; position: absolute; left: 0; opacity: .5; }
.cob-l { display: grid; gap: .12rem; }
.cobl { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.cobl-q { color: var(--papier-terne); }
.cobl-v.vide { font-style: italic; color: var(--clair-terne); }
.cob-a { display: grid; gap: .4rem; }
.coba { border-left: 2px solid rgba(0,0,0,.18); padding-left: .6rem; }
.coba-t { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.coba-c { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; border: 1px solid currentColor; padding: 0 .28rem; opacity: .7; }
.coba-l { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); opacity: .6; }
.coba-q { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; opacity: .85; }
.coba-d { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); opacity: .6; }
.co-doc .rt-mur { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.co-doc .rt-c { background: rgba(0,0,0,.06); }
.co-doc .rtc-bas { background: linear-gradient(to top, rgba(0,0,0,.75) 40%, rgba(0,0,0,0)); }
.co-doc .rtc-n, .co-doc .rtc-m { color: var(--clair); }

/* Le briefing de l'atelier, et le document du navigateur */
.at-brief, .np-doc { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--nuit-carte); border: 1px solid var(--trait);
  border-left: 2px solid var(--vert); padding: .55rem .7rem; }
.at-brief.manque, .np-doc.manque { border-left-color: var(--attente); }
.atb-c, .npd-c { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.atb-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; color: var(--clair-terne); }
.atb-q { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.4; }
.npd-c b { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-weight: 400; }
.npd-c span { 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; }

@media print {
  .co-doc { background: #fff; color: #111; }
}

/* ————————————————————— 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, .prb-regle, .brc-p,
.np-cout span, .npd-c span, .atb-q,
.cob-c, .cob-p li, .bic-c, .bica .v,
.rtb .v, .dia-q, .rep-q { max-width: var(--mesure); }

.pifb-t, .ifm-t, .ati-t, .bii-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); }

.cmd-rien { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--trait); margin-top: 1.6rem; padding-top: 1rem;
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne); }

/* Le document compilé se lit à la mesure du papier, pas de l'écran. */
.co-doc { max-width: calc(var(--mesure) + 4rem); }

/* Une colonne sans contenu rend sa place au lieu de tenir un vide — mais
 * seulement quand il y a deux colonnes. En étroit, tout s'empile. */
@media (min-width: 1121px) {
  .cmd-corps.seule { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
@media (max-width: 1120px) {
  .cmd-corps, .cmd-corps.seule { grid-template-columns: minmax(0, 1fr); }
}
.cc-rien { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne);
  border: 1px dashed var(--trait); padding: .9rem 1rem; align-self: start; }

/* 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 */
.as-tete { display: flex; gap: .9rem; align-items: flex-start; }
.ast-v { flex: 0 0 12rem; }
.ast-v .vignette { height: 8rem; }
.ast-c { min-width: 0; display: grid; gap: .3rem; align-content: start; }
.ast-n { font-size: var(--t-titre); letter-spacing: var(--ls-titre); line-height: 1.25; }
.ast-m { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.ast-r { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.ast-r .alerte { color: var(--bloquant-txt); }

@media (max-width: 700px) {
  .as-tete { flex-direction: column; }
  .ast-v { flex: none; width: 100%; }
}

.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: .14em; text-transform: uppercase;
  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; }

/* Dans le document compilé, sur fond papier */
.cod-tete { display: flex; gap: .9rem; align-items: center; }
.cod-logo { flex: 0 0 3.5rem; height: 3.5rem; display: grid; place-items: center; overflow: hidden; }
.cod-logo img { width: 100%; height: 100%; object-fit: contain; }
.co-elts { display: flex; gap: .5rem; flex-wrap: wrap; }
.co-e { width: 8rem; }
.co-e .vignette { height: 5rem; border: 0; background: rgba(0,0,0,.05); }
.co-e span { display: block; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); opacity: .7; margin-top: .15rem; }
.co-gamme { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.co-g .vignette { height: 5.5rem; border: 0; background: rgba(0,0,0,.05); }
.cog-n { display: block; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); margin-top: .2rem; }
.cog-q, .cog-m { display: block; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); opacity: .65; }

/* L'en-tête de projet accueille la pastille */
.projet-entete { display: flex; gap: .9rem; align-items: flex-start; }

/* ————————————————————— 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: .1em; }
.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: .06em; }
.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 ————————————————————— */

.cs-bloc { display: grid; gap: .5rem; margin-top: 1.4rem; }
.csb-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--or);
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; }

/* La ventilation par compte et par marché : une barre dit l'écart mieux
 * qu'une colonne de pourcentages. */
.cs-v { display: grid; gap: .2rem; }
.cs-l { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  gap: .7rem; align-items: center; padding: .2rem 0; }
.csl-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csl-b { display: block; height: 5px; background: var(--nuit); }
.csl-b i { display: block; height: 100%; background: var(--trait-clair); }
.cs-l:hover .csl-b i { background: var(--or); }
.csl-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); white-space: nowrap; }
.csl-c.alerte { color: var(--bloquant-txt); }

/* 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; }
}

/* ————————————————————— Mon équipe ————————————————————— */

/* Une personne par ligne, dépliable. Fermée, elle ne montre que ce qui appelle
 * une action : sinon sept personnes font sept blocs qu'on ne lit plus. */
.eq { display: grid; gap: 1.4rem; }
.eq-l { display: grid; gap: .5rem; }

.eq-p { border: 1px solid var(--trait); border-left: 2px solid var(--trait-clair);
  background: var(--nuit-carte); }
.eq-p.alerte { border-left-color: var(--attente); }
.eq-p.ici { border-color: var(--trait-clair); }

.eqp-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: .85rem; align-items: center; width: 100%; text-align: left; font: inherit;
  color: var(--clair); background: none; border: 0; cursor: pointer; padding: .7rem .85rem; }
.eqp-tete:hover { background: var(--nuit-relief); }
.eqp-c { min-width: 0; display: grid; gap: .15rem; }
.eqp-n { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.eqp-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.eqp-f { color: var(--clair-terne); font-size: var(--t-titre); letter-spacing: var(--ls-titre); line-height: 1; }

.eqp-n3 { display: flex; gap: 1.1rem; }
.eqp-nb { display: grid; gap: .05rem; text-align: right; }
.eqp-nb b { font-size: var(--t-titre); letter-spacing: var(--ls-titre); font-weight: 500; line-height: 1; }
.eqp-nb span { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); letter-spacing: .04em; }
.eqp-nb.vert b { color: var(--vert); }
.eqp-nb.alerte b { color: var(--bloquant-txt); }

/* Ce qui appelle une action, fermé. */
.eqp-dits { display: flex; flex-wrap: wrap; gap: .35rem;
  padding: 0 .85rem .7rem calc(.85rem + 40px + .85rem); }
.eqpd { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux);
  border-left: 2px solid var(--trait-clair); padding: .1rem .5rem; }
.eqpd.alerte { border-left-color: var(--bloquant-txt); }
.eqpd.attente { border-left-color: var(--attente); }

/* Ouvert. */
.eqp-detail { border-top: 1px solid var(--trait); padding: .9rem .85rem 1.1rem;
  display: grid; gap: 1.3rem; }
.eqd-bloc { display: grid; gap: .5rem; }
.eqdb-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--or);
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; }
.eqdb-t span { letter-spacing: 0; color: var(--clair-terne); text-transform: none; }
.eqdb-t button { margin-left: auto; }

.eqd-charge { display: grid; gap: .3rem; }
.eqdc-b { height: 5px; background: var(--nuit); }
.eqdc-b i { display: block; height: 100%; background: var(--trait-clair); }
.eqdc-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.eqd-cums, .eqd-engs, .eqd-prod, .eqd-crits { display: grid; gap: .3rem; }

.eqd-cum { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: .8rem; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); border-left: 2px solid var(--trait-clair);
  padding: .2rem .6rem; }
.eqd-cum.echue, .eqd-cum.sansPart { border-left-color: var(--bloquant-txt); }
.eqd-cum.sansEcheance { border-left-color: var(--attente); }
.eqdc-q { color: var(--clair-terne); font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.eqd-ctrl { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.eqd-eng { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 13rem) auto;
  gap: .8rem; align-items: baseline; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  border-left: 2px solid var(--vert); padding: .25rem .6rem; }
.eqd-eng.retard { border-left-color: var(--bloquant-txt); }
.eqd-eng.jamais { border-left-color: var(--attente); }
.eqde-r { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); letter-spacing: .06em; }
.eqde-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.eqd-eng.retard .eqde-t { color: var(--bloquant-txt); }

.eqd-pr { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: .8rem; align-items: baseline; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  border-left: 2px solid var(--trait); padding: .2rem .6rem; }
.eqd-pr.retenu { border-left-color: var(--vert); }
.eqdp-t { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); letter-spacing: .06em; }
.eqdp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqdp-e { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.eqd-pr.retenu .eqdp-e { color: var(--vert); }

.eqd-cr { border-left: 2px solid var(--trait-clair); padding: .35rem .6rem;
  display: grid; gap: .15rem; }
.eqd-cr.retenu { border-left-color: var(--vert); }
.eqd-cr.ecarte { border-left-color: var(--accent); }
.eqdc-h { display: flex; gap: .6rem; flex-wrap: wrap; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-terne); letter-spacing: .04em; }
.eqdc-q { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.eqdc-m { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.45;
  max-width: var(--mesure); }

@media (max-width: 820px) {
  .eqp-tete { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .6rem; }
  .eqp-n3 { grid-column: 1 / -1; justify-content: space-between; }
  .eqp-dits { padding-left: .85rem; }
  .eqd-eng, .eqd-cum, .eqd-pr { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

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

.fm { display: grid; gap: 1.1rem; }

.fm-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.fmb-p { display: flex; gap: .1rem; }
.fmb { font: inherit; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .04em; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--clair-terne); padding: .3rem .1rem; margin-right: 1rem; }
.fmb:hover { color: var(--clair); }
.fmb.ici { color: var(--or); border-bottom-color: var(--or); }
.fmb-q { display: flex; align-items: center; gap: .5rem; }
.fmb-q label { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em; color: var(--clair-terne); }
.fmb-g { display: flex; gap: .5rem; margin-left: auto; }

/* Les mesures, sur le papier du document.
 *
 * Aucune boîte : le chiffre est grand, le libellé petit, la conséquence en
 * dessous. Un filet ne sépare que là où deux mesures se toucheraient — et il
 * répond alors à une question, « où finit celle-ci ». */
.cob-me { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 1.6rem; margin-top: .3rem; }
.cobm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .6rem;
  align-items: baseline; }
.cobm-v { grid-row: 1 / 3; font-size: var(--t-nombre); letter-spacing: var(--ls-nombre); line-height: .95;
  font-family: var(--lecture); }
.cobm-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.cobm-e { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .04em; margin-left: .4rem; opacity: .7; }
.cobm-e.mieux { color: #1f6b41; }
.cobm-e.moins { color: #a3312a; }
.cobm-q { grid-column: 2; font-size: var(--t-eti); letter-spacing: var(--ls-eti); line-height: 1.4; opacity: .68; }
.cobm.alerte .cobm-v { color: #a3312a; }
.cobm.vert .cobm-v { color: #1f6b41; }
/* La mesure sans assise ne se colore pas : elle n'a rien à dire de bon ni de
 * mauvais. Elle dit ce qu'il faudrait enregistrer. */
.cobm.creux .cobm-v { opacity: .3; }
/* Une mesure sans assise s'atténue par l'encre, pas par l'opacité : sous .6
 * le texte passe sous 4,5:1 et la mention devient illisible — or c'est
 * justement celle qu'il faut lire. */
.cobm.creux .cobm-n { color: var(--clair-terne); }
.cobm.creux .cobm-q { font-style: italic; }

/* La matière d'évaluation : une ligne par personne. */
.cob-eq { display: grid; gap: .45rem; margin-top: .3rem; }
.cobe { display: grid; gap: .1rem; }
.cobe-n { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); font-family: var(--lecture); }
.cobe-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); opacity: .68; }
.cobe-m { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: #a3312a; }

@media (max-width: 700px) {
  .fmb-g { margin-left: 0; width: 100%; }
  .cob-me { grid-template-columns: minmax(0, 1fr); }
}
/* Un vide qui est une bonne nouvelle ne se grise pas comme un oubli. */
.co-b.vide:has(.cob-v.bon) { opacity: 1; }
.cob-v.bon { color: var(--papier-terne); font-style: normal; }

/* Ma fin de mois, sur papier.
 *
 * Ce qui sert à décider quoi imprimer ne s'imprime pas : la bande de
 * recevabilité, les onglets d'intention, la barre de période. Reste la
 * feuille, qui est ce qu'on remet. */
@media print {
  .fm .recev, .fm-barre, .dc-modes, .dc-tete { display: none !important; }
  .fm { gap: 0; }
  .fm .co-doc { max-width: none; padding: 0; }
  .cobm-v { color: #111 !important; }
  .cobm.alerte .cobm-v { color: #8a2620 !important; }
  .cobe-m { color: #8a2620 !important; }
  .co-b { break-inside: avoid; }
}

/* ————————————————————— La jurisprudence ————————————————————— */

.ju { display: grid; gap: 1.2rem; }

.ju-l { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--trait); }
.jul { font: inherit; background: none; border: 0; cursor: pointer; padding: .35rem 0 .5rem;
  display: flex; align-items: baseline; gap: .45rem; color: var(--clair-terne);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.jul:hover { color: var(--clair); }
.jul.ici { color: var(--or); border-bottom-color: var(--or); }
.jul span { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .08em; }
.jul b { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-weight: 400; color: var(--clair-terne); }
.jul.ici b { color: var(--or); }

.ju-liste { display: grid; gap: .5rem; }
.jum { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); line-height: 1.5;
  max-width: var(--mesure); }

/* Un critère : ce qu'il dit, combien de fois il a servi, et si la ligne tient. */
.ju-cr { background: var(--nuit-carte); border-left: 2px solid var(--trait-clair); }
.ju-cr.ici { border-left-color: var(--or); }
.ju-cr.eclate { border-left-color: var(--bloquant-txt); }
.jucr-t { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto auto;
  gap: .8rem; align-items: baseline; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; color: var(--clair); cursor: pointer; padding: .6rem .8rem .2rem; }
.jucr-t:hover { background: var(--nuit-relief); }
.jucr-f { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; color: var(--clair-terne); }
.jucr-n { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.jucr-c { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); white-space: nowrap; }
.jucr-e { color: var(--clair-terne); }
.jucr-q { font-size: var(--t-eti); letter-spacing: var(--ls-eti); line-height: 1.45; color: var(--clair-terne);
  padding: 0 .8rem .6rem 7.3rem; max-width: var(--mesure-large); }
.ju-cr.eclate .jucr-q { color: var(--bloquant-txt); }
.jucr-cas { display: grid; gap: .4rem; padding: .2rem .8rem .8rem 7.3rem;
  border-top: 1px solid var(--trait); margin-top: .1rem; padding-top: .7rem; }

.ju-cas { display: grid; gap: .12rem; }
.jucas-h { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .04em; color: var(--clair-terne); }
.jucas-p { color: var(--clair-terne); text-decoration: none; border-bottom: 1px solid var(--trait); }
.jucas-p:hover { color: var(--or); }
.jucas-o { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.jucas-m { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.45;
  max-width: var(--mesure); }

/* Les critères jamais invoqués : un inventaire, pas une alerte. */
.ju-jamais { display: grid; gap: .5rem; margin-top: .6rem; }
.jub-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em; color: var(--or);
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem;
  display: flex; gap: .7rem; align-items: baseline; }
.jub-t span { letter-spacing: 0; color: var(--clair-terne); }
.ju-jl { display: flex; flex-wrap: wrap; gap: .35rem; }
.juj { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne);
  border-left: 2px solid var(--trait); padding: .1rem .5rem; }

/* À écrire : un groupe de motifs qui appelle un critère. */
.ju-e { display: grid; gap: .9rem; }
.ju-g { background: var(--nuit-carte); border-left: 2px solid var(--or); padding: .6rem .8rem .7rem; }
.jug-t { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.jug-m { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); }
.jug-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--or); }
.jug-t button { margin-left: auto; }
.jug-cas { display: grid; gap: .25rem; margin-top: .5rem; }
.jug-c { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .7rem;
  align-items: baseline; }
.jugc-d { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.jugc-m { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); line-height: 1.45;
  max-width: var(--mesure); }
.ju-rappel { display: grid; gap: .3rem; margin: .6rem 0; }

/* Le fil. */
.ju-f { display: grid; gap: .8rem; }
.ju-rech { display: flex; gap: .8rem; align-items: center; }
.ju-rech input { flex: 1; max-width: 32rem; font: inherit; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  background: var(--nuit); color: var(--clair); border: 1px solid var(--trait);
  padding: .4rem .6rem; }
.ju-rech span { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); white-space: nowrap; }
.ju-fc { background: var(--nuit-carte); border-left: 2px solid var(--trait);
  padding: .5rem .8rem .55rem; display: grid; gap: .2rem; }
.ju-fc.sur { border-left-color: var(--vert); }
.jufc-c { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .03em; color: var(--clair-terne); }
.ju-fc.sur .jufc-c { color: var(--vert); }

@media (max-width: 820px) {
  .jucr-t { grid-template-columns: minmax(0, 1fr) auto; row-gap: .25rem; }
  .jucr-f { grid-column: 1 / -1; }
  .jucr-q, .jucr-cas { padding-left: .8rem; }
  .jug-c { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .ju-l { gap: 1rem; flex-wrap: wrap; }
}
.jug-d { margin-left: auto; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--vert); }
.jug-e { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); line-height: 1.45;
  margin-top: .3rem; max-width: var(--mesure); }

/* ————————————————————— La salle de tri ————————————————————— */

/* Une liste faisait lire sept lignes pour choisir par où commencer, alors que
 * le système connaît déjà l'ordre du coût. Ici une seule décision est posée en
 * entier ; la file devient une colonne étroite qui sert à naviguer. */
.sl { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 1.6rem;
  align-items: start; }

/* La file — silencieuse par construction. */
.sl-file { display: grid; gap: .5rem; align-content: start; }
.slf-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.slf-l { display: grid; gap: .1rem; }
.slf-i { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .1rem .5rem;
  text-align: left; font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--clair-terne); padding: .45rem .5rem; border-left: 2px solid transparent;
  border-radius: var(--r-xs); }
.slf-i:hover { background: var(--surface-2); color: var(--clair); }
.slf-i.ici { background: var(--surface-2); border-left-color: var(--or); color: var(--clair); }
.slfi-n { grid-row: 1 / 3; font-size: var(--t-eti); line-height: var(--lh-eti);
  color: var(--clair-terne); }
.slfi-c { font-size: var(--t-meta); line-height: var(--lh-meta); font-weight: 500; }
.slf-i.ici .slfi-c { color: var(--or); }
.slfi-q { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slf-p { display: grid; gap: .3rem; margin-top: .4rem; }
.slf-p span { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.slf-p i { display: block; height: 2px; background: var(--or); border-radius: var(--r-pilule); }

/* La décision — le chiffre domine, c'est lui qui justifie le rang. */
.sl-d { display: grid; gap: .7rem; align-content: start; }
.sld-r { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.sld-c { font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); color: var(--bloquant-txt); }
.sld-s { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair-doux);
  max-width: var(--mesure); margin-top: -.3rem; }
.sld-v { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .6rem;
  margin: .5rem 0 .2rem; }
.sldv { display: grid; gap: .3rem; }
.sldv .vignette { height: auto; aspect-ratio: 16 / 9; }
.sldv span { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
.sld-t { display: grid; gap: .2rem; margin-top: .3rem; }
.sldt-l { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--or); }
.sld-t p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }
.sld-g { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.sld-m { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }

/* La preuve — à portée, jamais au premier plan. */
.sl-pr { display: grid; gap: 1.2rem; align-content: start; }
.sl-p { display: grid; gap: .35rem; }
.slp-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.sl-p blockquote { font-size: var(--t-meta); line-height: 1.55; color: var(--clair-doux);
  background: var(--surface-3); border-radius: var(--r-m); padding: .7rem .8rem;
  font-style: italic; }
.slp-a { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
.sl-p p { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }
.slp-q { display: flex; gap: .2rem; }
.slp-q .avatar + .avatar { margin-left: -.4rem; }

/* Un compteur de mode qui n'est pas actif n'a pas à crier. */
.dcm-c.terne { background: var(--trait-clair); color: var(--clair-doux); }

@media (max-width: 1180px) {
  .sl { grid-template-columns: 200px minmax(0, 1fr); }
  .sl-pr { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    display: grid; gap: 1.2rem; }
}
@media (max-width: 760px) {
  .sl { grid-template-columns: minmax(0, 1fr); }
  .sl-file { order: 2; }
}

/* ————————————————————— Ce qu'on me doit : la chronologie ————————————————————— */

/* Le temps est l'axe. La longueur d'une barre EST son âge — on lit le retard
 * avant de lire le texte. Groupé par débiteur, jamais par type : savoir chez
 * qui ça dort vaut mieux que savoir de quelle catégorie ça relève. */
.at { display: grid; gap: 1.4rem; }
.at-tete { display: grid; gap: .3rem; }
.at-tete h3 { font-size: var(--t-ecran); line-height: var(--lh-ecran);
  letter-spacing: var(--ls-ecran); font-weight: 500; }
.at-tete p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.at-axe { position: relative; height: 1.1rem; margin-left: 15rem;
  border-bottom: 1px solid var(--trait); }
.ata { position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne);
  white-space: nowrap; }
.ata:first-child { transform: none; }

.at-g { display: grid; gap: 1.3rem; }
.at-d { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: .8rem;
  align-items: start; }
.atd-q { display: flex; gap: .6rem; align-items: flex-start; }
.atdq-n { font-size: var(--t-lire); line-height: var(--lh-lire); }
.atdq-p { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
.atdq-c { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne);
  margin-top: .2rem; }

.atd-b { display: grid; gap: .55rem; }
.at-x { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .7rem;
  align-items: center; }
.atx-b { grid-row: 1; height: 28px; border: 0; border-radius: var(--r-xs);
  font: inherit; font-size: var(--t-eti); line-height: var(--lh-eti); text-align: left;
  cursor: pointer; padding: 0 .6rem; overflow: hidden; min-width: 0;
  display: flex; align-items: center; }
.atx-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atx-b.alerte { background: var(--bloquant); color: var(--n900); }
.atx-b.attente { background: var(--arbitrage); color: var(--n900); }
.atx-b.calme { background: var(--trait-clair); color: var(--clair); }
.atx-b:hover { filter: brightness(1.12); }
.atx-j { grid-row: 1; font-size: var(--t-meta); line-height: var(--lh-meta);
  font-weight: 500; white-space: nowrap; }
.atx-j.alerte { color: var(--bloquant-txt); }
.atx-j.attente { color: var(--arbitrage); }
.atx-j.calme { color: var(--clair-terne); }
.atx-k { grid-column: 1 / -1; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-terne); max-width: var(--mesure); }

.at-res { display: grid; gap: .3rem; margin-top: .6rem; }
.atr-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.atr-x { display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
.atr-j { color: var(--succes); }
.at-pied { margin-top: .4rem; }

@media (max-width: 900px) {
  .at-axe { margin-left: 0; }
  .at-d { grid-template-columns: minmax(0, 1fr); }
}
.atdq-o { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne);
  margin-top: .25rem; max-width: 13rem; }

/* ————————————————————— Mon standard : un grand, cinq en ligne ————————————————————— */

/* Six chiffres de même taille, c'est six chiffres qu'on ne lit pas. Celui qui
 * décroche prend l'écran avec sa cause et son geste ; les cinq autres restent
 * lisibles sans rien réclamer. */
.st-gros { display: grid; gap: .5rem; padding: 1.2rem 1.4rem 1.4rem;
  background: var(--surface-2); border-radius: var(--r-m);
  border-left: 2px solid var(--trait-clair); max-width: var(--mesure-large); }
.st-gros.ko { border-left-color: var(--bloquant); }
.st-gros.creux { border-left-color: var(--trait-clair); }
.st-gros.ok { border-left-color: var(--succes); }
.stg-r { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.stg-h { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.stg-v { font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); }
.st-gros.ko .stg-v { color: var(--bloquant-txt); }
.st-gros.ok .stg-v { color: var(--succes); }
.st-gros.creux .stg-v { color: var(--clair-terne); }
.stg-n { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.stg-q { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }
.st-gros.creux .stg-q { font-style: italic; }
.stg-p { display: grid; gap: .15rem; margin-top: .4rem; }
.stg-p span { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.stg-p p { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }
.stg-g { margin-top: .5rem; }

.st-cinq { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.2rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--trait); }
.stc { display: grid; gap: .1rem; align-content: start; }
.stc-v { font-size: var(--t-titre); line-height: 1.1; color: var(--clair-doux); }
.stc.ko .stc-v { color: var(--bloquant-txt); }
.stc.creux .stc-v { color: var(--clair-terne); }
.stc-n { font-size: var(--t-meta); line-height: var(--lh-meta); }
.stc-q { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
.stc.creux .stc-q { font-style: italic; }

.st-cibles { display: flex; align-items: center; gap: .7rem; margin-top: 1.6rem; }
.st-cibles span { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
.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); }
.jue-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em;
  color: var(--or); border-bottom: 1px solid var(--trait); padding-bottom: .3rem;
  margin-bottom: .6rem; }
.ju-c { margin-top: 1.8rem; }
.ju-fil { margin-top: 1.8rem; display: grid; gap: .8rem; justify-items: start; }

/* ————————————————————— 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); }
.cmd-file { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: 1.2rem; }
.cmd-file span { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

/* §14 — la barre encode une durée par sa longueur, pas par sa hauteur : elle
 * garde ses 28 px et prend sa cible par une zone invisible, qui tient dans
 * l'interligne de la ligne sans mordre sur la suivante. */
.atx-b { position: relative; }
.atx-b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); min-height: var(--cible); height: 100%; }
.plc-ecart { min-height: var(--cible); display: inline-flex; align-items: center; }


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

/* Cinq cartes dépliables rendaient la comparaison impossible. Des colonnes
 * alignées répondent d'un regard à la seule question qui compte : qui n'a
 * jamais eu sa chance. */
.eqt { display: grid; gap: .2rem; }
.eqt-h { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 6.5rem);
  gap: 1rem; padding: 0 .8rem .5rem; border-bottom: 1px solid var(--trait); }
.eqth-p, .eqth-c { font-size: var(--t-micro); line-height: var(--lh-micro);
  letter-spacing: .12em; color: var(--clair-terne); }
.eqth-c { text-align: right; }

.eqt-l { display: grid; }
.eqt-r { border-bottom: 1px solid var(--trait); border-left: 2px solid transparent; }
.eqt-r.manque { border-left-color: var(--arbitrage); }
.eqt-r.ici { background: var(--surface-2); border-left-color: var(--or); }
.eqtr-c { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 6.5rem);
  gap: 1rem; align-items: center; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; cursor: pointer; color: var(--clair);
  padding: .75rem .8rem; min-height: var(--cible); }
.eqtr-c:hover { background: var(--surface-2); }
.eqtr-p { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.eqtr-n { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: var(--t-lire); line-height: var(--lh-lire); }
.eqtr-q { display: block; font-size: var(--t-meta); line-height: var(--lh-meta);
  color: var(--clair-terne); }
.eqtr-v { text-align: right; font-size: var(--t-titre); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--clair-doux); }
.eqtr-v.vert { color: var(--succes); }
.eqtr-v.alerte { color: var(--bloquant-txt); }
.eqtr-v.attente { color: var(--arbitrage); }
.eqtr-m { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--arbitrage);
  padding: 0 .8rem .7rem calc(.8rem + 32px + .7rem); max-width: var(--mesure-large); }

@media (max-width: 1000px) {
  .eqt-h { display: none; }
  .eqtr-c { grid-template-columns: minmax(0, 1fr); row-gap: .5rem; }
  .eqtr-v { text-align: left; display: inline-block; margin-right: 1.2rem; }
  .eqtr-m { padding-left: .8rem; }
}


/* 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); }


/* ————————————————————— L'ordre : la balance ————————————————————— */

/* Quatre bandes empilées se lisaient comme un classement. C'est un conflit :
 * deux plateaux qui se font face, dont la hauteur est le temps consommé. Le
 * déséquilibre se voit avant de se lire. */
.bl { display: grid; gap: 1.6rem; }
.bl-t { display: grid; gap: .3rem; }
.bl-t h3 { font-size: var(--t-ecran); line-height: var(--lh-ecran);
  letter-spacing: var(--ls-ecran); font-weight: 500; }
.bl-t p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.bl-b { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 1.6rem; align-items: end; }
.bl-axe { align-self: stretch; background: var(--trait-clair); }

.bl-c { display: grid; gap: .5rem; align-content: end; }
.bl-c.vendu { justify-items: end; text-align: right; }
.blc-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; }
.bl-c.vendu .blc-t { color: var(--succes); }
.bl-c.parie .blc-t { color: var(--arbitrage); }
.blc-p { display: grid; gap: .3rem; width: 100%; align-content: end; }
.blc-b { display: grid; gap: .15rem; align-content: start; padding: .6rem .8rem;
  border-radius: var(--r-m); overflow: hidden; }
.bl-c.vendu .blc-b { justify-items: end; }
.blc-b.vert { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); }
.blc-b.or, .blc-b.attente { background: rgba(255,176,32,.14); border: 1px solid rgba(255,176,32,.4); }
.blc-b.terne { background: var(--surface-2); border: 1px solid var(--trait); }
.blc-b.creux { background: none; border: 1px dashed var(--trait-clair); }
.blc-b.creux .blcb-c { color: var(--clair-terne); }
.blcb-n { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .1em; }
.blcb-c { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.blc-b.creux .blcb-c { color: var(--clair-terne); font-style: italic; }
.blcb-v { display: flex; flex-wrap: wrap; gap: 2px; margin-top: .35rem; }
.blcb-v .vignette { width: 34px; height: 22px; border-radius: 2px; }
.blc-s { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.bl-c.vendu .blc-s.creux { color: var(--succes); }
.bl-c.parie .blc-s { color: var(--bloquant-txt); }

.bl-d { display: grid; gap: .4rem; padding: .9rem 1rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 2px solid var(--or); max-width: var(--mesure-large); }
.bld-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--or); }
.bl-d p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }

@media (max-width: 900px) {
  .bl-b { grid-template-columns: minmax(0, 1fr); }
  .bl-axe { display: none; }
  .bl-c.vendu { justify-items: start; text-align: left; }
  .bl-c.vendu .blc-b { justify-items: start; }
}


/* ————————————————————— La charge : le mur ordonné par le risque ————————————————————— */

/* Le seul écran où les images ont le droit d'occuper la majorité de la
 * surface : elles SONT le contenu. Ce qui va tomber est plus grand et devant. */
.mu { display: grid; gap: 1.6rem; }
.mu-t { display: grid; gap: .3rem; }
.mu-t h3 { font-size: var(--t-ecran); line-height: var(--lh-ecran);
  letter-spacing: var(--ls-ecran); font-weight: 500; }
.mu-t p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.mu-g { display: grid; gap: .7rem; }
.mug-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--bloquant-txt); display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.mug-t.calme { color: var(--clair-terne); border-top: 1px solid var(--trait); padding-top: .9rem; }
.mug-t span { letter-spacing: 0; color: var(--clair-terne); font-size: var(--t-eti); }

.mu-l { display: grid; gap: .9rem; }
.mu-l.chaud { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.mu-l.calme { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

.mu-p { display: grid; gap: .25rem; text-align: left; font: inherit; background: none;
  border: 0; padding: 0; cursor: pointer; color: var(--clair); min-width: 0; }
.mu-p .vignette { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-m);
  border-bottom: 2px solid var(--trait); }
.mu-p.chaud .vignette { border-bottom-color: var(--bloquant); }
.mu-p:hover .vignette { outline: 2px solid var(--or); outline-offset: 2px; }
.mu-l.calme .mu-p { opacity: .85; }
.mu-l.calme .mu-p:hover { opacity: 1; }
.mup-n { font-size: var(--t-meta); line-height: var(--lh-meta); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mu-l.chaud .mup-n { font-size: var(--t-lire); line-height: var(--lh-lire); }
.mup-c { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--clair-terne); }
.mup-c.alerte { color: var(--bloquant-txt); }
.mup-q { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }


/* ————————————————————— Les gens : la semaine ————————————————————— */

/* Une barre de pourcentage dit combien, jamais quand. Cinq jours en colonnes,
 * une personne par ligne, et une ligne de capacité qu'on voit dépasser. */
.sm { display: grid; gap: 1.4rem; margin-bottom: 1.6rem; }
.sm-t { display: grid; gap: .3rem; }
.sm-t h3 { font-size: var(--t-ecran); line-height: var(--lh-ecran);
  letter-spacing: var(--ls-ecran); font-weight: 500; }
.sm-t p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.sm-g { display: grid; gap: .1rem; }
.smg-h { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: .8rem;
  border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }
.smgh-l { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.smgh-j { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); }
.smgh-j.auj { color: var(--or); }

.sm-r { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: .8rem;
  align-items: start; padding: .7rem 0; border-bottom: 1px solid var(--trait);
  border-left: 2px solid transparent; }
.sm-r.mur { border-left-color: var(--bloquant); }
.sm-r.vide { border-left-color: var(--trait-clair); }
.smr-q { display: flex; gap: .6rem; align-items: flex-start; padding-left: .6rem; }
.smrq-n { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: var(--t-lire); line-height: var(--lh-lire); }
.smrq-p, .smrq-c { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

.smr-j { position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: .4rem; min-height: 46px; align-content: start; }
.smr-c { display: grid; gap: .2rem; align-content: start;
  border-left: 1px solid var(--trait); padding-left: .3rem; min-height: 46px; }
.smr-c.auj { border-left-color: var(--or); }
.smr-b { font: inherit; font-size: var(--t-micro); line-height: var(--lh-micro);
  background: var(--arbitrage); color: var(--n900); border: 0; border-radius: var(--r-xs);
  padding: .3rem .4rem; cursor: pointer; text-align: left; overflow: hidden; min-height: 26px; }
.smr-b span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smr-b.retard { background: var(--bloquant); }
.smr-b:hover { filter: brightness(1.12); }
.smr-rien { grid-column: 1 / -1; font-size: var(--t-meta); line-height: var(--lh-meta);
  color: var(--clair-terne); font-style: italic; align-self: center; }
.smr-mur { position: absolute; top: -.2rem; bottom: -.2rem; width: 0;
  border-left: 1px dashed var(--clair-terne); pointer-events: none; }
.smr-mur span { position: absolute; top: -.9rem; left: .2rem;
  font-size: var(--t-micro); line-height: 1; color: var(--clair-terne); }
.smr-t { grid-column: 2; font-size: var(--t-meta); line-height: var(--lh-meta);
  color: var(--clair-terne); display: flex; gap: .8rem; flex-wrap: wrap; }
.smr-t.alerte { color: var(--bloquant-txt); }
.smr-x { color: var(--bloquant-txt); }
.smr-ap { color: var(--clair-terne); }
.smr-sd { color: var(--arbitrage); }

.sm-d { display: grid; gap: .4rem; padding: .9rem 1rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 2px solid var(--or); max-width: var(--mesure-large); }
.smd-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--or); }
.sm-d p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }

@media (max-width: 900px) {
  .smg-h { display: none; }
  .sm-r { grid-template-columns: minmax(0, 1fr); }
  .smr-t { grid-column: 1; }
}


/* ————————————————————— Qui bouscule : le grand livre ————————————————————— */

/* Des tuiles disaient des totaux. Ce qu'il faut voir, c'est une asymétrie :
 * ce que l'agence a payé, contre ce qu'elle a refacturé. */
.gl { display: grid; gap: 1.4rem; }
.gl-t { display: grid; gap: .2rem; }
.glt-c { font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); color: var(--bloquant-txt); }
.gl.susp .glt-c { color: var(--arbitrage); }
.glt-m { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--clair); }
.gl-t p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); margin-top: .4rem; }

.gl-h { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: .8rem; border-bottom: 1px solid var(--trait); padding-bottom: .35rem; }
.glh-a, .glh-f { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em; }
.glh-a { grid-column: 2; text-align: right; color: var(--bloquant-txt); }
.glh-f { grid-column: 4; color: var(--succes); }

.gl-l { display: grid; }
.gl-r { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: .3rem .8rem; align-items: center; padding: .8rem 0;
  border-bottom: 1px solid var(--trait); }
.glr-q { display: flex; gap: .6rem; align-items: center; }
.glrq-n { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: var(--t-lire); line-height: var(--lh-lire); }
.glrq-p { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

.glr-a { display: flex; justify-content: flex-end; gap: 2px; }
.glr-f { display: flex; gap: 2px; }
.glr-x { align-self: stretch; background: var(--trait-clair); }
.glr-b { display: flex; align-items: center; height: 26px; padding: 0 .5rem;
  border-radius: var(--r-xs); font-size: var(--t-eti); line-height: 1; min-width: 3.2rem; }
.glr-b.abs { background: var(--bloquant); color: var(--n900); justify-content: flex-end; }
.glr-b.att { background: var(--arbitrage); color: var(--n900); justify-content: flex-end; }
.glr-b.fac { background: var(--succes); color: var(--n900); }
.glr-rien { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  font-style: italic; }

.glr-d { grid-column: 2 / -1; display: grid; gap: .2rem; margin-top: .3rem; }
.glrd { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .7rem;
  align-items: baseline; }
.glrd-d { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.glrd-t { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.glrd-n { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne);
  white-space: nowrap; }

.gl-g { display: grid; gap: .4rem; padding: .9rem 1rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 2px solid var(--arbitrage);
  max-width: var(--mesure-large); }
.glg-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--arbitrage); }
.gl-g p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }

@media (max-width: 1000px) {
  .gl-h { display: none; }
  .gl-r { grid-template-columns: minmax(0, 1fr); }
  .glr-x { display: none; }
  .glr-a { justify-content: flex-start; }
  .glr-d { grid-column: 1; }
}


/* ————————————————————— Produire : la porte ————————————————————— */

/* Quatre cases égales niaient l'essentiel : on ne franchit pas un BAT comme on
 * pose une vignette. Le passage est vertical, il a un chambranle, une ligne de
 * non-retour, et un seul étage occupé à la fois. */
.pt { display: grid; gap: 1rem; }

.pt-c { display: grid; gap: .3rem; padding: 1rem 1.2rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 3px solid var(--succes); }
.pt-c.hors { border-left-color: var(--bloquant); }
.ptc-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.ptc-n { font-size: var(--t-ecran); line-height: var(--lh-ecran); color: var(--clair);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ptc-n span { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.ptc-r { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }
.pt-c.hors .ptc-r { color: var(--bloquant-txt); }

.pt-p { display: grid; }
.pt-e { display: grid; }

.pt-l { display: grid; gap: .15rem; margin: .5rem 0; padding: .5rem .9rem;
  border-top: 2px solid var(--bloquant); border-bottom: 2px solid var(--bloquant);
  background: rgba(255, 77, 79, .07); }
.ptl-t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .1em;
  color: var(--bloquant-txt); }
.ptl-s { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

.pt-f { display: grid; gap: .35rem; padding: .8rem 0;
  border-bottom: 1px solid var(--trait); }
.ptf-h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ptf-c { color: var(--succes); font-size: var(--t-lire); }
.ptf-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.ptf-q, .ptf-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.ptf-x { font-style: italic; }
.ptf-fs { display: grid; gap: .2rem; padding-left: 1.5rem; }
.ptff { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.ptff-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.ptff-m { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.ptf-v { display: flex; gap: .6rem; padding-left: 1.5rem; flex-wrap: wrap; }
.ptfv { display: grid; gap: .2rem; width: 8rem; }
.ptfv span { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.pt-f > .b.nu { justify-self: start; margin-left: 1.5rem; }

.pt-o { display: grid; gap: .7rem; padding: 1.1rem 1.2rem; background: var(--surface-2);
  border-radius: var(--r-m); border: 1px solid var(--trait-clair); }
.pt-o.dur { border-color: var(--bloquant); }
.pto-h { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.pto-i { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em;
  color: var(--n900); background: var(--accent); padding: .15rem .45rem;
  border-radius: var(--r-xs); }
.pto-n { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--clair); }
.pto-e { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

.pto-b { display: grid; gap: .25rem; }
.ptob { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .8rem;
  align-items: baseline; font-size: var(--t-lire); line-height: var(--lh-lire);
  color: var(--clair-doux); }
.ptob b { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); font-weight: 400; }
.ptob i { color: var(--arbitrage); font-style: normal; }

.pto-z { display: flex; align-items: center; gap: .6rem; justify-self: start;
  min-height: var(--cible); padding: 0 1rem; background: transparent;
  border: 1px dashed var(--trait-clair); border-radius: var(--r-s); cursor: pointer;
  transition: border-color var(--tr-rapide), background var(--tr-rapide); }
.pto-z:hover { border-color: var(--accent); background: var(--surface-3); }
.ptoz-p { font-size: var(--t-h2); color: var(--accent); line-height: 1; }
.ptoz-t { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }

.pto-c { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .8rem;
  align-items: baseline; font-size: var(--t-lire); line-height: var(--lh-lire);
  color: var(--arbitrage); max-width: var(--mesure-large); }
.pto-c b { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); font-weight: 400; }
.pto-a { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--bloquant-txt);
  max-width: var(--mesure); }

.pt-x { display: grid; grid-template-columns: 1.2rem 11rem minmax(0, 1fr);
  gap: .3rem .6rem; align-items: baseline; padding: .7rem 0;
  border-bottom: 1px solid var(--trait); opacity: .62; }
.ptx-c { color: var(--clair-terne); }
.ptx-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux); }
.ptx-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.ptx-o { grid-column: 2 / -1; font-size: var(--t-meta); line-height: var(--lh-meta);
  color: var(--clair-terne); max-width: var(--mesure); }

.pt-hs { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

@media (max-width: 700px) {
  .ptob, .pto-c { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .pt-x { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .ptx-q { grid-column: 2; }
}


/* ————————————————————— 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: .1em;
  color: var(--clair-terne); }
.rt-c.trou .rtc-bas { position: static; background: none; padding: .2rem .5rem 0;
  text-align: center; }

.mr-groupe.trou .mrg-code { background: var(--bloquant); color: var(--n900); }



/* ————————————————————— 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: .14em;
  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; }

@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); }
  /* 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; }
  .dl-r.grand .dlr-d { flex-direction: row; align-items: center; }
}


/* ————————————————————— Les routes : le comparateur ————————————————————— */

/* Des cartes empilées se lisent verticalement — on découvre une route, puis
 * l'autre, et on compare de mémoire. La décision, elle, est une comparaison :
 * elle se lit en travers. Une colonne de libellés, une par route, et chaque
 * ligne pose la même question à toutes. */
.cmp { display: grid; gap: 1rem; }
.cmp-t { font-size: var(--t-ecran); line-height: var(--lh-ecran); letter-spacing: var(--ls-ecran);
  color: var(--clair); text-align: center; max-width: 34ch; margin: 0 auto; }
.cmp-s { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  text-align: center; max-width: var(--mesure); margin: 0 auto; }

.cmp-g { display: grid; align-items: start; column-gap: 0; row-gap: 0;
  border-top: 1px solid var(--trait); margin-top: .6rem; }

.cmpg-l { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em;
  color: var(--clair-terne); padding: 1rem .8rem 1rem 0;
  border-bottom: 1px solid var(--trait); }

.cmp-h { display: grid; gap: .2rem; justify-items: center; padding: .9rem .9rem;
  border-bottom: 1px solid var(--trait); border-left: 1px solid var(--trait); }
.cmph-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.cmp-h.retenue { border-bottom-color: var(--succes); }
.cmph-e { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em;
  color: var(--succes); }

.cmp-c { padding: 1rem .9rem; border-bottom: 1px solid var(--trait);
  border-left: 1px solid var(--trait); display: grid; gap: .4rem; align-content: start; }
.cmp-c.visuel { padding: .9rem; background: transparent; border-top: 0; cursor: pointer; }
.cmp-c.visuel .vignette { width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-s); }
.cmp-c.visuel .vignette img { width: 100%; height: 100%; object-fit: cover; }
.cmp-c.visuel:hover { outline: 1px solid var(--accent); outline-offset: -1px; }

.cmpc-p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }
.cmpc-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }

/* Une case vide n'est pas un blanc : elle dit ce qui manque et ce que ça coûte. */
.cmp-vide { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.cmp-vide b { color: var(--arbitrage); font-weight: 400; }
.cmp-al { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--bloquant-txt); }

.cmp-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cmp-chip { font-size: var(--t-meta); line-height: 1; padding: .4rem .6rem;
  border: 1px solid var(--trait-clair); border-radius: var(--r-xs); color: var(--clair-doux); }

.cmp-disp { display: grid; gap: .3rem; }
.cmpd { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem;
  align-items: baseline; }
.cmpd-c { font-size: var(--t-micro); line-height: 1; letter-spacing: .08em;
  color: var(--clair-terne); border: 1px solid var(--trait-clair);
  border-radius: var(--r-xs); padding: .25rem 0; text-align: center; }
.cmpd-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }

.cmp-frise { display: flex; gap: .1rem; }
.cmpf { display: grid; justify-items: center; gap: .25rem; flex: 1 1 0; min-width: 0; }
.cmpf-d { font-size: var(--t-micro); line-height: 1; color: var(--clair);
  font-variant-numeric: tabular-nums; }
.cmpf-r { width: 7px; height: 7px; border-radius: 50%; background: var(--trait-clair);
  position: relative; }
.cmpf-r::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%;
  height: 1px; background: var(--trait); }
.cmpf:first-child .cmpf-r::before { display: none; }
.cmpf-n { font-size: var(--t-micro); line-height: 1.2; color: var(--clair-terne);
  text-align: center; }

.cmp-v { padding: 1.1rem .9rem; border-left: 1px solid var(--trait); display: grid;
  justify-items: center; }
.cmpv-b { width: 100%; }
.cmpv-ok { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--succes);
  text-align: center; }

.cmp-pied { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  text-align: center; font-style: italic; margin-top: .4rem; }

/* Au doigt, on ne compare pas en travers : chaque route devient un bloc, et
 * le libellé de ligne repasse au-dessus de sa valeur. */
@media (max-width: 900px) {
  .cmp-g { display: grid; grid-template-columns: minmax(0, 1fr) !important; border-top: 0; }
  .cmpg-l { padding: .9rem 0 .1rem; border-bottom: 0; }
  .cmp-c, .cmp-h, .cmp-v { border-left: 0; }
  .cmp-t { text-align: left; margin: 0; }
  .cmp-s, .cmp-pied { text-align: left; margin: 0; }
}


/* ————————————————————— Le référentiel : une hiérarchie ————————————————————— */

/* Trois piles de même poids disaient trois inventaires. Le marché gouverne :
 * il porte la langue, les mentions, les gabarits, le décideur. Le support
 * n'existe que servi sur un marché. */
.rf-h { display: grid; gap: .3rem; margin-bottom: 1.6rem; }
.rf-t { font-size: var(--t-ecran); line-height: var(--lh-ecran); letter-spacing: var(--ls-ecran);
  color: var(--clair); max-width: 30ch; }
.rf-s { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.rf-b { display: grid; gap: .8rem; margin-bottom: 2.2rem; }
.rfb-t { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair); border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }
.rfb-t span { letter-spacing: 0; color: var(--clair-terne); flex: 1 1 auto; }
.rf-p { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }

.rf-l { display: grid; gap: 1.4rem; }
.rf-m { display: grid; gap: .45rem; padding-left: .9rem;
  border-left: 2px solid var(--trait-clair); }
.rfm-h { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
/* L'accent tombe à 4,28 sur ce fond : il désigne bien, il ne se lit pas
 * tout à fait. Le code d'un marché est une donnée, pas une décoration. */
.rfm-code { font-size: var(--t-h2); line-height: 1; letter-spacing: .04em; color: var(--clair); }
.rfm-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.rfm-l, .rfm-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.rfm-h:hover .rfm-n { color: var(--accent); }
.rfm-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }
.rfm-x.manque { color: var(--arbitrage); }
.rfm-c { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--bloquant-txt); }

.rf-sup { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .3rem; margin-top: .2rem; }
.rf-s { display: grid; gap: .1rem; padding: .55rem .7rem; text-align: left;
  background: var(--surface-2); border: 0; border-left: 2px solid var(--succes);
  border-radius: var(--r-xs); cursor: pointer; }
.rf-s:hover { background: var(--surface-3); }
.rf-s.manque { border-left-color: var(--arbitrage); }
.rfs-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
.rfs-q, .rfs-g { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.rf-s.manque .rfs-g { color: var(--arbitrage); }

.rf-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.rf-chip { display: inline-flex; align-items: center; min-height: var(--cible);
  font-size: var(--t-meta); line-height: 1; padding: 0 .8rem;
  background: none; border: 1px dashed var(--trait-clair); border-radius: var(--r-xs);
  color: var(--clair-terne); cursor: pointer; }
.rf-chip:hover { border-color: var(--accent); color: var(--clair); }

.rf-a { display: grid; gap: .3rem; }
.rf-as { display: grid; gap: .12rem; padding: .75rem .9rem; text-align: left;
  background: var(--surface-2); border: 0; border-left: 2px solid var(--trait-clair);
  border-radius: var(--r-xs); cursor: pointer; }
.rf-as:hover { background: var(--surface-3); }
.rf-as.bientot { border-left-color: var(--arbitrage); }
.rf-as.perime { border-left-color: var(--bloquant); }
.rfa-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.rfa-s, .rfa-z { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.rfa-e { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.rf-as.bientot .rfa-e, .rfa-e.manque { color: var(--arbitrage); }
.rf-as.perime .rfa-e { color: var(--bloquant-txt); }


/* ————————————————————— L'identité : un document à signer ————————————————————— */

/* Une grille uniforme ne distingue pas ce qui est reçu de ce qui est supposé.
 * C'est pourtant la seule chose qui compte : l'un s'oppose au client, l'autre
 * fait travailler l'équipe et ne prouve rien. */
.id { display: grid; gap: 1rem; }
.id-t { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--clair);
  max-width: 34ch; }
.id-s { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.id-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem;
  align-items: start; }
.id-col { display: grid; gap: .1rem; align-content: start; }
.idc-t { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); border-bottom: 1px solid var(--trait);
  padding-bottom: .35rem; margin-bottom: .5rem; }
.idc-t span { font-variant-numeric: tabular-nums; }
.id-col.infere .idc-t { color: var(--arbitrage); border-bottom-color: var(--arbitrage); }

.id-l { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--trait); }
.idl-n { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); }
.idl-v { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.idl-p { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); margin-top: .25rem; font-style: italic; }
.idl-g { display: flex; gap: .8rem; margin-top: .3rem; }

.id-vides { display: grid; gap: .1rem; }
.id-v { display: grid; gap: .05rem; padding: .6rem 0; border-bottom: 1px solid var(--trait); }
.idv-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux); }
.idv-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--bloquant-txt);
  max-width: var(--mesure); }

.id-sign { display: grid; gap: .5rem; padding: 1.1rem 1.3rem; border-radius: var(--r-m);
  background: var(--surface-2); border-left: 3px solid var(--arbitrage); }
.id-sign.ok { border-left-color: var(--succes); }
.ids-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--arbitrage); }
.id-sign.ok .ids-t { color: var(--succes); }
.ids-c p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }
.id-sign .b.or { justify-self: start; }

/* ————————————————————— La stratégie : une page de prose ————————————————————— */

/* L'écran le plus court et le plus calme du produit. Ce sont des énoncés, pas
 * des champs : ils se lisent à la largeur d'une colonne de lecture. */
.st { display: grid; gap: 2.2rem; max-width: var(--mesure-large); }
.st-e { display: grid; gap: .5rem; }
.ste-n { display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .16em;
  color: var(--clair-terne); }
.ste-i { letter-spacing: .08em; color: var(--arbitrage); }
.ste-v { font-size: var(--t-titre); line-height: 1.55; letter-spacing: -0.005em;
  color: var(--clair); max-width: var(--mesure); }
.ste-l { display: grid; gap: .5rem; padding-left: 1.1rem; margin: 0; }
.ste-l li { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }
.ste-x { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--arbitrage);
  max-width: var(--mesure); }
.st-e.vide .ste-n { color: var(--arbitrage); }
.ste-p { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); font-style: italic; }

@media (max-width: 900px) {
  .id-g { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}


/* ————————————————————— Le socle : ce qui sert à refuser passe devant ————————————————————— */

/* Onze cartes de poids égal faisaient de la page la plus longue du produit une
 * liste plate. Deux d'entre elles servent à refuser — elles montent. */
.sh { display: grid; gap: 1.6rem; }
.sh-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.2rem; }
.sh-f { display: grid; gap: .5rem; padding: 1.3rem 1.4rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 3px solid var(--accent); }
.sh-f.vide { border-left-color: var(--bloquant); }
.shf-t { display: grid; gap: .15rem; font-size: var(--t-micro); line-height: var(--lh-micro);
  letter-spacing: .14em; color: var(--clair-terne); }
.shf-r { letter-spacing: 0; font-size: var(--t-meta); line-height: var(--lh-meta);
  color: var(--clair-terne); }
.shf-v { font-size: var(--t-h2); line-height: 1.4; letter-spacing: var(--ls-h2);
  color: var(--clair); max-width: var(--mesure); }
.shf-v .chip { font-size: var(--t-meta); }
.shf-x { display: grid; gap: .5rem; justify-items: start;
  font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--bloquant-txt);
  max-width: var(--mesure); }

.sh-t { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }
.sh-t span { letter-spacing: 0; }
.sh-reste { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .7rem; }
.sh-reste .carte-n { opacity: .82; }
.sh-reste .carte-n:hover { opacity: 1; }

/* ————————————————————— La présentation : deux registres ————————————————————— */

/* Le montage client n'est pas le dossier amputé : c'est un choix, et le choix
 * doit se voir. À gauche ce qui part, à droite ce qu'on retire et pourquoi. */
.pr-deux { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem;
  align-items: start; margin-top: 1.2rem; }
.prd-c { display: grid; gap: .7rem; align-content: start; }
.prd-t { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair); border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }
.prd-t span { letter-spacing: 0; color: var(--clair-terne); }
.prd-c.retire .prd-t { color: var(--clair-terne); }

.pr-ret { display: grid; }
.prr { display: grid; gap: .12rem; padding: .8rem 0; border-bottom: 1px solid var(--trait); }
.prr-q { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux); }
.prr-d { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.prr-p { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  font-style: italic; }
.prd-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }

@media (max-width: 1100px) {
  .pr-deux { grid-template-columns: minmax(0, 1fr); }
}


/* ————————————————————— L'atelier : l'indicateur qui décide ————————————————————— */

/* « Idées retenues émanant de juniors » est une ligne de la fiche 03, et cet
 * écran est le seul endroit où elle bouge. Enfouie dans une liste de gestes,
 * elle ne pesait sur rien. */
.aj { display: flex; align-items: baseline; gap: 1.1rem; padding: 1.1rem 1.3rem;
  background: var(--surface-2); border-radius: var(--r-m);
  border-left: 3px solid var(--trait-clair); margin-bottom: 1.2rem; }
.aj.ok { border-left-color: var(--succes); }
.aj.zero { border-left-color: var(--arbitrage); }
.aj-c { font-size: var(--t-display); line-height: 1; letter-spacing: var(--ls-display);
  color: var(--clair-terne); font-variant-numeric: tabular-nums; }
.aj.ok .aj-c { color: var(--succes); }
.aj.zero .aj-c { color: var(--arbitrage); }
.aj-t { display: grid; gap: .2rem; }
.aj-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.aj-x { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

/* ————————————————————— La planche : les manquements, pas un score ————————————————————— */

/* Un « 3 » en pastille ne dit pas ce qui ne va pas, et ne dit pas ce que ça
 * emporte. Les manquements se nomment, et disent leur descendance. */
.plc-m { display: grid; gap: .3rem; padding: .6rem .7rem 0; }
.plcm-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--bloquant-txt); }
.plcm-l { display: grid; gap: .2rem; }
.plcm { display: grid; gap: .05rem; text-align: left; background: none; border: 0;
  border-left: 2px solid var(--bloquant); padding: .2rem 0 .2rem .6rem; cursor: pointer; }
.plcm:hover { background: var(--surface-3); }
.plcm-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.plcm-x { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }


/* ————————————————————— Le papier a sa propre encre ————————————————————— */

/* Un document imprimable est un fond clair : le gris des fonds sombres y
 * tombe à 2,3:1. Ce qui est atténué sur le papier l'est par une encre du
 * papier, jamais par une opacité — et jamais sous 4,5:1. */
.co-doc .cobl-q, .co-doc .cob-t, .co-doc .cobm-n, .co-doc .cob-v,
.co-doc .cobl-v.vide, .co-doc .cobm-s { color: var(--papier-terne); }
/* Une mesure sans assise reste atténuée — mais sur le papier elle prend l'encre
 * du papier. La règle générale perdait en spécificité contre `.cobm.creux`. */
.co-doc .cobm.creux .cobm-n, .co-doc .cobl-v.vide { color: var(--papier-terne); }
.co-doc .cobl-v, .co-doc .cobm-c { color: var(--papier-encre); }

/* ————————————————————— É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. */
.at-groupe.ecartee, .bic.ecartee, .bii.ecartee, .route.ecartee { opacity: 1; }
.at-groupe.ecartee .ati-t, .bic.ecartee .bic-t, .bii.ecartee .bii-t { color: var(--clair-doux); }
.at-groupe.ecartee .ati-q, .at-groupe.ecartee .atg-t,
.bic.ecartee .bic-m, .bii.ecartee .bii-m { color: var(--clair-terne); }
.at-groupe.ecartee .at-i, .bic.ecartee, .bii.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); }
.vignette .absente { color: var(--clair-doux); }


/* ————————————————————— Une ombrelle, plusieurs marques ————————————————————— */

/* Trois marques qui partagent une campagne ne sont pas trois déclinaisons
 * d'une même chose. On sépare ce qui se produit une fois de ce qui se produit
 * — et se valide — trois fois. */
.pc { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.pc-h { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--trait);
  padding-bottom: .6rem; }
.pch-o { display: grid; gap: .1rem; }
.pcho-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.pcho-n { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--clair); }
.pcho-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--arbitrage);
  max-width: var(--mesure); }
.pch-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne); }

.pc-p { display: grid; gap: .4rem; padding: .9rem 1.1rem; background: var(--surface-2);
  border-radius: var(--r-m); }
.pcp-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--succes); }
.pcp-t span { letter-spacing: 0; color: var(--clair-terne); }
.pcp-l { display: grid; gap: .25rem; }
.pcp-i { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .8rem;
  align-items: baseline; }
.pcpi-q { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); }
.pcpi-v { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }

.pc-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem; align-items: start; }
.pcm { display: grid; gap: .7rem; align-content: start; padding: 1rem 1.1rem;
  background: var(--surface-2); border-radius: var(--r-m);
  border-top: 3px solid var(--trait-clair); }
.pcm-t { display: grid; gap: .1rem; }
.pcmt-n { display: flex; align-items: center; gap: .45rem;
  font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
/* La couleur de la marque identifie ; sur fond sombre elle tombe à 2,5:1 en
 * texte. Elle tient la pastille et le filet, le nom prend une encre lisible. */
.pcmt-p { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pcmt-m { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

.pcm-b { display: grid; gap: .2rem; }
.pcmb-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em;
  color: var(--clair-terne); }
.pcmb-l, .pcmb-promo { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .5rem; align-items: baseline; }
.pcmbl-lg { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne);
  letter-spacing: .06em; }
.pcmbl-v { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.pcmbl-v i { display: block; font-style: normal; font-size: var(--t-meta);
  line-height: var(--lh-meta); color: var(--clair-terne); }
.pcmb-promo .pcmbl-lg { color: var(--arbitrage); }

.pcm-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.pcm-chip { font-size: var(--t-meta); line-height: 1; padding: .35rem .6rem;
  border: 1px solid var(--trait-clair); border-radius: var(--r-xs); color: var(--clair-doux); }

.pcmb-sk { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.pcm-packs { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.pcm-pk { display: block; width: 46px; height: 46px; border-radius: var(--r-xs);
  background: var(--surface-3); overflow: hidden; }
.pcm-pk img { width: 100%; height: 100%; object-fit: contain; }

.pcm-e { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--arbitrage);
  border-top: 1px solid var(--trait); padding-top: .5rem; }
.pcm-e.ok { color: var(--succes); }
.pcm-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  font-style: italic; max-width: var(--mesure); }

/* ————— Le mur, rangé par marque ————— */
.mr-mq { display: grid; gap: .5rem; padding-left: .9rem; margin-bottom: 1.1rem;
  border-left: 2px solid var(--trait-clair); }
.mrmq-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.mrmqt-n { display: flex; align-items: center; gap: .45rem;
  font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.mrmqt-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

@media (max-width: 760px) {
  .pcp-i { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}


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

/* Rouvrir tout le formulaire pour corriger une ligne fait relire trente champs
 * pour en changer un. Un champ est donc un bouton — et un champ vide se voit,
 * puisque c'est celui qu'on vient remplir. */
.ch-e { display: grid; gap: .1rem; width: 100%; text-align: left; padding: .6rem .7rem;
  color: inherit; font: inherit;
  background: none; border: 0; border-left: 2px solid transparent;
  border-bottom: 1px solid var(--trait); cursor: pointer;
  transition: background var(--tr-rapide), border-color var(--tr-rapide); }
.ch-e:hover { background: var(--surface-2); border-left-color: var(--accent); }
.che-n { display: flex; align-items: baseline; gap: .5rem;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); }
.che-i { letter-spacing: .06em; color: var(--arbitrage); }
.che-v { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair);
  max-width: var(--mesure); }
.ch-e.vide { border-left-color: var(--trait-clair); }
.ch-e.vide .che-v { color: var(--clair-terne); font-style: italic; }
.ch-e.infere { border-left-color: var(--arbitrage); }
.ch-aide { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); margin-bottom: .6rem; }

/* 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. */
button.id-l, button.id-v, button.st-e, .idl-h {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 0;
  color: inherit; font: inherit; }
button.id-l, button.id-v { padding: .7rem 0; border-bottom: 1px solid var(--trait); }
button.id-l:hover, button.id-v:hover, .idl-h:hover { background: var(--surface-2); }
button.st-e:hover { background: var(--surface-2); border-radius: var(--r-s); }
button.st-e { padding: .6rem .8rem; margin-left: -.8rem; }
.idl-h { display: grid; gap: .1rem; position: relative; min-height: 0; }
.idl-h::after, .rfm-h::after { content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); min-height: var(--cible); height: 100%; }
.rfm-h { position: relative; }
.ids-g { display: flex; gap: .7rem; flex-wrap: wrap; }


/* ————— Les champs d'une section, sous sa mise en scène ————— */
.se-champs { display: grid; gap: .3rem; margin-top: 2rem; }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }

/* Le socle : la carte est le champ, donc la carte est le geste. */
.shf-h { display: grid; gap: .5rem; width: 100%; text-align: left; background: none;
  border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.shf-h:hover .shf-v { color: var(--accent); }
.shf-a { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
/* Un <button> remet la couleur et la fonte à celles du navigateur : le texte
 * des cartes enveloppées passait en noir sur fond sombre, à 1,3:1. Tout
 * enrobage de contenu hérite donc explicitement. */
.sh-c { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 0; cursor: pointer; border-radius: var(--r-s);
  color: inherit; font: inherit; }
.sh-c:hover { outline: 1px solid var(--accent); outline-offset: 2px; }


/* ————————————————————— Le vault de marque ————————————————————— */

/* Ce qui définit une marque ne change pas d'une saison à l'autre. Ça vit ici,
 * hors des campagnes — qui n'y puisent que ce qu'elles retiennent. */
.vt { display: grid; gap: 1.2rem; }
.vt-h { display: grid; gap: .3rem; }
.vt-t { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--clair);
  max-width: 32ch; }
.vt-s { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.vt-orph { display: grid; gap: .5rem; padding: 1rem 1.2rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 3px solid var(--arbitrage); }
.vto-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--arbitrage); }
.vto-t span { letter-spacing: 0; color: var(--clair-terne); }
.vto-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }
.vt-og { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .4rem; }
.vto { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .5rem;
  align-items: center; padding: .35rem; background: var(--surface-3);
  border-radius: var(--r-xs); }
.vto-v { display: block; width: 34px; height: 34px; background: var(--surface-2);
  border-radius: var(--r-xs); overflow: hidden; }
.vto-v img { width: 100%; height: 100%; object-fit: contain; }
.vto-n { grid-column: 2; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vto select { grid-column: 2; font-size: var(--t-micro); min-height: 30px; }

.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, .pcmt-v::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); }
.vtb-s { display: grid; }
.vtc { display: grid; gap: .1rem; width: 100%; text-align: left; padding: .55rem .7rem;
  background: none; border: 0; border-left: 2px solid var(--trait-clair);
  border-bottom: 1px solid var(--trait); cursor: pointer; color: inherit; font: inherit; }
.vtc:hover { background: var(--surface-3); border-left-color: var(--accent); }
.vtc.vide { border-left-color: var(--arbitrage); }
.vtc-n { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); }
.vtc-v { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair);
  max-width: var(--mesure); }
.vtc.vide .vtc-v { color: var(--clair-terne); font-style: italic; }

.vtbk-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); border-bottom: 1px solid var(--trait);
  padding-bottom: .35rem; margin-bottom: .5rem; }
.vt-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem; }
.vtp { display: grid; gap: .1rem; padding: .5rem; background: var(--surface-3);
  border-radius: var(--r-xs); border-left: 2px solid transparent; }
.vtp.aq { border-left-color: var(--arbitrage); }
.vtp-v { display: block; width: 100%; height: 76px; overflow: hidden; }
.vtp-v img { width: 100%; height: 100%; object-fit: contain; }
.vtp-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
.vtp-m { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.vtp-x { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--arbitrage); }

.vt-mk { display: flex; flex-wrap: wrap; gap: .35rem; }
.vtmk { display: inline-flex; align-items: baseline; gap: .4rem; padding: .35rem .6rem;
  background: var(--surface-3); border-radius: var(--r-xs);
  font-size: var(--t-meta); line-height: 1.3; color: var(--clair-doux); }
.vtmk b { color: var(--accent); font-weight: 400; }
.vtmk i { font-style: normal; font-size: var(--t-micro); color: var(--clair-terne); }
.vtmk.dit b { color: var(--succes); }

.vt-cp { display: grid; gap: .3rem; }
.vtcp { display: grid; gap: .05rem; padding: .55rem .7rem; background: var(--surface-3);
  border-radius: var(--r-xs); text-decoration: none; }
.vtcp:hover { background: var(--surface-2); }
.vtcp-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.vtcp-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

/* ————— La campagne ne montre que sa sélection ————— */
.pcmt-v { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  text-decoration: none; position: relative; }
.pcmt-v:hover { color: var(--accent); }
.pcm-sel { display: grid; gap: .25rem; }
.pcmsel { display: grid; grid-template-columns: 4.5rem auto; gap: .1rem .6rem;
  align-items: baseline; }
.pcmsel-c { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair);
  font-variant-numeric: tabular-nums; }
.pcmsel-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.pcmsel-d { grid-column: 2; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-terne); }
.pcms { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; }
.pcms-c { font-size: var(--t-h2); line-height: 1; color: var(--clair);
  font-variant-numeric: tabular-nums; }
.pcms-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.pcms-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }


/* ————————————————————— 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: .12em;
  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: .14em;
  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: .1em;
  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); }

/* Le pack au catalogue devient un bouton : il ouvre sa fiche. */
button.vtp { text-align: left; cursor: pointer; color: inherit; font: inherit;
  border: 0; border-left: 2px solid transparent; }
button.vtp:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
.vtp-ok { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--succes); }


/* ————— Créer, archiver, remettre ————— */
.fi-g { display: flex; gap: .6rem; flex-wrap: wrap; }
.vtb-a { display: grid; gap: .4rem; }
.vt-arch { display: grid; gap: .25rem; }
.vta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .7rem;
  align-items: center; padding: .5rem .7rem; background: var(--surface-3);
  border-radius: var(--r-xs); opacity: .85; }
.vta-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.vta-m { grid-column: 1; font-size: var(--t-micro); line-height: var(--lh-micro);
  color: var(--clair-terne); }
.vta .b.nu { grid-column: 2; grid-row: 1 / 3; }


/* ————— Se retrouver dans un catalogue ————— */
.vt-f { display: grid; gap: .3rem; margin-bottom: .6rem; }
.vtf-g { display: flex; flex-wrap: wrap; gap: .3rem; }
.vtf { min-height: var(--cible); padding: 0 .8rem; background: none;
  border: 1px solid var(--trait-clair); border-radius: var(--r-xs);
  color: var(--clair-doux); font-size: var(--t-meta); cursor: pointer; }
.vtf:hover { border-color: var(--accent); color: var(--clair); }
/* Le bleu nuit sur l'accent tombe à 3,91 : lisible de loin, pas au seuil.
 * Le noir y monte à 4,60 — c'est le même bouton, il se lit. */
.vtf.ici { background: var(--accent); border-color: var(--accent); color: #000; }

/* ————— 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. */
.ch-e.autrui { border-left-color: var(--info, var(--clair-terne)); }
.che-p { font-size: var(--t-micro); line-height: 1; letter-spacing: .06em;
  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: .06em;
  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; }


/* ————————————————————— Le socle vient du vault ————————————————————— */

/* Ce qui définit une marque vaut plusieurs années. La campagne le LIT ; ce qui
 * manque au vault manque à toutes ses campagnes, et le geste renvoie là-bas. */
.sv { display: grid; gap: 1.2rem; }
.sv-h { display: grid; gap: .35rem; justify-items: start; }
.sv-t { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--clair);
  max-width: 34ch; }
.sv-s { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }
.sv-h .b.or { text-decoration: none; }

.sv-l { display: grid; gap: .9rem; }
.svm { display: grid; gap: .8rem; padding: 1rem 1.2rem; background: var(--surface-2);
  border-radius: var(--r-m); }
.svm-h { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.svm-l { display: grid; place-items: center; width: 68px; height: 48px;
  background: var(--surface-3); border-radius: var(--r-xs); overflow: hidden; padding: .25rem; }
.svm-l img { max-width: 100%; max-height: 100%; object-fit: contain; }
.svm-l.vide { font-size: var(--t-micro); color: var(--clair-terne); }
.svm-i { display: grid; gap: .1rem; flex: 1 1 auto; }
.svm-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.svm-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.svm-v { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  text-decoration: none; position: relative; }
.svm-v::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); min-height: var(--cible); height: 100%; }
.svm-v:hover { color: var(--accent); }

.svm-f { display: grid; gap: .6rem; }
.svf { display: grid; gap: .15rem; padding-left: .8rem;
  border-left: 2px solid var(--accent); }
.svf.vide { border-left-color: var(--bloquant); }
.svf.herite { border-left-color: var(--trait-clair); }
.svf-n { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em;
  color: var(--clair-terne); }
.svf-h { letter-spacing: 0; font-style: italic; }
.svf-v { font-size: var(--t-titre); line-height: 1.45; color: var(--clair);
  max-width: var(--mesure); }
.svf.vide .svf-v { font-size: var(--t-lire); line-height: var(--lh-lire);
  color: var(--bloquant-txt); }

.svm-g { display: grid; gap: .3rem; }
.svmg-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em;
  color: var(--clair-terne); }
.svm-gc { display: flex; flex-wrap: wrap; gap: .3rem; }
.svg { display: inline-flex; align-items: baseline; gap: .4rem; padding: .35rem .7rem;
  background: var(--surface-3); border-radius: var(--r-xs);
  font-size: var(--t-meta); line-height: 1.3; color: var(--clair-terne); }
.svg.ici { color: var(--clair); border-left: 2px solid var(--accent); }
.svg i { font-style: normal; font-size: var(--t-micro); color: var(--clair-terne); }

/* ————— 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); }


/* ————————————————————— L'arbre des socles ————————————————————— */

/* Trois niveaux : l'ombrelle, la marque, la gamme. L'indentation dit la
 * descendance, et un champ hérité porte le nom de celui dont il vient. */
.vt-arbre { display: grid; gap: .5rem; }
.vn { display: grid; gap: .25rem; }
.vn.n1 { margin-left: 1.4rem; padding-left: .9rem; border-left: 1px solid var(--trait); }
.vn.n2 { margin-left: 1.2rem; padding-left: .8rem; border-left: 1px solid var(--trait); }
.vn-k { display: grid; gap: .4rem; margin-top: .35rem; }

.vn-h { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; width: 100%;
  min-height: var(--cible);
  text-align: left; background: none; border: 0; padding: .5rem .6rem; cursor: pointer;
  color: inherit; font: inherit; border-radius: var(--r-s); }
.vn-h:hover { background: var(--surface-2); }
.vn.ici > .vn-h { background: var(--surface-2); }
.vn-e { width: 1rem; text-align: center; color: var(--clair-terne);
  font-size: var(--t-titre); line-height: 1; }
.vn-p { width: 11px; height: 11px; border-radius: 3px; background: var(--trait-clair);
  flex: 0 0 auto; }
.vn-l { display: grid; place-items: center; width: 40px; height: 28px; padding: .15rem;
  background: var(--surface-3); border-radius: var(--r-xs); overflow: hidden; flex: 0 0 auto; }
.vn-l img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vn-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.vn.n1 .vn-n, .vn.n2 .vn-n { font-size: var(--t-lire); line-height: var(--lh-lire); }
.vn-r { font-size: var(--t-micro); line-height: 1; letter-spacing: .1em;
  color: var(--clair-terne); border: 1px solid var(--trait-clair);
  border-radius: var(--r-xs); padding: .18rem .4rem; }
.vn-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  flex: 1 1 auto; }
.vn-c { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  padding-left: 1.6rem; max-width: var(--mesure-large); }
.vn-c.manque { color: var(--arbitrage); }
.vn.orphelin > .vn-h { cursor: default; }

.vn-b { display: grid; gap: 1.3rem; margin: .6rem 0 .3rem 1.6rem;
  padding: 1rem 1.1rem; background: var(--surface-2); border-radius: var(--r-m); }

/* Un champ hérité se lit autrement qu'un champ propre. */
.vtc.herite { border-left-color: var(--trait-clair); }
.vtc.herite .vtc-v { color: var(--clair-doux); }
.vtc-h { font-style: italic; letter-spacing: 0; margin-left: .4rem; }
.vtc-n { display: flex; align-items: baseline; gap: .1rem; flex-wrap: wrap; }

/* ————— Qui décide ————— */
.vtb-d, .vtb-p, .vtb-m, .vtb-c, .vtb-k { display: grid; gap: .4rem; }
.vt-dec { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .3rem; }
.vtd { display: grid; gap: .05rem; text-align: left; padding: .55rem .7rem;
  background: var(--surface-3); border: 0; border-left: 2px solid var(--trait-clair);
  border-radius: var(--r-xs); cursor: pointer; color: inherit; font: inherit; }
.vtd:hover { background: var(--surface-2); }
.vtd.ici { border-left-color: var(--succes); }
.vtd-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
.vtd-r, .vtd-x { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }
.vtd.ici .vtd-x { color: var(--succes); }
.vtb-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }

/* ————— Les mécaniques de promo ————— */
.vt-pr { display: grid; gap: .3rem; }
.vtpr { display: grid; gap: .05rem; padding: .55rem .7rem; background: var(--surface-3);
  border-radius: var(--r-xs); border-left: 2px solid var(--accent); }
.vtpr.usage { border-left-color: var(--arbitrage); }
.vtpr-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.vtpr-d, .vtpr-q { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }
.vtpr-u { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--arbitrage); }

@media (max-width: 760px) {
  .vn.n1, .vn.n2 { margin-left: .5rem; padding-left: .6rem; }
  .vn-b { margin-left: .5rem; }
  .vn-c { padding-left: .6rem; }
}


/* ————————————————————— 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. */
.pm { display: grid; gap: .6rem; margin-top: 1.2rem; padding: 1rem 1.1rem;
  background: var(--surface-2); border-radius: var(--r-m);
  border-left: 3px solid var(--trait-clair); }
.pm.alerte { border-left-color: var(--bloquant); }
.pm-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); }
.pm-t span { letter-spacing: 0; }
.pm-x { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.pm-h { display: grid; gap: .1rem; padding: .6rem .8rem; border-radius: var(--r-s);
  background: rgba(255, 77, 79, .08); }
.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); }
.pm-m { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--arbitrage);
  max-width: var(--mesure); }

.pm-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .35rem; }
.pmp { display: grid; gap: .1rem; padding: .45rem; text-align: left;
  background: var(--surface-3); border: 0; border-left: 2px solid transparent;
  border-radius: var(--r-xs); cursor: pointer; color: inherit; font: inherit;
  opacity: .62; }
.pmp:hover { opacity: 1; }
.pmp.ici { opacity: 1; border-left-color: var(--succes); background: var(--surface-2); }
.pmp.hors { border-left-color: var(--bloquant); }
.pmp-v { display: block; width: 100%; height: 52px; overflow: hidden; }
.pmp-v img { width: 100%; height: 100%; object-fit: contain; }
.pmp-n { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
.pmp-m { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-terne); }


/* ————— La gamme sur la plateforme de marque ————— */
/* Un DA doit avoir les packs sous les yeux avant de dessiner ; ceux que la
 * campagne retient passent devant. */
.svm-p { display: grid; gap: .4rem; }
.svp-l { display: flex; flex-wrap: wrap; gap: .4rem; }
.svp { display: grid; gap: .2rem; justify-items: center; width: 84px; padding: .35rem;
  background: var(--surface-3); border-radius: var(--r-xs);
  border-bottom: 2px solid var(--trait); }
/* Ce que la campagne retient se distingue par sa bordure, pas par l'opacité —
 * un libellé atténué à .66 tombe à 3,7:1 et cesse d'être lisible. */
.svp.ici { border-bottom-color: var(--succes); }
.svp.ici .svp-n { color: var(--clair); }
.svp img { width: 100%; height: 54px; object-fit: contain; }
.svp-v { display: grid; place-items: center; width: 100%; height: 54px;
  color: var(--clair-terne); }
.svp-n { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--clair-doux);
  text-align: center; }
.svp-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  max-width: var(--mesure); }
.svmg-t span { letter-spacing: 0; margin-left: .5rem; }

/* 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 plateforme complète : la tête en grand, le reste en retrait ————— */

/* Deux champs servent à refuser, sept se consultent. Les supprimer était une
 * amputation : la section annonce neuf champs, elle en montre neuf. */
a.svf { text-decoration: none; display: grid; gap: .15rem; padding-left: .8rem;
  border-left: 2px solid var(--trait-clair); }
a.svf:hover { border-left-color: var(--accent); }
a.svf.grand { border-left-color: var(--accent); }
a.svf.grand.vide { border-left-color: var(--bloquant); }
a.svf.herite { border-left-color: var(--trait-clair); }
.svf-v { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux); }
a.svf.grand .svf-v { font-size: var(--t-titre); line-height: 1.45; color: var(--clair); }
a.svf.grand.vide .svf-v { font-size: var(--t-lire); line-height: var(--lh-lire);
  color: var(--bloquant-txt); }
a.svf.vide .svf-v { color: var(--clair-terne); font-style: italic; }

.svm-r { display: grid; gap: .4rem; }
.svm-rc { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .6rem .9rem; }

/* Les éléments de marque, par rôle. */
.svm-e { display: grid; gap: .4rem; }
.svm-ec { display: grid; gap: .5rem; }
.sve { display: grid; gap: .2rem; }
.sve-r { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); }
.sve-l { display: flex; flex-wrap: wrap; gap: .35rem; }
.sve-v { display: grid; place-items: center; width: 70px; height: 50px; padding: .2rem;
  background: var(--surface-3); border-radius: var(--r-xs); overflow: hidden; }
.sve-v img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sve-x { font-size: var(--t-micro); color: var(--clair-terne); }


/* ————————————————————— Les types de brief ————————————————————— */

/* Un brief est le socle d'une demande et la boussole d'un suivi. Chaque carte
 * dit les deux : sans ça, c'est un formulaire de plus. */
.bf { display: grid; gap: 1.6rem; }
.bf-vide p { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-terne);
  max-width: var(--mesure); }

.bf-l { display: grid; gap: .7rem; }
.bfl-t { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }
.bfl-t span { letter-spacing: 0; }

.bfc { display: grid; gap: .5rem; padding: 1rem 1.2rem; background: var(--surface-2);
  border-radius: var(--r-m); border-left: 3px solid var(--trait-clair); }
.bfc.ok { border-left-color: var(--succes); }
.bfc.partiel { border-left-color: var(--arbitrage); }
.bfc.absent { border-left-color: var(--bloquant); }

.bfc-h { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.bfc-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.bfc-f { font-size: var(--t-micro); line-height: 1; letter-spacing: .06em;
  color: var(--clair-terne); border: 1px solid var(--trait-clair);
  border-radius: var(--r-xs); padding: .2rem .45rem; }
.bfc-e { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
  margin-left: auto; }
.bfc-q { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair-doux);
  max-width: var(--mesure); }

.bfc-r { display: grid; gap: .2rem; }
.bfcr { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .7rem;
  align-items: baseline; font-size: var(--t-meta); line-height: var(--lh-meta);
  color: var(--clair-doux); max-width: var(--mesure-large); }
.bfcr b { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em;
  color: var(--clair-terne); font-weight: 400; }

.bfc-c { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--arbitrage);
  max-width: var(--mesure); }
.bfc.absent .bfc-c { color: var(--bloquant-txt); }
.bfc-c.ok { color: var(--succes); }
.bfc-g { display: flex; gap: .6rem; flex-wrap: wrap; }

@media (max-width: 700px) {
  .bfcr { grid-template-columns: minmax(0, 1fr); gap: .05rem; }
  .bfc-e { margin-left: 0; }
}


/* ————— Le brief qui commande le socle ————— */
.vtb-bp { display: grid; gap: .45rem; padding: .8rem 1rem; background: var(--surface-3);
  border-radius: var(--r-s); border-left: 3px solid var(--trait-clair); }
.vtb-bp.ok { border-left-color: var(--succes); }
.vtb-bp.partiel { border-left-color: var(--arbitrage); }
.vtb-bp.absent { border-left-color: var(--bloquant); }
.vtb-bp .vtbk-t { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.vtb-bp .vtbk-t .b { margin-left: auto; }

/* Montrer ce qui va bien, sur demande. */
.rf-plus {
  min-height: var(--cible); padding: .2rem .6rem; margin-top: .3rem;
  background: none; border: 1px dashed var(--trait-clair); border-radius: var(--r-xs);
  color: var(--clair-terne); font: inherit;
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  cursor: pointer;
}
.rf-plus:hover { border-color: var(--accent); color: var(--clair); }
.rf-plus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rf-plus.manque { border-color: var(--attente); color: var(--attente); }
.rf-plus.ici { border-style: solid; border-color: var(--accent); color: var(--clair); }


/* 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);
}


/* ————————————————————— Un chiffre porte sa conséquence ————————————————————— */

/* Les trois tuiles de l'en-tête — blocages, inférés, livrables — étaient
 * trois nombres de même taille : on les lisait, on ne faisait rien. Il en
 * reste un, celui qui coûte le plus cher aujourd'hui, et il porte la phrase
 * qui dit ce qu'il coûte. */
.projet-entete .cotes { max-width: 30ch; }
.pe-etat {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  column-gap: .5rem; row-gap: .3rem;
  background: var(--nuit-carte); padding: .7rem .85rem .8rem;
}
.pee-c {
  font-size: var(--t-ecran); line-height: 1; letter-spacing: var(--ls-ecran);
  color: var(--clair);
}
.pee-n {
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  text-transform: uppercase; color: var(--clair-terne);
}
.pee-q {
  grid-column: 1 / -1;
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  color: var(--clair-doux); margin: 0;
}
.pe-etat.alerte .pee-c { color: var(--bloquant-txt); }
.pe-etat.attente .pee-c { color: var(--attente); }
.pe-etat.vert .pee-c { color: var(--vert); }

@media (max-width: 760px) {
  .projet-entete .cotes { max-width: none; margin-left: 0; }
}


/* La route d'un cycle porte ses publications. */
.rt-q { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  color: var(--clair-doux); margin: 0 0 .5rem; max-width: var(--mesure); }

/* ————————————————————— 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; }


/* ————————————————————— Le calendrier d'un cycle ————————————————————— */

/* Un cycle éditorial se pilote sur deux dates : celle où l'on remet, celle où
 * ça paraît. Le mur ne montrait ni l'une ni l'autre — et surtout pas le texte
 * du post, qui est pourtant tout ce dont l'exécutant a besoin. */
.cy { display: grid; gap: 1rem; }
.cy-f { margin-bottom: .2rem; }
.cy-sem { display: grid; gap: 1.4rem; }

.cys { display: grid; gap: .5rem; }
.cys-t { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--trait); padding-bottom: .3rem; }
.cyst-n { font-size: var(--t-titre); line-height: var(--lh-titre); color: var(--clair); }
.cyst-d { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.cyst-q { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne); margin-left: auto; }
.cys-l { display: grid; gap: .45rem; }

/* Une publication : sa ligne dit déjà ce qu'elle coûte, on ne déplie que pour agir. */
.cyp { background: var(--nuit-carte); border-left: 2px solid var(--trait-clair); }
.cyp.remiseRatee { border-left-color: var(--bloquant-txt); }
/* Parue sans trace : ce n'est pas un défaut de production, c'est une
 * documentation en retard. L'encre le dit autrement. */
.cyp.aDocumenter { border-left-color: var(--attente); }
.cyp.sansqui { border-left-color: var(--alerte); }
.cyp.demandee { border-left-color: var(--attente); }
.cyp.soumise { border-left-color: var(--accent); }
.cyp.prete { border-left-color: var(--vert); }

.cyp-h {
  display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) auto auto;
  align-items: center; gap: .8rem; width: 100%;
  min-height: var(--cible); padding: .55rem .8rem;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: inherit; font: inherit;
}
.cyp-h:hover .cyph-n { color: var(--accent); }
.cyp-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cyph-d { display: flex; align-items: baseline; gap: .3rem;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
.cyphd-r { color: var(--clair); }
.cyphd-f { color: var(--clair-terne); }
.cyphd-p { color: var(--clair-doux); }
.cyp.remiseRatee .cyphd-r { color: var(--bloquant-txt); }
.cyp.aDocumenter .cyphd-p { color: var(--attente); }

.cyph-c { display: grid; gap: .1rem; min-width: 0; }
.cyph-n { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair); }
.cyph-m { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne); }
.cyph-e { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .06em;
  text-transform: uppercase; padding: .1rem .4rem; border: 1px solid var(--trait-clair);
  color: var(--clair-doux); white-space: nowrap; }
.cyph-e.remiseRatee { border-color: var(--bloquant-txt); color: var(--bloquant-txt); }
.cyph-e.aDocumenter { border-color: var(--attente); color: var(--attente); }
.cyph-e.sansqui { border-color: var(--alerte); color: var(--alerte); }
.cyph-e.demandee { border-color: var(--attente); color: var(--attente); }
.cyph-e.prete { border-color: var(--vert); color: var(--vert); }
.cyph-x { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne); }

.cyp-q { padding: 0 .8rem .5rem 12.9rem;
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  color: var(--clair-doux); }

/* Le contenu du post, tel qu'il a été arrêté. C'est ce qu'on venait chercher. */
.cyp-b { display: grid; gap: .7rem; padding: .2rem .8rem .8rem;
  border-top: 1px solid var(--trait); }
.cypb { display: grid; gap: .15rem; }
.cypb-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--clair-terne); }
.cypb-c { font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair);
  white-space: pre-wrap; max-width: var(--mesure); }
.cyp-r { display: grid; gap: .25rem; }
.cypr { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.cypr b { display: inline-block; min-width: 9rem; color: var(--clair-terne);
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  text-transform: uppercase; font-weight: 400; }

/* Le découpage d'une animatique : sans lui, ce n'est pas un brief, c'est une intention. */
.cyp-sc { display: grid; gap: .35rem; padding-top: .3rem; border-top: 1px dashed var(--trait); }
.cypsc-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--clair-terne); }
.cypsc { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .5rem; }
.cypsc-n { font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--accent); }
.cypsc-c { display: grid; gap: .1rem; }
.cypsc-e { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair); }
.cypsc-i, .cypsc-v { font-size: var(--t-eti); line-height: var(--lh-eti);
  letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.cyp-qui { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-doux); }
.cyp-dm { display: flex; gap: .3rem; flex-wrap: wrap; }
.cypdm { font-size: var(--t-micro); line-height: var(--lh-micro);
  padding: .05rem .35rem; border: 1px solid var(--attente); color: var(--attente); }
.cypdm.rendu { border-color: var(--vert); color: var(--vert); }

@media (max-width: 760px) {
  .cyp-h { grid-template-columns: minmax(0, 1fr) auto; }
  .cyph-d { grid-column: 1 / -1; }
  .cyp-q { padding-left: .8rem; }
}


/* ————————————————————— Replier ce qu'on ne travaille pas ————————————————————— */

/* Un en-tête de bloc devient un geste. Le piège est connu : un <button>
 * remet color et font aux valeurs du navigateur, ce qui rendait le texte
 * noir sur fond sombre. On hérite explicitement des deux. */
button.mrmq-t, button.mrg-tete {
  width: 100%; min-height: var(--cible); padding: .3rem 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: inherit; font: inherit;
}
button.mrmq-t:hover .mrmqt-n, button.mrg-tete:hover .mrg-nom { color: var(--accent); }
button.mrmq-t:focus-visible, button.mrg-tete:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.mrmqt-x, .mrg-x {
  margin-left: auto; padding-left: .6rem;
  font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--clair-terne);
}

/* Replié, un bloc ne garde que sa ligne : c'est elle qui doit suffire. */
.mr-mq.replie { margin-bottom: .5rem; gap: 0; }
.mr-groupe.replie { gap: 0; }

/* La barre de filtres du mur, et ce qu'elle écarte. */
.mr-f { margin-bottom: 1rem; }
.mrf-e {
  font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  color: var(--clair-terne); margin-bottom: .2rem;
}



/* ————— Les champs d'une section, sous sa mise en scène ————— */
.se-champs { display: grid; gap: .3rem; margin-top: 2rem; }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .14em;
  color: var(--clair-terne); border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }

/* Le socle : la carte est le champ, donc la carte est le geste. */
.shf-h { display: grid; gap: .5rem; width: 100%; text-align: left; background: none;
  border: 0; padding: 0; cursor: pointer; }
.shf-h:hover .shf-v { color: var(--accent); }
.shf-a { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--accent); }
.sh-c { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 0; cursor: pointer; border-radius: var(--r-s); }
.sh-c:hover { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ═══════════════ 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. */
.npp-q, .dcm-q, .juj, .vide-ref, .eqpd, .prp-tire, .cobm-q, .cobe-c, .cobe-m,
.plc-sous, .rq-etat, .slfi-q, .stc-q, .plc-ecart, .pir-q, .pirc-p, .mqs-q,
.atdq-o, .auteurs, .codt-s, .sld-m, .e-charge, .slp-a, .atx-k, .bri-s,
.rail-q, .fi-meta, .rd-ref, .poste, .pil-n, .mrg-n, .atfm-q, .eqp-q,
.pirc-d, .egc-verdict, .pip-n, .atdq-p, .cobl-v, .l-v, .b-v, .critere,
.ecx-m, .ecx-k, .fix-k, .dmd-etat, .etat-l, .bic-etat, .bii-etat, .ati-etat {
  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. */
.ati-mo, .bii-mo, .bii-m, .pir-regle, .jum, .bic-src, .bir-e, .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, .bii-t, .ati-t {
  font-size: var(--t-lire); line-height: 1.6;
}

/* Et la règle qui empêche la dérive de revenir : au-dessous de --t-eti, on ne
 * met que des capitales espacées. Un texte en bas de casse à cette taille est
 * un défaut, pas un choix. */

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

.bi-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .9rem; }
.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: .62rem; letter-spacing: .1em;
  padding: .1rem .4rem; background: rgba(14,15,17,.86); color: var(--clair); }
.bic.retenue .bic-eti { background: var(--vert); }
.bic-t { font-size: 1.05rem; padding: 0 .65rem; }
.bic-a { display: flex; align-items: center; gap: .3rem; font-size: .72rem;
  color: var(--clair-terne); padding: 0 .65rem; }
.bic-acc { font-family: var(--lecture); font-size: 1rem; color: var(--or); padding: 0 .65rem; }
.bic-c { font-size: .82rem; 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(--alerte); }
.bica.argument { border-left-color: var(--vert); }
.bica .t { font-size: .58rem; letter-spacing: .12em; color: var(--clair-terne); }
.bica .v { font-size: .82rem; line-height: 1.45; }
.bica .v.vide { color: var(--alerte); font-style: italic; }

.bic-src { font-size: .7rem; 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: .72rem; color: var(--clair-terne); padding: 0 .65rem; }
.bic-n b { color: var(--clair); }
.bic-n .alerte, .bic-n .alerte b { color: var(--alerte); }
.bic-g { padding: .2rem .65rem 0; }
.bic-g .b { width: 100%; }

/* ————————————————————— Les idées de l'atelier, dans la big idea ————————————————————— */

.bi-atelier { display: grid; gap: .6rem; margin-top: 1.4rem; }
.bi-idees { display: grid; gap: .35rem; }
.bii { background: var(--nuit-carte); border-left: 2px solid var(--trait-clair);
  padding: .4rem .6rem; display: grid; gap: .2rem; }
.bii.retenue { border-left-color: var(--vert); }
.bii.ecartee { opacity: .55; }
.bii-t { font-size: .88rem; font-family: var(--lecture); line-height: 1.35; }
.bii-m { display: flex; align-items: center; gap: .35rem; font-size: .7rem;
  color: var(--clair-terne); flex-wrap: wrap; }
.bii-r { color: var(--vert); }
.bii-r.vide { color: var(--alerte); font-style: italic; }
.bii-mo { font-size: .74rem; color: var(--clair-doux); border-left: 2px solid var(--trait);
  padding-left: .5rem; }

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

.di-canal { display: grid; gap: .35rem; margin-bottom: .7rem; }
.dic-t { display: flex; align-items: center; gap: .5rem; font-size: .7rem; color: var(--clair-terne); }
.dic-b { font-size: .62rem; letter-spacing: .1em; 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(--alerte); }
.dia-h { display: flex; align-items: baseline; gap: .5rem; }
.dia-lieu { font-size: .6rem; letter-spacing: .08em; color: var(--clair-terne);
  border: 1px solid var(--trait); padding: 0 .28rem; }
.dia-nom { font-size: .88rem; flex: 1; }
.dia-t { font-size: .7rem; color: var(--clair-terne); }
.di-a.depasse .dia-t { color: var(--alerte); }
.di-a.tendu .dia-t { color: var(--attente); }
.di-a.tenu .dia-t { color: var(--vert); }
.dia-q { font-size: .78rem; color: var(--clair-doux); line-height: 1.4; }
.dia-m { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .68rem; color: var(--clair-terne); }
.dia-m .alerte { color: var(--alerte); }

.coche { display: flex; align-items: center; gap: .45rem; font-size: .8rem; margin-top: .5rem; }