/* Hallmark · genre: editorial · macrostructure: Long Document (reference variant) · theme: custom "night flight seen from a lit page: dark game screens on warm paper" · enrichment: E5 hand-built SVG · nav: N9 edge-aligned + C4 sticky bottom bar · footer: Ft5 statement
 * paper oklch(98% 0.006 85) · ink navy oklch(22% 0.035 265) · accent oklch(52% 0.2 27) red · display Bricolage Grotesque 800 + body Geist 400
 * axes: light / grotesk-sans / warm
 */

@font-face {
  font-family: "VDN Titres";
  src: url("../fonts/nuit-titres.woff2") format("woff2");
  font-weight: 700 800;
  font-display: optional;
}
@font-face {
  font-family: "VDN Texte";
  src: url("../fonts/nuit-texte.woff2") format("woff2");
  font-weight: 400 600;
  font-display: optional;
}

:root {
  --color-paper: oklch(98% 0.006 85);
  --color-paper-2: oklch(95.6% 0.009 85);
  --color-paper-3: oklch(92.8% 0.011 85);
  --color-paper-4: oklch(89% 0.013 85);
  --color-card: oklch(100% 0 0);
  --color-night: oklch(24% 0.04 268);
  --color-night-2: oklch(31% 0.045 268);
  --color-ink: oklch(22% 0.035 265);
  --color-ink-2: oklch(34% 0.03 265);
  --color-ink-3: oklch(47% 0.025 265);
  --color-accent: oklch(52% 0.2 27);
  --color-accent-hi: oklch(46% 0.19 27);
  --color-accent-text: oklch(47% 0.19 27);
  --color-on-accent: oklch(99% 0.004 80);
  --color-on-night: oklch(96% 0.008 80);
  --color-bloom: oklch(86% 0.08 27 / 0.45);
  --color-bloom-2: oklch(90% 0.04 265 / 0.6);
  --color-line: oklch(88% 0.012 265);
  --color-good: oklch(44% 0.12 155);
  --color-bad: oklch(48% 0.18 25);
  --color-focus: oklch(50% 0.2 265);
  --shadow-card: 0 1px 2px oklch(22% 0.035 265 / 0.06), 0 10px 28px oklch(22% 0.035 265 / 0.08);

  --font-display: "VDN Titres", "Arial Narrow", sans-serif;
  --font-body: "VDN Texte", "Segoe UI", Roboto, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --text-display: clamp(2.05rem, 1.4rem + 3vw, 3.4rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-slow: 1800ms;

  --bar-h: 56px;
  --measure: 700px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(60rem 32rem at 85% -8rem, var(--color-bloom), transparent 70%),
    radial-gradient(50rem 30rem at -10% 30rem, var(--color-bloom-2), transparent 70%),
    var(--color-paper);
  background-repeat: no-repeat;
  color: var(--color-ink-2);
  font: 400 var(--text-base)/1.6 var(--font-body);
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 var(--space-md); }
strong { color: var(--color-ink); font-weight: 600; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); line-height: 1.05; font-weight: 800; margin: 0 0 var(--space-lg); }
h2 { font-size: var(--text-2xl); line-height: 1.15; font-weight: 800; margin: 0 0 var(--space-lg); }
h3 { font-size: var(--text-lg); line-height: 1.25; font-weight: 700; margin: var(--space-xl) 0 var(--space-sm); }

.saut { position: absolute; left: -9999px; top: 0; }
.saut:focus { left: var(--space-md); z-index: 60; background: var(--color-paper-3); padding: var(--space-xs) var(--space-md); }

/* ---------- top bar ---------- */
.cabine {
  position: sticky; top: 0; z-index: 40;
  background: oklch(98% 0.006 85 / 0.95);
  border-bottom: 1px solid var(--color-line);
}
.cabine__in {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-md);
  height: 60px; padding: 0 var(--space-md);
}
.marque {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
  font: 800 1.15rem/1 var(--font-display); letter-spacing: -0.02em;
}
.marque svg { width: 28px; height: 28px; }
.marque span { color: var(--color-accent-text); }
.routes { display: none; }
.langue {
  margin-left: auto; color: var(--color-ink-2); text-decoration: none; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 6px 12px;
}
.langue:hover { color: var(--color-ink); border-color: var(--color-ink-3); }
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; color: var(--color-ink); white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; padding: 8px 12px;
  border-radius: var(--radius-pill); background: var(--color-paper-3);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--color-paper-4); }
.menu ul {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(78vw, 280px);
  margin: 0; padding: var(--space-xs); list-style: none;
  background: var(--color-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.menu a { display: block; padding: 10px 12px; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--color-paper-2); }
.cabine .bouton { display: none; }

/* ---------- play button (one component, every placement) ---------- */
.bouton {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 48px; padding: 6px 28px;
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
  font: 800 1.05rem/1.1 var(--font-display); letter-spacing: 0.01em;
  box-shadow: 0 6px 18px oklch(52% 0.2 27 / 0.28);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bouton small { font: 600 0.75rem/1.2 var(--font-body); letter-spacing: 0.02em; }
.bouton:hover { background: var(--color-accent-hi); color: var(--color-on-accent); }
.bouton:active { transform: translateY(1px); }
.bouton--large { min-height: 60px; padding: 8px 40px; font-size: 1.25rem; }
.appel { margin: var(--space-lg) 0 var(--space-xl); }

.piste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--color-card);
  box-shadow: 0 -4px 16px oklch(22% 0.035 265 / 0.08);
}
.piste .bouton {
  position: relative; display: flex; width: 100%; height: var(--bar-h); min-height: var(--bar-h);
  border-radius: 0; box-shadow: none;
}
.piste .bouton::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.16), transparent);
  transform: translateX(-100%);
  animation: balayage var(--dur-slow) var(--ease-in-out) 1.2s 3;
}
@keyframes balayage { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .piste .bouton::after { animation: none; }
  .bouton { transition: none; }
}

/* ---------- page frame ---------- */
.vol { max-width: 1200px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-3xl); }
.fil { font-size: var(--text-sm); color: var(--color-ink-3); margin: 0 0 var(--space-lg); }
.fil ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.fil li + li::before { content: "›"; margin-right: var(--space-xs); color: var(--color-ink-3); }
.fil a { color: var(--color-ink-2); white-space: nowrap; }
.tete { max-width: var(--measure); }
.chapo { font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink-2); }
.signature { font-size: var(--text-sm); color: var(--color-ink-3); margin-top: calc(-1 * var(--space-sm)); }

/* table of contents: chip ribbon on mobile, list on desktop */
.sommaire { margin: var(--space-lg) calc(-1 * var(--space-md)) var(--space-xl); }
.sommaire__titre { margin: 0 var(--space-md) var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-3); }
.sommaire ol {
  display: flex; gap: var(--space-xs); margin: 0; padding: 2px var(--space-md) var(--space-xs);
  list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-md);
}
.sommaire ol::-webkit-scrollbar { display: none; }
.sommaire li { flex: 0 0 auto; scroll-snap-align: start; }
.sommaire a {
  display: block; white-space: nowrap; text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500;
}
.sommaire a:hover, .sommaire a.est-actif { background: var(--color-night); color: var(--color-on-night); }

.texte { min-width: 0; max-width: var(--measure); }
.bloc { padding-top: var(--space-2xl); }
.bloc + .bloc { margin-top: var(--space-lg); }
.bloc ul, .bloc ol { padding-left: 1.3rem; margin: 0 0 var(--space-lg); }
.bloc li { margin-bottom: var(--space-xs); }
.bloc li::marker { color: var(--color-accent-text); font-weight: 700; }
.bloc blockquote {
  margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg);
  background: var(--color-card); border-radius: var(--radius-md); color: var(--color-ink); box-shadow: var(--shadow-card);
}
.suite { color: var(--color-ink-3); font-size: var(--text-sm); }

/* tables: horizontal scroll, sticky first column */
.grille {
  margin: var(--space-lg) 0 var(--space-xl); overflow-x: auto;
  border-radius: var(--radius-md); background: var(--color-card); box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}
.grille table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.grille caption { caption-side: top; text-align: left; padding: var(--space-sm) var(--space-md); color: var(--color-ink); font-weight: 600; }
.grille th, .grille td { padding: 11px 14px; text-align: left; vertical-align: top; }
.grille thead th { background: var(--color-night); color: var(--color-on-night); font-weight: 600; white-space: nowrap; }
.grille tbody tr:nth-child(odd) th, .grille tbody tr:nth-child(odd) td { background: var(--color-card); }
.grille tbody tr:nth-child(even) th, .grille tbody tr:nth-child(even) td { background: var(--color-paper-2); }
.grille th:first-child, .grille td:first-child { position: sticky; left: 0; z-index: 1; min-width: 132px; }
.grille tbody th { color: var(--color-ink); font-weight: 600; }
.grille thead th:first-child { z-index: 2; }

/* figures */
.cliche { margin: var(--space-lg) 0 var(--space-xl); }
.cliche img, .cliche svg { width: 100%; border-radius: var(--radius-md); background: var(--color-paper-2); }
/* schemes: two inline SVGs, one shown per figure width, never scrolled */
.cliche--schema { container-type: inline-size; }
.cliche--schema svg { width: 100%; max-width: 100%; height: auto; }
.cliche--schema .schema--h { display: none; }
.cliche--schema .schema--v { max-width: 480px; margin-inline: auto; }
@container (min-width: 640px) {
  .cliche--schema .schema--h { display: block; }
  .cliche--schema .schema--v { display: none; }
}
.cliche figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-3); }

/* pros / cons and testimonials */
.balance { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; }
.balance > div { background: var(--color-card); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-card); }
.balance h3 { margin-top: 0; }
.balance .pour h3 { color: var(--color-good); }
.balance .contre h3 { color: var(--color-bad); }
.voix { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; padding: 0 !important; list-style: none; }
.voix li { background: var(--color-card); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin: 0; box-shadow: var(--shadow-card); }
.voix p { margin-bottom: var(--space-xs); color: var(--color-ink); }
.voix span { font-size: var(--text-sm); color: var(--color-ink-3); }

/* faq */
.questions details { background: var(--color-card); border-radius: var(--radius-md); margin-bottom: var(--space-sm); box-shadow: var(--shadow-card); }
.questions summary {
  cursor: pointer; list-style: none; padding: var(--space-md) var(--space-lg);
  color: var(--color-ink); font-weight: 600; position: relative; padding-right: 3rem;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; position: absolute; right: var(--space-lg); top: var(--space-md); color: var(--color-accent-text); font-weight: 700; }
.questions details[open] summary::after { content: "−"; }
.questions details > div { padding: 0 var(--space-lg) var(--space-md); }

/* game cards */
.escadrille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: var(--space-lg) 0 var(--space-xl); padding: 0; list-style: none; }
.carte {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; margin: 0 !important;
  background: var(--color-card); box-shadow: var(--shadow-card);
}
.carte img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.carte__corps { padding: var(--space-md) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.carte h3 { margin: 0; font-size: var(--text-xl); }
.carte h3 a { color: var(--color-ink); text-decoration: none; }
.carte h3 a:hover { color: var(--color-accent-text); }
.carte p { margin: 0; font-size: 0.97rem; }
.carte .bouton { margin-top: auto; align-self: flex-start; }
.carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }
.carte--vedette { background: linear-gradient(170deg, oklch(93% 0.04 27), var(--color-card) 60%); outline: 2px solid var(--color-accent); outline-offset: -2px; }
.carte--vedette h3 { font-size: var(--text-2xl); }

/* end banner */
.atterrissage {
  margin-top: var(--space-3xl); padding: var(--space-2xl) var(--space-lg);
  border-radius: var(--radius-lg); text-align: center;
  background: radial-gradient(40rem 18rem at 50% 0, oklch(30% 0.12 27 / 0.9), transparent 75%), var(--color-night);
  color: var(--color-on-night);
}
.atterrissage h2 { margin-bottom: var(--space-sm); }
.atterrissage p { max-width: 520px; margin: 0 auto var(--space-lg); }
.atterrissage .pied__phrase { color: var(--color-on-night); }

/* footer */
.pied { background: var(--color-night); color: oklch(80% 0.015 265); }
.pied a { color: oklch(86% 0.02 265); }
.pied .pied__phrase { color: var(--color-on-night); }
.pied__bas, .pied__avert { color: oklch(76% 0.02 265) !important; }
.pied__in { max-width: 1200px; margin: 0 auto; padding: var(--space-2xl) var(--space-md) var(--space-xl); }
.pied__phrase { font: 800 var(--text-xl)/1.25 var(--font-display); color: var(--color-ink); max-width: 640px; margin-bottom: var(--space-xl); letter-spacing: -0.01em; }
.pied__liens { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.pied__liens a { white-space: nowrap; font-size: var(--text-sm); }
.pied__avert { display: flex; gap: var(--space-md); align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-3); margin-top: var(--space-lg); }
.pied__avert svg { flex: 0 0 44px; width: 44px; height: 44px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-3); }

/* plain pages */
.page-simple { max-width: var(--measure); }
.plan ul { padding-left: 1.2rem; }
.plan > ul > li { margin-bottom: var(--space-md); }

@media (min-width: 640px) {
  .balance { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voix { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .escadrille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .escadrille .carte--vedette { grid-column: 1 / -1; }
  .carte--vedette { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .carte--vedette img { height: auto; align-self: center; }
}

@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .piste { display: none; }
  .cabine__in { height: 68px; padding: 0 var(--space-lg); gap: var(--space-lg); }
  .cabine .bouton { display: inline-flex; min-height: 48px; padding: 4px 24px; }
  .vol { padding: var(--space-2xl) var(--space-lg) var(--space-3xl); }
  .texte > .bloc:first-child { padding-top: var(--space-md); }
  .escadrille--accueil { max-width: none; }
}

/* ---------- game pages: play card (.fiche), rendered once right after the H1 ----------
 * < 1024px: compact card between the byline and the table of contents.
 * 1024-1279px: article + sticky card on the right, contents as wrapped chips.
 * >= 1280px: contents | article | sticky card. */
.fiche {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-xs);
  grid-template-areas: "img titre" "img faits" "btn btn" "note note";
  margin: 0 0 var(--space-md); padding: var(--space-sm);
  background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  border-top: 3px solid var(--color-accent);
}
.fiche__titre { grid-area: titre; margin: 0; font: 800 1rem/1.2 var(--font-display); color: var(--color-ink); letter-spacing: -0.01em; }
.fiche__img { grid-area: img; width: 112px; height: 70px; align-self: center; border-radius: var(--radius-sm); background: var(--color-night); object-fit: cover; }
.fiche__faits { grid-area: faits; margin: 0; font-size: var(--text-sm); line-height: 1.35; }
.fiche__faits div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.fiche__faits dt { color: var(--color-ink-3); }
.fiche__faits dd { margin: 0; color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fiche__faits small { font-weight: 400; color: var(--color-ink-3); font-size: 0.75rem; }
.fiche__tirage { display: none !important; }
.fiche .bouton { grid-area: btn; display: flex; width: 100%; min-height: 52px; margin-top: var(--space-2xs); padding: 6px 16px; font-size: 1.15rem; }
.fiche__note { grid-area: note; margin: 0; text-align: center; font-size: 0.75rem; line-height: 1.35; color: var(--color-ink-3); }
.fiche__sauts { display: none; }
.tete + .fiche { margin-top: calc(-1 * var(--space-2xs)); }
.fiche + .sommaire { margin-top: var(--space-md); }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .fiche { grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "img titre btn" "img faits btn" "img note btn"; column-gap: var(--space-md); padding: var(--space-sm) var(--space-md); max-width: var(--measure); }
  .fiche .bouton { width: auto; align-self: center; margin: 0; padding: 6px 28px; }
  .fiche__note { text-align: left; }
}

@media (min-width: 1024px) {
  .avec-sommaire { display: grid; grid-template-columns: minmax(0, var(--measure)) 300px; column-gap: var(--space-2xl); align-items: start; justify-content: space-between; }
  .avec-sommaire > .tete { grid-column: 1; grid-row: 1; }
  .avec-sommaire > .sommaire { grid-column: 1; grid-row: 2; margin: var(--space-xs) 0 var(--space-md); }
  .avec-sommaire > .sommaire .sommaire__titre { margin-left: 0; }
  .avec-sommaire > .sommaire ol { flex-wrap: wrap; overflow: visible; padding: 2px 0 0; }
  .avec-sommaire > .texte { grid-column: 1; grid-row: 3; }
  .avec-sommaire > .fiche {
    grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 92px; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-md);
  }
  .fiche__titre { font-size: var(--text-lg); }
  .fiche__img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-md); }
  .fiche__faits { display: grid; gap: 0; font-size: 0.95rem; border-top: 1px solid var(--color-line); }
  .fiche__faits div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 7px 0; border-bottom: 1px solid var(--color-line); }
  .fiche__faits dd { text-align: right; }
  .fiche__faits small { display: block; }
  .fiche__tirage { display: flex !important; }
  .fiche .bouton { min-height: 60px; margin-top: var(--space-xs); font-size: 1.25rem; }
  .fiche__sauts { display: block; padding-top: var(--space-sm); border-top: 1px solid var(--color-line); }
  .fiche__sauts p { margin: 0 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-3); }
  .fiche__sauts ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .fiche__sauts a { display: block; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; }
  .fiche__sauts a:hover { background: var(--color-night); color: var(--color-on-night); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .fiche__sauts { display: none; }
  .avec-sommaire > .fiche { top: 84px; }
}

@media (min-width: 1280px) {
  .avec-sommaire { grid-template-columns: 200px minmax(0, var(--measure)) 300px; column-gap: var(--space-xl); }
  .avec-sommaire > .sommaire { position: sticky; top: 92px; margin: 0; grid-column: 1; grid-row: 1 / span 2; }
  .avec-sommaire > .tete, .avec-sommaire > .texte { grid-column: 2; }
  .avec-sommaire > .texte { grid-row: 2; }
  .avec-sommaire > .fiche { grid-column: 3; grid-row: 1 / span 2; }
  .avec-sommaire > .sommaire .sommaire__titre { margin: 0 0 var(--space-sm); }
  .avec-sommaire > .sommaire ol { flex-direction: column; flex-wrap: nowrap; padding: 0; gap: 2px; }
  .sommaire a { background: none; color: var(--color-ink-2); padding: 7px 12px; border-radius: var(--radius-sm); white-space: normal; }
  .sommaire a:hover, .sommaire a.est-actif { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 3px 0 0 var(--color-accent); }
}

@media (min-width: 1140px) {
  .menu { display: none; }
  .routes { display: flex; gap: 2px; margin: 0 0 0 var(--space-md); padding: 0; list-style: none; }
  .routes a { color: var(--color-ink-2); text-decoration: none; font-size: 0.95rem; padding: 8px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
  .routes a:hover, .routes a[aria-current="page"] { color: var(--color-ink); background: var(--color-paper-3); }
}

/* ---------- home: hero banner, partner banner, table minis ---------- */
.envol {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg);
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)) var(--space-2xl); padding: var(--space-xl) var(--space-md) var(--space-lg);
  background:
    radial-gradient(34rem 22rem at 100% 0, var(--color-bloom), transparent 70%),
    linear-gradient(180deg, var(--color-paper-2), var(--color-paper));
  border-bottom: 1px solid var(--color-line);
}
.envol h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem); margin-bottom: var(--space-md); }
.envol__chapo { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); max-width: 560px; }
.envol__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin: var(--space-lg) 0; }
.bouton-second {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid var(--color-ink-3); color: var(--color-ink);
  text-decoration: none; font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.bouton-second:hover { background: var(--color-card); color: var(--color-ink); }
.envol__puces { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--space-xs); margin: 0 calc(-1 * var(--space-md)) var(--space-sm); padding: 0 var(--space-md); list-style: none; }
.envol__puces::-webkit-scrollbar { display: none; }
.envol__puces li { font-size: var(--text-sm); color: var(--color-ink-2); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 5px 12px; white-space: nowrap; }
.envol__visuel { width: 100%; height: auto; border-radius: var(--radius-lg); }
.texte--large { max-width: none; }
.texte--large > .bloc, .texte--large > .intro { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.texte--large > #jeux, .texte--large > #comparatif { max-width: 1040px; }
.intro p:first-child { font-size: 1.125rem; color: var(--color-ink); }
.envol .signature { margin: 0; }

.bandeau {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: center;
  max-width: 1040px; margin: var(--space-2xl) auto 0; padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: radial-gradient(30rem 14rem at 0 0, oklch(34% 0.13 27 / 0.9), transparent 75%), var(--color-night);
  color: oklch(84% 0.015 265);
}
.bandeau svg { width: 52px; height: 52px; }
.bandeau__titre { font: 800 var(--text-xl)/1.2 var(--font-display); color: var(--color-on-night); margin-bottom: var(--space-xs); }
.bandeau p:last-child { margin: 0; }
.bandeau .bouton { justify-self: start; }

.pastille { display: block; width: 56px; height: 35px; border-radius: 6px; margin: 0 0 6px; }
.grille th a { display: inline-block; white-space: nowrap; }

@media (min-width: 960px) {
  .envol__puces { flex-wrap: wrap; overflow: visible; margin: 0 0 var(--space-md); padding: 0; }
  .bouton-second { padding: 0 22px; }
  .envol { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl);
    margin: calc(-1 * var(--space-2xl)) calc(50% - 50vw) var(--space-2xl); padding: var(--space-3xl) max(var(--space-lg), calc(50vw - 600px)); }
  .bandeau { grid-template-columns: 80px minmax(0, 1fr) auto; padding: var(--space-xl) var(--space-2xl); }
  .bandeau svg { width: 80px; height: 80px; }
  .bandeau .bouton { grid-column: auto; }
}