/* La parure de l écran de la Longue Nuit. Cette feuille n habille que cet
   écran, et c est le seul où le bleu ardoise des jetons glace a sa place
   (décision 9 du plan des onglets, 24/09/2026).

   Lot I du plan (docs/PLAN-ONGLETS-ET-DESIGN.md, §5.2) : l en-tête commun
   (cadre.css) porte la phase et le prochain assaut ; dessous, quatre chiffres,
   puis deux colonnes au bureau : les décisions de la nuit à gauche, les terres
   face aux morts et la horde à droite. Au téléphone, une seule colonne dans
   le même ordre. L histoire (dernière nuit, sept phases, Convergence,
   créatures) se replie au bas de la page.

   La valeur --nuit-froid est posée par l écran, de 0 à 1 selon la phase : elle
   fonce le fond et givre la vue de la phase. Rien n est recalculé, la donnée
   vient du serveur. Aucune teinte écrite en valeur : jetons et color-mix. */


/* ── Les teintes du gel ─────────────────────────────────────────────────── */

#nuit.page {
  --gel-clair: var(--glace-clair);
  --gel-trait: color-mix(in srgb, var(--glace) 30%, transparent);
  --gel-trait-vif: color-mix(in srgb, var(--glace-clair) 80%, transparent);
  --gel-filet: 1px solid color-mix(in srgb, var(--glace) 20%, transparent);
  --gel-case: var(--glace-ardoise);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--glace) calc(5% + var(--nuit-froid, 0) * 9%), transparent), transparent 62%),
    var(--glace-nuit);
}

/* ── L en-tête : la phase, son rang, le prochain assaut ─────────────────── */

#nuit .nuit__entete-phase {
  font-family: var(--police-titre);
  font-weight: 400;
  color: var(--gel-clair);
}
#nuit .nuit__entete-assaut.est-urgent { color: var(--alerte); }
#nuit .nuit__entete-assaut.est-urgent::first-letter { text-transform: none; }


/* ── La page ────────────────────────────────────────────────────────────── */

#nuit .nuit {
  display: block;
  padding: 0 0 var(--e-5);
}

/* Les panneaux de la Nuit : le cadre commun, en ardoise. */
#nuit .cadre {
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--gel-trait);
  background: var(--gel-case);
}

#nuit .nuit__cadre-titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-weight: 400;
  line-height: 1.2;
  color: var(--gel-clair);
}
#nuit .nuit__cadre-titre small {
  font-family: var(--police-corps);
  font-size: var(--t-2);
  color: var(--texte-pale);
}

#nuit .nuit__ligne { margin: var(--e-1) 0 0; font-size: var(--t-3); color: var(--gel-clair); }
#nuit .nuit__regle { margin: var(--e-1) 0 0; font-family: var(--police-corps); font-style: normal; font-size: var(--t-2); color: var(--texte); }
#nuit .nuit__aide { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--alerte); }
#nuit .nuit__ligne--perte { color: var(--perte); }
#nuit .nuit__repit { margin: 0 0 var(--e-3); color: var(--alerte); }


/* ── Les quatre chiffres ────────────────────────────────────────────────── */

#nuit .nuit__chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-2);
  margin: 0 0 var(--e-3);
}

#nuit .nuit__chiffre {
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
  min-width: 0;
  margin: 0;
  padding: var(--e-2) var(--e-3);
  text-align: start;
  border: 1px solid var(--gel-trait);
  border-radius: var(--rayon);
  background: var(--gel-case);
}

/* Le chiffre expliqué pose sa note (un `dl`) dans la case. Ses causes
   prenaient les capitales grises de l'intitulé et de `.jauge dt`, ses
   montants le parchemin de `.jauge dd` (salle.css) : clair sur clair, la
   horde se lisait mal. Relevé le 29/09/2026. */
#nuit .nuit__chiffre .chiffre__table dt,
#nuit .nuit__chiffre .chiffre__table dd { color: var(--encre); font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; }

#nuit .nuit__chiffre > dt {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--fer);
}

#nuit .nuit__chiffre .nuit__valeur {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-7);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--gel-clair);
}

#nuit .nuit__chiffre .nuit__chiffre-note {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--texte);
}
#nuit .nuit__chiffre .nuit__chiffre-note.verrou { color: var(--texte-pale); }


/* ── Deux colonnes : décider, puis lire le front ────────────────────────── */

#nuit .nuit__corps {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
}

#nuit .nuit__cote {
  display: grid;
  gap: var(--e-3);
  min-width: 0;
}


/* ── Les décisions : une ligne par décision, la commande à droite ───────── */

#nuit .nuit__decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-1) var(--e-3);
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: var(--e-2) 0;
  border: 0;
  border-top: var(--gel-filet);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#nuit .nuit__cadre-titre + .nuit__decision:not([hidden]),
#nuit .nuit__cadre-titre + [hidden] + .nuit__decision { border-top: 0; }

#nuit .nuit__decision-titre {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-weight: 400;
  line-height: 1.2;
  color: var(--gel-clair);
}
#nuit legend.nuit__decision-titre { float: left; width: 100%; margin-bottom: var(--e-1); }
#nuit legend.nuit__decision-titre + * { clear: both; }

#nuit .nuit__decision-texte { min-width: 0; }
#nuit .nuit__decision-texte > :first-child { margin-top: 0; }
#nuit .nuit__decision-commande {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-1);
  min-width: 11rem;
}
#nuit .nuit__decision-plein { grid-column: 1 / -1; }

#nuit .nuit__decision label {
  display: block;
  margin: 0 0 var(--e-1);
  font-size: var(--t-2);
  color: var(--fer);
}

#nuit .nuit__decision select,
#nuit .nuit__decision input[type="number"] {
  width: 100%;
  min-height: var(--cible);
  padding: 0 var(--e-2);
  font: var(--t-3) var(--police-corps);
  color: var(--gel-clair);
  background: var(--glace-nuit);
  border: 1px solid color-mix(in srgb, var(--glace) 45%, transparent);
  border-radius: var(--rayon);
}
#nuit .nuit__decision select:focus-visible,
#nuit .nuit__decision input[type="number"]:focus-visible { border-color: var(--gel-trait-vif); outline: 2px solid var(--gel-trait-vif); outline-offset: 1px; }
#nuit .nuit__decision select:disabled { color: var(--fer); }
#nuit .nuit__decision select option { color: var(--gel-clair); background: var(--glace-nuit); }

#nuit .nuit__strategie {
  margin: var(--e-2) 0 0;
  padding: 0;
  border: 0;
}
#nuit .nuit__strategie legend { padding: 0; font-size: var(--t-2); color: var(--gel-clair); }

/* Le médaillon gravé devant chaque décision et chaque phase. */
#nuit .nuit__medaille {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 auto;
  border: 1px solid var(--or-fonce);
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 50% 35%, var(--glace-ardoise), var(--glace-nuit));
}
#nuit .nuit__decision-titre > .nuit__medaille { width: 1.7rem; height: 1.7rem; margin: 0; }
#nuit .nuit__medaille-marque {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#nuit .nuit__decision-titre .nuit__medaille-marque { width: 1rem; height: 1rem; }

/* Les décrets : un par ligne, son effet, son état et son sceau. */
#nuit .nuit__decrets-liste {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
#nuit .nuit__decret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-1) var(--e-3);
  align-items: center;
  padding: var(--e-1) 0;
}
#nuit .nuit__decret + .nuit__decret { border-top: 1px dashed color-mix(in srgb, var(--glace) 16%, transparent); }
#nuit .nuit__decret p { margin: 0; overflow-wrap: anywhere; }
#nuit .nuit__decret-titre { font-family: var(--police-titre); font-size: var(--t-3); color: var(--gel-clair); }
#nuit .nuit__decret.est-en-vigueur .nuit__decret-titre { color: var(--or-vif); }
#nuit .nuit__decret-vigueur { font-size: var(--t-2); color: var(--or); }
#nuit .nuit__decret-sceau { min-width: 11rem; }
#nuit .nuit__decrets.est-ferme .nuit__decret .nuit__regle { color: var(--texte-pale); }

/* Le Mur : sa pierre en jauge. */
#nuit .nuit__mur-jauge {
  height: 0.5rem;
  margin: 0 0 var(--e-1);
  border: 1px solid var(--gel-trait);
  border-radius: var(--rayon);
  background: var(--glace-nuit);
  overflow: hidden;
}
#nuit .nuit__mur-pierre { display: block; height: 100%; width: var(--integrite, 0%); background: var(--glace); }
#nuit .nuit__mur.est-tombe .nuit__mur-pierre { background: var(--perte-fond); }
#nuit .nuit__mur-releve > :first-child { margin-top: 0; }
#nuit .nuit__mur-garde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 10rem) auto;
  gap: var(--e-1) var(--e-2);
  align-items: end;
  margin-top: var(--e-2);
}
#nuit .nuit__mur-garde label { grid-row: 1; margin: 0; }
#nuit .nuit__mur-garde select { grid-row: 2; grid-column: 1; }
#nuit .nuit__mur-garde input { grid-row: 2; grid-column: 2; }
#nuit .nuit__mur-garde button { grid-row: 2; grid-column: 3; }
#nuit #nuit-mur-relever { margin-top: var(--e-2); }

#nuit .nuit__champs-liste { list-style: none; margin: var(--e-1) 0 0; padding: 0; font-size: var(--t-2); color: var(--texte); }

#nuit .guerre-duel:not([hidden]) { margin: var(--e-2) 0; }


/* ── Les terres face aux morts, en liste comparable ─────────────────────── */

#nuit .nuit__front { --colonnes: minmax(0, 1.5fr) 4.5rem 4.5rem minmax(0, 1fr); }

#nuit .nuit__front-tete,
#nuit .nuit__front-terre {
  display: grid;
  grid-template-columns: var(--colonnes);
  gap: var(--e-1) var(--e-2);
  align-items: baseline;
}
#nuit .nuit__front-tete[hidden] { display: none; }
#nuit .nuit__front-tete {
  padding: 0 0 var(--e-1);
  border-bottom: var(--gel-filet);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--fer);
}
#nuit .nuit__front-tete > :nth-child(n + 2) { text-align: end; }

/* Une longue liste défile dans son cadre, pas dans la page. */
#nuit .nuit__front-liste {
  max-height: min(18rem, 45vh);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#nuit .nuit__front-terre {
  padding: var(--e-2) 0;
  border-bottom: var(--gel-filet);
  font-size: var(--t-3);
  color: var(--gel-clair);
}
#nuit .nuit__front-terre:last-child { border-bottom: 0; }
#nuit .nuit__front-terre--vide { display: block; color: var(--texte); }
#nuit .nuit__front-nom { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
#nuit .nuit__front-nom strong { font-weight: 400; color: var(--gel-clair); }
#nuit .nuit__front-etat { font-size: var(--t-1); color: var(--gain); }
#nuit .nuit__front-etat.est-perte,
#nuit .nuit__front-garnison.est-perte { color: var(--perte); }
#nuit .nuit__front-num { text-align: end; font-variant-numeric: tabular-nums; }
#nuit .nuit__front-garnison { font-size: var(--t-2); color: var(--texte); }
#nuit .nuit__front-pourquoi { grid-column: 2 / -1; font-size: var(--t-2); color: var(--texte-pale); }


/* ── La horde par sorte ─────────────────────────────────────────────────── */

#nuit .nuit__annonce { margin: 0; padding: 0; border: 0; }
#nuit .nuit__annonce-titre { margin: 0; font-size: var(--t-2); font-weight: 400; color: var(--fer); }
#nuit .nuit__morts { display: block; width: 100%; height: 11rem; margin: var(--e-1) 0; }
#nuit .nuit__morts[hidden] { display: none; }

#nuit .horde,
#nuit .nuit__horde { margin: var(--e-1) 0 0; padding: 0; list-style: none; }
#nuit .horde__ligne,
#nuit .nuit__pile {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) 0;
  border-bottom: var(--gel-filet);
  font-size: var(--t-3);
  color: var(--gel-clair);
}
#nuit .horde__nom,
#nuit .nuit__pile-nom { flex: 1; min-width: 0; }
#nuit .horde__nombre,
#nuit .nuit__pile-nombre { font-variant-numeric: tabular-nums; color: var(--or-vif); }
#nuit .nuit__pile--neuve { font-size: var(--t-2); color: var(--texte); }
#nuit .nuit__horde-bloc .nuit__ligne { font-size: var(--t-2); }

/* La part de chaque sorte en cinq écussons ; le nombre exact est écrit à côté. */
#nuit .nuit__ecussons { display: flex; flex: none; gap: var(--e-0); align-items: center; }
#nuit .nuit__ecusson {
  width: 0.62rem;
  height: 0.78rem;
  background: var(--glace-ardoise);
  border: 1px solid var(--gel-trait);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
}
#nuit .nuit__ecusson.est-plein { background: linear-gradient(180deg, var(--glace-clair), var(--fer)); border-color: var(--gel-trait-vif); }


/* ── Le second niveau : les replis ──────────────────────────────────────── */
/* Le repli commun du jeu (ecrans-ui-senior.css : boîte, « + » et « − »),
   en ardoise sur cet écran. Le titre, puis l'issue en quelques mots. */

html[data-vue="jeu"] #nuit .nuit__repli {
  margin: var(--e-2) 0 0;
  border-color: var(--gel-trait);
  background: var(--gel-case);
}
#nuit .nuit__repli[hidden] { display: none; }
html[data-vue="jeu"] #nuit .nuit__repli > summary {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e-2);
  padding: var(--e-2) var(--e-3);
  color: var(--gel-clair);
  font-weight: 400;
}
html[data-vue="jeu"] #nuit .nuit__repli > summary::after { align-self: center; color: var(--glace); }
html[data-vue="jeu"] #nuit .nuit__repli > summary:is(:hover, :focus-visible),
html[data-vue="jeu"] #nuit .nuit__repli[open] > summary {
  color: var(--glace-clair);
  background: color-mix(in srgb, var(--glace) 10%, transparent);
  border-bottom-color: var(--gel-trait);
}
#nuit .nuit__repli-titre { font-family: var(--police-titre); font-size: var(--t-4); }
#nuit .nuit__repli-resume { font-family: var(--police-corps); font-size: var(--t-2); color: var(--texte-pale); }
#nuit .nuit__repli[open] > :not(summary) { margin: var(--e-3); }
/* La vue de la phase reste centrée dans son repli. */
#nuit .nuit__repli[open] > .nuit__vue { margin: var(--e-3) auto; }

#nuit .nuit__derniere-liste { margin: 0; padding: 0; list-style: none; }
#nuit .nuit__derniere-liste li { padding: var(--e-0) 0; overflow-wrap: anywhere; }


/* ── Les sept phases, dans leur repli ───────────────────────────────────── */

/* La vue de la phase, entière, jamais plus large que sa définition (1 024). */
#nuit .nuit__vue {
  position: relative;
  max-width: min(100%, 1024px);
  margin: 0 auto var(--e-3);
  aspect-ratio: auto;
  border: 1px solid var(--or-fonce);
  border-radius: var(--rayon);
  background: var(--glace-nuit);
  overflow: hidden;
}
#nuit .nuit__vue img { display: block; width: 100%; height: auto; object-fit: contain; }
#nuit .nuit__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--glace) calc(var(--nuit-froid, 0) * 14%), transparent), transparent 60%);
}
#nuit .nuit__legende {
  position: static;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--e-3);
  align-items: center;
  padding: var(--e-2) var(--e-3);
  background: var(--glace-ardoise);
}
#nuit .nuit__vue-medaille { grid-row: 1 / 3; margin: 0; }
#nuit .nuit__vue-phase { margin: 0; font-family: var(--police-titre); font-size: var(--t-5); color: var(--gel-clair); }
#nuit .nuit__dit { margin: 0; font-family: var(--police-corps); font-size: var(--t-3); color: var(--texte); }

/* Le niveau de la menace : un crâne par phase sur le rail. */
#nuit .nuit__menace { margin: 0 0 var(--e-3); }
#nuit .nuit__menace-rail {
  height: 1.5rem;
  overflow: visible;
  background: var(--glace-nuit);
  border-color: var(--gel-trait);
}
#nuit .nuit__menace-part { display: block; background: linear-gradient(90deg, color-mix(in srgb, var(--or) 50%, transparent), var(--glace)); }
#nuit .nuit__menace-crane {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  transform: translate(-50%, -50%);
  border: 1px solid var(--or-fonce);
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 50% 35%, var(--glace-ardoise), var(--glace-nuit));
}
#nuit .nuit__menace-marque { width: 1rem; height: 1rem; fill: none; stroke: var(--fer); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#nuit .nuit__menace-crane.est-atteint { border-color: var(--gel-trait-vif); }
#nuit .nuit__menace-crane.est-atteint .nuit__menace-marque { stroke: var(--glace-clair); }
#nuit .nuit__menace-crane--dernier { width: 2.1rem; height: 2.1rem; border-color: var(--or); }
#nuit .nuit__menace .jauge-parure__valeur { min-width: 4.5rem; font-size: var(--t-3); color: var(--gel-clair); }

/* La file des sept : une colonne par phase. */
#nuit .nuit__phases {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  gap: var(--e-2);
  margin: 0;
  padding: 0 0 var(--e-2);
  list-style: none;
  overflow-x: auto;
}
#nuit .nuit__etape {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: var(--e-1);
  padding: var(--e-2);
  background: var(--glace-ardoise);
  border: 1px solid var(--gel-trait);
  border-radius: var(--rayon);
}
#nuit .nuit__etape-rang { font-family: var(--police-titre); font-size: var(--t-5); text-align: center; color: var(--or); }
#nuit .nuit__etape .chemin__nom { min-height: 2.2em; font-size: var(--t-3); line-height: 1.1; text-align: center; color: var(--gel-clair); }
#nuit .nuit__etape .chemin__dit { font-family: var(--police-corps); font-size: var(--t-1); line-height: 1.4; color: var(--texte); }
#nuit .nuit__etape-jour { font-size: var(--t-1); letter-spacing: var(--capitales); text-align: center; text-transform: uppercase; color: var(--fer); }
#nuit .nuit__etape-vue { position: relative; aspect-ratio: 16 / 9; border-color: var(--gel-trait); overflow: hidden; }
#nuit .nuit__etape-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--glace-nuit);
  filter: saturate(calc(1 - var(--gel, 0) * 0.45)) brightness(calc(1 - var(--gel, 0) * 0.14));
}
#nuit .nuit__etape-gel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--e-1);
  font-size: var(--t-1);
  text-align: center;
  color: var(--fer);
  background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--glace) 5%, transparent) 0 3px, transparent 3px 9px), var(--glace-nuit);
}
#nuit .chemin__etape--courante { border-color: var(--gel-trait-vif); }
#nuit .chemin__etape--courante .nuit__etape-rang { color: var(--or-vif); }
#nuit .chemin__etape--courante .nuit__medaille { border-color: var(--gel-trait-vif); }
#nuit .chemin__etape--courante .nuit__medaille-marque { stroke: var(--glace-clair); }
#nuit .chemin__etape--verrouillee { opacity: 0.72; }


/* ── Les créatures, dans leur repli ─────────────────────────────────────── */

#nuit #affrontees-bloc { margin-top: var(--e-3); }


/* ── Au téléphone ───────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
  #nuit .nuit__corps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 42rem) {
  #nuit .cadre { padding: var(--e-2) var(--e-3); }
  #nuit .nuit__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1); margin-bottom: var(--e-2); }
  #nuit .nuit__chiffre { padding: var(--e-1) var(--e-2); }
  #nuit .nuit__chiffre .nuit__valeur { font-size: var(--t-6); }
  #nuit .nuit__chiffre .nuit__chiffre-note { font-size: var(--t-1); }

  /* La commande passe sous son texte, pleine largeur, sous le pouce. */
  #nuit .nuit__decision { grid-template-columns: minmax(0, 1fr); }
  #nuit .nuit__decision-commande { min-width: 0; }
  #nuit .nuit__cadre-titre small { display: block; }
  /* Un décret : son nom et son sceau sur une ligne, l'effet dessous. */
  #nuit .nuit__decret-texte { display: contents; }
  #nuit .nuit__decret-titre { grid-row: 1; grid-column: 1; }
  #nuit .nuit__decret-texte > :not(.nuit__decret-titre) { grid-column: 1 / -1; }
  #nuit .nuit__decret-sceau { grid-row: 1; grid-column: 2; min-width: 0; min-height: 40px; padding-inline: var(--e-2); font-size: var(--t-2); }
  #nuit .nuit__mur-garde { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  #nuit .nuit__mur-garde button { grid-row: 3; grid-column: 1 / -1; }

  /* Le front : la garnison passe sous le nom, les chiffres restent en colonnes. */
  #nuit .nuit__front { --colonnes: minmax(0, 1fr) 3.8rem 4.2rem; }
  #nuit .nuit__front-tete > :nth-child(4) { display: none; }
  #nuit .nuit__front-garnison { grid-column: 1 / -1; text-align: start; }

  #nuit .nuit__morts { height: 7.5rem; }
  /* Le titre de l'annonce dit déjà qui a vu la horde ; sa phrase reste au bureau. */
  #nuit #nuit-annonce-dit { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  #nuit .nuit__decision { padding: var(--e-1) 0 var(--e-2); }
  #nuit .nuit__phases { grid-auto-columns: minmax(7rem, 1fr); }
  #nuit .nuit__etape .chemin__dit { display: none; }
}

/* Lot 8 bis : leur manière à la prochaine nuit, masquée hors des phases d’assaut. */
#nuit .nuit__tactique[hidden] { display: none; }
#nuit .nuit__tactique .nuit__ligne[hidden] { display: none; }