/* =====================================================================
   ÉPREUVE 3 : CERVELOUCH, le cerveau du créateur
   Tout bouge sur les kicks : --k (0 à 1, chaque coup de grosse caisse), --bar (premier temps de chaque mesure).
   js/cerveau.js les met à jour à chaque image, seulement sur les blocs à l'écran (le décor, lui,
   tremble dans son canvas). Les blocs cachés sont en display: none (attribut hidden) : rien en mémoire.
   ===================================================================== */
.scene-cerveau {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  background: #050003;
  --k: 0; --bar: 0; --sx: 0; --sy: 0;
  --f-arcade: 'Luckiest Guy', 'Fredoka', system-ui, sans-serif;
  --f-pixel: 'Press Start 2P', ui-monospace, monospace;
  --f-machine: 'Special Elite', 'Courier New', ui-monospace, monospace;
  --f-main: 'Caveat', 'Segoe Script', cursive;
  --haut: max(env(safe-area-inset-top), 6px);
  --bas: max(env(safe-area-inset-bottom), 12px);
  touch-action: manipulation;
}
.cer-sonde { position: absolute; width: 0; height: 0; padding-top: env(safe-area-inset-top); visibility: hidden; pointer-events: none; }
.cer-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cer-monde {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cer-monde > * { pointer-events: auto; }

/* ---------- Diagnostic en haut ---------- */
.cer-hud {
  position: absolute;
  left: 50%;
  top: calc(var(--haut) + 62px);
  display: flex;
  gap: 6px;
  transform: translateX(-50%) translate(calc(var(--sx) * 1px), calc(var(--sy) * 1px)) scale(calc(1 + var(--k) * .03));
  translate: 0 -12px;
  opacity: 0;
  transition: opacity .4s ease, translate .4s ease;
  pointer-events: none !important;
  z-index: 4;
}
.cer-hud.visible { opacity: 1; translate: 0 0; }
.cer-zone {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 90, 110, .8);
  background: linear-gradient(180deg, rgba(40, 4, 16, .86), rgba(20, 2, 10, .86));
  box-shadow: 0 0 8px rgba(255, 30, 60, .55);
  color: #ffe3ea;
  font: 700 clamp(10px, 3.1cqw, 13px) var(--f-texte);
  letter-spacing: .02em;
  white-space: nowrap;
}
.cer-zone em { font: 400 clamp(7px, 2.2cqw, 9px) var(--f-pixel); font-style: normal; color: #ff5470; }
.cer-voyant { width: 9px; height: 9px; border-radius: 50%; background: #ff2d4a; box-shadow: 0 0 8px #ff2d4a; animation: voyant .5s steps(2) infinite; }
@keyframes voyant { 50% { opacity: .25; } }
.cer-hud.alarme .cer-zone[data-etat="hs"] { animation: hud-alarme .3s steps(2) infinite; }
@keyframes hud-alarme { 50% { background: #ff1f45; color: #fff; } }
.cer-zone[data-etat="encours"] { border-color: rgba(255, 210, 90, .9); box-shadow: 0 0 10px rgba(255, 200, 80, .45); }
.cer-zone[data-etat="encours"] .cer-voyant { background: #ffd23f; box-shadow: 0 0 8px #ffd23f; animation-duration: .9s; }
.cer-zone[data-etat="encours"] em { color: #ffd23f; }
.cer-zone[data-etat="ok"] { border-color: rgba(110, 255, 170, .9); box-shadow: 0 0 12px rgba(80, 255, 160, .45); }
.cer-zone[data-etat="ok"] .cer-voyant { background: #5dff9e; box-shadow: 0 0 10px #5dff9e; animation: none; }
.cer-zone[data-etat="ok"] em { color: #5dff9e; }
.scene-cerveau.calme .cer-zone { box-shadow: 0 0 8px rgba(120, 160, 255, .3); }
/* une zone apparaît en haut quand Chouquette en parle */
.cer-zone.arrive { animation: zone-arrive .6s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes zone-arrive {
  0% { opacity: 0; transform: translateY(-14px) scale(.4); filter: brightness(2.5); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ---------- Logo ---------- */
.cer-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  pointer-events: none !important;
  z-index: 5;
}
.cer-logo-titre {
  position: relative;
  display: inline-block;
  font: 400 clamp(40px, 14.2cqw, 76px) var(--f-arcade);
  letter-spacing: .015em;
  line-height: 1;
  color: #ff5a7a;
  background: linear-gradient(180deg, #ffffff 0%, #ffd3de 30%, #ff4d6d 62%, #a8002a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #3a0012;
  filter: drop-shadow(0 5px 0 #3a0012) drop-shadow(0 0 22px rgba(255, 30, 70, .8));
  transform: scale(calc(1 + var(--k) * .07)) rotate(calc(var(--k) * -1.5deg));
  will-change: transform;
}
.cer-logo-titre::before, .cer-logo-titre::after {
  content: attr(data-texte);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor;
  opacity: .55;
  pointer-events: none;
}
.cer-logo-titre::before { color: #00f0ff; transform: translate(calc(-3px - var(--k) * 6px), 0); clip-path: inset(10% 0 55% 0); animation: glitch-a 1.1s steps(1) infinite; }
.cer-logo-titre::after { color: #ff003c; transform: translate(calc(3px + var(--k) * 6px), 0); clip-path: inset(60% 0 8% 0); animation: glitch-b .9s steps(1) infinite; }
@keyframes glitch-a { 0% { clip-path: inset(10% 0 55% 0); } 25% { clip-path: inset(40% 0 30% 0); } 50% { clip-path: inset(75% 0 5% 0); } 75% { clip-path: inset(0 0 80% 0); } }
@keyframes glitch-b { 0% { clip-path: inset(60% 0 8% 0); } 33% { clip-path: inset(20% 0 60% 0); } 66% { clip-path: inset(45% 0 35% 0); } }
.cer-logo-sous {
  display: inline-block;
  margin-top: 10px;
  padding: 6px;
  background: repeating-linear-gradient(-45deg, #ffd000 0 12px, #1a1a1a 12px 24px);
  border-radius: 6px;
  transform: rotate(-2deg) scale(calc(1 + var(--bar) * .06));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.cer-logo-sous span { display: block; padding: 7px 12px; background: #120006; color: #ff3150; font: 400 clamp(10px, 3.2cqw, 14px) var(--f-pixel); text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 0 8px rgba(255, 40, 70, .9); }
.cer-logo.slam { animation: logo-slam .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes logo-slam {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.cer-logo.slam.part { animation: logo-part .7s cubic-bezier(.6, 0, .9, .4) both; }
@keyframes logo-part {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.5); }
}
.cer-alerte {
  position: absolute;
  left: 0; right: 0;
  top: 46%;
  text-align: center;
  opacity: 0;
  pointer-events: none !important;
  font: 400 clamp(44px, 15cqw, 80px) var(--f-arcade);
  color: #ff1f45;
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(255, 20, 60, .9), 0 0 40px rgba(255, 0, 40, .6);
  transition: opacity .1s;
}
.cer-alerte.visible { opacity: .25; }
.cer-alerte.visible.on { opacity: 1; transform: scale(1.06); }

/* ---------- Grandes annonces ---------- */
.cer-banniere {
  position: absolute;
  left: 0; right: 0;
  top: 44%;
  text-align: center;
  pointer-events: none !important;
  opacity: 0;
  z-index: 20;
}
.cer-banniere span {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 14px;
  font: 400 clamp(26px, 9cqw, 46px) var(--f-arcade);
  color: #fff;
  letter-spacing: .03em;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, .55);
  background: linear-gradient(180deg, rgba(255, 40, 80, .95), rgba(160, 0, 40, .95));
  box-shadow: 0 0 30px rgba(255, 30, 70, .7), 0 10px 30px rgba(0, 0, 0, .5);
}
.cer-banniere.vert span { background: linear-gradient(180deg, rgba(60, 220, 130, .96), rgba(10, 130, 70, .96)); box-shadow: 0 0 34px rgba(80, 255, 160, .7), 0 10px 30px rgba(0, 0, 0, .5); }
.cer-banniere.bleu span { background: linear-gradient(180deg, rgba(60, 190, 255, .96), rgba(20, 90, 200, .96)); box-shadow: 0 0 34px rgba(90, 200, 255, .7), 0 10px 30px rgba(0, 0, 0, .5); }
.cer-banniere.visible { animation: banniere 1.6s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes banniere {
  0% { opacity: 0; transform: scale(2.4) rotate(-6deg); }
  18% { opacity: 1; transform: scale(.95) rotate(-3deg); }
  26% { transform: scale(1.04) rotate(-3deg); }
  80% { opacity: 1; transform: scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: scale(.9) translateY(-30px) rotate(-3deg); }
}

/* ---------- Chouquette au casque ---------- */
.cer-dialogue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bas) + 10px);
  width: min(94cqw, 540px);
  transform: translate(calc(-50% + 115cqw), 0);
  opacity: 0;
  z-index: 12;
  pointer-events: none !important;
}
.cer-dialogue.entre { animation: cer-debarque 1s cubic-bezier(.25, 1.25, .45, 1) both; pointer-events: auto !important; }
.cer-dialogue.sort { animation: cer-repart .6s cubic-bezier(.6, 0, .9, .5) both; }
@keyframes cer-debarque {
  0% { opacity: 1; transform: translate(calc(-50% + 115cqw), -40px) rotate(8deg); }
  70% { transform: translate(calc(-50% - 4cqw), 0) rotate(-2deg); }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(0); }
}
@keyframes cer-repart {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(calc(-50% - 115cqw), 20px) rotate(-6deg); }
}
.cer-chat {
  position: relative;
  width: 74%;
  margin-left: 6%;
  margin-bottom: -7.5%;
  aspect-ratio: 900 / 529;
  transform-origin: 50% 100%;
  transform: translate(calc(var(--sx) * 1px), calc(var(--k) * -7px + var(--sy) * 1px)) scale(calc(1 + var(--k) * .02), calc(1 - var(--k) * .025));
  will-change: transform;
  z-index: 2;
  pointer-events: none;
}
.cer-chat.hop { animation: cer-hop .35s ease-out; }
@keyframes cer-hop { 40% { translate: 0 -10px; } }
.cer-pose {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .25s ease;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
}
.cer-pose.tablette { left: 4.8%; width: 94.2%; }
.cer-pose.visible { opacity: 1; }
.cer-note {
  position: absolute;
  top: 20%;
  font: 700 22px var(--f-texte);
  color: #ffe36e;
  text-shadow: 0 0 8px rgba(255, 220, 80, .9), 0 2px 0 #7a4a00;
  animation: cer-note 1.1s ease-out forwards;
  pointer-events: none;
}
@keyframes cer-note { 0% { opacity: 0; transform: translate(0, 10px) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -70px) scale(1.2) rotate(-15deg); } }
.cer-bulle { position: relative; width: 100%; cursor: pointer; transform: translate(calc(var(--sx) * 1px), calc(var(--sy) * 1px)) scale(calc(1 + var(--k) * .012)); z-index: 1; will-change: transform; }
.cer-bulle-img { display: block; width: 100%; height: auto; pointer-events: none; }
.cer-texte {
  position: absolute;
  left: 11%; right: 10%;
  top: 19%; height: 55%;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  font: 700 18px var(--f-texte);
  line-height: 1.24;
  color: var(--prune);
  text-shadow: 0 1px 0 #fff, 0 0 8px #fff;
  pointer-events: none;
}
.cer-mesure { visibility: hidden; display: block; height: auto; }
.cer-suivant {
  display: block;
  margin: 10px auto 0;
  min-height: 46px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 2px solid #ffe36e;
  background: linear-gradient(135deg, #ff5f8f, #ff2d55 55%, #ff8a3d);
  color: #fff;
  font: 700 17px var(--f-texte);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: 0 0 14px rgba(255, 60, 100, .7), 0 6px 16px rgba(0, 0, 0, .4);
  will-change: transform;
  opacity: 0;
  pointer-events: none;
  transform: scale(calc(1 + var(--k) * .04));
  transition: opacity .3s ease;
  cursor: pointer;
}
.cer-suivant.visible { opacity: 1; pointer-events: auto; }
.scene-cerveau.calme .cer-suivant { background: linear-gradient(135deg, #8a7dff, #5b5bd6 55%, #47a8ff); border-color: #c9e4ff; box-shadow: 0 0 14px rgba(120, 140, 255, .6), 0 6px 16px rgba(0, 0, 0, .4); }

/* ---------- Les jeux ---------- */
.cer-jeu {
  position: absolute;
  left: 50%;
  top: calc(var(--haut) + 104px);
  bottom: calc(var(--bas) + 6px);
  width: min(94cqw, 470px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none !important;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, 1.2, .4, 1);
  z-index: 6;
}
.cer-jeu.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto !important; }
.cer-jeu.gagne { animation: jeu-gagne .8s ease; }
@keyframes jeu-gagne { 30% { filter: brightness(1.8) saturate(1.4); } }
.cer-jeu.secoue { animation: jeu-secoue .55s cubic-bezier(.36, .07, .19, .97); }
@keyframes jeu-secoue {
  10%, 90% { translate: -3px 2px; } 20%, 80% { translate: 6px -3px; } 30%, 50%, 70% { translate: -10px 4px; } 40%, 60% { translate: 10px -4px; }
}
.cer-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(60, 6, 28, .9), rgba(30, 2, 14, .9));
  border: 1.5px solid rgba(255, 110, 150, .7);
  box-shadow: 0 0 10px rgba(255, 40, 90, .5);
  color: #ffe3ea;
}
.cer-titre-jeu { font: 400 clamp(17px, 5.4cqw, 24px) var(--f-arcade); letter-spacing: .03em; color: #ff8fb0; text-shadow: 0 0 10px rgba(255, 80, 130, .7); }
.cer-compte { font: 700 clamp(13px, 3.8cqw, 16px) var(--f-texte); }
.cer-compte b { font: 400 clamp(17px, 5.4cqw, 22px) var(--f-arcade); color: #fff; }
.cer-consigne { text-align: center; font: 600 clamp(12px, 3.6cqw, 15px) var(--f-texte); color: #ffe3ea; text-shadow: 0 1px 4px #000; }
.cer-jauge {
  position: relative;
  height: 20px;
  border-radius: 999px;
  background: rgba(20, 0, 10, .75);
  border: 1.5px solid rgba(255, 120, 160, .6);
  overflow: hidden;
}
.cer-jauge i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4%;
  background: linear-gradient(90deg, #ff2d55, #ff8fb0, #ffd27a);
  box-shadow: 0 0 12px rgba(255, 90, 140, .8);
  transition: width .5s cubic-bezier(.2, 1.2, .4, 1);
}
.cer-jauge span { position: relative; display: block; text-align: center; font: 700 11px/18px var(--f-texte); color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .04em; }
.cer-neurones .cer-jauge i { background: linear-gradient(90deg, #2aa6d8, #8ff0ff, #e9fbff); box-shadow: 0 0 12px rgba(100, 220, 255, .8); }
.cer-neurones .cer-entete { border-color: rgba(110, 220, 255, .7); box-shadow: 0 0 10px rgba(60, 180, 255, .45); background: linear-gradient(180deg, rgba(8, 26, 54, .9), rgba(4, 12, 30, .9)); }
.cer-neurones .cer-titre-jeu { color: #8ff0ff; text-shadow: 0 0 10px rgba(90, 210, 255, .8); }
.cer-neurones .cer-jauge { border-color: rgba(110, 220, 255, .6); background: rgba(0, 10, 25, .75); }

/* cartes souvenirs */
.cer-cartes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(2.2cqw, 10px);
  width: min(100%, 52cqh);
  margin: 4px auto 0;
}
.cer-carte {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  perspective: 700px;
  cursor: pointer;
  transform: scale(calc(1 + var(--k) * var(--d, 1) * .055));
  will-change: transform;
  animation: carte-arrive .55s cubic-bezier(.2, 1.4, .4, 1) backwards;
  -webkit-tap-highlight-color: transparent;
}
@keyframes carte-arrive { 0% { opacity: 0; translate: 0 -60px; rotate: -12deg; } }
.cer-carte-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .34s cubic-bezier(.3, .7, .4, 1.25); }
.cer-carte.retournee .cer-carte-in { transform: rotateY(180deg); }
.cer-carte .dos, .cer-carte .face {
  position: absolute;
  inset: 0;
  border-radius: 16%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cer-carte .dos {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 90, 160, .35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #5a1240, #22041a);
  border: 2px solid rgba(255, 120, 190, .8);
  box-shadow: 0 0 9px rgba(255, 60, 150, .65), inset 0 0 12px rgba(255, 120, 200, .35);
}
.cer-carte .dos svg { width: 56%; height: 56%; fill: #ff9ccf; filter: drop-shadow(0 0 6px rgba(255, 110, 190, .9)); }
.cer-carte .dos svg .sillons { fill: none; stroke: #5a1240; stroke-width: 1.1; stroke-linecap: round; }
.cer-carte .face { transform: rotateY(180deg); background: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.cer-carte .face img { width: 100%; height: 100%; object-fit: cover; border-radius: 12%; display: block; }
.cer-carte.trouvee .face { border-color: #5dff9e; box-shadow: 0 0 16px rgba(93, 255, 158, .85); }
.cer-carte.trouvee::after {
  content: '✓';
  position: absolute;
  right: -4px; top: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #2ecc71;
  border: 2px solid #fff;
  color: #fff;
  font: 700 13px/18px var(--f-texte);
  text-align: center;
  animation: coche-pop .4s cubic-bezier(.2, 1.6, .4, 1) both;
  z-index: 3;
}
@keyframes coche-pop { 0% { transform: scale(0); } }
.cer-carte.rate .face { border-color: #ff2d4a; box-shadow: 0 0 16px rgba(255, 45, 74, .9); }
.cer-carte.rate { animation: carte-rate .4s ease; }
@keyframes carte-rate { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.cer-etincelle {
  position: absolute;
  left: 50%; top: 50%;
  color: #fff6b0;
  font-size: 15px;
  text-shadow: 0 0 6px #fff;
  pointer-events: none;
  animation: cer-etincelle .75s ease-out forwards;
  z-index: 4;
}
@keyframes cer-etincelle { 0% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.3); opacity: 0; } }

/* grille des neurones */
.cer-plateau { flex: 1; min-height: 0; display: grid; place-items: center; }
.cer-grille {
  display: block;
  touch-action: manipulation;
  border-radius: 14px;
  background: rgba(6, 4, 20, .55);
  box-shadow: 0 0 16px rgba(60, 190, 255, .35), inset 0 0 0 1.5px rgba(110, 220, 255, .35);
  transform: scale(calc(1 + var(--k) * .018));
  will-change: transform;
  cursor: pointer;
}
.cer-plateau.arrive .cer-grille { animation: plateau-arrive .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes plateau-arrive { 0% { opacity: 0; transform: scale(.7) rotate(-4deg); } }

/* ---------- L'enquête ---------- */
.cer-enquete {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity .8s ease;
  z-index: 6;
}
.cer-enquete.visible { opacity: 1; pointer-events: auto !important; }
.enq-entete {
  position: absolute;
  left: 50%;
  top: calc(var(--haut) + 102px);
  width: min(92cqw, 440px);
  transform: translateX(-50%) rotate(-1deg);
  padding: 8px 14px 9px;
  background: #f4ead2;
  color: #3b2a1a;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  text-align: center;
}
.enq-entete h2 { margin: 0; font: 400 clamp(19px, 6cqw, 26px) var(--f-machine); letter-spacing: .04em; text-transform: uppercase; }
.enq-entete p { margin: 2px 0 0; font: 400 clamp(11px, 3.3cqw, 14px) var(--f-machine); opacity: .8; }
.enq-confidentiel {
  position: absolute;
  right: -6px; top: -12px;
  padding: 2px 8px;
  border: 2.5px solid #c0392b;
  border-radius: 4px;
  color: #c0392b;
  font: 400 12px var(--f-machine);
  text-transform: uppercase;
  letter-spacing: .1em;
  transform: rotate(8deg);
  background: rgba(244, 234, 210, .85);
}
.enq-tableau {
  position: absolute;
  left: 50%;
  top: calc(var(--haut) + 182px);
  bottom: calc(var(--bas) + 16px);
  width: min(94cqw, 460px);
  transform: translateX(-50%);
  border-radius: 10px;
  background:
    radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.5px) 3px 4px / 9px 9px,
    linear-gradient(160deg, #c08a52, #a06a38 60%, #8a5a2e);
  border: 9px solid #5a3a1e;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .45), 0 14px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 210, 150, .15);
}
/* les fils rouges passent au-dessus du liège et des coins des dossiers, sous la télécommande */
.enq-fils { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.enq-fils path { fill: none; stroke: #e0223f; stroke-width: 2.4px; stroke-linecap: round; }
.enq-fils path.ombre { stroke: rgba(30, 8, 4, .38); stroke-width: 2.6px; transform: translate(1px, 2px); }
.enq-fils .punaises circle { fill: url(#enq-punaise-g); stroke: rgba(60, 10, 10, .55); stroke-width: .8px; }
.enq-dossiers {
  position: absolute;
  inset: 8% 6%;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 27% 15%;
}
.enq-dossier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 8px 10px;
  border: 0;
  border-radius: 3px 10px 10px 10px;
  background: linear-gradient(170deg, #f3d9a2, #e2bd78);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .08);
  color: #4a2e12;
  transform: rotate(var(--r)) scale(calc(1 + var(--k) * .02));
  will-change: transform;
  cursor: pointer;
  transition: filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.enq-dossier:active { filter: brightness(.92); }
.enq-onglet {
  position: absolute;
  left: 0; top: -14px;
  padding: 2px 10px 0;
  border-radius: 6px 6px 0 0;
  background: #e8c784;
  font: 400 clamp(10px, 3cqw, 12px) var(--f-machine);
  white-space: nowrap;
}
.enq-punaise { position: absolute; top: -8px; left: 76%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #c0392b 60%, #6e1414); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); z-index: 2; }
.enq-icone svg { width: clamp(34px, 11cqw, 50px); height: auto; display: block; }
.enq-nom { font: 700 clamp(17px, 5.4cqw, 23px)/1 var(--f-main); text-align: center; }
.enq-statut, .enq-resolu {
  font: 400 clamp(9px, 2.8cqw, 11px) var(--f-machine);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1px 6px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.enq-statut { color: #b03a2e; }
.enq-resolu { display: none; color: #1e8a4c; transform: rotate(-6deg); }
.enq-dossier.resolu .enq-statut { display: none; }
.enq-dossier.resolu .enq-resolu { display: inline-block; animation: tampon-resolu .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.enq-dossier.resolu { background: linear-gradient(170deg, #e6f2d9, #c8e0ab); }
@keyframes tampon-resolu { 0% { transform: scale(2.4) rotate(-6deg); opacity: 0; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.enq-telecommande {
  position: absolute;
  left: 50%; top: 51%;
  width: clamp(54px, 16cqw, 70px);
  height: clamp(118px, 34cqw, 150px);
  /* --k-tele : plus petite sur les petits écrans (réglée par js/cerveau.js, d'après la taille du tableau) */
  transform: translate(-50%, -50%) rotate(-12deg) scale(var(--k-tele, 1));
  border: 0;
  border-radius: 18px 18px 22px 22px;
  background: linear-gradient(90deg, #2a2a30, #44444c 45%, #26262c);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  gap: 8px;
  cursor: default;
  z-index: 3;
}
.tc-led { width: 7px; height: 7px; border-radius: 50%; background: #5a1010; }
.tc-power { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #ff7a7a, #c0392b 60%, #7a1010); color: #fff; font: 700 14px/1 system-ui, sans-serif; box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.tc-touches { display: grid; grid-template-columns: repeat(3, 9px); gap: 5px; }
.tc-touches i { width: 9px; height: 7px; border-radius: 2px; background: #6a6a74; }
.tc-croix { position: relative; width: 26px; height: 26px; }
.tc-croix i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: #7a7a84; }
.tc-croix i:nth-child(1) { left: 9px; top: 0; } .tc-croix i:nth-child(2) { left: 9px; bottom: 0; } .tc-croix i:nth-child(3) { left: 0; top: 9px; } .tc-croix i:nth-child(4) { right: 0; top: 9px; }
.enq-telecommande.active { cursor: pointer; animation: tele-appel 1s ease-in-out infinite; }
.enq-telecommande.active .tc-power { animation: power-pulse .8s ease-in-out infinite; }
.enq-telecommande.active .tc-led { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.enq-telecommande.appuye .tc-power { transform: scale(.85); background: radial-gradient(circle at 40% 35%, #9dffb8, #2ecc71 60%, #0f6b33); }
@keyframes tele-appel { 50% { scale: 1.08; } }
@keyframes power-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 80, 80, .35), 0 0 18px rgba(255, 80, 80, .9); } }
.enq-postit {
  position: absolute;
  left: 50%;
  padding: 6px 10px 8px;
  background: linear-gradient(180deg, #fff59a, #ffe55c);
  color: #5a3a10;
  font: 700 clamp(16px, 5cqw, 20px)/1 var(--f-main);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
.enq-postit.p1 { top: -14px; transform: translateX(-50%) rotate(-5deg); }
.enq-postit.p2 { bottom: -12px; transform: translateX(-50%) rotate(4deg); background: linear-gradient(180deg, #ffc2dc, #ff9ec8); color: #6a1a40; }
.enq-doigt { position: absolute; left: 50%; top: 51%; font-size: 34px; opacity: 0; pointer-events: none; transform: translate(10px, 40px); z-index: 4; }
.enq-doigt.visible { opacity: 1; animation: doigt 1s ease-in-out infinite; }
@keyframes doigt { 50% { transform: translate(4px, 28px); } }
.enq-pensees { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
.enq-flotte {
  position: absolute;
  left: 0;
  white-space: nowrap;
  padding: 3px 12px 4px;
  border-radius: 999px;
  border: 1.5px solid rgba(210, 190, 255, .7);
  background: rgba(26, 14, 52, .82);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 14px rgba(150, 120, 255, .35);
  font: 700 clamp(17px, 5.4cqw, 22px) var(--f-main);
  color: #f6f0ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  animation: flotte-pensee 9s linear forwards;
}
@keyframes flotte-pensee {
  0% { opacity: 0; transform: translateX(calc(var(--sens) * -10% + 50cqw - 50%)) translateY(10px); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--sens) * 10% + 50cqw - 50%)) translateY(-14px); }
}

/* la fiche d'un dossier */
.enq-fiche, .enq-suspects {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: calc(var(--haut) + 66px) 10px calc(var(--bas) + 10px);
  background: rgba(6, 3, 16, .62);
  opacity: 0;
  transition: opacity .35s ease;
}
.enq-fiche.ouvert, .enq-suspects.ouvert { opacity: 1; }
.enq-papier {
  position: relative;
  width: min(94cqw, 460px);
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 18px 18px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(80, 120, 200, .12) 25px 26px),
    linear-gradient(180deg, #fbf5e3, #f1e6c8);
  color: #2e2418;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  transform: translateY(40px) rotate(2deg) scale(.96);
  transition: transform .4s cubic-bezier(.2, 1.3, .4, 1);
  -webkit-user-select: text;
  user-select: text;
}
.enq-fiche.ouvert .enq-papier { transform: translateY(0) rotate(-.6deg) scale(1); }
.enq-fiche.sort .enq-papier { transform: translateY(60px) rotate(4deg) scale(.95); }
.enq-trombone { position: absolute; top: -12px; right: 62px; width: 18px; height: 44px; border: 3px solid #9aa3ad; border-radius: 10px; border-bottom-color: transparent; }
/* deux sons glissés derrière deux fiches : seul un coin de la photo dépasse en haut à droite */
.enq-fiche .enq-papier { z-index: 1; }
.enq-fiche.avec-son { padding-top: calc(var(--haut) + 122px); }
.enq-son {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  width: clamp(104px, 31cqw, 132px);
  margin: 0;
  padding: 6px 6px 7px;
  background: #fffdf8;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
  transform: rotate(10deg);
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s cubic-bezier(.2, 1.2, .4, 1), opacity .3s ease .25s;
}
.enq-fiche.ouvert .enq-son { opacity: 1; }
.enq-son.gauche { transform: rotate(-9deg); }
.enq-son.sorti, .enq-son.gauche.sorti { z-index: 3; transform: translate(var(--vers-x, 0), var(--vers-y, 0)) rotate(-1.5deg) scale(var(--k-sorti, 1.75)); transition: transform .45s cubic-bezier(.2, 1.2, .4, 1), opacity .3s ease; }
.enq-son > img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* le logo Spotify dépasse avec le coin de la photo, même rangée : ça attire l'oeil */
.enq-spotify-coin {
  position: absolute;
  top: -12px; left: 50%;
  width: 30px; height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 2.5px #000, 0 0 0 4px #fffdf8, 0 3px 8px rgba(0, 0, 0, .45);
  animation: spotify-coin 1.6s ease-in-out infinite;
  transition: opacity .2s ease;
  pointer-events: none;
}
.enq-spotify-coin img { display: block; width: 100%; height: 100%; border-radius: 50%; }
@keyframes spotify-coin { 50% { transform: scale(1.14); box-shadow: 0 0 0 2.5px #000, 0 0 0 4px #fffdf8, 0 0 14px rgba(30, 215, 96, .9); } }
.enq-son.sorti .enq-spotify-coin { opacity: 0; animation: none; }
.enq-son figcaption { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.enq-son figcaption span { flex: 1; min-width: 0; font: 400 9px/1.2 var(--f-texte); color: #6b5a44; text-align: left; }
.enq-son figcaption b { display: block; font-weight: 700; font-size: 11px; line-height: 1.12; color: #2e2418; overflow-wrap: anywhere; }
.enq-son.sorti { cursor: default; }
/* la petite croix pour ranger la photo (seulement quand elle est sortie) */
.enq-son-ranger {
  position: absolute;
  top: -9px; right: -9px;
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  padding: 0;
  border: 1.5px solid #fffdf8;
  border-radius: 50%;
  background: #2e2418;
  color: #fffdf8;
  font: 700 14px/1 var(--f-texte, system-ui);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
  cursor: pointer;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1);
  -webkit-tap-highlight-color: transparent;
}
.enq-son-ranger::before { content: ''; position: absolute; inset: -7px; }   /* plus facile à toucher */
.enq-son.sorti .enq-son-ranger { opacity: 1; transform: scale(1); pointer-events: auto; transition-delay: .3s; }
.enq-spotify { flex: none; width: 20px; height: 20px; display: block; }
.enq-spotify img { width: 20px; height: 20px; display: block; }
/* petites images d'allusion en fond des dossiers */
.enq-fond { position: absolute; right: 7%; bottom: 7%; width: 28%; opacity: .3; transform: rotate(-9deg); z-index: -1; pointer-events: none; }
.enq-fond.inde { width: 30%; opacity: .34; }
.enq-fond svg, .enq-filigrane svg, .enq-fond img, .enq-filigrane img { display: block; width: 100%; height: auto; }
.enq-fond.livre { width: 36%; right: 5%; bottom: 5%; opacity: .42; border-radius: 3px; overflow: hidden; }
.enq-filigrane { position: absolute; left: 50%; top: 52%; width: 82%; opacity: .14; transform: translate(-50%, -50%) rotate(-6deg); z-index: -1; pointer-events: none; border-radius: 4px; overflow: hidden; }
.enq-filigrane.livre { opacity: .2; }
/* les deux pochettes, juste pour la déco : glissées sous deux dossiers (sous le liège des dossiers, au-dessus du tableau),
   seul un bout dépasse, gribouillé au stylo bille pour la cacher, avec le logo Spotify qui reste visible */
.enq-cover {
  position: absolute;
  width: 23%;
  aspect-ratio: 1;
  border: 3px solid #f4ecd8;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .45);
  pointer-events: none;
  z-index: 0;
}
.enq-cover > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.2); }
.enq-gribouillis { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; }
.enq-gribouillis path { fill: none; stroke: rgba(22, 32, 92, .82); stroke-width: 3.2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.enq-gribouillis path.b { stroke: rgba(22, 32, 92, .6); stroke-width: 2.2px; }
.enq-cover-spotify { position: absolute; width: 34%; height: 34%; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #fffdf8, 0 2px 5px rgba(0, 0, 0, .5); }
/* crystal places : sous le dossier n°2, dépasse en bas à droite ; Love Me Again : sous le n°3, dépasse sur sa droite */
.enq-cover.c1 { left: 72%; top: 31%; transform: rotate(9deg); }
.enq-cover.c1 .enq-cover-spotify { right: 6%; bottom: 6%; }
.enq-cover.c2 { left: 33%; top: 73%; transform: rotate(-6deg); }
.enq-cover.c2 .enq-cover-spotify { right: 6%; bottom: 8%; }
.enq-fermer { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(46, 36, 24, .08); color: #2e2418; font: 400 28px/1 var(--f-texte); cursor: pointer; }
.enq-ref { margin: 0 44px 2px 0; font: 400 12px var(--f-machine); text-transform: uppercase; letter-spacing: .06em; color: #8a6a40; }
.enq-papier h3 { margin: 0 0 10px; font: 400 clamp(22px, 7cqw, 28px) var(--f-machine); text-transform: uppercase; }
.enq-pieces { margin: 0 0 8px; padding-left: 18px; }
.enq-pieces li { margin: 5px 0; font: 400 clamp(13px, 4cqw, 15px)/1.35 var(--f-machine); animation: tape .3s ease backwards; animation-delay: calc(var(--i) * .11s + .1s); }
@keyframes tape { 0% { opacity: 0; transform: translateX(-8px); } }
.enq-pensee-fiche { margin: 8px 0; padding: 6px 10px; border-left: 3px solid #b48ae8; background: rgba(180, 138, 232, .12); border-radius: 0 8px 8px 0; animation: tape .4s ease backwards; animation-delay: calc(var(--i) * .11s + .1s); }
.enq-pensee-fiche i { display: block; font: italic 700 clamp(18px, 5.6cqw, 22px)/1.15 var(--f-main); color: #5b2f9a; }
.enq-pensee-fiche small { display: block; margin-top: 2px; font: 400 10px var(--f-machine); text-transform: uppercase; letter-spacing: .08em; color: #8a6aa8; }
.enq-aide { margin: 8px 0; font: 400 13px var(--f-machine); }
.enq-aide summary { cursor: pointer; color: #6a4a20; text-decoration: underline; }
.enq-morse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 8px; margin-top: 6px; padding: 8px; background: rgba(255, 255, 255, .55); border-radius: 6px; }
.enq-morse span { font: 400 13px var(--f-machine); white-space: nowrap; }
.enq-morse b { display: inline-block; width: 1.2em; color: #c0392b; }
.enq-question { margin-top: 12px; padding-top: 10px; border-top: 2px dashed rgba(46, 36, 24, .3); }
.enq-question label { display: block; font: 400 clamp(15px, 4.6cqw, 18px)/1.3 var(--f-machine); font-weight: bold; margin-bottom: 8px; }
.enq-saisie { display: flex; gap: 8px; }
.enq-saisie input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 8px 12px;
  border: 2px solid #2e2418;
  border-radius: 8px;
  background: #fffdf5;
  color: #2e2418;
  font: 400 16px var(--f-machine);
  -webkit-user-select: text;
  user-select: text;
}
.enq-saisie input:focus { outline: 3px solid #b48ae8; outline-offset: 1px; }
.enq-saisie button {
  min-height: 46px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: #2e2418;
  color: #fbf5e3;
  font: 400 15px var(--f-machine);
  text-transform: uppercase;
  cursor: pointer;
}
.enq-question.faux { animation: carte-rate .4s ease; }
.enq-question.resolue .enq-saisie { opacity: .55; pointer-events: none; }
.enq-retour { min-height: 1.3em; margin: 8px 0 0; font: 700 15px var(--f-texte); }
.enq-retour.faux { color: #b03a2e; }
.enq-retour.presque { color: #b06a1e; }
.enq-retour.bon { color: #1e8a4c; }
.enq-indice { display: block; margin-top: 4px; font: italic 700 18px/1.2 var(--f-main); color: #5b2f9a; }
.enq-tampon-resolu, .enq-tampon-classe {
  position: absolute;
  right: 18px; top: 46px;
  padding: 4px 14px;
  border: 4px solid #1e8a4c;
  border-radius: 8px;
  color: #1e8a4c;
  font: 400 26px var(--f-machine);
  text-transform: uppercase;
  letter-spacing: .1em;
  transform: rotate(-12deg);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.enq-tampon-resolu.tape, .enq-tampon-classe.tape { animation: tampon-gros .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.enq-tampon-resolu.pose { opacity: .9; }
@keyframes tampon-gros { 0% { opacity: 0; transform: scale(2.6) rotate(-12deg); } 100% { opacity: .92; transform: scale(1) rotate(-12deg); } }

/* la question finale : la rangée de suspects */
.enq-alignement {
  position: relative;
  width: min(94cqw, 460px);
  padding: 18px 14px 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbf5e3, #efe2c0);
  color: #2e2418;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  transform: scale(.9);
  transition: transform .4s cubic-bezier(.2, 1.3, .4, 1);
}
.enq-suspects.ouvert .enq-alignement { transform: scale(1); }
.enq-alignement h3 { margin: 2px 0 6px; font: 400 clamp(17px, 5.2cqw, 21px)/1.25 var(--f-machine); }
.enq-q { margin: 0 0 12px; font: 700 clamp(20px, 6.2cqw, 25px)/1.15 var(--f-main); color: #5b2f9a; }
.enq-mur {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(255, 255, 255, .25) 18px 19px),
    linear-gradient(180deg, #4a4f5a, #2f333b);
}
.enq-suspect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.enq-photo { width: 78%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #b9a7e8, #ffb6d9); border: 3px solid #fff; display: grid; place-items: end center; }
.enq-photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.enq-plaque { max-width: 100%; padding: 2px 6px; border-radius: 3px; background: #111; color: #fff; font: 400 clamp(9px, 2.9cqw, 12px) var(--f-machine); letter-spacing: -.01em; white-space: nowrap; }
.enq-suspect.non { animation: carte-rate .4s ease; }
.enq-suspect.non .enq-photo { border-color: #ff4d5e; }
.enq-suspect.oui { background: rgba(93, 255, 158, .25); }
.enq-suspect.oui .enq-photo { border-color: #5dff9e; box-shadow: 0 0 22px rgba(93, 255, 158, .9); animation: suspect-oui .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes suspect-oui { 40% { transform: scale(1.15) rotate(-4deg); } }
.enq-verdict { min-height: 2.6em; margin: 10px 0 0; font: 700 15px/1.3 var(--f-texte); color: #6a4a20; }
.enq-verdict.oui { color: #1e8a4c; font: 700 clamp(19px, 6cqw, 24px)/1.15 var(--f-main); }
.enq-tampon-classe { right: 50%; top: 40%; transform: translate(50%, 0) rotate(-12deg); font-size: clamp(24px, 8cqw, 34px); border-color: #c0392b; color: #c0392b; white-space: nowrap; }
.enq-tampon-classe.tape { animation-name: tampon-classe; }
@keyframes tampon-classe { 0% { opacity: 0; transform: translate(50%, 0) scale(2.6) rotate(-12deg); } 100% { opacity: .95; transform: translate(50%, 0) scale(1) rotate(-12deg); } }

/* ---------- La vieille télé ---------- */
.cer-tele { position: absolute; inset: 0; opacity: 0; pointer-events: none !important; z-index: 9; }
.cer-tele.visible { opacity: 1; pointer-events: auto !important; animation: tele-arrive 1.25s cubic-bezier(.2, 1, .3, 1) both; }
.cer-tele.visible.part { animation: tele-part .9s cubic-bezier(.5, 0, .8, .4) both; pointer-events: none !important; }
/* la télé tombe d'en haut, rebondit et se pose ; à la fin elle se tasse, saute et s'envole en tournant */
@keyframes tele-arrive {
  0% { transform: translateY(-115%) rotate(-10deg) scale(.7); }
  55% { transform: translateY(4%) rotate(3deg) scale(1.02, .95); }
  72% { transform: translateY(-3%) rotate(-1.5deg) scale(.99, 1.02); }
  86% { transform: translateY(1%) rotate(.5deg); }
  100% { transform: none; }
}
@keyframes tele-part {
  0% { transform: none; opacity: 1; }
  25% { transform: translateY(3%) scale(1.06, .9); opacity: 1; }
  100% { transform: translateY(-120%) rotate(14deg) scale(.45); opacity: 0; }
}
.tele {
  position: absolute;
  left: 50%; top: 50%;
  width: min(86cqw, 400px);
  margin-left: calc(min(86cqw, 400px) / -2);
  aspect-ratio: 1;
  transform: translateY(-50%);
  transition: transform 1.3s cubic-bezier(.6, 0, .25, 1);
}
.tele:not(.zoom) { transform: translateY(-50%); }
.tele.zoom { transition-duration: 1.2s; }
.tele-img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .7)); pointer-events: none; }
/* l'écran, posé pile sur le verre noir de l'image */
.tele-ecran {
  position: absolute;
  left: 8.95%; top: 33.74%;
  width: 65.35%; height: 48.33%;
  border-radius: 12% / 16%;
  overflow: hidden;
  background: transparent;
}
.tele-neige { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; image-rendering: pixelated; }
.tele-ligne { position: absolute; left: 0; right: 0; top: 50%; height: 0; background: #fff; box-shadow: 0 0 18px #fff; opacity: 0; }
.tele-ecran.allume .tele-ligne { animation: crt-ligne .8s ease-out forwards; }
.tele-ecran.allume .tele-neige { animation: crt-neige .6s .5s ease-out forwards; }
@keyframes crt-ligne { 0% { opacity: 1; left: 50%; right: 50%; height: 2px; top: 50%; } 40% { opacity: 1; left: 0; right: 0; height: 2px; top: 50%; } 100% { opacity: 0; left: 0; right: 0; height: 100%; top: 0; } }
@keyframes crt-neige { 100% { opacity: .85; } }
.tele-ecran.eteint .tele-neige { opacity: .85; animation: crt-off .5s ease-in forwards; }
@keyframes crt-off { 50% { transform: scaleY(.02); opacity: 1; filter: brightness(3); } 100% { transform: scale(0, .02); opacity: 0; } }
.tele-plein { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.tele-plein.visible { opacity: 1; pointer-events: auto; }
.tele-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tele-crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, .55) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .7);
}
.tele-plein.neige .tele-video { filter: contrast(3) brightness(2) saturate(0); opacity: .4; }
.tele-lancer {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 28px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 60, 110, .9);
  color: #fff;
  font: 700 20px var(--f-texte);
  cursor: pointer;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .cer-logo-titre::before, .cer-logo-titre::after, .cer-voyant, .cer-hud.alarme .cer-zone, .enq-flotte, .enq-telecommande.active, .cer-note { animation: none !important; }
  .scene-cerveau { --k: 0 !important; }
}

/* =====================================================================
   MONDE DES PORTES : la porte du cerveau, le ciel lumineux, le grand final
   ===================================================================== */
/* la porte du cerveau ne s'ouvre que pour elle (lumière rouge d'alarme derrière) */
.scene-orage:not(.porte-cerveau) #battants-3, .scene-orage:not(.porte-cerveau) .interieur-alarme { opacity: 0; }
.scene-orage.porte-cerveau .interieur-alarme { animation: alarme-porte .375s steps(2) infinite; }
@keyframes alarme-porte { 50% { filter: brightness(.45); } }

/* après les 3 épreuves : grand ciel lumineux et des oiseaux */
.monde::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% 22%, rgba(255, 250, 225, .55), rgba(255, 250, 225, 0) 70%),
    linear-gradient(180deg, rgba(150, 205, 255, .26) 0%, rgba(255, 236, 205, .14) 55%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 4s ease;
}
.scene-orage:not([data-meteo="3"]) .monde::after { visibility: hidden; }
.scene-orage[data-meteo="3"] .monde::after { opacity: 1; }
.scene-orage .orage-cover { transition: filter 4s ease; }
.scene-orage[data-meteo="3"] .orage-cover { filter: blur(10px) brightness(1.08) saturate(1.2); }
.oiseaux-vol { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.oiseau {
  position: absolute;
  left: 0;
  width: var(--taille);
  animation: vol-oiseau var(--duree) linear var(--delai) infinite;
}
.oiseau.gauche { animation-direction: reverse; }
.oiseau.gauche svg { scale: -1 1; }
.oiseau svg { display: block; width: 100%; fill: rgba(64, 40, 86, .72); transform-origin: 50% 60%; animation: battre var(--battement) ease-in-out infinite alternate; }
@keyframes vol-oiseau {
  0% { transform: translate(-12cqw, 0); }
  50% { transform: translate(50cqw, -18px); }
  100% { transform: translate(112cqw, 6px); }
}
@keyframes battre { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }

/* le grand final */
.scene-orage.finale .enveloppe-dec {
  filter: drop-shadow(0 0 calc(14px + var(--eclat, 0) * 40px) rgba(255, 220, 140, .95)) brightness(calc(1 + var(--eclat, 0) * .35));
  animation: lettre-tremble calc(.5s - var(--tremble, 0) * .17s) ease-in-out infinite;
  transition: none;
}
@keyframes lettre-tremble {
  0%, 100% { rotate: calc(var(--tremble, 0) * -2.6deg); translate: 0 0; }
  25% { rotate: calc(var(--tremble, 0) * 2deg); translate: calc(var(--tremble, 0) * 3px) calc(var(--tremble, 0) * -2px); }
  50% { rotate: calc(var(--tremble, 0) * 2.6deg); translate: 0 calc(var(--tremble, 0) * 2px); }
  75% { rotate: calc(var(--tremble, 0) * -2deg); translate: calc(var(--tremble, 0) * -3px) 0; }
}
.scene-orage.finale.ouverte .enveloppe-dec { animation: lettre-ouverte .45s ease-out forwards; }
@keyframes lettre-ouverte { to { opacity: 0; scale: 1.6; filter: brightness(3) drop-shadow(0 0 40px #fff); } }
.finale-rayons {
  position: absolute;
  left: 50%; top: 50%;
  width: 150cqw; height: 150cqw;
  margin: -75cqw 0 0 -75cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 190, .55) 0deg 7deg, rgba(255, 240, 190, 0) 7deg 20deg);
  /* (plus petit qu'avant, même rayon visible : moins de mémoire pour le téléphone) */
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 44%, transparent 97%);
  mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 44%, transparent 97%);
  opacity: 0;
  pointer-events: none;
  animation: rayons-tournent 24s linear infinite;
}
.scene-orage.ouverte .finale-rayons { transition: opacity 2s ease, visibility 0s linear 2s; opacity: 0 !important; visibility: hidden; }
.finale-cible {
  position: absolute;
  left: 50%; top: 50%;
  width: 86%;
  height: 60cqw;
  transform: translate(-50%, -50%);
  border: 0;
  background: none;
  z-index: 18;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity .5s ease;
}
.finale-cible.visible { opacity: 1; }
/* un doigt montre qu'il faut taper sur la lettre (pas de texte) ; il s'en va au premier coup */
.finale-doigt {
  position: absolute;
  left: calc(50% - 20px); top: calc(50% + 4px);
  font-size: 52px; line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(40, 10, 60, .5));
  animation: doigt-tape 1.2s ease-in-out infinite;
  transition: opacity .3s ease;
}
@keyframes doigt-tape {
  0%, 100% { transform: translate(18px, 30px) rotate(-12deg); }
  40% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(0, 3px) rotate(-6deg) scale(.9); }
  62% { transform: translate(0, 0) rotate(-6deg); }
}
.finale-onde {
  position: absolute;
  left: 50%; top: 50%;
  width: 70px; height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  border: 3px solid rgba(255, 243, 196, .95);
  box-shadow: 0 0 14px rgba(255, 210, 122, .9);
  pointer-events: none;
  opacity: 0;
  animation: onde-tape 1.2s ease-out infinite;
  transition: opacity .3s ease;
}
@keyframes onde-tape { 0%, 48% { opacity: 0; transform: scale(.3); } 52% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.finale-cible.tapee .finale-doigt, .finale-cible.tapee .finale-onde { opacity: 0; animation: none; }
.finale-points { position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%); display: flex; gap: 8px; }
.finale-points i { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #7a4a9a; background: rgba(61, 31, 92, .35); box-shadow: 0 0 6px rgba(255, 255, 255, .6); transition: background .2s ease, transform .2s ease; }
.finale-points i.plein { background: #ffd27a; border-color: #fff3c4; box-shadow: 0 0 12px #ffd27a, 0 0 4px #fff; transform: scale(1.3); }
.finale-fente {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--l);
  height: 5px;
  margin-top: -2.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--a));
  background: linear-gradient(90deg, rgba(255, 255, 240, .95), rgba(255, 230, 160, .6) 50%, rgba(255, 220, 140, 0));
  filter: blur(1px) drop-shadow(0 0 6px #ffe7a0);
  pointer-events: none;
  z-index: 17;
  animation: fente .5s ease-out both;
}
@keyframes fente { 0% { width: 0; opacity: 1; } 100% { width: var(--l); opacity: .85; } }
.finale-flash { position: absolute; inset: 0; background: #fffdf2; z-index: 35; pointer-events: none; }
.lettre-volante {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 36;
  font-family: var(--f-texte);
  font-weight: 700;
  color: #ffd27a;
  -webkit-text-stroke: 1px #7a3f10;
  text-shadow: 0 0 10px rgba(255, 220, 140, .95), 0 2px 0 #7a3f10;
  pointer-events: none;
  will-change: transform, opacity;
}
.lettre-volante.hiero { font-family: 'Hieroglyphes', serif; color: #fff3c4; -webkit-text-stroke: 0; text-shadow: 0 0 6px #b86ee0, 0 0 2px #5a2d6e, 0 1px 0 #5a2d6e; }
.lettre-volante:nth-child(4n) { color: #ff9fcd; }
.lettre-volante:nth-child(5n) { color: #c9b6ff; }

/* le parchemin final : tout se déchiffre en or */
/* lueur dorée en ombre de boîte (un filtre se redessinerait à chaque lettre qui change) */
.parchemin.finale .parchemin-papier { box-shadow: inset 0 0 30px rgba(160, 110, 40, .35), 0 0 34px 8px rgba(255, 214, 120, .5), 0 18px 40px rgba(20, 8, 30, .5); }
.parchemin.finale .parchemin-baton { box-shadow: 0 4px 10px rgba(40, 15, 5, .45), 0 0 20px rgba(255, 214, 120, .6); }
.parchemin.finale .parchemin-texte .hiero.brouille { color: #c27a1a; text-shadow: 0 0 8px rgba(255, 200, 100, .8); }
.parchemin.finale .parchemin-texte .hiero.brouille.lettres { font-family: inherit; font-size: 1em; letter-spacing: .04em; opacity: .9; }
.parchemin-texte .mot.dore { animation: mot-dore 1.6s ease-out both; }
@keyframes mot-dore {
  0% { color: #fff; text-shadow: 0 0 16px #ffd27a, 0 0 4px #fff; }
  100% { color: var(--prune); text-shadow: 0 0 0 transparent; }
}
.parchemin.finale.dechiffre .parchemin-titre { animation: titre-dore 1.2s ease-out both; }
@keyframes titre-dore { 0% { transform: scale(1.4); color: #fff; text-shadow: 0 0 18px #ffd27a; } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .scene-orage.finale .enveloppe-dec, .oiseau, .oiseau svg, .finale-rayons, .finale-doigt, .finale-onde, .scene-orage.porte-cerveau .interieur-alarme { animation: none !important; }
}

/* le ciel du grand final (sans les portes) : en fondu, sous le ciel animé */
.scene-orage .ciel-final { opacity: 0; transition: opacity 2.6s ease; }
.scene-orage.ciel-final .ciel-final { opacity: 1; }
/* en haut et en bas de l'écran (hors du monde), le même ciel étiré et flouté : les couleurs se raccordent */
.orage-cover.ciel-final { object-fit: fill; }

/* le diagnostic qui s'écrit dans le noir avant le drop */
.cer-terminal {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(var(--bas) + 28px);
  pointer-events: none !important;
  font: 400 clamp(8px, 2.6cqw, 11px)/1.9 var(--f-pixel);
  color: #ff8a9c;
  text-shadow: 0 0 6px rgba(255, 40, 80, .8);
  transition: opacity .25s ease;
}
.cer-terminal p { margin: 0; animation: ligne-terminal .35s steps(4) both; }
.cer-terminal b { color: #ff2d4a; font-weight: 400; animation: voyant .4s steps(2) infinite; }
.cer-terminal.part { opacity: 0; }
@keyframes ligne-terminal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }