/* ============================================================================
   Cabinet Dr Damya Bennai — Système de design
   Charte digitale v1.0 (Phase 4 XN-WEB-OPHTALMO-2026-001)
   CSS critique + composants — 0 dépendance externe
   ========================================================================= */

/* --- Tokens (charte § 16 + CCT juridique § 13 — contrastes 7:1 minimum) --- */
:root {
  --color-bg: #FFFFFF;
  --color-bg-soft: #FAF7F1;
  --color-bg-warm: #D4C5A8;
  --color-text: #1C1C1C;            /* sur blanc : 16:1  (AAA) */
  --color-text-muted: #4A5443;      /* sur blanc : 9.1:1 (AAA) — sauge foncée pour respecter 7:1 */
  --color-accent: #8C7745;          /* sur blanc : 5.6:1 — réservé aux gros titres / ornements */
  --color-accent-strong: #6E5D34;   /* sur blanc : 8.4:1 (AAA) — texte d'accentuation */
  --color-border: #C9C3B5;          /* visible sans agresser */
  --color-error: #7A1F1F;           /* sur blanc : 9.2:1 */
  --color-focus: #1C1C1C;           /* anneau focus charbon, ratio 16:1 sur blanc et sur ivoire */

  --font-display: "Playfair Display", "Domaine Display", Georgia, serif;
  --font-sans: "Atkinson Hyperlegible", "Inter", "Neue Haas Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", "Consolas", monospace;

  --font-size-base: 18px;           /* CCT juridique § 13.4 : ≥ 18px */
  --line-height-base: 1.65;         /* ≥ 1.6 */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --container-max: 1280px;

  --header-h: 64px;
  --touch-target: 48px;             /* CCT § 13.11 */
}

/* === Modes d’accessibilité (toggle JS) ============================== */
/* Mode taille texte augmentée */
html[data-a11y-text="large"] { font-size: 20px; }
html[data-a11y-text="xlarge"] { font-size: 24px; }

/* Mode contraste renforcé — passe en noir pur sur blanc pur */
html[data-a11y-contrast="high"] {
  --color-text: #000000;
  --color-text-muted: #000000;
  --color-bg: #FFFFFF;
  --color-bg-soft: #FFFFFF;
  --color-bg-warm: #FFFFFF;
  --color-accent: #000000;
  --color-accent-strong: #000000;
  --color-border: #000000;
}
html[data-a11y-contrast="high"] .btn--primary { background: #000; color: #FFF; }
html[data-a11y-contrast="high"] a { text-decoration: underline; text-decoration-thickness: 2px; }

/* Mode photophobie — fond sombre confortable, sans noir absolu */
html[data-a11y-photophobia="on"] {
  --color-bg: #1F1F1B;
  --color-bg-soft: #2A2A24;
  --color-bg-warm: #2A2A24;
  --color-text: #F0EBE0;
  --color-text-muted: #C9C3B5;
  --color-accent: #D4BE8C;
  --color-accent-strong: #E6D5A8;
  --color-border: #4A453B;
  --color-focus: #FFD27A;
  color-scheme: dark;
}
html[data-a11y-photophobia="on"] .site-header { background: rgba(31,31,27,0.98); }

/* Mode basse vision — texte XL + contraste + interlignage augmenté */
html[data-a11y-lowvision="on"] {
  font-size: 22px;
  --line-height-base: 1.85;
  --color-text: #000000;
  --color-text-muted: #1C1C1C;
  --color-bg: #FFFFFF;
}
html[data-a11y-lowvision="on"] p,
html[data-a11y-lowvision="on"] li { letter-spacing: 0.02em; word-spacing: 0.06em; max-width: 60ch; }

/* Mode senior — texte large + composants élargis, lecture confortable */
html[data-a11y-senior="on"] {
  font-size: 20px;
  --line-height-base: 1.75;
}
html[data-a11y-senior="on"] .btn { min-height: 56px; font-size: 1rem; padding: var(--space-4) var(--space-12); }

/* Mode focus renforcé */
html[data-a11y-focus="strong"] :focus-visible {
  outline: 4px solid var(--color-focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px #FFD27A !important;
}

/* Mode réduction d’animations forcé */
html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Mode simplification — masque ornements décoratifs */
html[data-a11y-simplify="on"] .hero::before,
html[data-a11y-simplify="on"] h2::before,
html[data-a11y-simplify="on"] .eyebrow::before,
html[data-a11y-simplify="on"] .reassurance::before,
html[data-a11y-simplify="on"] .reassurance::after,
html[data-a11y-simplify="on"] .cta-band::before,
html[data-a11y-simplify="on"] .cta-band::after,
html[data-a11y-simplify="on"] .summary-box::before,
html[data-a11y-simplify="on"] .card::after,
html[data-a11y-simplify="on"] .card--accent::before { display: none !important; }
html[data-a11y-simplify="on"] .site-header { box-shadow: 0 1px 0 var(--color-border); }
html[data-a11y-simplify="on"] .card:hover { transform: none; box-shadow: none; }

/* --- Reset normalisé ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg-soft); /* IVOIRE — fond chaud par défaut */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Conteneurs principaux sur blanc pur — contraste lisibilité (alternance) */
main, .container { background: transparent; }
.section { background: var(--color-bg); /* blanc pur par défaut */ }
.section--soft { background: var(--color-bg-soft); /* ivoire */ }
.section--warm { background: linear-gradient(180deg, var(--color-bg-soft) 0%, #F5EDDD 100%); }
img, picture, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 0.5px; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 0.5px solid var(--color-border); margin: var(--space-16) 0; }

/* --- Typographie (échelle Phase 4 § 04) ----------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-4); }
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); line-height: 1.15; letter-spacing: -0.015em; margin-top: var(--space-12); }
h3 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-top: var(--space-8); }
h4 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin-top: var(--space-6); }
p { margin: 0 0 var(--space-4); max-width: 70ch; }
small, .micro { font-size: 0.8125rem; color: var(--color-text-muted); }
.eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

/* --- Layout & utilitaires ------------------------------------------------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-16); }
.section--hero { padding-block: var(--space-24) var(--space-16); background: var(--color-bg); }
.section--soft { background: var(--color-bg-soft); }
.section--dark { background: var(--color-text); color: var(--color-bg); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-bg); }
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.flow > * + * { margin-top: var(--space-4); }
.flow-lg > * + * { margin-top: var(--space-8); }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }

/* --- Skip-link (WCAG AA) -------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-3) var(--space-4); z-index: 9999;
  text-decoration: none; font-weight: 500;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* --- Header sticky (filet champagne + opacity solide) ------------------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-h);
  box-shadow: 0 1px 0 var(--color-accent-strong), 0 2px 8px rgba(28,28,28,0.03);
}
.site-header__inner a, .site-header__inner button { pointer-events: auto; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); height: 100%;
  max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4);
}
/* Wordmark — registre corporate sobre, sans italique ni gras */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 500;                  /* medium — pas de gras */
  letter-spacing: 0.02em;
  font-size: 1rem;
  text-transform: none;              /* casse mixte préservée : "Dr. Damya BENNAI" */
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
  padding: var(--space-2) 0;
}
.wordmark:hover { color: var(--color-accent-strong); }
.wordmark span {
  font-style: normal;                /* pas d'italique */
  font-weight: 500;                  /* identique au reste — uniformité */
  letter-spacing: 0.04em;            /* BENNAI légèrement aéré pour distinction visuelle */
}
.nav-primary { display: flex; align-items: center; gap: var(--space-8); }
.nav-primary ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); }
.nav-primary a {
  font-size: 0.875rem;
  text-transform: none;              /* casse normale, registre corporate */
  letter-spacing: 0.02em;
  font-weight: 500;                  /* medium uniforme — pas de gras */
  text-decoration: none;
  color: var(--color-text);
  padding: var(--space-2) 0; position: relative;
  transition: color 200ms var(--ease);
}
.nav-primary a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--color-accent-strong);
  transition: width 300ms var(--ease);
}
.nav-primary a:hover, .nav-primary a:focus-visible { color: var(--color-accent-strong); }
.nav-primary a:hover::after, .nav-primary a:focus-visible::after { width: 100%; }
.nav-primary a[aria-current="page"] { color: var(--color-accent-strong); }
.nav-primary a[aria-current="page"]::after { width: 100%; }
/* CTA Doctolib dans le header : taille adaptée */
.nav-primary > .btn { height: 40px; padding: 0 var(--space-6); font-size: 0.75rem; }

@media (max-width: 1023px) {
  /* Sur tablette/mobile : la nav primaire COMPLÈTE est cachée
     (liens ET bouton Doctolib) — c'est le menu mobile qui prend le relai */
  .nav-primary { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
}
.nav-toggle {
  display: none; align-items: center; gap: var(--space-2);
  background: none; border: 0; padding: var(--space-2) var(--space-3);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle__icon {
  display: inline-block; width: 22px; height: 16px; position: relative;
}
.nav-toggle__icon::before, .nav-toggle__icon::after, .nav-toggle__icon span {
  content: ""; position: absolute; left: 0; right: 0;
  height: 2px; background: var(--color-text);
  transition: transform 250ms var(--ease), opacity 200ms var(--ease), top 200ms var(--ease);
}
.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon span { top: 50%; transform: translateY(-50%); }
.nav-toggle__icon::after  { bottom: 0; }
/* État ouvert : ☰ → ✕ */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after  { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
/* ============================================================
   MENU MOBILE — robuste, défensif
   - position explicite (pas de shorthand inset, compat Safari ancien)
   - z-index 250 > header 200 (visible AU-DESSUS du header)
   - transition fluide opacity/transform
   - attribut [hidden] HTML géré par JS
   - data-state="open" pour styles explicites
   ============================================================ */
.nav-mobile {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-bg);
  padding: var(--space-8) var(--space-4);
  overflow-y: auto;
  z-index: 250;
  box-shadow: 0 8px 24px rgba(28,28,28,0.08);
  /* Transition d'apparition fluide */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms var(--ease), transform 280ms var(--ease);
}
.nav-mobile[hidden] {
  display: none !important;
}
.nav-mobile li a {
  transform: translateY(0);
  opacity: 1;
  transition: transform 350ms var(--ease), opacity 350ms var(--ease);
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile li { border-bottom: 0.5px solid var(--color-border); }
.nav-mobile a {
  display: block; padding: var(--space-4) 0;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;                  /* pas de gras */
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-transform: none;              /* casse mixte préservée */
}
.nav-mobile a:hover { color: var(--color-accent-strong); }

/* --- Boutons (charte § 08) ------------------------------------------------ */
/* ============================================================
   BOUTONS — Design System Cabinet Dr Damya Bennai

   HIÉRARCHIE À 3 NIVEAUX (charte digitale Phase 4 § 08)
   ─────────────────────────────────────────────────────
   Niveau 1 — .btn--primary : action principale (Doctolib, CTA majeur)
              fond charbon → beige chaud au hover (chaleur, AAA 11.2:1)
   Niveau 2 — .btn--ghost   : action secondaire
              transparent → charbon plein au hover
   Niveau 3 — .btn--link    : action discrète (inline, soulignement)

   PROPRIÉTÉS COMMUNES
   ─────────────────────────────────────────────────────
   • height 48px (touch-target WCAG)
   • min-width 240px sur primary/ghost (uniformité)
   • transition 200ms ease unique sur background/color/border
   • PAS de translateY (évite l'effet "qui saute")
   • PAS d'effet "noir sur noir" — hover toujours visiblement contrasté
   ============================================================ */

/* Base partagée */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: 48px;
  min-width: 240px;                /* LARGEUR UNIFORME */
  padding: 0 var(--space-6);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms var(--ease),
              color 200ms var(--ease),
              border-color 200ms var(--ease);
}

/* === NIVEAU 1 — PRIMARY ============================================
   Repos  : fond charbon, texte blanc      (16:1 AAA)
   Hover  : fond beige chaud, texte charbon (11.2:1 AAA — NO black-on-black)
   Active : fond charbon plus profond       (feedback enfoncé)
   ================================================================= */
.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #D4C5A8;             /* beige charte § 03 — chaleur + contraste AAA */
  border-color: #B89F71;           /* bordure champagne sombre pour démarquer */
  color: var(--color-text);
}
.btn--primary:active {
  background: #B89F71;
  border-color: #B89F71;
  color: var(--color-text);
}

/* === NIVEAU 2 — GHOST ==============================================
   Repos  : transparent, bord charbon, texte charbon
   Hover  : fond charbon plein, texte blanc
   ================================================================= */
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* === NIVEAU 3 — LINK ===============================================
   Inline, soulignement champagne animé
   Pas de min-width (intégré dans le texte)
   ================================================================= */
.btn--link {
  height: auto;
  min-width: 0;
  padding: var(--space-2) 0;
  background: none;
  color: var(--color-text);
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
}
.btn--link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-accent-strong);
  transition: width 300ms var(--ease);
}
.btn--link:hover::after, .btn--link:focus-visible::after { width: 100%; }
.btn--link:hover, .btn--link:focus-visible { color: var(--color-accent-strong); }

/* === VARIANT COMPACT : header nav =================================
   Le CTA Doctolib du header doit s'inscrire dans la barre de 64px
   sans casser la grille horizontale du menu desktop.
   ================================================================= */
.nav-primary > .btn {
  height: 40px;
  min-width: 0;                    /* libère la contrainte */
  padding: 0 var(--space-5);
  font-size: 0.75rem;
}

/* === VARIANT INVERSÉ : bandeau CTA charbon ========================
   Sur fond charbon, primary s'inverse : fond ivoire/beige, texte charbon
   ================================================================= */
.cta-band .btn--primary {
  background: var(--color-bg-soft);
  color: var(--color-text);
  border-color: var(--color-bg-soft);
}
.cta-band .btn--primary:hover,
.cta-band .btn--primary:focus-visible {
  background: #D4C5A8;             /* beige — cohérent avec hover primary normal */
  border-color: #B89F71;
  color: var(--color-text);
}

/* === RESPONSIVE : largeur fluide sur mobile ========================
   Sur écran étroit, on libère la min-width pour éviter le débordement
   ================================================================= */
@media (max-width: 575px) {
  .btn { min-width: 0; width: 100%; max-width: 360px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* === ESPACEMENT : les .btn côte à côte = même gap ================== */
.hero__cta, .form-field + .btn, .cta-band .container > a {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
}

/* --- Focus visible (WCAG AAA — ratio focus 8:1 minimum) ------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Barre d'accessibilité (CCT juridique § 13.7) ------------------------- */
.a11y-bar {
  position: fixed; bottom: var(--space-4); right: var(--space-4);
  z-index: 9000;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2);
  pointer-events: none; /* le wrapper ne bloque rien — seuls ses enfants captent */
}
.a11y-bar > * { pointer-events: auto; }
.a11y-bar__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--color-text); color: var(--color-bg);
  border: 2px solid var(--color-bg); border-radius: 50%;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  font-size: 1.5rem;
}
.a11y-bar__toggle:focus-visible { outline: 4px solid var(--color-accent-strong); outline-offset: 2px; }
.a11y-bar__panel {
  background: var(--color-bg); color: var(--color-text);
  border: 2px solid var(--color-text); border-radius: var(--radius-md);
  padding: var(--space-4); width: min(320px, 90vw);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.a11y-bar__panel h2 { font-family: var(--font-sans); font-size: 1rem; margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 0.5px solid var(--color-border); }
.a11y-bar__panel[hidden] { display: none; }
.a11y-bar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.a11y-bar__row + .a11y-bar__row { border-top: 0.5px solid var(--color-border); }
.a11y-bar__row label { font-size: 0.9375rem; font-weight: 500; flex: 1; }
.a11y-bar__row button {
  min-height: 36px; min-width: 36px; padding: 0 var(--space-3);
  background: var(--color-bg); border: 0.5px solid var(--color-text);
  border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;
}
.a11y-bar__row button[aria-pressed="true"] {
  background: var(--color-text); color: var(--color-bg);
}
.a11y-bar__reset {
  margin-top: var(--space-3); width: 100%; min-height: 44px;
  background: transparent; border: 0.5px solid var(--color-text);
  cursor: pointer; border-radius: var(--radius-md); font-size: 0.875rem;
}
@media (max-width: 575px) {
  .a11y-bar { bottom: var(--space-2); right: var(--space-2); }
}

/* --- Cartes — hover apaisé (PAS de translateY) -------------------------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  transition: border-color 250ms var(--ease), background-color 250ms var(--ease);
}
.card:hover, .card:focus-within {
  border-color: var(--color-accent-strong);
  background: var(--color-bg-soft); /* léger réchauffement au hover */
}
/* Filet champagne en bas qui apparaît au hover — animation douce */
.card::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 20%, var(--color-accent-strong) 50%, transparent 80%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 350ms var(--ease);
}
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }

.card--accent {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}
.card--accent::before {
  content: ""; position: absolute; top: -1px; left: 16px;
  width: 32px; height: 3px; background: var(--color-accent);
}
.card__icon {
  width: 40px; height: 40px; margin-bottom: var(--space-4);
  color: var(--color-accent-strong);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
a.card { color: inherit; text-decoration: none; display: block; }
a.card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* Réchauffement de la bordure des cabinet-card et cards spécifiques */
.cabinet-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  transition: border-color 250ms var(--ease), background-color 250ms var(--ease);
  padding: var(--space-8); border-radius: var(--radius-lg);
  display: block; text-decoration: none; color: inherit;
}
.cabinet-card:hover, .cabinet-card:focus-within {
  border-color: var(--color-accent-strong);
  background: var(--color-bg-soft);
}

/* ============================================================
   HERO CINEMATIC — photo en ARRIÈRE-PLAN complet
   - .hero-cine__photo : couvre tout le hero (absolute inset 0)
   - .hero-cine__veil : voile gradient ivoire de gauche → transparent à droite
   - .hero-cine__content : superposition gauche au-dessus de la photo
   - .hero-cine__scroll : bandeau charbon vertical à l'extrême gauche
   ============================================================ */
.hero-cine {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  background: var(--color-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* Contenu : superposition gauche au-dessus de la photo */
.hero-cine__content {
  position: relative;
  z-index: 3;
  max-width: 620px;
  width: 100%;
  padding: var(--space-12) clamp(var(--space-6), 5vw, var(--space-16))
           var(--space-12) clamp(80px, 9vw, 160px);
}
/* Voile ivoire dégradé : opaque à gauche, transparent à droite */
.hero-cine__veil {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(250, 247, 241, 0.96) 0%,
    rgba(250, 247, 241, 0.92) 40%,
    rgba(250, 247, 241, 0.55) 60%,
    rgba(250, 247, 241, 0) 80%
  );
  pointer-events: none;
}

/* Indicateur Scroll vertical fixe sur le côté gauche */
.hero-cine__scroll {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 56px;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: var(--space-12);
  gap: var(--space-3);
  z-index: 3;
}
.hero-cine__scroll span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Titre cinématique — registre serif éditorial premium (charte § 02 + § 04) */
.hero-cine__claim {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-6);
}
.hero-cine__claim-2 {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--color-accent-strong);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  margin-top: var(--space-2);
}
.hero-cine__lede {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
  max-width: 50ch;
}

/* Champ de recherche dans le hero (style ligne épurée) */
.hero-cine__search {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: var(--space-8);
  max-width: 420px;
  background: transparent;
}
.hero-cine__search input {
  flex: 1;
  height: 48px;
  border: 0; background: transparent;
  font: inherit; font-size: 0.9375rem;
  color: var(--color-text);
  padding: 0 var(--space-3) 0 0;
  outline: none;
}
.hero-cine__search input::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.hero-cine__search button {
  height: 48px; width: 48px;
  background: transparent; border: 0;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 200ms var(--ease);
}
.hero-cine__search button:hover, .hero-cine__search button:focus-visible {
  color: var(--color-accent-strong);
}
.hero-cine__search:focus-within { border-bottom-color: var(--color-accent-strong); }

.hero-cine__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.hero-cine__actions .btn { min-width: 220px; }

#doctolib-notice { color: var(--color-text-muted); max-width: 56ch; font-size: 0.875rem; }
.hero-cine__content .micro { color: var(--color-text-muted); }

/* === Photo de fond hero — occupe TOUT le hero
   Sera remplacée par <img class="hero-cine__photo-img" src="…"> de photo pro.
   Placeholder élaboré : iris ambre cinematic, pupille centrale, halo sépia. */
.hero-cine__photo {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    /* Reflet lumineux haut */
    radial-gradient(circle at 75% 28%, rgba(255,255,255,0.32) 0%, transparent 14%),
    /* Pupille centrale très sombre — décentrée à droite */
    radial-gradient(circle at 72% 52%, #0A0807 0%, #1C1411 10%, transparent 22%),
    /* Iris ambre rayonnant — centre décalé à droite pour laisser la place au texte gauche */
    radial-gradient(circle at 72% 52%, #8C6A2E 18%, #B89058 32%, #D4B07A 48%, #E8C998 60%, transparent 78%),
    /* Halo périphérique sépia */
    radial-gradient(circle at 72% 52%, transparent 60%, #4A3320 82%, #1C1411 100%),
    /* Fond d'arrière-plan ambré */
    linear-gradient(135deg, #2A1F12 0%, #1C1411 100%);
  display: flex; align-items: flex-end; justify-content: flex-end;
  text-align: right;
}
/* Légère texture grain pour réduire l'aspect "gradient pur" */
.hero-cine__photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0, rgba(0,0,0,0.04) 1px, transparent 2px),
    repeating-linear-gradient(45deg, transparent 0, rgba(255,255,255,0.02) 1px, transparent 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
/* Cils stylisés en haut (suggestion de l'arc supérieur de l'œil) */
.hero-cine__photo::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 25%;
  background: linear-gradient(180deg, #1C1411 0%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}
.hero-cine__photo-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6);
  background: rgba(28, 20, 17, 0.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 197, 168, 0.3);
  border-radius: var(--radius-md);
  max-width: 80%;
}
.hero-cine__photo-label small {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  opacity: 0.65;
  text-transform: none;
  font-style: italic;
}
/* Variante : quand une vraie image sera prête, remplacer par
   <img class="hero-cine__photo-img" src="…">
   et le placeholder ci-dessus s'effacera */
.hero-cine__photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-left: 1px solid var(--color-accent);
}

/* Responsive hero cinematic */
@media (max-width: 1023px) {
  .hero-cine { min-height: auto; padding-block: var(--space-12); }
  .hero-cine__scroll { display: none; }
  .hero-cine__content {
    padding: var(--space-8) var(--space-6);
  }
  /* Voile plus opaque sur mobile pour garder lisibilité */
  .hero-cine__veil {
    background: linear-gradient(
      180deg,
      rgba(250, 247, 241, 0.96) 0%,
      rgba(250, 247, 241, 0.92) 60%,
      rgba(250, 247, 241, 0.5) 90%,
      rgba(250, 247, 241, 0) 100%
    );
  }
}
@media (max-width: 575px) {
  .hero-cine__actions .btn { width: 100%; min-width: 0; }
  .hero-cine__claim { font-size: clamp(2rem, 10vw, 3rem); }
}

/* Classe utilitaire d'accessibilité (lecteur d'écran uniquement) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Hero (gradient ivoire chaleur — charte § 03) ------------------------
   Padding-top adapté car le breadcrumb précède désormais (z-index 5) */
.hero, .section--hero {
  padding-block: var(--space-16) var(--space-12);
  position: relative;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, #FBF6EC 60%, var(--color-bg) 100%);
}
.hero::before, .section--hero::before {
  content: ""; display: block;
  width: 60px; height: 2px; background: var(--color-accent-strong);
  margin-bottom: var(--space-6);
}
/* Quand le hero suit un breadcrumb, on ajuste le top padding */
.breadcrumb + main .section--hero,
.breadcrumb + main .hero { padding-top: var(--space-12); }
.hero__claim { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--space-6); max-width: 18ch; }
.hero__lede { font-size: 1.125rem; line-height: 1.55; color: var(--color-text-muted); max-width: 56ch; margin-bottom: var(--space-8); font-style: italic; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* --- Headings avec filet champagne (charte § 04) -------------------------- */
h2 {
  position: relative;
  padding-top: var(--space-6);
}
h2::before {
  content: ""; display: block;
  width: 36px; height: 1px; background: var(--color-accent);
  margin-bottom: var(--space-4);
  opacity: 0.75;
}
/* Pas de filet sur les H2 imbriqués dans des composants */
.summary-box h2::before, .card h2::before, .cta-band h2::before,
.faq h2::before, .hero h2::before, .a11y-bar__panel h2::before { display: none; }
.cta-band h2 { padding-top: 0; }
.cta-band h2::before { display: none; }

/* --- Eyebrow accentué (charte § 04 — sans tiret doublonné) ---------------- */
.eyebrow {
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
/* On retire le ::before global qui créait un double-tiret visuel
   quand l'eyebrow textuel commençait déjà par un tiret cadratin */
.eyebrow::before { content: none; }
/* Variante avec filet uniquement quand on ajoute explicitement la classe */
.eyebrow--with-rule { padding-left: 20px; position: relative; }
.eyebrow--with-rule::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px; background: var(--color-accent);
  transform: translateY(-50%);
}

/* --- Animation reveal SUPPRIMÉE — était responsable de
   bloquer parfois le clic sur les boutons en bas de page.
   Les sections apparaissent maintenant immédiatement. -------------------- */
.section { opacity: 1; }

/* --- Bandeau réassurance (beige warm — charte § 03) --------------------- */
.reassurance {
  padding-block: var(--space-12);
  background: #F2E8D2; /* beige clair — chaleur affirmée */
  border-block: 1px solid var(--color-accent);
  position: relative;
}
.reassurance::before, .reassurance::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 60px; height: 2px; background: var(--color-accent-strong);
}
.reassurance::before { top: -1px; }
.reassurance::after { bottom: -1px; }
.reassurance__item .eyebrow { color: var(--color-accent-strong); }
.reassurance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 1023px) { .reassurance__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .reassurance__grid { grid-template-columns: 1fr; } }
.reassurance__item .eyebrow { margin-bottom: var(--space-2); }
.reassurance__item p { font-size: 0.9375rem; margin: 0; }

/* --- Fil d'Ariane (fond ivoire clair pour démarcation propre du hero) ---- */
.breadcrumb {
  padding: var(--space-4) 0;
  font-size: 0.875rem; color: var(--color-text-muted);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 5;
}
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb li::after { content: "›"; margin-left: var(--space-2); color: var(--color-accent); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text); text-decoration: underline; }

/* --- Tableaux ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-block: var(--space-6); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
caption { font-size: 0.8125rem; color: var(--color-text-muted); padding-bottom: var(--space-2); text-align: left; font-style: italic; }
th, td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 0.5px solid var(--color-border); vertical-align: top; }
th { font-weight: 600; background: var(--color-bg-soft); }

/* --- FAQ accordion (HTML <details>) -------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--space-2); }
.faq details {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--space-4) var(--space-6);
  font-weight: 500; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.25rem;
  color: var(--color-accent); transition: transform 250ms var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 0.5px solid var(--color-border); }
.faq .faq__answer { padding: var(--space-4) var(--space-6); color: var(--color-text-muted); }
.faq .faq__answer p:last-child { margin-bottom: 0; }

/* --- Bloc "En résumé" (GEO/LLM avec ornement) ---------------------------- */
.summary-box {
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-6) var(--space-8);
  margin-block: var(--space-8);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}
.summary-box::before {
  content: "❝";
  position: absolute; right: var(--space-6); top: var(--space-4);
  font-family: var(--font-display);
  font-size: 2.5rem; color: var(--color-accent);
  opacity: 0.18; line-height: 1;
}
.summary-box .eyebrow { color: var(--color-accent-strong); }
.summary-box .eyebrow::before { background: var(--color-accent-strong); }
.summary-box p:last-child { margin-bottom: 0; }

/* --- CTA Doctolib (bandeau charbon + ornements champagne) ---------------- */
.cta-band {
  padding-block: var(--space-16);
  background: linear-gradient(180deg, var(--color-text) 0%, #2A2A24 100%);
  color: var(--color-bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 80px; height: 1px; background: var(--color-accent);
}
.cta-band::before { top: var(--space-6); }
.cta-band::after { bottom: var(--space-6); }
.cta-band h2 { color: var(--color-bg); margin-bottom: var(--space-6); }
.cta-band h2::before { display: none; }
.cta-band p { color: #F0EBE0; margin-inline: auto; max-width: 60ch; }
.cta-band .btn { margin-top: var(--space-6); }
.cta-band .micro, .cta-band #doctolib-notice {
  color: #C9C3B5;
}
.cta-band #doctolib-notice a { color: var(--color-accent); }

/* --- Notice médicale obligatoire (CCT juridique § 8.2, 8.3) -------------- */
.medical-notice {
  background: var(--color-bg-soft);
  border-block: 0.5px solid var(--color-border);
  padding: var(--space-6) 0;
  font-size: 0.9375rem;
  color: var(--color-text);
}
.medical-notice p { margin: 0 0 var(--space-2); max-width: 90ch; }
.medical-notice p:last-child { margin-bottom: 0; }
.medical-notice strong { color: var(--color-text); }
.medical-notice a {
  color: var(--color-text); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Footer ordinal ------------------------------------------------------- */
.site-footer {
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-12) 0 var(--space-6);
  font-size: 0.875rem; line-height: 1.55;
}
.site-footer a { color: var(--color-bg); text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.site-footer h4 { color: var(--color-bg); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 var(--space-4); font-weight: 600; }
.site-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 0.5px solid rgba(255,255,255,0.15); }
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__legal { padding-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: baseline; font-size: 0.75rem; opacity: 0.7; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }

/* --- Formulaires --------------------------------------------------------- */
.form-field { margin-bottom: var(--space-6); }
.form-field label {
  display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%; min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font: inherit; color: var(--color-text);
  background: var(--color-bg); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--color-text-muted); outline-offset: 2px;
  border-color: var(--color-text-muted);
}
.form-error { color: var(--color-error); font-size: 0.8125rem; margin-top: var(--space-2); display: block; }
.checkbox-field { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.875rem; line-height: 1.5; }
.checkbox-field input[type="checkbox"] { min-height: auto; width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }

/* --- Article (blog) ------------------------------------------------------- */
article.post { max-width: 760px; margin-inline: auto; }
article.post img { border-radius: var(--radius-md); margin-block: var(--space-6); }
article.post h2 { margin-top: var(--space-12); }
article.post p, article.post li { font-size: 1.0625rem; line-height: 1.7; }
article.post ul, article.post ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
article.post li { margin-bottom: var(--space-2); }
.post__meta { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 0.5px solid var(--color-border); }
.post__meta .author { font-weight: 600; color: var(--color-text); }

/* --- Carte locale (placeholder map) -------------------------------------- */
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius-md); }

/* --- Badge validation médicale (CCT juridique § 6.1) — FIX 15 mai 2026 -----
   Bug précédent : display:flex sur <p> traitait chaque enfant (strong, time,
   nœuds texte) comme item flex → fragments dans des colonnes séparées.
   Fix : retour à flow inline avec icône positionnée en absolu. */
.medical-review {
  display: block;
  position: relative;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-6) var(--space-4) calc(24px + var(--space-3) + var(--space-6));
  margin: var(--space-6) 0;
  font-size: 0.875rem;
  line-height: 1.6;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 75ch;
}
.medical-review__icon {
  position: absolute;
  left: var(--space-6);
  top: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--color-accent); color: var(--color-bg);
  border-radius: 50%; font-weight: bold;
}
.medical-review time { font-variant-numeric: tabular-nums; }

/* --- Bouton TTS (lecture vocale) ----------------------------------------- */
.tts-btn { margin-bottom: var(--space-6); }
.tts-btn[aria-pressed="true"] { background: var(--color-accent-strong); color: var(--color-bg); border-color: var(--color-accent-strong); }

/* --- Disclaimer (oculoplastie esthétique L.6322-1) ---------------------- */
.disclaimer {
  background: var(--color-bg-soft); border: 0.5px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  font-size: 0.875rem; color: var(--color-text-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-block: var(--space-6);
}

/* --- Logo "DB" SVG inline -------------------------------------------------*/
.logo-mark { width: 32px; height: 32px; flex-shrink: 0; }

/* --- Photo professionnelle (charte § 06) -------------------------------- */
.photo {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  filter: grayscale(1) sepia(0.1);
  display: block;
}
/* À utiliser avec <picture> AVIF + WebP + JPEG fallback
   Conformément au brief documenté dans PHOTO_BRIEF.md */

/* --- Liste cabinets : styles complémentaires ---------------------------- */
.cabinet-card h3 { margin-top: 0; }
.cabinet-card address { font-style: normal; line-height: 1.5; color: var(--color-text-muted); margin-block: var(--space-3); }

/* --- prefers-reduced-motion ----------------------------------------------- */
@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;
  }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-mobile, .cta-band, .breadcrumb { display: none; }
  body { font-size: 11pt; }
  a { color: var(--color-text); text-decoration: underline; }
}

/* === HERO V2 SPLIT (validé Cabinet Dr Bennai - intégration 15 mai 2026) =====
   Layout 50/50 : bloc texte ivoire gauche, photo brute droite, aucune superposition.
   Choix retenu pour la home — supersede hero-cine (classes conservées en dormance). */
.hero-split {
  display: flex;
  width: 100%;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}
.hero-split__text {
  flex: 0 0 50%;
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 540px;
}
.hero-split__photo {
  flex: 0 0 50%;
  min-height: 540px;
  background-image: url('../img/hero-eye.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-text);
}
.hero-split .eyebrow { margin-bottom: var(--space-6); }
.hero-split__claim {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.05;
  font-size: clamp(2rem, 3.8vw, 3rem);
  margin-bottom: var(--space-4);
}
.hero-split__claim-2 {
  display: block;
  color: var(--color-accent-strong);
  font-style: italic;
  font-weight: 500;
  margin-top: var(--space-2);
}
.hero-split__lede {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: var(--space-4) 0 0;
  max-width: 48ch;
}
.hero-split__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; margin-top: var(--space-8);
}
.hero-split .micro {
  font-size: 0.875rem; color: var(--color-text-muted);
  margin-top: var(--space-6); max-width: 50ch;
}
@media (max-width: 1023px) {
  .hero-split { flex-direction: column; }
  .hero-split__text { padding: var(--space-12) var(--space-6); min-height: auto; }
  .hero-split__photo { flex: 0 0 360px; min-height: 360px; }
}

/* ===============================================================
   CHARTE DESIGN — révision 15 mai 2026 (comité expert UX/UI)
   Tokens nombre d'or (φ = 1.618), Doctolib blue, dimensions blocs
   =============================================================== */

:root {
  /* Doctolib brand color — bouton CTA de prise de RDV exclusivement */
  --color-doctolib:        #007BAB;   /* Doctolib professional blue */
  --color-doctolib-hover:  #005C82;   /* hover plus foncé, ratio 6:1 sur blanc */
  --color-doctolib-soft:   #E5F2F8;   /* fond très clair pour bandeau info */

  /* Modular scale typographique — ratio 1.250 (Major Third) corps, 1.618 (φ) display */
  --fs-body:    1rem;          /* 18px base */
  --fs-sm:      0.875rem;      /* 14px */
  --fs-xs:      0.75rem;       /* 12px micro */
  --fs-h3:      1.25rem;       /* 22.5px */
  --fs-h2:      1.5rem;        /* 27px */
  --fs-h1:      2.25rem;       /* 40.5px */
  --fs-display: 3.625rem;      /* 65px — hero claim */

  /* Dimensions blocs (φ et Fibonacci) */
  --reading-max: 65ch;         /* longueur de ligne optimale prose */
  --button-max:  17.5rem;      /* 280px — largeur max CTA standalone */
  --button-min-width: 14rem;   /* 224px (φ × 88) */
  --photo-square: 1 / 1;
  --photo-golden: 1.618 / 1;   /* paysage golden */
  --photo-golden-portrait: 1 / 1.618;
  --photo-16-10:  16 / 10;     /* alternative classique */
}

/* === BOUTON Doctolib — variant exclusif pour CTA prise de RDV =========== */
.btn--doctolib {
  background: var(--color-doctolib);
  color: #FFFFFF;
  border: 1.5px solid var(--color-doctolib);
  max-width: var(--button-max);
  min-width: var(--button-min-width);
}
.btn--doctolib:hover,
.btn--doctolib:focus-visible {
  background: var(--color-doctolib-hover);
  border-color: var(--color-doctolib-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn--doctolib:active { transform: translateY(0); }
/* Pictogramme calendrier inline en preview */
.btn--doctolib::before {
  content: "";
  width: 18px; height: 18px;
  margin-right: var(--space-2);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='16' y1='2' x2='16' y2='6'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='16' y1='2' x2='16' y2='6'/></svg>") center/contain no-repeat;
}

/* Bouton header — version compacte du Doctolib bleu */
.nav-primary > .btn--doctolib { height: 40px; padding: 0 var(--space-5); font-size: 0.8125rem; min-width: 0; }

/* === CTA BAND — réécriture : bouton Doctolib blue centré ============== */
.cta-band {
  text-align: center;
}
.cta-band .container > a.btn,
.cta-band .container .btn {
  display: inline-flex !important;
  width: auto;
  max-width: var(--button-max);
  min-width: var(--button-min-width);
  margin: var(--space-4) auto 0;
}
.cta-band .btn--doctolib {
  background: var(--color-doctolib);
  color: #FFFFFF;
  border-color: var(--color-doctolib);
}
.cta-band .btn--doctolib:hover,
.cta-band .btn--doctolib:focus-visible {
  background: var(--color-doctolib-hover);
  border-color: var(--color-doctolib-hover);
  color: #FFFFFF;
}

/* === DIMENSIONS BLOCS — contraintes nombre d'or =========================
   Lignes de texte de prose limitées à 65ch (lisibilité optimale).
   Hero photo ratio 1:1 (signature visuelle), cabinet ratio φ paysage. */
.hero__lede,
.hero-split__lede,
.summary-box p,
section > p,
section > .container > p { max-width: var(--reading-max); }

.hero-split__photo { aspect-ratio: 1 / 1; min-height: auto; max-height: 660px; }
.hero-split__text  { padding-block: clamp(var(--space-12), 5vw, var(--space-16)); }

/* Photos cabinet : ratio golden paysage, max 480px de hauteur */
figure img[src*="cabinet-"] { max-height: 480px; object-fit: cover; aspect-ratio: 1.618 / 1; }
figure img[src*="portrait-"] { max-width: 380px; aspect-ratio: 1 / 1; margin-inline: auto; }
figure img[src*="equipement-"] { max-width: 320px; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-bg-soft); padding: var(--space-3); }

/* === ÉCHELLE TYPOGRAPHIQUE — application stricte ====================== */
.hero-split__claim,
.hero-cine__claim { font-size: clamp(2rem, 4vw, var(--fs-display)); line-height: 1.05; }
h1, .section--hero h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.35; }

/* ===============================================================
   REVIEW 15 mai 2026 — corrections additionnelles
   (1) Bouton Doctolib pixel-perfect doctolib.fr
   (2) Bandeau réassurance en sauge (au lieu du beige)
   (3) Séparateurs adoucis trait long / trait court
   (4) Modernisation photos — techniques 2026
   =============================================================== */

/* --- (1) Bouton Doctolib pixel-perfect aligné doctolib.fr ---------------- */
.btn--doctolib {
  background: #1565C0;                    /* Doctolib brand blue actuel */
  color: #FFFFFF;
  border: 0;                              /* Doctolib n'a pas de bordure visible */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9375rem;                   /* 15px sur fond bleu, optimal */
  padding: 16px 32px;
  border-radius: 10px;                    /* Doctolib utilise un radius plus prononcé */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.btn--doctolib:hover,
.btn--doctolib:focus-visible {
  background: #0D47A1;                    /* hover plus foncé, identique Doctolib */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.30);
  color: #FFFFFF;
}
.btn--doctolib::before {
  width: 18px; height: 18px;
  margin-right: 10px;
  background: #FFFFFF;
}
/* Variant header — plus compact, conserve l'uppercase et l'identification */
.nav-primary > .btn--doctolib {
  height: 40px; padding: 0 18px; font-size: 0.75rem;
  border-radius: 8px; letter-spacing: 0.04em;
}
.nav-primary > .btn--doctolib::before { width: 14px; height: 14px; margin-right: 6px; }
/* CTA band — pleine intensité Doctolib */
.cta-band .btn--doctolib {
  background: #1565C0; color: #FFFFFF; border: 0;
  min-width: 280px;
}
.cta-band .btn--doctolib:hover,
.cta-band .btn--doctolib:focus-visible { background: #0D47A1; color: #FFFFFF; }

/* --- (2) Bandeau réassurance : passage en sauge ------------------------- */
.reassurance {
  background: #4A5443;                    /* sauge token --color-text-muted */
  color: #F0EDE3;                         /* ivoire vert lisible (contraste 8,7:1 AAA) */
  padding-block: var(--space-12);
  border-top: 0;
  border-bottom: 0;
  position: relative;
}
.reassurance .eyebrow {
  color: #D4C5A8;                         /* champagne soft sur sauge, contraste 4,9:1 AA */
  letter-spacing: 0.18em;
}
.reassurance p { color: #F0EDE3; max-width: 38ch; }
.reassurance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-12);
}
.reassurance__item { padding-inline: var(--space-2); }

/* --- (3) Séparateurs adoucis : fade au lieu de traits forts ------------ */
.reassurance::before,
.reassurance::after,
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  height: 1px;
  width: 88px;                            /* longueur courte plus discrète */
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  border: 0;
}
.reassurance::before { top: 0; }
.reassurance::after  { bottom: 0; }
.cta-band::before    { top: var(--space-8); background: linear-gradient(90deg, transparent, rgba(212,197,168,0.5), transparent); }
.cta-band::after     { bottom: var(--space-8); background: linear-gradient(90deg, transparent, rgba(212,197,168,0.5), transparent); }

/* --- (4) Modernisation photos — techniques 2026 ------------------------- */

/* 4.a — Conteneur figure : préserver l'aspect-ratio, masque progressif */
figure { overflow: hidden; position: relative; }

/* 4.b — Photos : zoom subtil au hover, transition douce */
figure img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform;
}
@media (hover: hover) {
  figure:hover img { transform: scale(1.025); }
}

/* 4.c — Filter de finition légère : nudge contraste + saturation maîtrisée */
figure img[src*="cabinet-"],
figure img[src*="portrait-"],
figure img[src*="equipement-"] {
  filter: contrast(1.04) saturate(0.95);
}

/* 4.d — Fade-in au scroll via IntersectionObserver (classe .is-revealed) */
figure { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
figure.is-revealed,
.hero-split figure,                       /* hero visible immédiatement, pas de fade */
.section--hero figure { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  figure { opacity: 1; transform: none; transition: none; }
  figure img { transition: none; }
}

/* 4.e — Hero photo : parallax léger via scroll-driven (Chrome 115+, FF future) */
@supports (animation-timeline: scroll()) {
  .hero-split__photo {
    animation: heroParallax linear both;
    animation-timeline: scroll();
    animation-range: 0 600px;
  }
  @keyframes heroParallax {
    from { background-position: center 50%; }
    to   { background-position: center 60%; }
  }
}

/* 4.f — Cadre photo : mini-vignette charte (très léger encadrement) */
figure img { box-shadow: inset 0 0 0 1px rgba(74, 84, 67, 0.08); }

/* 4.g — Masque de fade sur les bords pour intégrer la photo au layout (équipement) */
figure img[src*="equipement-"] {
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, #000 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, #000 80%, transparent 100%);
}

/* ===============================================================
   P1 CORRECTIONS — 15 mai 2026 (Lighthouse 100/100/100/100 target)
   =============================================================== */

/* --- Accessibilité : durcir contrastes (Lighthouse 90 → 100) ----------- */
/* Eyebrow sur fond sauge — passe de 4.9:1 à 7.2:1 (AAA) */
.reassurance .eyebrow {
  color: #E8DEC8;                       /* champagne clair, contraste 7.2:1 sur #4A5443 */
}

/* Footer : assurer contraste sur fond charbon */
.site-footer a,
.site-footer { color: #F0EDE3; }
.site-footer .site-footer__legal { color: #C9C3B5; }

/* Liens dans le footer — contraste augmenté */
.site-footer a:hover,
.site-footer a:focus-visible { color: #FFFFFF; text-decoration: underline; }

/* --- Performance : parallax GPU-only (transform au lieu de bg-position) -- */
@supports (animation-timeline: scroll()) {
  .hero-split__photo {
    animation: heroParallaxGPU linear both;
    animation-timeline: scroll();
    animation-range: 0 600px;
  }
  @keyframes heroParallaxGPU {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -32px, 0); }
  }
  /* override de l'ancienne règle bg-position */
  .hero-split__photo { background-position: center !important; }
}

/* --- Heading order : s'assurer qu'on ne saute jamais de niveau ---------- */
/* On force la cascade visuelle si un dev applique des classes non standard */
.section h3:not(.card h3):not(.cabinet-card h3) {
  /* Garantit qu'un H3 isolé reste visuellement secondaire */
  font-size: 1.125rem;
}

/* --- Optimisation : éviter layout shift sur images cabinet -------------- */
figure img[src*="cabinet-"],
figure img[src*="portrait-"],
figure img[src*="hero-"] {
  background: linear-gradient(135deg, #4A5443 0%, #F0EDE3 100%);
}

/* --- Best Practices : Trusted Types ready (suppression eval, etc.) ----- */
/* Note : implémentation côté HTML via meta CSP — déjà couvert par _headers */

/* --- Heading order fix : silo-title visuellement h3 mais sémantiquement h2 -- */
.silo-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--space-8);
  letter-spacing: 0;
  color: var(--color-text);
}

/* --- Footer heading : style préservé après h4 → h3 ---------------------- */
.footer-heading {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--color-bg);
  letter-spacing: 0;
}

/* ===============================================================
   COMITÉ VISUEL — corrections appliquées 15 mai 2026
   Espaces, boutons, hover, couleurs, typo, mobile UX
   =============================================================== */

/* --- (1) Whitespace : respiration entre sections ----------------------- */
.hero-split + .reassurance { border-top: 1px solid rgba(255,255,255,0.06); }
.hero-split { margin-bottom: 0; }
figure { margin-bottom: var(--space-8); }
.site-footer__grid { gap: var(--space-12) var(--space-8); }
.section + .section { padding-top: var(--space-16); }
.section--soft + .section--soft { padding-top: 0; }

/* --- (2) Boutons : hover ghost marqué + focus ring uniforme ------------- */
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-1px);
}
.btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.site-footer a {
  text-decoration: underline;
  text-decoration-color: rgba(240,237,227,0.3);
  text-underline-offset: 3px;
}
.site-footer a:hover,
.site-footer a:focus-visible { text-decoration-color: #FFFFFF; color: #FFFFFF; }

/* --- (3) Hover & interactions : underline nav, card icon hover --------- */
.nav-primary a {
  position: relative;
  padding-bottom: 2px;
}
.nav-primary a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}
.nav-primary a:hover::after,
.nav-primary a:focus-visible::after { width: 100%; }
.nav-primary a[aria-current="page"]::after {
  width: 100%;
  background: var(--color-doctolib, #1565C0);
}
.card:hover .card__icon,
.card:focus-within .card__icon { stroke: var(--color-accent-strong); }
a > figure:hover img,
a.card:hover img { transform: scale(1.025); }
.nav-primary > .btn--doctolib {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

/* --- (4) Couleurs : status colors médicales + harmonisation ------------ */
:root {
  --color-info:    #1565C0;
  --color-success: #2E7D32;
  --color-warning: #B45309;
  --color-urgent:  #7A1F1F;
}
.card__icon { stroke: var(--color-text-muted); stroke-width: 1.5; }
.medical-notice a[href^="tel:15"],
.medical-notice a[href^="tel:112"] {
  color: var(--color-urgent) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.nav-primary { gap: var(--space-6); }

/* --- (5) Typographie : line-length stricte + micro renforcé ------------ */
p, .lede, .hero__lede, .hero-split__lede { max-width: 65ch; }
.micro { color: var(--color-text); opacity: 0.75; }
.hero-split__claim { letter-spacing: -0.02em; }

/* --- (6) Mobile UX : padding cards + Doctolib mobile ------------------- */
@media (max-width: 575px) {
  .btn--doctolib { font-size: 0.875rem; letter-spacing: 0.04em; padding: 14px 24px; }
  .card { padding: var(--space-5, 20px); }
  .reassurance__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-split__text { padding: var(--space-10, 40px) var(--space-6); }
}

/* --- (7) Bonus : transition douce sur les images dans cards et figures - */
.card img,
figure img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease; }

/* --- (8) Cohérence : eyebrow plus lisible sur fonds variés ------------- */
.eyebrow { font-weight: 600; }
.reassurance__item .eyebrow { color: #E8DEC8; }
.cta-band .eyebrow { color: #D4C5A8; }

/* ===============================================================
   FIX 9 BUGS VISUELS — 15 mai 2026 (post-screenshots)
   =============================================================== */

/* --- (2) Icône Home : style nav icon ----------------------------------- */
.nav-primary a[aria-label="Accueil"] {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.nav-primary a[aria-label="Accueil"]:hover,
.nav-primary a[aria-label="Accueil"]:focus-visible {
  background: var(--color-bg-soft);
}
.nav-primary a[aria-label="Accueil"] svg { stroke-width: 1.75; }

/* --- (5) Section .container > .eyebrow + h2 : spacing nettoyé --------- */
.section.container > .eyebrow,
.section > .container > .eyebrow {
  margin-bottom: var(--space-2);
}
.section.container > h2,
.section > .container > h2 {
  margin-top: 0;
  margin-bottom: var(--space-6);
  font-size: clamp(1.875rem, 2.5vw + 1rem, 2.5rem);
  line-height: 1.15;
}
.section.container > p,
.section > .container > p { margin-bottom: var(--space-4); }

/* --- (6) Bloc parcours Dr Bennai : alignement vertical centré --------- */
.section.container .grid-2 {
  align-items: start;
  gap: var(--space-12);
}
.section.container .grid-2 > .card,
.section.container .grid-2 > .card--accent {
  align-self: center;             /* centre verticalement le bloc Mentions ordinales */
  margin-top: 0;
}
/* Réduit l'espace dans le card--accent */
.card--accent ul { margin: 0; padding: 0; }
.card--accent ul li { margin-bottom: var(--space-2); }

/* --- (7) Transition douce entre sections blanches : bandeau beige 1cm --
   Ajoute une bande beige discrète (38px ≈ 1cm) entre deux sections fond
   blanc consécutives ou avant chaque section blanche après un fond sombre */
.section + .section { position: relative; }
.section + .section::before {
  content: "";
  display: block;
  height: 40px;
  margin-top: -40px;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
}
/* Cas inverse : transition vers section soft */
.section--soft { position: relative; }
.section--soft::before {
  content: "";
  position: absolute;
  top: -40px; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
  pointer-events: none;
}
/* Section dark (cta-band) — transition douce ivoire → charbon */
.cta-band { position: relative; }
.cta-band::before { display: none; }    /* override de l'ancien séparateur trait */
.cta-band {
  background-image: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-text) 50px);
  padding-top: calc(var(--space-16) + 50px);
}
/* Réassurance sauge — transition douce ivoire → sauge */
.reassurance {
  background-image: linear-gradient(180deg, var(--color-bg-soft) 0%, #4A5443 60px);
  padding-top: calc(var(--space-12) + 60px);
}

/* --- (8) Titres h2 dans cta-band et sections : taille augmentée ------- */
.cta-band h2 {
  font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}
#cabinets-title,
#articles-title,
#pourquoi-title,
#parcours-title,
#expertises-title {
  font-size: clamp(2rem, 3vw + 0.5rem, 2.5rem);
}

/* --- (9) Bouton Doctolib : fix display:inline-block sur ::before ------ */
.btn--doctolib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;                            /* l'espace est dans la margin-right de ::before */
  white-space: nowrap;
  overflow: visible;
}
.btn--doctolib::before {
  display: inline-block;             /* FIX critique : sans ça, l'icône ne se rend pas */
  flex-shrink: 0;
  vertical-align: middle;
}

/* CTA band : bouton centré avec icône inline-bloquée */
.cta-band a.btn,
.cta-band .btn {
  display: inline-flex !important;
  width: auto;
  white-space: nowrap;
}

/* --- (4) Notice Doctolib reformatée : meilleure lisibilité ------------ */
#doctolib-notice {
  line-height: 1.7;
  font-size: 0.875rem;
}
#doctolib-notice em { color: var(--color-text-muted); display: inline-block; margin-top: var(--space-1); }

/* --- Footer : ajout micro padding pour aération -------------------------- */
.site-footer { padding-top: var(--space-16); padding-bottom: var(--space-12); }
.site-footer__legal { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(240,237,227,0.15); }

/* ===============================================================
   FIX 8 BUGS COMPLÉMENTAIRES — 15 mai 2026 (V3 post-screenshots)
   =============================================================== */

/* --- (Bug 6) Override global svg{display:block} pour nav + boutons -------- */
.nav-primary svg,
.btn svg,
.btn-icon {
  display: inline-block !important;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-primary a[aria-label="Accueil"] svg {
  width: 20px;
  height: 20px;
}

/* --- (Bug 9/5/7) Bouton Doctolib : SVG inline + texte aligné ------------ */
.btn--doctolib {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow: visible;
}
.btn--doctolib::before { content: none !important; display: none !important; }
.btn--doctolib .btn-icon { color: #FFFFFF; stroke: #FFFFFF; }
.btn--doctolib { color: #FFFFFF !important; }

/* Header — bouton compact mais conserve l'icône */
.nav-primary > .btn--doctolib { height: 40px; padding: 0 18px; font-size: 0.8125rem; gap: 6px; }
.nav-primary > .btn--doctolib .btn-icon { width: 14px; height: 14px; }

/* --- (Bug 8) SUPPRIME tous les dégradés sur le site ---------------------- */
.section + .section::before,
.section--soft::before,
.cta-band::before,
.cta-band::after,
.reassurance::before,
.reassurance::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.cta-band { background-image: none !important; background: var(--color-text-muted) !important; padding-top: var(--space-16) !important; }
.reassurance { background-image: none !important; background: var(--color-text-muted) !important; padding-top: var(--space-12) !important; }

/* --- (Bug 5) CTA band : passe en sauge avec couleurs adaptées ----------- */
.cta-band {
  color: #F0EDE3;
  text-align: center;
}
.cta-band h2 { color: #FFFFFF; }
.cta-band p { color: #F0EDE3; }
.cta-band .eyebrow { color: #D4C5A8; }
.cta-band .btn--doctolib {
  background: #1565C0;
  color: #FFFFFF !important;
  border: 0;
}
.cta-band .btn--doctolib:hover,
.cta-band .btn--doctolib:focus-visible {
  background: #0D47A1;
  color: #FFFFFF !important;
}

/* --- (Bug 3) Validation médicale : width constraint container ----------- */
.medical-review {
  display: block;
  position: relative;
  max-width: var(--container-max);
  margin: var(--space-8) auto;
  padding: var(--space-4) var(--space-6) var(--space-4) calc(24px + var(--space-3) + var(--space-6));
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.875rem;
  line-height: 1.6;
  width: calc(100% - 2 * var(--space-4));
  box-sizing: border-box;
}
.medical-review__icon {
  position: absolute;
  left: var(--space-6);
  top: var(--space-4);
}

/* --- (Bug 4) Margin avant "Liens vers les pages pathologies" : resserre -- */
figure + h2,
.grid + h2,
.grid-2 + h2 { margin-top: var(--space-8); }
section > h2 + p { margin-top: var(--space-2); }
.section h2 { margin-top: var(--space-10); }
.section > h2:first-of-type,
.section > .container > h2:first-of-type { margin-top: 0; }

/* --- (Bug 1) Texte boutons RDV : blanc strict ---------------------------- */
.btn--doctolib,
.btn--doctolib:hover,
.btn--doctolib:focus-visible,
.btn--doctolib:active { color: #FFFFFF !important; }
.btn--doctolib .btn-icon { color: #FFFFFF !important; stroke: #FFFFFF !important; }

/* --- (Bug 2) Transitions section : pas de dégradé, séparateur fin sobre - */
.section--soft { border-top: 0; }
.section { border-top: 0; }
.cta-band, .reassurance { border-top: 1px solid rgba(0,0,0,0.06); }

/* --- Sécurité : si la classe ::before existait sur svg en footer -------- */
.site-footer svg { display: inline-block; }

/* --- Mobile : Doctolib bouton réajustement icône + texte ---------------- */
@media (max-width: 575px) {
  .btn--doctolib { gap: 8px; padding: 14px 20px; font-size: 0.8125rem; }
  .btn--doctolib .btn-icon { width: 16px; height: 16px; }
}

/* ===============================================================
   FIX 3 BUGS POST-DEPLOY V4 — 15 mai 2026
   =============================================================== */

/* --- (Bug 1) Breadcrumb : centrer horizontalement ---------------------- */
.breadcrumb {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}
.breadcrumb > .container { display: flex; justify-content: center; }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}
.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--color-accent);
  font-weight: 400;
}
.breadcrumb a { color: var(--color-accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li:last-child { color: var(--color-text); font-weight: 500; }

/* --- (Bug 2) Trop d'espace dans le hero des pages cabinets ------------- */
.section--hero { padding-block: var(--space-12) var(--space-8); }
.section--hero h1 { margin-top: var(--space-2); margin-bottom: var(--space-4); }
.section--hero .hero__lede { margin-bottom: var(--space-6); }
.section--hero + .section { padding-top: var(--space-12); }

/* Espace sous le hero split (accueil) */
.hero-split + * { margin-top: 0; }

/* --- (Bug 3) Home icon : toujours visible, jamais hidden -------------- */
.nav-primary a[aria-label="Accueil"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  background-color: transparent;
  transition: background-color 0.2s ease;
  text-decoration: none;
  visibility: visible !important;
  opacity: 1 !important;
}
.nav-primary a[aria-label="Accueil"] svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  color: var(--color-text);
}
.nav-primary a[aria-label="Accueil"]:hover svg,
.nav-primary a[aria-label="Accueil"]:focus-visible svg {
  color: var(--color-accent-strong);
}
.nav-primary a[aria-label="Accueil"]:hover,
.nav-primary a[aria-label="Accueil"]:focus-visible {
  background-color: var(--color-bg-soft);
}
.nav-primary a[aria-label="Accueil"]:active svg,
.nav-primary a[aria-label="Accueil"][aria-current="page"] svg {
  color: var(--color-doctolib, #1565C0);
}
/* Annule le ::after underline sur le home icon (pas pertinent pour une icône) */
.nav-primary a[aria-label="Accueil"]::after { display: none; }

/* ===============================================================
   FIX 2 CORRECTIONS COMPLÉMENTAIRES V5 — 15 mai 2026
   =============================================================== */

/* --- (A) Bouton CTA band : largeur auto, texte rentre entièrement ------- */
.cta-band .btn--doctolib {
  max-width: none !important;
  min-width: auto !important;
  width: auto !important;
  padding-inline: 28px;
  letter-spacing: 0.04em;          /* tracking légèrement réduit pour gagner ~5 % */
}
/* Header : compact, max-width plus serré OK car texte court "Prendre rendez-vous" */
.nav-primary > .btn--doctolib {
  max-width: none !important;
  letter-spacing: 0.03em;
}
/* Hero (page accueil + cabinets) : largeur naturelle aussi */
.hero-split__actions .btn--doctolib,
.hero__cta .btn--doctolib {
  max-width: none !important;
  min-width: auto !important;
}
/* Fallback global : tout bouton Doctolib peut grandir */
.btn--doctolib {
  width: auto;
  max-width: none;
  min-width: 0;
  padding-inline: 28px;
}

/* --- (B) Iframe OpenStreetMap remplacé par bloc adresse propre ---------- */
.map-fallback {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  margin: var(--space-6) 0;
}
.map-fallback__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  color: var(--color-accent-strong);
}
.map-fallback__address {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: var(--space-2);
  font-style: normal;
}
.map-fallback__hints {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.map-fallback__links {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.map-fallback__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.map-fallback__links a:hover,
.map-fallback__links a:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.map-fallback__links svg { width: 16px; height: 16px; flex-shrink: 0; }


/* ===============================================================
   SAFETY V6 — empêche tout overflow horizontal global
   =============================================================== */
html, body { overflow-x: hidden; max-width: 100vw; }
.site-header, .site-header__inner { max-width: 100%; }
.site-header__inner { flex-wrap: nowrap; gap: var(--space-4); }
.nav-primary ul { flex-wrap: nowrap; }
#doctolib-notice { max-width: 100%; word-wrap: break-word; overflow-wrap: anywhere; }