/*
 * Fichier : abs-episode-fiction-fiche.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Mise en forme de la fiche d'un épisode de fiction : en-tête, navigation
 * entre les épisodes, écoute, panneaux, identifiants et bas de fiche.
 *
 * É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. Le repli
 *   sert aux thèmes qui ne déclarent pas la variable.
 *
 *   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 la couverture et le texte. Sa
 *   gouttière lit --discovery-space-8, marche dont la grille de la fiche
 *   produit se sert aussi, et les deux gabarits alignent leurs colonnes au
 *   pixel.
 *
 *   La couverture occupe la moitié de la largeur disponible, gouttière
 *   déduite. Elle suit ainsi le conteneur du thème à toute largeur, sans
 *   largeur fixe à reprendre quand ce conteneur change.
 *
 * Navigation :
 *   Les deux barres partagent leur mise en forme. Chaque lien annonce son
 *   sens sur une ligne et sa cible sur la suivante : le sens seul ne se
 *   comprend qu'en contexte.
 *
 *   Un lien absent en bout de fratrie laisse sa place aux autres, la liste
 *   se répartissant sur la largeur.
 *
 * Blocs sans contenu :
 *   Un bloc dont le conteneur demeure dans le document pour servir de cible
 *   à un fragment de rafraîchissement porte une classe de vacuité, et la
 *   mise en forme lui retire toute place.
 *
 * 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-episode-fiction {
    --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-normal: var(--discovery-text-base, 1rem);
    --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-couverture: 1 / 1;
    --abs-colonnes: 3;
    --abs-couverture: calc((100% - var(--abs-gouttiere-colonnes)) / 2);

    --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-episode-fiction .abs-fiche-visuel {
    flex: 0 0 min(var(--abs-couverture), 100%);
    min-inline-size: 0;
}

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

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

.abs-fiche-episode-fiction .abs-episode-surtitre {
    margin: 0 0 var(--abs-espace-mince);
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-menu);
    font-weight: var(--abs-graisse-forte);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.abs-fiche-episode-fiction .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);
}

/* ========================================================================
   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-episode-fiction .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-episode-fiction .abs-role {
    display: contents;
}

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

.abs-fiche-episode-fiction .abs-role-libelle {
    font-weight: var(--abs-graisse-forte);
    color: var(--abs-texte-doux);
}

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

.abs-fiche-episode-fiction .abs-role-personnes a {
    color: var(--abs-lien);
}

.abs-fiche-episode-fiction .abs-personne-repliee {
    display: none;
}

.abs-fiche-episode-fiction .abs-personnes-plus[aria-expanded="true"] ~ .abs-personne-repliee,
.abs-fiche-episode-fiction .abs-role-personnes:has(.abs-personnes-plus[aria-expanded="true"]) .abs-personne-repliee {
    display: inline;
}

.abs-fiche-episode-fiction .abs-personnes-plus {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    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-episode-fiction .abs-personnes-plus:hover,
.abs-fiche-episode-fiction .abs-personnes-plus:focus-visible {
    border-color: var(--abs-accent);
}

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

.abs-fiche-episode-fiction .abs-fiche-qualification {
    display: flex;
    align-items: baseline;
    gap: var(--abs-espace-mince, 0.25rem);
    white-space: nowrap;
}

.abs-fiche-episode-fiction .abs-fiche-qualification dt {
    margin: 0;
    color: var(--abs-texte-doux);
    font-weight: var(--abs-graisse-forte);
}

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

.abs-fiche-episode-fiction .abs-fiche-qualification dd {
    margin: 0;
    white-space: normal;
}

/* ========================================================================
   Navigation entre les épisodes
   ======================================================================== */

.abs-fiche-episode-fiction .abs-episode-navigation {
    margin-block: var(--abs-espace);
}

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

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

.abs-fiche-episode-fiction .abs-episode-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-episode-fiction .abs-episode-navigation-liste a:hover,
.abs-fiche-episode-fiction .abs-episode-navigation-liste a:focus-visible {
    border-color: var(--abs-accent);
}

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

.abs-fiche-episode-fiction .abs-episode-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-episode-fiction .abs-episode-navigation-suivant {
    text-align: end;
}

/* ========================================================================
   Écoute
   ======================================================================== */

.abs-fiche-episode-fiction .abs-fiche-ecoute {
    margin-block: var(--abs-espace);
}

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

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

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

.abs-fiche-episode-fiction .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-episode-fiction .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-episode-fiction .abs-onglet:hover,
.abs-fiche-episode-fiction .abs-onglet:focus-visible {
    border-block-end-color: var(--abs-bordure);
}

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

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

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

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

/*
 * En onglets, le panneau non retenu est masqué par le script, qui pose
 * l'attribut hidden. Le titre demeure dans le document pour nommer le
 * panneau.
 */
.abs-fiche-episode-fiction .abs-panneaux[data-abs-panneaux="onglets"] .abs-panneau[hidden] {
    display: none;
}

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

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

.abs-fiche-episode-fiction .abs-distribution-role {
    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-episode-fiction .abs-distribution-personnage {
    flex: 0 0 14rem;
    font-weight: var(--abs-graisse-forte);
}

.abs-fiche-episode-fiction .abs-distribution-personnage a,
.abs-fiche-episode-fiction .abs-distribution-voix a {
    color: var(--abs-lien);
}

.abs-fiche-episode-fiction .abs-distribution-voix {
    flex: 1 1 14rem;
    margin: 0;
    min-inline-size: 0;
}

.abs-fiche-episode-fiction .abs-distribution-nature {
    display: inline-block;
    margin-inline-start: var(--abs-espace-court);
    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);
}

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

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

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

.abs-fiche-episode-fiction .abs-identifiants {
    margin-block: var(--abs-espace);
}

/*
 * Une section d'identifiants sans contenu ne prend aucune place. Le
 * conteneur demeure dans le document pour que le fragment de
 * rafraîchissement ait une cible à remplacer.
 */
.abs-fiche-episode-fiction .abs-identifiants-vide {
    display: none;
}

.abs-fiche-episode-fiction .abs-identifiants-titre {
    margin: 0 0 var(--abs-espace-court);
    font-size: var(--abs-texte-normal);
    line-height: var(--abs-ligne-serree);
}

/*
 * Les identifiants forment deux colonnes : les libellés d'un côté, les
 * valeurs en face. La grille est portée par la liste et les conteneurs de
 * couple passent en display: contents, de sorte que les libellés s'alignent
 * d'un identifiant à l'autre et que chaque valeur partage la ligne de son
 * libellé. La colonne des libellés ne dépasse pas la moitié de la liste ; une
 * valeur longue se replie dans sa colonne.
 */
.abs-fiche-episode-fiction .abs-identifiants-liste {
    display: grid;
    grid-template-columns: fit-content(50%) minmax(0, 1fr);
    column-gap: var(--abs-espace-court, 0.75rem);
    row-gap: var(--abs-espace-mince, 0.25rem);
    margin: 0;
    font-size: var(--abs-texte-menu);
    line-height: var(--abs-ligne-normale);
}

.abs-fiche-episode-fiction .abs-identifiant {
    display: contents;
}

.abs-fiche-episode-fiction .abs-identifiant dt {
    color: var(--abs-texte-doux);
    font-weight: var(--abs-graisse-forte);
    margin: 0;
}

.abs-fiche-episode-fiction .abs-identifiant dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* ========================================================================
   Bas de fiche
   ======================================================================== */

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

.abs-fiche-episode-fiction .abs-episode-voisins {
    margin-block-start: var(--abs-espace);
}

.abs-fiche-episode-fiction .abs-episode-voisins-titre {
    margin: 0 0 var(--abs-espace-court);
    font-size: var(--abs-texte-normal);
    line-height: var(--abs-ligne-serree);
}

.abs-fiche-episode-fiction .abs-episode-voisins-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-fiche-episode-fiction .abs-episode-voisin {
    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-episode-fiction .abs-episode-voisin a {
    color: var(--abs-lien);
    font-size: var(--abs-texte-menu);
}

.abs-fiche-episode-fiction .abs-episode-voisin-duree {
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-petit);
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 767.98px) {

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


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

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

    .abs-fiche-episode-fiction .abs-distribution-personnage,
    .abs-fiche-episode-fiction .abs-distribution-voix {
        flex: 1 1 100%;
    }
}

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

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

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

@media print {

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

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

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

    /*
     * L'impression pose une bordure noire explicite : la feuille imprimee ne
     * suit pas la palette d'ecran.
     */
    .abs-fiche-episode-fiction .abs-distribution-role,
    .abs-fiche-episode-fiction .abs-episode-voisin {
        border-block-end-color: #000000;
    }
}

/*
 * Le lecteur occupe sa propre section. En presentation bouton, la commande
 * est seule dans un bloc pleine largeur : elle se place au centre, aucun
 * voisin ne lui donnant d'alignement.
 */
.abs-fiche-episode-fiction .abs-fiche-lecteur {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*
 * En presentation complete, le lecteur prend toute la largeur disponible.
 */
.abs-fiche-episode-fiction .abs-fiche-lecteur > * {
    flex: 1 1 auto;
    max-inline-size: 100%;
}

.abs-fiche-episode-fiction .abs-fiche-lecteur > .gp-bouton,
.abs-fiche-episode-fiction .abs-fiche-lecteur > [data-rle-gp-profil="bouton"] {
    flex: 0 0 auto;
}

/*
 * Le retour a la fiction precede la liste des voisins et s'en detache.
 */
.abs-fiche-episode-fiction .abs-episode-retour {
    margin: 0 0 var(--abs-espace);
}

.abs-fiche-episode-fiction .abs-episode-retour-lien {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--abs-espace-court);
    color: var(--abs-lien);
    font-size: var(--abs-texte-menu);
    font-weight: var(--abs-graisse-forte);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    transition: border-color var(--abs-duree) ease;
}

.abs-fiche-episode-fiction .abs-episode-retour-lien:hover,
.abs-fiche-episode-fiction .abs-episode-retour-lien:focus-visible {
    border-color: var(--abs-accent);
}

/*
 * La commande qui revele la navigation entre les episodes prend la meme
 * forme que les autres commandes de la fiche.
 */
.abs-fiche-episode-fiction .abs-episode-navigation-bascule {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    margin-block-end: 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-episode-fiction .abs-episode-navigation-bascule:hover,
.abs-fiche-episode-fiction .abs-episode-navigation-bascule:focus-visible {
    border-color: var(--abs-accent);
}

/*
 * 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-episode-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;
}

/*
 * Listes de définitions : le motif du thème.
 *
 * La liste est une ligne qui se replie ; chaque couple s'y lit d'un trait,
 * étiquette puis valeur, et ne se coupe pas en fin de ligne : une valeur
 * détachée de son intitulé ne se rattache à rien. La valeur, elle, se replie,
 * et un nom long revient à la ligne au lieu de déborder.
 *
 * Les deux-points viennent de la feuille et non du balisage : ils relèvent de
 * la présentation, et une lecture vocale restitue déjà la relation entre le
 * terme et sa valeur.
 */

.abs-fiche-episode-fiction .abs-fiche-mentions {
    color: var(--abs-texte-doux);
    font-size: var(--abs-texte-petit);
    line-height: var(--abs-ligne-normale);
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-mince, 0.25rem) var(--abs-espace, 1.5rem);
    margin: 0 0 var(--abs-espace-court, 0.75rem);
}

.abs-fiche-episode-fiction .abs-fiche-mention {
    display: flex;
    align-items: baseline;
    gap: var(--abs-espace-mince, 0.25rem);
    white-space: nowrap;
}

.abs-fiche-episode-fiction .abs-fiche-mention dt {
    font-weight: var(--abs-graisse-forte);
    margin: 0;
}

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

.abs-fiche-episode-fiction .abs-fiche-mention dd {
    margin: 0;
    white-space: normal;
}

.abs-fiche-episode-fiction .abs-fiche-qualifications {
    font-size: var(--abs-texte-menu);
    line-height: var(--abs-ligne-normale);
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-mince, 0.25rem) var(--abs-espace, 1.5rem);
    margin: 0 0 var(--abs-espace-court, 0.75rem);
}