/* ============================================================
   Accès sécurisé — expérience de scroll immersive
   ============================================================ */

:root {
  --ink: #e8e6df;
  --muted: #a8a49a;
  --steel: #6f7680;
  --accent: #c8a24a;      /* laiton / laiton de coffre-fort */
  --bg: #05060a;
  --font: "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Scène fixe : c'est ce qu'on regarde en permanence --- */
#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#scrubVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;            /* activé par le JS en mode "video" */
}

/* --- Ambiance : grain + vignette --- */
.overlay-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

.overlay-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 48%, transparent 45%, rgba(0,0,0,0.55) 100%);
}

/* --- HUD : volant de porte blindée --- */
.vault-hud {
  position: absolute;
  right: clamp(12px, 4vw, 48px);
  bottom: clamp(64px, 12vh, 120px);
  width: clamp(72px, 12vw, 130px);
  height: clamp(72px, 12vw, 130px);
  opacity: 0.0;                 /* révélé par le JS dans la zone sécurisée */
  transition: opacity .6s ease;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
  z-index: 3;
}
.vault-hud .vh-rim  { fill: none; stroke: #2a2d33; stroke-width: 6; }
.vault-hud .vh-rim2 { fill: none; stroke: #14161a; stroke-width: 10; }
.vault-hud .vh-hub  { fill: #23262c; stroke: #3a3e46; stroke-width: 2; }
.vault-hud .vh-center { fill: var(--accent); opacity: .85; }
.vault-hud .vh-spokes rect { fill: #b7bcc4; }
.vault-hud .vh-knob { fill: var(--accent); }
#vaultWheel { transform-box: fill-box; transform-origin: 100px 100px; }

/* --- Jauge de profondeur --- */
.depth-meter {
  position: absolute;
  left: clamp(12px, 4vw, 48px);
  bottom: clamp(20px, 5vh, 42px);
  width: clamp(160px, 34vw, 320px);
  z-index: 3;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.depth-label { display: block; margin-bottom: 8px; }
.depth-track {
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
}
.depth-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--steel), var(--accent));
  transition: width .1s linear;
}

/* --- Indice « descendez » --- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 6vh, 54px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  z-index: 3;
  transition: opacity .5s ease;
}
.scroll-hint svg { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity:.6 } 50% { transform: translateY(5px); opacity:1 } }

/* --- Textes narratifs --- */
#captions { position: relative; z-index: 2; pointer-events: none; }

.caption {
  position: fixed;
  top: 50%;
  max-width: min(520px, 80vw);
  padding: 22px 26px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .1s linear;
  will-change: opacity, transform;
}
.caption[data-side="center"] { left: 50%; transform: translate(-50%, calc(-50% + 24px)); text-align: center; }
.caption[data-side="left"]   { left: clamp(16px, 6vw, 90px);  transform: translateY(calc(-50% + 24px)); }
.caption[data-side="right"]  { right: clamp(16px, 6vw, 90px); text-align: right; transform: translateY(calc(-50% + 24px)); }

.caption h1, .caption h2 {
  font-weight: 300;
  letter-spacing: .04em;
  margin: 0 0 .5em;
  text-shadow: 0 2px 24px rgba(0,0,0,.9);
}
.caption h1 { font-size: clamp(38px, 8vw, 76px); }
.caption h2 { font-size: clamp(26px, 5vw, 46px); color: var(--accent); }
.caption p {
  margin: 0;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: var(--ink);
  text-shadow: 0 1px 16px rgba(0,0,0,.95);
}

.caption.final .thanks-title {
  font-size: clamp(52px, 12vw, 120px);
  color: var(--accent);
  letter-spacing: .02em;
  text-shadow: 0 0 40px rgba(200,162,74,.35), 0 2px 24px rgba(0,0,0,.9);
}

/* --- Piste de scroll invisible : donne la longueur du défilement --- */
#scrolltrack { height: 720vh; }   /* 7,2 écrans de scroll → ajustable dans main.js via CONFIG */

/* Accessibilité : réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }
}