/*
 * Section Actualités — Figma node 2644:70240.
 *
 * Cadrage de la maquette : gap 24 entre filtres, grille et pagination, sur la largeur de
 * contenu. La grille tient quatre fiches de 348,5 séparées de 32 : 4 x 348,5 + 3 x 32 = 1490.
 * Fiche de 420 de haut : cadre 1px, rayon 4, padding 16, visuel de 148, gap 24.
 */

.section-news-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--section-space);
}

.section-news-list__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    width: min(884px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.section-news-list__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary);
}

.section-news-list__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-950);
}

.section-news-list__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
}

/* ---- Filtres ---- */

/*
 * Même composant Filter du design system que « Notre équipe » — Figma node 2288:27217. Les
 * règles sont redites ici plutôt que mutualisées : deux sections partagent le comportement (le
 * partial « filtered-grid »), pas leur habillage, et un jour l'une des deux changera de couleur
 * sans l'autre. Le jour où un troisième besoin identique arrive, ce sera le moment d'en faire
 * un partial de pastille.
 */
.section-news-list__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-news-list__filter {
    position: relative;
    display: flex;
    gap: var(--space-compact);
    align-items: center;
    justify-content: center;
    padding: var(--space-micro) var(--space-m);
    border-radius: var(--radius-full);
    background-color: var(--color-primary-alpha-10);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-600);
    text-decoration: none;
    transition: background-color 140ms ease-out, color 140ms ease-out;
}

/* Cible de 44px sur une pastille de 34, sans grossir le dessin. */
.section-news-list__filter::after {
    content: "";
    position: absolute;
    inset-block: -5px;
    inset-inline: 0;
}

.section-news-list__filter:hover,
.section-news-list__filter:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-primary-50);
}

.section-news-list__filter--active {
    padding-left: var(--space-compact);
    background-color: var(--color-primary);
    color: var(--color-primary-50);
}

.section-news-list__filter--active:hover,
.section-news-list__filter--active:focus-visible {
    background-color: var(--color-primary-900);
}

/* Rendue sur chaque pastille, montrée sur l'active seulement : le moteur commun n'a alors
   aucune balise à créer ni à détruire. */
.section-news-list__filter-cross {
    display: none;
    position: relative;
    width: 5px;
    height: 5px;
    flex-shrink: 0;
}

.section-news-list__filter--active .section-news-list__filter-cross {
    display: block;
}

.section-news-list__filter-cross::before,
.section-news-list__filter-cross::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: 50%;
    width: 1px;
    background-color: currentColor;
}

.section-news-list__filter-cross::before {
    transform: rotate(45deg);
}

.section-news-list__filter-cross::after {
    transform: rotate(-45deg);
}

/* ---- Résultats ---- */

.section-news-list__results {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
}

.section-news-list__grid {
    display: grid;
    /* Quatre colonnes de 348,5. Le minimum est la largeur réelle de la fiche : plus petit, il
       resterait la place d'une cinquième colonne dans les 1490 du conteneur. La grille se
       réorganise ensuite d'elle-même en 3 puis 2 colonnes. */
    grid-template-columns: repeat(auto-fill, minmax(min(348px, 100%), 1fr));
    gap: var(--space-bloc);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-news-list__item {
    display: flex;
    animation: bel-news-in 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Décalage par rang, sans JavaScript : huit fiches par page, donc sept règles. */
.section-news-list__item:nth-child(2) { animation-delay: 25ms; }
.section-news-list__item:nth-child(3) { animation-delay: 50ms; }
.section-news-list__item:nth-child(4) { animation-delay: 75ms; }
.section-news-list__item:nth-child(5) { animation-delay: 100ms; }
.section-news-list__item:nth-child(6) { animation-delay: 125ms; }
.section-news-list__item:nth-child(7) { animation-delay: 150ms; }
.section-news-list__item:nth-child(8) { animation-delay: 175ms; }

@keyframes bel-news-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-news-list__item {
        animation: none;
    }
}

/* ---- Une fiche ---- */

.section-news-list__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    width: 100%;
    padding: var(--space-m);
    border: 1px solid var(--color-neutral-700);
    border-radius: var(--radius-xxs);
    transition: border-color 140ms ease-out, background-color 140ms ease-out;
}

/*
 * La fiche entière réagit : trait, fond, visuel et bouton (celui-ci par data-button-hover,
 * voir le CSS de l'atome). :hover / :focus-within sur la fiche plutôt qu'un :has() sur le
 * lien — même résultat, et c'est la formulation que comprennent aussi les navigateurs sans
 * :has().
 */
.section-news-list__card:hover,
.section-news-list__card:focus-within {
    border-color: var(--color-primary);
    background-color: var(--color-primary-alpha-10);
}

.section-news-list__media img {
    transition: transform var(--hover-dur) var(--hover-ease);
}

.section-news-list__card:hover .section-news-list__media img,
.section-news-list__card:focus-within .section-news-list__media img {
    transform: scale(1.03);
}

.section-news-list__media {
    /* 316,5 x 148 dans la maquette. En rapport plutôt qu'en hauteur fixe, le visuel suit la
       largeur que la grille donne à la fiche. min-height à 0 : sans lui, la hauteur intrinsèque
       de l'image l'emporterait sur le rapport. */
    aspect-ratio: 316.5 / 148;
    min-height: 0;
    flex: none;
    overflow: hidden;
    border-radius: var(--radius-xxxs);
}

.section-news-list__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-news-list__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    /* Pousse le pied de fiche en bas : les dates et les boutons s'alignent d'une fiche à
       l'autre même quand les titres n'ont pas le même nombre de lignes. */
    flex: 1 1 auto;
}

.section-news-list__card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    /* Regular dans la maquette : ce n'est pas un titre de section. */
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-neutral-900);
}

.section-news-list__link {
    color: inherit;
    text-decoration: none;
}

/*
 * Zone cliquable étendue à toute la fiche depuis le lien du titre. C'est ce qui permet de
 * n'avoir QU'UN lien par fiche tout en gardant la fiche entière cliquable.
 */
.section-news-list__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.section-news-list__excerpt {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-600);
}

.section-news-list__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    flex: none;
}

/* La date et le temps de lecture viennent du partial « news-meta », qui n'impose aucune couleur :
   ici la fiche est sur fond clair. */
.section-news-list__footer .news-meta {
    color: var(--color-neutral-900);
}

.section-news-list__footer .news-meta__item {
    white-space: nowrap;
}

/* « Lire l'article » : l'atome bouton en « span » (Primary / sm / Plain). Son apparence est
   déclarée une seule fois, dans le partial — le commentaire précédent disait que l'atome ne
   pouvait pas servir parce qu'il rendait un <a> ; il sait rendre un span depuis. */
/*
 * ET IL LAISSE PASSER LES CLICS.
 *
 * L'atome est en position: relative, donc peint APRÈS le pseudo-élément qui étend la zone
 * cliquable du titre — il se retrouve par-dessus et avalait les clics sur cette partie de la
 * carte, qui ne menaient alors nulle part. Le libellé fait main d'avant, non positionné, ne
 * posait pas le problème. Il n'est de toute façon pas interactif : pointer-events: none le
 * rend transparent au pointeur, et la carte redevient cliquable de bout en bout.
 */
.section-news-list__footer .button {
    flex: none;
    pointer-events: none;
}

.section-news-list__empty {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
}

/* ---- Pagination ---- */

.section-news-list__pagination-list {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-news-list__pagination-list a,
.section-news-list__pagination-list span {
    /* Trait toujours présent, transparent au repos : une couleur s'anime, un text-decoration non. */
    text-decoration: underline;
    text-decoration-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px de cible tactile, alors que la maquette ne montre qu'un chiffre : le carré est
       transparent, seul le chiffre se voit. */
    min-width: 44px;
    min-height: 44px;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
}

.section-news-list__pagination-list a:hover,
.section-news-list__pagination-list a:focus-visible {
    color: var(--color-primary);
    text-decoration-color: currentColor;
}

.section-news-list__pagination-list .current {
    color: var(--color-primary);
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-news-list {
        --container-gutter: var(--space-bloc);
        gap: var(--space-large);
        padding-block: var(--section-space);
    }
}

@media (max-width: 768px) {
    .section-news-list {
        --container-gutter: var(--space-m);
    }

    .section-news-list__grid {
        /* Deux colonnes tenues jusqu'en bas : une fiche pleine largeur donnerait un visuel de
           148 étiré sur tout l'écran. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-m);
    }

    .section-news-list__card {
        gap: var(--space-s);
        padding: var(--space-s);
    }

    .section-news-list__footer {
        /* Les métadonnées et le libellé ne tiennent plus côte à côte dans une demi-largeur. */
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-compact);
    }

    .section-news-list__pagination-list {
        justify-content: center;
    }
}