/* ============================================================
   LAURE PEREZ — LE CERCLE 3C
   V2 — Expérience web immersive premium
   Fondation V1 conservée (contenu, structure, offres) + surcouche
   direction artistique / motion design / profondeur.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Colors — palette de base (inchangée) */
  --bg: #FFF9F3;
  --cream: #F6EDE3;
  --coral: #D98270;
  --terracotta: #B95F4F;
  --text: #292523;
  --text-secondary: #6F625B;
  --gold: #C9A66B;
  --white: #FFFFFF;

  /* Palette V2 — rythme clair / profond */
  --brun-profond: #2A1D17;      /* rupture sombre : transformation, high-ticket */
  --brun-profond-2: #35251C;
  --terracotta-profond: #7A4132;
  --dark-text: #F6EDE3;
  --dark-text-secondary: rgba(246, 237, 227, .70);
  --dark-accent: #E3A98F;
  --lumiere: #FFFBF5;            /* pic lumineux : cta final */

  --coral-10: rgba(217, 130, 112, .10);
  --coral-16: rgba(217, 130, 112, .16);
  --terracotta-10: rgba(185, 95, 79, .10);
  --gold-14: rgba(201, 166, 107, .14);
  --gold-30: rgba(201, 166, 107, .35);
  --ink-06: rgba(41, 37, 35, .06);
  --ink-10: rgba(41, 37, 35, .10);

  /* Typography */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* Radius */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-soft: 0 12px 40px rgba(185, 95, 79, .10);
  --shadow-card: 0 8px 30px rgba(41, 37, 35, .06);
  --shadow-lift: 0 20px 50px rgba(185, 95, 79, .16);
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, .35);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, .8, .3, 1);
  --dur-s: .3s;
  --dur-m: .6s;

  /* Scroll-driven progress vars (set by motion.js, 0 → 1) */
  --progress: 0;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p{ margin: 0; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
details > summary{ cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker{ display: none; }

body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{
  cursor: none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--terracotta);
  color: var(--white);
  padding: .8em 1.4em;
  z-index: 999;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus{ left: 0; }

:focus-visible{
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* ---------- 3. LAYOUT UTILITIES ---------- */
.container{
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-3);
  position: relative;
}
.container--narrow{ max-width: 820px; }

.section{
  position: relative;
  padding-block: var(--space-7);
  overflow: clip;
}

/* Sections sombres — rupture de rythme */
.section--dark{
  background: linear-gradient(180deg, var(--brun-profond), var(--brun-profond-2));
  --text: var(--dark-text);
  --text-secondary: var(--dark-text-secondary);
  --terracotta: var(--dark-accent);
  --ink-06: rgba(246, 237, 227, .08);
  --ink-10: rgba(246, 237, 227, .14);
  color: var(--dark-text);
}
/* Fondu d'entrée : la section précédente semble se prolonger dans le sombre
   au lieu d'un cut net — un seul mécanisme réutilisé pour toutes les
   ruptures sombres (langage visuel cohérent). */
.section--dark::before{
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(180deg, var(--bg), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 4. TYPOGRAPHY ---------- */
.eyebrow{
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}
.eyebrow--center{ text-align: center; }

.section__title{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: var(--space-3);
}
.section__title--center{ text-align: center; max-width: 780px; margin-inline: auto; margin-bottom: var(--space-3); }

.section__lead{
  font-size: 1.08rem;
  color: var(--text-secondary);
  max-width: 640px;
  margin-bottom: var(--space-2);
}
.section__lead--center{ text-align: center; margin-inline: auto; }

.pull-quote{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  text-align: center;
  color: var(--terracotta);
  margin-top: var(--space-5);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.pull-quote span{ color: var(--text); font-style: normal; font-weight: 600; }

/* ---------- 5. BUTTONS ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.8em;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .98rem;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Reflet très subtil au survol — une lueur qui traverse le bouton */
.btn::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-soft);
  pointer-events: none;
}
.btn:hover::after{ transform: translateX(120%); }
.btn > *{ position: relative; z-index: 2; }

.btn--primary{
  background: var(--terracotta);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover{ background: #a5503f; transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn--secondary{
  background: var(--white);
  color: var(--terracotta);
  border: 1.5px solid var(--coral);
}
.btn--secondary:hover{ background: var(--coral-10); transform: translateY(-2px); }

.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--ink-10);
}
.btn--ghost:hover{ border-color: var(--terracotta); color: var(--terracotta); }
.btn--ghost-dark{ color: var(--dark-text); border-color: rgba(246,237,227,.25); }
.btn--ghost-dark:hover{ border-color: var(--dark-accent); color: var(--dark-accent); }

.btn--large{ padding: 1.1em 2.4em; font-size: 1.05rem; }
.btn--small{ padding: .65em 1.3em; font-size: .88rem; }
.btn--full{ width: 100%; }

/* ---------- 6. HEADER ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 249, 243, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-06);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: .7rem;
}
.brand__logo{ height: 46px; width: auto; }
.header-cta{ flex-shrink: 0; }

@media (max-width: 480px){
  .brand__logo{ height: 38px; }
  .header-cta{ padding: .6em 1em; font-size: .82rem; }
}

/* ---------- 7. SCROLL REVEAL ---------- */
.reveal{
  opacity: 0;
  transform: translateY(26px) scale(.985);
  filter: blur(6px);
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft), filter .85s var(--ease-soft);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- 8. CUSTOM CURSOR ---------- */
.cursor-dot, .cursor-ring{
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s var(--ease), width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  will-change: transform;
}
.cursor-dot{
  width: 7px; height: 7px;
  background: var(--terracotta);
  transform: translate(-50%, -50%);
}
.cursor-ring{
  width: 34px; height: 34px;
  border: 1.5px solid var(--coral-16);
  background: transparent;
  transform: translate(-50%, -50%);
}
body.has-custom-cursor .cursor-dot,
body.has-custom-cursor .cursor-ring{ opacity: 1; }
body.cursor-hover .cursor-ring{
  width: 54px; height: 54px;
  border-color: var(--terracotta);
  background: var(--coral-10);
}
body.cursor-hover .cursor-dot{ opacity: 0; }

/* ---------- 9. HERO ---------- */
.hero{
  position: relative;
  padding-block: var(--space-6) var(--space-7);
  overflow: clip;
  isolation: isolate;
}

.hero__decor{
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(45% 45% at 78% 18%, var(--coral-16), transparent 70%),
    radial-gradient(35% 35% at 8% 70%, var(--gold-14), transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: heroLayerIn 1.4s var(--ease-soft) forwards;
}
.hero__decor--soft{ opacity: .6; animation: none; }

.hero__scene-wrap{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: heroLayerIn 1.6s var(--ease-soft) .25s forwards;
}
.hero__scene{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ease-soft);
}
.hero__scene.is-ready{ opacity: 1; }

/* Constellation cognitive — fallback SVG (mobile / reduced-motion / avant
   chargement WebGL) et langage visuel repris par la scène 3D quand elle
   charge. Représente pensées connectées / attention, jamais de blob générique. */
.hero__constellation{
  position: absolute;
  top: 0; right: -4%;
  width: 62%;
  height: 100%;
  overflow: visible;
  animation: constellationSpin 90s linear infinite;
  transform-origin: 50% 50%;
}
.hero__constellation-lines line{
  stroke: var(--gold-30);
  stroke-width: 1.4;
  opacity: .5;
}
.hero__constellation-nodes .node{
  fill: var(--coral);
  opacity: .55;
}
.hero__constellation-nodes .node--core{
  fill: var(--terracotta);
  opacity: .75;
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 5s ease-in-out infinite;
}
.hero__constellation-nodes .node--spark{
  fill: var(--gold);
  animation: nodeTwinkle 4s ease-in-out infinite;
}
.hero__constellation-nodes .node--spark:nth-child(5){ animation-delay: -1.6s; }

.hero__scene.is-ready ~ .hero__constellation{ opacity: 0; transition: opacity 1s ease; }

@keyframes constellationSpin{ to{ transform: rotate(360deg); } }
@keyframes nodePulse{
  0%, 100%{ opacity: .6; transform: scale(1); }
  50%{ opacity: .9; transform: scale(1.18); }
}
@keyframes nodeTwinkle{
  0%, 100%{ opacity: .35; }
  50%{ opacity: 1; }
}

@media (max-width: 960px){
  .hero__constellation{ right: -8%; width: 74%; }
}

.hero__particles{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__particles span{
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .5;
  animation: particleDrift linear infinite;
}
.hero__particles span:nth-child(1){ top: 18%; left: 12%; animation-duration: 22s; }
.hero__particles span:nth-child(2){ top: 62%; left: 22%; animation-duration: 26s; animation-delay: -4s; width: 3px; height: 3px; }
.hero__particles span:nth-child(3){ top: 30%; left: 44%; animation-duration: 19s; animation-delay: -9s; background: var(--coral); }
.hero__particles span:nth-child(4){ top: 78%; left: 60%; animation-duration: 24s; animation-delay: -2s; width: 4px; height: 4px; }
.hero__particles span:nth-child(5){ top: 10%; left: 68%; animation-duration: 21s; animation-delay: -12s; background: var(--coral); }
.hero__particles span:nth-child(6){ top: 52%; left: 86%; animation-duration: 27s; animation-delay: -6s; width: 3px; height: 3px; }

@keyframes particleDrift{
  0%{ transform: translate3d(0,0,0); opacity: 0; }
  10%{ opacity: .55; }
  90%{ opacity: .35; }
  100%{ transform: translate3d(10px, -140px, 0); opacity: 0; }
}

.hero__inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-6);
  align-items: center;
}

@keyframes heroLayerIn{ to{ opacity: 1; } }
@keyframes heroTextIn{
  from{ opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to{ opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-enter{
  opacity: 0;
  animation: heroTextIn .9s var(--ease-soft) forwards;
  animation-delay: calc(var(--i, 1) * 130ms + .15s);
}
.hero-line-wrap{ display: block; overflow: hidden; }
.hero-line{ display: inline-block; }
.hero-line--strong{ color: var(--terracotta); }

@media (prefers-reduced-motion: reduce){
  .hero__decor, .hero__scene-wrap, .hero-enter{ opacity: 1; animation: none; }
}

.hero__title{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-bottom: var(--space-3);
}
.hero__lead{
  font-size: 1.12rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: var(--space-2);
}
.hero__method{
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text);
  max-width: 520px;
  margin-block: var(--space-3);
  line-height: 1.5;
}
.hero__method strong{ color: var(--terracotta); font-weight: 600; }

.hero__cta{ margin-top: var(--space-4); }
.hero__cta-alt{ margin-top: var(--space-3); }
.hero__microcopy{
  margin-top: var(--space-2);
  font-size: .88rem;
  color: var(--text-secondary);
  letter-spacing: .02em;
}

.hero__visual{ position: relative; display: flex; justify-content: center; }
.hero__portrait-wrap{
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
}
.hero__halo{
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--coral-16) 0%, transparent 68%);
  filter: blur(6px);
}
.hero__ring{
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1.5px dashed var(--gold-30);
  animation: spin 60s linear infinite;
}
.hero__portrait{
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 62% 38% 55% 45% / 55% 45% 58% 42%;
  box-shadow: var(--shadow-lift);
}

@keyframes spin{ to{ transform: rotate(360deg); } }

.hero__scroll-cue{
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  z-index: 3;
  width: 26px; height: 42px;
  border: 1.5px solid var(--ink-10);
  border-radius: var(--radius-full);
  opacity: 0;
  animation: heroLayerIn 1s var(--ease-soft) 1.6s forwards;
}
.hero__scroll-cue span{
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: var(--radius-full);
  background: var(--terracotta);
  animation: scrollCue 2.2s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ transform: translateY(14px); opacity: 0; }
  71%{ transform: translateY(0); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}

@media (max-width: 960px){
  .hero__inner{ grid-template-columns: 1fr; gap: var(--space-5); text-align: center; }
  .hero__lead, .hero__method{ margin-inline: auto; }
  .hero__cta{ display: flex; flex-direction: column; align-items: center; }
  .hero__visual{ order: -1; }
  .hero__portrait-wrap{ width: min(300px, 70vw); }
  .hero__scroll-cue{ display: none; }
}

/* ---------- 10. TILT (cartes 3D physiques) ---------- */
[data-tilt]{
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
  will-change: transform;
}

/* ---------- 12. DÉCLIC + MOULIN MENTAL ---------- */
.declic{ background: var(--bg); }
.declic__inner{ position: relative; }
.declic__thread{
  position: absolute;
  left: 50%;
  top: -8%;
  width: 1px;
  height: 116%;
  background: linear-gradient(180deg, transparent, var(--gold-30) 30%, var(--gold-30) 70%, transparent);
  opacity: .5;
  pointer-events: none;
}

.moulin-mental{
  position: relative;
  width: 260px;
  margin: 0 auto var(--space-4);
}
.moulin-mental__scene{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Halo d'ambiance très doux derrière toute la composition */
.moulin-mental__halo{
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--coral-16), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}

/* Une lumière qui circule très lentement autour du centre —
   même mécanique que .price-card__aura (conic-gradient + rotation lente) */
.moulin-mental__aura{
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-30), transparent 35%, transparent 65%, var(--gold-30));
  filter: blur(9px);
  opacity: .55;
  animation: auraSpin 22s linear infinite;
  pointer-events: none;
}

/* Le centre — forme organique (le retour à soi), respiration lente.
   Reprend le tracé irrégulier déjà utilisé pour le portrait du Hero. */
.moulin-mental__core{
  position: absolute;
  inset: 30%;
  border-radius: 62% 38% 55% 45% / 55% 45% 58% 42%;
  background: radial-gradient(circle at 34% 30%, var(--cream), var(--coral) 78%);
  box-shadow: var(--shadow-soft);
  animation: moulinBreathe 7s ease-in-out infinite;
}
@keyframes moulinBreathe{
  0%, 100%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(1.06) rotate(3deg); }
}

/* Les 6 piliers — petites formes lumineuses qui gravitent naturellement
   autour du centre (disposition organique, jamais une roue/un radar).
   Leur présence se précise avec le scroll dans la section (--progress,
   déjà exposé par [data-progress-section] sur #declic — aucun JS ajouté). */
.moulin-mental__petal{
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: calc(.32 + var(--progress, 0) * .58);
  transform: scale(calc(.72 + var(--progress, 0) * .28));
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
  animation: blobFloat 13s ease-in-out infinite;
  pointer-events: none;
}
.moulin-mental__petal--1{ width: 26px; height: 26px; top: 3%;  left: 44%; background: radial-gradient(circle at 35% 30%, var(--coral), transparent 72%); animation-duration: 13s; }
.moulin-mental__petal--2{ width: 19px; height: 19px; top: 19%; left: 83%; background: radial-gradient(circle at 35% 30%, var(--gold), transparent 72%); animation-duration: 16s; animation-delay: -3s; }
.moulin-mental__petal--3{ width: 22px; height: 22px; top: 65%; left: 87%; background: radial-gradient(circle at 35% 30%, var(--terracotta), transparent 72%); animation-duration: 14s; animation-delay: -7s; }
.moulin-mental__petal--4{ width: 24px; height: 24px; top: 85%; left: 48%; background: radial-gradient(circle at 35% 30%, var(--coral), transparent 72%); animation-duration: 17s; animation-delay: -2s; }
.moulin-mental__petal--5{ width: 18px; height: 18px; top: 63%; left: 5%;  background: radial-gradient(circle at 35% 30%, var(--gold), transparent 72%); animation-duration: 15s; animation-delay: -9s; }
.moulin-mental__petal--6{ width: 20px; height: 20px; top: 17%; left: 9%;  background: radial-gradient(circle at 35% 30%, var(--terracotta), transparent 72%); animation-duration: 18s; animation-delay: -5s; }

.moulin-mental__label{
  display: block;
  text-align: center;
  margin-top: var(--space-2);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: .7;
}

@media (max-width: 480px){
  .moulin-mental{ width: 210px; }
  /* Simplifie l'animation ambiante sur mobile — la respiration du centre
     et l'apparition progressive des piliers suffisent, on retire les
     deux mouvements continus les moins essentiels. */
  .moulin-mental__aura{ animation: none; opacity: .3; }
  .moulin-mental__petal{ animation: none; }
}

/* ---------- 13. MÉTHODE 3C — convergence ---------- */
.methode__stage{ position: relative; margin-top: var(--space-6); }

/* Zone réservée, au-dessus des cartes, pour les lignes de convergence
   et le badge "3C" — ne chevauche jamais le contenu des cartes. */
.methode__orbit{
  position: relative;
  height: 84px;
  margin-bottom: var(--space-3);
}
.methode__lines{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}
.methode__line{
  fill: none;
  stroke: var(--gold-30);
  stroke-width: 1.5;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset .9s var(--ease-soft) .3s;
}
/* Chaque connexion se dessine l'une après l'autre : Cœur, puis Corps, puis Cerveau */
.methode__stage.is-converged .methode__line[data-line="1"]{ transition-delay: .3s; }
.methode__stage.is-converged .methode__line[data-line="2"]{ transition-delay: .5s; }
.methode__stage.is-converged .methode__line[data-line="3"]{ transition-delay: .7s; }
.methode__stage.is-converged .methode__line{ stroke-dashoffset: 0; }
/* Respiration très lente une fois l'ensemble connecté */
.methode__stage.is-converged .methode__lines{
  animation: orbitBreathe 7s ease-in-out 1.6s infinite;
}
@keyframes orbitBreathe{
  0%, 100%{ opacity: .85; }
  50%{ opacity: 1; }
}

.methode__core{
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0) scale(.6);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--terracotta);
  background: var(--white);
  border: 1.5px solid var(--gold-30);
  border-radius: 50%;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .7s var(--ease-soft) .9s, transform .7s var(--ease-soft) .9s;
  z-index: 2;
  box-shadow: var(--shadow-soft);
}
.methode__stage.is-converged .methode__core{ opacity: 1; transform: translate(-50%, 0) scale(1); }

.methode__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.methode-card{
  position: relative;
  background: var(--white);
  border-radius: var(--radius-l);
  padding: var(--space-5) var(--space-4) var(--space-4);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  opacity: 0;
  transition: transform 1s var(--ease-soft), opacity 1s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.methode-card[data-converge="left"]{ transform: translate(-46px, 16px); }
.methode-card[data-converge="right"]{ transform: translate(46px, 16px); }
.methode-card[data-converge="down"]{ transform: translate(0, 42px); }
.methode__stage.is-converged .methode-card{ opacity: 1; transform: translate(0, 0); }
.methode__stage.is-converged .methode-card:nth-child(1){ transition-delay: .05s; }
.methode__stage.is-converged .methode-card:nth-child(2){ transition-delay: .15s; }
.methode__stage.is-converged .methode-card:nth-child(3){ transition-delay: .25s; }

.methode-card__glyph-wrap{
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
}
.methode-card__glyph{ width: 100%; height: 100%; overflow: visible; }

/* Cœur — forme organique, pulsation douce */
.methode-card__glyph--coeur path{
  fill: var(--coral);
  opacity: .8;
  transform-box: fill-box;
  transform-origin: center;
  animation: glyphPulse 3.6s ease-in-out infinite;
}
@keyframes glyphPulse{
  0%, 100%{ transform: scale(1); opacity: .8; }
  50%{ transform: scale(1.07); opacity: 1; }
}

/* Corps — anneaux qui respirent, comme une onde */
.methode-card__glyph--corps .ring{
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: ringBreathe 3.6s ease-in-out infinite;
}
.methode-card__glyph--corps .ring--1{ opacity: .9; }
.methode-card__glyph--corps .ring--2{ opacity: .55; animation-delay: .5s; }
.methode-card__glyph--corps .ring--3{ opacity: .3; animation-delay: 1s; }
@keyframes ringBreathe{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}

/* Cerveau — réseau de points, léger scintillement */
.methode-card__glyph--cerveau .net-lines line{
  stroke: var(--terracotta);
  stroke-width: 1;
  opacity: .45;
}
.methode-card__glyph--cerveau .net-nodes circle{
  fill: var(--terracotta);
  opacity: .8;
}
.methode-card__glyph--cerveau .net-nodes circle:nth-child(2n){
  animation: nodeTwinkle 3.2s ease-in-out infinite;
}
.methode-card__glyph--cerveau .net-nodes circle:nth-child(3n){
  animation: nodeTwinkle 3.2s ease-in-out infinite 1s;
}

.methode-card__label{
  position: relative;
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}
.methode-card p{ position: relative; color: var(--text-secondary); }

@media (max-width: 860px){
  .methode__grid{ grid-template-columns: 1fr; }
  .methode__orbit{ display: none; }
  .methode-card[data-converge]{ transform: translateY(24px); }
}

/* ---------- 14. VSL ---------- */
.vsl{ background: var(--bg); }
.video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  margin-top: var(--space-5);
  background: var(--text);
}
.video-embed__facade{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.video-embed__thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02);
  transition: transform .6s var(--ease-soft);
}
.video-embed__facade:hover .video-embed__thumb{ transform: scale(1.02); }
.video-embed__play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.video-embed__facade:hover .video-embed__play{ transform: scale(1.08); background: #a5503f; }
.video-embed__play svg{ margin-left: 4px; }
.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vsl__after{
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--terracotta);
  margin-top: var(--space-4);
}
.vsl__cta{ display: flex; justify-content: center; margin-top: var(--space-3); }

/* ---------- 15. TRANSFORMATION — chaos → clarté ---------- */
.transformation{ position: relative; }
.transformation__veil{
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(0,0,0, calc(.28 * (1 - var(--progress)))), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.transformation__particles{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.transformation__particles span{
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--dark-accent);
  top: calc(var(--y, 50%));
  left: calc(var(--x, 50%));
  opacity: calc(.55 * (1 - var(--progress)));
  transform: translate(calc(var(--dx, 0px) * (1 - var(--progress))), calc(var(--dy, 0px) * (1 - var(--progress))));
}
.transformation__particles span:nth-child(1){ --x:10%; --y:20%; --dx:40px; --dy:-30px; }
.transformation__particles span:nth-child(2){ --x:85%; --y:15%; --dx:-30px; --dy:20px; }
.transformation__particles span:nth-child(3){ --x:20%; --y:80%; --dx:20px; --dy:30px; }
.transformation__particles span:nth-child(4){ --x:75%; --y:75%; --dx:-40px; --dy:-20px; }
.transformation__particles span:nth-child(5){ --x:50%; --y:8%; --dx:10px; --dy:40px; }
.transformation__particles span:nth-child(6){ --x:92%; --y:50%; --dx:-25px; --dy:-15px; }
.transformation__particles span:nth-child(7){ --x:5%; --y:55%; --dx:30px; --dy:10px; }
.transformation__particles span:nth-child(8){ --x:60%; --y:92%; --dx:-15px; --dy:-25px; }

.transformation .container{ position: relative; z-index: 1; }
.transformation__grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-5);
}
.transfo-card{
  background: rgba(246, 237, 227, .04);
  border: 1px solid var(--ink-06);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  backdrop-filter: blur(2px);
  transition: transform .9s var(--ease-soft), opacity .9s var(--ease-soft);
}
.transfo-card[data-chaos="1"]{ transform: rotate(calc(-3.2deg * (1 - var(--progress)))) translate(calc(-10px * (1 - var(--progress))), 0); }
.transfo-card[data-chaos="2"]{ transform: rotate(calc(3.2deg * (1 - var(--progress)))) translate(calc(10px * (1 - var(--progress))), 0); }
.transfo-card--avant{ opacity: .82; }
.transfo-card--apres{ border: 1.5px solid var(--gold-30); background: rgba(246, 237, 227, .06); }
.transfo-card__label{
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
}
.transfo-card--apres .transfo-card__label{ color: var(--dark-accent); }
.transfo-card li{
  padding-block: .5em;
  border-top: 1px solid var(--ink-06);
  color: var(--text-secondary);
}
.transfo-card li:first-child{ border-top: 0; }
.transfo-card--apres li{ color: var(--dark-text); }
.transfo-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

@media (max-width: 800px){
  .transformation__grid{ grid-template-columns: 1fr; }
  .transfo-arrow{ transform: rotate(90deg); padding-block: var(--space-1); }
}

/* ---------- 16. CERCLE 3C ---------- */
.cercle{ background: var(--lumiere); position: relative; }
.cercle__light{
  position: absolute;
  inset: -20% 0 auto 0;
  height: 70%;
  background: radial-gradient(45% 60% at 50% 0%, var(--gold-14), transparent 75%);
  pointer-events: none;
}
.cercle__ornament{
  display: block;
  width: 160px;
  margin: var(--space-5) auto 0;
  position: relative;
  z-index: 1;
}
.cercle__ornament svg{ width: 100%; height: auto; overflow: visible; }
.cercle__ornament line{ stroke: var(--gold-30); stroke-width: 1; }
.cercle__ornament circle{
  fill: var(--terracotta);
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 5s ease-in-out infinite;
}

/* ---------- 17. MODULES ---------- */
.modules__list{ margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.module{
  background: var(--white);
  border: 1px solid var(--ink-06);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-s) var(--ease), box-shadow .5s var(--ease-soft);
}
.module[open]{ border-color: var(--gold-30); }
.module summary{
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.module__index{
  font-family: var(--font-serif);
  color: var(--gold);
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 2.2ch;
}
.module__title{
  font-weight: 600;
  font-size: 1.08rem;
  flex: 1;
}
.module__chevron{
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform var(--dur-s) var(--ease);
  flex-shrink: 0;
}
.module[open] .module__chevron{ transform: rotate(-135deg); }
.module__body{ overflow: hidden; }
.module__body p{
  margin-top: var(--space-2);
  padding-left: calc(2.2ch + var(--space-3));
  color: var(--text-secondary);
}

@media (max-width: 560px){
  .module__body p{ padding-left: 0; margin-top: var(--space-2); }
}

/* ---------- 18. COMMUNAUTÉ ---------- */
.communaute{ position: relative; overflow: clip; }
.communaute__bubbles{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.communaute__bubbles span{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(217,130,112,.22), transparent 70%);
  animation: blobFloat 18s ease-in-out infinite;
}
.communaute__bubbles span:nth-child(1){ width: 140px; height: 140px; top: 10%; left: 6%; }
.communaute__bubbles span:nth-child(2){ width: 90px; height: 90px; top: 60%; left: 14%; animation-delay: -5s; }
.communaute__bubbles span:nth-child(3){ width: 110px; height: 110px; top: 20%; right: 10%; animation-delay: -9s; }
.communaute__bubbles span:nth-child(4){ width: 70px; height: 70px; top: 68%; right: 18%; animation-delay: -13s; }
.communaute .container{ position: relative; z-index: 1; }

.check-list li{
  position: relative;
  padding: .5em 0 .5em 1.7em;
  color: var(--text-secondary);
}
.check-list li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--terracotta);
  font-weight: 700;
}
.check-list--center{ max-width: 420px; margin-inline: auto; margin-top: var(--space-4); }
.communaute__cta{ display: flex; justify-content: center; margin-top: var(--space-4); }

/* ---------- 19. OFFRE ---------- */
.offres{ background: var(--bg); }
.pricing__grid{
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}
.price-card{
  position: relative;
  background: var(--white);
  border-radius: var(--radius-l);
  padding: var(--space-5) var(--space-4);
  border: 1.5px solid var(--ink-06);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 440px;
}
.price-card:hover{ box-shadow: var(--shadow-soft); }
.price-card__badge{
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta);
  background: var(--coral-10);
  padding: .4em 1em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.price-card__title{
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.price-card__price{
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: 0;
}
.price-card__sub{
  color: var(--text-secondary);
  font-size: .92rem;
  margin-bottom: var(--space-3);
}
.price-card .check-list{ margin-bottom: var(--space-4); }
.price-card__microcopy{
  text-align: center;
  margin-top: var(--space-2);
  font-size: .85rem;
  color: var(--text-secondary);
}

/* ---------- 20. HIGH-TICKET — accompagnement personnalisé (997€) ---------- */
.high-ticket{ position: relative; }
.high-ticket__light{
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 60% at 50% 20%, rgba(227, 169, 143, .18), transparent 70%);
  pointer-events: none;
}
.high-ticket .container{ position: relative; z-index: 1; }
.high-ticket__cta{ margin-top: var(--space-6); text-align: center; }

/* Bouton "palier premium" — même mécanique de survol que .btn--primary
   (élévation + lueur + ombre), coloré en doré pour distinguer visuellement
   l'accompagnement personnalisé de l'offre d'entrée à 99€. */
.btn--gold{
  background: var(--gold);
  color: var(--brun-profond);
  box-shadow: var(--shadow-soft);
}
.btn--gold:hover{ background: #b8935a; transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.htoffer__badge{
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark-accent);
  background: var(--gold-14);
  border: 1px solid var(--gold-30);
  padding: .4em 1em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.htoffer__intro{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
}
.htoffer__message .section__title{ margin-top: 0; }

/* Visuel — reprend le langage de la constellation du Hero (points reliés,
   noyau qui pulse) : plusieurs points épars qui convergent vers un centre
   aligné = transformation / passage d'un état à un autre. */
.htoffer__visual{
  position: relative;
  display: flex;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  margin-inline: auto;
}
.htoffer__visual-halo{
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-14), transparent 70%);
  filter: blur(10px);
}
.htoffer__orbit{ position: relative; width: 100%; height: 100%; overflow: visible; }
.htoffer__orbit-line{
  stroke: var(--gold-30);
  stroke-width: 1.4;
  fill: none;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.1s var(--ease-soft);
}
.htoffer__visual.is-visible .htoffer__orbit-line{ stroke-dashoffset: 0; }
.htoffer__visual.is-visible .htoffer__orbit-line:nth-child(1){ transition-delay: .1s; }
.htoffer__visual.is-visible .htoffer__orbit-line:nth-child(2){ transition-delay: .22s; }
.htoffer__visual.is-visible .htoffer__orbit-line:nth-child(3){ transition-delay: .34s; }
.htoffer__visual.is-visible .htoffer__orbit-line:nth-child(4){ transition-delay: .46s; }
.htoffer__visual.is-visible .htoffer__orbit-line:nth-child(5){ transition-delay: .58s; }
.htoffer__orbit .node--core{ animation: nodePulse 5s ease-in-out infinite; }

.htoffer__includes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-4);
  max-width: 720px;
  margin: var(--space-5) auto 0;
}

.htoffer__pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.htoffer__pillars .reveal:nth-child(2){ transition-delay: .05s; }
.htoffer__pillars .reveal:nth-child(3){ transition-delay: .1s; }
.htoffer__pillars .reveal:nth-child(4){ transition-delay: .15s; }
.htoffer__pillars .reveal:nth-child(5){ transition-delay: .2s; }
.htoffer__pillars .reveal:nth-child(6){ transition-delay: .25s; }
/* Cartes "verre" sur fond sombre — même recette que .transfo-card
   (fond translucide très léger + flou), pas de blanc plein sur le brun profond. */
.htoffer__pillar{
  background: rgba(246, 237, 227, .04);
  border: 1px solid var(--ink-06);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  backdrop-filter: blur(2px);
  transition: transform .5s var(--ease-soft), border-color .3s var(--ease);
}
.htoffer__pillar:hover{ border-color: var(--gold-30); }
.htoffer__pillar-index{
  display: block;
  font-family: var(--font-serif);
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: .3em;
}
.htoffer__pillar-label{ display: block; font-weight: 600; }

.htoffer__value{
  max-width: 480px;
  margin: var(--space-6) auto 0;
  padding: var(--space-5) var(--space-4);
  background: rgba(246, 237, 227, .04);
  border: 1.5px solid var(--gold-30);
  border-radius: var(--radius-l);
  backdrop-filter: blur(2px);
  box-shadow: var(--shadow-deep);
  text-align: center;
}
.htoffer__value-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
}
.htoffer__value-label{
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.htoffer__value-amount{ font-family: var(--font-serif); color: var(--dark-text); }
.htoffer__value-plus{
  display: block;
  text-align: center;
  color: var(--gold);
  font-family: var(--font-serif);
  margin-block: var(--space-2);
}
.htoffer__value-divider{
  display: block;
  height: 1px;
  background: var(--ink-10);
  margin: var(--space-4) 0;
}
.htoffer__value-row--final .htoffer__value-label{
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark-text);
  letter-spacing: 0;
}
.htoffer__value-price{
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--gold);
}

.htoffer__guarantee{
  max-width: 640px;
  margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
  border-left: 2px solid var(--gold-30);
}
.htoffer__guarantee-title{
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--dark-text);
  margin-bottom: var(--space-1);
}
.htoffer__guarantee p{ color: var(--text-secondary); font-size: .95rem; }

@media (max-width: 960px){
  .htoffer__intro{ grid-template-columns: 1fr; text-align: center; gap: var(--space-5); }
  .htoffer__message .section__title{ max-width: 620px; margin-inline: auto; }
  .htoffer__message .section__lead{ margin-inline: auto; }
  .hero__cta{ display: flex; flex-direction: column; align-items: center; }
  .htoffer__visual{ max-width: 260px; }
}

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

@media (max-width: 560px){
  .htoffer__includes{ grid-template-columns: 1fr; }
  .htoffer__pillars{ grid-template-columns: 1fr; }
  .htoffer__value-price{ font-size: 2.3rem; }
}

/* ---------- 21. POUR QUI ---------- */
.pour-qui__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.pour-qui__col{
  background: var(--white);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  border: 1px solid var(--ink-06);
}
.pour-qui__col h3{
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}
.check-list--no li::before{ content: '—'; color: var(--text-secondary); }

@media (max-width: 760px){
  .pour-qui__grid{ grid-template-columns: 1fr; }
}

/* ---------- 22. LAURE ---------- */
.laure__inner{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-6);
  align-items: center;
}
.laure__visual{ transition: transform 1.1s var(--ease-soft); }
.laure__visual.is-visible{ transform: scale(1.04); }
.laure__portrait{
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.laure__content p{ color: var(--text-secondary); margin-bottom: var(--space-2); }
.laure__content .section__title{ margin-top: var(--space-1); }

@media (max-width: 860px){
  .laure__inner{ grid-template-columns: 1fr; text-align: center; }
  .laure__portrait{ max-width: 320px; margin-inline: auto; }
}

/* ---------- 23. TÉMOIGNAGES ---------- */
.temoignages__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.temoignage-card{
  border-radius: var(--radius-m);
  padding: var(--space-4);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.temoignages__grid .reveal:nth-child(2){ transition-delay: .1s; }
.temoignages__grid .reveal:nth-child(3){ transition-delay: .2s; }
.temoignage-card--placeholder{
  border: 1.5px dashed var(--ink-10);
  background: var(--cream);
}
.temoignage-card__placeholder-label{
  color: var(--text-secondary);
  font-style: italic;
  font-size: .95rem;
}

@media (max-width: 760px){
  .temoignages__grid{ grid-template-columns: 1fr; }
}

/* ---------- 24. FAQ ---------- */
.faq__list{ margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item{
  border-bottom: 1px solid var(--ink-10);
  padding-block: var(--space-3);
}
.faq-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 1.05rem;
}
.faq-item__chevron{
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: rotate(45deg);
  transition: transform var(--dur-s) var(--ease);
}
.faq-item[open] .faq-item__chevron{ transform: rotate(-135deg); }
.faq-item__body{ overflow: hidden; }
.faq-item__body p{ margin-top: var(--space-2); color: var(--text-secondary); }

/* ---------- 25. CTA FINAL — convergence lumineuse ---------- */
.cta-final{
  position: relative;
  text-align: center;
  overflow: clip;
  padding-block: var(--space-7);
  background: var(--bg);
}
.cta-final__convergence{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cta-final__convergence span{
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-14), transparent 72%);
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  transition: transform 1.4s var(--ease-soft), opacity 1.4s var(--ease-soft);
}
.cta-final__convergence span:nth-child(1){ width: 260px; height: 260px; }
.cta-final__convergence span:nth-child(2){ width: 460px; height: 460px; transition-delay: .1s; background: radial-gradient(circle, var(--coral-16), transparent 74%); }
.cta-final__convergence span:nth-child(3){ width: 680px; height: 680px; transition-delay: .2s; }
.cta-final.is-visible .cta-final__convergence span{ opacity: 1; transform: translate(-50%, -50%) scale(1); }

.cta-final__title{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem);
  line-height: 1.28;
  max-width: 760px;
  margin-inline: auto;
  position: relative;
}
.cta-final__text{
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 560px;
  margin: var(--space-3) auto 0;
  position: relative;
}
.cta-final__actions{ position: relative; margin-top: var(--space-5); }
.cta-final__secondary{
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 500;
}

/* ---------- 26. FOOTER ---------- */
.site-footer{
  background: var(--cream);
  padding-block: var(--space-5);
  border-top: 1px solid var(--ink-06);
}
.site-footer__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.brand--footer .brand__logo{ height: 40px; }
.site-footer__nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
}
.site-footer__nav a{
  font-size: .88rem;
  color: var(--text-secondary);
  transition: color var(--dur-s) var(--ease);
}
.site-footer__nav a:hover{ color: var(--terracotta); }
.site-footer__copy{
  font-size: .82rem;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ---------- 27. RESPONSIVE FINE-TUNING ---------- */
@media (max-width: 640px){
  :root{ --space-6: 3rem; --space-7: 4rem; }
  .section{ padding-block: var(--space-6); }
  .btn{ font-size: .92rem; }
  .cursor-dot, .cursor-ring{ display: none; }
}

/* Le tilt souris et le curseur personnalisé sont désactivés sur les
   dispositifs tactiles / sans pointeur fin (voir aussi motion.js). */
@media (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
  [data-tilt]{ transition: box-shadow .3s var(--ease); }
}