/*
 * Fichier : abs-serie-fiche.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Présente la fiche d'une série : image, en-tête et crédits, action,
 * renseignements, description, parcours des titres, personnages récurrents
 * et séries de la même saga. La charpente commune place les blocs ; cette
 * feuille les met en forme.
 *
 * Une feuille par domaine :
 *   Chaque règle est portée par le conteneur de la fiche : deux domaines
 *   nomment leurs éléments de la même façon, et une règle sans conteneur
 *   s'applique à l'un comme à l'autre selon l'ordre de chargement.
 *
 * Échelles et couleurs :
 *   Les espacements, les tailles de texte et les couleurs viennent des
 *   variables du thème Discovery, avec une valeur de repli pour chacune.
 *
 * Forme des images :
 *   Les images ne sont pas recadrées à l'enregistrement. Le cadrage se fait à
 *   l'affichage : l'image occupe une forme constante que règle une variable.
 *
 * Nombre de colonnes :
 *   Le parcours et les grilles lisent la variable --abs-colonnes, posée par
 *   les gabarits depuis les réglages. Les paliers d'écran la plafonnent.
 *
 * Blocs sans contenu :
 *   Un bloc sans contenu ne prend aucune place. Son conteneur demeure dans
 *   le document pour que le fragment de rafraîchissement ait une cible.
 *
 * Accessibilité :
 * - Le focus clavier est visible sur tout élément interactif.
 * - Les cibles tactiles mesurent au moins quarante-quatre pixels de côté.
 * - Les transitions sont retirées sous prefers-reduced-motion.
 * - Le contraste des textes atteint le rapport exigé au niveau AA, y
 *     compris pour les textes atténués.
 * - Sous prefers-contrast, les bordures s'épaississent et les fonds
 *     atténués disparaissent.
 *
 * @package AB_Story_Reader
 * @since   2.1.0
 */

.abs-fiche-serie {
    --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-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-normal: var(--discovery-text-base, 1rem);
    --abs-texte-titre: var(--discovery-text-lg, 1.15rem);
    --abs-texte-prix: var(--discovery-text-xl, 1.25rem);

    --abs-graisse-normale: var(--discovery-weight-normal, 400);
    --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-couverture: 1 / 1;
    --abs-colonnes: 3;
    --abs-couverture: calc((100% - var(--abs-gouttiere-colonnes)) / 2);

    --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-lien-survol: var(--discovery-color-link-hover, #083f77);
    --abs-accent: var(--discovery-color-accent, #6b3fa0);

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

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

.abs-fiche-serie .abs-fiche-visuel {
    margin-block-end: var(--abs-espace);
}

/*
 * Les images ne sont pas recadrées à l'enregistrement : une image qui n'est
 * pas carrée garde ses proportions. Le cadrage se fait à l'affichage.
 */
.abs-fiche-serie .abs-fiche-couverture {
    display: block;
    aspect-ratio: var(--abs-forme-couverture);
    object-fit: cover;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--abs-rayon);
}

/*
 * Le déclencheur du dialogue est un bouton. Ses styles propres viennent du
 * thème ; seule sa mise en page est reprise ici, pour que l'image occupe la
 * colonne.
 */
.abs-fiche-serie .abs-fiche-visuel button {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.abs-fiche-serie .abs-fiche-intro {
    min-inline-size: 0;
}

.abs-fiche-serie .abs-fiche-titre {
    margin-block: 0 var(--abs-espace-court);
}

.abs-fiche-serie .abs-fiche-composition {
    margin-block: 0 var(--abs-espace);
    font-size: var(--abs-texte-titre);
    line-height: var(--abs-ligne-normale);
}

/* =========================================================================
   Personnes créditées
   ========================================================================= */

/*
 * Personnes créditées : l'alignement vient de la liste, comme sur la fiche
 * du livre audio. La colonne des intitulés prend la largeur du plus long, et
 * les noms de tous les rôles commencent au même endroit : un intitulé long
 * élargit la colonne pour tous, au lieu de décaler ses seuls noms.
 */
.abs-fiche-serie .abs-fiche-personnes {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--abs-espace-court, 0.75rem);
    row-gap: var(--abs-espace-mince, 0.25rem);
    margin: 0 0 var(--abs-espace-court);
    font-size: var(--abs-texte-menu);
}

.abs-fiche-serie .abs-role {
    display: contents;
}

.abs-fiche-serie .abs-role dt,
.abs-fiche-serie .abs-role dd {
    margin: 0;
}

.abs-fiche-serie .abs-role-libelle {
    font-weight: var(--abs-graisse-forte);
    color: var(--abs-attenue);
}

.abs-fiche-serie .abs-role-personnes {
    min-inline-size: 0;
}

.abs-fiche-serie .abs-personne {
    display: inline;
}

.abs-fiche-serie .abs-personne a {
    color: var(--abs-lien);
    text-decoration: none;
}

.abs-fiche-serie .abs-personne a:hover,
.abs-fiche-serie .abs-personne a:focus-visible {
    color: var(--abs-lien-survol);
    text-decoration: underline;
}

/*
 * Le script pose cette classe sur les personnes qu'il masque. Sans lui, la
 * classe reste sans effet et toutes les personnes paraissent.
 */
.abs-fiche-serie .abs-personnes-repliees .abs-personne-repliee {
    display: none;
}

/*
 * La commande occupe la hauteur d'une cible tactile, portée par sa marge
 * interne : la commande reste ainsi dans la ligne de texte où elle prend
 * place.
 */
.abs-fiche-serie .abs-personnes-plus {
    display: inline-flex;
    align-items: center;
    padding-block: calc((44px - 1.5em) / 2);
    padding-inline: var(--abs-espace-court);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: transparent;
    color: var(--abs-texte);
    font: inherit;
    font-size: var(--abs-texte-menu);
    cursor: pointer;
    transition: background-color var(--abs-duree) ease,
                border-color var(--abs-duree) ease;
}

.abs-fiche-serie .abs-personnes-plus:hover,
.abs-fiche-serie .abs-personnes-plus:focus-visible {
    background-color: var(--abs-surface);
    border-color: var(--abs-texte);
}

/* =========================================================================
   Action
   ========================================================================= */

.abs-fiche-serie .abs-fiche-actions {
    margin-block-end: var(--abs-espace);
}

.abs-fiche-serie .abs-fiche-action {
    margin: 0;
}

.abs-fiche-serie .abs-bouton {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--abs-espace);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: transparent;
    color: var(--abs-texte);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--abs-duree) ease,
                border-color var(--abs-duree) ease;
}

.abs-fiche-serie .abs-bouton:hover,
.abs-fiche-serie .abs-bouton:focus-visible {
    background-color: var(--abs-surface);
    border-color: var(--abs-texte);
}

/*
 * L'action principale se distingue par son fond et par sa graisse, non par sa
 * seule couleur : une distinction portée par la couleur seule échappe à qui
 * ne la perçoit pas.
 */
.abs-fiche-serie .abs-bouton-principal {
    border-color: var(--abs-accent);
    background-color: var(--abs-accent);
    color: var(--abs-fond);
    font-weight: var(--abs-graisse-forte);
}

.abs-fiche-serie .abs-bouton-principal:hover,
.abs-fiche-serie .abs-bouton-principal:focus-visible {
    background-color: var(--abs-texte);
    border-color: var(--abs-texte);
    color: var(--abs-fond);
}

/* =========================================================================
   Renseignements
   ========================================================================= */

.abs-fiche-serie .abs-renseignements {
    margin-block-end: var(--abs-espace);
}

.abs-fiche-serie .abs-renseignements-titre {
    margin-block: 0 var(--abs-espace-court);
    font-size: var(--abs-texte-normal);
}

.abs-fiche-serie .abs-renseignements-liste {
    display: grid;
    grid-template-columns: fit-content(50%) minmax(0, 1fr);
    column-gap: var(--abs-espace-court);
    row-gap: var(--abs-espace-mince);
    margin: 0;
    font-size: var(--abs-texte-menu);
}

.abs-fiche-serie .abs-renseignement {
    display: contents;
}

.abs-fiche-serie .abs-renseignement dt {
    margin: 0;
    font-weight: var(--abs-graisse-forte);
    color: var(--abs-attenue);
}

.abs-fiche-serie .abs-renseignement dd {
    margin: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.abs-fiche-serie .abs-renseignement a {
    color: var(--abs-lien);
}

.abs-fiche-serie .abs-renseignement a:hover,
.abs-fiche-serie .abs-renseignement a:focus-visible {
    color: var(--abs-lien-survol);
}

/* =========================================================================
   Description
   ========================================================================= */

.abs-fiche-serie .abs-fiche-description {
    margin-block-end: calc(var(--abs-espace) * 1.5);
}

.abs-fiche-serie .abs-fiche-description-titre {
    margin-block: 0 var(--abs-espace-court);
}

.abs-fiche-serie .abs-fiche-description-texte {
    max-inline-size: 70ch;
    line-height: var(--abs-ligne-normale);
}

/* =========================================================================
   Parcours
   ========================================================================= */

.abs-fiche-serie .abs-parcours {
    margin-block-end: calc(var(--abs-espace) * 1.5);
}

.abs-fiche-serie .abs-parcours-titre {
    margin-block: 0 var(--abs-espace);
}

.abs-fiche-serie .abs-parcours-liste {
    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-serie .abs-parcours-element {
    display: flex;
}

/* Le titre entier est un seul lien : un seul arrêt au clavier. */
.abs-fiche-serie .abs-parcours-lien {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
    color: var(--abs-texte);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--abs-duree) ease,
                transform var(--abs-duree) ease;
}

.abs-fiche-serie .abs-parcours-lien:hover,
.abs-fiche-serie .abs-parcours-lien:focus-visible {
    border-color: var(--abs-accent);
    transform: translateY(-2px);
}

.abs-fiche-serie .abs-parcours-image {
    display: block;
    background-color: var(--abs-fond);
}

.abs-fiche-serie .abs-parcours-couverture {
    display: block;
    aspect-ratio: var(--abs-forme-couverture);
    object-fit: cover;
    inline-size: 100%;
    block-size: auto;
}

.abs-fiche-serie .abs-parcours-texte {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-mince);
    padding: var(--abs-espace-court);
}

.abs-fiche-serie .abs-parcours-nom {
    margin: 0;
    font-size: var(--abs-texte-normal);
    font-weight: var(--abs-graisse-forte);
    line-height: var(--abs-ligne-serree);
    color: inherit;
}

.abs-fiche-serie .abs-parcours-lien:hover .abs-parcours-nom,
.abs-fiche-serie .abs-parcours-lien:focus-visible .abs-parcours-nom {
    text-decoration: underline;
}

.abs-fiche-serie .abs-parcours-information {
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

/* =========================================================================
   Personnages récurrents
   ========================================================================= */

.abs-fiche-serie .abs-fiche-personnages {
    margin-block-end: calc(var(--abs-espace) * 1.5);
}

.abs-fiche-serie .abs-personnages-titre {
    margin-block: 0 var(--abs-espace-court);
}

.abs-fiche-serie .abs-personnages-bascule {
    margin-block-end: var(--abs-espace);
}

/*
 * La grille repliée est retirée de l'affichage et du document : un contenu
 * masqué mais présent reste atteignable au clavier.
 */
.abs-fiche-serie .abs-fiche-personnages[data-abs-personnages="replie"] .abs-personnages-grille {
    display: none;
}

/* =========================================================================
   Même saga et cartes
   ========================================================================= */

.abs-fiche-serie .abs-lies-famille {
    margin-block-end: calc(var(--abs-espace) * 1.5);
}

.abs-fiche-serie .abs-lies-titre {
    margin-block: 0 var(--abs-espace);
}

/*
 * La grille et les cartes reprennent la présentation des regroupements du
 * plugin. Les règles qui suivent valent pour les pages où la feuille de
 * l'archive n'est pas chargée.
 */
.abs-fiche-serie .abs-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-fiche-serie .abs-carte {
    display: flex;
}

.abs-fiche-serie .abs-carte-lien {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
    color: var(--abs-texte);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--abs-duree) ease,
                transform var(--abs-duree) ease;
}

.abs-fiche-serie .abs-carte-lien:hover,
.abs-fiche-serie .abs-carte-lien:focus-visible {
    border-color: var(--abs-accent);
    transform: translateY(-2px);
}

.abs-fiche-serie .abs-carte-image {
    display: block;
    inline-size: 100%;
    background-color: var(--abs-fond);
}

.abs-fiche-serie .abs-carte-couverture {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.abs-fiche-serie .abs-carte-texte {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-mince);
    padding: var(--abs-espace-court);
}

.abs-fiche-serie .abs-carte-titre {
    margin: 0;
    font-size: var(--abs-texte-normal);
    font-weight: var(--abs-graisse-forte);
    line-height: var(--abs-ligne-serree);
    color: inherit;
}

.abs-fiche-serie .abs-carte-lien:hover .abs-carte-titre,
.abs-fiche-serie .abs-carte-lien:focus-visible .abs-carte-titre {
    text-decoration: underline;
}

.abs-fiche-serie .abs-meta {
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

/* =========================================================================
   Blocs sans contenu
   ========================================================================= */

.abs-fiche-serie .abs-fiche-actions-vide,
.abs-fiche-serie .abs-renseignements-vide,
.abs-fiche-serie .abs-fiche-description-vide,
.abs-fiche-serie .abs-parcours-vide,
.abs-fiche-serie .abs-fiche-personnages-vide,
.abs-fiche-serie .abs-lies-vide {
    display: none;
}

/* =========================================================================
   Paliers d'écran
   ========================================================================= */

@media (max-width: 1024px) {

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

@media (max-width: 767.98px) {

    .abs-fiche-serie {
        --abs-couverture: 100%;
    }

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

}

@media (max-width: 480px) {

    .abs-fiche-serie .abs-grille,
    .abs-fiche-serie .abs-parcours-liste {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================================
   Préférences d'affichage
   ========================================================================= */

/* Contraste renforcé : bordures épaissies, fonds atténués retirés. */
@media (prefers-contrast: more) {

    .abs-fiche-serie .abs-bouton,
    .abs-fiche-serie .abs-personnes-plus,
    .abs-fiche-serie .abs-parcours-lien,
    .abs-fiche-serie .abs-carte-lien {
        border-width: 2px;
    }

    .abs-fiche-serie .abs-parcours-lien,
    .abs-fiche-serie .abs-carte-lien {
        background-color: transparent;
    }

    .abs-fiche-serie .abs-renseignement dt,
    .abs-fiche-serie .abs-parcours-information,
    .abs-fiche-serie .abs-meta {
        color: var(--abs-texte);
    }
}

/* Mouvement réduit : les transitions et les déplacements sont retirés. */
@media (prefers-reduced-motion: reduce) {

    .abs-fiche-serie .abs-bouton,
    .abs-fiche-serie .abs-personnes-plus,
    .abs-fiche-serie .abs-parcours-lien,
    .abs-fiche-serie .abs-carte-lien {
        transition: none;
    }

    .abs-fiche-serie .abs-parcours-lien:hover,
    .abs-fiche-serie .abs-parcours-lien:focus-visible,
    .abs-fiche-serie .abs-carte-lien:hover,
    .abs-fiche-serie .abs-carte-lien:focus-visible {
        transform: none;
    }
}

/* Impression : les commandes sont retirées, les listes toutes dépliées. */
@media print {

    .abs-fiche-serie .abs-personnes-plus,
    .abs-fiche-serie .abs-personnages-bascule,
    .abs-fiche-serie .abs-fiche-actions {
        display: none;
    }

    .abs-fiche-serie .abs-personnes-repliees .abs-personne-repliee {
        display: inline;
    }

    .abs-fiche-serie .abs-fiche-personnages[data-abs-personnages="replie"] .abs-personnages-grille {
        display: grid;
    }

    .abs-fiche-serie .abs-parcours-lien,
    .abs-fiche-serie .abs-carte-lien {
        background-color: transparent;
        border-color: #000000;
    }
}