/* ecrans.css — la revue, les projets, la matrice, le livrable. */

/* ————————————————————— Revue : une ligne = une pièce ————————————————————— */

.groupe { margin-top: 1.4rem; }

.piece {
 display: grid;
 grid-template-columns: 118px minmax(0, 1fr) 9.5rem auto;
 gap: 1rem;
 align-items: start;
 background: var(--nuit-carte);
 padding: .8rem;
 margin-bottom: .5rem;
}
.piece:hover { border-color: var(--trait-clair); }

.piece-nom { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.piece-nom h4 { font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); font-weight: 400; }
.piece-meta { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .3rem; line-height: 1.5; }
.piece-meta .sep { opacity: .4; margin: 0 .3rem; }
.piece-adaptation { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .2rem; }

.piece-statut { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); margin-top: .5rem; }
.piece-statut .quoi { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.piece-statut .point { width: .5rem; height: .5rem; border-radius: 50%; background: var(--attente); flex: 0 0 auto; }
.piece-statut .point.vert { background: var(--vert); }
.piece-statut .point.violet { background: var(--violet); }
.piece-statut .depuis { color: var(--clair-terne); }

/* Les deux chiffres qui comptent */
.mesures { display: grid; gap: .55rem; min-width: 8.5rem; }
.mesure .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; color: var(--clair-terne); }
.mesure .v { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); margin-top: .1rem; }
.mesure .v.bon { color: var(--vert); }
.mesure .v.limite { color: var(--attente); }
.mesure .v.depasse { color: var(--bloquant-txt); }
.jauge { height: 3px; background: var(--trait); margin-top: .25rem; position: relative; }
.jauge i { position: absolute; inset: 0 auto 0 0; background: var(--vert); }
.jauge.limite i { background: var(--attente); }
.jauge.depasse i { background: var(--alerte); }

.piece-action { display: grid; gap: .35rem; align-content: start; }

/* ————————————————————— Projets ————————————————————— */

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem; }

.carte-projet {
 background: var(--nuit-carte); 
 text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 0; overflow: hidden;
}
.carte-projet:hover { border-color: var(--or); }
.carte-projet .corps-carte { padding: .75rem .85rem .9rem; display: grid; gap: .25rem; }
.carte-projet .ref { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .1em; color: var(--clair-terne); }
.carte-projet h4 { font-size: var(--t-lire); letter-spacing: var(--ls-lire); font-weight: 400; line-height: 1.25; }
.carte-projet .meta { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.carte-projet .pastilles { display: flex; gap: 2px; margin-top: .45rem; }
.carte-projet .past { height: .28rem; flex: 1; background: var(--trait); }
.carte-projet .past.plein { background: var(--vert); }
.carte-projet .past.partiel { background: var(--attente); }
.carte-projet .alerte-p { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); margin-top: .35rem; }
.carte-projet .bien-p { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--vert); margin-top: .35rem; }

/* ————————————————————— Projet : ruban de sections ————————————————————— */

.projet-entete { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.projet-entete .titre h2 { font-family: var(--main); font-size: var(--t-nombre); letter-spacing: var(--ls-nombre); font-weight: 400; line-height: 1.1; }
.projet-entete .titre .sous { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne); margin-top: .2rem; }
.projet-entete .cotes { margin-left: auto; display: flex; gap: 1.2rem; align-items: center; }

/* ————————————————————— Pistes ————————————————————— */

.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: .7rem; }
.route {
  background: var(--nuit-carte); border: 1px solid var(--trait); padding: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden;
}
.route:hover { border-color: var(--trait-clair); }
.route.retenue { border-color: var(--vert); }
.route.ecartee { opacity: .55; }
.route .tete-route { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem;
  border-bottom: 1px solid var(--trait); }
.route .tete-route .nom { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: .06em; color: var(--or); }
.route .tete-route .eti { margin-left: auto; }
.route .corps-route { padding: .65rem .7rem .8rem; display: grid; gap: .3rem; }
.route .phrase { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; }
.route .auteurs { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.route .manque { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); }
.route.ajout { display: flex; align-items: center; justify-content: center; min-height: 200px;
  border-style: dashed; color: var(--clair-terne); }

/* ————————————————————— Matrice ————————————————————— */

.volet { border: 1px solid var(--trait); margin-bottom: .8rem; }
.volet-tete { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
  background: var(--nuit-carte); border-bottom: 1px solid var(--trait); font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.volet-tete .compte { margin-left: auto; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

.matrice { width: 100%; border-collapse: collapse; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.matrice th { background: var(--nuit-relief); color: var(--clair-doux); font-weight: 400;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .08em; padding: .35rem .5rem; text-align: center; }
.matrice th:first-child { text-align: left; }
.matrice td { border: 1px solid var(--trait); padding: 0; text-align: center; }
.matrice td.entete-ligne { text-align: left; padding: .4rem .55rem; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  background: var(--nuit-carte); color: var(--clair-doux); }
.case-m { width: 100%; border: 0; background: none; font: inherit; padding: .35rem .25rem;
  cursor: pointer; display: grid; gap: .2rem; justify-items: center; color: var(--clair); }
.case-m:hover { background: var(--nuit-carte); }
.case-m .rond { width: .6rem; height: .6rem; border-radius: 50%; background: var(--trait-clair); }
.case-m.pret .rond { background: var(--vert); }
.case-m.encours .rond { background: var(--attente); }
.case-m.bloque .rond { background: var(--alerte); }
.case-m.perime .rond { background: var(--alerte); box-shadow: 0 0 0 3px rgba(217,83,74,.22); }
.case-m .part { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); color: var(--clair-terne); }
.case-m.absente { color: var(--trait-clair); cursor: pointer; }
.case-m.absente:hover .part { color: var(--or); }

/* ————————————————————— Axes ————————————————————— */

.axes { display: flex; gap: 2px; flex-wrap: wrap; }
.axe { font: inherit; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); padding: .14rem .35rem; cursor: pointer;
  background: none; border: 1px solid var(--trait); color: var(--clair-terne); }
.axe.pret { background: var(--vert); color: #06180e; border-color: var(--vert); }
.axe.attente { border-color: var(--attente); color: var(--attente); }
.axe.sansobjet { opacity: .35; }

/* ————————————————————— Blocages ————————————————————— */

.blocages { display: grid; gap: .45rem; }
.blocage { background: rgba(217,83,74,.08); border: 1px solid rgba(217,83,74,.28);
  border-left: 3px solid var(--alerte); padding: .55rem .75rem; display: grid; gap: .18rem; }
.blocage b { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-weight: 400; }
.blocage .quand { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); }
.blocage .cout { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: #eaa9a3; line-height: 1.4; }
.blocage .actions { display: flex; gap: .35rem; margin-top: .3rem; }
.blocage .actions button { font: inherit; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); background: none;
  border: 1px solid rgba(217,83,74,.4); color: #eaa9a3; padding: .16rem .42rem; cursor: pointer; }
.blocage .actions button:hover { background: var(--alerte); color: #fff; }

/* ————————————————————— Attentes ————————————————————— */

.attente-l { background: var(--nuit-carte); 
 border-left: 3px solid var(--attente); padding: .6rem .8rem; display: grid; gap: .2rem; margin-bottom: .45rem; }
.attente-l.resolue { border-left-color: var(--vert); opacity: .6; }
.attente-l .tete { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.attente-l .tete b { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-weight: 400; }
.attente-l .tete .age { margin-left: auto; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--bloquant-txt); }
.attente-l .critere { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne); }
.attente-l .message { font-size: var(--t-meta); letter-spacing: var(--ls-meta); background: var(--nuit); border: 1px solid var(--trait);
  padding: .5rem .6rem; margin-top: .3rem; white-space: pre-wrap; line-height: 1.45; color: var(--clair-doux); }
.attente-l details summary { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); cursor: pointer; }

/* ————————————————————— Rail droit : files ————————————————————— */

/* ————————————————————— Référentiel ————————————————————— */

.ref-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .55rem; }
.ref-carte { background: var(--nuit-carte); border: 1px solid var(--trait); padding: .6rem .7rem .7rem;
  display: grid; gap: .2rem; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ref-carte:hover { border-color: var(--or); }
.ref-carte b { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-weight: 400; }
.ref-carte .detail { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.ref-carte .vide-ref { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--attente); }

/* ————————————————————— Réglages ————————————————————— */

.reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; }
.reglage { background: var(--nuit-carte); padding: .8rem .85rem .9rem; }
.reglage h4 { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-weight: 400; margin-bottom: .35rem; }
.reglage p { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-terne); line-height: 1.45; margin-bottom: .5rem; }

.journal { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.journal-l { display: grid; grid-template-columns: 5rem 6rem 1fr; gap: .5rem;
  padding: .26rem 0; border-bottom: 1px solid var(--trait); color: var(--clair-doux); }
.journal-l .h { color: var(--clair-terne); font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }

/* ————————————————————— Barre d'actions rapides ————————————————————— */

.actions-rapides {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--trait); border: 1px solid var(--trait); margin-top: 1.4rem;
}
.actions-rapides button {
  background: var(--nuit-carte); border: 0; font: inherit; color: var(--clair);
  padding: .6rem .7rem; cursor: pointer; text-align: left; display: grid; gap: .1rem;
}
.actions-rapides button:hover { background: var(--nuit-relief); }
.actions-rapides .t { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.actions-rapides .s { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }

/* ————————————————————— Livrable ————————————————————— */

.livrable-apercu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; }

.criteres-l { display: grid; gap: .1rem; }
.critere-l { display: grid; grid-template-columns: 1.2rem 1fr; gap: .5rem; padding: .3rem 0;
  border-bottom: 1px solid var(--trait); font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); cursor: pointer; }
.critere-l .marque { color: var(--clair-terne); }
.critere-l.tenu .marque { color: var(--vert); }
.critere-l.rate .marque { color: var(--bloquant-txt); }
.critere-l.rate { color: #eaa9a3; }

.etapes-suite { display: grid; gap: .35rem; }
.etape-suite { display: flex; align-items: center; gap: .55rem; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta);
  padding: .35rem 0; border-bottom: 1px solid var(--trait); }
.etape-suite .n { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--trait-clair);
  display: flex; align-items: center; justify-content: center; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.etape-suite .eti { margin-left: auto; }

@media (max-width: 1180px) {
  .piece { grid-template-columns: 108px minmax(0, 1fr) auto; }
  .mesures { grid-column: 2; grid-template-columns: 1fr 1fr; display: grid; }
}

@media (max-width: 820px) {
  .piece { grid-template-columns: 92px minmax(0, 1fr); gap: .7rem; }
  .mesures, .piece-action { grid-column: 1 / -1; }
  .mesures { grid-template-columns: 1fr 1fr; display: grid; }
  .piece-action { display: flex; gap: .4rem; }
  .livrable-apercu { grid-template-columns: minmax(0, 1fr); }
  .matrice { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); }
}

/* ————————————————————— Brief ————————————————————— */

.brief-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.brief-cote { display: grid; gap: .8rem; }

.carte-phrase { background: var(--nuit-relief); padding: 1rem 1.1rem 1.1rem; }
.carte-phrase .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .12em; color: var(--clair-terne); }
.carte-phrase .phrase { font-family: var(--main); font-size: var(--t-titre); letter-spacing: var(--ls-titre); line-height: 1.4; margin-top: .5rem; }
.carte-phrase .signe { text-align: right; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .5rem; }
.carte-phrase .signature { font-family: var(--main); color: var(--or); font-size: var(--t-lire); line-height: var(--lh-lire); letter-spacing: var(--ls-lire); margin-top: .6rem; }
.carte-phrase.grande { margin-top: 1rem; }
.carte-phrase.grande .phrase { font-size: var(--t-ecran); line-height: var(--lh-ecran); letter-spacing: var(--ls-ecran); }

.trois-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; align-items: start; }
.col-msg { background: var(--nuit-carte); padding: .75rem .8rem .85rem; }
.col-msg .c-ico { color: var(--or); display: block; margin-bottom: .4rem; }
.col-msg .c-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; color: var(--clair-terne); }
.col-msg .c-v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.5; margin-top: .3rem; }
.col-msg .c-v.vide { color: var(--bloquant-txt); font-style: italic; }
.col-msg .c-i { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .4rem; font-style: italic; }

.preuves { display: grid; gap: .3rem; }
.preuve { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; color: var(--clair-doux); }
.preuve svg { color: var(--vert); margin-top: .15rem; }

.objectifs { display: grid; gap: .5rem; }
.objectif { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.objectif .n { color: var(--or); font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.objectif .t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: .06em; color: var(--clair-terne); }
.objectif .v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.5; margin-top: .15rem; }
.objectif .v.vide { color: var(--bloquant-txt); font-style: italic; }

.regles { display: grid; gap: .5rem; }
.regle-l { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.regle-l .r-ico { color: var(--or); }
.regle-l .r-t { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.regle-l .r-v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); line-height: 1.45; margin-top: .1rem; }
.regle-l .r-v.vide { color: var(--bloquant-txt); font-style: italic; }

.sante { display: flex; gap: .9rem; align-items: flex-start; }
.sante-liste { display: grid; gap: .18rem; flex: 1; }
.sante-l { display: flex; gap: .45rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); }
.sante-l.ok { color: var(--clair-doux); }
.sante-l .m { color: var(--attente); }
.sante-l.ok .m { color: var(--vert); }

.point-att { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--t-meta); letter-spacing: var(--ls-meta);
  color: #e5c88c; padding: .3rem 0; line-height: 1.4; }
.point-att svg { color: var(--attente); margin-top: .15rem; flex: 0 0 auto; }

blockquote.verbatim { font-family: var(--lecture); font-size: var(--t-lire); letter-spacing: var(--ls-lire); line-height: 1.6;
  color: var(--clair-doux); border-left: 2px solid var(--or); padding-left: .9rem; }

/* ————————————————————— Big idea ————————————————————— */

.bi-tete { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.bi-nom { font-family: var(--main); font-size: var(--t-ecran); letter-spacing: var(--ls-ecran); font-weight: 400; line-height: 1.1; }
.bi-sous { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.bi-auteur { margin-left: auto; display: flex; gap: .55rem; align-items: center; }
.bi-auteur .a-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; color: var(--clair-terne); }
.bi-auteur .a-v { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.bi-auteur .a-v.vide { color: var(--bloquant-txt); font-style: italic; }

.validation { display: grid; gap: .55rem; }
.val-l { display: grid; gap: .15rem; }
.val-l .v-t, .val-locales .v-t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; color: var(--clair-terne); }
.val-l .v-v { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.val-l .v-v.vide { color: var(--bloquant-txt); font-style: italic; }
.val-locales { display: grid; gap: .3rem; padding-top: .5rem; border-top: 1px solid var(--trait); }
.val-m { display: flex; align-items: center; gap: .5rem; }
.val-m .v-etat { margin-left: auto; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--attente); font-variant-numeric: tabular-nums; }
.val-m .v-etat.ok { color: var(--vert); }

/* ————————————————————— Socle ————————————————————— */

.socle-tete { display: flex; align-items: flex-start; gap: 1rem; }
.socle-marque { font-family: var(--main); font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); margin-top: .3rem; }
.ordre { display: grid; gap: .3rem; }
.ordre-l { display: flex; gap: .5rem; font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; }
.ordre-l .n { color: var(--or); flex: 0 0 auto; }

/* ————————————————————— Livrable ————————————————————— */

.liv-tete { margin-bottom: .8rem; }
.liv-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.liv-resp { display: flex; gap: .4rem; align-items: center; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); color: var(--clair-doux); }
.liv-v { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--or); margin-left: auto; }

.liv-apercu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }

.ou-en { background: var(--nuit-carte); padding: .7rem .8rem; margin: .8rem 0; }
.ou-en .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .1em; color: var(--clair-terne); }
.ou-en .v { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.5; margin-top: .25rem; }

.axes-legende { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .4rem; font-style: italic; }

.graphe-boite { background: var(--nuit-carte); padding: .5rem; margin-bottom: .8rem; }

@media (max-width: 1000px) {
  .brief-grille, .liv-apercu { grid-template-columns: minmax(0, 1fr); }
}

/* ————————————————————— Brief ————————————————————— */

.brief-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.brief-cote { display: grid; gap: .8rem; }

.carte-phrase { background: var(--nuit-relief); border: 1px solid var(--trait); padding: 1rem 1.1rem 1.1rem; }
.carte-phrase .t { font-size: .62rem; letter-spacing: .12em; color: var(--clair-terne); }
.carte-phrase .phrase { font-family: var(--main); font-size: 1.35rem; line-height: 1.4; margin-top: .5rem; }
.carte-phrase .signe { text-align: right; font-size: .7rem; color: var(--clair-terne); margin-top: .5rem; }
.carte-phrase .signature { font-family: var(--main); color: var(--or); font-size: 1.1rem; margin-top: .6rem; }
.carte-phrase.grande { margin-top: 1rem; }
.carte-phrase.grande .phrase { font-size: 1.6rem; }

.trois-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; align-items: start; }
.col-msg { background: var(--nuit-carte); border: 1px solid var(--trait); padding: .75rem .8rem .85rem; }
.col-msg .c-ico { color: var(--or); display: block; margin-bottom: .4rem; }
.col-msg .c-t { font-size: .62rem; letter-spacing: .1em; color: var(--clair-terne); }
.col-msg .c-v { font-size: .86rem; line-height: 1.5; margin-top: .3rem; }
.col-msg .c-v.vide { color: var(--alerte); font-style: italic; }
.col-msg .c-i { font-size: .7rem; color: var(--clair-terne); margin-top: .4rem; font-style: italic; }

.preuves { display: grid; gap: .3rem; }
.preuve { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; line-height: 1.45; color: var(--clair-doux); }
.preuve svg { color: var(--vert); margin-top: .15rem; }

.objectifs { display: grid; gap: .5rem; }
.objectif { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.objectif .n { color: var(--or); font-size: .78rem; }
.objectif .t { font-size: .72rem; letter-spacing: .06em; color: var(--clair-terne); }
.objectif .v { font-size: .88rem; line-height: 1.5; margin-top: .15rem; }
.objectif .v.vide { color: var(--alerte); font-style: italic; }

.regles { display: grid; gap: .5rem; }
.regle-l { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.regle-l .r-ico { color: var(--or); }
.regle-l .r-t { font-size: .78rem; }
.regle-l .r-v { font-size: .82rem; color: var(--clair-doux); line-height: 1.45; margin-top: .1rem; }
.regle-l .r-v.vide { color: var(--alerte); font-style: italic; }

.sante { display: flex; gap: .9rem; align-items: flex-start; }
.sante-liste { display: grid; gap: .18rem; flex: 1; }
.sante-l { display: flex; gap: .45rem; font-size: .76rem; color: var(--clair-terne); }
.sante-l.ok { color: var(--clair-doux); }
.sante-l .m { color: var(--attente); }
.sante-l.ok .m { color: var(--vert); }

.point-att { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem;
  color: #e5c88c; padding: .3rem 0; line-height: 1.4; }
.point-att svg { color: var(--attente); margin-top: .15rem; flex: 0 0 auto; }

blockquote.verbatim { font-family: var(--lecture); font-size: 1rem; line-height: 1.6;
  color: var(--clair-doux); border-left: 2px solid var(--or); padding-left: .9rem; }

/* ————————————————————— Big idea ————————————————————— */

.bi-tete { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.bi-nom { font-family: var(--main); font-size: 1.7rem; font-weight: 400; line-height: 1.1; }
.bi-sous { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.bi-auteur { margin-left: auto; display: flex; gap: .55rem; align-items: center; }
.bi-auteur .a-t { font-size: .6rem; letter-spacing: .1em; color: var(--clair-terne); }
.bi-auteur .a-v { font-size: .84rem; }
.bi-auteur .a-v.vide { color: var(--alerte); font-style: italic; }

.validation { display: grid; gap: .55rem; }
.val-l { display: grid; gap: .15rem; }
.val-l .v-t, .val-locales .v-t { font-size: .62rem; letter-spacing: .1em; color: var(--clair-terne); }
.val-l .v-v { font-size: .84rem; }
.val-l .v-v.vide { color: var(--alerte); font-style: italic; }
.val-locales { display: grid; gap: .3rem; padding-top: .5rem; border-top: 1px solid var(--trait); }
.val-m { display: flex; align-items: center; gap: .5rem; }
.val-m .v-etat { margin-left: auto; font-size: .74rem; color: var(--attente); font-variant-numeric: tabular-nums; }
.val-m .v-etat.ok { color: var(--vert); }

/* ————————————————————— Socle ————————————————————— */

.socle-tete { display: flex; align-items: flex-start; gap: 1rem; }
.socle-marque { font-family: var(--main); font-size: 1.5rem; margin-top: .3rem; }
.ordre { display: grid; gap: .3rem; }
.ordre-l { display: flex; gap: .5rem; font-size: .86rem; line-height: 1.45; }
.ordre-l .n { color: var(--or); flex: 0 0 auto; }

/* ————————————————————— Livrable ————————————————————— */

.liv-tete { margin-bottom: .8rem; }
.liv-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.liv-resp { display: flex; gap: .4rem; align-items: center; font-size: .8rem; color: var(--clair-doux); }
.liv-v { font-size: .74rem; color: var(--or); margin-left: auto; }

.liv-apercu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }

.ou-en { background: var(--nuit-carte); border: 1px solid var(--trait); padding: .7rem .8rem; margin: .8rem 0; }
.ou-en .t { font-size: .62rem; letter-spacing: .1em; color: var(--clair-terne); }
.ou-en .v { font-size: .86rem; line-height: 1.5; margin-top: .25rem; }

.axes-legende { font-size: .7rem; color: var(--clair-terne); margin-top: .4rem; font-style: italic; }

.graphe-boite { background: var(--nuit-carte); border: 1px solid var(--trait); padding: .5rem; margin-bottom: .8rem; }

@media (max-width: 1000px) {
  .brief-grille, .liv-apercu { grid-template-columns: 1fr; }
}