/* ==========================================================================
   CHRACERH — feuille de style unique (mobile first)
   Identité du site d'origine (css/index.css, visit.css, soins.css… de 2016-2025)
   reprise et modernisée : bleu #428BCA en accent, bleu nuit #0C1C29, blanc,
   fonds gris très clairs, coins 5 px, lien « flèche », boutons pilule, menu
   en capitales souligné de bleu, menu plein écran bleu nuit, bande bleue
   numérotée, pied de page bleu nuit + sous-pied blanc.
   Corrections : contrastes AA, mobile, focus visible, aucun texte justifié.
   TOUTES les couleurs sont déclarées ici ; ailleurs, uniquement var().
   ========================================================================== */

/* Polices auto-hébergées (fichiers variables latins de Google Fonts, ≈ 20-50 Ko chacun) : une origine de moins à joindre */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/open-sans.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('../fonts/open-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat.woff2') format('woff2'); }

:root {
  /* Couleurs de l'ancien site */
  --blue: #428BCA;             /* accent (soulignements, puces, icônes, grands titres) : 3,6:1 sur blanc, jamais en texte fin */
  --blue-hover: #3071A9;       /* survol d'origine : boutons, liens texte (5,2:1) */
  --blue-dark: #2d6da6;        /* texte bleu courant (5,5:1) */
  --blue-deep: #245a8a;
  --blue-soft: #eaf2fa;
  --blue-line: #cfe0f0;
  --navy: #0C1C29;             /* pied de page, voiles, header au menu ouvert */
  --navy-2: #172A39;           /* menu plein écran */
  --navy-3: #0A1824;
  --green: #40694A;            /* vert du logo */
  --cm-green: #007A5E;         /* couleurs du drapeau camerounais : filet de transition, par touches */
  --cm-red: #CE1126;
  --cm-yellow: #FCD116;
  --sky: #9CC5E6;
  --red: #C62B39;              /* urgences uniquement (texte, petit badge) */
  --red-dark: #a82230;
  --red-soft: #fdecee;
  /* Neutres (l'ancien site utilisait #888 / #999 / #ccc en texte : contraste insuffisant) */
  --text: #1f262c;             /* texte et titres (plus soutenu que le #333 d'origine) */
  --text-2: #4b5157;
  --muted: #4b535a;            /* texte courant secondaire (8:1) */
  --pre: #5b636c;              /* légendes, sources (6:1) */
  --line: #dde3e9;
  --line-2: #c9d1d9;
  --bg-soft: #f1f4f7;          /* fond des sections alternées : nettement distinct du blanc */
  --bg-soft-2: #f1f4f6;
  --white: #fff;
  --error: #C62B39;
  --error-bg: #fff4f5;
  --warn-bg: #fff6e6;
  --warn-text: #6b4600;
  /* Triplets RVB pour les transparences */
  --navy-rgb: 12, 28, 41;
  --blue-rgb: 66, 139, 202;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  /* Formes, typographie, mouvement (courbe signature de l'ancien site) */
  --radius: 3px;               /* angles discrets : pas de formes « pilule » */
  --radius-lg: 8px;
  --shadow-btn: 0 1px 2px rgba(var(--black-rgb), .27);
  --shadow: 0 10px 20px rgba(var(--black-rgb), .1);
  --shadow-lg: 0 10px 20px rgba(var(--black-rgb), .27);
  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-title: 'Montserrat', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(.645, .045, .355, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --header-h: 70px;
  --header-h-scrolled: 70px;   /* header compacté (body.is-scrolled), lu par le JS pour caler les ancres */
  --wrap: 1280px;
}
/* Menu PC à partir de 1060 px (même valeur que NAV_BREAKPOINT dans js/app.js) */
@media (min-width: 1060px) {
  :root { --header-h: 90px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-scrolled) + 13px); }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--text);
  background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.nav-open, body.rdv-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
source { display: none; }  /* sinon <source> devient un élément de grille à côté de son <img> */
a { color: var(--blue-hover); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--blue-deep); }
.page p:not(.band-item-title) a:not(.pill):not(.arrowed):not(.ulink), .page .dot-list a, .page .check-list a, .page .source a, .acc-body-inner a, .legal a, .consent a, .modal-urgent a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-family: var(--font-title); font-weight: 600; color: var(--text); }
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
h1, h2, h3, .caption-title, .section-lead { text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 22px; }
strong, b { font-weight: 600; }
em { font-style: italic; }
abbr[title] { text-decoration: none; color: var(--red-dark); }
.site-footer abbr[title] { color: #ff9aa4; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 3px solid var(--blue-hover); outline-offset: 3px; border-radius: 4px; }
.site-footer :focus-visible, .hero :focus-visible, .hero-page :focus-visible, .hero-light :focus-visible, .band-blue :focus-visible, .offcanvas :focus-visible, .topbar :focus-visible, .don-band :focus-visible { outline-color: var(--white); }
.ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.small { font-size: 14px; color: var(--muted); }
.lead { font-size: 17px; line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 24px !important; }
.source { display: block; font-size: 12.5px; line-height: 1.5; color: var(--pre); margin-top: 6px; }
.source-inline { display: inline; margin: 0; }
.c-red { color: var(--red-dark) !important; }
@media (min-width: 900px) {
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 21px; }
  .lead { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   Mise en page (gouttière de 5 % comme l'ancien site, 16 px sur mobile)
   -------------------------------------------------------------------------- */
.wrap, .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.container-narrow { max-width: 860px; }
.section { padding: 26px 0; }
.section-soft { background: var(--bg-soft); }
.section-sm { padding: 20px 0; }
.section-last { padding-bottom: 56px; }
.section-head { margin-bottom: 24px; }
.section-title { margin: 0 0 12px; }
.section-lead { color: var(--muted); max-width: 760px; margin: 0 0 22px; font-size: 16px; }
/* Pré-titre discret de l'ancien site (petit texte gris au-dessus des titres) */
.pre-title { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-dark); margin: 0 0 10px; }
/* Grand titre fantôme derrière un titre (page Présentation d'origine : 142 px à 5 % de noir) */
.wm { position: relative; }
.wm::before {
  content: attr(data-wm); position: absolute; left: 0; right: 0; top: -.3em; z-index: 0; pointer-events: none; text-align: left;
  font-family: var(--font-title); font-weight: 600; font-size: min(64px, 12.5vw); line-height: 1; letter-spacing: .02em; white-space: nowrap; overflow: hidden;  /* 12,5 vw sous 512 px : « Présentation » tient dans la largeur du mobile */
  color: rgba(var(--black-rgb), .05);
}
.wm.left::before { text-align: left; }
.wm > * { position: relative; z-index: 1; }
@media (max-width: 1059px) { .group.wm::before { display: none; } }  /* photo empilée au-dessus du texte : le mot fantôme serait coupé et masqué */
.grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.actions.center { justify-content: center; }
@media (min-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .wrap, .container { padding: 0 5%; }
  .container-narrow { padding: 0 20px; }
  .section { padding: 32px 0; }
  .section-sm { padding: 30px 0; }
  .section-last { padding-bottom: 100px; }
  .section-head { margin-bottom: 24px; }
  .section-lead { font-size: 17px; margin-bottom: 0; }
  .pre-title { font-size: 13px; margin-bottom: 12px; }
  .grid-2, .grid-3, .grid-4 { gap: 30px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: auto; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .wm::before { font-size: 110px; top: -.4em; }
}
@media (min-width: 1440px) { .wrap, .container { padding: 0 20px; } .caption { padding: 0 20px; } }

/* --------------------------------------------------------------------------
   Lien d'évitement, barre de chargement
   -------------------------------------------------------------------------- */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--blue-hover); color: var(--white); border-radius: var(--radius); transition: top .2s; }
.skip-link:focus { top: 12px; color: var(--white); }
.page-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 150; pointer-events: none; background: var(--blue); opacity: 0; transition: opacity .3s, width .5s; }
body.is-loading .page-loader { opacity: 1; width: 80%; }

/* --------------------------------------------------------------------------
   Boutons pilule (rayon 50 px, capitales) et lien « flèche » (.arrowed_a d'origine)
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 24px; border-radius: var(--radius); border: 2px solid transparent;
  font-family: var(--font); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  color: var(--white); background: var(--blue-hover); box-shadow: var(--shadow-btn); cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.pill:hover { background: var(--blue-deep); color: var(--white); transform: translateY(-1px); }
.pill .ico { width: 17px; height: 17px; }
.pill-outline { background: transparent; box-shadow: none; border-color: var(--blue-hover); color: var(--blue-hover); }
.pill-outline:hover { background: var(--blue-hover); color: var(--white); }
.pill-white { background: var(--white); color: var(--blue-hover); }
.pill-white:hover { background: var(--white); color: var(--blue-deep); }
.pill-ghost { background: rgba(var(--white-rgb), .12); box-shadow: none; border-color: rgba(var(--white-rgb), .8); color: var(--white); }
.pill-ghost:hover { background: rgba(var(--white-rgb), .24); color: var(--white); }
.pill-sm { height: 40px; padding: 0 18px; font-size: 13px; }
.pill-header { height: 38px; padding: 0 18px; font-size: 13px; text-transform: none; letter-spacing: 0; background: var(--blue-hover); box-shadow: none; }
.pill-header:hover { background: var(--blue-deep); transform: none; }
/* Lien « flèche » : pastille ronde bordée, chevron bleu, remplie de bleu au survol */
.arrowed { position: relative; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.3; min-height: 32px; }  /* 1.3 : un libellé sur 2 lignes reste serré */
.arrowed::before {
  content: ''; width: 32px; height: 32px; flex: none; border-radius: var(--radius); border: 2px solid rgba(var(--black-rgb), .16);
  background-color: var(--white); transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.arrowed::after {
  content: ''; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid var(--blue); border-top: 2px solid var(--blue); transform: rotate(45deg); transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.arrowed:hover { color: var(--blue-hover); }
.arrowed:hover::before { background-color: var(--blue); border-color: var(--blue); }
.arrowed:hover::after { border-color: var(--white); transform: translateX(2px) rotate(45deg); }
.arrowed-upper { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.arrowed-light { color: var(--white); }
.arrowed-light::before { background-color: var(--white); border-color: var(--white); }
.arrowed-light:hover { color: var(--white); }
.arrowed-light:hover::before { background-color: var(--blue); border-color: var(--blue); }
.arrowed-fill::before { background-color: var(--blue); border-color: var(--blue); }
.arrowed-fill::after { border-color: var(--white); }
.arrowed-fill:hover::before { background-color: var(--blue-hover); border-color: var(--blue-hover); }
/* Lien souligné animé (bande bleue et tuiles contact d'origine) */
.ulink { position: relative; display: inline-block; padding-bottom: 12px; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-hover); }
.ulink::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(var(--black-rgb), .1); }
.ulink::before { content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: 0; height: 3px; background: var(--blue); transition: width .3s var(--ease); }
.ulink:hover::before { width: 100%; }
.ulink-light { color: var(--white); }
.ulink-light::after { background: rgba(var(--white-rgb), .15); }
.ulink-light::before { background: var(--white); }
.ulink-light:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Barre du haut bleu nuit (urgences, téléphone, e-mail) : défile avec la page
   -------------------------------------------------------------------------- */
.topbar { background: var(--navy); color: rgba(var(--white-rgb), .8); font-size: 13px; }
body.nav-open .topbar { position: relative; z-index: 95; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.topbar p { margin: 0; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.topbar a { color: rgba(var(--white-rgb), .85); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--white); }
.topbar .ico { width: 14px; height: 14px; color: var(--sky); }
.topbar-urgences { font-weight: 600; color: var(--white); }
.topbar-urgences::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.tb-long { display: none; }
.topbar .topbar-mail { display: none; }
.topbar-social .ico { width: 15px; height: 15px; color: rgba(var(--white-rgb), .8); }
@media (min-width: 640px) { .tb-long { display: inline; } .tb-short { display: none; } }
@media (min-width: 900px) { .topbar .topbar-mail { display: inline-flex; } }

/* --------------------------------------------------------------------------
   Header blanc collant (100 px d'origine → 90 px, 70 px compacté), logo à gauche,
   menu en capitales souligné de bleu, pilule et burger à droite
   -------------------------------------------------------------------------- */
.site-header {
  /* Pas de backdrop-filter : il ferait du header le bloc conteneur des enfants fixes (menu coupé). */
  position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid rgba(var(--black-rgb), .075);
  transition: background .55s var(--ease), box-shadow .3s;
}
body.is-scrolled .site-header { box-shadow: 0 4px 14px rgba(var(--navy-rgb), .08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--header-h); transition: height .55s var(--ease); }
.brand { display: inline-flex; align-items: center; height: 100%; flex: none; }
.brand-img { height: 44px; width: auto; transition: height .55s var(--ease); }
.brand-img-white { display: none; }
.header-right { display: flex; align-items: center; gap: 8px; }
.nav-toggle {
  position: relative; width: 50px; height: 50px; border: 0; background: transparent; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle .bar { display: block; width: 22px; height: 2px; background: var(--muted); border-radius: 2px; transition: transform .55s var(--ease), opacity .25s, background .25s; }
.nav-toggle:hover .bar { background: var(--blue); }
/* Barres recalées sur les pixels physiques par le JS (écrans à zoom non entier) */
.nav-toggle.is-snapped .bar { position: absolute; left: 14px; margin: 0; }
body.nav-open .nav-toggle .bar { background: var(--white); }
body.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(var(--bar-shift, 7px)) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(calc(var(--bar-shift, 7px) * -1)) rotate(-45deg); }
/* Menu principal : masqué sous 1060 px (le menu plein écran prend le relais) */
.main-nav { display: none; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu > li > a {
  position: relative; display: block; padding: 0 14px; line-height: var(--header-h); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  transition: color .35s var(--ease), line-height .55s var(--ease);
}
.menu > li > a::after { content: ''; position: absolute; left: 14px; bottom: 0; width: 0; height: 3px; background: var(--blue); transition: width .2s cubic-bezier(.42, 0, .22, 1); }
.menu > li > a:hover, .menu > li > a.is-active, .menu > li.is-open > a { color: var(--blue-hover); }
.menu > li > a:hover::after, .menu > li > a.is-active::after, .menu > li.is-open > a::after { width: calc(100% - 28px); }
.mega-btn { width: 22px; height: 22px; margin-left: -10px; border: 0; background: transparent; padding: 0; position: relative; border-radius: 50%; }
.mega-btn span { position: absolute; left: 7px; top: 5px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s var(--ease); }
.has-mega.is-open .mega-btn span, .has-mega:hover .mega-btn span { border-color: var(--blue-hover); }
/* Méga-menu « Soins » : panneau bleu de l'ancien site (deux colonnes), au survol, au focus ou au clic */
.mega {
  position: absolute; left: 0; top: 100%; z-index: 5; width: 560px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 0;
  background: var(--blue-hover); color: var(--white); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg);
  visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega { visibility: visible; opacity: 1; transform: none; }
.has-mega.is-dismissed .mega { visibility: hidden; opacity: 0; }
.mega-col { padding: 18px 0 16px; }
.mega-col + .mega-col { border-left: 1px solid rgba(var(--white-rgb), .15); }
.mega-title { margin: 0 20px 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--white-rgb), .7); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: block; padding: 0 20px; line-height: 40px; font-size: 13px; color: var(--white); white-space: nowrap; }
.mega li a:hover { background: rgba(var(--white-rgb), .08); }
@media (max-height: 700px) { .mega li a { line-height: 31px; } .mega-col { padding: 12px 0 10px; } }
body.is-scrolled .header-inner { height: var(--header-h-scrolled); }
body.is-scrolled .brand-img { height: 40px; }
body.is-scrolled .menu > li > a { line-height: 70px; }
/* Menu plein écran ouvert : header bleu nuit, logo blanc (classe .NB d'origine) */
body.nav-open .site-header { background: var(--navy); border-bottom-color: rgba(var(--white-rgb), .1); }
body.nav-open .brand-img { display: none; }
body.nav-open .brand-img-white { display: block; }
body.nav-open .pill-header { background: rgba(var(--blue-rgb), .25); }
body.nav-open .main-nav { visibility: hidden; }
@media (max-width: 1059px) {
  .pill-header span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pill-header { width: 40px; height: 40px; padding: 0; border-radius: var(--radius); }
  .pill-header .ico { width: 19px; height: 19px; }
}
@media (min-width: 1060px) {
  .brand-img { height: 52px; }
  .main-nav { display: block; flex: 1; }
  .menu { justify-content: center; }
  .header-right { gap: 12px; }
}
@media (min-width: 1060px) and (max-width: 1239px) {
  .menu > li > a { padding: 0 9px; font-size: 12px; letter-spacing: .02em; }
  .menu > li > a::after { left: 9px; }
  .menu > li > a:hover::after, .menu > li > a.is-active::after, .menu > li.is-open > a::after { width: calc(100% - 18px); }
  .brand-img { height: 46px; }
}

/* --------------------------------------------------------------------------
   Menu plein écran bleu nuit (off-canvas d'origine) : trois colonnes, filigrane « Menu »
   -------------------------------------------------------------------------- */
.offcanvas {
  position: fixed; inset: 0; z-index: 90; padding-top: var(--nav-top, var(--header-h));  /* --nav-top = bas réel du header, posé par le JS à l'ouverture */ background: var(--navy-2); color: var(--white); overflow-y: auto;
  visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease), visibility .45s;
}
.offcanvas::before {
  content: attr(data-text); position: fixed; left: 5%; top: 50%; z-index: 0; pointer-events: none; font-family: var(--font-title); font-weight: 600;
  font-size: min(22em, 27vw); line-height: 1; color: rgba(var(--white-rgb), .025); transform: translateY(-40%); transition: transform .55s var(--ease);
}
body.nav-open .offcanvas { visibility: visible; opacity: 1; pointer-events: auto; }
body.nav-open .offcanvas::before { transform: translateY(-50%); }
.offcanvas-inner { position: relative; z-index: 1; padding-top: 20px; padding-bottom: 28px; }
.menu-cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
.menu-cols .col { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
body.nav-open .menu-cols .col { opacity: 1; transform: none; }
body.nav-open .menu-cols .col-1 { transition-delay: .2s; }
body.nav-open .menu-cols .col-2 { transition-delay: .3s; }
body.nav-open .menu-cols .col-3 { transition-delay: .4s; }
.col-title { margin: 0 0 4px; font-family: var(--font-title); font-size: 19px; font-weight: 600; }
.col-title a { color: var(--white); }
.menu-cols ul { list-style: none; margin: 0; padding: 0; }
.menu-cols li a { display: block; line-height: 34px; font-size: 15px; color: rgba(var(--white-rgb), .7); transition: color .2s; }
.menu-cols li a:hover, .menu-cols li a.is-active { color: var(--white); }
.offcanvas-contact { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--white-rgb), .12); font-size: 14px; color: rgba(var(--white-rgb), .8); }
.offcanvas-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 600; }
.offcanvas-contact .ico { width: 16px; height: 16px; color: var(--sky); }
@media (min-width: 760px) {
  .menu-cols { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .offcanvas-inner { padding-top: 30px; }
  .col-title { font-size: 21px; margin-bottom: 6px; }
  .menu-cols li a { line-height: 34px; }
}

/* --------------------------------------------------------------------------
   Fil d'Ariane (discret, sous le header)
   -------------------------------------------------------------------------- */
.crumbs { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; padding: 8px 0; }
.crumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before { content: '›'; color: var(--blue); font-size: 16px; line-height: 1; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue-hover); }
.crumbs [aria-current] span { color: var(--text); font-weight: 600; display: block; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 639px) { .crumbs-article li[aria-current] { display: none; } }

/* --------------------------------------------------------------------------
   Diaporama de l'accueil (slider d'origine : fondu, légende centrée avec date,
   titre, sous-titre et lien flèche ; onglets blancs précédent / suivant)
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; height: 58vh; min-height: 360px; max-height: 520px; background: var(--navy); color: var(--white); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.slide-bg, .slide-bg img, .slide-bg video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.slide-bg img, .slide-bg video { max-width: none; object-fit: cover; object-position: 50% 45%; }
.slide-bg video { opacity: 0; transition: opacity 1s; }
.slide-bg.is-playing video, .slide-bg.is-paused video { opacity: 1; }
.slide-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(var(--navy-rgb), .86) 0%, rgba(var(--navy-rgb), .62) 45%, rgba(var(--navy-rgb), .15) 85%); }
.caption { position: absolute; left: 0; right: 0; top: 50%; z-index: 2; transform: translateY(-50%); width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 56px; text-align: left; text-shadow: 0 1px 2px rgba(var(--black-rgb), .3); }
.caption > * { max-width: 620px; }
.caption-date { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; transition: transform .5s var(--ease), opacity .5s var(--ease); opacity: 0; transform: translateY(10px); }
.caption-title { font-family: var(--font-title); font-weight: 600; font-size: 27px; line-height: 1.18; color: var(--white); margin: 0 0 10px; overflow: hidden; }
.caption-title > span { display: block; transform: translateY(100%); transition: transform .5s var(--ease); }
.caption-sub { font-size: 16px; line-height: 1.5; color: var(--white); margin: 0 0 18px; overflow: hidden; }
.caption-sub > span { display: block; transform: translateY(100%); transition: transform .5s var(--ease) .05s; }
.slide.is-active .caption-date { opacity: 1; transform: none; }
.slide.is-active .caption-title > span, .slide.is-active .caption-sub > span { transform: none; }
.caption .arrowed { justify-content: flex-start; }
.slider-nav .go-prev, .slider-nav .go-next {
  position: absolute; top: 50%; z-index: 3; width: 36px; height: 66px; margin-top: -33px; border: 0; padding: 0; background: var(--white); color: var(--blue);
  display: flex; align-items: center; justify-content: center; transition: background .25s, color .25s;
}
.slider-nav .go-prev { left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.slider-nav .go-next { right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.slider-nav button::before { content: ''; width: 11px; height: 11px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; }
.slider-nav .go-prev::before { transform: rotate(-135deg); margin-left: 5px; }
.slider-nav .go-next::before { transform: rotate(45deg); margin-right: 5px; }
.slider-nav button:hover { background: var(--blue); color: var(--white); }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 4px; }
.slider-dot { width: 26px; height: 26px; border: 0; padding: 0; background: transparent; position: relative; }
.slider-dot::before { content: ''; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(var(--white-rgb), .85); background: transparent; transition: background .2s; }
.slider-dot.is-active::before, .slider-dot:hover::before { background: var(--white); }
.hero-video-toggle {
  position: absolute; right: 14px; bottom: 44px; z-index: 3; width: 38px; height: 38px; border-radius: var(--radius); padding: 0;
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--white-rgb), .5); background: rgba(var(--navy-rgb), .45); color: var(--white);
}
.hero-video-toggle:hover { background: rgba(var(--navy-rgb), .8); }
.hero-video-toggle .ico { width: 16px; height: 16px; }
.hero:not(.is-video-slide) .hero-video-toggle { display: none; }
.hero-video-toggle .ico-play, .hero-video-toggle.is-paused .ico-pause { display: none; }
.hero-video-toggle.is-paused .ico-play { display: block; }
@media (max-width: 639px) { .slider-nav { display: none; } .caption { padding: 0 20px; } }
@media (max-width: 899px) { .slide-veil { background: linear-gradient(90deg, rgba(var(--navy-rgb), .86) 0%, rgba(var(--navy-rgb), .72) 55%, rgba(var(--navy-rgb), .55) 100%); } }
@media (min-width: 640px) {
  .caption-title { font-size: 34px; }
  .caption-sub { font-size: 17px; }
  .slider-nav .go-prev, .slider-nav .go-next { width: 50px; height: 75px; margin-top: -37px; }
}
@media (min-width: 900px) {
  .hero { height: 56vh; min-height: 380px; max-height: 540px; }
  .caption { padding: 0 max(5%, 68px); }
  .caption-title { font-size: 38px; }
  .caption-sub { font-size: 18px; }
  .hero-video-toggle { right: 5%; bottom: 50px; }
}

/* En-tête des pages intérieures (« Découvrez le / CHRACERH » sur photo, dégradé noir d'origine) */
.hero-page { position: relative; overflow: hidden; display: flex; align-items: center; height: 32vh; min-height: 220px; max-height: 340px; background: var(--navy); color: var(--white); text-align: left; text-shadow: 0 1px 3px rgba(var(--black-rgb), .5); }
.hero-page .hero-page-bg, .hero-page .hero-page-bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hero-page .hero-page-bg img { max-width: none; object-fit: cover; object-position: 50% 60%; opacity: .75; }  /* .75 (et non .9) : titre blanc lisible sur les photos claires (blouses, murs) */
.hero-page .hero-page-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--navy-rgb), .88) 0%, rgba(var(--navy-rgb), .6) 50%, rgba(var(--navy-rgb), .3) 100%); }
.hero-page-inner { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 20px 16px; }
.hero-page-inner > * { max-width: 760px; }
.hero-page-sup { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; color: var(--sky); text-shadow: 0 1px 6px rgba(var(--black-rgb), .5); }
.hero-page-title { font-family: var(--font-title); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--white); margin: 0; }
.hero-page-sub { font-size: 16px; color: var(--white); margin: 12px 0 0; }
.hero-page-sub:last-child { margin-bottom: 0; }
.hero-page .actions { justify-content: flex-start; }
@media (min-width: 900px) {
  .hero-page { height: 34vh; min-height: 250px; }
  .hero-page-inner { padding: 20px 5%; }
  .hero-page-sup { font-size: 13px; }
  .hero-page-title { font-size: 40px; }
  .hero-page-sub { font-size: 18px; }
}
/* En-tête clair (formulaires, mentions, actualités) */
/* En-tête sans photo (actualités, médias, contact, rendez-vous, mentions) : dégradé bleu nuit → bleu, texte blanc */
.hero-light { position: relative; overflow: hidden; background: linear-gradient(115deg, var(--navy) 0%, var(--blue-deep) 58%, var(--blue-hover) 100%); color: var(--white); text-align: left; padding: 24px 0 20px; }
.hero-light::after { content: ''; position: absolute; right: -8%; top: -60%; width: 46%; height: 220%; background: radial-gradient(closest-side, rgba(var(--white-rgb), .10), rgba(var(--white-rgb), 0)); pointer-events: none; }  /* halo discret */
.hero-light > .wrap { position: relative; z-index: 1; }
.hero-light + .section, .hero-light + .cm-rule + .section { padding-top: 14px; }  /* en-tête suivi du contenu : pas de grand blanc entre les deux */
.hero-light h1 { margin-bottom: 8px; color: var(--white); }
.hero-light .hero-page-sub { max-width: 760px; color: var(--white); }
.hero-light .pre-title { color: #cfe3f5; }
.hero-light .arrowed { color: var(--white); }
.hero-light .arrowed::before { background-color: var(--white); border-color: var(--white); }
.hero-light .arrowed:hover::before { background-color: var(--blue); border-color: var(--blue); }
.hero-light a:not(.arrowed):not(.pill) { color: var(--white); }
@media (min-width: 900px) { .hero-light { padding: 32px 0 28px; } .hero-light + .section, .hero-light + .cm-rule + .section { padding-top: 18px; } }

/* --------------------------------------------------------------------------
   Accueil : colonne principale + colonne latérale (69 % / 30 % d'origine)
   -------------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 1fr; gap: 36px; }
.aside { padding-top: 0; }
.aside-title { display: block; font-family: var(--font-title); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--text); margin: 0 0 8px; }
.aside-block { margin-bottom: 28px; }
.aside-footer-dup { display: none; }  /* doublon du pied de page : affiché seulement en colonne latérale (PC) */
.aside-block p { color: var(--muted); margin: 0 0 6px; }
.aside-tel { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--text); padding: 6px 0; }
.aside-tel:hover { color: var(--blue-hover); }
.aside-tel .ico { color: var(--blue); }
.aside-mail { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.aside-mail .ico { color: var(--blue); }
.aside-mail:hover { color: var(--blue-hover); }
.aside hr { width: 100px; border: 0; border-top: 2px solid rgba(var(--black-rgb), .1); margin: 22px 0 26px; }
.aside-social { display: flex; gap: 10px; list-style: none; margin: 0 0 28px; padding: 0; }
.aside-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); border: 2px solid rgba(var(--black-rgb), .1); color: var(--blue-hover); transition: background .25s, border-color .25s, color .25s; }
.aside-social a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.aside-social .ico { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start; }
  .aside-footer-dup { display: block; }
}
@media (min-width: 1200px) { .two-col { grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; } .aside-title { font-size: 28px; } }

/* Blocs protocolaires (Président / Première Dame) : portrait arrondi + pré-titre + nom + texte + lien flèche */
.protocol { display: grid; grid-template-columns: 1fr; gap: 26px; }
.protocol-card + .protocol-card { padding-top: 26px; border-top: 1px solid var(--line); }
.protocol-card { display: block; }
.protocol-card::after { content: ''; display: block; clear: both; }
.protocol-card > picture img, .protocol-card > img { float: left; margin: 4px 16px 8px 0; }
.protocol-card img { width: 88px; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: var(--radius); }
.protocol-card .pre-title { margin-bottom: 4px; }
.protocol-card h3 { font-size: 24px; margin: 0 0 8px; }
.protocol-card p { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
@media (min-width: 640px) {
  .protocol-card { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: start; }
  .protocol-card::after { content: none; }
  .protocol-card > picture img, .protocol-card > img { float: none; margin: 0; }
  .protocol-card img { width: 140px; aspect-ratio: 140 / 170; }
  .protocol-card h3 { font-size: 24px; }
}

/* Bande grise « mot du Directeur général » : portrait carré 150 px, texte centré */
/* Mot du Directeur : portrait flottant, texte qui l'habille, lettrine sur le premier paragraphe */
.dg-band .wrap::after { content: ''; display: block; clear: both; }
.dg-portrait { float: left; width: 110px; height: 130px; margin: 4px 18px 10px 0; border-radius: var(--radius); overflow: hidden; }
.dg-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.dg-band .pre-title { margin-bottom: 6px; }
.dg-band h2 { margin-bottom: 14px; }
.dg-text { max-width: 900px; color: var(--muted); font-size: 16px; }
.dg-text p:last-of-type { margin-bottom: 0; }
.dg-text > p:first-child::first-letter {
  float: left; font-family: var(--font-title); font-weight: 600; font-size: 3.6em; line-height: .82; color: var(--blue-dark);
  margin: .1em .1em 0 0;
}
.dg-text .dot-list { overflow: hidden; }  /* la liste ne passe pas sous le portrait (puces masquées) */
.dg-band .actions { margin-top: 14px; }
@media (min-width: 760px) { .dg-portrait { width: 190px; height: 225px; margin: 6px 32px 16px 0; } }
@media (min-width: 900px) { .dg-text { font-size: 17px; } .dg-text > p:first-child::first-letter { font-size: 4.1em; } }

/* Blocs texte + image(s) (sections « Inauguration » et « Hommage » d'origine, deux photos décalées) */
.group { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.group-media { position: relative; }
.group-media img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 3 / 2; }
.group-media.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.group-media.duo > picture:first-child img { aspect-ratio: 4 / 3; }
.group-media.duo > picture:last-child img { aspect-ratio: 1; margin-bottom: 14%; }
.group-media.portrait img { aspect-ratio: 1; max-width: 360px; }
@media (max-width: 639px) { .group-media.portrait img { max-width: none; aspect-ratio: 3 / 2; object-position: 50% 20%; } }
@media (min-width: 640px) and (max-width: 1059px) { .group:has(> .group-media.portrait) { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; } }
.group-media.stack { display: grid; gap: 12px; }  /* deux photos l'une sous l'autre, pour accompagner un texte long */
@media (max-width: 1059px) { .group-media.stack { grid-template-columns: 1fr 1fr; } .group-media.stack img { aspect-ratio: 4 / 3; } }
.group-body h2 { margin-bottom: 18px; }
.group-body p { color: var(--muted); }
.group-body > :last-child { margin-bottom: 0; }
.group-body .dot-list li { color: var(--muted); }
/* Texte vertical en marge (motif « Centre hospitalier… » d'origine), PC seulement */
.group-vertical { display: none; }
@media (min-width: 640px) and (max-width: 1059px) { .group-media:not(.portrait):not(.duo) img { aspect-ratio: 16 / 9; } }  /* photo empilée : bandeau moins haut */
@media (min-width: 1060px) {
  .group { grid-template-columns: 1fr 1fr; gap: 70px; }
  .group-reverse .group-media { order: 2; }
  .group-top, .group-start { align-items: start; }
  .group-vertical { display: block; position: absolute; left: -4%; top: 40%; transform: rotate(-90deg) translate(-50%, 0); transform-origin: left top; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--pre); white-space: nowrap; }
}

/* Repères en ligne (chiffres sobres : petit chiffre, libellé, source) */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.fact { border-left: 3px solid var(--blue); padding-left: 14px; }
.fact-value { display: block; font-family: var(--font-title); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--text); }
.fact-label { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, 1fr); gap: 24px 30px; } .fact-value { font-size: 26px; } .group-body .facts { grid-template-columns: 1fr 1fr; } }

/* Phrase manifeste (« Agissons ensemble pour la santé de la femme africaine ») */
.statement { text-align: center; }
.statement p { font-family: var(--font-title); font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--text); max-width: 760px; margin: 0 auto 18px; }
.statement .actions { justify-content: center; margin-top: 0; }
@media (min-width: 900px) { .statement p { font-size: 32px; } }

/* Bande bleue à colonnes numérotées 01 / 02 / 03 (bloc « Événements » d'origine, réutilisé pour la presse) */
.band-blue { background: var(--blue-hover); color: var(--white); padding: 44px 0; }
.band-title { position: relative; text-align: left; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); margin: 0 0 28px; }
.band-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 28px; }
.band-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-top: 14px; border-top: 2px solid rgba(var(--white-rgb), .35); }
.band-meta { display: flex; gap: 12px; font-size: 13px; margin-bottom: 6px; color: rgba(var(--white-rgb), .95); }
.band-num { font-weight: 700; color: var(--white); }
.band-item-title { display: block; font-family: var(--font-title); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--white); margin: 0 0 10px; }
.band-item-title a { color: var(--white); }
.band-item-title a:hover { text-decoration: underline; }
.band-item .arrowed { margin-top: auto; }
.band-blue .actions { margin-top: 24px; }
@media (min-width: 760px) { .band-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
@media (min-width: 900px) { .band-blue { padding: 48px 0; } .band-item-title { font-size: 21px; } }

/* Bloc dons (photos très estompées de chaque côté, titre centré, pilule) */
.don-band { position: relative; overflow: hidden; background: var(--navy); color: var(--white); }
.don-band-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; pointer-events: none; }
.don-band-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .35; }
.don-band-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, rgba(var(--navy-rgb), 0) 60%); }
.don-band-inner { position: relative; z-index: 1; padding-top: 44px; padding-bottom: 44px; }
.don-band-inner > * { max-width: 640px; }
.don-band .pre-title { color: var(--sky); }
.don-band h2 { color: var(--white); margin-bottom: 12px; }
.don-band p { color: rgba(var(--white-rgb), .85); margin-bottom: 22px; }
@media (max-width: 759px) { .don-band-photo { width: 100%; } .don-band-photo img { opacity: .18; } }
@media (min-width: 900px) { .don-band-inner { padding-top: 60px; padding-bottom: 60px; } }

/* --------------------------------------------------------------------------
   Cartes (services, actualités, pôles) : image, titre, sous-titre bleu, texte, lien flèche
   -------------------------------------------------------------------------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 24px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.section-soft .card { border-color: transparent; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-img { position: relative; aspect-ratio: 16 / 10; background: var(--bg-soft-2); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .7s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.04); }
.card-icon { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 22px; background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-hover) 55%, var(--blue) 100%); color: var(--white); }
.card-icon .ico { width: 48px; height: 48px; stroke-width: 1.5; }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body > :last-child { margin-bottom: 0; }
.card-title { font-family: var(--font-title); font-weight: 600; font-size: 19px; line-height: 1.25; margin: 0 0 8px; color: var(--text); }
.card-title a { color: inherit; }
.card-title a::after { content: ''; position: absolute; inset: 0; }
.card-sub { display: block; color: var(--blue-hover); font-weight: 600; font-size: 14px; margin: 0 0 10px; }
.card-text { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; }
.card-list { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; color: var(--muted); }
.card-list li { position: relative; padding-left: 18px; margin-bottom: 4px; }
.card-list li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; position: relative; z-index: 1; pointer-events: none; }
.card-foot a, .card-foot button { pointer-events: auto; }
.card-foot .arrowed { font-size: 14px; }
.card-urgent .card-sub { color: var(--red-dark); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 30px; } .cards-2 { grid-template-columns: repeat(2, 1fr); } .cards-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; } .cards-4 .card-title { font-size: 18px; } .cards-4 .card-body { padding: 20px 18px 22px; } }
/* Cartes larges (page soins : image à gauche, texte à droite) */
.card-wide { display: grid; grid-template-columns: minmax(0, 1fr); scroll-margin-top: calc(var(--header-h) + 16px); }  /* minmax(0, …) : sinon l'icône 4/1 (min-height 96 px → 384 px) élargit la colonne au-delà de l'écran mobile */
.card-wide .card-img { aspect-ratio: 2 / 1; }
.card-wide:hover { transform: none; }
/* Service sans photo : petite tuile d'icône à côté du titre (au lieu d'une bande bleue vide) */
.card-wide.card-wide-icon { position: relative; grid-template-columns: minmax(0, 1fr); }
.card-wide-icon > .card-icon { position: absolute; left: 22px; top: 22px; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: var(--radius); }
.card-wide-icon > .card-icon .ico { width: 26px; height: 26px; }
.card-wide-icon > .card-body { padding-left: 84px; }
@media (max-width: 639px) { .card-wide-icon > .card-body { padding-left: 22px; padding-top: 80px; } }
@media (max-width: 1059px) {  /* mobile et tablette : photo, texte, puis « Comment consulter » */
  .card-side { display: contents; }
  .card-side > .card-img { order: 1; }
  .card-wide > .card-body { order: 2; }
  .card-wide.card-wide-photo > .card-body { padding-bottom: 6px; }
  .card-side > .consult { order: 3; margin: 0 22px 14px; }
  .card-side > .card-foot { order: 4; padding: 0 22px 22px; }
}  /* (pas d'aspect-ratio 4/1 sur .card-icon : sa min-height de 96 px se transférait en largeur minimale de 384 px et débordait sur mobile ; la bande fait 96 px de haut) */
@media (min-width: 1060px) {
  .card-wide { grid-template-columns: 360px minmax(0, 1fr); }
  .card-wide .card-img { aspect-ratio: 3 / 2; }
  .card-wide .card-img img { position: absolute; inset: 0; }
  .card-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
  .card-side > .consult { margin: 18px 20px 14px; background: var(--bg-soft); }
  .card-side > .card-foot { margin-top: 0; padding: 0 20px 22px; }
  .card-wide .card-body { padding: 28px 32px; }
  .card-wide-icon > .card-icon { left: 30px; top: 28px; width: 52px; height: 52px; }
  .card-wide-icon > .card-body { padding-left: 104px; }
  /* carte à photo : la photo occupe toute la hauteur à gauche, « Comment consulter » et les liens suivent le texte à droite (pas de blanc sous le texte) */
  .card-wide-photo { grid-template-rows: auto auto 1fr; }
  .card-wide-photo > .card-side { display: contents; }
  .card-wide-photo .card-side > .card-img { grid-column: 1; grid-row: 1 / 4; aspect-ratio: auto; min-height: 240px; border-right: 1px solid var(--line); }
  .card-wide-photo > .card-body { grid-column: 2; grid-row: 1; padding-bottom: 8px; }
  .card-wide-photo .card-side > .consult { grid-column: 2; grid-row: 2; margin: 0 32px 14px; }
  .card-wide-photo .card-side > .card-foot { grid-column: 2; grid-row: 3; align-self: start; padding: 0 32px 26px; }
}
/* Liste de cartes larges : une seule colonne à toutes les largeurs ; carte sans lien : pas d'effet de survol */
.cards.cards-wide { grid-template-columns: 1fr; }
.sejour-grid .cards { gap: 20px; align-content: start; }
.sejour-grid .card-img { aspect-ratio: 16 / 9; }
.card-static:hover { box-shadow: none; transform: none; }
/* Titre de groupe de services (page soins) */
.group-head { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 2px solid rgba(var(--black-rgb), .06); }
.group-head .ico { width: 30px; height: 30px; color: var(--blue); }
.group-head h2 { margin: 0; font-size: 24px; }
.group-head p { margin: 0; color: var(--muted); font-size: 14.5px; }
@media (min-width: 900px) { .group-head h2 { font-size: 28px; } }
/* Encart « Comment consulter » d'une carte */
.consult { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin: 0 0 16px; border-radius: var(--radius); background: var(--bg-soft); font-size: 14px; color: var(--muted); }
.section-soft .consult { background: var(--white); border: 1px solid var(--line); }
.consult .ico { width: 18px; height: 18px; color: var(--blue); margin-top: 3px; }
.consult strong { display: block; color: var(--text); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.consult p { margin: 0; }
.consult-urgence { background: var(--red-soft) !important; border: 0 !important; }
.consult-urgence .ico, .consult-urgence strong { color: var(--red-dark); }

/* Listes à puces rondes bleues (Présentation d'origine) et liste cochée */
.dot-list { list-style: none; padding: 0; margin: 0 0 18px; }
.dot-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.dot-list li::before { content: ''; position: absolute; left: 6px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.dot-list-sm li { padding-left: 22px; margin-bottom: 6px; font-size: 15px; }
.dot-list-sm li::before { left: 2px; width: 9px; height: 9px; top: .6em; }
.check-list { list-style: none; padding: 0; margin: 0 0 18px; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 9px; }
.check-list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); }
.check-list li::after { content: ''; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); }
.check-list.cols { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 640px) { .check-list.cols { grid-template-columns: 1fr 1fr; } }
.tag-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.tag-list li { font-size: 15px; color: var(--text); }
.tag-list li + li::before { content: '·'; margin-right: 10px; color: var(--blue); font-weight: 700; }

/* Liste de liens texte (sommaire de page, pôles) */
.link-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.link-list li a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 600; font-size: 14px; color: var(--text-2); }
.link-list li a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
.link-list li a:hover { color: var(--blue-hover); }
.link-list-col { flex-direction: column; gap: 4px; }
/* Flèche flottante « défiler » en bas à droite des fenêtres dont le contenu dépasse */
.scroll-hint { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 46px; height: 46px; padding: 0; border: 0; border-radius: var(--radius); background: var(--navy); color: var(--white); box-shadow: 0 6px 16px rgba(var(--navy-rgb), .3); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .9; transition: background .3s var(--ease), opacity .3s; }
.scroll-hint::before { content: ''; width: 11px; height: 11px; margin-top: -6px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.scroll-hint:hover { background: var(--blue); opacity: 1; }
.scroll-hint:not([hidden]) { animation: hintIn .35s var(--ease); }
@keyframes hintIn { from { opacity: 0; transform: translateY(8px); } to { opacity: .9; transform: none; } }
.scroll-hint-wrap { position: sticky; bottom: -28px; height: 0; z-index: 6; }  /* -28px = marge basse de la boîte : la flèche se cale sur son bord */
.scroll-hint-wrap .scroll-hint { bottom: 16px; right: 0; }
@media (min-width: 640px) { .scroll-hint-wrap { bottom: -36px; } .scroll-hint-wrap .scroll-hint { right: -44px; width: 40px; height: 40px; } }
.offcanvas > .scroll-hint { position: fixed; background: var(--white); color: var(--navy); }
.offcanvas > .scroll-hint:hover { background: var(--blue); color: var(--white); }
.legal-overlay-box > .scroll-hint { right: 20px; bottom: 20px; }
@media (prefers-reduced-motion: reduce) { .scroll-hint:not([hidden]) { animation: none; } }
/* Étapes numérotées (numéro dans une tuile carrée, titre, texte) */
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 18px 30px; }
.step-list li { position: relative; padding-left: 58px; min-height: 42px; }
.step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-hover) 55%, var(--blue) 100%); color: var(--white); font-family: var(--font-title); font-weight: 600; font-size: 19px; }
.step-list h3 { font-size: 18px; margin: 8px 0 6px; }
.step-list p { color: var(--muted); margin: 0; }
@media (min-width: 900px) { .step-list { grid-template-columns: repeat(3, 1fr); } }
/* Filet aux couleurs du Cameroun, posé à la jonction de deux blocs (quelques transitions seulement) */
.cm-rule { position: relative; z-index: 2; height: 0; }
.cm-rule > div { height: 0; }
.hero-light + .cm-rule { z-index: 61; }  /* au-dessus d'un sommaire collant qui suivrait l'en-tête */
.cm-rule span { display: block; width: 108px; height: 4px; transform: translateY(-2px); background: linear-gradient(90deg, var(--cm-green) 0 33.34%, var(--cm-red) 33.34% 66.67%, var(--cm-yellow) 66.67% 100%); }
.site-footer { position: relative; }
.site-footer > .cm-rule { position: absolute; top: 0; left: 0; right: 0; }
/* Sommaire d'une page longue (sous l'en-tête) */
.page-toc { position: sticky; top: calc(var(--header-h-scrolled) + 1px); z-index: 60; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px -10px rgba(var(--navy-rgb), .25); }
.page-toc .wrap { position: relative; }
.page-toc .link-list { flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 9px 0 9px 4px; }
.page-toc .link-list li a { white-space: nowrap; }
.page-toc-toggle { display: none; }
.page-toc .link-list li a.is-current { color: var(--blue-dark); }
.page-toc .link-list li a.is-current::before { box-shadow: 0 0 0 3px rgba(var(--blue-rgb), .28); }
@media (max-width: 1059px) {  /* mobile et tablette : bouton « Sur cette page » qui déroule la liste */
  .page-toc-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }
  .page-toc-label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pre); white-space: nowrap; }
  .page-toc-current { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; color: var(--blue-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-toc-toggle::after { content: ''; width: 8px; height: 8px; margin: -4px 6px 0 0; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); transition: transform .2s; flex: none; }
  .page-toc.is-open .page-toc-toggle::after { transform: rotate(-135deg); margin-top: 4px; }
  .page-toc .link-list { display: none; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 0 10px 4px; max-height: 60vh; overflow-y: auto; }
  .page-toc.is-open .link-list { display: flex; }
  .page-toc .link-list li a { display: flex; padding: 9px 0; font-size: 15px; }
}
html:has(.page-toc) { scroll-padding-top: calc(var(--header-h-scrolled) + 58px); }  /* ancres visibles sous le sommaire collant */
/* Fiche d'identité (liste de définitions en colonnes) */
.idcard { display: grid; grid-template-columns: 1fr; gap: 0 30px; margin: 0 0 8px; }
.idcard > div { padding: 12px 0; border-top: 1px solid var(--line-2); }
.idcard dt { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: 2px; }
.idcard dd { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 640px) and (max-width: 1059px) { .idcard > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) { .idcard { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .idcard { grid-template-columns: repeat(3, 1fr); } }

/* Citation, note, encadré urgences */
.quote { font-size: 17px; font-style: italic; color: var(--muted); margin: 0 0 14px; padding-left: 16px; border-left: 3px solid var(--blue); }
.note { padding: 14px 18px; border-left: 3px solid var(--blue); background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; color: var(--text-2); margin: 18px 0; }
.section-soft .note { background: var(--white); }
.note > :last-child { margin-bottom: 0; }
.note-red { border-color: var(--red); background: var(--red-soft) !important; }
.urgence-box { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--red); background: var(--white); }
.section-soft .urgence-box { border-color: transparent; border-left-color: var(--red); }
.urgence-box h2 { font-size: 22px; margin: 0 0 6px; color: var(--red-dark); }
.urgence-box p { margin: 0 0 6px; color: var(--muted); }
.urgence-box .actions { margin-top: 6px; }
@media (min-width: 760px) { .urgence-box { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; padding: 28px 32px; } }

/* Cartes blanches Admission / Sortie (Présentation d'origine) et blocs d'information */
.panel { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); padding: 24px; }
.section-soft .panel { border-color: transparent; }
.panel h3 { font-size: 20px; margin-bottom: 12px; }
.panel > :last-child { margin-bottom: 0; }
.panel .ico-title { display: inline-flex; align-items: center; gap: 10px; }
.panel .ico-title .ico { width: 24px; height: 24px; color: var(--blue); }
@media (min-width: 900px) { .panel { padding: 34px 38px; } }

/* Tuiles d'information (contact d'origine : icône, titre, texte, lien souligné) */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 26px; }
.tile { display: flex; flex-direction: column; text-align: left; }
.tile .ulink { margin-top: auto; align-self: flex-start; }
.tile-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 0 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-hover) 55%, var(--blue) 100%); color: var(--white); }
.tile-icon .ico { width: 28px; height: 28px; }
.tile h3 { font-size: 22px; margin-bottom: 8px; }
.tile p { color: var(--muted); margin-bottom: 12px; font-size: 15px; }
.tile-urgence .tile-icon { background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%); color: var(--white); }
.tile-urgence h3 { color: var(--red-dark); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
/* Colonne d'informations à côté d'un formulaire */
.contact-split { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.contact-info { display: grid; gap: 14px; align-content: start; }
.contact-info.is-static { position: static !important; }
.contact-info .info { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
.section-soft .contact-info .info { border-color: transparent; }
.info-icon { width: 42px; height: 42px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex: none; background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-hover) 55%, var(--blue) 100%); color: var(--white); }
.info-icon .ico { width: 20px; height: 20px; }
.contact-info .info strong { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 2px; }
.contact-info .info p { margin: 0; font-size: 15px; line-height: 1.5; }
.contact-info .info-urgence .info-icon { background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%); color: var(--white); }
.contact-info .info-urgence strong { color: var(--red-dark); }
@media (min-width: 900px) { .contact-split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 50px; } .contact-info { position: sticky; top: calc(var(--header-h-scrolled) + 24px); } .page-toc ~ .section .contact-info { top: calc(var(--header-h-scrolled) + 74px); } }

/* Frise chronologique */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.tl-item { position: relative; padding: 0 0 22px 32px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 4px solid var(--blue); }
.tl-date { display: block; font-weight: 600; font-size: 14px; color: var(--blue-hover); }
.tl-item h3 { font-size: 17px; margin: 2px 0 4px; }
.tl-item p { margin: 0; font-size: 15px; color: var(--muted); }
@media (min-width: 900px) {
  .timeline-2 { columns: 2; column-gap: 60px; }
  .timeline-2::before { display: none; }
  .timeline-2 .tl-item { break-inside: avoid; border-left: 2px solid var(--line-2); margin-left: 7px; padding-left: 26px; }
  .timeline-2 .tl-item::before { left: -9px; }
  .timeline-2 .tl-item:last-child { padding-bottom: 22px; }
}

/* Partenaires (texte) */
.partner-groups { display: grid; grid-template-columns: 1fr; gap: 20px; }
.partner-group h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.partner-group h3 .ico { color: var(--blue); }
.partner-group ul { list-style: none; margin: 0; padding: 0; }
.partner-group li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.partner-group li:first-child { border-top: 0; padding-top: 0; }
.partner-group li strong { display: block; }
.partner-group li span { font-size: 14px; color: var(--muted); }
@media (min-width: 900px) { .partner-groups { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* --------------------------------------------------------------------------
   Accordéon (droits et devoirs)
   -------------------------------------------------------------------------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.section-soft .accordion { border-color: transparent; }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 15px 18px; background: transparent; border: 0; font-family: var(--font-title); font-weight: 500; font-size: 17px; color: var(--text); transition: color .2s; }
.acc-head:hover { color: var(--blue-hover); }
.acc-head::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(var(--black-rgb), .1); color: var(--blue); font-size: 20px; line-height: 1; transition: background .2s, border-color .2s; }
.acc-item.is-open .acc-head { color: var(--blue-hover); }
.acc-item.is-open .acc-head::after { content: '\2013'; background: var(--blue); border-color: var(--blue); color: var(--white); }
.acc-body { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .45s var(--ease), visibility 0s .45s; }
.acc-item.is-open .acc-body { max-height: 2400px; visibility: visible; transition-delay: 0s; }
.acc-body-inner { padding: 0 18px 18px; color: var(--muted); font-size: 15px; }
.acc-body-inner > :last-child { margin-bottom: 0; }
@media (scripting: none) {
  .acc-body { max-height: none; visibility: visible; }
  .hero-video-toggle, .slider-nav, .slider-dots { display: none; }
  .slide { position: relative; opacity: 1; visibility: visible; height: 60vh; }
  .hero { height: auto; max-height: none; }
}
@media (scripting: none) and (max-width: 1059px) {
  .site-header { position: relative; }
  .header-inner { flex-wrap: wrap; height: auto; padding: 8px 0; }
  .main-nav { display: block; width: 100%; }
  .menu { flex-wrap: wrap; justify-content: flex-start; }
  .menu > li > a { line-height: 36px; }
  .nav-toggle { display: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   Actualités : outils, cartes avec date (jour / mois / année en bleu), pagination ; article
   -------------------------------------------------------------------------- */
/* Barre de recherche et de thèmes collante sous l'en-tête (fond blanc prolongé sur toute la largeur) */
.news-tools { display: grid; gap: 10px; margin: 0 0 22px; position: sticky; top: calc(var(--header-h-scrolled) + 1px); z-index: 60; padding: 10px 0; background: var(--white); box-shadow: 0 0 0 100vmax var(--white), 0 1px 0 100vmax var(--line); clip-path: inset(0 -100vmax -1px); }
.news-tools .news-select-wrap { display: none; }
@media (max-width: 899px) { .news-tools .news-filters { display: none; } .news-tools .news-select-wrap { display: block; } .news-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .news-search { grid-column: 1 / -1; } .news-tools .input { height: 44px; } }
.news-search { position: relative; }
.news-search .ico { position: absolute; left: 14px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: var(--pre); pointer-events: none; }
.news-search .input { padding-left: 44px; }
.news-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn { height: 38px; padding: 0 16px; border-radius: var(--radius); border: 2px solid rgba(var(--black-rgb), .1); background: var(--white); color: var(--text-2); font-weight: 600; font-size: 13px; letter-spacing: .02em; transition: all .2s; }
.filter-btn:hover { border-color: var(--blue); color: var(--blue-hover); }
.filter-btn.is-active { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--white); }
.news-count { font-size: 14px; color: var(--muted); margin: 0; align-self: center; }
@media (min-width: 640px) and (max-width: 899px) { .news-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 240px) auto; } .news-tools .news-search { grid-column: auto; } }
@media (max-height: 500px) { .news-tools { position: static; } }
@media (min-width: 900px) { .news-tools { grid-template-columns: minmax(0, 320px) minmax(0, 1fr) auto; align-items: center; gap: 16px; } }
@media (min-width: 900px) and (max-width: 1199px) { .news-tools { grid-template-columns: minmax(0, 1fr) auto; } .news-search { grid-column: 1 / -1; } }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .news-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.news-card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.section-soft .news-card { border-color: transparent; }
.news-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.news-card-link { display: block; }
.news-card-media { display: block; aspect-ratio: 16 / 10; background: var(--bg-soft-2); overflow: hidden; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .7s var(--ease-out); }
.news-card:hover .news-card-media img { transform: scale(1.04); }
.news-date { display: none; }
.news-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 12.5px; }
.news-topic { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; color: var(--blue-hover); }
.badge-en { font-weight: 600; font-size: 11px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--text-2); letter-spacing: .05em; }
.news-meta time { margin-left: auto; color: var(--pre); }
.news-title { font-family: var(--font-title); font-weight: 500; font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.news-title a { color: var(--text); }
.news-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.news-title a:hover { color: var(--blue-hover); }
.news-excerpt { font-size: 14.5px; color: var(--muted); margin: 0; }
.news-empty { text-align: center; padding: 24px; background: var(--bg-soft); border-radius: var(--radius); color: var(--muted); }
.news-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 30px; }
.page-btn { min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius); border: 2px solid rgba(var(--black-rgb), .1); background: var(--white); color: var(--text); font-weight: 600; }
.page-btn:hover { border-color: var(--blue); color: var(--blue-hover); }
.page-btn.is-active { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--white); }
@media (scripting: none) { .news-tools { display: none; } }

.article-head { padding: 0 0 6px; }
.section.article { padding-top: 26px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; font-size: 14px; color: var(--pre); }
.article-title { font-size: 28px; line-height: 1.22; margin: 0 0 12px; }
.article-kicker { font-weight: 600; color: var(--blue-hover); font-size: 16px; margin: 0 0 8px; }
.article-media { margin: 16px 0 18px; }
.article-media img { width: 100%; max-height: min(460px, 50vh); object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }
.article-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-text); font-size: 14px; margin: 0 0 18px; }
.article-note .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.article-lead { font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--text-2); margin: 0 0 18px; }
.article-body p { font-size: 16.5px; line-height: 1.75; color: var(--text-2); }
.article-byline { font-size: 14px; color: var(--pre); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 22px; }
.article-byline strong { color: var(--text); }
.article-nav { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.article-nav a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); transition: border-color .2s; }
.article-nav a:hover { border-color: var(--blue); }
.article-nav small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 2px; }
.article-nav .next { text-align: right; }
@media (min-width: 640px) { .article-nav { grid-template-columns: 1fr 1fr; } .article-nav .next:only-child { grid-column: 2; } }
@media (min-width: 900px) { .article-title { font-size: 38px; } .section.article { padding-top: 40px; } }

/* --------------------------------------------------------------------------
   Galerie photo et visionneuse
   -------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery-item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft-2); aspect-ratio: 4 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out), opacity .3s; }
.gallery-item:hover img { transform: scale(1.05); }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 640px) and (max-width: 1059px) { .gallery:not(.gallery-3) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .gallery { grid-template-columns: repeat(4, 1fr); } .gallery.gallery-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) { .gallery-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }
.gallery-title { font-size: 19px; margin: 30px 0 14px; }
.gallery-group + .gallery-group { padding-top: 30px; }
.gallery-title:first-child, .gallery-group:first-of-type .gallery-title { margin-top: 0; }
.lightbox { position: fixed; inset: 0; z-index: 330; display: none; }
.lightbox.is-open { display: block; }
.lightbox-bg { position: absolute; inset: 0; background: rgba(var(--navy-rgb), .94); }
.lightbox-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 58px 12px 16px; pointer-events: none; }
.lightbox-box > * { pointer-events: auto; }
.lightbox-bar { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 18px; color: var(--white); }
.lightbox-count { font-size: 14px; font-weight: 600; }
.lightbox-close { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0 0 3px; background: rgba(var(--white-rgb), .16); color: var(--white); font-size: 30px; line-height: 1; }
.lightbox-close:hover { background: var(--blue); }
.lightbox-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; animation: fadeIn .25s var(--ease); }
.lightbox-img { max-width: min(1200px, 100%); max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: var(--radius); }
.lightbox-caption { color: rgba(var(--white-rgb), .9); font-size: 14px; text-align: center; margin-top: 10px; max-width: 760px; }
.lightbox-nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0 0 4px; background: rgba(var(--white-rgb), .16); color: var(--white); font-size: 34px; line-height: 1; }
.lightbox-nav:hover { background: rgba(var(--white-rgb), .32); }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
html.lightbox-open, html.lightbox-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Vidéos : vignette avec durée (badge d'origine), fenêtre de lecture bleu nuit
   -------------------------------------------------------------------------- */
.video-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--navy-3); text-align: left; color: var(--white); }
.video-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .7s ease-out, opacity .3s; }
.video-thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(var(--black-rgb), .67), transparent); pointer-events: none; opacity: .9; }
.video-thumb:hover img { transform: scale(1.05); opacity: .95; }
.play-btn { position: absolute; left: 50%; top: 50%; z-index: 2; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-btn); transform: scale(1.3); transition: transform .5s ease-out, background .2s; }
.play-btn::before { content: ''; position: absolute; left: 20px; top: 16px; border-left: 15px solid var(--blue); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.video-thumb:hover .play-btn { transform: scale(1); }
.video-duration { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 6px 10px; border-radius: var(--radius); background: rgba(var(--black-rgb), .35); font-size: 12px; }
.video-thumb-title { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; font-weight: 600; font-size: 15px; line-height: 1.3; }
.video-thumb-title small { display: block; font-weight: 400; font-size: 12.5px; opacity: .9; }
.video-feature { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 760px) { .video-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; } }
.video-modal { position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; padding: 16px; }
.video-modal.is-open { display: flex; }
.video-modal-bg { position: absolute; inset: 0; background: rgba(var(--navy-rgb), .95); }
.video-modal-box { position: relative; width: min(960px, 100%); animation: fadeIn .25s var(--ease); }
.video-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--white); }
.video-modal-title { font-weight: 600; font-size: 16px; }
.video-modal-close { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0 0 3px; background: rgba(var(--white-rgb), .16); color: var(--white); font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; flex: none; }
.video-modal-close:hover { background: var(--red); }
.video-modal-stage { position: relative; aspect-ratio: 16 / 9; background: var(--navy-3); border-radius: var(--radius); overflow: hidden; }
.video-modal-stage video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
html.video-open, html.video-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Formulaires (champs 47 px, bordure fine, rayon 5 px, bouton pilule)
   -------------------------------------------------------------------------- */
.form { position: relative; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .form-row-2.form-row-radios { grid-template-columns: 1fr; } }  /* groupes de choix sur toute la largeur : options sur une ligne */
.field { margin: 0 0 14px; min-width: 0; }
fieldset.field { border: 0; padding: 0; }
fieldset.field legend, .field > label { display: block; font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 6px; padding: 0; }
.input {
  display: block; width: 100%; height: 48px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--line-2);
  background: var(--white); color: var(--text); font-family: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.input::placeholder { color: var(--pre); }
.input:hover { border-color: var(--blue); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), .2); }
textarea.input { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.select-wrap { position: relative; display: block; }
.select-wrap::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); pointer-events: none; }
select.input { padding-right: 40px; cursor: pointer; }
.field-hint { display: block; font-size: 13px; color: var(--pre); margin-top: 5px; }
.field-error { display: block; color: var(--error); font-size: 13px; font-weight: 600; margin-top: 5px; }
.field-error:empty { display: none; }
.field-count { display: block; text-align: right; font-size: 12px; color: var(--pre); margin-top: 4px; }
.field.has-error .input { border-color: var(--error); background: var(--error-bg); }
.field.has-error legend, .field.has-error > label { color: var(--error); }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radio { position: relative; display: inline-block; cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: var(--radius); line-height: 1.25; border: 1px solid var(--line-2); background: var(--white); font-size: 14px; color: var(--text); transition: background .2s, border-color .2s, color .2s; user-select: none; }
.radio span::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--white); flex: none; box-sizing: border-box; transition: all .2s; }
.radio:hover span { border-color: var(--blue); }
.radio input:checked + span { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--white); }
.radio input:checked + span::before { border: 4px solid var(--white); background: var(--blue-hover); }
.radio input:focus-visible + span { outline: 3px solid var(--blue-hover); outline-offset: 2px; }
.radios-services { display: grid; grid-template-columns: 1fr; gap: 6px; }  /* services : grille régulière, cases de même largeur */
.radios-services .radio, .radios-services .radio span { display: flex; width: 100%; height: 100%; }
@media (min-width: 640px) { .radios-services { grid-template-columns: 1fr 1fr; } }
/* Case RGPD : case centrée verticalement sur sa phrase (même spécificité que .field > label) */
.field > label.consent { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.5; cursor: pointer; }
.field > label.consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blue-hover); cursor: pointer; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-msg { display: none; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin: 0 0 14px; background: var(--blue-soft); color: var(--blue-deep); border: 1px solid var(--blue-line); }
.form-msg.is-visible { display: block; }
.form-msg.is-error { background: var(--error-bg); color: var(--error); border-color: var(--red-soft); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.form-hint { font-size: 13px; color: var(--pre); margin: 0; }
.form.is-sending .form-actions .pill, .form.is-sending .inline-row .pill { pointer-events: none; opacity: .75; color: transparent; position: relative; }
.form.is-sending .form-actions .pill .ico { opacity: 0; }
.form.is-sending .form-actions .pill::after, .form.is-sending .inline-row .pill::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid rgba(var(--white-rgb), .4); border-top-color: var(--white); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { text-align: center; padding: 30px 20px; border-radius: var(--radius); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.form-success h3 { font-size: 24px; margin-bottom: 8px; }
.form-success p { color: var(--text-2); margin: 0; }
.form-success .form-again { margin-top: 16px; }
.form-success:focus { outline: none; }
.form-success-icon { position: relative; display: block; width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--blue); animation: pop .5s var(--ease); }
.form-success-icon::after { content: ''; position: absolute; left: 21px; top: 13px; width: 13px; height: 24px; border-right: 4px solid var(--white); border-bottom: 4px solid var(--white); transform: rotate(45deg); }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.form-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); padding: 24px 18px; }
@media (max-width: 639px) {
  .form-card { padding-left: 14px; padding-right: 14px; }
  .form-row-radios .radios { gap: 6px; }
  .form-row-radios .radio span { padding: 6px 8px 6px 7px; gap: 5px; }
  .form-row-radios .radio span::before { width: 14px; height: 14px; }
}
.section-soft .form-card { border-color: transparent; }
.form-card > h2 { font-size: 26px; margin: 0 0 6px; }
.form-card .form-intro { color: var(--muted); margin-bottom: 20px; font-size: 15px; }
@media (min-width: 900px) { .form-card { padding: 40px 48px; } .form-card > h2 { font-size: 32px; } }
.modal-urgent { font-size: 14px; color: var(--red-dark); background: var(--red-soft); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 18px; }
.modal-urgent a { color: var(--red-dark); font-weight: 600; }
.inline-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-row .input { flex: 1 1 170px; min-width: 0; }
.inline-row .pill { flex: none; height: 48px; padding: 0 20px; }

/* Fenêtre modale « Demande de rendez-vous » (comme le formulaire de contact modal de l'ancien site) */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), visibility .35s; }
.modal-bg { position: absolute; inset: 0; background: rgba(var(--navy-rgb), .85); }
.rdv-modal-box { position: relative; width: min(760px, 100%); max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; background: var(--white); padding: 56px 16px 28px; transform: scale(.92); transition: transform .45s var(--ease) .1s; }
body.rdv-open .modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
body.rdv-open .modal.is-open .rdv-modal-box { transform: none; }
.rdv-modal-box > .form-intro { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.modal-close { position: absolute; top: 4px; right: 4px; width: 56px; height: 56px; border: 0; background: transparent; padding: 0; }
.modal-close span { position: absolute; left: 50%; top: 50%; width: 24px; height: 3px; background: var(--muted); transition: background .2s; }
.modal-close span:first-child { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close span:last-child { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close:hover span { background: var(--blue); }
/* Croix collée en haut à droite de la boîte pendant le défilement (marges négatives = marge intérieure de la boîte) */
.rdv-modal-box > .modal-close { position: sticky; top: -52px; right: auto; z-index: 7; display: block; margin: -52px -12px -4px auto; background: rgba(var(--white-rgb), .94); border-radius: var(--radius); }
@media (min-width: 640px) { .rdv-modal-box > .modal-close { top: -44px; margin: -44px -44px -12px auto; } }
.modal-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-dark); margin: 0 0 4px; }
.modal-title { font-size: 26px; margin: 0 0 14px; }
@media (min-width: 640px) {
  .modal { padding: 24px; }
  .rdv-modal-box { border-radius: var(--radius); max-height: calc(100vh - 48px); padding: 48px 48px 36px; }
  .modal-title { font-size: 34px; }
}
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: 44px; height: 44px; border-radius: var(--radius); border: 0; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--white); box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s var(--ease), visibility .3s, background .45s var(--ease), color .45s var(--ease); }
.to-top.is-visible { opacity: .92; visibility: visible; pointer-events: auto; transform: translateY(calc(-1 * var(--lift, 0px))); }  /* --lift : remonte au-dessus du sous-pied de page */
.to-top.on-dark { background: var(--white); color: var(--navy); }  /* inversé sur les fonds sombres (pied de page, bandes bleues, photos) */
.to-top:hover, .to-top.on-dark:hover { background: var(--blue); color: var(--white); opacity: 1; }
@media (min-width: 1060px) { .to-top { bottom: 24px; right: 24px; } }

/* --------------------------------------------------------------------------
   Pied de page bleu nuit (logo, plan du site, soins, lettre d'information, vidéo) et sous-pied blanc
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(var(--white-rgb), .7); padding: 50px 0 40px; font-size: 14px; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 36px; }
.footer-logo { width: 170px; height: auto; margin: 0 0 16px; }
.footer-brand p { color: rgba(var(--white-rgb), .6); margin: 0 0 22px; max-width: 420px; }
.footer-brand .video-thumb { max-width: 420px; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 30px; }
.footer-col h3 { font-family: var(--font-title); font-size: 18px; font-weight: 500; color: var(--white); margin: 0 0 12px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li a { display: block; line-height: 40px; color: rgba(var(--white-rgb), .6); border-bottom: 1px solid rgba(var(--white-rgb), .06); transition: color .15s var(--ease); }
.footer-col li a:hover { color: var(--white); }
.footer-col p { color: rgba(var(--white-rgb), .6); margin: 0 0 14px; }
.footer-newsletter .field > label { color: rgba(var(--white-rgb), .85); font-size: 13px; }
.footer-newsletter .inline-row .input { border-color: transparent; }
@media (min-width: 900px) {  /* PC : champ et bouton de même hauteur, bouton sur toute la largeur de la colonne */
  .footer-newsletter .inline-row .input, .footer-newsletter .inline-row .pill { height: 42px; }
  .footer-newsletter .inline-row .pill { flex: 1 1 100%; }
}
.footer-newsletter .field > label.consent { color: rgba(var(--white-rgb), .65); font-size: 13px; }
.footer-newsletter .consent a { color: var(--white); }
.footer-newsletter .field-error { color: var(--white); background: var(--red); border-radius: 4px; padding: 2px 8px; display: inline-block; }
.footer-newsletter .field-error:empty { display: none; }
.footer-newsletter .form-msg.is-error { background: var(--red); color: var(--white); border-color: var(--red); }
.footer-newsletter .form-success { background: rgba(var(--white-rgb), .06); border-color: rgba(var(--white-rgb), .15); padding: 16px; }
.footer-newsletter .form-success h3 { color: var(--white); font-size: 18px; }
.footer-newsletter .form-success p { color: rgba(var(--white-rgb), .85); }
.footer-newsletter .form-success-icon { width: 44px; height: 44px; margin-bottom: 8px; }
.footer-newsletter .form-success-icon::after { left: 15px; top: 8px; width: 10px; height: 20px; border-width: 3px; }
.footer-newsletter .form-again { color: var(--white); border-color: var(--white); }
.footer-credits-title { margin-top: 26px; }
.footer-credits { font-size: 13px; }
.footer-brand .footer-credits-title { font-family: var(--font-title); font-weight: 500; font-size: 18px; color: var(--white); margin: 26px 0 8px; }
.footer-brand .footer-credits { margin: 0; }
.page-medias .footer-brand .video-thumb { display: none; }  /* déjà en grand dans la page */
@media (min-width: 640px) and (max-width: 899px) {
  .footer-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .footer-brand .footer-logo, .footer-brand > p:not(.footer-credits) { grid-column: 1; }
  .footer-brand .video-thumb { grid-column: 2; grid-row: 1 / span 3; max-width: none; }
  .footer-brand .footer-credits-title, .footer-brand .footer-credits { grid-column: 1; }
}
.footer-rdv { color: rgba(var(--white-rgb), .6); }
@media (min-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-newsletter { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .site-footer { padding: 80px 0 60px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 60px; }
  .footer-cols { grid-template-columns: 1fr 1fr 1.3fr; gap: 36px; }
  .footer-newsletter { grid-column: auto; }
}
@media (min-width: 900px) and (max-width: 1239px) {
  .footer-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr); gap: 48px; }
  .footer-cols { grid-template-columns: 1fr 1fr 1.15fr; gap: 24px; }
  .footer-col li a { line-height: 1.35; padding: 9px 0; }
}
.sub-footer { background: var(--white); font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.sub-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 70px; padding-top: 12px; padding-bottom: 12px; }
.sub-footer p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.sub-footer .tel { color: var(--text); font-weight: 600; }
.sub-footer a { color: var(--blue-hover); }
.sub-footer a:hover { color: var(--blue-deep); }
.site-version { color: var(--pre); }
.social { display: flex; gap: 6px; }
.social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); border: 2px solid rgba(var(--black-rgb), .1); color: var(--blue-hover); transition: all .15s var(--ease); }
.social a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.social .ico { width: 16px; height: 16px; }
@media (max-width: 639px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; } .footer-newsletter { grid-column: 1 / -1; }
  .sub-footer-inner { flex-direction: column; align-items: flex-start; text-align: left; } .sub-footer p { justify-content: flex-start; }
}
@media (min-width: 900px) { .sub-footer-inner { min-height: 100px; } }

/* --------------------------------------------------------------------------
   Fenêtre superposée « Mentions légales » (iframe ?embed=1)
   -------------------------------------------------------------------------- */
.legal-overlay { position: fixed; inset: 0; z-index: 310; display: none; }
.legal-overlay.is-open { display: block; }
.legal-overlay-bg { position: absolute; inset: 0; background: rgba(var(--navy-rgb), .7); }
.legal-overlay-box { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--white); overflow: hidden; animation: fadeIn .25s var(--ease); }
.legal-overlay-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); background: var(--white); }
.legal-overlay-title { flex: 1; text-align: center; font-family: var(--font-title); font-weight: 500; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal-btn { border: 0; cursor: pointer; font-family: inherit; transition: background .2s, color .2s; }
.legal-back { height: 38px; padding: 0 16px; border-radius: var(--radius); background: var(--blue-soft); color: var(--blue-hover); font-weight: 600; font-size: 14px; }
.legal-back:hover { background: var(--blue-hover); color: var(--white); }
.legal-close { width: 40px; height: 40px; border-radius: var(--radius); background: var(--bg-soft); color: var(--text); font-size: 28px; line-height: 1; padding: 0 0 4px; }
.legal-close:hover { background: var(--blue-hover); color: var(--white); }
.legal-overlay-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--white); }
html.legal-open, html.legal-open body { overflow: hidden; }
@media (min-width: 640px) {
  .legal-overlay-box { inset: 3vh 4vw; border-radius: var(--radius); }
  .legal-overlay-bar { height: 60px; padding: 0 14px 0 16px; }
}
@media (min-width: 1024px) { .legal-overlay-box { top: 5vh; bottom: 5vh; left: 0; right: 0; margin: 0 auto; width: min(920px, 88vw); } }
.is-embed .crumbs { display: none; }
.is-embed .hero-light { padding: 20px 0 18px; }
.is-embed .hero-light h1 { font-size: 24px; }
.is-embed .page-toc { display: none; }  /* fenêtre des mentions : pas de sommaire (liens vers la fenêtre principale) */
.is-embed .section { padding: 20px 0 28px; }
html.in-frame .topbar, html.in-frame .site-header, html.in-frame .site-footer, html.in-frame .sub-footer, html.in-frame .offcanvas, html.in-frame .modal, html.in-frame .to-top, html.in-frame .skip-link, html.in-frame .crumbs { display: none !important; }

/* Mentions légales */
.legal h2 { font-size: 21px; margin: 28px 0 10px; padding-top: 20px; border-top: 1px solid var(--line); }
html.embed { scroll-padding-top: 12px; }
a[href^="mailto:"], .email-addr { white-space: nowrap; }
.legal h2:first-child, .legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal p, .legal li { font-size: 15px; color: var(--text-2); }
.placeholder { background: var(--warn-bg); color: var(--warn-text); padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Page 404
   -------------------------------------------------------------------------- */
.error-code { font-family: var(--font-title); font-size: 64px; font-weight: 600; line-height: 1; color: var(--sky); margin: 0 0 8px; }
.error-cards { margin-top: 8px; }
.error-cards .card-wide-icon > .card-body, .error-cards .card-wide-icon > .card-body { padding: 20px 20px 20px 84px; }  /* icône à gauche à toutes les largeurs (cartes courtes) */
.error-cards .card-wide-icon > .card-icon { left: 20px; top: 20px; width: 46px; height: 46px; }
@media (min-width: 640px) { .error-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .error-cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .error-code { font-size: 88px; } }

/* --------------------------------------------------------------------------
   Accessibilité : réduction des animations, impression
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}
@media print {
  .topbar, .site-header, .site-footer, .sub-footer, .offcanvas, .modal, .to-top, .skip-link, .page-loader, .slider-nav, .slider-dots, .hero-video-toggle, .crumbs { display: none !important; }
  body { color: var(--text); }
  .hero, .hero-page { background: none; color: var(--text); height: auto; min-height: 0; max-height: none; }
  .slide { position: relative; opacity: 1; visibility: visible; }
  .caption, .hero-page-title, .hero-page-sup, .hero-page-sub, .caption-title, .caption-sub { color: var(--text); text-shadow: none; position: static; transform: none; }
  .acc-body { max-height: none !important; visibility: visible !important; }
  .section { padding: 16px 0; }
}