/* =========================================================
   CARTOGRAPHIE CSS V7 — CLASSEMENT SANS MODIFICATION VISUELLE
   - PREINTRO : bloc verrouillé, conservé tel quel.
   - TRANSITION : états intro/preintro/site + scanline/reveal.
   - INTRO : écran PRESS START retrogaming V116.
   - MENU/HERO : .hero-intro appartient au menu et aux pages internes, pas à l’intro PRESS START.
   Aucun style n’a été changé ici : uniquement des repères de lecture.
   ========================================================= */


/* Style global */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  color: #8ef5a2;
  font-family: "Courier New", Courier, monospace;
}

/* Classes utilitaires */
.hidden {
  display: none !important;
}

/* Intro écran */
.intro-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #202020 0%, #000 55%, #000 100%);
  color: #8ef5a2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  transition: opacity 1.2s ease;
}

.intro-screen.vanish {
  opacity: 0;
  pointer-events: none;
}

/* Écran de démarrage : logo + curseur */


/* Logo vert : halo Matrix + clignotement CRT */


@keyframes logoGlow {
  0% {
    opacity: 0.7;
    transform: scale(0.985);
    filter:
      drop-shadow(0 0 2px #4fdc7a)
      drop-shadow(0 0 6px #8ef5a2);
  }
  40% {
    opacity: 1;
    transform: scale(1.01);
    filter:
      drop-shadow(0 0 4px #8ef5a2)
      drop-shadow(0 0 14px #8ef5a2);
  }
  70% {
    opacity: 0.9;
    transform: scale(1.0);
    filter:
      drop-shadow(0 0 3px #8ef5a2)
      drop-shadow(0 0 10px #b4ffd0);
  }
  100% {
    opacity: 0.6;
    transform: scale(0.98);
    filter:
      drop-shadow(0 0 1px #4fdc7a)
      drop-shadow(0 0 4px #8ef5a2);
  }
}

/* Faux curseur : flèche verte style vieux PC */


/* Pseudo-éléments pour dessiner une vraie flèche */


/* Animation du curseur qui se dirige vers le logo (position relative au centre) */
@keyframes cursorMove {
  0% {
    transform: translate(-140px, -90px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    transform: translate(20px, 10px);
    opacity: 1;
  }
  80% {
    transform: translate(24px, 14px);
    opacity: 0.7;
  }
  100% {
    transform: translate(-140px, -90px);
    opacity: 0;
  }
}

/* Contenu de l'intro (masqué tant que pas démarré) */


@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Coupe du Graal */


/* Animation de déformation du Graal lorsqu'on clique */


@keyframes graal-distort {
  0% {
    transform: scale(1) rotate(0deg) skewX(0deg);
  }
  30% {
    transform: scale(1.3, 0.7) rotate(-8deg) skewX(15deg);
  }
  60% {
    transform: scale(0.8, 1.4) rotate(6deg) skewX(-10deg);
  }
  100% {
    transform: scale(1.1) rotate(0deg) skewX(0deg);
  }
}

/* Site principal */
.site-wrapper {
  min-height: 100vh;
  background: #000;
  color: #8ef5a2;
}

/* Barre de navigation */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #050505;
  border-bottom: 1px solid rgba(142, 245, 162, 0.2);
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo {
  font-weight: bold;
  text-decoration: none;
  color: #8ef5a2;

  font-size: 1.8rem;      /* ← GROS TEXTE (tu peux mettre 2rem si tu veux encore plus impactant) */
  letter-spacing: 0.05em; /* ← petit style informatique */
  text-transform: uppercase;

  margin-right: 2.5rem;   /* espace entre MENU et les autres liens */
  display: flex;
  align-items: center;
}


.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.85rem;
}

.nav-links a {
  text-decoration: none;
  color: #8ef5a2;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1rem;
  width: 0;
  height: 1px;
  background: #8ef5a2;
  transition: width 0.2s ease;
}

.nav-links a:hover::after {
  width: 100%;
}


.nav-item {
  position: relative;
}

.nav-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #8ef5a2;
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1rem;
  width: 0;
  height: 1px;
  background: #8ef5a2;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-dropdown {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 220px;
  background: #050505;
  border: 1px solid rgba(142, 245, 162, 0.3);
  box-shadow: 0 0 12px rgba(142, 245, 162, 0.25);
  padding: 0.5rem 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 600;
}

.nav-dropdown-item {
  display: block;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  text-decoration: none;
  color: #8ef5a2;
  white-space: nowrap;
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown.open .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Effet de disparition de page */
.site-wrapper.page-disappear {
  animation: crtMeltdown 0.12s infinite;
}
/* MENU PRINCIPAL — section bandeau visuel/contact */
.hero-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.75rem 1rem 2rem;
}

/* Cadre image/animation du menu principal : position gardée ici, dimensions consolidées plus bas. */
.video-container {
  position: relative;
}


/* MENU PRINCIPAL — conteneur du bandeau visuel/contact */
.code-anim {
  position: absolute;
  inset: 0;
  text-align: center;
}


.hero-intro {
  margin-top: 1.5rem;
  text-align: center;
}

.hero-intro h1 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 0.5rem;
}

.hero-intro p {
  margin: 0;
  font-size: 0.95rem;
}

/* Sections génériques */
.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.section h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Nos jeux */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
}


/* Détails de jeux */
.section-detail {
  border-top: 1px dashed rgba(142, 245, 162, 0.25);
}

.section-detail p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Footer */
.site-footer {
  border-top: 1px solid rgba(142, 245, 162, 0.25);
  padding: 1.5rem 1rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  background: #050605;
}

.site-footer p {
  margin: 0.2rem 0;
}

.footer-title {
  font-weight: bold;
  margin-bottom: 0.6rem;
}

/* Responsive */


/* Contact — formulaire */
.contact-section {
  max-width: 760px;
}

.contact-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.form-group {
  display: grid;
  gap: 0.35rem;
}

.form-group label {
  color: var(--retro-yellow);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.form-hidden-field {
  display: none;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  color: var(--retro-cyan);
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  border: 2px solid rgba(51,246,255,0.75);
  background:
    linear-gradient(135deg, rgba(22,119,255,0.18), rgba(255,56,248,0.05) 42%, rgba(0,0,0,0.82)),
    rgba(2, 8, 22, 0.92);
  box-shadow: 0 0 22px rgba(51,246,255,0.22), inset 0 0 24px rgba(51,246,255,0.08);
  outline: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--retro-yellow);
  box-shadow: 0 0 14px rgba(255,230,109,0.75), inset 0 0 24px rgba(51,246,255,0.08);
}

.contact-form button.btn-primary {
  justify-self: start;
  margin-top: 0.4rem;
  padding: 0.85rem 1.3rem;
  color: #12001d;
  background: linear-gradient(180deg, var(--retro-yellow), var(--retro-orange));
  border: 2px solid var(--retro-yellow);
  box-shadow: 0 0 14px rgba(255,230,109,0.65);
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.contact-form button.btn-primary:hover {
  box-shadow: 0 0 18px rgba(255,230,109,0.85);
  transform: scale(1.03);
}

/* Désactiver le curseur texte (caret) sur le contenu normal */
body,
main,
section,
p,
h1,
h2,
h3,
h4,
ul,
li {
  caret-color: transparent; /* cache le trait de saisie */
}

/* Garder le caret visible dans les champs du formulaire */
input,
textarea {
  caret-color: #8ef5a2; /* vert CRT */
}

/* =========================================================
   PATCH RETROGAMING RE-BORNE — habillage arcade sans doublons HTML
   ========================================================= */
:root {
  --retro-bg: #050014;
  --retro-panel: rgba(10, 4, 31, 0.92);
  --retro-cyan: #35f7ff;
  --retro-pink: #ff3df2;
  --retro-yellow: #ffe66d;
  --retro-green: #8ef5a2;
  --retro-orange: #ff9d2e;
}

html, body {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 61, 242, 0.22), transparent 28%),
    radial-gradient(circle at 80% 8%, rgba(53, 247, 255, 0.18), transparent 30%),
    linear-gradient(180deg, #060018 0%, #020008 48%, #000 100%);
  color: var(--retro-cyan);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.035) 0,
    rgba(255,255,255,0.035) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
  opacity: 0.3;
}

.site-wrapper {
  background:
    linear-gradient(90deg, rgba(53,247,255,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,61,242,0.05) 1px, transparent 1px),
    radial-gradient(circle at top, rgba(38, 13, 85, 0.75), #03000b 58%, #000 100%);
  background-size: 42px 42px, 42px 42px, auto;
  color: var(--retro-cyan);
}

.nav-logo,
.nav-links a,
.nav-link {
  color: var(--retro-cyan);
  text-shadow: 0 0 8px var(--retro-cyan);
}

.nav-links a,
.nav-link {
  border: 1px solid rgba(53,247,255,0.45);
  border-radius: 999px;
  padding: 0.38rem 0.65rem;
  background: rgba(0,0,0,0.35);
}

.nav-links a:hover,
.nav-link:hover {
  color: #fff;
  border-color: var(--retro-yellow);
  box-shadow: 0 0 12px rgba(255,230,109,0.5);
}

.nav-links a::after,
.nav-link::after {
  display: none;
}

.nav-dropdown {
  background: rgba(7, 0, 24, 0.98);
  border: 2px solid var(--retro-cyan);
  box-shadow: 0 0 18px rgba(53,247,255,0.35);
  border-radius: 12px;
}

.nav-dropdown-item {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--retro-cyan) !important;
}

.nav-dropdown-item:hover {
  background: rgba(255,61,242,0.18);
}

/* Hero et cartes façon sélection de niveaux */
.hero-intro h1,
.section h2 {
  color: var(--retro-yellow);
  text-shadow: 0 0 10px var(--retro-yellow), 0 0 18px rgba(255,61,242,0.65);
}

.hero-intro p,
.section-detail p,
.game-card p,
.menu-card p,
.site-footer p {
  color: #dffcff;
}

/* MENU PRINCIPAL — cartes/blocs cliquables */
.game-card,
.menu-card {
  display: block;
  position: relative;
  text-decoration: none;
  border: 2px solid rgba(53,247,255,0.62);
  border-radius: 16px;
  color: var(--retro-cyan);
  overflow: hidden;
}

.game-card {
  padding: 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.menu-card {
  margin: 1.5rem 0;
  padding: 1.5rem 1.75rem;
}

.game-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
}

.menu-card h2 {
  margin-bottom: 0.5rem;
}

.game-card p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

.section-games,
.section-detail {
  border-top: 2px dashed rgba(53,247,255,0.35);
}

.game-card::before,
.menu-card::before {
  content: "DOSSIER MISSION";
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--tron-pink);
  text-shadow: 0 0 8px var(--tron-pink);
}


.game-card:hover,
.menu-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--retro-yellow);
  box-shadow: 0 0 22px rgba(255,230,109,0.38), 0 0 34px rgba(255,61,242,0.26);
}

form input,
form textarea {
  background: rgba(0,0,0,0.72);
  color: var(--retro-cyan);
  border: 2px solid var(--retro-cyan);
  box-shadow: 0 0 9px rgba(53,247,255,0.48);
}

form input:focus,
form textarea:focus {
  border-color: var(--retro-yellow);
  box-shadow: 0 0 14px rgba(255,230,109,0.75);
}

form button.btn-primary {
  color: #12001d;
  background: linear-gradient(180deg, var(--retro-yellow), var(--retro-orange));
  border: 2px solid var(--retro-yellow);
  box-shadow: 0 0 14px rgba(255,230,109,0.65);
  font-weight: 900;
}

.site-footer {
  background: rgba(3,0,10,0.96);
  border-top: 2px solid var(--retro-pink);
  box-shadow: 0 -8px 24px rgba(255,61,242,0.12);
}


/* =========================================================
   PATCH TRON + INTRO PIXEL — 19/06/2026
   Objectif : intro vrai écran retro gaming, intérieur façon TRON.
   ========================================================= */
:root {
  --tron-bg: #02030f;
  --tron-panel: rgba(3, 12, 28, 0.92);
  --tron-cyan: #33f6ff;
  --tron-blue: #1677ff;
  --tron-pink: #ff38f8;
  --tron-yellow: #ffe66d;
  --tron-white: #ecfeff;
}

body {
  font-family: "Courier New", Courier, monospace;
}


/* Intérieur du site : ambiance TRON */
.site-wrapper {
  background:
    linear-gradient(90deg, rgba(51,246,255,0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(22,119,255,0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(22,119,255,0.36), transparent 34%),
    linear-gradient(180deg, #02030f 0%, #030716 55%, #000 100%);
  background-size: 54px 54px, 54px 54px, auto, auto;
  color: var(--tron-cyan);
}

.site-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, transparent 0 62%, rgba(51,246,255,0.11) 63%, transparent 64%);
  background-size: 100% 44px;
  opacity: 0.45;
}

.site-wrapper > * {
  position: relative;
  z-index: 1;
}

.top-nav {
  background: rgba(1, 8, 21, 0.94);
  border-bottom: 2px solid var(--tron-cyan);
  box-shadow: 0 0 20px rgba(51,246,255,0.36), inset 0 -1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}

.nav-logo {
  color: var(--tron-white);
  text-shadow: 0 0 9px var(--tron-cyan), 0 0 18px var(--tron-blue);
}

.nav-links a,
.nav-link {
  color: var(--tron-cyan);
  border: 1px solid rgba(51,246,255,0.65);
  background: linear-gradient(90deg, rgba(22,119,255,0.18), rgba(51,246,255,0.06));
  box-shadow: inset 0 0 12px rgba(51,246,255,0.08);
}

.nav-links a:hover,
.nav-link:hover {
  border-color: var(--tron-white);
  box-shadow: 0 0 14px rgba(51,246,255,0.75), inset 0 0 12px rgba(51,246,255,0.24);
}

.game-card,
.menu-card,
.nav-dropdown,
form input,
form textarea {
  border-color: rgba(51,246,255,0.75) !important;
  background:
    linear-gradient(135deg, rgba(22,119,255,0.18), rgba(255,56,248,0.05) 42%, rgba(0,0,0,0.82)),
    rgba(2, 8, 22, 0.92);
  box-shadow: 0 0 22px rgba(51,246,255,0.22), inset 0 0 24px rgba(51,246,255,0.08);
}

.hero-intro h1,
.section h2,
.game-card h3,
.menu-card h2 {
  color: var(--tron-white);
  text-shadow: 0 0 8px var(--tron-cyan), 0 0 20px var(--tron-blue);
}


.site-footer {
  background: rgba(1, 7, 18, 0.96);
  border-top: 2px solid var(--tron-cyan);
  box-shadow: 0 -8px 24px rgba(51,246,255,0.16);
}


/* =========================================================
   SECTION INTRO — PRESS START RETROGAMING V116
   Préintro et menu exclus de cette section.
   ========================================================= */

/* =========================================================
   INTRO RETROGAMING V116 — bloc consolidé propre
   Objectif : rendu identique à la capture de référence, sans empilement
   de patchs CSS pour la page intro.
   ========================================================= */
@font-face {
  font-family: "ModernDOS";
  src: url("fonts/ModernDOS8x16.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.retro-intro,
.pixel-title-screen {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: center;
  gap: 0 !important;
  padding: clamp(14px, 2vh, 22px) 14px clamp(14px, 2vh, 20px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(45, 88, 255, 0.24) 0 14%, transparent 38%),
    linear-gradient(180deg, #02020b 0%, #050019 42%, #02020b 100%) !important;
  color: #fff;
  font-family: "ModernDOS", "Courier New", monospace !important;
  image-rendering: pixelated;
  z-index: 9999;
}

.pixel-title-screen *:not(img) {
  font-family: "ModernDOS", "Courier New", monospace !important;
  font-weight: 400 !important;
  letter-spacing: .06em;
}

.pixel-title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(54,255,246,.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(54,255,246,.05) 2px, transparent 2px);
  background-size: 44px 44px;
  transform: perspective(360px) rotateX(63deg) translateY(20vh) scale(1.7);
  transform-origin: bottom center;
  opacity: .45;
  pointer-events: none;
}

.pixel-title-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
    radial-gradient(circle, transparent 55%, rgba(0,0,0,.58) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.retro-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.07) 0,
    rgba(255,255,255,.07) 1px,
    transparent 2px,
    transparent 6px
  );
  opacity: .25;
  pointer-events: none;
}

.pixel-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(#fff 0 2px, transparent 3px),
    radial-gradient(#39f7ff 0 2px, transparent 3px),
    radial-gradient(#ffdf4d 0 2px, transparent 3px);
  background-size: 130px 130px, 190px 190px, 250px 250px;
  background-position: 12px 20px, 80px 40px, 30px 95px;
  opacity: .28;
  animation: pixelStarDrift 12s steps(12, end) infinite;
}

.pixel-title-card,
.pixel-start-core,
.pixel-info-box,
.pixel-quest-scene {
  position: relative;
  z-index: 2;
  max-width: min(760px, calc(100vw - 150px)) !important;
}

.pixel-title-card {
  width: min(980px, 96vw);
  margin: clamp(10px, 2vh, 22px) auto 0 !important;
  text-align: center;
}

.pixel-main-title {
  margin: 0 auto;
  max-width: 900px !important;
  color: #fff;
  font-size: clamp(31px, 4.65vw, 60px) !important;
  line-height: 1.12 !important;
  text-transform: uppercase;
  letter-spacing: .052em !important;
  text-shadow:
    4px 4px 0 #00eaff,
    8px 8px 0 #ff2be7,
    12px 12px 0 #080014,
    0 0 16px rgba(53,247,255,.55) !important;
}
.pixel-main-title span { display: block !important; }

.pixel-subtitle,
.pixel-enter-text,
.pixel-info-box,
.pixel-press-start {
  text-transform: uppercase;
  font-weight: 900;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision;
}

.pixel-subtitle {
  width: fit-content;
  margin: clamp(12px, 1.8vh, 20px) auto 0 !important;
  padding: 7px 12px !important;
  background: #001a38;
  border: 4px solid #35f7ff;
  color: #35f7ff;
  box-shadow: 0 0 0 4px #030414, 0 0 22px #35f7ff;
  font-size: clamp(13px, 1.7vw, 20px) !important;
  line-height: 1;
  text-shadow: 3px 3px 0 #000;
}

.pixel-start-core {
  align-self: center;
  text-align: center;
  width: min(460px, 92vw) !important;
  margin: clamp(34px, 5.5vh, 62px) auto 0 !important;
}

.pixel-enter-text {
  margin: 0 0 10px !important;
  color: #ffe65a;
  font-size: clamp(12px, 1.65vw, 18px) !important;
  line-height: 1.1;
  text-shadow: 3px 3px 0 #000, 0 0 14px #ffe65a;
}

.pixel-hand-big {
  font-size: clamp(38px, 4.7vw, 56px) !important;
  line-height: 1 !important;
  margin: 0 auto 12px !important;
  color: #ffe65a;
  text-shadow: 4px 4px 0 #000, 0 0 16px #ffe65a;
  animation: pixelHandPoint .75s steps(2, end) infinite;
}

.pixel-press-start,
.pixel-press-start:hover,
.pixel-press-start:focus,
.pixel-press-start:focus-visible,
.pixel-press-start:active {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: min(300px, 72vw) !important;
  min-width: 0 !important;
  margin: 0 auto;
  padding: 10px 12px !important;
  border: 4px solid #ffe65a !important;
  border-radius: 0 !important;
  appearance: none;
  background: #090027 !important;
  color: #ffe65a !important;
  box-shadow:
    0 0 0 4px #000,
    0 0 0 7px #ff2be7,
    0 0 18px #ffe65a,
    inset 0 0 14px rgba(255,230,90,.28) !important;
  font-family: "ModernDOS", "Courier New", "Lucida Console", monospace !important;
  font-size: clamp(20px, 2.35vw, 30px) !important;
  line-height: 1 !important;
  text-shadow: 3px 3px 0 #000 !important;
  white-space: nowrap !important;
  cursor: pointer;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  animation: pixelStartBlink 1s steps(2, end) infinite;
}

.pixel-press-start:hover,
.pixel-press-start:focus-visible {
  box-shadow:
    0 0 0 4px #000,
    0 0 0 7px #ff2be7,
    0 0 26px #ffe65a,
    0 0 32px rgba(53,247,255,.35),
    inset 0 0 14px rgba(255,230,90,.28) !important;
}

.pixel-press-start .start-line { display: block; line-height: 1; }
.pixel-hearts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: .55em;
  line-height: 1;
  letter-spacing: 0 !important;
  color: #ff2f4f;
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255,47,79,.95);
}
.pixel-hearts span { display: inline-block; transform: scaleX(1.15); }
.pixel-press-start:hover .pixel-hearts,
.pixel-press-start:focus-visible .pixel-hearts { color: #ff2f4f !important; }

.pixel-quest-scene {
  width: min(560px, 86vw) !important;
  height: 64px !important;
  margin: clamp(16px, 2.4vh, 26px) auto 0 !important;
  pointer-events: none;
}
.pixel-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px !important;
  height: 5px !important;
  background: repeating-linear-gradient(90deg, #35f7ff 0 22px, transparent 22px 38px);
  box-shadow: 0 0 12px #35f7ff;
}
.pixel-knight-run {
  position: absolute;
  left: 8%;
  bottom: 11px !important;
  width: 38px;
  height: 48px;
  transform: scale(.75);
  transform-origin: bottom left;
  animation: knightChase 4.2s steps(16, end) infinite;
}
.pixel-knight-run span,
.pixel-graal-cup span {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}
.knight-head { left: 12px; top: 0; width: 16px; height: 14px; background: #d8d8d8; box-shadow: 12px 4px 0 #35f7ff, 4px 14px 0 #ffdf4d; }
.knight-body { left: 9px; top: 18px; width: 21px; height: 21px; background: #2d7dff; box-shadow: 4px 4px 0 #12409e, 0 0 10px #35f7ff; }
.knight-arm { right: 0; top: 22px; width: 13px; height: 7px; background: #d8d8d8; box-shadow: 10px -5px 0 #d8d8d8; }
.knight-leg { top: 40px; width: 8px; height: 14px; background: #d8d8d8; }
.knight-leg-a { left: 10px; animation: knightLegA .45s steps(2,end) infinite; }
.knight-leg-b { left: 24px; animation: knightLegB .45s steps(2,end) infinite; }
.pixel-graal-cup {
  position: absolute;
  right: 13%;
  bottom: 17px !important;
  width: 42px;
  height: 42px;
  transform: scale(.74);
  transform-origin: bottom right;
  animation: graalRun 4.2s steps(16, end) infinite;
  filter: drop-shadow(0 0 10px #ffe65a);
}
.cup-top { left: 4px; top: 0; width: 34px; height: 8px; background: #ffe65a; }
.cup-body { left: 10px; top: 8px; width: 22px; height: 18px; background: #ffb52b; box-shadow: -8px 4px 0 #ffe65a, 8px 4px 0 #ffe65a; }
.cup-stem { left: 18px; top: 26px; width: 8px; height: 9px; background: #ffe65a; }
.cup-base { left: 8px; top: 35px; width: 28px; height: 7px; background: #ffe65a; }

.pixel-info-box {
  width: min(980px, 92vw) !important;
  margin: clamp(22px, 3.2vh, 40px) auto 0 !important;
  padding: 14px 18px !important;
  border: 4px solid #35f7ff;
  background: rgba(0,6,24,.86);
  box-shadow: 0 0 0 4px #000, 0 0 22px rgba(53,247,255,.55);
  text-align: center;
  color: #fff;
  font-size: clamp(13px, 1.45vw, 18px) !important;
  line-height: 1.32 !important;
  text-shadow: 3px 3px 0 #000;
}
.pixel-info-box p { margin: 4px 0 !important; }
.pixel-info-box strong { color: #ffe65a; }

.intro-side-label {
  position: absolute !important;
  top: 51% !important;
  transform: translateY(-50%) !important;
  z-index: 8 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  font-family: "ModernDOS", "Courier New", monospace !important;
  font-weight: 900 !important;
  font-size: clamp(17px, 2.6vw, 34px) !important;
  line-height: .88 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #ffe866 !important;
  text-shadow: 3px 3px 0 #09020a, 0 0 8px rgba(255,232,102,.9), 0 0 16px rgba(255,60,235,.58) !important;
  pointer-events: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
.intro-side-left { left: clamp(10px, 2.1vw, 34px) !important; }
.intro-side-right { right: clamp(10px, 2.1vw, 34px) !important; }
.intro-side-label span {
  display: block !important;
  min-height: .88em !important;
  text-align: center !important;
}
.intro-side-label .intro-side-gap { min-height: .46em !important; }

@keyframes pixelStartBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .56; } }
@keyframes pixelHandPoint { 0% { transform: translateY(-4px); } 100% { transform: translateY(8px); } }
@keyframes pixelStarDrift { to { background-position: 12px 150px, 80px 230px, 30px 345px; } }
@keyframes knightChase { 0% { transform: translateX(-40px); } 100% { transform: translateX(360px); } }
@keyframes graalRun { 0% { transform: translateX(0) translateY(0); } 50% { transform: translateX(60px) translateY(-8px); } 100% { transform: translateX(0) translateY(0); } }
@keyframes knightLegA { 0% { transform: translateX(0); } 100% { transform: translateX(9px); } }
@keyframes knightLegB { 0% { transform: translateX(9px); } 100% { transform: translateX(0); } }

@media (max-height: 820px) {
  .pixel-main-title { font-size: clamp(29px, 4.35vw, 54px) !important; line-height: 1.08 !important; }
  .pixel-start-core { margin-top: clamp(24px, 4vh, 42px) !important; }
  .pixel-enter-text { margin-bottom: 8px !important; }
  .pixel-hand-big { margin-bottom: 10px !important; }
  .pixel-quest-scene { margin-top: clamp(12px, 2vh, 20px) !important; }
  .pixel-info-box { margin-top: clamp(14px, 2.4vh, 28px) !important; }
}


@media (max-height: 780px) {
  .intro-side-label { font-size: clamp(13px, 2.1vw, 26px) !important; }
  .intro-side-label .intro-side-gap { min-height: .28em !important; }
}

/* CLEAN V11 — anciens essais menu hero SVG/vector supprimés : rendu actuel = cordes-pixel-stage / cordes-tron-final.png. */

/* =========================================================
   PATCH V12 TEST — image validée révélée en pixels haut -> bas
   - pas de SVG
   - pas de village redessiné
   - image finale exactement reprise : images/cordes-tron-final.png
   - animation de révélation verticale environ 15 s
   ========================================================= */
.video-container {
  width: min(1120px, calc(100vw - 2rem)) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 1rem auto 1.4rem auto !important;
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.code-anim,
.code-anim-inner {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* MENU PRINCIPAL — hauteurs actuelles du conteneur visuel consolidées ici. */


.cordes-pixel-final {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  clip-path: inset(0 0 100% 0);
  animation:
    cordesPixelReveal 15s steps(140, end) forwards,
    cordesPixelGlow 3.2s ease-in-out 15s infinite !important;
  filter: saturate(1.08) contrast(1.05) brightness(1.02) !important;
}

.cordes-pixel-scan {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -8% !important;
  height: 9% !important;
  pointer-events: none !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(52, 250, 255, 0.08) 15%,
    rgba(235, 255, 255, 0.66) 48%,
    rgba(52, 250, 255, 0.18) 74%,
    transparent 100%
  ) !important;
  filter: blur(.5px) drop-shadow(0 0 14px rgba(47, 248, 255, .95)) !important;
  mix-blend-mode: screen !important;
  opacity: 0;
  animation: cordesScanDown 15s linear forwards !important;
}

.cordes-pixel-noise {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.065) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(to right, rgba(35,245,255,.035) 0 1px, transparent 1px 7px) !important;
  mix-blend-mode: screen !important;
  opacity: .28 !important;
}

@keyframes cordesPixelReveal {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes cordesScanDown {
  0% { opacity: 0; transform: translateY(0); }
  4% { opacity: 1; }
  96% { opacity: 1; }
  100% { opacity: 0; transform: translateY(1180%); }
}

@keyframes cordesPixelGlow {
  0%, 100% { filter: saturate(1.08) contrast(1.05) brightness(1.02) drop-shadow(0 0 0 rgba(47,248,255,0)); }
  50% { filter: saturate(1.18) contrast(1.12) brightness(1.08) drop-shadow(0 0 10px rgba(47,248,255,.25)); }
}


/* =========================================================
   PATCH V13 — ajustements validés
   - Bandeau Cordes TRON réduit pour voir le texte dessous.
   - Menus déroulants toujours au-dessus du bandeau.
   - Textes verticaux sur intro : ESCAPE GAME / À CORDES SUR CIEL.
   - Transition de page en pixels.
   - Audio géré par script.js.
   ========================================================= */

/* Menu au-dessus de tout */
.top-nav,
.nav-inner,
.nav-links,
.nav-item,
.has-dropdown {
  position: relative !important;
  z-index: 5000 !important;
}
.hero-section,
.video-container,
.code-anim,
.cordes-pixel-stage {
  z-index: 1 !important;
}

/* Bandeau plus petit : on garde l'image validée mais on réduit tout le bloc */
.hero-section {
  max-width: 1040px !important;
  padding-top: .45rem !important;
  padding-bottom: .25rem !important;
}
.video-container {
  width: min(840px, calc(100vw - 2rem)) !important;
  aspect-ratio: 16 / 9 !important;
  margin: .55rem auto .65rem auto !important;
}
.hero-intro {
  padding-top: .15rem !important;
}
.hero-intro h1 {
  margin-top: .25rem !important;
}
/* =========================================================
   SECTION TRANSITION / ÉTATS GLOBAUX
   Contient forcément des mentions preintro-mode / intro-mode / site-mode.
   Ce ne sont pas des styles visuels de l’intro : ce sont des interrupteurs d’affichage.
   ========================================================= */

/* ==========================================================
   CLEAN PATCH V27 — navigation simple + transition TRON unique
   ========================================================== */

body.intro-mode #site-wrapper.hidden,
body.site-mode #intro-screen.hidden,
body.preintro-mode #intro-screen.hidden,
body.preintro-mode #site-wrapper.hidden { display: none !important; }

body.site-mode #site-wrapper { display: block !important; opacity: 1 !important; transform: none !important; }
body.intro-mode #intro-screen:not(.hidden) { display: flex !important; opacity: 1 !important; transform: none !important; }

.site-wrapper.page-disappear { opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto !important; }

/* Menus toujours au-dessus des bandeaux */
.top-nav, .nav-dropdown { z-index: 50000 !important; }

/* Bandeau Cordes plus compact et lisible */
/* MENU PRINCIPAL — cadre central Cordes/TRON consolidé */
.cordes-pixel-stage {
  position: relative !important;
  width: min(880px, 92vw) !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 2px solid rgba(77, 245, 255, .9) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 18px rgba(58, 237, 255, .65), inset 0 0 28px rgba(20, 168, 255, .22) !important;
  background: #020712 !important;
}
.cordes-pixel-final {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  animation: cordesRevealClean 15s linear both !important;
}
.cordes-pixel-scan {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 14% !important;
  background: linear-gradient(to bottom, transparent, rgba(70,255,255,.50), transparent) !important;
  mix-blend-mode: screen !important;
  animation: cordesScanClean 15s linear both !important;
}
.cordes-pixel-noise {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .12 !important;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px) !important;
}
@keyframes cordesRevealClean { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cordesScanClean { from { transform: translateY(-110%); } to { transform: translateY(720%); } }

/* Transition unique : vol rapide dans une grille TRON, sans point central, sans texte */
.tron-transition-overlay {
  --tron-duration: 1500ms;
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  background: radial-gradient(circle at center, #06162b 0%, #01030a 58%, #000 100%);
  overflow: hidden;
  pointer-events: all;
}
.tron-transition-overlay.active { display: block; }
.tron-flight { position: absolute; inset: 0; perspective: 520px; overflow: hidden; }
.tron-grid {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 55%;
  background-image:
    linear-gradient(rgba(0, 245, 255, .82) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 245, 255, .62) 2px, transparent 2px);
  background-size: 90px 90px;
  filter: drop-shadow(0 0 7px rgba(0, 235, 255, .85));
  opacity: .95;
}
.tron-grid-bottom {
  bottom: -8%;
  transform-origin: center top;
  transform: rotateX(68deg);
  animation: tronDriveGrid var(--tron-duration) linear forwards;
}
.tron-grid-top {
  top: -8%;
  transform-origin: center bottom;
  transform: rotateX(-68deg);
  animation: tronDriveGridTop var(--tron-duration) linear forwards;
  opacity: .65;
}
.tron-speed-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 45%, rgba(0,255,255,.16) 48%, transparent 51% 100%),
    repeating-linear-gradient(90deg, transparent 0 13%, rgba(0,255,255,.18) 13.3%, transparent 14% 26%);
  opacity: 0;
  animation: tronSpeedPulse var(--tron-duration) ease-in-out forwards;
}
.tron-transition-overlay.active::before,
.tron-transition-overlay.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #000;
  z-index: 2;
  animation: tronShutter calc(var(--tron-duration) * .18) ease-in forwards;
}
.tron-transition-overlay.active::before { top: 0; transform-origin: top; }
.tron-transition-overlay.active::after { bottom: 0; transform-origin: bottom; }
@keyframes tronShutter { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes tronDriveGrid { from { background-position: 0 0, 0 0; } to { background-position: 0 1400px, 0 1400px; } }
@keyframes tronDriveGridTop { from { background-position: 0 0, 0 0; } to { background-position: 0 -1400px, 0 -1400px; } }
@keyframes tronSpeedPulse { 0% { opacity: 0; transform: scaleX(.8); } 18% { opacity: .35; } 82% { opacity: .25; } 100% { opacity: 0; transform: scaleX(1.2); } }


.nav-start-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 10px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(51, 246, 255, .75) !important;
  color: var(--tron-cyan, #33f6ff) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: .8rem !important;
  box-shadow: 0 0 10px rgba(51,246,255,.35) !important;
}
.nav-start-link:hover { background: rgba(51,246,255,.12) !important; }

/* ==========================================================
   V36 — TRANSITION CAVALIER TRON PROPRE
   Base v27 nettoyée. Un seul overlay, cavalier visible, grille par-dessus discrète.
   ========================================================== */
.tron-transition-overlay {
  z-index: 2147483647 !important;
  background: #000 !important;
}
.tron-transition-overlay.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.tron-flight {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  perspective: 900px !important;
}
.tron-cavalier-hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  opacity: 1 !important;
  z-index: 1 !important;
  display: block !important;
  transform: scale(1.02) !important;
  filter: brightness(.95) contrast(1.1) saturate(1.08) !important;
}
.tron-transition-overlay.active .tron-cavalier-hero {
  animation: cavalierTronForwardV36 var(--tron-duration, 3300ms) cubic-bezier(.12,.78,.18,1) forwards !important;
}
.tron-transition-overlay .tron-grid {
  display: block !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: .42 !important;
  mix-blend-mode: screen !important;
}
.tron-transition-overlay .tron-grid-bottom {
  bottom: -12% !important;
  animation: tronDriveGrid var(--tron-duration, 3300ms) linear forwards !important;
}
.tron-transition-overlay .tron-grid-top {
  top: -14% !important;
  opacity: .22 !important;
  animation: tronDriveGridTop var(--tron-duration, 3300ms) linear forwards !important;
}
.tron-transition-overlay .tron-speed-lines {
  z-index: 3 !important;
  opacity: .0 !important;
  mix-blend-mode: screen !important;
  animation: tronSpeedPulse var(--tron-duration, 3300ms) ease-in-out forwards !important;
}
.tron-transition-overlay.active::before,
.tron-transition-overlay.active::after {
  z-index: 5 !important;
}
@keyframes cavalierTronForwardV36 {
  0% { opacity: 0; transform: scale(1.02); filter: brightness(.55) contrast(1.05) saturate(1.05) blur(1.2px); }
  8% { opacity: 1; }
  76% { opacity: 1; transform: scale(1.09); filter: brightness(1.08) contrast(1.12) saturate(1.10) blur(0); }
  94% { opacity: 1; transform: scale(1.16); filter: brightness(1.3) contrast(1.18) saturate(1.12) blur(.25px); }
  100% { opacity: 0; transform: scale(1.24); filter: brightness(1.65) contrast(1.2) saturate(1.12) blur(1.2px); }
}

/* ==========================================================
   V37 — TRANSITION CAVALIER IMAGE SEULE, SANS GRILLE SUPERPOSÉE
   - Utilise l'image validée comme fond principal.
   - Supprime la grille CSS ajoutée par-dessus.
   - Donne vie à l'image avec zoom, halos et traits de vitesse.
   ========================================================== */
.tron-transition-overlay {
  z-index: 2147483647 !important;
  background: #000 !important;
}
.tron-transition-overlay.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.tron-flight {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  perspective: none !important;
}
.tron-cavalier-hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  opacity: 1 !important;
  z-index: 1 !important;
  display: block !important;
  transform: scale(1.02) !important;
  transform-origin: center center !important;
  filter: brightness(.88) contrast(1.14) saturate(1.18) !important;
}
.tron-transition-overlay.active .tron-cavalier-hero {
  animation: cavalierImageForwardV37 var(--tron-duration, 5000ms) cubic-bezier(.10,.74,.12,1) forwards !important;
}

/* On enlève définitivement la grille CSS superposée : l'image contient déjà sa grille. */
.tron-transition-overlay .tron-grid,
.tron-transition-overlay .tron-grid-top,
.tron-transition-overlay .tron-grid-bottom {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Halos placés sur les zones lumineuses de l'image : casque/torse/cheval/sol/ville. */
.tron-flight::before {
  content: "" !important;
  position: absolute !important;
  inset: -8% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(80,255,255,.45) 0 3%, transparent 11%),
    radial-gradient(circle at 50% 52%, rgba(0,230,255,.38) 0 8%, transparent 21%),
    radial-gradient(circle at 50% 74%, rgba(0,245,255,.58) 0 8%, transparent 28%),
    radial-gradient(circle at 22% 43%, rgba(0,210,255,.20) 0 7%, transparent 22%),
    radial-gradient(circle at 78% 43%, rgba(0,210,255,.20) 0 7%, transparent 22%);
  animation: cavalierHalosV37 var(--tron-duration, 5000ms) ease-in-out forwards !important;
}

/* Traits de vitesse : pas une grille, seulement l'impression d'accélération. */
.tron-speed-lines {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at 50% 56%, transparent 0 9%, rgba(0,245,255,.18) 10%, transparent 13%),
    repeating-conic-gradient(from 0deg at 50% 52%, transparent 0deg 7deg, rgba(0,220,255,.22) 8deg 8.7deg, transparent 9.5deg 18deg);
  transform: scale(1.0);
  animation: cavalierSpeedV37 var(--tron-duration, 5000ms) ease-in-out forwards !important;
}

/* Flash final avant arrivée page. */
.tron-flight::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at center, rgba(120,255,255,.86), rgba(0,180,255,.20) 36%, transparent 70%) !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  animation: cavalierFinalFlashV37 var(--tron-duration, 5000ms) ease-in-out forwards !important;
}

/* Désactive les volets CRT hérités pour que l'image soit visible tout le long. */
.tron-transition-overlay.active::before,
.tron-transition-overlay.active::after {
  display: none !important;
  content: none !important;
}

@keyframes cavalierImageForwardV37 {
  0%   { opacity: 0; transform: scale(1.00); filter: brightness(.52) contrast(1.08) saturate(1.05) blur(1.1px); }
  8%   { opacity: 1; }
  35%  { transform: scale(1.08) translateY(.4%); filter: brightness(.95) contrast(1.13) saturate(1.18) blur(0); }
  72%  { transform: scale(1.22) translateY(1.2%); filter: brightness(1.17) contrast(1.18) saturate(1.25) blur(.15px); }
  92%  { opacity: 1; transform: scale(1.38) translateY(2.3%); filter: brightness(1.42) contrast(1.22) saturate(1.32) blur(.5px); }
  100% { opacity: 0; transform: scale(1.52) translateY(3.2%); filter: brightness(1.9) contrast(1.25) saturate(1.34) blur(1.7px); }
}
@keyframes cavalierHalosV37 {
  0%   { opacity: 0; transform: scale(.95); }
  14%  { opacity: .34; }
  36%  { opacity: .62; transform: scale(1.02); }
  58%  { opacity: .38; transform: scale(1.08); }
  78%  { opacity: .78; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.28); }
}
@keyframes cavalierSpeedV37 {
  0%   { opacity: 0; transform: scale(.92) rotate(0deg); filter: blur(0); }
  18%  { opacity: .18; }
  45%  { opacity: .36; transform: scale(1.10) rotate(.15deg); filter: blur(.2px); }
  78%  { opacity: .52; transform: scale(1.35) rotate(-.15deg); filter: blur(.55px); }
  100% { opacity: 0; transform: scale(1.75); filter: blur(1.2px); }
}
@keyframes cavalierFinalFlashV37 {
  0%, 82% { opacity: 0; }
  92% { opacity: .50; }
  100% { opacity: 0; }
}

/* ==========================================================
   V38 — TRANSITION VIDÉO TRON VALIDÉE
   Remplace les essais grille/image par la vidéo fournie.
   La vidéo contient son propre son : aucun MP3 de transition séparé.
   ========================================================== */
.tron-transition-overlay {
  z-index: 2147483647 !important;
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  background: #000 !important;
  overflow: hidden !important;
  pointer-events: all !important;
}
.tron-transition-overlay.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.tron-video-flight,
.tron-flight {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
.tron-transition-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  display: block !important;
  opacity: 1 !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  animation: tronVideoArriveV38 var(--tron-duration, 5000ms) cubic-bezier(.12,.72,.13,1) forwards !important;
}
.tron-video-vignette {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center, transparent 0 44%, rgba(0,0,0,.18) 63%, rgba(0,0,0,.64) 100%),
    linear-gradient(to bottom, rgba(0,255,255,.10), transparent 24%, transparent 76%, rgba(0,255,255,.11)) !important;
  mix-blend-mode: screen !important;
  opacity: .68 !important;
}
.tron-video-flash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at center, rgba(160,255,255,.95), rgba(0,210,255,.38) 28%, transparent 67%) !important;
  mix-blend-mode: screen !important;
  opacity: 0 !important;
  animation: tronVideoFlashV38 var(--tron-duration, 5000ms) ease-in-out forwards !important;
}
/* Supprime définitivement les anciens calques parasites pendant la transition vidéo. */
.tron-transition-overlay .tron-grid,
.tron-transition-overlay .tron-grid-top,
.tron-transition-overlay .tron-grid-bottom,
.tron-transition-overlay .tron-speed-lines,
.tron-transition-overlay .tron-cavalier-hero,
.tron-transition-overlay.active::before,
.tron-transition-overlay.active::after,
.tron-flight::before,
.tron-flight::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
@keyframes tronVideoArriveV38 {
  0%   { opacity: 0; transform: scale(1); filter: brightness(.65) contrast(1.08) saturate(1.05) blur(.8px); }
  8%   { opacity: 1; transform: scale(1); }
  58%  { opacity: 1; transform: scale(1); filter: brightness(1.06) contrast(1.12) saturate(1.12) blur(0); }
  88%  { opacity: 1; transform: scale(1); filter: brightness(1.22) contrast(1.16) saturate(1.16) blur(.15px); }
  100% { opacity: 0; transform: scale(1); filter: brightness(1.65) contrast(1.20) saturate(1.20) blur(.9px); }
}
@keyframes tronVideoFlashV38 {
  0%, 78% { opacity: 0; }
  91% { opacity: .58; }
  100% { opacity: 0; }
}

/* ==========================================================
   V45 — transition propre depuis V41
   PRESS START : bruitage seul, puis ouverture CRT, vidéo MP4 avec son intégré, fermeture CRT.
   ========================================================== */
.tron-transition-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: none !important;
  overflow: hidden !important;
  background: #000 !important;
  pointer-events: all !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.tron-transition-overlay.active {
  display: block !important;
}
.tron-transition-overlay .tron-video-flight,
.tron-transition-overlay .tron-flight {
  position: absolute !important;
  inset: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.tron-transition-overlay .tron-transition-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1) !important;
  filter: none !important;
  animation: none !important;
  z-index: 1 !important;
}
.tron-transition-overlay.video-playing .tron-transition-video,
.tron-transition-overlay.crt-close .tron-transition-video {
  opacity: 1 !important;
  visibility: visible !important;
}
.tron-transition-overlay.crt-open .tron-transition-video {
  opacity: 0 !important;
  visibility: hidden !important;
}
.tron-transition-overlay.crt-close .tron-video-flight,
.tron-transition-overlay.crt-close .tron-flight {
  animation: tronCrtCloseV45 .5s cubic-bezier(.2,.85,.18,1) forwards !important;
}
.tron-transition-overlay .tron-crt-line {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(92vw, 1500px) !important;
  height: 4px !important;
  transform: translate(-50%, -50%) scaleX(0) !important;
  transform-origin: center center !important;
  background: linear-gradient(90deg, transparent, rgba(88,245,255,.25), #eaffff, rgba(80,238,255,.35), transparent) !important;
  box-shadow: 0 0 18px rgba(73,232,255,.95), 0 0 52px rgba(54,190,255,.65) !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.tron-transition-overlay.crt-open .tron-crt-line {
  opacity: 1 !important;
  animation: tronCrtOpenLineV45 .5s ease-out forwards !important;
}
.tron-transition-overlay.crt-close .tron-crt-line {
  opacity: 1 !important;
  animation: tronCrtCloseLineV45 .5s ease-in forwards !important;
}
.tron-transition-overlay .tron-video-vignette {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at center, transparent 0 54%, rgba(0,0,0,.16) 75%, rgba(0,0,0,.68) 100%) !important;
  opacity: .38 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}
.tron-transition-overlay .tron-video-flash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at center, rgba(195,255,255,.78), rgba(0,229,255,.23) 32%, transparent 68%) !important;
  opacity: 0 !important;
  animation: none !important;
}
.tron-transition-overlay.crt-close .tron-video-flash {
  animation: tronCrtFinalFlashV45 .5s ease-out forwards !important;
}
.tron-transition-overlay::before,
.tron-transition-overlay::after,
.tron-transition-overlay .tron-grid,
.tron-transition-overlay .tron-grid-top,
.tron-transition-overlay .tron-grid-bottom,
.tron-transition-overlay .tron-cavalier-hero,
.tron-transition-overlay .tron-speed-lines,
.tron-flight::before,
.tron-flight::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
@keyframes tronCrtOpenLineV45 {
  0% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; height: 2px; }
  24% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scaleX(1); opacity: .92; height: 5px; }
}
@keyframes tronCrtCloseV45 {
  0% { transform: scaleY(1); filter: brightness(1); opacity: 1; }
  60% { transform: scaleY(.045); filter: brightness(1.85); opacity: 1; }
  100% { transform: scaleY(.002); filter: brightness(2.4); opacity: 0; }
}
@keyframes tronCrtCloseLineV45 {
  0% { transform: translate(-50%, -50%) scaleX(1); opacity: 0; height: 8px; }
  42% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scaleX(.04); opacity: 0; height: 2px; }
}
@keyframes tronCrtFinalFlashV45 {
  0% { opacity: 0; }
  45% { opacity: .38; }
  100% { opacity: 0; }
}


/* ==========================================================
   V46 — correctif demandé
   1) Chaque départ de page se ferme en effet TV cathodique.
   2) Sous-menus accessibles : pas d'espace mort, z-index fort,
      hover + focus + clic via .open.
   ========================================================== */
body.crt-page-leaving > *:not(#tron-transition-overlay) {
  transform-origin: center center !important;
  animation: graalPageCrtLeaveV46 .5s cubic-bezier(.18,.88,.18,1) forwards !important;
  pointer-events: none !important;
}

@keyframes graalPageCrtLeaveV46 {
  0% {
    opacity: 1;
    transform: scaleY(1);
    filter: brightness(1) contrast(1);
  }
  58% {
    opacity: 1;
    transform: scaleY(.055);
    filter: brightness(1.9) contrast(1.35) saturate(1.15);
  }
  100% {
    opacity: 0;
    transform: scaleY(.003);
    filter: brightness(2.9) contrast(1.55) saturate(1.25);
  }
}

.top-nav {
  z-index: 2147483000 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.nav-inner,
.nav-links,
.nav-item,
.has-dropdown {
  overflow: visible !important;
}
.has-dropdown {
  position: relative !important;
  padding-bottom: 14px !important;
  margin-bottom: -14px !important;
}
.nav-dropdown {
  top: calc(100% - 2px) !important;
  left: 0 !important;
  z-index: 2147483001 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(0) !important;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.open .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.nav-dropdown-item {
  display: block !important;
  pointer-events: auto !important;
}
.hero-section,
.video-container,
.code-anim,
.cordes-pixel-stage,
.tron-transition-overlay:not(.active) {
  pointer-events: auto;
}
.tron-transition-overlay:not(.active) {
  display: none !important;
  pointer-events: none !important;
}

/* =========================================================
   SECTION PREINTRO — VERROUILLÉE
   Ne pas modifier sans demande explicite.
   ========================================================= */

/* ==========================================================
   PREINTRO CLEAN — V116
   Écran de pré-intro validé, sans empilement V47→V60.
   Structure HTML utilisée :
   #preintro-screen > #preintro-logo-button >
   .preintro-logo-halo + .preintro-logo-png + .preintro-hand-wrap > .preintro-hand-png
   ========================================================== */
body.preintro-mode {
  background: #000 !important;
  overflow: hidden !important;
}

body.preintro-mode #intro-screen,
body.preintro-mode #site-wrapper,
body.preintro-mode #intro-screen.hidden,
body.preintro-mode #site-wrapper.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#preintro-screen.preintro-screen:not(.hidden),
body.preintro-mode #preintro-screen {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147483640 !important;
}

#preintro-screen.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#preintro-screen::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 215, 255, .08), transparent 36%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 5px) !important;
  opacity: .7 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#preintro-logo-button.preintro-logo-button {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  width: min(500px, 42vw) !important;
  height: min(500px, 42vw) !important;
  min-width: 310px !important;
  min-height: 310px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  z-index: 2 !important;
  -webkit-tap-highlight-color: transparent !important;
}

#preintro-logo-button::before,
#preintro-logo-button::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#preintro-logo-button:focus { outline: none !important; }
#preintro-logo-button:focus-visible {
  outline: 2px solid rgba(75, 245, 255, .75) !important;
  outline-offset: 12px !important;
}

#preintro-logo-button .preintro-logo-halo {
  display: block !important;
  position: absolute !important;
  inset: -18% !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
  background: radial-gradient(circle,
    rgba(85, 247, 255, .42) 0%,
    rgba(0, 192, 255, .23) 30%,
    rgba(0, 145, 255, .12) 50%,
    rgba(0, 95, 255, .05) 62%,
    transparent 74%) !important;
  box-shadow:
    0 0 30px rgba(72, 242, 255, .88),
    0 0 86px rgba(0, 182, 255, .58),
    0 0 150px rgba(0, 120, 255, .36) !important;
  filter: blur(8px) !important;
  animation: graalPreintroHalo 1.8s ease-in-out infinite alternate !important;
}

#preintro-logo-button .preintro-logo-png {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  pointer-events: none !important;
  user-select: none !important;
  image-rendering: auto !important;
  filter:
    drop-shadow(0 0 9px rgba(55, 238, 255, .85))
    drop-shadow(0 0 26px rgba(0, 178, 255, .50)) !important;
  animation: graalPreintroLogoGlow 1.8s ease-in-out infinite alternate !important;
}

#preintro-logo-button .preintro-hand-wrap {
  display: block !important;
  position: absolute !important;
  left: 73% !important;
  top: 66% !important;
  width: 34% !important;
  height: auto !important;
  z-index: 4 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform-origin: 18% 18% !important;
  will-change: transform, opacity !important;
  animation: graalPreintroHandMove 2.25s cubic-bezier(.37,0,.25,1) infinite !important;
}

#preintro-logo-button .preintro-hand-png {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  user-select: none !important;
  filter:
    drop-shadow(0 0 5px rgba(45, 232, 255, .95))
    drop-shadow(0 0 15px rgba(0, 170, 255, .62)) !important;
}

/* Extinction CRT pré-intro, conservée car appelée par script.js via .crt-closing. */
#preintro-screen.crt-closing {
  transform-origin: center center !important;
  animation: graalPreintroCrtClose var(--graal-crt-close-ms, 1870ms) cubic-bezier(.16,.84,.28,1) forwards !important;
}

#preintro-screen.crt-closing::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 95vw !important;
  height: 4px !important;
  transform: translate(-50%, -50%) scaleX(0) !important;
  background: linear-gradient(90deg, transparent, rgba(79,236,255,.35), #fff, rgba(79,236,255,.35), transparent) !important;
  box-shadow: 0 0 18px rgba(79,236,255,.95), 0 0 52px rgba(79,236,255,.55) !important;
  opacity: 0 !important;
  animation: graalPreintroCrtLine var(--graal-crt-close-ms, 1870ms) ease-in forwards !important;
}

body.crt-page-leaving > *:not(#tron-transition-overlay),
.tron-transition-overlay.crt-close .tron-video-flight,
.tron-transition-overlay.crt-close .tron-flight,
.tron-transition-overlay.crt-close .tron-crt-line {
  animation-duration: var(--graal-crt-close-ms, 1870ms) !important;
}

@keyframes graalPreintroHalo {
  0%   { opacity: .32; transform: scale(.86); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1.13); filter: blur(11px); }
}

@keyframes graalPreintroLogoGlow {
  0%   { filter: drop-shadow(0 0 7px rgba(55,238,255,.58)) drop-shadow(0 0 17px rgba(0,178,255,.32)); }
  100% { filter: drop-shadow(0 0 14px rgba(55,238,255,.98)) drop-shadow(0 0 38px rgba(0,178,255,.68)); }
}

@keyframes graalPreintroHandMove {
  0%   { transform: translate3d(42px, 42px, 0) scale(1); opacity: .72; }
  18%  { transform: translate3d(28px, 28px, 0) scale(1); opacity: .88; }
  44%  { transform: translate3d(-10px, -10px, 0) scale(1); opacity: 1; }
  54%  { transform: translate3d(-20px, -20px, 0) scale(.965); opacity: 1; }
  64%  { transform: translate3d(-10px, -10px, 0) scale(1); opacity: 1; }
  84%  { transform: translate3d(28px, 28px, 0) scale(1); opacity: .88; }
  100% { transform: translate3d(42px, 42px, 0) scale(1); opacity: .72; }
}

@keyframes graalPreintroCrtClose {
  0% { opacity: 1; transform: scaleY(1); filter: brightness(1) contrast(1); }
  45% { opacity: 1; transform: scaleY(.18); filter: brightness(1.65) contrast(1.28) saturate(1.15); }
  72% { opacity: .92; transform: scaleY(.035); filter: brightness(2.3) contrast(1.45) saturate(1.25); }
  100% { opacity: 0; transform: scaleY(.002); filter: brightness(3) contrast(1.65) saturate(1.3); }
}

@keyframes graalPreintroCrtLine {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.08); }
  42% { opacity: 1; transform: translate(-50%, -50%) scaleX(.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.18); }
}


/* ==========================================================
   PATCH V62 — Bandeau d'apparition sur les pages internes
   Reprise du principe de la page MENU : image dans le bandeau,
   scanlines + bruitage MP3, sans overlay plein écran.
   ========================================================== */
.page-arrival-hero {
  padding-top: 1.2rem !important;
  padding-bottom: 0.2rem !important;
}
.page-arrival-video-container {
  max-width: min(1180px, calc(100vw - 2rem)) !important;
  aspect-ratio: 1536 / 1024 !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0.8rem !important;
}
.page-arrival-stage,
.page-arrival-image {
  width: 100% !important;
  height: 100% !important;
}
.page-arrival-image {
  object-fit: contain !important;
  object-position: center center !important;
  filter: drop-shadow(0 0 14px rgba(45, 213, 255, .65)) !important;
}

/* Bouton avis Google / CTA clair — anchors + label flyer */
.google-reviews-button,
a.google-reviews-button:visited {
  display: inline-block !important;
  margin: 0.8rem 0 !important;
  padding: 0.95rem 1.25rem !important;
  border: 2px solid #ffffff !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(211,246,255,.94)) !important;
  color: #031326 !important;
  font-weight: 900 !important;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem) !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 0 16px rgba(71,221,255,.85), 0 0 34px rgba(28,128,255,.45) !important;
}
.google-reviews-button:hover,
.google-reviews-button:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 22px rgba(255,255,255,.95), 0 0 42px rgba(71,221,255,.85) !important;
}


/* ==========================================================
   PATCH V63 — Pages internes : MP3 aventuriers + image plus petite
   Durée calée sur apparition_image_aventurier.mp3 (~3.24 s).
   ========================================================== */
.page-arrival-video-container {
  max-width: min(760px, calc(100vw - 2rem)) !important;
  aspect-ratio: 1536 / 1024 !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.45rem !important;
}
.page-arrival-hero {
  padding-top: 0.6rem !important;
  padding-bottom: 0 !important;
}
.page-arrival-code-anim,
.page-arrival-code-anim-inner {
  min-height: 0 !important;
}
.page-arrival-stage {
  width: min(760px, 92vw) !important;
  aspect-ratio: 1536 / 1024 !important;
}
.page-arrival-image {
  animation: cordesRevealClean 3.24s linear both !important;
}
.page-arrival-stage .cordes-pixel-scan,
.page-arrival-video-container .cordes-pixel-scan {
  animation: cordesScanClean 3.24s linear both !important;
}


/* ==========================================================
   PATCH V69 — Page Salle de Jeux / Rétrogaming
   ========================================================== */
.retrogaming-page .reborne-flyer-image {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  border: 2px solid rgba(120, 235, 255, .85);
  box-shadow:
    0 0 14px rgba(0, 255, 255, .95),
    0 0 34px rgba(35, 150, 255, .72),
    0 0 64px rgba(190, 60, 255, .42);
  filter: drop-shadow(0 0 14px rgba(95, 225, 255, .72));
}
.retrogaming-page .reborne-flyer-toggle {
  text-align: center;
}
.retrogaming-page .reborne-flyer-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.retrogaming-page .reborne-flyer-panel {
  display: none;
  margin: 1.3rem auto 0;
  cursor: pointer;
  max-width: min(720px, 96%);
}
.retrogaming-page .reborne-flyer-check:checked ~ .reborne-flyer-panel {
  display: block;
}
.retrogaming-page .reborne-flyer-image {
  width: 100%;
}


/* MENU PRINCIPAL — Mains et bulles de scroll consolidées V33
   Positions validées conservées depuis V12. */
.scroll-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.05rem;
  z-index: 550;
  pointer-events: none;
  font-family: 'ModernDOS', 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7ee8ff;
}

.scroll-hint-text {
  position: fixed !important;
  left: 2.05rem !important;
  right: auto !important;
  bottom: 1.05rem !important;
  transform: none !important;
  font-size: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.scroll-hint-text::after,
.scroll-hint::after {
  content: 'Défiler vers le bas' !important;
  position: fixed !important;
  bottom: 1.05rem !important;
  transform: none !important;
  font-size: 0.62rem !important;
  padding: 0.30rem 0.46rem !important;
  border: 1px solid rgba(0, 180, 255, 0.65) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  box-shadow: 0 0 18px rgba(0, 180, 255, 0.55), inset 0 0 12px rgba(0, 180, 255, 0.18) !important;
  white-space: nowrap !important;
  color: #7ee8ff !important;
  text-shadow: 0 0 8px #2ccfff, 0 0 18px rgba(44,207,255,0.85) !important;
}

.scroll-hint-text::after {
  left: 2.05rem !important;
  right: auto !important;
}

.scroll-hint::after {
  right: 2.05rem !important;
  left: auto !important;
}

.scroll-hand {
  position: fixed;
  bottom: 0.76rem;
  font-size: 2.45rem;
  line-height: 1;
  color: #2ccfff;
  text-shadow: 0 0 8px #2ccfff, 0 0 18px rgba(44,207,255,0.85), 0 0 28px rgba(44,207,255,0.55);
  animation: scrollSideHandFloat 1.15s ease-in-out infinite alternate;
}
.scroll-hand-left { left: 0.45rem !important; }
.scroll-hand-right { right: 0.45rem !important; }

@keyframes scrollSideHandFloat {
  from { transform: translateY(0); opacity: 0.78; }
  to { transform: translateY(9px); opacity: 1; }
}

/* MENU PRINCIPAL / PAGES INTERNES — Bandeau contact TRON consolidé V22
   Fusion propre des anciens patchs V72/V73/V74/V75/V76/V98/V102.
   Rendu conservé : placement V102 + typo/glow V75/V76 + écriture progressive. */
.menu-cordes-stage,
.page-arrival-stage {
  position: relative;
  overflow: visible !important;
}

@keyframes tronCaretBlink {
  50% { opacity: 0; }
}

.cordes-contact-layout {
  position: relative !important;
  display: block !important;
  width: min(880px, 92vw) !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  contain: none !important;
}

.page-arrival-contact-layout {
  width: min(760px, 92vw) !important;
}

.cordes-contact-layout .cordes-pixel-stage {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  grid-column: auto !important;
}

.cordes-contact-layout .menu-tron-contact {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 50 !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  padding: 0 0.7rem !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: pre-line !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  color: #7ee8ff !important;
  font-family: 'ModernDOS', 'Courier New', monospace !important;
  font-size: clamp(0.62rem, 1.02vw, 1rem) !important;
  line-height: 1.34 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-shadow: 0 0 8px #2ccfff, 0 0 18px rgba(44,207,255,0.95), 0 0 34px rgba(44,207,255,0.55) !important;
  filter: drop-shadow(0 0 8px rgba(44,207,255,0.85)) !important;
}

.cordes-contact-layout .menu-tron-contact.is-visible {
  visibility: visible !important;
  opacity: 1 !important;
}

.cordes-contact-layout .menu-tron-contact.is-complete {
  clip-path: none !important;
}

.cordes-contact-layout .menu-tron-contact.is-typing::after {
  content: '▌' !important;
  margin-left: 0.12em !important;
  animation: tronCaretBlink 0.55s step-end infinite !important;
}

.cordes-contact-layout .menu-tron-contact-left {
  left: auto !important;
  right: 100% !important;
  width: max(150px, calc((100vw - 100%) / 2)) !important;
  max-width: max(150px, calc((100vw - 100%) / 2)) !important;
  text-align: center !important;
  grid-column: auto !important;
}

.cordes-contact-layout .menu-tron-contact-right {
  left: 100% !important;
  right: auto !important;
  width: max(190px, calc((100vw - 100%) / 2)) !important;
  max-width: max(190px, calc((100vw - 100%) / 2)) !important;
  text-align: center !important;
  grid-column: auto !important;
}


/* V105 — Anti-flash réel navigation HTML : le calque noir reste affiché jusqu'au location.href. */
.tron-transition-overlay.nav-hold {
  display: block !important;
  background: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}
.tron-transition-overlay.nav-hold .tron-video-flight,
.tron-transition-overlay.nav-hold .tron-flight,
.tron-transition-overlay.nav-hold .tron-transition-video,
.tron-transition-overlay.nav-hold .tron-video-vignette,
.tron-transition-overlay.nav-hold .tron-video-flash,
.tron-transition-overlay.nav-hold .tron-crt-line {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* V106 — Pages internes : l'image reste sous le cadre lumineux.
   Ne touche pas au menu. Le cadre est redessiné en surcouche pour que
   le noir carré de l'image ne passe plus par-dessus dans les coins. */
.page-arrival-stage {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 0 !important;
  background: #020712 !important;
  box-shadow: 0 0 18px rgba(58, 237, 255, .65), inset 0 0 28px rgba(20, 168, 255, .22) !important;
  isolation: isolate !important;
}

.page-arrival-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  pointer-events: none !important;
  border: 2px solid rgba(77, 245, 255, .96) !important;
  border-radius: inherit !important;
  box-shadow:
    0 0 18px rgba(58, 237, 255, .78),
    inset 0 0 28px rgba(20, 168, 255, .24) !important;
}

.page-arrival-stage .page-arrival-image {
  z-index: 1 !important;
  inset: 2px !important;
  width: calc(100% - 4px) !important;
  height: calc(100% - 4px) !important;
}

.page-arrival-stage .cordes-pixel-scan,
.page-arrival-stage .cordes-pixel-noise {
  z-index: 20 !important;
}

.contact-cta-button {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid #00d8ff;
  border-radius: 10px;
  color: #dffcff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 16px rgba(0,216,255,.65), inset 0 0 14px rgba(0,216,255,.25);
}
.contact-cta-button:hover {
  box-shadow: 0 0 24px rgba(0,216,255,.9), inset 0 0 18px rgba(0,216,255,.35);
}


/* Galeries photos / vidéos — bloc consolidé v43
   Remplace les anciens correctifs V108/V112 empilés. */
main {
  padding-top: 0 !important;
}
.section {
  margin-top: 8px !important;
}
.section:first-of-type {
  margin-top: 10px !important;
}
.section h2:first-child {
  margin-top: 0 !important;
}
.event-gallery,
.photo-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}
.photo-card {
  display: block;
  border: 1px solid rgba(0,216,255,.72);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 18, 35, .62);
  box-shadow: 0 0 16px rgba(0,216,255,.32), inset 0 0 18px rgba(0,216,255,.12);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 26px rgba(0,216,255,.74), inset 0 0 20px rgba(0,216,255,.18);
}
.photo-card img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}
.photo-card::after,
.photo-card figcaption,
.photo-card .caption {
  display: none !important;
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(0, 3, 10, .92);
}
.photo-lightbox.is-open {
  display: flex;
}
.photo-lightbox img {
  max-width: min(96vw, 1500px);
  max-height: 88vh;
  object-fit: contain;
  border: 2px solid #00d8ff;
  border-radius: 14px;
  background: #020712;
  box-shadow: 0 0 34px rgba(0,216,255,.85);
}
.photo-lightbox-close,
.photo-lightbox-prev,
.photo-lightbox-next {
  position: fixed;
  z-index: 100000;
  border: 1px solid #00d8ff;
  border-radius: 12px;
  color: #e8fdff;
  background: rgba(0, 18, 35, .82);
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0,216,255,.62);
}
.photo-lightbox-close {
  top: 18px;
  right: 18px;
  padding: 10px 16px;
  font-size: 28px;
}
.photo-lightbox-prev,
.photo-lightbox-next {
  top: 50%;
  padding: 14px 18px;
  font-size: 34px;
  transform: translateY(-50%);
}
.photo-lightbox-prev { left: 18px; }
.photo-lightbox-next { right: 18px; }
.photo-lightbox-caption {
  display: none !important;
}
.gallery-page-section {
  width: min(1180px, calc(100vw - 92px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-top: clamp(14px, 2vw, 28px) !important;
}
.gallery-page-section > h2,
.gallery-filters,
.photo-note {
  display: none !important;
}
.gallery-page-section > p {
  margin-bottom: 24px !important;
}
.media-frame {
  border: 1px solid rgba(0, 216, 255, .86);
  border-radius: 18px;
  width: min(1180px, calc(100vw - 92px)) !important;
  max-width: 1180px !important;
  margin: 22px auto 28px !important;
  padding: 24px;
  background: rgba(0, 12, 32, .62);
  box-shadow: 0 0 24px rgba(0,216,255,.42), inset 0 0 28px rgba(0,216,255,.12);
}
.media-frame h2 {
  margin-top: 0 !important;
  text-align: center;
}
.media-frame > p {
  margin: 0 0 22px !important;
}
.video-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 22px !important;
}
.youtube-box {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,216,255,.8) !important;
  border-radius: 14px !important;
  background: #020712 !important;
  box-shadow: 0 0 20px rgba(0,216,255,.48), inset 0 0 16px rgba(0,216,255,.16) !important;
}
.youtube-box iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
.top-nav .nav-links > a:last-child {
  margin-right: 14px !important;
}
.page-arrival-hero {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.page-arrival-video-container {
  margin-bottom: 0 !important;
}


/* V115 — alignements demandés : titres plus bas, menu RE-START/MENU, contact image, youtube */
.top-nav .nav-inner {
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.top-nav .nav-start-link {
  order: 1 !important;
  flex: 0 0 auto !important;
  margin: 0 4px 0 0 !important;
  padding: 9px 14px !important;
  font-size: clamp(10px, .86vw, 15px) !important;
  white-space: nowrap !important;
}

.top-nav .nav-logo {
  order: 2 !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 clamp(16px, 3.2vw, 58px) 0 0 !important;
  color: #e8fdff !important;
  font-size: clamp(24px, 2.05vw, 40px) !important;
  line-height: 1 !important;
}

.top-nav .nav-links {
  order: 3 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: clamp(8px, .74vw, 14px) !important;
  overflow: visible !important;
}

.top-nav .nav-links > a,
.top-nav .nav-link,
.nav-dropdown-toggle {
  white-space: nowrap !important;
  font-size: clamp(10px, .92vw, 16px) !important;
  padding: 7px clamp(8px, .72vw, 13px) !important;
}


.page-heading {
  width: min(1180px, calc(100vw - 92px)) !important;
  margin: clamp(52px, 7.2vh, 94px) auto 24px !important;
  padding: 0 !important;
}

.page-heading h1 {
  margin: 0 0 16px 0 !important;
  color: #33f6ff !important;
  font-size: clamp(36px, 3.05vw, 58px) !important;
  line-height: 1.04 !important;
  letter-spacing: .03em !important;
  text-shadow: 0 0 18px rgba(51,246,255,.78) !important;
}

.page-heading h2 {
  margin: 0 !important;
  color: #e8fdff !important;
  font-size: clamp(18px, 1.36vw, 28px) !important;
  line-height: 1.22 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  text-shadow: 0 0 14px rgba(232,253,255,.72) !important;
}

body.site-mode #top.hero-section {
  padding-bottom: clamp(58px, 9vh, 128px) !important;
  margin-bottom: 0 !important;
}

.section,
.media-frame,
.gallery-page-section {
  width: min(1180px, calc(100vw - 92px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.video-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 22px !important;
}

.youtube-box {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 240px !important;
  border: 1px solid rgba(0,216,255,.86) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #020712 !important;
  box-shadow: 0 0 20px rgba(0,216,255,.48), inset 0 0 16px rgba(0,216,255,.16) !important;
}

.youtube-box iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}


/* =========================================================
   SECTION MENU / PAGES INTERNES
   .hero-intro appartient ici, pas à l’intro PRESS START.
   ========================================================= */

/* V116 — patch final demandé : centrage horizontal des chapitrages + menu légèrement descendu + prix oiseaux */
/* Page menu : on descend légèrement le bloc Bienvenue sans toucher au reste. */
body.site-mode #top.hero-section .hero-intro {
  margin-top: 30px !important;
}

/* Pages internes : on ne change PAS la hauteur, on centre seulement le titre et le sous-titre sous l’image. */
.page-heading {
  text-align: center !important;
}
.page-heading h1,
.page-heading h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   SECTION TRANSITION INTRO — SCANLINE V116 RESTAURÉE
   Garder : c’est la barre lumineuse bleue entre préintro et intro.
   ========================================================= */

/* Restored V116 intro scanline */
#intro-reveal-scanline{
  position:fixed!important;
  left:0!important;right:0!important;top:0!important;
  height:14vh!important;
  z-index:2147483500!important;
  pointer-events:none!important;
  transform:translateY(var(--scan-y,-12vh))!important;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(48,238,255,.12) 20%, rgba(240,255,255,.90) 50%, rgba(48,238,255,.24) 78%, transparent 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0 1px, transparent 1px 5px)!important;
  filter:blur(.35px) drop-shadow(0 0 18px rgba(47,248,255,.95)) drop-shadow(0 0 42px rgba(0,170,255,.55))!important;
  mix-blend-mode:screen!important;
}


/* ==========================================================
   MOBILE TRON V64 — module propre depuis v49
   Référence visuelle : v117 menu mobile.
   PC / préintro / intro : inchangés.
   ========================================================== */
@media (max-width: 900px) {
  :root {
    --mobile-side-gap-v64: clamp(38px, 10vw, 54px);
    --mobile-inner-v64: min(calc(100vw - (var(--mobile-side-gap-v64) * 2)), 520px);
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #01040c !important;
  }

  /* Coque uniquement en mode site : préintro/intro non touchées */
  body.site-mode:not(.preintro-mode):not(.intro-mode)::before {
    content: "" !important;
    position: fixed !important;
    inset: 10px 12px !important;
    z-index: 10 !important;
    pointer-events: none !important;
    border: 2px solid rgba(52, 246, 255, .78) !important;
    border-radius: 0 !important;
    box-shadow:
      0 0 18px rgba(0, 225, 255, .70),
      0 0 34px rgba(0, 170, 255, .42),
      inset 0 0 22px rgba(0, 180, 255, .28),
      0 0 0 1px rgba(0, 255, 255, .22) !important;
  }

  body.site-mode:not(.preintro-mode):not(.intro-mode)::after {
    content: "" !important;
    position: fixed !important;
    inset: 12px 14px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
      linear-gradient(rgba(0, 210, 255, .10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 210, 255, .10) 1px, transparent 1px) !important;
    background-size: 54px 54px !important;
    opacity: .55 !important;
  }

  body.site-mode .site-wrapper {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 0 48px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  body.site-mode main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  /* Header v117 : bloc haut seulement, la nav PC est cachée sur mobile */
  body.site-mode .top-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 50000 !important;
    width: var(--mobile-inner-v64) !important;
    max-width: var(--mobile-inner-v64) !important;
    margin: 8px auto 12px !important;
    padding: 8px 10px 10px !important;
    box-sizing: border-box !important;
    background: rgba(0, 8, 18, .90) !important;
    border: 1px solid rgba(44, 237, 255, .85) !important;
    border-radius: 18px !important;
    box-shadow:
      0 0 18px rgba(0, 230, 255, .36),
      inset 0 0 18px rgba(0, 180, 255, .12) !important;
  }

  body.site-mode .top-nav .nav-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.site-mode .top-nav .nav-links {
    display: none !important;
  }

  body.site-mode .top-nav .nav-start-link,
  body.site-mode .top-nav .nav-logo {
    display: inline-flex !important;
    width: auto !important;
    min-width: 90px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: .09em !important;
    white-space: nowrap !important;
    font-family: 'ModernDOS', 'Courier New', monospace !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: #8afcff !important;
    text-shadow: 0 0 8px rgba(0,238,255,.92), 0 0 18px rgba(0,238,255,.42) !important;
  }

  body.site-mode .top-nav .nav-start-link {
    min-width: 84px !important;
    max-width: 90px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    transform: translateX(-4px) !important;
  }

  body.site-mode .top-nav .nav-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body.site-mode .top-nav .nav-logo::after {
    content: "MENU PRINCIPAL";
    font-size: 21px !important;
    line-height: 1 !important;
  }

  /* Nav mobile v117 : label séparé, rail seul scrollable */
  .mobile-tron-nav-v64 {
    display: block !important;
    width: var(--mobile-inner-v64) !important;
    max-width: var(--mobile-inner-v64) !important;
    margin: 0 auto 14px !important;
    position: relative !important;
    z-index: 49990 !important;
  }

  .mobile-tron-nav-v64__label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 0 7px !important;
    font-size: 11px !important;
    letter-spacing: .15em !important;
    color: #5efbff !important;
    text-shadow: 0 0 10px rgba(0, 238, 255, .72) !important;
    text-transform: uppercase !important;
  }

  .mobile-tron-nav-v64__hand {
    font-size: 20px !important;
    display: inline-block !important;
    animation: mobileSwipeHandV64 1.2s infinite ease-in-out !important;
  }

  @keyframes mobileSwipeHandV64 {
    0%, 100% { transform: translateX(0); opacity: .65; }
    50% { transform: translateX(12px); opacity: 1; }
  }

  .mobile-tron-nav-v64__rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding: 4px 4px 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #28eaff transparent !important;
  }

  .mobile-tron-nav-v64__rail::-webkit-scrollbar { height: 4px !important; }
  .mobile-tron-nav-v64__rail::-webkit-scrollbar-thumb {
    background: #28eaff !important;
    border-radius: 999px !important;
  }
  .mobile-tron-nav-v64__rail::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .mobile-tron-nav-v64__pill {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 145px !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(44, 237, 255, .88) !important;
    border-radius: 999px !important;
    background: rgba(0, 18, 32, .82) !important;
    color: #3cf6ff !important;
    text-decoration: none !important;
    box-shadow:
      0 0 10px rgba(0, 230, 255, .32),
      inset 0 0 10px rgba(0, 170, 255, .11) !important;
    font-size: 13px !important;
    line-height: 1.14 !important;
    letter-spacing: .055em !important;
    text-align: center !important;
    white-space: normal !important;
    cursor: pointer !important;
    font-family: 'ModernDOS', 'Courier New', monospace !important;
    font-weight: 400 !important;
    text-transform: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .mobile-tron-nav-v64__submenu {
    display: none !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(44, 237, 255, .72) !important;
    border-radius: 14px !important;
    background: rgba(0, 8, 18, .94) !important;
    box-shadow: 0 0 14px rgba(0, 230, 255, .32), inset 0 0 12px rgba(0, 170, 255, .11) !important;
  }

  .mobile-tron-nav-v64__submenu.is-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .mobile-tron-nav-v64__submenu a {
    display: block !important;
    padding: 9px 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #d9fbff !important;
    border: 1px solid rgba(44, 237, 255, .32) !important;
    border-radius: 10px !important;
    background: rgba(0, 20, 34, .58) !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  /* Mains v117 : fixes, sans texte */
  body.site-mode .scroll-hint {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 22px !important;
    z-index: 100001 !important;
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    pointer-events: none !important;
    transform: none !important;
    opacity: .82 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.site-mode .scroll-hint-text {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    opacity: 0 !important;
  }

  body.site-mode .scroll-hint::after,
  body.site-mode .scroll-hint-text::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.site-mode .scroll-hand {
    position: fixed !important;
    bottom: 24px !important;
    font-size: 25px !important;
    line-height: 1 !important;
    color: #44f8ff !important;
    text-shadow: 0 0 10px #00eaff, 0 0 22px #00eaff !important;
  }

  body.site-mode .scroll-hand-left { left: 21px !important; }
  body.site-mode .scroll-hand-right { right: 21px !important; }

  /* Image / téléphone / adresse : téléphone, image, adresse */
  body.site-mode .page-arrival-hero,
  body.site-mode #top.hero-section {
    width: var(--mobile-inner-v64) !important;
    max-width: var(--mobile-inner-v64) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    clear: both !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body.site-mode .page-arrival-video-container,
  body.site-mode .page-arrival-code-anim,
  body.site-mode .page-arrival-code-anim-inner,
  body.site-mode #top .video-container,
  body.site-mode #top .code-anim,
  body.site-mode #top .code-anim-inner {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Mobile menu: le conteneur vidéo ne doit plus imposer un faux 16/9.
     Seule l'image intérieure garde son ratio 1536/1024. */
  body.site-mode .video-container,
  body.site-mode .page-arrival-video-container {
    aspect-ratio: auto !important;
  }

  body.site-mode .cordes-contact-layout,
  body.site-mode .page-arrival-contact-layout,
  body.site-mode .menu-contact-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    transform: translateY(26px) !important;
  }

  body.site-mode .menu-cordes-stage,
  body.site-mode .page-arrival-stage {
    order: 2 !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1536 / 1024 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.site-mode .menu-cordes-stage .cordes-pixel-final,
  body.site-mode .page-arrival-stage .page-arrival-image,
  body.site-mode .page-arrival-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.site-mode .menu-tron-contact,
  body.site-mode #menu-tron-phone,
  body.site-mode #menu-tron-address,
  body.site-mode #page-tron-phone,
  body.site-mode #page-tron-address {
    display: flex !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 18px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: clamp(12px, 3.4vw, 16px) !important;
    line-height: 1.25 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #55f6ff !important;
    text-shadow: 0 0 8px rgba(0, 238, 255, .85), 0 0 18px rgba(0, 238, 255, .48) !important;
    white-space: pre-line !important;
  }

  body.site-mode #menu-tron-phone,
  body.site-mode #page-tron-phone {
    order: 1 !important;
    margin-bottom: 2px !important;
  }

  body.site-mode #menu-tron-address,
  body.site-mode #page-tron-address {
    order: 3 !important;
    margin-top: 6px !important;
    margin-bottom: 82px !important;
  }

  body.site-mode .page-arrival-contact-left,
  body.site-mode .page-arrival-contact-right,
  body.site-mode .tron-contact-left,
  body.site-mode .tron-contact-right {
    display: none !important;
  }

  /* Titres et sections */
  body.site-mode .page-heading,
  body.site-mode .hero-intro,
  body.site-mode .section,
  body.site-mode .media-frame,
  body.site-mode .gallery-page-section,
  body.site-mode .games-grid,
  body.site-mode .events-grid,
  body.site-mode .contact-block {
    width: var(--mobile-inner-v64) !important;
    max-width: var(--mobile-inner-v64) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.site-mode .page-heading {
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body.site-mode .page-heading h1,
  body.site-mode .hero-intro h1 {
    font-size: clamp(24px, 6.6vw, 34px) !important;
    line-height: 1.08 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    opacity: 1 !important;
  }

  body.site-mode .page-heading h2,
  body.site-mode .hero-intro p {
    font-size: clamp(13px, 3.8vw, 18px) !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    text-align: center !important;
    letter-spacing: .08em !important;
  }


  /* Titres mobiles lisibles : pas de ponctuation ou dernier mot isolé */
  body.site-mode h1,
  body.site-mode h2,
  body.site-mode h3,
  body.site-mode .game-card h3,
  body.site-mode .menu-card h2,
  body.site-mode .page-heading h1,
  body.site-mode .page-heading h2,
  body.site-mode .hero-intro h1,
  body.site-mode .hero-intro p {
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  body.site-mode .hero-intro {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    padding: 0 !important;
  }

  body.site-mode .section,
  body.site-mode .media-frame,
  body.site-mode .gallery-page-section {
    padding: 16px 0 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.site-mode .section h1:first-child,
  body.site-mode .section h1:first-child + h2 {
    display: none !important;
  }

  body.site-mode .section h2,
  body.site-mode .gallery-page-section h2,
  body.site-mode .media-frame h2 {
    font-size: clamp(20px, 5.6vw, 28px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    margin: 16px 0 12px !important;
  }

  body.site-mode .section p,
  body.site-mode .section li,
  body.site-mode .gallery-page-section p,
  body.site-mode .media-frame p,
  body.site-mode .game-card p,
  body.site-mode .menu-card p {
    font-size: clamp(14px, 3.75vw, 17px) !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  body.site-mode .section ul {
    padding-left: 18px !important;
    text-align: left !important;
  }

  body.site-mode img,
  body.site-mode video,
  body.site-mode iframe {
    max-width: 100% !important;
  }

  /* Carrousels et cartes : game-card + menu-card harmonisées */
  body.site-mode .section-games .games-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding: 8px 0 16px calc((100% - 86%) / 2) !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #28eaff rgba(0, 25, 38, .35) !important;
  }

  body.site-mode .section-games .games-grid::-webkit-scrollbar {
    display: block !important;
    height: 4px !important;
  }

  body.site-mode .section-games .games-grid::-webkit-scrollbar-thumb {
    background: #28eaff !important;
    border-radius: 999px !important;
  }

  body.site-mode .section-games .games-grid::-webkit-scrollbar-track {
    background: rgba(0, 25, 38, .35) !important;
    border-radius: 999px !important;
  }

  body.site-mode .game-card {
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: 86% !important;
    min-height: 186px !important;
    scroll-snap-align: start !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
  }

  body.site-mode #retrogaming,
  body.site-mode #galerie-photos-videos,
  body.site-mode #contact-info-bottom {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.site-mode #retrogaming .menu-card,
  body.site-mode #galerie-photos-videos .menu-card,
  body.site-mode #contact-info-bottom .menu-card {
    display: block !important;
    width: 86% !important;
    max-width: 86% !important;
    min-height: 186px !important;
    margin: 0 0 0 calc((100% - 86%) / 2) !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body.site-mode .game-card h3,
  body.site-mode .menu-card h2 {
    font-size: clamp(15px, 4.1vw, 20px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    margin: 0 0 10px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  body.site-mode .menu-card p,
  body.site-mode .game-card p {
    font-size: clamp(13px, 3.45vw, 16px) !important;
    line-height: 1.38 !important;
  }

  /* Galerie photos/vidéos en horizontal */
  body.site-mode .photo-gallery {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 8px 0 14px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.site-mode .photo-gallery::-webkit-scrollbar {
    display: none !important;
  }

  body.site-mode .photo-card {
    flex: 0 0 82% !important;
    scroll-snap-align: center !important;
  }

  body.site-mode .photo-card img {
    width: 100% !important;
    height: auto !important;
    max-height: 58vh !important;
    object-fit: contain !important;
  }

  body.site-mode .event-gallery {
    grid-template-columns: 1fr !important;
  }

  body.site-mode .video-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  body.site-mode .youtube-box,
  body.site-mode .video-card iframe,
  body.site-mode iframe[src*="youtube.com/embed"] {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Transition : grille TRON visible aussi sur mobile */
  .tron-transition-overlay .tron-mobile-video-grid {
    display: block !important;
    position: absolute !important;
    left: -25% !important;
    width: 150% !important;
    height: 30% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background-image:
      linear-gradient(rgba(0,240,255,.70) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,240,255,.50) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    filter: drop-shadow(0 0 6px rgba(0,235,255,.85)) !important;
    opacity: .72 !important;
  }
  .tron-transition-overlay .tron-mobile-video-grid-top {
    top: 0 !important;
    transform-origin: center bottom !important;
    transform: perspective(320px) rotateX(-58deg) !important;
  }

  .tron-transition-overlay .tron-mobile-video-grid-bottom {
    bottom: 0 !important;
    transform-origin: center top !important;
    transform: perspective(320px) rotateX(58deg) !important;
  }
}

@media (max-width: 380px) {
  :root { --mobile-side-gap-v64: 42px; }
  body.site-mode .top-nav .nav-start-link {
    font-size: 12px !important;
    min-width: 78px !important;
    max-width: 84px !important;
  }
  body.site-mode .top-nav .nav-logo::after {
    font-size: 18px !important;
  }
  .mobile-tron-nav-v64__pill {
    min-width: 132px !important;
    font-size: 12px !important;
  }
}


/* ==========================================================
   MOBILE TRON V65 — micro-corrections demandées
   Base : v49 propre + module V64, référence visuelle v117.
   Ne touche pas PC / préintro. Ajustements intro intégrés ici sans couche externe.
   ========================================================== */
@media (max-width: 900px) {
  /* Intro mobile : réglage direct dans le module, sans bloc V65B/V65C */
  body.intro-active .pixel-title-screen,
  .pixel-title-screen {
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-top: clamp(0px, .6vh, 8px) !important;
    padding-bottom: clamp(10px, 1.6vh, 18px) !important;
  }

  body.intro-active .pixel-title-card,
  .pixel-title-card {
    width: min(545px, 82vw) !important;
    max-width: min(545px, 82vw) !important;
    margin: clamp(0px, .8vh, 10px) auto 0 !important;
    text-align: center !important;
  }

  body.intro-active .pixel-main-title,
  .pixel-main-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: clamp(32px, 9.8vw, 56px) !important;
    line-height: 1.08 !important;
    letter-spacing: .05em !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-shadow: 4px 4px 0 #00eaff, 8px 8px 0 #ff2be7, 12px 12px 0 #080014, 0 0 16px rgba(53,247,255,.55) !important;
  }

  body.intro-active .pixel-main-title span,
  .pixel-main-title span {
    display: block !important;
    white-space: normal !important;
  }

  body.intro-active .pixel-subtitle,
  .pixel-subtitle {
    margin-top: clamp(10px, 1.5vh, 16px) !important;
    padding: 7px 12px !important;
    font-size: clamp(13px, 3.5vw, 19px) !important;
    line-height: 1 !important;
  }

  body.intro-active .pixel-start-core,
  .pixel-start-core {
    width: min(640px, 76vw) !important;
    max-width: min(640px, 76vw) !important;
    margin-top: clamp(44px, 7.1vh, 78px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.intro-active .pixel-enter-text,
  .pixel-enter-text {
    font-size: clamp(12px, 3.25vw, 17px) !important;
    margin-bottom: 5px !important;
    line-height: 1.1 !important;
  }

  body.intro-active .pixel-hand-big,
  .pixel-hand-big {
    font-size: clamp(32px, 8.2vw, 50px) !important;
    margin: 0 auto 10px !important;
    line-height: 1 !important;
  }

  body.intro-active .pixel-press-start,
  body.intro-active .pixel-press-start:hover,
  body.intro-active .pixel-press-start:focus,
  body.intro-active .pixel-press-start:active,
  .pixel-press-start,
  .pixel-press-start:hover,
  .pixel-press-start:focus,
  .pixel-press-start:active {
    width: min(610px, 74vw) !important;
    min-width: 0 !important;
    min-height: clamp(70px, 12.2vw, 102px) !important;
    padding: 11px 14px !important;
    font-size: clamp(23px, 6.1vw, 40px) !important;
    line-height: 1 !important;
    transform: none !important;
  }

  body.intro-active .pixel-quest-scene,
  .pixel-quest-scene {
    width: min(560px, 76vw) !important;
    height: 62px !important;
    margin-top: clamp(18px, 3.2vh, 34px) !important;
  }

  body.intro-active .pixel-info-box,
  .pixel-info-box {
    width: min(690px, 80vw) !important;
    max-width: 80vw !important;
    margin-top: clamp(10px, 2vh, 24px) !important;
    padding: 14px 15px !important;
    font-size: clamp(12px, 3.15vw, 16px) !important;
    line-height: 1.26 !important;
    box-sizing: border-box !important;
  }

  body.intro-active .pixel-info-box p,
  .pixel-info-box p { margin: 4px 0 !important; }

  @media (max-height: 780px) {
    body.intro-active .pixel-main-title,
    .pixel-main-title { font-size: clamp(31px, 9.5vw, 52px) !important; }
    body.intro-active .pixel-start-core,
    .pixel-start-core { margin-top: clamp(34px, 6vh, 62px) !important; }
    body.intro-active .pixel-info-box,
    .pixel-info-box { margin-top: clamp(8px, 1.8vh, 20px) !important; font-size: clamp(11px, 3vw, 15px) !important; }
  }

  /* Mains fixes sorties de la zone des cartes */
  body.site-mode .scroll-hint {
    top: 48% !important;
    bottom: auto !important;
    height: 0 !important;
    z-index: 100001 !important;
  }
  body.site-mode .scroll-hand {
    top: 48% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    font-size: 24px !important;
  }
  body.site-mode .scroll-hand-left { left: 18px !important; }
  body.site-mode .scroll-hand-right { right: 18px !important; }

  /* Ordre demandé : Téléphone -> Image -> Adresse -> Bienvenue */
  body.site-mode #menu-tron-phone,
  body.site-mode #page-tron-phone { order: 1 !important; }
  body.site-mode .menu-cordes-stage,
  body.site-mode .page-arrival-stage { order: 2 !important; }
  body.site-mode #menu-tron-address,
  body.site-mode #page-tron-address { order: 3 !important; margin-bottom: 82px !important; }
  body.site-mode #top .hero-intro,
  body.site-mode .hero-intro { margin-top: 0 !important; }
  body.site-mode #top .hero-intro,
  body.site-mode .hero-intro { order: 4 !important; }

  /* Reborne / Galerie / Contact calés sur le gabarit game-card */
  body.site-mode #retrogaming .menu-card,
  body.site-mode #galerie-photos-videos .menu-card,
  body.site-mode #contact-info-bottom .menu-card {
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: 86% !important;
    min-height: 186px !important;
    padding: 18px 16px !important;
    margin: 0 0 0 calc((100% - 86%) / 2) !important;
    box-sizing: border-box !important;
  }

  body.site-mode #retrogaming .menu-card h2,
  body.site-mode #galerie-photos-videos .menu-card h2,
  body.site-mode #contact-info-bottom .menu-card h2 {
    font-size: clamp(14px, 3.85vw, 19px) !important;
    line-height: 1.14 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Aucun pointillé décoratif mobile ajouté : on neutralise les séparateurs parasites uniquement sur les cartes ciblées. */
  body.site-mode #retrogaming .menu-card::after,
  body.site-mode #galerie-photos-videos .menu-card::after,
  body.site-mode #contact-info-bottom .menu-card::after {
    display: none !important;
    content: none !important;
  }
}

/* ==========================================================
   V65W — corrections transition Netlify
   - écran noir conservé jusqu'au changement de page
   - bleu mobile réaligné sur les variables PC TRON
   ========================================================== */
html.tron-nav-hard-blackout,
body.tron-nav-hard-blackout {
  background: #000 !important;
  overflow: hidden !important;
}
body.tron-nav-hard-blackout > *:not(#tron-transition-overlay) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.tron-nav-hard-blackout::before,
body.tron-nav-hard-blackout::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  background: #000 !important;
  pointer-events: all !important;
}
.tron-transition-overlay.nav-hold {
  display: block !important;
  background: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  z-index: 2147483647 !important;
}

@media (max-width: 900px) {
  body.site-mode:not(.preintro-mode):not(.intro-mode)::before {
    border-color: rgba(51,246,255,.78) !important;
    box-shadow:
      0 0 18px rgba(51,246,255,.70),
      0 0 34px rgba(22,119,255,.42),
      inset 0 0 22px rgba(22,119,255,.28),
      0 0 0 1px rgba(51,246,255,.22) !important;
  }
  body.site-mode:not(.preintro-mode):not(.intro-mode)::after {
    background-image:
      linear-gradient(rgba(51,246,255,.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(51,246,255,.10) 1px, transparent 1px) !important;
  }
  body.site-mode .top-nav,
  .mobile-tron-nav-v64__submenu,
  .game-card,
  .menu-card {
    border-color: rgba(51,246,255,.82) !important;
    box-shadow:
      0 0 18px rgba(51,246,255,.36),
      inset 0 0 18px rgba(22,119,255,.12) !important;
  }
  body.site-mode .top-nav .nav-start-link,
  body.site-mode .top-nav .nav-logo,
  .mobile-tron-nav-v64__label,
  .mobile-tron-nav-v64__pill,
  body.site-mode .scroll-hand {
    color: var(--tron-cyan, #33f6ff) !important;
    text-shadow: 0 0 10px rgba(51,246,255,.92), 0 0 22px rgba(22,119,255,.55) !important;
  }
  .mobile-tron-nav-v64__pill {
    border-color: rgba(51,246,255,.88) !important;
    background: rgba(3, 12, 28, .86) !important;
    box-shadow:
      0 0 10px rgba(51,246,255,.32),
      inset 0 0 10px rgba(22,119,255,.18) !important;
  }
  .mobile-tron-nav-v64__rail {
    scrollbar-color: var(--tron-cyan, #33f6ff) transparent !important;
  }
  .mobile-tron-nav-v64__rail::-webkit-scrollbar-thumb {
    background: var(--tron-cyan, #33f6ff) !important;
  }
}


/* ==========================================================
   V66A — Arrivée propre sans pansement noir long
   On masque seulement le rendu HTML brut AVANT que le bandeau hero soit inséré.
   Dès que le cadre existe, la page redevient visible : cadre vide puis image descend.
   ========================================================== */
html.graal-internal-arriving:not(.graal-hero-mounted),
html.graal-internal-arriving:not(.graal-hero-mounted) body {
  background: #000 !important;
  overflow: hidden !important;
}
html.graal-internal-arriving:not(.graal-hero-mounted) body > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.graal-internal-arriving:not(.graal-hero-mounted)::before,
html.graal-internal-arriving:not(.graal-hero-mounted) body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  background: #000 !important;
  pointer-events: all !important;
}

/* Le cadre est visible vide avant l'animation. L'image ne démarre que quand JS ajoute .is-revealing. */
.page-arrival-hero:not(.is-revealing) .page-arrival-image {
  animation: none !important;
  clip-path: inset(0 0 100% 0) !important;
}
.page-arrival-hero:not(.is-revealing) .cordes-pixel-scan {
  animation: none !important;
  opacity: 0 !important;
}
.page-arrival-hero.is-revealing .page-arrival-image {
  animation: cordesRevealClean 3.24s linear both !important;
}
.page-arrival-hero.is-revealing .cordes-pixel-scan {
  opacity: 1 !important;
  animation: cordesScanClean 3.24s linear both !important;
}


/* ==========================================================
   V66B — bleu mobile réaligné sur le bleu PC TRON
   On remplace les cyan mobiles durs (#00eaff / #00d2ff / #00b4ff)
   par les variables PC : --tron-cyan (#33f6ff) et --tron-blue (#1677ff).
   ========================================================== */
@media (max-width: 900px) {
  body.site-mode:not(.preintro-mode):not(.intro-mode)::before {
    border-color: rgba(51, 246, 255, .78) !important;
    box-shadow:
      0 0 18px rgba(51, 246, 255, .70),
      0 0 34px rgba(22, 119, 255, .42),
      inset 0 0 22px rgba(22, 119, 255, .28),
      0 0 0 1px rgba(51, 246, 255, .22) !important;
  }

  body.site-mode:not(.preintro-mode):not(.intro-mode)::after {
    background-image:
      linear-gradient(rgba(51, 246, 255, .10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(51, 246, 255, .10) 1px, transparent 1px) !important;
  }

  body.site-mode .top-nav {
    background: rgba(1, 8, 21, .94) !important;
    border-color: rgba(51, 246, 255, .85) !important;
    box-shadow:
      0 0 18px rgba(51, 246, 255, .36),
      inset 0 0 18px rgba(22, 119, 255, .12) !important;
  }

  body.site-mode .top-nav .nav-logo,
  body.site-mode .top-nav .nav-start-link,
  .mobile-tron-nav-v64__label,
  .mobile-tron-nav-v64__pill,
  body.site-mode .scroll-hand {
    color: var(--tron-cyan) !important;
    text-shadow: 0 0 10px rgba(51, 246, 255, .92), 0 0 22px rgba(22, 119, 255, .55) !important;
  }

  .mobile-tron-nav-v64__pill,
  .mobile-tron-nav-v64__submenu,
  body.site-mode .game-card,
  body.site-mode .menu-card {
    border-color: rgba(51, 246, 255, .82) !important;
    box-shadow:
      0 0 18px rgba(51, 246, 255, .36),
      inset 0 0 18px rgba(22, 119, 255, .12) !important;
  }

  body.site-mode .game-card,
  body.site-mode .menu-card {
    background:
      linear-gradient(135deg, rgba(22,119,255,0.18), rgba(255,56,248,0.05) 42%, rgba(0,0,0,0.82)),
      rgba(2, 8, 22, 0.92) !important;
  }

  body.intro-active .pixel-main-title,
  .pixel-main-title {
    text-shadow: 4px 4px 0 var(--tron-cyan), 8px 8px 0 var(--tron-pink), 12px 12px 0 #080014, 0 0 16px rgba(51,246,255,.55) !important;
  }
}

/* ==========================================================
   V66E — corrections demandées depuis v66B
   - textes mobile : retours à la ligne sans correction orthographique
   - footer : Pop Underground ensemble à la ligne
   - rendu bleu mobile : mêmes couleurs de texte que PC, glow mobile calmé
   ========================================================== */
.mobile-line { display: inline; }
.mobile-subline { font-size: .92em; }
.footer-pop-underground { white-space: nowrap; }
.aventuriers-quote-one-line { white-space: nowrap; }

@media (max-width: 900px) {
  .mobile-line {
    display: block !important;
  }

  .mobile-subline {
    display: block !important;
    margin-top: 2px !important;
  }

  .footer-title .footer-pop-underground {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .aventuriers-quote-one-line {
    white-space: nowrap !important;
    font-size: clamp(13px, 3.65vw, 17px) !important;
  }

  /* Le PC affiche MENU et Bienvenue en blanc bleuté avec halo doux.
     Les anciens patchs mobiles forçaient ces textes en cyan saturé. */
  body.site-mode .top-nav .nav-logo,
  body.site-mode .top-nav .nav-logo::after,
  body.site-mode .hero-intro h1 {
    color: var(--tron-white, #ecfeff) !important;
    text-shadow: 0 0 8px var(--tron-cyan, #33f6ff), 0 0 18px var(--tron-blue, #1677ff) !important;
    filter: none !important;
  }

  /* Les boutons/liens restent bleus TRON, mais avec un halo moins agressif,
     proche du PC : le texte n'est plus noyé dans un cyan fluo. */
  body.site-mode .top-nav .nav-start-link,
  .mobile-tron-nav-v64__label,
  .mobile-tron-nav-v64__pill,
  body.site-mode .game-card h3,
  body.site-mode .menu-card h2,
  body.site-mode .page-heading h1,
  body.site-mode .section h2,
  body.site-mode #menu-tron-phone,
  body.site-mode #menu-tron-address,
  body.site-mode #page-tron-phone,
  body.site-mode #page-tron-address {
    text-shadow: 0 0 7px rgba(51,246,255,.62), 0 0 15px rgba(22,119,255,.36) !important;
    filter: none !important;
  }

  body.site-mode .game-card,
  body.site-mode .menu-card,
  body.site-mode .top-nav,
  .mobile-tron-nav-v64__pill,
  .mobile-tron-nav-v64__submenu {
    box-shadow: 0 0 14px rgba(51,246,255,.24), inset 0 0 16px rgba(22,119,255,.10) !important;
  }

  body.site-mode:not(.preintro-mode):not(.intro-mode)::before {
    box-shadow:
      0 0 14px rgba(51,246,255,.42),
      0 0 28px rgba(22,119,255,.28),
      inset 0 0 18px rgba(22,119,255,.18),
      0 0 0 1px rgba(51,246,255,.16) !important;
  }
}