/* ══════════════════════════════════════════════════════════════
   Listing /actualites — overrides spécifiques cards image-bg
   ══════════════════════════════════════════════════════════════
   Le layout principal (sidebar, toolbar, header, dropdown,
   pagination, filter chips, empty state) est porté par
   `zones/content.css`. Ce fichier porte la grille 2 colonnes
   et la card image-background propre aux articles.

   Pattern visuel aligné sur `.training-card` (zones/trainings.css)
   pour cohérence inter-listings.
   ══════════════════════════════════════════════════════════════ */

/* ── Grille — 1 colonne mobile, 2 colonnes ≥ 640px ── */
.content-list__grid--articles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 40em) {
    .content-list__grid--articles {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

/* ── Card article — image background + overlay sombre ── */

.article-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    /* Arrondis plus prononcés que --radius-lg (12px) pour donner du
       rythme aux cards d'actualités, alignés sur le radius des hero
       cards (`.list-hero__container` training, 1.5rem). */
    border-radius: 1.5rem;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    /* Teinte d'accent commune à tous les listings articles. Surchargeable
       à terme par PageType si on veut différencier (article/communiqué/…). */
    --article-accent: var(--color-primary, #1e40af);
    background: var(--article-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.article-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.article-card__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay teinté bleu : mix de la couleur primary avec `--color-navy` pour
   rattraper les pastels qui casseraient le contraste blanc en bas. Dégradé
   vertical pour préserver une bande du visuel visible en haut tout en
   asseyant la lisibilité du titre + tags en bas. Pattern aligné sur
   `.training-card__overlay` (zones/trainings.css) avec une teinte bleue
   uniforme au lieu d'une couleur par domaine. */
.article-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    --article-accent-tint: color-mix(
        in srgb,
        var(--article-accent) 70%,
        var(--color-navy, #0f172a)
    );
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--article-accent-tint) 35%, transparent) 0%,
        color-mix(in srgb, var(--article-accent-tint) 78%, transparent) 60%,
        color-mix(in srgb, var(--article-accent-tint) 92%, transparent) 100%
    );
    pointer-events: none;
}

.article-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
}

.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.article-card__type {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}

.article-card__date {
    text-transform: lowercase;
}

.article-card__bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.article-card__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

@media (min-width: 640px) {
    .article-card__title {
        font-size: var(--font-size-lg);
    }
}

/* Chevron en pastille blanche translucide, anime au hover. */
.article-card__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.article-card:hover .article-card__chevron {
    background: rgba(255, 255, 255, 0.35);
    transform: translateX(2px);
}

.article-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.article-card__excerpt {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    line-height: var(--line-height-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags thématiques en pills outline blanc translucide — pattern aligné
   sur `.training-card__tag` (zones/trainings.css). */
.article-card__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.article-card__tag {
    display: inline-flex;
    padding: 0.0625rem 0.5rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════════════════════
   Variant `featured` — card épinglée pleine largeur au-dessus
   de la grille. Aspect-ratio plus panoramique (21/9 desktop,
   3/2 mobile) et padding plus généreux pour donner du poids
   à l'article mis en exergue. Eyebrow « À la une » avec étoile.
   ══════════════════════════════════════════════════════════════ */

.article-card--featured {
    aspect-ratio: 3 / 2;
    margin-bottom: var(--spacing-lg);
    /* Radius encore un cran au-dessus pour appuyer le poids visuel de
       l'article épinglé (sans tomber dans la pill agressive). */
    border-radius: 1.75rem;
}

@media (min-width: 40em) {
    .article-card--featured {
        aspect-ratio: 21 / 9;
    }
}

.article-card--featured .article-card__content {
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
}

.article-card--featured .article-card__title {
    font-size: var(--font-size-xl);
    -webkit-line-clamp: 2;
}

@media (min-width: 40em) {
    .article-card--featured .article-card__title {
        font-size: var(--font-size-2xl);
    }
}

.article-card--featured .article-card__chevron {
    width: 2.25rem;
    height: 2.25rem;
}