/* Panique à Sainte-Chandelle : style kitsch (velours, dorures, bonbons roses) */

@font-face { font-family: 'Andika'; src: url('assets/polices/Andika-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('assets/polices/Andika-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Creepster'; src: url('assets/polices/Creepster-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Mountains of Christmas'; src: url('assets/polices/MountainsofChristmas-Bold.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Playwrite FR'; src: url('assets/polices/PlaywriteFRModerne-Regular.woff2') format('woff2'); font-display: swap; }

:root {
  --nuit: #1b0622;
  --velours: #3a0d47;
  --prune: #2a0b33;
  --rose: #ff4fa3;
  --rose-fonce: #c81d68;
  --or: #ffd36a;
  --or-fonce: #b8862b;
  --menthe: #3fd6a0;
  --rouge: #e0213b;
  --creme: #fff8ec;
  --encre: #3a1830;
  --ombre: 0 6px 18px rgba(10, 0, 20, .45);
  --titre: 'Creepster', 'Andika', fantasy;
  --texte: 'Andika', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--nuit);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 79, 163, .18), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(255, 211, 106, .12), transparent 45%);
  color: var(--creme);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }
.cache { visibility: hidden; }

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#ecran { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }

/* ------------------------------------------------------------ boutons */

.bouton {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 18px;
  border: 3px solid var(--or);
  background: linear-gradient(180deg, #ff7cbf 0%, #e32a7c 55%, #c81d68 100%);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(80, 0, 30, .55);
  box-shadow: 0 4px 0 #85103f, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 #85103f, 0 3px 8px rgba(0, 0, 0, .35); }
.bouton:disabled { filter: grayscale(.85) opacity(.55); pointer-events: none; }
.bouton:focus-visible, .zone:focus-visible, .canard:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bouton.gros { font-size: 20px; min-height: 58px; }
.bouton.secondaire {
  background: linear-gradient(180deg, #9a6ef0 0%, #6a3cc4 60%, #4e2a9c 100%);
  box-shadow: 0 4px 0 #2c1460, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.bouton.lien {
  background: none; border: 0; box-shadow: none; min-height: 44px;
  color: var(--or); text-decoration: underline; text-underline-offset: 4px; font-weight: 700; text-shadow: none;
}
.bouton-rond {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--or-fonce); background: #fff1d6; color: var(--encre); font-size: 20px; font-weight: 700;
}
.bouton-voix {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--or-fonce); background: #fff1d6; font-size: 20px;
}

/* ------------------------------------------------------------ bandeau du haut */

#hud {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 6px) 10px 6px;
  background: linear-gradient(180deg, rgba(42, 11, 51, .98), rgba(42, 11, 51, .88));
  border-bottom: 2px solid rgba(255, 211, 106, .55);
  z-index: 5;
}
.hud-vies { display: flex; gap: 2px; }
.coeur svg { width: 30px; height: 30px; display: block; fill: var(--rose); filter: drop-shadow(0 0 5px rgba(255, 79, 163, .8)); }
.coeur.vide svg { fill: rgba(255, 255, 255, .16); filter: none; }
.coeur.casse { animation: casse .9s ease; }
@keyframes casse { 0% { transform: scale(1.6) rotate(0); } 30% { transform: scale(1.3) rotate(-18deg); } 60% { transform: scale(1.1) rotate(14deg); } 100% { transform: none; } }
.hud-etape { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--or); text-align: center; line-height: 1.15; }
.hud-niveau { display: block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; opacity: .8; }
.hud-niveau:empty { display: none; }
.hud-barre { height: 6px; margin-top: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.hud-barre > div { height: 100%; background: linear-gradient(90deg, var(--rose), var(--or)); transition: width .6s ease; }
.hud-bouton {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--or); background: radial-gradient(circle at 35% 30%, #6b2a80, var(--velours));
  font-size: 22px; display: grid; place-items: center; padding: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.hud-chat img { width: 40px; height: 40px; object-fit: contain; }
.hud-bouton.saute { animation: saute .6s ease; }
@keyframes saute { 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.95); } }
.pastille {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--menthe); color: #053; font-size: 13px; font-weight: 700; line-height: 20px;
}
.pastille:empty { display: none; }

/* ------------------------------------------------------------ scène : image + dialogue */

.scene { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; animation: entree .45s ease; }
@keyframes entree { from { opacity: 0; } to { opacity: 1; } }

.scene-image {
  flex: 1 1 auto;
  min-height: 220px;
  margin-bottom: -48px;                /* le dialogue recouvre le bas, calme, de l'image */
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  overflow: hidden;
  overflow: clip;                      /* ne défile jamais, même quand un bouton de mini-jeu prend le focus */
  container-type: size;
}
.scene-image::before {
  content: ''; position: absolute; inset: -30px;
  background: var(--fond) center / cover;
  filter: blur(18px) brightness(.4) saturate(1.3);
}
.panneau {
  --pw: min(100cqw, 100cqh * 2 / 3);   /* largeur du panneau, pour les calques des mini-jeux */
  position: relative;
  width: var(--pw);
  aspect-ratio: 2 / 3;
  box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}
.panneau-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1.4s ease; }
.calque-zones { position: absolute; inset: 0; }

.dialogue {
  flex: none;
  position: relative;
  z-index: 2;
  max-height: 50%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--creme) 0%, #ffeccc 100%);
  color: var(--encre);
  border-radius: 26px 26px 0 0;
  border-top: 4px solid var(--or);
  box-shadow: 0 -10px 26px rgba(10, 0, 20, .55), inset 0 0 0 2px rgba(184, 134, 43, .35);
}
.dialogue-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dialogue-tete h2 {
  flex: 1; margin: 0;
  font-family: var(--titre); font-weight: 400; font-size: 27px; letter-spacing: .5px; line-height: 1.1;
  color: var(--rose-fonce); text-shadow: 0 2px 0 #ffd0e6;
}
.dialogue-perso {
  flex: none; width: 62px; height: 62px; object-fit: contain;
  margin-top: -34px;
  border-radius: 50%; border: 3px solid var(--or); background: radial-gradient(circle, #ffe5f2, #ffb3d6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.textes p { margin: .3em 0; font-size: 17.5px; line-height: 1.35; }
.textes .question {
  margin: .6em 0; padding: 10px 14px; border-radius: 16px;
  background: #ffe1f0; border: 2px dashed var(--rose); font-weight: 700; font-size: 19px;
}
.liste-choix { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.bouton.choix { justify-content: flex-start; text-align: left; min-height: 50px; font-size: 17.5px; }
.dialogue.a-suivre::after {
  content: '▼'; position: sticky; bottom: -6px; display: block; margin: -30px -6px 0 auto; width: 32px; height: 32px;
  border-radius: 50%; background: var(--rose); color: #fff; font-size: 14px; line-height: 32px; text-align: center;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); pointer-events: none;
  animation: suivre 1s ease-in-out infinite;
}
@keyframes suivre { 50% { transform: translateY(-4px); } }
.scene.sequence .dialogue { display: none; }
.scene.sequence .scene-image { margin-bottom: 0; align-items: center; }
.bouton.choix.avec-objet {
  background: linear-gradient(180deg, #6ff0c2 0%, #26b886 60%, #138a66 100%);
  box-shadow: 0 4px 0 #0b5a42, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .35);
  text-shadow: 0 1px 0 rgba(0, 60, 40, .6);
}
.bouton.choix img { width: 38px; height: 38px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.sous-question { margin: 4px 0 0; font-weight: 700; }

/* zones à fouiller sur l'image */
.zone { position: absolute; padding: 0; border: 0; background: transparent; border-radius: 18px; }
.zone:active { background: rgba(255, 255, 255, .18); }
.etincelle {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 46%, #fff 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, #fff 50%, transparent 54%),
    radial-gradient(circle, #fff 0 10%, rgba(255, 220, 120, .95) 18%, rgba(255, 79, 163, .35) 40%, transparent 62%);
  border-radius: 50%;
  animation: scintille 1.5s ease-in-out infinite;
}
.zone.vue .etincelle { display: none; }
@keyframes scintille {
  0%, 100% { transform: translate(-50%, -50%) scale(.75) rotate(0deg); opacity: .8; }
  50% { transform: translate(-50%, -50%) scale(1.15) rotate(45deg); opacity: 1; }
}

/* ------------------------------------------------------------ tout s'éteint, puis rouge */

.panneau.sombre .panneau-image { filter: brightness(.45) saturate(.7); }
.panneau.tres-sombre .panneau-image { filter: brightness(.16) saturate(.4); }
.panneau.noir .panneau-image { filter: brightness(.02); }
.panneau.rouge .panneau-image { filter: brightness(.8) sepia(1) saturate(5) hue-rotate(-38deg) contrast(1.1); }
.legende {
  position: absolute; left: 6%; right: 6%; top: 40%;
  padding: 14px 16px; border-radius: 18px;
  background: rgba(15, 0, 20, .72); border: 2px solid rgba(255, 211, 106, .6);
  color: #fff; font-size: 23px; font-weight: 700; text-align: center;
  text-shadow: 0 2px 6px #000;
}
.panneau.rouge .legende { border-color: #ff6b6b; color: #ffe0e0; }
.legende.apparait { animation: legende .6s ease; }
@keyframes legende { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.passer { position: absolute; left: 0; right: 0; top: 3%; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 3px #000; }

/* ------------------------------------------------------------ le formulaire */

.calque-feuille { position: absolute; inset: 7% 8% 20% 8%; display: flex; align-items: flex-start; justify-content: center; }
.feuille {
  width: 100%; max-height: 100%; overflow: hidden;
  padding: 14px 18px;
  background: repeating-linear-gradient(180deg, #fffdf2 0 27px, #d9e6ff 27px 28px);
  color: #2a1a3a;
  border-radius: 6px;
  transform: rotate(-2.5deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  font-size: 17px;
  animation: feuille .5s ease;
}
@keyframes feuille { from { transform: translateY(40%) rotate(8deg); opacity: 0; } }
.feuille p { margin: 0 0 4px; min-height: 1.2em; }
.feuille .f-titre { font-family: var(--titre); font-size: 22px; color: #c2185b; text-align: center; line-height: 1.1; }
.feuille .f-petit { font-size: 13px; color: #8a6d7a; text-align: center; }
.feuille .f-signature { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 26px; color: #3949ab; text-align: right; }

/* ------------------------------------------------------------ les canards */

.calque-canards { position: absolute; inset: 0; }
.canard {
  position: absolute;
  width: calc(22% * var(--s, 1));
  aspect-ratio: 1;
  padding: 0; border: 0; background: transparent;
  transform: translate(-50%, -60%);
  opacity: .6;
  pointer-events: none;
  transition: opacity .3s;
}
.canard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s, filter .2s; }
.canard .brulant { opacity: 0; }
.canard.passe { opacity: 0; }
.canard.actif { opacity: 1; pointer-events: auto; animation: flotte 1.6s ease-in-out infinite; }
.canard.actif .froid { filter: drop-shadow(0 0 8px rgba(255, 255, 210, .95)); }
.canard.tiede .froid { filter: sepia(.6) saturate(3) hue-rotate(-15deg) drop-shadow(0 0 6px rgba(255, 150, 0, .9)); }
.canard.chaud .froid { opacity: 0; }
.canard.chaud .brulant { opacity: 1; filter: drop-shadow(0 0 10px #ff3b00); }
@keyframes flotte { 0%, 100% { transform: translate(-50%, -60%) rotate(-4deg); } 50% { transform: translate(-50%, -66%) rotate(4deg); } }
.pion {
  position: absolute; z-index: 3;
  width: calc(15% * var(--s, 1));
  transform: translate(-50%, -88%);
  transition: left .35s ease, top .35s ease, width .35s ease;
  pointer-events: none;
}
.pion img { width: 100%; display: block; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .55)); }
.pion.hop { animation: hop .4s ease; }
@keyframes hop { 40% { transform: translate(-50%, -128%); } }

/* ------------------------------------------------------------ la recette */

.calque-recette { position: absolute; left: 4%; right: 4%; top: 49%; bottom: 9%; display: flex; align-items: flex-end; }
.grille-ingredients {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 8px; border-radius: 20px; background: rgba(42, 11, 51, .55); border: 2px solid rgba(255, 211, 106, .7);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ingredient {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 4px 3px; min-height: 0;
  border-radius: 16px; border: 3px solid #f0d9b0; background: #fff;
  color: var(--encre); font-size: 13px; font-weight: 700; line-height: 1.15;
  box-shadow: 0 3px 0 #e0c494;
  transition: transform .12s, border-color .12s, background .12s;
}
.ingredient img { width: min(50px, 11cqw); height: min(50px, 11cqw); object-fit: contain; }
.ingredient[aria-pressed="true"] { border-color: var(--rose); background: #ffe1f0; transform: scale(1.04); }
.ingredient[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: -8px; right: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--rose); color: #fff; font-size: 16px; line-height: 26px;
}
.compteur { margin: 2px 0; text-align: center; font-weight: 700; color: var(--rose-fonce); }

/* ------------------------------------------------------------ le cadenas */

.calque-cadenas { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 14%; }
.cadenas {
  width: min(88%, 330px);
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(160deg, #f6d98b, #c99a3d 55%, #8f6a1f);
  border: 4px solid #5e400c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .65), inset 0 2px 0 rgba(255, 255, 255, .5);
  color: #3a2408;
  text-align: center;
}
.roues { display: flex; justify-content: center; gap: 10px; }
.roue { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 14px; background: #3b2508; }
.roue-symbole { font-size: 26px; line-height: 1.2; }
.roue-fleche { width: 56px; height: 44px; border: 0; border-radius: 10px; background: #f4d27c; color: #3a2408; font-size: 20px; }
.roue-fleche:active { background: #ffe9ad; }
.roue-chiffre {
  width: 56px; padding: 2px 0; border-radius: 8px;
  background: #140a02; color: #ffe9a8; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cadenas-message { margin: 8px 0; font-weight: 700; }
.cadenas.secoue { animation: secoue .45s ease; }
@keyframes secoue { 20%, 60% { transform: translateX(-12px) rotate(-2deg); } 40%, 80% { transform: translateX(12px) rotate(2deg); } }
.cadenas.ouvert { animation: ouvert .8s ease forwards; }
@keyframes ouvert { 40% { transform: scale(1.08); filter: brightness(1.4); } 100% { transform: scale(.2) rotate(90deg); opacity: 0; } }

/* ------------------------------------------------------------ fenêtres */

#calque-modal {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 70px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(20, 0, 28, .72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto;
  animation: entree .2s ease;
}
.bulle {
  position: relative;
  width: 100%; max-width: 440px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--creme), #ffe7c2);
  color: var(--encre);
  border: 4px solid var(--or);
  box-shadow: 0 0 0 3px var(--rose-fonce), 0 18px 40px rgba(0, 0, 0, .6);
  text-align: center;
  animation: bulle .35s cubic-bezier(.2, 1.5, .5, 1);
}
@keyframes bulle { from { transform: scale(.6); opacity: 0; } }
.bulle h3 { margin: 4px 0 8px; font-family: var(--titre); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--rose-fonce); letter-spacing: .5px; }
.bulle p { margin: 0 0 10px; font-size: 18px; }
.bulle-image { display: block; width: 100%; max-height: 34vh; max-height: 34dvh; object-fit: cover; object-position: center 30%; border-radius: 16px; border: 3px solid var(--or-fonce); margin-bottom: 6px; }
.bulle-perso { display: block; width: 130px; height: 130px; object-fit: contain; margin: -78px auto 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.bulle-aie { border-color: #ff6b6b; box-shadow: 0 0 0 3px var(--rouge), 0 18px 40px rgba(0, 0, 0, .6); animation: bulle .35s cubic-bezier(.2, 1.5, .5, 1), secoue .45s .35s ease; }
.bulle-aie h3 { color: var(--rouge); }
.bulle-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.gain {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px;
  border-radius: 16px; background: #dcfff1; border: 2px solid var(--menthe); text-align: left;
  animation: gain .6s ease;
}
.gain img { width: 54px; height: 54px; object-fit: contain; }
@keyframes gain { 0% { transform: scale(.4) rotate(-10deg); } 60% { transform: scale(1.1) rotate(3deg); } }
.perte { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; font-weight: 700; color: var(--rouge); }
.coeur-brise { font-size: 32px; animation: casse .9s ease; }
.tampon {
  display: inline-block; margin: 2px 0 4px; padding: 4px 16px;
  border: 5px double #d4142f; border-radius: 10px;
  color: #d4142f; font-family: var(--titre); font-size: 40px; letter-spacing: 3px;
  transform: rotate(-10deg);
  animation: tampon .45s cubic-bezier(.3, 1.6, .6, 1);
}
@keyframes tampon { from { transform: rotate(-10deg) scale(3); opacity: 0; } }

.fenetre { text-align: left; }
.fenetre-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fenetre-tete h3 { flex: 1; margin: 0; font-size: 28px; }
.fenetre .bulle-perso { margin-top: 0; }
.fenetre .parole { padding: 12px 14px; border-radius: 18px; background: #f1e6ff; border: 2px solid #b48af0; font-size: 19px; }
.grille-sac { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.objet-sac {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px;
  border-radius: 16px; border: 2px solid #f0d9b0; background: #fff; color: var(--encre);
  font-size: 14px; font-weight: 700; line-height: 1.15; box-shadow: 0 3px 0 #e0c494;
}
.objet-sac img { width: 72px; height: 72px; object-fit: contain; }
.objet-grand { display: block; width: 150px; height: 150px; object-fit: contain; margin: 0 auto 6px; }
.vide { text-align: center; }
.plan { list-style: none; margin: 6px 0 0; padding: 10px; border-radius: 16px; background: #f7e3b5; border: 2px dashed var(--or-fonce); }
.plan li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-weight: 700; }
.plan-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e6cf9c; font-size: 14px; }
.plan .fait { color: #2c7a59; }
.plan .fait .plan-num { background: var(--menthe); color: #fff; }
.plan .ici { color: var(--rose-fonce); }
.plan .ici .plan-num { background: var(--rose); color: #fff; animation: saute 1.4s ease infinite; }
.plan .futur { color: #a08c6a; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.petit { font-size: 14px; color: #7a5a6a; text-align: center; margin: 4px 0 0; }

/* le transfert de la progression (menu ⚙️), et le ⚙️ de l'écran titre */
.titre-menu {
  position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 12px); right: 12px;
  display: grid; place-items: center; padding: 0; background: rgba(255, 241, 214, .92); box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
a.bouton { text-decoration: none; text-align: center; }
.code-transfert {
  display: block; width: 100%; margin: 6px 0 10px; padding: 10px;
  border: 2px solid var(--or-fonce); border-radius: 12px; background: #fffaf0; color: var(--encre);
  font: 16px/1.3 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; resize: none; user-select: text;
}
.code-transfert:focus { outline: 3px solid var(--rose); outline-offset: 2px; }
.fenetre .bouton.lien { color: var(--rose-fonce); }
.transfert-resume { margin: 6px 0 10px; padding: 0; list-style: none; font-size: 18px; }
.transfert-resume li { margin: 4px 0; }
.transfert-erreur, .transfert-aide { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-weight: 700; }
.transfert-erreur { background: #ffe1e1; border: 2px solid #e0213b; color: #8f0e1f; }
.transfert-aide { margin-top: 10px; background: #fff4c7; border: 2px solid var(--or-fonce); color: var(--encre); }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px;
  background: #2a0b33; color: #fff; border: 2px solid var(--or); font-weight: 700;
  transform: translate(-50%, 150%); opacity: 0; pointer-events: none;
}
#toast.visible { animation: toast 2.6s ease; }
@keyframes toast { 10%, 85% { transform: translate(-50%, 0); opacity: 1; } }

/* ------------------------------------------------------------ écran titre */

.titre {
  position: relative; flex: 1 1 auto; min-height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.titre-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; animation: respire 14s ease-in-out infinite alternate; }
@keyframes respire { to { transform: scale(1.06); } }
.titre::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 0, 30, .35) 0%, transparent 30%, transparent 55%, rgba(20, 0, 30, .9) 100%); pointer-events: none; }
.titre-haut, .titre-bas { position: relative; z-index: 1; padding: 0 20px; }
.titre-haut { padding-top: calc(env(safe-area-inset-top) + 28px); text-align: center; }
.titre h1 {
  margin: 0;
  font-family: var(--titre); font-weight: 400; font-size: clamp(42px, 13vw, 66px); line-height: .98; letter-spacing: 1px;
  color: var(--or);
  text-shadow: 0 3px 0 var(--rose-fonce), 0 0 18px rgba(255, 79, 163, .9), 0 0 40px rgba(255, 79, 163, .6);
  animation: neon 3s ease-in-out infinite;
}
@keyframes neon { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .55; } 49% { opacity: 1; } 51% { opacity: .7; } 52% { opacity: 1; } }
.sous-titre { margin: 10px 0 0; font-size: 19px; font-weight: 700; color: #ffe1f0; text-shadow: 0 2px 6px #000; }
.titre-bas { display: flex; flex-direction: column; gap: 12px; padding-bottom: calc(env(safe-area-inset-bottom) + 18px); }
.auteurs { margin: 2px 0 0; text-align: center; font-size: 15px; color: #ffe9c4; text-shadow: 0 1px 4px #000; }

/* ------------------------------------------------------------ création du personnage */

.creation {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px);
  background: radial-gradient(circle at 50% 0%, #5a1a6e, var(--nuit) 70%);
}
.creation h2 { margin: 0; text-align: center; font-family: var(--titre); font-weight: 400; font-size: 44px; color: var(--or); text-shadow: 0 3px 0 var(--rose-fonce), 0 0 16px rgba(255, 79, 163, .7); }
.cartes-heros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carte-heros {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px; border-radius: 22px;
  border: 3px solid rgba(255, 211, 106, .45);
  background: radial-gradient(circle at 50% 30%, #7a2c8f, #3a0d47);
  font-size: 20px; font-weight: 700;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.carte-heros img { height: 150px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.carte-heros[aria-pressed="true"] { border-color: var(--or); box-shadow: 0 0 0 3px var(--rose), 0 0 24px rgba(255, 79, 163, .8); transform: translateY(-4px); }
.carte-heros[aria-pressed="true"] img { animation: saute 1.2s ease infinite; }
.carte-heros[aria-pressed="false"] { opacity: .8; }
.etiquette { margin: 4px 0 0; font-size: 19px; font-weight: 700; color: #ffe1f0; }
.champ-prenom {
  width: 100%; min-height: 54px; padding: 10px 16px;
  border-radius: 16px; border: 3px solid var(--or); background: var(--creme); color: var(--encre);
  font: inherit; font-size: 22px; font-weight: 700;
}
.champ-prenom:focus { outline: 3px solid var(--rose); outline-offset: 2px; }
.grille-ages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bulle-age {
  height: 50px; border-radius: 50%; aspect-ratio: 1; justify-self: center; width: 50px;
  border: 2px solid rgba(255, 211, 106, .6); background: var(--velours); font-size: 20px; font-weight: 700;
}
.bulle-age[aria-pressed="true"] { background: var(--rose); border-color: var(--or); transform: scale(1.12); box-shadow: 0 0 14px rgba(255, 79, 163, .9); }

/* ------------------------------------------------------------ fins */

.fin { flex: 1 1 auto; display: flex; flex-direction: column; }
.fin-image { flex: none; }
.fin-image img { display: block; width: 100%; height: 46vh; height: 46dvh; object-fit: cover; object-position: center 35%; }
.fin-carte {
  position: relative; flex: 1 1 auto; margin-top: -30px;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; border-top: 4px solid var(--or);
  background: linear-gradient(180deg, var(--creme), #ffe7c2); color: var(--encre);
  display: flex; flex-direction: column; gap: 8px; text-align: center;
}
.fin-carte h2 { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 40px; color: var(--rose-fonce); }
.fin-perdu .fin-carte h2 { color: var(--rouge); }
.fin-carte p { margin: 0; }
.fin-carte .bouton.lien { color: var(--rose-fonce); }
.badge {
  align-self: center; margin-top: -36px; padding: 8px 18px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe48a, #e0a52c); border: 3px solid #fff; color: #5a3500;
  font-weight: 700; font-size: 18px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  animation: saute 1.6s ease infinite;
}
.stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.stats > div { padding: 8px 12px; border-radius: 14px; background: #fff; border: 2px solid #f0d9b0; font-size: 15px; }
.stats strong { display: block; font-size: 24px; color: var(--rose-fonce); }
.bientot { font-family: var(--titre); font-size: 26px; color: #6a3cc4; }
.confettis { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confettis i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: confetti linear forwards; }
@keyframes confetti { to { transform: translateY(110vh) rotate(var(--tourne)); } }

/* ------------------------------------------------------------ carte des niveaux, intro de niveau, diplôme */

.titre .bouton.reprendre { flex-direction: column; gap: 0; }
.titre .bouton.reprendre small { font-size: 14px; font-weight: 700; opacity: .9; }

.niveaux {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background: radial-gradient(circle at 50% 0%, #5a1a6e, var(--nuit) 70%);
}
.niveaux h2 { margin: 0; text-align: center; font-family: var(--titre); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--or); text-shadow: 0 3px 0 var(--rose-fonce), 0 0 16px rgba(255, 79, 163, .7); }
.niveaux .etiquette { text-align: center; margin: 0; }
.carte-niveau {
  display: flex; align-items: stretch; gap: 12px; padding: 8px; text-align: left;
  border-radius: 22px; border: 3px solid var(--or);
  background: linear-gradient(135deg, #6b2a80, #3a0d47); color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.carte-niveau[data-niveau="2"] { background: linear-gradient(135deg, #1f4f86, #0c2547); border-color: #e8f4ff; }
.carte-niveau[data-niveau="3"] { background: linear-gradient(135deg, #8a5a3a, #4a2a17); border-color: #ffe680; }
.carte-niveau img { flex: none; width: 92px; height: 120px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .6); }
.carte-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; justify-content: center; }
.carte-num { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; display: flex; gap: 8px; align-items: center; }
.etoiles { color: #ffd36a; letter-spacing: 1px; }
.carte-niveau strong { font-size: 21px; line-height: 1.1; }
.carte-lieu { font-size: 15px; opacity: .9; }
.carte-statut { margin-top: 4px; font-size: 14px; font-weight: 700; color: #ffe9a8; }
.carte-niveau.gagne .carte-statut { color: #8ff5cf; }
.carte-niveau.ferme { filter: grayscale(.9) brightness(.7); }
.carte-niveau.ferme img { filter: blur(2px); }
.carte-niveau:not(:disabled):active { transform: scale(.98); }

.intro { position: relative; flex: 1 1 auto; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.intro-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: respire 14s ease-in-out infinite alternate; }
.intro-carte {
  position: relative; margin: 0 12px calc(env(safe-area-inset-bottom) + 12px); padding: 16px 18px 12px;
  border-radius: 26px; border: 4px solid var(--or);
  background: linear-gradient(180deg, rgba(255, 248, 236, .97), rgba(255, 231, 194, .97)); color: var(--encre);
  text-align: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  animation: bulle .5s cubic-bezier(.2, 1.5, .5, 1);
}
.intro-heros { position: absolute; right: 6px; top: -96px; height: 120px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); animation: saute 1.6s ease infinite; }
.intro-num { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--rose-fonce); }
.intro-carte h2 { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--rose-fonce); }
.intro-lieu { margin: 2px 0 6px; font-weight: 700; }
.intro-carte p { margin: 0 0 8px; }
.intro-difficulte span { color: var(--or-fonce); font-size: 20px; letter-spacing: 2px; }

.paroles { display: flex; flex-direction: column; gap: 8px; }
.fenetre .paroles .parole { margin: 0; }
.bouton.encore { width: auto; flex: 1; font-size: 16px; min-height: 46px; }
.lexique { margin: 0 0 6px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 2px solid #f0d9b0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.lexique dt { font-weight: 700; color: var(--rose-fonce); }
.lexique dd { margin: 0; }
.question-num { display: block; font-size: 14px; color: var(--rose-fonce); }

.bouton.suite { font-size: 19px; }
.diplome {
  margin: 4px 0; padding: 12px 14px; border-radius: 16px;
  background: #fffdf4; border: 3px double var(--or-fonce); box-shadow: inset 0 0 0 4px #fff4d6;
}
.diplome-titre { font-family: var(--titre); font-size: 26px; color: var(--rose-fonce); }
.diplome ul { list-style: none; margin: 6px 0; padding: 0; text-align: left; }
.diplome li { padding: 2px 0; }
.diplome-signe { text-align: right; font-style: italic; }

/* ============================================================ niveau 2 : Noël au Canada (bleu glacé, rouge érable, neige) */

body[data-niveau="2"] {
  --nuit: #0a1830; --velours: #15365f; --prune: #0f2747;
  --rose: #e63946; --rose-fonce: #b3122a; --or: #eaf4ff; --or-fonce: #7aa4c8;
  --encre: #1b2a44; --creme: #f7fbff;
  --titre: 'Mountains of Christmas', 'Andika', fantasy;
  background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(150, 205, 255, .22), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(230, 57, 70, .16), transparent 45%);
}
:where(body[data-niveau="2"]) .bouton {
  background: linear-gradient(180deg, #ff6b6b 0%, #d62839 55%, #a4161a 100%);
  box-shadow: 0 4px 0 #6a040f, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .4);
}
:where(body[data-niveau="2"]) .bouton.secondaire {
  background: linear-gradient(180deg, #5d9be0 0%, #2f66b0 60%, #1d4682 100%);
  box-shadow: 0 4px 0 #0e2a52, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="2"]) #hud { background: linear-gradient(180deg, rgba(15, 39, 71, .98), rgba(15, 39, 71, .9)); border-bottom-color: rgba(234, 244, 255, .7); }
:where(body[data-niveau="2"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #2f6cb5, var(--velours)); }
:where(body[data-niveau="2"]) .dialogue {
  background:
    repeating-linear-gradient(-45deg, #d62839 0 9px, #fff 9px 18px) top / 100% 8px no-repeat,
    linear-gradient(180deg, #fbfdff 0%, #e2eefb 100%);
  padding-top: 18px;
  box-shadow: 0 -10px 26px rgba(0, 10, 30, .55), inset 0 0 0 2px rgba(122, 164, 200, .4);
}
:where(body[data-niveau="2"]) .dialogue-tete h2 { font-size: 30px; font-weight: 700; text-shadow: 0 2px 0 #cfe3f7; }
:where(body[data-niveau="2"]) .dialogue-perso { background: radial-gradient(circle, #ffffff, #bcd8f2); }
:where(body[data-niveau="2"]) .textes .question { background: #eaf3fc; border-color: var(--rose); }
:where(body[data-niveau="2"]) .bulle { background: linear-gradient(180deg, #ffffff, #e3eefa); }
:where(body[data-niveau="2"]) .bulle h3, :where(body[data-niveau="2"]) .intro-carte h2, :where(body[data-niveau="2"]) .fin-carte h2 { font-weight: 700; }
:where(body[data-niveau="2"]) .intro-carte, :where(body[data-niveau="2"]) .fin-carte { background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(226, 238, 251, .97)); }
:where(body[data-niveau="2"]) .badge { background: linear-gradient(180deg, #ff8a8a, #d62839); color: #fff; }

/* la neige tombe sur toutes les scènes du niveau 2 */
:where(body[data-niveau="2"]) .scene-image::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .85;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 30% 70%, rgba(255, 255, 255, .9) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 40%, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 75% 10%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 60%, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 42% 92%, rgba(255, 255, 255, .9) 50%, transparent 51%);
  background-size: 180px 180px;
  animation: neige 9s linear infinite;
}
@keyframes neige { from { background-position: 0 0; } to { background-position: 30px 180px; } }

/* la boule à neige secouée (scène qui se joue toute seule) */
.panneau.yeux .panneau-image { filter: saturate(1.3) sepia(.35) hue-rotate(-25deg) brightness(.9); }
.panneau.secoue .panneau-image { animation: secoue-boule .3s ease-in-out infinite; }
@keyframes secoue-boule { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg) translate(-5px, 2px); } 75% { transform: rotate(2.5deg) translate(5px, -2px); } }
.panneau.blizzard { background: #e8f4ff; }
.panneau.blizzard .panneau-image { animation: tourbillon 2.3s ease-in forwards; filter: brightness(1.5) blur(1.5px); }
@keyframes tourbillon { to { transform: rotate(400deg) scale(.08); } }
.panneau.blanc { background: #fff; }
.panneau.blanc .panneau-image { filter: brightness(8) saturate(0); }

.consigne { margin: 2px 0; text-align: center; font-weight: 700; color: var(--rose-fonce); }

/* le lac gelé */
.calque-glace { position: absolute; inset: 0; }
.dalle {
  position: absolute; width: calc(26% * var(--s)); aspect-ratio: 2.4; transform: translate(-50%, -50%);
  padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6);
  background: radial-gradient(ellipse at 40% 35%, rgba(255, 255, 255, .6), rgba(190, 225, 255, .35) 55%, rgba(110, 160, 220, .25));
  box-shadow: inset 0 -3px 8px rgba(0, 40, 90, .35), 0 2px 6px rgba(0, 0, 0, .25);
  opacity: .5; pointer-events: none; transition: opacity .25s, box-shadow .25s, background .25s;
}
.dalle.active { opacity: 1; pointer-events: auto; }
.dalle.loin { opacity: .2; }
.dalle.brille { opacity: 1; background: radial-gradient(ellipse, #e6fdff, #5fd4ff 55%, #1a8fe0); border-color: #fff; box-shadow: 0 0 20px 6px rgba(90, 210, 255, .95); }
.dalle.casse { opacity: 1; background: radial-gradient(ellipse, #0b2d55, #061a33); border-color: #9cc; animation: secoue .4s ease; }

/* la tire d'érable */
.calque-jauge { position: absolute; left: 4%; right: 4%; top: 61%; }
.jauge { padding: 8px 12px 22px; border-radius: 18px; background: rgba(50, 25, 8, .8); border: 3px solid #f6c86a; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.sucettes { display: flex; justify-content: center; gap: 10px; font-size: 26px; line-height: 1; margin-bottom: 10px; }
.sucette { filter: grayscale(1) opacity(.35); }
.sucette.faite { filter: none; animation: saute .6s ease; }
.jauge-barre {
  position: relative; height: 30px; border-radius: 15px; border: 3px solid #fff;
  background: linear-gradient(90deg, #8fd3ff 0, #b9e4ff var(--z0), #ffc83d var(--z0), #ffe58a 50%, #ffc83d var(--z1), #8a4a1a var(--z1), #5a2c0c 100%);
}
.jauge-etiquette { position: absolute; top: calc(100% + 4px); font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.jauge-etiquette.gauche { left: 2%; }
.jauge-etiquette.milieu { left: 50%; transform: translateX(-50%); color: #ffe58a; }
.jauge-etiquette.droite { right: 2%; }
.jauge-curseur { position: absolute; top: -10px; bottom: -10px; width: 7px; margin-left: -3.5px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px #3a1d06; }
.jauge-curseur.dans-zone { background: #fff27a; box-shadow: 0 0 0 2px #3a1d06, 0 0 14px 4px #ffd23f; }

/* les aurores boréales */
.calque-aurores { position: absolute; left: 0; right: 0; top: 0; height: 42%; }
.ruban {
  position: absolute; top: 3%; bottom: 0; padding: 0;
  border: 2px dashed rgba(255, 255, 255, .3); border-radius: 40% 40% 30% 30% / 20% 20% 15% 15%;
  background: transparent; transition: background .15s, box-shadow .15s;
}
.ruban-vert { --c: 80, 255, 160; }
.ruban-rose { --c: 255, 105, 190; }
.ruban-violet { --c: 180, 110, 255; }
.ruban-bleu { --c: 90, 170, 255; }
.ruban.allume {
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .85), rgba(var(--c), .75) 35%, rgba(var(--c), 0) 75%);
  box-shadow: 0 0 30px 8px rgba(var(--c), .8); border-color: transparent;
}

/* ============================================================ niveau 3 : Pâques dans une école de Paris (pastels, chocolat, cahier) */

body[data-niveau="3"] {
  --nuit: #1a2142; --velours: #2b3768; --prune: #222a55;
  --rose: #f06fa6; --rose-fonce: #1f3f8f; --or: #ffe680; --or-fonce: #c9a227;
  --encre: #23264a; --creme: #fffef8;
  --titre: 'Playwrite FR', 'Andika', cursive;
  background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 230, 128, .16), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(240, 111, 166, .18), transparent 45%);
}
:where(body[data-niveau="3"]) .bouton {
  background: linear-gradient(180deg, #b57a4e 0%, #81492a 55%, #5e3219 100%);
  box-shadow: 0 4px 0 #3b1d0c, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="3"]) .bouton.secondaire {
  background: linear-gradient(180deg, #b49be6 0%, #8467cf 60%, #6a4fb3 100%);
  box-shadow: 0 4px 0 #3e2a75, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="3"]) #hud {
  background: linear-gradient(180deg, rgba(31, 40, 82, .98), rgba(31, 40, 82, .9));
  border-bottom: 4px solid; border-image: linear-gradient(90deg, #2b50b0 0 33.3%, #ffffff 33.3% 66.6%, #e5383b 66.6%) 1;
}
:where(body[data-niveau="3"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #3e4f94, var(--prune)); }
:where(body[data-niveau="3"]) .hud-barre > div { background: linear-gradient(90deg, #ffe680, #f06fa6, #a78bde); }
/* le dialogue est une page de cahier d'écolier (lignes Seyès et marge rouge) */
:where(body[data-niveau="3"]) .dialogue {
  background-color: #fffef8;
  background-image:
    linear-gradient(90deg, transparent 22px, rgba(232, 80, 90, .65) 22px 24px, transparent 24px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(90, 120, 200, .45) 31px 32px),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(120, 150, 220, .2) 7px 8px);
  background-attachment: local;
  padding-left: 32px;
}
:where(body[data-niveau="3"]) .dialogue-tete h2 { font-size: 22px; line-height: 1.5; text-shadow: none; }
:where(body[data-niveau="3"]) .dialogue-perso { background: radial-gradient(circle, #fff8d6, #ffd9ec); }
:where(body[data-niveau="3"]) .textes .question { background: #fff6cc; border-color: var(--or-fonce); }
:where(body[data-niveau="3"]) .bulle { background: linear-gradient(180deg, #fffef8, #fdf1d6); }
:where(body[data-niveau="3"]) .bulle h3, :where(body[data-niveau="3"]) .fenetre-tete h3 { font-size: 24px; line-height: 1.5; }
:where(body[data-niveau="3"]) .intro-carte h2, :where(body[data-niveau="3"]) .fin-carte h2 { font-size: 30px; line-height: 1.5; }
:where(body[data-niveau="3"]) .intro-carte, :where(body[data-niveau="3"]) .fin-carte { background: linear-gradient(180deg, rgba(255, 254, 248, .97), rgba(253, 241, 214, .97)); }
:where(body[data-niveau="3"]) .badge { background: linear-gradient(180deg, #fff1a8, #f5c542); }
:where(body[data-niveau="3"]) .diplome-titre { font-size: 21px; line-height: 1.6; }

/* la dictée : des lettres à la craie sur le tableau */
.calque-lettres { position: absolute; left: 9%; right: 3%; top: 40%; bottom: 31%; display: flex; flex-direction: column; justify-content: center; gap: 6%; }
.cases { display: flex; justify-content: center; gap: 2%; }
.case {
  width: calc(var(--pw) * .1); height: calc(var(--pw) * .11); display: grid; place-items: end center;
  border-bottom: 3px solid rgba(255, 255, 255, .85);
  color: #fff; font-weight: 700; font-size: calc(var(--pw) * .075); line-height: 1;
  text-shadow: 0 0 3px rgba(255, 255, 255, .7);
}
.case.pleine { animation: saute .4s ease; }
.tuiles { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--pw) * .02); }
.tuile {
  width: calc(var(--pw) * .115); aspect-ratio: 1; padding: 0;
  border-radius: 12px; border: 2px dashed rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .12);
  color: #fff; font-size: calc(var(--pw) * .07); font-weight: 700; text-shadow: 0 0 3px rgba(255, 255, 255, .8);
}
.tuile:disabled { opacity: .15; }
.tuile.secoue { animation: secoue .45s ease; border-color: #ff9b9b; }

/* un, deux, trois… soleil ! */
.calque-soleil { position: absolute; inset: 0; }
.meneuse { position: absolute; left: 50%; top: 21%; width: 29%; transform: translateX(-50%); animation: flotte-blouse 2.2s ease-in-out infinite; }
.meneuse img { display: block; width: 100%; transition: opacity .12s; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.meneuse .de-face { position: absolute; inset: 0; opacity: 0; }
.calque-soleil[data-phase="face"] .de-dos, .calque-soleil[data-phase="pret"] .de-dos { opacity: 0; }
.calque-soleil[data-phase="face"] .de-face, .calque-soleil[data-phase="pret"] .de-face { opacity: 1; }
@keyframes flotte-blouse { 50% { transform: translateX(-50%) translateY(-6px); } }
.chant {
  position: absolute; left: 6%; right: 6%; top: 6%; text-align: center;
  font-family: var(--titre); font-size: calc(var(--pw) * .08); line-height: 1.5; color: #fff;
  text-shadow: 0 2px 6px #000, 0 0 12px rgba(120, 160, 255, .8);
}
.chant.apparait { animation: legende .4s ease; }
.calque-soleil[data-phase="trois"] .chant { color: #ffd0d0; }
.calque-soleil[data-phase="face"] .chant { color: #ffe680; font-size: calc(var(--pw) * .1); }
.calque-soleil .avancer { position: absolute; left: 50%; bottom: 58px; width: auto; min-width: 50%; translate: -50% 0; z-index: 4; }

/* la chasse aux œufs */
.calque-oeufs { position: absolute; inset: 0; }
.oeuf { position: absolute; padding: 0; border: 0; background: none; aspect-ratio: .8; transform: translate(-50%, -50%) rotate(var(--r)); }
.oeuf::before { content: ''; position: absolute; inset: -70%; }
.oeuf img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)) brightness(.95); }
.oeuf.trouve { animation: oeuf-trouve .7s ease forwards; pointer-events: none; }
@keyframes oeuf-trouve { 40% { transform: translate(-50%, -80%) rotate(0) scale(1.8); } 100% { transform: translate(-50%, -160%) scale(.2); opacity: 0; } }

/* le xylophone et la partition */
.calque-musique { position: absolute; inset: 0; }
.partition {
  position: absolute; left: 4%; right: 4%; top: 3%; padding: 6px 10px;
  border-radius: 14px; border: 2px solid #c9a227; background: #fffdf3; box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
.phrase { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.paroles { flex: 0 0 36%; font-family: 'Playwrite FR', cursive; font-size: calc(var(--pw) * .034); line-height: 1.6; color: #1f3f8f; }
.notes { display: flex; gap: 5px; }
.note {
  width: calc(var(--pw) * .095); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); border: 2px solid rgba(0, 0, 0, .15);
  color: #fff; font-weight: 700; font-size: calc(var(--pw) * .032); text-shadow: 0 0 3px #000;
  transition: opacity .2s, transform .2s;
}
.note.jouee { opacity: .3; }
.note.suivante { outline: 3px solid #1f3f8f; outline-offset: 2px; transform: scale(1.12); }
.xylophone {
  position: absolute; left: 8%; right: 6%; top: 57%; height: 25%;
  display: flex; align-items: center; justify-content: center; gap: 2.5%; padding: 2% 4%;
  border-radius: 14px; background: linear-gradient(#8a5a33, #5e3b1f); box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}
.lame {
  flex: 1; height: var(--h); padding: 0; border-radius: 10px; border: 2px solid rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .15)), var(--c);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.lame span { color: #fff; font-weight: 700; font-size: calc(var(--pw) * .04); text-shadow: 0 0 3px #000; }
.lame.frappe { animation: frappe .25s ease; }
@keyframes frappe { 50% { transform: translateY(4px) scale(.96); filter: brightness(1.35); } }

/* le plateau de la cantine */
.calque-ordre { top: 55%; bottom: 7%; }
.grille-ingredients.deux { grid-template-columns: repeat(2, 1fr); }
.ingredient.plat { font-size: 14px; }
.ingredient.plat:disabled { opacity: .25; }
.plateau { display: flex; justify-content: center; gap: 8px; padding: 6px; border-radius: 16px; background: linear-gradient(#dfe6ec, #b9c6d1); border: 3px solid #93a2b0; }
.case-plateau {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px dashed #93a2b0; color: #93a2b0; font-weight: 700; font-size: 20px;
}
.case-plateau.servie { border-style: solid; border-color: #43a047; animation: saute .4s ease; }
.case-plateau img { width: 46px; height: 46px; object-fit: contain; }

/* le grenier tout noir : la lampe de poche suit le doigt */
.calque-nuit {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 62%),
    rgba(255, 240, 200, .08) 0, transparent calc(var(--pw) * .14),
    rgba(4, 2, 14, .65) calc(var(--pw) * .2), rgba(4, 2, 14, .95) calc(var(--pw) * .3));
}
.yeux-noir {
  position: absolute; width: 7%; height: 2%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 25% 50%, #fff36b 0 22%, transparent 26%), radial-gradient(circle at 75% 50%, #fff36b 0 22%, transparent 26%);
  filter: drop-shadow(0 0 4px #ffe600);
  animation: cligne 4s infinite;
}
@keyframes cligne { 0%, 92%, 100% { transform: translate(-50%, -50%) scaleY(1); } 95% { transform: translate(-50%, -50%) scaleY(.1); } }

/* le retour des cloches */
.calque-cloches { position: absolute; inset: 0; overflow: hidden; }
.cloche-vol {
  position: absolute; width: 30%; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; transform: translateY(-50%);
}
.cloche-vol img { width: 66%; animation: battre .45s ease-in-out infinite alternate; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.cloche-vol.vers-gauche img { transform: scaleX(-1); }
@keyframes battre { to { translate: 0 -5px; } }
.ruban-cloche {
  margin-top: -4%; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: #fff; border: 2px solid #f06fa6; color: #23264a;
  font-weight: 700; font-size: max(12px, calc(var(--pw) * .036)); box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.cloche-vol.attrapee { animation: attrapee .7s ease forwards; }
@keyframes attrapee { to { transform: translateY(-50%) scale(1.35); filter: brightness(1.3) drop-shadow(0 0 12px #ffe680); } }

/* le cadenas à quatre chiffres */
.cadenas.quatre { width: min(94%, 360px); padding: 12px 8px; }
.cadenas.quatre .roues { gap: 5px; }
.cadenas.quatre .roue { padding: 4px; }
.cadenas.quatre .roue-fleche, .cadenas.quatre .roue-chiffre { width: min(52px, calc(var(--pw) * .15)); }
.cadenas.quatre .roue-chiffre { font-size: min(38px, calc(var(--pw) * .1)); }

/* ------------------------------------------------------------ niveaux 4 à 6 : sac, compagnons, assemblages */

.titre-sac { margin: 10px 0 6px; font-weight: 700; color: var(--rose-fonce); }
.fenetre-corps > .titre-sac:first-child { margin-top: 0; }
.objet-sac.compagnon { background: #eef6ff; border-color: #9cc3ef; box-shadow: 0 3px 0 #9cc3ef; }
.gain.compagnon { background: #e8f1ff; border-color: #8fb8ea; }
.assembler { margin-top: 10px; padding-top: 8px; border-top: 2px dashed #e0c494; }
.grille-assembler { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.objet-sac.petit-objet { font-size: 12.5px; padding: 6px 4px; }
.objet-sac.petit-objet img { width: 50px; height: 50px; }
.bouton.choix.avec-compagnon {
  background: linear-gradient(180deg, #a9d6ff 0%, #4f93db 60%, #2e6bb0 100%);
  box-shadow: 0 4px 0 #1b4478, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 0 rgba(0, 30, 70, .6);
}
.bouton.choix.avec-compagnon img { border-radius: 50%; background: rgba(255, 255, 255, .55); }
.bouton.choix img + img { margin-left: -18px; }
.consigne.alerte { color: #d00000; }
.scene.plein-panneau .scene-image { margin-bottom: 0; }   /* le texte ne cache plus le bas de l'image */
.bouton.sur-image { position: absolute; left: 50%; bottom: 58px; z-index: 4; width: auto; padding: 8px 16px; font-size: 17px; white-space: nowrap; translate: -50% 0; }
.deux-boutons { display: flex; gap: 8px; }
.deux-boutons .bouton { flex: 1; }
.bouton.petit-bouton { min-height: 44px; font-size: 16px; }

/* petites scènes animées des niveaux 4 à 6 */
.panneau.souffle .panneau-image { animation: souffle .35s ease-in-out infinite; filter: blur(1px) brightness(1.05); }
@keyframes souffle { 50% { transform: translateX(-12px) skewX(-2deg); } }
.panneau.lueur .panneau-image { filter: brightness(.55) saturate(1.2); }
.panneau.lueur::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 55% 40%, rgba(140, 210, 255, .55), transparent 55%);
  animation: lueur 1.4s ease-in-out infinite alternate;
}
@keyframes lueur { from { opacity: .45; } to { opacity: 1; } }
.panneau.sepia .panneau-image { filter: sepia(1) brightness(.85) contrast(1.05); }

/* la carte des niveaux : six cartes, un peu plus compactes */
.niveaux { gap: 10px; }
.carte-niveau img { width: 78px; height: 100px; }
.carte-niveau strong { font-size: 20px; }
@media (max-height: 700px) {
  .croix { grid-template-columns: repeat(3, 62px); gap: 4px; margin-top: 2px; }
  .bouton.fleche { min-height: 42px; }
  .niveaux h2 { font-size: 34px; }
  .carte-niveau { padding: 6px; gap: 10px; }
  .carte-niveau img { width: 64px; height: 84px; }
  .carte-niveau strong { font-size: 18px; }
  .carte-lieu, .carte-statut { font-size: 13px; }
}
.carte-niveau[data-niveau="4"] { background: linear-gradient(135deg, #a3344f, #4d1626); border-color: #f5d78e; }
.carte-niveau[data-niveau="5"] { background: linear-gradient(135deg, #1f7aa8, #0b2a3f); border-color: #ffffff; }
.carte-niveau[data-niveau="6"] { background: linear-gradient(135deg, #3f6a52, #2b2418); border-color: #e2c47e; }

/* ============================================================ niveau 4 : Strasbourg (grès rose, vitraux, kelsch) */

@font-face { font-family: 'Grenze Gotisch'; src: url('assets/polices/GrenzeGotisch-SemiBold.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

body[data-niveau="4"] {
  --nuit: #2a1420; --velours: #5a2433; --prune: #3a1a26;
  --rose: #c8102e; --rose-fonce: #8c1028; --or: #f5d78e; --or-fonce: #b5893a;
  --encre: #3a2028; --creme: #fff6f1;
  --titre: 'Grenze Gotisch', 'Andika', serif;
  background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(31, 95, 209, .25), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(200, 16, 46, .22), transparent 45%);
}
:where(body[data-niveau="4"]) .bouton {
  background: linear-gradient(180deg, #e8506a 0%, #c8102e 55%, #8c1028 100%);
  box-shadow: 0 4px 0 #560818, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .35);
}
:where(body[data-niveau="4"]) .bouton.secondaire {
  background: linear-gradient(180deg, #5b8ef0 0%, #1f5fd1 60%, #163f8c 100%);
  box-shadow: 0 4px 0 #0c2552, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="4"]) #hud { background: linear-gradient(180deg, rgba(58, 26, 38, .98), rgba(58, 26, 38, .9)); border-bottom: 3px solid #1f1418; }
:where(body[data-niveau="4"]) .hud-barre > div { background: linear-gradient(90deg, #c8102e, #f4c430, #2e9e5b, #1f5fd1); }
:where(body[data-niveau="4"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #8a3a50, var(--prune)); }
/* le dialogue : grès rose, bordé d'un ruban de kelsch (le tissu à carreaux bleus et rouges d'Alsace) */
:where(body[data-niveau="4"]) .dialogue {
  background:
    linear-gradient(90deg, rgba(200, 16, 46, .55) 50%, transparent 50%) top / 16px 10px repeat-x,
    linear-gradient(0deg, rgba(31, 95, 209, .5) 50%, transparent 50%) top / 16px 10px repeat-x,
    linear-gradient(180deg, #fff4ef 0%, #f7dcd2 100%);
  padding-top: 20px;
  box-shadow: 0 -10px 26px rgba(30, 5, 15, .55), inset 0 0 0 2px rgba(181, 137, 58, .35);
}
:where(body[data-niveau="4"]) .dialogue-tete h2 { font-size: 30px; text-shadow: 0 2px 0 #f6d0c6; }
:where(body[data-niveau="4"]) .dialogue-perso { background: radial-gradient(circle, #fff, #f3c6bb); }
:where(body[data-niveau="4"]) .textes .question { background: #fde8e1; border-color: var(--rose); }
:where(body[data-niveau="4"]) .bulle { background: linear-gradient(180deg, #fff6f1, #f7ddd3); }
:where(body[data-niveau="4"]) .intro-carte, :where(body[data-niveau="4"]) .fin-carte { background: linear-gradient(180deg, rgba(255, 246, 241, .97), rgba(247, 221, 211, .97)); }
:where(body[data-niveau="4"]) .badge { background: linear-gradient(180deg, #f6e3a8, #d6a640); }
/* la lumière des vitraux danse sur toutes les scènes du niveau 4 */
:where(body[data-niveau="4"]) .scene-image::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: .32;
  background:
    radial-gradient(circle at 20% 30%, rgba(200, 16, 46, .7), transparent 22%),
    radial-gradient(circle at 75% 20%, rgba(31, 95, 209, .7), transparent 24%),
    radial-gradient(circle at 60% 70%, rgba(46, 158, 91, .6), transparent 20%),
    radial-gradient(circle at 30% 80%, rgba(244, 196, 48, .6), transparent 18%);
  background-size: 140% 140%;
  animation: vitraux 14s ease-in-out infinite alternate;
}
@keyframes vitraux { from { background-position: 0 0; } to { background-position: 100% 60%; } }

/* la rosace */
.calque-rosace { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); }
.rosace { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.rosace .pierre { fill: #c98f86; stroke: #8a5650; stroke-width: 3; }
.rosace .piece { stroke: #2b1d1a; stroke-width: 2.5; transition: fill .3s; }
.rosace .piece.trou { fill: #1a1f33; stroke: #e9d5c0; stroke-dasharray: 4 3; cursor: pointer; }
.rosace .piece.trou.posee { stroke: #2b1d1a; stroke-dasharray: none; cursor: default; }
.rosace .piece.choisie { fill: #fff6c8; stroke: #fff; stroke-width: 4; stroke-dasharray: none; }
.rosace .piece.jumeau { animation: jumeau .6s ease-in-out infinite alternate; }
@keyframes jumeau { to { stroke: #fff; stroke-width: 7; } }
.rosace .piece.secoue { animation: piece-ratee .45s ease; }
@keyframes piece-ratee { 50% { stroke: #ff3b3b; stroke-width: 8; } }
.rosace .coeur-rosace { fill: #f4c430; stroke: #8a5a14; stroke-width: 3; }
.rosace.allumee .piece { animation: rosace-brille 1s ease 2; }
@keyframes rosace-brille { 50% { opacity: .55; } }
.palette { display: flex; gap: 8px; margin-top: 6px; }
.pot {
  flex: 1; min-height: 52px; border-radius: 16px; border: 3px solid #fff; background: var(--c);
  color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 2px #000; box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.pot:active { transform: translateY(2px); }

/* l'horloge astronomique */
.calque-horloge { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); }
.cadran { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.cadran .fond-cadran { fill: #fff8e1; stroke: #b8862b; stroke-width: 5; }
.cadran .trait { stroke: #8a6a3a; stroke-width: 1; }
.cadran .trait.fort { stroke: #5a3a14; stroke-width: 2.5; }
.cadran .chiffre-cadran { font: 700 17px 'Andika', sans-serif; text-anchor: middle; fill: #3a2408; }
.cadran .aiguille { stroke-linecap: round; }
.cadran .aiguille.grande { stroke: #1f3f8f; stroke-width: 5; }
.cadran .aiguille.petite { stroke: #8c1028; stroke-width: 8; }
.cadran .axe { fill: #b8862b; }
.reglage { display: flex; align-items: center; gap: 8px; }
.reglage span { flex: 1; font-weight: 700; }
.bouton.tourne { flex: none; width: 66px; min-height: 46px; padding: 0; font-size: 26px; }

/* les souterrains : le labyrinthe et la lanterne */
.calque-labyrinthe { position: absolute; inset: 0; --ep: calc(var(--pw) * .03); background: rgba(25, 10, 5, .35); }
.mur { position: absolute; border-radius: 4px; background: linear-gradient(#fff4dc, #e8b98a); box-shadow: 0 0 0 1px rgba(70, 25, 10, .7), 0 0 8px rgba(255, 215, 150, .55); }
.mur.h { height: var(--ep); translate: 0 -50%; }
.mur.v { width: var(--ep); translate: -50% 0; }
.mur.p { width: var(--ep); height: var(--ep); translate: -50% -50%; }
.plume { position: absolute; translate: -50% -50%; font-size: calc(var(--pw) * .06); filter: drop-shadow(0 0 4px #fff); pointer-events: none; }
.sortie { position: absolute; translate: -50% -50%; font-size: calc(var(--pw) * .09); animation: saute 1.2s ease infinite; pointer-events: none; }
.pion.pion-laby { width: calc(var(--pw) * .1); transition: left .2s ease, top .2s ease; }
.pion.bonk { animation: secoue .3s ease; }
.calque-nuit.lanterne {
  background: radial-gradient(circle at var(--x, 50%) var(--y, 90%),
    rgba(255, 220, 140, .14) 0, transparent calc(var(--pw) * .15),
    rgba(12, 5, 2, .5) calc(var(--pw) * .26), rgba(12, 5, 2, .74) calc(var(--pw) * .5));
}
.croix { display: grid; grid-template-columns: repeat(3, 70px); grid-template-areas: ". haut ." "gauche bas droite"; gap: 6px; justify-content: center; margin-top: 4px; }
.bouton.fleche { min-height: 50px; padding: 0; font-size: 24px; }
.bouton.fleche.haut { grid-area: haut; }
.bouton.fleche.gauche { grid-area: gauche; }
.bouton.fleche.droite { grid-area: droite; }
.bouton.fleche.bas { grid-area: bas; }

/* l'écluse */
.calque-ecluse { position: absolute; left: 4%; right: 4%; top: 4%; }
.schema-ecluse {
  position: relative; height: calc(var(--pw) * .48); overflow: hidden;
  border-radius: 14px; border: 2px solid var(--or); background: rgba(30, 18, 12, .75);
}
.schema-ecluse.secoue { animation: secoue .45s ease; }
.bassin { position: absolute; top: 0; bottom: 0; }
.bassin.aval { left: 0; width: 34%; }
.bassin.sas { left: 34%; width: 32%; }
.bassin.amont { left: 66%; width: 34%; }
.bassin .eau { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(#6ec0f0, #1d5f9c); transition: height 1.4s ease; }
.bassin.amont .eau, .schema-ecluse[data-niveau="haut"] .sas .eau { height: 72%; }
.etiquette-bassin { position: absolute; top: 6px; left: 0; right: 0; text-align: center; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.porte-ecluse {
  position: absolute; bottom: 0; width: 4%; height: 84%; translate: -50% 0; z-index: 2;
  background: repeating-linear-gradient(#8a5a33 0 8px, #6a4122 8px 10px); border: 2px solid #3a2410; transition: height .6s ease;
}
.porte-ecluse.bas { left: 34%; }
.porte-ecluse.haut { left: 66%; }
.porte-ecluse.ouverte { height: 6%; }
.barque-ecluse { position: absolute; left: 17%; bottom: 27%; z-index: 1; translate: -50% 0; font-size: calc(var(--pw) * .1); transition: left 1s ease, bottom 1.4s ease; }
.schema-ecluse[data-barque="sas"] .barque-ecluse { left: 50%; }
.schema-ecluse[data-barque="sas"][data-niveau="haut"] .barque-ecluse, .schema-ecluse[data-barque="amont"] .barque-ecluse { bottom: 69%; }
.schema-ecluse[data-barque="amont"] .barque-ecluse { left: 83%; }

/* ============================================================ niveau 5 : l'île d'Aix (marinière, sable, océan, fantôme) */

@font-face { font-family: 'Pacifico'; src: url('assets/polices/Pacifico-Regular.woff2') format('woff2'); font-display: swap; }

body[data-niveau="5"] {
  --nuit: #0b2a3f; --velours: #134a6b; --prune: #0f3550;
  --rose: #e4573d; --rose-fonce: #1d4f91; --or: #f7e3b5; --or-fonce: #c9a46a;
  --encre: #12324a; --creme: #fffaf0;
  --titre: 'Pacifico', 'Andika', cursive;
  background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(120, 220, 255, .2), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(228, 87, 61, .16), transparent 45%);
}
:where(body[data-niveau="5"]) .bouton {
  background: linear-gradient(180deg, #4a86d0 0%, #1d4f91 55%, #133766 100%);
  box-shadow: 0 4px 0 #0a2142, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .35);
  border-color: #fff;
}
:where(body[data-niveau="5"]) .bouton.secondaire {
  background: linear-gradient(180deg, #f38a6f 0%, #e4573d 60%, #b73a24 100%);
  box-shadow: 0 4px 0 #7a2414, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="5"]) #hud { background: linear-gradient(180deg, rgba(11, 42, 63, .98), rgba(11, 42, 63, .9)); border-bottom: 4px solid; border-image: repeating-linear-gradient(90deg, #fff 0 8px, #1d4f91 8px 16px) 4; }
:where(body[data-niveau="5"]) .hud-barre > div { background: linear-gradient(90deg, #7fd8ff, #f7e3b5, #e4573d); }
:where(body[data-niveau="5"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #2a78a8, var(--velours)); }
/* le dialogue : une marinière (rayures bleues et blanches) sur du sable */
:where(body[data-niveau="5"]) .dialogue {
  background:
    repeating-linear-gradient(180deg, #1d4f91 0 5px, #fff 5px 10px) top / 100% 20px no-repeat,
    linear-gradient(180deg, #fffaf0 0%, #f6e7c8 100%);
  padding-top: 26px;
  box-shadow: 0 -10px 26px rgba(0, 20, 40, .55), inset 0 0 0 2px rgba(201, 164, 106, .4);
}
:where(body[data-niveau="5"]) .dialogue-tete h2 { font-size: 26px; line-height: 1.35; text-shadow: none; }
:where(body[data-niveau="5"]) .dialogue-perso { background: radial-gradient(circle, #ffffff, #bfe6ff); }
:where(body[data-niveau="5"]) .textes .question { background: #e9f5ff; border-color: #1d4f91; }
:where(body[data-niveau="5"]) .bulle { background: linear-gradient(180deg, #fffaf0, #f3e4c4); }
:where(body[data-niveau="5"]) .bulle h3, :where(body[data-niveau="5"]) .fenetre-tete h3 { font-size: 26px; line-height: 1.35; }
:where(body[data-niveau="5"]) .intro-carte h2, :where(body[data-niveau="5"]) .fin-carte h2 { font-size: 32px; line-height: 1.3; }
:where(body[data-niveau="5"]) .intro-carte, :where(body[data-niveau="5"]) .fin-carte { background: linear-gradient(180deg, rgba(255, 250, 240, .97), rgba(243, 228, 196, .97)); }
:where(body[data-niveau="5"]) .badge { background: linear-gradient(180deg, #8fd0ff, #1d4f91); color: #fff; }
:where(body[data-niveau="5"]) .diplome-titre { line-height: 1.4; }
/* des reflets de vagues sur toutes les scènes du niveau 5 */
:where(body[data-niveau="5"]) .scene-image::after {
  content: ''; position: absolute; inset: 55% 0 0 0; z-index: 3; pointer-events: none; opacity: .22; mix-blend-mode: screen;
  background: repeating-linear-gradient(170deg, transparent 0 14px, rgba(255, 255, 255, .7) 14px 16px, transparent 16px 34px);
  animation: vagues 6s linear infinite;
}
@keyframes vagues { from { background-position: 0 0; } to { background-position: 120px 0; } }

/* le carrelet */
.calque-carrelet { position: absolute; inset: 0; overflow: hidden; }
.filet {
  position: absolute; border: 3px solid rgba(255, 255, 255, .85); border-radius: 6px; box-shadow: 0 0 12px rgba(255, 255, 255, .35);
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, .45) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, .45) 9px 10px);
}
.filet.monte { animation: filet-monte .9s ease; }
@keyframes filet-monte { 50% { transform: translateY(-45%); } }
.nageur { position: absolute; width: calc(var(--pw) * .15); translate: -50% -50%; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); animation: flotte-n 1.2s ease-in-out infinite alternate; }
.nageur.vers-gauche { scale: -1 1; }
.nageur.dessus[data-id="bouteille"] { filter: drop-shadow(0 0 10px #fff3a0) drop-shadow(0 0 4px #fff); }
.nageur.prise { top: 6% !important; transition: top .6s ease; }
@keyframes flotte-n { to { translate: -50% -62%; } }

/* la traversée */
.calque-traversee { position: absolute; inset: 0; }
.etapes-route { position: absolute; top: 3%; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.etapes-route span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: rgba(255, 255, 255, .3); }
.etapes-route span.fait { background: #3fd6a0; }
.etapes-route span.ici { background: #ffd36a; animation: saute 1s ease infinite; }
.bouees { position: absolute; left: 0; right: 0; top: 44%; display: flex; justify-content: space-between; padding: 0 16%; }
.bouee { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 3px #000; }
.bouee i { width: calc(var(--pw) * .07); height: calc(var(--pw) * .1); border: 2px solid #fff; border-radius: 40% 40% 12% 12%; animation: flotte-n 1.4s ease-in-out infinite alternate; }
.bouee.rouge i { background: #d62828; }
.bouee.verte i { background: #2a9d4b; }
.barque { position: absolute; left: 50%; bottom: 12%; width: calc(var(--pw) * .3); translate: -50% 0; transition: left .6s ease, bottom .6s ease, width .6s ease; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.calque-traversee[data-cote="babord"] .barque { left: 28%; bottom: 30%; width: calc(var(--pw) * .22); }
.calque-traversee[data-cote="tribord"] .barque { left: 72%; bottom: 30%; width: calc(var(--pw) * .22); }
.obstacle { position: absolute; top: 40%; translate: -50% 0; font-size: calc(var(--pw) * .14); opacity: 0; pointer-events: none; }
.obstacle[data-cote="babord"] { left: 28%; }
.obstacle[data-cote="tribord"] { left: 72%; }
.obstacle.surgit { animation: surgit 1.4s ease; }
@keyframes surgit { 0% { opacity: 0; transform: translateY(30%); } 20%, 80% { opacity: 1; transform: translateY(-20%) scale(1.2); } 100% { opacity: 0; } }
.bouton.barre.gauche { background: linear-gradient(180deg, #ff7b7b, #d62828 60%, #9c1414); }
.bouton.barre.droite { background: linear-gradient(180deg, #6fe39a, #2a9d4b 60%, #1a6a31); }

/* le monte-charge et sa balance */
.calque-balance {
  position: absolute; left: 6%; right: 6%; top: 22%; height: 44%;
  border-radius: 18px; background: rgba(20, 12, 6, .55); border: 2px solid var(--or-fonce);
}
.pied-balance { position: absolute; left: 50%; bottom: 0; width: 6%; height: 84%; translate: -50% 0; border-radius: 4px; background: linear-gradient(90deg, #6a4122, #a8743f, #6a4122); }
.fleau { position: absolute; left: 6%; right: 6%; top: 16%; height: 6%; border-radius: 6px; background: linear-gradient(#e6c27a, #a8743f); border: 2px solid #3a2410; transform: rotate(var(--angle, 0deg)); transition: transform .6s ease; }
.plateau-balance {
  position: absolute; top: 140%; width: 38%; min-height: calc(var(--pw) * .16); padding: 4px;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 3px;
  border-bottom: 7px solid #e6c27a; border-radius: 0 0 40% 40%; background: rgba(255, 240, 200, .18);
  transform: rotate(calc(var(--angle, 0deg) * -1)); transform-origin: 50% -120%;
}
.plateau-balance::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 100%; height: 130%; border: 2px solid rgba(230, 194, 122, .8); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }
.plateau-balance.gauche { left: -8%; }
.plateau-balance.droite { right: -8%; }
.tonneau {
  display: grid; place-items: center; width: calc(var(--pw) * .16); height: calc(var(--pw) * .18); border-radius: 30% / 14%;
  background: repeating-linear-gradient(90deg, #8a5a33 0 10px, #7a4a28 10px 12px); border: 2px solid #3a2410;
  color: #fff; font-weight: 700; font-size: calc(var(--pw) * .045); text-shadow: 0 1px 2px #000;
}
.sac-pose {
  display: grid; place-items: center; width: calc(var(--pw) * .085); height: calc(var(--pw) * .095); border-radius: 40% 40% 20% 20%;
  background: #e8cf95; border: 2px solid #8a6a3a; color: #3a2408; font-weight: 700; font-size: calc(var(--pw) * .04);
}
.reserve-sacs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0; }
.sac-sable { min-width: 58px; min-height: 50px; border-radius: 16px 16px 10px 10px; border: 3px solid #8a6a3a; background: #f0dcaa; color: #3a2408; font-weight: 700; }
.sac-sable[aria-pressed="true"] { opacity: .3; }

/* la salle des cordages */
.calque-cordes { position: absolute; inset: 0; }
.dessin-cordes { position: absolute; inset: 0; width: 100%; height: 100%; }
.corde-ombre { fill: none; stroke: #2a1a0c; stroke-width: 3.4; stroke-linecap: round; }
.corde-fil { fill: none; stroke: #d9ad66; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1.6 .5; }
.corde.tiree .corde-fil { stroke: #ffe680; stroke-dasharray: none; }
.bout-haut {
  position: absolute; top: 10%; translate: -50% -50%; width: calc(var(--pw) * .15); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 250, 240, .92); border: 3px solid #c9a46a; font-size: calc(var(--pw) * .085);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5); pointer-events: none;
}
.poignee {
  position: absolute; top: 85.3%; translate: -50% -50%; width: calc(var(--pw) * .14); aspect-ratio: 1; padding: 0;
  border-radius: 50%; border: 3px solid #fff; background: #1d4f91; color: #fff; font-weight: 700; font-size: calc(var(--pw) * .06);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

/* le signal de la lanterne */
.calque-signal { position: absolute; inset: 0; pointer-events: none; }
.feu { position: absolute; width: calc(var(--pw) * .2); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; transition: background .08s, box-shadow .08s; }
.feu.allume { background: radial-gradient(circle, #fff 0 25%, #ffe680 45%, rgba(255, 200, 60, 0) 70%); box-shadow: 0 0 70px 34px rgba(255, 220, 120, .8); }
.message-signal { margin: 2px 0; min-height: 1.3em; text-align: center; font-size: 32px; font-weight: 700; letter-spacing: 6px; line-height: 1.3; color: var(--rose-fonce); }
.message-signal.vide { font-size: 16px; letter-spacing: 0; font-weight: 400; color: #6a7a8a; }

/* ============================================================ niveau 6 : Paris 1900 (sépia, vert parc, affiche Art nouveau) */

@font-face { font-family: 'Federant'; src: url('assets/polices/Federant-Regular.woff2') format('woff2'); font-display: swap; }

body[data-niveau="6"] {
  --nuit: #1f1a14; --velours: #3b4a32; --prune: #2c2a20;
  --rose: #a3203a; --rose-fonce: #2f5d50; --or: #e2c47e; --or-fonce: #9c7a36;
  --encre: #2b2418; --creme: #fbf3e2;
  --titre: 'Federant', 'Andika', serif;
  background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(226, 196, 126, .18), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(63, 106, 82, .25), transparent 45%);
}
:where(body[data-niveau="6"]) .bouton {
  background: linear-gradient(180deg, #5f9a80 0%, #2f5d50 55%, #1f4038 100%);
  box-shadow: 0 4px 0 #13281f, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="6"]) .bouton.secondaire {
  background: linear-gradient(180deg, #cf5a70 0%, #a3203a 60%, #761427 100%);
  box-shadow: 0 4px 0 #4a0b17, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="6"]) #hud { background: linear-gradient(180deg, rgba(31, 26, 20, .98), rgba(31, 26, 20, .9)); border-bottom: 3px double var(--or); }
:where(body[data-niveau="6"]) .hud-barre > div { background: linear-gradient(90deg, #2f5d50, #e2c47e, #a3203a); }
:where(body[data-niveau="6"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #5f7a52, var(--velours)); }
/* le dialogue : une vieille affiche, papier crème et double filet vert et or */
:where(body[data-niveau="6"]) .dialogue {
  background:
    radial-gradient(circle at 20% 30%, rgba(156, 122, 54, .08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(156, 122, 54, .08), transparent 40%),
    linear-gradient(180deg, #fbf3e2 0%, #f1e2c2 100%);
  border-top: 6px double #2f5d50;
  box-shadow: 0 -10px 26px rgba(20, 15, 5, .55), inset 0 0 0 3px rgba(226, 196, 126, .6), inset 0 0 0 5px rgba(47, 93, 80, .25);
}
:where(body[data-niveau="6"]) .dialogue-tete h2 { font-size: 28px; letter-spacing: .5px; text-shadow: 0 2px 0 #e9d6a8; }
:where(body[data-niveau="6"]) .dialogue-perso { background: radial-gradient(circle, #fffaf0, #e2c47e); }
:where(body[data-niveau="6"]) .textes .question { background: #f6ecd2; border-color: var(--rose-fonce); }
:where(body[data-niveau="6"]) .bulle { background: linear-gradient(180deg, #fbf3e2, #efdfbd); }
:where(body[data-niveau="6"]) .intro-carte, :where(body[data-niveau="6"]) .fin-carte { background: linear-gradient(180deg, rgba(251, 243, 226, .97), rgba(239, 223, 189, .97)); }
:where(body[data-niveau="6"]) .badge { background: linear-gradient(180deg, #f3dfa6, #c9a14a); }
:where(body[data-niveau="6"]) .bouton.choix.avec-compagnon {
  background: linear-gradient(180deg, #e9cf8a 0%, #b98d3a 60%, #8a6522 100%);
  box-shadow: 0 4px 0 #5a3f12, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .4);
}
:where(body[data-niveau="6"]) .objet-sac.compagnon { background: #fbf1da; border-color: #d9b86a; box-shadow: 0 3px 0 #d9b86a; }
/* un vieux film : un peu sépia, du grain, et l'image qui tremblote */
:where(body[data-niveau="6"]) .panneau-image { filter: sepia(.22) contrast(1.03); }
:where(body[data-niveau="6"]) .scene-image::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(40, 25, 10, .45) 100%),
    repeating-radial-gradient(circle at 30% 40%, rgba(60, 40, 10, .06) 0 1px, transparent 1px 3px);
  animation: vieux-film .18s steps(2) infinite;
}
@keyframes vieux-film { 50% { opacity: .82; } }

/* les chapeaux de Guignol */
.calque-chapeaux { position: absolute; inset: 0; --vitesse: 600ms; }
.chapeau { position: absolute; z-index: 2; width: calc(var(--pw) * .26); padding: 0; border: 0; background: none; translate: -50% -50%; transition: left var(--vitesse) ease-in-out, transform .35s ease; }
.chapeau img { display: block; width: 100%; transform: scaleY(-1); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
.chapeau.leve { transform: translateY(-60%); }
.bille-cachee { position: absolute; z-index: 1; width: calc(var(--pw) * .08); translate: -50% -10%; }

/* le jeu de bagues du manège */
.calque-bagues { position: absolute; inset: 0; }
.cavalier { position: absolute; width: calc(var(--pw) * .16 * var(--s, 1)); translate: -50% -100%; pointer-events: none; }
.cavalier img { position: relative; z-index: 1; display: block; width: 100%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
.cheval { position: absolute; left: 50%; bottom: -8%; translate: -50% 0; font-size: calc(var(--pw) * .13 * var(--s, 1)); }
.bague-bras {
  position: absolute; width: calc(var(--pw) * .11); aspect-ratio: 1; translate: -50% -50%; padding: 0;
  border-radius: 50%; border: calc(var(--pw) * .02) solid #c9a227; background: transparent; box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
.bague-bras.prete { border-color: #ffe680; box-shadow: 0 0 18px 8px rgba(255, 230, 128, .9); }
.bague-bras.prise { animation: prise-bague .6s ease; }
@keyframes prise-bague { 50% { transform: scale(1.7); } }

/* les aiguillages */
.calque-aiguillage {
  position: absolute; inset: 4% 4% 10% 4%; border-radius: 16px;
  background: rgba(251, 243, 226, .9); border: 3px solid #9c7a36; box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.plan-voies { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-voies .voie { stroke: #cdb894; stroke-width: 3; stroke-linecap: round; }
.plan-voies .voie.active { stroke: #8a6a3a; }
.plan-voies .voie.suivie { stroke: #2f5d50; stroke-width: 4.5; }
.aiguille-bouton {
  position: absolute; z-index: 2; translate: -50% -50%; min-width: 58px; height: 44px; border-radius: 22px;
  border: 3px solid #fff; background: #a3203a; color: #fff; font-weight: 700; font-size: 17px; box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
}
.arrivee-voie {
  position: absolute; translate: -50% -115%; width: 23%; padding: 3px 2px; border-radius: 8px; overflow-wrap: anywhere;
  background: #fff; border: 2px solid #2f5d50; color: #2b2418; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center;
}
.train-voie { position: absolute; z-index: 3; width: calc(var(--pw) * .16); translate: -50% -60%; transition: left .6s linear, top .6s linear; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }

/* le marchand de coco */
.calque-comptoir { position: absolute; left: 8%; right: 8%; top: 70%; }
.comptoir {
  min-height: calc(var(--pw) * .17); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 6px;
  border-radius: 12px; background: rgba(60, 35, 15, .55); border: 2px dashed #e2c47e;
}
.piece-monnaie {
  width: 54px; height: 54px; padding: 0; border-radius: 50%; border: 3px solid #8a6a2a; color: #3a2408; font-weight: 700; font-size: 20px;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d9a93a 60%, #a8771c); box-shadow: 0 3px 0 #6a4a10;
}
.piece-monnaie.p1, .piece-monnaie.p2 { background: radial-gradient(circle at 35% 30%, #ffe0c8, #c87a4a 60%, #8a4a22); border-color: #6a3a1a; }
.piece-monnaie.p10 { width: 60px; height: 60px; }
.comptoir .piece-monnaie { width: calc(var(--pw) * .14); height: calc(var(--pw) * .14); font-size: calc(var(--pw) * .055); }
.bourse { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border-radius: 16px; background: #fff3d6; border: 2px solid #e2c47e; }

/* la photo : chacun à sa place */
.calque-pose { position: absolute; inset: 0; }
.place-photo {
  position: absolute; width: calc(var(--pw) * .21); aspect-ratio: .8; translate: -50% -50%; padding: 0;
  display: grid; place-items: center; border-radius: 14px; border: 3px dashed #fff; background: rgba(255, 255, 255, .2);
}
.place-photo.occupee { border-style: solid; border-color: #e2c47e; background: rgba(255, 255, 255, .4); }
.place-photo img { width: 100%; height: 100%; object-fit: contain; }
.num-place {
  position: absolute; top: -12px; left: 50%; translate: -50% 0; z-index: 1; width: 24px; height: 24px; border-radius: 50%;
  background: #a3203a; color: #fff; font-size: 14px; font-weight: 700; line-height: 24px; text-align: center;
}
.consignes { margin: 4px 0; padding-left: 22px; font-size: 16px; font-weight: 700; }
.consignes li { margin: 2px 0; }
.tiroir-persos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.jeton {
  width: 78px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: 14px; border: 3px solid #e2c47e; background: #fff; color: var(--encre); font-size: 12px; font-weight: 700;
}
.jeton img { width: 52px; height: 52px; object-fit: contain; }
.jeton.choisi { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose); transform: translateY(-3px); }

/* ============================================================ niveaux 7 à 9 : carte des niveaux, « CONTINUE ? », petites scènes */

.carte-niveau[data-niveau="7"] { background: linear-gradient(135deg, #d63384, #1d1452); border-color: #5ff3ff; }
.carte-niveau[data-niveau="8"] { background: linear-gradient(135deg, #2e8b57, #6b2a12); border-color: #ffd23f; }
.carte-niveau[data-niveau="9"] { background: linear-gradient(135deg, #3b2a8a, #0d1440); border-color: #f2c14e; }
.carte-num .etoiles { letter-spacing: 0; }

/* « CONTINUE ? » sur l'écran Perdu du niveau 7 */
.continuer {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px;
  background: #1d1452; color: #fff; border: 3px solid #5ff3ff; box-shadow: 0 0 16px rgba(95, 243, 255, .6);
}
.continuer p { margin: 0; }
.continuer-titre { font-family: 'Pixelify Sans', var(--texte); font-size: 28px; color: #ffe066; animation: neon 2.4s infinite; }
.continuer .bouton img { width: 36px; height: 36px; object-fit: contain; }

/* petites scènes qui se jouent toutes seules */
.panneau.pixels .panneau-image { filter: contrast(1.3) saturate(1.7); }
.panneau.pixels::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(10, 0, 40, .35) 0 2px, transparent 2px 12px), repeating-linear-gradient(0deg, rgba(10, 0, 40, .35) 0 2px, transparent 2px 12px);
  animation: pixels .45s steps(2) infinite;
}
@keyframes pixels { 50% { background-size: 18px 18px; } }
.panneau.tourbillon .panneau-image { animation: tourbillon 2.3s ease-in forwards; filter: hue-rotate(60deg) saturate(1.8); }
.panneau.froid .panneau-image { filter: saturate(.35) brightness(.8) hue-rotate(10deg); }
.panneau.nuit-etoilee .panneau-image { filter: brightness(.6) saturate(1.2) hue-rotate(-15deg); }
.panneau.pages .panneau-image { animation: pages 1.1s ease-in-out infinite; }
@keyframes pages { 50% { transform: perspective(600px) rotateY(18deg) scale(1.04); filter: brightness(1.2); } }

/* ============================================================ niveau 7 : le Japon dans un jeu vidéo (néons, pixels, écran d'arcade) */

@font-face { font-family: 'Pixelify Sans'; src: url('assets/polices/PixelifySans-SemiBold.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

body[data-niveau="7"] {
  --nuit: #120c33; --velours: #2a1a6e; --prune: #1a1145;
  --rose: #ff3fa4; --rose-fonce: #c2186b; --or: #5ff3ff; --or-fonce: #2bb7c9;
  --encre: #1d1452; --creme: #fffaf2;
  --titre: 'Pixelify Sans', 'Andika', monospace;
  background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 63, 164, .25), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(95, 243, 255, .2), transparent 45%);
}
:where(body[data-niveau="7"]) .bouton {
  border-radius: 6px; border-color: #fff;
  background: linear-gradient(180deg, #ff7ac8 0%, #ff3fa4 55%, #c2186b 100%);
  box-shadow: 0 4px 0 #6d0c3c, 0 0 14px rgba(255, 63, 164, .55), inset 0 2px 0 rgba(255, 255, 255, .4);
}
:where(body[data-niveau="7"]) .bouton.secondaire {
  background: linear-gradient(180deg, #8ff8ff 0%, #2bb7c9 60%, #13798a 100%);
  box-shadow: 0 4px 0 #0b4650, 0 0 14px rgba(95, 243, 255, .5), inset 0 2px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 0 rgba(0, 50, 60, .6);
}
:where(body[data-niveau="7"]) .bouton.lien { background: none; box-shadow: none; }
:where(body[data-niveau="7"]) #hud { background: linear-gradient(180deg, rgba(18, 12, 51, .98), rgba(18, 12, 51, .9)); border-bottom: 3px solid #ff3fa4; box-shadow: 0 0 14px rgba(255, 63, 164, .5); }
:where(body[data-niveau="7"]) .hud-barre > div { background: repeating-linear-gradient(90deg, #5ff3ff 0 8px, #ff3fa4 8px 16px); }
:where(body[data-niveau="7"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #4a3aa8, var(--velours)); border-radius: 10px; }
/* le dialogue : une boîte de texte de jeu vidéo */
:where(body[data-niveau="7"]) .dialogue {
  border-radius: 10px 10px 0 0; border-top: 4px solid #fff;
  background: linear-gradient(180deg, #fffaf2 0%, #f1ebff 100%);
  box-shadow: 0 -4px 0 #ff3fa4, 0 -8px 0 #1d1452, 0 -10px 26px rgba(10, 0, 40, .6), inset 0 0 0 3px rgba(95, 243, 255, .35);
}
:where(body[data-niveau="7"]) .dialogue-tete h2 { font-size: 25px; letter-spacing: 0; color: #c2186b; text-shadow: 2px 2px 0 #b8f7ff; }
:where(body[data-niveau="7"]) .dialogue-perso { border-radius: 12px; background: radial-gradient(circle, #fff, #c9f9ff); }
:where(body[data-niveau="7"]) .textes .question { border-radius: 6px; background: #eef9ff; border-color: #2bb7c9; }
:where(body[data-niveau="7"]) .bulle { border-radius: 12px; }
:where(body[data-niveau="7"]) .intro-carte, :where(body[data-niveau="7"]) .fin-carte { border-radius: 12px 12px 0 0; }
:where(body[data-niveau="7"]) .badge { background: linear-gradient(180deg, #8ff8ff, #2bb7c9); color: #120c33; border-radius: 8px; }
:where(body[data-niveau="7"]) .bouton.choix.avec-objet {
  background: linear-gradient(180deg, #ffe680 0%, #f2b705 60%, #b98200 100%);
  box-shadow: 0 4px 0 #6b4a00, 0 0 12px rgba(255, 224, 102, .5), inset 0 2px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 0 rgba(90, 50, 0, .6);
}
/* un écran d'arcade : de fines lignes de balayage sur l'image */
:where(body[data-niveau="7"]) .scene-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 30, .13) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 62%, rgba(10, 0, 40, .45) 100%);
}

/* la course dans la rue des néons */
.calque-course { position: absolute; inset: 0; overflow: hidden; }
.sol-course {
  position: absolute; left: 0; right: 0; top: var(--sol); height: 4px;
  background: repeating-linear-gradient(90deg, #5ff3ff 0 14px, transparent 14px 24px); box-shadow: 0 0 8px #5ff3ff;
  animation: defile .5s linear infinite;
}
@keyframes defile { to { background-position: -24px 0; } }
.coureur { position: absolute; z-index: 2; left: 24%; top: var(--sol); width: calc(var(--pw) * .15); translate: -50% -100%; pointer-events: none; }
.coureur img { display: block; width: 100%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .55)); animation: court .32s steps(2) infinite; }
.coureur.en-l-air img { animation: none; transform: rotate(-8deg); }
@keyframes court { 50% { transform: translateY(-3%) rotate(3deg); } }
.coureur.bonk, .tapis-volant.bonk { animation: clignote .2s steps(2) 6; }
@keyframes clignote { 50% { opacity: .2; } }
.obstacle-course {
  position: absolute; z-index: 1; top: var(--sol); translate: -50% -94%; font-size: calc(var(--pw) * .11); line-height: 1;
  pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6));
}
.obstacle-course.cogne, .obstacle-tapis.cogne { animation: cogne .5s ease forwards; }
@keyframes cogne { to { transform: translateY(-60%) rotate(-40deg); opacity: 0; } }

/* le taiko */
.calque-taiko { position: absolute; inset: 0; }
.piste-taiko {
  position: absolute; left: 3%; right: 3%; top: 42%; height: calc(var(--pw) * .2); overflow: hidden;
  border-radius: 999px; background: rgba(20, 8, 40, .8); border: 3px solid #ffe066; box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.cible-taiko {
  position: absolute; left: 16%; top: 50%; width: calc(var(--pw) * .16); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 12px #fff, inset 0 0 10px rgba(255, 255, 255, .6);
}
.note-taiko {
  position: absolute; top: 50%; width: calc(var(--pw) * .13); aspect-ratio: 1; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%; border: 3px solid #fff;
  color: #fff; font-weight: 700; font-size: calc(var(--pw) * .034); box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}
.note-taiko.don { background: radial-gradient(circle at 35% 30%, #ff8a8a, #e0213b 60%, #8f0e1f); }
.note-taiko.ka { background: radial-gradient(circle at 35% 30%, #9fd8ff, #2a7de1 60%, #123f80); }
.note-taiko.dans-cible { box-shadow: 0 0 16px 6px #ffe066; }
.note-taiko.touchee { animation: touchee .35s ease forwards; }
@keyframes touchee { to { transform: scale(1.8); opacity: 0; } }
.note-taiko.ratee { opacity: .35; filter: grayscale(1); }
.boutons-taiko { position: absolute; z-index: 4; left: 4%; right: 4%; bottom: 58px; display: flex; gap: 10px; }
.boutons-taiko .bouton { flex: 1; }
.bouton.taiko-don { background: linear-gradient(180deg, #ff8a8a 0%, #e0213b 60%, #8f0e1f 100%); box-shadow: 0 4px 0 #5a0812, 0 8px 16px rgba(0, 0, 0, .35); }
.bouton.taiko-ka { background: linear-gradient(180deg, #9fd8ff 0%, #2a7de1 60%, #123f80 100%); box-shadow: 0 4px 0 #0b2550, 0 8px 16px rgba(0, 0, 0, .35); }
.bouton.frappe { animation: frappe .2s ease; }

/* jan-ken-pon */
.calque-jkp {
  position: absolute; left: 6%; right: 6%; top: 30%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  padding: 10px; border-radius: 16px; background: rgba(20, 8, 40, .78); border: 3px solid #ffe066; color: #fff;
}
.historique-jkp { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; }
.historique-jkp b { font-size: 24px; line-height: 1; }
.main-jkp { font-size: calc(var(--pw) * .16); text-align: center; line-height: 1.1; }
.cri-jkp { min-width: 4.5em; font-family: var(--titre); font-size: calc(var(--pw) * .055); color: #ffe066; text-align: center; }
.calque-jkp.secoue .main-jkp { animation: secoue-main .3s ease; }
@keyframes secoue-main { 50% { transform: translateY(-16%); } }
.trois-boutons { display: flex; gap: 8px; }
.trois-boutons .bouton { flex: 1; flex-direction: column; gap: 0; padding: 6px 4px; font-size: 15px; }
.trois-boutons .bouton b { font-size: 30px; line-height: 1.1; }

/* le dessin en pixels (picross) */
.calque-picross { position: absolute; left: 50%; top: 45%; width: 84%; translate: -50% -50%; }
.grille-picross {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--n), minmax(0, 1fr)); gap: 3px; padding: 8px;
  border-radius: 12px; background: rgba(255, 252, 244, .94); border: 3px solid #8a5a2b; box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}
.indice-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-weight: 700; font-size: calc(var(--pw) * .042); color: #1d1452; line-height: 1.05; }
.indice-ligne { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 4px; font-weight: 700; font-size: calc(var(--pw) * .042); color: #1d1452; }
.case-picross { position: relative; aspect-ratio: 1; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border-radius: 4px; border: 2px solid #c9b48a; background: #fff; color: #e0213b; font-weight: 700; font-size: calc(var(--pw) * .06); line-height: 1; }
.case-picross.pleine { background: #1d1452; border-color: #1d1452; animation: saute .3s ease; }
.case-picross.croix { background: #ffe1e1; border-color: #e0213b; }
.case-picross.croix::after {   /* une croix dessinée : elle ne dépend d'aucune police */
  content: ''; position: absolute; inset: 3px;
  background: linear-gradient(45deg, transparent 42%, #e0213b 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #e0213b 42% 58%, transparent 58%);
}
.grille-picross.finie .case-picross.pleine { background: #ff3fa4; border-color: #ff3fa4; box-shadow: 0 0 10px #ff3fa4; }

/* la machine à pinces */
.calque-pince { position: absolute; inset: 0; }
.vitrine { position: absolute; overflow: hidden; border-radius: 6px; }
.pince { position: absolute; z-index: 2; top: 0; width: 24%; translate: -50% 0; transition: top .8s ease-in-out; pointer-events: none; }
.pince img { display: block; width: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.pince .cable { position: absolute; left: 50%; bottom: 92%; width: 3px; height: 400%; translate: -50% 0; background: #d8d8e8; }
.pince.descend { top: 48%; }
.lot-pince { position: absolute; z-index: 1; bottom: 3%; translate: -50% 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); transition: bottom .8s ease-in-out, left .3s ease; }
.lot-pince.attrape { bottom: 66%; }

/* le jeu de taquin */
.calque-taquin { position: absolute; left: 50%; top: 45%; width: 60%; translate: -50% -50%; }
.cadre-taquin {
  position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 10px; background: rgba(20, 8, 40, .82); border: 4px solid #ffe066; box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
}
.piece-taquin {
  position: absolute; width: 33.333%; height: 33.333%; padding: 0; border: 2px solid rgba(255, 255, 255, .85); border-radius: 6px;
  background-size: 300% 300%; transition: left .18s ease, top .18s ease;
}
.piece-taquin span {
  position: absolute; top: 4px; left: 4px; min-width: 24px; height: 24px; border-radius: 50%;
  background: rgba(29, 20, 82, .88); color: #fff; font-size: 15px; font-weight: 700; line-height: 24px;
}
.piece-taquin.secoue { animation: secoue .35s ease; }
.cadre-taquin.fini .piece-taquin { border-color: transparent; border-radius: 0; }
.cadre-taquin.fini .piece-taquin span { display: none; }

/* ============================================================ niveau 8 : les Andes au temps des Incas (pierre, tissages, couleurs vives) */

@font-face { font-family: 'Lilita One'; src: url('assets/polices/LilitaOne-Regular.woff2') format('woff2'); font-display: swap; }

body[data-niveau="8"] {
  --nuit: #1c2a24; --velours: #2f4a3a; --prune: #24342c;
  --rose: #d63a5a; --rose-fonce: #b4361f; --or: #ffc93c; --or-fonce: #b8862b;
  --encre: #2b1d14; --creme: #fff6e6;
  --titre: 'Lilita One', 'Andika', sans-serif;
  background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 201, 60, .16), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(46, 139, 87, .25), transparent 45%);
}
:where(body[data-niveau="8"]) .bouton {
  background: linear-gradient(180deg, #4fc08a 0%, #23885a 55%, #16613f 100%);
  box-shadow: 0 4px 0 #0c3a25, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="8"]) .bouton.secondaire {
  background: linear-gradient(180deg, #ff9a5a 0%, #e0582a 60%, #a8381a 100%);
  box-shadow: 0 4px 0 #5a1d0c, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="8"]) .bouton.lien { background: none; box-shadow: none; }
:where(body[data-niveau="8"]) #hud { background: linear-gradient(180deg, rgba(28, 42, 36, .98), rgba(28, 42, 36, .9)); border-bottom: 5px solid #d63a5a; border-image: repeating-linear-gradient(90deg, #d63a5a 0 12px, #ffc93c 12px 24px, #23885a 24px 36px, #2a7de1 36px 48px, #ff7a00 48px 60px) 5; }
:where(body[data-niveau="8"]) .hud-barre > div { background: repeating-linear-gradient(90deg, #d63a5a 0 6px, #ffc93c 6px 12px, #23885a 12px 18px); }
:where(body[data-niveau="8"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #5f8a6a, var(--velours)); }
/* le dialogue : une bande tissée de toutes les couleurs, comme un tissu des Andes */
:where(body[data-niveau="8"]) .dialogue {
  border-top: 0;
  background: linear-gradient(180deg, #fff6e6 0%, #f4e2c4 100%);
  box-shadow: 0 -10px 26px rgba(10, 20, 10, .55), inset 0 0 0 2px rgba(180, 54, 31, .25);
}
:where(body[data-niveau="8"]) .dialogue::before {
  content: ''; display: block; height: 12px; margin: -12px -16px 8px;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .55) 50% 60%, transparent 60%) 0 0 / 12px 12px,
    repeating-linear-gradient(90deg, #d63a5a 0 12px, #ffc93c 12px 24px, #23885a 24px 36px, #2a7de1 36px 48px, #ff7a00 48px 60px);
}
:where(body[data-niveau="8"]) .dialogue-tete h2 { font-size: 27px; letter-spacing: .3px; color: #b4361f; text-shadow: 0 2px 0 #ffe2a8; }
:where(body[data-niveau="8"]) .dialogue-perso { background: radial-gradient(circle, #fffaf0, #ffd98a); }
:where(body[data-niveau="8"]) .textes .question { background: #fff0d6; border-color: #b4361f; }
:where(body[data-niveau="8"]) .bulle { background: linear-gradient(180deg, #fff6e6, #f4e2c4); }
:where(body[data-niveau="8"]) .intro-carte, :where(body[data-niveau="8"]) .fin-carte { background: linear-gradient(180deg, rgba(255, 246, 230, .97), rgba(244, 226, 196, .97)); }
:where(body[data-niveau="8"]) .badge { background: linear-gradient(180deg, #ffe48a, #e0a52c); }
:where(body[data-niveau="8"]) .bouton.choix.avec-compagnon {
  background: linear-gradient(180deg, #ffd56a 0%, #e0a52c 60%, #a8741a 100%);
  box-shadow: 0 4px 0 #5a3a08, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 0 rgba(90, 50, 0, .6);
}
:where(body[data-niveau="8"]) .objet-sac.compagnon { background: #fff3d6; border-color: #e0a52c; box-shadow: 0 3px 0 #e0a52c; }
/* tant qu'Atoq garde les rayons, le soleil est pâle : les images sont froides (jusqu'à la grande fête) */
:where(body[data-niveau="8"]) .scene:not(.sequence):not([data-scene="inti-raymi"]) .panneau-image { filter: saturate(.55) brightness(.9) hue-rotate(-12deg) contrast(1.05); }
:where(body[data-niveau="8"]) .scene:not(.sequence):not([data-scene="inti-raymi"]) .scene-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(140, 175, 230, .28), rgba(70, 100, 160, .14)); mix-blend-mode: multiply;
}

/* la flûte de Pan du condor (les tubes réutilisent le jeu des aurores) */
:where(body[data-niveau="8"]) .calque-aurores { top: auto; bottom: 16%; height: 36%; }
:where(body[data-niveau="8"]) .ruban {
  top: auto; bottom: 0; border: 3px solid rgba(255, 246, 230, .9); border-radius: 10px 10px 5px 5px;
  background: linear-gradient(90deg, rgba(var(--c), .55), rgba(var(--c), .3) 60%, rgba(var(--c), .55));
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
}
:where(body[data-niveau="8"]) .ruban.allume { background: rgba(var(--c), 1); box-shadow: 0 0 26px 8px rgba(var(--c), .9); border-color: #fff; }
:where(body[data-niveau="8"]) .ruban.regarde { opacity: .85; }
.ruban-siku1 { --c: 230, 60, 70; height: 100%; }
.ruban-siku2 { --c: 255, 140, 40; height: 88%; }
.ruban-siku3 { --c: 255, 205, 50; height: 76%; }
.ruban-siku4 { --c: 60, 190, 110; height: 64%; }
.ruban-siku5 { --c: 60, 140, 240; height: 52%; }

/* le quipu */
.calque-quipu {
  position: absolute; left: 50%; top: 44%; width: 72%; translate: -50% -50%;
  display: flex; justify-content: space-around; padding: 30px 8px 10px;
  border-radius: 18px; background: rgba(255, 246, 230, .94); border: 3px solid #b4361f; box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}
.barre-quipu { position: absolute; left: 8%; right: 8%; top: 12px; height: 10px; border-radius: 5px; background: repeating-linear-gradient(45deg, #8a5a2b 0 6px, #c08a4a 6px 12px); }
.corde-quipu {
  position: relative; width: 44%; height: calc(var(--pw) * .6); padding: 0 0 4px; border: 0; background: none; color: var(--encre);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.corde-quipu.d { --fil: #d63a5a; }
.corde-quipu.u { --fil: #e8a800; }
.corde-quipu::before { content: ''; position: absolute; top: -18px; bottom: 44px; left: 50%; width: 6px; translate: -50% 0; border-radius: 3px; background: var(--fil); }
.corde-quipu:active { filter: brightness(1.1); }
.fil-quipu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 2px; }
.noeud { display: block; width: 18px; height: 13px; border-radius: 50%; background: var(--fil); border: 2px solid rgba(0, 0, 0, .3); animation: saute .3s ease; }
.noeud.gros { width: 30px; height: 21px; }
.etiquette-quipu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 2px 6px; border-radius: 10px; background: #fff6e6; font-weight: 700; font-size: 15px; line-height: 1.1; }
.etiquette-quipu small { font-size: 11px; opacity: .8; }

/* le pont de corde */
.calque-pont { position: absolute; inset: 0; }
.vent-pont {
  position: absolute; left: 50%; top: 5%; translate: -50% 0; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 246, 230, .94); border: 3px solid #23885a;
  color: var(--encre); font-weight: 700; font-size: 15px; transition: background .2s, border-color .2s;
}
.calque-pont[data-phase="alerte"] .vent-pont { border-color: #ffb300; background: #fff3c4; }
.calque-pont[data-phase="rafale"] .vent-pont { border-color: #e0213b; background: #ffd9d9; }
.manche-a-air { font-size: 24px; display: inline-block; }
.calque-pont[data-phase="rafale"] .manche-a-air { animation: secoue .3s infinite; }
.pion.pion-pont { width: calc(var(--pw) * .13); transition: left .3s ease, top .3s ease; }
.pion.pion-pont.bonk { animation: vacille .45s ease; }
@keyframes vacille { 25% { transform: translate(-60%, -88%) rotate(-14deg); } 75% { transform: translate(-40%, -88%) rotate(14deg); } }
.panneau.balance .panneau-image { animation: balance-pont .5s ease-in-out infinite; }
@keyframes balance-pont { 50% { transform: rotate(1.4deg) translateX(6px); } }

/* le mur des Incas */
.calque-mur { position: absolute; inset: 0; }
.trou-mur { position: absolute; aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0; background: none; }
.trou-mur svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.forme-trou polygon { fill: rgba(20, 14, 10, .85); stroke: #ffc93c; stroke-width: 2.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.forme-pleine { opacity: 0; transition: opacity .3s; }
.forme-pleine polygon, .forme-pierre polygon { fill: #b9a68c; stroke: #4a3a28; stroke-width: 2.5; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.trou-mur.pleine .forme-pleine { opacity: 1; }
.trou-mur.pleine .forme-trou { opacity: 0; }
.trou-mur.secoue { animation: secoue .4s ease; }
.reserve-pierres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 6px; }
.pierre-inca { position: relative; width: 66px; height: 66px; padding: 6px; border-radius: 14px; border: 3px solid #d8c7a8; background: #fff6e6; box-shadow: 0 3px 0 #c9b28a; }
.pierre-inca svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pierre-inca span { position: absolute; top: -9px; left: -7px; width: 24px; height: 24px; border-radius: 50%; background: #23885a; color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; }
.pierre-inca.choisie { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose); transform: translateY(-3px); }

/* les miroirs du temple */
.calque-miroirs { position: absolute; left: 50%; top: 46%; width: 82%; translate: -50% -50%; }
.cadre-miroirs { position: relative; width: 100%; aspect-ratio: var(--rapport); border-radius: 10px; background: rgba(43, 29, 20, .84); border: 3px solid #ffc93c; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.plan-miroirs { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-sol { fill: rgba(255, 246, 230, .1); }
.case-bloc { fill: #8a7a66; stroke: #3a2a1a; stroke-width: .6; }
.rayon { fill: none; stroke: #ffe066; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.miroir { position: absolute; z-index: 1; padding: 0; display: grid; place-items: center; border: 2px solid rgba(255, 201, 60, .75); border-radius: 8px; background: rgba(200, 230, 255, .16); }
.sens-miroir { font-size: calc(var(--pw) * .1); line-height: 1; color: #e8f6ff; text-shadow: 0 0 6px #9fd8ff; }
.miroir small { position: absolute; top: 1px; left: 4px; font-size: 12px; font-weight: 700; color: #ffc93c; }
.disque-soleil { position: absolute; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; font-size: calc(var(--pw) * .1); filter: grayscale(.6); pointer-events: none; }
.disque-soleil.allume { filter: none; animation: saute 1s ease infinite; }
.entree-rayon { position: absolute; left: 0; translate: -75% -50%; padding: 0 3px; border-radius: 8px; background: rgba(43, 29, 20, .9); color: #ffe066; font-size: calc(var(--pw) * .085); line-height: 1.1; text-shadow: 0 0 8px #fff; pointer-events: none; animation: saute 1.2s ease infinite; }

/* ============================================================ niveau 9 : les Mille et Une Nuits (bleu nuit, or, arabesques, étoiles) */

@font-face { font-family: 'Marhey'; src: url('assets/polices/Marhey-SemiBold.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

body[data-niveau="9"] {
  --nuit: #0d1240; --velours: #2a1a6e; --prune: #161a52;
  --rose: #e0679a; --rose-fonce: #6a2a9c; --or: #f2c14e; --or-fonce: #b8862b;
  --encre: #2a1640; --creme: #fffaf0;
  --titre: 'Marhey', 'Andika', serif;
  background-color: var(--nuit);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 8%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 42%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 78%, #fff 50%, transparent 51%),
    radial-gradient(circle at 50% 0%, rgba(106, 42, 156, .4), transparent 60%);
}
:where(body[data-niveau="9"]) .bouton {
  background: linear-gradient(180deg, #8f6ae6 0%, #5a35b0 55%, #3a1f7e 100%);
  box-shadow: 0 4px 0 #1e0f48, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
}
:where(body[data-niveau="9"]) .bouton.secondaire {
  background: linear-gradient(180deg, #5fe0d0 0%, #1fa59a 60%, #11706a 100%);
  box-shadow: 0 4px 0 #0a3f3b, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3);
  text-shadow: 0 1px 0 rgba(0, 50, 45, .6);
}
:where(body[data-niveau="9"]) .bouton.lien { background: none; box-shadow: none; }
:where(body[data-niveau="9"]) #hud { background: linear-gradient(180deg, rgba(13, 18, 64, .98), rgba(13, 18, 64, .9)); border-bottom: 3px double var(--or); }
:where(body[data-niveau="9"]) .hud-barre > div { background: linear-gradient(90deg, #5a35b0, #f2c14e, #1fa59a); }
:where(body[data-niveau="9"]) .hud-bouton { background: radial-gradient(circle at 35% 30%, #6a4ab8, var(--velours)); }
/* le dialogue : une page de livre de contes, avec un double filet d'or */
:where(body[data-niveau="9"]) .dialogue {
  background:
    radial-gradient(circle at 0 0, rgba(242, 193, 78, .35) 0 18px, transparent 19px),
    radial-gradient(circle at 100% 0, rgba(242, 193, 78, .35) 0 18px, transparent 19px),
    linear-gradient(180deg, #fffaf0 0%, #f6e7c8 100%);
  border-top: 5px double #f2c14e;
  box-shadow: 0 -10px 26px rgba(5, 5, 30, .6), inset 0 0 0 3px rgba(242, 193, 78, .5), inset 0 0 0 6px rgba(106, 42, 156, .18);
}
:where(body[data-niveau="9"]) .dialogue-tete h2 { font-size: 27px; color: #6a2a9c; text-shadow: 0 2px 0 #f5dca0; }
:where(body[data-niveau="9"]) .dialogue-perso { background: radial-gradient(circle, #fffaf0, #e9d2ff); }
:where(body[data-niveau="9"]) .textes .question { background: #f4ecff; border-color: #6a2a9c; }
:where(body[data-niveau="9"]) .bulle { background: linear-gradient(180deg, #fffaf0, #f3e4c4); }
:where(body[data-niveau="9"]) .intro-carte, :where(body[data-niveau="9"]) .fin-carte { background: linear-gradient(180deg, rgba(255, 250, 240, .97), rgba(243, 228, 196, .97)); }
:where(body[data-niveau="9"]) .badge { background: linear-gradient(180deg, #ffe48a, #e0a52c); }
:where(body[data-niveau="9"]) .bouton.choix.avec-compagnon {
  background: linear-gradient(180deg, #e6b8ff 0%, #a86ae0 60%, #6e3aa8 100%);
  box-shadow: 0 4px 0 #3a1a5e, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .4);
}
:where(body[data-niveau="9"]) .objet-sac.compagnon { background: #f6ecff; border-color: #b994e6; box-shadow: 0 3px 0 #b994e6; }
:where(body[data-niveau="9"]) .lexique dt { font-family: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', system-ui, sans-serif; font-size: 22px; }
/* des étoiles qui scintillent doucement sur les images */
:where(body[data-niveau="9"]) .scene-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 14% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 6%, #ffe9a8 50%, transparent 51%),
    radial-gradient(2px 2px at 66% 16%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 86% 9%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 30%, #ffe9a8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 34%, #fff 50%, transparent 51%);
  animation: scintillement 2.6s ease-in-out infinite alternate;
}
@keyframes scintillement { from { opacity: .25; } to { opacity: .95; } }

/* la lampe à frotter */
.calque-frotter { position: absolute; inset: 0; }
.zone-frotter {
  position: absolute; z-index: 2; display: grid; place-items: center; touch-action: none; cursor: grab;
  border-radius: 40%; border: 2px dashed rgba(242, 193, 78, .75); background: radial-gradient(ellipse, rgba(255, 230, 150, .14), transparent 70%);
}
.main-frotter { font-size: calc(var(--pw) * .1); pointer-events: none; animation: main-frotte 1.2s ease-in-out infinite; }
@keyframes main-frotte { 0%, 100% { transform: translateX(-70%) rotate(-15deg); } 50% { transform: translateX(70%) rotate(15deg); } }
.zone-frotter.frotte { animation: lueur-lampe .3s ease; }
@keyframes lueur-lampe { 50% { box-shadow: 0 0 30px 10px rgba(255, 230, 150, .7); } }
.fumee-lampe {
  position: absolute; z-index: 1; left: 50%; top: 10%; width: 64%; aspect-ratio: 1; translate: -50% 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle, rgba(200, 150, 255, .95), rgba(255, 150, 220, .55) 45%, transparent 70%);
  opacity: 0; transform: scale(calc(.4 + var(--f, 0))); filter: blur(4px); transition: opacity .3s, transform .3s;
}
.fumee-lampe.pouf { animation: pouf-fumee 1.2s ease forwards; }
@keyframes pouf-fumee { 50% { transform: scale(2); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.jauge-frotter { position: absolute; z-index: 2; left: 15%; right: 15%; bottom: 62px; height: 16px; overflow: hidden; border-radius: 8px; background: rgba(13, 18, 64, .75); border: 2px solid #f2c14e; }
.jauge-frotter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #c89cff, #ffd6f0); transition: width .2s; }

/* le tapis volant */
.calque-tapis {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(90deg, transparent 33.1%, rgba(255, 255, 255, .14) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, .14) 66.7%, transparent 66.9%);
}
.tapis-volant { position: absolute; z-index: 2; top: 56%; width: calc(var(--pw) * .22); translate: -50% -70%; transition: left .18s ease; pointer-events: none; }
.tapis-volant img { position: relative; z-index: 1; display: block; width: 66%; margin: 0 auto -16%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
.tapis-volant::after {
  content: ''; display: block; height: calc(var(--pw) * .05); border-radius: 6px;
  background: repeating-linear-gradient(90deg, #d63a5a 0 8px, #ffc93c 8px 16px, #23885a 16px 24px, #2a7de1 24px 32px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, .4); animation: ondule 1s ease-in-out infinite;
}
@keyframes ondule { 50% { transform: skewX(8deg) translateY(2px); } }
.obstacle-tapis { position: absolute; z-index: 1; translate: -50% -50%; font-size: calc(var(--pw) * .12); line-height: 1; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.bouton.fleche-tapis { position: absolute; z-index: 4; bottom: 58px; width: 30%; padding: 6px; font-size: 26px; }
.bouton.fleche-tapis.gauche { left: 4%; }
.bouton.fleche-tapis.droite { right: 4%; }

/* la constellation */
.calque-etoiles { position: absolute; left: 4%; right: 4%; }
.dessin-etoiles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.traits-etoiles line { stroke: #ffe9a8; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.etoile-ciel { position: absolute; translate: -50% -50%; width: calc(var(--pw) * .13); aspect-ratio: 1; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.etoile-ciel .astre { font-size: calc(var(--pw) * .075); color: rgba(255, 255, 255, .6); text-shadow: 0 0 6px rgba(255, 255, 255, .6); line-height: 1; }
.numero-etoile {
  position: absolute; top: 64%; left: 50%; translate: -50% 0; padding: 0 7px; border-radius: 8px;
  background: rgba(13, 18, 64, .85); border: 1px solid rgba(242, 193, 78, .7); color: #ffe9a8;
  font-family: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', system-ui, sans-serif; font-size: calc(var(--pw) * .055); font-weight: 700; line-height: 1.3;
}
.etoile-ciel.allumee .astre { color: #ffe066; text-shadow: 0 0 12px #ffe066, 0 0 24px #fff; }
.etoile-ciel.secoue { animation: secoue .4s ease; }
.calque-etoiles.finie .astre { animation: saute 1s ease infinite; }

/* le récit final : huit aventures à remettre dans l'ordre */
.calque-ordre.beaucoup { top: 6%; bottom: 7%; align-items: center; }
.calque-ordre.beaucoup .grille-ingredients { gap: 5px; padding: 6px; }
.calque-ordre.beaucoup .ingredient.plat { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 3px 6px; font-size: 12.5px; text-align: left; }
.calque-ordre.beaucoup .ingredient img { width: min(38px, 9cqw); height: min(52px, 12cqw); flex: none; object-fit: cover; border-radius: 6px; }
.plateau.beaucoup { display: grid; grid-template-columns: repeat(4, 40px); justify-content: center; gap: 6px 10px; }
.plateau.beaucoup .case-plateau { width: 40px; height: 40px; font-size: 15px; }
.plateau.beaucoup .case-plateau img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }

/* ------------------------------------------------------------ grands écrans couchés : image à gauche, texte à droite */

@media (min-width: 860px) and (orientation: landscape) {
  #app { max-width: 1180px; }
  .scene { flex-direction: row; }
  .scene-image { margin-bottom: 0; margin-right: -24px; }
  .dialogue { width: 440px; max-height: none; border-radius: 26px 0 0 26px; border-top: 0; border-left: 4px solid var(--or); align-self: stretch; }
  .fin { flex-direction: row; }
  .fin-image { flex: 1; }
  .fin-image img { height: 100%; }
  .fin-carte { flex: none; width: 460px; margin: 0 0 0 -30px; border-radius: 26px 0 0 26px; border-top: 0; border-left: 4px solid var(--or); justify-content: center; }
  .creation { max-width: 560px; width: 100%; margin: 0 auto; }
}

/* ------------------------------------------------------------ petits écrans (iPhone SE…) : plus compact */

@media (max-height: 700px) {
  .textes p { font-size: 16px; }
  .dialogue-tete h2 { font-size: 23px; }
  .bouton.choix { min-height: 44px; padding: 7px 14px; font-size: 16px; }
  .liste-choix { gap: 7px; }
  .coeur svg { width: 26px; height: 26px; }
  .hud-bouton { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}