/* =====================================================================
   STELVOREN — LE BLOG
   La page des articles `/blog/` (tâche 117) et ses archives (118) —
   lot du 28/09/2026. Rendues en PHP par inc/blog.php (`home.php`,
   `category.php`, `archive.php`).

   Relevé Dev Mode du 28/09, fichier Figma « Refonte »
   (Wiukeiz8DyfOof3a1OSaPR) : `156:9356` (desktop, 1840) et `156:8053`
   (mobile, 393), nœuds cités devant chaque bloc.

   Chargée sur les SEULES pages du blog (inc/blog.php), comme
   catalogue.css sur les seules archives du catalogue. Les composants que
   cette page utilise vivent ailleurs : la carte article et ses trois
   modes, les puces de filtre et la pagination dans composants.css.

   CETTE FEUILLE EST LA DERNIÈRE CHARGÉE sur ces pages (après le socle).
   Ce n'est pas une licence pour gagner par l'ordre : chaque règle qui
   affronte le kit Elementor (`h1`…`h6` à 0,1,1) ou le thème parent la
   bat AU COMPTE, et le dit.

   Largeurs intermédiaires : PROVISOIRES entre 1840 et 393, au rythme du
   catalogue (80 / 48 / 32 / 16) — la question de la largeur 1440 (quatre
   cartes de 384 n'y tiennent pas) est posée au designer (fiche 115).
   ================================================================== */


/* =====================================================================
   0. LA PAGE
   Hello Elementor plafonne `main.site-main` (1140 par défaut). Même levée
   que sur le catalogue et les pages légales, classe répétée (0,2,1).
   ================================================================== */

main.stv-blog.stv-blog {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

/*
   La marge latérale, et le plafond de 1 680 (règle du socle, 22/09) :
   sous 1 840 la marge gagne, au-dessus le contenu se borne à 1 680 et
   le fond reste pleine largeur. La maquette mobile dessine 20 ; la
   règle du site était 16 (décision de la FAQ, 25/09) — elle est 20
   depuis la règle du cadre du designer (331:20582, 26/10, tâche 193),
   comme les pages Elementor et `--stv-page-gouttiere`. L'article
   (article.css) suit cette marge.
*/
.stv-blog {
  --stv-blog-marge: var(--stv-espace-80);
  --stv-blog-gouttiere: max(
    var(--stv-blog-marge),
    (100% - var(--stv-largeur-contenu)) / 2
  );
  --stv-blog-section-y: var(--stv-espace-80);
  --stv-blog-ecart: 64px;
}

@media (max-width: 1439px) {
  .stv-blog { --stv-blog-marge: var(--stv-espace-48); }
}

@media (max-width: 1024px) {
  .stv-blog { --stv-blog-marge: var(--stv-espace-32); }
}

@media (max-width: 767px) {
  .stv-blog {
    --stv-blog-marge: 20px;
    --stv-blog-section-y: var(--stv-espace-32);
    --stv-blog-ecart: var(--stv-espace-32);
  }
}


/* =====================================================================
   1. LA « UNE » — `Blog` (156:9358 ; mobile 156:8055)
   1840 × 1074 : 80 de marge, le H1 centré, 64 jusqu'aux deux colonnes
   (528 | 192 | 960), 80 dessous. Mobile : 32 / 20, H1 42, 32 jusqu'aux
   colonnes empilées, 32 entre elles.
   ================================================================== */

.stv-blog .stv-blog-une {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stv-blog-ecart);
  padding: var(--stv-blog-section-y) var(--stv-blog-gouttiere);
}

/* Le H1 : Outfit Medium 62 / 1,1 / −0,62 (156:9360), 42 en mobile (156:8057).
   Deux classes contre le `h1` du kit (0,1,1). */
.stv-blog .stv-blog-une__titre {
  margin: 0;
  color: var(--stv-texte);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-hero);
  font-weight: 500;
  line-height: var(--stv-interligne-titre);
  letter-spacing: -0.01em;
  text-align: center;
}

/* Les deux colonnes (156:9361) : 528 à gauche, le reste à droite, 192 entre. */
.stv-blog .stv-blog-une__colonnes {
  display: flex;
  align-items: flex-start;
  gap: 192px;
  width: 100%;
}

.stv-blog .stv-blog-une__dernier,
.stv-blog .stv-blog-une__populaires {
  display: flex;
  flex-direction: column;
  gap: var(--stv-espace-24);
  min-width: 0;
}

.stv-blog .stv-blog-une__dernier {
  flex: 0 0 528px;
}

.stv-blog .stv-blog-une__populaires {
  flex: 1 1 0;
}

/* « Dernier article », « Articles populaires » : Outfit Regular 24 / 1,1
   (156:9363, 156:9377), 20 en mobile (156:8060). Deux classes contre le
   `h2` du kit. */
.stv-blog .stv-blog-une__sous-titre {
  margin: 0;
  color: var(--stv-texte);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-intertitre);
  font-weight: 400;
  line-height: var(--stv-interligne-titre);
}

/* Les trois populaires, à 24 l'un de l'autre (156:9378). */
.stv-blog .stv-blog-une__liste {
  display: flex;
  flex-direction: column;
  gap: var(--stv-espace-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stv-blog .stv-blog-une__liste > li {
  margin: 0;
}

/*
   Largeurs intermédiaires (non dessinées, PROVISOIRES). Sous 1 680 les
   192 entre les colonnes deviennent 48 : à 1 440, la colonne des
   populaires ne ferait plus que 560, et le texte d'une carte horizontale
   148 à côté de son image de 368 (mesuré le 28/09). Sous 1 440 les deux
   colonnes s'empilent : 528 + 48 + 368 + 12 + texte ne tient plus. Les
   populaires restent horizontales jusqu'à 1 025, puis la carte redevient
   une colonne (composants.css).
*/
@media (max-width: 1679px) {
  .stv-blog .stv-blog-une__colonnes {
    gap: var(--stv-espace-48);
  }
}

@media (max-width: 1439px) {
  .stv-blog .stv-blog-une__colonnes {
    flex-direction: column;
    gap: var(--stv-espace-48);
  }

  .stv-blog .stv-blog-une__dernier {
    flex: 0 0 auto;
    width: 100%;
    max-width: 528px;
  }

  .stv-blog .stv-blog-une__populaires {
    flex: 0 0 auto;
    width: 100%;
  }
}

/*
   Sous 768 le H1 passe seul à 42 et les sous-titres à 20 : les jetons
   `--stv-taille-hero` et `--stv-taille-intertitre` changent de valeur
   dans jetons.css. Rien à redire ici.
*/
@media (max-width: 767px) {
  .stv-blog .stv-blog-une__colonnes {
    gap: var(--stv-espace-32);
  }

  .stv-blog .stv-blog-une__dernier {
    max-width: none;
  }
}


/* =====================================================================
   2. LA LISTE — `listeArticles` (156:9412 ; mobile 156:8109)
   1840 × 868 : 80 de marge, le titre et les puces (68 + 24 + 28), 64
   jusqu'à la grille de 4 × 384 à 48, 64 jusqu'à la pagination (10), 80
   dessous. Mobile : 32 / 20, titre 32 sur deux lignes, puces sur
   plusieurs lignes, 32 jusqu'à la grille en une colonne à 16, 32
   jusqu'à la pagination.

   Sur une archive c'est le H1 de la page qui tient la place du titre.
   ================================================================== */

.stv-blog .stv-blog-liste {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--stv-blog-ecart);
  padding: var(--stv-blog-section-y) var(--stv-blog-gouttiere);
  /* Cible du défilement après un filtre (blog.js) : sous l'en-tête fixe
     ENTIER — annonce + navigation, les deux variables de composants.css.
     `--stv-entete-hauteur` seule (96) laissait le haut de la liste sous la
     barre d'annonce ; corrigé le 28/09 avec l'article. Pas la barre
     d'administration : WordPress la compte par `scroll-padding-top` sur
     <html> (socle.css § 8.3 dit pourquoi).
     Depuis le 26/10 (R1, tâche 189), la barre d'annonce part dès qu'on a
     défilé : après le saut, seule la navigation couvre le haut. */
  /* 29/10 (tâche 184) : la navigation est désormais comptée par le
     document (`:root { scroll-padding-top }`, composants.css) — la
     compter ici aussi la doublerait. */
  scroll-margin-top: 0;
}

.stv-blog .stv-blog-liste__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stv-espace-24);
}

/* « Nos articles par thématique » : le dessin du H1 (Outfit Medium 62),
   en H2 sur `/blog/`, en H1 sur une archive. Mobile : 32 (156:8111).
   Deux classes contre `h1` et `h2` du kit (0,1,1). */
.stv-blog .stv-blog-liste__titre {
  margin: 0;
  color: var(--stv-texte);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-hero);
  font-weight: 500;
  line-height: var(--stv-interligne-titre);
  letter-spacing: -0.01em;
}

/* La grille (156:9430) puis la pagination (156:9471), à 64 (32 en mobile). */
.stv-blog .stv-blog-liste__corps {
  display: flex;
  flex-direction: column;
  gap: var(--stv-blog-ecart);
  outline: none;
}

.stv-blog .stv-blog-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--stv-gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stv-blog .stv-blog-grille > li {
  margin: 0;
  min-width: 0;
}

/* Les cartes d'une rangée à la même hauteur : la grille étire le <li>,
   la carte le remplit, et « LIRE L'ARTICLE » se cale en bas (margin-top
   auto, composants.css) comme sur la maquette. */
.stv-blog .stv-blog-grille .stv-carte-article {
  height: 100%;
}

/* État non dessiné (fiche 115) : provisoire. */
.stv-blog .stv-blog-vide {
  margin: 0;
  color: var(--stv-anthracite);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-texte);
  line-height: var(--stv-interligne-texte);
}

/* Pendant qu'un filtre charge (blog.js) : la grille s'estompe. Provisoire. */
.stv-blog--chargement .stv-blog-liste__corps {
  opacity: 0.5;
  transition: opacity 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .stv-blog--chargement .stv-blog-liste__corps {
    transition: none;
  }
}

/*
   Colonnes intermédiaires, PROVISOIRES : quatre au-dessus de 1 440,
   trois jusqu'à 1 025, deux jusqu'à 601, une en dessous — au rythme du
   catalogue, la gouttière de 48 gardée.
*/
@media (max-width: 1439px) {
  .stv-blog .stv-blog-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .stv-blog .stv-blog-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--stv-espace-24);
  }
}

/* Le titre de la liste : 32 sur deux lignes en mobile (156:8111) — le
   jeton `--stv-taille-h2`, qui vaut 32 sous 768 (jetons.css). */
@media (max-width: 767px) {
  .stv-blog .stv-blog-liste__titre {
    font-size: var(--stv-taille-h2);
  }
}

@media (max-width: 600px) {
  .stv-blog .stv-blog-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stv-espace-16);
  }
}