/*
 * Fichier : abs-personnes-archive.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Présente les pages qui rassemblent les Plumes, les Voix, les Présentateurs
 * et les Invités : barre de filtrage alphabétique, grille des portraits,
 * vignettes d'initiales.
 *
 * Portraits :
 *   Les portraits sont cadrés en quatre cinquièmes, la proportion des images
 *   de profil. Le cadrage se fait à l'affichage et légèrement haut : sur un
 *   portrait, le visage occupe le tiers supérieur, et un cadrage centré coupe
 *   les fronts.
 *
 * Vignettes d'initiales :
 *   Une personne sans portrait reçoit ses initiales sur un aplat. La teinte
 *   suit un rang posé par le serveur, dans la palette du thème : une grille
 *   d'aplats identiques se lit mal.
 *
 * Couleurs, espacements et rayons :
 *   Toutes les valeurs viennent des variables du thème, avec une valeur de
 *   repli. Le thème redéfinit ses variables pour prefers-contrast: more, et
 *   une seule valeur posée en dur crève ce mécanisme en silence.
 *
 * Mouvement :
 *   Le rapprochement d'un portrait au survol est retiré sous
 *   prefers-reduced-motion : un mouvement non demandé gêne qui s'en trouve
 *   affecté.
 */

.abs-personnes {
    --abs-espace-mince: var(--discovery-space-1, 0.25rem);
    --abs-espace-court: var(--discovery-space-3, 0.75rem);
    --abs-espace: var(--discovery-space-6, 1.5rem);

    --abs-texte-menu: var(--discovery-text-sm, 0.875rem);
    --abs-texte-normal: var(--discovery-text-base, 1rem);

    --abs-rayon: var(--discovery-radius-md, 0.5rem);
    --abs-ligne-serree: var(--discovery-line-tight, 1.2);
    --abs-graisse-forte: var(--discovery-weight-semibold, 600);
    --abs-duree: var(--discovery-duration-fast, 120ms);

    --abs-colonnes: 5;
    --abs-forme-portrait: 4 / 5;

    --abs-texte: var(--discovery-color-text, #1a1a1a);
    --abs-attenue: var(--discovery-color-muted, #595959);
    --abs-fond: var(--discovery-color-background, #ffffff);
    --abs-surface: var(--discovery-color-surface, #f2f2f2);
    --abs-bordure: var(--discovery-color-border, #767676);
    --abs-lien: var(--discovery-color-link, #0b5cad);
    --abs-accent: var(--discovery-color-accent, #6b3fa0);

    color: var(--abs-texte);
}

/* Entête */

.abs-personnes .abs-personnes-entete {
    margin: 0 0 var(--abs-espace);
}

.abs-personnes .abs-personnes-titre {
    margin: 0;
    line-height: var(--abs-ligne-serree);
}

/* Barre de filtrage */

.abs-personnes .abs-personnes-barre {
    margin: 0 0 var(--abs-espace);
}

.abs-personnes .abs-personnes-vide {
    display: none;
}

.abs-personnes .abs-personnes-divulgation {
    padding: var(--abs-espace-court);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-fond);
    color: var(--abs-texte);
    font-size: var(--abs-texte-menu);
    cursor: pointer;
}

/*
 * Attribut hidden sur un bouton :
 *   Le thème donne un affichage en ligne à tout bouton, ce qui l'emporte sur
 *   le style que le navigateur attache à l'attribut hidden. Le bouton de
 *   divulgation, écrit masqué et révélé par le script, redit donc son
 *   masquage ici.
 */
.abs-personnes .abs-personnes-divulgation[hidden] {
    display: none;
}

.abs-personnes .abs-personnes-divulgation[aria-expanded="true"] {
    border-color: var(--abs-accent);
    background-color: var(--abs-surface);
}

.abs-personnes .abs-personnes-panneau {
    margin: var(--abs-espace-court) 0 0;
}

.abs-personnes .abs-personnes-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-mince);
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-personnes .abs-personnes-touche {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: var(--abs-espace-mince) var(--abs-espace-court);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-fond);
    color: var(--abs-texte);
    font-size: var(--abs-texte-menu);
    font-weight: var(--abs-graisse-forte);
    cursor: pointer;
}

.abs-personnes .abs-personnes-touche[aria-pressed="true"] {
    border-color: var(--abs-accent);
    background-color: var(--abs-accent);
    color: var(--abs-fond);
}

.abs-personnes .abs-personnes-touche[disabled] {
    border-color: var(--abs-surface);
    color: var(--abs-attenue);
    cursor: default;
    opacity: 0.6;
}

/* Décompte */

.abs-personnes .abs-personnes-compte {
    margin: 0 0 var(--abs-espace-court);
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

.abs-personnes .abs-personnes-aucune {
    margin: 0;
    padding: var(--abs-espace-court);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    color: var(--abs-attenue);
}

/* Grille des personnes */

.abs-personnes .abs-personnes-grille {
    display: grid;
    grid-template-columns: repeat(var(--abs-colonnes), minmax(0, 1fr));
    gap: var(--abs-espace);
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-personnes .abs-personne-lien {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-court);
    text-decoration: none;
    color: var(--abs-texte);
}

.abs-personnes .abs-personne-portrait {
    display: block;
    overflow: hidden;
    aspect-ratio: var(--abs-forme-portrait);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
}

.abs-personnes .abs-personne-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
    transition: transform var(--abs-duree) ease-out;
}

.abs-personnes .abs-personne-lien:hover .abs-personne-image,
.abs-personnes .abs-personne-lien:focus-visible .abs-personne-image {
    transform: scale(1.02);
}

.abs-personnes .abs-personne-lien:hover .abs-personne-nom,
.abs-personnes .abs-personne-lien:focus-visible .abs-personne-nom {
    text-decoration: underline;
}

/* Vignette d'initiales */

.abs-personnes .abs-personne-initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--abs-surface);
    color: var(--abs-accent);
}

.abs-personnes .abs-personne-initiales-texte {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: var(--abs-graisse-forte);
    letter-spacing: 0.05em;
}

/*
 * Six teintes, posées par le serveur selon la lettre de rangement. Elles
 * restent dans la palette du thème : seule leur opacité varie, ce qui tient
 * le contraste du texte au-dessus.
 */
.abs-personnes .abs-personne-initiales[data-abs-teinte="1"] { background-color: color-mix(in srgb, var(--abs-accent) 8%, var(--abs-surface)); }
.abs-personnes .abs-personne-initiales[data-abs-teinte="2"] { background-color: color-mix(in srgb, var(--abs-accent) 12%, var(--abs-surface)); }
.abs-personnes .abs-personne-initiales[data-abs-teinte="3"] { background-color: color-mix(in srgb, var(--abs-accent) 16%, var(--abs-surface)); }
.abs-personnes .abs-personne-initiales[data-abs-teinte="4"] { background-color: color-mix(in srgb, var(--abs-accent) 20%, var(--abs-surface)); }
.abs-personnes .abs-personne-initiales[data-abs-teinte="5"] { background-color: color-mix(in srgb, var(--abs-accent) 24%, var(--abs-surface)); }
.abs-personnes .abs-personne-initiales[data-abs-teinte="6"] { background-color: color-mix(in srgb, var(--abs-accent) 28%, var(--abs-surface)); }

/* Nom et statut */

.abs-personnes .abs-personne-texte {
    display: block;
}

.abs-personnes .abs-personne-nom {
    display: block;
    margin: 0;
    font-size: var(--abs-texte-normal);
    font-weight: var(--abs-graisse-forte);
    line-height: var(--abs-ligne-serree);
    color: var(--abs-lien);
}

.abs-personnes .abs-personne-statut {
    display: block;
    margin: var(--abs-espace-mince) 0 0;
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

/* Largeurs réduites */

@media (max-width: 1200px) {

    .abs-personnes .abs-personnes-grille {
        grid-template-columns: repeat(min(var(--abs-colonnes), 4), minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .abs-personnes .abs-personnes-grille {
        grid-template-columns: repeat(min(var(--abs-colonnes), 3), minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .abs-personnes .abs-personnes-grille {
        grid-template-columns: repeat(min(var(--abs-colonnes), 2), minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {

    .abs-personnes .abs-personne-image {
        transition: none;
    }

    .abs-personnes .abs-personne-lien:hover .abs-personne-image,
    .abs-personnes .abs-personne-lien:focus-visible .abs-personne-image {
        transform: none;
    }
}