/* ==========================================================================
   Elsa · Naturopathe — feuille de style unique
   ========================================================================== */

/* ============ POLICES (auto-hebergees) ============
   Sous-ensemble latin de Schibsted Grotesk et Hanken Grotesk, servi depuis
   ce serveur. Les polices ne sont plus chargees depuis Google : aucune
   adresse IP de visiteur n'est transmise a un tiers a l'affichage.
   Licence SIL Open Font 1.1 pour les deux familles — voir assets/fonts/LICENCE.txt
   ========================================================== */
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/schibsted-grotesk-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/schibsted-grotesk-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/schibsted-grotesk-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/schibsted-grotesk-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ TOKENS ============ */
:root{
  --font-display:"Schibsted Grotesk", "Segoe UI", sans-serif;
  --font-body:"Hanken Grotesk", "Segoe UI", sans-serif;

  --bg:#F4EEE2;
  --surface:#FCFAF4;
  --surface-2:#EFE8D9;
  --ink:#1D2E23;
  --muted:#5E6B60;
  --brand:#234A36;
  --brand-2:#16271C;
  --on-brand:#F2EDE0;
  --accent:#B98D3F;
  --accent-soft:#E7D6AE;
  --line:#E3DCCB;

  --brand-08:rgba(35,74,54,.08);
  --brand-12:rgba(35,74,54,.12);
  --bg-blur:rgba(244,238,226,.85);
  --surface-84:rgba(252,250,244,.84);
  --on-brand-18:rgba(242,237,224,.18);
  --on-brand-60:rgba(242,237,224,.6);

  --shadow:0 24px 60px -28px rgba(28,46,35,.32);
  --shadow-sm:0 12px 30px -18px rgba(28,46,35,.30);

  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--accent-soft);color:var(--ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============ LAYOUT ============ */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.section{padding:120px 0}
.section--surface{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section--flush-top{padding-top:0}
/* Une section « flush-top » vient se coller au bloc precedent. Quand celui-ci
   est une section teintee, la carte se retrouve plaquee sur la limite entre les
   deux fonds : on redonne alors de l'air au-dessus. */
.section--surface + .section--flush-top{padding-top:80px}
.center{text-align:center}
.stack-narrow{max-width:640px;margin:0 auto 56px}

.eyebrow{
  text-transform:uppercase;letter-spacing:.28em;
  font-size:12px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.eyebrow--center{justify-content:center}

.lead{font-size:19px;color:var(--muted);max-width:60ch}
.lead--center{margin-left:auto;margin-right:auto}

.title-xl{font-size:clamp(40px,5.4vw,72px)}
.title-lg{font-size:clamp(38px,5vw,64px)}
.title-md{font-size:clamp(28px,3.4vw,42px)}
.title-sm{font-size:clamp(26px,3vw,38px)}
.em{font-style:italic;font-weight:500;color:var(--accent)}

/* ============ ICONES ============ */
.icon{width:24px;height:24px;flex:none}
.icon--accent{color:var(--accent)}

/* ============ BOUTONS ============ */
.btn{
  font-weight:600;font-size:15px;
  border:none;cursor:pointer;
  padding:15px 28px;border-radius:999px;
  display:inline-flex;align-items:center;gap:10px;
  transition:transform .35s var(--ease),box-shadow .35s,background .3s,color .3s,border-color .3s;
}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#1c1303}
.btn-accent:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn .arrow{transition:transform .35s}
.btn:hover .arrow{transform:translateX(4px)}

/* ============ NAVBAR ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:26px 0;border-bottom:1px solid transparent;
  transition:background .4s ease,box-shadow .4s,padding .4s,border-color .4s;
}
.nav.is-scrolled{
  background:var(--bg-blur);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  padding:16px 0;
  border-bottom-color:var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}

.brand{display:flex;align-items:center;gap:12px}
/* Le logo est encapsule dans un <picture>, qui devient l'element flex :
   c'est lui qui doit porter le flex:none, sinon il se comprime. */
.brand picture{display:block;flex:none}
.brand-mark{width:38px;height:38px;flex:none;color:var(--brand)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em}
.brand-sub{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:3px}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{
  padding:9px 16px;border-radius:999px;
  font-size:15px;font-weight:500;
  transition:color .3s,background .3s;
}
.nav-link:hover{color:var(--accent)}
.nav-link[aria-current="page"]{color:var(--brand);background:rgba(35,74,54,.09)}
.nav-cta{margin-left:14px}

.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink)}
.nav-burger .icon{display:block;width:26px;height:26px}
.nav-burger .icon-close{display:none}
.nav-burger[aria-expanded="true"] .icon-open{display:none}
.nav-burger[aria-expanded="true"] .icon-close{display:block}

.mobile-menu{display:none}

/* ============ REVELATION AU SCROLL ============ */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.page{animation:pageIn .7s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .page{animation:none}
  .btn:hover,.btn:hover .arrow{transform:none}
}

/* ============ ATOMES ============ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);
  padding:8px 14px;border-radius:999px;
}
.tag .icon{width:15px;height:15px}
.chip{
  font-size:12.5px;font-weight:500;color:var(--brand);
  background:var(--brand-08);padding:5px 11px;border-radius:999px;
}

.arch{
  border-radius:140px 140px 24px 24px;
  overflow:hidden;position:relative;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
/* <picture> est un conteneur en ligne : sans display:block, le height:100%
   de l'image se resoudrait contre une hauteur automatique. */
.arch picture{display:block;width:100%;height:100%}
.arch img{width:100%;height:100%;object-fit:cover}

.sprig{position:absolute;color:var(--brand);pointer-events:none;opacity:.13}
.sprig--flip{transform:scaleX(-1)}
.sprig--left{top:120px;left:-40px;opacity:.1}
.sprig--right{top:120px;right:-30px;opacity:.1}
.list-reset{list-style:none;margin:0;padding:0}

.icon-tile{
  flex:none;width:62px;height:62px;border-radius:18px;
  background:var(--accent-soft);
  display:grid;place-items:center;color:var(--brand);
}
.icon-tile .icon{width:28px;height:28px}
.icon-tile--sm{width:42px;height:42px;border-radius:12px}
.icon-tile--sm .icon{width:20px;height:20px}

/* ============ HERO ============ */
.hero{position:relative;padding:170px 0 90px;overflow:hidden}
.hero .sprig{top:120px;right:-30px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{margin-top:22px}
.hero .lead{margin-top:26px}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

.stats{display:flex;gap:30px;margin-top:46px;flex-wrap:wrap}
.stat-value{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--brand)}
.stat-label{font-size:13px;color:var(--muted)}

.hero-media img{height:520px}
.hero-caption{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.hero-caption .icon{width:22px;height:22px;color:var(--accent)}
.hero-caption span{font-size:14px;color:var(--muted);letter-spacing:.04em}

/* hero centré (pages intérieures) */
.hero--centered{padding:165px 0 70px;text-align:center}
.hero--centered .hero-inner{position:relative;max-width:760px;margin:0 auto}
.hero--centered h1{margin-top:20px}
.hero--centered .lead{margin:22px auto 0}

/* ============ BANDEAU VALEURS ============ */
.values{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.values-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.value{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px}
.value .icon{width:18px;height:18px;color:var(--accent)}

/* ============ PRESENTATION ============ */
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}
.about-media{position:relative}
.about-media .arch{border-radius:0}
.about-media img{height:480px}
.about-leaf{position:absolute;bottom:-26px;left:-26px;width:70px;height:70px;color:var(--accent);opacity:.5}
.about-body h2{margin-top:18px}
.about-body p{margin-top:22px;font-size:17px;color:var(--muted)}
.about-body p + p{margin-top:16px}
.tag-row{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.about-body .btn{margin-top:30px}

/* ============ GRILLES ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.method-card{padding:38px 32px}
.method-card h3{font-size:22px;margin-top:24px}
.method-card p{margin-top:12px;color:var(--muted);font-size:15.5px}
.grid-cta{text-align:center;margin-top:46px}

/* témoignages */
.quote{padding:34px 30px;margin:0}
.quote-mark{color:var(--accent);font-size:30px;font-family:var(--font-display);line-height:.6}
.quote blockquote{margin:14px 0 0;font-size:16.5px;line-height:1.6}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:24px}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--accent-soft);display:grid;place-items:center;
  color:var(--brand);font-weight:600;font-family:var(--font-display);
}
.quote-name{display:block;font-weight:600;font-size:15px}
.quote-city{display:block;font-size:13px;color:var(--muted)}

/* ============ CTA ============ */
.cta{
  position:relative;overflow:hidden;
  background:var(--brand);color:var(--on-brand);
  border-radius:36px;padding:72px 64px;text-align:center;
}
.cta .sprig{opacity:.16;color:var(--on-brand)}
.cta .sprig--tl{top:-30px;left:-20px}
.cta .sprig--br{bottom:-40px;right:-10px}
.cta-inner{position:relative}
.cta .icon-leaf-lg{display:block;width:40px;height:40px;margin:0 auto;color:var(--accent)}
.cta h2{margin-top:18px;color:var(--on-brand)}
.cta p{margin:16px auto 0;max-width:52ch;opacity:.85;font-size:18px}
.cta .btn{margin-top:30px}

.cta--split{
  display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;text-align:left;padding:64px 56px;
}
.cta--split .cta-inner{flex:1 1 420px}
.cta--split p{margin:12px 0 0;font-size:17px}
.cta--split .btn{margin-top:0;position:relative}

/* ============ PAGE METHODES ============ */
.practices{padding-bottom:30px}
.section--steps{margin-top:60px}
.practice{padding:40px 38px;display:flex;gap:24px}
.practice .icon-tile{width:64px;height:64px}
.practice .icon-tile .icon{width:30px;height:30px}
.practice h3{font-size:23px}
.practice p{margin-top:12px;color:var(--muted);font-size:15.5px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

.steps{display:grid;grid-template-columns:repeat(4,1fr)}
.step{padding:0 26px;border-left:1px solid var(--line)}
.step:first-child{border-left:none}
.step-num{font-family:var(--font-display);font-size:40px;font-weight:600;color:var(--accent);opacity:.5}
.step h3{font-size:20px;margin-top:10px}
.step p{margin-top:10px;color:var(--muted);font-size:15px}

.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.audience-grid h2{margin-top:16px}
.audience-grid > div > p{margin-top:18px;color:var(--muted);font-size:17px}
.audience-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.audience-item{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;
  font-size:14.5px;font-weight:500;
}
.audience-item .icon{width:20px;height:20px;color:var(--accent)}

/* ============ PAGE RENDEZ-VOUS ============ */
.booking-section{padding-bottom:110px}
.booking{display:grid;grid-template-columns:1.25fr .85fr;gap:30px;align-items:start}
.booking-main{padding:32px;overflow:hidden}
.booking-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.booking-head h2{font-size:22px}
.booking-head p{font-size:14px;color:var(--muted)}
.cal-embed{
  margin-top:22px;min-height:660px;
  border-radius:16px;overflow:hidden;
  background:var(--surface-2);
}
.cal-fallback{padding:48px 24px;text-align:center}
.cal-fallback p{color:var(--muted);font-size:15.5px;max-width:44ch;margin:0 auto 22px}
.cal-note{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted)}
.cal-note a{font-weight:600;color:var(--accent)}

.booking-side{display:flex;flex-direction:column;gap:24px}
.side-card{padding:30px 28px}
.side-card h3{font-size:19px}
.rate-list{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.rate{display:flex;align-items:center;gap:14px}
.rate-name{font-weight:600;font-size:15px}
.rate-detail{font-size:13.5px;color:var(--muted)}

.contact-list{margin-top:16px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;font-style:normal}
.contact-row{display:flex;align-items:center;gap:10px;transition:color .2s}
.contact-row:hover{color:var(--accent)}
.contact-row .icon{width:18px;height:18px;color:var(--accent)}

.map-card{padding:0;overflow:hidden}
.map-embed{position:relative;height:250px;background:var(--surface-2)}
.map-embed iframe{display:block;width:100%;height:100%;border:0}
.map-decor{position:absolute;inset:0;width:100%;height:100%}
.map-consent{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:22px;text-align:center;
  background:var(--surface-84);
}
.map-consent p{font-size:13.5px;color:var(--muted);max-width:34ch}
.map-consent .btn{padding:11px 22px;font-size:14px}
.map-foot{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.map-foot span{font-size:13.5px;color:var(--muted)}
.map-foot a{font-size:13.5px;font-weight:600;color:var(--accent)}

/* ============ PAGES LEGALES ============ */
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:clamp(22px,2.4vw,27px);margin-top:60px;scroll-margin-top:110px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:18px;margin-top:30px}
.legal p{margin-top:14px;color:var(--muted);font-size:16.5px}
.legal ul{margin:14px 0 0;padding-left:20px;color:var(--muted);font-size:16.5px}
.legal li{margin-top:9px}
.legal li::marker{color:var(--accent)}
.legal a:not(.btn){
  color:var(--accent);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
}
.legal address{font-style:normal}
.legal .card{padding:26px 28px;margin-top:20px}
.legal .card p:first-child{margin-top:0}
.legal-updated{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:14px}

/* Champ que l'editrice du site doit renseigner avant mise en ligne. */
.todo{
  display:inline-block;
  background:var(--accent-soft);color:#6B4E12;
  border:1px dashed var(--accent);
  padding:1px 9px;border-radius:6px;
  font-size:.92em;font-weight:600;
}

/* Sommaire en tete de page legale */
.legal-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.legal-toc a{
  font-size:14px;font-weight:500;color:var(--brand);
  background:var(--brand-08);padding:7px 14px;border-radius:999px;
  text-decoration:none;transition:background .3s,color .3s;
}
.legal-toc a:hover{background:var(--accent-soft);color:var(--ink)}

/* ============ FOOTER ============ */
.footer{background:var(--brand-2);color:var(--on-brand);padding:80px 0 40px}
.footer a:hover{color:var(--accent)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:48px}
.footer .brand-mark{color:var(--accent)}
.footer .brand-name{color:var(--on-brand)}
.footer .brand-sub{color:var(--on-brand-60)}
.footer-blurb{margin-top:18px;max-width:38ch;opacity:.7;font-size:15px}
.footer-title{
  font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:16px;
}
.footer address{font-style:normal}
.footer-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
/* Les elements de .footer-col sont empiles : un lien contenant une icone doit
   redevenir une ligne pour aligner le pictogramme sur le texte. */
.footer-social{display:inline-flex;align-items:center;gap:9px}
.footer-social .icon{width:17px;height:17px;flex:none}
.footer-col a{opacity:.85}
.footer-col span{opacity:.85}
.footer-legal{
  border-top:1px solid var(--on-brand-18);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;
  font-size:13px;opacity:.6;
}
.footer-legal-links{display:flex;gap:18px}
.footer-legal-links a{text-decoration:underline;text-underline-offset:3px}

/* ============ RESPONSIVE ============ */

/* La navigation bascule en menu deroulant plus tot que le reste de la mise en
   page : sept entrees ne tiennent plus sur une ligne en dessous de ~1160px. */
@media (max-width:1160px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .mobile-menu{
    display:flex;flex-direction:column;gap:6px;
    position:fixed;top:0;left:0;right:0;z-index:49;
    background:var(--bg);border-bottom:1px solid var(--line);
    /* La barre de navigation mesure 95 px a ce palier (26 px + bouton 42 px +
       26 px). Le retrait haut doit la depasser, sinon le premier lien passe
       sous le bouton hamburger : 95 + 25 px pour retrouver le meme rythme
       vertical qu'entre les liens. */
    /* Retrait lateral identique a celui de .wrap, pour que le texte des liens
       tombe sur la meme verticale que le logo. Il repasse a 22 px sous 880 px,
       en meme temps que .wrap. */
    padding:120px 40px 30px;
    max-height:100vh;overflow-y:auto;
    transform:translateY(-120%);
    transition:transform .45s var(--ease);
  }
  .mobile-menu.is-open{transform:none}
  /* Retrait lateral nul : le texte s'aligne alors exactement sur le logo de la
     barre, lui aussi a 22 px du bord. La zone tactile reste pleine largeur,
     les liens etant des elements flex etires. */
  .mobile-menu .nav-link{font-size:20px;padding:14px 0}
  /* La pastille arrondie de la navigation horizontale ne convient pas ici :
     les liens etant des elements flex etires, elle occupe toute la largeur et
     le texte se retrouve plaque contre son bord arrondi. On marque donc la page
     courante par la couleur, la graisse et un filet lateral — ce dernier evite
     de reposer sur la seule couleur. */
  .mobile-menu .nav-link[aria-current="page"]{
    background:none;
    color:var(--brand);
    font-weight:600;
    box-shadow:inset 3px 0 0 var(--accent);
    margin-left:-14px;
    padding-left:14px;
  }
  .mobile-menu .btn{margin-top:14px;justify-content:center}
}
@media (max-width:1080px){
  .booking{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .step:nth-child(3){border-left:none}
}
@media (max-width:880px){
  .wrap{padding:0 22px}
  .mobile-menu{padding-left:22px;padding-right:22px}
  .section{padding:80px 0}
  .section--flush-top{padding-top:0}
  .section--surface + .section--flush-top{padding-top:56px}
  .hero{padding:130px 0 60px}
  .hero--centered{padding:130px 0 50px}

  .hero-grid,.about-grid,.audience-grid{grid-template-columns:1fr;gap:44px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .hero-media img{height:420px}
  .about-media img{height:400px}
  .about-media .arch{border-radius:24px}
  .about-leaf{left:-10px;bottom:-16px;width:54px;height:54px}

  .cta{padding:52px 26px;border-radius:28px}
  .cta--split{padding:44px 26px;text-align:center;justify-content:center}
  .practice{padding:32px 26px;flex-direction:column;gap:18px}
  .booking-main{padding:22px}
  .cal-embed{min-height:600px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .step{border-left:none;padding:0}
  .audience-list{grid-template-columns:1fr}
  .stats{gap:20px}
  .hero-actions .btn{width:100%;justify-content:center}
}