/* La Longue Nuit en vue de front (8/10/2026, maquette validée par le propriétaire : « Oui »,
   captures/audit-2026-10/nuit/maquette/). Au bureau, un écran sans défilement : la scène et le front du nord à ta
   défense en haut, les décisions dessous, leur manière et tes terres en colonne à droite, les tiroirs de l'histoire en
   bas, qui s'ouvrent au-dessus des décisions. Au téléphone, les mêmes blocs l'un sous l'autre.
   Un chiffre et un verbe par bloc : les phrases sont dans les infobulles (data-infobulle et « ? »).
   Spécificité : quatre #cadre, comme demeure-vue.css, pour passer devant parure-nuit.css et la règle des boutons. */

html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #nuit.page.nuit-front {
  --nf-bord: #4d5d68;
  --nf-bord-vif: #6d808c;
  --nf-fond: linear-gradient(180deg, #1c262e, #111820);
  --nf-fond-noir: rgb(8 13 18 / .9);
  --nf-texte: #e4e6e4;
  --nf-gris: #9fabb2;
  --nf-sang: #e08a7c;
  --nf-or: #e9d6a6;
  position: relative;
  color: var(--nf-texte);

  /* ── Les boutons de la vue : du cuir et de l'or, le sang pour l'acte qui coûte ── */
  & :is(.nuit-etape__action, .nuit-etape__bouton, .nuit-carte__commande, .nuit-decret__sceau) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid #a8864c;
    border-radius: 3px;
    background: linear-gradient(#4a3a22, #2a2014);
    box-shadow: inset 0 1px 0 rgb(201 167 106 / .55), 0 2px 4px rgb(0 0 0 / .6);
    color: #f3e9d2;
    font: 400 var(--t-3) / 1.1 var(--police-titre);
    letter-spacing: 0;
    text-transform: none;
    font-variant: normal;
    white-space: nowrap;
    cursor: pointer;
  }
  & :is(.nuit-etape__action, .nuit-etape__bouton, .nuit-carte__commande, .nuit-decret__sceau):is(:hover, :focus-visible):not(:disabled) {
    border-color: #f0d38a;
    box-shadow: inset 0 1px 0 rgb(240 211 138 / .7), 0 0 10px rgb(240 200 120 / .3), 0 2px 4px rgb(0 0 0 / .6);
  }
  & :is(.nuit-etape__action, .nuit-etape__bouton, .nuit-carte__commande, .nuit-decret__sceau):active:not(:disabled) { transform: translateY(1px); }
  & .nuit-carte__commande--sang { background: linear-gradient(#7a2a20, #4a160f); border-color: #c0705a; }
  & :is(.nuit-etape__action, .nuit-etape__bouton, .nuit-carte__commande, .nuit-decret__sceau):is(:disabled, [aria-disabled="true"]) {
    border-color: #3c4750;
    background: #1a2027;
    box-shadow: none;
    color: #7d8a92;
    cursor: not-allowed;
  }
  & :is(.nuit-etape__action, .nuit-etape__bouton, .nuit-carte__commande)[hidden] { display: none; }
  & :is(.nuit-icone, .nuit-bouton__icone, .nuit-tuile__mini, .nuit-etape__mini) { width: 16px; height: 16px; vertical-align: -3px; }
  & .nuit-bouton__icone { width: 18px; height: 18px; }

  /* ── L'infobulle de jeu : un parchemin, au survol, au clavier et au toucher ── */
  & [data-infobulle] { position: relative; }
  & [data-infobulle]::after {
    content: attr(data-infobulle);
    position: absolute;
    z-index: 60;
    bottom: calc(100% + 8px);
    left: 50%;
    width: max-content;
    max-width: min(18rem, 80vw);
    padding: 7px 10px;
    border: 2px solid #3a2a17;
    border-radius: 4px;
    background: var(--habit-parchemin, #e9dcc0);
    box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 10px 24px rgb(0 0 0 / .65);
    color: #2b1b0c;
    font: 400 var(--t-2) / 1.4 var(--police-corps);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    font-variant: normal;
    white-space: normal;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease 150ms;
  }
  @media (hover: hover) {
    & [data-infobulle]:hover::after { opacity: 1; visibility: visible; }
  }
  & [data-infobulle]:is(:focus-visible, :focus-within)::after { opacity: 1; visibility: visible; transition-delay: 0ms; }
  & .nuit-scene__pastilles [data-infobulle]::after { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; transform: none; }
  & .nuit-terres [data-infobulle]::after {
    position: static;
    display: none;
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    margin-top: 4px;
    padding: 5px 8px;
    border-width: 1px;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  & .nuit-terres [data-infobulle]:is(:hover, :focus-visible, :focus-within)::after { display: block; opacity: 1; visibility: visible; }

  /* ── La scène : l'image de la phase et le front ── */
  & .nuit-scene {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "tete droite" ". ." "chemin chemin";
    gap: 8px 12px;
    min-height: 240px;
    padding: 12px 14px;
    border: 1px solid #5f6b70;
    border-radius: 3px;
    overflow: hidden;
    isolation: isolate;
    background: #070b0f;
  }
  /* Les côtés : la même image, floue et sombre. */
  & .nuit-scene::before {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -2;
    background: var(--fond-de-phase, none) center / cover no-repeat;
    filter: blur(18px) brightness(.42) saturate(.8);
  }
  /* L'image entière, à la hauteur de la scène, fondue sur ses bords. */
  & .nuit-scene__fond {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    height: 100%;
    width: auto;
    max-width: none;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  & .nuit-scene__fond[hidden] { display: none; }
  & .nuit-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(5 10 14 / .78) 0%, rgb(5 10 14 / .2) 30%, rgb(5 10 14 / .35) 55%, rgb(5 10 14 / .92) 100%);
  }
  & .nuit-scene__tete { grid-area: tete; min-width: 0; }
  & .nuit-scene__titre {
    margin: 0;
    font: 400 1.45rem / 1.1 var(--police-titre);
    letter-spacing: .03em;
    color: #f1ead8;
    text-shadow: 0 2px 6px #000;
  }
  & .nuit-scene__phase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 6px 0 0;
    font-size: var(--t-3);
    color: #c9d3d8;
    text-shadow: 0 1px 3px #000;
  }
  & .nuit-scene__phase strong { font-weight: 400; color: #e4ecef; }
  & .nuit-scene__rang { color: var(--nf-gris); }
  & .nuit-scene__pips { display: inline-flex; gap: 5px; margin-right: 4px; cursor: help; }
  & .nuit-scene__pips i { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid rgb(169 210 230 / .65); background: #0d1820; }
  & .nuit-scene__pips i.est-tombee { background: #a9d2e6; box-shadow: 0 0 6px rgb(169 210 230 / .55); }
  & .nuit-scene__pips i.est-suivante { border-color: #d0584a; background: #3a1410; }
  & .nuit-scene__assaut { margin: 6px 0 0; font: 400 var(--t-4) / 1.2 var(--police-titre); color: #f0c86e; text-shadow: 0 1px 3px #000; }
  & .nuit-scene__assaut.est-urgent { color: #ff9c8f; }
  & .nuit-scene__assaut:empty { display: none; }
  & .nuit-scene__droite { grid-area: droite; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  & .nuit-scene__droite .dialogue__fermer { position: static; margin: 0; order: -1; }
  /* La scène 3D de la dernière nuit (jeu/assaut/), sous le retour et les pastilles. */
  & .nuit-scene__regarder { order: 1; }
  & .nuit-derniere__regarder { margin: 0 0 8px; }
  & .nuit-scene__pastilles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
  & .nuit-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 3px 9px;
    border: 1px solid var(--nf-bord);
    border-radius: 3px;
    background: rgb(11 18 24 / .86);
    font-size: var(--t-2);
    color: var(--nf-gris);
    cursor: help;
  }
  & .nuit-pastille__icone { width: 20px; height: 20px; }
  & .nuit-pastille__chiffre { font: 400 var(--t-4) / 1 var(--police-titre); color: #f1ead8; }

  /* Le front : quatre étapes, du nord à ta défense. */
  & .nuit-chemin {
    grid-area: chemin;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & .nuit-chemin::before {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: 34px;
    height: 2px;
    background: linear-gradient(90deg, #d0584a, #a9d2e6 40%, #a9d2e6 70%, #d8b46a);
    opacity: .7;
  }
  & .nuit-etape {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "icone nom action" "icone chiffre action" "barre barre barre" "ligne ligne ligne" "refus refus refus";
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
    min-height: 96px;
    padding: 9px 11px 10px;
    border: 1px solid var(--nf-bord);
    border-radius: 3px;
    background: var(--nf-fond-noir);
    box-shadow: 0 3px 10px rgb(0 0 0 / .8);
    align-content: start;
  }
  & .nuit-etape:not(:last-child)::after {
    content: '›';
    position: absolute;
    right: -19px;
    top: 22px;
    color: #a9d2e6;
    font: 400 22px / 1 var(--police-titre);
  }
  & .nuit-etape:is(.est-danger, .est-tombe) { border-color: #9a4436; box-shadow: inset 0 0 0 1px rgb(208 88 74 / .3), 0 3px 10px rgb(0 0 0 / .8); }
  & .nuit-etape__icone { grid-area: icone; width: 40px; height: 40px; object-fit: contain; border-radius: 3px; }
  & .nuit-etape__nom { grid-area: nom; display: flex; align-items: center; gap: 6px; font-size: var(--t-2); letter-spacing: .06em; text-transform: uppercase; color: var(--nf-gris); }
  & .nuit-etape__nom .aide-bulle { width: 20px; height: 20px; min-height: 20px; margin: 0; font-size: 12px; }
  & .nuit-etape__chiffre { grid-area: chiffre; min-width: 0; font: 400 1.4rem / 1.05 var(--police-titre); color: #f4efe2; white-space: nowrap; }
  & .nuit-etape__sur { font: 400 var(--t-3) / 1 var(--police-corps); font-style: normal; color: var(--nf-gris); }
  & .nuit-etape__action { grid-area: action; align-self: start; }
  & span.nuit-etape__action { padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; }
  & .nuit-etape__barre { grid-area: barre; display: flex; height: 7px; margin: 6px 0 0; border: 1px solid #000; border-radius: 2px; overflow: hidden; background: #0d1318; }
  & .nuit-etape__barre[hidden] { display: none; }
  & .nuit-etape__compo i { display: block; height: 100%; }
  & .nuit__mur-jauge { width: auto; }
  & .nuit__mur-pierre { background: linear-gradient(90deg, #6f9fb8, #a9d2e6); }
  & :is(.nuit-etape.est-tombe .nuit__mur-pierre, .nuit__mur-pierre.est-fragile) { background: linear-gradient(90deg, #9a4436, #d0584a); }
  & .nuit-etape__ligne { grid-area: ligne; margin: 5px 0 0; font-size: var(--t-3); color: #c3ccd1; }
  & .nuit-etape__ligne[hidden] { display: none; }
  & .nuit-etape__refus { grid-area: refus; margin: 4px 0 0; font-size: var(--t-2); color: var(--nf-sang); }
  & .nuit-etape__refus[hidden] { display: none; }

  /* ── Les cartes de décision ── */
  & .nuit-decisions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
  & .nuit-carte {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--nf-bord);
    border-radius: 3px;
    background: var(--nf-fond);
    box-shadow: inset 0 1px 0 var(--nf-bord-vif), 0 2px 6px rgb(0 0 0 / .65);
  }
  & .nuit-carte[hidden] { display: none; }
  & .nuit-carte--alerte { border-color: #9a4436; box-shadow: inset 0 0 0 1px rgb(208 88 74 / .25), 0 2px 6px rgb(0 0 0 / .65); }
  & .nuit-carte__tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: 400 var(--t-4) / 1.2 var(--police-titre);
    font-variant: small-caps;
    letter-spacing: .06em;
    color: var(--nf-or);
  }
  & .nuit-carte__icone { width: 26px; height: 26px; object-fit: contain; }
  & .nuit-carte__etat { margin-left: auto; font: 400 var(--t-2) / 1 var(--police-corps); font-variant: normal; letter-spacing: 0; color: var(--nf-gris); }
  & .nuit-carte__etat:empty { display: none; }
  & .nuit-carte__tete .aide-bulle { margin-left: auto; }
  & .nuit-carte__etat + span .aide-bulle { margin-left: 4px; }
  & .nuit-carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
  & .nuit-carte__pied .nuit-carte__commande { margin-left: auto; }
  & .nuit-carte__pied[hidden] { display: none; }
  & .nuit-carte__refus { margin: 0; font-size: var(--t-2); color: var(--nf-sang); }
  & .nuit-carte__refus:empty, & .nuit-carte__refus[hidden] { display: none; }
  & .nuit-carte__alerte { margin: 0; font-size: var(--t-3); color: #f0a090; }
  & .nuit-carte__alerte[hidden] { display: none; }
  & .nuit-carte__vide { margin: 0; font-size: var(--t-3); font-style: italic; color: var(--nf-gris); }
  & .nuit-carte__vide[hidden] { display: none; }
  & .nuit-carte__verrou { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border: 1px dashed var(--nf-bord); border-radius: 3px; font-size: var(--t-3); color: #b5c0c6; }
  & .nuit-carte__verrou::before { content: ''; width: 20px; height: 20px; background: url(/jeu/images/icones/marques/cadenas.webp) center / contain no-repeat; opacity: .85; }
  & .nuit-carte__verrou[hidden] { display: none; }

  /* Les tuiles des plans : une case par plan, la choisie cerclée d'or. */
  & .nuit-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  & .nuit-tuile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 84px;
    padding: 8px 4px 6px;
    border: 1px solid #34414a;
    border-radius: 3px;
    background: radial-gradient(#1c262e, #0d1318);
    font: 400 var(--t-3) / 1.15 var(--police-titre);
    color: #f1ead8;
    text-align: center;
    cursor: pointer;
  }
  & .nuit-tuile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  & .nuit-tuile:has(input:focus-visible) { outline: 2px solid #f0d38a; outline-offset: 2px; }
  & .nuit-tuile:hover:not(.est-fermee) { border-color: #a8864c; }
  & .nuit-tuile.est-choisie { border-color: #d8b46a; box-shadow: inset 0 0 0 1px rgb(216 180 106 / .55), 0 0 10px rgb(216 180 106 / .2); background: radial-gradient(#2a2416, #12100a); }
  & .nuit-tuile.est-fermee { opacity: .45; cursor: not-allowed; }
  & .nuit-tuile:has(input:disabled):not(.est-fermee) { cursor: default; }
  & .nuit-tuile__icone { width: 38px; height: 38px; object-fit: contain; }
  & .nuit-tuile__prix { font: 400 var(--t-2) / 1 var(--police-corps); color: var(--nf-gris); }

  /* Les bûchers : le gros chiffre, puis le prix. */
  & .nuit-gros { display: flex; align-items: center; gap: 10px; margin: 0; }
  & .nuit-gros[hidden] { display: none; }
  & .nuit-gros img { width: 36px; height: 36px; }
  & .nuit-gros strong { font: 400 1.8rem / 1 var(--police-titre); color: #f4efe2; }
  & .nuit-gros span { font-size: var(--t-3); color: var(--nf-gris); }
  & .nuit-couts { display: flex; flex-wrap: wrap; gap: 5px; }
  & .nuit-cout { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid #3c4750; border-radius: 10px; background: #0d1318; font-size: var(--t-2); color: #d5cbb5; white-space: nowrap; }

  /* Les décrets : le nom, l'effet en chiffre, le prix sur le sceau. */
  & .nuit-decrets { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
  & .nuit-decret { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #34414a; border-radius: 3px; background: #0d1318; cursor: help; }
  & .nuit-decret.est-en-vigueur { border-color: #6f9fb8; box-shadow: inset 0 0 0 1px rgb(169 210 230 / .25); }
  & .nuit-decret__texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  & .nuit-decret__nom { font: 400 var(--t-3) / 1.2 var(--police-titre); color: #f1ead8; }
  & .nuit-decret__effet { font-size: var(--t-2); color: #b5c0c6; }
  & #nuit-decrets.est-ferme .nuit-decret { opacity: .6; }
  & .nuit-decret__sceau { flex: none; }

  /* ── La colonne : leur manière, tes terres ── */
  & .nuit-colonne { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
  & .nuit-colonne > .nuit-carte { flex: none; }
  & .nuit-colonne > #nuit-front { flex: 0 1 auto; min-height: 0; }
  & .nuit-maniere { margin: 0; font-size: var(--t-3); color: #f1ead8; }
  & .nuit-terres { display: flex; flex-direction: column; gap: 4px; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; }
  & .nuit-terre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 2px 8px;
    padding: 7px 8px;
    border-left: 3px solid var(--nf-bord);
    background: #0d1318;
    font-size: var(--t-3);
  }
  & .nuit-terre.est-perdue { border-left-color: #d0584a; }
  & .nuit-terre__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1ead8; }
  & .nuit-terre__face { white-space: nowrap; color: #d5cbb5; }
  & .nuit-terre.est-perdue .nuit-terre__face { color: #f0a090; }
  & .nuit-terre__garnison { display: inline-flex; align-items: center; gap: 3px; min-width: 56px; justify-content: flex-end; font-size: var(--t-2); color: #d5cbb5; }
  & .nuit-terre__etat { grid-column: 2 / -1; font-size: var(--t-2); color: var(--nf-gris); text-align: right; }
  & .nuit-terre:not(.est-exposee) { cursor: help; }
  & .nuit-terres__reste { margin: 2px 0 0; font-size: var(--t-2); color: var(--nf-gris); }
  & .nuit-terres__reste[hidden] { display: none; }

  /* ── Les tiroirs : une case par histoire, le tiroir ouvert au-dessus des décisions ── */
  & .nuit-tiroirs { position: relative; display: flex; gap: 8px; min-width: 0; }
  & .nuit-tiroir { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
  & .nuit-tiroir[hidden] { display: none; }
  & .nuit-tiroir--garde:not(:has(.actes-systeme__liste)) { display: none; }
  & .nuit-tiroir > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 10px;
    border: 1px solid var(--nf-bord);
    border-radius: 3px;
    background: var(--nf-fond);
    box-shadow: inset 0 1px 0 var(--nf-bord-vif), 0 2px 6px rgb(0 0 0 / .65);
    font: 400 var(--t-3) / 1.15 var(--police-titre);
    color: #f1ead8;
    list-style: none;
    cursor: pointer;
  }
  & .nuit-tiroir > summary::-webkit-details-marker { display: none; }
  & .nuit-tiroir > summary::marker { content: ''; }
  & .nuit-tiroir > summary img { width: 26px; height: 26px; object-fit: contain; }
  & .nuit-tiroir > summary:is(:hover, :focus-visible) { border-color: #a8864c; }
  & .nuit-tiroir[open] > summary { border-color: #d8b46a; box-shadow: inset 0 0 0 1px rgb(216 180 106 / .5), 0 2px 6px rgb(0 0 0 / .65); }
  & .nuit-tiroir__corps {
    padding: 14px 16px;
    border: 1px solid #6b5532;
    border-radius: 4px;
    background: linear-gradient(180deg, #18222b, #0c1218);
    box-shadow: inset 0 0 0 1px rgb(184 150 79 / .35), 0 14px 32px rgb(0 0 0 / .8);
  }
  & .nuit-tiroir__corps > :first-child { margin-top: 0; }
  & .nuit__pile-teinte { flex: none; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

  /* Le cartouche d'accueil (cartouches.js le pose en tête de page) : au bureau, une rangée sous la scène ;
     « Compris » l'efface pour de bon. */
  & > .cartouche { position: relative; z-index: 50; }

  /* Le duel contre le Roi des morts, par-dessus la vue. */
  & .nuit-duel:not([hidden]) {
    position: absolute;
    inset: 12px;
    z-index: 70;
    overflow: auto;
    padding: 14px;
    border: 1px solid #6b5532;
    border-radius: 4px;
    background: #0c1218;
    box-shadow: 0 14px 40px rgb(0 0 0 / .85);
  }
}

/* ── Au bureau : un écran ── */
@media (min-width: 60.0625rem) {
  html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #nuit.page.nuit-front {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(270px, 25%, 340px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "scene scene" "decisions colonne" "tiroirs colonne";
    gap: 10px 12px;
    /* Entre le bandeau du haut et la barre d'actions : la page tient dans l'écran, le rang des décisions prend le reste. */
    box-sizing: border-box;
    height: calc(100dvh - var(--barre-haut) - var(--barre-bas) - 8px);
    min-height: 600px;
    padding-bottom: 12px;
    overflow: hidden;

    & .nuit-scene { grid-area: scene; height: clamp(220px, calc(100dvh - 520px), 330px); }
    /* Le cartouche d'accueil prend une rangée sous la scène tant qu'il est là. Posé au bas de la vue, il recouvrait
       quatre des cinq tiroirs (relevé du 16/10/2026) ; « Compris » l'efface et rend la rangée aux décisions. */
    &:has(> .cartouche) {
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      grid-template-areas: "scene scene" "cartouche cartouche" "decisions colonne" "tiroirs colonne";
    }
    & > .cartouche {
      grid-area: cartouche;
      /* Sous un tiroir ouvert, qui flotte par-dessus les rangées. */
      z-index: auto;
      min-height: 48px;
      margin: 0;
      padding-block: 4px;
      grid-template-columns: auto minmax(0, 1fr) auto;
      & .cartouche__titre { grid-column: 1; grid-row: 1; }
      & .cartouche__dit { grid-column: 2; grid-row: 1; }
      & .cartouche__compris { grid-column: 3; grid-row: 1; }
    }
    & .nuit-decisions { grid-area: decisions; }
    & .nuit-colonne { grid-area: colonne; overflow-y: auto; }
    & .nuit-tiroirs { grid-area: tiroirs; }
    & .nuit-tiroir__corps {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 8px);
      z-index: 40;
      max-height: min(560px, calc(100vh - 230px));
      overflow-y: auto;
    }
  }
}

/* ── Au téléphone : les blocs l'un sous l'autre ── */
@media (max-width: 60rem) {
  html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #nuit.page.nuit-front {
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* La scène : le titre et le retour, les pastilles, puis le front. L'image entière en haut, le flou dessous. */
    & .nuit-scene { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tete fermer" "pastilles pastilles" "chemin chemin"; grid-template-rows: auto auto auto; min-height: 0; padding: 10px; }
    & .nuit-scene__fond {
      left: 0;
      width: 100%;
      height: auto;
      transform: none;
      -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    }
    & .nuit-scene__droite { display: contents; }
    & .nuit-scene__droite .dialogue__fermer { grid-area: fermer; align-self: start; }
    /* Le bouton de la scène prend sa ligne, sous les pastilles, quand la dernière nuit en a une. */
    & .nuit-scene:has(#nuit-regarder:not([hidden])) { grid-template-areas: "tete fermer" "pastilles pastilles" "regarder regarder" "chemin chemin"; grid-template-rows: auto auto auto auto; }
    & .nuit-scene__regarder { grid-area: regarder; justify-self: start; }
    & .nuit-scene__pastilles { grid-area: pastilles; justify-content: flex-start; }
    & .nuit-scene__titre { font-size: 1.25rem; }

    /* Les étapes en deux colonnes : l'icône et le nom, le chiffre, la jauge, la ligne, le bouton en pied. */
    & .nuit-chemin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    & .nuit-chemin::before, & .nuit-etape::after { display: none; }
    & .nuit-etape {
      min-height: 0;
      padding: 7px 8px;
      grid-template-columns: 28px minmax(0, 1fr);
      grid-template-areas: "icone nom" "chiffre chiffre" "barre barre" "ligne ligne" "action action" "refus refus";
    }
    & .nuit-etape__icone { width: 28px; height: 28px; }
    & .nuit-etape__nom { font-size: 11px; letter-spacing: .04em; }
    /* La bulle garde sa cible de 44 px au doigt (cadre.css), sans grandir la ligne du nom. */
    & .nuit-etape__nom .aide-bulle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: -12px -10px -12px -8px; }
    & .nuit-etape__chiffre { margin-top: 4px; font-size: 1.15rem; }
    & .nuit-etape__ligne { font-size: var(--t-2); }
    & .nuit-etape__action { justify-self: stretch; margin-top: 6px; }
    & span.nuit-etape__action { display: flex; }
    & span.nuit-etape__action > .nuit-etape__bouton { flex: 1; }
    & :is(.nuit-etape__action, .nuit-etape__bouton, .nuit-carte__commande, .nuit-decret__sceau) { min-height: 44px; }

    & .nuit-decisions { display: flex; flex-direction: column; gap: 10px; }
    & .nuit-tuile { min-height: 64px; }

    /* Les tiroirs en liste : chacun s'ouvre sous sa ligne. */
    & .nuit-tiroirs { flex-direction: column; gap: 6px; }
    & .nuit-tiroir { flex: none; }
    & .nuit-tiroir > summary { min-height: 48px; }
    & .nuit-tiroir__corps { margin-top: 6px; padding: 10px; }

    & > .cartouche { order: 0; }
  }
}