/* =========================================================
   Clara LONGO — Ostéopathe D.O.
   Feuille de style principale
   ========================================================= */

/* ---------- 1. Variables ---------- */
:root{
  /* ---- fonds clairs ---- */
  --paper:      #FBF8F5;   /* le plus clair */
  --cream:      #FBF8F5;   /* fond général */
  --cream-2:    #F6F1EC;   /* variation très douce */
  --stone:      #EDE4DD;   /* beige */
  --blush:      #F5EDE8;   /* nude rosé, adouci */
  --sand:       #E7DAD2;   /* sable */
  --white:      #FFFFFF;   /* cartes */

  /* ---- bruns ---- */
  --brown-deep: #5E4336;   /* boutons, bandeau */
  --brown-dark: #5E463F;   /* pied de page */
  --brown:      #8A746C;   /* icônes, filets, petits libellés */
  --brown-soft: #C0ADA4;   /* bordures */
  --taupe:      #8A746C;

  /* ---- roses ---- */
  --rose:       #D7A49E;   /* accent d'écriture et de design */
  --rose-light: #F7D9D4;
  --rose-pale:  #FCD7D1;

  /* alias conservés dans la feuille de style */
  --clay:            #D7A49E;
  --clay-dark:       #8A746C;
  --clay-soft:       #F7D9D4;
  --blush-2:         #F7D9D4;
  --rose-warm:       #FCD7D1;
  --terracotta:      #D7A49E;   /* éléments décoratifs */
  --terracotta-light:#F7D9D4;
  --terracotta-dark: #5E4336;   /* texte et survols */

  --ink:        #5E4336;   /* titres */
  --ink-soft:   #5E463F;   /* texte courant */
  --line:       rgba(94,67,54,.13);

  /* ---- erreur de saisie ---- */
  --error:      #B3261E;   /* texte et bordure : 6,5:1 sur blanc */
  --error-bg:   #FDF3F2;   /* fond tres pale du champ fautif */
  --error-halo: rgba(179,38,30,.16);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --radius: 4px;
  --radius-lg: 28px;
  --shadow: 0 18px 50px -28px rgba(94,70,63,.35);
  --shadow-soft: 0 10px 40px -24px rgba(94,70,63,.30);
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(64px, 9vw, 128px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--cream);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  line-height:1.18;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.45rem,5.6vw,4.35rem); }
h2{ font-size:clamp(1.95rem,3.7vw,3.05rem); }
h3{ font-size:clamp(1.2rem,1.8vw,1.5rem); }
h4{ font-size:1.05rem; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.accent{
  font-family:var(--script);
  font-style:italic;
  font-weight:500;
  color:var(--clay);
  font-size:1.12em;
}

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:880px; }
.section{ padding-block:var(--section); position:relative; }
/* fonds hérités (conservés pour mentions-legales.html) */
.section--cream{ background:var(--cream-2); }
.section--blush{ background:var(--blush); }
.section--white{ background:var(--paper); }
.section--sand{ background:var(--sand); }

/* ---- un ton par grande partie ---- */
.tone-a{ background:var(--paper); }   /* #F8F6F4 */
.tone-b{ background:var(--blush); }   /* #F6E9E5 */
.tone-c{ background:var(--stone); }   /* #EFE6E0 */
.tone-d{ background:var(--sand);  }   /* #E6D9D2 */
.tone-a + .tone-a, .tone-b + .tone-b, .tone-c + .tone-c, .tone-d + .tone-d{ padding-top:0; }
.subsection{ margin-top:clamp(64px,8vw,116px); }
.subsection > .section-head{ margin-bottom:clamp(34px,4vw,56px); }
.section--brown{ background:var(--brown-deep); color:rgba(255,255,255,.82); }
.section--brown h2,.section--brown h3{ color:#fff; }

.grid{ display:grid; gap:clamp(24px,3.2vw,56px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- 4. Titres de section ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brown);
  margin:0 0 1.1rem;
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before,.eyebrow::after{
  content:""; height:1px; flex:1; max-width:60px;
  background:linear-gradient(90deg,transparent,var(--brown-soft));
}
.eyebrow::before{ background:linear-gradient(90deg,var(--brown-soft),transparent); }
.eyebrow--left{ justify-content:flex-start; }
.eyebrow--left::before{ display:none; }
.eyebrow--left::after{ max-width:48px; }
.section-head{ text-align:center; max-width:720px; margin:0 auto clamp(40px,5vw,72px); }
.section-head .eyebrow{ justify-content:center; }
.section-head p{ color:var(--ink-soft); }
.lead{ font-size:1.08em; line-height:1.85; }

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 2.2em;
  font-size:.76rem; font-weight:400;
  letter-spacing:.19em; text-transform:uppercase;
  border-radius:999px; border:1px solid transparent;
  transition:all .4s var(--ease);
  text-align:center;
}
.btn--primary{ background:var(--brown-deep); color:var(--white); box-shadow:0 12px 28px -16px rgba(94,67,54,.8); }
.btn--primary:hover{ background:var(--brown); transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(94,67,54,.85); }
.btn--ghost{ border-color:var(--brown-soft); color:var(--brown-deep); background:transparent; }
.btn--ghost:hover{ background:var(--brown-deep); border-color:var(--brown-deep); color:#fff; transform:translateY(-2px); }
.btn--light{ background:var(--white); color:var(--brown-deep); }
.btn--light:hover{ background:var(--blush); transform:translateY(-2px); }
.btn--sm{ padding:.85em 1.7em; font-size:.7rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terracotta-dark); border-bottom:1px solid var(--brown-soft);
  padding-bottom:4px; transition:.35s var(--ease);
}
.link-arrow:hover{ gap:.9em; border-color:var(--terracotta); }

/* ---------- 6. En-tête ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:18px;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.header.is-scrolled{
  background:rgba(247,243,240,.95);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-block:10px;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; flex-direction:column; line-height:1.1; }
.logo__name{ font-family:var(--serif); font-size:1.28rem; color:var(--ink); letter-spacing:.04em; }
.logo__role{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--brown); margin-top:4px; }

.nav{ display:flex; align-items:center; gap:clamp(13px,1.5vw,26px); }
.nav a{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink); position:relative; padding-block:6px; transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--terracotta); transition:width .38s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after,.nav a.is-active::after{ width:100%; }
.nav a[aria-current="page"],.nav a.is-active{ color:var(--terracotta-dark); }
.header__cta{ display:inline-flex; }

.burger{
  display:none; width:44px; height:44px; border:0; background:transparent;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; padding:0;
}
.burger span{ display:block; height:1.5px; width:26px; background:var(--ink); transition:.4s var(--ease); }
.burger span:nth-child(2){ width:18px; }
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); width:26px; }

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:.45s var(--ease);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav a{ font-family:var(--serif); font-size:1.65rem; color:var(--ink); padding:.35em 0; }
.mobile-nav .btn{ margin-top:28px; }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; min-height:min(94vh,880px); display:flex; align-items:center; padding-top:120px; padding-bottom:clamp(60px,8vw,110px); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(247,243,240,.95) 0%,rgba(247,243,240,.88) 40%,rgba(247,243,240,.42) 66%,rgba(246,233,229,.12) 100%);
}
.hero__inner{ position:relative; max-width:640px; }
.hero h1{ margin-bottom:.45em; }
.hero .lead{ max-width:480px; color:var(--ink-soft); }
.hero__facts{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,46px); margin-top:clamp(36px,4.5vw,58px); padding-top:26px; border-top:1px solid var(--line); }
.fact{ display:flex; align-items:center; gap:12px; }
.fact svg{ width:20px; height:20px; flex:none; stroke:var(--terracotta); }
.fact strong{ display:block; font-weight:400; color:var(--ink); font-size:.9rem; }
.fact span{ font-size:.76rem; letter-spacing:.06em; }
.hero__badge{
  position:absolute; right:calc(var(--gutter) - 10px); bottom:clamp(40px,7vw,90px);
  width:clamp(120px,13vw,168px); aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px);
  border:1px solid var(--rose-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:14px; gap:3px;
}
.hero__badge strong{ font-family:var(--serif); font-size:.88rem; color:var(--ink); font-weight:400; }
.hero__badge span{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); }

/* ---------- 8. Bandeau réassurance ---------- */
.reassurance{ background:var(--white); border-block:1px solid var(--line); }
.reassurance .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); padding-block:clamp(30px,3.6vw,46px); }
.reassurance__item{ display:flex; align-items:center; gap:16px; }
.reassurance__item svg{ width:30px; height:30px; flex:none; stroke:var(--brown); stroke-width:1.1; }
.reassurance__item strong{ display:block; font-weight:400; color:var(--ink); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; }
.reassurance__item span{ font-size:.82rem; }

/* ---------- 9. Blocs image + texte ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,84px); align-items:center; }
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow); }
.split__media--tall img{ aspect-ratio:3/4; object-fit:cover; }
.split__media--soft img{ border-radius:var(--radius-lg); }
.split__media::before{
  content:""; position:absolute; inset:-18px -18px 40px 24px; z-index:-1;
  border:1px solid var(--brown-soft); border-radius:var(--radius-lg);
  opacity:.55;
}
.split__stamp{
  position:absolute; left:-26px; bottom:34px;
  background:var(--white); box-shadow:var(--shadow-soft);
  border-radius:var(--radius-lg); padding:20px 26px; max-width:230px;
}
.split__stamp strong{ display:block; font-family:var(--serif); font-size:1.5rem; color:var(--terracotta); font-weight:400; }
.split__stamp span{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; }

/* ---------- 10. Cartes ---------- */
.card{
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(26px,2.8vw,38px);
  border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  height:100%;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.card__icon{ width:60px; height:60px; margin-bottom:18px; stroke:var(--brown); stroke-width:1.15; fill:none; }

/* ---- icones illustrees : PNG detoure, deja teinte a la couleur du theme ---- */
.card__icon--img{ display:block; width:60px; height:60px; margin-bottom:18px; object-fit:contain; }

.card h2{ font-size:clamp(1.2rem,1.8vw,1.5rem); margin-bottom:.5em; }
.card p{ font-size:.93rem; }
.card--plain{ background:transparent; border:0; padding-inline:0; }
.card--plain:hover{ transform:none; box-shadow:none; }
.card--center{ text-align:center; }
.card--center .card__icon{ margin-inline:auto; }
.card__tags{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.card__tags li{
  font-size:.72rem; letter-spacing:.04em; color:var(--brown-deep);
  background:var(--stone); border-radius:999px; padding:.35em 1em;
}

/* ---------- 11. Étapes (déroulé consultation) ---------- */
.steps{ counter-reset:step; display:grid; gap:0; }
.step{
  counter-increment:step;
  display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3vw,44px);
  padding-block:clamp(26px,3.4vw,42px);
  border-bottom:1px solid var(--line);
}
.step:last-child{ border-bottom:0; }
.step__num{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--brown-soft); background:var(--white);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.3rem; color:var(--brown);
}
.step__num::before{ content:"0" counter(step); }
.step__body h3{ margin-bottom:.35em; }
.step__body p{ font-size:.95rem; max-width:60ch; }
.step__time{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brown); display:block; margin-bottom:.5em; }

/* ---------- 12. Valeurs ---------- */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px); text-align:center; }
.value__icon{ width:52px; height:52px; margin:0 auto 18px; stroke:var(--brown); stroke-width:1; fill:none; }
/* variante image : PNG detoure, deja teinte a la couleur du theme,
   comme les icones de la page « Pour qui ». Meme gabarit que la version
   tracee, pour que les deux puissent cohabiter. */
.value__icon--img{ display:block; object-fit:contain; }
.value h3{ font-size:1.15rem; margin-bottom:.45em; }
.value p{ font-size:.9rem; }

/* ---------- 13. Tarifs ---------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,32px); }
.price{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(30px,3.4vw,46px) clamp(22px,2.6vw,34px); text-align:center;
  position:relative; transition:.45s var(--ease);
}
.price:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.price__icon{ width:44px; height:44px; margin:0 auto 18px; stroke:var(--brown); stroke-width:1.05; fill:none; }
.price h3{
  font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--sans); font-weight:400; color:var(--ink);
  min-height:2.8em; display:flex; align-items:center; justify-content:center; margin-bottom:0;
}
.price__amount{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.1rem); color:var(--terracotta); line-height:1; margin:.25em 0 .3em; }
.price__meta{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.price__note{ font-size:.88rem; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.pricing-footnote{ text-align:center; margin-top:clamp(28px,3vw,42px); font-size:.9rem; }

/* ---------- 14. Avis Google ---------- */
.reviews__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-bottom:clamp(30px,4vw,52px); }
.google-score{ display:flex; align-items:center; gap:18px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 26px; }
.google-score__logo{ width:34px; height:34px; flex:none; }
.google-score__num{ font-family:var(--serif); font-size:1.9rem; color:var(--ink); line-height:1; }
.google-score__meta{ font-size:.78rem; letter-spacing:.08em; }
.stars{ display:flex; gap:3px; margin-bottom:4px; }
.stars svg{ width:15px; height:15px; fill:#E8A33D; }
.review{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,2.8vw,34px); display:flex; flex-direction:column; gap:16px; }
.review__text{ font-size:.94rem; font-style:italic; color:var(--ink-soft); flex:1; }
.review__foot{ display:flex; align-items:center; gap:13px; }
.review__avatar{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--rose-light); color:var(--brown-deep);
  font-family:var(--serif); font-size:1rem; line-height:1;
}
.review__author{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.review__date{ font-size:.74rem; color:var(--brown); }

/* --- Bandeau d'avis defilant ---------------------------------------------
   Le ruban avance en continu et s'arrete au survol / a la tabulation.
   Seuls les avis notes 4 ou 5 sont affiches : la regle ci-dessous masque
   toute carte dont l'attribut data-rating est different de 4 ou 5.
   -------------------------------------------------------------------- */
.reviews-marquee{
  --rev-gap: clamp(18px,2.4vw,30px);
  position:relative; overflow:hidden; padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.reviews-marquee__track{
  display:flex; gap:var(--rev-gap); width:max-content;
  animation:reviews-scroll var(--marquee-duration,46s) linear infinite;
  will-change:transform;
}
.reviews-marquee__group{ display:flex; gap:var(--rev-gap); }
.reviews-marquee .review{ width:clamp(272px,29vw,376px); flex:none; }
.reviews-marquee .review:not([data-rating="4"]):not([data-rating="5"]){ display:none; }
.reviews-marquee:hover .reviews-marquee__track,
.reviews-marquee:focus-within .reviews-marquee__track{ animation-play-state:paused; }
@keyframes reviews-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(-50% - var(--rev-gap) / 2),0,0); }
}
/* Sans JavaScript (ou animation desactivee) : ruban simplement deroulable */
.reviews-marquee--static{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-inline:var(--gutter); }
.reviews-marquee--static{ -webkit-mask-image:none; mask-image:none; }
.reviews-marquee--static .reviews-marquee__track{ animation:none; }

/* ---------- 15. FAQ ---------- */
.faq{ display:grid; gap:12px; }
.faq__item{ background:var(--white); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px clamp(20px,2.4vw,30px); background:transparent; border:0; text-align:left;
  font-family:var(--sans); font-size:1rem; font-weight:400; color:var(--ink); transition:color .3s;
}
.faq__q:hover{ color:var(--terracotta-dark); }
.faq__q i{ position:relative; width:15px; height:15px; flex:none; }
.faq__q i::before,.faq__q i::after{ content:""; position:absolute; background:var(--terracotta); transition:.4s var(--ease); }
.faq__q i::before{ inset:7px 0 auto 0; height:1.5px; }
.faq__q i::after{ inset:0 7px auto 7px; width:1.5px; height:15px; }
.faq__item.is-open .faq__q i::after{ transform:rotate(90deg); opacity:0; }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq__a > div{ padding:0 clamp(20px,2.4vw,30px) 26px; font-size:.94rem; max-width:78ch; }

/* ---------- 16. Accès / carte ---------- */
.access{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:center; }
.access__list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.access__list li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.access__list svg{ width:22px; height:22px; stroke:var(--brown); stroke-width:1.2; fill:none; margin-top:3px; }
.access__list strong{ display:block; font-weight:400; color:var(--ink); }
.access__list span{ font-size:.92rem; }
.map{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); background:var(--stone); }
.map iframe{ width:100%; height:clamp(320px,42vw,460px); border:0; display:block; filter:saturate(.55) contrast(.95); }

/* ---------- 17. Bandeau CTA ---------- */
.cta-band{ background:var(--brown-deep); color:var(--white); text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ color:var(--white); }
.cta-band p{ color:rgba(255,255,255,.85); max-width:600px; margin-inline:auto; }
.cta-band .eyebrow{ color:rgba(255,255,255,.8); justify-content:center; }
.cta-band .eyebrow::before,.cta-band .eyebrow::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.5)); }
.cta-band .btn-row{ justify-content:center; margin-top:32px; }
.cta-band .btn--ghost{ border-color:rgba(255,255,255,.55); color:var(--white); }
.cta-band .btn--ghost:hover{ background:var(--white); color:var(--brown-deep); border-color:var(--white); }
.cta-band .btn--light{ color:var(--brown-deep); }

/* ---------- 18. Parcours (formation & experience) ---------- */
.parcours{ max-width:820px; margin-inline:auto; }
.parcours__group + .parcours__group{ margin-top:clamp(42px,5vw,68px); }

.track{
  --track-year: clamp(104px,9vw,116px);
  --track-gap:  clamp(18px,2.4vw,30px);
  --track-dot:  13px;
  position:relative; list-style:none; margin:0; padding:0; display:grid;
}
/* fil vertical continu, aligne sur le centre des pastilles */
.track::before{
  content:""; position:absolute; top:1.15em; bottom:1.15em;
  left:calc(var(--track-year) + var(--track-gap) + (var(--track-dot) - 1px) / 2);
  width:1px; background:var(--brown-soft);
}
/* pas de fil pour un groupe qui ne compte qu'une seule entree */
.track:has(.track__item:only-child)::before{ display:none; }
.track__item{
  display:grid;
  grid-template-columns:var(--track-year) var(--track-dot) 1fr;
  column-gap:var(--track-gap);
  padding-block:clamp(20px,2.6vw,30px);
}
.track__item:first-child{ padding-top:0; }
.track__item:last-child{ padding-bottom:0; }

.track__year{
  font-family:var(--serif); font-size:1.3rem; line-height:1.25;
  color:var(--terracotta); text-align:right; padding-top:.04em;
}
.track__year .placeholder{ font-size:.6em; }

.track__rail{ position:relative; }
.track__rail::before{
  content:""; position:absolute; left:0; top:.42em;
  width:var(--track-dot); height:var(--track-dot); border-radius:50%;
  background:var(--paper); border:1.5px solid var(--terracotta);
}

.track__body h3{ font-size:1.12rem; margin-bottom:.25em; }
.track__org{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brown); margin-bottom:.75em;
}
.track__body p:last-child:not(.track__org){ font-size:.93rem; margin:0; }

@media (max-width:600px){
  .track{ --track-gap:16px; }
  .track::before{ left:calc((var(--track-dot) - 1px) / 2); }
  .track__item{
    grid-template-columns:var(--track-dot) 1fr;
    grid-template-rows:auto auto;
  }
  .track__rail{ grid-column:1; grid-row:1 / span 2; }
  .track__year{
    grid-column:2; grid-row:1;
    text-align:left; font-size:1rem; margin-bottom:.35em;
  }
  .track__year--none{ display:none; }
  .track__body{ grid-column:2; grid-row:2; }
}

/* ---------- 19. Pied de page ---------- */
.footer{ background:var(--brown-dark); color:rgba(255,255,255,.72); font-size:.9rem; }
.footer a{ transition:color .3s; }
.footer a:hover{ color:var(--clay-soft); }
.footer__logo .logo__name{ letter-spacing:.05em; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(28px,4vw,54px); padding-block:clamp(52px,6vw,84px); }
.footer h2{ color:var(--white); font-family:var(--sans); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.4em; font-weight:400; }
.footer__logo .logo__name{ color:var(--white); font-size:1.35rem; }
.footer__logo .logo__role{ color:var(--clay-soft); }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer p{ line-height:1.8; }
.socials{ display:flex; gap:12px; margin-top:20px; }
.socials a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center; transition:.4s var(--ease);
}
.socials a:hover{ background:var(--terracotta); border-color:var(--terracotta); transform:translateY(-3px); }
.socials svg{ width:17px; height:17px; fill:currentColor; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-block:24px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:.78rem; color:rgba(255,255,255,.5);
}
.footer__bottom ul{ display:flex; gap:20px; }

/* ---------- 20. Divers ---------- */
.page-hero{ padding-top:clamp(150px,15vw,210px); padding-bottom:clamp(48px,6vw,80px); background:var(--blush); text-align:center; position:relative; overflow:hidden; }
.page-hero h1{ font-size:clamp(2.1rem,4.4vw,3.4rem); margin-bottom:.3em; }
.page-hero p{ max-width:620px; margin-inline:auto; }
.page-hero .eyebrow{ justify-content:center; }

.placeholder{
  display:inline-block; background:#FFF3CD; color:#8A6100;
  border:1px dashed #D6A93B; border-radius:4px;
  padding:.05em .5em; font-size:.85em; font-family:var(--sans); letter-spacing:.02em;
}

.note{ background:var(--stone); border-left:2px solid var(--brown); padding:18px 24px; border-radius:0 12px 12px 0; font-size:.92rem; }

/* ---- rappel de prevention (a cote du bouton de prise de rendez-vous) ---- */
.note--care{
  display:flex; align-items:flex-start; gap:14px;
  max-width:660px; margin:22px auto 0; text-align:left;
  background:var(--white); border:1px solid var(--line);
  border-left:2px solid var(--rose);
  padding:16px 22px; font-size:.88rem; line-height:1.65; color:var(--ink-soft);
}
.note--care svg{
  width:22px; height:22px; flex:none; margin-top:2px;
  stroke:var(--rose); stroke-width:1.3; fill:none;
}
.note--care strong{ font-weight:400; color:var(--ink); }
@media (max-width:560px){
  .note--care{ padding:15px 18px; gap:11px; }
}

.deco-leaf{ position:absolute; opacity:.35; pointer-events:none; z-index:0; }
.deco-leaf--tr{ top:-40px; right:-60px; width:280px; }
.deco-leaf--bl{ bottom:-60px; left:-70px; width:320px; transform:rotate(150deg); }
.section > .wrap{ position:relative; z-index:1; }

/* ---------- 21. Animations ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  .reviews-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; padding-inline:var(--gutter); }
  .reviews-marquee__track{ animation:none; }
  .reviews-marquee__group[aria-hidden="true"]{ display:none; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width:1080px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .values{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1120px){
  .nav,.header__cta{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:900px){
  .split,.access{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .split__media--tall img{ aspect-ratio:4/3; }
  .split__stamp{ left:auto; right:20px; bottom:-24px; }
  .pricing,.grid-3{ grid-template-columns:1fr; }
  .reassurance .wrap{ grid-template-columns:1fr; gap:22px; }
  .hero__badge{ display:none; }
}
@media (max-width:600px){
  .grid-2,.grid-4,.values{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:16px; }
  .step__num{ width:52px; height:52px; font-size:1.1rem; }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column; }
  .hero{ min-height:auto; padding-top:130px; }
  .hero__bg::after{ background:linear-gradient(180deg,rgba(247,243,240,.93) 0%,rgba(247,243,240,.86) 55%,rgba(246,233,229,.45) 100%); }
  .footer__bottom{ flex-direction:column; }
  .footer__bottom ul{ flex-direction:column; gap:8px; }
}

/* ---------- 23. Impression ---------- */
@media print{
  .header,.mobile-nav,.cta-band,.footer,.btn{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* =========================================================
   24. Composants ajoutés (v4)
   ========================================================= */

/* ---- grille auto (cartes de largeur régulière) ---- */
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }

/* ---- sous-titre de bloc interne ---- */
.block-title{
  display:flex; align-items:center; gap:16px;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--brown);
  margin:0 0 clamp(26px,3vw,40px);
}
.block-title::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--brown-soft),transparent); }

/* ---- info-bulles au survol (paiement / mutuelle / annulation) ---- */
.popcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2vw,24px); }
.popcard{ position:relative; }
.popcard__trigger{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:22px clamp(18px,2vw,26px); color:var(--ink);
  font-family:var(--sans); font-size:.95rem; font-weight:400;
  transition:.35s var(--ease);
}
.popcard__trigger svg{ width:26px; height:26px; flex:none; stroke:var(--brown); stroke-width:1.1; fill:none; }
.popcard__trigger i{
  margin-left:auto; width:20px; height:20px; flex:none; border-radius:50%;
  border:1px solid var(--brown-soft); display:grid; place-items:center;
  font-style:normal; font-size:.66rem; color:var(--brown); line-height:1;
}
.popcard__trigger i::before{ content:"+"; }
.popcard:hover .popcard__trigger,
.popcard:focus-within .popcard__trigger,
.popcard.is-open .popcard__trigger{ border-color:var(--clay-soft); box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.popcard.is-open .popcard__trigger i::before{ content:"–"; }

.popcard__panel{
  position:absolute; z-index:20; top:calc(100% + 12px); left:50%;
  width:min(340px,84vw); transform:translate(-50%,10px);
  background:var(--white); border:1px solid var(--blush-2);
  border-radius:20px; padding:22px 24px;
  box-shadow:0 26px 60px -30px rgba(94,70,63,.55);
  opacity:0; visibility:hidden; transition:.38s var(--ease);
}
.popcard__panel::before{
  content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px;
  margin-left:-6px; transform:rotate(45deg);
  background:var(--white); border-left:1px solid var(--blush-2); border-top:1px solid var(--blush-2);
}
.popcard:hover .popcard__panel,
.popcard:focus-within .popcard__panel,
.popcard.is-open .popcard__panel{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.popcard__panel h3{ font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brown); margin-bottom:1em; }
.popcard__panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.popcard__panel li{ position:relative; padding-left:18px; font-size:.9rem; line-height:1.6; }
.popcard__panel li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--clay-soft); }
.popcard__panel p{ font-size:.9rem; line-height:1.65; }

/* ---- lieu d'exercice ---- */
.lieu{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft);
}
.lieu + .lieu{ margin-top:clamp(28px,3.5vw,44px); }
.lieu__head{ padding:clamp(28px,3.2vw,42px) clamp(24px,3vw,44px) 0; }
.lieu__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terracotta); background:var(--blush);
  border-radius:999px; padding:.5em 1.2em; margin-bottom:18px;
}
.lieu__head h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:.25em; }
.lieu__addr{ font-size:.92rem; color:var(--ink-soft); }
.lieu__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  padding:clamp(24px,3vw,38px) 0 0;
}
.lieu__info{ padding:0 clamp(24px,3vw,44px) clamp(26px,3vw,38px); }
.lieu__info p{ font-size:.95rem; }
.lieu__map{ min-height:300px; background:var(--stone); }
.lieu__map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:saturate(.5) contrast(.95); }

/* ---- Carte Google : ecran de consentement ---------------------------------
   Occupe exactement la place que prendra l'iframe, pour qu'aucun decalage de
   mise en page ne se produise au moment de l'affichage de la carte.
   Voir ou-me-trouver.html et le bloc 9 de assets/js/main.js. */
.map-ask{
  height:100%; min-height:340px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  padding:clamp(26px,3vw,40px) clamp(20px,3vw,34px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.55), transparent 62%),
    var(--stone);
}
.map-ask__pin{ width:34px; height:34px; stroke:var(--brown); stroke-width:1.2; fill:none; }
.map-ask__addr{
  margin:0; font-family:var(--serif); font-size:1.06rem;
  line-height:1.45; color:var(--ink);
}
.map-ask__btn{ margin:2px 0 0; }
.map-ask__note{
  margin:0; max-width:34ch;
  font-size:.76rem; line-height:1.5; color:var(--brown);
}
.map-ask__alt{
  font-size:.78rem; color:var(--brown-deep);
  border-bottom:1px solid var(--brown-soft); padding-bottom:1px;
  transition:.3s var(--ease);
}
.map-ask__alt:hover{ color:var(--terracotta-dark); border-bottom-color:var(--terracotta); }
/* Une fois la carte affichee, le bloc s'efface completement. */
.map-ask[hidden]{ display:none; }
.lieu__foot{
  border-top:1px solid var(--line); background:var(--cream-2);
  padding:clamp(24px,3vw,34px) clamp(24px,3vw,44px);
  display:grid; grid-template-columns:1fr auto; gap:clamp(20px,3vw,40px); align-items:center;
}

/* jours de présence */
.days{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.day{
  width:52px; padding:.55em 0; text-align:center; border-radius:12px;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--stone); color:var(--brown-soft); border:1px solid transparent;
}
.day.is-on{ background:var(--rose); color:var(--brown-deep); }
.day.is-half{ background:var(--white); color:var(--brown-deep); border-color:var(--rose); }
.hours{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:7px; font-size:.9rem; }
.hours li{ display:flex; justify-content:space-between; gap:18px; max-width:340px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.hours strong{ font-weight:400; color:var(--ink); }

/* ---- formulaire ---- */
.form{ display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brown); margin-bottom:8px; }
.form input,.form textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; font-weight:300; color:var(--ink);
  background:var(--white); border:1px solid var(--blush-2); border-radius:14px;
  padding:14px 18px; transition:.3s var(--ease);
}
.form textarea{ min-height:150px; resize:vertical; }
.form input:focus,.form textarea:focus{ outline:0; border-color:var(--clay); box-shadow:0 0 0 3px rgba(198,146,138,.18); }

/* ---- Champ mal renseigne -------------------------------------------------
   Pose par assets/js/main.js au moment de l'envoi, retire des que le visiteur
   corrige le champ. Le rouge est porte par la bordure, un fond tres pale et
   un halo : trois signaux, pour que l'erreur reste perceptible meme sans
   distinguer finement les couleurs. Le selecteur double .is-error:focus
   garde le champ rouge pendant qu'on le corrige. */
/* Le contexte .faq-form redefinit le fond des champs plus loin dans ce
   fichier (« .faq-form .form input », plus specifique) : on double donc le
   selecteur, sinon le fond rouge pale ne passerait pas sur la page FAQ —
   c'est-a-dire sur le seul formulaire du site. */
.form input.is-error,
.form textarea.is-error,
.faq-form .form input.is-error,
.faq-form .form textarea.is-error{
  border-color:var(--error);
  background:var(--error-bg);
  box-shadow:0 0 0 3px var(--error-halo);
}
.form input.is-error:focus,
.form textarea.is-error:focus,
.faq-form .form input.is-error:focus,
.faq-form .form textarea.is-error:focus{
  border-color:var(--error);
  background:var(--error-bg);
  box-shadow:0 0 0 3px var(--error-halo);
}
/* Le libelle du champ fautif vire lui aussi : l'oeil trouve la ligne sans
   avoir a comparer les bordures. :has() est ignore par les navigateurs
   trop anciens, qui gardent simplement le libelle brun : rien ne casse. */
.form div:has(> .is-error) label{ color:var(--error); }

/* Ligne de message sous le bouton, en mode erreur. */
.form__note.is-error{
  color:var(--error);
  display:flex; gap:8px; align-items:flex-start;
}
.form__note.is-error::before{
  content:"!";
  flex:0 0 auto;
  width:16px; height:16px; margin-top:1px;
  border-radius:50%; background:var(--error); color:#fff;
  font-size:.66rem; line-height:16px; text-align:center;
}
.form__note{ font-size:.8rem; color:var(--brown-dark); }
.form__note:empty{ display:none; } /* aucun espace tant qu'il n'y a pas de message */
.form__caution{ font-size:.8rem; line-height:1.5; color:var(--brown-dark); }
/* Mention d'information RGPD, sous le formulaire : discrete mais lisible. */
.form__rgpd{ margin-top:.9em; padding-top:.9em; border-top:1px solid rgba(94,70,63,.15);
  font-size:.74rem; line-height:1.55; color:var(--taupe); }
.form__rgpd a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---- contact simplifié ---- */
.contact-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2vw,24px); max-width:900px; margin-inline:auto; }
.tile{
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  padding:clamp(26px,2.8vw,34px); text-align:center; transition:.4s var(--ease);
  display:flex; flex-direction:column; align-items:center;
}
.tile > :last-child{ margin-top:auto; }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.tile svg{ width:30px; height:30px; margin:0 auto 16px; stroke:var(--brown); stroke-width:1.1; fill:none; }
.tile strong{ display:block; font-family:var(--serif); font-size:1.12rem; font-weight:400; color:var(--ink); margin-bottom:.35em; }
.tile span{ display:block; font-size:.9rem; margin-bottom:1em; }

@media (max-width:900px){
  .lieu__grid{ grid-template-columns:1fr; }
  .lieu__map{ order:-1; }
  .lieu__foot{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .popcard__panel{
    position:static; width:auto; transform:none; opacity:1; visibility:visible;
    box-shadow:none; margin-top:10px; border-color:var(--line);
  }
  .popcard__panel::before{ display:none; }
  .popcard__trigger i{ display:none; }
  .hint{ display:none; }
}


/* =========================================================
   25. Composants v5
   ========================================================= */

/* ---- accueil avec portrait ---- */
.hero{ min-height:auto; padding-top:clamp(130px,13vw,175px); padding-bottom:clamp(48px,6vw,86px); }
.hero__deco{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__deco img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__deco::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(248,246,244,.97) 0%,rgba(248,246,244,.9) 45%,rgba(248,246,244,.6) 100%);
}
.hero__inner{
  position:relative; z-index:1; max-width:var(--maxw);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center;
}
.hero__text{ max-width:600px; }
.hero__facts{ margin-top:clamp(30px,3.6vw,46px); }

.hero__portrait{ position:relative; margin:0; }
.hero__portrait img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  border-radius:50% 50% 26px 26px / 34% 34% 26px 26px;
  box-shadow:0 30px 70px -34px rgba(94,70,63,.55);
}
.hero__portrait::before{
  content:""; position:absolute; inset:18px -22px -26px 22px; z-index:-1;
  border:1px solid var(--clay-soft);
  border-radius:50% 50% 26px 26px / 34% 34% 26px 26px;
}
.hero__stamp{
  position:absolute; left:-18px; bottom:26px;
  background:var(--white); border-radius:18px; padding:16px 22px;
  box-shadow:var(--shadow-soft); text-align:left;
}
.hero__stamp strong{ display:block; font-family:var(--serif); font-size:1.05rem; font-weight:400; color:var(--ink); }
.hero__stamp span{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--terracotta); }
.reassurance{ background:transparent; border-top:1px solid var(--line); border-bottom:0; }

/* ---- citation mise en avant ---- */
.pull{
  margin:26px 0; padding:4px 0 4px 24px;
  border-left:2px solid var(--clay-soft);
  font-family:var(--script); font-style:italic; font-size:1.42rem; line-height:1.5;
  color:var(--brown-deep);
}

/* ---- lieu d'exercice (version unique, centrale) ---- */
.lieu__grid{ padding-top:0; }
.lieu__info{ padding:clamp(30px,3.4vw,46px) clamp(24px,3vw,44px); }
.lieu__info h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:.2em; }

/* ---- FAQ en deux colonnes ---- */
.faq-layout{ display:grid; grid-template-columns:1.3fr .8fr; gap:clamp(26px,3.4vw,52px); align-items:start; }
.faq-form{ position:sticky; top:104px; }
.faq-form .card:hover{ transform:none; box-shadow:none; }
.faq-form .form input,.faq-form .form textarea{ background:var(--paper); }
.faq-form .form textarea{ min-height:120px; }
.faq-form .btn{ width:100%; }

/* ---- coordonnées affichées en clair (pastille des tuiles de contact) ---- */
.coord{
  display:grid; place-items:center;
  min-height:46px; padding:.7em 1.5em; margin-top:10px; white-space:nowrap;
  border:1px solid var(--brown-soft); border-radius:999px;
  font-size:.88rem; letter-spacing:.03em;
  color:var(--brown-deep); transition:.35s var(--ease);
}
.tile:hover .coord,.coord:hover,.coord:focus-visible{ border-color:var(--terracotta); background:var(--blush); color:var(--brown-deep); }
@media (max-width:420px){ .coord{ font-size:.8rem; padding:.7em 1.1em; } }

/* ---- réseaux sociaux ---- */
.socials-big{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(16px,2vw,22px); max-width:1000px; margin-inline:auto; }
.social-card{
  display:flex; align-items:center; gap:16px;
  background:var(--white); border:1px solid var(--line); border-radius:22px;
  padding:20px clamp(18px,2vw,24px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.social-card__icon{
  width:52px; height:52px; flex:none; border-radius:16px;
  display:grid; place-items:center; color:#fff;
  transition:transform .45s var(--ease);
}
.social-card__icon svg{ width:26px; height:26px; }
.social-card--ig .social-card__icon{ background:linear-gradient(135deg,#F09433 0%,#DC2743 45%,#BC1888 100%); }
.social-card--fb .social-card__icon{ background:#1877F2; }
.social-card--go .social-card__icon{ background:linear-gradient(135deg,#4285F4 0%,#34A853 45%,#EA4335 100%); }
.social-card__body{ display:flex; flex-direction:column; line-height:1.35; }
.social-card__body strong{ font-family:var(--serif); font-size:1.14rem; font-weight:400; color:var(--ink); }
.social-card__body em{ font-style:normal; font-size:.84rem; color:var(--brown); white-space:nowrap; }
.social-card__go{ margin-left:auto; color:var(--brown-soft); font-size:1.15rem; transition:.4s var(--ease); }
.social-card:hover{ transform:translateY(-5px); box-shadow:0 22px 48px -26px rgba(94,70,63,.5); border-color:var(--clay-soft); }
.social-card:hover .social-card__icon{ transform:rotate(-6deg) scale(1.06); }
.social-card:hover .social-card__go{ color:var(--terracotta); transform:translateX(5px); }

@media (max-width:980px){
  .faq-layout{ grid-template-columns:1fr; }
  .faq-form{ position:static; }
}
@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__portrait{ max-width:340px; margin:12px auto 0; }
  .hero__stamp{ left:auto; right:-6px; }
  .hero__deco::after{ background:linear-gradient(180deg,rgba(248,246,244,.95) 0%,rgba(248,246,244,.88) 60%,rgba(248,246,244,.7) 100%); }
}

.split--sticky{ align-items:start; }
.split--sticky .split__media{ position:sticky; top:104px; }
@media (max-width:900px){ .split--sticky .split__media{ position:static; } }

/* =========================================================
   26. Logo & photos (v6)
   ========================================================= */

/* ---- logo ---- */
.logo{ flex-direction:row; align-items:center; gap:13px; }
.logo__mark{
  width:clamp(42px,4vw,54px); height:auto; flex:none;
  transition:width .45s var(--ease);
}
.logo__text{ display:flex; flex-direction:column; line-height:1.1; }
.header.is-scrolled .logo__mark{ width:clamp(38px,3.4vw,46px); }
.mobile-nav__logo{ width:96px; height:auto; margin-bottom:18px; }
.footer__logo{ align-items:center; }
.footer__logo .logo__mark{ width:58px; }

/* ---- bande photo ---- */
.band{
  margin:0 0 clamp(34px,4.5vw,58px);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(94,70,63,.5);
}
.band img{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block; }

/* ---- photo de fond du bandeau rendez-vous ---- */
.cta-band__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(94,70,63,.90) 0%,rgba(106,75,66,.93) 100%);
}
.cta-band > .wrap{ position:relative; z-index:1; }

/* ---- accueil : le portrait prend le dessus sur le décor ---- */
.hero__deco img{ opacity:.42; }
.hero__portrait{ max-width:440px; margin-left:auto; }
.hero__portrait img{ aspect-ratio:4/5; }

@media (max-width:600px){
  .logo__mark{ width:40px; }
  .band img{ aspect-ratio:16/10; }
}

/* ---- menu mobile : bouton et logo bien contenus ---- */
.mobile-nav{ padding:96px 24px 40px; }
.mobile-nav .btn{
  width:auto; min-width:250px; max-width:100%; margin-top:26px;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.13em; white-space:nowrap;
}
.mobile-nav a.btn--primary{ color:#fff; }
.mobile-nav__logo{ width:84px; }

/* =========================================================
   27. v7 — accueil fondu, tarifs dans le cabinet, pastilles réseaux
   ========================================================= */

/* ---------- Accueil ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:min(94vh,880px);
  display:flex; align-items:center;
  padding-top:clamp(140px,14vw,180px);
  padding-bottom:clamp(70px,9vw,120px);
  background:linear-gradient(160deg,var(--paper) 0%,var(--cream) 55%,var(--blush) 100%);
}
.hero__inner{ position:relative; z-index:2; display:block; }
.hero__text{ max-width:min(580px,52%); }
.hero__facts{ margin-top:clamp(30px,3.6vw,48px); border-top:1px solid var(--line); }
.hero .btn-row{ margin-top:34px; }   /* était un style en ligne dans index.html */

.hero__photo{
  position:absolute; z-index:1; right:-2%; top:0;
  width:min(58%,900px); height:100%;
  object-fit:cover; object-position:56% 8%;
  filter:saturate(.94) contrast(1.02);
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 13%, rgba(0,0,0,.70) 36%, #000 58%),
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.92) 6%, #000 15%, #000 76%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 13%, rgba(0,0,0,.70) 36%, #000 58%),
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.92) 6%, #000 15%, #000 76%, rgba(0,0,0,0) 100%);
  mask-composite:intersect;
}

/* formes organiques, dans les tons du logo */
.blob{ position:absolute; z-index:0; display:block; pointer-events:none; }
.blob--1{
  right:-5%; top:0%; width:min(54vw,720px); aspect-ratio:1/1.06;
  background:linear-gradient(150deg,var(--rose-pale) 0%,var(--rose-light) 100%);
  border-radius:58% 42% 63% 37% / 45% 55% 45% 55%;
  opacity:.9; animation:blobFloat 16s ease-in-out infinite;
}
.blob--2{
  right:32%; bottom:-16%; width:min(34vw,440px); aspect-ratio:1;
  background:var(--stone); border-radius:63% 37% 45% 55% / 55% 48% 52% 45%;
  opacity:.55; animation:blobFloat 21s ease-in-out infinite reverse;
}
.blob--3{
  left:-9%; bottom:4%; width:min(26vw,330px); aspect-ratio:1/.92;
  background:var(--cream-2); border-radius:47% 53% 38% 62% / 58% 42% 58% 42%;
  opacity:.85; animation:blobFloat 26s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%    { transform:translate3d(0,-16px,0) rotate(2.5deg); }
}

.hero__scroll{
  position:absolute; left:var(--gutter); bottom:clamp(22px,4vw,42px); z-index:2;
  display:inline-flex; align-items:center; gap:13px;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brown);
  transition:color .3s;
}
.hero__scroll:hover{ color:var(--terracotta-dark); }
.hero__scroll span{ width:46px; height:1px; background:var(--brown-soft); position:relative; overflow:hidden; }
.hero__scroll span::after{
  content:""; position:absolute; inset:0; background:var(--terracotta);
  transform:translateX(-100%); animation:scrollCue 2.6s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(100%)} 100%{transform:translateX(100%)} }

/* ---------- Cabinet : tarifs & infos pratiques dans la carte ---------- */
.lieu__block{
  border-top:1px solid var(--line);
  padding:clamp(28px,3.4vw,42px) clamp(24px,3vw,44px);
  background:var(--white);
}
.lieu__block--last{ background:var(--cream-2); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.lieu__block .popcards{ margin-top:4px; }

.rates{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rate{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:15px clamp(16px,2vw,22px);
  border:1px solid var(--line); border-radius:16px; background:var(--paper);
  transition:.35s var(--ease);
}
.rate:hover{ border-color:var(--clay-soft); transform:translateX(3px); }
.rate > svg{ width:34px; height:34px; flex:none; stroke:var(--brown); stroke-width:1.1; fill:none; }
.rate__body strong{ display:block; font-weight:400; color:var(--ink); font-size:1rem; }
.rate__body span{ font-size:.85rem; line-height:1.6; }
.rate__price{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2vw,1.8rem); color:var(--terracotta); }
.rates__note{ margin:18px 0 0; font-size:.86rem; }

/* ---------- Contact : réseaux dans la continuité ---------- */
.follow{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,60px); align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,2.8vw,36px) clamp(24px,3vw,42px);
  max-width:900px; margin-inline:auto;
}
.follow__intro p{ margin:0; font-size:.93rem; max-width:44ch; }
.follow__pills{ display:flex; gap:clamp(16px,2.4vw,32px); }
.pill{ display:flex; flex-direction:column; align-items:center; gap:11px; }
.pill__shape{
  width:66px; height:66px; display:grid; place-items:center;
  border-radius:58% 42% 63% 37% / 45% 55% 45% 55%;
  transition:border-radius .6s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pill__shape svg{ width:26px; height:26px; }
.pill--1 .pill__shape{ background:var(--rose); color:var(--brown-deep); }
.pill--2 .pill__shape{ background:var(--rose-light); color:var(--brown-deep); }
.pill--3 .pill__shape{ background:var(--sand); color:var(--brown-deep); }
.pill__label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brown); transition:color .3s; }
.pill:hover .pill__shape{
  border-radius:42% 58% 37% 63% / 55% 45% 55% 45%;
  transform:translateY(-5px) rotate(-6deg);
  box-shadow:0 16px 34px -18px rgba(94,70,63,.65);
}
.pill:hover .pill__label{ color:var(--terracotta-dark); }

/* La photo d'accueil est encadrée d'un <picture> (WebP + repli JPEG). Sans
   cette règle, ce <picture> deviendrait l'enfant du hero à la place de
   l'image : les règles ci-dessous — dont « order:2 », qui place la photo
   SOUS le texte en mobile — ne s'appliqueraient plus. display:contents le
   fait disparaître de la mise en page, l'image redevient enfant direct. */
.hero > picture{ display:contents; }

/* ---------- Responsive v7 ---------- */
@media (max-width:900px){
  .hero{
    min-height:auto; flex-direction:column; align-items:stretch;
    padding-top:118px; padding-bottom:0;
    background:linear-gradient(170deg,var(--paper) 0%,var(--cream) 60%,var(--blush) 100%);
  }
  .hero__inner{ order:1; }
  .hero__text{ max-width:none; }
  .hero__photo{
    order:2; position:relative; right:auto; width:100%; height:auto; aspect-ratio:4/3.3;
    margin-top:36px; object-position:58% 16%;
    /* right:auto annule le « right:-2% » de la regle desktop : en position
       relative il decalait la photo de 2% vers la droite (15 px sur une
       tablette de 768), la laissant rognee par l'overflow:hidden du hero. */
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 20%,#000 100%);
            mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 20%,#000 100%);
  }
  .hero__scroll{ display:none; }
  .blob--2,.blob--3{ display:none; }
  .follow{ grid-template-columns:1fr; text-align:center; }
  .follow__intro .eyebrow{ justify-content:center; }
  .follow__intro .eyebrow--left::before{ display:block; }
  .follow__intro p{ margin-inline:auto; }
  .follow__pills{ justify-content:center; }
}
@media (max-width:560px){
  .rate{ grid-template-columns:auto 1fr; row-gap:10px; }
  .rate__price{ grid-column:2; justify-self:start; }
  .follow__pills{ gap:20px; }
  .pill__shape{ width:58px; height:58px; }
}
@media (prefers-reduced-motion:reduce){
  .blob,.hero__scroll span::after{ animation:none !important; }
}

/* les info-bulles doivent pouvoir déborder de la carte du cabinet */
.lieu{ overflow:visible; }
.lieu__map{ border-radius:0 var(--radius-lg) 0 0; overflow:hidden; }
@media (max-width:900px){
  .lieu__map{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
}

@media (max-width:900px){
  .blob--1{ top:-9%; right:-24%; width:min(72vw,430px); opacity:.68; }
}

/* =========================================================
   29. Accueil sur téléphone — refonte (23 août 2026)
   =========================================================
   Trois défauts constatés sur un écran de 375 px :

   1. La photo était décalée de 8 px à gauche et rognée à droite. Cause :
      le « right:-2% » de la règle desktop n'était pas réinitialisé ici, et
      en position relative il déplace la photo de 2% de la largeur.
   2. Elle arrivait APRÈS les informations pratiques, donc au milieu du
      texte, sans lien avec le propos.
   3. Son masque ne s'estompait qu'en haut : en bas, elle s'arrêtait net
      juste avant la section suivante.

   Correction : .hero__inner et .hero__text passent en display:contents,
   ce qui fait de leurs enfants des enfants directs du hero POUR LA MISE
   EN PAGE. Attention : l'arbre HTML, lui, ne change pas — les selecteurs
   ci-dessous doivent donc rester des descendants (.hero h1) et non des
   enfants directs (.hero > h1), qui ne trouveraient rien. On peut alors
   les réordonner librement et glisser la photo juste après l'accroche,
   avant l'appel à l'action. La photo devient une bande pleine largeur,
   fondue en haut comme en bas.

   Ne s'applique qu'aux téléphones (≤ 640 px) : tablette et desktop
   gardent strictement leur mise en page d'origine.
   ========================================================= */
@media (max-width:640px){

  .hero__inner, .hero__text{ display:contents; }

  /* la gouttiere était portée par .wrap (=.hero__inner) : le hero la reprend */
  .hero{ padding-top:88px; padding-inline:var(--gutter); }

  /* les formes décoratives sont en z-index:0 et le conteneur positionné qui
     relevait le texte n'existe plus : on relève chaque bloc explicitement */
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero .btn-row,
  .hero .hero__facts{ position:relative; z-index:2; }

  /* --- ordre de lecture : on se présente, on montre, puis on invite --- */
  .hero .eyebrow      { order:1; margin-bottom:10px; }
  .hero h1            { order:2; font-size:clamp(1.85rem,8.6vw,2.1rem);
                        line-height:1.14; margin-bottom:.34em; }
  .hero .lead         { order:3; font-size:1rem; line-height:1.55;
                        max-width:none; margin-bottom:0; }
  .hero__photo        { order:4; }
  .hero .btn-row      { order:5; margin-top:24px; }
  .hero .hero__facts  { order:6; margin-top:24px; padding-top:20px; }

  /* --- la photo : bande pleine largeur, fondue des deux côtés --- */
  .hero__photo{
    position:relative; right:auto; left:auto; top:auto;   /* annule le right:-2% du desktop */
    width:calc(100% + var(--gutter) * 2);
    max-width:none;                 /* la regle globale img{max-width:100%} bridait la pleine largeur */
    margin-inline:calc(var(--gutter) * -1);
    margin-top:22px; margin-bottom:0;
    height:auto; aspect-ratio:4/2.9;
    object-position:58% 18%;
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 15%, #000 82%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 15%, #000 82%, rgba(0,0,0,0) 100%);
  }
}

/* =========================================================
   28. v11 — bandeau de rendez-vous pleine largeur & pied de page
   ========================================================= */

/* ---------- Bandeau rendez-vous ---------- */
.rdv{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg,#5E4336 0%,#5E463F 58%,#6B5044 100%);
  color:rgba(255,255,255,.82);
  border-radius:clamp(30px,4vw,58px) clamp(30px,4vw,58px) 0 0;
  padding-block:clamp(58px,7vw,104px);
  margin-top:clamp(48px,6vw,84px);
}
.rdv__photo{
  position:absolute; z-index:0; right:0; top:0;
  width:min(46%,720px); height:100%;
  object-fit:cover; object-position:48% 46%;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 28%,#000 66%);
          mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 28%,#000 66%);
}
.rdv__blob{
  position:absolute; z-index:0; left:-6%; bottom:-42%;
  width:min(34vw,420px); aspect-ratio:1/1.05;
  background:var(--rose); opacity:.16;
  border-radius:58% 42% 63% 37% / 45% 55% 45% 55%;
  pointer-events:none;
}
.rdv__inner{ position:relative; z-index:2; }
.rdv__body{ max-width:min(560px,54%); }
.rdv__body .eyebrow{ color:var(--rose); }
.rdv__body .eyebrow--left::after{ background:linear-gradient(90deg,rgba(215,164,158,.7),transparent); }
.rdv__body h2{ color:#fff; font-size:clamp(1.95rem,3.4vw,2.9rem); margin-bottom:.45em; }
.rdv__body h2 .accent{ color:var(--rose); }
.rdv__body p{ max-width:44ch; }
.btn--outline{ border-color:rgba(255,255,255,.42); color:#fff; background:transparent; }
.btn--outline:hover{ background:#fff; border-color:#fff; color:var(--brown-deep); transform:translateY(-2px); }

.rdv__facts{
  list-style:none; margin:clamp(38px,4.6vw,62px) 0 0; padding:clamp(26px,3vw,34px) 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);
  max-width:min(760px,66%);
}
.rdv__facts li{ display:flex; align-items:center; gap:14px; }
.rdv__facts svg{ width:22px; height:22px; flex:none; stroke:var(--rose); fill:none; }
.rdv__facts strong{ display:block; font-weight:400; color:#fff; font-size:.92rem; }
.rdv__facts span{ font-size:.8rem; color:rgba(255,255,255,.62); }

/* ---------- Pied de page ---------- */
.footer{
  position:relative; overflow:hidden;
  background:var(--stone); color:var(--ink-soft);
  font-size:.92rem;
}
.footer a{ color:var(--ink-soft); transition:color .3s; }
.footer a:hover{ color:var(--brown-deep); }
.footer a.btn--primary,.footer a.btn--primary:hover{ color:#fff; }
.footer__blob{
  position:absolute; right:-10%; top:-24%; z-index:0;
  width:min(42vw,480px); aspect-ratio:1/.92;
  background:var(--sand); opacity:.6;
  border-radius:47% 53% 38% 62% / 58% 42% 58% 42%;
  pointer-events:none;
}

/* ligne d'en-tête */
.footer__head{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  padding-block:clamp(38px,4.4vw,56px) clamp(30px,3.4vw,42px);
  border-bottom:1px solid rgba(94,67,54,.14);
}
.footer__logo{ align-items:center; }
.footer__logo .logo__mark{ width:58px; }
.footer__logo .logo__name{ color:var(--ink); font-size:1.5rem; }
.footer__logo .logo__role{ color:var(--brown); letter-spacing:.22em; }
.footer__social{ display:flex; align-items:center; gap:12px; }
.footer__social-label{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brown); margin-right:6px;
}
.mini-pill{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:58% 42% 63% 37% / 45% 55% 45% 55%;
  transition:border-radius .6s var(--ease), transform .4s var(--ease);
}
.mini-pill svg{ width:17px; height:17px; }
.mini-pill--1{ background:var(--rose);       color:var(--brown-deep); }
.mini-pill--2{ background:var(--rose-light); color:var(--brown-deep); }
.mini-pill--3{ background:var(--sand);       color:var(--brown-deep); }
.mini-pill:hover{ border-radius:42% 58% 37% 63% / 55% 45% 55% 45%; transform:translateY(-3px) rotate(-6deg); }

/* colonnes */
.footer__cols{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr 1.15fr;
  gap:clamp(26px,4vw,64px);
  padding-block:clamp(34px,4vw,54px);
}
.footer__col h2{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brown); font-weight:400; margin-bottom:1.6em;
}
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:.9rem; }
.footer__col .days{ display:flex; flex-wrap:nowrap; gap:5px; margin:0 0 18px; }
.days--sm .day{ width:28px; font-size:.6rem; letter-spacing:.04em; padding:.5em 0; border-radius:9px; }
.footer__note{ font-size:.85rem; line-height:1.7; margin-bottom:1.2em; }
.footer__contact p{ font-size:.9rem; line-height:1.8; margin-bottom:1em; }
.footer__contact strong{ font-weight:400; color:var(--ink); }
.footer__contact .btn{ margin-top:4px; }

/* barre de bas de page */
.footer__bottom{
  position:relative; z-index:1;
  border-top:1px solid rgba(94,67,54,.14);
  padding-block:20px 26px;
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center;
  font-size:.78rem; color:var(--brown);
}
.footer__bottom ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:24px; }
.footer__totop{ display:inline-flex; align-items:center; gap:7px; }
.footer__totop span{ transition:transform .35s var(--ease); }
.footer__totop:hover span{ transform:translateY(-3px); }


@media (max-width:1000px){
  .rdv__body{ max-width:none; }
  .rdv__facts{ max-width:none; grid-template-columns:1fr 1fr; }
  .rdv__photo{ width:44%; opacity:.5; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .rdv{ border-radius:clamp(24px,6vw,34px) clamp(24px,6vw,34px) 0 0; }
  .rdv__photo{
    width:100%; height:38%; top:auto; bottom:0; opacity:.28; object-position:50% 40%;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 60%);
            mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 60%);
  }
  .rdv__facts{ grid-template-columns:1fr; gap:16px; }
  .footer__head{ flex-direction:column; align-items:flex-start; }
  .footer__cols{ grid-template-columns:1fr; gap:34px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .footer__bottom ul{ flex-direction:column; gap:9px; }
  }

/* ---------- 25. Sommaire de l'accueil (mosaïque en tons) ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px); }

.mos__tile{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,36px);
  min-height:190px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:inherit;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mos__tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.mos__tile > *{ position:relative; z-index:1; }
.mos__icon{ width:34px; height:34px; margin-bottom:auto; stroke:var(--brown); stroke-width:1.05; fill:none; transition:stroke .4s; }
.mos__tile:hover .mos__icon{ stroke:var(--ink); }
.mos__tile h2{ margin:0 0 .35em; font-size:clamp(1.15rem,1.7vw,1.5rem); transition:color .35s; }
.mos__tile:hover h2{ color:var(--terracotta-dark); }
.mos__tile p{ margin:0; font-size:.88rem; color:var(--ink-soft); }

/* tuiles sans phrase : icône et titre centrés */
.mos__tile--plain{ align-items:center; justify-content:center; text-align:center; }
.mos__tile--plain .mos__icon{ margin:0 0 16px; }
.mos__tile--plain h2{ margin:0; }

/* tuile principale — sans photo, animée par un décor tracé au filet */
.mos__tile--lead{ grid-column:span 2; grid-row:span 2; min-height:400px; padding:clamp(30px,3.2vw,46px); }
.mos__tile--lead .mos__icon{ width:44px; height:44px; }
.mos__tile--lead h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); }
.mos__tile--lead p{ font-size:.98rem; max-width:40ch; }
.mos__tile--lead::before,.mos__tile--lead::after{
  content:""; position:absolute; border-radius:50%; z-index:0; pointer-events:none;
  transition:transform .8s var(--ease);
}
.mos__tile--lead::before{
  width:340px; height:340px; top:-118px; right:-104px;
  border:1px solid rgba(94,67,54,.14);
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%);
}
.mos__tile--lead::after{
  width:190px; height:190px; top:-14px; right:34px;
  border:1px solid rgba(94,67,54,.09);
}
.mos__tile--lead:hover::before{ transform:translate(-10px,10px) scale(1.04); }
.mos__tile--lead:hover::after{ transform:translate(8px,-6px); }

.mos__tile--wide{ grid-column:span 2; }

/* gamme de tons : du sable au blanc, sans rose */
.mos__tile--sand { background:var(--sand); }
.mos__tile--blush{ background:var(--blush); }
.mos__tile--stone{ background:var(--stone); }
.mos__tile--white{ background:var(--white); border:1px solid var(--line); }

@media (max-width:1000px){
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mos__tile--lead{ grid-column:span 2; grid-row:span 1; min-height:290px; }
}
@media (max-width:600px){
  .mosaic{ grid-template-columns:1fr; }
  .mos__tile--lead,.mos__tile--wide{ grid-column:span 1; }
  .mos__tile--lead{ min-height:250px; }
  .mos__tile--lead::before{ width:250px; height:250px; top:-96px; right:-82px; }
  .mos__tile--lead::after{ width:140px; height:140px; right:26px; }
}

/* En-tête de section réduit au seul sur-titre (sommaire) */
.section-head .eyebrow:only-child{ margin-bottom:0; }

/* =========================================================
   La séance — déroulé : frise numérotée + photo en bord d'écran
   ========================================================= */
.seance-flow{ overflow-x:clip; }

.seance-flow__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(40px,5vw,88px);
  align-items:center;
  /* la photo file jusqu'au bord droit de l'écran */
  margin-right:calc(50% - 50vw);
}

.seance-flow__media{ margin:0; position:relative; }
.seance-flow__media img{
  display:block; width:100%;
  aspect-ratio:2/3; object-fit:cover; object-position:center;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow:0 32px 74px -42px rgba(94,70,63,.55);
}
/* filet vertical qui accompagne la photo dans la marge */
.seance-flow__media::before{
  content:""; position:absolute; left:-26px; top:14%; bottom:14%; width:1px;
  background:linear-gradient(180deg,transparent,var(--brown-soft),transparent);
}

.seance-flow__body > h2{ margin-bottom:.5em; }
.seance-flow__body > .lead{ max-width:50ch; }

/* ---- frise verticale numérotée ---- */
.timeline{
  counter-reset:tl; list-style:none; position:relative;
  margin:clamp(30px,3.6vw,46px) 0 0; padding:0;
}
.timeline::before{
  content:""; position:absolute; left:22px; top:12px; bottom:14px; width:1px;
  background:linear-gradient(180deg,var(--brown-soft) 0%,var(--brown-soft) 72%,transparent 100%);
}
.timeline__item{
  counter-increment:tl; position:relative;
  padding:0 0 clamp(26px,3.2vw,40px) 74px;
}
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{
  content:"0" counter(tl);
  position:absolute; left:0; top:-3px;
  width:45px; height:45px; border-radius:50%;
  background:var(--white); border:1px solid var(--brown-soft);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1rem; color:var(--brown);
}
.timeline__item h2{ font-size:clamp(1.1rem,1.5vw,1.25rem); margin-bottom:.4em; }
.timeline__item p{ font-size:.95rem; }

@media (max-width:900px){
  .seance-flow__grid{ grid-template-columns:1fr; margin-right:0; gap:clamp(30px,5vw,46px); }
  .seance-flow__media{ order:-1; }
  .seance-flow__media img{ aspect-ratio:4/5; border-radius:var(--radius-lg); }
  .seance-flow__media::before{ display:none; }
}
@media (max-width:600px){
  .timeline::before{ left:19px; }
  .timeline__item{ padding-left:62px; }
  .timeline__item::before{ width:39px; height:39px; font-size:.88rem; }
}

/* =========================================================
   Où me trouver — salle de consultation, moyens de paiement
   ========================================================= */

/* ---- la salle mise en avant dans les infos d'accès ---- */
.access__list li.is-room{
  align-items:center;
  gap:14px;
  padding:14px 18px;
  margin-bottom:4px;
  background:var(--blush);
  border:1px solid var(--rose-light);
  border-radius:16px;
}
.access__list li.is-room svg{ width:24px; height:24px; margin-top:0; stroke:var(--brown-deep); }
.access__list li.is-room strong{
  color:var(--brown-deep);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:2px;
}
.access__list li.is-room span{ font-size:.88rem; }

/* ---- moyens de paiement (dans l'encadré « informations pratiques ») ---- */
.pay__list{ list-style:none; margin:0; padding:0; }
.popcard__panel .pay__list{
  display:flex; flex-wrap:wrap; gap:9px;
}
.popcard__panel .pay__list li{
  display:inline-flex; align-items:center; gap:8px;
  padding:.52em 1em; border-radius:999px;
  background:var(--rose-light); border:1px solid var(--rose);
  color:var(--brown-deep); font-size:.82rem; line-height:1.35;
  transition:.3s var(--ease);
}
.popcard__panel .pay__list li::before{ display:none; }
.popcard__panel .pay__list svg{
  width:15px; height:15px; flex:none;
  stroke:var(--brown-deep); stroke-width:1.4; fill:none;
}
.popcard__panel .pay__list li:hover{ background:var(--rose); }

/* ---- pastille colorée derrière l'icône des encadrés ---- */
.popcard__trigger svg{
  width:38px; height:38px; padding:8px; box-sizing:border-box;
  border-radius:50%; background:var(--blush);
  transition:background .35s var(--ease);
}
.popcard:hover .popcard__trigger svg,
.popcard:focus-within .popcard__trigger svg,
.popcard.is-open .popcard__trigger svg{ background:var(--rose-light); }

@media (max-width:560px){
  .access__list li.is-room{ align-items:start; }
}

/* =========================================================
   30. Téléphone — corrections de mise en page (24 août 2026)
   =========================================================
   Sauf le bloc 30.1 — le menu burger, qui n'existe qu'en dessous
   de 1120 px et reste invisible ailleurs — tout est sous media query
   (largeur <= 600/900 px, ou hauteur d'ecran reduite) : la mise en
   page desktop n'est pas modifiee.
   ========================================================= */

/* ---------- 30.1 Menu mobile : contenu ni ecrase, ni coupe ----------
   Le menu est un conteneur flex de hauteur fixe (inset:0). Sur un
   ecran de 640 px de haut, la somme logo + 8 liens + bouton depassait
   de pres de 100 px : le logo sortait par le haut (top a -28 px) et le
   bouton « Prendre rendez-vous » se retrouvait entierement hors champ,
   sans aucun moyen de faire defiler. On rend donc les enfants
   incompressibles, on autorise le defilement, et on centre par marges
   automatiques — elles retombent a 0 des que la place manque, ce que
   « justify-content:center » ne fait pas (il coupe des deux cotes). */
.mobile-nav{
  justify-content:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav > *{ flex:0 0 auto; }
.mobile-nav__logo{ margin-top:auto; }
.mobile-nav > :last-child{ margin-bottom:auto; }
/* interlignage propre a un grand corps serif : 1,75 (herite du body)
   ajoutait 20 px de vide par lien, soit 160 px sur l'ensemble du menu */
.mobile-nav a:not(.btn){ line-height:1.25; padding:.32em 0; }
/* le selecteur « .mobile-nav a » (bloc 6) l'emportait aussi sur le
   remplissage de .btn : le bouton d'appel a l'action etait aplati
   (30 px de haut au lieu de 48) et son texte collait aux bords */
.mobile-nav a.btn{ padding:1.05em 2.2em; }

/* ecrans courts (iPhone SE, paysage) : tout doit tenir sans defilement */
@media (max-height:720px){
  .mobile-nav{ padding-top:84px; padding-bottom:24px; }
  .mobile-nav__logo{ width:64px; margin-bottom:12px; }
  .mobile-nav a:not(.btn){ font-size:1.4rem; }
  .mobile-nav .btn{ margin-top:18px; }
}

/* ---------- 30.2 Qui suis-je : la vignette « D.O. » ----------
   En absolu, elle recouvrait 45 % de la photo (230 x 136 px sur une
   image de 335 x 251) et s'arretait a 8 px du paragraphe suivant.
   Elle devient un bandeau-legende accroche sous la photo, qui referme
   la carte. Le filet decoratif en retrait, lui, arrivait a 2 px du bord
   de l'ecran : il n'a plus de sens a cette largeur. */
@media (max-width:600px){
  .split__media{
    display:flex; flex-direction:column;
    border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow);
  }
  .split__media::before{ display:none; }
  .split__media img{ border-radius:0; box-shadow:none; }
  .split__stamp{
    position:static; left:auto; right:auto; bottom:auto;
    width:100%; max-width:none;
    display:flex; align-items:baseline; gap:12px;
    padding:14px 20px; border-radius:0; box-shadow:none;
    border-top:1px solid var(--line);
  }
  .split__stamp strong{ font-size:1.3rem; }
}

/* ---------- 30.3 Ou me trouver : jours de presence ----------
   Sept pastilles de 52 px fixes ne tiennent pas dans les 287 px
   disponibles : elles se repliaient en 4 + 3 (et meme 3 + 3 + 1 sur
   un ecran de 320 px). Une grille de sept colonnes egales garde la
   semaine sur une seule ligne, quelle que soit la largeur. */
@media (max-width:600px){
  .days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .day{ width:auto; font-size:.62rem; letter-spacing:.02em; }
}

/* ---------- 30.4 Contact : appels a l'action des tuiles ----------
   « .btn { width:100% } » ne s'appliquait qu'a la tuile Doctolib :
   le bouton y occupait toute la largeur pendant que les deux autres
   tuiles affichaient une pastille « .coord » ajustee au texte.
   Les trois tuiles adoptent desormais le meme gabarit. */
@media (max-width:600px){
  .contact-tiles .btn,
  .contact-tiles .coord{ width:100%; min-height:46px; }
}

/* ---------- 30.5 Contact : pastilles « Me suivre » ----------
   En flex, la largeur de chaque pastille suivait celle de son libelle
   (Instagram 72 px, LinkedIn 58 px, Avis Google 88 px) : les trois
   icones rondes n'etaient pas espacees regulierement. Trois colonnes
   egales les alignent, le libelle passant sur deux lignes si besoin. */
@media (max-width:900px){
  .follow__pills{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    justify-items:center; align-items:start;
  }
  .pill__label{ text-align:center; line-height:1.3; }
}
/* sur telephone, un interlettrage un peu plus serre et une gouttiere
   plus courte gardent « Avis Google » sur une seule ligne */
@media (max-width:600px){
  .follow__pills{ gap:12px; }
  .pill__label{ letter-spacing:.08em; }
}

/* ---------- 30.6 Mentions legales : listes du corps de texte ----------
   Le retrait par defaut du navigateur (40 px) decalait les listes de
   12 % de la largeur d'ecran par rapport aux paragraphes voisins. */
@media (max-width:600px){
  .section .wrap--narrow > ul{ padding-left:22px; }
}

/* ---------- 30.7 Informations pratiques : volets deroulants ----------
   Au-dessus de 900 px, chaque encadre ouvre une info-bulle au survol.
   En dessous, la regle du bloc 24 se contentait de figer tous les
   volets en position statique et ouverte : le « + » disparaissait, et
   surtout, entre 700 et 900 px la grille passe a deux colonnes — un
   volet deroule se retrouvait alors a cote du bouton d'une AUTRE carte,
   sans lien visuel avec lui. Le volet redevient donc ferme par defaut
   et s'ouvre a la demande, accroche sous son bouton : c'est la
   traduction tactile de l'info-bulle du desktop. Le JavaScript qui
   bascule « .is-open » au clic existe deja (bloc 7 de main.js). */
@media (max-width:900px){
  .popcard{ align-self:start; }

  .popcard__trigger{ border-radius:18px; transition:border-radius .25s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
  .popcard.is-open .popcard__trigger{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

  /* le « + » est la seule indication qu'il y a quelque chose a ouvrir :
     il etait masque ici, il redevient visible */
  .popcard__trigger i{ display:grid; }

  .popcard__panel{
    position:static; width:auto; transform:none;
    opacity:1; visibility:visible;
    margin-top:0; box-shadow:none;
    border:1px solid var(--line); border-top:0;
    border-radius:0 0 18px 18px;
    max-height:0; overflow:hidden;
    padding-top:0; padding-bottom:0; border-bottom-width:0;
    transition:max-height .45s var(--ease), padding .45s var(--ease);
  }
  .popcard__panel::before{ display:none; }
  /* Le bloc 24 applique « transform:translate(-50%,0) » au volet et
     « translateY(-2px) » au bouton pour TROIS etats : :hover,
     :focus-within et .is-open. Ces deux deplacements n'ont de sens que
     pour l'info-bulle du desktop, centree et detachee sous son bouton.

     Ne les annuler que sur .is-open ne suffisait pas : sur un ecran
     tactile, le bouton garde le survol ET le focus apres une pression.
     A la fermeture, .is-open disparait mais :focus-within reste — le
     volet repartait alors de 142 px vers la gauche, a moitie hors de
     l'ecran, pendant toute la duree de sa fermeture. Le bouton, lui,
     restait souleve de 2 px, ce qui ouvrait aussi une fente entre lui
     et le volet cense y etre accroche. On neutralise donc les trois
     etats d'un coup. */
  .popcard:hover .popcard__trigger,
  .popcard:focus-within .popcard__trigger,
  .popcard.is-open .popcard__trigger,
  .popcard:hover .popcard__panel,
  .popcard:focus-within .popcard__panel,
  .popcard.is-open .popcard__panel{ transform:none; }

  .popcard.is-open .popcard__panel{
    max-height:620px;            /* repli : le JavaScript pose la hauteur exacte */
    padding-top:20px; padding-bottom:22px;
    border-bottom-width:1px;
  }
}

/* ---------- 30.8 Avis : ruban manipulable au doigt ----------
   Classe posee par main.js quand l'ecran fait 900 px ou moins. Le ruban
   n'avance plus par « transform » mais par scrollLeft : le doigt a donc
   prise dessus, et le JavaScript continue de le faire avancer tout seul
   entre deux gestes. Au-dessus de 900 px la classe n'est pas posee et
   l'animation CSS d'origine s'applique telle quelle.
   La barre de defilement est masquee : c'est un ruban decoratif, pas une
   zone de contenu a parcourir methodiquement. */
.reviews-marquee--drag{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.reviews-marquee--drag::-webkit-scrollbar{ width:0; height:0; }
.reviews-marquee--drag .reviews-marquee__track{ animation:none; }

/* ---------- 30.9 Mosaique d'accueil : tuile de tete sur telephone ----------
   La tuile « Qui suis-je » occupe deux colonnes sur deux rangees en
   desktop : son titre plus grand y est justifie. En telephone, toutes
   les tuiles font la meme largeur et se suivent — l'ecart de corps
   (25,6 px contre 18,4) et le retrait de 6 px n'avaient plus de raison
   d'etre. Elle s'aligne donc sur les autres ; c'est le fond sable et
   les cercles traces qui continuent de la distinguer. */
@media (max-width:600px){
  .mos__tile--lead{ padding:clamp(24px,2.6vw,36px); min-height:190px; }
  .mos__tile--lead .mos__icon{ width:34px; height:34px; }
  .mos__tile--lead h2{ font-size:clamp(1.15rem,1.7vw,1.5rem); }
  .mos__tile--lead p{ font-size:.88rem; }
}


/* ---------- 30.10 Rendez-vous dans le bandeau superieur (mobile) ----------
   Le bloc 22 masquait « .header__cta » en meme temps que la navigation
   sous 1120 px : passe cette largeur, il ne restait plus aucun appel a
   l'action visible en permanence. Le bouton revient donc dans l'en-tete,
   qui est deja fixe en haut de l'ecran. Au-dessus de 1120 px rien ne
   bouge : c'est la regle d'origine qui s'applique.

   Entre 601 et 1120 px la place ne manque pas (environ 480 px occupes).
   En dessous, l'en-tete doit loger logo + bouton + menu dans 280 a 375 px :
   le libelle se reduit a « Rendez-vous » (le mot « Prendre » est masque,
   il reste lisible par les lecteurs d'ecran), le logo et les gouttieres
   se resserrent. */
@media (max-width:1120px){
  .header__cta{ display:inline-flex; }
}

/* Le libelle est coupe en deux (« Prendre » + « rendez-vous ») pour
   pouvoir masquer le premier mot sur telephone. Comme .btn est un
   conteneur flex, ces deux morceaux deviennent deux elements separes par
   la gouttiere de .6em du bouton : l'espace entre les mots serait passe
   de 3 a 7 px sur desktop. On annule la gouttiere ; c'est l'espace
   insecable place dans le premier morceau qui separe les mots, et il
   disparait avec lui. */
.header__cta{ gap:0; }

@media (max-width:600px){
  .header__inner{ gap:10px; }

  /* le logo peut retrecir, le bouton et le menu non */
  .header .logo{ gap:9px; min-width:0; }
  .header .logo__mark{ width:34px; }
  .header .logo__name{ font-size:1rem; }
  .header .logo__role{ font-size:.52rem; letter-spacing:.2em; }
  .header.is-scrolled .logo__mark{ width:32px; }

  .header__cta{
    flex:none;
    width:auto;                 /* annule le « .btn { width:100% } » du bloc 22 */
    padding:.85em 1.15em;
    font-size:.62rem; letter-spacing:.1em;
    white-space:nowrap;
  }
  .header__cta-mot{ display:none; }

  .burger{ flex:none; width:34px; }
}

/* En dessous de 340 px (iPhone SE de premiere generation), le nom ne
   tient plus a cote du bouton : la marque seule identifie le site.
   Au-dessus, tout rentre — verifie a 340, 360, 375 et 390 px. */
@media (max-width:339px){
  .header .logo__text{ display:none; }
}