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

/* ── 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;
    /* #666 et pas #777 : #777 sur blanc fait 4,48:1, sous le 4,5:1 exigé. */
    color: #666;
}

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

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

/* 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 {
    /* #666 et pas #999 (24/09/2026) : #999 sur blanc fait 2,8:1, illisible
       pour beaucoup de lecteurs (PageSpeed). #666 fait 5,7:1. */
    font-size: 0.85rem;
    color: #666;
    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;
    /* POURQUOI plus d'opacité (24/09/2026) : à 0.8 le texte se mélange à la
       couleur de marque et passe sous le contraste 4,5:1 exigé (PageSpeed sur
       la mention « FR » d'AFL ; blanc à 0.8 sur le rouge d'Helvetica : 3,8:1). */
}

.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;
    /* Plus d'opacité, même raison que `.site-header__edition`, sa jumelle. */
}

/* 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;
    /* #666 : #999 sur le fond gris clair du pied de page fait 2,7:1. */
    color: #666;
    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;
    color: #666;
}

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

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