/*
 * Fichier : abs-personnage-fiche.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Mise en forme de la fiche d'un personnage de fiction : en-tête,
 * qualifications, panneaux et navigation entre personnages.
 *
 * Échelles :
 *   Les espacements, les tailles de texte, les graisses, les hauteurs de
 *   ligne, les rayons et les durées viennent de jetons déclarés sur le
 *   conteneur du domaine. Les règles n'en portent aucune valeur directe.
 *
 *   Les jetons se rangent en deux familles. Ceux qui reprennent une marche
 *   d'une échelle du thème Discovery la lisent et portent une valeur de
 *   repli. Ceux que les échelles du thème ne couvrent pas portent une
 *   valeur directe, nommée par son rôle.
 *
 *   Sous Discovery, la fiche suit la palette, l'échelle d'espacements, les
 *   tailles de texte fluides, les rayons et les durées du site. Sous un
 *   autre thème, les replis s'appliquent et la fiche garde ses proportions.
 *
 * Écrire une autre feuille du même jeu :
 *   Une couleur, un espacement, une taille de texte, une graisse, une
 *   hauteur de ligne, un rayon ou une durée passe par un jeton déclaré sur
 *   le conteneur du domaine.
 *
 *   Un jeton dont la valeur figure sur une échelle du thème lit la marche
 *   correspondante et porte un repli fixe voisin de cette marche.
 *
 *   Un jeton dont la valeur ne figure sur aucune échelle du thème est
 *   déclaré ici, nommé par son rôle.
 *
 *   Un nom de jeton porte le rôle et non la valeur : la valeur suit le
 *   thème, le rôle reste.
 *
 *   Le thème redéfinit ses variables de couleur sous prefers-contrast,
 *   mécanisme que sert la lecture des variables et que court-circuite une
 *   couleur posée directement dans une règle.
 *
 * Gouttière des colonnes :
 *   L'en-tête partage sa largeur entre l'illustration et le texte. Sa
 *   gouttière lit --discovery-space-8, marche dont la grille de la fiche
 *   produit se sert aussi, et les gabarits alignent leurs colonnes au pixel.
 *
 *   L'illustration occupe la moitié de la largeur disponible, gouttière
 *   déduite. Elle suit ainsi le conteneur du thème à toute largeur.
 *
 * Listes de définitions :
 *   Les qualifications portent des intitulés verbaux, plus longs qu'une
 *   étiquette d'un mot. Elles s'alignent donc en deux colonnes, l'intitulé
 *   occupant une largeur fixe, et non en ligne comme sur les autres fiches
 *   où les étiquettes sont brèves.
 *
 *   Les mentions de l'illustration gardent la forme en ligne des autres
 *   fiches : leurs étiquettes tiennent en un mot.
 *
 * Zone défilante :
 *   La barre d'onglets se parcourt latéralement sur un écran étroit. Elle
 *   porte un rôle de région, un nom accessible et l'ordre de tabulation, le
 *   gabarit les posant.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - Aucune information n'est portée par la seule couleur : l'onglet
 *     sélectionné se distingue aussi par sa graisse et sa bordure.
 *   - Les cibles tactiles mesurent au moins quarante-quatre pixels de côté.
 *   - Le repère de focus vient du thème et n'est jamais retiré.
 *
 * @package AB_Story_Reader
 */

/* ========================================================================
   Jetons
   ======================================================================== */

.abs-fiche-personnage {
    --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-espace-large: var(--discovery-space-10, 2.5rem);
    --abs-gouttiere-colonnes: var(--discovery-space-8, 2rem);

    --abs-texte-petit: var(--discovery-text-xs, 0.8125rem);
    --abs-texte-menu: var(--discovery-text-sm, 0.875rem);
    --abs-texte-titre: var(--discovery-text-lg, 1.15rem);

    --abs-graisse-forte: var(--discovery-weight-semibold, 600);

    --abs-ligne-serree: var(--discovery-line-tight, 1.2);
    --abs-ligne-normale: var(--discovery-line-normal, 1.5);

    --abs-rayon: var(--discovery-radius-md, 0.5rem);
    --abs-duree: var(--discovery-duration-fast, 120ms);

    --abs-forme-illustration: 1 / 1;
    --abs-colonnes: 3;
    --abs-illustration: calc((100% - var(--abs-gouttiere-colonnes)) / 2);
    --abs-intitule: 12rem;

    --abs-texte: var(--discovery-color-text, #1a1a1a);
    --abs-texte-doux: var(--discovery-color-muted, #555555);
    --abs-surface: var(--discovery-color-surface, #f6f6f6);
    --abs-bordure: var(--discovery-color-border, #d4d4d4);
    --abs-lien: var(--discovery-color-link, #1c4f8b);
    --abs-accent: var(--discovery-color-accent, #1c4f8b);

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

/* ========================================================================
   En-tête
   ======================================================================== */

.abs-fiche-personnage .abs-fiche-entete {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-gouttiere-colonnes);
    align-items: flex-start;
    margin-block-end: var(--abs-espace);
}

.abs-fiche-personnage .abs-fiche-visuel {
    flex: 0 0 min(var(--abs-illustration), 100%);
    min-inline-size: 0;
}

.abs-fiche-personnage .abs-fiche-couverture {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--abs-forme-illustration);
    object-fit: cover;
    border-radius: var(--abs-rayon);
}

.abs-fiche-personnage .abs-fiche-intro {
    flex: 1 1 22rem;
    min-inline-size: 0;
}

.abs-fiche-personnage .abs-fiche-titre {
    margin: 0 0 var(--abs-espace-court);
    line-height: var(--abs-ligne-serree);
}

.abs-fiche-personnage .abs-fiche-sous-titre {
    margin: 0 0 var(--abs-espace);
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-titre);
    line-height: var(--abs-ligne-normale);
}

/* ========================================================================
   Mentions de l'illustration
   ======================================================================== */

.abs-fiche-personnage .abs-fiche-mentions {
    margin: var(--abs-espace-court) 0 0;
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-petit);
    line-height: var(--abs-ligne-normale);
}

.abs-fiche-personnage .abs-fiche-mention {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-mince);
}

.abs-fiche-personnage .abs-fiche-mention dt {
    font-weight: var(--abs-graisse-forte);
}

.abs-fiche-personnage .abs-fiche-mention dt::after {
    content: ":";
}

.abs-fiche-personnage .abs-fiche-mention dd {
    margin: 0;
}

/* ========================================================================
   Qualifications
   ======================================================================== */

.abs-fiche-personnage .abs-fiche-qualifications {
    margin: 0;
    font-size: var(--abs-texte-menu);
    line-height: var(--abs-ligne-normale);
}

/*
 * Une qualification forme une ligne : l'intitule occupe une colonne de
 * largeur fixe, la valeur la suite. Les intitules s'alignent ainsi d'une
 * qualification a l'autre.
 */
.abs-fiche-personnage .abs-fiche-qualification {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--abs-espace-court);
    margin-block-end: var(--abs-espace-court);
}

.abs-fiche-personnage .abs-fiche-qualification dt {
    flex: 0 0 auto;
    inline-size: var(--abs-intitule);
    color: var(--abs-texte-doux);
    font-weight: var(--abs-graisse-forte);
}

.abs-fiche-personnage .abs-fiche-qualification dd {
    flex: 1 1 12rem;
    margin: 0;
    min-inline-size: 0;
}

/* ========================================================================
   Panneaux
   ======================================================================== */

.abs-fiche-personnage .abs-panneaux {
    margin-block: var(--abs-espace);
}

.abs-fiche-personnage .abs-onglets {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 var(--abs-espace);
    padding: 0;
    overflow-x: auto;
    list-style: none;
    border-block-end: 1px solid var(--abs-bordure);
}

.abs-fiche-personnage .abs-onglet {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--abs-espace);
    padding-block: var(--abs-espace-court);
    color: var(--abs-texte);
    font: inherit;
    font-size: var(--abs-texte-menu);
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    border-block-end-width: 3px;
    cursor: pointer;
    transition: border-color var(--abs-duree) ease;
}

.abs-fiche-personnage .abs-onglet:hover,
.abs-fiche-personnage .abs-onglet:focus-visible {
    border-block-end-color: var(--abs-bordure);
}

.abs-fiche-personnage .abs-onglet[aria-selected="true"] {
    color: var(--abs-lien);
    font-weight: var(--abs-graisse-forte);
    border-block-end-color: currentColor;
}

.abs-fiche-personnage .abs-panneau {
    margin-block-end: var(--abs-espace-large);
}

.abs-fiche-personnage .abs-panneau-titre {
    margin: 0 0 var(--abs-espace-court);
    font-size: var(--abs-texte-titre);
    line-height: var(--abs-ligne-serree);
}

.abs-fiche-personnage .abs-panneau-contenu {
    max-inline-size: var(--discovery-lecture-max, 42rem);
    line-height: var(--abs-ligne-normale);
}

/*
 * La phrase d'introduction precede sa liste et s'en detache.
 */
.abs-fiche-personnage .abs-panneau-introduction {
    margin: 0 0 var(--abs-espace-court);
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-menu);
    line-height: var(--abs-ligne-normale);
}

.abs-fiche-personnage .abs-panneaux[data-abs-panneaux="onglets"] .abs-panneau[hidden] {
    display: none;
}

/* ========================================================================
   Œuvres
   ======================================================================== */

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

.abs-fiche-personnage .abs-personnage-premiere {
    margin: var(--abs-espace) 0 0;
    font-size: var(--abs-texte-menu);
    line-height: var(--abs-ligne-normale);
}

.abs-fiche-personnage .abs-personnage-premiere a {
    color: var(--abs-lien);
}

/* ========================================================================
   Apparitions et voix
   ======================================================================== */

.abs-fiche-personnage .abs-personnage-apparitions,
.abs-fiche-personnage .abs-personnage-voix {
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-fiche-personnage .abs-personnage-apparition,
.abs-fiche-personnage .abs-personnage-voix-entree {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-mince) var(--abs-espace-court);
    align-items: baseline;
    padding-block: var(--abs-espace-court);
    border-block-end: 1px solid var(--abs-bordure);
}

.abs-fiche-personnage .abs-personnage-apparition a,
.abs-fiche-personnage .abs-personnage-voix-entree a {
    color: var(--abs-lien);
    font-size: var(--abs-texte-menu);
}

.abs-fiche-personnage .abs-personnage-voix-nature {
    display: inline-block;
    padding-inline: var(--abs-espace-court);
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-petit);
    background-color: var(--abs-surface);
    border-radius: var(--abs-rayon);
}

/*
 * Une apparition repliee est masquee jusqu'au depliage. La commande est
 * revelee par le script, qui porte l'etat sur son aria-expanded.
 */
.abs-fiche-personnage .abs-personne-repliee {
    display: none;
}

.abs-fiche-personnage .abs-personnes-plus[aria-expanded="true"] ~ .abs-personnage-apparitions .abs-personne-repliee,
.abs-fiche-personnage .abs-panneau:has(.abs-personnes-plus[aria-expanded="true"]) .abs-personne-repliee {
    display: flex;
}

.abs-fiche-personnage .abs-personnes-plus {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    margin-block-start: var(--abs-espace-court);
    padding-inline: var(--abs-espace-court);
    color: var(--abs-lien);
    font: inherit;
    font-size: var(--abs-texte-menu);
    background: none;
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    cursor: pointer;
    transition: border-color var(--abs-duree) ease;
}

.abs-fiche-personnage .abs-personnes-plus:hover,
.abs-fiche-personnage .abs-personnes-plus:focus-visible {
    border-color: var(--abs-accent);
}

/* ========================================================================
   Navigation entre personnages
   ======================================================================== */

.abs-fiche-personnage .abs-personnage-navigation {
    margin-block-start: var(--abs-espace-large);
    padding-block-start: var(--abs-espace);
    border-block-start: 1px solid var(--abs-bordure);
}

/*
 * Le titre de la barre quitte l'affichage sans quitter le document : il sert
 * le parcours de titre en titre, la ou les deux liens se suffisent a l'oeil.
 */
.abs-fiche-personnage .abs-personnage-navigation-titre {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.abs-fiche-personnage .abs-personnage-navigation-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-court);
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-fiche-personnage .abs-personnage-navigation-liste > li {
    flex: 1 1 14rem;
    min-inline-size: 0;
}

.abs-fiche-personnage .abs-personnage-navigation-liste a {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-mince);
    min-block-size: 44px;
    block-size: 100%;
    padding: var(--abs-espace-court);
    color: var(--abs-texte);
    text-decoration: none;
    background-color: var(--abs-surface);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    transition: border-color var(--abs-duree) ease;
}

.abs-fiche-personnage .abs-personnage-navigation-liste a:hover,
.abs-fiche-personnage .abs-personnage-navigation-liste a:focus-visible {
    border-color: var(--abs-accent);
}

.abs-fiche-personnage .abs-personnage-navigation-sens {
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-petit);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.abs-fiche-personnage .abs-personnage-navigation-cible {
    color: var(--abs-lien);
    font-size: var(--abs-texte-menu);
    font-weight: var(--abs-graisse-forte);
    line-height: var(--abs-ligne-serree);
    text-decoration: underline;
}

.abs-fiche-personnage .abs-personnage-navigation-suivant {
    text-align: end;
}

/* ========================================================================
   Écrans étroits
   ======================================================================== */

@media (max-width: 767.98px) {

    .abs-fiche-personnage {
        --abs-illustration: 100%;
        --abs-colonnes: 1;
    }

    .abs-fiche-personnage .abs-fiche-qualification dt {
        inline-size: 100%;
    }

    .abs-fiche-personnage .abs-personnage-navigation-liste > li {
        flex: 1 1 100%;
    }

    .abs-fiche-personnage .abs-personnage-navigation-suivant {
        text-align: start;
    }
}

/* ========================================================================
   Préférences utilisateur
   ======================================================================== */

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

    .abs-fiche-personnage .abs-onglet,
    .abs-fiche-personnage .abs-personnes-plus,
    .abs-fiche-personnage .abs-personnage-navigation-liste a {
        transition: none;
    }
}

@media print {

    .abs-fiche-personnage .abs-onglets,
    .abs-fiche-personnage .abs-personnage-navigation,
    .abs-fiche-personnage .abs-personnes-plus {
        display: none;
    }

    .abs-fiche-personnage .abs-personne-repliee {
        display: flex;
    }

    .abs-fiche-personnage .abs-panneau {
        break-inside: avoid;
    }

    /*
     * L'impression pose une bordure noire explicite : la feuille imprimee ne
     * suit pas la palette d'ecran.
     */
    .abs-fiche-personnage .abs-personnage-apparition,
    .abs-fiche-personnage .abs-personnage-voix-entree {
        border-block-end-color: #000000;
    }
}

/*
 * Sous onglets, le titre du panneau quitte l'affichage sans quitter le
 * document : l'onglet le porte deja, et un lecteur d'ecran le retrouve a sa
 * place dans la structure.
 */
.abs-fiche-personnage .abs-panneaux-onglets .abs-panneau-titre {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}