/* ============================================
   CHRU Nancy — Single Structure
   Établissement (parent) + Bâtiment (enfant)
   ============================================ */

/* ============================================
   HERO ÉTABLISSEMENT — Figma node 206:3259
   Layout : bande grise (breadcrumb + H1),
   chapô centré sur fond blanc, puis 2 cartes (accès + photo)
   ============================================ */

/* Bande grise contenant breadcrumb + titre */
.chru-etab-hero-band {
    background: var(--chru-grey);
    padding: 32px 80px 36px;
}
.chru-etab-hero-band .chru-breadcrumb {
    padding: 0 0 12px;
    display: flex;
    justify-content: center;
    color: var(--chru-primary);
}
.chru-etab-hero-band .chru-breadcrumb a {
    color: var(--chru-primary);
}
.chru-etab-hero-band .chru-breadcrumb a:hover {
    color: var(--chru-accent);
}
.chru-etab-hero-band .chru-breadcrumb strong {
    color: var(--chru-secondary);
}
.chru-etab-hero__title {
    font-size: var(--h1-size);
    font-weight: 700;
    color: var(--chru-secondary);
    line-height: 1.1;
    text-align: center;
}

/* Chapô centré sous la bande grise.
   Retour Marie 06/08/2026 — « Texte d'accroche : fond bleu derrière le texte ».
   Le pavé était sur fond blanc, donc indistinct du contenu qui suit. Le ton
   retenu est celui que le site emploie déjà pour ses aplats bleu très clair
   (fond de survol du bloc « Examens », #F4FAFE) — la capture de Marie mesure
   #F2FAFD, soit le même ton. Le texte marine y garde 10,15:1. */
.chru-etab-hero-chapo {
    max-width: 1172px;
    /* A8 (Marie 31/07/2026) : le pavé de présentation était collé aux cartes du
       hero au-dessus et à la suite en dessous (0px mesuré des deux côtés). */
    margin: 40px auto;
    padding: 32px 80px;
    background: #F4FAFE;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--chru-secondary);
    text-align: center;
}

/* Deux cartes côte à côte — SANS superposition */
/* D1 — Refonte hero (consigne client 2026-06-18) : repasser au modèle
   "page service" — panneaux pleine largeur, bloc info bleu à gauche +
   photos à droite, plus de "card" arrondies juxtaposées. */
/* Retour Thomas (20/07/2026) : la rangée reste dans le container du site, mais
   sans les 80px de marge interne — les deux blocs (accès bleu + photo) vont
   d'un bord à l'autre du container. */
/* Marie KUSY 05/08/2026 : « ajouter de l'espace au-dessus et en-dessous du texte
   de présentation + mise en avant (fond bleu) ». Ces blocs maison sont des cartes
   pleine largeur ; mesuré 20px au-dessus / 24px en dessous, ils collaient au texte
   courant. On reprend le rythme déjà appliqué aux pages formation le 20/07 (40px),
   pour que le contenu des structures respire pareil.
   Ciblé sur le corps de page : le bloc « Important » remonté dans le hero garde
   sa propre marge (.chru-etab__important). */
.chru-etab__body .chru-content > [class*="wp-block-chru-"] {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Phrase importante remontée entre le titre et le héro (Marie KUSY 05/08/2026).
   Elle reprend la largeur du contenu et respire des deux côtés ; la carte
   d'accès qui suit garde sa propre marge haute. */
.chru-etab__important {
    max-width: var(--container-max, 1440px);
    margin: 32px auto;
    /* ⚠️ `padding: 0` — Marie KUSY 05/08/2026 « est-ce que tu peux aligner les
       bords ? ». Ce bloc doit s'aligner AU PIXEL sur la rangée hero-cards juste
       en dessous, qui est en `padding: 0` (full-bleed depuis le 20/07). Les 80px
       posés initialement le rentraient de 160px par rapport aux cartes.
       Toute valeur ici doit rester identique à `.chru-etab-hero-cards`. */
    padding: 0;
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    .chru-etab__important {
        margin: 24px auto;
        /* idem : les hero-cards passent aussi à `padding: 0` sous 1024px. */
        padding: 0;
    }
}

.chru-etab-hero-cards {
    display: flex;
    gap: 42px;
    max-width: var(--container-max, 1440px);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    align-items: stretch;
}

/* Sans chapô, les deux blocs (accès bleu + photo) collaient la bande grise du
   hero (retour Thomas 20/07/2026). Le chapô, quand il existe, apporte déjà ses
   32px de padding bas → on ne cible que le cas « cartes juste après la bande ». */
.chru-etab-hero-band + .chru-etab-hero-cards {
    margin-top: 40px;
}

/* Bloc info bleu — panneau gauche full-bleed.
   La padding-left utilise le calc(...) classique pour aligner le contenu
   au centre du container max-width quand l'écran est large. */
.chru-etab-acces-card {
    flex: 0 0 46%;
    align-self: stretch;
    background: var(--chru-secondary);
    color: white;
    border-radius: 30px;
    padding: 32px 44px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 1024px) {
    .chru-etab-hero-cards {
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }
    .chru-etab-acces-card {
        flex: 1 1 100%;
        padding: 32px 24px;
    }
}
.chru-etab-acces__single {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}


/* === Bloc accessibilité différencié (carte distincte sous les hero-cards) === */
.chru-etab-a11y-card {
    max-width: var(--container-max, 1320px);
    margin: 24px auto 0;
    padding: 18px 24px;
    background: var(--chru-blue-light-bg, #C5E1FF);
    border-left: 4px solid var(--chru-blue-light, #0096D6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.chru-etab-a11y-card__icons {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--chru-blue-service, #14446B);
}

.chru-etab-a11y-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    flex: 1;
}

.chru-etab-a11y-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    color: #14446B;
}

.chru-etab-a11y-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #14446B;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chru-etab-a11y-card__link:hover,
.chru-etab-a11y-card__link:focus-visible {
    color: var(--chru-blue-light, #0096D6);
}

@media (max-width: 768px) {
    .chru-etab-a11y-card {
        margin: 16px 16px 0;
        padding: 14px 16px;
        flex-direction: row;
        align-items: flex-start;
    }
    .chru-etab-a11y-card__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Les pictos handicap + le lien accompagnement sont regroupés à droite via .chru-etab-acces__handicaps-group */

/* === Rubriques de la carte d'accès (maquette Marie KUSY 05/08/2026) ===
   Une rubrique = un picto + un corps. Les pictos partagent une colonne de
   largeur fixe pour que TOUS les libellés démarrent au même x — c'est le
   défaut corrigé le 29/07 sur les cartes contact des écoles, il se reposait
   ici dès qu'on mélange des pictos de gabarits différents (18px et 24px). */
.chru-etab-acces__rows {
    display: flex;
    flex-direction: column;
    /* A7 (Marie 31/07/2026) : l'air au-dessus des titres, désormais porté par
       l'écart entre rubriques. */
    gap: 26px;
    flex: 1;
}

.chru-etab-acces__row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.chru-etab-acces__row-icon {
    flex: 0 0 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: #fff;
}
.chru-etab-acces__row-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    color: #fff;
    fill: currentColor;
}
/* Les pictos bus / voiture / PMR n'ont pas l'opacité gravée dans leur tracé,
   contrairement à ceux de l'adresse et du téléphone (opacity .8 sur le path) :
   on l'applique ici, sinon la colonne de pictos n'est pas homogène. */
.chru-etab-acces__row-icon--flat { opacity: 0.8; }

.chru-etab-acces__row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Écart entre deux groupes d'une même rubrique (piétons / véhicules). */
    gap: 26px;
}

/* Bouton « Calculez votre itinéraire » : variante blanche du design system,
   posée telle quelle (⚠️ ne JAMAIS redéfinir un .chru-btn--* ici, cf. la
   3e remontée du bouton Info utile — components.css est la source unique). */
/* Bouton « Calculez votre itinéraire » — EN TÊTE de la carte bleue depuis le
   31/08/2026 (C1, retour Marie KUSY : « le bouton doit être en haut de l'encart
   car il flotte au milieu »). Il était le dernier enfant de la rubrique
   « Arrêts de bus », donc au milieu de la carte.
   La carte est un flex column (gap 24px) : le bouton est simplement son premier
   enfant, calé à gauche. Aucune redéfinition de `.chru-btn--white`, qui reste
   défini par le seul design system (components.css). */
.chru-etab-acces__cta {
    flex-shrink: 0;
    align-self: flex-start;
}
/* Conservée telle quelle bien que le bouton ait quitté cette rubrique : elle
   autorise le repli du corps sous le picto si un nom d'arrêt très long
   dépassait. La retirer changerait un comportement que personne n'a demandé. */
.chru-etab-acces__row--bus { flex-wrap: wrap; }
@media (max-width: 640px) {
    .chru-etab-acces__cta {
        align-self: stretch;
        justify-content: center;
    }
}

.chru-etab-acces__separator {
    flex-shrink: 0;
    width: 1px;
    background: rgba(255,255,255,0.25);
    align-self: stretch;
}

/* Groupe d'info dans la carte accès */
.chru-etab-acces__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bloc transports en commun — variante avec lien STAN aligné sous la liste */
.chru-etab-acces__group--transports .chru-etab-acces__link--stan {
    align-self: flex-start;
    /* A5 (Marie 31/07/2026) « augmenter la marge » sous la liste des arrêts.
       ⚠️ Se cumule au gap de 8px du groupe ; la marge par défaut du <ul>, qui
       fournissait 16px avant le passage de .chru-etab-acces__list à margin:0,
       est désormais portée ICI. */
    margin-top: 24px;
}


.chru-etab-acces__heading {
    font-size: 18.5px;
    font-weight: 600;
    line-height: 1.3;
    /* A1 (Marie 31/07/2026) « réduire les marges sous les titres » : ces titres
       sont des <p>, qui héritaient du margin-bottom de 16px du thème ; il
       s'additionnait au gap de 8px du groupe, soit 24px mesurés sous chaque
       titre. L'écart est désormais porté par le seul gap. */
    margin: 0;
}

.chru-etab-acces__list {
    list-style: disc;
    padding-left: 24px;
    /* A1 (Marie 31/07/2026) « réduire les marges sous les titres » : c'est la
       marge par défaut du <ul> (16px) qui s'ajoutait au gap du groupe. */
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.chru-etab-acces__list li {
    margin-bottom: 2px;
}
.chru-etab-acces__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chru-etab-acces__link:hover {
    opacity: 0.8;
}
/* Lien à flèche (« Accès et tarifs », Marie KUSY 14/08/2026).
   Le soulignement descend sur le seul libellé : posé sur le <a>, il passerait
   aussi sous la flèche, qui est un enfant inline-block du même lien. */
.chru-etab-acces__link--arrow {
    text-decoration: none;
}
.chru-etab-acces__link--arrow .chru-etab-acces__link-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Icônes dans les liens de la carte accès : héritent de la couleur du label */
.chru-etab-acces-card .chru-etab-acces__link svg,
.chru-etab-acces-card .chru-etab-acces__link svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}


/* Séparateur horizontal */
.chru-etab-acces__hr {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0;
}

/* Bas de la carte : téléphone + horaires */
.chru-etab-acces__bottom {
    display: flex;
    gap: 36px;
    align-items: center;
}

.chru-etab-acces__phone {
    display: flex;
    gap: 20px;
    align-items: center;
}
.chru-etab-acces__phone-icon {
    flex-shrink: 0;
    width: 24px;
    color: white;
    opacity: 0.7;
}
.chru-etab-acces__phone-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chru-etab-acces__phone-label {
    font-size: 18.5px;
    font-weight: 600;
    /* Marie KUSY 05/08/2026 « réduire la marge entre les 2 lignes » : ce libellé
       est un <p>, il héritait du margin-bottom de 16px du thème, qui s'ajoutait
       au gap de 4px du bloc — 20px mesurés entre le libellé et le numéro.
       Même cause que les titres de la carte corrigés le 04/08 (A1). */
    margin: 0;
}
.chru-etab-acces__phone-number {
    /* A6 (Marie 31/07/2026) : numéro moins imposant, plus proche de son libellé. */
    font-size: 18px;
    font-weight: 700;
}

.chru-etab-acces__hours {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chru-etab-acces__hours-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18.5px;
    font-weight: 600;
    /* Même défaut que le libellé du standard juste à côté (margin-bottom de 16px
       hérité du thème sur les <p>) : les deux colonnes du pied de carte doivent
       serrer leur valeur de la même façon. */
    margin: 0;
}
.chru-etab-acces__hours-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4caf50;
    flex-shrink: 0;
}
.chru-etab-acces__hours-value {
    font-size: 16px;
    font-weight: 600;
}
/* Horaires : une ligne par valeur (24h/24 / 7j/7) — cf. maquette Figma */
.chru-etab-acces__hours-value span {
    display: block;
    line-height: 1.35;
}

/* --- Calage maquette (Figma node 206:3259) — refinements 2026-07-17 --- */
/* Icônes enveloppe / téléphone : opacité pilotée par le SVG (fill .8) */
.chru-etab-acces__icon,
.chru-etab-acces__phone-icon {
    opacity: 1;
}
.chru-etab-acces__icon svg,
.chru-etab-acces__phone-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    color: #fff;
}
/* Bloc téléphone : icône + filet vertical + libellé (comme les adresses) */
.chru-etab-acces__phone {
    align-items: center;
}
.chru-etab-acces__phone .chru-etab-acces__separator {
    min-height: 52px;
}
/* Numéro du standard : lien tel: blanc, souligné au survol seulement */
a.chru-etab-acces__phone-number {
    color: #fff;
    text-decoration: none;
}
a.chru-etab-acces__phone-number:hover,
a.chru-etab-acces__phone-number:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Filet vertical entre « standard » et « Horaires » */
.chru-etab-acces__separator--bottom {
    align-self: center;
    min-height: 56px;
}
@media (max-width: 768px) {
    .chru-etab-acces__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .chru-etab-acces__separator--bottom {
        display: none;
    }
}

/* Photo à droite — panneau full-bleed, plus de border-radius card
   (D1 — consigne client 2026-06-18 : photos sans framing card). */
.chru-etab-hero-photo {
    flex: 1 1 auto;
    border-radius: 0;
    /* overflow:hidden retiré : il clippait la légende rendue sous l'image.
       Le clipping/arrondi de l'image vit désormais sur __track. */
    position: relative;
    display: flex;
    flex-direction: column;
}
@media (max-width: 1024px) {
    .chru-etab-hero-photo {
        flex: 1 1 100%;
    }
    .chru-etab-hero-photo__track {
        min-height: 320px;
    }
}
.chru-etab-hero-photo__track {
    position: relative;
    width: 100%;
    min-height: 480px;
    flex: 1 1 auto;
    overflow: hidden;          /* clippe les slides absolues + crossfade */
    border-radius: 24px;       /* photo arrondie (maquette) */
    background: #0a0a0a;       /* fond pendant le chargement de l'image */
}
@media (max-width: 1024px) {
    .chru-etab-hero-photo__track {
        border-radius: 0;
    }
}
.chru-etab-hero-photo__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 400ms ease-in-out;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.chru-etab-hero-photo__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.chru-etab-hero-photo__img,
.chru-etab-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Légende en overlay SUR la photo (retour David 2026-06-25) : « chip » bleu
   translucide en bas, lisible, sans dégradé « flou » (que la cliente n'aimait
   pas). La légende est dans le slide → crossfade avec l'image. Sur les
   carrousels, on réserve la place des pastilles (déplacées en bas-droite). */
.chru-etab-hero-photo__caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    margin: 0;
    padding: 0;
    z-index: 1;                /* sous les navs/dots (z-index:2) */
    pointer-events: none;
}
.chru-etab-hero-photo--carousel .chru-etab-hero-photo__caption {
    right: 64px;               /* laisse la place aux pastilles en bas-droite */
}
.chru-etab-hero-photo__desc {
    display: inline-block;
    max-width: 100%;
    background: rgba(20, 68, 107, 0.85);   /* bleu service translucide */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    padding: 7px 12px;
    border-radius: 8px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.chru-etab-hero-photo__credit {
    font-size: 12px;
    font-style: italic;
    font-weight: 400; /* crédit italique sans graisse (retour Marie 2026-07-08) */
    color: var(--chru-gray-text, #929292);
    opacity: 1;
}

/* Carousel : navs + dots */
.chru-etab-hero-photo__nav,
.chru-etab-hero-photo__nav:hover,
.chru-etab-hero-photo__nav:focus,
.chru-etab-hero-photo__nav:focus-visible,
.chru-etab-hero-photo__nav:active {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: none;
    color: var(--chru-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 160ms ease;
    box-shadow: none;
    outline: none;
}
.chru-etab-hero-photo__nav:hover {
    background: #fff;
}
.chru-etab-hero-photo__nav:focus-visible {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20,68,107,0.25);
}
.chru-etab-hero-photo__nav--prev { left: 12px; }
.chru-etab-hero-photo__nav--next { right: 12px; }

.chru-etab-hero-photo__dots {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.chru-etab-hero-photo__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.9);
    cursor: pointer;
    transition: background 160ms ease;
}
.chru-etab-hero-photo__dot.is-active {
    background: #fff;
}

.chru-etab-hero-photo__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #b8d4e8 0%, #7ca1cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chru-secondary);
    font-size: 14px;
    font-weight: 600;
}

/* ============================================
 * Accès secondaires (cartes blanches sous le hero)
 * ============================================ */
.chru-etab-acces-secondaires {
    max-width: var(--container-max);
    margin: 20px auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chru-etab-acces-secondaire {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--chru-gray, #F6F6F6);
    border-radius: 20px;
    padding: 20px 32px;
}
.chru-etab-acces-secondaire__icon {
    flex-shrink: 0;
    width: 28px;
    margin-top: 2px;
    color: var(--chru-secondary, #14446B);
}
.chru-etab-acces-secondaire__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chru-etab-acces-secondaire__title {
    font-size: 18.5px;
    font-weight: 700;
    color: var(--chru-secondary);
    margin: 0;
}
.chru-etab-acces-secondaire__address {
    font-size: 16px;
    font-weight: 600;
    color: var(--chru-blue-text, #2D4356);
    margin: 0;
}
.chru-etab-acces-secondaire__hours {
    font-weight: 500;
    opacity: 0.85;
}
.chru-etab-acces-secondaire__links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 4px;
}
.chru-etab-acces-secondaire__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--chru-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chru-etab-acces-secondaire__link:hover { opacity: 0.8; }

/* Chapô sous les blocs d'accès (variante "below") */
.chru-etab-hero-chapo--below {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Légende + lien retour sous les cartes */
.chru-etab-hero-footer {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px 80px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
.chru-etab-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--chru-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chru-etab-hero__back:hover { color: var(--chru-accent); }

.chru-etab-hero__caption {
    font-size: 16px;
    font-style: italic;
    color: var(--chru-primary);
}

/* Boutons --white et --outline-white : voir components.css (source unique). */

/* Aide accessibilité sous le hero */
.chru-etab-aide {
    background: #eef5fa;
    border-left: 4px solid var(--chru-accent);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px 80px;
    font-size: 14px;
    color: var(--chru-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}
.chru-etab-aide a {
    color: var(--chru-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

/* === Diaporama entrées === */
.chru-etab-diaporama {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 32px 80px 0;
}
.chru-etab-diaporama__grid {
    display: flex;
    gap: 16px;
}
.chru-etab-diaporama__item {
    flex: 1;
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    position: relative;
}
.chru-etab-diaporama__img {
    height: 200px;
    background: linear-gradient(135deg, #c5d8e8 0%, #9bb8cf 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--chru-secondary);
    font-weight: 600;
}
.chru-etab-diaporama__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chru-etab-diaporama__label {
    padding: 10px 16px;
    background: rgba(20,68,107,0.85);
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* ============================================
   BODY : contenu principal
   ============================================ */
.chru-etab__body {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 48px 80px;
}

/* D4 — Layout avec sommaire sticky à gauche (consigne client 2026-06-18) :
   réutilise `.chru-service-layout` mais avec padding propre au template
   structure. Sur mobile, le sommaire passe au-dessus du body. */
.chru-etab__layout-wrap {
    max-width: var(--container-max, 1320px);
    margin: 0 auto;
    padding: 0 24px;
}
.chru-etab__layout {
    padding: 48px 0;
}
.chru-etab__body--with-sommaire {
    /* le layout grid parent gère la largeur ; on neutralise les padding
       latéraux du body (déjà appliqués par le container parent).
       ⚠️ `margin: 0` est INDISPENSABLE (retour client 05/08/2026, module
       « Se rendre dans un service » étriqué sur Heydenreich) : la règle de
       base `.chru-etab__body` pose `margin: 0 auto`, jamais neutralisée ici
       avant. Dans une grille, des marges gauche/droite `auto` empêchent
       l'item de s'étirer sur toute la piste (975px) — il se réduit à la
       largeur de son contenu et se recentre dedans (mesuré : 376px au lieu
       de 975px, centré). Vérifié : `margin:0` seul suffit, 376px → 975px. */
    max-width: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
/* ⚠️ Retour client 05/08/2026 : le titre « Sommaire » passait sous le header
 * sticky au défilement. Cause : `top: 24px` en dur ignorait `--header-height`
 * (150px desktop / 60px ≤1024px, variables.css) — contrairement au composant
 * générique `.chru-sommaire` (components.css) dont c'est la source unique.
 * Mesuré : header compact = 74px de haut, sommaire épinglé à top:24 → le
 * titre démarrait à y=56, recouvert sur 18px par le bas du header (74-56).
 * Fix : même formule que `.chru-sommaire` et que les autres gabarits à
 * sommaire (single-service.css, single-ecole.css, single-formation.css). */
.chru-sommaire--structure {
    position: sticky;
    top: calc(var(--header-height, 150px) + 20px);
    align-self: start;
}
/* Sommaire structure : l'ancien style de liens (16px/1.35) écrasait le style
   sommaire prévu (interligne resserré). Résultat : les 2 lignes d'un item qui
   wrappe étaient plus espacées que 2 items distincts → « pas de gap ». On
   resserre l'interligne des items ET on augmente le gap inter-items pour que la
   séparation entre items soit clairement plus grande que le retour à la ligne. */
/* B1 (Marie 31/07/2026) : « le sommaire ne correspond pas à celui des pages
   service (espace entre chaque <li>) ». Cette surcharge imposait 22px là où
   tout le reste du site est à 10px (components.css) — supprimée, les structures
   héritent désormais de la valeur commune. */
.chru-sommaire--structure .chru-sommaire__list .chru-sommaire__link {
    line-height: 1.25;
}
@media (max-width: 1024px) {
    .chru-etab__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .chru-sommaire--structure {
        position: static;
    }
}

/* Chapô body */
.chru-etab__chapo {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--chru-primary);
    margin-bottom: 48px;
    max-width: 860px;
}

/* === Sections H2 numérotées === */
.chru-etab__section {
    margin-bottom: 64px;
}
.chru-etab__section:last-child { margin-bottom: 0; }

/* Retour Marie KUSY 05/08/2026 (structure « Maternité régionale ») : le titre
   « Galerie photos » collait le dernier bloc du contenu rédigé (mesuré à 0px).
   Les sections ne portent que leur marge BASSE, ce qui suffit tant qu'elles se
   suivent ; la galerie est la seule à être précédée du contenu éditorial, qui
   ne pose rien sous son dernier bloc. On lui rend ici le rythme des sections.
   Sélecteur d'adjacence : sans contenu rédigé, la galerie suit une autre
   section et les deux marges fusionnent normalement — pas de cumul. */
.chru-content + .chru-etab__section { margin-top: 64px; }

.chru-etab__section-title {
    font-size: var(--h2-size);
    font-weight: 700;
    color: var(--chru-secondary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(20,68,107,0.1);
}

/* === Plan du site === */
.chru-etab-plan {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.chru-etab-plan__img {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chru-accent);
    font-weight: 600;
    font-size: 16px;
    border: 1px solid rgba(20,68,107,0.1);
    background: linear-gradient(135deg, #e8eef3 0%, #d0dde8 100%);
}
.chru-etab-plan__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.chru-etab-plan__download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--chru-secondary);
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chru-etab-plan__download:hover { color: var(--chru-accent); }

/* === Section header : Se rendre dans un service === */
.chru-etab-svc-header {
    text-align: center;
    margin-bottom: 24px;
}
/* Variante alignée à gauche (consigne client 2026-06-18). */
.chru-etab-svc-header--left {
    text-align: left;
}
.chru-etab-svc-header__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--chru-secondary);
    margin: 0 0 8px;
}
.chru-etab-svc-header__accent {
    color: var(--chru-accent);
}
.chru-etab-svc-header__subtitle {
    font-size: 16px;
    color: var(--chru-primary);
    margin: 0;
}

/* === Liste services 2 colonnes (consigne client 2026-06-18) ===
   Remplace l'affichage tuiles (chru-svc-card) sur les pages où le bloc est
   présent. Liste à puces, sans gélule de catégorie. */
.chru-svc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 32px;
}
@media (max-width: 600px) {
    .chru-svc-list { column-count: 1; }
}
.chru-svc-list__item {
    break-inside: avoid;
    margin-bottom: 6px;
    padding-left: 18px;
    position: relative;
    line-height: 1.45;
}
.chru-svc-list__item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chru-blue-light, #0096D6);
}
.chru-svc-list__link {
    color: var(--chru-blue-service, #14446B);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}
.chru-svc-list__link:hover,
.chru-svc-list__link:focus-visible {
    color: var(--chru-blue-light, #0096D6);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.chru-svc-list__name {
    font-weight: 600;
}
.chru-svc-list__location {
    display: inline;
    margin-left: 6px;
    color: var(--chru-gray-text, #6F6F6F);
    font-weight: 500;
    font-size: 14px;
}
.chru-svc-list__location::before {
    content: "— ";
}

/* === Search Card === */
.chru-svc-search-card {
    background: var(--chru-grey);
    border-radius: 30px;
    padding: 24px;
    margin-bottom: 24px;
}
.chru-svc-search-wrapper {
    position: relative;
}
.chru-svc-search__icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--chru-primary);
    pointer-events: none;
    z-index: 1;
    opacity: 0.45;
}
input.chru-svc-search__input,
input[type="text"].chru-svc-search__input {
    width: 100%;
    padding: 18px 18px 18px 56px;
    font-size: 16px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 30px;
    outline: none;
    transition: all 0.2s;
    font-family: var(--font-family);
    background: white;
    color: var(--chru-primary);
    -webkit-appearance: none;
    appearance: none;
}
input.chru-svc-search__input:focus,
input[type="text"].chru-svc-search__input:focus {
    border-color: var(--chru-accent);
    box-shadow: 0 0 0 4px rgba(0,150,214,0.1);
}
input.chru-svc-search__input::placeholder {
    color: #9CA3AF;
}

/* === Autocomplete Dropdown === */
.chru-svc-autocomplete-wrapper {
    position: relative;
}
.chru-svc-autocomplete {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    border: 1px solid #E5E7EB;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.chru-svc-autocomplete.is-active {
    display: block;
    animation: chruSvcDropIn 0.2s ease;
}
@keyframes chruSvcDropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.chru-svc-autocomplete__header {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    background: var(--chru-grey);
    border-bottom: 1px solid #E5E7EB;
}
.chru-svc-autocomplete__item {
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F3F4F6;
    transition: all 0.15s;
    text-decoration: none;
    color: inherit;
}
.chru-svc-autocomplete__item:last-child { border-bottom: none; }
.chru-svc-autocomplete__item:hover,
.chru-svc-autocomplete__item.is-selected {
    background: rgba(20,68,107,0.06);
}
.chru-svc-autocomplete__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--chru-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chru-accent);
    flex-shrink: 0;
}
.chru-svc-autocomplete__item:hover .chru-svc-autocomplete__icon,
.chru-svc-autocomplete__item.is-selected .chru-svc-autocomplete__icon {
    background: var(--chru-accent);
    color: white;
}
.chru-svc-autocomplete__text {
    flex: 1;
    min-width: 0;
}
.chru-svc-autocomplete__name {
    font-size: 15px;
    font-weight: 500;
    color: var(--chru-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chru-svc-autocomplete__building {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chru-svc-autocomplete__arrow {
    color: #D1D5DB;
    flex-shrink: 0;
}
.chru-svc-autocomplete__item:hover .chru-svc-autocomplete__arrow {
    color: var(--chru-accent);
}
.chru-svc-autocomplete__empty {
    padding: 24px 16px;
    text-align: center;
    color: #888;
}

/* === Search Meta: count + filter tags === */
.chru-svc-search-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--chru-gray-border, #E1E1E1);
}
.chru-svc-results-count {
    font-size: 16px;
    color: var(--chru-primary);
}
.chru-svc-results-count strong {
    color: var(--chru-accent);
    font-weight: 600;
}
.chru-svc-filter-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
button.chru-svc-filter-tag {
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--chru-gray-border, #E1E1E1);
    background: white;
    color: var(--chru-primary);
    font-family: var(--font-family);
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    width: auto;
}
button.chru-svc-filter-tag:hover,
button.chru-svc-filter-tag.is-active {
    background: var(--chru-secondary);
    color: white;
    border-color: var(--chru-secondary);
}

/* === Service Cards === */
.chru-svc-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chru-svc-card {
    background: white;
    border-radius: 30px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid var(--chru-gray-border, #E1E1E1);
    text-decoration: none;
    color: inherit;
}
.chru-svc-card:hover {
    border-color: var(--chru-accent);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transform: translateX(6px);
}
.chru-svc-card__info {
    flex: 1;
    min-width: 0;
}
.chru-svc-card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--chru-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.4;
}
.chru-svc-card__type {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.chru-svc-card__type--consultation {
    background: rgba(0,150,214,0.15);
    color: var(--chru-accent);
}
.chru-svc-card__type--hospitalisation {
    background: #D1FAE5;
    color: #065F46;
}
.chru-svc-card__type--urgences {
    background: #FDE6EA;
    color: #B40A29;
}
.chru-svc-card__type--formation {
    background: #FEF3C7;
    color: #92400E;
}
.chru-svc-card__type--autre {
    background: #F3E8FF;
    color: #6B21A8;
}
.chru-svc-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--chru-primary);
}
.chru-svc-card__location svg {
    flex-shrink: 0;
    color: var(--chru-accent);
}
.chru-svc-card__arrow {
    color: var(--chru-gray-border, #E1E1E1);
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: 16px;
}
.chru-svc-card:hover .chru-svc-card__arrow {
    color: var(--chru-secondary);
    transform: translateX(4px);
}
.chru-svc-highlight {
    background: linear-gradient(120deg, rgba(0,150,214,0.15), rgba(0,150,214,0.25));
    padding: 1px 4px;
    border-radius: 3px;
}

/* === No Results === */
.chru-svc-no-results {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 30px;
    border: 1px solid var(--chru-gray-border, #E1E1E1);
}
.chru-svc-no-results__icon {
    width: 80px;
    height: 80px;
    background: var(--chru-grey);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--chru-accent);
}
.chru-svc-no-results h3 {
    font-size: 20px;
    color: var(--chru-secondary);
    margin-bottom: 8px;
}
.chru-svc-no-results p {
    color: #888;
}

/* === Pagination === */
.chru-svc-pagination-wrap {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
.chru-svc-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--chru-grey);
    padding: 10px 14px;
    border-radius: 50px;
}
.chru-svc-pagination__btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--chru-primary);
    transition: all 0.2s;
    font-family: var(--font-family);
}
.chru-svc-pagination__btn:hover:not(:disabled):not(.is-active) {
    background: white;
}
.chru-svc-pagination__btn.is-active {
    background: var(--chru-secondary);
    color: white;
}
.chru-svc-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.chru-svc-pagination__btn--nav {
    color: var(--chru-accent);
}
.chru-svc-pagination__btn--nav:hover:not(:disabled) {
    background: rgba(0,150,214,0.1);
}
.chru-svc-pagination__ellipsis {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chru-primary);
    font-size: 16px;
}
.chru-svc-pagination__info {
    display: none;
    font-size: 14px;
    color: var(--chru-primary);
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--chru-gray-border, #E1E1E1);
}
@media (min-width: 640px) {
    .chru-svc-pagination__info { display: flex; align-items: center; }
}

/* === Modal === */
.chru-svc-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(13,43,78,0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.chru-svc-modal-overlay.is-active {
    display: flex;
}
.chru-svc-modal {
    background: white;
    border-radius: 30px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: chruSvcModalSlide 0.3s ease;
}
@keyframes chruSvcModalSlide {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.chru-svc-modal__header {
    background: var(--chru-secondary);
    padding: 28px;
    color: white;
    position: relative;
}
.chru-svc-modal__close,
.chru-svc-modal__close:hover,
.chru-svc-modal__close:focus,
.chru-svc-modal__close:focus-visible {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important; height: 36px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: #fff !important;
    box-shadow: none !important;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.chru-svc-modal__close:hover,
.chru-svc-modal__close:focus-visible {
    background: rgba(255,255,255,0.35) !important;
}
.chru-svc-modal__close svg {
    display: block;
    color: #fff;
    stroke: #fff;
}
.chru-svc-modal__close svg path {
    stroke: #fff;
}
.chru-svc-modal__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-right: 40px;
    color: white;
}
/* `.chru-svc-modal__building` (bandeau de l'en-tête) retiré le 04/08/2026 :
   le bâtiment est désormais une ligne de la liste d'informations de la pop-up
   (D2), plus un sous-titre. Règle supprimée pour ne pas laisser de CSS orphelin. */
.chru-svc-modal__body {
    padding: 28px;
    overflow-y: auto;
    max-height: 50vh;
}
.chru-svc-modal__section h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--chru-primary);
    margin-bottom: 12px;
    font-weight: 600;
}
.chru-svc-modal__related {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chru-svc-modal__related-tag {
    background: #EFF2F5 !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--chru-secondary, #14446B) !important;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    border: 0 !important;
    outline: none;
    box-shadow: none !important;
    font-family: inherit;
    line-height: 1.3;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    text-align: left;
}
.chru-svc-modal__related-tag:hover,
.chru-svc-modal__related-tag:focus-visible {
    background: var(--chru-secondary, #14446B) !important;
    color: #fff !important;
    outline: none;
}
/* Reset focus persistant après click (sinon fond rose global) */
.chru-svc-modal__related-tag:focus:not(:focus-visible),
.chru-svc-modal__related-tag:active {
    background: #EFF2F5 !important;
    color: var(--chru-secondary, #14446B) !important;
}

/* Force pill-shape + bordure uniforme sur les boutons du modal
   (override archive-documentheque.css qui met 2px + 10px radius) */
.chru-svc-modal__footer .chru-btn,
.chru-svc-modal__close-btn.chru-btn {
    border-radius: var(--radius-pill, 30px) !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;
}
.chru-svc-modal__footer .chru-btn--outline,
.chru-svc-modal__close-btn.chru-btn--outline {
    border-color: var(--chru-blue-service, #14446B) !important;
}
.chru-svc-modal__footer .chru-btn--primary {
    border-color: var(--chru-blue-service, #14446B) !important;
}
.chru-svc-modal__footer {
    padding: 20px 28px;
    border-top: 1px solid var(--chru-gray-border, #E1E1E1);
    display: flex;
    gap: 12px;
}
.chru-svc-modal__footer .chru-btn {
    flex: 1;
    justify-content: center;
}
.chru-svc-modal__close-btn {
    cursor: pointer;
}

/* === Tuiles bâtiments === */
.chru-etab-batiments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.chru-batiment-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    border: 1px solid rgba(20,68,107,0.12);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
}
.chru-batiment-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--chru-accent);
}
.chru-batiment-card__image {
    height: 160px;
    background: linear-gradient(135deg, #d0dde8 0%, #b0c4d6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--chru-secondary);
    font-weight: 600;
    overflow: hidden;
}
.chru-batiment-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chru-batiment-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.chru-batiment-card__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--chru-secondary);
}
.chru-batiment-card__desc {
    font-size: 14px;
    color: var(--chru-primary);
    line-height: 1.5;
}
.chru-batiment-card__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--chru-accent);
    margin-top: auto;
    padding-top: 8px;
}

/* === Galerie photo — carrousel horizontal === */
.chru-etab-galerie-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chru-etab-galerie-carousel__viewport {
    flex: 1;
    /* G1 (Marie 31/07/2026) « Chouette ! mais on ne peut pas la faire défiler »
     * (Bâtiment Philippe Canton). Piège classique de flexbox : un élément flex a
     * `min-width: auto`, il refuse donc de descendre sous la largeur cumulée de
     * son contenu. Le viewport mesurait 2059px pour une colonne de 1392px →
     * `scrollWidth === clientWidth`, donc plus rien à faire défiler et le bouton
     * « suivant » se désactivait tout seul, images tronquées à droite.
     * `min-width: 0` lui rend le droit de rétrécir. */
    min-width: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.chru-etab-galerie-carousel__track {
    display: flex;
    gap: 12px;
    transition: transform 0.4s ease;
}
.chru-etab-galerie-carousel__item {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.chru-etab-galerie-carousel__link {
    display: block;
    height: 220px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f4f7;
    padding: 0;
    text-decoration: none;
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.chru-etab-galerie-carousel__link:hover,
.chru-etab-galerie-carousel__link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(20,68,107,0.25);
}
.chru-etab-galerie-carousel__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}
.chru-etab-galerie-carousel__legend {
    font-size: 13px;
    line-height: 1.45;
    color: var(--chru-primary, #2D4356);
}
.chru-etab-galerie-carousel__nav,
.chru-etab-galerie-carousel__nav:hover,
.chru-etab-galerie-carousel__nav:focus,
.chru-etab-galerie-carousel__nav:focus-visible,
.chru-etab-galerie-carousel__nav:active {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--chru-grey, #F6F6F6);
    color: var(--chru-secondary, #14446B);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease, opacity 160ms ease;
    box-shadow: none;
    outline: none;
}
.chru-etab-galerie-carousel__nav:hover {
    background: #e5e8ec;
}
.chru-etab-galerie-carousel__nav:focus-visible {
    box-shadow: 0 0 0 3px rgba(20,68,107,0.25);
}
.chru-etab-galerie-carousel__nav:disabled,
.chru-etab-galerie-carousel__nav[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
}
@media (max-width: 768px) {
    .chru-etab-galerie-carousel__item { flex: 0 0 220px; }
    .chru-etab-galerie-carousel__link { height: 180px; }
}

/* ============================================
   Lightbox galerie
   ============================================ */
.chru-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10, 25, 40, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px 64px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.chru-lb.is-open {
    display: flex;
    opacity: 1;
}
.chru-lb__figure {
    margin: 0;
    max-width: min(1200px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.chru-lb__img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
    background: #000;
}
.chru-lb__caption {
    /* Caption masquée — retour client : pas d'encart de description dans la galerie. */
    display: none;
}
.chru-lb button.chru-lb__close,
.chru-lb button.chru-lb__nav {
    position: absolute;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    line-height: 1;
    font-size: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.chru-lb button.chru-lb__close:hover,
.chru-lb button.chru-lb__nav:hover,
.chru-lb button.chru-lb__close:focus-visible,
.chru-lb button.chru-lb__nav:focus-visible {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
}
.chru-lb button.chru-lb__close svg,
.chru-lb button.chru-lb__nav svg { display: block; }
.chru-lb button.chru-lb__close { top: 20px; right: 20px; }
.chru-lb button.chru-lb__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.chru-lb button.chru-lb__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.chru-lb__counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    opacity: 0.7;
    letter-spacing: 0.05em;
}
@media (max-width: 640px) {
    .chru-lb { padding: 16px; }
    .chru-lb__close { top: 10px; right: 10px; width: 40px; height: 40px; }
    .chru-lb__nav { width: 40px; height: 40px; }
    .chru-lb__nav--prev { left: 10px; }
    .chru-lb__nav--next { right: 10px; }
}

/* Liens complémentaires (repeater) */
.chru-etab-liens__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chru-etab-liens__list li { margin: 0; }
.chru-etab-liens__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--chru-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chru-etab-liens__list a svg { flex: 0 0 auto; color: var(--chru-accent); }
.chru-etab-galerie__links a:hover { color: var(--chru-accent); }

/* ============================================
   ZONE FULLWIDTH — Événements
   ============================================ */
.chru-etab__fullwidth {
    background: var(--chru-grey);
    padding: 64px 0;
}
.chru-etab__fullwidth-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 80px;
}
.chru-etab__fullwidth h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--chru-secondary);
    margin: 0 0 32px;
}

.chru-evt-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}
.chru-evt-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: white;
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.chru-evt-card:hover { box-shadow: var(--shadow-md); }
.chru-evt-card__image {
    height: 160px;
    background: linear-gradient(135deg, #c5e1ff 0%, #7ca1cc 100%);
    position: relative;
    overflow: hidden;
}
.chru-evt-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chru-evt-card__date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: white;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.chru-evt-card__date-day {
    font-size: 22px;
    font-weight: 800;
    color: var(--chru-secondary);
    line-height: 1;
}
.chru-evt-card__date-month {
    font-size: 11px;
    font-weight: 600;
    color: var(--chru-accent);
    text-transform: uppercase;
}
.chru-evt-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.chru-evt-card__tag {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: var(--radius-pill, 30px);
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: var(--chru-accent);
}
.chru-evt-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--chru-secondary);
    line-height: 1.3;
}

/* ============================================
   NAVIGATION PREV/NEXT
   ============================================ */
.chru-etab-nav {
    border-top: 1px solid rgba(0,0,0,0.08);
}
.chru-etab-nav .chru-container {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 32px 80px;
}
.chru-etab-nav__prev,
.chru-etab-nav__next {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--chru-primary);
    max-width: 45%;
    transition: color var(--transition-fast);
}
.chru-etab-nav__prev:hover,
.chru-etab-nav__next:hover { color: var(--chru-accent); }
.chru-etab-nav__next { margin-left: auto; text-align: right; }
.chru-etab-nav__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}
.chru-etab-nav__title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.chru-etab-nav svg { flex-shrink: 0; color: var(--chru-accent); }

/* ============================================
   VARIANTE BÂTIMENT
   ============================================ */

/* Hero bâtiment : plus compact, photo + texte */
.chru-bat-hero {
    display: flex;
    min-height: 340px;
    overflow: hidden;
}
.chru-bat-hero__image {
    flex: 0 0 50%;
    background: linear-gradient(135deg, #b8d4e8 0%, #7ca1cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chru-secondary);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 24px;
    overflow: hidden;
}
.chru-bat-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chru-bat-hero__content {
    flex: 1;
    background: var(--chru-secondary);
    color: white;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.chru-bat-hero__parent {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chru-bat-hero__parent a { color: white; text-decoration: underline; text-underline-offset: 3px; }
.chru-bat-hero__title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.15;
}
.chru-bat-hero__chapo {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.85;
    max-width: 480px;
}

/* Body bâtiment : full width content */
.chru-bat__body {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 48px 80px;
}

/* Services par niveau */
.chru-bat-services {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.chru-bat-services__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 16px;
}
.chru-bat-services__item a {
    text-decoration: none;
    color: var(--chru-primary);
    font-size: 15px;
    font-weight: 600;
    flex: 1;
    transition: color var(--transition-fast);
}
.chru-bat-services__item a:hover { color: var(--chru-accent); }
.chru-bat-services__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--chru-primary);
    flex: 1;
}
.chru-bat-services__level {
    font-size: 13px;
    font-weight: 600;
    color: var(--chru-accent);
    background: rgba(25,124,170,0.08);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Galerie photos légendées */
.chru-bat-galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.chru-bat-galerie__item {
    border-radius: 10px;
    overflow: hidden;
}
.chru-bat-galerie__img {
    height: 180px;
    background: linear-gradient(135deg, #dce8f0 0%, #c0d4e2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--chru-secondary);
    font-weight: 600;
    text-align: center;
    padding: 8px;
    overflow: hidden;
}
.chru-bat-galerie__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chru-bat-galerie__legend {
    padding: 10px 12px;
    background: var(--chru-grey);
    font-size: 13px;
    color: var(--chru-primary);
    line-height: 1.4;
}

/* Commodités */
.chru-bat-amenities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.chru-bat-amenity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--chru-grey);
    border-radius: 10px;
}
.chru-bat-amenity__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--chru-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.chru-bat-amenity__text {
    font-size: 15px;
    font-weight: 600;
    color: var(--chru-primary);
}

/* Notes déplacement */
.chru-bat-notes {
    background: #fef9ed;
    border-left: 4px solid var(--chru-formation, #fab200);
    border-radius: 0 10px 10px 0;
    padding: 24px;
}
.chru-bat-notes__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--chru-secondary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chru-bat-notes h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--chru-secondary);
    margin: 16px 0 8px;
}
.chru-bat-notes h4:first-of-type { margin-top: 0; }
.chru-bat-notes ul {
    padding-left: 20px;
    margin: 0;
}
.chru-bat-notes li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
    color: var(--chru-primary);
}

/* Anecdote « Le saviez-vous » */
.chru-bat-anecdote {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    background: var(--chru-grey);
    border-radius: var(--radius-md, 14px);
    padding: 32px;
}
.chru-bat-anecdote__image {
    flex: 0 0 240px;
    height: 200px;
    border-radius: 10px;
    background: linear-gradient(135deg, #c5e1ff 0%, #92b8d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--chru-secondary);
    font-weight: 600;
    overflow: hidden;
}
.chru-bat-anecdote__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chru-bat-anecdote__content {
    flex: 1;
}
.chru-bat-anecdote__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chru-accent);
    margin-bottom: 8px;
}
.chru-bat-anecdote__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--chru-primary);
}

/* Section historique */
.chru-bat-histoire {
    background: white;
    border: 1px solid rgba(20,68,107,0.1);
    border-radius: var(--radius-md, 14px);
    padding: 28px 32px;
}
.chru-bat-histoire__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--chru-secondary);
    margin-bottom: 12px;
}
.chru-bat-histoire__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--chru-primary);
    margin-bottom: 16px;
}
.chru-bat-histoire__link {
    font-size: 15px;
    font-weight: 600;
    color: var(--chru-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chru-bat-histoire__link:hover { color: var(--chru-accent); }

/* Section generique h2 bâtiment */
.chru-bat__section {
    margin-bottom: 56px;
}
.chru-bat__section:last-child { margin-bottom: 0; }
.chru-bat__section-title {
    font-size: var(--h2-size);
    font-weight: 700;
    color: var(--chru-secondary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(20,68,107,0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .chru-etab-hero-band { padding: 24px 24px 28px; }
    .chru-etab-hero-chapo { padding: 24px 24px; }
    .chru-etab-hero-cards { flex-direction: column; padding: 0 24px; gap: 20px; }
    .chru-etab-acces-card { flex: none; width: 100%; }
    .chru-etab-hero-photo__track { min-height: 300px; }
    .chru-etab-hero-footer { padding: 16px 24px 0; flex-direction: column; }

    .chru-etab__body,
    .chru-bat__body { padding: 32px 24px; }
    .chru-etab__fullwidth-inner { padding: 0 24px; }
    .chru-etab-nav .chru-container { padding: 32px 24px; }
    .chru-etab-aide { padding: 16px 24px; margin: 0; }
    .chru-etab-diaporama { padding: 24px 24px 0; }

    .chru-etab-galerie { grid-template-columns: repeat(2, 1fr); }
    .chru-bat-galerie { grid-template-columns: repeat(2, 1fr); }

    .chru-svc-search-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
    .chru-svc-filter-tags { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .chru-svc-filter-tag { white-space: nowrap; }

    .chru-bat-hero { flex-direction: column; }
    .chru-bat-hero__image { flex: none; height: 260px; }
    .chru-bat-hero__content { padding: 32px 24px; }

    .chru-bat-anecdote { flex-direction: column; }
    .chru-bat-anecdote__image { flex: none; width: 100%; height: 200px; }
}

@media (max-width: 768px) {
    .chru-etab-hero-band { padding: 20px 16px 24px; }
    .chru-etab-hero__title { font-size: 28px; }
    .chru-etab-hero-chapo { padding: 20px 16px; font-size: 18px; }
    .chru-etab-hero-cards { padding: 0 16px; }
    .chru-etab-acces-card { padding: 24px 20px; }
    .chru-etab-acces__bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
    .chru-etab-acces__handicaps-group { margin-left: 0; }
    .chru-etab-hero-footer { padding: 12px 16px 0; }

    .chru-etab__body,
    .chru-bat__body { padding: 24px 16px; }
    .chru-etab__fullwidth-inner { padding: 0 16px; }
    .chru-etab__fullwidth { padding: 32px 0; }

    .chru-etab-diaporama { padding: 16px 16px 0; }
    .chru-etab-diaporama__grid { flex-direction: column; }
    .chru-etab-aide { padding: 12px 16px; flex-direction: column; text-align: center; }

    .chru-etab-batiments { grid-template-columns: 1fr; }
    .chru-etab-galerie { grid-template-columns: 1fr 1fr; }
    .chru-etab-galerie__item--wide { grid-column: span 1; }

    .chru-bat-hero__content { padding: 24px 16px; }
    .chru-bat-hero__title { font-size: 24px; }
    .chru-bat-galerie { grid-template-columns: 1fr; }
    .chru-bat-amenities { grid-template-columns: 1fr; }

    .chru-evt-card { flex: 0 0 240px; }

    .chru-svc-search-card { padding: 16px; border-radius: 20px; }
    .chru-svc-card { padding: 16px; border-radius: 20px; }
    .chru-svc-card__name { font-size: 15px; }
    .chru-svc-modal { margin: 10px; max-height: 95vh; border-radius: 20px; }
    .chru-svc-modal__header { padding: 20px; }
    .chru-svc-modal__body { padding: 20px; }
    .chru-svc-modal__footer { flex-direction: column; }
    .chru-svc-pagination { padding: 6px 8px; }
    .chru-svc-pagination__btn { width: 36px; height: 36px; font-size: 14px; }

    .chru-etab-nav .chru-container {
        flex-direction: column;
        gap: 16px;
        padding: 24px 16px;
    }
    .chru-etab-nav__prev,
    .chru-etab-nav__next { max-width: 100%; }
    .chru-etab-nav__next { text-align: left; flex-direction: row-reverse; }
}

/* === Carte bleue : forcer blanc sur tous les liens/textes ===
   ⚠️ `:not(.chru-btn)` est INDISPENSABLE : cette règle (0,1,1) bat la couleur
   de `.chru-btn--white` (0,1,0) et rendait le bouton « Calculez votre
   itinéraire » blanc sur blanc, donc invisible — exactement le bug du bouton
   Info utile remonté 3 fois par Marie. La bonne parade est d'exclure les
   boutons ici, JAMAIS de redéfinir un `.chru-btn--*` dans ce fichier :
   components.css reste la source unique. */
.chru-etab-acces-card a:not(.chru-btn),
.chru-etab-acces-card a:not(.chru-btn):visited,
.chru-etab-acces-card a:where(:not(.wp-element-button)):not(.chru-btn) {
    color: #fff;
}
.chru-etab-acces-card a:not(.chru-btn):hover,
.chru-etab-acces-card a:not(.chru-btn):focus {
    color: #fff;
    opacity: 0.75;
}

/* Numero de telephone : blanc + souligne */
a.chru-etab-acces__phone-number,
a.chru-etab-acces__phone-number:visited {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
a.chru-etab-acces__phone-number:hover {
    color: #fff;
    opacity: 0.8;
}

/* Fix doublon picto M'y rendre : masquer le chevron (12x12) */
.chru-etab-acces__link > svg[width="12"] {
    display: none;
}

/* ============================================
   Aide accompagnement — conteneur du bloc info-utile
   (le bloc garde son style natif, on gère juste la largeur/centrage)
   ============================================ */
.chru-etab-aide-wrap {
    max-width: var(--container-max);
    margin: 24px auto;
}
@media (max-width: 1200px) {
    .chru-etab-aide-wrap { margin: 24px 40px; max-width: none; }
}
@media (max-width: 640px) {
    .chru-etab-aide-wrap { margin: 16px 16px; }
}

/* ============================================
   Contenu éditeur dans le body établissement
   (h2/h3/listes/paragraphes venant de the_content())
   ============================================ */
.chru-etab__body .chru-content { max-width: 860px; }

.chru-etab__body .chru-content > h2,
.chru-etab__body .chru-content > h2.wp-block-heading {
    font-size: var(--h2-size, 36px);
    font-weight: 700;
    color: var(--chru-blue-service, #14446B);
    margin: 48px 0 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(20,68,107,0.1);
    line-height: 1.2;
}
/* Ancres (ex. lien « Stationnement » du hero vers #stationnement) : décalage
   pour ne pas passer sous le header sticky — sinon on atterrit sous le titre. */
.chru-etab__body .chru-content h2[id],
.chru-etab__body .chru-content h3[id],
.chru-etab__body [id] {
    scroll-margin-top: calc(var(--header-height, 150px) + 20px);
}
.chru-etab__body .chru-content > h2:first-child,
.chru-etab__body .chru-content > h2.wp-block-heading:first-child { margin-top: 0; }

.chru-etab__body .chru-content > h3,
.chru-etab__body .chru-content > h3.wp-block-heading {
    font-size: 22px;
    font-weight: 600;
    color: var(--chru-blue-canard, #0096D6);
    margin: 28px 0 10px;
    line-height: 1.3;
}

/* F (Marie 31/07/2026) « Bloc Important : couleur du texte à corriger A01000 ».
 * Le bloc pose bien `--chru-dark-red` sur `.chru-important__text`, mais cette
 * règle de typo éditoriale (0,2,1) est chargée APRÈS blocks-overrides.css et
 * gagnait donc à spécificité égale — le texte du bloc rendait #2D4356.
 * Les paragraphes INTERNES aux blocs maison (classe en `__`) sont exclus :
 * chaque bloc gère ses propres couleurs. Même parade que sur les pages
 * formation le 24/07/2026 (`h3:not([class*="__"])`). */
.chru-etab__body .chru-content p:not([class*="__"]) {
    font-size: 16px;
    line-height: 1.65;
    color: var(--chru-primary);
    margin: 0 0 14px;
}

/* Les paragraphes de bloc gardent la typo de taille/interligne du contenu,
 * mais pas sa couleur. */
.chru-etab__body .chru-content p[class*="__"] {
    font-size: 16px;
    line-height: 1.65;
}

.chru-etab__body .chru-content ul,
.chru-etab__body .chru-content ul.wp-block-list,
.chru-etab__body .chru-content ol {
    margin: 0 0 20px;
    padding-left: 24px;
    list-style: disc;
}
.chru-etab__body .chru-content ol { list-style: decimal; }
.chru-etab__body .chru-content ul li,
.chru-etab__body .chru-content ol li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--chru-primary);
    margin-bottom: 8px;
    padding-left: 4px;
}
.chru-etab__body .chru-content ul li::marker {
    color: var(--chru-blue-light, #009FE3);
}
/* Retour Marie 06/08/2026 — « Bloc information utile : passer les puces en blanc »
   (capture : fiche Heydenreich). La règle ci-dessus vise les listes ÉDITORIALES
   de la fiche, mais elle attrape aussi les listes écrites DANS un bloc maison :
   sur le fond marine du bloc « Information utile », la puce bleu clair tombe à
   ~2,4:1 et se voit à peine. Le marqueur suit désormais la couleur du texte du
   bloc (blanc ici, rouge foncé dans « Important »), donc plus aucun bloc coloré
   ne peut hériter d'une puce qui ne lui appartient pas.
   Spécificité 0,3,2 > 0,2,2 : c'est ce qui fait passer la règle devant. */
.chru-etab__body .chru-content [class*="wp-block-chru-"] li::marker {
    color: inherit;
}
.chru-etab__body .chru-content strong { font-weight: 700; color: var(--chru-secondary); }

/* Neutraliser le margin-top générique .chru-content > * + * pour nos espacements dédiés */
.chru-etab__body .chru-content > * + * { margin-top: 0; }

@media (max-width: 900px) {
    .chru-etab-aide { padding: 16px 24px; }
    /* La taille n'est plus forcée ici (Marie 13/08/2026, harmonisation des H2) :
     * ce 28px était le dernier vestige de l'époque où la règle desktop portait
     * le repli `var(--h2-size, 36px)`. Résultat mesuré avant correction : les
     * fiches structure affichaient en mobile des H2 PLUS GROS qu'en desktop
     * (28px contre 24px), et deux fois plus gros que les 20px de tous les
     * autres modèles. On laisse `--h2-size` faire son travail (20px ≤ 768px). */
    .chru-etab__body .chru-content h2,
    .chru-etab__body .chru-content h2.wp-block-heading { margin-top: 36px; }
    .chru-etab__body .chru-content h3,
    .chru-etab__body .chru-content h3.wp-block-heading { font-size: 20px; }
}

/* ============================================
 * Variante accessibilité du bloc info-utile
 * Différencie visuellement l'encart "aide accompagnement" (a11y / PMR)
 * du bloc d'info générique (bleu secondaire).
 * ============================================ */
.chru-info-utile.chru-info-utile--accessibilite {
    background: var(--chru-yellow, #FAB200);
}
/* Lisibilité : textes en bleu foncé sur fond jaune */
.chru-info-utile--accessibilite .chru-info-utile__title,
.chru-info-utile--accessibilite .chru-info-utile__content,
.chru-info-utile--accessibilite .chru-info-utile__content p,
.chru-info-utile--accessibilite .chru-info-utile__content h2,
.chru-info-utile--accessibilite .chru-info-utile__content h3,
.chru-info-utile--accessibilite .chru-info-utile__content strong,
.chru-info-utile--accessibilite .chru-info-utile__content li {
    color: var(--chru-secondary, #14446B);
    opacity: 1;
}
.chru-info-utile--accessibilite .chru-info-utile__content a:not(.chru-btn) {
    color: var(--chru-secondary, #14446B) !important;
    text-decoration: underline;
    font-weight: 700;
}
.chru-info-utile--accessibilite .chru-info-utile__content a:not(.chru-btn):hover,
.chru-info-utile--accessibilite .chru-info-utile__content a:not(.chru-btn):focus {
    color: var(--chru-accent, #003761) !important;
}
/* Le bouton du bloc (posé par block-links-buttons.php) est en variante
 * `--outline-white` : sur le fond JAUNE de cette variante, blanc sur blanc ne
 * marcherait pas. On l'inverse en bleu foncé, en gardant la même mécanique que
 * le design system (repos = liseré + libellé ; survol = fond plein + inverse). */
.chru-info-utile--accessibilite .chru-btn.chru-btn--outline-white {
    color: var(--chru-secondary, #14446B);
    border-color: var(--chru-secondary, #14446B);
}
.chru-info-utile--accessibilite .chru-btn.chru-btn--outline-white:hover,
.chru-info-utile--accessibilite .chru-btn.chru-btn--outline-white:focus,
.chru-info-utile--accessibilite .chru-btn.chru-btn--outline-white:focus-visible {
    background: var(--chru-secondary, #14446B);
    color: #fff;
    border-color: var(--chru-secondary, #14446B);
}
/* Picto intégré en filigrane décoratif dans le coin droit */
.chru-info-utile--accessibilite {
    position: relative;
    overflow: hidden;
}
.chru-info-utile--accessibilite .chru-info-utile__icon-wrap {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    opacity: 0.55;
    pointer-events: none;
}
.chru-info-utile--accessibilite .chru-info-utile__icon {
    width: 160px;
    height: 160px;
    max-height: none;
}
.chru-info-utile--accessibilite .chru-info-utile__icon path {
    fill: #FFF5D6;
}
.chru-info-utile--accessibilite .chru-info-utile__body {
    position: relative;
    z-index: 1;
    padding-right: 80px;
}

/* ============================================
 * Carte ressource (style partagé avec le bloc Gutenberg chru/ressource-card)
 * Intégrée ici pour les usages hors-bloc (ex: Plan du site)
 * ============================================ */
.chru-ressource-card {
    border-radius: 14px 0 0 14px;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
    position: relative;
}
.chru-ressource-card--default {
    background: var(--chru-grey, #f6f6f6);
    border-right: 4px solid var(--chru-secondary, #14446b);
}
.chru-ressource-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 45px;
}
.chru-ressource-card__title {
    color: var(--chru-secondary, #14446b);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}
.chru-ressource-card__text {
    color: var(--chru-primary, #2d4356);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 16px;
}
.chru-ressource-card__link {
    align-items: center;
    color: var(--chru-secondary, #14446b);
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    gap: 6px;
    text-decoration: underline;
    text-underline-offset: 4%;
}
.chru-ressource-card__link:hover,
.chru-ressource-card__link:focus-visible {
    color: var(--chru-accent, #0096D6);
}
.chru-ressource-card__link svg {
    flex-shrink: 0;
    height: 12px;
    width: 15px;
}
.chru-etab-plan__card {
    margin-top: 16px;
    max-width: 640px;
}
@media (max-width: 768px) {
    .chru-ressource-card__body {
        padding: 24px 20px;
    }
}

/* === D5 — Plan du site : image + intitulé personnalisable (consigne client 2026-06-18) === */
.chru-etab-plan-figure {
    margin: 0 0 20px;
    padding: 0;
}
.chru-etab-plan-figure__img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--chru-gray-border, #e1e1e1);
}

/* ------------------------------------------------------------------
   B3 (Marie KUSY 31/07/2026) — bouton de retour sous le sommaire.
   Remplace le lien « Revenir aux hôpitaux et centres de soins » qui était
   figé en haut de page (B2). Le bouton lui-même vient du design system
   (.chru-btn--outline) : on ne pose ici que son placement.
   ------------------------------------------------------------------ */
.chru-sommaire__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    text-align: left;
}
.chru-sommaire__back svg {
    flex-shrink: 0;
}

/* E3 (Marie KUSY 31/07/2026) — bouton facultatif de l'encart « Le saviez-vous ? ».
   Le bouton lui-même vient du design system (.chru-btn--outline) : on ne pose
   ici que son placement sous le texte. */
.chru-bat-anecdote__link {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
}

/* ==================================================================
   D1 + D2 (Marie KUSY 31/07/2026) — module « Se rendre dans un service »
   ================================================================== */

/* D1 — « Possibilité de lui faire un encadré pour bien délimiter le bloc ?
   Un petit liseré, pas trop foncé. » */
.chru-etab-svc--list {
    border: 1px solid var(--chru-gray-border, #E1E1E1);
    border-radius: 12px;
    padding: 28px;
    background: #fff;
}

/* Le déclencheur de la pop-up est un <button> (il ouvre une boîte de dialogue,
   il ne navigue pas) : on lui retire l'apparence native de bouton pour qu'il
   garde exactement le rendu du lien précédent. */
button.chru-svc-list__link {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

/* D2 — lignes d'information de la pop-up (site / bâtiment / étage / précisions) */
.chru-svc-modal__infos {
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chru-svc-modal__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: baseline;
}
.chru-svc-modal__row dt {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--chru-gray-text, #6F6F6F);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.chru-svc-modal__row dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--chru-blue-service, #14446B);
    white-space: pre-line; /* les retours à la ligne de la « Direction » */
}

/* ── B4 (31/08/2026) : infos pratiques et plan de localisation ──
   Retour Marie KUSY : « ajouter / modifier les informations figurant dans la
   pop-up : […] Direction, Infos pratiques (téléphone, horaires), plan de
   localisation ». */

.chru-svc-modal__group {
    margin: 0 0 24px;
}

.chru-svc-modal__group-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--chru-gray-text, #6F6F6F);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.chru-svc-modal__group .chru-svc-modal__infos {
    margin-bottom: 0;
}

/* Le numéro devient un lien tel: — souligné, car c'est un lien au fil d'une
   ligne d'information et rien d'autre ne le distingue (RGAA 10.6). */
.chru-svc-modal__row dd a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chru-svc-modal__row dd a:hover,
.chru-svc-modal__row dd a:focus-visible {
    text-decoration-thickness: 2px;
}

/* Note du groupe « Infos pratiques » : texte libre repris du bloc de contact,
   volontairement sans étiquette (cf. le commentaire de single-structure.php). */
.chru-svc-modal__note {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--chru-blue-text, #2D4356);
}

.chru-svc-modal__plan {
    margin: 0 0 8px;
}

.chru-svc-modal__plan a {
    display: block;
    border: 1px solid var(--chru-gray-border, #E1E1E1);
    border-radius: 12px;
    overflow: hidden;
}

.chru-svc-modal__plan img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .chru-etab-svc--list {
        padding: 20px 16px;
    }
    .chru-svc-modal__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ------------------------------------------------------------------
   G1 (Marie KUSY 31/07/2026) — « Chouette ! mais on ne peut pas la faire
   défiler » (galerie du Bâtiment Philippe Canton).

   Ce n'était pas le carrousel : c'est TOUTE la colonne de contenu qui
   débordait. `.chru-etab__body` est un élément de grille dont la piste fait
   975px ; la piste du carrousel (6 vignettes de 280px) lui donnait une largeur
   minimale de 2044px, qu'il imposait au corps entier — d'où 1045px de
   défilement horizontal sur la page, des images tronquées à droite, et un
   carrousel où `scrollWidth === clientWidth` : le JS désactivait donc le bouton
   « suivant », et plus rien ne défilait.

   Il faut les DEUX déclarations : `min-width:0` seul ne suffit pas ici (la
   piste de grille est en pixels fixes, c'est `max-width` qui plafonne
   réellement l'élément). Mesuré : débordement 1045px → 0, corps 2044px → 975px,
   carrousel de nouveau défilable.
   ------------------------------------------------------------------ */
.chru-etab__body {
    min-width: 0;
    max-width: 100%;
}