/* ==========================================================================
   Tideblocks — feuille de style du site de présentation.

   Règles de direction artistique, alignées sur SPEC §7 (pixel art 16-bit) :
     - AUCUN dégradé lisse, AUCUN angle arrondi, AUCUNE ombre floue ;
     - tout ce qui « fond » le fait par damier, dessiné au canvas par le
       moteur du jeu (site.js) — jamais par CSS ;
     - les cadres sont des liserés durs de 1 pixel logique : noir, clair, noir,
       exactement comme les boîtes de dialogue du jeu ;
     - les boutons sont des blocs carrés sable à tranche ombrée, et s'enfoncent
       d'un pixel quand on appuie ;
     - la font bitmap 8×8 du jeu sert aux titres et aux libellés (canvas), une
       police système lisible au corps de texte.

   Zéro ressource externe : pas de CDN, pas de police téléchargée, pas de
   traqueur. Les deux seuls « assets » CSS sont des SVG data-URI en pixels
   (puce ▶ et losange des badges), rendus en shape-rendering="crispEdges".
   ========================================================================== */

:root {
  /* Palette maîtresse (SPEC §7) */
  --ink: #101018;
  --paper: #f0f0e8;
  --gold: #f8d820;
  --sand: #e8c878;
  --sand-dark: #c89858;
  --water: #2e5fd9;
  --deep: #0a2a66;
  --foam: #7fd4f0;
  --rock: #6a6e75;
  --rock-dark: #4a4e55;

  /* Texte des panneaux : bleu très clair, contraste élevé sur #0A2A66. */
  --panel-text: #cfe2fb;

  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  /* Épaisseur d'un « pixel logique » d'interface : celle des liserés. */
  --r: 3px;
  --shell: 64rem;
}

@media (max-width: 640px) {
  :root { --r: 2px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  font-family: var(--sans);
  line-height: 1.6;
  color: var(--paper);
  background: var(--ink);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a { color: var(--foam); }

:focus-visible {
  outline: var(--r) solid var(--gold);
  outline-offset: var(--r);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
  /* Élément flex dans .hero : sans min-width:0, il refuserait de rétrécir
     sous la largeur de son contenu et s'élargirait pour contenir les canvas
     de texte bitmap — la mise en page suivante mesurerait alors trop large. */
  min-width: 0;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bloc de mesure des canvas de texte bitmap : pleine largeur, sans style
   propre — site.js y lit la place disponible pour choisir un facteur
   d'agrandissement ENTIER. */
.px { display: block; min-width: 0; }

/* Garde-fou : même si le calcul d'échelle se trompait, un titre bitmap ne
   peut pas casser la mise en page ni déborder de l'écran. */
canvas[data-pixel] { max-width: 100%; }

/* --------------------------------------------------------------------------
   HUD — la barre du haut du jeu : fond encre, filet doré, texte bitmap.
   -------------------------------------------------------------------------- */
.hud {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink);
  border-bottom: var(--r) solid var(--gold);
}

.hud-in {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hud-brand canvas { height: auto; }

/* --------------------------------------------------------------------------
   Décors : chaque section porte le ciel d'un monde, dessiné par le moteur du
   jeu dans un canvas de fond. Le contenu passe au-dessus.
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
}

.scene > .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.scene > .shell { position: relative; z-index: 1; }

/* Séparateur : la ligne de marée entre deux mondes (canvas, jamais un <hr>). */
.tideline {
  width: 100%;
  height: clamp(56px, 8vw, 104px);
  /* Le canvas est un bloc plein cadre : pas de marge, la couture est invisible
     car il reprend la dernière bande de ciel du monde du dessus et la première
     du monde du dessous. */
  margin: 0;
}

/* --------------------------------------------------------------------------
   Écran d'attract
   -------------------------------------------------------------------------- */
.hero {
  min-height: clamp(430px, 82svh, 820px);
  display: flex;
  align-items: flex-start;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 0;
}

.hero-in { text-align: center; }

/* Bloc vide qui marque le BAS du contenu du héros. site.js lit son bord haut
   pour poser la ligne d'eau du décor juste en dessous, et lui donne pour
   hauteur la bande de mer à dessiner : la section grandit d'autant, donc la
   mer a toujours sa place SOUS le texte, à toutes les tailles d'écran.
   La hauteur est posée en ligne par site.js car elle vaut un nombre entier de
   pixels logiques du décor, une unité que le CSS ne connaît pas. Sans script,
   il n'y a pas de décor à caler : la réserve reste donc à zéro. */
#hero-anchor { height: 0; }

.logo canvas,
.tagline canvas { margin-inline: auto; }

.tagline { margin-top: clamp(1rem, 2.6vw, 1.6rem); }
.tagline .px + .px { margin-top: calc(var(--r) * 2); }

.cta { margin-top: clamp(1.4rem, 4vw, 2.2rem); }

/* Simple texte encre, sans pastille.
   La note tombait autrefois tantôt dans le ciel tantôt sur la mer, faute d'un
   horizon calé sous le texte : elle portait donc une pastille claire opaque
   pour rester lisible partout. site.js réserve désormais la bande d'eau sous le
   contenu du héros (#hero-anchor), la note est franchement dans le ciel à tous
   les formats, et le ciel du Matin est clair de bout en bout : sa bande la plus
   sombre (#6FC4E8) laisse encore un contraste de 11:1 avec l'encre. La pastille
   n'a plus d'objet.

   Reste UN obstacle dans le ciel : le phare. Il occupe la colonne de droite du
   décor sur 30 pixels logiques et monte 66 px au-dessus de la ligne d'eau,
   donc jusque derrière la note. On borne la largeur de la note pour qu'elle
   tienne dans la bande centrale du décor, hors de l'aplomb du phare :
     - 100vw - 152px vaut sur écran étroit, où le décor est dessiné à son grain
       minimal (2 px CSS par pixel logique, le phare fait alors 68 px de large,
       soit près d'un cinquième de l'écran) ;
     - 70vw vaut au-delà, où le grain suit la largeur : le phare occupe environ
       13 % du décor, à retirer de chaque côté d'une note centrée ;
     - 64rem est la largeur du bloc de texte, jamais dépassée.
   Le corps du texte reste celui de la version à pastille : la taille d'origine
   (12,5 px) était trop petite pour être lue confortablement. */
.cta-note {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  margin-inline: auto;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--ink);
  max-width: min(64rem, 100vw - 152px, 70vw);
}

@media (min-width: 700px) {
  .cta-note { font-size: 1.02rem; }
}

/* --------------------------------------------------------------------------
   Boutons pixel — bloc carré sable, contour encre, tranche ombrée.
   Appuyé : la face descend d'un pixel et la tranche disparaît (comme ui.js).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  color: var(--ink);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border: 0;
  box-shadow:
    0 0 0 var(--r) var(--ink),
    0 calc(var(--r) * 2) 0 0 var(--sand-dark),
    0 calc(var(--r) * 2) 0 var(--r) var(--ink);
  transition: none;
}

.btn-lg { padding: 0.9rem 1.9rem; }
.btn-sm { padding: 0.35rem 0.7rem; }

.btn:hover { background: #f4dc98; }

.btn:active {
  transform: translateY(var(--r));
  box-shadow:
    0 0 0 var(--r) var(--ink),
    0 var(--r) 0 0 var(--sand-dark),
    0 var(--r) 0 var(--r) var(--ink);
}

.cta { line-height: 0; }
.cta .btn { margin-bottom: calc(var(--r) * 2); }

/* --------------------------------------------------------------------------
   Titres de section — font bitmap 8×8 du jeu, dans un canvas.
   -------------------------------------------------------------------------- */
.head { margin-bottom: clamp(1.25rem, 3.5vw, 2rem); font-weight: normal; }

.lede {
  max-width: 38rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1rem, 2.4vw, 1.1rem);
}

/* Sur les mondes clairs (Lagune, Banquise), le texte hors panneau passe en
   encre : c'est la règle du jeu, du noir sur les fonds pâles. */
.scene[data-world="5"] .lede,
.scene[data-world="7"] .lede { color: var(--ink); }

/* --------------------------------------------------------------------------
   Panneau façon boîte de dialogue RPG : liseré noir / clair / noir, fond eau
   profonde. Aucun rayon, aucune ombre floue.
   -------------------------------------------------------------------------- */
.panel {
  background: var(--deep);
  color: var(--panel-text);
  border: var(--r) solid var(--paper);
  box-shadow:
    inset 0 0 0 var(--r) var(--ink),
    0 0 0 var(--r) var(--ink);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

.panel p + p { margin-top: 0.85rem; }
.panel b, .panel strong { color: var(--paper); }

.step-title { margin-bottom: 0.7rem; }

.fine { font-size: 0.85rem; color: #9ab6dd; }

/* --------------------------------------------------------------------------
   Cadres d'écran : mêmes liserés que les panneaux, autour d'un canvas ou
   d'une capture. Le cadre est DESSINÉ (traits durs), pas une bordure douce.
   -------------------------------------------------------------------------- */
.screen { margin: 0; }

.screen canvas {
  width: 100%;
  height: auto;
  border: var(--r) solid var(--paper);
  box-shadow:
    inset 0 0 0 var(--r) var(--ink),
    0 0 0 var(--r) var(--ink);
  background: var(--ink);
}

canvas[data-scene="board"] { aspect-ratio: 16 / 11; }
canvas[data-scene="gauge"] { aspect-ratio: 16 / 5; }
canvas[data-scene="world"] { aspect-ratio: 4 / 5; }

/* La jauge dessine DÉJÀ son cadre RPG : pas de second cadre en CSS. */
.screen canvas[data-scene="gauge"] {
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* Plaque de légende : bandeau encre collé sous le cadre, comme le HUD du jeu.
   Toujours lisible, quel que soit le ciel du monde derrière. */
.screen figcaption {
  margin-top: calc(var(--r) * 3);
  background: var(--ink);
  padding: 0.4rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foam);
}

/* --------------------------------------------------------------------------
   §2 — le jeu : panneau + mini-plateau côte à côte
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 760px) {
  .duo { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   §3 — comment on joue : illustration / panneau, en alternance.
   Pas de cartes numérotées : trois scènes du jeu, chacune avec son texte.
   -------------------------------------------------------------------------- */
.steps { list-style: none; display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }

.step {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 760px) {
  .step { grid-template-columns: 1fr 1fr; }
  .step:nth-child(even) .screen { order: 2; }
}

/* --------------------------------------------------------------------------
   §4 — en images : pellicule pleine largeur, perforations comprises.
   -------------------------------------------------------------------------- */
.reel {
  position: relative;
  z-index: 1;
  background-color: var(--ink);
  /* Perforations : deux bandes de carrés durs (arrêts nets = pixels francs). */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 11px, var(--rock-dark) 11px 22px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--rock-dark) 11px 22px);
  background-size: 100% 8px, 100% 8px;
  background-position: 0 8px, 0 calc(100% - 8px);
  background-repeat: repeat-x, repeat-x;
  padding-block: 26px;
  border-block: var(--r) solid var(--gold);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.shots {
  list-style: none;
  display: flex;
  gap: 14px;
  width: max-content;
  padding-inline: max(1.25rem, calc(50vw - (var(--shell) / 2) + 1.25rem));
}

.shots figure { margin: 0; }

.shots img {
  width: clamp(112px, 24vw, 158px);
  height: auto;
  border: var(--r) solid var(--paper);
  box-shadow:
    inset 0 0 0 var(--r) var(--ink),
    0 0 0 var(--r) var(--ink);
  background: var(--deep);
}

.shots figcaption {
  margin-top: calc(var(--r) * 3);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--foam);
  text-align: center;
}

/* --------------------------------------------------------------------------
   §5 — les 8 mondes : huit vignettes rendues par le moteur du jeu.
   -------------------------------------------------------------------------- */
.worlds {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.1rem);
}

@media (min-width: 620px) { .worlds { grid-template-columns: repeat(4, 1fr); } }

.worlds > li > canvas {
  width: 100%;
  height: auto;
  border: var(--r) solid var(--paper);
  border-bottom: 0;
  box-shadow:
    inset 0 0 0 var(--r) var(--ink),
    0 0 0 var(--r) var(--ink);
  background: var(--ink);
}

/* Plaque de nom, sous la vignette : bandeau encre façon HUD. Le nom est un
   canvas de font bitmap dont l'échelle s'ajuste à la largeur de la case —
   « CRÉPUSCULE » ne peut donc jamais déborder, même sur téléphone. */
.wname {
  display: block;
  background: var(--ink);
  border: var(--r) solid var(--paper);
  border-top: 0;
  box-shadow: 0 0 0 var(--r) var(--ink);
  padding-block: 0.4rem;
}

.wname canvas { margin-inline: auto; }

/* --------------------------------------------------------------------------
   §6 — ce qui est dedans : liste à puce ▶ (le glyphe de la font du jeu).
   -------------------------------------------------------------------------- */
.features { list-style: none; display: grid; gap: 0.9rem; }

@media (min-width: 700px) {
  .features { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.75rem; }
}

.features li {
  padding-left: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%228%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23F8D820%22%3E%3Crect%20y%3D%220%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%221%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%222%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%223%22%20width%3D%227%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%224%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 0 0.42em;
  background-size: 12px 12px;
}

.features b {
  display: block;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.features span { font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   §7 — badges boutiques, inactifs tant que les fiches ne sont pas publiées.
   Aucun logo de marque n'est reproduit : un losange pixel neutre.
   -------------------------------------------------------------------------- */
.stores {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-block: 1.25rem;
}

.badge {
  flex: 1 1 14rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 1rem;
  background: #072047;
  box-shadow: inset 0 0 0 var(--r) var(--rock-dark);
  font-family: var(--mono);
}

.badge .mark {
  grid-row: 1 / 3;
  width: 26px; height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%228%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%236A6E75%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%228%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 26px 26px;
}

.badge .who { font-size: 0.9rem; letter-spacing: 0.05em; color: var(--paper); }

.badge .when {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   §8 — dernier appel
   -------------------------------------------------------------------------- */
.outro { text-align: center; }
.outro .head canvas { margin-inline: auto; }
.outro .lede { margin-inline: auto; font-size: clamp(1.05rem, 3vw, 1.35rem); }

/* --------------------------------------------------------------------------
   Pied de page — encre pleine, filet doré : le fond du coffret.
   -------------------------------------------------------------------------- */
footer {
  background: var(--ink);
  border-top: var(--r) solid var(--gold);
  padding-block: 2.5rem;
  font-size: 0.85rem;
  color: #8ea6c6;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  letter-spacing: 0.05em;
}

footer .icon {
  width: 48px; height: 48px;
  image-rendering: pixelated;
  margin-bottom: 1rem;
}

footer p + p { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   Animations réduites : le compteur de frames est figé côté site.js, il ne
   reste rien à neutraliser ici sauf le défilement doux.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
}

/* ==========================================================================
   Pages de document (politique de confidentialité) — générées par
   tools/build-web.mjs, mêmes cadres et mêmes couleurs.
   ========================================================================== */
.doc {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2rem, 7vw, 3.5rem) 1.25rem 4rem;
}

.doc h1 {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.doc h2, .doc h3, .doc h4 {
  font-family: var(--mono);
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.doc p, .doc li { margin-bottom: 0.8rem; }
.doc ul { padding-left: 1.4rem; }
.doc strong { color: var(--paper); }

.doc code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--deep);
  padding: 0.1em 0.35em;
}

.doc hr {
  border: 0;
  border-top: var(--r) solid var(--rock-dark);
  margin-block: 2rem;
}

.doc-nav {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-bottom: 2rem;
}