/* ==========================================================================
   L'Effet Bien-Être — accueil
   Charte reprise du site existant :
     bordeaux logo #834A4D · rose poudré #DDA49C · bleu lavande #D2D4E6 · blanc
   ========================================================================== */

:root{
  /* encres */
  --ink:      #5C3335;   /* 10.6:1 sur blanc  — titres et texte courant     */
  --ink-2:    #7A5658;   /*  6.4:1 sur blanc  — texte secondaire            */
  --brand:    #834A4D;   /*  6.9:1 sur blanc  — couleur exacte du logo      */

  /* surfaces */
  --paper:    #FFFFFF;
  --rose:     #DDA49C;
  --rose-2:   #EFC9C2;
  --rose-3:   #F6E7E3;
  --rose-4:   #FCF5F3;
  --lav:      #D2D4E6;
  --lav-2:    #E2E3EF;
  --lav-3:    #EDEEF5;

  /* filets */
  --rule:     #E8D5D1;
  --rule-2:   #D8C3BE;

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

  /* profondeur douce — teintée encre / bordeaux, jamais noire dure */
  --shadow-soft: 0 8px 28px rgba(92, 51, 53, 0.08);
  --shadow-lift: 0 14px 40px rgba(92, 51, 53, 0.11);
  --shadow-cta:  0 6px 20px rgba(131, 74, 77, 0.22);

  /* mouvement — une seule courbe pour tout le site */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* é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 */
  --t-3xl:  3.5rem;     /* 56 */

  --serif: "Marcellus", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  color-scheme:light;
  /* la gouttière est réservée en permanence : ouvrir la visionneuse ne décale plus la page */
  scrollbar-gutter:stable;
}

/* les ancres ne passent plus sous l'entête collante */
[id]{ scroll-margin-top:clamp(84px, 11vh, 118px) }

::selection{ background:var(--rose-2); color:var(--ink) }

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.16;
  letter-spacing:0.004em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.15em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }

body.is-locked{ overflow:hidden }

a{ color:var(--brand) }

sup{ font-size:0.62em; vertical-align:0.45em; line-height:0 }
.reg{ font-size:0.58em; vertical-align:0.42em; letter-spacing:0; white-space:nowrap }

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

:focus-visible{ outline:2px solid var(--brand); 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.02em;
  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,
             box-shadow .22s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn-solid{
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  box-shadow:var(--shadow-cta);
}
.btn-solid:hover{ background:var(--ink); border-color:var(--ink); box-shadow:var(--shadow-lift) }
.btn-line{ background:transparent; color:var(--brand); border:1px solid var(--rule-2) }
.btn-line:hover{ border-color:var(--brand); background:var(--rose-4); box-shadow:var(--shadow-soft) }

.lnk{
  font-size:var(--t-s);
  font-weight:600;
  color:var(--brand);
  text-decoration:none;
  border-bottom:1px solid var(--rose-2);
  padding-bottom:2px;
  transition:border-color .18s ease;
}
.lnk:hover{ border-bottom-color:var(--brand) }
.lnk::after{
  content:"→";
  display:inline-block;
  margin-left:.4em;
  transition:transform .3s var(--ease);
}
.lnk:hover::after{ transform:translateX(3px) }

/* code promo copiable */
.copy{
  font:inherit; color:inherit;
  display:inline-flex; align-items:baseline; gap:.55em;
  background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--r-s);
  padding:3px 10px; margin-inline:.15em; cursor:pointer; vertical-align:baseline;
  transition:border-color .18s ease, background-color .18s ease;
}
.copy:hover{ border-color:var(--brand) }
.copy-code{ font-weight:600; letter-spacing:.06em; color:var(--brand) }
.copy-lbl{ font-size:var(--t-xs); color:var(--ink-2) }
.copy.is-done{ border-color:var(--brand); background:var(--rose-4) }
.copy.is-done .copy-lbl{ color:var(--brand) }

/* ---------------------------------------------------------------- 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(92,51,53,.09); border-bottom-color:transparent }

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

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto }
.logo-mark{ width:52px; height:52px; object-fit:contain }
.logo-word{ width:auto; height:28px; object-fit:contain }

.nav{ margin-left:auto; display:flex; align-items:center; gap:26px }
.nav ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0 }
.nav a{
  position:relative;
  font-size:var(--t-s);
  color:var(--ink);
  text-decoration:none;
  padding-block:6px;
  transition:color .2s ease;
}
/* le filet rose signale la section survolée et la section en cours de lecture */
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rose);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease), background-color .2s ease;
}
.nav a:hover::after{ transform:scaleX(1) }
.nav a.is-current{ color:var(--brand) }
.nav a.is-current::after{ transform:scaleX(1); background:var(--brand) }
.nav .btn-solid{ color:#fff }
.nav .btn-line{ color:var(--brand) }
.nav .btn::after{ content:none }
.nav-cta{ padding:11px 20px }

.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;
  transition:border-color .18s ease;
}
.burger[aria-expanded="true"]{ border-color:var(--brand); color:var(--brand) }
.burger-bars, .burger-bars::before, .burger-bars::after{
  display:block; width:18px; height:1.5px; background:var(--ink); content:""; position:relative;
}
.burger-bars{ transition:background-color .2s ease }
.burger-bars::before, .burger-bars::after{
  transition:top .28s var(--ease), transform .28s var(--ease), background-color .2s ease;
}
.burger-bars::before{ top:-6px } .burger-bars::after{ top:4.5px }
/* les trois barres se replient en croix quand le menu est ouvert */
.burger[aria-expanded="true"] .burger-bars{ background:transparent }
.burger[aria-expanded="true"] .burger-bars::before{ top:0; transform:rotate(45deg); background:var(--brand) }
.burger[aria-expanded="true"] .burger-bars::after{ top:-1.5px; transform:rotate(-45deg); background:var(--brand) }

/* ------------------------------------------------------------------ hero
   Plan plein cadre : la photo est le lieu ; le voile rosé ouvre la lecture
   à gauche comme on entre dans le cabinet. */
.hero{
  position:relative;
  min-height:clamp(560px, 88vh, 900px);
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:var(--rose-4);
}

.hero-media{
  position:absolute;
  inset:0;
  margin:0;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:72% 28%;
}
/* voile continu : zone de lecture opaque à gauche, fondu doux vers la photo
   — pas de panneau flottant */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      95deg,
      #FCF5F3 0%,
      #FCF5F3 38%,
      rgba(252, 245, 243, 0.97) 46%,
      rgba(246, 231, 227, 0.82) 54%,
      rgba(246, 231, 227, 0.45) 62%,
      rgba(221, 164, 156, 0.18) 72%,
      transparent 86%
    );
  transform-origin:bottom left;
}

.hero-in{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:100%;
  padding-block:clamp(56px, 9vh, 120px);
}

.hero-txt{
  max-width:34rem;
  padding:0;
  background:none;
  box-shadow:none;
  border-radius:0;
}

.hero-brand{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  color:var(--brand);
  margin:0 0 .35rem;
  line-height:1.2;
  letter-spacing:0.002em;
}
.hero-name{
  font-family:var(--sans);
  font-size:var(--t-s);
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ink-2);
  margin:0 0 1rem;
  line-height:1.3;
}
.hero h1{
  font-size:clamp(2.25rem, 5.4vw, 3.65rem);
  letter-spacing:-0.02em;
  margin:0 0 1.15rem;
  max-width:15ch;
  color:var(--ink);
}
.hero .lead{
  max-width:32rem;
  color:var(--ink);
  font-weight:400;
}

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

/* bouton ligne : fond rose-4 uni, sans ombre de carte */
.hero .btn-line{
  background:var(--rose-4);
  border-color:var(--rule-2);
  box-shadow:none;
}
.hero .btn-line:hover{
  background:var(--rose-3);
  border-color:var(--brand);
}

.hero-meta{
  font-size:var(--t-s);
  color:var(--ink);
  padding-top:.35rem;
  max-width:46ch;
  line-height:1.55;
}
.hero-meta a{
  color:var(--brand);
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid var(--rose-2);
}

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

/* --------------------------------------------------------------- l'arrivée
   La page s'installe comme on entre dans le cabinet — le voile se pose,
   la photo respire, le texte arrive. */
@media (prefers-reduced-motion: no-preference){
  .hero-brand, .hero-name, .hero h1, .hero .lead, .hero-act, .hero-meta{
    animation:pose .9s var(--ease) backwards;
  }
  .hero-name  { animation-delay:.05s }
  .hero h1    { animation-delay:.1s }
  .hero .lead { animation-delay:.16s }
  .hero-act   { animation-delay:.22s }
  .hero-meta  { animation-delay:.28s }

  .hero-media img{ animation:devoile 1.25s var(--ease) backwards }
  .hero-media::after{ animation:voile 1.55s var(--ease) .2s backwards }
}

@keyframes pose{
  from{ opacity:0; transform:translateY(14px) }
}
@keyframes devoile{
  from{ opacity:0; transform:scale(1.04) }
  to{ opacity:1; transform:scale(1) }
}
@keyframes voile{
  from{ opacity:0 }
  to{ opacity:1 }
}

/* ------------------------------------------------------------- trois faits */
.facts{
  background:
    linear-gradient(180deg, var(--lav-3) 0%, #f3f3f8 100%);
  padding-block:clamp(36px, 5vw, 56px);
}
.facts-in{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px);
}
.facts p{
  margin:0; font-size:var(--t-s); line-height:1.65; color:var(--ink);
}
.facts b{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:var(--t-m); line-height:1.25; color:var(--brand);
  margin-bottom:.45rem;
}

/* ------------------------------------------------------- titres de section */
.s-title{
  font-size:clamp(1.6875rem, 3.4vw, 2.75rem);
  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:40rem;
  margin-bottom:0;
}

/* -------------------------------------------------------------- pratiques */
.pratiques{ padding-block:clamp(56px, 8vw, 108px) clamp(20px,3vw,40px) }
.pratiques > .wrap:first-child{ margin-bottom:clamp(40px,6vw,72px) }

.prat{ padding-block:clamp(26px,4vw,44px) }
.prat-in{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(28px, 5vw, 68px);
  align-items:center;
}
.prat-alt .prat-fig{ order:2 }

.prat-fig{ margin:0 }
.prat-fig img{
  width:100%; height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--r-m);
}
/* la photo Access Bars est cadrée haut : on remonte le point de mire */
.prat-fig img.fig-haut{ object-position:50% 20% }
.prat-txt h3{ font-size:var(--t-l); margin:0 0 .75rem }
.prat-txt p{ max-width:36rem }
.prat-meta{
  font-size:var(--t-s);
  color:var(--ink-2);
  padding-top:.9rem;
  margin-bottom:1rem;
}

/* ----------------------------------------------------------------- tarifs
   Carte de soins : familles en panneaux papier, ligne entière cliquable,
   prix en pastille bordeaux douce. */
.tarifs{
  background:
    linear-gradient(180deg, var(--rose-4) 0%, #fff8f6 48%, var(--rose-4) 100%);
  padding-block:clamp(60px, 8vw, 110px);
  margin-top:0;
}
.tarifs .s-intro{ margin-bottom:clamp(38px,5vw,60px) }

.menu{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(28px,4vw,48px);
  row-gap:clamp(22px,3vw,32px);
  align-items:start;
}
.menu-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(22px,3vw,32px);
}

.menu-grp{
  margin:0;
  padding:clamp(22px, 2.8vw, 32px);
  border-radius:var(--r-m);
  background:rgba(255, 255, 255, 0.88);
  box-shadow:var(--shadow-soft);
}
.menu-grp-soft{
  background:rgba(237, 238, 245, 0.92);
}

.grp-t{
  font-size:var(--t-l);
  line-height:1.2;
  color:var(--brand);
  margin:0 0 .15rem;
  max-width:18ch;
}
.grp-note{
  font-size:var(--t-xs);
  color:var(--ink-2);
  margin:.35rem 0 0;
}

.soins{
  list-style:none;
  margin:1.15rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.soins li{ margin:0; padding:0; border:0 }

.soin{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:.55rem 1rem;
  padding:14px 14px;
  margin:0 -6px;
  border-radius:var(--r-s);
  text-decoration:none;
  color:inherit;
  transition:background-color .22s ease, box-shadow .22s var(--ease), transform .22s var(--ease);
}
.soin:hover,
.soin:focus-visible{
  background:var(--rose-4);
  box-shadow:var(--shadow-soft);
}
@media (prefers-reduced-motion: no-preference){
  .soin:hover,
  .soin:focus-visible{ transform:translateX(3px) }
}
.menu-grp-soft .soin:hover,
.menu-grp-soft .soin:focus-visible{
  background:rgba(255, 255, 255, 0.72);
}

.soin-main{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
}
.soin-name{
  font-weight:600;
  font-size:var(--t-b);
  color:var(--ink);
  line-height:1.3;
  transition:color .18s ease;
}
.soin:hover .soin-name,
.soin:focus-visible .soin-name{ color:var(--brand) }

.soin-d{
  font-size:var(--t-s);
  font-weight:300;
  color:var(--ink-2);
  line-height:1.45;
  max-width:42ch;
}

.soin-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  flex:0 0 auto;
}
.dur{
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--ink-2);
}
.dur::after{ content:none }
.prix{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--t-m);
  line-height:1;
  color:var(--brand);
  background:var(--rose-3);
  padding:7px 12px;
  border-radius:var(--r-s);
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(131, 74, 77, 0.06);
}
.soin:hover .prix,
.soin:focus-visible .prix{
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-cta);
}

/* ----------------------------------------------------------------- offres */
.offres{ padding-block:clamp(60px, 8vw, 108px) }
.offres-in{ display:grid; grid-template-columns:1fr; gap:clamp(34px,4vw,52px) }
.offres .s-title{ margin-bottom:0 }

.forfaits{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:clamp(22px,3vw,36px);
  align-items:start;
}
.forf{
  padding:clamp(24px,3vw,34px);
  border-radius:var(--r-m);
  background:var(--lav-3);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .28s var(--ease), transform .28s var(--ease);
}
.forf-plus{
  background:var(--rose-3);
  box-shadow:var(--shadow-lift);
}
@media (prefers-reduced-motion: no-preference){
  .forf:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px) }
}
.forf-n{ font-family:var(--serif); font-size:var(--t-l); margin:0 0 .35rem }
.forf-px{ margin:0 0 .7rem; font-size:var(--t-m) }
.forf-px b{ font-weight:600; color:var(--brand); font-size:var(--t-l) }
.forf-px s{ color:var(--ink-2); font-size:var(--t-s); margin-left:.4rem }
.forf p:last-child{ font-size:var(--t-s); max-width:40ch }

.forf-note{
  grid-column:1 / -1;
  font-size:var(--t-s);
  color:var(--ink-2);
  max-width:34rem;
  margin:0;
}

.cadeau{
  padding-top:clamp(30px,4vw,44px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px clamp(30px,5vw,64px);
  align-items:start;
}
.cadeau h3{ font-size:var(--t-l); grid-row:span 3; max-width:9ch }
.cadeau p{ max-width:36rem; margin-bottom:1rem }
.promo{
  font-size:var(--t-s);
  color:var(--ink);
  background:var(--rose-3);
  border-radius:var(--r-s);
  padding:11px 16px;
  display:inline-block;
  margin:.4rem 0 0;
  box-shadow:var(--shadow-soft);
}
.promo b{ font-weight:600 }

/* ----------------------------------------------------------------- séance */
.seance{
  background:
    linear-gradient(180deg, var(--lav-3) 0%, #f7f7fb 100%);
  padding-block:clamp(60px, 8vw, 108px);
}
.seance-in{
  display:grid;
  grid-template-columns:1.35fr 0.75fr;
  gap:clamp(34px, 6vw, 84px);
  align-items:start;
}
.seance .s-title{ margin-bottom:clamp(28px,4vw,44px) }

.etape{ margin-bottom:1.9rem }
.etape h3{
  font-size:var(--t-m);
  color:var(--brand);
  margin:0 0 .3rem;
}
.etape p{ max-width:38rem }

.contre{
  margin-top:2.4rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(210, 212, 230, 0.65);
}
.contre h3{ font-size:var(--t-b); font-family:var(--sans); font-weight:600; margin:0 0 .5rem }
.contre p{ font-size:var(--t-s); color:var(--ink-2); max-width:34rem }

.seance-fig{ margin:0; position:sticky; top:110px }
.seance-fig img{
  width:100%; height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--r-m);
  box-shadow:var(--shadow-lift);
}
.seance-fig figcaption{
  font-size:var(--t-xs);
  color:var(--ink-2);
  margin-top:.7rem;
}

/* ---------------------------------------------------------------- Laurence */
.apropos{ padding-block:clamp(60px, 8vw, 112px) }
.apropos-in{
  display:grid;
  grid-template-columns:0.78fr 1.15fr;
  gap:clamp(32px, 6vw, 80px);
  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;
  /* arche reprise de la courbe ouverte du logo dessiné */
  border-radius:48% 48% var(--r-m) var(--r-m) / 30% 30% var(--r-m) var(--r-m);
  box-shadow:var(--shadow-lift);
}
.apropos-txt p{ max-width:38rem }
.apropos-txt .lead{ margin-bottom:1.3rem }

.form-t{
  font-family:var(--sans);
  font-size:var(--t-b);
  font-weight:600;
  margin:2.2rem 0 .9rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(232, 213, 209, 0.55);
}
.form{ list-style:none; margin:0; padding:0; max-width:36rem }
.form li{
  font-size:var(--t-s);
  padding:.6rem 0;
  display:grid;
  grid-template-columns:4.5rem 1fr;
  gap:1rem;
  border-bottom:1px solid rgba(232, 213, 209, 0.45);
}
.form li:last-child{ border-bottom:0 }
.an{ font-weight:600; color:var(--brand) }

/* ---------------------------------------------------------------- galerie */
.galerie{
  background:
    linear-gradient(180deg, var(--rose-4) 0%, #fff6f3 100%);
  padding-block:clamp(60px, 8vw, 108px);
}
.galerie .s-intro{ margin-bottom:clamp(34px,5vw,52px) }

.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:168px;
  grid-auto-flow:dense;
  gap:14px;
}
.ph{
  position:relative;
  padding:0; border:0; margin:0; cursor:pointer; overflow:hidden;
  border-radius:var(--r-m);
  background:var(--rose-3);
  grid-row:span 1;
  box-shadow:var(--shadow-soft);
}
.ph-tall{ grid-row:span 2 }
.ph-wide{ grid-column:span 2 }
.ph img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
/* voile bordeaux + libellé : la photo dit qu'elle s'ouvre, sans contour dur */
.ph::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(131,74,77,.42), rgba(131,74,77,0) 58%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
/* pastille pleine plutôt que texte sur dégradé : le contraste tient sur
   toutes les photos, y compris les plus claires */
.ph::before{
  content:"Agrandir";
  position:absolute; z-index:2; left:12px; bottom:10px;
  background:var(--brand); color:#fff;
  font-family:var(--sans); font-size:var(--t-xs); font-weight:600; line-height:1;
  padding:6px 11px; border-radius:var(--r-s);
  opacity:0; transform:translateY(5px);
  transition:opacity .35s ease, transform .35s var(--ease);
  pointer-events:none;
}
.ph:hover img, .ph:focus-visible img{ transform:scale(1.05) }
.ph:hover::after, .ph:focus-visible::after{ opacity:1 }
.ph:hover::before, .ph:focus-visible::before{ opacity:1; transform:translateY(0) }

/* ------------------------------------------------------------------- avis */
.avis{ padding-block:clamp(56px, 7vw, 96px) }
.avis .s-title{ margin-bottom:clamp(26px,4vw,40px) }
/* espace réservé : le widget d'avis n'écarte plus la page en s'affichant */
.avis-embed{ min-height:300px }

/* ------------------------------------------------------------- réservation */
.reserver{
  background:
    linear-gradient(180deg, #fff8f6 0%, var(--rose-4) 100%);
  padding-block:clamp(60px, 8vw, 108px);
}
.reserver .s-intro{ margin-bottom:clamp(30px,4vw,46px) }
.reserver .s-intro a{ color:var(--brand); text-decoration:none; border-bottom:1px solid var(--rose-2) }
.reserver .s-intro a:hover{ border-bottom-color:var(--brand) }
/* espace réservé pour l'agenda SanoRDV : l'iframe arrive à 520 px de haut,
   la place est tenue d'avance pour que la page ne saute pas */
.rdv{ min-height:520px }

/* ------------------------------------------------------------------ venir */
.venir{
  background:
    linear-gradient(180deg, var(--lav-3) 0%, #f4f4f9 100%);
  padding-block:clamp(60px, 8vw, 108px);
}
.venir-in{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:stretch;
}
.venir .lead{ margin-bottom:1.8rem; max-width:48ch }

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

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

.venir-map{
  border-radius:var(--r-m);
  overflow:hidden;
  background:var(--lav-2);
  box-shadow:var(--shadow-soft);
}
.venir-map iframe{
  display:block; width:100%; height:100%; min-height:430px; border:0;
}

/* ------------------------------------------------------------- pied de page */
.site-foot{
  background:var(--paper);
  padding-block:clamp(44px, 6vw, 72px) clamp(28px,4vw,40px);
}
.foot-in{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.foot-brand{ display:flex; gap:16px; align-items:flex-start }
.foot-mark{ width:56px; height:56px; object-fit:contain; flex:0 0 auto }
.foot-brand p{ font-size:var(--t-s); line-height:1.7; color:var(--ink-2); margin:0 }
.foot-brand b{ color:var(--ink); font-weight:600 }

.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(--rose) }

.foot-fine{
  grid-column:1 / -1;
  margin:clamp(24px,3vw,36px) 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:32rem }

/* --------------------------------------------------------------- lightbox */
.lb{
  position:fixed; inset:0; z-index:80;
  background:rgba(50,28,29,.94);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(52px,7vw,80px) clamp(16px,5vw,72px);
}
.lb[hidden]{ display:none }
.lb{ animation:fondu .3s ease }
@keyframes fondu{ from{ opacity:0 } }

.lb-fig{ margin:0; max-width:min(94vw, 900px); text-align:center }
.lb-fig img{
  max-width:100%; max-height:76vh; width:auto; height:auto;
  margin-inline:auto; border-radius:var(--r-m);
}
.lb-fig img.is-in{ animation:photo .45s var(--ease) }
@keyframes photo{ from{ opacity:0; transform:scale(.985) } }
.lb-fig figcaption{ color:#F6E7E3; font-size:var(--t-s); margin-top:.9rem }

.lb-count{
  position:absolute; top:24px; left:22px; margin:0;
  color:rgba(246,231,227,.72);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

.lb-x{
  position:absolute; top:18px; right:18px;
  background:none; border:1px solid rgba(246,231,227,.5); border-radius:var(--r-s);
  color:#F6E7E3; font-family:var(--sans); font-size:var(--t-s); font-weight:600;
  padding:9px 16px; cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.lb-x:hover{ border-color:#F6E7E3; background:rgba(246,231,227,.1) }
.lb-nav{
  position:absolute; top:50%;
  background:none; border:0; color:#F6E7E3;
  font-size:3rem; line-height:1; padding:14px 18px; cursor:pointer;
  transform:translateY(-50%);
  transition:color .18s ease, transform .28s var(--ease);
}
.lb-prev{ left:6px } .lb-next{ right:6px }
.lb-nav:hover{ color:#fff }
.lb-prev:hover{ transform:translate(-3px, -50%) }
.lb-next:hover{ transform:translate(3px, -50%) }
.lb :focus-visible{ outline-color:#F6E7E3 }

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

@media (max-width: 900px){
  .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;
    box-shadow:var(--shadow-soft);
  }
  .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) }
  /* en pile, le filet du li fait déjà la séparation : on retire le soulignement */
  .nav a::after{ content:none }
  .nav a:hover{ color:var(--brand) }
  .nav a.is-current{ color:var(--brand) }
  .nav-cta{ margin-top:18px; text-align:center }

  .hero{
    min-height:auto;
    display:block;
  }
  .hero-media{
    position:relative;
    height:min(52vh, 440px);
  }
  .hero-media img{
    object-position:70% 22%;
  }
  .hero-media::after{
    background:
      linear-gradient(
        to top,
        var(--rose-4) 0%,
        rgba(252, 245, 243, 0.55) 28%,
        rgba(221, 164, 156, 0.12) 55%,
        transparent 78%
      );
  }
  .hero-in{
    padding-block:8px clamp(40px, 7vw, 64px);
  }
  .hero-txt{
    max-width:none;
    padding:0;
    background:none;
    box-shadow:none;
    border-radius:0;
  }
  .hero h1{ max-width:18ch }

  .facts-in{ grid-template-columns:1fr; gap:22px }

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

  /* En pile, les colonnes s'effacent et les familles reprennent l'ordre de
     lecture : massages d'abord, puis lecture énergétique et Access Bars. */
  .menu{ display:flex; flex-direction:column; gap:clamp(18px,3vw,24px) }
  .menu-col{ display:contents }
  .menu-col:nth-child(1) .menu-grp:nth-child(1){ order:1 }
  .menu-col:nth-child(1) .menu-grp:nth-child(2){ order:2 }
  .menu-col:nth-child(2) .menu-grp:nth-child(1){ order:3 }
  .menu-col:nth-child(1) .menu-grp:nth-child(3){ order:4 }
  .menu-col:nth-child(2) .menu-grp:nth-child(2){ order:5 }

  .soin{ padding:12px 10px; margin:0 -4px }

  .forfaits{ grid-template-columns:1fr }
  .cadeau{ grid-template-columns:1fr; gap:14px }
  .cadeau h3{ grid-row:auto; max-width:none }

  .seance-in, .apropos-in, .venir-in{ grid-template-columns:1fr; gap:32px }
  .seance-fig, .apropos-fig{ position:static; max-width:460px }
  .apropos-fig{ order:-1 }

  .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px }
  .ph-wide{ grid-column:span 2 }
}

@media (max-width: 560px){
  :root{ --t-m:1.1875rem; --t-l:1.5rem }
  .head-in{ min-height:70px; gap:14px }
  .logo-word{ height:23px }
  .logo-mark{ width:44px; height:44px }
  .coord{ grid-template-columns:1fr; gap:0 }
  .coord dt{ padding-bottom:0; border-top:1px solid var(--lav) }
  .coord dd{ border-top:0; padding-top:.2rem }
  .form li{ grid-template-columns:1fr; gap:.1rem }
  .prix{ font-size:var(--t-b); padding:6px 10px }
  .grid{ grid-auto-rows:132px; gap:10px }
  .lb-nav{ font-size:2.2rem }
  .lb-count{ top:20px; left:16px }
}

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

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