/* =========================================================================
   MOSTRO — KIT ZINE
   La direction « Punk Zine · Brand V3 » de Mostro, traduite en CSS pour nos
   maquettes. Les noms reprennent ceux de leur Figma (variables zine/*,
   composants zine/*) pour qu'on puisse tout reporter dans Figma ensuite.
   Couleurs relevées sur la capture du moodboard : à confirmer dans le Figma.
   ========================================================================= */

/* ---------- 0. Les polices, servies par le site ---------- */
/* Les fichiers viennent de Google Fonts, copiés tels quels dans externes/polices/ (origine et
   licences : externes/PROVENANCE.md) : le navigateur ne contacte plus Google. Chaque police est
   coupée en sous-ensembles (unicode-range) : on ne télécharge que celui des lettres affichées.
   Chaque adresse s'écrit entre guillemets droits, juste après url(, et commence par ../externes/ :
   c'est cette forme exacte que outils/traduire.mjs réécrit pour en/kit/zine.css (un dossier plus bas). */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../externes/polices/anton-v27-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../externes/polices/anton-v27-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../externes/polices/permanent-marker-v16-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../externes/polices/poppins-v24-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../externes/polices/poppins-v24-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../externes/polices/poppins-v24-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../externes/polices/poppins-v24-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../externes/polices/poppins-v24-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../externes/polices/poppins-v24-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../externes/polices/special-elite-v20-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../externes/polices/special-elite-v20-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Les boutons du coin des jeux (le haut du jeu 1, « Passer l'intro » des jeux 2 et 3) attendent
   Anton : dessinés d'abord dans une autre police, plus large, ils rétrécissaient une image plus tard.
   kit/parcours.js pose la classe anton-pret dès que la police est là (quelques millisecondes depuis
   le cache) ; sans script ou si la police n'arrive pas, ils s'affichent quand même au bout de 2,5 s */
.commandes, #passer { visibility: hidden; animation: anton-ou-pas 0s 2.5s forwards; }
.anton-pret .commandes, .anton-pret #passer { visibility: visible; animation: none; }
@keyframes anton-ou-pas { to { visibility: visible; } }

/* ---------- 1. Jetons : la collection « B · Punk Zine » ---------- */

:root {
  /* Fonds. Jamais de #000 ni de #FFF purs */
  --zine-ink: #0A090F;      /* fond des pages sombres, texte posé sur un accent */
  --zine-asphalt: #1D1C21;  /* cartes et panneaux sur fond sombre */
  --zine-paper: #E8E6DF;    /* moments clairs : tickets, reçus, listes */
  --zine-cream: #F3EFE8;    /* texte sur fond sombre, papier déchiré */

  /* Accents : un seul qui crie par écran. Lime mène, pink répond, orange pimente */
  --zine-lime: #C9FF4A;
  --zine-pink: #FE3DA0;
  --zine-orange: #F87617;

  /* Utilitaires */
  --zine-concrete: #93939D; /* emplacements photo, texte discret */
  --zine-ruling: #9FBCDA;   /* lignes de cahier et papier millimétré, déco seulement */
  --zine-mo-blue: #4FA6DC;  /* réservé à Mo */

  /* Les trois voix, plus Poppins pour l'interface dense */
  --font-shout: "Anton", Impact, sans-serif;
  --font-type: "Special Elite", "Courier New", monospace;
  --font-hand: "Permanent Marker", "Marker Felt", cursive;
  --font-ui: "Poppins", system-ui, sans-serif;

  /* Styles de texte Zine/*. Les grandes tailles rétrécissent sur téléphone */
  --size-display-xl: clamp(64px, 11vw, 120px);
  --size-display-l: clamp(42px, 6.5vw, 64px);
  --size-headline: clamp(26px, 3.4vw, 32px);
  --size-hand: clamp(22px, 3vw, 34px);
  --size-body: 18px;
  --size-meta: 13px;

  --ink-outline: 3.5px; /* contour des stickers et des icônes */
}


/* ---------- 2. Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--zine-ink);
  color: var(--zine-cream);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

::selection {
  background: var(--zine-lime);
  color: var(--zine-ink);
}

/* Texte lu par les lecteurs d'écran mais invisible à l'œil */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Règle du collage : rien n'est parfaitement droit (de -3° à 3°) */
.tilt {
  rotate: var(--r, -1.5deg);
}


/* ---------- 3. Les trois voix ---------- */

/* Le cri : Anton, toujours en capitales, interligne de 0,9 à 0,95 */
.shout {
  margin: 0;
  font-family: var(--font-shout);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.shout--xl { font-size: var(--size-display-xl); }
.shout--l { font-size: var(--size-display-l); }
.shout--h { font-size: var(--size-headline); line-height: .95; }

/* La machine à écrire : phrases courtes, 3 lignes au maximum */
.type {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-type);
  font-size: var(--size-body);
  line-height: 1.45;
}
.meta {
  margin: 0;
  font-family: var(--font-type);
  font-size: var(--size-meta);
  letter-spacing: .02em;
  color: var(--zine-concrete);
}

/* La main : une seule note d'une ligne par écran, en lime ou en pink, sur fond sombre */
.hand {
  margin: 0;
  font-family: var(--font-hand);
  font-size: var(--size-hand);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--zine-lime);
}
.hand--pink { color: var(--zine-pink); }

/* Le mot surligné d'un titre (zine/highlight) : bloc d'accent, texte toujours en ink */
.hl {
  display: inline-block;
  padding: .03em .12em 0;
  background: var(--zine-pink);
  color: var(--zine-ink);
  rotate: var(--r, -1.5deg);
}
.hl--lime { background: var(--zine-lime); }
.hl--orange { background: var(--zine-orange); }


/* ---------- 4. Textures (zine/texture/*) ---------- */

/* Grille de points sur asphalt : le fond des cartes sombres */
.dot-grid {
  background-color: var(--zine-asphalt);
  background-image: radial-gradient(circle, rgb(243 239 232 / .14) 1.2px, transparent 1.7px);
  background-size: 14px 14px;
}

/* La même sur papier clair */
.dot-grid--light {
  background-color: var(--zine-paper);
  background-image: radial-gradient(circle, rgb(10 9 15 / .22) 1.2px, transparent 1.7px);
}

/* Papier millimétré : un grand carreau tous les cinq petits */
.graph-paper {
  background-color: var(--zine-cream);
  background-image:
    linear-gradient(rgb(159 188 218 / .9) 1px, transparent 1px),
    linear-gradient(90deg, rgb(159 188 218 / .9) 1px, transparent 1px),
    linear-gradient(rgb(159 188 218 / .4) 1px, transparent 1px),
    linear-gradient(90deg, rgb(159 188 218 / .4) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}

/* Feuille de cahier : lignes bleues tous les 28 px, marge rose, trois trous */
.notebook {
  background-color: var(--zine-cream);
  background-image:
    radial-gradient(circle 7px at 22px 18%, var(--zine-ink) 96%, transparent),
    radial-gradient(circle 7px at 22px 50%, var(--zine-ink) 96%, transparent),
    radial-gradient(circle 7px at 22px 82%, var(--zine-ink) 96%, transparent),
    linear-gradient(90deg, transparent 50px, rgb(254 61 160 / .6) 50px 52px, transparent 52px),
    linear-gradient(transparent 27px, var(--zine-ruling) 27px 28px);
  background-size: auto, auto, auto, auto, 100% 28px;
  color: var(--zine-ink);
  line-height: 28px;
  padding-left: 66px;
}


/* ---------- 5. Papier déchiré (zine/paper/torn-strip-*) ---------- */
/* Le fond est dessiné par ::before et découpé par le polygone que zine.js
   calcule (variable --tear). Le contenu peut donc déborder : scotch, stickers. */

.torn {
  --fill: var(--zine-cream);
  position: relative;
  isolation: isolate; /* garde le ::before derrière le contenu */
  padding: 1em 1.4em;
  color: var(--zine-ink);
  rotate: var(--r, -1deg);
}
.torn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  clip-path: var(--tear, none);
}
.torn--paper { --fill: var(--zine-paper); }
.torn--lime { --fill: var(--zine-lime); }
.torn--pink { --fill: var(--zine-pink); }
.torn--ink { --fill: var(--zine-ink); color: var(--zine-cream); }


/* ---------- 6. Scotch (zine/tape/tape-*) ---------- */
/* Une bande à 70 % d'opacité aux bouts dentelés, posée en travers d'un bord.
   Le parent doit être en position: relative. */

.tape {
  --fill: var(--zine-lime);
  position: absolute;
  z-index: 2;
  width: var(--w, 96px);
  height: 26px;
  background: var(--fill);
  opacity: .7;
  rotate: var(--r, -3deg);
  clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 36%, 100% 54%, 97% 72%, 100% 90%, 98% 100%,
                     2% 100%, 0 82%, 3% 64%, 0 46%, 3% 28%, 0 10%);
  pointer-events: none;
}
.tape--pink { --fill: var(--zine-pink); }
.tape--top { top: -13px; left: 50%; translate: -50% 0; }
.tape--corner { top: -6px; right: -30px; --r: 38deg; }


/* ---------- 7. Stickers ---------- */

/* Étiquette (zine/sticker/label) */
.label {
  --fill: var(--zine-pink);
  display: inline-block;
  padding: .45em .8em .4em;
  font-family: var(--font-type);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zine-ink);
  background: var(--fill);
  border: 2px solid var(--zine-ink);
  rotate: var(--r, -4deg);
}
.label--lime { --fill: var(--zine-lime); }
.label--cream { --fill: var(--zine-cream); }

/* Starburst (zine/sticker/starburst-*) : un seul par écran.
   L'étoile en SVG est ajoutée par zine.js. */
.burst {
  --fill: var(--zine-orange);
  --size: 120px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  aspect-ratio: 1;
  color: var(--zine-ink);
  rotate: var(--r, 10deg);
}
.burst svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.burst polygon {
  fill: var(--fill);
  stroke: var(--zine-ink);
  stroke-width: var(--ink-outline);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* le contour garde 3,5 px quelle que soit la taille */
}
.burst > span {
  position: relative;
  max-width: 70%;
  font-family: var(--font-shout);
  font-size: calc(var(--size) * .22);
  line-height: .9;
  text-align: center;
  text-transform: uppercase;
}
.burst--pink { --fill: var(--zine-pink); }
.burst--lime { --fill: var(--zine-lime); }

/* Lettre de rançon (zine/type/ransom-note) : un seul titre par écran.
   zine.js découpe le texte et donne à chaque lettre son papier (--bg, --fg, --font…). */
.ransom {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .12em .3em; /* entre deux lignes, entre deux mots */
  margin: 0;
  font-size: var(--size-display-l);
  line-height: 1;
}
.ransom__word {
  display: inline-flex;
  gap: .06em;
}
.ransom__word > span {
  display: inline-block;
  padding: .1em .1em .02em;
  font-family: var(--font, var(--font-shout));
  font-size: calc(1em * var(--s, 1));
  text-transform: uppercase;
  color: var(--fg, var(--zine-ink));
  background: var(--bg, var(--zine-cream));
  rotate: var(--r, 0deg);
  translate: 0 var(--y, 0);
}

/* Polaroïd (zine/frame/polaroid) */
.polaroid {
  position: relative;
  display: inline-block;
  width: var(--w, 220px);
  margin: 0;
  padding: 12px 12px 52px;
  background: var(--zine-cream);
  rotate: var(--r, -3deg);
  box-shadow: 0 12px 28px rgb(10 9 15 / .5);
}
.polaroid__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--zine-concrete);
}
.polaroid__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 15px;
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--zine-ink);
}

/* Ticket (zine/ticket) : partie principale + talon perforé, encoches rondes */
.ticket {
  display: inline-grid;
  grid-template-columns: auto auto;
  rotate: var(--r, 3deg);
  filter: drop-shadow(0 10px 18px rgb(10 9 15 / .5));
}
.ticket__main {
  padding: 16px 22px 14px;
  background: var(--zine-pink);
  color: var(--zine-ink);
  -webkit-mask:
    radial-gradient(circle 10px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 10px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.ticket__stub {
  display: grid;
  place-items: center;
  padding: 12px 14px;
  background: var(--zine-cream);
  color: var(--zine-ink);
  border-left: 2px dashed rgb(10 9 15 / .45);
  -webkit-mask:
    radial-gradient(circle 10px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 10px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.ticket__stub span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-family: var(--font-shout);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ticket__title {
  margin: 4px 0 6px;
  font-size: 46px;
}
.ticket .meta { color: var(--zine-ink); }

/* Vinyle (zine/vinyl) : sillons en dégradé répété, étiquette au centre */
.vinyl {
  --size: 180px;
  --label: var(--zine-lime);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--zine-ink) 0 6%, var(--label) 6.5% 34%, transparent 34.5%),
    repeating-radial-gradient(closest-side, var(--zine-asphalt) 0 1.5px, var(--zine-ink) 1.5px 5px);
  box-shadow: 0 0 0 1px rgb(243 239 232 / .1), 0 14px 30px rgb(10 9 15 / .55);
}

/* Mot barré (zine/type/strike-through) : « the label way », l'ancien monde.
   Un vrai barré de texte : il suit les retours à la ligne et passe tel quel dans Figma. */
.strike {
  text-decoration-line: line-through;
  text-decoration-color: var(--zine-pink);
  text-decoration-thickness: .16em;
}

/* Sticker détouré : un bord crème tout autour de la forme (c'est ainsi que Mo
   apparaît). Quatre ombres dures décalées dessinent le bord, la cinquième décolle. */
.sticker {
  filter:
    drop-shadow(3px 0 0 var(--zine-cream))
    drop-shadow(-3px 0 0 var(--zine-cream))
    drop-shadow(0 3px 0 var(--zine-cream))
    drop-shadow(0 -3px 0 var(--zine-cream))
    drop-shadow(0 8px 14px rgb(10 9 15 / .45));
  rotate: var(--r, 6deg);
}

/* Icônes-stickers : la planche est ajoutée par zine.js, on les place avec
   <svg class="icon"><use href="#icon-bolt"/></svg>. La couleur suit « color ». */
.icon {
  flex: none;
  width: var(--size, 64px);
  height: var(--size, 64px);
  overflow: visible;
  color: var(--zine-lime);
}
.icon--pink { color: var(--zine-pink); }
.icon--orange { color: var(--zine-orange); }
.icon--cream { color: var(--zine-cream); }


/* ---------- 8. Interface : toujours droite, jamais déchirée ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 12px 24px 10px;
  font-family: var(--font-shout);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--zine-ink);
  background: var(--zine-lime);
  border: 2px solid var(--zine-lime);
  cursor: pointer;
  transition: translate .15s ease, box-shadow .15s ease;
}
.btn:hover { translate: 0 -2px; box-shadow: 0 4px 0 var(--zine-cream); }
.btn:active { translate: 0 0; box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--zine-cream); outline-offset: 3px; }
.btn--ghost {
  color: var(--zine-cream);
  background: transparent;
  border-color: var(--zine-cream);
}
/* Sur papier clair, le bouton passe en ink : un bouton lime ne se détache pas du papier */
.btn--ink {
  color: var(--zine-cream);
  background: var(--zine-ink);
  border-color: var(--zine-ink);
}
.btn--ink:hover { box-shadow: 0 4px 0 var(--zine-pink); }
.btn--ink:focus-visible { outline-color: var(--zine-ink); }

.field {
  display: grid;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
}
.field input {
  min-height: 48px;
  padding: 12px 14px;
  font: 500 16px/1.2 var(--font-ui);
  color: var(--zine-ink);
  background: var(--zine-cream);
  border: 2px solid var(--zine-ink);
  outline: none;
}
.field input:focus-visible { box-shadow: 0 0 0 3px var(--zine-lime); }

/* Les prix : Poppins et chiffres de même largeur, jamais la machine à écrire */
.price {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.price span {
  font-size: 15px;
  font-weight: 400;
  color: var(--zine-concrete);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- Le bouton de langue FR · EN (kit/langue.js) ---------- */
/* Deux lettres : la langue qu'on lit en crème, soulignée de lime ; l'autre en gris, qui passe au
   lime au survol. Chaque lettre est un vrai lien de 44 px de haut, assez grand pour le doigt.
   Chaque page règle ensuite la taille et la police selon l'endroit où il se pose */
.langue { display: inline-flex; align-items: center; font-family: var(--font-shout); letter-spacing: .04em; text-transform: uppercase; }
/* inline-block plutôt que grille : Safari ne souligne pas le texte d'une grille. Les 44 px de haut
   viennent du remplissage, calculé sur la taille de la lettre (1em) */
.langue a { display: inline-block; min-width: 30px; padding: calc((44px - 1em) / 2) 0; line-height: 1; text-align: center; color: var(--zine-concrete); text-decoration: none; }
/* Le trait en propriétés séparées : Safari refuse l'épaisseur dans le raccourci « text-decoration » */
.langue a[aria-current] { color: var(--zine-cream); text-decoration-line: underline; text-decoration-color: var(--zine-lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.langue a[href]:hover { color: var(--zine-lime); }
.langue a:focus-visible { outline: 2px solid var(--zine-lime); outline-offset: -2px; }
.langue__point { color: var(--zine-concrete); }
.langue__titre { display: none; } /* le mot « Langue » ne se montre que dans le menu du téléphone */

/* ---------- Le bandeau de mesure d'audience (kit/consentement.js) ---------- */
/* Construit seulement quand l'identifiant GA4 est rempli : tant qu'il est vide, rien ici ne sert.
   Grand écran : une petite carte en bas à gauche (les commandes des jeux sont en haut, les
   boutons de l'accueil et de la maison à droite). Téléphone, tablette ou écran bas (paysage) :
   une barre sur toute la largeur, et les boutons posés en bas de page montent au-dessus d'elle
   grâce à --bandeau-cookies-bas. Accepter et Refuser : exactement le même style. */
.bandeau-cookies {
  position: fixed;
  z-index: 1000;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 32px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  font: 400 14px/1.45 var(--font-ui);
  color: var(--zine-cream);
  background: var(--zine-asphalt);
  border: 2px solid var(--zine-cream);
}
.bandeau-cookies__question { flex: 1 1 280px; margin: 0; }
.bandeau-cookies__actions { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bandeau-cookies__bouton { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 14px 8px; font-size: 16px; }
.bandeau-cookies__lien { color: var(--zine-lime); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bandeau-cookies__lien:focus-visible { outline: 2px solid var(--zine-lime); outline-offset: 2px; }
.bandeau-cookies--anime { transition: opacity .2s ease, translate .2s ease; }
.bandeau-cookies--cache { opacity: 0; translate: 0 8px; }
@media (max-width: 1099px), (max-height: 500px) {
  .bandeau-cookies { left: 8px; right: 8px; width: auto; bottom: max(8px, env(safe-area-inset-bottom)); }
  .bandeau-cookies-ouvert { --bandeau-cookies-bas: calc(var(--bandeau-cookies-hauteur, 0px) + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-cookies--anime { transition: none; }
}
/* « Réglages des cookies » : un bouton qui a l'air d'un lien (confidentialité, menu de l'accueil) */
.reglages-cookies { padding: 12px 0; font: inherit; color: var(--zine-lime); background: none; border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }
.reglages-cookies:focus-visible { outline: 2px solid var(--zine-lime); outline-offset: 2px; }