/* ---- éléments  ---- */
@font-face {
  font-family: "NewRodinProB";
  src: url("../fonts/fot-newrodin-pro-b.otf") format("opentype");
  font-display: swap;
}

:root {
  /* Titres : stage-1, Crédit, Exit, OUI/NON, frise mobile… */
  --type-title: 30px;
  --type-title-line: 1;
  --type-title-spacing: 0.06em;
  /* Phrases / discours Mii (off, focus cathode, bingo) */
  --type-body: 24px;
  --type-body-line: 1.4;
  /* Crédit : titre ÷ 1,5 + marge latérale */
  --type-credit-nav: calc(var(--type-title) / 1.5);
  --credit-nav-inset: 12px;
  /* Triangle blanc → teinte du texte dialogue cyan (#00e8ff) */
  --speech-triangle-filter-cyan: brightness(0) saturate(100%) invert(83%) sepia(39%) saturate(4820%)
    hue-rotate(152deg) brightness(103%) contrast(101%);
  --speech-triangle-filter-cyan-hover: brightness(0) saturate(100%) invert(90%) sepia(18%) saturate(1600%)
    hue-rotate(152deg) brightness(108%) contrast(101%);
  /* Aperçu cathode stages 1–3 (ex. s1-c1) : dialogue compact + bande blanche élargie */
  --focus-speech-type: 20px;
  --focus-speech-type-line: 1.35;
  --focus-speech-strip-w: min(420px, calc(100vw - 40px));
  --focus-speech-strip-white-x: 100px;
  /* Aperçu dessin bonus : dialogue bas, plus large */
  --focus-speech-w: min(1120px, calc(100vw - 24px));
  --focus-speech-white-x: 140px;
  --focus-speech-white-y: 20px;
  /* Pointeur Wii : toujours au-dessus de tout le site */
  --pointer-z: 2147483647;
  --cathode-h: 200px;
  /* Aperçu cathode stages 1–3 : frise en bandeau haut, hauteur fixe (×3) */
  --focus-preview-h: 600px;
  --focus-preview-margin: 20px;
}

body {
  text-wrap: pretty;
}

.speech-orphan-guard {
  white-space: nowrap;
}

/* NewRodinProB : kerning fonte désactivé (apostrophe trop espacée sinon) */
.cathode.is-cathode-locked::after,
.stage-label,
.credit-strip__mystery,
.menu-frise__title,
.off-mii__speech,
.off-mii__speech-choice,
.menu-guide-layer__choice,
.menu-guide-layer__speech,
.menu-guide-layer__oui-non-btn,
.menu-bingo-speech-block .off-mii__speech,
.menu-bingo-speech-block .off-mii__speech-char,
.credit-label {
  font-kerning: none;
  font-feature-settings: "kern" 0;
}

.cathode.is-cathode-locked::after,
.stage-label,
.credit-strip__mystery,
.menu-frise__title,
.off-mii__speech-choice {
  font-family: "NewRodinProB", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--type-title);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-spacing);
  text-transform: uppercase;
}

.off-mii__speech,
.off-mii__speech-char,
.off-mii__speech-block,
.disc-phone-insertion__hint,
.disc-storage-hint {
  font-size: var(--type-body);
  line-height: var(--type-body-line);
}

/*
 * Texte Mii off — valeurs à réutiliser sur chaque nouveau bloc :
 * .off-mii__speech-block : right -153px, width min(460px), 24px
 * apostrophe : <span class="apostrophe-tight">’</span> + margin-right -0.72em
 * letter-delay JS : fermer le mot après chaque apostrophe (l’ | avatar), pas tout coller
 * suite : triangle 0.5s après anim, clic → OFF_MII_SPEECH_PARTS dans script.js
 * dernier texte + 0.5s : OUI / NON (--type-title, #00e8ff), 20px au-dessus du texte
 */
.apostrophe-tight {
  display: inline-block;
  margin-right: -0.72em;
}

.cathode {
  width: 350px;
  height: 200px;
  background: #71c7cd;
  border-radius: 30px; /* arrondi des coins */
  position: relative;
  overflow: hidden;

  /* effet "gonflé" */
  box-shadow:
    inset 0 0 30px rgba(0, 153, 255, 0.2),
    /* lumière intérieure */ 0 0 20px rgba(100, 116, 116, 0.3); /* glow extérieur */
}

/* Cathodes verrouillées (déverrouillage via pile DVD) */
.cathode.is-cathode-locked {
  pointer-events: none;
  opacity: 0.7;
  background: #b4bcc6;
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.14),
    0 0 14px rgba(0, 0, 0, 0.12);
  transition:
    opacity 0.45s ease,
    background 0.45s ease;
}

.cathode.is-cathode-locked::after {
  content: "???";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
}

.cathode.is-cathode-locked .cathode__img,
.cathode.is-cathode-locked .cathode__gribouillis-canvas {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Salle des trophées : image sous le voile ??? — uniquement sur le stage bonus */
body.is-bonus-stage .cathode.is-trophy-cathode.is-cathode-locked .cathode__img--stage4 {
  display: block !important;
  visibility: visible !important;
  opacity: var(--trophy-cathode-opacity, 0) !important;
  transition: opacity 0.65s ease;
}

body.is-bonus-stage .cathode.is-trophy-cathode.is-cathode-locked::after {
  opacity: calc(1 - var(--trophy-cathode-opacity, 0));
  transition: opacity 0.65s ease;
}

body.is-bonus-stage .cathode.is-trophy-cathode.is-cathode-unlocked .cathode__img--stage4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.cathode.is-cathode-unlocked {
  opacity: 1;
  background: #71c7cd;
  box-shadow:
    inset 0 0 30px rgba(0, 153, 255, 0.2),
    0 0 20px rgba(100, 116, 116, 0.3);
  transition:
    opacity 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
}

.cathode.is-cathode-unlocked .cathode__img {
  transition: opacity 0.45s ease;
}

/* Notif déverrouillage : 3 petits rebonds haut/bas → pause → 3 rebonds */
.cathode.is-cathode-unlocked.is-cathode-notify {
  animation: cathodeNotifyBounce 2.2s linear infinite !important;
}

/* Bingo : colonne complète — rebonds synchronisés jusqu’au clic sur la bulle thinking */
.cathode.is-bingo-bouncing {
  animation: cathodeNotifyBounce 2.2s linear infinite !important;
}

body.is-bingo-active .cathode.is-bingo-bouncing {
  pointer-events: none;
}

/* Pendant le bingo : le corps du Mii laisse passer les clics (pointeur via --pointer-z sur .zone) */
body.is-bingo-active .parent-tête,
body.is-story-intro-tuto-active .parent-tête,
.parent-tête.is-bingo-centered {
  z-index: 10010;
  pointer-events: none;
}

body.is-bingo-active .parent-tête .mii-hit-zone,
body.is-story-intro-tuto-active .parent-tête .mii-hit-zone {
  pointer-events: none;
}

body.is-bingo-active .parent-tête .mii-bubble-hit,
body.is-story-intro-tuto-active .parent-tête .mii-bubble-hit {
  pointer-events: auto;
  cursor: none;
}

body.is-bingo-active .parent-tête .mii-bubble--bingo-photo {
  z-index: 7;
}

body.is-bingo-active .parent-tête .mii-bubble-hit--bingo-photo {
  z-index: 8;
}

body.is-bingo-active.is-cheat-bonus-active .parent-tête .menu-bingo-skip.is-visible,
body.is-story-intro-tuto-active .parent-tête .menu-bingo-skip.is-visible {
  pointer-events: auto;
  cursor: none;
}

body.is-bingo-active .menu-bingo-speech-block,
body.is-story-intro-tuto-active .menu-bingo-speech-block {
  z-index: 10013;
}

@keyframes cathodeNotifyBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  /* —— série 1 : 3 rebonds —— */
  5% {
    transform: translateY(-9px);
  }
  10% {
    transform: translateY(0);
  }
  11% {
    transform: translateY(2px);
  }
  12% {
    transform: translateY(0);
  }

  17% {
    transform: translateY(-8px);
  }
  22% {
    transform: translateY(0);
  }
  23% {
    transform: translateY(1.5px);
  }
  24% {
    transform: translateY(0);
  }

  29% {
    transform: translateY(-7px);
  }
  34% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(1px);
  }
  36% {
    transform: translateY(0);
  }

  /* pause */
  36%,
  48% {
    transform: translateY(0);
  }

  /* —— série 2 : 3 rebonds —— */
  53% {
    transform: translateY(-9px);
  }
  58% {
    transform: translateY(0);
  }
  59% {
    transform: translateY(2px);
  }
  60% {
    transform: translateY(0);
  }

  65% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(0);
  }
  71% {
    transform: translateY(1.5px);
  }
  72% {
    transform: translateY(0);
  }

  77% {
    transform: translateY(-7px);
  }
  82% {
    transform: translateY(0);
  }
  83% {
    transform: translateY(1px);
  }
  84% {
    transform: translateY(0);
  }

  84%,
  100% {
    transform: translateY(0);
  }
}

.stage-label {
  /* Position Y figée dans le document (--stage-label-top, JS) : ne remonte pas au resize */
  position: absolute;
  left: 50%;
  top: var(--stage-label-top, 800px);
  transform: translateX(-50%);
  transform-origin: center center;
  z-index: 10020;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  animation: bouncedownresponsivestage1 0.6s ease;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.stage-label__group {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stage-label__text {
  display: inline;
}

.stage-label__age {
  display: block;
  margin-top: 0.2em;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Fenêtre trop basse : le label reste en place mais sort du viewport (comme clip) */
.stage-label.is-out-of-view {
  opacity: 0;
  visibility: hidden;
}

.stage-label__text .lettre {
  display: inline-block;
  will-change: transform;
}

.stage-label__text .lettre.saute {
  animation: saut 0.45s ease var(--lettre-delay, 30s) both;
}

@keyframes saut {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(4px); }
  50%  { transform: translateY(-20px); }
  75%  { transform: translateY(6px); }
  100% { transform: translateY(0); }
}

/* stage-1 */
@media (max-width: 760px) {
  .stage-label__group--stage1 {
    display: flex;
  }
}

/* stage-2 */
@media (max-width: 1130px) and (min-width: 761px) {
  .stage-label {
    animation: bouncedownresponsivestage2 0.6s ease;
  }
  .stage-label__group--stage2 {
    display: flex;
  }
}

/* Stage 3 */
@media (max-width: 1500px) and (min-width: 1131px) {
  .stage-label {
    animation: bouncedownresponsivestage3 0.6s ease;
  }
  .stage-label__group--stage3 {
    display: flex;
  }
}

/* Stage bonus */
@media (min-width: 1501px) {
  .stage-label {
    animation: bouncedownresponsivestage4 0.6s ease;
  }
  .stage-label__group--bonus {
    display: flex;
  }
}

.stage-label.is-bouncing-stage-z1 {
  animation: bouncedownresponsivestage1 0.6s ease !important;
}
.stage-label.is-bouncing-stage-z2 {
  animation: bouncedownresponsivestage2 0.6s ease !important;
}
.stage-label.is-bouncing-stage-z3 {
  animation: bouncedownresponsivestage3 0.6s ease !important;
}
.stage-label.is-bouncing-stage-z4 {
  animation: bouncedownresponsivestage4 0.6s ease !important;
}

/* Crédit — plus petit que les titres, léger retrait du bord */
.credit-label {
  font-family: "NewRodinProB", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--type-credit-nav);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-spacing);
  text-transform: uppercase;
}

.credit-label {
  position: fixed;
  right: max(var(--credit-nav-inset), env(safe-area-inset-right, 0px));
  bottom: 15px;
  z-index: 10020;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  user-select: none;
  pointer-events: auto;
  cursor: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.credit-label__text {
  display: inline-block;
}

/* Aperçu crédit : frise plein écran, scroll horizontal */
.credit-focus-layer {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: none;
  background: #0a1218;
  overflow: hidden;
}

.credit-focus-layer.is-open {
  display: block;
}

.credit-copy {
  --credit-copy-color: rgba(255, 255, 255, 0.92);
  --credit-copy-title-top: max(22px, env(safe-area-inset-top, 0px));
  --credit-copy-title-gap: 14px;
  --credit-copy-bottom: max(72px, calc(56px + env(safe-area-inset-bottom, 0px)));
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.credit-copy__title {
  position: absolute;
  top: var(--credit-copy-title-top);
  left: 0;
  right: 0;
  z-index: 3;
  flex-shrink: 0;
  margin: 0;
  padding: 0 16px;
  font-family: "NewRodinProB", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--type-title);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-spacing);
  text-transform: uppercase;
  text-align: center;
  color: var(--credit-copy-color);
  font-kerning: none;
  font-feature-settings: "kern" 0;
  pointer-events: none;
}

.credit-copy__body {
  position: absolute;
  top: calc(
    var(--credit-copy-title-top) + (var(--type-title) * var(--type-title-line)) +
      var(--credit-copy-title-gap)
  );
  left: 0;
  right: 0;
  bottom: var(--credit-copy-bottom);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  pointer-events: auto;
  user-select: text;
}

.credit-copy__body-inner {
  max-width: min(720px, 92vw);
  margin: 0 auto;
  padding: 0.5em 4px 1.5em;
  text-align: center;
}

.credit-copy__body-inner > * + * {
  margin-top: 1.15em;
}

.credit-copy__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  margin: 0 0 0.35em;
}

.credit-copy__line,
.credit-copy__text {
  margin: 0;
  font-family: "NewRodinProB", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.35;
  color: var(--credit-copy-color);
  text-wrap: pretty;
}

@media (max-width: 760px), (max-height: 640px) {
  .credit-copy {
    --credit-copy-title-top: max(16px, env(safe-area-inset-top, 0px));
    --credit-copy-title-gap: 10px;
    --credit-copy-bottom: max(64px, calc(48px + env(safe-area-inset-bottom, 0px)));
  }

  .credit-copy__body-inner {
    max-width: min(680px, 96vw);
    padding-left: 10px;
    padding-right: 10px;
  }

  .credit-copy__body-inner > * + * {
    margin-top: 0.95em;
  }
}

.credit-strip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  pointer-events: auto;
  cursor: none;
}

.credit-strip__inner {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  transform: translate3d(var(--credit-strip-x, 0), 0, 0);
  will-change: transform;
}

.credit-strip__slide {
  flex: 0 0 auto;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

.credit-strip__slide.is-locked {
  min-width: 100vw;
  pointer-events: none;
  opacity: 0.7;
  background: #b4bcc6;
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.14),
    0 0 14px rgba(0, 0, 0, 0.12);
}

.credit-strip__slide.is-unlocked {
  background: #071018;
}

.credit-strip__mystery {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
}

.credit-strip__img {
  display: block;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.credit-strip-scrollbar {
  --credit-strip-progress: 0;
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 10034;
  width: min(240px, 46vw);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

body.is-credit-open .credit-strip-scrollbar:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.credit-strip-scrollbar.is-disabled {
  opacity: 0.28;
  pointer-events: none;
}

.credit-strip-scrollbar__track {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  pointer-events: auto;
  touch-action: none;
  cursor: none;
}

.credit-strip-scrollbar__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.28);
}

.credit-strip-scrollbar__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--credit-strip-progress, 0) * 100%);
  width: 11px;
  height: 11px;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.88);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.credit-strip-scrollbar__thumb:active {
  cursor: grabbing;
}

@media (max-width: 760px) {
  .credit-strip-scrollbar {
    width: min(200px, 58vw);
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .credit-strip-scrollbar__thumb {
    width: 13px;
    height: 13px;
  }
}

body.is-credit-open .off-scroll,
body.is-credit-open .power-btn,
body.is-credit-open .credit-label,
body.is-focus-open .disc-btn,
body.is-focus-open .power-btn {
  pointer-events: none;
}

body.is-credit-open .power-btn,
body.is-focus-open .disc-btn,
body.is-focus-open .power-btn {
  opacity: 0;
  visibility: hidden;
}

body.is-credit-open .zone,
body.is-off.is-credit-open .zone {
  pointer-events: none;
}

body.is-credit-open .pointer,
body.is-off.is-credit-open .pointer {
  opacity: 1 !important;
}

@keyframes bouncedownresponsivestage1 {
  0% {
    transform: translateX(-50%) translateY(-10px) scale(1.02);
  }
  50% {
    transform: translateX(-50%) translateY(10px) scale(0.98);
  }
  70% {
    transform: translateX(-50%) translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes bouncedownresponsivestage2 {
  0% {
    transform: translateX(-50%) translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateX(-50%) translateY(10px) scale(0.98);
  }
  70% {
    transform: translateX(-50%) translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes bouncedownresponsivestage3 {
  0% {
    transform: translateX(-50%) translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateX(-50%) translateY(10px) scale(0.98);
  }
  70% {
    transform: translateX(-50%) translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes bouncedownresponsivestage4 {
  0% {
    transform: translateX(-50%) translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateX(-50%) translateY(10px) scale(0.98);
  }
  70% {
    transform: translateX(-50%) translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ---- Fond FX (dernière couche, déformé au viewport) ---- */
.bg-effect {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: fill; /* déformation volontaire pour matcher la fenêtre */
  z-index: 1; /* juste au-dessus du fond (bg-pan) */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.6;
}

/* Exception: en mode frise, le fond FX repasse derrière */
html:has(.bg-pan[data-strip="1"]) .bg-effect {
  z-index: -9999;
}

/* ---- Dark mode fond effect (OFF page) ---- */
.dark-mode-fond-effect {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: fill; /* déformation volontaire pour matcher la fenêtre */
  z-index: 1; /* juste au-dessus du fond (bg-pan) */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.3;
}

/* Fond menu off / disc storage — texture + dégradé */
.menu-dark-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--menu-dark-gradient-opacity, 0.45);
  background: var(--menu-dark-gradient);
}

/* Halos décoratifs — menus off & disc storage (fixe viewport, drift lent) */
.menu-dark-halos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.is-off .menu-dark-halos {
  opacity: 0;
  animation: offTitleFade 1.1s ease 0.12s forwards;
}

.menu-dark-halos__scribble {
  position: absolute;
  display: block;
  background: transparent;
  border-radius: 42% 58% 52% 48% / 48% 42% 58% 52%;
  border: 2px solid rgba(0, 232, 255, 0.48);
  box-shadow:
    0 0 28px rgba(0, 232, 255, 0.35),
    0 0 64px rgba(0, 168, 198, 0.22),
    inset 0 0 36px rgba(113, 199, 205, 0.16);
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(0, 232, 255, 0.28));
  will-change: transform;
}

.menu-dark-halos__glow {
  position: absolute;
  display: block;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform, opacity;
}

.menu-dark-halos__scribble--a {
  animation: menuHaloDriftA 16s ease-in-out infinite;
  animation-delay: -3s;
}

.menu-dark-halos__scribble--b {
  animation: menuHaloDriftB 18s ease-in-out infinite;
  animation-delay: -7s;
}

.menu-dark-halos__scribble--c {
  animation: menuHaloDriftC 14s ease-in-out infinite;
  animation-delay: -5s;
}

.menu-dark-halos__scribble--d {
  animation: menuHaloDriftD 20s ease-in-out infinite;
  animation-delay: -9s;
}

.menu-dark-halos__scribble--e {
  animation: menuHaloDriftE 17s ease-in-out infinite;
  animation-delay: -2s;
}

.menu-dark-halos__glow--1 {
  animation: menuHaloGlowC 21s ease-in-out infinite;
  animation-delay: -8s;
}

.menu-dark-halos::before,
.menu-dark-halos::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  opacity: 0.88;
  will-change: transform, opacity;
}

.menu-dark-halos::before {
  animation: menuHaloGlowA 20s ease-in-out infinite;
  animation-delay: -6s;
}

.menu-dark-halos::after {
  animation: menuHaloGlowB 18s ease-in-out infinite;
  animation-delay: -12s;
}

/* Positions — menu off */
.menu-dark-halos--off .menu-dark-halos__scribble--a {
  left: -6%;
  top: 12%;
  width: min(64vw, 360px);
  height: min(42vw, 220px);
  border-color: rgba(0, 232, 255, 0.55);
  border-width: 2.5px;
}

.menu-dark-halos--off .menu-dark-halos__scribble--b {
  left: 6%;
  top: 30%;
  width: min(48vw, 260px);
  height: min(30vw, 152px);
  border-color: rgba(113, 199, 205, 0.48);
  border-width: 1.5px;
  opacity: 0.92;
}

.menu-dark-halos--off .menu-dark-halos__scribble--c {
  right: -8%;
  top: 46%;
  width: min(54vw, 290px);
  height: min(34vw, 178px);
  border-color: rgba(0, 232, 255, 0.42);
}

.menu-dark-halos--off .menu-dark-halos__scribble--d {
  right: 8%;
  top: 58%;
  width: min(46vw, 248px);
  height: min(28vw, 140px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 32px rgba(0, 232, 255, 0.3),
    0 0 72px rgba(0, 120, 160, 0.18);
}

.menu-dark-halos--off .menu-dark-halos__scribble--e {
  left: 18%;
  top: 68%;
  width: min(40vw, 210px);
  height: min(24vw, 118px);
  border-color: rgba(113, 199, 205, 0.44);
  border-width: 1.5px;
  opacity: 0.88;
}

.menu-dark-halos--off::before {
  left: 8%;
  top: 4%;
  width: min(48vw, 260px);
  height: min(32vw, 168px);
  background: radial-gradient(ellipse at 40% 50%, rgba(0, 232, 255, 0.34), transparent 68%);
}

.menu-dark-halos--off::after {
  right: 4%;
  bottom: 10%;
  width: min(52vw, 280px);
  height: min(34vw, 176px);
  background: radial-gradient(ellipse at 55% 42%, rgba(113, 199, 205, 0.28), transparent 64%);
}

.menu-dark-halos--off .menu-dark-halos__glow--1 {
  left: 26%;
  top: 36%;
  width: min(58vw, 320px);
  height: min(38vw, 210px);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 232, 255, 0.26), transparent 70%);
  opacity: 0.9;
}

/* Positions — disc storage (répartis sur tout l'écran) */
.menu-dark-halos--disc .menu-dark-halos__scribble--a {
  left: -4%;
  top: 8%;
  width: min(58vw, 320px);
  height: min(36vw, 188px);
  border-color: rgba(0, 232, 255, 0.52);
  border-width: 2.5px;
}

.menu-dark-halos--disc .menu-dark-halos__scribble--b {
  right: 2%;
  top: 16%;
  width: min(46vw, 248px);
  height: min(28vw, 142px);
  border-color: rgba(113, 199, 205, 0.46);
  border-width: 1.5px;
  opacity: 0.92;
}

.menu-dark-halos--disc .menu-dark-halos__scribble--c {
  left: 4%;
  bottom: 26%;
  width: min(52vw, 280px);
  height: min(32vw, 168px);
  border-color: rgba(0, 232, 255, 0.4);
}

.menu-dark-halos--disc .menu-dark-halos__scribble--d {
  right: -6%;
  bottom: 16%;
  width: min(50vw, 268px);
  height: min(30vw, 152px);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow:
    0 0 30px rgba(0, 232, 255, 0.28),
    0 0 68px rgba(0, 120, 160, 0.16);
  opacity: 0.94;
}

.menu-dark-halos--disc .menu-dark-halos__scribble--e {
  left: 34%;
  top: 42%;
  width: min(38vw, 200px);
  height: min(22vw, 112px);
  border-color: rgba(113, 199, 205, 0.4);
  border-width: 1.5px;
  opacity: 0.82;
}

.menu-dark-halos--disc::before {
  left: 12%;
  top: 20%;
  width: min(48vw, 260px);
  height: min(32vw, 168px);
  background: radial-gradient(ellipse at 42% 48%, rgba(0, 232, 255, 0.32), transparent 66%);
}

.menu-dark-halos--disc::after {
  right: 10%;
  bottom: 30%;
  width: min(50vw, 270px);
  height: min(32vw, 168px);
  background: radial-gradient(ellipse at 50% 44%, rgba(113, 199, 205, 0.26), transparent 64%);
}

.menu-dark-halos--disc .menu-dark-halos__glow--1 {
  left: 20%;
  top: 26%;
  width: min(62vw, 340px);
  height: min(40vw, 220px);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 232, 255, 0.24), transparent 68%);
  opacity: 0.92;
}

@keyframes menuHaloDriftA {
  0%,
  100% {
    transform: translate(0, 0) rotate(-14deg) skewX(-6deg);
  }
  33% {
    transform: translate(26px, -20px) rotate(-8deg) skewX(-3deg);
  }
  66% {
    transform: translate(-18px, 22px) rotate(-20deg) skewX(-8deg);
  }
}

@keyframes menuHaloDriftB {
  0%,
  100% {
    transform: translate(0, 0) rotate(8deg) scaleX(1.08);
  }
  40% {
    transform: translate(-22px, 16px) rotate(14deg) scaleX(1.04);
  }
  70% {
    transform: translate(18px, -14px) rotate(2deg) scaleX(1.12);
  }
}

@keyframes menuHaloDriftC {
  0%,
  100% {
    transform: translate(0, 0) rotate(18deg) skewY(4deg);
  }
  50% {
    transform: translate(28px, -16px) rotate(26deg) skewY(1deg);
  }
}

@keyframes menuHaloDriftD {
  0%,
  100% {
    transform: translate(0, 0) rotate(-9deg);
  }
  35% {
    transform: translate(-20px, 24px) rotate(-3deg);
  }
  75% {
    transform: translate(22px, -12px) rotate(-16deg);
  }
}

@keyframes menuHaloDriftE {
  0%,
  100% {
    transform: translate(0, 0) rotate(22deg) skewX(5deg);
  }
  45% {
    transform: translate(-24px, 14px) rotate(15deg) skewX(2deg);
  }
  80% {
    transform: translate(16px, -18px) rotate(28deg) skewX(7deg);
  }
}

@keyframes menuHaloGlowA {
  0%,
  100% {
    transform: translate(0, 0) rotate(-20deg);
    opacity: 0.82;
  }
  50% {
    transform: translate(28px, -22px) rotate(-10deg);
    opacity: 1;
  }
}

@keyframes menuHaloGlowB {
  0%,
  100% {
    transform: translate(0, 0) rotate(14deg);
    opacity: 0.78;
  }
  50% {
    transform: translate(-26px, 18px) rotate(24deg);
    opacity: 0.98;
  }
}

@keyframes menuHaloGlowC {
  0%,
  100% {
    transform: translate(0, 0) rotate(-8deg);
    opacity: 0.8;
  }
  50% {
    transform: translate(22px, 16px) rotate(6deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-dark-halos__scribble,
  .menu-dark-halos__glow,
  .menu-dark-halos::before,
  .menu-dark-halos::after {
    animation: none !important;
  }
}

body.is-off {
  --menu-dark-gradient: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.78) 68%,
    rgba(255, 255, 255, 0.94) 92%,
    rgba(255, 255, 255, 0.94) 100%
  );
}

body.is-disc-storage {
  --menu-dark-gradient: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.78) 68%,
    rgba(255, 255, 255, 0.94) 92%,
    rgba(255, 255, 255, 0.94) 100%
  );
}

/* Texture fixe viewport : ne défile pas avec le scroll off */
body.is-off .dark-mode-fond-effect {
  z-index: 0;
  opacity: 0.42;
}

body.is-disc-storage .dark-mode-fond-effect--disc {
  z-index: 0;
  opacity: 0.42;
}

/* Exception: en mode frise, le fond FX repasse derrière */
html:has(.bg-pan[data-strip="1"]) .dark-mode-fond-effect {
  z-index: -9999;
}

.cathode__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  display: none;
}

/* Overlay gribouillis (cathodes stages 1–3) — ajout sans remplacement */
.cathode__gribouillis-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: none;
  pointer-events: none;
}

/* 1 colonne (3 cathodes) -> stage-1 */
@media (max-width: 760px) {
  .cathode__img--stage1 {
    display: block;
  }

  .cathode__gribouillis-canvas {
    display: block;
  }
}

/* 2 colonnes (6 cathodes) -> stage-2 */
@media (max-width: 1130px) and (min-width: 761px) {
  .cathode__img--stage2 {
    display: block;
  }

  .cathode__gribouillis-canvas {
    display: block;
  }
}

/* 3 colonnes (9 cathodes) -> Stage 3 */
@media (max-width: 1500px) and (min-width: 1131px) {
  .cathode__img--stage3 {
    display: block;
  }

  .cathode__gribouillis-canvas {
    display: block;
  }
}

/* 4 colonnes (12 cathodes) -> Stage 4 */
@media (min-width: 1501px) {
  .cathode__img--stage4 {
    display: block;
  }

  .cathode__gribouillis-canvas {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* ---- fond-pan (image pan horizontal) ---- */
html,
body {
  height: 100%;
  position: center;
  top: 50%;
  overflow: hidden; /* on capte le scroll pour le pan horizontal */
  background: #fff;
}

.bg-pan {
  --bg-x: 0px;
  --bg-y: 0px;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* non-interactif */
  background: #fff;
}

.bg-pan[data-front="1"] {
  /* Quand la fenêtre est au minimum en hauteur, le décor passe au-dessus du contenu */
  z-index: 10000;
}

.bg-pan__img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(var(--bg-x), var(--bg-y), 0);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.7;
}

.bg-pan__strip {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  transform: translate3d(var(--bg-x), 0, 0);
  will-change: transform;
}

.bg-pan[data-strip="1"] .bg-pan__strip {
  display: flex;
}

.bg-pan[data-strip="1"] .bg-pan__img {
  display: none;
}

.bg-pan__strip-img {
  height: 100vh;
  width: auto;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.5;
}

/* Pleine opacité en "taille réduite" (mode frise hauteur minimale) */
.bg-pan[data-strip="1"] .bg-pan__strip-img {
  opacity: 1;
}

/* ---- Fade blanc pour transitions de mode ---- */
.fade-white {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 10050;
  transition: opacity 220ms ease;
}

body.is-fading .fade-white {
  opacity: 0.92;
}

body.is-disc-to-menu-flash .fade-white {
  opacity: 1;
  transition: opacity 0.35s ease-in;
}

body.is-disc-menu-entry .fade-white {
  opacity: 1;
  transition: opacity 0.55s ease-out;
}

.bg-pan[data-mode="x"] .bg-pan__img {
  height: 100vh; /* hauteur corrélée à la fenêtre */
  width: auto; /* proportions conservées */
}

.bg-pan[data-mode="y"] .bg-pan__img {
  width: 100vw; /* largeur corrélée à la fenêtre */
  height: auto; /* proportions conservées */
}

/* flèches */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background: rgba(255, 255, 255, 0.1);
  border: none;
  font-size: var(--type-body);
  cursor: none;

  padding: 20px;
  z-index: 4;
  text-decoration: none;
  color: inherit;
  display: none;
}

.arrow.right {
  right: 10px;
  transform: translateY(-50%) rotate(180deg);
}

.arrow.left {
  left: 10px;
}

/* Indication navigation stage (desktop) — cathode débloquée hors fenêtre courante */
@keyframes stageNavArrowRainbow {
  0% {
    filter: hue-rotate(0deg) saturate(1.45) brightness(1.05);
  }

  100% {
    filter: hue-rotate(360deg) saturate(1.45) brightness(1.05);
  }
}

.stage-nav-hint {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 10100;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

body.is-stage-nav-visible .stage-nav-hint,
.stage-nav-hint.is-active {
  opacity: 1;
  visibility: visible;
}

body.is-disc-storage-phone .stage-nav-hint,
body.is-disc-storage-phone.is-stage-nav-visible .stage-nav-hint {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.is-disc-insertion-open .menu-dark-backdrop,
body.is-disc-phone-insertion-open .menu-dark-backdrop,
body.is-disc-transitioning .menu-dark-backdrop {
  visibility: hidden;
}

body.is-disc-storage.is-disc-insertion-open .stage-nav-hint {
  z-index: 10100;
}

.stage-nav-hint__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(104px, 10vw, 144px);
  filter: hue-rotate(0deg) saturate(1.45) brightness(1.05);
}

.stage-nav-hint--left .stage-nav-hint__inner {
  animation:
    stageNavArrowRainbow 2.4s linear infinite,
    stageNavHintPointLeft 2.6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.stage-nav-hint--right .stage-nav-hint__inner {
  animation:
    stageNavArrowRainbow 2.4s linear infinite,
    stageNavHintPointRight 2.6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.stage-nav-hint__arrow {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile frise — haut / bas (boutons pivotés, animation verticale) */
body.is-mobile-frise .stage-nav-hint {
  right: auto;
  left: 50%;
  top: auto;
  bottom: auto;
  transform: translateX(-50%);
}

body.is-mobile-frise .stage-nav-hint--left {
  top: max(16px, env(safe-area-inset-top, 0px));
}

body.is-mobile-frise .stage-nav-hint--right {
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

body.is-mobile-frise .stage-nav-hint__inner {
  width: clamp(80px, 22vw, 112px);
}

body.is-mobile-frise .stage-nav-hint--left .stage-nav-hint__arrow {
  transform: rotate(-90deg);
}

body.is-mobile-frise .stage-nav-hint--right .stage-nav-hint__arrow {
  transform: rotate(90deg);
}

body.is-mobile-frise .stage-nav-hint--left .stage-nav-hint__inner {
  animation:
    stageNavArrowRainbow 2.4s linear infinite,
    stageNavHintPointUp 2.6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

body.is-mobile-frise .stage-nav-hint--right .stage-nav-hint__inner {
  animation:
    stageNavArrowRainbow 2.4s linear infinite,
    stageNavHintPointDown 2.6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

/* 2 coups → pause → 2 coups → pause (tir doux vers la direction) */
@keyframes stageNavHintPointLeft {
  0%,
  100% {
    transform: translateX(0);
  }

  8% {
    transform: translateX(-26px);
  }

  14% {
    transform: translateX(-11px);
  }

  20% {
    transform: translateX(-22px);
  }

  26%,
  46% {
    transform: translateX(0);
  }

  54% {
    transform: translateX(-26px);
  }

  60% {
    transform: translateX(-11px);
  }

  66% {
    transform: translateX(-22px);
  }

  72%,
  88% {
    transform: translateX(0);
  }
}

@keyframes stageNavHintPointRight {
  0%,
  100% {
    transform: translateX(0);
  }

  8% {
    transform: translateX(26px);
  }

  14% {
    transform: translateX(11px);
  }

  20% {
    transform: translateX(22px);
  }

  26%,
  46% {
    transform: translateX(0);
  }

  54% {
    transform: translateX(26px);
  }

  60% {
    transform: translateX(11px);
  }

  66% {
    transform: translateX(22px);
  }

  72%,
  88% {
    transform: translateX(0);
  }
}

@keyframes stageNavHintPointUp {
  0%,
  100% {
    transform: translateY(0);
  }

  8% {
    transform: translateY(-26px);
  }

  14% {
    transform: translateY(-11px);
  }

  20% {
    transform: translateY(-22px);
  }

  26%,
  46% {
    transform: translateY(0);
  }

  54% {
    transform: translateY(-26px);
  }

  60% {
    transform: translateY(-11px);
  }

  66% {
    transform: translateY(-22px);
  }

  72%,
  88% {
    transform: translateY(0);
  }
}

@keyframes stageNavHintPointDown {
  0%,
  100% {
    transform: translateY(0);
  }

  8% {
    transform: translateY(26px);
  }

  14% {
    transform: translateY(11px);
  }

  20% {
    transform: translateY(22px);
  }

  26%,
  46% {
    transform: translateY(0);
  }

  54% {
    transform: translateY(26px);
  }

  60% {
    transform: translateY(11px);
  }

  66% {
    transform: translateY(22px);
  }

  72%,
  88% {
    transform: translateY(0);
  }
}

.carousel {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  perspective: 1400px;
}





/* ---- GRILLE ET PREVIEW ---- */
.container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, 350px);
  grid-template-rows: repeat(3, 200px);
  gap: 20px;
  padding: 20px;
  justify-content: center;
  justify-items: center;
  z-index: 2;
}

/* ---- DESACTIVE CAROUSEL (menu cadenas) ---- */
/* On ne veut plus ni preview ni navigation par flèches/ancres. */
.preview-pane {
  display: none !important;
}

.arrow {
  display: none !important;
}

.preview-pane {
  position: absolute;
  top: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
  transform-style: preserve-3d;
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 320ms ease;
  filter: blur(0.7px) saturate(0.8);
  z-index: 1;
}

.preview-next {
  right: -760px;
  transform-origin: left center;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.95), transparent 78%);
}

.preview-prev {
  left: -760px;
  transform-origin: right center;
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.95), transparent 78%);
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 350px);
  grid-template-rows: repeat(3, 200px);
  gap: 20px;
}

.preview-grid .ghost {
  display: none;
  opacity: 0.62;
  box-shadow:
    inset 0 0 22px rgba(0, 153, 255, 0.16),
    0 0 14px rgba(90, 110, 110, 0.2);
}



/* ---- PAGINATION RESPONSIVE EN CAROUSEL  ---- */

/* état de base : première "page" */
.container .cathode {
  display: none;
}

/* Desktop large : 4 colonnes, 3 lignes max (tout tient sur une page) */
@media (min-width: 1501px) {
  .container {
    grid-template-columns: repeat(4, 350px);
  }

  .container .cathode {
    display: block;
  }

  .preview-pane {
    display: none;
  }

  .arrow {
    display: none;
  }
}

/* 3 colonnes : 9 cases max sur la première page, le reste sur la seconde */
@media (max-width: 1500px) and (min-width: 1131px) {
  .container {
    grid-template-columns: repeat(3, 350px);
  }

  /* page par défaut (aucun :target) → premières 9 */
  .container .cathode:nth-child(-n + 9) {
    display: block;
  }

  /* quand on cible page2 → on masque les 9 premières et on montre les suivantes */
  #page2:target ~ .container .cathode {
    display: none;
  }
  #page2:target ~ .container .cathode:nth-child(n + 10) {
    display: block;
  }

  /* revenir à la première page */
  #page1:target ~ .container .cathode {
    display: none;
  }
  #page1:target ~ .container .cathode:nth-child(-n + 9) {
    display: block;
  }

  .preview-grid .ghost:nth-child(n + 10) {
    display: block;
  }

  .preview-next {
    opacity: 0.48;
    transform: translateY(-50%) scale(0.9);
    filter: blur(0.5px) saturate(0.88);
  }

  .preview-prev {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }

  #page2:target ~ .preview-next {
    opacity: 0;
    transform: translateY(-50%) scale(0.78);
  }

  #page2:target ~ .preview-next .ghost {
    display: none;
  }

  #page2:target ~ .preview-prev {
    opacity: 0.42;
    transform: translateY(-50%) scale(0.88);
    filter: blur(0.5px) saturate(0.88);
  }

  #page2:target ~ .preview-prev .ghost {
    display: none;
  }

  #page2:target ~ .preview-prev .ghost:nth-child(-n + 9) {
    display: block;
  }

  #page1:target ~ .preview-next {
    opacity: 0.48;
    transform: translateY(-50%) scale(0.9);
    filter: blur(0.5px) saturate(0.88);
  }

  #page1:target ~ .preview-prev {
    opacity: 0;
  }

  #page1:target ~ .preview-next .ghost {
    display: none;
  }

  #page1:target ~ .preview-next .ghost:nth-child(n + 10) {
    display: block;
  }

  .arrow.right.to-page2 {
    display: block;
  }

  #page2:target ~ .arrow.right.to-page2 {
    display: none;
  }

  #page2:target ~ .arrow.left.to-page1 {
    display: block;
  }
}

/* 2 colonnes : 6 cases par page (max 3 lignes) */
@media (max-width: 1130px) and (min-width: 761px) {
  .container {
    grid-template-columns: repeat(2, 350px);
  }

  /* par défaut → 6 premières */
  .container .cathode:nth-child(-n + 6) {
    display: block;
  }

  /* page2 : 7 à 12 */
  #page2:target ~ .container .cathode {
    display: none;
  }
  #page2:target ~ .container .cathode:nth-child(n + 7) {
    display: block;
  }

  /* retour page1 */
  #page1:target ~ .container .cathode {
    display: none;
  }
  #page1:target ~ .container .cathode:nth-child(-n + 6) {
    display: block;
  }

  .preview-next {
    right: -500px;
    opacity: 0.48;
    transform: translateY(-50%) scale(0.9);
    filter: blur(0.5px) saturate(0.88);
  }

  .preview-prev {
    left: -500px;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }

  .preview-grid {
    grid-template-columns: repeat(2, 350px);
  }

  .preview-grid .ghost {
    display: none;
  }

  .preview-next .ghost:nth-child(n + 7) {
    display: block;
  }

  #page2:target ~ .preview-next {
    opacity: 0;
    transform: translateY(-50%) scale(0.78);
  }

  #page2:target ~ .preview-next .ghost {
    display: none;
  }

  #page2:target ~ .preview-prev {
    opacity: 0.42;
    transform: translateY(-50%) scale(0.88);
    filter: blur(0.5px) saturate(0.88);
  }

  #page2:target ~ .preview-prev .ghost {
    display: none;
  }

  #page2:target ~ .preview-prev .ghost:nth-child(-n + 6) {
    display: block;
  }

  #page1:target ~ .preview-next {
    opacity: 0.48;
    transform: translateY(-50%) scale(0.9);
  }

  #page1:target ~ .preview-prev {
    opacity: 0;
  }

  #page1:target ~ .preview-next .ghost {
    display: none;
  }

  #page1:target ~ .preview-next .ghost:nth-child(n + 7) {
    display: block;
  }

  .arrow.right.to-page2 {
    display: block;
  }

  #page2:target ~ .arrow.right.to-page2 {
    display: none;
  }

  #page2:target ~ .arrow.left.to-page1 {
    display: block;
  }
}

/* 1 colonne : 3 cases par page (4 pages possibles) */
@media (max-width: 760px) {
  .container {
    grid-template-columns: 1fr;
  }

  /* par défaut → 3 premières */
  .container .cathode:nth-child(-n + 3) {
    display: block;
  }

  /* page2 : 4 à 6 */
  #page2:target ~ .container .cathode {
    display: none;
  }
  #page2:target ~ .container .cathode:nth-child(n + 4):nth-child(-n + 6) {
    display: block;
  }

  /* page3 : 7 à 9 */
  #page3:target ~ .container .cathode {
    display: none;
  }
  #page3:target ~ .container .cathode:nth-child(n + 7):nth-child(-n + 9) {
    display: block;
  }

  /* page4 : 10 à 12 */
  #page4:target ~ .container .cathode {
    display: none;
  }
  #page4:target ~ .container .cathode:nth-child(n + 10) {
    display: block;
  }

  /* retour page1 */
  #page1:target ~ .container .cathode {
    display: none;
  }
  #page1:target ~ .container .cathode:nth-child(-n + 3) {
    display: block;
  }

  .preview-next {
    right: -190px;
    opacity: 0.46;
    transform: translateY(-50%) scale(0.9);
    filter: blur(0.45px) saturate(0.9);
  }

  .preview-prev {
    left: -190px;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }

  .preview-grid {
    grid-template-columns: 350px;
  }

  .preview-grid .ghost {
    display: none;
  }

  .preview-next .ghost:nth-child(n + 4):nth-child(-n + 6) {
    display: block;
  }

  #page1:target ~ .preview-next .ghost,
  #page2:target ~ .preview-next .ghost,
  #page3:target ~ .preview-next .ghost,
  #page4:target ~ .preview-next .ghost,
  #page1:target ~ .preview-prev .ghost,
  #page2:target ~ .preview-prev .ghost,
  #page3:target ~ .preview-prev .ghost,
  #page4:target ~ .preview-prev .ghost {
    display: none;
  }

  #page1:target ~ .preview-next .ghost:nth-child(n + 4):nth-child(-n + 6) {
    display: block;
  }

  #page1:target ~ .preview-prev {
    opacity: 0;
  }

  #page2:target ~ .preview-prev {
    opacity: 0.42;
    transform: translateY(-50%) scale(0.88);
  }
  #page2:target ~ .preview-prev .ghost:nth-child(-n + 3) {
    display: block;
  }
  #page2:target ~ .preview-next .ghost:nth-child(n + 7):nth-child(-n + 9) {
    display: block;
  }

  #page3:target ~ .preview-prev {
    opacity: 0.42;
    transform: translateY(-50%) scale(0.88);
  }
  #page3:target ~ .preview-prev .ghost:nth-child(n + 4):nth-child(-n + 6) {
    display: block;
  }
  #page3:target ~ .preview-next .ghost:nth-child(n + 10) {
    display: block;
  }

  #page4:target ~ .preview-next {
    opacity: 0;
    transform: translateY(-50%) scale(0.78);
  }
  #page4:target ~ .preview-prev {
    opacity: 0.42;
    transform: translateY(-50%) scale(0.88);
  }
  #page4:target ~ .preview-prev .ghost:nth-child(n + 7):nth-child(-n + 9) {
    display: block;
  }

  .arrow.right.to-page2 {
    display: block;
  }

  #page1:target ~ .arrow.right.to-page2 {
    display: block;
  }
  #page1:target ~ .arrow.left {
    display: none;
  }

  #page2:target ~ .arrow.right.to-page2 {
    display: none;
  }
  #page2:target ~ .arrow.right.to-page3 {
    display: block;
  }
  #page2:target ~ .arrow.left.to-page1 {
    display: block;
  }

  #page3:target ~ .arrow.right.to-page3 {
    display: none;
  }
  #page3:target ~ .arrow.right.to-page4 {
    display: block;
  }
  #page3:target ~ .arrow.left.to-page2 {
    display: block;
  }

  #page4:target ~ .arrow.right {
    display: none;
  }
  #page4:target ~ .arrow.left.to-page3 {
    display: block;
  }
}


/* ---- BOUNCEDOWN RESPONSIVE ---- */
/* 3 → 4 colonnes */
@media (min-width: 1501px) {
  .cathode {
    animation: bounceDown4 0.6s ease;
  }

  .cathode.is-cathode-unlocked.is-cathode-notify {
    animation: cathodeNotifyBounce 2.2s linear infinite !important;
  }
}

/* 4 → 3 colonnes */
@media (max-width: 1500px) {
  .cathode {
    animation: bounceDown1 0.6s ease;
  }

  .cathode.is-cathode-unlocked.is-cathode-notify {
    animation: cathodeNotifyBounce 2.2s linear infinite !important;
  }
}

/* 3 → 2 colonnes */
@media (max-width: 1130px) {
  .cathode {
    animation: none; /* reset */
  }
  .cathode {
    animation: bounceDown2 0.6s ease;
  }

  .cathode.is-cathode-unlocked.is-cathode-notify {
    animation: cathodeNotifyBounce 2.2s linear infinite !important;
  }
}

/* 2 → 1 colonne */
@media (max-width: 760px) {
  .cathode {
    animation: none; /* reset */
  }
  .cathode {
    animation: bounceDown3 0.6s ease;
  }

  .cathode.is-cathode-unlocked.is-cathode-notify {
    animation: cathodeNotifyBounce 2.2s linear infinite !important;
  }
}

.cathode.cathode-bouncedown-click {
  animation: bouncedownclick 0.6s ease !important;
}

.cathode.is-focus-source {
  opacity: 0 !important;
  transition: none !important;
}

.cathode.is-focus-reveal,
.cathode--frise-clone.is-focus-reveal {
  opacity: 1 !important;
  transition: opacity 480ms ease !important;
}

.cathode.is-focus-reveal .cathode__gribouillis-canvas,
.cathode--frise-clone.is-focus-reveal .cathode__gribouillis-canvas {
  opacity: 1;
  transition: opacity 480ms ease;
}

@keyframes bounceDown1 {
  0% {
    transform: translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateY(10px) scale(0.98);
  }
  70% {
    transform: translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bounceDown2 {
  0% {
    transform: translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateY(10px) scale(0.98);
  }
  70% {
    transform: translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bounceDown3 {
  0% {
    transform: translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateY(10px) scale(0.98);
  }
  70% {
    transform: translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bounceDown4 {
  0% {
    transform: translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateY(10px) scale(0.98);
  }
  70% {
    transform: translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bouncedownclick {
  0% {
    transform: translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateY(10px) scale(0.98);
  }
  70% {
    transform: translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* ---- Mii (déplacement) : au-dessus du menu & cathodes, sous la zone + pointer ---- */
/* Réf. 12_mii : uniquement un carré 138×135 autour de la tête est cliquable (pas tout le corps). */
.parent-tête {
  position: fixed;
  /* défaut : coin bas-droit (marges fenêtre alignées sur le reste de l’UI, ex. .power-btn) */
  bottom: 20px;
  right: 20px;
  overflow: visible;
  cursor: default;
  background: transparent;
  height: 135px;
  width: 138px;
  z-index: 10004;
  /* le carré enfant .mii-hit-zone capte les pointer ; le corps du Mii laisse passer vers le menu */
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

body.is-power-transitioning .parent-tête {
  display: none !important;
}

/* pas de position: ici → comme 12_mii, le .mii absolu se réfère à .parent-tête
   (sinon la vidéo et le SVG/img n’ont plus le même bloc de référence, décalage au drag) */
.parent-tête .scene {
  pointer-events: none;
}

.mii {
  position: absolute;
  right: 0;
  bottom: -153px;
  display: block;
  height: 300px;
  width: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  filter: contrast(1.07) saturate(1.1) brightness(1.03);
}

/* Zone carrée limitée = même taille que le cadre parent (tête), au-dessus du dessin pour capter le pointer */
.mii-hit-zone {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.mii-hit-zone:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.mii-video,
.mii-video-canvas {
  position: absolute;
  right: -56px;
  bottom: -165px;
  height: 332px;
  width: auto;
  max-width: none;
  pointer-events: none;
  background: transparent;
  border: 0;
  outline: none;
  z-index: 4;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* WebKit : la source vidéo reste active mais invisible (miroir canvas) */
.mii-video.is-mii-video-source-hidden {
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Repli legacy (.mov sans alpha natif) — matte noire → screen */
.mii-video.is-mii-video-alpha-fallback:not(.is-mii-video-source-hidden),
.mii-video-canvas.is-mii-video-alpha-fallback {
  mix-blend-mode: screen;
  filter: contrast(1.06) saturate(1.08);
}

.mii-bubble {
  position: absolute;
  height: auto;
  pointer-events: none; /* le hitbox gère le clic (évite de parasiter les zones dessous) */
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 20% 100%;
  z-index: 5;
}

/* Hitbox de clic (toujours à l'intérieur de la bulle) */
.mii-bubble-hit {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  pointer-events: auto;
  cursor: none;
  z-index: 6; /* au-dessus de l’image de bulle */
}

/* Par défaut (bulle thinking): zone confortable mais contenue */
.mii-bubble--thinking ~ .mii-bubble-hit {
  left: 0px;
  top: -120px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
}

/* Bulle texte: hitbox 2× plus petite, centrée, sans sortir de la bulle */
.mii-bubble--texte ~ .mii-bubble-hit {
  left: -330px;
  top: -180px;
  width: 375px;
  height: 155px;
  border-radius: 16px;
}

.mii-bubble-hit.is-hidden {
  display: none !important;
}

/* Variante 1: bulle "thinking" */
.mii-bubble--thinking {
  left: -20px;
  top: -150px;
  width: 140px;
  animation: bubblePop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stage bonus : bulle pensée arc-en-ciel */
/* Bulle pensée idle « besoin d'aide ? » — rouge (hors arc-en-ciel bonus) */
.parent-tête .mii-bubble--idle-help:not(.is-hidden):not(.mii-bubble--texte) {
  filter: hue-rotate(158deg) saturate(1.85) brightness(1.04);
  opacity: 1;
}

body.is-bonus-stage .parent-tête .mii-bubble--thinking:not(.is-hidden):not(.mii-bubble--texte):not(.is-bouncedown):not(.mii-bubble--idle-help) {
  animation:
    bubblePop 420ms cubic-bezier(0.22, 1, 0.36, 1) both,
    miiBubbleRainbowHue 3.6s linear infinite;
}

body.is-bonus-stage .parent-tête.is-dragging .mii-bubble--thinking:not(.mii-bubble--texte):not(.mii-bubble--idle-help) {
  animation:
    bubblePop 420ms cubic-bezier(0.22, 1, 0.36, 1) both,
    bubbleWiggle 420ms ease-in-out infinite,
    miiBubbleRainbowHue 3.6s linear infinite;
}

@keyframes miiBubbleRainbowHue {
  0% {
    filter: hue-rotate(0deg) saturate(1.45) brightness(1.05);
  }
  100% {
    filter: hue-rotate(360deg) saturate(1.45) brightness(1.05);
  }
}

/* Variante 2: bulle "texte" (séparée pour pouvoir la tuner indépendamment) */
.mii-bubble--texte {
  left: -420px;
  top: -280px;
  width: 540px;
}

/* Wiggle léger uniquement pendant le drag */
.parent-tête.is-dragging .mii-bubble {
  animation:
    bubblePop 420ms cubic-bezier(0.22, 1, 0.36, 1) both,
    bubbleWiggle 420ms ease-in-out infinite;
}

.mii-bubble.is-bouncedown {
  animation: bouncedown_bubble 0.6s ease both !important;
}

@keyframes bubblePop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bubbleWiggle {
  0% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-1px) rotate(1.5deg);
  }
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }
}

@keyframes bouncedown_bubble {
  0% {
    transform: translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateY(10px) scale(0.98);
  }
  70% {
    transform: translateY(-5px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .parent-tête.is-dragging .mii-bubble {
    animation: bubblePop 1ms linear both;
  }
}

.is-hidden {
  display: none !important;
}

/* ---- LA SOURIS  ---- */

.cathode-focus-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: none;
  isolation: isolate;
}

.cathode-focus-layer.is-visible {
  opacity: 1;
}

.cathode-focus-layer.is-open {
  pointer-events: auto;
}

/* Underlay: blanc + fond-effect en mode aperçu (derrière l'overlay) */
.cathode-focus-dark-underlay {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 0;
  pointer-events: none;
}

.cathode-focus-layer.is-open .cathode-focus-dark-underlay {
  opacity: 1;
}

.cathode-focus-gribouillis {
  --grib-x: 0px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1.9;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.cathode-focus-gribouillis.is-hidden {
  display: none;
}

.cathode-focus-gribouillis__img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: auto;
  max-width: none;
  transform: translate3d(var(--grib-x), 0, 0);
  will-change: transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.cathode-focus-dark-underlay .dark-mode-fond-effect--focus {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: fill;
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}

.cathode-focus-overlay {
  position: absolute;
  inset: 0;
  /* On garde la fermeture au clic, mais on laisse voir le fond FX derrière */
  background: rgba(255, 255, 255, 0.22);
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 1;
}

.cathode-focus-layer.is-open .cathode-focus-overlay {
  opacity: 1;
}

.cathode-focus-card {
  --strip-x: 0px;
  position: fixed;
  top: var(--focus-preview-margin, 20px);
  left: var(--focus-preview-margin, 20px);
  width: calc(100vw - (var(--focus-preview-margin, 20px) * 2));
  height: var(--focus-preview-h, 600px);
  background: #71c7cd;
  border-radius: 30px;
  box-shadow:
    inset 0 0 30px rgba(0, 153, 255, 0.2),
    0 0 20px rgba(100, 116, 116, 0.3);
  transform-origin: top left;
  transform: translate(0px, 0px) scale(1);
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  z-index: 2;
}

.cathode-focus-cathode-title {
  --cathode-focus-title-size: 18px;
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  z-index: 4;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font-family: "NewRodinProB", system-ui, sans-serif;
  font-size: var(--cathode-focus-title-size);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  font-kerning: none;
  font-feature-settings: "kern" 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .cathode-focus-cathode-title {
    --cathode-focus-title-size: 15px;
    top: 12px;
    padding: 0 10px;
    line-height: 1.25;
  }
}

.cathode-focus-cathode-title.is-hidden {
  display: none;
}

body.is-focus-bonus-drawing .cathode-focus-cathode-title {
  display: none;
}

.focus-strip {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: auto;
  touch-action: pan-y;
}

.cathode-focus-card.has-strip .focus-strip {
  display: block;
  touch-action: pan-x;
}

.focus-strip__inner {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  transform: translate3d(var(--strip-x), 0, 0);
  will-change: transform;
}

.focus-strip__img {
  height: 100%;
  width: auto;
  max-height: 100%;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Stage bonus : dessin plein écran, hauteur = fenêtre, pan horizontal (comme fond menu) */
.cathode-focus-card.is-bonus-drawing {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.cathode-focus-card.is-bonus-drawing .focus-strip {
  touch-action: pan-x;
}

.cathode-focus-card.is-bonus-drawing .focus-strip__inner {
  height: 100vh;
  min-height: 100%;
  align-items: stretch;
}

.cathode-focus-card.is-bonus-drawing .focus-strip__img--bonus {
  height: 100vh;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

/* Sortie aperçu : frise masquée → carte cyan se redéforme sur la cathode menu */
.cathode-focus-layer.is-closing .focus-strip,
.cathode-focus-layer.is-closing .cathode-focus-cathode-title,
.cathode-focus-layer.is-closing .cathode-focus-gribouillis,
.cathode-focus-layer.is-closing .dark-mode-fond-effect--focus {
  opacity: 0;
  transition: opacity 280ms ease;
}

.cathode-focus-layer.is-closing .cathode-focus-overlay {
  opacity: 0;
  transition: opacity 280ms ease;
}

.cathode-focus-layer.is-closing .cathode-focus-card {
  opacity: 0;
  transition:
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms ease 280ms;
}

.cathode-focus-layer.is-closing .cathode-focus-dark-underlay {
  opacity: 0;
  transition: opacity 480ms ease 280ms;
}

body.is-focus-bonus-drawing .cathode-focus-layer.is-closing .cathode-focus-card {
  background: #fff;
}

body.is-focus-bonus-drawing .cathode-focus-overlay {
  background: rgba(255, 255, 255, 0.08);
}

body.is-focus-open .stage-label {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-focus-bonus-drawing .cathode-focus-dark-underlay .dark-mode-fond-effect--focus {
  opacity: 0.12;
}

body.is-focus-bonus-drawing .cathode-focus-speech-block:not(.is-hidden) {
  position: fixed;
  left: 50% !important;
  right: auto !important;
  bottom: max(72px, calc(15px + env(safe-area-inset-bottom, 0px)));
  top: auto !important;
  transform: translateX(-50%);
  width: var(--focus-speech-w);
  padding: 24px 48px 18px;
  z-index: 10005;
  pointer-events: auto;
}

body.is-focus-bonus-drawing .cathode-focus-speech-block:not(.is-hidden)::before {
  top: calc(-1 * var(--focus-speech-white-y));
  right: calc(-1 * var(--focus-speech-white-x));
  bottom: calc(-1 * var(--focus-speech-white-y));
  left: calc(-1 * var(--focus-speech-white-x));
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 2%,
    #000 8%,
    #000 92%,
    rgba(0, 0, 0, 0.45) 98%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 2%,
    #000 8%,
    #000 92%,
    rgba(0, 0, 0, 0.45) 98%,
    transparent 100%
  );
}

/* (boutons retirés) */

.pointer {
  --offset-x: 0px;
  --offset-y: 0px;
  --trail-opacity: 0;
  --trail-scale: 1;
  --px: -9999px;
  --py: -9999px;
  --pointer-img: url("../images/svg-bouton/cursor-12.svg");
  position: fixed;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  translate: var(--px) var(--py);
  background: transparent;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: translate;
  contain: layout style size;
}

.pointer__body {
  --shake-x-20: -13px;
  --shake-y-20: 13px;
  --shake-x-40: 13px;
  --shake-y-40: -13px;
  --shake-x-60: -12px;
  --shake-y-60: -12px;
  --shake-x-80: 12px;
  --shake-y-80: 12px;
  --shake-r-20: 2.2deg;
  --shake-r-40: -2deg;
  --shake-r-60: 1.6deg;
  --shake-r-80: -2.4deg;
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 42% 38%;
  background-color: transparent;
  background-image: var(--pointer-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  transform: translateZ(0);
  animation: pointerShake 0.5s infinite;
  will-change: transform;
}

/* Traînée : zone bleu électrique floue, décalée inversement au mouvement */
.pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 148, 255, 1) 0%,
    rgba(0, 118, 255, 0.9) 26%,
    rgba(0, 92, 245, 0.58) 48%,
    rgba(0, 72, 220, 0.22) 68%,
    rgba(0, 48, 180, 0) 82%
  );
  opacity: var(--trail-opacity, 0);
  filter: blur(18px);
  transform: translate3d(
    calc(-50% + var(--offset-x)),
    calc(-50% + var(--offset-y)),
    0
  )
    scale(var(--trail-scale, 1));
  transition:
    transform 130ms ease-out,
    opacity 120ms ease-out;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
}

@keyframes pointerShake {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  20% {
    transform: translate3d(var(--shake-x-20), var(--shake-y-20), 0) rotate(var(--shake-r-20));
  }
  40% {
    transform: translate3d(var(--shake-x-40), var(--shake-y-40), 0) rotate(var(--shake-r-40));
  }
  60% {
    transform: translate3d(var(--shake-x-60), var(--shake-y-60), 0) rotate(var(--shake-r-60));
  }
  80% {
    transform: translate3d(var(--shake-x-80), var(--shake-y-80), 0) rotate(var(--shake-r-80));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}


.zone {
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
  background: rgba(68, 68, 68, 0);
  z-index: var(--pointer-z);
  pointer-events: none;
}

/* cacher le curseur système (le pointeur Wii remplace) */
html,
body,
body * {
  cursor: none !important;
}

body:not(.is-disc-storage):not(.is-off) .zone {
  pointer-events: none;
}

body:not(.is-disc-storage):not(.is-off) .pointer {
  opacity: 0;
}

/* Le pointeur Wii (.pointer) indique où l’on vise ; la zone .mii-hit-zone est le seul carré actif. */

/* ---- Bouton DISC (fixe, juste au-dessus du OFF) ---- */
.disc-btn {
  position: fixed;
  left: 0px;
  bottom: calc(20px + 55px + 12px);
  width: 55px;
  height: 55px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 10002;
  cursor: none;
  display: grid;
  place-items: center;
}

.disc-btn__img {
  width: 80px;
  height: 80px;
  display: block;
  object-fit: contain;
  object-position: center center;
  transform-origin: 50% 50%;
  animation: disc-spin 1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 1 tour/s : lent aux bords, plus vif au milieu (effet disque qui charge) */
@keyframes disc-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .disc-btn__img {
    animation: none;
  }
}

/* ---- Bouton OFF (fixe, bas-gauche) ---- */
.power-btn {
  position: fixed;
  left: 0;
  bottom: 20px;
  width: 55px;
  height: 55px;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  z-index: 10001;
  cursor: none;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.power-btn__img {
  width: 80px;
  height: 80px;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- Bouton EXIT (aperçu cathode, dessin bonus, crédits) ---- */
.exit-btn {
  position: fixed;
  left: 9px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  z-index: 10040;
  cursor: none;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.exit-btn__img {
  width: 58px;
  height: 58px;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.exit-btn.credit-focus-back {
  z-index: 10035;
}

.exit-btn.cathode-focus-exit {
  z-index: 5;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.exit-btn.cathode-focus-exit:not(.is-exit-ready) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.exit-btn.cathode-focus-exit.is-exit-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---- PAGE DISC STORAGE ---- */
body.is-disc-storage {
  --disc-storage-final-ratio: 0.7; /* 70 % de la largeur fenêtre à 1500px de large */
  background: #000;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.disc-storage-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 20px max(96px, calc(80px + env(safe-area-inset-bottom, 0px)));
  pointer-events: none;
  visibility: hidden;
}

body.is-disc-storage .pointer {
  opacity: 1;
}

body.is-disc-storage .disc-btn {
  bottom: 20px;
  z-index: 3;
}

body.is-disc-storage .disc-btn__img {
  animation: none;
}

body.is-disc-storage-pile-ready .disc-storage-main {
  visibility: visible;
}

.disc-storage-hint {
  position: fixed;
  left: 50%;
  bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0px)));
  transform: translateX(-50%);
  z-index: 10101;
  font-family: "NewRodinProB", system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  text-align: center;
  max-width: min(90vw, 520px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

body.is-disc-storage-pile-ready:not(.is-disc-insertion-open):not(.is-disc-phone-insertion-open)
  .disc-storage-hint--pile {
  opacity: 1;
  visibility: visible;
}

body.is-disc-storage-phone .disc-storage-hint--insertion-resize {
  display: none;
}

body.is-disc-storage.is-disc-insertion-open:not(.is-disc-cd-exited):not(.is-disc-cd-exit-anim)
  .disc-storage-hint--insertion-resize {
  opacity: 1;
  visibility: visible;
}

.disc-storage-hint--pile {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  grid-row: 2;
  z-index: 3;
  flex-shrink: 0;
  width: 100%;
  max-width: min(90vw, 520px);
  padding-top: 16px;
}

.disc-storage__pile-stack {
  grid-row: 1;
  align-self: center;
}

.disc-insertion-layer .disc-storage-hint--insertion-resize {
  z-index: 2;
}

/* Croissance linéaire : 92vw en petit → 70vw à 1500px (sans palier à 720px) */
.disc-storage__pile-stack {
  position: relative;
  display: block;
  width: min(
    calc(var(--disc-storage-final-ratio) * 100vw),
    max(92vw, calc(368px + (100vw - 400px) * 0.6407))
  );
  pointer-events: none;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.55));
}

.disc-storage__pile-stack > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.disc-storage__pile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  mix-blend-mode: normal;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 140ms ease,
    visibility 140ms ease;
}

.disc-storage__pile-overlay.is-disc-storage-hover {
  mix-blend-mode: overlay;
  opacity: 1;
  visibility: visible;
}

/* ---- Mode insertion Wii (après clic sur un DVD) ---- */
.disc-insertion-layer {
  --disc-insertion-h: 100vh;
  --disc-insertion-h: 100dvh;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.disc-insertion-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--menu-dark-gradient-opacity, 0.45);
  background: var(--menu-dark-gradient);
}

.disc-insertion-layer__stack {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--disc-insertion-h);
  pointer-events: none;
}

.disc-insertion-layer__img {
  position: absolute;
  top: 0;
  display: block;
  height: var(--disc-insertion-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.disc-insertion-layer__img--left {
  left: 0;
  object-position: left center;
}

.disc-insertion-layer__img--lumiere {
  opacity: 0;
  transition: opacity 0.55s ease;
}

body.is-disc-cd-exited .disc-insertion-layer__img--lumiere {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .disc-insertion-layer__img--lumiere {
    transition-duration: 0.01ms;
  }
}

.disc-insertion-layer__img--cd {
  --disc-cd-slide-x: 0px;
  right: 0;
  left: auto;
  object-position: right center;
  transform: translateX(var(--disc-cd-slide-x));
  will-change: transform;
  transition: none;
}

body.is-disc-cd-exit-anim .disc-insertion-layer__img--cd {
  transition: transform 0.65s cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.is-disc-cd-exit-anim .disc-insertion-layer__img--cd {
    transition-duration: 0.01ms;
  }
}

body.is-disc-insertion-open .disc-insertion-layer {
  opacity: 1;
  visibility: visible;
}

body.is-disc-insertion-open .disc-storage-main {
  visibility: hidden;
}

/* ---- PAGE OFF (écran noir + transition) ---- */
body.is-off {
  /* 1 écran = 100vh figé en px au chargement (JS) ; scroll total = 2 écrans (ex. 1800px) */
  --off-screen-h: 900px;
  --off-scroll-h: 1800px;
  background: black;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.is-off::-webkit-scrollbar {
  display: none;
}

html:has(body.is-off) {
  scrollbar-width: none;
}

html:has(body.is-off)::-webkit-scrollbar {
  display: none;
}

body.is-off:not(.is-credit-open) .zone {
  pointer-events: none;
}

body.is-off:not(.is-credit-open) .pointer {
  opacity: 1;
}

/* Flèche scroll bas — menu off (mobile + desktop) */
.off-scroll-hint {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 10024;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

body.is-off-scroll-hint-visible .off-scroll-hint {
  opacity: 1;
  visibility: visible;
}

body.is-off.is-credit-open .off-scroll-hint {
  opacity: 0 !important;
  visibility: hidden !important;
}

.off-scroll-hint__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(80px, 10vw, 128px);
  filter: hue-rotate(0deg) saturate(1.45) brightness(1.05);
  animation:
    stageNavArrowRainbow 2.4s linear infinite,
    stageNavHintPointDown 2.6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.off-scroll-hint__arrow {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .off-scroll-hint__inner {
    animation: none;
  }
}

/* Zone scroll : hauteur fixe 2× écran (px, pas vh — ne suit pas le resize live) */
.off-scroll {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: var(--off-scroll-h);
  min-height: var(--off-scroll-h);
  width: 100%;
  background: transparent;
  box-sizing: border-box;
  isolation: isolate;
}

/* Dégradé scroll : derrière le contenu, semi-transparent (laisse voir fond-effect fixe) */
.off-scroll::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: var(--off-scroll-h);
  z-index: 0;
  pointer-events: none;
  opacity: var(--menu-dark-gradient-opacity, 0.45);
  background: var(--menu-dark-gradient);
}

.off-scroll__pane--top {
  flex: 0 0 auto;
  height: var(--off-screen-h);
  min-height: var(--off-screen-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(48px, 12vh, 120px) 20px clamp(24px, 5vh, 48px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Gribouillis off — sous le 1er écran (scroll uniquement) */
.off-scroll__gribouillis {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.6vh, 8px);
  width: 100%;
  padding: clamp(20px, 4vh, 40px) 20px clamp(28px, 5vh, 52px);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  animation: offTitleFade 1.1s ease 0.2s forwards;
}

.off-scroll__gribouillis-img {
  position: relative;
  display: block;
  width: auto;
  max-width: min(420px, calc(100vw - 40px));
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  mix-blend-mode: darken;
  user-select: none;
  -webkit-user-drag: none;
}

.off-scroll__gribouillis-img--frere {
  margin-top: clamp(-28px, -5vh, -56px);
}

.off-title {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
  display: block;
  width: min(520px, calc(100vw - 40px));
  height: auto;
  margin: 0 0 clamp(40px, 10vh, 48px);
  pointer-events: none;
  opacity: 0;
  animation: offTitleFade 1s ease forwards;
  user-select: none;
  -webkit-user-drag: none;
}

.off-album-photo-stage {
  position: relative;
  flex: 1 1 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(520px, calc(100vw - 40px));
  min-height: 0;
  margin-bottom: clamp(12px, 2.5vh, 28px);
  pointer-events: none;
  opacity: 0;
  animation: offTitleFade 1s ease 0.08s forwards;
}

.off-album-photo {
  display: block;
  width: min(100%, 420px);
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes offTitleFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .off-title,
  .off-album-photo-stage,
  .off-scroll__gribouillis {
    animation: none;
    opacity: 1;
  }

  body.is-off .menu-dark-halos {
    animation: none;
    opacity: 1;
  }
}

.off-scroll__pane--bottom {
  flex: 0 0 auto;
  height: var(--off-screen-h);
  min-height: var(--off-screen-h);
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* Mii off : bulles + talk (pas de grab), ancrage tête comme menu principal */
.off-mii {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 184px;
  height: 180px;
  overflow: visible;
  pointer-events: none;
}

.off-mii__img {
  position: absolute;
  right: 0;
  bottom: -153px;
  display: block;
  height: 300px;
  width: auto;
  max-width: none;
  filter: contrast(1.07) saturate(1.1) brightness(1.03);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.off-mii .mii-video--talk,
.off-mii .mii-video-canvas.mii-video--talk {
  position: absolute;
  right: -56px;
  bottom: -165px;
  height: 332px;
  width: auto;
  max-width: none;
  pointer-events: none;
  background: transparent;
}

/* Bulle + texte alignés sur la tête du Mii (côté droit du sprite) */
.off-mii .mii-bubble--thinking {
  right: 2px;
  left: auto;
  top: -118px;
  width: 140px;
  transform-origin: 85% 100%;
}

.off-mii .mii-bubble--thinking ~ .mii-bubble-hit {
  right: -10px;
  left: auto;
  top: -138px;
  width: 110px;
  height: 130px;
  border-radius: 999px;
}

/* Texte aperçu cathode (s1-c1…) : sous la carte, modèle guide Mii */
.cathode-focus-speech-block {
  position: fixed;
  left: 50%;
  top: 0;
  width: var(--focus-speech-strip-w);
  transform: translateX(-50%);
  z-index: 10005;
  text-align: center;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
  padding: 24px 28px 22px;
}

.cathode-focus-speech-block::before {
  content: "";
  position: absolute;
  top: -20px;
  right: calc(-1 * var(--focus-speech-strip-white-x));
  bottom: -20px;
  left: calc(-1 * var(--focus-speech-strip-white-x));
  z-index: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 16px 48px rgba(0, 48, 72, 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.35) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.35) 90%,
    transparent 100%
  );
}

.cathode-focus-speech-block:not(.is-hidden)::before {
  opacity: 1;
}

.cathode-focus-speech-block .off-mii__speech-main,
.cathode-focus-speech-block .off-mii__speech-triangle {
  position: relative;
  z-index: 1;
}

.cathode-focus-speech-block .off-mii__speech,
.cathode-focus-speech-block .off-mii__speech-char {
  font-family: "NewRodinProB", system-ui, sans-serif;
  font-size: var(--focus-speech-type);
  line-height: var(--focus-speech-type-line);
  text-transform: none;
  letter-spacing: normal;
  color: #00e8ff;
  font-kerning: none;
  font-feature-settings: "kern" 0;
}

.cathode-focus-speech-block .off-mii__speech-triangle {
  display: block;
  width: 1.15em;
  height: 1.15em;
  margin: 0.35em auto 0;
}

.cathode-focus-speech-block.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}

.cathode-focus-speech-block .off-mii__speech-char.apostrophe-tight {
  margin-right: -0.72em;
}

.cathode-focus-speech-block .off-mii__speech-triangle.is-visible {
  pointer-events: auto;
  cursor: pointer;
}

@media (max-width: 760px) {
  :root {
    --focus-speech-strip-w: calc(100vw - 8px);
    --focus-speech-strip-white-x: min(28vw, 112px);
    --focus-speech-w: calc(100vw - 8px);
    --focus-speech-white-x: min(32vw, 128px);
  }

  .cathode-focus-speech-block {
    padding: 20px 10px 18px;
  }

  .cathode-focus-speech-block::before {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.28) 3%,
      #000 9%,
      #000 91%,
      rgba(0, 0, 0, 0.28) 97%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.28) 3%,
      #000 9%,
      #000 91%,
      rgba(0, 0, 0, 0.28) 97%,
      transparent 100%
    );
  }

  .menu-guide-layer__card::before {
    inset: -20px -80px;
  }
}

/* Stickers flottants (aperçu + stage bonus) */
.cathode-focus-stickers,
.menu-bonus-stickers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cathode-focus-stickers {
  z-index: 50;
}

.menu-bonus-stickers {
  z-index: 8;
  display: none;
}

@media (min-width: 1501px) {
  .menu-bonus-stickers.is-active {
    display: block;
  }
}

body.is-focus-open .menu-bonus-stickers {
  display: none !important;
}

.floating-sticker,
.cathode-focus-sticker {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(216px, 54vw, 420px);
  height: auto;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 20px rgba(0, 48, 72, 0.2));
}

/* Aperçu cathode desktop — sticker −10 % */
@media (min-width: 481px) {
  .cathode-focus-stickers .floating-sticker {
    width: clamp(194px, 48.6vw, 378px);
  }
}

/* Stage bonus : ~2× la taille d’origine */
.floating-sticker--bonus {
  width: clamp(144px, 36vw, 280px);
  filter: drop-shadow(0 8px 20px rgba(0, 48, 72, 0.2));
}

/* Photo bonus (clic triangle après texte bingo) */
.bingo-bonus-layer {
  position: fixed;
  inset: 0;
  z-index: 10012;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

.bingo-bonus-layer.is-open {
  display: flex;
  pointer-events: auto;
}

.bingo-bonus-overlay {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}

.bingo-bonus-photo {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1100px);
  max-height: min(82vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 48, 72, 0.22);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Aperçu photo bonus (bingo + triche) */
body.is-bingo-photo-open .stage-label {
  opacity: 0;
  visibility: hidden;
}

body.is-bingo-photo-open .zone {
  pointer-events: none;
}

body.is-bingo-photo-open .pointer {
  opacity: 1 !important;
}

body.is-cheat-bonus-active.is-bingo-photo-open .bingo-bonus-overlay {
  pointer-events: none;
  cursor: none;
}

body.is-cheat-bonus-active.is-bingo-photo-open .bingo-bonus-photo {
  pointer-events: auto;
  cursor: none;
}

/* Bingo : fond flou (Mii + texte) */
.menu-bingo-cluster {
  position: fixed;
  inset: 0;
  z-index: 10008;
  pointer-events: none;
}

.menu-bingo-cluster.is-hidden {
  display: none;
}

.menu-bingo-cluster__backdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0 16px 48px rgba(0, 48, 72, 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms ease;
}

.menu-bingo-cluster.is-visible .menu-bingo-cluster__backdrop {
  opacity: 1;
}

.menu-bingo-cluster__backdrop {
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 8%,
      #000 18%,
      #000 82%,
      rgba(0, 0, 0, 0.3) 92%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 10%,
      #000 20%,
      #000 80%,
      rgba(0, 0, 0, 0.3) 90%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 8%,
      #000 18%,
      #000 82%,
      rgba(0, 0, 0, 0.3) 92%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 10%,
      #000 20%,
      #000 80%,
      rgba(0, 0, 0, 0.3) 90%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Texte Mii — bingo (au-dessus du Mii centré, même style que guide) */
.menu-bingo-speech-block {
  position: fixed;
  left: 50%;
  width: min(280px, calc(100vw - 56px));
  transform: translate(-50%, -100%);
  z-index: 10013;
  text-align: center;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  box-sizing: border-box;
  padding: 0 4px;
}

.menu-bingo-speech-block .off-mii__speech,
.menu-bingo-speech-block .off-mii__speech-char {
  font-family: "NewRodinProB", system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: var(--type-body-line);
  text-transform: none;
  letter-spacing: normal;
  color: #00e8ff;
  font-kerning: none;
  font-feature-settings: "kern" 0;
}

.menu-bingo-speech-block .off-mii__speech-char.apostrophe-tight {
  margin-right: -0.72em;
}

.menu-bingo-speech-block .menu-guide-layer__inline-ui {
  display: inline-block;
  width: 55px;
  height: 55px;
  margin: 0 0.15em;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body.is-bingo-active .menu-bingo-speech-block.is-clickable,
body.is-story-intro-tuto-active .menu-bingo-speech-block.is-clickable {
  pointer-events: auto;
  cursor: none;
}

.menu-bingo-speech-block .menu-bingo__speech-triangle {
  display: block;
  width: 1.15em;
  height: 1.15em;
  margin: 0.45em auto 0;
  transform: rotate(180deg);
}

/* Skip — dialogue bingo triche (sous le Mii entier, pas seulement la tête) */
.menu-bingo-skip {
  position: absolute;
  left: 50%;
  /* 100% = boîte tête ; +153px = débordement .mii (bottom: -153px) */
  top: calc(100% + 153px + 18px);
  transform: translateX(-50%);
  z-index: 12;
  margin: 0;
  padding: 2px 8px;
  border: 0;
  background: transparent;
  font-family: "NewRodinProB", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--type-credit-nav);
  line-height: 1.2;
  letter-spacing: var(--type-title-spacing);
  text-transform: uppercase;
  color: #00e8ff;
  text-shadow: 0 6px 18px rgba(0, 48, 72, 0.35);
  cursor: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.menu-bingo-skip.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-bingo-skip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* Guide Mii (bulle idle) — calque fixe centre bas */
.menu-guide-layer {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px max(72px, calc(16px + env(safe-area-inset-bottom, 0px)));
  box-sizing: border-box;
  pointer-events: none;
}

.menu-guide-layer__card {
  position: relative;
  width: min(400px, calc(100vw - 40px));
  max-width: 100%;
  pointer-events: auto;
}

.menu-guide-layer__card::before {
  content: "";
  position: absolute;
  inset: -20px -40px;
  z-index: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 16px 48px rgba(0, 48, 72, 0.12);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.35) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.35) 90%,
    transparent 100%
  );
}

.menu-guide-layer__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 24px 28px 22px;
  box-sizing: border-box;
  text-align: center;
}

body.is-menu-guide-open .zone {
  pointer-events: none;
}

body.is-menu-guide-open .pointer {
  opacity: 1 !important;
}

.menu-guide-layer__speech {
  margin: 0;
  padding: 0;
  font-family: "NewRodinProB", system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: var(--type-body-line);
  text-transform: none;
  letter-spacing: normal;
  color: #00e8ff;
  font-kerning: none;
  font-feature-settings: "kern" 0;
}

.menu-guide-layer__char {
  display: inline;
  opacity: 0;
  animation: offMiiSpeechCharIn 1ms linear forwards;
}

.menu-guide-layer__char.is-revealed {
  opacity: 1;
  animation: none;
}

.menu-guide-layer__triangle-btn {
  display: block;
  margin: 0.45em auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}

.menu-guide-layer__triangle-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.menu-guide-layer__triangle-btn img {
  display: block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 auto;
}

.menu-guide-layer__step--choices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  width: 100%;
}

.menu-guide-layer__choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin: 0;
  padding: 0.15em 0;
  border: 0;
  background: transparent;
  font-family: "NewRodinProB", system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: var(--type-body-line);
  letter-spacing: normal;
  text-transform: none;
  color: #00e8ff;
  cursor: pointer;
  font-kerning: none;
  font-feature-settings: "kern" 0;
  -webkit-tap-highlight-color: transparent;
}

.menu-guide-layer__choice:hover,
.menu-guide-layer__choice:focus-visible {
  color: #7df9ff;
  outline: none;
}

.menu-guide-layer__choice img {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}

.menu-guide-layer__step--tuto,
.menu-guide-layer__step--bonus,
.menu-guide-layer__step--triche {
  width: 100%;
  box-sizing: border-box;
}

.menu-guide-layer__triangle-btn--bonus {
  display: block;
}

.menu-guide-layer__inline-ui {
  display: inline-block;
  width: 55px;
  height: 55px;
  margin: 0 0.15em;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.menu-guide-layer__triangle-btn--tuto {
  display: block;
}

.menu-guide-layer__oui-non {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
  margin-top: 0.65em;
  width: 100%;
}

.menu-guide-layer__oui-non-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "NewRodinProB", system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: var(--type-body-line);
  letter-spacing: normal;
  text-transform: none;
  color: #00e8ff;
  cursor: pointer;
  font-kerning: none;
  font-feature-settings: "kern" 0;
  -webkit-tap-highlight-color: transparent;
}

.menu-guide-layer__oui-non-btn:hover,
.menu-guide-layer__oui-non-btn:focus-visible {
  color: #7df9ff;
  outline: none;
}

/* Triche : tremblement horizontal ×5 puis déverrouillage */
.cathode.is-cheat-shaking,
.cathode--frise-clone.is-cheat-shaking {
  animation: cathodeCheatShake 0.95s ease-in-out 1 both !important;
  pointer-events: none;
}

body.is-cheat-unlock-active .container .cathode,
body.is-cheat-unlock-active .menu-frise .cathode--frise-clone {
  pointer-events: none;
}

@keyframes cathodeCheatShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-11px);
  }
  20% {
    transform: translateX(11px);
  }
  30% {
    transform: translateX(-11px);
  }
  40% {
    transform: translateX(11px);
  }
  50% {
    transform: translateX(-11px);
  }
  60% {
    transform: translateX(11px);
  }
  70% {
    transform: translateX(-11px);
  }
  80% {
    transform: translateX(11px);
  }
  90% {
    transform: translateX(-6px);
  }
}

/* 2ᵉ bulle thinking bingo : même place que la 1ʳᵉ (cf. .mii-bubble--thinking ~ .mii-bubble-hit) */
.mii-bubble--bingo-photo.mii-bubble--thinking ~ .mii-bubble-hit--bingo-photo {
  left: 0px;
  top: -120px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
}

.off-mii__speech-block {
  position: absolute;
  right: -153px;
  left: auto;
  bottom: 200px;
  width: min(460px, calc(100vw - 48px));
  z-index: 4;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.off-mii__speech-block.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}

.off-mii__speech-main {
  position: relative;
}

.off-mii__speech-choices {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.off-mii__speech-choices.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.off-mii__speech-choice {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: #00e8ff;
  cursor: pointer;
  text-align: center;
}

.off-mii__speech-choice:focus-visible {
  outline: none;
  color: #7df9ff;
}

.off-mii__choice-label {
  display: inline-block;
}

.off-mii__choice-pad {
  display: inline-block;
  padding: 4px;
  overflow: hidden;
  vertical-align: top;
}

/* OUI — code_animation_oui : lettres qui sautent (keyframes saut) */
.off-mii__choice-lettre {
  display: inline-block;
  will-change: transform;
}

.off-mii__speech-choice--oui:hover,
.off-mii__speech-choice--oui:focus-visible {
  color: #7df9ff;
}

.off-mii__speech-choice--oui:hover .off-mii__choice-lettre,
.off-mii__speech-choice--oui:focus-visible .off-mii__choice-lettre {
  animation: offChoiceSaut 0.45s ease var(--lettre-delay, 0s) infinite;
}

/* NON — code_animation_non : tremblement + disparition dans la fente */
.off-mii__speech-choice--non:hover,
.off-mii__speech-choice--non:focus-visible {
  color: #7df9ff;
}

.off-mii__speech-choice--non:hover .off-mii__choice-label,
.off-mii__speech-choice--non:focus-visible .off-mii__choice-label {
  animation: offChoiceDisparition 0.5s ease forwards;
}

.off-mii__speech-choice--non:hover .off-mii__choice-lettre,
.off-mii__speech-choice--non:focus-visible .off-mii__choice-lettre {
  animation: offChoiceTremble 0.1s linear infinite;
}

.off-mii__speech-choice--non .off-mii__choice-label.is-reappearing {
  animation: offChoiceReapparition 0.4s ease both;
}

.off-mii__speech-choice--non .off-mii__choice-label.is-reappearing .off-mii__choice-lettre {
  animation: none;
}

@keyframes offChoiceSaut {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(4px);
  }
  50% {
    transform: translateY(-20px);
  }
  75% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes offChoiceTremble {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0, -2px);
  }
  50% {
    transform: translate(0, 2px);
  }
}

@keyframes offChoiceDisparition {
  0% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
  100% {
    transform: translateY(110%);
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes offChoiceReapparition {
  0% {
    transform: translateY(110%);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@media (min-width: 520px) {
  .off-mii__speech-choices {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.1em;
  }
}

.off-mii__speech {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "NewRodinProB", system-ui, sans-serif;
  color: #fff;
  text-align: center;
  opacity: 0;
}

.off-mii__speech-triangle {
  display: block;
  width: 1em;
  height: 1em;
  margin: 0.35em auto 0;
  opacity: 0;
  transform: translateY(5px) scale(0.88);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  /* Texte off : #fff — le SVG triangle est déjà blanc */
}

/* Triangles : même teinte que le texte cyan (#00e8ff) des dialogues */
.menu-guide-layer__triangle-btn img,
.menu-guide-layer__choice img,
.cathode-focus-speech-block .off-mii__speech-triangle,
.menu-bingo-speech-block .menu-bingo__speech-triangle,
.menu-bingo-speech-block .off-mii__speech-triangle {
  filter: var(--speech-triangle-filter-cyan);
}

.menu-guide-layer__choice:hover img,
.menu-guide-layer__choice:focus-visible img {
  filter: var(--speech-triangle-filter-cyan-hover);
}

.off-mii__speech-triangle.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.off-mii__speech-triangle.is-bouncedown {
  animation: bouncedown_bubble 0.6s ease both;
  transition: none;
}

.off-mii__speech.is-visible {
  opacity: 1;
}

.off-mii__speech.is-letter-reveal {
  transition: none;
}

.off-mii__speech-word {
  display: inline;
  white-space: nowrap;
}

.off-mii__speech-char {
  display: inline;
  opacity: 0;
  animation: offMiiSpeechCharIn 1ms linear forwards;
}

.off-mii__speech-char.apostrophe-tight {
  margin-right: -0.72em;
}

.off-mii__speech-char.is-revealed {
  opacity: 1;
  animation: none;
  transform: none;
}

@keyframes offMiiSpeechCharIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.off-transition.off-transition--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.off-transition {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

.off-transition__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50vh;
  background: #000;
  will-change: transform;
}

.off-transition__panel--top {
  top: 0;
  transform: translateY(-100%);
  animation: offShutterTop 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.off-transition__panel--bottom {
  bottom: 0;
  transform: translateY(100%);
  animation: offShutterBottom 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes offShutterTop {
  to {
    transform: translateY(0);
  }
}

@keyframes offShutterBottom {
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .off-transition__panel--top,
  .off-transition__panel--bottom {
    animation: none;
    transform: translateY(0);
  }
}

/* ---- Transition d'entrée DISC STORAGE (jouée sur disc_storage.html) ---- */
.disc-transition {
  position: fixed;
  inset: 0;
  z-index: 10003;
  pointer-events: none;
  visibility: hidden;
}

body.is-disc-transitioning .disc-transition {
  visibility: visible;
  pointer-events: auto;
}

body.is-disc-transitioning .disc-btn {
  visibility: hidden;
}

body.is-disc-transitioning .pointer {
  opacity: 0;
  visibility: hidden;
}

.disc-transition__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.disc-transition__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--menu-dark-gradient-opacity, 0.45);
  background: var(--menu-dark-gradient);
}

body.is-disc-transitioning .disc-transition__veil {
  opacity: 1;
}

.disc-transition__disc {
  position: fixed;
  left: var(--disc-from-x, 40px);
  top: var(--disc-from-y, 50%);
  width: var(--disc-size-start, 80px);
  height: var(--disc-size-start, 80px);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body.is-disc-transitioning--centered .disc-transition__disc {
  left: 50%;
  top: 50%;
  width: var(--disc-size-max, 100vmin);
  height: var(--disc-size-max, 100vmin);
  transform: translate(-50%, -50%) rotate(0deg);
  transition:
    left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-disc-transitioning--exit .disc-transition__disc {
  left: calc(100vw + var(--disc-size-max, 100vmin) * 0.5);
  top: 50%;
  width: var(--disc-size-max, 100vmin);
  height: var(--disc-size-max, 100vmin);
  transform: translate(-50%, -50%) rotate(720deg);
  transition:
    left 0.6s cubic-bezier(0.45, 0, 0.55, 1),
    top 0.6s cubic-bezier(0.45, 0, 0.55, 1),
    transform 0.52s cubic-bezier(0.42, 0, 0.58, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.is-disc-transitioning .disc-transition__veil {
    transition: none;
    opacity: 1;
  }

  body.is-disc-transitioning--centered .disc-transition__disc,
  body.is-disc-transitioning--exit .disc-transition__disc {
    transition: none;
  }
}

/* ---- Transition vers OFF (depuis index) ---- */
.power-transition {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10002;
}

.power-transition__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50vh;
  background: #000;
  will-change: transform;
  transform: translateY(-110%);
}

.power-transition__panel--bottom {
  bottom: 0;
  top: auto;
  transform: translateY(110%);
}

body.is-power-transitioning .power-transition__panel--top {
  animation: powerShutterTop 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.is-power-transitioning .power-transition__panel--bottom {
  animation: powerShutterBottom 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes powerShutterTop {
  to {
    transform: translateY(0);
  }
}

@keyframes powerShutterBottom {
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-power-transitioning .power-transition__panel--top,
  body.is-power-transitioning .power-transition__panel--bottom {
    animation: none;
    transform: translateY(0);
  }
}