/* ============================================================
   Alice Perrin — Éclat Serena / Une Voie Pour Être
   Maquette d'accueil — Start-Win
   Direction « cabane dans les arbres » : vert forêt dominant,
   moutarde des fauteuils en accent, angles vifs, filets.
   Couleurs échantillonnées dans les photos du cabinet et le logo.
   ============================================================ */

:root{
  /* échantillonnées dans les photos du cabinet */
  --forest:#242C20;
  --forest-2:#2E3728;
  --forest-deep:#171D14;
  --sage:#A2A879;          /* olive clair des murs en pleine lumière — décoratif */
  /* clairières */
  --paper:#F5F3EA;
  --paper-2:#EAE8DA;
  /* encres */
  --ink:#1E2419;
  --ink-soft:#4C5743;
  --cream:#F1EFE3;
  --cream-soft:#C9CFB8;
  /* accents : jaune des fauteuils, rouge de l'églantine du logo */
  --gold:#D9B93A;
  --gold-ink:#6E5A12;
  --rose:#C24A40;
  --rose-ink:#A83A31;

  --line-dark:rgba(241,239,227,.17);
  --line-light:rgba(30,36,25,.16);
  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --step:clamp(64px,8vw,116px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--forest);color:var(--cream);
  font:400 17px/1.7 Mulish,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Familjen Grotesk",Mulish,system-ui,sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.06;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.light{background:var(--paper);color:var(--ink)}
.light h1,.light h2,.light h3,.light h4{color:var(--ink)}

/* ---------- éléments partagés ---------- */
.kicker{
  display:block;font:600 12px/1.45 Mulish;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.light .kicker{color:var(--gold-ink)}
.lead{font-size:19px;line-height:1.65;color:var(--cream-soft)}
.light .lead{color:var(--ink-soft)}
.muted{color:var(--cream-soft)}
.light .muted{color:var(--ink-soft)}

.btn{
  display:inline-block;padding:15px 28px;border-radius:999px;text-decoration:none;
  font:600 15px/1 Mulish;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s;
}
.btn-gold{background:var(--gold);color:var(--forest-deep)}
.btn-gold:hover{background:#E9CB55}
.btn-ghost{border-color:rgba(241,239,227,.42);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(241,239,227,.08)}
.light .btn-ghost{border-color:rgba(30,36,25,.35);color:var(--ink)}
.light .btn-ghost:hover{border-color:var(--ink);background:rgba(30,36,25,.05)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip:auto;overflow:visible;left:12px;top:12px;z-index:400;background:var(--gold);color:var(--forest-deep);padding:10px 16px;border-radius:4px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:220;background:var(--forest-deep);
  border-bottom:1px solid var(--line-dark);
}
.bar{display:flex;align-items:center;gap:22px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;position:relative;z-index:240;flex:0 0 auto}
.brand img{width:34px;height:41px;object-fit:contain}
.brand b{display:block;font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.brand-txt{display:block}
.brand-txt em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--cream-soft);line-height:1.4}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-size:15px;text-decoration:none;color:var(--cream);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--gold)}
.head-cta{position:relative;z-index:240}
.burger{
  display:none;margin-left:auto;background:none;border:1px solid rgba(241,239,227,.35);
  color:var(--cream);width:44px;height:44px;border-radius:4px;position:relative;z-index:240;
}
.burger span{display:block;width:18px;height:1.5px;background:var(--cream);margin:4px auto}
.drawer{
  position:fixed;left:0;right:0;top:var(--drawer-top,74px);z-index:200;background:var(--forest-deep);
  border-bottom:1px solid var(--line-dark);padding:8px var(--pad) 26px;display:none;
}
.drawer.open{display:block}
.drawer a{display:block;padding:14px 0;border-bottom:1px solid var(--line-dark);text-decoration:none;font-size:17px}
.drawer .btn{margin-top:20px;width:100%;text-align:center}
.backdrop{position:fixed;inset:0;background:rgba(10,14,9,.55);z-index:190;display:none}
.backdrop.open{display:block}
@media (max-width:1040px){
  .nav{display:none}
  .head-cta{display:none}
  .burger{display:block}
}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line-dark)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:center;
  padding:clamp(48px,6vw,86px) var(--pad) clamp(52px,6vw,90px)}
.hero h1{font-size:clamp(38px,5.4vw,70px);margin:0 0 22px}
.hero h1 .soft{font-weight:300;color:var(--gold);display:block}
.hero .lead{max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:26px;max-width:33rem;font-size:14.5px;color:var(--cream-soft);border-left:2px solid var(--gold);padding-left:14px}
.hero-media{position:relative}
.hero-media img{width:100%;height:auto;aspect-ratio:4/3.35;object-fit:cover;object-position:50% 58%}
.hero-badge{
  position:absolute;left:-14px;bottom:-22px;background:var(--paper);color:var(--ink);
  padding:16px 22px;max-width:250px;border-left:4px solid var(--gold);
}
.hero-badge strong{display:block;font-family:"Familjen Grotesk",sans-serif;font-size:26px;line-height:1;margin-bottom:5px}
.hero-badge span{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;padding-bottom:64px}
  .hero-media{order:-1;margin-bottom:28px}
  .hero-badge{left:auto;right:0;bottom:-18px}
}

/* ---------- chiffres ---------- */
.figures{background:var(--forest-2);border-bottom:1px solid var(--line-dark)}
.figures-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:clamp(30px,4vw,46px) var(--pad)}
.fig{padding:6px clamp(14px,2vw,28px);border-left:1px solid var(--line-dark)}
.fig:first-child{border-left:0;padding-left:0}
.fig b{display:block;font-family:"Familjen Grotesk",sans-serif;font-weight:500;font-size:clamp(30px,3.6vw,46px);
  line-height:1;letter-spacing:-.03em;color:var(--gold);margin-bottom:9px}
.fig span{font-size:14.5px;line-height:1.5;color:var(--cream-soft);display:block}
@media (max-width:820px){
  .figures-grid{grid-template-columns:1fr 1fr;gap:26px 0}
  .fig:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:430px){
  .figures-grid{grid-template-columns:1fr;gap:22px}
  .fig{border-left:0;padding-left:0;border-top:1px solid var(--line-dark);padding-top:20px}
  .fig:first-child{border-top:0;padding-top:0}
}

/* ---------- section générique ---------- */
section{padding:var(--step) 0}
.sec-head{max-width:44rem;margin-bottom:clamp(34px,4vw,54px)}
.sec-head h2{font-size:clamp(29px,3.6vw,46px);margin-bottom:16px}

/* ---------- portrait / mon histoire ---------- */
.story{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4.5vw,68px);align-items:start}
.story-media{position:relative}
.story-media img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 24%}
.story-caption{margin-top:14px;font-size:13.5px;color:var(--ink-soft)}
.story h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:22px}
.pull{
  margin:30px 0;padding:20px 0 20px 24px;border-left:4px solid var(--rose-ink);
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;font-size:clamp(20px,2.2vw,26px);
  line-height:1.32;letter-spacing:-.02em;
}
@media (max-width:880px){.story{grid-template-columns:1fr}.story-media img{aspect-ratio:4/3;object-position:50% 22%}}

/* liste des formations */
.credits{margin-top:44px;border-top:1px solid var(--line-light)}
.credits h3{font-size:19px;padding-top:26px;margin-bottom:6px}
.credits ul{list-style:none;margin:14px 0 0;padding:0}
.credits li{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:13px 0;border-top:1px solid var(--line-light);font-size:15.5px;line-height:1.5}
.credits li b{font-family:"Familjen Grotesk",sans-serif;font-weight:600;color:var(--gold-ink);font-size:16px}
.credits li em{font-style:normal;color:var(--ink-soft);display:block}
@media (max-width:520px){.credits li{grid-template-columns:1fr;gap:2px}}

/* ---------- accompagnements : rangées alternées ---------- */
.rows{border-top:1px solid var(--line-dark)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;
  padding:clamp(38px,4.5vw,64px) 0;border-bottom:1px solid var(--line-dark)}
.row:nth-of-type(even) .row-media{order:2}
.row-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.row-num{font-family:"Familjen Grotesk",sans-serif;font-weight:500;font-size:14px;letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:14px}
.row h3{font-size:clamp(24px,2.9vw,34px);margin-bottom:16px}
.row ul{list-style:none;margin:20px 0 0;padding:0}
.row li{padding:9px 0 9px 22px;border-top:1px solid var(--line-dark);font-size:15.5px;position:relative;color:var(--cream-soft)}
.row li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--gold)}
.row-meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:14.5px;color:var(--cream-soft)}
.row-meta b{color:var(--gold);font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:19px}
@media (max-width:880px){
  .row{grid-template-columns:1fr;gap:24px}
  .row:nth-of-type(even) .row-media{order:0}
}

/* ---------- cabinet ---------- */
.cab-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:end;margin-bottom:38px}
.cab-intro h2{font-size:clamp(29px,3.6vw,46px)}
.gallery{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;align-items:end}
.gallery img{width:100%;height:auto;object-fit:cover}
.gallery img:nth-child(1){aspect-ratio:4/3.6}
.gallery img:nth-child(2){aspect-ratio:4/3}
.gallery img:nth-child(3){aspect-ratio:4/3.3}
.access{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid var(--line-light)}
.access div{padding:24px clamp(14px,2vw,28px) 0;border-left:1px solid var(--line-light)}
.access div:first-child{border-left:0;padding-left:0}
.access h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:10px;color:var(--gold-ink)}
.access p{font-size:15.5px;color:var(--ink-soft)}
@media (max-width:880px){.cab-intro{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery img:nth-child(3){grid-column:span 2;aspect-ratio:16/8}}
@media (max-width:680px){.access{grid-template-columns:1fr}.access div{border-left:0;padding-left:0;border-top:1px solid var(--line-light)}.access div:first-child{border-top:0}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}.gallery img:nth-child(3){grid-column:auto;aspect-ratio:4/3}}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dark)}
.steps > div{padding:30px clamp(16px,2.4vw,34px) 0;border-left:1px solid var(--line-dark)}
.steps > div:first-child{border-left:0;padding-left:0}
.steps b{display:block;font-family:"Familjen Grotesk",sans-serif;font-weight:500;font-size:40px;line-height:1;color:var(--gold);margin-bottom:16px;letter-spacing:-.04em}
.steps h3{font-size:20px;margin-bottom:12px}
.steps p{font-size:15.5px;color:var(--cream-soft)}
@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .steps > div{border-left:0;padding-left:0;border-top:1px solid var(--line-dark);padding-top:26px}
  .steps > div:first-child{border-top:0}
}

/* ---------- tarifs ---------- */
.prices{border-top:1px solid var(--line-light)}
.price{display:grid;grid-template-columns:1.3fr 2fr .8fr;gap:20px clamp(20px,3vw,48px);align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line-light)}
.price h3{font-size:clamp(21px,2.3vw,27px)}
.price p{font-size:15.5px;color:var(--ink-soft)}
.price .amount{font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:clamp(28px,3vw,38px);
  letter-spacing:-.03em;text-align:right;white-space:nowrap}
.price .amount em{display:block;font-style:normal;font-size:14px;font-weight:400;
  font-family:Mulish,sans-serif;color:var(--ink-soft);letter-spacing:0;margin-top:5px}
.price-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px}
.price-notes div{padding:0 clamp(14px,2vw,28px);border-left:1px solid var(--line-light)}
.price-notes div:first-child{border-left:0;padding-left:0}
.price-notes h4{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px;color:var(--gold-ink)}
.price-notes p{font-size:15px;color:var(--ink-soft)}
@media (max-width:820px){
  .price{grid-template-columns:1fr;gap:8px}
  .price .amount{text-align:left}
  .price-notes{grid-template-columns:1fr;gap:24px}
  .price-notes div{border-left:0;padding-left:0;border-top:1px solid var(--line-light);padding-top:22px}
  .price-notes div:first-child{border-top:0;padding-top:0}
}

/* ---------- avis ---------- */
.review-hero{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:clamp(34px,4vw,54px) 0}
.review-hero blockquote{margin:0;font-family:"Familjen Grotesk",sans-serif;font-weight:400;
  font-size:clamp(23px,3.1vw,40px);line-height:1.25;letter-spacing:-.025em;max-width:26ch}
.review-hero figcaption{margin-top:22px;font-size:14.5px;color:var(--cream-soft)}
.stars{color:var(--gold);letter-spacing:.14em;font-size:14px}
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px}
.reviews figure{margin:0;padding:30px clamp(14px,2vw,28px) 0;border-left:1px solid var(--line-dark)}
.reviews figure:first-child{border-left:0;padding-left:0}
.reviews blockquote{margin:12px 0 0;font-size:15.5px;line-height:1.62;color:var(--cream-soft)}
.reviews figcaption{margin-top:14px;font-size:13.5px;color:var(--cream-soft)}
.reviews figcaption b{color:var(--cream);font-weight:600}
@media (max-width:980px){.reviews{grid-template-columns:1fr 1fr}.reviews figure:nth-child(odd){border-left:0;padding-left:0}}
@media (max-width:600px){.reviews{grid-template-columns:1fr}.reviews figure{border-left:0;padding-left:0}}

/* ---------- FAQ (variante sombre par défaut, claire dans .light) ---------- */
.faq{max-width:56rem;border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:clamp(17px,2vw,20px);
  letter-spacing:-.015em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:calc(50% - 1px);width:15px;height:1.5px;background:var(--gold);
}
.faq summary::before{
  content:"";position:absolute;right:12.75px;top:calc(50% - 7.5px);width:1.5px;height:15px;background:var(--gold);
  transition:transform .18s;
}
@media (prefers-reduced-motion:reduce){.faq summary::before{transition:none}}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq .answer{padding:0 0 24px;max-width:40rem;font-size:16px;color:var(--cream-soft)}
.light .faq{border-top-color:var(--line-light)}
.light .faq details{border-bottom-color:var(--line-light)}
.light .faq summary::after,.light .faq summary::before{background:var(--gold-ink)}
.light .faq .answer{color:var(--ink-soft)}

/* ---------- RDV ---------- */
.tint,.rdv{background:var(--forest-2)}
.rdv-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,58px);align-items:start}
.rdv h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
.contact{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line-dark)}
.contact li{padding:16px 0;border-bottom:1px solid var(--line-dark);font-size:15.5px}
.contact li b{display:block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;font-weight:600}
.contact a{color:var(--cream)}
.rdv-widget{background:#fff;overflow:hidden;min-height:620px;border-radius:2px}
@media (max-width:980px){.rdv-grid{grid-template-columns:1fr}.rdv-widget{min-height:720px}}

/* ---------- footer ---------- */
footer{background:var(--forest-deep);border-top:1px solid var(--line-dark);padding:clamp(48px,5vw,72px) 0 34px;font-size:15px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px}
.foot h3{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;color:var(--cream-soft)}
.foot a{color:var(--cream-soft);text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot-brand p{color:var(--cream-soft);font-size:15px;max-width:26rem}
.zones{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:14.5px;color:var(--cream-soft);max-width:34rem}
.disclaimer{margin-top:22px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:13.5px;color:var(--cream-soft);max-width:46rem}
.legal{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13.5px;color:var(--cream-soft)}
@media (max-width:980px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}