/* =====================================================================
   SPECTRE MOVIE MAKER — Cinematic CSS
   Inspiration : James Bond Spectre (2015), gun barrel, smoking noir,
   chemise blanche, or champagne (#d4a93a).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:          #000000;
  --bg-soft:     #050505;
  --bg-card:     #0a0a0a;
  --fg:          #ffffff;
  --fg-soft:     rgba(255,255,255,0.72);
  --fg-mute:     rgba(255,255,255,0.45);
  --line:        rgba(255,255,255,0.08);
  --gold:        #d4a93a;
  --gold-soft:   #bf9933;
  --gold-dark:   #85691e;

  --shirt:       #f6efe3;       /* blanc chemise crème */
  --shirt-shade: #e4dccd;
  --shirt-deep:  #c7bea9;
  --suit:        #0b0b0b;       /* noir smoking */
  --suit-hi:     #1a1a1a;
  --suit-lo:     #030303;

  --font-serif:  'Cormorant Garamond', 'Didot', 'Trajan', serif;
  --font-ui:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease:        cubic-bezier(.76,0,.24,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --dur:         .9s;

  --pad-x:       clamp(24px, 4vw, 80px);
  --pad-y:       clamp(80px, 10vh, 160px);

  --nav-h:       88px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; background:var(--bg); }
body{
  font-family:var(--font-ui);
  font-weight:300;
  color:var(--fg);
  background:var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ border:0; background:0; padding:0; color:inherit; font:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; }

::selection{ background:var(--gold); color:#000; }

/* ---------- Typographie cinématique ---------- */
h1,h2,h3,h4,.section-title{
  font-family:var(--font-serif);
  font-weight:300;
  letter-spacing:0.01em;
  margin:0;
}
.section-title{
  font-size:clamp(42px, 7vw, 128px);
  line-height:.95;
}
.section-title em{ font-style:italic; color:var(--gold); font-weight:400; }

.eyebrow{
  display:inline-block;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  padding-bottom:18px;
  position:relative;
}
.eyebrow::after{
  content:""; position:absolute; left:0; bottom:8px;
  width:56px; height:1px; background:var(--gold);
}
.section-lede{
  font-size:clamp(15px, 1.2vw, 19px);
  color:var(--fg-soft);
  max-width:52ch;
  margin-top:24px;
}
.gold{ color:var(--gold); }

/* ---------- Boutons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:16px;
  padding:18px 30px 18px 32px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase;
  border:1px solid var(--gold);
  color:var(--fg);
  background:transparent;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .6s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.btn span{ position:relative; z-index:2; }
.btn i{
  position:relative; z-index:2; width:28px; height:1px; background:currentColor; transition:width .6s var(--ease), background var(--dur) var(--ease);
}
.btn i::after{
  content:""; position:absolute; right:0; top:-3px; width:8px; height:8px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-101%); transition:transform .7s var(--ease); z-index:1;
}
.btn:hover{ color:#000; border-color:var(--gold); }
.btn:hover::before{ transform:translateX(0); }
.btn:hover i{ width:40px; }
.btn--gold{ border-color:var(--gold); }
.btn--gold::before{ background:var(--gold); }
.btn--ghost{ border-color:rgba(255,255,255,0.3); }
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover{ color:#000; }
.btn--lg{ padding:24px 38px; font-size:12px; }

.link-gold{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
  padding-bottom:6px;
  border-bottom:1px solid rgba(212,169,58,0.25);
  transition:color .5s var(--ease), border-color .5s var(--ease), gap .5s var(--ease);
}
.link-gold span{ transition:transform .5s var(--ease); display:inline-block; }
.link-gold:hover{ color:#fff; border-color:#fff; gap:16px; }
.link-gold:hover span{ transform:translateX(4px); }

/* =================================================================
   INTRO — Gun barrel + logo reveal
   ================================================================= */
.intro{
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1.2s var(--ease), visibility 0s 1.5s;
  contain:layout paint;
}
.intro.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.intro__barrel{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  animation:barrelPan 2.2s var(--ease) forwards;
}
.intro__barrel-svg{ width:220vmax; height:220vmax; transform-origin:center; animation:barrelShrink 2.6s var(--ease) forwards; }

@keyframes barrelShrink{
  0%   { transform:scale(3); opacity:0; }
  20%  { opacity:1; }
  100% { transform:scale(.9); opacity:1; }
}
@keyframes barrelPan{
  0%   { transform:translateX(-12vw); }
  50%  { transform:translateX(6vw); }
  100% { transform:translateX(0); }
}

.intro__logo{
  position:relative; z-index:3;
  text-align:center;
  opacity:0; animation:logoFade 1.4s var(--ease) 1.6s forwards;
}
.intro__letters{
  display:flex; gap:.38em;
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(40px, 7vw, 96px);
  color:#fff; letter-spacing:.38em; padding-left:.38em;
}
.intro__letters i{
  font-style:normal; display:inline-block;
  opacity:0; transform:translateY(12px);
  animation:letterIn .7s var(--ease) forwards;
}
.intro__letters i:nth-child(1){ animation-delay:1.75s; }
.intro__letters i:nth-child(2){ animation-delay:1.85s; }
.intro__letters i:nth-child(3){ animation-delay:1.95s; }
.intro__letters i:nth-child(4){ animation-delay:2.05s; }
.intro__letters i:nth-child(5){ animation-delay:2.15s; }
.intro__letters i:nth-child(6){ animation-delay:2.25s; }
.intro__letters i:nth-child(7){ animation-delay:2.35s; }

.intro__sub{
  display:block; margin-top:16px; color:var(--gold);
  font-family:var(--font-ui); font-size:11px; letter-spacing:.6em;
  opacity:0; animation:letterIn .7s var(--ease) 2.6s forwards;
}
.intro__loader{
  position:absolute; left:50%; bottom:10vh; transform:translateX(-50%);
  width:120px; height:1px; background:rgba(255,255,255,.15); overflow:hidden;
}
.intro__loader span{
  display:block; height:100%; width:0; background:var(--gold);
  animation:loaderFill 2.6s var(--ease) forwards;
}
@keyframes logoFade{ to{ opacity:1; } }
@keyframes letterIn{ to{ opacity:1; transform:none; } }
@keyframes loaderFill{ 0%{ width:0; } 100%{ width:100%; } }

/* =================================================================
   NAVIGATION
   ================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
  padding:0 var(--pad-x);
  transition:background .6s var(--ease), backdrop-filter .6s var(--ease), border-color .6s var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav.is-scrolled{
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__brand{
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--font-serif); line-height:1;
}
.nav__brand-main{
  font-size:22px; font-weight:400; letter-spacing:.5em;
  padding-left:.5em;
}
.nav__brand-sub{
  font-family:var(--font-ui); font-size:9px; letter-spacing:.5em;
  color:var(--gold); padding-left:.5em;
}

.nav__menu ul{ display:flex; gap:clamp(16px, 2.4vw, 44px); }
.nav__menu a{
  position:relative;
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--fg-soft);
  padding:10px 0;
  transition:color .5s var(--ease);
}
.nav__menu a::before{
  content:attr(data-label);
  font-size:9px; color:var(--gold); opacity:.6; letter-spacing:.2em;
  transform:translateY(-2px);
}
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:4px; height:1px;
  width:0; background:var(--gold); transition:width .5s var(--ease);
}
.nav__menu a:hover,
.nav__menu a.is-active{ color:#fff; }
.nav__menu a:hover::after,
.nav__menu a.is-active::after{ width:100%; }

.nav__toggle{
  display:none;
  width:40px; height:40px;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
}
.nav__toggle span{ display:block; width:28px; height:1px; background:#fff; transition:transform .5s var(--ease), width .5s var(--ease), opacity .3s; }
.nav__toggle span:nth-child(2){ width:20px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); width:28px; }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); width:28px; }

@media (max-width:960px){
  .nav__toggle{ display:flex; }
  .nav__menu{
    position:fixed; top:0; right:0; bottom:0;
    width:min(400px, 88vw);
    background:rgba(5,5,5,.96); backdrop-filter:blur(24px);
    transform:translateX(100%); transition:transform .7s var(--ease);
    padding:calc(var(--nav-h) + 32px) 40px 40px;
    border-left:1px solid var(--line);
  }
  .nav__menu.is-open{ transform:translateX(0); }
  .nav__menu ul{ flex-direction:column; gap:24px; }
  .nav__menu a{ font-size:14px; }
  .nav__menu a::before{ font-size:10px; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  padding:var(--nav-h) var(--pad-x) 0;
  display:flex; align-items:center;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
}
.hero__slide{
  position:absolute; inset:0;
  background-position:center; background-size:cover;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.8s var(--ease), transform 7s var(--ease);
  filter:brightness(.55) contrast(1.1) saturate(.9);
}
.hero__slide.is-active{ opacity:1; transform:scale(1); }

.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,.95) 100%);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
  animation:grain 6s steps(8) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); }
  12%{ transform:translate(-8%, 4%); }
  25%{ transform:translate(5%, -6%); }
  37%{ transform:translate(-7%, 2%); }
  50%{ transform:translate(9%, 5%); }
  62%{ transform:translate(-4%, -8%); }
  75%{ transform:translate(6%, 3%); }
  87%{ transform:translate(-9%, -2%); }
  100%{ transform:translate(0,0); }
}

/* HUD */
.hero__hud{
  position:absolute; inset:calc(var(--nav-h) + 24px) var(--pad-x) 32px; z-index:3;
  pointer-events:none;
}
.hud{
  position:absolute;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.38em;
  color:var(--gold); text-transform:uppercase;
  padding:8px 12px; border:1px solid rgba(212,169,58,0.35);
  backdrop-filter:blur(8px);
  background:rgba(0,0,0,.2);
}
.hud--tl{ top:0; left:0; }
.hud--tr{ top:0; right:0; }
.hud--bl{ bottom:0; left:0; }
.hud--br{ bottom:0; right:0; }
.hud--tl::before{
  content:"•"; color:#ff2f2f; margin-right:10px;
  animation:blink 1.2s infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@media (max-width:700px){
  .hud--tr, .hud--br{ display:none; }
  .hud{ font-size:9px; letter-spacing:.25em; }
}

.hero__inner{
  position:relative; z-index:2;
  max-width:1200px; width:100%;
  padding:40px 0 100px;
}
.hero__pre{
  display:inline-block;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.45em;
  text-transform:uppercase; color:var(--gold);
  padding:8px 16px; border:1px solid rgba(212,169,58,.4);
  margin-bottom:28px;
}
.hero__title{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(56px, 11vw, 200px);
  line-height:.92; letter-spacing:-.01em;
  margin:0 0 36px;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:2px; }
.hero__title .line > span{ display:inline-block; }
.hero__title em{ font-style:italic; color:var(--gold); }

.hero__tagline{
  max-width:520px;
  font-size:clamp(15px, 1.3vw, 19px);
  color:var(--fg-soft); line-height:1.5;
  margin:0 0 40px;
}
.hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; }

.hero__scroll{
  position:absolute; right:var(--pad-x); bottom:40px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--fg-soft);
  font-family:var(--font-ui); font-size:9px; letter-spacing:.45em;
  text-transform:uppercase;
}
.hero__scroll span{ writing-mode:vertical-rl; transform:rotate(180deg); }
.hero__scroll-line{ width:1px; height:80px; background:rgba(255,255,255,.15); overflow:hidden; position:relative; }
.hero__scroll-line i{
  position:absolute; top:-40px; left:0; width:100%; height:40px;
  background:linear-gradient(180deg, transparent, var(--gold));
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ top:-40px; } 100%{ top:100%; }
}
@media (max-width:900px){ .hero__scroll{ display:none; } }

/* =================================================================
   SUIT SECTION — Smoking qui s'ouvre au scroll (v3 — split 50/50)
   ================================================================= */
.suit{
  position:relative;
  height:350vh;        /* 3.5 écrans de scroll pour animation lente/fluide */
  background:#000;
}
.suit__stage{
  position:sticky; top:0;
  width:100%; height:100vh;
  background:#000;
  overflow:hidden;
  display:block;
  z-index:1;
  isolation:isolate;
}

/* ===== FOND : CHEMISE ===== */
.suit__shirt{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 35%, #ffffff 0%, #faf5e8 35%, #ede5ce 70%, #cfc5a7 100%);
  z-index:1;
}
/* Texture tissu : lignes verticales très subtiles */
.suit__shirt::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(0,0,0,0.025) 6px 7px,
      transparent 7px 12px);
  opacity:.5;
  mix-blend-mode:multiply;
}
/* Ombres douces sur les bords pour donner de la profondeur */
.suit__shirt::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
}

/* Col de chemise en V */
.suit__collar{
  position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:min(560px, 40vw);
  aspect-ratio: 400 / 140;
  z-index:2;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.suit__collar svg{ width:100%; height:100%; display:block; }

/* Boutons de chemise alignés verticalement */
.suit__shirt-btns{
  position:absolute;
  top:18%; left:50%; transform:translateX(-50%);
  width:14px; height:70%;
  display:flex; flex-direction:column; justify-content:space-between;
  align-items:center;
  z-index:2;
  pointer-events:none;
}
.suit__shirt-btns i{
  width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0%, #e8e0c8 40%, #a89a70 80%, #6b5f3e 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.4),
    inset 0 0 2px rgba(0,0,0,0.3);
  border:0.5px solid rgba(107, 95, 62, 0.4);
}

/* ===== NOEUD PAPILLON ===== */
.suit__bowtie{
  position:absolute;
  top:7%; left:50%; transform:translateX(-50%);
  width:min(140px, 12vw);
  aspect-ratio: 200 / 80;
  z-index:5;
  will-change:transform, opacity;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.suit__bowtie svg{ width:100%; height:100%; display:block; }

/* ===== LES 2 PANS DU VESTON ===== */
.suit__half{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  z-index:4;
  will-change:transform;
  filter:drop-shadow(0 0 30px rgba(0,0,0,0.8));
}
.suit__half svg{
  width:100%; height:100%; display:block;
}
.suit__half--left{
  left:0;
  transform-origin:left center;
}
.suit__half--right{
  right:0;
  transform-origin:right center;
}

/* ===== LOGO SPECTRE brodé sur le pan gauche (HTML, pas SVG)
        → Conserve ses proportions quelle que soit la largeur du viewport.
        Le parent .suit__half--left ayant un transform animé,
        le logo suit automatiquement le mouvement du pan.
   ===== */
.suit__logo{
  position:absolute;
  top:48%;                          /* Juste sous la poche (qui est à 40%) */
  left:50%;
  transform:translateX(-50%);       /* Centré horizontalement sur le pan */
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none;
  z-index:2;                        /* Au-dessus du SVG du pan */
  /* Décalage centré sur le pan gauche (qui fait 50% de la largeur).
     Le logo doit être centré sur CE demi-pan, pas sur le veston entier. */
}
.suit__logo-main{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(14px, 1.8vw, 26px);
  letter-spacing:clamp(3px, 0.35vw, 6px);
  color:#ffffff;
  opacity:0.92;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
  white-space:nowrap;
}
.suit__logo-sub{
  font-family:var(--font-ui);
  font-weight:400;
  font-size:clamp(6px, 0.6vw, 9px);
  letter-spacing:clamp(2px, 0.3vw, 5px);
  color:var(--gold);
  opacity:0.85;
  white-space:nowrap;
}
.suit__logo-line{
  display:block;
  width:60px; height:1px;
  background:rgba(212,169,58,0.4);
  margin-top:2px;
}
/* En mobile, ajustement pour rester visible */
@media(max-width:700px){
  .suit__logo{ top:46%; gap:3px; }
  .suit__logo-line{ width:40px; }
}

/* ===== OMBRE CENTRALE ===== */
.suit__center-shadow{
  position:absolute;
  top:0; bottom:0;
  left:calc(50% - 4px);
  width:8px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,0.85) 30%,
      rgba(0,0,0,1) 50%,
      rgba(0,0,0,0.85) 70%,
      transparent 100%);
  z-index:4.5;
  will-change:opacity;
  pointer-events:none;
}

/* Contenu éditorial (posé sur la chemise après ouverture) */
.suit__content{
  position:absolute;
  inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + 40px) clamp(24px, 6vw, 100px) 80px;
  z-index:5;
  pointer-events:none;
  opacity:0; transform:translateY(24px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.suit--revealed .suit__content{
  opacity:1; transform:none;
  pointer-events:auto;
}
.suit__eyebrow{
  display:inline-block;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--gold-dark);
  margin:0 0 24px;
  padding:6px 14px;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(133,105,30,0.25);
  backdrop-filter:blur(4px);
}
.suit__title{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(40px, 6vw, 96px);
  line-height:1; letter-spacing:-.01em;
  color:#0a0a0a;
  margin:0 0 32px;
  max-width:900px;
  text-shadow:0 2px 20px rgba(255,255,255,0.5);
}
.suit__title em{
  font-style:italic;
  color:var(--gold-dark);
  font-weight:400;
}
.suit__para{
  font-family:var(--font-ui); font-weight:300;
  font-size:clamp(15px, 1.2vw, 19px);
  line-height:1.7;
  color:#222;
  max-width:62ch;
  margin:0 auto 40px;
}
.suit__content .link-gold{
  color:var(--gold-dark);
  border-bottom-color:rgba(133,105,30,0.3);
}
.suit__content .link-gold:hover{
  color:#000;
  border-bottom-color:#000;
}

/* Indicateur d'ouverture (APERTURE 00%) */
.suit__indicator{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px; z-index:10;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold);
  padding:10px 18px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(212,169,58,0.3);
  backdrop-filter:blur(8px);
  transition:background .8s var(--ease), color .8s var(--ease), border-color .8s var(--ease);
}
/* Quand la chemise est révélée, l'indicateur passe en noir sur fond crème */
.suit--revealed .suit__indicator{
  color:#222;
  background:rgba(255,255,255,0.6);
  border-color:rgba(0,0,0,0.15);
}
.suit__ind-bar{
  width:140px; height:2px;
  background:rgba(255,255,255,0.12);
  position:relative; overflow:hidden;
  transition:background .8s var(--ease);
}
.suit--revealed .suit__ind-bar{ background:rgba(0,0,0,0.1); }
.suit__ind-bar i{
  display:block; height:100%; width:0%;
  background:var(--gold);
  transition:width 0.1s linear;
}
.suit__ind-value{
  min-width:40px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Mobile : simplification */
@media (max-width:700px){
  .suit{ height:250vh; }
  .suit__title{ font-size:clamp(32px, 9vw, 54px); }
  .suit__para{ font-size:14px; }
  .suit__indicator{ bottom:16px; font-size:9px; letter-spacing:.3em; padding:8px 12px; }
  .suit__ind-bar{ width:80px; }
}

/* =================================================================
   MISSIONS
   ================================================================= */
.missions{
  padding:var(--pad-y) var(--pad-x);
  background:#000;
  border-top:1px solid var(--line);
}
.missions__header{
  max-width:900px;
  margin:0 auto 80px;
  text-align:center;
}
.missions__header .eyebrow::after{ left:50%; transform:translateX(-50%); }
.missions__header .section-lede{ margin-left:auto; margin-right:auto; }

.missions__grid{
  max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media(max-width:1100px){ .missions__grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:640px){ .missions__grid{ grid-template-columns:1fr; } }

.mission{
  position:relative;
  background:#000;
  padding:44px 30px 28px;
  min-height:320px;
  display:flex; flex-direction:column;
  transition:background .7s var(--ease), transform .7s var(--ease);
  overflow:hidden;
}
.mission::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(212,169,58,.06) 0%, transparent 60%);
  opacity:0; transition:opacity .7s var(--ease);
}
.mission:hover{ background:#050505; }
.mission:hover::before{ opacity:1; }
.mission__num{
  font-family:var(--font-serif); font-style:italic;
  color:var(--gold); font-size:14px; letter-spacing:.4em;
  margin-bottom:20px;
}
.mission h3{
  font-family:var(--font-serif); font-weight:400;
  font-size:26px; line-height:1.15;
  margin:0 0 14px;
}
.mission p{
  font-size:14px; line-height:1.6; color:var(--fg-soft);
  margin:0 0 24px; flex:1;
}
.mission__icon{
  width:48px; height:48px; color:var(--gold); opacity:.5;
  transition:opacity .5s, transform .7s var(--ease);
  margin-top:auto;
}
.mission:hover .mission__icon{ opacity:1; transform:translateX(6px) rotate(-3deg); }

.mission--more{
  background:
    linear-gradient(135deg, rgba(212,169,58,.12) 0%, rgba(0,0,0,.9) 100%);
  justify-content:center; align-items:center; gap:18px; text-align:center;
}
.mission--more span{
  font-family:var(--font-serif); font-size:32px; font-style:italic; color:#fff;
}

/* =================================================================
   TEASER / Portfolio
   ================================================================= */
.teaser{
  padding:var(--pad-y) var(--pad-x);
  background:#030303;
  display:grid;
  grid-template-columns:minmax(280px, 1fr) 1.3fr;
  gap:clamp(40px, 6vw, 120px);
  align-items:center;
  max-width:1500px; margin:0 auto;
}
@media(max-width:960px){ .teaser{ grid-template-columns:1fr; } }

.teaser__col--text{ padding-right:20px; }
.teaser__ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

.teaser__col--cards{
  display:flex; flex-direction:column; gap:24px;
}
.tcard{
  position:relative; display:block; aspect-ratio:16/9;
  overflow:hidden;
  transform:translateY(0);
  transition:transform .8s var(--ease);
}
.tcard__img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.05); filter:brightness(.65) saturate(.9);
  transition:transform 1.4s var(--ease), filter .8s var(--ease);
}
.tcard:hover .tcard__img{ transform:scale(1); filter:brightness(.9) saturate(1.05); }
.tcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85));
}
.tcard__meta{
  position:absolute; left:32px; right:32px; bottom:26px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  z-index:2;
}
.tcard__meta span{
  font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--gold);
}
.tcard__meta h3{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(28px, 3vw, 46px);
  line-height:1;
  transition:transform .6s var(--ease);
}
.tcard:hover .tcard__meta h3{ transform:translateX(10px); }
.tcard[data-depth="2"]{ margin-left:clamp(20px, 4vw, 60px); }
.tcard[data-depth="3"]{ margin-left:clamp(40px, 8vw, 120px); }
/* En mobile : annuler le décalage cascade pour éviter le débordement horizontal */
@media(max-width:960px){
  .tcard[data-depth="2"],
  .tcard[data-depth="3"]{ margin-left:0; }
}

/* =================================================================
   REEL
   ================================================================= */
.reel{
  padding:var(--pad-y) var(--pad-x);
  background:#000;
  border-top:1px solid var(--line);
}
.reel__head{ max-width:1000px; margin:0 auto 60px; }
.reel__player{
  position:relative;
  max-width:1400px; margin:0 auto;
  aspect-ratio:21/9;
  background:#000;
  overflow:hidden;
  border:1px solid var(--line);
}
.reel__poster{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.55) contrast(1.08);
  transition:filter .8s var(--ease), transform 1.4s var(--ease);
}
.reel__player:hover .reel__poster{ filter:brightness(.7); transform:scale(1.02); }
.reel__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  z-index:3;
  width:140px; height:140px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .6s var(--ease);
}
.reel__play::before{
  content:""; position:absolute; inset:-12px; border:1px solid rgba(212,169,58,.35); border-radius:50%;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ transform:scale(.9); opacity:1; }
  100%{ transform:scale(1.25); opacity:0; }
}
.reel__play:hover{ transform:translate(-50%, -50%) scale(1.08); }

.reel__timecode{
  position:absolute; right:22px; bottom:16px; z-index:3;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.3em;
  color:var(--gold); padding:6px 10px;
  background:rgba(0,0,0,.4); backdrop-filter:blur(6px);
  border:1px solid rgba(212,169,58,.25);
}

.reel__iframe iframe{ width:100%; height:100%; border:0; position:absolute; inset:0; }

/* =================================================================
   MANIFESTO
   ================================================================= */
.manifesto{
  padding:clamp(80px, 12vh, 180px) var(--pad-x);
  background:
    linear-gradient(180deg, #000 0%, #050403 100%);
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.manifesto__inner{ max-width:1000px; margin:0 auto; }
.manifesto blockquote{
  margin:28px 0 0;
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(32px, 4.6vw, 76px);
  line-height:1.1; letter-spacing:-.005em;
}
.manifesto blockquote em{ font-style:italic; color:var(--gold); }
.manifesto footer{
  margin-top:40px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.4em;
  color:var(--fg-mute); text-transform:uppercase;
}

/* =================================================================
   PRESS — Marquee
   ================================================================= */
.press{
  padding:clamp(60px, 8vh, 100px) 0;
  text-align:center;
  background:#000;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.press .eyebrow{ margin-bottom:40px; }
.press .eyebrow::after{ left:50%; transform:translateX(-50%); }

.press__marquee{
  position:relative;
  width:100%; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.press__track{
  display:flex; align-items:center; gap:80px;
  width:max-content;
  animation:marquee 40s linear infinite;
}
.press__track img{
  height:44px; width:auto; opacity:.55;
  filter:grayscale(1) brightness(1.4);
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.press__track img:hover{ opacity:1; filter:grayscale(0); }
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* =================================================================
   CTA FINAL
   ================================================================= */
.cta-final{
  position:relative;
  padding:clamp(100px, 16vh, 200px) var(--pad-x);
  overflow:hidden;
}
.cta-final__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(212,169,58,.12) 0%, transparent 60%),
    url("../images/hero-5.jpg") center/cover no-repeat;
  filter:brightness(.3) contrast(1.1);
}
.cta-final__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.85) 100%);
}
.cta-final__inner{
  max-width:900px; margin:0 auto; text-align:center;
  position:relative; z-index:2;
}
.cta-final .eyebrow::after{ left:50%; transform:translateX(-50%); }
.cta-final .section-lede{ margin-left:auto; margin-right:auto; margin-bottom:44px; }

/* =================================================================
   FOOTER
   ================================================================= */
.foot{
  padding:80px var(--pad-x) 32px;
  background:#000;
  border-top:1px solid var(--line);
  position:relative;
}
.foot__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:60px;
  max-width:1400px; margin:0 auto 60px;
}
@media(max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media(max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }

.foot__brand{
  font-family:var(--font-serif); font-size:28px; letter-spacing:.4em; margin:0 0 6px; padding-left:.4em;
}
.foot__sub{ font-family:var(--font-ui); font-size:10px; letter-spacing:.45em; color:var(--gold); text-transform:uppercase; margin:0 0 24px; }
.foot__legal{ color:var(--fg-mute); font-size:12px; line-height:1.7; max-width:32ch; }
.foot__col h4{
  font-family:var(--font-ui); font-size:11px; letter-spacing:.35em; text-transform:uppercase;
  margin:0 0 22px; color:var(--fg-mute);
}
.foot__col ul li{
  margin-bottom:12px;
  font-size:13px; color:var(--fg-soft);
}
.foot__col ul li a{ color:var(--fg-soft); border-bottom:1px solid transparent; transition:color .3s, border-color .3s; padding-bottom:2px; }
.foot__col ul li a:hover{ color:var(--gold); border-color:var(--gold); }

.foot__social{
  display:flex; gap:10px; margin-top:18px;
}
.foot__social a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  font-family:var(--font-ui); font-size:10px; letter-spacing:.1em;
  color:var(--fg-soft);
  transition:all .4s var(--ease);
}
.foot__social a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

.foot__bar{
  max-width:1400px; margin:0 auto;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.15em; color:var(--fg-mute); text-transform:uppercase;
}

/* =================================================================
   Reveal animations (GSAP will toggle .is-in)
   ================================================================= */
[data-reveal]{ opacity:0; transform:translateY(32px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* =================================================================
   UTILITAIRES PARTAGÉS (autres pages)
   ================================================================= */
.page-header{
  position:relative;
  min-height:62vh;
  padding:calc(var(--nav-h) + 60px) var(--pad-x) 100px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.page-header__bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  filter:brightness(.4) contrast(1.1);
  transform:scale(1.05);
}
.page-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.9) 100%);
}
.page-header__inner{ max-width:1400px; width:100%; }
.page-header h1{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(54px, 10vw, 180px);
  line-height:.9; letter-spacing:-.01em;
  margin:16px 0 0;
}
.page-header h1 em{ font-style:italic; color:var(--gold); }

.breadcrumb{
  display:flex; gap:12px; align-items:center;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--fg-mute);
}
.breadcrumb a{ color:var(--fg-soft); transition:color .3s; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span{ color:var(--gold); }

/* Gallery cards */
.gallery{
  padding:var(--pad-y) var(--pad-x);
  background:#000;
}
.gallery__filter{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-bottom:60px;
}
.gallery__filter button{
  padding:12px 22px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--fg-soft);
  border:1px solid var(--line);
  transition:all .4s var(--ease);
}
.gallery__filter button:hover,
.gallery__filter button.is-active{
  background:var(--gold); color:#000; border-color:var(--gold);
}

.gallery__grid{
  columns: 3 320px;
  column-gap:12px;
  max-width:1600px; margin:0 auto;
}
.gallery__item{
  position:relative; display:block; margin-bottom:12px;
  break-inside:avoid;
  overflow:hidden;
  background:#0a0a0a;
}
.gallery__item img{
  width:100%; height:auto;
  filter:grayscale(0.2) brightness(.85);
  transition:filter .8s var(--ease), transform 1.6s var(--ease);
}
.gallery__item:hover img{ filter:grayscale(0) brightness(1); transform:scale(1.03); }
.gallery__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.7));
  opacity:0; transition:opacity .6s;
}
.gallery__item:hover::after{ opacity:1; }
.gallery__item .tag{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--font-ui); font-size:9px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(6px); transition:all .5s var(--ease);
}
.gallery__item:hover .tag{ opacity:1; transform:none; }

/* Video grid */
.videos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));
  gap:24px;
  padding:var(--pad-y) var(--pad-x);
  max-width:1500px; margin:0 auto;
}
.vcard{
  position:relative; cursor:pointer; overflow:hidden;
  aspect-ratio:16/9; background:#0a0a0a;
  transition:transform .6s var(--ease);
}
.vcard:hover{ transform:translateY(-4px); }
.vcard img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease), filter .6s; filter:brightness(.7) contrast(1.05); }
.vcard:hover img{ transform:scale(1.05); filter:brightness(.85); }
.vcard__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border:1px solid rgba(212,169,58,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  transition:all .5s var(--ease);
}
.vcard:hover .vcard__play{ background:var(--gold); border-color:var(--gold); }
.vcard__play svg{ width:22px; height:22px; fill:#fff; margin-left:3px; transition:fill .4s; }
.vcard:hover .vcard__play svg{ fill:#000; }
.vcard__meta{
  position:absolute; left:20px; right:20px; bottom:18px;
  color:#fff; z-index:2;
  display:flex; flex-direction:column; gap:4px;
}
.vcard__title{
  display:block;
  font-family:var(--font-serif); font-size:22px; font-weight:400;
  line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.vcard__sub{
  display:block;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
/* Gradient sombre en bas pour lisibilité */
.vcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.85) 100%);
  z-index:1;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.96); backdrop-filter:blur(14px);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.is-open{ display:flex; }
.lightbox__content{
  position:relative; max-width:min(1400px, 95vw); max-height:90vh;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox img,
.lightbox iframe{ max-width:100%; max-height:100%; box-shadow:0 20px 60px rgba(0,0,0,.8); }
.lightbox iframe{ width:100%; aspect-ratio:16/9; border:0; }
.lightbox__close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px; border:1px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  transition:all .4s var(--ease);
}
.lightbox__close:hover{ background:var(--gold); color:#000; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border:1px solid rgba(212,169,58,.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:22px;
  transition:all .4s var(--ease);
}
.lightbox__nav:hover{ background:var(--gold); color:#000; border-color:var(--gold); }
.lightbox__nav--prev{ left:16px; }
.lightbox__nav--next{ right:16px; }

/* Formulaires */
.form{
  max-width:780px; margin:0 auto;
  padding:var(--pad-y) 0;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.form__field{
  position:relative; margin-bottom:28px;
}
.form__field label{
  display:block;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.3em;
  color:var(--fg-mute); text-transform:uppercase;
  margin-bottom:10px;
}
.form__field input,
.form__field select,
.form__field textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:14px 0; color:#fff; font-family:var(--font-ui); font-size:15px;
  transition:border-color .5s var(--ease);
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus{
  outline:0; border-color:var(--gold);
}
.form__field textarea{ min-height:140px; resize:vertical; }
.form__field select{ appearance:none; background:#050505; border:1px solid var(--line); padding:14px; }
.form__submit{
  width:auto; padding:18px 36px;
  background:var(--gold); color:#000;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  border:1px solid var(--gold);
  cursor:pointer;
  transition:all .5s var(--ease);
}
.form__submit:hover{ background:transparent; color:var(--gold); }

.form__status{
  margin-top:20px;
  padding:14px 20px;
  font-size:13px; color:var(--gold);
  border-left:2px solid var(--gold);
  background:rgba(212,169,58,0.06);
  display:none;
}
.form__status.is-visible{ display:block; }
.form__status.is-error{ color:#ff6b6b; border-color:#ff6b6b; background:rgba(255,107,107,.06); }

/* Divider cinéma */
.cine-divider{
  display:flex; align-items:center; gap:20px;
  max-width:1400px; margin:0 auto;
  padding:40px var(--pad-x); color:var(--fg-mute);
}
.cine-divider__line{ flex:1; height:1px; background:var(--line); }
.cine-divider__label{
  font-family:var(--font-ui); font-size:10px; letter-spacing:.5em; text-transform:uppercase;
}

/* FAQ accordion */
.faq{ padding:var(--pad-y) var(--pad-x); max-width:1000px; margin:0 auto; }
.faq__item{
  border-bottom:1px solid var(--line);
}
.faq__q{
  width:100%; text-align:left;
  padding:28px 50px 28px 0;
  font-family:var(--font-serif); font-size:22px; font-weight:400; color:#fff;
  position:relative;
  transition:color .4s var(--ease);
}
.faq__q::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--font-ui); font-size:24px; color:var(--gold); transition:transform .4s var(--ease);
}
.faq__item.is-open .faq__q::after{ content:"−"; }
.faq__item.is-open .faq__q{ color:var(--gold); }
.faq__a{
  max-height:0; overflow:hidden;
  transition:max-height .6s var(--ease);
}
.faq__a p{
  padding:0 0 28px; color:var(--fg-soft); max-width:68ch; line-height:1.7;
}

/* Tarifs cards */
.pricing{
  padding:var(--pad-y) var(--pad-x);
  max-width:1400px; margin:0 auto;
}
.pricing__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
}
.price-card{
  position:relative;
  padding:50px 36px 36px;
  background:#050505;
  border:1px solid var(--line);
  transition:all .5s var(--ease);
  overflow:hidden;
}
.price-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:translateX(-100%); transition:transform .9s var(--ease);
}
.price-card:hover{ border-color:var(--gold); background:#080808; }
.price-card:hover::before{ transform:translateX(0); }
.price-card.is-featured{
  background:linear-gradient(180deg, rgba(212,169,58,.08), #050505 70%);
  border-color:rgba(212,169,58,.35);
}
.price-card__badge{
  position:absolute; top:20px; right:20px;
  font-family:var(--font-ui); font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); padding:6px 10px; border:1px solid var(--gold);
}
.price-card h3{
  font-family:var(--font-serif); font-weight:400; font-size:32px;
  margin:0 0 8px;
}
.price-card__sub{
  font-family:var(--font-ui); font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin:0 0 30px;
}
.price-card__price{
  font-family:var(--font-serif); font-weight:300;
  font-size:56px; line-height:1;
  margin:0 0 6px;
}
.price-card__price small{ font-size:14px; color:var(--fg-mute); font-family:var(--font-ui); margin-left:6px; }
.price-card__note{
  font-size:12px; color:var(--fg-mute); margin:0 0 28px;
}
.price-card ul{ margin:28px 0 36px; }
.price-card ul li{
  padding:10px 0;
  font-size:14px; color:var(--fg-soft);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.price-card ul li::before{
  content:""; width:14px; height:1px; background:var(--gold);
}
.price-card .btn{ width:100%; justify-content:center; }

/* Testimonials */
.testimonials{
  padding:var(--pad-y) var(--pad-x);
  max-width:1400px; margin:0 auto;
}
.testimonials__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:24px;
}
.testimonial{
  padding:36px 32px;
  background:#050505;
  border:1px solid var(--line);
  position:relative;
  transition:border-color .5s var(--ease);
}
.testimonial:hover{ border-color:rgba(212,169,58,.4); }
.testimonial__stars{ color:var(--gold); font-size:14px; letter-spacing:3px; margin-bottom:20px; }
.testimonial__body{
  font-family:var(--font-serif); font-style:italic;
  font-size:19px; line-height:1.55; color:#eee; margin:0 0 26px;
}
.testimonial__author{
  font-family:var(--font-ui); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.testimonial__meta{
  font-size:11px; color:var(--fg-mute); margin-top:4px;
}
.testimonial__case{
  position:absolute; top:22px; right:22px;
  font-family:var(--font-ui); font-size:9px; letter-spacing:.3em; color:var(--fg-mute);
}

/* Contact split */
.contact{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:90vh;
}
@media(max-width:900px){ .contact{ grid-template-columns:1fr; } }
.contact__side{
  padding:var(--pad-y) var(--pad-x);
  background:#050505;
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--line);
}
.contact__form{
  padding:var(--pad-y) var(--pad-x);
  background:#000;
}
.contact__classified{
  font-family:var(--font-ui); font-size:10px; letter-spacing:.5em;
  color:#ff2f2f; padding:6px 10px; border:1px solid #ff2f2f;
  display:inline-block; margin-bottom:32px;
}
.contact__info{
  margin-top:50px;
  display:grid; gap:26px;
}
.contact__info-item{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.contact__info-item h4{
  font-family:var(--font-ui); font-size:10px; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold); margin:0 0 6px;
}
.contact__info-item p{ margin:0; font-size:14px; color:var(--fg-soft); }

/* =================================================================
   HORIZONTAL VIDEO SCROLLER (pour suite de vidéos sur home éventuellement)
   ================================================================= */
.film-scroller{
  overflow:hidden;
  padding:40px 0;
}
.film-scroller__track{
  display:flex; gap:20px;
}
.film-scroller__item{
  flex:0 0 auto; width:clamp(280px, 30vw, 460px);
  aspect-ratio:9/16;
  overflow:hidden; position:relative;
  background:#0a0a0a;
}
.film-scroller__item img{ width:100%; height:100%; object-fit:cover; }

/* =================================================================
   TARIFS — BOOKING ALERT (plus de 50% réservé)
   ================================================================= */
.booking-alert{
  background:linear-gradient(90deg, rgba(255,47,47,0.12), rgba(212,169,58,0.08), rgba(255,47,47,0.12));
  border-top:1px solid rgba(255,47,47,0.3);
  border-bottom:1px solid rgba(255,47,47,0.3);
  padding:18px var(--pad-x);
  overflow:hidden;
}
.booking-alert__inner{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-family:var(--font-ui); font-size:12px; letter-spacing:.08em;
}
.booking-alert__dot{
  width:10px; height:10px; border-radius:50%; background:#ff2f2f;
  box-shadow:0 0 0 0 rgba(255,47,47,.6);
  animation:alertPulse 1.6s var(--ease) infinite;
}
@keyframes alertPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,47,47,.7); }
  100%{ box-shadow:0 0 0 14px rgba(255,47,47,0); }
}
.booking-alert__label{
  font-size:11px; letter-spacing:.4em; color:#ff2f2f;
  padding:4px 10px; border:1px solid rgba(255,47,47,.5);
  text-transform:uppercase; font-weight:500;
}
.booking-alert__text{ color:var(--fg-soft); flex:1; min-width:220px; }
.booking-alert__text strong{ color:var(--gold); font-weight:500; }

/* =================================================================
   FORMULAS (3 forfaits Prestige / Diamond / Crystal)
   ================================================================= */
.formulas{
  padding:var(--pad-y) var(--pad-x);
  max-width:1500px; margin:0 auto;
}
.formulas .missions__header{ max-width:900px; margin:0 auto 70px; text-align:center; }
.formulas .missions__header .eyebrow::after{ left:50%; transform:translateX(-50%); }
.formulas .missions__header .section-lede{ margin-left:auto; margin-right:auto; }

.formulas__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
@media(max-width:1100px){ .formulas__grid{ grid-template-columns:1fr; max-width:540px; margin:0 auto; } }

.formula{
  position:relative;
  background:#050505;
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform .6s var(--ease), border-color .6s var(--ease);
}
.formula:hover{ transform:translateY(-6px); border-color:rgba(212,169,58,.35); }

.formula__head{
  padding:32px 30px 20px;
  text-align:center;
  background:#0b0b0b;
  border-bottom:1px solid var(--line);
}
.formula__name{
  font-family:var(--font-ui); font-weight:500;
  font-size:18px; letter-spacing:.32em; margin:0 0 10px;
  color:#fff;
}
.formula__tag{
  font-family:var(--font-serif); font-style:italic;
  color:var(--gold); font-size:18px; margin:0; font-weight:300;
}
.formula__tag em{ font-style:italic; font-weight:400; }

.formula__intro{
  padding:20px 30px 0;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--fg-mute); margin:0;
  text-align:center;
}

.formula__features{
  padding:20px 30px 36px;
  flex:1;
}
.formula__features li{
  padding:16px 0;
  font-size:15px; color:var(--fg-soft);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.formula__features li:last-child{ border-bottom:0; }
.formula__features li span{ display:block; font-size:12px; color:var(--gold); margin-top:4px; font-family:var(--font-ui); letter-spacing:.05em; }

.formula__cta{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:22px 30px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase;
  background:var(--gold); color:#000;
  border:0; width:100%;
  transition:background .5s var(--ease), color .5s var(--ease), gap .5s var(--ease);
}
.formula__cta i{ width:24px; height:1px; background:currentColor; position:relative; }
.formula__cta i::after{
  content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
}
.formula__cta:hover{ background:#fff; gap:20px; }

/* Featured (Diamond) */
.formula--featured{
  border-color:rgba(212,169,58,0.5);
  background:linear-gradient(180deg, rgba(212,169,58,.06), #050505 60%);
  transform:scale(1.02);
}
.formula--featured:hover{ transform:scale(1.02) translateY(-6px); }
.formula__badge{
  position:absolute; top:-1px; right:-1px;
  padding:8px 18px;
  background:var(--gold); color:#000;
  font-family:var(--font-ui); font-size:9px; letter-spacing:.4em;
  text-transform:uppercase; font-weight:500;
  z-index:2;
}
/* Premium (Crystal) */
.formula--premium{
  background:linear-gradient(180deg, rgba(255,255,255,.04), #050505 60%);
  border-color:rgba(255,255,255,0.2);
}
.formula__badge--premium{
  background:#fff; color:#000;
}

/* =================================================================
   OPTIONS (grille 11 options sur-mesure)
   ================================================================= */
.options{
  padding:var(--pad-y) var(--pad-x);
  max-width:1400px; margin:0 auto;
  border-top:1px solid var(--line);
}
.options__head{
  text-align:center; margin-bottom:70px;
}
.options__head .eyebrow::after{ left:50%; transform:translateX(-50%); }
.options__head .section-lede{ margin-left:auto; margin-right:auto; font-style:italic; color:var(--gold); }

.options__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  max-width:1200px; margin:0 auto;
}
.option{
  position:relative;
  background:#000;
  padding:28px 24px;
  display:flex; align-items:center; gap:18px;
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.option:hover{ background:#0a0a0a; transform:translateY(-2px); }
.option__diamond{
  width:22px; height:22px; color:var(--fg-mute);
  flex-shrink:0;
  transition:color .5s var(--ease);
}
.option:hover .option__diamond{ color:var(--gold); }
.option__diamond--new{ color:var(--gold); }
.option__new{
  position:absolute; top:10px; right:12px;
  font-family:var(--font-ui); font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); padding:3px 8px; border:1px solid var(--gold);
}
.option h4{
  font-family:var(--font-ui); font-size:13px; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-soft);
  margin:0;
}
.option:hover h4{ color:#fff; }

.options__footnote{
  margin-top:60px; text-align:center;
}
.options__micro{
  margin-top:20px; font-size:13px; color:var(--fg-mute); font-style:italic;
}

/* =================================================================
   GATE — formulaire d'accès aux tarifs (split layout)
   ================================================================= */
.gate{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#020202;
}
@media(max-width:1100px){ .gate{ grid-template-columns:1fr; } }

.gate__side{
  padding:clamp(60px, 10vh, 120px) var(--pad-x);
  background:
    linear-gradient(180deg, rgba(212,169,58,0.04) 0%, transparent 40%),
    #050505;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
  /* Sticky : la sidebar reste visible quand on scroll à travers le form */
  position:sticky;
  top:0;
  align-self:start;       /* empêche le grid de stretcher la sidebar */
  max-height:100vh;
  overflow-y:auto;
  z-index:2;
}
@media(max-width:1100px){
  .gate__side{
    position:static;
    max-height:none;
    overflow:visible;
    padding:var(--pad-y) var(--pad-x);
    border-right:0; border-bottom:1px solid var(--line);
  }
}

.gate__side .contact__classified{ margin-bottom:28px; }
.gate__side .section-title{ font-size:clamp(42px, 6vw, 88px); }

.gate__why{
  margin-top:44px; padding:24px 0 0;
  border-top:1px solid var(--line);
}
.gate__why h4{
  font-family:var(--font-ui); font-size:11px; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold);
  margin:0 0 18px;
}
.gate__why ul{
  display:flex; flex-direction:column; gap:14px;
}
.gate__why li{
  padding-left:22px; position:relative;
  font-size:14px; color:var(--fg-soft); line-height:1.55;
}
.gate__why li::before{
  content:""; position:absolute; left:0; top:10px;
  width:10px; height:1px; background:var(--gold);
}

.gate__badges{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:12px; margin-top:44px;
}
.gate__badge{
  padding:20px 14px;
  background:rgba(212,169,58,0.06);
  border:1px solid rgba(212,169,58,0.25);
  text-align:center;
}
.gate__badge strong{
  display:block;
  font-family:var(--font-serif); font-size:24px; font-weight:400;
  color:var(--gold); margin-bottom:4px;
}
.gate__badge span{
  display:block;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--fg-mute);
}

.gate__form{
  padding:var(--pad-y) var(--pad-x);
  background:#000;
  display:flex; align-items:flex-start;
}
.gate__form .form{
  width:100%; max-width:720px; margin:0;
  padding:0;
}

/* Checkbox custom */
.form__checkbox{
  display:flex; gap:14px; align-items:flex-start;
  font-size:12px; color:var(--fg-mute);
  margin:20px 0 32px;
  cursor:pointer;
  line-height:1.5;
}
.form__checkbox input[type="checkbox"]{
  margin-top:4px; accent-color:var(--gold);
  width:16px; height:16px; cursor:pointer;
}

.form__legal{
  margin-top:24px;
  font-size:11px; color:var(--fg-mute); line-height:1.7;
}

/* FAQ green hover (façon sejelm.fr) */
.faq__q:hover{ color:var(--gold); }

/* =================================================================
   SUCCESS BANNER (tarifs.html - affichage après soumission)
   ================================================================= */
.success-banner{
  background:linear-gradient(90deg, rgba(40,167,69,0.14), rgba(212,169,58,0.10), rgba(40,167,69,0.14));
  border-top:1px solid rgba(40,167,69,0.3);
  border-bottom:1px solid rgba(40,167,69,0.3);
  padding:24px var(--pad-x);
  overflow:hidden;
}
.success-banner__inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:20px;
  font-family:var(--font-ui); font-size:14px;
  color:var(--fg-soft);
}
.success-banner__icon{
  width:44px; height:44px; border-radius:50%;
  background:#28a745; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700;
  flex-shrink:0;
  box-shadow:0 0 0 0 rgba(40,167,69,.6);
  animation:successPulse 2s ease-out infinite;
}
@keyframes successPulse{
  0%{ box-shadow:0 0 0 0 rgba(40,167,69,.5); }
  100%{ box-shadow:0 0 0 18px rgba(40,167,69,0); }
}
.success-banner__text{
  display:flex; flex-direction:column; gap:4px;
  line-height:1.4;
}
.success-banner__text strong{
  font-family:var(--font-serif); font-size:19px; color:#fff; font-weight:400;
}
.success-banner__text span{ font-size:13px; color:var(--fg-mute); }

/* =================================================================
   FOTOSTUDIO IFRAME (page reserver.html)
   -----------------------------------------------------------------
   Le formulaire Fotostudio contient ~13 champs + bouton + reCAPTCHA.
   Pour éviter un scroll interne imbriqué (scroll dans scroll qui bug
   souvent sur mobile), on donne à l'iframe une hauteur GÉNÉREUSE
   qui couvre même le plus grand formulaire Fotostudio.
   ================================================================= */
.gate__form--iframe{
  padding:clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px);
  display:block;
}
.fotostudio-wrapper{
  position:relative;
  background:#fff;
  border:1px solid rgba(212,169,58,.25);
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(212,169,58,.1);
  overflow:hidden;
  border-radius:2px;
}
.fotostudio-wrapper iframe{
  display:block;
  width:100%;
  border:0;
  background:#fff;
  /* Formulaire Fotostudio #4018 : 13 champs (nom, prenom, email, tél, date,
     type, lieu, musiciens, rappel, adresse {rue/CP/ville/pays}, invités,
     budget, source) + reCAPTCHA + bouton + RGPD + newsletter
     Hauteurs calibrées empiriquement selon la largeur disponible. */

  /* Desktop très large (>1400px) : form en 2 colonnes → plus court */
  height:1600px;
  min-height:1600px;
}
/* Label au-dessus de l'iframe */
.fotostudio-wrapper::before{
  content:"● DOSSIER · ACCÈS TARIFS";
  display:block;
  padding:14px 20px;
  font-family:var(--font-ui); font-size:10px; letter-spacing:.4em;
  color:#ff2f2f; text-transform:uppercase;
  background:#0a0a0a;
  border-bottom:1px solid rgba(255,47,47,.3);
  text-align:center;
}
/* Desktop moyen (1100-1400px) : form encore en 2 cols mais plus compact */
@media(max-width:1400px){
  .fotostudio-wrapper iframe{
    height:1800px;
    min-height:1800px;
  }
}
/* Tablette (700-1100px) : form passe en 1 colonne, plus haut */
@media(max-width:1100px){
  .fotostudio-wrapper iframe{
    height:2400px;
    min-height:2400px;
  }
}
/* Mobile */
@media(max-width:700px){
  .fotostudio-wrapper iframe{
    height:2650px;
    min-height:2650px;
  }
}
/* Petit mobile */
@media(max-width:420px){
  .fotostudio-wrapper iframe{
    height:2850px;
    min-height:2850px;
  }
}