/* ==========================================================================
   Quintessence : Manifeste (V2, site en 4 pages)
   Palette : noir chaud + doré champagne + crème, inspirée du logo.
   ========================================================================== */

:root{
  --bg: #0b0906;
  --gold: #b6905c;
  --gold-light: #e6c894;
  --gold-dim: rgba(182,144,92,.28);
  --cream: #f4ecda;
  --cream-dim: rgba(244,236,218,.66);
  --cream-faint: rgba(244,236,218,.38);
  --line: rgba(182,144,92,.22);

  --font-title: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-subtitle: 'Didot', 'Cormorant Garamond', serif;
  --font-text: 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-h: 5.2rem;
  --pad-x: clamp(1.4rem, 6vw, 6rem);
}

*{ box-sizing: border-box; }

html{ background: var(--bg); }
html:has(body.theme-clair){ background: #c8b7a8; }
html:has(body.page-immersion){ background: #e1d6cc; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-text);
  font-weight: 500;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

/* ---------- Paillettes dorées ---------- */
#paillettes{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------- Grain ---------- */
.grain{
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   MENU
   ========================================================================== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--pad-x);
  background: rgba(11,9,6,.35);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease;
}
.nav.is-solid{
  background: rgba(11,9,6,.85);
  border-bottom-color: var(--line);
}
.nav__brand img{ height: 36px; width: auto; }

.nav__links{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.6rem);
}
.nav__links a{
  font-family: var(--font-subtitle);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: .4rem 0;
  position: relative;
  transition: color .35s ease;
  white-space: nowrap;
}
.nav__links a::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,.8,.24,1);
}
.nav__links a:hover{ color: var(--cream); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ transform: scaleX(1); }
.nav__links a[aria-current="page"]{ color: var(--gold-light); }

.nav__burger{
  display: none;
  background: none;
  border: 0;
  padding: .6rem;
  cursor: pointer;
}
.nav__burger span{
  display: block;
  width: 26px; height: 1px;
  background: var(--cream);
  margin: 6px 0;
  transition: transform .4s ease, opacity .3s ease;
}
.nav.is-open .nav__burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   OUVERTURE DE PAGE
   ========================================================================== */
.opening{
  position: relative;
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 4rem) var(--pad-x) 4rem;
  overflow: hidden;
}
.opening--home{ min-height: 100svh; }

/* ouverture Manifeste : la section épouse exactement le format de la vidéo
   (16/9), donc aucun vide sous la vidéo et la suite de la page arrive tout de
   suite. Le texte se place par-dessus la vidéo. */
.opening--video169{
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: var(--nav-h) var(--pad-x) 0;
  justify-content: center;
}
.opening--video169 .opening__inner{ margin-top: 2vw; }
/* même marron doré que le mot MANIFESTE de la vidéo */
.opening--video169 .opening__title{
  color: #9a7e59;
  text-shadow: 0 1px 0 rgba(255,250,240,.35);
}
.opening--video169 .opening__sub{ color: rgba(122, 97, 64, .92); }
@media (max-width: 900px){
  .opening--video169{
    aspect-ratio: auto;
    min-height: 76svh;
    padding-bottom: 3rem;
  }
}

.opening__video{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: sepia(.18) brightness(1.15) contrast(1.08) saturate(1.2);
}
/* vidéo déjà claire (poussière d'or blanc/beige) : pas de filtre sombre */
.opening__video--beige{
  filter: none;
  object-fit: cover;
  object-position: center top;
  background: var(--bg);
}
.opening__veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(11,9,6,.05), rgba(11,9,6,.55) 78%),
    linear-gradient(180deg, rgba(11,9,6,.45), rgba(11,9,6,0) 38%, rgba(11,9,6,.85));
}
.opening__inner{ position: relative; z-index: 2; max-width: 46rem; }
.opening__logo{ width: clamp(84px, 11vw, 132px); margin: 0 auto 2rem; }

.eyebrow{
  display: block;
  font-family: var(--font-subtitle);
  font-size: .82rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.4rem;
}
.opening__title{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.16;
  margin: 0 0 1.4rem;
  color: var(--cream);
}
.opening__sub{
  font-family: var(--font-subtitle);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.65;
  margin: 0;
}

/* anneaux décoratifs */
.ring{
  position: absolute;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.ring--1{ width: 60vmax; height: 60vmax; top: -22vmax; left: -18vmax; animation: spin 90s linear infinite; }
.ring--2{ width: 38vmax; height: 38vmax; bottom: -16vmax; right: -10vmax; animation: spin 70s linear infinite reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.scroll-cue{
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.scroll-cue span{
  font-family: var(--font-subtitle);
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.scroll-cue i{
  width: 1px; height: 2.4rem;
  background: linear-gradient(var(--gold), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue i::after{
  content:''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--gold-light);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ==========================================================================
   BLOCS DE TEXTE
   ========================================================================== */
.block{
  position: relative;
  padding: clamp(4.5rem, 11vh, 8rem) var(--pad-x);
}
.block__inner{
  position: relative;
  z-index: 2;
  max-width: 40rem;
  margin: 0 auto;
}
.block__title{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.22;
  color: var(--cream);
  margin: 0 0 2rem;
}

/* strophes : une phrase par ligne, révélation en cascade */
.stanza{ display: flex; flex-direction: column; gap: .85rem; }
.stanza .line{
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  line-height: 1.62;
  color: var(--cream-dim);
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  transition-delay: calc(var(--i, 0) * .07s);
}
.stanza.is-visible .line{ opacity: 1; transform: none; }
.stanza .line--accent{
  color: var(--gold-light);
  font-style: italic;
  font-size: clamp(1.2rem, 1.55vw, 1.5rem);
  margin-top: .5rem;
}
.stanza .line--final{
  font-family: var(--font-subtitle);
  color: var(--cream);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-style: italic;
  margin-top: .7rem;
}

/* ---------- Bloc avec photo à côté du texte ---------- */
.split{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 10vh, 7rem) var(--pad-x);
  max-width: 100rem;
  margin: 0 auto;
}
.split--reverse .split__visual{ order: 2; }
.split__visual{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
}
.split__visual img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(.12) brightness(.92) contrast(1.03);
  transition: transform 1.4s cubic-bezier(.16,.8,.24,1);
}
.split__visual::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,9,6,.1), rgba(11,9,6,.45));
}
.split:hover .split__visual img{ transform: scale(1.04); }
.split__text{ position: relative; z-index: 2; }

/* ==========================================================================
   SCÈNE : photo en fond plein cadre, texte sur le côté sombre
   (le fond est calé sur la fenêtre, la photo garde donc sa taille naturelle)
   ========================================================================== */
.scene{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 12vh, 9rem) var(--pad-x);
  overflow: hidden;
}
.scene__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.scene--right .scene__media{ background-position: left center; }
.scene--left .scene__media{ background-position: right center; }
.scene__media::after{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,9,6,.42);
}
.scene__scrim{ position: absolute; inset: 0; z-index: 1; }
.scene--right .scene__scrim{
  background: linear-gradient(270deg, rgba(11,9,6,.97) 0%, rgba(11,9,6,.88) 45%, rgba(11,9,6,.6) 72%, rgba(11,9,6,.25) 100%);
}
.scene--left .scene__scrim{
  background: linear-gradient(90deg, rgba(11,9,6,.97) 0%, rgba(11,9,6,.88) 45%, rgba(11,9,6,.6) 72%, rgba(11,9,6,.25) 100%);
}
.scene__content{
  position: relative;
  z-index: 2;
  max-width: 34rem;
}
.scene--right .scene__content{ margin-left: auto; text-align: right; }
.scene--left .scene__content{ margin-right: auto; text-align: left; }
.scene--right .scene__content .stanza{ align-items: flex-end; }

/* ==========================================================================
   APERÇU DES AUTRES PAGES (accueil)
   ========================================================================== */
.cards{
  padding: clamp(4rem, 10vh, 7rem) var(--pad-x) clamp(5rem, 12vh, 9rem);
  max-width: 84rem;
  margin: 0 auto;
}
.cards__intro{
  text-align: center;
  max-width: 34rem;
  margin: 0 auto clamp(2.5rem, 6vh, 4rem);
}
.cards__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24rem;
  padding: 1.8rem;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color .5s ease, transform .6s cubic-bezier(.16,.8,.24,1);
}
.card:hover{ border-color: var(--gold); transform: translateY(-4px); }
.card__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(.15) brightness(.6) contrast(1.05);
  transition: transform 1.6s cubic-bezier(.16,.8,.24,1), filter .6s ease;
}
.card:hover .card__img{ transform: scale(1.06); filter: sepia(.15) brightness(.72) contrast(1.05); }
.card::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,9,6,.15) 30%, rgba(11,9,6,.92));
}
.card__body{ position: relative; z-index: 2; }
.card__title{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.85rem;
  margin: 0 0 .6rem;
  color: var(--cream);
}
.card__text{
  font-size: .98rem;
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 0 0 1rem;
}
.card__more{
  font-family: var(--font-subtitle);
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ==========================================================================
   PIED DE PAGE / SUITE
   ========================================================================== */
.next{
  border-top: 1px solid var(--line);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x);
  text-align: center;
}
.next__label{
  font-family: var(--font-subtitle);
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream-faint);
  display: block;
  margin-bottom: .9rem;
}
.next__link{
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--cream);
  transition: color .4s ease;
}
.next__link:hover{ color: var(--gold-light); }

.btn{
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .02em;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #1a1208;
  box-shadow: 0 10px 40px -12px rgba(182,144,92,.55);
  transition: transform .35s ease, box-shadow .35s ease;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 16px 50px -10px rgba(182,144,92,.7); }

.footer{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3.5rem var(--pad-x) 3rem;
  border-top: 1px solid var(--line);
}
.footer img{ height: 28px; margin: 0 auto 1rem; opacity: .65; }
.footer p{
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0;
}

/* ---------- Révélation générique ---------- */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.05s cubic-bezier(.16,.8,.24,1), transform 1.05s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .cards__grid{ grid-template-columns: 1fr; }
  .card{ min-height: 19rem; }
  .split{ grid-template-columns: 1fr; }
  .split--reverse .split__visual{ order: 0; }
  .split__visual{ aspect-ratio: 3 / 2; }
}

@media (max-width: 760px){
  .nav__burger{ display: block; }
  .nav__links{
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(11,9,6,.97);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--pad-x) 2rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
  }
  .nav.is-open .nav__links{ opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a{ width: 100%; padding: 1rem 0; font-size: .9rem; }
  .nav__links a::after{ display: none; }
  #paillettes{ opacity: .85; }

  /* Scène sur mobile : la photo devient une vraie bande en haut, le texte dessous */
  .scene{
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
  }
  .scene__media{
    position: relative;
    inset: auto;
    width: 100%;
    height: 52vh;
    flex: none;
    background-attachment: scroll;
  }
  .scene--right .scene__media{ background-position: left center; }
  .scene--left .scene__media{ background-position: right center; }
  .scene__media::after{
    background: linear-gradient(180deg, rgba(11,9,6,.12) 0%, rgba(11,9,6,.18) 55%, rgba(11,9,6,.97) 100%);
  }
  .scene__scrim{ display: none; }
  .scene__content{
    max-width: 100%;
    text-align: left !important;
    background: var(--bg);
    padding: 2.6rem var(--pad-x) 3.8rem;
  }
  .scene--right .scene__content .stanza{ align-items: stretch; }
}

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


/* ==========================================================================
   MASTERCLASS : dates + formulaire Kajabi
   ========================================================================== */
.dates{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.dates li{
  border: 1px solid var(--line);
  padding: .9rem 1.6rem;
  font-family: var(--font-subtitle);
  font-size: 1.02rem;
  color: var(--cream);
  background: rgba(182,144,92,.06);
}
.dates li strong{ color: var(--gold-light); font-weight: 500; }

.form-card{
  max-width: 30rem;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: rgba(11,9,6,.55);
  backdrop-filter: blur(6px);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.form-card h2{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.9rem;
  margin: 0 0 .5rem;
  color: var(--cream);
}
.form-card p{
  font-size: .98rem;
  color: var(--cream-dim);
  margin: 0 0 1.6rem;
  line-height: 1.5;
}
.form-card label{
  display: block;
  font-family: var(--font-subtitle);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: .4rem;
}
.form-card input[type="text"],
.form-card input[type="email"]{
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--cream);
  background: rgba(244,236,218,.05);
  border: 1px solid var(--line);
  padding: .85rem 1rem;
  margin-bottom: 1.2rem;
  transition: border-color .3s ease, background .3s ease;
}
.form-card input:focus{
  outline: none;
  border-color: var(--gold);
  background: rgba(244,236,218,.09);
}
.form-card input::placeholder{ color: rgba(244,236,218,.3); }
.form-card button{
  width: 100%;
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #1a1208;
  transition: transform .3s ease, box-shadow .3s ease;
}
.form-card button:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px -12px rgba(182,144,92,.6); }
.form-antispam{ position: absolute; left: -9999px; }

/* ==========================================================================
   TEMOIGNAGES
   ========================================================================== */
.temoins{
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x);
  max-width: 78rem;
  margin: 0 auto;
  columns: 2;
  column-gap: clamp(1.4rem, 3vw, 2.4rem);
}
.temoin{
  break-inside: avoid;
  border: 1px solid var(--line);
  background: rgba(182,144,92,.045);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.temoin__prog{
  display: block;
  font-family: var(--font-subtitle);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.temoin p{
  font-size: 1.02rem;
  line-height: 1.66;
  color: var(--cream-dim);
  margin: 0 0 .9rem;
}
.temoin p:last-child{ margin-bottom: 0; }
.temoin strong{ color: var(--cream); font-weight: 500; }

/* ==========================================================================
   APPEL A L ACTION (sur toutes les pages)
   ========================================================================== */
.cta{
  position: relative;
  text-align: center;
  padding: clamp(4.5rem, 11vh, 8rem) var(--pad-x);
  border-top: 1px solid var(--line);
}
.cta__inner{ position: relative; z-index: 2; max-width: 36rem; margin: 0 auto; }
.cta__title{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: var(--cream);
  margin: .6rem 0 1.2rem;
}
.cta__text{
  font-family: var(--font-subtitle);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--cream-dim);
  line-height: 1.6;
  margin: 0 0 2.2rem;
}

@media (max-width: 780px){
  .temoins{ columns: 1; }
}


/* ==========================================================================
   THÈME CLAIR (page Masterclass) : mêmes tons que le visuel, sobre et immersif
   ========================================================================== */
body.theme-clair{
  --bg: #c8b7a8;
  --cream: #2b2118;
  --cream-dim: rgba(43,33,24,.74);
  --cream-faint: rgba(43,33,24,.45);
  --gold: #b08c55;
  --gold-light: #96703d;
  --gold-dim: rgba(176,140,85,.3);
  --line: rgba(150,112,61,.24);
  color: var(--cream);
}
/* la page Immersion a son propre fond, plus clair, calé sur son visuel */
body.page-immersion{ --bg: #e1d6cc; }
body.page-immersion .affiche,
body.page-immersion .entree-mc{ background: #e1d6cc; }
body.page-immersion .scene--right .scene__scrim{
  background: linear-gradient(270deg, rgba(225,214,204,.97) 0%, rgba(225,214,204,.9) 46%, rgba(225,214,204,.6) 74%, rgba(225,214,204,.2) 100%);
}
body.page-immersion .scene--left .scene__scrim{
  background: linear-gradient(90deg, rgba(225,214,204,.97) 0%, rgba(225,214,204,.9) 46%, rgba(225,214,204,.6) 74%, rgba(225,214,204,.2) 100%);
}
body.page-immersion .scene__media::after{ background: rgba(225,214,204,.2); }
body.page-immersion .nav{ background: rgba(225,214,204,.55); }
body.page-immersion .nav.is-solid{ background: rgba(225,214,204,.92); }
@media (max-width: 760px){
  body.page-immersion .nav__links{ background: rgba(225,214,204,.98); }
}

body.theme-clair .grain{ mix-blend-mode: multiply; opacity: .035; }
/* le fond est assez soutenu pour que des paillettes claires ressortent :
   fusion "screen", cœur blanc et halo doré, comme dans la vidéo */
body.theme-clair #paillettes{ mix-blend-mode: screen; opacity: 1; }

body.theme-clair .nav{
  background: rgba(200,183,168,.55);
  border-bottom-color: transparent;
}
body.theme-clair .nav.is-solid{
  background: rgba(200,183,168,.92);
  border-bottom-color: var(--line);
}
body.theme-clair .nav__brand img{ filter: brightness(.35) saturate(1.4); }
body.theme-clair .nav__burger span{ background: var(--cream); }

/* l'affiche officielle en ouverture, sans texte par-dessus */
.affiche{
  position: relative;
  padding-top: var(--nav-h);
  background: #c8b7a8;
}
.affiche img,
.affiche video{
  display: block;
  width: 100%;
  height: auto;
  max-height: 84svh;
  object-fit: contain;
  margin: 0 auto;
}
.affiche__fondu{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(60px, 14%, 160px);
  background: linear-gradient(180deg, transparent, var(--bg) 92%);
  pointer-events: none;
}
.affiche__deco{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(176,140,85,.14), transparent 62%);
}
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* la bande de dates */
.bande-dates{
  background: linear-gradient(180deg, #c8b7a8, #bdaa9a);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.2rem, 5vh, 3.4rem) var(--pad-x);
  text-align: center;
}
.bande-dates .eyebrow{ margin-bottom: .8rem; }
body.theme-clair .dates li{
  background: rgba(255,255,255,.5);
  border-color: var(--line);
}

/* les scènes deviennent claires */
body.theme-clair .scene--right .scene__scrim{
  background: linear-gradient(270deg, rgba(200,183,168,.97) 0%, rgba(200,183,168,.9) 46%, rgba(200,183,168,.6) 74%, rgba(200,183,168,.2) 100%);
}
body.theme-clair .scene--left .scene__scrim{
  background: linear-gradient(90deg, rgba(200,183,168,.97) 0%, rgba(200,183,168,.9) 46%, rgba(200,183,168,.6) 74%, rgba(200,183,168,.2) 100%);
}
body.theme-clair .scene__media::after{ background: rgba(200,183,168,.2); }

/* le formulaire en clair */
body.theme-clair .form-card{
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(4px);
  box-shadow: 0 24px 60px -30px rgba(90,66,38,.35);
}
body.theme-clair .form-card input[type="text"],
body.theme-clair .form-card input[type="email"]{
  background: rgba(255,255,255,.85);
  color: var(--cream);
  border-color: var(--line);
}
body.theme-clair .form-card input:focus{ background: #fff; border-color: var(--gold); }
body.theme-clair .form-card input::placeholder{ color: rgba(43,33,24,.35); }
body.theme-clair .btn,
body.theme-clair .form-card button{
  background: linear-gradient(135deg, #c8a874, #a97f45);
  color: #fffaf3;
  border-color: #a97f45;
  box-shadow: 0 10px 34px -14px rgba(120,88,48,.55);
}
body.theme-clair .footer img{ filter: brightness(.4) saturate(1.3); opacity: .8; }

/* ouverture du Manifeste, sans vidéo : même fond beige que tout le site,
   une légère lueur dorée derrière le logo pour garder un peu de matière */
.opening--beige{ background: var(--bg); }
.opening--beige::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, rgba(182,144,92,.16), transparent 62%);
}
.opening--beige .ring{ border-color: var(--gold-dim); }

/* variante de test : visuel statique (au lieu de la vidéo), pour comparaison */
.opening--visuel{
  background-size: cover;
  background-position: center;
}

@media (max-width: 780px){
  .affiche img,
  .affiche video{ max-height: none; }
}


/* ==========================================================================
   IMMERSION : liste des programmes, tarif
   ========================================================================== */
.programmes{
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.programmes li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .4rem 1.2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.programmes__nom{
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--cream);
}
.programmes__prix{
  font-family: var(--font-subtitle);
  font-size: 1.05rem;
  color: var(--gold-light);
  white-space: nowrap;
}
.programmes__etat{
  grid-column: 1 / -1;
  font-family: var(--font-text);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.programmes__etat--ouvert{ color: var(--gold); }
.programmes__total{
  margin: 1.6rem 0 0;
  font-family: var(--font-subtitle);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-light);
  text-align: right;
}

/* Un element marque "cache" doit vraiment disparaitre.
   Sans cette regle, une regle display (flex, grid...) l'emporte sur
   l'attribut hidden et l'element reste visible. C'est ce qui a fait
   apparaitre les deux grilles de tarifs en meme temps. */
[hidden]{ display: none !important; }

.tarif{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
.tarif li{
  flex: 1 1 13rem;
  border: 1px solid var(--line);
  background: rgba(182,144,92,.06);
  padding: 1.4rem 1.6rem;
}
.tarif__label{
  display: block;
  font-family: var(--font-text);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: .5rem;
}
.tarif__prix{
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  color: var(--cream);
  display: block;
  line-height: 1.1;
}
.tarif__note{
  display: block;
  margin-top: .4rem;
  font-size: .9rem;
  color: var(--cream-dim);
}
.note-fine{
  font-size: .95rem;
  line-height: 1.6;
  color: var(--cream-faint);
  margin: 1.2rem 0 0;
}


/* ==========================================================================
   MASTERCLASS : affiche + formulaire visibles ensemble, sans défiler
   ========================================================================== */
.entree-mc{
  padding-top: var(--nav-h);
  background: #c8b7a8;
}
.entree-mc__grille{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 96rem;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vh, 2rem) var(--pad-x) clamp(1.5rem, 4vh, 3rem);
}
.entree-mc__affiche{ position: relative; }
.entree-mc__affiche img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 62svh;
  object-fit: contain;
}
.entree-mc .form-card{ margin: 0; max-width: none; }
.entree-mc .form-card h2{ font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.entree-mc .form-card p{ margin-bottom: 1.2rem; }
.entree-mc .form-card input[type="text"],
.entree-mc .form-card input[type="email"]{ margin-bottom: .9rem; padding: .78rem 1rem; }

@media (max-width: 1000px){
  .entree-mc__grille{ grid-template-columns: 1fr; }
  .entree-mc__affiche img{ max-height: 52svh; }
}


/* ==========================================================================
   HABILLAGE : ornements, citations, textures
   ========================================================================== */
.orn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(2rem, 5vh, 3.4rem) var(--pad-x);
}
.orn::before, .orn::after{
  content: '';
  height: 1px;
  width: clamp(3rem, 12vw, 10rem);
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.orn span{
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}

.pull{
  position: relative;
  text-align: center;
  padding: clamp(3rem, 8vh, 5.5rem) var(--pad-x);
}
.pull__inner{ position: relative; z-index: 2; max-width: 44rem; margin: 0 auto; }
.pull p{
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.35;
  color: var(--cream);
  margin: 0;
}
.pull cite{
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-subtitle);
  font-style: normal;
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* textures douces sur le thème clair */
body.theme-clair .block,
body.theme-clair .pull{
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(176,140,85,.09), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(176,140,85,.07), transparent 55%);
}
body.theme-clair .bande-dates{
  background-image:
    linear-gradient(180deg, #d3c4b7, #bdaa9a),
    radial-gradient(ellipse at 50% 0%, rgba(176,140,85,.12), transparent 60%);
}
body.theme-clair .pull p{ color: #3a2c1e; }

/* l'affiche encadrée avec un filet doré */
/* le visuel possède déjà son propre cadre : on n'en rajoute pas un deuxième */
.cadre{
  position: relative;
  padding: 0;
  background: none;
  box-shadow: 0 30px 70px -46px rgba(90,66,38,.45);
}
.cadre img{ display: block; width: 100%; height: auto; }

/* ==========================================================================
   TEMOIGNAGES : grille clair 3 colonnes
   ========================================================================== */
.temoins-grille{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  align-items: start;
  padding: clamp(3rem, 8vh, 5rem) var(--pad-x) clamp(4rem, 10vh, 7rem);
  max-width: 92rem;
  margin: 0 auto;
}
/* les blocs passent devant les paillettes : le texte doit rester lisible */
body.theme-clair .temoin{
  position: relative;
  z-index: 4;
  border-color: rgba(150,112,61,.22);
  background: rgba(255,252,247,.88);
  box-shadow: 0 18px 44px -34px rgba(90,66,38,.45);
}
body.theme-clair .temoin p{ color: rgba(43,33,24,.8); }
body.theme-clair .temoin strong{ color: #2b2118; }
.temoin{ margin: 0; }

@media (max-width: 1000px){
  .temoins-grille{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .temoins-grille{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   AJUSTEMENTS : menu par-dessus le visuel, thème ivoire, témoignages lisibles
   ========================================================================== */

/* le menu ne pose plus de bande : il flotte au-dessus du visuel */
.nav{
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11,9,6,.55), rgba(11,9,6,0));
  pointer-events: none;
  transition: opacity .45s ease;
}
.nav.is-solid{
  background: rgba(11,9,6,.85);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.nav.is-solid::before{ opacity: 0; }
body.theme-clair .nav{ background: transparent; }
body.theme-clair .nav::before{
  background: linear-gradient(180deg, rgba(247,238,229,.85), rgba(247,238,229,0));
}
body.theme-clair .nav.is-solid{ background: rgba(247,238,229,.93); }

/* le visuel démarre tout en haut */
.affiche{ padding-top: 0; }
.entree-mc{ padding-top: 0; }
.entree-mc__grille{ padding-top: calc(var(--nav-h) + .5rem); }

/* Masterclass : on resserre pour que la suite de la page se voie tout de suite,
   sans grand vide après la bande de dates */
.entree-mc__grille{ padding-bottom: clamp(.8rem, 2vh, 1.3rem); }
.entree-mc + .bande-dates{ padding-block: clamp(1.1rem, 2.4vh, 1.7rem); }
.bande-dates + .orn{ padding-block: clamp(.7rem, 1.5vh, 1.1rem); }
.orn + .block{ padding-top: clamp(1rem, 2.2vh, 1.6rem); }
.orn + .block .block__title{ margin-top: 0; }

/* ── thème ivoire, repris des tons du visuel de l'Immersion ── */
body.theme-ivoire{
  --bg: #f7ece1;
  --cream: #2e2318;
  --cream-dim: rgba(46,35,24,.76);
  --cream-faint: rgba(46,35,24,.46);
  --gold: #b08c55;
  --gold-light: #92745c;
  --gold-dim: rgba(176,140,85,.3);
  --line: rgba(146,116,92,.26);
  color: var(--cream);
  background: #f7ece1;
}
body.theme-ivoire .grain{ mix-blend-mode: multiply; opacity: .035; }
body.theme-ivoire #paillettes{ mix-blend-mode: multiply; opacity: .45; }
body.theme-ivoire .nav__burger span{ background: var(--cream); }
body.theme-ivoire .block,
body.theme-ivoire .pull{
  background-image:
    radial-gradient(ellipse at 12% 0%, rgba(231,197,165,.4), transparent 58%),
    radial-gradient(ellipse at 88% 100%, rgba(176,140,85,.16), transparent 58%);
}
body.theme-ivoire .pull p{ color: #3a2c1e; }
body.theme-ivoire .scene--right .scene__scrim{
  background: linear-gradient(270deg, rgba(247,236,225,.97) 0%, rgba(247,236,225,.9) 46%, rgba(247,236,225,.6) 74%, rgba(247,236,225,.2) 100%);
}
body.theme-ivoire .scene--left .scene__scrim{
  background: linear-gradient(90deg, rgba(247,236,225,.97) 0%, rgba(247,236,225,.9) 46%, rgba(247,236,225,.6) 74%, rgba(247,236,225,.2) 100%);
}
body.theme-ivoire .scene__media::after{ background: rgba(247,236,225,.18); }
body.theme-ivoire .programmes li{ border-bottom-color: var(--line); }
body.theme-ivoire .programmes{ border-top-color: var(--line); }
body.theme-ivoire .tarif li{ background: rgba(255,255,255,.55); border-color: var(--line); }
body.theme-ivoire .btn{
  background: linear-gradient(135deg, #c8a874, #a97f45);
  color: #fffaf3;
  border-color: #a97f45;
  box-shadow: 0 10px 34px -14px rgba(120,88,48,.55);
}
body.theme-ivoire .footer img{ filter: brightness(.4) saturate(1.3); opacity: .8; }

/* ── TÉMOIGNAGES : mots importants qui ressortent, titres plus grands ── */
.temoin__prog{
  font-family: var(--font-subtitle);
  font-size: 1.02rem;
  letter-spacing: .14em;
  color: var(--gold-light);
  margin-bottom: 1.1rem;
}
body.theme-clair .temoin__prog{ color: #8a6533; }
.temoin p{ font-size: 1.05rem; line-height: 1.7; }
.temoin strong{
  font-weight: 600;
  color: #241b12;
  background: linear-gradient(180deg, transparent 60%, rgba(200,168,116,.5) 60%);
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body:not(.theme-clair) .temoin strong{
  color: var(--cream);
  background: linear-gradient(180deg, transparent 60%, rgba(182,144,92,.45) 60%);
}

/* en-tête court : les témoignages arrivent tout de suite */
.entete-court{
  text-align: center;
  padding: calc(var(--nav-h) + clamp(1.6rem, 4vh, 2.8rem)) var(--pad-x) 0;
}
.entete-court h1{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.15;
  margin: .6rem 0 .7rem;
  color: var(--cream);
}
.entete-court p{
  font-family: var(--font-subtitle);
  font-style: italic;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--cream-dim);
  margin: 0;
}
.temoins-grille{ padding-top: clamp(1.6rem, 4vh, 2.6rem); }


/* menu de la page Immersion : aucun bandeau, texte noir bien lisible sur le visuel clair */


/* signature du témoignage */
.temoin cite{
  display: block;
  margin-top: 1rem;
  font-family: var(--font-subtitle);
  font-style: normal;
  font-size: .92rem;
  letter-spacing: .1em;
  color: #8a6533;
}
.temoin cite::before{ content: '\2014\00a0'; }


/* page Immersion : jamais de bandeau, même en défilant */


/* le fond du menu déroulant n'existe que sur mobile */
@media (max-width: 760px){
  body.theme-clair .nav__links{ background: rgba(200,183,168,.98); }
  body.theme-ivoire .nav__links{ background: rgba(247,236,225,.98); }
}


/* ==========================================================================
   Page Immersion : menu blanc. Le bandeau de défilement devient sombre
   pour que le blanc reste lisible (beige + blanc = illisible).
   ========================================================================== */
body.theme-ivoire .nav{
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.theme-ivoire .nav::before{
  display: block;
  background: linear-gradient(180deg, rgba(20,14,8,.42), rgba(20,14,8,0));
}
body.theme-ivoire .nav.is-solid{
  background: rgba(20,14,8,.78);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,.14);
}
body.theme-ivoire .nav.is-solid::before{ opacity: 0; }
body.theme-ivoire .nav__links a,
body.theme-ivoire .nav.is-solid .nav__links a{
  color: #fff;
  opacity: 1;
  font-weight: 600;
  text-shadow: none;
}
body.theme-ivoire .nav__links a[aria-current="page"],
body.theme-ivoire .nav.is-solid .nav__links a[aria-current="page"],
body.theme-ivoire .nav__links a:hover{
  color: #fff;
  opacity: .72;
}
body.theme-ivoire .nav__links a::after{ background: #fff; }
body.theme-ivoire .nav__brand img,
body.theme-ivoire .nav.is-solid .nav__brand img{
  filter: brightness(0) invert(1);
}
body.theme-ivoire .nav__burger span{ background: #fff; }


/* mention de remise, placée avant le prix */
.tarif__remise{
  display: block;
  font-family: var(--font-subtitle);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--gold-light);
  margin-bottom: .55rem;
}


/* les deux cartes de tarif partagent les mêmes lignes : les prix s'alignent */
.tarif{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto auto;
}
.tarif li{
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  gap: 0;
}
.tarif__label{ align-self: start; }
.tarif__remise{ align-self: start; margin-bottom: 0; }
.tarif__prix{ align-self: end; }
.tarif__note{ align-self: start; }

@media (max-width: 700px){
  .tarif{ grid-template-columns: 1fr; grid-template-rows: none; }
  .tarif li{ grid-row: auto; grid-template-rows: none; }
}


/* ==========================================================================
   Le texte passe toujours DEVANT les paillettes (canvas en z-index 3),
   pour qu'aucune paillette ne vienne se poser sur les mots.
   ========================================================================== */
.opening__inner,
.block__inner,
.scene__content,
.split__text,
.pull__inner,
.cta__inner,
.card__body,
.entete-court,
.form-card,
.bande-dates,
.footer{
  position: relative;
  z-index: 5;
}
/* déjà positionné en absolu : on ne change que sa profondeur */
.scroll-cue{ z-index: 5; }

/* ==========================================================================
   Fonds des sections de lecture : un peu plus clairs que le fond général,
   mais volontairement plus sombres que les paillettes, qui restent visibles
   par-dessus (elles passent derrière le texte, jamais dessus).
   ========================================================================== */
body.theme-clair .block,
body.theme-clair .pull,
body.theme-clair .split,
body.theme-clair .cta{
  background-color: #d2c4b6;
}
body.page-immersion .block,
body.page-immersion .pull,
body.page-immersion .split,
body.page-immersion .cta{
  background-color: #eae1d9;
}


/* ==========================================================================
   Sur les fonds colorés, les petits intertitres et les phrases d'accent
   se lisaient mal : on les agrandit et on renforce leur contraste.
   ========================================================================== */
/* écrits dans le blanc chaud du cœur des paillettes. Sur un fond clair, un
   blanc seul disparaîtrait : un liseré brun doré très fin dessine les lettres
   et leur garde du relief, sans alourdir. */
body.theme-clair .eyebrow{
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  letter-spacing: .26em;
  color: #fffaf0;
  font-weight: 600;
  margin-bottom: 1.6rem;
  -webkit-text-stroke: .6px rgba(122, 92, 44, .85);
  paint-order: stroke fill;
  text-shadow: 0 1px 5px rgba(90, 66, 38, .45);
}
body.theme-clair .stanza .line--accent{
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  color: #fffaf0;
  font-weight: 600;
  -webkit-text-stroke: .7px rgba(122, 92, 44, .85);
  paint-order: stroke fill;
  text-shadow: 0 1px 6px rgba(90, 66, 38, .45);
}
body.theme-clair .stanza .line--final{
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  color: #fffdf7;
  -webkit-text-stroke: .7px rgba(122, 92, 44, .8);
  paint-order: stroke fill;
  text-shadow: 0 1px 6px rgba(90, 66, 38, .45);
}


/* ==========================================================================
   MASTERCLASS : un seul et même fond du haut de page jusqu'aux 3 dates.
   Plus de bandeau distinct, plus de cadres empilés.
   ========================================================================== */
.entree-mc,
.entree-mc + .bande-dates{
  background: var(--bg);
  background-image: none;
  border-top: 0;
  border-bottom: 0;
}
body.theme-clair .entree-mc + .bande-dates{
  background: var(--bg);
  background-image: none;
}
/* l'affiche n'a plus d'ombre portée : elle se pose simplement sur le fond */
.entree-mc .cadre{ box-shadow: none; }
/* le formulaire garde juste ce qu'il faut pour rester lisible, sans effet de carte */
body.theme-clair .entree-mc .form-card{
  background: rgba(255,252,247,.5);
  box-shadow: none;
  border: 1px solid var(--line);
}
/* les dates : plus de pastilles encadrées, juste le texte */
body.theme-clair .entree-mc + .bande-dates .dates li{
  background: none;
  border: 0;
}


/* les deux bonus de l'Immersion, distingués du catalogue de programmes */
.programmes__bonus{
  background: rgba(255, 250, 240, .34);
  border-left: 2px solid var(--gold);
  padding-left: .9rem;
}
.programmes__bonus .programmes__nom{ font-weight: 600; }


/* en-tête de la partie Questions-Réponses, à l'intérieur de la page témoignages */
.entete-court--qr{
  padding-top: clamp(2.5rem, 7vh, 4.5rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(1rem, 3vh, 2rem);
}
.entete-court--qr h2{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.2;
  margin: .6rem 0 .7rem;
  color: var(--cream);
}


/* ==========================================================================
   GRANDS INTERTITRES DE SCÈNE
   L'intertitre quitte le petit label discret pour devenir une véritable
   respiration : une phrase en grand, presque sur toute la largeur, avec le
   texte qui garde dessous une colonne étroite et confortable à lire.
   ========================================================================== */
.scene__content{ max-width: min(94vw, 80rem); }

body.theme-clair .scene .eyebrow,
body.page-immersion .scene .eyebrow{
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  text-transform: none;
  font-weight: 400;
  max-width: none;
  margin-bottom: clamp(1.8rem, 4vh, 3.2rem);
  color: #fffaf0;
  -webkit-text-stroke: 1px rgba(122, 92, 44, .8);
  paint-order: stroke fill;
  text-shadow: 0 2px 16px rgba(90, 66, 38, .45);
}

/* le texte reste en colonne étroite, calée du bon côté de la scène */
.scene .stanza{ max-width: 34rem; }
.scene--right .stanza{ margin-left: auto; }
.scene--left .stanza{ margin-right: auto; }

/* les scènes respirent davantage */
.scene{ min-height: 104vh; }

@media (max-width: 780px){
  body.theme-clair .scene .eyebrow,
  body.page-immersion .scene .eyebrow{
    font-size: clamp(2.1rem, 9.5vw, 3.4rem);
    -webkit-text-stroke-width: .7px;
  }
  .scene{ min-height: 92vh; }
}

/* les grands titres de bloc suivent le même souffle */
.block__title{
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -0.008em;
}


/* ==========================================================================
   HIÉRARCHIE DE LECTURE, EN 3 NIVEAUX CLAIRS

   1. LE CHAPITRE  : une vraie coupure. Chiffre, filet, grand titre, beaucoup
      de vide. On sait qu'on change de partie.
   2. LE TITRE DE SECTION : même rang partout, que la section soit posée sur
      une photo (texte clair) ou sur le fond uni (texte foncé). Même police,
      même taille, même largeur : plus de confusion de niveau.
   3. LE TEXTE : colonne étroite, confortable à lire.
   ========================================================================== */

/* ---- Niveau 2 : tous les titres de section au même rang ---- */
.block__title,
body.theme-clair .scene .eyebrow,
body.page-immersion .scene .eyebrow{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.07;
  letter-spacing: -0.012em;
  text-transform: none;
}
/* le titre de bloc sort de la colonne de texte et prend la largeur de la page */
.block__title{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 74rem);
  max-width: none;
  margin-bottom: clamp(1.8rem, 4vh, 2.8rem);
}

/* ---- Niveau 1 : la coupure de chapitre ---- */
.chapitre{
  position: relative;
  text-align: center;
  padding: clamp(5.5rem, 17vh, 11rem) var(--pad-x);
}
.chapitre__num{
  display: block;
  font-family: var(--font-subtitle);
  font-size: .8rem;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem 1.2em;
}
.chapitre__filet{
  display: block;
  width: clamp(3rem, 9vw, 7rem);
  height: 1px;
  margin: 0 auto clamp(1.8rem, 4vh, 2.8rem);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.chapitre__titre{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 auto;
  max-width: min(92vw, 56rem);
  color: var(--cream);
}
.chapitre__sous{
  font-family: var(--font-subtitle);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--cream-dim);
  margin: 1.6rem auto 0;
  max-width: 34rem;
}
/* la coupure se voit aussi par le vide : la section qui suit démarre plus haut */
.chapitre + .block,
.chapitre + .scene{ padding-top: clamp(1rem, 3vh, 2rem); }

@media (max-width: 780px){
  .chapitre{ padding-block: clamp(4rem, 12vh, 6rem); }
}


/* ==========================================================================
   UN SEUL STYLE DE TITRE DE SECTION, PARTOUT.
   Avant, la même idée était habillée de trois façons : grand titre serif,
   grande phrase claire sur photo, et petite étiquette en capitales espacées.
   D'où l'impression de niveaux différents. Désormais, tout titre de section
   utilise la même police, la même échelle et la même casse. Seule la couleur
   s'adapte au fond (clair sur photo, foncé sur fond uni).

   Les capitales espacées ne servent plus que d'étiquette (numéro de chapitre,
   libellé au-dessus des dates) : un rôle, un style.
   ========================================================================== */
.block__title,
.cta__title,
body.theme-clair .scene .eyebrow,
body.page-immersion .scene .eyebrow,
body.theme-clair .split__text .eyebrow,
body.page-immersion .split__text .eyebrow{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.07;
  letter-spacing: -0.012em;
  text-transform: none;
  margin-bottom: clamp(1.6rem, 3.6vh, 2.6rem);
}
/* sur le fond uni, le titre est foncé ; sur une photo, il est clair et cerné */
body.theme-clair .split__text .eyebrow,
body.page-immersion .split__text .eyebrow{
  color: var(--cream);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.cta__title{ margin-bottom: 1.2rem; }

/* étiquettes : le seul endroit où les capitales espacées subsistent */
.bande-dates .eyebrow,
.entete-court .eyebrow,
.cta .eyebrow{
  font-family: var(--font-subtitle);
  font-size: .82rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  -webkit-text-stroke: 0;
  text-shadow: none;
  margin-bottom: 1.4rem;
}


/* ==========================================================================
   TÉMOIGNAGES : plus de trous.
   La grille alignait les blocs par rangées : dès qu'un témoignage était long,
   toute la rangée se creusait. On passe à un flux en colonnes : chaque bloc
   se glisse sous le précédent et remplit l'espace, quelle que soit sa longueur.
   ========================================================================== */
.temoins-grille{
  display: block;
  columns: 3;
  column-gap: clamp(1.1rem, 2.2vw, 1.8rem);
  max-width: 92rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--pad-x) clamp(4rem, 10vh, 7rem);
}
.temoins-grille .temoin{
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.8rem);
}
@media (max-width: 1000px){
  .temoins-grille{ columns: 2; }
}
@media (max-width: 700px){
  .temoins-grille{ columns: 1; }
}


/* l'ancienne règle générale l'emportait encore : on force l'étiquette à rester
   une étiquette (petite), pour ne pas la confondre avec un titre de section */
body.theme-clair .bande-dates .eyebrow,
body.theme-clair .entete-court .eyebrow,
body.theme-clair .cta .eyebrow,
body.page-immersion .bande-dates .eyebrow,
body.page-immersion .entete-court .eyebrow,
body.page-immersion .cta .eyebrow{
  font-family: var(--font-subtitle);
  font-size: .82rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  -webkit-text-stroke: 0;
  text-shadow: none;
  margin-bottom: 1.4rem;
}


/* ==========================================================================
   ALIGNEMENT : tout à gauche, titre et texte sur le même bord.
   Le texte aligné à droite se lisait mal et ne tombait pas en face de son
   titre. On supprime aussi la sortie de colonne du titre de bloc, qui
   faisait déborder la page sur le côté.
   ========================================================================== */
.block__title{
  position: static;
  left: auto;
  transform: none;
  width: auto;
  max-width: 100%;
}
.scene--right .scene__content,
.scene--left .scene__content{ text-align: left; }
.scene--right .scene__content .stanza{ align-items: flex-start; }
.scene--right .stanza,
.scene--left .stanza{ margin-left: 0; margin-right: 0; }

/* la scène garde sa composition : texte d'un côté, photo de l'autre */
.scene--right .scene__content{ margin-left: auto; }
.scene--left .scene__content{ margin-right: auto; }


/* les bonus : le texte ne doit pas être collé au filet doré ni au bord droit
   (la règle générale des lignes de programme écrasait le retrait) */
.programmes li.programmes__bonus{
  padding-left: 1.4rem;
  padding-right: 1.1rem;
}


/* ==========================================================================
   ALTERNANCE DES FONDS
   Les sections alternent entre deux beiges proches, pour que la page respire
   sans jamais devenir trop claire : les paillettes, presque blanches, doivent
   rester visibles. La section qui suit la vidéo reprend exactement la couleur
   du bas de celle-ci (#d4c2af), pour un raccord invisible.
   ========================================================================== */
body.theme-clair main > section:nth-of-type(odd){ background-color: #d4c2af; }
body.theme-clair main > section:nth-of-type(even){ background-color: #c8b7a8; }

/* raccord exact avec le bas de la vidéo */
body.theme-clair .opening + section{ background-color: #d4c2af; }

/* les scènes gardent leur photo : pas de fond plat par-dessus */
body.theme-clair .scene,
body.theme-clair .opening,
body.theme-clair .affiche{ background-color: transparent; }

/* page Immersion : même alternance, un cran plus clair, accordée à son visuel */
body.page-immersion main > section:nth-of-type(odd){ background-color: #e1d6cc; }
body.page-immersion main > section:nth-of-type(even){ background-color: #d6c9bd; }
body.page-immersion .scene,
body.page-immersion .affiche{ background-color: transparent; }

/* ==========================================================================
   MASTERCLASS : la bande des dates passe sur un fond plus clair, pour que
   « Masterclass offerte, en direct » et les horaires se lisent nettement.
   ========================================================================== */
body.theme-clair .bande-dates,
body.theme-clair main > section.bande-dates{
  background-color: #e6dacb;
  background-image: none;
}
body.theme-clair .bande-dates .eyebrow{ color: #8a6533; }
body.theme-clair .bande-dates .dates li{ color: #2b2118; }


/* ces deux règles doivent l'emporter sur l'alternance (même poids sinon) */
body.theme-clair main > section.opening + section,
body.page-immersion main > section.affiche + section{
  background-color: #d4c2af;
}
body.page-immersion main > section.affiche + section{ background-color: #e1d6cc; }
body.theme-clair main > section.scene,
body.theme-clair main > section.opening,
body.theme-clair main > section.affiche,
body.page-immersion main > section.scene,
body.page-immersion main > section.affiche{
  background-color: transparent;
}


/* la bande des dates repasse sur un fond plus clair : elle doit se lire
   nettement. Cette règle doit l'emporter sur celle qui unifiait le haut de la
   page Masterclass (fond continu depuis le visuel). */
body.theme-clair main > section.entree-mc + section.bande-dates{
  background-color: #e6dacb;
  background-image: none;
}
body.theme-clair main > section.bande-dates .eyebrow{ color: #7d5b2c; }
body.theme-clair main > section.bande-dates .dates li{ color: #241b12; }


/* ==========================================================================
   PAGE IMMERSION : le fond reprend exactement le bas du visuel (#d8c8b5),
   relevé dans l'image elle-même, pour que le raccord ne se voie pas.
   L'alternance se construit autour de ce ton.
   ========================================================================== */
html:has(body.page-immersion){ background: #d8c8b5; }
body.page-immersion{ --bg: #d8c8b5; }

body.page-immersion main > section:nth-of-type(odd){ background-color: #d8c8b5; }
body.page-immersion main > section:nth-of-type(even){ background-color: #cbbaa7; }
body.page-immersion main > section.affiche + section{ background-color: #d8c8b5; }
body.page-immersion main > section.scene,
body.page-immersion main > section.affiche{ background-color: transparent; }

/* les dégradés posés sur les photos suivent le nouveau ton */
body.page-immersion .scene--right .scene__scrim{
  background: linear-gradient(270deg, rgba(216,200,181,.97) 0%, rgba(216,200,181,.9) 46%, rgba(216,200,181,.6) 74%, rgba(216,200,181,.2) 100%);
}
body.page-immersion .scene--left .scene__scrim{
  background: linear-gradient(90deg, rgba(216,200,181,.97) 0%, rgba(216,200,181,.9) 46%, rgba(216,200,181,.6) 74%, rgba(216,200,181,.2) 100%);
}
body.page-immersion .nav{ background: rgba(216,200,181,.55); }
body.page-immersion .nav.is-solid{ background: rgba(216,200,181,.92); }
@media (max-width: 760px){
  body.page-immersion .nav__links{ background: rgba(216,200,181,.98); }
}


/* ==========================================================================
   PAGE IMMERSION : le menu flotte sur le visuel, sans aucun fond, tant que
   l'on est en haut de page. Il ne reprend un fond qu'une fois que l'on a
   commencé à défiler, pour rester lisible sur le texte.
   ========================================================================== */
body.page-immersion .nav{
  background: transparent;
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.page-immersion .nav.is-solid{
  background: rgba(216,200,181,.92);
  backdrop-filter: blur(10px);
}


/* propriété détaillée, sinon le « background » raccourci de cette règle est
   annulé par le « background-color: transparent » déclaré plus haut */
body.page-immersion .nav.is-solid{
  background-color: rgba(216, 200, 181, .93);
  border-bottom-color: var(--line);
}


/* ==========================================================================
   BLOCS CLAIRS DE RESPIRATION
   Le ton clair du menu (#e6dacb) revient régulièrement dans la page : sur les
   coupures de partie et sur les citations. Ça aère et ça crée un rythme
   sans jamais devenir assez clair pour effacer les paillettes.
   ========================================================================== */
body.theme-clair main > section.chapitre,
body.theme-clair main > section.pull,
body.page-immersion main > section.chapitre,
body.page-immersion main > section.pull{
  background-color: #e6dacb;
}

/* un filet très fin marque le passage vers le bloc clair, puis vers la suite */
body.theme-clair main > section.chapitre,
body.theme-clair main > section.pull{
  border-top: 1px solid rgba(150,112,61,.16);
  border-bottom: 1px solid rgba(150,112,61,.16);
}

/* le titre de partie respire davantage dans ce bloc clair */
.chapitre__titre{ color: #2b2118; }
.chapitre__filet{ margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }


/* ==========================================================================
   PAGE TÉMOIGNAGES : plus de coupure sous le titre.
   L'en-tête et les témoignages qui le suivent forment un seul bloc de couleur.
   L'alternance se fait entre les deux grandes parties (les témoignages des
   programmes, puis les Questions-Réponses), et non au milieu d'un en-tête.
   ========================================================================== */
body.page-temoignages main > section:nth-of-type(1),
body.page-temoignages main > section:nth-of-type(2){
  background-color: #c8b7a8;
}
body.page-temoignages main > section:nth-of-type(3),
body.page-temoignages main > section:nth-of-type(4){
  background-color: #e6dacb;
}
body.page-temoignages main > section:nth-of-type(5){
  background-color: #c8b7a8;
}
/* l'en-tête ne se détache plus : ni filet, ni écart de couleur */
body.page-temoignages .entete-court{ border-top: 0; border-bottom: 0; }
/* seule la bascule vers les Questions-Réponses garde un filet discret */
body.page-temoignages .entete-court--qr{ border-top: 1px solid rgba(150,112,61,.16); }


/* ==========================================================================
   PAGE IMMERSION : le visuel occupe toute la largeur, quel que soit l'écran.
   Avant, une hauteur maximale le bridait : sur les écrans larges, il restait
   des bandes de fond à gauche et à droite. La largeur prime désormais.
   ========================================================================== */
.affiche img{
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}


/* liste simple des programmes majeurs : uniquement des noms, sans prix */
.programmes--simples li{
  display: block;
  padding: .85rem 0;
}
.programmes--simples .programmes__nom{
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: .04em;
  color: var(--cream);
}


/* échéance de tarif : doit se voir sans crier */
.echeance{
  max-width: 40rem;
  margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
  background: rgba(255, 252, 247, .55);
  border-left: 3px solid var(--gold);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--cream);
}
.echeance strong{ color: #6d5533; }


/* ==========================================================================
   TÉMOIGNAGE EN VIDÉO, en ouverture de la page Témoignages.
   Lecture volontairement manuelle : la vidéo dure dix minutes et contient du
   son, elle ne doit pas se lancer toute seule. « preload: metadata » évite
   aussi de télécharger 19 Mo à chaque visite.
   ========================================================================== */
.temoin-video{
  padding: calc(var(--nav-h) + clamp(1.4rem, 4vh, 2.6rem)) var(--pad-x) 0;
  text-align: center;
}
.temoin-video__cadre{
  max-width: 54rem;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  box-shadow: 0 26px 60px -34px rgba(90, 66, 38, .5);
}
.temoin-video video{
  display: block;
  width: 100%;
  height: auto;
  background: #2b2118;
}
.temoin-video__legende{
  position: relative;
  z-index: 5;
  font-family: var(--font-subtitle);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--cream-dim);
  margin: 1.1rem auto 0;
  max-width: 34rem;
}
/* l en-tete qui suit n a plus besoin de son grand retrait */
.temoin-video + .entete-court{ padding-top: clamp(1.8rem, 5vh, 3rem); }


/* ==========================================================================
   La vidéo est passée APRÈS l'en-tête : on reprend les espacements et les
   zones de couleur, qui étaient calés sur l'ancien ordre des sections.
   ========================================================================== */
.temoin-video{
  padding-top: clamp(1.2rem, 3vh, 2.2rem);
  padding-bottom: clamp(1.4rem, 3.5vh, 2.4rem);
}
.entete-court + .temoin-video{ padding-top: clamp(1.2rem, 3vh, 2.2rem); }
.temoin-video + .temoins-grille{ padding-top: clamp(1.6rem, 4vh, 2.6rem); }

/* zones de couleur : en-tête + vidéo + témoignages forment un seul bloc,
   la bascule vers les Questions-Réponses reste le seul changement de ton */
body.page-temoignages main > section:nth-of-type(1),
body.page-temoignages main > section:nth-of-type(2),
body.page-temoignages main > section:nth-of-type(3){
  background-color: #c8b7a8;
}
body.page-temoignages main > section:nth-of-type(4),
body.page-temoignages main > section:nth-of-type(5){
  background-color: #e6dacb;
}
body.page-temoignages main > section:nth-of-type(6){
  background-color: #c8b7a8;
}


/* ---- Bouton d'appel en haut de la page Immersion ---- */
.appel-haut{
  position: relative;
  z-index: 5;
  text-align: center;
  margin: 0 0 clamp(2rem, 5vh, 3.2rem);
}

/* ---- Compte à rebours du tarif ---- */
.compte-rebours{
  position: relative;
  z-index: 5;
  max-width: 40rem;
  margin: 1.1rem 0 0;
  padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.2rem, 2.6vw, 1.7rem);
  background: rgba(255, 252, 247, .5);
  border-left: 3px solid var(--gold);
  text-align: center;
}
.compte-rebours__intro,
.compte-rebours__fin{
  display: block;
  font-family: var(--font-subtitle);
  font-style: italic;
  font-size: 1rem;
  color: var(--cream-dim);
}
.compte-rebours__blocs{
  display: flex;
  justify-content: center;
  gap: clamp(.9rem, 3vw, 2rem);
  margin: .7rem 0;
}
.compte-rebours__blocs span{ display: block; }
.compte-rebours__blocs b{
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  color: #6d5533;
  font-variant-numeric: tabular-nums;
}
.compte-rebours__blocs i{
  display: block;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-top: .35rem;
}
.compte-rebours__ecoule{
  display: block;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #6d5533;
  font-weight: 600;
}