/* Indie Days — site
 *
 * Deux matières, prises dans le jeu :
 *   la nuit du studio (bleu nuit des décors, lampe miel) : on y fabrique ;
 *   le papier de la presse (crème, encre, rouge) : on y est jugé.
 * La presse écrit en romain gras, le studio parle en italique.
 *
 * Tailles en rem : sur les grands écrans, la taille de base grandit et toute la
 * mise en page s'agrandit avec elle, au lieu de rester petite au milieu.
 */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-roman.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Nuit — couleurs mesurées sur les décors (mobile/src/core/theme.ts) */
  --night: #18233A;
  --night-deep: #141C33;
  --panel: #1B2440;
  --line-night: #3A4A78;
  --ink-night: #F3EEE2;
  --muted-night: #A9B5D3;
  --lamp: #F2B34C;
  --lamp-edge: #A76A37;
  --lamp-shadow: #553E39;

  /* Papier — gabarits des unes (NewspaperSheet.tsx) */
  --paper: #EFE5CD;
  --paper-deep: #E5D9BC;
  --ink: #241A10;
  --ink-soft: #54463A;
  --press: #A8291F;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Espacement : une seule échelle (4, 8, 12, 16, 24, 32, 48, 64, 96, 144 px à 16 px) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 9rem;

  /* Texte */
  --t-label: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: 1.1875rem;
  --t-h3: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --t-h2: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --t-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);

  --gutter: var(--s4);
  --wrap: 70rem;
}

@media (min-width: 640px) { :root { --gutter: var(--s6); } }
@media (min-width: 1100px) { :root { --gutter: var(--s7); } }

/* Grands écrans : tout grandit d'un cran */
@media (min-width: 1680px) { html { font-size: 106.25%; } }
@media (min-width: 1920px) { html { font-size: 112.5%; } }
@media (min-width: 2240px) { html { font-size: 125%; } }
@media (min-width: 2560px) { html { font-size: 137.5%; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s4); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night-deep);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--serif);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure, table { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
table { border-collapse: collapse; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  background: var(--lamp); color: var(--ink); padding: var(--s3) var(--s4);
  font: 700 var(--t-small) var(--ui);
}
.skip:focus { top: var(--s4); }

/* Les deux matières */
.paper {
  background-color: var(--paper);
  /* Le grain du papier journal, très léger. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .1 0 0 0 0 .06 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
}
.paper--deep { background-color: var(--paper-deep); }
.night { background: var(--night); color: var(--ink-night); }

/* Petits libellés : la voix de l'interface du jeu, en police système */
.page-mark, .kicker, .folio, .chapter-meta, .summary-title, .field > label, .field legend {
  font: 700 var(--t-label)/1.2 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-mark { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.page-mark::before { content: ''; width: var(--s6); height: 2px; background: currentColor; }
.paper .page-mark { color: var(--press); }
.night .page-mark { color: var(--lamp); }

/* ---------- Bouton : le bouton en relief du jeu, coins en escalier ---------- */

.btn-lamp {
  --step: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: var(--s3) var(--s5) calc(var(--s3) + 4px);
  background: var(--lamp); color: var(--ink);
  font: 800 1rem/1.2 var(--ui);
  text-decoration: none; text-align: center; border: 0; cursor: pointer;
  box-shadow: inset 0 -5px 0 var(--lamp-edge);
  clip-path: polygon(
    0 var(--step), var(--step) var(--step), var(--step) 0,
    calc(100% - var(--step)) 0, calc(100% - var(--step)) var(--step), 100% var(--step),
    100% calc(100% - var(--step)), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step)) 100%,
    var(--step) 100%, var(--step) calc(100% - var(--step)), 0 calc(100% - var(--step))
  );
}
.btn-lamp:hover { background: #F6C064; }
.btn-lamp:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--lamp-edge); }
.btn-lamp:focus-visible { outline: none; box-shadow: inset 0 -5px 0 var(--lamp-edge), inset 0 0 0 3px var(--ink); }

/* ---------- En-tête et pied ---------- */

.site-head { background: var(--night); color: var(--ink-night); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 3.5rem; }
.head-home { display: block; padding-block: var(--s3); }
.head-mark { width: 8.5rem; }
.head-nav { display: flex; gap: var(--s5); font: 600 var(--t-small) var(--ui); }
.head-nav a { text-decoration: none; padding-block: var(--s3); }
.head-nav a:hover { color: var(--lamp); }
@media (max-width: 639px) { .head-game { display: none; } }
@media (min-width: 960px) {
  :root { --head-h: 3.75rem; }
  .site-head .wrap { height: var(--head-h); }
  .head-mark { width: 9.5rem; }
}

.site-foot { background: var(--night-deep); color: var(--muted-night); font: 400 var(--t-small)/1.5 var(--ui); padding-block: var(--s8) var(--s7); }
.foot-grid { display: grid; gap: var(--s4); }
.foot-mark { width: 7.5rem; margin-bottom: var(--s2); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.foot-nav a, .foot-pub a { color: var(--ink-night); }
.foot-nav a { padding-block: var(--s2); }
.foot-fine { font-size: var(--t-label); }
@media (min-width: 960px) {
  .foot-grid { grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--s7); }
  .foot-fine { grid-column: 1 / -1; padding-top: var(--s5); border-top: 1px solid var(--line-night); }
}

/* ---------- Page 1 : la une ---------- */

.front { padding-block: var(--s3) var(--s7); overflow-x: clip; }

/* Manchette : sur téléphone, l'édition au-dessus du titre du journal ;
   à partir de la tablette, sur une seule ligne, comme un quotidien. */
.masthead {
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 3px 0 var(--paper), 0 4px 0 var(--ink);
  margin-bottom: var(--s5);
}
.folio {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding-block: var(--s2); border-bottom: 1px solid var(--ink);
  color: var(--ink-soft); letter-spacing: 0.08em;
}
.gazette {
  font: 800 clamp(1.5rem, 1rem + 2.6vw, 2.75rem)/1 var(--serif);
  letter-spacing: -0.01em; text-align: center;
  padding-block: var(--s3) var(--s3);
}
.folio span { white-space: nowrap; }
@media (max-width: 479px), (min-width: 640px) and (max-width: 959px) { .folio-no { display: none; } }
@media (min-width: 640px) {
  .masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--s5); padding-block: var(--s3) var(--s2); }
  .folio { display: contents; }
  .folio > span:first-child { grid-column: 1; grid-row: 1; }
  .folio > span:last-child { grid-column: 3; grid-row: 1; text-align: right; }
  .gazette { grid-column: 2; grid-row: 1; padding-block: 0; }
}

/* Ordre sur téléphone : le titre, tout de suite l'action, puis la photo et le texte */
.front-grid { display: grid; gap: var(--s5); grid-template-areas: "head" "release" "photo" "body" "summary"; }
.front-head-box { grid-area: head; container-type: inline-size; }
.front-head {
  font: 800 var(--t-h1)/0.98 var(--serif);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.kicker { display: block; color: var(--press); margin-bottom: var(--s3); letter-spacing: 0.1em; }
.front-body { grid-area: body; }
.front-columns p { max-width: 62ch; }
.front-columns p + p { margin-top: var(--s4); }
.lede { font-size: var(--t-lead); }
.lede::first-letter {
  float: left; font-weight: 800; font-size: 4.1em; line-height: 0.82;
  padding: 0.06em var(--s2) 0 0; color: var(--press);
}

.release { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--ink); display: grid; gap: var(--s3); justify-items: start; }
.front-release { grid-area: release; margin-top: 0; padding-top: var(--s4); }
.release-status { display: flex; align-items: flex-start; gap: var(--s2); font: 600 var(--t-small)/1.4 var(--ui); }
.release-dot { width: 0.5rem; height: 0.5rem; margin-top: 0.42em; background: var(--press); flex: none; }
.release-fine { font: 400 var(--t-label)/1.4 var(--ui); color: var(--ink-soft); letter-spacing: 0.04em; }
@media (max-width: 479px) { .release .btn-lamp { width: 100%; } }

/* La « photo » de la une : l'écran titre du jeu, Alex au clavier */
.front-photo { grid-area: photo; margin-inline: calc(-1 * var(--gutter)); }
.title-screen { background: var(--night); padding-top: var(--s5); }
.title-scene { width: 100%; margin-inline: auto; }
.title-mark { width: 74%; margin: 0 auto -5%; position: relative; z-index: 2; }
.room-crop { position: relative; aspect-ratio: 941 / 1260; overflow: hidden; }
.room { position: absolute; left: 0; top: -15%; width: 100%; aspect-ratio: 941 / 1672; }
.room > img:first-child { width: 100%; height: 100%; }
/* Sièges et sprite en fraction de l'image, comme dans rooms.ts */
.alex {
  position: absolute; left: 24.09%; top: 36.5%; width: 15.82%; height: 16.8%;
  background: url('/img/alex-work.webp') 0 0 / 400% 100% no-repeat;
}
.seat-back { position: absolute; left: 31.67%; top: 43.9%; width: 9.67%; height: 6.94%; }
@media (prefers-reduced-motion: no-preference) {
  .alex { animation: type 0.72s steps(4) infinite; }
}
@keyframes type { to { background-position-x: 133.333%; } }
.front-photo figcaption {
  font: italic 400 var(--t-small)/1.45 var(--serif);
  padding: var(--s2) var(--gutter) 0; color: var(--ink-soft);
}
.front-photo figcaption b { font-style: normal; font-weight: 700; color: var(--ink); }

.summary { grid-area: summary; border-top: 3px solid var(--ink); padding-top: var(--s3); margin-top: var(--s4); }
.summary-title { color: var(--ink-soft); margin-bottom: var(--s2); }
.summary ol { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.summary li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.summary a {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) 0; min-height: 3rem;
  font: 600 var(--t-body)/1.25 var(--serif); text-decoration: none;
}
.summary a:hover { text-decoration: underline; }
.pg { font: 800 1.75rem/1 var(--serif); color: var(--press); min-width: 1ch; }

/* Tablette : la photo à gauche, le texte et l'action à droite */
@media (min-width: 640px) {
  .front-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "head head" "photo body" "photo release" "summary summary";
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--s5);
  }
  .front-photo { margin-inline: 0; }
  .front-photo figcaption { padding-inline: 0; }
  .front-release { align-self: start; margin-top: var(--s2); }
  .summary ol { grid-template-columns: repeat(4, 1fr); }
  .summary li { border-bottom: 0; border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
  .summary li:first-child { border-left: 0; }
  .summary li + li a { padding-left: var(--s4); }
}

/* Ordinateur : la une remplit exactement l'écran sous l'en-tête. Le texte à gauche ;
   à droite, un panneau de nuit de toute la hauteur, dont la scène se règle sur la
   hauteur réelle du panneau (requête de conteneur). Le sommaire se cale en bas. */
@media (min-width: 960px) {
  .front {
    min-height: calc(100svh - var(--head-h));
    display: flex; flex-direction: column; padding-bottom: var(--s5);
  }
  .front > .wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
  .front-grid { flex: 1; }
  /* Le titre suit la largeur ET la hauteur de l'écran : deux lignes sur un portable */
  .front-head { font-size: clamp(2.5rem, min(4.3vw, 7.8svh), var(--t-h1)); }
  .front-grid {
    /* Le panneau prend la largeur de la scène qu'il peut afficher en hauteur, le texte le reste */
    grid-template-columns: minmax(0, 1fr) min(42%, (100svh - 13rem) / 1.42 + 3rem);
    grid-template-areas: "head photo" "body photo" "release photo" "summary photo";
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--s7); row-gap: var(--s5);
  }
  .front-columns { column-count: 2; column-gap: var(--s6); column-rule: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
  .front-release { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s5); margin-top: 0; }
  .front-release .release-status { grid-column: 1 / -1; }
  .summary { align-self: end; margin-top: var(--s5); }
  .front-photo { align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 24rem; }
  .title-screen { container-type: size; min-height: 0; display: grid; place-items: center; padding: var(--s5); }
  /* La scène (lettrage + chambre) fait 1,41 fois sa largeur en hauteur */
  .title-scene { width: min(100%, 100cqh / 1.42); }
  .front-photo figcaption { max-width: 40ch; }
}
/* Ordinateurs étroits et iPad en paysage : le titre tient sur trois lignes */
@media (min-width: 960px) and (max-width: 1199px) {
  .front-head { font-size: min(var(--t-h1), 4.5vw) !important; }
  .front-grid { grid-template-columns: minmax(0, 1fr) 36%; }
  .summary ol { grid-template-columns: 1fr 1fr; }
  .summary li { border-left: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
  .summary li + li a { padding-left: 0; }
  .summary li:nth-child(even) a { padding-left: var(--s4); }
  .summary li:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent) !important; }
}
/* Hauteur d'écran courante (1920 × 1080 et moins) : la une entière tient sans défiler */
@media (min-width: 960px) and (max-height: 1400px) {
  /* Le titre se règle sur sa colonne pour tenir sur deux lignes */
  .front-head { font-size: clamp(2.5rem, min(8.4cqi, 7.8svh), var(--t-h1)); }
  .lede { font-size: var(--t-body); }
  .front-grid { row-gap: var(--s4); }
  .summary { margin-top: var(--s2); }
}
/* Écrans peu hauts (14 pouces sous Windows, 13 pouces) : titre et chapeau plus compacts,
   pour que le bouton reste visible sans défiler. */
/* Très peu de hauteur (portables 1366 × 768) : la manchette se resserre */
@media (min-width: 960px) and (max-height: 700px) {
  .masthead { padding-block: var(--s2) var(--s1); }
  .gazette { font-size: 1.875rem; }
  .front-columns { font-size: 0.875rem; }
  .summary a { min-height: 2.5rem; padding-block: var(--s2); }
}
@media (min-width: 960px) and (max-height: 820px) {
  .kicker { margin-bottom: var(--s2); }
  .lede { font-size: var(--t-body); }
  .front-columns { font-size: 0.9375rem; line-height: 1.5; }
  .front-grid { row-gap: var(--s4); }
  .masthead { margin-bottom: var(--s4); }
}

/* ---------- Page 2 : de la chambre au loft ---------- */

.timeline { --room-bg: var(--night); background: var(--room-bg); transition: background-color 0.8s ease; }
.timeline-intro { padding-block: var(--s9) var(--s6); }
.timeline-intro h2 { font: italic 600 var(--t-h2)/1 var(--serif); letter-spacing: -0.02em; margin-bottom: var(--s5); }
.timeline-intro p:not(.page-mark) { max-width: 46ch; font-size: var(--t-lead); color: var(--muted-night); }

/* L'afficheur du jeu (RoomHUD) */
.hud {
  display: flex; align-items: center; gap: var(--s4);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 2px solid var(--line-night); border-radius: 10px;
  padding: var(--s2) var(--s4);
  font-family: var(--ui);
}
.hud-brand { display: none; }
.hud-date { display: flex; align-items: center; gap: var(--s2); }
.hud-month { font: 800 0.8125rem var(--ui); color: var(--lamp); text-transform: uppercase; letter-spacing: 0.06em; }
.hud-year { height: 1.375rem; width: auto; fill: var(--ink-night); }
.hud-room { font: 600 0.8125rem/1.2 var(--ui); color: var(--muted-night); }

/* Téléphone et tablette : l'afficheur reste collé en haut, les salles défilent dessous */
.stage { position: sticky; top: 0; z-index: 2; padding: var(--s2) var(--gutter); background: var(--room-bg); transition: background-color 0.8s ease; }
.stage-rooms, .machines { display: none; }

.chapters { padding-inline: var(--gutter); padding-bottom: var(--s9); }
.chapter { padding-block: var(--s7); }
.chapter + .chapter { border-top: 1px solid var(--line-night); }
.chapter-text { max-width: 36rem; }
.chapter-meta { color: var(--lamp); margin-bottom: var(--s3); }
.chapter h3 { font: italic 600 var(--t-h3)/1.1 var(--serif); margin-bottom: var(--s4); }
.chapter p { color: color-mix(in srgb, var(--ink-night) 86%, transparent); }
.chapter-room { margin: var(--s5) calc(-1 * var(--gutter)) 0; width: calc(100% + 2 * var(--gutter)); max-width: none; }
.chapter-note { font: italic 400 var(--t-small) var(--serif); color: var(--muted-night); padding-top: var(--s5); border-top: 1px solid var(--line-night); max-width: 36rem; }

/* Tablette : la salle à côté du texte plutôt qu'en dessous */
@media (min-width: 640px) and (max-width: 959px) {
  .chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: center; }
  .chapter-room { margin: 0; width: 100%; }
}

/* Ordinateur : texte à gauche, qui reste à hauteur d'œil ; la scène collée à droite */
@media (min-width: 960px) {
  .timeline-body {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
  }
  .chapters { grid-column: 1; grid-row: 1; padding-bottom: 35vh; }
  .chapter { min-height: 100vh; padding-block: 0; border: 0 !important; }
  .chapter + .chapter { border-top: 0; }
  .chapter { padding-top: 20vh; }
  .chapter-text { position: sticky; top: 30vh; padding-block: var(--s5); }
  .chapter-text > * { transition: color 0.5s ease; }
  .chapter:not(.is-active) .chapter-text > * { color: #8592B3; }
  /* Le chapitre dont la salle est à l'écran ; les autres s'effacent */
  .chapter-room { display: none; }
  .stage {
    grid-column: 2; grid-row: 1;
    height: 100vh; padding: var(--s5) var(--gutter) var(--s5) var(--s5);
    background: transparent; transition: none;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s4);
  }
  .hud { justify-self: start; padding: var(--s3) var(--s5); }
  .hud-brand {
    display: flex; align-items: center; gap: var(--s2);
    font: 800 0.6875rem var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lamp);
    padding-right: var(--s4); border-right: 1px solid var(--line-night); align-self: stretch;
  }
  .hud-brand::before { content: ''; width: 6px; height: 6px; background: var(--lamp); }
  .hud-year { height: 1.75rem; }
  .stage-rooms { display: block; position: relative; min-height: 0; }
  .stage-rooms img {
    position: absolute; inset: 0; margin: auto;
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    opacity: 0; transition: opacity 0.7s ease;
    /* Le fond peint autour de chaque salle se fond dans le bleu de la section */
    --fade-x: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    --fade-y: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: var(--fade-x), var(--fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--fade-x), var(--fade-y);
    mask-composite: intersect;
  }
  .stage-rooms img.is-on { opacity: 1; }

  /* Les machines : allumées quand elles sont en vente, barrées une fois retirées */
  .machines {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s2);
    list-style: none; padding: 0; font-family: var(--ui);
  }
  .machines li { border-top: 3px solid var(--line-night); padding-top: var(--s2); color: var(--muted-night); transition: color 0.4s, border-color 0.4s; }
  .machines span { display: block; font: 700 0.75rem/1.2 var(--ui); }
  .machines small { font: 400 0.6875rem var(--ui); color: var(--muted-night); }
  .machines li.is-live { color: var(--ink-night); border-color: var(--lamp); }
  .machines li.is-gone { border-top-style: dotted; }
  .machines li.is-gone span { text-decoration: line-through; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .machines { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline, .stage, .stage-rooms img, .machines li, .chapter-text > * { transition: none; }
}

/* ---------- Page 3 : la une du lendemain ---------- */

.press { padding-block: var(--s9); overflow-x: clip; }
.press-grid { display: grid; gap: var(--s7); }
.press-intro h2 { font: 800 var(--t-h2)/1 var(--serif); letter-spacing: -0.02em; margin-bottom: var(--s5); text-wrap: balance; }
.press-intro p:not(.page-mark) { font-size: var(--t-lead); max-width: 44ch; }

.press-form { display: grid; gap: var(--s5); align-content: start; }
.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field legend { display: block; padding: 0; margin-bottom: var(--s3); color: var(--ink-soft); }
.field input {
  width: 100%; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font: italic 500 1.625rem/1.3 var(--serif); padding: var(--s1) 0 var(--s2);
}
.field input:focus { outline: none; border-bottom-color: var(--press); box-shadow: 0 2px 0 var(--press); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s4);
  border: 1.5px solid var(--ink); font: 600 0.9375rem var(--ui); cursor: pointer;
}
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid var(--press); outline-offset: 2px; }
.chip:hover span { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chip input:checked:hover + span { background: var(--ink); }
.press-form .btn-lamp { justify-self: start; }
.press-note { font: italic 400 var(--t-small)/1.5 var(--serif); color: var(--ink-soft); max-width: 52ch; }
@media (max-width: 479px) {
  .chip span { padding: 0 var(--s3); }
  .press-form .btn-lamp { justify-self: stretch; }
}

.press-result { display: grid; justify-items: center; }
.sheet {
  --mood-ink: #241A10; --mood-accent: #A0522D; --mood-paper: #F1E6CC;
  position: relative; aspect-ratio: 2 / 3;
  /* Assez grand pour être lu, jamais plus haut que l'écran */
  width: min(100%, 28.75rem, (100svh - 5rem) / 1.5);
  container-type: inline-size;
  transform: rotate(-2deg);
  color: var(--mood-ink);
}
/* La seule ombre du site : un journal posé sur la table (elle suit la découpe du papier) */
.sheet-paper { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 22px 18px rgba(36, 26, 16, 0.35)); }
.z { position: absolute; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.z-masthead { font: 800 7.6cqw/1 var(--serif); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.z-edition { font: 800 2.6cqw/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mood-accent); white-space: nowrap; }
.z-headline { font: 800 7.4cqw/1.02 var(--ui); letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.z-photo { border: 2px solid var(--mood-ink); padding: 3px; background: rgba(0, 0, 0, 0.06); }
.z-photo img { width: 100%; height: 100%; object-fit: cover; }
.z-caption { font: italic 400 3cqw/1.1 var(--serif); white-space: nowrap; }
.z-subhead { font: 400 3.6cqw/1.25 var(--serif); text-wrap: balance; }
.stamp {
  position: absolute; width: 20cqw; height: 20cqw; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--mood-paper); color: var(--mood-accent);
  border: 0.8cqw solid var(--mood-accent);
  transform: rotate(-9deg);
}
.stamp::before { content: ''; position: absolute; inset: 0.6cqw; border: 1px solid var(--mood-accent); border-radius: 50%; opacity: 0.6; }
.stamp span { font: 900 2.2cqw/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
.stamp b { font: 800 8cqw/0.95 var(--serif); letter-spacing: -0.03em; }
@media (prefers-reduced-motion: no-preference) {
  .sheet.is-spinning { animation: spin 0.95s cubic-bezier(0.22, 0.61, 0.36, 1); }
}
@keyframes spin {
  from { transform: rotate(720deg) scale(0.08); opacity: 0; }
  25% { opacity: 1; }
  to { transform: rotate(-2deg) scale(1); }
}

/* Tablette : le formulaire et le journal côte à côte */
@media (min-width: 720px) and (max-width: 959px) {
  .press-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6); }
  .press-intro { grid-column: 1 / -1; }
  .press-result { align-self: start; position: sticky; top: var(--s5); }
}
@media (min-width: 960px) {
  .press-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); row-gap: var(--s7); }
  .press-intro { grid-column: 1 / span 6; }
  .press-form { grid-column: 1 / span 5; grid-row: 2; }
  .press-result { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: center; justify-items: end; }
  .sheet { margin-right: calc(-1 * var(--s5)); }
}

/* ---------- Page 4 : le studio vit sa vie ---------- */

.life { padding-block: var(--s9); }
.life-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.life-head h2 { font: 800 var(--t-h2)/1 var(--serif); letter-spacing: -0.02em; }
.life-head p:not(.page-mark) { max-width: 44ch; }

.classifieds { display: grid; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ad { padding: var(--s4) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.ad h3 { font: 700 1.2rem/1.25 var(--serif); margin-bottom: var(--s1); font-variant-caps: all-small-caps; letter-spacing: 0.03em; }
.ad p { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); }
.ad--boxed { background: var(--paper); outline: 2px solid var(--ink); outline-offset: -2px; padding: var(--s4); margin: var(--s3) 0; transform: rotate(-0.8deg); }
.ad--boxed h3 { color: var(--press); }

.life-bottom { display: grid; gap: var(--s7); margin-top: var(--s8); }
.standings h3, .briefs h3 { font: 800 var(--t-h3)/1.1 var(--serif); margin-bottom: var(--s4); }
.standings table { width: 100%; font-size: 0.9375rem; }
.standings th, .standings td { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 45%, transparent); vertical-align: baseline; }
.standings thead th { font: 700 var(--t-label) var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.standings tbody th { font-weight: 700; }
.standings td:nth-child(2) { font-variant-numeric: tabular-nums; }
.standings .you th, .standings .you td { background: color-mix(in srgb, var(--lamp) 45%, transparent); font-style: italic; }
.standings .you th { padding-left: var(--s2); }
.standings-note { margin-top: var(--s3); font: italic 400 var(--t-small) var(--serif); color: var(--ink-soft); }
.briefs p + p { margin-top: var(--s4); }
.briefs b { font-variant-caps: all-small-caps; letter-spacing: 0.04em; font-size: 1.1em; }
.briefs-fine { font: italic 400 var(--t-small) var(--serif); color: var(--ink-soft); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
@media (max-width: 429px) {
  /* Le classement tient sur les plus petits écrans : les spécialités passent sous le nom */
  .standings table, .standings thead, .standings tbody { display: block; width: 100%; }
  .standings thead th:nth-child(3) { display: none; }
  .standings thead tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 2px solid var(--ink); }
  .standings thead th { border: 0; padding-right: 0; }
  .standings tbody td:nth-child(2) { text-align: right; padding-right: 0; }
  .standings .you th, .standings .you td { background: none; }
  .standings tbody tr.you { background: color-mix(in srgb, var(--lamp) 45%, transparent); padding-inline: var(--s2); }
  .standings tbody tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 45%, transparent); padding-block: var(--s2); }
  .standings tbody th, .standings tbody td { border: 0; padding-block: 0; }
  .standings tbody td:nth-child(3) { grid-column: 1 / -1; color: var(--ink-soft); }
}

@media (min-width: 640px) {
  .classifieds { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
}
@media (min-width: 960px) {
  .life-head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--s7); }
  .life-head .page-mark { grid-column: 1 / -1; margin-bottom: 0; }
  .classifieds { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .ad { padding: var(--s5); border-bottom: 0; border-left: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
  .ad:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .ad:nth-child(-n + 4) { border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
  .ad--boxed { margin: var(--s3); padding: var(--s4); border-left: 0; }
  .ad--boxed + .ad { border-left: 0; }
  .life-bottom { grid-template-columns: 7fr 5fr; column-gap: var(--s8); }
  .briefs { border-left: 1px solid var(--ink); padding-left: var(--s6); }
}

/* ---------- Page 5 : ce qu'on ne te vendra pas ---------- */

.fair { background: var(--night-deep); padding-block: var(--s9); }
.nots { list-style: none; padding: 0; font: italic 600 clamp(2rem, 1.2rem + 4.4vw, 5rem)/1.04 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.nots li:nth-child(2n) { color: var(--lamp); }
@media (min-width: 960px) {
  .nots li:nth-child(2) { margin-left: 8%; }
  .nots li:nth-child(3) { margin-left: 16%; }
  .nots li:nth-child(4) { margin-left: 24%; }
}

.fair-grid { display: grid; gap: var(--s8); margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--line-night); }
.fair-text p { max-width: 46ch; color: color-mix(in srgb, var(--ink-night) 86%, transparent); }
.fair-text p + p { margin-top: var(--s4); }
.fair-lead { font-size: var(--t-lead); color: var(--ink-night) !important; }
.fair a { color: var(--lamp); }
.fair-fine { font: 400 var(--t-label) var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-night) !important; }

.legends h3 { font: italic 600 var(--t-h3)/1.1 var(--serif); margin-bottom: var(--s4); }
.legends > p { color: color-mix(in srgb, var(--ink-night) 86%, transparent); max-width: 56ch; }
.duel { width: 100%; margin-top: var(--s5); font: 400 0.9375rem/1.3 var(--ui); }
.duel thead { display: none; }
.duel tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line-night); }
.duel th[scope="row"] { grid-column: 1 / -1; font-weight: 700; text-align: left; }
.legend-name { display: flex; align-items: center; gap: var(--s3); }
.duel img { width: 2.5rem; height: 2.5rem; image-rendering: pixelated; }
.duel td::before { content: attr(data-label) ' '; color: var(--muted-night); }
.duel-note { margin-top: var(--s3); font: italic 400 var(--t-small) var(--serif); color: var(--muted-night); }
@media (min-width: 640px) {
  .duel thead { display: table-header-group; }
  .duel tr { display: table-row; }
  .duel th, .duel td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line-night); text-align: left; }
  .duel thead th { font: 700 var(--t-label) var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-night); }
  .duel td::before { content: none; }
  .duel td:nth-child(n + 4) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lamp); }
  .duel thead th:nth-child(n + 4) { text-align: right; }
}
@media (min-width: 960px) {
  .fair-grid { grid-template-columns: 5fr 7fr; column-gap: var(--s8); }
}

/* ---------- Page 6 : la sortie — la nuit du studio d'un côté, la lampe de l'autre ---------- */

.launch { background: var(--lamp); color: var(--ink); overflow: clip; }
.launch-grid { display: grid; padding-inline: 0; }
.launch-night { background: var(--night); display: grid; place-items: center; padding: var(--s7) var(--gutter); }
.launch-emblem { width: min(80%, 23.75rem); }
.launch-text { padding: var(--s7) var(--gutter) var(--s8); }
.launch h2 { font: italic 800 var(--t-h2)/1 var(--serif); letter-spacing: -0.02em; margin-bottom: var(--s5); }
.launch .release { border-top-color: var(--ink); margin-top: 0; }
.launch .btn-lamp { background: var(--night); color: var(--ink-night); box-shadow: inset 0 -5px 0 #0B1122; }
.launch .btn-lamp:hover { background: #22305A; }
.launch .btn-lamp:active { box-shadow: inset 0 -2px 0 #0B1122; }
.launch .btn-lamp:focus-visible { box-shadow: inset 0 -5px 0 #0B1122, inset 0 0 0 3px var(--lamp); }
.launch .release-dot { background: var(--ink); }
.launch .release-fine { color: var(--ink); }
@media (min-width: 640px) {
  .launch .release { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s5); }
  .launch .release-status { grid-column: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .launch-grid { grid-template-columns: 2fr 3fr; max-width: none; }
  .launch-night { padding: var(--s7) var(--s5) var(--s7) var(--gutter); }
  .launch-text { align-self: center; padding: var(--s7) var(--gutter) var(--s7) var(--s6); }
  .launch .release { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .launch-grid { grid-template-columns: 5fr 7fr; align-items: stretch; max-width: none; }
  /* Le panneau de nuit part du bord gauche de l'écran */
  .launch-night { padding: var(--s8) var(--s7) var(--s8) max(var(--gutter), (100% - var(--wrap)) / 2); }
  .launch-text { align-self: center; padding: var(--s8) max(var(--gutter), (100% - var(--wrap)) / 2) var(--s8) var(--s8); }
}

/* ---------- Pages d'information (support, confidentialité, mentions) ---------- */

.doc { padding-block: var(--s8) var(--s9); }
.doc-head { border-bottom: 4px solid var(--ink); box-shadow: 0 3px 0 var(--paper), 0 4px 0 var(--ink); padding-bottom: var(--s5); margin-bottom: var(--s7); }
.doc-head h1 { font: 800 var(--t-h2)/1 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.doc-head p:not(.page-mark) { margin-top: var(--s4); max-width: 52ch; font-size: var(--t-lead); }
.doc-body { display: grid; gap: var(--s7); }
.doc-body section { max-width: 68ch; }
.doc-body h2 { font: 800 var(--t-h3)/1.15 var(--serif); margin-bottom: var(--s3); }
.doc-body h3 { font: 700 1.125rem/1.3 var(--serif); margin: var(--s4) 0 var(--s1); }
.doc-body p + p, .doc-body ul + p, .doc-body p + ul { margin-top: var(--s3); }
.doc-body ul { padding-left: 1.2em; }
.doc-body li + li { margin-top: var(--s2); }
.doc-body dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); }
.doc-body dt { font: 700 var(--t-label)/1.9 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.doc-body dd { margin: 0; }
.doc-body a { overflow-wrap: anywhere; }
.doc-aside { font: italic 400 var(--t-small) var(--serif); color: var(--ink-soft); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.doc-contact { display: grid; gap: var(--s3); justify-items: start; padding: var(--s5); outline: 2px solid var(--ink); outline-offset: -2px; background: var(--paper-deep); }
.doc-contact p { font-size: var(--t-lead); }
@media (max-width: 479px) {
  .doc-body dl { grid-template-columns: 1fr; gap: 0; }
  .doc-body dd + dt { margin-top: var(--s3); }
}
@media (min-width: 960px) {
  .doc-layout { display: grid; grid-template-columns: 3fr 9fr; column-gap: var(--s7); }
  .doc-toc { position: sticky; top: var(--s5); align-self: start; font: 600 var(--t-small)/1.4 var(--ui); }
  .doc-toc ol { list-style: none; padding: 0; display: grid; gap: var(--s2); }
  .doc-toc a { text-decoration: none; display: block; padding-block: var(--s1); }
  .doc-toc a:hover { text-decoration: underline; }
}
@media (max-width: 959px) { .doc-toc { display: none; } }