/* =============================================================
   SUPAPUNK — le blog
   Lecture d'abord : une colonne de texte étroite, beaucoup de
   blanc, un sommaire collant qui suit les H2. Reprend les jetons
   du thème, aucune couleur en dur.
   ============================================================= */

/* ---------- liste ---------- */
.blog-tete { padding: clamp(80px, 11vw, 170px) 0 clamp(40px, 6vw, 80px); }
.blog-tete-titre {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: .92; letter-spacing: -.015em;
  margin: 18px 0 0;
}
.blog-tete-chapo {
  max-width: 56ch; margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.65; color: var(--ink-mute);
}

/* ---------- rubriques ---------- */
/* Les pastilles de rubrique, sous le chapô : elles ancrent vers les blocs
   plus bas. Mêmes jetons que le reste, aucune couleur en dur. */
.blog-cats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(22px, 2.6vw, 34px);
}
.blog-cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--ink);
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
/* au survol : aplat jaune, encre — le jaune ne porte jamais de blanc */
.blog-cat:hover { background: var(--sp-yellow, #FCE118); border-color: var(--sp-ink, #17150F); color: var(--sp-ink, #17150F); }
.blog-cat-n { font-size: 10px; opacity: .6; }
.blog-cat:hover .blog-cat-n { opacity: .85; }

.blog-bloc { margin-top: clamp(48px, 6vw, 86px); scroll-margin-top: calc(var(--hdr-pad) * 2 + var(--hdr-logo) + 24px); }
.blog-bloc-titre {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.01em;
  margin: 0 0 clamp(16px, 2vw, 26px);
}
/* La rubrique rappelée sur chaque carte, dans la ligne de méta. */
.blog-carte-cat { color: var(--c-signal); }

.blog-grille-section { padding: clamp(40px, 6vw, 90px) 0 clamp(70px, 9vw, 130px); }
.blog-grille { display: grid; gap: clamp(20px, 2.6vw, 36px); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.blog-carte--une { grid-column: 1 / -1; }
.blog-carte-lien {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border-radius: var(--r-card); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform var(--fast), box-shadow var(--fast);
}
.blog-carte-lien:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(10,37,64,.45); }
.blog-carte--une .blog-carte-lien { flex-direction: row; align-items: stretch; }
@media (max-width: 820px) { .blog-carte--une .blog-carte-lien { flex-direction: column; } }

.blog-carte-image { display: block; overflow: hidden; background: var(--card-2); }
.blog-carte-image img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.blog-carte--une .blog-carte-image { flex: 1 1 52%; }
.blog-carte--une .blog-carte-image img { aspect-ratio: auto; min-height: 280px; }

.blog-carte-corps { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 34px); flex: 1; }
.blog-carte-meta, .blog-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.blog-carte-titre {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.02; letter-spacing: -.01em; margin: 0;
}
.blog-carte--une .blog-carte-titre { font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
.blog-carte-chapo { color: var(--ink-mute); line-height: 1.6; }
.blog-carte-lire {
  margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-signal);
}
.blog-vide { color: var(--ink-mute); }

/* ---------- article ---------- */
/* Le bandeau de titre reste sur le fond sombre du thème : l'en-tête
   flottant y garde son encre blanche, et le titre porte. Le corps de
   lecture passe ensuite sur crème. */
.blog-bandeau { padding: clamp(84px, 11vw, 165px) 0 clamp(36px, 5vw, 70px); }
.fil-ariane {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: clamp(22px, 3vw, 40px); display: flex; gap: 8px; flex-wrap: wrap;
}
.fil-ariane a { color: inherit; text-decoration: none; }
.fil-ariane a:hover { color: var(--ink); }
.fil-ariane span[aria-current] { color: var(--ink); }

.blog-bandeau h1 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.3rem, 6.2vw, 4.8rem); line-height: .94;
  letter-spacing: -.015em; margin: 0; max-width: 20ch;
}
.blog-chapo {
  max-width: 60ch; margin-top: clamp(16px, 2vw, 26px);
  font-size: clamp(17px, 1.25vw, 21px); line-height: 1.65; color: var(--ink-mute);
}
.blog-meta {
  margin-top: 18px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.blog-couverture { margin: clamp(30px, 4vw, 56px) 0 0; }
.blog-couverture img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-card); background: var(--card-2);
}

.blog-article { padding: clamp(44px, 6vw, 86px) 0 clamp(60px, 8vw, 110px); }

.blog-colonnes {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr); margin-top: clamp(36px, 5vw, 72px);
}
@media (min-width: 1000px) {
  .blog-colonnes { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
}

/* sommaire */
.blog-sommaire { font-size: 14px; }
@media (min-width: 1000px) {
  .blog-sommaire { position: sticky; top: calc(var(--hdr-pad) * 2 + var(--hdr-logo) + 20px); max-height: 74vh; overflow-y: auto; }
}
.blog-sommaire-titre {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px;
}
.blog-sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.blog-sommaire li.niv-3 { padding-left: 14px; }
.blog-sommaire a {
  display: block; padding: 7px 0 7px 14px; margin-left: -2px;
  border-left: 2px solid transparent; color: var(--ink-mute);
  line-height: 1.35; text-decoration: none;
  transition: color var(--fast), border-color var(--fast);
}
.blog-sommaire a:hover { color: var(--ink); }
.blog-sommaire a.actif { color: var(--ink); border-left-color: var(--c-signal); font-weight: 600; }

/* corps */
.blog-corps { max-width: 68ch; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.75; }
.blog-corps > * + * { margin-top: 1.15em; }
.blog-corps h2 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.02; letter-spacing: -.01em;
  margin-top: 2em; scroll-margin-top: calc(var(--hdr-pad) * 2 + var(--hdr-logo) + 24px);
}
.blog-corps h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1;
  margin-top: 1.7em; scroll-margin-top: calc(var(--hdr-pad) * 2 + var(--hdr-logo) + 24px);
}
/* liens de prose : le :not(.btn) évite que le soulignement et la couleur
   de lien ne débordent sur les boutons posés dans le corps, comme le CTA. */
.blog-corps a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; text-decoration-color: var(--c-signal); }
/* au survol, le lien s'allume au surligneur plutôt que de changer de
   couleur : sur fond papier, l'encre n'a pas d'autre ton disponible. */
.blog-corps a:not(.btn):hover { background: var(--sp-yellow, #FCE118); text-decoration-color: var(--sp-ink, #17150F); }
.blog-corps ul, .blog-corps ol { padding-left: 1.3em; }
.blog-corps li + li { margin-top: .45em; }
.blog-corps blockquote {
  margin-left: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--c-signal);
  font-size: 1.06em; color: var(--ink);
}
.blog-corps code {
  font-family: var(--mono); font-size: .86em;
  background: var(--card-2); padding: .14em .4em; border-radius: 4px;
}
.blog-corps pre {
  background: var(--card-3); padding: 18px 20px; border-radius: var(--r-sm);
  overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.blog-corps pre code { background: none; padding: 0; }
.blog-corps img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.blog-corps hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.tableau-large { overflow-x: auto; }
.blog-corps table { border-collapse: collapse; width: 100%; font-size: .94em; }
.blog-corps th, .blog-corps td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.blog-corps th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.4em !important; }
.blog-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-mute);
}

.blog-cta {
  margin-top: 3em !important; padding: clamp(26px, 3vw, 44px);
  border-radius: var(--r-card); background: var(--card-2);
}
.blog-cta h2 { margin-top: .3em; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.blog-cta p { color: var(--ink-mute); margin: .7em 0 1.4em; font-size: .96em; }

.blog-voisins { margin-top: clamp(56px, 7vw, 100px); }
.blog-voisins-titre {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px;
}
.blog-voisins-grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.blog-voisin {
  display: flex; flex-direction: column; gap: 10px; justify-content: space-between;
  padding: 22px; border-radius: var(--r-card); background: var(--card);
  color: inherit; text-decoration: none; transition: transform var(--fast);
}
.blog-voisin:hover { transform: translateY(-3px); }
.blog-voisin-titre { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1.08; }
.blog-voisin-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- figures : graphiques et schémas ----------
   Dessinés en SVG dans le corps de l'article, jamais en image bitmap :
   ils restent nets, pèsent trois fois rien et se relisent au clavier.
   Le corps est toujours sur crème (.inv), il n'y a donc qu'un seul mode
   à tenir. L'encre porte la donnée, le gris chaud porte le contexte ;
   le jaune signal ne colore jamais une donnée — contraste 1,07 sur crème —
   il ne sert qu'aux repères et aux aplats sous encre noire. */
.graphe {
  margin: 2.2em 0 !important;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: var(--r-card);
  background: var(--card);
}
.graphe-titre {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.05; letter-spacing: .01em;
}
.graphe-sur {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px;
}
.graphe-sur::before { content: "// "; color: #B9A52A; }
.graphe svg { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.graphe svg text { font-family: var(--body); }
.graphe .t-val  { font-family: var(--display); font-weight: 800; fill: #0A0A0A; }
.graphe .t-lib  { font-size: 13px; fill: #0A0A0A; }
.graphe .t-axe  { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; fill: #5D584D; font-variant-numeric: tabular-nums; }
.graphe .m-fort { fill: #0A0A0A; }
.graphe .m-faible { fill: #C7C1B2; }
.graphe .m-trait { stroke: #D9D4C6; stroke-width: 2; }
.graphe .m-grille { stroke: rgba(10,10,10,.12); stroke-width: 1; }
.graphe figcaption {
  margin-top: 16px; font-size: .82em; line-height: 1.55; color: var(--ink-mute);
}
.graphe figcaption a { color: var(--ink-mute) !important; }

/* Une rangée de chiffres clés — pas un graphique : trois nombres n'en
   méritent pas un. Aplat jaune, encre noire, contraste large. */
.chiffres { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 2.2em 0 !important; }
.chiffre { background: var(--sp-yellow, #FCE118); color: var(--sp-ink, #17150F); padding: clamp(18px, 2.2vw, 26px); }
.chiffre:first-child { border-radius: var(--r-card) 0 0 var(--r-card); }
.chiffre:last-child { border-radius: 0 var(--r-card) var(--r-card) 0; }
.chiffre-val {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: .92; display: block;
}
.chiffre-lib { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; }
@media (max-width: 560px) {
  .chiffre, .chiffre:first-child, .chiffre:last-child { border-radius: var(--r-card); }
  .chiffres { gap: 8px; }
}