/* =====================================================================
   STELVOREN — L'ARTICLE DE BLOG
   `/blog/<slug>/` (tâches 119 à 122) — lot du 28/09/2026. Rendu en PHP
   par inc/article.php (`single-post.php`).

   Relevé Dev Mode du 28/09, fichier Figma « Refonte »
   (Wiukeiz8DyfOof3a1OSaPR) : `156:9855` (desktop, 1840 × 5830). PAS DE
   MOBILE DESSINÉ : le repli de la colonne de droite est la recommandation
   de la fiche 119, validée par Logan le 28/09 (§ 6).

   Chargée sur les seuls articles, APRÈS blog.css — qui apporte les
   variables de page du blog (`--stv-blog-marge`, `--stv-blog-gouttiere`,
   `--stv-blog-section-y`) et la grille de cartes (`.stv-blog-grille`) que
   « Plus d'articles » reprend telle quelle. Les composants vivent ailleurs :
   le fil d'Ariane, la carte article et la carte éditoriale dans
   composants.css, la prose et sa variante `stv-prose--article` dans
   socle.css (§ 8.3).

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


/* =====================================================================
   0. LA PAGE — `article blog` (156:9857, 1840 × 4007)
   `main.stv-blog` porte déjà la levée du plafond de Hello (blog.css).
   La marge suit celle du blog (80 / 48 / 32 / 20 — 20 en mobile depuis le
   26/10, tâche 193) et son plafond de 1 680.

   Une GRILLE : le fil sur toute la largeur, puis deux colonnes —
   1104 | 192 | 384 (156:9865 et 156:9916 dans 156:9864) — où la colonne
   de droite s'étire sur les trois rangées de gauche (en-tête, contenu,
   auteur) et COLLE en défilant. 48 entre les rangées : le fil est à 48
   du haut et à 48 de l'en-tête (33 de haut : 48 + 33 + 48 = 129), le
   contenu à 48 du filet de l'en-tête, l'auteur à 48 du contenu ; 80
   dessous.

   La colonne de droite VIENT AVANT LE CONTENU dans le balisage (sommaire
   avant ce qu'il annonce) : c'est la grille qui la pose à droite.
   ================================================================== */

.stv-blog--article .stv-article {
  --stv-article-colonnes-ecart: 192px;
  --stv-article-rangees-ecart: var(--stv-espace-48);
  /* La marge entre le bas de l'en-tête fixe et ce qui s'y arrête : la
     colonne collante (§ 2) et l'intertitre visé par une ancre (socle.css
     § 8.3, qui lit cette variable). 20, demandé par Logan le 28/09 — la
     maquette ne dessine pas l'état défilé. */
  --stv-article-decalage-haut: 20px;
  /* La progression de lecture, 0 → 1, posée par article.js sur l'élément. */
  --stv-article-lu: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stv-colonne);
  grid-template-areas:
    "fil     fil"
    "entete  lateral"
    "contenu lateral"
    "auteur  lateral";
  column-gap: var(--stv-article-colonnes-ecart);
  row-gap: var(--stv-article-rangees-ecart);
  align-items: start;
  padding: var(--stv-espace-48) var(--stv-blog-gouttiere) var(--stv-blog-section-y);
}

.stv-blog--article .stv-article > .stv-ariane {
  grid-area: fil;
}

.stv-blog--article .stv-article__entete  { grid-area: entete; }
.stv-blog--article .stv-article__contenu { grid-area: contenu; min-width: 0; }
.stv-blog--article .stv-article__auteur  { grid-area: auteur; }
.stv-blog--article .stv-article__lateral { grid-area: lateral; }


/* =====================================================================
   1. L'EN-TÊTE (156:9866) — pastille + date, 12, H1, 24, un filet
   ================================================================== */

.stv-article .stv-article__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stv-espace-12);
  padding-bottom: var(--stv-espace-24);
  /* Line 211 (156:9873) : gris clair, 1 px — le même trait sous le contenu. */
  border-bottom: 1px solid var(--stv-gris-clair);
}

/* La ligne méta (156:9868) : la pastille et la date de la carte article,
   mais la pastille ROGNÉE AUX CAPITALES comme ici la maquette la dessine
   (26 de haut : 8 + 10 + 8) — l'interligne à la hauteur des capitales
   d'Inter 14, même geste que les puces et la pagination. */
.stv-article .stv-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stv-espace-12);
  margin: 0;
  color: var(--stv-texte-secondaire);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-petit);
  line-height: var(--stv-interligne-texte);
}

.stv-article .stv-article__pastille {
  padding: var(--stv-espace-8) var(--stv-espace-16);
  background: var(--stv-pastille);
  color: var(--stv-texte);
  line-height: 10px;
  text-transform: capitalize;
}

/* Le nom du mois sort en minuscules de WordPress en français. */
.stv-article .stv-article__date {
  text-transform: capitalize;
}

/* Le H1 (156:9872) : Outfit Medium 62 / 1,1 / −0,62 en noir — le dessin du
   hero, `--stv-taille-hero` (42 sous 768). Deux classes contre le `h1`
   du kit (0,1,1). */
.stv-article .stv-article__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-wrap: balance;
}


/* =====================================================================
   2. LA COLONNE DE DROITE (156:9916, 384) — la carte grise (156:9917,
   384 × 291) puis la carte promo (156:9944, 384 × 320) à 16

   La carte grise est UNE SEULE surface dans la maquette (fond gris clair,
   marge 16, deux filets). Ici ce sont trois blocs — temps de lecture,
   sommaire, partage — qui portent chacun le fond et la marge et se
   touchent : c'est ce qui permet, sous 1024, de les séparer sans rien
   dupliquer (§ 6). Les filets sont des pseudo-éléments en tête des deux
   derniers, à 16 du bloc précédent et à 16 de leur contenu.

   COLLANTE : la barre de progression et l'entrée en cours du sommaire
   n'ont de sens que si la colonne reste sous les yeux (barre latérale
   collante ou non : question au designer, fiche 119 — collante par
   défaut). Sous l'en-tête fixe ENTIER — la barre d'annonce PLUS la
   navigation, `--stv-annonce-h` + `--stv-barre-h` comme le panneau mobile
   de composants.css, jamais `--stv-entete-hauteur` seule (96 : la colonne
   passait sous l'annonce de 48, constaté par Logan le 28/09) —, plus la
   marge `--stv-article-decalage-haut` (§ 0) ; la barre d'administration de
   WordPress, quand elle est là, s'ajoute par `--stv-decalage-admin`
   (posée sur `body.admin-bar` par composants.css).
   Depuis le 26/10 (R1, tâche 189) la barre d'annonce part en défilant :
   la colonne lit `--stv-annonce-visible`, ce qu'il en reste à l'écran.
   Et depuis le même jour (Logan, 17 h 42) la navigation se retire en
   descendant sur ordinateur : la colonne lit `--stv-barre-visible`
   (composants.css) et remonte avec elle, au même rythme.
   ================================================================== */

.stv-article .stv-article__lateral {
  position: sticky;
  top: calc(var(--stv-decalage-admin, 0px) + var(--stv-annonce-visible, var(--stv-annonce-h)) + var(--stv-barre-visible, var(--stv-barre-h)) + var(--stv-article-decalage-haut));
  display: flex;
  flex-direction: column;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .stv-article .stv-article__lateral {
    transition: none;
  }
}

.stv-article .stv-article__lecture,
.stv-article .stv-article__sommaire,
.stv-article .stv-article__partage {
  padding: var(--stv-espace-16);
  background: var(--stv-gris-clair);
}

.stv-article .stv-article__sommaire,
.stv-article .stv-article__partage {
  padding-top: 0;
}

/* Line 211 / 212 (156:9926, 156:9938) : anthracite à 20 % — le jeton
   `--stv-filet-liste` (la maquette écrit #2A2928 à 20 %, au chiffre près). */
.stv-article .stv-article__sommaire::before,
.stv-article .stv-article__partage::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--stv-espace-16);
  background: var(--stv-filet-liste);
}

.stv-article .stv-article__promo {
  margin-top: var(--stv-espace-16);
}

/* --- 2.1 Le temps de lecture (156:9918) ------------------------------
   Une ligne — l'icône de 24 sur son carré bleu pétrole à 10 % arrondi de
   4 (le seul arrondi du site : celui de l'icône, pas d'une surface —
   `--stv-rayon` reste à 0), 10, « 7 minutes de lecture » en Outfit 16 à
   interligne 1 — puis, à 8, la barre de 5 : piste bleu pétrole à 10 %,
   avancement bleu pétrole (156:9924 / 156:9925). La maquette écrit le
   texte en #1D1B1A, hors palette : noir. */
.stv-article .stv-article__lecture-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--stv-texte);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-texte);
  font-weight: 400;
  line-height: 1;
}

.stv-article .stv-article__lecture-icone {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--stv-pastille);
  color: var(--stv-bleu-petrole);
}

.stv-article .stv-article__progression {
  position: relative;
  height: 5px;
  margin-top: var(--stv-espace-8);
  overflow: hidden;
  background: var(--stv-pastille);
}

.stv-article .stv-article__progression-fait {
  position: absolute;
  inset: 0;
  background: var(--stv-bleu-petrole);
  transform: scaleX(var(--stv-article-lu));
  transform-origin: left center;
}

/* --- 2.2 Le sommaire (156:9927) ---------------------------------------
   Une liste à 8 d'écart, Inter 14 / 1,5 : l'entrée EN COURS en Medium
   bleu pétrole, précédée de la flèche ↳ (16,75, à 8) ; les autres en
   Regular, bleu pétrole à 70 % (156:9932), sans flèche — la variable
   `--stv-article-sommaire-inactif` est vue une fois, elle reste ici.
   À droite, une PISTE verticale de 3 (156:9935) qui suit la progression
   comme la barre : la maquette la dessine remplie aux trois quarts, en
   #1D1B1A à 10 % puis plein — noir ici. Progression ou barre de
   défilement du sommaire ? Question au designer (88).

   En desktop, la liste est toujours là et le résumé masqué. Sous 1024 le
   `<details>` devient le bouton « Sommaire » (§ 6).

   RENDU FERMÉ DEPUIS LE 03/11 (tâche 168 E — décalage de 0,02 à 0,07 en
   mobile). Le serveur l'écrivait OUVERT et article.js le repliait sous 1024
   après le premier affichage : le contenu remontait de 145 à 230 px, c'était
   le CLS de l'article (la campagne du 08/10 soupçonnait les images). Fermé au
   rendu, il est déplié en desktop par `::details-content`, comme le menu du
   compte (compte.css) ; un navigateur qui ne connaît pas ce pseudo-élément
   (avant Chrome 131, Safari 18.4, Firefox 143) garde le résumé, et
   article.js ouvre le `<details>` au-dessus de 1024. */
.stv-article .stv-article__sommaire {
  --stv-article-sommaire-inactif: rgba(0, 29, 61, 0.7);
}

@media (min-width: 1025px) {
  @supports selector(::details-content) {
    .stv-article .stv-article__sommaire-resume {
      display: none;
    }

    .stv-article .stv-article__sommaire-details::details-content {
      content-visibility: visible;
      display: block;
    }
  }
}

.stv-article .stv-article__sommaire-corps {
  display: flex;
  align-items: stretch;
  gap: var(--stv-espace-8);
}

.stv-article .stv-article__sommaire-liste {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--stv-espace-8);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stv-article .stv-article__sommaire-liste > li {
  margin: 0;
}

/* Deux classes contre le `a` du kit (0,1,1) et le soulignement de Hello. */
.stv-article .stv-article__sommaire-lien {
  display: flex;
  align-items: center;
  gap: var(--stv-espace-8);
  color: var(--stv-article-sommaire-inactif);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-petit);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
  text-decoration: none;
}

.stv-article .stv-article__sommaire-lien:hover,
.stv-article .stv-article__sommaire-lien:focus-visible {
  color: var(--stv-bleu-petrole);
  text-decoration: underline;
  text-underline-position: from-font;
}

.stv-article .stv-article__sommaire-lien[aria-current] {
  color: var(--stv-bleu-petrole);
  font-weight: 500;
}

/* La flèche : dans le balisage de chaque entrée, montrée sur la seule
   entrée en cours. 16 pour 16,75 — le tracé du socle, un seul. */
.stv-article .stv-article__sommaire-icone {
  display: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.stv-article .stv-article__sommaire-lien[aria-current] .stv-article__sommaire-icone {
  display: block;
}

.stv-article .stv-article__sommaire-piste {
  position: relative;
  flex: 0 0 3px;
  overflow: hidden;
  background: var(--stv-fond-quantite);
}

.stv-article .stv-article__sommaire-piste::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--stv-texte);
  transform: scaleY(var(--stv-article-lu));
  transform-origin: center top;
}

/* --- 2.3 Le partage (156:9939) ----------------------------------------
   « Partager sur » en Outfit 16 à interligne 1, 16, les icônes de 18,18
   à 16 l'une de l'autre, bleu pétrole (156:9941). Le bouton de copie est
   un bouton nu ; Facebook, non dessiné, est un lien en texte tant que le
   designer ne livre pas l'icône. */
.stv-article .stv-article__partage-titre {
  margin: 0 0 var(--stv-espace-16);
  color: var(--stv-texte);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-texte);
  font-weight: 400;
  line-height: 1;
}

.stv-article .stv-article__partage-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stv-espace-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stv-article .stv-article__partage-liste > li {
  display: flex;
  margin: 0;
}

.stv-article .stv-article__partage-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stv-bleu-petrole);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-petit);
  font-weight: 500;
  line-height: var(--stv-interligne-texte);
  text-decoration: none;
  cursor: pointer;
}

.stv-article .stv-article__partage-lien:hover,
.stv-article .stv-article__partage-lien:focus-visible {
  color: var(--stv-texte);
}

.stv-article .stv-article__partage-lien:focus-visible {
  outline: 2px solid var(--stv-noir);
  outline-offset: 2px;
}

.stv-article .stv-article__partage-lien--texte {
  text-decoration: underline;
  text-underline-position: from-font;
}

.stv-article .stv-article__partage-icone {
  flex-shrink: 0;
}

/* Un bouton `hidden` le reste, quel que soit l'affichage écrit ci-dessus. */
.stv-article .stv-article__partage-lien[hidden] {
  display: none;
}

/* « Lien copié » : la zone vivante, vide jusqu'au clic — aucune place réservée. */
.stv-article .stv-article__partage-retour {
  margin: 0;
  color: var(--stv-texte-secondaire);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-petit);
  line-height: var(--stv-interligne-texte);
}

.stv-article .stv-article__partage-retour:not(:empty) {
  margin-top: var(--stv-espace-8);
}

/* --- 2.4 La carte promo (156:9944, 384 × 320) ------------------------
   La carte éditoriale (composants.css), à la proportion de la colonne.
   Le lien est l'enfant direct : il prend la largeur. */
.stv-article .stv-article__promo .stv-carte-editoriale {
  --stv-carte-editoriale-rapport: 384 / 320;

  width: 100%;
}


/* =====================================================================
   3. LE CONTENU (156:9874 → 156:9907)
   Tout est dans la prose et sa variante (socle.css, § 8 et § 8.3).
   ================================================================== */


/* =====================================================================
   4. L'AUTEUR (156:9908) — un filet, 24, la photo de 48, 10, deux lignes
   « Publié le … » Inter Light 14 / 1,5 anthracite, le nom Inter Medium 16
   / 1,5 noir. La photo est CARRÉE, sans arrondi (156:9912).
   ================================================================== */

.stv-article .stv-article__auteur {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: var(--stv-espace-24);
  border-top: 1px solid var(--stv-gris-clair);
}

.stv-article .stv-article__auteur-photo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.stv-article .stv-article__auteur-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stv-article .stv-article__auteur-date,
.stv-article .stv-article__auteur-nom {
  margin: 0;
  font-family: var(--stv-police-texte);
  line-height: var(--stv-interligne-texte);
}

.stv-article .stv-article__auteur-date {
  color: var(--stv-anthracite);
  font-size: var(--stv-taille-petit);
  font-weight: 300;
}

.stv-article .stv-article__auteur-date time {
  text-transform: capitalize;
}

.stv-article .stv-article__auteur-nom {
  color: var(--stv-texte);
  font-size: var(--stv-taille-texte);
  font-weight: 500;
}


/* =====================================================================
   5. « PLUS D'ARTICLES » (156:9951, 1840 × 777)
   80 de marge, le titre Outfit Medium 50 / 1,1 (156:9954) et « voir tous
   les articles » (Inter Medium 16 capitales soulignées — le dessin de
   « LIRE L'ARTICLE ») calés en bas sur la même ligne, 80 jusqu'à la
   grille de quatre cartes (la grille de `/blog/`, blog.css), 80 dessous.
   Écart assumé : le cadre de la maquette réserve 32 de plus au-dessus du
   titre (156:9953 fait 87 pour un titre de 55) — 80, le rythme du site.
   ================================================================== */

.stv-blog--article .stv-article-plus {
  display: flex;
  flex-direction: column;
  gap: var(--stv-entete-grille);
  padding: var(--stv-blog-section-y) var(--stv-blog-gouttiere);
}

.stv-article-plus .stv-article-plus__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--stv-espace-16) var(--stv-espace-24);
}

/* Deux classes contre le `h2` du kit (0,1,1). */
.stv-article-plus .stv-article-plus__titre {
  margin: 0;
  color: var(--stv-texte);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-h2);
  font-weight: 500;
  line-height: var(--stv-interligne-titre);
  letter-spacing: -0.005em;
}

/* Deux classes contre le `a` du kit et le soulignement de Hello. */
.stv-article-plus .stv-article-plus__lien {
  color: var(--stv-texte);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-texte);
  font-weight: 500;
  line-height: var(--stv-interligne-texte);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-position: from-font;
}

.stv-article-plus .stv-article-plus__lien:hover,
.stv-article-plus .stv-article-plus__lien:focus-visible {
  text-decoration: none;
}


/* =====================================================================
   6. LARGEURS INTERMÉDIAIRES ET MOBILE — NON DESSINÉES (fiche 119)
   Recommandation validée par Logan le 28/09 :

   sous 1 680 : les 192 entre les colonnes deviennent 48 (comme la une
     du blog) — à 1 440 le contenu fait 848 ;
   sous 1 024 : UNE colonne. La colonne de droite se DÉFAIT — l'`<aside>`
     passe en `display: contents`, ses quatre blocs prennent chacun leur
     rangée : temps de lecture puis sommaire REPLIÉ sous le titre,
     partage puis carte promo après l'auteur. Les blocs gris se séparent
     (leurs filets disparaissent, leur marge haute revient), la barre de
     progression et la piste n'ont plus de colonne collante à habiter :
     masquées ;
   sous 768 : le H1 passe seul à 42 (`--stv-taille-hero`), les
     intertitres à 32 (socle.css, § 8.3), 32 entre les rangées.

   La largeur 1 440 (1104 + 384 ne tiennent pas dans 1 280) est posée au
   designer avec le reste (fiche 119).
   ================================================================== */

@media (max-width: 1679px) {
  .stv-blog--article .stv-article {
    --stv-article-colonnes-ecart: var(--stv-espace-48);
  }
}

@media (max-width: 1024px) {
  .stv-blog--article .stv-article {
    --stv-article-rangees-ecart: var(--stv-espace-32);

    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "fil"
      "entete"
      "lecture"
      "sommaire"
      "contenu"
      "auteur"
      "partage"
      "promo";
    padding-top: var(--stv-espace-32);
  }

  .stv-article .stv-article__lateral {
    display: contents;
  }

  .stv-blog--article .stv-article__lecture  { grid-area: lecture; }
  .stv-blog--article .stv-article__sommaire { grid-area: sommaire; }
  .stv-blog--article .stv-article__partage  { grid-area: partage; }
  .stv-blog--article .stv-article__promo    { grid-area: promo; margin-top: 0; }

  /* Des blocs séparés : chacun reprend sa marge, les filets s'effacent. */
  .stv-article .stv-article__sommaire,
  .stv-article .stv-article__partage {
    padding-top: var(--stv-espace-16);
  }

  .stv-article .stv-article__sommaire::before,
  .stv-article .stv-article__partage::before {
    display: none;
  }

  .stv-article .stv-article__progression,
  .stv-article .stv-article__sommaire-piste {
    display: none;
  }

  /* Le sommaire replié : « Sommaire » est le bouton du <details>. */
  .stv-article .stv-article__sommaire-resume {
    display: list-item;
    color: var(--stv-texte);
    font-family: var(--stv-police-titres);
    font-size: var(--stv-taille-texte);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
  }

  .stv-article .stv-article__sommaire-details[open] > .stv-article__sommaire-resume {
    margin-bottom: var(--stv-espace-16);
  }

  /* La carte promo, seule sur sa rangée : la largeur de la colonne, pas plus haute. */
  .stv-article .stv-article__promo .stv-carte-editoriale {
    max-width: var(--stv-colonne);
  }
}

@media (max-width: 767px) {
  .stv-blog--article .stv-article {
    --stv-article-rangees-ecart: var(--stv-espace-24);
  }

  .stv-blog--article .stv-article-plus {
    gap: var(--stv-espace-32);
  }
}