/* ==========================================================================
   Françoise Boucly — accueil
   Charte reprise du site existant :
     mauve #C48CCA (logo) · vert tendre #DCF2BD · crème #FAF9F4 · beige #E5E3D7
   ========================================================================== */

:root{
  /* encres */
  --ink:      #2A1E2C;   /* 15,9:1 sur blanc — titres et corps                */
  --ink-2:    #5E4F60;   /*  7,6:1 sur blanc — texte secondaire               */
  --mauve-ink:#8A4E92;   /*  5,9:1 sur blanc — liens, prix, accents de texte  */

  /* couleurs de marque */
  --mauve:    #C48CCA;   /* couleur exacte du logo — décorative, jamais texte */
  --mauve-2:  #DCB6E0;
  --mauve-3:  #F0E1F2;
  --mauve-4:  #FAF3FB;
  --green:    #DCF2BD;
  --green-2:  #EDF8DE;
  --cream:    #FAF9F4;
  --beige:    #E5E3D7;
  --paper:    #FFFFFF;

  /* filets */
  --rule:     #E4DCE6;
  --rule-2:   #CFC2D2;

  /* formes */
  --r-s: 3px;
  --r-m: 12px;

  /* échelle typographique (ratio ≈ 1,26) */
  --t-xs:   0.875rem;   /* 14 */
  --t-s:    0.9375rem;  /* 15 */
  --t-b:    1.0625rem;  /* 17 */
  --t-m:    1.3125rem;  /* 21 */
  --t-l:    1.6875rem;  /* 27 */
  --t-xl:   2.125rem;   /* 34 */
  --t-2xl:  2.75rem;    /* 44 */

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-b);
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.18;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.15em }
p:last-child{ margin-bottom:0 }

a{ color:var(--mauve-ink) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:12px 20px;
}
.skip:focus{ left:0 }

:focus-visible{ outline:2px solid var(--mauve-ink); outline-offset:3px; border-radius:2px }

.wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 52px);
}

/* --------------------------------------------------------------- boutons */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:var(--t-s);
  font-weight:600;
  letter-spacing:0.015em;
  line-height:1.2;
  padding:14px 26px;
  border-radius:var(--r-s);
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid{ background:var(--mauve-ink); color:#fff; border:1px solid var(--mauve-ink) }
.btn-solid:hover{ background:var(--ink); border-color:var(--ink) }
.btn-line{ background:transparent; color:var(--mauve-ink); border:1px solid var(--rule-2) }
.btn-line:hover{ border-color:var(--mauve-ink); background:var(--mauve-4) }

.lnk{
  font-size:var(--t-s);
  font-weight:600;
  color:var(--mauve-ink);
  text-decoration:none;
  border-bottom:1px solid var(--mauve-2);
  padding-bottom:2px;
}
.lnk:hover{ border-bottom-color:var(--mauve-ink) }

/* ---------------------------------------------------------------- entête */
.site-head{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .2s ease;
}
.site-head.is-stuck{ box-shadow:0 1px 14px rgba(42,30,44,.09); border-bottom-color:transparent }

.head-in{
  display:flex; align-items:center; gap:26px;
  min-height:84px;
  padding-block:12px;
}

.logo{ display:block; flex:0 0 auto; line-height:0 }
.logo img{ width:auto; height:40px; object-fit:contain }

.nav{ margin-left:auto; display:flex; align-items:center; gap:24px }
.nav ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0 }
.nav a{
  font-size:var(--t-s);
  color:var(--ink);
  text-decoration:none;
  padding-block:6px;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.nav a:hover{ border-bottom-color:var(--mauve) }
.nav .btn-solid{ color:#fff }
.nav-cta{ padding:11px 18px }

.burger{
  display:none; margin-left:auto; align-items:center; gap:9px;
  background:none; border:1px solid var(--rule-2); border-radius:var(--r-s);
  color:var(--ink); font-family:var(--sans); font-size:var(--t-s); font-weight:600;
  padding:9px 14px; cursor:pointer;
}
.burger-bars, .burger-bars::before, .burger-bars::after{
  display:block; width:18px; height:1.5px; background:var(--ink); content:""; position:relative;
}
.burger-bars::before{ top:-6px } .burger-bars::after{ top:4.5px }

/* ------------------------------------------------------------------ hero */
.hero{ padding-block:clamp(44px, 7vw, 92px) clamp(40px, 6vw, 80px) }

.hero-in{
  display:grid;
  grid-template-columns:1fr 0.78fr;
  gap:clamp(32px, 5vw, 74px);
  align-items:center;
}

.hero h1{
  font-size:clamp(2.125rem, 4.9vw, 3.375rem);
  font-weight:300;
  margin:0 0 1.1rem;
  max-width:19ch;
}
.hero .lead{ max-width:38rem }

.lead{
  font-size:var(--t-m);
  line-height:1.58;
  font-weight:300;
  color:var(--ink);
}

.hero-act{ display:flex; flex-wrap:wrap; gap:14px; margin:1.9rem 0 1.5rem }

.hero-meta{
  font-size:var(--t-s);
  color:var(--ink-2);
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
  max-width:34rem;
}
.hero-meta a{ color:var(--mauve-ink); text-decoration:none; border-bottom:1px solid var(--mauve-2) }

.hero-fig{ margin:0 }
.hero-fig img{
  width:100%; height:auto;
  aspect-ratio:7/8;
  object-fit:cover;
  object-position:50% 30%;
  border-radius:var(--r-m);
}

/* -------------------------------------------------------------- repères */
.reperes{ background:var(--green-2); border-block:1px solid var(--green) }
.reperes-in{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,54px);
  padding-block:clamp(28px,4vw,42px);
}
.reperes p{ margin:0; font-size:var(--t-s); line-height:1.6 }
.reperes b{ font-weight:600; display:block; font-size:var(--t-b) }

/* ------------------------------------------------------- titres de section */
.s-title{
  font-size:clamp(1.6875rem, 3.3vw, 2.75rem);
  font-weight:300;
  margin:0 0 1rem;
  max-width:22ch;
}
.s-intro{
  font-size:var(--t-m);
  font-weight:300;
  line-height:1.6;
  color:var(--ink-2);
  max-width:38rem;
  margin-bottom:0;
}

/* ----------------------------------------------------------- les outils */
.outils{ padding-block:clamp(56px, 8vw, 104px) }
.outils-in{
  display:grid;
  grid-template-columns:0.72fr 1fr;
  gap:clamp(34px, 6vw, 82px);
  align-items:start;
}
.outils-lede{ position:sticky; top:110px }
.outils-lede .s-intro{ margin-bottom:clamp(28px,4vw,42px) }

.boussole{ margin:0; max-width:230px }
.boussole img{ width:100%; height:auto; object-fit:contain }
.boussole figcaption{
  font-size:var(--t-xs);
  color:var(--ink-2);
  line-height:1.55;
  margin-top:.8rem;
  max-width:30ch;
}

.outils-liste{ list-style:none; margin:0; padding:0; counter-reset:o }
.outils-liste li{
  counter-increment:o;
  padding:0 0 1.8rem;
  margin-bottom:1.8rem;
  border-bottom:1px solid var(--rule);
}
.outils-liste li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0 }
.outils-liste h3{
  font-size:var(--t-l);
  margin:0 0 .55rem;
  color:var(--ink);
}
.outils-liste p{ max-width:36rem }
.outil-meta{
  font-size:var(--t-s);
  color:var(--ink-2);
  margin-top:.7rem;
  margin-bottom:0;
}

/* ------------------------------------------------------------- approche */
.approche{
  background:var(--mauve-4);
  border-top:1px solid var(--rule);
  padding-block:clamp(56px, 8vw, 104px);
}
.approche .s-title{ margin-bottom:clamp(32px,5vw,52px) }

.approche-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(26px,4vw,46px) clamp(32px,5vw,72px);
}
.approche-grid h3{
  font-size:var(--t-m);
  color:var(--mauve-ink);
  margin:0 0 .45rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--mauve-2);
}
.approche-grid p{ max-width:34rem; margin:0 }
.app-large{ grid-column:1 / -1 }
.app-large h3{ font-size:var(--t-l) }
.app-large p{ max-width:44rem; font-size:var(--t-m); font-weight:300; line-height:1.6 }

/* ------------------------------------------------------------ bienfaits */
.bienfaits{ padding-block:clamp(56px, 8vw, 104px) }
.bienfaits-in{
  display:grid;
  grid-template-columns:1.28fr 0.72fr;
  gap:clamp(32px, 5vw, 74px);
  align-items:start;
}
.bienfaits .s-intro{ margin-bottom:clamp(24px,3vw,34px) }

.motifs{
  list-style:none; margin:0 0 1.7rem; padding:0;
  columns:2; column-gap:clamp(24px,3vw,44px);
}
.motifs li{
  break-inside:avoid;
  font-size:var(--t-s);
  padding:.5rem 0 .5rem 1.15rem;
  position:relative;
  max-width:34rem;
}
.motifs li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:6px; height:6px; background:var(--mauve); border-radius:50%;
}

.blessures{
  font-size:var(--t-s);
  background:var(--green-2);
  border-left:3px solid var(--green);
  padding:16px 20px;
  border-radius:0 var(--r-s) var(--r-s) 0;
  max-width:40rem;
  margin:0;
}
.blessures b{ font-weight:600 }

.bienfaits-fig{ margin:0; position:sticky; top:110px }
.bienfaits-fig img{
  width:100%; height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--r-m);
}

/* ------------------------------------------------------ accompagnement */
.acc{
  background:var(--cream);
  border-block:1px solid var(--beige);
  padding-block:clamp(56px, 8vw, 100px) clamp(40px,6vw,72px);
}
.acc > .wrap:first-child{ margin-bottom:clamp(34px,5vw,58px) }

.voie{ padding-block:clamp(22px,3vw,38px) }
.voie-in{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:clamp(28px, 5vw, 66px);
  align-items:center;
}
.voie-alt .voie-fig{ order:2 }

.voie-fig{ margin:0 }
.voie-fig img{
  width:100%; height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--r-m);
}
.voie-txt h3{ font-size:var(--t-l); margin:0 0 .7rem }
.voie-txt p{ max-width:34rem }
.voie-meta{
  font-size:var(--t-s);
  color:var(--ink-2);
  border-top:1px solid var(--rule);
  padding-top:.9rem;
  margin-bottom:1rem;
}

.stages-liste{ list-style:none; margin:0 0 1.2rem; padding:0; max-width:34rem }
.stages-liste li{
  font-size:var(--t-s);
  padding:.6rem 0;
  border-bottom:1px solid var(--rule);
}
.stages-liste li:last-child{ border-bottom:0 }
.stages-liste span{ display:block; color:var(--ink-2); font-size:var(--t-xs) }

/* ---------------------------------------------------------------- tarifs */
.tarifs{ padding-block:clamp(56px, 8vw, 104px) }
.tarifs .s-intro{ margin-bottom:clamp(36px,5vw,56px) }

.menu{ columns:2; column-gap:clamp(36px,5vw,72px) }
.menu-grp{ break-inside:avoid; margin-bottom:clamp(30px,4vw,46px) }

.grp-t{
  font-size:var(--t-m);
  color:var(--mauve-ink);
  margin:0 0 .2rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--rule-2);
}
.grp-note{ font-size:var(--t-xs); color:var(--ink-2); margin:.9rem 0 0; max-width:32rem }
.grp-note-haut{ margin:.7rem 0 0 }

.soins{ list-style:none; margin:0; padding:0 }
.soins li{
  padding:.95rem 0;
  border-bottom:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.2rem 1.5rem;
  align-items:baseline; justify-content:space-between;
}
.soins li:last-child{ border-bottom:0 }

.soin-n{ font-size:var(--t-b); font-weight:500; flex:1 1 14rem }
.soin-d{ display:block; font-size:var(--t-s); font-weight:300; color:var(--ink-2); max-width:26rem }
.soin-p{ display:flex; align-items:baseline; gap:.85rem; font-size:var(--t-s); flex:0 0 auto }
.dur{ color:var(--ink-2) }
.prix{ font-weight:600; color:var(--mauve-ink); min-width:3.4rem; text-align:right }

.tarifs-pied{ margin-top:clamp(16px,2vw,26px) }
.cadeau{
  font-size:var(--t-s);
  background:var(--mauve-3);
  border-radius:var(--r-s);
  padding:14px 18px;
  max-width:40rem;
  margin:0 0 1.4rem;
}
.cadeau b{ font-weight:600 }
.mention{ font-size:var(--t-xs); color:var(--ink-2); max-width:32rem; margin:0 }

/* ------------------------------------------------------------- Françoise */
.apropos{
  background:var(--cream);
  border-top:1px solid var(--beige);
  padding-block:clamp(56px, 8vw, 104px);
}
.apropos-in{
  display:grid;
  grid-template-columns:0.72fr 1.12fr;
  gap:clamp(32px, 6vw, 78px);
  align-items:start;
}
.apropos-fig{ margin:0; position:sticky; top:110px }
.apropos-fig img{
  width:100%; height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-m);
}
.apropos-txt p{ max-width:36rem }
.apropos-txt .lead{ margin-bottom:1.4rem }

.valeurs{
  font-size:var(--t-s);
  color:var(--mauve-ink);
  font-weight:600;
  border-top:1px solid var(--rule);
  padding-top:1.2rem;
  margin-top:1.6rem;
}

.form-t{
  font-family:var(--sans);
  font-size:var(--t-b);
  font-weight:600;
  margin:1.8rem 0 .8rem;
}
.form{ list-style:none; margin:0 0 1.4rem; padding:0; max-width:36rem }
.form li{
  font-size:var(--t-s);
  padding:.6rem 0;
  display:grid;
  grid-template-columns:3.6rem 1fr;
  gap:1rem;
  border-bottom:1px solid var(--rule);
}
.form li:last-child{ border-bottom:0 }
.an{ font-weight:600; color:var(--mauve-ink) }

.signature{ width:auto; height:60px; object-fit:contain; margin-top:2rem; opacity:.95 }

/* ------------------------------------------------------------------ avis */
.avis{ padding-block:clamp(56px, 8vw, 100px) }
.avis .s-title{ margin-bottom:clamp(30px,4vw,46px) }

.avis-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,4vw,44px) clamp(32px,5vw,64px);
}
.avis-grid figure{ margin:0 }
.avis-grid blockquote{ margin:0 }
.avis-grid blockquote p{
  font-family:var(--serif);
  font-size:var(--t-m);
  font-weight:300;
  font-style:italic;
  line-height:1.55;
  color:var(--ink);
  max-width:34rem;
  margin:0;
}
.avis-grid figcaption{
  font-size:var(--t-s);
  font-weight:600;
  color:var(--mauve-ink);
  margin-top:.9rem;
  padding-top:.7rem;
  border-top:1px solid var(--mauve-2);
  max-width:6rem;
}

/* ----------------------------------------------------------- rendez-vous */
.rdv{
  background:var(--mauve-4);
  border-top:1px solid var(--rule);
  padding-block:clamp(56px, 8vw, 100px);
}
.rdv .s-intro{ margin-bottom:clamp(28px,4vw,44px) }
.rdv .s-intro a{ color:var(--mauve-ink); text-decoration:none; border-bottom:1px solid var(--mauve-2) }

/* Le widget Sanordv dessine déjà sa propre carte blanche : on ne l'emboîte pas
   dans une seconde carte, on lui donne seulement le rayon du site et on réserve
   la place pour éviter le saut de mise en page au chargement. */
.rdv-widget{
  background:var(--paper);
  border-radius:var(--r-m);
  overflow:hidden;
  min-height:600px;
}
.rdv-widget #sanordv-booking-widget{ min-height:600px }
.rdv-widget iframe{ display:block; width:100%; border:0 }
.rdv-fallback{ font-size:var(--t-s); color:var(--ink-2); max-width:36rem; padding:20px 4px }
.rdv-fallback a{ color:var(--mauve-ink) }

/* --------------------------------------------------------------- contact */
.contact{
  background:var(--green-2);
  border-top:1px solid var(--green);
  padding-block:clamp(56px, 8vw, 100px);
}
.contact-in{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5vw, 70px);
  align-items:stretch;
}
.contact .s-title{ max-width:20ch }
.contact .lead{ margin-bottom:1.8rem; max-width:32rem }

.coord{ margin:0 0 2rem; display:grid; grid-template-columns:9rem 1fr; gap:0 }
.coord dt{
  font-size:var(--t-xs);
  font-weight:600;
  color:var(--ink-2);
  padding:.85rem 1.4rem .85rem 0;
  border-top:1px solid var(--green);
}
.coord dd{
  margin:0;
  font-size:var(--t-s);
  padding:.85rem 0;
  border-top:1px solid var(--green);
}
.coord dd a{ color:var(--mauve-ink); text-decoration:none; border-bottom:1px solid var(--mauve-2) }
.coord dd a:hover{ border-bottom-color:var(--mauve-ink) }

.contact-act{ display:flex; flex-wrap:wrap; gap:14px }

.contact-map{ border-radius:var(--r-m); overflow:hidden; background:var(--beige) }
.contact-map iframe{ display:block; width:100%; height:100%; min-height:420px; border:0 }

/* ----------------------------------------------------------- pied de page */
.site-foot{
  background:var(--paper);
  border-top:1px solid var(--rule);
  padding-block:clamp(44px, 6vw, 70px) clamp(26px,4vw,38px);
}
.foot-in{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:clamp(28px,4vw,54px);
  align-items:start;
}
.foot-brand img{ width:auto; height:38px; object-fit:contain; margin-bottom:1rem }
.foot-brand p{ font-size:var(--t-s); line-height:1.7; color:var(--ink-2); margin:0 }

.foot-nav ul, .foot-legal ul{ list-style:none; margin:0; padding:0 }
.foot-nav li, .foot-legal li{ margin-bottom:.5rem }
.foot-nav a, .foot-legal a{
  font-size:var(--t-s); color:var(--ink); text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot-legal a{ color:var(--ink-2) }
.foot-nav a:hover, .foot-legal a:hover{ border-bottom-color:var(--mauve) }

.foot-fine{
  grid-column:1 / -1;
  margin:clamp(22px,3vw,34px) 0 0;
  padding-top:1.3rem;
  border-top:1px solid var(--rule);
  font-size:var(--t-xs);
  color:var(--ink-2);
}
.foot-fine span{ display:block; max-width:36rem }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px){
  .hero-in{ grid-template-columns:1fr 0.72fr }
  .outils-in{ grid-template-columns:0.66fr 1fr }
  .foot-in{ grid-template-columns:1fr 1fr }
  .foot-brand{ grid-column:1 / -1 }
}

@media (max-width: 1040px){
  .bienfaits-in{ grid-template-columns:1fr; gap:30px }
  .bienfaits-fig{ position:static; max-width:440px }
  .motifs{ columns:2 }
}

@media (max-width: 1040px){
  .burger{ display:flex }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:8px clamp(20px,5vw,52px) 22px;
  }
  .nav.is-open{ display:flex }
  .nav ul{ flex-direction:column; gap:0 }
  .nav li{ border-bottom:1px solid var(--rule) }
  .nav a{ display:block; padding:14px 0; font-size:var(--t-b) }
  .nav a:hover{ border-bottom-color:transparent; color:var(--mauve-ink) }
  .nav-cta{ margin-top:18px; text-align:center }

  .hero-in{ grid-template-columns:1fr; gap:32px }
  .hero-fig{ order:-1 }
  .hero-fig img{ aspect-ratio:4/3 }
  .hero h1{ max-width:20ch }

  .reperes-in{ grid-template-columns:1fr; gap:18px }

  .outils-in{ grid-template-columns:1fr; gap:34px }
  .outils-lede{ position:static }
  .boussole{ max-width:180px }

  .approche-grid{ grid-template-columns:1fr }

  .voie-in{ grid-template-columns:1fr; gap:22px }
  .voie-alt .voie-fig{ order:0 }

  .menu{ columns:1 }

  .apropos-in{ grid-template-columns:1fr; gap:30px }
  .apropos-fig{ position:static; max-width:420px }
  .apropos-fig{ order:-1 }

  .avis-grid{ grid-template-columns:1fr }
  .contact-in{ grid-template-columns:1fr; gap:30px }
}

@media (max-width: 600px){
  :root{ --t-m:1.1875rem; --t-l:1.5rem }
  .head-in{ min-height:70px; gap:14px }
  .logo img{ height:32px }
  .motifs{ columns:1 }
  .coord{ grid-template-columns:1fr }
  .coord dt{ padding-bottom:0; padding-right:0 }
  .coord dd{ border-top:0; padding-top:.2rem }
  .form li{ grid-template-columns:1fr; gap:.1rem }
  .soins li{ gap:.35rem }
  .soin-p{ width:100% ; justify-content:space-between }
  .prix{ text-align:left }
}

@media (max-width: 600px){
  .rdv-widget{ min-height:720px }
  .rdv-widget #sanordv-booking-widget{ min-height:720px }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}

@media print{
  .site-head, .contact-map, .btn{ display:none }
  body{ font-size:11pt }
}