/* ══════════════════════════════════════════════════════════════
   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é ── */

/* 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. */

/* Badge de type d'édition (newsletter, communiqué…) — pastille pleine
   pour le distinguer du numéro translucide. */

/* Termes de taxonomie sur la carte : plus discrets que les thématiques
   (classification éditoriale), contour léger plutôt que fond plein. */

/* ══════════════════════════════════════════════════════════════
   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;
    /* UN PLAN NOMME, PAS UN NOMBRE. A `10`, la bande passait SOUS le contenu
       de la carte : `.content-header__body` declare `z-index: 20` avec
       `isolation: isolate`, et le titre, le chapo puis les commandes de partage
       defilaient par-dessus la bande bleue. Le symptome accuse la barre alors
       que le nombre fautif est en face, et aucun des deux n'etait faux au
       moment ou il a ete ecrit — c'est exactement le cas que decrit la regle
       des plans d'empilement. */
    z-index: var(--z-navbar);
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary-dark) 100%);
}

/* COMPENSER LA HAUTEUR DE LA BANDE FIXE. Le jeton n'est pas un confort : la
   bande ne pousse rien, donc cette valeur doit valoir exactement sa hauteur.
   Ecrites en clair des deux cotes, les deux derivent au premier ajustement. */
.nl-minisite-header {
    padding-top: var(--minisite-bar-height);
}

/* LE TITRE CONDENSE SE REVELE EN CSS, pas en JavaScript. `initStickyTitles`
   ne fait que poser `is-scrolled` sur le header quand le titre de la carte
   sort du champ : tout le reste est ici. Masque par defaut, donc correct
   avant que le script tourne et sans script du tout. */
.nl-minisite-header__center {
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease;
}

.nl-minisite-header.is-scrolled .nl-minisite-header__center {
    opacity: 1;
    visibility: visible;
}

/* Qui demande moins d'animation obtient la bascule, sans le fondu. */
@media (prefers-reduced-motion: reduce) {
    .nl-minisite-header__center {
        transition: none;
    }
}

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

/* La mise en page vient de `ui-minisite-bar__inner` (paquet grammaire). Ne
   reste ici que ce qui est propre a cette barre. */

/* LE CONTENEUR GAUCHE N'AVAIT AUCUNE REGLE sous ce prefixe — meme piege que
   `__brand` juste dessous, un bloc plus loin. Reste en `display: block`, il
   posait ses enfants sur la LIGNE DE BASE et non au centre : mesure a 1280,
   11,8 px au-dessus contre 15,2 en dessous dans une bande de 48 px qui declare
   pourtant `align-items: center`. Le defaut se voyait, et le parent centre
   faisait chercher ailleurs.

   `min-width: 0` pour que les libelles puissent se resserrer plutot que de
   pousser la rangee de commandes. */
/* ── LE RETOUR AU SITE PORTEUR ──

   La brique de barre est partagee avec le minisite d'evenement, dont la barre
   est CLAIRE : ses regles `__brand` vivent dans `events.css` et sont ecrites
   pour ce fond-la (`--color-text` sur `--surface-2`). Rendues ici sous le
   prefixe `nl-`, elles ne matchent rien — le lien retombait donc en noir sur
   navy, c'est-a-dire illisible, sans qu'aucun outil ne le signale : une classe
   qui ne matche rien ne rend rien.

   L'habillage s'aligne donc sur le lien de retour VOISIN, pas sur celui de
   l'evenement. Le filet vertical separe les deux gestes, que le libelle seul
   ne distingue pas assez quand ils se suivent. */
.nl-minisite-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: var(--spacing-sm);
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.nl-minisite-header__brand:hover,
.nl-minisite-header__brand:focus-visible {
    color: #fff;
}

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

/* 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(163, 184, 28, 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;
    }

    /* Sans sommaire (edition dont le PDF EST le contenu, ou sans contenu du
       tout), la colonne unique se borne et se centre au lieu de prendre toute
       la largeur — meme mesure que partout ailleurs, et large pour un A4
       (794 px a 96 dpi). */

}

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

/* ── Sans sommaire : un BLOC, pas une grille ──
   Une edition dont le PDF est le contenu n'a rien a sommer, donc pas de
   seconde colonne. La grille a une seule piste ne convient pas ici : sous
   `justify-content: center`, Chrome dimensionne l'element sur son contenu, et
   une iframe PDF n'annonce que sa taille par defaut — le visualiseur tombait a
   302 px au milieu du vide. Un bloc borne et centre n'a pas cette ambiguite.
   Mesure elargie a 62 rem : c'est un document qu'on lit, pas une colonne de
   texte (un A4 fait 794 px a 96 dpi). */
.nl-show-layout--solo {
    display: block;
}

.nl-show-layout--solo .nl-show__body {
    max-width: 62rem;
    margin-inline: auto;
}

/* 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 — page /newsletters/inscription

   Même squelette que les autres pages de service : en-tête éditorial
   borné (`content-header--narrow`), puis UNE colonne de lecture. Le
   rail de trois cartes posé sur une illustration décorative a été
   retiré : l'illustration passait sous le texte des cartes, et les
   trois liens qu'il portait sont rendus en pied de page, à plat.
   ══════════════════════════════════════════════════════════════ */

.nl-subscribe {
    /* `padding-block` seul : l'élément porte aussi `container`, dont la
       gouttière latérale vit en `padding-inline`. Un raccourci `padding`
       la remettrait à zéro et collerait la page aux bords sur téléphone. */
    padding-block: var(--spacing-xl) var(--spacing-3xl);
}

.nl-subscribe__column {
    max-width: 62rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* ── Le formulaire ──
   PAS de carte sur telephone : bordure + 24 px de rembourrage de chaque
   cote, c'est 48 px pris sur une largeur de 366 px, au detriment du champ
   et des thematiques, pour un cadre qui n'apprend rien (le formulaire est
   deja le seul objet de la page). La carte revient a partir de 48em, ou
   la largeur ne manque plus et ou elle rassemble utilement le formulaire
   face aux sections qui le suivent. */
@media (min-width: 48em) {
    .nl-subscribe__card {
        padding: var(--spacing-xl);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
}

.nl-subscribe__card-title {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-navy);
}

/* ── Sélection de thématiques ──
   L'état sélectionné est porté par la CASE (`:checked`), jamais par une
   classe calculée en Alpine : `:class="selectedTopics.includes(id) && …"`
   est un appel avec argument, que le build `@alpinejs/csp` refuse de
   parser — cocher une thématique ne changeait alors rien à l'écran. */
.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: 40em) {
    .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);
    background: #fff;
    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:has(.nl-subscribe__topic-input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

/* Le focus clavier doit se voir : la case est en `sr-only`, donc c'est
   l'étiquette entière qui porte l'anneau. */
.nl-subscribe__topic-item:has(.nl-subscribe__topic-input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.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-input:checked ~ .nl-subscribe__topic-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.nl-subscribe__topic-input:checked ~ .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);
}

/* ── Captcha et mention ──
   Aucun espacement propre : le formulaire est une colonne flex a `gap`
   unique, et toute marge locale s'AJOUTE au gap, ce qui casse le rythme
   exactement la ou on l'ajoute. La marge haute du widget ALTCHA est
   neutralisee dans `zones/contact.css`, pour les trois formulaires qui
   partagent cette brique. */
.nl-subscribe__legal {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: var(--line-height-base);
    text-wrap: pretty;
}

/* ── Sections explicatives ── */
.nl-subscribe__section-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-navy);
}

@media (min-width: 48em) {
    .nl-subscribe__section-title {
        font-size: var(--font-size-2xl);
    }
}

.nl-subscribe__section-intro {
    margin: 0 0 var(--spacing-lg);
    max-width: 46rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

.nl-subscribe__points {
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 48em) {
    .nl-subscribe__points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.nl-subscribe__point {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.nl-subscribe__point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--spacing-sm);
    border-radius: 100px;
    color: var(--color-primary-dark, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
}

.nl-subscribe__point-title {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-navy);
}

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

/* Les cartes-liens de bas de page sont la brique partagee
   `components/link-cards.css`, consommee aussi par la page de contact :
   rien de specifique a la newsletter ici. */

@media print {
    .nl-subscribe__card,
    .nl-subscribe__point {
        box-shadow: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   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-light);
    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);
}

/* Libelle de retour : le long au-dessus de 40 em, le court en dessous.
   Les deux vivent dans le DOM, le CSS choisit — c'est ce qui remplace le
   couple d'utilitaires `hidden sm:inline` / `sm:hidden`, dernier palier
   Tailwind du site public et seul seuil du depot exprime en `rem`. */
/* Le couple de libelles et sa bascule vivent desormais dans le paquet
   grammaire (`minisite-topbar.css`), sous des classes stables que la brique
   emet quel que soit son prefixe. */

/* ══════════════════════════════════════════════════════════════
   LA TETE DE PAGE — maquette « Cards decorees ANCESU », 4d.

   Le hero precedent posait un titre sur un aplat, trois tuiles chiffrees et
   un bouton « Partager » — « l'action la moins probable de la page », dit la
   maquette. Ici le DERNIER NUMERO tient la colonne droite, « S'abonner »
   redevient l'action premiere, et les tuiles cedent la place a une phrase.

   La carte porte le quadrille d'angle plutot que les deux disques : une page
   de lettres d'information n'a aucune image, et c'est le cas que ce decor
   traite. */

.content-header--newsletter-hero .content-header__body {
    position: relative;
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-card);
}

/* LES DEUX DISQUES SE RETIRENT. Ils habillent une tete qui porte une photo ou
   des chiffres ; ici le quadrille occupe deja l'angle libre, et les deux
   ensemble feraient deux decors pour une carte. */
.content-header--newsletter-hero .content-header__shapes {
    display: none;
}

@media (min-width: 64em) {
    /* L'AXE PARTAGE, comme la tete du centre d'aide : la colonne droite porte
       un panneau de hauteur fixe, et l'alignement par le bas de la grammaire
       laissait un vide au-dessus du titre. */
    .content-header--newsletter-hero .content-header__body--split {
        align-items: center;
    }
}

/* LE CONTOURNEMENT DE L'ASIDE A DISPARU. Le decor passait par la colonne
   droite faute de mieux, ce qui obligeait a la rendre statique pour qu'elle
   cesse d'etre le bloc conteneur. `_content_header` porte desormais un
   parametre `decor`, rendu en premier enfant de la carte : la trame y trouve
   son conteneur et son rayon sans une ligne de CSS. */

.nl-hero__meta {
    margin: var(--spacing-md) 0 0;
    max-width: 46rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}

/* ── LE PANNEAU DU DERNIER NUMERO ──
   Fond blanc a 86 % sur la carte : il se detache du quadrille sans l'effacer,
   ce qui est tout l'interet de poser le decor DERRIERE lui. */
.nl-hero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-1) 86%, transparent);
    box-shadow: var(--shadow-card);
}

.nl-hero__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin: 0;
}

/* La reference en chasse fixe : un numero et une date se comparent d'une
   edition a l'autre, et une chasse fixe les aligne. */
.nl-hero__panel-ref {
    font-family: var(--font-data);
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}

.nl-hero__panel-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

.nl-hero__summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nl-hero__summary-item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.nl-hero__summary-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.nl-hero__summary-item .ui-dot {
    /* Le point s'aligne sur la PREMIERE LIGNE du sujet, pas sur sa boite :
       `align-items: baseline` le pose sur la ligne de base des lettres, deux
       pixels trop bas pour un disque. */
    transform: translateY(-0.125rem);
}

.nl-hero__summary-lead {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}

.nl-hero__panel-link {
    align-self: flex-start;
    /* LE LIEN ET SA FLECHE NE SE SEPARENT PAS. En flux, la fleche passait a la
       ligne seule des que la colonne se resserrait : un signe d'entree pose
       sous son intitule ne designe plus rien. */
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* La rangee d'actions emploie `hero-actions` (zones/content.css), la classe
   partagee de la tete de /dossiers : elle porte deja le comportement
   responsive du declencheur de partage. Une copie locale l'aurait dupliquee
   sans son responsive, et aurait diverge au premier correctif. */