/* Hallmark · shape: app screens (game) · genre: playful · theme: Hum (deal 2/3, seed jeu-ducatif-enfants-animaux-8fae·b2663c22·2026-11-01·r0) · job: try · draw: none (app scope)
 * hero: settled (companion pick) · nav: top bar, child's name and stars · footer: none (app) · imagery: the owner's own illustrations · signature: the chosen companion speaking each question beside the card-stock answers
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* waive 12: the theme declares a spring posture on the primary control only (Hum § Motion) */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R2 V3 · weakest: R, the reward is a sticker of the next animal, not a growth bed; kept simple for six-year-olds */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .05' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --container: 1100px;
  --tile-min: 150px;
}

html, body { overflow-x: clip; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; line-height: 1.5;
  color: var(--color-ink);
  background: var(--grain), var(--fibre), var(--color-paper);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.05; margin: 0; overflow-wrap: break-word; min-width: 0; }
.ecran { max-width: var(--container); margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); }
[hidden] { display: none !important; }

/* barre du haut */
.barre { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: var(--container); margin: 0 auto; padding: var(--space-md); }
.barre .qui { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
.barre .qui img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 35%; background: var(--color-card); box-shadow: var(--shadow-card); }
.etoiles { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--grain), var(--color-accent); color: var(--color-accent-ink); }
.etoile { width: 20px; height: 20px; fill: currentColor; }

/* boutons carton */
.btn { --edge: 5px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 0; border-radius: var(--radius-stock); min-height: 54px; padding: 0 var(--space-lg); font: inherit; font-weight: 600; color: var(--color-ink); cursor: pointer;
  background: var(--grain), var(--fibre), var(--color-card);
  box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.btn--primaire { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn:focus-visible, .tuile:focus-visible, .choix:focus-visible, .compagnon:focus-visible, input:focus-visible { outline: 4px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn[disabled] { background: var(--color-paper-3); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-rule); cursor: not-allowed; translate: none; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* accueil */
.accueil-tete { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-xl); }
.accueil-tete h1 { font-size: var(--text-display-s); }
.accueil-tete p { margin: 0; font-size: var(--text-lead); color: var(--color-ink-2); }
.prenom { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-xl); }
.prenom input { height: 54px; min-width: 0; flex: 1 1 220px; max-width: 360px; padding: 0 var(--space-md); border-radius: var(--radius-input); border: 1px solid var(--color-muted); font: inherit; font-size: var(--text-lg); background: var(--color-card); color: var(--color-ink); }
.joueurs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: calc(-1 * var(--space-lg)) 0 var(--space-xl); }
.grille-compagnons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--space-md); }
.compagnon { position: relative; border: 0; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card); cursor: pointer; font: inherit; color: var(--color-ink);
  transition: translate var(--dur-short) var(--ease-snap), box-shadow var(--dur-short) var(--ease-snap); }
.compagnon img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; display: block; }
.compagnon span { display: block; padding: var(--space-xs) 0 var(--space-2xs); font-weight: 600; }
.compagnon:hover { translate: 0 -3px; }
.compagnon[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--color-ink), var(--shadow-card); }
.compagnon.verrou { cursor: default; }
.compagnon.verrou img { filter: grayscale(1) brightness(1.12) contrast(.6); opacity: .55; }
.compagnon.verrou span { color: var(--color-muted); font-weight: 500; }

/* carte des thèmes */
.onglets { display: flex; gap: var(--space-xs); margin: var(--space-md) 0 var(--space-lg); }
.onglets .btn[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); box-shadow: 0 var(--edge) 0 0 var(--color-ink-2); }
.titre-ecran { font-size: var(--text-section); margin-bottom: var(--space-xs); }
.sous { margin: 0 0 var(--space-lg); color: var(--color-muted); }
.periode { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-title); }
.grille-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--space-md); }
.tuile { --edge: 5px; text-align: left; border: 0; border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg) var(--space-lg); font: inherit; color: var(--color-ink); cursor: pointer; min-height: 120px; display: grid; align-content: space-between; gap: var(--space-sm);
  background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.tuile:hover { --edge: 7px; translate: 0 -2px; }
.tuile:active { --edge: 1px; translate: 0 4px; }
.tuile strong { font-size: var(--text-title); font-weight: 600; line-height: 1.15; }
.tuile .score { display: flex; gap: var(--space-3xs); color: var(--color-edge); }
.tuile .score .pleine { color: var(--color-accent-deep); }
.tuile.fait { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-mint) 35%, var(--color-card)); }

/* exercice */
.exo { display: grid; gap: var(--space-lg); }
.exo-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.progression { flex: 1; height: 14px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.progression i { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--color-mint); transition: transform var(--dur-long) var(--ease-snap); }
.scene { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
@media (max-width: 640px) { .scene { grid-template-columns: minmax(0, 1fr); } .scene .guide img { max-width: 140px; } }
.guide { display: grid; gap: var(--space-sm); justify-items: center; }
.guide img { width: 100%; max-width: 200px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-card); }
.bulle { position: relative; padding: var(--space-sm) var(--space-md); border-radius: 20px; background: var(--grain), var(--color-card); box-shadow: var(--shadow-card); font-weight: 600; text-align: center; min-height: 3em; }
.bulle.bravo { background: var(--grain), color-mix(in oklab, var(--color-mint) 55%, var(--color-card)); }
.bulle.encore { background: var(--grain), color-mix(in oklab, var(--color-accent-3) 30%, var(--color-card)); }
.carte-q { border-radius: 28px; padding: var(--space-xl) var(--space-lg); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); display: grid; gap: var(--space-lg); }
.consigne { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-title); font-weight: 600; }
.ecouter { --edge: 4px; min-height: 48px; padding: 0 var(--space-md); }
.enonce { font-size: var(--text-display-s); font-weight: 600; letter-spacing: var(--tracking-display); text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
.objets { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); max-width: 560px; margin: 0 auto; }
.objets .pion { width: 44px; height: 44px; border-radius: 50%; background: var(--grain), var(--color-accent-3); box-shadow: inset 0 -4px 0 color-mix(in oklab, var(--color-ink) 18%, transparent); }
.objets .pion.b { background: var(--grain), var(--color-accent-2); }
.choix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--space-md); }
.choix { --edge: 6px; border: 0; border-radius: 20px; min-height: 88px; padding: var(--space-sm); font: inherit; font-size: var(--text-2xl); font-weight: 600; color: var(--color-ink); cursor: pointer; overflow-wrap: anywhere;
  background: var(--grain), var(--fibre), var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap), background-color var(--dur-short) var(--ease-snap); }
.choix:hover { --edge: 8px; translate: 0 -2px; }
.choix:active { --edge: 1px; translate: 0 5px; }
.choix.juste { background: var(--grain), var(--color-mint); box-shadow: 0 var(--edge) 0 0 var(--color-mint-deep); }
.choix.faux { background: var(--grain), color-mix(in oklab, var(--color-accent-3) 45%, var(--color-paper-2)); opacity: .8; }
.choix[disabled] { cursor: default; }
.choix.mot { font-size: var(--text-xl); }
.droite { display: flex; justify-content: center; gap: var(--space-2xs); flex-wrap: wrap; }
.droite span { min-width: 44px; padding: var(--space-xs) 0; border-bottom: 3px solid var(--color-ink); text-align: center; font-weight: 600; }
.droite span.trou { color: var(--color-accent-2); }

/* fin de partie */
.fin { text-align: center; display: grid; gap: var(--space-lg); justify-items: center; padding-top: var(--space-xl); }
.fin h1 { font-size: var(--text-display-s); }
.fin .gros-score { display: flex; gap: var(--space-xs); color: var(--color-edge); }
.fin .gros-score .etoile { width: 56px; height: 56px; }
.fin .gros-score .pleine { color: var(--color-accent-deep); }
.cadeau { display: grid; gap: var(--space-sm); justify-items: center; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--grain), color-mix(in oklab, var(--color-accent) 40%, var(--color-card)); box-shadow: var(--shadow-card); }
.cadeau img { width: 180px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .btn, .tuile, .choix, .compagnon, .progression i { transition: none; }
  .btn:hover, .tuile:hover, .choix:hover, .compagnon:hover { translate: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texte-q { margin: 0; font-size: var(--text-xl); text-align: center; font-weight: 600; line-height: 1.35; }
.dessin { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.choix .dessin { max-width: 96px; }
.forme { fill: var(--color-accent-2); }
.h-cadran { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 3; }
.h-chiffre { font: 600 9px var(--font-body); fill: var(--color-ink); }
.h-grande { stroke: var(--color-ink); stroke-width: 2.5; stroke-linecap: round; }
.h-petite { stroke: var(--color-accent-3); stroke-width: 5; stroke-linecap: round; }
.h-axe { fill: var(--color-ink); }
.monnaie { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.piece, .billet { display: inline-grid; place-items: center; font-weight: 600; background: var(--grain), var(--color-sand); box-shadow: var(--shadow-card); }
.piece { width: 64px; height: 64px; border-radius: 50%; }
.billet { min-width: 120px; height: 64px; border-radius: 10px; background: var(--grain), var(--color-mint); }
.traits { display: grid; gap: var(--space-md); justify-items: start; max-width: 520px; margin: 0 auto; }
.traits i { display: block; height: 16px; width: calc(var(--l) * 50px); max-width: 100%; border-radius: var(--radius-pill); }
.traits .r { background: var(--color-accent-3); } .traits .b { background: var(--color-accent-2); }
.sep { border: 0; border-top: 2px dashed var(--color-rule); width: 60%; margin: var(--space-sm) auto; }
.objets .pion.vide { background: transparent; box-shadow: inset 0 0 0 3px var(--color-rule); }
.objets { gap: var(--space-md) var(--space-lg); }
.objets .paquet { display: inline-flex; gap: var(--space-xs); }

/* le parcours */
.parcours-ecran { max-width: 760px; }
.carte-monde { position: relative; margin-top: var(--space-md); }
.monde { position: absolute; left: calc(-1 * var(--space-md)); right: calc(-1 * var(--space-md)); border-radius: 32px; background: var(--grain), var(--fibre), var(--fond); }
.monde-nom { position: absolute; top: var(--space-md); left: var(--space-lg); font-weight: 600; font-size: var(--text-title); }
.chemin { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.chemin-fond { fill: none; stroke: var(--color-sand); stroke-width: 26px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chemin-pointille { fill: none; stroke: var(--color-card); stroke-width: 4px; stroke-dasharray: 2 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.etape { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: var(--space-2xs); border: 0; background: none; padding: 0; font: inherit; color: var(--color-ink); cursor: pointer; width: 150px; }
.etape .pastille { --edge: 6px; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; font-size: var(--text-xl); font-weight: 600;
  background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 2px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.etape.maths .pastille { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-2) 22%, var(--color-card)); }
.etape.francais .pastille { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-3) 25%, var(--color-card)); }
.etape.reussi .pastille { background: var(--grain), var(--color-mint); box-shadow: 0 var(--edge) 0 0 var(--color-mint-deep); }
.etape.ouvert .pastille { background: var(--grain), var(--fibre), var(--color-accent); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 0 0 0 6px color-mix(in oklab, var(--color-accent) 40%, transparent); }
.etape.ferme { cursor: default; }
.etape.ferme .pastille { background: var(--grain), var(--color-paper-3); color: var(--color-muted); box-shadow: inset 0 0 0 2px var(--color-rule); }
.etape:not(.ferme):hover .pastille { --edge: 8px; translate: 0 -2px; }
.etape:not(.ferme):active .pastille { --edge: 1px; translate: 0 5px; }
.etape:focus-visible { outline: none; }
.etape:focus-visible .pastille { outline: 4px solid var(--color-focus); outline-offset: 3px; }
.etape-nom { font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-align: center; padding: var(--space-3xs) var(--space-xs); border-radius: 10px; background: color-mix(in oklab, var(--color-card) 80%, transparent); }
.etape.ferme .etape-nom { color: var(--color-muted); font-weight: 500; }
.etape .score { display: flex; gap: var(--space-3xs); color: var(--color-edge); }
.etape .score .etoile { width: 16px; height: 16px; }
.etape .score .pleine { color: var(--color-accent-deep); }
.avatar { position: absolute; left: 0; top: 0; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; object-position: center 30%; margin: -72px 0 0 -84px; pointer-events: none;
  background: var(--color-card); box-shadow: 0 0 0 4px var(--color-card), var(--shadow-card);
  transition: transform 1.1s var(--ease-snap); }
@media (max-width: 520px) { .etape { width: 112px; } .etape .pastille { width: 58px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .avatar, .etape .pastille { transition: none; } }
.cadeau-monde { position: absolute; z-index: 1; translate: -50% -50%; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card); font-weight: 600; white-space: nowrap; }
.cadeau-monde img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 30%; filter: grayscale(1) contrast(.7) brightness(1.1); }
.cadeau-monde.gagne { background: var(--grain), var(--color-accent); }
.cadeau-monde.gagne img { filter: none; }

/* choix de la matière */
.grille-matieres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); }
.carte-matiere { --edge: 6px; display: grid; gap: var(--space-sm); text-align: left; border: 0; border-radius: 28px; padding: var(--space-xl) var(--space-lg); font: inherit; color: var(--color-ink); cursor: pointer; min-height: 150px; align-content: end;
  box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.carte-matiere.maths { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-2) 22%, var(--color-card)); }
.carte-matiere.francais { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-3) 25%, var(--color-card)); }
.carte-matiere.anglais { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-3) 12%, var(--color-sugar)); }
.carte-matiere.sciences { background: var(--grain), var(--fibre), var(--color-hill-2); }
.carte-matiere.histoire-geo { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-sand) 40%, var(--color-card)); }
.carte-matiere.emc { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-mint) 35%, var(--color-card)); }
.carte-matiere.evar { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-3) 14%, var(--color-card)); }
.carte-matiere.arts { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent) 40%, var(--color-card)); }
.carte-matiere.musique { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-2) 12%, var(--color-card)); }
.carte-matiere.eps { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-kraft) 30%, var(--color-card)); }
.carte-matiere strong { min-width: 0; hyphens: auto; overflow-wrap: break-word; font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-display); }
.carte-matiere:hover { --edge: 8px; translate: 0 -2px; }
.carte-matiere:active { --edge: 1px; translate: 0 5px; }
.carte-matiere:focus-visible { outline: 4px solid var(--color-focus); outline-offset: 3px; }
.jauge { height: 12px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-card) 70%, transparent); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--color-mint-deep); transform-origin: left; }
#classes .btn[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); box-shadow: 0 var(--edge) 0 0 var(--color-ink-2); }
@media (prefers-reduced-motion: reduce) { .carte-matiere { transition: none; } .carte-matiere:hover { translate: none; } }

/* ===== les petits jeux ===== */
.choix-grille.scene { display: block; }
@keyframes monter { from { transform: translateY(130%); } to { transform: translateY(0); } }
@keyframes flotter { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -14px; } }
@keyframes eclater { to { transform: scale(1.6); opacity: 0; } }
@keyframes nager { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 200px)); } }
@keyframes houle { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes secouer { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* ballons */
.ciel { position: relative; height: 380px; border-radius: 22px; overflow: clip; background: var(--grain), linear-gradient(var(--color-sugar), var(--color-hill-1)); }
.ballon { --edge: 0px; position: absolute; left: var(--x); bottom: 0; translate: -50% 0; width: 118px; height: 140px; padding: 0; border: 0; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; font-size: var(--text-lg);
  display: grid; place-items: center; bottom: var(--h); animation: monter 1.4s var(--ease-out) var(--d) both, flotter var(--v) ease-in-out calc(var(--d) + 1.4s) infinite; box-shadow: inset -10px -12px 0 color-mix(in oklab, var(--color-ink) 12%, transparent); }
.ballon::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 46px; background: var(--color-muted); }
.ballon span { padding: 0 var(--space-xs); line-height: 1.1; }
.ballon.a { background: var(--grain), var(--color-accent-3); } .ballon.b { background: var(--grain), var(--color-accent); }
.ballon.c { background: var(--grain), var(--color-mint); } .ballon.d { background: var(--grain), color-mix(in oklab, var(--color-accent-2) 45%, var(--color-card)); }
.ballon.juste { animation: eclater .35s ease-in forwards; }
.ballon.faux { animation-play-state: paused; opacity: .35; }

/* pêche */
.mer { container-type: inline-size; position: relative; height: 400px; border-radius: 22px; overflow: clip; background: var(--grain), linear-gradient(var(--color-sugar) 0 18%, color-mix(in oklab, var(--color-accent-2) 40%, var(--color-sugar)) 18% 100%); }
.seau { position: absolute; right: var(--space-md); top: var(--space-xs); width: 64px; height: 50px; border-radius: 6px 6px 18px 18px; background: var(--grain), var(--color-accent-3); }
.vague { position: absolute; left: 0; width: 200%; height: 22px; top: 16%; background: radial-gradient(circle at 20px 0, transparent 14px, var(--color-sugar) 15px) 0 0 / 40px 22px repeat-x; animation: houle 8s linear infinite; pointer-events: none; }
.vague.v2 { top: auto; bottom: -6px; opacity: .5; animation-duration: 12s; }
.poisson { --edge: 0px; position: absolute; left: 0; top: var(--y); width: 180px; height: 96px; padding: 0; border: 0; background: none; box-shadow: none; animation: nager var(--v) ease-in-out var(--d) infinite alternate; }
.poisson svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.poisson .corps { fill: var(--color-accent); } .poisson.p1 .corps { fill: var(--color-mint); } .poisson.p2 .corps { fill: var(--color-accent-3); } .poisson.p3 .corps { fill: var(--color-card); }
.poisson .queue { fill: var(--color-accent-deep); } .poisson .oeil { fill: var(--color-ink); }
.poisson span { position: relative; font-size: var(--text-2xl); font-weight: 600; margin-left: calc(var(--space-xs) * -1); }
.poisson svg { transform: scaleX(-1); }
.poisson.juste { animation-play-state: paused; opacity: 0; transition: opacity var(--dur-long) var(--ease-snap); }
.mer:has(.juste) .seau { animation: secouer var(--dur-long) var(--ease-snap); }
.poisson.faux { animation-play-state: paused; opacity: .35; }

/* train */
.carte-q { min-width: 0; }
.rails { overflow-x: auto; padding: var(--space-lg) 0 var(--space-lg); border-bottom: 6px solid var(--color-kraft); margin-bottom: var(--space-lg); }
.convoi { display: flex; align-items: flex-end; gap: var(--space-2xs); padding: 0 var(--space-xs); }
.wagon, .loco { flex: 1 1 0; position: relative; }
.wagon::after, .loco::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -14px; height: 14px; background: radial-gradient(circle at 7px 7px, var(--color-ink-2) 6px, transparent 7px) left / 14px 14px no-repeat, radial-gradient(circle at 7px 7px, var(--color-ink-2) 6px, transparent 7px) right / 14px 14px no-repeat; }
.convoi { animation: arriver 1.2s var(--ease-out) both; }
@keyframes arriver { from { transform: translateX(-60%); opacity: 0; } }
.loco { flex: 0 0 72px; width: 72px; height: 76px; border-radius: 14px 30px 10px 10px; background: var(--grain), var(--color-accent-3); }
.loco i { position: absolute; left: 12px; top: -22px; width: 18px; height: 24px; border-radius: 4px; background: var(--color-ink-2); }
.wagon { display: grid; place-items: center; min-width: 40px; max-width: 84px; height: 60px; padding: 0 var(--space-xs); border-radius: 12px; font-size: var(--text-xl); font-weight: 600; background: var(--grain), var(--color-accent); box-shadow: inset 0 -6px 0 var(--color-accent-deep); }
.wagon.vide { background: var(--grain), var(--color-card); color: var(--color-accent-2); box-shadow: inset 0 0 0 3px var(--color-accent-2); }
.wagon.rempli { animation: arriver .5s var(--ease-out) both; }
.gare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: var(--space-md); }
.wagon-choix { background: var(--grain), var(--color-accent); }
.wagon-choix.juste { animation: none; }
.wagon-choix.faux { animation: secouer var(--dur-long) var(--ease-snap); }

/* marché */
.etal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-lg); border-radius: 22px; background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-sand) 50%, var(--color-card)); margin-bottom: var(--space-lg); }
.marchand { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-card); }
.plateau { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs); min-height: 88px; padding: var(--space-sm); margin-bottom: var(--space-lg); border-radius: 22px; border: 3px dashed color-mix(in oklab, var(--color-kraft) 60%, transparent); }
.plateau .donne { animation: tomber .35s var(--ease-out) both; }
@keyframes tomber { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
.caisse .piece { width: 80px; height: 80px; font-size: var(--text-lg); } .caisse .billet { min-width: 132px; height: 72px; font-size: var(--text-lg); }
.produit { flex: 1; display: grid; gap: var(--space-2xs); } .produit strong { font-size: var(--text-xl); } .produit b { font-size: var(--text-display-s); font-weight: 600; letter-spacing: var(--tracking-display); }
.porte-monnaie { font-size: var(--text-xl); font-weight: 600; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); }
.porte-monnaie b { font-size: var(--text-2xl); }
.caisse { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.argent { border: 0; font: inherit; font-weight: 600; cursor: pointer; transition: translate var(--dur-micro) var(--ease-snap); }
.argent:hover { translate: 0 -3px; } .argent:active { translate: 0 3px; }
.argent:focus-visible { outline: 4px solid var(--color-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ballon, .poisson, .vague { animation: none; }
  .ballon.juste { animation: none; opacity: 0; } .poisson { left: calc(10% + var(--y) / 2); }
  .wagon-choix.faux, .convoi, .wagon.rempli, .plateau .donne, .mer:has(.juste) .seau { animation: none; }
}

/* ===== dessins des jeux de maths ===== */
.dessin.large { max-width: 460px; }
.choix .dessin.large { max-width: 140px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-md); }
.s-a { fill: var(--color-accent-3); } .s-b { fill: var(--color-accent-2); } .s-c { fill: var(--color-mint); } .s-d { fill: var(--color-accent); }
.s-b2 { fill: color-mix(in oklab, var(--color-accent-2) 70%, var(--color-card)); } .s-b3 { fill: color-mix(in oklab, var(--color-accent-2) 70%, var(--color-ink)); }
.s-c2 { fill: color-mix(in oklab, var(--color-mint) 60%, var(--color-card)); } .s-c3 { fill: color-mix(in oklab, var(--color-mint) 70%, var(--color-ink)); }
.s-d2 { fill: color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)); }
.s-reflet { fill: var(--color-card); opacity: .5; }
.s-trait { stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.s-trait-a { stroke: var(--color-accent-3); stroke-width: 5; stroke-linecap: round; }
.s-trait-f { fill: var(--color-ink-2); }
.s-fil { stroke: var(--color-muted); stroke-width: 1.5; }
.s-vide { fill: none; }
.s-grille { stroke: var(--color-rule); stroke-width: 1; }
.s-grille-c { stroke: var(--color-ink); stroke-width: 1; opacity: .5; }
.s-regle { fill: color-mix(in oklab, var(--color-accent) 35%, var(--color-card)); }
.s-txt { font: 600 11px var(--font-body); fill: var(--color-ink); }
.s-txt-p { font: 600 8px var(--font-body); fill: var(--color-ink); }
.panier { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--space-sm); min-height: 140px; padding: var(--space-md); margin-bottom: var(--space-lg); border-radius: 22px 22px 60px 60px; background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-kraft) 45%, var(--color-card)); }
.panier .pion { width: 44px; height: 44px; border-radius: 50%; background: var(--grain), var(--color-accent-3); animation: tomber .3s var(--ease-out) both; }
.ligne-nb { display: flex; align-items: flex-start; border-top: 4px solid var(--color-ink); padding-top: 0; }
.ligne-nb .grad { --edge: 0px; flex: 1 1 0; min-width: 0; min-height: 56px; padding: 0; border-radius: 0 0 10px 10px; background: transparent; box-shadow: none; border-left: 2px solid var(--color-ink); font-size: var(--text-sm); align-items: start; }
.ligne-nb .grad span { display: block; padding-top: var(--space-2xs); }
.ligne-nb .grad:hover { background: var(--color-sugar); translate: none; }
@media (prefers-reduced-motion: reduce) { .panier .pion { animation: none; } }
.dessin.grille { max-width: 300px; }

/* ===== carte en 3D ===== */
#b-vue { margin-top: var(--space-sm); }
.carte-monde.en-3d { height: min(74vh, 700px); overflow: clip; border-radius: 28px; touch-action: none; cursor: grab; box-shadow: inset 0 0 0 1px var(--color-rule); }
.carte-monde.en-3d:active { cursor: grabbing; }
.toile-3d { display: block; width: 100%; height: 100%; }
.calque-3d { position: absolute; inset: 0; pointer-events: none; }
.calque-3d > * { position: absolute; left: 0; top: 0; pointer-events: auto; transition: opacity var(--dur-micro) linear; }
.etape3d { translate: none; width: 150px; }
.etape3d .pastille { width: 58px; height: 58px; }
.etape3d .etape-nom, .etape3d .score { display: none; }
.etape3d.ici .etape-nom, .etape3d:hover .etape-nom, .etape3d:focus-visible .etape-nom, .etape3d.reussi .score { display: flex; justify-content: center; }
.copain3d { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 30%; pointer-events: none !important; box-shadow: 0 0 0 4px var(--color-card), var(--shadow-card); }
.cadeau3d { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; pointer-events: none !important; }
.cadeau3d img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 30%; filter: grayscale(1) contrast(.7) brightness(1.1); }
.cadeau3d.gagne { background: var(--grain), var(--color-accent); } .cadeau3d.gagne img { filter: none; }
@media (prefers-reduced-motion: reduce) { .calque-3d > * { transition: none; } }
.monde3d { padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card); font-weight: 600; white-space: nowrap; pointer-events: none !important; }
.parcours-ecran:has(.en-3d) { max-width: none; }

/* ===== carte illustrée : un monde = l'image de la carte, les étapes posées sur son chemin ===== */
.carte-monde.en-image { height: auto; display: grid; gap: var(--space-lg); }
.monde-img { position: relative; width: min(100%, 860px); margin: 0 auto; aspect-ratio: 1; border-radius: 28px; overflow: clip; box-shadow: var(--shadow-card); }
.fond-monde { display: block; width: 100%; height: 100%; object-fit: cover; }
.monde-img.miroir .fond-monde { transform: scaleX(-1); }
.monde-img .monde-nom { position: absolute; left: var(--space-md); top: var(--space-md); z-index: 2; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); font-weight: 600; }
.monde-img .etape { width: 130px; z-index: 1; }
.monde-img .etape .pastille { width: clamp(34px, 6vw, 54px); height: clamp(34px, 6vw, 54px); font-size: var(--text-lg); }
.monde-img .etape .etape-nom, .monde-img .etape .score { display: none; }
.monde-img .etape.ici .etape-nom, .monde-img .etape:hover .etape-nom, .monde-img .etape:focus-visible .etape-nom, .monde-img .etape.reussi .score { display: flex; justify-content: center; }
.monde-img .etape .score { background: color-mix(in oklab, var(--color-card) 80%, transparent); border-radius: var(--radius-pill); padding: 0 var(--space-2xs); }
.monde-img .cadeau-monde { z-index: 2; }
.carte-monde.en-image .avatar { z-index: 3; }
.parcours-ecran:has(.en-image) { max-width: 1040px; }
.monde-img { width: min(100%, 1000px); }
.monde-img .cadeau-monde { padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs); font-size: var(--text-sm); }
.monde-img .cadeau-monde img { width: 44px; height: 44px; }

/* animations posées sur la carte illustrée */
.monde-img { container-type: inline-size; }
.anim-monde { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.monde-img.miroir .anim-monde { transform: scaleX(-1); }
.anim-monde i { position: absolute; display: block; }
.scint { width: 5px; height: 5px; border-radius: 50%; background: var(--color-card); box-shadow: 0 0 6px 2px color-mix(in oklab, var(--color-card) 70%, transparent); opacity: .15; animation: scintiller var(--v) ease-in-out var(--d) infinite; }
@keyframes scintiller { 50% { opacity: 1; transform: scale(2.2); } }
.reflet { width: 14px; height: 4px; border-radius: 50%; background: var(--color-card); opacity: 0; translate: -50% -50%; animation: reflet 3.2s ease-in-out var(--d) infinite; }
@keyframes reflet { 30% { opacity: .8; transform: scaleX(1.8); } 60% { opacity: 0; transform: scaleX(.6); } }
.luciole { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px 4px color-mix(in oklab, var(--color-accent) 60%, transparent); opacity: 0; animation: luciole var(--v) ease-in-out var(--d) infinite; }
@keyframes luciole { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 50% { transform: translate(40px, -50px); } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-20px, -100px); } }
.nuage { left: 0; width: 18cqw; height: 5cqw; border-radius: 50%; background: color-mix(in oklab, var(--color-card) 55%, transparent); filter: blur(6px); animation: nuage var(--v) linear var(--d) infinite; }
.nuage::before { content: ""; position: absolute; left: 25%; top: -55%; width: 45%; height: 110%; border-radius: 50%; background: inherit; }
@keyframes nuage { from { transform: translateX(-25cqw); } to { transform: translateX(110cqw); } }
.monde-img .etape.ici .pastille { animation: battre 1.4s ease-in-out infinite; }
@keyframes battre { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .anim-monde { display: none; } .monde-img .etape.ici .pastille { animation: none; } }
/* éléments découpés de la carte */
.elements-monde { position: absolute; inset: 0; pointer-events: none; }
.monde-img.miroir .elements-monde { transform: scaleX(-1); }
.elements-monde .el { position: absolute; display: block; height: auto; }
.el.e-arbre { transform-origin: 50% 92%; animation: vent var(--v) ease-in-out var(--d) infinite; }
@keyframes vent { 0%, 100% { transform: rotate(-6deg) scale(1.02); } 50% { transform: rotate(6deg) translateX(3%) scale(1.06); } }
.el.e-boule { animation: flotter var(--v) ease-in-out var(--d) infinite; }
@keyframes flotter { 50% { transform: translateY(-35%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .elements-monde .el { animation: none; } }

/* ===== objets de la matière qui flottent ===== */
.icones-monde { position: absolute; inset: 0; pointer-events: none; }
.icone-flotte { position: absolute; width: 8%; height: auto; translate: -50% -50%; overflow: visible; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--color-accent) 55%, transparent)); animation: icone var(--v) ease-in-out var(--d) infinite; }
@keyframes icone { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-30%) rotate(6deg); } }
.ico-t { fill: var(--color-accent); font-family: var(--font-body); }
.ico-f { fill: var(--color-accent); }
.ico-l { fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ico-l-sombre { fill: none; stroke: var(--color-ink); stroke-width: 6; stroke-linecap: round; }
.ico-sombre { fill: var(--color-ink); }
.ico-r { fill: var(--color-accent-3); stroke: var(--color-accent-3); }
.ico-b { fill: var(--color-accent-2); }
.ico-v { fill: var(--color-mint); }
.ico-blanc { fill: none; stroke: var(--color-card); stroke-width: 6; }
.ico-blanc-f { fill: var(--color-card); }

/* ===== une saison par monde ===== */
.saison { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.saison i { position: absolute; top: -4%; display: block; animation: tomber-saison var(--v) linear var(--d) infinite; scale: var(--t); }
@keyframes tomber-saison { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3cqw, 55cqw) rotate(180deg); } to { transform: translate(-2cqw, 110cqw) rotate(360deg); } }
.saison .feuille { width: 14px; height: 9px; border-radius: 0 80% 0 80%; background: var(--color-accent-3); opacity: .9; }
.saison .feuille:nth-child(3n) { background: var(--color-accent); } .saison .feuille:nth-child(3n+1) { background: var(--color-kraft); }
.saison .flocon { width: 7px; height: 7px; border-radius: 50%; background: var(--color-card); box-shadow: 0 0 6px var(--color-card); opacity: .9; }
.saison .petale { width: 11px; height: 8px; border-radius: 60% 0 60% 0; background: color-mix(in oklab, var(--color-accent-3) 45%, var(--color-card)); }
.saison .eclat { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 14px 6px color-mix(in oklab, var(--color-accent) 50%, transparent); animation-name: eclat-ete; top: auto; bottom: 10%; }
@keyframes eclat-ete { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-80cqw); opacity: 0; } }
/* les arbres changent avec la saison */
.saison-1 .el.e-arbre { filter: hue-rotate(-70deg) saturate(1.4); }
.saison-2 .el.e-arbre { filter: hue-rotate(-30deg) saturate(.6) brightness(1.1); }
.saison-3 .el.e-arbre { filter: saturate(.12) brightness(1.7); }
.saison-3 .fond-monde { filter: saturate(.8) brightness(1.05); }
.monde-img.miroir.saison-3 .fond-monde { filter: saturate(.8) brightness(1.05); }
.saison-4 .el.e-arbre { filter: hue-rotate(205deg) saturate(.8) brightness(1.35); }

/* ===== un moment de la journée par classe ===== */
.monde-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-classe="CP"] .monde-img::after { background: linear-gradient(var(--color-sugar), transparent 70%); mix-blend-mode: soft-light; opacity: .9; }
[data-classe="CE1"] .monde-img::after { background: radial-gradient(circle at 80% 10%, var(--color-accent), transparent 60%); mix-blend-mode: soft-light; opacity: .8; }
[data-classe="CE2"] .monde-img::after { background: linear-gradient(color-mix(in oklab, var(--color-accent-3) 60%, var(--color-accent)), transparent 75%); mix-blend-mode: soft-light; opacity: .75; }
[data-classe="CM1"] .monde-img::after { background: linear-gradient(color-mix(in oklab, var(--color-accent-2) 60%, var(--color-accent-3)), transparent 80%); mix-blend-mode: multiply; opacity: .35; }
[data-classe="CM2"] .monde-img::after { background: radial-gradient(circle at 50% 40%, transparent 40%, var(--color-ink)); opacity: .45; }
.monde-img .etape, .monde-img .monde-nom, .monde-img .cadeau-monde { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .icone-flotte, .saison i { animation: none; } .saison { display: none; } }
/* étapes bonus */
.etape.bonus .pastille .etoile { width: 60%; height: 60%; }
.etape.bonus.ouvert .pastille { background: var(--grain), color-mix(in oklab, var(--color-accent-3) 55%, var(--color-card)); box-shadow: 0 var(--edge) 0 0 var(--color-accent-3), 0 0 0 6px color-mix(in oklab, var(--color-accent-3) 35%, transparent); }
.etape.bonus-chrono.ouvert .pastille { background: var(--grain), color-mix(in oklab, var(--color-accent-2) 45%, var(--color-card)); box-shadow: 0 var(--edge) 0 0 var(--color-accent-2); }
.chrono { font-weight: 600; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-3); color: var(--color-card); }

/* ===== carte du ciel : éléments découpés et animés ===== */
.actions-carte { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.actions-carte #b-vue { margin-top: 0; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

.el.e-nuage-p { animation: derive calc(var(--v) * .7) ease-in-out var(--d) infinite alternate; }
.el.e-nuage { animation: derive calc(var(--v) * 2.2) ease-in-out var(--d) infinite alternate; }
@keyframes derive { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.el.e-ilot { animation: flotter-ilot calc(var(--v) * 1.4) ease-in-out var(--d) infinite; }
@keyframes flotter-ilot { 50% { transform: translateY(-9%); } }
.el.e-piece { animation: tourner-piece 1.6s ease-in-out var(--d) infinite; }
@keyframes tourner-piece { 0%, 100% { transform: scaleX(1) translateY(0); } 25% { transform: scaleX(.15) translateY(-6%); } 50% { transform: scaleX(1) translateY(-10%); } 75% { transform: scaleX(.15) translateY(-6%); } }
.el.e-eclair { transform-origin: 50% 90%; animation: eclair 2.4s ease-in-out var(--d) infinite; }
@keyframes eclair { 0%, 70%, 100% { transform: scale(1); filter: none; } 76% { transform: scale(1.18) rotate(-6deg); filter: brightness(1.5) drop-shadow(0 0 10px var(--color-accent)); } 82% { transform: scale(1); } 88% { transform: scale(1.12) rotate(4deg); filter: brightness(1.4) drop-shadow(0 0 8px var(--color-accent)); } }
.el.e-cristal { animation: cristal 3s ease-in-out var(--d) infinite; }
@keyframes cristal { 50% { transform: translateY(-8%); filter: brightness(1.25) drop-shadow(0 0 12px var(--color-accent-2)); } }
[data-style="ciel"] .monde-img .cadeau-monde { translate: 0 -50%; }

.monde-img.dense .etape .pastille { width: clamp(26px, 4vw, 38px); height: clamp(26px, 4vw, 38px); font-size: var(--text-sm); }

/* ===== carte des îles : 3 îles par monde, reliées par un chemin en pointillés ===== */
.monde-iles { --teinte: var(--color-accent-2); aspect-ratio: 1 / 1.4; background: linear-gradient(color-mix(in oklab, var(--teinte) 38%, var(--color-card)), color-mix(in oklab, var(--teinte) 14%, var(--color-sugar))); }
.monde-iles[data-m="francais"] { --teinte: var(--color-accent-3); }
.monde-iles[data-m="anglais"] { --teinte: color-mix(in oklab, var(--color-accent-2) 70%, var(--color-accent-3)); }
.monde-iles[data-m="sciences"] { --teinte: var(--color-mint); }
.monde-iles[data-m="histoire-geo"] { --teinte: var(--color-sand); }
.monde-iles[data-m="emc"] { --teinte: var(--color-leaf); }
.monde-iles[data-m="evar"] { --teinte: color-mix(in oklab, var(--color-accent-3) 50%, var(--color-card)); }
.monde-iles[data-m="arts"] { --teinte: var(--color-accent); }
.monde-iles[data-m="musique"] { --teinte: color-mix(in oklab, var(--color-accent-2) 55%, var(--color-accent-3)); }
.monde-iles[data-m="eps"] { --teinte: var(--color-mint-deep); }
.chemin-iles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.chemin-iles polyline { fill: none; stroke: var(--color-card); stroke-width: 6; stroke-dasharray: 2 14; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; }
.ile { position: absolute; animation: flotter-ile 6s ease-in-out var(--d) infinite; }
.ile.inverse { scale: -1 1; }
.ile-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 22px color-mix(in oklab, var(--color-ink) 22%, transparent)); }
@keyframes flotter-ile { 50% { transform: translateY(-1.6%); } }
.ile .el { position: absolute; display: block; height: auto; }
.el.e-plante { transform-origin: 50% 95%; animation: vent-doux var(--v) ease-in-out var(--d) infinite; }
@keyframes vent-doux { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
.el.e-objet { transform-origin: 50% 100%; animation: sautiller calc(var(--v) * 1.3) ease-in-out var(--d) infinite; }
@keyframes sautiller { 0%, 60%, 100% { transform: translateY(0) scale(1); } 70% { transform: translateY(0) scale(1.04, .96); } 80% { transform: translateY(-7%) scale(.98, 1.03); } 90% { transform: translateY(0) scale(1.03, .97); } }
.saison-1 .el.e-plante { filter: hue-rotate(-65deg) saturate(1.3); }
.saison-3 .el.e-plante { filter: saturate(.2) brightness(1.5); }
.saison-4 .el.e-plante { filter: hue-rotate(200deg) saturate(.8) brightness(1.25); }
@media (prefers-reduced-motion: reduce) { .ile, .ile .el { animation: none; } }
/* petites îles qui flottent dans le ciel de la carte */
.petite-ile { position: absolute; display: block; height: auto; filter: drop-shadow(0 14px 10px color-mix(in oklab, var(--color-ink) 14%, transparent)); animation: flotte-petite var(--v) ease-in-out var(--d) infinite; }
@keyframes flotte-petite { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10%) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .petite-ile { animation: none; } }
.petite-ile.retournee { scale: -1 1; }
/* une petite île sous chaque étape */
.ile-etape { position: absolute; z-index: 1; height: auto; translate: -50% -30%; pointer-events: none; filter: drop-shadow(0 10px 8px color-mix(in oklab, var(--color-ink) 18%, transparent)); animation: flotte-etape 5s ease-in-out var(--d) infinite; }
@keyframes flotte-etape { 50% { transform: translateY(-4%); } }
@media (prefers-reduced-motion: reduce) { .ile-etape { animation: none; } }
/* carte du ciel en archipel */
.monde-archipel .ile-etape { translate: -50% -32%; }
.nuage-archipel { position: absolute; z-index: 0; height: auto; opacity: .95; pointer-events: none; animation: derive var(--v) ease-in-out var(--d) infinite alternate; }
.monde-archipel .chemin-iles { z-index: 0; }
.monde-archipel .ile-etape { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .nuage-archipel { animation: none; } }
/* carte archipel : les îles de Sébastien, une par étape ; l'île du trésor au bout de chaque monde */
.monde-archipel .ile-etape { translate: -50% -66%; }
.monde-archipel .ile-fin { z-index: 1; }
.monde-archipel .cadeau-monde.sur-ile { translate: -50% calc(-100% - 6.5rem); }
.pierre-chemin { position: absolute; z-index: 2; width: 6.5%; height: auto; translate: -50% -60%; pointer-events: none; animation: flotte-etape 4s ease-in-out var(--d) infinite; }
@media (prefers-reduced-motion: reduce) { .pierre-chemin { animation: none; } }
.pierre-chemin.dessus { z-index: 2; }
.monde-archipel .etape { z-index: 3; }
/* carte archipel plus grande : elle prend presque tout l'écran */
.parcours-ecran:has(.monde-archipel) { max-width: min(1500px, 100%); }
.monde-img.monde-archipel { width: min(100%, 1440px); }
.monde-archipel .etape .pastille { width: clamp(40px, 5vw, 66px); height: clamp(40px, 5vw, 66px); }
/* étape fermée : un vrai cadenas doré à la place de la pastille grise */
.etape.ferme .pastille { background: none; box-shadow: none; }
.cadenas { width: 82%; height: auto; overflow: visible; filter: drop-shadow(0 3px 2px rgb(60 30 0 / .35)); transform-origin: 50% 20%; animation: cadenas-dandine 6s ease-in-out var(--d) infinite; }
@keyframes cadenas-dandine { 0%, 84%, 100% { rotate: 0deg; } 87% { rotate: -9deg; } 90% { rotate: 7deg; } 93% { rotate: -4deg; } 96% { rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) { .cadenas { animation: none; } }
.monde-img .etape.ferme .cadenas { width: 100%; }
.monde-img .etape.ferme .pastille { width: clamp(46px, 5.6vw, 76px); height: clamp(46px, 5.6vw, 76px); }
.etape .etape-nom { position: relative; z-index: 2; }
/* nom de l'étape sur la carte : un petit panneau en bois, cloué, qui se balance doucement */
.monde-img { --bois: #b8743a; --bois-clair: #d99a55; --bois-fonce: #6b3a17; --bois-texte: #fff6e2; }
.monde-img .etape .etape-nom { position: relative; z-index: 2; margin-top: 2px; max-width: 170px; padding: 6px 16px 7px; border-radius: 9px 12px 8px 13px;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700; line-height: 1.15; color: var(--bois-texte); text-shadow: 0 1.5px 0 var(--bois-fonce);
  background: repeating-linear-gradient(176deg, transparent 0 7px, rgb(107 58 23 / .16) 7px 8px, transparent 8px 15px), linear-gradient(var(--bois-clair), var(--bois));
  border: 2.5px solid var(--bois-fonce); box-shadow: inset 0 2px 0 rgb(255 255 255 / .28), inset 0 -3px 0 rgb(107 58 23 / .35), 0 4px 0 var(--bois-fonce), 0 7px 10px rgb(60 30 0 / .3);
  transform-origin: 50% -6px; animation: panneau 4s ease-in-out infinite; }
.monde-img .etape .etape-nom::before, .monde-img .etape .etape-nom::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--bois-fonce); box-shadow: inset 1px 1px 0 rgb(255 255 255 / .35); }
.monde-img .etape .etape-nom::before { left: 5px; } .monde-img .etape .etape-nom::after { right: 5px; }
.monde-img .etape.ferme .etape-nom { color: var(--bois-texte); font-weight: 700; filter: saturate(.55) brightness(.92); }
.monde-img .etape.ici .etape-nom { --bois-clair: #f2c14e; --bois: #d8932a; }
@keyframes panneau { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
@media (prefers-reduced-motion: reduce) { .monde-img .etape .etape-nom { animation: none; } }
.monde-img .etape { width: 210px; }
.monde-img .etape .etape-nom { max-width: 200px; width: max-content; font-size: 1.05rem; text-wrap: balance; }
/* ===== la pêche, d'après la maquette de Sébastien ===== */
.choix-grille.scene-peche { display: block; }
.carte-q:has(.scene-peche) > .consigne { display: none; }
.lac { --encre-lac: #3b2a1a; position: relative; aspect-ratio: 1676 / 939; border-radius: 22px; overflow: clip; container-type: inline-size; }
.lac-fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lac-panneau { position: absolute; left: 22.6%; top: 4.6%; width: 59.8%; height: 12.4%; display: flex; align-items: center; gap: 2.2cqi; }
.lac-panneau span { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.7cqi, 2.2rem); line-height: 1.1; color: var(--encre-lac); text-align: center; text-wrap: balance; }
.lac-son { --edge: 0px; flex: none; width: 5.4cqi; height: 5.4cqi; min-width: 34px; min-height: 34px; margin-left: 1.4cqi; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; }
.lac-son .ico { opacity: 0; }
.lac-son:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.lac-bouchon { position: absolute; left: 49.1%; top: 23.85%; width: 5.73%; height: auto; transform-origin: 50% 0; animation: bouchon 2.6s ease-in-out infinite; }
@keyframes bouchon { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.lac:has(.juste) .lac-bouchon { animation: bouchon-tire .5s ease-in-out 2; }
@keyframes bouchon-tire { 50% { translate: 0 18%; } }
.poisson-lac { --edge: 0px; position: absolute; left: var(--x); top: var(--y); width: 14%; aspect-ratio: 232 / 152; padding: 0; border: 0; background: none; box-shadow: none; translate: -50% -50%; cursor: pointer; animation: nage-lac var(--v) ease-in-out var(--d) infinite alternate; }
.poisson-lac img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgb(0 40 60 / .3)); pointer-events: none; }
.poisson-lac span { position: absolute; left: 53%; top: 47%; translate: -50% -50%; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 4.2cqi, 3.2rem); line-height: 1; color: #3d4048; text-shadow: 0 2px 0 rgb(255 255 255 / .55); }
.poisson-lac:hover img, .poisson-lac:focus-visible img { filter: drop-shadow(0 0 10px rgb(255 255 255 / .9)) drop-shadow(0 6px 6px rgb(0 40 60 / .3)); }
.poisson-lac:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 40%; }
@keyframes nage-lac { 0% { transform: translate(-5cqi, 0) rotate(-3deg); } 50% { transform: translate(0, -1.2cqi) rotate(2deg); } 100% { transform: translate(5cqi, .6cqi) rotate(-1deg); } }
.poisson-lac.juste { animation: none; transform: translate(var(--tx, 0), var(--ty, -200px)) rotate(-25deg) scale(.6); opacity: 0; transition: transform .9s cubic-bezier(.3, -.4, .5, 1), opacity .4s ease .7s; }
.poisson-lac.faux { animation: secoue-lac .4s ease-in-out 2; opacity: .45; }
@keyframes secoue-lac { 25% { transform: translateX(-1.5cqi); } 75% { transform: translateX(1.5cqi); } }
@media (prefers-reduced-motion: reduce) { .lac-bouchon, .poisson-lac, .lac:has(.juste) .lac-bouchon { animation: none; } .poisson-lac.juste { transition: opacity .3s; transform: none; } }
.poisson-lac.juste, .poisson-lac.faux { background: none; box-shadow: none; }
.ecran.exo:has(.scene-peche) { max-width: min(1400px, 100%); }
.poisson-lac:hover, .poisson-lac:active { translate: -50% -50%; }
/* consigne centrée sur tout le panneau (le haut-parleur est posé à gauche, par-dessus) */
.lac-panneau { justify-content: center; padding: 0 8cqi; }
.lac-son { position: absolute; left: 0; top: 50%; translate: 0 -50%; }
/* consigne sur une seule ligne, centrée ; la taille s'adapte (voir ajusterPanneau) */
.lac-panneau { padding: 0 6.5cqi; }
.lac-panneau span { flex: none; white-space: nowrap; text-wrap: nowrap; }
/* fond animé de la pêche */
.lac-filtres { position: absolute; width: 0; height: 0; }
.lac-anim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lac-eau { clip-path: inset(43% 0 0 0); filter: url(#f-eau); }
.lac-herbes { filter: url(#f-herbes); clip-path: polygon(0 48%, 21% 52%, 26% 100%, 0 100%, 0 48%, 100% 42%, 100% 100%, 78% 100%, 82% 62%, 100% 42%); }
.lac-arbres { filter: url(#f-arbres); clip-path: polygon(0 0, 24% 0, 22% 22%, 0 30%, 0 0, 100% 0, 100% 34%, 80% 26%, 78% 0, 100% 0); }
.lac-reflets { position: absolute; inset: 43% 0 0 0; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: repeating-linear-gradient(100deg, transparent 0 7%, rgb(255 255 230 / .5) 9%, transparent 12% 19%); background-size: 200% 100%; animation: reflets 8s linear infinite; }
@keyframes reflets { to { background-position: -200% 0; } }
.lac-surface { position: absolute; left: 0; right: 0; top: 40.5%; height: 3.4%; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(90deg, transparent 0 3%, rgb(255 255 255 / .55) 4%, transparent 5.5% 8%); background-size: 300% 100%; animation: reflets 6s linear infinite reverse; opacity: .6; }
.lac-bulle { position: absolute; bottom: 4%; width: calc(1.1cqi * var(--t)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .95) 0 18%, rgb(220 245 255 / .35) 40%, rgb(200 240 255 / .15) 65%, rgb(255 255 255 / .6) 72%, transparent 76%);
  animation: bulle-monte var(--v) ease-in var(--d) infinite; }
@keyframes bulle-monte { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .9; } 50% { translate: var(--o) -26cqi; } 88% { opacity: .9; } 100% { translate: calc(var(--o) * -1) -48cqi; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lac-anim, .lac-reflets, .lac-surface, .lac-bulle { display: none; } }

/* ===== vrais jeux (jeux.js) : version brute, à retravailler un par un ===== */
.jeu-pre, .jeu-mare, .jeu-chateau, .jeu-route, .jeu-stand, .jeu-verger, .jeu-memory, .jeu-tri, .jeu-ordre { --j-ciel: #bfe6ff; --j-herbe: #7cc96b; --j-terre: #8b5a2b; --j-eau: #4fb3e8; --j-bois: #b97a3d; --j-encre: #2b2118; --j-blanc: #fffdf6;
  position: relative; border-radius: 22px; overflow: clip; container-type: inline-size; color: var(--j-encre); }
.lbl { font-weight: 700; font-size: clamp(.9rem, 2.6cqi, 1.5rem); line-height: 1.1; text-align: center; }
.lbl svg { max-width: 90px; height: auto; }
.choix.taupe, .choix.nenuphar, .choix.porte, .choix.voie, .choix.cible-c, .choix.fruit { --edge: 0px; box-shadow: none; }
.choix.taupe:hover, .choix.nenuphar:hover, .choix.porte:hover, .choix.voie:hover, .choix.cible-c:hover, .choix.fruit:hover { translate: none; }

/* taupes */
.jeu-pre.taupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 10px; padding: 40px 20px 24px; background: linear-gradient(var(--j-ciel) 0 22%, var(--j-herbe) 22%); min-height: 330px; align-content: end; }
.trou { position: relative; height: 150px; overflow: clip; }
.trou .motte { position: absolute; left: 6%; right: 6%; bottom: 0; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #3b2412 0 45%, var(--j-terre) 46%); z-index: 2; }
.taupe { position: absolute; left: 12%; right: 12%; bottom: 10px; height: 130px; border-radius: 48% 48% 14% 14%; background: #8d6e63; border: 0; padding: 30px 6px 10px; display: grid; place-items: center;
  animation: taupe var(--v) ease-in-out var(--d) infinite; color: var(--j-blanc); }
.taupe .tete { position: absolute; top: 12px; left: 50%; width: 46px; height: 14px; translate: -50% 0; background: radial-gradient(circle at 20% 50%, #111 0 4px, transparent 5px), radial-gradient(circle at 80% 50%, #111 0 4px, transparent 5px); }
.taupe .lbl { background: var(--j-blanc); color: var(--j-encre); border-radius: 10px; padding: 4px 8px; }
@keyframes taupe { 0%, 100% { translate: 0 105%; } 18%, 62% { translate: 0 0; } 80% { translate: 0 105%; } }
.taupe.juste { animation: none; translate: 0 0; background: var(--color-mint-deep); } .taupe.faux { animation: none; translate: 0 105%; transition: translate .4s; }

/* grenouille */
.jeu-mare { min-height: 360px; background: radial-gradient(ellipse at 50% 120%, #2f8fc4 0 40%, var(--j-eau) 41% 100%); display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 22px; padding: 30px 20px 120px; }
.nenuphar { width: clamp(120px, 24cqi, 220px); min-height: 90px; border: 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 40%, #a5e08a, #4f9e3f); padding: 14px; display: grid; place-items: center; animation: flotte-n 4s ease-in-out var(--d) infinite; }
@keyframes flotte-n { 50% { translate: 0 6px; rotate: 2deg; } }
.nenuphar.faux { animation: coule 1s forwards; } @keyframes coule { to { translate: 0 30px; opacity: .2; scale: .8; } }
.nenuphar.juste { animation: none; background: radial-gradient(circle at 50% 40%, #fff59d, #f9a825); }
.grenouille { position: absolute; left: calc(50% - 40px); bottom: 14px; width: 80px; height: 64px; border-radius: 50% 50% 40% 40%; background: #43a047; z-index: 3; transition: translate .55s cubic-bezier(.3, -.5, .6, 1.4);
  box-shadow: inset 0 -10px 0 #2e7d32; }
.grenouille::before, .grenouille::after { content: ""; position: absolute; top: -12px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, #111 0 6px, #fff 7px); border: 4px solid #43a047; }
.grenouille::before { left: 6px; } .grenouille::after { right: 6px; }
.grenouille.plouf { opacity: .4; }

/* portes */
.jeu-chateau { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; padding: 30px 20px; background: repeating-linear-gradient(0deg, #9e9e9e 0 38px, #8a8a8a 38px 40px), #9e9e9e; min-height: 320px; }
.porte { position: relative; min-height: 240px; border: 6px solid #5d4037; border-radius: 80px 80px 6px 6px; padding: 0; background: #3e2723; overflow: clip; perspective: 600px; }
.porte .battant { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; background: repeating-linear-gradient(90deg, var(--j-bois) 0 30px, #a66a32 30px 33px); color: var(--j-blanc); text-shadow: 0 2px 0 #4e2c10; transform-origin: 0 50%; transition: transform .7s; z-index: 1; }
.porte .derriere { position: absolute; inset: 20% 20%; border-radius: 50%; }
.porte.juste .battant, .porte.faux .battant { transform: rotateY(-105deg); }
.porte.juste .derriere { background: radial-gradient(circle, #fff176 0 30%, #ffb300 31% 60%, transparent 62%); }
.porte.faux .derriere { background: radial-gradient(circle at 35% 40%, #111 0 6%, transparent 7%), radial-gradient(circle at 65% 40%, #111 0 6%, transparent 7%), radial-gradient(ellipse at 50% 50%, #fafafa 0 55%, transparent 57%); }

/* course */
.jeu-route { display: grid; grid-template-columns: repeat(var(--n), 1fr); min-height: 380px; background: #555; position: relative; }
.jeu-route .lignes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n) - 4px), #fff calc(100% / var(--n) - 4px) calc(100% / var(--n))); -webkit-mask: repeating-linear-gradient(transparent 0 30px, #000 30px 60px); mask: repeating-linear-gradient(transparent 0 30px, #000 30px 60px); animation: route .6s linear infinite; }
@keyframes route { to { -webkit-mask-position: 0 60px; mask-position: 0 60px; } }
.voie { position: relative; border: 0; background: none; padding: 0; z-index: 1; }
.voie .arche { position: absolute; left: 8%; right: 8%; top: 0; padding: 14px 8px; border-radius: 14px 14px 0 0; background: #ffca28; border: 4px solid #e65100; animation: arche 3.2s linear infinite; }
@keyframes arche { from { translate: 0 -30%; } to { translate: 0 210%; } }
.voie.faux .arche { background: #ef9a9a; animation-play-state: paused; } .voie.juste .arche { background: #a5d6a7; animation-play-state: paused; }
.voiture { position: absolute; bottom: 14px; left: calc((var(--i, 0) + .5) * 100% / var(--n)); width: 56px; height: 90px; translate: -50% 0; border-radius: 16px; background: #e53935; box-shadow: inset 0 18px 0 #90caf9, inset 0 -14px 0 #b71c1c; transition: left .45s ease; z-index: 2; }
.voiture.bonk { animation: secoue-lac .3s 2; }

/* cible */
.jeu-stand { height: 440px; background: linear-gradient(#ffe0b2, #ffcc80); }
.cible-c { position: absolute; top: var(--y); left: 0; width: clamp(90px, 14cqi, 130px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  background: radial-gradient(circle, var(--j-blanc) 0 30%, #e53935 31% 45%, var(--j-blanc) 46% 60%, #e53935 61% 75%, var(--j-blanc) 76%); animation: glisse-c var(--v) ease-in-out var(--d) infinite alternate; }
.cible-c .lbl { background: rgb(255 255 255 / .9); border-radius: 8px; padding: 2px 6px; }
@keyframes glisse-c { from { left: 2%; } to { left: calc(98% - clamp(90px, 14cqi, 130px)); } }
.cible-c.juste { animation-play-state: paused; scale: 1.15; } .cible-c.faux { animation-play-state: paused; opacity: .35; }
.fleche { position: absolute; left: calc(50% - 6px); bottom: 6px; width: 12px; height: 70px; background: linear-gradient(#5d4037 0 80%, #fff 80%); border-radius: 0 0 4px 4px; transition: translate .35s ease-in; z-index: 3; }
.fleche::before { content: ""; position: absolute; top: -14px; left: -6px; border: 12px solid transparent; border-bottom: 16px solid #424242; border-top: 0; }

/* panier */
.jeu-verger { min-height: 420px; height: 420px; background: linear-gradient(#b3e5fc, #e1f5fe 70%, var(--j-herbe) 70%); touch-action: none; }
.fruit { position: absolute; top: -20%; width: clamp(90px, 16cqi, 150px); min-height: 70px; translate: -50% 0; border: 0; border-radius: 50%; padding: 12px; background: radial-gradient(circle at 35% 30%, #ff8a80, #e53935); color: var(--j-blanc); display: grid; place-items: center; }
.fruit .lbl { text-shadow: 0 2px 0 #7f0000; }
.fruit.faux { opacity: .3; } .fruit.juste { background: radial-gradient(circle at 35% 30%, #c5e1a5, #43a047); }
.panier-j { position: absolute; bottom: 10px; left: 50%; width: 130px; height: 60px; translate: -50% 0; border-radius: 6px 6px 40px 40px; background: repeating-linear-gradient(45deg, #a1887f 0 8px, #8d6e63 8px 16px); border-top: 8px solid #6d4c41; pointer-events: none; z-index: 2; }

/* memory */
.jeu-memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px; background: #6a4c93; }
.carte-m { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; border-radius: 14px; background: none; perspective: 700px; cursor: pointer; }
.carte-m .dos, .carte-m .face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; transition: transform .45s; display: grid; place-items: center; padding: 8px; }
.carte-m .dos { background: repeating-linear-gradient(45deg, #ffca28 0 10px, #ffb300 10px 20px); border: 4px solid var(--j-blanc); }
.carte-m .face { background: var(--j-blanc); transform: rotateY(180deg); font-weight: 700; font-size: clamp(.8rem, 2.4cqi, 1.3rem); text-align: center; color: var(--j-encre); }
.carte-m.vue .dos { transform: rotateY(-180deg); } .carte-m.vue .face { transform: rotateY(0); }
.carte-m.paire .face { background: #c8e6c9; }

/* tri */
.jeu-tri { padding: 20px; background: #eceff1; display: grid; gap: 18px; }
.tapis { height: 110px; border-radius: 14px; background: repeating-linear-gradient(90deg, #455a64 0 20px, #37474f 20px 40px); display: grid; place-items: center; overflow: clip; animation: tapis 1s linear infinite; }
@keyframes tapis { to { background-position: 40px 0; } }
.colis { padding: 14px 22px; border-radius: 10px; background: #ffcc80; border: 3px solid #e65100; font-weight: 700; font-size: clamp(1rem, 3cqi, 1.6rem); }
.colis.arrive { animation: arrive-c .5s ease-out; } .colis.part { transition: translate .45s ease-in, opacity .45s; translate: 0 120px; opacity: 0; }
@keyframes arrive-c { from { translate: -60cqi 0; } }
.boites { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.boite-t { min-height: 110px; border: 0; border-radius: 10px 10px 18px 18px; background: #66bb6a; color: #fff; font-weight: 700; font-size: clamp(1rem, 2.6cqi, 1.4rem); box-shadow: inset 0 14px 0 #43a047; cursor: pointer; padding: 22px 10px 10px; }
.boite-t:nth-child(2) { background: #42a5f5; box-shadow: inset 0 14px 0 #1e88e5; } .boite-t:nth-child(3) { background: #ab47bc; box-shadow: inset 0 14px 0 #8e24aa; }
.boite-t.oui { animation: saute-b .4s; } .boite-t.non { animation: secoue-lac .3s 2; }
@keyframes saute-b { 50% { translate: 0 -10px; } }
.reste { margin: 0; text-align: center; font-weight: 600; }

/* ordre */
.jeu-ordre { padding: 20px; background: #fff8e1; display: grid; gap: 22px; }
.rangee { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 70px; padding: 12px; border-radius: 14px; background: #d7ccc8; }
.place { min-width: 70px; min-height: 50px; padding: 8px 12px; border-radius: 10px; border: 3px dashed #8d6e63; display: grid; place-items: center; font-weight: 700; }
.place.pleine { border-style: solid; background: #fff; animation: saute-b .35s; }
.tas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.etiq { padding: 14px 18px; border: 0; border-radius: 12px; background: #4fc3f7; color: #fff; font-weight: 700; font-size: clamp(1rem, 2.6cqi, 1.4rem); box-shadow: 0 5px 0 #0288d1; cursor: pointer; }
.etiq.posee { opacity: .25; } .etiq.non { animation: secoue-lac .3s 2; }
@media (prefers-reduced-motion: reduce) { .taupe, .nenuphar, .lignes, .arche, .cible-c, .tapis, .colis { animation: none !important; } .taupe { translate: 0 0; } }
/* ===== le train, d'après la maquette de Sébastien ===== */
.choix-grille.scene-train { display: block; }
.carte-q:has(.scene-train) > .consigne { display: none; }
.ecran.exo:has(.scene-train) { max-width: min(1400px, 100%); }
.tr-scene { position: relative; aspect-ratio: 1766 / 891; border-radius: 22px; overflow: clip; container-type: inline-size; }
.tr-fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lac-panneau.tr-panneau { left: 22.8%; top: 7.2%; width: 54.2%; height: 21.5%; padding: 0 6.5cqi; }
.tr-panneau span { font-size: clamp(1rem, 2.8cqi, 2.4rem); color: #23201c; }
.lac-son.tr-son { width: 5.4cqi; height: 5.4cqi; left: 1.7cqi; }
.tr-convoi { position: absolute; inset: 0; pointer-events: none; transition: translate 2.2s cubic-bezier(.5, 0, .9, .6); }
.tr-convoi.part { translate: 110% 0; }
.tr-loco { position: absolute; left: 7.4%; top: 31%; width: 14.8%; transform-origin: 50% 100%; animation: tchou .5s ease-in-out infinite alternate; }
@keyframes tchou { to { scale: 1 .985; } }
.tr-fumee { position: absolute; left: 11.6%; top: 29%; width: 3cqi; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .85); animation: fumee 2s ease-out infinite; }
.tr-fumee.f2 { animation-delay: -1s; }
@keyframes fumee { from { translate: 0 0; scale: .4; opacity: .9; } to { translate: 3cqi -9cqi; scale: 2.2; opacity: 0; } }
.tr-wagon { position: absolute; top: 38%; aspect-ratio: 266 / 165; display: block; }
.tr-wagon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-wagon b { position: absolute; left: 8%; right: 8%; top: 8%; height: 56%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 4.6cqi, 4rem); color: #23201c; }
.tr-wagon.vide b { color: #1e63c4; animation: attend 1.2s ease-in-out infinite; }
@keyframes attend { 50% { scale: 1.15; } }
.tr-wagon.rempli b { color: #2e7d32; animation: saute-b .4s; }
.tr-bouton { --edge: 0px; position: absolute; top: 72%; aspect-ratio: 360 / 164; padding: 0 0 2.2%; border: 0; border-radius: 0; box-shadow: none; background: url(img/train/bouton.png) center / 100% 100% no-repeat; display: grid; place-items: center; }
.tr-bouton span { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 5cqi, 4.4rem); line-height: 1; color: #23201c; }
.tr-bouton:hover { translate: 0 -4px; filter: brightness(1.05); } .tr-bouton:active { translate: 0 3px; }
.tr-bouton.juste, .tr-bouton.faux { box-shadow: none; background: url(img/train/bouton.png) center / 100% 100% no-repeat; }
.tr-bouton.juste { filter: hue-rotate(60deg) saturate(1.3); } .tr-bouton.faux { filter: grayscale(1) brightness(.85); animation: secoue-lac .3s 2; }
.tr-bouton:focus-visible { outline: 4px solid #fff; outline-offset: 3px; border-radius: 20px; }
@media (prefers-reduced-motion: reduce) { .tr-loco, .tr-fumee, .tr-wagon.vide b { animation: none; } .tr-convoi { transition: none; } }
/* panneau du train : comme sur la maquette, le texte peut tenir sur deux lignes */
.lac-panneau.tr-panneau { padding: 0 3cqi 0 9.5cqi; }
.tr-panneau span { flex: 1; white-space: normal; text-wrap: balance; font-size: clamp(1.1rem, 3.3cqi, 2.9rem); line-height: 1.15; }
.tr-panneau span { font-size: clamp(1rem, 2.9cqi, 2.6rem); }
.tr-bouton.juste { filter: saturate(1.2) brightness(1.08) drop-shadow(0 0 10px rgb(255 255 255 / .9)); }
/* pêche : ce qu'il faut compter ou calculer est dans le décor, sur une planche accrochée sous le panneau */
.ecran.exo:has(.scene-peche) #visuel { display: none; }
.lac-compte { position: absolute; left: 3%; top: 20%; max-width: 40%; padding: 1.2cqi 1.8cqi; border-radius: 1.4cqi; background: #f4e6c8; border: .4cqi solid #8a5a2b;
  box-shadow: 0 .6cqi 0 #6b3f17, 0 1.2cqi 2cqi rgb(0 0 0 / .3); }
.lac-compte .objets { gap: 1cqi; max-width: none; }
.lac-compte .pion { width: 3.6cqi; height: 3.6cqi; }
.lac-compte .enonce { margin: 0; font-size: clamp(1.4rem, 4.6cqi, 3.6rem); }
/* ===== pêche en calques (Peche_calques de Sébastien) ===== */
.lac-pc { aspect-ratio: 1676 / 939; }
.lac-pc .pc { position: absolute; display: block; pointer-events: none; max-width: none; }
.pc-cascade { animation: cascade 1.2s steps(3) infinite; }
@keyframes cascade { 0% { filter: brightness(1); translate: 0 0; } 33% { filter: brightness(1.12); translate: 0 .3%; } 66% { filter: brightness(.95); translate: 0 -.2%; } }
.pc-algue { transform-origin: 50% 100%; animation: algue 4.5s ease-in-out var(--d) infinite alternate; }
@keyframes algue { from { transform: skewX(-4deg); } to { transform: skewX(4deg) scaleY(1.02); } }
.pc-herbe { transform-origin: 50% 100%; animation: algue 3.2s ease-in-out var(--d) infinite alternate; }
.pc-surface { animation: surface 3s ease-in-out infinite alternate; }
@keyframes surface { from { transform: translateX(-.6%) scaleY(1); } to { transform: translateX(.6%) scaleY(1.15); } }
.pc-rayons { opacity: .4; transform-origin: 50% 0; animation: rayons 6s ease-in-out infinite alternate; }
@keyframes rayons { from { opacity: .25; transform: skewX(-3deg); } to { opacity: .5; transform: skewX(3deg); } }
.pc-bulles { animation: bulles-c 5s linear infinite; }
@keyframes bulles-c { 0% { translate: 0 6%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { translate: 0 -8%; opacity: 0; } }
.pc-ligne { position: absolute; inset: 0; pointer-events: none; transform-origin: 52.3% 15%; animation: ligne 2.6s ease-in-out infinite; }
@keyframes ligne { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.lac-pc:has(.juste) .pc-ligne { animation: ligne-tire .5s ease-in-out 2; }
@keyframes ligne-tire { 50% { translate: 0 3%; } }
.lac-panneau.pc-panneau { left: 22.6%; top: 5%; width: 59.5%; height: 12.6%; padding: 0 1cqi 0 7.4cqi; }
.lac-son.pc-son { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 6.15cqi; height: 6.15cqi; margin: 0; background: none; }
.lac-son.pc-son .pc { position: absolute; inset: 0; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; }
.lac-son.pc-son:active { scale: .92; }
.poisson-pc { --edge: 0px; position: absolute; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; animation: nage-lac var(--v) ease-in-out var(--d) infinite alternate; z-index: 1; }
.poisson-pc:hover, .poisson-pc:active { translate: none; }
.poisson-pc img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 6px rgb(0 40 60 / .25)); }
.poisson-pc span { position: absolute; translate: -50% -50%; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 4.2cqi, 3.4rem); line-height: 1; color: #3d4048; text-shadow: 0 2px 0 rgb(255 255 255 / .55); }
.poisson-pc:hover img, .poisson-pc:focus-visible img { filter: drop-shadow(0 0 10px rgb(255 255 255 / .9)); }
.poisson-pc.juste { animation: none; background: none; box-shadow: none; transform: translate(var(--tx, 0), var(--ty, -200px)) rotate(-25deg) scale(.6); opacity: 0; transition: transform .9s cubic-bezier(.3, -.4, .5, 1), opacity .4s ease .7s; }
.poisson-pc.faux { background: none; box-shadow: none; animation: secoue-lac .4s ease-in-out 2; opacity: .45; }
.lac-pc .lac-compte { top: 3%; left: 1.5%; max-width: 19%; z-index: 2; }
.lac-pc .lac-panneau, .lac-pc .lac-compte { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .pc-cascade, .pc-algue, .pc-herbe, .pc-surface, .pc-rayons, .pc-bulles, .pc-ligne, .poisson-pc { animation: none; } }
.lac-pc .lac-compte { max-width: 16.5%; padding: 1cqi 1.3cqi; } .lac-pc .lac-compte .pion { width: 3cqi; height: 3cqi; }

/* ===== la centaine de jeux (jeux2.js) : habillage commun, brut ===== */
.j2 { --j-encre: #2b2118; position: relative; height: 440px; border-radius: 22px; overflow: clip; container-type: inline-size; background: var(--fond); touch-action: none; user-select: none; -webkit-user-select: none; }
.j2:focus-visible { outline: 4px solid var(--color-accent); outline-offset: 3px; }
.j2-titre { position: absolute; left: 12px; top: 10px; z-index: 5; padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / .85); font-weight: 700; font-size: .9rem; color: var(--j-encre); }
.j2-cible { --edge: 0px; position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; min-width: 84px; max-width: 30cqi; padding: 8px 12px; border: 3px solid rgb(255 255 255 / .9);
  background: rgb(255 255 255 / .92); color: var(--j-encre); box-shadow: 0 6px 14px rgb(0 0 0 / .18); cursor: pointer; z-index: 2; scale: var(--gonfle, 1); transition: scale .2s; }
.j2-cible:hover { translate: -50% -50%; filter: brightness(1.05); } .j2-cible:active { translate: -50% -50%; }
.j2-cible.large { max-width: 40cqi; }
.j2-cible .lbl { font-size: clamp(.9rem, 2.4cqi, 1.35rem); }
.j2-ico { font-size: clamp(1.6rem, 5cqi, 2.6rem); line-height: 1; }
.forme-bulle { border-radius: 999px; background: radial-gradient(circle at 30% 25%, #fff 0 15%, rgb(225 245 255 / .92) 45%, rgb(190 230 255 / .9)); }
.forme-rond { border-radius: 50%; aspect-ratio: 1; align-content: center; }
.forme-carte { border-radius: 14px; }
.forme-nuage { border-radius: 40px 50px 40px 50px / 30px 40px 30px 40px; }
.forme-ballon { border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; background: radial-gradient(circle at 30% 25%, #fff 0 10%, #ff8a80 40%, #e53935); color: #fff; }
.forme-etoile { border-radius: 20px; background: linear-gradient(#fff59d, #ffd54f); }
.forme-feuille { border-radius: 4px 40px 4px 40px; background: linear-gradient(#ffcc80, #ff8a65); }
.forme-losange { border-radius: 12px; rotate: 0deg; background: linear-gradient(135deg, #e1f5fe, #b3e5fc); }
.forme-oeuf { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(#fff, #fce4ec); }
.forme-fleur { border-radius: 30px; background: radial-gradient(circle, #fff9c4 0 30%, #f8bbd0 31%); }
.forme-goutte { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(#b3e5fc, #4fc3f7); }
.forme-gobelet { border-radius: 10px 10px 30px 30px; background: linear-gradient(#ef5350, #c62828); color: #fff; min-width: 110px; min-height: 120px; align-content: center; transition: left .5s ease-in-out, scale .2s; }
.j2-cible.juste { animation: j2-gagne .9s ease-out forwards; background: #c8e6c9; }
.j2-cible.faux { animation: secoue-lac .35s 2; opacity: .35; }
@keyframes j2-gagne { 40% { scale: 1.35; } 100% { scale: 1.15; } }
.sans-toucher .j2-cible { pointer-events: none; }
/* acteurs */
.j2-acteur, .j2-lanceur, .j2-objet, .j2-depart { position: absolute; z-index: 3; font-size: clamp(2.6rem, 8cqi, 4.2rem); line-height: 1; translate: -50% -50%; pointer-events: none; }
.j2-acteur.bas { top: 88%; left: 50%; }
.j2-acteur:not(.bas) { left: 50%; top: 85%; }
.j2-lanceur { left: 50%; top: 90%; }
.j2-projectile { position: absolute; z-index: 4; font-size: 2rem; translate: -50% -50%; opacity: 0; pointer-events: none; }
.j2-viseur { position: absolute; inset: 0; z-index: 3; cursor: crosshair; }
.j2-objet { left: 50%; top: 88%; pointer-events: auto; cursor: grab; touch-action: none; transition: left .3s, top .3s; }
.j2-objet.tenu { transition: none; cursor: grabbing; scale: 1.2; }
/* stop */
.j2-fenetre { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 60cqi; height: 46%; border-radius: 24px; background: #fff; border: 8px solid #37474f; display: grid; place-items: center; overflow: clip; box-shadow: inset 0 0 0 4px #b0bec5; }
.j2-defile { display: grid; justify-items: center; gap: 6px; font-size: 1.4rem; }
.j2-defile .lbl { font-size: clamp(1.4rem, 4.6cqi, 2.6rem); }
.j2-defile.entre { animation: j2-entre .35s ease-out; }
@keyframes j2-entre { from { translate: 0 -120%; } }
.j2-stop { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; padding: 14px 40px; border: 0; border-radius: 999px; background: #e53935; color: #fff; font: 800 1.4rem var(--font-display); box-shadow: 0 6px 0 #b71c1c; cursor: pointer; z-index: 3; }
.j2-stop:active { translate: -50% 4px; box-shadow: 0 2px 0 #b71c1c; }
.j2-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* roue */
.j2-roue { --n: 4; position: absolute; left: 50%; top: 45%; translate: -50% -50%; width: min(70cqi, 320px); aspect-ratio: 1; border-radius: 50%; border: 8px solid #fff; overflow: clip; box-shadow: 0 8px 20px rgb(0 0 0 / .25);
  background: conic-gradient(#ef5350 0 25%, #42a5f5 0 50%, #66bb6a 0 75%, #ffca28 0); }
.j2-roue .part { position: absolute; inset: 0; rotate: calc(var(--i) * 360deg / var(--n)); display: flex; justify-content: center; }
.j2-roue .part span { margin-top: 8%; padding: 4px 8px; border-radius: 8px; background: rgb(255 255 255 / .9); height: fit-content; }
.j2-fleche-roue { position: absolute; left: 50%; top: calc(45% - min(35cqi, 160px) - 26px); translate: -50% 0; font-size: 2.4rem; color: #263238; z-index: 3; }
/* gobelets */
.m-gobelets.caches .j2-cible .lbl { visibility: hidden; }
.m-gobelets .j2-cible { top: 55%; }
.j2-aide { position: absolute; left: 0; right: 0; bottom: 6%; margin: 0; text-align: center; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgb(0 0 0 / .5); }
/* lampe */
.j2-noir { --lx: 50%; --ly: 50%; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle 110px at var(--lx) var(--ly), transparent 0 70%, rgb(0 0 0 / .96) 100%); }
/* gratter */
.m-gratter { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-content: center; padding: 50px 20px 20px; }
.j2-ticket { position: relative; width: min(42cqi, 220px); aspect-ratio: 5 / 3; }
.j2-ticket .j2-cible { position: absolute; inset: 0; translate: none; max-width: none; width: 100%; height: 100%; align-content: center; }
.j2-ticket .j2-cible:hover, .j2-ticket .j2-cible:active { translate: none; }
.j2-grat { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; z-index: 3; cursor: crosshair; touch-action: none; }
/* relier */
.j2-trait { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.j2-trait line { stroke: #ff7043; stroke-width: 8; stroke-linecap: round; opacity: 0; }
.j2-depart { left: 16%; top: 50%; pointer-events: auto; cursor: grab; touch-action: none; }
/* couloirs */
.j2-couloirs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.j2-couloirs .couloir { border-right: 4px dashed rgb(255 255 255 / .6); cursor: pointer; }
.j2-couloirs .couloir:last-child { border-right: 0; }
.m-couloirs .j2-acteur { transition: left .25s ease; }
@media (prefers-reduced-motion: reduce) { .j2-defile.entre, .j2-cible.juste { animation: none; } }

/* ===== jeux habillés avec les designs livrés (designs-rendu.js) ===== */
.ecran.exo:has(.avec-design) { max-width: min(1400px, 100%); }
.carte-q:has(.avec-design) > .consigne { display: none; }
.ecran.exo:has(.visuel-dedans) #visuel { display: none; }
.j2.avec-design { height: auto; aspect-ratio: 2048 / 1152; background: #2f5f37; }
.d-calque { position: absolute; display: block; max-width: none; pointer-events: none; transform-origin: var(--px, 50%) var(--py, 100%); }
.d-ui { z-index: 5; }
.d-texte { position: absolute; display: grid; place-items: center; text-align: center; line-height: 1.12; font-family: var(--font-display); font-weight: 800; color: #3b2a1a; pointer-events: none; text-wrap: balance; overflow-wrap: anywhere; }
.d-consigne, .d-question, .d-nom { z-index: 6; }
.d-question { font-weight: 700; }
.d-nom { color: #3b2a1a; }
.d-son { position: absolute; z-index: 7; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
.d-son img { width: 100%; height: 100%; display: block; }
.d-son:active { scale: .92; }
.j2-cible.d-case { min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: block; }
.j2-cible.d-case .d-lbl .lbl, .j2-cible.d-case .d-lbl { font-size: inherit; }
.j2-cible.d-case .d-calque { position: absolute; }
.j2-cible.d-case:hover { filter: drop-shadow(0 0 1.2cqi rgb(255 255 220 / .95)); }
.j2-cible.d-case.juste { background: none; filter: drop-shadow(0 0 1.6cqi rgb(140 255 140 / .95)); }
.j2-cible.d-case.faux { background: none; }
.d-acteur { position: absolute; translate: -50% -50%; z-index: 4; pointer-events: none; font-size: 0; }
.d-acteur .d-calque { position: absolute; }
.j2-objet.d-acteur { pointer-events: auto; }
.d-va { transition: left .5s cubic-bezier(.3, -.4, .6, 1.4), top .5s cubic-bezier(.3, -.4, .6, 1.4); }
.d-fenetre { position: absolute; translate: none; border: 0; box-shadow: none; background: none; z-index: 3; }
.d-fenetre .lbl { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 4.4cqi, 3.6rem); color: #23201c; }
.j2-stop.d-stop { position: absolute; translate: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; z-index: 6; display: grid; place-items: center; }
.j2-stop.d-stop img { position: absolute; inset: 0; width: 100%; height: 100%; }
.j2-stop.d-stop span { position: relative; font: 800 clamp(1rem, 2.8cqi, 2.4rem) var(--font-display); color: #3b2a1a; }
.j2-stop.d-stop:active { translate: 0 .4cqi; box-shadow: none; }
.d-roue .part span { background: rgb(255 255 255 / .85); font-size: clamp(.8rem, 1.9cqi, 1.6rem); margin-top: 10%; }
.d-pointeur { z-index: 4; }
.avec-design .j2-fleche-roue { display: none; }
.m-gobelets .d-couvre { transition: translate .45s ease; }
.m-gobelets.caches .d-couvre { translate: 0 28%; }
.avec-design .j2-aide { z-index: 6; }
.avec-design .j2-noir { z-index: 4; }
/* décor vivant */
.d-balance { animation: d-balance 4.5s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes d-balance { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg); } }
.d-derive { animation: d-derive 14s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes d-derive { to { transform: translateX(4%); } }
.d-ondule { animation: d-ondule 3s ease-in-out infinite alternate; }
@keyframes d-ondule { to { transform: translateX(.8%) scaleY(1.04); } }
.d-tourne { animation: d-tourne .35s linear infinite; }
@keyframes d-tourne { to { transform: rotate(360deg); } }
.d-bat { animation: d-bat .3s ease-in-out infinite alternate; }
@keyframes d-bat { to { transform: rotate(-18deg); } }
.d-bouge { animation: d-balance 1.4s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .d-balance, .d-derive, .d-ondule, .d-tourne, .d-bat, .d-bouge { animation: none; } }
.d-lbl .lbl { white-space: nowrap; font-size: 1em; text-shadow: 0 0 .3cqi #fff, 0 0 .6cqi #fff; }
.d-lbl .lbl svg { max-width: 8cqi; height: auto; }
.j2-depart.d-acteur { pointer-events: auto; cursor: grab; }
.avec-design .j2-cible .j2-grat { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1cqi; z-index: 3; }
.surgit .d-case { animation: d-surgit 3.8s ease-in-out var(--d, 0s) infinite; }
.surgit .d-case.juste, .surgit .d-case.faux { animation: none; }
@keyframes d-surgit { 0%, 100% { opacity: 0; transform: translateY(25%) scale(.9); } 18%, 62% { opacity: 1; transform: none; } 80% { opacity: 0; transform: translateY(25%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .surgit .d-case { animation: none; } }
/* écrans spéciaux habillés */
.d-special .d-zone { position: absolute; z-index: 2; }
.d-memory .jeu-memory { height: 100%; padding: 0; gap: 1.6cqi; background: none; grid-template-rows: repeat(2, 1fr); }
.d-memory .carte-m { aspect-ratio: auto; }
.d-memory .carte-m .dos { background: var(--dos) center / 100% 100% no-repeat; border: 0; }
.d-memory .carte-m .face { background: var(--face) center / 100% 100% no-repeat; font: 800 clamp(.9rem, 2.4cqi, 2rem) var(--font-display); color: #3b2a1a; padding: 12%; }
.d-memory .carte-m.paire .face { filter: drop-shadow(0 0 1.2cqi rgb(140 255 140 / .9)); background-color: transparent; }
.j2.jeu-tri, .j2.jeu-ordre { display: block; padding: 0; }
.d-tapis { z-index: 1; }
.d-colis { position: absolute; z-index: 3; display: grid; place-items: center; padding: 0 1cqi; border: 0; border-radius: 0; background: center / 100% 100% no-repeat; font: 800 clamp(1rem, 2.8cqi, 2.4rem) var(--font-display); color: #3b2a1a; }
.d-boite { position: absolute; z-index: 3; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
.d-boite img { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-boite span { position: absolute; left: 10%; right: 10%; display: grid; place-items: center; font: 800 clamp(.9rem, 2.4cqi, 2rem) var(--font-display); color: #fff; text-shadow: 0 .2cqi .3cqi rgb(0 0 0 / .6); }
.d-reste { position: absolute; z-index: 3; margin: 0; display: grid; place-items: center; font: 700 clamp(.9rem, 2cqi, 1.6rem) var(--font-display); color: #fff; text-shadow: 0 .2cqi .4cqi rgb(0 0 0 / .7); }
.d-place { position: absolute; z-index: 2; display: grid; place-items: center; border: 0; border-radius: 0; background: center / 100% 100% no-repeat; font: 800 clamp(1.2rem, 4cqi, 3.4rem) var(--font-display); color: #3b2a1a; min-width: 0; min-height: 0; padding: 0; }
.d-place.pleine { background-color: transparent; }
.d-etiq { position: absolute; z-index: 3; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: center / 100% 100% no-repeat; font: 800 clamp(1rem, 3cqi, 2.6rem) var(--font-display); color: #fff; text-shadow: 0 .2cqi .3cqi rgb(0 0 0 / .5); cursor: pointer; }
.d-carte { position: absolute; z-index: 2; display: grid; place-items: center; background: center / 100% 100% no-repeat; font-family: var(--font-display); color: #3b2a1a; font-size: clamp(.9rem, 2.4cqi, 2rem); text-align: center; }
.d-carte strong { font-weight: 800; } .d-prix b { font-size: 1.8em; font-weight: 800; }
.d-vendeur { position: absolute; z-index: 2; object-fit: cover; border-radius: 50%; }
.d-argent { position: absolute; z-index: 3; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: center / 100% 100% no-repeat; font: 800 clamp(.9rem, 2.4cqi, 2rem) var(--font-display); color: #3b2a1a; cursor: pointer; }
.d-argent:active { scale: .92; }
.d-plateau { position: absolute; z-index: 2; display: flex; flex-wrap: wrap; gap: .6cqi; align-content: center; border: 0; background: none; min-height: 0; padding: 0; }
.d-plateau .donne { font-size: clamp(.7rem, 1.6cqi, 1.2rem); }
.d-bouton { position: absolute; z-index: 4; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: center / 100% 100% no-repeat; font: 800 clamp(.9rem, 2.3cqi, 2rem) var(--font-display); color: #3b2a1a; cursor: pointer; }
.d-bouton:active { translate: 0 .3cqi; }
.d-panier { position: absolute; z-index: 3; display: flex; flex-wrap: wrap; gap: 1cqi; justify-content: center; align-content: center; border: 0; background: none; min-height: 0; }
.d-panier .pion { width: 6cqi; height: 6cqi; border-radius: 0; box-shadow: none; background: var(--pomme) center / contain no-repeat; }
.d-grad { position: absolute; z-index: 3; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; display: grid; justify-items: center; align-content: start; }
.d-grad img { width: 18%; height: 41%; object-fit: fill; margin-top: 14%; }
.d-grad span { font: 800 clamp(.9rem, 2.4cqi, 2rem) var(--font-display); color: #fff; text-shadow: 0 .2cqi .4cqi rgb(0 0 0 / .7); margin-top: 6%; }
.d-grad:hover img { filter: brightness(1.3) drop-shadow(0 0 .8cqi #fff); }
.d-grad.juste img { filter: drop-shadow(0 0 1.2cqi #8f8); } .d-grad.faux { opacity: .5; }
.d-nombre { font-size: 6cqi !important; color: #fff; text-shadow: 0 .3cqi .6cqi rgb(0 0 0 / .6); }
.d-grad span { white-space: nowrap; }
.d-grad img { width: 22%; min-width: 4px; }
#m-vider.d-bouton { font-size: clamp(.7rem, 1.6cqi, 1.3rem); }
.d-grad img { display: none; }
.d-grad::before { content: ""; display: block; width: .55cqi; height: 3cqi; margin-top: 2.2cqi; border-radius: .3cqi; background: #5d3a17; box-shadow: 0 0 0 .15cqi rgb(255 240 200 / .6); }
.d-grad.long::before { height: 4.6cqi; }
.d-grad:hover::before { background: #fff3c4; }
.d-grad.juste::before { background: #7cff7c; } 
.btn-muet[aria-pressed="true"] { opacity: .75; }

/* ===== décor vivant (designs) ===== */
.d-fond { animation: d-fond 24s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes d-fond { from { transform: scale(1.02) translate(-.6%, 0); } to { transform: scale(1.06) translate(.6%, -.6%); } }
.d-herbe { transform-origin: 50% 100%; animation: d-herbe 3.2s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes d-herbe { 0% { transform: skewX(-5deg) scaleY(1); } 50% { transform: skewX(1deg) scaleY(1.02); } 100% { transform: skewX(5deg) scaleY(.99); } }
.d-pend { transform-origin: 50% 0; animation: d-pend 5.5s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes d-pend { from { transform: rotate(-1.6deg) scaleY(1); } to { transform: rotate(1.6deg) scaleY(1.03); } }
.d-tronc { transform-origin: 50% 100%; animation: d-tronc 7s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes d-tronc { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
.d-ambiance { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.d-rayons { position: absolute; inset: -10% 0 0; background: repeating-linear-gradient(105deg, transparent 0 7%, rgb(255 246 200 / .16) 9%, transparent 12% 20%); mix-blend-mode: screen; animation: d-rayons 9s ease-in-out infinite alternate; }
@keyframes d-rayons { from { opacity: .35; transform: translateX(-3%); } to { opacity: .85; transform: translateX(3%); } }
.d-grain { position: absolute; width: calc(.7cqi * var(--t)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 250 210 / .95), rgb(255 240 160 / 0) 70%); animation: d-grain var(--v) ease-in-out var(--d) infinite; }
@keyframes d-grain { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(2cqi, -4cqi); } 80% { opacity: .9; } 100% { transform: translate(-1cqi, -9cqi); opacity: 0; } }
.d-feuille { position: absolute; top: -6%; width: calc(1.6cqi * var(--t)); aspect-ratio: 1 / .55; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #9ccc65, #558b2f); box-shadow: inset 0 0 0 .1cqi rgb(0 0 0 / .1); animation: d-feuille var(--v) linear var(--d) infinite; }
@keyframes d-feuille { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 25% { transform: translate(var(--o), 30cqi) rotate(140deg); } 50% { transform: translate(calc(var(--o) * -.6), 60cqi) rotate(260deg); } 92% { opacity: 1; } 100% { transform: translate(var(--o), 100cqi) rotate(420deg); opacity: 0; } }
/* personnages et cases : un peu de vie même au repos */
.d-acteur > .d-calque:first-child { animation: d-respire 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes d-respire { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-3%) scale(1.02, .98); } }
.d-case > .d-calque:not(.d-couvre):not(.d-grat) { animation: d-case 3s ease-in-out var(--d, 0s) infinite alternate; transform-origin: 50% 100%; }
@keyframes d-case { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.d-son img { animation: d-son 2.2s ease-in-out infinite; }
@keyframes d-son { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } 90% { transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .d-fond, .d-herbe, .d-pend, .d-tronc, .d-rayons, .d-grain, .d-feuille, .d-acteur > .d-calque:first-child, .d-case > .d-calque, .d-son img { animation: none !important; } .d-feuille, .d-grain { display: none; } }
/* vent : le pied des herbes reste immobile, seuls le haut (feuilles, fleurs) ondule */
.d-filtres { position: absolute; width: 0; height: 0; }
.d-vent { filter: url(#d-vent); }
.d-vent-bas { -webkit-mask-image: linear-gradient(to top, transparent 0 22%, #000 60%); mask-image: linear-gradient(to top, transparent 0 22%, #000 60%); }
.d-vent-haut { -webkit-mask-image: linear-gradient(to bottom, transparent 0 18%, #000 55%); mask-image: linear-gradient(to bottom, transparent 0 18%, #000 55%); }
/* mot trop long : il déborde des deux côtés, toujours centré */
.d-texte { display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .d-vent { display: none; } }
.d-fixe-bas { -webkit-mask-image: linear-gradient(to top, #000 0 22%, transparent 60%); mask-image: linear-gradient(to top, #000 0 22%, transparent 60%); }
.d-fixe-haut { -webkit-mask-image: linear-gradient(to bottom, #000 0 18%, transparent 55%); mask-image: linear-gradient(to bottom, #000 0 18%, transparent 55%); }
@media (prefers-reduced-motion: reduce) { .d-fixe-bas, .d-fixe-haut { -webkit-mask-image: none; mask-image: none; } }
.d-vent-cadre { position: absolute; inset: 0; pointer-events: none; filter: url(#d-vent); }
.d-vent-cadre .d-calque { filter: none; }
@media (prefers-reduced-motion: reduce) { .d-vent-cadre { display: none; } }
.j2-couloirs.d-couloirs { position: absolute; inset: auto; z-index: 2; }
.d-couloirs .couloir { border-right: 0; }
.m-couloirs .d-acteur { transition: left .25s ease; }
.m-couloirs:not(.sans-toucher) .d-couloirs { pointer-events: none; }
.d-texte.d-deux { flex-direction: column; gap: .35em; }
.d-deux .d-q2 { font-size: .9em; font-weight: 700; }
/* portes du château (design) : le battant s'ouvre sur ses gonds ; derrière, un trésor (bonne réponse) ou un fantôme */
.d-immobile .d-case > .d-calque { animation: none !important; }
.d-case .d-battant { transform-origin: 0% 50%; transition: transform .7s cubic-bezier(.3, .9, .4, 1); z-index: 1; }
.d-case.juste .d-battant, .d-case.faux .d-battant { transform: perspective(900px) rotateY(-78deg); }
.d-case.faux { opacity: 1; animation: none; }
.d-derriere { position: absolute; inset: 6% 8% 2%; border-radius: 48% 48% 4% 4% / 30% 30% 4% 4%; background: radial-gradient(ellipse at 50% 70%, #3a2414, #120a05); display: grid; place-items: center; z-index: 0; overflow: hidden; }
.d-derriere b { position: absolute; opacity: 0; transition: opacity .3s .35s, transform .5s .35s cubic-bezier(.3, 1.6, .5, 1); transform: scale(.4); }
.d-tresor { font-size: 9cqi; color: #ffd54f; text-shadow: 0 0 2cqi #ffb300; }
.d-fantome { width: 55%; aspect-ratio: .8; border-radius: 50% 50% 20% 20%; background: radial-gradient(circle at 35% 38%, #222 0 7%, transparent 8%), radial-gradient(circle at 65% 38%, #222 0 7%, transparent 8%), #f3f3f3; }
.d-case.juste .d-tresor, .d-case.faux .d-fantome { opacity: 1; transform: scale(1); }
.d-case.juste { filter: none; }
.d-deux .d-q2.long { font-size: .66em; line-height: 1.15; }
.d-case .d-lbl { z-index: 2; }
/* taupes (design) : la taupe monte de derrière le rebord du trou */
.d-taupe { padding: 0; border: 0; background: none; box-shadow: none; overflow: hidden; cursor: pointer; min-width: 0; max-width: none; z-index: 2; border-radius: 0; }
.d-taupe img { position: absolute; left: 0; top: 0; transform: translateY(100%); transition: transform .28s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.d-taupe.haut img, .d-taupe.juste img { transform: translateY(0); }
.d-taupe.juste img { filter: drop-shadow(0 0 1.2cqi rgb(140 255 140 / .95)); }
.d-taupe.faux { opacity: 1; animation: none; } .d-taupe.faux img { transform: translateY(100%); }
.d-taupe.rate { animation: secoue-lac .25s 2; }
.d-taupe:hover, .d-taupe:active { translate: none; }
.d-rebord { z-index: 3; }
.m-taupes-d .d-carte { z-index: 3; } .d-eti { z-index: 4; }
.d-taupe.juste, .d-taupe.faux { background: none; box-shadow: none; }
/* consigne + question : lignes plus serrées pour que le bloc ne touche pas le haut du panneau */
.d-texte.d-deux { gap: .08em; line-height: 1.05; }
.d-deux .d-q2.long { line-height: 1.08; }
.d-bulles { animation: d-bulles-monte 4s ease-in-out infinite; }
@keyframes d-bulles-monte { 0% { transform: translateY(4%); opacity: .4; } 50% { opacity: 1; } 100% { transform: translateY(-6%); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .d-bulles { animation: none; } }

/* ===== badges ===== */
#ecran-badges h1 { margin-bottom: var(--space-lg); }
.grille-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.badge-carte { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 18px; background: var(--color-card); box-shadow: var(--shadow-card); text-align: center; }
.badge-carte strong { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.15; }
.badge-carte > span:not(.badge-ico):not(.badge-jauge) { font-size: .82rem; line-height: 1.25; color: var(--color-muted); }
.badge-carte em { font-style: normal; font-weight: 800; font-size: .8rem; color: var(--color-mint-deep); }
.badge-carte small { font-size: .78rem; color: var(--color-muted); }
.badge-carte:not(.gagne) .badge-ico { filter: grayscale(1) opacity(.45); }
.badge-ico { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.badge-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.badge-ico i { font-style: normal; font-size: 46px; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffcc4d 60%, #e09b1a); border: 4px solid #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .2); }
.badge-jauge { width: 80%; height: 7px; border-radius: 99px; background: var(--color-paper-3, #eee); overflow: hidden; }
.badge-jauge i { display: block; height: 100%; background: var(--color-accent); transform-origin: 0 50%; }
.badge-toast { position: fixed; left: 50%; top: 18px; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 12px; border-radius: 99px; background: var(--color-card); box-shadow: 0 10px 30px rgb(0 0 0 / .25); translate: -50% 0; animation: badge-arrive .6s cubic-bezier(.3, 1.6, .5, 1); }
.badge-toast .badge-ico { width: 64px; height: 64px; } .badge-toast .badge-ico i { width: 58px; height: 58px; font-size: 32px; }
.badge-toast small { display: block; font-weight: 800; color: var(--color-accent-deep, #c77700); }
.badge-toast strong { font-family: var(--font-display); font-size: 1.15rem; }
.badge-toast.part { transition: opacity .4s, translate .4s; opacity: 0; translate: -50% -30px; }
@keyframes badge-arrive { from { translate: -50% -120px; scale: .6; } }
@media (prefers-reduced-motion: reduce) { .badge-toast { animation: none; } }
.carte-matiere.fruits-legumes { background: var(--grain), var(--fibre), linear-gradient(135deg, #ffe0b2, #c5e1a5); }
.monde-iles[data-m="fruits-legumes"] { --teinte: #9ccc65; }
.etape.fruits-legumes .pastille { background: var(--grain), var(--fibre), color-mix(in oklab, #9ccc65 30%, var(--color-card)); }
.grille-badges { display: block; }
.badges-titre { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; font-size: 1.6rem; }
.badges-titre span { padding: 2px 12px; border-radius: 99px; background: var(--color-accent); font-size: 1rem; }
.badges-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.badges-vide { color: var(--color-muted); font-weight: 600; }
.badge-carte .badge-ico { width: 180px; height: 180px; }
.badge-carte .badge-ico i { width: 160px; height: 160px; font-size: 80px; }