/* ==========================================================================
   Ludingo — feuille de style du site (v3, refonte « Plateau », octobre 2026)
   --------------------------------------------------------------------------
   Le site est le même objet que l'app : un plateau de jeu, des tuiles posées
   avec une fine tranche, des pièces en relief qui s'enfoncent (les boutons),
   du matériel posé avec une ombre de contact décalée à droite (meeples, dés,
   téléphones). Une seule lumière, en haut à gauche.

   Tokens : ceux du kit de la refonte (ludingo/docs/design/refonte/kit/
   tokens.css). En mode sombre, le site prend EXACTEMENT le plateau de l'app.
   En clair, un plateau crème ; les rôles gardent leur couleur de pièce, et
   un ton « encre » (…-ink) plus profond porte le texte (contraste AA).

   Règles du kit appliquées ici :
   - le relief veut dire « touchable » : seule une pièce d'action (lien-bouton,
     chip de jeu, résumé de FAQ) a une tranche ; un état ou une étiquette est
     plat ;
   - une couleur, un métier : le dégradé = l'action principale, Lagon =
     choisir, or = gagner, violet = la magie (Wizard, succès) ;
   - pas d'ombre floue de type Material sur l'interface ;
   - animations ≤ 600 ms, coupées sous prefers-reduced-motion.

   Aucun attribut style="" : la CSP (public/_headers) l'interdit.
   ========================================================================== */

/* --- Polices : celles de l'app (et de la v2), auto-hébergées, woff2 -------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* --- Tokens : le plateau clair -------------------------------------------- */
:root {
  /* Le site reste clair, quel que soit le réglage du téléphone (07/10) :
     les écrans sombres de l'app ressortent sur le plateau crème. */
  color-scheme: light;

  --bg: #F7F1E8;          /* le plateau */
  --bg-band: #EFE6D8;     /* bande « tapis » */
  --s1: #F2EADF;          /* tuile en retrait */
  --s2: #FFFCF7;          /* tuile */
  --s3: #FFFFFF;          /* tuile mise en avant */
  --line: #E3D6C3;
  --outline: #8B7E70;     /* ≥ 3:1 sur le plateau */
  --well: #EFE7DB;        /* champ en creux */
  --tile-edge: #D8C8B2;   /* tranche des tuiles */
  --ink: #1E1A24;
  --muted: #514859;       /* 7:1 sur le plateau */
  --faint: #857B8C;       /* grand texte seulement */

  /* Rôles : la face (pièces, aplats), la teinte, la tranche, l'encre (texte) */
  --brand-ink: #B5106A; --brand-tint: rgba(255, 30, 144, .11);
  --grad: linear-gradient(100deg, #FF1E90 0%, #FF4C62 52%, #FF7B04 100%);
  --grad-edge: linear-gradient(100deg, #A10C5A 0%, #A2283A 52%, #9E4400 100%);
  --on-brand: #2A0713;
  --lagon: #3CDCEA; --lagon-edge: #167C87; --lagon-ink: #0A6C77; --lagon-tint: rgba(60, 220, 234, .16); --on-lagon: #05252A;
  --gold: #FFCE3A; --gold-edge: #A87A00; --gold-ink: #7A5600; --gold-tint: rgba(255, 206, 58, .22); --on-gold: #2B1D00;
  --violet-ink: #6A34C2; --violet-tint: rgba(176, 123, 255, .16);
  --streak: #FF8A1C; --streak-ink: #9E4700; --streak-tint: rgba(255, 138, 28, .15);
  --ok-ink: #17744A; --ok-tint: rgba(75, 219, 149, .18);
  --err-ink: #B42318;

  /* Pièces neutres (bouton secondaire, chips) : de l'ivoire sur le plateau clair */
  --piece: #FFFDF8; --piece-hi: #FFFFFF; --piece-edge: #CDBDA8; --on-piece: var(--ink);

  /* Relief (R2, « doux ») */
  --e-piece: 4px; --e-big: 5px; --e-tile: 2px; --hl-piece: .5; --hl-tile: .9;
  --r-s: 12px; --r-m: 16px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;
  /* Ombres de contact : le matériel posé est décalé vers la droite */
  --sh-free: 2px 3px 0 rgba(70, 45, 20, .13), 4px 7px 10px -2px rgba(70, 45, 20, .16);
  --sh-phone: 5px 8px 0 rgba(70, 45, 20, .10), 14px 22px 30px -14px rgba(70, 45, 20, .38);
  --drop: drop-shadow(2px 3px 0 rgba(70, 45, 20, .14));
  --grain-op: .5;

  /* Mouvement (R6) */
  --t-press: 70ms; --t-release: 260ms;
  --ease-press: cubic-bezier(.33, 1, .68, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --f-ui: "Plus Jakarta Sans", Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-disp: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1160px;
  --gutter: 16px;
  --section-y: clamp(64px, 9vw, 112px);
  --header-h: 68px;
}


/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Le grain du plateau, à peine perceptible (le kit : --grain). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
picture { display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-ui); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
strong, b { color: var(--ink); }

:focus-visible { outline: 3px solid var(--lagon-ink); outline-offset: 3px; border-radius: 8px; }

.kit-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icônes du kit (style « pièce »), une couleur chacune */
.ic { width: 1.25em; height: 1.25em; flex: none; overflow: visible; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; } /* ancien sprite */
.c-brand { color: var(--brand-ink); }
.c-lagon { color: var(--lagon-ink); }
.c-gold { color: var(--gold-ink); }
.c-violet { color: var(--violet-ink); }
.c-streak { color: var(--streak-ink); }
.c-ok { color: var(--ok-ink); }
.c-muted { color: var(--muted); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

/* --- Pièces : la famille des boutons (kit R2) -------------------------------
   Le visage est ::before, la tranche ::after ; l'élément descend de --e à
   l'appui pendant que la tranche reste posée. */
.btn, .game-chips a, .lang-chip, .faq summary {
  --e: var(--e-piece);
  --face: linear-gradient(180deg, var(--piece-hi), var(--piece));
  --edge: var(--piece-edge);
  --fg: var(--on-piece);
  --r: var(--r-m);
  position: relative;
  isolation: isolate;
  color: var(--fg);
  border-radius: var(--r);
  margin-bottom: var(--e);
  transform: translateY(0);
  transition: transform var(--t-release) var(--ease-bounce);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn::before, .game-chips a::before, .lang-chip::before, .faq summary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--face);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, var(--hl-piece)), inset 0 -1.5px 0 rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(0, 0, 0, .04);
  transition: filter 120ms;
}
.btn::after, .game-chips a::after, .lang-chip::after, .faq summary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--edge);
  transform: translateY(var(--e));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform var(--t-release) var(--ease-bounce);
}
:is(.btn, .game-chips a, .lang-chip, .faq summary):hover::before { filter: brightness(1.04); }
:is(.btn, .game-chips a, .lang-chip, .faq summary):active:not([disabled]) {
  transform: translateY(var(--e));
  transition-duration: var(--t-press);
  transition-timing-function: var(--ease-press);
}
:is(.btn, .game-chips a, .lang-chip, .faq summary):active:not([disabled])::after { transform: translateY(0); transition-duration: var(--t-press); }
:is(.btn, .game-chips a, .lang-chip, .faq summary):active:not([disabled])::before { filter: brightness(.94); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  background: none;
  font: 700 16px/1.15 var(--f-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn .ic { width: 20px; height: 20px; }
.btn--primary { --face: var(--grad); --edge: var(--grad-edge); --fg: var(--on-brand); font-weight: 800; }
.btn--primary::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 46%), var(--grad);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.btn--secondary { font-weight: 800; }
.btn--ghost { --e: 0px; --fg: var(--lagon-ink); margin-bottom: 0; font-weight: 800; }
.btn--ghost::before, .btn--ghost::after { background: transparent; box-shadow: none; }
.btn--ghost:hover::before { background: var(--lagon-tint); }
.btn--small { min-height: 42px; padding: 0 16px; font-size: 14.5px; --r: var(--r-s); }
.btn--large { min-height: 58px; padding: 0 26px; font-size: 17px; --e: var(--e-big); --r: 18px; }
.btn[disabled] { cursor: progress; opacity: .7; }
.cta-group { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

/* --- Tuiles (contenu posé, tranche fine) ------------------------------------ */
.tile {
  position: relative;
  padding: 20px;
  border-radius: var(--r-l);
  background: var(--s2);
  box-shadow: 0 var(--e-tile) 0 var(--tile-edge), inset 0 1px 0 rgba(255, 255, 255, var(--hl-tile)), inset 0 0 0 1px rgba(0, 0, 0, .03);
}
.tile--flat { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.tile--brand {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 30, 144, .12), transparent 55%),
    radial-gradient(90% 90% at 100% 100%, rgba(255, 123, 4, .10), transparent 60%),
    var(--s3);
  box-shadow: 0 3px 0 var(--tile-edge), inset 0 1px 0 rgba(255, 255, 255, var(--hl-tile)), inset 0 0 0 1px rgba(255, 30, 144, .12);
}

/* Pastille d'icône teintée (la .pas de la carte Événement du kit) */
.pas, .lead {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--role);
}
.pas .ic { width: 26px; height: 26px; }
.lead { width: 34px; height: 34px; border-radius: 11px; }
.lead .ic { width: 20px; height: 20px; }
.pas--brand, .lead--brand, .state--brand { --role: var(--brand-ink); --tint: var(--brand-tint); }
.pas--lagon, .lead--lagon, .state--lagon { --role: var(--lagon-ink); --tint: var(--lagon-tint); }
.pas--gold, .lead--gold, .state--gold { --role: var(--gold-ink); --tint: var(--gold-tint); }
.pas--violet, .lead--violet, .state--violet { --role: var(--violet-ink); --tint: var(--violet-tint); }
.pas--streak, .lead--streak, .state--streak { --role: var(--streak-ink); --tint: var(--streak-tint); }
.pas--ok, .lead--ok, .state--ok { --role: var(--ok-ink); --tint: var(--ok-tint); }

/* Pastille d'état : plate, teintée, cerclée — l'inverse d'une pièce */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 12px 4px 8px;
  border-radius: var(--r-pill);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 35%, transparent);
  color: var(--role);
  font: 800 14px/1.2 var(--f-ui);
}
.state .ic { width: 18px; height: 18px; }

/* --- Typographie --------------------------------------------------------------- */
.eyebrow, .over {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font: 800 14px/1.3 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.section__head--center .eyebrow { justify-content: center; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 7vw, 72px); }
.section__head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head .eyebrow { margin-bottom: 0; }
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section__head--center.container { max-width: calc(46rem + 2 * var(--gutter)); }
/* Titres : les styles de la v2 (Plus Jakarta Sans 800, approche serrée). */
.section__title {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(32px, 6.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.section__title--small { font-size: clamp(26px, 4.4vw, 38px); }
.section__lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); }
/* Surligneur de marque (technique de la v2) : un aplat bas, sous les mots,
   sur un élément EN LIGNE ; box-decoration-break le recopie sur chaque
   ligne, il suit donc le texte quand il passe à la ligne. Le texte reste
   encre (blanc en sombre). Ne jamais le poser sur un bloc. */
.hl {
  background: linear-gradient(95deg, rgba(212, 25, 191, .34), rgba(255, 30, 144, .34) 45%, rgba(249, 138, 54, .44)) no-repeat 0 88% / 100% .36em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .06em;
}
.text-gradient { color: var(--brand-ink); }

/* --- En-tête ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  backdrop-filter: saturate(1.3) blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--header-h); }
.brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand__logo { display: block; width: fit-content; border-radius: 6px; color: var(--ink); }
.brand__svg { width: 104px; height: auto; aspect-ratio: 4123 / 1018; }
.brand__baseline { font: 700 12px/1.25 var(--f-ui); color: var(--muted); }
@media (min-width: 640px) {
  .brand { flex-direction: row; align-items: center; gap: 14px; }
  .brand__svg { width: 120px; }
  .brand__baseline { padding-left: 14px; border-left: 2px solid var(--line); font-size: 14.5px; }
}
@media (max-width: 439px) { .brand__baseline { display: none; } }
.site-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.menubar { display: none; align-items: center; gap: 2px; }
@media (min-width: 1100px) { .menubar { display: flex; } }
.menu { position: relative; }
.menu__button, .menubar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-s);
  font: 800 15px/1.2 var(--f-ui);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__button .ic { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.menu__details[open] > .menu__button .ic { transform: rotate(180deg); }
.menu__button:hover, .menubar__link:hover, .menu__details[open] > .menu__button { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.menu .menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 260px;
  max-width: min(460px, 90vw);
  padding: 10px;
  border-radius: var(--r-l);
  background: var(--s3);
  box-shadow: 0 3px 0 var(--tile-edge), inset 0 0 0 1px var(--line), var(--sh-free);
}
.menu__panel--games { grid-template-columns: repeat(2, max-content); column-gap: 6px; }
.menu__panel--games li:last-child, .drawer__list--games li:last-child { grid-column: 1 / -1; }
.menu__panel a { white-space: nowrap; }
.menu__panel a, .drawer__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-s);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.menu__panel a:hover, .drawer__list a:hover { background: var(--lagon-tint); }
.menu__all { color: var(--lagon-ink); }
.lang-chip {
  --r: var(--r-s);
  --e: 3px;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 40px;
  padding: 0 8px;
  font: 800 14px/1 var(--f-ui);
  letter-spacing: .04em;
  text-decoration: none;
}
.btn--header { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (max-width: 559px) {
  .btn--header { max-width: 112px; padding: 4px 10px; font-size: 13px; line-height: 1.1; white-space: normal; }
  .site-nav { gap: 8px; }
  .lang-chip { display: none; }
}
/* Tiroir (mobile et tablette) */
.drawer { flex: none; }
@media (min-width: 1100px) { .drawer { display: none; } }
.drawer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1.5px var(--outline);
  font: 800 14px/1 var(--f-ui);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.drawer__button::-webkit-details-marker { display: none; }
.drawer[open] > .drawer__button { background: var(--s2); }
.drawer__icon, .drawer__icon::before, .drawer__icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease-out), opacity 200ms;
}
.drawer__icon { position: relative; }
.drawer__icon::before, .drawer__icon::after { content: ""; position: absolute; left: 0; }
.drawer__icon::before { top: -6px; }
.drawer__icon::after { top: 6px; }
.drawer[open] .drawer__icon { background: transparent; }
.drawer[open] .drawer__icon::before { transform: translateY(6px) rotate(45deg); }
.drawer[open] .drawer__icon::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 479px) { .drawer__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.drawer__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 12px var(--gutter) 28px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line), 0 3px 0 var(--tile-edge);
}
.drawer__title { margin: 14px 0 6px; padding-inline: 12px; font: 800 12.5px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.drawer__list { display: grid; gap: 2px; margin: 0 0 8px; }
.drawer__list--games { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
.drawer__list a { font: 700 17px/1.25 var(--f-ui); }
/* Sélecteur de langue (tiroir, pied de page) */
.lang-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; }
.lang-switch .ic { width: 22px; height: 22px; color: var(--lagon-ink); }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.lang-switch [aria-current] { font-weight: 800; }
.lang-switch--drawer { margin-top: 18px; padding-inline: 12px; color: var(--muted); }
.lang-switch--footer { margin-top: 16px; }

/* --- Téléphone : un cadre propre autour des vraies captures ------------------- */
.phone {
  --pw: 240px;
  position: relative;
  width: var(--pw);
  margin: 0;
  padding: calc(var(--pw) * .028);
  border-radius: calc(var(--pw) * .16);
  background: linear-gradient(145deg, #3A3541, #16131B 40%, #0E0C12);
  box-shadow: var(--sh-phone), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--pw) * .135);
  background: #110F15;
}
/* Les boutons latéraux, dessinés en CSS */
.phone::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 22%;
  width: 3px;
  height: 11%;
  border-radius: 2px 0 0 2px;
  background: #2A2631;
  box-shadow: 0 calc(var(--pw) * .2) 0 #2A2631;
}
@media (min-width: 720px) { .phone { --pw: 260px; } }
@media (min-width: 1080px) { .phone { --pw: 300px; } }
.phone--back { --pw: 176px; }
@media (min-width: 720px) { .phone--back { --pw: 210px; } }
@media (min-width: 1080px) { .phone--back { --pw: 250px; } }

/* Le matériel posé sur le plateau : meeples, dé, badge, médaille, podium */
.deco, .m, .event__vis, .proof__meeple, .talk__die, .final-cta__podium img { filter: var(--drop); }

/* --- Héros ------------------------------------------------------------------------ */
.hero { position: relative; padding-block: clamp(28px, 6vw, 72px) clamp(48px, 7vw, 88px); overflow: hidden; }
.hero__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 48px; } }
.hero__copy { display: grid; gap: 22px; justify-items: start; }
.hero .app-listing { margin-top: 2px; }
.hero__title {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(40px, 10.5vw, 74px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.hero__line { display: block; }
/* Sur grand écran, la phrase surlignée tient sur une ligne (comme la v2) ;
   sur téléphone, elle peut passer à la ligne : le surlignage suit. */
@media (min-width: 900px) {
  .hero__title { font-size: min(5vw, 64px); }
  .hero__title .hl { white-space: nowrap; }
}
.hero__lead { max-width: 34rem; color: var(--muted); font-size: clamp(18px, 1.8vw, 20px); line-height: 1.55; }
.hero__micro { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; font-weight: 600; }
.hero__micro .ic { width: 20px; height: 20px; }
.hero__visual { position: relative; display: grid; justify-items: center; padding: 8px 0 28px; }
.hero__glow {
  position: absolute;
  inset: 0 -10% 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 206, 58, .38), rgba(255, 206, 58, 0) 72%),
              radial-gradient(40% 40% at 72% 72%, rgba(255, 30, 144, .14), transparent 70%);
}
.phone--hero { --pw: min(62vw, 280px); transform: rotate(-2.5deg); }
@media (min-width: 1080px) { .phone--hero { --pw: 320px; } }
.hero__meeples {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: calc(min(62vw, 280px) + 112px);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (min-width: 1080px) { .hero__meeples { width: 480px; } }
.m { width: 60px; height: auto; }
.m--1 { width: 70px; transform: rotate(-6deg); }
.m--3 { transform: rotate(5deg); }
@media (min-width: 1080px) { .m { width: 80px; } .m--1 { width: 92px; } }

/* --- Pastilles du héros (la v2) : plates, ce sont des étiquettes -------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Phrase d'en-tête du héros (reprise de la v2), posée au-dessus du titre. */
.hero__kicker {
  display: block;
  margin-bottom: 12px;
  font: 800 clamp(15px, 2.2vw, 18px)/1.3 var(--f-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); font: 800 14px/1.4 var(--f-ui); }
.chip .ic { width: 18px; height: 18px; }
.chip--lagon { background: var(--lagon); color: var(--on-lagon); }
.chip--lagon .ic { color: #fff; }
.chip--gold { background: var(--gold); color: var(--on-gold); }

/* --- Le problème : la baseline historique et son dé (le composant de la v2) --- */
.problem { padding-block: clamp(48px, 7vw, 80px); background: var(--bg-band); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); overflow: hidden; }
.problem__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 820px) { .problem__grid { grid-template-columns: 1fr auto; gap: 56px; } }
/* L'accueil de l'app : le téléphone sort de la bande, coupé par son bord bas. */
.problem__visual { align-self: end; display: grid; justify-items: center; margin-bottom: calc(-1 * clamp(48px, 7vw, 80px)); }
.phone--crop { --pw: 220px; padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transform: rotate(2deg) translateY(10px); }
.phone--crop img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 820px) { .phone--crop { --pw: 260px; } }
.problem__title { font: 800 clamp(30px, 6vw, 48px)/1.1 var(--f-disp); letter-spacing: -.02em; }
.tagline-band__inner { display: grid; gap: 14px; justify-items: center; text-align: center; }
.tagline { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 76px; }
.tagline__text { max-width: 34ch; font: 700 clamp(19px, 3.4vw, 26px)/1.3 var(--f-disp); color: var(--brand-ink); text-wrap: balance; }
.tagline__text.is-new { animation: pop 380ms var(--ease-bounce); }
.tagline__roll { flex: none; padding: 6px; border: 0; border-radius: 18px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tagline__roll img { width: 72px; height: auto; transform: rotate(var(--roll, -8deg)); transition: transform 600ms var(--ease-bounce); filter: var(--drop); }
.tagline__roll:hover img { filter: var(--drop) brightness(1.05); }
.tagline-band__hint { font-size: 14px; color: var(--muted); }
@keyframes pop { from { transform: scale(.9); } to { transform: scale(1); } }
@media (min-width: 820px) {
  .tagline-band__inner { justify-items: start; text-align: left; }
  .tagline { justify-content: flex-start; }
}

/* --- Ce que fait Ludingo : les cinq blocs ---------------------------------------- */
.what { padding-top: var(--section-y); }
.block { padding-block: clamp(40px, 6vw, 80px); }
.block__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .block__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .block--reverse .block__copy { order: 2; }
}
.block__copy { display: grid; gap: 18px; justify-items: start; max-width: 36rem; }
.block__copy .over { margin-bottom: 0; }
.over__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 40px;
  border-radius: 6px;
  background: var(--s3);
  box-shadow: var(--sh-free), inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: 800 20px/1 var(--f-disp);
  letter-spacing: 0;
  transform: rotate(-4deg);
}
.block--reverse .over__num { transform: rotate(3deg); }
.block__title { font: 800 clamp(30px, 4.6vw, 46px)/1.08 var(--f-disp); letter-spacing: -.025em; }
.block__text { color: var(--muted); font-size: 18px; }
.block__more { color: var(--muted); font-size: 15.5px; }
.block__more a, .faq a, .signup a, .beta__card .noscript-note a { color: var(--lagon-ink); font-weight: 700; text-underline-offset: 3px; }
.bullets { display: grid; gap: 14px; margin-top: 4px; }
.bullets li { display: flex; align-items: flex-start; gap: 14px; }
.bullets p { padding-top: 4px; color: var(--muted); line-height: 1.5; }
.bullets strong { font-family: var(--f-ui); font-weight: 800; }
.block__visual { position: relative; display: grid; justify-items: center; width: 100%; padding-block: 12px 20px; }
.block__visual > .phone:first-child { transform: rotate(-1.5deg); }
.block--reverse .block__visual > .phone:first-child { transform: rotate(1.5deg); }
.block__visual--duo { justify-items: start; max-width: 520px; margin-inline: auto; }
.block__visual--duo > .phone:first-child { z-index: 2; margin-left: 2%; }
.block__visual--duo .phone--back { position: absolute; right: 10px; top: 14%; z-index: 1; transform: rotate(5deg); }
@media (max-width: 719px) { .block__visual--duo > .phone:first-child { --pw: 216px; } .block__visual--duo .phone--back { --pw: 160px; } }
.deco { position: absolute; z-index: 3; height: auto; pointer-events: none; }
.deco--die { width: 68px; left: 6%; bottom: 4%; transform: rotate(-10deg); }
.deco--badge { width: 76px; right: 2%; top: 0; z-index: 3; }
.deco--medal { width: 40px; right: 8%; bottom: 0; transform: rotate(6deg); }
@media (min-width: 1080px) { .deco--die { width: 88px; left: 12%; } .deco--badge { width: 96px; } .deco--medal { width: 52px; } }

/* La carte Événement (LK.event) : un fait marquant posé sur la table */
.event {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 4px 0 0;
  padding: 14px 18px 14px 16px;
  border-radius: var(--r-m);
  background: var(--s3);
  box-shadow: 0 2px 0 var(--tile-edge), var(--sh-free), inset 0 0 0 1px color-mix(in srgb, var(--lagon-ink) 28%, transparent);
  transform: rotate(-.6deg);
}
.event::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; background: var(--lagon); }
.event__vis { width: 46px; height: auto; flex: none; }
.event__over { margin-bottom: 4px; font: 800 11.5px/1.2 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--lagon-ink); }
.event blockquote { margin: 0; }
.event blockquote p { font: 700 17px/1.4 var(--f-ui); color: var(--ink); }
.tokens { display: flex; flex-wrap: wrap; gap: 8px; }
/* Une ligne calculée toute seule, posée sur la feuille de score (la v2 le
   montrait sur sa capture ; ici, une carte du kit). */
.calc {
  position: absolute;
  z-index: 4;
  right: -6px;
  bottom: -2%;
  display: grid;
  gap: 4px;
  max-width: 260px;
  margin: 0;
  padding: 12px 16px 12px 18px;
  border-radius: var(--r-m);
  background: var(--s3);
  box-shadow: 0 2px 0 var(--tile-edge), var(--sh-free), inset 0 0 0 1px color-mix(in srgb, var(--lagon-ink) 28%, transparent);
  color: var(--ink);
  font: 700 15px/1.4 var(--f-ui);
  transform: rotate(2deg);
}
.calc::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; background: var(--lagon); }
.calc__over { display: flex; align-items: center; gap: 6px; font: 800 11.5px/1.2 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--lagon-ink); }
.calc__over .ic { width: 16px; height: 16px; }
@media (max-width: 599px) {
  .calc { position: relative; right: auto; bottom: auto; max-width: none; width: 100%; margin-top: 18px; transform: none; }
}

/* --- La boîte à outils ------------------------------------------------------------ */
.tools { background: var(--bg-band); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.tools__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .tools__grid { grid-template-columns: 1.3fr .7fr; gap: 56px; } }
.tools__cards { display: grid; gap: 14px; }
@media (min-width: 640px) { .tools__cards { grid-template-columns: repeat(3, 1fr); } }
.tools__cards .tile { display: grid; gap: 10px; align-content: start; }
.tools__cards h3 { font: 800 18px/1.3 var(--f-ui); }
.tools__cards p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.tools__visual { display: grid; justify-items: center; }
.tools__visual .phone { transform: rotate(2deg); }

/* --- Comment ça marche : trois cartes numérotées ------------------------------- */
.how__steps { display: grid; gap: 20px; }
@media (min-width: 820px) { .how__steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.how__step { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-l); background: var(--s2); box-shadow: 0 var(--e-tile) 0 var(--tile-edge), inset 0 1px 0 rgba(255, 255, 255, var(--hl-tile)); }
.card-num {
  --c: var(--brand-ink);
  display: grid;
  place-items: center;
  width: 54px;
  height: 74px;
  margin-bottom: 6px;
  border-radius: 9px;
  background: var(--s3);
  box-shadow: var(--sh-free), inset 0 0 0 1px var(--line), inset 0 0 0 5px var(--s3), inset 0 0 0 6px color-mix(in srgb, var(--c) 32%, transparent);
  font: 800 34px/1 var(--f-disp);
  color: var(--c);
  transform: rotate(-4deg);
}
.how__step:nth-child(2) .card-num { --c: var(--lagon-ink); transform: rotate(3deg); }
.how__step:nth-child(3) .card-num { --c: var(--gold-ink); transform: rotate(-2deg); }
.how__step h3 { font: 800 19px/1.3 var(--f-ui); }
.how__step p { color: var(--muted); }
.how__step small { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--lagon-ink); }

/* --- Les preuves : les chiffres réels de l'app ------------------------------------ */
.proof { padding-top: 0; }
.proof__list { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .proof__list { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.proof__list .tile { display: grid; gap: 10px; align-content: start; padding: 18px; }
.proof__n { display: block; font: 800 clamp(38px, 5vw, 52px)/1 var(--f-disp); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof__s { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.4; }
.proof__signed { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 40rem; margin: 36px auto 0; color: var(--ink); font: 700 clamp(17px, 2vw, 19px)/1.45 var(--f-ui); }
.proof__meeple { width: 44px; height: auto; flex: none; transform: rotate(-5deg); }

/* --- Règles de score (liens vers les pages par jeu) ----------------------------- */
.games-band .section__head { margin-bottom: 28px; }
.game-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.games-band .game-chips { justify-content: center; }
.game-chips a {
  --r: var(--r-s);
  --e: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font: 800 15px/1.2 var(--f-ui);
  text-decoration: none;
}
.game-chips .game-chips__all { --face: var(--lagon); --edge: var(--lagon-edge); --fg: var(--on-lagon); }

/* --- La bêta ---------------------------------------------------------------------- */
.beta__grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .beta__grid { grid-template-columns: 1.35fr 1fr; gap: 28px; } }
.beta__card { display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); }
.beta__card .eyebrow { margin-bottom: 0; }
.beta__form { display: grid; gap: 16px; width: 100%; max-width: 34rem; }
.beta__form .btn--large { margin-top: 2px; }
.beta__thanks { display: grid; gap: 12px; justify-items: start; max-width: 34rem; }
.beta__thanks:focus { outline: none; }
/* Le choix du téléphone : deux étiquettes cliquables, cochées en Lagon (choisir). */
.os-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.os-field legend { margin-bottom: 8px; padding: 0; font: 800 14.5px/1.3 var(--f-ui); }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--r-s);
  background: var(--well);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: 800 16px/1.2 var(--f-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.choice__item input { width: 20px; height: 20px; margin: 0; accent-color: var(--lagon-ink); }
.choice__item:has(input:checked) { background: var(--lagon-tint); box-shadow: inset 0 0 0 2px var(--lagon-ink); }
.choice__item:has(input:focus-visible) { outline: 3px solid var(--lagon-ink); outline-offset: 2px; }
.os-field.is-invalid .choice__item { box-shadow: inset 0 0 0 2px var(--err-ink); }
.os-field .field__error { margin-top: 6px; }
.field__help { color: var(--muted); font-size: 14px; line-height: 1.45; }
.field__optional { color: var(--muted); font-weight: 600; }
.beta__reassure { display: grid; gap: 8px; }
.beta__reassure li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.beta__reassure .ic { width: 20px; height: 20px; }
.signup { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); }
.signup h3 { font: 800 21px/1.25 var(--f-ui); }
.signup > p { color: var(--muted); }
.signup__form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font: 800 14.5px/1.3 var(--f-ui); }
.field input, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--well);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .10), inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  font: 600 16px/1.3 var(--f-body);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .10), inset 0 0 0 2px var(--lagon-ink); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--err-ink); }
.field__error { color: var(--err-ink); font-size: 14.5px; font-weight: 700; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; font-size: 15px; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--lagon-ink); }
.consent .field__error { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__status { font-weight: 700; }
.signup__status:empty { display: none; }
.signup__status.is-error { color: var(--err-ink); }
.signup__fine { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.noscript-note { font-size: 14.5px; }
.signup__thanks { display: grid; gap: 12px; justify-items: start; }
.signup__thanks:focus { outline: none; }

/* --- FAQ : chaque question est une pièce qu'on actionne ----------------------- */
.faq { display: grid; gap: 14px; max-width: 48rem; margin-inline: auto; }
.faq summary {
  --r: var(--r-m);
  --e: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 16px 14px 20px;
  font: 800 17.5px/1.35 var(--f-ui);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--lagon-tint); color: var(--lagon-ink); transition: transform var(--t-release) var(--ease-bounce); }
.faq__plus .ic { width: 20px; height: 20px; }
.faq details[open] .faq__plus { transform: rotate(45deg); }
.faq details > div { display: grid; gap: 10px; padding: 16px 20px 6px; color: var(--muted); }

/* --- Dernier appel ---------------------------------------------------------------- */
.final-cta { padding-top: clamp(40px, 6vw, 64px); padding-bottom: 0; }
.final-cta__inner { display: grid; gap: 28px; justify-items: center; text-align: center; }
.final-cta__inner > div { display: grid; gap: 14px; justify-items: center; }
.final-cta__inner .cta-group { margin-top: 6px; }
.final-cta__podium img { width: 250px; height: auto; }
@media (min-width: 820px) {
  .final-cta__inner { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 56px; text-align: left; }
  .final-cta__inner > div { justify-items: start; }
  .final-cta__podium img { width: 300px; }
}

/* --- Badges des stores --------------------------------------------------------------
   Fichiers officiels, non modifiés. Même hauteur visible pour les deux. Tant
   que l'app n'est pas publiée, le badge reste intact et c'est son contexte qui
   dit « pas encore » : pas de lien, aria-disabled, mention « Bientôt disponible ». */
.stores { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: flex-start; }
.stores li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.store-badge { display: block; border-radius: 9px; }
.store-badge img { display: block; height: 48px; width: auto; }
.store-badge[aria-disabled="true"] { cursor: not-allowed; }
.store-badge--google-fr img { height: 62.5px; width: 161.5px; margin-block: -7.25px; }
.store-badge--google-en img { height: 71.4px; width: 184.5px; margin: -11.7px; }
.store-badge--apple-fr img { width: 152px; }
.store-badge--apple-en img { width: 144px; }
.app-listing { display: flex; align-items: flex-start; gap: 14px; }
.app-listing__icon { flex: none; width: 64px; height: 64px; border-radius: 15px; }
.store-soon { padding: 2px 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.stores--small .store-badge img { height: 40px; }
.stores--small .store-badge--google-fr img { height: 52px; width: 134.6px; margin-block: -6px; }
.stores--small .store-badge--google-en img { height: 59.5px; width: 153.8px; margin: -9.75px; }
.stores--small .store-badge--apple-fr img { width: 126.5px; }
.stores--small .store-badge--apple-en img { width: 119.7px; }

/* --- Pied de page : le fond de la boîte -------------------------------------------- */
.site-footer { margin-top: var(--section-y); padding-block: 56px 32px; background: var(--bg-band); box-shadow: inset 0 1px 0 var(--line); }
.site-footer__grid { display: grid; gap: 36px; }
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; } }
.site-footer__brand { display: grid; gap: 12px; align-content: start; color: var(--ink); }
.site-footer__logo { width: 132px; height: auto; aspect-ratio: 4123 / 1018; }
.site-footer__baseline { max-width: 20rem; font: 800 20px/1.3 var(--f-disp); }
.site-footer__title { margin-bottom: 12px; font: 800 13px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.site-footer nav ul:not(.stores) { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-footer nav a { display: inline-block; padding-block: 6px; text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { text-decoration: underline; text-decoration-color: var(--brand-ink); text-underline-offset: 4px; }
.site-footer nav .stores { margin-top: 16px; }
.site-footer nav .stores a { padding: 0; }
.site-footer__bottom { display: grid; gap: 6px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer__bottom a { color: var(--ink); }

/* --- Pages de jeu ------------------------------------------------------------------ */
.game-page { padding-block: 32px 0; }
.game-page__inner { max-width: calc(52rem + 2 * var(--gutter)); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; }
.breadcrumbs a { color: var(--muted); font-weight: 600; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 700; }
.game-page__head { display: grid; gap: 16px; margin-bottom: 40px; }
.game-page h1 { font-size: clamp(34px, 6vw, 52px); }
.game-facts { display: grid; gap: 10px; margin: 8px 0 0; }
@media (min-width: 640px) { .game-facts { grid-template-columns: repeat(3, 1fr); } }
.game-facts div { padding: 12px 16px; border-radius: var(--r-m); background: var(--s2); box-shadow: 0 var(--e-tile) 0 var(--tile-edge); }
.game-facts dt { font: 800 12px/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.game-facts dd { margin: 2px 0 0; font: 800 16px/1.3 var(--f-ui); }
.game-section { margin-top: 44px; }
.game-section h2, .game-cta__title, .game-related h2 { margin-bottom: 16px; font: 800 clamp(26px, 4vw, 32px)/1.15 var(--f-disp); letter-spacing: -.02em; }
.game-section h3 { margin-bottom: 6px; font-size: 18px; }
.game-section p + h3 { margin-top: 20px; }
.game-section p { color: var(--muted); }
.score-lines { display: grid; margin: 0; border-radius: var(--r-l); background: var(--s2); box-shadow: 0 var(--e-tile) 0 var(--tile-edge), inset 0 0 0 1px var(--line); overflow: hidden; }
.score-lines div { display: grid; gap: 4px; padding: 14px 20px; }
.score-lines div + div { border-top: 1px dashed var(--line); }
@media (min-width: 640px) { .score-lines div { grid-template-columns: 15rem 1fr; gap: 20px; } }
.score-lines dt { font-family: var(--f-ui); font-weight: 800; }
.score-lines dd { margin: 0; color: var(--muted); }
.game-example p { padding: 16px 20px; border-radius: var(--r-m); background: var(--s3); box-shadow: 0 2px 0 var(--tile-edge), inset 4px 0 0 var(--lagon); color: var(--ink); font-size: 17px; }
/* Pages enrichies par le Ludi'Check : la mise en place, phase par phase, en étapes numérotées. */
.setup-intro { margin-bottom: 16px; }
.setup-phase + .setup-phase { margin-top: 24px; }
.setup-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.setup-steps li { position: relative; padding-left: 36px; color: var(--muted); counter-increment: step; }
.setup-steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--lagon); color: var(--on-lagon); font: 800 13px/1 var(--f-ui); }
.setup-steps small { display: block; margin-top: 2px; font-size: 14px; color: var(--faint); }
.pitfalls { display: grid; gap: 10px; }
.pitfalls li { position: relative; padding-left: 36px; color: var(--muted); }
.pitfalls li::before { content: "!"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: 14px; }
.game-cta { display: grid; gap: 16px; margin-top: 56px; padding: 24px 20px; border-radius: var(--r-xl); background: var(--s3); box-shadow: 0 3px 0 var(--tile-edge), inset 0 0 0 1px rgba(255, 30, 144, .12); }
@media (min-width: 600px) { .game-cta { padding: 32px; } }
.game-cta__title { margin-bottom: 6px; }
.game-cta__sources { font-size: 14px; color: var(--muted); }
.game-cta__sources a { color: var(--muted); }
.game-cta__launch { font-weight: 700; }
.game-related { margin-top: 56px; }
.talk { display: flex; align-items: center; gap: 14px; }
.talk__die { width: 56px; height: auto; flex: none; }
.games-index { padding-bottom: 0; }
.games-index .section__head { margin-bottom: 32px; }
.game-cards { display: grid; gap: 16px; margin-bottom: 40px; }
@media (min-width: 640px) { .game-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .game-cards { grid-template-columns: repeat(3, 1fr); } }
.games-search { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin-bottom: 24px; }
.games-search .field { flex: 1 1 280px; max-width: 460px; }
.games-search__count { margin: 0 0 12px; font: 700 14.5px/1.3 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.games-search__empty { margin: -16px 0 24px; font-weight: 700; color: var(--ink); }
.game-card[hidden] { display: none; }
.game-card { position: relative; display: grid; gap: 10px; padding: 20px; border-radius: var(--r-l); background: var(--s2); box-shadow: 0 3px 0 var(--tile-edge), inset 0 1px 0 rgba(255, 255, 255, var(--hl-tile)); transition: transform var(--t-release) var(--ease-bounce), box-shadow var(--t-release) var(--ease-bounce); }
.game-card h2 { font: 800 24px/1.15 var(--f-disp); letter-spacing: -.02em; }
.game-card h2 a { text-decoration: none; }
.game-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
.game-card h2 a:focus-visible { outline: none; }
.game-card:has(a:focus-visible) { outline: 3px solid var(--lagon-ink); outline-offset: 3px; }
.game-card:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tile-edge); }
.game-card p { display: grid; gap: 4px; font-size: 14.5px; color: var(--muted); }
.games-index__more { display: grid; gap: 16px; justify-items: start; }

/* --- Pages de texte (légal, 404, invitation, service) ------------------------------ */
.legal-lang { max-width: 44rem; margin: 0 auto 24px; padding: 10px 14px; border-radius: var(--r-s); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; color: var(--muted); }
.prose-page { padding-block: 48px 0; }
.prose { max-width: 44rem; margin-inline: auto; color: var(--muted); font-size: 17px; line-height: 1.7; }
.prose h1 { margin-bottom: 24px; color: var(--ink); font: 800 clamp(34px, 7vw, 48px)/1.08 var(--f-disp); letter-spacing: -.025em; }
.prose h2 { margin: 48px 0 16px; color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1.25; }
.prose h3 { margin: 32px 0 8px; color: var(--ink); font-size: 19px; font-weight: 700; }
.prose p, .prose ul, .prose ol, .prose table, .prose blockquote { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--brand-ink); }
.prose a { color: var(--lagon-ink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--well); font-size: .9em; }
.prose blockquote { padding: 12px 18px; border-radius: var(--r-s); background: var(--s2); box-shadow: inset 4px 0 0 var(--streak); }
.table-wrap { margin: 0 0 24px; overflow-x: auto; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); background: var(--s2); }
.prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--s1); color: var(--ink); font-weight: 700; }
.prose tr:last-child td { border-bottom: 0; }
.todo { padding: 1px 6px; border-radius: 6px; background: var(--gold); color: var(--on-gold); font-weight: 700; }
.not-found { display: grid; place-items: center; min-height: 58vh; padding-block: 64px 0; text-align: center; }
.not-found > div { display: grid; gap: 8px; justify-items: center; }
.not-found__code { font: 800 clamp(88px, 26vw, 160px)/1 var(--f-disp); letter-spacing: -.04em; }
.not-found__die { width: 110px; margin: 0 auto 16px; animation: die-roll 2.6s var(--ease-bounce) 2; }
.not-found p { margin-top: 8px; color: var(--muted); font-size: 18px; }
.not-found__en { font-size: 16px !important; font-style: italic; }
.not-found .cta-group { justify-content: center; margin-top: 16px; }
.utility p a, .not-found p a { color: var(--lagon-ink); font-weight: 700; }
/* Retours des liens d'authentification de l'app (/auth/*) */
.auth-return, .auth-return > div { display: grid; gap: 8px; justify-items: center; }
.auth-return p { max-width: 62ch; }
.not-found .auth-return__note { font-size: 15px; }
.auth-return .stores { justify-content: center; margin-top: 16px; }
.unsubscribe { display: grid; gap: 12px; justify-items: center; }
.unsubscribe__status { font-weight: 700; }
.unsubscribe__status:empty { display: none; }
.invite-code { font-family: var(--f-ui); letter-spacing: .08em; }
.invite-code strong { user-select: all; }
@keyframes die-roll {
  0%, 60%, 100% { transform: rotate(0deg) translateY(0); }
  20% { transform: rotate(-18deg) translateY(-14px); }
  40% { transform: rotate(12deg) translateY(0); }
}

/* --- Mouvement réduit, contraste renforcé ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (prefers-contrast: more) {
  :root { --muted: #2E2838; --line: #A8988A; }
}

/* --- Héros sur téléphone (07/10) : les deux boutons sur une ligne, les deux
   badges des stores sur une ligne ------------------------------------------- */
@media (max-width: 520px) {
  .hero .cta-group { flex-wrap: nowrap; gap: 10px; align-items: stretch; justify-self: stretch; width: 100%; }
  .hero .cta-group .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    padding: 8px 12px;
    gap: 6px;
    font-size: 15px;
    line-height: 1.2;
  }
  .hero .cta-group .btn .ic { width: 18px; height: 18px; flex: none; }

  .hero .app-listing { gap: 10px; }
  .hero .app-listing__icon { width: 48px; height: 48px; border-radius: 11px; }
  .hero .stores { flex-wrap: nowrap; gap: 8px; }
  .hero .stores li { gap: 6px; min-width: 0; }
  .hero .store-badge img { height: 40px; }
  .hero .store-badge--google-fr img { height: 52px; width: 134.6px; margin-block: -6px; }
  .hero .store-badge--google-en img { height: 59.5px; width: 153.8px; margin: -9.75px; }
  .hero .store-badge--apple-fr img { width: 126.5px; }
  .hero .store-badge--apple-en img { width: 119.7px; }
  .hero .store-soon { padding: 2px 7px; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
}

/* Pages enrichies (Ludi'Check) : l'invitation à essayer l'app, haut dans la page. */
.game-try { display: grid; gap: 28px; align-items: center; margin: 24px 0 28px; padding: 28px 24px; border-radius: var(--r-xl); background: var(--s2); box-shadow: 0 var(--e-tile) 0 var(--tile-edge), inset 0 0 0 1px var(--line); }
@media (min-width: 860px) { .game-try { grid-template-columns: 1.1fr .9fr; padding: 36px 40px; } }
.game-try__title { margin: 0 0 10px; font: 800 clamp(24px, 3.6vw, 30px)/1.15 var(--f-disp); letter-spacing: -.02em; text-wrap: balance; }
.game-try p { margin: 0 0 18px; color: var(--muted); }
.game-try .stores { margin-top: 16px; }
.game-try__visual { position: relative; min-height: 0; }
@media (max-width: 859px) { .game-try__visual { max-width: 360px; margin-inline: auto; } }

/* Les trois onglets (règles express, calcul des points, mise en place). Sans
   JavaScript, la liste reste cachée et les trois sections se suivent. */
.game-tabs { margin-top: 44px; }
.game-tabs__list { position: sticky; top: calc(var(--header-h, 64px) + 8px); z-index: 5; display: flex; gap: 6px; margin-bottom: 24px; padding: 6px; border-radius: var(--r-pill); background: var(--s3); box-shadow: 0 2px 0 var(--tile-edge), inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.game-tabs__list::-webkit-scrollbar { display: none; }
.game-tab { flex: 1 0 auto; padding: 10px 16px; border-radius: var(--r-pill); color: var(--muted); font: 800 15px/1.2 var(--f-ui); text-align: center; text-decoration: none; white-space: nowrap; }
.game-tab:hover { color: var(--ink); }
.game-tab[aria-selected="true"] { background: var(--lagon); color: var(--on-lagon); box-shadow: 0 2px 0 var(--lagon-edge); }
.game-tab:focus-visible { outline: 3px solid var(--lagon); outline-offset: 2px; }
.game-tabpanel + .game-tabpanel { margin-top: 44px; }
.game-tabs.is-ready .game-tabpanel + .game-tabpanel { margin-top: 0; }
.game-tabpanel h2 { margin-bottom: 16px; font: 800 clamp(26px, 4vw, 32px)/1.15 var(--f-disp); letter-spacing: -.02em; }
.game-tabpanel h3 { margin: 28px 0 10px; font-size: 18px; }
.game-tabpanel p { color: var(--muted); }
.game-example__text { padding: 16px 20px; border-radius: var(--r-m); background: var(--s3); box-shadow: 0 2px 0 var(--tile-edge), inset 4px 0 0 var(--lagon); color: var(--ink) !important; font-size: 17px; }

.game-sources { margin-top: 32px; font-size: 14px; color: var(--faint); }
.game-sources a { color: inherit; }
/* L'invitation, après les onglets : un peu d'air avant la FAQ. */
.game-tabs + .game-try { margin-top: 44px; }
/* Onglets sur téléphone : libellés courts, plus serrés. */
.game-tab__short { display: none; }
@media (max-width: 560px) {
  .game-tab { padding: 9px 10px; font-size: 14px; }
  .game-tab__long { display: none; }
  .game-tab__short { display: inline; }
}
/* L'invitation des pages de jeux : règles et feuille de score côte à côte,
   en léger chevauchement (la colonne est trop étroite pour le duo de l'accueil). */
.game-try__visual.block__visual--duo { display: flex; justify-content: center; align-items: flex-start; max-width: none; margin-inline: auto; padding-bottom: 24px; }
.game-try__visual.block__visual--duo > .phone { position: relative; --pw: 200px; }
.game-try__visual.block__visual--duo > .phone:first-child { z-index: 2; margin-left: 0; transform: rotate(-3deg); }
.game-try__visual.block__visual--duo > .phone--back { right: auto; top: 30px; margin-left: -36px; transform: rotate(4deg); }
@media (min-width: 1080px) { .game-try__visual.block__visual--duo > .phone { --pw: 220px; } }
@media (max-width: 559px) { .game-try__visual.block__visual--duo > .phone { --pw: 150px; } .game-try__visual.block__visual--duo > .phone--back { margin-left: -28px; top: 22px; } }

/* ─── Bandeau des cookies ───────────────────────────────────────────────── */
.link-button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-banner { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.cookie-banner[hidden] { display: none; }
/* Aux couleurs de Ludingo : le fond encre de l'app, le liseré dégradé de la marque. */
.cookie-banner__card { position: relative; overflow: hidden; pointer-events: auto; max-width: 560px; margin: 0 auto; padding: 20px 20px 18px; border-radius: var(--r-l); background: var(--ink); color: #FFFFFF; box-shadow: var(--sh-phone); display: grid; gap: 8px; }
.cookie-banner__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.cookie-banner__title { margin: 0; font: 800 18px/1.2 var(--f-disp); }
.cookie-banner__text { margin: 0; font: 500 15px/1.45 var(--f-body); color: rgba(255, 255, 255, .78); }
.cookie-banner__text a { color: var(--lagon); font-weight: 700; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.cookie-banner__actions .btn { flex: 1 1 140px; }
@media (min-width: 640px) { .cookie-banner__actions .btn { flex: 0 0 auto; min-width: 140px; } }
/* Sur ordinateur : une barre fine sur toute la largeur, texte à gauche, choix à droite. */
@media (min-width: 900px) {
  .cookie-banner { padding: 0; }
  .cookie-banner__card {
    max-width: none; border-radius: 0; padding: 14px max(var(--gutter), calc((100vw - var(--container)) / 2));
    grid-template-columns: 1fr auto; grid-template-areas: "title actions" "text actions"; column-gap: 32px; row-gap: 2px; align-items: center;
    box-shadow: 0 -8px 24px -12px rgba(30, 26, 36, .45);
  }
  .cookie-banner__card::before { height: 3px; }
  .cookie-banner__title { grid-area: title; font-size: 16px; }
  .cookie-banner__text { grid-area: text; font-size: 14px; }
  .cookie-banner__actions { grid-area: actions; margin-top: 0; flex-wrap: nowrap; }
  .cookie-banner__actions .btn { min-width: 128px; }
}

/* Date de relecture sous le titre d'une page de jeu, avec le lien vers la méthode. */
.game-reviewed { margin-top: 8px; font-size: 14px; color: var(--muted); }
.game-reviewed a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }