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

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

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

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