/* ============================================================
   CLINIQUE RESO — Design System v2
   Direction: "Clinical Warmth" — Professional, warm, approachable
   WCAG 2.2 AA compliant. Mobile-first. Reduced-motion aware.
   ============================================================ */

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* The browser's UA default [hidden] { display: none } has specificity 0,1,0
   and therefore loses to any later `.class { display: flex|grid|block }`
   author rule at the same specificity. We hide and show elements a lot via
   the `hidden` attribute (JS-driven motif fieldsets, the contact form's
   confirmation swap, etc.), so re-assert the attribute universally here
   with !important. Kills an entire class of "why doesn't my element hide"
   bug that cost several rounds of back-and-forth.
   Exception: if a component ever needs to stay visible while carrying the
   `hidden` attribute (e.g. `hidden="until-found"` for find-in-page scroll),
   override it locally — but the project doesn't use that today. */
[hidden] { display: none !important; }

:root {
  /* Brand teal */
  --teal-900: #0f3d35;
  --teal-800: #165347;
  --teal-700: #1a6b5a;
  --teal-600: #1f7f6b;
  --teal-500: #2b9a82;
  --teal-100: #e8f5f1;
  --teal-50:  #f3faf7;
  /* Warm sand */
  --sand-50:  #fefcf8;
  --sand-100: #faf6ee;
  --sand-200: #f3eddf;
  --sand-300: #e8dcc8;
  --sand-400: #d4c5a5;
  /* Cranberry accent (Clinique RESO brand) — AA contrast on white */
  --terra-700: #8a2434;  /* AA-compliant small text on white (~7.1:1) */
  --terra-600: #a3293c;  /* primary cranberry (brand) */
  --terra-500: #b73f53;  /* decorative only */
  --terra-400: #d96477;  /* decorative only, dark backgrounds */
  /* Indigo secondary accent */
  --indigo-700: #3730a3;
  --indigo-600: #4f46e5;
  --indigo-500: #6366f1;
  --indigo-200: #c7d2fe;
  --indigo-100: #e0e7ff;
  --indigo-50:  #eef2ff;
  /* Amber warm accent */
  --amber-700: #b45309;
  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-200: #fde68a;
  --amber-100: #fef3c7;
  --amber-50:  #fffbeb;
  /* Neutrals */
  --slate-900: #1a1f2b;
  --slate-800: #1f2937;
  --slate-700: #374151;
  --slate-600: #4b5563;
  --slate-500: #6b7280;
  --slate-400: #9ca3af;
  --slate-300: #d1d5db;
  --slate-200: #e5e7eb;
  --slate-100: #f3f4f6;
  --slate-50:  #f9fafb;
  --white: #ffffff;
  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, sans-serif;
  /* Elevation */
  --shadow-sm:   0 1px 2px rgba(15,61,53,.06);
  --shadow-md:   0 4px 16px rgba(15,61,53,.08);
  --shadow-lg:   0 8px 32px rgba(15,61,53,.10);
  --shadow-card: 0 2px 8px rgba(15,61,53,.06), 0 0 0 1px rgba(15,61,53,.04);
  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  /* Z-index scale */
  --z-skip:        2000;
  --z-header:      1000;
  --z-mobile-nav:  1001;
  --z-mobile-overlay: 999;
  --z-sticky:      50;
  --z-cookie:      3000;
  --z-modal:       4000;
  /* Layout */
  --content-max: 1200px;
  --content-narrow: 780px;
  --header-height: 72px;
}

/* ===== BASE ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  overflow-x: hidden;          /* Safari < 16 fallback */
  overflow-x: clip;            /* modern: no scroll container, sticky still works */
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(18px, 2vw, 22px); }

p { margin: 0 0 16px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

time { font-variant-numeric: tabular-nums; }

a {
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .2s ease;
}
a:hover { color: var(--terra-700); }

ul { padding-left: 1.25em; }
li { margin: 4px 0; }

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

/* ===== FOCUS (WCAG 2.4.7, 2.4.11) ===== */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--terra-500);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-footer :focus-visible,
.carousel-content :focus-visible,
.cta-banner :focus-visible,
.team-hero :focus-visible,
.service-hero :focus-visible {
  outline-color: var(--sand-200);
  outline-offset: 3px;
}

/* ===== ACCESSIBILITY HELPERS ===== */
.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;
}
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: var(--z-skip);
  padding: 12px 18px;
  background: var(--teal-800);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
  transform: translateY(-120%);
  transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--white);
  outline: 3px solid var(--sand-200);
  outline-offset: 3px;
}

/* ===== LAYOUT PRIMITIVES ===== */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
}
.container-narrow { max-width: var(--content-narrow); }
@media (min-width: 768px) {
  .container { padding: 0 32px; }
}
.section { padding: clamp(36px, 5vw, 72px) 0; }
.section-header { text-align: center; margin-bottom: 36px; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--terra-700);
  margin-bottom: 12px;
}
.section-title { margin-bottom: 12px; }
.section-subtitle { color: var(--slate-600); font-size: 17px; }

/* ===== BUTTONS (min 44×44 touch targets) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.btn-lg { padding: 14px 28px; font-size: 16px; min-height: 48px; }
.btn-sm { padding: 10px 16px; font-size: 14px; min-height: 44px; }

.btn-primary { background: var(--teal-700); color: var(--white); }
.btn-primary:hover { background: var(--teal-800); color: var(--white); }

.btn-secondary {
  background: var(--white);
  color: var(--teal-800);
  border-color: var(--teal-700);
}
.btn-secondary:hover { background: var(--teal-50); }

.btn-cta { background: var(--white); color: var(--teal-900); box-shadow: var(--shadow-md); }
.btn-cta:hover { background: var(--sand-100); color: var(--teal-900); transform: translateY(-1px); }

@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none; }
}
/* Tactile press — subtle scale on click. Gated behind reduced-motion
   respect; transitions only the transform so it doesn't interfere with
   hover color/border changes already defined on each variant. */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition-property: background, color, border-color, transform, box-shadow, filter; }
  .btn:active { transform: scale(0.97); }
}

/* Subtle image outline for consistent edge depth on content photos.
   Scoped inside content surfaces only — skips header logo, decorative
   SVGs, and the carousel hero (which has its own gradient overlay). */
.about-image img,
.service-featured-image img,
.team-card-photo img,
.profile-photo img,
.bureau-detail-main img,
.bureau-thumb img {
  outline: 1px solid rgba(0, 0, 0, 0.06);
  outline-offset: -1px;
}

/* ===== HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  left: 0; right: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--slate-200);
}
.header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-height);
}

/* Clinic logo image (replaces left brand mark + text) */
.logo .logo-img {
  height: 48px;
  width: auto;
  display: block;
}
@media (max-width: 767px) {
  .logo .logo-img { height: 40px; }
}
@media (max-width: 380px) {
  .logo .logo-img { height: 34px; }
}

/* Push the nav/CTA/hamburger group to the right of the logo. On
   mobile (no visible main-nav, hamburger visible) we anchor the CTA
   to the right and let the hamburger sit beside it — so "Prendre
   rendez-vous" isn't stranded in the middle of the header. */
.main-nav { margin-left: auto; }
.header-cta { margin-left: auto; }
@media (min-width: 1024px) {
  /* Desktop — main-nav reclaims the auto margin; CTA sits naturally
     after the nav without pushing. */
  .header-cta { margin-left: 0; }
}
@media (min-width: 768px) {
  .header-inner { padding: 12px 32px; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  min-width: 0;
}
.logo-mark {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--teal-700);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.logo-text {
  display: flex; flex-direction: column; line-height: 1.1;
  min-width: 0;
}
.logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--slate-900);
  white-space: nowrap;
}
.logo-tagline {
  font-size: 12px;
  color: var(--slate-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-nav { display: none; }
.main-nav > a,
.main-nav .nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--slate-700);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.main-nav > a,
.main-nav .nav-item > a { position: relative; }
.main-nav > a:hover,
.main-nav .nav-item > a:hover { background: var(--teal-50); color: var(--teal-800); }
/* Active page — underline indicator + color + weight, distinct from
   hover's pale background wash. */
.main-nav > a.active,
.main-nav .nav-item > a.active {
  color: var(--teal-800);
  font-weight: 600;
  background: transparent;
}
.main-nav > a.active::after,
.main-nav .nav-item > a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--teal-700);
  border-radius: 2px;
}

.nav-caret {
  display: inline-flex;
  width: 14px; height: 14px;
  transition: transform .2s ease;
}
.nav-caret svg { width: 100%; height: 100%; stroke-width: 2.5; }
.nav-item--has-menu {
  position: relative;
}
.nav-item--has-menu:hover .nav-caret,
.nav-item--has-menu:focus-within .nav-caret { transform: rotate(180deg); }

/* Mega menu panel */
.mega-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 340px;
  /* Viewport guard — keeps the mega-menu inside the viewport at narrow
     desktop widths (1024–1080px) where translateX(-50%) centering could
     otherwise push it past the edge. */
  max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: calc(var(--z-header) + 1);
}
.mega-menu::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}
.nav-item--has-menu:hover .mega-menu,
.nav-item--has-menu:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.mega-menu-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 10px;
  padding: 0 6px;
}
.mega-menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 6px;
}
.mega-menu-list li { margin: 0; }
.mega-menu-list a {
  display: block;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--slate-800);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.mega-menu-list a:hover {
  background: var(--teal-50);
  color: var(--teal-800);
}
.mega-menu-foot {
  display: block;
  padding: 8px 10px 2px;
  margin-top: 4px;
  border-top: 1px solid var(--slate-100);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-700);
  text-decoration: none;
}
.mega-menu-foot:hover { color: var(--teal-900); }

.mega-menu--services { min-width: 420px; max-width: calc(100vw - 32px); }
.mega-menu--troubles { min-width: 380px; max-width: calc(100vw - 32px); }
.mega-menu--guides   { min-width: 440px; max-width: calc(100vw - 32px); }

/* Guides mega — 2 labeled sections side-by-side. Reuses the
   .mega-menu-list link styling from Services/Troubles. */
.mega-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 10px;
}
.mega-menu-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 6px;
  padding: 0 10px;
}
.mega-menu-section-label--stacked { margin-top: 14px; }

/* Mobile nav submenu (details/summary) */
.mobile-nav-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.mobile-nav-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--slate-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--r-sm);
}
.mobile-nav-group > summary::-webkit-details-marker { display: none; }
.mobile-nav-group > summary::marker { content: ""; }
.mobile-nav-group > summary:hover { background: var(--teal-50); }
.mobile-nav-caret {
  display: inline-flex;
  width: 14px; height: 14px;
  transition: transform .2s ease;
}
.mobile-nav-caret svg { width: 100%; height: 100%; stroke-width: 2.5; }
.mobile-nav-group[open] > summary .mobile-nav-caret { transform: rotate(180deg); }
.mobile-nav-submenu {
  padding: 4px 0 8px 14px;
  border-left: 2px solid var(--teal-100);
  margin: 0 0 4px 14px;
}
.mobile-nav-submenu a {
  padding: 8px 12px;
  font-size: 14px;
}
.mobile-nav-all {
  font-weight: 600;
  color: var(--teal-700) !important;
}
.mobile-nav-utility {
  margin-top: 8px;
  font-size: 14px;
  color: var(--slate-500) !important;
}

/* Utility block at the TOP of the mobile drawer — mirrors the desktop
   site-utility bar (phone, hours, "Pour les cliniciens"). Sits above
   the primary nav items so reach-you info is first on the eye. */
.mobile-nav-utility-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 14px 12px;
  margin: -8px -14px 8px;
  background: var(--teal-50);
  border-bottom: 1px solid var(--teal-100);
  border-radius: var(--r-sm);
}
/* Specificity bump: the generic `.mobile-nav a` rule below sets
   padding: 14px 16px on every link. Scope this row selector with the
   group wrapper so the utility rows (phone <a> + hours <div>) share
   the same 8 × 6 padding and align icon-to-icon. */
.mobile-nav-utility-group .mobile-nav-utility-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-size: 14px;
  color: var(--slate-800);
  text-decoration: none;
  border-radius: 6px;
}
.mobile-nav-utility-row svg {
  width: 16px;
  height: 16px;
  color: var(--teal-700);
  flex-shrink: 0;
}
a.mobile-nav-utility-row:hover { background: var(--white); color: var(--teal-900); }
.mobile-nav-utility-static { color: var(--slate-600); }
.mobile-nav-utility-link {
  color: var(--teal-800);
  font-weight: 600;
  justify-content: space-between;
}
.mobile-nav-utility-link > span:first-child { flex: 1; }

/* Header CTA — full "Prendre rendez-vous" pill on desktop, icon-only
   square on mobile so it doesn't compete with the hamburger. */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}
.header-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Mobile / tablet: icon-only — 44 × 44 tap target, no text label. */
@media (max-width: 1023px) {
  .header-cta {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--r-md, 10px);
  }
  .header-cta-label { display: none; }
}

/* Desktop: full label + padding returns. */
@media (min-width: 1024px) {
  .header-cta { padding: 10px 18px; }
  .header-cta-label { display: inline; }
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background .2s;
}
.hamburger:hover { background: var(--slate-100); }
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--slate-900);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* NEW breakpoint: desktop nav only at 1024px+ (was 768px — broke on iPad) */
@media (min-width: 1024px) {
  .main-nav { display: flex; gap: 4px; }
  .header-cta { margin-left: 12px; padding: 10px 18px; }
  .header-cta svg { width: 18px; height: 18px; }
  .hamburger { display: none; }
}

@media (max-width: 380px) {
  .logo-tagline { display: none; }
  .logo-name { font-size: 16px; }
}

/* ===== MOBILE OVERLAY + NAV — BUG FIX ===== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-overlay);
  background: rgba(15,61,53,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease, visibility 0s;
}

.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 90vw);
  height: 100vh;               /* iOS Safari < 15.4 fallback */
  height: 100dvh;              /* modern: excludes URL bar height */
  z-index: var(--z-mobile-nav);
  background: var(--white);
  padding: 72px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(15,61,53,.15);
  overflow-y: auto;
}
.mobile-nav.active { transform: translateX(0); }
.mobile-nav a {
  padding: 14px 16px;
  color: var(--slate-700);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--r-sm);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-nav a:hover { background: var(--teal-50); color: var(--teal-800); }
.mobile-nav a.active { background: var(--teal-50); color: var(--teal-800); font-weight: 600; }
.mobile-nav .btn { margin-top: 16px; justify-content: center; }
.mobile-nav .btn-primary { color: var(--white); }
.mobile-nav .btn-primary:hover { background: var(--teal-800); color: var(--white); }
.mobile-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--slate-700);
  display: flex; align-items: center; justify-content: center;
}
.mobile-close:hover { background: var(--slate-100); }
.mobile-close svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .mobile-nav, .mobile-overlay { display: none !important; }
}

/* ===== HERO CAROUSEL =====
   The slide image fills the whole hero. The slide's content overlay
   (.carousel-content) reserves a bottom gutter (--carousel-controls-h)
   so the CTA never extends into the space occupied by the controls
   bar — which is absolutely positioned at the bottom of the hero,
   floating over the slide image. This keeps the original design
   (controls on image) while guaranteeing no overlap. */
/* Split-layout hero: solid teal panel (left) for text, full-color photo
   (right) for warmth. Mobile stacks photo-top / text-bottom. Text contrast
   is locked by the panel, so photos keep their natural colors. */
.hero-carousel {
  --carousel-controls-h: 76px;
  position: relative;
  overflow: hidden;
  background: var(--teal-900);
  isolation: isolate;
}
@media (min-width: 860px) {
  .hero-carousel { min-height: clamp(520px, 60vh, 680px); }
}
.carousel-track {
  display: flex;
  width: 100%;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  overflow: hidden;
  min-height: 480px;
}
@media (min-width: 860px) {
  .carousel-slide {
    min-height: clamp(520px, 60vh, 680px);
  }
}
/* Mobile: full-bleed photo behind everything, text overlaid on a dark teal
   scrim for reliable contrast. Desktop: overridden below as frosted panel. */
.carousel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carousel-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Desktop-only: slide-wide light teal tint so the right side of the photo
   (outside the frosted content panel) still reads as part of the brand —
   the image stays clearly visible, just with a subtle unifying cast. */
@media (min-width: 860px) {
  .carousel-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(15,61,53,.10) 0%,
      rgba(15,61,53,.18) 100%);
    pointer-events: none;
  }
}
/* Mobile: content overlays the full-bleed photo with a soft radial scrim —
   darker around the text area, lighter at the edges so the photo stays
   present. Text-shadow catches any contrast shortfall on bright photo zones. */
.carousel-content {
  position: relative;
  z-index: 2;
  min-height: 480px;
  display: flex;
  align-items: center;
  padding: 48px 20px calc(var(--carousel-controls-h) + 20px);
  background: linear-gradient(180deg,
    rgba(15,61,53,.78) 0%,
    rgba(15,61,53,.92) 100%);
}
@media (min-width: 560px) {
  .carousel-content { padding: 52px 28px calc(var(--carousel-controls-h) + 24px); }
}
@media (min-width: 860px) {
  /* Desktop override: frosted panel over the left portion of the photo, with
     mask so the right edge fades invisibly — no straight line, photo stays
     sharp past the panel. */
  .carousel-content {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    min-height: auto;
    padding: 48px 56px calc(var(--carousel-controls-h) + 24px);
    background: linear-gradient(90deg,
      var(--teal-900) 0%,
      var(--teal-900) 18%,
      rgba(15,61,53,0.94) 28%,
      rgba(15,61,53,0.86) 36%,
      rgba(15,61,53,0.74) 44%,
      rgba(15,61,53,0.60) 52%,
      rgba(15,61,53,0.46) 60%,
      rgba(15,61,53,0.32) 68%,
      rgba(15,61,53,0.20) 76%,
      rgba(15,61,53,0.10) 84%,
      rgba(15,61,53,0.04) 92%,
      rgba(15,61,53,0) 100%);
    backdrop-filter: blur(36px) saturate(1.1);
    -webkit-backdrop-filter: blur(36px) saturate(1.1);
    -webkit-mask-image: linear-gradient(90deg,
      black 0%,
      black 22%,
      rgba(0,0,0,0.94) 32%,
      rgba(0,0,0,0.82) 42%,
      rgba(0,0,0,0.66) 52%,
      rgba(0,0,0,0.48) 62%,
      rgba(0,0,0,0.30) 72%,
      rgba(0,0,0,0.15) 82%,
      rgba(0,0,0,0.05) 92%,
      transparent 100%);
    mask-image: linear-gradient(90deg,
      black 0%,
      black 22%,
      rgba(0,0,0,0.94) 32%,
      rgba(0,0,0,0.82) 42%,
      rgba(0,0,0,0.66) 52%,
      rgba(0,0,0,0.48) 62%,
      rgba(0,0,0,0.30) 72%,
      rgba(0,0,0,0.15) 82%,
      rgba(0,0,0,0.05) 92%,
      transparent 100%);
  }
  .carousel-content > .carousel-text,
  .carousel-content > * { position: relative; z-index: 1; }
}
.carousel-text {
  max-width: 560px;
  padding: 0;
  color: var(--white);
  width: 100%;
}
.carousel-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sand-200);
  padding: 6px 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  margin-bottom: 20px;
}
.carousel-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 48px);
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: -.02em;
  line-height: 1.1;
}
/* Mobile-only: tighter dark halo around glyphs carries the contrast so the
   photo scrim can stay light and the image reads clearly. */
@media (max-width: 859px) {
  .carousel-heading { text-shadow: 0 2px 14px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.5); }
  .carousel-text p { text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.45); }
  .carousel-eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,.55); }
}
.carousel-text p.carousel-heading {
  font-weight: 700;
  font-size: clamp(24px, 3.8vw, 40px);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 14px;
  max-width: none;
}
.carousel-heading em { font-style: normal; color: var(--sand-200); }
.carousel-text p {
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255,255,255,.94);
  margin-bottom: 28px;
  line-height: 1.6;
  max-width: 540px;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.hero-cta-group .btn-cta svg {
  width: 18px; height: 18px;
  margin-right: 4px;
  vertical-align: -3px;
}
.btn-hero-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(4px);
}
.btn-hero-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.85);
  color: var(--white);
}
.credibility-strip {
  background: var(--teal-900);
  color: rgba(255,255,255,.92);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  text-align: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 520px) {
  .credibility-strip { font-size: 12.5px; padding: 11px 16px; }
}

.insurance-strip {
  display: block;
  background: var(--sand-100);
  color: var(--slate-700);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--sand-300);
  text-decoration: none;
  transition: background-color .15s ease;
}
.insurance-strip:hover { background: var(--sand-200); }
.insurance-strip-cta { color: var(--teal-700); font-weight: 700; }
@media (max-width: 520px) {
  .insurance-strip { font-size: 11.5px; padding: 9px 16px; }
}

.carousel-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 3;
  height: var(--carousel-controls-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  pointer-events: none;
}
.carousel-controls > * { pointer-events: auto; }
.carousel-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.carousel-arrow:hover { background: rgba(255,255,255,.25); }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-dots {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,.15);
  border-radius: 999px;
  padding: 4px;
}
.carousel-dot {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  position: relative;
}
/* Extend hit area vertically above/below the pill strip (can't expand
   horizontally — siblings are only 4px apart). Brings dots to 32×44. */
.carousel-dot::after {
  content: '';
  position: absolute;
  top: -6px; bottom: -6px; left: 0; right: 0;
}
.carousel-dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background .25s, width .25s, height .25s;
}
/* Active dot = progress pill.
   Single element with a 2-stop linear gradient (white / semi-transparent) sized 2x the
   element. Animating background-position from "right" (all semi) to "left" (all white)
   slides the hard boundary across the pill — so at every frame the visible portion of
   white has the pill's original rounded left edge, and the whole shape stays a perfect
   pill with rounded ends throughout. GPU-composited, no paint cost, smooth at any rate. */
.carousel-dot[aria-selected="true"]::before,
.carousel-dot.active::before {
  width: 24px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--white) 50%, rgba(255,255,255,.3) 50%);
  background-size: 200% 100%;
  background-position: right center;
  animation: carousel-progress 6s linear forwards;
}
.hero-carousel.paused .carousel-dot::before {
  animation-play-state: paused;
}
@keyframes carousel-progress {
  from { background-position: right center; }
  to { background-position: left center; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static solid white pill, no animation */
  .carousel-dot[aria-selected="true"]::before,
  .carousel-dot.active::before {
    background: var(--white);
    width: 22px;
    height: 8px;
    animation: none;
  }
}
.carousel-pause {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.carousel-pause:hover { background: rgba(255,255,255,.25); }
.carousel-pause svg { width: 18px; height: 18px; }

/* ===== ACRONYM STRIP ===== */
.acronym-strip { background: var(--teal-900); padding: 16px 0; color: var(--white); }
.acronym-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
}
.acronym-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--sand-200);
  line-height: 1;
}
.acronym-word { font-size: clamp(12px, 1.2vw, 14px); color: rgba(255,255,255,.88); margin-top: 2px; }
@media (max-width: 540px) {
  .acronym-inner { gap: 8px; padding: 0 12px; }
  .acronym-letter { font-size: 26px; }
  .acronym-word { font-size: 11px; letter-spacing: -.01em; }
}

/* ===== ABOUT ===== */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1.2fr; gap: 64px; } }
.about-image { display: none; }
@media (min-width: 900px) { .about-image { display: block; } }
.about-image img {
  border-radius: var(--r-lg);
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.about-title { font-size: clamp(28px, 3.5vw, 40px); margin-top: 8px; }
.about-accent { width: 60px; height: 4px; background: var(--terra-600); border-radius: 2px; margin: 16px 0 24px; }
.about-lead { font-size: 18px; color: var(--slate-700); margin-bottom: 20px; }
/* Proof points — typography-only, no chrome. Lives inside .about-content
   beside the team photo, so uses a 2-column grid with hairline dividers. */
.about-values {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  color: var(--slate-900);
  border-top: 1px solid var(--slate-200);
}
@media (min-width: 520px) {
  .about-values { grid-template-columns: repeat(2, 1fr); }
}
.about-value {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--slate-200);
}
@media (min-width: 520px) {
  .about-value { padding: 18px 20px 18px 0; }
  .about-value:nth-child(2n) { padding-right: 0; padding-left: 20px; border-left: 1px solid var(--slate-200); }
}
.about-value-icon {
  width: 22px; height: 22px;
  color: var(--teal-700);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-value-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.about-value-fact {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--slate-900);
  letter-spacing: -.01em;
}
.about-value-detail {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--slate-600);
}

/* ===== SERVICES — UNIFIED WHITE GRID ===== */
.services .section-header { max-width: 640px; }

/* ===== Services filter tabs ===== */
.services-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.services-filter-btn {
  padding: 10px 18px;
  min-height: 40px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--slate-700);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.services-filter-btn:hover {
  border-color: var(--teal-500);
  color: var(--teal-800);
}
.services-filter-btn.active {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: var(--white);
}
@media (max-width: 520px) {
  .services-filter-btn { font-size: 13px; padding: 8px 14px; }
}

/* ===== Services — editorial split layout ===== */
.services-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
}
/* Filter: hide non-matching items */
.services-editorial[data-filter="enfant"]  [data-audiences]:not([data-audiences~="enfant"])  { display: none; }
.services-editorial[data-filter="adulte"]  [data-audiences]:not([data-audiences~="adulte"])  { display: none; }
.services-editorial[data-filter="famille"] [data-audiences]:not([data-audiences~="famille"]) { display: none; }

/* When featured is hidden by filter, collapse grid to single column */
@media (min-width: 900px) {
  .services-editorial[data-filter="adulte"],
  .services-editorial[data-filter="famille"] {
    grid-template-columns: 1fr 1fr;
  }
}
.services-editorial .services-empty { display: none; }
.services-editorial.is-empty .services-empty {
  display: block;
  text-align: center;
  padding: 40px 20px;
  color: var(--slate-600);
  font-size: 15px;
  grid-column: 1 / -1;
}
.services-editorial.is-empty .service-rows,
.services-editorial.is-empty .service-featured { display: none !important; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--teal-700);
  font-weight: 600;
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--teal-900); }

.services-secondary-link {
  text-align: center;
  margin: 28px auto 0;
  font-size: 15px;
  color: var(--slate-600);
}
.services-secondary-link a {
  color: var(--teal-700);
  font-weight: 600;
  text-underline-offset: 3px;
}
.services-secondary-link a:hover { color: var(--teal-900); }
@media (min-width: 900px) {
  .services-editorial {
    grid-template-columns: 1.05fr 1fr;
    gap: 28px;
    align-items: start;
  }
}

.service-featured {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--slate-900);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.service-featured:hover {
  border-color: var(--teal-500);
  box-shadow: var(--shadow-lg);
  color: var(--slate-900);
}

/* Spécialité phare — la carte neuropsy doit sauter aux yeux. Bordure
   épaisse couleur teal + eyebrow renforcé en gradient. Christine
   trouvait que dans la liste, on cherchait la neuropsy ; ce traitement
   différencie clairement le « featured » du reste du grid. */
.featured-main {
  border: 2px solid var(--teal-700);
  position: relative;
}
.featured-main .service-featured-eyebrow {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: var(--white);
  font-weight: 700;
  letter-spacing: .12em;
  box-shadow: 0 4px 10px -4px rgba(15,61,53,.45);
}
.service-featured-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--slate-100);
}
.service-featured-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.service-featured-body { padding: 22px 26px 26px; }
.service-featured-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal-700);
  background: var(--teal-50);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.service-featured-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 8px;
  text-wrap: balance;
}
/* Équilibrage des longues sous-titres et bodies pour éviter qu'un
   mot orphelin tombe seul sur la dernière ligne (FAQ subtitle, slide
   carousel body). */
.section-subtitle,
.carousel-content p {
  text-wrap: balance;
}
.service-featured-tagline {
  font-size: 15px;
  color: var(--slate-600);
  line-height: 1.5;
  margin: 0 0 10px;
}
.service-featured-symptoms {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.45;
  margin: 0 0 14px;
}
.service-featured-audience {
  display: inline-block;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
  letter-spacing: .01em;
}
.service-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-700);
  font-weight: 600;
  font-size: 15px;
}
.service-featured-cta svg { width: 16px; height: 16px; }
.service-featured:hover .service-featured-cta { color: var(--teal-800); }

/* Featured swap — show only the featured matching current filter */
.featured-famille { display: none; }
.services-editorial[data-filter="famille"] .featured-main { display: none; }
.services-editorial[data-filter="famille"] .featured-famille { display: grid; }
/* Hide the row of whichever service is currently featured */
.services-editorial[data-filter="famille"] [data-slug="psychoeducation"] { display: none; }

/* Compact rows */
.service-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--slate-900);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.service-row:hover {
  border-color: var(--teal-500);
  box-shadow: var(--shadow-sm);
  color: var(--slate-900);
}
.service-row.highlighted {
  border-left: 4px solid var(--teal-600);
  padding-left: 14px;
  background: linear-gradient(90deg, var(--teal-50) 0%, var(--white) 55%);
}
.service-row.highlighted .service-row-icon {
  background: var(--teal-700);
  color: var(--white);
}
.service-row.highlighted .service-row-name { color: var(--teal-900); }
.service-row-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--teal-50);
  color: var(--teal-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease;
}
.service-row-icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
.service-row:hover .service-row-icon {
  background: var(--teal-700);
  color: var(--white);
}
.service-row-body { flex: 1; min-width: 0; }
.service-row-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.service-row-symptoms {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-row-arrow {
  color: var(--teal-500);
  flex-shrink: 0;
  transition: color .2s ease;
}
.service-row-arrow svg { width: 16px; height: 16px; }
.service-row:hover .service-row-arrow { color: var(--teal-700); }
/* ===== Attention badges (Nouveau / Prise en charge rapide) ===== */
.service-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
  z-index: 2;
}
.service-badge svg { width: 11px; height: 11px; flex-shrink: 0; display: block; }
.service-badge.new {
  background: linear-gradient(135deg, var(--terra-600), var(--terra-500));
  color: var(--white);
  box-shadow: 0 2px 8px rgba(163,41,60,.28);
}
.service-badge.fast {
  background: linear-gradient(135deg, var(--amber-500), var(--amber-400, #fbbf24));
  color: #7c2d12;
  box-shadow: 0 2px 8px rgba(217,119,6,.30);
}

.service-row .service-badge {
  position: static;
  flex-shrink: 0;
}
.service-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Mobile: reflow row as 2-column grid so the badge breaks to its own line below
   the service name instead of fighting for horizontal space with a 23-char label
   like "Prise en charge rapide". Icon + arrow span both rows; rows without a
   badge still render a single-line grid. */
@media (max-width: 520px) {
  .service-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 12px 14px;
    align-items: center;
  }
  .service-row-icon { grid-row: 1 / -1; width: 34px; height: 34px; }
  .service-row-arrow { grid-row: 1 / -1; grid-column: 3; }
  .service-row-body { grid-column: 2; min-width: 0; }
  .service-row-symptoms { display: none; }
  .service-row .service-badge {
    font-size: 10px;
    padding: 3px 7px;
  }
  .service-row .service-badge svg { width: 10px; height: 10px; }
  .service-row .service-badges {
    grid-column: 2;
    justify-self: start;
  }
}

/* Mobile: hero CTA stacks full-width */
@media (max-width: 520px) {
  .hero-cta-group { flex-direction: column; gap: 10px; }
  .hero-cta-group .btn { width: 100%; justify-content: center; }
}

/* Featured card tweak for mobile */
@media (max-width: 600px) {
  .service-featured-body { padding: 18px 20px 22px; }
  .service-featured-image { aspect-ratio: 16/11; }
}

.sidebar-hours {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin: 12px 0 0;
  text-align: center;
  line-height: 1.5;
}
.sidebar-callback {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.cta-banner-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.cta-banner-actions .btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ===== Conditions index + related services list ===== */
.conditions-index {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .conditions-index { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 1100px) {
  .conditions-index { grid-template-columns: repeat(3, 1fr); }
}
.condition-index-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 22px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--slate-900);
  transition: border-color .2s ease, box-shadow .2s ease;
  min-height: 200px;
}
.condition-index-card:hover {
  border-color: var(--teal-500);
  box-shadow: var(--shadow-md);
  color: var(--slate-900);
}
.condition-index-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
}
.condition-index-desc {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.condition-index-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-700);
  font-weight: 600;
  font-size: 14px;
}
.condition-index-cta svg { width: 14px; height: 14px; }

.condition-services {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
}
.condition-services > li { margin: 0; }

/* "Pour aller plus loin" — lightweight list of related resource
   articles. Less visual weight than the service cards above it. */
.condition-resources {
  list-style: none;
  padding: 0;
  margin: 16px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.condition-resources > li { margin: 0; }
.condition-resources a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-800);
  text-decoration: none;
  border-bottom: 1px solid var(--slate-200);
  transition: color .15s ease, border-color .15s ease, gap .15s ease;
}
.condition-resources a:hover {
  color: var(--teal-900);
  border-bottom-color: var(--teal-600);
}
.condition-resources a svg {
  width: 14px;
  height: 14px;
  transition: transform .15s ease;
}
.condition-resources a:hover svg { transform: translateX(3px); }

/* Icon-badge service cards — each related service becomes a proper
   clickable card with a colored icon badge, service name, supporting
   symptoms line, and a chevron. Hover: teal border + small lift +
   arrow nudges right. Reads as an action, not a flat info row. */
.condition-service-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--slate-900);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(15, 61, 53, .04);
  transition: border-color .18s ease, box-shadow .2s ease, transform .2s ease;
}
.condition-service-card:hover {
  border-color: var(--teal-500);
  color: var(--slate-900);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 2px rgba(15, 61, 53, .06),
    0 10px 22px -14px rgba(15, 61, 53, .22);
}
.condition-service-card:focus-visible {
  outline: 3px solid var(--terra-500);
  outline-offset: 2px;
}
.condition-service-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--teal-50);
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-100);
}
.condition-service-badge svg { width: 20px; height: 20px; }
.condition-service-card:hover .condition-service-badge {
  background: var(--teal-100);
  border-color: var(--teal-500);
}
.condition-service-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.condition-service-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--slate-900);
  line-height: 1.2;
}
.condition-service-symptoms {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.4;
}
.condition-service-arrow {
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.condition-service-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}
.condition-service-card:hover .condition-service-arrow svg {
  transform: translateX(3px);
}

.service-troubles {
  margin-top: 32px;
  padding: 20px 22px;
  background: var(--teal-50);
  border-radius: var(--r-md);
  border-left: 3px solid var(--teal-600);
}
.service-troubles h2 {
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--teal-900);
}
.service-troubles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-troubles-list li { margin: 0; }
.service-troubles-list a {
  display: inline-block;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--teal-500);
  border-radius: 999px;
  color: var(--teal-800);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.service-troubles-list a:hover {
  background: var(--teal-700);
  color: var(--white);
}

.back-link {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
  font-size: 15px;
}
.back-link a {
  color: var(--teal-700);
  font-weight: 600;
  text-decoration: none;
}
.back-link a:hover { color: var(--teal-900); text-decoration: underline; }

/* ===== Join-team banner (équipe page) ===== */
.join-team-banner {
  background: linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 100%);
  color: var(--white);
  padding: clamp(40px, 6vw, 64px) 0;
  margin-top: 40px;
}
.join-team-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.join-team-text { flex: 1 1 420px; min-width: 0; }
.join-team-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sand-200);
  background: rgba(255,255,255,.1);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.join-team-banner h2 {
  color: var(--white);
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 30px);
}
.join-team-banner p {
  color: rgba(255,255,255,.82);
  margin: 0;
  font-size: 15px;
  max-width: 540px;
}
.join-team-banner .btn-cta { flex-shrink: 0; }
.join-team-banner .btn-cta svg { width: 16px; height: 16px; margin-left: 4px; }

/* Wrapper for pages that need two CTAs in the banner (bureaux: phone +
   email). Stacks on narrow, inline on wide. */
.join-team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}
.join-team-actions .btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.join-team-actions .btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Narrow viewports: let the action buttons go full-width and stack so
   "Écrire un courriel" doesn't push the banner past the viewport edge. */
@media (max-width: 520px) {
  .join-team-actions {
    flex-shrink: 1;
    width: 100%;
  }
  .join-team-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ===== CTA BANNER — asymmetric split, dual-CTA action card =====
   Message + microcopy on the left, white action card on the right.
   Dark teal→indigo gradient background with a soft radial decoration
   grounds the white card visually. */
.cta-banner {
  position: relative;
  /* Soft teal → sand wash. Lighter than the prior teal-900/indigo
     gradient so the section closes the page calmly, and the dark info
     card + teal phone button now read as focal accents rather than
     fighting for attention against a dark background. */
  background: linear-gradient(160deg, var(--teal-50) 0%, var(--sand-100) 100%);
  color: var(--slate-800);
  padding: clamp(44px, 7vw, 72px) 0;
  overflow: hidden;
  border-top: 1px solid var(--sand-300);
}
.cta-banner-decor {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 280px at 85% 35%, rgba(26,107,90,.08), transparent 60%),
    radial-gradient(360px 220px at 10% 90%, rgba(26,107,90,.05), transparent 60%);
  pointer-events: none;
}
.cta-banner > .container { position: relative; }

.cta-banner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  /* Extra horizontal inset on the LEFT only so the conversion row
     reads as a hero moment with breathing room. The right edge keeps
     the action card flush against the container so it feels anchored. */
  padding: 0 0 0 clamp(0px, 2vw, 40px);
}
/* Mobile: surface the action card above the lead copy so users tapping
   the "Contact" nav anchor land on the phone/write CTAs, not on the
   empathy paragraph. Desktop: restore normal DOM order (lead first). */
.cta-banner-lead { order: 2; }
.cta-banner-card { order: 1; }
@media (min-width: 860px) {
  .cta-banner-grid { grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
  .cta-banner-grid--solo { grid-template-columns: 1fr; }
  .cta-banner-lead { order: 0; }
  .cta-banner-card { order: 0; }
}

.cta-banner-lead { max-width: 560px; }
.cta-banner-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-800);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--teal-100);
  margin-bottom: 16px;
}
.cta-banner h2 {
  color: var(--slate-900);
  margin: 0 0 14px;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.cta-banner p {
  margin: 0 0 22px;
  color: var(--slate-700);
  font-size: 17px;
  line-height: 1.5;
  max-width: 52ch;
}

.cta-banner-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 14px;
  color: var(--slate-700);
}
.cta-banner-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.cta-banner-meta strong { color: var(--slate-900); font-weight: 700; }
.cta-banner-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
}
.cta-banner-meta-icon svg { width: 14px; height: 14px; }

/* The white action card — contrast vs the dark bg is the whole point. */
.cta-banner-card {
  background: #fff;
  color: var(--slate-900);
  border: 1px solid var(--sand-300);
  border-radius: var(--r-lg);
  padding: 26px 24px 22px;
  box-shadow:
    0 20px 40px -20px rgba(26, 107, 90, .22),
    0 2px 0 rgba(255, 255, 255, 1) inset;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.cta-banner-card-header { margin-bottom: 4px; }
.cta-banner-card-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 4px;
}
.cta-banner-card-title {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.4;
}

.cta-banner-write-text { display: flex; flex-direction: column; line-height: 1.15; }
.cta-banner-write-label { font-weight: 700; font-size: 16px; }
.cta-banner-write-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin-top: 2px;
}

/* Primary CTA — formulaire (rendez-vous). Gradient teal pour porter
   l'attention sur le canal préféré. */
.cta-banner-write {
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800, #0f3d35) 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 22px -10px rgba(15,61,53,.45);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.cta-banner-write:hover {
  transform: translateY(-1px);
  color: #fff;
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-900, #0a2b25) 100%);
  box-shadow: 0 14px 28px -10px rgba(15,61,53,.55);
  filter: brightness(1.04);
}
.cta-banner-write svg { width: 16px; height: 16px; transition: transform .15s ease; flex-shrink: 0; }
.cta-banner-write:hover svg { transform: translateX(2px); }

/* Secondary CTA — courriel direct. White card, outline. */
.cta-banner-mail {
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 18px;
  color: var(--teal-900, #0a2b25);
  background: var(--white);
  border: 1px solid var(--slate-200);
  font-weight: 600;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cta-banner-mail:hover {
  color: var(--teal-900);
  background: var(--teal-50);
  border-color: var(--teal-300, #a2d4c7);
  transform: translateY(-1px);
}
.cta-banner-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--teal-50);
  color: var(--teal-700);
  flex-shrink: 0;
}
.cta-banner-phone-icon svg { width: 16px; height: 16px; }
.cta-banner-phone-text { display: flex; flex-direction: column; line-height: 1.2; }
.cta-banner-phone-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--slate-600);
}
.cta-banner-phone-number {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--teal-800);
}

/* Tertiary — lien texte téléphone, discret mais accessible. */
.cta-banner-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-700);
  text-decoration: none;
  align-self: center;
  transition: color .15s ease;
}
.cta-banner-phone-link:hover { color: var(--teal-700); }
.cta-banner-phone-link svg { width: 14px; height: 14px; opacity: .7; }

/* ===== Banner bottom row — wrapped in a distinct card so it reads as
   a separate sub-section from the conversion block above. White card
   on light banner bg matches the action-card treatment above, while
   the dark teal info card nested inside remains the focal accent. ===== */
.cta-banner-location-wrap {
  margin-top: clamp(32px, 5vw, 48px);
  padding: 22px 22px 20px;
  background: var(--white);
  border: 1px solid var(--sand-300);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 36px -20px rgba(26, 107, 90, .18);
}
@media (min-width: 860px) {
  .cta-banner-location-wrap { padding: 24px 26px 22px; }
}

.cta-banner-location-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--slate-700);
}
.cta-banner-location-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-800);
  border: 1px solid var(--teal-100);
  white-space: nowrap;
}
.cta-banner-location-separator {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--slate-200), rgba(0,0,0,0));
}
.cta-banner-location-title {
  font-size: 13px;
  color: var(--slate-600);
  white-space: nowrap;
}

.cta-banner-location {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 860px) {
  .cta-banner-location {
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    /* start, not stretch — info card should size to its content rather
       than being pulled tall to match the map column. */
    align-items: start;
  }
}

/* Dark teal-900 info card — copy of the pre-merge .contact-info styling
   but named .cta-banner-info to live with the partial. Reuses the
   existing .contact-item, .contact-item-icon, .contact-item-label,
   .contact-item-value rules defined further below. */
.cta-banner-info {
  background: var(--teal-900);
  color: var(--white);
  padding: 18px 22px 14px;
  /* Concentric — sits inside .cta-banner-location-wrap (--r-lg, 22px pad),
     so the inner surface drops one step to --r-md. */
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
}
.cta-banner-info-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sand-200);
  margin-bottom: 8px;
}
.cta-banner-info .contact-item { padding: 6px 0; }
.cta-banner-info .contact-item-icon { width: 32px; height: 32px; }
.cta-banner-info .contact-item-icon svg { width: 16px; height: 16px; }
.cta-banner-info .contact-item-label { font-size: 11px; margin-bottom: 1px; }
.cta-banner-info .contact-item-value { font-size: 14px; }
.cta-banner-info a { color: var(--sand-200); text-decoration: underline; }
.cta-banner-info a:hover { color: var(--white); }

/* Access pill — made prominent again (was a faint dot + text); now
   a rounded pill with its own icon badge so it reads as a genuine
   accessibility assurance, not a footnote. */
.cta-banner-info-access {
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  align-self: flex-start;
}
.cta-banner-info-access-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cta-banner-info-access-icon svg { width: 14px; height: 14px; }
.cta-banner-info-sub {
  display: inline-block;
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
  margin-top: 1px;
}
/* Two-column grid inside the info card. Items alternate L/R in the
   source so rows naturally align — icons on the left side of each
   cell, text flowing to the right. Below 520px the grid collapses to
   a single column and the vertical divider hides. */
.cta-banner-info-cols {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 14px;
  column-gap: 28px;
  /* Uniform icon spacing — every row at least 56px, can grow for
     longer address text without overflowing. */
  grid-auto-rows: minmax(56px, auto);
}
.cta-banner-info-cols > .contact-item {
  padding: 0;
  align-items: start;
  min-width: 0; /* allow text to wrap inside narrow grid tracks */
}
.cta-banner-info-cols > .contact-item > div { min-width: 0; }
.cta-banner-info .contact-item-value { word-wrap: break-word; overflow-wrap: anywhere; }

/* Side-by-side only when there's genuinely enough room for two
   columns of content — below this we'd be cramming 2-line labels
   into ~200px tracks and triggering overflow. */
@media (min-width: 640px) {
  .cta-banner-info-cols {
    grid-template-columns: 1fr 1fr;
    position: relative;
  }
  .cta-banner-info-cols::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6%;
    bottom: 6%;
    width: 1px;
    background: rgba(255,255,255,.22);
  }
}

/* While the click-to-load facade is still on screen, hide the floating
   "Ouvrir dans Google Maps" chip so it doesn't overlap the facade's own
   "Afficher la carte" CTA. Chip reappears once the iframe replaces the
   facade on user click. */
.cta-banner-map:has(.map-facade) .map-openlink { display: none; }

/* Real Google Maps iframe — recognizable, interactive, no tile wrangling.
   Small "Ouvrir dans Google Maps" chip floats at the bottom-right for
   visitors who want the full app. */
.cta-banner-map {
  position: relative;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  /* Concentric — matches .cta-banner-info inside the same wrap. */
  border-radius: var(--r-md);
  background:
    /* placeholder street-grid so the card isn't a blank rectangle
       while the iframe spins up (especially on slow mobile) */
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(15,61,53,.08) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(15,61,53,.07) 42px 43px),
    linear-gradient(160deg, #e9f5f1 0%, #f3efe2 100%);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) inset;
}
@media (min-width: 860px) { .cta-banner-map { height: 100%; min-height: 260px; } }

.cta-banner-map iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  display: block;
}
/* Facade sits inside the banner's own sized container, so it doesn't
   need the standalone 360px floor that the contact page uses. */
.cta-banner-map .map-facade {
  min-height: inherit;
  height: 100%;
}

.cta-banner-map .map-openlink {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 61, 53, .92);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
  transition: background .15s ease;
}
.cta-banner-map .map-openlink:hover { background: var(--teal-800, #0f3d35); color: #fff; }
.cta-banner-map .map-openlink svg { width: 12px; height: 12px; transition: transform .15s ease; }
.cta-banner-map .map-openlink:hover svg { transform: translateX(2px); }

/* ===== Contact page — dedicated map wrap ==============================
   Reuses the home-banner map visuals (.cta-banner-location-wrap +
   .cta-banner-location grid + .cta-banner-info card + .cta-banner-map)
   so the component reads the same as on every other page. The left
   column here carries arrival-specific info (access, parking, timing)
   rather than the full NAP block, since the sidebar already has NAP. */
.contact-page-map-wrap {
  margin-top: clamp(40px, 6vw, 64px);
}

/* "Détails de votre première visite" link at the bottom of the info card —
   styled to echo the sand-200 link treatment used elsewhere in the card. */
.cta-banner-info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--sand-200);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.cta-banner-info-link:hover { color: var(--white); text-decoration: underline; }
.cta-banner-info-link svg { width: 14px; height: 14px; transition: transform .15s ease; }
.cta-banner-info-link:hover svg { transform: translateX(3px); }

/* ===== FAQ — editorial dividers, no card wrapper, no background panel ===== */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--slate-200); }
.faq-item:first-child { border-top: 1px solid var(--slate-200); }
.faq-heading { margin: 0; }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  min-height: 56px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--slate-900);
  transition: color .15s ease;
}
.faq-question:hover { color: var(--terra-700); }
.faq-question:focus-visible {
  outline: 2px solid var(--terra-600);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-question svg {
  width: 20px; height: 20px;
  color: var(--terra-600);
  transition: transform .25s;
  flex-shrink: 0;
}
.faq-question[aria-expanded="true"] { color: var(--terra-700); }
.faq-question[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-answer { display: block; }
.faq-answer[hidden] { display: none; }
.faq-answer-inner {
  padding: 0 4px 26px;
  color: var(--slate-700);
  line-height: 1.7;
  font-size: 16px;
  max-width: 68ch;
}
:target > .faq-question,
.faq-question:target { scroll-margin-top: 100px; }

/* ===== CONTACT ITEMS — shared between cta-banner info card and any
   future contact block. Legacy .contact-grid/.contact-info/.contact-map
   were removed when the CTA banner partial took over the contact page's
   NAP block. =====*/
.contact-item { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
.contact-item-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--sand-200);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-item-icon svg { width: 18px; height: 18px; }
.contact-item-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sand-200);
  font-weight: 600;
  margin-bottom: 2px;
}
.contact-item-value { font-size: 15px; color: rgba(255,255,255,.94); font-style: normal; }

/* Map facade — stylized CSS "map" canvas button that swaps to the real
   Google Maps iframe only on user click (Loi 25 / PIPEDA — no third-
   party request pre-consent). Used by the cta-banner partial. */
.map-facade {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 360px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--slate-900);
  overflow: hidden;
  transition: filter .2s ease;
}
.map-facade:hover,
.map-facade:focus-visible { filter: brightness(1.02); }

/* The stylized "map" — absolutely positioned streets + map tones.
   Uses repeating gradients to suggest a road grid, radial blobs for
   parks/water, plus a diagonal hatch for visual depth. */
.map-facade-canvas {
  position: absolute;
  inset: 0;
  background:
    /* vertical streets */
    repeating-linear-gradient(90deg,
      transparent 0 46px,
      rgba(15, 61, 53, .11) 46px 47px),
    /* horizontal streets */
    repeating-linear-gradient(0deg,
      transparent 0 52px,
      rgba(15, 61, 53, .08) 52px 53px),
    /* diagonal hint of a main road */
    linear-gradient(112deg,
      transparent 0 46%,
      rgba(15, 61, 53, .22) 46% 48%,
      transparent 48% 100%),
    /* park blob */
    radial-gradient(circle at 28% 72%, rgba(26, 107, 90, .28), transparent 26%),
    /* secondary park blob */
    radial-gradient(circle at 78% 22%, rgba(26, 107, 90, .16), transparent 22%),
    /* base wash */
    linear-gradient(155deg, #e9f5f1 0%, #f5f1e7 100%);
}

/* Marker pin sits roughly where the clinic is on the stylized map. */
.map-facade-pin {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 56px; height: 56px;
  border-radius: 50% 50% 50% 0;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(-45deg);
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-900, #0a2b25) 100%);
  box-shadow:
    0 12px 22px -8px rgba(15, 61, 53, .55),
    0 2px 0 rgba(255,255,255,.18) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.map-facade-pin svg {
  transform: rotate(45deg);
  width: 24px; height: 24px;
  stroke-width: 2.2;
}
/* Shadow on the "ground" under the pin */
.map-facade-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 46px;
  height: 12px;
  transform: translate(-50%, 0) rotate(45deg);
  background: radial-gradient(ellipse, rgba(15,61,53,.35), transparent 70%);
  border-radius: 50%;
}

/* Bottom address card floats over the stylized map. */
.map-facade-body {
  position: relative;
  margin: 0 20px 20px;
  padding: 18px 20px 16px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  box-shadow: 0 10px 22px -12px rgba(15,61,53,.28);
  min-width: 0;
}
.map-facade-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--slate-900);
  margin-bottom: 4px;
}
.map-facade-address {
  font-style: normal;
  color: var(--slate-600);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.map-facade-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-700);
  font-weight: 700;
  font-size: 14px;
}
.map-facade-cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.map-facade:hover .map-facade-cta svg { transform: translateX(3px); }

.map-facade-external:hover { background: var(--teal-50); color: var(--teal-800); }

/* ===== Contact form ===== */
.contact-form-wrap { min-width: 0; }
.contact-form {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-form-head h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate-900);
  margin: 0 0 4px;
}
.contact-form-head p {
  font-size: 13.5px;
  color: var(--slate-600);
  margin: 0 0 8px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr 1fr; }
}
.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.contact-form-field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
}
.contact-form-field > span em {
  color: var(--terra-600);
  font-style: normal;
  margin-left: 2px;
}
.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--slate-300);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--slate-900);
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%;
}
.contact-form-field textarea { resize: vertical; min-height: 110px; }
.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(26,107,90,.15);
}
/* `:user-invalid` only matches after the user has interacted with the
   field (typed then blurred, or attempted submit) — so empty required
   fields don't glow red on initial page load the way plain `:invalid`
   would. Post-submit, the JS sets aria-invalid for persistent state. */
.contact-form-field input:user-invalid,
.contact-form-field select:user-invalid,
.contact-form-field textarea:user-invalid {
  border-color: var(--terra-500);
}

/* Visible inline error — injected by JS after a field when submit
   validation fails. Stays until the user edits the field (cleared via
   the `input`/`change` listener), unlike the native validation bubble. */
.contact-form-error,
.contact-form .contact-form-error,
.contact-form-fieldset .contact-form-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--terra-700) !important;
  font-weight: 500;
}
.contact-form-error[hidden] { display: none; }

/* Fields flagged invalid by our handler — stronger border + inner
   glow so keyboard users can see which fields need attention even
   before reading the message. */
.contact-form-field input[aria-invalid="true"],
.contact-form-field select[aria-invalid="true"],
.contact-form-field textarea[aria-invalid="true"] {
  border-color: var(--terra-500);
  box-shadow: 0 0 0 3px rgba(183, 63, 83, .14);
}
.contact-form-hp {
  position: absolute;
  inset: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.contact-form-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.contact-form-submit { min-width: 140px; }
.contact-form-submit[disabled] {
  opacity: .6;
  cursor: wait;
}
.contact-form-status {
  margin: 0;
  font-size: 14px;
  color: var(--slate-600);
  flex: 1;
}
.contact-form-status.success { color: var(--teal-800); font-weight: 600; }
.contact-form-status.error   { color: var(--terra-700); font-weight: 600; }

/* --- Form CRO additions (2026-04-18) --- */
/* Note: the per-element [hidden] overrides that used to live here have been
   superseded by the universal `[hidden] { display: none !important; }` rule
   near the top of this stylesheet. Nothing to add here. */

.contact-form-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.contact-form-fieldset legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
  padding: 0;
  margin-bottom: 6px;
}
.contact-form-fieldset legend em {
  color: var(--terra-600);
  font-style: normal;
  margin-left: 2px;
}
/* Invalid fieldset — legend turns red to match the inline error node
   beneath it. Placed AFTER the base legend rule so it wins the cascade. */
.contact-form-fieldset:has([aria-invalid="true"]) > legend {
  color: var(--terra-700);
}
.contact-form-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form-radios label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--slate-800);
  line-height: 1.4;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, background-color .15s ease;
}
.contact-form-radios label:hover {
  border-color: var(--teal-600);
  background: var(--sand-100, #fdf9f3);
}
.contact-form-radios input[type="radio"] {
  margin-top: 3px;
  flex: 0 0 auto;
  width: auto;
  accent-color: var(--teal-600);
}
.contact-form-hint {
  font-size: 12.5px;
  color: var(--slate-500);
  line-height: 1.3;
}
.contact-form-counter {
  align-self: flex-end;
  font-variant-numeric: tabular-nums;
}
.contact-form-counter.is-warn { color: var(--terra-600); }
.contact-form-optional {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--slate-500);
  margin-left: 4px;
}
.contact-form-required-legend {
  margin: 2px 0 0 !important;
  font-size: 12.5px;
  color: var(--slate-500);
}
.contact-form-required-legend em {
  color: var(--terra-600);
  font-style: normal;
  font-weight: 700;
  margin-right: 2px;
}
.contact-form-email-suggestion {
  margin-top: 4px;
}
.contact-form-email-fix {
  background: none;
  border: 0;
  padding: 0;
  color: var(--teal-700);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}
.contact-form-email-fix:hover { color: var(--teal-800); }
.contact-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate-700);
  padding: 10px 12px;
  background: var(--sand-100, #fdf9f3);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
}
.contact-form-consent input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--teal-600);
}
.contact-form-consent a {
  color: var(--teal-700);
  text-decoration: underline;
}
.contact-form-slo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--slate-600);
  margin: 0;
}
.contact-form-slo svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.contact-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.contact-form-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: contactSpin .7s linear infinite;
}
@keyframes contactSpin {
  to { transform: rotate(360deg); }
}
.contact-confirmation {
  background: var(--white);
  border: 1px solid var(--teal-200, #cde7df);
  border-top: 4px solid var(--teal-600);
  border-radius: var(--r-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  outline: none;
}
.contact-confirmation-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal-100, #e3f1ec);
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.contact-confirmation h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--slate-900);
  margin: 0;
}
.contact-confirmation p {
  margin: 0;
  font-size: 15px;
  color: var(--slate-700);
  line-height: 1.5;
}
.contact-confirmation-phone {
  margin-top: 8px !important;
  padding: 12px 14px;
  background: var(--teal-50);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--r-sm);
  font-size: 14.5px;
}
.contact-confirmation-phone a {
  color: var(--teal-800);
  text-decoration: underline;
  font-weight: 600;
}
.contact-confirmation-crisis {
  margin-top: 4px !important;
  padding: 12px 14px;
  background: var(--sand-100, #fdf9f3);
  border-left: 3px solid var(--terra-500);
  border-radius: var(--r-sm);
  font-size: 14px;
}
.contact-confirmation-crisis a {
  color: var(--terra-700);
  text-decoration: underline;
  font-weight: 600;
}
.contact-confirmation-again {
  margin-top: 16px !important;
  text-align: center;
}
.contact-confirmation-again-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  color: var(--teal-700);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 4px;
}
.contact-confirmation-again-btn:hover {
  color: var(--teal-800);
}
.contact-confirmation-again-btn:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
}

/* Multi-checkbox discipline grid */
.contact-form-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 600px) {
  .contact-form-checks { grid-template-columns: 1fr 1fr; }
}
.contact-form-checks label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--slate-800);
  line-height: 1.35;
  padding: 6px 8px;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.contact-form-checks label:hover {
  border-color: var(--teal-600);
  background: var(--sand-100);
}
.contact-form-checks input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
  width: auto;
  accent-color: var(--teal-600);
}

/* Inline radios (Yes/No) */
.contact-form-radios-inline {
  flex-direction: row;
  flex-wrap: wrap;
}
.contact-form-radios-inline label {
  flex: 0 0 auto;
  padding: 6px 14px;
}

/* Collapsible details block */
.contact-form-details {
  border: 1px dashed var(--slate-300);
  border-radius: var(--r-sm);
  padding: 0;
  background: var(--sand-50, #fefcf8);
}
.contact-form-details summary {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-700);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.contact-form-details summary::-webkit-details-marker { display: none; }
.contact-form-details summary::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
  color: var(--teal-600);
  font-weight: 700;
}
.contact-form-details[open] summary::before { content: "–"; }
.contact-form-details-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* "Pour qui?" chip-style radios — horizontal, wrap, compact */
.contact-form-chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.contact-form-chips label {
  flex: 0 1 auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--slate-300);
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.contact-form-chips label:has(input[type="radio"]:checked) {
  border-color: var(--teal-600);
  background: var(--teal-50);
  color: var(--teal-800);
  font-weight: 600;
}
.contact-form-chips label:hover {
  border-color: var(--teal-600);
}
.contact-form-chips input[type="radio"] {
  /* Visually hide radio, rely on chip state. Keyboard + screen reader still get it. */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

/* Textarea auto-grow baseline — still respects manual resize */
.contact-form-field textarea[data-autogrow] {
  min-height: 96px;
  transition: none;
  resize: vertical;
}

/* Draft-restored notice — shown when localStorage had a saved draft */
.contact-form-draft-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 13.5px;
  background: var(--teal-50);
  color: var(--teal-800);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-sm);
}
.contact-form-draft-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-form-draft-clear {
  background: none;
  border: 0;
  padding: 0;
  color: var(--terra-700);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}
.contact-form-draft-clear:hover { color: var(--terra-600); }
.contact-form-draft-dismiss {
  background: none;
  border: 0;
  padding: 0 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--slate-500);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.contact-form-draft-dismiss:hover { color: var(--slate-800); background: var(--slate-100); }

/* Message helper — renders above the counter */
.contact-form-msg-helper {
  color: var(--slate-600);
}

/* Home-page CTA card — replaces the inline form on /#contact */
.contact-cta-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-top: 4px solid var(--teal-600);
  border-radius: var(--r-md);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.contact-cta-card .section-label {
  color: var(--teal-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}
.contact-cta-card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--slate-900);
  margin: 0;
  line-height: 1.2;
}
.contact-cta-card p {
  font-size: 15.5px;
  color: var(--slate-700);
  margin: 0;
  line-height: 1.5;
}
.contact-cta-phone {
  margin-top: 8px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.contact-cta-form {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.contact-cta-slo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--slate-600);
  margin: 4px 0 0;
}
.contact-cta-slo svg { width: 14px; height: 14px; }

/* ===== /contact/ dedicated page ===== */
.contact-page { padding: 32px 0 56px; }
.contact-page-header {
  text-align: center;
  margin-bottom: 32px;
}
.contact-page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--slate-900);
  margin: 6px 0 10px;
}
.contact-page-lede {
  font-size: 17px;
  color: var(--slate-700);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 960px) {
  .contact-page-grid {
    grid-template-columns: 340px 1fr;
    gap: 48px;
  }
}
.contact-page-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* On mobile, move the sidebar BELOW the form so the user hits the form first.
   Keep the full sidebar for users who scroll past. */
@media (max-width: 959px) {
  .contact-page-main  { order: 1; }
  .contact-page-side  { order: 2; }
}

/* Compact mobile-only urgence strip at top of main column (hidden on desktop — the sidebar covers it) */
.contact-mobile-urgence {
  display: none;
}
@media (max-width: 959px) {
  .contact-mobile-urgence {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    font-size: 13.5px;
    padding: 8px 12px;
    margin: 0 0 16px;
    background: #fff5f3;
    border: 1px solid var(--terra-500);
    border-left: 3px solid var(--terra-600);
    border-radius: var(--r-sm);
    color: var(--terra-700);
  }
  .contact-mobile-urgence strong { color: var(--terra-700); }
  .contact-mobile-urgence a {
    color: var(--terra-700);
    font-weight: 600;
    text-decoration: underline;
  }
  .contact-mobile-urgence span[aria-hidden] { color: var(--slate-400); }
}

/* "Voici comment on procède" — always-visible pre-form card. Reframes
   the old hidden "Avant de nous écrire" into a promise + transparency
   block: 3-step flow above, current per-service wait times below. */
.intake-flow {
  border: 1px solid var(--teal-100);
  border-left: 4px solid var(--teal-700);
  border-radius: var(--r-md);
  background: var(--teal-50);
  padding: 20px 22px;
  margin: 0 0 24px;
}
.intake-flow-header { margin-bottom: 18px; }
.intake-flow-header h2 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate-900);
  margin: 0 0 4px;
  line-height: 1.2;
}
.intake-flow-header p {
  margin: 0;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.5;
}

/* Step flow — stacked on mobile, horizontal row on ≥600px. */
.intake-flow-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  .intake-flow-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    position: relative;
  }
  /* Subtle connector line behind the step numbers on desktop — aligns
     with the 14px vertical center of the 28px numeral circles. */
  .intake-flow-steps::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--slate-300) 0 4px, transparent 4px 8px);
    z-index: 0;
  }
}
.intake-flow-steps > li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  position: relative;
  z-index: 1;
  margin: 0;
}
@media (min-width: 640px) {
  .intake-flow-steps > li {
    grid-template-columns: auto 1fr;
    background: var(--teal-50);
    padding: 0 4px;
  }
}
.intake-flow-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal-700);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--teal-50);
  font-variant-numeric: tabular-nums;
}
.intake-flow-step-label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--slate-900);
  line-height: 1.3;
}
.intake-flow-step-sub {
  display: block;
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.4;
  margin-top: 2px;
}

/* Per-service waits — compact grid of cards */
.intake-flow-waits {
  padding-top: 16px;
  border-top: 1px dashed var(--slate-300);
}
.intake-flow-waits-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal-800);
  margin: 0 0 10px;
}
.intake-flow-wait-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  .intake-flow-wait-grid { grid-template-columns: repeat(2, 1fr); }
}
.intake-flow-wait-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 0;
}
.intake-flow-wait-discipline {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 8px;
  line-height: 1.25;
}
.intake-flow-wait-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 13.5px;
  line-height: 1.4;
}
.intake-flow-wait-key {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
}
.intake-flow-wait-val { color: var(--slate-800); }
.intake-flow-wait-val--accent {
  color: var(--teal-800);
  font-weight: 700;
}
.intake-flow-wait-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--slate-200);
  font-size: 12.5px;
  color: var(--slate-600);
  font-style: italic;
  line-height: 1.45;
}
.contact-page-side-block {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.contact-page-side-block h2 {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--slate-900);
  margin: 0 0 10px;
}
/* Compact 3-step "Voici comment on procède" for the sidebar. Vertical
   stack with teal numeral circles — echoes the full-width version in
   the main column (which used to live there before the /contact/
   restructure) but fits in a ~280 px sidebar. */
.contact-page-side-flow h2 {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--slate-900);
  margin: 0 0 4px;
}
.contact-page-side-flow-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--slate-600);
  line-height: 1.45;
}
.sidebar-flow-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-flow-steps > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.sidebar-flow-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-700);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.sidebar-flow-steps > li > div strong {
  display: block;
  font-size: 13.5px;
  color: var(--slate-900);
  line-height: 1.3;
  margin-bottom: 2px;
}
.sidebar-flow-steps > li > div span {
  display: block;
  font-size: 12.5px;
  color: var(--slate-600);
  line-height: 1.4;
}

/* Crisis sub-block inside the Appelez-nous card. A divider + left accent
   on terra-500 keeps it distinct from the NAP items above without
   spawning a second sidebar card. */
.contact-page-side-crisis {
  margin-top: 16px;
  padding: 14px 16px 12px;
  border-top: 1px solid var(--slate-200);
  background: rgba(230, 87, 60, .04);
  border-left: 3px solid var(--terra-500);
  border-radius: 0 var(--r-sm, 4px) var(--r-sm, 4px) 0;
}
.contact-page-side-crisis h3 {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0 0 6px;
  color: var(--terra-700, #b1492a);
}
.contact-page-side-crisis p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate-700);
}

.contact-page-urgence {
  /* Light terra wash — reads as an alert tint instead of the old
     sand-100 (which felt generic and doesn't signal urgency). Matches
     the mobile crisis strip's treatment for visual consistency. */
  background: #fff5f3;
  border-color: var(--terra-500);
  border-left: 4px solid var(--terra-500);
}
.contact-page-urgence p { font-size: 14px; color: var(--slate-700); margin: 0 0 10px; }
.contact-page-crisis {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.contact-page-crisis a {
  color: var(--terra-700);
  text-decoration: underline;
  font-weight: 600;
}

/* Reusable crisis box rendered inside service pages (psychologie,
   psychoeducation, education-specialisee, travail-social). Same visual
   treatment as .contact-page-urgence, slightly tighter for in-flow use. */
.crisis-box {
  background: #fff5f3;
  border: 1px solid var(--terra-500);
  border-left: 4px solid var(--terra-500);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 24px 0;
}
.crisis-box-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--terra-700);
}
.crisis-box-lead { font-size: 14px; color: var(--slate-700); margin: 0 0 10px; }
.crisis-box-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.crisis-box-list a {
  color: var(--terra-700);
  text-decoration: underline;
  font-weight: 600;
}
.contact-page-side-block .contact-item { padding: 10px 0; border-top: 1px solid var(--slate-100); }
.contact-page-side-block .contact-item:first-of-type { border-top: 0; padding-top: 0; }
.contact-page-side-block .contact-item-icon {
  background: var(--teal-50);
  color: var(--teal-700);
}
.contact-page-side-block .contact-item-label {
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.contact-page-side-block .contact-item-value {
  font-size: 14.5px;
  color: var(--slate-800);
}
.contact-page-side-block .contact-item-value a {
  color: var(--teal-700);
}
.contact-item-note { color: var(--slate-500); font-size: 13px; }
.contact-page-side-note {
  /* Cool neutral off-white instead of sand — consistent with the rest
     of the sidebar's white/teal palette. */
  background: var(--slate-50);
  font-size: 13px;
  color: var(--slate-700);
}
.contact-page-side-note p { margin: 0 0 8px; line-height: 1.45; }
.contact-page-side-note p:last-child { margin-bottom: 0; }
.contact-page-main { min-width: 0; }
.contact-page-main .contact-form { max-width: 100%; }

/* Site-wide announcement banner (CMS-editable — see _data/announcements.js) */
.announcement-stack { display: flex; flex-direction: column; }
.announcement-banner {
  padding: 10px 0;
  font-size: 14.5px;
  line-height: 1.45;
  border-bottom: 1px solid var(--slate-200);
  background: var(--sand-100);
  color: var(--slate-800);
}
.announcement-banner--info  { background: var(--teal-50); color: var(--teal-800); border-bottom-color: var(--teal-100); }
.announcement-banner--warn  { background: #fff6e6; color: #7a4a00; border-bottom-color: #f0d9a4; }
.announcement-banner--alert { background: #fff5f3; color: var(--terra-700); border-bottom-color: var(--terra-500); }
.announcement-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.announcement-banner-body {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.announcement-banner-title { font-weight: 700; }
.announcement-banner-text  { opacity: .95; }
.announcement-banner-cta {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

/* Severity variants for contact-page alerts (same scheme) */
.contact-intake-alert--info  { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-600); border-left-color: var(--teal-700); }
.contact-intake-alert--warn  { background: #fff6e6; color: #7a4a00; border-color: #e0b15a; border-left-color: #b37a13; }
.contact-intake-alert--alert { background: #fff5f3; color: var(--terra-700); border-color: var(--terra-500); border-left-color: var(--terra-600); }
.contact-intake-alert p { margin: 6px 0 0; }

/* Intake info + waitlist alert (pulled from _data/intakeInfo.js) */
.contact-intake-alert {
  background: #fff5f3;
  border: 1px solid var(--terra-500);
  border-left: 4px solid var(--terra-600);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin: 0 0 20px;
  color: var(--terra-700);
  font-size: 14.5px;
}
.contact-intake-alert strong { display: block; margin-bottom: 6px; color: var(--terra-700); }
.contact-intake-alert ul { margin: 0; padding-left: 20px; }
.contact-intake-alert li { margin: 4px 0; }

/* ===== SERVICE PAGES =====
   Duotone photo hero: grayscale background image rendered at low opacity
   under a uniform teal-900 scrim, so white text clears WCAG AAA (~9:1)
   at every pixel regardless of image content. */
.service-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--teal-900);
  color: var(--white);
  padding: clamp(56px, 10vw, 120px) 0 clamp(40px, 6vw, 72px);
}
.service-hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -2;
  background-image: url('/images/hero/team-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.02);
}
.service-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,61,53,.82) 0%, rgba(15,61,53,.88) 100%);
}
.service-hero h1 { color: var(--white); margin-top: 16px; }
.service-hero .service-subtitle {
  margin-top: 12px;
  color: rgba(255,255,255,.92);
  font-size: clamp(16px, 2vw, 20px);
  max-width: 680px;
}
.service-hero .service-subtitle strong,
.service-hero h1 em { color: var(--sand-200); font-style: normal; font-weight: inherit; }
/* Default breadcrumb — readable on light (white / sand) backgrounds.
   The dark-hero variant below re-whites it for service/team/bureau heroes. */
.breadcrumb { font-size: 14px; color: var(--slate-600); margin-bottom: 4px; }
.breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--slate-900); }
.breadcrumb [aria-current="page"] { color: var(--slate-700); }

/* Dark-hero variant — white text with hover to pure white. Applied
   inside the service, trouble, team and bureau heroes where the
   background is a dark image/gradient. */
.service-hero .breadcrumb,
.team-hero .breadcrumb {
  color: rgba(255,255,255,.88);
}
.service-hero .breadcrumb a:hover,
.team-hero .breadcrumb a:hover {
  color: var(--white);
}
.service-hero .breadcrumb [aria-current="page"],
.team-hero .breadcrumb [aria-current="page"] {
  color: rgba(255,255,255,.96);
}


.service-body { padding: clamp(48px, 7vw, 80px) 0; }
.service-layout { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) {
  .service-layout { grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
}
.service-content h2 {
  margin-top: 40px;
  margin-bottom: 14px;
  color: var(--teal-800);
}
.service-content h2:first-child { margin-top: 0; }
.service-content p { margin-bottom: 16px; line-height: 1.75; }
.service-content ul { padding-left: 1.25em; margin-bottom: 20px; }
.service-content li { margin: 8px 0; line-height: 1.65; }

.service-sidebar {
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 900px) {
  .service-sidebar { position: sticky; top: calc(var(--header-height) + 16px); }
}
.sidebar-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 24px;
}
.sidebar-title {
  font-size: 16px;
  color: var(--slate-900);
  margin-bottom: 14px;
  font-family: var(--font-display);
}
.sidebar-team { list-style: none; padding: 0; }
.sidebar-team-member {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--slate-100);
}
.sidebar-team-member:last-child { border-bottom: none; }
.sidebar-team-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal-100), var(--sand-200));
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-team-photo picture,
.sidebar-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar-team-photo--initials {
  color: var(--teal-800);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .02em;
  /* Nudge up ~1 px to correct for display-font cap-height so the
     initials read as optically centered, not geometrically centered. */
  padding-top: 1px;
}
.sidebar-team-name a { color: inherit; text-decoration: none; }
.sidebar-team-name a:hover { color: var(--teal-700); text-decoration: underline; }
.sidebar-team-name { font-weight: 600; font-size: 14px; color: var(--slate-900); }
.sidebar-team-title { font-size: 12px; color: var(--slate-600); }
.sidebar-cta { background: var(--teal-900); color: var(--white); border-color: var(--teal-900); }
.sidebar-cta .sidebar-title { color: var(--white); }
.sidebar-cta p { color: rgba(255,255,255,.85); font-size: 14px; margin-bottom: 16px; }
.sidebar-cta .btn { width: 100%; margin-bottom: 10px; }
.sidebar-cta .btn:last-child { margin-bottom: 0; }
.sidebar-cta .btn-secondary { background: transparent; color: var(--white); border-color: rgba(255,255,255,.3); }
.sidebar-cta .btn-secondary:hover { background: rgba(255,255,255,.08); }

/* Tertiary CTA in sidebar — lien texte téléphone, discret. */
.sidebar-cta-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .15s ease;
}
.sidebar-cta-phone:hover { color: var(--white); }
.sidebar-cta-phone svg { width: 14px; height: 14px; opacity: .75; }
/* Override .sidebar-cta .btn:last-child margin-bottom: 0 — la dernière
   place est désormais le lien texte, mais on veut que le bouton mail
   au-dessus garde sa marge pour respirer. */
.sidebar-cta .btn-secondary.sidebar-cta-email { margin-bottom: 4px; }

/* ===== TEAM PAGE — shared hero for team, bureaux, and bureau-detail ===== */
.team-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 7vw, 88px) 0 clamp(32px, 5vw, 52px);
  color: var(--white);
  background-color: var(--teal-900);
}
.team-hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -2;
  background-image: url('/images/hero/team-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.02);
}
.team-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,61,53,.80) 0%, rgba(15,61,53,.88) 100%);
}
.team-hero h1 { color: var(--white); margin-top: 12px; }
.team-hero p { color: rgba(255,255,255,.92); margin-top: 8px; }
.team-hero-note { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 16px; }

.team-filters-wrap {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  padding: 12px 0;
  scrollbar-width: thin;
}
.team-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 20px;
  row-gap: 10px;
}
.team-filter {
  padding: 10px 16px;
  min-height: 40px;
  border: 1px solid var(--slate-300);
  background: var(--white);
  color: var(--slate-700);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.team-filter:hover { background: var(--sand-50); border-color: var(--teal-600); }
.team-filter.active,
.team-filter[aria-pressed="true"] {
  background: var(--teal-800);
  color: var(--white);
  border-color: var(--teal-800);
  font-weight: 600;
}

/* Subdued section label — small uppercase caption, saves ~80px per section vs old heading */
.team-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 18px;
  padding: 16px 0;
  align-items: start;
}
@media (min-width: 900px) {
  .team-sections { grid-template-columns: repeat(3, 1fr); }
  .team-section { grid-column: 1 / -1; }
  .team-section[data-cards="1"] { grid-column: span 1; }
  .team-section[data-cards="2"] { grid-column: span 2; }
}

.team-section { padding: 0; margin: 0; }
.team-section[hidden] { display: none !important; }

/* Team-grid inside each section adapts to available columns */
@media (min-width: 900px) {
  .team-section[data-cards="1"] .team-grid { grid-template-columns: 1fr; }
  .team-section[data-cards="2"] .team-grid { grid-template-columns: repeat(2, 1fr); }
}
.team-section-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 14px;
  padding: 0;
  border: none;
}

.team-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.team-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: box-shadow .25s, transform .25s, border-color .25s;
  min-height: 180px;
}
.team-card:hover {
  box-shadow: 0 2px 6px rgba(15,61,53,.05), 0 10px 24px rgba(26,107,90,.10);
  transform: translateY(-2px);
  border-color: var(--teal-500);
}
@media (hover: none) and (pointer: coarse) { .team-card:hover { transform: none; } }

/* Photo on the LEFT — portrait shape with a soft fade into the card on the right edge */
.team-card-photo {
  position: relative;
  flex-shrink: 0;
  width: 112px;
  align-self: stretch;
  overflow: hidden;
  background: var(--slate-100);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
}
@media (min-width: 700px) {
  .team-card-photo { width: 120px; }
}
.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Initials fallback for missing photos */
.team-card-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--teal-100) 0%, var(--sand-200) 100%);
}
.team-card-photo--initials span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--teal-800);
  letter-spacing: -.02em;
  line-height: 1;
}

/* Content stack on the RIGHT of the photo */
.team-card-content {
  padding: 14px 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.team-card:has(.team-card-details) .team-card-content {
  justify-content: flex-start;
}
.team-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--slate-900);
  line-height: 1.3;
}
.team-card-title {
  font-size: 13px;
  color: var(--teal-700);
  font-weight: 500;
  line-height: 1.35;
}
.team-card-details {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-card-detail {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--slate-700);
  line-height: 1.4;
}
.team-card-detail svg {
  width: 12px; height: 12px;
  color: var(--teal-700);
  flex-shrink: 0;
  margin-top: 3px;
}
.team-card-detail a {
  color: var(--teal-700);
  text-decoration: none;
  word-break: break-word;
}
.team-card-detail a:hover { text-decoration: underline; }
.team-card-detail span { min-width: 0; word-break: break-word; }
.team-card-note {
  font-size: 11.5px;
  color: var(--terra-700);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

/* "En savoir plus" anchor at the bottom-right of each card.
   Matches the details text size for visual rhythm. */
.team-card-more {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-700);
  text-decoration: none;
  transition: color .15s ease;
}
.team-card-more svg {
  width: 12px;
  height: 12px;
  transition: transform .15s ease;
}
.team-card-more:hover { color: var(--teal-900); }
.team-card-more:hover svg { transform: translateX(2px); }

/* ===== BUREAUX ===== */
.bureau-pitch {
  max-width: 920px;
  margin: 0 auto 56px;
}
.bureau-pitch-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--slate-800);
  margin: 0 0 28px;
  text-align: center;
}
.bureau-pitch-lede strong { color: var(--teal-800); }
/* Bureau "pourquoi RESO" — Before/After contrast. Side-by-side columns
   make the switching cost vivid: left column shows the pain the clinician
   is experiencing in solo practice, right column shows the RESO answer.
   Activates contrast effect + loss aversion + concrete social-proof
   numbers — stronger than a benefits-tile grid for a status-quo-with-pain
   audience. */
/* Bureaux "Pourquoi RESO" — compact 4-up benefit strip. Horizontal on
   desktop, 2×2 on tablet, stacked on phone. Replaces the old two-
   column Before/After contrast grid. */
.bureau-pitch-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .bureau-pitch-strip { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .bureau-pitch-strip { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.bureau-pitch-strip > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid rgba(26, 107, 90, 0.22);
  border-radius: var(--r-md);
  /* Premium elevation recipe — solid white surface + crisp inset top
     highlight (light from above) + close contact shadow + ambient lift.
     No two-color gradient on the surface itself. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 61, 53, 0.04),
    0 10px 26px -14px rgba(15, 61, 53, 0.18);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bureau-pitch-strip > li:hover {
  border-color: rgba(26, 107, 90, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 4px rgba(15, 61, 53, 0.06),
    0 20px 36px -16px rgba(15, 61, 53, 0.24);
  transform: translateY(-2px);
}
.bureau-pitch-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-100);
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(26, 107, 90, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 61, 53, 0.05);
}
.bureau-pitch-icon svg { width: 20px; height: 20px; }
.bureau-pitch-strip > li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bureau-pitch-strip > li strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--slate-900);
  line-height: 1.25;
}
.bureau-pitch-strip > li span {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.4;
}

/* Bureau listings — single-column stack of rows (Airbnb-style).
   Alternates image side on desktop to prevent visual monotony; stacks
   photo-above-text on mobile. One prominent CTA per row + a detail link. */
.bureau-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 32px; }

.bureau-row {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.bureau-row:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); }

@media (min-width: 820px) {
  .bureau-row { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .bureau-row:nth-child(even) .bureau-row-media { order: 2; }
  .bureau-row:nth-child(even) .bureau-row-body  { order: 1; }
}

.bureau-row-media {
  position: relative;
  background: var(--slate-100);
  min-height: 260px;
}
.bureau-row-media-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: block;
}
.bureau-row-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev/next arrows that cycle the active thumb. Overlay the main image
   (listing .bureau-row-media + detail .bureau-detail-main-wrap). Sit on
   the left/right edge, dark translucent pill matching the carousel. */
.bureau-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 61, 53, .62);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  backdrop-filter: blur(4px);
  transition: background .15s ease, transform .15s ease;
  opacity: .85;
}
.bureau-nav-arrow:hover { background: rgba(15, 61, 53, .82); opacity: 1; }
.bureau-nav-arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.bureau-nav-arrow svg { width: 20px; height: 20px; }
.bureau-nav-prev { left: 12px; }
.bureau-nav-next { right: 12px; }
@media (max-width: 520px) {
  .bureau-nav-arrow { width: 36px; height: 36px; }
  .bureau-nav-arrow svg { width: 18px; height: 18px; }
}

.bureau-photo-count {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(15,61,53,.78);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  pointer-events: none;
}
.bureau-photo-count svg { width: 14px; height: 14px; }

.bureau-row-thumbs {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}
.bureau-row-thumbs::-webkit-scrollbar { display: none; }
.bureau-thumb {
  flex-shrink: 0;
  display: block;
  width: 64px; height: 44px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: .85;
  text-decoration: none;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
a.bureau-thumb { text-decoration: none; }
.bureau-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Defensive: thumb <img> has no width/height attribute, but if
     anything upstream adds one, cap it to the container. */
  max-width: 100%;
}
.bureau-thumb:hover { opacity: 1; transform: translateY(-1px); }
.bureau-thumb.active { border-color: var(--teal-300); opacity: 1; }

.bureau-row-body {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.bureau-row-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bureau-row-size {
  font-size: 13px;
  color: var(--teal-700);
  font-weight: 600;
}

.bureau-card-avail {
  display: inline-block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.bureau-card-avail.avail-plein    { color: var(--teal-800);  background: var(--teal-50); }
.bureau-card-avail.avail-partiel  { color: var(--amber-700); background: var(--amber-50); }
.bureau-card-avail.avail-flex     { color: var(--indigo-700); background: var(--indigo-50); }

.bureau-row-name { margin: 2px 0 0; font-size: 22px; line-height: 1.2; }

/* The hook is the conversion moment — per-room demand proof.
   Typography bumps it above the generic description. */
.bureau-row-hook {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-800);
  line-height: 1.45;
}
.bureau-row-description {
  color: var(--slate-600);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 6px 0 4px;
}

/* CTA cluster: primary = async planning (form), secondary = direct phone
   call, microcopy below = regret-aversion ("Sans engagement") +
   concreteness ("Réponse dans la journée") + learn-more escape hatch. */
.bureau-row-ctas {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.bureau-row-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 26px;
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800, #0f3d35) 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 12px 26px -10px rgba(15,61,53,.45), 0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.bureau-row-primary-cta:hover {
  transform: translateY(-1px);
  color: #fff;
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-900, #0a2b25) 100%);
  box-shadow: 0 16px 30px -10px rgba(15,61,53,.55), 0 1px 0 rgba(255,255,255,.1) inset;
  filter: brightness(1.04);
}
.bureau-row-primary-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.bureau-row-primary-cta:hover svg { transform: translateX(3px); }

.bureau-row-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-800, #0f3d35);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.bureau-row-phone-cta:hover { border-bottom-color: var(--teal-500); }
.bureau-row-phone-cta svg { width: 16px; height: 16px; }
.bureau-row-phone-cta span { font-variant-numeric: tabular-nums; }

.bureau-row-reassure {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--slate-500, #6b7a86);
  line-height: 1.5;
}
.bureau-row-reassure a {
  color: var(--teal-700);
  text-decoration: none;
  font-weight: 600;
}
.bureau-row-reassure a:hover { color: var(--teal-900); text-decoration: underline; }

/* Hero for bureaux page */
.bureau-hero {
  /* Tighter than the team page hero — fewer lines, less air. */
  padding: clamp(36px, 5vw, 56px) 0 clamp(24px, 3.5vw, 40px);
}
.bureau-hero h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.bureau-hero-sub {
  font-size: 17px;
  max-width: 640px;
  margin-top: 10px;
  color: rgba(255,255,255,.92);
}
.bureau-hero-sub strong { color: var(--white); font-weight: 700; }
.bureau-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.bureau-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 26px;
  background: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-700) 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 14px 28px -10px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.16) inset;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.bureau-hero-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 32px -10px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.bureau-hero-primary svg { width: 16px; height: 16px; transition: transform .2s ease; }
.bureau-hero-primary:hover svg { transform: translateX(3px); }

.bureau-trust-strip {
  background: var(--teal-900);
  color: rgba(255,255,255,.9);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bureau-trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  justify-content: center;
  font-size: 14px;
}
.bureau-trust-items strong { color: var(--white); font-weight: 700; }

.bureau-target-header {
  margin-top: 58px;
}

.bureau-disciplines {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-md);
}

.bureau-disciplines-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-800);
}

.bureau-disciplines-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bureau-disciplines-chips li {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid rgba(26, 107, 90, 0.22);
  border-radius: 999px;
  color: var(--slate-800);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}

.bureau-disciplines-chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  flex-shrink: 0;
}

.bureau-target-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 22px;
}

@media (min-width: 680px) {
  .bureau-target-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .bureau-target-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bureau-target-card {
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 22px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}

.bureau-target-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bureau-target-card h3 {
  margin: 14px 0 8px;
  font-size: 18px;
  line-height: 1.25;
}

.bureau-target-card p {
  margin: 0;
  color: var(--slate-600);
  font-size: 14px;
  line-height: 1.6;
}

.bureau-lead-section {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 58px;
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(243, 250, 247, .94), rgba(255, 255, 255, .98)),
    var(--white);
}

@media (min-width: 960px) {
  .bureau-lead-section {
    grid-template-columns: minmax(0, .8fr) minmax(420px, 1fr);
    gap: 42px;
  }
}

.bureau-lead-copy {
  min-width: 0;
  width: 100%;
}

.bureau-lead-copy h2 {
  margin: 10px 0 12px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
}

.bureau-lead-copy p {
  color: var(--slate-700);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.bureau-lead-points {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 12px;
}

.bureau-lead-points li {
  position: relative;
  padding-left: 24px;
  color: var(--slate-700);
  font-size: 14.5px;
  line-height: 1.55;
}

.bureau-lead-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px var(--teal-50);
}

.bureau-lead-form {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-shadow: var(--shadow-md);
}

.bureau-lead-form .contact-form-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.bureau-lead-form .contact-form-slo {
  margin: 0;
  text-align: center;
  color: var(--slate-600);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bureau-lead-form .contact-form-submit {
  width: 100%;
  justify-content: center;
}

.bureau-lead-alt {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--teal-100);
  color: var(--slate-700);
  font-size: 14px;
}

.bureau-lead-alt a {
  color: var(--teal-700);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.bureau-lead-alt a:hover {
  color: var(--teal-900);
}

.bureau-lead-wrap {
  padding-top: 0;
}

.bureau-form-options {
  grid-template-columns: 1fr;
}

.bureau-form-quick .bureau-form-options {
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .bureau-form-quick .bureau-form-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bureau-form-more {
  margin-top: -2px;
}

.bureau-form-more .contact-form-details-body {
  gap: 16px;
}

.bureau-lead-confirmation {
  align-self: start;
  background: var(--white);
}

@media (max-width: 560px) {
  .bureau-lead-section {
    padding: 24px 18px;
    border-radius: var(--r-md);
  }

  .bureau-lead-copy h2 {
    font-size: 28px;
  }
}

/* Steps */
.bureau-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px)  { .bureau-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bureau-steps { grid-template-columns: repeat(4, 1fr); } }
.bureau-steps li {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  margin: 0;
}
.bureau-step-num {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--teal-700);
  color: var(--white);
  font-weight: 700;
  align-items: center; justify-content: center;
  margin-bottom: 12px;
  font-size: 14px;
}
.bureau-steps li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  margin-bottom: 4px;
}
.bureau-steps li p {
  font-size: 13.5px;
  color: var(--slate-600);
  margin: 0;
  line-height: 1.5;
}

.bureau-faq { max-width: 820px; margin: 0 auto; }

/* Bureau detail page */
.bureau-detail-gallery { margin-bottom: 22px; }
.bureau-detail-main-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.bureau-detail-main {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: var(--slate-100);
  overflow: hidden;
  cursor: pointer;
}
.bureau-detail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--slate-900);
  cursor: pointer;
  display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(15,61,53,.18);
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.bureau-detail-arrow:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.08);
}
.bureau-detail-arrow svg { width: 18px; height: 18px; stroke-width: 2.4; }
.bureau-detail-prev { left: 14px; }
.bureau-detail-next { right: 14px; }
@media (max-width: 520px) {
  .bureau-detail-arrow { width: 36px; height: 36px; }
  .bureau-detail-prev { left: 8px; }
  .bureau-detail-next { right: 8px; }
}
.bureau-detail-main img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}
.bureau-detail-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding: 2px;
}
.bureau-detail-thumbs .bureau-thumb {
  width: 88px; height: 66px;
}
.bureau-detail-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bureau-detail-size {
  font-size: 14px;
  color: var(--slate-600);
  font-weight: 600;
}
.bureau-detail-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-700);
  margin-bottom: 28px;
}
.bureau-profile-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 28px;
}

/* Numbered "Pourquoi ce local?" grid — editorial style */
.bureau-why-grid {
  list-style: none;
  padding: 0;
  margin: 16px 0 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  counter-reset: bureau-why;
}
@media (min-width: 700px) {
  .bureau-why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
.bureau-why-grid li {
  position: relative;
  padding: 20px 22px 20px 22px;
  border-top: 1px solid var(--slate-200);
  margin: 0;
  min-height: 110px;
}
.bureau-why-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--teal-500);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 10px;
  opacity: .85;
}
.bureau-why-grid li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--slate-900);
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
.bureau-why-grid li p {
  font-size: 14px;
  color: var(--slate-600);
  margin: 0;
  line-height: 1.55;
}
.bureau-profile-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 15px;
  color: var(--slate-700);
  margin: 0;
}
.bureau-profile-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-600);
}

.bureau-includes {
  background: var(--white);
  border: 2px solid var(--teal-100, #d7ebe4);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 28px 0;
}
.bureau-includes-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--teal-900);
  margin-bottom: 12px;
}
.bureau-includes-check {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--teal-700);
  color: var(--white);
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.bureau-includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
}
@media (max-width: 560px) {
  .bureau-includes ul { grid-template-columns: 1fr; }
}
.bureau-includes li {
  font-size: 14px;
  color: var(--slate-700);
  padding-left: 18px;
  position: relative;
  margin: 0;
}
.bureau-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal-600);
  font-weight: 700;
}

.bureau-midcta {
  margin: 32px 0;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--teal-50) 0%, var(--sand-50) 100%);
  border: 1px solid var(--teal-100, #d7ebe4);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.bureau-midcta h3 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--teal-900);
}
.bureau-midcta p {
  font-size: 14px;
  color: var(--slate-700);
  margin: 0;
}
.bureau-midcta .btn { flex-shrink: 0; }

.sidebar-avail {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.18);
  color: var(--white);
}
.sidebar-quick-facts {
  background: var(--white);
  color: var(--slate-800);
  margin-top: 16px;
  padding: 18px 22px;
}
.sidebar-quick-facts h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate-500);
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
}
.sidebar-quick-facts dl {
  margin: 0;
}
.sidebar-quick-facts dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: 14px;
}
.sidebar-quick-facts dl > div:last-child { border-bottom: 0; }
.sidebar-quick-facts dt { color: var(--slate-600); font-weight: 500; margin: 0; }
.sidebar-quick-facts dd { color: var(--slate-900); font-weight: 600; margin: 0; text-align: right; }

/* ===== Bureau photo galleries — PhotoSwipe integration =============
   Each .pswp-gallery holds one bureau's photos. The first anchor is
   hidden (visually reprezented by the main-image button above); the
   rest are the visible thumb strip. Custom caption text for the
   lightbox lives below. */
.pswp-item--hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* Caption chip floating over the lightbox */
.pswp__custom-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 13px;
  border-radius: 999px;
  pointer-events: none;
}

/* ===== LEGAL PAGES ===== */
.legal-page { padding: clamp(48px, 7vw, 80px) 0; }
.legal-page h1 { margin-bottom: 8px; }
.legal-meta { color: var(--slate-500); margin-bottom: 32px; }
.legal-page h2 { margin-top: 36px; margin-bottom: 12px; font-size: 22px; }
.legal-page ul { margin-bottom: 16px; padding-left: 1.25em; }
.legal-page address {
  font-style: normal;
  background: var(--sand-50);
  padding: 20px;
  border-radius: var(--r-md);
  border-left: 4px solid var(--teal-600);
  margin: 16px 0;
}
.legal-page ol { margin-bottom: 16px; padding-left: 1.5em; }
.legal-page ol li { margin: 6px 0; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14.5px;
}
.legal-table th,
.legal-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--slate-200);
  line-height: 1.4;
}
.legal-table th {
  background: var(--sand-100);
  font-weight: 700;
  color: var(--slate-800);
}
.legal-table tr:nth-child(even) td { background: var(--sand-50, #fefcf8); }

/* ===== /ressources/ hub + children ===== */
.ressources-page,
.ressource-page { padding: 32px 0 56px; }
.ressources-page .breadcrumb,
.ressource-page .breadcrumb { margin-bottom: 16px; }
.ressources-header,
.ressource-header {
  text-align: center;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--slate-200);
}
.ressources-header h1,
.ressource-header h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  color: var(--slate-900);
  margin: 8px 0 16px;
}
.ressources-lede,
.ressource-lede {
  font-size: 17px;
  color: var(--slate-700);
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto;
}

/* Section titles on the hub */
.ressources-section { margin: 0 0 40px; }
.ressources-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin: 0 0 14px;
}

/* Featured hero article — "Par où commencer?" as the most useful
   first stop. Full-width gradient card with a soft accent badge. */
.ressources-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  padding: 28px 28px 30px;
  background: linear-gradient(160deg, var(--teal-50) 0%, #ffffff 65%);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--slate-900);
  margin: 0 0 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,61,53,.04),
    0 20px 40px -28px rgba(15,61,53,.20);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  position: relative;
  overflow: hidden;
}
@media (min-width: 720px) {
  .ressources-featured {
    grid-template-columns: 1fr 120px;
    padding: 36px 40px 38px;
    gap: 28px;
  }
}
.ressources-featured:hover {
  border-color: var(--teal-500);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(15,61,53,.06),
    0 28px 50px -26px rgba(15,61,53,.28);
}
.ressources-featured-body { min-width: 0; }
.ressources-featured-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin-bottom: 10px;
}
.ressources-featured h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--slate-900);
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.ressources-featured p {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--slate-700);
  line-height: 1.55;
  max-width: 60ch;
}
.ressources-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-800);
  font-weight: 700;
  font-size: 15px;
}
.ressources-featured-cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.ressources-featured:hover .ressources-featured-cta svg { transform: translateX(3px); }
.ressources-featured-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--white);
  color: var(--teal-700);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  justify-self: end;
  border: 1px solid var(--teal-100);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 18px -8px rgba(15,61,53,.25);
}
.ressources-featured-badge svg { width: 36px; height: 36px; }
@media (min-width: 720px) {
  .ressources-featured-badge { display: inline-flex; }
}

/* Comparison cards — equal weight, 2-col on wider, stacked on mobile */
.ressources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) { .ressources-grid { grid-template-columns: 1fr 1fr; } }
.ressources-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--teal-600);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--slate-800);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ressources-card:hover {
  border-color: var(--teal-800);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(15,61,53,.04), 0 14px 28px -18px rgba(15,61,53,.22);
}
.ressources-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.ressources-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate-900);
  margin: 0;
  line-height: 1.2;
}
.ressources-card p {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--slate-700);
  line-height: 1.55;
}
.ressources-card-cta {
  margin-top: auto;
  padding-top: 10px;
  color: var(--teal-700);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  white-space: nowrap;
}
.ressources-card-cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.ressources-card:hover .ressources-card-cta svg { transform: translateX(3px); }

/* "Voir aussi" strip — 3 compact chip-cards for cross-links to
   other planning pages. Visually distinct from the article cards
   above (horizontal layout with icon badge, denser). */
.ressources-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ressources-strip > li { margin: 0; }
.ressources-strip a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--slate-900);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ressources-strip a:hover {
  border-color: var(--teal-500);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15,61,53,.04), 0 10px 20px -14px rgba(15,61,53,.18);
}
.ressources-strip-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--teal-50);
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-100);
}
.ressources-strip-icon svg { width: 16px; height: 16px; }
.ressources-strip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ressources-strip-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--slate-900);
  line-height: 1.2;
}
.ressources-strip-sub {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.4;
}
.ressources-strip-arrow {
  color: var(--teal-700);
  display: inline-flex;
}
.ressources-strip-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform .15s ease;
}
.ressources-strip a:hover .ressources-strip-arrow svg { transform: translateX(3px); }

/* Ressource-page sections (comparison + decision-tree pages) */
.ressource-section { margin: 0 0 40px; }
.ressource-section h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--slate-900);
  margin: 0 0 12px;
}
.ressource-section p,
.ressource-section > ul {
  font-size: 15.5px;
  color: var(--slate-700);
  line-height: 1.65;
  max-width: 68ch;
}
.ressource-section > ul { padding-left: 1.2em; }
.ressource-section > ul > li { margin: 4px 0; }
.ressource-section h3 {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--slate-900);
  margin: 20px 0 8px;
}
.ressource-section ul.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.ressource-section ul.checklist > li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
}
.ressource-section ul.checklist > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.ressource-section ul.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  border-left: 3px solid var(--teal-200, #99f6e4);
}
.ressource-section ul.timeline-list > li {
  padding: 6px 0 6px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
}
.ressource-section .compare-table-wrap {
  overflow-x: auto;
  margin: 0 0 14px;
}
.ressource-section .compare-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 14.5px;
}
.ressource-section .compare-table th,
.ressource-section .compare-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--slate-200, #e2e8f0);
  line-height: 1.5;
  color: var(--slate-700, #334155);
}
.ressource-section .compare-table thead th {
  background: var(--slate-50, #f8fafc);
  font-weight: 700;
  color: var(--slate-900, #0f172a);
}
.ressource-section .compare-table tbody th {
  background: var(--slate-50, #f8fafc);
  font-weight: 600;
  color: var(--slate-900, #0f172a);
  width: 22%;
}
/* Mobile: comparison tables are too content-rich to squeeze into a
   390 px viewport without breaking words mid-syllable. Let cells size
   to content, enable horizontal scroll on the wrap, and add a right-
   edge fade to hint the user can swipe. Row-header stays compact. */
@media (max-width: 720px) {
  .ressource-section .compare-table-wrap {
    /* Gradient fade on the right edge cues a horizontal scroll.
       The mask-image clips the fade so content is crisp once scrolled
       to the end (browser re-evaluates scroll position). */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  .ressource-section .compare-table-wrap:where(.at-end) {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ressource-section .compare-table {
    font-size: 13px;
    min-width: auto;
    width: auto;
  }
  .ressource-section .compare-table th,
  .ressource-section .compare-table td {
    padding: 8px 10px;
    line-height: 1.45;
    white-space: normal;
  }
  .ressource-section .compare-table tbody th {
    width: auto;
    min-width: 112px;
    font-size: 12px;
  }
  .ressource-section .compare-table thead th,
  .ressource-section .compare-table tbody td {
    min-width: 180px;
  }
}
.ressource-section p.ressource-hint {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--teal-50, #f0fdfa);
  border-left: 3px solid var(--teal-500, #14b8a6);
  border-radius: var(--r-sm, 4px);
  font-size: 14px;
  color: var(--slate-700);
  font-style: italic;
}

/* Decision-tree branches — each branch is a proper card now. Reads as
   an answer, not a sand-colored info block. 2-col on wide screens so
   the tree is scannable horizontally. */
/* Editorial Q/A list — scenario heading, one-line recommendation, thin
   dividers between. No card chrome: these are decision helpers, not
   destinations. Pairs visually with the FAQ style. */
.decision-tree {
  border-top: 1px solid var(--slate-200);
}
/* Whole-row clickable card via the stretched-link pattern.
   .decision-branch-link::after covers the card; inline secondary links inside
   the body sit above it via z-index, staying independently clickable. */
.decision-branch {
  position: relative;
  padding: 22px 56px 22px 4px;
  border-bottom: 1px solid var(--slate-200);
  transition: background-color .15s ease;
}
.decision-branch[hidden] { display: none; }
.decision-branch-link {
  color: var(--slate-900);
  text-decoration: none;
}
.decision-branch-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.decision-branch:hover {
  background-color: var(--teal-50);
}
.decision-branch:hover .decision-branch-heading,
.decision-branch:hover .decision-branch-link {
  color: var(--teal-900);
}
.decision-branch-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--teal-700);
  transition: transform .2s ease, color .15s ease;
  pointer-events: none;
  display: inline-flex;
}
.decision-branch-arrow svg { width: 18px; height: 18px; }
.decision-branch:hover .decision-branch-arrow {
  transform: translateY(-50%) translateX(4px);
  color: var(--teal-900);
}
/* Inline secondary links + plain-text paragraphs must sit above the stretched
   link so they remain individually clickable / selectable. */
.decision-branch p,
.decision-branch-alt {
  position: relative;
  z-index: 1;
  pointer-events: none; /* paragraphs don't intercept clicks */
}
.decision-branch p a,
.decision-branch-alt a {
  pointer-events: auto; /* links inside paragraphs remain clickable */
}
.decision-branch-alt {
  font-size: 14px;
  color: var(--slate-500);
  margin-top: 2px;
}
.decision-branch-alt a {
  color: var(--terra-700);
  font-weight: 600;
}
/* Informational / non-clickable variant (e.g. neuropsy-vs-psy "les deux peuvent être utiles"). */
.decision-branch--static:hover { background-color: transparent; }
.decision-branch--static .decision-branch-heading { color: var(--slate-900); }
.decision-branch--static .decision-branch-arrow { display: none; }
@media (max-width: 640px) {
  .decision-branch { padding-right: 44px; }
  .decision-branch-arrow { right: 8px; }
}

/* Audience filter chips — pill-style, single-select, announces via aria-pressed. */
.decision-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 24px;
}
.decision-filter-btn {
  appearance: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  background: var(--white);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.decision-filter-btn:hover {
  border-color: var(--teal-600);
  color: var(--teal-700);
}
.decision-filter-btn:focus-visible {
  outline: 2px solid var(--terra-600);
  outline-offset: 2px;
}
.decision-filter-btn.is-active,
.decision-filter-btn[aria-pressed="true"] {
  background: var(--teal-700);
  color: var(--white);
  border-color: var(--teal-700);
}
.decision-branch strong,
.decision-branch .decision-branch-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--slate-900);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.decision-branch-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px; /* optical align with cap height */
  color: var(--teal-700);
}
.decision-branch-icon svg { width: 100%; height: 100%; }
.decision-branch p {
  font-size: 16px;
  color: var(--slate-700);
  line-height: 1.65;
  margin: 4px 0;
  max-width: 68ch;
}
.decision-branch p:last-child { margin-bottom: 0; }
.decision-branch a {
  color: var(--terra-700);
  text-decoration: underline;
  text-decoration-color: rgba(138, 36, 52, 0.35);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.decision-branch a:hover {
  color: var(--terra-700);
  text-decoration-color: var(--terra-700);
}

/* Comparison table (neuropsy-vs-psy, tsa-vs-tdah) */
.compare-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
  border-radius: var(--r-sm);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 640px;
}
.compare-table th,
.compare-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--slate-200);
  line-height: 1.45;
}
.compare-table thead th {
  background: var(--teal-800);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
}
.compare-table tbody th {
  background: var(--sand-100);
  color: var(--slate-900);
  font-weight: 600;
  width: 22%;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.compare-table tbody tr:nth-child(even) td { background: var(--slate-50); }
.compare-table a { color: var(--teal-700); text-decoration: underline; font-weight: 600; }
.compare-table abbr { border-bottom: 1px dotted var(--slate-400); cursor: help; }

/* CTA section at the bottom of guide articles — gradient card with
   soft elevation, matches the hero-featured treatment on the hub. */
.ressource-cta-section {
  padding: 28px 28px 30px;
  background: linear-gradient(160deg, var(--teal-50) 0%, #ffffff 65%);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(15, 61, 53, .04),
    0 20px 40px -28px rgba(15, 61, 53, .18);
}
.ressource-cta-section h2 {
  margin-top: 0;
  font-size: clamp(22px, 2.4vw, 26px);
  color: var(--slate-900);
}
.ressource-cta-section p { max-width: 60ch; margin-left: auto; margin-right: auto; }
.ressource-cta-section .btn { margin-top: 6px; }

/* ===== /premiere-visite/ ===== */
.visite-page { padding: 32px 0 56px; }
.visite-page .breadcrumb { margin-bottom: 16px; }
.visite-header {
  text-align: center;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--slate-200);
}
.visite-header h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  color: var(--slate-900);
  margin: 8px 0 16px;
}
.visite-lede {
  font-size: 17px;
  color: var(--slate-700);
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto;
}
.visite-section { margin: 0 0 40px; }
.visite-section h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--slate-900);
  margin: 0 0 16px;
}
.visite-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.visite-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--teal-600);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,61,53,.04),
    0 10px 20px -16px rgba(15,61,53,.14);
}
.visite-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 4px 10px -4px rgba(15,61,53,.35);
}
.visite-step-num svg { width: 18px; height: 18px; }
.visite-step-index {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-700);
  margin-right: 4px;
}
.visite-step-body h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--slate-900);
  margin: 0 0 2px;
}
.visite-step-duration {
  font-size: 13px;
  color: var(--teal-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px !important;
}
.visite-step-body p,
.visite-step-body ul {
  font-size: 15px;
  color: var(--slate-700);
  line-height: 1.6;
  max-width: 68ch;
}
.visite-step-body ul { padding-left: 1.2em; margin: 6px 0 12px; }
.visite-step-body li { margin: 4px 0; }
.visite-tip {
  margin-top: 10px !important;
  padding: 10px 14px;
  background: var(--teal-50);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--r-sm);
  font-size: 14px !important;
}

/* Hero reassurance pills — 3 short claims right under the lede. */
.visite-reassure {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.visite-reassure li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-800);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: 999px;
}
.visite-reassure li::before {
  content: "✓";
  color: var(--teal-700);
  font-weight: 700;
}

/* Phase grouping — small pill label above each cluster of steps. */
.visite-phases { display: flex; flex-direction: column; gap: 24px; }
.visite-phase { display: flex; flex-direction: column; gap: 12px; }
.visite-phase-label {
  display: inline-block;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-800);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  margin: 4px 0 2px;
}

/* "À rassembler" document checklist — lives inside step 2, highlights
   the list of documents the family needs to bring. */
.visite-checklist {
  margin: 12px 0 12px;
  padding: 14px 16px 10px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,61,53,.04);
}
.visite-checklist-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin-bottom: 8px;
}
.visite-checklist ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.visite-checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 !important;
  font-size: 14.5px;
  color: var(--slate-800);
  line-height: 1.5;
}
.visite-checklist li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--teal-500);
  margin-top: 4px;
  flex-shrink: 0;
  background:
    linear-gradient(45deg, transparent 38%, var(--teal-700) 38% 45%, transparent 45%),
    linear-gradient(-45deg, transparent 50%, var(--teal-700) 50% 58%, transparent 58%);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Anxiety reassurance card — placed between practical info and FAQ. */
.visite-anx-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  margin: 0 0 40px;
  padding: 20px 22px;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-left: 4px solid var(--teal-700);
  border-radius: var(--r-md);
}
.visite-anx-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15,61,53,.08);
}
.visite-anx-icon svg { width: 20px; height: 20px; }
.visite-anx-body h2 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate-900);
  margin: 0 0 6px;
}
.visite-anx-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-800);
}

/* Two-column layout — main flow on the left, sticky CTA sidebar on the
   right. Below 1024px the sidebar drops beneath the main content and
   loses sticky. */
.visite-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .visite-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
  }
}
.visite-main { min-width: 0; }

.visite-side { width: 100%; }
@media (min-width: 1024px) {
  .visite-side {
    position: sticky;
    top: calc(var(--header-height) + 20px);
  }
}

.visite-side-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 22px 22px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,61,53,.04),
    0 10px 26px -14px rgba(15,61,53,.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visite-side-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.visite-side-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.2;
  margin-bottom: 2px;
}
.visite-side-sub {
  font-size: 13.5px;
  color: var(--slate-600);
  margin: 0 0 8px;
  line-height: 1.4;
}

.visite-side-phone {
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  text-align: left;
}
.visite-side-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}
.visite-side-phone-icon svg { width: 16px; height: 16px; }
.visite-side-phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.visite-side-phone-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .85;
}
.visite-side-phone-number {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.visite-side-write {
  justify-content: space-between;
  padding: 10px 16px;
  font-weight: 600;
}
.visite-side-write svg {
  width: 14px; height: 14px;
  transition: transform .15s ease;
}
.visite-side-write:hover svg { transform: translateX(2px); }

.visite-side-facts {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--slate-200);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.visite-side-facts li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  color: var(--slate-700);
  margin: 0;
}
.visite-side-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--teal-50);
  color: var(--teal-700);
}
.visite-side-fact-icon svg { width: 13px; height: 13px; }
.visite-side-facts strong { color: var(--slate-900); font-weight: 700; }
.visite-practical-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .visite-practical-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .visite-practical-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.visite-practical {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(15,61,53,.03);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.visite-practical:hover {
  border-color: var(--teal-300, #a2d4c7);
  box-shadow: 0 1px 2px rgba(15,61,53,.04), 0 8px 20px -14px rgba(15,61,53,.18);
}
.visite-practical-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--teal-50);
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--teal-100);
}
.visite-practical-icon svg { width: 18px; height: 18px; }
.visite-practical-body { min-width: 0; }
.visite-practical strong {
  display: block;
  font-size: 12.5px;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.visite-practical p,
.visite-practical address {
  margin: 0;
  font-size: 14.5px;
  color: var(--slate-800);
  font-style: normal;
  line-height: 1.4;
}
.visite-crosslinks ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.visite-crosslinks li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--r-sm);
  color: var(--slate-800);
  text-decoration: none;
  gap: 16px;
  transition: border-color .15s ease, background-color .15s ease;
}
.visite-crosslinks li a:hover {
  border-color: var(--teal-800);
  background: var(--sand-50, #fefcf8);
}
.visite-crosslinks li a strong { color: var(--teal-700); font-weight: 600; }
.visite-crosslinks li a svg { width: 14px; height: 14px; color: var(--teal-700); flex: 0 0 auto; }

/* ===== /prix-et-assurances/ ===== */
.prix-page { padding: 32px 0 56px; }
.prix-page .breadcrumb { margin-bottom: 16px; }
.prix-header {
  text-align: center;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--slate-200);
}
.prix-header h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  color: var(--slate-900);
  margin: 8px 0 16px;
}
.prix-lede {
  font-size: 17px;
  color: var(--slate-700);
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto;
}
.prix-section { margin: 0 0 40px; }
.prix-section h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--slate-900);
  margin: 0 0 12px;
}
.prix-section > p { font-size: 15.5px; color: var(--slate-700); line-height: 1.6; margin: 0 0 14px; }
.prix-footnote {
  font-size: 13px;
  color: var(--slate-600);
  font-style: italic;
  margin-top: 10px !important;
}
.prix-footnote + .prix-footnote { margin-top: 4px !important; }
/* Verification-prompt callout under the insurance table — reads as an
   alert (terra left accent) so families notice the "always check with
   your insurer first" message. */
.prix-table-cta {
  margin-top: 16px !important;
  padding: 12px 16px;
  background: #fff5f3;
  border-left: 3px solid var(--terra-500);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate-800);
}
.prix-table-cta strong { color: var(--terra-700); }
.prix-disclaimer {
  font-size: 14px;
  color: var(--slate-600);
  padding: 12px 14px;
  background: var(--sand-50, #fefcf8);
  border-left: 3px solid var(--slate-400);
  border-radius: var(--r-sm);
  margin-top: 16px !important;
}
.prix-disclaimer a { color: var(--teal-700); text-decoration: underline; font-weight: 600; }

.prix-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
  border-radius: var(--r-sm);
}
.prix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 560px;
}
.prix-table th,
.prix-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--slate-200);
  line-height: 1.4;
}
.prix-table thead th {
  background: var(--teal-800);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
}
.prix-table tbody th {
  background: var(--sand-100);
  color: var(--slate-900);
  font-weight: 600;
  width: 32%;
}
.prix-table tbody tr:nth-child(even) td { background: var(--sand-50, #fefcf8); }
.prix-table sup { font-size: 11px; color: var(--terra-600); font-weight: 700; }

/* Mobile: prix-table is too content-rich for 390 px. Let cells keep
   natural width + horizontal scroll, with a right-edge fade as
   swipe affordance. Matches the compare-table treatment on /ressources/. */
@media (max-width: 720px) {
  .prix-table-wrap {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  .prix-table { font-size: 13px; }
  .prix-table th, .prix-table td { padding: 8px 10px; line-height: 1.45; }
  .prix-table tbody th { width: auto; min-width: 120px; }
}

.prix-ranges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prix-ranges li {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--teal-600);
  border-radius: var(--r-sm);
  padding: 14px 18px;
}
.prix-ranges strong {
  display: block;
  font-size: 15px;
  color: var(--slate-900);
  margin-bottom: 4px;
}
.prix-ranges span {
  font-size: 14.5px;
  color: var(--slate-700);
  line-height: 1.5;
}

.prix-insurers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 600px) {
  .prix-insurers { grid-template-columns: 1fr 1fr; }
}
.prix-insurers li {
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--slate-800);
}

.prix-steps {
  list-style: none;
  counter-reset: prix-step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prix-steps > li {
  counter-increment: prix-step;
  position: relative;
  padding: 12px 16px 12px 52px;
  background: var(--sand-50, #fefcf8);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--slate-800);
  line-height: 1.5;
}
.prix-steps > li::before {
  content: counter(prix-step);
  position: absolute;
  top: 12px;
  left: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

/* Service pricing / logistics card on service pages. Transparent cost,
   timeline, deliverable, insurance — addresses the main consideration-
   stage objections before the CTA. */
.service-pricing {
  margin: 28px 0;
  padding: 24px 26px;
  background: var(--white, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-left: 4px solid var(--teal-600, #0d9488);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 1px 2px rgba(15, 61, 53, .04);
}
.service-pricing-title {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--slate-900, #0f172a);
}
.service-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}
@media (min-width: 720px) {
  .service-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
}
.service-pricing-grid > div { margin: 0; }
.service-pricing-grid dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-800, #115e59);
  margin-bottom: 4px;
}
.service-pricing-grid dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate-800, #1f2937);
}
.service-pricing-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--slate-200, #e2e8f0);
  font-size: 13px;
  color: var(--slate-600, #475569);
  font-style: italic;
}

/* "En bref" summary block at the top of condition pages — extractable
   passage for AI Overviews / LLM citations. Stands out visually. */
.en-bref {
  margin: 0 0 28px;
  padding: 20px 22px;
  background: var(--teal-50, #f0fdfa);
  border-left: 4px solid var(--teal-600, #0d9488);
  border-radius: var(--r-md, 8px);
}
.en-bref-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-800, #115e59);
  background: var(--teal-100, #ccfbf1);
  border-radius: 999px;
}
.en-bref p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--slate-800, #1f2937); }
.en-bref p:last-child { margin-bottom: 0; }
.en-bref strong { color: var(--slate-900, #0f172a); }

/* "Révisé le YYYY-MM-DD par…" byline at the bottom of service + trouble pages */
.page-byline {
  margin: 32px 0 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--slate-600);
  background: var(--sand-50, #fefcf8);
  border-left: 3px solid var(--slate-300);
  border-radius: var(--r-sm);
}
.page-byline time { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Sidebar phone CTA — full-width inside .sidebar-card */
.sidebar-phone {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Home about column — flex container for lead / body / values list */
.about-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ===== Service page — "À qui s'adressent?" standardized block ===== */
.service-audience-block {
  background: var(--sand-50, #fefcf8);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--teal-600);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 0 0 32px;
}
.service-audience-block h2 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--slate-900);
  margin: 0 0 12px;
}
.service-audience-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}
@media (min-width: 720px) {
  .service-audience-facts { grid-template-columns: 1fr 1fr; }
}
.service-audience-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.service-audience-facts dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.service-audience-facts dd {
  margin: 0;
  font-size: 15px;
  color: var(--slate-800);
  line-height: 1.45;
}
.service-audience-facts dd a { color: var(--teal-700); text-decoration: underline; }

/* ===== Per-clinician profile page (/equipe/<slug>/) ===== */
.profile-page { padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.profile-page .breadcrumb { margin-bottom: 20px; }
.profile-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 28px;
}
@media (min-width: 720px) {
  .profile-header { grid-template-columns: 220px 1fr; gap: 32px; }
}
.profile-photo { width: 180px; }
@media (min-width: 720px) { .profile-photo { width: 220px; } }
.profile-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}
.profile-photo-initials {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--teal-100);
  color: var(--teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 700;
}
.profile-header-body .section-label {
  color: var(--teal-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.profile-header-body h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  color: var(--slate-900);
  margin: 0 0 6px;
  line-height: 1.15;
}
.profile-title {
  font-size: 17px;
  color: var(--slate-700);
  margin: 0 0 14px;
}
.profile-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-notes li {
  background: var(--sand-100);
  color: var(--slate-700);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--slate-400);
  font-size: 14px;
}
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 960px) {
  .profile-grid { grid-template-columns: 1fr 280px; gap: 48px; }
}
.profile-main { min-width: 0; }
.profile-section { margin-bottom: 28px; }
.profile-section h2 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate-900);
  margin: 0 0 10px;
}
.profile-bio p,
.profile-research p {
  margin: 0 0 14px;
  line-height: 1.65;
  color: var(--slate-800);
  text-wrap: pretty;
  max-width: 68ch;
}
.profile-bio p:last-child,
.profile-research p:last-child { margin-bottom: 0; }
/* First paragraph reads as a lede — slightly larger, slightly denser colour. */
.profile-bio p:first-child {
  font-size: 16.5px;
  color: var(--slate-900);
}
/* Expertise list — checkmark pattern. Same visual language as the
   checklist on /ressources/par-ou-commencer/ so the site's "list of
   confirmed capabilities" read is consistent. Two columns on wider
   screens to keep the section compact on long profiles. */
.profile-expertise {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
}
@media (min-width: 720px) {
  .profile-expertise { grid-template-columns: 1fr 1fr; }
}
.profile-expertise > li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
}
.profile-expertise > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.profile-section-placeholder p {
  color: var(--slate-500);
  font-style: italic;
  background: var(--sand-50, #fefcf8);
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px dashed var(--slate-300);
}
.profile-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.profile-side-block {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.profile-side-block h2 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--slate-900);
  margin: 0 0 10px;
}
.profile-disciplines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
}
.profile-disciplines li {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--slate-100);
}
.profile-disciplines li:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-audience,
.profile-role {
  color: var(--slate-600);
  font-size: 13.5px;
}
.profile-services-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-services-links a {
  color: var(--teal-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.profile-services-links a:hover { text-decoration: underline; }
.profile-footer-nav { margin-top: 32px; }

/* team card: make name a link */
.team-card-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.team-card-name-link:hover,
.team-card-name-link:focus-visible {
  border-bottom-color: var(--teal-600);
  color: var(--teal-700);
}

/* ===== 404 ===== */
.page-404 { text-align: center; padding: clamp(64px, 10vw, 120px) 0; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 140px);
  font-weight: 700;
  color: var(--teal-700);
  line-height: 1;
}
.error-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 520px;
  margin: 24px auto 32px;
}
.error-help { color: var(--slate-500); font-size: 14px; }

/* ===== FOOTER ===== */
.site-footer {
  background: var(--slate-900);
  color: rgba(255,255,255,.75);
  padding: 56px 0 24px;
}
/* Crisis strip — low-chrome row at the top of the footer. Sensitive
   context; kept small, legible, tap-ready, with semantic links. */
.footer-crisis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 18px;
  margin-bottom: 32px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,.82);
}
.footer-crisis-label {
  font-weight: 700;
  color: var(--white);
  letter-spacing: .01em;
}
.footer-crisis a {
  color: rgba(255,255,255,.9);
  text-decoration: none;
  padding: 4px 2px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.footer-crisis a:hover { color: var(--white); border-bottom-color: var(--sand-200); }
.footer-crisis a strong { font-variant-numeric: tabular-nums; color: var(--white); }
.footer-crisis-sep { color: rgba(255,255,255,.28); }
@media (max-width: 540px) {
  .footer-crisis-sep { display: none; }
  .footer-crisis { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; gap: 36px; } }
.footer-brand .logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  display: block;
  margin-bottom: 6px;
}
.footer-brand .logo-tagline {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  display: block;
  margin-bottom: 16px;
}
.footer-brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }
.footer-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin: 6px 0; }
.footer-links a,
.footer-links address,
.footer-links .footer-meta {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  font-style: normal;
}
.footer-links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.2); }
.footer-links a:hover { color: var(--white); text-decoration-color: currentColor; }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
@media (min-width: 600px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.65); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--white); }

/* ===== COOKIE BANNER ===== */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  z-index: var(--z-cookie);
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin-left: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner.visible { opacity: 1; transform: translateY(0); }
.cookie-banner p { font-size: 14px; color: var(--slate-700); margin: 0; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner-actions .btn { flex: 1; min-width: 120px; }

/* ===== 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;
  }
  .carousel-track { transition: none; }
}

/* ===== BRAND COLOR ACCENTS (extended palette) ===== */

/* RESO acronym — each letter gets its own brand hue on dark teal background */
.acronym-item:nth-child(1) .acronym-letter { color: var(--sand-200); }          /* R — sable */
.acronym-item:nth-child(2) .acronym-letter { color: var(--terra-400); }         /* E — cranberry clair */
.acronym-item:nth-child(3) .acronym-letter { color: var(--indigo-200); }        /* S — indigo clair */
.acronym-item:nth-child(4) .acronym-letter { color: var(--amber-200); }         /* O — ambre clair */

/* Footer — cranberry underline on column headings */
.footer-heading {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--terra-600);
  display: inline-block;
}

/* FAQ chevron — cranberry for warmth */
.faq-question svg { color: var(--terra-600); }

/* ===== PRINT ===== */
@media print {
  .site-header, .site-footer, .cookie-banner,
  .mobile-nav, .mobile-overlay, .cta-banner,
  .hero-carousel, .team-filters-wrap, .skip-link,
  .carousel-controls { display: none !important; }
  body { background: white; color: black; }
  a { color: #0066cc; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  main, .container { max-width: 100%; padding: 0; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}