/* =========================================================
   APPEL DU NORD — Frame 1
   ========================================================= */

:root {
  --c-bg: #b7c4cb;
  --c-text-blend: #000000;
  --c-meta: rgba(255, 255, 255, 0.6);

  --ff-display: "Chillax", "Chillax-Variable", system-ui, sans-serif;

  --fs-title: 40px;
  --fs-subtitle: 32px;
  --fs-meta: 20px;
  --fs-nav: 20px;

  /* 100px à partir de ~1430px viewport, scaling responsive */
  --pad-x: clamp(20px, 7vw, 100px);
  /* 300px à partir de ~1430px viewport */
  --center-left: clamp(20px, 21vw, 300px);

  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #0c1116;
  font-family: var(--ff-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Désactive le "font boosting" de Safari iOS : sans ça, Safari gonfle
     arbitrairement certains blocs de texte en paysage (tailles incohérentes
     au sein d'un même paragraphe, layouts poussés hors position). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Réserve l'espace de la scrollbar dès le départ → pas de shift latéral
   quand le loader rend la scroll au document à la fin de l'intro. */
html {
  scrollbar-gutter: stable;
  height: 100%;
}
/* iOS : body remplit toute la safe-area (notch + home indicator)
   → pas de bandes noires autour du contenu */
body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* overflow-x: clip uniquement sur body (pas html — sinon le scroll vertical
   est bloqué). clip vs hidden : pas de scroll container parasite, donc les
   sticky descendants se réfèrent au scroll du document. */
body {
  overflow-x: clip;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================================================
   TOPBAR (fixe — logo + Réserver toujours visibles)
   ========================================================= */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* iOS notch : on rajoute la safe-area inset au padding top */
  padding:
    calc(clamp(20px, 3vw, 40px) + env(safe-area-inset-top))
    calc(var(--pad-x) + env(safe-area-inset-right))
    clamp(20px, 3vw, 40px)
    calc(var(--pad-x) + env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  pointer-events: none; /* le hit est sur les enfants */
}
/* Voile sombre + blur derrière la topbar : effet frosted glass qui floute
   les sections passant en dessous. Le mask-image fait un fondu progressif
   vers le bas → le blur ET le voile s'effacent doucement, sans "bord dur"
   à la limite. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 17, 22, 0.35) 0%, rgba(12, 17, 22, 0) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.topbar > * {
  pointer-events: auto;
}

/* ---------- Nav droite : ordre visuel = [extras absolute] [burger] [Réserver] ---------- */
.topbar__nav {
  display: flex;
  align-items: center;
  /* Petit gap entre le burger et Réserver — les deux sont voisins. */
  gap: clamp(12px, 1.4vw, 22px);
  position: relative;
}

/* Container des liens supplémentaires : position absolue à GAUCHE de la nav
   (right: 100% + gap) → ne consomme pas de place dans la nav quand fermé,
   burger et Réserver restent à leur position naturelle. Slide depuis la
   droite via translateX + opacity. */
.topbar__extras {
  position: absolute;
  top: 50%;
  right: calc(100% + clamp(18px, 2vw, 32px));
  transform: translate(40vw, -50%);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 36px);
  white-space: nowrap;
  transition:
    opacity 0.55s var(--ease-out-soft),
    transform 0.65s var(--ease-out-soft);
}
.topbar__extras.is-open {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}

/* Boutons de langue : reset natif du <button>. Le style visuel (typo,
   couleur, mix-blend-mode, underline animée) vient de .link.link--underline
   posé dans l'HTML → même comportement que "Réserver". */
.topbar__lang {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.35s var(--ease-out-soft);
}
/* Selector chainé pour spécificité 20 : bat .link (10) qui force sinon
   le font-size à var(--fs-nav) (20px). Labels 2 lettres → typo plus petite. */
.link.topbar__lang {
  font-size: clamp(13px, 0.9vw, 15px);
}
/* Langue inactive : dimmée. Pas de trait à gérer (plus de .link--underline
   sur les liens du menu → seul Réserver a un trait). */
.topbar__lang:not(.is-active) {
  opacity: 0.55;
}

/* Bouton son ambiant : icône simple 3 lignes qui switch on/off. Reset button. */
.topbar__sound {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  opacity: 0.85;
  transition: opacity 0.35s var(--ease-out-soft);
}
.topbar__sound:hover { opacity: 1; }
.topbar__sound-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.topbar__sound .topbar__sound-icon--on { display: none; }
.topbar__sound[aria-pressed="true"] .topbar__sound-icon--off { display: none; }
.topbar__sound[aria-pressed="true"] .topbar__sound-icon--on { display: block; }

/* Burger 3 barres → croix. Reset natif du bouton ; la couleur des barres
   suit currentColor donc s'aligne sur .link (mix-blend-mode overlay
   + var(--c-text-blend) → passe au blanc sur bg clair via l'inversion). */
.topbar__menu-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 4px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
}
.topbar__menu-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out-soft), opacity 0.25s ease;
  transform-origin: center;
}
.topbar__menu-toggle.is-open .topbar__menu-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.topbar__menu-toggle.is-open .topbar__menu-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.topbar__menu-toggle.is-open .topbar__menu-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.topbar__logo {
  display: inline-flex;
  transition: opacity 0.45s var(--ease-out-soft);
}
.topbar__logo:hover {
  opacity: 0.7;
}
.topbar__logo img {
  /* logo-mennel2.svg est un lettrage HORIZONTAL (ratio ~2.29:1) → on fixe la
     hauteur et on laisse la largeur s'adapter pour ne pas l'écraser. */
  width: auto;
  height: 48px;
  /* Le logo est blanc nativement → invisible sur le hero clair. On le force
     en SOMBRE (noir) par défaut pour qu'il ressorte bien. */
  filter: brightness(0);
  transition: filter 0.5s var(--ease-out-soft);
}

/* Quand on est sur une section sombre, on inverse le logo en blanc */
html.is-on-dark .topbar__logo img {
  filter: brightness(0) invert(1);
}
html.is-on-dark .link {
  color: #fff;
  mix-blend-mode: normal;
}
html.is-on-dark .footbar {
  color: var(--c-cream-soft);
}

/* Cette règle legacy est mergée avec celle plus haut (.topbar__nav ligne 132)
   qui définit un gap plus petit et position:relative pour l'extras absolute. */

/* ---------- Lien Réserver ---------- */
.link {
  position: relative;
  font-family: var(--ff-display);
  font-size: var(--fs-nav);
  font-weight: 400;
  color: var(--c-text-blend);
  mix-blend-mode: overlay;
  letter-spacing: 0.02em;
  padding: 0;
}

.link--underline span {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

/* Underline partiel : court, débute ~30% à gauche, dépasse légèrement à droite */
.link--underline span::after {
  content: "";
  position: absolute;
  left: 30%;
  right: -10%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 0.55s var(--ease-out-expo);
}

.link--underline:hover span::after {
  transform-origin: left center;
  animation: underlineSwipe 0.75s var(--ease-out-expo);
}

@keyframes underlineSwipe {
  0% {
    transform-origin: right center;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right center;
    transform: scaleX(0);
  }
  50.001% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  100% {
    transform-origin: left center;
    transform: scaleX(1);
  }
}

/* =========================================================
   FOOTBAR (fixe — Voyage + 2026, fade après 5 scrolls)
   ========================================================= */
.footbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* iOS home indicator : on rajoute la safe-area inset au padding bottom */
  padding:
    clamp(20px, 3vw, 40px)
    calc(var(--pad-x) + env(safe-area-inset-right))
    calc(clamp(20px, 3vw, 40px) + env(safe-area-inset-bottom))
    calc(var(--pad-x) + env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--ff-display);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-meta);
  z-index: 50;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.9s var(--ease-out-soft);
}
/* Voile sombre derrière la footbar : protège le contenu (flèches programme,
   titres de cards, etc.) qui pourrait chevaucher en bas de viewport. */
.footbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 17, 22, 0.55) 0%, rgba(12, 17, 22, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Le scroll-fade des éléments [data-fade-on-scroll] est piloté directement
   en JS (element.style.opacity) via ScrollTrigger.scrub — pas de classe. */

/* =========================================================
   HERO — 2× viewport, inner sticky (pattern izanami)
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 200svh;
  min-height: 1200px;
  isolation: isolate; /* contient mix-blend du titre dans la zone hero */
  /* PAS d'overflow ici : ça crée un scroll-container qui casse position:sticky */
}

/* Inner pinné par ScrollTrigger sur 1 viewport pendant les 2vh de scroll du hero.
   100dvh sur iOS = inclut la safe-area (notch + URL bar zone) → fond full bleed. */
.hero__sticky {
  position: relative;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* BG : top calé au top du sticky, 120% pour parallaxe */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 0;
  will-change: transform;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---------- Centre (titre + sous-titre)
   Wrapper plein viewport pour centrage flex.
   N'est PAS dans .hero__sticky → scroll naturellement avec la page.
   ---------- */
.hero__center-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}

.hero__center {
  margin-left: var(--center-left);
  max-width: 60ch;
  pointer-events: auto;
  transition: opacity 0.9s var(--ease-out-soft);
}

.hero__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 12px 0;
  color: var(--c-text-blend);
  mix-blend-mode: overlay;
}

.hero__subtitle {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-subtitle);
  line-height: 1.3;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--c-text-blend);
  mix-blend-mode: overlay;
}

/* Texte secondaire pinné (dans .hero__sticky) : centré viewport, opacity
   pilotée par JS (apparaît une fois le titre disparu, puis disparaît lui-
   même en continuant à scroller). z-index au-dessus des nuages. */
.hero__secondary {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 5vw, 60px);
  margin: 0;
  text-align: center;
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--c-text-blend);
  mix-blend-mode: overlay;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  will-change: opacity;
}

/* ---------- Animation d'entrée (opacity only — pas de translate qui collide
   avec le centrage flex) ---------- */
[data-fade-in] {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out-expo);
}
[data-fade-in].is-in {
  opacity: 1;
}

/* =========================================================
   NUAGES — pattern izanami (R → L en boucle, parallaxe scroll)
   ========================================================= */
.homeHeader_clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.homeHeader_cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}

.cloud {
  display: flex;
  position: absolute;
  left: 0;
  width: 100vw;
  pointer-events: none;
}

/* 1ère bande : nuages plus haut, plus serrés */
.cloud:first-of-type {
  top: 18%;
}
.cloud:first-of-type .cloud_img {
  width: 140vw;
  aspect-ratio: 3740 / 1800;
}

/* 2ème bande : nuages plus bas, plus larges → profondeur */
.cloud:last-of-type {
  top: 42%;
}
.cloud:last-of-type .cloud_img {
  width: 180vw;
  aspect-ratio: 3740 / 1800;
}

.cloud_item {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

/* Les 2 items se relayent en leapfrog pour un scroll infini seamless */
.cloud_item:nth-of-type(1) {
  animation-name: cloudMove01;
  animation-duration: 120s;
  animation-delay: -60s;
}
.cloud_item:nth-of-type(2) {
  animation-name: cloudMove02;
  animation-duration: 120s;
  animation-delay: 0s;
}

/* La 2ème bande tourne un peu plus lentement (parallaxe horizontal) */
.cloud:last-of-type .cloud_item:nth-of-type(1),
.cloud:last-of-type .cloud_item:nth-of-type(2) {
  animation-duration: 180s;
}
.cloud:last-of-type .cloud_item:nth-of-type(1) {
  animation-delay: -90s;
}

.cloud_item.-inView {
  animation-play-state: running !important;
}

.cloud_img {
  pointer-events: none;
}
.cloud_img img,
.cloud_img picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

@keyframes cloudMove01 {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes cloudMove02 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-200%, 0, 0);
  }
}

/* =========================================================
   COUCHE NUAGES DENSE (background, fixe au scroll)
   Première dans le DOM → paintée derrière la couche parallax.
   Opacité renforcée via filter + bandes plus larges et plus
   lentes pour la profondeur atmosphérique.
   ========================================================= */
.homeHeader_cloud--dense {
  /* Pas de data-clouds-scroll-animation → aucun translateY au scroll */
  z-index: 0;
}

/* Renforcer la présence des blancs sans toucher à l'alpha */
.homeHeader_cloud--dense .cloud_img img {
  filter: brightness(1.18) contrast(1.12) saturate(0.95);
}

/* Empiler 2 images quasi confondues = densité doublée */
.homeHeader_cloud--dense .cloud_item {
  position: relative;
}
.homeHeader_cloud--dense .cloud_item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  pointer-events: none;
}

/* Bandes plus larges et placées un peu plus haut */
.homeHeader_cloud--dense .cloud:first-of-type {
  top: 6%;
}
.homeHeader_cloud--dense .cloud:first-of-type .cloud_img {
  width: 170vw;
  aspect-ratio: 3740 / 1800;
}
.homeHeader_cloud--dense .cloud:last-of-type {
  top: 32%;
}
.homeHeader_cloud--dense .cloud:last-of-type .cloud_img {
  width: 210vw;
  aspect-ratio: 3740 / 1800;
}

/* Drift horizontal beaucoup plus lent (effet de profondeur) */
.homeHeader_cloud--dense .cloud_item:nth-of-type(1) {
  animation-duration: 260s;
  animation-delay: -130s;
}
.homeHeader_cloud--dense .cloud_item:nth-of-type(2) {
  animation-duration: 260s;
  animation-delay: 0s;
}
.homeHeader_cloud--dense .cloud:last-of-type .cloud_item:nth-of-type(1) {
  animation-duration: 340s;
  animation-delay: -170s;
}
.homeHeader_cloud--dense .cloud:last-of-type .cloud_item:nth-of-type(2) {
  animation-duration: 340s;
  animation-delay: 0s;
}

/* =========================================================
   NUAGES section 2 (philosophie) — top only, plus discrets
   ========================================================= */
.ed--philosophy__clouds {
  /* Cantonnés au TOP de la section, fade out vers le bas pour ne pas
     interférer avec le texte editorial en-dessous. */
  height: 65%;
  bottom: auto;
  z-index: 1;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.ed--philosophy__clouds .cloud:first-of-type { top: 6%; }
.ed--philosophy__clouds .cloud:last-of-type { top: 24%; }

/* =========================================================
   SYSTÈME ÉDITORIAL DARK (izanami language)
   Préfix .ed- — fond sombre, typo aérée, layout asymétrique,
   labels verticaux, CTA avec trait.
   ========================================================= */

:root {
  --c-dark-bg: #0c1116;          /* fond noir bleuté */
  --c-dark-bg-2: #131820;        /* alt légèrement plus clair */
  --c-cream: #d9d4cb;            /* texte cream izanami */
  --c-cream-muted: rgba(217, 212, 203, 0.55);
  --c-cream-soft: rgba(217, 212, 203, 0.82);
  --c-line: rgba(217, 212, 203, 0.18);
}

/* ---------- Conteneur de section sombre ---------- */
.ed {
  position: relative;
  background: var(--c-dark-bg);
  color: var(--c-cream);
  /* overflow: clip (au lieu de hidden) pour clipper visuellement les floats
     sans créer de scroll container — nécessaire pour que .ed__bg en position
     sticky s'épingle au viewport et non au box .ed. */
  overflow: clip;
}

.ed + .ed {
  border-top: 1px solid var(--c-line);
}
/* Pas de séparateur au-dessus des sections Rituel, Trois seuils et Programme */
.ed[data-section="journey"],
.ed[data-section="seuils"],
.ed[data-section="programme"] {
  border-top: 0;
}

/* =========================================================
   SECTION PROGRAMME — Carousel hublot (2 voyages × 2 dates)
   ========================================================= */
.ed--programme {
  padding: 0;
  position: relative;
  background: #0c1116;
}
.programme-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* Backgrounds (fondu d'opacité lent) — img full bleed pour combler 100vh */
.programme-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  overflow: hidden;
}
.programme-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.programme-bg.is-active {
  opacity: 1;
}
/* Voile sombre par-dessus le bg photo aérienne pour améliorer la lisibilité
   du texte blanc (04 JOURS, dates, CTAs) sur les zones claires (eau, ciel). */
.programme-bg.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
  z-index: 1;
}

/* Header fixe — 04 JOURS / pour revenir à vous */
.programme-header {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-top: clamp(50px, 8vw, 110px);
  color: #fff;
}
.programme-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: 0.06em;
}
.programme-subtitle {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 22px);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}

/* Track qui slide — transition très lente et douce */
.programme-track {
  position: relative;
  z-index: 2;
  display: flex;
  width: 200%;
  transform: translateX(0);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: clamp(50px, 7vw, 110px);
}
.programme-slide {
  flex: 0 0 50%;
  text-align: center;
  color: #fff;
  padding: 0 clamp(60px, 10vw, 160px);
  box-sizing: border-box;
}
.programme-slide__name {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: 0.01em;
}
.programme-slide__tag {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 22px);
  color: rgba(255, 255, 255, 0.88);
}
.programme-slide__dates {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 0 clamp(20px, 4vw, 60px);
  margin: clamp(40px, 5vw, 80px) auto 0;
  max-width: 720px;
  position: relative;
}
.programme-slide__dates::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: clamp(70px, 8vw, 120px);
  background: rgba(255, 255, 255, 0.5);
  justify-self: center;
}
.programme-date {
  grid-row: 1;
  text-align: center;
}
.programme-date:first-of-type { grid-column: 1; }
.programme-date:last-of-type  { grid-column: 3; }
.programme-date__range {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 26px);
  color: #fff;
}
/* Boutons : reprennent la structure .link.link--underline (même hover swipe) */
.programme-cta {
  display: inline-block;
  margin-top: clamp(14px, 1.5vw, 24px);
  font-size: clamp(15px, 1.3vw, 22px);
  /* annule le mix-blend-mode du .link (qui marche sur fond clair) — ici fond sombre */
  color: #fff;
  mix-blend-mode: normal;
}

/* Paiement en 3 fois : mention discrète sous chaque bouton Réserver (mailto) */
.programme-cta-alt {
  display: block;
  margin-top: clamp(8px, 0.9vw, 14px);
  font-size: clamp(12px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.75);
  mix-blend-mode: normal;
}

/* Liste d'attente : ligne discrète sous les deux dates (capture d'emails Systeme.io) */
.programme-waitlist {
  margin-top: clamp(20px, 2.4vw, 34px);
  text-align: center;
  font-size: clamp(13px, 1.05vw, 16px);
  color: rgba(255, 255, 255, 0.82);
}
.programme-waitlist .link {
  margin-left: 0.45em;
  color: #fff;
  mix-blend-mode: normal;
}

/* Footer : "voir le programme" en texte simple + ligne étoile filante */
.programme-footer {
  position: absolute;
  bottom: clamp(40px, 6vw, 90px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}

.programme-see {
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 22px);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}

/* Ligne verticale + segment lumineux qui descend en boucle (étoile filante) */
.programme-scroll-cue {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(48px, 6vw, 78px);
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.programme-scroll-cue::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: programme-shooting-star 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes programme-shooting-star {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(350%); opacity: 0; }
}

@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  /* Centre tout le contenu verticalement (header + track) sur mobile.
     Même structure pour TOUS les téléphones en paysage (viewport court) —
     le bloc mobile-landscape en fin de fichier affine par-dessus. */
  .programme-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0 140px;
  }
  .programme-header { padding-top: 0; }
  .programme-track { margin-top: clamp(28px, 5vw, 50px); }

  .programme-slide__dates {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 320px;
  }
  .programme-slide__dates::before { display: none; }
  .programme-date:first-of-type,
  .programme-date:last-of-type { grid-column: 1; }
  .programme-date:last-of-type { grid-row: 2; }

  .programme-subtitle { margin-top: 8px; }
  .programme-slide__tag { margin-top: 8px; }
}

/* ---------- Label vertical (signature) ----------
   Le label vit DANS un wrapper absolu qui s'étend sur toute la hauteur
   de la section. Le label lui-même est en position:sticky → il reste
   épinglé ~50px sous la navbar pendant qu'on scrolle dans sa section,
   puis disparaît avec la section quand on passe à la suivante. */
.ed__label-wrap {
  position: absolute;
  /* 12px de respiration en haut de section → au premier affichage, le label
     n'est pas collé au top pile-poil, ça respire mieux visuellement. */
  top: 12px;
  bottom: 0;
  /* Tous les labels alignés sur la même verticale que "Qui suis-je"
     (= sous le logo de la navbar). */
  left: calc(var(--pad-x) + 12px);
  width: max-content;
  z-index: 3;
  pointer-events: none;
  /* Fade only : opacity pilotée par la classe is-label-visible (ajoutée
     par ScrollTrigger.toggleClass dans main.js). Nom de classe distinct
     de is-revealed pour éviter tout conflit de cascade avec le système
     générique [data-reveal].is-revealed qui animait aussi opacity. */
  transform: none !important;
}

/* Sélecteur avec [data-reveal] pour spécificité 20 (classe + attribut) —
   supérieure au @media (prefers-reduced-motion) qui force sinon
   opacity:1 sur [data-reveal] et casse l'anim sur iOS/Safari où
   "Reduce Motion" est fréquemment activé par défaut. */
.ed__label-wrap[data-reveal] {
  opacity: 0 !important;
  transition: opacity 0.7s var(--ease-out-soft, ease-out) !important;
}
.ed__label-wrap[data-reveal].is-label-visible {
  opacity: 1 !important;
}
.ed__label-wrap--with-logo {
  /* Redondant maintenant que tous les labels partagent la même position,
     mais on garde le hook pour éviter de casser le HTML existant. */
  left: calc(var(--pad-x) + 12px);
}

.ed__label {
  position: sticky;
  /* Sticky offset = navbar (~80px) + 50px de respiration */
  top: clamp(90px, 9vw, 140px);
  display: block;
  width: max-content;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.7;
  /* Sens de lecture : top → bottom (= même sens que "Qui suis-je") */
  writing-mode: vertical-rl;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Titre éditorial ---------- */
.ed__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--c-cream);
  margin: 0 0 clamp(28px, 3vw, 44px);
}

/* En section 2 (philosophy), titre plus petit pour tenir en 2 lignes
   dans la colonne sans déborder sur l'image 3 à droite. */
.ed--philosophy .ed__title {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
}

/* ---------- Bloc socials sous le body (Retrouve moi ici + icônes) ---------- */
.ed__socials {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(36px, 4.5vw, 70px);
  font-family: var(--ff-display);
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.04em;
  /* Bleu foncé du site (même teinte que le titre "POURQUOI ?" et le body
     révélé) : contraste net sur le fond mountains clair où le bloc se pose */
  color: #09121C;

  /* Reveal : entre après le body (delay 0.95s) */
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.9s var(--ease-out-expo) 0.95s,
    transform 0.9s var(--ease-out-expo) 0.95s;
  will-change: opacity, transform;
}
.ed__socials.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ed__socials-text {
  white-space: nowrap;
}

/* Ligne éditoriale entre le texte et les icônes (même langage que .ed__cta-line) */
.ed__socials-line {
  display: block;
  width: 60px;
  height: 1px;
  background: currentColor;
}

.ed__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: inherit;
  transition: opacity 0.35s var(--ease-out-soft);
}
.ed__social-link:hover {
  opacity: 0.6;
}
.ed__social-link svg {
  width: 100%;
  height: 100%;
}
.ed__title--md {
  font-size: clamp(36px, 4.4vw, 60px);
}

/* ---------- Body éditorial ---------- */
.ed__body {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
  color: var(--c-cream-soft);
  margin: 0 0 clamp(40px, 4.5vw, 70px);
  max-width: 50ch;
}
.ed__body--md {
  font-size: clamp(15px, 1.1vw, 17px);
  max-width: 44ch;
}

/* ---------- CTA avec trait éditorial à gauche ---------- */
.ed__cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-family: var(--ff-display);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  text-decoration: none;
  cursor: pointer;
}
.ed__cta-line {
  display: block;
  width: 60px;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--ease-out-expo);
}
.ed__cta:hover .ed__cta-line {
  width: 100px;
}
.ed__cta--sm {
  gap: 16px;
  font-size: 13px;
}
.ed__cta--sm .ed__cta-line {
  width: 38px;
}
.ed__cta--sm:hover .ed__cta-line {
  width: 68px;
}

/* ---------- Bloc copy (titre + body + CTA) ---------- */
.ed__copy {
  position: relative;
  z-index: 2;
}

/* ---------- En-tête (avant sticky cards par ex) ---------- */
.ed__header {
  max-width: 1100px;
  margin: 0 auto clamp(80px, 10vw, 160px);
  padding-left: clamp(40px, 6vw, 100px);
}
.ed__header--narrow {
  max-width: 720px;
}

/* =========================================================
   SECTION BG LAYER (pattern izanami)
   Plein viewport, sticky top, opacity scrubbée par ScrollTrigger
   pour crossfader entre les bgs de sections successives.

   - position: sticky + height: 100svh → reste épinglé au viewport
     pendant qu'on scrolle dans la section.
   - margin-bottom: -100svh → ne pousse pas le contenu en dessous.
   - left + transform + width: 100vw → casse les paddings horizontaux
     du .ed pour un bg vraiment full-bleed.
   ========================================================= */
.ed__bg {
  /* Plus de sticky : le bg scrolle avec la section, mais sa translation
     est ralentie par JS (parallaxe). Position absolute → ne contribue
     pas au flow, peut donc avoir n'importe quelle hauteur sans pousser
     le contenu. Le parent .ed reçoit position:relative dynamiquement. */
  position: absolute;
  top: 0;
  left: calc(-1 * var(--pad-x));
  width: calc(100% + 2 * var(--pad-x));
  /* aspect-ratio défini en JS depuis les dimensions naturelles de l'image
     → hauteur calculée automatiquement pour montrer l'image en entier sans
     crop (cover devient identique à contain quand canvas et texture ont
     le même aspect). */
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;             /* fade-in via JS au scroll-enter de la section */
  will-change: opacity, transform;
  /* Mask doux uniquement aux extrémités → évite la coupure nette quand le
     bord haut du bg apparaît à la transition entre sections. La majeure
     partie du bg (12%-88%) reste pleinement opaque, image visible. */
  /* Fondu doux aux 2 extrémités :
     - top 0→10% : transparent → opaque → adoucit le cut net entre la
       section précédente et le bord supérieur de l'image
     - bottom 80%→100% : opaque → transparent → fondu vers la section
       suivante */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 80%,
    transparent 100%
  );
}

/* =========================================================
   SECTION 2 — PHILOSOPHIE (floating images + texte décalé)
   ========================================================= */
.ed--philosophy {
  /* Hauteur en svh (pas d'aspect-ratio image) → l'image est portée par
     .ed__bg en sticky/cover, à la izanami. ~280svh donne assez de scroll
     pour bien pin le bg et faire crossfade avec hero / section suivante. */
  min-height: 280svh;
  /* Fond transparent : pendant la transition, le hero (pinné derrière) se
     voit à travers les zones non couvertes par .ed__bg. Évite le rectangle
     noir entre hero et image S2. Après la transition, body bg (#0c1116 =
     même que --c-dark-bg) prend le relais. */
  background: transparent;
}

.ed-float {
  position: absolute;
  margin: 0;
  z-index: 1;
  overflow: hidden;
}

/* Image fille : 130% de la hauteur du container → 30% de "réserve" pour
   la parallaxe Y. ScrollTrigger anime translateY entre 0 et -23%
   (= -30% du container). object-fit:cover gère le crop horizontal. */
.ed-float > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}

/* Image 1 : carré, haut-gauche, plus petit */
.ed--philosophy .ed-float--01 {
  top: 18vh;
  left: 9vw;
  width: 21vw;
  max-width: 380px;
  aspect-ratio: 1 / 1;
}
/* Image 2 : portrait, droite milieu, plus haut.
   z-index: 2 → passe devant l'image 3 (overlap diagonal façon izanami :
   la petite image chevauche le coin supérieur de la grande). */
.ed--philosophy .ed-float--02 {
  top: 38vh;
  right: 14vw;
  width: 19vw;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  z-index: 2;
}
/* Image 3 : grand portrait, droite — remontée pour ne laisser dépasser
   que ~1/4 de la "Cascade" (image 2) au-dessus. La hauteur de l'image 2
   = 19vw × 4/3 ≈ 25.3vw ; 1/4 ≈ 6.3vw → offset depuis le top de l'image 2. */
.ed--philosophy .ed-float--03 {
  top: calc(38vh + 6.3vw);
  right: 6vw;
  width: 38vw;
  max-width: 720px;
  aspect-ratio: 3 / 4;
}

/* Bloc texte : placé sous l'image 1 (top 18vh + height 21vw) et
   verticalement centré sur l'image 3 (jardin zen).
   image3.center_y = (38vh + 6.3vw) + (38vw × 4/3)/2 = 38vh + 31.63vw
   translateY(-50%) → centre du bloc = ce point.
   left: 9vw = aligné EXACTEMENT avec le left de l'image 1.
   max-width capé pour ne pas déborder sur l'image 3 (left = 100% - 44vw)
   → max-width < 100% - 53vw = 47vw, on cape à 660px. */
.ed--philosophy .ed__copy {
  position: absolute;
  top: calc(38vh + 31.63vw);
  transform: translateY(-50%);
  left: 9vw;
  max-width: clamp(320px, 47vw, 660px);
}

/* ---------- Text-reveal (Splitting + GSAP scrub) ---------- */
/* Bloc texte centré sous le 1er copy. Position absolute dans la section
   pour le placer dans la moitié basse (au-delà du copy à 38vh + 31.63vw).
   Chaque char est wrappé par Splitting.js dans <span class="char"> →
   gsap.from anime color de gris foncé vers la couleur cream au scroll. */
/* Wrapper du bloc révélation : positionné absolu, contient titre + corps
   + signature en flow normal centré. Bottom calé à 600px du bas de la
   section. */
.ed--philosophy .text-reveal-block {
  position: absolute;
  /* Réduit du legacy 250px → 130px : pousse le bloc entier (titre + texte)
     ~120px vers le bas → le titre "POURQUOI ?" reste sous la navbar frosted
     pendant le pin scroll-reveal (sinon il glissait sous la navbar sur
     desktop). Écart titre/texte inchangé (margin sur .text-reveal-title). */
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1150px, calc(100vw - clamp(40px, 8vw, 120px)));
  text-align: center;
  z-index: 2;
}

/* Titre "POURQUOI ?" — même taille que les titres .ed__title de section 2,
   blanc pur fixe (pas d'animation de remplissage). */
.ed--philosophy .text-reveal-title {
  /* margin-bottom = gap titre→texte. À 1440px on vise 150px. */
  margin: 0 0 clamp(80px, 10.4vw, 160px);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #ffffff;
}

/* Corps du texte : typo alignée sur .ed__body */
.ed--philosophy .text-reveal {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 2;
  letter-spacing: 0;
  /* État initial = sombre. Les chars sont scrub-animés vers le blanc
     pendant le pin de la section (cf. main.js setupTextReveal). */
  color: #09121C;
}

/* Signature "Avec amour — Mennel" — reçoit le même reveal scrub (même couleurs)
   à la suite du paragraphe principal. */
.ed--philosophy .text-reveal-sig {
  margin: clamp(28px, 3.5vw, 56px) 0 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.04em;
  color: #09121C;
}

/* Splitting wrap chaque char dans .char — display inline-block pour
   préserver le flow tout en permettant les transformations propres. */
.ed--philosophy .text-reveal .char,
.ed--philosophy .text-reveal-title .char,
.ed--philosophy .text-reveal-sig .char {
  display: inline-block;
  will-change: color;
}

/* ---------- Label "Qui suis-je" — plus de variante spécifique :
   le sens de lecture top→bottom et l'alignement sous le logo sont
   désormais les défauts de .ed__label / .ed__label-wrap. Le hook
   reste pour ne pas casser le HTML existant. */
.ed__label--with-logo {
  /* nothing — partage le style de base */
}

/* =========================================================
   SECTION 2 — REVEAL izanami (clip-path + line-by-line)
   ========================================================= */

/* Images flottantes : reveal en mask vertical (top → bottom).
   Cible aussi bien .placeholder que <img> direct (selon le contenu). */
[data-ed-reveal].ed-float > .placeholder,
[data-ed-reveal].ed-float > img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s var(--ease-out-expo);
  will-change: clip-path, transform;
}
[data-ed-reveal].ed-float.is-revealed > .placeholder,
[data-ed-reveal].ed-float.is-revealed > img {
  clip-path: inset(0 0 0 0);
}

/* Texte : lines wrapper avec overflow:hidden, inner translate Y → 0 */
.rline {
  display: block;
  overflow: hidden;
  /* hauteur intrinsèque = line-height — pas de marge */
}
.rline > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out-expo);
  will-change: transform;
}
.ed__title--reveal.is-revealed .rline > span,
.ed__body--reveal.is-revealed .rline > span {
  transform: translate3d(0, 0, 0);
}

/* Stagger des lignes du titre */
.ed__title--reveal.is-revealed .rline:nth-child(1) > span { transition-delay: 0.05s; }
.ed__title--reveal.is-revealed .rline:nth-child(2) > span { transition-delay: 0.15s; }
.ed__title--reveal.is-revealed .rline:nth-child(3) > span { transition-delay: 0.25s; }
.ed__title--reveal.is-revealed .rline:nth-child(4) > span { transition-delay: 0.35s; }

/* Stagger body, lance après le titre */
.ed__body--reveal.is-revealed .rline:nth-child(1) > span { transition-delay: 0.45s; }
.ed__body--reveal.is-revealed .rline:nth-child(2) > span { transition-delay: 0.55s; }
.ed__body--reveal.is-revealed .rline:nth-child(3) > span { transition-delay: 0.65s; }

/* CTA : simple fade-up */
.ed__cta--reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.9s var(--ease-out-expo) 0.8s,
    transform 0.9s var(--ease-out-expo) 0.8s;
  will-change: opacity, transform;
}
.ed__cta--reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   SECTION 3 — LE VOYAGE (sticky cards style izanami)
   ========================================================= */
.ed--journey {
  padding-top: 8vw;
  padding-bottom: 0;
}

/* Seuils : pas de padding-top → la card 1 démarre au top de la section, donc
   le label vertical "TROIS SEUILS" (sticky) apparaît pile en même temps que
   le top de la card, aligné visuellement avec elle. */
.ed[data-section="seuils"] {
  padding-top: 0;
}

/* Rituel : padding-bottom pour respirer avant les seuils (sinon les
   citations Maya Angelou collent au top de la card "Le silence"). */
.ed[data-section="journey"] {
  padding-bottom: clamp(70px, 8vw, 140px);
}

/* =========================================================
   SECTION 4 — PRATIQUE (trips list)
   ========================================================= */
.ed--practice .ed__header {
  text-align: left;
}

.trips {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  border-top: 1px solid var(--c-line);
}
.trip {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr auto;
  gap: clamp(20px, 3vw, 60px);
  align-items: center;
  padding: clamp(28px, 3.2vw, 44px) 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--ff-display);
}
.trip__season {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-cream-muted);
}
.trip__dates {
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  margin: 0;
  color: var(--c-cream);
}
.trip__price {
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--c-cream-soft);
}

/* =========================================================
   SECTION 5 — FAQ
   ========================================================= */
.ed--faq {
  min-height: 100svh;
  display: grid;
  grid-template-columns: auto auto;
  gap: 200px;
  align-items: center;
  justify-content: center;
  /* iOS Safari : mix-blend-mode du .faq-bg-img exige un stacking context
     avec une surface opaque pour rendre le screen. Sans ça, le blend
     est ignoré sur iPhone (alors qu'il marche partout ailleurs). */
  background-color: #0c1116;
  isolation: isolate;
  transform: translateZ(0);
  padding-top: clamp(100px, 12vw, 180px);
  padding-bottom: clamp(100px, 12vw, 180px);
  position: relative;
  overflow: clip;
}

.faq-bg-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* Image pré-composée sur #0c1116 (= body bg) → pas d'alpha, pas de
     blend mode. Rend identique sur tout navigateur, y compris Safari iOS
     qui buggue avec les bords alpha WebP. */
  background-image: url("./assets/img-sec-faq-flat.webp");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  mix-blend-mode: lighten;
  opacity: 0.85;
}

.faq-sticky {
  position: sticky;
  top: clamp(120px, 18vh, 200px);
  align-self: start;
}

.faq-title {
  margin: 0;
}

.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--c-line);
}
.faq-item:first-child {
  border-top: 1px solid var(--c-line);
}

.faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--c-cream);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-align: left;
  padding: clamp(22px, 2.4vw, 32px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  transition: opacity 0.35s var(--ease-out-soft);
}
.faq-q:hover {
  opacity: 0.75;
}

.faq-q__text {
  flex: 1;
}

.faq-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--c-cream);
  transition: transform 0.45s var(--ease-out-expo);
}
.faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-out-expo);
}
.faq-a p {
  font-family: var(--ff-display);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--c-cream-soft);
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  max-width: 56ch;
}

/* =========================================================
   PLACEHOLDERS image (variante dark)
   ========================================================= */
.placeholder {
  position: relative;
  width: 100%;
  background:
    linear-gradient(135deg, rgba(217, 212, 203, 0.04), rgba(217, 212, 203, 0.09)),
    repeating-linear-gradient(
      45deg,
      rgba(217, 212, 203, 0.025) 0 8px,
      transparent 8px 18px
    );
  border: 1px dashed rgba(217, 212, 203, 0.14);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  background: url("./assets/logo-mennel.svg") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.22;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 22px));
}

.placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(217, 212, 203, 0.55);
  background: rgba(12, 17, 22, 0.5);
  border: 1px solid rgba(217, 212, 203, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* aspect ratios via data-ratio */
.placeholder[data-ratio="16/10"] { aspect-ratio: 16 / 10; }
.placeholder[data-ratio="3/4"]   { aspect-ratio: 3 / 4; }
.placeholder[data-ratio="1/1"]   { aspect-ratio: 1 / 1; }
.placeholder[data-ratio="21/9"]  { aspect-ratio: 21 / 9; }
.placeholder--square             { aspect-ratio: 1 / 1; }
.placeholder--portrait           { aspect-ratio: 3 / 4; }
.placeholder--landscape          { aspect-ratio: 16 / 10; }

/* =========================================================
   STICKY CARDS (pattern izanami, version dark)
   ========================================================= */
.sticky-stack {
  position: relative;
}

.sticky-card {
  position: relative;
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
  background: var(--c-dark-bg);
  /* pinning géré par ScrollTrigger.pin */
}

.sticky-card--01,
.sticky-card--02,
.sticky-card--03,
.sticky-card--04 {
  clip-path: inset(0 -100vw);
}

.sticky-card__bg {
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  height: 130%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  opacity: 0.55;
}

.sticky-card--01 .sticky-card__inner,
.sticky-card--01 .sticky-card__num,
.sticky-card--02 .sticky-card__inner,
.sticky-card--02 .sticky-card__num,
.sticky-card--03 .sticky-card__inner,
.sticky-card--03 .sticky-card__num,
.sticky-card--04 .sticky-card__inner,
.sticky-card--04 .sticky-card__num {
  position: relative;
  z-index: 1;
}

.sticky-card__num {
  position: absolute;
  /* aligné verticalement avec le CTA (= padding-bottom de .sticky-card__inner) */
  bottom: calc(clamp(80px, 12vh, 140px) + 2px);
  left: calc(var(--pad-x) + 12px);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--c-cream);
  opacity: 0.6;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.sticky-card__subtitle {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  color: var(--c-cream);
  margin: 0;
  max-width: 36ch;
}

.sticky-card__inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  /* top padding = laisse passer la sticky label PROJECTS ; bottom = laisse passer le num */
  padding: clamp(100px, 16vh, 180px) var(--pad-x) clamp(80px, 12vh, 140px);
  display: grid;
  /* Colonne texte élargie pour que les titres longs (ex. "La déconnexion")
     tiennent en 2 lignes propres, sans césure ni crop. */
  grid-template-columns: clamp(360px, 28vw, 520px) 22.5vw;
  justify-content: space-between;
  align-items: stretch;
  min-height: 100svh;
  box-sizing: border-box;
  gap: 0;
}

.sticky-card__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* dégage la label verticale "QUATRE SEUILS" — réduit un peu (5vw→3.5vw)
     pour rendre l'espace au texte, donc au titre. */
  padding-left: clamp(30px, 3.5vw, 60px);
}

.sticky-card__title {
  font-family: var(--ff-display);
  font-weight: 400;
  /* Font-size réduit (max 54px vs 64px avant) pour que "La déconnexion"
     tienne visuellement dans la colonne texte sans être coupé, tout en
     restant sur une seule ligne. */
  font-size: clamp(34px, 3.5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-cream);
  white-space: nowrap;
  /* La boîte suit la largeur du texte : sans ça, les titres plus larges que
     la colonne ("Les aurores boréales" à 54px ≈ 594px vs colonne 520px)
     étaient CLIPPÉS par le wrapper d'animation .lr-line (overflow:hidden).
     Le titre peut déborder dans le gap entre colonnes — voulu, une ligne.
     Les blocs responsive qui autorisent le wrap remettent width:auto. */
  width: max-content;
}

.sticky-card__desc {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--c-cream-soft);
  margin: 0;
  max-width: 38ch;
}

/* CTA poussée vers le bas de la colonne texte (alignée bas du visuel) */
.sticky-card__text .ed__cta {
  margin-top: auto;
}

.sticky-card__media {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.sticky-card__media .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 60svh;
}

.sticky-card__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 60svh;
  margin: 0;
  overflow: hidden;
}

.sticky-card__img-wrap > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center bottom;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================================================
   FOOTER ÉDITORIAL (dark, multi-colonnes, horloges)
   ========================================================= */
/* =========================================================
   LOADER (intro façon izanami)
   ========================================================= */
body.is-loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--c-dark-bg);
  overflow: hidden;
  pointer-events: auto;
}
.loader__inner {
  position: relative;
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
}
/* Calque du .hero__center pour alignement vertical identique.
   Devient un conteneur flex pour poser le logo À CÔTÉ du titre :
   - paysage : logo à droite du titre (row)
   - portrait : logo au-dessus du titre (column-reverse) */
.loader__center {
  margin-left: var(--center-left);
  margin-right: var(--pad-x);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.loader__text {
  max-width: 60ch;
}
/* Portrait : logo au-dessus du titre ET centré horizontalement au milieu de
   l'écran (le titre, lui, reste à sa position d'origine, alignée à gauche). */
@media (orientation: portrait) {
  .loader__center {
    flex-direction: column-reverse;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    gap: clamp(28px, 7vw, 56px);
  }
  .loader__text {
    align-self: flex-start;
    padding-left: var(--center-left);
    padding-right: var(--pad-x);
  }
  .loader__logo-wrap {
    width: min(66vw, 40vh, 380px);
  }
}

/* ---------- Logo du loader (grand) ----------
   L'animation (traits révélés dans le sens horaire + ADN en fondu) est gérée
   côté JS sur le SVG injecté (masque secteur SVG + opacity). Le filtre rend
   le logo blanc sur le fond sombre. L'<img> reste en fallback statique si le
   SVG animé ne se charge pas. */
.loader__logo-wrap {
  flex-shrink: 0;
  width: clamp(240px, 32vw, 460px);
  aspect-ratio: 1 / 1;
  filter: brightness(0) invert(1);
  /* Caché tant que le SVG animé n'est pas injecté et prêt : évite le flash
     de l'<img> statique (logo complet) avant que l'animation démarre. Le JS
     remet opacity:1 au lancement de l'anim (ou en fallback si fetch échoue). */
  opacity: 0;
}
.loader__logo,
.loader__logo-wrap svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.loader__title {
  margin: 0 0 12px 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff;
}
.loader__title-text {
  display: inline-block;
  opacity: 0;
}
.loader__title-text .char {
  display: inline;
  opacity: 0;
  will-change: opacity;
}
/* sous-titre invisible qui occupe l'espace pour pousser le titre comme dans .hero__center */
.loader__subtitle-spacer {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-subtitle);
  line-height: 1.3;
  letter-spacing: 0.005em;
  margin: 0;
  visibility: hidden;
}
.loader__progress {
  position: absolute;
  left: var(--center-left);
  bottom: clamp(20px, 3vw, 40px);
}
.loader__number {
  font-family: var(--ff-display);
  font-size: clamp(11px, 0.9vw, 13px);
  color: #fff;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .loader__progress { left: var(--center-left); bottom: clamp(20px, 6vw, 40px); }
}

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--c-dark-bg);
  color: var(--c-cream-soft);
  padding: clamp(80px, 10vw, 160px) var(--pad-x) clamp(30px, 3vw, 50px);
  border-top: 1px solid var(--c-line);
}

.footer-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to top, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
}
.footer-dots canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(60px, 8vw, 120px);
}
.site-footer__brand img {
  width: 96px;
  height: 96px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
/* Desktop + laptop uniquement (paysage large, aspect ≥ 1.46 pour exclure
   les tablettes) : logo du pied de page doublé (96 → 192px). Mobile et
   tablettes gardent 96px. */
@media (min-width: 1280px) and (min-aspect-ratio: 146/100) {
  .site-footer__brand img {
    width: 192px;
    height: 192px;
  }
}
.site-footer__brand-name {
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.5vw, 26px);
  letter-spacing: 0.01em;
  color: var(--c-cream);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 80px);
  margin-bottom: clamp(60px, 8vw, 120px);
}
/* Desktop : HTML = Nav, Contact, Suivre, Horaire.
   On veut afficher : Nav, Suivre, Contact, Horaire (Suivre et Contact swap). */
.site-footer__cols > .site-footer__col:nth-child(1) { order: 1; }
.site-footer__cols > .site-footer__col:nth-child(2) { order: 3; } /* Contact → 3e */
.site-footer__cols > .site-footer__col:nth-child(3) { order: 2; } /* Suivre → 2e */
.site-footer__cols > .site-footer__col:nth-child(4) { order: 4; }

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--ff-display);
  font-size: 14px;
}

.site-footer__col-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream-muted);
  margin-bottom: 6px;
}

.site-footer__col a {
  color: var(--c-cream-soft);
  transition: color 0.3s var(--ease-out-soft);
}
.site-footer__col a:hover {
  color: var(--c-cream);
}

/* Horloge live (Luleå, Paris) */
.site-footer__clock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--c-cream-soft);
  font-variant-numeric: tabular-nums;
}
.site-footer__clock-time {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--c-cream);
}
.site-footer__clock-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cream-muted);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(24px, 2vw, 36px);
  border-top: 1px solid var(--c-line);
  font-family: var(--ff-display);
  font-size: 13px;
  color: var(--c-cream-muted);
  max-width: 1400px;
  margin: 0 auto;
}

/* =========================================================
   PERF HINTS
   ========================================================= */
/* GPU promotion sur éléments parallaxés ou scrubés (sans override transform) */
.sticky-card__bg,
.faq-bg-img,
[data-card-parallax] > img,
.ed-float > img,
.programme-bg,
.triptyque-diagram {
  will-change: transform;
  backface-visibility: hidden;
}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
/* Base : fade + slide up (défaut) */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1.1s var(--ease-out-expo),
    transform 1.1s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variantes directionnelles */
[data-reveal="left"]  { transform: translate3d(-40px, 0, 0); }
[data-reveal="right"] { transform: translate3d(40px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed { transform: translate3d(0, 0, 0); }
[data-reveal="zoom"].is-revealed  { transform: scale(1); }

/* Mask reveal — clip-path slide. Idéal pour images / médias.
   L'élément lui-même reste à opacity:1 ; le clip-path révèle le contenu. */
[data-reveal="mask-up"],
[data-reveal="mask-right"],
[data-reveal="mask-left"] {
  opacity: 1;
  transform: none;
  transition: clip-path 1.4s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
  will-change: clip-path;
}
[data-reveal="mask-up"]    { clip-path: inset(0 0 100% 0); }
[data-reveal="mask-right"] { clip-path: inset(0 100% 0 0); }
[data-reveal="mask-left"]  { clip-path: inset(0 0 0 100%); }
[data-reveal="mask-up"].is-revealed,
[data-reveal="mask-right"].is-revealed,
[data-reveal="mask-left"].is-revealed { clip-path: inset(0 0 0 0); }

/* Stagger : parent reçoit is-revealed → enfants apparaissent en cascade */
[data-reveal-stagger] .reveal-stagger-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-reveal-stagger].is-revealed .reveal-stagger-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Line-reveal : titres splittés en lignes, slide-up depuis sous la baseline.
   Le wrapper porte data-line-reveal ; le JS injecte les wrappers .lr-line. */
[data-line-reveal] .lr-line {
  display: block;
  overflow: hidden;
}
[data-line-reveal] .lr-line > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out-expo);
  transition-delay: calc(var(--lr-i, 0) * 90ms + var(--reveal-delay, 0s));
  will-change: transform;
}
[data-line-reveal].is-revealed .lr-line > span {
  transform: translate3d(0, 0, 0);
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] .reveal-stagger-item,
  [data-line-reveal] .lr-line > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .topbar,
  .footbar {
    padding-left: clamp(20px, 5vw, 60px);
    padding-right: clamp(20px, 5vw, 60px);
  }
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .sticky-card__inner,
  .sticky-card__inner--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Bloc mobile de base — s'applique aussi à TOUS les téléphones en paysage
   (viewport court) : même structure que le portrait / le 667×375, le bloc
   mobile-landscape en fin de fichier compacte ensuite ce qui doit l'être. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  :root {
    --fs-title: clamp(28px, 8vw, 40px);
    --fs-subtitle: clamp(18px, 5vw, 26px);
    --fs-meta: 14px;
    --fs-nav: 14px;
  }

  .hero__center {
    left: clamp(20px, 6vw, 40px);
    right: clamp(20px, 6vw, 40px);
    max-width: none;
  }
  /* Sous-titre aligné sur la gauche du titre (comme desktop) — plus de
     centrage qui le désolidarisait du titre. */
  .hero__subtitle {
    text-align: left;
  }

  .topbar__logo img {
    width: auto;
    height: 38px;
  }

  /* Mobile : blur réduit (10px vs 14px desktop) — la vraie source des
     lags de scroll était les shaders WebGL sur les sections 1+2 (désormais
     désactivés sur mobile), le backdrop-filter tout seul passe. */
  .topbar::before {
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }

  /* =========================================================
     PHILOSOPHIE — disposition mobile à la izanami :
     1. label vertical (absolute, gauche)
     2. image 1 carrée poussée à droite
     3. bloc texte (titre + body + CTA) pleine largeur
     4. image 2 (portrait) right-aligned
     5. image 3 (grande) left-aligned, overlap diagonal sur image 2
     ========================================================= */
  .ed--philosophy {
    min-height: auto;
    padding: clamp(80px, 18vw, 140px) var(--pad-x)
      clamp(60px, 14vw, 120px);
    display: flex;
    flex-direction: column;
  }
  .ed--philosophy > .ed-float,
  .ed--philosophy > .ed__copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    max-width: none;
  }
  /* Mobile : wrapper du label collé au bord gauche + on shift le contenu
     de la philosophy vers la droite pour ne pas empiéter sur le label
     vertical (sinon le "QUI SUIS-JE" touche le corps de texte). */
  .ed--philosophy .ed__label-wrap,
  .ed__label-wrap {
    left: 4px;
  }
  .ed__label {
    top: clamp(70px, 16vw, 100px);
  }
  /* Espace réservé au label sur les enfants (padding-left en plus du
     padding hérité de var(--pad-x) sur la section) */
  .ed--philosophy > .ed-float,
  .ed--philosophy > .ed__copy,
  .ed--philosophy > .text-reveal-block {
    padding-left: 22px;
  }

  .ed--philosophy .ed-float--01 {
    order: 1;
    align-self: flex-end;
    width: 62%;
    margin: 0 0 clamp(60px, 16vw, 110px) 0;
  }

  .ed--philosophy .ed__copy {
    order: 2;
    width: 100%;
    margin: 0 0 clamp(70px, 18vw, 130px);
    transform: none;
  }
  .ed--philosophy .ed__title {
    font-size: clamp(30px, 9vw, 44px);
  }
  .ed--philosophy .ed__body {
    font-size: clamp(15px, 4vw, 17px);
    max-width: none;
  }

  .ed--philosophy .ed-float--02 {
    order: 3;
    align-self: flex-end;
    width: 56%;
    margin: 0 0 -22% 0; /* overlap diagonal sur l'image 3 en dessous */
    z-index: 2;
  }

  .ed--philosophy .ed-float--03 {
    order: 4;
    align-self: flex-start;
    width: 72%;
    margin: 0;
    z-index: 1;
  }

  /* Mobile : pas de bg fluid (un bg dédié sera fourni séparément) */
  .ed--philosophy .ed__bg { display: none; }

  /* Isolation sur la section → contient le pseudo bg en z:-1 dans le
     contexte de la section. Sans ça, z:-1 s'échappe jusqu'à main et
     l'image n'est plus visible. */
  .ed--philosophy { isolation: isolate; }

  /* Bloc révélation : flow normal en mobile (dernier item du flex column). */
  .ed--philosophy .text-reveal-block {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    order: 5;
    margin: clamp(80px, 20vw, 140px) 0 0;
    text-align: center;
    /* Reset le z-index:2 du desktop — sinon il crée un stacking context
       qui piège le pseudo bg en z:-1 et l'empêche de passer sous les floats. */
    z-index: auto;
  }
  /* Mobile : image bg-section-2 en fond du bloc révélation (couvre title + body).
     Mask linéaire haut/bas → bords dissimulés sans bordure nette.
     Pas d'isolation : le z-index:-1 doit s'échapper du bloc pour passer
     SOUS les ed-float--02/03 (z:1,2). */
  .ed--philosophy .text-reveal-block::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 150px);
    left: calc(-1 * var(--pad-x));
    right: calc(-1 * var(--pad-x));
    aspect-ratio: 1600 / 2000;
    background: url("./assets/bg-section-2.webp") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 18%,
      #000 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 18%,
      #000 82%,
      transparent 100%
    );
    pointer-events: none;
    z-index: -1;
  }
  /* "POURQUOI ?" — même typo que les titres ed__title de la section */
  .ed--philosophy .text-reveal-title {
    font-size: clamp(30px, 9vw, 44px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.012em;
    text-align: center;
    margin: 0 0 clamp(28px, 6vw, 44px);
  }
  /* Body : paramètres .ed__body, couleur dark de base (révélée en blanc au scroll) */
  .ed--philosophy .text-reveal {
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.65;
    text-align: left;
    color: #09121C;
  }
  .ed--philosophy .text-reveal-sig {
    font-size: clamp(13px, 3.6vw, 16px);
    margin-top: clamp(20px, 6vw, 36px);
    text-align: left;
    color: #09121C;
  }

  /* Trois seuils : pas de padding-top section → card 1 commence au top.
     Le label sticky s'aligne ainsi naturellement avec le top de card 1. */
  [data-section="seuils"] { padding-top: 0; }

  /* Mobile : pin ScrollTrigger réactivé → cards qui se chevauchent au scroll.
     100svh (small viewport height, statique) au lieu de 100dvh — dvh change
     quand la URL bar iOS Safari s'affiche/cache, ce qui fait recalculer les
     pins ScrollTrigger et crée un décalage visible pendant le scroll tactile. */
  .sticky-card {
    height: 100svh;
    align-items: stretch;
  }
  .sticky-card__inner {
    min-height: 100svh;
    padding: 70px var(--pad-x) 40px;
    gap: 18px;
    /* Row 1 = texte (auto), row 2 = image qui prend le reste → image
       naturellement en format portrait selon l'espace disponible. */
    grid-template-rows: auto 1fr;
  }
  .sticky-card__text {
    padding-left: clamp(26px, 7vw, 50px);
    padding-right: 4px;
    gap: 10px;
    min-height: 0;
  }
  .sticky-card__title {
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.02;
  }
  .sticky-card__subtitle {
    font-size: clamp(14px, 3.8vw, 18px);
    line-height: 1.3;
    max-width: none;
  }
  .sticky-card__desc {
    font-size: clamp(12.5px, 3.4vw, 15px);
    line-height: 1.5;
    max-width: none;
  }
  .sticky-card__text .ed__cta {
    margin-top: 4px;
    font-size: 12px;
  }
  .sticky-card__media {
    justify-content: stretch;
  }
  .sticky-card__img-wrap,
  .sticky-card__media .placeholder {
    /* Reset les min/max qui plaquaient l'image en quasi-carré. La row 1fr
       du grid-template-rows du parent prend le relais → l'image remplit
       naturellement l'espace restant en dessous du texte (format portrait). */
    min-height: 0;
    max-height: none;
    height: 100%;
  }
  .sticky-card__num {
    bottom: 14px;
    left: calc(var(--pad-x) + 4px);
    font-size: 12px;
  }

  /* "Retrouve moi ici" + trait + icônes : rester en cream sur mobile (le
     fond mobile de la philosophy est plus sombre → le bleu foncé desktop
     ne serait plus lisible). */
  .ed__socials {
    color: var(--c-cream);
  }

  /* Rituel : marge bottom pour pas que les citations collent les seuils */
  [data-section="journey"] { padding-bottom: clamp(60px, 14vw, 100px); }

  .ed--faq {
    grid-template-columns: 1fr;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    padding-top: clamp(40px, 10vw, 100px);
    gap: clamp(20px, 4vw, 40px);
    position: relative;
  }
  .faq-bg-img {
    position: relative;
    left: auto;
    bottom: auto;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    width: calc(100% + 2 * var(--pad-x));
    /* Hauteur mobile : ratio image source 951x810 ≈ 1.17 */
    aspect-ratio: 951 / 810;
    height: auto;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
  }
  .faq-sticky {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    z-index: 1;
    padding-top: clamp(40px, 10vw, 90px);
  }
  .faq-list {
    grid-column: 1;
    grid-row: 2;
  }

  .trip {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Mobile : grid 2 colonnes × 2 lignes, flow par colonne.
     Ordre HTML (Nav, Contact, Suivre, Horaire) → col1: Nav/Contact,
     col2: Suivre/Horaire alignés en haut. */
  .site-footer__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: clamp(20px, 5vw, 40px);
    row-gap: clamp(36px, 8vw, 60px);
  }
  .site-footer__col {
    min-width: 0;
  }
  /* Empêche les longs mots (email, urls) de déborder de leur colonne */
  .site-footer__col a,
  .site-footer__col span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* =========================================================
   TRIPTYQUE RITUEL — bloc + animations (porté de Mennel)
   ========================================================= */
.rituel-block {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(40px, 6vw, 90px);
}
.kicker {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
}
.kicker-light { color: #fff; }
.rituel-block .kicker {
  font-size: clamp(22px, 1.875vw, 36px);
}
.triptyque-subtitle {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(16px, 1.25vw, 24px);
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
}
.triptyque-diagram {
  position: relative;
  width: min(90vw, 500px);
  margin: 3rem auto 0;
}
.triptyque-diagram svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}

/* Floating particles — wrapper = repulsion souris, inner = float keyframe */
.triptyque-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* Mobile : on ne garde qu'une moitié des particules pour alléger la scène */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .triptyque-particle:nth-child(2n) { display: none; }
}
.triptyque-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.triptyque-particle i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #7FD9C8;
  box-shadow: 0 0 8px #7FD9C8, 0 0 16px rgba(127, 217, 200, 0.4);
  animation: particle-float var(--d, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.6;
}
@keyframes particle-float {
  0%, 100% { transform: translateY(0)    translateX(0); opacity: 0.3; }
  25%      { transform: translateY(-12px) translateX(6px);  opacity: 0.8; }
  50%      { transform: translateY(-20px) translateX(0);  opacity: 1; }
  75%      { transform: translateY(-10px) translateX(-6px); opacity: 0.7; }
}

/* Labels */
.triptyque-label {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 30px;
  fill: white;
  letter-spacing: 0.02em;
}

/* 3 cercles principaux — shimmer */
.triptyque-circle {
  animation: circle-shimmer 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.triptyque-circle:nth-of-type(2) { animation-delay: 1.4s; }
.triptyque-circle:nth-of-type(3) { animation-delay: 2.8s; }
@keyframes circle-shimmer {
  0%, 100% { stroke-opacity: 0.35; }
  50%      { stroke-opacity: 0.75; }
}

/* 3 cercles pointillés — rotations différenciées */
.dashed {
  transform-box: fill-box;
  transform-origin: center;
}
.dashed-1 { animation: rotate-cw  70s linear infinite; }
.dashed-2 { animation: rotate-ccw 110s linear infinite; }
.dashed-3 { animation: rotate-cw  50s linear infinite; }
@keyframes rotate-cw  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Halo central qui respire */
.triptyque-glow-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: halo-breathe 5s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.5;  transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}

.triptyque-glow-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: core-pulse 3s ease-in-out infinite;
}
@keyframes core-pulse {
  0%, 100% { opacity: 0.7; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* Ondes émanant du centre */
.triptyque-wave {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: wave-emit 6s ease-out infinite;
}
.wave-1 { animation-delay: 0s; }
.wave-2 { animation-delay: 2s; }
.wave-3 { animation-delay: 4s; }
@keyframes wave-emit {
  0%   { opacity: 0.7;  transform: scale(0.4); stroke-width: 2.5; }
  60%  { opacity: 0.25; }
  100% { opacity: 0;    transform: scale(2.8); stroke-width: 0.5; }
}

/* Dots — pulse */
.triptyque-dots circle {
  animation: dot-pulse 3s ease-in-out infinite;
}
.triptyque-dots circle:nth-child(2)  { animation-delay: 0.3s; }
.triptyque-dots circle:nth-child(3)  { animation-delay: 0.6s; }
.triptyque-dots circle:nth-child(7)  { animation-delay: 1.2s; }
.triptyque-dots circle:nth-child(9)  { animation-delay: 1.8s; }
.triptyque-dots circle:nth-child(11) { animation-delay: 2.4s; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.5; }
}

/* Carousel de citations sous le diagramme */
.rituel-quotes {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: clamp(40px, 6vw, 90px) auto 0;
  padding: 0 clamp(20px, 5vw, 60px);
  text-align: center;
}
/* Viewport = stack en grille : les 2 citations occupent la même cellule,
   donc le container fige sa hauteur sur la plus longue → pas de saut */
.rituel-quotes__viewport {
  position: relative;
  display: grid;
}
.rituel-quote {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.rituel-quote.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rituel-quote__text {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  display: inline;
}
.rituel-quote__glyph {
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  color: #7FD9C8;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.15em;
}
.rituel-quote__glyph--open {
  margin-right: 0.12em;
}
.rituel-quote__glyph--close {
  margin-left: 0.12em;
}
.rituel-quote__author {
  margin: clamp(18px, 2.5vw, 32px) 0 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}
.rituel-quotes__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 40px);
}
.rituel-quotes__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.rituel-quotes__dot:hover {
  border-color: #7FD9C8;
}
.rituel-quotes__dot.is-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.1);
}

/* Sparkles scintillantes (injectées par JS) — wrapper = push, inner = twinkle */
.rituel-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.rituel-sparkle {
  position: absolute;
  width: 2px;
  height: 2px;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.rituel-sparkle i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #cfe9ff;
  box-shadow: 0 0 6px #cfe9ff, 0 0 12px rgba(127, 200, 255, 0.5);
  opacity: 0;
  animation: sparkle-twinkle var(--d, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0;   transform: scale(0.6); }
  50%      { opacity: 0.9; transform: scale(1.2); }
}

/* ============================================================
   SECTION EXPÉRIENCE — Scroll-Expand
   Media qui s'agrandit du centre vers plein écran au scroll.
   Sticky inner 100vh + section 200vh pour avoir 100vh de scrub.
============================================================ */
.scroll-expand {
  position: relative;
  background: #000;
  color: #fff;
}
/* Wrapper de pinning : la sticky reste collée pendant toute la séquence
   (buffer + expansion + scroll du texte par-dessus l'image).
   Hauteur = 100vh (sticky) + 1000px (buffer) + 100vh (expansion)
            + 250vh (scroll texte par-dessus l'image agrandie) */
.scroll-expand__pin {
  min-height: calc(450vh + 1000px);
}
.scroll-expand__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.scroll-expand__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.scroll-expand__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.15);
  filter: blur(10px) brightness(0.45);
  will-change: transform, filter;
}
.scroll-expand__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}
.scroll-expand__media {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28vw;
  height: 42vh;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  will-change: width, height, border-radius;
}
.scroll-expand__media img,
.scroll-expand__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.55);
}
/* Video superposée sur l'img. Initialement invisible — piloté par JS
   qui fait fade-out l'img (85→100 % de l'expansion) et fade-in la video.
   translateZ(0) : force le compositing standard au lieu du HW video overlay
   qui bypass le backdrop-filter de la topbar (le blur ne passait plus
   quand la video passait sous la navbar). */
.scroll-expand__media video {
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
  transform: translateZ(0);
}
.scroll-expand__header {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  color: #fff;
  font-family: "Chillax", system-ui, sans-serif;
  padding: 0 1.5rem;
}
.scroll-expand__date {
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.85;
}
.scroll-expand__title {
  margin: 0;
  font-size: clamp(2.8rem, 9vw, 8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}
.scroll-expand__hint {
  position: absolute;
  bottom: 2.5rem;
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}

.scroll-expand__content {
  position: absolute;
  top: 100%;            /* démarre juste sous le viewport (sticky = 100vh) */
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 100%;
  max-width: 760px;
  padding: 3.5rem 1.75rem 5rem;
  z-index: 4;           /* au-dessus du media et du header */
  color: #fff;
  font-family: "Chillax", system-ui, sans-serif;
  will-change: transform;
}
.scroll-expand__kicker {
  margin: 0 0 1.1rem;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.7;
  text-align: center;
  color: #cfe9ff;
}
.scroll-expand__content-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-align: center;
}
.scroll-expand__intro {
  margin: 0 auto 3.5rem;
  max-width: 580px;
  font-size: 1.02rem;
  line-height: 1.75;
  opacity: 0.85;
  text-align: center;
}

/* Carte d'une journée */
.scroll-expand__day {
  margin: 0 0 2.25rem;
  padding: 1.6rem 1.75rem 1.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.scroll-expand__day-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 0 0 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.scroll-expand__day-num {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7fd9c8;
  border: 1px solid rgba(127, 217, 200, 0.4);
  border-radius: 4px;
}
.scroll-expand__day-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.scroll-expand__day-tag {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}
.scroll-expand__day-lede {
  margin: 0 0 0.95rem;
  font-size: 0.96rem;
  line-height: 1.6;
  opacity: 0.85;
  font-style: italic;
}
.scroll-expand__day-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scroll-expand__day-list li {
  position: relative;
  padding: 0.32rem 0 0.32rem 1.15rem;
  font-size: 0.94rem;
  line-height: 1.55;
  opacity: 0.88;
}
.scroll-expand__day-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7fd9c8;
  opacity: 0.7;
}
.scroll-expand__day-list strong {
  font-weight: 500;
  color: #cfe9ff;
  letter-spacing: 0.02em;
}

.scroll-expand__outro {
  margin: 3rem 0 0;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.55;
  font-style: italic;
  color: #cfe9ff;
}
.scroll-expand__outro span {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-style: normal;
  letter-spacing: 0.04em;
  opacity: 0.8;
  color: #fff;
}

@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .scroll-expand__pin {
    /* Buffer mobile = 200px → on raccourcit aussi la zone de pin pour ne
       pas avoir de scroll mort en bas. */
    min-height: calc(450vh + 200px);
  }
  .scroll-expand__media {
    width: 72vw;
    height: 38vh;
    border-radius: 14px;
  }
  .scroll-expand__hint {
    bottom: 1.5rem;
  }
  .scroll-expand__content {
    padding: 2.25rem 1.1rem 3rem;
  }
  .scroll-expand__day {
    padding: 1.25rem 1.15rem 1.1rem;
    /* Perf mobile : blur off, remplacé par un bg un poil plus opaque. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.06);
  }
  .scroll-expand__day-head {
    gap: 0.55rem;
  }
  .scroll-expand__day-tag {
    margin-left: 0;
    width: 100%;
  }
}

/* =========================================================
   RESPONSIVE LAYER — Tous les supports, organisé par range
   ---------------------------------------------------------
   MOBILE PORTRAIT    ≤ 767px (base mobile = bloc 768 plus haut,
                      ici : overlay menu + garde-fous petits écrans)
   MOBILE LANDSCAPE   max-height: 500px AND orientation: landscape
   TABLET PORTRAIT    768 – 1279px portrait (iPad Mini/Air/Pro, Surface,
                      fenêtres demi-écran de desktop)
   TABLET LANDSCAPE   ≥1024px landscape, aspect ≤ 1.45 (tous les iPads)
   FAQ STACK          ≤ 1099px (le grid 2 colonnes ne rentre plus)
   LAPTOP             1280 – 1919px, aspect ≥ 1.46
   DESKTOP LARGE      ≥ 1920px / ULTRA-WIDE ≥ 2560px (caps)
   ========================================================= */

/* ---------- Éléments du menu : neutres sur desktop ----------
   Le divider et le "/" ne servent que dans l'overlay mobile ;
   le lang-group est transparent (display:contents) pour que le
   gap flex de .topbar__extras s'applique directement à FR / EN. */
.topbar__extras-divider,
.topbar__lang-sep {
  display: none;
}
.topbar__lang-group {
  display: contents;
}

/* ============ MOBILE PORTRAIT ≤ 767px — MENU OVERLAY ============ */
@media (max-width: 767px) {
  /* Fullscreen overlay : slide depuis le haut, fond nuit profonde.
     Le burger (dans la topbar, z-index 50, peint APRÈS l'extras dans le
     DOM) reste visible au-dessus et se transforme en croix → il sert de
     bouton de fermeture. */
  .topbar__extras {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: auto;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(28px, 7vw, 48px);
    padding: 100px clamp(24px, 8vw, 60px) 80px;
    background:
      radial-gradient(ellipse at top, rgba(30, 40, 55, 0.55), transparent 60%),
      linear-gradient(180deg, rgba(7, 11, 16, 0.96) 0%, rgba(4, 7, 11, 0.98) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(1.1);
    backdrop-filter: blur(28px) saturate(1.1);
    transform: translateY(-100%);
    opacity: 0;
    transition:
      opacity 0.5s var(--ease-out-soft),
      transform 0.6s var(--ease-out-soft);
    z-index: 45;
    white-space: normal;
  }
  .topbar__extras.is-open {
    transform: translateY(0);
    opacity: 1;
  }
  /* Le lien Programme en grand */
  .topbar__extras > a.link {
    font-size: clamp(34px, 10vw, 52px);
    font-weight: 400;
    letter-spacing: -0.005em;
    color: #fff;
    mix-blend-mode: normal;
    text-align: center;
  }
  /* Séparateur graphique fin entre Programme et les langues */
  .topbar__extras-divider {
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    margin: 4px 0;
  }
  /* Langues inline : FR / EN */
  .topbar__lang-group {
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .topbar__lang-sep {
    display: inline;
    color: rgba(255, 255, 255, 0.35);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
  }
  .topbar__extras .topbar__lang,
  .link.topbar__lang {
    font-size: 18px;
    letter-spacing: 0.08em;
  }
  .topbar__extras .topbar__lang {
    color: #fff;
    mix-blend-mode: normal;
    opacity: 0.55;
  }
  .topbar__extras .topbar__lang.is-active {
    opacity: 1;
  }
  /* Burger au-dessus de l'overlay (z-index 45) : il devient la croix de
     fermeture. position:relative requis pour que le z-index s'applique. */
  html.is-menu-open .topbar__menu-toggle {
    position: relative;
    z-index: 46;
    color: #fff !important;
    mix-blend-mode: normal !important;
  }
  /* La footbar fixe (z-index 50, après la topbar dans le DOM) passerait
     au-dessus de l'overlay → on la masque menu ouvert. */
  html.is-menu-open .footbar {
    opacity: 0 !important;
  }
  /* Bloque le scroll du body quand le menu est ouvert */
  html.is-menu-open,
  html.is-menu-open body {
    overflow: hidden !important;
    touch-action: none;
  }

  /* Garde-fous texte : jamais de débordement horizontal */
  .sticky-card__title {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .sticky-card__text {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .sticky-card__inner {
    overflow: hidden;
  }

  /* Petits mobiles (< 390px — iPhone SE, petits Android) : les titres
     longs ("Les aurores boréales") wrappent en 2 lignes au lieu d'être
     coupés par le nowrap desktop. */
  @media (max-width: 389px) {
    .sticky-card__title {
      white-space: normal;
      width: auto;
      font-size: clamp(26px, 8vw, 34px);
    }
    .hero__subtitle {
      font-size: clamp(16px, 4.6vw, 22px);
    }
  }
}

/* ============ FAQ TABLETTES (portrait + landscape) et fenêtres ≤1099px ============
   Même layout que desktop, adapté : titre sticky à gauche, questions/
   réponses à droite (le gap desktop de 200px ne rentre pas ici). L'image
   carte remplit la section (inset 0) en `contain` ancré bottom-LEFT →
   coin bas-gauche de l'image calé sur celui de la section, jamais de
   débordement, taille auto-adaptée à l'écran. Les téléphones paysage qui
   matchent aussi cette media sont re-calibrés par le bloc mobile-landscape
   plus bas (!important). */
@media (min-width: 769px) and (max-width: 1099px),
       (min-width: 768px) and (max-width: 1279px) and (orientation: portrait),
       (min-width: 1024px) and (orientation: landscape) and (max-aspect-ratio: 145/100) {
  .ed--faq {
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
    padding: clamp(70px, 10vh, 120px) var(--pad-x);
    position: relative;
  }
  .faq-bg-img {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    opacity: 0.5;
    background-size: contain;
    background-position: left bottom;
    z-index: 0;
    /* Neutralise le parallax GSAP (style inline) → l'image reste calée
       dans la section. */
    transform: none !important;
  }
  .faq-sticky {
    position: sticky;
    top: clamp(90px, 14vh, 160px);
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    z-index: 1;
  }
  .faq-title {
    font-size: clamp(30px, 4.5vw, 48px);
  }
  .faq-list {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 68ch;
  }
  .faq-q__text {
    font-size: clamp(16px, 2vw, 20px);
  }
}

/* ============ TABLET PORTRAIT 768 – 1279px (orientation portrait) ============
   iPad Mini 768×1024, iPad 10.2 810×1080, iPad Air 820×1180, iPad Pro 11"
   834×1194, Surface Duo 912×1368, iPad Pro 12.9" 1024×1366, fenêtre
   demi-écran sur moniteur 1920. */
@media (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  :root {
    --fs-title: clamp(42px, 6vw, 56px);
    --fs-subtitle: clamp(18px, 2.6vw, 24px);
    --pad-x: clamp(36px, 5vw, 60px);
  }

  /* Sticky-cards : single column (texte puis image portrait) */
  .sticky-card {
    height: 100svh;
  }
  .sticky-card__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 32px;
    padding: 90px var(--pad-x) 60px;
    min-height: 100svh;
  }
  .sticky-card__text {
    padding-left: clamp(32px, 5vw, 60px);
    gap: 16px;
    max-width: 640px;
  }
  .sticky-card__title {
    font-size: clamp(36px, 5vw, 48px);
    white-space: normal;
    width: auto;
  }
  .sticky-card__subtitle {
    font-size: clamp(18px, 2.6vw, 22px);
    max-width: none;
  }
  .sticky-card__desc {
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.6;
    max-width: 560px;
  }
  .sticky-card__text .ed__cta {
    margin-top: 8px;
  }
  .sticky-card__media {
    /* Grid item : son min-width:auto par défaut laissait la largeur
       intrinsèque de la figure (hauteur × 4/3) déborder de la colonne à
       droite de l'écran (vu sur iPad Mini portrait). min-width:0 force le
       respect de la track ; le max-width 92% de la figure se calcule alors
       sur la bonne largeur. */
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }
  .sticky-card__img-wrap,
  .sticky-card__media .placeholder {
    min-height: 0;
    max-height: none;
    height: 100%;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    max-width: 92%;
  }
  .sticky-card__num {
    bottom: clamp(22px, 3vw, 40px);
  }

  /* Philosophy : layout mobile (flow column, overlap diagonal des images),
     typo calibrée tablette. Le bg fluid desktop est désactivé (cf. main.js),
     remplacé par le fallback statique du text-reveal-block::before. */
  .ed--philosophy {
    min-height: auto;
    padding: clamp(80px, 10vw, 140px) var(--pad-x) clamp(70px, 8vw, 120px);
    display: flex;
    flex-direction: column;
    isolation: isolate;
  }
  .ed--philosophy > .ed-float,
  .ed--philosophy > .ed__copy,
  .ed--philosophy > .text-reveal-block {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    max-width: none;
  }
  .ed--philosophy .ed-float--01 { order: 1; align-self: flex-end; width: 58%; margin: 0 0 70px 0; }
  .ed--philosophy .ed__copy    { order: 2; width: 100%; max-width: 720px; margin: 0 auto 100px; }
  .ed--philosophy .ed-float--02 { order: 3; align-self: flex-end; width: 52%; margin: 0 0 -20% 0; z-index: 2; }
  .ed--philosophy .ed-float--03 { order: 4; align-self: flex-start; width: 70%; z-index: 1; }
  .ed--philosophy .text-reveal-block {
    order: 5;
    max-width: 780px;
    margin: 100px auto 0;
    text-align: center;
    width: 100%;
    z-index: auto;
  }
  .ed--philosophy .ed__bg { display: none; }
  /* Fallback bg statique derrière le bloc POURQUOI (comme mobile) */
  .ed--philosophy .text-reveal-block::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 150px);
    left: calc(-1 * var(--pad-x));
    right: calc(-1 * var(--pad-x));
    aspect-ratio: 1600 / 2000;
    background: url("./assets/bg-section-2.webp") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    pointer-events: none;
    z-index: -1;
  }
  .ed--philosophy .ed__title {
    font-size: clamp(30px, 4.2vw, 44px);
    max-width: 620px;
  }
  .ed--philosophy .ed__body {
    font-size: clamp(15px, 2vw, 18px);
    max-width: 620px;
  }
  .ed--philosophy .text-reveal-title { font-size: clamp(30px, 4.2vw, 44px); }
  .ed--philosophy .text-reveal,
  .ed--philosophy .text-reveal-sig { font-size: clamp(15px, 2vw, 18px); }
  /* Le bloc POURQUOI est centré ici — texte du corps aligné gauche pour la
     lisibilité des longues lignes. */
  .ed--philosophy .text-reveal { text-align: left; }
  /* Socials : cream (le fond du fallback est sombre en haut du bloc) */
  .ed__socials { color: var(--c-cream); }

  /* Programme : centrage vertical du contenu (viewport très haut) */
  .programme-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(100px, 12vh, 160px) 0 clamp(80px, 12vh, 140px);
  }
  .programme-header { padding-top: 0; }
  .programme-track { margin-top: clamp(50px, 6vw, 80px); }
  .programme-title { font-size: clamp(48px, 8vw, 72px); }
  .programme-slide__name { font-size: clamp(32px, 4.5vw, 44px); }
  .programme-slide__tag { font-size: clamp(16px, 2.2vw, 20px); }
  .programme-footer { bottom: clamp(30px, 4vw, 60px); }

  /* Rituel */
  .rituel-block .kicker { font-size: clamp(26px, 3.5vw, 34px); }
  .triptyque-subtitle { font-size: clamp(16px, 2vw, 22px); }
  .triptyque-diagram { width: min(80vw, 460px); }

  /* Footer : 2 colonnes */
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 40px);
  }
}

/* ============ TABLET LANDSCAPE (≥1024px, landscape, aspect ≤ 1.45) ============
   iPad Mini 1024×768, iPad 10.2 1080×810, iPad Air 1180×820, iPad Pro 11"
   1194×834, iPad Pro 12.9" 1366×1024. L'aspect-ratio ≤ 1.45 exclut les
   laptops (16:10 ≈ 1.6 et plus). */
@media (min-width: 1024px) and (orientation: landscape) and (max-aspect-ratio: 145/100) {
  :root {
    --pad-x: clamp(50px, 6vw, 80px);
  }

  /* Sticky-cards : 2 colonnes recalibrées (texte plus large, image plus
     étroite) pour que les titres longs tiennent sans être coupés. */
  .sticky-card__inner {
    grid-template-columns: minmax(360px, 1.15fr) minmax(340px, 38vw);
    grid-template-rows: 1fr;
    gap: 3.5vw;
    padding: clamp(90px, 12vh, 140px) var(--pad-x) clamp(70px, 10vh, 110px);
    align-items: stretch;
  }
  .sticky-card__text {
    padding-left: clamp(38px, 4vw, 60px);
    padding-right: 8px;
    justify-content: center;
    gap: 16px;
  }
  .sticky-card__text .ed__cta {
    margin-top: 8px;
  }
  .sticky-card__title {
    font-size: clamp(34px, 3.4vw, 46px);
    line-height: 1.05;
    white-space: normal;
    width: auto;
  }
  .sticky-card__subtitle { font-size: clamp(16px, 1.6vw, 20px); }
  .sticky-card__desc { font-size: clamp(13.5px, 1.3vw, 15.5px); max-width: 36ch; }
  .sticky-card__media {
    align-items: center;
  }
  .sticky-card__img-wrap {
    min-height: 0;
    height: min(58vh, 500px);
    max-height: 62vh;
    aspect-ratio: 4/5;
    max-width: 100%;
  }

  /* Philosophy : flow column comme tablet portrait (le layout desktop en
     absolu déborde sur ces largeurs). Bg statique fixe à la place du fluid. */
  .ed--philosophy {
    min-height: auto;
    padding: clamp(80px, 10vw, 140px) var(--pad-x) clamp(70px, 8vw, 120px);
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
  }
  .ed--philosophy > .ed-float,
  .ed--philosophy > .ed__copy,
  .ed--philosophy > .text-reveal-block {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    max-width: none;
  }
  .ed--philosophy .ed-float--01 {
    order: 1;
    align-self: flex-end;
    width: 55%;
    margin: 0 0 clamp(50px, 6vw, 100px);
  }
  .ed--philosophy .ed__copy {
    order: 2;
    width: 100%;
    max-width: 720px;
    margin: 0 auto clamp(60px, 8vw, 100px);
  }
  .ed--philosophy .ed-float--02 {
    order: 3;
    align-self: flex-end;
    width: 50%;
    margin: 0 0 -18% 0;
    z-index: 2;
  }
  .ed--philosophy .ed-float--03 {
    order: 4;
    align-self: flex-start;
    width: 65%;
    z-index: 1;
  }
  .ed--philosophy .text-reveal-block {
    order: 5;
    max-width: 900px;
    margin: clamp(30px, 4vw, 60px) auto 0;
    text-align: center;
    width: 100%;
    z-index: auto;
  }
  /* Bg statique plein cadre (pas de fluid WebGL ici — cf. main.js) */
  .ed--philosophy .ed__bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    z-index: -1;
    opacity: 0.6;
    background: url("./assets/bg-section-2.webp") center / cover no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none !important;
  }
  .ed--philosophy .ed__bg img,
  .ed--philosophy .ed__bg canvas {
    display: none !important;
  }

  /* Programme : centrage vertical complet (viewport haut style iPad) */
  .programme-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(90px, 10vh, 130px) 0 clamp(70px, 10vh, 120px);
  }
  .programme-header { padding-top: 0; }
  .programme-title { font-size: clamp(50px, 5.5vw, 76px); }
  .programme-track { margin-top: clamp(40px, 5vw, 70px); }
  .programme-slide__name { font-size: clamp(28px, 3.2vw, 40px); }
  .programme-slide__tag { font-size: clamp(15px, 1.6vw, 19px); }
  .programme-slide__dates { margin-top: clamp(30px, 4vw, 60px); }
  .programme-footer { bottom: clamp(30px, 4vw, 60px); }
}

/* ============ LAPTOP 1280 – 1919px (aspect ≥ 1.46) ============
   Sticky-cards : image portrait alignée avec le texte (titre en haut /
   CTA en bas). min-aspect-ratio 146/100 exclut les tablets landscape 4:3
   (iPad Pro 12.9 landscape 1366×1024 = 1.33 → tablet, pas laptop). */
@media (min-width: 1280px) and (max-width: 1919px) and (min-aspect-ratio: 146/100) {
  :root {
    --pad-x: clamp(60px, 5vw, 110px);
  }
  .sticky-card__inner {
    grid-template-columns: minmax(400px, 40%) minmax(320px, 30%);
    justify-content: space-between;
    gap: clamp(40px, 4vw, 80px);
    padding: clamp(90px, 11vh, 140px) var(--pad-x) clamp(70px, 9vh, 110px);
    align-items: stretch;
  }
  .sticky-card__text {
    padding-left: clamp(40px, 3.5vw, 70px);
    padding-right: 0;
    justify-content: space-between;
    gap: 20px;
  }
  .sticky-card__text .ed__cta {
    margin-top: 0;
  }
  .sticky-card__title { font-size: clamp(40px, 3.2vw, 56px); white-space: normal; width: auto; }
  .sticky-card__subtitle { font-size: clamp(16px, 1.3vw, 20px); margin-top: 20px; }
  .sticky-card__desc {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.65;
    max-width: 40ch;
    margin-top: 14px;
  }
  .sticky-card__media {
    align-items: stretch;
    justify-content: flex-end;
  }
  .sticky-card__img-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }
}

/* ============ SCROLL-EXPAND : typo boostée sur laptop+ (≥1280px) ============ */
@media (min-width: 1280px) {
  .scroll-expand__kicker {
    font-size: clamp(0.85rem, 0.9vw, 1.05rem);
    margin-bottom: 1.4rem;
  }
  .scroll-expand__content-title {
    font-size: clamp(2.4rem, 3.4vw, 3.4rem);
    margin-bottom: 2rem;
  }
  .scroll-expand__intro {
    font-size: clamp(1.15rem, 1.15vw, 1.35rem);
    max-width: 720px;
    line-height: 1.75;
    margin-bottom: 4rem;
  }
  .scroll-expand__day {
    padding: 2rem 2.2rem 1.7rem;
    margin-bottom: 2.6rem;
  }
  .scroll-expand__day-num {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
  }
  .scroll-expand__day-title {
    font-size: clamp(1.55rem, 1.6vw, 1.9rem);
  }
  .scroll-expand__day-tag {
    font-size: 0.82rem;
  }
  .scroll-expand__day-lede {
    font-size: clamp(1.08rem, 1.05vw, 1.22rem);
    line-height: 1.65;
    margin-bottom: 1.2rem;
  }
  .scroll-expand__day-list li {
    font-size: clamp(1.05rem, 1vw, 1.15rem);
    line-height: 1.6;
    padding: 0.4rem 0 0.4rem 1.3rem;
  }
  .scroll-expand__outro {
    font-size: clamp(1.35rem, 1.4vw, 1.65rem);
    margin-top: 3.5rem;
  }
  .scroll-expand__outro span {
    font-size: clamp(1rem, 0.95vw, 1.1rem);
    margin-top: 0.8rem;
  }
  .scroll-expand__content {
    max-width: 900px;
    margin: 0 auto;
  }
}

/* ============ DESKTOP LARGE ≥ 1920px ============
   Cap des largeurs de contenu pour ne pas se disperser sur 4K/ultrawide. */
@media (min-width: 1920px) {
  :root {
    --pad-x: clamp(120px, 8vw, 220px);
  }
  .hero__center,
  .loader__center {
    max-width: 60ch;
  }
  .ed__copy,
  .ed__title,
  .ed__body,
  .ed__title--reveal,
  .ed__body--reveal {
    max-width: 60ch;
  }
  .sticky-card__inner {
    max-width: 1600px;
  }
  .sticky-card__desc {
    max-width: 42ch;
  }
  .text-reveal-block {
    max-width: 1100px;
  }
  .programme-header { max-width: 1400px; margin: 0 auto; }
  /* ⚠️ PAS de max-width + margin:auto sur .programme-slide : la slide vit
     dans la track flex à 200% de large → margin auto la centrerait dans les
     3840px de la track et la pousserait hors écran. Le contenu de la slide
     est déjà centré (text-align + .programme-slide__dates max-width 720). */
  .scroll-expand__content { max-width: 1100px; margin: 0 auto; }
  .site-footer__inner { max-width: 1600px; }
  .rituel-block { max-width: 1200px; }
}

/* ============ ULTRA WIDE ≥ 2560px ============ */
@media (min-width: 2560px) {
  :root {
    --pad-x: clamp(180px, 10vw, 320px);
  }
  .sticky-card__inner { max-width: 1800px; }
  .site-footer__inner { max-width: 1700px; }
}

/* ============ MOBILE LANDSCAPE (viewport court) ============
   UN SEUL set de règles pour tous les téléphones en paysage :
   568×320, 667×375, 812×375, 844×390, 896×414, 932×430… — tout via
   clamp() qui scale automatiquement. Pas de max-width pour englober
   les grands téléphones. Cette media vient EN DERNIER → override les
   blocs tablet qui peuvent matcher aussi (ex. 1024×500). */
@media (max-height: 500px) and (orientation: landscape) {
  /* Menu : retour au comportement desktop (panneau horizontal qui slide
     à gauche du burger) — l'overlay fullscreen ne rentre pas en hauteur. */
  .topbar__extras {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    right: calc(100% + clamp(14px, 2vw, 28px)) !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(14px, 2vw, 28px) !important;
    padding: 0 !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: translate(40vw, -50%) !important;
    white-space: nowrap !important;
    opacity: 0;
    pointer-events: none;
  }
  .topbar__extras.is-open {
    transform: translate(0, -50%) !important;
    opacity: 1;
    pointer-events: auto;
  }
  .topbar__extras-divider,
  .topbar__lang-sep {
    display: none !important;
  }
  .topbar__lang-group { display: contents !important; }
  /* Liens du menu : même comportement couleur que le reste de la navbar —
     sombres (blend overlay) sur le hero clair, blancs sur les sections
     sombres via html.is-on-dark, exactement comme "Réserver". */
  .topbar__extras > a.link {
    font-size: clamp(12px, 1.6vw, 15px) !important;
    color: var(--c-text-blend) !important;
    mix-blend-mode: overlay !important;
  }
  .topbar__extras .topbar__lang {
    font-size: 11px !important;
    opacity: 0.6 !important;
    color: var(--c-text-blend) !important;
    mix-blend-mode: overlay !important;
  }
  .topbar__extras .topbar__lang.is-active { opacity: 1 !important; }
  html.is-on-dark .topbar__extras > a.link,
  html.is-on-dark .topbar__extras .topbar__lang {
    color: #fff !important;
    mix-blend-mode: normal !important;
  }
  /* Pas d'overlay en paysage → le burger garde aussi les couleurs navbar
     (le bloc ≤767 le força en blanc pour l'overlay fullscreen portrait). */
  html.is-menu-open .topbar__menu-toggle {
    color: var(--c-text-blend) !important;
    mix-blend-mode: overlay !important;
  }
  html.is-on-dark.is-menu-open .topbar__menu-toggle {
    color: #fff !important;
    mix-blend-mode: normal !important;
  }
  /* Pas d'overlay → pas de scroll-lock */
  html.is-menu-open,
  html.is-menu-open body {
    overflow: auto !important;
    touch-action: auto !important;
  }
  html.is-menu-open .topbar__logo img {
    filter: none;
  }

  /* ====== HERO : raccourci (le min-height 1200px créerait ~4 écrans) ====== */
  .hero { min-height: auto !important; height: 160svh !important; }
  .hero__title { font-size: clamp(24px, 5.5vw, 40px) !important; }
  .hero__subtitle { font-size: clamp(13px, 3vw, 18px) !important; }

  /* Labels verticaux : collés au bord gauche pour ne pas chevaucher les
     titres (le pad-x desktop les posait sur le texte des cards). */
  .ed__label-wrap {
    left: 4px !important;
  }

  /* ====== Sticky-cards : 2 colonnes compactes texte|image ====== */
  .sticky-card { height: 100svh !important; }
  .sticky-card__inner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    padding: 40px 20px 30px !important;
    gap: 20px !important;
    align-items: stretch !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
  }
  .sticky-card__text {
    /* Texte décalé vers la droite (rapproché de l'image) : la caméra des
       iPhone en paysage recouvre le bord gauche de l'écran — marge élargie
       + safe-area (viewport-fit=cover actif dans le meta viewport). */
    padding-left: calc(clamp(44px, 6vw, 72px) + env(safe-area-inset-left, 0px)) !important;
    gap: 6px !important;
    max-width: none !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .sticky-card__title {
    font-size: clamp(18px, 3.8vw, 26px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    width: auto !important;
    overflow-wrap: break-word !important;
  }
  .sticky-card__subtitle {
    font-size: clamp(11px, 2.4vw, 14px) !important;
    line-height: 1.3 !important;
    max-width: none !important;
  }
  .sticky-card__desc {
    font-size: clamp(9.5px, 2vw, 12px) !important;
    line-height: 1.35 !important;
    max-width: none !important;
  }
  .sticky-card__text .ed__cta { font-size: 11px !important; margin-top: 2px !important; }
  .sticky-card__media {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }
  /* Image en PORTRAIT (4/5) comme la photo source : pleine hauteur de la
     cellule, largeur déduite du ratio, centrée dans sa colonne. Remplir
     toute la cellule (paysage) croppait beaucoup trop les photos. */
  .sticky-card__img-wrap,
  .sticky-card__media .placeholder {
    min-height: 100% !important;
    max-height: none !important;
    height: 100% !important;
    aspect-ratio: 4 / 5 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .sticky-card__num {
    font-size: 10px !important;
    bottom: 10px !important;
  }

  /* ====== Philosophy : flow column compact ====== */
  .ed--philosophy {
    min-height: auto !important;
    padding: 60px var(--pad-x) 60px !important;
    display: flex !important;
    flex-direction: column !important;
    isolation: isolate !important;
  }
  .ed--philosophy > .ed-float,
  .ed--philosophy > .ed__copy,
  .ed--philosophy > .text-reveal-block {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 40px !important;
  }
  .ed--philosophy > .text-reveal-block {
    margin-top: clamp(60px, 12vw, 120px) !important;
    text-align: center !important;
    /* Bloc de texte homogène, centré — pas de lignes qui courent sur toute
       la largeur de l'écran. */
    max-width: min(100%, 720px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Copy (titre + bio + socials) : largeur de lecture confortable au lieu
     de la pleine largeur — lignes trop longues sur un écran paysage. */
  .ed--philosophy > .ed__copy {
    max-width: min(100%, 640px) !important;
  }
  .ed--philosophy .ed__title {
    font-size: clamp(20px, 4.5vw, 30px) !important;
    max-width: none !important;
  }
  .ed--philosophy .ed__body {
    font-size: clamp(12px, 2.6vw, 15px) !important;
    max-width: none !important;
  }
  .ed--philosophy .text-reveal-title {
    font-size: clamp(20px, 4.5vw, 30px) !important;
  }
  .ed--philosophy .text-reveal,
  .ed--philosophy .text-reveal-sig {
    font-size: clamp(12px, 2.6vw, 15px) !important;
  }
  .ed--philosophy .ed-float--01 {
    width: 40% !important;
    align-self: flex-end !important;
    margin: 0 0 30px 0 !important;
  }
  .ed--philosophy .ed-float--02 {
    width: 42% !important;
    align-self: flex-end !important;
    margin: 20px 0 -18% 0 !important;
    z-index: 2 !important;
  }
  .ed--philosophy .ed-float--03 {
    width: 55% !important;
    align-self: flex-start !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
  .ed--philosophy .ed__bg { display: none !important; }
  .ed__socials { color: var(--c-cream) !important; }

  /* ====== Programme : tient sur un écran, contenu centré ====== */
  .programme-stage {
    /* 100lvh (viewport barres Safari MASQUÉES, valeur stable) : avec 100svh
       la section laissait un trou en bas dès que Safari iOS cachait sa
       barre en scrollant (svh = viewport barres visibles, plus court).
       lvh ne change pas pendant le scroll → pas de recalcul ScrollTrigger.
       Les lignes svh servent de fallback aux navigateurs sans lvh. */
    min-height: 100svh !important;
    height: 100svh !important;
    min-height: 100lvh !important;
    height: 100lvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Padding bottom élargi : réserve la zone du footer absolu ("voir le
       programme" + ligne étoile filante) pour que le contenu centré (dates)
       ne vienne jamais chevaucher dessus. */
    padding: clamp(24px, 5vh, 44px) 0 clamp(90px, 24vh, 120px) !important;
  }
  .programme-header { padding-top: 0 !important; }
  .programme-title { font-size: clamp(24px, 5vw, 40px) !important; margin: 0 !important; }
  .programme-subtitle { font-size: clamp(11px, 2.2vw, 14px) !important; }
  .programme-track { margin-top: clamp(14px, 3vw, 30px) !important; }
  .programme-slide { padding: 0 clamp(30px, 8vw, 120px) !important; }
  .programme-slide__name { font-size: clamp(18px, 3.5vw, 26px) !important; }
  .programme-slide__tag { font-size: clamp(10px, 2vw, 13px) !important; margin-top: 4px !important; }
  .programme-slide__dates {
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 0 clamp(20px, 4vw, 50px) !important;
    margin: clamp(14px, 3vw, 26px) auto 0 !important;
    max-width: 640px !important;
  }
  .programme-slide__dates::before {
    display: block !important;
    height: clamp(24px, 4vw, 42px) !important;
  }
  .programme-date:first-of-type { grid-column: 1 !important; grid-row: 1 !important; }
  .programme-date:last-of-type { grid-column: 3 !important; grid-row: 1 !important; }
  .programme-date__range { font-size: clamp(11px, 2.2vw, 15px) !important; }
  .programme-date .programme-cta { font-size: clamp(10px, 2vw, 13px) !important; margin-top: 6px !important; }
  .programme-footer { bottom: clamp(10px, 2.5vw, 24px) !important; }
  .programme-see { font-size: clamp(10px, 2vw, 13px) !important; }
  .programme-scroll-cue { height: clamp(20px, 4vw, 40px) !important; }

  /* ====== Rituel compact ====== */
  .rituel-block { padding-top: clamp(30px, 5vw, 60px) !important; }
  .rituel-block .kicker { font-size: clamp(18px, 3.5vw, 24px) !important; }
  .triptyque-subtitle { font-size: clamp(11px, 2.2vw, 14px) !important; margin-top: 6px !important; }
  .triptyque-diagram {
    width: min(70vh, 55vw, 420px) !important;
    margin: clamp(20px, 3vw, 36px) auto 0 !important;
  }
  .rituel-quotes { margin-top: clamp(20px, 3vw, 40px) !important; }
  .rituel-quote__text { font-size: clamp(11px, 2.4vw, 14px) !important; line-height: 1.3 !important; }
  .rituel-quote__author { font-size: clamp(10px, 2vw, 13px) !important; }

  /* ====== FAQ : comme desktop, adapté au viewport court ======
     Titre sticky à gauche, questions/réponses à droite, image de fond
     ancrée bottom-right sur toute la largeur de l'écran. */
  .ed--faq {
    display: grid !important;
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) !important;
    gap: clamp(24px, 6vw, 70px) !important;
    align-items: start !important;
    padding: clamp(44px, 12vh, 80px) var(--pad-x) !important;
    position: relative !important;
  }
  .faq-bg-img {
    /* La boîte remplit exactement la section (inset 0) : avec un background
       en `contain` ancré bottom-LEFT (coin bas-gauche de l'image calé sur le
       coin bas-gauche de la section, comme sur desktop), l'image ne peut
       JAMAIS déborder de la section et sa taille s'adapte automatiquement à
       celle de l'écran (limitée par la hauteur ou la largeur du viewport). */
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    opacity: 0.5 !important;
    background-size: contain !important;
    background-position: left bottom !important;
    z-index: 0 !important;
    /* Le parallax JS (translateY ±18%) ferait sortir l'image de la section
       sur un viewport court → neutralisé ici (l'!important bat le style
       inline posé par GSAP). Desktop non affecté. */
    transform: none !important;
    /* Placement auto → le bloc conteneur de l'absolu redevient toute la
       section (le grid-column:1 du bloc mobile la cantonnait à la colonne
       du titre → image décalée, pas full-bleed). */
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .faq-sticky {
    position: sticky !important;
    top: clamp(56px, 16vh, 90px) !important;
    left: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    padding: 0 !important;
    z-index: 1 !important;
    max-width: none !important;
  }
  .faq-title {
    font-size: clamp(22px, 4vw, 34px) !important;
  }
  .faq-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    z-index: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 62ch !important;
    padding: 0 !important;
  }
  .faq-q { padding: clamp(12px, 3vh, 20px) 0 !important; }
  .faq-q__text { font-size: clamp(13px, 2.4vw, 16px) !important; }
  .faq-a p { font-size: clamp(12px, 2.2vw, 14px) !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============ MODALE LISTE D'ATTENTE ============ */
.wl-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Indispensable : display:flex ci-dessus écraserait l'attribut hidden */
.wl-overlay[hidden] { display: none; }
.wl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 19, 0.82);
  backdrop-filter: blur(6px);
}
.wl-panel {
  position: relative;
  width: min(440px, 100%);
  background: linear-gradient(165deg, #12202c 0%, #0c1116 72%);
  border: 1px solid rgba(168, 194, 193, 0.22);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 40px);
  color: #eef1ec;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.wl-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  color: rgba(238, 241, 236, 0.6);
  font-size: 26px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}
.wl-close:hover { color: #fff; }
.wl-logo { display: block; margin: 0 0 14px; opacity: 0.9; }
.wl-title {
  margin: 0 0 6px;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
}
.wl-sub {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(238, 241, 236, 0.75);
}
.wl-field { display: block; margin-bottom: 14px; }
.wl-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(168, 194, 193, 0.85);
}
.wl-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(238, 241, 236, 0.06);
  border: 1px solid rgba(168, 194, 193, 0.25);
  border-radius: 10px;
  color: #fff;
  padding: 12px 14px;
  font-size: 16px; /* >= 16px : évite le zoom automatique iOS */
  font-family: inherit;
  transition: border-color 0.2s;
}
.wl-input:focus { outline: none; border-color: #c9b896; }
.wl-hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.wl-submit {
  width: 100%;
  margin-top: 8px;
  background: #c9b896;
  color: #0c1116;
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s;
}
.wl-submit:hover { transform: translateY(-1px); }
.wl-submit:disabled { opacity: 0.55; cursor: wait; }
.wl-error { margin: 12px 0 0; font-size: 13px; color: #e8a9a0; }
.wl-error a { color: inherit; text-decoration: underline; }
.wl-success-title {
  margin: 6px 0 8px;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 26px);
}
.wl-success-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(238, 241, 236, 0.75);
}
/* Sélecteur d'indicatifs pays (intl-tel-input) : habillage nuit polaire.
   Sélecteurs préfixés .wl-panel : la CSS de la librairie est injectée
   APRÈS style.css, il faut donc gagner en spécificité, pas en ordre. */
.wl-panel .iti { width: 100%; }
/* Le menu déroulant est téléporté par la librairie dans un conteneur
   .iti--container accroché au <body> : on cible les deux emplacements. */
.iti--container .iti__dropdown-content,
.wl-panel .iti__dropdown-content {
  background: #101c28;
  border: 1px solid rgba(168, 194, 193, 0.25);
  border-radius: 12px;
  color: #eef1ec;
}
.iti--container .iti__search-input,
.wl-panel .iti__search-input {
  background: rgba(238, 241, 236, 0.06);
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(168, 194, 193, 0.25);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
}
.iti--container .iti__search-input::placeholder,
.wl-panel .iti__search-input::placeholder { color: rgba(238, 241, 236, 0.45); }
.iti--container .iti__search-input:focus,
.wl-panel .iti__search-input:focus { outline: none; }
.iti--container .iti__country-list,
.wl-panel .iti__country-list { background: transparent; }
.iti--container .iti__country.iti__highlight,
.iti--container .iti__country:hover,
.wl-panel .iti__country.iti__highlight,
.wl-panel .iti__country:hover { background: rgba(168, 194, 193, 0.14); }
.iti--container .iti__dial-code,
.wl-panel .iti__dial-code { color: rgba(238, 241, 236, 0.55); }
.iti--container { z-index: 9600; } /* au-dessus de la modale (9500) */
.wl-panel .iti__selected-country,
.wl-panel .iti__selected-flag {
  background: rgba(238, 241, 236, 0.08);
  border-radius: 10px 0 0 10px;
}
.wl-panel .iti__selected-dial-code { color: #fff; }
.wl-panel .iti__arrow { border-top-color: rgba(238, 241, 236, 0.6); }
.wl-panel .iti__arrow--up { border-bottom-color: rgba(238, 241, 236, 0.6); }

html.is-wl-open body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .wl-panel { animation: wl-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes wl-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 480px) {
  .wl-overlay { padding: 12px; align-items: flex-end; }
  .wl-panel { margin-bottom: 8px; }
  .wl-backdrop { backdrop-filter: none; } /* perf mobile */
}