/* Page d'attente des récits et pages légales de la version en ligne (Oli, 22 octobre). */

/* Page d'attente : texte à gauche, les deux cartes du héros en dessin à droite, marquées « En préparation » */
.bientot { min-height: calc(100vh - 160px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bientot h1 { margin: 10px 0 0; font: 400 clamp(36px, 4.6vw, 60px)/1.14 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.12em; max-width: 18ch; }
.bientot .chapeau { margin-top: 18px; max-width: 46ch; }
.bientot-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 32px 0 0; }
.bientot-cartes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bientot-cartes li { display: grid; gap: 12px; padding: 22px 20px 18px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); }
.bientot-dessin { display: block; width: 72px; }
.bientot .elevation { display: block; width: 100%; height: auto; overflow: visible; }
.bientot .elevation .niv { fill: transparent; stroke: rgba(243, 244, 238, 0.5); stroke-width: 1; }
.bientot .elevation .niv.marque { fill: var(--ek-laiton); stroke: var(--ek-ink); }
.bientot .elevation .edicule { fill: transparent; stroke: rgba(243, 244, 238, 0.5); }
.bientot .elevation .sol { stroke: var(--ek-chalk); stroke-width: 1.5; }
.bientot-titre { font: 400 19px/1.15 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.08em; }
.bientot-etat { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ek-laiton); }
@media (max-width: 860px) {
  .bientot { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* Pages légales : une colonne de lecture, intitulés en mono */
.legal { max-width: 860px; }
.legal h1 { margin: 0 0 clamp(28px, 4vw, 48px); font: 400 clamp(34px, 4.4vw, 54px)/1.08 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.12em; }
.legal section { padding: 22px 0 6px; border-top: 1px solid var(--rule); }
.legal h2 { margin: 0 0 12px; font: 500 12px/1.4 var(--font-mono); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-2); }
.legal p { margin: 0 0 14px; max-width: 70ch; }
.legal dl { margin: 0 0 14px; display: grid; gap: 6px; }
.legal dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; }
.legal dt { color: var(--fg-2); }
.legal dd { margin: 0; }
@media (max-width: 620px) {
  .legal dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}