/* Darse Jet : socle. Deux familles, cinq teintes prises dans la vidéo, aucun accent chaud. */
@font-face { font-family: "Imbue"; src: url("fonts/imbue-var.woff2?v=4") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inria Sans"; src: url("fonts/inria-sans-400.woff2?v=4") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inria Sans"; src: url("fonts/inria-sans-700.woff2?v=4") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --nuit: #0A1219;
  --bleu: #313B42;
  --ecume: #E6EEF2;
  --brume: #9FB4BF;
  --reflet: #CBD6E6;
  --marge: clamp(16px, 4.4vw, 64px);
  --grille: 1560px;
  --entete-h: 60px;
  --bande-h: 56px;
  --bas: calc(var(--bande-h) + env(safe-area-inset-bottom));
  --titre: "Imbue", "Bodoni MT", "Didot", serif;
  --texte: "Inria Sans", "Segoe UI", system-ui, sans-serif;
  --doux: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --entete-h: 72px; } }
/* La bande basse vit sur le téléphone et la tablette debout ; ailleurs, rien à réserver en bas. */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) { :root { --bas: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
/* Un élément qui reçoit le focus n'est jamais caché sous la barre (WCAG 2.4.11). */
html { background: var(--nuit); scrollbar-gutter: stable; scroll-padding-top: calc(var(--entete-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; padding-bottom: var(--bas); background: var(--nuit); color: var(--ecume);
  font: 400 16px/1.5 var(--texte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { body { font-size: 17px; } }
main { display: block; overflow-x: clip; }
main:focus { outline: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; -webkit-tap-highlight-color: transparent; }
b, strong { font-weight: 700; }
::selection { background: var(--reflet); color: var(--nuit); }

/* Imbue : 300 en grand corps, 400 en dessous de 56 px, jamais sous 24 px (ses déliés disparaissent). */
.imbue { font-family: var(--titre); font-weight: 400; font-optical-sizing: auto; line-height: 1; letter-spacing: 0; }
.chiffre { font-variant-numeric: lining-nums; }

:focus-visible { outline: 2px solid var(--reflet); outline-offset: 3px; }

.lien {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
@media (hover: hover) { .lien:hover { text-decoration-thickness: 2px; } }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; padding: 0 22px;
  background: var(--ecume); color: var(--nuit); font: 700 16px/1 var(--texte); text-decoration: none; white-space: nowrap;
  transition: background-color .2s;
}
@media (hover: hover) { .bouton:hover { background: var(--reflet); } }
.bouton:active { transform: scale(.98); }
.bouton[aria-disabled="true"] { background: var(--bleu); color: var(--brume); cursor: not-allowed; }

.evitement {
  position: fixed; z-index: 100; top: calc(var(--demobar-offset, 0px) + 8px); left: max(8px, env(safe-area-inset-left));
  display: flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--ecume); color: var(--nuit);
  font-weight: 700; text-decoration: none; transform: translateY(calc(-100% - 60px));
}
.evitement:focus { transform: none; outline: 2px solid var(--nuit); outline-offset: -5px; }

.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 96px; pointer-events: none; }
.insec { white-space: nowrap; }
sup { font-size: .58em; line-height: 0; vertical-align: .62em; margin-left: .04em; }
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Un plan : plein cadre, 100 svh, collé au précédent. L'en-tête le recouvre en haut, la bande basse en bas (téléphone). */
.plan { position: relative; min-height: 100svh; }
.grille { width: 100%; max-width: calc(var(--grille) + 2 * var(--marge)); margin-inline: auto; padding-inline: max(var(--marge), env(safe-area-inset-left)) max(var(--marge), env(safe-area-inset-right)); }

/* Téléphone : accroche douce sur le haut de chaque plan ; jamais « mandatory », le module et le générique dépassent l'écran. */
@media (hover: none) and (pointer: coarse) {
  html { scroll-snap-type: y proximity; }
  /* Les plans plein cadre s'accrochent au ras de l'écran : la marge négative annule le retrait réservé à la barre. */
  .accroche { scroll-snap-align: start; scroll-margin-top: calc(-1 * (var(--entete-h) + 16px)); }
  /* Les quatre machines : un lancé du pouce s'arrête à chaque repère, jamais au milieu d'un fondu. */
  .machines__ancres .accroche { scroll-snap-stop: always; }
}

/* Feuilles et volets : <dialog>, le navigateur garde le focus et gère Échap. */
dialog { color: var(--ecume); }
dialog::backdrop { background: rgb(4 8 12 / .62); }
html:has(dialog[open]) { overflow: hidden; }
.fermer { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.fermer svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}