* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fcd9f5 url("assets/fond.png") center / cover no-repeat;
  font-family: "DotGothic16", monospace;
  color: #111;
}

/* Le temps de demander au serveur où en est le joueur : on ne montre rien (évite un flash de la page 1) */
html.attente body { visibility: hidden; }

/* La scène fait toujours 1920x1080 et est mise à l'échelle par script.js */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
}

/* ---------- Titre + étoiles ---------- */
.titre {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 1900px;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

/* HONK : le titre fait "pop" quand on clique dessus */
.titre.honk { animation: honk .45s cubic-bezier(.3, 1.8, .5, 1); }

@keyframes honk {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.12, .82); }
  45%  { transform: scale(.94, 1.12); }
  70%  { transform: scale(1.03, .97); }
  100% { transform: scale(1); }
}

/* ---------- Textes ---------- */
.attention,
.question {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: normal;
}

.attention {
  top: 245px;
  font-size: 68px;
  letter-spacing: 2px;
  animation: clignote 1.2s steps(1) infinite;
}

@keyframes clignote {
  50% { opacity: .35; }
}

.question {
  top: 345px;
  font-size: 66px;
  line-height: 1.3;
}

/* ---------- Bulle + emoji ---------- */
.reponse {
  position: absolute;
  left: 185px;
  top: 495px;
  width: 1300px;
  height: 332px;
}

.textbox {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Zone blanche intérieure de la bulle */
.reponse-input {
  position: absolute;
  left: 27%;
  top: 38%;
  width: 64%;
  height: 30%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 58px;
  color: #111;
  caret-color: #ff1aff;
}

.reponse-input::placeholder { color: #e9a6e0; }

.reponse.faux { animation: tremble .45s; }

@keyframes tremble {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-18px); }
  40% { transform: translateX(16px); }
  60% { transform: translateX(-12px); }
  80% { transform: translateX(8px); }
}

/* ---------- Flèches + cadenas ---------- */
.verrou {
  position: absolute;
  left: 0;
  right: 0;
  top: 785px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
}

.fleche {
  width: 140px;
  height: 152px;
}

.fleche.droite { animation: pousseD 1s ease-in-out infinite; }
.fleche.gauche { animation: pousseG 1s ease-in-out infinite; transform: scaleX(-1); }
.fleche.d2     { animation-delay: .15s; }

@keyframes pousseD {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(14px); }
}
@keyframes pousseG {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50%      { transform: scaleX(-1) translateX(14px); }
}

.cadenas {
  width: 225px;
  height: 224px;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform .15s;
}

.cadenas { position: relative; }
.cadenas img { width: 100%; height: 100%; display: block; }
.cadenas:hover  { transform: scale(1.06) rotate(-3deg); }
.cadenas:active { transform: scale(.95); }

/* Secousse quand le cadenas se casse un peu plus */
.cadenas.casse { animation: casse .5s; }

@keyframes casse {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-10px, 4px) rotate(-6deg); }
  30% { transform: translate(9px, -3px) rotate(5deg); }
  45% { transform: translate(-7px, 2px) rotate(-4deg); }
  60% { transform: translate(5px, -1px) rotate(3deg); }
  80% { transform: translate(-2px, 0) rotate(-1deg); }
}

/* ---------- Coup de sabre quand le cadenas prend un coup ---------- */
.slash {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 420px;
  height: 14px;
  margin: -7px 0 0 -210px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 18%, #fff 82%, transparent);
  box-shadow: 0 0 10px #fff, 0 0 22px #ff1aff, 0 0 40px #00f0ff;
  /* Tourne autour du centre du cadenas, le trait se "dessine" avec le clip-path */
  transform: rotate(var(--angle));
  transform-origin: center;
  clip-path: var(--clip-debut);
  animation: slash .38s cubic-bezier(.2, .9, .3, 1) forwards;
  animation-delay: var(--delai, 0s);
}

@keyframes slash {
  0%   { clip-path: var(--clip-debut); }
  35%  { clip-path: inset(-40px); transform: rotate(var(--angle)) scaleY(1.2); opacity: 1; }
  100% { clip-path: inset(-40px); transform: rotate(var(--angle)) scaleY(0); opacity: 0; }
}

/* Le cadenas flashe blanc au moment de l'impact */
.cadenas.impact img { animation: impact .14s steps(2); }

@keyframes impact {
  0%   { filter: brightness(0) invert(1); }
  100% { filter: none; }
}

/* Flash blanc plein écran */
.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: #fff;
  animation: flash .25s ease-out forwards;
}

@keyframes flash {
  from { opacity: .7; }
  to   { opacity: 0; }
}

/* Dernier état : texte rouge qui tremble */
.stage[data-etape="4"] .question { color: #d4001a; animation: tremble .3s infinite; }

/* ---------- Compteur ---------- */
.compteur {
  position: absolute;
  left: 0;
  right: 0;
  top: 1020px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  letter-spacing: 1px;
}

/* Afficheur 7 segments */
.afficheur {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #111;
  border-radius: 4px;
}

.chiffre {
  width: 27px;
  height: 42px;
  padding: 3px;
  background: #050805;
  border-radius: 2px;
}

.chiffre svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: skewX(-6deg);
}

.chiffre polygon       { fill: #0f2a0f; }
.chiffre polygon.on    { fill: #3dff3d; filter: drop-shadow(0 0 3px #1aff1a); }

/* =========================================================
   DÉCO
   ========================================================= */

/* ---------- Étoiles qui scintillent (plein écran) ---------- */
.paillettes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.paillette {
  position: absolute;
  line-height: 1;
  text-shadow: 0 0 6px currentColor;
  animation: scintille var(--duree, 2s) ease-in-out infinite;
  animation-delay: var(--delai, 0s);
}

@keyframes scintille {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* Traînée d'étoiles derrière la souris */
.trainee {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 6px currentColor;
  animation: tombe .8s ease-in forwards;
}

@keyframes tombe {
  to { opacity: 0; transform: translateY(40px) rotate(180deg) scale(.4); }
}

/* ---------- Bandeaux défilants ---------- */
.bandeau {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;
  overflow: hidden;
  white-space: nowrap;
  font-family: "DotGothic16", monospace;
  font-size: clamp(12px, 1.6vh, 20px);
  padding: .35em 0;
  pointer-events: none;
}

.bandeau.haut {
  top: 0;
  background: #111;
  color: #3dff3d;
  border-bottom: 3px solid #ff1aff;
}

.bandeau.bas {
  bottom: 0;
  background: #ff1aff;
  color: #fff;
  border-top: 3px solid #12ff12;
  text-shadow: 2px 2px 0 #7a007a;
}

.bandeau-texte {
  display: inline-flex;
  animation: defile 40s linear infinite;
}

.bandeau.bas .bandeau-texte { animation-direction: reverse; }
.bandeau-texte span { flex: none; }

@keyframes defile {
  to { transform: translateX(-50%); }
}

/* ---------- Stickers rétro ---------- */
.sticker {
  position: absolute;
  z-index: 1;
  padding: 10px 14px;
  font-family: "Press Start 2P", "DotGothic16", monospace;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  border: 4px solid #111;
  box-shadow: 6px 6px 0 #111;
  user-select: none;
  animation: bouge 3s ease-in-out infinite;
  transform: rotate(var(--r, 0deg));
}

@keyframes bouge {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50%      { transform: rotate(var(--r, 0deg)) translateY(-8px); }
}

.s1 { left: 30px;  top: 290px; --r: -12deg; }
.s2 { left: 20px;  top: 760px; --r: 8deg;  animation-delay: -1s; }
.s3 { left: 30px;  top: 880px; --r: -4deg; animation-delay: -2s; }
.s4 { right: 50px; top: 290px; --r: 10deg; animation-delay: -.5s; }
.s5 { right: 90px; top: 500px; --r: -8deg; animation-delay: -1.5s; }
.s6 { right: 30px; top: 740px; --r: 6deg;  animation-delay: -2.5s; }
.s7 { right: 70px; top: 880px; --r: -3deg; animation-delay: -.8s; font-size: 14px; }

.new     { background: #ffef00; color: #ff1a1a; font-size: 24px; animation: bouge 3s ease-in-out infinite, clignote .8s steps(1) infinite; }
.hot     { background: #ff1a1a; color: #fff; }
.best    { background: #fff; color: #0a246a; }
.kao     { background: #fff; color: #ff1aff; font-family: "DotGothic16", monospace; font-size: 30px; }
.enigme  { background: #111; color: #3dff3d; }
.noclick { background: #ff1aff; color: #fff; text-shadow: 2px 2px 0 #7a007a; }
.www     { background: linear-gradient(#5fd8ff, #1a6cff); color: #fff; text-shadow: 2px 2px 0 #0a246a; }

/* =========================================================
   POP-UP SPAM (Windows XP en 8 bit)
   ========================================================= */
.popup {
  position: absolute;
  z-index: 50;
  width: 640px;
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
  background: #ece9d8;
  border: 4px solid #0a246a;
  box-shadow:
    inset -4px -4px 0 #aca899,
    inset 4px 4px 0 #fff,
    10px 10px 0 rgba(0, 0, 0, .45);
  animation: apparait .35s steps(4);
}

.popup[hidden] { display: none; }

@keyframes apparait {
  from { transform: scale(.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.popup-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  background: linear-gradient(#3a8cff 0%, #0058ee 45%, #0046c8 100%);
  border-bottom: 4px solid #0a246a;
  color: #fff;
  text-shadow: 2px 2px 0 #0a246a;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.popup-titre { font-size: 14px; animation: clignote 1s steps(1) infinite; }

.popup-x {
  width: 40px;
  height: 40px;
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: #e0431b;
  border: 3px solid #fff;
  box-shadow: inset -3px -3px 0 #9c2a0c;
  cursor: pointer;
}

.popup-x:hover { background: #ff6a3d; }

.popup-corps {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 22px 10px;
}

.popup-corps p + p { margin-top: 10px; }

.popup-pp {
  width: 150px;
  height: 150px;
  flex: none;
  image-rendering: pixelated;
  animation: tremble 1.5s infinite;
}

.popup-gros { color: #e0001a; font-size: 20px; animation: clignote .6s steps(1) infinite; }
.popup-petit { font-size: 13px; }

.popup-boutons {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 22px 22px;
}

.popup-boutons button {
  padding: 10px 18px;
  color: #111;
  font-family: inherit;
  font-size: 14px;
  background: #ece9d8;
  border: 3px solid #111;
  box-shadow: inset -3px -3px 0 #aca899, inset 3px 3px 0 #fff;
  cursor: pointer;
}

.popup-boutons button:hover  { background: #fff7c2; }
.popup-boutons button:active { box-shadow: inset 3px 3px 0 #aca899; }
.popup-boutons .oui { background: #3dff3d; font-weight: bold; }

/* ---------- Pop-up iPod ---------- */
.popup.ipod {
  width: 600px;
  text-align: center;
  overflow: hidden;
  border-color: #ff1aff;
  animation: apparait .35s steps(4), arcenciel 1s steps(6) infinite;
}

@keyframes arcenciel {
  0%   { border-color: #ff1aff; }
  17%  { border-color: #ff1a1a; }
  33%  { border-color: #ffef00; }
  50%  { border-color: #3dff3d; }
  67%  { border-color: #00f0d0; }
  83%  { border-color: #1a6cff; }
}

.ipod .popup-barre { background: linear-gradient(#ff7ad9 0%, #ff1aff 45%, #c400c4 100%); border-bottom-color: #7a007a; }

.confettis {
  position: absolute;
  inset: 56px 0 0;
  pointer-events: none;
}

.confettis span {
  position: absolute;
  font-size: 14px;
  animation: clignote .5s steps(1) infinite;
}

.ipod-bravo {
  position: relative;
  margin-top: 18px;
  font-size: 30px;
  color: #e0001a;
  text-shadow: 3px 3px 0 #ffef00;
  animation: clignote .6s steps(1) infinite;
}

.ipod-visiteur { position: relative; margin-top: 12px; font-size: 14px; }

.ipod .popup-corps { position: relative; justify-content: center; padding-top: 16px; }

.ipod-photo figcaption {
  margin-top: 8px;
  padding: 4px 6px;
  font-size: 10px;
  background: #ffef00;
  border: 3px solid #111;
}

.ipod .popup-pp { animation: none; background: #fff; border: 4px solid #111; }

.ipod-gain { font-size: 14px; }

.ipod-nom {
  margin: 6px 0 12px;
  font-size: 24px;
  color: #1a6cff;
  text-shadow: 2px 2px 0 #111;
}

/* iPod nano dessiné en CSS */
.ipod-dessin {
  width: 76px;
  height: 128px;
  margin: 0 auto;
  padding: 8px;
  background: linear-gradient(135deg, #ff7ad9, #ff1aff);
  border: 4px solid #111;
  border-radius: 10px;
  animation: bouge 1.2s ease-in-out infinite;
}

.ipod-ecran {
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 7px;
  color: #3dff3d;
  background: #111;
  border: 2px solid #fff;
}

.ipod-molette {
  width: 44px;
  height: 44px;
  margin: 12px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle, #ff1aff 0 28%, #fff 30%);
  border: 3px solid #111;
}

.ipod-chrono { position: relative; font-size: 12px; color: #e0001a; }
.ipod .popup-boutons { position: relative; justify-content: center; }

/* =========================================================
   PAC-MAN QUI BOUFFE LE SITE
   ========================================================= */
.pacman-zone {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

/* Cases mangées */
.mange {
  position: absolute;
  background: #000;
  pointer-events: auto;
  animation: croque .12s steps(2);
}

@keyframes croque {
  from { transform: scale(.3); }
}

.mange.revient { animation: revient .35s steps(3) forwards; animation-delay: var(--delai, 0s); }

@keyframes revient {
  to { transform: scale(0); opacity: 0; }
}

.pacman {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 84px;
  pointer-events: auto;
}

.pacman svg { width: 100%; height: 100%; display: block; filter: drop-shadow(4px 4px 0 #111); }

.pacman.touche { pointer-events: none; }
.pacman.touche svg { animation: ecrase .6s steps(6) forwards; }

@keyframes ecrase {
  0%   { transform: scale(1.3, .5); filter: brightness(3); }
  40%  { transform: scale(1.5, .2); }
  100% { transform: scale(0); opacity: 0; }
}

.pow {
  position: absolute;
  font-family: "Press Start 2P", monospace;
  font-size: 34px;
  color: #ffef00;
  text-shadow: 4px 4px 0 #ff1aff, -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111;
  pointer-events: none;
  animation: pow .8s steps(8) forwards;
}

@keyframes pow {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(-15deg); }
  30%  { transform: translate(-50%, -50%) scale(1.3) rotate(8deg); }
  100% { transform: translate(-50%, -120%) scale(1) rotate(0); opacity: 0; }
}

/* Curseur marteau */
body.mode-marteau,
body.mode-marteau * { cursor: none !important; }

.marteau {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 64px;
  height: 64px;
  display: none;
  pointer-events: none;
  transform-origin: 32px 60px;
}

body.mode-marteau .marteau { display: block; }
.marteau.tape { animation: tape .18s steps(3); }

@keyframes tape {
  50% { transform: rotate(-50deg); }
}

/* =========================================================
   TROU NOIR GLITCHÉ (dernière étape)
   ========================================================= */
/* Dessiné en pixel art par script.js (canvas 40x40 agrandi sans lissage) */
.trou-noir {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  display: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.stage.trou .cadenas img { display: none; }
.stage.trou .trou-noir { display: block; }
.stage.trou .cadenas { animation: aspire .6s steps(6); }

@keyframes aspire {
  from { transform: scale(0) rotate(-180deg); }
}

/* Gros glitch de tout l'écran quand on clique sur le trou */
body.glitch-ecran { animation: ecran-glitch .6s steps(6); }
body.glitch-ecran .scene { animation: tremble .15s steps(2) 4; }

@keyframes ecran-glitch {
  0%   { filter: invert(1) hue-rotate(90deg); }
  33%  { filter: contrast(3) saturate(4); }
  66%  { filter: invert(1) hue-rotate(200deg); }
  100% { filter: none; }
}

/* =========================================================
   BOUTON SON
   ========================================================= */
.bouton-son {
  position: fixed;
  right: 16px;
  bottom: 52px;
  z-index: 2600; /* au-dessus de tout */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  color: #111;
  background: #3dff3d;
  border: 4px solid #111;
  box-shadow: 5px 5px 0 #111;
  cursor: pointer;
}

.bouton-son svg { width: 32px; height: 32px; }
.bouton-son .croix { display: none; }
.bouton-son:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #111; }
.bouton-son:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #111; }

.bouton-son[aria-pressed="true"] { background: #ff1aff; color: #fff; text-shadow: 2px 2px 0 #7a007a; }
.bouton-son[aria-pressed="true"] .ondes { display: none; }
.bouton-son[aria-pressed="true"] .croix { display: inline; }

/* Les ondes clignotent quand le son est actif */
.bouton-son .ondes { animation: clignote 1s steps(1) infinite; }

/* =========================================================
   MOBILE (téléphone en portrait)
   La classe "mobile" est mise sur <body> par script.js.
   Rien ici ne touche la version PC.
   ========================================================= */
body.mobile .stage { width: 1080px; height: 1920px; }

body.mobile .titre { left: 20px; top: 150px; width: 1040px; }

body.mobile .attention { top: 300px; font-size: 64px; }
body.mobile .question  { top: 400px; font-size: 64px; }

body.mobile .reponse { left: 10px; top: 610px; width: 1060px; height: 271px; }
body.mobile .reponse-input { font-size: 46px; }

body.mobile .verrou { top: 960px; gap: 20px; }
body.mobile .fleche { width: 140px; height: 152px; }
body.mobile .cadenas { width: 300px; height: 298px; }
body.mobile .slash { width: 560px; margin-left: -280px; }

body.mobile .compteur { top: 1320px; flex-direction: column; gap: 18px; font-size: 40px; }
body.mobile .chiffre { width: 44px; height: 68px; padding: 4px; }

/* Stickers : regroupés en bas, plus gros, et 2 en moins */
body.mobile .sticker { padding: 16px 22px; font-size: 30px; border-width: 6px; box-shadow: 8px 8px 0 #111; }
body.mobile .s3,
body.mobile .s7 { display: none; }
body.mobile .s1 { left: 60px;  right: auto; top: 1540px; }
body.mobile .s4 { right: 60px; left: auto;  top: 1530px; }
body.mobile .s5 { left: 428px; right: auto; top: 1580px; }
body.mobile .s2 { left: 110px; right: auto; top: 1710px; }
body.mobile .s6 { right: 90px; left: auto;  top: 1730px; }
body.mobile .new { font-size: 40px; }
body.mobile .kao { font-size: 48px; }

/* Pop-ups agrandies (même valeur que POPUP_ZOOM_MOBILE dans script.js) */
body.mobile .popup { scale: 1.5; transform-origin: top left; }

/* Bouton son plus compact */
/* Bouton son sur téléphone : petit carré avec juste l'icône (comme sur l'ordi XP) */
body.mobile .bouton-son { right: 10px; bottom: 44px; gap: 0; padding: 3px 5px; border-width: 2px; box-shadow: none; }
body.mobile .bouton-son-texte { display: none; }
body.mobile .bouton-son svg { width: 20px; height: 20px; }

/* =========================================================
   CHANGEMENT DE PAGE (commun)
   ========================================================= */
.scene[hidden] { display: none; }

/* Sur la page 2 : plus de bandeaux, d'étoiles ni de pac-man */
body.page2 .bandeau,
body.page2 .paillettes,
body.page2 .pacman-zone { display: none; }

/* ---------- Transition 8 bit ---------- */
.transfert {
  position: fixed;
  inset: 0;
  z-index: 3000;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.transfert[hidden] { display: none; }

/* Sur la page suivante : bouton son en haut à droite */
body.page2 .bouton-son { top: 16px; bottom: auto; }

/* Page suivante sur mobile : bouton son en bas à gauche */
body.mobile.page2 .bouton-son { top: auto; left: 10px; right: auto; bottom: 10px; }