/* ============================================================
   MAÏLY ZEN — ADN : Mystique Doux Premium
   Palette issue du logo lotus aquarelle + croissant de lune doré
   ============================================================ */

:root{
  --creme:      #F5EDE8;   /* fond dominant — crème rosé du logo */
  --creme-hi:   #FBF6F3;   /* blanc rosé — cards */
  --mauve:      #C4A8D4;   /* mauve lavande — primaire */
  --mauve-pale: #EDE6F5;   /* mauve lavande très pâle — fond alterné */
  --rose:       #E8B4C8;   /* rose poudré — fond alterné */
  --or:         #C9A45A;   /* doré chaud — accent, ornements */
  --or-clair:   #E0C489;
  --mauve-deep: #6B5B7B;   /* mauve profond — fonds sombres, CTA dark */
  --mauve-deep2:#584A66;
  --encre:      #4A3728;   /* brun encre — corps de texte */
  --encre-doux: rgba(74,55,40,.66);

  --wrap: 1200px;
  --r-pebble: 46% 54% 44% 56% / 52% 46% 54% 48%;
  --shadow-soft: 0 30px 70px -40px rgba(107,91,123,.55);
  --shadow-card: 0 18px 40px -28px rgba(107,91,123,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--creme); color:var(--encre);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px; line-height:1.75; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:"Fraunces",Georgia,serif; font-weight:400; line-height:1.02; letter-spacing:-.025em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
section{position:relative}

/* ---------- GRAIN NOISE GLOBAL (feTurbulence, overlay 4%) ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.28;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- LAYOUT ---------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px; position:relative; z-index:2}
.wrap-narrow{max-width:880px}
.sec{padding:130px 0}
.sec-sm{padding:88px 0}

/* ---------- ORNEMENTS SIGNATURE ---------- */
/* Chip de section : uppercase + tiret, mauve pâle */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mauve-deep); background:rgba(196,168,212,.22);
  border:1px solid rgba(196,168,212,.45);
  padding:9px 18px; border-radius:100px; margin-bottom:28px; align-self:flex-start; white-space:nowrap;
  backdrop-filter:blur(6px);
}
.chip--light{color:var(--creme); background:rgba(245,237,232,.13); border-color:rgba(245,237,232,.3)}
.chip--gold{color:#7d6531; background:rgba(201,164,90,.16); border-color:rgba(201,164,90,.4)}

/* Séparateur doré fin */
.sep{height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,rgba(201,164,90,.55),transparent)}

/* Blobs flous colorés */
.blob{position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0}

/* Halo radial derrière les photos */
.halo{position:absolute; inset:-14% -10%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,164,90,.45),rgba(232,180,200,.22) 55%,transparent 78%);
  filter:blur(28px);
}

/* Croissant de lune doré — motif central du logo */
.moon{color:var(--or); display:block}
.moon svg{width:100%; height:100%; display:block}

/* Onde biorésonance dorée */
.wave{color:var(--or); display:block}
.wave svg{width:100%; height:auto; display:block}

/* Lotus aquarelle en watermark */
.lotus-wm{
  position:absolute; z-index:0; pointer-events:none;
  color:var(--mauve); opacity:.13; filter:blur(.4px);
}
.lotus-wm svg{width:100%; height:auto; display:block}

/* Séparateur lune : ligne dorée + croissant centré */
.moon-rule{display:flex; align-items:center; justify-content:center; gap:22px; margin:0 auto; max-width:520px}
.moon-rule::before,.moon-rule::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(201,164,90,.6))}
.moon-rule::after{background:linear-gradient(90deg,rgba(201,164,90,.6),transparent)}
.moon-rule .moon{width:26px; height:26px; flex:none}
.moon-rule--light::before{background:linear-gradient(90deg,transparent,rgba(224,196,137,.65))}
.moon-rule--light::after{background:linear-gradient(90deg,rgba(224,196,137,.65),transparent)}

/* ---------- TYPO ---------- */
.h-xl{font-size:clamp(42px,7.4vw,78px); line-height:.98; letter-spacing:-.035em}
.h-lg{font-size:clamp(34px,4.6vw,52px); line-height:1.02; letter-spacing:-.03em}
.h-md{font-size:clamp(28px,3.4vw,44px); line-height:1.05; letter-spacing:-.025em}
.h-sm{font-size:clamp(24px,2.6vw,36px); line-height:1.1; letter-spacing:-.02em}
.it{font-style:italic; font-variation-settings:"SOFT" 60}
.lead{font-size:clamp(16px,1.5vw,19px); line-height:1.8; color:var(--encre-doux); max-width:60ch}
.eyebrow{font-size:13px; letter-spacing:.28em; text-transform:uppercase; font-weight:500}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:"DM Sans",sans-serif; font-size:15px; font-weight:600; letter-spacing:.01em;
  padding:16px 20px 16px 30px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .45s cubic-bezier(.2,.9,.25,1), box-shadow .45s ease, background .35s ease, color .35s ease;
  position:relative; z-index:3;
}
.btn .arw{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  transition:transform .5s cubic-bezier(.2,.9,.25,1), background .35s ease;
}
.btn .arw svg{width:15px; height:15px}
.btn:hover{transform:translateY(-3px)}
.btn:hover .arw{transform:rotate(-45deg)}

.btn-gold{background:var(--or); color:var(--creme); box-shadow:0 16px 34px -18px rgba(201,164,90,.85)}
.btn-gold .arw{background:rgba(245,237,232,.22)}
.btn-gold:hover{background:#bb9349; box-shadow:0 22px 44px -18px rgba(201,164,90,.95)}

.btn-cream{background:var(--creme); color:var(--mauve-deep); box-shadow:0 16px 34px -20px rgba(0,0,0,.5)}
.btn-cream .arw{background:rgba(107,91,123,.14)}
.btn-cream:hover{background:#fff}

.btn-ghost{border-color:rgba(201,164,90,.5); color:var(--encre); padding-left:26px}
.btn-ghost .arw{background:rgba(201,164,90,.16)}
.btn-ghost:hover{border-color:var(--or); background:rgba(201,164,90,.08)}

/* lien souligné */
.link-u{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:500; color:var(--or); padding-bottom:3px;
  background-image:linear-gradient(var(--or),var(--or));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s cubic-bezier(.2,.9,.25,1), gap .35s ease;
}
.link-u:hover{gap:16px; background-size:38% 1px}
.link-u--light{color:var(--creme); background-image:linear-gradient(var(--creme),var(--creme))}

/* ---------- BADGE TRUST + POINT PULSANT ---------- */
.trust{
  display:inline-flex; align-items:center; gap:11px;
  padding:9px 20px 9px 15px; border-radius:100px;
  background:var(--or); color:var(--creme);
  font-size:13.5px; font-weight:500; letter-spacing:.015em;
  box-shadow:0 14px 32px -18px rgba(201,164,90,.9);
}
.trust .star{width:15px; height:15px; flex:none}
.trust--glass{background:rgba(201,164,90,.9); backdrop-filter:blur(14px); border:1px solid rgba(245,237,232,.28)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--creme); flex:none; position:relative}
.dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--creme); animation:pulse-dot 2.4s ease-out infinite}
@keyframes pulse-dot{0%{transform:scale(1);opacity:.7} 70%{transform:scale(3.4);opacity:0} 100%{opacity:0}}

/* ============================================================
   1 — NAVBAR
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:16px 0;
  background:rgba(107,91,123,.42);
  backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid rgba(245,237,232,.12);
  color:var(--creme);
}
.nav-inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links.right{justify-content:flex-end}
.nav-links a{
  font-size:14.5px; white-space:nowrap; font-weight:400; letter-spacing:.01em; padding:6px 0;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s cubic-bezier(.2,.9,.25,1), opacity .3s ease;
}
.nav-links a:hover{background-size:100% 1px}
.nav-cta{margin-left:26px}
.nav-cta .btn{padding:11px 15px 11px 22px; font-size:14px}
.nav-cta .arw{width:28px; height:28px}
.nav-cta .arw svg{width:12px; height:12px}

/* Logo Maïly Zen — lotus + lune + monogramme, posé sur sa pastille crème rosé */
.brand{display:flex; align-items:center; gap:13px; padding:8px 20px 8px 12px; border-radius:100px;
  background:var(--creme); border:1px solid rgba(201,164,90,.35); box-shadow:0 10px 26px -18px rgba(107,91,123,.7)}
.brand-mark{width:38px; height:38px; flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:"Fraunces",serif; font-style:italic; font-size:20px; color:var(--or); letter-spacing:-.01em}
.brand-sub{font-size:8.5px; letter-spacing:.34em; white-space:nowrap; text-transform:uppercase; color:var(--mauve-deep); margin-top:4px}

.nav-burger{display:none}

/* Navbar transparente sur le hero → crème rosé au scroll (scroll-driven CSS, zéro JS) */
@supports (animation-timeline: scroll()){
  @property --nav-bg{syntax:"<color>"; inherits:true; initial-value:rgba(245,237,232,0)}
  @property --nav-ink{syntax:"<color>"; inherits:true; initial-value:#F5EDE8}
  @property --nav-line{syntax:"<color>"; inherits:true; initial-value:rgba(201,164,90,0)}
  .nav{
    background:var(--nav-bg); color:var(--nav-ink); border-bottom-color:var(--nav-line);
    backdrop-filter:blur(12px) saturate(1.1);
    animation:navSolid linear both; animation-timeline:scroll(root); animation-range:40px 220px;
  }
  @keyframes navSolid{
    to{--nav-bg:rgba(245,237,232,.94); --nav-ink:#4A3728; --nav-line:rgba(201,164,90,.55)}
  }
}

/* ============================================================
   2 — HERO
   ============================================================ */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:150px 0 120px;
  background:linear-gradient(160deg,#8c7364,#5d4a44 45%,#3f322f);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:url("https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=1920&q=80");
  background-size:cover; background-position:center 55%;
  transform:scale(1.06); animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0)} to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0)}}
/* Overlay crème rosé + voile mauve pour lisibilité */
.hero-veil{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(63,50,47,.55),rgba(63,50,47,.18) 32%,rgba(107,91,123,.42) 78%,rgba(107,91,123,.7)),
    linear-gradient(0deg,rgba(245,237,232,.2),rgba(245,237,232,.2));
}
/* Grille pattern subtile, fade radial vers les bords */
.hero-grid{position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:linear-gradient(rgba(245,237,232,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(245,237,232,.11) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 68% 62% at 50% 45%,#000 20%,transparent 76%);
  mask-image:radial-gradient(ellipse 68% 62% at 50% 45%,#000 20%,transparent 76%);
}
.hero .blob-1{width:640px; height:640px; top:-14%; left:-12%; background:rgba(196,168,212,.5); z-index:1}
.hero .blob-2{width:520px; height:520px; bottom:-16%; right:-8%; background:rgba(201,164,90,.42); z-index:1}
.hero .blob-3{width:400px; height:400px; top:32%; right:26%; background:rgba(232,180,200,.34); z-index:1; filter:blur(90px)}
/* Croissant de lune watermark très discret */
.hero-moon{position:absolute; z-index:1; width:min(46vw,520px); height:min(46vw,520px);
  top:-6%; right:-4%; color:var(--or-clair); opacity:.14;
  animation:moonFloat 18s ease-in-out infinite alternate}
@keyframes moonFloat{from{transform:translateY(0) rotate(-6deg)} to{transform:translateY(26px) rotate(4deg)}}

.hero-inner{position:relative; z-index:3; color:var(--creme); display:flex; flex-direction:column; align-items:center}
.hero-sub{font-size:clamp(11px,1.2vw,14px); letter-spacing:.34em; text-transform:uppercase; color:rgba(245,237,232,.82); margin:26px 0 0}
.hero h1{
  color:var(--creme); max-width:none; text-shadow:0 2px 40px rgba(63,50,47,.35);
  font-style:italic; font-weight:600; font-size:clamp(30px,5.3vw,64px); letter-spacing:-.03em; line-height:1.06;
}
/* mot-clé émotionnel : doré + souligné, comme sur la référence */
.hero h1 .hl{
  color:var(--or-clair);
  text-decoration:underline; text-decoration-color:rgba(224,196,137,.9);
  text-decoration-thickness:.05em; text-underline-offset:.14em;
}
.hero-actions{display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:center; margin-top:40px}

/* Avatars empilés + trust */
.avatars{display:flex; align-items:center; gap:16px; margin-top:38px}
.av-stack{display:flex}
.av-stack img{width:44px; height:44px; border-radius:50%; object-fit:cover; margin-left:-11px;
  border:2px solid rgba(245,237,232,.85); box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
  transition:transform .4s cubic-bezier(.2,.9,.25,1)}
.av-stack img:first-child{margin-left:0}
.av-stack:hover img{transform:translateY(-4px)}
.av-txt{font-size:13.5px; color:rgba(245,237,232,.82); text-align:left; line-height:1.45}
.av-txt b{color:var(--creme); font-weight:600}

/* Flèche scroll dorée animée */
.scroll-cue{position:absolute; left:50%; bottom:34px; z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--or-clair)}
.scroll-cue span{font-size:10px; letter-spacing:.3em; text-transform:uppercase; opacity:.75}
.scroll-cue .line{width:1px; height:46px; background:linear-gradient(rgba(224,196,137,0),var(--or-clair)); position:relative; overflow:hidden}
.scroll-cue .line::after{content:""; position:absolute; left:0; width:1px; height:16px; background:var(--creme); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{top:-18px} 60%,100%{top:48px}}

/* ============================================================
   3 — STATS
   ============================================================ */
.stats{background:var(--creme); padding:56px 0}
.stats-row{display:flex; align-items:center; justify-content:space-between; gap:22px}
.stat{flex:1; text-align:center; padding:10px 8px}
.stat b{display:block; font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(38px,4.6vw,58px); color:var(--mauve); line-height:1; letter-spacing:-.03em}
.stat span{display:block; margin-top:12px; font-size:13.5px; letter-spacing:.06em; color:var(--encre-doux)}
.stat-sep{flex:none; width:20px; height:20px; opacity:.85}

/* ============================================================
   4 — MANIFESTE
   ============================================================ */
.manifeste{background:var(--mauve-pale); text-align:center; overflow:hidden}
.manifeste .blob-1{width:520px; height:520px; top:-24%; left:-10%; background:rgba(232,180,200,.5)}
.manifeste .blob-2{width:460px; height:460px; bottom:-26%; right:-8%; background:rgba(201,164,90,.3)}
.manifeste .lotus-wm{width:min(58vw,660px); left:50%; top:50%; transform:translate(-50%,-48%); opacity:.09}
.manifeste blockquote{margin:0 auto; max-width:16ch}
.quote-big{font-size:clamp(30px,4.4vw,50px); line-height:1.14; letter-spacing:-.025em; max-width:750px; margin:0 auto}
.quote-big em{font-style:italic; color:var(--mauve-deep)}
.manifeste .lead{margin:34px auto 0; text-align:center; max-width:640px}

/* ============================================================
   5 — FEATURES (5 problématiques)
   ============================================================ */
.features{background:var(--creme); overflow:hidden}
.features .lotus-wm{width:min(40vw,460px); right:-6%; bottom:-8%; opacity:.1}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:64px}
.sec-head .lead{margin-top:18px}
.sec-head--center{flex-direction:column; align-items:center; text-align:center}

.f-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px}
.f-card{
  grid-column:span 2; position:relative; overflow:hidden;
  background:var(--creme-hi); border:1px solid rgba(201,164,90,.4);
  border-radius:26px; padding:34px 30px 30px;
  box-shadow:var(--shadow-card);
  transition:transform .55s cubic-bezier(.2,.9,.25,1), box-shadow .55s ease, border-color .5s ease;
}
.f-card:nth-child(4),.f-card:nth-child(5){grid-column:span 3}
.f-card::after{content:""; position:absolute; inset:auto -30% -60% auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(196,168,212,.5),transparent); filter:blur(30px); opacity:0; transition:opacity .6s ease}
.f-card:hover{transform:translateY(-8px); border-color:rgba(201,164,90,.8); box-shadow:0 34px 60px -34px rgba(107,91,123,.6)}
.f-card:hover::after{opacity:1}
.f-num{font-family:"Fraunces",serif; font-style:italic; font-size:15px; color:var(--or); letter-spacing:.06em}
.f-ico{width:34px; height:34px; color:var(--mauve); margin:22px 0 20px}
.f-card h3{font-size:26px; margin-bottom:10px}
.f-card p{font-size:15.5px; line-height:1.65; color:var(--encre-doux)}
.f-soon{display:inline-block; margin-top:16px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mauve-deep); background:rgba(196,168,212,.26); padding:5px 12px; border-radius:100px}

/* ============================================================
   6 — SPLIT OFFRE
   ============================================================ */
.offre{background:var(--mauve-deep); color:var(--creme); overflow:hidden; padding:0}
.offre-full{position:relative; z-index:2; width:100%}
.offre-grid{display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch; min-height:660px}
.offre-txt{
  padding:118px 72px 118px max(32px, calc((100vw - var(--wrap)) / 2));
  display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2;
}
.offre .blob-1{width:560px; height:560px; top:-20%; left:-16%; background:rgba(196,168,212,.55)}
.offre .blob-2{width:420px; height:420px; bottom:-22%; left:22%; background:rgba(201,164,90,.32)}
.offre h2{color:var(--creme); max-width:14ch}
.offre .lead{max-width:46ch}
.offre .lead{color:rgba(245,237,232,.78); margin-top:24px}
.price-badge{
  display:inline-flex; align-items:baseline; gap:12px; align-self:flex-start;
  margin-top:34px; padding:13px 26px; border-radius:100px; background:var(--or); color:var(--creme);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
}
.price-badge b{font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:27px; letter-spacing:-.02em}
.price-badge s{opacity:.72; font-size:14px}
.offre-actions{margin-top:38px}
.offre-media{position:relative; z-index:1}
.offre-media .ph{position:absolute; inset:0;
  background-image:linear-gradient(150deg,rgba(201,164,90,.35),rgba(107,91,123,.25)),url("https://images.unsplash.com/photo-1519824145371-296894a0daa9?auto=format&fit=crop&w=1400&q=80");
  background-size:cover; background-position:center;
  border-radius:200px 0 0 200px;
}
.offre-media::before{content:""; position:absolute; inset:0; z-index:2; border-radius:200px 0 0 200px;
  background:linear-gradient(90deg,rgba(107,91,123,.6),transparent 42%)}
.offre-moon{position:absolute; left:-46px; bottom:56px; z-index:3; width:120px; height:120px; color:var(--or-clair); opacity:.5}
/* card flottante en overlap */
.offre-float{
  position:absolute; z-index:4; left:-58px; bottom:14%;
  background:rgba(245,237,232,.16); backdrop-filter:blur(18px);
  border:1px solid rgba(245,237,232,.3); border-radius:22px; padding:20px 26px;
  box-shadow:0 26px 50px -28px rgba(0,0,0,.8); max-width:230px;
}
.offre-float .k{font-family:"Fraunces",serif; font-style:italic; font-size:30px; color:#F7E4CE; line-height:1}
.offre-float .v{font-size:13px; color:rgba(245,237,232,.8); margin-top:8px; line-height:1.5}

/* ============================================================
   7 — PROCESS
   ============================================================ */
.process{background:var(--creme)}
.step{display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:start; padding:44px 0}
.step-num{font-family:"Fraunces",serif; font-style:italic; font-weight:300;
  font-size:clamp(56px,7vw,86px); color:var(--mauve); line-height:.85; letter-spacing:-.05em; min-width:120px}
.step h3{font-family:"DM Sans",sans-serif; font-weight:700; font-size:clamp(21px,2.2vw,27px); letter-spacing:-.01em; line-height:1.25}
.step p{margin-top:14px; font-size:17px; color:var(--encre-doux); max-width:56ch}
.step-wave{opacity:.75; max-width:420px}
.step:hover .step-num{color:var(--or); transition:color .5s ease}
.step-num{transition:color .5s ease}

/* ============================================================
   8 — ABOUT MINI
   ============================================================ */
.about{background:var(--rose); overflow:hidden}
.about .lotus-wm{width:min(34vw,400px); left:-4%; bottom:-10%; color:var(--creme); opacity:.3}
.about-grid{display:grid; grid-template-columns:.88fr 1.12fr; gap:80px; align-items:center}
.about-media{position:relative}
.about-photo{
  position:relative; z-index:2; aspect-ratio:4/5; width:100%;
  background-image:linear-gradient(160deg,rgba(201,164,90,.2),rgba(107,91,123,.2)),url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=900&q=80");
  background-size:cover; background-position:center 28%;
  border-radius:var(--r-pebble);
  box-shadow:0 40px 80px -46px rgba(74,55,40,.85);
  animation:pebble 16s ease-in-out infinite alternate;
}
@keyframes pebble{
  0%{border-radius:46% 54% 44% 56% / 52% 46% 54% 48%}
  100%{border-radius:56% 44% 58% 42% / 44% 56% 44% 56%}
}
.about-sig{position:absolute; z-index:3; right:-22px; bottom:26px;
  background:var(--creme); border:1px solid rgba(201,164,90,.45); border-radius:18px;
  padding:14px 22px; box-shadow:var(--shadow-soft); text-align:center}
.about-sig b{display:block; font-family:"Fraunces",serif; font-style:italic; font-size:21px; color:var(--or)}
.about-sig span{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mauve-deep)}
.about-txt .lead{color:rgba(74,55,40,.8)}
.about .chip{background:rgba(245,237,232,.55); border-color:rgba(107,91,123,.25)}
.about-note{margin-top:20px; font-size:14.5px; font-style:italic; color:rgba(74,55,40,.58)}

/* ============================================================
   9 — TÉMOIGNAGES
   ============================================================ */
.testi{background:var(--creme); overflow:hidden}
.testi-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:74px; align-items:center}
.testi-media{position:relative}
.testi-photo{position:relative; z-index:2; aspect-ratio:4/5;
  background-image:linear-gradient(200deg,rgba(232,180,200,.28),rgba(107,91,123,.22)),url("https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=900&q=80");
  background-size:cover; background-position:center 22%;
  border-radius:290px 290px 26px 26px; box-shadow:var(--shadow-soft)}
.testi-quote{position:relative}
.testi-mark{font-family:"Fraunces",serif; font-style:italic; font-size:110px; line-height:.6; color:rgba(201,164,90,.32); display:block; margin-bottom:6px}
.testi-quote blockquote{font-family:"Fraunces",serif; font-style:italic; font-weight:300;
  font-size:clamp(22px,2.7vw,33px); line-height:1.32; letter-spacing:-.02em; max-width:22ch}
.testi-ph{
  margin-top:26px; padding:18px 24px; border-left:2px solid rgba(201,164,90,.6);
  background:rgba(196,168,212,.12); border-radius:0 16px 16px 0;
  font-size:15px; color:var(--encre-doux); font-style:italic}
.testi-who{margin-top:26px; font-size:14px; letter-spacing:.05em; color:var(--encre-doux)}
.testi-who b{color:var(--encre); font-weight:600; font-style:normal}
.testi-foot{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px}

/* ============================================================
   10 — BIORÉSONANCE
   ============================================================ */
.bio{background:var(--mauve-pale); overflow:hidden}
.bio .blob-1{width:500px; height:500px; top:-22%; right:-10%; background:rgba(201,164,90,.34)}
.bio .blob-2{width:440px; height:440px; bottom:-24%; left:-8%; background:rgba(232,180,200,.44)}
.bio .lotus-wm{width:min(46vw,520px); left:50%; top:52%; transform:translate(-50%,-50%); opacity:.08}
.bio-card{
  position:relative; z-index:3; max-width:920px; margin:0 auto; text-align:center;
  background:var(--creme); border:1px solid rgba(201,164,90,.5); border-radius:36px;
  padding:66px 60px 58px; box-shadow:0 46px 90px -50px rgba(107,91,123,.75);
}
.bio-wave{width:180px; margin:0 auto 26px}
.bio-card .lead{margin:22px auto 0; text-align:center}
.bio-bullets{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:36px 0 40px}
.bio-bullets li{display:inline-flex; align-items:center; gap:10px; font-size:14.5px; color:var(--encre);
  background:rgba(196,168,212,.2); border:1px solid rgba(196,168,212,.42); border-radius:100px; padding:10px 20px}
.bio-bullets svg{width:15px; height:15px; color:var(--or); flex:none}

/* ============================================================
   11 — PRICING
   ============================================================ */
.pricing{background:var(--creme); overflow:hidden}
.p-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.p-card{
  background:var(--creme-hi); border:1px solid rgba(201,164,90,.42); border-radius:24px;
  padding:32px 24px 28px; text-align:center; box-shadow:var(--shadow-card);
  transition:transform .5s cubic-bezier(.2,.9,.25,1), box-shadow .5s ease, background .5s ease;
}
.p-card:hover{transform:translateY(-10px); box-shadow:0 34px 60px -34px rgba(107,91,123,.55); background:#fff}
.p-ico{width:32px; height:32px; margin:0 auto 20px; color:var(--mauve)}
.p-card h3{font-size:22px; margin-bottom:10px}
.p-card p{font-size:14px; line-height:1.6; color:var(--encre-doux)}
.p-price{margin-top:56px; text-align:center; position:relative; z-index:2}
.p-price .amount{font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(58px,8vw,96px); color:var(--or); line-height:.9; letter-spacing:-.045em; display:inline-block}
.p-price .old{font-size:19px; color:rgba(74,55,40,.45); text-decoration:line-through; margin-left:16px}
.p-price .incl{margin-top:18px; font-size:16px; color:var(--encre-doux); letter-spacing:.02em}
.p-price .note{margin-top:26px; font-size:14px; font-style:italic; color:rgba(74,55,40,.55)}
.p-cta{margin-top:34px}

/* Marquee doré */
.marquee{background:var(--mauve-deep); color:var(--creme); padding:20px 0; overflow:hidden; display:flex; gap:0}
.marquee-track{display:flex; gap:52px; padding-right:52px; flex:none; animation:slide 34s linear infinite; align-items:center}
.marquee span{font-family:"Fraunces",serif; font-style:italic; font-size:26px; white-space:nowrap; letter-spacing:-.02em; opacity:.9}
.marquee .moon{width:15px; height:15px; flex:none; color:var(--or-clair)}
@keyframes slide{to{transform:translateX(-100%)}}

/* ============================================================
   12 — CTA FINAL
   ============================================================ */
.cta{background:var(--mauve-deep2); color:var(--creme); text-align:center; overflow:hidden; padding:132px 0}
.cta-bg{position:absolute; inset:0; z-index:0; opacity:.24;
  background-image:url("https://images.unsplash.com/photo-1515377905703-c4788e51af15?auto=format&fit=crop&w=1600&q=80");
  background-size:cover; background-position:center; filter:grayscale(.3)}
.cta::after{content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(88,74,102,.7),rgba(88,74,102,.95))}
.cta .blob-1{width:560px; height:560px; top:-24%; left:-8%; background:rgba(196,168,212,.5); z-index:1}
.cta .blob-2{width:480px; height:480px; bottom:-26%; right:-6%; background:rgba(201,164,90,.42); z-index:1}
.cta .wrap{z-index:3}
.cta-moon{width:52px; height:52px; margin:0 auto 34px; color:var(--or-clair)}
.cta h2{color:var(--creme); max-width:17ch; margin:0 auto}
.cta .lead{color:rgba(245,237,232,.76); margin:26px auto 0; text-align:center}
.cta-wave{width:200px; margin:38px auto 34px; color:var(--or-clair); opacity:.8}
.cta-meta{margin-top:30px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,237,232,.55)}

/* ============================================================
   13 — FOOTER
   ============================================================ */
.footer{background:var(--mauve-deep); color:var(--creme); padding:96px 0 34px; overflow:hidden}
.f-top{display:grid; grid-template-columns:1.35fr .85fr .95fr; gap:60px; align-items:start}
.f-brand .brand{background:transparent; border-color:rgba(245,237,232,.28); box-shadow:none; padding-left:0; padding-right:0; border:0}
.f-brand .brand-name{color:#F7E4CE}
.f-brand .brand-sub{color:rgba(245,237,232,.6)}
.f-tag{margin-top:20px; font-style:italic; font-size:16px; color:rgba(245,237,232,.72); max-width:34ch}
.f-col h4{font-family:"DM Sans",sans-serif; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(245,237,232,.5); font-weight:500; margin-bottom:20px}
.f-col li+li{margin-top:12px}
.f-col a{font-size:15.5px; color:rgba(245,237,232,.88);
  background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px;
  background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px;
  transition:background-size .45s cubic-bezier(.2,.9,.25,1)}
.f-col a:hover{background-size:100% 1px}
.f-social{display:flex; align-items:center; gap:11px; font-size:15.5px}
.f-social svg{width:17px; height:17px; flex:none; color:var(--or-clair)}
.f-gmb{margin-top:22px}

/* Mega-logo signature */
.f-mega{margin:74px 0 26px; text-align:center; line-height:.8; position:relative}
.f-mega span{font-family:"Fraunces",serif; font-style:italic; font-weight:300;
  font-size:clamp(64px,17vw,240px); letter-spacing:-.05em;
  background:linear-gradient(180deg,rgba(247,228,206,.95),rgba(201,164,90,.32));
  -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block}
.f-legal{display:flex; justify-content:center; gap:10px 26px; flex-wrap:wrap;
  padding-top:26px; font-size:13px; color:rgba(245,237,232,.55)}
.f-legal a:hover{color:var(--creme)}

/* ============================================================
   ANIMATIONS D'ENTRÉE (scroll-driven, dégradation propre)
   ============================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{animation:rise linear both; animation-timeline:view(); animation-range:entry 8% entry 92%}
    .rv-d1{animation-delay:0s}
    @keyframes rise{from{opacity:0; transform:translateY(38px)} to{opacity:1; transform:none}}
  }
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .f-grid{grid-template-columns:repeat(4,1fr)}
  .f-card{grid-column:span 2}
  .f-card:nth-child(4),.f-card:nth-child(5){grid-column:span 2}
  .p-grid{grid-template-columns:repeat(3,1fr)}
  .about-grid,.testi-grid{gap:48px}
  .offre-txt{padding-right:44px}
  .nav-links{gap:20px}
  .nav-links a{font-size:13.5px}
}

@media (max-width:768px){
  body{font-size:16.5px}
  .wrap{padding:0 22px}
  .sec{padding:82px 0}
  .sec-sm{padding:62px 0}

  /* nav mobile : logo + CTA, liens repliés en ligne dessous */
  .nav{padding:12px 0}
  /* mobile : liens repliés, on ne garde que le logo + le CTA doré */
  .nav-inner{grid-template-columns:auto 1fr; gap:10px}
  .nav-links.left{display:none}
  .nav-links.right{display:flex; justify-content:flex-end; gap:0}
  .nav-links.right > a{display:none}
  .brand{padding:6px 14px 6px 8px; gap:9px}
  .brand-mark{width:30px; height:30px}
  .brand-name{font-size:16px}
  .brand-sub{font-size:7px; letter-spacing:.28em}
  .nav-cta{margin-left:0}
  .nav-cta .btn{padding:9px 9px 9px 16px; font-size:12.5px; gap:8px}
  .nav-cta .arw{width:24px; height:24px}

  .hero{min-height:92svh; padding:132px 0 96px}
  .hero h1{font-size:clamp(27px,7.6vw,38px); max-width:22ch}
  .hero-sub{font-size:10.5px; letter-spacing:.24em}
  .hero-actions{gap:16px; margin-top:32px; flex-direction:column}
  .hero-actions .btn{width:100%; justify-content:space-between}
  .avatars{margin-top:30px}
  .av-txt{font-size:12.5px}
  .scroll-cue{display:none}

  .stats-row{flex-direction:column; gap:6px}
  .stat{padding:16px 0}
  .stat-sep{transform:rotate(90deg)}

  .quote-big{font-size:clamp(26px,7.4vw,34px)}

  .sec-head{flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:40px}
  .f-grid{grid-template-columns:1fr; gap:16px}
  .f-card,.f-card:nth-child(4),.f-card:nth-child(5){grid-column:span 1}
  .f-card{padding:28px 24px 26px}
  .f-card h3{font-size:23px}

  .offre-grid{grid-template-columns:1fr; min-height:0}
  .offre-txt{padding:76px 22px 60px; order:2}
  .offre-media{order:1; height:400px}
  .offre-media .ph,.offre-media::before{border-radius:0 0 120px 120px}
  .offre-media::before{background:linear-gradient(180deg,rgba(107,91,123,.5),transparent 45%)}
  .offre-float{left:auto; right:22px; top:auto; bottom:-30px; max-width:190px; padding:16px 20px}
  .offre-moon{left:auto; right:18px; bottom:auto; top:80px; width:70px; height:70px}
  .price-badge{padding:11px 20px}
  .price-badge b{font-size:23px}

  .step{grid-template-columns:1fr; gap:6px; padding:32px 0}
  .step-num{font-size:56px; min-width:0}
  .step-wave{max-width:100%}

  .about-grid,.testi-grid{grid-template-columns:1fr; gap:40px}
  .about-sig{right:12px; bottom:-18px}
  .testi-photo{border-radius:200px 200px 22px 22px}
  .testi-quote blockquote{max-width:none}

  .bio-card{padding:44px 26px 40px; border-radius:26px}
  .bio-bullets{gap:10px}
  .bio-bullets li{font-size:13.5px; padding:8px 15px}

  .p-grid{grid-template-columns:1fr 1fr; gap:14px}
  .p-card{padding:26px 18px 24px}
  .p-card h3{font-size:19px}
  .p-price{margin-top:42px}
  .p-price .old{display:block; margin:12px 0 0}

  .marquee span{font-size:20px}
  .cta{padding:92px 0}
  .cta-moon{width:40px; height:40px}

  .f-top{grid-template-columns:1fr; gap:44px}
  .f-mega{margin:52px 0 18px}
  .f-legal{gap:8px 16px; font-size:12px}
}

@media (max-width:430px){
  .p-grid{grid-template-columns:1fr}
  .btn{font-size:14px; padding:14px 16px 14px 24px}
  .brand-sub{display:none}
  .brand-name{font-size:17px}
  .nav-cta .btn{font-size:12px; padding:9px 8px 9px 14px}
}