/* ═══════════════════════════════════════════════════════════════════════════════════
   LE GABARIT D'ARTICLE — une seule feuille pour les neuf articles
   (lot C de l'échelle typographique, spéc CMO 43191bb · direction 2026-09-09)

   ⚠️ AVANT CE LOT, CE FICHIER N'EXISTAIT PAS : les neuf articles portaient leur CSS
   en clair dans leur <head>, et ces copies avaient DÉJÀ divergé — cinq feuilles
   différentes pour neuf articles, quatre d'entre elles à exemplaire unique
   (interligne 1,6 ici et 1,7 là, `.chiffre` d'un côté et `.encadre` de l'autre, deux
   opacités de photo). C'est la cause de la dérive typographique du blog, pas un détail
   d'exécution : sans gabarit partagé, chaque article rejouait l'arbitrage à sa façon.
   TOUT AJOUT DE STYLE D'ARTICLE SE FAIT ICI. Un <style> rouvert dans un article
   recommence la divergence.

   La typographie vient des JETONS de l'échelle (déclarés dans shared.css) : un palier
   = un endroit. Aucune taille en dur ci-dessous, aucune pile de secours en Jost —
   un titre retombe sur Georgia, serif, jamais sur la police de lecture.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── Charpente ── */
.article-wrap { padding-top: 0; }
.article-hero { width: 100%; aspect-ratio: 21/8; overflow: hidden; background: var(--dark); max-height: 520px; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.article-container { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.article-header { padding: 48px 0 40px; border-bottom: 1px solid var(--border); margin-bottom: 48px; }
@media (max-width: 540px) { .article-container { padding: 0 16px; } }

/* ── Palier 9 — étiquette ── */
.article-cat, .toc-title, .lire-aussi-kicker, .la-card-cat {
  font-family: var(--ff-texte); font-weight: 600;
  font-size: var(--fs-9); line-height: var(--lh-9);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.article-cat { margin-bottom: 20px; }
.toc-title { margin-bottom: 12px; }
.lire-aussi-kicker { margin-bottom: 14px; }
.la-card-cat { margin-bottom: 8px; }

/* ── Palier 1 — titre de page ── */
.article-title {
  font-family: var(--ff-titre); font-weight: 360;
  font-size: var(--fs-1); line-height: var(--lh-1);
  letter-spacing: -0.02em; color: var(--dark); margin-bottom: 20px;
}

/* ── Palier 2 — titre de chapitre ── */
.article-body h2, .lire-aussi-title {
  font-family: var(--ff-titre); font-weight: 380;
  font-size: var(--fs-2); line-height: var(--lh-2);
  letter-spacing: -0.02em; color: var(--dark);
}
.article-body h2 { margin: 56px 0 20px; }
.article-body h2::before {
  content: ''; display: block; width: 28px; height: 1px;
  background: var(--gold); margin-bottom: 16px;
}
.lire-aussi-title { margin-bottom: 32px; }

/* ── Palier 3 — titre de carte et de bloc ──
   ⚠️ .article-cta-title n'est nommé par aucun palier de la spéc : je l'ai rangé ici
   parce que c'est le titre d'un bloc encadré, du même rang qu'une carte, et parce
   qu'il ne pouvait pas rester en Jost (la frontière l'interdit). À confirmer CMO. */
.la-card-title, .article-cta-title {
  font-family: var(--ff-titre); font-weight: 400;
  font-size: var(--fs-3); line-height: var(--lh-3);
  letter-spacing: -0.02em;
}
.la-card-title { margin-bottom: 16px; color: var(--dark); }
.article-cta-title { color: var(--white); margin-bottom: 10px; }

/* ── Palier 4 — titre mineur ──
   Le <strong> d'un .encadre n'est pas une emphase : c'est le titre du bloc
   (« Ce que nous déconseillons »), à la différence du <strong> d'un .chiffre,
   qui est un montant et va au palier des chiffres. */
.article-body .encadre strong {
  display: block;
  font-family: var(--ff-titre); font-weight: 400;
  font-size: var(--fs-4); line-height: var(--lh-4);
  letter-spacing: -0.02em; color: var(--gold-deep); margin-bottom: 8px;
}

/* ── Palier 4b — citation d'ouverture ── */
.article-body blockquote {
  border-left: 2px solid var(--gold); padding-left: 24px; margin: 36px 0;
  font-family: var(--ff-titre); font-weight: 400; font-style: italic;
  font-size: var(--fs-4); line-height: var(--lh-4b); color: var(--dark);
}

/* ── Palier 5 — chapô ──
   L'italique du chapô d'article est CONSERVÉ : la spéc ne le mentionne pas, et le
   palier ne porte pas de style. Même traitement qu'en lot A pour .metiers-coord-title. */
.article-body .intro, .article-cta > p:not(.article-cta-title) {
  font-family: var(--ff-texte); font-weight: 400; font-style: italic;
  font-size: var(--fs-5); line-height: var(--lh-5);
}
.article-body .intro { color: var(--muted); margin-bottom: 40px; }
.article-cta > p:not(.article-cta-title) { color: rgba(255,255,255,.6); margin-bottom: 24px; }

/* ── Palier 6 — texte courant — interligne 1,7, valeur unique du site ── */
.article-body {
  font-family: var(--ff-texte); font-weight: 400;
  font-size: var(--fs-6); line-height: var(--lh-6); color: var(--dark);
}
.article-body p { margin-bottom: 28px; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong { font-weight: 600; color: var(--dark); }

/* ── Palier 7 — secondaire ── */
.article-body .chiffre, .article-body .encadre, .toc-list a {
  font-family: var(--ff-texte); font-weight: 400;
  font-size: var(--fs-7); line-height: var(--lh-7);
}
.article-body .chiffre, .article-body .encadre {
  background: var(--papier); border-left: 3px solid var(--gold);
  padding: 20px 24px; margin: 32px 0; color: var(--dark);
}

/* ── Palier 8 — note ── */
.article-meta, .la-card-link {
  font-family: var(--ff-texte);
  font-size: var(--fs-8); line-height: var(--lh-8);
}
.article-meta { display: flex; align-items: center; gap: 16px; color: var(--muted); flex-wrap: wrap; font-weight: 400; }
.article-meta-sep { width: 3px; height: 3px; background: var(--muted); border-radius: 50%; opacity: .5; }
.la-card-link { font-weight: 600; color: var(--gold-deep); }

/* ── Les chiffres ──
   Le <strong> d'un .chiffre est un montant autonome (« 80 000 € TTC »), même rôle que
   .stat-num et .met-num sur l'accueil : il va au palier des chiffres.
   ⚠️ COULEUR : laiton-DEEP et non laiton-1. Mesuré sur son fond réel (plâtre-2),
   laiton-1 tombe à 2,46:1 — sous le seuil de 3:1 des grands textes. laiton-deep : 4,5:1.
   Règle du 2026-09-08 : sur fond clair, le jeton de texte est laiton-deep. */
.article-body .chiffre strong {
  display: block;
  font-family: var(--ff-titre); font-weight: 300; font-style: normal;
  font-size: var(--fs-n-stat); line-height: var(--lh-n);
  letter-spacing: -.03em; color: var(--gold-deep); margin-bottom: 4px;
}

/* ── Bloc CTA ── */
.article-cta { background: var(--dark); margin: 64px 0 80px; padding: 40px 32px; border-radius: 2px; text-align: center; }

/* ── Sommaire ──
   ⚠️ FOND EN PAPIER, PAS EN PLÂTRE-2 (option A, arbitrage CMO 2026-09-10). Le laiton-deep
   est calibré à 4,96:1 sur PLÂTRE ; sur plâtre-2, plus foncé, la même encre tombait à
   4,46:1 — sous le seuil de 4,5. Sur papier elle remesure 5,36:1. Les trois encarts de
   la même famille (.toc, .chiffre, .encadre) ont changé ENSEMBLE : ils sont du même
   registre, en sortir un seul n'aurait pas de sens. */
#toc-container { background: var(--papier); border-left: 3px solid var(--gold); padding: 20px 24px; margin: 32px 0; border-radius: 0 2px 2px 0; display: none; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.toc-list a { color: var(--muted); transition: color 0.2s; display: flex; align-items: flex-start; gap: 6px; }
.toc-list a:hover { color: var(--dark); }
.toc-list a::before { content: '↓'; color: var(--gold-deep); font-size: .75em; flex-shrink: 0; margin-top: 2px; }

/* ── À lire aussi ── */
.lire-aussi { background: var(--cream); padding: 64px 0; border-top: 1px solid var(--border); }
.lire-aussi-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.la-grid { display: grid; gap: 24px; }
@media (min-width: 640px) { .la-grid { grid-template-columns: 1fr 1fr; } }
.la-card { background: var(--white); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; transition: box-shadow 0.3s; }
.la-card:hover { box-shadow: 0 8px 24px rgba(28,26,18,.07); }
.la-card-img { aspect-ratio: 16/9; overflow: hidden; }
.la-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.la-card:hover .la-card-img img { transform: scale(1.03); }
.la-card-body { padding: 20px; }
