/*
 * Fichier : abs-nouveautes.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Présente le bloc de nouveautés de la page d'accueil : titre, barre
 * d'onglets, mise en avant et grille de chaque panneau.
 *
 * Cloisonnement :
 *   Chaque règle est portée par le conteneur du bloc. Les domaines du plugin
 *   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.
 *
 * Largeur et centrage :
 *   Le bloc porte sa propre largeur maximale et se centre dans l'espace qui
 *   lui est laissé. Il occupe ainsi la même colonne que le contenu de la page,
 *   y compris sur un modèle qui s'étend sur toute la largeur.
 *
 *   La largeur reprend celle du thème lorsqu'elle est déclarée, et retombe sur
 *   une valeur propre en son absence.
 *
 * 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 le bloc reste lisible.
 *
 * Onglets :
 *   La barre est masquée tant que le script ne la 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.
 *
 *   L'onglet actif se distingue par sa bordure et sa graisse, non par sa seule
 *   couleur.
 *
 * Mise en avant :
 *   Elle se distingue de la grille par son cadre : elle présente un contenu
 *   seul, là où la grille en aligne plusieurs.
 *
 *   Le titre qui nomme la région porte les marques d'un surtitre : petite
 *   taille, majuscules espacées, couleur atténuée. Il nomme sans disputer son
 *   rang au titre du contenu, qui le suit.
 *
 *   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 texte hors de vue.
 *
 *   Sur un écran étroit, la couverture passe au-dessus du texte.
 *
 * Personnes créditées :
 *   Une ligne par rôle, sous sa propre formulation. La liste ne porte pas de
 *   puce : les rôles se lisent comme des mentions, non comme une énumération
 *   de points.
 *
 *   Le libellé se distingue des noms par sa graisse. Les noms se suivent dans
 *   le fil du texte, sans mise en forme qui les détache.
 *
 * Grille :
 *   Le nombre de colonnes vient des réglages, posé par le gabarit. Les écrans
 *   étroits le réduisent d'eux-mêmes.
 *
 *   Les cartes reprennent la présentation des grilles du plugin. Chaque
 *   domaine porte les siennes dans sa propre feuille, et le bloc porte les
 *   siennes : les feuilles restent indépendantes.
 *
 * 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.
 *
 * @package AB_Story_Reader
 */


/* =========================================================================
   Conteneur
   ========================================================================= */

.abs-nouveautes {
    --abs-espace: 1.5rem;
    --abs-espace-court: 0.75rem;
    --abs-rayon: 6px;
    --abs-colonnes: 3;
    --abs-couverture: 20rem;
    --abs-largeur: var(--discovery-content-max, 75rem);

    --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, #f5f5f5);
    --abs-bordure: var(--discovery-color-border, #cccccc);
    --abs-lien: var(--discovery-color-link, #0b5394);
    --abs-lien-survol: var(--discovery-color-link-hover, #073763);
    --abs-accent: var(--discovery-color-accent, #0b5394);

    /*
     * Le bloc porte sa propre largeur et se centre : il occupe la même
     * colonne que le contenu de la page, y compris sur un modèle qui
     * s'étend sur toute la largeur.
     */
    max-inline-size: var(--abs-largeur);
    margin-block: calc(var(--abs-espace) * 2) 0;
    margin-inline: auto;
    color: var(--abs-texte);
}

.abs-nouveautes-titre {
    margin-block: 0 var(--abs-espace);
}


/* =========================================================================
   Onglets
   ========================================================================= */

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

.abs-nouveautes-onglet {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 1rem;
    border: 1px solid transparent;
    border-block-end: 0;
    border-radius: var(--abs-rayon) var(--abs-rayon) 0 0;
    background-color: transparent;
    color: var(--abs-attenue);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.abs-nouveautes-onglet:hover {
    background-color: var(--abs-surface);
    color: var(--abs-texte);
}

/*
 * L'onglet actif se distingue par sa bordure et sa graisse, non par sa seule
 * couleur : une distinction portée par la couleur seule échappe à qui ne la
 * perçoit pas.
 */
.abs-nouveautes-onglet[aria-selected="true"] {
    border-color: var(--abs-bordure);
    background-color: var(--abs-fond);
    color: var(--abs-texte);
    font-weight: 600;
    margin-block-end: -1px;
    padding-block-end: 1px;
}


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

.abs-nouveautes-panneau {
    margin-block-end: calc(var(--abs-espace) * 2);
}

.abs-nouveautes-panneau:last-child {
    margin-block-end: 0;
}

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

/*
 * Sous onglets, le titre du panneau est retiré de l'affichage sans quitter le
 * document : l'onglet le porte déjà.
 */
.abs-nouveautes-onglets-actifs .abs-nouveautes-panneau-titre {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.abs-nouveautes-onglets-actifs .abs-nouveautes-panneau[hidden] {
    display: none;
}


/* =========================================================================
   Mise en avant
   ========================================================================= */

/*
 * La mise en avant se distingue de la grille par son cadre : elle présente un
 * contenu seul, là où la grille en aligne plusieurs.
 */
.abs-nouveautes .abs-avant {
    margin-block-end: calc(var(--abs-espace) * 1.5);
    padding: var(--abs-espace);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
}

/*
 * Le titre de la région dit ce que le contenu est. Ses marges et sa taille
 * par défaut sont reprises : il nomme la région sans disputer son rang au
 * titre du contenu, qui le suit.
 */
.abs-nouveautes .abs-avant-surtitre {
    margin-block: 0 var(--abs-espace-court);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--abs-attenue);
}

.abs-nouveautes .abs-avant-corps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace);
    align-items: flex-start;
}

.abs-nouveautes .abs-avant-image {
    flex: 0 0 min(var(--abs-couverture), 100%);
}

.abs-nouveautes .abs-avant-couverture {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--abs-rayon);
}

.abs-nouveautes .abs-avant-texte {
    flex: 1 1 20rem;
    min-inline-size: 0;
}

/*
 * Le titre du contenu porte la taille qui convient à son rang dans la mise en
 * avant, non celle que son niveau lui donne : il vient après un titre de
 * région, dont le niveau est plus haut mais la présentation plus discrète.
 */
.abs-nouveautes .abs-avant-titre {
    margin-block: 0 var(--abs-espace-court);
    font-size: 1.35rem;
    line-height: 1.3;
}

.abs-nouveautes .abs-avant-titre a {
    color: var(--abs-texte);
    text-decoration: none;
}

.abs-nouveautes .abs-avant-titre a:hover,
.abs-nouveautes .abs-avant-titre a:focus-visible {
    color: var(--abs-lien-survol);
    text-decoration: underline;
}


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

/*
 * Chaque rôle occupe une ligne, sous sa propre formulation. La liste ne porte
 * pas de puce : les rôles se lisent comme des mentions, non comme une
 * énumération de points.
 */
.abs-nouveautes .abs-avant-personnes {
    margin-block: 0 var(--abs-espace-court);
    padding: 0;
    list-style: none;
}

.abs-nouveautes .abs-avant-role {
    margin-block-end: 0.15rem;
    font-size: 0.9375rem;
    color: var(--abs-attenue);
}

.abs-nouveautes .abs-avant-role:last-child {
    margin-block-end: 0;
}

.abs-nouveautes .abs-avant-role-libelle {
    font-weight: 500;
}

.abs-nouveautes .abs-avant-role a {
    color: var(--abs-lien);
    text-decoration: none;
}

.abs-nouveautes .abs-avant-role a:hover,
.abs-nouveautes .abs-avant-role a:focus-visible {
    color: var(--abs-lien-survol);
    text-decoration: underline;
}


/* =========================================================================
   Résumé et actions
   ========================================================================= */

.abs-nouveautes .abs-avant-resume {
    margin-block: 0 var(--abs-espace);
    max-inline-size: 60ch;
    line-height: 1.6;
}

.abs-nouveautes .abs-avant-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abs-espace-court);
    margin: 0;
}

.abs-nouveautes .abs-bouton {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 1.15rem;
    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-nouveautes .abs-bouton:hover,
.abs-nouveautes .abs-bouton:focus-visible {
    background-color: var(--abs-surface);
    border-color: var(--abs-texte);
}


/* =========================================================================
   Grille
   ========================================================================= */

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


/* =========================================================================
   Cartes
   ========================================================================= */

.abs-nouveautes .abs-carte {
    display: flex;
}

.abs-nouveautes .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-nouveautes .abs-carte-lien:hover,
.abs-nouveautes .abs-carte-lien:focus-visible {
    border-color: var(--abs-accent);
    transform: translateY(-2px);
}

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

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

.abs-nouveautes .abs-carte-texte {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--abs-espace-court);
}

/*
 * Le titre d'une carte tient un rôle de repère dans le document, non de titre
 * de section : ses marges et sa taille par défaut sont reprises.
 */
.abs-nouveautes .abs-carte-titre {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

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

.abs-nouveautes .abs-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--abs-attenue);
}


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

@media (max-width: 1024px) {

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

@media (max-width: 768px) {

    .abs-nouveautes {
        --abs-couverture: 100%;
    }

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

    .abs-nouveautes .abs-avant-image {
        flex-basis: 100%;
        max-inline-size: 20rem;
    }
}

@media (max-width: 480px) {

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

    .abs-nouveautes .abs-avant-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .abs-nouveautes .abs-bouton {
        justify-content: center;
    }
}


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

@media (prefers-contrast: more) {

    .abs-nouveautes .abs-nouveautes-onglets {
        border-block-end-width: 2px;
    }

    .abs-nouveautes .abs-nouveautes-onglet[aria-selected="true"] {
        border-width: 2px;
    }

    .abs-nouveautes .abs-bouton {
        border-width: 2px;
    }

    .abs-nouveautes .abs-nouveautes-onglet:hover {
        background-color: transparent;
        text-decoration: underline;
    }
}

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

    .abs-nouveautes .abs-nouveautes-onglet,
    .abs-nouveautes .abs-bouton {
        transition: none;
    }
}


/* =========================================================================
   Impression
   ========================================================================= */

@media print {

    .abs-nouveautes .abs-nouveautes-onglets,
    .abs-nouveautes .abs-avant-actions {
        display: none;
    }

    .abs-nouveautes .abs-nouveautes-panneau[hidden] {
        display: block;
    }

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