/* @grammaire v2
   ── L'ANNUAIRE DES CESU — ce qui lui appartient en propre ──

   Ses fiches, sa recherche, sa mise en avant, ses rebonds. Le SQUELETTE —
   panneau, deux colonnes, cadre de carte, infobulle, en-tete de colonne,
   selecteurs, pied de colonne — a demenage dans `@ancesu/grammar` sous
   `directory__*` : les deux annuaires du site s'en servaient, et il portait un
   nom qui ne disait pas la verite.

   ── LE PASSAGE EN V2 ──

   Quatre-vingt-dix-neuf valeurs litterales converties, et par PROPRIETE plutot
   que par proximite : `#fff` en couleur de texte devient `--color-on-primary`,
   le meme en fond devient `--surface-2`. Un rapprochement au plus proche aurait
   mis un jeton de RUBRIQUE la ou il fallait un filet.

   Les replis litteraux — `var(--color-navy, #1e293b)` — sont retires : le jeton
   existe, et un repli qui ne sert jamais fait croire qu'il pourrait manquer.
*/

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

/* LE RETRAIT DE TETE PASSE DE `xl` A `md`. La tete de page est deja une CARTE :
   entre elle et celle du bloc carte, 32 px creusaient un couloir vide que rien
   n'occupait, alors que les deux cartes se lisent comme une suite. */
.cesu-archive {
    /* Le retrait de tete passe de `xl` a `md` : la tete de page est deja une
       CARTE, et 32 px entre elle et celle du bloc carte creusaient un couloir
       vide alors que les deux se lisent comme une suite.

       Celui de PIED passe de `3xl` a `lg` : la section suivante porte son
       propre retrait, et les deux s'ajoutaient — 64 px de vide sous la rangee
       de rebonds, avant 40 de plus. Une respiration, pas deux. */
    padding: var(--spacing-md) 0 var(--spacing-lg);
}


/* La note de pied de colonne, que la maquette pose sous la liste : elle dit ce
   que la colonne montre quand rien n'est selectionne, donc pourquoi elle n'est
   pas vide. */
.cesu-archive__list-note {
    margin: var(--spacing-ms) 0 0;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
    color: var(--color-text-light);
}


/* ── 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);
    /* `xs` collait le chapo au titre — le marqueur du mot « CESU » descend
       sous la ligne de base et venait toucher la premiere ligne du texte. */
    margin: 0 0 var(--spacing-sm);
    line-height: var(--line-height-tight);
}


/* `background-image` seul, jamais le raccourci `background` : il reinitialiserait
   le `background-size` / `background-position` qui ancrent le marqueur en bas
   (cf. `.text-highlight` dans shared.css). */
.text-highlight--cesu {
    background-image: linear-gradient(color-mix(in srgb, var(--color-section-cesu) 18%, transparent), color-mix(in srgb, var(--color-section-cesu) 18%, transparent));
}


.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: var(--surface-2);
    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 color-mix(in srgb, var(--color-section-cesu) 12%, transparent);
}


.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: var(--surface-2);
    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: var(--z-overlay-menu);
    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: var(--surface-2);
    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);
}


/* Bouton carre a icone tant qu'il vit a cote du champ de recherche. */
.cesu-archive__geolocate-label {
    display: none;
}


.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-text); }


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


/* ── 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: var(--surface-2);
    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;
}


.cesu-archive__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    /* Le meme bleu tres pale que le panneau de l'en-tete et que le champ de
       recherche : trois objets de la meme page, une seule teinte, derivee de la
       rubrique et non recopiee. */
    background: color-mix(in srgb, var(--color-section-cesu) 7%, var(--surface-2));
    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;
}


/* La regle du dernier filet n'a plus d'objet : les cartes sont separees par un
   ecart, pas par un trait. */

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


.cesu-archive__item--sibling {
    /* Le filet lateral est retire comme sur les trois autres etats : quatre
       traits colores sur le meme bord, a un pixel d'epaisseur pres, ne se
       distinguaient qu'en les comparant. L'attenuation suffit a dire
       « rattachee, mais secondaire ». */
    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;
}


/* LE NOM DE VILLE EST L'IDENTIFIANT DE LA FICHE, et la maquette le traite
   comme tel : 700, 19 px, police de titre. Il etait rendu a 14 px en 600 dans
   la police de LABEUR — donc a la taille du texte courant, dans la meme police
   que le departement et le telephone poses juste en dessous.

   Repete cent fois, c'est ce qui faisait lire la colonne comme un bloc de
   texte gris plutot que comme une pile de cartes : rien n'y accrochait l'oeil,
   et le seul mot que le lecteur cherche — la ville — ne se distinguait pas de
   ce qui l'entoure. `--font-size-lg` vaut 18 px, le pas de la grammaire le plus
   proche des 19 de la maquette. */
.cesu-archive__item-title {
    font-family: var(--font-title);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin: 0;
    /* `block` N'EST PAS COSMETIQUE : le titre est un `a`, donc une boite EN
       LIGNE, et sur une boite en ligne `overflow: hidden` et `text-overflow`
       sont sans effet. Les trois declarations d'ecretage ci-dessous ne
       faisaient donc rien — et `nowrap` sans ecretage possible ne tronque pas,
       il DEBORDE : un nom de ville long serait sorti de la carte.

       Mesure qui l'a montre : `clientWidth` valait 0 sur ce titre (propriete
       d'une boite en ligne), et rallonger le texte ne le faisait pas compter
       comme coupe. La sonde ne mesurait rien, et son « zero tronque » se
       lisait comme un resultat. */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
    text-decoration: none;
}


/* Le titre etait un LIEN, et son pseudo-element etendait le clic a toute la
   fiche. Les deux sont retires : cliquer une fiche la SELECTIONNE, et c'est
   « voir le centre » qui mene au centre. La surface cliquable ne laissait
   aucune place a un second geste, et c'est elle qui recouvrait le bouton
   « choisir ce centre » — un clic dessus ouvrait la fiche. */

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


/* ── LE MATRICULE, EN REPERE ET NON EN TITRE ──
   Maquette « Annuaire des CESU », defaut n°4 : « les fiches sont titrees par
   leur matricule — CESU 01 en gras et Bourg En Bresse en gris dessous. Le titre
   est le seul mot que le visiteur ne cherche pas. »

   Il ne disparait pas pour autant : il IDENTIFIE le centre, et c'est lui qu'on
   lit dans un courriel ou sur une convention. Il passe au-dessus du titre, en
   chasse fixe — un matricule est un code, pas un mot, et la maquette le compose
   ainsi partout ou elle le montre.

   La regle existait deja dans cette feuille et n'etait EMISE PAR PERSONNE : elle
   attendait un appelant depuis un refactoring anterieur. */
.cesu-archive__item-code {
    font-family: var(--font-data);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    line-height: 1;
    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: var(--color-canvas); }


.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); }
@media (width < 64em) {
    
        .cesu-archive__title {
            font-size: 1.5rem;
        }
        
    
        .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 (width < 48em) {
    
        .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 (width < 36em) {
    
        .cesu-archive__filter-bar {
            flex-direction: column;
        }
        
    
        .cesu-archive__filter,
        .cesu-archive__filter--search-unified {
            flex: 1 1 100%;
            width: 100%;
        }
        
    
        /* Etire sur toute la largeur, le bouton doit s'annoncer : une icone seule
           centree sur 100% de la barre ne dit pas ce qu'elle declenche. */
        .cesu-archive__geolocate-btn {
            width: 100%;
            gap: var(--spacing-sm);
        }
        
    
        .cesu-archive__geolocate-label {
            display: inline;
            font-size: var(--font-size-sm);
            font-weight: 600;
        }
    }



/* ══════════════════════════════════════════
   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-bg);
    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);
    color: color-mix(in srgb, var(--color-section-cesu) 55%, var(--color-primary-dark));
    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: var(--color-on-primary);
    border-color: var(--color-section-cesu);
}


/* ── LES TROIS ETATS D'UNE FICHE SE LISENT SANS FILET LATERAL ──

   Les trois posaient un trait colore a gauche — 3 px pour l'epingle, 3 pour le
   survol, 4 pour la selection. Trois traits pour trois sens, sur le meme bord,
   a un pixel pres : ils ne se distinguaient qu'en les comparant, et le
   `border-left` obligeait en plus a retrancher son epaisseur du rembourrage
   pour que le texte ne se decale pas.

   Un ANNEAU complet, pose en ombre interne, ne coute aucun decalage — il ne
   participe pas a la mise en page — et se lit d'un coup d'oeil. La densite du
   fond porte le reste : plus la fiche compte, plus elle est teintee.

     epingle     anneau vert ANCESU  · fond a peine teinte
     survole     anneau bleu CESU    · fond blanc, la fiche se detache
     selectionne anneau navy epais   · fond navy pale */
.cesu-archive__item--pinned {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-section-ancesu) 55%, transparent);
}


/* 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: color-mix(in srgb, var(--color-section-cesu) 22%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-section-cesu) 35%, transparent); }
        
        60% { background-color: color-mix(in srgb, var(--color-section-cesu) 12%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-section-cesu) 0%, transparent); }
        
        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 (width < 64em) {
    
        .cesu-extras__grid--trainings,
        .cesu-extras__grid--news {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

@media (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: var(--color-on-primary);
}


/* 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: var(--color-on-primary);
}


/* Eyebrow : pill blanche inversee */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__eyebrow {
    background: var(--surface-2);
    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: color-mix(in srgb, var(--color-on-primary) 55%, transparent);
    color: var(--color-on-primary);
    background: color-mix(in srgb, var(--color-on-primary) 8%, transparent);
}


.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: color-mix(in srgb, var(--color-on-primary) 18%, transparent);
    border-color: var(--color-on-primary);
    color: var(--color-on-primary);
}


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


.list-hero--directory-show:not(.list-hero--background-image) .list-hero__metric-label {
    color: color-mix(in srgb, var(--color-on-primary) 85%, transparent);
}


.list-hero--directory-show:not(.list-hero--background-image) .list-hero__metric {
    border-left-color: color-mix(in srgb, var(--color-on-primary) 35%, transparent);
}


/* Chips trust : pastilles blanches */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--trust {
    background: color-mix(in srgb, var(--color-on-primary) 95%, transparent);
    border-color: color-mix(in srgb, var(--color-on-primary) 95%, transparent);
    color: var(--color-success);
}


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


/* Chips d'action : pastilles blanches */
.list-hero--directory-show:not(.list-hero--background-image) .list-hero__chip--action {
    background: color-mix(in srgb, var(--color-on-primary) 95%, transparent);
    border-color: color-mix(in srgb, var(--color-on-primary) 95%, transparent);
    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: var(--color-on-primary);
}


.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: var(--color-on-primary);
}


/* 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);
}


/* 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__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: 40em) {
    
        .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;
}




/* Texte hero du card : blanc pour lisibilite sur l'overlay. */
.cesu-neighbors__card .cesu-neighbors__title { color: var(--color-on-primary); }














.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: var(--surface-2);
    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 color-mix(in srgb, var(--color-primary-dark) 8%, transparent);
}


.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%, var(--surface-2)),
        color-mix(in srgb, var(--color-section-cesu) 28%, var(--surface-2)));
    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). */
/* LA GRILLE VIENT DE `article-single__layout`, comme sur toute fiche du site.
   Ce qui reste ici est la seule chose qui lui soit propre : rien. Le
   `margin-top` posé jadis s'ajoutait à la gouttière du squelette. */
.cesu-show__layout {
    margin-top: 0;
}


/* 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. */
/* Pas de marge negative : elle compensait un rembourrage que le parent
   (`.cesu-show__main`) ne porte NULLE PART — cette classe n'a aucune regle CSS.
   Les deux valeurs s'annulaient donc sur grand ecran, ce qui rendait le defaut
   invisible, mais en dessous de la largeur ou le `.container` reduit sa
   gouttiere a 12 px, la marge de -16 px depassait : la page defilait
   horizontalement de 4 px sur telephone.

   Une compensation ne se pose qu'en face de ce qu'elle compense. */
.cesu-show__formations {
    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: 0; }


/* ──────────────────────────────────────────────────────────
   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);
}


/* 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%, var(--surface-2));
    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: var(--color-on-primary);
    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: var(--color-on-primary);
    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%, var(--color-shade));
}


.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%, var(--surface-2));
    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); }




/* ──────────────────────────────────────────────────────────
   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.
   ────────────────────────────────────────────────────────── */
/* PLUS DE BORNE PROPRE : la colonne de lecture du squelette porte la sienne, et
   deux bornes emboîtées rendaient une colonne de 56 rem DANS une colonne déjà
   bornée — le contenu se resserrait sans que rien ne le demande. */
.cesu-show__presentation-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-section);
}


.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: var(--surface-2);
    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: var(--surface-2);
    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, var(--color-section-cesu)));
}


.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%, color-mix(in srgb, var(--color-on-primary) 14%, transparent) 0%, transparent 60%),
        /* Les deux bornes sont des navys INTERMEDIAIRES, entre le navy de
           marque et le navy sombre : elles s'expriment en melange plutot qu'en
           valeurs, et suivent alors la charte si elle bouge. */
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-navy) 62%, var(--color-primary-dark)) 0%,
            var(--color-navy) 50%,
            color-mix(in srgb, var(--color-navy) 55%, var(--color-primary-dark)) 100%);
    color: var(--color-on-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-width: 0;
    box-shadow:
        0 12px 32px -16px color-mix(in srgb, var(--color-primary-dark) 50%, transparent),
        0 1px 2px color-mix(in srgb, var(--color-shade) 12%, transparent);
}


/* Pointille subtil : pattern de respiration sur la surface navy. */
.cesu-contact__info::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-on-primary) 7%, transparent) 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__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: var(--color-on-primary);
    letter-spacing: .02em;
}


.cesu-contact__info-title svg {
    color: color-mix(in srgb, var(--color-on-primary) 80%, transparent);
    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: color-mix(in srgb, var(--color-on-primary) 70%, transparent);
    margin: 0;
}


.cesu-contact__info-value {
    margin: 0;
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-on-primary) 95%, transparent);
    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: var(--color-on-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--color-on-primary) 35%, transparent);
    font-weight: 500;
    transition: text-decoration-color 0.15s ease;
}


.cesu-contact__info-link:hover {
    text-decoration-color: var(--color-on-primary);
}


/* 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);
}










/* 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;
}










/* 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;
}
@media (width < 64em) {
    
        .cesu-show__map-panel { position: static; width: 100%; margin-top: var(--spacing-md); }
    }

@media (width < 48em) {
    
        .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) 12%, var(--surface-2));
    color: color-mix(in srgb, var(--color-success) 70%, var(--color-shade));
}


.cesu-metric__delta--down {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--surface-2));
    color: color-mix(in srgb, var(--color-danger) 70%, var(--color-shade));
}


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











/* 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 (width < 36em) {
    
        .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 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: color-mix(in srgb, var(--color-on-primary) 96%, transparent);
    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);
    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);
    text-decoration: none;
    border-top: 1px solid var(--color-border-light, var(--color-bg-light));
}


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


.cesu-hero-map__panel-city {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}


/* ─────────────────────────────────────────────────────────────
   Onglet Actualites — reutilise la `content-list__grid` standard pour les
   cards article. Pas de borne de largeur propre : la colonne de lecture du
   squelette porte la sienne, et deux bornes emboitees resserraient l'onglet
   sous la largeur des quatre autres.
   ───────────────────────────────────────────────────────────── */


.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-light);
    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.

   Pas de borne de largeur propre : la colonne de lecture du squelette porte
   la sienne.
   ───────────────────────────────────────────────────────────── */


.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-light);
    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, var(--color-bg-light));
}


.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);
    color: var(--color-section-cesu, var(--color-cesu, var(--color-section-cesu)));
    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);
    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-light);
    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, var(--color-section-cesu)));
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-section-cesu, var(--color-cesu, 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;
    flex-shrink: 0;
}


.cesu-document-row__action:hover,
.cesu-document-row__action:focus-visible {
    background: var(--color-section-cesu, var(--color-cesu, var(--color-section-cesu)));
    color: var(--color-on-primary);
}
@media (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) ────── */

/* PAS DE BORNE PROPRE : la colonne de lecture du squelette porte la sienne. Une
   borne de 56 rem posée DANS une colonne déjà bornée resserrait le bilan sans
   que rien ne le demande, et il ne tombait plus à la largeur des trois autres
   onglets. Même correction que pour la pile de la présentation, plus haut. */

.cesu-data--empty { color: var(--color-text-light); }

.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: var(--color-section-cesu);
    margin: 0;
}

.cesu-data__title { margin: 0.15rem 0 0; }

/* Le selecteur de millesime est parti dans `_year_switch` (grammaire) : c'est
   le meme objet que celui du hero de /donnees, et le laisser ici en aurait
   fait deux dessins. */

/* Les deux chiffres du bilan emploient `_stat_row`, la rangee de grandeurs de la
   grammaire : c'etait le dernier des quatre traitements du depot. Il ne reste
   ici que l'ecart sous la rangee, qui appartient a cette fiche. */
.cesu-data__figures {
    margin-bottom: var(--spacing-xl);
}

.cesu-data__section { margin-top: 1.75rem; }

.cesu-data__section-title {
    border-bottom: 2px solid var(--color-border);
    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 var(--color-bg-light);
}

.cesu-data__row-label { color: var(--color-text-light); margin: 0; }

.cesu-data__row-value {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cesu-data__unit { font-weight: 400; color: var(--color-text-disabled); font-size: 0.85rem; }

.cesu-data__source { margin-top: 1.75rem; color: var(--color-text-disabled); font-size: 0.85rem; }

.cesu-data__source a { color: var(--color-primary); }


/* ── Onglet « Données » : dataviz en barres CSS ── */

.cesu-viz { margin-top: 1.9rem; }

.cesu-viz__title {
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.35rem;
    margin-bottom: 0.85rem;
}

.cesu-viz__group { font-weight: 600; color: var(--color-text-light); 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: var(--color-text-light); font-size: 0.9rem; }

.cesu-viz__bar-track {
    background: var(--color-bg-light);
    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: var(--color-text);
    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: var(--color-primary);
    padding: 0.5rem 0;
}

.cesu-data__details[open] > summary { margin-bottom: 0.5rem; }
@media (width < 40em) {
    
        .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: var(--color-text-light); 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: var(--color-bg-light);
    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: var(--color-text-disabled); 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: color-mix(in srgb, var(--color-on-primary) 80%, transparent);
}

.cesu-bench__band-you { color: var(--color-on-primary); font-weight: 700; font-size: 0.82rem; }

.cesu-bench__legend {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-disabled);
    font-size: 0.78rem;
}



/* ══════════════════════════════════════════════════════════════
   EN-TETE DE L'ANNUAIRE — maquette « Annuaire des CESU », 2a
   ══════════════════════════════════════════════════════════════

   « Autour de moi » et sa note, en colonne droite de l'en-tete. La maquette le
   garde quand elle retire le champ de recherche, « parce que c'est la seule
   chose que la carte ne sait pas faire ».

   Le bouton EST une brique — meme hauteur, meme rayon, meme graisse que
   `.btn--outline-dark` — mais il porte des liaisons Alpine et deux gabarits
   d'icone conditionnels que la macro `ui.button` ne sait pas rendre. Ce qui est
   ecrit ici est donc sa MISE EN PAGE, pas son dessin : les valeurs viennent des
   memes jetons. */
.cesu-geo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
    text-align: right;
}


.cesu-geo__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: var(--touch-target-min);
    padding-inline: var(--spacing-lg);
    border: 1.5px solid var(--color-navy);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--color-navy);
    font-size: var(--font-size-xs);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}


.cesu-geo__btn:hover:not(:disabled) {
    background: var(--color-navy);
    color: var(--color-on-primary);
}


.cesu-geo__btn:disabled {
    opacity: 0.6;
    cursor: default;
}


/* La note tient en une mesure courte : posee sous un bouton de 200 px, une
   phrase pleine largeur ferait deux axes de lecture dans la meme colonne. */
.cesu-geo__note {
    margin: 0;
    max-width: 34ch;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
    color: var(--color-text-light);
}


/* LA LIGNE DE META EN CHASSE FIXE, comme la maquette la pose. Elle aligne des
   GRANDEURS — trois nombres suivis de leur unite — et la chasse fixe est ce qui
   les fait lire comme une serie plutot que comme une phrase. Meme raison que le
   repere de format d'une carte de ressource. */
/* ── LE PANNEAU « VOTRE CESU », colonne droite de l'en-tete (maquette 3a) ──

   Il porte un CONTENU et non un decompte, dans deux etats exclusifs : le centre
   epingle au retour, l'invitation a en epingler un au premier passage. C'est la
   correction centrale du tour 3, qui repond a un manque nomme — « rien qui
   reconnaisse le visiteur deja venu, alors que l'en-tete du site affiche Mon
   CESU ».

   Le fond est le meme voile bleu pale que les tuiles de preuve qu'il remplace :
   ce n'est pas une carte posee sur la carte, c'est un panneau creuse dedans. */
.cesu-mine {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    /* LE FOND EST DERIVE DE LA COULEUR DE RUBRIQUE, pas recopie de la maquette.
       Elle y pose `#f1f5fa`, un bleu tres pale ; `--surface-3` est un voile
       BLANC, donc invisible sur la carte blanche qui le porte — mesure,
       `color-mix(in srgb, var(--color-on-primary) 72%, transparent)` sur du blanc. Le derive suit la rubrique : posee
       ailleurs, la meme brique prendrait la teinte de sa section. */
    background: color-mix(in srgb, var(--color-section-cesu) 7%, var(--surface-2));
    min-width: 0;
}


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


.cesu-mine__kicker {
    font-size: var(--font-size-2xs);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-text-light);
}


/* LA VILLE TIENT LE TITRE, pas le matricule. « CESU 35 » est, dit la maquette,
   « le seul mot que le visiteur ne cherche pas » : il descend d'un rang, dans la
   ligne d'etablissement. */
.cesu-mine__city {
    font-family: var(--font-title);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark);
}


.cesu-mine__org {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}


.cesu-mine__title {
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark);
    text-wrap: pretty;
}


.cesu-mine__text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text);
}


.cesu-mine__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-ms);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-xs);
}


/* « Changer » est un lien, pas un bouton : deux controles encadres cote a cote
   se lisent comme deux choix equivalents, quand l'un mene au centre et que
   l'autre defait un reglage. Meme regle que la rangee de service d'une tete de
   liste. */
.cesu-mine__change {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-navy);
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ── LA RANGEE DE RECHERCHE DE L'EN-TETE (maquette 3a) ── */
.cesu-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-ms);
    margin-top: var(--spacing-sm);
}


/* Le champ s'etire, le bouton geo garde sa largeur : c'est la recherche qui
   doit gagner la place quand la carte s'elargit. */
.cesu-search__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1 1 17.5rem;
    min-width: 0;
    height: var(--control-height-hero, 3.375rem);
    padding-inline: var(--spacing-md) var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-section-cesu) 7%, var(--surface-2));
}


.cesu-search__icon { color: var(--color-navy); flex: none; }


.cesu-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-size: var(--font-size-md);
    color: var(--color-text);
}


.cesu-search__input:focus { outline: none; }


/* LE CHAMP GAGNE SON BOUTON, et la maquette dit pourquoi : « un champ sans
   bouton laisse croire qu'il filtre en direct ». Il vit DANS le champ, comme la
   barre de recherche du site. */
.cesu-search__submit {
    flex: none;
    height: 2.625rem;
    padding-inline: var(--spacing-md);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    color: var(--color-on-primary);
    font-size: var(--font-size-2xs);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    cursor: pointer;
}


.cesu-search__submit:hover { background: var(--color-primary-dark); }


/* La liste de suggestions est ancree sur le CHAMP, pas sur la rangee : ancree
   plus haut, elle se decalerait de la largeur du bouton geo. */
.cesu-search__field .cesu-archive__autocomplete {
    top: calc(100% + var(--spacing-xs));
    left: 0;
    right: 0;
}


/* La hauteur du champ de tete : 54 px dans la maquette, plus haute qu'un
   controle ordinaire parce qu'elle porte la question principale de la page. */
.cesu-search__field { --control-height-hero: 3.375rem; }


/* LA COULEUR DE RUBRIQUE, POSEE SUR L'EN-TETE. La maquette teinte le point et
   le filet au bleu CESU (`#2aa9e0`), et non au vert de marque : l'annuaire est
   la tete de la rubrique « Votre CESU », dont la barre de navigation porte deja
   cette couleur.

   `--section-color` vaut le vert partout par defaut — mesure a la racine — donc
   `current_section = 'cesu'` ne le recolore PAS : la variable n'est pas cablee
   sur cette valeur. On la redeclare donc ici, sur l'en-tete, ou tout ce qui en
   depend la lit : le point de rubrique, le filet du titre, et le trait des
   briques qui heritent. */
.content-header--directory {
    --section-color: var(--color-section-cesu);
}


.content-header--directory .content-header__meta {
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
}


/* L'ACTION DE LA FICHE — maquette 1b, defaut n°5 : « ni lien vers le centre, le
   visiteur doit appeler pour savoir s'il est au bon endroit ».
   Elle se demarque des contacts par sa graisse et sa couleur pleine : un numero
   de telephone est une donnee, « voir le centre » est un geste. */
.cesu-archive__item-go {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-navy);
    /* Au-dessus du pseudo-element etire du titre, sinon la carte l'avale et le
       survol ne le distingue plus du reste. */
    position: relative;
    z-index: 1;
}


.cesu-archive__item-go:hover { color: var(--color-primary-dark); }


/* LA RANGEE DE REBONDS EST MONTEE EN GRAMMAIRE, sous `.rail-row` : elle ne doit
   rien a l'annuaire — c'est la disposition « aller plus loin » que n'importe
   quelle page de rubrique voudra sous son contenu. Ses encres d'etat aussi, qui
   etaient ecrites ici en valeurs litterales. Ne reste que la marge de tete, qui
   appartient bien a cette page. */
.cesu-further {
    display: block;
    margin-top: var(--spacing-lg);
}


/* ── LA FICHE SURVOLEE SUR LA CARTE ──

   `cesu-archive__item--hovered` etait posee par le gabarit depuis l'origine et
   NE STYLAIT RIEN : une classe liee a `hoveredDept`, sans une regle nulle part.
   Le survol d'un departement ne mettait donc rien en evidence, et rien ne le
   signalait — meme famille que la classe qui ne matche aucun selecteur.

   Le filet lateral plutot qu'un fond : la fiche epinglee et la fiche pulsee
   emploient deja le fond, et trois etats sur le meme canal ne se distinguent
   plus. */
/* LE MEME ETAT POUR LA FICHE SURVOLEE ET LA FICHE CLIQUEE, et c'est un choix,
   pas une economie. Les deux disent la meme chose — « c'est de ce centre qu'on
   parle » — l'une le temps d'un geste, l'autre jusqu'au suivant. Les distinguer
   par deux dessins obligeait a apprendre lequel veut dire quoi, et la fiche
   cliquee, une fois le curseur parti, semblait perdre sa surbrillance : elle ne
   gardait qu'un anneau plus fin que celui qu'on venait de voir. */
.cesu-archive__item--hovered,
.cesu-archive__item--picked {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-section-cesu) 60%, transparent);
    background: var(--surface-2);
}


/* ── CHOISIR SON CENTRE DEPUIS LA FICHE ── */
.cesu-archive__item-pin {
    /* AU-DESSUS DE LA SURFACE CLIQUABLE DE LA CARTE. Le titre etend son clic a
       toute la fiche par un pseudo-element ; il recouvrait ce bouton, qui
       n'etait donc JAMAIS atteint — le clic ouvrait la fiche du centre au lieu
       de l'epingler. Mesure : `avant 100 boutons / apres 0`, et l'URL passee a
       `/annuaire/cesu/01`. Rien ne le signalait : les deux gestes menent a
       quelque chose de plausible.

       Les autres liens de la ligne (telephone, site, « voir le centre ») sont
       deja au-dessus par leur propre empilement ; ce bouton n'en avait pas. */
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    min-height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: var(--color-navy);
    transition: background var(--transition-base), border-color var(--transition-base);
}


.cesu-archive__item-pin:hover {
    background: var(--color-bg-light);
    border-color: var(--color-navy);
}


/* L'etat « c'est le votre » se lit sans etre un appel a l'action : le vert de
   l'ANCESU, plein, et pas de survol qui promette un changement. */
.cesu-archive__item-pin--on {
    border-color: transparent;
    background: color-mix(in srgb, var(--color-section-ancesu) 16%, transparent);
    color: var(--color-text);
}


/* L'ACTION DE LA FICHE A SA PROPRE LIGNE. Rangee avec le telephone, le site et
   « voir le centre » dans une ligne qui revient a la ligne, elle finissait
   tantot au bout du rang, tantot seule en dessous, selon qu'une fiche porte un
   site web ou non — mesure : quatre elements pour 259 px utiles sur 341, donc
   le pli tombait sur la presence d'un champ. Une action dont la position
   depend des donnees voisines ne se retrouve pas d'une fiche a l'autre. */
.cesu-archive__item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-ms);
    margin-top: var(--spacing-xs);
    /* `nowrap` : c'est la raison d'etre de cette ligne. Les deux actions
       tenaient dans la ligne des CONTACTS, qui revient a la ligne — l'une
       finissait tantot au bout du rang, tantot seule en dessous, selon qu'une
       fiche porte un site web. Une action dont la position depend des donnees
       voisines ne se retrouve pas d'une fiche a l'autre. */
    flex-wrap: nowrap;
}



/* LA FICHE RETENUE PAR UN CLIC. Le survol pose un filet de 3 px, la selection
   en pose un de 4 et fonce le fond : les deux etats coexistent — on survole
   souvent la fiche qu'on vient de choisir — et doivent rester distincts sans
   se disputer le meme canal. */

/* Le curseur dit que la fiche repond au clic, maintenant qu'elle n'est plus un
   lien : sans lui, rien n'annonce qu'il se passe quelque chose. */
.cesu-archive__item {
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════
   LE RAIL DE LA FICHE — navigation, coordonnées, carte

   Les trois vivaient ailleurs, et aucun n'y était à sa place : les onglets
   flottaient au centre de la page sans surface, les coordonnées étaient des
   puces posées sur la photo du hero — donc lisibles une fois sur deux — et la
   carte était l'aside de ce même hero.

   Aucune des trois ne change d'une sous-page à l'autre. C'est la définition
   d'un rail, et c'est ce qui justifie qu'elles y descendent ensemble.

   La surface, le rembourrage et le rayon viennent d'`article-sidebar__section`,
   la brique du squelette. Ce qui suit ne décrit que la LISTE.
   ══════════════════════════════════════════════════════════════ */

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

/* La cible fait toute la largeur du rail : dans une liste verticale, viser le
   mot est plus difficile que viser la ligne. Hauteur au-delà des 24 px de
   WCAG 2.5.8, que le rembourrage suffit à donner. */
.cesu-nav__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-inline: calc(var(--spacing-sm) * -1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.cesu-nav__link:hover {
    background: var(--surface-4);
    color: var(--color-primary);
}

/* L'ONGLET COURANT SE MARQUE PAR SON FOND ET SON ENCRE, jamais par la seule
   couleur : `aria-current` le dit aux technologies d'assistance, et le contraste
   le dit à l'œil. Une liste où l'actif ne se distingue que par une teinte ne se
   lit pas en vision réduite. */
/* L'ONGLET COURANT SE MARQUE PAR SON FILET, pas par un aplat.

   Il était peint en marine plein — une couleur que le site n'emploie qu'en pied
   de page et sur ses appels à l'action, jamais pour signaler où l'on est. Dans
   un rail clair, ce rectangle sombre pesait plus lourd que la carte qu'il
   commande.

   La marque devient celle de la grammaire : le voile de niveau 4, l'encre de la
   marque, et le filet de rubrique à gauche — le même trait que les en-têtes de
   section. Trois signaux, dont deux non colorés : le fond et la graisse restent
   lisibles en vision réduite, et `aria-current` le dit à qui écoute. */
.cesu-nav__link--on {
    position: relative;
    background: var(--surface-4);
    color: var(--color-primary-dark);
}

.cesu-nav__link--on::before {
    content: "";
    position: absolute;
    inset-block: var(--spacing-2xs);
    left: 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--section-color);
}

.cesu-nav__icon {
    flex: none;
    color: var(--color-text-light);
}

.cesu-nav__link--on .cesu-nav__icon,
.cesu-nav__link--on .cesu-nav__count {
    color: var(--color-primary-dark);
}

/* L'action de contact ferme le bloc des coordonnées : elle prolonge la liste,
   elle ne la commande pas. D'où sa place SOUS, et sa largeur pleine — dans un
   rail de 20 rem, un bouton court laisse un vide qui se lit comme un défaut. */
.cesu-nav__write {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-ms);
    width: 100%;
}

/* La carte reprend la largeur du rail, et son cadre vient de `directory.css`. */
.cesu-show__rail-map .directory-show__map-svg,
.cesu-show__rail-map svg {
    width: 100%;
    height: auto;
}

/* Les comptes du centre ferment le bloc des coordonnées, sous l'action. */
.cesu-nav__socials {
    margin-top: var(--spacing-ms);
}

/* L'itinéraire s'accroche à l'adresse qu'il ouvre : c'est la même information
   vue depuis le geste, pas une coordonnée de plus. */
/* VINGT-QUATRE PIXELS DE HAUT (WCAG 2.5.8). Mesure a 375 px : ce lien et ceux
   de la liste de coordonnees rendaient 18 a 20 px. L'exception accordee aux
   liens EN LIGNE DANS UNE PHRASE ne les couvre pas — ce sont des liens
   autonomes, dans une liste. */
.directory-contact__aside {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    margin-top: var(--spacing-2xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
}

.cesu-show__rail a.directory-contact__value {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}


/* ══════════════════════════════════════════════════════════════
   LA FICHE, DANS L'ORDRE QUE LA MAQUETTE POSE

   Deux corrections, et ce sont les deux premiers défauts qu'elle relève.

   1. LA NAVIGATION PASSE À GAUCHE. « Dans cette fiche » est le menu des cinq
      sous-pages ; relégué en colonne de droite, il se lisait après ce qu'il
      commande. Les deux pistes du squelette sont donc échangées pour cette
      page — et l'aside passe premier DANS LE BALISAGE, pas seulement à
      l'écran : dans une grille, l'ordre du source est l'ordre de lecture, donc
      le clavier et le lecteur d'écran rencontrent la navigation au moment où
      l'œil la rencontre. Un `order` CSS aurait dissocié les deux.

   2. LE CONTENU ENTRE EN CARTE. Le plateau gris ne porte jamais de contenu
      dans cette grammaire : il porte des cartes.
   ══════════════════════════════════════════════════════════════ */

@media (width >= 64em) {
    .cesu-show__layout {
        grid-template-columns: 20rem minmax(0, 1fr);
    }
}

/* ── AU TELEPHONE, LE NOM DU CENTRE PASSE DEVANT SA COLONNE ──

   La colonne est la PREMIERE du balisage, et c'est voulu : sur grand écran le
   menu des sous-pages se lit avant ce qu'il commande. Empilée, elle plaçait ses
   quatre blocs avant le titre — mesure à 375 px : « CESU 35 » commençait à
   1 065 px du haut, soit une écran et demi de défilement pour lire le nom de la
   page où l'on vient d'arriver.

   `display: contents` dissout l'enveloppe de la colonne : ses quatre sections
   deviennent des enfants directs de la grille, donc plaçables une à une. Le menu
   garde sa place devant, le reste — carte, voisins, tenue de la fiche — passe
   derrière le contenu, qui est ce qu'on est venu lire. */
@media (width < 64em) {
    .cesu-show__layout {
        display: flex;
        flex-direction: column;
        gap: var(--rhythm-section);
    }

    .cesu-show__rail,
    .cesu-show__rail .article-sidebar__sticky {
        display: contents;
    }

    .cesu-show__rail .cesu-nav {
        order: 1;
    }

    .cesu-show__main {
        order: 2;
    }

    .cesu-show__rail .article-sidebar__section:not(.cesu-nav) {
        order: 3;
    }
}

/* La carte porte le rembourrage ; les sections qu'elle contient ne posent donc
   plus le leur, sans quoi les deux s'ajoutent au bord. */
.cesu-show__card {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-section);
}

/* LA CARTE DE VISITE : des VALEURS, donc la chasse fixe du site, et une seule
   ligne. Elle remplace le pavé de coordonnées que la page répétait deux à trois
   fois — le rail la portait encore il y a un commit. */
/* Les liens de la carte de visite gardent l'encre du site, et une cible de
   24 px : ce sont des liens autonomes dans une ligne de valeurs. */
.cesu-show__identity-line a {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--color-primary);
}

/* LE SEPARATEUR PREND L'ENCRE DE SA LIGNE. En couleur de bordure il rendait
   1,4:1 — l'audit le releve deux fois, `aria-hidden` ne dispensant pas du
   contraste puisqu'il reste vu. */
.cesu-show__identity-sep {
    color: var(--color-text-light);
}

/* LA CHASSE FIXE EST CELLE DES VALEURS, pas celle des adresses. Une rue et un
   nom de domaine y prennent l'allure d'un relevé, et le numéro de téléphone —
   qui, lui, est bien une valeur — cesse de se distinguer de ce qui l'entoure. */
.cesu-show__identity {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs) var(--spacing-sm);
    align-items: center;
}

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

.cesu-show__identity-phone {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

/* L'itinéraire suit la ligne d'identité, à la chasse du texte courant : en
   chasse fixe il se lirait comme une valeur, alors que c'est une action. */
.cesu-show__identity-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    margin-left: var(--spacing-xs);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
   LA COLONNE : COMPTES D'ONGLET, VOISINS, TENUE DE LA FICHE
   ══════════════════════════════════════════════════════════════ */

/* LE COMPTE SE CALE A DROITE DE SON INTITULE, en chasse fixe : c'est une
   VALEUR. Il permet de décider d'aller sur un onglet sans y aller. */
.cesu-nav__count {
    margin-left: auto;
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.cesu-nav__link--on .cesu-nav__count {
    color: var(--color-primary-dark);
}

/* ── LES CENTRES VOISINS ──
   Une rangée par centre : le nom prend la place qu'il lui faut, la distance se
   cale au bout. `min-width: 0` sans quoi un nom long pousse la distance hors du
   rail au lieu de s'écrêter. */
.cesu-near {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cesu-near__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    min-height: 1.5rem;
    padding-block: var(--spacing-2xs);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
}

.cesu-near__row:hover .cesu-near__name {
    text-decoration: underline;
}

.cesu-near__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cesu-near__dist {
    flex: none;
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.cesu-near__all {
    margin-top: var(--spacing-xs);
}

.cesu-near__note {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}


/* ── LA COLONNE COULE AVEC LA PAGE, ELLE NE DEFILE PAS DANS ELLE-MEME ──

   `article-sidebar__sticky` borne sa hauteur à la fenêtre et pose
   `overflow-y: auto` : c'est juste pour un SOMMAIRE, qui tient en quelques
   lignes et doit rester visible pendant la lecture. Cette colonne porte cinq
   blocs — navigation, contact, carte, voisins, tenue de la fiche — et dépasse
   la fenêtre : elle devenait un conteneur à ascenseur interne, avec un doigt
   qui attrape tantôt la boîte, tantôt la page.

   Même cause et même remède que la liste des annuaires sur mobile : il faut
   les DEUX, que rien ne plafonne et que rien n'écrête. `position: sticky`
   reste : sur un contenu plus haut que la fenêtre, il se comporte comme un
   bloc ordinaire jusqu'à ce que son bas soit atteint. */
.cesu-show__rail .article-sidebar__sticky {
    max-height: none;
    overflow: visible;
}


/* Le renvoi FAQ n'est plus une carte : une phrase discrete sous le formulaire,
   la ou l'on hesite encore a ecrire. */
.cesu-contact__faq-note {
    margin: var(--spacing-md) 0 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}


/* ══════════════════════════════════════════════════════════════
   LA COLONNE D'ACTION DE LA CARTE

   La maquette pose à droite du titre ce qu'on vient FAIRE : la prochaine
   session, puis écrire, appeler, s'y rendre, épingler. Les quatre gestes
   étaient dispersés — « écrire » dans le rail, « appeler » et « itinéraire »
   dans la ligne d'identité, « épingler » nulle part.
   ══════════════════════════════════════════════════════════════ */

.cesu-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* L'action principale barre la colonne : c'est la seule de la page, et un
   bouton court y laisserait un vide qui se lit comme un défaut. */
.cesu-actions__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
}

/* Les trois secondaires se partagent la ligne, et se replient plutôt que de
   pousser : dans une colonne de 20 rem, « Itinéraire » ne tient pas toujours. */
.cesu-actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.cesu-actions__row .btn {
    flex: 1 1 auto;
}

/* ── LA PROCHAINE SESSION ──
   Un rappel voilé, pas une carte : il vit DANS la carte de tête, et deux
   surfaces emboîtées y feraient un objet dans un objet. */
.cesu-next {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--surface-4);
    border-radius: var(--radius-md);
}

/* La date est une VALEUR : chasse fixe, comme partout où le site en affiche. */
.cesu-next__date {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-primary);
}

.cesu-next__what {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}


/* ══════════════════════════════════════════════════════════════
   LA TETE DE CARTE : DEUX COLONNES ALIGNEES EN HAUT

   `content-header__body--split` aligne les deux colonnes par le BAS
   (`align-items: flex-end`), et sa docblock dit pourquoi : sur une page de
   liste, l'aside est un bloc court de chiffres, et coller les bas fait
   disparaître un blanc.

   Ici l'aside est PLUS HAUT que le titre — prochaine session, action
   principale, trois actions secondaires, comptes. Coller les bas pousse donc
   le titre vers le bas, et ouvre au-dessus du sur-titre exactement le vide que
   la règle voulait fermer. Mesure : 160 px entre le haut de la carte et
   « BRETAGNE ».

   La maquette aligne les deux HAUTS. Et l'aside y vaut le quart de la largeur,
   pas 26 rem : à 416 px, les trois boutons secondaires s'étalaient sur une
   ligne quand la maquette les serre.
   ══════════════════════════════════════════════════════════════ */

@media (width >= 48em) {
    .cesu-show__card .content-header__body--split {
        align-items: flex-start;
    }

    .cesu-show__card .content-header__body--split > .content-header__aside {
        flex: 0 0 16rem;
        max-width: 16rem;
    }
}

/* Les comptes du centre ferment la colonne d'action : sans écart, l'icône
   flottait seule sous les boutons, sans rattachement visible. */
.cesu-actions .social-links {
    margin-top: var(--spacing-xs);
}


/* LE CONTENEUR RYTHME, LES SECTIONS NE RYTHMENT PLUS. `.cesu-show__section`
   porte `margin-bottom: 32px` depuis le temps où les sections se suivaient
   dans un bloc ordinaire ; la pile est désormais une colonne flex à
   `gap: --rhythm-section`, et les deux s'ajoutaient — 64 px mesurés entre
   « Engagement et qualité » et « Équipe » pour un écart qui en vaut 32.

   Quatrième fois que ce motif se présente sur ce lot : une marge d'enfant
   survivant à l'arrivée d'un `gap` sur son parent. Elle ne se voit jamais dans
   la feuille, seulement en comparant le bas d'un bloc au haut du suivant. */
.cesu-show__presentation-stack > .cesu-show__section {
    margin-bottom: 0;
}


/* ── LA LIGNE D'IDENTITE REMONTE CONTRE LE TITRE, ET UN FILET LA SUIT ──

   Elle est sœur de l'en-tête dans la carte, donc elle commençait sous le PLUS
   HAUT des deux colonnes — l'aside — alors que le titre s'arrête bien plus
   haut. Deux corrections, et il fallait les deux : l'enveloppe du titre cesse
   de s'étirer à la hauteur de la rangée, et la marge du bloc suivant se réduit
   à l'écart d'une ligne.

   Le filet qui vient après n'est pas décoratif : sans lui, l'adresse et le
   sur-titre de la première section se touchent, et l'on ne sait plus si la
   ligne de coordonnées appartient au titre ou à ce qui suit. */
.cesu-show__card .content-header + .cesu-show__identity {
    margin-top: var(--spacing-sm);
}

/* L'ECART SE MESURE A L'OEIL, PAS AU JETON. Deux fois `--rhythm-section` de part
   et d'autre du filet rendait soixante-quinze pixels au-dessus contre quarante
   en dessous : la ligne de coordonnees emporte le bas de sa boite de ligne, que
   la marge ignore. La valeur haute est donc d'un cran inferieure, pour que les
   deux blancs se ressemblent. */
.cesu-show__identity + * {
    margin-top: var(--spacing-lg);
    padding-top: var(--rhythm-section);
    border-top: 1px solid var(--color-border);
}

@media (width >= 48em) {
    /* LA COLONNE COURTE NE TIRE PAS LA HAUTEUR DE SA VOISINE : `align-items:
       flex-start` posait bien les deux colonnes en haut, mais l'enveloppe du
       titre gardait la hauteur de la rangée, et l'adresse tombait cent vingt
       pixels sous le filet. */
    .cesu-show__card .content-header__body--split > .content-header__main {
        align-self: flex-start;
    }
}


/* ── LE FILET OUVRE LE BLOC, L'INTITULE LE SUIT ──

   `ui-rule` est un `<span>` : dans une colonne flex il tiendrait sa ligne, mais
   `article-sidebar__section` n'en est pas une. On le pose donc en bloc, avec
   l'écart que la grammaire met entre un filet et le texte qu'il annonce — le
   même que `titled-card__head`. */
.cesu-show__rail .article-sidebar__section > .ui-rule {
    display: block;
    margin-bottom: var(--spacing-sm);
}

/* L'intitulé perd sa marge propre : le filet porte désormais l'écart, et les
   deux s'ajoutaient. */
.cesu-show__rail .ui-rule + .article-sidebar__section-title {
    margin-top: 0;
}


/* ── ONGLET PRESENTATION : REPERES ET EQUIPE ──

   Deux objets, deux grilles, et rien d'autre. Ils remplacent quatre blocs qui
   avaient chacun leur dessin (bande de chiffres, cartes « qualité » à icône,
   pastilles ORSAN peintes en couleurs venues du référentiel, liste d'équipe à
   filet d'un pixel).

   La TEINTE ne s'écrit nulle part ici : `ui-rule` lit `--section-color`, que
   `section--cesu` pose sur le corps de la page. Redire le cyan à chaque appel
   était la recopie que les jetons existent pour éviter. */

.cesu-facts-section .cesu-facts__lead {
    margin-bottom: var(--rhythm-section);
}

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

.cesu-fact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.cesu-fact .ui-rule {
    margin-bottom: var(--spacing-2xs);
}

.cesu-fact__key {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.cesu-fact__value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}

.cesu-fact__link {
    display: inline-block;
    margin-left: var(--spacing-2xs);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
}

.cesu-fact__note {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-light);
}

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

.cesu-team__member {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    min-width: 0;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

/* La pastille emprunte la teinte de rubrique, jamais une couleur écrite : la
   même fiche servie sous une autre rubrique suivrait sans qu'on y revienne. */
.cesu-team__initials {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--section-color) 16%, transparent);
    color: var(--color-primary-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cesu-team__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.cesu-team__name {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

.cesu-team__role {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-light);
}

.cesu-team__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-2xs);
}

.cesu-team__link {
    font-size: 0.8125rem;
    color: var(--color-primary);
    overflow-wrap: anywhere;
}


/* ── ONGLET DONNEES : DES BARRES, PLUS DE CANEVAS ──

   Les deux diagrammes ECharts (Sankey, histogramme) sont remplacés par des
   barres CSS. La valeur reste dans le DOM : lisible au lecteur d'écran, à
   l'impression et à la recherche dans la page, ce qu'un canevas ne permet pas.

   La LARGEUR arrive par `--part`, en style inline, parce qu'elle est une
   donnée et non une décision de dessin. Les couleurs, elles, ne s'écrivent
   jamais dans le gabarit : les segments prennent leur teinte des rubriques du
   site, dans un ordre fixe. */

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

.cesu-data__head > *:first-child {
    flex: 1 1 18rem;
    min-width: 0;
}

.cesu-data__block {
    margin-top: var(--rhythm-section);
}

.cesu-data__block-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.cesu-data__block-lead {
    margin: var(--spacing-2xs) 0 var(--spacing-md);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* Barre empilée : une part, un segment, dans l'ordre décroissant. */
.cesu-share {
    display: flex;
    overflow: hidden;
    height: 0.625rem;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-pill);
    background: var(--surface-4);
}

.cesu-share__part {
    width: var(--part, 0%);
    background: var(--tint, var(--section-color));
}

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

.cesu-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.cesu-row:last-child {
    border-bottom: 0;
}

.cesu-row__label {
    display: flex;
    gap: var(--spacing-xs);
    align-items: baseline;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--color-text);
}

.cesu-row__dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--tint, var(--section-color));
}

.cesu-row__end {
    display: flex;
    flex: none;
    gap: var(--spacing-sm);
    align-items: baseline;
}

.cesu-row__value,
.cesu-row__share {
    font-family: var(--font-data);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.cesu-row__value {
    font-weight: 600;
    color: var(--color-text);
}

.cesu-row__share {
    min-width: 3.25rem;
    text-align: right;
    color: var(--color-text-light);
}

/* L'ORDRE DES TEINTES EST LE MEME pour la barre et pour la légende : c'est ce
   qui permet de relier un segment à sa ligne sans étiquette dans la barre. */
.cesu-share__part:nth-child(1),
.cesu-row:nth-child(1) .cesu-row__dot {
    --tint: var(--color-section-cesu);
}

.cesu-share__part:nth-child(2),
.cesu-row:nth-child(2) .cesu-row__dot {
    --tint: var(--color-section-formations);
}

.cesu-share__part:nth-child(3),
.cesu-row:nth-child(3) .cesu-row__dot {
    --tint: var(--color-section-agenda);
}

.cesu-share__part:nth-child(4),
.cesu-row:nth-child(4) .cesu-row__dot {
    --tint: var(--color-section-colloques);
}

.cesu-share__part:nth-child(n + 5),
.cesu-row:nth-child(n + 5) .cesu-row__dot {
    --tint: var(--color-section-membre);
}

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

.cesu-trend__row {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    gap: var(--spacing-sm);
    align-items: center;
}

.cesu-trend__year,
.cesu-trend__value {
    font-family: var(--font-data);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-light);
}

.cesu-trend__value {
    font-weight: 600;
    color: var(--color-text);
}

.cesu-trend__bar {
    display: block;
    overflow: hidden;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--surface-4);
}

.cesu-trend__fill {
    display: block;
    width: var(--part, 0%);
    height: 100%;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--section-color) 45%, transparent);
}

/* Le millésime affiché se distingue des autres, sinon la série ne dit pas où
   l'on est. */
.cesu-trend__row.is-current .cesu-trend__fill {
    background: var(--section-color);
}

.cesu-trend__row.is-current .cesu-trend__year {
    font-weight: 700;
    color: var(--color-text);
}

.cesu-rank__value {
    margin: 0 0 var(--spacing-xs);
    font-family: var(--font-data);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.cesu-rank {
    position: relative;
    height: 0.625rem;
}

.cesu-rank__track,
.cesu-rank__fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: var(--radius-pill);
}

.cesu-rank__track {
    right: 0;
    background: var(--surface-4);
}

.cesu-rank__fill {
    width: var(--part, 0%);
    background: var(--section-color);
}

/* La médiane est le repère qui donne son sens à la barre : elle est écrite,
   pas seulement marquée. */
.cesu-rank__median {
    position: absolute;
    top: calc(100% + var(--spacing-2xs));
    left: 50%;
    padding-left: var(--spacing-xs);
    border-left: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-light);
    white-space: nowrap;
}


/* ── ONGLET FORMATIONS : UNE LIGNE PAR FORMATION ──

   Plus de vignette : les formations d'un centre n'ont presque jamais d'image
   propre, et le repli peignait le même aplat quinze fois de suite. Une colonne
   d'images identiques ne distingue rien, elle décale le titre.

   La ligne est un LIEN unique. La zone de clic couvre toute la rangée, et
   l'appel à l'action de droite n'est pas un second lien : deux destinations
   identiques dans une même ligne font deux arrêts au clavier pour un seul
   geste. */

.cesu-list {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
}

.cesu-list__item {
    border-bottom: 1px solid var(--color-border);
}

.cesu-list__row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-2xs);
    color: inherit;
    text-decoration: none;
}

.cesu-list__row:hover {
    background: var(--surface-4);
}

.cesu-list__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.cesu-list__domain {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.cesu-list__dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--tint, var(--section-color));
}

.cesu-list__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}

.cesu-list__row:hover .cesu-list__title {
    color: var(--color-primary);
}

.cesu-list__meta {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-light);
}

.cesu-list__end {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: flex-end;
    text-align: right;
}

.cesu-list__state {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.cesu-list__state--open {
    color: var(--color-primary);
}

.cesu-list__cta {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.cesu-list__row:hover .cesu-list__cta {
    color: var(--color-primary);
}

.cesu-catalog__note {
    margin: var(--spacing-lg) 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* Sous le palier, l'état passe SOUS le titre plutôt qu'à sa droite : à 375 px,
   deux colonnes laissent quatre mots par ligne au titre. */
@media (width < 40em) {
    .cesu-list__row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .cesu-list__end {
        flex-direction: row;
        gap: var(--spacing-sm);
        align-items: baseline;
        text-align: left;
    }
}


/* ── ONGLET AGENDA : LE REBOND ──

   Deux cartes côte à côte sous les sessions, rendues que la liste soit vide ou
   non : une date annoncée ne répond pas forcément à la question qu'on se pose.
   C'est ce qui manquait quand l'onglet disait « Aucune session prévue » et
   s'arrêtait là. */

.cesu-agenda__rebound {
    display: grid;
    gap: var(--spacing-md);
    margin-top: var(--rhythm-section);
}

@media (width >= 48em) {
    .cesu-agenda__rebound {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Seule, la carte d'appel ne prend pas toute la largeur : un bloc de deux
       phrases étiré sur 62 rem se lit mal, et il annoncerait un vide. */
    .cesu-agenda__rebound:has(.cesu-agenda__card:only-child) {
        grid-template-columns: minmax(0, 32rem);
    }
}

.cesu-agenda__card p {
    margin: 0 0 var(--spacing-md);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-light);
}

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

/* ── Sous-page session, dans l'onglet Agenda ──
   Trois besoins, et aucun n'existait : un lien de retour dont la fleche tient
   sur la ligne du texte, une rangee de gestes qui se replie proprement sous le
   palier, et un lien de sortie vers la fiche de formation qui ne se prend pas
   pour un bouton. */

.cesu-session__back {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
}

.cesu-session__back a,
.cesu-session__more a {
    /* `inline-flex` et non `flex` : sans lui l'icone se pose SUR une ligne a
       elle, ce que fait un `<p>` dont l'enfant est un bloc. */
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    text-decoration: none;
}

.cesu-session__back a:hover,
.cesu-session__more a:hover {
    text-decoration: underline;
}

.cesu-session__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
}

.cesu-session__more {
    margin: var(--spacing-md) 0 var(--spacing-xl);
    font-size: var(--font-size-sm);
}