/* ============================================================
   VIKTOR v2 — chargé APRÈS viktor.css, ne fait que compléter.
   Même système (noir, or unique, Cormorant + Jost) ; ce qui change :
   scène plus courte, images optimisées, sections d'information.
   ============================================================ */

/* ---------- Scène : plus courte, images AVIF/WebP, texte plus lisible ---------- */
.v2 .scene{ height:340vh; }
.v2 .scene__m1{ background-image:url('assets/v2/arrival.jpg'); background-image:image-set(url('assets/v2/arrival.avif') type('image/avif'), url('assets/v2/arrival.webp') type('image/webp'), url('assets/v2/arrival.jpg') type('image/jpeg')); }
.v2 .scene__m2{ background-image:url('assets/v2/chauffeur-door.jpg'); background-image:image-set(url('assets/v2/chauffeur-door.avif') type('image/avif'), url('assets/v2/chauffeur-door.webp') type('image/webp'), url('assets/v2/chauffeur-door.jpg') type('image/jpeg')); }
.v2 .scene__m3{ background-image:url('assets/v2/hero-road.jpg'); background-image:image-set(url('assets/v2/hero-road.avif') type('image/avif'), url('assets/v2/hero-road.webp') type('image/webp'), url('assets/v2/hero-road.jpg') type('image/jpeg')); }
.v2 .scene__m4{ background-image:url('assets/v2/hero-wide.jpg'); background-image:image-set(url('assets/v2/hero-wide.avif') type('image/avif'), url('assets/v2/hero-wide.webp') type('image/webp'), url('assets/v2/hero-wide.jpg') type('image/jpeg')); }
.v2 .scene__phrase{ text-shadow:0 2px 6px rgba(0,0,0,.7), 0 8px 48px rgba(0,0,0,.85); }
@media(max-width:760px){
  .v2 .scene{ height:300vh; }
  /* En portrait, une photo paysage en plein écran est agrandie ~3×, plus encore en DPR 3 :
     le mobile reçoit donc la PLEINE résolution (« -m », ombres relevées), jamais la réduite. */
  .v2 .scene__m1{ background-image:image-set(url('assets/v2/arrival-m.avif') type('image/avif'), url('assets/v2/arrival-m.webp') type('image/webp')); }
  .v2 .scene__m2{ background-image:image-set(url('assets/v2/chauffeur-door-m.avif') type('image/avif'), url('assets/v2/chauffeur-door-m.webp') type('image/webp')); }
  .v2 .scene__m3{ background-image:image-set(url('assets/v2/hero-road-m.avif') type('image/avif'), url('assets/v2/hero-road-m.webp') type('image/webp')); }
  .v2 .scene__m4{ background-image:image-set(url('assets/v2/hero-wide.avif') type('image/avif'), url('assets/v2/hero-wide.webp') type('image/webp')); }
  /* Le dernier plan était cadré sur une robe noire de dos : écran noir sur téléphone.
     Image refaite en haute résolution (l'originale faisait 760 px), cadrée sur le couple. */
  .v2 .scene__m4{ background-position:35% 50%; }
  /* La phrase passe au premier plan : voile plus dense au centre qu'en v1 */
  .v2 .scene__scrim{ background:radial-gradient(95% 70% at 50% 50%, rgba(10,10,10,.54) 0%, rgba(10,10,10,.30) 50%, rgba(10,10,10,.86) 100%); }
}

/* ---------- Lisibilité sur téléphone ----------
   En v1, --faint (.30) donnait 2,3:1 sur le noir : « Défiler », les libellés du
   formulaire, la note sous le formulaire, les langues non choisies et la mention
   légale étaient quasi invisibles. Seuil visé : 4,5:1 minimum, mesuré. */
.v2{
  --dim:rgba(233,227,215,.70);   /* 7,9:1 */
  --faint:rgba(233,227,215,.58); /* 5,6:1 */
}
.v2 .scrollcue{ color:var(--dim); font-size:12px; }
.v2 .field__lbl{ font-size:12px; color:var(--dim); }
.v2 .anniv__note{ color:var(--faint); }
.v2 .lang button{ color:var(--faint); min-height:40px; }
.v2 .lang button[aria-current="true"]{ color:var(--gold); }
.v2 .lang .sep{ font-size:12px; }

/* L'accroche de l'ouverture est l'élément LCP : en v1 elle apparaissait en fondu
   après 1,15 s (+1,5 s d'animation), ce qui retardait d'autant la mesure.
   Elle est visible tout de suite ; le logo garde un mouvement, sans fondu. */
@keyframes heroLogoV2{ from{ transform:translateY(12px); } to{ transform:none; } }
@media(prefers-reduced-motion:no-preference){
  .v2 .scene__tag{ opacity:1; animation:none; }
  .v2 .scene__logo{ opacity:1; animation:heroLogoV2 1.6s var(--ease) both; }
}

/* Focus clavier visible partout (absent en v1) */
.v2 a:focus-visible, .v2 button:focus-visible, .v2 input:focus-visible{ outline:1px solid var(--gold-bright); outline-offset:4px; }

/* Hébreu : sans empattements, Noto Sans Hebrew (règle de la factory) */
html[lang="he"] .v2, html[lang="he"] body.v2{ --serif:'Noto Sans Hebrew',system-ui,sans-serif; --sans:'Noto Sans Hebrew',system-ui,sans-serif; }
html[lang="he"] .v2 .display, html[lang="he"] .v2 .lead, html[lang="he"] .v2 .scene__phrase, html[lang="he"] .v2 .scene__tag{ font-weight:300; letter-spacing:0; }
html[lang="he"] .v2 .display em, html[lang="he"] .v2 .scene__tag em, html[lang="he"] .v2 .finale__whisper, html[lang="he"] .v2 .whisper, html[lang="he"] .v2 .how__scarce em{ font-style:normal; }

/* La scène démarre en plein écran (classe « ready » dans le HTML) : en v1 le script
   l'ajoutait après le 1er affichage et tout le bloc d'ouverture sautait (CLS 0,125).
   Le repli « mouvement réduit » est donc porté par le CSS, pas par le script. */
@media(prefers-reduced-motion:reduce){
  .v2 .scene{ height:auto; }
  .v2 .scene__stage{ position:relative; height:auto; min-height:auto; padding:18vh var(--gut); }
  .v2 .scene__phrase{ position:relative; left:auto; top:auto; transform:none !important; opacity:1 !important; width:auto; margin:0 auto clamp(40px,8vh,84px); }
  .v2 .scene__intro{ position:relative; inset:auto; opacity:1 !important; transform:none !important; margin-bottom:clamp(40px,8vh,84px); }
  .v2 .scrollcue, .v2 .scene__rail, .v2 .scene__m2, .v2 .scene__m3, .v2 .scene__m4{ display:none; }
  .v2 .scene__m1{ opacity:1 !important; }
.v2 .scene__phrases{ position:relative; inset:auto; z-index:3; }
}

/* Plans 2-4 : pas de téléchargement avant le premier défilement (cf. v2.js, « armed »). */
.v2 .scene:not(.armed) .scene__m2, .v2 .scene:not(.armed) .scene__m3, .v2 .scene:not(.armed) .scene__m4{ background-image:none; }
/* Sections sous l'ouverture rendues à l'approche seulement : sur réseau lent, Chrome
   précharge les images « lazy » jusqu'à ~2 500 px, elles concurrençaient l'ouverture. */
.v2 main > section:not(.scene){ content-visibility:auto; contain-intrinsic-size:auto 1000px; }

/* ---------- Primitives ---------- */
/* Cormorant dessine des chiffres elzéviriens : « 20h00 » se lisait « 2ohoo ». */
.v2{ font-variant-numeric:lining-nums; }
.v2 picture{ display:block; overflow:hidden; }
.v2 .scene__intro picture, .v2 .foot picture{ overflow:visible; }
.v2 .scene__logo{ width:min(360px,74vw); height:auto; object-fit:contain; }
@media(max-width:760px){ .v2 .scene__logo{ width:min(300px,66vw); } }
.v2 .foot img{ width:auto; height:62px; }
.v2 picture img{ width:100%; height:100%; object-fit:cover; }
.v2 .lead{ color:rgba(233,227,215,.72); }
.chead--c{ margin-inline:auto; text-align:center; }
.chead__top--c{ justify-content:center; }


/* ---------- 01 Manifeste ---------- */
.v2 .principe .chead__top{ margin-bottom:clamp(28px,4vw,44px); }
.v2 .principe .whisper{ color:var(--faint); }

/* ---------- 02 Le rituel ---------- */
.how__head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,5vw,80px); align-items:end; }
.how__scarce{ display:flex; flex-direction:column; gap:10px; padding:26px 30px; border:1px solid var(--gold-line); max-width:300px; }
.how__scarce em{ font-family:var(--serif); font-size:clamp(20px,2vw,24px); line-height:1.35; color:var(--gold); }
.how__kicker{ margin:clamp(80px,11vw,140px) 0 18px; }
.how__title{ font-size:clamp(26px,3.4vw,42px); max-width:24ch; }
.steps{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px); margin-top:clamp(40px,5vw,64px); }
.step{ display:flex; flex-direction:column; border:1px solid var(--line); background:var(--ink-soft); transition:border-color .55s var(--ease); }
.step:hover{ border-color:var(--gold-line); }
.step__img{ aspect-ratio:3/2; }
.step__img img{ transition:transform 1.4s var(--ease); }
.step:hover .step__img img{ transform:scale(1.035); }
.step__body{ padding:clamp(26px,3vw,40px); }
.step__n{ font-family:var(--sans); font-size:12px; letter-spacing:.3em; color:var(--gold); }
.step__t{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,2.8vw,36px); line-height:1.1; margin:14px 0 12px; color:var(--cream); }
.step__d{ margin:0; font-size:15.5px; line-height:1.7; color:rgba(233,227,215,.68); max-width:46ch; }
.step--first{ justify-content:space-between; background:linear-gradient(160deg, rgba(194,163,107,.10), rgba(194,163,107,0) 60%), var(--ink-soft); border-color:var(--gold-line); }
.step--first .step__t{ font-size:clamp(34px,4vw,54px); }
.step__cta{ display:flex; flex-wrap:wrap; gap:12px; padding:0 clamp(26px,3vw,40px) clamp(26px,3vw,40px); }

/* ---------- 03 Promesses ---------- */
.proms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); margin-top:clamp(48px,6vw,80px); }
.prom__img{ aspect-ratio:4/5; margin-bottom:26px; }
/* La terrasse a un grand ciel noir : en vertical, on cadre sur la ville et les lanternes */
.prom:first-child .prom__img img{ object-position:50% 88%; }
.prom__t{ font-family:var(--serif); font-weight:300; font-size:clamp(25px,2.4vw,32px); line-height:1.12; margin:0 0 10px; }
.prom__d{ margin:0; font-size:15px; line-height:1.7; color:rgba(233,227,215,.68); }

/* ---------- 04 L'essentiel ---------- */
.info{ background:var(--ink-soft); border-block:1px solid var(--line); }
.info__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,100px); align-items:start; }
.info__list{ margin:0; border-top:1px solid var(--line); }
.info__row{ display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); }
.info__row dt{ font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.info__row dd{ margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(20px,2vw,25px); color:var(--cream); }
.info__cta{ margin-top:36px; }
html[lang="he"] .info__row dt{ letter-spacing:.06em; }

/* ---------- 06 FAQ ---------- */
.faq__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,100px); align-items:start; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:26px 0; font-family:var(--serif); font-weight:300; font-size:clamp(21px,2.1vw,27px); color:var(--cream);
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold-bright); }
.faq__item summary:focus-visible{ outline:1px solid var(--gold); outline-offset:6px; }
.faq__item summary i{ position:relative; flex:0 0 14px; height:14px; }
.faq__item summary i::before, .faq__item summary i::after{ content:""; position:absolute; inset:6.5px 0 auto; height:1px; background:var(--gold); transition:transform .45s var(--ease); }
.faq__item summary i::after{ transform:rotate(90deg); }
.faq__item[open] summary i::after{ transform:rotate(0); }
.faq__item p{ margin:0 0 28px; max-width:56ch; font-size:15.5px; line-height:1.75; color:rgba(233,227,215,.7); }

/* ---------- Finale sur photo ---------- */
.finale--photo{ position:relative; overflow:hidden; }
.finale__bg{ position:absolute; inset:0; }
.finale__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(10,10,10,.55) 30%, rgba(10,10,10,.62) 70%, var(--ink) 100%); }
.finale__inner{ position:relative; z-index:1; }

/* ---------- Pied de page : le cercle Viktor, en une ligne ---------- */
.foot__circle{ margin:30px auto 0; max-width:60ch; font-size:14px; color:var(--dim); line-height:1.8; }
.foot__circle a{ color:var(--gold); border-bottom:1px solid var(--gold-line); margin-inline:10px; white-space:nowrap; transition:border-color .3s; }
.foot__circle a:hover{ border-color:var(--gold); }
.v2 .foot__legal{ color:var(--faint); opacity:1; font-size:12px; }

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .how__head, .info__grid, .faq__grid{ grid-template-columns:1fr; }
  .how__scarce{ max-width:none; }
}
@media(max-width:760px){
  .steps, .proms{ grid-template-columns:1fr; }
  .prom__img{ aspect-ratio:4/3; }
  .info__row{ grid-template-columns:1fr; gap:6px; }
  .step__cta .btn{ flex:1 1 auto; justify-content:center; }
}

/* ============================================================
   v3 — HEURE BLEUE
   Les photos ont quitté l'ambre des caves pour l'heure bleue (eau turquoise,
   pierre claire, cobalt). Le noir du site suit : il bleuit d'un cran pour ne pas
   jurer avec elles. L'or reste l'unique accent — sur du bleu nuit il se lit
   comme un galon, plus comme une lumière de bougie.
   ============================================================ */
:root{
  --ink:#0a0a0b;
  --ink-soft:#0f0e0e;
  --line:rgba(233,227,215,.13);
  --plunge:cubic-bezier(.7,0,.2,1);   /* ouvertures de rideau : départ franc, arrivée feutrée */
}
.v2 .scene__scrim{ background:radial-gradient(78% 70% at 50% 50%, rgba(9,9,10,.40) 0%, rgba(9,9,10,.14) 50%, rgba(9,9,10,.80) 100%); }
.finale__bg::after{ background:linear-gradient(180deg, var(--ink) 0%, rgba(10,10,11,.5) 30%, rgba(10,10,11,.6) 70%, var(--ink) 100%); }
.hdr.scrolled{ background:rgba(10,10,11,.62); }
.fab{ background:rgba(15,14,14,.82); }
@media(max-width:760px){
  .v2 .scene__scrim{ background:radial-gradient(95% 70% at 50% 50%, rgba(9,9,10,.52) 0%, rgba(9,9,10,.28) 50%, rgba(9,9,10,.86) 100%); }
  /* Photos d’origine : cadrage portrait de viktor.css et du bloc plus haut */
}

/* ============================================================
   MOTION
   Une seule grammaire : ce qui est caché se dévoile, rien ne rebondit.
   Entrées 1,1-1,6 s en ease-out long, un décalage court entre éléments frères,
   uniquement transform / opacity / clip-path. Tout se coupe en mouvement réduit.
   ============================================================ */
@media(prefers-reduced-motion:no-preference){

  /* Titres : chaque mot monte derrière un masque. Le masque déborde de .22em en haut
     et .14em en bas, sinon il rogne les accents (É, À) et les jambages de l'italique. */
  .v2 .split .w{ display:inline-block; overflow:hidden; vertical-align:top;
    padding:.22em .06em .14em; margin:-.22em -.06em -.14em; }
  .v2 .split .wi{ display:inline-block; transform:translate3d(0,118%,0);
    transition:transform 1.3s var(--ease); transition-delay:calc(var(--i,0) * 55ms + 120ms); }
  .v2 .in .split .wi, .v2 .split.in .wi{ transform:none; }
  /* Le bloc d'en-tête ne glisse plus en entier : ce sont ses mots qui bougent */
  .v2 .chead.reveal:has(.split), .v2 .display.reveal.split{ transform:none; }

  /* Phrases de la scène : mots pilotés au défilement par v2.js */
  .v2 .split-scene .w{ display:inline-block; }
  .v2 .split-scene .wi{ display:inline-block; will-change:transform, opacity, filter; }

  /* Filets d'en-tête : ils se tracent depuis le numéro */
  .v2 .chead__top .ln{ transform:scaleX(0); transform-origin:left center; transition:transform 1.6s var(--ease) .3s; }
  html[dir="rtl"] .v2 .chead__top .ln{ transform-origin:right center; }
  .v2 .in .chead__top .ln, .v2 .chead__top.in .ln{ transform:none; }

  /* Photos : rideau qui remonte, puis la photo se pose (dézoom) ; la parallaxe
     (propriété `translate`) est écrite par v2.js, sans transition. */
  .v2 .step__img, .v2 .prom__img{ clip-path:inset(100% 0 0 0); transition:clip-path 1.5s var(--plunge) .12s; }
  .v2 .in .step__img, .v2 .in .prom__img{ clip-path:inset(0); }
  .v2 .step__img img, .v2 .prom__img img{ scale:1.26; transition:scale 2.4s var(--ease) .12s, transform 1.4s var(--ease); }
  .v2 .in .step__img img, .v2 .in .prom__img img{ scale:1.09; }
  .v2 .prom:hover .prom__img img{ transform:scale(1.035); }
  .v2 .finale__bg img{ scale:1.16; }

  /* Boutons : le fond se remplit de gauche à droite et repart par la droite */
  .v2 .btn{ position:relative; isolation:isolate; overflow:hidden; }
  .v2 .btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gold-bright);
    transform:scaleX(0); transform-origin:right center; transition:transform .7s var(--ease); }
  .v2 .btn:hover::before{ transform:scaleX(1); transform-origin:left center; }
  .v2 .btn:hover{ background:transparent; }
  .v2 .btn--solid:hover{ background:var(--gold); }
  .v2 .btn--ghost::before{ background:rgba(194,163,107,.1); }
  html[dir="rtl"] .v2 .btn::before{ transform-origin:left center; }
  html[dir="rtl"] .v2 .btn:hover::before{ transform-origin:right center; }

  /* En-tête : se retire à la descente, revient à la remontée */
  .v2 .hdr{ transition:transform .7s var(--ease), background .5s var(--ease), padding .5s var(--ease), border-color .5s; }
  .v2 .hdr.hdr--hide{ transform:translateY(-105%); }

  /* Numéro WhatsApp : l'anneau respire une fois quand il entre */
  @keyframes waRing{ 0%{ box-shadow:0 0 0 0 rgba(194,163,107,.45); } 100%{ box-shadow:0 0 0 22px rgba(194,163,107,0); } }
  .v2 .finale__num.in .wa{ animation:waRing 1.8s var(--ease) .9s 2; }

  /* FAQ : la réponse s'ouvre en hauteur au lieu d'apparaître d'un coup
     (navigateurs récents ; les autres gardent l'ouverture instantanée) */
  .v2 .faq__item{ interpolate-size:allow-keywords; }
  .v2 .faq__item::details-content{ height:0; overflow:clip; transition:height .6s var(--ease), content-visibility .6s allow-discrete; }
  .v2 .faq__item[open]::details-content{ height:auto; }
  .v2 .faq__item p{ opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s; }
  .v2 .faq__item[open] p{ opacity:1; transform:none; }
}