/* ══════════════════════════════════════════
   Annuaire CESU — Archive (cesu-archive__)
   ══════════════════════════════════════════ */

.cesu-archive {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

/* Wrapper neutre (pas de card, pas d'ombre, pas de fond) — le contenu vit
   directement sur le fond blanc de la page. Conservé en `<div>` HTML pour
   garder un point d'ancrage cohérent si on veut revenir à un encadrement. */
.cesu-archive__panel {
    /* no-op intentional */
}

/* ── Header (legacy, conservé pour resu.html.twig qui ne migre pas) ── */
.cesu-archive__header {
    margin-bottom: var(--spacing-lg);
    padding-top: var(--spacing-md);
}

.cesu-archive__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs);
    line-height: var(--line-height-tight);
}

.text-highlight--cesu {
    background: linear-gradient(transparent 60%, rgba(0, 150, 212, .18) 60%);
}

.cesu-archive__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin: 0;
}

/* ── Filter bar ── */
.cesu-archive__filters {
    margin-bottom: var(--spacing-lg);
}

.cesu-archive__filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.cesu-archive__filter {
    position: relative;
}

/* Champ unifié ville/CP/CESU : plus généreux qu'un filtre classique pour
   accueillir le placeholder long. `position: relative` est requis pour le
   dropdown autocomplete absolu. */
.cesu-archive__filter--search-unified {
    flex: 1 1 20rem;
    min-width: 16rem;
    position: relative;
}

/* Selects custom (zone défense / région / département) : largeur fixe pour
   éviter que le `.app-select` se redimensionne selon le label sélectionné
   (« ZDS Est » vs « Toutes les zones de défense »). Sans `flex-basis`
   contrôlé, le dropdown calé en `left: 0; right: 0` du parent suit la
   largeur du trigger et change à chaque sélection. */
.cesu-archive__filter--zd,
.cesu-archive__filter--region,
.cesu-archive__filter--dept {
    flex: 0 0 12rem;
    min-width: 12rem;
}
.cesu-archive__filter--zd .app-select,
.cesu-archive__filter--region .app-select,
.cesu-archive__filter--dept .app-select {
    width: 100%;
}

/* Harmonisation visuelle des champs de la barre filtres : input texte,
   bouton géoloc et triggers `_app_select` doivent partager la même hauteur
   et la même taille de texte. Override LOCAL (scope `.cesu-archive__filter`)
   pour ne pas affecter les autres usages du composant `_app_select`
   (formulaire membre, modale CESU, etc.). */
.cesu-archive__filter--zd .app-select__trigger,
.cesu-archive__filter--region .app-select__trigger,
.cesu-archive__filter--dept .app-select__trigger {
    height: 2.375rem;
    padding: 0 0.75rem;
    font-size: var(--font-size-sm);
}

.cesu-archive__input,
.cesu-archive__select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: #fff;
    transition: border-color var(--transition-fast);
    height: 2.375rem;
}

.cesu-archive__input:focus,
.cesu-archive__select:focus {
    outline: none;
    border-color: var(--color-section-cesu);
    box-shadow: 0 0 0 3px rgba(0, 150, 212, .12);
}

.cesu-archive__select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Location input with icon */
.cesu-archive__location-wrapper {
    position: relative;
}

.cesu-archive__location-icon {
    position: absolute;
    left: .625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    pointer-events: none;
    z-index: 1;
}

.cesu-archive__filter--search-unified .cesu-archive__input {
    padding-left: 2rem;
    padding-right: 2rem;
}

.cesu-archive__location-spinner {
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-section-cesu);
    border-radius: 50%;
    animation: cesu-spin 0.6s linear infinite;
}

@keyframes cesu-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Autocomplete */
.cesu-archive__autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 12rem;
    overflow-y: auto;
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cesu-archive__autocomplete-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    transition: background-color var(--transition-fast);
}

.cesu-archive__autocomplete-item:hover,
.cesu-archive__autocomplete-item--active {
    background: var(--color-section-cesu-light);
}

.cesu-archive__autocomplete-ctx {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* Geolocation button */
.cesu-archive__geolocate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-light);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.cesu-archive__geolocate-btn:hover {
    border-color: var(--color-section-cesu);
    color: var(--color-section-cesu);
    background: var(--color-section-cesu-light);
}

.cesu-archive__geolocate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cesu-archive__spinner-sm {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-section-cesu);
    border-radius: 50%;
    animation: cesu-spin-center 0.6s linear infinite;
}

@keyframes cesu-spin-center {
    to { transform: rotate(360deg); }
}

/* Reset button */
.cesu-archive__reset-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: .5rem .75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-family: inherit;
    color: var(--color-text-light);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.cesu-archive__reset-btn:hover {
    border-color: var(--color-section-cesu);
    color: var(--color-section-cesu);
    background: var(--color-section-cesu-light);
}

/* Geo feedback messages */
.cesu-archive__geo-msg {
    font-size: var(--font-size-xs);
    margin: var(--spacing-xs) 0 0;
    padding-left: var(--spacing-md);
}

.cesu-archive__geo-msg--error { color: var(--color-danger); }
.cesu-archive__geo-msg--success { color: var(--color-success); }

/* ── Layout 2 colonnes (carte + résultats) — intérieur du panel ── */
.cesu-archive__layout {
    display: block;
}

/* Mode avec carte : grille 2fr / 1fr, espacement généreux entre colonnes
   (pas de border vertical, l'espace parle). Carte prioritaire (66%) pour
   que la France métropolitaine reste lisible dans le canvas compact (qui
   réserve déjà des insets DOM-TOM, IDF, Corse autour). */
.cesu-archive__layout--with-map {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Map column — sticky on scroll. */
.cesu-archive__map-col {
    position: sticky;
    top: var(--spacing-md);
}

/* Liste : encadrement subtil + scroll interne pour que l'utilisateur voie
   où finit la liste et puisse scroller à l'intérieur (pattern annuaire
   type Airbnb/Booking). La hauteur est calée sur la fenêtre visible avec
   un minimum confortable pour éviter une liste trop écrasée sur petits
   écrans. */
.cesu-archive__list-col {
    min-width: 0;
    max-height: clamp(28rem, calc(100vh - 16rem), 48rem);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    /* Évite que les items en haut/bas touchent le bord en cas d'item
       sans border (premier ou dernier `:last-child`). */
    scroll-padding-block: var(--spacing-sm);
}

.cesu-archive__map {
    position: relative;
    overflow: hidden;
}

/* SVG map */
.cesu-archive__svg-wrap { line-height: 0; }
.cesu-archive__svg-wrap svg { width: 100%; height: auto; }

/* État loading de la carte, avant que `loadMap()` remplace le contenu par
   le SVG distant. Hauteur calée sur l'aspect ratio du canvas compact
   (650 × 580 ≈ 0.89), donc le saut de layout au remplacement est nul. */
.cesu-archive__map-loading {
    line-height: var(--line-height-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    aspect-ratio: 650 / 580;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.cesu-archive__map-loading p {
    margin: 0;
}

/* État erreur de fetch — message simple sans spinner. */
.cesu-archive__map-error {
    line-height: var(--line-height-normal);
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-light);
    aspect-ratio: 650 / 580;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG map interaction classes */
.cesu-archive__svg-wrap g[data-code] path { transition: fill 0.15s ease; }

/* Palette interactive — repos = #bfe5f4 (default_color du SVG), survol
   département = navy ANCESU, survol région = bleu CESU. */
.cesu-map--selected path { fill: #344b8d !important; }
.cesu-map--hover path { fill: #344b8d !important; }
.cesu-map--region path { fill: #0096d4 !important; }
.cesu-map--region-hover path { fill: #0096d4 !important; }

/* Numéro département en blanc pour contraste sur fond navy au hover /
   selected. Le `<text>` vit au niveau du canvas root (hors sub-svg
   viewBox) pour avoir un font-size en pixels écran, donc plus enfant du
   <g.geo-area> — la classe est appliquée à la main par l'effect Alpine. */
.cesu-archive__svg-wrap text.cesu-map--text-inverted {
    fill: #fff !important;
}

/* Le `<style>` interne du SVG pose `.geo-area:hover { opacity: 0.8 }` ce
   qui délave le navy en bleu-violet via la transparence sur fond blanc.
   On force l'opacité 1 sur la zone d'annuaire pour garder la couleur
   nette. */
.cesu-archive__svg-wrap g.geo-area:hover {
    opacity: 1;
}
/* Zone défense sélectionnée : nuance violet/indigo pour distinguer d'une
   région (qui utilise déjà le bleu). Calque sur la palette du site. */
.cesu-map--zone path { fill: #7088c2 !important; }

/* Tooltip */
.cesu-archive__tooltip {
    position: absolute;
    z-index: 20;
    background: var(--color-navy, #1e293b);
    color: #fff;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cesu-archive__tooltip-dept { font-weight: 600; }
.cesu-archive__tooltip-region {
    display: block;
    font-weight: 400;
    opacity: 0.75;
    font-size: 0.6875rem;
}

/* ── Toolbar (interne à la liste scrollable) ── */
.cesu-archive__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
}

.cesu-archive__toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.cesu-archive__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.cesu-archive__sort-hint {
    font-weight: 400;
    font-style: italic;
}

.cesu-archive__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: .175rem .5rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-light);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    line-height: 1.4;
}

.cesu-archive__toggle-btn:hover {
    background: var(--color-section-cesu-light);
    border-color: var(--color-section-cesu);
    color: var(--color-section-cesu);
}

.cesu-archive__toggle-btn--active {
    background: var(--color-section-cesu-light);
    border-color: var(--color-section-cesu);
    color: var(--color-section-cesu);
}

.cesu-archive__toggle-btn svg {
    width: 14px;
    height: 14px;
}

/* ── Loading / Empty ── */
.cesu-archive__loading,
.cesu-archive__empty {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-light);
}

.cesu-archive__spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-section-cesu);
    border-radius: 50%;
    animation: cesu-spin-center 0.6s linear infinite;
    margin: 0 auto var(--spacing-md);
}

.cesu-archive__empty svg {
    color: var(--color-border);
    margin-bottom: var(--spacing-md);
}

/* ── Results list — clean, minimal rows ── */
.cesu-archive__list {
    display: flex;
    flex-direction: column;
    max-height: 42rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.cesu-archive__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color var(--transition-fast);
    /* Pattern « card-link » : `position: relative` ancre le pseudo-element
       du titre qui couvre toute la card → clic n'importe où ouvre la fiche.
       Le titre garde sa nature de `<a>` pour préserver clic-milieu (nouvel
       onglet), focus clavier, prévisualisation au survol, etc. */
    position: relative;
    cursor: pointer;
}

.cesu-archive__item:focus-within {
    outline: 2px solid var(--color-section-cesu);
    outline-offset: -2px;
}

.cesu-archive__item:last-child {
    border-bottom: none;
}

.cesu-archive__item:hover {
    background: var(--color-section-cesu-light);
}

.cesu-archive__item--highlighted {
    background: var(--color-section-cesu-light);
}

.cesu-archive__item--sibling {
    border-left: 3px solid var(--color-section-cesu);
    opacity: 0.85;
}

.cesu-archive__item--sibling:hover {
    opacity: 1;
}

.cesu-archive__item-main {
    flex: 1;
    min-width: 0;
}

.cesu-archive__item-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 1px;
}

.cesu-archive__item-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
    text-decoration: none;
}

a.cesu-archive__item-title:hover {
    color: var(--color-section-cesu);
    opacity: 1;
}

/* Étend le clic du titre à toute la card via un pseudo-element transparent
   en absolu. Les liens internes (tel, site web, socials) sont remontés en
   z-index 2 pour rester individuellement cliquables. */
a.cesu-archive__item-title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cesu-archive__item-contacts a,
.cesu-archive__item-socials a {
    position: relative;
    z-index: 2;
}

.cesu-archive__item-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--color-section-cesu-light);
    color: var(--color-section-cesu);
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.cesu-archive__item-location {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0;
}

.cesu-archive__item-location svg {
    flex-shrink: 0;
    color: var(--color-section-cesu);
    width: 12px;
    height: 12px;
}

.cesu-archive__item-region {
    color: var(--color-text-light);
    opacity: 0.7;
}

.cesu-archive__item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.cesu-archive__item-code {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

.cesu-archive__item-distance {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-section-cesu);
}

/* Distance accolée à la ligne de localisation (« Rennes, Ille-et-Vilaine · 30 km »).
   Mêmes codes visuels que le badge distance historique pour cohérence. */
.cesu-archive__item-distance-inline {
    color: var(--color-section-cesu);
    font-weight: 600;
    white-space: nowrap;
}

/* Contact details row */
.cesu-archive__item-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.cesu-archive__item-contacts a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-section-cesu);
    text-decoration: none;
}

.cesu-archive__item-contacts a:hover {
    text-decoration: underline;
    opacity: 1;
}

.cesu-archive__item-contacts svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Social links */
.cesu-archive__item-socials {
    display: flex;
    gap: var(--spacing-xs);
    margin-left: auto;
}

.cesu-archive__item-socials a {
    display: inline-flex;
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}

.cesu-archive__item-socials a:hover {
    color: var(--color-section-cesu);
    opacity: 1;
}

/* ── Region grouping ── */
.cesu-archive__region-group {
    /* no card wrapper — items flow naturally */
}

.cesu-archive__region-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-light);
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color var(--transition-fast);
}

.cesu-archive__region-header:hover { background: #e8ecf0; }

.cesu-archive__region-name {
    flex: 1;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-section-cesu);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cesu-archive__region-count {
    font-size: 0.6875rem;
    color: var(--color-text-light);
    font-weight: 600;
}

.cesu-archive__region-chevron {
    color: var(--color-text-light);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.cesu-archive__region-chevron--open { transform: rotate(180deg); }

/* ── Responsive ── */
@media (max-width: 63.9375em) {
    .cesu-archive__title {
        font-size: 1.5rem;
    }

    /* Stack to single column on tablet */
    .cesu-archive__layout--with-map {
        grid-template-columns: 1fr;
    }

    .cesu-archive__map-col {
        position: static;
    }

    .cesu-archive__list {
        max-height: none;
    }

    .cesu-archive__item {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .cesu-archive__item-title {
        font-size: var(--font-size-base);
    }

    .cesu-archive__filter--search-unified {
        flex: 1 1 100%;
    }
}

@media (max-width: 47.9375em) {
    .cesu-archive__title {
        font-size: 1.375rem;
    }

    .cesu-archive__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .cesu-archive__item-meta {
        flex-direction: row;
        gap: var(--spacing-sm);
    }

    .cesu-archive__item-title {
        white-space: normal;
    }
}

@media (max-width: 35.9375em) {
    .cesu-archive__filter-bar {
        flex-direction: column;
    }

    .cesu-archive__filter,
    .cesu-archive__filter--search-unified {
        flex: 1 1 100%;
        width: 100%;
    }

    .cesu-archive__geolocate-btn {
        width: 100%;
    }
}

/* ══════════════════════════════════════════
   Annuaire — extensions refonte 2026-05-21 :
   dropdown segmenté + bandeau pinned + badge mine + highlight pulse
   ══════════════════════════════════════════ */

/* Dropdown segmenté : ville/code postal puis CESU. */
.cesu-archive__autocomplete--segmented .cesu-archive__autocomplete-item {
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-xs);
}

.cesu-archive__autocomplete-section {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    background: var(--color-surface, #f7f8fb);
    cursor: default;
    user-select: none;
}

.cesu-archive__autocomplete-section + .cesu-archive__autocomplete-section {
    border-top: 1px solid var(--color-border);
}

.cesu-archive__autocomplete-icon {
    color: var(--color-text-light);
    flex-shrink: 0;
}

.cesu-archive__autocomplete-item--organization .cesu-archive__autocomplete-icon {
    color: var(--color-section-cesu);
}

.cesu-archive__autocomplete--segmented .cesu-archive__autocomplete-ctx {
    margin-left: auto;
}

/* Bandeau d'information « Votre CESU est épinglé en tête ». */
.cesu-archive__pinned-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-section-cesu-light, #e0f2fa);
    color: var(--color-section-cesu-dark, #014b6e);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.cesu-archive__pinned-banner svg {
    color: var(--color-section-cesu);
    flex-shrink: 0;
}

/* Badge « Votre CESU » sur l'item épinglé. */
.cesu-archive__item-badge--mine {
    background: var(--color-section-cesu);
    color: #fff;
    border-color: var(--color-section-cesu);
}

/* Item du CESU épinglé : bordure gauche colorée pour le repérer dans la liste. */
.cesu-archive__item--pinned {
    border-left: 3px solid var(--color-section-cesu);
    padding-left: calc(var(--spacing-lg) - 3px);
}

/* Pulse 2.5s sur sélection d'un CESU depuis le dropdown de recherche. */
.cesu-archive__item--highlight-pulse {
    animation: cesu-archive-highlight 2.5s ease-out;
}

@keyframes cesu-archive-highlight {
    0% { background-color: rgba(0, 150, 212, .22); box-shadow: 0 0 0 0 rgba(0, 150, 212, .35); }
    60% { background-color: rgba(0, 150, 212, .12); box-shadow: 0 0 0 6px rgba(0, 150, 212, 0); }
    100% { background-color: transparent; box-shadow: none; }
}

/* ══════════════════════════════════════════
   Annuaire — sections éditoriales sous le panel carte+liste
   (chiffres clés, formations populaires, actualités)
   ══════════════════════════════════════════ */

.cesu-extras {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.cesu-extras + .cesu-extras {
    margin-top: var(--spacing-2xl);
}

.cesu-extras__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.cesu-extras__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-tight);
}

.cesu-extras__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-section-cesu);
    text-decoration: none;
    font-weight: 500;
}

.cesu-extras__link:hover {
    text-decoration: underline;
}

/* ── Grilles formations + actualités ── */
.cesu-extras__grid {
    display: grid;
    gap: var(--spacing-md);
}

/* Grille formations : 3 colonnes desktop, 2 tablette, 1 mobile. `auto-fill`
   provoquerait des cards démesurées s'il n'y a que 1-2 résultats (la cellule
   se stretch sur tout le row libre). On force un compte fixe + min/max
   raisonnables pour garder les cards à hauteur d'humain. */
.cesu-extras__grid--trainings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cesu-extras__grid--news {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 64em) {
    .cesu-extras__grid--trainings,
    .cesu-extras__grid--news {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 36em) {
    .cesu-extras__grid--trainings,
    .cesu-extras__grid--news {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ══════════════════════════════════════════
   CESU Show — Hero card avec image background Pexels
   ──────────────────────────────────────────
   Pose une photo Pexels en background UNIQUEMENT sur le card editorial
   (`.list-hero__container`) avec overlay navy fort. La topbar (breadcrumb
   + share) et la nav d'onglets vivent hors du card et gardent leurs
   couleurs sombres normales sur fond clair parent — pas d'override.
   Couleurs blanches appliquees uniquement aux elements DANS le card
   (titre, eyebrow, tags, metrics, chips). Si le CESU configure son
   `heroImageId` admin, le composant rend un `<img>` z-index 0 qui couvre
   la Pexels (background CSS reste dessous, invisible).
   ══════════════════════════════════════════ */

.list-hero--directory-show:not(.list-hero--background-image) .list-hero__container {
    background-image:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-primary-dark) 72%, transparent) 0%,
            color-mix(in srgb, var(--color-primary-dark) 84%, transparent) 100%),
        url("../../images/pexels-fauxels-3228688-vevvspl.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

/* Texte editorial blanc dans le card */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__title,
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__lead {
    color: #fff;
}

/* Eyebrow : pill blanche inversee */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__eyebrow {
    background: #fff;
    color: var(--color-primary-dark);
}

/* Tags (« Membre du RESU X ») : outline blanc translucide */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__tag {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.list-hero--directory-show:not(.list-hero--background-image) a.list-hero__tag:hover,
.list-hero--directory-show:not(.list-hero--background-image) a.list-hero__tag:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

/* Metrics en blanc sur fond image */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__metric-value {
    color: #fff;
}

.list-hero--directory-show:not(.list-hero--background-image) .list-hero__metric-label {
    color: rgba(255, 255, 255, 0.85);
}

.list-hero--directory-show:not(.list-hero--background-image) .list-hero__metric {
    border-left-color: rgba(255, 255, 255, 0.35);
}

/* Chips trust : pastilles blanches */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--trust {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    color: #14532d;
}

.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--trust svg {
    color: #16a34a;
}

/* Chips d'action : pastilles blanches */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--action {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary-dark);
}

.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--action svg {
    color: var(--color-primary);
}

.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--action.list-hero__chip--link:hover,
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--action.list-hero__chip--link:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--action.list-hero__chip--link:hover svg,
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--action.list-hero__chip--link:focus-visible svg {
    color: #fff;
}

/* Centrage vertical du contenu et de la carte SVG dans le card hero,
   pour equilibrer la composition (text gauche / carte droite alignes
   sur la mediane). */
.list-hero--directory-show .list-hero__container {
    align-items: center;
}

/* Carte SVG region : agrandie, deborde du card vers le bas pour un
   effet de respiration visuelle — pattern "carte qui sort du cadre".
   Le slot reserve une hauteur reduite (anti-CLS) plus petite que le
   max-height SVG ; la difference est compensee par `margin-bottom`
   negatif qui fait dépasser visuellement la SVG sans agrandir le
   card (la hauteur effective du flex item = slot - margin-bottom). */
.list-hero--directory-show .cesu-hero-map__svg svg {
    max-height: clamp(14rem, 26vh, 21rem);
}

/* Slot reserve : plus petit que la SVG finale pour que le card reste
   compact. Le SVG injecte en JS deborde via margin-bottom negatif. */
.list-hero--directory-show .cesu-hero-map__svg .directory-show__map-svg {
    min-height: clamp(11rem, 18vh, 15rem);
}

/* Overflow visible sur la chaine aside -> cesu-hero-map -> svg-wrapper
   pour autoriser le depassement vers le bas. Sans cela, la SVG serait
   clip par le radius / overflow du container parent. */
.list-hero--directory-show .list-hero__aside,
.list-hero--directory-show .cesu-hero-map,
.list-hero--directory-show .cesu-hero-map__svg {
    overflow: visible;
}

/* Margins negatives equilibrees haut + bas : la SVG depasse de ~1.5rem
   de chaque cote tout en gardant l'aside centre verticalement (align-
   items: center). Sinon margin-bottom seul colle la SVG en haut du
   card. */
.list-hero--directory-show .cesu-hero-map__svg {
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
}

/* ══════════════════════════════════════════
   CESU Show — Fiche détail avec onglets
   ══════════════════════════════════════════ */

.cesu-show {
    padding: 0;
}

/* Header */
.cesu-show__header {
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.cesu-show__header-top {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

/* Sidebar map */
.cesu-show__sidebar-map {
    line-height: 0;
}

.cesu-show__sidebar-map .directory-show__map-svg {
    width: 100%;
}

.cesu-show__sidebar-map .directory-show__map-svg svg {
    width: 100%;
    height: auto;
}

.cesu-show__card--map {
    position: relative;
}

.cesu-show__map-panel-inline {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.cesu-show__logo {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-light);
}

.cesu-show__logo img { width: 100%; height: 100%; object-fit: contain; padding: .375rem; }

.cesu-show__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.cesu-show__badge {
    display: inline-flex;
    padding: .125rem .5rem;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--color-section-cesu-light);
    color: var(--color-section-cesu);
}

.cesu-show__badge--type {
    background: var(--color-bg-light);
    color: var(--color-text-light);
}

.cesu-show__badge--outline {
    background: transparent;
    border: 1px solid var(--color-section-cesu);
    color: var(--color-section-cesu);
}

.cesu-show__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin: 0;
}

@media (min-width: 640px) {
    .cesu-show__title { font-size: var(--font-size-3xl); }
}

.cesu-show__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

.cesu-show__key-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.cesu-show__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.cesu-show__meta-item svg { flex-shrink: 0; color: var(--color-section-cesu); }
.cesu-show__meta-item strong { color: var(--color-text); }

/* ──────────────────────────────────────────────────────────
   CESU à proximité — strip pied de page, cards sans bordure
   mais visuellement engageantes (gradient subtil, hover lift,
   pastille departement, fleche qui slide).
   ────────────────────────────────────────────────────────── */
.cesu-neighbors {
    margin: var(--spacing-lg) 0 0;
}

.cesu-neighbors__card {
    position: relative;
    background:
        linear-gradient(
            color-mix(in srgb, var(--color-primary-dark) 78%, transparent),
            color-mix(in srgb, var(--color-primary-dark) 78%, transparent)
        ),
        url("../../images/pexels-juan-m-2749007-9542255-GsjmrGJ.jpg") center / cover no-repeat;
    border-radius: 1.5rem;
    padding: var(--spacing-xl);
    overflow: hidden;
}

/* Texte hero du card : blanc pour lisibilite sur l'overlay. */
.cesu-neighbors__card .cesu-neighbors__title { color: #fff; }
.cesu-neighbors__card .cesu-neighbors__all { color: #fff; }
.cesu-neighbors__card .cesu-neighbors__all:hover { color: #fff; opacity: .85; }

.cesu-neighbors__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.cesu-neighbors__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
}

.cesu-neighbors__all {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-section-cesu);
    text-decoration: none;
    transition: gap var(--transition-fast);
}

.cesu-neighbors__all:hover { gap: var(--spacing-sm); }
.cesu-neighbors__all svg { transition: transform var(--transition-fast); }
.cesu-neighbors__all:hover svg { transform: translateX(2px); }

.cesu-neighbors__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--spacing-md);
}

.cesu-neighbor-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cesu-neighbor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

.cesu-neighbor-card__dept {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-section-cesu) 14%, #fff),
        color-mix(in srgb, var(--color-section-cesu) 28%, #fff));
    color: var(--color-section-cesu);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: -.01em;
}

.cesu-neighbor-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cesu-neighbor-card__name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cesu-neighbor-card__meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.cesu-neighbor-card__meta svg { color: var(--color-section-cesu); flex-shrink: 0; }

.cesu-neighbor-card__dot { opacity: .6; }

.cesu-neighbor-card__distance {
    font-weight: 600;
    color: var(--color-section-cesu);
}

.cesu-neighbor-card__arrow {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-text-light);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.cesu-neighbor-card:hover .cesu-neighbor-card__arrow {
    color: var(--color-section-cesu);
    transform: translateX(3px);
}

/* Layout : contenu pleine largeur (la navigation vit en sticky sous le hero). */
.cesu-show__layout {
    display: block;
    margin-top: var(--spacing-xl);
}

/* Onglet « Formations » : neutralise les marges + padding parents pour
   laisser le partial `training/_catalog_listing.html.twig` rendre sa
   propre `.container` en pleine largeur, sans nesting visuel double. */
.cesu-show__formations {
    margin-inline: calc(-1 * var(--spacing-md));
    margin-top: var(--spacing-md);
}
.cesu-show__formations > .content-list { padding-top: 0; padding-bottom: var(--spacing-md); }
.cesu-show__formations > .content-list > .container { padding-inline: var(--spacing-md); }

@media (min-width: 75em) {
    .cesu-show__formations { margin-inline: calc(-1 * var(--spacing-xl)); }
    .cesu-show__formations > .content-list > .container { padding-inline: var(--spacing-xl); }
}

/* ──────────────────────────────────────────────────────────
   Onglet Agenda — overrides locaux (le partial reuse
   `.cesu-show__formations` comme wrapper neutre, et les
   classes `.training-single__session*` de training.css).
   ────────────────────────────────────────────────────────── */

/* Segments multi-options (Periode 4 cases, Disponibilite 2 cases) :
   layout flex 1 ligne pour le conteneur (le segment ne wrap pas en
   2 rangees), mais on permet le wrap intra-option (white-space normal)
   pour que les libelles longs comme « Inscriptions ouvertes » tiennent
   sur 2 lignes au lieu d'etre tronques. Line-height resserre pour que
   2 lignes restent visuellement compactes. */
.cesu-show__formations .sidebar-filters__segment {
    display: flex;
    flex-wrap: nowrap;
}
.cesu-show__formations .sidebar-filters__segment-option {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}

/* Cards sessions : plus de gap entre cards, padding interne reduit
   pour des cards plus compactes verticalement. Cible `.cesu-agenda__list`
   utilisee par le partial agenda (pas `.training-single__sessions` du
   show training qui ne s'applique pas ici). */
.cesu-agenda__list {
    list-style: none;
    margin: 0 0 var(--spacing-md);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.cesu-show__formations .training-single__session {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Pastille date sessions multi-mois : format "Du JJ/M / Au JJ/M / YYYY"
   compact sur 3 lignes dans la pastille standard (4.5rem). Garde la
   meme largeur que les autres pastilles pour la coherence visuelle. */
.cesu-agenda__date-range-line {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

/* Badge domaine : pastille soft navy (fond pale + texte navy) square
   rounded, sans couleur de domaine specifique (decision produit : tag
   identitaire uniforme, pas de variation par categorie). Police petite
   et fond doux pour rester discret au regard. */
.cesu-agenda__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary-dark) 10%, #fff);
    color: var(--color-primary-dark);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Reduction du spacing au-dessus de la section sessions (entre la nav
   d'onglets dans le hero et le debut du contenu agenda). */
.cesu-show__formations { margin-top: var(--spacing-sm); }

/* ──────────────────────────────────────────────────────────
   Onglet Formations CESU — pastille gauche + tags exclusivite

   Reutilise le squelette `.training-single__session` (training.css)
   pour la cohérence visuelle avec l'agenda (memes paddings, meme grille,
   meme largeur de pastille 4.5rem). Override : la pastille devient une
   thumbnail (ou un swatch couleur du domaine) au lieu d'une date.
   ────────────────────────────────────────────────────────── */

.cesu-formations__thumb {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: #fff;
    flex-shrink: 0;
}

.cesu-formations__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cesu-formations__thumb-initial {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* Pastille « contexte d'exercice » discrete (bordure fine, fond clair).
   Distincte du badge domaine (navy soft) — couleur secondaire. */
.cesu-formations__env {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    color: var(--color-text-light);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Tag exclusivite / partage : signal contextuel sur la card. Petit, en
   colonne droite. Exclusivite = accent ancesu (vert anis discret),
   partage = neutre/info. */
.cesu-formations__actions {
    justify-content: center;
}

.cesu-formations__share {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.cesu-formations__share svg {
    flex-shrink: 0;
}

.cesu-formations__share--exclusive {
    background: var(--color-section-ancesu-light);
    color: color-mix(in srgb, var(--color-section-ancesu) 60%, #000);
}

.cesu-formations__share--shared {
    background: var(--color-bg-light);
    color: var(--color-text-light);
}


/* ──────────────────────────────────────────────────────────
   Stats inline (chiffres cles en tete de Presentation)
   Pas de card, pas de bordure : liste a plat ponctuee de
   separateurs `·`, pattern editorial Airbnb-like.
   ────────────────────────────────────────────────────────── */
.cesu-strip-section { margin-bottom: var(--spacing-xl); }

.cesu-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-lg);
    align-items: baseline;
    font-size: var(--font-size-xs);
    color: var(--color-text);
}

.cesu-strip__item { display: inline-flex; align-items: baseline; gap: var(--spacing-xs); }

.cesu-strip__icon { display: none; }

.cesu-strip__body { display: inline-flex; align-items: baseline; gap: var(--spacing-xs); flex-wrap: wrap; }

.cesu-strip__label { color: var(--color-text-light); }
.cesu-strip__value { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.cesu-strip__value--sm { font-weight: 600; }
.cesu-strip__hint { color: var(--color-text-light); }
.cesu-strip__hint-link { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cesu-strip__hint-link:hover { color: var(--color-section-cesu); }

/* Separateur entre items */
.cesu-strip__item + .cesu-strip__item::before {
    content: "·";
    color: var(--color-text-light);
    margin-right: var(--spacing-md);
    opacity: .5;
}

/* ──────────────────────────────────────────────────────────
   Engagement & qualite — liste a plat avec icones discretes
   ────────────────────────────────────────────────────────── */
.cesu-quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--spacing-lg) var(--spacing-xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.cesu-quality-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.cesu-quality-card__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-section-cesu);
    padding-top: 2px;
}

.cesu-quality-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cesu-quality-card__title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.cesu-quality-card__detail {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.cesu-quality-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.cesu-quality-card__link:hover { color: var(--color-section-cesu); }

/* ──────────────────────────────────────────────────────────
   Reseau (RESU rattachement, partenaires) — liens a plat
   ────────────────────────────────────────────────────────── */
.cesu-network-cards {
    list-style: none;
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
}

.cesu-network-card {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0;
    text-decoration: none;
    color: var(--color-text);
}

.cesu-network-card:hover { color: var(--color-section-cesu); }

.cesu-network-card__badge {
    flex-shrink: 0;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--color-section-cesu) 12%, #fff);
    color: var(--color-section-cesu);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
}

.cesu-network-card__badge--partner {
    background: var(--color-bg-light);
    color: var(--color-text-light);
}

.cesu-network-card__name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: inherit;
}

.cesu-network-card:hover .cesu-network-card__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.cesu-network-card__arrow { display: none; }

/* Main */
.cesu-show__section { margin-bottom: var(--spacing-xl); }

.cesu-show__heading {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

/* ──────────────────────────────────────────────────────────
   Onglet Présentation — single column 56rem

   Largeur contrainte alignee sur l'onglet Documents (convention
   repo : article, content, events, directory). Stack vertical :
   presentation TipTap (optionnelle) > caracteristiques > equipe.
   Decision UX 2026-05-28.
   ────────────────────────────────────────────────────────── */
.cesu-show__presentation-stack {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.cesu-show__prose {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
}

/* Placeholder */
.cesu-show__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-2xl);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-text-light);
    min-height: 8rem;
    background: var(--color-bg-light);
}

.cesu-show__placeholder svg { color: var(--color-section-cesu); opacity: .5; }
.cesu-show__placeholder p { margin: 0; font-size: var(--font-size-sm); }

/* Map */
.cesu-show__map-wrap { position: relative; }

.cesu-show__map-legend {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.cesu-show__map-legend-item { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.cesu-show__map-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; }

.cesu-show__map-panel {
    position: absolute;
    top: var(--spacing-md);
    right: 0;
    width: 16rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.cesu-show__map-panel-title { font-weight: 700; font-size: var(--font-size-sm); margin: 0 0 var(--spacing-sm); }

.cesu-show__map-panel-item {
    display: block;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-bg-light);
    font-size: var(--font-size-sm);
    color: var(--color-section-cesu);
    font-weight: 600;
    text-decoration: none;
}

.cesu-show__map-panel-item:last-child { border-bottom: none; }
.cesu-show__map-panel-item:hover { opacity: .7; }
.cesu-show__map-panel-city { display: block; font-size: var(--font-size-xs); color: var(--color-text-light); font-weight: 400; }

/* Sidebar */
.cesu-show__card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.cesu-show__card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 4px solid var(--color-section-cesu);
}

.cesu-show__info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.cesu-show__info-row:last-child { margin-bottom: 0; }
.cesu-show__info-row svg { flex-shrink: 0; margin-top: 2px; color: var(--color-section-cesu); }
.cesu-show__info-row p { margin: 0; }
.cesu-show__info-row a { color: var(--color-section-cesu); word-break: break-all; }

/* Social */
.cesu-show__social {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.cesu-show__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.cesu-show__social a:hover {
    color: var(--color-section-cesu);
    background: var(--color-section-cesu-light);
    opacity: 1;
}

/* Contacts */
.cesu-show__contact-person {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.cesu-show__contact-person:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.cesu-show__contact-role { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--color-section-cesu); }
.cesu-show__contact-name { font-weight: 600; font-size: var(--font-size-sm); }
.cesu-show__contact-link { font-size: var(--font-size-sm); color: var(--color-section-cesu); display: block; text-decoration: none; }

/* RESU link */
.cesu-show__resu-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-section-cesu);
    text-decoration: none;
}

.cesu-show__resu-link:hover { opacity: .7; }

/* Équipe */
/* ──────────────────────────────────────────────────────────
   Équipe — liste à puces avec retrait

   Markup minimaliste : nom + fonction + téléphone + email en
   icone-liens. Aucune card, aucun avatar, aucun badge correspondant
   en front. Puce CESU (couleur de section) + retrait gauche au lieu
   d'un divider 1px — décision UX 2026-05-28.
   ────────────────────────────────────────────────────────── */
.cesu-team-list {
    list-style: disc outside;
    margin: 0;
    padding-left: 2.5rem;
}

/* line-height unifié à 1.5 sur tous les enfants pour une rythmique
   de lecture cohérente : nom (base 1.5), rôle (sm 1.5) et liens
   contacts (sm 1.5) partagent la même hauteur de ligne. */
.cesu-team-row {
    padding: var(--spacing-sm) 0;
    line-height: 1.5;
}

.cesu-team-row::marker {
    color: var(--color-section-cesu, var(--color-cesu, #0096d4));
}

.cesu-team-row:first-child { padding-top: 0; }
.cesu-team-row:last-child { padding-bottom: 0; }

.cesu-team-row__name {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.cesu-team-row__role {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/* Contacts : flex-wrap horizontal (téléphone + email côte à côte si
   place, retour à la ligne sinon). `row-gap` = `var(--spacing-xs)`
   pour aérer quand un retour à la ligne survient. */
.cesu-team-row__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.cesu-team-row__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-decoration: none;
    word-break: break-word;
}

.cesu-team-row__link:hover { color: var(--color-section-cesu); }
.cesu-team-row__link svg { color: var(--color-section-cesu); flex-shrink: 0; }

/* Contact (onglet verrouille sur le CESU courant) — layout 1/3 + 2/3.
   Sur mobile (< lg), single column avec l'info en premier (lecture
   descendante naturelle). Sur >= lg, info a gauche 1/3, formulaire a
   droite 2/3 — pattern inverse de la presentation (2/3 + 1/3). */
.cesu-contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 64em) {
    .cesu-contact-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--spacing-2xl);
        align-items: start;
    }
}

.cesu-contact-layout__form-col { min-width: 0; }

/* Card navy themed : fond profond + texte clair pour ancrer
   visuellement la sidebar coordonnees et trancher avec le formulaire
   blanc. Decision UX 2026-05-28 : remplace l'ancien card bg-light
   indistinct du form. */
/* Card aside coordonnees — texture navy enrichie pour eviter l'effet
   « pave plat » : gradient diagonal multi-stops, spotlight radial en
   haut-droit, motif pointille subtil sur toute la surface, et un
   watermark decoratif (icone message-circle) en bas-droite a tres
   faible opacite. Le tout sans alourdir le DOM (deux pseudo-elements). */
.cesu-contact__info {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 95% 5%, rgba(255, 255, 255, .14) 0%, transparent 60%),
        linear-gradient(135deg, #2d3f72 0%, var(--color-navy, #344b8d) 50%, #2a3a70 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-width: 0;
    box-shadow:
        0 12px 32px -16px rgba(20, 31, 64, .5),
        0 1px 2px rgba(0, 0, 0, .12);
}

/* Pointille subtil : pattern de respiration sur la surface navy. */
.cesu-contact__info::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}

/* Watermark decoratif : grande bulle de discussion (message-circle) en
   bas-droit, faible opacite, suggere visuellement la « prise de
   contact ». SVG inline data-URL pour eviter une requete HTTP
   supplementaire. */
.cesu-contact__info::after {
    content: '';
    position: absolute;
    right: -2rem;
    bottom: -2rem;
    width: 12rem;
    height: 12rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .09;
    pointer-events: none;
    z-index: 0;
}

/* Tous les enfants restent au-dessus des deux overlays. */
.cesu-contact__info > * {
    position: relative;
    z-index: 1;
}

.cesu-contact__form-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.cesu-contact__form-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}

.cesu-contact__info-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #fff;
    letter-spacing: .02em;
}

.cesu-contact__info-title svg {
    color: rgba(255, 255, 255, .8);
    flex-shrink: 0;
}

.cesu-contact__info-list {
    margin: 0;
    display: grid;
    gap: var(--spacing-md);
}

.cesu-contact__info-row {
    display: grid;
    gap: 0.125rem;
    margin: 0;
}

.cesu-contact__info-key {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    margin: 0;
}

.cesu-contact__info-value {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .95);
    line-height: var(--line-height-base);
    word-break: break-word;
}

.cesu-contact__address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cesu-contact__info-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, .35);
    font-weight: 500;
    transition: text-decoration-color 0.15s ease;
}

.cesu-contact__info-link:hover {
    text-decoration-color: #fff;
}

/* Wrapper colonne aside : empile la card navy puis le helper FAQ avec
   un gap propre, garde le sticky comportement sur >= lg. */
.cesu-contact-layout__aside-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 64em) {
    .cesu-contact-layout__aside-col {
        position: sticky;
        top: var(--spacing-3xl);
    }
}

/* Helper FAQ sous la card coordonnees — wrapper fond teinte pour
   integrer visuellement la question et le CTA dans un seul bloc
   coherent (l'utilisateur ne percoit pas le lien comme isole sous la
   card navy). Le CTA est un bouton outline CESU (couleur de section),
   pas navy : la card du dessus porte deja la presence navy, on garde
   le contraste chromatique sur le CTA. */
/* Grid 2 colonnes : icone hors flux a gauche, contenu (texte + CTA)
   empile a droite. Le CTA herite ainsi du meme bord gauche que le
   texte — alignement vertical propre, pas avec le picto. */
.cesu-contact__faq-helper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.5rem;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

.cesu-contact__faq-helper-icon {
    display: inline-flex;
    color: var(--color-section-cesu);
    margin-top: 2px;
}

.cesu-contact__faq-helper-icon svg {
    flex-shrink: 0;
}

.cesu-contact__faq-helper-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.cesu-contact__faq-helper-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: var(--line-height-base);
}

/* CTA outline aligne sur la couleur de section CESU. Sur hover,
   inversion classique (fond plein + texte blanc). align-self:flex-start
   garantit que le bouton ne s'etire pas sur toute la largeur. */
.cesu-contact__faq-helper-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border: 1.5px solid var(--color-section-cesu);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-section-cesu);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cesu-contact__faq-helper-link:hover,
.cesu-contact__faq-helper-link:focus-visible {
    background: var(--color-section-cesu);
    color: #fff;
}

.cesu-contact__faq-helper-link:focus-visible {
    outline: 2px solid var(--color-section-cesu);
    outline-offset: 2px;
}

.cesu-contact__faq-helper-link svg {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.cesu-contact__faq-helper-link:hover svg,
.cesu-contact__faq-helper-link:focus-visible svg {
    transform: translateX(3px);
}

/* Hint au-dessus du formulaire (col droite) — rappelle le destinataire,
   propose le retour vers l'annuaire. Fond teinte + icone d'info en tete
   (pas de border-left accent, cf. feedback_card_borders). */
.cesu-contact__form-intro {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: var(--line-height-base);
}

.cesu-contact__form-intro svg {
    color: var(--color-section-cesu);
    flex-shrink: 0;
    margin-top: 2px;
}

.cesu-contact__form-intro a {
    color: var(--color-section-cesu);
    text-decoration: underline;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 63.9375em) {
    .cesu-show__map-panel { position: static; width: 100%; margin-top: var(--spacing-md); }
}

@media (max-width: 47.9375em) {
    .cesu-show__title { font-size: var(--font-size-2xl); }
    .cesu-show__header-top { flex-direction: column; gap: var(--spacing-md); }
    .cesu-show__key-info { flex-direction: column; gap: var(--spacing-xs); }
}

/* ══════════════════════════════════════════
   Présentation enrichie (P7) — sections ESR / Qualité / Réseau
   ══════════════════════════════════════════ */

.cesu-show__subheading {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────────────────
   Chiffres clés (dernier bilan annuel CESU)

   Source : dataset Analytics `cesu-annual-report` via la fonction
   Twig `cesu_annual_report(orgId)`. La section ne rend que si au
   moins un indicateur (apprenants / sessions / heures) est renseigné.

   Grille 3 cards horizontales : icône + valeur (font lg, weight 700)
   + label (xs, text-light). Alignée sur la grammaire `.cesu-quality-*`
   et `.cesu-team-row` pour cohérence typographique globale.
   ────────────────────────────────────────────────────────── */
.cesu-metrics-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 32em) {
    .cesu-metrics-grid {
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    }
}

.cesu-metric {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.cesu-metric__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-section-cesu);
}

.cesu-metric__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cesu-metric__value {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cesu-metric__label {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: 1.3;
}

/* Pastille évolution N-1 vs N-2 : icône triangle + pourcentage signé,
   couleur sémantique (vert si croissance, rouge si baisse, gris si
   stable). Discrète à côté du chiffre principal — ne capte pas
   l'attention avant la valeur courante.

   `inline-block` (au lieu d'inline-flex) pour que la baseline reportée
   au parent (`.cesu-metric__value` align-items: baseline) soit celle
   du texte interne « +20 % » -- la pastille s'aligne pile sur la
   ligne de base du chiffre. Le SVG icône inline avec un léger nudge
   vertical pour rester optiquement centré sur la x-height du texte. */
.cesu-metric__delta {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
    vertical-align: baseline;
}

.cesu-metric__delta svg {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 0.1875rem;
}

.cesu-metric__delta--up {
    background: color-mix(in srgb, var(--color-success, #16a34a) 12%, #fff);
    color: color-mix(in srgb, var(--color-success, #16a34a) 70%, #000);
}

.cesu-metric__delta--down {
    background: color-mix(in srgb, var(--color-error, #dc2626) 12%, #fff);
    color: color-mix(in srgb, var(--color-error, #dc2626) 70%, #000);
}

.cesu-metric__delta--flat {
    background: var(--color-bg-light);
    color: var(--color-text-light);
}

/* Variante de H2 avec action alignée à droite — utilisée par la
   section Chiffres clés pour exposer un lien « Voir tous les chiffres
   clés des CESU » sans bloc footer dédié. Flex-wrap pour que l'action
   passe sous le titre sur très petite largeur. */
.cesu-show__heading--with-action {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
}

.cesu-show__heading-label {
    min-width: 0;
}

.cesu-show__heading-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.cesu-show__heading-action:hover { color: var(--color-section-cesu); }
.cesu-show__heading-action svg { flex-shrink: 0; }

/* Paragraphe d'introduction sous un H2 de section — contextualise
   le bloc en quelques phrases. Couleur text-light, font-size-xs,
   line-height généreux pour lecture confortable malgré la taille. */
.cesu-show__section-intro {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 60ch;
}

/* Section Préparation ORSAN — grid 2 colonnes : description gauche
   (2/3), volets droite (1/3). La description porte le sens (le
   dispositif ORSAN et le rôle du CESU), les volets restent une
   liste compacte affichée en colonne narrow à droite.
   Stack en single col sur mobile / aside. */
.cesu-show__esr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (min-width: 48em) {
    .cesu-show__esr-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--spacing-xl);
    }
}

.cesu-show__esr-volets { min-width: 0; }

/* Label de groupe (ESR régional / ESR national) — version douce du
   subheading. Pas d'uppercase ni gras lourd : la lecture reste fluide
   et le pavé volets respire sans concurrencer le H2. */
.cesu-show__volet-group-label {
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cesu-show__volet-group-label:first-child {
    margin-top: 0;
}

/* Volets ORSAN — uniquement le badge code-couleur visible (REB, NR, C,
   AMAVI, PSY). Le libellé complet est révélé au survol via `title`
   (tooltip natif, accessible aux lecteurs d'écran). La liste devient
   un simple flex-wrap de badges, plus de grille 2 cols. */
.cesu-show__volet-list {
    list-style: none;
    margin: 0 0 var(--spacing-sm);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cesu-show__volet {
    display: inline-flex;
    align-items: center;
}

.cesu-show__volet-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 2px 0.5rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.6875rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.4;
    cursor: help;
}

.cesu-show__quality-list {
    display: grid;
    grid-template-columns: minmax(12rem, max-content) 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0;
}

.cesu-show__quality-list dt {
    font-weight: 600;
    color: var(--color-text);
}

.cesu-show__quality-list dd {
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}

.cesu-show__quality-link {
    display: inline-block;
    margin-left: var(--spacing-xs);
    color: var(--color-primary);
    text-decoration: underline;
}

.cesu-show__quality-link:hover {
    text-decoration: none;
}

.cesu-show__network-list {
    list-style: none;
    margin: 0 0 var(--spacing-md);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.cesu-show__network-list li {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface-alt, color-mix(in srgb, var(--color-primary) 3%, transparent));
    border-radius: var(--radius-sm, 4px);
}

.cesu-show__network-list a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

.cesu-show__network-list a:hover {
    text-decoration: underline;
}

@media (max-width: 35.9375em) {
    .cesu-show__quality-list {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    .cesu-show__quality-list dt {
        margin-top: var(--spacing-xs);
    }
}

/* ══════════════════════════════════════════════════════════════
   Hero card fiche CESU (`list-hero--directory-show`)
   ══════════════════════════════════════════════════════════════ */

/* Le hero porte un dégradé radial bleu pâle en haut (cf. content.css
   `.list-hero { background-image: ... }`). Sur la fiche CESU, le
   breadcrumb intégré au topbar du hero apparaît sur ce dégradé — l'effet
   n'est pas souhaité (la barre de fil d'Ariane doit rester sur le fond
   uni de la page, comme avant l'intégration au hero).
   On désactive uniquement le background-image (gradient) tout en gardant
   la `background-color` neutre — l'image hero éventuelle
   (`background_image_hash_id`) reste rendue comme un `<img>` absolu dans
   `.list-hero__container`, indépendant du background du wrapper. */
.list-hero--directory-show {
    background-image: none;
}

/* Carte SVG région dans l'aside droite du hero card.
   La taille naturelle de la projection est ~650x580 — on la laisse
   s'adapter à la largeur de l'aside (typique 460px côté `_list_hero`)
   en hauteur intrinsèque. */
.cesu-hero-map {
    position: relative;
    width: 100%;
}

.cesu-hero-map__svg {
    line-height: 0;
}

.cesu-hero-map__svg .directory-show__map-svg {
    width: 100%;
}

.cesu-hero-map__svg svg {
    width: 100%;
    height: auto;
    display: block;
    /* Cap de hauteur pour ne pas faire exploser le hero : ratio naturel
       650/580 = 1.12 occuperait toute la colonne aside (~460px → ~410px
       de haut). On clampe à une plage plus contenue. */
    max-height: clamp(11rem, 20vh, 16rem);
    /* `width: auto` permet au SVG de préserver son ratio en se réduisant
       en largeur quand la max-height kick in, plutôt que de s'étirer. */
    width: auto;
    max-width: 100%;
    /* Aligné à droite de l'aside hero (slot droit). */
    margin-left: auto;
    margin-right: 0;
}

/* Panel des CESU voisins révélé au hover d'un département : overlay
   compact en bas de la carte, fond blanc semi-opaque pour rester
   lisible sur image background ou gradient. */
.cesu-hero-map__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-sm);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 60%;
    overflow-y: auto;
    font-size: var(--font-size-sm);
}

.cesu-hero-map__panel-title {
    font-weight: 600;
    color: var(--color-navy, #1e293b);
    margin: 0 0 var(--spacing-xs);
}

.cesu-hero-map__panel-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding: 0.25rem 0;
    color: var(--color-text, #334155);
    text-decoration: none;
    border-top: 1px solid var(--color-border-light, #f1f5f9);
}

.cesu-hero-map__panel-item:hover {
    color: var(--color-cesu, #0096d4);
}

.cesu-hero-map__panel-city {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted, #64748b);
}

/* ─────────────────────────────────────────────────────────────
   Onglet Actualites — meme largeur 56rem que Documents/Presentation,
   reutilise la `content-list__grid` standard pour les cards article.
   ───────────────────────────────────────────────────────────── */

.cesu-show__actualites {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.cesu-show__actualites-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.cesu-show__actualites-lead {
    color: var(--color-text-muted, #64748b);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Onglet Documents — liste plate divider, alignee sur le pattern
   de la section Equipe (cesu-team-list / cesu-team-row).
   Une row par document : icone type | titre + meta | bouton telecharger.

   Largeur contrainte (56rem, convention du repo : article, content,
   directory…) pour eviter les rows demesurees sur grand ecran. La
   section reste centree horizontalement.
   ───────────────────────────────────────────────────────────── */

.cesu-show__documents {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.cesu-show__documents-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.cesu-show__documents-lead {
    color: var(--color-text-muted, #64748b);
    font-size: var(--font-size-sm);
    margin: 0;
}

.cesu-documents-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cesu-document-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--color-border-light, #f1f5f9);
}

.cesu-document-row:first-child {
    border-top: none;
}

.cesu-document-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-light, #f8fafc);
    color: var(--color-section-cesu, var(--color-cesu, #0096d4));
    flex-shrink: 0;
}

.cesu-document-row__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cesu-document-row__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text, #1e293b);
    margin: 0;
    overflow-wrap: anywhere;
}

.cesu-document-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted, #64748b);
    margin: 0;
}

.cesu-document-row__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-section-cesu, var(--color-cesu, #0096d4));
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-section-cesu, var(--color-cesu, #0096d4));
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.cesu-document-row__action:hover,
.cesu-document-row__action:focus-visible {
    background: var(--color-section-cesu, var(--color-cesu, #0096d4));
    color: #fff;
}

@media (max-width: 40em) {
    .cesu-document-row {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'icon body'
            'action action';
        row-gap: var(--spacing-sm);
    }
    .cesu-document-row__icon { grid-area: icon; }
    .cesu-document-row__body { grid-area: body; }
    .cesu-document-row__action {
        grid-area: action;
        justify-content: center;
    }
}

/* ── Onglet « Données » de la fiche CESU (tableau de bord du bilan) ────── */
.cesu-data { max-width: 56rem; }
.cesu-data--empty { color: #64748b; }
.cesu-data__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.cesu-data__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0096d4;
    margin: 0;
}
.cesu-data__title { margin: 0.15rem 0 0; }
.cesu-data__years { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cesu-data__year {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    border-radius: 1.5rem;
    background: #f1f5f9;
    color: #344b8d;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.cesu-data__year.is-active { background: #344b8d; color: #fff; }
.cesu-data__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.cesu-data__kpi {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-radius: 0.85rem;
    padding: 1.25rem;
    text-align: center;
}
.cesu-data__kpi-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #344b8d;
    line-height: 1.1;
}
.cesu-data__kpi-label { display: block; margin-top: 0.3rem; color: #64748b; font-size: 0.85rem; }
.cesu-data__section { margin-top: 1.75rem; }
.cesu-data__section-title {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.35rem;
    margin-bottom: 0.6rem;
}
.cesu-data__list { margin: 0; }
.cesu-data__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.cesu-data__row-label { color: #475569; margin: 0; }
.cesu-data__row-value {
    margin: 0;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cesu-data__unit { font-weight: 400; color: #94a3b8; font-size: 0.85rem; }
.cesu-data__source { margin-top: 1.75rem; color: #94a3b8; font-size: 0.85rem; }
.cesu-data__source a { color: #344b8d; }

/* ── Onglet « Données » : dataviz en barres CSS ── */
.cesu-data { margin-left: auto; margin-right: auto; }
.cesu-viz { margin-top: 1.9rem; }
.cesu-viz__title {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.35rem;
    margin-bottom: 0.85rem;
}
.cesu-viz__group { font-weight: 600; color: #475569; margin: 0.85rem 0 0.4rem; }
.cesu-viz__bar {
    display: grid;
    grid-template-columns: 13rem 1fr 4.5rem;
    align-items: center;
    gap: 0.85rem;
    padding: 0.32rem 0;
}
.cesu-viz__bar-label { color: #475569; font-size: 0.9rem; }
.cesu-viz__bar-track {
    background: #f1f5f9;
    border-radius: 1rem;
    height: 0.9rem;
    overflow: hidden;
}
.cesu-viz__bar-fill {
    display: block;
    height: 100%;
    border-radius: 1rem;
    min-width: 3px;
    transition: width 0.3s ease;
}
.cesu-viz__bar-value {
    font-weight: 600;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.cesu-data__details { margin-top: 2rem; }
.cesu-data__details > summary {
    cursor: pointer;
    font-weight: 600;
    color: #344b8d;
    padding: 0.5rem 0;
}
.cesu-data__details[open] > summary { margin-bottom: 0.5rem; }
@media (max-width: 640px) {
    .cesu-viz__bar { grid-template-columns: 7.5rem 1fr 3.5rem; gap: 0.5rem; }
    .cesu-viz__bar-label { font-size: 0.78rem; }
}

/* ── Onglet « Données » : graphes ECharts + positionnement quartiles ── */
.cesu-viz__chart { width: 100%; height: 340px; }
.cesu-viz__chart--bar { height: 280px; }
.cesu-viz__chart--sankey { height: 380px; }
.cesu-bench__lead { color: #475569; margin: 0 0 0.5rem; }
.cesu-bench__bands {
    display: flex;
    gap: 4px;
    margin: 1.25rem 0 0.5rem;
}
.cesu-bench__band {
    position: relative;
    flex: 1;
    height: 2.6rem;
    background: #eef2f7;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cesu-bench__band.is-active { background: var(--color-accent); }
.cesu-bench__band-label { color: #94a3b8; font-weight: 600; font-size: 0.85rem; }
.cesu-bench__band.is-active .cesu-bench__band-label {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.8);
}
.cesu-bench__band-you { color: #fff; font-weight: 700; font-size: 0.82rem; }
.cesu-bench__legend {
    display: flex;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 0.78rem;
}