/* B2A — Page Actualités / Le journal du club (Incrément 8)
 * Liste paginée (/actualites) + détail (/actualites/{slug}) — réutilise les
 * classes partagées (.t-display, .t-meta, .t-num, .page-section, .page-hero,
 * .tag-a, .imgph, .btn-ghost-a) de tokens.css / styles.css. */

.actu-empty {
    padding: var(--space-16) 0;
    text-align: center;
    color: var(--ink-3);
}

/* ── Article à la une ─────────────────────────────────────────────── */
.actu-featured__label {
    margin-bottom: var(--space-5);
}

.actu-featured__card {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-12);
    align-items: stretch;
    border: 1.5px solid var(--ink);
    background: var(--paper-2);
    text-decoration: none;
    color: inherit;
}

.actu-featured__image {
    position: relative;
    min-height: 400px;
}

.actu-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.actu-featured__placeholder {
    width: 100%;
    height: 100%;
}

.actu-featured__body {
    padding: var(--space-12) var(--space-12) var(--space-12) var(--space-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.actu-featured__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.actu-featured__title {
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-5);
}

.actu-featured__excerpt {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--ink-2);
    margin: 0 0 var(--space-6);
    max-width: 480px;
}

.actu-featured__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

.actu-featured__author {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.actu-featured__cta {
    color: var(--violet);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
}

/* ── Grille de cartes ─────────────────────────────────────────────── */
.actu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10) var(--space-8);
}

/* Enveloppe transparente pour la mise en page (th:each + th:replace sur des balises
   distinctes, cf. actualites.html/article-detail.html) : .article-card reste le
   véritable enfant de la grille. */
.actu-grid__item {
    display: contents;
}

.article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.article-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-card__placeholder {
    width: 100%;
    height: 100%;
}

.article-card__meta {
    margin-bottom: var(--space-2);
}

.article-card__title {
    font-size: var(--text-xl);
    margin: 0 0 var(--space-3);
    line-height: 1;
}

.article-card__excerpt {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--ink-2);
    margin: 0 0 var(--space-4);
}

.article-card__footer {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}

.article-card__author {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* ── Pagination ───────────────────────────────────────────────────── */
.actu-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1.5px solid var(--ink);
}

.actu-pagination__page.is-active {
    background: var(--ink);
    color: var(--bg);
}

/* ── Fil d'ariane (page détail) ───────────────────────────────────── */
.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

.article-breadcrumb__link {
    text-decoration: none;
}

.article-breadcrumb__sep {
    color: var(--rule-strong);
}

.article-breadcrumb__current {
    color: var(--violet);
}

/* ── En-tête article (page détail) ────────────────────────────────── */
.article-header {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) var(--space-8);
    text-align: center;
}

.article-header__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.article-header__title {
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-6);
    text-wrap: balance;
}

.article-header__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--ink-2);
    margin: 0 auto var(--space-8);
    max-width: 680px;
}

.article-header__author {
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    display: inline-flex;
}

.article-header__author-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* ── Image de couverture ──────────────────────────────────────────── */
.article-cover {
    max-width: 1100px;
    margin: 0 auto var(--space-2);
    padding: 0 var(--space-6);
}

.article-cover img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    display: block;
}

.article-cover__caption {
    margin-top: var(--space-3);
    color: var(--ink-3);
}

/* ── Corps de l'article (HTML sanitizé) ───────────────────────────── */
.article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) 0;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.article-body h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    font-size: var(--text-2xl);
    margin: var(--space-10) 0 var(--space-3);
}

.article-body h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    font-size: var(--text-xl);
    margin: var(--space-8) 0 var(--space-3);
}

.article-body p {
    margin: 0 0 var(--space-5);
}

.article-body ul, .article-body ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-6);
}

.article-body img {
    width: 100%;
    display: block;
    margin: var(--space-8) 0;
}

.article-body blockquote {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--violet);
    padding: var(--space-6) var(--space-8);
    margin: var(--space-8) 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.article-body hr {
    border: none;
    border-top: 1.5px solid var(--rule-strong);
    margin: var(--space-8) 0;
}

.article-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--paper-3);
    padding: 2px 6px;
}

/* ── À lire ensuite ───────────────────────────────────────────────── */
.article-related {
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
    margin-top: var(--space-16);
}

.article-related__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.article-related__title {
    font-size: var(--text-3xl);
    margin: 0;
}

@media (max-width: 900px) {
    .actu-featured__card {
        grid-template-columns: 1fr;
    }

    .actu-featured__image {
        min-height: 260px;
    }

    .actu-featured__body {
        padding: var(--space-8);
    }

    .actu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .actu-grid {
        grid-template-columns: 1fr;
    }

    .article-header__title {
        font-size: var(--text-3xl);
    }
}