/*
 * Section Dernières actualités — Figma node 2644:67557.
 *
 * Cadrage de la maquette : panneau sur toute la largeur du conteneur (1792), padding
 * vertical 96, écart de 55 entre l'en-tête et les cartes. En-tête et cartes sur la colonne
 * de contenu (1490), le bloc de titre bridé à 884 avec le bouton en vis-à-vis.
 */

.section-last-news {
    padding-block: var(--section-space);
}

.section-last-news__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 55px dans la maquette : entre --space-xl (48) et --space-page (56), sans token exact. */
    gap: 55px;
    width: min(var(--container-max-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    /* Le padding horizontal ne joue que sur écran étroit : à pleine largeur, la colonne de
       contenu (1490) est déjà en retrait de 151 dans le panneau. */
    padding: var(--space-big-hero) var(--space-bloc);
    border-radius: var(--radius-xxs);
    background-color: var(--color-primary);
}

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

.section-last-news__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-bloc);
    width: min(var(--container-content-width), 100%);
}

.section-last-news__intro-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 884 dans la maquette. */
    max-width: 884px;
}

.section-last-news__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-50);
}

.section-last-news__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-100);
}

/* ---- Grille de cartes ---- */

.section-last-news__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-bloc);
    width: min(var(--container-content-width), 100%);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-last-news__item {
    /* Cartes à parts égales, comme l'auto-layout de la maquette. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

/* Une seule actualité : la carte garde la largeur d'un tiers de colonne au lieu de s'étirer
   sur toute la ligne, où l'image devenait démesurée. Au-dessus du mobile seulement, où les
   cartes sont de toute façon empilées pleine largeur. */
@media (min-width: 769px) {
    .section-last-news__item:only-child {
        flex: 0 1 calc((100% - 2 * var(--space-bloc)) / 3);
    }
}

.section-last-news__card {
    /* Ancre du lien étendu ci-dessous : aucun autre élément de la carte ne doit être
       positionné, sinon le pseudo-élément se recalerait sur lui. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-list);
    width: 100%;
    padding: var(--space-m);
    border: 1px solid var(--color-primary-300);
    border-radius: var(--radius-xxs);
    transition:
        border-color var(--hover-dur) var(--hover-ease),
        background-color var(--hover-dur) var(--hover-ease);
}

/*
 * TOUTE LA CARTE RÉAGIT — le trait s'éclaircit, le fond s'éclaire à peine, le titre se
 * souligne, le visuel avance d'un cheveu et le bouton entre dans son état de survol (celui-ci
 * par data-button-hover, voir le CSS de l'atome). Rien de plus : c'est une carte, pas un jeu
 * de lumière.
 *
 * :focus-within en plus de :hover : au clavier, la prise de focus sur le lien du titre donne
 * exactement le même retour.
 */
.section-last-news__card:hover,
.section-last-news__card:focus-within {
    border-color: var(--color-neutral-50);
    background-color: var(--color-neutral-alpha-10);
}

.section-last-news__media {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xxs);
}

.section-last-news__image {
    width: 100%;
    /*
     * 148 de haut dans la maquette, pour une largeur DE CONTENU de 317 : les quatre cartes
     * se partagent 1490 moins trois écarts de 32, soit 348,5 chacune, dont il faut retirer
     * les 16 de padding de chaque côté. Le ratio se prend donc sur 317, pas sur 348 —
     * sinon l'image tombe à 136 au lieu de 148.
     */
    aspect-ratio: 317 / 148;
    object-fit: cover;
}

.section-last-news__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    width: 100%;
    /* Pousse le pied de carte en bas, pour que les pieds s'alignent d'une carte à l'autre
       quand les titres n'ont pas le même nombre de lignes. */
    flex: 1 0 auto;
}

.section-last-news__card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 400;
    line-height: var(--line-height-heading);
    color: var(--color-neutral-50);
}

.section-last-news__link {
    /* Trait toujours présent, transparent au repos : une couleur s'anime, un text-decoration non. */
    text-decoration: underline;
    text-decoration-color: transparent;
}

/*
 * Zone cliquable étendue à toute la carte : un seul lien dans le DOM, mais la carte entière
 * réagit au clic. C'est ce qui permet au « Lire l'article » de rester un simple libellé
 * plutôt qu'un second lien vers la même destination.
 */
.section-last-news__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xxs);
}

.section-last-news__card:hover .section-last-news__link,
.section-last-news__card:focus-within .section-last-news__link {
    text-decoration-color: currentColor;
}

/* Le visuel avance très légèrement. overflow: hidden est déjà sur .__media, rien ne dépasse. */
.section-last-news__image {
    transition: transform var(--hover-dur) var(--hover-ease);
}

.section-last-news__card:hover .section-last-news__image,
.section-last-news__card:focus-within .section-last-news__image {
    transform: scale(1.03);
}

.section-last-news__excerpt {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-200);
}

/* ---- Pied de carte ---- */

.section-last-news__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    width: 100%;
}

/* La date et le temps de lecture viennent du partial « news-meta ». Il n'impose aucune couleur :
   ici, la carte est sur fond bleu foncé. */
.section-last-news__footer .news-meta {
    color: var(--color-text-invert);
}

/* Reprend l'aspect du bouton Primary / sm / Invert sans en être un : la carte entière est
   le lien, ce libellé n'a donc pas à être interactif. */
/*
 * 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.
 */
/* Le « Lire l'article » est l'atome bouton (Primary / sm / Invert) : son apparence est
   déclarée une seule fois, dans le partial. Il ne reste qu'à l'empêcher d'être compressé. */
.section-last-news__footer .button {
    flex: none;
    pointer-events: none;
}

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

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

    .section-last-news__panel {
        gap: var(--space-xl);
        padding-block: var(--space-large);
    }

    .section-last-news__list {
        flex-wrap: wrap;
    }

    /* Deux cartes par rangée : quatre deviendraient illisibles. */
    .section-last-news__item {
        flex: 1 1 280px;
    }
}

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

    .section-last-news__panel {
        padding-inline: var(--space-m);
    }

    .section-last-news__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-list);
    }

    .section-last-news__item {
        flex-basis: 100%;
    }
}