/* ==========================================================================
   CinéRoulette — feuille de style partagée
   1. Polices   2. Tokens   3. Base   4. Composants   5. Sections   6. Mouvement
   ========================================================================== */

/* 1. Polices auto-hébergées (latin) ------------------------------------- */
@font-face { font-family: 'DM Serif Display'; font-weight: 400; font-display: swap; src: url('/assets/fonts/dm-serif-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }

/* 2. Tokens ------------------------------------------------------------- */
@property --k { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  /* Couleurs : deux encres (bleu nuit, vermillon) sur papier */
  --paper: #f1e7d0;        /* le hall */
  --card: #fbf6e9;         /* papier des tickets et des feuilles */
  --ink: #1a2745;          /* encre principale */
  --night: #0f1830;        /* la salle */
  --red: #b5301b;          /* vermillon : texte, remplissages, personne A */
  --blue: #1e5aa8;         /* bleu : personne B */
  --mut: #4a5575;          /* texte secondaire */
  --line: rgb(26 39 69 / .25);        /* filets décoratifs */
  --line-strong: rgb(26 39 69 / .6);  /* bordures de contrôles (3:1 mini) */
  --on-night: #f1e7d0;
  --on-night-mut: #c4bca6;
  --focus: var(--ink);

  /* Typographie */
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --fs-xs: .8125rem;   /* 13 */
  --fs-s: .9375rem;    /* 15 */
  --fs-m: 1.0625rem;   /* 17 */
  --fs-l: 1.5rem;      /* 24 */
  --fs-xl: 2rem;       /* 32 */
  --fs-title: clamp(1.625rem, 6.6vw, 2.25rem);
  --track-caps: .1em;

  /* Espacements (base 4) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;

  /* Rayons : angles francs, on est au guichet */
  --r-s: 2px; --r-m: 3px; --r-pill: 999px;

  /* Cibles tactiles */
  --hit: 44px;
  --gutter: 1rem;
  --header-h: 57px;
  --bar-h: 78px;           /* barre du tirage collée en bas (mobile) */
}

/* 3. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  background: var(--paper); color: var(--ink);
  font: 400 var(--fs-m)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
button, select, input, summary { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 50; background: var(--ink); color: var(--card); padding: var(--s3) var(--s4); border-radius: var(--r-m); }
.skip:focus { top: var(--s2); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.005em; }
.caps { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }

/* 4. Composants --------------------------------------------------------- */

/* En-tête */
.top { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.logo { font: 400 1.5rem/1 var(--serif); text-decoration: none; }
.top nav { display: flex; align-items: center; gap: var(--s4); }
.top nav a { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--fs-s); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.listbtn { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--hit); padding: 0; background: none; border: 0; font-size: var(--fs-s); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.listbtn .count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--r-s); background: var(--ink); color: var(--card); font-size: var(--fs-xs); letter-spacing: 0; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); border: 1.5px solid var(--ink); border-radius: var(--r-m); background: none; font-size: 1rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.btn:hover { background: rgb(26 39 69 / .08); }
.btn-solid { background: var(--ink); color: var(--card); }
.btn-solid:hover { background: #26365f; }
.btn[aria-pressed='true'] { background: var(--ink); color: var(--card); }
.btn-draw { width: 100%; min-height: 54px; border-color: var(--red); background: var(--red); color: #fff; font-size: 1.125rem; letter-spacing: .08em; text-transform: uppercase; }
.btn-draw:hover { background: #9e2a17; }
.btn:disabled { opacity: .6; cursor: progress; }
.link-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--hit); padding: 0; background: none; border: 0; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

/* Pastilles de genre / décennie */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; font-size: 1rem; }
.chip:hover { border-color: var(--c, var(--ink)); }
.chip[aria-pressed='true'] { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: var(--card); font-weight: 500; }
.chip[aria-pressed='true']::before { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--check) center/contain no-repeat; mask: var(--check) center/contain no-repeat; }
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Contrôles segmentés (boutons radio) */
.field { border: 0; padding: 0; min-width: 0; }
.field > legend, .field-label { display: block; margin-bottom: var(--s2); padding: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mut); }
.field-hint { margin-top: var(--s1); font-size: var(--fs-xs); color: var(--mut); }
.seg { display: flex; border: 1.5px solid var(--ink); border-radius: var(--r-m); padding: 2px; gap: 2px; }
.seg label { flex: 1 1 0; min-width: 0; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 40px; padding: 0 6px; border-radius: 1px; text-align: center; font-size: var(--fs-s); font-weight: 600; line-height: 1.1; cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: var(--card); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg-mode span { text-transform: uppercase; letter-spacing: .05em; min-height: var(--hit); }

select { width: 100%; min-height: var(--hit); padding: 0 36px 0 var(--s3); border: 1.5px solid var(--ink); border-radius: var(--r-m); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a2745' stroke-width='1.8'/%3E%3C/svg%3E") right 12px center no-repeat; -webkit-appearance: none; appearance: none; font-size: 1rem; }

/* Feuille de critères */
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s5) var(--s4) var(--s4); color: var(--ink); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.sheet h2 { font-size: var(--fs-l); }
.sheet .stack { display: grid; gap: var(--s5); }
.duo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.col { --c: var(--ink); border-top: 4px solid var(--c); padding-top: var(--s2); min-width: 0; }
.col-a { --c: var(--red); }
.col-b { --c: var(--blue); }
.col h3 { margin-bottom: var(--s2); font: 600 var(--fs-xs)/1.2 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c); }
.more { border-top: 1px solid var(--line); margin-top: var(--s5); }
.more summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; list-style: none; cursor: pointer; font-size: var(--fs-s); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.more summary::-webkit-details-marker { display: none; }
.more summary small { margin-left: var(--s2); font-size: var(--fs-s); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mut); }
.more summary .ico { transition: transform .2s; }
.more[open] summary .ico { transform: rotate(180deg); }
.more .stack { padding: var(--s2) 0 var(--s2); }

/* Affiche */
.poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #1c2742; border-radius: var(--r-s); }
.poster img { width: 100%; height: 100%; object-fit: contain; }
.poster-empty { place-items: center; padding: var(--s5); text-align: center; color: var(--on-night-mut); }
.poster-empty .ico { width: 36px; height: 36px; margin: 0 auto var(--s3); }
.reel { position: absolute; inset: 0; overflow: hidden; background: #1c2742; }
.reel-track { display: flex; flex-direction: column; will-change: transform; animation: reel 1.35s cubic-bezier(.16, .8, .24, 1) forwards; }
.reel-track img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; flex: none; }
@keyframes reel { to { transform: translateY(calc(-100% * (var(--n) - 1) / var(--n))); } }

/* Ticket */
.ticket { --n: 11px; color: var(--ink); }
.ticket .main, .ticket .stub { background: var(--card); }
.ticket .main { padding: var(--s4) var(--s4) var(--s5); border-top: 6px solid var(--ink); border-radius: var(--r-m) var(--r-m) 0 0;
  -webkit-mask: radial-gradient(circle var(--n) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--n) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat; }
.ticket .stub { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); border-radius: 0 0 var(--r-m) var(--r-m);
  -webkit-mask: radial-gradient(circle var(--n) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--n) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat; }
.ticket .stub::before { content: ''; display: block; margin: 0 var(--s2) var(--s3); border-top: 2px dashed var(--line); }
.tk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); color: var(--mut); }
.tk-info { display: grid; gap: 2px; padding-bottom: var(--s2); }
.tk-info span:first-child { color: var(--ink); }
.tk-no { display: flex; align-items: flex-start; gap: 4px; margin-right: -4px; font: 400 clamp(3.75rem, 17vw, 4.75rem)/.78 var(--serif); letter-spacing: -.03em; color: var(--red); }
.tk-no small { margin-top: 6px; font: 600 .875rem var(--sans); letter-spacing: var(--track-caps); color: var(--mut); }
.tk-title { margin: var(--s3) 0 var(--s3); font-size: clamp(2rem, 9vw, 2.5rem); line-height: .98; overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s4); }
.facts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mut); }
.facts dd { font: 400 1.5rem/1.1 var(--serif); }
.rows { display: grid; gap: var(--s2); margin: 0 0 var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 1rem; }
.rows > div { display: grid; grid-template-columns: 6.25rem 1fr; gap: var(--s2); align-items: baseline; }
.rows dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mut); }
.rows .r-a dt { color: var(--red); }
.rows .r-b dt { color: var(--blue); }
.rows .r-c dd span { display: inline-block; padding: 0 var(--s2); border-radius: var(--r-s); background: var(--ink); color: var(--card); font-weight: 600; }
.rows .r-c dd span + span { margin-left: var(--s1); }
.providers { display: flex; flex-wrap: wrap; gap: var(--s2); }
.providers img { width: 28px; height: 28px; border-radius: var(--r-s); }
.sum { max-width: 54ch; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; color: #2a3558; }
.acts { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s2); }
.acts .btn { padding: 0 var(--s2); }
.acts .btn[aria-pressed='true'] .ico-plus { display: none; }
.acts .btn:not([aria-pressed='true']) .ico-check { display: none; }
.valid { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); color: var(--mut); }
.valid a { color: var(--ink); }
.barcode { width: 110px; height: 26px; fill: var(--ink); }
.ticket-note .main { border-radius: var(--r-m); -webkit-mask: none; mask: none; padding-bottom: var(--s4); }
.ticket-note p { max-width: 46ch; }
.ticket-note p + p { margin-top: var(--s2); color: var(--mut); }
.duo-note { margin-bottom: var(--s3); font-size: 1rem; color: var(--mut); }

/* Résultats : un seul grand ticket, ou une liste de tickets compacts */
.results { display: block; }
.film { display: block; }
.results.single .film .poster { width: clamp(10rem, calc((100svh - var(--header-h) - var(--bar-h) - 18rem) * 2 / 3), 100%); margin: 0 auto var(--s3); }
/* Sans affiche : le titre en grand ouvre le ticket, sur le même papier */
.poster-type { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2); aspect-ratio: auto; min-height: 9rem; padding: var(--s5) var(--s4) var(--s3); background: var(--card); color: var(--ink); border-top: 6px solid var(--ink); border-radius: var(--r-m) var(--r-m) 0 0; }
.pt-year { font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mut); }
.pt-title { font: 400 clamp(2.75rem, 14vw, 4rem)/.96 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.results.single .film .poster.poster-type { width: auto; margin: 0; }
.film.no-poster .ticket .main { border-top: 0; border-radius: 0; }
.results.single .film.no-poster .tk-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.results.multi .film.no-poster { grid-template-columns: minmax(0, 1fr); }
.results.multi .poster-type { display: none; }
.results.multi .film.no-poster .ticket .main { border-top: 6px solid var(--ink); border-radius: var(--r-m) var(--r-m) 0 0; }
.results.multi .film .poster { margin-bottom: 0; }
.film-empty .poster { display: none; }
.stage-grid:has(.film-idle) .results { display: none; }
.results.multi { display: grid; gap: var(--s5); }
.results.multi .film { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.results.multi .film .poster { margin: 0; }
.results.multi .tk-no { font-size: 3.5rem; }
.results.multi .tk-title { font-size: 1.875rem; margin: var(--s3) 0 var(--s2); }
.results.multi .facts dd { font-size: 1.25rem; }
.results.multi .acts { grid-template-columns: 1fr; }
.results.multi .rows > div { grid-template-columns: 6rem 1fr; }
.results.multi .tk-info span:nth-child(n+3) { display: none; }
.film.enter { animation: none; }

/* Barre du tirage (collée en bas sur mobile) */
.draw-wrap { position: sticky; bottom: 0; z-index: 10; margin-inline: calc(var(--gutter) * -1); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }

/* Ma liste : feuille du bas (mobile) / panneau latéral (ordinateur) */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgb(8 14 30 / .6); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.scrim.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column; background: var(--card); color: var(--ink); border-radius: 12px 12px 0 0; border-top: 6px solid var(--ink); transform: translateY(100%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.drawer.open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--gutter) var(--s2) var(--gutter); }
.drawer-head h2 { font-size: var(--fs-xl); }
.icon-btn { display: grid; place-items: center; width: var(--hit); height: var(--hit); background: none; border: 0; border-radius: var(--r-m); }
.icon-btn:hover { background: rgb(26 39 69 / .08); }
.drawer-body { overflow-y: auto; padding: 0 var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.wl-empty { padding: var(--s5) 0; color: var(--mut); max-width: 32ch; }
.wl-item { display: grid; grid-template-columns: 46px 1fr var(--hit); gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.wl-item img, .wl-item .wl-ph { width: 46px; height: 69px; object-fit: cover; border-radius: var(--r-s); background: #1c2742; }
.wl-title { font: 400 1.25rem/1.1 var(--serif); overflow-wrap: anywhere; }
.wl-meta { margin-top: 2px; font-size: var(--fs-s); color: var(--mut); }
body.locked { overflow: hidden; }

/* 5. Sections ------------------------------------------------------------ */
.intro { background: var(--paper); border-top: 6px solid var(--ink); padding-top: var(--s4); }
.intro .wrap { padding-bottom: var(--s5); }
.intro .rule { border-bottom: 1px solid var(--ink); padding-bottom: var(--s4); }
.intro h1 { font-size: var(--fs-title); line-height: .98; letter-spacing: -.015em; max-width: 26ch; }
.intro .lede { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); max-width: 46ch; color: var(--mut); }

.stage { padding: var(--s5) 0 var(--s6); background: var(--night); }
.stage-grid { display: grid; gap: var(--s5); }
.stage-grid > * { min-width: 0; }

.after { background: var(--paper); border-top: 6px solid var(--ink); }
.prose { max-width: 62rem; margin-inline: auto; padding: var(--s7) var(--gutter) 0; }
.prose h2 { font-size: clamp(1.75rem, 5vw, 2.25rem); margin-bottom: var(--s4); }
.prose p { max-width: 62ch; color: var(--mut); }
.prose-pad-b { padding-bottom: var(--s2); }
.steps { list-style: none; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .n { font: 400 2.75rem/.9 var(--serif); color: var(--red); }
.steps h3 { font: 600 1.1875rem/1.2 var(--sans); margin-bottom: var(--s1); }
.steps p { color: var(--mut); max-width: 58ch; }
.faq-item { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { font: 600 1.1875rem/1.25 var(--sans); margin-bottom: var(--s2); }
.faq-item p { color: var(--mut); max-width: 62ch; }
.explore h2 { font: 600 var(--fs-xs)/1.2 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mut); margin-bottom: var(--s2); }
.explore ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.explore a { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 500; }
.cross { max-width: 62rem; margin: var(--s7) auto 0; padding: 0 var(--gutter) var(--s7); }
.cross-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); border-radius: var(--r-m); background: var(--ink); color: var(--card); }
.cross-card p { max-width: 44ch; }
.cross-card .btn { border-color: var(--card); color: var(--card); }
.cross-card .btn:hover { background: rgb(251 246 233 / .12); }

.foot { --focus: var(--paper); background: var(--night); color: var(--on-night); padding: var(--s6) 0 var(--s7); font-size: var(--fs-s); }
.foot .wrap { display: grid; gap: var(--s2); max-width: 62rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.foot a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--on-night); }
.foot p { max-width: 64ch; color: var(--on-night-mut); }
.foot .tmdb { margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid rgb(241 231 208 / .25); font-size: 1rem; color: var(--on-night); }

/* Pages légales */
.legal { max-width: 46rem; margin-inline: auto; padding: var(--s7) var(--gutter) var(--s8); }
.legal h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); margin-bottom: var(--s2); }
.legal .updated { font-size: var(--fs-s); color: var(--mut); margin-bottom: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--ink); }
.legal h2 { font-size: 1.625rem; margin: var(--s6) 0 var(--s3); }
.legal p, .legal li { margin-bottom: var(--s3); max-width: 62ch; }
.legal ul { padding-left: var(--s5); }
.legal a { color: var(--red); }

/* Desktop ---------------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --gutter: 3.5rem; --fs-m: 1.125rem; --fs-title: clamp(3rem, 6vw, 4.5rem); }
  .intro { padding-top: var(--s6); }
  .intro h1 { max-width: 17ch; }
  .intro .rule { padding-bottom: var(--s5); }
  .intro .wrap { padding-bottom: var(--s6); }
  .stage { padding: var(--s7) 0; }
  .stage-grid { grid-template-columns: 420px minmax(0, 1fr); column-gap: 3.5rem; row-gap: var(--s5); align-items: start; }
  .stage-grid .results.single, .stage-grid .results.single .film { display: contents; }
  .results.single .poster { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + 16px); margin: 0; }
  .results.single .film .poster { width: auto; margin: 0; border-radius: var(--r-s); }
  .results.single .film .poster.poster-type { align-self: start; min-height: 0; border-radius: var(--r-m); padding: var(--s5); border: 1px solid var(--line); border-top: 6px solid var(--ink); }
  .pt-title { font-size: 4.25rem; }
  .film.no-poster .ticket .main { border-top: 6px solid var(--ink); border-radius: var(--r-m) var(--r-m) 0 0; }
  .results.single .ticket, .results.single .ticket-note { grid-column: 2; grid-row: 1; }
  .film-empty .poster { display: grid; }
  .stage-grid:has(.film-idle) .results { display: block; }
  .stage-grid:has(.film-idle) .results.single, .stage-grid:has(.film-idle) .results.single .film { display: contents; }
  .stage-grid .sheet { grid-column: 2; grid-row: 2; }
  .stage-grid .draw-wrap { grid-column: 2; grid-row: 3; position: static; margin: 0; padding: 0; background: none; border: 0; }
  .stage-grid.is-multi { grid-template-columns: minmax(0, 52rem); justify-content: center; }
  .stage-grid.is-multi .results, .stage-grid.is-multi .sheet, .stage-grid.is-multi .draw-wrap { grid-column: 1; grid-row: auto; }
  .stage-grid.is-multi .results.multi { grid-template-columns: 1fr; }
  .sheet { padding: var(--s5) var(--s5) var(--s4); }
  .duo-cols { gap: var(--s5); }
  .ticket .main { padding: var(--s5) var(--s5) var(--s5); }
  .ticket .stub { padding: 0 var(--s5) var(--s5); }
  .tk-no { font-size: 7.5rem; }
  .tk-title { font-size: 3.25rem; margin: var(--s4) 0 var(--s3); }
  .acts { grid-template-columns: 1.4fr 1fr; }
  .drawer { left: auto; top: 0; right: 0; bottom: 0; width: 400px; max-height: none; border-radius: 0; border-top: 0; border-left: 6px solid var(--ink); transform: translateX(100%); }
  .drawer-head { padding-top: var(--s5); }
  .results.multi .film { grid-template-columns: 140px minmax(0, 1fr); }
  .results.multi .acts { grid-template-columns: 1.4fr 1fr; }
  .steps li { grid-template-columns: 4.5rem 1fr; }
}

/* 6. Mouvement ----------------------------------------------------------- */
/* Les lumières s'éteignent pendant le scroll : le fond passe du hall (papier)
   à la salle (nuit). Sans scroll-timeline ou avec prefers-reduced-motion,
   la salle reste une bande fixe. Aucun texte n'est posé directement sur le fond
   animé : tout vit sur des cartes de papier ou sur des bandes pleines. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes salle { to { --k: 1; } }
    html { animation: salle linear both; animation-timeline: scroll(root); animation-range: 200px 520px; }
    body { background: color-mix(in oklab, var(--paper) calc((1 - var(--k)) * 100%), var(--night) calc(var(--k) * 100%)); }
    .stage { background: transparent; }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: scroll()) { html { animation-range: 330px 650px; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel { display: none; }
  .drawer, .scrim, .more summary .ico { transition: none; }
}