/* =============================================================
   Sonia Orriger — Liste et détail des articles
   ============================================================= */

.archive { padding-block: var(--e-2xl); }

.archive__entete {
    margin-bottom: var(--e-2xl);
    text-align: center;
}

.archive__titre {
    font-family: var(--f-condense);
    font-size: var(--t-titre-1);
    text-transform: uppercase;
    letter-spacing: var(--l-moyen);
}

.articles-grille {
    display: grid;
    gap: var(--e-xl);
}

@media (min-width: 640px) { .articles-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .articles-grille { grid-template-columns: repeat(3, 1fr); } }

.article-carte__lien {
    display: block;
    height: 100%;
    text-decoration: none;
}

.article-carte__image {
    margin-bottom: var(--e-md);
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: var(--c-gris-clair);
}

.article-carte__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-lente);
}

.article-carte__lien:hover .article-carte__image img { transform: scale(1.04); }

.article-carte__date {
    margin-bottom: var(--e-xs);
    font-size: var(--t-mini);
    letter-spacing: var(--l-moyen);
    text-transform: uppercase;
    color: var(--c-encre-pale);
}

.article-carte__titre {
    margin-bottom: var(--e-sm);
    font-size: var(--t-titre-3);
}

.article-carte__extrait {
    font-size: var(--t-petit);
    color: var(--c-encre-doux);
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--e-3xl);
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-sm);
}

.pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--e-sm);
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-rond);
    text-decoration: none;
}

.pagination .page-numbers.current {
    background-color: var(--c-encre);
    border-color: var(--c-encre);
    color: var(--c-blanc);
}

/* ── Article ────────────────────────────────────────────────── */
.article-single { padding-block: var(--e-2xl); }

.article-single__entete {
    margin-bottom: var(--e-xl);
    text-align: center;
}

.article-single__date {
    margin-bottom: var(--e-sm);
    font-size: var(--t-mini);
    letter-spacing: var(--l-moyen);
    text-transform: uppercase;
    color: var(--c-encre-pale);
}

.article-single__titre { font-size: var(--t-titre-1); }

.article-single__image {
    margin-bottom: var(--e-xl);
    border-radius: var(--r-md);
    overflow: hidden;
}

.article-single__pied {
    margin-top: var(--e-2xl);
    text-align: center;
}