/* ===== Polices hébergées sur le site (licence SIL OFL, voir fonts/OFL-*.txt) ===== */
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope.woff') format('woff'); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader.woff') format('woff'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }

/* =========================================================
   Centre médical AUMALE - Santé — feuille de style principale
   ========================================================= */

/* ---- Design tokens ---- */
:root {
  /* Couleurs — palette bleu pétrole / ardoise, accent turquoise discret
     Chaque couleur a un rôle : action, structure, secondaire, surface, texte, accent. */
  --color-primary: #0B4F71;        /* actions : boutons principaux, liens, CTA */
  --color-primary-dark: #123A5A;   /* structure : titres, footer, bandeaux foncés, chat, cookies */
  --color-secondary: #2F6F8F;      /* éléments secondaires : icônes, filets, sur-titres, fiches */
  --color-accent: #3B8C8C;         /* accent turquoise ponctuel (graphique uniquement, jamais en texte) */
  --color-accent-dark: #2A7070;    /* accent assombri pour fond de bouton avec texte blanc (AA) */

  --color-bg: #F4F8FA;             /* fond général froid */
  --color-surface: #FFFFFF;        /* cartes, zones de contenu */
  --color-surface-alt: #EAF4F8;    /* sections alternatives, bulles de chat */
  --color-tint: #DCEFF5;           /* callouts, tags, survols doux */

  --color-text: #18323F;
  --color-text-muted: #506775;
  --color-border: #C9DCE4;
  --color-border-strong: #6A8595;  /* contour des champs de formulaire (3:1 minimum) */
  --color-focus: #0B4F71;

  --color-on-dark: #EAF4F8;        /* texte sur fonds foncés */
  --color-on-dark-muted: #C3D6E0;  /* texte secondaire sur fonds foncés */

  --color-danger: #8A3A2B;
  --color-danger-bg: #F7E9E5;

  /* Typographie */
  --font-heading: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;

  /* Échelle */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-s: 4px;
  --radius-m: 8px;
  --container-max: 1140px;
  --container-narrow: 760px;
}

/* ---- Reset minimal ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-y: scroll;          /* barre de défilement toujours présente : même largeur utile sur toutes les pages */
  scrollbar-gutter: stable;    /* et gouttière réservée sur les navigateurs à barres flottantes */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 1.0625rem;
}

img { max-width: 100%; display: block; }
a { color: var(--color-primary); }
a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.25;
  margin-top: 0;
  font-weight: 700;
}
p { max-width: 68ch; }
.section-intro p { max-width: 62ch; }

ul, ol { padding-left: 1.3em; }

/* ---- Accessibilité : focus visible ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 1000;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-6);
}
.section--alt { background: var(--color-surface-alt); }
.section--surface { background: var(--color-surface); }
.section--primary {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
}
.section--primary h2 { color: #fff; }

@media (max-width: 640px) {
  .section { padding-block: var(--space-5); }
}

/* ---- Placeholder identifiable ---- */
.placeholder {
  background: repeating-linear-gradient(135deg, var(--color-surface-alt), var(--color-surface-alt) 10px, var(--color-tint) 10px, var(--color-tint) 20px);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  display: inline-block;
}
.placeholder-block {
  background: repeating-linear-gradient(135deg, var(--color-surface-alt), var(--color-surface-alt) 10px, var(--color-tint) 10px, var(--color-tint) 20px);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
  padding: var(--space-3);
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
}

/* ---- Header ---- */
.site-header {
  --logo-h: 84px;
  --brand-navy: #042755;
  position: sticky;
  top: 0;
  z-index: 500;
  /* Fond OPAQUE et sans flou : la couleur du header ne dépend plus du contenu de la page
     placé dessous, et aucune couche de composition n'est recréée à chaque chargement. */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0.6rem var(--space-4);
  height: calc(var(--logo-h) + 1.2rem);   /* hauteur imposée (logo + 2 × 0.6rem), indépendante du texte et des polices */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
@media (max-width: 1259px) { .site-header { --logo-h: 64px; } }
html { scroll-padding-top: 110px; }
.brand {
  display: flex;
  align-items: center;   /* le nom est centré verticalement par rapport à la croix */
  gap: 1.1rem;
  text-decoration: none;
  color: var(--brand-navy);
  flex-shrink: 0;
  white-space: nowrap;
}
.brand-mark {
  display: block;
  height: var(--logo-h);
  width: auto;
  aspect-ratio: 187 / 200;   /* = attributs width/height du HTML : la place est réservée avant le chargement */
  flex-shrink: 0;
}
.brand-name {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--font-heading);
  line-height: 1.1;
}
.brand-name__top {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.brand-name__main {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-s); }
@media (max-width: 480px) {
  .site-header { --logo-h: 52px; }
  .brand { gap: 0.75rem; }
  .brand-name__top { font-size: 0.6rem; letter-spacing: 0.14em; }
  .brand-name__main { font-size: 1rem; letter-spacing: 0.04em; }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.nav-list {
  list-style: none;
  display: flex;
  gap: 1.1rem;
  margin: 0; padding: 0;
  font-size: 0.95rem;
  white-space: nowrap;
}
.nav-list a {
  text-decoration: none;
  color: var(--color-text);
  padding: 0.4em 0.2em;
  border-bottom: 2px solid transparent;
}
.nav-list a[aria-current="page"] {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-accent);
  /* Pas de changement de graisse : sinon la largeur du menu varie d'une page à l'autre */
}
.nav-list a:hover { border-bottom-color: var(--color-secondary); }
.main-nav > .btn { white-space: nowrap; flex-shrink: 0; }

/* Géométrie verrouillée (écran large) : chaque lien du menu et le bouton occupent un emplacement
   de largeur fixe, dimensionné pour la police de secours la plus large. Quand la police web
   (Manrope / Source Sans 3) remplace la police de secours au chargement, seuls les glyphes
   changent : aucun élément ne se déplace. Si un lien est ajouté ou renommé, ajuster sa largeur ici. */
@media (min-width: 1260px) {
  .nav-list { gap: 0; }
  .nav-list li { flex: 0 0 auto; }
  .nav-list a { display: block; text-align: center; padding: 0.4em 0; }
  .nav-list li:nth-child(1) { display: none; }   /* Accueil : le logo y mène déjà */
  .nav-list li:nth-child(2) { width: 9.6rem; }    /* Le centre et l'équipe */
  .nav-list li:nth-child(3) { width: 6.6rem; }    /* Rendez-vous */
  .nav-list li:nth-child(4) { width: 7.2rem; }    /* Infos pratiques */
  .nav-list li:nth-child(5) { width: 6.2rem; }    /* Actualités */
  .nav-list li:nth-child(6) { width: 3.9rem; }    /* Santé */
  .nav-list li:nth-child(7) { width: 2.9rem; }    /* FAQ */
  .nav-list li:nth-child(8) { width: 4.3rem; }    /* Contact */
  .main-nav > .btn { flex: 0 0 14.4rem; width: 14.4rem; padding-inline: 0.6em; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.5em 0.6em;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }
/* Zone tactile d'au moins 44 × 44 px (recommandation Apple / WCAG) */
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; touch-action: manipulation; }

@media (max-width: 1259px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    top: var(--header-h, 64px);
    background: var(--color-surface);
    width: min(320px, 86vw);
    height: calc(100vh - var(--header-h, 64px));
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    transform: translateX(105%);
    transition: transform 0.25s ease;
    box-shadow: -6px 0 24px rgba(18,58,90,0.16);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .nav-list {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .nav-list a {
    display: block;
    padding: 0.85em 0.2em;
    border-bottom: 1px solid var(--color-border);
  }
  .main-nav .btn { margin-top: var(--space-3); width: 100%; text-align: center; }
}

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border-radius: var(--radius-s);
  padding: 0.85em 1.4em;
  min-height: 48px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--secondary:hover { background: var(--color-tint); }
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-primary); }
/* Nom de classe conservé (« sage ») pour ne pas toucher au HTML : bouton turquoise assombri */
.btn--sage {
  background: var(--color-accent-dark);
  color: #fff;
}
.btn--sage:hover { background: #1F6B6B; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Hero ---- */
.hero {
  padding-block: var(--space-6);
  background: linear-gradient(180deg, var(--color-tint) 0%, var(--color-bg) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
.hero-eyebrow {
  color: var(--color-secondary);
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: 0.4em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.hero-quickfacts {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0.6em;
  font-size: 0.98rem;
}
.hero-quickfacts li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}
.hero-quickfacts svg {
  width: 1.2em; height: 1.2em; flex-shrink: 0; margin-top: 0.15em;
  color: var(--color-accent);
}
.hero-visual {
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* ---- Cartes ---- */
.grid {
  display: grid;
  gap: var(--space-4);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-s);
  padding: var(--space-4);
}
.card h3 { margin-bottom: 0.3em; }
.card .card-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
  margin-bottom: 0.5em;
}
.card p:last-child { margin-bottom: 0; }
.card-status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
}

/* Fiche professionnel */
.pro-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pro-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.pro-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 0.6em; flex-grow: 1; }
.pro-body h3 { margin-bottom: 0; }
.pro-profession {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0;
}
.pro-meta {
  list-style: none;
  padding: 0; margin: 0.3em 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  display: grid;
  gap: 0.35em;
}
.pro-meta li { display: flex; gap: 0.5em; align-items: flex-start; }
.pro-meta svg { width: 1.1em; height: 1.1em; flex-shrink: 0; margin-top: 0.15em; }
.pro-body .btn { margin-top: auto; align-self: flex-start; }

/* ---- Bandeau / rappel ---- */
.callout {
  background: var(--color-tint);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.callout svg { width: 1.6em; height: 1.6em; flex-shrink: 0; color: var(--color-secondary); margin-top: 0.1em; }
.callout p:last-child { margin-bottom: 0; }
.callout--warning {
  background: var(--color-danger-bg);
}
.callout--warning svg { color: var(--color-danger); }

/* ---- CTA final ---- */
.cta-band {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-5) var(--space-5);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band .btn--primary { background: #fff; color: var(--color-primary); }
.cta-band .btn--primary:hover { background: var(--color-tint); }

/* ---- Accordéon FAQ ---- */
.accordion-item {
  border-bottom: 1px solid var(--color-border);
}
.accordion-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-primary-dark);
  padding: 1.1em 0.2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
}
.accordion-trigger svg {
  width: 1.2em; height: 1.2em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion-panel {
  padding: 0 0.2em 1.2em;
}
.accordion-panel[hidden] { display: none; }

/* ---- Formulaires ---- */
.form-grid {
  display: grid;
  gap: var(--space-3);
}
label {
  font-weight: 600;
  font-size: 0.92rem;
  display: block;
  margin-bottom: 0.35em;
}
input, textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.85em;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--color-text);
}
textarea { min-height: 140px; resize: vertical; }
.field-hint { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.3em; }
fieldset { border: none; padding: 0; margin: 0; }

/* ---- Table des matières / liens internes ---- */
.link-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 0.5em;
}
.link-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  padding-block: var(--space-6) var(--space-4);
  margin-top: var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.8em;
}
.site-footer a { color: var(--color-on-dark); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5em; font-size: 0.94rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-on-dark-muted);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1em 1.4em; }

/* ---- Carte / accès ---- */
.map-embed {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---- Chatbox flottante ---- */
.chat-launcher {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 900;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(18,58,90,0.30);
  cursor: pointer;
}
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher:hover { background: var(--color-primary); }

.chat-window {
  position: fixed;
  right: 1.1rem;
  bottom: 5.6rem;
  z-index: 900;
  width: min(340px, calc(100vw - 2.2rem));
  max-height: min(70vh, 520px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: 0 12px 30px rgba(18,58,90,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-window[hidden] { display: none; }
.chat-header {
  background: var(--color-primary-dark);
  color: #fff;
  padding: 0.9em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}
.chat-header strong { font-family: var(--font-heading); font-size: 0.98rem; }
.chat-close {
  background: none; border: none; color: #fff;
  cursor: pointer; padding: 0.2em;
  display: flex;
}
.chat-close svg { width: 20px; height: 20px; }
.chat-body {
  padding: 0.9em 1em;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.chat-msg {
  background: var(--color-surface-alt);
  border-radius: var(--radius-s);
  padding: 0.7em 0.85em;
  font-size: 0.92rem;
  max-width: 92%;
}
.chat-msg--urgent {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-weight: 600;
}
.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0 1em 1em;
}
.chat-quick button {
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45em 0.9em;
  cursor: pointer;
}
.chat-quick button:hover { border-color: var(--color-primary); background: var(--color-surface-alt); }

/* ---- Bandeau cookies ---- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  padding: 1em var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em 1.4em;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 18px rgba(18,58,90,0.30);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 0.9rem; max-width: 62ch; }
.cookie-actions { display: flex; gap: 0.6em; flex-wrap: wrap; }
.cookie-actions .btn { min-height: 40px; padding: 0.6em 1.1em; font-size: 0.88rem; }

/* ---- Utilitaires ---- */
.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }
.stack { display: grid; gap: var(--space-3); }
.center-text { text-align: center; }
.section-intro { max-width: 68ch; margin-bottom: var(--space-4); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5em; margin: var(--space-2) 0; }
.tag {
  display: inline-block;
  font-size: 0.82rem;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  padding: 0.3em 0.75em;
  border-radius: 999px;
}
.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--color-text-muted); }

/* ---- Choisir son professionnel (page Rendez-vous) ---- */
.pro-choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 760px) { .pro-choice-list { grid-template-columns: 1fr; } }
.pro-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-s);
  padding: 0.9rem 1rem 0.9rem 1.25rem;
}
.pro-choice-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 1.05rem;
}
.pro-choice .btn {
  flex: 0 0 auto;
  min-width: 11.5rem;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .pro-choice { flex-direction: column; align-items: stretch; }
  .pro-choice .btn { width: 100%; }
}

/* ---- Surfaces foncées : focus, liens et boutons lisibles ---- */
.site-footer, .cta-band, .section--primary, .cookie-banner, .chat-header, .chat-launcher {
  --color-focus: #FFFFFF;
}
.cookie-banner a, .section--primary a { color: #fff; }
.cookie-banner .btn--ghost {
  color: #fff;
  border-color: var(--color-on-dark-muted);
}
.cookie-banner .btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.10);
}

/* ---- Focus du contenu principal après un changement de page (navigation fluide) ---- */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }

/* =========================================================
   Direction « Carnet éditorial »
   Papier froid, titres en serif, filets fins, marge éditoriale.
   Le seul élément marquant : les fiches à onglet (équipe, approche, modalités).
   ========================================================= */
:root {
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --color-rule: #B4C8D3;   /* filets décoratifs */
}

/* ---- Sections : papier + filets, plus de bandes de couleur alternées ---- */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--color-border); }
.section--surface { background: var(--color-bg); }
.section--alt { background: var(--color-surface-alt); }
.section[style*="padding-top:0"] { border-top: 0; }

/* ---- Hero ---- */
.hero {
  background: var(--color-bg);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--color-border);
}
.hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-visual { aspect-ratio: 4 / 5; min-height: 0 !important; border-radius: 3px 3px 3px 3px; }
.hero-quickfacts { gap: 0; max-width: 34rem; margin-top: var(--space-5); }
.hero-quickfacts li { padding: 0.7rem 0; border-top: 1px dotted var(--color-rule); }
.hero-quickfacts li:last-child { border-bottom: 1px dotted var(--color-rule); }
.hero-quickfacts svg { color: var(--color-accent); }

/* ---- Marge éditoriale : le titre de section à gauche, le contenu à droite ---- */
@media (min-width: 900px) {
  :is(.section > .container:has(> h2):not(:has(> .grid, > .map-embed, > .pro-choice-list)):not(.center-text),
      .section > .container:has(> h1)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
    column-gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  :is(.section > .container:has(> h2):not(:has(> .grid, > .map-embed, > .pro-choice-list)):not(.center-text),
      .section > .container:has(> h1)) > * { grid-column: 2; }
  :is(.section > .container:has(> h2):not(:has(> .grid, > .map-embed, > .pro-choice-list)):not(.center-text)) > h2 {
    grid-column: 1;
    grid-row: 1 / span 12;
    position: sticky;
    top: 8rem;
    margin: 0;
  }
  :is(.section > .container:has(> h2):not(:has(> .grid, > .map-embed, > .pro-choice-list)):not(.center-text),
      .section > .container:has(> h1)) > h1 { grid-column: 1 / -1; }
}

/* ---- Fiches à onglet (élément signature) ---- */
.grid:has(> .card > .card-tag),
.grid:has(> .pro-card) { row-gap: 3.4rem; padding-top: 2rem; }

.card, .pro-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  overflow: visible;
}
.card { padding: 1.7rem 1.6rem 1.5rem; }
.card:has(> .card-tag), .pro-card { border-top-left-radius: 0; }

.card > .card-tag,
.pro-card .card-tag {
  position: absolute;
  top: -1.9rem;
  left: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 1.9rem;
  margin: 0;
  padding: 0 1rem;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-rule);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.card-tag svg { width: 1em; height: 1em; flex-shrink: 0; }

.card h3, .pro-body h3 {
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px dotted var(--color-rule);
}
.card .card-status { border-top: 1px dotted var(--color-rule); }
.pro-photo { border-radius: 0 5px 0 0; border-left: 0; border-right: 0; border-top: 0; }
.pro-profession { color: var(--color-secondary); }

.pro-choice {
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-surface);
}

/* ---- Éléments secondaires ---- */
.callout { border: 1px solid #B8D6E2; border-radius: 6px; }
.accordion-item { border-bottom: 1px solid var(--color-rule); }
.cta-band { border-radius: 6px; padding: clamp(2.5rem, 6vw, 4.5rem) var(--space-5); }
input, textarea, select { border-radius: 3px; }
.map-embed { border-radius: 6px; }

/* ---- Blocs centrés : le paragraphe et le bouton restent au centre ---- */
.center-text p, .cta-band p { margin-inline: auto; }
.cta-band p:last-child { display: flex; justify-content: center; }

/* Respiration entre un titre de section et les fiches à onglet qui suivent */
.grid:has(> .card > .card-tag), .grid:has(> .pro-card) { margin-top: 0.6rem; }

/* Liste « Choisir son professionnel » : une colonne tant que la place manque pour deux */
@media (max-width: 900px) { .pro-choice-list { grid-template-columns: 1fr; } }

/* =========================================================
   Système typographique
   Une seule échelle, chaque taille a un rôle. Toutes les tailles sont fluides
   (elles s'adaptent en continu de 320 à 1440 px) : plus aucun titre « énorme » ou « minuscule ».
   Principes : peu de tailles, fort contraste entre elles ; interlignage serré pour les
   grands titres et aéré pour le texte ; ligne de lecture de 60 à 70 caractères ;
   serif léger pour les titres, sans-serif lisible pour le texte.
   ========================================================= */
:root {
  --fs-xs:   clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);   /* 13 → 14 px  mentions, onglets, fil d'Ariane */
  --fs-sm:   clamp(0.95rem, 0.93rem + 0.10vw, 1rem);         /* 15 → 16 px  cartes, listes, pied de page */
  --fs-base: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);   /* 17 → 18 px  texte courant */
  --fs-lead: clamp(1.1875rem, 1.09rem + 0.45vw, 1.375rem);   /* 19 → 22 px  chapô / introductions */
  --fs-h3:   clamp(1.3rem, 1.2rem + 0.45vw, 1.5rem);         /* 21 → 24 px  titres de fiches */
  --fs-h2:   clamp(1.8rem, 1.45rem + 1.5vw, 2.5rem);         /* 29 → 40 px  titres de sections */
  --fs-h1:   clamp(2.2rem, 1.5rem + 2.9vw, 3.25rem);         /* 35 → 52 px  titre de page */

  --lh-tight: 1.06;     /* h1 */
  --lh-heading: 1.14;   /* h2 */
  --lh-snug: 1.25;      /* h3 */
  --lh-lead: 1.5;
  --lh-body: 1.62;
  --measure: 66ch;      /* longueur de ligne confortable */
}

body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Titres */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-tight);   letter-spacing: -0.02em;  max-width: 26ch; margin: 0 0 0.5em; }
h2 { font-size: var(--fs-h2); font-weight: 450; line-height: var(--lh-heading); letter-spacing: -0.015em; margin: 0 0 0.55em; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug);    letter-spacing: -0.008em; margin: 0 0 0.45em; }

/* Texte courant */
p { margin: 0 0 1em; max-width: var(--measure); }
.center-text p { margin-inline: auto; }

/* Chapô : introduction de page, de section, premier paragraphe d'une section */
.hero h1 + p,
.section-intro,
.section > .container > h2 + p,
.cta-band p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.hero h1 + p { max-width: 40ch; margin-bottom: var(--space-4); }
.section-intro { max-width: 46ch; }
.hero-eyebrow { font-size: var(--fs-base); }

/* Texte secondaire (cartes, listes, coordonnées, pied de page) */
.card p, .pro-meta, .pro-profession, .hero-quickfacts li, label,
.site-footer p, .site-footer ul { font-size: var(--fs-sm); }

/* Mentions, légendes, onglets */
.breadcrumb, .field-hint, .card-status, .footer-bottom, .placeholder,
.placeholder-block, .tag, .card > .card-tag, .pro-card .card-tag { font-size: var(--fs-xs); }

/* Titres de composants */
.callout h2 { font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); margin-bottom: 0.3em; }
.cta-band h2 { color: #fff; font-weight: 400; }
.accordion-trigger, .pro-choice-name {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}
.site-footer h2 { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; line-height: 1.3; letter-spacing: 0; margin-bottom: 0.6em; color: #fff; }
.site-footer h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; margin-bottom: 0.7em; color: #fff; }

/* Détails d'élégance */
a:not(.btn) { text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
a[href^="tel:"], .hero-quickfacts li, .site-footer li { font-variant-numeric: lining-nums tabular-nums; }
.cta-band, .site-footer, .section--primary { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Ligne d'ouverture du hero : italique serif discret */
.hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-base);
  letter-spacing: 0;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}

/* =========================================================
   Page « Le centre » : récit en chapitres, sans encadrés,
   avec illustrations vectorielles animées à l'apparition.
   ========================================================= */

/* ---- Apparition au défilement ---- */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s ease-out, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Illustrations : palette et traits communs ---- */
.ce-art {
  --art-line: var(--color-primary);
  --art-deep: var(--color-primary-dark);
  --art-soft: var(--color-tint);
  --art-alt: var(--color-surface-alt);
  --art-acc: var(--color-accent);
  --art-paper: #fff;
  --art-mute: #A9C0CC;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}
.ce-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.ce-art .ln { fill: none; stroke: var(--art-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ce-art .ln-acc { stroke: var(--art-acc); }
.ce-art .ln-mute { stroke: var(--art-mute); stroke-width: 1.8; }
.ce-art .f-paper { fill: var(--art-paper); }
.ce-art .f-soft  { fill: var(--art-soft); }
.ce-art .f-alt   { fill: var(--art-alt); }
.ce-art .f-deep  { fill: var(--art-deep); }
.ce-art .f-acc   { fill: var(--art-acc); }

/* Tracé progressif des traits */
.js .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.5, 0, 0.3, 1);
  transition-delay: calc(var(--d, 0) * 0.5s);
}
.js .is-visible .draw { stroke-dashoffset: 0; }

/* Apparition douce des formes pleines */
.js .pop {
  opacity: 0;
  transform: scale(0.86);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.38s ease-out, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 0.5s);
}
.js .is-visible .pop { opacity: 1; transform: none; }

/* Mouvements d'ambiance (lents, discrets) */
.float { animation: ce-float 7s ease-in-out infinite; }
.float--b { animation-duration: 8.5s; animation-delay: -2.5s; }
.float--c { animation-duration: 9.5s; animation-delay: -5s; }
@keyframes ce-float { 50% { transform: translateY(-7px); } }

.ce-pulse, .ce-ripple { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ce-pulse 3.4s ease-out 0.9s infinite; }
.ce-pulse--slow { animation-duration: 4.2s; }
@keyframes ce-pulse { 0% { opacity: 0.55; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.55); } }

.ce-dash { animation: ce-march 1.4s linear infinite; }
@keyframes ce-march { to { stroke-dashoffset: -11; } }

.ce-dot { transform-box: fill-box; transform-origin: center; animation: ce-typing 1.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.18s); }
@keyframes ce-typing { 0%, 60%, 100% { opacity: 0.35; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1.15); } }

.ce-ring { animation: ce-bob 3.6s ease-in-out infinite; }
@keyframes ce-bob { 50% { transform: translateY(-3px); } }

.ce-wins .win rect { fill: #fff; stroke: var(--art-line); stroke-width: 2; }
.ce-wins .win path { fill: none; stroke: var(--art-line); stroke-width: 1.5; opacity: 0.55; }
.js .is-visible .ce-wins .win rect { animation: ce-light 0.5s ease forwards; animation-delay: calc(0.6s + var(--i, 0) * 0.07s); }
@keyframes ce-light { to { fill: var(--art-soft); } }

.js .ce-pin { opacity: 0; }
.js .is-visible .ce-pin { animation: ce-drop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.45s both; }
@keyframes ce-drop { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }

/* Schéma de l'équipe : survol */
.ce-art--team text { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--color-text); text-anchor: middle; paint-order: stroke; stroke: var(--color-surface-alt); stroke-width: 5px; stroke-linejoin: round; }
.ce-art--team .ico24 { fill: none; stroke: var(--art-line); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ce-art--team .node circle:first-child { transition: stroke 0.25s, fill 0.25s; }
.ce-art--team .node:hover circle:first-child { stroke: var(--art-acc); fill: var(--art-soft); }

/* ---- Mise en page ---- */
.ce-hero { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.ce-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.ce-hero h1 { max-width: 16ch; }
.ce-hero .section-intro { max-width: 34ch; margin-bottom: 0; }

.ce-block { padding-block: clamp(2.5rem, 5.5vw, 4.75rem); }
.ce-block--tint { background: var(--color-surface-alt); border-block: 1px solid var(--color-border); }
.ce-block--last { padding-bottom: clamp(3rem, 7vw, 6rem); }

.ce-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.ce-split--wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.ce-split--wide .ce-art { max-width: 34rem; }
.ce-split--reverse .ce-art { order: -1; }
.ce-text p:last-child { margin-bottom: 0; }

/* Valeurs : une liste éditoriale, pas des cartes */
.ce-values { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-bottom: 1px solid var(--color-rule); }
.ce-value {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  padding: 1.1rem 0.75rem;
  border-top: 1px solid var(--color-rule);
  transition: background-color 0.25s ease;
}
.ce-value:hover { background-color: rgba(255, 255, 255, 0.65); }
.ce-value h3 { margin: 0; }
.ce-value p { margin: 0; max-width: 46ch; }
.ce-value__icon.ce-art { width: 3.5rem; max-width: 3.5rem; margin: 0; }
.ico-heart, .ico-shackle, .ico-l1, .ico-l2, .ico-n { transform-box: fill-box; transform-origin: center; transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ce-value:hover .ico-heart { transform: scale(1.12); }
.ce-value:hover .ico-shackle { transform: translateY(-3px); }
.ce-value:hover .ico-l1 { transform: translateX(3px); }
.ce-value:hover .ico-l2 { transform: translateX(-3px); }
.ce-value:hover .ico-n { transform: scale(1.18); }

.ce-pullquote {
  max-width: 62ch;
  margin: var(--space-5) 0 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-primary-dark);
}

/* Lien avec flèche */
.ce-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600; color: var(--color-primary); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid currentColor;
}
.ce-link svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.ce-link:hover { color: var(--color-primary-dark); }
.ce-link:hover svg { transform: translateX(4px); }

/* Deux colonnes : centre / langues */
.ce-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.ce-duo__item { position: relative; }
.ce-duo__item + .ce-duo__item::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(clamp(2rem, 5vw, 4.5rem) / -2); width: 1px; background: var(--color-rule); }
.ce-duo .ce-art { max-width: 24rem; margin: 0 0 var(--space-3); }
.ce-duo p:last-child { margin-bottom: 0; }

/* Prendre rendez-vous */
.ce-cta {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: var(--color-primary-dark); color: var(--color-on-dark);
  border-radius: 8px; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
}
.ce-cta h2 { color: #fff; font-weight: 400; margin-bottom: 0.3em; }
.ce-cta p { color: var(--color-on-dark); }
.ce-cta .ce-art { --art-line: #DCEFF5; --art-soft: rgba(255, 255, 255, 0.1); --art-paper: transparent; max-width: 15rem; }
.ce-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: var(--space-4); }
.ce-cta .btn--primary { background: #fff; color: var(--color-primary); }
.ce-cta .btn--primary:hover { background: var(--color-tint); }
.ce-cta__tel { margin: 0; font-size: var(--fs-base); }
.ce-cta__tel span { color: var(--color-on-dark-muted); }
.ce-cta__tel a { color: #fff; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

/* ---- Adaptation aux petits écrans ---- */
@media (max-width: 900px) {
  .ce-hero__grid, .ce-split, .ce-split--wide, .ce-duo, .ce-cta { grid-template-columns: 1fr; }
  .ce-split--reverse .ce-art { order: 0; }
  .ce-art, .ce-split--wide .ce-art { max-width: 24rem; }
  .ce-hero .ce-art { max-width: 20rem; margin-inline: 0; }
  .ce-duo__item + .ce-duo__item::before { display: none; }
  .ce-duo__item + .ce-duo__item { padding-top: var(--space-4); border-top: 1px solid var(--color-rule); }
  .ce-value { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.15rem; padding-inline: 0; }
  .ce-value__icon.ce-art { grid-row: 1 / span 2; width: 3rem; max-width: 3rem; }
  .ce-value p { grid-column: 2; }
  .ce-cta .ce-art { margin-inline: 0; max-width: 11rem; }
}

/* ---- Mouvement réduit : tout est affiché tout de suite, rien ne bouge ---- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .draw, .js .pop, .js .ce-pin { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; animation: none; }
  .float, .ce-pulse, .ce-ripple, .ce-dash, .ce-dot, .ce-ring, .ce-wins .win rect { animation: none !important; }
  .ce-pulse, .ce-ripple { opacity: 0; }
  .ce-wins .win rect { fill: var(--art-soft); }
  .ce-link svg, .ico-heart, .ico-shackle, .ico-l1, .ico-l2, .ico-n { transition: none; }
}

/* Page « Le centre » : resserrement sous l'en-tête de page */
.ce-hero { padding-bottom: clamp(1rem, 2.5vw, 2rem); }
.ce-hero + .ce-block { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* =========================================================
   Page d'accueil : mêmes principes que « Le centre »
   ========================================================= */
.ho-hero .ce-hero__grid { align-items: center; }
.ho-hero h1 { max-width: 24ch; }
.ho-hero .hero-eyebrow { margin-bottom: 0.7rem; }
.ho-hero .hero-actions { margin-block: var(--space-4) 0; }
.ho-hero .hero-quickfacts { margin-top: var(--space-4); }
.ce-art--street { max-width: 36rem; }
.ce-art--venn { max-width: 27rem; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* Passants et route */
.ce-walk { animation: ce-walk 15s linear infinite; }
@keyframes ce-walk { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(150px); } }
.ce-road { animation: ce-road 2.2s linear infinite; }
@keyframes ce-road { to { stroke-dashoffset: -26; } }

/* Équipe : liste éditoriale à trois colonnes, sans cartes */
.ho-team { list-style: none; margin: var(--space-4) 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.ho-pro { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1.1rem; padding: 1.4rem 0 1.7rem; border-top: 1px solid var(--color-rule); }
.ho-pro__icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--color-primary); transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ho-pro__icon svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: var(--color-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ho-pro:hover .ho-pro__icon { background: var(--color-tint); border-color: var(--color-accent); transform: translateY(-3px); }
.ho-pro__tag { display: block; margin-bottom: 0.2rem; font-size: var(--fs-xs); font-weight: 600; color: var(--color-secondary); }
.ho-pro h3 { margin: 0 0 0.3em; }
.ho-pro p { margin: 0; font-size: var(--fs-sm); }

/* Langues */
.ho-langs { text-wrap: balance; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.35; color: var(--color-primary-dark); }

/* Bandeau « Vous souhaitez consulter… » */
.ho-strip { border-block: 1px solid var(--color-rule); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.ho-strip__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.ho-strip h2 { margin-bottom: 0.2em; font-size: var(--fs-h3); font-weight: 500; }
.ho-strip p { margin: 0; }

/* Informations pratiques */
.ho-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; margin-top: var(--space-4); }
.ho-info .hero-quickfacts { margin-top: 0; max-width: none; }
.ho-info .map-embed { border-radius: 8px; aspect-ratio: auto; width: 100%; height: 24rem; }

/* Questions fréquentes : deux colonnes, séparées par des filets */
.ho-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 5vw, 4rem); margin: var(--space-4) 0 var(--space-3); }
.ho-qa { padding: 1.3rem 0 1.5rem; border-top: 1px solid var(--color-rule); }
.ho-qa h3 { margin-bottom: 0.35em; }
.ho-qa p { margin: 0; font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .ho-team, .ho-faq, .ho-info { grid-template-columns: 1fr; }
  .ho-info .map-embed { height: 17rem; }
  .ho-hero .ce-art--street { margin-inline: 0; }
  .ho-strip__in { align-items: flex-start; }
}
@media (min-width: 901px) and (max-width: 1100px) { .ho-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) { .ce-walk, .ce-road { animation: none !important; } .ce-walk { opacity: 1; } }

/* « rendez-vous » ne se coupe jamais en fin de ligne */
.nw { white-space: nowrap; }
.grid > * { min-width: 0; }

/* =========================================================
   Boutons : retour tactile et remplissage progressif
   (la géométrie ne change jamais : seuls les couleurs et un léger relief bougent)
   ========================================================= */
.btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18, 58, 90, 0.22); }
.btn--secondary {
  background-color: transparent;
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn--secondary:hover {
  background-color: transparent;
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 100% 100%;
  color: #fff;
}
.btn svg { transition: transform 0.25s ease; }
.btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); }

/* =========================================================
   Page « Notre équipe » : annuaire des professionnels
   ========================================================= */
.eq-hero h1 { max-width: 15ch; }
.eq-note { display: flex; align-items: flex-start; gap: 0.6rem; max-width: 46ch; margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.eq-note svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--color-secondary); }
.ce-art--plates { max-width: 30rem; }

/* Plaques de porte qui se balancent doucement */
.sway { transform-box: fill-box; transform-origin: 50% 0%; animation: ce-sway 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--s, 0) * -1.4s); }
@keyframes ce-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* Barre de filtres (reste visible sous l'en-tête) */
.eq-directory { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.eq-bar {
  position: sticky;
  top: var(--header-h, 104px);
  z-index: 400;
  padding-block: 0.75rem;
  background: rgba(244, 248, 250, 0.96);
  border-block: 1px solid var(--color-border);
}
.eq-filter { display: none; flex-wrap: wrap; gap: 0.5rem; }
.js .eq-filter { display: flex; }
.eq-filter button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.4rem 1rem;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary);
  background: #fff; border: 1.5px solid var(--color-rule); border-radius: 999px; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.eq-filter button:hover { border-color: var(--color-primary); }
.eq-filter button:active { transform: scale(0.97); }
.eq-filter button[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.eq-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: 0.3rem; font-size: var(--fs-xs); border-radius: 999px; background: var(--color-tint); color: var(--color-primary-dark); }
.eq-filter button[aria-pressed="true"] .eq-count { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* Grille des fiches */
.eq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(1.75rem, 4vw, 3rem); }
.eq-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--color-rule); border-radius: 12px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.25s ease, opacity 0.3s ease;
}
.eq-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18, 58, 90, 0.12); border-color: var(--color-secondary); }
.js .reveal.is-visible.is-out { opacity: 0; transform: scale(0.96); pointer-events: none; }
.eq-card[hidden] { display: none; }

.eq-media { --m-bg: var(--color-tint); position: relative; overflow: hidden; width: 100%; max-width: none; margin: 0; aspect-ratio: 4 / 3; background: var(--m-bg); }
.eq-media[data-tone="sage"]  { --m-bg: color-mix(in srgb, var(--color-accent) 20%, #fff); }
.eq-media[data-tone="psy"]   { --m-bg: color-mix(in srgb, var(--color-secondary) 16%, #fff); }
.eq-media svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.eq-figure, .eq-halo, .eq-badge { transform-box: fill-box; transform-origin: center; transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.eq-card:hover .eq-figure { transform: translateY(-5px); }
.eq-card:hover .eq-halo { transform: scale(1.08); }
.eq-card:hover .eq-badge { transform: scale(1.12) rotate(-6deg); }

.eq-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; }
.eq-tag { margin: 0 0 0.35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--color-secondary); }
.eq-body h3 { margin: 0; }
.eq-role { margin: 0.1rem 0 0.7rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); }
.eq-desc { margin: 0 0 1.1rem; font-size: var(--fs-sm); }
.eq-cta { margin-top: auto; }

/* Fiche « très prochainement » : squelette animé */
.eq-card--soon { border-style: dashed; background: transparent; }
.eq-card--soon:hover { transform: none; box-shadow: none; border-color: var(--color-rule); }
.eq-media--soon { --m-bg: repeating-linear-gradient(135deg, var(--color-surface-alt), var(--color-surface-alt) 10px, var(--color-tint) 10px, var(--color-tint) 20px); background: var(--m-bg); }
.eq-media--soon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%); transform: translateX(-100%); animation: eq-shimmer 2.8s ease-in-out infinite; }
@keyframes eq-shimmer { 60%, 100% { transform: translateX(100%); } }
.eq-soon { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.eq-soon li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px dotted var(--color-rule); font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary-dark); }
.eq-soon li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); animation: ce-typing 1.8s ease-in-out infinite; }
.eq-soon li:nth-child(2)::before { animation-delay: 0.25s; }
.eq-soon li:nth-child(3)::before { animation-delay: 0.5s; }

@media (max-width: 1000px) { .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .eq-grid { grid-template-columns: 1fr; }
  .eq-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); }
  .eq-filter::-webkit-scrollbar { display: none; }
  .eq-filter button { flex: 0 0 auto; }
  .eq-media { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .sway, .eq-media--soon::after, .eq-soon li::before { animation: none !important; }
  .eq-card, .eq-card:hover, .eq-figure, .eq-halo, .eq-badge, .btn, .btn--secondary { transition: none; transform: none; }
}

/* =========================================================
   Confort d'affichage
   Mode sombre (24), réglages de lecture (25), titres dévoilés (22), grain de papier (27).
   Le thème, la taille du texte et le contraste sont posés sur <html> par le petit script
   du <head> AVANT le premier affichage : aucun « flash » de couleur au chargement.
   L'en-tête garde exactement la même géométrie dans tous les modes.
   ========================================================= */

/* ---- 27. Grain de papier (texture très légère, une seule image tuilée) ---- */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .2 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .92 0 0 0 0 1 0 0 0 .065 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
body, .site-header, .hero, .section--surface { background-image: var(--grain); }
html[data-contrast="fort"] { --grain: none; }

/* ---- 24. Mode sombre : palette de nuit pensée, pas inversée ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #8CCBE6;        /* liens et actions sur fond sombre */
  --color-primary-dark: #DCEBF2;   /* titres */
  --color-secondary: #8FB8CC;
  --color-accent: #5FB3B0;
  --color-accent-dark: #2A7070;
  --color-bg: #0F1C24;
  --color-surface: #152731;
  --color-surface-alt: #1A303C;
  --color-tint: #1F3A48;
  --color-text: #E3EDF2;
  --color-text-muted: #A6BAC5;
  --color-border: #2A4452;
  --color-border-strong: #7F98A6;
  --color-focus: #8CCBE6;
  --color-danger: #EBA28F;
  --color-danger-bg: #3A2522;
  --color-rule: #35505F;
  --color-structure: #0A2638;      /* bandeaux foncés : pied de page, appel à l'action, chat */
}
html[data-theme="dark"] .site-header { --brand-navy: #DCEBF2; }
html[data-theme="dark"] .brand-mark { filter: brightness(2.1) saturate(0.7); }

/* Surfaces de structure : elles restent des bandeaux foncés, distincts du fond */
html[data-theme="dark"] :is(.skip-link, .section--primary, .cta-band, .site-footer, .chat-launcher,
  .chat-header, .cookie-banner, .ce-cta) { background-color: var(--color-structure); }
html[data-theme="dark"] .site-footer { border-top: 1px solid var(--color-border); }
html[data-theme="dark"] .chat-launcher:hover { background-color: #164B6B; }

/* Boutons : fond clair et texte sombre sur la nuit */
html[data-theme="dark"] .btn--primary { color: #0B1A22; }
html[data-theme="dark"] .btn--primary:hover { background: #B9E0F0; }
html[data-theme="dark"] .btn--secondary:hover { color: #0B1A22; }
html[data-theme="dark"] :is(.cta-band, .ce-cta) .btn--primary { background: #EAF4F8; color: #0B3A55; }
html[data-theme="dark"] .eq-filter button[aria-pressed="true"],
html[data-theme="dark"] .eq-filter button[aria-pressed="true"] .eq-count { color: #0B1A22; }
html[data-theme="dark"] .eq-filter button[aria-pressed="true"] .eq-count { background: rgba(11, 26, 34, 0.15); }

/* Surfaces blanches codées en dur */
html[data-theme="dark"] :is(input, textarea, select, .chat-window, .chat-quick button, .eq-filter button, .eq-card, .ho-pro__icon) { background-color: var(--color-surface); }
html[data-theme="dark"] .eq-card--soon { background: transparent; }
html[data-theme="dark"] .eq-bar { background: rgba(15, 28, 36, 0.96); }
html[data-theme="dark"] .callout { border-color: var(--color-border); }
html[data-theme="dark"] .eq-media[data-tone="sage"] { --m-bg: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)); }
html[data-theme="dark"] .eq-media[data-tone="psy"]  { --m-bg: color-mix(in srgb, var(--color-secondary) 20%, var(--color-surface)); }
html[data-theme="dark"] .eq-media--soon::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%); }
html[data-theme="dark"] .ce-value:hover { background-color: rgba(255, 255, 255, 0.04); }

/* Illustrations : palette de nuit (les pictos blancs restent lisibles sur les pastilles) */
html[data-theme="dark"] .ce-art {
  --art-line: #7FB6D1;
  --art-deep: #2B6A8C;
  --art-soft: #1F3A48;
  --art-alt: #1A303C;
  --art-acc: #5FB3B0;
  --art-paper: #152731;
  --art-mute: #4C6676;
}
html[data-theme="dark"] .ce-cta .ce-art { --art-line: #DCEFF5; --art-paper: transparent; }
html[data-theme="dark"] .ce-wins .win rect { fill: var(--art-paper); }
html[data-theme="dark"] .ce-art [fill="#fff"] { fill: var(--art-paper); }
html[data-theme="dark"] .ce-art g[stroke="#fff"][stroke-width="12"] { stroke: var(--art-paper); }
html[data-theme="dark"] .ce-art--team text { stroke: var(--color-surface-alt); }

/* Carte intégrée : un peu adoucie la nuit */
html[data-theme="dark"] .map-embed iframe { filter: brightness(0.85) contrast(0.95); }

/* ---- 25. Réglages de lecture ---- */
/* Taille du texte : seul le contenu grandit, l'en-tête garde sa géométrie verrouillée */
html[data-text="1"] { --ts: 1.12; }
html[data-text="2"] { --ts: 1.25; }
html[data-text] :is(main, .site-footer, .chat-window, .cookie-banner) {
  --fs-xs:   calc(clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem) * var(--ts));
  --fs-sm:   calc(clamp(0.95rem, 0.93rem + 0.10vw, 1rem) * var(--ts));
  --fs-base: calc(clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem) * var(--ts));
  --fs-lead: calc(clamp(1.1875rem, 1.09rem + 0.45vw, 1.375rem) * var(--ts));
  --fs-h3:   calc(clamp(1.3rem, 1.2rem + 0.45vw, 1.5rem) * var(--ts));
  --fs-h2:   calc(clamp(1.8rem, 1.45rem + 1.5vw, 2.5rem) * var(--ts));
  --fs-h1:   calc(clamp(2.2rem, 1.5rem + 2.9vw, 3.25rem) * var(--ts));
}
html[data-text] main { font-size: var(--fs-base); }
html[data-text] .chat-msg { font-size: calc(0.92rem * var(--ts)); }

/* Contraste renforcé : textes secondaires au noir, filets marqués, liens toujours soulignés */
html[data-contrast="fort"] {
  --color-text-muted: var(--color-text);
  --color-secondary: var(--color-primary);
  --color-rule: #6A8595;
  --color-border: #8AA3B1;
}
html[data-contrast="fort"][data-theme="dark"] { --color-rule: #8FA8B6; --color-border: #6F8A98; }
html[data-contrast="fort"] main a:not(.btn) { text-decoration: underline; }

/* Panneau « Affichage » (bouton rond en bas à gauche, le chat reste à droite) */
.a11y-launcher {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 900;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-rule);
  box-shadow: 0 4px 14px rgba(18, 58, 90, 0.18);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.a11y-launcher:hover { border-color: var(--color-primary); }
.a11y-launcher:active { transform: scale(0.96); }
.a11y-launcher:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.a11y-panel {
  position: fixed;
  left: 1.1rem;
  bottom: 4.6rem;
  z-index: 900;
  width: min(320px, calc(100vw - 2.2rem));
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  border-radius: 6px 6px 6px 0;
  box-shadow: 0 12px 30px rgba(18, 58, 90, 0.22);
  padding: 1.1rem 1.2rem 1.2rem;
  display: grid;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transform-origin: bottom left;
  animation: a11y-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.a11y-panel[hidden] { display: none; }
@keyframes a11y-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.a11y-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--color-rule); padding-bottom: 0.6rem; }
.a11y-panel__head strong { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--color-primary-dark); }
.a11y-close { background: none; border: 0; padding: 0.2rem; color: var(--color-text-muted); cursor: pointer; display: flex; }
.a11y-close svg { width: 20px; height: 20px; }
.a11y-group { display: grid; gap: 0.45rem; margin: 0; padding: 0; border: 0; }
.a11y-group legend { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); padding: 0; margin-bottom: 0.45rem; }
.a11y-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--color-rule); border-radius: 999px; padding: 3px; gap: 2px; }
.a11y-seg button {
  min-height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.a11y-seg button:hover { background: var(--color-tint); }
.a11y-seg button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
html[data-theme="dark"] .a11y-seg button[aria-pressed="true"] { color: #0B1A22; }
.a11y-seg button:focus-visible, .a11y-switch:focus-visible, .a11y-reset:focus-visible, .a11y-close:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.a11y-seg .a-1 { font-size: 1.05rem; } .a11y-seg .a-2 { font-size: 1.2rem; }
.a11y-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 44px; padding: 0.4rem 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--color-text); text-align: left;
}
.a11y-switch .knob { flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: var(--color-tint); border: 1px solid var(--color-border-strong); position: relative; transition: background-color 0.2s ease; }
.a11y-switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-text-muted); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s ease; }
.a11y-switch[aria-checked="true"] .knob { background: var(--color-primary); border-color: var(--color-primary); }
.a11y-switch[aria-checked="true"] .knob::after { transform: translateX(18px); background: var(--color-surface); }
.a11y-reset { justify-self: start; background: none; border: 0; padding: 0.2rem 0; cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 480px) {
  .a11y-launcher { width: 44px; height: 44px; left: 0.8rem; bottom: 0.9rem; }
  .a11y-panel { left: 0.8rem; bottom: 4.1rem; width: calc(100vw - 1.6rem); }
}

/* ---- 22. Titres dévoilés derrière un masque ---- */
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0 0.16em; margin: -0.08em 0 -0.16em; }
.mw > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* Le titre de la page reste caché le temps que le script le prépare (filet de sécurité : 1,6 s) */
  html.js main h1:not(.mt-ready) { opacity: 0; animation: mt-safety 0s linear 0.8s forwards; }
  .mt-wait .mw > span { transform: translateY(112%); }
  .mt-go .mw > span {
    transform: none;
    transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.15, 1);
    transition-delay: calc(var(--w, 0) * 32ms);
  }
}
@keyframes mt-safety { to { opacity: 1; } }
/* Superpositions des illustrations : « multiply » noircit la nuit, « screen » éclaircit doucement */
html[data-theme="dark"] .ce-art [style*="multiply"] { mix-blend-mode: screen !important; }
html[data-theme="dark"] .eq-filter button[aria-pressed="true"] { background-color: var(--color-primary); }
html[data-theme="dark"] .eq-media.ce-art { --art-paper: #2B5164; }
html[data-theme="dark"] .eq-media .eq-halo { fill: #24475A; }

/* =========================================================
   Barre d'actions sur téléphone : Rendez-vous · Appeler · Itinéraire
   Visible sous 900 px. Les boutons ronds (chat, « Aa ») et le panneau d'affichage
   remontent au-dessus de la barre ; le pied de page garde une marge pour rester lisible.
   ========================================================= */
.m-dock { display: none; }
@media (max-width: 899px) {
  .m-dock {
    --dock-h: 64px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 880;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(18, 58, 90, 0.10);
    background-image: var(--grain);
  }
  .m-dock__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px;
    border-radius: 6px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
    color: var(--color-primary);
    transition: background-color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .m-dock__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .m-dock__item:active { transform: scale(0.96); background: var(--color-tint); }
  .m-dock__item:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
  .m-dock__item--main { flex-direction: row; gap: 8px; font-size: 0.92rem; background: var(--color-primary); color: #fff; }
  .m-dock__item--main:active { background: var(--color-primary-dark); }
  html[data-theme="dark"] .m-dock__item--main { color: #0B1A22; }
  html[data-theme="dark"] .m-dock__item--main:active { background: #B9E0F0; }
  html[data-contrast="fort"] .m-dock__item:not(.m-dock__item--main) { color: var(--color-text); }

  /* Place pour la barre */
  html.has-dock body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  html.has-dock .chat-launcher { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  html.has-dock .chat-window { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); max-height: min(60vh, 480px); }
  html.has-dock .a11y-launcher { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  html.has-dock .a11y-panel { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  /* Le bandeau cookies se pose au-dessus de la barre du bas : « Appeler » reste accessible */
  html.has-dock .cookie-banner { z-index: 960; bottom: var(--dock-real, calc(65px + env(safe-area-inset-bottom, 0px))); }

}
@media (prefers-reduced-motion: reduce) { .m-dock__item { transition: none; } }

/* ---- Horaires : modes de consultation (Informations pratiques) ---- */
.hours-modes { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0; }
.hours-modes li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 0.75rem 0; border-top: 1px dotted var(--color-rule); font-size: var(--fs-sm); }
.hours-modes li:last-child { border-bottom: 1px dotted var(--color-rule); }
.hours-modes strong { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-base); color: var(--color-primary-dark); }
@media (max-width: 640px) { .hours-modes li { grid-template-columns: 1fr; } }

/* ---- Équipe : mode de consultation sur chaque fiche ---- */
.eq-mode {
  display: inline-block; align-self: flex-start;
  margin: 0 0 0.8rem; padding: 0.2rem 0.7rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-primary-dark);
  background: var(--color-tint); border-radius: 999px;
}
.eq-mode::before { content: ""; display: inline-block; vertical-align: 0.08em; width: 0.45rem; height: 0.45rem; margin-right: 0.45rem; border-radius: 50%; background: var(--color-secondary); }
.eq-mode--walk::before { background: var(--color-accent); }

/* ---- Adresse cliquable : ouvre l'itinéraire dans Google Maps ---- */
a.addr-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--color-secondary);
}
a.addr-link::after {
  content: "";
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-left: 0.3em;
  vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-8-8 18-2-8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-8-8 18-2-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.75;
}
a.addr-link:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
a.addr-link:hover::after { opacity: 1; }
:is(.site-footer, .cta-band, .ce-cta) a.addr-link { text-decoration-color: rgba(255, 255, 255, 0.55); }

/* =========================================================
   Bande photo « L'accueil » (page d'accueil)
   La photo reste presque immobile pendant que la carte de texte défile par-dessus :
   le cadre fait 100 % de la largeur, la photo est plus haute que le cadre (130 %)
   et glisse de −15 % à +15 % pendant la traversée de l'écran.
   Moteur : animation liée au défilement en CSS (Chrome, Edge, Safari 26+) ;
   ailleurs, un petit script fait le même calcul. Mouvement réduit : photo fixe.
   ========================================================= */
.px-band {
  position: relative;
  overflow: clip;            /* « clip » et non « hidden » : sinon la bande devient son propre conteneur de défilement et la parallaxe ne bouge plus */
  min-height: clamp(30rem, 92vh, 52rem);
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--color-primary-dark);
  border-top: 1px solid var(--color-border);
}
.px-media { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.px-media picture { display: block; height: 100%; }
.px-img {
  position: absolute;
  left: 0; top: -15%;
  width: 100%; height: 130%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
  will-change: transform;
  transform: translate3d(0, var(--px, 0px), 0) scale(1.02);
}
/* Voile discret en bas pour la lisibilité de la carte, renforcé la nuit */
.px-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 45, 0) 45%, rgba(10, 30, 45, 0.28) 100%);
}
html[data-theme="dark"] .px-media::after { background: linear-gradient(180deg, rgba(8, 18, 26, 0.25) 0%, rgba(8, 18, 26, 0.55) 100%); }
html[data-theme="dark"] .px-img { filter: brightness(0.82) saturate(0.95); }

.px-inner { width: 100%; padding-block: clamp(2rem, 6vw, 4rem); }
.px-card {
  max-width: 30rem;
  background: var(--color-surface);
  background-image: var(--grain);
  border: 1px solid var(--color-rule);
  border-radius: 6px 6px 6px 0;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 18px 40px rgba(10, 30, 45, 0.22);
  position: relative;
}
.px-card::before {   /* onglet de fiche, comme les fiches du site */
  content: "";
  position: absolute; top: -1px; left: 1.6rem;
  width: 3.2rem; height: 5px;
  background: var(--color-accent);
  border-radius: 0 0 3px 3px;
}
.px-eyebrow { margin: 0 0 0.4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-secondary); }
.px-card h2 { font-size: var(--fs-h2); margin-bottom: 0.45em; }
.px-card p { font-size: var(--fs-sm); }
.px-card .px-link { margin: 0.8rem 0 0; }

/* La carte arrive en glissant légèrement vers le haut quand la bande entre à l'écran */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .px-img {
      transform: none;
      animation: px-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes px-drift {
      from { transform: translate3d(0, -12%, 0) scale(1.02); }
      to   { transform: translate3d(0, 12%, 0) scale(1.02); }
    }
    .px-card {
      animation: px-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    @keyframes px-rise {
      from { transform: translateY(3rem); opacity: 0.8; }
      to   { transform: none; opacity: 1; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-img { transform: none !important; animation: none !important; top: 0; height: 100%; }
}
@media (max-width: 640px) {
  .px-band { min-height: 34rem; }
  .px-img { object-position: 42% 55%; }
  .px-card { border-radius: 6px; }
}

/* ---- Bande photo : le comptoir d'accueil doit rester visible ----
   Grand écran : la fiche se place à droite, sur le mur blanc, à côté du comptoir.
   Écran moyen et téléphone : la photo occupe le haut, la fiche passe dessous
   (elle ne mord que sur le sol, en bas de la photo). */
@media (min-width: 1100px) {
  .px-band { align-items: center; }
  .px-inner { display: flex; justify-content: flex-end; }
  .px-card { max-width: 25rem; }
}
@media (max-width: 1099px) {
  .px-band { display: block; min-height: 0; background: var(--color-bg); background-image: var(--grain); }
  .px-media { position: relative; inset: auto; z-index: 0; height: clamp(20rem, 62vh, 34rem); }
  .px-media::after { background: none; }
  .px-img { object-position: 42% 50%; }
  .px-inner { position: relative; z-index: 1; padding-block: 0 clamp(2rem, 6vw, 3rem); }
  .px-card { margin-top: -3rem; max-width: 34rem; }
}
@media (max-width: 640px) {
  .px-media { height: clamp(18rem, 58vh, 26rem); }
  .px-img { object-position: 40% 52%; }
  .px-card { margin-top: -2.2rem; }
}

/* =========================================================
   « Le centre en images » (page Le centre)
   Une grande photo de la façade, puis deux photos côte à côte. Légendes en serif,
   filet fin au-dessus : même vocabulaire que les fiches du « Carnet éditorial ».
   Les photos se dévoilent derrière un masque quand elles arrivent à l'écran.
   ========================================================= */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(1.25rem, 3vw, 2rem); }
.gal-item { margin: 0; min-width: 0; }
.gal-item--wide { grid-column: 1 / -1; }
.gal-item picture { display: block; overflow: clip; border-radius: 4px; background: var(--color-tint); }
.gal-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gal-item--wide img { aspect-ratio: 1600 / 1351; object-position: 50% 50%; }
.gal-item--wide { max-width: 880px; width: 100%; justify-self: center; }
.gal-item:hover img { transform: scale(1.025); }
.gal-item figcaption {
  margin-top: 0.7rem; padding-top: 0.55rem;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-display); font-size: var(--fs-base); color: var(--color-primary-dark);
}
html[data-theme="dark"] .gal-item img { filter: brightness(0.9); }
@media (prefers-reduced-motion: no-preference) {
  .js .gal-item.reveal picture { clip-path: inset(0 0 100% 0); transition: clip-path 0.7s cubic-bezier(0.5, 0, 0.2, 1); transition-delay: 0s; }
  .js .gal-item.reveal.is-visible picture { clip-path: inset(0 0 0 0); }
  .js .gal-item.reveal img { transform: scale(1.08); }
  .js .gal-item.reveal.is-visible img { transform: none; }
  .js .gal-item.reveal.is-visible:hover img { transform: scale(1.025); }
}
@media (max-width: 640px) { .gal { grid-template-columns: 1fr; } }

/* ---- Menu mobile : voile cliquable derrière le menu ----
   Il couvre la page sous l'en-tête ; un toucher dessus referme le menu.
   Affiché uniquement quand le menu est ouvert (aucune synchronisation à gérer). */
.nav-backdrop { display: none; }
@media (max-width: 1259px) {
  html.nav-locked .nav-backdrop {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: var(--header-h, 64px);
    z-index: 499;                       /* sous l'en-tête et son menu (500), au-dessus de la page */
    background: rgba(10, 30, 45, 0.38);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: nav-veil 0.25s ease both;
  }
  html.nav-locked :is(.chat-launcher, .chat-window, .a11y-launcher, .a11y-panel) { visibility: hidden; }
}
@keyframes nav-veil { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nav-backdrop { animation: none !important; } }

/* =========================================================
   Menu mobile ouvert : l'en-tête (logo + barre) et la barre du bas restent en place
   Avant : le script bloquait le défilement en mettant « overflow: hidden » sur <body>.
   <body> devenait alors son propre conteneur de défilement, l'en-tête « collant » se
   détachait de l'écran et disparaissait. Le blocage se fait maintenant sur <html>,
   ce qui garde l'en-tête collé en haut. Le menu s'arrête au-dessus de la barre du bas.
   ========================================================= */
html.nav-locked { overflow: hidden; }
@media (max-width: 1259px) {
  .main-nav { overscroll-behavior: contain; }
  html.nav-locked .nav-backdrop { touch-action: none; }
}
@media (max-width: 899px) {
  html.has-dock .main-nav {
    height: auto;
    bottom: var(--dock-real, calc(65px + env(safe-area-inset-bottom, 0px)));
  }
  html.has-dock.nav-locked .nav-backdrop { bottom: var(--dock-real, calc(65px + env(safe-area-inset-bottom, 0px))); }
}

/* =========================================================
   Photos : affichage instantané
   Un aperçu flou de quelques centaines d'octets (intégré à la page) occupe la place
   dès l'ouverture ; la vraie photo apparaît en fondu dès qu'elle est prête. Plus de
   rectangle vide pendant le chargement. Les fichiers sont servis en AVIF (le plus léger),
   puis WebP, puis JPEG selon le navigateur, et à la bonne taille pour l'écran.
   ========================================================= */
picture.lqip { display: block; background-size: cover; background-position: center; }
.px-media picture.lqip { height: 100%; }
.js picture.lqip img { opacity: 0; transition: opacity 0.3s ease; }
.js picture.lqip img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js picture.lqip img { transition: none; } }
.js .gal-item picture.lqip img { transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* =========================================================
   Plan : chargé seulement à la demande
   La carte Google intégrée pèse plus d'un mégaoctet de scripts et « capture » le doigt
   pendant le défilement sur téléphone. À la place : un plan dessiné, très léger, avec
   « Itinéraire » (ouvre Google Maps) et « Afficher le plan ici » (charge la vraie carte).
   ========================================================= */
.map-embed:has(.map-facade) { position: relative; overflow: clip; }
.map-facade { position: relative; width: 100%; height: 100%; min-height: 15rem; display: grid; }
.map-facade__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.mf-ground { fill: var(--color-surface-alt); }
.mf-park { fill: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface-alt)); }
.mf-street { fill: none; stroke: var(--color-surface); stroke-width: 9; stroke-linecap: round; }
.mf-street--main { stroke-width: 15; }
.mf-pin { fill: var(--color-primary-dark); }
.mf-cross { fill: var(--color-surface); }
.mf-metro { fill: var(--color-primary); }
.mf-m { fill: var(--color-surface); font: 700 15px var(--font-body); }
.map-facade__actions { position: relative; align-self: end; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1rem; }
.map-facade__actions .btn { box-shadow: 0 4px 14px rgba(18, 58, 90, 0.18); }
.map-facade__actions .btn--secondary { background-color: var(--color-surface); }
html[data-theme="dark"] .mf-street { stroke: #24414F; }
html[data-theme="dark"] .mf-pin { fill: #8CCBE6; }
html[data-theme="dark"] .mf-cross { fill: #0F1C24; }

/* Animations décoratives en pause hors écran et pendant le défilement (voir initAnimationBudget).
   La photo en parallaxe et les apparitions au défilement ne sont pas concernées. */
/* Seules les animations d'ambiance en boucle sont suspendues : les apparitions (épingle, fenêtres,
   traits) continuent pendant le défilement, sans attendre que le doigt s'arrête. */
.anim-off :is(.float, .ce-pulse, .ce-ripple, .ce-dot, .ce-ring, .ce-walk, .sway),
.anim-off .eq-media--soon::after,
.anim-off .eq-soon li::before,
html.is-scrolling :is(.float, .ce-pulse, .ce-ripple, .ce-dot, .ce-ring, .ce-walk, .sway),
html.is-scrolling .eq-media--soon::after,
html.is-scrolling .eq-soon li::before { animation-play-state: paused !important; }

/* Fluidité : les pointillés « en marche » de la route et du trajet sont figés.
   Animer un pointillé oblige le téléphone à redessiner toute l'illustration 60 fois par
   seconde (mesuré : jusqu'à 20 % du processeur au repos). Les passants continuent de marcher. */
.ce-road, .ce-dash { animation: none !important; }

/* Réactivité au toucher : aucun délai d'attente « double-tap » sur les liens et boutons */
a, button, .btn, label, summary { touch-action: manipulation; }

/* Changement de page : défilement figé deux images (coupe l'élan sur iPhone), retour visuel immédiat
   au toucher, et fine barre de progression si la page met plus d'un instant à arriver. */
html.nav-jump { overflow: hidden !important; }
.m-dock__item.is-pressed { transform: scale(0.96); background: var(--color-tint); }
.m-dock__item--main.is-pressed { background: var(--color-primary-dark); }
html[data-theme="dark"] .m-dock__item--main.is-pressed { background: #B9E0F0; }
.main-nav a.is-pressed, a.btn.is-pressed { opacity: 0.75; }
body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none;
}
html.is-navigating body::after { opacity: 1; animation: nav-progress 2.4s cubic-bezier(0.1, 0.6, 0.2, 1) forwards; }
@keyframes nav-progress { from { transform: scaleX(0.05); } to { transform: scaleX(0.92); } }
@media (prefers-reduced-motion: reduce) { html.is-navigating body::after { animation: none; transform: scaleX(0.6); } }

/* Carte Google Maps intégrée (Informations pratiques) : chargée seulement à l'approche, à la bonne hauteur sur téléphone */
.map-embed--live { position: relative; background: var(--color-surface-alt); max-height: 28rem; }
.map-embed--live iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-route { margin: 0.9rem 0 0; }
@media (max-width: 640px) {
  .map-embed--live { aspect-ratio: auto; height: 20rem; }
  .ho-info .map-embed--live { height: 17rem; }
}

/* ---- Rendez-vous (26/10) : réservation Rosa.be, liste nominative, urgences ---- */
html:not(.rosa-on) .if-rosa, html.rosa-on .if-no-rosa { display: none !important; }
.pro-choice__info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; }
.pro-choice-role { font-size: var(--fs-sm); color: var(--color-text-muted); }
.pro-choice__info .eq-mode { margin: 0.45rem 0 0; }
.pro-choice--soon { border-style: dashed; background: transparent; }
.pro-choice .rdv-btn span { white-space: nowrap; }
.rdv-note { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
@media (max-width: 560px) {
  .pro-choice { flex-direction: column; align-items: stretch; }
  .pro-choice .btn { width: 100%; min-width: 0; }
}
.callout--urgence { border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); background: var(--color-danger-bg); }
.callout--urgence > svg { color: var(--color-danger); }
.callout--urgence a { color: inherit; font-weight: 700; }

/* ---- Carte Google Maps avec accord du visiteur (26/10) ---- */
.map-embed--live { min-height: 16rem; }
.map-embed--live iframe { position: absolute; inset: 0; }
.map-consent { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; }
.map-consent .map-facade__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-consent__box { position: relative; max-width: 22rem; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 1rem 1.1rem; box-shadow: 0 8px 24px rgba(18, 58, 90, 0.14); }
.map-consent__box p { margin: 0 0 0.75rem; font-size: var(--fs-sm); color: var(--color-text); }
.map-embed--live.is-live .map-consent { display: none; }

/* Bouton « Gérer les cookies » du bas de page, présenté comme un lien */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; cursor: pointer; }
.link-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
/* Fiches de la liste « Choisir son professionnel » : nom et modalité au-dessus, bouton dessous */
.pro-choice-list .pro-choice { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.9rem; padding: 1.1rem 1.25rem 1.2rem; }
.pro-choice-list .pro-choice .btn { min-width: 0; }
.pro-choice-list .pro-choice--soon { justify-content: center; }
@media (max-width: 560px) { .pro-choice-list .pro-choice .btn { width: 100%; } }
.site-footer .link-btn { color: var(--color-on-dark); }
.map-embed--live { aspect-ratio: auto; width: 100%; height: 26rem; max-height: none; }
.map-near { margin-top: var(--space-4); }
@media (max-width: 640px) { .map-embed--live { height: 20rem; } }
/* Zone tactile de 44 px pour « Gérer les cookies » sans décaler la ligne */
.footer-bottom .link-btn { padding-block: 10px; margin-block: -10px; min-width: 44px; }
main .link-btn { display: inline; padding-block: 9px; }

/* =========================================================
   SYSTÈME DE MOUVEMENT (1er novembre 2026) — croquis validés
   Une seule courbe, trois durées (0,25 s · 0,5 s · 0,8 s), tout part du centre.
   Plus aucune animation en boucle : chaque animation se joue une fois.
   ========================================================= */
:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* Calme : les petites animations d'ambiance en boucle sont arrêtées */
.float, .ce-pulse, .ce-ripple, .ce-dot, .ce-ring, .ce-walk, .ce-road, .ce-dash, .sway,
.eq-media--soon::after, .eq-soon li::before { animation: none !important; }
.ce-pulse, .ce-ripple { opacity: 0; }

/* Apparition des blocs : légère montée + léger zoom, ordre calculé depuis le centre (--rd, voir initReveal) */
.js .reveal {
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: var(--rd, calc(var(--i, 0) * 60ms));
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Titres : « mise au point » pour le titre de page, « ouverture depuis le centre » pour les titres de section */
@media (prefers-reduced-motion: no-preference) {
  main h1.mt-wait { opacity: 0; filter: blur(8px); transform: translateY(5px); }
  main h1.mt-wait.mt-go { opacity: 1; filter: none; transform: none; transition: opacity 0.6s var(--ease), filter 0.6s var(--ease), transform 0.6s var(--ease); }
  main h2.mt-wait { clip-path: inset(0 50% 0 50%); }
  main h2.mt-wait.mt-go { clip-path: inset(0 0 0 0); transition: clip-path 0.65s var(--ease); }
}

/* ---- Illustrations symétriques : chaque pièce attend que l'illustration soit à l'écran ---- */
.js .sx { opacity: 0; }
.js .sx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .sx-halo, .js .sx-ripple { opacity: 0; }
.sx, .sx-draw, .sx-light, .sx-halo, .sx-ripple { animation-delay: var(--d, 0s); animation-fill-mode: both; animation-timing-function: var(--ease); transform-box: fill-box; }
.sx-build, .sx-grow, .sx-drop { transform-origin: 50% 100%; }
.sx-pop, .sx-ring, .sx-halo, .sx-ripple { transform-origin: center; }
.is-visible .sx-fade { animation-name: sx-fade; animation-duration: 0.6s; }
.is-visible .sx-draw { animation-name: sx-draw; animation-duration: 0.55s; }
.is-visible .sx-build { animation-name: sx-build; animation-duration: 0.55s; }
.is-visible .sx-grow { animation-name: sx-grow; animation-duration: 0.5s; }
.is-visible .sx-light { animation-name: sx-light; animation-duration: 0.4s; }
.is-visible .sx-pop { animation-name: sx-pop; animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1); }
.is-visible .sx-halo { animation-name: sx-halo; animation-duration: 1.1s; animation-timing-function: ease-out; }
.is-visible .sx-ripple { animation-name: sx-halo; animation-duration: 0.9s; animation-timing-function: ease-out; }
.is-visible .sx-ring { animation-name: sx-ring; animation-duration: 0.6s; }
.is-visible .sx-drop { animation-name: sx-drop; animation-duration: 0.55s; }
.is-visible .sx-inT { animation-name: sx-inT; animation-duration: 0.6s; }
.is-visible .sx-inL { animation-name: sx-inL; animation-duration: 0.6s; }
.is-visible .sx-inR { animation-name: sx-inR; animation-duration: 0.6s; }
@keyframes sx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sx-build { from { opacity: 0; transform: translateY(18px) scaleY(0.94); } to { opacity: 1; transform: none; } }
@keyframes sx-grow { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes sx-light { from { fill: var(--art-paper); } to { fill: var(--art-soft); } }
@keyframes sx-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes sx-halo { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sx-ring { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes sx-drop { 0% { opacity: 0; transform: translateY(-26px); } 70% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
@keyframes sx-inT { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes sx-inL { from { opacity: 0; transform: translate(-30px, 18px); } to { opacity: 1; transform: none; } }
@keyframes sx-inR { from { opacity: 0; transform: translate(30px, 18px); } to { opacity: 1; transform: none; } }
.ce-art--sym { max-width: 34rem; }

/* ---- Accueil, « Notre équipe » : pictogrammes centrés, cercle tracé des deux côtés depuis le haut ---- */
.ho-team { row-gap: clamp(1.5rem, 3vw, 2.5rem); }
.ho-pro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; border-top: 0; padding: 0.5rem 0.5rem 0; }
.ho-pro > div { display: flex; flex-direction: column; align-items: center; }
.ho-pro p { max-width: 18rem; }
.ho-pro__icon { position: relative; width: 4.75rem; height: 4.75rem; border: 0; background: var(--color-surface); box-shadow: none; transition: background-color 0.25s ease, transform 0.35s var(--ease); }
.ho-pro__icon > svg:not(.ho-ring) { width: 2rem; height: 2rem; stroke-width: 1.5; position: relative; }
.ho-ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-primary); stroke-width: 1.6; stroke-linecap: round; }
.ho-pro:hover .ho-pro__icon { background: var(--color-tint); border-color: transparent; transform: translateY(-3px); }
.js .ho-pro .ho-ring path, .js .ho-pro .ho-pro__icon > svg:not(.ho-ring) :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ho-pro.is-visible .ho-ring path { animation: sx-draw 0.55s var(--ease) both; animation-delay: var(--rd, 0ms); }
.ho-pro.is-visible .ho-pro__icon > svg:not(.ho-ring) :is(path, circle) { animation: sx-draw 0.5s var(--ease) both; animation-delay: calc(var(--rd, 0ms) + 180ms); }
.ho-pro__icon > svg:not(.ho-ring) path:nth-child(n+2), .ho-pro__icon > svg:not(.ho-ring) circle { stroke: var(--color-accent); }

/* ---- Bande photo de l'accueil : la photo se révèle lentement, la fiche centrée arrive ensuite ----
   La photo occupe le haut ; la fiche est centrée, à cheval sur son bord bas : le comptoir reste visible. */
.px-band { display: block; min-height: 0; background: var(--color-bg); background-image: var(--grain); }
.px-media { position: relative; inset: auto; z-index: 0; height: clamp(22rem, 72vh, 42rem); }
.px-media::after { background: linear-gradient(180deg, rgba(10, 30, 45, 0) 60%, rgba(10, 30, 45, 0.22) 100%); }
.px-media picture.lqip { background-image: none !important; background-color: var(--color-surface-alt); }
.px-img { object-position: 50% 56%; }
.px-inner { position: relative; z-index: 1; display: flex; justify-content: center; padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.px-card { margin-top: clamp(-7rem, -9vw, -2.4rem); max-width: 36rem; text-align: center; border-radius: 8px; padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 4vw, 2.75rem); animation: none !important; }
.px-card::before { left: 0; right: 0; width: auto; top: -1px; height: 4px; border-radius: 8px 8px 0 0; transform-origin: center; }
.px-card p { margin-inline: auto; }
@media (max-width: 640px) { .px-media { height: clamp(18rem, 58vh, 26rem); } .px-img { object-position: 42% 52%; } }
@media (prefers-reduced-motion: no-preference) {
  .js .px-band .px-img { opacity: 0; filter: blur(6px) saturate(0.85); scale: 1.07;
    transition: opacity 2s cubic-bezier(0.45, 0, 0.25, 1), filter 1.8s cubic-bezier(0.25, 0.6, 0.25, 1), scale 3.2s cubic-bezier(0.25, 0.6, 0.25, 1); }
  .js .px-band.px-on .px-img.is-loaded { opacity: 1; filter: none; scale: 1; }
  html.js[data-theme="dark"] .px-band .px-img { filter: blur(6px) brightness(0.82) saturate(0.8); }
  html.js[data-theme="dark"] .px-band.px-on .px-img.is-loaded { filter: brightness(0.82) saturate(0.95); }
  .js .px-band .px-card { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease) 1s, transform 0.8s var(--ease) 1s; }
  .js .px-band.px-on .px-card { opacity: 1; transform: none; }
  .js .px-band .px-card::before { transform: scaleX(0); transition: transform 0.7s var(--ease) 1.35s; }
  .js .px-band.px-on .px-card::before { transform: scaleX(1); }
}

/* ---- Galerie : chaque photo s'ouvre comme un rideau, depuis son milieu ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .gal-item.reveal picture { clip-path: inset(0 50% 0 50%); transition: clip-path 0.7s var(--ease); transition-delay: var(--rd, 0ms); }
  .js .gal-item.reveal.is-visible picture { clip-path: inset(0 0 0 0); }
  .js .gal-item.reveal img { transform: scale(1.12); transition: opacity 0.3s ease, transform 0.9s var(--ease); transition-delay: 0s, var(--rd, 0ms); }
  .js .gal-item.reveal.is-visible img { transform: none; }
  .js .gal-item.reveal.is-visible:hover img { transform: scale(1.03); transition-delay: 0s; }
}

/* ---- Petits gestes ---- */
/* Liens fléchés : un filet turquoise s'étire depuis le milieu au survol */
.ce-link { background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 50% 100% / 0% 2px; transition: background-size 0.35s var(--ease), color 0.2s ease; }
.ce-link:hover, .ce-link:focus-visible { background-size: 100% 2px; }
/* Menu (grand écran) : la page active est soulignée par un filet qui s'ouvre depuis le centre */
@media (min-width: 1260px) {
  .nav-list a { position: relative; border-bottom-color: transparent !important; }
  .nav-list a::after { content: ""; position: absolute; left: 0.2em; right: 0.2em; bottom: -2px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: center; transition: transform 0.35s var(--ease); }
  .nav-list a:hover::after { transform: scaleX(0.35); }
  .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
}
/* Boutons : le bouton contour se remplit depuis son centre ; léger enfoncement au toucher */
.btn--secondary { background-image: linear-gradient(var(--color-tint), var(--color-tint)); background-repeat: no-repeat; background-position: 50% 50%; background-size: 0% 100%; transition: background-size 0.4s var(--ease), color 0.25s ease, border-color 0.2s ease, transform 0.15s ease; }
.btn--secondary:hover { background-color: transparent; background-size: 100% 100%; }
html[data-theme="dark"] .btn--secondary { background-image: linear-gradient(var(--color-primary), var(--color-primary)); }
.btn--primary:hover { box-shadow: 0 8px 18px rgba(18, 58, 90, 0.18); }
.btn:active { transform: scale(0.98); }
/* Changement de page : le nouveau contenu arrive en 0,28 s ; l'en-tête ne bouge pas */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main.page-in { animation: page-in 0.28s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { main.page-in { animation: none; } }
.ho-pro__icon .ho-ring { width: 100%; height: 100%; }
/* Section équipe de l'accueil : titre, introduction et lien centrés, comme les pictogrammes */
.container:has(> .ho-team) > :is(h2, .section-intro, p) { text-align: center; margin-inline: auto; }

/* =========================================================
   PAGE « LE CENTRE ET L'ÉQUIPE » (fusion du 1er novembre 2026)
   ========================================================= */
.tm-k { margin: 0 0 0.4rem; font: 700 0.75rem/1.2 var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary); }
.tm-head { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.tm-head h2 { margin: 0 0 0.6rem; }
.tm-head .section-intro { margin-inline: auto; margin-bottom: 0; }

/* Haut de page : la façade en grand */
.tm-hero { position: relative; overflow: hidden; min-height: clamp(26rem, 78vh, 40rem); display: flex; align-items: flex-end; background: #123A5A; color: #fff; isolation: isolate; }
.tm-hero__media { position: absolute; inset: 0; z-index: -2; }
.tm-hero__media picture { display: block; width: 100%; height: 100%; }
.tm-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform-origin: 50% 45%; }
html.tm-zoom .tm-hero__img { transform: translate3d(0, var(--y, 0px), 0) scale(var(--z, 1.3)); will-change: transform; }
.tm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 30, 45, 0.2) 0%, rgba(10, 30, 45, 0.35) 45%, rgba(10, 30, 45, 0.82) 100%); }
.tm-hero__inner { width: 100%; text-align: center; padding-block: 2rem clamp(2.5rem, 6vw, 4rem); }
.tm-crumb, .tm-crumb a { color: rgba(255, 255, 255, 0.85); }
.tm-crumb { position: absolute; top: 1rem; left: 0; right: 0; margin: 0; }
.tm-eyebrow { margin: 0 0 0.6rem; font: 700 0.78rem/1.2 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: #BFE3E3; }
.tm-hero h1 { color: #fff; margin: 0 auto 0.8rem; max-width: 16ch; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.05; }
.tm-sub { margin: 0 auto; max-width: 38rem; color: #E6F0F5; font-size: clamp(1rem, 2.2vw, 1.15rem); }
.tm-chips { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.tm-chips li { font: 600 0.85rem/1 var(--font-heading); padding: 0.5rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); }
@media (prefers-reduced-motion: no-preference) {
  .js .tm-hero__inner > * { animation: tm-up 0.7s var(--ease) both; }
  .js .tm-hero__inner > :nth-child(2) { animation-delay: 0.15s; }
  .js .tm-hero__inner > :nth-child(3) { animation-delay: 0.22s; }
  .js .tm-hero__inner > :nth-child(4) { animation-delay: 0.3s; }
  .js .tm-hero__inner > :nth-child(5) { animation-delay: 0.38s; }
}
@keyframes tm-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Équipe et guide */
.tm-team { padding-block: clamp(3rem, 7vw, 5rem); background: var(--color-surface); }
.tm-guide { display: none; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 auto 0.5rem; max-width: 62rem; }
.js .tm-guide { display: flex; }
.tm-guide button { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-primary-dark); font: 600 0.92rem/1 var(--font-heading); cursor: pointer; white-space: nowrap; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease; }
.tm-guide button:hover { border-color: var(--color-accent); }
.tm-guide button:active { transform: scale(0.97); }
.tm-guide button[aria-pressed="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-surface); }
.tm-answer { min-height: 5.25rem; display: flex; align-items: center; justify-content: center; }
.tm-answer__box { display: flex; gap: 0.75rem; align-items: flex-start; max-width: 50rem; background: var(--color-surface-alt); border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; padding: 0.85rem 1.25rem; animation: tm-up 0.4s var(--ease) both; }
.tm-answer__box svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--color-accent); }
.tm-answer__box p { margin: 0; }
.tm-team .eq-grid { margin-top: 0.5rem; }
.tm-team .eq-card { position: relative; }
.tm-team .eq-card.is-hi { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(18, 58, 90, 0.16); border-color: var(--color-accent); }
.tm-team .eq-card.is-hi::before { content: ""; position: absolute; z-index: 2; left: 22%; right: 22%; top: -1px; height: 3px; background: var(--color-accent); border-radius: 0 0 3px 3px; }
.tm-team .eq-card.is-lo { opacity: 0.32; transform: scale(0.97); filter: saturate(0.4); }
.tm-team.tm-used .eq-card { transition-delay: 0s !important; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease, opacity 0.35s ease, filter 0.35s ease; }
html[data-theme="dark"] .tm-team .eq-card.is-hi { box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45); }
@media (max-width: 700px) {
  .js .tm-guide { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding: 4px var(--space-4) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tm-guide::-webkit-scrollbar { display: none; }
  .tm-guide button { flex: none; }
}
@media (max-width: 640px) { .tm-team .eq-card.is-lo { display: none; } }

/* Trois engagements */
.tm-ways { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }
.tm-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (max-width: 800px) { .tm-pillars { grid-template-columns: 1fr; } }
.tm-pillar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.8rem 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.tm-pillar svg { width: 56px; height: 56px; }
.tm-pillar h3 { margin: 0; }
.tm-pillar p { margin: 0; color: var(--color-text-muted); }
.tm-soon { margin-top: clamp(1.5rem, 4vw, 2.5rem); background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong); border-radius: 10px; padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.5rem; text-align: center; }
.tm-soon .tm-k { margin: 0; }
.tm-soon__t { margin: 0; font-family: var(--font-heading); color: var(--color-primary-dark); font-size: 1.1rem; }

.tm-k, .tm-eyebrow, .tm-crumb, .tm-head p { margin-inline: auto; max-width: none; }
.tm-head .section-intro { max-width: 38rem; }
.tm-answer { margin-bottom: 1rem; }

/* =========================================================
   PAGES ACTUALITÉS ET SANTÉ (1er novembre 2026)
   ========================================================= */
.ar-index, .ac-section { padding-block: 0 clamp(3rem, 7vw, 5rem); }
.ar-index__head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.ar-index__head h1 { margin: 0 0 0.6rem; }
.ar-index__head .section-intro { margin-inline: auto; max-width: 40rem; margin-bottom: 0; }
.ar-cat { display: inline-block; font: 700 0.72rem/1 var(--font-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); background: var(--color-tint); padding: 0.4em 0.65em; border-radius: 999px; }

/* Cartes d'articles */
.ar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (max-width: 720px) { .ar-grid { grid-template-columns: 1fr; } }
.ar-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.5rem 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.25s ease; }
.ar-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18, 58, 90, 0.12); border-color: var(--color-accent); }
.ar-card:focus-within { border-color: var(--color-accent); }
.ar-card__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.88rem; color: var(--color-text-muted); }
.ar-card__title { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.4rem); line-height: 1.25; }
.ar-card__title a { color: var(--color-primary-dark); text-decoration: none; }
.ar-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }   /* toute la carte est cliquable */
.ar-card__title a:focus-visible { outline: none; }
.ar-card__title a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ar-card p { margin: 0; max-width: none; }
.ar-card > p:not(.ar-card__meta):not(.ar-card__more) { color: var(--color-text-muted); }
.ar-card__more { margin-top: auto !important; padding-top: 0.4rem; font: 600 0.92rem/1 var(--font-heading); color: var(--color-primary); display: inline-flex; align-items: center; gap: 0.4em; }
.ar-card__more svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.ar-card:hover .ar-card__more svg { transform: translateX(4px); }
.ar-all { text-align: center; margin: clamp(1.5rem, 4vw, 2.25rem) auto 0; }

/* Page article */
.ar { max-width: 46rem; margin: 0 auto; padding: 0 var(--space-4) clamp(2rem, 5vw, 3rem); }
.ar-head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.ar-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1rem; margin: 0 auto 0.9rem; max-width: none; font-size: 0.9rem; color: var(--color-text-muted); }
.ar-head h1 { margin: 0 auto 0.8rem; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.15; max-width: 22ch; }
.ar-lead { margin: 0 auto; font-size: clamp(1.05rem, 2.3vw, 1.2rem); color: var(--color-text-muted); max-width: 40rem; }
.ar-body { font-size: 1.06rem; line-height: 1.7; }
.ar-body p, .ar-body ul { max-width: none; }
.ar-body h2 { margin: 2.2rem 0 0.8rem; font-size: clamp(1.3rem, 3vw, 1.6rem); }
.ar-body ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.ar-body li { margin-bottom: 0.35em; }
.ar-body li::marker { color: var(--color-accent); }
.ar-note { margin: 2rem 0; background: var(--color-surface-alt); border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; }
.ar-note p { margin: 0; max-width: none; }
.ar-sources { border-top: 1px solid var(--color-border); padding-top: 1.25rem; font-size: 0.92rem; color: var(--color-text-muted); }
.ar-sources h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.ar-sources ul { margin: 0 0 0.8rem; padding-left: 1.1em; }
.ar-sources li { margin-bottom: 0.3em; overflow-wrap: anywhere; }
.ar-by { margin: 0; }
.ar-more { background: var(--color-surface-alt); padding-block: clamp(2.5rem, 6vw, 4rem); }
.ar-more h2 { text-align: center; margin: 0 0 1.5rem; }

/* Page Actualités : fil chronologique */
.ac-month { font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-secondary); margin: 2rem 0 1rem; text-align: center; }
.ac-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ac-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.1rem; align-items: start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.2rem 1.3rem; }
.ac-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-primary-dark); color: var(--color-surface); border-radius: 8px; padding: 0.55rem 0.3rem; font-family: var(--font-heading); text-align: center; }
.ac-d { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.ac-m { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.2rem; }
.ac-cat { margin: 0 0 0.25rem; font: 700 0.72rem/1.2 var(--font-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); }
.ac-body h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.ac-body p { margin: 0; max-width: none; }
.ac-body p + p { margin-top: 0.5rem; }
@media (max-width: 520px) { .ac-item { grid-template-columns: 3.6rem 1fr; gap: 0.85rem; padding: 1rem; } .ac-d { font-size: 1.35rem; } }
.ac-aside { margin-top: clamp(2rem, 5vw, 3rem); background: var(--color-surface-alt); border-radius: 10px; padding: 1.4rem 1.5rem; }
.ac-aside h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
.ac-aside ul { margin: 0 0 0.75rem; padding-left: 1.1em; }
.ac-aside li { margin-bottom: 0.35em; }
.ac-aside p { margin: 0; }
.ar-index__head h1, .ar-index__head .tm-k { margin-inline: auto; max-width: none; }
.ac-body h3 { font-size: 1.25rem; }

/* =========================================================
   ASSISTANT (chatbox) — 2 novembre 2026
   ========================================================= */
.chat-window { width: min(370px, calc(100vw - 2.2rem)); max-height: min(78vh, 600px); }
.chat-header strong { display: flex; flex-direction: column; line-height: 1.2; }
.chat-header strong span { font: 500 0.75rem/1.3 var(--font-body); opacity: 0.8; }
.chat-body { min-height: 9rem; }
.chat-msg { margin: 0; line-height: 1.45; align-self: flex-start; animation: chat-in 0.25s var(--ease) both; }
.chat-msg a { color: var(--color-primary); font-weight: 600; }
.chat-msg--me { align-self: flex-end; background: var(--color-primary-dark); color: #fff; border-radius: 12px 12px 2px 12px; }
.chat-msg--urgent a { color: inherit; }
.chat-typing { display: inline-flex; gap: 4px; padding: 0.75em 0.9em; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); animation: chat-dot 1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes chat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.chat-quick { padding: 0.25rem 1em 0.6rem; max-height: 6.4rem; overflow-y: auto; }
.chat-quick:empty { display: none; }
.chat-quick button { min-height: 36px; text-align: left; line-height: 1.25; }
.chat-form { display: flex; gap: 0.5rem; padding: 0.6rem 0.8rem 0.3rem; border-top: 1px solid var(--color-border); }
.chat-input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--color-border); border-radius: 999px; padding: 0 1rem; font: inherit; font-size: 16px; color: var(--color-text); background: var(--color-surface); }
.chat-input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }
.chat-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-primary-dark); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-send svg { width: 20px; height: 20px; }
.chat-send:hover { background: var(--color-primary); }
.chat-note { margin: 0; padding: 0 1rem 0.7rem; font-size: 0.75rem; color: var(--color-text-muted); text-align: center; max-width: none; }
html[data-theme="dark"] .chat-msg--me { background: #1F4C66; }
html[data-theme="dark"] .chat-send { background: #1F4C66; }
@media (prefers-reduced-motion: reduce) { .chat-msg, .chat-typing span { animation: none; } }

/* =========================================================
   FICHES DES MÉDECINS (2 novembre 2026)
   ========================================================= */
.fi-open { margin-top: 0.9rem; align-self: center; background-color: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font: inherit; font-weight: 600; min-height: 44px; }
html.fi-locked { overflow: hidden; }
dialog.fiche { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; inset: 0; overflow: hidden; color: var(--color-text); }
dialog.fiche[open] { display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
dialog.fiche::backdrop { background: rgba(10, 30, 45, 0.55); }
dialog.fiche[open]::backdrop { animation: fi-fade 0.3s ease both; }
.fi-sheet { position: relative; width: min(980px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--color-surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(10, 30, 45, 0.35); }
dialog.fiche[open] .fi-sheet { animation: fi-in 0.45s var(--ease) both; }
dialog.fiche.is-closing .fi-sheet { animation: fi-out 0.22s ease both; }
dialog.fiche.is-closing::backdrop { animation: fi-fade 0.22s ease reverse both; }
@keyframes fi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fi-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fi-out { to { opacity: 0; transform: translateY(16px) scale(0.99); } }
@media (max-width: 640px) {
  dialog.fiche[open] { align-items: flex-end; padding: max(24px, env(safe-area-inset-top, 0px)) 0 0; }
  .fi-sheet { width: 100%; max-height: 100%; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fi-sheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--color-border-strong); margin: 10px auto 0; }
  @keyframes fi-in { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes fi-out { to { transform: translateY(100%); } }
}
.fi-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-surface); box-shadow: 0 2px 10px rgba(10, 30, 45, 0.15); color: var(--color-primary-dark); display: grid; place-items: center; cursor: pointer; }
.fi-close svg { width: 22px; height: 22px; }
.fi-close:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.fi-top { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
@media (max-width: 760px) { .fi-top { grid-template-columns: 1fr; } }
.fi-portrait { background: var(--color-tint); display: grid; place-items: center; min-height: 260px; max-width: none; margin: 0; border-radius: 16px 0 0 0; }
.fi-portrait svg { width: 76%; max-width: 230px; }
@media (max-width: 760px) { .fi-portrait { min-height: 200px; border-radius: 0; } .fi-portrait svg { width: 52%; max-width: 180px; } }
.fi-id { padding: 1.75rem 1.9rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.fi-tag { margin: 0; font: 700 0.72rem/1.2 var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary); }
.fi-id h2 { margin: 0; font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.05; padding-right: 3rem; }
.fi-role { margin: 0; color: var(--color-text-muted); }
.fi-live { align-self: flex-start; margin: 0.2rem 0; display: inline-flex; align-items: center; gap: 0.6rem; font: 700 0.85rem/1.3 var(--font-heading); padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--color-surface-alt); color: var(--color-primary-dark); }
.fi-live:has(.fi-live-t:empty) { display: none; }
.fi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-muted); flex: none; }
.fi-live--walk { background: #D6ECEB; color: #1F5E5E; }
.fi-live--walk .fi-dot { background: var(--color-accent); animation: fi-pulse 1.8s infinite; }
.fi-live--rdv { background: #DDE6EE; }
.fi-live--rdv .fi-dot { background: #123A5A; }
html[data-theme="dark"] .fi-live--walk { background: #1D3F3F; color: #BFE6E3; }
html[data-theme="dark"] .fi-live--rdv { background: #1F3A48; color: #DCEBF2; }
html[data-theme="dark"] .fi-live--rdv .fi-dot { background: #8CCBE6; }
@keyframes fi-pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 140, 140, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(59, 140, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 140, 140, 0); } }
.fi-bio { margin: 0; max-width: 62ch; }
.fi-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fi-facts li { font: 600 0.8rem/1 var(--font-heading); color: var(--color-primary); background: var(--color-surface-alt); border-radius: 999px; padding: 0.45em 0.8em; }
.fi-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.fi-week { border-top: 1px solid var(--color-border); padding: 1.5rem 1.9rem 1.75rem; }
.fi-week__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.6rem 1.25rem; margin-bottom: 0.9rem; }
.fi-week__head h3 { margin: 0; font-size: 1.4rem; }
.fi-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font: 600 0.8rem/1.2 var(--font-heading); max-width: none; }
.fi-legend > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.fi-legend i { width: 22px; height: 10px; border-radius: 5px; display: block; }
.l-walk { background: var(--color-accent); } .l-rdv { background: #123A5A; } .l-pause { background: #DCE5EB; } .l-now { background: #C2410C; width: 3px !important; height: 14px !important; }
html[data-theme="dark"] .l-rdv { background: #4B86B0; } html[data-theme="dark"] .l-pause { background: #2A4250; }
.fi-grid { display: grid; grid-template-columns: 6rem minmax(0, 1fr); row-gap: 0.6rem; column-gap: 0.9rem; align-items: center; }
.fi-scale { grid-column: 2; position: relative; height: 16px; font: 600 0.72rem/1 var(--font-heading); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.fi-scale span { position: absolute; transform: translateX(-50%); }
.fi-scale span:first-child { transform: none; } .fi-scale span:last-child { transform: translateX(-100%); }
.fi-day { font: 700 0.9rem/1.2 var(--font-heading); color: var(--color-primary-dark); display: flex; flex-direction: column; }
.fi-day small { font: 700 0.62rem/1.3 var(--font-heading); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.fi-track { position: relative; height: 34px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 9 - 1px), var(--color-border) calc(100% / 9 - 1px), var(--color-border) calc(100% / 9)), var(--color-surface-alt); overflow: hidden; }
.fi-track.is-today { box-shadow: inset 0 0 0 2px var(--color-accent); }
.fi-seg { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 700 0.72rem/1 var(--font-heading); color: #fff; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; transform-origin: left center; }
.fi-seg--walk { background: var(--color-accent); } .fi-seg--rdv { background: #123A5A; } .fi-seg--pause { background: #DCE5EB; color: #506775; }
html[data-theme="dark"] .fi-seg--walk { background: #2E7A78; } html[data-theme="dark"] .fi-seg--rdv { background: #4B86B0; } html[data-theme="dark"] .fi-seg--pause { background: #2A4250; color: #A6BAC5; }
.fi-none { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 0.75rem; font: 600 0.8rem/1 var(--font-heading); color: var(--color-text-muted); }
.fi-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #C2410C; }
.fi-now::before { content: ""; position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #C2410C; }
@media (prefers-reduced-motion: no-preference) {
  .fiche .fi-seg { transform: scaleX(0); }
  .fiche .fi-seg span { opacity: 0; transition: opacity 0.3s ease; }
  .fiche.is-play .fi-seg { animation: fi-grow 0.7s var(--ease) forwards; animation-delay: calc(var(--d) + 0.25s); }
  .fiche.is-play .fi-seg span { opacity: 1; transition-delay: calc(var(--d) + 0.7s); }
  .fiche .fi-now { opacity: 0; transition: opacity 0.4s ease; }
  .fiche.is-play .fi-now { opacity: 1; transition-delay: 1.5s; }
}
@keyframes fi-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { dialog.fiche .fi-sheet, dialog.fiche::backdrop { animation: none !important; } .fi-live--walk .fi-dot { animation: none; } }
.fi-hours-text { margin: 0.9rem 0 0; padding-left: 1.1em; font-size: 0.92rem; }
.js .fi-hours-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fi-note { margin: 0.9rem 0 0; color: var(--color-text-muted); font-size: 0.9rem; max-width: none; }
@media (max-width: 560px) {
  .fi-id, .fi-week { padding-left: 1.1rem; padding-right: 1.1rem; }
  .fi-grid { grid-template-columns: 4.3rem minmax(0, 1fr); column-gap: 0.6rem; }
  .fi-day small { font-size: 0.55rem; letter-spacing: 0; }
  .fi-seg { font-size: 0.62rem; }
  .fi-seg.is-short:not(.fi-seg--pause) span { display: none; }
}
.fi-legend b { font-weight: inherit; }
.tm-pillar { --art-line: var(--color-primary); --art-alt: var(--color-surface-alt); --art-acc: var(--color-accent); }
.fi-langs-l { margin: 0.2rem 0 -0.3rem; font: 700 0.72rem/1.2 var(--font-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.fi-about { border-top: 1px solid var(--color-border); padding: 1.5rem 1.9rem 0.5rem; columns: 2 22rem; column-gap: 2.5rem; }
.fi-about > * { break-inside: avoid; }
.fi-about p { margin: 0 0 1rem; max-width: none; }
.fi-about h4 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--color-primary-dark); break-after: avoid; }
.fi-about ul { margin: 0 0 1.1rem; padding-left: 1.15em; }
.fi-about li { margin-bottom: 0.3em; }
.fi-about li::marker { color: var(--color-accent); }
@media (max-width: 560px) { .fi-about { padding-left: 1.1rem; padding-right: 1.1rem; } }
.fiche:not([data-horaires]) .fi-live { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fiche.is-play .fi-about > * { animation: fi-up 0.5s var(--ease) both; }
  .fiche.is-play .fi-about > :nth-child(2) { animation-delay: 0.06s; } .fiche.is-play .fi-about > :nth-child(3) { animation-delay: 0.12s; }
  .fiche.is-play .fi-about > :nth-child(4) { animation-delay: 0.18s; } .fiche.is-play .fi-about > :nth-child(5) { animation-delay: 0.24s; }
}
@keyframes fi-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================
   AUJOURD'HUI AU CENTRE + BANDEAU DE FERMETURE (3 novembre 2026)
   ========================================================= */
.nb-wrap { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.now-board { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.25rem 1.5rem 1.1rem; box-shadow: 0 14px 34px rgba(18, 58, 90, 0.08); animation: nb-in 0.5s var(--ease) both; }
.now-board.is-open { border-color: var(--color-accent); }
@keyframes nb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nb-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.25rem; margin-bottom: 0.8rem; }
.nb-title { margin: 0; font-size: 1.25rem; display: inline-flex; align-items: center; gap: 0.6rem; }
.nb-pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--color-text-muted); flex: none; }
.now-board.is-open .nb-pulse { background: var(--color-accent); animation: fi-pulse 1.8s infinite; }
.nb-head { margin: 0; color: var(--color-text-muted); font-weight: 600; max-width: none; }
.now-board.is-open .nb-head { color: var(--color-primary-dark); }
.nb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 860px) { .nb-list { grid-template-columns: 1fr; } }
.nb-row { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; row-gap: 0.15rem; align-items: center; background: var(--color-surface-alt); border-radius: 10px; padding: 0.7rem 0.9rem; min-width: 0; }
.nb-row a { font: 700 0.98rem/1.2 var(--font-heading); color: var(--color-primary-dark); text-decoration: none; }
.nb-row a:hover { text-decoration: underline; }
.nb-st { grid-column: 2; font-size: 0.9rem; color: var(--color-text-muted); }
.nb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.nb-row--walk { background: #E3F2F1; } .nb-row--walk .nb-dot { background: var(--color-accent); animation: fi-pulse 1.8s infinite; } .nb-row--walk .nb-st { color: #1F5E5E; font-weight: 600; }
.nb-row--rdv .nb-dot { background: #123A5A; } .nb-row--rdv .nb-st { color: var(--color-primary-dark); font-weight: 600; }
html[data-theme="dark"] .nb-row--walk { background: #1D3F3F; } html[data-theme="dark"] .nb-row--walk .nb-st { color: #BFE6E3; }
html[data-theme="dark"] .nb-row--rdv .nb-dot { background: #8CCBE6; }
.nb-foot { margin: 0.85rem 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; font-size: 0.88rem; color: var(--color-text-muted); max-width: none; }
.closure { background: #FFF4D6; color: #4A3500; border-bottom: 1px solid #F0D89A; }
.closure__in { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.7rem; }
.closure svg { width: 22px; height: 22px; flex: none; color: #8A6200; }
.closure p { margin: 0; max-width: none; }
.closure a { color: inherit; font-weight: 700; }
html[data-theme="dark"] .closure { background: #3A2F12; color: #F5E2B0; border-bottom-color: #5C4A1C; }
html[data-theme="dark"] .closure svg { color: #F2C45B; }
@media (prefers-reduced-motion: reduce) { .now-board, .nb-row--walk .nb-dot, .now-board.is-open .nb-pulse { animation: none; } }
.faq-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.5rem; }
.faq-toc a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 0.95rem; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-primary-dark); font: 600 0.88rem/1 var(--font-heading); text-decoration: none; }
.faq-toc a:hover { border-color: var(--color-accent); }
.faq-theme { font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 2.2rem 0 0.6rem; scroll-margin-top: 120px; }
.faq-theme:first-of-type { margin-top: 0.5rem; }
/* Horaires habituels sans rendez-vous (remplace l'encadré en direct) */
.nb-hours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.nb-hours li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.3rem 1rem; align-items: baseline; background: var(--color-surface-alt); border-radius: 10px; padding: 0.7rem 1rem; }
.nb-hours a { font: 700 0.98rem/1.2 var(--font-heading); color: var(--color-primary-dark); text-decoration: none; }
.nb-hours a:hover { text-decoration: underline; }
.nb-hours span { color: var(--color-text); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .nb-hours li { grid-template-columns: 1fr; } }
.nb-warn { margin: 0.9rem 0 0; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: #4A3500; background: #FFF4D6; border-radius: 8px; padding: 0.65rem 0.9rem; max-width: none; }
.nb-warn svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #8A6200; }
html[data-theme="dark"] .nb-warn { background: #3A2F12; color: #F5E2B0; } html[data-theme="dark"] .nb-warn svg { color: #F2C45B; }
.nb-foot { margin: 0.9rem 0 0; }
.absence-note { margin: 0 0 0.8rem; background: #FDE8E1; color: #6B2412; border-radius: 8px; padding: 0.6rem 0.9rem; font-weight: 600; }
.absence-note ul { margin: 0; padding: 0; list-style: none; }
html[data-theme="dark"] .absence-note { background: #4A2318; color: #F7D3C6; }
.fi-id .absence-note { margin: 0.2rem 0; }
/* Semaine des médecins sur l'accueil et la page Rendez-vous */
.week-board .nb-top { justify-content: space-between; align-items: center; }
.wb-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 1rem; }
.wb-tabs button { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-primary-dark); font: 600 0.92rem/1 var(--font-heading); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.wb-tabs button:hover { border-color: var(--color-accent); }
.wb-tabs button[aria-selected="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-surface); }
.wb-tabs button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.wb-note { margin: 0 0 0.5rem; padding: 0.9rem 1rem; background: var(--color-surface-alt); border-radius: 10px; font-weight: 600; color: var(--color-primary-dark); max-width: none; }
.js .week-board .nb-hours { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.week-board .nb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .week-board .fi-seg { transform: scaleX(0); }
  .week-board .fi-seg span { opacity: 0; transition: opacity 0.3s ease; }
  .week-board.is-play .fi-seg { animation: fi-grow 0.7s var(--ease) forwards; animation-delay: var(--d); }
  .week-board.is-play .fi-seg span { opacity: 1; transition-delay: calc(var(--d) + 0.45s); }
}
@media (max-width: 560px) { .fi-seg.is-short span { display: none !important; } .wb-tabs button { flex: 1 1 auto; } }
/* Contrastes des jauges (texte blanc lisible) */
.fi-seg--walk, .l-walk { background: #2B7472 !important; }
.fi-day small { color: var(--color-accent-dark); }
html[data-theme="dark"] .fi-seg--walk, html[data-theme="dark"] .l-walk { background: #2B7472 !important; }
html[data-theme="dark"] .fi-seg--rdv, html[data-theme="dark"] .l-rdv { background: #2C628A !important; }
html[data-theme="dark"] .fi-day small { color: #8FD1CC; }
.js .week-board .nb-hours { display: none; }
/* « Qui consulte quel jour ? » */
.db-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 2px 2px 0.8rem; scrollbar-width: none; }
.db-tabs::-webkit-scrollbar { display: none; }
.db-tab { flex: 1 0 auto; min-width: 6rem; min-height: 58px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-primary-dark); font: 700 0.92rem/1.2 var(--font-heading); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.db-tab small { font: 600 0.72rem/1.2 var(--font-heading); color: var(--color-text-muted); }
.db-tab:hover { border-color: var(--color-accent); }
.db-tab[aria-selected="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-surface); }
.db-tab[aria-selected="true"] small { color: inherit; opacity: 0.85; }
.db-tab:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.db-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 760px) { .db-card { grid-template-columns: 1fr; } }
.db-doc { border: 1px solid var(--color-border); border-radius: 12px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; animation: fi-up 0.4s var(--ease) both; animation-delay: var(--d, 0s); }
.db-doc h3 { margin: 0; font-size: 1rem; }
.db-doc h3 a { color: var(--color-primary-dark); text-decoration: none; }
.db-doc h3 a:hover { text-decoration: underline; }
.db-chip { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; border-radius: 9px; padding: 0.6rem 0.8rem; font-variant-numeric: tabular-nums; }
.db-chip b { font: 700 0.98rem/1.2 var(--font-heading); }
.db-chip span { font: 700 0.68rem/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: 0.05em; text-align: right; }
.db-chip--walk { background: #DDEFEE; color: #1E5654; }
.db-chip--rdv { background: #DCE6EF; color: #123A5A; }
html[data-theme="dark"] .db-chip--walk { background: #1D3F3F; color: #BFE6E3; }
html[data-theme="dark"] .db-chip--rdv { background: #1F3A48; color: #DCEBF2; }
.db-none { margin: 0; color: var(--color-text-muted); }
.db-abs { color: #8A2E17; font-weight: 600; }
html[data-theme="dark"] .db-abs { color: #F7B9A6; }
.db-closed { grid-column: 1 / -1; background: #FFF4D6; color: #4A3500; border-radius: 10px; padding: 1rem 1.1rem; font-weight: 600; }
.db-closed a { color: inherit; }
html[data-theme="dark"] .db-closed { background: #3A2F12; color: #F5E2B0; }
.js .day-board .nb-hours { display: none; }
.day-board .nb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.5rem; }
@media (prefers-reduced-motion: reduce) { .db-doc { animation: none; } }

/* ===== Encadré « Prendre rendez-vous » centré (page Centre) ===== */
.ce-cta--sym { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-3, 1rem);
  max-width: 760px; margin-inline: auto; }
.ce-cta--sym .ce-art { order: -1; max-width: 7.5rem; margin: 0 auto; }
.ce-cta--sym .ce-cta__text p { max-width: 34rem; margin-inline: auto; }
.ce-cta--sym .ce-cta__actions { justify-content: center; }
@media (max-width: 900px) { .ce-cta--sym .ce-art { max-width: 6.5rem; margin-inline: auto; } }

/* ===== Photos du centre, discrètes, en bas de la page Centre ===== */
.ce-block--before-ph { padding-bottom: clamp(2rem, 4vw, 3rem); }
.ph-strip { padding-bottom: clamp(3rem, 7vw, 6rem); }
.ph-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 4.5rem); row-gap: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 760px; margin-inline: auto;
  border-top: 1px solid var(--color-border); padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.ph-item { margin: 0; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--color-surface-alt);
  box-shadow: 0 18px 40px -28px rgba(18, 58, 90, .45); }
.ph-item:nth-child(even) { margin-top: clamp(3rem, 9vw, 6.5rem); margin-bottom: calc(-1 * clamp(3rem, 9vw, 6.5rem)); }
.ph-item:nth-child(odd) { width: 92%; justify-self: end; }
.ph-item img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.55) brightness(1.04); opacity: .85; transform: scale(1.08);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1), filter .6s ease, opacity .6s ease; }
.ph-item.is-visible img { transform: scale(1); }
.ph-item:hover img { filter: none; opacity: 1; }
.js .ph-item.reveal { transition-duration: 1s; }
.ph-strip .ph-row { padding-bottom: clamp(3rem, 9vw, 6.5rem); }
@media (max-width: 759px) {
  .ph-row { grid-template-columns: 1fr; row-gap: 1.75rem; padding-bottom: 0 !important; }
  .ph-item, .ph-item:nth-child(odd), .ph-item:nth-child(even) { width: 82%; margin: 0; }
  .ph-item:nth-child(odd) { justify-self: start; }
  .ph-item:nth-child(even) { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .ph-item img { transform: none; transition: none; } }

/* ===== Accueil : bouton « sans rendez-vous » sous les boutons principaux ===== */
.hero-walkin { margin: var(--space-3) 0 0; }
#sans-rendez-vous { scroll-margin-top: calc(var(--header-h, 80px) + 1rem); }
@media (max-width: 560px) { .ho-hero .hero-actions .btn, .hero-walkin .btn { width: 100%; justify-content: center; text-align: center; } }

/* =====================================================================
   Page Rendez-vous (refonte) : en-tête + panneau secrétariat, cartes
   professionnels, étapes « sans rendez-vous », préparation, urgences
   ===================================================================== */
.rv-hero { padding: var(--space-4) 0 var(--space-6); }
.rv-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.rv-hero h1 { margin: 0 0 var(--space-3); }
.rv-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-muted); max-width: 40ch; margin: 0 0 var(--space-4); }
.rv-toc { display: flex; flex-wrap: wrap; gap: .5rem; }
.rv-toc a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface); color: var(--color-primary-dark); font: 600 var(--fs-sm)/1.2 var(--font-heading); text-decoration: none;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.rv-toc a svg { width: 1.05em; height: 1.05em; color: var(--color-secondary); }
.rv-toc a:hover { border-color: var(--color-secondary); background: var(--color-surface-alt); transform: translateY(-1px); }

.rv-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 24px 48px -32px rgba(18, 58, 90, .45); position: relative; overflow: hidden; }
.rv-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }
.rv-panel__eyebrow { margin: 0 0 .35rem; font: 700 var(--fs-xs)/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary); }
.rv-panel__tel { display: inline-flex; align-items: center; gap: .6rem; font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem)/1.1 var(--font-heading);
  color: var(--color-primary-dark); text-decoration: none; letter-spacing: -.01em; }
.rv-panel__tel svg { width: .8em; height: .8em; color: var(--color-accent-dark); }
.rv-panel__tel:hover { color: var(--color-primary); }
.rv-panel__hours { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }
.rv-panel__hours svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.rv-panel__actions { display: grid; gap: .6rem; }
.rv-panel__urgent { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--fs-sm); color: var(--color-text-muted); }
.rv-panel__urgent a { font-weight: 700; color: var(--color-danger); }

.rv-head { max-width: 62ch; margin-bottom: var(--space-5); }
.rv-head h2 { margin: 0 0 .6rem; }
.rv-head p:last-child { margin-bottom: 0; }
.rv-eyebrow { margin: 0 0 .5rem; font: 700 var(--fs-xs)/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary); }
.rv-group { display: flex; align-items: center; gap: 1rem; margin: var(--space-5) 0 var(--space-3); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); }
.rv-group::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.rv-head + .rv-group { margin-top: 0; }

.rv-pros { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rv-pros--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-pros--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-pro { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); scroll-margin-top: calc(var(--header-h, 80px) + 1rem); }
.rv-pro:hover { border-color: var(--color-secondary); box-shadow: 0 18px 36px -28px rgba(18, 58, 90, .5); transform: translateY(-2px); }
.rv-pro__head { display: flex; align-items: center; gap: .9rem; }
.rv-avatar { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(140deg, var(--color-tint), var(--color-surface-alt)); border: 1px solid var(--color-border);
  color: var(--color-primary-dark); font: 800 1.05rem/1 var(--font-heading); letter-spacing: .02em; }
.rv-pro__name { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.rv-pro__role { margin: .15rem 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.rv-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rv-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 999px; background: var(--color-surface-alt);
  color: var(--color-primary-dark); font-size: var(--fs-xs); font-weight: 600; }
.rv-tag svg { width: 1em; height: 1em; }
.rv-tag--walk { background: #E1F1EF; color: #1F5E5E; }
.rv-pro__actions { margin-top: auto; display: grid; gap: .6rem; }
.rv-pro__more { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); }
.rv-pro__more svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.rv-pro__more:hover svg { transform: translateX(3px); }
.rv-soon { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: 12px; color: var(--color-text-muted); }
.rv-soon p { margin: 0; }
.rv-org { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

.rv-walk { padding-bottom: 0; }
.rv-walk + .nb-wrap { background: var(--color-surface-alt); padding-top: var(--space-4); }
.rv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); counter-reset: none; }
.rv-steps li { display: flex; gap: 1rem; align-items: flex-start; padding: var(--space-4); background: var(--color-surface); border-radius: 14px; border: 1px solid var(--color-border); }
.rv-steps__n { flex-shrink: 0; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--color-primary); color: #fff; font: 800 1rem/1 var(--font-heading); }
.rv-steps h3 { margin: .15rem 0 .3rem; font-size: 1.05rem; }
.rv-steps p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

.rv-prep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.rv-prep__card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-secondary); box-shadow: 0 18px 40px -34px rgba(18, 58, 90, .5); }
.rv-prep__card h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--space-3); font-size: 1.15rem; }
.rv-prep__card h3 svg { width: 1.3em; height: 1.3em; color: var(--color-secondary); }
.rv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.rv-checks li { display: flex; gap: .65rem; align-items: flex-start; }
.rv-checks li svg { flex-shrink: 0; width: 1.15em; height: 1.15em; margin-top: .2em; color: var(--color-accent-dark); }

.rv-urgent { background: var(--color-danger-bg); border-top: 1px solid rgba(138, 58, 43, .18); }
.rv-urgent__inner { display: flex; gap: 1rem; align-items: flex-start; padding-block: var(--space-4); }
.rv-urgent__inner > svg { flex-shrink: 0; width: 1.6em; height: 1.6em; color: var(--color-danger); margin-top: .1em; }
.rv-urgent p { margin: 0; color: var(--color-text); }
.rv-urgent a { color: var(--color-danger); font-weight: 800; }

@media (max-width: 960px) {
  .rv-hero__grid { grid-template-columns: 1fr; }
  .rv-pros--3, .rv-pros--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rv-pros--3, .rv-pros--2, .rv-prep { grid-template-columns: 1fr; }
  .rv-toc a { flex: 1 1 auto; justify-content: center; }
}
html[data-theme="dark"] .rv-tag--walk { background: rgba(59, 140, 140, .22); color: var(--color-on-dark); }