:root{
  --bg: #0a0a0f;
  --bg-2: #0f0f17;
  --ink: #f3efe6;
  --ink-dim: #a39e93;
  --line: #2a2a35;
  --magenta: #ec4899;
  --magenta-2: #d946ef;
  --cyan: #22d3ee;
  --violet: #7c3aed;
  --warm: #f5e6d3;
}

*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body{
  background: var(--bg);
  color: var(--ink);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body{
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  cursor: auto;
}

.font-display{ font-family: 'Fraunces', serif; font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; }
.font-display-wonk{ font-family: 'Fraunces', serif; font-optical-sizing: auto; font-variation-settings: "SOFT" 100, "WONK" 1; }
.font-mono{ font-family: 'JetBrains Mono', monospace; }

::selection{ background: var(--magenta); color: #0a0a0f; }

#loader{
  position: fixed; inset: 0; background: var(--bg); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
#loader .lbl{ font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .25em; color: var(--ink-dim); text-transform: uppercase; }
#loader .barwrap{ width: 220px; height: 1px; background: var(--line); margin-top: 18px; overflow: hidden; }
#loader .bar{ width: 0%; height: 100%; background: var(--ink); }

.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

.marquee{ display: flex; overflow: hidden; gap: 4rem; }
.marquee-track{ display: flex; flex-shrink: 0; gap: 4rem; align-items: center; will-change: transform; }
.marquee-item{ flex-shrink: 0; white-space: nowrap; }

#hero-video-wrap{ will-change: transform, clip-path, border-radius; overflow: hidden; }

/* Vidéos décoratives : pas de gros bouton play iOS ; lecture uniquement auto (muted requis) */
video:not([controls]){
  pointer-events: none;
}
video:not([controls])::-webkit-media-controls-start-playback-button,
video:not([controls])::-webkit-media-controls-panel,
video:not([controls])::-webkit-media-controls-enclosure{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.hero-headline span.word{ display: inline-block; overflow: hidden; }
.hero-headline .word > span{ display: inline-block; will-change: transform; }

.glow-magenta{ box-shadow: 0 0 80px -10px rgba(236,72,153,.55), 0 0 24px -4px rgba(236,72,153,.35); }
.glow-cyan{ box-shadow: 0 0 80px -10px rgba(34,211,238,.5), 0 0 24px -4px rgba(34,211,238,.3); }

.scene{
  min-height: 100vh;
  overflow-x: clip;
}
.scene-img{ will-change: transform; }
.scene-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.ul{ position: relative; display: inline-block; }
.ul::after{
  content:''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform-origin: left; transform: scaleX(1); transition: transform .5s cubic-bezier(.7,0,.3,1);
}
.ul:hover::after{ transform-origin: right; transform: scaleX(0); }

.btn{
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 1rem 1.75rem; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-family: 'Manrope', sans-serif; font-weight: 500;
  letter-spacing: .02em;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
  position: relative; overflow: hidden;
}
.btn::before{
  content:''; position:absolute; inset: 0; background: var(--magenta);
  transform: translateY(101%); transition: transform .5s cubic-bezier(.7,0,.3,1); z-index: 0;
}
.btn:hover::before{ transform: translateY(0); }
.btn span, .btn svg{ position: relative; z-index: 1; transition: color .35s; }
.btn:hover{ color: var(--ink); }

.btn-ghost{
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 1rem 1.75rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink);
  font-family: 'Manrope', sans-serif; font-weight: 500;
  letter-spacing: .02em;
  transition: border-color .3s, color .3s, background .3s;
}
.btn-ghost:hover{ border-color: var(--ink); }

.vline{ width: 1px; background: linear-gradient(to bottom, transparent, var(--line) 20%, var(--line) 80%, transparent); }
.hline{ height: 1px; background: linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent); }

.pack{
  position: relative; border: 1px solid var(--line); border-radius: 28px;
  padding: 2.5rem; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  backdrop-filter: blur(10px);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s;
  overflow: hidden;
}
.pack::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 200px at 0% 0%, rgba(236,72,153,.18), transparent 60%);
  opacity: 0; transition: opacity .5s;
}
.pack:hover{ transform: translateY(-6px); border-color: rgba(243,239,230,.25); }
.pack:hover::before{ opacity: 1; }
.pack.featured{
  background: linear-gradient(180deg, rgba(236,72,153,.08), rgba(124,58,237,.05));
  border-color: rgba(236,72,153,.35);
}
.pack.featured::before{ opacity: .6; }

.reveal{ opacity: 0; transform: translateY(40px); }

.mask-line{ overflow: hidden; display: block; }
.mask-line > *{ display: block; will-change: transform; }

.tag{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .25em;
  color: var(--ink-dim);
}
.tag::before{
  content:''; width: 6px; height: 6px; background: var(--magenta); border-radius: 999px;
  box-shadow: 0 0 12px var(--magenta);
}

.scenenum{
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: transparent; -webkit-text-stroke: 1px rgba(243,239,230,.35);
  line-height: .85;
}

@keyframes floaty {
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-12px,0); }
}
.floaty{ animation: floaty 8s ease-in-out infinite; }

.step{ position: relative; padding-left: 4rem; }
.step::before{
  content: attr(data-num); position: absolute; left: 0; top: -.2rem;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-dim);
  letter-spacing: .25em;
}
.step::after{
  content:''; position: absolute; left: 2.6rem; top: .55rem; width: .7rem; height: 1px; background: var(--magenta);
}

.nav-blur{
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(180deg, rgba(10,10,15,.65), rgba(10,10,15,.25));
}

.aurora{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.aurora::before, .aurora::after{
  content:''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(80px); opacity: .35; mix-blend-mode: screen;
}
.aurora::before{ background: radial-gradient(circle, var(--magenta), transparent 60%); top: -20%; left: -10%; }
.aurora::after{ background: radial-gradient(circle, var(--cyan), transparent 60%); bottom: -25%; right: -15%; }

.xxl{
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 300; font-style: italic;
}

.ital{ font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 300; }

.dot::before{ content:'·'; color: var(--magenta); margin-right: .6rem; font-weight: 700; }

.scroll-hint{ writing-mode: vertical-rl; transform: rotate(180deg); }

.pin-spacer-fix > *{ min-height: 100vh; }

#mobile-menu-toggle{
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.burger-line{
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
}

.mobile-menu{
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 70;
  background: rgba(10,10,15,.92);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.mobile-menu.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-panel{
  display: flex;
  flex-direction: column;
  padding: .8rem 1.5rem 1.2rem;
}

.mobile-menu-link{
  border-bottom: 1px solid var(--line);
  padding: .95rem .1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (min-width: 768px){
  #mobile-menu-toggle{
    display: none;
  }

  .mobile-menu{
    display: none !important;
  }
}