/* =================================================================
   Johanne — Ostéopathe à domicile · V4
   design.css — système de classes combinables · tout en vw
   Couleurs :  .dark = #0E1E00   .light = #FFFEEE   accent = #CFEBA9
   ================================================================= */

:root{
  --dark:#0E1E00;
  --light:#FFFFFF;
  --ultra-light:#B8B8B8;
  --accent:#CFEBA9;
  --frame:0.52vw;            /* ~10px @1920 */
  --corner:1.4vw;            /* rayon des coins arrondis (hero, images, cartes, bandeau, form) — sauf boutons */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;overflow-x:clip}
body{background:var(--light);font-family:"Poppins",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* conteneur de page (recouvre le footer fixé) */
.page{position:relative;z-index:1;background:var(--light);border-bottom-left-radius:2.4vw;border-bottom-right-radius:2.4vw;overflow:hidden}
/* reveal au scroll (anti-FOUC : état de base scopé .js posé avant peinture)
   NB : via @keyframes (pas transition) → ne clobbe pas le transition:hover des éléments */
.js .reveal{opacity:0;transform:translateY(2vw)}
.js .reveal.fade{transform:none}                 /* variante fondu seul (header, images) */
.js .reveal.in{animation:reveal-up .8s var(--ease) forwards}
.js .reveal.fade.in{animation-name:reveal-fade}
.js .reveal.in.d1{animation-delay:.08s}
.js .reveal.in.d2{animation-delay:.16s}
.js .reveal.in.d3{animation-delay:.24s}
.js .reveal.in.d4{animation-delay:.32s}
@keyframes reveal-up{from{opacity:0;transform:translateY(2vw)}to{opacity:1;transform:none}}
@keyframes reveal-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.js .reveal.in{animation:none}}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ===================== SYSTÈME TYPOGRAPHIQUE ===================== */
/* trois bases : titres (serrés), paragraphes (aérés), noms de section (mono capitale) */
.title{font-family:"Poppins",sans-serif;font-weight:300;line-height:1;letter-spacing:-0.07em;display:block}
.paragraph{font-family:"Poppins",sans-serif;font-weight:300;line-height:1.4;letter-spacing:-0.04em;display:block}
.section-name{font-family:"Space Mono",monospace;font-weight:400;font-size:0.85vw;line-height:1;letter-spacing:0.1em;text-transform:uppercase;display:block;white-space:nowrap}
.paragraph strong,.paragraph b{font-weight:500}
/* tailles (combinables avec title ou paragraph) */
.title.big{font-size:6vw;line-height:0.9}
.title.medium{font-size:3.2vw}
.title.small{font-size:2.2vw}
.title.xs{font-size:1.4vw}
.paragraph.big{font-size:1.5vw}
.paragraph.medium{font-size:1.2vw}
.paragraph.small{font-size:0.9vw}
/* alignements */
.left{text-align:left}
.center{text-align:center}
.right{text-align:right}
/* couleurs (combos) */
.dark{color:var(--dark)}
.light{color:var(--light)}
.ultra-light{color:var(--ultra-light)}
.accent{color:var(--accent)}
/* graisse (combo) */
.strong{font-weight:500}

/* ===================== BOUTON (+ flèche animée au survol) ===================== */
.btn{
  display:inline-flex;align-items:center;
  font-family:"Poppins",sans-serif;font-weight:500;
  font-size:0.9vw;line-height:1.4;letter-spacing:-0.03em;
  background:var(--accent);color:var(--dark);
  border:none;cursor:pointer;white-space:nowrap;
  border-radius:100px;
  padding:0.85vw 1.9vw;
  transition:filter .6s var(--ease);
}
.btn:hover{filter:brightness(1.1)}
.btn .arrow{
  display:inline-flex;overflow:hidden;white-space:nowrap;
  max-width:0;opacity:0;transform:translateX(-0.3em);
  transition:max-width .6s var(--ease),opacity .6s var(--ease),transform .6s var(--ease),margin-left .6s var(--ease);
}
.btn:hover .arrow{max-width:1.5em;opacity:1;transform:translateX(0);margin-left:0.7em}
.btn .arrow svg{display:block;width:1.05em;height:1.05em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ===================== LOGO ===================== */
/* logo = image SVG "Johanne." (dark sur fond clair au header, light au footer) — dimensionné par la hauteur */
.logo{display:inline-flex;align-items:center}
.logo img{height:1.4vw;width:auto;display:block}

/* ===================== HERO (section = 100% viewport) ===================== */
.hero{width:100%;height:calc(100svh - var(--nav-h, 6vw));padding:var(--frame);padding-top:0px;background:var(--light)}   /* svh = petite hauteur d'écran → jamais crop par la barre nav mobile (sur desktop svh = vh) */
.hero-inner{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--corner)}
.hero-bg{position:absolute;left:0;top:-18%;width:100%;height:120%;object-fit:cover;object-position:50% 42%;will-change:transform}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,30,0,0.7) 0%,rgba(14,30,0,0.2) 100%)}

/* --- header / nav (sticky, verre dépoli) --- */
.nav{position:sticky;top:0;z-index:50;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0.6vw 2.8vw;background:rgba(255,255,255,0.78);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px)}
.nav .logo{justify-self:start}
.nav-menu{display:flex;align-items:center;gap:2.4vw;justify-self:center}
.nav-right{display:flex;align-items:center;gap:2.6vw;justify-self:end}
.nav-link{position:relative;font-family:"Poppins",sans-serif;font-weight:400;font-size:0.9vw;letter-spacing:-0.03em;color:var(--dark)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-0.15vw;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease);will-change:transform}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left center}
.nav-link.nav-drop-toggle::after{content:none}   /* pas de trait sous "Pour qui" : chevron + dropdown suffisent */
.burger{display:none}
/* menu mobile ouvert : la page derrière ne défile plus (le menu reste bien calé en svh) */
html.nav-open,html.nav-open body{height:100%;overflow:hidden;overscroll-behavior:none}

/* --- texte hero (bas-gauche) --- */
.hero-text{position:absolute;left:0;bottom:0;z-index:4;display:flex;flex-direction:column;align-items:flex-start;padding:0 2.8vw 4.2vw}
.hero-text .title.big{margin-bottom:1.6vw}
.hero-text .paragraph.small{max-width:26vw;margin-bottom:2.2vw}

/* ===================== SECTION (générique = 100% viewport) ===================== */
/* la section s'ajuste à son contenu (pas de hauteur forcée — sinon, tout étant en vw,
   un viewport étroit garderait 100vh et créerait d'énormes vides). Seule la .hero est en 100vh. */
.section{width:100%;background:var(--light);padding:4.5vw 2.8vw;margin-top:3vw;display:flex;flex-direction:column}

/* label de section : ■ TEXTE ———————————— */
.sec-label{display:flex;align-items:center;gap:2vw;margin-bottom:3vw}
.sec-label .sq{width:0.35vw;height:0.35vw;background:var(--dark);flex:none}
.sec-label .rule{flex:1;height:1px;background:rgba(14,30,0,0.18)}

/* ===================== SECTION 2 — Qui suis-je ===================== */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr 1.3fr;gap:7vw;align-items:end}
/* colonne gauche : titre en haut + image en bas (space-between) */
.about-col-left{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:3vw}
.about-col-left h2{max-width:100%}
/* parallaxe : le cadre est fixe et masque le dépassement, l'image glisse dedans */
.parallax{position:relative;overflow:hidden}
.parallax img{position:absolute;left:0;top:-16%;width:100%;height:132%;object-fit:cover;display:block;will-change:transform}
.about-img{aspect-ratio:0.66;border-radius:var(--corner)}
.about-center{display:flex;flex-direction:column;align-items:flex-start}
.about-center .paragraph{margin-bottom:2.6vw}

/* ===================== SECTION 3 — bandeau dark (4 points clés) ===================== */
.band{padding:var(--frame);margin-top:5.5vw}
.band-inner{background:var(--dark);border-radius:var(--corner);display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:4.5vw 5vw}
.kp{padding:0 3.6vw}
.kp:first-child{padding-left:0}
.kp:last-child{padding-right:0}
.kp + .kp{border-left:1px solid rgba(255,254,238,0.13)}
.kp-ico{width:2.9vw;height:2.9vw;border-radius:50%;background:rgba(207,235,169,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:1.6vw;transition:background .5s var(--ease)}
.kp-ico svg{width:1.45vw;height:1.45vw;stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s var(--ease)}
.kp .title.xs{margin-bottom:0.7vw}
.kp:hover .kp-ico{background:var(--accent)}
.kp:hover .kp-ico svg{stroke:var(--dark)}

/* ===================== SECTION 4 — Pour qui (cartes services) ===================== */
.pourqui-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1.3vw}
.pourqui-intro{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding-right:1.6vw}
.pourqui-intro .title.medium{margin-bottom:1.2vw}
.pourqui-intro .btn{margin-top:2.2vw}
.service-card{position:relative;display:block;aspect-ratio:0.82;border-radius:var(--corner);overflow:hidden;color:var(--light)}
.service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.service-card:hover img{transform:scale(1.05)}
.sc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,30,0,0.9) 0%,rgba(14,30,0,0.35) 42%,rgba(14,30,0,0) 78%)}
.sc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2vw}
.sc-body .title.small{margin-bottom:0.5vw}
.sc-body .paragraph.small{color:rgba(255,254,238,0.82);margin-bottom:1vw}
.sc-link{display:inline-flex;align-items:center;gap:0.4em;font-family:"Poppins",sans-serif;font-weight:500;font-size:0.95vw;letter-spacing:-0.02em;color:var(--accent)}
.sc-link .arr{transition:transform .4s var(--ease)}
.service-card:hover .sc-link .arr{transform:translateX(0.35em)}

/* ===================== SECTION 5 — Services (offres) ===================== */
.services-intro{max-width:46vw;margin-bottom:2.6vw}
.services-intro .title.medium{margin-bottom:1.2vw}
.services-list{border-top:1px solid rgba(14,30,0,0.13)}
.srv-row{display:grid;grid-template-columns:auto 1.05fr 1.85fr auto;align-items:center;gap:2.6vw;padding:2.3vw 0.4vw;border-bottom:1px solid rgba(14,30,0,0.13);transition:padding-left .45s var(--ease)}
.srv-row:hover{padding-left:1.2vw}
.srv-num{font-family:"Space Mono",monospace;font-size:0.9vw;letter-spacing:0.05em;color:rgba(14,30,0,0.4)}
.srv-desc{color:rgba(14,30,0,0.6)}
.srv-arrow{width:2.9vw;height:2.9vw;border-radius:50%;border:1px solid rgba(14,30,0,0.2);display:grid;place-items:center;flex:none;transition:background .45s var(--ease),border-color .45s var(--ease)}
.srv-arrow svg{width:1.25vw;height:1.25vw;stroke:var(--dark);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s var(--ease)}
.srv-row:hover .srv-arrow{background:var(--accent);border-color:var(--accent)}
.srv-more{display:none}   /* affordance "cliquable" affichée seulement en mobile (voir @media) */

/* ===================== SECTION 6 — Zone d'intervention (3 colonnes, images décalées) ===================== */
.zones-grid{display:grid;grid-template-columns:0.9fr 0.82fr 1.25fr;gap:2.6vw;align-items:start}
.zi-frame{border-radius:var(--corner)}
.zi-a .zi-frame{aspect-ratio:0.85}
.zi-b .zi-frame{aspect-ratio:0.68}
.zi-b{margin-top:6vw}
.zones-cta{margin-top:2.4vw}
.zones-cta .paragraph{margin-bottom:1.4vw;max-width:26ch}
.zones-content{align-self:center}
.zones-head{margin-bottom:1.8vw;max-width:14ch}

/* ===================== SECTION 7 — Avis (marquee infini) ===================== */
.section.section-avis{margin-top:1.5vw}
.avis-title{text-align:center;margin-bottom:3.4vw}
.avis-marquee{overflow:hidden;margin-inline:-2.8vw;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.avis-track{display:flex;align-items:stretch;width:max-content;animation:avis-scroll 82.5s linear infinite}
@keyframes avis-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.avis-card{flex:none;width:22.5vw;margin-right:2.25vw;background:#fff;border:1px solid rgba(14,30,0,0.12);border-radius:var(--corner);padding:2.7vw;display:flex;flex-direction:column;gap:1.5vw}
.avis-stars{color:var(--accent);letter-spacing:0.14em;font-size:1.4vw}
.avis-card .paragraph.small{font-size:1.35vw}
.avis-card .title.small{font-size:2.1vw}
.avis-text{flex:1;color:var(--dark)}
.avis-who{margin-top:0.9vw;display:flex;flex-direction:column;gap:0.15vw}
.avis-city{font-family:"Poppins",sans-serif;font-weight:400;font-size:1.2vw;letter-spacing:-0.01em;color:var(--ultra-light)}
@media (prefers-reduced-motion:reduce){.avis-track{animation:none}}

/* ===================== SECTION 8 — Contact (CTA + formulaire) ===================== */
#contact{padding-bottom:8vw}
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:4.5vw;align-items:start}
.contact-left .title.medium{margin:1.6vw 0 1.3vw}
.contact-lead{max-width:32ch;margin-bottom:2.8vw}
.contact-info{list-style:none;display:flex;flex-direction:column;gap:1.5vw}
.contact-info li{display:flex;align-items:center;gap:1.1vw}
.ci-ico{display:grid;place-items:center;flex:none}
.ci-ico svg{width:1.4vw;height:1.4vw;stroke:var(--dark);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ci-txt{display:flex;flex-direction:column;gap:0.35vw}
/* ci-lbl → .section-name .ultra-light ; ci-val → .paragraph .small .dark .strong (dans le HTML) */
.contact-form{background:var(--dark);border:1px solid rgba(255,255,255,0.1);border-radius:var(--corner);padding:2.6vw;display:flex;flex-direction:column;gap:1.3vw}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3vw}
.field{display:flex;flex-direction:column;gap:0.5vw}
.field label{font-size:0.85vw;font-weight:500;letter-spacing:-0.01em;color:#fff}
.field input,.field select,.field textarea{font-family:"Poppins",sans-serif;font-size:1vw;font-weight:400;letter-spacing:-0.02em;color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:0.95vw 1.1vw;background:rgba(255,255,255,0.06);transition:border-color .3s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,0.4)}
.field select option{color:var(--dark)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:7vw;line-height:1.5}
.contact-form .btn{align-self:flex-start;margin-top:0.6vw}

/* ===================== FOOTER ===================== */
.footer{position:fixed;bottom:0;left:0;width:100%;z-index:0;background:var(--dark);color:#9C9C95;padding:5vw 2.8vw 2.5vw}
/* prolonge le sombre juste au-dessus du footer (derrière le panneau) → les coins arrondis révèlent du sombre, pas du blanc. En absolu : ne compte pas dans la hauteur du footer → spacer inchangé */
.footer::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:5vw;background:var(--dark)}
.footer a{color:#C9C9C2;transition:color .3s}
.footer a:hover{color:var(--accent)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:3vw;padding-bottom:3.4vw;border-bottom:1px solid rgba(255,255,255,0.1)}
/* footer sombre → "Johanne" reste clair pour rester lisible (le foncé demandé serait invisible ici) ; le point garde l'accent */
.footer .f-logo{line-height:0;margin-bottom:1.3vw}
.footer .f-logo img{height:1.7vw;width:auto;display:block}
.footer .f-tag{font-size:0.95vw;max-width:26ch;color:#9C9C95;line-height:1.5}
.footer h4{font-size:0.78vw;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#6E6E66;margin-bottom:1.2vw}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:0.7vw;font-size:0.98vw}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1vw;padding-top:2vw;font-size:0.82vw;color:#6E6E66}

/* ===================== NAV — dropdown "Pour qui" ===================== */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:0.45vw;background:none;border:none;cursor:pointer;font-family:"Poppins",sans-serif;font-weight:400;font-size:0.9vw;letter-spacing:-0.03em;color:var(--dark);padding:0}
.nav-chev{width:0.8vw;height:0.8vw;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.nav-drop.open .nav-chev{transform:rotate(180deg)}
@media (hover:hover) and (min-width:761px){.nav-drop:hover .nav-chev,.nav-drop:focus-within .nav-chev{transform:rotate(180deg)}}
.nav-menu-drop{position:absolute;top:calc(100% + 0.9vw);left:50%;transform:translateX(-50%) translateY(0.6vw);min-width:15vw;background:#fff;border:1px solid rgba(14,30,0,0.1);border-radius:1vw;box-shadow:0 1vw 3vw rgba(14,30,0,0.12);padding:0.55vw;display:flex;flex-direction:column;gap:0.1vw;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:60}
.nav-menu-drop::before{content:"";position:absolute;left:0;right:0;top:-1.1vw;height:1.1vw}   /* pont : survol continu entre le bouton et le menu */
.nav-drop.open .nav-menu-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (hover:hover) and (min-width:761px){.nav-drop:hover .nav-menu-drop,.nav-drop:focus-within .nav-menu-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}}
.nav-menu-drop a{font-family:"Poppins",sans-serif;font-weight:400;font-size:0.9vw;letter-spacing:-0.03em;color:var(--dark);padding:0.7vw 0.9vw;border-radius:0.6vw;white-space:nowrap;transition:background .25s var(--ease)}
.nav-menu-drop a:hover{background:rgba(207,235,169,0.4)}

/* ============ PERSONA — layout seul (toute la typo = combos dans le HTML) ============ */
/* hero eyebrow = un .section-name .accent ; sa marge vient du parent (pas de classe dédiée) */
.hero-text .section-name{margin-bottom:1.4vw}

/* bloc "duo" (image + texte/symptômes) */
.duo{display:grid;grid-template-columns:1fr 1.1fr;gap:5vw;align-items:center}
.duo-img{aspect-ratio:0.92;border-radius:var(--corner)}
.duo-text .title.medium{margin-bottom:1.5vw}
.duo-text > .paragraph{margin-bottom:2.4vw}
.duo-text > .paragraph.small{margin-bottom:1.2vw}   /* le "label" (paragraph small) : marge réduite avant la liste ; > = enfant direct, n'affecte pas les <li> */
.sym-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1vw 2.2vw}
.sym-list li{position:relative;padding-left:1.7vw}  /* li → .paragraph .small .dark */
.sym-list li::before{content:"";position:absolute;left:0;top:0.5vw;width:0.5vw;height:0.5vw;border-radius:50%;background:var(--accent)}

/* bénéfices (3 cartes claires) — h3 → .title .small .dark ; p → .paragraph .medium .ultra-light */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.4vw;counter-reset:benefit}
.benefit{display:flex;flex-direction:column;align-items:flex-start}
.benefit-ico{width:3.4vw;height:3.4vw;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin-bottom:1.5vw;flex:none}
.benefit-ico svg{width:1.6vw;height:1.6vw;stroke:var(--dark);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.benefit h3{margin-bottom:0.9vw}

/* offre recommandée + carte tarif */
.offer{display:grid;grid-template-columns:1.3fr 0.9fr;gap:4.5vw;align-items:start}
.offer-text .title.medium{margin-bottom:1.4vw}
.offer-text > .paragraph{margin-bottom:2vw}
.offer-points{list-style:none;display:flex;flex-direction:column;gap:1vw;margin-bottom:2.6vw}
.offer-points li{position:relative;padding-left:1.4vw}   /* li → .paragraph .small .dark */
.offer-points li::before{content:"";position:absolute;left:0;top:0.55vw;width:0.42vw;height:0.42vw;border-radius:50%;background:var(--accent)}
/* carte tarif : oc-eyebrow → .section-name .accent · oc-name → .title .small .light · oc-amount → .title .medium .accent .strong · oc-unit/oc-note/oc-list li → .paragraph .small .ultra-light */
.offer-card{background:var(--dark);border-radius:var(--corner);padding:2.6vw;display:flex;flex-direction:column;gap:0.9vw}
.oc-price{display:flex;align-items:baseline;gap:0.6vw;margin-top:0.4vw}
.oc-list{list-style:none;display:flex;flex-direction:column;gap:0.8vw;margin-top:0.7vw;padding-top:1.4vw;border-top:1px solid rgba(255,255,255,0.12)}
.oc-list li{position:relative;padding-left:1.3vw}
.oc-list li::before{content:"";position:absolute;left:0;top:0.55vw;width:0.42vw;height:0.42vw;border-radius:50%;background:var(--accent)}
.offer-card .btn{align-self:stretch;justify-content:center;margin-top:1vw}

/* ============ PAGE "Comment ça marche" — étapes numérotées + FAQ (layout seul) ============ */
.steps{border-top:1px solid rgba(14,30,0,0.13)}
.step{display:grid;grid-template-columns:auto 1fr;gap:2.6vw;align-items:start;padding:2.6vw 0.4vw;border-bottom:1px solid rgba(14,30,0,0.13)}
.step-num{font-family:"Space Mono",monospace;font-size:0.9vw;letter-spacing:0.05em;color:rgba(14,30,0,0.4);padding-top:0.5vw}
.step-body .title.small{margin-bottom:0.7vw}
/* FAQ : accordéon natif <details>/<summary> */
.faq{border-top:1px solid rgba(14,30,0,0.13)}
.faq-item{border-bottom:1px solid rgba(14,30,0,0.13)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:2vw;padding:2.2vw 0.4vw}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ico{flex:none;width:1.5vw;height:1.5vw}
.faq-ico svg{width:100%;height:100%;stroke:var(--dark);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.faq-item[open] .faq-ico svg{transform:rotate(180deg)}
.faq-item.closing .faq-ico svg{transform:none}   /* chevron redescend en synchro pendant la fermeture animée */
.faq-a{padding:0 0.4vw 2.4vw;max-width:82%}
@media (max-width:760px){
  /* déroulé : même design que les points "ce que ça change" (numéro 4.5vw, gaps 3vw, items 9vw, PAS de divider) */
  .steps{border-top:none;display:flex;flex-direction:column;gap:9vw}
  .step{grid-template-columns:1fr;gap:3vw;padding:0;border-bottom:none}
  .step-num{font-size:4.5vw;padding-top:0}
  .step-body .title.small{margin-bottom:3vw}
  .faq-item summary{padding:5.5vw 0;gap:5vw}
  .faq-ico{width:4.5vw;height:4.5vw}
  .faq-a{padding:0 0 6vw;max-width:100%}
}

/* ===================== MOBILE ===================== */
@media (max-width:760px){
  :root{--frame:2.8vw;--padding-x-mobile:5vw;--corner:4vw}   /* padding X interne + rayon des coins, réglables ici (mobile) */
  .title.big{font-size:10vw;line-height:0.94}
  .title.medium{font-size:7.5vw;line-height:0.98}
  .title.small{font-size:7vw}
  .title.xs{font-size:6vw}
  .section-name{font-size:3vw}
  .paragraph.big{font-size:4.3vw;line-height:1.4}
  .paragraph.medium{font-size:4vw;line-height:1.4}
  .paragraph.small{font-size:3.7vw;line-height:1.4}
  .btn{font-size:3.9vw;border-radius:3.4vw;padding:3vw 5.5vw}
  /* mobile tactile : aucun effet de survol (évite les états "collés" après un tap) */
  .btn:hover{filter:none}
  .btn:hover .arrow{max-width:0;opacity:0;margin-left:0}
  .nav-link:hover::after{transform:scaleX(0)}
  .service-card:hover img{transform:none}
  .service-card:hover .sc-link .arr{transform:none}
  .srv-row:hover{padding-left:0}
  .kp:hover .kp-ico{background:rgba(207,235,169,0.12)}
  .kp:hover .kp-ico svg{stroke:var(--accent)}
  .footer a:hover{color:#C9C9C2}
  .logo img{height:4.6vw}
  .hero-bg{object-position:60% 42%}

  .nav{padding:3.5vw 6vw;display:flex;justify-content:space-between}
  .nav .logo{position:relative;z-index:120}
  /* menu plein écran, rideau descendant (par le haut) */
  .nav-menu{
    position:fixed;top:0;left:0;width:100vw;height:100svh;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:5vw;
    background:var(--light);padding:24vw 9vw;
    transform:translateY(-100%);transition:transform .55s var(--ease);z-index:110;
  }
  .nav-toggle:checked ~ .nav-menu{transform:translateY(0)}
  .nav-link{font-size:6.5vw}
  .nav-menu .nav-link,.nav-menu .nav-drop-toggle{color:var(--dark)}
  /* les liens apparaissent en fondu + translation, en cascade, une fois le rideau descendu */
  .nav-menu > *{opacity:0;transform:translateY(3vw);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .nav-toggle:checked ~ .nav-menu > *{opacity:1;transform:translateY(0)}
  .nav-toggle:checked ~ .nav-menu > *:nth-child(1){transition-delay:.22s}
  .nav-toggle:checked ~ .nav-menu > *:nth-child(2){transition-delay:.29s}
  .nav-toggle:checked ~ .nav-menu > *:nth-child(3){transition-delay:.36s}
  .nav-toggle:checked ~ .nav-menu > *:nth-child(4){transition-delay:.43s}
  .nav-toggle:checked ~ .nav-menu > *:nth-child(5){transition-delay:.5s}
  /* header mobile : bouton "Prendre rendez-vous" compact, à gauche du burger */
  .nav-right{gap:4.5vw}
  .nav-right .btn{display:inline-flex;font-size:3.3vw;padding:2.6vw 4.8vw}
  /* burger : 2 lignes qui se croisent en croix */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:1.8vw;width:7vw;height:7vw;cursor:pointer;position:relative;z-index:120}
  .burger span{display:block;width:7vw;height:0.6vw;background:var(--dark);border-radius:1vw;transition:transform .45s var(--ease)}
  .nav-toggle:checked ~ .nav-right .burger span:nth-child(1){transform:translateY(1.2vw) rotate(45deg)}
  .nav-toggle:checked ~ .nav-right .burger span:nth-child(2){transform:translateY(-1.2vw) rotate(-45deg)}

  .hero-text{padding:0 var(--padding-x-mobile) 9vw}
  .hero-text .title.big{margin-bottom:4.5vw}
  .hero-text .paragraph.small{max-width:82vw;margin-bottom:6vw}

  /* section 2 mobile */
  .section{padding:14vw var(--padding-x-mobile);margin-top:7vw}   /* padding X mobile commun ; hero exclue (classe .hero) */
  .sec-label{gap:3.5vw;margin-bottom:6vw}
  .sec-label .sq{width:1vw;height:1vw}
  .about-grid{grid-template-columns:1fr;gap:8vw}
  .about-col-left{display:contents}
  .about-col-left h2{order:1}
  .about-center{order:2}
  .about-img.left{order:3}
  .about-img.right{display:none}
  .about-img{aspect-ratio:1.1}
  .about-center .paragraph{margin-bottom:7vw}

  /* section 3 mobile */
  .band{margin-top:11vw}
  .band-inner{grid-template-columns:1fr;gap:0;padding:11vw var(--padding-x-mobile)}
  .kp{padding:3.5vw 0}   /* haut = bas → le divider est centré entre les blocs (espace AVANT + APRÈS), écart total inchangé */
  .kp:first-child{padding-top:0}
  .kp + .kp{border-left:none;border-top:1px solid rgba(255,254,238,0.13)}
  .kp-ico{width:10vw;height:10vw;margin-bottom:4vw}
  .kp-ico svg{width:4.8vw;height:4.8vw}
  .kp .title.xs{margin-bottom:3.5vw}

  /* section 4 mobile */
  .pourqui-grid{grid-template-columns:1fr;gap:5vw}
  .pourqui-intro{grid-column:auto;grid-row:auto;padding-right:0;margin-bottom:4vw}
  .pourqui-intro .title.medium{margin-bottom:4vw}
  .pourqui-intro .btn{margin-top:6vw}
  .service-card{aspect-ratio:1.15}
  .sc-body{padding:6vw var(--padding-x-mobile)}
  .sc-body .title.xs{margin-bottom:1.5vw}
  .sc-body .paragraph.small{margin-bottom:1.5vw}   /* gap titre→sous-titre = gap sous-titre→"Découvrir" (le titre carte = .title.xs, pas .small !) */
  .sc-link{font-size:3.7vw}

  /* section 5 mobile */
  .services-intro{max-width:100%;margin-bottom:8vw}
  .services-intro .title.medium{margin-bottom:4vw}
  .srv-row{grid-template-columns:1fr;gap:2.5vw;padding:10vw 0}
  .srv-num{font-size:3vw}
  .srv-arrow{display:none}
  .srv-more{display:inline-flex;align-items:center;gap:0.5em;margin-top:1vw;font-family:"Poppins",sans-serif;font-weight:500;font-size:3.9vw;letter-spacing:-0.02em;color:var(--dark)}
  .srv-more .arr{transition:transform .4s var(--ease)}

  /* section 6 mobile */
  .zones-grid{grid-template-columns:1fr;gap:6vw}
  .zi-a .zi-frame,.zi-b .zi-frame{aspect-ratio:1.2}
  .zi-b{display:none}
  .zones-content{order:-1}
  .zones-cta{margin-top:5vw}
  .zones-cta .paragraph{max-width:100%;margin-bottom:4vw}
  .zones-head{max-width:100%;margin-bottom:5vw}

  /* section 7 mobile */
  .section.section-avis{margin-top:3.5vw}
  .avis-title{margin-bottom:8vw}
  .avis-marquee{margin-inline:calc(var(--padding-x-mobile) * -1)}   /* suit le padding X des sections */
  .avis-track{animation-duration:55s}
  .avis-card{width:72vw;margin-right:4vw;padding:6vw}
  .avis-card .paragraph.small{font-size:4vw}
  .avis-card .title.small{font-size:6vw}
  .avis-stars{font-size:4vw}
  .avis-city{font-size:3.2vw}

  /* section 8 + footer mobile */
  #contact{padding-bottom:18vw}
  .contact-grid{grid-template-columns:1fr;gap:9vw}
  .contact-left .title.medium{margin:4vw 0 4vw}
  .contact-lead{max-width:100%;margin-bottom:7vw}
  .contact-info{gap:5vw}
  .ci-ico{width:11vw;height:11vw}
  .ci-ico svg{width:5vw;height:5vw}
  .contact-form{padding:6vw var(--padding-x-mobile);gap:4.5vw;margin-inline:calc(var(--frame) - var(--padding-x-mobile))}   /* largeur = var(--frame) */
  .form-row{grid-template-columns:1fr;gap:4.5vw}
  .field{gap:2vw}
  .field label{font-size:3.4vw}
  .field input,.field select,.field textarea{font-size:4.2vw;padding:3.6vw 4vw}
  .field textarea{min-height:30vw}

  /* footer classique dans le flux (le contenu dépasse 100vh → pas de volet possible en mobile) */
  .page{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .footer{position:static;padding:14vw var(--padding-x-mobile) 8vw;margin-top:14vw}
  .footer::before{display:none}
  .footer-top{grid-template-columns:1fr 1fr;gap:9vw 5vw;padding-bottom:9vw}
  .footer .f-logo{margin-bottom:3vw}
  .footer .f-logo img{height:7vw}
  .footer .f-tag{font-size:3.7vw;max-width:100%}
  .footer h4{font-size:3vw;margin-bottom:3.5vw}
  .footer ul{font-size:4vw;gap:2.8vw}
  .footer-bottom{flex-direction:column;gap:2vw;padding-top:7vw;font-size:3.2vw}
}

/* ===================== MOBILE — dropdown + composants persona ===================== */
@media (max-width:760px){
  /* dropdown "Pour qui" : sous-liste qui se déplie (animée, 0,5s) dans le menu blanc */
  .nav-drop{position:static;display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .nav-drop-toggle{font-size:6.5vw;gap:2vw}
  .nav-chev{width:5vw;height:5vw}
  .nav-menu-drop{position:static;visibility:visible;display:flex;min-width:0;width:100%;background:transparent;border:none;box-shadow:none;padding:0;flex-direction:column;align-items:flex-start;gap:2.6vw;max-height:0;opacity:0;overflow:hidden;margin-top:0;transform:none;transition:max-height .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease)}
  .nav-menu-drop::before{display:none}
  .nav-drop.open .nav-menu-drop{max-height:56vw;opacity:1;margin-top:3vw;transform:none}
  .nav-menu-drop a{color:rgba(14,30,0,0.55);font-size:4.6vw;letter-spacing:-0.03em;padding:0}
  .nav-menu-drop a:hover{background:transparent}

  .hero-text .section-name{margin-bottom:4vw}

  .duo{grid-template-columns:1fr;gap:8vw}
  .duo-img{aspect-ratio:1.1;order:-1}
  .duo-text .title.medium{margin-bottom:4vw}
  .duo-text > .paragraph{margin-bottom:6vw}
  .duo-text > .paragraph.small{margin-bottom:4vw}
  .sym-list{grid-template-columns:1fr;gap:3vw}
  .sym-list li{padding-left:6vw}
  .sym-list li::before{width:1.8vw;height:1.8vw;top:2vw}

  .benefit-grid{grid-template-columns:1fr;gap:9vw}
  /* mobile : plus de bulle+icône, on numérote 01/02/03 comme les lignes services */
  .benefit-ico{display:none}
  .benefit{counter-increment:benefit}
  .benefit::before{content:counter(benefit,decimal-leading-zero);display:block;font-family:"Space Mono",monospace;font-size:4.5vw;letter-spacing:0.05em;color:rgba(14,30,0,0.4);margin-bottom:3vw}
  .benefit h3{margin-bottom:3vw}

  .offer{grid-template-columns:1fr;gap:8vw}
  .offer-text .title.medium{margin-bottom:4vw}
  .offer-text > .paragraph{margin-bottom:6vw}
  .offer-points{gap:3vw;margin-bottom:7vw}
  .offer-points li{padding-left:4vw}
  .offer-points li::before{width:1.6vw;height:1.6vw;top:2.1vw}
  .offer-card{padding:8vw var(--padding-x-mobile);gap:3vw;margin-inline:calc(var(--frame) - var(--padding-x-mobile))}   /* déborde le padding de section → largeur = var(--frame) */
  .oc-list{gap:2.5vw;padding-top:5vw;margin-top:3vw}
  .oc-list li{padding-left:4vw}
  .oc-list li::before{width:1.6vw;height:1.6vw;top:2.1vw}
}

/* =================================================================
   AJOUTS — réseaux sociaux · icône inline · sections ostéo/techniques · page tarifs
   (composants = layout seul ; toute la typo reste base + combos dans le HTML)
   ================================================================= */

/* ===================== FOOTER — pastilles réseaux sociaux ===================== */
/* réseaux = icônes claires seules (ni carré ni rond) ; survol → accent */
.footer-social{display:flex;gap:1.3vw;margin-top:1.8vw}
.footer-social a{display:grid;place-items:center}
.footer-social svg{width:1.5vw;height:1.5vw;fill:#C9C9C2;transition:fill .3s var(--ease)}
.footer-social a:hover svg{fill:var(--accent)}

/* ===================== ICÔNE LINKEDIN INLINE (fin de phrase) ===================== */
/* icône LinkedIn inline = carré foncé, lettres en négatif (blanc), opacité 85 % ; survol → carré accent + opacité pleine */
.inline-li{display:inline-block;width:0.82em;height:0.82em;margin-left:0.4em;vertical-align:-0.1em;opacity:0.85;transition:opacity .3s var(--ease)}
.inline-li svg{width:100%;height:100%;display:block}
.inline-li rect{fill:var(--dark);transition:fill .3s var(--ease)}
.inline-li path{fill:#fff;transition:fill .3s var(--ease)}
.inline-li:hover{opacity:1}
.inline-li:hover rect{fill:var(--accent)}
.inline-li:hover path{fill:var(--dark)}

/* ===================== SECTION "Qu'est-ce que l'ostéo" (intro 2 colonnes) ===================== */
.intro-2col{display:grid;grid-template-columns:1fr 1.5fr;gap:5vw;align-items:start}
.intro-2col .title.medium{max-width:14ch}

/* ===================== SECTION "Mes techniques" (grille 5) ===================== */
.tech-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2vw;margin-top:4.5vw}   /* les 5 techniques, directement sous la définition */
.tech{display:flex;flex-direction:column;align-items:flex-start;gap:0.6vw;padding-top:1.3vw;border-top:1px solid rgba(14,30,0,0.16)}
.tech .section-name{color:rgba(14,30,0,0.4)}

/* ===================== PAGE TARIFS ===================== */
/* en-tête sans image (hauteur auto) : eyebrow + titre + sous-titre, puis les offres */
.page-head .section-name{margin-bottom:1.4vw}
.page-head .title.big{margin-bottom:1.8vw}
.page-head .page-sub{max-width:54vw}
.page-head .pricing-grid{margin-top:4.5vw}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8vw;align-items:stretch}
.price-card{background:#fff;border:1px solid rgba(14,30,0,0.14);border-radius:var(--corner);padding:2.8vw 2.4vw;display:flex;flex-direction:column;gap:0.7vw}
.price-card.feature{background:var(--dark);border-color:var(--dark)}
.price-head{display:flex;align-items:center;justify-content:space-between;gap:1vw}
.price-badge{background:var(--accent);border-radius:100px;padding:0.4vw 0.9vw}   /* pastille : typo = .section-name .dark dans le HTML */
.price-amount{display:flex;align-items:baseline;gap:0.5vw;margin:0.7vw 0 0.1vw}
.price-list{list-style:none;display:flex;flex-direction:column;gap:0.8vw;margin-top:1.3vw;padding-top:1.4vw;border-top:1px solid rgba(14,30,0,0.12)}
.price-card.feature .price-list{border-top-color:rgba(255,255,255,0.14)}
.price-list li{position:relative;padding-left:1.4vw}
.price-list li::before{content:"";position:absolute;left:0;top:0.55vw;width:0.42vw;height:0.42vw;border-radius:50%;background:var(--accent)}
.price-card .btn{align-self:stretch;justify-content:center;margin-top:auto}
.price-card .btn.top-gap{margin-top:1.6vw}

/* carte "accompagnement" — volontairement distincte des packs (teinte accent) */
.accomp{margin-top:4.5vw;background:rgba(207,235,169,0.16);border:1px solid rgba(207,235,169,0.55);border-radius:var(--corner);padding:3vw 2.8vw;display:grid;grid-template-columns:1.7fr 1fr;gap:3vw;align-items:center}
.accomp-text .title.small{margin:0.6vw 0 1vw}
.accomp-price{display:flex;flex-direction:column;align-items:flex-start;gap:0.3vw;border-left:1px solid rgba(14,30,0,0.15);padding-left:3vw}
.accomp-price .price-amount{margin:0}
.accomp-price .btn{margin-top:1.3vw}

/* note bas de page tarifs (bon à savoir) */
.price-note{display:grid;grid-template-columns:1fr 1fr;gap:2.6vw;margin-top:2.8vw}
.price-note > div{display:flex;flex-direction:column;gap:0.6vw}

/* ===================== HOME — CTA urgence (remplace la section Services) ===================== */
.cta-urgence{background:var(--dark);border-radius:var(--corner);padding:4.2vw 4.5vw;display:grid;grid-template-columns:1fr auto;gap:4vw;align-items:center}
.cta-urgence-text .section-name{margin-bottom:1.1vw}
.cta-urgence-text .title.medium{margin-bottom:1.1vw;max-width:24ch}
.cta-urgence .btn{white-space:nowrap}

/* ===================== MOBILE — ajouts ===================== */
@media (max-width:760px){
  .cta-urgence{grid-template-columns:1fr;gap:6vw;padding:11vw var(--padding-x-mobile)}
  .cta-urgence .btn{justify-self:start}   /* bouton "Appelez-moi" hug le contenu (plus 100% de large) — portrait ET paysage */
  .cta-urgence-text .section-name{margin-bottom:3vw}
  .cta-urgence-text .title.medium{margin-bottom:5vw;max-width:100%}
  .footer-social{gap:5vw;margin-top:6vw}
  .footer-social svg{width:7vw;height:7vw}
  .inline-li{width:0.9em;height:0.9em;margin-left:0.45em;vertical-align:-0.12em}

  .intro-2col{grid-template-columns:1fr;gap:5vw}
  .intro-2col .title.medium{max-width:100%}

  /* techniques : même design que les points "ce que ça change" (numéro 4.5vw, gaps 3vw, items 9vw, PAS de divider) */
  .tech-grid{grid-template-columns:1fr;gap:9vw;margin-top:8vw}
  .tech{padding:0;gap:3vw;border-top:none}
  .tech .section-name{font-size:4.5vw}

  .page-head .section-name{margin-bottom:4vw}
  .page-head .title.big{margin-bottom:5vw}
  .page-head .page-sub{max-width:100%}
  .page-head .pricing-grid{margin-top:9vw}
  .pricing-grid{grid-template-columns:1fr;gap:5vw}
  .price-card{padding:9vw var(--padding-x-mobile);margin-inline:calc(var(--frame) - var(--padding-x-mobile));gap:2vw}
  .price-badge{padding:1.5vw 3.5vw}
  .price-list{gap:2.8vw;margin-top:5vw;padding-top:5vw}
  .price-list li{padding-left:5vw}
  .price-list li::before{width:1.6vw;height:1.6vw;top:2.2vw}
  .price-card .btn.top-gap{margin-top:5vw}

  .accomp{grid-template-columns:1fr;gap:6vw;padding:10vw var(--padding-x-mobile);margin-inline:calc(var(--frame) - var(--padding-x-mobile));margin-top:9vw}
  .accomp-text .title.small{margin:3vw 0 4vw}
  .accomp-price{border-left:none;padding-left:0;border-top:1px solid rgba(14,30,0,0.15);padding-top:6vw;width:100%}
  .accomp-price .btn{margin-top:4vw}

  .price-note{grid-template-columns:1fr;gap:6vw;margin-top:9vw}
}

/* =================================================================
   PAYSAGE — téléphones inclinés & petites tablettes (≤ 760px, paysage)
   Le breakpoint mobile est calibré en vw pour du PORTRAIT (~390px de large).
   En paysage l'écran est ~2× plus large → toutes ces tailles doublent et cassent
   les proportions. On RE-DÉCLARE ici toute l'échelle typo (≈ vw ÷ 2) : un seul
   endroit qui recale TOUT le texte (hero + sections + cartes + menu) de façon
   cohérente. ⚠️ N'affecte NI le desktop (paysage mais haut) NI le mobile PORTRAIT
   (orientation différente) : les 2 breakpoints validés restent intacts.
   ================================================================= */
@media (max-width:760px) and (orientation:landscape){
  /* 1) ÉCHELLE TYPO recalibrée paysage (recale TOUT le texte d'un coup) */
  .title.big{font-size:5.4vw;line-height:0.98}
  .title.medium{font-size:4.2vw;line-height:1}
  .title.small{font-size:3.8vw}
  .title.xs{font-size:3.3vw}
  .paragraph.big{font-size:2.4vw;line-height:1.4}
  .paragraph.medium{font-size:2.2vw;line-height:1.4}
  .paragraph.small{font-size:2vw;line-height:1.4}
  .section-name{font-size:1.7vw}
  .btn{font-size:2.2vw;padding:1.6vw 3.4vw;border-radius:2vw}

  /* 2) HEADER compact */
  .nav{padding:0.8vw 4vw}
  .logo img{height:2.5vw}
  .nav-right{gap:3vw}
  .nav-right .btn{display:inline-flex;font-size:2vw;padding:0.8vw 2.8vw}   /* ⚠️ re-déclare taille+padding : sinon la règle mobile .nav-right .btn (plus spécifique) garde un bouton géant */
  .burger{width:3.6vw;height:3.6vw;gap:0.9vw}
  .burger span{width:3.6vw;height:0.32vw}
  .nav-toggle:checked ~ .nav-right .burger span:nth-child(1){transform:translateY(0.6vw) rotate(45deg)}
  .nav-toggle:checked ~ .nav-right .burger span:nth-child(2){transform:translateY(-0.6vw) rotate(-45deg)}

  /* 3) MENU plein écran : centré en LARGEUR (align-items) ET en hauteur, mais défilable
        si "Pour qui" déplie (justify-content:safe center → n'écrase pas le haut au débordement) */
  .nav-menu{padding:5vw 8vw;gap:2.4vw;align-items:center;justify-content:safe center;overflow-y:auto}
  .nav-drop{align-items:center;width:auto}
  .nav-menu .nav-link,.nav-drop-toggle{font-size:3.4vw}
  .nav-chev{width:2.8vw;height:2.8vw}
  .nav-menu-drop{align-items:center;width:auto}
  .nav-menu-drop a{font-size:2.7vw}
  .nav-drop.open .nav-menu-drop{max-height:40vw;margin-top:1.6vw;gap:1.6vw}

  /* 4) HERO : remplit l'écran (min-height = 1 écran sous le header) MAIS peut grandir si le
        contenu dépasse → jamais de crop. Flex column + justify-end → texte collé en bas (comme
        desktop/portrait), image de fond derrière. (Portrait & desktop non touchés.) */
  .hero{height:auto;min-height:calc(100svh - var(--nav-h, 8vh));display:flex}
  .hero-inner{height:auto;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
  .hero-text{position:relative;padding:6vw var(--padding-x-mobile)}
  .hero-text .section-name{margin-bottom:1.6vw}
  .hero-text .title.big{margin-bottom:1.8vw}
  .hero-text .paragraph.small{max-width:82vw;margin-bottom:2.4vw}

  /* 5) SECTIONS : espacements resserrés */
  .section{padding:7vw var(--padding-x-mobile);margin-top:4vw}
  .sec-label{gap:2vw;margin-bottom:3.5vw}
  .sec-label .sq{width:0.6vw;height:0.6vw}
  .services-intro{margin-bottom:5vw}
  .services-intro .title.medium{margin-bottom:2.5vw}

  /* Qui suis-je */
  .about-grid{gap:5vw}
  .about-img{width:100%;max-height:90svh}   /* 100% largeur : sinon aspect-ratio + max-height rétrécit la largeur */
  .about-center .paragraph{margin-bottom:4vw}

  /* Bandeau RDV rapide / sans trajet… : ICÔNES + paddings réduits */
  .band{margin-top:7vw}
  .band-inner{padding:6vw var(--padding-x-mobile)}
  .kp{padding:2vw 0}   /* divider centré (espace avant = après) */
  .kp-ico{width:5.5vw;height:5.5vw;margin-bottom:2.5vw}
  .kp-ico svg{width:2.6vw;height:2.6vw}
  .kp .title.xs{margin-bottom:1.6vw}

  /* Qu'est-ce que l'ostéo — points/techniques : moins de padding autour des dividers */
  /* techniques + déroulé : design des points "ce que ça change" (numéro 2.5vw, gaps 1.6vw, items 5vw, pas de divider) */
  .tech-grid{margin-top:4vw;gap:5vw}
  .tech{padding:0;gap:1.6vw;border-top:none}
  .tech .section-name{font-size:2.5vw}
  .steps{gap:5vw}
  .step{gap:1.6vw}
  .step-num{font-size:2.5vw}
  .step-body .title.small{margin-bottom:1.6vw}

  /* Pour qui — cartes persona : hauteur ≤ 90vh + "Découvrir" + textes réduits */
  .pourqui-grid{gap:4vw}
  .pourqui-intro{margin-bottom:3vw}
  .pourqui-intro .title.medium{margin-bottom:2.5vw}
  .pourqui-intro .btn{margin-top:3vw}
  .service-card{width:100%;max-height:90svh}
  .sc-body{padding:var(--padding-x-mobile)}
  .sc-body .title.xs{margin-bottom:1vw}
  .sc-body .paragraph.small{margin-bottom:1vw}   /* gaps égaux (titre carte = .title.xs) */
  .sc-link{font-size:2vw}

  /* Zone d'intervention : image ≤ 90vh */
  .zones-grid{gap:4vw}
  .zi-a .zi-frame,.zi-b .zi-frame{width:100%;max-height:90svh}   /* 100% largeur */
  .zones-cta{margin-top:3vw}
  .zones-cta .paragraph{margin-bottom:2.5vw}
  .zones-head{margin-bottom:3vw}

  /* Avis (marquee) : cartes réduites */
  .section.section-avis{margin-top:2vw}
  .avis-title{margin-bottom:4vw}
  .avis-card{width:40vw;margin-right:2.4vw;padding:3.4vw}
  .avis-card .paragraph.small{font-size:2.3vw}
  .avis-card .title.small{font-size:3.4vw}
  .avis-stars{font-size:2.3vw}
  .avis-city{font-size:1.9vw}

  /* Bénéfices "ce que ça change" (persona/service) */
  .benefit-grid{gap:5vw}
  .benefit::before{font-size:2.5vw;margin-bottom:1.6vw}
  .benefit h3{margin-bottom:1.6vw}

  /* Duo (persona) + liste de symptômes */
  .duo{gap:5vw}
  .duo-img{width:100%;max-height:90svh}   /* 100% largeur */
  .duo-text .title.medium{margin-bottom:2.5vw}
  .duo-text > .paragraph{margin-bottom:3vw}
  .duo-text > .paragraph.small{margin-bottom:2vw}
  .sym-list{gap:1.6vw}
  .sym-list li{padding-left:3vw}
  .sym-list li::before{width:1vw;height:1vw;top:0.9vw}

  /* Offre + carte tarif (persona/service) : padding équilibré */
  .offer{gap:5vw}
  .offer-text .title.medium{margin-bottom:2.5vw}
  .offer-text > .paragraph{margin-bottom:3vw}
  .offer-points{gap:1.6vw;margin-bottom:4vw}
  .offer-card{padding:var(--padding-x-mobile);gap:2vw}
  .oc-list{gap:1.5vw;padding-top:3vw;margin-top:2vw}

  /* Page tarifs : cartes à padding équilibré */
  .page-head .section-name{margin-bottom:2vw}
  .page-head .title.big{margin-bottom:2.5vw}
  .page-head .pricing-grid{margin-top:5vw}
  .price-card{padding:var(--padding-x-mobile);gap:1.4vw}
  .price-list{gap:1.4vw;margin-top:2.5vw;padding-top:2.5vw}
  .price-card .btn.top-gap{margin-top:2.5vw}
  .accomp{grid-template-columns:1.6fr 1fr;gap:4vw;padding:var(--padding-x-mobile);margin-top:5vw}
  .accomp-text .title.small{margin:1.5vw 0 2vw}
  .accomp-price{border-left:1px solid rgba(14,30,0,0.15);border-top:none;padding-left:4vw;padding-top:0;width:auto}
  .accomp-price .btn{margin-top:2vw}
  .price-note{gap:4vw;margin-top:5vw}

  /* CTA urgence : empilé (bouton SOUS le texte) + padding équilibré ; le bouton hug (justify-self via bloc portrait) */
  .cta-urgence{grid-template-columns:1fr;gap:3.5vw;padding:var(--padding-x-mobile)}
  .cta-urgence-text .section-name{margin-bottom:1.5vw}
  .cta-urgence-text .title.medium{margin-bottom:2.8vw}

  /* Contact : gap infos réduit + FORMULAIRE réduit */
  #contact{padding-bottom:8vw}
  .contact-grid{gap:5vw}
  .contact-left .title.medium{margin:2.5vw 0}
  .contact-lead{margin-bottom:4vw}
  .contact-info{gap:2.5vw}
  .ci-ico{width:6vw;height:6vw}
  .ci-ico svg{width:2.8vw;height:2.8vw}
  .contact-form{padding:var(--padding-x-mobile);gap:2.5vw}
  .form-row{grid-template-columns:1fr 1fr;gap:2.5vw}   /* paysage large : champs 2 par ligne → form moins haut */
  .field{gap:1vw}
  .field label{font-size:1.9vw}
  .field input,.field select,.field textarea{font-size:2.2vw;padding:1.8vw 2.4vw}
  .field textarea{min-height:14vw}

  /* Footer : 4 colonnes (large) + tailles bien réduites */
  .footer{padding:6vw var(--padding-x-mobile) 4vw;margin-top:8vw}
  .footer-top{grid-template-columns:repeat(4,1fr);gap:4vw 3vw;padding-bottom:4vw}
  .footer .f-logo{margin-bottom:1.2vw}
  .footer .f-logo img{height:2.8vw}
  .footer .f-tag{font-size:1.6vw}
  .footer h4{font-size:1.4vw;margin-bottom:1.6vw}
  .footer ul{font-size:1.8vw;gap:1vw}
  .footer-bottom{gap:1vw;padding-top:3vw;font-size:1.5vw}
  .footer-social{gap:2vw;margin-top:2.5vw}
  .footer-social svg{width:2.6vw;height:2.6vw}
}

/* Grands téléphones en paysage (largeur > 760px mais écran court) : breakpoint
   desktop déjà correct, on réduit juste la hero pour tout faire tenir.
   max-height:600px → exclut les vrais écrans desktop et les tablettes en paysage. */
@media (min-width:761px) and (max-height:600px){
  .hero-text{padding-bottom:3vw}
  .hero-text .title.big{font-size:5vw;margin-bottom:1.2vw}
  .hero-text .paragraph.small{margin-bottom:1.4vw}
}