/* Page d'accueil /blog (1 page) — complement a content-page.css (deja
   charge globalement pour cette page), qui couvre deja l'essentiel du
   vocabulaire reel (main > section/hgroup/[data-eyebrow]/ul[data-cards]/
   dl[data-stats]). CSS mort confirme non repris : bloc "Header premium &
   menus deroulants" ciblant `body > header`/`body > footer` (selecteurs
   d'une iteration anterieure du design, avant le passage aux ID reels
   #site-header/#site-footer utilises par Header.astro/Footer.astro — deja
   couverts par header-styles.css/footer-styles.css, meme motif que sur
   pour-qui/content-page.css). Le CSS ci-dessous est la version consolidee
   des 3 couches de retouches trouvees dans la source (bloc "specifique a
   cette proposition" -> "calibrage-titres-plus" -> "stats-affinees"/
   "hero-blog-sobre", cette derniere l'emportant a chaque fois qu'elle
   redefinit une propriete deja posee plus haut).

   NB — la source elle-meme annonce cette page comme "PROPOSITION de refonte,
   alternative a comparer, ne remplace rien" (commentaire en tete du head) :
   contrairement a toutes les pages migrees jusqu'ici, ce n'est pas presente
   comme une version finale prete a adopter. A confirmer avec le patron avant
   mise en prod definitive si le doute n'a pas deja ete leve. */

main p { max-width: 70ch; }
main > section > hgroup > p { margin-inline: auto; }

/* Hero compact (valeurs finales : calque "hero-blog-sobre") */
main > section:first-of-type { padding-block: 1.8rem 1.2rem; }
main > section:first-of-type h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
main > section:first-of-type > hgroup { margin-bottom: 1rem; }
main > section:first-of-type > hgroup > p { font-size: .98rem; max-width: 60ch; margin-inline: auto; }
main > section:first-of-type > nav[aria-label="Actions principales"] { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: 1.6rem; }

/* Titres de section (calque "calibrage-titres-plus") */
main section h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem); line-height: 1.25; }
main section { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
main section > hgroup { margin-bottom: 1.6rem; }
/* content-page.css cible ces memes paragraphes avec :not([data-eyebrow]) et
   :last-child (specificite superieure a un simple "hgroup > p") — sans les
   memes qualificatifs ici, cette regle ne l'emportait jamais malgre un
   chargement plus tardif, laissant les sous-titres de section a 24px
   (var(--step-1)) au lieu de la taille calibree voulue. Specificite egale
   ou superieure requise pour gagner, :first-of-type exclu (garde son propre
   calque "Hero compact" ci-dessus). */
main > section:not(:first-of-type) > hgroup > p:not([data-eyebrow]) { font-size: 1.02rem; }
main > section:not(:first-of-type) > hgroup > p:last-child { font-size: 1.02rem; }

/* Mini-stats en ligne (valeurs finales : calque "stats-affinees") */
main dl[data-stats] { display: flex; flex-wrap: wrap; gap: .4rem 0; align-items: stretch; justify-content: center; margin: 0 0 1.6rem; }
main dl[data-stats] > dt { flex-basis: 100%; display: none; }
main dl[data-stats] > dd { margin: 0; padding: .1rem 1.5rem; font-weight: 800; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; text-align: center; border-left: 1px solid var(--line); }
main dl[data-stats] > dd:first-of-type { padding-left: 0; border-left: 0; }
main dl[data-stats] > dd::after { content: attr(data-label); display: block; font-size: .6rem; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; color: var(--ink-mute); margin-top: .2rem; white-space: nowrap; }
main dl[data-stats] a:hover { color: var(--terra); }

/* Pills de rubriques */
main nav[data-topics] { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: var(--measure); margin: 0 auto; }
main nav[data-topics] a { border: 1.5px solid var(--line); border-radius: 999px; padding: .45rem 1.05rem; font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); background: var(--card); transition: .15s; }
main nav[data-topics] a:hover { border-color: var(--terra); color: var(--terra); }
main nav[data-topics] a[aria-current="page"] { background: var(--terra); border-color: var(--terra); color: #fff; }

/* Cartes d'articles : carte entiere cliquable, meta calee en bas */
main ul[data-cards] > li > a { display: block; height: 100%; }
main section > ul[data-cards] article { grid-template-rows: auto auto 1fr auto; }
main section > ul[data-cards] figure > img { aspect-ratio: 16/9; }
main section > ul[data-cards] article > p { margin-bottom: .9rem; }
main section > ul[data-cards] article > p[data-meta] { margin: 0 1.3rem 1.15rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* Note de bas de section */
main section > p[data-note] { max-width: 52rem; margin: 1.8rem auto 0; text-align: center; font-size: var(--step--1); color: var(--ink-mute); }
main section > p[data-note] a { color: var(--terra); font-weight: 700; border-bottom: 1px solid currentColor; }

mark { background: none; color: #e8a13a; }