/* site-marque.css : le hero d'inscription et la grille de cartes d'une home
 * de marque (socle M2).
 * ---------------------------------------------------------------------------
 * ⚠️ SOURCE : `front_theme_WP/style.css`, sections LAYOUT, HERO, SUBSCRIBE FORM,
 * ARCHIVES GRID et ARTICLE CARD, plus les deux media queries (768px et 480px).
 * Relevé le 07/09/2026, valeurs recopiées telles quelles. Habille
 * `_shared/templates/_nl_hero.html` et `_cartes_articles.html`, dont le markup
 * vient du même endroit (`index.php`).
 *
 * POURQUOI RECOPIER PLUTÔT QUE RÉÉCRIRE EN TAILWIND : la demande était
 * « EXACTEMENT la même home ». Une réécriture, même soignée, est une nouvelle
 * page ; c'est exactement l'erreur commise le 07/09/2026 au matin. Les valeurs
 * ci-dessous sont donc à comparer ligne à ligne avec le thème, et pas à
 * « améliorer » sans mesurer d'abord ce que ça déplace.
 *
 * LES VARIABLES DE MARQUE NE SONT PAS ICI. `--color-primary`,
 * `--color-primary-light`, `--color-text-on-primary` et `--font-heading` sont
 * déclarées par chaque app (côté thème, c'est `meelton_dynamic_css()` qui les
 * pose depuis `config/domains.php`). Chaque règle porte donc sa valeur de repli,
 * pour qu'une app qui oublierait le bloc `:root` rende terne mais jamais cassé.
 *
 * ── TROIS PIÈGES TAILWIND, et ils sont la seule raison pour laquelle ce
 * fichier n'est pas un copier-coller strict ──────────────────────────────────
 *
 * 1. `.container` EXISTE AUSSI DANS TAILWIND, et n'y veut pas dire la même
 *    chose (largeur par palier, pas 1200px). Les deux définitions se
 *    disputeraient la même classe, avec un gagnant qui dépend de l'ordre
 *    d'injection du CDN, donc non déterministe. Nos règles sont scopées
 *    `.hero > .container` et `.archives > .container` : spécificité plus haute,
 *    résultat garanti, markup inchangé.
 * 2. LE PREFLIGHT DE TAILWIND remet `font-size` et `font-weight` des titres à
 *    `inherit`. Toute règle de titre ci-dessous DOIT donc porter les deux, même
 *    si le thème s'en passait par endroits. Sans ça, un h1 rend à la taille du
 *    texte courant : pas une erreur, juste une page fade que rien ne signale.
 * 3. Le preflight neutralise aussi `border-width` sur les champs. Le
 *    `border: 2px solid #ddd` du thème le rétablit ; ne pas le remplacer par un
 *    `border-color` seul.
 */

/* ── FOCUS CLAVIER ─────────────────────────────────────────────────────────
   🚨 CETTE SECTION MANQUAIT, ET C'EST UNE PERTE DE LA BASCULE (02/10/2026).

   Le thème porte une règle GLOBALE que ce fichier n'avait jamais reprise :
   `a:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }`
   (`front_theme_WP/style.css:34-36`). Sans elle, les sites de marque servis
   par le socle retombent sur l'anneau par défaut du navigateur, qui n'a ni la
   couleur de marque ni l'écart, et qui disparaît sur les composants dont une
   règle retire l'outline (c'était le cas des deux champs du formulaire).

   POURQUOI `:focus-visible` ET PAS `:focus` COMME LE THÈME, et c'est mon
   choix, assumé : `:focus` laisse l'anneau après un clic de souris, ce que les
   visiteurs lisent comme un défaut d'affichage. `:focus-visible` ne le montre
   qu'au clavier, là où il sert. Aucune régression visible pour qui clique,
   l'anneau revenu pour qui tabule. Les CHAMPS, eux, gardent `:focus` : un
   champ de saisie doit montrer qu'il a le curseur, souris comprise.

   ⚠️ PÉRIMÈTRE : cette feuille est chargée par les huit gabarits de marque,
   donc la règle vaut pour les huit. C'est voulu : le thème était global aussi.
   `encarts.css:35` a déjà la sienne, scopée aux encarts, et elle reste. */
a:focus-visible {
    outline: 2px solid var(--color-primary, #333);
    outline-offset: 2px;
}

/* ── LAYOUT ────────────────────────────────────────────────────────────────
   Scopé, voir le piège 1. La valeur (1200px, 20px) est celle du thème. */
.hero > .container,
.archives > .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── LA POLICE DE CORPS DES DEUX SECTIONS ──────────────────────────────────
   ⚠️ POSÉE ICI, ET C'EST UNE CORRECTION DU 07/09/2026. Côté thème, ces deux
   sections héritaient du `body`, qui portait `font-family: var(--font-body)`
   (style.css:18). Chapô du hero, mention « Gratuit », chapô et date des cartes :
   tout ça rendait donc dans la police de la marque, repli système compris.

   Ici le `body` appartient au layout Tailwind, qui lui pose `font-sans`, soit
   DM Sans, RÉELLEMENT chargée. Sans la règle ci-dessous, ces textes rendaient
   en DM Sans alors que le site les rendait en police système : mesuré au rendu
   Chromium, `.hero__tagline` héritait du body au lieu de la marque.

   Le sélecteur de classe (0,1,0) l'emporte sur ce qu'un descendant hérite du
   `body`, quel que soit l'ordre d'injection du CDN. Les titres, eux, gardent
   leur `--font-heading` explicite, comme dans le thème. */
.hero,
.archives {
    font-family: var(--font-body, sans-serif);
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero {
    background: var(--color-primary-light, #f5f5f5);
    padding: 60px 0;
    text-align: center;
}

.hero__logo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero__title {
    font-family: var(--font-heading, inherit);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1a1a;
    line-height: 1.15;
}

.hero__tagline {
    font-size: 1.2rem;
    color: #555;
    margin: 0 auto 30px;
    max-width: 500px;
    line-height: 1.5;
}

.hero__mention {
    font-size: 0.9rem;
    /* ⚠️ VALEUR D'ORIGINE, REMISE LE 28/09/2026. Le 24/09 (PR #3688 et
       #3700) une fournée « contraste PageSpeed » a éclairci ce gris sans
       que personne l'ait demandé, sur les sept marques. Benjamin l'a
       constaté en production. Un score d'outil ne décide pas de l'allure
       de ses sites : si le contraste doit monter, ça se tranche avec lui.
       Détail de la fournée : `INCIDENTS_EXPLOITATION.md`, 28/09/2026. */
    color: #777;
}

/* ── FORMULAIRE D'INSCRIPTION ──────────────────────────────────────────────
   `position: relative` sur le conteneur : le honeypot est en
   `position:absolute;left:-9999px`, il lui faut un ancêtre positionné, sinon
   il se cale sur la page entière et peut rallonger le document vers la gauche
   sur certains navigateurs. Le thème s'en passait, son honeypot étant en
   `display:none`. */
.subscribe-wrapper {
    position: relative;
}

.subscribe-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 450px;
    margin: 0 auto 15px;
}

.subscribe-form__input {
    flex: 1;
    min-width: 200px;
    padding: 14px 18px;
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #1a1a1a;
    transition: border-color 0.2s;
}

.subscribe-form__input:focus {
    border-color: var(--color-primary, #333);
}

/* L'anneau, EN PLUS du changement de bordure (02/10/2026). La bordure seule est
   un repère de focus par la seule couleur : invisible pour qui ne distingue pas
   le gris du corail, et c'est WCAG 1.4.11. Mêmes valeurs que
   `.subscribe-form__button:focus` plus bas, qui l'avait déjà : ce n'est pas une
   invention, c'est le motif du fichier appliqué aux deux champs qui l'avaient
   perdu avec leur `outline: none`. */
.subscribe-form__input:focus-visible {
    outline: 2px solid var(--color-primary, #333);
    outline-offset: 2px;
}

/* Le sélecteur de pays, quand la marque en propose (Interlignes, 18/09/2026).
   ⚠️ IL HÉRITE DES VALEURS DU CHAMP EMAIL, IL N'EN INVENTE PAS : mêmes bordure,
   rayon, police et transition, pour que les deux champs se lisent comme une
   seule ligne de formulaire. Ce qui change est ce qui doit changer : il ne
   `flex: 1` pas (il ne doit pas voler la largeur au champ email, qui est le
   champ principal) et il porte une largeur minimale qui tient « Singapour ».
   Le `font-family: inherit` n'est pas décoratif : sans lui, Chrome et Firefox
   rendent les `select` dans leur police système, et le champ jure avec son
   voisin. */
.subscribe-form__select {
    min-width: 150px;
    padding: 14px 18px;
    font-size: 1rem;
    font-family: inherit;
    border: 2px solid #ddd;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #1a1a1a;
    transition: border-color 0.2s;
}

.subscribe-form__select:focus {
    border-color: var(--color-primary, #333);
}

.subscribe-form__select:focus-visible {
    outline: 2px solid var(--color-primary, #333);
    outline-offset: 2px;
}

/* Un formulaire à trois champs a besoin de plus que 450px, sinon le bouton
   passe à la ligne. Posée SEULEMENT quand la marque propose un pays, donc sans
   effet sur les six autres. Sous 768px la media query du thème repasse le
   formulaire en colonne, et cette largeur ne mord plus. */
.subscribe-form--pays {
    max-width: 640px;
}

.subscribe-form__button {
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-on-primary, #fff);
    background: var(--color-primary, #333);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.subscribe-form__button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.subscribe-form__button:focus {
    outline: 2px solid var(--color-primary, #333);
    outline-offset: 2px;
}

.subscribe-form__button[disabled] {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

/* Message de retour. Le thème en avait SIX, un par cas, chacun avec son style
 * en ligne et tous masqués sauf un, pilotés par un JS propre au thème. Ici il y
 * en a UN, rempli par `js/nl-bandeau.js` qui pose `--ok` ou `--ko` : c'est le
 * mécanisme déjà en place sur les neuf apps (RÈGLE ZÉRO, on ne réinvente pas un
 * second affichage de message). Les couleurs sont celles du thème. */
.subscribe-message {
    max-width: 450px;
    margin: 0 auto 15px;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.subscribe-message.m-nl__msg--ok {
    background-color: #e7faf0;
    color: #085229;
}

.subscribe-message.m-nl__msg--ko {
    background-color: #f8d7da;
    color: #721c24;
}

/* ── GRILLE D'ARCHIVES ────────────────────────────────────────────────────── */
.archives {
    padding: 50px 0;
}

.archives__title {
    font-family: var(--font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 30px;
    color: #1a1a1a;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* ── FICHE DE NOMINATION : CE QUE LA CARTE AJOUTE (24/09/2026) ───────────────
 *
 * 🚨 IL N'Y A PLUS DE LISTE À NOUS ICI. La page des nominations rendait sa
 * propre liste, avec ses propres classes, alors que le site a déjà sa grille
 * de cartes (`.articles-grid`, `.article-card`), celle de la home, de l'index
 * des numéros et du fil d'actualités. Benjamin l'a vue et a demandé pourquoi
 * on invente un gabarit à chaque fois : il avait raison, et c'était une faute
 * contre la RÈGLE ZÉRO (CODING_STANDARDS §5.5). Les soixante lignes qui
 * vivaient ici ont été retirées, pas déplacées.
 *
 * Ne reste que le CORPS de la fiche, que les autres cartes n'ont pas : leur
 * titre se suffit, celui d'une nomination est un nom de personne, qui ne dit
 * rien seul. Même anatomie que L'Agefi et Option Finance, moins la photo.
 */
.article-card__texte {
    margin: 8px 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #444;
}

/* ── FILTRES DE SECTEUR (24/09/2026) ──────────────────────────────────────────
 *
 * POURQUOI ILS EXISTENT : la page portait tout le fil, tous secteurs mêlés,
 * sans tri ni fin. Ces filtres sont la table des matières de la section, et
 * chacun est une VRAIE page (`/nominations/secteur/<nom>/`), pas un paramètre
 * d'adresse : un `?c=` ne fabrique pas de page pour Google, il en cache trois
 * derrière une (règle 18 de CLAUDE.md, incident des pages AMF du 10/08/2026).
 *
 * Ils reprennent le rayon et la bordure des cartes de la même feuille : même
 * chrome, rien de neuf à regarder pour le visiteur.
 */
.nominations-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Sous la grille, comme le lien de flux du fil d'actualités : la marge
     * haute la décolle des fiches, la basse la sépare du pied de page. */
    margin: 10px 0 40px;
}

.nominations-filtres__lien {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1.3;
    color: #444;
    text-decoration: none;
    background: #fff;
}

a.nominations-filtres__lien:hover,
a.nominations-filtres__lien:focus {
    border-color: var(--color-primary, #333);
    color: var(--color-primary, #333);
}

/* Le filtre de la page courante : marqué, et PAS un lien vers elle-même. Il
 * est rendu en `<span>` par le gabarit, donc aucune règle de survol ne le
 * touche. */
.nominations-filtres__lien--actif {
    border-color: var(--color-primary, #333);
    background: var(--color-primary, #333);
    color: #fff;
}

.nominations-filtres__nombre {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* ── CARTE ────────────────────────────────────────────────────────────────── */
.article-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

.article-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
}

.article-card:focus {
    outline: 2px solid var(--color-primary, #333);
    outline-offset: 4px;
    border-radius: 8px;
}

.article-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #f0f0f0;
}

/* Le dégradé de marque en guise de vignette. Le thème le pose en style EN LIGNE
 * sur un div interne ; ici c'est une classe, parce qu'un style en ligne dans un
 * include partagé se recopierait dans chaque marque. Mêmes valeurs. */
.article-card__degrade {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        var(--color-primary-light, #f5f5f5), var(--color-primary, #333));
    opacity: 0.3;
}

/* Le `<picture>` qui propose le WebP (24/09/2026) est EN LIGNE par défaut :
 * sans ce bloc, le `height: 100%` de l'image se calcule sur une hauteur
 * automatique et la vignette perd son cadrage carré. */
.article-card__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.article-card:hover .article-card__image img {
    transform: scale(1.03);
}

.article-card__title {
    font-family: var(--font-heading, inherit);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1a1a1a;
    line-height: 1.3;
}

.article-card__subtitle {
    font-size: 0.95rem;
    color: #555;
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card__date {
    font-size: 0.85rem;
    /* ⚠️ VALEUR D'ORIGINE, REMISE LE 28/09/2026. Le 24/09 (PR #3688 et
       #3700) une fournée « contraste PageSpeed » a éclairci ce gris sans
       que personne l'ait demandé, sur les sept marques. Benjamin l'a
       constaté en production. Un score d'outil ne décide pas de l'allure
       de ses sites : si le contraste doit monter, ça se tranche avec lui.
       Détail de la fournée : `INCIDENTS_EXPLOITATION.md`, 28/09/2026. */
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── RESPONSIVE, les deux paliers du thème ────────────────────────────────── */
@media (max-width: 768px) {
    .hero {
        padding: 40px 0;
    }

    .hero__title {
        font-size: 1.8rem;
    }

    .hero__tagline {
        font-size: 1rem;
    }

    .subscribe-form {
        flex-direction: column;
    }

    .subscribe-form__input,
    .subscribe-form__button {
        width: 100%;
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

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

/* ── EN-TÊTE ET PIED DE MARQUE ──────────────────────────────────────────────
 *
 * ⚠️ SOURCE : `front_theme_WP/style.css`, sections HEADER (lignes 76-137) et
 * FOOTER (586-656), relevées le 17/09/2026. Valeurs recopiées telles quelles,
 * même discipline que le reste de ce fichier.
 *
 * 🚨 POURQUOI ELLES ARRIVENT ICI SI TARD, et ça a coûté une bascule : ces
 * règles vivaient dans le `<style>` de CHAQUE gabarit de marque, huit fois,
 * avec des valeurs qui avaient dérivé du thème (logotype à 1.15rem contre
 * 1.4rem, logo carré à 36px contre 40px de haut, `.footer-grid` en flex contre
 * grid). Personne ne comparait. Le jour où la première marque à historique est
 * passée en production, sa page ne ressemblait pas à celle qu'elle remplaçait.
 *
 * Elles habillent `_shared/templates/_entete_marque.html` et
 * `_pied_marque.html`, qui portent le balisage en un seul exemplaire. Un
 * gabarit de marque ne déclare plus que ses VALEURS (le bloc `:root`).
 *
 * LES REPLIS SONT LÀ POUR LA MÊME RAISON QUE PLUS HAUT : une app qui oublierait
 * son `:root` rend terne, jamais cassé.
 */
.site-header {
    background: var(--color-primary, #1a1a1a);
    color: var(--color-text-on-primary, #fff);
    padding: 12px 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.site-header__logo:hover {
    text-decoration: none;
    opacity: 0.9;
}

/* Le thème cible `.site-header__logo img` ; la classe est ajoutée en plus pour
   que le sélecteur tienne si un jour le logo n'est plus un enfant direct. */
.site-header__logo img,
.site-header__logo-img {
    height: 40px;
    width: auto;
}

/* Le nom et la mention d'édition, empilés : le thème les met dans un `<div>`
   sans classe (`header.php:78`), nommé ici pour ne pas styler un élément nu. */
.site-header__logo-bloc {
    display: flex;
    flex-direction: column;
}

.site-header__logo-text {
    font-family: var(--font-heading, inherit);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-header__edition {
    /* Aligné sur le kicker des apps FastAPI (vente-a-decouvert.afreelun.ch) :
       Benjamin préfère la version espacée en capitales (10/08/2026). */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    /* ⚠️ VALEUR D'ORIGINE, REMISE LE 28/09/2026. Le 24/09 (PR #3688 et
       #3700) une fournée « contraste PageSpeed » a éclairci ce gris sans
       que personne l'ait demandé, sur les sept marques. Benjamin l'a
       constaté en production. Un score d'outil ne décide pas de l'allure
       de ses sites : si le contraste doit monter, ça se tranche avec lui.
       Détail de la fournée : `INCIDENTS_EXPLOITATION.md`, 28/09/2026. */
    opacity: 0.8;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-header__nav-link {
    color: inherit;
    font-size: 0.9rem;
    opacity: 0.9;
    text-decoration: none;
}

.site-header__nav-link:hover {
    opacity: 1;
    text-decoration: none;
}

/* ── LA NAVIGATION D'UN OUTIL, et elle SEULE ────────────────────────────────
 *
 * Ces règles habillent la nav INTERNE d'une app (`apps/vad`, et demain toute
 * app qui déclare des `nav_items`), jamais celle d'un site de marque. Elles
 * viennent du `<style>` de `afl/base.html`, le chrome que VAD utilise depuis
 * sa naissance, et sont recopiées ici sans changer une valeur.
 *
 * ⚠️ ELLES SONT SCOPÉES `--app`, ET C'EST LE POINT : `padding-bottom` et
 * `border-bottom` posés sur TOUS les `.site-header__nav-link` décaleraient de
 * 5px le lien « Derniers numéros » des six sites de marque, dont Le Brief
 * Patrimonial, en production depuis ce matin. Le but de ce chantier est que
 * rien ne bouge là où rien n'a été demandé.
 *
 * `[aria-current]` et `.site-header__nav-mobile` n'ont pas besoin du scope :
 * un site de marque ne rend ni l'un ni l'autre, faute de `nav_items`. Ils le
 * portent quand même, pour que la famille se lise d'un bloc.
 */
.site-header__nav--app .site-header__nav-link {
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.site-header__nav--app .site-header__nav-link[aria-current="page"] {
    opacity: 1;
    border-bottom-color: currentColor;
}

/* Le sous-titre du logotype sur un OUTIL : le nom de l'app, là où un site de
   marque affiche sa mention d'édition (`.site-header__edition`). Mêmes valeurs
   que celle-ci, elles ont toujours été jumelles. */
.site-header__logo-sub {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    /* Opacité d'origine, même raison que `.site-header__edition`, sa jumelle. */
    opacity: 0.8;
}

/* La nav mobile : la barre du haut disparaît sous 768px, celle-ci la remplace
   en libellés courts, défilables. */
@media (max-width: 767px) {
    .site-header__nav--app {
        display: none;
    }
}

.site-header__nav-mobile {
    display: none;
}

@media (max-width: 767px) {
    .site-header__nav-mobile {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding-top: 10px;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 600;
    }

    .site-header__nav-mobile a {
        color: inherit;
        opacity: 0.75;
        white-space: nowrap;
    }

    .site-header__nav-mobile a[aria-current="page"] {
        opacity: 1;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* Le bandeau d'inscription de bas de page, sur la mesure de lecture. Il
   s'appelait `.lbp-bandeau`, `.agf-bandeau`, `.hvt-bandeau`... une classe par
   marque pour une règle identique. */
.marque-bandeau {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-footer {
    background: #f8f8f8;
    padding: 50px 0;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.footer-section__title {
    font-family: var(--font-heading, inherit);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* ⚠️ VALEUR D'ORIGINE, REMISE LE 28/09/2026. Le 24/09 (PR #3688 et
       #3700) une fournée « contraste PageSpeed » a éclairci ce gris sans
       que personne l'ait demandé, sur les sept marques. Benjamin l'a
       constaté en production. Un score d'outil ne décide pas de l'allure
       de ses sites : si le contraste doit monter, ça se tranche avec lui.
       Détail de la fournée : `INCIDENTS_EXPLOITATION.md`, 28/09/2026. */
    color: #999;
    /* `line-height` GARDÉ, lui : il vient du passage de `h4` à `h2` du même
       jour, qui ne change rien à l'aspect et reste (structure de titres). */
    line-height: 1.3;
    margin: 0 0 15px;
}

.footer-section__text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0 0 15px;
}

.footer-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section__list li {
    margin-bottom: 10px;
}

.footer-section__list a {
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    text-decoration: none;
}

.footer-section__list a:hover {
    color: var(--color-primary, #1a1a1a);
}

.footer-section__flag {
    font-size: 1.2em;
}

.site-footer__bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    font-size: 0.85rem;
    /* ⚠️ VALEUR D'ORIGINE, REMISE LE 28/09/2026. Le 24/09 (PR #3688 et
       #3700) une fournée « contraste PageSpeed » a éclairci ce gris sans
       que personne l'ait demandé, sur les sept marques. Benjamin l'a
       constaté en production. Un score d'outil ne décide pas de l'allure
       de ses sites : si le contraste doit monter, ça se tranche avec lui.
       Détail de la fournée : `INCIDENTS_EXPLOITATION.md`, 28/09/2026. */
    color: #999;
}

.site-footer__bottom a {
    color: #666;
}

.site-footer__bottom a:hover {
    color: var(--color-primary, #1a1a1a);
}

/* ── LE SITE « MÉDIA » : EN-TÊTE, HOME ET PAGES DE RUBRIQUE (27/09/2026) ────
 *
 * POURQUOI : Benjamin, le 27/09/2026, « que la home LBP ressemble à une vraie
 * home de média », « comme H24 Finance ou Club Patrimoine ». Maquette validée
 * le même jour : menu de rubriques sous l'en-tête, une et sujets secondaires,
 * revue de presse par rubrique, colonne de droite. Gabarits :
 * `publications/templates/accueil_media.html` et `rubrique.html`, les
 * morceaux partagés `_shared/templates/_media_newsletter.html` et
 * `_media_breve.html`, et le menu dans `_entete_marque.html`.
 *
 * ⚠️ TOUTES CES CLASSES SONT NEUVES, aucune règle existante n'est touchée : les
 * six autres marques (et la home portée du thème) rendent exactement comme
 * avant. Elles ne s'appliquent qu'aux pages d'une marque qui sert ses
 * rubriques (`Marque.sert_rubriques`).
 *
 * Mêmes variables de marque que le reste de ce fichier, avec leurs replis.
 */

/* Masqué à l'œil, lu par les lecteurs d'écran et les moteurs : le h1 de la
   home est le nom de la marque, déjà affiché dans l'en-tête. */
.visuellement-masque {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Le bouton « S'abonner » de l'en-tête : clair sur la barre de couleur. */
.site-header__abonner {
    background: var(--color-primary-light, #f5f5f5);
    color: var(--color-primary, #1a1a1a);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__abonner:hover {
    opacity: 0.9;
    text-decoration: none;
}

/* Le menu de rubriques : une barre blanche sous l'en-tête, qui défile à
   l'horizontale plutôt que de passer à la ligne quand l'écran est étroit. */
.site-rubriques {
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
}

/* Dix entrées sur 1 160 px : l'écart et l'espacement des lettres sont réglés
   pour qu'elles tiennent sur une ligne en bureau (mesuré au rendu Chromium le
   27/09/2026 : à 22 px et 0,06em, la dernière entrée était coupée). */
.site-rubriques__inner {
    display: flex;
    gap: 17px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.site-rubriques__lien {
    display: block;
    padding: 14px 0 11px;
    border-bottom: 3px solid transparent;
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
}

.site-rubriques__lien:hover,
.site-rubriques__lien[aria-current="page"] {
    color: var(--color-primary, #1a1a1a);
    border-bottom-color: var(--color-primary, #1a1a1a);
    text-decoration: none;
}

/* ── La page ─────────────────────────────────────────────────────────────── */
.media {
    font-family: var(--font-body, sans-serif);
    color: #1a1a1a;
}

.media a {
    color: inherit;
    text-decoration: none;
}

.media__conteneur {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.media__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}

.media-section {
    margin-bottom: 36px;
}

/* Le titre de section : un filet de la couleur de la marque au-dessus, comme
   une page de presse. Le second lien (« Tout voir ») se range à droite. */
.media-titre {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-heading, inherit);
    font-size: 1.15rem;
    font-weight: 700;
    border-top: 3px solid var(--color-primary, #1a1a1a);
    padding-top: 10px;
    margin: 0 0 18px;
}

.media-titre__suite {
    font-family: var(--font-body, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary, #1a1a1a) !important;
    white-space: nowrap;
}

.media-kicker {
    margin: 0 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary, #1a1a1a);
}

/* #666 : 5,7:1 sur blanc, lisible (même valeur que `.article-card__date`). */
.media-date {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #666;
}

.media-vignette {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 2px;
    background: #f0f0f0;
}

.media-vignette picture,
.media-vignette img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-vignette--liste {
    width: 130px;
    height: 130px;
}

/* ── À la une ─────────────────────────────────────────────────────────────
   Le visuel reste CARRÉ : ceux de la marque sont composés en 1080 × 1080
   avec son habillage (mesuré en base le 27/09/2026), un bandeau le couperait. */
.media-une {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e3e3e3;
}

.media-une__image {
    width: 340px;
    height: 340px;
    overflow: hidden;
    border-radius: 2px;
    background: #f0f0f0;
}

.media-une__image picture,
.media-une__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-une__titre {
    font-family: var(--font-heading, inherit);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 6px 0 12px;
}

.media-une__chapo {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #333;
}

.media-une:hover .media-une__titre,
.media-second__item:hover .media-second__titre,
.media-liste__item:hover .media-liste__titre {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.media-second {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 30px;
    padding: 22px 0 8px;
}

.media-second__item {
    display: flex;
    gap: 14px;
}

.media-second__titre {
    font-family: var(--font-heading, inherit);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 2px 0 6px;
}

.media-suite {
    margin: 14px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.media-suite a {
    color: var(--color-primary, #1a1a1a) !important;
}

/* ── Les derniers numéros, sous la une (28/09/2026) ───────────────────────
   Trois cartes, le visuel en grand, CARRÉ pour la même raison que la une (les
   visuels de la marque sont composés en 1080 × 1080). Sur un téléphone, une
   ligne par numéro, vignette à gauche : trois carrés pleine largeur feraient
   trois écrans avant la revue de presse. */
.media-numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.media-numeros__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.media-numeros__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: #f0f0f0;
}

.media-numeros__image picture,
.media-numeros__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-numeros__titre {
    font-family: var(--font-heading, inherit);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 4px 0 6px;
}

.media-numeros__chapo {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #444;
}

.media-numeros__item:hover .media-numeros__titre {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── La revue de presse ───────────────────────────────────────────────────── */
.media-revue__titre {
    font-family: var(--font-heading, inherit);
    font-size: 1.7rem;
    font-weight: 700;
    margin: 8px 0 4px;
}

.media-revue__sous {
    margin: 0 0 22px;
    font-size: 0.9rem;
    color: #666;
}

.media-blocs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 34px;
}

.media-bloc--avant {
    background: var(--color-primary-light, #f5f5f5);
    padding: 16px 18px;
    border-radius: 3px;
}

.media-breves {
    list-style: none;
    margin: 0;
    padding: 0;
}

.media-breve {
    padding: 9px 0;
    border-top: 1px solid #e3e3e3;
    font-size: 0.92rem;
    line-height: 1.5;
}

.media-breve:first-child {
    border-top: 0;
    padding-top: 0;
}

.media-breve strong,
.media-breve b {
    color: var(--color-primary, #1a1a1a);
}

.media-breve__source {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: #666 !important;
}

a.media-breve__source:hover {
    text-decoration: underline !important;
}

/* ── La colonne de droite ─────────────────────────────────────────────────── */
.media__colonne > * {
    margin-bottom: 30px;
}

.media-edito {
    display: block;
    border: 1px solid #e3e3e3;
    padding: 18px;
}

.media-edito__titre {
    font-family: var(--font-heading, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 4px 0 6px;
}

.media-edito__chapo {
    margin: 0;
    font-size: 0.9rem;
    color: #444;
}

/* La boîte d'inscription. `position: relative` : le honeypot est en
   `position:absolute;left:-9999px`, il lui faut un ancêtre positionné. */
.media-nl {
    position: relative;
    background: var(--color-primary, #1a1a1a);
    color: var(--color-text-on-primary, #fff);
    padding: 22px;
    border-radius: 3px;
}

.media-nl__kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.media-nl__titre {
    font-family: var(--font-heading, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 6px 0 14px;
}

.media-nl__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.media-nl__champ {
    width: 100%;
    padding: 11px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    border: 0;
    border-radius: 3px;
    background: #fff;
    color: #1a1a1a;
}

.media-nl__bouton {
    width: 100%;
    padding: 11px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    background: var(--color-primary-light, #f5f5f5);
    color: var(--color-primary, #1a1a1a);
}

.media-nl__bouton:focus {
    outline: 2px solid var(--color-text-on-primary, #fff);
    outline-offset: 2px;
}

.media-nl .subscribe-message {
    margin: 10px 0 0;
    max-width: none;
}

.media-nl__mention {
    margin: 10px 0 0;
    font-size: 0.8rem;
}

.media-nom {
    padding: 12px 0;
    border-top: 1px solid #e3e3e3;
}

.media-nom:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.media-nom__personne {
    font-family: var(--font-heading, inherit);
    font-size: 1.02rem;
    font-weight: 700;
}

.media-nom__detail {
    margin: 3px 0;
    font-size: 0.85rem;
    color: #444;
}

.media-pave {
    display: flex;
    justify-content: center;
}

.media-autres {
    list-style: none;
    margin: 0;
    padding: 0;
}

.media-autres li {
    padding: 8px 0;
    border-top: 1px solid #e3e3e3;
    font-size: 0.92rem;
}

.media-autres li:first-child {
    border-top: 0;
    padding-top: 0;
}

.media-autres a:hover {
    color: var(--color-primary, #1a1a1a);
    text-decoration: underline;
}

/* ── La page d'une rubrique ───────────────────────────────────────────────── */
.media-rubrique__entete {
    margin: 4px 0 28px;
}

.media-rubrique__titre {
    font-family: var(--font-heading, inherit);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 4px 0 10px;
}

.media-rubrique__intro {
    margin: 0;
    color: #555;
    font-size: 1rem;
}

.media-liste__item {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid #e3e3e3;
}

.media-liste__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.media-liste__titre {
    font-family: var(--font-heading, inherit);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 2px 0 6px;
}

.media-liste__chapo {
    margin: 0;
    font-size: 0.93rem;
    color: #444;
    line-height: 1.5;
}

/* ── Écrans étroits : une seule colonne, dans l'ordre de lecture ─────────── */
@media (max-width: 960px) {
    .media__grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .media-une {
        grid-template-columns: minmax(0, 1fr);
    }

    .media-une__image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 480px;
    }
}

@media (max-width: 640px) {
    .media-second,
    .media-blocs {
        grid-template-columns: minmax(0, 1fr);
    }

    .media-une__titre {
        font-size: 1.55rem;
    }

    .media-rubrique__titre {
        font-size: 1.7rem;
    }

    .media-vignette--liste {
        width: 88px;
        height: 88px;
    }

    .media-numeros {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .media-numeros__item {
        flex-direction: row;
        gap: 14px;
    }

    .media-numeros__image {
        flex-shrink: 0;
        width: 96px;
        height: 96px;
        aspect-ratio: auto;
    }

    .site-header__abonner {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* ── PAGINATION DES ARCHIVES (02/10/2026) ──────────────────────────────────
   L'index des numéros rendait tout d'un coup ; il pagine désormais à douze,
   comme le thème. Ces trois règles n'existent pas dans le thème, qui s'appuie
   sur le balisage de `the_posts_pagination()` de WordPress et sur ses classes
   `.nav-links`. Le socle rend un markup plus simple (deux liens et un rang),
   donc des classes à lui, dans le motif des autres : valeurs de repli
   partout, aucune variable de marque obligatoire. */
.archives-pages > .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.archives-pages__lien {
    color: var(--color-primary, #333);
    font-weight: 600;
    text-decoration: none;
}

.archives-pages__lien:hover {
    text-decoration: underline;
}

.archives-pages__rang {
    color: #666;
    font-size: 0.9rem;
}