/* ==========================================================================
   Polices auto-hébergées — servies depuis notre propre domaine.
   Aucun appel à Google Fonts : aucune donnée visiteur ne part vers un tiers.
   Licence SIL Open Font License 1.1 (Outfit, Inter) — redistribution autorisée.

   Le navigateur ne télécharge que les sous-ensembles réellement utilisés :
   en français, seul « latin » est chargé dans l'immense majorité des cas.
   ========================================================================== */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/outfit-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/outfit-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/outfit-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/outfit-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Polyclinique de Poitiers Internationale — Design system
   --------------------------------------------------------------------------
   Charte reprise des supports officiels (logo, flyer A4, roll-up) :
   • vert profond #009B00 · vert médium #37B030 · vert vif #58C402
   • vert clair #A2D976 · fond gris perle #EBEBEC · texte noir
   • fond ivoire, bandes diagonales douces, tracé ECG, pastilles vertes à coche,
     badges-titres en pilule verte.
   Typographie : Outfit (titres) et Inter (texte), auto-hébergées — voir ci-dessus.
   Aucune ressource tierce n'est chargée (conformité RGPD).
   ========================================================================== */

:root{
  /* ---- Verts de marque (relevés sur les supports officiels) ---- */
  --vert-900:#046b04;
  --vert-800:#0c830b;
  --vert-700:#009b00;
  --vert-600:#199f18;
  --vert-500:#37b030;
  --vert-400:#58c402;
  --vert-300:#7fd44a;
  --vert-200:#a2d976;
  --vert-100:#d2e3d3;
  --vert-50:#eef8ef;

  /* ---- Neutres ---- */
  --noir:#101510;
  --gris-800:#2f3630;
  --gris-700:#4b544d;
  --gris-500:#77807a;
  --gris-300:#c9cdca;
  --gris-200:#e3e4e5;
  --gris-100:#ebebec;
  --gris-50:#f3f3f3;
  --blanc:#ffffff;
  /* Fonds : blancs très légèrement verdis, dans la teinte de la marque.
     Volontairement PAS de beige : une dominante rouge donnait au fond un
     aspect orangé qui jurait avec le vert. */
  --fond:#fcfefc;
  --fond-2:#f1f6f1;

  --alerte:#c8102e;
  --alerte-fond:#fff4f5;

  /* ---- Typographie ---- */
  --font-titre:'Outfit',"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-texte:'Inter',"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* ---- Mesures ---- */
  --max:1200px;
  --radius:20px;
  --radius-sm:12px;
  --ombre:0 2px 10px rgba(16,44,16,.06);
  --ombre-md:0 10px 28px rgba(16,44,16,.10);
  --ombre-lg:0 20px 52px rgba(16,44,16,.16);
  --ombre-pilule:0 4px 14px rgba(0,155,0,.28);
  --transition:180ms ease;

  /* ---- Motif de fond : trame de points fine + halos diffus ----
     Remplace les bandes diagonales du flyer, trop répétitives à l'écran. */
  --trame:radial-gradient(circle at center,rgba(12,131,11,.16) 1.1px,transparent 1.1px);
  --trame-pas:22px 22px;
}

/* --------------------------------------------------------------- Reset -- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-texte);
  font-size:1.09rem;
  line-height:1.68;
  color:var(--noir);
  background:var(--fond);
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert-800);text-underline-offset:3px}
a:hover{color:var(--vert-600)}
h1,h2,h3,h4{
  font-family:var(--font-titre);font-weight:700;line-height:1.12;
  color:var(--noir);margin:0 0 .6em
}
h1{font-size:clamp(2.4rem,1.5rem + 3.4vw,4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.8rem);letter-spacing:-.025em}
h3{font-size:1.26rem;letter-spacing:-.015em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:700}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--vert-900);color:#fff;padding:.9rem 1.4rem;font-weight:600
}
.skip-link:focus{left:0}

.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
}

/* -------------------------------------------------------------- Layout -- */
.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
.section{padding:clamp(3rem,6vw,5.5rem) 0;position:relative}
.section--gris{background:var(--fond-2)}
.section--bandes{
  background-color:var(--fond);
  background-image:
    radial-gradient(ellipse 70% 50% at 8% 0%,rgba(162,217,118,.22),transparent 62%),
    radial-gradient(ellipse 60% 55% at 95% 100%,rgba(88,196,2,.14),transparent 60%),
    var(--trame);
  background-size:auto,auto,var(--trame-pas);
  position:relative
}
/* Fondu haut et bas : la section se raccorde sans couture au fond de page */
.section--bandes::before,
.section--bandes::after{
  content:"";position:absolute;left:0;right:0;height:70px;pointer-events:none
}
.section--bandes::before{top:0;background:linear-gradient(to bottom,var(--fond),transparent)}
.section--bandes::after{bottom:0;background:linear-gradient(to top,var(--fond),transparent)}
.section--bandes > *{position:relative;z-index:1}
.section--vert{background:linear-gradient(135deg,var(--vert-900) 0%,var(--vert-900) 40%,var(--vert-800) 130%);color:#fff}
.section--vert h2,.section--vert h3{color:#fff}
.section__intro{max-width:62ch;margin-bottom:2.5rem}
.section__intro p{color:var(--gris-700);font-size:1.125rem}
.section--vert .section__intro p{color:#fff}

.grid{display:grid;gap:1.5rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}

/* ------------------------------------------- Badge-titre (style flyer) -- */
/* Pilule verte à coin arrondi, cernée de blanc — reprise de « Nos spécialités » */
.badge-titre{
  display:inline-block;
  background:linear-gradient(180deg,var(--vert-800),var(--vert-900));
  color:#fff;font-family:var(--font-titre);font-weight:700;
  font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);
  padding:.5rem 1.4rem;border-radius:12px;
  border:3px solid #fff;box-shadow:var(--ombre-pilule);
  margin-bottom:1.4rem;letter-spacing:-.01em
}
.badge-titre--clair{
  background:#fff;color:var(--vert-800);border-color:var(--vert-500);
  box-shadow:0 4px 14px rgba(0,155,0,.16)
}

.eyebrow{
  display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vert-800);margin-bottom:.75rem
}
.section--vert .eyebrow{color:#f0fce9}

/* ------------------------------------------------------------- Boutons -- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.7rem;border-radius:999px;border:2px solid transparent;
  font-family:var(--font-titre);font-size:1rem;font-weight:700;
  text-decoration:none;cursor:pointer;transition:var(--transition)
}
.btn--primaire{background:var(--vert-800);color:#fff}
.btn--primaire:hover{background:var(--vert-900);color:#fff;transform:translateY(-2px);box-shadow:var(--ombre-pilule)}
.btn--secondaire{background:#fff;color:var(--vert-800);border-color:var(--vert-200)}
.btn--secondaire:hover{background:var(--vert-50);color:var(--vert-800);border-color:var(--vert-500)}
.btn--blanc{background:#fff;color:var(--vert-800)}
.btn--blanc:hover{background:var(--vert-50);color:var(--vert-900);transform:translateY(-2px)}
.btn--fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--fantome:hover{background:rgba(255,255,255,.15);color:#fff;border-color:#fff}

/* -------------------------------------------------------------- Header -- */
.topbar{background:var(--vert-800);color:rgba(255,255,255,.94);font-size:.875rem}
.topbar__in{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:flex-end;min-height:42px}
.topbar a{color:rgba(255,255,255,.94);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar__slogan{margin-right:auto;font-style:italic;color:rgba(255,255,255,.8)}

.header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:var(--ombre)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:92px}

.logo{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.logo img{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.logo__txt{display:flex;flex-direction:column;line-height:1.1}
.logo__nom{font-family:var(--font-titre);font-size:1.16rem;font-weight:700;color:var(--vert-800);letter-spacing:-.02em}
.logo__ville{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-500);font-weight:600}

.nav{display:flex;align-items:center}
.nav>ul{
  display:flex;gap:.1rem;list-style:none;margin:0;padding:.3rem;
  background:var(--fond-2);border-radius:999px
}
.nav__item{position:relative;margin:0}
.nav__lien{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.55rem .72rem;border-radius:999px;
  font-family:var(--font-titre);font-size:.9rem;font-weight:600;
  color:var(--noir);text-decoration:none;white-space:nowrap;transition:var(--transition)
}
.nav__lien:hover,.nav__item:hover>.nav__lien{background:#fff;color:var(--vert-800);box-shadow:var(--ombre)}
.nav__lien[aria-current="page"]{background:var(--vert-800);color:#fff}
.nav__chevron{width:11px;height:11px;transition:transform var(--transition)}
.nav__item:hover .nav__chevron{transform:rotate(180deg)}

.sousmenu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:300px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--ombre-lg);
  padding:.6rem;list-style:none;margin:0;border-top:4px solid var(--vert-500);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--transition)
}
.nav__item:hover .sousmenu,.nav__item:focus-within .sousmenu{opacity:1;visibility:visible;transform:translateY(0)}
.sousmenu li{margin:0}
.sousmenu a{display:block;padding:.6rem .85rem;border-radius:var(--radius-sm);color:var(--noir);text-decoration:none;font-size:.94rem}
.sousmenu a:hover{background:var(--vert-50);color:var(--vert-800)}
.sousmenu strong{display:block;font-family:var(--font-titre);font-size:.95rem}
.sousmenu span{display:block;font-size:.82rem;color:var(--gris-500);line-height:1.4}

.header__actions{display:flex;align-items:center;gap:.75rem}

.burger{display:none;background:none;border:0;padding:.55rem;cursor:pointer;color:var(--vert-800);border-radius:var(--radius-sm)}
.burger:hover{background:var(--vert-50)}

/* ---------------------------------------------------------------- Hero -- */
/* Photo plein cadre, voile vert sombre, texte en blanc par-dessus. */
.hero{position:relative;overflow:hidden;background:var(--vert-900);isolation:isolate}
.hero__fond{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;z-index:-2
}
.hero__voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(105deg,rgba(4,34,4,.94) 0%,rgba(4,34,4,.82) 42%,rgba(4,34,4,.35) 78%,rgba(4,34,4,.2) 100%),
    linear-gradient(to top,rgba(4,34,4,.6),transparent 45%)
}
.hero__in{
  position:relative;z-index:1;
  min-height:clamp(30rem,62vh,40rem);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3.5rem,7vw,6rem) 0;max-width:min(100% - 2.5rem,var(--max));margin-inline:auto
}
.hero__texte{max-width:38rem}
.hero__surtitre{
  display:inline-block;font-size:.85rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:#a2d976;margin-bottom:1.1rem
}
.hero h1{color:#fff;margin-bottom:1.1rem;text-wrap:balance}
.hero h1 .accent{color:#a2d976}
.hero__accroche{
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem);font-weight:600;
  color:rgba(255,255,255,.94);max-width:34ch;margin-bottom:1.6rem
}
.hero .liste-fleche li{color:#fff;font-size:1.02rem}
.hero .liste-fleche li::before{border-color:#a2d976}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem}

/* Tracé électrocardiogramme décoratif */
.ecg{position:absolute;top:8%;left:0;width:100%;height:110px;z-index:0;opacity:.28;pointer-events:none}
.ecg path{fill:none;stroke:#a2d976;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* -------------------------------------------------------- Accès rapides -- */
.acces{background:transparent;position:relative;z-index:5;margin-top:-3.25rem}
.acces__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--gris-200);
  border-radius:20px;overflow:hidden;box-shadow:var(--ombre-lg)
}
.acces__item{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;
  background:#fff;padding:1.75rem 1.1rem;text-decoration:none;color:var(--noir);
  font-family:var(--font-titre);font-weight:700;font-size:.98rem;transition:var(--transition)
}
.acces__item:hover{background:var(--vert-50);color:var(--vert-800)}
.acces__item svg{color:var(--vert-500)}
.acces__item:hover svg{color:var(--vert-700)}
.acces__item small{display:block;font-family:var(--font-texte);font-weight:400;font-size:.82rem;color:var(--gris-500)}

/* -------------------------------------------------------------- Cartes -- */
.carte{
  background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);
  padding:1.8rem;transition:var(--transition);height:100%;display:flex;flex-direction:column;
  position:relative;overflow:hidden
}
.carte::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:4px;
  background:linear-gradient(180deg,var(--vert-400),var(--vert-700));
  transform:scaleY(0);transform-origin:top;transition:transform var(--transition)
}
.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-md);border-color:var(--vert-100)}
.carte:hover::after{transform:scaleY(1)}
.carte__icone{
  width:54px;height:54px;border-radius:14px;background:var(--vert-50);
  color:var(--vert-700);display:grid;place-items:center;margin-bottom:1.15rem;flex-shrink:0;
  border:1px solid var(--vert-100)
}
.carte h3{margin-bottom:.45rem}
.carte p{color:var(--gris-700);font-size:.98rem;flex-grow:1;margin-bottom:.8rem}
.carte__lien{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;
  font-family:var(--font-titre);font-weight:700;font-size:.95rem;
  color:var(--vert-800);text-decoration:none;transition:var(--transition)
}
.carte__lien:hover{gap:.7rem;color:var(--vert-900)}
.carte--lien{text-decoration:none;color:inherit}

/* Carte compacte de spécialité (grille dense) */
.spe{
  display:flex;gap:.9rem;align-items:flex-start;
  background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);
  padding:1.25rem 1.35rem;transition:var(--transition);height:100%
}
.spe:hover{border-color:var(--vert-300);box-shadow:var(--ombre-md);transform:translateY(-3px)}
.spe__ico{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--vert-50);color:var(--vert-700);
  display:grid;place-items:center;border:1px solid var(--vert-100)
}
.spe h3{font-size:1.05rem;margin-bottom:.25rem}
.spe p{font-size:.93rem;color:var(--gris-700);margin:0}

/* -------------------------------------------------------- Chiffres clés -- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;text-align:center}
.chiffre__val{
  font-family:var(--font-titre);font-size:clamp(2.4rem,1.8rem + 2.2vw,3.4rem);
  font-weight:700;line-height:1;color:var(--vert-700);display:block
}
.section--vert .chiffre__val{color:#fff}
.chiffre__lib{font-size:.98rem;color:var(--gris-700);margin-top:.5rem;display:block}
.section--vert .chiffre__lib{color:#fff}

/* ------------------------------------------------- Listes à coche verte -- */
/* Reprise exacte des puces du flyer : cercle vert plein + coche blanche */
.liste-check{list-style:none;padding:0}
.liste-check li{position:relative;padding-left:2.15rem;margin-bottom:.7rem}
.liste-check li::before{
  content:"";position:absolute;left:0;top:.34em;width:1.35rem;height:1.35rem;
  border-radius:50%;background:var(--vert-800)
}
.liste-check li::after{
  content:"";position:absolute;left:.42rem;top:.62em;width:.48rem;height:.24rem;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)
}
.liste-check--clair li::before{background:#fff}
.liste-check--clair li::after{border-color:var(--vert-700)}

/* Flèche courbe du flyer (« Nous vous offrons ») */
.liste-fleche{list-style:none;padding:0}
.liste-fleche li{position:relative;padding-left:2.3rem;margin-bottom:.8rem;font-size:1.06rem;font-weight:600}
.liste-fleche li::before{
  content:"";position:absolute;left:.15rem;top:.15em;width:1.1rem;height:1.1rem;
  border-right:3px solid var(--vert-500);border-bottom:3px solid var(--vert-500);
  border-bottom-right-radius:6px;transform:rotate(-45deg)
}

.pastilles{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0}
.pastilles li{margin:0}
.pastilles a,.pastilles span{
  display:inline-block;padding:.5rem 1.1rem;border-radius:999px;
  background:#fff;border:1px solid var(--vert-200);
  font-size:.92rem;font-weight:600;color:var(--vert-800);text-decoration:none;transition:var(--transition)
}
.pastilles a:hover{background:var(--vert-800);color:#fff;border-color:var(--vert-800)}

/* ------------------------------------------------------ Étapes/parcours -- */
.etapes{list-style:none;padding:0;counter-reset:etape;margin:0}
.etapes>li{position:relative;padding:0 0 2.2rem 4.2rem;counter-increment:etape;margin:0}
.etapes>li::before{
  content:counter(etape);position:absolute;left:0;top:0;
  width:2.7rem;height:2.7rem;border-radius:50%;
  background:var(--vert-800);color:#fff;display:grid;place-items:center;
  font-family:var(--font-titre);font-weight:700;font-size:1.15rem
}
.etapes>li::after{content:"";position:absolute;left:1.34rem;top:2.9rem;bottom:.4rem;width:2px;background:var(--vert-100)}
.etapes>li:last-child{padding-bottom:0}
.etapes>li:last-child::after{display:none}
.etapes h3{margin-bottom:.35rem}
.etapes p{color:var(--gris-700);margin-bottom:.5rem}

/* ---------------------------------------------------------- Fil d’Ariane */
.ariane{background:var(--gris-50);border-bottom:1px solid var(--gris-200);font-size:.9rem}
.ariane ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:.9rem 0;margin:0}
.ariane li{display:flex;align-items:center;gap:.5rem;margin:0;color:var(--gris-500)}
.ariane li+li::before{content:"\203A";color:var(--gris-300)}
.ariane a{color:var(--vert-800);text-decoration:none}
.ariane a:hover{text-decoration:underline}

/* ------------------------------------------------------ En-tête de page -- */
.pagehead{
  background-color:var(--fond);
  background-image:
    radial-gradient(ellipse 60% 85% at 92% 0%,rgba(162,217,118,.26),transparent 65%),
    var(--trame);
  background-size:auto,var(--trame-pas);
  padding:clamp(2.6rem,5vw,4.2rem) 0;border-bottom:4px solid var(--vert-500);position:relative;overflow:hidden
}
.pagehead::before{
  content:"";position:absolute;right:-6%;top:-40%;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(162,217,118,.35),transparent 68%)
}
.pagehead>*{position:relative;z-index:1}
.pagehead h1{margin-bottom:.6rem}
.pagehead p{font-size:1.15rem;color:var(--gris-700);max-width:65ch;margin:0}

/* ------------------------------------------------------------ Actualités */
.actu{background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:var(--transition)}
.actu:hover{transform:translateY(-4px);box-shadow:var(--ombre-md)}
.actu__media{aspect-ratio:16/9;background:var(--vert-50);display:grid;place-items:center;color:var(--vert-400)}
.actu__corps{padding:1.5rem;display:flex;flex-direction:column;flex-grow:1}
.actu__date{font-size:.83rem;color:var(--vert-800);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:.45rem}
.actu h3{font-size:1.1rem;margin-bottom:.45rem}
.actu p{font-size:.95rem;color:var(--gris-700);flex-grow:1;margin-bottom:.6rem}

/* -------------------------------------------------------------- Annuaire */
.filtres{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;background:var(--vert-50);padding:1.5rem;border-radius:var(--radius);margin-bottom:2.5rem;border:1px solid var(--vert-100)}
.champ{
  display:flex;flex-direction:column;gap:.4rem;flex:1 1 220px;
  /* Sans min-width:0, un élément flex ne rétrécit pas sous la largeur de son
     contenu : le texte « Toutes les spécialités (54 praticiens) » imposait sa
     largeur au menu déroulant, qui débordait sur les petits téléphones. */
  min-width:0
}
.champ label{font-family:var(--font-titre);font-size:.9rem;font-weight:700;color:var(--noir)}
.champ input,.champ select,.champ textarea{
  width:100%;max-width:100%;
  font-family:inherit;font-size:1rem;padding:.75rem .95rem;
  border:1px solid var(--gris-300);border-radius:var(--radius-sm);background:#fff;color:var(--noir)
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--vert-600);outline:2px solid var(--vert-100)}
.champ textarea{min-height:150px;resize:vertical}
.champ__aide{font-size:.85rem;color:var(--gris-500)}

.praticien{background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);padding:1.5rem;display:flex;gap:1.1rem;align-items:flex-start;transition:var(--transition)}
.praticien:hover{box-shadow:var(--ombre-md);border-color:var(--vert-100)}
.praticien__avatar{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:var(--vert-50);color:var(--vert-700);border:2px solid var(--vert-200);
  display:grid;place-items:center;font-family:var(--font-titre);font-weight:700;font-size:1.1rem
}
.praticien h3{font-size:1.05rem;margin-bottom:.2rem}
.praticien__spe{color:var(--vert-800);font-weight:700;font-size:.9rem;margin-bottom:.5rem}
.praticien__meta{font-size:.9rem;color:var(--gris-700);margin:0}

/* ---------------------------------------------------------------- Encart */
.encart{background:var(--vert-50);border-left:4px solid var(--vert-500);border-radius:var(--radius-sm);padding:1.5rem 1.75rem;margin:1.5rem 0}
.encart h3{margin-bottom:.5rem;font-size:1.1rem;color:var(--vert-800)}
.encart p:last-child,.encart ul:last-child{margin-bottom:0}
.encart.encart--alerte{background:var(--alerte-fond);border-left-color:var(--alerte)}
.encart.encart--alerte h3{color:var(--alerte)}
/* Encart « information à fournir » : volontairement neutre, hors palette de marque,
   pour se distinguer sans introduire de couleur étrangère à la charte. */
.encart.encart--info{background:var(--gris-50);border-left-color:var(--gris-500)}
.encart.encart--info h3{color:var(--gris-800)}

/* --------------------------------------------------------------- Contenu */
.contenu{max-width:78ch}
.contenu h2{margin-top:2.6rem}
.contenu h2:first-child{margin-top:0}
.contenu h3{margin-top:1.9rem;color:var(--vert-800)}

/* ------------------------------------------------------------- Accordéon */
.accordeon{border:1px solid var(--gris-200);border-radius:var(--radius);overflow:hidden;margin-bottom:.85rem;background:#fff}
.accordeon summary{
  padding:1.15rem 1.5rem;cursor:pointer;font-family:var(--font-titre);font-weight:700;
  color:var(--noir);display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none
}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary::after{content:"+";font-size:1.5rem;color:var(--vert-600);font-weight:400;line-height:1}
.accordeon[open] summary{color:var(--vert-800)}
.accordeon[open] summary::after{content:"\2013"}
.accordeon summary:hover{background:var(--vert-50)}
.accordeon__corps{padding:0 1.5rem 1.4rem;color:var(--gris-700)}
.accordeon__corps p:last-child,.accordeon__corps ul:last-child{margin-bottom:0}

/* --------------------------------------------------------------- Tableau */
.tableau{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.97rem}
.tableau th,.tableau td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--gris-200)}
.tableau th{background:var(--vert-50);font-family:var(--font-titre);color:var(--vert-800);font-weight:700}
.tableau tr:hover td{background:var(--gris-50)}
.tableau-wrap{overflow-x:auto}

/* Panneau de marqueurs (immunohistochimie) */
.marqueurs{background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);padding:1.6rem;height:100%}
.marqueurs h3{display:flex;align-items:center;gap:.6rem;color:var(--vert-900);margin-bottom:.9rem}
.marqueurs h3 span{
  width:38px;height:38px;border-radius:50%;background:var(--vert-50);
  color:var(--vert-700);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--vert-100)
}
.marqueurs ul{list-style:none;padding:0;margin:0;columns:2;column-gap:1.5rem}
.marqueurs li{font-size:.9rem;color:var(--gris-700);padding-left:.95rem;position:relative;break-inside:avoid;margin-bottom:.35rem}
.marqueurs li::before{content:"";position:absolute;left:0;top:.62em;width:.38rem;height:.38rem;border-radius:50%;background:var(--vert-400)}

/* ------------------------------------------------------------------- CTA */
.cta{
  background:linear-gradient(120deg,var(--vert-900),var(--vert-900) 45%,var(--vert-800));
  color:#fff;border-radius:var(--radius);padding:clamp(2.2rem,4vw,3.5rem);text-align:center;
  position:relative;overflow:hidden
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.18),transparent 55%)
}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{color:#fff;max-width:60ch;margin-inline:auto;margin-bottom:1.8rem;font-size:1.1rem}
.cta__btns{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* ---------------------------------------------------------------- Footer */
.footer{background:var(--noir);color:rgba(255,255,255,.75);padding-top:4rem;font-size:.95rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
.footer h3{color:#fff;font-size:1rem;margin-bottom:1.1rem}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.6rem}
.footer a{color:rgba(255,255,255,.75);text-decoration:none}
.footer a:hover{color:var(--vert-300);text-decoration:underline}
.footer__logo{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.footer__logo img{width:62px;height:62px;object-fit:contain}
.footer__slogan{color:var(--vert-300);font-style:italic;margin-bottom:1.2rem}
.footer__coord{list-style:none;padding:0}
.footer__coord li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.85rem}
.footer__coord svg{flex-shrink:0;margin-top:.2rem;color:var(--vert-400)}
.footer__bas{
  border-top:1px solid rgba(255,255,255,.14);padding:1.5rem 0;
  display:flex;flex-wrap:wrap;gap:1rem 1.75rem;justify-content:space-between;align-items:center;font-size:.88rem
}
.footer__legal{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;padding:0;margin:0}
.footer__legal li{margin:0}

/* ----------------------------------------------------------- Menu mobile */
.navmobile{
  position:fixed;inset:0;z-index:200;background:#fff;
  padding:1.25rem;overflow-y:auto;
  transform:translateX(100%);transition:transform 240ms ease;visibility:hidden
}
.navmobile[data-ouvert="true"]{transform:translateX(0);visibility:visible}
.navmobile__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.navmobile ul{list-style:none;padding:0;margin:0}
.navmobile>ul>li{border-bottom:1px solid var(--gris-200)}
.navmobile a{display:block;padding:.95rem .3rem;color:var(--noir);text-decoration:none;font-family:var(--font-titre);font-weight:700}
.navmobile ul ul a{font-weight:400;font-size:.95rem;padding-left:1.5rem;color:var(--gris-700)}
.navmobile__ctas{display:flex;flex-direction:column;gap:.75rem;margin-top:1.75rem}
.navmobile__ctas .btn{justify-content:center}

/* ------------------------------------------------------------ Responsive */
/* Le rail flotte dans la marge : il ne s'affiche que si celle-ci est assez large
   (viewport - contenu 1200px)/2 > 64px, soit a partir de 1400px. */
@media (max-width:1399px){
  .rail{display:none}
}
@media (max-width:1279px){
  .nav{display:none}
  .burger{display:block}
  .footer__grid{grid-template-columns:1fr 1fr}
  .marqueurs ul{columns:1}
}
@media (max-width:640px){
  body{font-size:1rem}
  .topbar__in{justify-content:center;font-size:.82rem}
  .topbar__slogan{display:none}
  .acces{margin-top:0}
  .acces__grid{border-radius:0}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .footer__bas{flex-direction:column;text-align:center}
  .header__actions .btn{display:none}
  .praticien{flex-direction:column}
  .logo img{width:52px;height:52px}
  .ecg{display:none}
}

@media print{
  .topbar,.header,.footer,.acces,.burger,.cta,.navmobile,.ecg{display:none}
  body{font-size:11pt;color:#000}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* --------------------------------------------------- Bandeau urgences -- */
.urgences-bandeau{
  background:var(--alerte);color:#fff;border-radius:var(--radius);
  padding:2.2rem 2.4rem;display:flex;flex-wrap:wrap;align-items:center;
  gap:1.5rem;justify-content:space-between
}
.urgences-bandeau h2{color:#fff;margin:0 0 .35rem;font-size:1.6rem}
.urgences-bandeau p{margin:0;color:rgba(255,255,255,.95)}
.urgences-bandeau__tels{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.urgences-bandeau__tel{
  font-family:var(--font-titre);font-size:1.7rem;font-weight:700;
  white-space:nowrap;color:#fff;text-decoration:none
}
.urgences-bandeau__tel:hover{color:#fff;text-decoration:underline}

/* Lien Urgences mis en avant dans la barre supérieure */
.topbar__urgence{
  background:var(--alerte);color:#fff !important;padding:.28rem .95rem;
  border-radius:999px;font-weight:700
}
.topbar__urgence:hover{background:#9c0c23;text-decoration:none !important}

/* Accès rapide « Urgences » distingué en rouge */
.acces__item--urgence svg{color:var(--alerte) !important}
.acces__item--urgence:hover{background:var(--alerte-fond);color:var(--alerte) !important}

@media (max-width:640px){
  .urgences-bandeau{flex-direction:column;align-items:flex-start;padding:1.7rem}
  .urgences-bandeau__tel{font-size:1.45rem}
}

/* ------------------------------------------------- Annuaire par spécialité -- */
.annuaire__groupe{margin-bottom:3rem;scroll-margin-top:120px}
.annuaire__groupe:last-child{margin-bottom:0}
.annuaire__titre{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  font-size:1.3rem;color:var(--vert-900);
  padding-bottom:.7rem;margin-bottom:1.5rem;
  border-bottom:2px solid var(--vert-100)
}
.annuaire__compte{
  font-family:var(--font-texte);font-size:.85rem;font-weight:600;
  color:var(--vert-800);background:var(--vert-50);
  border:1px solid var(--vert-100);border-radius:999px;padding:.15rem .8rem
}

/* ------------------------------------------------------ Direction médicale -- */
.direction{margin-bottom:3.5rem}
.direction__carte{
  display:flex;gap:1.2rem;align-items:flex-start;
  background:linear-gradient(135deg,var(--vert-50),#fff 70%);
  border:1px solid var(--vert-200);border-left:5px solid var(--vert-700);
  border-radius:var(--radius);padding:1.8rem
}
.direction__avatar{
  width:66px;height:66px;border-radius:50%;flex-shrink:0;
  background:var(--vert-800);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-titre);font-weight:700;font-size:1.3rem
}
.direction__fonction{
  display:inline-block;background:var(--vert-800);color:#fff;
  font-family:var(--font-titre);font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.22rem .8rem;border-radius:999px;margin:0 0 .55rem
}
.direction__carte h3{font-size:1.25rem;margin-bottom:.25rem}
.direction__texte{font-size:.95rem;color:var(--gris-700);margin:.7rem 0 0}

/* Rappel discret de la fonction dans la fiche de l’annuaire */
.praticien--direction{border-left:4px solid var(--vert-700)}
.praticien__fonction{
  font-family:var(--font-titre);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--vert-800);margin:0 0 .2rem
}

@media (max-width:640px){
  .direction__carte{flex-direction:column}
}



/* -------------------------------------------------- Visuel principal (hero) */
.hero__visuel{
  position:relative;margin:0;
  border-radius:var(--radius);overflow:hidden;
  border:6px solid #fff;box-shadow:var(--ombre-lg)
}
.hero__visuel img{
  width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/11
}
.hero__cartouche{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(4,34,4,.92),rgba(4,34,4,.55) 60%,transparent);
  color:#fff;padding:2.4rem 1.3rem 1.1rem;
  display:flex;flex-direction:column;gap:.1rem
}
.hero__cartouche strong{
  font-family:var(--font-titre);font-size:1.05rem;letter-spacing:-.01em
}
.hero__cartouche span{font-size:.9rem;color:#d9f5c9}

/* ------------------------------------------- Illustration contextuelle -- */
.illustration{
  margin:0 0 1.5rem;position:relative;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--gris-200);box-shadow:var(--ombre)
}
.illustration img{
  width:100%;display:block;object-fit:cover;aspect-ratio:16/10
}
.illustration figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(4,34,4,.88),transparent);
  color:#fff;font-family:var(--font-titre);font-weight:600;font-size:.92rem;
  padding:2rem .95rem .75rem
}

@media (max-width:640px){
  .hero__visuel img{aspect-ratio:4/3}
  .hero__cartouche{padding:1.8rem 1rem .9rem}
}

/* ------------------------------------------ Fiche spécialité enrichie -- */
.spe__corps{flex:1;min-width:0}
.spe__soustitre{
  font-size:.88rem;color:var(--vert-800);font-weight:600;
  margin:0 0 .5rem;font-style:italic
}
.spe__actes{
  margin-top:.9rem;border-top:1px solid var(--gris-200);padding-top:.8rem
}
.spe__actes summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-titre);font-weight:700;font-size:.9rem;
  color:var(--vert-800);display:flex;align-items:center;gap:.4rem
}
.spe__actes summary::-webkit-details-marker{display:none}
.spe__actes summary::before{
  content:"";width:.5rem;height:.5rem;flex-shrink:0;
  border-right:2px solid var(--vert-700);border-bottom:2px solid var(--vert-700);
  transform:rotate(-45deg);transition:transform var(--transition)
}
.spe__actes[open] summary::before{transform:rotate(45deg)}
.spe__actes summary span{font-weight:400;color:var(--gris-500)}
.spe__actes summary:hover{color:var(--vert-900)}
.spe__actes ul{margin:.9rem 0 0}
.spe__actes li{font-size:.92rem;margin-bottom:.5rem}

/* -------------------------------------- Rail vertical d’accès rapides -- */
.rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;
  background:var(--vert-900);border-radius:14px 0 0 14px;
  box-shadow:var(--ombre-lg);overflow:hidden
}
.rail a{
  display:grid;place-items:center;gap:.2rem;
  width:64px;padding:.85rem .5rem;
  color:#fff;text-decoration:none;transition:var(--transition);
  border-bottom:1px solid rgba(255,255,255,.12)
}
.rail a:last-child{border-bottom:0}
.rail a:hover,.rail a:focus-visible{background:var(--vert-700);color:#fff}
.rail a span{
  font-family:var(--font-titre);font-size:.62rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;line-height:1.2
}
.rail .rail--urgence{background:var(--alerte)}
.rail .rail--urgence:hover{background:var(--urgence-dark,#9c0c23)}

/* Bouton de contact direct WhatsApp */
.whatsapp{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:95;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:var(--transition)
}
.whatsapp:hover{transform:scale(1.07);color:#fff}


@media (max-width:640px){
  .whatsapp{width:52px;height:52px;right:.9rem;bottom:.9rem}
}
@media print{
  .rail,.whatsapp{display:none}
}

/* ==========================================================================
   Ajustements d'encombrement — placés en fin de feuille pour primer sur les
   définitions précédentes.
   ========================================================================== */

/* Le rail flotte dans la marge latérale. Il ne s'affiche que lorsque celle-ci
   est plus large que lui : (viewport - 1200px de contenu) / 2 > 64px. */
@media (max-width:1399px){
  .rail{display:none}
}

/* En dessous de 1400px, l'en-tête ne peut pas porter à la fois le logo, la
   navigation complète et le bouton d'action sans se tasser. Le rendez-vous
   reste accessible par la barre supérieure, le menu et le rail. */
@media (max-width:1399px){
  .header__actions .btn{display:none}
}

/* ==========================================================================
   Mouvement : apparition au défilement et en-tête compact
   ========================================================================== */

/* L'état initial n'est appliqué que si le script a pu marquer les éléments :
   sans JavaScript, rien n'est masqué. */
.apparait{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)
}
.apparait--visible{opacity:1;transform:none}

/* En-tête : se resserre et se détache dès que l'on descend */
.header{transition:box-shadow var(--transition),background var(--transition)}
.header__in{transition:min-height 220ms ease}
.header--compact{box-shadow:0 6px 24px rgba(16,44,16,.13)}
.header--compact .header__in{min-height:70px}
.header--compact .logo img{width:50px;height:50px;transition:width 220ms ease,height 220ms ease}
.logo img{transition:width 220ms ease,height 220ms ease}

/* Chiffres clés */
.chiffres-cles{padding-block:clamp(2.6rem,4vw,3.6rem)}
.chiffre__unite{font-size:.5em;font-weight:700;letter-spacing:-.02em}
.chiffres>div{padding:0 .5rem}

@media (prefers-reduced-motion:reduce){
  .apparait{opacity:1;transform:none;transition:none}
}

/* Toute cible d'ancre doit s'arrêter SOUS l'en-tête collant, sinon son titre
   se retrouve masqué : le site compte de nombreuses ancres (spécialités,
   annuaire, plan du site). */
[id]{scroll-margin-top:100px}

/* ==========================================================================
   Corrections d'encombrement de l'en-tête et du rail
   ========================================================================== */

/* Un libellé de bouton ne doit jamais se replier : il se déformait en cercle
   lorsque la place manquait. */
.btn{white-space:nowrap}

/* Le bouton d'action quitte la barre de navigation — logo + menu y suffisaient
   à peine — et rejoint la barre supérieure, où la place est disponible. */
.topbar__rdv{
  background:#fff;color:var(--vert-800) !important;
  padding:.3rem 1rem;border-radius:999px;font-weight:700;
  transition:var(--transition)
}
.topbar__rdv:hover{background:var(--vert-50);text-decoration:none !important}

/* La règle qui masquait le bouton de l'en-tête n'a plus d'objet. */
.header__actions{gap:0}

/* Le rail est haut d'environ 400 px : sur une fenêtre courte il venait toucher
   la barre supérieure. On le compacte, puis on le retire s'il ne tient plus. */
@media (max-height:820px){
  .rail a{padding:.6rem .5rem}
  .rail a span{font-size:.58rem}
  .rail a svg{width:22px;height:22px}
}
@media (max-height:700px){
  .rail{display:none}
}

/* ==========================================================================
   En-tête fondu dans le hero
   --------------------------------------------------------------------------
   Sur l'accueil, la barre de navigation est posée directement sur la photo,
   sans fond. Dès que l'on descend, elle reprend un fond opaque pour rester
   lisible sur le contenu.
   ========================================================================== */

.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:#fff;box-shadow:var(--ombre)
}

/* Pages intérieures : on réserve la hauteur de l'en-tête fixe. */
.page-interieure{padding-top:104px}

/* Accueil : le hero passe sous l'en-tête transparent. */
.page-accueil .header:not(.header--compact){
  background:transparent;box-shadow:none
}
.page-accueil .header:not(.header--compact) .nav>ul{
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.page-accueil .header:not(.header--compact) .nav__lien{
  color:#fff;text-shadow:0 1px 6px rgba(4,34,4,.5)
}
.page-accueil .header:not(.header--compact) .nav__lien:hover,
.page-accueil .header:not(.header--compact) .nav__item:hover>.nav__lien{
  background:rgba(255,255,255,.22);color:#fff
}
.page-accueil .header:not(.header--compact) .logo__nom{
  color:#fff;text-shadow:0 1px 8px rgba(4,34,4,.55)
}
.page-accueil .header:not(.header--compact) .logo__ville{
  color:#d9f5c9;text-shadow:0 1px 6px rgba(4,34,4,.55)
}
.page-accueil .header:not(.header--compact) .burger{color:#fff}

/* Le hero démarre sous la barre : un dégradé sombre garantit la lisibilité
   du menu quelle que soit la zone de photo qui se trouve dessous. */
.page-accueil .hero{margin-top:0}
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:190px;z-index:0;
  background:linear-gradient(to bottom,rgba(4,34,4,.75),transparent);
  pointer-events:none
}
.page-accueil .hero__in{padding-top:clamp(7rem,11vw,9.5rem)}

/* ------------------------------------------------------ Logo mis en avant */
.logo img{
  width:86px;height:86px;
  filter:drop-shadow(0 2px 6px rgba(4,34,4,.22))
}
.page-accueil .header:not(.header--compact) .logo img{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))
}
.logo__nom{font-size:1.24rem}
.header__in{min-height:104px}
.header--compact .header__in{min-height:76px}
.header--compact .logo img{width:62px;height:62px}

/* ------------------------------------------------ Bouton urgences d'en-tête */
.btn-urgence{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--alerte);color:#fff;text-decoration:none;
  padding:.5rem 1.1rem;border-radius:999px;
  box-shadow:0 4px 14px rgba(200,16,46,.32);transition:var(--transition)
}
.btn-urgence:hover{background:#9c0c23;color:#fff;transform:translateY(-2px)}
.btn-urgence span{
  display:flex;flex-direction:column;line-height:1.1;
  font-family:var(--font-titre);font-weight:700;font-size:.95rem
}
.btn-urgence small{font-size:.72rem;font-weight:600;opacity:.9}

@media (max-width:1279px){
  .btn-urgence span{display:none}
  .btn-urgence{padding:.55rem}
}
@media (max-width:640px){
  .page-interieure{padding-top:88px}
  .logo img{width:58px;height:58px}
  .header__in{min-height:84px}
  .logo__nom{font-size:1.05rem}
}

/* ==========================================================================
   Parcours en étapes numérotées (page d'accueil)
   Quatre cartes reliées par un trait, qui se replient verticalement sur mobile.
   ========================================================================== */
.parcours{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.5rem;position:relative;
  /* Quatre etapes numerotees : on impose 4 / 2 / 1 colonnes plutot que de
     laisser l'auto-fit produire 3 colonnes, qui isolerait l'etape 4. */
  grid-template-columns:repeat(4,1fr)
}
@media (max-width:1000px){
  .parcours{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .parcours{grid-template-columns:1fr}
}

/* Le trait de liaison ne se dessine que sur une seule rangée */
@media (min-width:1000px){
  .parcours::before{
    content:"";position:absolute;top:4px;left:12%;right:12%;height:3px;
    background:linear-gradient(to right,var(--vert-200),var(--vert-400),var(--vert-200));
    z-index:0
  }
}

.parcours__etape{
  position:relative;z-index:1;margin:0;
  background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);
  padding:1.75rem 1.5rem 1.5rem;
  display:flex;flex-direction:column;
  transition:var(--transition)
}
.parcours__etape:hover{
  transform:translateY(-5px);box-shadow:var(--ombre-md);border-color:var(--vert-200)
}
.parcours__num{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--vert-800);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-titre);font-weight:700;font-size:1.45rem;
  margin:-3.1rem 0 1.1rem;
  border:5px solid var(--fond);
  box-shadow:0 4px 12px rgba(4,34,4,.18)
}
.parcours__etape h3{font-size:1.16rem;margin-bottom:.5rem}
.parcours__etape p{font-size:.97rem;color:var(--gris-700);flex-grow:1;margin-bottom:.9rem}
.parcours__etape .carte__lien{margin-top:auto}
.parcours__etape .carte__lien::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius)
}
.parcours__etape:hover{cursor:pointer}
.parcours__etape:focus-within{
  outline:3px solid var(--vert-400);outline-offset:3px
}
/* Le focus visible est porté par la carte : on évite le double contour */
.parcours__etape .carte__lien:focus-visible{outline:none}

/* Marge haute pour loger la pastille qui déborde de la carte */
.parcours{margin-top:3.5rem}

@media (max-width:999px){
  .parcours__num{margin-top:-2.9rem}
}

/* ==========================================================================
   Bâtiment détouré (page L'établissement)
   L'image est détourée sur fond blanc : on la pose donc sur une carte blanche
   pour que le détourage se fonde, plutôt que de laisser un carré blanc sur
   le fond ivoire.
   ========================================================================== */
.batiment{
  margin:0;background:#fff;border-radius:var(--radius);
  border:1px solid var(--gris-200);box-shadow:var(--ombre-md);
  padding:2rem 2rem 1.5rem;
  display:grid;gap:1.25rem;justify-items:center;text-align:center;
  position:relative;overflow:hidden
}
/* Halo vert discret derrière le bâtiment */
.batiment::before{
  content:"";position:absolute;left:50%;top:12%;translate:-50% 0;
  width:min(70%,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(162,217,118,.28),transparent 68%);
  pointer-events:none
}
.batiment img{
  position:relative;width:100%;max-width:620px;height:auto;object-fit:contain
}
.batiment figcaption{position:relative;display:grid;gap:.25rem}
.batiment figcaption strong{
  font-family:var(--font-titre);font-size:1.15rem;color:var(--vert-900)
}
.batiment figcaption span{font-size:.97rem;color:var(--gris-700)}

@media (max-width:640px){
  .batiment{padding:1.25rem 1.25rem 1rem}
}

/* ==========================================================================
   Parcours : illustrations, flèches de progression, fond travaillé
   ========================================================================== */

/* --- Fond géométrique discret, posé derrière la section --- */
.section--motif{position:relative;overflow:hidden;isolation:isolate}
.motif{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  display:block;opacity:.85
}
.motif svg{width:100%;height:100%;display:block}

/* --- Illustration de chaque étape --- */
.parcours__media{
  display:block;margin:0 0 1.1rem;
  background:linear-gradient(160deg,#fff,var(--vert-50));
  border:1px solid var(--vert-100);border-radius:14px;
  padding:.5rem
}
.parcours__illu{width:100%;height:auto;display:block;aspect-ratio:4/3}

/* --- Flèche de progression entre deux étapes --- */
.parcours__fleche{
  position:absolute;top:50%;right:-1.05rem;translate:0 -50%;
  z-index:2;width:34px;height:34px;border-radius:50%;
  background:#fff;border:2px solid var(--vert-200);
  display:grid;place-items:center;color:var(--vert-800);
  box-shadow:0 3px 10px rgba(4,34,4,.12)
}
.parcours__fleche svg{width:17px;height:17px}

/* Sur une seule rangée, la flèche pointe vers la droite ; empilé, vers le bas */
@media (max-width:1000px){
  .parcours__fleche{
    top:auto;bottom:-1.05rem;right:50%;translate:50% 0;rotate:90deg
  }
}
/* La dernière carte de chaque rangée n'a pas de flèche sortante */
@media (min-width:561px) and (max-width:1000px){
  .parcours__etape:nth-child(2n) .parcours__fleche{display:none}
}

@media (prefers-reduced-motion:no-preference){
  .parcours__etape:hover .parcours__fleche{
    background:var(--vert-800);border-color:var(--vert-800);color:#fff
  }
}

/* ==========================================================================
   Spécialités groupées par famille (page d'accueil)
   Un mur de 31 pastilles identiques était illisible : on rétablit la
   hiérarchie que portent déjà les données.
   ========================================================================== */
.familles{display:grid;gap:2.25rem}

.famille__titre{
  display:flex;align-items:center;gap:.7rem;
  font-size:1.02rem;letter-spacing:.02em;
  color:var(--vert-900);margin:0 0 .9rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--vert-100)
}
.famille__ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--vert-50);border:1px solid var(--vert-100);
  display:grid;place-items:center;color:var(--vert-800)
}
.famille__ico svg{width:18px;height:18px}
.famille__compte{
  margin-left:auto;font-family:var(--font-texte);
  font-size:.82rem;font-weight:600;color:var(--vert-800);
  background:var(--vert-50);border:1px solid var(--vert-100);
  border-radius:999px;padding:.1rem .7rem
}

/* Les disciplines phares se distinguent par un aplat plein */
.pastilles a.pastille--phare{
  background:var(--vert-800);color:#fff;border-color:var(--vert-800);
  font-weight:700
}
.pastilles a.pastille--phare:hover{background:var(--vert-900);border-color:var(--vert-900)}

.familles__legende{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:2rem;font-size:.92rem;color:var(--gris-700)
}
.pastille--exemple{
  display:inline-block;width:2.4rem;height:1.05rem;border-radius:999px;
  background:var(--vert-800);flex-shrink:0
}

/* ==========================================================================
   Imagerie : trois modalités lourdes mises en avant, compléments en retrait
   ========================================================================== */
.carte--equipement .carte__icone{
  width:60px;height:60px;
  background:linear-gradient(150deg,var(--vert-50),#fff);
  border-color:var(--vert-200)
}
.carte--equipement h3{font-size:1.35rem;color:var(--vert-900)}

.complements{
  margin-top:2.5rem;padding-top:1.75rem;
  border-top:1px solid var(--vert-100)
}
.complements__titre{
  font-size:.86rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vert-800);margin:0 0 1.25rem
}
.complements__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem
}
.complements__liste li{
  display:flex;gap:.9rem;align-items:flex-start;margin:0;
  font-size:.96rem;color:var(--gris-700);line-height:1.55
}
.complements__ico{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--vert-50);border:1px solid var(--vert-100);
  color:var(--vert-800);display:grid;place-items:center
}
.complements__ico svg{width:21px;height:21px}
.complements__liste strong{
  display:block;font-family:var(--font-titre);font-size:1.02rem;
  color:var(--noir);margin-bottom:.15rem
}

/* Illustration d'équipement, en tête de carte. Le conteneur garde le même
   rapport que les photos qui pourront les remplacer un jour. */
.equipement__media{
  display:block;margin:-.4rem 0 1.2rem;
  background:linear-gradient(160deg,#fff,var(--vert-50));
  border:1px solid var(--vert-100);border-radius:14px;padding:.4rem
}
.equipement__illu{width:100%;height:auto;display:block;aspect-ratio:10/7}
.carte--equipement .carte__icone{display:none}

/* ==========================================================================
   Radiofréquence : schéma explicatif et indications
   ========================================================================== */
.rf__visuel{
  margin:0;background:linear-gradient(155deg,#fff,var(--vert-50));
  border:1px solid var(--vert-100);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.2rem;box-shadow:var(--ombre)
}
.rf__schema{width:100%;height:auto;display:block;max-width:420px;margin-inline:auto}
.rf__visuel figcaption{
  margin-top:.9rem;text-align:center;
  font-size:.92rem;color:var(--gris-700);line-height:1.5
}

.rf__indications{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--vert-100)}
.rf__indications ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;
  /* Six indications : 3 / 2 / 1 colonnes, jamais de rangée orpheline. */
  grid-template-columns:repeat(3,1fr)
}
@media (max-width:900px){
  .rf__indications ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .rf__indications ul{grid-template-columns:1fr}
}
.rf__indications li{
  display:flex;align-items:center;gap:.8rem;margin:0;
  background:#fff;border:1px solid var(--gris-200);border-radius:14px;
  padding:.85rem 1.1rem;font-size:.97rem;font-weight:600;color:var(--noir);
  transition:var(--transition)
}
.rf__indications li:hover{border-color:var(--vert-200);box-shadow:var(--ombre)}
.rf__indications li svg{
  width:24px;height:24px;flex-shrink:0;color:var(--vert-800)
}

/* ==========================================================================
   Vidéos pédagogiques — façade sans cookie
   --------------------------------------------------------------------------
   La miniature est hébergée sur notre domaine. YouTube n’est contacté qu’au
   clic, quand le script remplace la façade par l’iframe. Aucun cookie tiers
   n’est déposé à l’ouverture de la page.
   ========================================================================== */
.videos{
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(3,1fr)
}
@media (max-width:980px){ .videos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .videos{grid-template-columns:1fr} }

.video{
  background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:var(--transition)
}
.video:hover{border-color:var(--vert-200);box-shadow:var(--ombre-lg);transform:translateY(-4px)}

/* Façade cliquable : un bouton, car le clic remplace le contenu sur place */
.video__facade{
  position:relative;display:block;width:100%;padding:0;border:0;
  background:var(--gris-100);cursor:pointer;line-height:0;
  aspect-ratio:16/9;overflow:hidden
}
.video__facade img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.video:hover .video__facade img{transform:scale(1.04)}

.video__play{
  position:absolute;inset:0;margin:auto;
  width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:var(--vert-800);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:var(--transition)
}
.video__play svg{width:28px;height:28px;margin-left:3px}
.video__facade:hover .video__play,
.video__facade:focus-visible .video__play{
  background:var(--vert-800);color:#fff;transform:scale(1.09)
}
.video__facade:focus-visible{outline:3px solid var(--vert-700);outline-offset:3px}

.video__duree{
  position:absolute;right:.7rem;bottom:.7rem;
  background:rgba(0,0,0,.78);color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  padding:.18rem .5rem;border-radius:6px;line-height:1.5
}

.video__texte{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.video__specialite{
  font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vert-800)
}
.video__texte h3{margin:0;font-size:1.1rem;line-height:1.35;color:var(--noir)}
.video__texte p{margin:0;font-size:.94rem;color:var(--gris-700);line-height:1.6}

/* L’iframe prend la place exacte de la façade : la mise en page ne bouge pas */
.video__cadre{width:100%;aspect-ratio:16/9;border:0;display:block}

.videos__note{
  margin:1.8rem 0 0;text-align:center;
  font-size:.92rem;color:var(--gris-700)
}
.videos__note a{
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--vert-800);font-weight:700;text-decoration:none;white-space:nowrap
}
.videos__note a:hover{text-decoration:underline}
.videos__note a svg{width:15px;height:15px}

/* ----------------------------------------- Réseaux sociaux dans le footer */
.footer__reseaux{
  list-style:none;display:flex;gap:.7rem;margin:1.4rem 0 0;padding:0
}
.footer__reseaux a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.09);color:#fff;
  border:1px solid rgba(255,255,255,.16);
  transition:var(--transition)
}
.footer__reseaux a:hover{background:#fff;color:var(--vert-900);border-color:#fff}
.footer__reseaux svg{width:21px;height:21px}

/* Liens vers les comptes officiels, dans un encart de la page contact */
.liens-reseaux{list-style:none;margin:.9rem 0;padding:0;display:grid;gap:.55rem}
.liens-reseaux a{
  display:flex;align-items:center;gap:.65rem;
  color:var(--vert-800);font-weight:700;text-decoration:none;font-size:.96rem
}
.liens-reseaux a:hover{text-decoration:underline}
.liens-reseaux svg{width:20px;height:20px;flex-shrink:0}
.encart .encart__note{
  font-size:.87rem;color:var(--gris-700);line-height:1.6;
  padding-top:.8rem;border-top:1px solid var(--gris-200)
}

/* ==========================================================================
   Page « L’établissement » — en-tête illustré
   --------------------------------------------------------------------------
   Le bandeau titrait, puis une section blanche montrait le bâtiment, puis un
   paragraphe redisait le chapô. Les trois n’en font plus qu’un : le bâtiment
   détouré se pose sur la trame verte du bandeau, qui lui sert enfin de décor.
   ========================================================================== */
.pagehead--illustre{
  /* Couleur de la section qui suit : le bas du bandeau glisse vers elle. */
  --fondu-vers:var(--fond-2);
  padding-bottom:clamp(2.2rem,3.5vw,3.2rem)
}
.pagehead--illustre::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:190px;
  background:linear-gradient(to bottom,transparent,var(--fondu-vers));
  pointer-events:none
}
.pagehead__grille{
  display:grid;gap:2.5rem;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr)
}
@media (max-width:960px){
  .pagehead--illustre{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
  .pagehead__grille{grid-template-columns:1fr;gap:1.8rem}
}

.pagehead__texte h1{margin-bottom:.7rem}
.pagehead__chapo{
  font-size:1.2rem;color:var(--gris-700);max-width:56ch;
  margin:0 0 1.2rem
}
.pagehead__texte p{font-size:1.02rem;color:var(--gris-700);line-height:1.7;margin:0 0 .9rem;max-width:56ch}
.pagehead__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}

/* Le bâtiment : plus de cadre, plus de fond. La photo est détourée,
   c’est son ombre portée qui la pose sur la trame. */
.pagehead .batiment{
  margin:0;background:none;border:0;box-shadow:none;padding:0;
  display:grid;gap:1.1rem;justify-items:center;text-align:center;
  position:relative;align-self:center
}
.pagehead .batiment::before{
  content:"";position:absolute;left:50%;top:2%;translate:-50% 0;
  width:min(92%,560px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(162,217,118,.40),transparent 68%);
  pointer-events:none
}
.pagehead .batiment img{
  position:relative;width:100%;max-width:560px;height:auto;
  filter:drop-shadow(0 20px 28px rgba(16,44,16,.22))
}
.pagehead .batiment figcaption{position:relative;display:grid;gap:.2rem;padding-bottom:.4rem}
.pagehead .batiment figcaption strong{
  font-family:var(--font-titre);font-size:1.05rem;color:var(--vert-900)
}
.pagehead .batiment figcaption span{font-size:.9rem;color:var(--gris-700)}

/* La promesse, en citation : c’est la phrase de l’établissement, pas la nôtre */
.promesse{
  margin:1.5rem 0 0;padding:1.4rem 1.5rem;
  background:#fff;border-left:4px solid var(--vert-700);
  border-radius:0 14px 14px 0;
  box-shadow:var(--ombre)
}
.promesse p{
  margin:0 0 1rem;font-family:var(--font-titre);
  font-size:1.12rem;font-weight:600;font-style:italic;
  color:var(--vert-900);line-height:1.5
}
.promesse ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.promesse li{
  position:relative;padding-left:1.6rem;
  font-size:.97rem;font-weight:600;color:var(--noir)
}
.promesse li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:9px;height:9px;border-radius:50%;
  background:var(--vert-700)
}

/* Photo d’accueil : format plus haut, pour équilibrer la colonne de texte */
.illustration--haute{margin-bottom:0}
.illustration--haute img{aspect-ratio:3/2}
@media (max-width:760px){
  .illustration--haute img{aspect-ratio:3/2}
}

/* ==========================================================================
   Nos valeurs — quatre cartes sur le fond vert
   --------------------------------------------------------------------------
   Les quatre blocs étaient de simples paragraphes centrés : rien ne les
   distinguait, l’œil glissait dessus. Chacun a désormais son icône et son
   cadre, posé sur un voile clair qui les détache du dégradé.
   ========================================================================== */
.section__intro--centre{max-width:64ch;text-align:center;margin-inline:auto}

.valeurs{
  display:grid;gap:1.5rem;
  /* Quatre valeurs : 4 / 2 / 1 colonnes, jamais de rangée orpheline. */
  grid-template-columns:repeat(4,1fr)
}
@media (max-width:980px){ .valeurs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .valeurs{grid-template-columns:1fr} }

.valeur{
  text-align:left;padding:1.8rem 1.5rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  border-radius:var(--radius);
  transition:var(--transition)
}
.valeur:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.34);
  transform:translateY(-4px)
}
.valeur__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;margin-bottom:1rem;
  border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--vert-900)
}
.valeur__ico svg{width:28px;height:28px}
.valeur h3{
  margin:0 0 .55rem;font-size:1.15rem;
  /* Le blanc est déjà appliqué par .section--vert h3 */
}
.valeur p{
  margin:0;color:#fff;font-size:.97rem;line-height:1.65;
  /* Le vert du fond assombrit la perception du blanc : on le laisse pur */
  opacity:.94
}

/* ==========================================================================
   Trois pôles : ce qui les relie
   --------------------------------------------------------------------------
   Les trois cartes énonçaient trois métiers sans jamais dire ce qu’ils font
   ensemble. Cette bande le dit, juste sous elles.
   ========================================================================== */
.poles__liant{
  display:flex;align-items:center;gap:1.1rem;
  margin:1.6rem 0 0;padding:1.25rem 1.5rem;
  background:var(--vert-50);border:1px solid var(--vert-100);
  border-radius:var(--radius);
  font-size:1.02rem;line-height:1.6;color:var(--noir)
}
.poles__liant-ico{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex-shrink:0;border-radius:50%;
  background:#fff;color:var(--vert-800);border:1px solid var(--vert-100)
}
.poles__liant-ico svg{width:24px;height:24px}
@media (max-width:560px){
  .poles__liant{flex-direction:column;align-items:flex-start;gap:.9rem}
}

/* La direction médicale relève de la gouvernance, pas des pôles :
   elle est séparée par un filet plutôt que noyée dans la grille. */
.encart--direction{
  margin-top:2.5rem;padding-top:2rem;
  border-top:1px solid var(--gris-200);
  background:none;border-left:0;border-right:0;border-bottom:0;border-radius:0
}

/* ==========================================================================
   « Ce que vous trouverez chez nous »
   --------------------------------------------------------------------------
   Cinq coches vertes identiques n’apprenaient rien : elles disaient « oui »
   cinq fois. Chaque point porte maintenant son icône et une précision.
   ========================================================================== */
.atouts{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:1.1rem}
.atouts li{display:flex;gap:1rem;align-items:flex-start}
.atouts__ico{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex-shrink:0;
  /* Pastille ronde : c'est la forme retenue partout ailleurs sur le site. */
  border-radius:50%;
  background:var(--vert-50);color:var(--vert-800);
  border:1px solid var(--vert-100)
}
.atouts__ico svg{width:23px;height:23px}
.atouts__txt{display:grid;gap:.15rem}
.atouts__txt strong{
  font-family:var(--font-titre);font-size:1.04rem;
  font-weight:700;color:var(--noir);line-height:1.35
}
.atouts__txt>span{font-size:.93rem;color:var(--gris-700);line-height:1.55}

/* Liens de rubrique : une flèche, pas une coche — une coche affirmerait
   « nous avons ceci » là où il s’agit d’aller voir ailleurs. */
.liens-suite{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.liens-suite a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.62rem 0;
  color:var(--vert-800);font-weight:700;font-size:.98rem;
  text-decoration:none;
  border-bottom:1px solid var(--gris-200);
  transition:var(--transition)
}
.liens-suite li:last-child a{border-bottom:0;padding-bottom:0}
.liens-suite a:hover{color:var(--vert-900);padding-left:.35rem}
.liens-suite svg{width:15px;height:15px;flex-shrink:0}

/* Bande de liens en pied de section : sortie de la colonne de gauche, qui
   dépassait la droite de près de 300 px. Quatre rubriques, quatre colonnes. */
.liens-suite--bande{
  margin-top:2.5rem;padding-top:1.8rem;
  border-top:1px solid var(--gris-300, var(--gris-200));
  grid-template-columns:repeat(4,1fr);gap:1rem
}
.liens-suite--bande a{
  border-bottom:0;padding:.9rem 1.1rem;
  background:#fff;border:1px solid var(--gris-200);border-radius:14px
}
.liens-suite--bande a:hover{
  padding-left:1.1rem;border-color:var(--vert-200);box-shadow:var(--ombre);
  transform:translateY(-2px)
}
@media (max-width:900px){ .liens-suite--bande{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .liens-suite--bande{grid-template-columns:1fr} }


/* Un encart clair posé sur une section verte héritait du blanc de celle-ci :
   texte blanc sur fond gris, contraste 1,11 — invisible. L'encart impose
   ses propres couleurs quel que soit le fond qui l'accueille. */
.section--vert .encart{color:var(--noir)}
.section--vert .encart p{color:var(--gris-700)}
.section--vert .encart.encart--info h3{color:var(--gris-800)}
.section--vert .encart a{color:var(--vert-800)}



/* ==========================================================================
   Médecin-chef, sur la page « L’établissement »
   --------------------------------------------------------------------------
   C'était un encart en fin de section, sous les trois pôles. C'est pourtant
   la seule information que cette section apporte et qu'on ne lit nulle part
   ailleurs sur la page : elle passe donc devant.
   ========================================================================== */
.chef{
  display:grid;gap:1.6rem;align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  margin-bottom:2.2rem;padding:1.7rem 1.9rem;
  background:var(--vert-50);border:1px solid var(--vert-100);
  border-radius:var(--radius)
}
@media (max-width:820px){
  .chef{grid-template-columns:1fr;gap:1.2rem;padding:1.4rem 1.5rem}
}

.chef__identite{display:flex;align-items:center;gap:1.1rem}
.chef__pastille{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;flex-shrink:0;border-radius:50%;
  background:#fff;color:var(--vert-800);border:1px solid var(--vert-100)
}
.chef__pastille svg{width:32px;height:32px}
.chef__qui{display:grid;gap:.15rem}
.chef__fonction{
  display:inline-block;justify-self:start;
  background:var(--vert-800);color:#fff;
  font-family:var(--font-titre);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.2rem .7rem;border-radius:999px
}
.chef__nom{
  font-family:var(--font-titre);font-size:1.22rem;line-height:1.3;color:var(--noir)
}
.chef__texte p{margin:0 0 .8rem;color:var(--gris-700);line-height:1.65}
.chef__texte .carte__lien{margin:0}

/* ==========================================================================
   Bloc de contact — les trois voies
   --------------------------------------------------------------------------
   Ce bloc conclut dix pages. Il n'offrait qu'un numéro sur les quatre de
   l'établissement, et ne disait rien des urgences. Trois voies distinctes
   (appeler, écrire, venir), puis un rappel des urgences détaché du reste.
   ========================================================================== */
.cta__voies{
  display:grid;gap:1.2rem;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:1.8rem;text-align:left
}
@media (max-width:820px){ .cta__voies{grid-template-columns:1fr} }

.cta__voie{
  display:grid;gap:.3rem;align-content:start;
  padding:1.4rem 1.5rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  transition:var(--transition)
}
.cta__voie:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32)}

.cta__voie-ico{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-bottom:.55rem;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--vert-900)
}
.cta__voie-ico svg{width:20px;height:20px}

.cta__voie-titre{
  font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#d8f3cf
}
.cta__num{
  font-family:var(--font-titre);font-size:1.12rem;font-weight:700;
  color:#fff;text-decoration:none;line-height:1.4;
  border-bottom:1px solid transparent;justify-self:start;
  /* On compose parfois ces numéros dans l'urgence : cible d'au moins 44 px. */
  display:inline-flex;align-items:center;padding:.45rem 0;min-height:44px
}
.cta__num:hover{border-bottom-color:#fff}
.cta__num--second{font-size:.98rem;font-weight:600;opacity:.88}
.cta__voie-note{font-size:.87rem;color:rgba(255,255,255,.82);line-height:1.5}

/* Le rappel des urgences est détaché : c'est une consigne, pas une option
   parmi d'autres. */
.cta__urgences{
  display:flex;align-items:center;gap:.9rem;
  margin:0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.22);
  text-align:left;font-size:.98rem;line-height:1.6;
  max-width:none
}
.cta__urgences-ico{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:var(--alerte);color:#fff
}
.cta__urgences-ico svg{width:20px;height:20px}
.cta__urgences a{color:#fff;font-weight:700;white-space:nowrap}
.cta__urgences a:hover{text-decoration:underline}
@media (max-width:600px){
  .cta__urgences{flex-direction:column;align-items:flex-start;gap:.7rem}
  .cta__urgences a{white-space:normal}
}

/* Portraits de praticiens. Même gabarit que les pastilles qu'ils remplacent,
   pour que la mise en page ne bouge pas selon qu'une photo existe ou non. */
.chef__portrait{
  width:64px;height:64px;flex-shrink:0;border-radius:50%;
  object-fit:cover;object-position:center 22%;
  border:2px solid #fff;box-shadow:var(--ombre)
}
.direction__portrait{
  width:66px;height:66px;flex-shrink:0;border-radius:50%;
  object-fit:cover;object-position:center 22%;
  border:2px solid #fff;box-shadow:var(--ombre)
}

/* Spécialité et fonction ordinale du médecin-chef */
.chef__spe{font-size:.94rem;color:var(--gris-700)}
.chef__ordinal{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 .9rem;font-size:.9rem;color:var(--vert-900);font-weight:600;line-height:1.5
}
.chef__ordinal svg{width:19px;height:19px;flex-shrink:0;color:var(--vert-700)}


/* ==========================================================================
   Accès direct aux spécialités, regroupé par famille
   --------------------------------------------------------------------------
   Trente et une étiquettes alignées à plat formaient un mur : il fallait
   toutes les lire pour en trouver une. Elles suivent maintenant le même
   découpage que le reste de la page.
   ========================================================================== */
.pastilles__groupes{columns:2;column-gap:2.8rem}
.pastilles__groupe{break-inside:avoid;margin-bottom:1.8rem}
@media (max-width:820px){
  .pastilles__groupes{columns:1}
}

.pastilles__titre{
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 .85rem;font-size:1.02rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--gris-200)
}
.pastilles__titre a{color:var(--vert-900);text-decoration:none}
.pastilles__titre a:hover{text-decoration:underline}
.pastilles__titre span{
  font-family:var(--font-texte);font-size:.78rem;font-weight:700;
  color:var(--vert-800);background:var(--vert-50);
  border:1px solid var(--vert-100);border-radius:999px;
  padding:.1rem .55rem
}

/* Un encart qui ouvre une page porte un titre de niveau 2 — pour que la
   hiérarchie des titres reste continue — mais garde l'apparence d'un h3. */
.encart h2{
  font-size:1.15rem;margin-bottom:.6rem;color:var(--vert-900)
}
.encart.encart--alerte h2{color:var(--alerte)}
.encart.encart--info h2{color:var(--gris-800)}

/* Équipements lourds : IRM, TEP-scan et scanner sont l'argument de
   l'établissement — peu de sites les réunissent. Ils se distinguent des
   examens de radiologie courante. */
.carte--lourd{border-color:var(--vert-200);background:linear-gradient(160deg,#fff,var(--vert-50))}
.equipement__marque{
  display:inline-block;width:fit-content;justify-self:start;align-self:start;
  margin:0 0 .6rem;
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--vert-800);
  padding:.16rem .6rem;border-radius:999px
}

/* Le numéro de rendez-vous est le même pour les 54 praticiens : il est dit
   une fois, au-dessus de l'annuaire, plutôt que répété sur chaque fiche. */
.annuaire__consigne{
  display:flex;align-items:flex-start;gap:.8rem;
  margin:0 0 2rem;padding:1rem 1.2rem;
  background:var(--vert-50);border:1px solid var(--vert-100);border-radius:14px;
  font-size:.96rem;line-height:1.6;color:var(--noir)
}
.annuaire__consigne svg{width:20px;height:20px;flex-shrink:0;margin-top:.15rem;color:var(--vert-800)}
.annuaire__consigne a{color:var(--vert-800);font-weight:700}

/* Sans le bloc de coordonnées, les horaires deviennent la ligne principale
   de la fiche : ils n'ont plus besoin d'être détachés. */
.praticien__horaires{margin-top:.5rem}


/* Horaires : la valeur doit se lire avant l'explication. */
.horaire__val{
  font-family:var(--font-titre);font-size:1.25rem;font-weight:700;
  color:var(--vert-900);margin:0 0 .5rem
}
.horaire__note{
  display:flex;align-items:flex-start;gap:.8rem;
  margin:1.8rem 0 0;padding:1.1rem 1.3rem;
  background:var(--vert-50);border:1px solid var(--vert-100);border-radius:14px;
  font-size:.95rem;line-height:1.6;color:var(--noir)
}
.horaire__note svg{width:19px;height:19px;flex-shrink:0;margin-top:.15rem;color:var(--vert-800)}
.horaire__note a{color:var(--vert-800);font-weight:700;white-space:nowrap}

/* `.grid--2` répartit ses éléments en colonnes automatiques : au-delà de
   1120 px, elle en crée trois. Une grille qui ne contient que deux blocs
   laissait donc une colonne vide, et les deux blocs paraissaient décalés.
   Le sélecteur ne vise que ce cas — deuxième enfant qui est aussi le
   dernier — pour ne pas rétrécir les listes de spécialités ou de praticiens,
   qui gagnent au contraire à s'étaler.
   Les navigateurs sans `:has()` conservent le comportement d'avant. */
.grid--2:has(> :nth-child(2):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr))
}
@media (max-width:760px){
  .grid--2:has(> :nth-child(2):last-child){grid-template-columns:1fr}
}

/* ==========================================================================
   Plan d'accès — façade sans cookie
   --------------------------------------------------------------------------
   Une carte Google intégrée contacte ses serveurs dès l'ouverture de la page,
   avant même que le visiteur ait cherché à se repérer. Ici, la façade affiche
   l'adresse et les repères ; la carte n'est chargée que si on la demande.
   ========================================================================== */
.carte-acces{
  border:1px solid var(--gris-200);border-radius:var(--radius);
  overflow:hidden;background:#fff
}
/* Cadre de la carte */
.carte-acces__cadre{
  width:100%;height:420px;border:0;display:block
}
@media (max-width:640px){
  .carte-acces__cadre{height:320px}}

.carte-acces__liens{
  display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.4rem
}
.carte-acces__liens .btn svg{width:18px;height:18px}

/* Lien dans un encart d'alerte : le fond est rose très clair, la couleur
   d'alerte s'y détache. Le blanc qui était appliqué en dur rendait le
   numéro des urgences invisible. */
.encart--alerte .lien-alerte{
  color:var(--alerte);font-weight:700;text-decoration:underline;
  text-underline-offset:2px
}
.encart--alerte .lien-alerte:hover{text-decoration-thickness:2px}

/* Consentement : c'est la case sans laquelle le formulaire ne part pas.
   Elle mesurait 13 px, soit la moitié de la cible tactile recommandée. */
.champ-consentement{
  display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.5rem
}
.champ-consentement input[type="checkbox"]{
  width:24px;height:24px;flex-shrink:0;margin:0;
  accent-color:var(--vert-700);cursor:pointer
}
.champ-consentement label{
  font-family:var(--font-texte);font-weight:400;font-size:.95rem;
  line-height:1.55;color:var(--gris-700);cursor:pointer;
  /* La zone cliquable du libellé prolonge celle de la case */
  padding:.2rem 0
}
.champ-consentement a{color:var(--vert-800);font-weight:600}

/* ==========================================================================
   Page contact — les quatre canaux
   --------------------------------------------------------------------------
   La page empilait six encarts verts identiques : téléphone, courriel,
   adresse, urgences, consultations, réseaux. Elle listait des coordonnées
   sans jamais dire laquelle utiliser. Elle ouvre maintenant sur les quatre
   motifs réels d'un appel, et chacun dit quoi faire.
   ========================================================================== */
.voies{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(2,1fr)
}
@media (max-width:820px){ .voies{grid-template-columns:1fr} }

.voie{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);
  padding:1.7rem 1.8rem;transition:var(--transition)
}
.voie:hover{border-color:var(--vert-200);box-shadow:var(--ombre-md);transform:translateY(-3px)}

/* L'urgence ne se range pas au même niveau que les autres motifs. */
.voie--urgente{
  border-color:var(--alerte);border-width:2px;
  background:linear-gradient(165deg,#fff,var(--alerte-fond))
}
.voie--urgente .voie__ico{background:var(--alerte);color:#fff}
.voie--urgente .voie__valeur{color:var(--alerte)}

.voie__ico{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:.9rem;border-radius:50%;
  background:var(--vert-50);color:var(--vert-800)
}
.voie__ico svg{width:24px;height:24px}
.voie h3{margin:0 0 .4rem;font-size:1.16rem}

/* Le numéro est ce qu'on vient chercher : il se lit avant le reste. */
.voie__valeur{
  font-family:var(--font-titre);font-size:clamp(1.05rem,3.6vw,1.45rem);font-weight:700;
  color:var(--vert-900);text-decoration:none;line-height:1.3;
  border-bottom:2px solid transparent;
  /* Composé parfois dans l'urgence : cible d'au moins 44 px. */
  display:inline-flex;align-items:center;min-height:44px;
  /* Une adresse de courriel est plus longue qu'un numéro : elle doit
     pouvoir se replier au lieu de déborder de la carte. */
  max-width:100%;overflow-wrap:anywhere
}
.voie__valeur:hover{border-bottom-color:currentColor}
.voie__quand{
  margin:0 0 .8rem;font-size:.86rem;font-weight:600;
  color:var(--gris-700);text-transform:none
}
.voie__desc{margin:0 0 1rem;font-size:.95rem;line-height:1.6;color:var(--gris-700);flex:1}

/* ------------------------------------------------------------ Formulaire */
.formulaire-bloc{
  max-width:760px;margin-inline:auto;
  background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.6rem)
}
.formulaire-bloc .section__intro{margin-bottom:1.6rem}
.formulaire-ligne{display:flex;flex-wrap:wrap;gap:1.2rem;margin-bottom:1.2rem}

/* -------------------------------------------------------- Bloc « venir » */
.acces-grille{
  display:grid;gap:1.8rem;align-items:start;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)
}
@media (max-width:900px){ .acces-grille{grid-template-columns:1fr} }
.acces-infos .encart{margin-top:0;margin-bottom:1rem}
.acces-infos .encart:last-child{margin-bottom:0}

/* Plus Code : au Cameroun l'adressage par rue reste incomplet, ce code
   universel se saisit tel quel dans une application de navigation. */
.plus-code{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:1rem 0 0;font-size:.95rem;color:var(--gris-700)
}
.plus-code code{
  font-family:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
  font-size:1rem;font-weight:700;color:var(--vert-900);
  background:var(--vert-50);border:1px solid var(--vert-100);
  padding:.2rem .55rem;border-radius:8px
}