/* Lanceur · pages secondaires (confidentialité, mentions, crédits, états, 404). Palette Pastel nuit uniquement. */
.page { position: relative; isolation: isolate; padding: 112px 0 96px; min-height: 70vh; overflow-x: clip; }
.page::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 15% 0%, color-mix(in srgb, var(--a2) 16%, transparent), transparent 70%),
    radial-gradient(50% 60% at 90% 0%, color-mix(in srgb, var(--a1) 12%, transparent), transparent 70%);
}

/* ---------- Document ---------- */
.doc { width: min(720px, 100% - 40px); margin-inline: auto; font-size: 16.5px; line-height: 1.7; color: var(--text-2); overflow-wrap: break-word; }
.doc > h1 { font: 800 clamp(30px, 5vw, 44px)/1.12 var(--f-display); letter-spacing: -.02em; color: var(--text); margin: 0 0 14px; }
.doc > h1 + p { font-size: 18px; color: var(--muted); }
.doc .maj { display: inline-block; margin: 0 0 28px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 13px/1.5 var(--f-mono); color: var(--muted); }
.doc h2 { font: 700 clamp(21px, 3vw, 26px)/1.25 var(--f-display); letter-spacing: -.015em; color: var(--text); margin: 2.4em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { font: 700 18px/1.3 var(--f-display); color: var(--text); margin: 1.8em 0 .4em; }
.doc p { margin: 0 0 1em; }
.doc ul, .doc ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.doc li { margin: .35em 0; padding-left: .2em; }
.doc li::marker { color: var(--primary); }
.doc strong { color: var(--text); font-weight: 600; }
.doc a { color: var(--primary-l); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.doc a:hover { color: var(--text); text-decoration-color: var(--a3); }
.doc code { font: 500 .88em var(--f-mono); padding: .12em .45em; border-radius: 6px; background: var(--surf-2); border: 1px solid var(--line); color: var(--t4); overflow-wrap: anywhere; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.doc dl { margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--encre) 55%, transparent); overflow: hidden; }
.doc dl > div { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 4px 20px; padding: 12px 18px; }
.doc dl > div + div { border-top: 1px solid var(--line); }
.doc dt { color: var(--muted); font-size: 14px; font-weight: 500; }
.doc dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.doc .note { margin: 1.6em 0; padding: 16px 20px; border: 1px solid var(--line-2); border-left: 3px solid var(--a3); border-radius: 12px; background: var(--surf-2); color: var(--text-2); }
.doc .note > :last-child { margin-bottom: 0; }
.doc .note strong { color: var(--a3-l); }
.doc .mc { font: 600 13px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--text); }

/* Tableaux : conteneur à défilement horizontal, cellules lisibles à 360 px */
.doc .table { margin: 1.4em 0 1.8em; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--encre) 55%, transparent); }
.doc .table:focus-visible { outline-offset: 2px; }
.doc table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.doc caption { text-align: left; padding: 12px 16px; color: var(--muted); font-size: 13px; }
.doc th { text-align: left; font: 600 12px/1.4 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.doc td { padding: 12px 14px; vertical-align: top; border-top: 1px solid var(--line); }
.doc tbody tr:first-child td { border-top: 0; }
.doc td:first-child { width: 190px; }
.doc td a { overflow-wrap: anywhere; }
.doc .vignette { width: 160px; height: 90px; max-width: none; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surf); margin-bottom: 6px; }
.doc .theme { display: block; font-size: 12.5px; color: var(--subtle); }
.doc .scene { display: block; font-weight: 600; color: var(--text); }

/* ---------- Pages d'état ---------- */
.etat { width: min(560px, 100% - 40px); margin: 0 auto; padding: 40px 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.etat .pict { width: 76px; height: 76px; margin-bottom: 8px; color: var(--primary); }
.etat h1 { font: 800 clamp(30px, 6vw, 42px)/1.12 var(--f-display); letter-spacing: -.02em; }
.etat p { color: var(--text-2); font-size: 17px; line-height: 1.65; max-width: 46ch; }
.etat p a, .etat .liens a { color: var(--primary-l); text-underline-offset: 3px; }
.etat p a:hover, .etat .liens a:hover { color: var(--text); }
.etat ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; text-align: left; max-width: 46ch; }
.etat li { padding: 12px 16px 12px 44px; position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--surf-2); color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.etat li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a3)); }
.etat .actions, .page-404 .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 12px; }
.etat .liens { font-size: 15px; color: var(--muted); }

/* Bouton papier utilisé comme lien */
a.btn-paper, .btn-paper.btn-lien { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Bouton secondaire discret */
.btn-ghost { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 9px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: 600 14.5px/1 var(--f-display); text-decoration: none; transition: background .2s, border-color .2s; }
.btn-ghost:hover { background: color-mix(in srgb, var(--text) 9%, transparent); border-color: color-mix(in srgb, var(--tint) 26%, transparent); }

/* ---------- 404 ---------- */
.page-404 { padding-top: 96px; }
.page-404 .etat { width: min(640px, 100% - 40px); gap: 14px; }
.page-404 .ciel { width: min(420px, 100%); height: auto; margin-bottom: -6px; }
.page-404 .ciel .astre { fill: var(--a4); }
.page-404 .ciel .astre-2 { fill: var(--t1); }
.page-404 .ciel .lien { stroke: var(--indigo); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.page-404 .ciel .trace { stroke: url(#trace-404); stroke-width: 2; stroke-linecap: round; fill: none; }
.page-404 .ciel .fusee { fill: var(--text); }
.page-404 .ciel .fusee-2 { fill: var(--a3); }
.page-404 .num { font: 800 clamp(96px, 26vw, 200px)/.9 var(--f-display); letter-spacing: -.05em; margin: 0; background: var(--aur-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-404 h1 { margin-top: 10px; font: 800 clamp(24px, 4.5vw, 32px)/1.2 var(--f-display); letter-spacing: -.02em; }
.page-404 .code-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .page-404 .ciel .scint { animation: scint 4s ease-in-out infinite; }
  .page-404 .ciel .scint:nth-of-type(2n) { animation-delay: -1.7s; }
  @keyframes scint { 50% { opacity: .3; } }
}

@media (max-width: 640px) {
  .page { padding: 96px 0 72px; }
  .doc { font-size: 16px; }
  .doc dl > div { grid-template-columns: 1fr; gap: 0; padding: 10px 16px; }
  .doc td:first-child { width: 170px; }
}