/* ═══════════════════════════════════════════════════════════════════════
   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; }

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 5 — LANDING « DEUXIÈME AVIS »
   L'accueil n'est plus une page de marque mais une page de décision :
   le praticien porte la confiance, le prix est lisible avant le clic, et
   le bouton de réservation ne quitte jamais l'écran.

   Tout ce bloc ne concerne que index.html. Les deux pages service
   gardent leur gabarit d'origine.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Héro scindé : le texte à gauche, le praticien à droite ────────
   Le portrait n'est pas une illustration : c'est la preuve principale.
   Il doit donc être vu en même temps que le titre, jamais en dessous. */
.hero--split {
  min-height: 0;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(232, 191, 175, .32), transparent 62%),
    linear-gradient(180deg, var(--bone) 0%, var(--bg) 78%);
  color: var(--ink);
  padding: calc(var(--header-h) + clamp(34px, 5vw, 66px)) 0 clamp(48px, 6vw, 80px);
}
.hero--split::before { content: none; }
.hero--split .hero-inner {
  display: grid;
  gap: clamp(38px, 5vw, 68px);
  align-items: center;
}
@media (min-width: 940px) {
  .hero--split .hero-inner { grid-template-columns: 1.08fr .92fr; }
}
.hero--split .hero-copy { max-width: 640px; }
.hero--split .hero-eyebrow { color: var(--accent-deep); }
.hero--split .hero-title { color: var(--ink); }
.hero--split .hero-sub { color: var(--muted); max-width: 30em; }
/* Les coches du héro sont dessinées pour un fond photo sombre : sur le
   héro clair, elles seraient illisibles sans ces trois lignes. */
.hero--split .hero-checks { gap: 10px; margin: 26px 0 0; }
.hero--split .hero-checks a { color: var(--ink); }
.hero--split .hero-checks svg { color: var(--accent); }
.hero--split .hero-checks a:hover { color: var(--accent-deep); }

.hero--split .btn-ghost {
  border-color: rgba(42, 31, 23, .26);
  color: var(--ink);
  background: transparent;
}
.hero--split .btn-ghost:hover { background: rgba(42, 31, 23, .05); }
.hero--split .hero-actions { margin-top: 26px; flex-wrap: wrap; }

/* Preuves courtes : une ligne, séparées par des points, jamais une liste
   à puces — on doit les lire d'un seul mouvement de l'œil. */
.hero-proofs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.hero-proofs li { display: flex; align-items: center; gap: 14px; }
.hero-proofs li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* L'offre est annoncée avant le bouton : on ne clique jamais sans
   connaître le prix. */
.hero-offer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 24px;
  padding: 13px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
}
.hero-offer-what { font-size: 15px; color: var(--muted); }
.hero-offer-price {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Le portrait, cadré large, avec la carte d'identité professionnelle
   posée dessus : nom, titre et n° INAMI lisibles sans défilement. */
.hero-portrait {
  position: relative;
  margin: 0;
  max-width: 480px;
  justify-self: center;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: 0 46px 90px -52px rgba(42, 31, 23, .72);
}
.hero-portrait picture { display: block; }
.hero-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 14%;
  border-radius: var(--radius);
}
.hero-card {
  position: absolute;
  left: clamp(12px, 4%, 20px);
  right: clamp(12px, 4%, 20px);
  bottom: clamp(12px, 4%, 20px);
  padding: 14px 18px;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .8);
}
@supports not (backdrop-filter: blur(1px)) {
  .hero-card { background: rgba(255, 255, 255, .95); }
}
.hero-card-name {
  font-size: clamp(17px, 1.8vw, 19px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.hero-card-role { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.hero-card-inami {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* Sous 940 px, un grand portrait repousserait le bouton de réservation
   hors du premier écran — exactement ce qu'il ne faut pas. Le bloc se
   replie donc en bandeau d'identité : le visage reste vu d'emblée, en
   plus petit, et le prix comme le bouton restent visibles sans défiler.
   Le portrait pleine hauteur revient plus bas, dans « Le praticien ». */
@media (max-width: 939px) {
  .hero--split { padding-bottom: clamp(34px, 5vw, 48px); }
  .hero--split .hero-inner { grid-template-columns: 1fr; gap: 22px; }
  .hero--split .hero-copy { order: 2; max-width: none; }
  /* Sans ordre explicite, les chiffres remontaient avant le bandeau
     d'identité et le titre, et repoussaient le bouton hors de l'écran. */
  .hero--split .stats { order: 3; }

  .hero-portrait {
    order: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding: 12px 16px 12px 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 18px 40px -32px rgba(42, 31, 23, .6);
  }
  .hero-portrait picture { flex: none; }
  .hero-portrait img {
    width: 74px; height: 74px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-position: 50% 8%;
  }
  .hero-card {
    position: static;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero-card-name { font-size: 17px; }

  /* Le bandeau d'identité dit déjà le nom, le titre et les villes, et le
     bandeau de confiance juste dessous dit les quatre preuves : cette
     ligne ne ferait que répéter, en volant la place du bouton. */
  .hero-proofs { display: none; }
}
@media (max-width: 560px) {
  .hero-offer { width: 100%; justify-content: space-between; }
}

/* ── 2 · Bandeau de confiance ─────────────────────────────────────────
   Quatre éléments, pas un de plus : au-delà, plus rien ne se lit. */
.trustband {
  border-block: 1px solid var(--line);
  background: var(--bg-card);
  padding-block: clamp(18px, 2.4vw, 26px);
}
.trustband-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px clamp(18px, 3vw, 40px);
}
@media (min-width: 860px) { .trustband-inner { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(13px, 1.4vw, 14.5px);
  font-weight: 500;
  line-height: 1.3;
}
.trust-item svg { width: 21px; height: 21px; flex: none; color: var(--accent); }

/* ── 3 · Les deux moments ─────────────────────────────────────────────
   Les cartes ne sont plus des liens : elles décrivent une situation, et
   c'est le bouton sous la grille qui emmène à la réservation. */
.duo-card--after { background: var(--bg-card); }
.duo-card:not(a):hover { transform: none; box-shadow: none; border-color: var(--line); }
.duo-card--after:not(a):hover { border-color: var(--line); }

/* ── 5 · Le praticien ─────────────────────────────────────────────────
   Portrait plein cadre à gauche, qualifications à droite. */
.praticien { align-items: center; }
.praticien-photo { border-radius: var(--radius); overflow: hidden; }
.praticien-photo img { width: 100%; object-fit: cover; }
.praticien-role {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.praticien .prose { margin-top: 22px; }
.praticien-facts {
  display: grid;
  gap: 0;
  margin-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.praticien-facts li {
  display: grid;
  gap: 4px 22px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) {
  .praticien-facts li { grid-template-columns: 118px 1fr; align-items: baseline; }
}
.pf-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pf-v { font-size: 15px; line-height: 1.5; }

/* ── 7 · L'offre principale ───────────────────────────────────────────
   Une seule offre occupe le centre. Les deux autres modalités sont
   repliées dessous : disponibles, mais hors du chemin. */
.offre {
  display: grid;
  gap: 0;
  margin-top: clamp(34px, 4vw, 48px);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(156, 82, 56, .62);
}
@media (min-width: 860px) { .offre { grid-template-columns: 1.25fr .75fr; } }
.offre-main { padding: clamp(28px, 3.4vw, 44px); }
.offre-tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.offre-main h3 {
  font-size: clamp(22px, 2.5vw, 29px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.offre-sub { margin-top: 14px; color: var(--muted); }
.offre-list { display: grid; gap: 11px; margin-top: 26px; }
.offre-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.5;
}
/* Coche tracée en CSS : aucune image, aucune icône externe. */
.offre-list li::before,
.offre-list li::after { content: ""; position: absolute; }
.offre-list li::before {
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(200, 105, 74, .14);
}
.offre-list li::after {
  left: 6px; top: 8px;
  width: 8px; height: 4px;
  border-left: 1.8px solid var(--accent-deep);
  border-bottom: 1.8px solid var(--accent-deep);
  transform: rotate(-45deg);
}
.offre-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3.4vw, 40px);
  background: var(--bone);
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) {
  .offre-side { border-top: 0; border-left: 1px solid var(--line); }
}
.offre-price {
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.offre-price span { font-size: .5em; font-weight: 500; margin-left: 2px; }
.offre-price-note {
  margin-top: 10px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.offre-reassure {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Zone secondaire repliée : elle existe, elle ne concurrence pas. */
.offre-alt {
  margin-top: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.offre-alt > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px clamp(20px, 2.4vw, 28px);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.offre-alt > summary::-webkit-details-marker { display: none; }
.offre-alt > summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--accent-deep);
  transition: transform .25s var(--ease);
}
.offre-alt[open] > summary::after { transform: rotate(45deg); }
.offre-alt > summary:hover { color: var(--accent-deep); }
.offre-alt-body { border-top: 1px solid var(--line); }
.offre-alt-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px clamp(20px, 2.4vw, 28px);
}
.offre-alt-item + .offre-alt-item { border-top: 1px solid var(--line); }
.offre-alt-item h4 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.offre-alt-item p { margin-top: 5px; font-size: 14px; color: var(--muted); max-width: 46em; }
.offre-alt-go { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.offre-alt-price { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .offre-alt > summary::after { transition: none; }
}

/* ── Bouton flottant : présent, discret ───────────────────────────────
   Il ne paraît qu'une fois le héro passé, et s'efface sur le bloc de
   réservation, qui porte déjà son propre bouton. */
@media (max-width: 560px) {
  .sticky-cta .btn { font-size: 15px; padding: 14px 18px; }
}

/* ── Modale de réservation Cal.com ────────────────────────────────────
   Le calendrier s'ouvre sur la page : un clic, pas de changement
   d'onglet, et le rendez-vous confirmé peut être mesuré. Le lien reste
   un vrai href : sans JavaScript, il ouvre cal.com normalement. */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 34px);
  background: rgba(23, 16, 12, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cal-modal[hidden] { display: none; }
.cal-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1020px, 100%);
  max-height: 94vh;
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .7);
}
/* Le calendrier se dimensionne lui-même : la fenêtre le suit, avec une
   hauteur plancher pour que l'ouverture ne soit pas un clignotement.
   Le sélecteur vise l'emplacement du calendrier et lui seul : la barre
   de titre est un div elle aussi, et s'étirerait avec. */
#cal-modal-embed {
  flex: 1 1 auto;
  width: 100%;
  min-height: min(560px, 72vh);
  overflow: auto;
}
/* Une barre propre au-dessus du calendrier : le bouton de fermeture ne
   peut pas recouvrir les commandes de Cal.com. */
.cal-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
  background: var(--bone);
}
.cal-modal-title {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cal-modal-close {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.cal-modal-close:hover { background: var(--bg-card); }
.cal-modal-fallback {
  flex: 0 0 auto;
  padding: 10px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bone);
  border-top: 1px solid var(--line);
}
.cal-modal-fallback a { color: var(--accent-deep); }

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 6 — CE QUI FONDE L'AVIS
   Deux blocs ajoutés aux pages portées par le praticien : ce qu'il opère
   réellement, et ce que le visiteur peut vérifier lui-même.

   « Chirurgien plasticien » seul reste une étiquette. Ces deux blocs la
   remplissent : l'un dit sur quoi porte sa pratique, l'autre donne les
   numéros d'inscription que n'importe qui peut contrôler auprès des
   organismes qui les délivrent.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ce qu'il opère ───────────────────────────────────────────────────
   Une liste de définitions, pas des cartes : c'est une information de
   référence, elle doit se lire en diagonale sans rien réclamer. */
.pratique {
  margin-top: clamp(28px, 3.4vw, 38px);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.pratique-t {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.pratique-liste { display: grid; gap: 0; }
.pratique-liste > div {
  display: grid;
  gap: 3px 20px;
  padding-block: 13px;
  border-top: 1px solid var(--line);
}
.pratique-liste > div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 560px) {
  .pratique-liste > div { grid-template-columns: 148px 1fr; align-items: baseline; }
}
.pratique-liste dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.pratique-liste dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.pratique-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Ce qui est vérifiable ────────────────────────────────────────────
   La preuve que ce site peut donner n'est pas un témoignage : c'est un
   numéro d'inscription, que le visiteur peut contrôler lui-même auprès
   de l'organisme qui l'a délivré. ─────────────────────────────────── */
.preuves {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(34px, 4vw, 48px);
}
@media (min-width: 640px) { .preuves { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .preuves { grid-template-columns: repeat(4, 1fr); } }
.preuve {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.preuve-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 14px;
}
.preuve-v {
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.preuve-d { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.preuves-note {
  margin-top: clamp(24px, 3vw, 32px);
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

/* Un identifiant ne se coupe pas en deux : ni le n° INAMI, ni un prix. */
.nb { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   RÉVISION 7 — DISPOSITION DE L'INFORMATION
   Trois gabarits repris de la référence, coulés dans la charte Miror Num :
   les chiffres clés posés sous le héro, les domaines en lignes numérotées
   avec leurs actes en pastilles, et les qualifications en items barrés
   d'un filet d'accent.

   Rien n'est emprunté au dessin du site de référence : ni sa palette, ni
   ses typographies, ni ses formes. Seul l'ordre dans lequel l'information
   se présente est repris.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chiffres clés, sous le héro ──────────────────────────────────────
   Le nombre d'abord, ce qu'il compte ensuite : lu en un coup d'œil, il
   fait le travail d'un paragraphe entier. */
.stats {
  /* Les chiffres courent sous les deux colonnes du héro, jamais dans la
     seule colonne de texte : à 160 px de large, « Bruxelles » déborde. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 34px) clamp(24px, 4vw, 52px);
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
/* Le nombre de chiffres n'est pas figé : la grille s'y adapte plutôt
   que de laisser une colonne vide quand il y en a trois. */
@media (min-width: 720px) { .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.stat-n {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.stat-n em { font-style: italic; font-weight: 400; color: var(--accent); }
.stat-k {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted);
}

/* ── Les domaines, en lignes numérotées ───────────────────────────────
   À gauche le numéro et le domaine, à droite ce qu'il recouvre et les
   actes eux-mêmes. Une liste de pastilles se parcourt sans se lire :
   c'est ce qu'on veut d'un inventaire d'actes. */
.expertises { display: grid; gap: 0; margin-top: clamp(34px, 4vw, 48px); }
.expertise {
  display: grid;
  gap: 18px clamp(28px, 4vw, 56px);
  padding-block: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
}
.expertise:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .expertise { grid-template-columns: 300px 1fr; } }
.expertise-num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--accent-deep);
  margin-bottom: 12px;
}
.expertise-t {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.expertise-t em { font-style: italic; font-weight: 400; color: var(--accent); }
.expertise-d { color: var(--muted); max-width: 62ch; }
.expertise .pills { margin-top: 20px; }
.expertise .pills li {
  padding: 8px 15px;
  font-size: 13.5px;
  background: var(--white);
  color: var(--muted);
  white-space: normal;
}

/* ── Qualifications, en items barrés d'un filet ───────────────────────
   Un intitulé, une ligne d'explication, et un filet d'accent qui tient
   la colonne : les titres se distinguent des paragraphes autour. */
.creds { display: grid; gap: clamp(16px, 2vw, 22px); margin-top: clamp(26px, 3vw, 34px); }
@media (min-width: 720px) { .creds { grid-template-columns: 1fr 1fr; } }
.cred { padding-left: 16px; border-left: 2px solid var(--accent); }
.cred-k {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cred-d { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ── Pastille posée sur le portrait du praticien ──────────────────────
   L'ancienneté se lit sur la photo, là où l'œil est déjà. */
.praticien-photo { position: relative; }
.photo-badge {
  position: absolute;
  right: clamp(-14px, -1.4vw, -8px);
  bottom: clamp(18px, 3vw, 30px);
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--bone);
  border: 1px solid var(--line);
  box-shadow: 0 22px 46px -26px rgba(42, 31, 23, .6);
  text-align: center;
}
.photo-badge .stat-n { font-size: clamp(23px, 2.6vw, 30px); }
.photo-badge .stat-k { margin-top: 5px; }
@media (max-width: 560px) {
  .photo-badge { right: 10px; bottom: 10px; padding: 11px 15px; }
}

/* ── Pas de défilement latéral, jamais ────────────────────────────────
   Les apparitions latérales (rv-left, rv-right) décalent leur élément de
   36 px avant de le remettre en place. Sur un bloc pleine largeur et un
   écran de 375 px, ces 36 px dépassent du cadre et ouvrent un défilement
   horizontal parasite — sur toutes les pages, bien avant cette révision.

   « clip » plutôt que « hidden » : il coupe sans créer de conteneur de
   défilement, donc sans casser le défilement fluide des ancres ni le
   bouton flottant. Les navigateurs qui l'ignorent retombent sur hidden,
   déclaré juste avant. */
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── Les trois formules, montrées ensemble ────────────────────────────
   Trois cartes à parité, la plus demandée signalée. Marquer la voie la
   plus empruntée aide à choisir ; trois cartes strictement identiques
   obligent à comparer, ce qui coûte une décision de plus. */
.offres {
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
  margin-top: clamp(40px, 4.5vw, 56px);
  align-items: stretch;
}
@media (min-width: 900px) { .offres { grid-template-columns: repeat(3, 1fr); } }

.offre-card {
  position: relative;   /* ancre la pastille « le plus demandé » */
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.offre-card--feature {
  border: 1.5px solid var(--accent);
  background: var(--bone);
  box-shadow: 0 40px 80px -50px rgba(156, 82, 56, .62);
}
.offre-card-t {
  font-size: clamp(20px, 2.1vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.offre-card-dur { margin-top: 7px; font-size: 14px; color: var(--muted); }
.offre-card-d { margin-top: 15px; font-size: 15px; color: var(--muted); }
.offre-card .offre-list { margin-top: 20px; }
.offre-card .offre-list li { font-size: 14.5px; }

/* Le pied reste collé en bas : les trois boutons s'alignent, quelle que
   soit la longueur des listes au-dessus. */
.offre-card-foot {
  margin-top: auto;
  padding-top: 24px;
}
.offre-card-price {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: clamp(32px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.offre-card-price span { font-size: .55em; font-weight: 500; margin-left: 1px; }
.offre-card-note {
  margin-top: 9px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* La pastille de la carte mise en avant reprend celle des formules. */
.offre-card .card-badge { top: 0; }