/* ═══════════════════════════════════════════════════════════════════════
   MIROR NUM — Système visuel partagé
   Feuille unique pour les trois pages : index.html, conseil-esthetique.html
   et evaluation-independante.html.
   ─────────────────────────────────────────────────────────────────────────
   [SLOT CHARTE] Les couleurs et typos de la charte officielle du client
   se règlent dans les variables de :root, ci-dessous.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette de référence (brief) */
  --bg:          #FFFFFF;   /* fond principal — blanc */
  --bg-alt:      #EFE8DC;   /* fond alterné — zone colorée */
  --bg-card:     #FAF6EF;   /* fond des cartes sur fond alterné */
  --ink:         #2A1F17;   /* encre */
  --muted:       #6B5B4A;   /* texte secondaire (déclinaison AA du #7c756c du brief) */
  --accent:      #C8694A;   /* accent chaud — grands titres italiques, icônes */
  --accent-deep: #A04E33;   /* accent foncé — boutons pleins, petits libellés (AA) */
  --sage:        #B0836B;   /* accent secondaire sauge — décor */
  --sage-deep:   #3A2A1F;   /* sauge foncé — bandeau final (AA avec blanc) */
  --line:        #DED3C2;   /* filets */
  --bone:        #F5EFE6;
  --white:       #ffffff;

  /* Typo */
  --sans: "Satoshi", "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Rythme */
  --section-y: clamp(72px, 10vw, 110px);
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 76px;
  /* Un seul arrondi pour tout le site : cadres, cartes, images, modales et
     boutons partagent la même valeur. */
  --radius: 10px;
  --radius-btn: 10px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Satoshi, famille complète servie en local (aucun CDN) ────────────
   Dix graisses déclarées : le navigateur ne télécharge que celles
   réellement employées par la page. ─────────────────────────────────── */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi/SatoshiBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bone);
  padding: 12px 20px; z-index: 200; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

::selection { background: var(--accent); color: var(--white); }

/* ── Conteneurs / sections ───────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* La FAQ garde une largeur de lecture confortable, calée sur la marge
   gauche du site plutôt que centrée dans la page. */
#faq .section-head, #faq .faq-list { max-width: 940px; }

.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 780px; margin-bottom: clamp(40px, 6vw, 64px); }

/* ── Typographie ─────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 22px;
}

.h2 {
  font-size: clamp(25px, 2.9vw, 34px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h2 em, .hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.lead {
  font-size: clamp(16px, 1.7vw, 18px);
  color: var(--muted);
  margin-top: 24px;
  max-width: 640px;
}

.prose { margin-top: 28px; display: grid; gap: 18px; max-width: 560px; }
.prose p { color: var(--muted); }
.prose .prose-strong { color: var(--ink); font-weight: 500; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.btn::after {
  content: "→";
  font-weight: 400;
  transition: transform .25s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }

.btn-primary { background: var(--accent-deep); color: var(--white); }
.btn-primary:hover { background: #8a4830; transform: translateY(-1px); }

.btn-ghost {
  border-color: rgba(255, 255, 255, .75);
  color: var(--white);
  background: rgba(255, 255, 255, .04);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); }

.btn-outline { border-color: rgba(28, 39, 51, .3); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); }

.btn-outline-light { border-color: rgba(244, 241, 236, .5); color: var(--bone); background: transparent; }
.btn-outline-light:hover { border-color: var(--bone); }

.btn-light { background: var(--bone); color: var(--ink); }
.btn-light:hover { background: var(--white); transform: translateY(-1px); }

.btn-lg { padding: 17px 34px; font-size: 16.5px; }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-weight: 500;
  font-size: 16px;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.link-arrow::after { content: "→"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ── 1 · Header fixe ─────────────────────────────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img { height: 34px; width: auto; }
.brand-bone { display: block; }
.brand-ink { display: none; }

.nav { display: flex; gap: clamp(18px, 2.6vw, 36px); }
.nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, .92);
  transition: color .25s var(--ease);
  padding-block: 6px;
}
.nav a:hover { color: var(--white); }

.header-right { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }

.lang { display: flex; align-items: center; gap: 7px; }
.lang-btn {
  background: none; border: 0; padding: 4px 2px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer;
  color: rgba(255, 255, 255, .55);
  transition: color .25s var(--ease);
}
.lang-btn.on, .lang-btn:hover { color: var(--white); }
.lang-sep { color: rgba(255, 255, 255, .4); font-size: 13px; }

/* Header au scroll : blanc translucide + flou léger */
.header.scrolled {
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(28, 39, 51, .08);
}
.header.scrolled .brand-bone { display: none; }
.header.scrolled .brand-ink { display: block; }
.header.scrolled .nav a { color: var(--ink); }
.header.scrolled .nav a:hover { color: var(--accent-deep); }
.header.scrolled .lang-btn { color: rgba(28, 39, 51, .45); }
.header.scrolled .lang-btn.on, .header.scrolled .lang-btn:hover { color: var(--ink); }
.header.scrolled .lang-sep { color: rgba(28, 39, 51, .3); }

/* Burger (mobile) */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 8px;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--white);
  transition: transform .3s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease);
}
.header.scrolled .burger span, .header.menu-open .burger span { background: var(--ink); }
.header.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.menu-open .burger span:nth-child(2) { opacity: 0; }
.header.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Tiroir ancré à droite, sur toute la hauteur sous le header */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: min(340px, 84vw);
  overflow-y: auto;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -22px 0 48px -24px rgba(28, 39, 51, .40);
  padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom));
}
.header.menu-open .mobile-menu { display: flex; flex-direction: column; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a {
  padding: 16px 2px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu nav a:last-child { border-bottom: 0; }
/* Langue et bouton restent en bas du tiroir */
.mobile-lang { display: flex; gap: 8px; margin-top: auto; padding: 16px 2px 4px; border-top: 1px solid var(--line); }
.mobile-lang .lang-btn { font-size: 15px; color: rgba(28, 39, 51, .45); }
.mobile-lang .lang-btn.on { color: var(--ink); }
.mobile-lang .lang-sep { color: rgba(28, 39, 51, .3); align-self: center; }
.mobile-menu .btn { margin-top: 14px; }

.header.menu-open {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header.menu-open .brand-bone { display: none; }
.header.menu-open .brand-ink { display: block; }

/* ── 2 · Hero pleine image : photo en fond, texte par-dessus ────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(94svh, 920px);
  display: flex;
  align-items: center;
  background: #17100C;
  color: var(--white);
  padding: calc(var(--header-h) + clamp(48px, 8vh, 96px)) 0 clamp(56px, 8vh, 96px);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 28%;
}
/* Voile : dégradé latéral sur large écran, vertical sur mobile, pour que
   le texte reste lisible sans noyer la photo. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(23, 16, 12, .74) 0%, rgba(23, 16, 12, .58) 42%, rgba(23, 16, 12, .82) 100%);
}
@media (min-width: 900px) {
  .hero::before {
    background:
      linear-gradient(90deg, rgba(23, 16, 12, .90) 0%, rgba(23, 16, 12, .78) 42%, rgba(23, 16, 12, .30) 78%, rgba(23, 16, 12, .18) 100%);
  }
  .hero-media img { object-position: 72% 26%; }
}
.hero-inner { width: 100%; }
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blush, #E8BFAF);
  margin-bottom: 22px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.hero-title {
  font-size: clamp(29px, 3.5vw, 42px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero-sub {
  margin: 22px 0 0;
  max-width: 560px;
  font-size: clamp(16px, 1.6vw, 17.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.hero-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hero-note {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

/* ── Points forts du héro : liste à coches sous les boutons ────────────
   Reprennent les angles des campagnes Meta, cliquables vers leur
   section. ─────────────────────────────────────────────────────────── */
.hero-checks {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.hero-checks a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .94);
  text-decoration: none;
  font-size: 1em;
  font-weight: 500;
  transition: color .25s var(--ease);
}
.hero-checks svg { flex: 0 0 auto; color: var(--blush, #E8BFAF); }
.hero-checks a:hover { color: var(--white); }

/* ── Grilles 2 colonnes (style Claris) ───────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 6vw, 96px);
  align-items: center;
}

.media { position: relative; }
.media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(28, 39, 51, .35);
}
/* Sur mobile, l'image des sections en deux colonnes précède toujours le
   titre, le texte et le bouton, quel que soit son rang dans le HTML. */
@media (max-width: 899px) {
  .grid-2 > .media { order: -1; }
}

/* ── Tableau de faits (réutilisable pour une bio de spécialiste) ─────── */
.facts { margin-top: 40px; }
.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.fact:first-child { border-top: 1px solid var(--line); }
.fact dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact dd {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  text-align: right;
}

.quote { margin-top: 36px; padding-left: 22px; border-left: 2px solid var(--accent); }
.quote p { font-size: 19px; font-style: italic; line-height: 1.5; }
.quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── 5 · Sujets par zones (pastilles) ────────────────────────────────── */
.zones { border-top: 1px solid var(--line); }
.zone-icon {
  width: 34px;
  height: 34px;
  color: var(--accent-deep);
  margin-bottom: 14px;
}
.zone {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-block: clamp(30px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.zone-head h3 {
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.zone-head p { margin-top: 10px; color: var(--muted); max-width: 34ch; }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  align-items: flex-start;
}
.pills li {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
}

.zones-note {
  margin-top: 30px;
  font-size: 15.5px;
  font-style: italic;
  color: var(--muted);
}

/* ── 6 · Les formules (cartes) ───────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 32px);
  align-items: stretch;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 32px);
}
.card-feature {
  border: 1.5px solid var(--accent);
  box-shadow: 0 30px 60px -34px rgba(156, 82, 56, .5);
}
.card-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent-deep);
  color: var(--white);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
  white-space: nowrap;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.card-num {
  font-size: clamp(34px, 4vw, 44px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}
.card-icon { width: 26px; height: 26px; color: var(--ink); margin-top: 6px; }

.card-title { font-size: clamp(19px, 1.9vw, 21px); font-weight: 500; letter-spacing: -0.01em; }
/* Durées et délais : une précision de service, pas un titre. Le mono en
   capitales espacées les faisait peser autant que le nom de la modalité. */
.card-dur {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.card-desc { margin-top: 16px; color: var(--muted); }
.card-incl {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}


.card-foot { margin-top: auto; padding-top: 20px; }
.card-price {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.card-price span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 4px;
}

.cards-note {
  margin-top: 34px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Piliers du concept : tout est lisible d'un coup, sans défilement ─── */
.piliers {
  display: grid;
  gap: 0;
  margin-top: clamp(34px, 4vw, 50px);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .piliers { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 72px); } }
.pilier {
  padding-block: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
}
.pilier h3 {
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pilier p { margin-top: 8px; color: var(--muted); max-width: 52ch; }
/* Le 5e pilier occupe toute la largeur pour équilibrer la grille */
@media (min-width: 820px) { .pilier:last-child { grid-column: 1 / -1; } }

/* ── Bouton « Prendre un rendez-vous » flottant ───────────────────────
   Le header n'a plus de bouton : celui-ci prend le relais dès que le
   héro est dépassé, et s'efface sur la section des offres, qui porte
   déjà ses propres boutons. ────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.sticky-cta.show { opacity: 1; visibility: visible; transform: translateY(0); }
.sticky-cta .btn {
  box-shadow: 0 14px 34px -10px rgba(23, 16, 12, .55);
  padding: 15px 26px;
}
@media (max-width: 560px) {
  .sticky-cta { left: clamp(16px, 4vw, 24px); right: clamp(16px, 4vw, 24px); }
  .sticky-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ── 6 · Deuxième avis ───────────────────────────────────────────────── */
.avis-grid {
  display: grid;
  gap: clamp(22px, 2.6vw, 30px);
  margin-top: clamp(34px, 4vw, 48px);
}
@media (min-width: 760px) { .avis-grid { grid-template-columns: repeat(3, 1fr); } }
.avis-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 32px);
}
.avis-item svg { width: 30px; height: 30px; color: var(--accent-deep); margin-bottom: 16px; }
.avis-item h3 { font-size: clamp(17px, 1.7vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
.avis-item p { margin-top: 12px; color: var(--muted); }
.avis-foot {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
}
.avis-foot p { font-size: clamp(17px, 2vw, 19px); font-weight: 500; max-width: 44ch; }

/* ── 8 · FAQ (accordéon) ─────────────────────────────────────────────── */
.faq-list { border-top: 1.5px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 17.5px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.faq-q:hover { color: var(--accent-deep); }

.faq-x { position: relative; flex: 0 0 18px; height: 18px; }
.faq-x::before, .faq-x::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 1.5px;
  background: var(--accent-deep);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.faq-x::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.faq-item.open .faq-x::after { transform: translate(-50%, -50%) rotate(135deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq-a > p {
  overflow: hidden;
  color: var(--muted);
  max-width: 92%;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a > p { padding-bottom: 26px; }

/* ── 9 · Bandeau CTA final ───────────────────────────────────────────── */
.banner {
  background: var(--sage-deep);
  color: var(--white);
  padding-block: clamp(64px, 8vw, 96px);
}
.banner-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}
.banner-title {
  font-size: clamp(24px, 2.7vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.banner-sub {
  margin-top: 14px;
  font-size: clamp(16px, 2vw, 18px);
  color: rgba(255, 255, 255, .85);
  max-width: 520px;
}

/* ── 10 · Footer ─────────────────────────────────────────────────────── */
/* Hauteur réservée sous les pieds de page : le bouton flottant est en
   position fixe et recouvrirait sinon la dernière ligne, le copyright.
   Valeur = hauteur du bouton + sa marge basse + une respiration. */
:root { --cta-flottant: 84px; }
@media (max-width: 560px) { :root { --cta-flottant: 96px; } }

.footer {
  background: var(--ink);
  color: #c9beb0;
  padding-block: clamp(56px, 7vw, 80px) calc(36px + var(--cta-flottant));
  font-size: 14.5px;
}
.footer-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.footer-brand img { height: 32px; width: auto; }

.footer-social { display: flex; gap: 14px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(244, 241, 236, .25);
  border-radius: 50%;
  color: rgba(244, 241, 236, .85);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.footer-social a:hover { border-color: var(--bone); color: var(--bone); }
.footer-social svg { width: 18px; height: 18px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-links a {
  text-decoration: none;
  color: rgba(244, 241, 236, .8);
  transition: color .25s var(--ease);
}
.footer-links a:hover { color: var(--bone); }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 28px;
  border-top: 1px solid rgba(244, 241, 236, .14);
}
.footer-disclaimer { font-size: 12.5px; color: rgba(201, 190, 176, .75); max-width: 780px; }
.footer-copy { margin-top: 18px; font-size: 12.5px; color: rgba(201, 190, 176, .75); }

/* ── Crédit Roots ─────────────────────────────────────────────────────
   La couleur du texte est héritée du pied de page : le même balisage
   tient sur les pieds sombres comme sur le pied clair de la page
   contact. ─────────────────────────────────────────────────────────── */
.credit-roots { white-space: nowrap; }
.credit-roots .coeur { color: #E0573E; font-style: normal; }
.credit-roots a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}
.credit-roots a:hover { color: var(--bone); }
/* Sur la home, le crédit suit la mention de copyright. Trop à l'étroit, il
   passe sur sa propre ligne : le point médian n'a alors plus lieu d'être. */
.footer-copy .credit-roots::before { content: "·"; margin-inline: 8px; }
@media (max-width: 560px) {
  .footer-copy .credit-roots { display: block; margin-top: 6px; }
  .footer-copy .credit-roots::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { .credit-roots a { transition: none; } }

/* ── Bandeau cookies (RGPD) ──────────────────────────────────────────── */
.cookie {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 150;
  width: min(720px, calc(100% - 32px));
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(17, 24, 31, .4);
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.cookie[hidden] { display: none; }
.cookie p { font-size: 13.5px; line-height: 1.55; max-width: 430px; color: rgba(244, 241, 236, .9); }
.cookie a { color: var(--bone); }
.cookie-actions { display: flex; gap: 10px; }
.cookie .btn::after { content: none; }

/* ── 3 · Le concept : présentation + carrousel + CTA vers les services ─ */
.concept-intro {
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.concept-intro-text { margin-top: 6px; max-width: none; }
.concept-intro-text p { font-size: clamp(16px, 1.9vw, 18px); }


.concept-cta {
  margin-top: clamp(36px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}
.concept-cta p {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--muted);
  max-width: 540px;
}

/* ── 5 · L'équipe : cartes de spécialistes (détails au survol) ───────── */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 32px);
  align-items: stretch;
}
.team-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  cursor: pointer;
}
.team-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform .6s var(--ease);
}
.team-card:hover .team-photo img,
.team-card:focus-within .team-photo img,
.team-card.open .team-photo img { transform: scale(1.04); }
.team-photo-soon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, var(--bg-alt) 0%, #E6DACA 55%, #DCCDB9 100%);
  color: var(--sage);
}
.team-photo-soon svg { width: 84px; height: 84px; opacity: .75; }
.team-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 2.6vw, 28px);
  background: linear-gradient(to top, rgba(42, 31, 23, .94) 0%, rgba(42, 31, 23, .6) 62%, rgba(42, 31, 23, 0) 100%);
  color: var(--bone);
}
.team-name { font-size: clamp(20px, 2.4vw, 24px); font-weight: 500; letter-spacing: -0.01em; }
.team-role { margin-top: 4px; font-size: 15px; color: #E8BFAF; }
.team-inami {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, .78);
}
.team-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .45s var(--ease), opacity .45s var(--ease), margin-top .45s var(--ease);
}
.team-details-inner { overflow: hidden; display: grid; gap: 10px; }
.team-details p { font-size: 14px; line-height: 1.6; color: rgba(244, 241, 236, .92); }
.team-details .team-quote { font-style: italic; color: #E8BFAF; }
.team-card:hover .team-details,
.team-card:focus-within .team-details,
.team-card.open .team-details { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
.team-hint {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(245, 239, 230, .92);
  color: var(--ink);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .45s var(--ease);
}
.team-hint::before { content: "+"; }
.team-card:hover .team-hint,
.team-card:focus-within .team-hint,
.team-card.open .team-hint { transform: rotate(45deg); }

/* S'adapte au nombre de praticiens présentés (1 aujourd'hui, 3 à terme) */
@media (min-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
    justify-content: start;
  }
}

/* ── 7 · Avant & après une intervention (bloc sombre) ─────────────────── */
.section-dark {
  background: var(--sage-deep);
  color: var(--white);
}
.section-dark .eyebrow { color: #E8BFAF; }
.section-dark .h2 { color: var(--white); }
.section-dark .prose p { color: rgba(255, 255, 255, .82); }
.section-dark .prose .prose-strong { color: var(--white); }
.section-dark .media img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.btn-etranger { margin-top: 34px; }

/* ── Apparition douce au scroll ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Responsive ≥ 720px ──────────────────────────────────────────────── */
@media (min-width: 720px) {
  .zone { grid-template-columns: minmax(240px, 360px) 1fr; gap: clamp(28px, 3.5vw, 48px); }
  .banner-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
}

/* ── Responsive ≥ 900px : grilles + cartes ───────────────────────────── */
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1.05fr .95fr; }
  .grid-2-media-first { grid-template-columns: .92fr 1.08fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .media-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
}

/* ── Bascule desktop/mobile du header ────────────────────────────────── */
@media (max-width: 1099px) {
  .nav { display: none; }
  .lang { display: none; }
  .burger { display: flex; }
}
@media (min-width: 1100px) {
  .mobile-menu { display: none !important; }
}

/* Sur mobile, le hero reste lisible */
@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { font-size: 14px; }
  .brand svg { height: 42px !important; }
  .hero-actions .btn { width: 100%; }
  .fact dd { max-width: 55%; }
}

/* ── Accessibilité : mouvement réduit ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-checks a { transition: none; }
  .faq-a { transition: none; }
  .btn, .btn::after { transition: none; }
  .team-photo img { transition: none; }
  .team-details { transition: none; }
  .team-hint { transition: none; }
}

/* ── Héro sur mobile : hauteur libre, texte plein cadre ──────────────── */
@media (max-width: 980px) {
  .hero { min-height: min(88svh, 780px); }
  .hero-copy { max-width: none; }
}

/* ── Impression ──────────────────────────────────────────────────────── */
@media print {
  .header, .cookie { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSANTS AJOUTÉS PAR LA REFONTE MULTI-PAGES
   Tout ce qui suit sert la home refondue et les deux pages service.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header des pages service ─────────────────────────────────────────
   Distinct de celui de la home : il ne s'éclaircit pas au scroll, il
   s'assombrit. Le logo n'est pas un lien vers l'accueil, il ancre en haut
   de la page courante. Aucun item ne sort du parcours. ──────────────── */
.header--lp .brand-ink { display: none !important; }
.header--lp .brand-bone { display: block !important; }
.header--lp.scrolled {
  background: rgba(23, 16, 12, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(244, 241, 236, .10);
}
.header--lp.scrolled .nav a { color: rgba(255, 255, 255, .92); }
.header--lp.scrolled .nav a:hover { color: var(--white); }
.header--lp .burger span,
.header--lp.scrolled .burger span { background: var(--white); }
/* Le filtre d'arrière-plan doit disparaître à l'ouverture : il ferait du
   header le bloc conteneur du tiroir, qui est en position fixe, et le
   tiroir s'effondrerait à la hauteur du header. */
.header--lp.menu-open {
  background: #1B1310;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header--lp.menu-open .burger span { background: var(--white); }

/* Bouton de réservation permanent, à droite du header */
.header-cta { padding: 11px 20px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 460px) { .header-cta { padding: 10px 14px; font-size: 13.5px; } }

/* Les libellés des pages service sont plus longs et le header porte en plus
   un bouton : la barre se resserre, et bascule en burger plus tôt que
   celle de la home pour ne jamais passer sur deux lignes. */
.header--lp .nav { gap: clamp(14px, 1.7vw, 24px); }
.header--lp .nav a { font-size: 14.5px; white-space: nowrap; }
.header--lp .header-right { gap: 14px; }
@media (max-width: 1199px) {
  .header--lp .nav { display: none; }
  .header--lp .burger { display: flex; }
  .header--lp.menu-open .mobile-menu { display: flex !important; flex-direction: column; }
}
@media (min-width: 1200px) {
  .header--lp .burger { display: none; }
  .header--lp .mobile-menu { display: none !important; }
}

/* Tiroir mobile des pages service : fond sombre, mêmes ancres */
.header--lp .mobile-menu {
  background: #1B1310;
  border-left: 1px solid rgba(244, 241, 236, .12);
}
.header--lp .mobile-menu nav a {
  color: var(--bone);
  border-bottom-color: rgba(244, 241, 236, .12);
}

/* ── Routeur de situations : les 4 cartes deviennent des liens ────────
   Seul dispositif de mesure de la nature de la demande sur la home. ── */
a.zone {
  text-decoration: none;
  color: inherit;
  transition: background-color .25s var(--ease), padding-inline .25s var(--ease);
}
a.zone:hover, a.zone:focus-visible {
  background: var(--bg-card);
  padding-inline: clamp(12px, 2vw, 22px);
}
a.zone:hover .zone-head h3 { color: var(--accent-deep); }
.zone-head h3 { transition: color .25s var(--ease); }
.zone-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent-deep);
}
.zone-go::after { content: "→"; transition: transform .25s var(--ease); }
a.zone:hover .zone-go::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  a.zone, .zone-head h3, .zone-go::after { transition: none; }
}

/* ── Déroulé en étapes ───────────────────────────────────────────────── */
.steps {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
  margin-top: clamp(34px, 4vw, 48px);
  counter-reset: step;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding-top: 22px; border-top: 1.5px solid var(--ink); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--accent-deep);
  margin-bottom: 12px;
}
.step h3 { font-size: clamp(17px, 1.6vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
.step p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }

/* ── Deux moments (avant / après) : la personne doit se reconnaître vite ─ */
.moments { display: grid; gap: clamp(22px, 3vw, 32px); }
@media (min-width: 820px) { .moments { grid-template-columns: 1fr 1fr; } }
.moment {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.moment--after { background: var(--bg-card); }
.moment-tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.moment h3 {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.moment p { margin-top: 14px; color: var(--muted); }
.moment .zone-go { margin-top: auto; padding-top: 22px; }

/* ── Listes à coches ─────────────────────────────────────────────────── */
.checklist { display: grid; gap: 18px; margin-top: 28px; max-width: 640px; }
.checklist li {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--muted);
}
/* Pastille ronde + coche tracée en CSS, sans image ni icône externe */
.checklist li::before {
  content: "";
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 8px; top: 8px;
  width: 5px; height: 9px;
  border: solid var(--accent);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
.checklist strong { color: var(--ink); font-weight: 500; }
.section-dark .checklist li { color: rgba(255, 255, 255, .82); }
.section-dark .checklist strong { color: var(--white); }
.section-dark .checklist li::before { border-color: #E8BFAF; }
.section-dark .checklist li::after { border-color: #E8BFAF; }

/* ── Citation en exergue ─────────────────────────────────────────────── */
.pullquote {
  margin-top: clamp(36px, 5vw, 54px);
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pullquote p {
  font-size: clamp(18px, 1.9vw, 22px);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.pullquote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Carte du spécialiste (titre + INAMI toujours visibles) ──────────── */
.spec {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
@media (min-width: 820px) { .spec { grid-template-columns: minmax(240px, 340px) 1fr; } }
.spec-photo { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.spec-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.spec-name { font-size: clamp(20px, 2.1vw, 24px); font-weight: 500; letter-spacing: -0.015em; }
.spec-role { margin-top: 6px; font-size: 17px; color: var(--accent-deep); font-weight: 500; }
.spec-inami {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-body { margin-top: 22px; display: grid; gap: 14px; }
.spec-body p { color: var(--muted); max-width: 58ch; }

/* ── CTA répété en fin de section ────────────────────────────────────── */
.section-cta {
  margin-top: clamp(34px, 4.5vw, 50px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.section-cta p {
  font-size: clamp(16px, 1.9vw, 18px);
  color: var(--muted);
  max-width: 42ch;
}
.section-dark .section-cta p { color: rgba(255, 255, 255, .82); }

/* ── Modalités présentées sans réservation (home) ────────────────────── */
.card--info .card-foot { padding-top: 16px; }
.card--info .card-price { margin-bottom: 0; }

/* ── Modale légale : préserve la règle du zéro-sortie ─────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(23, 16, 12, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }
.modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(82vh, 760px);
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 40px 90px -30px rgba(23, 16, 12, .6);
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer;
  transition: border-color .25s var(--ease);
}
.modal-close:hover { border-color: var(--ink); }
.modal-panel h2 { font-size: clamp(20px, 2.2vw, 25px); font-weight: 500; letter-spacing: -0.015em; }
.modal-panel h3 {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 500;
}
.modal-panel p, .modal-panel li { margin-top: 12px; color: var(--muted); font-size: 15px; }
.modal-panel ul { margin-top: 8px; padding-left: 18px; list-style: disc; }
.modal-panel li { margin-top: 6px; }
.modal-panel address { font-style: normal; }

/* ── Pied de page des pages service : sorties réduites au minimum ─────── */
.lp-footer { background: var(--ink); color: #c9beb0; padding-block: clamp(48px, 6vw, 68px) calc(32px + var(--cta-flottant)); font-size: 14.5px; }
.lp-footer-top { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: center; justify-content: space-between; }
.lp-footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.lp-footer-links button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14.5px;
  color: rgba(244, 241, 236, .8);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s var(--ease);
}
.lp-footer-links button:hover { color: var(--bone); }
.lp-footer-bottom {
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: 26px;
  border-top: 1px solid rgba(244, 241, 236, .14);
}
.lp-footer-bottom p { font-size: 12.5px; color: rgba(201, 190, 176, .75); max-width: 780px; }
.lp-footer-bottom p + p { margin-top: 16px; }

/* ── Ancre de section : compense le header fixe ──────────────────────── */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION — HOME SUR FOND BLANC, HEADERS REPENSÉS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header de la home : blanc opaque, jamais fondu dans le héro ───────
   Sélecteur à deux classes pour l'emporter sur .header.scrolled. ────── */
.header.header--solid,
.header.header--solid.scrolled {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(42, 31, 23, .10);
}
.header--solid .brand-bone { display: none !important; }
.header--solid .brand-ink { display: block !important; }
.header--solid .nav a { color: var(--ink); }
.header--solid .nav a:hover { color: var(--accent-deep); }
.header--solid .lang-btn { color: rgba(42, 31, 23, .45); }
.header--solid .lang-btn.on,
.header--solid .lang-btn:hover { color: var(--ink); }
.header--solid .lang-sep { color: rgba(42, 31, 23, .3); }
.header--solid .burger span { background: var(--ink); }

/* ── Header des pages service : rien d'autre que le bouton ────────────
   Pas de logo, pas de navigation, pas de burger : aucun élément ne peut
   détourner le visiteur de la réservation. ─────────────────────────── */
.header--lp .brand,
.header--lp .nav,
.header--lp .burger,
.header--lp .mobile-menu { display: none !important; }
.header.header--lp,
.header.header--lp.scrolled,
.header.header--lp.menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.header--lp .header-inner { justify-content: flex-end; }
.header--lp .header-cta { box-shadow: 0 12px 30px -12px rgba(23, 16, 12, .55); }

/* ── Héro clair : le texte prime, l'image l'accompagne ────────────────
   Plus de photo pleine largeur ni de voile sombre : deux colonnes, le
   texte d'abord. ───────────────────────────────────────────────────── */
.hero--light {
  min-height: 0;
  background: var(--bg);
  color: var(--ink);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 78px)) 0 clamp(56px, 8vw, 96px);
}
.hero--light::before { content: none; }
.hero--light .hero-inner {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero--light .hero-inner { grid-template-columns: 1.06fr .94fr; }
}
.hero--light .hero-copy { max-width: 620px; }
.hero--light .hero-eyebrow { color: var(--accent-deep); }
.hero--light .hero-title { color: var(--ink); }
.hero--light .hero-sub { color: var(--muted); }
.hero--light .hero-checks a { color: var(--ink); }
.hero--light .hero-checks svg { color: var(--accent); }
.hero--light .btn-ghost {
  border-color: rgba(42, 31, 23, .28);
  color: var(--ink);
  background: transparent;
}
.hero--light .btn-ghost:hover { background: rgba(42, 31, 23, .05); }

.hero-figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
}
.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Les puces passent au-dessus des boutons, resserrées à 3 px. */
.hero-checks { gap: 3px; margin: 30px 0 0; }
.hero--light .hero-actions { margin-top: 30px; }

/* ── Les deux natures de demande, mises en évidence ───────────────────
   Bloc principal de la home : deux portes, décrites par la situation de
   la personne et non par un produit. ───────────────────────────────── */
.duo {
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
  margin-top: clamp(34px, 4vw, 48px);
}
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.duo-card:hover, .duo-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 26px 50px -34px rgba(42, 31, 23, .45);
}
.duo-tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 18px;
}
.duo-card h3 {
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.14;
}
.duo-card h3 em { font-style: italic; font-weight: 400; color: var(--accent); }
.duo-lead { margin-top: 16px; color: var(--muted); }
.duo-list { margin-top: 22px; display: grid; gap: 3px; }
.duo-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--muted);
}
.duo-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 7px; height: 1.5px;
  background: var(--accent);
}
.duo-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 28px;
  font-weight: 500;
  color: var(--accent-deep);
}
.duo-go::after { content: "→"; transition: transform .25s var(--ease); }
.duo-card:hover .duo-go::after,
.bubble-card:hover .duo-go::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .duo-card, .duo-go::after { transition: none; }
}

/* ── Ce que le cabinet ne fait pas : la limite, écrite noir sur blanc ── */
.limites {
  margin-top: clamp(34px, 4vw, 48px);
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.limites h3 {
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.limites ul { margin-top: 18px; display: grid; gap: 12px; }
.limites li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
}
.limites li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 12px; height: 1.5px;
  background: var(--accent);
}

/* ── Page d'accueil : tout sur fond blanc ─────────────────────────────
   Les zones colorées et les fonds de carte crème sont neutralisés. Une
   section retrouvera sa couleur dès qu'elle sera demandée. ─────────── */
body[data-service="home"] .section-alt { background: var(--bg); }
body[data-service="home"] .card,
body[data-service="home"] .pills li,
body[data-service="home"] .team-photo { background: var(--white); }
body[data-service="home"] a.zone:hover,
body[data-service="home"] a.zone:focus-visible { background: #FBF9F6; }
body[data-service="home"] .banner {
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
body[data-service="home"] .banner-sub { color: var(--muted); }
body[data-service="home"] .banner .btn-light {
  background: var(--accent-deep);
  color: var(--white);
}
body[data-service="home"] .banner .btn-light:hover { background: #8a4830; }

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 2 — HOME : MENU PLEINE PAGE, BULLES ALIGNÉES, MÉDECIN COMPACT
   ═══════════════════════════════════════════════════════════════════════ */

/* Les pastilles reprennent l'arrondi des boutons : un seul rayon partout. */
.pills li { border-radius: var(--radius); }

/* ── Menu mobile en plein écran ───────────────────────────────────────
   Il part du haut de la page et non de sous le header ; la barre du
   header reste au-dessus pour que le bouton de fermeture soit atteignable.
   ─────────────────────────────────────────────────────────────────── */
.header-inner { position: relative; z-index: 2; }
.mobile-menu {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  border-left: 0;
  box-shadow: none;
  padding: calc(var(--header-h) + 26px) var(--gutter) calc(26px + env(safe-area-inset-bottom));
}
.mobile-menu nav a { font-size: 20px; padding: 20px 2px; }

/* ── Section à deux colonnes : titre à gauche, image à droite ────────── */
.head-media {
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}
@media (min-width: 900px) { .head-media { grid-template-columns: 1.04fr .96fr; } }
.head-media .section-head { margin-bottom: 0; max-width: none; }
.head-media figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.head-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── Le praticien, en bulle : la section tient en un écran ───────────── */
.doc {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  padding: clamp(26px, 3vw, 42px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (min-width: 720px) { .doc { grid-template-columns: auto 1fr; } }
.doc-photo {
  width: clamp(124px, 15vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-alt);
}
.doc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}
.doc-name { font-size: clamp(19px, 2vw, 22px); font-weight: 500; letter-spacing: -0.015em; }
.doc-role { margin-top: 4px; font-size: 16px; font-weight: 500; color: var(--accent-deep); }
.doc-inami {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-body { margin-top: 18px; display: grid; gap: 10px; }
.doc-body p { color: var(--muted); max-width: 62ch; font-size: 15.5px; }

/* ── Section teintée : conserve sa couleur même sur la home blanche ──── */
.section-tint { background: var(--bg-alt); }

/* Bouton de rappel sous un bloc de texte */
.bloc-cta { margin-top: clamp(28px, 3.5vw, 40px); }

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 3 — TROIS FAITS EN REGARD, DÉCLARATION EN EXERGUE
   ═══════════════════════════════════════════════════════════════════════ */

/* Trois colonnes de faits courts : même rythme que le déroulé, sans
   numérotation. Remplace un bloc de prose qui se lisait mal. */
.facts3 {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(32px, 4vw, 46px);
}
@media (min-width: 760px) { .facts3 { grid-template-columns: repeat(3, 1fr); } }
.facts3 > div { padding-top: 22px; border-top: 1.5px solid var(--ink); }
.facts3 h3 {
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.facts3 p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

/* La phrase qui conclut, détachée du corps de texte. */
.statement {
  margin-top: clamp(30px, 4vw, 46px);
  padding: clamp(24px, 3vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.statement p {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 4 — ANIMATIONS
   Quatre gestes, en plus du fondu : cascade sur les grilles, volet
   vertical sur les images, soulignement du menu, parallaxe du héro.
   Tout est neutralisé si le système demande un mouvement réduit.
   ═══════════════════════════════════════════════════════════════════════ */

/* Les faits empilés quand ils tiennent dans une colonne de texte */
.facts3.facts3--stack {
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 26px);
  margin-top: clamp(26px, 3vw, 34px);
}

/* ── 1 · Cascade : les enfants d'une grille apparaissent l'un après
   l'autre, jamais plus de six crans pour ne pas faire attendre.

   Deux précautions. D'abord les composants qui portent déjà une
   transition (cartes du routeur, cartes service) doivent réintégrer
   opacity et transform dans leur liste, sinon leur propre règle écrase
   celle de l'apparition et le fondu ne se joue pas. Ensuite le retard
   ne s'applique qu'à l'apparition : au survol il retombe à zéro, pour
   que le bouton réponde immédiatement. ─────────────────────────────── */
.reveal { --d: calc(min(var(--i, 0), 5) * 85ms); }
.reveal.visible { transition-delay: var(--d); }
.reveal.visible:hover,
.reveal.visible:focus-within { transition-delay: 0s; }

a.zone {
  transition: opacity .7s var(--ease), transform .7s var(--ease),
              background-color .25s var(--ease), padding-inline .25s var(--ease);
}
.duo-card {
  transition: opacity .7s var(--ease), transform .7s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* ── 2 · Volet vertical sur les images ────────────────────────────────
   L'image se dévoile du bas vers le haut pendant que le cadrage se
   resserre. Remplace le fondu sur les figures. ─────────────────────── */
/* Le volet rogne l'image, jamais la figure : un élément entièrement
   rogné n'intersecte plus le viewport, et l'observateur d'apparition
   ne se déclencherait jamais. La figure contient le zoom de l'image
   (overflow), sans quoi elle déborderait de la marge pendant le volet. */
.reveal.reveal-wipe {
  opacity: 1;
  transform: none;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(28, 39, 51, .35);
}
.reveal.reveal-wipe img {
  clip-path: inset(0 0 100% 0);
  scale: 1.08;
  transition: clip-path .95s var(--ease), scale 1.5s var(--ease);
}
.reveal.reveal-wipe.visible img {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

/* ── 3 · Le menu : un filet se trace sous l'item survolé ──────────────── */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* ── 4 · Les pastilles du routeur montent une à une avec leur carte ──── */
.zone .pills li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.zone.visible .pills li { opacity: 1; transform: none; }
.zone .pills li:nth-child(1) { transition-delay: .18s; }
.zone .pills li:nth-child(2) { transition-delay: .26s; }
.zone .pills li:nth-child(3) { transition-delay: .34s; }

/* ── 5 · Le bloc de déclaration glisse depuis son filet ───────────────── */
.statement.reveal { transform: translateX(-18px); }
.statement.reveal.visible { transform: none; }

/* ── 6 · Parallaxe du héro : le JS pose la translation ────────────────── */
.hero-figure img { will-change: translate; }

/* ── Mouvement réduit : tout redevient statique ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal-wipe { transition: none; transition-delay: 0s; }
  .reveal-wipe img { clip-path: none; scale: 1; transition: none; }
  .nav a::after { transition: none; }
  .zone .pills li { opacity: 1; transform: none; transition: none; }
  .statement.reveal { transform: none; }
  .hero-figure img { translate: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 5 — GLASSMORPHISME, HÉRO PLEINE IMAGE, BULLES, ANIMATIONS
   VARIÉES PAR SECTION
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Halos colorés : c'est ce qui passe derrière le verre ─────────────
   Sans quelque chose à flouter, le glassmorphisme ne se voit pas sur un
   fond blanc. Deux nappes diffuses par section, en retrait. ────────── */
.aurora { position: relative; isolation: isolate; overflow: hidden; }
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.aurora::before {
  width: min(560px, 60vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(232, 191, 175, .85), transparent 68%);
  top: -14%; left: -12%;
}
.aurora::after {
  width: min(480px, 52vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(176, 131, 107, .55), transparent 68%);
  bottom: -18%; right: -10%;
}
.aurora--soft::before { opacity: .55; }
.aurora--soft::after { opacity: .45; }

/* ── Le verre ─────────────────────────────────────────────────────────
   Une seule définition, réutilisée par toutes les cartes de la page. */
.glass {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  backdrop-filter: blur(22px) saturate(1.55);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius);
  box-shadow: 0 26px 64px -38px rgba(42, 31, 23, .55);
}
.glass--dark {
  background: rgba(23, 16, 12, .40);
  border-color: rgba(255, 255, 255, .20);
  box-shadow: 0 26px 64px -34px rgba(0, 0, 0, .6);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(255, 255, 255, .92); }
  .glass--dark { background: rgba(23, 16, 12, .8); }
}

/* ── Header des pages service : logo + bouton, sur verre ──────────────── */
.header--glass,
.header--glass.scrolled {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(42, 31, 23, .08);
}
.header--glass .brand-bone { display: none !important; }
.header--glass .brand-ink { display: block !important; }
.header--glass .header-inner { justify-content: space-between; }

/* ── Héro pleine image, texte à gauche, sous le header ────────────────── */
.hero--photo {
  min-height: 0;
  padding: clamp(64px, 8vw, 104px) 0 clamp(64px, 8vw, 104px);
  margin-top: var(--header-h);
  color: var(--white);
}
.hero--photo::before {
  background:
    linear-gradient(90deg, rgba(23, 16, 12, .92) 0%, rgba(23, 16, 12, .80) 38%, rgba(23, 16, 12, .38) 70%, rgba(23, 16, 12, .22) 100%),
    linear-gradient(180deg, rgba(23, 16, 12, .30) 0%, rgba(23, 16, 12, 0) 40%);
}
/* Le sujet est décalé à droite : la colonne de texte reste sur du fond. */
.hero--photo .hero-media img { object-position: 62% 30%; }
@media (max-width: 899px) { .hero--photo .hero-media img { object-position: 66% 24%; } }
@media (max-width: 899px) {
  .hero--photo { padding: clamp(48px, 9vw, 72px) 0 clamp(52px, 9vw, 76px); }
  .hero--photo .hero-actions .btn { width: 100%; }
}
.hero--photo .hero-copy { max-width: 620px; }
.hero--photo .hero-checks { gap: 3px; margin-top: 26px; }
.hero--photo .hero-actions { margin-top: 30px; }

/* ── Titre et texte centrés ───────────────────────────────────────────── */
.centre { max-width: 760px; margin-inline: auto; text-align: center; }
.centre .h2 { margin-inline: auto; }
.centre .prose { margin-inline: auto; max-width: 660px; }
.centre .prose p { text-align: center; }
.centre .section-cta { justify-content: center; }

/* ── Bulles : icône ou photo dans un rond, puis le texte ──────────────── */
.bubbles { display: grid; gap: clamp(18px, 2.2vw, 26px); }
@media (min-width: 620px) { .bubbles--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bubbles--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .bubbles--3 { grid-template-columns: repeat(3, 1fr); } }

.bubble-card {
  position: relative; /* ancre le badge « Le plus demandé » */
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
}
/* Certaines bulles sont des liens (routeur de l'accueil) : même habillage
   que les autres, sans soulignement. */
a.bubble-card { text-decoration: none; }
.bubble {
  width: 74px; height: 74px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(200, 105, 74, .13);
  border: 1px solid rgba(200, 105, 74, .28);
}
.bubble svg { width: 29px; height: 29px; color: var(--accent-deep); }
.bubble--photo {
  width: 104px; height: 104px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid rgba(255, 255, 255, .8);
}
.bubble--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.bubble--vide {
  background: rgba(42, 31, 23, .05);
  border-style: dashed;
  border-color: rgba(42, 31, 23, .2);
}
.bubble--vide svg { color: var(--muted); opacity: .7; }

.bubble-card h3 {
  font-size: clamp(17px, 1.7vw, 19.5px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.bubble-card p { margin-top: 10px; color: var(--muted); font-size: 15px; }
/* Le badge « Le plus demandé » garde son habillage propre, même posé
   dans une bulle. */
.bubble-card p.card-badge {
  margin-top: 0;
  color: var(--white);
  font-size: 10.5px;
}
.bubble-card .card-dur,
.bubble-card .card-price { margin-top: 12px; }
.bubble-card .card-foot { margin-top: auto; padding-top: 22px; }
.bubble-card .card-price { padding-top: 0; border-top: 0; font-size: 20px; }
/* Les exemples passent en liste à puces : les étiquettes encadrées
   se répartissaient au hasard sur deux lignes selon leur longueur, et
   ajoutaient un troisième niveau de cadre dans une carte déjà cerclée. */
.bubble-tags { margin-top: 18px; display: grid; gap: 7px; }
.bubble-tags li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}
.bubble-tags li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 8px;
  height: 1.5px;
  background: var(--accent);
}
.bubble-card--soon { opacity: .82; }
.bubble-card--soon h3 { color: var(--muted); }

/* ── FAQ en deux colonnes : le titre tient à gauche ───────────────────── */
.faq-split { display: grid; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) { .faq-split { grid-template-columns: .78fr 1.22fr; } }
.faq-split .section-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 28px); }
@media (max-width: 939px) { .faq-split .section-head { position: static; } }
.faq-split .faq-list { border-top-color: rgba(42, 31, 23, .55); }

/* ── Variantes d'apparition, une par section ──────────────────────────── */
.reveal.rv-left { transform: translateX(-36px); }
.reveal.rv-right { transform: translateX(36px); }
.reveal.rv-pop { transform: scale(.93); }
.reveal.rv-blur { transform: scale(1.02); filter: blur(9px); }
.reveal.rv-tilt { transform: translateY(26px) rotate(-1.1deg); }
.reveal.rv-down { transform: translateY(-24px); }
.reveal.rv-left.visible,
.reveal.rv-right.visible,
.reveal.rv-pop.visible,
.reveal.rv-blur.visible,
.reveal.rv-tilt.visible,
.reveal.rv-down.visible { transform: none; filter: none; }
.reveal.rv-blur { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }

/* Le héro : les lignes montent l'une après l'autre, l'image s'apaise */
.hero--photo .hero-media img { animation: heroCalme 9s var(--ease) forwards; }
@keyframes heroCalme { from { transform: scale(1.09); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .reveal.rv-left, .reveal.rv-right, .reveal.rv-pop,
  .reveal.rv-blur, .reveal.rv-tilt, .reveal.rv-down {
    transform: none; filter: none;
  }
  .hero--photo .hero-media img { animation: none; }
}

/* Le header verre réaffiche le logo, que la variante « bouton seul »
   masquait, et répartit logo et bouton aux deux extrémités. */
.header--glass .brand { display: inline-flex !important; }
.header--glass .header-inner { justify-content: space-between; }


/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 6 — HEADER QUI DÉFILE, BOUTON FLOTTANT, BULLES PHOTO
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Le header n'est plus épinglé : il part avec la page ──────────────
   Le relais est pris par le bouton flottant, qui apparaît dès que le
   bandeau a quitté l'écran. ───────────────────────────────────────── */
.header--defilant { position: absolute; }
body.entete-defilante [id] { scroll-margin-top: 24px; }

/* Le bouton flottant, posé en bas à droite, sur ses propres ombres. */
.sticky-cta .btn {
  box-shadow: 0 18px 42px -14px rgba(23, 16, 12, .62);
  padding: 15px 26px;
}

/* ── Bulles photo : un peu plus grandes, cerclées de clair ────────────── */
.bubble--photo { width: 116px; height: 116px; }
.bubble--photo.bubble--fit img { object-position: 50% 50%; }

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 7 — HEADER SANS BOUTON SUR TABLETTE ET MOBILE, IDENTITÉ DU
   PRATICIEN PLUS DISCRÈTE
   ═══════════════════════════════════════════════════════════════════════ */

/* Sous 1024 px, le bouton quitte le bandeau : le héro porte déjà son appel,
   et le bouton flottant prend le relais au premier défilement. */
@media (max-width: 1024px) {
  .header--lp .header-cta { display: none; }
  .header--lp .header-inner { justify-content: flex-start; }
}

/* ── Titre professionnel et n° INAMI : lisibles, plus criards ─────────
   Le mono en capitales espacées écrasait le nom du praticien. On garde
   l'information — elle est obligatoire — mais au bon niveau. ───────── */
.doc-role,
.spec-role,
.bubble-card .role {
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-deep);
}
.doc-inami,
.spec-inami,
.bubble-card .inami {
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ── Image d'ambiance sous un bloc centré ─────────────────────────────── */
.bandeau-image {
  margin-top: clamp(38px, 5vw, 60px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
}
.bandeau-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
@media (max-width: 720px) { .bandeau-image img { aspect-ratio: 4 / 3; } }

/* Sur mobile et tablette, ni panneau ni effet de verre : un voile sombre
   uniforme couvre toute la photo, et garantit la lecture du texte quelle
   que soit la zone sur laquelle il retombe. */
@media (max-width: 1024px) {
  .hero--photo::before {
    background: rgba(23, 16, 12, .66);
  }
}

/* Les deux pages service partagent la même photo de héro tant que les
   créas définitives ne sont pas fournies : un cadrage distinct évite
   qu'elles se ressemblent trait pour trait. */
body[data-service="evaluation"] .hero--photo .hero-media img { object-position: 46% 38%; }
@media (max-width: 899px) {
  body[data-service="evaluation"] .hero--photo .hero-media img { object-position: 58% 26%; }
}

/* Héro de l'accueil : la patiente est à gauche du cadre, on la garde
   visible à côté du texte plutôt que le dos du praticien. */
body[data-service="home"] .hero--photo .hero-media img { object-position: 24% 30%; }
@media (max-width: 899px) {
  body[data-service="home"] .hero--photo .hero-media img { object-position: 43% 26%; }
}

/* Les bulles à pictogramme n'ont pas besoin de la taille des bulles photo :
   un rond plus discret laisse le titre de la carte dominer. */
.bubble:not(.bubble--photo) { width: 62px; height: 62px; margin-bottom: 18px; }
.bubble:not(.bubble--photo) svg { width: 25px; height: 25px; }

/* Les deux cartes de service de la home portent la bulle du héro de leur
   page : le visiteur reconnaît la page avant d'y arriver. */
.duo-card .bubble--photo { width: 124px; height: 124px; margin-bottom: 22px; }