/* Scène unique au format téléphone. Sur un grand écran, elle reste au format
   portrait, centrée sur le fond flouté, pour voir le rendu comme sur un iPhone. */
:root {
  --or: #ffd27a;
  --lavande: #c9b6ff;
  --rose: #ffb6d9;
  --prune: #3d1f5c;
  --prune-2: #5a2d6e;
  --creme: #fff8e1;
  --nuit: #1b1030;
  --noir: #000;
  --rose-coeur: #ff8fb8;
  --degrade: linear-gradient(135deg, var(--lavande) 0%, var(--rose) 55%, var(--or) 100%);
  --lueur: 0 4px 14px rgba(255, 170, 80, .5);
  --f-texte: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  color-scheme: dark;
}

@font-face {
  font-family: 'Hieroglyphes';
  src: url('../assets/hieroglyphes.woff2') format('woff2');
  font-display: block;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
body {
  background:
    linear-gradient(rgba(27, 16, 48, .62), rgba(27, 16, 48, .62)),
    url('../assets/fond-flou.webp') center / cover no-repeat,
    var(--nuit);
  color: var(--creme);
  font-family: var(--f-texte);
}
img { -webkit-user-drag: none; }
/* La page publiée ajoute « img { max-width: 100% } » : les fonds débordent volontairement de l'écran */
#stage img { max-width: none; }

#stage {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--noir);
  container-type: size;
}
@media (min-aspect-ratio: 3/4) {
  #stage {
    width: 56.25vh;
    width: 56.25dvh;
    box-shadow: 0 0 0 1px rgba(255, 210, 122, .35), 0 24px 90px rgba(0, 0, 0, .65);
  }
}

/* Coupe toutes les transitions (rejeu) */
.sans-transition, .sans-transition * { transition: none !important; }

/* ---------- Fond : version floue pré-calculée qui se dissipe (léger pour le téléphone) ---------- */
.fond, .fond-flou, .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  pointer-events: none;
}
.fond { transform: scale(1.03); transition: transform 2.4s ease-out; }
.fond.reveille { transform: scale(1); }
.fond-flou { z-index: 1; transform: scale(1.03); transition: opacity 2.4s ease-out; }
.fond-flou.dissipe { opacity: 0; }

/* ---------- Paupières violettes ---------- */
.paupiere {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, #7a5cc4 0%, #b79ce8 55%, #d9b8f0 100%);
  z-index: 9;
  pointer-events: none;
  transition: transform 2.4s cubic-bezier(.45, .05, .25, 1);
}
.paupiere.instant { transition: none; }
.paupiere.haut { top: 0; border-bottom: 3px solid var(--or); }
.paupiere.bas  { bottom: 0; border-top: 3px solid var(--or); }
.paupiere.ouvert.haut { transform: translateY(-101%); }
.paupiere.ouvert.bas  { transform: translateY(101%); }

/* ---------- Logo ---------- */
.logo-wrap {
  position: absolute;
  left: 50%;
  top: max(4dvh, env(safe-area-inset-top));
  width: min(86vw, 50dvh);
  width: min(86cqw, 50cqh);
  transform: translate(-50%, -140dvh);
  /* hors de l'écran, il est invisible : le téléphone n'a pas à garder son image en mémoire */
  visibility: hidden;
  transition: transform 6s cubic-bezier(.45, 0, .25, 1), visibility 0s linear 6s;
  z-index: 2;
  will-change: transform;
}
.logo-wrap.entre { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s, 0s; }
.logo-wrap.sortie {
  transform: translate(-50%, 140dvh);
  visibility: hidden;
  transition: transform 1.2s cubic-bezier(.6, 0, .8, .4), visibility 0s linear 1.2s;
}
.logo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(255, 170, 80, .45));
}

/* ---------- Bouton JOUER ---------- */
.jouer-wrap {
  position: absolute;
  left: 50%;
  bottom: max(22dvh, calc(env(safe-area-inset-bottom) + 48px));
  width: min(62vw, 28dvh);
  width: min(62cqw, 28cqh);
  transform: translate(-50%, 130dvh);
  visibility: hidden;
  transition: transform 3s cubic-bezier(.45, 0, .25, 1), visibility 0s linear 3s;
  z-index: 3;
  will-change: transform;
}
.jouer-wrap.entre { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s, 0s; }
.jouer-wrap.sortie {
  transform: translate(-50%, 130dvh);
  visibility: hidden;
  transition: transform 1.2s cubic-bezier(.6, 0, .8, .4), visibility 0s linear 1.2s;
}
#jouer {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#jouer img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(255, 170, 80, .45));
}
#jouer:active img { transform: scale(.97); }
#jouer:focus-visible { outline: 2px solid var(--or); outline-offset: 6px; border-radius: 40px; }

/* Blague : téléportation */
#jouer.tp-out {
  transform: scale(.1) rotate(-14deg);
  opacity: 0;
  transition: transform .18s ease-in, opacity .18s ease-in;
}
#jouer.tp-in { animation: tp-in .5s ease-out; }
@keyframes tp-in {
  0%   { transform: scale(1.6); opacity: 0; filter: brightness(2.5) blur(4px); }
  60%  { transform: scale(.95); opacity: 1; filter: brightness(1.4); }
  100% { transform: scale(1); opacity: 1; filter: none; }
}

/* Flottement une fois arrivé */
.flotte-logo   { animation: flotter 6s ease-in-out infinite; }
.flotte-bouton { animation: flotter 4.5s ease-in-out infinite; }
@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Scènes de la porte ---------- */
.scene { opacity: 0; z-index: 4; }
#scene-ouverte { transition: opacity 2s ease-in-out; }
#scene-fermee  { transition: opacity 2.5s ease-in-out; }
.scene.visible { opacity: 1; }

/* ---------- Fondu noir ---------- */
.fondu {
  position: absolute;
  inset: 0;
  background: var(--noir);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  /* transparent, il sort de l'affichage (un calque plein écran de moins à garder en mémoire) */
  visibility: hidden;
  transition: opacity 1.2s ease-in-out, visibility 0s linear 1.2s;
}
.fondu.actif, .fondu.manuel { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.fondu.manuel:not(.actif) { opacity: 0; }

/* ---------- Dialogue ---------- */
.dialogue {
  position: absolute;
  left: 50%;
  bottom: max(15dvh, calc(env(safe-area-inset-bottom) + 20px));
  width: min(92vw, 560px);
  width: min(92cqw, 560px);
  transform: translate(calc(-50% - 110vw), 0);
  transform: translate(calc(-50% - 110cqw), 0);
  opacity: 0;
  /* sorti de l'écran, il devient invisible (le téléphone n'a plus à garder son image en mémoire) */
  visibility: hidden;
  transition: transform 3s cubic-bezier(.45, 0, .25, 1), opacity .6s ease, bottom .9s ease, visibility 0s linear 3s;
  z-index: 15;
  will-change: transform;
}
.dialogue.entre { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.bulle {
  position: relative;
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  animation: flotte-bulle 5s ease-in-out infinite;
  transition: width .9s ease;
}
@keyframes flotte-bulle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.bulle-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: opacity .6s ease;
  filter: drop-shadow(0 6px 16px rgba(255, 170, 80, .4));
}
.bulle-img + .bulle-img { position: absolute; left: 0; top: 0; }
.bulle-img { transition: opacity .35s ease; }
.bulle-img.cache { opacity: 0; }

.texte-bulle {
  position: absolute;
  left: 10.5%;
  right: 10.4%;
  top: 58%;
  height: 26%;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: clamp(16px, 4.8vw, 26px);
  font-size: clamp(16px, 4.8cqw, 26px);
  line-height: 1.25;
  color: var(--prune);
  text-shadow: 0 1px 0 #fff, 0 0 8px #fff;
  pointer-events: none;
}
/* Copie invisible du texte : sert à trouver la plus grande taille qui tient dans la bulle */
.texte-mesure {
  visibility: hidden;
  display: block;
  height: auto;
}

/* Boutons du dialogue */
.suivant {
  display: block;
  margin: 12px auto 0;
  min-height: 46px;
  padding: 12px 30px;
  border-radius: 999px;
  border: 2px solid var(--or);
  background: var(--degrade);
  color: var(--prune-2);
  font: 700 17px var(--f-texte);
  box-shadow: var(--lueur);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .15s ease;
}
.suivant.visible { opacity: 1; pointer-events: auto; }
.suivant:active { transform: scale(.96); }

/* Zone de réponse (calendrier) : se déplie puis se replie */
.reponse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height .9s ease, margin-top .9s ease, opacity .5s ease;
}
.reponse.visible { max-height: 480px; margin-top: 12px; opacity: 1; pointer-events: auto; }
.reponse .suivant { opacity: 1; pointer-events: auto; margin: 0; }

/* Mot de passe de la lettre */
.mdp-zone {
  width: 84%;
  padding: 12px 14px 10px;
  border-radius: 18px;
  border: 2px solid var(--or);
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 4px 14px rgba(255, 170, 80, .35);
  color: var(--prune);
  font-family: var(--f-texte);
  text-align: center;
}
.mdp-zone.secoue { animation: secouer .4s ease; }
@keyframes secouer {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}
.mdp-label { display: block; margin-bottom: 8px; font: 700 15px var(--f-texte); color: var(--prune-2); }
.mdp {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 2px solid #e3cfff;
  background: #fff;
  color: var(--prune);
  font: 600 18px var(--f-texte);     /* 16 px minimum : sinon l'iPhone zoome sur le champ */
  text-align: center;
  letter-spacing: .04em;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.mdp:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(255, 210, 122, .35); }
.mdp-erreur { min-height: 1.2em; margin: 6px 0 0; font: 600 14px var(--f-texte); color: #c0392b; }

/* Pendant la question : le bouton Suivant (caché) ne prend plus de place */
.dialogue.mode-question #suivant { display: none; }

/* Pendant la question : la bulle rapetisse et descend pour que tout tienne sur l'écran */
@media (max-height: 780px) {
  .dialogue.mode-question { bottom: max(2dvh, calc(env(safe-area-inset-bottom) + 10px)); }
  .dialogue.mode-question .bulle { width: 70%; }
  .dialogue.mode-question .mdp-zone { width: 92%; }
}
@media (max-height: 600px) {
  .dialogue.mode-question .bulle { width: 64%; }
  .dialogue.mode-question .reponse { gap: 8px; }
  .dialogue.mode-question .reponse.visible { margin-top: 8px; }
}

/* Cadeau : Pourquoi pas ? puis Jamais de la vie */
.choix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .6s ease, margin-top .6s ease;
}
.choix.visible { max-height: 240px; margin-top: 12px; padding-bottom: 6px; }
.choix .suivant {
  width: 72%;
  margin: 0;
  opacity: 1;
  pointer-events: auto;
  white-space: nowrap;
  font-size: 16px;
  transition: opacity .4s ease, transform .4s ease;
}
.choix .suivant.disparu { opacity: 0; pointer-events: none; transform: scale(.6); }

/* ---------- Volume ---------- */
.volume-box {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
}
#volume-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--or);
  background: var(--degrade);
  color: var(--prune-2);
  box-shadow: 0 4px 12px rgba(255, 170, 80, .45);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
#volume-btn svg { width: 22px; height: 22px; }
.volume-box.muet .ondes { opacity: 0; }
#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 8px;
  border-radius: 999px;
  background: var(--degrade);
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition: width .3s ease, opacity .3s ease;
}
.volume-box.ouvert #volume-slider { width: 120px; opacity: 1; pointer-events: auto; }
.volume-box.sans-curseur #volume-slider { display: none; }
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--or);
  background: var(--degrade);
  box-shadow: 0 2px 8px rgba(255, 170, 80, .5);
  cursor: pointer;
}
#volume-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--or);
  background: var(--degrade);
  box-shadow: 0 2px 8px rgba(255, 170, 80, .5);
  cursor: pointer;
}

/* ---------- Boutons de fin (test) ---------- */
.fin-boutons {
  position: absolute;
  left: 16px; right: 16px;
  bottom: max(4dvh, calc(env(safe-area-inset-bottom) + 14px));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
.fin-boutons.visible { opacity: 1; pointer-events: auto; }
.rejouer {
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid var(--or);
  background: var(--degrade);
  color: var(--prune-2);
  font: 700 17px var(--f-texte);
  box-shadow: var(--lueur);
  cursor: pointer;
}

@media (max-height: 640px) {
  .jouer-wrap { bottom: 9dvh; }
}

/* ---------- Écran de réveil ---------- */
.reveil {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px;
  border: 0;
  background: transparent;
  color: var(--creme);
  font-family: var(--f-texte);
  cursor: pointer;
  transition: opacity .8s ease;
}
.reveil:disabled { cursor: progress; }
.reveil.parti { opacity: 0; pointer-events: none; }
.reveil-chat {
  position: relative;
  display: block;
  width: min(64%, 320px);
  transition: transform .9s ease;
}
.reveil.parti .reveil-chat { transform: translateY(-30px) scale(.96); }
.reveil-chat img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 8px 20px rgba(40, 10, 70, .45));
  animation: respire 4s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.zzz {
  position: absolute;
  left: 40%;
  top: 4%;
  font-weight: 700;
  color: var(--creme);
  text-shadow: 0 2px 6px rgba(60, 20, 80, .6);
}
.zzz span {
  position: absolute;
  opacity: 0;
  animation: zzz 3.6s ease-in-out infinite;
}
.zzz span:nth-child(1) { font-size: 16px; }
.zzz span:nth-child(2) { font-size: 20px; animation-delay: 1.2s; }
.zzz span:nth-child(3) { font-size: 26px; animation-delay: 2.4s; }
@keyframes zzz {
  0%   { opacity: 0; transform: translate(0, 0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(24px, -48px); }
}
.reveil-texte {
  max-width: 22ch;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 8px rgba(40, 10, 70, .65);
}
.reveil.pret .reveil-texte { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.reveil-barre {
  display: block;
  width: min(46%, 220px);
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 248, 225, .25);
  overflow: hidden;
  transition: opacity .4s ease;
}
.reveil-barre i {
  display: block;
  height: 100%;
  background: var(--or);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .3s ease;
}
.reveil.pret .reveil-barre { opacity: 0; }

/* ---------- Caresses ---------- */
.coeur {
  position: absolute;
  font-size: 26px;
  color: var(--rose-coeur);
  text-shadow: 0 0 8px #fff;
  pointer-events: none;
  animation: monte 1.2s ease-out forwards;
}
@keyframes monte { to { transform: translateY(-80px); opacity: 0; } }

/* ---------- Cadeau ---------- */
.cadeau {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--taille, 110px); height: var(--taille, 110px);
  z-index: 22;
  text-align: center;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.cadeau.fin { opacity: 0; transform: translate(-50%, -75%) scale(.9); }
.cadeau .boite {
  display: block;
  font-size: var(--taille, 110px);
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(255, 170, 80, .6));
  animation: tremble .25s linear infinite;
}
.cadeau.ouvert .boite { animation: none; transform: scale(.7) rotate(-8deg); transition: transform .4s ease; }
.cadeau .etincelle {
  position: absolute;
  left: 50%; top: 40%;
  color: var(--or);
  font-size: 18px;
  text-shadow: 0 0 6px #fff;
}
@keyframes tremble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

/* ---------- Confettis d'anniversaire ---------- */
.confetto {
  position: absolute;
  top: 0;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  z-index: 16;
  pointer-events: none;
}

/* ---------- Téléphone à l'horizontale ---------- */
.paysage {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: var(--nuit);
  color: var(--creme);
  font: 600 18px var(--f-texte);
  text-align: center;
}
.paysage p { margin: 0; }
.tel {
  width: 34px; height: 58px;
  border: 3px solid var(--or);
  border-radius: 8px;
  animation: tourne 2.4s ease-in-out infinite;
}
@keyframes tourne {
  0%, 30%   { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .paysage { display: flex; }
}


/* =====================================================================
   Raccourcis de test sous l'écran de réveil
   ===================================================================== */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.raccourcis {
  position: absolute;
  left: 0; right: 0;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  z-index: 61;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px;
  transition: opacity .6s ease;
}
.raccourcis button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 248, 225, .7);
  background: rgba(27, 16, 48, .35);
  color: var(--creme);
  font: 500 13px var(--f-texte);
  cursor: pointer;
}
.raccourcis button:disabled { opacity: .4; cursor: progress; }
.raccourcis.parti { opacity: 0; pointer-events: none; }

/* =====================================================================
   Dialogue dans les nouvelles scènes : plus bas, entrée plus vive
   ===================================================================== */
.dialogue.vif { transition: transform 1.3s cubic-bezier(.45, 0, .25, 1), opacity .5s ease, bottom .9s ease, visibility 0s linear 1.3s; }
.dialogue.entre { transition-delay: 0s, 0s, 0s, 0s; }
.dialogue.compact { bottom: max(3dvh, calc(env(safe-area-inset-bottom) + 12px)); }
.dialogue.compact .bulle { width: 100%; }
@media (max-height: 640px) {
  .dialogue.compact .bulle { width: 90%; }
}

/* =====================================================================
   Scène des 3 portes sous l'orage (design en image, éléments découpés)
   Le « monde » garde les proportions du design (941 x 1672) et couvre
   l'écran en largeur ; sur les écrans plus allongés, l'image floutée
   comble le haut et le bas.
   ===================================================================== */
.scene-orage {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  background: var(--nuit);
  will-change: transform;
}
.scene-orage.zoom { transition: transform 2.8s cubic-bezier(.55, 0, .85, .3); transform: scale(7); }
.scene-orage.instant, .scene-orage.instant * { transition: none !important; }
.orage-cover {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(10px) brightness(.7);
}
.monde {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 941 / 1672;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.monde > img, .monde > svg, .monde > div, .monde > canvas,
.flotteur > img, .flotteur > svg, .flotteur > div { position: absolute; }
.monde-fond, .ciel-gl { inset: 0; width: 100%; height: 100%; display: block; }
.ciel-gl { opacity: 0; transition: opacity .8s ease; }
.ciel-gl.pret { opacity: 1; }
.flotteur { inset: 0; pointer-events: none; will-change: transform; }
.porte-dec { filter: drop-shadow(0 0 5px rgba(255, 214, 140, .75)); }
.enveloppe-dec { filter: drop-shadow(0 0 14px rgba(255, 210, 122, .85)); }
.plaque {
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 3.2s ease;
}
.voile {
  inset: 0;
  background: rgba(20, 12, 40, .18);
  transition: opacity 2.8s ease;
}
.orage-cover.tempete { transition: opacity 3.2s ease; }
.scene-orage.revele .orage-cover.tempete,
.scene-orage.revele .plaque { opacity: 0; }
.scene-orage.revele .voile { opacity: 0; }
.orage-nuages {
  position: absolute;
  left: 0;
  top: -2%;
  width: 200%;
  height: 16%;
  background: url('../assets/nuages-orage.webp') repeat-x 0 0 / 50% 100%;
  opacity: .45;
  animation: derive 90s linear infinite;
  pointer-events: none;
  transition: opacity 4s ease;
}

/* Météo : chaque épreuve réussie éclaircit le ciel (data-meteo = nombre d'épreuves réussies) */
.soleil, .soleil-rayons { pointer-events: none; opacity: 0; transition: opacity 4s ease; mix-blend-mode: screen; }
.soleil {
  inset: 0;
  background:
    radial-gradient(42% 24% at 89.8% 41.9%, rgba(255, 238, 180, .8) 0%, rgba(255, 196, 120, .35) 42%, rgba(255, 196, 120, 0) 100%),
    linear-gradient(180deg, rgba(255, 210, 150, .22) 0%, rgba(255, 190, 150, .08) 45%, rgba(255, 190, 150, 0) 70%);
}
.soleil-rayons {
  left: 89.8%;
  top: 41.9%;
  width: 150cqw;
  height: 150cqw;
  margin: -75cqw 0 0 -75cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 200, .3) 0deg 6deg, rgba(255, 240, 200, 0) 6deg 18deg);
  /* même rayon visible qu'avant (73 % de la largeur), dans un calque bien plus petit : moins de mémoire */
  -webkit-mask-image: radial-gradient(closest-side, #000 4.6%, rgba(0, 0, 0, .45) 43%, transparent 98%);
  mask-image: radial-gradient(closest-side, #000 4.6%, rgba(0, 0, 0, .45) 43%, transparent 98%);
  animation: rayons-tournent 120s linear infinite;
}
.scene-orage[data-meteo="1"] .soleil { opacity: .8; }
.scene-orage[data-meteo="1"] .orage-nuages { opacity: .12; }
.scene-orage[data-meteo="2"] .soleil { opacity: 1; }
.scene-orage[data-meteo="2"] .soleil-rayons { opacity: .85; }
.scene-orage[data-meteo="2"] .orage-nuages,
.scene-orage[data-meteo="3"] .orage-nuages { opacity: 0; }
.scene-orage[data-meteo="3"] .soleil,
.scene-orage[data-meteo="3"] .soleil-rayons { opacity: 1; }
.scene-orage.ouverte .soleil-rayons { display: none; } /* après l'explosion : les rayons de la finale prennent le relais (une couche de moins pour l'iPhone) */
@keyframes derive { to { transform: translateX(-50%); } }
.pluie, .foudre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.foudre { opacity: 0; filter: drop-shadow(0 0 6px #d8d0ff) drop-shadow(0 0 16px #9d8cff); }
/* plus d'orage : la pluie et les éclairs sortent de l'affichage (3 calques plein écran en moins) */
.scene-orage:not([data-meteo="0"]) .pluie,
.scene-orage:not([data-meteo="0"]) .foudre,
.scene-orage:not([data-meteo="0"]) .eclair { display: none; }
.eclair {
  position: absolute;
  inset: 0;
  background: #ece8ff;
  opacity: 0;
  pointer-events: none;
}

/* Fils dorés : tracés par-dessus ceux du design pendant l'arrivée */
.fils { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 210, 122, .9)); }
.fil { fill: none; stroke: #ffe39a; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.flux { fill: none; stroke: #fffbe8; stroke-width: 7; stroke-dasharray: 7 30; stroke-linecap: round; opacity: 0; transition: opacity .8s ease; animation: flux 1.1s linear infinite; }
.flux.visible { opacity: 1; }
@keyframes flux { to { stroke-dashoffset: -37; } }
.particule { fill: #fff6d0; }

/* Découpes qui descendent du ciel */
.decoupe {
  display: block;
  height: auto;
  transform: translateY(-130vh);
  transform-origin: 50% 0;
  transition: transform 1.4s cubic-bezier(.3, 1.25, .55, 1);
  pointer-events: none;
}
.enveloppe-dec { transition-duration: 1.7s; }
.decoupe.posee { transform: translateY(0); }
.decoupe.descend { animation: balance 1.6s ease-out; }
@keyframes balance {
  0%   { rotate: -5deg; }
  40%  { rotate: 4deg; }
  70%  { rotate: -2deg; }
  100% { rotate: 0deg; }
}
.decoupe.reussie { filter: drop-shadow(0 0 14px rgba(255, 210, 122, .95)) drop-shadow(0 0 4px #fff3c4); }

/* Ouverture de la porte du puzzle */
.interieur { inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.battants-dec { perspective: 600px; opacity: 0; pointer-events: none; }
.scene-orage.entree .interieur, .scene-orage.entree .battants-dec { opacity: 1; }
.battants-dec img {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  display: block;
  transition: transform 1.5s cubic-bezier(.5, 0, .3, 1);
}
.battant-g { left: 0; transform-origin: 0 50%; }
.battant-d { right: 0; transform-origin: 100% 50%; }
.battants-dec.ouverte .battant-g { transform: rotateY(105deg); }
.battants-dec.ouverte .battant-d { transform: rotateY(-105deg); }

/* Réussite d'une épreuve : coche sur la porte, cadenas qui s'ouvre */
.coche {
  opacity: 0;
  transform: scale(.3);
  transition: opacity .4s ease, transform .6s cubic-bezier(.3, 1.8, .5, 1);
  overflow: visible;
}
.coche.visible { opacity: 1; transform: scale(1.5); }
.cadenas-ouvert {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .4s ease, transform .6s cubic-bezier(.3, 1.8, .5, 1);
}
.cadenas-ouvert::before {
  content: '';
  position: absolute;
  inset: -45% -60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff8d8 0%, #ffd27a 45%, rgba(255, 210, 122, 0) 100%);
}
.cadenas-ouvert svg { position: relative; display: block; width: 100%; overflow: visible; }
.cadenas-ouvert .anse { transform-box: fill-box; transform-origin: 100% 100%; transform: translateY(-3px) rotate(30deg); }
.cadenas-ouvert.visible { opacity: 1; transform: scale(1); }

/* Fondu noir plus doux pour entrer dans ce monde */
.fondu.lent { transition-duration: 1.6s; }
.fondu.tres-lent { transition-duration: 3s; }
.fondu.manuel { transition: none; }          /* fondu « réglé sur l'oeil », animé par le script */

/* =====================================================================
   Épreuve du puzzle : ton design de table, tapis posé dessus
   La table garde ses proportions (941 x 1672) : elle couvre l'écran,
   et sur les téléphones plus allongés, sa version floue comble haut et bas.
   ===================================================================== */
.scene-puzzle {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  background: #5a3418;
}
.table-flou {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: brightness(.85);
}
.table-monde {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 56.28cqh);
  aspect-ratio: 941 / 1672;
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.table-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.polaroid {
  position: absolute;
  left: 69%;
  top: 78.5%;
  width: 24%;
  padding: 1.6% 1.6% 6.4%;
  background: #fbf7ef;
  border-radius: 3px;
  box-shadow: 6px 10px 12px rgba(60, 25, 5, .45);
  opacity: 0;
  transform: rotate(7deg) translateY(-30px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1);
}
.polaroid.visible { opacity: 1; transform: rotate(7deg); }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #e9e1d2; }
.polaroid span {
  position: absolute;
  left: 0; right: 0; bottom: 2%;
  text-align: center;
  font: 600 clamp(13px, 4.2cqw, 22px) 'Caveat', 'Segoe Print', cursive;
  color: var(--prune-2);
}
.tapis {
  position: absolute;
  left: 9.6%;
  top: 29.9%;
  width: 80.8%;
  aspect-ratio: 1;
  padding: 3.5%;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .08), transparent 60%),
    radial-gradient(circle at 50% 45%, #6e4392, #3d1f5c 78%);
  border: 3px solid var(--or);
  box-shadow:
    14px 22px 26px rgba(60, 25, 5, .5),
    inset 0 0 0 6px rgba(61, 31, 92, .6),
    inset 0 0 0 7.5px rgba(255, 210, 122, .45);
}
.tapis.secoue { animation: secouer .45s ease; }

/* Chrono posé sur le bord haut du tapis */
.chrono {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 5px;
  border-radius: 999px;
  border: 2px solid var(--or);
  background: var(--degrade);
  color: var(--prune);
  box-shadow: var(--lueur);
  font: 700 18px var(--f-texte);
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -60%) scale(.6);
  opacity: 0;
  transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1), background-color .3s ease;
  pointer-events: none;
}
.chrono.visible { opacity: 1; transform: translate(-50%, -60%) scale(1); }
.chrono-anneau { width: 30px; height: 30px; transform: rotate(-90deg); }
.chrono-fond { fill: rgba(255, 255, 255, .55); stroke: rgba(61, 31, 92, .25); stroke-width: 5; }
.chrono-arc {
  fill: none;
  stroke: var(--prune);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  stroke-dashoffset: 0;
}
.chrono-s { min-width: 2ch; text-align: right; }
.chrono.urgent { background: linear-gradient(135deg, #ffb6c4 0%, #ff7d9a 100%); animation: urgence .6s ease-in-out infinite; }
.chrono.urgent .chrono-arc { stroke: #8e1236; }
@keyframes urgence {
  0%, 100% { transform: translate(-50%, -60%) scale(1); }
  50%      { transform: translate(-50%, -60%) scale(1.1); }
}
.chrono.fini { background: linear-gradient(135deg, #e3e0ea, #b9b2c8); animation: none; }

.puzzle {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
  touch-action: none;
}
.puzzle.visible { opacity: 1; }
.piece {
  position: absolute;
  width: 33.333%;
  height: 33.333%;
  padding: 1.6%;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: left .34s cubic-bezier(.3, .7, .3, 1), top .34s cubic-bezier(.3, .7, .3, 1), transform .2s ease, padding .7s ease;
}
.piece-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background-size: 300% 300%;
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 3px 0 rgba(30, 10, 40, .4), 0 5px 10px rgba(0, 0, 0, .25);
  transition: border-radius .6s ease, box-shadow .3s ease, border-color .6s ease;
  pointer-events: none;
}
.piece.choisie { z-index: 3; transform: scale(1.08); }
.piece.choisie .piece-img { box-shadow: 0 0 0 3px var(--or), 0 14px 22px rgba(0, 0, 0, .5); }
.piece.cible .piece-img { box-shadow: 0 0 0 3px var(--rose), 0 3px 0 rgba(30, 10, 40, .4); }
.piece.bonne { cursor: default; }
.piece.bonne .piece-img { box-shadow: 0 0 0 2px rgba(255, 210, 122, .85), 0 3px 0 rgba(30, 10, 40, .4); }
.piece.eclat .piece-img { animation: eclat .7s ease-out; }
@keyframes eclat { 0% { filter: brightness(1.7); } 100% { filter: none; } }
.piece.non { animation: non .3s ease; }
@keyframes non {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-4px); }
  70%      { transform: translateX(4px); }
}
.puzzle.perdu .piece { pointer-events: none; }
.puzzle.fini .piece { padding: 0; }
.puzzle.fini .piece-img { border-radius: 0; box-shadow: none; border-color: transparent; }
.brillance {
  position: absolute;
  inset: 3.5%;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
}
.brillance::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 225, .75), transparent);
  transform: skewX(-12deg);
}
.tapis.gagne .brillance::before { animation: balayage 1.3s ease-in-out .3s; }
@keyframes balayage { to { left: 130%; } }
.tapis.gagne { box-shadow: 0 0 0 4px rgba(255, 210, 122, .7), 0 0 40px rgba(255, 210, 122, .7), 0 16px 26px rgba(20, 8, 30, .55); }

.hud {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  z-index: 5;
  padding: 9px 18px;
  border-radius: 999px;
  border: 2px solid var(--or);
  background: rgba(27, 16, 48, .75);
  color: var(--creme);
  font: 600 16px var(--f-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, -100px);
  transition: transform .6s cubic-bezier(.3, 1.4, .5, 1);
}
.hud.visible { transform: translate(-50%, 0); }
.hud b { color: var(--or); }

/* Roue des photos */
.roue-zone {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.roue-zone.visible { opacity: 1; pointer-events: auto; }
.roue-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 44%, rgba(27, 16, 48, .2), rgba(27, 16, 48, .8) 72%);
}
.roue-boite {
  position: relative;
  width: min(80cqw, 48cqh);
  aspect-ratio: 1;
  margin-top: -8cqh;
  transform: scale(.6);
  transition: transform .8s cubic-bezier(.3, 1.5, .5, 1);
}
.roue-zone.visible .roue-boite { transform: scale(1); }
.roue {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--or), 0 0 0 8px #9c6a20, 0 18px 40px rgba(0, 0, 0, .55), 0 0 50px rgba(255, 210, 122, .35);
}
.roue-pointeur {
  position: absolute;
  left: 50%;
  top: -9%;
  width: 14%;
  transform: translateX(-50%);
  transform-origin: 50% 30%;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45));
  overflow: visible;
}
.roue-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid #fff3c4;
  background: radial-gradient(circle at 40% 35%, #fff3c4, #f4c55a 55%, #b8802a);
  color: var(--prune);
  font: 700 clamp(14px, 4.4cqw, 22px) var(--f-texte);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  cursor: pointer;
  animation: appel 1.6s ease-in-out infinite;
}
.roue-btn:disabled { animation: none; cursor: default; }
@keyframes appel {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.07); }
}
.photo-vol {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 8;
  width: min(58cqw, 36cqh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.photo-vol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 6px solid #fbf7ef;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 2px var(--or);
}
.etincelle-libre {
  position: absolute;
  z-index: 9;
  color: var(--or);
  font-size: 20px;
  text-shadow: 0 0 8px #fff;
  pointer-events: none;
}


/* =====================================================================
   Chapeau de fête posé sur la tête de Chouquette
   (position selon l'humeur : la tête n'est pas au même endroit)
   ===================================================================== */
.chapeau {
  position: absolute;
  z-index: 2;
  width: 15%;
  left: 36.6%;
  top: 11.6%;
  transform: translate(-50%, -100%) rotate(12deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: left .35s ease, top .35s ease, transform .35s ease;
}
.chapeau-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 4px rgba(60, 20, 80, .35)); }
.bulle[data-humeur="surpris"] .chapeau { left: 38.5%; top: 11.3%; }
.bulle[data-humeur="grognon"] .chapeau { left: 38%; top: 12%; }
.bulle[data-humeur="triste"]  .chapeau { left: 30.5%; top: 14.6%; transform: translate(-50%, -100%) rotate(11deg); }
.bulle[data-humeur="curieux"] .chapeau { left: 34%; top: 8.4%; transform: translate(-50%, -100%) rotate(-22deg); }
.chapeau.arrive .chapeau-svg { animation: chapeau-tombe .75s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes chapeau-tombe {
  0%   { transform: translateY(-260%) rotate(-25deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
.chapeau.envole .chapeau-svg { animation: chapeau-envole .9s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes chapeau-envole {
  to { transform: translate(140%, -320%) rotate(70deg); opacity: 0; }
}
.chapeau .pompon { transform-box: fill-box; transform-origin: 50% 100%; animation: pompon 1.6s ease-in-out infinite; }
@keyframes pompon { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* =====================================================================
   Fête d'anniversaire : guirlande, titre, ballons
   ===================================================================== */
.fete { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.guirlande {
  position: absolute;
  left: -2%;
  top: max(0px, env(safe-area-inset-top));
  width: 104%;
  height: 13%;
  overflow: visible;
  transform: translateY(-120%);
  transition: transform 1s cubic-bezier(.3, 1.3, .5, 1);
}
.fete.active .guirlande { transform: translateY(0); }
.guirlande .fanion { transform-box: fill-box; transform-origin: 50% 0; animation: fanion 2.4s ease-in-out infinite; }
@keyframes fanion { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.fete-titre {
  position: absolute;
  left: 0; right: 0;
  top: calc(max(0px, env(safe-area-inset-top)) + 11%);
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font: 700 clamp(26px, 9cqw, 46px) var(--f-texte);
  line-height: 1.05;
  color: var(--or);
  -webkit-text-stroke: 3px #8e4b12;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #b8662a, 0 6px 14px rgba(60, 20, 80, .5), 0 0 24px rgba(255, 210, 122, .8);
  opacity: 0;
  transform: scale(.4) rotate(-6deg);
}
.fete.active .fete-titre { animation: titre-fete 4.6s cubic-bezier(.3, 1.5, .5, 1) .35s both; }
/* la fin du jeu : le merci arrive pareil, mais il reste */
/* le soleil du ciel final est vers 42 % de la hauteur : le merci se pose au-dessus de la lumière,
   le bouton Quitter en dessous */
.fete.fin-du-jeu .fete-titre { top: auto; bottom: 65%; font-size: clamp(26px, 8.4cqw, 42px); line-height: 1.12; }
.fete.fin-du-jeu ~ .fin-boutons { top: 58%; bottom: auto; }
.fete.fin-du-jeu.active .fete-titre { animation: titre-fin 1.4s cubic-bezier(.3, 1.5, .5, 1) .35s both; }
@keyframes titre-fin {
  0%   { opacity: 0; transform: scale(.4) rotate(-6deg); }
  45%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  70%  { transform: scale(1) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes titre-fete {
  0%   { opacity: 0; transform: scale(.4) rotate(-6deg); }
  12%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  20%  { transform: scale(1) rotate(-1deg); }
  85%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(.9) translateY(-20px); }
}
.ballons { position: absolute; inset: 0; overflow: hidden; }
.ballon {
  position: absolute;
  bottom: -30%;
  width: 15%;
  max-width: 80px;
  will-change: transform;
}
.ballon svg { display: block; width: 100%; height: auto; overflow: visible; }

/* =====================================================================
   Tampon « Identité confirmée »
   ===================================================================== */
.tampon-zone {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.tampon-zone.actif { opacity: 1; }
.tampon-rayons {
  position: absolute;
  left: 50%; top: 40%;
  width: 150cqw; height: 150cqw;
  margin: -75cqw 0 0 -75cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 150, .55) 0 7deg, rgba(255, 228, 150, 0) 7deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 72%);
  opacity: 0;
  transform: scale(.4);
}
.tampon-zone.actif .tampon-rayons { animation: rayons 2.6s ease-out .2s both; }
@keyframes rayons {
  0%   { opacity: 0; transform: scale(.4) rotate(0); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1) rotate(40deg); }
}
.tampon {
  position: absolute;
  left: 50%; top: 40%;
  display: flex;
  align-items: center;
  gap: 10px;
  /* largeur propre (sinon la boîte est bridée à 50 % et le texte déborde à droite) */
  width: max-content;
  max-width: 92cqw;
  white-space: nowrap;
  padding: 12px 20px;
  border: 5px double #2f8a52;
  border-radius: 14px;
  background: rgba(240, 255, 243, .88);
  color: #2f8a52;
  font: 700 clamp(20px, 6.6cqw, 30px) var(--f-texte);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 10px 30px rgba(20, 60, 30, .35);
  transform: translate(-50%, -50%) rotate(-10deg) scale(3);
  opacity: 0;
}
.tampon-coche {
  display: grid;
  place-items: center;
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  background: #2f8a52;
  color: #fff;
  font-size: 1.1em;
}
.tampon-zone.actif .tampon { animation: tampon 2.9s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes tampon {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(3); }
  9%   { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(.92); }
  14%  { transform: translate(-50%, -50%) rotate(-10deg) scale(1.04); }
  20%  { transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
  82%  { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) rotate(-10deg) scale(.96); }
}

/* =====================================================================
   Écran titre « Puzzlouch » : fond doux aux couleurs du logo
   (table très floutée, teinte violet-rose-or, rayons, lumières, pièces de puzzle)
   ===================================================================== */
.titre-puzzle {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
.titre-puzzle.visible { pointer-events: auto; }
.titre-fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.titre-puzzle.visible .titre-fond { opacity: 1; }
.titre-puzzle.instant .titre-fond { transition: none; }
.titre-puzzle.fini .titre-fond { opacity: 0; transition-duration: 1.6s; }
.titre-flou {
  position: absolute;
  left: -6%;
  top: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  transform: scale(1.04);
}
.titre-puzzle.fini .titre-flou { transform: scale(1); transition: transform 1.6s ease; }
.titre-teinte {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 42% at 50% 33%, rgba(255, 236, 170, .78) 0%, rgba(255, 190, 120, .35) 45%, rgba(255, 190, 120, 0) 75%),
    radial-gradient(120% 90% at 50% 40%, rgba(255, 140, 210, .30) 0%, rgba(160, 80, 230, .48) 55%, rgba(84, 32, 150, .74) 100%);
}
.titre-rayons {
  position: absolute;
  left: 50%;
  top: 33%;
  width: 190cqh;
  height: 190cqh;
  margin: -95cqh 0 0 -95cqh;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 200, .30) 0deg 9deg, rgba(255, 246, 200, 0) 9deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 30%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 30%, transparent 62%);
  animation: rayons-tournent 60s linear infinite;
}
@keyframes rayons-tournent { to { transform: rotate(360deg); } }
.titre-bokeh { position: absolute; inset: 0; }
.bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 225, .55) 0%, rgba(255, 248, 225, .18) 45%, rgba(255, 248, 225, 0) 70%);
  animation: bokeh 14s ease-in-out infinite alternate;
}
.bokeh.b0 { left: 6%;  top: 12%; width: 22cqw; height: 22cqw; animation-duration: 16s; }
.bokeh.b1 { left: 72%; top: 8%;  width: 30cqw; height: 30cqw; animation-duration: 19s; animation-delay: -4s; background: radial-gradient(circle, rgba(255, 170, 225, .45), rgba(255, 170, 225, 0) 70%); }
.bokeh.b2 { left: 60%; top: 55%; width: 18cqw; height: 18cqw; animation-duration: 13s; animation-delay: -7s; }
.bokeh.b3 { left: 12%; top: 62%; width: 34cqw; height: 34cqw; animation-duration: 21s; animation-delay: -2s; background: radial-gradient(circle, rgba(205, 180, 255, .45), rgba(205, 180, 255, 0) 70%); }
.bokeh.b4 { left: 40%; top: 80%; width: 16cqw; height: 16cqw; animation-duration: 15s; animation-delay: -9s; }
.bokeh.b5 { left: 82%; top: 70%; width: 24cqw; height: 24cqw; animation-duration: 18s; animation-delay: -5s; background: radial-gradient(circle, rgba(255, 214, 120, .5), rgba(255, 214, 120, 0) 70%); }
.bokeh.b6 { left: 28%; top: 4%;  width: 12cqw; height: 12cqw; animation-duration: 12s; animation-delay: -3s; }
.bokeh.b7 { left: -6%; top: 40%; width: 26cqw; height: 26cqw; animation-duration: 20s; animation-delay: -11s; background: radial-gradient(circle, rgba(255, 170, 225, .4), rgba(255, 170, 225, 0) 70%); }
.bokeh.b8 { left: 86%; top: 36%; width: 14cqw; height: 14cqw; animation-duration: 14s; animation-delay: -6s; }
.bokeh.b9 { left: 50%; top: 20%; width: 10cqw; height: 10cqw; animation-duration: 11s; animation-delay: -8s; background: radial-gradient(circle, rgba(255, 214, 120, .55), rgba(255, 214, 120, 0) 70%); }
@keyframes bokeh {
  0%   { transform: translate(0, 0) scale(1); opacity: .65; }
  50%  { opacity: 1; }
  100% { transform: translate(4cqw, -6cqh) scale(1.15); opacity: .7; }
}
.titre-pieces { position: absolute; inset: 0; }
.titre-piece {
  position: absolute;
  width: 13cqw;
  height: 13cqw;
  opacity: .5;
  filter: drop-shadow(0 4px 6px rgba(80, 20, 120, .35));
  animation: piece-derive 18s ease-in-out infinite alternate;
}
.titre-piece.p0 { left: 6%;  top: 8%;  width: 15cqw; height: 15cqw; transform: rotate(-18deg); animation-duration: 17s; }
.titre-piece.p1 { left: 80%; top: 14%; width: 11cqw; height: 11cqw; animation-duration: 21s; animation-delay: -6s; }
.titre-piece.p2 { left: 74%; top: 50%; width: 16cqw; height: 16cqw; animation-duration: 19s; animation-delay: -3s; }
.titre-piece.p3 { left: 4%;  top: 52%; width: 12cqw; height: 12cqw; animation-duration: 23s; animation-delay: -9s; }
.titre-piece.p4 { left: 18%; top: 82%; width: 14cqw; height: 14cqw; animation-duration: 16s; animation-delay: -12s; }
.titre-piece.p5 { left: 66%; top: 86%; width: 10cqw; height: 10cqw; animation-duration: 20s; animation-delay: -5s; }
.titre-piece.p6 { left: 44%; top: 3%;  width: 8cqw;  height: 8cqw;  animation-duration: 14s; animation-delay: -7s; opacity: .4; }
@keyframes piece-derive {
  0%   { transform: translate(0, 0) rotate(-14deg); }
  100% { transform: translate(3cqw, -4cqh) rotate(16deg); }
}
.puzzlouch-wrap {
  position: absolute;
  left: 50%;
  top: 33%;
  width: min(92cqw, 58cqh);
  transform: translate(-50%, -50%);
}
.puzzlouch-flotte { position: relative; }
.puzzlouch-flotte.flotte { animation: flotter 6s ease-in-out infinite; }
.puzzlouch {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(.2) rotate(-12deg);
  filter: drop-shadow(0 8px 18px rgba(60, 20, 80, .45));
}
/* Entrée douce : le logo sort du flou en glissant un peu vers le haut */
.puzzlouch.arrive { animation: puzzlouch-arrive 1.6s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes puzzlouch-arrive {
  0%   { opacity: 0; transform: translateY(7%) scale(.9); filter: blur(12px) drop-shadow(0 8px 18px rgba(60, 20, 80, 0)); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 8px 18px rgba(60, 20, 80, .45)); }
}
.puzzlouch.pose { opacity: 1; transform: none; }
.puzzlouch.battement { animation: battement .26s ease-out; opacity: 1; }
@keyframes battement {
  0%   { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.puzzlouch.sortie { animation: puzzlouch-sortie .8s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes puzzlouch-sortie {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.6) translateY(-60%); }
}
.puzzlouch-reflet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url('../assets/puzzlouch.webp');
  mask-image: url('../assets/puzzlouch.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.puzzlouch-reflet::before {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%;
  width: 30%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-15deg);
}
.puzzlouch-reflet.brille::before { animation: balayage 1.1s ease-in-out; }

/* Bouton JOUER aux couleurs du logo : pastille violette, liseré doré, lettres dorées */
.jouer2-wrap {
  position: absolute;
  left: 50%;
  bottom: max(18dvh, calc(env(safe-area-inset-bottom) + 48px));
  width: min(60cqw, 30cqh);
  transform: translate(-50%, 130cqh);
  transition: transform 1.2s cubic-bezier(.3, 1.25, .55, 1);
}
.jouer2-wrap.entre { transform: translate(-50%, 0); }
.jouer2-wrap.sortie { transform: translate(-50%, 130cqh); transition: transform .9s cubic-bezier(.6, 0, .8, .4); }
.jouer2-flotte.flotte { animation: flotter 4.5s ease-in-out infinite; }
.jouer2 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2.6;
  padding: 0;
  border: 3px solid #ffd977;
  border-radius: 999px;
  background:
    radial-gradient(120% 150% at 50% -10%, #c35cf2 0%, #8a2dd6 42%, #5a16a6 78%, #46108a 100%);
  box-shadow:
    0 7px 0 #34096c,
    0 0 0 3px rgba(255, 112, 212, .65),
    0 0 26px rgba(255, 112, 212, .75),
    0 14px 26px rgba(30, 5, 60, .45),
    inset 0 -6px 12px rgba(40, 6, 90, .45);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.jouer2:active { transform: translateY(5px); box-shadow: 0 2px 0 #34096c, 0 0 0 3px rgba(255, 112, 212, .65), 0 0 20px rgba(255, 112, 212, .7), inset 0 -6px 12px rgba(40, 6, 90, .45); }
.jouer2:focus-visible { outline: 3px solid #fff3c4; outline-offset: 5px; }
.jouer2-brillant {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 7%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.jouer2-texte {
  position: relative;
  display: block;
  font: 700 clamp(26px, 9.5cqw, 42px) var(--f-texte);
  letter-spacing: .07em;
  padding-left: .07em;
  line-height: 1;
  color: #ffd23c;
  background: linear-gradient(180deg, #fffbd0 0%, #ffe46a 30%, #ffc21f 62%, #ff9a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* contour fait d'ombres (le contour du texte dessinait des traits à l'intérieur du R) */
  filter: drop-shadow(1.3px 0 0 #4a118f) drop-shadow(-1.3px 0 0 #4a118f) drop-shadow(0 1.3px 0 #4a118f) drop-shadow(0 -1.3px 0 #4a118f)
          drop-shadow(0 3px 0 #33096a) drop-shadow(0 0 6px rgba(255, 210, 90, .55));
  pointer-events: none;
}
.jouer2-etoile {
  position: absolute;
  color: #fff6c8;
  text-shadow: 0 0 8px #ffd27a, 0 0 2px #fff;
  pointer-events: none;
  animation: scintille-bouton 2.2s ease-in-out infinite;
}
.jouer2-etoile.e1 { left: -3%;  top: -26%; font-size: 20px; }
.jouer2-etoile.e2 { right: -4%; bottom: -24%; font-size: 15px; animation-delay: -1.1s; }
@keyframes scintille-bouton {
  0%, 100% { opacity: .2; transform: scale(.6) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1.15) rotate(25deg); }
}
.jouer2:disabled { cursor: default; }

/* =====================================================================
   Parchemin du message caché
   ===================================================================== */
.parchemin {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
}
.parchemin-voile {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 36, .55);
  opacity: 0;
  transition: opacity .5s ease;
}
.parchemin.ouvert .parchemin-voile { opacity: 1; }
.parchemin-rouleau {
  position: relative;
  width: min(100%, 420px);
  transform: scaleY(.06);
  opacity: 0;
  transition: transform .7s cubic-bezier(.3, 1.2, .5, 1), opacity .3s ease;
}
.parchemin.ouvert .parchemin-rouleau { transform: scaleY(1); opacity: 1; }
.parchemin.ferme .parchemin-rouleau { transform: scaleY(.06); opacity: 0; transition: transform .45s ease-in, opacity .45s ease .1s; }
.parchemin-baton {
  position: absolute;
  left: -4%; right: -4%;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff3c4, #e2a945 45%, #9c6a20);
  box-shadow: 0 4px 10px rgba(40, 15, 5, .45);
  z-index: 1;
}
.parchemin-baton.haut { top: -9px; }
.parchemin-baton.bas { bottom: -9px; }
.parchemin-papier {
  position: relative;
  max-height: min(72cqh, 560px);
  overflow-y: auto;
  padding: 26px 22px 20px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, #fbf1d6 55%, #ead39d 100%);
  box-shadow: inset 0 0 30px rgba(160, 110, 40, .35), 0 18px 40px rgba(20, 8, 30, .5);
  color: var(--prune);
  text-align: center;
}
.parchemin-titre { margin: 0 0 6px; font: 700 22px var(--f-texte); color: #8e4b12; }
.parchemin-progres { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; }
.parchemin-progres svg { width: 22px; height: 28px; overflow: visible; }
.parchemin-progres .ouvert .anse { transform-box: fill-box; transform-origin: 100% 100%; transform: translateY(-3px) rotate(30deg); }
.parchemin-texte {
  margin: 0 0 16px;
  font: 600 21px/1.5 'Caveat', 'Segoe Print', cursive;
  text-wrap: pretty;
}
.parchemin-texte .hiero {
  font-family: 'Hieroglyphes', serif;
  font-size: .95em;
  letter-spacing: .02em;
  color: #7a4b16;
  opacity: .85;
}
.parchemin-texte .mot { color: var(--prune); }
.parchemin-texte .mot.nouveau { animation: mot-nouveau 1.4s ease-out both; }
@keyframes mot-nouveau {
  0%   { color: #fff; text-shadow: 0 0 14px #ffd27a, 0 0 4px #fff; filter: blur(3px); }
  40%  { filter: blur(0); }
  100% { color: var(--prune); text-shadow: 0 0 0 transparent; }
}
.parchemin-texte .hiero.part { animation: hiero-part .4s ease-in both; }
@keyframes hiero-part { to { opacity: 0; filter: blur(4px); } }
.parchemin .suivant { margin-top: 0; }
/* la lettre finale : pas de bouton, juste une petite croix pour la refermer une fois le message déchiffré */
.parchemin.finale #parchemin-btn { display: none; }
.parchemin-fermer {
  position: absolute;
  top: 14px; right: 10px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(142, 75, 18, .12);
  color: #8e4b12;
  font: 400 28px/1 var(--f-texte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.parchemin-fermer::before { content: ''; position: absolute; inset: -8px; }   /* plus facile à toucher */
.parchemin.finale.dechiffre .parchemin-fermer { display: grid; animation: croix-arrive .5s cubic-bezier(.2, 1.5, .4, 1) .6s both; }
@keyframes croix-arrive { 0% { opacity: 0; transform: scale(.3) rotate(-90deg); } 100% { opacity: 1; transform: none; } }
@media (max-height: 600px) {
  .parchemin-papier { padding: 20px 16px 16px; }
  .parchemin-texte { font-size: 18px; margin-bottom: 12px; }
}

/* Score du puzzle en grand, au milieu */
.score-pop {
  position: absolute;
  left: 50%; top: 46%;
  z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 30px 20px;
  border-radius: 24px;
  border: 3px solid #ffd977;
  background: radial-gradient(120% 140% at 50% 0%, #c35cf2 0%, #8a2dd6 45%, #4c1490 100%);
  box-shadow: 0 0 0 3px rgba(255, 112, 212, .6), 0 0 34px rgba(255, 112, 212, .7), 0 16px 30px rgba(30, 5, 60, .5);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
}
.score-pop.visible { animation: score-pop 2.6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes score-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  22%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
}
.score-etoiles { color: #ffd23c; font-size: 22px; letter-spacing: .2em; text-shadow: 0 0 10px #ffd27a; }
.score-titre {
  font: 700 clamp(34px, 11cqw, 52px) var(--f-texte);
  line-height: 1;
  background: linear-gradient(180deg, #fffbd0 0%, #ffe46a 30%, #ffc21f 62%, #ff9a1a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(1.3px 0 0 #4a118f) drop-shadow(-1.3px 0 0 #4a118f) drop-shadow(0 1.3px 0 #4a118f) drop-shadow(0 -1.3px 0 #4a118f)
          drop-shadow(0 3px 0 #33096a);
}
.score-temps { color: #fff8e1; font: 600 18px var(--f-texte); }
.score-temps b { color: #ffd23c; font-size: 1.25em; }

/* Tuto : main qui caresse Chouquette */
.tuto {
  position: absolute;
  left: 22%; right: 12%; top: 6%; height: 34%;
  z-index: 3;
  pointer-events: none;
  transition: opacity .5s ease;
}
.tuto.part { opacity: 0; }
.tuto-main {
  position: absolute;
  left: 10%; top: 30%;
  font-size: clamp(34px, 11cqw, 50px);
  opacity: .78;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 3px 6px rgba(60, 20, 80, .4));
  animation: caresse 2.4s ease-in-out infinite;
}
@keyframes caresse {
  0%   { transform: translate(0, 0) rotate(-10deg); opacity: 0; }
  12%  { opacity: .8; }
  50%  { transform: translate(250%, 25%) rotate(8deg); }
  88%  { opacity: .8; }
  100% { transform: translate(450%, 10%) rotate(-4deg); opacity: 0; }
}
.tuto-texte {
  position: absolute;
  left: 50%; top: -42%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid var(--or);
  background: rgba(255, 255, 255, .9);
  color: var(--prune);
  font: 700 clamp(13px, 3.8cqw, 16px) var(--f-texte);
  white-space: nowrap;
  box-shadow: var(--lueur);
  animation: pulse 2.2s ease-in-out infinite;
}

/* ---------- Souris, clavier ---------- */
@media (hover: hover) {
  .suivant:hover, .rejouer:hover, #volume-btn:hover, .roue-btn:hover { filter: brightness(1.06); }
}
.suivant:focus-visible, .rejouer:focus-visible, #volume-btn:focus-visible, #volume-slider:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}
.reveil:focus-visible .reveil-texte { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Moins d'animations si le téléphone le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  .flotte-logo, .flotte-bouton, .bulle, .reveil-chat img, .zzz span,
  .reveil.pret .reveil-texte, .tel, .orage-nuages, .decoupe, .roue-btn, .flux, .puzzlouch-flotte, .pompon, .fanion, .chapeau-svg,
  .titre-rayons, .bokeh, .titre-piece, .jouer2-flotte, .jouer2-etoile, .soleil-rayons { animation: none !important; }
}

/* =====================================================================
   Épreuve 2 : Tirlouch (le tir)
   ===================================================================== */
.scene-tir {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  background: #120a22;
  --pulse: 0;
  --f-arcade: 'Luckiest Guy', 'Fredoka', system-ui, sans-serif;
  --f-pixel: 'Press Start 2P', ui-monospace, monospace;
  touch-action: none;
}
.tir-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: filter .9s ease, transform .9s ease;
}
.scene-tir.mode-menu .tir-cv { filter: blur(3px) saturate(1.25) brightness(.82); transform: scale(1.06); }
.tir-flash, .tir-voile-feu { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tir-flash.rouge { animation: tir-rouge .35s ease-out; }
@keyframes tir-rouge {
  0%   { opacity: 1; box-shadow: inset 0 0 40px 8px rgba(255, 40, 80, .55); }
  100% { opacity: 0; box-shadow: inset 0 0 40px 8px rgba(255, 40, 80, 0); }
}
.tir-voile-feu {
  background:
    radial-gradient(120% 70% at 50% 120%, rgba(255, 110, 30, .55), rgba(255, 60, 20, 0) 60%),
    radial-gradient(60% 100% at -10% 50%, rgba(255, 90, 40, .4), rgba(255, 90, 40, 0) 60%),
    radial-gradient(60% 100% at 110% 50%, rgba(255, 90, 40, .4), rgba(255, 90, 40, 0) 60%);
  transition: opacity .5s ease;
}
.tir-voile-feu.visible { opacity: 1; animation: tir-braise .26s steps(2) infinite; }
@keyframes tir-braise { 50% { opacity: .75; } }

/* ----- HUD ----- */
.tir-hud { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s ease; }
.scene-tir.mode-menu .tir-hud, .tir-hud.cache { opacity: 0; }
.tir-vehicule {
  position: absolute;
  left: 10px;
  top: max(10px, env(safe-area-inset-top));
  max-width: 48%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 6px 8px;
  border: 2px solid var(--or);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(61, 31, 92, .92), rgba(27, 16, 48, .88));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--creme);
  transform-origin: 0 0;
}
.tir-vehicule.change { animation: tir-carte .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tir-carte {
  0%   { transform: scale(.6) rotate(-6deg); filter: brightness(2.2); }
  100% { transform: none; filter: none; }
}
.tir-veh-titre { font: 700 9px var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.tir-veh-ligne { display: flex; align-items: center; gap: 6px; }
.tir-veh-icone { width: 48px; height: 30px; flex: none; }
.tir-veh-nom { font: 700 13px/1.1 var(--f-texte); }
.tir-score {
  position: absolute;
  right: 72px;
  top: max(14px, calc(env(safe-area-inset-top) + 4px));
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px 1px;
  border-radius: 999px;
  background: rgba(27, 16, 48, .55);
  font-family: var(--f-arcade);
  color: #ffe28a;
  text-shadow: 0 2px 0 #4a118f, 0 0 10px rgba(255, 210, 90, .5);
  transform: scale(calc(1 + var(--pulse) * .05));
}
.tir-points { font-size: 24px; font-weight: 400; letter-spacing: .02em; }
.tir-score span { font-size: 13px; }
.tir-combo {
  position: absolute;
  right: 12px;
  top: max(104px, calc(env(safe-area-inset-top) + 94px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--f-arcade);
  color: #ff8fc8;
  text-shadow: 0 2px 0 #4a118f;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
}
.tir-combo span { font-size: 12px; letter-spacing: .1em; }
.tir-combo-n { font-size: 30px; font-weight: 400; line-height: 1; }
.tir-combo.visible { opacity: 1; transform: none; }
.tir-combo.pop .tir-combo-n { animation: tir-pop .22s ease-out; }
.tir-combo.chaud { color: #ffb347; }
.tir-combo.chaud .tir-combo-n { color: #fff; text-shadow: 0 0 10px #ff6a00, 0 0 20px #ff2d55, 0 2px 0 #4a118f; }
@keyframes tir-pop { 0% { transform: scale(1.6) rotate(-8deg); } 100% { transform: none; } }
.tir-boss {
  position: absolute;
  left: 14px;
  right: 14px;
  top: max(76px, calc(env(safe-area-inset-top) + 66px));
  margin-right: 70px;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .4s ease, transform .4s ease;
}
.tir-boss.visible { opacity: 1; transform: none; }
.tir-boss-nom { display: block; font: 400 15px var(--f-arcade); color: #ff8fa8; text-shadow: 0 2px 0 #3a0a2a; margin-bottom: 3px; }
.tir-boss-nom i { font: 700 9px var(--f-texte); font-style: normal; letter-spacing: .14em; color: #1b1030; background: #ff8fa8; border-radius: 4px; padding: 1px 5px; vertical-align: 3px; }
.tir-boss-barre { position: relative; display: block; height: 12px; border: 2px solid #ffd27a; border-radius: 8px; background: #2b1638; overflow: hidden; box-shadow: 0 0 12px rgba(255, 80, 120, .35); }
.tir-boss-vie, .tir-boss-trace { position: absolute; inset: 0; transform-origin: 0 50%; }
.tir-boss-trace { background: #fff3c4; }
.tir-boss-vie { background: linear-gradient(90deg, #ff2d55, #ff8fc8 60%, #ffb347); }
.tir-boss.critique .tir-boss-barre { animation: tir-critique .3s steps(2) infinite; }
@keyframes tir-critique { 50% { box-shadow: 0 0 18px rgba(255, 40, 80, .9); border-color: #fff; } }

/* ----- Annonces géantes ----- */
.tir-annonces { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tir-annonce {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--f-arcade);
  color: #ffe28a;
  -webkit-text-stroke: 2px #4a118f;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #33096a, 0 0 18px rgba(255, 210, 90, .6);
  animation: tir-slam 1.05s cubic-bezier(.2, 1.4, .4, 1) both;
}
.tir-annonce b { font-weight: 400; font-size: clamp(34px, 13cqw, 64px); line-height: 1; letter-spacing: .02em; }
@keyframes tir-slam {
  0%   { transform: scale(3.2); opacity: 0; filter: blur(8px); }
  14%  { transform: scale(.92); opacity: 1; filter: blur(0); }
  22%  { transform: scale(1.04) rotate(-1.5deg); }
  78%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1) translateY(-12px); opacity: 0; }
}
.tir-annonce.grand b { font-size: clamp(42px, 16cqw, 78px); }
.tir-annonce.grand { animation-duration: 1.3s; }
.tir-annonce.decompte { top: 30%; animation: tir-decompte .38s ease-out both; }
.tir-annonce.decompte b { font-size: clamp(80px, 34cqw, 160px); color: #ffe28a; -webkit-text-stroke: 4px #4a118f; }
@keyframes tir-decompte { 0% { transform: scale(2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
.tir-annonce.go b {
  font-size: clamp(64px, 26cqw, 130px);
  text-shadow: none;
  filter: drop-shadow(0 6px 0 #33096a) drop-shadow(0 0 16px rgba(255, 210, 90, .7));
  background: linear-gradient(90deg, #ff6fae, #ffd27a, #8fd3ff, #b98cf0, #ff6fae);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tir-arcenciel .5s linear infinite;
}
@keyframes tir-arcenciel { to { background-position: 200% 0; } }
.tir-annonce.go { animation-duration: 1.1s; }
.tir-annonce.petit b, .tir-annonce.points b { font-size: clamp(22px, 8cqw, 38px); }
.tir-annonce.points { top: 24%; color: #fff3c4; }
.tir-annonce.alerte { color: #ff4f6a; text-shadow: 0 4px 0 #3a0a2a, 0 0 16px rgba(255, 60, 90, .8); }
.tir-annonce.alerte b { animation: tir-clignote .16s steps(2) infinite; }
@keyframes tir-clignote { 50% { opacity: .35; } }
.tir-annonce.feu b { font-size: clamp(26px, 9.5cqw, 46px); color: #fff3c4; text-shadow: 0 0 10px #ff6a00, 0 0 22px #ff2d55, 0 4px 0 #6a1010; animation: tir-tremble .08s linear infinite; }
@keyframes tir-tremble { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 2px); } }
.tir-annonce.attaque { top: 40%; animation-duration: 1.25s; }
.tir-annonce.attaque small { font: 700 11px var(--f-texte); letter-spacing: .3em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 0; text-shadow: none; background: #ff2d55; padding: 2px 10px; border-radius: 4px; margin-bottom: 4px; }
.tir-annonce.attaque b { font-size: clamp(26px, 10cqw, 50px); color: #c9b6ff; background: rgba(27, 16, 48, .78); padding: 4px 14px; border-radius: 8px; border: 2px solid #ffd27a; -webkit-text-stroke: 1.5px #2a0c4e; }
.tir-annonce.warning { top: 30%; animation: tir-warning 1.5s ease both; }
.tir-annonce.warning b { font-size: clamp(30px, 12cqw, 60px); color: #ff3b3b; -webkit-text-stroke: 2px #1c0000; text-shadow: 0 0 20px rgba(255, 0, 0, .8); animation: tir-clignote .2s steps(2) infinite; }
.tir-annonce.warning .bande { display: block; width: 100%; overflow: hidden; white-space: nowrap; background: repeating-linear-gradient(-45deg, #ffd23f 0 14px, #1c1626 14px 28px); padding: 3px 0; margin: 6px 0; }
.tir-annonce.warning .bande i { display: inline-block; font: 400 13px var(--f-arcade); font-style: normal; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1px 0 #000; animation: tir-defile 1.2s linear infinite; }
@keyframes tir-defile { to { transform: translateX(-50%); } }
@keyframes tir-warning { 0% { opacity: 0; transform: scaleY(0); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.tir-annonce.ultime b { font-size: clamp(50px, 20cqw, 100px); color: #fff; text-shadow: 3px 0 0 #ff2d8a, -3px 0 0 #2de1ff, 0 0 30px #fff; animation: tir-tremble .06s linear infinite; }
.tir-annonce.ko { top: 26%; animation: tir-ko 2.4s cubic-bezier(.2, 1.5, .4, 1) both; }
.tir-annonce.ko b { white-space: nowrap; font-size: clamp(80px, 30cqw, 160px); color: #ff3b5c; -webkit-text-stroke: 4px #fff3c4; text-shadow: 0 8px 0 #4a0a1a, 0 0 40px rgba(255, 50, 90, .9); }
@keyframes tir-ko { 0% { transform: scale(5) rotate(-20deg); opacity: 0; } 12% { transform: scale(.9) rotate(4deg); opacity: 1; } 20% { transform: scale(1.05) rotate(-2deg); } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.tir-annonce.palier { top: 57%; animation-duration: .9s; }
.tir-annonce.palier b { font-size: clamp(24px, 9cqw, 44px); color: #ff8fc8; text-shadow: 0 4px 0 #4a118f, 0 0 16px rgba(255, 112, 212, .8); transform: rotate(-4deg); }
.tir-annonce.renfort { top: 55%; animation-duration: 1.2s; }
/* Salolo67 en renfort : la bande de présentation (comme dans les jeux de combat) */
.tir-cutin { position: absolute; left: 0; right: 0; top: 36%; height: 0; pointer-events: none; z-index: 6; }
.tir-cutin-bande {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 0;
  height: 112px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 16%;
  background: linear-gradient(90deg, rgba(20, 120, 100, .0) 0%, #22b78f 12%, #4fe0b5 45%, #a9fbe1 70%, #6fe9c4 88%, rgba(40, 190, 150, 0) 100%);
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  box-shadow: 0 0 0 3px #1b6e5b, 0 10px 30px rgba(10, 40, 40, .45), 0 0 40px rgba(127, 240, 196, .55);
  transform: translateX(-120%) rotate(-7deg);
  opacity: 0;
}
.tir-cutin-vitesse {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 26px, rgba(255, 255, 255, .55) 26px 30px, rgba(255, 255, 255, 0) 30px 74px);
  background-size: 200% 100%;
  mix-blend-mode: overlay;
}
.tir-cutin-tete { position: relative; height: 150%; width: auto; aspect-ratio: 260 / 300; margin-top: -26px; filter: drop-shadow(0 6px 0 rgba(20, 80, 70, .5)); }
.tir-cutin-texte { position: relative; margin: 0; display: flex; flex-direction: column; line-height: 1; }
.tir-cutin-texte small { font: 700 12px var(--f-texte); letter-spacing: .3em; text-transform: uppercase; color: #0f4d40; }
.tir-cutin-texte b { font: 400 clamp(34px, 11cqw, 52px) var(--f-arcade); color: #fff; -webkit-text-stroke: 2px #1b6e5b; paint-order: stroke fill; text-shadow: 0 4px 0 #145648; letter-spacing: .02em; }
.tir-cutin-texte span { margin-top: 4px; font: 700 13px var(--f-texte); color: #0f4d40; }
.tir-cutin.visible .tir-cutin-bande { animation: tir-cutin 1.1s cubic-bezier(.2, .9, .3, 1) both; }
.tir-cutin.visible .tir-cutin-vitesse { animation: tir-cutin-vitesse .35s linear infinite; }
.tir-cutin.visible .tir-cutin-tete { animation: tir-cutin-tete 1.1s ease-out both; }
@keyframes tir-cutin {
  0% { transform: translateX(-120%) rotate(-7deg); opacity: 1; }
  16% { transform: translateX(0) rotate(-7deg); opacity: 1; }
  72% { transform: translateX(4%) rotate(-7deg); opacity: 1; }
  100% { transform: translateX(130%) rotate(-7deg); opacity: 1; }
}
@keyframes tir-cutin-vitesse { to { background-position: -200% 0; } }
@keyframes tir-cutin-tete { 0% { transform: scale(.6) rotate(-10deg); } 22% { transform: scale(1.12) rotate(4deg); } 34% { transform: scale(1) rotate(0); } 100% { transform: scale(1.04); } }
.tir-annonce.fete b, .tir-annonce.renfort b { text-shadow: none; filter: drop-shadow(0 5px 0 #33096a) drop-shadow(0 0 14px rgba(255, 159, 205, .7)); background: linear-gradient(90deg, #ff9fcd, #ffd27a, #a6f0b8, #8fd3ff, #c9b6ff, #ff9fcd); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tir-arcenciel .6s linear infinite; font-size: clamp(28px, 10.5cqw, 52px); }
.tir-annonce.renfort b { font-size: clamp(24px, 8.6cqw, 42px); }
.tir-zone {
  position: absolute;
  left: 0; right: 0;
  top: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff8e1;
  text-shadow: 0 3px 12px rgba(20, 10, 40, .8);
  animation: tir-zone 2s ease both;
}
.tir-zone small { font: 700 12px var(--f-texte); letter-spacing: .4em; text-transform: uppercase; }
.tir-zone b { font: 400 clamp(36px, 14cqw, 76px)/1 var(--f-arcade); letter-spacing: .05em; color: #fff3c4; -webkit-text-stroke: 2px #4a118f; paint-order: stroke fill; }
.tir-zone::after { content: ''; width: 60%; height: 3px; margin-top: 8px; background: linear-gradient(90deg, transparent, var(--or), transparent); }
@keyframes tir-zone { 0% { opacity: 0; letter-spacing: .5em; transform: scale(1.2); } 18% { opacity: 1; letter-spacing: normal; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ----- Dialogues façon Undertale ----- */
.tir-dialogue {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(max(22px, env(safe-area-inset-bottom) + 12px) + 150px);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 8px 12px 8px 8px;
  background: #000;
  border: 4px solid #fff;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.tir-dialogue::before {
  content: attr(data-qui);
  position: absolute;
  left: 8px;
  top: -16px;
  font: 400 9px var(--f-pixel);
  color: var(--coul-qui, #fff);
  background: #000;
  padding: 3px 6px;
  border: 2px solid #fff;
}
.tir-dialogue[data-qui=""]::before { display: none; }
.tir-dialogue.visible { opacity: 1; transform: none; }
.tir-dialogue.secoue { animation: tir-dlg .18s steps(3); }
@keyframes tir-dlg { 33% { transform: translate(3px, -2px); } 66% { transform: translate(-3px, 1px); } }
.tir-dlg-portrait { width: 50px; height: 50px; flex: none; border: 2px solid #fff; }
.tir-dlg-texte { margin: 0; font: 400 10.5px/1.75 var(--f-pixel); letter-spacing: .02em; text-wrap: balance; }

/* ----- Aide et contrôles ----- */
.tir-aide {
  position: absolute;
  left: 50%;
  bottom: calc(max(22px, env(safe-area-inset-bottom) + 12px) + 150px);
  transform: translateX(-50%) scale(.8);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(27, 16, 48, .88);
  border: 2px solid var(--or);
  color: var(--creme);
  font: 700 14px var(--f-texte);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.tir-aide.visible { opacity: 1; transform: translateX(-50%); }
.tir-aide.joy { left: 30%; }
.tir-aide.feu { left: 70%; }
.tir-aide.chrono { bottom: auto; top: 30%; color: #ffe28a; border-color: #ff4f6a; font-size: 15px; animation: tir-clignote .5s steps(2) infinite; }
.tir-controles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(max(22px, env(safe-area-inset-bottom) + 12px) + 140px);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.scene-tir.mode-menu .tir-controles, .tir-controles.cache { opacity: 0; transform: translateY(40px); }
.scene-tir.mode-menu .tir-controles *, .tir-controles.cache * { pointer-events: none !important; }
.tir-joy {
  position: absolute;
  left: 18px;
  bottom: max(22px, env(safe-area-inset-bottom) + 12px);
  width: 132px;
  height: 132px;
  pointer-events: auto;
  touch-action: none;
}
.tir-joy-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 182, 255, .18) 0%, rgba(27, 16, 48, .55) 70%);
  border: 3px solid rgba(255, 210, 122, .75);
  box-shadow: 0 0 0 4px rgba(27, 16, 48, .35), inset 0 0 18px rgba(201, 182, 255, .35);
}
.tir-joy-fleche { position: absolute; inset: 14px; border-radius: 50%; border: 2px dashed rgba(255, 248, 225, .25); }
.tir-joy-bouton {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 32%, #fff3c4, #ffd27a 40%, #e09a2c 100%);
  border: 3px solid #fff8e1;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 210, 122, .6);
}
.tir-joy.actif .tir-joy-bouton { box-shadow: 0 3px 8px rgba(0, 0, 0, .4), 0 0 24px rgba(255, 210, 122, .9); }
.tir-joy:not(.actif) .tir-joy-bouton { transition: transform .15s ease-out; }
.tir-feu {
  position: absolute;
  right: 22px;
  bottom: max(26px, env(safe-area-inset-bottom) + 16px);
  width: 108px;
  height: 108px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid #fff3c4;
  background: radial-gradient(circle at 40% 30%, #ff8fc8, #ff2d6f 45%, #a8104a 100%);
  box-shadow: 0 8px 0 #6a0a30, 0 0 0 4px rgba(27, 16, 48, .4), 0 0 24px rgba(255, 45, 111, .55);
  color: #fff;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  transform: scale(calc(1 + var(--pulse) * .04));
  /* dans l'espace, plus on spamme, plus le bouton grossit et brille */
  scale: calc(1 + var(--spam, 0) * .38);
  filter: brightness(calc(1 + var(--spam, 0) * .35));
  transform-origin: 60% 60%;
  transition: scale .08s ease-out;
  -webkit-user-select: none;
  user-select: none;
}
.tir-feu.tape { animation: tir-tape .12s ease-out; }
@keyframes tir-tape { 0% { transform: translateY(6px) scale(.94); box-shadow: 0 2px 0 #6a0a30, 0 0 30px rgba(255, 210, 122, .9); } }
.tir-feu-texte { position: relative; z-index: 2; font: 400 28px var(--f-arcade); letter-spacing: .04em; text-shadow: 0 3px 0 #6a0a30; }
.tir-feu-anneau { position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .45); animation: tournoie 6s linear infinite; }
@keyframes tournoie { to { transform: rotate(360deg); } }
.tir-joy.guide, .tir-feu.guide { animation: tir-guide .7s ease-in-out infinite; }
@keyframes tir-guide { 50% { filter: brightness(1.5) drop-shadow(0 0 14px #ffd27a); } }
/* Boutons en feu (combat dans l'espace) */
.tir-feu-flammes { position: absolute; left: 0; right: 0; bottom: 40%; height: 120%; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.tir-feu-flammes i {
  position: absolute;
  bottom: 0;
  width: 34%;
  height: 70%;
  border-radius: 50% 50% 20% 20% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 85%, #fff3a0 0%, #ffb12a 35%, #ff4b1f 65%, rgba(255, 40, 20, 0) 75%);
  filter: blur(1px);
  transform-origin: 50% 100%;
  animation: tir-flamme .35s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.tir-feu-flammes i:nth-child(1) { left: 2%; height: 55%; animation-delay: -.1s; }
.tir-feu-flammes i:nth-child(2) { left: 22%; height: 85%; animation-delay: -.25s; }
.tir-feu-flammes i:nth-child(3) { left: 36%; height: 100%; animation-delay: -.05s; }
.tir-feu-flammes i:nth-child(4) { left: 50%; height: 80%; animation-delay: -.3s; }
.tir-feu-flammes i:nth-child(5) { left: 66%; height: 58%; animation-delay: -.18s; }
@keyframes tir-flamme { 0% { transform: scaleY(.8) skewX(-6deg); } 100% { transform: scaleY(1.15) skewX(6deg); } }
.tir-controles.en-feu .tir-feu-flammes { opacity: 1; scale: 1 calc(1 - var(--spam, 0) * .24); transform-origin: 50% 100%; }   /* les flammes ne grandissent pas avec le bouton */
.tir-controles.en-feu .tir-feu { border-color: #ffd23f; box-shadow: 0 8px 0 #6a0a30, 0 0 30px rgba(255, 120, 30, .95), 0 0 60px rgba(255, 60, 20, .7); animation: tir-tremble .1s linear infinite; }
.tir-controles.en-feu .tir-joy-base { border-color: #ff8a3d; box-shadow: 0 0 22px rgba(255, 110, 30, .8), inset 0 0 18px rgba(255, 110, 30, .5); }
.tir-controles.en-feu .tir-joy::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  bottom: 60%;
  height: 70%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 200, 80, .9), rgba(255, 80, 20, .5) 40%, rgba(255, 40, 20, 0) 70%);
  filter: blur(2px);
  animation: tir-flamme .3s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ----- Menu de l'épreuve (le jeu tourne flou derrière) ----- */
.tir-menu { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.scene-tir.mode-menu .tir-menu { opacity: 1; pointer-events: auto; }
.scene-tir.mode-menu .tir-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 50% 34%, rgba(255, 210, 122, .28), rgba(255, 210, 122, 0) 70%), linear-gradient(180deg, rgba(27, 16, 48, .2), rgba(27, 16, 48, .55));
}
.tir-logo-wrap {
  position: absolute;
  left: 50%;
  top: 32%;
  width: min(92cqw, 54cqh);
  transform: translate(-50%, -50%) scale(.86);
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.tir-logo-wrap.entre { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
.tir-logo { position: relative; display: flex; flex-direction: column; align-items: center; animation: flotter 6s ease-in-out infinite; }
.tir-logo-rayons {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 135%;
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 170, .3) 0deg 7deg, rgba(255, 236, 170, 0) 7deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 22%, transparent 72%);
  animation: tir-rayons 30s linear infinite;
}
@keyframes tir-rayons { to { transform: translate(-50%, -50%) rotate(360deg); } }
.tir-logo-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2px;
  filter: drop-shadow(0 8px 0 rgba(51, 9, 106, .55)) drop-shadow(0 0 18px rgba(255, 112, 212, .45));
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.tir-jouer-wrap {
  position: absolute;
  left: 50%;
  bottom: max(20dvh, calc(env(safe-area-inset-bottom) + 70px));
  width: min(60cqw, 30cqh);
  transform: translate(-50%, 130cqh);
  transition: transform 1.2s cubic-bezier(.3, 1.25, .55, 1);
}
.tir-jouer-wrap.entre { transform: translate(-50%, 0); }
.tir-jouer-flotte.flotte { animation: flotter 4.5s ease-in-out infinite; }
.tir-menu-astuce {
  position: absolute;
  left: 16px; right: 16px;
  bottom: max(9dvh, calc(env(safe-area-inset-bottom) + 20px));
  margin: 0;
  text-align: center;
  font: 600 13px/1.4 var(--f-texte);
  color: rgba(255, 248, 225, .85);
  text-shadow: 0 2px 6px rgba(20, 10, 40, .9);
}

/* ----- Fin : YOU WON ----- */
.tir-fin { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; padding: max(11dvh, env(safe-area-inset-top) + 52px) 16px 0; }
.tir-won { display: flex; flex-direction: column; align-items: center; margin: 0; font: 400 clamp(62px, min(28cqw, 14.5cqh), 140px)/.92 var(--f-arcade); opacity: 0; transform: scale(2.5); }
.tir-won span {
  background: linear-gradient(90deg, #ffd27a, #fff3c4, #ff9fcd, #c9b6ff, #8fd3ff, #ffd27a);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px #4a118f;
  filter: drop-shadow(0 7px 0 #33096a) drop-shadow(0 0 22px rgba(255, 210, 122, .8));
}
.tir-fin.visible .tir-won span { animation: tir-arcenciel 1.2s linear infinite; }
.tir-fin.visible .tir-won span:last-child { animation-delay: -.6s; }
.tir-fin.visible .tir-won { opacity: 1; transform: scale(calc(1 + var(--pulse) * .04)); transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.tir-bilan {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(94cqw, 420px);
  margin: auto 0 0;
  padding: 12px 14px 12px 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(70, 30, 112, .9), rgba(27, 16, 48, .94));
  border: 2px solid rgba(255, 217, 119, .9);
  box-shadow: 0 0 0 3px rgba(74, 17, 143, .55), 0 12px 30px rgba(10, 4, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--creme);
  opacity: 0;
  transform: translateY(26px) scale(.96);
  transition: opacity .6s ease, transform .75s cubic-bezier(.2, 1.4, .4, 1);
}
.tir-bilan.visible { opacity: 1; transform: none; }
.tir-rang {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 62%), #1b1030;
  border: 3px solid var(--coul-rang, #ffd23f);
  box-shadow: 0 0 20px var(--coul-rang, #ffd23f), inset 0 0 14px rgba(0, 0, 0, .55);
}
.tir-rang small {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 2px 8px 1px 9px;
  border-radius: 999px;
  background: var(--coul-rang, #ffd23f);
  border: 2px solid #1b1030;
  color: #1b1030;
  font: 700 9.5px/1.2 var(--f-texte);
  letter-spacing: .18em;
}
.tir-rang-lettre {
  margin-top: 4px;
  font: 400 46px/1 var(--f-arcade);
  color: var(--coul-rang, #ffd23f);
  -webkit-text-stroke: 2px #4a118f;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #33096a, 0 0 16px var(--coul-rang, #ffd23f);
}
.tir-bilan.visible .tir-rang { animation: tir-rang-pop .9s .2s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes tir-rang-pop { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }
.tir-bilan-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tir-score-fin { margin: 0; font: 600 14px var(--f-texte); color: rgba(255, 248, 225, .85); }
.tir-score-fin b {
  margin-right: 3px;
  font: 400 30px/1 var(--f-arcade);
  letter-spacing: .02em;
  color: #ffe28a;
  -webkit-text-stroke: 1.5px #4a118f;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #33096a, 0 0 12px rgba(255, 210, 90, .45);
}
.tir-stats { display: flex; flex-direction: column; margin: 0; font: 500 12.5px/1.35 var(--f-texte); color: rgba(255, 248, 225, .9); }
.tir-stats b { color: #ffe28a; font-weight: 700; }
.tir-record { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 2px 0 0; font: 600 12.5px/1.3 var(--f-texte); color: rgba(255, 248, 225, .72); }
.tir-record b { color: #fff3c4; }
.tir-record.nouveau { color: #ffe28a; }
.tir-record.nouveau b {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #ff6fb5, #ffb347);
  box-shadow: 0 0 12px rgba(255, 111, 181, .6);
  animation: tir-record 1.1s ease-in-out infinite;
}
@keyframes tir-record { 50% { transform: scale(1.07); } }
.tir-boutons {
  display: flex;
  gap: 8px;
  width: min(94cqw, 420px);
  margin: 12px 0 max(4dvh, calc(env(safe-area-inset-bottom) + 14px));
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition: opacity .5s .2s ease, transform .65s .2s cubic-bezier(.3, 1.5, .5, 1);
}
.tir-boutons.visible { opacity: 1; transform: none; pointer-events: auto; }
.tir-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tir-btn svg { flex: none; width: 19px; height: 19px; fill: currentColor; }
.tir-btn span { line-height: 1.05; }
.tir-rejouer {
  flex: 1;
  border: 3px solid #ffd977;
  background: radial-gradient(120% 150% at 50% -10%, #c35cf2 0%, #8a2dd6 42%, #5a16a6 78%, #46108a 100%);
  color: #ffe46a;
  font: 400 clamp(17px, 5.4cqw, 21px) var(--f-arcade);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #33096a;
  box-shadow: 0 5px 0 #34096c, 0 0 0 2px rgba(255, 112, 212, .6), 0 0 20px rgba(255, 112, 212, .6), inset 0 -5px 10px rgba(40, 6, 90, .45);
}
.tir-rejouer svg { filter: drop-shadow(0 2px 0 #33096a); }
.tir-rejouer:active { transform: translateY(4px); box-shadow: 0 1px 0 #34096c, 0 0 0 2px rgba(255, 112, 212, .6), 0 0 14px rgba(255, 112, 212, .55), inset 0 -5px 10px rgba(40, 6, 90, .45); }
.tir-retour {
  flex: 1.2;
  border: 2px solid rgba(255, 248, 225, .75);
  background: linear-gradient(180deg, rgba(58, 30, 92, .9), rgba(27, 16, 48, .92));
  color: var(--creme);
  font: 700 clamp(12.5px, 3.9cqw, 14.5px) var(--f-texte);
  box-shadow: 0 5px 0 rgba(10, 4, 24, .65), 0 8px 20px rgba(10, 4, 24, .4);
}
.tir-retour:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(10, 4, 24, .65); }
.tir-btn:focus-visible { outline: 3px solid #fff3c4; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tir-voile-feu.visible, .tir-annonce b, .tir-feu, .tir-feu-flammes i, .tir-logo, .tir-logo-rayons, .tir-jouer-flotte, .tir-won span, .tir-feu-anneau, .tir-bilan.visible .tir-rang, .tir-record.nouveau b { animation: none !important; }
}

/* =====================================================================
   Le prénom qui bugue (js/glitch.js) : le vrai mot reste à sa place, invisible,
   et la variante du moment s'affiche par-dessus (rien ne bouge autour)
   ===================================================================== */
.amine-bug { position: relative; display: inline-block; white-space: nowrap; visibility: hidden; }
.amine-bug::after {
  content: attr(data-g);
  visibility: visible;
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  text-shadow: -1.5px 0 rgba(255, 40, 110, .75), 1.5px 0 rgba(0, 210, 255, .75);
}
.amine-bug.net::after { text-shadow: inherit; }
.amine-bug.saccade::after { transform: translateX(1.5px) skewX(-12deg); }

/* Tir : contrôles un peu plus petits, dialogue plus petit et plus bas (dans l'espace, en haut, sous la barre du boss) */
.tir-joy { scale: .92; transform-origin: 0 100%; }
.tir-feu { scale: .94; transform-origin: 100% 100%; }
.tir-dialogue { bottom: calc(max(22px, env(safe-area-inset-bottom) + 12px) + 126px); min-height: 50px; gap: 8px; padding: 6px 10px 6px 6px; border-width: 3px; }
/* dans l'espace : tout en haut, par-dessus le véhicule et le score (Eulala, Amine, Salolo et Mimouz restent visibles) */
.tir-dialogue.haut { top: calc(max(6px, env(safe-area-inset-top)) + 16px); bottom: auto; z-index: 6; }
.tir-dlg-portrait { width: 40px; height: 40px; }
.tir-dlg-texte { font-size: 9.5px; line-height: 1.6; }
/* Écran de fin du tir : le bilan plus compact, la scène (Eulala qui danse sur Amine K.O.) garde la place */
.tir-won { font-size: clamp(54px, min(23cqw, 11.5cqh), 116px); }
.tir-bilan { gap: 10px; padding: 8px 12px 8px 8px; border-radius: 18px; }
.tir-rang { width: 58px; height: 58px; }
.tir-rang-lettre { font-size: 34px; }
.tir-rang small { font-size: 8px; bottom: -8px; }
.tir-score-fin { font-size: 12.5px; }
.tir-score-fin b { font-size: 24px !important; }
.tir-stats, .tir-record { font-size: 11px; line-height: 1.3; }
.tir-btn { min-height: 46px; }

/* Le parchemin : le message est long, il défile tout seul dans sa zone ; le titre, les cadenas et le bouton
   restent toujours visibles (avant, le bouton « Compris » pouvait se retrouver caché sous le texte) */
.parchemin-papier { display: flex; flex-direction: column; overflow: hidden; }
.parchemin-texte {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-size: clamp(16px, 4.7cqw, 20px);
  line-height: 1.42;
  padding: 0 2px;
}
.parchemin-papier > #parchemin-btn { flex: none; }