/*
 * LMI — page article (gabarit « Guide SEO » = single.php)
 * Maquette : MAQUETTE CLAUDE/Maquettes-LMI-v2/2-Templates-editoriaux/Page-SEO.html
 *
 * Portée : .single-post et .lmi-page-simple. Les gabarits comparatif, avis et
 * vs partagent le même balisage d'en-tête mais ont chacun leur maquette ; les
 * élargir ici casserait un alignement déjà fait. La page simple, elle, n'a
 * AUCUN modèle dans la maquette : le gabarit éditorial lui sert de référence,
 * d'où le bandeau partagé (§1 ci-dessous). Sa mesure de lecture est dans
 * commun.css, puisqu'elle n'a pas de colonne de sommaire pour la borner.
 *
 * Ce qui n'est PAS traité ici, et pourquoi : la maquette sort le fil
 * d'Ariane, le titre, le chapô et la ligne auteur du flux de l'article pour
 * en faire un BANDEAU pleine largeur, au-dessus des deux colonnes. Ces
 * éléments sont rendus par GeneratePress à l'intérieur de <article>, qui est
 * la colonne de droite : aucune règle CSS ne peut les faire passer au-dessus
 * de la colonne de gauche. Il faut un Element « Page Hero » de GP Premium
 * (type page-hero, déjà supporté par la version installée) ou le gabarit du
 * Studio. Voir dossier-studio-lmi.md.
 */

/* ------------------------------------------------------------------ *
 * 1. Le bandeau héros
 * ------------------------------------------------------------------ */

/* Le bandeau est le premier enfant de .site-content (§18 du mu-plugin), qui
   est un conteneur flex : sans `flex-wrap`, il se placerait À CÔTÉ des deux
   colonnes au lieu de les surplomber. */
:is(.single-post, .lmi-page-simple) .site-content {
    flex-wrap: wrap;
}

:is(.single-post, .lmi-page-simple) .lmi-heros {
    /* GeneratePress fait remonter la colonne de gauche avec `order: -10` :
       sans ordre plus bas, elle passerait AVANT le bandeau et le pousserait
       sur une deuxième ligne. */
    order: -20;
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 40px;
    padding: 28px 0 40px;
    background: var(--eldorado-surface);
    /* Le bandeau vit dans le conteneur de 1200 px ; la maquette le veut d'un
       bord à l'autre de l'écran. L'ombre peint au-delà de la boîte et le
       clip-path rouvre le débordement horizontal, sans élargir la page.
       Même procédé que l'accroche de l'accueil (accroche.css). */
    box-shadow: 0 0 0 100vmax var(--eldorado-surface);
    clip-path: inset(0 -100vmax);
}

/* Le contenu s'aligne sur les colonnes du dessous : même bord gauche. */
:is(.single-post, .lmi-page-simple) .lmi-heros-contenu > * {
    margin-inline: 0;
}

:is(.single-post, .lmi-page-simple) .lmi-heros .lmi-fil-ariane {
    margin: 0 0 20px;
    font-size: 15px;
    color: var(--eldorado-texte-doux);
}

/* Taille et interligne du H1 NON touchés : le site rend déjà 50px/1.1, la
   valeur du design system (Styles-de-texte.html, .pr-dl h1). Page-SEO.html
   affiche 52px — c'est la maquette qui s'écarte, pas le site. */
:is(.single-post, .lmi-page-simple) .lmi-heros .entry-title {
    margin: 0 0 14px;
    max-width: 900px;
}

/* Badges : la maquette pose des pastilles pleines, pas des liens encadrés. */
:is(.single-post, .lmi-page-simple) .lmi-heros .badges-container {
    margin: 0 0 12px;
}

:is(.single-post, .lmi-page-simple) .lmi-heros .post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.single-post, .lmi-page-simple) .lmi-heros .post-categories li {
    margin: 0;
    list-style: none;
}

:is(.single-post, .lmi-page-simple) .lmi-heros .post-categories a {
    display: inline-block;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--eldorado-accent) 14%, transparent);
    color: var(--eldorado-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

:is(.single-post, .lmi-page-simple) .lmi-heros .post-categories a:hover {
    background: color-mix(in srgb, var(--eldorado-accent) 24%, transparent);
    text-decoration: none;
}

/* Chapô : il était rendu comme une citation (barre verticale de 4px et
   retrait). Le design system en fait un `.lead` : Public Sans 19px/1.55, en
   texte doux, sans ornement. La taille reste celle du site (19px) ;
   Page-SEO.html en montre 20, le design system fait foi. */
:is(.single-post, .lmi-page-simple) .lmi-heros [role="doc-subtitle"] {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    max-width: 900px;
    line-height: 1.55;
    color: var(--eldorado-texte-doux);
}

/* ------------------------------------------------------------------ *
 * 2. Ligne auteur : auteur, puis dates, puis lecture — vues à droite
 * ------------------------------------------------------------------ */

.single-post .lmi-heros .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0;
    font-size: 14px;
}

/* Les points médians séparaient des éléments désormais espacés. */
.single-post .lmi-heros .entry-meta > .o50 {
    display: none;
}

.single-post .lmi-heros .entry-meta > .byline { order: 1; }
.single-post .lmi-heros .entry-meta > .posted-on { order: 2; }
.single-post .lmi-heros .entry-meta > .meta-item { order: 3; }

.single-post .lmi-heros .entry-meta > .byline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.single-post .lmi-heros .entry-meta img.rounded,
.single-post .lmi-heros .entry-meta .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.single-post .lmi-heros .entry-meta .byline a {
    font-weight: 700;
    color: var(--eldorado-texte);
}

/* Filet vertical entre l'auteur et les informations de publication. */
.single-post .lmi-heros .entry-meta > .posted-on {
    padding-left: 14px;
    border-left: 1px solid var(--eldorado-bordure);
}

/* Sans en-tête, l'article commence par son image : pas de marge superflue. */
.single-post .entry-header:empty {
    display: none;
}

/* ------------------------------------------------------------------ *
 * 3. Image principale et sa légende
 * ------------------------------------------------------------------ */

/* La maquette colle la légende sous l'image, comme le bas d'une même carte.
   Le ratio 16:9 de la maquette est une consigne de cadrage à l'upload : on
   ne le force pas ici, un object-fit couperait les photos du client. */
.single-post figure.featured-image {
    margin: 0 0 24px;
}

.single-post figure.featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px 14px 0 0;
}

.single-post figure.featured-image figcaption {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--eldorado-bordure);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: var(--eldorado-surface);
    font-size: 14px;
    line-height: 1.55;
    color: var(--eldorado-texte-doux);
    text-align: left;
}

/* Sans légende, l'image garde ses quatre coins arrondis. */
.single-post figure.featured-image:not(:has(figcaption)) img {
    border-radius: 14px;
}

/* ------------------------------------------------------------------ *
 * 4. Barre d'actions
 * ------------------------------------------------------------------ */

/* Les boutons de la maquette sont à la largeur de leur texte, alignés à
   gauche ; GeneratePress étire celui du partage sur toute la colonne. */
/* Le cœur encadre la barre de deux filets ; la maquette n'en a pas. */
.single-post [data-eld-composant="barre-actions"] {
    border-top: 0;
    border-bottom: 0;
}

.single-post [data-eld-composant="barre-actions"] .share-buttons-toggler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.single-post [data-eld-composant="barre-actions"] .button-native {
    /* Le cœur pose flex: 1 1 0 : sans flex: 0 0 auto, le bouton s'étire sur
       toute la colonne même avec width: auto. */
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--eldorado-bordure-forte);
    border-radius: var(--eldorado-rayon-controle, 10px);
    background: var(--eldorado-surface);
    color: var(--eldorado-texte);
    font-size: 14px;
    font-weight: 700;
}

.single-post [data-eld-composant="barre-actions"] .button-native:hover {
    border-color: var(--eldorado-accent);
    color: var(--eldorado-accent);
}

/* ------------------------------------------------------------------ *
 * 5. Corps de l'article
 * ------------------------------------------------------------------ */

/* Rien à faire : les H2 sortent déjà en Newsreader 32px/1.2, la valeur du
   design system (.pr-dl h2). Page-SEO.html en montre 34 — même écart que
   pour le H1 et le chapô, et même arbitrage. */

/* ------------------------------------------------------------------ *
 * 6. Note des lecteurs en pied d'article
 * ------------------------------------------------------------------ */

/* Le cœur fige cette carte à 320 px (`.stars-rater { width: 320px }`) et
   centre son contenu ; la maquette (5-Composants-partages/Note-des-lecteurs,
   variante simple) la met à la largeur du texte, question et compteur à
   gauche, étoiles à droite.

   Relevé dans la maquette à 1280 px : carte en flex, padding 20px 22px,
   gap 12px 24px ; titre en Public Sans 17/800 (PAS en Newsreader — c'est
   le seul titre de l'article qui ne soit pas en police de titres) ; ligne
   d'information à 14 px en texte doux ; étoiles de 30 px dans des cibles
   de 40, dorées.

   Portée : `.stars-rater` et non `.single-post .stars-rater`. La maquette
   donne la même boîte au duel (Page-VS), à la page auteur, aux offres et à
   la page mère « les meilleurs » ; restreindre aux articles laissait ces
   gabarits avec la carte de 320 px centrée du cœur. Sur un avis ou un
   comparatif la question ne se pose pas : la bibliothèque y retire
   #rate-content au profit de la zone d'avis (une seule note par page). */
.stars-rater {
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 24px;
    padding: 20px 22px;
    text-align: left;
}

.stars-rater > h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-family: var(--eldorado-police-texte);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.stars-rater > .vote-info {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 14px;
    color: var(--eldorado-texte-doux);
}

.stars-rater > .stars-rating {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

/* Couleur des étoiles. Le cœur peint les étoiles vides en --medium, soit un
   gris plein (#919191 en clair) : cinq pavés gris au milieu d'une carte
   claire, ce que la maquette ne montre nulle part. Elle, elle dessine des
   étoiles PALES (#E1E8F4, le jeton --eldorado-bordure) CERNÉES DE DORÉ
   (stroke #E0A800) — un contour, pas un aplat. Le glyphe ★ n'a pas de
   contour en CSS ; `-webkit-text-stroke` en donne un, et le rendu obtenu
   est celui de la maquette dans les deux thèmes (vérifié à l'écran : fond
   pâle cerclé d'or en clair, bleu nuit cerclé d'or en sombre).
   ⚠️ --eldorado-etoile n'a pas la même valeur selon le thème (#B07800 en
   clair, #f5b301 en sombre) : le cœur assombrit le doré pour qu'il reste
   lisible sur blanc. On prend le jeton, jamais la valeur de la maquette. */
.stars-rater .star {
    color: var(--eldorado-bordure);
    -webkit-text-stroke: 1px var(--eldorado-etoile);
}

/* L'étoile choisie reste pleine. Sans cette règle elle perdrait : le cœur
   écrit `.star.active` (0,2,0) et notre règle ci-dessus pèse autant, mais
   passe après dans l'ordre des feuilles. */
.stars-rater .star.active {
    color: var(--eldorado-etoile);
}

/* Aperçu au survol : le cœur peint toute la rangée en --darkest, c'est à
   dire en blanc cassé sur fond sombre (css/ratings.css, en !important), là
   où la maquette montre le doré de la note. On ne peut battre un
   !important qu'avec un !important plus spécifique. */
.stars-rater .stars-rating:hover .star {
    color: var(--eldorado-etoile) !important;
}

.stars-rater .stars-rating .star:hover ~ .star {
    color: var(--eldorado-bordure) !important;
}

@media (max-width: 560px) {
    .stars-rater {
        grid-template-columns: minmax(0, 1fr);
    }
    .stars-rater > .stars-rating {
        grid-column: 1;
        grid-row: 3;
    }
}

/* ------------------------------------------------------------------ *
 * 7. « À lire aussi »
 * ------------------------------------------------------------------ */

/* La maquette garde ce bloc dans la gouttière de la page ; en ligne il sort
   sur toute la largeur de l'écran. */
/* Même boîte que .site-content, mesurée : 1200 px de large, 40 px de
   gouttière de chaque côté. `min()` tient les deux sans point de rupture. */
.single-post .related-articles-container > .related-articles {
    width: min(1200px, 100% - 40px);
    margin-inline: auto;
}

@media (max-width: 768px) {
    :is(.single-post, .lmi-page-simple) .lmi-heros {
        margin-bottom: 28px;
        padding: 20px 0 28px;
    }
    /* En dessous de 768 px, .site-content touche les bords de l'écran et
       c'est `.inside-article { padding: 10px }` qui crée la gouttière du
       texte. Le bandeau, lui, est hors de l'article : il lui faut la même
       gouttière, sinon le titre colle au bord. */
    .single-post .lmi-heros-contenu {
        padding-inline: 10px;
    }
    .single-post .lmi-heros .entry-meta > .posted-on {
        padding-left: 0;
        border-left: 0;
    }
    .single-post figure.featured-image figcaption {
        padding: 12px 14px;
    }
}