/* ==========================================================================
   MEZAELLE — Reiki Shamballa · Design system landing pages
   v2 · mobile first · 2026
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* Crèmes */
  --cream:        #FBF7EF;
  --cream-deep:   #F4ECDC;
  --cream-tint:   #FDFBF6;
  --white:        #FFFFFF;

  /* Encres */
  --ink:          #251F18;
  --ink-soft:     #6B6153;
  --ink-faint:    #9A907F;

  /* Ors (couleurs de marque conservées, nuances ajoutées) */
  --gold:         #BD9C58;
  --gold-deep:    #9F7F3C;
  --gold-light:   #EEC982;
  --gold-glow:    #F7E7C1;

  /* Verts */
  --green:        #00674F;
  --green-lift:   #0B8468;

  /* Violets */
  --purple:       #AC56F7;
  --purple-deep:  #7A32C9;
  --purple-mist:  #F0E3FF;

  /* Traits */
  --line:         rgba(189,156,88,.34);
  --line-soft:    rgba(189,156,88,.17);
  --line-hair:    rgba(37,31,24,.07);

  /* Dégradés signature */
  --grad-gold: linear-gradient(100deg,#9F7F3C 0%,#BD9C58 16%,#F3DCA8 48%,#D9B974 66%,#BD9C58 84%,#9F7F3C 100%);
  --grad-gold-soft: linear-gradient(100deg,#BD9C58 0%,#EEC982 50%,#BD9C58 100%);
  --grad-aura: linear-gradient(122deg,#00674F 0%,#01A878 24%,#4E7FD6 56%,#8B3FD6 80%,#AC56F7 100%); /* non utilisé — conservé pour mémoire */
  --grad-hair: linear-gradient(90deg,transparent,var(--line),transparent);

  /* Rayons & ombres */
  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-xl: 38px;
  --r-pill: 999px;
  --sh-soft: 0 2px 14px rgba(37,31,24,.05);
  --sh-card: 0 30px 70px -40px rgba(37,31,24,.45), 0 2px 10px rgba(37,31,24,.04);
  --sh-gold: 0 16px 38px -14px rgba(159,127,60,.60);
  --sh-deep: 0 40px 90px -50px rgba(37,31,24,.65);

  /* Mesures */
  --maxw: 1180px;
  --read: 720px;
  --title: 960px;
  --gutter: 18px;

  /* Typographie */
  --f-display: "the-seasons","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body: "Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:359px){ :root{ --gutter:14px; } }
@media (min-width:860px){ :root{ --gutter:32px; } }

/* ----------------------------------------------------------- 2. RESET/BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,iframe{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
h1,h2,h3,p,ul,figure,blockquote{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--gold-glow); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:6px; }

/* Sauts de ligne pilotés : .brk-m visible sous 700px, .brk-d au-dessus */
.brk-d,.sep-d{ display:none; }
@media (min-width:700px){
  .brk-m{ display:none; }
  .brk-d,.sep-d{ display:inline; }
}

/* ------------------------------------------------------------- 3. LAYOUT  */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--read{ max-width:calc(var(--read) + var(--gutter)*2); }
.wrap--title{ max-width:calc(var(--title) + var(--gutter)*2); }

.section{ padding-block:clamp(48px,8.5vw,96px); position:relative; }
.section--tight{ padding-block:clamp(28px,5vw,56px); }
.section--flush{ padding-block:0; }
.section--cream{ background:var(--cream); }
.section--white{ background:var(--white); }
.section--tint{ background:var(--cream-tint); }
.section--fade{ background:linear-gradient(180deg,var(--white) 0%,var(--cream) 100%); }
.section--fade-up{ background:linear-gradient(180deg,var(--cream) 0%,var(--white) 100%); }

.stack > * + *{ margin-top:var(--gap,20px); }
.center{ text-align:center; }

/* Filet doré de séparation */
.hair{ height:1px; background:var(--grad-hair); border:0; margin:0; }

/* Grain discret */
.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--grain);
  background-size:180px 180px;
  opacity:.030;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* ---------------------------------------------------- 4. AURA ANIMÉE FOND  */
.aura-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.aura-bg .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.5;
  will-change:transform;
}
.aura-bg .b1{
  width:58vw; height:58vw; max-width:560px; max-height:560px;
  left:-18%; top:-14%;
  background:radial-gradient(circle,rgba(172,86,247,.34),transparent 68%);
  animation:drift1 26s ease-in-out infinite;
}
.aura-bg .b2{
  width:52vw; height:52vw; max-width:520px; max-height:520px;
  right:-16%; top:8%;
  background:radial-gradient(circle,rgba(238,201,130,.46),transparent 68%);
  animation:drift2 32s ease-in-out infinite;
}
.aura-bg .b3{
  width:62vw; height:62vw; max-width:620px; max-height:620px;
  left:22%; bottom:-28%;
  background:radial-gradient(circle,rgba(1,168,120,.20),transparent 70%);
  animation:drift3 38s ease-in-out infinite;
}
@keyframes drift1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(8%,6%,0) scale(1.12)} }
@keyframes drift2{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-7%,9%,0) scale(1.08)} }
@keyframes drift3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(5%,-7%,0) scale(1.1)} }

/* --------------------------------------------------------- 5. TYPOGRAPHIE */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.004em;
  color:var(--purple);
  font-size:clamp(1.14rem,5.7vw,2rem);
  max-width:var(--title);
  margin-inline:auto;
}
@media (min-width:700px){
  .display{ font-size:clamp(1.85rem,4.3vw,2.9rem); line-height:1.16; }
}
.display .lead{
  display:block;
  font-size:.64em;
  letter-spacing:.055em;
  color:var(--purple-deep);
  margin-bottom:.3em;
}
/* Chaque ligne voulue est un bloc : la coupure tombe toujours au bon endroit. */
.display .l{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.display .t{ display:block; }

.h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.55rem,5vw,2.5rem);
  line-height:1.2;
  letter-spacing:-.004em;
  color:var(--ink);
  text-wrap:balance;
}
.h2--purple{ color:var(--purple); }
.h2--gold{
  color:var(--gold-deep);
  background:linear-gradient(0deg,#BD9C58,#EEC982,#BD9C58);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h2--gold{
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.h3{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.22rem,3.8vw,1.68rem);
  line-height:1.32;
  text-wrap:balance;
}
.script{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,4.6vw,2.1rem);
  color:var(--gold-deep);
  letter-spacing:.015em;
}
.lede{ font-size:clamp(1rem,2.6vw,1.1rem); line-height:1.8; color:var(--ink-soft); text-wrap:pretty; }
.small{ font-size:.82rem; line-height:1.68; color:var(--ink-soft); }
.eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
}
strong,b{ font-weight:700; color:var(--ink); }

/* ------------------------------------------------------------- 6. BADGE   */
.badge{
  display:inline-block;
  position:relative;
  background:var(--grad-gold);
  background-size:200% 100%;
  color:var(--white);
  font-size:clamp(.66rem,2.5vw,.8rem);
  font-weight:700;
  letter-spacing:.145em;
  text-transform:uppercase;
  line-height:1.5;
  padding:11px 24px;
  border-radius:var(--r-pill);
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.4);
  text-align:center;
  text-shadow:0 1px 1px rgba(110,86,32,.3);
  max-width:100%;
  animation:goldflow 9s ease-in-out infinite;
}
.badge span{
  display:block;
  font-weight:500; font-size:.9em; letter-spacing:.055em;
  text-transform:none; opacity:.95;
}
@keyframes goldflow{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ---------------------------------------------------------- 7. ORNEMENTS  */
.ornement{
  width:min(250px,66%);
  margin:clamp(16px,3vw,26px) auto;
  opacity:.95;
  transform-origin:center;
}
.ornement--wide{ width:min(1108px,94%); margin-block:0; }

/* --------------------------------------------------------------- 8. CTA   */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:470px;
  min-height:64px;
  padding:16px 30px;
  border:0;
  border-radius:var(--r-pill);
  font-family:var(--f-body);
  font-size:clamp(.94rem,3.1vw,1.06rem);
  font-weight:700;
  letter-spacing:.012em;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, filter .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-gold{
  background:var(--grad-gold) !important;
  background-size:220% 100% !important;
  color:var(--white) !important;
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow:0 1px 2px rgba(110,86,32,.34);
  animation:goldflow 9s ease-in-out infinite;
}
.btn-gold::after{
  content:"";
  position:absolute; inset:0 auto 0 -60%;
  width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);
  animation:shine 5.2s ease-in-out infinite;
  pointer-events:none;
}
.btn-whatsapp{
  background:linear-gradient(100deg,#1FBF5C,#25D366 55%,#1FBF5C) !important;
  color:var(--white) !important;
  box-shadow:0 16px 36px -16px rgba(31,191,92,.9), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn:hover{ transform:translateY(-3px); filter:brightness(1.04); }
.btn:active{ transform:translateY(-1px) scale(.992); }

/* Halo respirant autour du bouton principal */
.cta-block{ display:flex; flex-direction:column; align-items:center; gap:14px; position:relative; }
.cta-halo{ position:relative; width:100%; display:flex; justify-content:center; }
.cta-halo::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(100%,470px); height:64px;
  transform:translate(-50%,-50%);
  border-radius:var(--r-pill);
  box-shadow:0 0 0 0 rgba(189,156,88,.26);
  animation:pulse 3.8s ease-out infinite;
  pointer-events:none;
  z-index:-1;
}
.cta-note{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
}
.cta-note::before,.cta-note::after{
  content:""; width:22px; height:1px; background:var(--line);
}
@media (max-width:379px){
  .cta-note{ letter-spacing:.1em; }
  .cta-note::before,.cta-note::after{ display:none; }
}

@keyframes shine{ 0%,64%{left:-60%} 94%,100%{left:132%} }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(189,156,88,.26); }
  70%{ box-shadow:0 0 0 18px rgba(189,156,88,0); }
  100%{ box-shadow:0 0 0 0 rgba(189,156,88,0); }
}

/* ------------------------------------------------------------- 9. VIDÉO   */
.video-halo{ position:relative; max-width:920px; margin-inline:auto; }
.video-halo::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:112%; height:112%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(44% 56% at 22% 30%,rgba(172,86,247,.30),transparent 70%),
    radial-gradient(44% 56% at 80% 70%,rgba(238,201,130,.38),transparent 70%);
  filter:blur(44px);
  pointer-events:none;
  animation:breathe 9s ease-in-out infinite;
}
.video{
  position:relative;
  width:100%;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#0d0d10;
  box-shadow:var(--sh-deep);
}
.video::before{ content:""; display:block; padding-top:56.25%; }
.video::after{          /* liseré doré */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid rgba(238,201,130,.42);
  pointer-events:none;
  z-index:2;
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@keyframes breathe{ 0%,100%{opacity:.75; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.04)} }

/* ------------------------------------------------------------- 10. CARTES */
.card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  padding:clamp(26px,5vw,48px);
  position:relative;
  overflow:hidden;
}
.card--cream{ background:linear-gradient(170deg,var(--cream-tint),var(--cream-deep)); }
.card--glow::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(70% 50% at 50% 0%,rgba(238,201,130,.26),transparent 70%);
  pointer-events:none;
}
.card > *{ position:relative; }

/* Liste « Ce que vous allez découvrir » */
.checklist{ display:grid; gap:12px; counter-reset:step; }
.checklist li{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:20px 22px;
  box-shadow:var(--sh-soft);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.checklist li::before{   /* liseré doré latéral qui se révèle au survol */
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:var(--grad-gold-soft);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.checklist li:hover{
  transform:translateY(-3px);
  border-color:var(--line);
  box-shadow:0 26px 48px -32px rgba(37,31,24,.55);
}
.checklist li:hover::before{ transform:scaleY(1); }
.checklist .num{
  counter-increment:step;
  width:34px; height:34px;
  border-radius:50%;
  display:grid; place-items:center;
  flex:none;
  margin-top:1px;
  background:linear-gradient(145deg,#D8B978 0%,#BD9C58 48%,#9F7F3C 100%);
  color:var(--white);
  font-family:var(--f-display);
  font-size:1.06rem;
  line-height:1;
  text-shadow:0 1px 2px rgba(92,71,25,.55);
  box-shadow:0 8px 18px -10px rgba(159,127,60,.95), inset 0 1px 0 rgba(255,255,255,.5);
}
.checklist .num::after{ content:counter(step,decimal-leading-zero); }
.checklist p{ font-size:clamp(.95rem,2.6vw,1.02rem); line-height:1.68; color:var(--ink-soft); text-wrap:pretty; }
.checklist b{ color:var(--purple-deep); }

/* ---------------------------------------------------- 11. BLOC MEZAELLE   */
.bio{ display:grid; gap:clamp(26px,4vw,48px); align-items:center; }
.portrait{ position:relative; max-width:440px; margin-inline:auto; }
.portrait__frame{      /* cadre doré décalé */
  position:absolute;
  inset:16px -16px -16px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:inset .5s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.portrait:hover .portrait__frame{ inset:10px -10px -10px 10px; }
.portrait__img{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-card);
  background:var(--cream-deep);
}
.portrait__img img{ width:100%; transition:transform .9s cubic-bezier(.2,.8,.3,1); }
.portrait:hover .portrait__img img{ transform:scale(1.035); }

.pill-stat{
  display:inline-block;
  background:var(--grad-gold);
  background-size:220% 100%;
  color:var(--white);
  border-radius:var(--r-pill);
  padding:13px 26px;
  font-size:clamp(.82rem,2.4vw,.95rem);
  line-height:1.5;
  font-weight:500;
  text-shadow:0 1px 1px rgba(110,86,32,.3);
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.4);
  animation:goldflow 9s ease-in-out infinite;
}
.pill-stat b{ color:var(--white); font-weight:800; }
.signature{ width:min(240px,64%); margin-inline:auto; }

/* --------------------------------------------------- 12. CITATION / AURA  */
.aura{
  background:var(--purple);          /* violet de marque, comme la page d'origine */
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.aura::before{                        /* profondeur : halos clairs, la teinte reste #AC56F7 */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(72% 55% at 50% -6%,rgba(255,255,255,.30),transparent 62%),
    radial-gradient(48% 45% at 90% 96%,rgba(255,255,255,.15),transparent 66%),
    radial-gradient(58% 52% at 6% 72%,rgba(122,50,201,.42),transparent 68%);
  pointer-events:none;
  animation:auraglow 15s ease-in-out infinite;
}
.aura .wrap{ position:relative; z-index:1; }
@keyframes auraglow{ 0%,100%{ opacity:.88 } 50%{ opacity:1 } }

.quote{
  font-size:clamp(1rem,2.9vw,1.22rem);
  line-height:1.9;
  font-style:italic;
  color:var(--white);
  text-wrap:pretty;
  position:relative;
}
.quote .mark{
  font-family:var(--f-display);
  font-style:normal;
  font-size:1.7em;
  line-height:0;
  vertical-align:-.28em;
  opacity:.72;
}
.aura .ornement{ filter:brightness(0) invert(1); opacity:.68; width:min(190px,52%); }
.aura .signature{ width:min(215px,58%); }

/* -------------------------------------------------------- 13. MOSAÏQUE    */
.mosaic{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-deep);
  max-width:640px;
  margin-inline:auto;
}
.mosaic img{ width:100%; transform:scale(1.05); transition:transform 1.4s cubic-bezier(.2,.8,.3,1); }
.mosaic.is-in img{ transform:scale(1); }
.mosaic::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.3);
  pointer-events:none;
}

/* ------------------------------------------------------- 14. EN-TÊTE      */
.progress{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:transparent;
  pointer-events:none;
  overflow:hidden;
}
.progress__bar{
  height:100%; width:0%;
  background:var(--grad-gold-soft);
  box-shadow:0 0 10px rgba(189,156,88,.6);
  transition:width .12s linear;
}
.topbar{
  position:sticky; top:0; z-index:70;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  padding-block:16px;
  transition:padding .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.topbar.is-compact{
  padding-block:9px;
  background:rgba(255,255,255,.90);
  border-bottom-color:var(--line-soft);
  box-shadow:0 10px 30px -22px rgba(37,31,24,.5);
}
.topbar__inner{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,4vw,32px); }
.topbar__sep{ width:1px; align-self:stretch; min-height:30px; background:var(--line); }
.logo-reiki{ width:clamp(116px,29vw,164px); transition:width .35s ease; }
.logo-mezaelle{ width:clamp(102px,25vw,146px); transition:width .35s ease; }
.topbar.is-compact .logo-reiki{ width:clamp(96px,24vw,132px); }
.topbar.is-compact .logo-mezaelle{ width:clamp(84px,21vw,118px); }

/* ---------------------------------------------------------- 15. AGENDA    */
.agenda{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.agenda a{
  display:grid; place-items:center;
  width:58px; height:58px;
  border-radius:var(--r-sm);
  background:var(--white);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-soft);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.agenda a:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:0 18px 30px -18px rgba(37,31,24,.55); }
.agenda img{ width:30px; height:30px; }

/* ------------------------------------------------------- 16. PIED DE PAGE */
.footer{ background:var(--white); padding-block:clamp(36px,6vw,58px) 36px; text-align:center; position:relative; }
.footer .ornement--wide{ margin-bottom:clamp(22px,4vw,34px); }
.footer a{ color:var(--gold-deep); text-decoration:none; font-weight:600; }
.footer a:hover{ text-decoration:underline; }
.legal{ font-size:.74rem; line-height:1.85; color:var(--ink-faint); max-width:620px; margin-inline:auto; }
.disclaimer{ font-size:.77rem; line-height:1.82; color:var(--ink-soft); max-width:650px; margin-inline:auto; text-wrap:pretty; }
.disclaimer p + p{ margin-top:.55em; }

/* ------------------------------------------------- 17. CTA COLLANTE MOBILE */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0;
  z-index:75;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line-soft);
  transform:translateY(135%);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta .btn{ max-width:560px; min-height:56px; margin-inline:auto; }
@media (min-width:860px){ .sticky-cta{ display:none; } }
@media (max-width:859px){ body.has-sticky .footer{ padding-bottom:118px; } }

/* ------------------------------------------------------- 18. RÉVÉLATION   */
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal{ transition:opacity .85s ease, transform .85s cubic-bezier(.2,.8,.3,1); will-change:opacity,transform; }

/* Titres : révélation ligne par ligne, masquée */
.js .display .t{ transform:translateY(112%); opacity:0; }
.display .t{ transition:transform .95s cubic-bezier(.19,1,.22,1), opacity .7s ease; }
.js .display.is-in .t{ transform:none; opacity:1; }
.js .display .lead{ opacity:0; transform:translateY(14px); transition:opacity .8s ease .05s, transform .8s cubic-bezier(.2,.8,.3,1) .05s; }
.js .display.is-in .lead{ opacity:1; transform:none; }
.display .l:nth-child(2) .t{ transition-delay:.10s; }
.display .l:nth-child(3) .t{ transition-delay:.20s; }
.display .l:nth-child(4) .t{ transition-delay:.30s; }
.display .l:nth-child(5) .t{ transition-delay:.40s; }

/* Ornement : ouverture depuis le centre */
.js .ornement.reveal{ transform:scaleX(.3); opacity:0; }
.ornement.reveal{ transition:transform 1.1s cubic-bezier(.19,1,.22,1), opacity .8s ease; }
.js .ornement.reveal.is-in{ transform:scaleX(1); opacity:.95; }

/* ------------------------------------------------------ 19. RESPONSIVE    */
@media (min-width:860px){
  .bio{ grid-template-columns:5fr 7fr; text-align:left; }
  .bio .signature{ margin-inline:0; }
  .bio .portrait{ margin-inline:0; }
  .checklist{ gap:14px; }
  .checklist li{ padding:24px 28px; }
}
@media (max-width:859px){
  .bio{ text-align:center; }
}

/* --------------------------------------------------- 20. ACCESSIBILITÉ    */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal,.js .display .t,.js .display .lead,.js .ornement.reveal{ opacity:1 !important; transform:none !important; }
  .mosaic img{ transform:none !important; }
}

/* ---------------------------------------------------------- 21. IMPRESSION */
@media print{
  .sticky-cta,.video,.progress,.aura-bg{ display:none !important; }
  .topbar{ position:static; }
  body{ background:#fff; }
}

/* ==========================================================================
   22. PAGE « RÉSERVEZ UN APPEL »
   Charte Reiki, comme les trois autres pages.
   Les règles .topbar--green / .logo-praticien / .display--gold ne sont plus utilisées :
   conservées au cas où une page PNGU serait ajoutée plus tard.
   ========================================================================== */

/* En-tête vert à logos blancs */
.topbar--green{
  background:rgba(37,114,98,.92);
  border-bottom-color:rgba(255,255,255,.14);
}
.topbar--green.is-compact{
  background:rgba(37,114,98,.97);
  border-bottom-color:rgba(255,255,255,.18);
  box-shadow:0 10px 30px -22px rgba(0,60,45,.8);
}
.topbar--green .topbar__sep{ background:rgba(255,255,255,.34); }
.logo-praticien{ width:clamp(132px,33vw,188px); transition:width .35s ease; }
.topbar--green.is-compact .logo-praticien{ width:clamp(110px,27vw,152px); }
.topbar--green .logo-mezaelle{ width:clamp(96px,24vw,138px); }
.topbar--green.is-compact .logo-mezaelle{ width:clamp(80px,20vw,112px); }
.topbar--green .progress__bar{ background:linear-gradient(90deg,#EEC982,#F7E7C1,#EEC982); }

/* Titre doré (ce gabarit n'utilise pas le violet) */
.display--gold{ color:var(--gold-deep); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .display--gold{
    background:linear-gradient(0deg,#BD9C58,#EEC982,#BD9C58);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.display--gold .lead{ color:var(--gold-deep); }

/* Carte principale : crème, liseré doré, coins 25px (repris de l'original) */
.card--outlined{
  background:#F9F7F3;
  border:1px solid #C89D2C;
  border-radius:25px;
  box-shadow:0 30px 70px -46px rgba(37,31,24,.45);
}

/* Titre de la carte : « *Reiki Shamballa* : » en or, le reste en vert */
.title-split{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.42rem,5vw,2.3rem);
  line-height:1.24;
  color:var(--purple);
  text-wrap:balance;
}
.title-split .or{ color:var(--gold-deep); display:block; }

/* Intertitres dorés de la carte */
.lead-gold{
  font-family:var(--f-body);
  font-weight:700;
  font-size:clamp(1rem,2.9vw,1.15rem);
  line-height:1.6;
  color:var(--gold-deep);
  text-wrap:balance;
}
.note-italic{
  font-style:italic;
  font-size:.84rem;
  color:var(--ink-faint);
}

/* Les 3 bénéfices de l'appel : vrai texte, plus une image illisible */
.steps{
  display:grid;
  gap:clamp(22px,4vw,20px);
  counter-reset:none;
}
.steps li{ text-align:center; }
.steps .ico{
  width:clamp(84px,22vw,104px);
  margin:0 auto 14px;
  display:block;
}
.steps p{
  font-size:clamp(.95rem,2.6vw,1rem);
  line-height:1.6;
  color:var(--ink-soft);
  text-wrap:pretty;
  max-width:30ch;
  margin-inline:auto;
}
.steps b{ color:var(--purple-deep); }
@media (min-width:720px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); align-items:start; }
  .steps li{ position:relative; }
  .steps li + li::before{      /* filet doré reliant les étapes, comme l'original */
    content:"";
    position:absolute;
    right:calc(100% + clamp(10px,1.5vw,17px));
    top:clamp(44px,6vw,56px);
    width:clamp(20px,3vw,34px);
    height:1px;
    background:linear-gradient(90deg,rgba(189,156,88,0),var(--gold),rgba(189,156,88,0));
  }
}

/* Ornement ellipse de bas de carte */
.ornement-ellipse{
  width:min(220px,58%);
  margin:clamp(22px,4vw,30px) auto 0;
  opacity:.9;
}

/* ==========================================================================
   23. MINI PAGE DE VENTE
   ========================================================================== */

/* Bandeau de repères sous le titre */
.repere{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 14px; list-style:none; padding:0;
}
.repere li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep);
}
.repere li + li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--line); }

/* ---- Bloc de commande : tout ce qui peut quitter le bon de commande ---- */
.achat{
  background:#F9F7F3;
  border:1px solid #C89D2C;
  border-radius:25px;
  box-shadow:var(--sh-card);
  padding:clamp(22px,4.5vw,40px);
  max-width:760px; margin-inline:auto;
}
.achat__tete{ text-align:center; }
.achat__echeance{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(2.6rem,10vw,4rem);
  line-height:1;
  color:var(--purple);
  margin:.1em 0;
}
.achat__detail{ font-size:.95rem; color:var(--ink-soft); }
.achat__barre{ color:var(--ink-faint); font-size:.9rem; }
.achat__barre s{ text-decoration-thickness:1px; }

/* Tableau des formules de règlement (information, le choix se fait dans le bon de commande) */
.tarifs{
  width:100%; border-collapse:collapse; margin:22px 0 4px;
  font-size:.9rem;
}
.tarifs caption{
  caption-side:top; text-align:center; padding-bottom:12px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep);
}
.tarifs th, .tarifs td{ padding:11px 10px; text-align:left; border-bottom:1px solid var(--line-soft); }
.tarifs th{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.tarifs td:first-child{ font-weight:700; color:var(--purple-deep); white-space:nowrap; }
.tarifs td:nth-child(2){ font-weight:700; color:var(--ink); white-space:nowrap; }
.tarifs td:last-child{ color:var(--ink-soft); text-align:right; white-space:nowrap; }
.tarifs tr:last-child td{ border-bottom:0; }
.tarifs tr.mise-en-avant td{ background:var(--purple-mist); }

/* Cadeau du jour */
.cadeau{
  background:linear-gradient(100deg,rgba(238,201,130,.26),rgba(247,231,193,.5));
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:16px 20px; margin-top:18px;
  font-size:.92rem; line-height:1.6; color:var(--ink-soft); text-wrap:pretty;
}
.cadeau b{ color:var(--gold-deep); }

/* Grille de réassurance */
.rassurance{ display:grid; gap:14px; margin-top:26px; }
@media (min-width:720px){ .rassurance{ grid-template-columns:repeat(2,1fr); gap:16px; } }
.rassurance div{
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:16px 18px;
}
.rassurance h3{
  font-family:var(--f-body); font-size:.8rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:6px;
}
.rassurance p{ font-size:.86rem; line-height:1.6; color:var(--ink-soft); text-wrap:pretty; }
.rassurance a{ color:var(--purple-deep); font-weight:600; }

/* ---- Parcours en étapes ---- */
.etapes{ display:grid; gap:12px; counter-reset:etape; }
.etapes li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--sh-soft);
}
.etapes .pas{
  counter-increment:etape;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,#D8B978,#BD9C58 48%,#9F7F3C);
  color:var(--white); font-family:var(--f-display); font-size:1.06rem; line-height:1;
  text-shadow:0 1px 2px rgba(92,71,25,.55);
  box-shadow:0 8px 18px -10px rgba(159,127,60,.95), inset 0 1px 0 rgba(255,255,255,.5);
}
.etapes .pas::after{ content:counter(etape); }
.etapes b{ display:block; color:var(--purple-deep); margin-bottom:3px; }
.etapes p{ font-size:.93rem; line-height:1.6; color:var(--ink-soft); }

/* ---- Ce que vous recevez ---- */
.inclus{ display:grid; gap:12px; }
@media (min-width:720px){ .inclus{ grid-template-columns:repeat(2,1fr); gap:14px; } }
.inclus li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--sh-soft);
}
.inclus svg{ width:22px; height:22px; flex:none; margin-top:2px; }
.inclus b{ display:block; color:var(--purple-deep); margin-bottom:3px; }
.inclus p{ font-size:.9rem; line-height:1.58; color:var(--ink-soft); }

/* ---- Galerie des bonus ---- */
.bonus{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.bonus figure{ margin:0; }
.bonus img{
  width:100%; border-radius:var(--r-sm);
  box-shadow:0 18px 40px -26px rgba(37,31,24,.6);
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.bonus figure:hover img{ transform:translateY(-4px); }
.bonus figcaption{
  margin-top:8px; font-size:.78rem; line-height:1.45;
  color:var(--ink-soft); text-align:center; text-wrap:pretty;
}

/* ---- Témoignages ---- */
.temoins{ display:grid; gap:14px; }
@media (min-width:860px){ .temoins{ grid-template-columns:repeat(3,1fr); } }
.temoins blockquote{
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:22px 24px; margin:0; box-shadow:var(--sh-soft);
}
.temoins p{ font-size:.93rem; line-height:1.68; color:var(--ink-soft); font-style:italic; text-wrap:pretty; }
.temoins footer{ margin-top:12px; font-size:.82rem; color:var(--ink-faint); }
.temoins footer b{ color:var(--purple-deep); font-style:normal; }

/* ---- FAQ ---- */
.faq{ display:grid; gap:10px; }
.faq details{
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-md); box-shadow:var(--sh-soft); overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-weight:700; color:var(--purple-deep); font-size:.96rem; line-height:1.45;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--f-display); font-size:1.5rem; line-height:1;
  color:var(--gold); flex:none; transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .reponse{ padding:0 22px 20px; font-size:.92rem; line-height:1.7; color:var(--ink-soft); text-wrap:pretty; }

/* ---- Sceau de garantie ---- */
.sceau{ width:min(130px,34%); margin:0 auto 14px; }

/* ---- Portrait de la page de vente ---- */
.portrait-vente{
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-card); max-width:380px; margin-inline:auto;
}
.chiffres{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; }
@media (min-width:860px){ .chiffres{ justify-content:flex-start; } }
.chiffres div{ text-align:center; }
@media (min-width:860px){ .chiffres div{ text-align:left; } }
.chiffres b{
  display:block; font-family:var(--f-display); font-size:1.5rem; color:var(--gold-deep); line-height:1.1;
}
.chiffres span{ font-size:.8rem; color:var(--ink-soft); }

/* ---------------- Page de vente : renforts visuels ---------------- */

/* Filigrane du symbole Reiki derrière le héros */
.filigrane{
  position:absolute; left:50%; top:50%;
  width:min(620px,86vw); transform:translate(-50%,-50%);
  opacity:.05; pointer-events:none; z-index:0;
}

/* Bandeau de repères, version pastilles */
.repere li{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  padding:8px 16px;
  box-shadow:var(--sh-soft);
}
.repere li + li::before{ display:none; }

/* Parcours en frise verticale */
.etapes{ position:relative; }
.etapes::before{
  content:""; position:absolute; left:17px; top:28px; bottom:28px; width:2px;
  background:linear-gradient(180deg,rgba(189,156,88,0),var(--line),rgba(189,156,88,0));
}
.etapes li{ position:relative; z-index:1; }

/* Galerie de bonus : légère inclinaison alternée */
.bonus figure:nth-child(odd) img{ transform:rotate(-1.1deg); }
.bonus figure:nth-child(even) img{ transform:rotate(1.1deg); }
.bonus figure:hover img{ transform:rotate(0) translateY(-5px) scale(1.02); }

/* Image d'ambiance pleine largeur */
.ambiance{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-deep); max-width:900px; margin-inline:auto;
}
.ambiance img{ width:100%; display:block; }
.ambiance::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(255,255,255,.3);
}

/* Encart de citation détachée */
.exergue{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,3.6vw,1.75rem);
  line-height:1.4; color:var(--purple);
  text-wrap:balance; max-width:22ch; margin-inline:auto;
}

/* Sauts de ligne pilotés, version page de vente */
.nb{ white-space:nowrap; }

/* ==========================================================================
   24. POPUP DU BON DE COMMANDE
   ========================================================================== */
.modale{
  position:fixed; inset:0; z-index:90;
  display:none;
  padding:clamp(12px,3vw,40px);
  background:rgba(37,31,24,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.modale[open],
.modale.est-ouverte{ display:grid; place-items:center; }
.modale__boite{
  position:relative;
  width:100%; max-width:980px; height:min(88vh,1000px);
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.65);
  overflow:hidden;
  display:flex; flex-direction:column;
  animation:modale-entre .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes modale-entre{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
.modale__tete{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px 14px 22px;
  border-bottom:1px solid var(--line-soft);
  background:var(--cream-tint);
}
.modale__titre{
  font-family:var(--f-display); font-size:1.05rem; color:var(--purple-deep); line-height:1.3;
}
.modale__actions{ display:flex; align-items:center; gap:10px; flex:none; }
.modale__pleine{
  font-size:.76rem; font-weight:600; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.modale__fermer{
  width:38px; height:38px; flex:none;
  border:1px solid var(--line-soft); border-radius:50%;
  background:var(--white); color:var(--ink-soft);
  font-size:1.2rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .25s, color .25s, transform .25s;
}
.modale__fermer:hover{ background:var(--purple-mist); color:var(--purple-deep); transform:rotate(90deg); }
.modale__corps{ flex:1; min-height:0; background:var(--white); }
.modale__corps iframe{ width:100%; height:100%; border:0; display:block; }
body.modale-ouverte{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .modale__boite{ animation:none; }
}

/* ==========================================================================
   25. PAGE DE VENTE · ANIMATIONS
   ========================================================================== */

/* --- Éventail de cartes bonus : se déploie à l'apparition --- */
.eventail{
  --carte:124px; --pas:4.4deg;
  position:relative; height:250px; margin:0 auto 34px;
  overflow-x:clip; overflow-y:visible;
}
.eventail img{
  position:absolute; left:calc(50% - var(--carte)/2); top:0;
  width:var(--carte); aspect-ratio:640/886;
  transform-origin:50% 400%;
  transform:rotate(0deg) translateY(26px);
  opacity:0;
  filter:drop-shadow(0 12px 20px rgba(60,20,110,.34));
  transition:transform 1s cubic-bezier(.19,1,.22,1), opacity .6s ease;
}
.eventail.is-in img{
  transform:rotate(calc(var(--i) * var(--pas))) translateY(0);
  opacity:1;
}
.eventail img:nth-child(1){ transition-delay:.02s } .eventail img:nth-child(2){ transition-delay:.06s }
.eventail img:nth-child(3){ transition-delay:.10s } .eventail img:nth-child(4){ transition-delay:.14s }
.eventail img:nth-child(5){ transition-delay:.18s } .eventail img:nth-child(6){ transition-delay:.22s }
.eventail img:nth-child(7){ transition-delay:.26s } .eventail img:nth-child(8){ transition-delay:.30s }
.eventail img:nth-child(9){ transition-delay:.34s } .eventail img:nth-child(10){ transition-delay:.38s }
.eventail img:nth-child(11){ transition-delay:.42s }
@media (max-width:720px){ .eventail{ --carte:92px; --pas:3.2deg; height:184px; } }

/* --- Scintillement doré sur le nom du programme --- */
.marque-or{
  background:linear-gradient(100deg,#9F7F3C 0%,#BD9C58 32%,#F7E7C1 50%,#BD9C58 68%,#9F7F3C 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:scintille 5.5s ease-in-out infinite;
  white-space:nowrap;
}
@keyframes scintille{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }

/* --- La frise du parcours se dessine --- */
.etapes::before{ transform:scaleY(0); transform-origin:top; transition:transform 1.4s cubic-bezier(.19,1,.22,1) .2s; }
.etapes.is-in::before{ transform:scaleY(1); }

/* --- Chiffres qui défilent --- */
.chiffres b{ font-variant-numeric:tabular-nums; }

/* --- Sceau de garantie : arrivée en rotation --- */
.js .sceau.reveal{ transform:rotate(-14deg) scale(.78); opacity:0; }
.sceau.reveal{ transition:transform 1.1s cubic-bezier(.19,1,.22,1), opacity .7s ease; }
.js .sceau.reveal.is-in{ transform:rotate(0) scale(1); opacity:1; }

/* --- Le bloc d'achat respire légèrement --- */
.achat{ transition:box-shadow .5s ease, transform .5s ease; }
.achat:hover{ box-shadow:0 40px 90px -46px rgba(122,50,201,.45); }

/* --- Ligne de tableau mise en avant : halo doux --- */
.tarifs tr.mise-en-avant td{ position:relative; }
.tarifs tr.mise-en-avant td:first-child::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--grad-gold-soft); border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  .eventail img{ transform:rotate(calc(var(--i) * var(--pas))) !important; opacity:1 !important; transition:none !important; }
  .marque-or{ animation:none; }
  .etapes::before{ transform:scaleY(1) !important; transition:none; }
  .js .sceau.reveal{ transform:none !important; opacity:1 !important; }
}

/* --- Liste serrée des bonus, sous l'éventail --- */
.noms{
  display:grid; gap:0; margin:0 auto; padding:0; list-style:none;
  max-width:640px;
}
@media (min-width:720px){ .noms{ grid-template-columns:1fr 1fr; column-gap:40px; max-width:860px; } }
.noms li{
  position:relative;
  padding:12px 0 12px 26px;
  border-top:1px solid var(--line-soft);
  font-size:.92rem; line-height:1.5; color:var(--ink-soft);
  text-wrap:pretty;
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.noms.is-in li{ opacity:1; transform:none; }
.noms li:nth-child(1){transition-delay:.02s} .noms li:nth-child(2){transition-delay:.06s}
.noms li:nth-child(3){transition-delay:.10s} .noms li:nth-child(4){transition-delay:.14s}
.noms li:nth-child(5){transition-delay:.18s} .noms li:nth-child(6){transition-delay:.22s}
.noms li:nth-child(7){transition-delay:.26s} .noms li:nth-child(8){transition-delay:.30s}
.noms li:nth-child(9){transition-delay:.34s} .noms li:nth-child(10){transition-delay:.38s}
.noms li:nth-child(11){transition-delay:.42s}
.noms li::before{
  content:""; position:absolute; left:4px; top:19px;
  width:8px; height:8px; border-radius:50%; background:var(--purple);
}
.noms em{
  display:block; font-style:normal;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:2px;
}

/* --- Réassurances en lignes, plus en boîtes --- */
.rassurance--lignes{ gap:0; margin-top:22px; }
@media (min-width:720px){ .rassurance--lignes{ grid-template-columns:1fr 1fr; column-gap:40px; } }
.rassurance--lignes div{
  background:none; border:0; border-top:1px solid var(--line-soft);
  border-radius:0; padding:14px 0;
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.rassurance--lignes.is-in div{ opacity:1; transform:none; }
.rassurance--lignes div:nth-child(1){transition-delay:.02s} .rassurance--lignes div:nth-child(2){transition-delay:.08s}
.rassurance--lignes div:nth-child(3){transition-delay:.14s} .rassurance--lignes div:nth-child(4){transition-delay:.20s}
.rassurance--lignes div:nth-child(5){transition-delay:.26s} .rassurance--lignes div:nth-child(6){transition-delay:.32s}

/* --- Lignes du tableau de prix : apparition en cascade --- */
.tarifs tbody tr{
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1), background .3s ease;
}
.tarifs.is-in tbody tr{ opacity:1; transform:none; }
.tarifs tbody tr:nth-child(1){transition-delay:.04s} .tarifs tbody tr:nth-child(2){transition-delay:.10s}
.tarifs tbody tr:nth-child(3){transition-delay:.16s} .tarifs tbody tr:nth-child(4){transition-delay:.22s}
.tarifs tbody tr:nth-child(5){transition-delay:.28s}
.tarifs tbody tr:hover td{ background:var(--cream-deep); }
.tarifs tbody tr.mise-en-avant:hover td{ background:var(--purple-mist); }

/* --- Image d'ambiance : léger dézoom à l'apparition --- */
.ambiance img{ transform:scale(1.06); transition:transform 1.6s cubic-bezier(.2,.8,.3,1); }
.ambiance.is-in img{ transform:scale(1); }

/* --- FAQ : ouverture adoucie --- */
.faq .reponse{ animation:faq-ouvre .35s ease; }
@keyframes faq-ouvre{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .noms li,.rassurance--lignes div,.tarifs tbody tr{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ambiance img{ transform:none !important; }
  .faq .reponse{ animation:none; }
}

/* --- Page de vente : listes allégées, on retire les boîtes --- */
.vente-epure .checklist li,
.vente-epure .etapes li,
.vente-epure .inclus li{
  background:none; border:0; border-top:1px solid var(--line-soft);
  border-radius:0; box-shadow:none;
  padding:15px 0; gap:14px;
}
.vente-epure .checklist li:hover,
.vente-epure .etapes li:hover,
.vente-epure .inclus li:hover{ transform:none; box-shadow:none; }
.vente-epure .checklist li::before{ display:none; }
.vente-epure .checklist .num,
.vente-epure .etapes .pas{
  width:26px; height:26px; font-size:.82rem;
  background:none; color:var(--purple-deep);
  border:1.5px solid var(--purple-mist);
  box-shadow:none; text-shadow:none;
}
.vente-epure .etapes::before{ left:13px; }
.vente-epure .inclus svg{ width:19px; height:19px; }
.vente-epure .checklist{ gap:0; }
.vente-epure .etapes{ gap:0; }
.vente-epure .inclus{ gap:0; }
@media (min-width:720px){
  .vente-epure .inclus{ column-gap:40px; }
}