/* ============================================================
   BOOTH AI STUDIO — Raffinement « soirée chaude » (v2)
   Même identité (noir + or champagne + Cormorant) mais :
   noir plus chaud, lueur ambrée, composants arrondis,
   échelle typographique resserrée, mise en page menée par la PHOTO.
   Chargé APRÈS lux.css : surcharge ciblée, rien à réécrire ailleurs.
   ============================================================ */

:root {
  --noir:   #0a0806;          /* noir chaud (au lieu du noir pur) */
  --noir2:  #120e0a;
  --surface:#15100b;          /* fond des cartes */
  --surface2:#1b150e;
  --ivoire: #f5ebdd;
  --ivoire-2:#c9c1b1;
  --or:     #D4AF37;
  --or-clair:#F2C94C;
  --or-sombre:#8a6f36;
  --hair:   rgba(217,184,119,.30);
  --hair-soft:rgba(245,240,230,.09);
  /* Palette « Magie » (branding board 2) — accents intérieurs */
  --pink:#FF6EC7; --purple:#7861FF; --aqua:#39E5E0;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
}

body { background: var(--noir); color: var(--ivoire); }

/* Lueur ambrée : plus chaude, plus basse, façon lumière de fête */
.glow {
    background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2740%27%20r%3D%271.2%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2720%27%20r%3D%270.9%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.4%27%2F%3E%3Ccircle%20cx%3D%27270%27%20cy%3D%2760%27%20r%3D%271.1%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.5%27%2F%3E%3Ccircle%20cx%3D%2790%27%20cy%3D%2790%27%20r%3D%270.8%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27210%27%20cy%3D%27110%27%20r%3D%271.3%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%27140%27%20r%3D%271.0%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.45%27%2F%3E%3Ccircle%20cx%3D%27180%27%20cy%3D%27160%27%20r%3D%270.9%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.4%27%2F%3E%3Ccircle%20cx%3D%27280%27%20cy%3D%27180%27%20r%3D%271.1%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.5%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%27210%27%20r%3D%271.2%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.5%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27230%27%20r%3D%270.8%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%27250%27%20r%3D%271.0%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.45%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%27270%27%20r%3D%270.9%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.4%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27130%27%20r%3D%270.7%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.3%27%2F%3E%3Ccircle%20cx%3D%27230%27%20cy%3D%2730%27%20r%3D%270.8%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%270.35%27%2F%3E%3Cpath%20transform%3D%27translate%28200%2C70%29%20scale%280.07%29%27%20d%3D%27M50%202C54%2040%2060%2046%2098%2050C60%2054%2054%2060%2050%2098C46%2060%2040%2054%202%2050C40%2046%2046%2040%2050%202Z%27%20fill%3D%27%2523F2C94C%27%20opacity%3D%27.45%27%2F%3E%3Cpath%20transform%3D%27translate%2870%2C175%29%20scale%280.06%29%27%20d%3D%27M50%202C54%2040%2060%2046%2098%2050C60%2054%2054%2060%2050%2098C46%2060%2040%2054%202%2050C40%2046%2046%2040%2050%202Z%27%20fill%3D%27%2523FF6EC7%27%20opacity%3D%27.45%27%2F%3E%3Cpath%20transform%3D%27translate%28255%2C215%29%20scale%280.05%29%27%20d%3D%27M50%202C54%2040%2060%2046%2098%2050C60%2054%2054%2060%2050%2098C46%2060%2040%2054%202%2050C40%2046%2046%2040%2050%202Z%27%20fill%3D%27%252339E5E0%27%20opacity%3D%27.45%27%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(58vw 44vh at 78% -8%, rgba(217,184,119,.13), transparent 62%),
    radial-gradient(46vw 38vh at 8% 104%, rgba(217,184,119,.08), transparent 62%),
    radial-gradient(52vw 40vh at 88% 16%, rgba(255,110,199,.06), transparent 60%),
    radial-gradient(50vw 42vh at 4% 84%, rgba(57,229,224,.05), transparent 62%),
    radial-gradient(60vw 46vh at 50% 58%, rgba(120,97,255,.045), transparent 68%),
    radial-gradient(70vw 50vh at 50% 50%, rgba(120,60,20,.05), transparent 70%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 340px 340px, auto, auto, auto, auto, auto, auto;
  background-position: 0 0, center, center, center, center, center, center;
  background-color: var(--noir);
}
/* ---------- Étincelles « magie » : poussière d'étoiles qui scintille doucement ---------- */
.glow::before, .glow::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; }
.glow::before {
  background-image:
    radial-gradient(2.4px 2.4px at 14% 20%, rgba(255,110,199,.9), transparent 60%),
    radial-gradient(2px 2px   at 82% 26%, rgba(57,229,224,.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 66% 72%, rgba(120,97,255,.75), transparent 60%),
    radial-gradient(2.2px 2.2px at 37% 83%, rgba(255,110,199,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 93% 63%, rgba(57,229,224,.7), transparent 60%);
  animation: mgTwinkle 5.5s ease-in-out infinite alternate;
}
.glow::after {
  background-image:
    radial-gradient(2px 2px   at 26% 41%, rgba(57,229,224,.75), transparent 60%),
    radial-gradient(2.4px 2.4px at 54% 13%, rgba(255,110,199,.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 74% 45%, rgba(120,97,255,.7), transparent 60%),
    radial-gradient(2px 2px   at 8% 56%, rgba(255,110,199,.65), transparent 60%);
  animation: mgTwinkle 7.5s ease-in-out .8s infinite alternate;
}
@keyframes mgTwinkle { from { opacity:.22 } to { opacity:.85 } }
@media (prefers-reduced-motion:reduce){ .glow::before,.glow::after{ animation:none; opacity:.5 } }
.frame-edge { display: none; }            /* filet fixe retiré : plus moderne */

/* ---------- Typographie resserrée ---------- */
.lux2 h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.015em; }
.lux2 h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.14; letter-spacing: -.01em; }
.lux2 .eyebrow { font-size: .64rem; letter-spacing: .34em; color: var(--or); opacity: .9; }
.lux2 p { font-size: .95rem; line-height: 1.75; color: var(--ivoire-2); }

/* ---------- Boutons : pilule + dégradé or ---------- */
.lux2 .btn-lux {
  border-radius: var(--r-pill); padding: 13px 26px; font-size: .74rem;
  letter-spacing: .14em; text-transform: none; font-weight: 500;
}
.lux2 .btn-fill {
  background: linear-gradient(135deg, var(--or-clair), var(--or) 55%, #c9a35c);
  color: #17110a; box-shadow: 0 10px 30px rgba(217,184,119,.22);
}
.lux2 .btn-fill:hover { box-shadow: 0 14px 38px rgba(217,184,119,.34); transform: translateY(-1px); }
.lux2 .btn-line {
  border: 1px solid var(--hair); color: var(--ivoire); background: rgba(255,255,255,.02);
  backdrop-filter: blur(6px);
}
.lux2 .btn-line:hover { border-color: var(--or); background: rgba(217,184,119,.10); color: var(--ivoire); }
.lux2 .btn-lux::before { display: none; }  /* on remplace l'effet de balayage par l'ombre */

/* ---------- Cartes ---------- */
.l2card {
  background: linear-gradient(160deg, var(--surface), var(--noir2));
  border: 1px solid var(--hair-soft); border-radius: var(--r-md);
  padding: 26px 24px; transition: border-color .35s, transform .35s, box-shadow .35s;
}
.l2card:hover { border-color: var(--hair); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.l2ico {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: rgba(217,184,119,.10); border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 16px;
}
.l2card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: 8px; }
.l2card p  { font-size: .875rem; line-height: 1.7; margin: 0; }

/* ---------- Photos (avec repli élégant si le fichier manque) ---------- */
.ph { position: relative; overflow: hidden; background: var(--surface); display: block; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph--ph {                                   /* placeholder tant qu'aucune photo n'est fournie */
  background:
    radial-gradient(60% 45% at 30% 20%, rgba(217,184,119,.30), transparent 65%),
    radial-gradient(50% 40% at 80% 80%, rgba(200,90,60,.18), transparent 65%),
    linear-gradient(150deg, #1d160e, #0c0906);
}
.ph--ph::after {
  content: "✦"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: rgba(217,184,119,.30); font-size: 1.4rem;
}

/* ---------- Héros ---------- */
.l2hero { padding: clamp(140px,17vh,190px) 0 clamp(50px,7vh,80px); }
.l2hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(34px,5vw,76px); align-items: center; }
.l2hero h1 { margin: 20px 0 22px; }
.l2hero .sub { max-width: 520px; margin-bottom: 32px; font-size: 1.02rem; }
.l2hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.l2hero-note { margin-top: 18px; font-size: .72rem; color: var(--ivoire-2); opacity: .75; letter-spacing: .02em; }
.l2shot { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3;
  box-shadow: 0 30px 70px rgba(0,0,0,.5); border: 0; }
.l2badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; background: rgba(10,8,6,.80);
  border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 9px 14px; backdrop-filter: blur(10px);
}
.l2badge .n { font-family: var(--serif); font-size: 1.15rem; color: var(--or-clair); line-height: 1; }
.l2badge .l { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivoire-2); margin-top: 3px; }
@media (max-width: 900px) { .l2hero-grid { grid-template-columns: 1fr; } .l2hero { padding-top: 108px; } }

/* ---------- Bande photo pleine largeur ---------- */
.l2strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr);
  gap: 3px; overflow: hidden; border-block: 1px solid var(--hair-soft); }
/* Bande plus fine : hauteur fixe (au lieu de carrés) pour ne pas voler la vedette au héros */
.l2strip .ph { aspect-ratio: auto; height: clamp(74px, 8.5vw, 122px); }
.l2strip .ph::before { content:""; position:absolute; inset:0; background: rgba(10,8,6,.18); z-index:2; transition: background .4s; }
.l2strip .ph:hover::before { background: transparent; }
@media (max-width: 760px) { .l2strip { grid-auto-columns: minmax(104px, 1fr); } }

/* ---------- Bande de chiffres ---------- */
.l2stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
  padding: 54px 0; border-bottom: 1px solid var(--hair-soft); }
.l2stats .n { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--ivoire); line-height: 1; }
.l2stats .l { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivoire-2); margin-top: 9px; }
@media (max-width: 720px) { .l2stats { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } }

/* ---------- Section photo + liste de points ---------- */
.l2split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items: center; }
.l2split .l2shot:not(.l2shot--full) { aspect-ratio: 4/3; }
/* Photo verticale montrée EN ENTIER (aucun recadrage) : la hauteur suit l'image.
   NB : sélecteurs à spécificité ÉGALE OU SUPÉRIEURE à « .l2split .l2shot »,
   sinon le recadrage 4/3 l'emporte et l'image reste rognée. */
.l2shot.l2shot--full { aspect-ratio: auto; height: auto; }
.l2shot.l2shot--full .ph { display: block; height: auto; }
.l2shot.l2shot--full img { height: auto; object-fit: contain; }
.l2split .l2shot--full { max-width: 460px; margin-inline: auto; }
.l2feat { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; }
.l2feat .l2ico { margin-bottom: 0; flex: 0 0 40px; }
.l2feat h4 { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; margin-bottom: 3px; }
.l2feat p { font-size: .84rem; margin: 0; }
@media (max-width: 860px) { .l2split { grid-template-columns: 1fr; } }

/* ---------- Mosaïque galerie ---------- */
.l2mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.l2mosaic .ph { border-radius: var(--r-md); aspect-ratio: 4/3; }
.l2mosaic .ph.tall { aspect-ratio: 3/4; }
@media (max-width: 760px) { .l2mosaic { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Bandeau final ---------- */
.l2finale { text-align: center; padding: clamp(80px,13vh,150px) 0; }
.l2finale h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 780px; margin: 0 auto 28px; }

/* ============================================================
   MOUVEMENT — style « liquide » (blobs organiques, révélations au scroll,
   parallaxe douce). Tout est désactivé si prefers-reduced-motion.
   ============================================================ */

/* Blobs liquides : formes organiques qui se déforment lentement */
.blob { position: absolute; z-index: -1; filter: blur(46px); opacity: .5; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(217,184,119,.55), rgba(200,90,40,.16) 60%, transparent 72%);
  animation: blobMorph 18s ease-in-out infinite; }
.blob-a { width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; top: -12%; right: -8%; }
.blob-b { width: 38vw; height: 38vw; max-width: 460px; max-height: 460px; bottom: -14%; left: -10%;
  animation-duration: 24s; animation-direction: reverse; opacity: .34;
  background: radial-gradient(circle at 40% 40%, rgba(120,97,255,.42), rgba(255,110,199,.16) 58%, transparent 74%); }
@keyframes blobMorph {
  0%,100% { border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%; transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  33%     { border-radius: 38% 62% 58% 42% / 42% 60% 40% 58%; transform: translate3d(2%, 3%, 0) rotate(8deg) scale(1.07); }
  66%     { border-radius: 54% 46% 36% 64% / 60% 38% 62% 40%; transform: translate3d(-3%, -2%, 0) rotate(-6deg) scale(.95); }
}

/* Bouton liquide : halo qui respire + vague au survol */
.btn-xl { padding: 20px 44px !important; font-size: .92rem !important; letter-spacing: .1em !important; }
.liquid { position: relative; isolation: isolate; overflow: hidden; }
.liquid > span { position: relative; z-index: 2; }
.liquid::after {
  content: ""; position: absolute; inset: -40%; z-index: 1; border-radius: 45%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.42), transparent 62%);
  transform: translate3d(-60%, 12%, 0) scale(.6); transition: transform .85s cubic-bezier(.22,1,.28,1);
}
.liquid:hover::after { transform: translate3d(35%, -14%, 0) scale(1.25); }
.liquid { animation: pulseGlow 3.4s ease-in-out infinite; }
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 10px 30px rgba(217,184,119,.22); }
  50%     { box-shadow: 0 14px 46px rgba(217,184,119,.42); }
}

/* Carte liquide : bord doré qui ondule */
.liquid-card { position: relative; overflow: hidden; }
.liquid-card::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from 0deg, transparent, rgba(217,184,119,.42), transparent 38%);
  animation: spinBorder 9s linear infinite;
}
@keyframes spinBorder { to { transform: rotate(1turn); } }

/* Révélations au scroll */
[data-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); }
[data-reveal].in { opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,1,.28,1), transform 1s cubic-bezier(.22,1,.28,1); }
[data-reveal-stagger] > * { opacity: 0; transform: translate3d(0, 30px, 0) scale(.98); }
[data-reveal-stagger].in > * { opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22,1,.28,1), transform .9s cubic-bezier(.22,1,.28,1); }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: .09s; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: .18s; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: .27s; }
[data-reveal-stagger].in > *:nth-child(5) { transition-delay: .36s; }
[data-reveal-stagger].in > *:nth-child(6) { transition-delay: .45s; }
[data-reveal-stagger].in > *:nth-child(7) { transition-delay: .54s; }
[data-reveal-stagger].in > *:nth-child(8) { transition-delay: .63s; }

/* Parallaxe douce sur les photos + zoom lent */
[data-parallax] { will-change: transform; transition: transform .12s linear; }
.l2shot img { transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.l2shot:hover img { transform: scale(1.045); }
.occ2, .l2card { will-change: transform; }
.occ2:hover { transform: translateY(-5px); }

/* La bande photo défile doucement au scroll */
.l2strip .ph img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.l2strip .ph:hover img { transform: scale(1.09); }

/* ---------- Expérience cinématique pilotée par le SCROLL ----------
   Utilise les « scroll-driven animations » natives (animation-timeline: view())
   là où elles existent — sinon on garde les révélations IntersectionObserver. */
.scrollbar-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 200; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--or-sombre), var(--or), var(--or-clair));
  width: 100%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .scrollbar-progress { animation: growBar linear both; animation-timeline: scroll(root block); }
  @keyframes growBar { to { transform: scaleX(1); } }

  /* Le héros s'éloigne : léger recul + fondu quand on quitte l'écran */
  .l2hero-grid { animation: heroExit linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  @keyframes heroExit { to { opacity: .18; transform: translateY(-42px) scale(.955); filter: blur(2px); } }

  /* Chaque section entre en scène : montée + mise au point */
  .cine { animation: cineIn linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
  @keyframes cineIn {
    from { opacity: 0; transform: translateY(52px) scale(.97); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  /* Les photos se dévoilent façon volet + zoom lent continu */
  .cine-shot { animation: shotReveal linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  @keyframes shotReveal {
    from { clip-path: inset(14% 8% 14% 8% round 20px); transform: scale(1.10); }
    to   { clip-path: inset(0% 0% 0% 0% round 20px);   transform: scale(1); }
  }
  /* La bande photo glisse latéralement pendant le défilement */
  .l2strip { animation: stripPan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes stripPan { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }

  /* Les chiffres montent un à un */
  .l2stats > * { animation: statRise linear both; animation-timeline: view(); animation-range: entry 6% cover 32%; }
  @keyframes statRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .liquid, .liquid-card::before { animation: none !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .scrollbar-progress { display: none; }
  .cine, .cine-shot, .l2hero-grid, .l2strip, .l2stats > * { animation: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ============================================================
   EXPÉRIENCE DE SCROLL CINÉMATOGRAPHIQUE
   Transitions immersives pilotées par le défilement. On privilégie les
   « scroll-driven animations » natives (animation-timeline) quand le
   navigateur les gère, avec repli JS (IntersectionObserver) sinon.
   ============================================================ */

/* Barre de progression de lecture */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--or-sombre), var(--or), var(--or-clair));
  transform-origin: 0 50%; transform: scaleX(0); will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: growX linear both; animation-timeline: scroll(root block); }
  @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Le héros se retire en profondeur quand on descend (effet caméra) */
@supports (animation-timeline: view()) {
  .l2hero-grid {
    animation: heroExit linear both;
    animation-timeline: view(block);
    animation-range: exit -10% exit 90%;
  }
  @keyframes heroExit { to { opacity: .25; transform: translate3d(0,-6%,0) scale(.955); filter: blur(3px); } }

  /* Chaque section entre en scène : montée + léger zoom + net */
  .cine {
    animation: cineIn linear both;
    animation-timeline: view(block);
    animation-range: entry 4% entry 46%;
  }
  @keyframes cineIn {
    from { opacity: 0; transform: translate3d(0, 52px, 0) scale(.975); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }

  /* Photos : parallaxe verticale continue pendant toute la traversée */
  .cine-par img {
    animation: parY linear both;
    animation-timeline: view(block);
    animation-range: cover;
  }
  @keyframes parY { from { transform: translate3d(0,-7%,0) scale(1.14); } to { transform: translate3d(0,7%,0) scale(1.14); } }

  /* La bande photo glisse latéralement au scroll (travelling) */
  .l2strip {
    animation: stripPan linear both;
    animation-timeline: view(block);
    animation-range: cover;
  }
  @keyframes stripPan { from { transform: translate3d(-3.5%,0,0); } to { transform: translate3d(3.5%,0,0); } }

  /* Bande de chiffres : chaque valeur se pose */
  .l2stats > * {
    animation: statPop linear both;
    animation-timeline: view(block);
    animation-range: entry 10% entry 60%;
  }
  @keyframes statPop { from { opacity: 0; transform: translate3d(0,26px,0); } to { opacity: 1; transform: none; } }
}

/* Repli JS : mêmes effets via .in (voir script d'accueil) */
.cine.js-cine { opacity: 0; transform: translate3d(0,52px,0) scale(.975); filter: blur(6px); }
.cine.js-cine.in { opacity: 1; transform: none; filter: blur(0);
  transition: opacity 1s cubic-bezier(.22,1,.28,1), transform 1.1s cubic-bezier(.22,1,.28,1), filter 1s ease; }

/* Voile cinématographique entre les scènes (fondu haut/bas) */
.cine-veil { position: relative; }
.cine-veil::before, .cine-veil::after {
  content: ""; position: absolute; left: 0; right: 0; height: 90px; pointer-events: none; z-index: 3;
}
.cine-veil::before { top: 0;    background: linear-gradient(180deg, var(--noir), transparent); }
.cine-veil::after  { bottom: 0; background: linear-gradient(0deg,   var(--noir), transparent); }

/* Titres : les mots montent en cascade */
.cine-title span { display: inline-block; }
.cine-title.in span { animation: wordUp .85s cubic-bezier(.22,1,.28,1) both; }
.cine-title.in span:nth-child(2) { animation-delay: .06s; }
.cine-title.in span:nth-child(3) { animation-delay: .12s; }
.cine-title.in span:nth-child(4) { animation-delay: .18s; }
.cine-title.in span:nth-child(5) { animation-delay: .24s; }
.cine-title.in span:nth-child(6) { animation-delay: .30s; }
@keyframes wordUp { from { opacity: 0; transform: translate3d(0,.7em,0) rotate(1.5deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .cine, .cine.js-cine, .l2hero-grid, .cine-par img, .l2strip, .l2stats > * {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .cine-title.in span { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   SCROLLYTELLING — pièces pilotées par GSAP ScrollTrigger (cine.js)
   ============================================================ */

/* Fond morphant : couche fixe sous tout le contenu */
.cine-bg { position: fixed; inset: 0; z-index: -4; pointer-events: none; transition: none; }
.cine-on .glow { opacity: .5; }         /* le fond morphant prend le relais */

/* Titres masqués (convention .split/.w-wrap/.w partagée avec lux.css)
   ⚠️ RÈGLE DE SÛRETÉ : le mot n'est caché (translateY) QUE si le moteur est
   réellement actif (html.cine-on, posé par cine.js une fois GSAP chargé).
   Sinon — CDN bloqué, déclencheur qui ne part pas dans une section épinglée —
   les titres resteraient invisibles pour toujours. Par défaut : VISIBLES. */
.split .w-wrap { display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .12em; margin-bottom: -.12em; }
/* JAMAIS de masquage en CSS : c'est GSAP (fromTo, immediateRender) qui pose
   l'état de départ, et ses styles en ligne l'emportent sur la feuille de style.
   lux.css met ici translateY(115%) et compte sur un gsap.to() pour remonter le
   mot : si ce .to() ne part pas, le titre reste invisible. On neutralise donc
   la règle — au pire on perd une animation, jamais le texte. */
.split .w { display: inline-block; will-change: transform; transform: none; }

/* Scène épinglée : l'écran se fige, les étapes défilent dedans */
/* Scène épinglée : le contenu se cale SOUS la barre de navigation fixe */
.pin-scene { min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  padding-top: calc(var(--nav-h, 84px) + 10px); }
@supports not (height: 1svh) { .pin-scene { min-height: 100vh; } }
.pin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px);
  align-items: center; width: 100%; }
@media (max-width: 900px) { .pin-grid { grid-template-columns: 1fr; gap: 28px; } }
.pin-steps { position: relative; min-height: 260px; }
.pin-step  { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.pin-step .n { font-family: var(--serif); font-style: italic; font-size: 3.2rem;
  background: linear-gradient(105deg,var(--or-sombre),var(--or) 45%,var(--or-clair));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.pin-step h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem,3vw,2.2rem); margin: .3em 0 .4em; }
.pin-step p  { color: var(--ivoire-2); font-size: 1rem; line-height: 1.75; max-width: 460px; }
@media (max-width: 900px) { .pin-steps { min-height: 300px; } }

/* Média de la scène épinglée : une image PAR ÉTAPE, superposées et fondues */
.pin-media { position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 34px 90px rgba(0,0,0,.6), 0 0 80px rgba(217,184,119,.10);
  border: 1px solid var(--hair-soft); --pin-progress: 0; aspect-ratio: 4/3; }
/* Toutes les images se superposent ; c'est l'aspect-ratio du conteneur qui donne
   la hauteur. (Mettre la 1re en position:relative la faisait retomber à 0 de haut,
   et sa photo — en absolu — disparaissait : fond noir.) */
.pin-img { position: absolute; inset: 0; display: block; }
.pin-img .ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pin-img .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pin-media::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px;
  width: calc(var(--pin-progress) * 100%);
  background: linear-gradient(90deg, var(--or-sombre), var(--or-clair)); z-index: 4; }
.pin-count { position: absolute; right: 14px; top: 14px; z-index: 5;
  background: rgba(10,8,6,.74); border: 1px solid var(--hair); border-radius: 2rem;
  padding: 5px 13px; font-family: var(--serif); color: var(--or-clair); font-size: .95rem;
  backdrop-filter: blur(8px); }
.pin-count i { font-style: normal; color: var(--ivoire-2); font-size: .72rem; }

/* Pastilles cliquables : navigation entre les étapes */
.pin-dots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.pin-dot { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--hair-soft); border-radius: var(--r-pill);
  padding: 7px 14px 7px 11px; color: var(--ivoire-2); font: inherit; font-size: .74rem;
  letter-spacing: .04em; transition: all .35s; }
.pin-dot .d { width: 7px; height: 7px; border-radius: 50%; background: var(--hair);
  transition: all .35s; flex: 0 0 auto; }
.pin-dot:hover { border-color: var(--hair); color: var(--ivoire); }
.pin-dot.on { border-color: var(--or); color: var(--ivoire); background: rgba(217,184,119,.10); }
.pin-dot.on .d { background: var(--or); box-shadow: 0 0 0 4px rgba(217,184,119,.20); }
@media (max-width: 600px) { .pin-dot .lb { display: none; } .pin-dot { padding: 9px; } }

/* Mobile : scène épinglée déroulée normalement (pas d'épinglage) */
.pin-scene.no-pin { min-height: 0; display: block; padding: clamp(60px,9vh,90px) 0; }
.pin-scene.no-pin .pin-steps { min-height: 0; }
.pin-scene.no-pin .pin-step { position: relative; inset: auto; margin-bottom: 30px; }

/* Travelling horizontal */
.hscroll { overflow: hidden; }
/* Mobile : on rend la main au doigt (défilement horizontal natif) */
.hscroll.hscroll-touch { overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-inline: clamp(22px,5vw,44px); }
.hscroll.hscroll-touch .hscroll-track { transform: none !important; }
.hscroll.hscroll-touch .hscroll-track > * { scroll-snap-align: center; }
.hscroll-track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.hscroll-track > * { flex: 0 0 auto; width: min(380px, 76vw); border-radius: var(--r-md); overflow: hidden; }
.hscroll-track .ph { aspect-ratio: 3/4; }

/* Empilement collant */
.stack > * { position: sticky; top: clamp(90px, 16vh, 150px); }

/* Repli sans GSAP (voir cssFallback) */
.js-cine { opacity: 0; transform: translate3d(0,52px,0) scale(.978); filter: blur(6px); }
.js-cine.in { opacity: 1; transform: none; filter: blur(0);
  transition: opacity 1s cubic-bezier(.22,1,.28,1), transform 1.1s cubic-bezier(.22,1,.28,1), filter 1s ease; }
[data-step] { opacity: 1; }                    /* visibles si JS absent */
.cine-on [data-step] { opacity: 0; }           /* GSAP prend la main */

@media (prefers-reduced-motion: reduce) {
  .cine-bg { display: none; }
  .pin-step { position: relative; inset: auto; margin-bottom: 34px; opacity: 1 !important; }
  .pin-steps { min-height: 0; }
  .hscroll-track { flex-wrap: wrap; width: auto; transform: none !important; }
  .stack > * { position: static; }
  .split .w { transform: none !important; }
}

/* ---------- Divers ---------- */
.lux2 section { position: relative; }
.l2rule { height: 1px; background: var(--hair-soft); border: 0; margin: 0; }
.lux2 nav.lux-nav.scrolled { background: rgba(10,8,6,.95); border-bottom: 1px solid var(--hair-soft); }
.lux2 .nav-cta { border-radius: var(--r-pill); padding: 10px 22px; }

/* ---------- Texture : lignes dorées ondulées (bloc final) ---------- */
.l2finale { position: relative; }
.l2finale::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271200%27%20height%3D%27220%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2020%20C150%204%20300%2036%20450%2020%20S750%204%20900%2020%20S1200%2036%201200%2020%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.10%27%2F%3E%3Cpath%20d%3D%27M0%2046%20C150%2030%20300%2062%20450%2046%20S750%2030%20900%2046%20S1200%2062%201200%2046%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.13%27%2F%3E%3Cpath%20d%3D%27M0%2072%20C150%2056%20300%2088%20450%2072%20S750%2056%20900%2072%20S1200%2088%201200%2072%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.16%27%2F%3E%3Cpath%20d%3D%27M0%2098%20C150%2082%20300%20114%20450%2098%20S750%2082%20900%2098%20S1200%20114%201200%2098%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.10%27%2F%3E%3Cpath%20d%3D%27M0%20124%20C150%20108%20300%20140%20450%20124%20S750%20108%20900%20124%20S1200%20140%201200%20124%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.13%27%2F%3E%3Cpath%20d%3D%27M0%20150%20C150%20134%20300%20166%20450%20150%20S750%20134%20900%20150%20S1200%20166%201200%20150%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.16%27%2F%3E%3Cpath%20d%3D%27M0%20176%20C150%20160%20300%20192%20450%20176%20S750%20160%20900%20176%20S1200%20192%201200%20176%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.10%27%2F%3E%3Cpath%20d%3D%27M0%20202%20C150%20186%20300%20218%20450%20202%20S750%20186%20900%20202%20S1200%20218%201200%20202%27%20fill%3D%27none%27%20stroke%3D%27%2523D4AF37%27%20stroke-width%3D%271%27%20opacity%3D%270.13%27%2F%3E%3C%2Fsvg%3E"); background-size: 1200px 220px; background-repeat: repeat; background-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
@media (prefers-reduced-motion: reduce){ .l2finale::before{ opacity:.4 } }