/* ==================================================
   BLOC — GRILLE DE PERSONNES
   D'après la maquette 515:3929 et la carte 979:8931

   Quatre cartes blanches par rangée, chacune avec une photo ronde de
   140 px. Mesures relevées sur la maquette : cartes de 314 px, gouttière
   de 24, sur une largeur utile de 1328.
================================================== */

.grille_personnes {
    background: #faf8f4;
}

/* Le surtitre est en violet foncé, pas en gris : sur ce fond crème,
   le gris de méta manque de présence. */
.grille_personnes .v-eyebrow {
    color: var(--v-violet-700);
}

.grille_personnes .v-entete {
    margin-bottom: 36px;
}

/* Quatre colonnes, pas davantage.

   La grille était en `auto-fit` sur des colonnes de 240 px minimum : sur
   les 1328 px utiles, cinq cartes entraient, et la rangée ne
   correspondait plus à la maquette. Un nombre de colonnes fixe est ici
   le bon choix — la carte a une composition (photo ronde, nom, fonction,
   pastilles) qui ne supporte pas d'être étirée à 400 px de large. */
.grille_personnes__grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* --------------------------------------------------
   UNE RANGÉE INCOMPLÈTE SE CENTRE

   « Le dernier enfant est aussi le premier, le deuxième
   ou le troisième » : trois cartes ou moins.

   Avec quatre colonnes en `1fr`, deux personnes se
   collaient à gauche et laissaient la moitié de la page
   vide à droite. Les pistes sont donc plafonnées à la
   largeur qu'une carte a quand la rangée est pleine, et
   ce qui reste se répartit de part et d'autre.

   Le plafond est calculé, pas écrit en dur : c'est la
   même expression que la rangée à quatre, si bien que
   deux cartes centrées ont exactement la taille de deux
   cartes parmi quatre. Une valeur fixe se serait mise à
   mentir au premier changement de gouttière.

   Au-delà de trois, rien ne s'applique et la grille
   garde son comportement.
-------------------------------------------------- */
.grille_personnes__grille:has(> :last-child:nth-child(-n+3)) {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), calc((100% - 3 * 24px) / 4)));
    justify-content: center;
}

.grille_personnes__carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 28px 20px 24px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 4px 16px rgba(56, 49, 111, 0.08);
    text-align: center;
}

/* La photo, ronde et sans fond.

   C'était une pastille turquoise de 72 px, héritée d'une version où les
   portraits n'existaient pas encore. La maquette pose une photo de
   140 px et rien derrière : le rond de couleur cernait chaque visage
   d'un liseré qui n'appartient à personne. */
/* Le sélecteur porte la balise : `.v-bloc figure` de base.css impose un
   arrondi de 16 px à toutes les figures d'un bloc, et l'emporterait sur
   une classe seule. Ici le portrait doit être un rond franc. */
figure.grille_personnes__portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 0;
    overflow: hidden;
    border-radius: 50%;
}

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

/* Sans portrait, les initiales — sur le gris neutre des pastilles, et
   non sur le turquoise, qui signalerait une filière. */
figure.grille_personnes__portrait:not(:has(img)) {
    background: #efeff3;
}

.grille_personnes__initiales {
    font-family: var(--v-font-titre);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--v-texte-titre);
}

/* Le corps de la carte : nom, fonction, pastilles, lien. */
.grille_personnes__nom {
    font-family: var(--v-font-titre);
    font-size: 1.03125rem;
    font-weight: 600;
    line-height: 1.28;
    margin: 0;
}

.grille_personnes__nom a {
    color: var(--v-texte-titre);
    text-decoration: none;
}

.grille_personnes__nom a:hover { text-decoration: underline; }

.grille_personnes__fonction {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.78125rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.grille_personnes__specialites {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
}

.grille_personnes__specialites li {
    padding: 4px 10px;
    border-radius: var(--v-radius-pill);
    background: #efeff3;
    font-family: var(--v-font-corps);
    font-size: 0.65625rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v-texte-titre);
}

/* Le lien reprend celui du nom : il se voit, il ne s'écoute pas. Le
   marquage le retire du parcours clavier et des lecteurs d'écran. */
.grille_personnes__lien {
    margin-top: auto;
    padding-top: 4px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--v-violet-700);
    text-decoration: none;
}

.grille_personnes__carte:hover .grille_personnes__lien {
    text-decoration: underline;
}

/* Les paliers suivent la place disponible pour une carte de 314 px :
   trois colonnes dès qu'elle ne tient plus, puis deux, puis une. */
@media (max-width: 1199px) {
    .grille_personnes__grille {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .grille_personnes__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .grille_personnes__grille {
        gap: 16px;
    }

    .grille_personnes__carte {
        padding: 22px 16px 20px;
    }

    /* La photo se réduit avec la carte : 140 px sur une colonne de moins
       de 200 px ne laisserait plus de place au nom. */
    figure.grille_personnes__portrait {
        width: 104px;
        height: 104px;
    }

    .grille_personnes__initiales {
        font-size: 1.75rem;
    }

    /* DEUX SPÉCIALITÉS, PUIS DES POINTS DE SUSPENSION.

       Sur une colonne de 167 px, quatre pastilles font quatre lignes
       sous le portrait : la carte cesse de présenter quelqu'un pour
       devenir une liste de mots-clés, et le nom se retrouve noyé.

       On en garde deux. Les points de suspension ne sont pas un
       ornement : ils disent qu'il y en a d'autres, et que la fiche les
       donne toutes. Ils ne s'affichent donc que s'il y a bien une
       troisième pastille à annoncer. */
    .grille_personnes__specialites li:nth-child(n+3) {
        display: none;
    }

    .grille_personnes__specialites:has(li:nth-child(3))::after {
        content: "\2026";
        align-self: center;
        font-family: var(--v-font-corps);
        font-size: 0.65625rem;
        font-weight: 500;
        line-height: 1.3;
        color: var(--v-texte-meta);
    }
}