/* ============================================================
   Jeux de plateau — écran projeté (Nuages de mots)
   Scène logique 1600 × 900, mise à l'échelle par le script.
   Un seul monde visuel, clair et doux, pensé pour un tableau
   tactile en classe : pas de mode sombre ici, c'est voulu.
   ============================================================ */
@font-face {
  font-family: "IndoPak";
  src: url("/assets/fonts/indopak.ttf") format("truetype");
  font-display: block;
}

:root {
  --encre: #1d2a5c;
  --encre-doux: #4a5a8f;
  --rose: #ff5fa2;
  --rose-fonce: #e03f86;
  --rose-clair: #ffe1ef;
  --bleu: #3f86ff;
  --bleu-fonce: #2a66d9;
  --bleu-clair: #dcebff;
  --or: #ffc83d;
  --or-fonce: #e8a50a;
  --argent: #cfd8e8;
  --bronze: #f0a86b;
  --blanc: #ffffff;
  --verre: rgba(255, 255, 255, .78);
  --ombre: 0 14px 34px rgba(38, 64, 130, .22);
  --titre: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --texte: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --arabe: "IndoPak", "Noto Naskh Arabic", "Amiri", serif;
  /* MIXTE : du français et de l'arabe dans la MEME phrase — « Le ق dans
     وَاَقْوَمُ », « Un noûne sâkine suivi de خ ». Le navigateur choisit la police
     glyphe par glyphe, en prenant la PREMIÈRE de la liste qui sait le dessiner :
     IndoPak doit donc passer AVANT system-ui, qui couvre l'arabe et le
     capterait sinon — avec des voyelles mal placées et un dessin de police
     d'interface sur du texte coranique. Le latin, lui, reste à Fredoka. */
  --titre-mixte: "Fredoka", "Baloo 2", "IndoPak", "Noto Naskh Arabic", system-ui, sans-serif;
  --texte-mixte: "Baloo 2", "Fredoka", "IndoPak", "Noto Naskh Arabic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body.pl-ecran {
  background: #9fbde8 var(--fond-image, url("/assets/img/plateau/fond-nuages.jpg")) center / cover no-repeat;
  font-family: var(--texte); color: var(--encre);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Les bandes hors scène reprennent le décor, floutées */
.pl-flou {
  position: fixed; inset: -40px;
  background: var(--fond-image, url("/assets/img/plateau/fond-nuages.jpg")) center / cover no-repeat;
  filter: blur(22px) saturate(1.1); opacity: .9;
}

.pl-scene {
  position: absolute; left: 0; top: 0;
  width: 1600px; height: 900px;
  transform-origin: 0 0;
  background: var(--fond-image, url("/assets/img/plateau/fond-nuages.jpg")) center / cover no-repeat;
  transition: background-image .6s;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(20, 40, 90, .35);
}

.pl-vue { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.pl-scene[data-phase="accueil"]    .pl-accueil,
.pl-scene[data-phase="tour"]       .pl-jeu,
.pl-scene[data-phase="fin_tour"]   .pl-fin,
.pl-scene[data-phase="classement"] .pl-podium { opacity: 1; visibility: visible; transition: opacity .45s ease; }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 4px solid var(--or); outline-offset: 3px; }

/* ---------------- Accueil ---------------- */
.pl-titre { position: absolute; top: 46px; left: 0; right: 0; text-align: center; }
.pl-titre h1 {
  margin: 0; font-family: var(--titre); font-weight: 700; font-size: 84px; line-height: 1;
  color: var(--blanc); letter-spacing: .5px;
  text-shadow: 0 4px 0 #6d8fd6, 0 10px 26px rgba(40, 70, 140, .35);
  animation: pl-flotte 5s ease-in-out infinite;
}
.pl-titre-nuage { display: inline-block; font-size: .8em; vertical-align: .05em; }
.pl-sous-titre {
  display: inline-block; margin: 14px 0 0; padding: 6px 22px;
  background: var(--verre); border-radius: 999px;
  font-family: var(--titre); font-weight: 600; font-size: 28px; color: var(--encre-doux);
}

.pl-joueurs {
  position: absolute; left: 330px; right: 330px; top: 250px; bottom: 150px;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 18px 20px;
}
.pl-joueur {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 26px 10px 10px; border-radius: 999px;
  background: var(--blanc); box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 600; font-size: 40px; line-height: 1;
  border: 5px solid var(--bleu);
  animation: pl-arrivee .7s cubic-bezier(.2, 1.6, .4, 1) both, pl-flotte 4.2s ease-in-out infinite;
  animation-delay: 0s, var(--d, 0s);
}
.pl-joueur.f { border-color: var(--rose); }
.pl-initiale {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--bleu); color: var(--blanc); font-size: 32px;
}
.pl-joueur.f .pl-initiale { background: var(--rose); }
.pl-joueur .pl-score-mini {
  margin-left: 4px; padding: 3px 12px; border-radius: 999px;
  background: #fff4d1; color: #8a5a00; font-size: 24px;
}
.pl-joueur.courant { scale: 1.12; box-shadow: 0 0 0 6px rgba(255, 200, 61, .7), var(--ombre); }
.pl-joueur.part { animation: pl-depart .45s ease-in both; }

.pl-attente {
  position: absolute; left: 0; right: 0; top: 420px; margin: 0; text-align: center;
  font-family: var(--titre); font-size: 40px; font-weight: 600; color: var(--encre-doux);
}
.pl-attente small { font-family: var(--texte); font-size: 24px; font-weight: 500; }
.pl-prochain {
  position: absolute; left: 0; right: 0; bottom: 56px; margin: 0; text-align: center;
  font-family: var(--titre); font-size: 36px; font-weight: 600;
}
.pl-prochain span {
  display: inline-block; padding: 8px 28px; border-radius: 999px;
  background: var(--verre); box-shadow: var(--ombre);
}
.pl-prochain b { color: var(--bleu-fonce); }
.pl-prochain b.f { color: var(--rose-fonce); }

/* QR du pilote : grand tant qu'aucun téléphone n'a la main, discret ensuite */
.pl-qr { position: absolute; right: 40px; top: 210px; width: 290px; }
.pl-qr-grand {
  background: var(--blanc); border-radius: 28px; padding: 18px 18px 14px; text-align: center;
  box-shadow: var(--ombre);
}
.pl-qr-titre { margin: 0 0 8px; font-weight: 700; font-size: 21px; line-height: 1.2; }
.pl-qr-code svg { display: block; margin: 0 auto; width: 240px; height: 240px; }
.pl-qr-lien { margin: 6px 0 0; font-size: 20px; font-weight: 600; color: var(--encre-doux); }
.pl-qr-code-txt { margin: 2px 0 0; font-size: 22px; }
.pl-qr-code-txt b { font-family: var(--titre); letter-spacing: 4px; font-size: 32px; color: var(--encre); }
.pl-qr-petit {
  display: none; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 10px 8px 16px; border-radius: 999px; background: var(--verre);
  font-size: 19px; box-shadow: var(--ombre);
}
.pl-point { width: 12px; height: 12px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .25); }
.pl-mini-btn {
  border: 0; border-radius: 999px; padding: 4px 12px; background: #eef2fb; font-size: 17px;
}
.pl-scene.pilote-la .pl-qr { top: auto; bottom: 26px; right: 26px; width: auto; }
.pl-scene.pilote-la .pl-qr-grand { display: none; }
.pl-scene.pilote-la .pl-qr-petit { display: inline-flex; }
.pl-scene.pilote-la .pl-joueurs { left: 120px; right: 120px; }

/* ---------------- Jeu ---------------- */
.pl-ciel { position: absolute; inset: 0; }
.pl-nuage {
  position: absolute; left: 0; top: 0; height: var(--haut-nuage, 176px);
  display: grid; place-items: center;
  touch-action: none; will-change: transform;
}
.pl-nuage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(40, 70, 140, .22)); }
.pl-nuage path { fill: var(--fond, #fff); stroke: rgba(150, 180, 230, .55); stroke-width: 3; vector-effect: non-scaling-stroke;
  transition: fill .2s; }
.pl-nuage .pl-mot {
  position: relative; margin-top: calc(var(--haut-nuage, 176px) * .15);
  font-family: var(--arabe); direction: rtl; font-size: var(--taille-mot, 86px); line-height: 1;
  color: var(--encre); white-space: nowrap; pointer-events: none;
}
.pl-nuage .pl-nuage-in { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .18s; }
.pl-nuage:active .pl-nuage-in { transform: scale(.96); }
.pl-nuage.trouve .pl-nuage-in { animation: pl-eclat .7s ease-out forwards; }
.pl-nuage.trouve path { fill: #ffe68f; stroke: var(--or-fonce); }
.pl-nuage.rate .pl-nuage-in { animation: pl-secoue .45s ease-in-out; }
.pl-nuage.rate path { fill: #ffe0e0; }
.pl-nuage.indice path { fill: #fff3c4; stroke: var(--or); stroke-width: 6; }
.pl-nuage.indice .pl-nuage-in { animation: pl-pulse .5s ease-in-out 3; }
.pl-nuage.fuite { transition: opacity .8s; opacity: 0; }

.pl-etincelle {
  position: absolute; pointer-events: none; font-size: 40px; color: var(--or);
  text-shadow: 0 2px 6px rgba(200, 140, 0, .4);
  animation: pl-etincelle .9s ease-out forwards;
}
.pl-plus {
  position: absolute; pointer-events: none;
  font-family: var(--titre); font-weight: 700; font-size: 54px; color: var(--or-fonce);
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  animation: pl-monte 1.1s ease-out forwards;
}

.pl-hud {
  position: absolute; left: 28px; right: 28px; top: 22px; height: 86px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  z-index: 5; pointer-events: none;
}
.pl-hud-joueur {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 28px 8px 8px;
  background: var(--blanc); border-radius: 999px; border: 4px solid var(--bleu); box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 600; font-size: 36px;
}
.pl-hud-joueur.f { border-color: var(--rose); }
.pl-hud-joueur.f .pl-initiale { background: var(--rose); }
.pl-hud-temps { height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .6); overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(40, 70, 140, .2); }
.pl-hud-barre { height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #5fd39a, #3fb6ff); transform-origin: left center; }
.pl-hud-barre.presque { background: linear-gradient(90deg, #ffb84d, #ff6f61); }
.pl-hud-score {
  padding: 8px 30px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre);
  font-family: var(--titre); font-size: 44px; font-weight: 700; min-width: 170px; text-align: center;
}
.pl-hud-score b { font-variant-numeric: tabular-nums; }
.pl-hud-score.gagne { animation: pl-pulse .4s ease-out; }

.pl-reecouter {
  /* Dans le coin, hors du passage des nuages : l'enfant ne le touche pas par mégarde */
  position: absolute; left: 22px; bottom: 22px;
  width: 104px; height: 104px; border-radius: 50%; border: 6px solid #fff;
  background: radial-gradient(circle at 35% 30%, #ffe27a, var(--or) 60%, var(--or-fonce));
  font-size: 48px; box-shadow: var(--ombre); z-index: 6;
}
.pl-reecouter.parle { animation: pl-pulse .6s ease-in-out infinite; }
/* En pause : le prochain appui reprendra la phrase là où elle s'est arrêtée. */
.pl-reecouter.en-pause { box-shadow: var(--ombre), 0 0 0 8px rgba(255, 255, 255, .55); }
@media (prefers-reduced-motion: reduce) { .pl-reecouter.parle { animation: none; } }

.pl-decompte {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 8; pointer-events: none;
  font-family: var(--titre); font-weight: 700; color: #fff;
  text-shadow: 0 6px 0 #6d8fd6, 0 18px 40px rgba(30, 60, 130, .45);
}
.pl-decompte span { font-size: 260px; line-height: 1; animation: pl-compte .9s ease-out both; }
.pl-decompte span.mot { font-size: 110px; text-align: center; line-height: 1.1; }

/* ---------------- Fin du tour ---------------- */
.pl-fin-carte {
  position: absolute; left: 0; right: 0; top: 120px; margin-inline: auto;
  width: 820px; padding: 40px 50px 44px; text-align: center;
  background: var(--blanc); border-radius: 44px; box-shadow: 0 24px 60px rgba(38, 64, 130, .3);
  border: 8px solid var(--bleu);
}
.pl-fin-carte.f { border-color: var(--rose); }
.pl-scene[data-phase="fin_tour"] .pl-fin-carte { animation: pl-arrivee .8s cubic-bezier(.2, 1.5, .4, 1) both; }
.pl-fin-etoiles { font-size: 96px; letter-spacing: 12px; line-height: 1; height: 100px; }
.pl-fin-etoiles span { display: inline-block; animation: pl-arrivee .6s cubic-bezier(.2, 1.8, .4, 1) both; }
.pl-fin-etoiles span.eteinte { filter: grayscale(1); opacity: .28; }
.pl-fin-carte h2 { text-wrap: balance; margin: 16px 0 4px; font-family: var(--titre); font-size: 68px; line-height: 1.05; }
.pl-fin-points { margin: 0; font-family: var(--titre); font-size: 44px; color: var(--encre-doux); }
.pl-fin-points b { font-size: 120px; color: var(--or-fonce); line-height: 1; vertical-align: -12px; font-variant-numeric: tabular-nums; }
.pl-fin-detail { margin: 12px 0 0; font-size: 30px; }
.pl-prochain-fin { bottom: 70px; }

/* ---------------- Podium ---------------- */
.pl-podium::before { content: ""; position: absolute; inset: 0; background: rgba(20, 34, 84, .42); }
.pl-podium-titre {
  position: absolute; top: 34px; left: 0; right: 0; margin: 0; text-align: center;
  font-family: var(--titre); font-size: 76px; color: #fff; text-shadow: 0 5px 0 rgba(30, 50, 110, .6);
}
.pl-marches {
  position: absolute; left: 80px; right: 80px; bottom: 0; height: 690px;
  display: flex; align-items: flex-end; justify-content: center; gap: 22px;
}
.pl-marche { width: 250px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.pl-marches.top5 .pl-marche { width: 230px; }
.pl-marche-bloc {
  width: 100%; height: var(--h); border-radius: 22px 22px 0 0;
  display: flex; justify-content: center; padding-top: 18px;
  font-family: var(--titre); font-weight: 700; font-size: 92px; color: rgba(255, 255, 255, .95);
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.12));
  border: 3px dashed rgba(255, 255, 255, .5); border-bottom: 0;
  transform-origin: bottom; transition: background .5s, border-color .5s;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .12);
}
.pl-marche[data-place="1"] .pl-marche-bloc { --c1: #ffe07a; --c2: var(--or-fonce); }
.pl-marche[data-place="2"] .pl-marche-bloc { --c1: #eef3fb; --c2: #a8b6cf; }
.pl-marche[data-place="3"] .pl-marche-bloc { --c1: #ffd0a6; --c2: #d98848; }
.pl-marche[data-place="4"] .pl-marche-bloc,
.pl-marche[data-place="5"] .pl-marche-bloc { --c1: #cfe2ff; --c2: #7ea7e6; }
.pl-marche.revele .pl-marche-bloc {
  background: linear-gradient(180deg, var(--c1), var(--c2)); border: 0;
  animation: pl-monte-bloc .8s cubic-bezier(.2, 1.3, .4, 1) both;
}
.pl-marche-qui {
  margin-bottom: 14px; text-align: center; opacity: 0; transform: translateY(-80px) scale(.6);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pl-marche.revele .pl-marche-qui { animation: pl-tombe .9s cubic-bezier(.2, 1.5, .4, 1) .45s both; }
.pl-marche-qui .pl-avatar {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--titre); font-weight: 700; font-size: 56px; color: #fff;
  background: var(--bleu); border: 6px solid #fff; box-shadow: var(--ombre);
}
.pl-marche-qui.f .pl-avatar { background: var(--rose); }
.pl-marche[data-place="1"] .pl-avatar { width: 136px; height: 136px; font-size: 72px; }
.pl-couronne { font-size: 64px; line-height: .6; margin-bottom: -6px; }
.pl-marche-nom {
  padding: 6px 22px; border-radius: 999px; background: #fff;
  font-family: var(--titre); font-weight: 600; font-size: 34px; white-space: nowrap; max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; box-shadow: var(--ombre);
}
.pl-marche-pts { font-family: var(--titre); font-weight: 700; font-size: 30px; color: #fff;
  text-shadow: 0 3px 0 rgba(30, 50, 110, .5); }
.pl-podium-aide {
  position: absolute; left: 0; right: 0; top: 128px; margin: 0; text-align: center;
  font-size: 26px; color: rgba(255, 255, 255, .92);
}
.pl-confettis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pl-confetti { position: absolute; top: -30px; width: 16px; height: 26px; border-radius: 4px;
  animation: pl-confetti var(--t, 3s) linear forwards; }

/* ---------------- Divers ---------------- */
.pl-coin-btn {
  position: absolute; left: 22px; bottom: 22px; z-index: 20;
  width: 58px; height: 58px; border-radius: 16px; border: 0;
  background: rgba(255, 255, 255, .7); font-size: 28px; box-shadow: var(--ombre);
}
.pl-scene[data-phase="tour"] .pl-coin-btn { display: none; }
.pl-reseau {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 30;
  padding: 8px 20px; border-radius: 999px; background: #fff3cd; font-size: 20px; box-shadow: var(--ombre);
}

.pl-demarrer {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(40, 70, 140, .35); backdrop-filter: blur(4px);
}
.pl-demarrer[hidden] { display: none; }
.pl-demarrer-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 60px; border: 0; border-radius: 36px; background: #fff; box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 600; font-size: clamp(22px, 3.4vw, 40px); color: var(--encre);
  animation: pl-flotte 4s ease-in-out infinite;
}
.pl-demarrer-ico { font-size: 1.8em; line-height: 1; }
.pl-demarrer-btn small { font-family: var(--texte); font-weight: 500; font-size: .5em; color: var(--encre-doux); }

/* ---------------- Mouvements ---------------- */
@keyframes pl-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes pl-arrivee { from { opacity: 0; transform: scale(.3) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes pl-depart { to { opacity: 0; transform: scale(.2); } }
@keyframes pl-eclat { 0% { transform: scale(1); } 35% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes pl-secoue { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-16px); } 40% { transform: translateX(14px); } 60% { transform: translateX(-10px); } 80% { transform: translateX(6px); } }
@keyframes pl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes pl-etincelle { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4) rotate(160deg); } }
@keyframes pl-monte { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { opacity: 0; transform: translateY(-110px) scale(1); } }
@keyframes pl-compte { 0% { opacity: 0; transform: scale(2.2); } 30% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.8); } }
@keyframes pl-monte-bloc { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pl-tombe { to { opacity: 1; transform: none; } }
@keyframes pl-confetti { to { transform: translate(var(--dx, 0), 980px) rotate(var(--r, 720deg)); } }

@media (prefers-reduced-motion: reduce) {
  .pl-titre h1, .pl-joueur, .pl-demarrer-btn { animation: none; }
}

/* ============================================================
   Le duel des lanternes
   ============================================================ */
/* (décor : voir --fond-image, choisi par la partie) */
.dl-hud {
  position: absolute; left: 28px; right: 28px; top: 22px; height: 86px; z-index: 5; pointer-events: none;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
}
.dl-hud-joueur {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px;
  background: var(--blanc); border-radius: 999px; border: 5px solid var(--bleu); box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 600; font-size: 36px;
}
.dl-hud-joueur.f { border-color: var(--rose); }
.dl-hud-joueur.f .pl-initiale { background: var(--rose); }
.dl-pts {
  min-width: 96px; padding: 4px 16px; border-radius: 999px; text-align: center;
  background: #fff4d1; color: #8a5a00; font-size: 40px; font-variant-numeric: tabular-nums;
}
.dl-hud-joueur.gagne { animation: pl-pulse .45s ease-out; }

.dl-cote {
  position: absolute; top: 150px; width: 720px; height: 700px; padding: 0 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; align-content: center;
  border-radius: 40px;
}
#cote-0 { left: 26px; }
#cote-1 { right: 26px; }
/* Un liseré à la couleur de l'élève : chacun reconnaît son côté */
.dl-cote::before {
  content: ""; position: absolute; inset: -10px 0; border-radius: 40px; pointer-events: none;
  border: 5px dashed rgba(63, 134, 255, .45);
}
.dl-cote.f::before { border-color: rgba(255, 95, 162, .5); }
.dl-cote:empty::before { display: none; }
.dl-cote.bloque .dl-lanterne { filter: grayscale(.8) brightness(.85); pointer-events: none; }
.dl-cote.bloque::after {
  content: "⏳"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 90px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3));
}

.dl-lanterne {
  position: relative; height: var(--h-lanterne, 200px); margin-top: 18px;
  display: grid; place-items: center; padding: 0 18px;
  border: 5px solid #9b5a0c; border-radius: 70px 70px 36px 36px;
  background: radial-gradient(circle at 50% 45%, #fffbea 0%, #ffe7a6 42%, #f7bf4a 78%, #de9420 100%);
  box-shadow: 0 12px 24px rgba(120, 60, 0, .28), inset 0 0 34px rgba(255, 255, 255, .55);
  touch-action: none; cursor: pointer;
  transform-origin: 50% -26px;
  animation: dl-allume .5s cubic-bezier(.2, 1.5, .4, 1) both, dl-balance 3.6s ease-in-out infinite;
}
/* Chapeau et pompon de la lanterne */
.dl-lanterne::before {
  content: ""; position: absolute; top: -22px; left: 50%; width: 42%; height: 20px;
  transform: translateX(-50%); border-radius: 14px 14px 4px 4px; background: #9b5a0c;
}
.dl-lanterne::after {
  content: ""; position: absolute; bottom: -15px; left: 50%; width: 18px; height: 18px;
  transform: translateX(-50%); border-radius: 50%; background: #9b5a0c;
}
.dl-mot {
  font-family: var(--arabe); direction: rtl; line-height: 1; color: #4a2600;
  white-space: nowrap; pointer-events: none; margin-top: .12em;
}
.dl-lanterne:active { scale: .97; }
.dl-lanterne.gagne {
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #fff3b0 40%, #ffd23f 75%, #f0a500 100%);
  box-shadow: 0 0 60px 22px rgba(255, 205, 60, .85), inset 0 0 30px #fff;
  animation: pl-pulse .6s ease-out 2;
  z-index: 2;
}
.dl-lanterne.indice, .dl-lanterne.indice-doux { box-shadow: 0 0 0 8px rgba(255, 255, 255, .9), 0 0 40px 10px rgba(255, 200, 61, .7); }
.dl-lanterne.indice { animation: pl-pulse .5s ease-in-out 3; }
.dl-lanterne.rate { animation: pl-secoue .45s ease-in-out; background: radial-gradient(circle at 50% 45%, #fff, #ffd6d6 60%, #f19999); }
.dl-plus {
  position: absolute; top: -56px; left: 50%; translate: -50% 0; pointer-events: none;
  font-family: var(--titre); font-weight: 700; font-size: 58px; color: var(--or-fonce);
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  animation: pl-monte 1.1s ease-out forwards;
}
.dl-reecouter { left: calc(50% - 52px); bottom: 26px; }

/* Carte de fin : les deux joueurs face à face */
.pl-fin-carte.duel { border-color: var(--or); }
.pl-fin-carte.duel.f { border-color: var(--rose); }
.pl-fin-carte.duel:not(.f) { border-color: var(--bleu); }
.dl-fin-scores { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 14px; }
.dl-fin-joueur {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px;
  border-radius: 999px; border: 5px solid var(--bleu); background: #fff;
  font-family: var(--titre); font-size: 34px; font-weight: 600;
}
.dl-fin-joueur.f { border-color: var(--rose); }
.dl-fin-joueur.f .pl-initiale { background: var(--rose); }
.dl-fin-joueur b { font-size: 48px; color: var(--or-fonce); font-variant-numeric: tabular-nums; }
.dl-fin-joueur.gagnant { box-shadow: 0 0 0 6px rgba(255, 200, 61, .7); }
.dl-fin-vs { font-family: var(--titre); font-size: 26px; color: var(--encre-doux); }

@keyframes dl-allume { from { opacity: 0; transform: translateY(-40px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes dl-balance { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
@media (prefers-reduced-motion: reduce) { .dl-lanterne { animation: dl-allume .3s both; } }

/* ============================================================
   Jeux du woudhou : la course (ordre) et le grand tri
   ============================================================ */
/* (décor : voir --fond-image, choisi par la partie) */

/* --- La course : le chemin des gestes, en haut --- */
.wd-chemin {
  position: absolute; left: 40px; right: 40px; top: 128px; margin: 0; padding: 0; list-style: none;
  display: flex; justify-content: center; gap: 14px;
}
.wd-case {
  position: relative; width: 150px; height: 150px; flex: none;
  border-radius: 24px; border: 4px dashed rgba(43, 136, 168, .55); background: rgba(255, 255, 255, .55);
  display: grid; place-items: center; overflow: visible;
}
.wd-chemin.long .wd-case { width: 132px; height: 132px; }
.wd-num { font-family: var(--titre); font-weight: 700; font-size: 58px; color: rgba(43, 136, 168, .6); }
.wd-case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
  animation: pl-arrivee .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.wd-case.pleine { border: 4px solid #2bb3a0; background: #fff; box-shadow: 0 8px 20px rgba(20, 110, 120, .25); }
.wd-case.pleine .wd-num {
  position: absolute; z-index: 2; top: -16px; left: -12px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; color: #fff; background: #2bb3a0; border: 3px solid #fff;
}
.wd-case .pl-plus { z-index: 3; left: 30px; top: -10px; }

/* --- Les cartes mélangées, en bas --- */
.wd-cartes {
  position: absolute; left: 60px; right: 60px; top: 320px; bottom: 30px;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 22px 26px;
}
.wd-carte {
  width: 300px; height: 250px; padding: 10px 10px 12px; border: 0; border-radius: 26px;
  background: #fff; box-shadow: 0 12px 26px rgba(20, 90, 110, .22);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  touch-action: none; transition: transform .2s, opacity .35s;
  animation: pl-arrivee .6s cubic-bezier(.2, 1.5, .4, 1) both;
}
.wd-cartes.long .wd-carte { width: 270px; height: 240px; }
.wd-carte img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 18px; pointer-events: none; }
.wd-texte { font-family: var(--titre); font-weight: 600; font-size: 25px; line-height: 1.1; text-align: center; color: var(--encre); }
.wd-carte:active { transform: scale(.97); }
/* L'animation d'entrée garde la main sur opacity/transform : la sortie doit être une animation aussi */
.wd-carte.posee { animation: wd-range .4s ease-in forwards; pointer-events: none; }
@keyframes wd-range { to { opacity: 0; transform: translateY(-120px) scale(.5); } }
.wd-carte.rate { animation: pl-secoue .45s ease-in-out; box-shadow: 0 0 0 6px rgba(255, 111, 97, .75), 0 12px 26px rgba(20, 90, 110, .22); }
.wd-carte.indice { box-shadow: 0 0 0 8px rgba(255, 200, 61, .9), 0 0 40px 10px rgba(255, 200, 61, .6); animation: pl-pulse .6s ease-in-out infinite; }

/* --- Le grand tri : la carte au centre, les paniers en bas --- */
.tr-consigne {
  position: absolute; left: 0; right: 0; top: 122px; margin: 0; text-align: center;
  font-family: var(--titre); font-weight: 600; font-size: 28px; color: var(--encre-doux);
}
.tr-consigne:empty { display: none; }
.tr-scene { position: absolute; left: 0; right: 0; top: 175px; height: 380px; display: grid; place-items: center; }
/* La carte s'élargit avec son texte. Les cartes du woudhou tiennent en 700 px,
   mais celles des livrets sont parfois de vraies phrases (« Un noûne sâkine
   suivi de ء ») : à largeur fixe, la fin du texte passait par-dessus le bord. */
.tr-carte {
  width: auto; min-width: 700px; max-width: 1200px;
  min-height: 300px; padding: 22px 30px; border-radius: 34px; background: #fff;
  box-shadow: 0 18px 40px rgba(20, 90, 110, .25);
  display: flex; align-items: center; gap: 28px;
  animation: pl-arrivee .6s cubic-bezier(.2, 1.5, .4, 1) both;
  transition: transform .6s cubic-bezier(.5, 0, .7, .4), opacity .6s;
}
.tr-carte img { width: 250px; height: 250px; flex: none; object-fit: cover; border-radius: 24px; }
.tr-ico { width: 250px; flex: none; text-align: center; font-size: 170px; line-height: 1; }
.tr-texte { margin: 0; min-width: 0; font-family: var(--titre-mixte); font-weight: 600; font-size: 44px;
  line-height: 1.15; color: var(--encre); text-wrap: balance; overflow-wrap: break-word; }
.tr-carte.rangee { animation: tr-range .6s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes tr-range { to { transform: translate(var(--dx, 0), 380px) scale(.25); opacity: 0; } }
.tr-carte.rate { animation: pl-secoue .45s ease-in-out; }
.tr-explication {
  position: absolute; left: 0; right: 0; top: 545px; width: 1000px; margin: 0 auto;
  padding: 14px 26px; border-radius: 22px; background: #fffbe6; border: 3px solid var(--or);
  font-family: var(--texte-mixte);   /* ﷺ et l'arabe des cartes s'affichent aussi */
  font-size: 30px; line-height: 1.25; text-align: center; color: var(--encre); z-index: 4;
  animation: pl-arrivee .4s ease-out both;
}
.tr-paniers {
  position: absolute; left: 160px; right: 160px; bottom: 34px; height: 200px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px;
}
.tr-paniers.trois { grid-template-columns: repeat(3, 1fr); }
/* Quatre paniers : deux rangées de deux. Quatre colonnes rendraient les noms
   illisibles de loin, et c'est de loin qu'un élève les lit. */
.tr-paniers.quatre { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr;
  height: 230px; gap: 14px 30px; bottom: 26px; }
.tr-paniers.quatre .tr-panier-ico { font-size: 40px; }
.tr-paniers.quatre .tr-panier-nom { font-size: 26px; }
.tr-panier {
  border: 0; border-radius: 34px; color: #fff; background: var(--c);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .15), 0 18px 30px rgba(20, 60, 90, .2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  touch-action: none;
}
.tr-panier:active { transform: translateY(4px); box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.tr-panier-ico { font-size: 76px; line-height: 1; }
.tr-panier-nom { font-family: var(--titre); font-weight: 700; font-size: 40px; text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.tr-panier.bon { box-shadow: 0 0 0 10px #fff, 0 0 50px 16px rgba(255, 220, 90, .9); animation: pl-pulse .5s ease-in-out 2; }
.tr-panier.faux { filter: grayscale(.7) brightness(.9); animation: pl-secoue .45s ease-in-out; }

/* ============================================================
   Moteur « ordre » généralisé : cartes de texte, fil adaptable
   ============================================================ */
.wd-titre {
  position: absolute; left: 0; right: 0; top: 112px; margin: 0; text-align: center; z-index: 3;
  font-family: var(--titre); font-weight: 600; font-size: 30px; color: var(--encre);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .8); text-wrap: balance; padding: 0 120px;
}
.wd-titre:empty { display: none; }
.wd-titre { left: 50%; right: auto; transform: translateX(-50%); padding: 4px 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); box-shadow: var(--ombre); white-space: nowrap; font-size: 26px; top: 114px; }
.wd-jeu .wd-chemin { top: 168px; }
.wd-final {
  width: 1400px; height: 520px; padding: 26px 50px; border-radius: 36px; background: #fffdf6;
  box-shadow: 0 20px 50px rgba(20, 60, 110, .28); border: 6px solid var(--or);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; overflow: hidden;
  animation: pl-arrivee .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.wd-final-ar { margin: 0; font-family: var(--arabe); direction: rtl; line-height: 1.9; text-align: center; color: var(--encre); text-wrap: balance; }
.wd-final-fr { margin: 0; font-family: var(--titre); font-weight: 600; font-size: 30px; text-align: center; color: var(--encre-doux); text-wrap: balance; }
.wd-jeu .wd-chemin { top: 160px; }
.wd-case { width: var(--case, 150px); height: var(--case, 150px); }
.wd-case-ar { font-family: var(--arabe); direction: rtl; font-size: calc(var(--case, 150px) * .42); line-height: 1;
  color: var(--encre); animation: pl-arrivee .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.wd-case-ok { font-family: var(--titre); font-weight: 700; font-size: calc(var(--case, 150px) * .5); color: #2bb3a0;
  animation: pl-arrivee .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.wd-num { font-size: calc(var(--case, 150px) * .38); }
.wd-jeu .wd-cartes { top: 330px; }
.wd-carte-texte { justify-content: center; padding: 12px 14px; gap: 6px; background: #fffdf6; }
.wd-carte-texte .wd-ar {
  font-family: var(--arabe); direction: rtl; line-height: 1.55; color: var(--encre); text-align: center;
  text-wrap: balance; pointer-events: none;
}
.wd-carte-texte .wd-texte { font-size: 22px; color: var(--encre-doux); }

/* ============================================================
   Moteur « tri » : une lettre en grand
   ============================================================ */
.tr-carte.lettre { width: 420px; justify-content: center; }
.tr-ar { font-family: var(--arabe); direction: rtl; font-size: 300px; line-height: 1.1; color: var(--encre); }

/* ============================================================
   Moteur « quiz »
   ============================================================ */
.qz-question { position: absolute; left: 0; right: 0; top: 170px; height: 360px; display: grid; place-items: center; }
.qz-carte {
  width: 1300px; max-height: 360px; padding: 22px 40px; border-radius: 34px; background: #fffdf6;
  box-shadow: 0 18px 40px rgba(20, 60, 110, .22); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  animation: pl-arrivee .6s cubic-bezier(.2, 1.5, .4, 1) both;
}
.qz-carte img { max-height: 200px; border-radius: 20px; }
.qz-ar { margin: 0; font-family: var(--arabe); direction: rtl; line-height: 1.6; text-align: center; color: var(--encre); text-wrap: balance; }
.qz-texte { margin: 0; font-family: var(--titre-mixte); font-weight: 600; font-size: 30px; line-height: 1.25; text-align: center;
  color: var(--encre-doux); text-wrap: balance; }
.qz-choix {
  position: absolute; left: 150px; right: 150px; bottom: 36px; height: 300px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
.qz-choix:not(.images) { height: 220px; }
.qz-choix { grid-template-rows: 100%; }
.qz-choix.quatre { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr; height: 250px; gap: 18px 30px; }
/* Une question illustrée se lit en DEUX COLONNES : l'image à gauche, le texte
   à droite. Empilés, les deux se disputaient les 360 px de hauteur de la carte
   et l'image se retrouvait écrasée à quelques pixels — un élément flex se
   laisse rétrécir sans protester. D'où `flex: none` : l'image garde sa place. */
.qz-carte.qz-avec-img { flex-direction: row; gap: 30px; }
.qz-carte.qz-avec-img .qz-texte,
.qz-carte.qz-avec-img .qz-contexte { text-align: left; align-self: flex-start; }
.qz-carte.qz-avec-img > div,
.qz-carte.qz-avec-img > p { max-width: 100%; }
.qz-carte img { flex: none; width: 380px; max-height: 300px; height: auto;
  border-radius: 22px; object-fit: cover; }
.qz-texte.question { font-size: 40px; color: var(--encre); }
.qz-texte.seul { font-size: 72px; color: var(--encre); }
.qz-contexte { margin: 0; padding: 2px 16px; border-radius: 999px; background: #eef4ff; color: var(--encre-doux);
  font-family: var(--titre); font-weight: 600; font-size: 22px; }
.qz-arabe { font-family: var(--arabe); font-size: 1.25em; line-height: 1.3; }
.qz-explication { top: auto; bottom: 290px; }
.qz-choix-carte { min-height: 0; height: 100%; overflow: hidden; }
.qz-choix-carte {
  border: 0; border-radius: 30px; background: #fff; padding: 14px; touch-action: none;
  box-shadow: 0 10px 0 rgba(20, 60, 110, .12), 0 18px 30px rgba(20, 60, 110, .2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  animation: pl-arrivee .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
.qz-choix-carte:nth-child(2) { animation-delay: .08s; }
.qz-choix-carte:nth-child(3) { animation-delay: .16s; }
.qz-choix-carte img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 20px; pointer-events: none; }
.qz-choix-ar { font-family: var(--arabe); direction: rtl; font-size: 76px; line-height: 1.2; color: var(--encre); }
.qz-choix-texte { font-family: var(--titre); font-weight: 600; font-size: 28px; line-height: 1.15; text-align: center; color: var(--encre); }
.qz-choix-carte:active { transform: translateY(3px); }
.qz-choix-carte.bon { box-shadow: 0 0 0 10px #39c27f, 0 0 50px 14px rgba(57, 194, 127, .55); animation: pl-pulse .5s ease-in-out 2; }
.qz-choix-carte.faux { box-shadow: 0 0 0 10px #ff6f61; filter: grayscale(.5); animation: pl-secoue .45s ease-in-out; }

/* ============================================================
   Moteur « memory »
   ============================================================ */
.mm-grille {
  position: absolute; left: 0; right: 0; top: 128px; bottom: 26px;
  display: grid; justify-content: center; align-content: center; gap: 20px 22px;
}
.mm-carte {
  position: relative; border: 0; padding: 0; background: none; perspective: 900px; touch-action: none;
  animation: pl-arrivee .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
.mm-dos, .mm-face {
  position: absolute; inset: 0; border-radius: 24px; backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.3, .8, .3, 1.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
}
.mm-dos {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .25) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 12px, transparent 12px 24px),
    linear-gradient(145deg, #5a8dff, #7b5cff);
  border: 6px solid #fff; box-shadow: 0 10px 24px rgba(40, 60, 140, .3);
}
.mm-dos-motif { font-size: 64px; color: #ffe27a; text-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.mm-face { background: #fffdf6; border: 6px solid #ffe27a; box-shadow: 0 10px 24px rgba(40, 60, 140, .25); transform: rotateY(180deg); padding: 10px; }
.mm-carte.ouverte .mm-dos { transform: rotateY(180deg); }
.mm-carte.ouverte .mm-face { transform: rotateY(360deg); }
.mm-face img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 16px; }
.mm-ar { font-family: var(--arabe); direction: rtl; line-height: 1.2; color: var(--encre); }
.mm-texte { font-family: var(--titre); font-weight: 600; font-size: 26px; line-height: 1.15; text-align: center; color: var(--encre); text-wrap: balance; }
.mm-carte.trouvee .mm-face { border-color: #39c27f; box-shadow: 0 0 0 6px rgba(57, 194, 127, .5), 0 0 40px 10px rgba(57, 194, 127, .35); }
.mm-carte.trouvee { animation: pl-pulse .5s ease-out; }
.mm-carte.revelee .mm-face { border-color: #cfd8e8; opacity: .85; }

/* La police IndoPak a des espaces très étroites : on aère les phrases arabes */
.wd-final-ar, .qz-ar, .wd-carte-texte .wd-ar, .mm-ar { word-spacing: .3em; }

/* ============================================================
   Le duel des savants
   ============================================================ */
.dq-question { top: 118px; height: 250px; }
.dq-carte { width: 1400px; max-height: 250px; padding: 16px 36px; }
.dq-carte .qz-texte.question { font-size: 36px; }
.dq-cote {
  position: absolute; top: 390px; bottom: 30px; width: 700px;
  display: grid; grid-auto-rows: 1fr; gap: 16px; padding: 12px; border-radius: 30px;
}
#cote-0.dq-cote { left: 30px; }
#cote-1.dq-cote { right: 30px; }
.dq-cote::before {
  content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none;
  border: 5px dashed rgba(63, 134, 255, .45);
}
.dq-cote.f::before { border-color: rgba(255, 95, 162, .5); }
.dq-cote:empty::before { display: none; }
.dq-choix {
  border: 0; border-radius: 22px; background: #fff; padding: 8px 18px; touch-action: none;
  box-shadow: 0 8px 0 rgba(20, 60, 110, .12), 0 14px 26px rgba(20, 60, 110, .18);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  animation: pl-arrivee .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
.dq-choix .qz-choix-texte { font-size: 30px; }
.dq-choix .qz-choix-ar { font-size: 54px; }
.dq-choix.bon { box-shadow: 0 0 0 8px #39c27f, 0 0 40px 12px rgba(57, 194, 127, .55); animation: pl-pulse .5s ease-in-out 2; }
.dq-choix.faux { box-shadow: 0 0 0 8px #ff6f61; animation: pl-secoue .45s ease-in-out; }
.dq-choix.indice-doux { box-shadow: 0 0 0 6px rgba(57, 194, 127, .7); }
.dq-cote.bloque .dq-choix:not(.faux) { filter: grayscale(.7) brightness(.9); }
.dq-explication { top: 330px; bottom: auto; z-index: 6; }

/* Consigne lisible sur tous les décors */
.tr-consigne { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; padding: 4px 26px;
  border-radius: 999px; background: rgba(255, 255, 255, .88); box-shadow: var(--ombre); font-size: 26px; }

/* ============================================================
   Jeux mobiles : le même jeu, joué seul sur un téléphone
   (plateau/solo.php). La scène reste 1600 × 900 : tout est
   dessiné en grand pour rester lisible une fois réduit.
   ============================================================ */
.so-accueil { display: block; }
.so-retour {
  position: absolute; left: 34px; top: 34px; z-index: 3;
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blanc); color: var(--encre); box-shadow: var(--ombre);
  font-family: var(--titre); font-size: 48px; font-weight: 700; text-decoration: none;
}
.so-entete { position: absolute; top: 30px; left: 220px; right: 220px; text-align: center; }

/* ⚙️ Réglages : un bouton rond à côté du plein écran, un panneau par-dessus l'accueil */
.so-reglages-btn {
  position: absolute; right: 112px; top: 34px; z-index: 3;
  width: 84px; height: 84px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--blanc); box-shadow: var(--ombre); font-size: 44px; line-height: 1;
}
.so-reglages-btn:active { transform: translateY(3px); }
.so-panneau {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(40, 70, 140, .38); backdrop-filter: blur(3px);
}
.so-panneau[hidden] { display: none; }
.so-panneau-carte {
  width: 1240px; max-height: 840px; display: flex; flex-direction: column;
  padding: 26px 34px 28px; background: var(--blanc); border-radius: 40px;
  box-shadow: 0 24px 60px rgba(38, 64, 130, .3);
  animation: pl-arrivee .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.so-panneau-carte h2 { margin: 0 0 10px; font-family: var(--titre); font-weight: 700; font-size: 48px; text-align: center; }
.so-panneau-corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 16px;
}
.so-reglage { display: flex; flex-direction: column; gap: 8px; }
.so-reglage-titre { margin: 0; font-family: var(--titre); font-weight: 600; font-size: 30px; color: var(--encre-doux); }
.so-reglage-choix { display: flex; flex-wrap: wrap; gap: 12px; }
.so-reglage .so-serie { background: #f4f7ff; }
.so-reglage .so-serie.choisie { background: #fff4cf; }
.so-fonds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.so-fond {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 20px;
  border: 5px solid transparent; background: #f4f7ff;
  font-family: var(--titre); font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--encre); text-align: center;
}
.so-fond img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.so-fond.choisie { border-color: var(--or-fonce); background: #fff4cf; }
.so-fond:active { transform: translateY(3px); }
.so-panneau-pied { display: flex; justify-content: center; gap: 22px; margin-top: 18px; }
.so-entete h1 {
  margin: 0; font-family: var(--titre); font-weight: 700; font-size: 68px; line-height: 1.05;
  color: var(--blanc); text-shadow: 0 4px 0 #6d8fd6, 0 10px 26px rgba(40, 70, 140, .35); text-wrap: balance;
}
.so-entete p {
  display: inline-block; margin: 14px 0 0; padding: 8px 26px; max-width: 1150px;
  background: var(--verre); border-radius: 26px;
  font-size: 26px; line-height: 1.3; color: var(--encre-doux); text-wrap: balance;
}
.so-corps {
  position: absolute; top: 250px; bottom: 36px; left: 56px; right: 56px;
  display: grid; grid-template-columns: 600px 1fr; gap: 36px;
}
.so-gauche { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.so-vignette {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 30px;
  border: 6px solid var(--blanc); box-shadow: var(--ombre);
}
.so-joueur {
  display: flex; align-items: center; gap: 18px; padding: 16px 22px;
  background: var(--blanc); border-radius: 28px; box-shadow: var(--ombre);
  border: 6px solid var(--bleu);
}
.so-joueur.f { border-color: var(--rose); }
.so-prenom { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.so-prenom span { font-family: var(--titre); font-weight: 600; font-size: 24px; color: var(--encre-doux); }
.so-prenom input {
  width: 100%; padding: 8px 18px; border-radius: 18px; border: 4px solid var(--bleu-clair);
  font-family: var(--titre); font-weight: 600; font-size: 40px; color: var(--encre); background: #f7faff;
  -webkit-user-select: text; user-select: text;
}
.so-joueur.f .so-prenom input { border-color: var(--rose-clair); background: #fff7fb; }
.so-prenom input:focus { outline: none; border-color: var(--or); }
.so-prenom input.secoue { animation: pl-secoue .45s ease-in-out; border-color: #ff6f61; }
.so-couleurs { display: flex; gap: 10px; }
.so-couleur {
  width: 78px; height: 78px; border-radius: 50%; border: 5px solid transparent;
  background: var(--bleu-clair); font-size: 40px; line-height: 1;
}
.so-couleur.f { background: var(--rose-clair); }
.so-couleur[aria-checked="true"] { border-color: var(--bleu); transform: scale(1.08); }
.so-couleur.f[aria-checked="true"] { border-color: var(--rose); }

.so-niveaux {
  display: flex; flex-direction: column; min-height: 0; padding: 22px 26px 26px;
  background: var(--verre); border-radius: 34px; box-shadow: var(--ombre);
}
.so-niveaux-titre { margin: 0 0 12px; font-family: var(--titre); font-weight: 700; font-size: 36px; }
.so-liste {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; padding: 4px;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
.so-groupe {
  flex-basis: 100%; margin: 8px 0 0; font-family: var(--titre); font-weight: 600; font-size: 22px;
  color: var(--encre-doux); letter-spacing: .5px; text-transform: uppercase;
}
.so-groupe:first-child { margin-top: 0; }
.so-serie {
  padding: 12px 24px; border-radius: 999px; border: 4px solid transparent;
  background: var(--blanc); box-shadow: 0 5px 0 rgba(20, 60, 110, .1);
  font-family: var(--titre); font-weight: 600; font-size: 27px; text-align: start;
}
.so-serie.choisie { border-color: var(--or-fonce); background: #fff4cf; }
.so-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 36px; border: 0; border-radius: 999px; text-decoration: none;
  background: var(--blanc); color: var(--encre); box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 700; font-size: 34px;
}
.so-btn-or { background: linear-gradient(180deg, #ffe27a, var(--or) 55%, var(--or-fonce)); box-shadow: 0 8px 0 #c98a08, var(--ombre); }
.so-jouer { margin-top: 18px; font-size: 50px; padding: 18px; }
.so-btn:active, .so-serie:active, .so-couleur:active { transform: translateY(3px); }

/* Carte de fin : rejouer, changer de niveau */
.pl-solo .pl-prochain-fin { display: none; }
.so-fin { position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; }
.so-gains { display: flex; justify-content: center; gap: 16px; margin: 0 0 16px; min-height: 66px; }
.so-serie-etoiles { margin-inline-start: 10px; font-size: .8em; letter-spacing: -2px; }
.so-record {
  display: inline-block; padding: 8px 28px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe27a, var(--or)); box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 700; font-size: 36px; color: var(--encre);
  animation: pl-arrivee .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
.so-record[hidden] { display: none; }
.so-lumieres {
  display: inline-block; margin: 0; padding: 8px 28px; border-radius: 999px;
  background: var(--blanc); box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 700; font-size: 36px; color: var(--or-fonce);
  animation: pl-arrivee .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
.so-lumieres[hidden] { display: none; }
.so-fin-boutons { display: flex; justify-content: center; gap: 22px; }
.pl-solo .pl-fin-carte { top: 60px; }

/* Pendant la partie : un bouton pour s'arrêter ; le plein écran passe en haut */
.so-arreter {
  display: none; position: absolute; right: 22px; bottom: 22px; z-index: 20;
  width: 70px; height: 70px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .8); box-shadow: var(--ombre); font-size: 30px; color: var(--encre-doux);
}
.pl-scene[data-phase="tour"] .so-arreter { display: block; }
.pl-solo .pl-coin-btn { left: auto; right: 34px; top: 34px; bottom: auto; }

/* Téléphone tenu debout : on demande de le tourner */
.so-tourner { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  .pl-solo .so-tourner {
    display: grid; position: fixed; inset: 0; z-index: 200; place-items: center; align-content: center; gap: 10px;
    background: rgba(35, 60, 125, .93); color: var(--blanc); text-align: center;
    font-family: var(--titre); font-weight: 600; font-size: 28px;
  }
  .so-tourner p { margin: 0; }
  .so-tourner small { font-weight: 500; font-size: .7em; opacity: .85; }
  .so-tourner-tel { font-size: 96px; line-height: 1; animation: so-tourne 2.4s ease-in-out infinite; }
}
@keyframes so-tourne { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .so-tourner-tel { animation: none; } }

/* La proposition qu'on est en train d'entendre (question lue, puis chaque
   proposition, l'une après l'autre) : elle s'éclaire, l'enfant suit du regard. */
.pl-lu {
  outline: 8px solid rgba(255, 200, 61, .95); outline-offset: 5px;
  transform: scale(1.045); transition: transform .2s ease, outline-color .2s ease;
  position: relative; z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .pl-lu { transform: none; } }

/* ============================================================
   Écoute et trouve : une voix, trois cartes qui se ressemblent,
   un à trois couloirs. Tout passe par la couleur et le mouvement :
   les enfants ne lisent pas encore.
   ============================================================ */
/* (décor : voir --fond-image, choisi par la partie) */

/* --- Le bandeau : le haut-parleur à gauche, le temps qui s'écoule au milieu --- */
.ec-hud {
  position: absolute; left: 28px; right: 28px; top: 18px; height: 88px; z-index: 5; pointer-events: none;
  display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; gap: 28px;
}
/* Le bouton quitte son coin habituel : en bas, il gênerait les cartes */
.ec-reecouter { position: static; width: 88px; height: 88px; font-size: 40px; pointer-events: auto; }
.ec-temps { height: 30px; }

/* --- Les couloirs : autant de colonnes que de joueurs --- */
.ec-couloirs {
  position: absolute; left: 30px; right: 30px; top: 118px; bottom: 26px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
}
.ec-couloirs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-couloirs[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ec-couloir {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 12px 16px 16px; border-radius: 40px;
  background: var(--teinte, rgba(220, 235, 255, .5));
  border: 5px solid rgba(63, 134, 255, .5);
  animation: ec-couloir-entree .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
/* Le liseré à la couleur de l'élève : chacun reconnaît son couloir */
.ec-couloir.f { --teinte: rgba(255, 225, 239, .55); border-color: rgba(255, 95, 162, .55); }
.ec-couloirs[data-n="1"] .ec-couloir { border-color: rgba(255, 255, 255, .7); --teinte: rgba(255, 255, 255, .3); }

/* La pastille du joueur, avec ses points */
.ec-tete {
  align-self: center; display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 6px 8px 6px 6px; border-radius: 999px; background: #fff; border: 4px solid var(--bleu);
  box-shadow: var(--ombre); font-family: var(--titre); font-weight: 600; font-size: 32px; line-height: 1;
}
.ec-couloir.f .ec-tete { border-color: var(--rose); }
.ec-couloir.f .ec-tete .pl-initiale { background: var(--rose); }
.ec-tete .pl-initiale { width: 52px; height: 52px; font-size: 28px; }
.ec-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.ec-pts {
  min-width: 84px; padding: 4px 14px; border-radius: 999px; text-align: center;
  background: #fff4d1; color: #8a5a00; font-size: 34px; font-variant-numeric: tabular-nums;
}
.ec-tete.gagne { animation: pl-pulse .45s ease-out; }

/* --- Les cartes : empilées dans un couloir étroit, côte à côte quand on joue seul --- */
.ec-cartes { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ec-couloirs[data-n="1"] .ec-cartes {
  grid-template-rows: minmax(0, 1fr); grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px; padding: 24px 30px 30px;
}
.ec-carte {
  position: relative; min-width: 0; min-height: 44px; border: 0; padding: 0 20px; border-radius: 36px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  box-shadow: 0 10px 0 rgba(20, 60, 110, .12), 0 18px 34px rgba(20, 60, 110, .2);
  display: grid; place-items: center; touch-action: none; cursor: pointer;
  animation: ec-entree .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
/* Le halo qui bat doucement tant que rien n'est touché : « c'est à toi » */
.ec-carte::after {
  content: ""; position: absolute; inset: -8px; border-radius: 44px; pointer-events: none;
  box-shadow: 0 0 0 6px rgba(255, 200, 61, .55), 0 0 40px 12px rgba(255, 200, 61, .45);
  opacity: 0; animation: ec-halo 2.2s ease-in-out infinite; animation-delay: var(--halo, 0s);
  will-change: opacity;
}
.ec-couloirs.resolu .ec-carte::after,
.ec-carte.gagne::after, .ec-carte.rate::after, .ec-carte.sortie::after { animation: none; opacity: 0; }
.ec-mot {
  font-family: var(--arabe); direction: rtl; unicode-bidi: isolate;
  font-size: var(--police, 150px); line-height: 1.2; color: var(--encre);
  white-space: nowrap; pointer-events: none;
}
/* « scale » plutôt que « transform » : l'animation d'entrée garde la main sur transform */
.ec-carte:active { scale: .96; }

/* La bonne carte s'illumine et bondit ; les étincelles jaillissent de son centre */
.ec-carte.gagne {
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #fff3b0 45%, #ffd23f 100%);
  box-shadow: 0 0 0 10px #fff, 0 0 70px 24px rgba(255, 205, 60, .85);
  animation: ec-eclat .7s cubic-bezier(.2, 1.5, .4, 1) both; z-index: 2;
}
.ec-etincelle {
  position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; width: 44px; text-align: center;
  font-size: 44px; line-height: 1; color: var(--or); text-shadow: 0 2px 6px rgba(200, 140, 0, .45);
  pointer-events: none; z-index: 3; animation: pl-etincelle .95s ease-out both;
}
.ec-plus {
  position: absolute; top: -30px; left: 50%; translate: -50% 0; pointer-events: none; z-index: 3;
  font-family: var(--titre); font-weight: 700; font-size: 64px; color: var(--or-fonce);
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  animation: pl-monte 1.1s ease-out forwards;
}
/* La carte fausse tremble et rougit… */
.ec-carte.rate {
  animation: pl-secoue .45s ease-in-out both;
  background: radial-gradient(circle at 50% 45%, #ffffff, #ffd6d6 60%, #f5a3a3);
  box-shadow: 0 0 0 8px rgba(255, 111, 97, .75), 0 18px 34px rgba(20, 60, 110, .2);
}
/* … et son couloir se grise le temps du blocage, un sablier au milieu */
.ec-couloir.bloque { --teinte: rgba(190, 196, 210, .45); border-color: rgba(120, 130, 150, .45); }
.ec-couloir.bloque .ec-cartes { pointer-events: none; }
.ec-couloir.bloque .ec-carte:not(.rate) { filter: grayscale(.85) brightness(.88); }
.ec-couloir.bloque::after {
  content: "⏳"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  font-size: 110px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3));
  animation: ec-sablier 1.5s ease-in-out both;
}
/* Personne n'a trouvé : la bonne carte clignote partout ; quelqu'un a trouvé : elle s'éclaire chez les autres */
.ec-carte.indice { box-shadow: 0 0 0 10px #fff, 0 0 50px 16px rgba(255, 200, 61, .8); animation: pl-pulse .5s ease-in-out 3; }
.ec-carte.indice-doux { box-shadow: 0 0 0 8px rgba(255, 200, 61, .55), 0 0 40px 12px rgba(255, 200, 61, .5); }
/* Transition franche : les cartes s'envolent avant que les suivantes n'arrivent */
.ec-carte.sortie { animation: ec-sortie .38s ease-in forwards; pointer-events: none; }

/* --- Carte de fin à trois : les scores côte à côte --- */
.pl-fin-carte.ec-trio { width: 1100px; }
.ec-fin-scores { flex-wrap: wrap; gap: 18px; }

/* --- Mouvements --- */
@keyframes ec-couloir-entree { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ec-entree {
  0% { opacity: 0; transform: translateY(70px) scale(.5); }
  60% { opacity: 1; transform: translateY(-16px) scale(1.06); }
  80% { transform: translateY(6px) scale(.98); }
    /* Fin EXPLICITEMENT visible : si l'animation est coupée (onglet en veille,
     carte graphique à la peine), la carte reste affichée au lieu de rester
     transparente — c'est ce qui la faisait « disparaître » au tableau. */
  100% { opacity: 1; transform: none; }
}
/* Le halo n'anime plus QUE son opacité. Il faisait aussi grandir une ombre de
   40 px de flou : sur un grand écran de tableau, le navigateur la redessinait à
   chaque image et les cartes scintillaient. L'opacité, elle, ne repeint rien. */
@keyframes ec-halo { 0%, 100% { opacity: .12; } 50% { opacity: .8; } }
@keyframes ec-eclat {
  0% { transform: scale(1); }
  40% { transform: scale(1.12) rotate(-2deg); }
  70% { transform: scale(1.04) rotate(1deg); }
  100% { transform: scale(1.06); }
}
@keyframes ec-sortie { to { opacity: 0; transform: translateY(-90px) scale(.6) rotate(3deg); } }
@keyframes ec-sablier { 0% { opacity: 0; scale: .5; } 15% { opacity: 1; scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; scale: .8; } }
@keyframes ec-fondu { from { opacity: 0; } to { opacity: 1; } }

/* Moins de mouvement : les cartes apparaissent et disparaissent en fondu, rien ne bat ni ne tremble */
@media (prefers-reduced-motion: reduce) {
  .ec-couloir, .ec-tete.gagne, .ec-couloir.bloque::after { animation: none; }
  .ec-carte { animation: ec-fondu .25s ease-out both; }
  .ec-carte::after { animation: none; opacity: .3; }
  .ec-carte.gagne, .ec-carte.rate, .ec-carte.indice { animation: none; }
  .ec-carte.sortie { animation: ec-fondu .25s ease-in reverse forwards; }
  .ec-etincelle, .ec-plus { display: none; }
}

/* ============================================================
   Compose le mot : la voix dit un mot, ses lettres arrivent mélangées,
   l'enfant les touche dans l'ordre et le mot se reconstruit dans un cadre,
   de droite à gauche. Un à trois couloirs. Tout passe par la couleur et le
   mouvement : les enfants ne lisent pas encore.
   (À ajouter à plateau.css, après le bloc « Écoute et trouve » : il en
   reprend les rythmes — cascade, halo, secousse — et partage sa carte de
   fin à trois, ec-trio.)
   ============================================================ */
/* (décor : voir --fond-image, choisi par la partie) */

/* --- Le bandeau : le haut-parleur à gauche, le temps qui s'écoule au milieu --- */
.co-hud {
  position: absolute; left: 28px; right: 28px; top: 18px; height: 88px; z-index: 5; pointer-events: none;
  display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; gap: 28px;
}
/* Le bouton quitte son coin habituel : en bas, il gênerait les tuiles */
.co-reecouter { position: static; width: 88px; height: 88px; font-size: 40px; pointer-events: auto; }
.co-temps { height: 30px; }

/* --- Les couloirs : autant de colonnes que de joueurs --- */
.co-couloirs {
  position: absolute; left: 30px; right: 30px; top: 118px; bottom: 26px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
}
.co-couloirs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-couloirs[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.co-couloir {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px 16px; border-radius: 40px;
  background: var(--teinte, rgba(220, 235, 255, .5));
  border: 5px solid rgba(63, 134, 255, .5);
  animation: co-couloir-entree .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
/* Le liseré à la couleur de l'élève : chacun reconnaît son couloir */
.co-couloir.f { --teinte: rgba(255, 225, 239, .55); border-color: rgba(255, 95, 162, .55); }
.co-couloirs[data-n="1"] .co-couloir { border-color: rgba(255, 255, 255, .7); --teinte: rgba(255, 255, 255, .3); }
/* Le couloir gagnant se dore ; celui qui n'a pas fini s'adoucit sans se griser : ce n'est pas une punition */
.co-couloir.resolu { border-color: rgba(255, 200, 61, .9); --teinte: rgba(255, 244, 200, .6); }
.co-couloir.perdu { --teinte: rgba(235, 240, 250, .45); }

/* La pastille du joueur, avec ses points */
.co-tete {
  align-self: center; display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 6px 8px 6px 6px; border-radius: 999px; background: #fff; border: 4px solid var(--bleu);
  box-shadow: var(--ombre); font-family: var(--titre); font-weight: 600; font-size: 32px; line-height: 1;
}
.co-couloir.f .co-tete { border-color: var(--rose); }
.co-couloir.f .co-tete .pl-initiale { background: var(--rose); }
.co-tete .pl-initiale { width: 52px; height: 52px; font-size: 28px; }
.co-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.co-pts {
  min-width: 84px; padding: 4px 14px; border-radius: 999px; text-align: center;
  background: #fff4d1; color: #8a5a00; font-size: 34px; font-variant-numeric: tabular-nums;
}
.co-tete.gagne { animation: pl-pulse .45s ease-out; }

/* --- Le cadre du mot : des cases vides, remplies de droite à gauche ---
   « direction: rtl » : la première case du DOM se dessine tout à droite, là où
   l'arabe commence. Le script n'inverse jamais les index. */
.co-cadre {
  position: relative; direction: rtl; display: flex; justify-content: center; align-items: center;
  gap: 10px; padding: 10px; min-height: 44px; border-radius: 30px;
  background: rgba(255, 255, 255, .28);
}
.co-case {
  position: relative; flex: none; width: var(--case, 120px); height: var(--case, 120px);
  border-radius: calc(var(--case, 120px) * .2); border: 4px dashed rgba(43, 136, 168, .55);
  background: rgba(255, 255, 255, .55);
  display: grid; place-items: center; overflow: visible;
  animation: co-case-entree .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
/* La case qui attend la prochaine lettre respire en or : « c'est ici que ça va » */
.co-case.attendue {
  border-style: solid; border-color: var(--or);
  animation: co-attend 1.2s ease-in-out infinite;
}
/* Une lettre est posée : la case devient blanche, cerclée de vert, et la lettre s'y installe en rebondissant */
.co-case.pleine {
  border: 4px solid #2bb3a0; background: #fff; box-shadow: 0 8px 20px rgba(20, 110, 120, .25);
  animation: none;
}
.co-case.pleine .co-lettre { animation: co-pose .45s cubic-bezier(.2, 1.6, .4, 1) both; }
/* La solution montrée à ceux qui n'ont pas fini : en transparence, sans vert de réussite */
.co-case.douce { border: 4px dashed rgba(255, 200, 61, .8); background: rgba(255, 250, 230, .7); box-shadow: none; }
.co-case.douce .co-lettre { opacity: .6; }

/* --- Les tuiles mélangées ---
   Elles aussi en « rtl » : si le tirage tombait dans l'ordre, il se lirait
   comme le mot tout fait — le script l'évite. */
.co-tuiles {
  flex: 1; min-height: 0; direction: rtl;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 18px;
}
.co-tuile {
  position: relative; flex: none; width: var(--tuile, 160px); height: var(--tuile, 160px);
  min-width: 44px; min-height: 44px;             /* cible tactile, même sur un petit téléphone */
  border: 0; padding: 0; border-radius: calc(var(--tuile, 160px) * .24);
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  box-shadow: 0 10px 0 rgba(20, 60, 110, .12), 0 18px 34px rgba(20, 60, 110, .2);
  display: grid; place-items: center; touch-action: none; cursor: pointer;
  animation: co-entree .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
/* Le halo qui bat doucement tant que rien n'est touché dans ce couloir : « c'est à toi » */
.co-tuile::after {
  content: ""; position: absolute; inset: -8px; border-radius: calc(var(--tuile, 160px) * .24 + 8px); pointer-events: none;
  box-shadow: 0 0 0 6px rgba(255, 200, 61, .55), 0 0 40px 12px rgba(255, 200, 61, .45);
  opacity: 0;
}
.co-couloir.attente .co-tuile::after { animation: co-halo 2.2s ease-in-out infinite; animation-delay: var(--halo, 0s); }
.co-lettre {
  font-family: var(--arabe); direction: rtl; unicode-bidi: isolate;
  font-size: calc(var(--tuile, 160px) * .58); line-height: 1.4; color: var(--encre);
  white-space: nowrap; pointer-events: none;
}
/* Dans une case, la lettre se règle sur la case ; en vol, sur la tuile dont elle vient */
.co-case .co-lettre { font-size: calc(var(--case, 120px) * .6); }
/* « scale » plutôt que « transform » : l'animation d'entrée garde la main sur transform */
.co-tuile:active { scale: .96; }

/* Une tuile déjà touchée n'a plus d'animation d'entrée : quand la secousse s'efface,
   elle ne rebondit pas une seconde fois (les règles rate / indice, plus bas, gardent la main) */
.co-tuile.touchee { animation: none; }
/* La tuile posée s'efface mais garde sa place : rien ne bouge autour, l'enfant garde ses repères */
.co-tuile.posee { visibility: hidden; pointer-events: none; }
/* La tuile fausse tremble et rougit, puis revient à sa place, blanche… */
.co-tuile.rate {
  animation: pl-secoue .45s ease-in-out both;
  background: radial-gradient(circle at 50% 45%, #ffffff, #ffd6d6 60%, #f5a3a3);
  box-shadow: 0 0 0 8px rgba(255, 111, 97, .75), 0 18px 34px rgba(20, 60, 110, .2);
}
/* … et son couloir ne répond plus un court instant (pas de sablier : c'est trop bref pour le mériter) */
.co-couloir.bloque .co-tuiles { pointer-events: none; }
.co-couloir.bloque .co-tuile:not(.rate) { filter: brightness(.92); }
/* Après deux erreurs, la bonne tuile s'éclaire discrètement : un coup de pouce, pas la réponse criée */
.co-tuile.indice {
  box-shadow: 0 0 0 8px rgba(255, 200, 61, .7), 0 0 36px 10px rgba(255, 200, 61, .55), 0 10px 0 rgba(20, 60, 110, .12);
  animation: pl-pulse 1s ease-in-out infinite;
}
/* Chez ceux qui n'ont pas fini, les tuiles restantes s'éteignent : le regard va au cadre où la solution s'écrit */
.co-tuile.eteinte { filter: grayscale(.7); opacity: .45; transition: opacity .5s, filter .5s; }
/* Transition franche : tuiles et cases s'envolent avant que les suivantes n'arrivent */
.co-tuile.sortie, .co-case.sortie, .co-mot-entier.sortie { animation: co-sortie .38s ease-in forwards; pointer-events: none; }

/* --- Le vol d'une tuile jusqu'à sa case ---
   Un double de la tuile, posé sur le couloir, glisse et rapetisse jusqu'au
   centre de la case (--dx, --dy, --s calculés par le script). */
.co-vol {
  position: absolute; z-index: 4; pointer-events: none;
  border-radius: calc(var(--tuile, 160px) * .24);
  background: linear-gradient(180deg, #ffffff, #fff6d6);
  box-shadow: 0 0 0 6px rgba(255, 200, 61, .6), 0 18px 34px rgba(20, 60, 110, .25);
  display: grid; place-items: center;
  animation: co-vol .55s cubic-bezier(.3, .9, .3, 1.08) forwards;
}

/* --- Le mot complet : les cases se fondent en un bandeau d'or, le mot entier s'y lève --- */
.co-cadre.complet {
  background: radial-gradient(ellipse at 50% 50%, #fff9dc 0%, #ffe89a 55%, rgba(255, 210, 63, .9) 100%);
  box-shadow: 0 0 0 8px #fff, 0 0 60px 20px rgba(255, 205, 60, .8);
  animation: co-eclat .7s cubic-bezier(.2, 1.5, .4, 1) both;
  z-index: 2;
}
.co-cadre.complet .co-case { border-color: transparent; background: transparent; box-shadow: none; }
.co-cadre.complet .co-case .co-lettre { opacity: 0; transition: opacity .35s; }
.co-mot-entier {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1;
  font-family: var(--arabe); direction: rtl; unicode-bidi: isolate;
  font-size: calc(var(--case, 120px) * .95); line-height: 1.3; color: var(--encre);
  white-space: nowrap; text-shadow: 0 3px 0 #fff, 0 10px 24px rgba(200, 140, 0, .35);
  animation: co-eclot .7s cubic-bezier(.2, 1.6, .4, 1) .15s both;
}
.co-etincelle {
  position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; width: 44px; text-align: center;
  font-size: 44px; line-height: 1; color: var(--or); text-shadow: 0 2px 6px rgba(200, 140, 0, .45);
  pointer-events: none; z-index: 3; animation: pl-etincelle .95s ease-out both;
}
.co-plus {
  position: absolute; top: -30px; left: 50%; translate: -50% 0; pointer-events: none; z-index: 3;
  font-family: var(--titre); font-weight: 700; font-size: 64px; color: var(--or-fonce);
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  animation: pl-monte 1.1s ease-out forwards;
}

/* --- Mouvements --- */
@keyframes co-couloir-entree { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes co-case-entree { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes co-entree {
  0% { opacity: 0; transform: translateY(70px) scale(.5); }
  60% { opacity: 1; transform: translateY(-16px) scale(1.06); }
  80% { transform: translateY(6px) scale(.98); }
    /* Fin EXPLICITEMENT visible : si l'animation est coupée (onglet en veille,
     carte graphique à la peine), la carte reste affichée au lieu de rester
     transparente — c'est ce qui la faisait « disparaître » au tableau. */
  100% { opacity: 1; transform: none; }
}
@keyframes co-halo { 0%, 100% { opacity: .12; transform: scale(1); } 50% { opacity: .8; transform: scale(1.02); } }
@keyframes co-attend {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, .0); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(255, 200, 61, .45), 0 0 30px 8px rgba(255, 200, 61, .35); transform: scale(1.05); }
}
@keyframes co-vol {
  0% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3 - 40px)) scale(1.05); }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s, .7)); opacity: .9; }
}
@keyframes co-pose { 0% { opacity: 0; transform: scale(1.5); } 60% { opacity: 1; transform: scale(.92); } 100% { transform: none; } }
@keyframes co-eclat {
  0% { transform: scale(1); }
  40% { transform: scale(1.08) rotate(-1deg); }
  70% { transform: scale(1.02) rotate(.5deg); }
  100% { transform: scale(1.04); }
}
@keyframes co-eclot { from { opacity: 0; transform: scale(.3) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes co-sortie { to { opacity: 0; transform: translateY(-90px) scale(.6) rotate(3deg); } }
@keyframes co-fondu { from { opacity: 0; } to { opacity: 1; } }

/* Moins de mouvement : tout apparaît et disparaît en fondu, rien ne vole, ne bat ni ne tremble
   (le script, lui, pose la lettre directement dans sa case et n'envoie pas d'étincelles) */
@media (prefers-reduced-motion: reduce) {
  .co-couloir, .co-tete.gagne, .co-cadre.complet { animation: none; }
  .co-tuile, .co-case { animation: co-fondu .25s ease-out both; }
  .co-case.attendue, .co-case.pleine .co-lettre, .co-mot-entier { animation: none; }
  .co-tuile::after, .co-couloir.attente .co-tuile::after { animation: none; opacity: .3; }
  .co-tuile.rate, .co-tuile.indice { animation: none; }
  .co-tuile.sortie, .co-case.sortie, .co-mot-entier.sortie { animation: co-fondu .25s ease-in reverse forwards; }
  .co-vol, .co-etincelle, .co-plus { display: none; }
}

/* Code d'identification d'un jeu : il se dicte en classe et ne change jamais. */
.pl-code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .8em;
  letter-spacing: .14em; padding: .1rem .4rem; border-radius: 6px; vertical-align: middle;
  background: rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .12); }

/* ============================================================
   La chasse aux lettres — la grille du Qaïda au tableau.
   La lettre modèle trône en haut ; dessous, une grille par élève,
   un à trois couloirs. Mêmes codes que « Écoute et trouve » : les
   enfants passent d'un jeu à l'autre sans rien réapprendre.
   ============================================================ */
/* --- Le bandeau : haut-parleur, lettre modèle, temps qui s'écoule --- */
.ch-hud {
  position: absolute; left: 28px; right: 28px; top: 14px; height: 124px; z-index: 5; pointer-events: none;
  display: grid; grid-template-columns: 88px auto 1fr; align-items: center; gap: 26px;
}
.ch-reecouter { position: static; width: 88px; height: 88px; font-size: 40px; pointer-events: auto; }
.ch-temps { height: 30px; }
/* La lettre à chercher : grande, posée sur un carton clair, cerclée d'or.
   C'est TOUJOURS la forme isolée — celle que l'enfant reconnaît déjà. */
.ch-modele {
  min-width: 190px; height: 118px; padding: 0 28px; border-radius: 34px;
  display: grid; place-items: center; background: linear-gradient(180deg, #ffffff, #fff6da);
  border: 6px solid var(--or); box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), 0 14px 30px rgba(20, 60, 110, .25);
  font-family: var(--arabe); direction: rtl; unicode-bidi: isolate;
  font-size: 96px; line-height: 1; color: var(--encre);
}
.ch-modele.ch-pose { animation: ch-pose .55s cubic-bezier(.2, 1.6, .4, 1) both; }

/* --- Les couloirs : autant de colonnes que de joueurs --- */
.ch-couloirs {
  position: absolute; left: 30px; right: 30px; top: 152px; bottom: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
}
.ch-couloirs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-couloirs[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ch-couloir {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 10px 14px 14px; border-radius: 38px;
  background: var(--teinte, rgba(220, 235, 255, .5));
  border: 5px solid rgba(63, 134, 255, .5);
  animation: ec-couloir-entree .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.ch-couloir.f { --teinte: rgba(255, 225, 239, .55); border-color: rgba(255, 95, 162, .55); }
.ch-couloirs[data-n="1"] .ch-couloir { border-color: rgba(255, 255, 255, .7); --teinte: rgba(255, 255, 255, .3); }

/* La pastille du joueur : son prénom, ce qu'il lui reste à trouver, ses points */
.ch-tete {
  position: relative; align-self: center; display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 5px 8px 5px 5px; border-radius: 999px; background: #fff; border: 4px solid var(--bleu);
  box-shadow: var(--ombre); font-family: var(--titre); font-weight: 600; font-size: 28px; line-height: 1;
}
.ch-couloir.f .ch-tete { border-color: var(--rose); }
.ch-couloir.f .ch-tete .pl-initiale { background: var(--rose); }
.ch-tete .pl-initiale { width: 46px; height: 46px; font-size: 25px; }
.ch-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
/* Les étoiles qui restent à décrocher : un enfant qui ne lit pas les compte */
.ch-reste { font-size: 20px; line-height: 1; letter-spacing: -2px; }
.ch-couloirs[data-n="3"] .ch-reste { display: none; }
.ch-pts {
  min-width: 70px; padding: 3px 12px; border-radius: 999px; text-align: center;
  background: #fff4d1; color: #8a5a00; font-size: 30px; font-variant-numeric: tabular-nums;
}
.ch-tete.gagne { animation: pl-pulse .45s ease-out; }

/* --- La grille : autant de colonnes que le moteur en demande --- */
.ch-grille {
  flex: 1; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.ch-couloirs[data-n="3"] .ch-grille { gap: 9px; }
.ch-case {
  position: relative; min-width: 0; min-height: 40px; border: 0; padding: 0 6px; border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  box-shadow: 0 7px 0 rgba(20, 60, 110, .12), 0 12px 22px rgba(20, 60, 110, .18);
  display: grid; place-items: center; touch-action: none; cursor: pointer;
  animation: ec-entree .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
/* Le halo qui bat doucement tant que rien n'est touché : « c'est à toi ».
   Comme ailleurs, il n'anime QUE son opacité — une ombre animée fait
   scintiller les grands écrans de tableau. */
.ch-case::after {
  content: ""; position: absolute; inset: -6px; border-radius: 30px; pointer-events: none;
  box-shadow: 0 0 0 5px rgba(255, 200, 61, .5), 0 0 30px 9px rgba(255, 200, 61, .4);
  opacity: 0; animation: ec-halo 2.6s ease-in-out infinite; animation-delay: var(--halo, 0s);
  will-change: opacity;
}
.ch-couloirs.resolu .ch-case::after,
.ch-case.trouvee::after, .ch-case.rate::after, .ch-case.sortie::after { animation: none; opacity: 0; }
.ch-glyphe {
  font-family: var(--arabe); direction: rtl; unicode-bidi: isolate;
  font-size: var(--police, 76px); line-height: 1.25; color: var(--encre);
  white-space: nowrap; pointer-events: none;
}
.ch-case:active { scale: .95; }

/* Cartes pastel (réglage « Couleur des cartes »). Six teintes claires, assez
   pâles pour que l'encre noire de la lettre reste parfaitement lisible au
   tableau — et surtout assez proches les unes des autres pour que la couleur
   ne souffle jamais la réponse. Ces règles précèdent `trouvee` et `rate` :
   à spécificité égale, c'est la dernière écrite qui l'emporte, et il faut que
   l'or de la réussite et le rouge de l'erreur passent devant le pastel. */
.ch-case.ch-c0 { background: linear-gradient(180deg, #ffffff, #ffe7ee); }
.ch-case.ch-c1 { background: linear-gradient(180deg, #ffffff, #fdeccd); }
.ch-case.ch-c2 { background: linear-gradient(180deg, #ffffff, #e6f6d9); }
.ch-case.ch-c3 { background: linear-gradient(180deg, #ffffff, #d8f2f4); }
.ch-case.ch-c4 { background: linear-gradient(180deg, #ffffff, #e2e6fb); }
.ch-case.ch-c5 { background: linear-gradient(180deg, #ffffff, #f4e2f8); }

/* Une jumelle trouvée : la case s'allume en or et garde son étoile */
.ch-case.trouvee {
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #fff3b0 45%, #ffd23f 100%);
  box-shadow: 0 0 0 7px #fff, 0 0 46px 15px rgba(255, 205, 60, .8);
  animation: ec-eclat .6s cubic-bezier(.2, 1.5, .4, 1) both; pointer-events: none; z-index: 2;
}
.ch-case.trouvee .ch-etoile {
  position: absolute; top: -10px; right: -8px; font-size: 34px; line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(200, 140, 0, .5)); animation: pl-arrivee .45s ease-out both;
}
/* La grille entièrement nettoyée : tout le couloir rayonne */
.ch-couloir.ch-complet { border-color: var(--or); --teinte: rgba(255, 240, 200, .6); }
.ch-couloir.ch-complet .ch-tete { border-color: var(--or); }

.ch-etincelle {
  position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -18px; width: 36px; text-align: center;
  font-size: 36px; line-height: 1; color: var(--or); text-shadow: 0 2px 6px rgba(200, 140, 0, .45);
  pointer-events: none; z-index: 3; animation: pl-etincelle .95s ease-out both;
}
.ch-plus {
  position: absolute; top: -34px; left: 50%; translate: -50% 0; pointer-events: none; z-index: 3;
  font-family: var(--titre); font-weight: 700; font-size: 56px; color: var(--or-fonce);
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  animation: pl-monte 1.1s ease-out forwards;
}
/* La case fausse tremble et rougit… */
.ch-case.rate {
  animation: pl-secoue .45s ease-in-out both;
  background: radial-gradient(circle at 50% 45%, #ffffff, #ffd6d6 60%, #f5a3a3);
  box-shadow: 0 0 0 6px rgba(255, 111, 97, .75), 0 12px 22px rgba(20, 60, 110, .18);
}
/* … et son couloir se grise le temps du blocage, un sablier au milieu */
.ch-couloir.bloque { --teinte: rgba(190, 196, 210, .45); border-color: rgba(120, 130, 150, .45); }
.ch-couloir.bloque .ch-grille { pointer-events: none; }
.ch-couloir.bloque .ch-case:not(.rate) { filter: grayscale(.85) brightness(.88); }
.ch-couloir.bloque::after {
  content: "⏳"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  font-size: 100px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3));
  animation: ec-sablier 1.2s ease-in-out both;
}
/* Les lettres oubliées : elles clignotent quand le temps est passé, elles
   s'éclairent doucement quand c'est le voisin qui a fini le premier. */
.ch-case.indice { box-shadow: 0 0 0 8px #fff, 0 0 40px 13px rgba(255, 200, 61, .8); animation: pl-pulse .5s ease-in-out 3; }
.ch-case.indice-doux { box-shadow: 0 0 0 6px rgba(255, 200, 61, .55), 0 0 30px 10px rgba(255, 200, 61, .5); }
.ch-case.sortie { animation: ec-sortie .38s ease-in forwards; pointer-events: none; }

@keyframes ch-pose {
  0% { opacity: 0; transform: translateY(-40px) scale(.6) rotate(-4deg); }
  60% { opacity: 1; transform: translateY(6px) scale(1.08); }
  100% { opacity: 1; transform: none; }
}

/* Moins de mouvement : tout apparaît en fondu, rien ne bat ni ne tremble */
@media (prefers-reduced-motion: reduce) {
  .ch-couloir, .ch-tete.gagne, .ch-couloir.bloque::after, .ch-modele.ch-pose { animation: none; }
  .ch-case { animation: ec-fondu .25s ease-out both; }
  .ch-case::after { animation: none; opacity: .3; }
  .ch-case.trouvee, .ch-case.rate, .ch-case.indice { animation: none; }
  .ch-case.trouvee .ch-etoile { animation: none; }
  .ch-case.sortie { animation: ec-fondu .25s ease-in reverse forwards; }
  .ch-etincelle, .ch-plus { display: none; }
}

/* ============================================================
   Mode « écran sobre » — pour les grands tableaux tactiles.

   Un 75 pouces est presque toujours piloté par un tout petit ordinateur. En
   4K, trois choses lui coûtent très cher à redessiner : les entrées animées
   des cartes, les halos qui battent, et les grandes ombres floues. Quand il
   n'y arrive plus, une carte arrive en retard, à moitié — ou pas du tout,
   parce qu'une entrée déclarée « both » peint sa carte transparente tant que
   son délai n'est pas écoulé.

   Ici, on coupe tout ça. Il suffit de neutraliser l'ANIMATION : sans elle,
   chaque élément retombe sur son propre style, qui est déjà le bon (visible,
   en place). On ne force donc ni l'opacité ni la transformation — ce qui
   laisse intactes les manipulations dont les jeux ont besoin : le retournement
   d'une carte de memory, le vol d'un nuage, la mise à l'échelle de la scène.

   Le jeu ne change pas. Il devient immobile.
   ============================================================ */
html.pl-sobre .ec-couloir, html.pl-sobre .ec-carte,
html.pl-sobre .ch-couloir, html.pl-sobre .ch-case, html.pl-sobre .ch-modele,
html.pl-sobre .co-couloir, html.pl-sobre .co-tuile, html.pl-sobre .co-case,
html.pl-sobre .co-mot-entier, html.pl-sobre .qz-choix-carte,
html.pl-sobre .tr-carte, html.pl-sobre .tr-panier, html.pl-sobre .tr-explication,
html.pl-sobre .mm-carte, html.pl-sobre .wd-carte, html.pl-sobre .dl-lanterne,
html.pl-sobre .pl-nuage, html.pl-sobre .pl-joueur,
html.pl-sobre .pl-fin-carte, html.pl-sobre .pl-fin-etoiles span,
html.pl-sobre .pl-scene[data-phase="fin_tour"] .pl-fin-carte {
  animation: none !important;
}
/* Le halo qui bat devient un liseré fixe : il dit toujours « touche-moi »,
   sans demander une image à la seconde. */
html.pl-sobre .ec-carte::after,
html.pl-sobre .ch-case::after,
html.pl-sobre .co-tuile::after {
  animation: none !important;
  opacity: .4 !important;
  box-shadow: 0 0 0 5px rgba(255, 200, 61, .6) !important;
}
/* Les grandes ombres floues, remplacées par un trait net : même relief,
   cent fois moins de travail pour la carte graphique. */
html.pl-sobre .ec-carte, html.pl-sobre .ch-case, html.pl-sobre .co-tuile,
html.pl-sobre .qz-choix-carte, html.pl-sobre .mm-carte,
html.pl-sobre .wd-carte, html.pl-sobre .tr-carte, html.pl-sobre .tr-panier {
  box-shadow: 0 6px 0 rgba(20, 60, 110, .18) !important;
}
html.pl-sobre .ec-carte.gagne, html.pl-sobre .ch-case.trouvee {
  box-shadow: 0 0 0 9px #ffd23f !important;
}
html.pl-sobre .ec-carte.rate, html.pl-sobre .ch-case.rate,
html.pl-sobre .co-tuile.rate, html.pl-sobre .wd-carte.rate {
  box-shadow: 0 0 0 9px #ff6f61 !important;
}
html.pl-sobre .ec-carte.indice, html.pl-sobre .ec-carte.indice-doux,
html.pl-sobre .ch-case.indice, html.pl-sobre .ch-case.indice-doux {
  box-shadow: 0 0 0 9px rgba(255, 200, 61, .95) !important;
}
/* Les gerbes d'étincelles et les confettis : jolis, mais ce sont des dizaines
   d'éléments animés en même temps. Le « +10 » qui monte, lui, reste. */
html.pl-sobre .ec-etincelle, html.pl-sobre .ch-etincelle,
html.pl-sobre .co-etincelle, html.pl-sobre .pl-confetti { display: none !important; }

/* Le bouton qui allume et coupe le mode, à côté du plein écran */
.pl-coin-sobre { left: 92px; }
html.pl-sobre .pl-coin-sobre { background: #ffe9a8; }

/* ============================================================
   « Mâchâ Allah ! » — l'encouragement qui monte en bulles.
   Il passe par-dessus la scène sans rien bloquer : aucun clic ne
   l'atteint, et il s'efface tout seul. Un enfant au tableau ne doit
   jamais attendre après une félicitation.
   ============================================================ */
.pl-macha {
  position: absolute; left: 50%; top: 38%; translate: -50% 0; z-index: 40;
  pointer-events: none; display: grid; place-items: center;
}
.pl-macha-mot {
  font-family: var(--titre); font-weight: 700; font-size: 92px; line-height: 1;
  color: var(--or-fonce); -webkit-text-stroke: 5px #fff; paint-order: stroke fill;
  white-space: nowrap;
  animation: pl-macha-mot 2s cubic-bezier(.2, 1.5, .4, 1) both;
}
.pl-bulle {
  position: absolute; bottom: -10px; left: 50%;
  width: var(--r, 18px); height: var(--r, 18px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 220, 130, .85) 60%, rgba(255, 190, 60, .5));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
  animation: pl-bulle var(--t, 1.4s) ease-out var(--d, 0s) both;
}
@keyframes pl-macha-mot {
  0% { opacity: 0; transform: translateY(30px) scale(.5) rotate(-3deg); }
  35% { opacity: 1; transform: translateY(-10px) scale(1.06); }
  70% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-40px) scale(.96); }
}
@keyframes pl-bulle {
  0% { opacity: 0; transform: translate(var(--x, 0), 0) scale(.4); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(var(--x, 0) * 1.6), -180px) scale(1.1); }
}
/* Écran sobre : le mot reste, les bulles s'en vont — c'est le mot qui compte */
html.pl-sobre .pl-macha-mot { animation: none !important; }
html.pl-sobre .pl-bulle { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pl-macha-mot { animation: ec-fondu .3s ease-out both; }
  .pl-bulle { display: none; }
}

/* ---- LES CARTES DE TADJWÎD -------------------------------------------------
   « Le ق dans وَاَقْوَمُ » : la lettre étudiée en grand à gauche, la phrase à
   droite, où la même lettre est reprise en couleur dans le mot. Rien n'est
   dessiné — c'est la chaîne de la base, composée en IndoPak (voir
   plateau_carte_tadjwid()). Le rouge est celui des mous-hafs annotés.
   `unicode-bidi: isolate` est sur le MOT entier, jamais sur ses bouts : isolés
   un par un, ils repartiraient dans le désordre au milieu d'une phrase
   française. La liaison cursive, elle, traverse les éléments sans broncher. */
.tr-carte.tadjwid { gap: 30px; }
.tr-grand {
  flex: none; width: 250px; text-align: center;
  font-family: var(--arabe); direction: rtl; font-size: 180px; line-height: 1.1;
  color: var(--encre);
}
.tr-texte .ar { font-family: var(--arabe); font-size: 1.55em; direction: rtl; unicode-bidi: isolate; }
.tr-grand.cible { color: #b4341f; }
.tr-texte .cible { color: #b4341f; }

/* ---- ⚖️ LA BALANCE ---------------------------------------------------------
   Une balance de BOIS, posée dans la salle : un outil de classe, jamais une
   image de l'au-delà. Le fléau pivote autour de son mât ; les deux plateaux
   restent horizontaux (contre-rotation), comme une vraie balance.
   L'inclinaison vient d'une variable --pente que le moteur pose : elle ne
   traduit aucun chiffre, seulement les mots du texte. */
.ba-jeu { position: absolute; inset: 0; }
.ba-consigne {
  position: absolute; left: 50%; top: 66px; transform: translateX(-50%);
  margin: 0; padding: 10px 28px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); font-family: var(--titre-mixte);
  font-weight: 600; font-size: 28px; color: var(--encre); white-space: nowrap;
}
/* Posée assez bas pour que le bras, même à pleine inclinaison, ne vienne
   pas mordre la consigne. */
.ba-balance { position: absolute; left: 50%; top: 130px; width: 960px; margin-left: -480px; height: 330px; }
.ba-pied {
  position: absolute; left: 50%; bottom: 0; width: 300px; height: 28px; margin-left: -150px;
  border-radius: 16px; background: linear-gradient(#a8763f, #6f4a22);
  box-shadow: 0 8px 18px rgba(60, 40, 10, .34);
}
.ba-mat {
  position: absolute; left: 50%; bottom: 22px; width: 22px; height: 250px; margin-left: -11px;
  border-radius: 11px; background: linear-gradient(90deg, #6f4a22, #c99a5c 45%, #8d6236);
}
/* Le fléau pivote autour de son milieu. Une pente POSITIVE tourne dans le
   sens des aiguilles d'une montre, ce qui fait DESCENDRE le plateau de
   droite — celui qu'on charge. Vérifié à l'écran, pas déduit. */
.ba-fleau {
  position: absolute; left: 50%; top: 40px; width: 760px; margin-left: -380px; height: 0;
  transform: rotate(var(--pente, 0deg));
  transform-origin: 50% 50%;
  transition: transform 1.1s cubic-bezier(.34, 1.3, .5, 1);
}
.ba-bras {
  position: absolute; left: 0; right: 0; top: -9px; height: 18px; border-radius: 9px;
  background: linear-gradient(#d9ab6c, #8d6236);
  box-shadow: 0 4px 12px rgba(60, 40, 10, .3);
}
.ba-plateau { position: absolute; top: 0; width: 180px; }
.ba-plateau.gauche { left: -14px; }
.ba-plateau.droite { right: -14px; }
/* Les suspentes */
.ba-plateau::before, .ba-plateau::after {
  content: ''; position: absolute; top: 0; width: 2px; height: 68px; background: #7a5329;
}
.ba-plateau::before { left: 26px; transform: rotate(11deg); transform-origin: top; }
.ba-plateau::after { right: 26px; transform: rotate(-11deg); transform-origin: top; }
/* La coupe reste HORIZONTALE : on annule la rotation du fléau, comme une
   vraie balance dont les plateaux pendent toujours à plat. */
.ba-coupe {
  position: relative; margin: 0 auto; width: 188px; min-height: 84px; top: 66px;
  border-radius: 8px 8px 110px 110px / 8px 8px 58px 58px;
  background: linear-gradient(#f0d8ab, #c39a5d);
  box-shadow: inset 0 5px 12px rgba(255, 255, 255, .5), 0 10px 20px rgba(60, 40, 10, .3);
  transform: rotate(calc(-1 * var(--pente, 0deg)));
  transition: transform 1.1s cubic-bezier(.34, 1.3, .5, 1);
  display: flex; align-items: flex-end; justify-content: center; padding: 7px 10px 10px;
}
.ba-pile { display: flex; flex-direction: column-reverse; gap: 4px; width: 100%; }
.ba-jeton {
  padding: 4px 9px; border-radius: 9px; background: #fff; border: 2px solid var(--or);
  font-family: var(--titre-mixte); font-size: 14px; line-height: 1.1; color: var(--encre);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ba-main {
  position: absolute; left: 90px; right: 90px; top: 480px;
  display: flex; gap: 22px; justify-content: center; align-items: stretch;
}
.ba-carte {
  flex: 1 1 0; min-width: 0; max-width: 400px; min-height: 104px; padding: 16px 20px;
  border-radius: 24px; background: #fff; border: 4px solid var(--or); cursor: pointer;
  box-shadow: 0 12px 26px rgba(20, 90, 110, .22);
  display: flex; align-items: center; justify-content: center;
}
.ba-carte-texte { font-family: var(--titre-mixte); font-weight: 600; font-size: 26px;
  line-height: 1.15; color: var(--encre); text-align: center; text-wrap: balance; }
.ba-carte:hover { transform: translateY(-3px); }
.ba-carte.partie { opacity: 0; pointer-events: none; transition: opacity .3s; }
/* Ce que dit le texte, et d'où il vient. La source n'est pas un ornement :
   elle voyage avec la carte et reste lisible au fond de la classe. */
.ba-dit {
  position: absolute; left: 50%; bottom: 30px; width: 1120px; margin-left: -560px;
  padding: 14px 30px; border-radius: 22px; background: #fffbe6; border: 3px solid var(--or);
  text-align: center;
}
.ba-dit-texte { margin: 0; font-family: var(--texte-mixte); font-size: 30px; line-height: 1.25;
  color: var(--encre); text-wrap: balance; }
.ba-source { margin: 6px 0 0; font-family: var(--texte-mixte); font-size: 20px; color: #8a6a2f; }

/* ---- ⚖️ PHASE 2 : le hadîth du mouflis -------------------------------------
   Un tort posé n'ajoute rien en face : il PREND une bonne action sur le
   plateau et la donne à celui qui a été lésé. Le jeton traverse l'écran et
   va se poser dans le panneau de gauche, où il RESTE visible. Il ne
   disparaît pas : il change de main. Toute la leçon est dans ce trajet. */
.ba-lese {
  position: absolute; left: 36px; top: 140px; width: 232px;
  padding: 14px 14px 16px; border-radius: 22px;
  background: rgba(255, 255, 255, .92); border: 3px solid #7fb4a6;
  box-shadow: 0 10px 24px rgba(20, 90, 110, .18);
}
.ba-lese-titre {
  margin: 0 0 10px; font-family: var(--titre-mixte); font-weight: 600;
  font-size: 20px; line-height: 1.15; color: #2b6a5c; text-align: center;
}
.ba-lese-pile { display: flex; flex-direction: column; gap: 5px; min-height: 60px; }
.ba-jeton.recu { border-color: #7fb4a6; background: #f2fbf8; }
/* Le départ : le jeton glisse vers la gauche en s'effaçant, puis réapparaît
   dans le panneau. Deux mouvements, une seule idée. */
@keyframes ba-part { to { transform: translate(-420px, 150px) scale(.9); opacity: 0; } }
.ba-jeton.part { animation: ba-part .7s cubic-bezier(.4, 0, .6, 1) forwards; }

/* Une carte illustrée : l'image au-dessus, le texte dessous. Les cartes
   remontent pour laisser la place, et la bande du texte garde une hauteur
   fixe — sans quoi trois cartes aux libellés de longueurs différentes se
   décalent les unes par rapport aux autres. */
.ba-carte.illustree { flex-direction: column; gap: 10px; padding: 12px 12px 14px; min-height: 250px; }
.ba-carte-img {
  width: 100%; height: 132px; flex: none; object-fit: cover; border-radius: 16px;
  box-shadow: 0 4px 12px rgba(20, 90, 110, .18);
}
.ba-carte.illustree .ba-carte-texte { font-size: 22px; min-height: 58px; display: flex; align-items: center; }


/* ---- ⚖️ PHASE 3 : les deux plateaux ----------------------------------------
   Le fléau TREMBLE et revient à l'horizontale, il ne penche jamais. Ce n'est
   pas une animation inachevée : faire pencher reviendrait à additionner les
   deux côtés, donc à prétendre savoir ce que nul ne sait. */
@keyframes ba-tremble {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(2.2deg); }
  38%  { transform: rotate(-1.7deg); }
  58%  { transform: rotate(1.1deg); }
  78%  { transform: rotate(-.6deg); }
  100% { transform: rotate(0deg); }
}
.ba-balance.tremble .ba-fleau { animation: ba-tremble 1.5s ease-out; }
.ba-balance.tremble .ba-coupe { animation: ba-tremble 1.5s ease-out reverse; }
.ba-jeton.tort { border-color: #c9896f; background: #fdf4f1; }

/* ---- 📿 LE COLLIER DES BEAUX NOMS -------------------------------------------
   Le collier occupe toute la largeur, juste sous le bandeau : quatre-vingt-dix-
   neuf perles, une par nom de la liste ENTIÈRE — pas seulement du palier joué.
   Un enfant qui travaille les vingt premiers doit voir les quatre-vingt-dix-
   neuf : c'est ce qui donne la mesure du chemin. Une perle sur dix porte un
   anneau, pour qu'on se repère sans compter. */
.co-jeu { position: absolute; inset: 0; }
.co-collier {
  position: absolute; left: 20px; right: 20px; top: 112px; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.co-perle {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(90, 70, 30, .45);
  transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), background .35s, box-shadow .35s;
}
.co-perle.dizaine { border-color: #8a6a2f; border-width: 2px; }
.co-perle.hors { background: rgba(255, 255, 255, .25); border-style: dashed; border-color: rgba(90, 70, 30, .35); }
.co-perle.passee {
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--or));
  border-color: #a9791f; box-shadow: 0 0 8px rgba(240, 190, 70, .9);
}
.co-perle.ici { transform: scale(2); box-shadow: 0 0 16px rgba(255, 220, 120, .95); z-index: 2; }
/* Le collier de l'enfant, d'une séance à l'autre (solo connecté). Trois degrés,
   du nom à peine rencontré au nom bien su — et la lueur « passee » du tour en
   cours reste par-dessus. Placés après .hors : une perle gagnée au-delà du
   palier joué reste visible, pleine, même si le palier ne la propose pas. */
.co-perle.vue { background: #f6e3b0; border-style: solid; border-color: #c9a45a; }
.co-perle.sue {
  background: radial-gradient(circle at 35% 30%, #ffeab0, #e3b04b);
  border-style: solid; border-color: #a9791f;
}
.co-perle.maitrisee {
  background: radial-gradient(circle at 35% 30%, #fff6d6, var(--or));
  border: 2px solid #fff; box-shadow: 0 0 0 1px #a9791f, 0 0 9px rgba(240, 190, 70, .95);
}
/* La perle qu'on vient d'allumer pendant ce tour brille plus fort que tout :
   même si elle n'est encore que « vue » dans la mémoire, l'enfant doit la voir
   s'éclairer au moment où il répond juste. */
.co-perle.passee {
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--or));
  border-style: solid; border-color: #a9791f;
}

.co-consigne {
  position: absolute; left: 50%; top: 152px; transform: translateX(-50%);
  margin: 0; padding: 8px 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); font-family: var(--titre-mixte);
  font-weight: 600; font-size: 26px; color: var(--encre); white-space: nowrap;
}
.co-scene {
  position: absolute; left: 80px; right: 80px; top: 208px; height: 312px;
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center; align-content: center; gap: 28px 44px;
  text-align: center;
}
.co-scene.grand { height: 470px; }
/* A la revelation d'une enigme, les cartes s'effacent et la scene prend toute
   la place : l'image, le nom, et l'histoire en dessous. */
.co-scene.revele { height: 556px; }
.co-colonne {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-width: 0;
}
/* L'illustration : elle ne represente jamais Allah, elle montre la situation
   humaine ou le signe de la creation ou l'attribut se reconnait. */
.co-vignette {
  flex: none; width: 420px; margin: 0; border-radius: 28px; overflow: hidden;
  border: 7px solid #fff; box-shadow: 0 14px 34px rgba(20, 60, 90, .26);
  line-height: 0;
}
.co-vignette.vide { display: none; }
.co-vignette img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.co-scene.grand .co-vignette { width: 560px; }
/* Le rang se lit par-dessus les boiseries du mihrab : sans sa pastille il
   disparaissait dans le decor. */
.co-rang {
  margin: 0; padding: 3px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); font-family: var(--texte-mixte);
  font-size: 22px; font-variant-numeric: tabular-nums; color: #6b5324;
}
.co-rang:empty { display: none; }
/* Le décor de la madressah est chargé : sans cette plaque, un nom écrit en
   bleu se perd dans les boiseries du mihrâb. Elle n'apparaît que lorsqu'il y a
   quelque chose à lire — en mode « retrouve », on n'affiche rien avant la
   réponse, et c'est le haut-parleur qui occupe la place. */
.co-plaque {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  max-width: 100%; padding: 16px 54px; border-radius: 34px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 14px 34px rgba(20, 60, 90, .18);
}
.co-plaque.vide { display: none; }
.co-ar {
  margin: 0; font-family: var(--arabe); direction: rtl; line-height: 1.16;
  font-size: 108px; color: var(--encre);
}
.co-scene.grand .co-ar { font-size: 150px; }
.co-ar:empty { display: none; }
.co-translit { margin: 0; font-family: var(--titre-mixte); font-weight: 600; font-size: 42px; color: var(--encre); }
.co-scene.grand .co-translit { font-size: 56px; }
.co-translit:empty { display: none; }
.co-sens { margin: 0; font-family: var(--texte-mixte); font-size: 30px; color: #3b4a63; text-wrap: balance; }
.co-scene.grand .co-sens { font-size: 38px; }
.co-sens:empty { display: none; }

/* Mode « retrouve » : rien à lire, tout à écouter. */
.co-ecoute {
  display: none; width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); box-shadow: 0 14px 34px rgba(20, 60, 90, .18);
  font-size: 84px; line-height: 160px; text-align: center;
}
.co-ecoute.visible { display: block; animation: co-ecoute 1.6s ease-in-out infinite; }
@keyframes co-ecoute {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 34px rgba(20, 60, 90, .18); }
  50% { transform: scale(1.08); box-shadow: 0 14px 44px rgba(240, 190, 70, .55); }
}

/* Le compteur de chaîne du défi, juste au-dessus des cartes. */
.co-chaine {
  position: absolute; left: 50%; top: 492px; transform: translateX(-50%);
  margin: 0; padding: 5px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); font-family: var(--titre-mixte);
  font-weight: 600; font-size: 26px; color: #a9791f; white-space: nowrap;
}
.co-chaine.vide { display: none; }

.co-choix {
  position: absolute; left: 110px; right: 110px; top: 540px; height: 238px;
  display: flex; gap: 28px; justify-content: center; align-items: stretch;
}
.co-choix-carte {
  flex: 1 1 0; min-width: 0; padding: 18px 22px; border-radius: 26px;
  background: #fff; border: 4px solid var(--or); cursor: pointer;
  box-shadow: 0 12px 26px rgba(20, 90, 110, .22);
  display: flex; align-items: center; justify-content: center;
}
.co-choix-carte:hover { transform: translateY(-3px); }
.co-prop-ar { font-family: var(--arabe); direction: rtl; font-size: 72px; line-height: 1.3; color: var(--encre); }
.co-prop-sens { font-family: var(--titre-mixte); font-weight: 600; font-size: 30px; line-height: 1.2;
  color: var(--encre); text-align: center; text-wrap: balance; }
.co-choix-carte.juste { border-color: #39c27f; background: #effaf4; }
.co-choix-carte.rate { border-color: #ff7a6b; background: #fff1ef; animation: pl-secoue .45s ease-in-out; }
.co-choix-carte.bonne { border-color: #39c27f; box-shadow: 0 0 0 6px rgba(57, 194, 127, .28); }

/* Mode « quel nom dit cela ? » : la devinette occupe seule toute la scene.
   Ni le nom ni l'image ne paraissent tant qu'on n'a pas repondu — ils diraient
   la reponse. Ils arrivent ensuite, ensemble, et c'est la recompense. */
.co-enigme {
  max-width: 1120px; margin: 0; padding: 30px 56px; border-radius: 38px;
  background: rgba(255, 255, 255, .93); box-shadow: 0 16px 38px rgba(20, 60, 90, .2);
  font-family: var(--titre-mixte); font-weight: 600; font-size: 50px; line-height: 1.22;
  color: var(--encre); text-wrap: balance;
}
.co-enigme.vide { display: none; }

/* Une carte de ce mode porte un nom : la graphie, puis comment on le dit. */
.co-prop-nom { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.co-prop-nom-ar {
  font-family: var(--arabe); direction: rtl; font-size: 62px; line-height: 1.3; color: var(--encre);
}
.co-prop-nom-fr {
  font-family: var(--titre-mixte); font-weight: 600; font-size: 30px; color: #3b4a63;
}
/* A la revelation, les propositions reculent d'abord — le temps de voir
   laquelle etait la bonne — puis s'effacent tout a fait. */
.co-choix .co-choix-carte { transition: opacity .45s, transform .45s; }
.co-choix.recule .co-choix-carte:not(.juste):not(.rate):not(.bonne) {
  opacity: .28; transform: scale(.93);
}
.co-choix.efface { opacity: 0; pointer-events: none; transition: opacity .5s; }

/* La petite histoire : c'est elle qui fait tenir le nom en tete, bien plus que
   la traduction. Elle occupe toute la largeur, sous l'image et le nom. */
.co-histoire {
  flex: 1 0 100%; max-width: 1180px; margin: 0 auto; padding: 18px 44px;
  border-radius: 30px; background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 28px rgba(20, 60, 90, .16);
  font-family: var(--texte-mixte); font-size: 30px; line-height: 1.34;
  color: #2f3c52; text-wrap: pretty;
}
.co-histoire.vide { display: none; }

/* ---- 🕊️ QUI EST LE PROPHÈTE ? ---------------------------------------------
   En haut les images, en bas les noms. Rien n'est caché : ce qui est demandé
   n'est pas de se souvenir d'une position, mais de reconnaître une histoire.
   Aucun prophète n'est représenté sur ces images — et aucune personne. */
.pr-jeu { position: absolute; inset: 0; }
.pr-consigne {
  position: absolute; left: 50%; top: 112px; transform: translateX(-50%);
  margin: 0; padding: 8px 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); font-family: var(--titre-mixte);
  font-weight: 600; font-size: 26px; color: var(--encre); white-space: nowrap;
}
.pr-images {
  position: absolute; left: 60px; right: 60px; top: 178px; height: 330px;
  display: flex; gap: 26px; justify-content: center; align-items: center;
}
.pr-image {
  flex: 0 1 380px; min-width: 0; height: 100%; padding: 0; border: 7px solid #fff;
  border-radius: 28px; overflow: hidden; background: #fff; cursor: pointer;
  box-shadow: 0 14px 32px rgba(20, 60, 90, .26); line-height: 0;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pr-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-image:hover { transform: translateY(-4px); }
/* L'image choisie se détache nettement : un enfant doit voir ce qu'il tient. */
.pr-image.choisie {
  border-color: var(--or); transform: translateY(-8px) scale(1.03);
  box-shadow: 0 0 0 6px rgba(240, 190, 70, .45), 0 18px 38px rgba(20, 60, 90, .3);
}
.pr-image.trouve { border-color: #39c27f; opacity: .55; cursor: default; }
.pr-image.rate { animation: pl-secoue .45s ease-in-out; border-color: #ff7a6b; }

.pr-noms {
  position: absolute; left: 60px; right: 60px; top: 536px; height: 180px;
  display: flex; gap: 24px; justify-content: center; align-items: stretch;
}
.pr-nom {
  flex: 0 1 380px; min-width: 0; padding: 14px 20px; border-radius: 26px;
  background: #fff; border: 5px solid var(--or); cursor: pointer;
  box-shadow: 0 12px 26px rgba(20, 90, 110, .22);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform .18s, border-color .18s, background .18s, opacity .3s;
}
.pr-nom:hover { transform: translateY(-3px); }
.pr-nom-ar { font-family: var(--arabe); direction: rtl; font-size: 56px; line-height: 1.25; color: var(--encre); }
.pr-nom-fr { font-family: var(--titre-mixte); font-weight: 600; font-size: 34px; color: #3b4a63; }
.pr-nom.trouve { border-color: #39c27f; background: #effaf4; opacity: .55; cursor: default; }
.pr-nom.rate { border-color: #ff7a6b; background: #fff1ef; animation: pl-secoue .45s ease-in-out; }

/* La seconde où la paire se fait : les deux cartes bondissent ensemble et
   s'entourent de vert vif. Ensuite seulement elles s'effacent (.trouve). */
.pr-image.juste, .pr-nom.juste {
  opacity: 1; border-color: #39c27f;
  animation: pr-bond .55s cubic-bezier(.34, 1.5, .5, 1);
  box-shadow: 0 0 0 8px rgba(57, 194, 127, .4), 0 18px 38px rgba(20, 60, 90, .3);
}
@keyframes pr-bond {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ==================================================================
   🌿 LA SOUNNAH AU QUOTIDIEN — six jeux, cinq moteurs
   vf- vitesse · ev- envol · cm- chemin · gg- gorgées · sc- scènes
   (cm- et non ch- : ch- appartient déjà à la chasse aux lettres)
   ================================================================== */

/* `hidden` doit vraiment cacher : plusieurs de ces blocs posent un display
   (flex), qui l'emporterait sinon sur la règle [hidden] du navigateur. */
.vf-jeu [hidden], .ev-jeu [hidden], .cm-jeu [hidden], .gg-jeu [hidden], .sc-jeu [hidden] { display: none !important; }

.vf-jeu, .ev-jeu, .cm-jeu, .gg-jeu, .sc-jeu { position: absolute; inset: 0; overflow: hidden; }

/* La consigne, en pastille sous le bandeau — comme les autres jeux. Elle ne
   capte jamais le doigt : rien ne doit gêner un geste sur la scène. */
.vf-consigne, .ev-consigne, .cm-consigne, .gg-consigne {
  position: absolute; left: 50%; top: 112px; transform: translateX(-50%); z-index: 3;
  margin: 0; padding: 8px 26px; border-radius: 999px; max-width: 1180px;
  background: rgba(255, 255, 255, .92); font-family: var(--titre-mixte);
  font-weight: 600; font-size: 24px; color: var(--encre);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}

/* Les bulles de fête (série, étoile filante, verre parfait…) */
.vf-bulle, .cm-bulle, .gg-bulle, .sc-bulle {
  position: absolute; left: 50%; top: 230px; transform: translateX(-50%); z-index: 12;
  padding: 14px 36px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: linear-gradient(90deg, #ffb84d, #ff6f61); color: #fff;
  font-family: var(--titre); font-weight: 800; font-size: 44px;
  box-shadow: 0 14px 30px rgba(255, 111, 97, .4);
}
.vf-bulle.pop, .cm-bulle.pop, .gg-bulle.pop, .sc-bulle.pop { animation: sq-pop 1.3s cubic-bezier(.34, 1.5, .5, 1) forwards; }
@keyframes sq-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(.6); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.1); }
  30%  { transform: translateX(-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }
}

/* L'explication après une erreur : un encart crème bordé d'or */
.vf-explication, .gg-explication {
  position: absolute; left: 50%; top: 172px; transform: translateX(-50%); z-index: 9;
  width: 780px; margin: 0; padding: 20px 28px; border-radius: 24px;
  background: #fffbe9; border: 4px solid var(--or); box-shadow: var(--ombre);
  font-family: var(--titre-mixte); font-size: 28px; line-height: 1.35; color: var(--encre); text-align: center;
}
.vf-explication b { display: block; font-size: 32px; margin-bottom: 6px; }

/* ———————————————— ⚡ Vrai ou faux, à toute vitesse ———————————————— */
.vf-vitesse {
  position: absolute; right: 60px; top: 116px; z-index: 3; padding: 6px 18px; border-radius: 999px;
  background: #fff; box-shadow: var(--ombre); font-family: var(--titre); font-weight: 700; font-size: 26px;
  color: #3b4a63; transition: color .3s, transform .3s;
}
.vf-vitesse.vite { color: #ff6f3c; transform: scale(1.1); }
.vf-sol {
  position: absolute; left: 0; right: 0; top: 802px; bottom: 0; pointer-events: none;
  border-top: 5px dashed rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .1));
}
.vf-porte {
  position: absolute; top: 300px; width: 330px; height: 500px; border: none; cursor: pointer; z-index: 1;
  border-radius: 180px 180px 26px 26px; color: #fff; font-family: var(--titre);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  box-shadow: 0 18px 40px rgba(20, 60, 90, .3), inset 0 -12px 0 rgba(0, 0, 0, .12);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.vf-porte.faux { left: 56px; background: linear-gradient(180deg, #ff8f80, #e8505b); }
.vf-porte.vrai { right: 56px; background: linear-gradient(180deg, #74e3ab, #2fae6c); }
.vf-porte-ico { font-size: 96px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.vf-porte-nom { font-size: 58px; font-weight: 800; text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.vf-porte.vise { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255, 255, 255, .75), 0 22px 46px rgba(20, 60, 90, .34); }
.vf-porte.juste { animation: vf-porte-juste .7s cubic-bezier(.34, 1.5, .5, 1); }
.vf-porte.rate { animation: pl-secoue .45s ease-in-out; filter: saturate(.55) brightness(.92); }
@keyframes vf-porte-juste {
  0% { transform: scale(1); }
  40% { transform: scale(1.13); box-shadow: 0 0 0 18px rgba(255, 236, 150, .85), 0 22px 46px rgba(20, 60, 90, .34); }
  100% { transform: scale(1); }
}
.vf-piste { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; pointer-events: none; z-index: 2; }
/* Deux étages : le cadre porte la position (il tombe, il glisse), le corps
   porte l'allure (il tremble, il rougit). */
.vf-carte { position: absolute; left: 450px; top: 0; width: 700px; pointer-events: auto; touch-action: none; cursor: grab; will-change: transform; }
.vf-corps {
  min-height: 150px; padding: 26px 34px; border-radius: 28px; background: #fff; border: 6px solid var(--or);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 36px rgba(20, 60, 90, .28); transition: border-color .3s, background .3s, box-shadow .2s;
}
.vf-corps.tenue { cursor: grabbing; box-shadow: 0 24px 50px rgba(20, 60, 90, .38); }
.vf-corps.presque { border-color: #ff9f43; }
.vf-corps.rate { border-color: #ff6f61; background: #fff1ef; animation: pl-secoue .45s ease-in-out; }
.vf-corps.echoue { border-color: #ff6f61; background: #fff1ef; opacity: .82; }
.vf-texte { margin: 0; font-family: var(--titre-mixte); font-weight: 600; font-size: 38px; line-height: 1.3; color: var(--encre); text-align: center; text-wrap: balance; }
.vf-tard { display: block; font-family: var(--titre); font-weight: 800; font-size: 30px; color: #e8505b; margin-bottom: 4px; }

/* ———————————————— 🕊️ La douʿâ qui s'envole ———————————————— */
.ev-nid {
  position: absolute; left: 60px; right: 60px; top: 166px; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ev-nom { margin: 0; padding: 4px 22px; border-radius: 999px; background: rgba(255, 255, 255, .88); font-family: var(--titre); font-weight: 700; font-size: 26px; color: #3b4a63; }
.ev-nom:empty { display: none; }
/* direction: rtl — la PREMIÈRE case est à droite : on lit l'arabe de droite à gauche */
.ev-ligne {
  direction: rtl; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1440px;
  min-height: 96px; padding: 14px 22px; border-radius: 30px;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 2px 8px rgba(40, 70, 140, .15);
}
.ev-ligne:empty { display: none; }
.ev-case {
  min-width: 120px; height: 86px; padding: 0 18px; border-radius: 20px;
  border: 4px dashed rgba(59, 74, 99, .35); background: rgba(255, 255, 255, .4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--arabe); font-size: 52px; line-height: 1; color: var(--encre);
}
.ev-case.pleine { border: 4px solid var(--or); background: #fff; box-shadow: 0 8px 18px rgba(20, 60, 90, .18); }
.ev-case.revient { animation: pr-bond .55s cubic-bezier(.34, 1.5, .5, 1); }
.ev-ligne.entiere { animation: ev-entiere 1.6s ease-in-out; }
@keyframes ev-entiere {
  0%, 100% { box-shadow: inset 0 2px 8px rgba(40, 70, 140, .15); }
  30%, 70% { box-shadow: 0 0 0 10px rgba(255, 214, 90, .75), 0 0 46px rgba(255, 214, 90, .85); }
}
.ev-sens {
  margin: 0; max-width: 1100px; padding: 12px 26px; border-radius: 22px; text-align: center;
  background: #fffbe9; border: 4px solid var(--or); display: flex; flex-direction: column; gap: 4px;
  font-family: var(--titre-mixte); font-size: 26px; color: var(--encre);
}
.ev-tr { font-style: italic; color: #5b6a86; font-size: 24px; }
.ev-fr { font-weight: 600; }
.ev-parfait { font-family: var(--titre); color: #e09a12; font-size: 28px; }
.ev-ciel { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ev-oiseau {
  position: absolute; left: 0; top: 0; pointer-events: auto; border: none; background: transparent; padding: 0;
  display: flex; align-items: center; cursor: pointer; will-change: transform; touch-action: manipulation;
}
.ev-mot {
  position: relative; z-index: 1; padding: 10px 24px; border-radius: 999px; white-space: nowrap;
  background: #fff; border: 5px solid #7ec8ff; box-shadow: 0 12px 26px rgba(20, 60, 90, .25);
  font-family: var(--arabe); font-size: 52px; line-height: 1.1; color: var(--encre);
}
.ev-aile {
  width: 48px; height: 30px; margin: 0 -14px; border: 3px solid #7ec8ff;
  background: linear-gradient(180deg, #fff, #d6ecff); border-radius: 50% 50% 10% 50%;
  transform-origin: right center; animation: ev-bat .32s ease-in-out infinite alternate;
}
.ev-aile.d { border-radius: 50% 50% 50% 10%; transform-origin: left center; animation-name: ev-bat-d; animation-delay: .16s; }
@keyframes ev-bat   { from { transform: rotate(18deg) scaleY(.7); }  to { transform: rotate(-26deg) scaleY(1); } }
@keyframes ev-bat-d { from { transform: rotate(-18deg) scaleY(.7); } to { transform: rotate(26deg) scaleY(1); } }
.ev-oiseau.aide .ev-mot {
  border-color: var(--or); animation: pl-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 0 8px rgba(255, 214, 90, .65), 0 12px 26px rgba(20, 60, 90, .25);
}
.ev-oiseau.ebroue .ev-mot { animation: pl-secoue .45s ease-in-out; border-color: #ff7a6b; }
.ev-oiseau.pose .ev-aile { animation-play-state: paused; }

/* ———————————————— 🎲 Le chemin des étoiles ———————————————— */
.cm-hud {
  position: absolute; left: 40px; right: 40px; top: 22px; z-index: 6;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px;
}
.cm-equipe {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 26px 8px 8px;
  background: #fff; border-radius: 999px; border: 4px solid var(--bleu); box-shadow: var(--ombre);
  font-family: var(--titre); font-weight: 600; font-size: 32px; transition: transform .2s, box-shadow .2s;
}
.cm-equipe.b { flex-direction: row-reverse; padding: 8px 8px 8px 26px; }
.cm-equipe.f { border-color: var(--rose); }
.cm-equipe.f .pl-initiale { background: var(--rose); }
.cm-equipe.actif { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255, 214, 90, .75), var(--ombre); }
.cm-pts { min-width: 64px; text-align: center; color: #e09a12; font-weight: 800; }
.cm-equipe.gagne .cm-pts { animation: pr-bond .55s cubic-bezier(.34, 1.5, .5, 1); }

.cm-plateau, .cm-pions { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; pointer-events: none; }
.cm-pions { z-index: 2; }
.cm-route { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; }
.cm-route polyline {
  fill: none; stroke: rgba(255, 236, 170, .95); stroke-width: 16;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 26;
  filter: drop-shadow(0 3px 4px rgba(80, 50, 0, .35));
}
.cm-case {
  position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e8f1ff); border: 5px solid #9cc4ff;
  box-shadow: 0 8px 16px rgba(20, 60, 90, .25); display: flex; align-items: center; justify-content: center;
}
.cm-num { font-family: var(--titre); font-weight: 800; font-size: 34px; color: #3b4a63; }
.cm-case.etoile  { border-color: #ffc83d; background: radial-gradient(circle at 35% 30%, #fffbe6, #ffe28a); }
.cm-case.mission { border-color: #ff5fa2; background: radial-gradient(circle at 35% 30%, #fff0f7, #ffc3df); }
.cm-case.depart  { border-color: #5fd39a; background: radial-gradient(circle at 35% 30%, #effff6, #b8f0d2); }
.cm-case.etoile .cm-num, .cm-case.mission .cm-num, .cm-case.depart .cm-num { font-size: 46px; }
.cm-case.arrivee {
  width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 7px solid #ffc83d;
  background: radial-gradient(circle at 40% 35%, #fffbe6, #ffd34d);
  box-shadow: 0 0 0 10px rgba(255, 214, 90, .35), 0 12px 26px rgba(160, 110, 0, .35);
  animation: pl-pulse 2.2s ease-in-out infinite;
}
.cm-case.arrivee .cm-num { font-size: 78px; }
.cm-case.foulee { animation: cm-foulee .5s ease-out; }
@keyframes cm-foulee { from { box-shadow: 0 0 0 0 rgba(255, 214, 90, .95); } to { box-shadow: 0 0 0 24px rgba(255, 214, 90, 0); } }
.cm-case.atteinte { animation: cm-atteinte 1.2s ease-in-out infinite; }
@keyframes cm-atteinte { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.16) rotate(8deg); } }

/* Le pion : une goutte dont la pointe se pose sur la case. Le cadre se
   déplace, le corps saute — la forme elle-même est un ::before tourné. */
.cm-pion { position: absolute; left: 0; top: 0; will-change: transform; }
.cm-pion-corps { position: relative; width: 74px; height: 74px; margin: -37px 0 0 -37px; display: flex; align-items: center; justify-content: center; }
.cm-pion-corps::before {
  content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg);
  background: var(--bleu); border: 5px solid #fff; box-shadow: 0 10px 18px rgba(20, 40, 90, .4);
}
.cm-pion.f .cm-pion-corps::before { background: var(--rose); }
.cm-pion.actif .cm-pion-corps::before { box-shadow: 0 0 0 8px rgba(255, 214, 90, .8), 0 10px 18px rgba(20, 40, 90, .4); }
.cm-pion .cm-pion-corps .pl-initiale {
  position: relative; z-index: 1; width: auto; height: auto; min-width: 0;
  background: none; box-shadow: none; border: none; color: #fff; font-size: 34px;
}
.cm-pion-corps.saute { animation: cm-saute .27s ease-out; }
@keyframes cm-saute { 0% { transform: translateY(0); } 50% { transform: translateY(-34px) scale(1.08); } 100% { transform: translateY(0); } }

.cm-commande { position: absolute; left: 0; right: 0; top: 672px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 40px; }
.cm-tour {
  margin: 0; padding: 12px 30px; border-radius: 999px; background: #fff; border: 4px solid var(--bleu);
  box-shadow: var(--ombre); font-family: var(--titre); font-weight: 700; font-size: 34px; color: var(--encre);
}
.cm-tour.f { border-color: var(--rose); }
.cm-tour:empty { display: none; }
.cm-de {
  width: 168px; height: 168px; padding: 22px; border: none; border-radius: 34px; cursor: pointer;
  background: linear-gradient(145deg, #fff, #e9eef8);
  box-shadow: 0 14px 0 #c3cde0, 0 22px 34px rgba(20, 60, 90, .3); transition: transform .15s, box-shadow .15s;
}
.cm-de:disabled { cursor: default; }
.cm-de:active:not(:disabled) { transform: translateY(8px); box-shadow: 0 6px 0 #c3cde0, 0 12px 20px rgba(20, 60, 90, .3); }
.cm-de.invite { animation: cm-invite 1.4s ease-in-out infinite; box-shadow: 0 14px 0 #c3cde0, 0 0 0 10px rgba(255, 214, 90, .6), 0 22px 34px rgba(20, 60, 90, .3); }
@keyframes cm-invite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cm-de.roule { animation: cm-roule .9s cubic-bezier(.3, .7, .4, 1); }
@keyframes cm-roule {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(200deg) scale(1.14) translateY(-34px); }
  70% { transform: rotate(520deg) scale(1.05); }
  100% { transform: rotate(720deg) scale(1); }
}
.cm-de-face { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; }
.cm-point { width: 28px; height: 28px; align-self: center; justify-self: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5a78, #1f2a44); }
.cm-point.vide { visibility: hidden; }

.cm-question, .cm-mission {
  position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 30, 60, .4); backdrop-filter: blur(3px);
}
.cm-mission { z-index: 9; background: rgba(60, 10, 40, .42); }
.cm-question.part { animation: sq-fondu .28s ease-in forwards; }
@keyframes sq-fondu { to { opacity: 0; } }
.cm-q-carte {
  width: 1100px; padding: 30px 40px 34px; border-radius: 34px; background: #fff; border: 7px solid var(--or);
  box-shadow: 0 30px 70px rgba(10, 20, 50, .45); animation: pr-bond .45s cubic-bezier(.34, 1.5, .5, 1);
}
.cm-q-de { margin: 0 0 6px; text-align: center; font-family: var(--titre); font-weight: 700; font-size: 26px; color: #e09a12; }
.cm-q-texte { margin: 0 0 22px; text-align: center; text-wrap: balance; font-family: var(--titre-mixte); font-weight: 600; font-size: 40px; line-height: 1.3; color: var(--encre); }
.cm-q-choix { display: flex; flex-direction: column; gap: 14px; }
.cm-q-btn {
  padding: 16px 26px; border-radius: 22px; border: 5px solid #9cc4ff; background: #f4f8ff; cursor: pointer; text-align: left;
  font-family: var(--titre-mixte); font-weight: 600; font-size: 32px; color: var(--encre);
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s;
}
.cm-q-btn:hover:not(:disabled) { transform: translateX(6px); }
.cm-q-btn.pl-lu { border-color: var(--or); background: #fffbe9; box-shadow: 0 0 0 6px rgba(255, 214, 90, .45); }
.cm-q-btn.bonne { border-color: #39c27f; background: #effaf4; }
.cm-q-btn.mauvaise { border-color: #ff7a6b; background: #fff1ef; }
.cm-q-btn.secoue { animation: pl-secoue .45s ease-in-out; }
.cm-q-explication { margin: 16px 0 0; min-height: 1.2em; text-align: center; font-family: var(--titre-mixte); font-size: 28px; line-height: 1.35; color: #3b4a63; }
.cm-m-carte {
  width: 1000px; padding: 34px 44px; border-radius: 34px; text-align: center;
  background: linear-gradient(180deg, #fff, #fff0f7); border: 7px solid #ff5fa2;
  box-shadow: 0 30px 70px rgba(60, 10, 40, .45); animation: pr-bond .5s cubic-bezier(.34, 1.5, .5, 1);
}
.cm-m-qui { margin: 0; font-family: var(--titre); font-weight: 800; font-size: 38px; color: #e0337f; }
.cm-m-texte { margin: 16px 0 22px; text-wrap: balance; font-family: var(--titre-mixte); font-weight: 600; font-size: 42px; line-height: 1.3; color: var(--encre); }
.cm-m-aide { margin: 0 0 12px; font-family: var(--titre-mixte); font-size: 24px; color: #7a6a80; }
.cm-m-boutons { display: flex; gap: 24px; justify-content: center; }
.cm-m-btn { padding: 16px 36px; border-radius: 999px; border: none; cursor: pointer; box-shadow: var(--ombre); font-family: var(--titre); font-weight: 700; font-size: 32px; }
.cm-m-btn.oui { background: linear-gradient(180deg, #74e3ab, #2fae6c); color: #fff; }
.cm-m-btn.non { background: #fff; color: #7a6a80; border: 4px solid #e6d3df; }
.cm-bulle { top: 420px; }

/* ———————————————— 🥛 Les trois gorgées ———————————————— */
.gg-table { position: absolute; left: 0; right: 0; top: 700px; bottom: 0; background: linear-gradient(180deg, #c98a4b, #a86a33); box-shadow: inset 0 10px 0 rgba(255, 255, 255, .18); }
.gg-verre {
  position: absolute; left: 680px; top: 340px; width: 240px; height: 360px; z-index: 2; cursor: pointer; touch-action: none;
  transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1);
}
.gg-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 18px rgba(20, 60, 90, .28)); transition: filter .4s; }
.gg-fond-verre { fill: rgba(255, 255, 255, .38); }
.gg-contour { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 6; }
.gg-reflet { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 8; stroke-linecap: round; }
.gg-eau { transform-box: fill-box; transform-origin: 50% 100%; }
.gg-verre.actif .gg-svg { filter: drop-shadow(0 0 16px rgba(255, 214, 90, .9)) drop-shadow(0 14px 18px rgba(20, 60, 90, .28)); }
.gg-verre.leve { transform: translateY(-50px) rotate(-5deg); }
.gg-verre.boit { transform: translateY(-92px) rotate(-18deg); }
.gg-verre.pose-gauche { transform: translateX(-210px) rotate(-4deg); }
/* Soufflé dedans : l'eau se trouble */
.gg-verre.trouble .gg-svg { filter: sepia(.6) hue-rotate(-25deg) saturate(.7) brightness(.95) drop-shadow(0 14px 18px rgba(20, 60, 90, .28)); }
.gg-bulles { position: absolute; inset: 10% 15% 5%; pointer-events: none; overflow: hidden; border-radius: 0 0 32px 32px; }
/* (gg-air et non gg-bulle : gg-bulle est la bulle de fête) */
.gg-air { position: absolute; bottom: 0; width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .35); animation: gg-monte var(--t, 1s) ease-in forwards; }
@keyframes gg-monte { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-300px) scale(1.2); opacity: 0; } }
.gg-verse { position: absolute; left: 780px; top: 110px; width: 40px; height: 0; border-radius: 20px; opacity: 0; z-index: 3; background: linear-gradient(180deg, rgba(150, 210, 255, 0), #7cc6f5); }
.gg-verse.coule { animation: gg-coule .95s ease-in-out; }
@keyframes gg-coule {
  0% { height: 0; opacity: 0; }
  20% { height: 260px; opacity: .9; }
  75% { height: 260px; top: 110px; opacity: .9; }
  100% { height: 0; top: 370px; opacity: 0; }
}
.gg-jauge { position: absolute; left: 640px; top: 262px; width: 320px; height: 24px; border-radius: 999px; overflow: hidden; opacity: 0; transition: opacity .2s; background: rgba(255, 255, 255, .7); box-shadow: inset 0 2px 5px rgba(40, 70, 140, .2); z-index: 3; }
.gg-jauge.remplit { opacity: 1; }
.gg-jauge-plein { width: 100%; height: 100%; border-radius: 999px; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #5fd39a, #3fb6ff); }
.gg-jauge.rouge .gg-jauge-plein { background: linear-gradient(90deg, #ffb84d, #ff6f61); }
.gg-souffle { position: absolute; left: 980px; top: 330px; width: 220px; height: 130px; pointer-events: none; z-index: 3; }
.gg-souffle span { position: absolute; left: 0; top: 40%; width: 64px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .9); opacity: 0; }
.gg-souffle span:nth-child(2) { top: 18%; width: 46px; }
.gg-souffle span:nth-child(3) { top: 64%; width: 38px; }
.gg-souffle.vu span { animation: gg-souffle 1.1s ease-out forwards; }
.gg-souffle.vu span:nth-child(2) { animation-delay: .1s; }
.gg-souffle.vu span:nth-child(3) { animation-delay: .2s; }
@keyframes gg-souffle { 0% { opacity: 0; transform: translateX(0) scale(.6); } 30% { opacity: .95; } 100% { opacity: 0; transform: translateX(160px) scale(1.4); } }
.gg-points { position: absolute; left: 0; right: 0; top: 728px; z-index: 2; display: flex; justify-content: center; gap: 22px; }
.gg-point { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, .35); box-shadow: var(--ombre); transition: background .3s, transform .3s; }
.gg-point.bu { background: #5aaee6; transform: scale(1.14); }
.gg-formule {
  position: absolute; left: 50%; top: 186px; transform: translateX(-50%); z-index: 4; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 46px;
  border-radius: 34px; border: 6px solid var(--or); background: #fff; box-shadow: 0 16px 34px rgba(20, 60, 90, .28);
  animation: gg-appel 1.6s ease-in-out infinite;
}
@keyframes gg-appel { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
.gg-formule.merci { border-color: #39c27f; }
.gg-formule.eclat { animation: gg-eclat .55s cubic-bezier(.34, 1.5, .5, 1); }
@keyframes gg-eclat { 0% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.15); } 100% { transform: translateX(-50%) scale(1); } }
.gg-f-ar { font-family: var(--arabe); font-size: 64px; line-height: 1.2; color: var(--encre); direction: rtl; }
.gg-f-fr { font-family: var(--titre); font-weight: 700; font-size: 30px; color: #3b4a63; }
.gg-mains { position: absolute; left: 0; right: 0; top: 410px; z-index: 4; display: flex; justify-content: space-between; padding: 0 150px; pointer-events: none; }
.gg-main {
  pointer-events: auto; width: 300px; height: 250px; border-radius: 40px; border: 6px solid #9cc4ff; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--titre); font-weight: 700; font-size: 34px; color: var(--encre);
  box-shadow: 0 16px 34px rgba(20, 60, 90, .26); transition: transform .15s, border-color .2s;
}
.gg-main:hover { transform: translateY(-4px); }
.gg-main-ico { display: inline-block; font-size: 110px; line-height: 1; }
.gg-main.gauche .gg-main-ico { transform: scaleX(-1); }
.gg-main.eclat { border-color: #39c27f; animation: pr-bond .55s cubic-bezier(.34, 1.5, .5, 1); }
.gg-main.secoue { border-color: #ff7a6b; animation: pl-secoue .45s ease-in-out; }
.gg-respire {
  position: absolute; left: 1010px; top: 320px; z-index: 4; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 30px;
  border-radius: 36px; border: 6px solid #7ec8ff; background: linear-gradient(180deg, #fff, #e8f6ff);
  box-shadow: 0 16px 34px rgba(20, 60, 90, .26); animation: pl-pulse 1.5s ease-in-out infinite;
  font-family: var(--titre); font-weight: 700; font-size: 30px; color: var(--encre);
}
.gg-respire-ico { font-size: 84px; line-height: 1; }

/* ———————————————— 🍽️ 🌙 Les scènes ———————————————— */
.sc-fond { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* La nuit : un voile bleu nuit qui s'ouvre en cercle autour de la lampe */
.sc-nuit {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 200, 120, 0) 0, rgba(255, 200, 120, 0) 4%, rgba(18, 22, 64, .6) 15%, rgba(8, 12, 40, 1) 40%);
}
.sc-etoiles, .sc-effets { position: absolute; inset: 0; pointer-events: none; }
.sc-effets { z-index: 4; }
.sc-etoile {
  position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: #fffbe0; box-shadow: 0 0 6px 2px rgba(255, 248, 200, .75);
  animation: sc-apparait .9s ease-out both, sc-scintille var(--t, 2.4s) ease-in-out infinite;
}
@keyframes sc-apparait { from { transform: scale(0); } to { transform: scale(var(--s, 1)); } }
@keyframes sc-scintille { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.sc-zones { position: absolute; inset: 0; z-index: 2; }
.sc-zone {
  position: absolute; border-radius: 50%; border: none; background: transparent; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: box-shadow .3s;
}
.sc-zone:focus-visible { outline: 5px dashed rgba(255, 255, 255, .95); outline-offset: -6px; }
.sc-zone.aide { box-shadow: 0 0 0 6px rgba(255, 214, 90, .95), 0 0 40px 12px rgba(255, 214, 90, .7); animation: pl-pulse 1.1s ease-in-out infinite; }
.sc-zone.faite { box-shadow: 0 0 0 6px rgba(57, 194, 127, .95), 0 0 36px 10px rgba(57, 194, 127, .6); }
.sc-anneau { position: absolute; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 8px solid var(--or); animation: sc-anneau 1s ease-out forwards; }
.sc-anneau.rate { border-color: #ff7a6b; }
@keyframes sc-anneau { from { transform: scale(.4); opacity: 1; } to { transform: scale(6); opacity: 0; } }
.sc-etincelle { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #ffd34d; box-shadow: 0 0 10px #ffd34d; animation: sc-etincelle .85s ease-out forwards; }
@keyframes sc-etincelle { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.sc-nom {
  position: absolute; transform: translate(-50%, -100%); padding: 8px 18px; border-radius: 999px; white-space: nowrap;
  background: #fff; border: 4px solid #ff7a6b; box-shadow: var(--ombre);
  font-family: var(--titre-mixte); font-weight: 700; font-size: 26px; color: var(--encre);
  animation: sc-nom 1.6s ease-out forwards;
}
@keyframes sc-nom { 0% { opacity: 0; transform: translate(-50%, -80%); } 15% { opacity: 1; transform: translate(-50%, -100%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -130%); } }
.sc-entete { position: absolute; left: 50%; top: 112px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 14px; max-width: 1340px; pointer-events: none; }
.sc-question { margin: 0; padding: 12px 30px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: var(--ombre); text-wrap: balance; font-family: var(--titre-mixte); font-weight: 700; font-size: 32px; color: var(--encre); }
.sc-question:empty { display: none; }
.sc-question.arrive { animation: pr-bond .5s cubic-bezier(.34, 1.5, .5, 1); }
.sc-progres { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .88); font-family: var(--titre); font-weight: 700; font-size: 24px; color: #5b6a86; white-space: nowrap; }
.sc-progres:empty { display: none; }
.sc-explication {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  width: 920px; margin: 0; padding: 18px 28px; border-radius: 24px; text-align: center;
  background: #fffbe9; border: 4px solid var(--or); box-shadow: var(--ombre);
  font-family: var(--titre-mixte); font-size: 30px; line-height: 1.35; color: var(--encre);
}
.sc-bulle { top: 300px; }

/* ———————————————— Écran sobre, et mouvements réduits ————————————————
   Un tableau de 75 pouces piloté par un petit ordinateur : on coupe ce qui
   coûte cher à redessiner sans rien enlever au jeu. */
.pl-sobre .ev-aile, .pl-sobre .cm-case.arrivee, .pl-sobre .gg-respire, .pl-sobre .cm-de.invite { animation: none; }
.pl-sobre .gg-formule { animation: none; }
.pl-sobre .sc-etoile { animation: none; }
.pl-sobre .sc-nuit { mix-blend-mode: normal; }
.pl-sobre .cm-question, .pl-sobre .cm-mission { backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
  .ev-aile, .cm-case.arrivee, .gg-respire, .gg-formule, .cm-de.invite, .sc-etoile, .sc-zone.aide, .ev-oiseau.aide .ev-mot { animation: none; }
}

/* ———————— Le geste trouvé, en grand (scènes) ————————
   Une fenêtre s'ouvre sur l'image du geste que l'enfant vient de trouver,
   pendant que la voix l'explique. Toucher la fenêtre la referme. */
.sc-geste {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 16, 46, .55); backdrop-filter: blur(4px); cursor: pointer;
  animation: sq-apparait .3s ease-out;
}
@keyframes sq-apparait { from { opacity: 0; } to { opacity: 1; } }
.sc-geste.ferme { animation: sq-fondu .32s ease-in forwards; }
.sc-geste-carte {
  margin: 0; width: 1060px; padding: 16px 16px 20px; border-radius: 36px;
  background: #fffbe9; border: 7px solid var(--or);
  box-shadow: 0 0 0 10px rgba(255, 214, 90, .3), 0 34px 80px rgba(5, 10, 35, .55);
  animation: pr-bond .55s cubic-bezier(.34, 1.5, .5, 1);
}
.sc-geste-carte img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; }
.sc-geste-carte figcaption {
  margin: 16px 18px 2px; text-align: center; text-wrap: balance;
  font-family: var(--titre-mixte); font-weight: 600; font-size: 34px; line-height: 1.3; color: var(--encre);
}
.pl-sobre .sc-geste { backdrop-filter: none; }