:root {
  --fond: #2242E3;
  --bureau: #1A33B8;
  --point: rgba(255, 255, 255, .15);
  --trait: rgba(255, 255, 255, .62);
  --texte: #FFFFFF;
  --texte-doux: #D5DCFF;
  --blanc: #FFFFFF;
  --papier: #FFFFFF;
  --sur-papier: #15122E;
  --sur-papier-doux: #5B5878;
  --eteint: #1C37C6;
  --eteint-bord: rgba(255, 255, 255, .36);
  --dos: #E6E3F2;
  --encre: #15122E;
  --encre-douce: #5B5878;
  --jaune: #FFD534;
  --rose: #FF8ABB;
  --tomate: #FF5B38;
  --ombre: rgba(8, 14, 84, .46);
  --ombre-levee: rgba(8, 14, 84, .26);
  --ombre-pleine: #080E54;
  --ombre-force: .46;
  --voile: rgba(8, 12, 70, .62);
  /* portées d'ombre : petit sticker, sticker, grand sticker */
  --p1: 2px;
  --p2: 3px;
  --p3: 4px;

  /* Titres et chiffres : la police du logo (italique très grasse, façon plateau de jeu), pas une police de maternelle. */
  --police-titre: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --police-texte: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, "Segoe UI", sans-serif;
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
}
/* La nuit n'est pas le jour repeint : la page est profonde, les ombres sont pleines et plus longues
   (sinon rien ne décolle du bleu nuit), le papier neutre devient bleu nuit cerné de blanc.
   Le blanc franc ne reste qu'à deux endroits : la case pariée et la carte souvenir. */
:root[data-theme="sombre"], :root[data-theme="dark"] {
  --fond: #101648;
  --bureau: #070A26;
  --point: rgba(150, 168, 255, .2);
  --trait: rgba(165, 180, 255, .6);
  --texte: #F3F1FF;
  --texte-doux: #B7C0F4;
  --blanc: #F6F4FF;
  --papier: #2A3176;
  --sur-papier: #F3F1FF;
  --sur-papier-doux: #B7C0F4;
  --eteint: #1A2160;
  --eteint-bord: rgba(165, 180, 255, .34);
  --dos: #D6D3E8;
  --jaune: #FFCE2E;
  --rose: #FF82B6;
  --tomate: #FF5533;
  --ombre: #04061A;
  --ombre-levee: rgba(4, 6, 26, .62);
  --ombre-pleine: #04061A;
  --ombre-force: 1;
  --voile: rgba(2, 4, 20, .76);
  --p1: 3px;
  --p2: 4px;
  --p3: 5px;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bureau);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Ccircle cx='84' cy='84' r='46' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='3' stroke-dasharray='9 9'/%3E%3C/svg%3E");
  color: var(--texte);
  font: 400 16px/1.4 var(--police-texte);
  font-synthesis: none;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
sup { font-size: .62em; line-height: 0; }
ol, ul { list-style: none; }
button {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
[hidden] { display: none !important; }
svg { display: block; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.instantane *, .instantane *::before, .instantane *::after { transition: none !important; }

/* ───────── La planche ───────── */
.planche {
  position: relative;
  display: flex; flex-direction: column;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle, var(--point) 1.1px, transparent 1.7px) 12px 12px / 24px 24px,
    var(--fond);
  overflow: hidden;
  overflow: clip;
}
.ecran { flex: 1; display: flex; flex-direction: column; }

/* ───────── Dessins partagés (lettres-gommettes, cerveau, pictos) ───────── */
.planche-svg { position: absolute; }
/* Pictos : même main que les lettres. Une gommette pleine (.pf), une fente au cutter (.pt). */
.pf { stroke: var(--pe); stroke-width: 2.6; stroke-linejoin: round; }
.pt { fill: none; stroke: var(--pe); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── En-tête ───────── */
.tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
}
.logo { grid-area: logo; line-height: 0; }
.outils { grid-area: outils; display: flex; justify-content: flex-end; }
.compteurs { grid-area: compteurs; display: flex; gap: 8px; justify-content: flex-end; }
.journee { grid-area: journee; }
.edition { grid-area: edition; }
[data-ecran="pari"] .tete {
  grid-template-areas: "logo outils" "logo compteurs" "journee journee" "edition edition";
  grid-template-rows: 44px 1fr auto auto;
}
.planche:not([data-ecran="pari"]) .tete {
  grid-template-areas: "logo outils" "journee compteurs" "edition edition";
  align-items: center;
}
.logo svg { overflow: visible; }
.logo-grand { width: min(58vw, 250px); height: auto; margin: 12px 0 8px -4px; }
.logo-petit { height: 36px; width: auto; margin-left: -4px; }
[data-ecran="pari"] .logo-petit,
.planche:not([data-ecran="pari"]) .logo-grand { display: none; }

.outil {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--texte);
  font: italic 900 22px/1 var(--police-titre);
  transition: scale 120ms var(--sortie);
}
.outil:active { scale: .88; }
.outil svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.outil svg .plein { fill: currentColor; }
#btn-son[aria-pressed="false"] .son-ondes, #btn-son[aria-pressed="true"] .son-coupe { display: none; }
:root:not([data-theme="sombre"]):not([data-theme="dark"]) .ico-soleil, :root[data-theme="sombre"] .ico-lune, :root[data-theme="dark"] .ico-lune { display: none; }

.compteur {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px 0 4px;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc);
  border-radius: 18px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: 600 14px/1 var(--police-texte);
  white-space: nowrap;
}
.compteur b { font: italic 900 18px/1 var(--police-titre); min-width: 1ch; text-align: center; }
.compteur-solde { rotate: 2deg; z-index: 2; }
.compteur-solde b { min-width: 3ch; }
.compteur-serie { rotate: -2deg; padding-left: 8px; }
.jeton-mini { flex: none; width: 24px; }
.jeton-mini svg { width: 100%; height: auto; }
.etoile { width: 20px; height: 20px; }
.etoile path { fill: var(--jaune); stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }
[data-ecran="pari"] .compteurs { flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 8px; }
.planche:not([data-ecran="pari"]) .compteurs { gap: 4px; }
.planche:not([data-ecran="pari"]) .compteur { height: 32px; padding: 0 8px 0 4px; gap: 4px; }
.planche:not([data-ecran="pari"]) .compteur b { font-size: 16px; }
.planche:not([data-ecran="pari"]) .compteur-solde b { min-width: 2.7ch; }
.planche:not([data-ecran="pari"]) .jeton-mini { width: 20px; }
.planche:not([data-ecran="pari"]) .etoile { width: 16px; height: 16px; }
.planche:not([data-ecran="pari"]) .compteur .mot {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.delta {
  position: absolute; left: 4px; top: calc(100% - 8px);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--tomate); color: var(--encre);
  font: italic 900 15px/1 var(--police-titre);
  border: 2px solid var(--blanc);
  box-shadow: 0 var(--p1) 0 var(--ombre);
  rotate: -5deg;
  pointer-events: none;
}
.delta.plus { background: var(--jaune); }

/* ───────── Le jeton ─────────
   Un vrai jeton de jeu, épais : une face rayée, une tranche à encoches dessous.
   Une pile est UN sticker : un seul contour blanc, les jetons montent dedans, un cran par jeton. */
.pile {
  --tj: 60px; --k: 1;
  position: relative; display: block; flex: none;
  width: var(--tj);
  height: calc(var(--tj) * (1 + .1283 * var(--k)));
  border-radius: calc(var(--tj) / 2);
  background: var(--blanc);
  box-shadow: 0 var(--p1) 0 var(--ombre);
}
.pj {
  position: absolute; left: 6%; width: 88%;
  bottom: calc(var(--tj) * (.06 + .1283 * var(--i)));
}
.pj svg { width: 100%; height: auto; }
.pj b {
  position: absolute; left: 0; top: 0;
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  font: italic 900 max(13px, calc(var(--tj) * .27))/1 var(--police-titre);
  color: var(--encre);
}
.j-jaune { --jc: var(--jaune); --jr: var(--blanc); }
.j-rose { --jc: var(--rose); --jr: var(--blanc); }
.j-tomate { --jc: var(--tomate); --jr: var(--blanc); }
.j-encre { --jc: var(--encre); --jr: var(--jaune); }
/* Le jeton noir du tapis porte sa valeur sur une mini-étiquette collée dessus. */
.j-encre .pj b {
  left: 50%; top: calc(var(--tj) * .44);
  width: auto; aspect-ratio: auto;
  display: block;
  translate: -50% -50%; rotate: -5deg;
  padding: 2px 6px 4px;
  background: var(--jaune);
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
}

/* Les 7 énigmes du jour */
.journee { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.pastille { position: relative; }
.rond {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 var(--p1) 0 var(--ombre);
  --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre);
}
.rond svg { width: 70%; height: 70%; }
.pastille:nth-child(1) .rond { rotate: 2deg; }
.pastille:nth-child(3) .rond { rotate: -2deg; }
.pastille[data-etat="perdu"] .rond { background: var(--dos); rotate: 2deg; }
.pastille[data-etat="perdu"] .rond svg { opacity: .42; }
.pastille[data-etat="cours"] .rond { width: 48px; height: 48px; rotate: -3deg; box-shadow: 0 var(--p3) 0 var(--ombre); }
.pastille[data-etat="avenir"] .rond {
  background: none; box-shadow: none;
  border: 2px dashed var(--trait);
  --pa: transparent; --pb: transparent; --pc: transparent; --pw: transparent; --pe: var(--trait);
}
.badge {
  position: absolute; right: -4px; bottom: -4px;
  display: none; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--blanc);
  background: var(--jaune); color: var(--encre);
}
.badge svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pastille[data-etat="gagne"] .badge, .pastille[data-etat="perdu"] .badge { display: grid; }
.pastille[data-etat="perdu"] .badge { background: var(--encre); color: var(--blanc); }
.pastille[data-etat="gagne"] .b-croix, .pastille[data-etat="perdu"] .b-coche { display: none; }
.planche:not([data-ecran="pari"]) .journee { justify-content: flex-start; gap: 4px; margin-top: 0; }
.planche:not([data-ecran="pari"]) .rond { width: 24px; height: 24px; box-shadow: 0 1px 0 var(--ombre); }
.planche:not([data-ecran="pari"]) .pastille[data-etat="cours"] .rond { width: 28px; height: 28px; box-shadow: 0 2px 0 var(--ombre); }
.planche:not([data-ecran="pari"]) .pastille[data-etat="avenir"] .rond { border-width: 1.5px; }
.planche:not([data-ecran="pari"]) .badge { width: 14px; height: 14px; right: -5px; bottom: -5px; border-width: 1.5px; }
.planche:not([data-ecran="pari"]) .badge svg { width: 8px; height: 8px; stroke-width: 5; }

/* L'édition du jour */
.edition { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.planche:not([data-ecran="pari"]) .edition { margin-top: 12px; }
.edition .num { font: italic 900 20px/1 var(--police-titre); white-space: nowrap; }
.edition .rang { margin-left: auto; font-size: 14px; color: var(--texte-doux); white-space: nowrap; }
.theme {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 8px;
  background: var(--rose); color: var(--encre);
  border: 3px solid var(--blanc);
  border-radius: 12px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: 700 15px/1 var(--police-texte);
  white-space: nowrap;
  rotate: -2deg;
  --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre);
}
.theme svg { width: 20px; height: 20px; }

/* ───────── Écran du pari ───────── */
/* L'espace libre se répartit à parts égales au-dessus des trois blocs : de l'air, pas un trou en bas. */
.question { font: 700 20px/1.25 var(--police-texte); margin: auto 0 12px; padding-top: 16px; text-wrap: balance; }
.question .quoi { display: block; font-weight: 400; font-size: 17px; color: var(--texte-doux); }
.question .quoi strong { font-weight: 700; color: var(--texte); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.case {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 72px;
  height: clamp(60px, 9dvh, 80px);
  border: 2px dashed var(--trait);
  border-radius: 16px;
  color: var(--texte);
  transition: scale 130ms var(--sortie), opacity 200ms ease;
}
.case:active { scale: .95; }
.case .chiffre { font: italic 900 42px/1 var(--police-titre); }
.case .multi { font: italic 900 18px/1 var(--police-titre); color: var(--jaune); padding: 4px 0; }
.case[aria-pressed="true"], .case-mini {
  background: var(--blanc);
  border: 2px solid var(--blanc);
  color: var(--encre);
  box-shadow: 0 var(--p2) 0 var(--ombre);
  rotate: -2deg;
  z-index: 1;
}
.case[aria-pressed="true"] .multi, .case-mini .multi {
  color: var(--encre);
  background: var(--jaune);
  padding: 4px 8px;
  border-radius: 8px;
  rotate: 2deg;
}
.case-pile { position: absolute; right: -10px; bottom: -18px; rotate: 2deg; pointer-events: none; }
.case-pile .pile { --tj: 44px; }
.case.verrouillee .chiffre, .case.verrouillee .multi { translate: -8px -2px; }
/* Le ruban du verrou : en travers de la case, d'un bord à l'autre. */
.scotch {
  position: absolute; left: -10px; right: -10px; top: -8px;
  height: 18px;
  background: var(--tomate);
  rotate: -3deg;
  clip-path: polygon(0 0, 4px 25%, 0 50%, 4px 75%, 0 100%, 100% 100%, calc(100% - 4px) 75%, 100% 50%, calc(100% - 4px) 25%, 100% 0);
  display: none;
  pointer-events: none;
}
.case.verrouillee .scotch, .case-mini .scotch { display: block; }
/* Pari collé : tout ce qui n'est pas le pari s'éteint. */
.cases.verrou .case:not([aria-pressed="true"]) { opacity: .35; }

.plateau { display: flex; justify-content: space-between; --tjb: 60px; }
@supports (height: 1dvh) { .plateau { --tjb: clamp(52px, 7.2dvh, 66px); } }
.jeton-btn {
  width: calc(var(--tjb) + 4px); height: calc(var(--tjb) * 1.1283 + 4px);
  display: grid; place-items: center;
  border-radius: calc(var(--tjb) / 2 + 2px);
  transition: opacity 200ms ease;
}
.jeton-btn .pile { --tj: var(--tjb); transition: translate 160ms var(--sortie), rotate 160ms var(--sortie), scale 160ms var(--sortie); }
.jeton-btn:active .pile { scale: .93; }
.jeton-btn[aria-pressed="true"] .pile { translate: 0 -8px; rotate: -5deg; scale: 1.06; box-shadow: 0 calc(var(--p1) + 8px) 0 var(--ombre-levee); }
.jeton-btn:disabled { opacity: .4; }
.plateau.verrou .jeton-btn { opacity: .35; }
.plateau.verrou .jeton-btn[aria-pressed="true"] { opacity: 0; transition: none; }   /* il est parti sur la case */

.enjeu {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 8px;
  margin-top: auto; padding: 16px 0 12px;
  font-size: 16px; line-height: 1.4;
  min-height: 92px;
}
.enjeu strong { font-weight: 700; }
.enjeu mark {
  display: inline-block;
  padding: 0 8px 2px;
  background: var(--jaune); color: var(--encre);
  border: 2px solid var(--blanc);
  border-radius: 10px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: italic 900 22px/1.25 var(--police-titre);
  rotate: -2deg;
  white-space: nowrap;
}
.enjeu .sinon { flex-basis: 100%; font-size: 16px; color: var(--texte-doux); }

/* Le pied : la zone du pouce */
.pied {
  position: sticky; bottom: 0; z-index: 5;
  margin: auto -16px 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--fond);
  border-top: 2px dashed var(--trait);   /* la prédécoupe : en dessous, c'est le talon de la planche */
}
.bouton-principal {
  display: block; width: 100%;
  min-height: 60px; padding: 8px 16px;
  background: var(--jaune); color: var(--encre);
  border: 4px solid var(--blanc);
  border-radius: 20px;
  box-shadow: 0 var(--p3) 0 var(--ombre);
  font: italic 900 22px/1.1 var(--police-titre);
  letter-spacing: 0;
  rotate: 0deg;
  transition: scale 120ms var(--sortie), translate 120ms var(--sortie);
}
.bouton-principal:active { scale: .97; translate: 0 3px; box-shadow: 0 1px 0 var(--ombre); }
.bouton-principal[aria-disabled="true"] {
  background: none; color: var(--texte);
  border: 2px dashed var(--trait);
  box-shadow: none;
  font: 700 18px/1.2 var(--police-texte);
  letter-spacing: 0;
  rotate: 0deg;
}
/* « Collé, c'est collé » : le bouton n'est plus un bouton, c'est un sticker blanc posé de l'autre côté. */
.bouton-principal.colle {
  background: var(--blanc);
  box-shadow: 0 var(--p1) 0 var(--ombre);
  rotate: 1deg;
  pointer-events: none;
}

/* ───────── Écran de jeu ───────── */
/* Le rappel du pari reste collé en haut quand la liste défile. */
.rappel {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 24px;
  margin: 8px -16px 0;
  padding: max(12px, env(safe-area-inset-top)) 16px 16px;
  background: var(--fond);
}
.case-mini {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 8px;
  width: 108px; height: 60px; padding-left: 12px;
  border-radius: 14px;
}
.case-mini .chiffre { font: italic 900 34px/1 var(--police-titre); }
.case-mini .multi { font: italic 900 15px/1 var(--police-titre); translate: 0 -8px; }
.case-mini .scotch { left: -8px; right: -8px; top: -8px; height: 16px; }
.case-mini .case-pile { right: -12px; bottom: -14px; transition: opacity 260ms ease, translate 320ms var(--sortie), rotate 320ms var(--sortie); }
.case-mini .pile { --tj: 40px; }
.tampon {
  position: absolute; right: -16px; bottom: -12px;
  rotate: -5deg;
  padding: 4px 8px;
  background: var(--tomate); color: var(--encre);
  border: 3px solid var(--blanc);
  border-radius: 10px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: italic 900 16px/1 var(--police-titre);
  white-space: nowrap;
  display: none;
}
[data-perdu="true"] .tampon { display: block; }
[data-perdu="true"] .case-pile { opacity: 0; translate: 8px 24px; rotate: 5deg; }
.rappel-reste { font: italic 900 24px/1.1 var(--police-titre); letter-spacing: .01em; }
.rappel-pari { margin-top: 4px; font-size: 15px; line-height: 1.3; color: var(--texte-doux); }
.rappel-pari b { font-weight: 700; color: var(--texte); white-space: nowrap; }

.indices { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-bottom: 24px; }
.indice { --he: 48px; position: relative; min-height: var(--he); scroll-margin: 104px 0 200px; }
.indice-texte {
  display: none;
  position: relative;
  padding: 2px 0 2px 40px;
  font-size: 18px; line-height: 1.34;
  color: var(--texte-doux);
}
.indice[data-etat="devoile"] { min-height: 0; }
.indice[data-etat="devoile"] .indice-texte { display: block; }
.indice.courant .indice-texte {
  padding-top: 4px; padding-bottom: 8px;
  font-size: clamp(23px, 6.6vw, 27px); line-height: 1.2; font-weight: 600;
  color: var(--texte);
}
.indice-num {
  font-style: italic;
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--rose); color: var(--encre);
  border: 2px solid var(--blanc);
  border-radius: 50%;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: italic 900 15px/1 var(--police-titre);
  rotate: -3deg;
}
.indice.courant .indice-num { top: 6px; }
[data-zone="honneur"] .indice-num { background: var(--dos); }

/* L'étiquette qui se pèle : un demi-plan tournant coupe la face, le dos est son reflet. */
.etiquette { position: absolute; left: 0; top: 0; width: 100%; height: var(--he); display: block; }
.etiquette:disabled { cursor: default; }
.indice[data-etat="devoile"] .etiquette { display: none; }
.indice.en-pelage .etiquette { display: block; pointer-events: none; }
.miroir { position: absolute; inset: 0; transform: scaleX(-1); pointer-events: none; }
.pelure {
  position: absolute; left: 0; top: -300px;
  width: 520px; height: 364px;
  transform-origin: 0 300px;
  transform: rotate(var(--t, 0deg)) translateX(var(--d, 0px));
  overflow: hidden;
  transition: transform 260ms var(--sortie);
}
.face, .dos {
  position: absolute; left: 0; top: 300px;
  width: var(--largeur, 328px); height: var(--he);
  border-radius: 13px;
  transform-origin: 0 0;
  transition: transform 260ms var(--sortie);
}
.face {
  transform: translateX(calc(var(--d, 0px) * -1)) rotate(calc(var(--t, 0deg) * -1));
  background: var(--rose); color: var(--encre);
  border: 3px solid var(--blanc);
  box-shadow: 0 var(--p1) 0 var(--ombre);
}
.dos {
  transform: scaleX(-1) translateX(calc(var(--d, 0px) * -1)) rotate(calc(var(--t, 0deg) * -1));
  background: var(--dos);
  box-shadow: 0 var(--p1) 0 var(--ombre);
}
.face-contenu {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 100%; padding: 0 16px;
  transform: scaleX(-1);
  font: italic 900 18px/1 var(--police-titre);
}
.face-aide { font: 600 14px/1 var(--police-texte); }
/* Au-delà du ruban : des étiquettes éteintes, à plat, plus basses. Le rose est réservé à ce qui reste dans le pari. */
.indice[data-zone="honneur"][data-etat="couvert"] { --he: 40px; }
.indice[data-zone="honneur"][data-etat="couvert"] .etiquette { rotate: 0deg; }
.indice[data-zone="honneur"][data-etat="couvert"] .face {
  background: var(--eteint); color: var(--texte-doux);
  border: 2px solid var(--eteint-bord);
  box-shadow: none;
}
.indice[data-zone="honneur"][data-etat="couvert"] .face-contenu { font-size: 16px; }
.indice[data-etat="suivant"] .etiquette { --t: 38deg; --d: 15px; }
.indice[data-etat="suivant"] .face-contenu { padding-right: 40px; }
.indice.en-pelage .pelure, .indice.en-pelage .face, .indice.en-pelage .dos { transition: none; }
.etiquette:active .miroir { translate: 0 1px; }

/* Le ruban : la limite du pari. Une seule phrase, que la cassure coupe en deux. */
.ligne-ruban { position: relative; height: 40px; }
.ruban { position: absolute; left: -28px; right: 8px; top: 4px; height: 32px; display: flex; rotate: -2deg; }
.moitie {
  flex: 1;
  display: flex; align-items: center;
  background: var(--tomate); color: var(--encre);
  font: italic 900 16px/1 var(--police-titre);
  letter-spacing: .05em;
  white-space: nowrap;
  transition: rotate 320ms var(--sortie), translate 320ms var(--sortie), opacity 320ms ease;
}
.moitie.g {
  justify-content: flex-end;
  margin-right: -8px; z-index: 1; padding-right: 12px;
  transform-origin: 0 50%;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 25%, 100% 50%, calc(100% - 6px) 75%, 100% 100%, 0 100%);
}
.moitie.d {
  justify-content: flex-start;
  padding-left: 12px;
  transform-origin: 100% 50%;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 5px) 25%, 100% 50%, calc(100% - 5px) 75%, 100% 100%, 6px 100%, 0 75%, 6px 50%, 0 25%);
}
.rompu .moitie.g { rotate: -5deg; translate: -12px 2px; }
.rompu .moitie.d { rotate: 5deg; translate: 10px 5px; }

/* La zone de réponse : décoller (près de la liste), puis répondre (près du clavier) */
.zone-action { padding-top: 12px; }
.retour { margin-bottom: 8px; font-size: 16px; line-height: 1.35; font-weight: 600; }
.retour:empty { display: none; }
.reponse { display: flex; gap: 8px; align-items: center; }
.champ {
  flex: 1; min-width: 0;
  height: 52px; padding: 0 16px;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  font: 600 18px/1 var(--police-texte);
}
.champ::placeholder { color: var(--sur-papier-doux); font-weight: 400; opacity: 1; }
.champ:focus-visible { outline-offset: 2px; }
.bouton-valider {
  flex: none; rotate: 0deg !important;
  height: 52px; padding: 0 16px;
  background: var(--jaune); color: var(--encre);
  border: 3px solid var(--blanc);
  border-radius: 16px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  font: italic 900 19px/1 var(--police-titre);
  letter-spacing: .01em;
  rotate: 2deg;
  transition: scale 120ms var(--sortie), translate 120ms var(--sortie);
}
.bouton-valider:active { scale: .96; translate: 0 2px; box-shadow: 0 1px 0 var(--ombre); }
.bouton-suivant {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin-bottom: 12px; padding: 4px 12px;
  border: 2px dashed var(--trait);
  border-radius: 14px;
  color: var(--texte);
  font: 600 16px/1.2 var(--police-texte);
  transition: scale 120ms var(--sortie);
}
.bouton-suivant:active { scale: .97; }
.bouton-suivant svg { width: 20px; height: 20px; flex: none; }

/* Clavier ouvert : on ne garde que le pari, les indices lus, la prochaine étiquette et le ruban. */
.planche.saisie .journee,
.planche.saisie .edition,
.planche.saisie .indice[data-etat="couvert"] { display: none; }

/* ───────── Écran de résultat ───────── */
.verdict { margin-top: 24px; }
.verdict-titre {
  display: inline-block;
  padding: 8px 16px 12px;
  background: var(--jaune); color: var(--encre);
  border: 4px solid var(--blanc);
  border-radius: 18px;
  box-shadow: 0 var(--p3) 0 var(--ombre);
  font: italic 900 32px/1.05 var(--police-titre);
  letter-spacing: -.01em;
  rotate: -2deg;
}
.verdict-titre[data-issue="horspari"] { background: var(--papier); color: var(--sur-papier); }
.verdict-titre[data-issue="perdu"] { background: var(--tomate); }
.verdict-texte { margin-top: 16px; font-size: 18px; line-height: 1.35; }
.verdict-texte strong { display: block; margin-top: 4px; font: italic 900 40px/1.05 var(--police-titre); color: var(--jaune); }
.calcul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 12px; min-height: 64px; }
.calcul .pile { --tj: 46px; }
.calcul .op { font: italic 900 26px/1 var(--police-titre); color: var(--texte-doux); }
.calcul .facteur { font: italic 900 38px/1 var(--police-titre); }
.calcul .note { flex: 1; min-width: 0; font-size: 16px; line-height: 1.35; color: var(--texte-doux); }
.calcul .arrondi { flex-basis: 100%; margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.mise-perdue { position: relative; flex: none; padding-right: 8px; }
.mise-perdue .tampon { display: block; font-size: 14px; right: -8px; bottom: -8px; }
.eclat { position: relative; flex: none; display: grid; place-items: center; width: 104px; height: 104px; margin: -16px 0 -16px 4px; rotate: 5deg; }
.eclat.long { width: 128px; height: 128px; margin: -24px 0 -24px 0; }
.eclat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eclat .e-ombre { fill: var(--ombre-pleine); opacity: var(--ombre-force); }
.eclat .e-forme { fill: var(--jaune); stroke: var(--blanc); stroke-width: 5; stroke-linejoin: round; }
.eclat span { position: relative; text-align: center; color: var(--encre); font: 700 14px/1 var(--police-texte); }
.eclat b { display: block; font: italic 900 32px/1 var(--police-titre); margin-bottom: 1px; white-space: nowrap; }
.eclat.moyen b { font-size: 28px; }
.eclat.long b { font-size: 24px; }

/* Les jetons gagnés : ils sortent de l'éclat et filent dans le solde. */
.vol { --tj: 44px; position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; pointer-events: none; }

.album { position: relative; margin-top: 24px; min-height: 120px; }
.carte {
  position: relative;
  width: 216px; padding: 8px 8px 12px;
  background: var(--blanc); color: var(--encre);
  border-radius: 18px;
  box-shadow: 0 var(--p3) 0 var(--ombre);
  rotate: -3deg;
}
.carte-image { position: relative; height: 112px; overflow: hidden; border-radius: 12px; background: var(--jaune); }
.carte-image svg { position: absolute; left: 50%; top: 8px; width: 82px; height: 120px; translate: -50% 0; rotate: 5deg; overflow: visible; }
.carte-num { position: absolute; left: 8px; top: 8px; padding: 4px 8px; background: var(--blanc); border-radius: 8px; font: italic 900 14px/1 var(--police-titre); rotate: -3deg; }
.carte-nom { margin: 12px 8px 0; font: italic 900 24px/1.05 var(--police-titre); }
.carte-texte { margin: 4px 8px 0; font-size: 15px; line-height: 1.36; }
.carte-pied { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0; font-size: 14px; font-weight: 600; color: var(--encre-douce); --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre); }
.carte-pied svg { width: 18px; height: 18px; }
.coin {
  position: absolute; right: -1px; top: -1px;
  width: 30px; height: 30px;
  background: linear-gradient(to bottom left, var(--fond) 50%, var(--dos) 50%);
  border-bottom-left-radius: 9px;
}
.album-note { margin-top: 20px; font-size: 15px; color: var(--texte-doux); }
.emplacement {
  display: grid; place-items: center;
  width: 216px; height: 124px; padding: 16px;
  border: 2px dashed var(--trait);
  border-radius: 18px;
  rotate: -3deg;
  text-align: center; font-size: 15px; line-height: 1.4; color: var(--texte-doux);
}
/* La série : une étoile de plus sur la planche, à droite de la carte. */
.serie-etoile {
  position: absolute; right: 0; top: 16px;
  width: clamp(92px, calc(100% - 236px), 116px);
  rotate: 5deg;
  text-align: center;
}
.serie-etoile svg { width: 100%; height: auto; overflow: visible; }
.serie-etoile .s-ombre { fill: var(--ombre-pleine); opacity: var(--ombre-force); }
.serie-etoile .s-decoupe { fill: var(--blanc); stroke: var(--blanc); stroke-width: 3.4; stroke-linejoin: round; }
.serie-etoile .s-forme { fill: var(--jaune); stroke: var(--encre); stroke-width: .9; stroke-linejoin: round; }
.serie-etoile b {
  position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 1; padding-top: 4%;
  display: grid; place-items: center;
  font: italic 900 34px/1 var(--police-titre); color: var(--encre);
}
.serie-etoile span { display: block; font: 600 15px/1.2 var(--police-texte); color: var(--texte); }

.recap { margin-top: 32px; padding-bottom: 12px; }
.recap h2 { font: 700 20px/1.25 var(--police-texte); }
.recap .indices { margin-top: 16px; padding-bottom: 0; gap: 12px; }
.recap .indice { min-height: 0; }
.recap .indice-texte { display: block; color: var(--texte); }

/* ───────── La fiche « Comment jouer » ───────── */
.fiche {
  width: min(344px, calc(100vw - 32px));
  padding: 24px 20px 20px;
  background: var(--papier); color: var(--sur-papier);
  border: 3px solid var(--blanc); border-radius: 20px;
  box-shadow: 0 var(--p3) 0 var(--ombre);
  rotate: 1deg;
  overflow: visible;
}
.fiche::backdrop { background: var(--voile); }
.fiche .scotch { display: block; left: 50%; right: auto; top: -12px; width: 84px; height: 22px; translate: -50% 0; }
.fiche h2 { font: italic 900 24px/1.1 var(--police-titre); letter-spacing: .01em; }
.regles { margin-top: 16px; display: grid; gap: 12px; counter-reset: regle; }
.regles li { position: relative; padding-left: 40px; font-size: 16px; line-height: 1.4; counter-increment: regle; }
.regles li::before {
  content: counter(regle);
  position: absolute; left: 0; top: -2px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--jaune); color: var(--encre);
  border-radius: 50%;
  font: italic 900 15px/1 var(--police-titre);
  rotate: -5deg;
}
.fiche .bouton-valider { display: block; margin: 16px 0 0 auto; box-shadow: 0 var(--p2) 0 var(--ombre-levee); border-color: var(--jaune); }
.fiche :focus-visible { outline-color: var(--sur-papier); }

/* ───────── Tailles : petits téléphones, grands écrans ───────── */
/* Écrans bas : l'en-tête se tasse (compteurs sans mots, côte à côte) et l'enjeu tient sur deux lignes,
   pour que le pari reste entier au-dessus du bouton. */
@media (max-height: 780px) {
  .logo-grand { width: min(40vw, 148px); margin: 0 0 4px 0; }
  [data-ecran="pari"] .tete { grid-template-rows: 40px 1fr auto auto; }
  [data-ecran="pari"] .compteurs { flex-direction: row; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 0; }
  [data-ecran="pari"] .compteur { height: 32px; padding: 0 8px 0 4px; gap: 4px; }
  [data-ecran="pari"] .compteur b { font-size: 16px; }
  [data-ecran="pari"] .compteur-serie { padding-left: 8px; }
  [data-ecran="pari"] .jeton-mini { width: 20px; }
  [data-ecran="pari"] .etoile { width: 16px; height: 16px; }
  [data-ecran="pari"] .compteur .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-ecran="pari"] .rond { width: 36px; height: 36px; }
  [data-ecran="pari"] .pastille[data-etat="cours"] .rond { width: 44px; height: 44px; }
  .edition { margin-top: 12px; }
  .question { padding-top: 8px; margin-bottom: 8px; font-size: 18px; }
  .question .quoi { font-size: 16px; }
  .case { height: clamp(56px, 9dvh, 80px); }
  .case .chiffre { font-size: 36px; }
  .case-pile .pile { --tj: 40px; }
  .enjeu { padding: 12px 0 8px; font-size: 15px; min-height: 72px; }
  .enjeu mark { font-size: 18px; }
  .enjeu .sinon { font-size: 15px; }
  .pied { padding-top: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .bouton-principal { min-height: 56px; }
  .rappel { margin-top: 4px; padding-bottom: 12px; }
}
@media (max-width: 374px) {
  .edition { gap: 8px; }
  .rappel { gap: 20px; }
  .rappel-reste { font-size: 22px; }
  .rappel-pari { font-size: 14px; }
  [data-ecran="pari"] .rond { width: 36px; height: 36px; }
  [data-ecran="pari"] .pastille[data-etat="cours"] .rond { width: 44px; height: 44px; }
  .planche:not([data-ecran="pari"]) .rond { width: 22px; height: 22px; }
  .planche:not([data-ecran="pari"]) .pastille[data-etat="cours"] .rond { width: 26px; height: 26px; }
  .planche:not([data-ecran="pari"]) .journee { gap: 2px; }
}
@media (min-width: 700px) {
  .planche { max-width: 480px; }
  .indice.courant .indice-texte { font-size: 30px; }
  .indice-texte { font-size: 19px; }
}

/* Survols : seulement avec une vraie souris */
@media (hover: hover) and (pointer: fine) {
  .outil:hover { background: var(--point); }
  .case:hover:not([aria-pressed="true"]), .bouton-suivant:hover { border-style: solid; }
  .jeton-btn:hover:not([aria-pressed="true"]) .pile { translate: 0 -3px; }
  .bouton-principal:hover:not([aria-disabled="true"]), .bouton-valider:hover { translate: 0 -1px; }
  .etiquette:hover:not(:disabled) .miroir { translate: 0 -1px; }
}

/* Mouvement réduit : plus de déplacements, seulement des fondus (gérés aussi dans le script) */
@media (prefers-reduced-motion: reduce) {
  .pelure, .face, .dos, .moitie, .jeton-btn .pile, .case-mini .case-pile,
  .bouton-principal, .bouton-valider, .bouton-suivant, .outil { transition: none; }
  .case { transition: opacity 200ms ease; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AJOUTS DU JEU COMPLET (au-delà de la démo d'une énigme)
   ══════════════════════════════════════════════════════════════════════════ */
.ecran:focus { outline: none; }
.mot-logo { paint-order: stroke fill; stroke-linejoin: round; font-family: "Archivo", "Arial Black", sans-serif; font-style: italic; font-weight: 900; font-stretch: 112%; letter-spacing: -1px; }
.ruban-logo { font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", sans-serif; font-weight: 700; }

/* Pastille d'une énigme trouvée après le pari : trouvée, mais pas de gain */
.pastille[data-etat="horspari"] .rond { background: var(--dos); }
.pastille[data-etat="horspari"] .badge { display: grid; background: var(--blanc); }
.pastille[data-etat="horspari"] .b-croix { display: none; }

/* Le joker : un indice offert, une fois par jour */
.outils-jeu { display: flex; gap: 8px; margin-bottom: 12px; }
.outils-jeu .bouton-suivant { margin-bottom: 0; flex: 1; min-width: 0; }
.bouton-joker {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 4px 12px;
  background: var(--rose); color: var(--encre);
  border: 2px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: 700 15px/1.1 var(--police-texte);
  transition: scale 120ms var(--sortie);
}
.bouton-joker:active { scale: .96; }
.bouton-joker b { font: italic 900 16px/1 var(--police-titre); }
.indice-joker {
  display: inline-block; margin-left: 6px; padding: 1px 6px 2px;
  background: var(--rose); color: var(--encre); border-radius: 6px;
  font: 700 12px/1.3 var(--police-texte); vertical-align: 2px;
}

/* Résultat : la réponse et les points */
.la-reponse { margin-top: 20px; font-size: 16px; color: var(--texte-doux); }
.la-reponse strong { display: block; margin-top: 2px; font: italic 900 30px/1.08 var(--police-titre); color: var(--texte); }
.points-gagnes {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: 16px; padding: 6px 12px 8px;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); border-radius: 12px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: 600 15px/1.2 var(--police-texte);
  rotate: 1deg;
}
.points-gagnes b { font: italic 900 22px/1 var(--police-titre); }
.carte-souvenir {
  display: flex; align-items: center; gap: 12px;
  width: min(100%, 300px); margin-top: 24px; padding: 10px 12px;
  background: var(--blanc); color: var(--encre);
  border-radius: 16px; box-shadow: 0 var(--p3) 0 var(--ombre);
  rotate: -2deg;
  --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre);
}
.carte-souvenir .carte-emoji { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--jaune); font-size: 32px; line-height: 1; }
.carte-souvenir p { font-size: 14px; line-height: 1.3; color: var(--encre-douce); }
.carte-souvenir strong { display: block; font: italic 900 18px/1.1 var(--police-titre); color: var(--encre); }
.vide-souvenir { margin-top: 24px; font-size: 15px; color: var(--texte-doux); }

/* Le bilan du jour */
.bilan-titre { margin-top: 24px; }
.bilan-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.chiffre-bilan {
  padding: 10px 8px 12px; text-align: center;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font: 600 13px/1.2 var(--police-texte);
}
.chiffre-bilan b { display: block; margin-bottom: 4px; font: italic 900 26px/1 var(--police-titre); }
.chiffre-bilan:nth-child(2) { background: var(--jaune); color: var(--encre); rotate: -2deg; }
.parfaite { margin-top: 12px; font-weight: 700; color: var(--jaune); }
.lignes-bilan { display: grid; gap: 8px; margin-top: 20px; }
.ligne-bilan {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 10px;
  border: 2px dashed var(--trait); border-radius: 12px;
  --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre);
}
.ligne-bilan .rond { width: 32px; height: 32px; box-shadow: none; rotate: 0deg !important; }
.ligne-bilan .lb-texte { min-width: 0; font-size: 15px; line-height: 1.25; }
.ligne-bilan .lb-texte strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.ligne-bilan .lb-texte span { color: var(--texte-doux); font-size: 14px; }
.ligne-bilan .lb-pts { font: italic 900 17px/1 var(--police-titre); white-space: nowrap; }
.ligne-bilan[data-statut="gagne"] { border-style: solid; border-color: var(--blanc); background: rgba(255, 255, 255, .08); }
.partage { margin-top: 24px; }
.partage h2, .demain h2 { font: 700 18px/1.25 var(--police-texte); }
.texte-partage {
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  font: 600 15px/1.45 var(--police-texte);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.demain { margin-top: 28px; padding-bottom: 16px; }
.demain .compte-a-rebours { margin-top: 6px; font: italic 900 44px/1 var(--police-titre); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.demain p { margin-top: 6px; font-size: 15px; color: var(--texte-doux); }

/* Petit message flottant (jetons offerts, copié…) */
.bulle {
  position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); z-index: 20;
  translate: -50% 0;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 16px;
  background: var(--jaune); color: var(--encre);
  border: 3px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  font: 700 16px/1.3 var(--police-texte);
  text-align: center;
  pointer-events: none;
}
.bulle[hidden] { display: none; }
.fiche .petit-texte { margin-top: 14px; font-size: 14px; line-height: 1.4; color: var(--sur-papier-doux); }

/* ══════════ La zone de mise : le jeton touché vient s'y poser en grand ══════════ */
.zone-mise {
  display: flex; align-items: center; gap: 16px;
  margin: auto 0 12px; padding: 12px 16px;
  min-height: 112px;
  border: 2px dashed var(--trait); border-radius: 20px;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.zone-mise.pleine { border-style: solid; border-color: var(--blanc); background-color: var(--point); }
.zone-pile { flex: none; display: grid; place-items: center; width: 72px; min-height: 84px; }
.zone-pile .pile { --tj: 64px; }
.zone-vide { width: 60px; height: 60px; border-radius: 50%; border: 2px dashed var(--trait); }
.zone-mise .enjeu {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 0; padding: 0; min-height: 0;
  font-size: 15px; line-height: 1.3;
}
.enjeu-mise { font: italic 900 26px/1.05 var(--police-titre); letter-spacing: -.01em; }
.zone-mise .enjeu mark { margin-top: 2px; }
/* Le jeton parti sur la zone laisse sa place en creux sur le plateau. */
.jeton-btn[aria-pressed="true"] .pile { translate: 0 0; rotate: 0deg; scale: .88; opacity: .25; box-shadow: none; }
@media (max-height: 780px) {
  .zone-mise { min-height: 92px; padding: 8px 12px; margin-bottom: 8px; }
  .zone-pile { min-height: 70px; }
  .zone-pile .pile { --tj: 52px; }
  .enjeu-mise { font-size: 22px; }
}

/* ══════════ Les grands moments : un sticker géant qui prend l'écran ══════════ */
.scene { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.scene-voile { position: absolute; inset: 0; background: var(--voile); }
.scene-bloc {
  position: relative; grid-area: 1 / 1;
  max-width: min(360px, calc(100vw - 40px));
  padding: 20px 24px 24px;
  background: var(--jaune); color: var(--encre);
  border: 5px solid var(--blanc); border-radius: 26px;
  box-shadow: 0 7px 0 var(--ombre-pleine);
  text-align: center;
}
.scene-bloc.sc-blanc { background: var(--blanc); }
.scene-bloc.sc-tomate { background: var(--tomate); }
.sc-titre { font: italic 900 clamp(52px, 16vw, 72px)/.95 var(--police-titre); letter-spacing: -.02em; }
.sc-petit { padding: 10px 20px 14px; }
.sc-petit .sc-titre { font-size: 46px; }
.sc-ligne { margin-top: 10px; font: 700 20px/1.25 var(--police-texte); }
.sc-mise { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; text-align: left; }
.sc-mise .pile { --tj: 64px; }
.sc-mise p { font: italic 900 26px/1.05 var(--police-titre); }
.sc-mise mark {
  display: block; width: fit-content; margin-top: 8px; padding: 3px 8px 5px;
  background: var(--jaune); color: var(--encre); border-radius: 8px;
  font: 700 15px/1.2 var(--police-texte);
}
.scene-bloc.sc-ruban-bloc { max-width: none; width: auto; justify-self: stretch; margin-inline: -25vw; padding: 0; background: none; border: 0; box-shadow: none; }
.sc-ruban {
  display: flex; justify-content: center; gap: 24px;
  padding: 14px 0 18px;
  background: var(--tomate); color: var(--encre);
  border-block: 5px solid var(--blanc);
  box-shadow: 0 7px 0 var(--ombre-pleine);
  font: italic 900 clamp(36px, 11vw, 56px)/1 var(--police-titre);
  text-transform: uppercase; letter-spacing: .02em;
  rotate: -9deg;
}
.goutte { position: absolute; }

/* ══════════ L'accueil : le logo en grand, la journée, la règle en 3 stickers ══════════ */
.planche[data-ecran="accueil"] .tete { display: none; }
.accueil { align-items: stretch; padding-top: 16px; }
.acc-logo { line-height: 0; margin: 8px auto 0; width: min(88vw, 400px); }
.acc-logo svg { width: 100%; height: auto; overflow: visible; }
.acc-date { margin-top: 12px; text-align: center; font: italic 900 20px/1.2 var(--police-titre); }
.acc-date::first-letter { text-transform: uppercase; }
.acc-date:focus { outline: none; }
.planche[data-ecran="accueil"] .acc-journee { justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: nowrap; }
.planche[data-ecran="accueil"] .acc-journee .rond { width: clamp(30px, 9vw, 38px); height: clamp(30px, 9vw, 38px); box-shadow: 0 var(--p1) 0 var(--ombre); }
.planche[data-ecran="accueil"] .acc-journee .pastille[data-etat="cours"] .rond { width: clamp(38px, 11vw, 46px); height: clamp(38px, 11vw, 46px); }
.planche[data-ecran="accueil"] .acc-journee .pastille[data-etat="avenir"] .rond { box-shadow: none; }
.planche[data-ecran="accueil"] .acc-journee .badge { width: 18px; height: 18px; right: -4px; bottom: -4px; }
.acc-etat { margin-top: 14px; text-align: center; font-size: 16px; line-height: 1.4; color: var(--texte-doux); text-wrap: balance; }
.acc-etat b { color: var(--texte); }
.acc-rebours { font-variant-numeric: tabular-nums; }
.acc-compteurs { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.acc-compteurs .compteur:first-child { rotate: -2deg; }
.acc-compteurs .compteur:last-child { rotate: 2deg; padding-left: 10px; }
.acc-etapes { display: grid; gap: 10px; margin: 0; padding: 28px 0 16px; }
.accueil .pied { margin-top: auto; }
.acc-etapes li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); border-radius: 16px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font-size: 16px; line-height: 1.3;
}
.acc-etapes li:nth-child(1) { rotate: -1deg; }
.acc-etapes li:nth-child(2) { rotate: 1deg; margin-left: 12px; }
.acc-etapes li:nth-child(3) { rotate: -1deg; }
.acc-etapes b { font: italic 900 18px/1 var(--police-titre); }
.acc-num {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--jaune); color: var(--encre);
  font: italic 900 17px/1 var(--police-titre);
}
.acc-gratuit { margin-top: 10px; text-align: center; font-size: 13px; color: var(--texte-doux); }
@media (max-height: 740px) {
  .acc-logo { width: min(70vw, 300px); }
  .acc-etapes { padding-top: 14px; gap: 8px; }
  .acc-etapes li { padding: 8px 12px; font-size: 15px; }
}

/* La question chiffrée dans le jeu principal */
#ecran-nombre .ligne-ruban { margin-left: 28px; }
#ecran-pari .carte-question { margin-bottom: 4px; }
.pom-anecdote {
  margin-top: 20px; padding: 12px 14px;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  font-size: 16px; line-height: 1.4; rotate: -1deg;
}
.pom-anecdote b { display: block; margin-bottom: 2px; font: italic 900 17px/1.1 var(--police-titre); }

/* Pari de la question chiffrée : la question prend de la place, le reste se tasse pour tout garder à l'écran. */
.pari-nombre .logo-grand { width: min(44vw, 180px); margin: 4px 0; }
.pari-nombre[data-ecran="pari"] .tete { grid-template-rows: 40px 1fr auto auto; }
.pari-nombre[data-ecran="pari"] .compteurs { flex-direction: row; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 0; }
.pari-nombre[data-ecran="pari"] .compteur { height: 32px; padding: 0 8px 0 4px; gap: 4px; }
.pari-nombre[data-ecran="pari"] .compteur .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pari-nombre[data-ecran="pari"] .rond { width: 32px; height: 32px; }
.pari-nombre[data-ecran="pari"] .pastille[data-etat="cours"] .rond { width: 40px; height: 40px; }
.pari-nombre .edition { margin-top: 10px; }
.pari-nombre .carte-question { margin-top: 12px; padding: 10px 14px 12px; }
.pari-nombre .cq-titre { font-size: 18px; }
.pari-nombre .cq-unite { margin-top: 6px; font-size: 13px; }
.pari-nombre .question { padding-top: 10px; margin-bottom: 8px; font-size: 18px; }
.pari-nombre .case { height: 56px; }
.pari-nombre .case .chiffre { font-size: 34px; }
.pari-nombre .zone-mise { min-height: 88px; padding: 8px 12px; margin-bottom: 8px; }
.pari-nombre .zone-pile { min-height: 66px; }
.pari-nombre .zone-pile .pile { --tj: 50px; }
.pari-nombre .enjeu-mise { font-size: 22px; }

/* ══════════ Accueil multi-jeux ══════════ */
.planche[data-ecran="stats"] .tete { display: none; }
.accueil { padding-top: 8px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.acc-haut { display: flex; align-items: center; justify-content: space-between; }
.acc-haut .acc-compteurs { margin: 0; justify-content: flex-start; }
.acc-haut .compteur { height: 34px; }
.accueil .acc-logo { width: min(80vw, 340px); margin-top: 4px; }
.acc-titre { margin: 24px 0 10px; font: italic 900 20px/1.1 var(--police-titre); }

/* Le défi du jour : un ticket jaune collé de travers */
.acc-defi {
  margin-top: 16px; padding: 12px 16px 14px;
  background: var(--jaune); color: var(--encre);
  border: 3px solid var(--blanc); border-radius: 18px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  rotate: -1deg;
}
.acc-defi[data-etat="reclame"] { background: var(--papier); color: var(--sur-papier); }
.defi-tag { display: inline-block; padding: 2px 8px 3px; background: var(--encre); color: var(--jaune); border-radius: 6px; font: italic 900 13px/1.2 var(--police-titre); rotate: -2deg; }
.acc-defi[data-etat="reclame"] .defi-tag { background: var(--sur-papier-doux); color: var(--papier); }
.defi-texte { margin-top: 8px; font: 700 18px/1.25 var(--police-texte); }
.defi-barre { height: 12px; margin-top: 10px; border-radius: 6px; background: rgba(21, 18, 46, .15); overflow: hidden; }
.defi-barre span { display: block; height: 100%; background: var(--encre); border-radius: 6px; transform-origin: left; scale: var(--part) 1; transition: scale 500ms var(--sortie); }
.acc-defi[data-etat="reclame"] .defi-barre span { background: var(--sur-papier-doux); }
.defi-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; min-height: 40px; }
.defi-compte { font: italic 900 18px/1 var(--police-titre); }
.defi-prix { font: 700 15px/1.2 var(--police-texte); }
.defi-fait { font: 700 15px/1.2 var(--police-texte); }
.acc-defi .bouton-valider { height: 44px; font-size: 17px; border-color: var(--blanc); background: var(--encre); color: var(--jaune); }

/* Les cartes des jeux */
.acc-jeux { display: grid; gap: 12px; }
.carte-jeu {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 10px;
  width: 100%; padding: 14px 16px; text-align: left;
  background: var(--blanc); color: var(--encre);
  border-radius: 20px; box-shadow: 0 var(--p3) 0 var(--ombre);
  transition: scale 120ms var(--sortie), translate 120ms var(--sortie);
  --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre);
}
.carte-jeu:nth-child(1) { rotate: -1deg; }
.carte-jeu:nth-child(2) { rotate: 1deg; }
.carte-jeu:active { scale: .97; translate: 0 2px; }
.cj-picto { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--rose); }
.carte-jeu[data-jeu="plusoumoins"] .cj-picto { background: var(--jaune); }
.cj-picto svg { width: 30px; height: 30px; }
.cj-titre { display: block; font: italic 900 22px/1.05 var(--police-titre); }
.cj-sous { display: block; margin-top: 3px; font-size: 14px; color: var(--encre-douce); }
.cj-pastilles { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.cj-pastilles .pastille { position: relative; }
.cj-pastilles .rond { width: 26px; height: 26px; box-shadow: none; background: var(--dos); rotate: 0deg !important; }
.cj-pastilles .pastille[data-etat="gagne"] .rond, .cj-pastilles .pastille[data-etat="horspari"] .rond { background: var(--jaune); }
.cj-pastilles .pastille[data-etat="cours"] .rond { background: var(--rose); width: 26px; height: 26px; }
.cj-pastilles .pastille[data-etat="avenir"] .rond { background: none; border: 2px dashed rgba(21, 18, 46, .3); --pe: rgba(21, 18, 46, .35); }
.cj-pastilles .badge { width: 13px; height: 13px; right: -4px; bottom: -4px; border-width: 1.5px; }
.cj-pastilles .badge svg { width: 7px; height: 7px; stroke-width: 5; }
.cj-bas { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cj-etat { font: 700 15px/1.2 var(--police-texte); color: var(--encre-douce); }
.cj-action { padding: 6px 12px 7px; background: var(--jaune); border: 2px solid var(--encre); border-radius: 12px; font: italic 900 17px/1 var(--police-titre); white-space: nowrap; }
.carte-jeu[data-fini="true"] .cj-action { background: var(--blanc); }

/* La semaine */
.acc-semaine { margin-top: 20px; padding: 12px 14px; border: 2px dashed var(--trait); border-radius: 16px; }
.sem-titre { font: italic 900 18px/1.1 var(--police-titre); }
.sem-jours { display: flex; gap: 6px; margin-top: 10px; }
.sem-jour {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px dashed var(--trait); font: italic 900 14px/1 var(--police-titre); color: var(--texte-doux);
}
.sem-jour[data-joue="true"] { background: var(--jaune); color: var(--encre); border: 2px solid var(--blanc); }
.sem-jour[data-auj="true"] { outline: 2px solid var(--rose); outline-offset: 2px; }
.sem-texte { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--texte-doux); }
.sem-texte b { color: var(--texte); }
.acc-stats { margin-top: 16px; }

/* La récompense de la semaine */
.sem-liste { margin-top: 14px; display: grid; gap: 8px; }
.sem-liste li { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; }
.sem-liste b { font: italic 900 18px/1 var(--police-titre); }
.sem-total { margin-top: 14px; padding: 8px 12px; background: var(--jaune); color: var(--encre); border-radius: 12px; font: italic 900 22px/1.1 var(--police-titre); text-align: center; rotate: -2deg; }

/* Mes statistiques */
.stats { padding-top: 16px; }
.stats-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.tuile { padding: 10px 12px; background: var(--papier); color: var(--sur-papier); border: 2px solid var(--blanc); border-radius: 14px; box-shadow: 0 var(--p1) 0 var(--ombre); }
.tuile b { display: block; font: italic 900 24px/1.05 var(--police-titre); overflow-wrap: anywhere; }
.tuile span { display: block; margin-top: 2px; font-size: 13px; color: var(--sur-papier-doux); }
.tuile:nth-child(3n + 1) { rotate: -1deg; }
.tuile:nth-child(4n + 2) { rotate: 1deg; }
.histo { display: grid; gap: 6px; }
.histo-ligne { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.histo-k { font: italic 900 16px/1 var(--police-titre); text-align: right; }
.histo-barre { height: 18px; }
.histo-barre span { display: block; height: 100%; min-width: 4px; background: var(--jaune); border: 2px solid var(--blanc); border-radius: 6px; transform-origin: left; width: calc(var(--part) * 100%); }
.histo-barre span[data-vide="true"] { background: none; border-style: dashed; border-color: var(--trait); }
.histo-ligne b { font: italic 900 16px/1 var(--police-titre); }
.stats-pom { font-size: 16px; line-height: 1.4; }
.stats-note { margin-top: 16px; padding-bottom: 16px; font-size: 14px; color: var(--texte-doux); }
#ecran-bilan .pied .bouton-suivant { margin-bottom: 10px; }

/* ══════════ Les cartes à collectionner ══════════ */
.carte-r {
  --rc: var(--blanc); --rf: var(--dos);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 6px 6px 8px;
  background: var(--blanc); color: var(--encre);
  border: 4px solid var(--rc); border-radius: 16px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre);
}
.carte-r[data-rarete="rare"] { --rc: var(--rose); --rf: var(--rose); }
.carte-r[data-rarete="epique"] { --rc: var(--tomate); --rf: var(--tomate); }
.carte-r[data-rarete="ultra"] { --rc: var(--jaune); --rf: var(--jaune); }
.cr-image {
  display: grid; place-items: center; aspect-ratio: 1;
  border-radius: 11px; background: var(--rf);
}
.carte-r[data-rarete="ultra"] .cr-image { background: repeating-conic-gradient(from 0deg, var(--jaune) 0 12deg, #FFE68A 12deg 24deg); }
.carte-r[data-rarete="epique"] .cr-image { background: repeating-conic-gradient(from 0deg, var(--tomate) 0 15deg, #FF8466 15deg 30deg); }
.cr-emoji { font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(21, 18, 46, .25)); }
.cr-tag {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  padding: 2px 6px 3px; border-radius: 6px;
  background: var(--encre); color: var(--blanc);
  font: italic 900 10px/1.1 var(--police-titre); letter-spacing: .02em;
}
.carte-r[data-rarete="ultra"] .cr-tag, .carte-r[data-rarete="epique"] .cr-tag { color: var(--jaune); }
.cr-nom { margin: 6px 2px 0; font: italic 900 12.5px/1.1 var(--police-titre); overflow-wrap: break-word; hyphens: auto; }
.cr-pied { display: flex; align-items: center; gap: 4px; margin: 4px 2px 0; font: 700 11px/1.2 var(--police-texte); color: var(--encre-douce); }
.cr-pied svg { flex: none; width: 14px; height: 14px; }
.cr-reflet {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 48%, transparent 60%);
  animation: reflet 2.6s ease-in-out infinite;
}
@keyframes reflet { 0% { translate: -130% 0; } 55%, 100% { translate: 130% 0; } }
.carte-r[data-taille="grande"] { width: min(240px, 70vw); padding: 8px 8px 12px; border-width: 6px; border-radius: 22px; box-shadow: 0 8px 0 var(--ombre-pleine); }
.carte-r[data-taille="grande"] .cr-emoji { font-size: 110px; }
.carte-r[data-taille="grande"] .cr-nom { font-size: 26px; margin-top: 10px; }
.carte-r[data-taille="grande"] .cr-pied { font-size: 14px; }
.carte-r[data-taille="grande"] .cr-pied svg { width: 20px; height: 20px; }
.carte-r[data-taille="grande"] .cr-tag { font-size: 14px; left: 14px; top: 14px; padding: 3px 8px 4px; }
.carte-r[data-taille="mini"] { width: 76px; padding: 4px 4px 6px; border-width: 3px; border-radius: 12px; }
.carte-r[data-taille="mini"] .cr-emoji { font-size: 30px; }
.carte-r[data-taille="mini"] .cr-nom { font-size: 10px; margin-top: 4px; }
.carte-r[data-taille="mini"] .cr-pied, .carte-r[data-taille="mini"] .cr-tag { display: none; }

/* ══════════ La pochette du jour ══════════ */
.pochette-art { position: relative; width: 96px; height: 128px; }
.pp-corps {
  position: absolute; inset: 14px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: repeating-linear-gradient(135deg, var(--rose) 0 12px, #FFB3D2 12px 24px);
  border: 4px solid var(--blanc); border-radius: 6px 6px 16px 16px;
  box-shadow: 0 var(--p3) 0 var(--ombre);
}
.pp-corps svg { width: 64%; height: auto; overflow: visible; }
.pp-corps b { padding: 3px 7px 4px; background: var(--encre); color: var(--jaune); border-radius: 8px; font: italic 900 11px/1.1 var(--police-titre); text-align: center; rotate: -4deg; }
.pp-haut {
  position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: var(--jaune); border: 4px solid var(--blanc); border-bottom: 0; border-radius: 8px 8px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 90% 70%, 85% 100%, 80% 70%, 75% 100%, 70% 70%, 65% 100%, 60% 70%, 55% 100%, 50% 70%, 45% 100%, 40% 70%, 35% 100%, 30% 70%, 25% 100%, 20% 70%, 15% 100%, 10% 70%, 5% 100%, 0 70%);
}
.acc-pochette {
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--papier); color: var(--sur-papier);
  border: 3px solid var(--blanc); border-radius: 18px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  rotate: 1deg;
}
.ap-visuel { flex: none; display: grid; place-items: center; min-width: 76px; }
.ap-visuel .pile { --tj: 56px; }
.ap-texte { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.acc-pochette .defi-tag { background: var(--rose); color: var(--encre); }
.ap-titre { font: 700 16px/1.3 var(--police-texte); }
.ap-sous { font-size: 14px; color: var(--sur-papier-doux); }
.acc-pochette .bouton-valider { height: 46px; font-size: 18px; }
.lien-chances { font: 600 14px/1.2 var(--police-texte); color: var(--sur-papier-doux); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.chances { display: grid; gap: 6px; margin: 12px 0; }
.chances li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--fond); color: var(--texte); font-size: 15px; }
.chances b { font: italic 900 16px/1.2 var(--police-titre); }

/* Le déballage, par-dessus l'écran */
.ouverture { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.ouv-voile { position: absolute; inset: 0; background: radial-gradient(circle, var(--point) 1.1px, transparent 1.7px) 12px 12px / 24px 24px, var(--fond); }
.ouv-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ouverture .pochette-art { width: 190px; height: 250px; }
.ouverture .pp-corps b { font-size: 20px; }
.ouverture .pp-haut { height: 36px; }
.ouv-titre {
  padding: 8px 16px 10px; background: var(--jaune); color: var(--encre);
  border: 4px solid var(--blanc); border-radius: 16px; box-shadow: 0 var(--p3) 0 var(--ombre-pleine);
  font: italic 900 30px/1 var(--police-titre); rotate: -3deg;
}
.ouv-jetons { display: flex; align-items: center; gap: 16px; color: var(--texte); }
.ouv-jetons .pile { --tj: 90px; }
.ouv-jetons > p { font: 700 20px/1 var(--police-texte); text-align: left; }
.ouv-jetons > p > b { display: block; font: italic 900 56px/1 var(--police-titre); color: var(--jaune); }
.ouv-sous { max-width: 300px; color: var(--texte); font-size: 15px; }
.ouv-actions { position: relative; align-self: end; display: grid; gap: 10px; width: min(100%, 420px); }
.ouverture { grid-template-rows: 1fr auto; }

/* ══════════ L'album ══════════ */
.album-ecran { padding-top: 16px; }
.album-intro { margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--texte-doux); }
.album-compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.album-chip { padding: 6px 4px; text-align: center; border-radius: 12px; background: var(--papier); color: var(--sur-papier); border: 3px solid var(--blanc); font: 600 12px/1.2 var(--police-texte); }
.album-chip[data-rarete="rare"] { border-color: var(--rose); }
.album-chip[data-rarete="epique"] { border-color: var(--tomate); }
.album-chip[data-rarete="ultra"] { border-color: var(--jaune); }
.album-chip b { display: block; font: italic 900 17px/1.1 var(--police-titre); }
.album-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.album-section { padding-bottom: 4px; }
.carte-vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 150px; border: 2px dashed var(--trait); border-radius: 16px; color: var(--texte-doux);
  text-align: center; font: 600 12px/1.2 var(--police-texte); padding: 6px;
}
.carte-vide b { font: italic 900 32px/1 var(--police-titre); }
.acc-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.acc-liens .bouton-suivant { margin-bottom: 0; }
.planche[data-ecran="album"] .tete { display: none; }
@media (prefers-reduced-motion: reduce) { .cr-reflet { animation: none; opacity: 0; } }

/* ══════════ La pochette se déchire à la main (doigt ou souris) ══════════ */
.ouverture .pochette-art {
  width: 210px; height: 276px;
  touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ouverture .pochette-art.en-main { cursor: grabbing; }
.ouverture .pochette-art:focus-visible { outline: 3px solid var(--jaune); outline-offset: 8px; border-radius: 12px; }
.ouverture .pp-haut { height: 44px; z-index: 2; will-change: transform; }
.ouverture .pp-corps { inset: 22px 0 0; will-change: transform; }
/* La ligne de découpe, juste sous la bande */
.pp-ligne {
  position: absolute; left: 10px; right: 10px; top: 46px; z-index: 1;
  border-top: 3px dashed rgba(21, 18, 46, .45);
  pointer-events: none;
}
/* Le doigt qui montre le geste, tant qu'on n'a pas touché */
.pp-doigt {
  position: absolute; left: 0; top: 2px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); border: 3px solid var(--blanc);
  box-shadow: 0 2px 0 var(--ombre);
  pointer-events: none;
  animation: doigt 1.7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes doigt {
  0% { translate: 4px 0; scale: 1.25; opacity: 0; }
  18% { translate: 4px 0; scale: 1; opacity: 1; }
  75% { translate: 166px 0; scale: 1; opacity: 1; }
  100% { translate: 166px 0; scale: 1.2; opacity: 0; }
}
.pochette-art.touche .pp-doigt { display: none; }
.ouv-aide {
  max-width: 280px; padding: 8px 14px 10px;
  background: var(--blanc); color: var(--encre);
  border-radius: 14px; box-shadow: 0 var(--p2) 0 var(--ombre-pleine);
  font: 700 17px/1.3 var(--police-texte); text-wrap: balance;
  rotate: -1deg;
}
.ouv-attente { position: relative; align-self: end; width: min(100%, 420px); }
.ouv-attente .bouton-suivant { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .pp-doigt { animation: none; translate: 85px 0; } }

.ouv-essai { padding: 4px 10px 6px; background: var(--blanc); color: var(--encre); border-radius: 10px; font-weight: 700; }

/* ══════════ Le bouton « Voir l'indice » : un vrai bouton, plein, avec une ampoule ══════════ */
.bouton-indice {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 6px 14px;
  background: var(--blanc); color: var(--encre);
  border: 2px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p2) 0 var(--ombre);
  font: italic 900 18px/1.1 var(--police-titre);
  text-align: left;
  rotate: -1deg;
  transition: scale 120ms var(--sortie), translate 120ms var(--sortie);
}
.bouton-indice:active { scale: .97; translate: 0 2px; box-shadow: 0 1px 0 var(--ombre); }
.bouton-indice svg { width: 26px; height: 26px; flex: none; }
.bi-textes { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bi-textes small { font: 700 13px/1.1 var(--police-texte); font-style: normal; color: var(--tomate); }
.bi-textes small[hidden] { display: none; }
/* L'indice d'après sort du pari : le bouton prévient, en rouge. */
.bouton-indice.risque { border-color: var(--tomate); }
.bouton-indice.chat { font-size: 16px; }
.bouton-indice.chat svg { display: none; }
.bouton-joker { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; rotate: 1.5deg; }
.bouton-joker span { font: 700 13px/1 var(--police-texte); }
@media (hover: hover) { .bouton-indice:hover { translate: 0 -1px; } }
@media (prefers-reduced-motion: reduce) { .bouton-indice { transition: none; } }

/* ══════════ Les modes : Enfant · Classique · Expert ══════════ */
.acc-modes { display: flex; gap: 6px; margin: 2px 0 6px; }
.mode-btn {
  flex: 1; min-width: 0; min-height: 44px; padding: 6px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 2px dashed var(--trait); border-radius: 14px; color: var(--texte);
  transition: scale 120ms var(--sortie);
}
.mode-btn b { font: italic 900 16px/1 var(--police-titre); }
.mode-btn[aria-checked="true"] {
  background: var(--blanc); color: var(--encre); border: 2px solid var(--blanc);
  box-shadow: 0 var(--p1) 0 var(--ombre); rotate: -1.5deg;
}
.mode-btn[data-mode="expert"][aria-checked="true"] { background: var(--tomate); border-color: var(--blanc); }
.mode-btn[data-mode="enfant"][aria-checked="true"] { background: var(--jaune); }
.mode-btn[data-verrou="true"] { opacity: .55; }
.mode-cadenas { font: 600 11px/1 var(--police-texte); }
.mode-btn:active { scale: .96; }
.acc-mode-texte { margin: 0 0 10px; font: 600 14px/1.3 var(--police-texte); color: var(--texte-doux); text-align: center; }
/* Mode expert : 4 cases de pari, sur deux colonnes */
.cases[data-nb="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bouton-essai { margin-top: 10px; opacity: .8; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .mode-btn { transition: none; } }

.bouton-streamer { margin-top: 10px; text-decoration: none; font-size: 15px; }

/* ══════════ « Le savais-tu ? » et les indices expliqués (écran de résultat) ══════════ */
.savais {
  margin-top: 18px; padding: 12px 14px;
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); border-radius: 14px;
  box-shadow: 0 var(--p1) 0 var(--ombre);
  rotate: -.6deg;
}
.savais-texte { margin: 0; font-size: 16px; line-height: 1.45; }
.savais-texte b { display: block; margin-bottom: 3px; font: italic 900 17px/1.1 var(--police-titre); }
.pourquoi { margin-top: 10px; border-top: 2px dashed currentColor; padding-top: 8px; }
.pourquoi summary {
  cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px;
  font: 700 16px/1.2 var(--police-texte); list-style: none;
}
.pourquoi summary::-webkit-details-marker { display: none; }
.pourquoi summary::before {
  content: '+'; display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; background: var(--rose); color: var(--encre); font: 900 18px/1 var(--police-texte);
}
.pourquoi[open] summary::before { content: '−'; }
.pourquoi-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.pq-indice { position: relative; margin: 0; padding-left: 36px; font: 700 15px/1.35 var(--police-texte); }
.pq-indice .indice-num { width: 24px; height: 24px; font-size: 13px; }
.pq-texte { margin: 3px 0 0; padding-left: 36px; font-size: 15px; line-height: 1.4; opacity: .85; }

/* La fiche d'aide ne dépasse jamais de l'écran : la liste défile dedans. */
.fiche .regles { max-height: calc(100dvh - 230px); overflow-y: auto; overscroll-behavior: contain; }

.acc-gratuit a { color: inherit; }

/* ══════════ L'album : onglets, cartes mystère, collections à venir ══════════ */
.album-onglets { display: flex; gap: 6px; margin-top: 14px; }
.alb-onglet {
  flex: 1; min-width: 0; min-height: 44px; padding: 6px 4px; border-radius: 14px;
  border: 2px dashed var(--trait); color: var(--texte); font: italic 900 15px/1.1 var(--police-titre);
}
.alb-onglet[aria-selected="true"] { background: var(--jaune); color: var(--encre); border: 2px solid var(--blanc); box-shadow: 0 4px 0 var(--tranche-jaune, var(--ombre)); rotate: -1deg; }
.alb-total { margin: 16px 0 0; font: 600 16px/1.3 var(--police-texte); }
.alb-total b { font: italic 900 24px/1 var(--police-titre); color: var(--jaune); }
.alb-vide { grid-column: 1 / -1; margin: 12px 0 0; padding: 12px; border: 2px dashed var(--trait); border-radius: 14px; font: 600 15px/1.4 var(--police-texte); }
.alb-theme { display: flex; align-items: center; gap: 8px; --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre); }
.alb-theme svg { width: 26px; height: 26px; flex: none; }
.alb-theme span { margin-left: auto; font: 700 15px/1 var(--police-texte); color: var(--texte-doux); }
.alb-barre { margin: 0 0 10px; }
.alb-mystere { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.carte-mystere {
  aspect-ratio: 3 / 4; display: grid; place-content: center; justify-items: center; gap: 2px;
  border-radius: 10px; background: var(--eteint); border: 3px solid var(--eteint-bord); color: var(--texte-doux);
}
.carte-mystere b { font: italic 900 22px/1 var(--police-titre); }
.carte-mystere span { font: 700 9.5px/1 var(--police-texte); }
.carte-mystere[data-rarete="rare"] { border-color: var(--rose); }
.carte-mystere[data-rarete="epique"] { border-color: var(--tomate); }
.carte-mystere[data-rarete="ultra"] { border-color: var(--jaune); color: var(--jaune); }
.alb-bientot {
  display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px;
  background: var(--blanc); color: var(--encre); border-radius: 16px; box-shadow: 0 4px 0 var(--ombre);
}
.alb-bientot:nth-of-type(odd) { rotate: -.7deg; } .alb-bientot:nth-of-type(even) { rotate: .7deg; }
.alb-bientot-emoji { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--rose); font-size: 28px; }
.alb-bientot-nom { margin: 0; font: italic 900 18px/1.15 var(--police-titre); }
.alb-bientot-nom span { margin-left: 8px; padding: 2px 8px; border-radius: 8px; background: var(--jaune); font: 700 12px/1.4 var(--police-texte); font-style: normal; vertical-align: 2px; white-space: nowrap; }
.alb-bientot-texte { margin: 4px 0 0; font: 600 14px/1.4 var(--police-texte); }

/* ══════════ Économie : gros jetons, gains en clair sur les cases, achats en jetons ══════════ */
.j-menthe { --jc: #7CE0B5; --jr: var(--blanc); }
.j-ciel { --jc: #8FB8FF; --jr: var(--blanc); }
.j-violet { --jc: #C9A3FF; --jr: var(--jaune); }
.case { flex-wrap: wrap; align-content: center; row-gap: 0; padding-bottom: 2px; }
.case-risque { flex-basis: 100%; text-align: center; font: 700 11px/1 var(--police-texte); color: var(--texte-doux); letter-spacing: .02em; margin-top: -4px; }
.case[aria-pressed="true"] .case-risque { color: var(--encre); opacity: .7; }
.case .chiffre { font-size: 36px; }
.plateau-note { margin: 6px 0 0; text-align: center; font: 600 13px/1.3 var(--police-texte); color: var(--texte-doux); }
.plateau-note[hidden] { display: none; }
.ap-achat { height: auto; min-height: 40px; padding: 8px 12px; margin-top: 8px; font-size: 15px; line-height: 1.15; }

/* ══════════ La page « Mon cerveau » ══════════ */
.planche[data-ecran="cerveau"] .tete, .planche[data-ecran="boutique"] .tete { display: none; }
.page-cerveau, .page-boutique { padding-top: 16px; }
.acc-liens { grid-template-columns: 1fr 1fr; }
.cv-heros { display: grid; justify-items: center; gap: 4px; margin-top: 8px; text-align: center; }
.cv-dessin { min-height: 150px; display: grid; place-items: center; }
.cv-niveau { margin: 0; font: italic 900 34px/1 var(--police-titre); color: var(--jaune); }
.cv-nom { margin: 2px 0 6px; padding: 6px 16px; background: var(--blanc); color: var(--encre); border-radius: 12px; rotate: -2deg; box-shadow: 0 3px 0 var(--ombre); font: italic 900 20px/1.1 var(--police-titre); }
.cv-barre { width: 100%; height: 18px; border-radius: 10px; border: 3px solid var(--blanc); background: rgba(8, 14, 84, .4); overflow: hidden; }
.cv-barre span { display: block; height: 100%; width: calc(var(--part, 0) * 100%); min-width: 8px; background: var(--jaune); border-radius: 6px; transition: width 700ms var(--sortie); }
.cv-points { margin: 4px 0 0; font: 600 15px/1.3 var(--police-texte); }
.cv-points b { font: italic 900 18px/1 var(--police-titre); color: var(--jaune); }
.cv-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-couleur { width: 42px; height: 42px; border-radius: 50%; background: var(--c); border: 3px solid var(--blanc); box-shadow: 0 3px 0 var(--ombre); transition: scale 300ms var(--ressort, ease-out); }
.cv-couleur[aria-checked="true"] { scale: 1.15; outline: 3px solid var(--jaune); outline-offset: 3px; }
.cv-couleur.verrou { display: grid; place-items: center; opacity: .45; filter: grayscale(.5); font: 700 10px/1 var(--police-texte); color: var(--encre); }
.cv-liste { display: grid; gap: 8px; }
.cv-ligne { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; padding: 10px 12px; background: var(--blanc); color: var(--encre); border-radius: 14px; box-shadow: 0 3px 0 var(--ombre); }
.cv-ligne b { font: italic 900 16px/1.15 var(--police-titre); }
.cv-ligne span { font: 600 14.5px/1.35 var(--police-texte); }
.cv-prochain { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 2px dashed var(--trait); border-radius: 16px; }
.cv-prochain-dessin { flex: none; opacity: .8; }
.cv-prochain-nom { margin: 0 0 6px; font: italic 900 18px/1.15 var(--police-titre); }
.cv-cadeaux { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-cadeau { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--rose); color: var(--encre); font: 700 12.5px/1.4 var(--police-texte); }
.cv-cadeau.cv-jeton { background: var(--jaune); }
.cv-pastille { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 1.5px solid var(--encre); }
.cv-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cv-tuile { margin: 0; padding: 10px; text-align: center; background: var(--eteint); border: 2px solid var(--eteint-bord); border-radius: 14px; font: 600 14px/1.3 var(--police-texte); }
.cv-tuile b { display: block; font: italic 900 26px/1.05 var(--police-titre); color: var(--jaune); }
.cv-niveaux { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.cv-palier { display: flex; gap: 10px; align-items: center; padding: 8px 12px 10px 6px; background: var(--blanc); color: var(--encre); border-radius: 16px; box-shadow: 0 4px 0 var(--ombre); }
.cv-palier[data-etat="ici"] { background: var(--jaune); rotate: -1deg; outline: 3px solid var(--blanc); }
.cv-palier[data-etat="avenir"] { background: var(--eteint); color: var(--texte); border: 2px solid var(--eteint-bord); box-shadow: none; }
.cv-palier[data-etat="avenir"] .cv-palier-dessin { opacity: .55; filter: grayscale(.35); }
.cv-palier-dessin { flex: none; width: 84px; }
.cv-palier-nom { margin: 0; font: italic 900 18px/1.15 var(--police-titre); }
.cv-palier-nom span { display: block; font: 700 12px/1.3 var(--police-texte); font-style: normal; opacity: .75; }
.cv-palier-points { margin: 2px 0 6px; font: 600 13.5px/1.3 var(--police-texte); }
.cv-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cv-table p { margin: 0; padding: 8px 4px; text-align: center; border-radius: 12px; background: var(--blanc); color: var(--encre); font: 600 12.5px/1.2 var(--police-texte); }
.cv-table b { display: block; font: italic 900 22px/1.05 var(--police-titre); }
.cv-note { margin: 14px 0 0; font: 600 14px/1.4 var(--police-texte); color: var(--texte-doux); }

/* ══════════ La page « Boutique » ══════════ */
.bq-solde { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 16px 6px 8px; background: var(--blanc); color: var(--encre); border-radius: 999px; box-shadow: 0 3px 0 var(--ombre); font: 700 16px/1 var(--police-texte); }
.bq-solde svg { width: 30px; height: 30px; }
.bq-solde b { font: italic 900 24px/1 var(--police-titre); }
.bq-article { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 10px 12px; background: var(--blanc); color: var(--encre); border-radius: 16px; box-shadow: 0 4px 0 var(--ombre); }
.bq-article:nth-of-type(odd) { rotate: -.6deg; } .bq-article:nth-of-type(even) { rotate: .6deg; }
.bq-emoji { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--rose); font-size: 26px; }
.bq-texte { flex: 1; min-width: 0; }
.bq-nom { margin: 0; font: italic 900 18px/1.15 var(--police-titre); }
.bq-desc { margin: 3px 0 0; font: 600 13.5px/1.35 var(--police-texte); }
.bq-etat { margin: 4px 0 0; font: 700 12.5px/1.3 var(--police-texte); opacity: .7; }
.bq-acheter { flex: none; height: auto; min-height: 52px; min-width: 64px; padding: 6px 10px; display: grid; justify-items: center; font-size: 22px; line-height: 1; }
.bq-acheter small { font: 700 11px/1.1 var(--police-texte); font-style: normal; }
.bq-acheter[aria-disabled="true"] { background: var(--dos); opacity: .6; box-shadow: none; }
.bq-bientot { background: var(--eteint); color: var(--texte); border: 2px dashed var(--eteint-bord); box-shadow: none; }
.bq-bientot .bq-emoji { background: rgba(255, 255, 255, .14); }
.bq-tag { flex: none; padding: 3px 9px; border-radius: 8px; background: var(--jaune); color: var(--encre); font: 700 12px/1.4 var(--police-texte); }
.bq-ouvrir { margin: 2px 0 12px; }

.bq-solde { width: fit-content; align-self: flex-start; }
.bq-solde .jeton-mini { width: 30px; height: 30px; flex: none; }