/* =========================================================
   Jeux de tête — V2 « Formes pures » (page d'accueil)
   Cercles, carrés, triangles ; aplats jaune / rouge / bleu / noir.
   Aucune ombre, aucun dégradé, aucun arrondi décoratif.
   Chargée après style.css, uniquement par index.html.
   ========================================================= */

:root {
  --ground: #111111;
  --ink: #f7f5ee;
  --on-ink: #111111;
  --r: #e3170a;
  --b: #0b3bd9;
  --y: #ffd400;
  --k: #111111;
  --w: #ffffff;
  --third: var(--y);          /* troisième couleur des formes : jaune sur noir */
  --on-third: #111111;
  --fourth: var(--w);         /* quatrième couleur : blanc sur noir */
  --on-fourth: #111111;

  --font-geo: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glide: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(18px, 4.5vw, 72px);
  --rule: 4px;

  /* les composants hérités de style.css suivent la palette */
  --bg: var(--ground);
  --bg-elevated: var(--ground);
  --text: var(--ink);
  --text-muted: color-mix(in srgb, var(--ink) 74%, var(--ground));
  --border: var(--ink);
  --border-soft: var(--ink);
  --border-strong: var(--ink);
  --cell-alt: transparent;
  --accent: var(--y);
  --accent-contrast: #111111;
  --font-ui: var(--font-geo);
}
:root[data-theme="light"] {
  --ground: #ffd400;
  --ink: #111111;
  --on-ink: #ffd400;
  --third: var(--w);          /* blanc sur jaune (un triangle noir avalerait le titre) */
  --on-third: #111111;
  --fourth: #111111;          /* noir sur jaune */
  --on-fourth: #ffd400;
  --bg: var(--ground);
  --bg-elevated: var(--ground);
  --text: var(--ink);
  --text-muted: color-mix(in srgb, var(--ink) 80%, var(--ground));
  --border: var(--ink);
  --border-soft: var(--ink);
  --border-strong: var(--ink);
  --cell-alt: transparent;
  --accent: #111111;
  --accent-contrast: #ffd400;
}

body::before,
:root[data-theme="light"] body::before { background-image: none; }
body { font-family: var(--font-geo); overflow-x: clip; }
:focus-visible { outline: 4px solid var(--b); outline-offset: 3px; }
:root:not([data-theme="light"]) :focus-visible { outline-color: var(--y); }

/* ---------- En-tête ---------- */
.site-header {
  position: static;
  background: var(--ground);
  border-bottom: var(--rule) solid var(--ink);
  padding: 10px var(--gutter);
}
.site-header .brand {
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* ---------- Logo du bandeau : une variante par thème ---------- */
.site-header .brand { display: flex; align-items: center; gap: 0; }
.brand-logo { display: block; height: 44px; width: auto; transition: scale 0.4s var(--spring); }
.site-header .brand:hover .brand-logo { scale: 1.05; }
.brand-logo-light { display: none; }                         /* texte noir, pour le fond jaune */
:root[data-theme="light"] .brand-logo-light { display: block; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
@media (max-width: 520px) { .brand-logo { height: 36px; } }
.lang-switch select,
.icon-btn {
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-geo);
}
/* toujours un disque noir : la lune jaune reste visible sur le fond jaune du mode jour */
.icon-btn { border-radius: 50%; transition: rotate 0.5s var(--spring); }
.icon-btn:hover { background: var(--ground); rotate: 180deg; }
.theme-toggle,
.theme-toggle:hover { background: #111111; }

main { max-width: none; padding: 0 0 80px; }

/* =========================================================
   1. OUVERTURE — le titre géant, et derrière lui quatre grandes formes
      qui contiennent les jeux
   ========================================================= */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(12px, 2vw, 28px);
  min-height: calc(100svh - 66px);
  padding: clamp(20px, 3vw, 44px) var(--gutter) clamp(64px, 6vw, 84px);
  border-bottom: var(--rule) solid var(--ink);
}

.stage-title {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  margin: 0;
  font-weight: inherit;
  position: relative;
  z-index: 1;                 /* le titre passe devant les formes… */
  pointer-events: none;       /* …mais laisse le survol les atteindre */
}
/* « Petits jeux. » : minuscule, dans un disque */
.stage-small {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
  display: grid;
  place-items: center;
  width: clamp(7.5rem, 11vw, 10rem);
  aspect-ratio: 1;
  padding: 0.9rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  rotate: -8deg;
}
/* « Grands effets. » : colossal, un mot par ligne, calé sur la largeur
   par js/v2-home.js (--fit). Valeur de repli sans JS. */
.stage-big {
  grid-column: 1 / -1;
  grid-row: 2;
  width: min-content;
  margin: clamp(-2.5rem, -3vw, -1rem) 0 0 -0.04em;
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: var(--fit, clamp(4rem, 17vw, 16rem));
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
}

/* bas de scène, à gauche : la consigne puis les quatre promesses en escalier */
.categories {
  grid-column: 1 / 4;
  grid-row: 3;
  align-self: end;
  margin-top: clamp(28px, 4vw, 56px);
  padding: 0;
}
.categories h2,
.categories-sub { position: relative; z-index: 1; }
.categories h2 {
  margin: 0;
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.categories-sub { margin: 6px 0 0; max-width: 30ch; font-size: 0.95rem; line-height: 1.4; color: var(--ink); }

.stage-marks {
  grid-column: 1 / 5;
  grid-row: 4;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(16px, 2.4vw, 36px);
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.stage-marks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 1rem;
  font-weight: 700;
  transition: translate 0.4s var(--spring);
}
.stage-marks li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--c);
  transition: rotate 0.6s var(--spring), scale 0.3s var(--spring);
}
.stage-marks li:nth-child(1) { --i: 0; --c: var(--r); }
.stage-marks li:nth-child(1)::before { border-radius: 50%; }
.stage-marks li:nth-child(2) { --i: 1; --c: var(--b); }
.stage-marks li:nth-child(3) { --i: 2; --c: var(--third); }
.stage-marks li:nth-child(3)::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.stage-marks li:nth-child(4) { --i: 3; --c: var(--fourth); }
.stage-marks li:nth-child(4)::before { border-radius: 18px 18px 0 0; height: 9px; }
.stage-marks li:hover { translate: 0 -4px; }
.stage-marks li:hover::before { rotate: 180deg; scale: 1.5; }

.stage-brief {
  grid-column: 10 / -1;
  grid-row: 3 / 5;
  align-self: end;
  padding-bottom: 56px;
  position: relative;
  z-index: 1;
  margin-top: clamp(28px, 4vw, 56px);
}
.stage-brief p {
  margin: 0 0 1.4rem;
  max-width: 30ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}
.stage-go {
  display: inline-block;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, letter-spacing 0.4s var(--glide);
}
.stage-go:hover { background: var(--b); color: #fff; letter-spacing: 0.08em; }

/* jeu au hasard : un disque à cheval sur le bord de la section */
.stage-puck {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  translate: 0 46%;
  z-index: 6;
  width: clamp(7.5rem, 10vw, 9.5rem);
  aspect-ratio: 1;
  padding: 0.9rem;
  border: var(--rule) solid var(--ink);
  border-radius: 50%;
  background: var(--b);
  color: #fff;
  font-family: var(--font-geo);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  rotate: -10deg;
  transition: rotate 0.7s var(--spring), scale 0.25s var(--spring), background 0.15s;
}
.stage-puck:hover { rotate: 350deg; background: var(--r); }
.stage-puck:active { scale: 0.92; }

/* ---------- Emplacements publicitaires ---------- */
.top-ad,
.below-tank-ad {
  max-width: none;
  margin: clamp(56px, 7vw, 96px) var(--gutter) 0;
  border: 3px dashed var(--ink);
  border-radius: 0;
  font-family: var(--font-geo);
  color: var(--ink);
}

/* =========================================================
   2. ZONES — chaque grande forme de l'ouverture est une zone ;
      ses jeux y sont rangés en miniature et se déploient autour au survol
   ========================================================= */
.cluster {
  --fill: var(--b);
  --on: #fff;
  --size: 30vmin;
  --open: 0.8;                /* échelle de la forme une fois ouverte (réglée par JS) */
  position: absolute;
  width: var(--size);
  height: var(--size);
  pointer-events: none;       /* seule la surface peinte réagit, pas le cadre carré */
  transition: opacity 0.3s;
}
/* même disposition qu'avant : disque en haut à droite, carré de travers
   en bas, triangle qui dépasse en haut ; le demi-cercle se lève sur le bord */
.cluster[data-zone="Logique"] { left: 33%; bottom: 7%; }
.cluster[data-zone="Mémoire"] { --fill: var(--r); --size: 48vmin; right: 7%; top: 6%; }
.cluster[data-zone="Vocabulaire"] { --fill: var(--third); --on: var(--on-third); --size: 34vmin; left: 24%; top: -3%; }
.cluster[data-zone="Réflexes"] { --fill: var(--fourth); --on: var(--on-fourth); --size: 26vmin; left: 56%; bottom: 1%; }

.cluster-tile {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-geo);
  cursor: pointer;
  /* seule la surface peinte de la forme réagit, pas son cadre carré */
  pointer-events: none;
}
.cluster-form {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--fill);
  animation: shape-in 0.9s var(--spring) both;
  transition: rotate 0.7s var(--spring), scale 0.6s var(--spring);
}
.cluster-form svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.cluster-form svg > * { pointer-events: auto; }
.cluster[data-zone="Logique"] .cluster-form { rotate: 14deg; animation-delay: 0.12s; }
.cluster[data-zone="Vocabulaire"] .cluster-form { rotate: -18deg; animation-delay: 0.24s; }
.cluster[data-zone="Réflexes"] .cluster-form { animation-delay: 0.36s; }
@keyframes shape-in { from { scale: 0; rotate: -90deg; } }

/* étiquette de la zone : nom + nombre de jeux, sous les miniatures ;
   la description s'ajoute quand la forme est ouverte */
.cluster-caption {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--cap, 40px));
  z-index: 2;
  translate: -50% 0;
  width: max-content;
  max-width: calc(var(--size) * var(--open) * 0.86);
  padding: 4px 8px;
  background: var(--ground);
  color: var(--ink);
  text-align: center;
  pointer-events: none;
  transition: top 0.5s var(--spring), translate 0.5s var(--spring);
}
.cluster-caption h3 {
  display: inline;
  margin: 0 6px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
}
.cluster-caption .category-count {
  display: inline;
  margin: 0;
  color: inherit;
  font-family: var(--font-geo);
  font-size: 0.85rem;
  font-weight: 700;
}
.cluster-caption .category-desc {
  display: none;
  margin-top: 4px;
  max-width: 22ch;
  color: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
}
.cluster.active .cluster-caption { outline: 3px solid var(--ink); outline-offset: -6px; padding: 8px 12px; }

/* les jeux : rangés en miniature dans la forme… */
.cluster-items { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.cluster-item {
  --mini: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  translate: var(--ctx, -10px) calc(var(--cy, 0px) - 50%);
  color: var(--ink);
  text-decoration: none;
  pointer-events: none;       /* rangées, les miniatures laissent passer le clic vers la forme */
  transition: translate 0.6s var(--spring) calc(var(--i) * 30ms);
}
.cluster-item.is-left { flex-direction: row-reverse; }
.cluster-mini {
  flex: none;
  width: var(--mini);
  height: var(--mini);
  color: var(--on);
  transition: color 0.2s, scale 0.3s var(--spring);
}
.cluster-mini svg { width: 100%; height: 100%; display: block; }
.cluster-name {
  width: max-content;
  max-width: 168px;
  overflow-wrap: break-word;
  padding: 3px 7px;
  background: var(--fill);
  color: var(--on);
  outline: 3px solid var(--ground);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.15s, color 0.15s;
}

/* …et déployés autour d'elle au survol, au clavier ou à l'appui */
.cluster:hover,
.cluster:focus-within,
.cluster.is-open { z-index: 5; }
.cluster:hover::before,
.cluster:focus-within::before,
.cluster.is-open::before {
  /* zone invisible qui garde la forme ouverte entre elle et ses jeux */
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + var(--ring-shift, 0px));
  width: calc(var(--size) * var(--open) + 150px);
  height: calc(var(--size) * var(--open) + 120px);
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: auto;
}
.cluster:hover .cluster-item,
.cluster:focus-within .cluster-item,
.cluster.is-open .cluster-item { translate: var(--otx, 0px) calc(var(--oy, 0px) - 50%); pointer-events: auto; }
.cluster:hover .cluster-mini,
.cluster:focus-within .cluster-mini,
.cluster.is-open .cluster-mini { color: var(--fill); }
.cluster:hover .cluster-name,
.cluster:focus-within .cluster-name,
.cluster.is-open .cluster-name { opacity: 1; pointer-events: auto; transition-delay: 0.15s, 0s, 0s; }
.cluster:hover .cluster-form,
.cluster:focus-within .cluster-form,
.cluster.is-open .cluster-form { scale: var(--open); rotate: 0deg; }
.cluster:hover .cluster-caption,
.cluster:focus-within .cluster-caption,
.cluster.is-open .cluster-caption { top: calc(50% + var(--mid, 0px)); translate: -50% -50%; }
.cluster:hover .category-desc,
.cluster:focus-within .category-desc,
.cluster.is-open .category-desc { display: block; }
.cluster-item:hover .cluster-name,
.cluster-item:focus-visible .cluster-name { background: var(--ink); color: var(--on-ink); }
.cluster-item:hover .cluster-mini { scale: 1.5; }
/* pendant qu'une zone est ouverte, le reste de la scène s'efface :
   les autres formes, le titre et les textes */
.stage-title,
.categories h2,
.categories-sub,
.stage-marks,
.stage-brief { transition: opacity 0.3s; }
.stage:has(.cluster:hover) :is(.stage-title, .categories h2, .categories-sub, .stage-marks, .stage-brief),
.stage:has(.cluster:focus-within) :is(.stage-title, .categories h2, .categories-sub, .stage-marks, .stage-brief),
.stage:has(.cluster.is-open) :is(.stage-title, .categories h2, .categories-sub, .stage-marks, .stage-brief) { opacity: 0.14; }
.clusters:has(.cluster:hover) .cluster:not(:hover),
.clusters:has(.cluster:focus-within) .cluster:not(:focus-within),
.clusters:has(.cluster.is-open) .cluster:not(.is-open) { opacity: 0.16; }

/* =========================================================
   3. LES JEUX — une liste, pas des cartes
   ========================================================= */
.game-board { padding: clamp(64px, 6vw, 88px) var(--gutter) 0; }
.filter-status {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: var(--rule) solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 1rem;
}
.filter-status #filter-status-text { color: var(--on-ink); text-transform: uppercase; }
.filter-clear {
  border: 3px solid var(--on-ink);
  border-radius: 0;
  color: var(--on-ink);
  font-family: var(--font-geo);
  font-weight: 700;
  padding: 6px 12px;
}
.filter-clear:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }

.game-grid { display: block; border-top: var(--rule) solid var(--ink); }
.game-card {
  --fill: var(--b);
  --on: #fff;
  display: grid;
  grid-template-columns: 30px minmax(0, 5fr) minmax(0, 5fr) auto;
  align-items: center;
  column-gap: clamp(14px, 2.4vw, 36px);
  min-height: 0;
  padding: clamp(12px, 1.3vw, 18px) clamp(8px, 1.2vw, 16px);
  border: 0;
  border-bottom: var(--rule) solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(var(--fill), var(--fill)) left / 0% 100% no-repeat;
  color: var(--ink);
  overflow: visible;
  transition: background-size 0.45s var(--glide), color 0.2s, padding-left 0.45s var(--glide);
}
.game-card[data-zone="Réflexes"] { --fill: var(--fourth); --on: var(--on-fourth); }
.game-card[data-zone="Vocabulaire"] { --fill: var(--third); --on: var(--on-third); }
.game-card[data-zone="Mémoire"] { --fill: var(--r); }
.game-card:hover,
.game-card:focus-visible {
  transform: none;
  box-shadow: none;
  background-size: 100% 100%;
  color: var(--on);
  padding-left: clamp(18px, 2.6vw, 40px);
}
.game-card:active { transform: none; box-shadow: none; }
.game-shape {
  width: 34px;
  height: 34px;
  color: var(--fill);
  transition: rotate 0.7s var(--spring), color 0.2s;
}
.game-shape svg { width: 100%; height: 100%; display: block; }
.game-card:hover .game-shape,
.game-card:focus-visible .game-shape { rotate: 180deg; color: var(--on); }
.game-card h2 {
  margin: 0;
  width: auto;
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  hyphens: manual;
}
.game-card .game-desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  max-width: 52ch;
  color: inherit;
  font-size: 0.98rem;
  line-height: 1.5;
}
.game-card .game-tag {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-family: var(--font-geo);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  align-self: center;
}
.game-card.ad-slot {
  display: block;
  padding: 22px;
  border: 0;
  border-bottom: var(--rule) solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--font-geo);
  text-align: left;
}
.game-card.ad-slot:hover { padding-left: 22px; color: var(--ink); background: none; }

/* =========================================================
   4. ANECDOTE DU JOUR — un aplat bleu décalé, un disque rouge dessus
   ========================================================= */
.anecdote-of-day {
  position: relative;
  display: block;
  max-width: none;
  width: min(100% - var(--gutter) * 2, 980px);
  margin: clamp(72px, 10vw, 150px) var(--gutter) 0 auto;
  padding: clamp(28px, 4.5vw, 64px);
  padding-top: clamp(48px, 6vw, 84px);
  border: 0;
  border-radius: 0;
  background: var(--b);
  color: #fff;
  transition: none;
}
.anecdote-of-day:hover { transform: none; box-shadow: none; }
.anecdote-of-day-icon {
  position: absolute;
  left: clamp(-56px, -4vw, -20px);
  top: clamp(-56px, -4vw, -20px);
  width: clamp(72px, 9vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--r);
  font-size: 0;               /* l'emoji décoratif laisse la place au disque */
  transition: scale 0.6s var(--spring);
}
.anecdote-of-day:hover .anecdote-of-day-icon { scale: 1.35; }
.anecdote-of-day-label {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.anecdote-of-day-text {
  margin-bottom: 26px;
  max-width: 34ch;
  color: #fff;
  font-size: clamp(1.4rem, 2.7vw, 2.4rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.anecdote-of-day-link {
  padding: 12px 16px;
  background: #fff;
  color: #111;
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.15s, letter-spacing 0.4s var(--glide);
}
.anecdote-of-day:hover .anecdote-of-day-link { text-decoration: none; background: var(--y); letter-spacing: 0.05em; }

/* ---------- Pied de page ---------- */
.site-footer {
  padding: 28px var(--gutter);
  border-top: var(--rule) solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  text-align: left;
}
.site-footer-extra { justify-content: flex-start; gap: 8px 28px; font-size: 0.92rem; opacity: 1; }
.site-footer-extra a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.site-footer-extra a:hover { background: var(--ink); color: var(--on-ink); text-decoration: none; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 900px) {
  .stage { min-height: 0; }
  .stage:has(.cluster:hover) :is(.stage-title, .categories h2, .categories-sub, .stage-marks, .stage-brief),
  .stage:has(.cluster:focus-within) :is(.stage-title, .categories h2, .categories-sub, .stage-marks, .stage-brief),
  .stage:has(.cluster.is-open) :is(.stage-title, .categories h2, .categories-sub, .stage-marks, .stage-brief) { opacity: 1; }
  .stage-small { width: 6.4rem; font-size: 0.85rem; }
  .stage-big { margin-top: -0.6rem; }
  .stage-brief { grid-column: 1 / -1; grid-row: 3; margin-top: 20px; padding-bottom: 0; }
  .categories { grid-column: 1 / -1; grid-row: 4; margin-top: 36px; }
  .categories-sub { max-width: none; }
  .stage-marks { grid-column: 1 / -1; grid-row: 5; }

  /* chaque zone devient une ligne : la forme à gauche, un appui déplie ses jeux dessous */
  .clusters { margin-top: 18px; }
  .cluster,
  .cluster[data-zone] {
    --size: 72px;
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    pointer-events: auto;
    border-top: var(--rule) solid var(--ink);
  }
  .cluster:last-child { border-bottom: var(--rule) solid var(--ink); }
  .cluster-tile { display: flex; align-items: center; gap: 16px; padding: 12px 0; pointer-events: auto; text-align: left; }
  .cluster-form,
  .cluster:hover .cluster-form,
  .cluster:focus-within .cluster-form,
  .cluster.is-open .cluster-form { flex: none; width: var(--size); height: var(--size); scale: 1; rotate: none; }
  .cluster-caption,
  .cluster:hover .cluster-caption,
  .cluster:focus-within .cluster-caption,
  .cluster.is-open .cluster-caption {
    position: static;
    translate: none;
    width: auto;
    max-width: none;
    padding: 0;
    background: none;
    color: var(--ink);
    text-align: left;
  }
  .cluster-caption h3 { font-size: 1.15rem; }
  .cluster-caption .category-desc { display: block; max-width: none; font-size: 0.84rem; }
  .cluster:hover::before, .cluster:focus-within::before, .cluster.is-open::before { content: none; }
  .clusters:has(.cluster:hover) .cluster:not(:hover),
  .clusters:has(.cluster:focus-within) .cluster:not(:focus-within),
  .clusters:has(.cluster.is-open) .cluster:not(.is-open) { opacity: 1; }

  .cluster-items { position: static; display: none; padding: 0 0 14px 88px; pointer-events: auto; }
  .cluster.is-open .cluster-items,
  .cluster:focus-within .cluster-items { display: block; }
  .cluster-item,
  .cluster:hover .cluster-item,
  .cluster:focus-within .cluster-item,
  .cluster.is-open .cluster-item { position: static; translate: none; flex-direction: row; padding: 7px 0; pointer-events: auto; }
  .cluster-mini, .cluster:hover .cluster-mini, .cluster.is-open .cluster-mini { color: var(--fill); }
  .cluster-name { width: auto; max-width: none; opacity: 1; pointer-events: auto; background: none; color: var(--ink); outline: 0; padding: 0; font-size: 1rem; }

  .game-card { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 8px; }
  .game-shape { width: 26px; height: 26px; }
  .game-card h2 { font-size: 1.35rem; hyphens: auto; }
  .game-card .game-desc { grid-column: 2 / 4; grid-row: 2; }
  .anecdote-of-day { width: auto; margin-left: calc(var(--gutter) + 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .cluster-form { animation: none; }
  .cluster-form, .cluster-item, .cluster-mini, .cluster-name, .cluster-caption, .cluster { transition: none; }
  .stage-marks li, .stage-marks li::before, .stage-go, .stage-puck, .icon-btn,
  .game-card, .game-shape,
  .anecdote-of-day-icon, .anecdote-of-day-link { transition: none; }
  .stage-puck:hover { rotate: -10deg; }
}