/* ══════════════════════════════════════════════════════════════
   Biographie publique — fiche personne (/biographies/{slug})
   Le hero couvert + avatar + nav onglets vit dans content.css
   (.list-hero*). Ce fichier porte les sections sous le hero :
   présentation, organisations, interventions, replays.
   ══════════════════════════════════════════════════════════════ */

.bio-show {
    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
}

/* Colonne de lecture centrée, largeur cohérente avec la fiche CESU. */
.bio-show__inner {
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.bio-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bio-section__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary-dark);
    line-height: var(--line-height-tight);
}

/* ─── Thématiques (pills discrètes) ──────────────────────────── */
.bio-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.bio-tag {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text));
}

/* ─── Organisations (cartes-lignes cliquables) ───────────────── */
.bio-orgs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.bio-org {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

a.bio-org:hover,
a.bio-org:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    outline: none;
}

.bio-org__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.bio-org__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.bio-org__name {
    font-weight: 600;
    color: var(--color-primary-dark);
}

.bio-org__role {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.bio-org__arrow {
    flex: 0 0 auto;
    color: var(--color-text-light);
}

/* ─── Interventions (cartes horizontales) ────────────────────── */
.bio-interventions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Ligne compacte, pas une carte : une personne qui intervient souvent en
   accumule beaucoup, et des cartes de 120 px rendaient la fiche
   interminable. Separateur fin plutot que bordure + ombre. */
.bio-intervention {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    padding: 0.7rem 0;
    border-top: 1px solid var(--color-border);
}

.bio-intervention:first-child { border-top: 0; }

/* Date sur une seule ligne : la pastille navy sur trois lignes imposait a
   elle seule la hauteur de la ligne. */
.bio-intervention__date {
    flex: 0 0 auto;
    width: 6.5rem;
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.bio-intervention__body {
    flex: 1 1 auto;
    min-width: 0;
}

.bio-intervention__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.15rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.bio-intervention__meta a {
    color: var(--color-primary);
    text-decoration: none;
}

.bio-intervention__meta a:hover { text-decoration: underline; }

.bio-intervention__talk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.bio-intervention__talk a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.bio-intervention__talk a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Indice de contenu : discret, il signale qu'il y a un resume ou une
   rediffusion derriere le titre. Sans lui, rien ne distingue les deux. */
.bio-intervention__cue {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-light);
}

/* ─── Boutons d'action (restaures : le bloc interventions les portait) ─── */
.bio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.bio-btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.bio-btn--primary:hover {
    background: var(--color-primary-dark);
}

.bio-btn--ghost {
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-primary);
}

.bio-btn--ghost:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* ─── Replays (cartes-lignes cliquables) ─────────────────────── */
.bio-replays {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.bio-replay {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.bio-replay:hover,
.bio-replay:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    outline: none;
}

.bio-replay__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.bio-replay__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.bio-replay__title {
    font-weight: 600;
    color: var(--color-primary-dark);
}

.bio-replay__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.bio-replay__arrow {
    flex: 0 0 auto;
    color: var(--color-text-light);
}

/* ══════════════════════════════════════════════════════════════════
   Fiche biographie — gabarit « carte de contenu ».

   Calque sur la page article de franceinfo, mesuree en direct :
   carte 71 % du viewport, fond #f5f6f2, radius 12px, padding 40/56px,
   et surtout une COLONNE DE LECTURE bornee (leur titre fait 885 px pour
   une carte de 1440) : le texte ne remplit jamais la carte.

   Zero aplat de couleur : c'est ce qui rend la page calme. Les pilules
   d'action sont en contour, dans le flux, apres l'identite.
   ══════════════════════════════════════════════════════════════════ */

/* Bande gris bleu en haut de page, sur laquelle la carte se detache.
   La bande s'arrete sous le debut de la carte (le degre est net, pas
   un fondu) : meme principe que le bandeau colore de franceinfo. */
.bio-page {
    /* Respiration autour de « Biographies » : la rubrique ne doit pas
       toucher la barre de navigation, sinon elle se lit comme un
       sous-menu plutot que comme un titre de rubrique. */
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    /* Plus de bande propre : elle est portee par `.front-main` (app.css), pour
       tout le site d'un seul tenant. Celle qui vivait ici avait ses DEUX arrets
       au meme point (`--color-bg-light 26rem, transparent 26rem`), donc ce
       n'etait pas le fondu annonce par le commentaire ci-dessus mais une
       coupure franche, qui tranchait en plein milieu de la carte blanche. Et
       etant opaque, elle masquait le degrade commun. */
}

/* Categorie au-dessus de la carte, a la place du fil d'Ariane visuel.
   Le BreadcrumbList JSON-LD reste emis par le layout.

   Titre a gauche, illustration a droite et en DEBORDEMENT sur le coin
   haut droit de la carte : c'est ce qui exploite la stratification
   bande/carte deja en place et donne de la profondeur. Le coin est
   libre par construction — portrait et nom sont alignes a gauche. */
/* Rubrique seule, alignee a gauche, sur le gabarit de la carte.

   Un filet colore la souligne : il rappelle le ruban du megamenu et donne
   du rythme SANS ornement gratuit — sa couleur DIT de quelle section on
   parle. `--bio-accent` est surchargeable, pour que le meme gabarit serve
   les autres rubriques avec leur propre couleur le jour ou on l'etendra.

   Ecarte : trois ronds pleins alignes en haut a droite. C'est exactement
   la signature des boutons de fenetre de macOS — une fois vu, on ne voit
   plus que ca. */
/* Bandeau de tete : rubrique a gauche, actions a droite, sur le gabarit
   de la carte. */
.bio-page__topline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
    max-width: 64rem;
    margin: 0 auto 0.6rem;
}

.bio-page__actions {
    display: flex;
    /* Alignement sur le filet colore, pas sur le bas du texte. */
    padding-bottom: 0.2rem;
}

/* Pilules contour sur la bande gris bleu : fond blanc pour se detacher,
   la ou sur la carte blanche elles etaient transparentes. */
.bio-page__actions .share-dropdown-group { gap: var(--spacing-sm); }

.bio-page__actions .share-dropdown-group__btn,
.bio-page__actions .share-dropdown__summary {
    padding: 0.5rem 1rem;
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-text);
}

.bio-page__actions .share-dropdown-group__btn:hover,
.bio-page__actions .share-dropdown__summary:hover,
.bio-page__actions .share-dropdown[open] .share-dropdown__summary {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.bio-page__actions .share-dropdown-group__btn--active {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.bio-page__actions .share-dropdown-group__btn:focus-visible,
.bio-page__actions .share-dropdown__summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bio-page__category {
    --bio-accent: var(--color-section-ancesu);

    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-navy);
}

/* L'illustration unDraw (722x364, paysage) vit sur la page de LISTE.
   Elle est centree au-dessus de l'en-tete de liste : la page parle d'une
   collection de personnes, l'illustration y est a sa place. */
.bio-list__intro {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.bio-illu {
    width: 16rem;
    height: auto;
    max-width: 100%;
}

@media (max-width: 48em) {
    .bio-illu { width: 11rem; }
}

/* Fil d'Ariane discret, juste avant la carte. Le composant porte son
   propre fond et son propre conteneur : les deux sont neutralises, sinon
   il dessine une bande blanche qui s'arrete au milieu de la largeur. */
/* PAS de `z-index` ici, meme si l'illustration doit passer au-dessus.
   Un `z-index` sur la carte en ferait un CONTEXTE D'EMPILEMENT, et la
   modale « Lire plus tard », qui vit a l'interieur, s'y retrouverait
   enfermee : son `z-index: 3000` ne vaudrait plus que DANS la carte, et
   l'en-tete du site passerait par-dessus son voile.

   L'illustration passe quand meme devant : elle est positionnee avec
   `z-index: 2`, la carte reste en `auto`. L'ordre du document ne joue
   pas entre deux elements positionnes de z-index differents. */
.bio-page__category span {
    display: block;
}

.bio-page__category::after {
    content: '';
    display: block;
    width: 3rem;
    height: 0.3rem;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: var(--bio-accent);
}

.bio-card {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-xl);
    border-radius: var(--radius-3xl);
    background: #fff;
    box-shadow: var(--shadow-md);
}

/* La colonne de lecture, plus etroite que la carte. C'est le ressort
   principal du confort visuel : sans elle, le texte court sur toute la
   largeur et l'oeil perd sa ligne de retour.

   Colonne en flex : c'est elle qui espace l'entete et les sections.
   `.bio-section` n'a volontairement aucune marge propre (elle servait
   dans l'ancien gabarit a onglets, ou chaque onglet rendait une section
   isolee). */
.bio-card__col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 44rem;
    margin: 0 auto;
}

/* ── Bloc d'identite ────────────────────────────────────────────── */

.bio-identity__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.bio-identity__titles { min-width: 0; }

.bio-identity__name {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-navy);
}

/* Les deux pilules ne doivent pas se toucher : le gap serre du composant
   (`--spacing-xs`) convient a une rangee d'icones, pas a deux boutons
   libelles qui se lisent comme deux gestes distincts. */
/* Etat actif du marque-page : le trait passe en primaire pour signaler
   que la fiche est enregistree, sans recourir a un aplat. */
/* Le portrait est le SEUL visuel de la fiche depuis que l'illustration
   de rubrique en a ete retiree : il porte l'identite, il a besoin de
   presence. */
.bio-identity__portrait {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary-light);
}

.bio-identity__portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bio-identity__initials {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.bio-identity__affiliation {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-sm);
}

.bio-identity__org {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

a.bio-identity__org:hover { text-decoration: underline; }

.bio-identity__role {
    color: var(--color-text-light);
}

.bio-identity__role::before {
    content: " · ";
    color: var(--color-text-light);
}

@media (max-width: 48em) {
    /* La fonction prend sa propre ligne : accolee a l'organisation elle
       s'enroulait en plein milieu (« Referent / paramedical »). Le point
       separateur n'a plus lieu d'etre une fois les deux sur deux lignes. */
    .bio-identity__role {
        display: block;
    }

    .bio-identity__role::before {
        content: none;
    }
}

.bio-identity__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.4rem 0 0;
}

.bio-identity__social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    text-decoration: none;
}

.bio-identity__social-link:hover { color: var(--color-primary); }

/* Sommaire discret : la fiche peut etre longue, contrairement a un
   article lineaire. Filet du haut = separateur d'entete. */
.bio-identity__toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.bio-identity__toc-link {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.bio-identity__toc-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Etat vide : la carte s'arretait net apres l'identite, sans un mot. */
.bio-empty {
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.bio-empty a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Indices « Resume » / « Replay » : du TEXTE, pas des pastilles.

   En pilule sur fond gris elles ressemblaient a des boutons alors
   qu'elles ne sont pas cliquables — une fausse promesse d'action, pire
   qu'une simple absence d'affordance. Ce sont des metadonnees : elles
   disent ce qu'on trouvera derriere le titre, elles ne font rien. */
.bio-intervention__cue {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
}

/* Chevron d'affordance : le titre est un lien, mais son habillage de
   titre gras navy ne le disait pas.

   Il reste DANS LE FLUX du texte (`inline-block`), pas en element flex :
   avec un lien en `inline-flex` + `align-items: center`, un titre qui
   s'enroule sur deux lignes centrait le chevron verticalement sur tout le
   bloc — il flottait a mi-hauteur au lieu de suivre le dernier mot. */
.bio-intervention__arrow {
    display: inline-block;
    vertical-align: -0.15em;
    margin-left: 0.15rem;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.bio-intervention__talk a:hover .bio-intervention__arrow {
    transform: translateX(2px);
}

/* ── Responsive ───────────────────────────────────────────────────
   Pense des la conception, pas apres coup : mesure a 390px, la rangee
   d'actions libellees debordait de 70px hors du viewport. ── */

@media (max-width: 48em) {
    /* Actions en icones seules : les trois libelles ne tiennent pas sur
       une ligne de 390px, et « Lire plus tard » s'enroulait sur trois
       lignes dans sa pilule.

       Les libelles ne sont PAS masques en `display: none` — ils sortiraient
       de l'arbre d'accessibilite et les boutons perdraient leur nom. Ils
       sont retires visuellement seulement, a la maniere d'un `sr-only`. */
    .bio-page__actions .share-dropdown-group__btn span,
    .bio-page__actions .share-dropdown__summary span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .bio-page__actions .share-dropdown-group__btn,
    .bio-page__actions .share-dropdown__summary {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        justify-content: center;
    }

    /* Le chevron n'a plus de libelle a annoncer : il encombrerait. */
    .bio-page__actions .share-dropdown__summary > :last-child {
        display: none;
    }

    .bio-page__topline {
        align-items: center;
        gap: var(--spacing-sm);
    }

    .bio-page__category { font-size: var(--font-size-xl); }

    /* Interventions : la colonne de date fixe a 6,5rem laissait le titre
       dans un couloir etroit. En colonne, la date devient un surtitre.

       Le rythme vertical est pose EXPLICITEMENT. Avec un simple `gap` de
       0,15rem, les ecarts entre date, titre et evenement (2-3px) etaient
       plus SERRES que l'interligne du titre qui s'enroule (~27px) : une
       coupure de ligne paraissait plus separatrice que la frontiere entre
       deux informations differentes. On lisait quatre lignes sans
       hierarchie. */
    .bio-intervention {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 0;
    }

    .bio-intervention__date {
        width: auto;
        margin-bottom: 0.35rem;
    }

    .bio-intervention__talk {
        font-size: var(--font-size-base);
        line-height: 1.35;
    }

    /* Les pastilles quittent la ligne du titre : accolees a lui elles
       s'inseraient au milieu d'un titre enroule, a une place arbitraire
       qui changeait selon la longueur. */
    .bio-intervention__cue {
        order: 1;
    }

    .bio-intervention__talk::after {
        content: '';
        flex-basis: 100%;
        height: 0;
    }

    .bio-intervention__meta {
        margin-bottom: 0.3rem;
    }
}

/* Cible d'ancre : decalee pour ne pas passer sous la navbar collante. */
.bio-section[id] { scroll-margin-top: 5rem; }

@media (max-width: 48em) {
    .bio-card {
        padding: var(--spacing-lg) var(--spacing-md);
        border-radius: var(--radius-xl);
    }

    .bio-page__category { font-size: var(--font-size-lg); }
}

/* ── « À lire aussi » ─────────────────────────────────────────────
   Carte navy en fin de page. Elle fonctionne ici alors que le bandeau
   navy pleine largeur essayé plus tôt écrasait la page : c'est une
   ponctuation de fin, pas la surface qui porte le contenu.

   Cartes verticales qui défilent horizontalement (scroll-snap, même
   approche que `.content-block__carousel`). Le défilement natif reste
   la source de vérité : les flèches ne font que le piloter, donc la
   molette, le tactile et le clavier marchent sans elles. */
.bio-related {
    max-width: 64rem;
    margin: var(--spacing-2xl) auto 0;
    padding: var(--spacing-xl) var(--spacing-2xl);
    border-radius: var(--radius-3xl);
    background: var(--color-primary);
    color: #fff;
}

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

.bio-related__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #fff;
}

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

.bio-related__arrows {
    display: flex;
    gap: 0.35rem;
}

.bio-related__arrows[hidden] { display: none; }

/* Fleches et « Voir tout » partagent l'habillage des pilules contour de
   l'entete de fiche, transpose sur fond navy. */
.bio-related__arrow,
.bio-related__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: var(--font-size-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.bio-related__arrow {
    width: 2rem;
    height: 2rem;
}

.bio-related__all { padding: 0.4rem 0.9rem; }

.bio-related__arrow:hover,
.bio-related__all:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.6);
}

.bio-related__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.bio-related__arrow:disabled:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
}

.bio-related__list {
    display: flex;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0 0 var(--spacing-xs);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bio-related__list::-webkit-scrollbar { display: none; }

.bio-related__slide {
    flex: 0 0 11rem;
    scroll-snap-align: start;
}

/* Carte verticale : portrait au-dessus, identite dessous. */
.bio-related__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding: var(--spacing-md) 0.75rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.bio-related__card:hover { background: rgba(255, 255, 255, 0.16); }

.bio-related__portrait {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.bio-related__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bio-related__name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}

.bio-related__role {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 48em) {
    .bio-related {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .bio-related__slide { flex-basis: 9.5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Annuaire des portraits (`/portraits`)

   Meme gabarit que la fiche : bande gris bleu, rubrique a filet colore,
   une carte blanche. Elle porte ici la recherche, les facettes et la
   grille, donc PAS de `.bio-card__col` : la colonne de lecture de 44rem
   est faite pour du texte suivi, elle etranglerait une grille a trois
   colonnes.
   ══════════════════════════════════════════════════════════════════ */

.bio-card--list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Chapeau : intention a gauche, illustration a droite. L'illustration
   etait centree au-dessus de la carte et poussait la recherche sous la
   ligne de flottaison sur telephone. */
.bio-list__lede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.bio-list__lede-text {
    margin: 0;
    max-width: 34rem;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

.bio-list__lede .bio-illu {
    flex: 0 0 auto;
    width: 13rem;
}

/* ── Barre de filtres ─────────────────────────────────────────────
   Recherche pleine largeur, puis les deux axes cote a cote. Ils
   s'empilent d'eux-memes quand la place manque (`flex-wrap`), sans
   point de rupture a maintenir. */
.bio-filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg-light);
}

/* Les trois controles cote a cote, qui s'empilent d'eux-memes quand la
   place manque — pas de point de rupture a maintenir.

   `flex-basis` se lit sur l'axe PRINCIPAL : pose sur un enfant de
   `.bio-filters` (qui est en colonne), il reservait 18rem de HAUTEUR et
   ouvrait un trou de 350px sous les filtres. D'ou cette rangee
   intermediaire, explicitement en ligne. */
/* Grille `auto-fit` et non flex : en flex, la largeur intrinseque des
   controles (le champ de saisie ne descend pas sous sa taille minimale)
   l'emportait sur `flex-basis` et renvoyait le troisieme a la ligne, alors
   que la place restait. Ici, tant que trois colonnes de 12rem tiennent,
   les trois filtres sont sur une ligne ; en dessous, ils s'empilent
   d'eux-memes, sans point de rupture a maintenir. */
/* `start` et non `end` : les comboboxes grandissent quand des puces de
   selection s'y ajoutent. Cale sur le bas, chaque selection ferait remonter
   les libelles des colonnes voisines — la rangee semblerait se desaligner
   toute seule. Cale sur le haut, les libelles restent sur une ligne. */
.bio-filters__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: start;
    gap: var(--spacing-md);
}

.bio-filters__group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* Trois controles de meme nature doivent avoir la meme hauteur : sans ca
   la ligne se lit comme trois briques empruntees a trois pages. La
   contrainte est posee ici et non dans les composants — chacun est
   dimensionne pour SON contexte d'origine (aside etroite pour l'un,
   pleine largeur pour l'autre). */
.bio-filters .search-field,
.bio-filters .facet-ms { width: 100%; }

.bio-filters .search-field__group,
.bio-filters .facet-ms__trigger {
    /* Hauteur EXACTE, pas un minimum : chaque composant a son propre
       rembourrage, calibre pour son contexte d'origine. Un plancher commun
       les laissait diverger des que l'un d'eux etait un peu plus genereux,
       et la rangee se lisait comme trois briques empruntees a trois pages. */
    height: 2.625rem;
    box-sizing: border-box;
    border-radius: var(--radius-md);
}

/* Le champ de saisie doit se LIRE comme un champ : fond blanc franc sur le
   gris de la barre. La variante « inline » du composant retire bordure et
   fond — a cote de deux menus encadres, il ne ressemblait plus a rien
   sur quoi cliquer. */
.bio-filters .search-field__group {
    background: #fff;
    border-color: var(--color-border);
    /* La loupe ne doit JAMAIS passer sous la saisie : a 390px elle tombait
       a la ligne dans la boite, qui debordait alors de sa hauteur fixe. Le
       champ retrecit, le bouton garde sa taille. */
    flex-wrap: nowrap;
}


/* Meme corps de texte que les deux menus (`--font-size-xs`) : la saisie
   affichait son indication en corps courant, plus grosse que le « Tous les
   evenements » d'a cote — trois controles alignes qui ne parlent pas de la
   meme voix. */
.bio-filters .search-field__input {
    font-size: var(--font-size-xs);
    padding-block: 0;
}

/* Le bouton-loupe garde son rembourrage lateral mais pas vertical : la
   hauteur de la rangee est portee par le groupe. */
.bio-filters .search-field__submit {
    padding-block: 0;
}

.bio-filters__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-navy);
}

.bio-filters__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pastille de facette. Meme grammaire visuelle que les boutons
   « Lire plus tard » / « Partager » de la fiche : contour discret sur
   fond blanc, remplissage navy a l'etat actif. */
.bio-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.bio-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.bio-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bio-pill--active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.bio-pill--active:hover { color: #fff; }

/* Compteur : lisible, jamais au premier plan — c'est une indication de
   volume, pas l'intitule du filtre. */
.bio-pill__count {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bio-pill--active .bio-pill__count { color: rgb(255 255 255 / 0.8); }

.bio-list__count {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bio-list__reset {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ── Trombinoscope ─────────────────────────────────────────────────
   Grille de personnes, distincte de `directory-list__grid` (organisations) :
   la vignette y est un LOGO cadre en `contain`, ici c'est un VISAGE cadre en
   `cover`. Meme grammaire d'avatar que la fiche (`.list-hero__avatar`).

   Quatre colonnes en grand ecran, trois en tablette, deux en mobile — jamais
   une seule : sur 162 portraits, une colonne unique donnerait une page
   interminable a parcourir pour retrouver un nom. */
.bio-people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg) var(--spacing-md);
}

@media (min-width: 40em) {
    .bio-people {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .bio-people {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bio-people__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: var(--spacing-sm) 0.25rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.bio-people__card:hover,
.bio-people__card:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    transform: translateY(-2px);
}

.bio-people__card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bio-people__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    flex: 0 0 auto;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    /* Le cercle blanc detache le portrait du fond gris bleu de la page, comme
       sur la fiche. */
    box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(15, 23, 42, 0.12);
    transition: box-shadow 0.15s ease;
}

.bio-people__card:hover .bio-people__avatar {
    box-shadow: 0 0 0 3px #fff, 0 10px 22px rgba(15, 23, 42, 0.2);
}

.bio-people__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    /* `cover` et non `contain` : un portrait doit remplir le cercle. C'est
       precisement ce que la carte d'annuaire ne faisait pas. */
    object-fit: cover;
}

.bio-people__avatar-initials {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
}

.bio-people__name {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
    /* Les cartes voisines gardent la meme hauteur meme quand un nom tient sur
       deux lignes : sans cela la rangee suivante remonte en escalier. */
    line-height: var(--line-height-tight);
}

.bio-people__first {
    font-size: var(--font-size-sm);
    /* `--color-text` et non `--color-text-light` : ce dernier plafonne a
       3,19:1 sur cette surface, sous le seuil AA de 4,5 pour du texte
       (cf. rules/capabilities/accessibility.md). Le prenom se distingue du
       nom par la graisse, pas par un gris trop clair. */
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.bio-people__last {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-navy);
    overflow-wrap: anywhere;
}

.bio-people__card:hover .bio-people__last {
    color: var(--color-primary);
}

.bio-list__reset-link {
    color: var(--color-text-light);
    text-decoration: underline;
}

.bio-list__reset-link:hover,
.bio-list__reset-link:focus-visible {
    color: var(--color-primary);
}

@media (max-width: 48em) {
    /* L'illustration passe au-dessus du texte : cote a cote, a 390px, il
       ne reste ni assez de largeur pour lire ni assez pour la voir. */
    .bio-list__lede {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: var(--spacing-md);
    }

    .bio-list__lede-text { font-size: var(--font-size-base); }

    .bio-list__lede .bio-illu { width: 10rem; }

    .bio-filters { padding: var(--spacing-sm); }
}