/* ============================================================
   VIKTOR — Les expériences introuvables
   Système : nocturne éditorial. Noir absolu · or unique · un sérif.
   Retenue, espace, rythme. Aucun gadget.
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --ink-soft:#0e0d0c;
  --gold:#c2a36b;
  --gold-bright:#dcc18a;
  --cream:#e9e3d7;
  --dim:rgba(233,227,215,.56);
  --faint:rgba(233,227,215,.30);
  --line:rgba(233,227,215,.13);
  --gold-line:rgba(194,163,107,.32);

  --serif:'Cormorant Garamond','Frank Ruhl Libre',serif;
  --sans:'Jost','Heebo',system-ui,sans-serif;

  --gut:clamp(22px,6vw,80px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[lang="he"]{ --serif:'Frank Ruhl Libre',serif; --sans:'Heebo',system-ui,sans-serif; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--ink); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-weight:300; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#0a0a0a; }

/* ---------- Primitives typographiques ---------- */
.eyebrow{
  font-family:var(--sans); font-weight:400; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}
html[lang="he"] .eyebrow{ letter-spacing:.1em; }
.idx{
  font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.3em;
  color:var(--gold); white-space:nowrap;
}
.display{
  font-family:var(--serif); font-weight:300; line-height:1.08;
  letter-spacing:.005em; margin:0; text-wrap:balance;
}
.display em{ font-style:italic; color:var(--gold); }
.lead{
  font-family:var(--serif); font-weight:300; font-size:clamp(20px,2.4vw,28px);
  line-height:1.5; color:var(--dim); margin:0;
}

/* ---------- Boutons ---------- */
.btn{
  font-family:var(--sans); font-weight:400; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  display:inline-flex; align-items:center; gap:11px;
  padding:17px 32px; cursor:pointer; border:1px solid var(--gold);
  color:var(--gold); background:transparent; border-radius:1px;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s, transform .45s var(--ease);
}
.btn svg{ width:16px; height:16px; }
.btn--solid{ background:var(--gold); color:#0a0a0a; }
.btn:hover{ background:var(--gold-bright); border-color:var(--gold-bright); color:#0a0a0a; }
.btn--ghost{ border-color:var(--line); color:var(--dim); }
.btn--ghost:hover{ background:transparent; border-color:var(--gold); color:var(--gold); }
.btn:active{ transform:scale(.985); }
html[lang="he"] .btn{ letter-spacing:.06em; }

/* ---------- Structure ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.chapter{ padding-block:clamp(96px,15vh,200px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule-gold{ height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); border:0; }

/* En-tête de chapitre (système d'index) */
.chead{ max-width:980px; }
.chead__top{ display:flex; align-items:center; gap:20px; margin-bottom:clamp(26px,4vw,44px); }
.chead__top .ln{ flex:1; height:1px; background:var(--line); }
.chead .display{ font-size:clamp(32px,5vw,64px); }
.chead .lead{ margin-top:26px; max-width:46ch; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{
  background:rgba(10,10,10,.6); backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  padding-top:15px; padding-bottom:15px; border-bottom-color:var(--line);
}
.hdr__brand{ display:flex; align-items:center; gap:13px; }
.hdr__brand img{ height:22px; width:auto; }
.hdr__word{ font-family:var(--serif); font-weight:500; font-size:21px; letter-spacing:.4em; padding-left:.4em; color:var(--cream); }
html[lang="he"] .hdr__word{ letter-spacing:.05em; }
.hdr__right{ display:flex; align-items:center; gap:20px; }
.lang{ display:flex; align-items:center; gap:3px; }
.lang button{
  background:none; border:0; cursor:pointer; padding:6px 7px;
  color:var(--faint); font-family:var(--sans); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; transition:color .3s;
}
.lang button:hover{ color:var(--cream); }
.lang button[aria-current="true"]{ color:var(--gold); }
.lang .sep{ color:var(--line); font-size:11px; }
.hdr .btn{ padding:12px 22px; font-size:12px; }
.hdr__cta-ico{ display:none; width:18px; height:18px; }
@media(max-width:760px){
  .hdr__word{ display:none; }
  .hdr .btn .lbl{ display:none; }
  .hdr .btn{ padding:12px 13px; gap:0; }
  .hdr__cta-ico{ display:block; }
}

/* ============================================================
   SCÈNE — intro intégrée (beat 0 du scrollytelling)
   ============================================================ */
.scene__intro{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(30px,5vh,56px); text-align:center; padding:0 var(--gut);
  will-change:opacity, transform;
}
.scene__logo{ width:min(360px,74vw); }
.scene__tag{
  font-family:var(--serif); font-weight:300; color:var(--cream);
  font-size:clamp(23px,3.4vw,38px); line-height:1.4; letter-spacing:.01em;
  max-width:20ch; margin:0; text-wrap:balance;
}
.scene__tag em{ font-style:italic; color:var(--gold); }
@keyframes heroLogo{ 0%{ opacity:0; transform:translateY(14px); filter:blur(10px); } 100%{ opacity:1; transform:none; filter:blur(0); } }
@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }
.scrollcue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--faint); font-family:var(--sans); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
}
.scrollcue .ln{ width:1px; height:42px; background:linear-gradient(var(--gold),transparent); transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.35); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
@media(prefers-reduced-motion:no-preference){
  .scene__logo{ opacity:0; animation:heroLogo 2.1s var(--ease) .25s forwards; }
  .scene__tag{ opacity:0; animation:heroFade 1.5s var(--ease) 1.15s forwards; }
  .scrollcue{ opacity:0; animation:heroFade 1s var(--ease) 2s forwards; }
  .scrollcue .ln{ animation:cue 2.6s var(--ease) infinite; }
}

/* ============================================================
   SCÈNE — scrollytelling épinglé (la pièce maîtresse)
   ============================================================ */
.scene{ position:relative; height:480vh; }
.scene__stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.scene__media{ position:absolute; inset:0; background-size:cover; background-position:center 46%; will-change:opacity, transform; }
.scene__m1{ background-image:url('assets/arrival.jpg'); background-position:center; opacity:0; }
.scene__m2{ background-image:url('assets/chauffeur-door.jpg'); background-position:center; opacity:0; }
.scene__m3{ background-image:url('assets/hero-road.jpg'); background-position:center 46%; opacity:0; }
.scene__m4{ background-image:url('assets/hero-wide.jpg'); background-position:center 38%; opacity:0; }
.scene__scrim{ position:absolute; inset:0; z-index:2;
  background:radial-gradient(78% 70% at 50% 50%, rgba(10,10,10,.42) 0%, rgba(10,10,10,.18) 50%, rgba(10,10,10,.82) 100%); }
.scene__phrases{ position:absolute; inset:0; z-index:3; }
.scene__phrase{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(960px,88vw); margin:0; text-align:center; opacity:0;
  font-family:var(--serif); font-weight:300; font-size:clamp(28px,5.2vw,66px);
  line-height:1.18; color:var(--cream); text-wrap:balance; text-shadow:0 6px 40px rgba(0,0,0,.55);
  will-change:opacity, transform;
}
.scene__phrase .hr{ color:var(--gold); }
.scene__rail{ position:absolute; left:50%; bottom:7vh; transform:translateX(-50%); width:160px; height:1px; background:var(--line); z-index:3; overflow:hidden; }
.scene__rail span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold-line),var(--gold-bright)); }
/* Fallback / mouvement réduit */
.scene:not(.ready), .scene.reduced{ height:auto; }
.scene:not(.ready) .scene__stage, .scene.reduced .scene__stage{ position:relative; height:auto; min-height:auto; padding:18vh var(--gut); }
.scene:not(.ready) .scene__phrase, .scene.reduced .scene__phrase{ position:relative; left:auto; top:auto; transform:none; opacity:1; width:auto; margin:0 auto clamp(40px,8vh,84px); }
.scene:not(.ready) .scene__intro, .scene.reduced .scene__intro{ position:relative; inset:auto; opacity:1; transform:none; margin-bottom:clamp(40px,8vh,84px); }
.scene:not(.ready) .scrollcue, .scene.reduced .scrollcue{ display:none; }
.scene:not(.ready) .scene__m2, .scene:not(.ready) .scene__m3, .scene:not(.ready) .scene__m4, .scene.reduced .scene__m2, .scene.reduced .scene__m3, .scene.reduced .scene__m4{ display:none; }
.scene:not(.ready) .scene__m1, .scene.reduced .scene__m1{ opacity:1; }
.scene:not(.ready) .scene__rail, .scene.reduced .scene__rail{ display:none; }

/* ============================================================
   01 — PRINCIPE (manifeste)
   ============================================================ */
.principe{ text-align:center; }
.principe .display{ font-size:clamp(34px,6vw,82px); max-width:16ch; margin:0 auto; }
.principe .lead{ margin:clamp(34px,5vw,52px) auto 0; max-width:40ch; }
.principe .whisper{ display:block; margin-top:18px; font-size:.82em; color:var(--faint); font-style:italic; }

/* ============================================================
   02 — EXPÉRIENCE (4 piliers, éditorial)
   ============================================================ */
/* Section 01 — centrée */
#experience .chead{ max-width:780px; margin-inline:auto; text-align:center; }
#experience .chead__top{ justify-content:center; }
#experience .chead__top .ln{ display:none; }
#experience .chead .lead{ margin-left:auto; margin-right:auto; }
/* Features en chips */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.6vw,18px); margin-top:clamp(40px,5vw,66px); }
.chip{ display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border:1px solid var(--gold-line); border-radius:999px; font-family:var(--sans); font-weight:300; font-size:14px; letter-spacing:.03em; color:var(--cream); white-space:nowrap; transition:border-color .4s var(--ease), background .4s var(--ease); }
.chip::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:0 0 auto; }
.chip:hover{ border-color:var(--gold); }
@media(max-width:420px){ .chip{ font-size:13px; padding:12px 20px; } }

/* ============================================================
   03 — FORMULES
   ============================================================ */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); margin-top:clamp(34px,4vw,58px); align-items:stretch; }
.tier{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(30px,3vw,46px) clamp(24px,2.4vw,38px);
  border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(180deg, rgba(233,227,215,.028), rgba(233,227,215,0) 62%);
  transition:border-color .55s var(--ease), transform .55s var(--ease), background .55s var(--ease);
}
.tier:hover{ border-color:var(--gold-line); transform:translateY(-6px); }
.tier__idx{ font-family:var(--serif); font-style:italic; font-size:15px; letter-spacing:.04em; color:var(--gold); opacity:.68; margin-bottom:clamp(16px,1.7vw,24px); }
.tier__name{ font-family:var(--serif); font-weight:300; font-size:clamp(28px,3.2vw,38px); line-height:1.05; color:var(--cream); margin:0 0 8px; }
.tier__sub{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--dim); margin:0 0 24px; }
.tier__desc{ font-size:14px; color:var(--dim); line-height:1.66; margin:0; flex:1 1 auto; }
.tier__price{ display:flex; flex-direction:column; gap:9px; margin-top:clamp(28px,3vw,42px); padding-top:22px; border-top:1px solid var(--line); }
.tier__price .from{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.tier__price .amt{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3vw,42px); color:var(--cream); line-height:1; letter-spacing:.01em; }
.tier__price .cur{ font-family:var(--serif); font-size:.5em; color:var(--gold); }
.tier--feature{ border-color:var(--gold-line); background:linear-gradient(180deg, rgba(194,163,107,.10), rgba(194,163,107,.012) 72%); }
.tier--feature .tier__name, .tier--feature .tier__idx{ color:var(--gold); opacity:1; }
.tier--feature .tier__price{ border-top-color:var(--gold-line); }
.tier-foot{ text-align:center; margin-top:clamp(40px,6vw,68px); font-family:var(--serif); font-style:italic; font-size:clamp(17px,2.2vw,22px); color:var(--dim); }
@media(max-width:820px){
  /* Mobile : carrousel horizontal scroll-snap, cartes débordant jusqu'aux bords d'écran */
  .tiers{
    display:flex; grid-template-columns:none; gap:14px;
    margin-inline:calc(-1 * var(--gut)); padding:6px var(--gut) 12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .tiers::-webkit-scrollbar{ display:none; }
  .tier{ flex:0 0 78%; max-width:330px; scroll-snap-align:center; }
  .tier:hover{ transform:none; }
}
@media(max-width:420px){ .tier{ flex-basis:85%; } }

/* ============================================================
   04 — SIGNATURES (carte / menu)
   ============================================================ */
.menu{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(46px,7vw,110px); margin-top:clamp(20px,3vw,40px); }
.menu__item{ display:flex; align-items:baseline; gap:12px; padding:19px 0; border-bottom:1px solid var(--line); }
.menu__name{ font-family:var(--sans); font-weight:300; font-size:15px; color:var(--cream); letter-spacing:.01em; white-space:nowrap; }
.menu__dots{ flex:1; height:0; border-bottom:1px dotted var(--gold-line); transform:translateY(-3px); }
.menu__price{ font-family:var(--serif); font-size:19px; color:var(--gold); white-space:nowrap; }
@media(max-width:680px){ .menu{ grid-template-columns:1fr; } }

/* ============================================================
   05 — RITUEL (planche pleine page)
   ============================================================ */
.spread{ position:relative; min-height:96vh; display:flex; align-items:center; overflow:hidden; }
.spread__bg{ position:absolute; inset:0; background-image:url('assets/chauffeur-door.jpg'); background-size:cover; background-position:center; }
.spread__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(10,10,10,.82) 38%, rgba(10,10,10,.34) 72%, rgba(10,10,10,.55) 100%); }
.spread__copy{ position:relative; z-index:2; max-width:560px; padding:clamp(70px,12vh,130px) var(--gut); }
.spread__copy .display{ font-size:clamp(28px,4.2vw,52px); margin:24px 0 0; }
.spread__copy p{ margin:26px 0 0; color:var(--dim); font-size:16px; line-height:1.7; max-width:42ch; }
.spread__scarce{ margin-top:38px; display:inline-flex; align-items:center; gap:16px; border:1px solid var(--gold-line); padding:16px 24px; }
.spread__scarce b{ font-family:var(--serif); font-weight:400; font-size:38px; color:var(--gold); line-height:1; }
.spread__scarce span{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); line-height:1.4; max-width:18ch; }

/* ============================================================
   CONTACT (finale)
   ============================================================ */
.finale{ text-align:center; padding-block:clamp(110px,18vh,220px); }
.finale .display{ font-size:clamp(34px,6vw,82px); max-width:14ch; margin:0 auto; }
.finale__whisper{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,2.2vw,23px); color:var(--dim); margin:28px auto 0; max-width:30ch; }
.finale__num{ display:inline-flex; align-items:center; gap:16px; margin-top:clamp(40px,6vw,56px);
  font-family:var(--sans); font-weight:300; font-size:clamp(24px,4vw,38px); letter-spacing:.1em; color:var(--cream); }
.finale__num .wa{ width:clamp(44px,6vw,56px); height:clamp(44px,6vw,56px); border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold); transition:background .4s var(--ease), color .4s; }
.finale__num:hover .wa{ background:var(--gold); color:#0a0a0a; }
.finale__num .wa svg{ width:52%; height:52%; }
.finale__cta{ margin-top:clamp(38px,5vw,52px); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding:clamp(48px,7vw,72px) var(--gut); text-align:center; border-top:1px solid var(--line); }
.foot img{ height:62px; width:auto; margin:0 auto 18px; }
.foot__site{ font-family:var(--sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.foot__legal{ font-family:var(--sans); font-size:11px; color:var(--faint); margin-top:18px; opacity:.7; }

/* ============================================================
   Reveal éditorial (une seule langue de motion)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; } .reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }
html[data-motion="off"] .reveal{ opacity:1 !important; transform:none !important; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ============================================================
   Fixe : progression + FAB
   ============================================================ */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:95;
  background:linear-gradient(90deg,var(--gold-line),var(--gold-bright)); }
html[lang="he"] .progress{ left:auto; right:0; }
.fab{ position:fixed; right:24px; bottom:24px; z-index:75; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  background:rgba(14,13,12,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--gold-line); box-shadow:0 16px 40px -14px rgba(0,0,0,.7);
  opacity:0; transform:translateY(18px) scale(.7); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s, color .3s; }
.fab svg{ width:52%; height:52%; }
.fab.show{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:var(--gold); color:#0a0a0a; }
@media(max-width:760px){ .fab{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:52px; height:52px; } }

/* Grain optionnel (off par défaut) */
html[data-grain="on"] body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   MOBILE-FIRST — affinage portrait (cible : 75% du trafic)
   - Cadrage des images de scène recalé sur le sujet en portrait
     (sinon le cover centré coupe chauffeur / voiture / couple).
   - Story resserrée, typographie et rythme calibrés au pouce.
   ============================================================ */
@media(max-width:760px){
  /* Scène : recadrage portrait sur le sujet de chaque plan */
  .scene{ height:380vh; }
  .scene__m1{ background-position:62% 50%; } /* chauffeur + Mercedes, à droite */
  .scene__m2{ background-position:54% 50%; } /* gant sur la poignée, centre */
  .scene__m3{ background-position:40% 60%; } /* voiture, bas-gauche de la route */
  .scene__m4{ background-position:37% 46%; } /* couple, centre-gauche */

  /* Scrim un peu plus dense au centre : lisibilité du texte sur petit écran */
  .scene__scrim{ background:radial-gradient(92% 75% at 50% 50%, rgba(10,10,10,.50) 0%, rgba(10,10,10,.28) 46%, rgba(10,10,10,.86) 100%); }

  .scene__phrase{ font-size:clamp(27px,7.6vw,42px); line-height:1.22; width:90vw; }
  .scene__tag{ font-size:clamp(22px,6.2vw,32px); max-width:16ch; }
  .scene__logo{ width:min(300px,66vw); }
  .scrollcue{ bottom:calc(22px + env(safe-area-inset-bottom)); }
  .scene__rail{ bottom:calc(5vh + env(safe-area-inset-bottom)); width:120px; }

  /* Rythme éditorial resserré (les 96–200px desktop tassent trop sur mobile) */
  .chapter{ padding-block:clamp(72px,11vh,120px); }
  .chead__top{ gap:14px; margin-bottom:26px; }

  /* Cibles tactiles : sélecteur de langue */
  .lang button{ padding:10px 9px; }
  .lang{ gap:1px; }
}

@media(max-width:430px){
  .scene__phrase{ font-size:clamp(26px,7.4vw,36px); }
  .chead .display{ font-size:clamp(30px,8.4vw,42px); }
  .finale .display{ font-size:clamp(32px,9vw,46px); }
  /* Le numéro WhatsApp ne doit jamais déborder */
  .finale__num{ flex-wrap:wrap; justify-content:center; gap:14px; font-size:clamp(22px,7vw,32px); }
}