/*
 * ============================================================
 * STYLE.CSS — ARTHROPOLE — V2 (Magazine Bento)
 * Cabinet de chirurgie orthopédique spécialisé · Bayonne
 * ============================================================
 *
 * RÔLE : CSS custom uniquement — complète Tailwind 4 Play CDN.
 *
 * DIRECTION ESTHÉTIQUE V2 — /ui-ux-pro-max :
 * Mix retenu : Bento Grid + Editorial Magazine + Bold Typography
 * Essence visuelle : un dossier médical premium imprimé en édition
 *                    limitée — densité magazine, autorité éditoriale,
 *                    contraste typographique fort entre titre serif
 *                    et corps sans-serif moderne.
 * Signature unique : hero plein écran avec photo médicale + overlay
 *                    vert profond + badge "Centre hyper-spécialisé"
 *                    flottant. Bento grid pour les spécialités. Bandeau
 *                    villes-cibles défilant. Praticiens en citation +
 *                    portrait circulaire éditorial.
 *
 * Charte : MÊME palette que la V1 (immuable car issue du logo client).
 *          MÊME typo display Comfortaa (règle F1 absolue).
 *          BODY : Manrope au lieu d'Inter (divergence axe 2).
 *          AJOUT : Cormorant Garamond serif pour --font-accent
 *                  (titres de section "magazine").
 * ============================================================
 */

/* ============================================================
 * 1. RESET & BASE
 * ============================================================ */

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

body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-primary); color: #fff; }

*:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; top: -100%; left: 0;
  background: var(--color-primary); color: #fff;
  padding: 14px 26px; z-index: 9999;
  font-weight: 700; text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { top: 0; }

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

main p { max-width: 65ch; }
.hero p, .cta-citation p, .card p, .praticien-quote p { max-width: none; }

/* ============================================================
 * 2. TYPOGRAPHIE — Magazine éditorial
 * ============================================================ */

h1, h2, h3 {
  font-family: var(--font-accent);
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
  /* Distribue les lignes harmonieusement, évite les veuves
     et limite naturellement la longueur des lignes */
  text-wrap: balance;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.018em;
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 18px;
}
.surtitre::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-primary);
}

.text-highlight {
  color: var(--color-primary);
}

.eyebrow-light { color: rgba(255, 255, 255, 0.85); }
.eyebrow-light::before { background: rgba(255, 255, 255, 0.85); }

/* Mise en valeur éditoriale : couleur + héritage du style parent
   (pas de mélange italique/régulier dans une même phrase) */
em.editorial {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: var(--color-primary-dark);
}

/* ============================================================
 * 3. NAVIGATION — Fallback responsive obligatoire (H2.4)
 * ============================================================ */

.site-header {
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Nav full-width : logo à gauche, bouton à droite, onglets étalés au centre */
.site-header > nav {
  max-width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
  min-height: 104px;
}
@media (max-width: 768px) {
  .site-header > nav {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 86px;
  }
}
.site-header.scrolled {
  background: rgba(250, 250, 248, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(70, 69, 69, 0.08);
  box-shadow: 0 4px 24px rgba(70, 69, 69, 0.05);
}

.nav-logo img {
  height: 72px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s ease;
}
.nav-logo:hover img { opacity: 0.85; }
@media (max-width: 768px) {
  .nav-logo img { height: 54px; }
}

/* Renfort anti double-menu — gagne sur Tailwind */
.nav-links-desktop { display: none; list-style: none; padding: 0; margin: 0; }
.nav-cta-desktop   { display: none; }
.burger            { display: inline-flex; }

@media (min-width: 1024px) {
  .nav-links-desktop { display: flex; }
  .nav-cta-desktop   { display: inline-flex; }
  .burger            { display: none; }
}

/* Onglets V2 : style EDITORIAL — typo serif italic au hover, espacement très large */
.nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  transition: color 0.25s ease, font-style 0.25s ease;
}
.nav-link:hover {
  color: var(--color-primary);
}

/* Indicateur actif : uniquement la couleur primary (pas d'ornement) */
.nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
 * MEGA MENU — Trigger button + panneau desktop full-width
 * ============================================================ */

.has-megamenu { position: relative; }

.nav-link-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  transition: color 0.25s ease;
}
.nav-link-trigger:hover,
.nav-link-trigger[aria-expanded="true"] {
  color: var(--color-primary);
}
.nav-chevron {
  width: 10px;
  height: 7px;
  transition: transform 0.3s ease;
}
.nav-link-trigger[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

.megamenu {
  position: fixed;
  top: calc(var(--nav-height) + 26px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid rgba(70, 69, 69, 0.08);
  box-shadow: 0 24px 60px rgba(70, 69, 69, 0.18);
  z-index: 60;
  animation: megamenuIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.megamenu[hidden] { display: none; }

@keyframes megamenuIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .megamenu { animation: none; }
}

.megamenu .container {
  padding: 48px 28px;
}
.megamenu__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

/* Colonne intro (à gauche) */
.megamenu__intro {
  padding-right: clamp(16px, 2vw, 32px);
  border-right: 1px solid rgba(70, 69, 69, 0.1);
}
.megamenu__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.megamenu__title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.12;
  color: var(--color-ink);
  margin: 0 0 12px;
  letter-spacing: -0.012em;
}
.megamenu__lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--color-ink-soft);
  line-height: 1.5;
  margin: 0 0 22px;
  max-width: 30ch;
}
.megamenu__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.megamenu__cta:hover {
  gap: 14px;
  color: var(--color-primary);
}

/* Liste des sous-pages (à droite) */
.megamenu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.megamenu__list--2cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px clamp(8px, 1vw, 20px);
}

.megamenu__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.22s ease;
}
.megamenu__item:hover,
.megamenu__item:focus-visible {
  background: var(--color-primary-light);
  outline: none;
}
.megamenu__item-num {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-primary);
  line-height: 1;
  flex: 0 0 28px;
  text-align: center;
}
.megamenu__item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.megamenu__item-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink);
  line-height: 1.3;
}
.megamenu__item-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink-muted);
  line-height: 1.35;
}
.megamenu__item-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.megamenu__item:hover .megamenu__item-arrow,
.megamenu__item:focus-visible .megamenu__item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive : sur tablette < 900px, intro au-dessus de la liste */
@media (max-width: 900px) {
  .megamenu__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .megamenu__intro {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(70, 69, 69, 0.1);
    padding-bottom: 24px;
  }
  .megamenu__list--2cols { grid-template-columns: 1fr; }
}

/* Cache les mega menus sur mobile (le menu burger les remplace via accordéon inline) */
@media (max-width: 1023px) {
  .megamenu { display: none !important; }
}

/* ============================================================
 * MOBILE MENU — sous-onglets indentés
 * ============================================================ */

.mobile-menu__group {
  margin-bottom: 4px;
}
.mobile-menu__parent {
  font-weight: 600 !important;
  color: var(--color-primary-dark) !important;
}
.mobile-menu__sub {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--color-primary-light);
  margin-left: 24px;
}
.mobile-menu__sub a {
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--color-ink-soft) !important;
}
.mobile-menu__sub a:hover,
.mobile-menu__sub a:focus-visible {
  color: var(--color-primary-dark) !important;
  background: var(--color-primary-light) !important;
}

/* CTA principal nav — bouton Doctolib (logo + label) charte officielle */
.nav-cta-desktop {
  align-items: center;
  gap: 8px;
  background: #1D78C6;        /* Bleu Doctolib officiel (pixel-perfect) */
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: 0 4px 14px rgba(29, 120, 198, 0.28);
}
.nav-cta-desktop:hover {
  background: #155E9F;        /* Bleu Doctolib hover plus sombre */
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(29, 120, 198, 0.42);
}
.nav-cta-doctolib__label {
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-cta-doctolib__logo {
  height: 18px;
  width: auto;
  display: block;
  /* Logo Doctolib est bleu, on l'inverse en blanc pour le rendre lisible sur fond bleu */
  filter: brightness(0) invert(1);
}

/* Burger */
.burger {
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(70, 69, 69, 0.18);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.burger:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.burger-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.burger-lines span {
  display: block;
  width: 20px; height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: all 0.25s ease;
}
.burger[aria-expanded="true"] .burger-lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile */
.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-surface);
  padding: 100px 28px 40px;
  overflow-y: auto; z-index: 40;
  display: none;
}
.mobile-menu.open, .mobile-menu.open[hidden] { display: block; }
.mobile-menu[hidden]:not(.open) { display: none; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  display: block; padding: 16px 20px;
  font-family: var(--font-accent);
  font-weight: 500; font-size: 22px;
  color: var(--color-ink); text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.mobile-menu .mobile-cta {
  margin-top: 22px;
  background: var(--color-ink);
  color: #fff !important;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  font-style: normal;
  border-radius: 999px;
}
.mobile-menu .mobile-cta:hover {
  background: var(--color-primary);
  color: #fff !important;
}

/* ============================================================
 * 4. HIÉRARCHIE BOUTONS — 3 NIVEAUX (H3.5)
 * ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 17px 32px;
  border-radius: 999px;            /* PILL différent V1 */
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 6px 18px rgba(93, 177, 52, 0.22);
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(93, 177, 52, 0.34);
}
.btn-primary .icon { width: 18px; height: 18px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 17px 32px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-secondary:hover {
  background: var(--color-ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 42, 42, 0.2);
}
.btn-secondary .icon { width: 18px; height: 18px; }

/* Variante sur photo (hero) — fond surface semi-transparent */
.btn-secondary.on-photo {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: #fff;
  color: var(--color-ink);
}
.btn-secondary.on-photo:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Bouton sur fond vert (CTA band si besoin) */
.btn-on-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 17px 32px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  border: 2px solid #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-on-primary:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-2px);
}

/* Bouton Doctolib (CTA hero / sections) — charte officielle bleue */
.btn-doctolib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 999px;
  background: #1D78C6;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #1D78C6;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 6px 18px rgba(29, 120, 198, 0.32);
  letter-spacing: 0.005em;
}
.btn-doctolib:hover {
  background: #155E9F;
  border-color: #155E9F;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(29, 120, 198, 0.45);
}
.btn-doctolib__label {
  white-space: nowrap;
}
.btn-doctolib__logo {
  height: 22px;
  width: auto;
  display: block;
  /* Logo Doctolib bleu d'origine → rendu blanc sur fond bleu */
  filter: brightness(0) invert(1);
}

/* Lien inline éditorial */
.link-inline {
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: all 0.2s ease;
}
.link-inline:hover {
  color: var(--color-primary);
}
.link-inline.arrow::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}
.link-inline.arrow:hover::after {
  transform: translateX(3px);
}

/* ============================================================
 * 5. HERO V2 — Full-bleed photo + overlay + badge (HERO-07)
 * ============================================================ */

:root {
  /* Hauteur réelle nav = padding-top (16px) + logo (72px) + padding-bottom (16px) = 104px desktop */
  --nav-height: 104px;
}
@media (max-width: 768px) {
  /* Mobile = padding (16+16) + logo (54px) = 86px */
  --nav-height: 86px;
}

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  background: var(--color-ink);
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(74, 143, 42, 0.18) 0%, rgba(42, 42, 42, 0.45) 50%, rgba(42, 42, 42, 0.88) 100%),
    linear-gradient(115deg, rgba(74, 143, 42, 0.55) 0%, rgba(74, 143, 42, 0.15) 60%, transparent 100%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 8vw, 110px) 0 clamp(60px, 8vw, 100px);
  width: 100%;
}

.hero-title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: none;
  margin-bottom: 28px;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
/* Sur mobile : laisser le wrap naturel pour ne pas déborder */
@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(34px, 8.5vw, 44px);
  }
  .hero-title span {
    white-space: normal;
  }
}
.hero-title em.editorial {
  color: #C8F1A1;
}
.hero-lead {
  font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 36px;
}

/* USP (Unique Selling Points) du hero — 3 chips glassmorphism distinctifs */
.hero-usp {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
}
.hero-usp__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid #C8F1A1;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  transition: all 0.25s ease;
}
.hero-usp__item:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.22);
  border-left-color: #fff;
  transform: translateX(4px);
}
.hero-usp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: rgba(200, 241, 161, 0.18);
  border-radius: 50%;
  color: #C8F1A1;
  transition: all 0.25s ease;
}
.hero-usp__item:hover .hero-usp__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.hero-usp__icon svg {
  width: 20px;
  height: 20px;
}
.hero-usp__text {
  flex: 1;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}
.hero-usp__text strong {
  font-family: inherit;
  font-style: inherit;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
}

/* Chip 3 cliquable (Doctolib) — visuellement plus marqué */
.hero-usp__item--cta {
  padding: 0;
  background: rgba(93, 177, 52, 0.22);
  border-color: rgba(200, 241, 161, 0.4);
  border-left-color: var(--color-primary);
  cursor: pointer;
}
.hero-usp__item--cta a {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 22px 12px 14px;
  color: inherit;
  text-decoration: none;
}
.hero-usp__item--cta:hover {
  background: rgba(93, 177, 52, 0.35);
  border-color: var(--color-primary);
  border-left-color: #fff;
}
.hero-usp__item--cta .hero-usp__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.hero-usp__item--cta:hover .hero-usp__icon {
  background: #fff;
  color: var(--color-primary-dark);
}
.hero-usp__arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #fff;
  opacity: 0.7;
  transition: all 0.25s ease;
}
.hero-usp__item--cta:hover .hero-usp__arrow {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .hero-usp__item {
    padding: 10px 18px 10px 12px;
    font-size: 13.5px;
  }
  .hero-usp__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  .hero-usp__icon svg { width: 18px; height: 18px; }
  .hero-usp__text strong { font-size: 1.12em; }
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 0;
}

/* Badge "Centre hyper-spécialisé" — flottant en haut à droite */
.hero-badge {
  position: absolute;
  top: clamp(120px, 16vh, 180px);
  right: clamp(20px, 4vw, 60px);
  z-index: 3;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 22px;
  border-radius: 16px;
  max-width: 260px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.18);
  border-left: 4px solid var(--color-primary);
}
.hero-badge__label {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.hero-badge__text {
  font-family: var(--font-accent);
  font-size: 17px;
  color: var(--color-ink);
  line-height: 1.3;
  margin: 0;
  font-style: italic;
}

@media (max-width: 768px) {
  .hero-badge {
    position: static;
    margin: 0 0 24px;
    max-width: none;
  }
}

/* ============================================================
 * 6. SECTIONS génériques
 * ============================================================ */

.section {
  padding: clamp(72px, 9vw, 130px) 0;
  position: relative;
}
.section-tight {
  padding: clamp(48px, 6vw, 80px) 0;
}

.section-alt {
  background: var(--color-surface-alt);
}

.section-title {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  margin-bottom: 22px;
  font-family: var(--font-accent);
  font-weight: 500;
  text-wrap: balance;
  max-width: 28ch;
}
.section-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--color-ink-soft);
  line-height: 1.7;
  max-width: 62ch;
  font-family: var(--font-body);
}

/* ============================================================
 * 7. BLOC 01 — PRÉSENTATION (composition éditoriale 2 colonnes sobre)
 *    Fond surface-alt (vert très pâle), sans pull-quote ni ornements
 * ============================================================ */

.presentation-editorial {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--color-surface-alt);
  overflow: hidden;
}
.presentation-editorial::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93,177,52,0.10) 0%, transparent 70%);
  top: -120px;
  right: -160px;
  pointer-events: none;
}
.presentation-editorial::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93,177,52,0.06) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
  pointer-events: none;
}
.presentation-editorial > .container { position: relative; z-index: 1; }

.pe-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) {
  .pe-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.pe-aside { position: sticky; top: clamp(100px, 14vh, 140px); align-self: start; }
.pe-body  { max-width: 60ch; }

@media (max-width: 900px) {
  .pe-aside { position: static; }
}

.pe-aside .section-title {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  margin-bottom: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.pe-aside .section-title em.editorial { color: var(--color-primary); }

.pe-body p {
  font-size: 16.5px;
  color: var(--color-ink-soft);
  line-height: 1.72;
  margin: 0 0 20px;
  max-width: 60ch;
}
.pe-body p strong {
  color: var(--color-ink);
  font-weight: 600;
}
.pe-body .link-inline {
  margin-top: 8px;
  display: inline-block;
}

/* ============================================================
 * 8. BLOC 02 — PRATICIENS (Citation + portrait circulaire, TEMOIGNAGE-04)
 * ============================================================ */

.praticiens-wrap {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}

/* ============================================================
 * Card praticien — Fiche médicale éditoriale enrichie
 * Layout : photo 4:5 + body éditorial structuré
 * ============================================================ */

.praticien-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.4fr;
  gap: clamp(28px, 4vw, 56px);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(70, 69, 69, 0.08);
  box-shadow: 0 4px 20px rgba(70, 69, 69, 0.05);
  align-items: center;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.praticien-card:hover {
  border-color: rgba(93, 177, 52, 0.3);
  box-shadow: 0 18px 40px rgba(70, 69, 69, 0.10);
  transform: translateY(-3px);
}
.praticien-card.reversed {
  grid-template-columns: 1.4fr minmax(280px, 0.85fr);
}
.praticien-card.reversed .praticien-card__media { order: 2; }
.praticien-card.reversed .praticien-card__body { order: 1; }

@media (max-width: 900px) {
  .praticien-card,
  .praticien-card.reversed {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .praticien-card.reversed .praticien-card__media,
  .praticien-card.reversed .praticien-card__body { order: initial; }
}

/* Photo portrait 4:5 cohérente avec le langage du site */
.praticien-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(70, 69, 69, 0.15);
}
.praticien-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.praticien-card:hover .praticien-card__media img {
  transform: scale(1.03);
}

/* Body : structure éditoriale verticale */
.praticien-card__body {
  display: flex;
  flex-direction: column;
}

/* Head : cartouche N° + badge spécialité */
.praticien-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.praticien-card__number {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 17px;
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
  padding-right: 14px;
  border-right: 1px solid rgba(70, 69, 69, 0.18);
}
.praticien-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.praticien-card__badge svg {
  width: 14px;
  height: 14px;
}

/* Nom XL en 2 lignes (prénom + nom de famille) */
.praticien-card__name {
  font-family: var(--font-accent);
  font-weight: 500;
  font-style: normal;
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
}
/* Lastname = ligne principale en GRAND et GRAS (Dr. + nom de famille) */
.praticien-card__lastname {
  display: block;
  color: var(--color-ink);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Firstname = ligne secondaire fine et plus petite (prénom seul, en sous-titre) */
.praticien-card__firstname {
  display: block;
  color: var(--color-ink-soft);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  margin-top: 4px;
  letter-spacing: 0.005em;
}

/* Divider décoratif vert */
.praticien-card__divider {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 18px 0 22px;
}

/* Bio : paragraphe descriptif mot pour mot du .md */
.praticien-card__bio {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-ink-soft);
  margin: 0 0 26px;
  max-width: 50ch;
}
.praticien-card__bio strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* Bloc Expertise : 4 chips de mots-clés extraits du .md */
.praticien-card__expertise {
  margin-bottom: 28px;
}
.praticien-card__expertise-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 12px;
}
.praticien-card__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.praticien-card__chips li {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--color-surface-alt);
  border: 1px solid rgba(93, 177, 52, 0.22);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  transition: all 0.22s ease;
  cursor: default;
}
.praticien-card__chips li:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* Mini-CTA "Découvrir son parcours" */
.praticien-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.22s ease, color 0.22s ease;
}
.praticien-card__cta:hover {
  gap: 14px;
  color: var(--color-primary);
}
.praticien-card__cta svg {
  transition: transform 0.22s ease;
}
.praticien-card__cta:hover svg {
  transform: translateX(2px);
}
.praticien-quote {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.praticien-quote.reversed {
  grid-template-columns: 1fr 1.4fr;
}
.praticien-quote.reversed .praticien-quote__media { order: 2; }
.praticien-quote.reversed .praticien-quote__body { order: 1; }
@media (max-width: 900px) {
  .praticien-quote,
  .praticien-quote.reversed {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .praticien-quote.reversed .praticien-quote__media,
  .praticien-quote.reversed .praticien-quote__body { order: initial; }
}

/* Portrait éditorial format 4:5, radius-card, cohérent avec le langage rectangulaire du site */
.praticien-quote__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 400px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(70, 69, 69, 0.18);
}
.praticien-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}
.praticien-quote__media:hover img { transform: scale(1.04); }
/* Cadre rectangulaire vert subtil décalé en arrière-plan (signature éditoriale)
   Cohérent avec le radius-card du langage bento du site */
.praticien-quote__media::before {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-card);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
.praticien-quote { position: relative; }
.praticien-quote.reversed .praticien-quote__media::before {
  inset: 14px 14px -14px -14px;
}

.praticien-quote__body .label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
  display: block;
}
.praticien-quote__name {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  margin-bottom: 22px;
  letter-spacing: -0.012em;
}
.praticien-quote__name em { color: var(--color-primary); font-style: inherit; }
/* Nom du praticien — typo accent (élégante, cohérente avec les H2/H3 du site) */
.praticien-name {
  font-family: var(--font-accent);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.08;
  color: var(--color-ink);
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.praticien-quote__body p {
  font-size: 17px;
  color: var(--color-ink-soft);
  line-height: 1.65;
  max-width: 50ch;
  margin: 0;
}

/* ============================================================
 * 9. BLOC 03 — SPÉCIALITÉS (BENTO GRID asymétrique)
 * ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 18px;
}
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
}

.bento-cell {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}
.bento-cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* Hanche — grande cellule à gauche, vert clair (50% de largeur) */
.bento-hip {
  grid-column: span 3;
  grid-row: span 2;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #DCEACA 100%);
  min-height: 420px;
}
@media (max-width: 1024px) { .bento-hip { grid-column: span 2; grid-row: span 1; min-height: 360px;} }
@media (max-width: 640px)  { .bento-hip { grid-column: span 1; } }

/* Genou — grande à droite (palette ivoire + bordure verte signature, cohérent avec hanche)
   Plus de fond gris anthracite — palette unifiée verte/ivoire */
.bento-knee {
  grid-column: span 3;
  grid-row: span 2;
  background: linear-gradient(135deg, var(--color-surface) 0%, #E8F4DE 100%);
  border: 1px solid rgba(93, 177, 52, 0.25);
  min-height: 420px;
}
@media (max-width: 1024px) { .bento-knee { grid-column: span 2; grid-row: span 1;} }
@media (max-width: 640px)  { .bento-knee { grid-column: span 1; } }

/* Bento cell — header pattern */
.bento-cell__header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bento-cell__icon {
  width: 100px; height: 100px;
  flex: 0 0 100px;
}
.bento-cell__title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.bento-cell--dark .bento-cell__title { color: #fff; }

.bento-cell__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.bento-cell--dark .bento-cell__body { color: rgba(255,255,255,0.85); }

.bento-cell ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.bento-cell ul li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.5;
}
.bento-cell ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}
.bento-cell ul li strong { color: var(--color-primary-dark); }
.bento-cell--dark ul li strong { color: #C8F1A1; }

.bento-cell .link-inline {
  margin-top: 18px;
  align-self: flex-start;
}
.bento-cell--dark .link-inline {
  color: #C8F1A1;
}
.bento-cell--dark .link-inline:hover {
  color: #fff;
}

/* ============================================================
 * 10. BLOC 04 — PARCOURS en liste à puces (format .md strict)
 *     Titre en strong inline + texte sur la même ligne
 * ============================================================ */

/* Notre approche : 2 colonnes pour les 2 paragraphes en regard */
.approche-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-top: 8px;
}
@media (max-width: 900px) {
  .approche-cols { grid-template-columns: 1fr; gap: 20px; }
}
.approche-cols .section-lead {
  max-width: none;
}

.parcours-intro {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--color-ink);
  margin: 0 0 36px;
}

/* Grille 3 cards verticales avec photo dominante par étape */
.parcours-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 1024px) {
  .parcours-steps { grid-template-columns: 1fr; gap: 28px; max-width: 640px; margin: 0 auto; }
}

/* État par défaut = ancien état "hover" (bord vert + ombre forte) */
.parcours-step {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(93, 177, 52, 0.3);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-hover);
}
/* Effet au survol neutralisé — les vignettes restent stables */

/* Zone média : photo + numéro XXL en overlay */
.parcours-step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.parcours-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.parcours-step__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(42, 42, 42, 0.04) 0%,
    rgba(42, 42, 42, 0.20) 60%,
    rgba(42, 42, 42, 0.50) 100%
  );
  pointer-events: none;
}

/* Libellé "Étape 01/02/03" discret en uppercase au-dessus du titre, dans le body */
.parcours-step__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.parcours-step__step::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-primary);
}

/* Corps de la card avec le texte */
.parcours-step__body {
  padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px) clamp(28px, 3vw, 38px);
  flex: 1;
}
.parcours-step__body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink-soft);
  margin: 0;
  max-width: none;
}
/* Titre en typo élégante des titres (Cormorant Garamond régulier, cohérent avec section-title et hero) */
.parcours-step__body p strong:first-child {
  display: block;
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px);
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
}
/* Cache le " : " séparateur après le strong-titre quand celui-ci passe en block
   (le " : " reste dans le DOM pour le SEO/accessibilité — texte intact) */
.sr-only-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Autres strong dans le texte (ex : Clinique Aguiléra de Biarritz) */
.parcours-step__body p strong:not(:first-child) {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: inherit;
  display: inline;
}

/* ============================================================
 * 11. BLOC 05 — LOCALISATION (carte qui déborde, BLOC-10)
 * ============================================================ */

.localisation-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
@media (max-width: 900px) {
  .localisation-grid { grid-template-columns: 1fr; }
}

.map-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(70,69,69,0.12);
  min-height: 480px;
}
.map-container {
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: var(--color-surface-alt);
}
@media (max-width: 768px) {
  .map-frame, .map-container { min-height: 360px; }
}
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
}
.leaflet-popup-content {
  margin: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
}
.leaflet-popup-content strong {
  font-family: var(--font-accent);
  color: var(--color-primary-dark);
  font-size: 17px;
}

.info-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-tile {
  background: var(--color-surface);
  border: 1px solid rgba(70,69,69,0.08);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: all 0.25s ease;
}
.info-tile:hover {
  border-color: rgba(93, 177, 52, 0.4);
  transform: translateX(4px);
}
.info-tile .icon {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  color: var(--color-primary);
  margin-top: 4px;
}
.info-tile__value {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--color-ink);
  line-height: 1.55;
  margin: 0;
  max-width: none;
}
.info-tile__value strong {
  color: var(--color-ink);
  font-weight: 700;
}
.info-tile__value a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  transition: color 0.2s ease;
}
.info-tile__value a:hover { color: var(--color-primary-dark); }

/* ============================================================
 * 12. BLOC 06 — CITATION AVIS GOOGLE (pleine largeur sobre)
 * ============================================================ */

.cta-citation {
  position: relative;
  padding: clamp(80px, 11vw, 150px) 24px;
  background: var(--color-surface-alt);
  text-align: center;
  overflow: hidden;
}
.cta-citation::before {
  content: '"';
  position: absolute;
  font-family: var(--font-accent);
  font-size: clamp(180px, 24vw, 320px);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.14;
  font-weight: 600;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.cta-citation .container { position: relative; z-index: 1; }
.cta-citation h2 {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.18;
  color: var(--color-ink);
  letter-spacing: -0.012em;
  max-width: 22ch;
  margin: 18px auto 28px;
}
.cta-citation h2 em.editorial { color: var(--color-primary); }
.cta-citation p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--color-ink-soft);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 36px;
}
.cta-citation .ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.cta-citation .or-mail {
  margin-top: 28px;
  font-size: 14.5px;
  color: var(--color-ink-soft);
}
.cta-citation .or-mail a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
 * 13. BLOC 07 — CTA Prendre RDV (full-bleed photo + overlay, hero-like)
 * ============================================================ */

.cta-band {
  position: relative;
  padding: 0;
  background: var(--color-ink);
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* Photo de fond */
.cta-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 40%;
}
/* Overlay vert / sombre (même esprit que le hero) */
.cta-band-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(74, 143, 42, 0.30) 0%, rgba(42, 42, 42, 0.55) 45%, rgba(42, 42, 42, 0.85) 100%),
    linear-gradient(115deg, rgba(74, 143, 42, 0.50) 0%, rgba(74, 143, 42, 0.15) 60%, transparent 100%);
}
.cta-band-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
/* Couche contenu */
.cta-band-content {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 11vw, 150px) 24px;
  width: 100%;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 em.editorial {
  color: #C8F1A1;
}

.cta-band h2 {
  color: #fff;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  max-width: 32ch;
  margin: 14px auto 22px;
  text-wrap: balance;
}

.cta-band .container > p {
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto 36px;
  text-align: center;
}

/* Boutons CTA cards horizontaux — conversion forte avec icône + titre + sous-texte + flèche */
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 0 auto 30px;
  max-width: 820px;
}
.cta-action {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px 20px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 280px;
}
.cta-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.cta-action__icon svg {
  width: 24px;
  height: 24px;
}
.cta-action__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cta-action__title {
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.cta-action__sub {
  font-size: 13.5px;
  opacity: 0.85;
  line-height: 1.3;
}
.cta-action__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-action__arrow svg {
  width: 22px;
  height: 22px;
}
.cta-action:hover .cta-action__arrow {
  transform: translateX(6px);
}

/* CTA primaire — fond blanc plein, texte vert sombre (claque sur photo) */
.cta-action--primary {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.cta-action--primary .cta-action__icon {
  background: var(--color-primary);
  color: #fff;
}
.cta-action--primary:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.cta-action--primary:hover .cta-action__icon {
  background: #fff;
  color: var(--color-primary-dark);
}

/* Variante Doctolib — bouton fond blanc, charte bleue Doctolib (icône + textes + logo) */
.cta-action--doctolib {
  color: #1D78C6;
}
.cta-action--doctolib .cta-action__icon {
  background: #1D78C6;
  color: #fff;
}
.cta-action--doctolib .cta-action__title,
.cta-action--doctolib .cta-action__sub {
  color: #1D78C6;
}
.cta-action--doctolib .cta-action__arrow {
  color: #1D78C6;
}
.cta-action--doctolib .cta-action__sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cta-action__doctolib-logo {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  /* Logo Doctolib reste bleu d'origine (déjà couleur Doctolib) */
}
/* Hover : passe au bleu plein avec accents blancs */
.cta-action--doctolib:hover {
  background: #1D78C6;
  color: #fff;
  border-color: #1D78C6;
}
.cta-action--doctolib:hover .cta-action__icon {
  background: #fff;
  color: #1D78C6;
}
.cta-action--doctolib:hover .cta-action__title,
.cta-action--doctolib:hover .cta-action__sub,
.cta-action--doctolib:hover .cta-action__arrow {
  color: #fff;
}
.cta-action--doctolib:hover .cta-action__doctolib-logo {
  /* Logo passe en blanc sur fond bleu hover */
  filter: brightness(0) invert(1);
}

/* CTA secondaire — glassmorphism blanc transparent + bordure */
.cta-action--secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta-action--secondary .cta-action__icon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.cta-action--secondary:hover {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.cta-action--secondary:hover .cta-action__icon {
  background: var(--color-primary);
  color: #fff;
}

/* Phrase footer centrée sous les boutons */
.cta-band-foot {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-align: center;
}
.cta-band-foot a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.cta-band-foot a:hover { color: #C8F1A1; }

@media (max-width: 640px) {
  .cta-band-actions { flex-direction: column; align-items: stretch; }
  .cta-action { min-width: 0; width: 100%; }
}

/* ============================================================
 * 14. BLOC 08 — FAQ ACCORDÉON 2 COLONNES
 * ============================================================ */

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
}

.faq-aside h2 {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: -0.012em;
}
.faq-aside h2 em.editorial { color: var(--color-primary); }
.faq-aside p {
  color: var(--color-ink-soft);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 36ch;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid rgba(70, 69, 69, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
}
.faq-item:hover { border-color: rgba(93, 177, 52, 0.35); }
.faq-item:has(.faq-question[aria-expanded="true"]) {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 18.5px;
  color: var(--color-ink);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  letter-spacing: -0.008em;
  transition: color 0.2s ease;
  line-height: 1.3;
}
.faq-question:hover { color: var(--color-primary-dark); }
.faq-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-style: normal;
  transition: all 0.3s ease;
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  background: var(--color-primary);
  color: #fff;
}
.faq-answer {
  padding: 0 26px 22px;
  color: var(--color-ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
  font-family: var(--font-body);
}
.faq-answer p { margin: 0; max-width: none; }

/* ============================================================
 * 15. FOOTER V2 — Magazine éditorial
 * ============================================================ */

.site-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.85);
  padding: 90px 0 36px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
@media (max-width: 1024px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

.footer-logo {
  display: inline-block;
  margin-bottom: 20px;
  background: rgba(255,255,255,0.96);
  padding: 14px 18px;
  border-radius: 12px;
}
.footer-logo img {
  display: block;
  height: 50px;
  width: auto;
  object-fit: contain;
  max-width: 100%;
}
@media (max-width: 768px) {
  .footer-logo img { height: 40px; }
}

.footer-tagline {
  color: rgba(255,255,255,0.78);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  max-width: 36ch;
  margin: 0;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 22px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col li a,
.footer-col .footer-item {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  transition: color 0.2s ease;
  line-height: 1.55;
}
.footer-col li a:hover {
  color: var(--color-accent);
}
.footer-col .icon {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  color: var(--color-accent);
  margin-top: 2px;
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-copy {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
  font-family: var(--font-body);
}
.footer-mentions a {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: color 0.2s ease, border-color 0.2s ease;
  font-family: var(--font-body);
}
.footer-mentions a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.readyup-credit {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-body);
}
.readyup-credit a { color: inherit; text-decoration: underline; }
.readyup-credit a:hover { color: var(--color-accent); }

/* ============================================================
 * 16. ANIMATIONS — Progressive Enhancement
 * ============================================================ */

.animate-on-scroll { opacity: 1; transform: none; }

html.js-scroll-anim .animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-scroll-anim .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-on-scroll { opacity: 1; transform: none; }
}

/* ============================================================
 * PAGES INTERNES — Hero court avec breadcrumb + photo de fond
 * ============================================================ */

.page-hero {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  background: var(--color-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 35%;
}
.page-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(74,143,42,0.25) 0%, rgba(42,42,42,0.65) 50%, rgba(42,42,42,0.92) 100%),
    linear-gradient(115deg, rgba(74,143,42,0.45) 0%, rgba(74,143,42,0.12) 60%, transparent 100%);
}
.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: 28px;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: rgba(255,255,255,0.4);
  font-weight: 300;
}
.breadcrumb a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb a:hover { color: #C8F1A1; }
.breadcrumb li[aria-current="page"] {
  color: #fff;
  font-weight: 600;
}

.page-hero-title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 24ch;
  margin: 12px 0 0;
  text-wrap: balance;
}

/* ============================================================
 * PAGES INTERNES — Listes & H3 dans le contenu
 * ============================================================ */

.page-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-list li {
  position: relative;
  padding: 16px 20px 16px 56px;
  background: var(--color-surface);
  border: 1px solid rgba(70, 69, 69, 0.08);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  transition: all 0.22s ease;
}
.page-list li:hover {
  border-color: rgba(93, 177, 52, 0.3);
  border-left-color: var(--color-primary-dark);
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
}
.page-list li::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 22px;
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 4px;
  transform: rotate(45deg);
}
.page-list li strong {
  color: var(--color-ink);
  font-weight: 700;
}

.page-h3 {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.18;
  color: var(--color-ink);
  letter-spacing: -0.012em;
  margin: 36px 0 14px;
  text-wrap: balance;
}

/* Sections internes — taille modulée pour les pages internes */
.section .max-w-4xl p.section-lead {
  max-width: 70ch;
}

/* ============================================================
 * PAGES INTERNES — COMPOSANTS ÉDITORIAUX SUR-MESURE
 * ============================================================ */

/* En-tête de section avec surtitre + H2 + (optionnel) intro centrée */
.page-section-head {
  max-width: 880px;
  margin: 0 auto 56px;
  text-align: center;
}
.page-section-head.left {
  margin-left: 0;
  text-align: left;
}
.page-section-head .surtitre {
  justify-content: center;
}
.page-section-head.left .surtitre {
  justify-content: flex-start;
}
.page-section-head p.lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--color-ink-soft);
  line-height: 1.7;
  margin: 18px auto 0;
  max-width: 60ch;
}

/* ============================================================
 * Anatomy card : SVG anatomique + légende
 * ============================================================ */
.anatomy-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: linear-gradient(135deg, var(--color-surface) 0%, #F5F8F0 100%);
  border: 1px solid rgba(70, 69, 69, 0.08);
  border-radius: var(--radius-card);
  padding: clamp(32px, 4vw, 56px);
}
@media (max-width: 900px) {
  .anatomy-card { grid-template-columns: 1fr; gap: 24px; }
}
.anatomy-card__visual {
  text-align: center;
}
.anatomy-card__visual svg,
.anatomy-card__visual img {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.anatomy-card__body h3 {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--color-ink);
  letter-spacing: -0.014em;
  margin: 0 0 16px;
}
.anatomy-card__body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0;
  max-width: none;
}
.anatomy-card__body strong { color: var(--color-ink); }

/* ============================================================
 * Causes grid : 4 cards en grille (causes pathologie)
 * ============================================================ */
.causes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 768px) { .causes-grid { grid-template-columns: 1fr; } }

.cause-card {
  background: var(--color-surface);
  border: 1px solid rgba(70, 69, 69, 0.08);
  border-left: 3px solid var(--color-primary);
  border-radius: 14px;
  padding: 24px 26px;
  transition: all 0.25s ease;
}
.cause-card:hover {
  border-color: rgba(93, 177, 52, 0.3);
  border-left-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.cause-card__title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 20px;
  color: var(--color-primary-dark);
  margin: 0 0 10px;
  letter-spacing: -0.008em;
}
.cause-card__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}
.cause-card__body strong { color: var(--color-ink); font-weight: 700; }
.cause-card__body a {
  color: var(--color-primary-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.cause-card__body a:hover { color: var(--color-primary); }

/* ============================================================
 * Symptômes list : liste enrichie avec icône alerte
 * ============================================================ */
.symptomes-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px) { .symptomes-list { grid-template-columns: 1fr; } }

.symptomes-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--color-surface-alt);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.symptomes-list li strong { color: var(--color-primary-dark); font-weight: 700; }
.symptomes-list__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.symptomes-list__icon svg { width: 14px; height: 14px; }

/* ============================================================
 * Split éditorial : image à gauche + texte à droite (BLOC 03 PTH)
 * ============================================================ */
.split-editorial {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split-editorial.reversed { grid-template-columns: 1.1fr 1fr; }
.split-editorial.reversed .split-editorial__media { order: 2; }
.split-editorial.reversed .split-editorial__body { order: 1; }
@media (max-width: 900px) {
  .split-editorial,
  .split-editorial.reversed { grid-template-columns: 1fr; gap: 28px; }
  .split-editorial.reversed .split-editorial__media,
  .split-editorial.reversed .split-editorial__body { order: initial; }
}
.split-editorial__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(70, 69, 69, 0.18);
}
.split-editorial__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.split-editorial__media::before {
  content: '';
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-card);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
.split-editorial { position: relative; }

/* ============================================================
 * Intervention steps : 3 cards des étapes de la PTH
 * ============================================================ */
.intervention-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 900px) { .intervention-steps { grid-template-columns: 1fr; } }

.step-card {
  background: var(--color-surface);
  border: 1px solid rgba(93, 177, 52, 0.25);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  position: relative;
  transition: all 0.25s ease;
}
.step-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.step-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step-card__icon svg { width: 22px; height: 22px; }
.step-card__title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-ink);
  margin: 0 0 8px;
  letter-spacing: -0.008em;
  line-height: 1.3;
}
.step-card__title strong { font-weight: 600; }
.step-card__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ============================================================
 * Result callout : pull-quote XL pour les résultats attendus
 * ============================================================ */
.result-callout {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 28px;
  background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-card);
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
.result-callout::before {
  content: '"';
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-accent);
  font-size: clamp(160px, 22vw, 280px);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.10;
  pointer-events: none;
}
.result-callout__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--color-ink);
  max-width: 22ch;
  margin: 0 auto 16px;
  text-wrap: balance;
}
.result-callout__text strong { color: var(--color-primary-dark); font-weight: 600; }
.result-callout__sub {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--color-ink-soft);
  margin: 14px auto 0;
  max-width: 56ch;
  position: relative;
  z-index: 1;
}
.result-callout__sub strong { color: var(--color-ink); font-weight: 700; }

/* ============================================================
 * Reprise activités grid : 4 catégories (marche, conduite, sports +, sports -)
 * ============================================================ */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 768px) { .activities-grid { grid-template-columns: 1fr; } }

.activity-card {
  background: var(--color-surface);
  border: 1px solid rgba(70, 69, 69, 0.08);
  border-radius: var(--radius-card);
  padding: 24px 26px;
}
.activity-card--ok { border-left: 3px solid var(--color-primary); }
.activity-card--ko { border-left: 3px solid #C44848; }

.activity-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.activity-card__icon {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}
.activity-card--ok .activity-card__icon { background: var(--color-primary-light); color: var(--color-primary-dark); }
.activity-card--ko .activity-card__icon { background: #FDEBEB; color: #B83838; }
.activity-card__icon svg { width: 18px; height: 18px; }

.activity-card__title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 19px;
  color: var(--color-ink);
  letter-spacing: -0.008em;
  margin: 0;
}
.activity-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}
.activity-card__body strong { color: var(--color-ink); font-weight: 700; }

/* ============================================================
 * Complications grid : 5 cards avec icône alerte (transparence pro)
 * ============================================================ */
.complications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.complication-card {
  background: var(--color-surface);
  border: 1px solid rgba(70, 69, 69, 0.1);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.25s ease;
}
.complication-card:hover {
  border-color: rgba(93, 177, 52, 0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.complication-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.complication-card__icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.complication-card__icon svg { width: 18px; height: 18px; }
.complication-card__title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 17px;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.complication-card__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: 0;
}
.complication-card__body strong { color: var(--color-ink); font-weight: 700; }

/* ============================================================
 * Page showcase : bande photo cinéma full-width (transition visuelle)
 * ============================================================ */
.page-showcase {
  position: relative;
  height: clamp(280px, 36vw, 460px);
  overflow: hidden;
  isolation: isolate;
}
.page-showcase__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}
.page-showcase__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(74,143,42,0.25) 0%, transparent 55%),
    linear-gradient(0deg, rgba(42,42,42,0.30) 0%, transparent 60%);
}
.page-showcase__caption {
  position: absolute;
  bottom: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  max-width: 740px;
  color: #fff;
  z-index: 1;
}
.page-showcase__caption .surtitre {
  color: #C8F1A1;
  margin-bottom: 8px;
}
.page-showcase__caption .surtitre::before { background: #C8F1A1; }
.page-showcase__caption p {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  max-width: 24ch;
}
.page-showcase__caption p em { color: #C8F1A1; font-style: normal; }

/* ============================================================
 * Bento page interne : mosaïque 3 photos (transition rythmée)
 * ============================================================ */
.page-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  height: clamp(360px, 44vw, 540px);
}
@media (max-width: 768px) {
  .page-bento {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 180px 180px;
    height: auto;
  }
}
.page-bento__cell {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.page-bento__cell--main {
  grid-row: span 2;
}
@media (max-width: 768px) { .page-bento__cell--main { grid-row: span 1; } }
.page-bento__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-bento__cell:hover img { transform: scale(1.04); }
.page-bento__cell-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(42,42,42,0.55) 100%);
  pointer-events: none;
}
.page-bento__cell-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 1;
}

/* ============================================================
 * Result split : pull-quote + photo côté (BLOC 04 résultats)
 * ============================================================ */
.result-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  margin-bottom: 56px;
}
@media (max-width: 900px) {
  .result-split { grid-template-columns: 1fr; }
  .result-split .result-callout { margin-bottom: 0; }
}
.result-split .result-callout { margin-bottom: 0; }
.result-split__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 320px;
  box-shadow: 0 20px 50px rgba(70, 69, 69, 0.18);
}
.result-split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.result-split__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74,143,42,0.10) 0%, transparent 50%);
}

/* ============================================================
 * Suivi timeline : 4 étapes verticales avec ligne verte
 * ============================================================ */
.suivi-timeline {
  position: relative;
  display: grid;
  gap: 28px;
  max-width: 880px;
  margin: 36px 0 0;
}
.suivi-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  opacity: 0.7;
}
@media (max-width: 640px) {
  .suivi-timeline::before { left: 20px; }
}

.suivi-step {
  position: relative;
  padding: 22px 28px 22px 80px;
  background: var(--color-surface);
  border: 1px solid rgba(70, 69, 69, 0.08);
  border-radius: var(--radius-card);
  transition: all 0.25s ease;
}
.suivi-step:hover {
  border-color: rgba(93, 177, 52, 0.3);
  box-shadow: var(--shadow-card);
  transform: translateX(4px);
}
@media (max-width: 640px) { .suivi-step { padding-left: 64px; } }

.suivi-step__num {
  position: absolute;
  left: 16px;
  top: 22px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--color-surface), 0 0 0 7px rgba(93, 177, 52, 0.3);
}
@media (max-width: 640px) { .suivi-step__num { left: 8px; } }

.suivi-step__title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 19px;
  color: var(--color-ink);
  margin: 0 0 6px;
  letter-spacing: -0.008em;
}
.suivi-step__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}
.suivi-step__body strong { color: var(--color-ink); font-weight: 700; }

/* ============================================================
 * MENTIONS LÉGALES
 * ============================================================ */

.mentions-legales {
  background: var(--color-surface);
  padding: clamp(72px, 8vw, 110px) 0;
}
.mentions-legales h1 {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  color: var(--color-ink);
  margin: 0 0 48px;
  letter-spacing: -0.02em;
}
.mentions-legales h2 {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--color-primary-dark);
  margin: 48px 0 18px;
  letter-spacing: -0.012em;
}
.mentions-legales p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin: 0 0 18px;
  max-width: 75ch;
}
.mentions-legales ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mentions-legales ul li {
  padding-left: 22px;
  position: relative;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--color-ink-soft);
}
.mentions-legales ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 4px;
  transform: rotate(45deg);
}
.mentions-legales a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mentions-legales a:hover { color: var(--color-primary); }

/* ============================================================
 * 17. UTILITAIRES
 * ============================================================ */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

.container-narrow {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 28px;
}

.icon {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}