/*
 * Fichier : abs-fiction-fiche.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Présente la page d'une fiction sonore : en-tête à deux colonnes, barre
 * d'actions, grille des épisodes, panneaux, identifiants et contenus liés.
 *
 * Une feuille par domaine :
 *   Chaque domaine du plugin porte sa propre feuille. Les podcasts, les
 *   fictions et les livres audio partagent la disposition de leurs pages et
 *   se distinguent par leur ambiance visuelle.
 *
 *   Une feuille propre laisse reprendre les couleurs d'un domaine sans
 *   toucher aux autres. Chaque règle porte donc le conteneur du domaine, qui
 *   est l'article lui-même.
 *
 *   Le gabarit pose une seconde classe sur cet article, commune à toutes les
 *   fiches. Cette feuille ne s'en sert pas : elle reste un point d'accroche
 *   pour un thème enfant qui traite les fiches de tous les domaines d'un même
 *   geste.
 *
 * Échelles :
 *   Les espacements et les tailles de texte viennent de variables, non de
 *   valeurs posées au cas par cas. Une échelle tient les proportions d'un
 *   élément à l'autre, et se règle en un point.
 *
 * Forme des couvertures :
 *   Les couvertures ne sont pas recadrées à l'enregistrement : une image qui
 *   n'est pas carrée garde ses proportions. Le cadrage se fait à l'affichage,
 *   la couverture occupant une forme constante que règle une variable.
 *
 * Couleurs :
 *   Les couleurs viennent des variables du thème Discovery, avec une valeur
 *   de repli pour chacune. Sous un autre thème, les valeurs de repli
 *   s'appliquent et la page reste lisible.
 *
 *   Aucune couleur n'est posée en dur : changer la palette du thème change
 *   celle de la page. Les variables déclarées sur le conteneur se
 *   redéfinissent pour donner au domaine son ambiance propre.
 *
 * En-tête :
 *   La couverture et le texte se partagent la largeur. La couverture est
 *   bornée : une image carrée qui occupe la moitié d'un écran large repousse
 *   le titre hors de vue.
 *
 *   Sur un écran étroit, la couverture passe au-dessus du texte.
 *
 * Mentions de la couverture :
 *   Les mentions forment une liste de définitions, chacune sur sa ligne :
 *   l'étiquette et sa valeur, séparées par un deux-points posé en CSS.
 *
 *   Le deux-points est décoratif : il appartient à la présentation, et un
 *   lecteur d'écran annonce déjà la paire par la structure de la liste.
 *
 * Qualifications :
 *   Le public visé et le contenu forment une liste de définitions, chacun sur
 *   sa ligne : l'étiquette et sa valeur, séparées par un deux-points posé en
 *   CSS.
 *
 *   Le deux-points est décoratif : il appartient à la présentation, et un
 *   lecteur d'écran annonce déjà la paire par la structure de la liste.
 *
 *   L'étiquette garde une largeur fixe pour que les valeurs s'alignent, et
 *   cède la place sur un écran étroit.
 *
 * Période et écoutes :
 *   Ces informations accompagnent l'oeuvre sans l'annoncer : une ligne
 *   atténuée, séparée des qualifications qui, elles, avertissent.
 *
 * Personnes créditées :
 *   Les rôles forment une liste de définitions. Le libellé et les personnes
 *   sont sur la même ligne tant que la place le permet, le libellé gardant
 *   une largeur fixe pour que les noms s'alignent.
 *
 *   Les personnes se suivent dans le fil du texte, leur séparateur porté par
 *   un élément propre. Une mise en forme qui les détache rompt la lecture
 *   continue de l'énumération.
 *
 *   Le repli des listes longues appartient au script, qui pose et retire la
 *   classe de masquage. La feuille tient l'apparence de l'un et l'autre état.
 *
 *   La commande de dépliage prend place dans la ligne des noms, alignée sur
 *   leur ligne de base : elle s'y lit comme un nom de plus. Sa hauteur de
 *   cible tactile vient de sa marge interne, ce qui la tient dans la ligne.
 *
 * Grille des épisodes :
 *   L'état de la grille est porté par un attribut de données sur sa section.
 *   Une feuille de design vise cet attribut pour animer le déploiement, sans
 *   dépendre d'une classe que le script ajoute.
 *
 *   La grille repliée est retirée de l'affichage et du document : un contenu
 *   masqué mais présent reste atteignable au clavier et annoncé par un
 *   lecteur d'écran, qui le décrit alors sans qu'il paraisse.
 *
 * Conditions d'écoute :
 *   Le bloc se distingue du reste de la page par son fond et sa bordure. Il
 *   décrit un accès, non une partie de l'oeuvre, et sa présentation le dit.
 *
 * Distribution :
 *   Chaque rôle occupe une ligne : le personnage et sa nature d'un côté, la
 *   voix de l'autre. Les deux colonnes s'empilent sur un écran étroit.
 *
 *   La mention qui précède la voix est atténuée : elle nomme la relation,
 *   là où le nom porte l'information.
 *
 * Panneaux :
 *   Les onglets sont masqués tant que le script ne les révèle pas, et les
 *   panneaux paraissent alors les uns sous les autres sous leur titre.
 *
 *   Sous onglets, le titre de chaque panneau est retiré de l'affichage sans
 *   quitter le document : l'onglet le porte déjà, et le lire deux fois
 *   alourdit l'écoute.
 *
 * Contenus liés :
 *   Les cartes reprennent la présentation des grilles du plugin. Les règles
 *   qui leur sont communes vivent dans la feuille de l'archive, chargée sur
 *   ses propres pages : celles qui suivent complètent la fiche.
 *
 * 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.
 *   - Sous prefers-contrast, les bordures s'épaississent et les fonds
 *     atténués disparaissent.
 *   - Un titre masqué sous onglets emploie un masquage qui le laisse dans le
 *     document, là où display none le retire aux lecteurs d'écran.
 *   - L'onglet actif se distingue par sa bordure et sa graisse, non par sa
 *     seule couleur.
 *
 * @package AB_Story_Reader
 */

.abs-fiche-fiction {
    --abs-espace-mince: 0.25rem;
    --abs-espace-court: 0.75rem;
    --abs-espace: 1.5rem;
    --abs-espace-large: 2.25rem;

    --abs-texte-petit: 0.8125rem;
    --abs-texte-menu: 0.875rem;
    --abs-texte-normal: 1rem;
    --abs-texte-grand: 1.0625rem;
    --abs-texte-titre: 1.15rem;
    --abs-texte-prix: 1.25rem;

    --abs-rayon: 6px;
    --abs-forme-couverture: 1 / 1;
    --abs-colonnes: 3;
    --abs-couverture: 22rem;

    --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-fiction .abs-fiche-entete {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace);
    align-items: flex-start;
    margin-block-end: calc(var(--abs-espace) * 1.5);
}

.abs-fiche-fiction .abs-fiche-visuel {
    flex: 0 0 min(var(--abs-couverture), 100%);
}

/*
 * Les couvertures ne sont pas recadrées à l'enregistrement : une image qui
 * n'est pas carrée garde ses proportions. Le cadrage se fait à l'affichage,
 * la couverture occupant une forme constante.
 */
.abs-fiche-fiction .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-fiction .abs-fiche-visuel button {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.abs-fiche-fiction .abs-fiche-mentions {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-mince);
    margin-block: var(--abs-espace-court) 0;
    font-size: var(--abs-texte-petit);
    line-height: 1.4;
    color: var(--abs-attenue);
}

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

.abs-fiche-fiction .abs-fiche-mention dt {
    font-weight: 600;
}

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

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

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

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

.abs-fiche-fiction .abs-fiche-sous-titre {
    margin-block: 0 var(--abs-espace-court);
    font-size: var(--abs-texte-titre);
    font-style: italic;
    line-height: 1.4;
    color: var(--abs-attenue);
}

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

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

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

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

.abs-fiche-fiction .abs-fiche-personnes {
    margin-block: 0 var(--abs-espace);
}

.abs-fiche-fiction .abs-role {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--abs-espace-court);
    margin-block-end: var(--abs-espace-court);
}

.abs-fiche-fiction .abs-role-libelle {
    flex: 0 0 auto;
    inline-size: 9rem;
    font-weight: 600;
}

/*
 * Les personnes et la commande de dépliage forment une même ligne : la
 * commande y prend place comme un nom de plus, alignée sur eux.
 *
 * L'alignement porte sur la ligne de base du texte, non sur le centre des
 * éléments : la commande suit ainsi la même ligne que les noms, quelle que
 * soit sa hauteur.
 */
.abs-fiche-fiction .abs-role-personnes {
    flex: 1 1 16rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--abs-espace-mince);
    margin: 0;
    min-inline-size: 0;
}

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

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

.abs-fiche-fiction .abs-personne a:hover,
.abs-fiche-fiction .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-fiction .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-fiction .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 0.15s ease, border-color 0.15s ease;
}

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

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

.abs-fiche-fiction .abs-fiche-qualifications {
    margin-block: var(--abs-espace-court) 0;
    padding: 0;
}

/*
 * Chaque qualification occupe une ligne : l'étiquette et sa valeur, séparées
 * par un deux-points posé en CSS.
 *
 * L'étiquette garde une largeur fixe pour que les valeurs s'alignent, et
 * cède la place sur un écran étroit.
 */
.abs-fiche-fiction .abs-qualification {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--abs-espace-court);
    padding-block: var(--abs-espace-mince);
    font-size: var(--abs-texte-menu);
}

.abs-fiche-fiction .abs-qualification dt {
    flex: 0 0 7rem;
    margin: 0;
    color: var(--abs-attenue);
    font-weight: 500;
}

/*
 * Le deux-points est décoratif : il appartient à la présentation, et un
 * lecteur d'écran annonce déjà la paire par la structure de la liste.
 */
.abs-fiche-fiction .abs-qualification dt::after {
    content: ":";
}

.abs-fiche-fiction .abs-qualification dd {
    flex: 1 1 12rem;
    margin: 0;
    min-inline-size: 0;
    color: var(--abs-texte);
}

/*
 * Les écoutes et la période accompagnent l'oeuvre sans l'annoncer : une ligne
 * atténuée, séparée des qualifications qui, elles, avertissent.
 */
.abs-fiche-fiction .abs-fiche-contexte {
    margin-block: var(--abs-espace-court) 0;
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

/* =========================================================================
   Lecteur
   ========================================================================= */

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

/* =========================================================================
   Barre d'actions
   ========================================================================= */

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

.abs-fiche-fiction .abs-fiche-integrale {
    margin: 0;
}

.abs-fiche-fiction .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 0.15s ease, border-color 0.15s ease;
}

.abs-fiche-fiction .abs-bouton:hover,
.abs-fiche-fiction .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-fiction .abs-bouton-principal {
    border-color: var(--abs-accent);
    background-color: var(--abs-accent);
    color: var(--abs-fond);
    font-weight: 600;
}

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

/* =========================================================================
   Conditions d'écoute
   ========================================================================= */

.abs-fiche-fiction .abs-acces {
    padding: var(--abs-espace);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
}

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

.abs-fiche-fiction .abs-acces-texte {
    margin-block: 0 var(--abs-espace);
    max-inline-size: 60ch;
}

.abs-fiche-fiction .abs-acces-achat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abs-espace-court);
    margin-block: 0 var(--abs-espace);
}

.abs-fiche-fiction .abs-acces-prix {
    font-size: var(--abs-texte-prix);
    font-weight: 600;
}

.abs-fiche-fiction .abs-acces-details {
    padding-block-start: var(--abs-espace-court);
    border-block-start: 1px solid var(--abs-bordure);
}

.abs-fiche-fiction .abs-acces-sous-titre {
    margin-block: var(--abs-espace-court) var(--abs-espace-mince);
    font-size: var(--abs-texte-menu);
}

.abs-fiche-fiction .abs-acces-details p {
    margin-block: 0;
    font-size: var(--abs-texte-menu);
    line-height: 1.5;
    color: var(--abs-attenue);
    max-inline-size: 60ch;
}

/* =========================================================================
   Grille des épisodes
   ========================================================================= */

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

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

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

.abs-fiche-fiction .abs-episodes-grille {
    margin-block: 0;
}

/*
 * L'état de la grille est porté par un attribut de données sur sa section.
 * Une feuille de design vise cet attribut pour animer le déploiement, sans
 * dépendre d'une classe que le script ajoute.
 *
 * 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-fiction .abs-fiche-episodes[data-abs-episodes="replie"] .abs-episodes-grille {
    display: none;
}

/* =========================================================================
   Distribution
   ========================================================================= */

.abs-fiche-fiction .abs-distribution {
    margin: 0;
}

.abs-fiche-fiction .abs-distribution-role {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-mince) var(--abs-espace);
    padding-block: var(--abs-espace-court);
    border-block-end: 1px solid var(--abs-bordure);
}

.abs-fiche-fiction .abs-distribution-role:last-child {
    border-block-end: 0;
}

.abs-fiche-fiction .abs-distribution-personnage {
    flex: 1 1 16rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--abs-espace-court);
    font-weight: 600;
    min-inline-size: 0;
}

.abs-fiche-fiction .abs-distribution-nature {
    font-size: var(--abs-texte-petit);
    font-weight: 400;
    color: var(--abs-attenue);
}

.abs-fiche-fiction .abs-distribution-voix {
    flex: 1 1 14rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--abs-espace-mince);
    margin: 0;
    min-inline-size: 0;
    color: var(--abs-attenue);
}

.abs-fiche-fiction .abs-distribution-mention {
    font-size: var(--abs-texte-petit);
}

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

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

/* =========================================================================
   Personnages
   ========================================================================= */

/*
 * Un personnage se présente comme un contenu du plugin, en carte. Le nombre
 * de colonnes vient des réglages, posé par le gabarit.
 */
.abs-fiche-fiction .abs-personnages {
    margin-block: 0;
}

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

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

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

.abs-fiche-fiction .abs-onglet {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    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;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

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

.abs-fiche-fiction .abs-onglet[aria-selected="true"] {
    background-color: var(--abs-surface);
    border-color: var(--abs-accent);
    font-weight: 600;
}

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

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

/*
 * Sous onglets, le titre du panneau quitte l'affichage sans quitter le
 * document : l'onglet le porte déjà, et un lecteur d'écran le retrouve à sa
 * place dans la structure.
 */
.abs-fiche-fiction .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;
}

.abs-fiche-fiction .abs-panneaux-onglets .abs-panneau[hidden] {
    display: none;
}

.abs-fiche-fiction .abs-panneau-corps > :first-child {
    margin-block-start: 0;
}

.abs-fiche-fiction .abs-panneau-corps > :last-child {
    margin-block-end: 0;
}

/* =========================================================================
   Équipe de production
   ========================================================================= */

.abs-fiche-fiction .abs-equipe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--abs-espace-court);
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-fiche-fiction .abs-equipe-membre {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-mince);
    padding: var(--abs-espace-court);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
}

.abs-fiche-fiction .abs-equipe-nom {
    font-weight: 600;
}

.abs-fiche-fiction .abs-equipe-role {
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

/* =========================================================================
   Identifiants
   ========================================================================= */

.abs-fiche-fiction .abs-identifiants {
    margin-block-end: calc(var(--abs-espace) * 1.5);
    padding-block-start: var(--abs-espace);
    border-block-start: 1px solid var(--abs-bordure);
}

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

.abs-fiche-fiction .abs-identifiants-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--abs-espace-court);
    margin: 0;
}

.abs-fiche-fiction .abs-identifiant {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--abs-espace-court);
    font-size: var(--abs-texte-menu);
}

.abs-fiche-fiction .abs-identifiant dt {
    font-weight: 600;
    color: var(--abs-attenue);
}

.abs-fiche-fiction .abs-identifiant dd {
    margin: 0;
    font-family: ui-monospace, monospace;
    overflow-wrap: anywhere;
}

/* =========================================================================
   Contenus liés
   ========================================================================= */

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

.abs-fiche-fiction .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-fiction .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-fiction .abs-carte {
    display: flex;
}

.abs-fiche-fiction .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 0.15s ease, transform 0.15s ease;
}

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

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

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

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

.abs-fiche-fiction .abs-carte-titre {
    margin: 0;
    font-size: var(--abs-texte-grand);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

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

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

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

@media (max-width: 1024px) {

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

@media (max-width: 768px) {

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

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

    .abs-fiche-fiction .abs-role-libelle {
        inline-size: 100%;
    }
}

@media (max-width: 480px) {

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

    .abs-fiche-fiction .abs-onglets {
        flex-direction: column;
    }

    .abs-fiche-fiction .abs-onglet {
        inline-size: 100%;
        justify-content: flex-start;
    }
}

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

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

    .abs-fiche-fiction .abs-onglet,
    .abs-fiche-fiction .abs-personnes-plus,
    .abs-fiche-fiction .abs-qualification,
    .abs-fiche-fiction .abs-equipe-membre,
    .abs-fiche-fiction .abs-carte-lien {
        border-width: 2px;
    }

    .abs-fiche-fiction .abs-carte-lien,
    .abs-fiche-fiction .abs-onglet[aria-selected="true"] {
        background-color: transparent;
    }

    .abs-fiche-fiction .abs-fiche-sous-titre,
    .abs-fiche-fiction .abs-fiche-mentions,
    .abs-fiche-fiction .abs-fiche-mention,
    .abs-fiche-fiction .abs-qualification,
    .abs-fiche-fiction .abs-equipe-role,
    .abs-fiche-fiction .abs-identifiant dt,
    .abs-fiche-fiction .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-fiction .abs-onglet,
    .abs-fiche-fiction .abs-personnes-plus,
    .abs-fiche-fiction .abs-carte-lien {
        transition: none;
    }

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

/* Impression : les commandes sont retirées, les panneaux tous dépliés. */
@media print {

    .abs-fiche-fiction .abs-onglets,
    .abs-fiche-fiction .abs-personnes-plus,
    .abs-fiche-fiction .abs-fiche-lecteur {
        display: none;
    }

    .abs-fiche-fiction .abs-panneaux-onglets .abs-panneau[hidden] {
        display: block;
    }

    .abs-fiche-fiction .abs-panneaux-onglets .abs-panneau-titre {
        position: static;
        inline-size: auto;
        block-size: auto;
        margin: 0 0 var(--abs-espace-court);
        clip-path: none;
        white-space: normal;
    }

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

    .abs-fiche-fiction .abs-carte-lien,
    .abs-fiche-fiction .abs-equipe-membre {
        background-color: transparent;
        border-color: #000000;
    }
}