/* ==========================================================================
   Pr Evelyne Emery — Neurochirurgie · Deauville
   Feuille de style unique. Ordre : tokens, base, layout, en-tête, pied de
   page, puis les blocs propres à chaque page, puis les media queries.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Couleurs */
  --navy: #0d2438;
  --navy-soft: #123049;
  --primary: #17456f;
  --accent: #2a6bb0;
  --sky: #8fb3d4;
  --pale: #dbe7f2;
  --tint: #f4f8fc;
  --border: #e6ecf3;
  --surface: #eef2f7;
  --text: #3d4f61;
  --muted: #5c6f85;
  --muted-2: #8a9aab;
  --page: #ffffff;

  /* Sur fond sombre */
  --on-navy: rgba(255, 255, 255, .82);
  --on-navy-soft: rgba(255, 255, 255, .66);
  --on-navy-faint: rgba(255, 255, 255, .45);
  --rule-navy: rgba(255, 255, 255, .14);

  /* Typo */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Gabarit */
  --wrap: 1200px;
  --gutter: 40px;
  --header-h: 79px;
  --radius: 10px;
}

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

/* `hidden` doit l'emporter sur les `display` posés plus loin (les canvas des
   repères anatomiques sont en `display:block`, sinon les deux modèles se
   superposent). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 17px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--primary); }

h1, h2, h3 { margin: 0; font-family: var(--serif); color: var(--navy); font-weight: 300; letter-spacing: -.01em; }
p { margin: 0; }

::selection { background: var(--pale); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; border-radius: 0 0 7px 7px;
  background: var(--primary); color: #fff;
  font: 600 14px var(--sans);
  transition: top .18s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font: 600 12px var(--sans);
  color: var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--sky); }

.rule-list > * + * { border-top: 1px solid var(--border); }

/* Listes à filet vertical (« Notre méthode », « À apporter »…) */
.tick-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tick-list li {
  font: 400 13.5px/1.6 var(--sans);
  color: var(--text);
  padding-left: 12px;
  border-left: 2px solid var(--pale);
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 24px;
  border: 1.5px solid transparent;
  border-radius: 7px;
  font: 600 15px var(--sans);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--navy); color: #fff; }
.btn--outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn--outline:hover { background: var(--tint); color: var(--primary); }
.btn--soft { border-color: var(--primary); background: var(--tint); color: var(--primary); }
.btn--soft:hover { background: var(--pale); color: var(--primary); }
.btn--sm { padding: 12px 18px; font-size: 13.5px; }

/* Variantes sur fond sombre */
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--pale); color: var(--navy); }
.btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--ghost-fill { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #fff; }
.btn--ghost-fill:hover { border-color: #fff; background: rgba(255, 255, 255, .16); color: #fff; }

.link-arrow { font: 600 14px var(--sans); color: var(--accent); white-space: nowrap; }
.link-arrow--light { color: var(--sky); }
.link-arrow--light:hover { color: #fff; }

/* --- En-tête ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand__name { font: 600 17px var(--serif); color: var(--navy); letter-spacing: .01em; }
.brand__role {
  font: 500 11px var(--sans); color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.brand:hover .brand__name { color: var(--navy); }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav__link {
  font: 500 14px var(--sans);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.site-nav__link:hover { color: var(--navy); }
.site-nav__link.is-current { color: var(--navy); border-bottom-color: var(--primary); }

.lang { display: flex; align-items: center; gap: 6px; font: 500 12px var(--sans); color: var(--muted); }
.lang__sep { opacity: .4; }
.lang__btn {
  padding: 4px 2px; border: 0; background: transparent;
  font: 500 12px var(--sans); color: var(--muted);
  cursor: pointer; border-bottom: 1.5px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.lang__btn:hover { color: var(--navy); }
.lang__btn[aria-pressed="true"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--primary); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span { width: 16px; height: 1.5px; background: var(--navy); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Barre de progression de lecture */
.progress-track { height: 2px; background: #eef2f7; }
.progress-bar {
  height: 2px; background: var(--primary);
  transform-origin: left; transform: scaleX(0);
}

/* --- Pied de page ------------------------------------------------------- */
.site-footer { background: var(--navy); padding: 40px 0; }
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.site-footer__text { font: 400 13px/1.6 var(--sans); color: rgba(255, 255, 255, .5); }
.site-footer__links { display: flex; gap: 22px; font: 400 13px var(--sans); }
.site-footer__links a { color: rgba(255, 255, 255, .6); }
.site-footer__links a:hover { color: #fff; }

/* Barre d'action collante (mobile) */
.action-bar { display: none; }

/* ==========================================================================
   Accueil
   ========================================================================== */

/* --- Héros -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(800px, calc(100vh - var(--header-h)));
  background: var(--navy);
  overflow: hidden;
  display: flex; align-items: center;
}
.hero__art { position: absolute; inset: 0; transform-origin: 50% 45%; will-change: transform, opacity; }
.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 74% 38%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13, 36, 56, .96) 26%, rgba(13, 36, 56, .62) 58%, rgba(13, 36, 56, .2) 88%);
}
.hero__mesh { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero__body { position: relative; width: 100%; padding-top: 64px; padding-bottom: 64px; will-change: transform, opacity; }
.hero__content { max-width: 620px; display: flex; flex-direction: column; gap: 22px; }
.hero__eyebrow { font: 600 12px var(--sans); color: var(--sky); letter-spacing: .16em; text-transform: uppercase; }
.hero__title {
  font: 300 clamp(34px, 4.4vw, 64px)/1.06 var(--serif);
  color: #fff; letter-spacing: -.015em;
}
.hero__lede { font: 400 18px/1.65 var(--sans); color: rgba(255, 255, 255, .78); max-width: 520px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.hero__place { font: 400 13px var(--sans); color: rgba(255, 255, 255, .55); }

/* Éléments réservés à la mise en page mobile */
.hero__hours,
.closing,
.bio__aside-text,
.patho-main__mesh,
[data-region-acc] { display: none; }

/* --- Chiffres clés ------------------------------------------------------ */
.stats { border-bottom: 1px solid var(--border); }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  padding-top: 34px; padding-bottom: 34px;
}
.stat { display: flex; flex-direction: column; gap: 5px; }
.stat__value { font: 400 40px/1 var(--serif); color: var(--primary); }
.stat__label { font: 400 13px/1.5 var(--sans); color: var(--muted); }

/* --- Parcours ----------------------------------------------------------- */
.bio {
  display: grid; grid-template-columns: 380px 1fr; gap: 64px;
  align-items: start;
  padding-top: 80px; padding-bottom: 80px;
}
.bio__portrait {
  width: 100%; height: 480px;
  object-fit: cover; object-position: 50% 18%;
  border-radius: 8px; background: var(--surface);
}
.bio__text { display: flex; flex-direction: column; gap: 26px; }
.bio__title { font-size: 40px; line-height: 1.2; max-width: 660px; }
.bio__text p { font: 400 17px/1.75 var(--sans); color: var(--text); max-width: 700px; }

/* --- Régions du rachis (bloc sombre) ------------------------------------ */
.regions { background: var(--navy); padding: 78px 0; }
.regions__inner { display: flex; flex-direction: column; gap: 34px; }
.regions__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.regions__heading { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.regions__heading h2 { font-size: 38px; line-height: 1.2; color: #fff; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 11px 18px; border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  background: transparent; color: rgba(255, 255, 255, .85);
  font: 600 13.5px var(--sans); cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
.chip[aria-selected="true"] { border-color: #fff; background: #fff; color: var(--navy); }

.regions__body { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: stretch; }
.mesh-panel {
  position: relative; min-height: 420px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
}
.mesh-panel canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.mesh-panel__caption {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  font: 400 12px/1.6 var(--sans); color: var(--on-navy-faint);
}
.regions__detail { display: flex; flex-direction: column; gap: 14px; }
.regions__intro { font: 400 17px/1.7 var(--sans); color: rgba(255, 255, 255, .72); max-width: 640px; }
.patho-brief {
  border-top: 1px solid var(--rule-navy);
  padding: 18px 0 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.patho-brief__name { font: 500 20px var(--serif); color: #fff; }
.patho-brief__text { font: 400 14.5px/1.7 var(--sans); color: rgba(255, 255, 255, .6); max-width: 620px; }

/* --- Pathologies cérébrales --------------------------------------------- */
.brain-block {
  background: var(--navy-soft);
  padding: 70px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.brain-block__inner { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: center; }
.brain-block__text { display: flex; flex-direction: column; gap: 26px; }
.brain-block__heading { display: flex; flex-direction: column; gap: 14px; }
.brain-block__heading h2 { font-size: 34px; line-height: 1.25; color: #fff; max-width: 620px; }
.brain-block__heading p { font: 400 16px/1.7 var(--sans); color: var(--on-navy-soft); max-width: 620px; }
.brain-block__note { font: 400 15px/1.7 var(--sans); color: rgba(255, 255, 255, .6); max-width: 620px; }

.domain-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px;
  margin: 0; padding: 0; list-style: none;
}
.domain-grid li {
  border-top: 1px solid var(--rule-navy);
  padding-top: 14px;
  font: 400 15px/1.6 var(--sans); color: var(--on-navy);
}

.brain-block__aside { display: flex; flex-direction: column; gap: 12px; }
.brain-block__canvas { position: relative; height: 340px; }
.brain-block__canvas canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.brain-block__caption { font: 400 12.5px/1.6 var(--sans); color: rgba(255, 255, 255, .42); }

/* --- Carrousel bloc opératoire ------------------------------------------ */
.gallery { padding-top: 74px; padding-bottom: 74px; display: flex; flex-direction: column; gap: 24px; }
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gallery__heading { display: flex; flex-direction: column; gap: 12px; }
.gallery__heading h2 { font-size: 34px; line-height: 1.2; }
.gallery__nav { display: flex; gap: 10px; }
.gallery__btn {
  width: 42px; height: 42px; padding: 0;
  border: 1px solid #cbd5e0; border-radius: 50%;
  background: transparent; color: var(--primary);
  font: 400 16px var(--sans); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, background .18s ease;
}
.gallery__btn:hover { border-color: var(--primary); background: var(--tint); }
.gallery__btn[disabled] { opacity: .35; cursor: default; }
.gallery__btn[disabled]:hover { border-color: #cbd5e0; background: transparent; }

.gallery__track {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track figure { flex: none; margin: 0; scroll-snap-align: start; }
.gallery__track img {
  width: 520px; height: 330px;
  object-fit: cover; border-radius: 8px;
  background: var(--surface);
}
.gallery__dots { display: flex; gap: 7px; }
.gallery__dot { width: 26px; height: 3px; border-radius: 2px; background: var(--pale); border: 0; padding: 0; cursor: pointer; }
.gallery__dot.is-active { background: var(--primary); }

/* ==========================================================================
   Pathologies & interventions
   ========================================================================== */
.page-head { background: var(--tint); border-bottom: 1px solid var(--border); }
.page-head__inner { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 18px; }
.page-head h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.15; max-width: 820px; }
.page-head p { font: 400 17px/1.7 var(--sans); color: var(--text); max-width: 760px; }

.patho-layout {
  display: grid; grid-template-columns: 250px 1fr 300px;
  max-width: var(--wrap); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* Colonne de gauche */
.patho-aside {
  border-right: 1px solid var(--border);
  padding: 40px 32px 60px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.aside-title {
  font: 600 11px var(--sans); color: var(--muted-2);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px;
}
.region-nav {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  padding: 13px 15px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text);
  font: 600 14px var(--sans); text-align: left; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.region-nav:hover { background: var(--tint); }
.region-nav[aria-selected="true"] { background: var(--primary); color: #fff; }
.region-nav[aria-selected="true"]:hover { background: var(--primary); }

.fiches { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.fiches a { font: 400 13.5px/1.5 var(--sans); }

/* Colonne centrale */
.patho-main { padding: 40px 44px 60px; display: flex; flex-direction: column; gap: 26px; }
.patho-main__head { display: flex; flex-direction: column; gap: 14px; }
.patho-main__head h2 { font: 400 32px/1.2 var(--serif); }
.patho-main__head p { font: 400 16.5px/1.75 var(--sans); color: var(--text); max-width: 620px; }

.patho-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff;
  transition: border-color .18s ease;
}
.patho-card.is-open { border-color: var(--primary); }
.patho-card__toggle {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 22px 24px; border: 0; background: #fff;
  text-align: left; cursor: pointer;
  font: inherit;
  transition: background .18s ease;
}
.patho-card.is-open .patho-card__toggle { background: var(--tint); }
.patho-card__toggle:hover { background: var(--tint); }
.patho-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.patho-card__name { font: 500 22px/1.3 var(--serif); color: var(--navy); }
.patho-card__sign { font: 300 22px var(--sans); color: var(--muted); }
.patho-card__summary { font: 400 15px/1.75 var(--sans); color: var(--text); white-space: pre-line; }

.patho-card__panel {
  padding: 4px 24px 24px;
  display: flex; flex-direction: column; gap: 20px;
  border-top: 1px solid var(--border);
}
.patho-card__panel[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font: 600 11px var(--sans); color: var(--accent);
  letter-spacing: .14em; text-transform: uppercase;
}
.field__value { font: 400 15px/1.8 var(--sans); color: var(--text); white-space: pre-line; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field-pair .field__value { font-size: 14.5px; line-height: 1.75; }

.patho-card__foot {
  border-top: 1px solid var(--border); padding-top: 18px;
}
.patho-card__meta { display: flex; flex-direction: column; gap: 7px; }
.patho-note {
  font: 400 12.5px/1.6 var(--sans); color: var(--muted-2);
  margin-top: 4px;
}

.factors {
  margin-top: 14px;
  border: 1px solid var(--pale); border-radius: var(--radius);
  background: var(--tint); padding: 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.factors h3 { font: 500 20px var(--serif); }
.factors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.factor { display: flex; flex-direction: column; gap: 5px; }
.factor__name { font: 600 13.5px var(--sans); color: var(--primary); }
.factor__text { font: 400 13.5px/1.7 var(--sans); color: var(--text); }

/* Colonne de droite */
.patho-side {
  border-left: 1px solid var(--border);
  padding: 40px 0 60px 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.side-mesh {
  border-radius: var(--radius); background: var(--navy);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.side-mesh__canvas { position: relative; height: 260px; }
.side-mesh__canvas canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.side-mesh__caption { font: 400 12px/1.6 var(--sans); color: var(--on-navy-faint); }

.side-cta {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border); padding-top: 22px;
}
.side-cta h3 { font: 500 18px/1.35 var(--serif); }
.side-cta p { font: 400 13.5px/1.7 var(--sans); color: var(--muted); }
.side-cta .btn { width: 100%; }
.side-cta__phone { font: 400 13px var(--sans); color: var(--muted); text-align: center; }

/* ==========================================================================
   Consultation & contact
   ========================================================================== */
.contact-head { background: var(--navy); }
.contact-head__inner { padding-top: 56px; display: flex; flex-direction: column; gap: 20px; }
.contact-head h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.15; color: #fff; max-width: 760px; }
.contact-head p { font: 400 17px/1.7 var(--sans); color: var(--on-navy-soft); max-width: 640px; }

.tabs { display: flex; gap: 0; margin-top: 12px; flex-wrap: wrap; }
.tab {
  padding: 16px 26px; border: 0; background: transparent;
  border-bottom: 2px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .55);
  font: 600 15px var(--sans); cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.tab:hover { color: rgba(255, 255, 255, .8); }
.tab[aria-selected="true"] { color: #fff; border-bottom-color: #fff; }

.tabpanel[hidden] { display: none; }

/* Étapes numérotées */
.steps { display: flex; flex-direction: column; gap: 34px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step + .step { border-top: 1px solid var(--border); padding-top: 34px; }
.step__num {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--primary); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font: 500 18px var(--serif);
}
.step__num--filled { background: var(--primary); color: #fff; }
.step__body { display: flex; flex-direction: column; gap: 14px; }
.step__title { font: 500 24px var(--serif); color: var(--navy); }
.step__text { font: 400 15.5px/1.75 var(--sans); color: var(--text); }
.step__quote { font: 400 16px/1.65 var(--serif); font-style: italic; color: var(--primary); }
.step__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.step__note { font: 400 14px/1.7 var(--sans); color: var(--muted); max-width: 520px; }

/* --- Voies de prise de rendez-vous (page consultation) -------------------
   Trois cartes de meme poids visuel : aucune n'est mise en avant par le
   style. Le patient choisit sur le contenu, pas sur la couleur du bouton.
   La colonne .steps ne fait que la moitie de la page : les cartes sont
   donc empilees, jamais cote a cote.                                      */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.route {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--page); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 24px 22px;
}
.route__kind {
  font: 500 11px/1 var(--sans); letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.route__name { font: 400 21px/1.25 var(--serif); color: var(--navy); }
.route__badge {
  font: 500 10.5px/1.5 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--primary); background: var(--pale);
  border-radius: 999px; padding: 8px 14px; align-self: flex-start;
}
.route__facts { display: flex; flex-direction: column; margin: 0; }
.route__facts dt {
  font: 500 11px/1.6 var(--sans); letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 14px;
}
.route__facts dt:first-of-type { margin-top: 4px; }
.route__facts dd { font: 400 14.5px/1.7 var(--sans); color: var(--text); margin: 0; }
/* margin-top:auto aligne les trois boutons sur une meme ligne, quelle que
   soit la longueur des textes au-dessus. */
.route .btn { margin-top: 22px; width: 100%; padding-top: 14px; padding-bottom: 14px; }
.routes .route .btn { margin-top: auto; }


.callout {
  border: 1px solid var(--sky); background: var(--tint);
  border-radius: 8px; padding: 16px 18px; max-width: 540px;
  display: flex; flex-direction: column; gap: 5px;
}
.callout p { font: 400 14px/1.7 var(--sans); color: var(--text); }
.callout p.callout__title { font: 600 14px/1.7 var(--sans); color: var(--primary); }

.notice {
  border: 1.5px solid var(--primary); border-radius: var(--radius);
  background: var(--tint); padding: 24px 26px;
  display: flex; gap: 18px; align-items: flex-start;
}
.notice__mark { font: 500 22px var(--serif); color: var(--primary); flex: none; }
.notice__body { display: flex; flex-direction: column; gap: 7px; }
.notice__title { font: 600 15px var(--sans); color: var(--primary); }
.notice__text { font: 400 15px/1.7 var(--sans); color: var(--text); }

/* Documents à préparer */
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.docs li {
  border: 1px solid var(--pale); border-radius: 7px; padding: 14px;
  font: 400 14px/1.5 var(--sans); color: var(--text);
}
.docs li.docs__required {
  grid-column: 1 / -1;
  border: 1.5px solid var(--primary); background: var(--navy);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 5px;
}
.docs__required strong { font: 600 14px var(--sans); color: #fff; }
.docs__required span { font: 400 13px/1.6 var(--sans); color: rgba(255, 255, 255, .72); }

/* Colonne pratique */
.consult-body { padding-top: 64px; padding-bottom: 64px; }
/* Les etapes occupent toute la largeur : le texte courant reste borne pour
   rester lisible, seules les cartes s etendent. */
.consult-body .step__text,
.consult-body .step__note,
.consult-body .docs,
.consult-body .callout { max-width: 780px; }

/* --- Acces et coordonnees, en fin d onglet consultation --- */
.access { border-top: 1px solid var(--border); }
.access__inner { padding-top: 52px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.access__heading { display: flex; flex-direction: column; gap: 8px; }
.access__heading h2 { font-size: 30px; line-height: 1.25; max-width: 660px; }
.access__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }

.map {
  height: 360px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--pale);
  position: relative; overflow: hidden;
}
.map--sm { height: 300px; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

.facts { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.fact { display: flex; gap: 18px; }
.fact + .fact { border-top: 1px solid var(--border); padding-top: 16px; }
.fact__label {
  font: 600 11.5px var(--sans); color: var(--muted);
  width: 96px; flex: none; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px;
}
.fact__value { font: 400 14.5px/1.65 var(--sans); color: var(--text); margin: 0; }
.fact__value a { color: var(--primary); }
.facts__urgency {
  border-top: 1px solid var(--border); padding-top: 16px;
  font: 400 13.5px/1.7 var(--sans); color: var(--muted-2);
}

/* Notre méthode */
.method { background: var(--tint); border-top: 1px solid var(--border); }
.method__inner { padding-top: 52px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 30px; }
.method__heading { display: flex; flex-direction: column; gap: 8px; max-width: 660px; }
.method__heading h2 { font-size: 30px; line-height: 1.25; }
.method__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.method-col { display: flex; flex-direction: column; gap: 12px; }
.method-col__head { display: flex; align-items: center; gap: 11px; }
.method-col__num {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--primary); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font: 500 13px var(--serif);
}
.method-col__title { font: 500 19px var(--serif); color: var(--navy); }
.method-col__intro { font: 400 14px/1.7 var(--sans); color: var(--muted); }

/* Fiche « à apporter » */
.card-box {
  border: 1px solid var(--pale); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.card-box h3 { font: 500 19px var(--serif); }
.card-box .tick-list li { font-size: 14px; padding-left: 14px; }

.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.op-panel__inner { padding-top: 44px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 34px; }
.op-aside { display: flex; flex-direction: column; gap: 18px; }

/* ==========================================================================
   Media queries
   ========================================================================== */

/* --- Tablette ----------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --gutter: 28px; }

  .patho-layout { grid-template-columns: 220px 1fr; }
  .patho-side {
    grid-column: 1 / -1;
    border-left: 0; border-top: 1px solid var(--border);
    padding: 32px 0 60px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
  }
  .side-cta { border-top: 0; padding-top: 0; }

  .bio { grid-template-columns: 300px 1fr; gap: 40px; }
  .regions__body { grid-template-columns: 240px 1fr; gap: 34px; }
  .brain-block__inner { grid-template-columns: 1fr 260px; gap: 34px; }
  .access__grid { gap: 32px; }
  .op-grid { gap: 40px; }
  .method__grid { gap: 28px; }
}

/* --- Mobile ------------------------------------------------------------- */
/* En dessous de 880px, trois colonnes donnent des cartes de moins de
   220px : le texte se casse et les boutons passent sur trois lignes.
   On empile plutot. */
@media (max-width: 880px) {
  .routes { grid-template-columns: 1fr; gap: 18px; }
  .access__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --header-h: 65px; }

  body { font-size: 15px; }

  /* En-tête : menu déroulant */
  .site-header__inner { padding-top: 14px; padding-bottom: 14px; }
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 18px;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 24px rgba(13, 36, 56, .08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__link {
    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px;
  }
  .site-nav__link.is-current { border-bottom-color: var(--border); color: var(--primary); }
  .lang { padding-top: 14px; }
  .site-nav .btn { margin-top: 12px; }

  /* Héros : dégradé vertical, texte en bas, actions en pleine largeur */
  .hero { min-height: 0; display: block; }
  .hero__art { position: relative; height: 380px; }
  .hero__photo { object-position: 76% 36%; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(13, 36, 56, .3) 0 26%, rgba(13, 36, 56, .88) 62%, var(--navy));
  }
  .hero__mesh { display: none; }
  .hero__body {
    position: relative; margin-top: -140px;
    padding-top: 0; padding-bottom: 22px;
  }
  .hero__content { gap: 14px; max-width: none; }
  .hero__title { font-size: 31px; line-height: 1.14; }
  .hero__lede { font-size: 13.5px; line-height: 1.65; max-width: none; }
  .hero__place { font-size: 14px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px; }
  .hero__actions .btn { width: 100%; min-height: 52px; padding: 12px 18px; }
  .hero__hours {
    display: block;
    font: 400 12.5px/1.6 var(--sans); color: rgba(255, 255, 255, .5); text-align: center;
  }
  .hero-wrapper { background: var(--navy); }

  /* Chiffres clés : 2 colonnes */
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 26px; padding-bottom: 26px; }
  .stat__value { font-size: 27px; }
  .stat__label { font-size: 12.5px; }

  /* Parcours */
  .bio { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; padding-bottom: 28px; }
  .bio__portrait { width: 104px; height: 132px; border-radius: 8px; }
  .bio__aside { display: flex; gap: 16px; align-items: flex-start; }
  .bio__aside-text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
  .bio__aside-name { font: 500 19px/1.3 var(--serif); color: var(--navy); }
  .bio__aside-role { font: 400 12.5px/1.6 var(--sans); color: var(--muted); }
  .bio__text { gap: 16px; }
  .bio__title { font-size: 25px; }
  .bio__text p { font-size: 15px; line-height: 1.75; }

  /* Régions : accordéon */
  .regions { padding: 26px 0; }
  .regions__inner { gap: 16px; }
  .regions__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .regions__heading h2 { font-size: 25px; }
  .regions__body { grid-template-columns: 1fr; gap: 16px; }
  .mesh-panel { min-height: 150px; height: 150px; overflow: hidden; }
  .mesh-panel__caption { display: none; }
  .chips { display: none; }

  [data-region-acc] { display: block; }

  .region-acc {
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 11px; overflow: hidden;
  }
  .region-acc + .region-acc { margin-top: 10px; }
  .region-acc.is-open { border-color: #fff; }
  .region-acc__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 48px; padding: 14px 16px;
    border: 0; background: transparent; cursor: pointer;
    font: 600 14.5px var(--sans); color: rgba(255, 255, 255, .82); text-align: left;
  }
  .region-acc.is-open .region-acc__toggle { color: #fff; }
  .region-acc__sign { font: 300 18px var(--sans); color: rgba(255, 255, 255, .5); }
  .region-acc__panel { padding: 0 16px 15px; display: flex; flex-direction: column; gap: 9px; }
  .region-acc__panel[hidden] { display: none; }
  .region-acc__item {
    padding-left: 13px; border-left: 2px solid rgba(255, 255, 255, .28);
    display: flex; flex-direction: column; gap: 3px;
  }
  .region-acc__name { font: 500 15px var(--serif); color: #fff; }
  .region-acc__short { font: 400 12.5px/1.6 var(--sans); color: rgba(255, 255, 255, .58); white-space: pre-line; }

  .regions__detail { display: none; }

  /* Pathologies cérébrales */
  .brain-block { padding: 26px 0; }
  .brain-block__inner { grid-template-columns: 1fr; gap: 16px; }
  .brain-block__text { gap: 16px; }
  .brain-block__heading h2 { font-size: 25px; }
  .brain-block__heading p { font-size: 13.5px; }
  .brain-block__aside { order: -1; }
  .brain-block__canvas { height: 150px; border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, .03); }
  .brain-block__caption { display: none; }
  .domain-grid { grid-template-columns: 1fr; gap: 0; }
  .domain-grid li { padding: 13px 2px; font-size: 14.5px; }
  .brain-block__note { font-size: 13px; }

  /* Carrousel */
  .gallery { padding-top: 26px; padding-bottom: 26px; gap: 14px; }
  .gallery__head { align-items: flex-start; }
  .gallery__heading h2 { font-size: 22px; }
  .gallery__nav { display: none; }
  .gallery__track { gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
  .gallery__track figure { scroll-snap-align: center; }
  .gallery__track img { width: 270px; height: 180px; border-radius: 11px; }
  .gallery__dots { justify-content: center; gap: 6px; }
  .gallery__dot { width: 20px; }

  /* Bandeau de rappel */
  .closing { display: block; background: var(--tint); border-top: 1px solid var(--border); }
  .closing__inner { padding: 26px 0; display: flex; flex-direction: column; gap: 10px; }
  .closing h2 { font: 500 20px var(--serif); }
  .closing p { font: 400 13.5px/1.7 var(--sans); color: var(--muted); }

  /* Pathologies : une colonne */
  .page-head__inner { padding-top: 26px; padding-bottom: 26px; gap: 12px; }
  .page-head h1 { font-size: 27px; line-height: 1.2; }
  .page-head p { font-size: 14.5px; }

  .patho-layout { grid-template-columns: 1fr; }
  .patho-aside {
    border-right: 0; padding: 0;
    position: sticky; top: var(--header-h); z-index: 9;
    background: #fff; border-bottom: 1px solid var(--border);
    margin: 0 calc(-1 * var(--gutter));
    padding: 12px var(--gutter);
    flex-direction: row; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
  }
  .patho-aside::-webkit-scrollbar { display: none; }
  .patho-aside .aside-title, .patho-aside .fiches { display: none; }
  .region-nav {
    flex: none; width: auto; min-height: 42px; align-items: center;
    padding: 0 16px; border-radius: 21px;
    border: 1.5px solid var(--pale); background: #fff; color: var(--muted);
    font-size: 13px;
  }
  .region-nav[aria-selected="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }

  .patho-main { padding: 22px 0 28px; gap: 16px; }
  /* Titre et repere anatomique sur une premiere ligne, chapeau sur la
     suivante. Sans flex-wrap, les quatre enfants tenaient sur une seule
     ligne : le chapeau gardait sa largeur et le titre etait comprime a
     zero pixel, son texte debordant de sa boite. */
  .patho-main__head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .patho-main__head h2 { font: 400 24px/1.25 var(--serif); flex: 1 1 auto; min-width: 0; }
  .patho-main__head p { font-size: 14.5px; flex: 1 0 100%; }
  .patho-main__mesh {
    display: block;
    width: 80px; height: 62px; flex: none; border-radius: 8px;
    overflow: hidden; background: var(--navy); position: relative;
  }
  .patho-main__mesh[hidden] { display: none; }
  .patho-main__mesh canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }

  .patho-card { border-radius: 12px; }
  .patho-card__toggle { padding: 16px; gap: 8px; }
  .patho-card__name { font-size: 18px; }
  .patho-card__sign { font-size: 19px; }
  .patho-card__summary { font-size: 13.5px; line-height: 1.7; }
  .patho-card__panel { padding: 16px; gap: 14px; }
  .field__value { font-size: 13.5px; line-height: 1.75; }
  .field-pair { grid-template-columns: 1fr; gap: 14px; }
  .patho-card__foot { flex-direction: column; align-items: stretch; }

  .factors { padding: 18px; }
  .factors__grid { grid-template-columns: 1fr; gap: 14px; }

  .patho-side { grid-template-columns: 1fr; padding: 22px 0 28px; gap: 18px; }
  .side-mesh__canvas { height: 180px; }

  /* Contact */
  .contact-head__inner { padding-top: 26px; gap: 14px; }
  .contact-head h1 { font-size: 27px; }
  .contact-head p { font-size: 14px; }
  .tabs { margin: 12px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 14px 16px; font-size: 13.5px; }

  .consult-body { padding-top: 26px; padding-bottom: 26px; }
  .access__inner { padding-top: 32px; padding-bottom: 36px; gap: 22px; }
  .access__grid { grid-template-columns: 1fr; gap: 26px; }
  .steps { gap: 22px; }
  .step { gap: 14px; }
  .step + .step { padding-top: 22px; }
  .step__num { width: 36px; height: 36px; font-size: 15px; }
  .step__title { font-size: 20px; }
  .step__text { font-size: 14.5px; }
  .step__actions .btn { width: 100%; }
  .routes { grid-template-columns: 1fr; gap: 16px; }
  .docs { grid-template-columns: 1fr; }
  .map, .map--sm { height: 220px; }
  .fact__label { width: 74px; font-size: 10.5px; }
  .fact__value { font-size: 13.5px; }

  .method__inner { padding-top: 26px; padding-bottom: 26px; gap: 16px; }
  .method__heading h2 { font-size: 22px; }
  .method__grid { grid-template-columns: 1fr; gap: 0; }
  .method-col { border-top: 1px solid var(--border); padding-top: 13px; gap: 8px; }
  .method-col:first-child { border-top: 0; padding-top: 0; }
  .method-col__title { font-size: 15px; }
  .method-col__intro { font-size: 12.5px; line-height: 1.65; }
  .method-col .tick-list li { font-size: 12.5px; padding-left: 11px; }

  .op-grid { grid-template-columns: 1fr; gap: 26px; }
  .op-panel__inner { padding-top: 26px; padding-bottom: 28px; gap: 22px; }
  .notice { padding: 16px 18px; gap: 12px; }

  /* Pied de page */
  .site-footer { padding: 26px 0 84px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Barre d'action collante */
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; gap: 10px;
    padding: 12px var(--gutter);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
  }
  .action-bar .btn { flex: 1; min-height: 48px; padding: 10px 14px; font-size: 14px; }
  .action-bar .btn--icon { flex: none; width: 48px; font-size: 17px; }
}

/* --- Impression --------------------------------------------------------- */
@media print {
  .site-header, .action-bar, .gallery__nav, .hero__mesh, .mesh-panel, .side-mesh, .map { display: none !important; }
  body { font-size: 11pt; }
  .patho-card__panel[hidden] { display: flex !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* --- Mouvement réduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .hero__art, .hero__body { transform: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   Questionnaire de pré-consultation
   ========================================================================== */
.q-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 56px;
  align-items: start;
  padding-top: 48px; padding-bottom: 64px;
}

.q-form { display: flex; flex-direction: column; gap: 34px; }
/* Les sections sont dans un conteneur intermédiaire : sans cela, le gap du
   formulaire ne s'applique qu'à ses enfants directs et les titres de section
   viennent buter sur le champ précédent. */
[data-form-sections] { display: flex; flex-direction: column; gap: 34px; }

.q-section { display: flex; flex-direction: column; gap: 16px; }
.q-section__title {
  font: 500 20px var(--serif); color: var(--navy);
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.q-section__note { font: 400 13.5px/1.7 var(--sans); color: var(--muted); }

.q-fields { display: flex; flex-direction: column; gap: 18px; }
.q-fields--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.q-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.q-field--full { grid-column: 1 / -1; }

.q-label { font: 600 13px/1.5 var(--sans); color: var(--primary); }
.q-hint { font-weight: 400; color: var(--muted-2); }

.q-field input[type="text"], .q-field input[type="tel"],
.q-field input[type="email"], .q-field textarea, .q-other {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--pale); border-radius: 7px;
  background: #fff; color: var(--text);
  font: 400 15px/1.5 var(--sans);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.q-field input:focus, .q-field textarea:focus, .q-other:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 69, 111, .12);
}
.q-field textarea { resize: vertical; min-height: 76px; }
.q-other { margin-top: 8px; }

.q-choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.q-choices--stacked { flex-direction: column; gap: 8px; }
.q-choices--inline { gap: 18px; }
.q-choice, .q-check {
  display: flex; align-items: flex-start; gap: 8px;
  font: 400 14.5px/1.5 var(--sans); color: var(--text);
  cursor: pointer;
}
.q-choice input, .q-check input { margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.q-check { padding: 9px 0; border-top: 1px solid var(--border); }
.q-check:first-child { border-top: 0; }

.q-field.is-invalid input, .q-field.is-invalid textarea { border-color: #b3261e; }
.q-field.is-invalid .q-label { color: #b3261e; }

.q-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.q-status { font: 400 14px/1.6 var(--sans); color: var(--muted); min-height: 1.6em; }
.q-status--error { color: #b3261e; }
.q-status--ok { color: #1b5e20; }

.q-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--header-h) + 20px); }
.q-privacy {
  border: 1px solid var(--sky); background: var(--tint);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.q-privacy h2 { font: 500 17px/1.35 var(--serif); }
.q-privacy p { font: 400 13.5px/1.7 var(--sans); color: var(--text); }
.q-privacy__note { color: var(--muted); }

.q-steps {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.q-steps h2 { font: 500 17px var(--serif); }
.q-steps__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.q-steps__list li { font: 400 13.5px/1.6 var(--sans); color: var(--text); }
.q-paper {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.q-paper h2 { font: 500 17px var(--serif); }
.q-paper p { font: 400 13.5px/1.7 var(--sans); color: var(--text); }
.q-paper .btn { align-self: flex-start; }

.q-steps__contact {
  border-top: 1px solid var(--border); padding-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
  font: 400 13px/1.6 var(--sans); color: var(--muted);
  word-break: break-word;
}

@media (max-width: 1080px) {
  .q-layout { grid-template-columns: 1fr 280px; gap: 32px; }
}

@media (max-width: 767px) {
  .q-layout { grid-template-columns: 1fr; gap: 26px; padding-top: 26px; padding-bottom: 32px; }
  .q-aside { position: static; order: -1; }
  .q-fields--grid { grid-template-columns: 1fr; }
  .q-section__title { font-size: 18px; }
  .q-actions .btn { width: 100%; }
  .q-paper .btn { width: 100%; }
}


/* --- Questionnaire : bandeaux, encadrés, cases ---------------------------- */
.q-band {
  display: block;
  margin: 0; padding: 9px 12px;
  background: var(--navy); color: #fff;
  font: 600 12.5px/1.4 var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 4px;
}
.q-band__num { opacity: .7; }
.q-band--sub {
  background: #123049;
  font-size: 11px; letter-spacing: .1em;
  padding: 7px 12px;
}

.q-notice {
  border: 1px solid var(--pale); border-radius: 8px;
  background: var(--tint); padding: 14px 16px;
  font: 400 13.5px/1.7 var(--sans); color: var(--text);
}

.q-box {
  border: 1px solid var(--pale); border-radius: 8px;
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
}
.q-box__title { font: 600 12.5px/1.5 var(--sans); color: var(--primary); margin: 0; }

.q-field--boxed {
  border: 1px solid var(--pale); border-radius: 8px;
  background: var(--tint); padding: 14px 16px;
}
.q-field--boxed .q-label { color: var(--primary); }

.q-fields--checks { gap: 10px 24px; }
.q-fields--checks .q-check { border-top: 0; padding: 0; }
.q-field--check { grid-column: auto; }
.q-field--check.q-field--full { grid-column: 1 / -1; }
.q-field--check.is-invalid .q-check { color: #b3261e; }
.q-field--check.is-invalid input { outline: 2px solid #b3261e; outline-offset: 2px; }

.btn.is-armed { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn.is-armed:hover { background: #8c1d17; border-color: #8c1d17; color: #fff; }

@media (max-width: 767px) {
  .q-band { font-size: 11px; padding: 8px 10px; }
  .q-band--sub { font-size: 10px; }
  .q-fields--checks { grid-template-columns: 1fr; }
}

/* Référence bibliographique : pas un lien, juste une citation */
.fiches__ref {
  font: 400 13px/1.5 var(--sans); color: var(--muted); font-style: italic;
}

/* Mise en avant dans un paragraphe (remplace un style= inline, pour une CSP stricte) */
.hl { color: var(--primary); }

/* --- Page 404 ------------------------------------------------------------ */
.notfound { display: flex; align-items: center; min-height: 60vh; }
.notfound__inner { display: flex; flex-direction: column; gap: 18px; padding: 72px 0; max-width: 720px; }
.notfound h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.2; }
.notfound__lede { font: 400 17px/1.7 var(--sans); color: var(--text); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

@media (max-width: 767px) {
  .notfound__inner { padding: 36px 0; }
  .notfound__actions .btn { width: 100%; }
}

/* ==========================================================================
   Confort tactile et lisibilité (audit responsive)
   Cibles d'au moins 24 px (WCAG 2.5.8) et aucun texte sous 11,5 px.
   ========================================================================== */

/* Micro-libellés : 11 px était en dessous du seuil de confort */
.brand__role { font-size: 11.5px; }
.aside-title { font-size: 11.5px; }
.field__label { font-size: 11.5px; }

/* Les puces du carrousel ne faisaient que 3 px de haut : on garde le trait
   fin mais on lui donne une zone de clic utilisable. */
.gallery__dot {
  height: auto; background: none;
  padding: 11px 0; border: 0; line-height: 0;
}
.gallery__dot::before {
  content: ''; display: block;
  width: 26px; height: 3px; border-radius: 2px;
  background: var(--pale);
  transition: background .18s ease;
}
.gallery__dot.is-active::before { background: var(--primary); }
.gallery__dot:hover::before { background: var(--sky); }

/* Liens d'action isolés : hauteur de frappe suffisante */
.link-arrow { display: inline-block; padding: 4px 0; }
.side-cta__phone { display: block; padding: 6px 0; }
.site-footer__links a { display: inline-block; padding: 5px 0; }
.fiches a { display: inline-block; padding: 3px 0; }

/* Cases et boutons radio du questionnaire */
.q-choice, .q-check {
  min-height: 32px; align-items: center;
}
.q-choice input, .q-check input {
  width: 18px; height: 18px; margin: 0; flex: none;
}
.q-check { align-items: flex-start; padding: 7px 0; }
.q-check input { margin-top: 1px; }

@media (max-width: 767px) {
  .gallery__dot { padding: 12px 4px; }
  .gallery__dot::before { width: 20px; }
  .q-choice, .q-check { min-height: 40px; }
  .site-nav__link { min-height: 44px; display: flex; align-items: center; }
}

/* --- Plans : invitation avant chargement --------------------------------- */
.map__ask {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(23, 69, 111, .035) 14px 28px),
    var(--surface);
}
.map__label { font: 600 13.5px/1.5 var(--sans); color: var(--primary); }
.map__note { font: 400 11.5px/1.6 var(--sans); color: var(--muted-2); max-width: 34ch; }
.map__alt { font: 600 12.5px var(--sans); }
.map[data-map-loaded] .map__ask { display: none; }

@media (max-width: 767px) {
  .map__ask { gap: 8px; padding: 14px; }
  .map__note { font-size: 11px; }
  .map__alt { display: none; }
}

/* ==========================================================================
   Pages légales
   ========================================================================== */
.legal { display: flex; flex-direction: column; gap: 34px; padding: 48px 0 72px; max-width: 820px; }
.legal__block { display: flex; flex-direction: column; gap: 12px; }
.legal__block h2 { font: 500 24px/1.3 var(--serif); color: var(--navy); }
.legal__block p { font: 400 15.5px/1.75 var(--sans); color: var(--text); }
.legal__block--highlight {
  border: 1px solid var(--sky); background: var(--tint);
  border-radius: var(--radius); padding: 24px 26px;
}
.legal__bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.legal__bullets li { font: 400 15px/1.7 var(--sans); color: var(--text); }
.legal__note {
  border-left: 3px solid var(--pale); padding-left: 14px;
  font-size: 14.5px !important; color: var(--muted) !important;
}
.legal__updated { font-size: 13.5px !important; color: var(--muted-2) !important; }

.legal__list { margin: 0; display: grid; grid-template-columns: 210px 1fr; gap: 12px 24px; }
.legal__list dt {
  font: 600 12px var(--sans); color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; padding-top: 3px;
}
.legal__list dd { margin: 0; font: 400 15px/1.7 var(--sans); color: var(--text); }

.legal__table { width: 100%; border-collapse: collapse; font: 400 14px/1.6 var(--sans); }
.legal__table th, .legal__table td {
  text-align: left; padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.legal__table th { font-weight: 600; color: var(--primary); font-size: 12.5px; }
.legal__table code { font: 400 12.5px ui-monospace, Menlo, monospace; color: var(--navy); }

/* Ce qui reste à renseigner : volontairement voyant */
.todo {
  display: inline-block;
  background: #fff3cd; color: #7a5b00;
  border: 1px dashed #d9a600; border-radius: 4px;
  padding: 1px 7px; font: 600 13px var(--sans);
}

@media (max-width: 767px) {
  .legal { gap: 26px; padding: 26px 0 40px; }
  .legal__block h2 { font-size: 20px; }
  .legal__list { grid-template-columns: 1fr; gap: 4px 0; }
  .legal__list dd { margin-bottom: 12px; }
  .legal__table { font-size: 13px; }
  .legal__table th, .legal__table td { padding: 9px 8px 9px 0; }
}

/* --- Questions fréquentes ------------------------------------------------
   Accordéon en <details> natif : le contenu est dans le document même replié,
   donc lisible par les moteurs de recherche et de réponse, et l'ouverture ne
   dépend d'aucun script. */
.faq { border-top: 1px solid var(--border); }
.faq__inner {
  padding-top: 52px; padding-bottom: 56px;
  display: flex; flex-direction: column; gap: 24px;
}
.faq__inner h2 { font-size: 30px; line-height: 1.25; max-width: 660px; }
.faq__list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  max-width: 840px;
}
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0; position: relative;
  font: 400 18px/1.4 var(--serif); color: var(--primary);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font: 400 20px/1 var(--sans); color: var(--accent);
}
.faq__item[open] summary::after { content: '\2013'; }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq__item p {
  margin: 0; padding: 0 34px 20px 0;
  font: 400 15.5px/1.75 var(--sans); color: var(--text);
}

@media (max-width: 767px) {
  .faq__inner { padding-top: 34px; padding-bottom: 38px; gap: 18px; }
  .faq__inner h2 { font-size: 23px; }
  .faq__item summary { font-size: 16.5px; padding: 15px 30px 15px 0; }
  .faq__item p { font-size: 14.5px; padding-bottom: 17px; }
}