/* ══════════════════════════════════════════════════════════════
   Newsletter — Archive + minisite consultation
   ══════════════════════════════════════════════════════════════
   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 newsletters, alignée
   visuellement sur `zones/articles.css` (actualités).
   ══════════════════════════════════════════════════════════════ */

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

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

/* ── Card édition — image background + overlay teinté ── */
.newsletter-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 1.5rem;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    --newsletter-accent: var(--color-primary, #1e40af);
    background: var(--newsletter-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

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

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

/* Overlay : dégradé bleu/navy aligné sur `.article-card__overlay`,
   un peu plus présent quand la card n'a pas d'image (rendu plein
   accent) pour préserver le contraste blanc en bas. */
.newsletter-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    --newsletter-accent-tint: color-mix(
        in srgb,
        var(--newsletter-accent) 70%,
        var(--color-navy, #0f172a)
    );
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--newsletter-accent-tint) 35%, transparent) 0%,
        color-mix(in srgb, var(--newsletter-accent-tint) 78%, transparent) 60%,
        color-mix(in srgb, var(--newsletter-accent-tint) 92%, transparent) 100%
    );
    pointer-events: none;
}

.newsletter-card--plain .newsletter-card__overlay {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--newsletter-accent-tint) 70%, transparent) 0%,
        color-mix(in srgb, var(--newsletter-accent-tint) 95%, transparent) 100%
    );
}

.newsletter-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);
}

.newsletter-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);
}

.newsletter-card__number {
    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);
}

/* Badge de type d'édition (newsletter, communiqué…) — pastille pleine
   pour le distinguer du numéro translucide. */
.newsletter-card__type {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    background: #fff;
    color: #1e293b;
    font-weight: 700;
}

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

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

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

.newsletter-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;
}

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

.newsletter-card__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.newsletter-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);
}

/* Termes de taxonomie sur la carte : plus discrets que les thématiques
   (classification éditoriale), contour léger plutôt que fond plein. */
.newsletter-card__tag--term {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.newsletter-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;
}

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

/* ══════════════════════════════════════════════════════════════
   Card CTA inscription, rendue sous la grille
   ══════════════════════════════════════════════════════════════ */
.newsletter-cta {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    background: var(--color-primary-light, #eff6ff);
    border-radius: 1.5rem;
}

.newsletter-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: var(--color-primary, #1e40af);
    color: #fff;
}

.newsletter-cta__body {
    flex: 1;
    min-width: 0;
}

.newsletter-cta__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.newsletter-cta__text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-base);
}

.newsletter-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 47.9375em) {
    .newsletter-cta {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-lg);
    }

    .newsletter-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* Filtre par année */
.nl-list__years {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.nl-list__year-link {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 100px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

.nl-list__year-link:hover { color: var(--color-text); background: var(--color-bg-light); }

.nl-list__year-link--active {
    color: #fff;
    background: var(--color-navy);
    font-weight: 600;
}

.nl-list__year-link--active:hover { color: #fff; background: var(--color-navy); }

.nl-list__year-count { font-weight: 400; opacity: 0.7; }

/* En-tête colonnes (desktop) */
.nl-list__table-header {
    display: none;
}

@media (min-width: 48em) {
    .nl-list__table-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-light);
        border-bottom: 2px solid var(--color-border);
    }
}

/* Tableau */
.nl-list__table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 48em) {
    .nl-list__table { border-top: none; }
}

.nl-list__row {
    border-bottom: 1px solid var(--color-border);
}

.nl-list__row:last-child { border-bottom: none; }

.nl-list__row-link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.nl-list__row-link:hover { background: var(--color-bg-light); }

@media (min-width: 48em) {
    .nl-list__row-link {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
    }
}

/* Colonnes */
.nl-list__col-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    white-space: nowrap;
}

@media (min-width: 48em) {
    .nl-list__col-date { flex: 0 0 8rem; }
}

.nl-list__col-number {
    flex-shrink: 0;
}

@media (min-width: 48em) {
    .nl-list__col-number { flex: 0 0 3.5rem; }
}

.nl-list__badge {
    display: inline-flex;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.nl-list__col-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.nl-list__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}

.nl-list__row-link:hover .nl-list__title { color: var(--color-navy); }

.nl-list__excerpt {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nl-list__col-arrow {
    flex-shrink: 0;
    color: var(--color-text-light);
    transition: color 0.15s ease, transform 0.15s ease;
}

.nl-list__row-link:hover .nl-list__col-arrow {
    color: var(--color-navy);
    transform: translateX(2px);
}

/* Mobile : date + numéro sur une ligne, titre en dessous */
@media (max-width: 47.9375em) {
    .nl-list__row-link {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0 var(--spacing-sm);
        align-items: center;
    }

    .nl-list__col-date { grid-column: 1; grid-row: 1; }
    .nl-list__col-number { grid-column: 2; grid-row: 1; }
    .nl-list__col-arrow { grid-column: 4; grid-row: 1 / 3; }

    .nl-list__col-title {
        grid-column: 1 / 4;
        grid-row: 2;
        margin-top: var(--spacing-xs);
    }

    .nl-list__excerpt { display: none; }
}

/* Minisite header — barre sticky blanche */
.nl-minisite-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary-dark) 100%);
}

/* Compenser la hauteur de la barre fixe */
.nl-minisite-header {
    padding-top: 3rem;
}

.nl-minisite-header__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-minisite-header__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
}

.nl-minisite-header__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.15s ease;
}

.nl-minisite-header__back:hover { color: #fff; }

.nl-minisite-header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Boutons partage/imprimer en topbar : pastille carrée arrondie légère
   sur fond gradient navy. Texte blanc translucide qui s'éclaire au
   survol. Aligné event minisite. Trois groupes séparés visuellement :
   partage social · impression · bookmark. */
.nl-minisite-header__actions .list-hero__share-buttons {
    gap: 0.25rem;
}

.nl-minisite-header__actions .list-hero__share-buttons .share-buttons__btn--print,
.nl-minisite-header__actions .list-hero__share-buttons .share-buttons__btn--bookmark {
    margin-left: 0.5rem;
}

.nl-minisite-header__actions .list-hero__share-buttons .share-buttons__btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.4375rem;
    opacity: 1;
}

.nl-minisite-header__actions .list-hero__share-buttons .share-buttons__btn:hover,
.nl-minisite-header__actions .list-hero__share-buttons .share-buttons__btn:focus-visible,
.nl-minisite-header__actions .list-hero__share-buttons .share-buttons__btn--active {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

/* Bookmark actif : vert ANCESU institutionnel + pastille assortie.
   Aligné event minisite. */
.nl-minisite-header__actions .list-hero__share-buttons .share-buttons__btn--bookmark.share-buttons__btn--active {
    color: var(--color-section-ancesu);
    background: rgba(174, 189, 21, 0.22);
}

/* ══════════════════════════════════════════════════════════════
   Newsletter — fiche publique (mini-site dédié)
   ══════════════════════════════════════════════════════════════
   Hero card avec image de couverture en background + fallback
   gradient navy, logo ANCESU + eyebrow thématiques + titre + date.
   Layout body à gauche, sommaire repliable à droite.
   ══════════════════════════════════════════════════════════════ */

/* Section qui pousse le hero card sous la topbar fixe. Le `.container`
   parent gère les gutters horizontaux, ne pas redoubler le padding.
   Padding-bottom calé sur `padding-top` de `.nl-show__content` pour
   un rythme visuel régulier (hero → contenu = même gap que contenu
   → CTA = même gap que CTA → footer = `--spacing-lg + --spacing-lg`
   ou `--spacing-2xl`). */
.nl-show-hero-section {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}

/* Hero card : arrondi sans bordure, fond gradient navy par défaut,
   image de couverture en background quand `--has-image`. */
.nl-show-hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary-dark) 100%);
    isolation: isolate;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nl-show-hero__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: inherit;
}

/* Overlay teinté navy/primary pour la lisibilité du texte par-dessus
   l'image de couverture. Aligné sur le pattern hero card listings. */
.nl-show-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-navy) 75%, transparent) 0%,
        color-mix(in srgb, var(--color-primary-dark) 80%, transparent) 100%
    );
    pointer-events: none;
}

.nl-show-hero:not(.nl-show-hero--has-image) .nl-show-hero__overlay {
    display: none;
}

.nl-show-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
}

@media (min-width: 48em) {
    .nl-show-hero__inner {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: var(--spacing-2xl) var(--spacing-2xl);
    }
}

.nl-show-hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.nl-show-hero__logo img {
    width: 7rem;
    height: auto;
}

@media (min-width: 48em) {
    .nl-show-hero__logo { width: 10rem; height: 10rem; }
    .nl-show-hero__logo img { width: 9rem; }
}

.nl-show-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

/* Eyebrow ligne meta : date + numero d'edition. Texte simple
   blanc semi-transparent, capitales pour bien ressortir comme
   meta surplombante au-dessus du titre. */
.nl-show-hero__eyebrow {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

@media (min-width: 48em) {
    .nl-show-hero__eyebrow { justify-content: flex-start; }
}

.nl-show-hero__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

@media (min-width: 48em) {
    .nl-show-hero__title { font-size: 2.25rem; }
}

@media (min-width: 64em) {
    .nl-show-hero__title { font-size: 2.5rem; }
}

/* Chapeau editorial sous le titre — typo plus douce, opacite legere
   pour rester subordonne au titre. Limite a 60 caracteres environ
   pour rester lisible et ne pas concurrencer le titre. */
.nl-show-hero__excerpt {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    max-width: 48ch;
}

/* Liste des thematiques sous le chapeau — pills cliquables qui
   redirigent vers l'archive `/newsletters?theme={slug}`. Le
   `.nl-show-hero__topic` etait deja stylise en pills, je conserve
   le pattern et l'augmente d'un hover. */
.nl-show-hero__topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
}

@media (min-width: 48em) {
    .nl-show-hero__topics { justify-content: flex-start; }
}

.nl-show-hero__topic {
    display: inline-flex;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(4px);
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.nl-show-hero__topic:hover,
.nl-show-hero__topic:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.nl-show-hero__sep {
    opacity: 0.6;
}

/* Badge de type dans l'eyebrow — pastille pleine pour le distinguer du
   reste de la ligne (date, numéro). */
.nl-show-hero__type {
    display: inline-flex;
    padding: 0.0625rem 0.5rem;
    border-radius: 100px;
    background: #fff;
    color: #1e293b;
    font-weight: 700;
}

/* Termes de taxonomie : mêmes pills que les thématiques mais non
   cliquables et plus discrets (classification, pas filtre). */
.nl-show-hero__term {
    background: rgba(255, 255, 255, 0.1);
    text-transform: none;
    letter-spacing: 0;
    cursor: default;
}

/* Section contenu (sous le hero). Rythme symétrique : padding-top
   identique au padding-bottom de `.nl-show-hero-section` pour un gap
   harmonisé hero/contenu. Padding-bottom à 0 car le footer porte déjà
   un `margin-top: --spacing-3xl` qui crée l'espace CTA/footer ; le
   doubler donnerait un gap deux fois plus grand que les autres. */
.nl-show__content {
    padding: var(--spacing-lg) 0 0;
}

/* Layout body + TOC repliable à droite. La TOC repliée passe à
   `2.5rem` (card verticale comme la sidebar filtres) ; sinon `15rem`.
   Le `grid-template-columns` est animé : quand l'aside se replie, la
   colonne du body s'élargit progressivement et — grâce à
   `margin-inline: auto` sur le body — celui-ci glisse vers la droite
   pour rester centré dans son nouvel espace. Animation 320ms calée sur
   la transition d'opacité du contenu de l'aside (cf.
   `components/aside-toggle.css`). */
.nl-show-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

@media (min-width: 64em) {
    .nl-show-layout {
        grid-template-columns: minmax(0, 1fr) 15rem;
        transition: grid-template-columns 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nl-show-layout:has(.nl-show-sidebar[data-collapsed="true"]) {
        grid-template-columns: minmax(0, 1fr) 2.5rem;
    }
}

.nl-show__body {
    min-width: 0;
    max-width: 48rem;
}

/* Body centré dans sa cellule grid : avec sidebar dépliée, le body
   reste à `max-width: 48rem` avec un espace symétrique de part et
   d'autre ; quand la sidebar se replie, la cellule s'élargit et le
   body glisse vers la droite via le recentrage auto. La valeur `auto`
   recalcule à chaque frame de la transition `grid-template-columns`,
   donnant un mouvement fluide sans JS. */
@media (min-width: 64em) {
    .nl-show__body {
        margin-inline: auto;
    }
}

/* Aligne la première ligne du contenu avec le titre du sommaire à
   droite : la base `.prose-content` ne reset le `margin-top` que pour
   `h2:first-child`, pas pour h3/h4/p/blockquote/ul/ol/figure — du coup
   une newsletter qui commence par autre chose qu'un H2 décale le body
   vers le bas. On force le reset sur tout premier enfant. */
.nl-show__body .prose-content > *:first-child {
    margin-top: 0;
}

/* Hiérarchie h2 / h3 dans le corps newsletter : on amplifie le contraste
   visuel par rapport à `.prose-content` générique (utilisé sur dossiers,
   pages CMS génériques) pour mieux découper la lecture d'une lettre
   d'information qui peut empiler beaucoup de sections courtes. h2 =
   chapitre majeur (séparateur horizontal navy), h3 = sous-section
   (accent latéral primary). */
.nl-show__body .prose-content h2 {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-border);
    color: var(--color-navy);
    font-size: 1.5rem;
    line-height: var(--line-height-tight);
    letter-spacing: -0.005em;
}

.nl-show__body .prose-content h3 {
    position: relative;
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary-dark);
    font-size: 1.125rem;
    line-height: var(--line-height-tight);
}

/* Accent vertical h3 : barre primary pleine hauteur positionnée à
   l'EXTÉRIEUR gauche du h3 (dans la marge créée par `margin-left:
   1.25rem` du `> *`). Ainsi le texte du h3 s'aligne strictement sur
   les paragraphes qui suivent, et la barre reste visible comme
   marqueur de sous-section dans le couloir de gauche. */
.nl-show__body .prose-content h3::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* Resserre le gap entre un h3 et son premier paragraphe / liste : la
   base prose-content applique `* + * { margin-top: 1.25rem }`, ce qui
   donnait un blanc trop large entre le titre de sous-section et son
   contenu (l'accent vertical h3 perdait son ancrage visuel). */
.nl-show__body .prose-content h3 + * {
    margin-top: var(--spacing-sm);
}

/* Retrait visuel du contenu sous les titres : h2 reste à gauche
   (chapitre majeur, accent bar navy), tout le reste (paragraphes,
   listes, images, blockquotes, figures, tables) ainsi que les h3
   (sous-section, accent bar primary) se décalent à droite via
   `margin-left` pour appuyer la nesting. `margin-left` plutôt que
   `padding-left` pour ne pas écraser le `padding-left` natif des `ul`
   /`ol` (réserve l'espace des bullets) ni casser l'alignement des
   accents `::before` qui sont positionnés sur le bord gauche de leur
   propre boîte. */
.nl-show__body .prose-content > * {
    margin-left: 1.25rem;
}

.nl-show__body .prose-content > h2,
.nl-show__body .prose-content > h4 {
    margin-left: 0;
}

.nl-show__no-content {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-light);
}

/* Sidebar : sticky sur desktop, masquée sur mobile (la TOC est rarement
   utile sur petit écran et alourdirait le rendu mobile). Offset sticky
   calé sous le topbar fixe (3rem) + respiration visuelle. */
.nl-show-sidebar {
    display: none;
}

@media (min-width: 64em) {
    .nl-show-sidebar {
        display: block;
        position: sticky;
        top: 3.5rem;
        align-self: start;
        /* TOC plus haute que le viewport : on borne la hauteur a viewport
           moins offset top + petit padding bas, et on autorise le scroll
           interne. Sans cette regle, quand la TOC depasse le viewport, le
           bas devient inaccessible (sticky cale le haut sous le topbar
           mais le bas sort en-dessous de la fenetre). Incident
           2026-05-22 : newsletter avec contentBlock long (10+ items)
           rendait le bas du sommaire invisible. */
        max-height: calc(100vh - 4.5rem);
        overflow-y: auto;
        /* Ascenseur masque (le scroll reste fonctionnel via wheel /
           touchpad / clavier) — l'ascenseur classique sur toute la
           hauteur cassait visuellement le sidebar. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nl-show-sidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

.nl-show-sidebar__title {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

/* En état déplié, le sidebar se réorganise en grille 2 colonnes
   (titre / toggle icône) en row 1 + TOC pleine largeur en row 2.
   `display: contents` sur `.aside-content` hisse ses enfants au niveau
   du grid parent — toolbar et titre se positionnent au même Y, alignés
   sur la première ligne du contenu newsletter à gauche. L'état replié
   garde la card verticale du composant `_collapsible_aside`. */
@media (min-width: 64em) {
    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.5rem;
        row-gap: var(--spacing-sm);
        align-items: center;
    }

    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-content {
        display: contents;
    }

    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-toggle {
        grid-row: 1;
        grid-column: 2;
        margin: 0;
        padding: 0;
        width: 1.75rem;
        height: 1.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--color-bg-light);
        border-radius: var(--radius-sm);
        color: var(--color-text-light);
        transition: background-color 150ms ease, color 150ms ease;
    }

    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-toggle:hover,
    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-toggle:focus-visible {
        background: var(--color-primary-light);
        color: var(--color-primary);
    }

    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-toggle .aside-toggle__label {
        display: none;
    }

    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-toggle .aside-toggle__icon {
        color: inherit;
    }

    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) .nl-show-sidebar__title {
        grid-row: 1;
        grid-column: 1;
        margin-bottom: 0;
    }

    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-content > nav,
    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-content > .nl-show-sidebar__empty {
        grid-column: 1 / -1;
    }

    /* Le bouton PDF s'étale sur toute la largeur de l'aside puis se centre
       sur son contenu : sans `grid-column: 1 / -1` il reste dans la colonne
       étroite `minmax(0, 1fr)` et le libellé casse sur deux lignes. */
    .nl-show-sidebar.is-collapsible:not([data-collapsed="true"]) > .aside-content > .nl-show-sidebar__pdf {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

.nl-show-sidebar__toc {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--color-border);
}

.nl-show-sidebar__toc-link {
    display: block;
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin-left: -2px;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-text-light);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Sous-items (h3) : on garde la bordure du lien alignée sur la barre
   verticale du TOC ; seul le texte est indenté via un padding-left
   plus large. Sinon la bordure des h3 était décalée de 0.75rem par
   rapport à la ligne du TOC (li padded-left) et l'état actif ne
   fusionnait pas avec la barre. */
.nl-show-sidebar__toc-item--sub .nl-show-sidebar__toc-link {
    padding-left: 1.5rem;
}

.nl-show-sidebar__toc-link:hover { color: var(--color-text); }

.nl-show-sidebar__toc-link--active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
}

.nl-show-sidebar__empty {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    font-style: italic;
}

/* Bouton de téléchargement du PDF associé, sous le sommaire.
   Largeur ajustée au libellé (jamais sur deux lignes) et centré sous le
   sommaire. `margin-inline: auto` centre dans l'état mobile (flux bloc) ;
   en mode déplié desktop l'aside devient une grille (`.aside-content` en
   `display: contents`), donc le bouton doit s'étaler sur toute la largeur
   de piste puis se centrer via `justify-self` (cf. media query plus bas),
   sinon il reste coincé dans une colonne étroite et le libellé passe à la
   ligne. */
.nl-show-sidebar__pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--spacing-md);
    margin-inline: auto;
    padding: 0.625rem 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nl-show-sidebar__pdf svg {
    flex-shrink: 0;
}

.nl-show-sidebar__pdf:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   Newsletter · @media print
   Tweaks spécifiques à la fiche newsletter (mini-site). La cartouche
   (`_print_page`), les hides universels (nav, sidebar, toolbar…) et la
   mise en page A4 viennent de `styles/components/print.css`. On masque
   ici les éléments propres au mini-site (topbar fixe, hero card, TOC)
   qui doublonneraient ou n'ont pas de sens sur papier.
   ══════════════════════════════════════════════════════════════ */
@media print {
    /* Topbar fixe (retour archive + partage/imprimer) — masquée :
       sur papier elle ne sert à rien et son `position: fixed` casse
       la mise en page paginée. Le `padding-top: 3rem` qui compensait
       sa hauteur côté écran est neutralisé. */
    .nl-minisite-header__bar,
    .nl-show-sidebar {
        display: none !important;
    }

    .nl-minisite-header {
        padding-top: 0 !important;
    }

    /* Hero card du mini-site — masqué, le cartouche `_print_page`
       (titre + eyebrow + date + QR) le remplace en tête de document. */
    .nl-show-hero-section,
    .nl-show-hero {
        display: none !important;
    }

    /* Le layout 2 colonnes (body + TOC) redevient un bloc pleine
       largeur — la TOC est masquée par la règle ci-dessus. */
    .nl-show-layout {
        display: block !important;
    }

    .nl-show__content {
        padding: 0 !important;
    }

    .nl-show__body {
        max-width: none !important;
    }

    /* Tables dans le corps editorial : forcer fit page largeur en print.
       Sans table-layout fixed + max-width strict, une table avec colonnes
       larges debordait hors de la zone A4. Reduction de la typo et
       word-break pour casser les longues chaines (URLs, references)
       qui empechaient le wrap. */
    .nl-show__body table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        font-size: 7.5pt;
        page-break-inside: avoid;
    }

    .nl-show__body table th,
    .nl-show__body table td {
        word-break: break-word;
        overflow-wrap: anywhere;
        padding: 0.2em 0.4em;
    }

    /* Images / figures dans le corps : pareil, force le wrap. */
    .nl-show__body img,
    .nl-show__body figure {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   Newsletter Subscribe — sélection de thématiques
   ══════════════════════════════════════════════════════════════ */

.nl-subscribe__topics {
    border: none;
    padding: 0;
    margin: 0;
}

.nl-subscribe__topics-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.nl-subscribe__topics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 640px) {
    .nl-subscribe__topics-grid { grid-template-columns: 1fr 1fr; }
}

.nl-subscribe__topic-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nl-subscribe__topic-item:hover {
    border-color: var(--color-primary);
}

.nl-subscribe__topic-item--selected {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.nl-subscribe__topic-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nl-subscribe__topic-check svg {
    opacity: 0;
    color: #fff;
    transition: opacity 0.15s ease;
}

.nl-subscribe__topic-item--selected .nl-subscribe__topic-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.nl-subscribe__topic-item--selected .nl-subscribe__topic-check svg {
    opacity: 1;
}

.nl-subscribe__topic-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.nl-subscribe__topic-desc {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.nl-subscribe__legal {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: var(--line-height-base);
}

/* ══════════════════════════════════════════════════════════════
   Newsletter — Widget embeddable (newsletter_subscribe_form())
   ══════════════════════════════════════════════════════════════ */

.nl-widget {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border);
}

.nl-widget__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
}

.nl-widget__topics {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nl-widget__topics-legend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
    padding: 0;
}

.nl-widget__topic {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.nl-widget__topic input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.nl-widget__row {
    display: flex;
    gap: var(--spacing-sm);
}

.nl-widget__email {
    flex: 1;
    min-width: 0;
}

.nl-widget__submit {
    flex-shrink: 0;
    white-space: nowrap;
}

.nl-widget__feedback {
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.nl-widget__legal {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: var(--line-height-base);
}

@media (max-width: 35.9375em) {
    .nl-widget__row {
        flex-direction: column;
    }

    .nl-widget__submit {
        width: 100%;
    }
}

.nl-widget--compact {
    padding: var(--spacing-md);
}

.nl-widget--page {
    padding: var(--spacing-2xl);
    max-width: 42rem;
    margin: 0 auto;
}

.nl-widget__title--page {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.nl-widget__intro {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--color-text-light);
    line-height: var(--line-height-base);
    text-align: center;
}

.nl-widget__topic-name {
    font-weight: 500;
}

.nl-widget__topic-desc {
    display: block;
    margin-top: 0.125rem;
    margin-left: 1.875rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: var(--line-height-base);
}