/*
 * Feuille de style des pages de blog.
 *
 * Fichier séparé, contrairement aux pages fixes qui portent leur style en
 * ligne : on lit rarement un seul article. Le style est chargé une fois puis
 * relu depuis le cache du navigateur au passage suivant, alors qu'en ligne il
 * repart dans chaque page. Il est servi sous une URL qui porte l'empreinte de
 * son contenu, donc gardé un an sans risque de servir l'ancien après une mise
 * à jour (même règle que les assets du back-office).
 *
 * Les variables sont celles de index.html : une seule palette pour le site.
 * Elles y restent en ligne tant que les trois pages fixes n'ont pas besoin de
 * ce fichier — le jour où on les mutualise, c'est ici qu'elles viennent.
 */
:root {
  --encre: #f2f1ee;
  --encre-doux: #9ba0ac;
  --papier: #0d0e12;
  --creme: #14161c;
  --trait: #262a33;
  --accent: #f97316;
  --accent-doux: #2a1a10;
  --nuit: #08090c;
  --rayon: 0.7rem;
  --mesure: 68rem;
  /* Le corps d'un article se lit sur une colonne plus étroite que la landing :
     au-delà d'environ 70 signes, l'œil perd la ligne suivante en revenant. */
  --colonne: 44rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 17px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; font-weight: 640; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); letter-spacing: -0.015em; }
h3 { font-size: 1.18rem; }
p { margin: 0; }
a { color: var(--accent); }

.mesure { max-width: var(--mesure); margin-inline: auto; }
.bande { padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.surtitre {
  font: 600 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.chapo { color: var(--encre-doux); font-size: 1.13rem; max-width: var(--colonne); }

/* ── En-tête ───────────────────────────────────────────────────────────── */
header.barre {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: rgba(13, 14, 18, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.marque { font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; text-decoration: none; color: var(--encre); }
.marque span { color: var(--accent); }
.barre nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.barre nav a { color: var(--encre-doux); text-decoration: none; font-size: 0.94rem; }
.barre nav a:hover { color: var(--encre); }
@media (max-width: 44rem) { .barre nav a.masquable { display: none; } }

.bouton {
  display: inline-block; background: var(--accent); color: #fff;
  font-weight: 650; text-decoration: none;
  padding: 0.85rem 1.6rem; border-radius: var(--rayon);
  transition: filter 0.15s ease;
}
.bouton:hover { filter: brightness(1.07); }
.bouton.petit { padding: 0.55rem 1.1rem; font-size: 0.94rem; }
.bouton.clair { background: var(--encre); color: var(--papier); }

/* ── Liste des articles ────────────────────────────────────────────────── */
.articles { display: grid; gap: 1.25rem; margin-top: 2.5rem; list-style: none; padding: 0; }
@media (min-width: 52rem) { .articles { grid-template-columns: repeat(2, 1fr); } }
.article-carte {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.5rem;
}
.article-carte:hover { border-color: var(--accent); }
.article-carte h2 { font-size: 1.25rem; }
.article-carte h2 a { color: var(--encre); text-decoration: none; }
.article-carte p { color: var(--encre-doux); font-size: 0.97rem; }
.etiquette {
  align-self: start;
  font: 600 0.72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-doux);
  padding: 0.35rem 0.6rem; border-radius: 999px;
}
.signature {
  color: var(--encre-doux); font-size: 0.88rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.vide { color: var(--encre-doux); margin-top: 1.5rem; }

/* ── Corps de l'article ────────────────────────────────────────────────── */
.article { max-width: var(--colonne); margin-inline: auto; }
.article-entete { border-bottom: 1px solid var(--trait); padding-bottom: 1.6rem; }
.article-entete .signature { margin-top: 1.1rem; }
.couverture {
  display: block; width: 100%; height: auto;
  margin-top: 2rem; border-radius: var(--rayon); border: 1px solid var(--trait);
}
.corps { margin-top: 2.2rem; }
.corps > * + * { margin-top: 1.3rem; }
.corps h2 { margin-top: 2.6rem; }
.corps h3 { margin-top: 2rem; }
.corps ul, .corps ol { padding-left: 1.3rem; color: var(--encre); }
.corps li + li { margin-top: 0.5rem; }
.corps blockquote {
  margin: 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--accent); color: var(--encre-doux);
}
.corps code {
  font: 0.92em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: 0.35rem; padding: 0.1rem 0.35rem;
}
.corps pre {
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.1rem; overflow-x: auto;
}
.corps pre code { background: none; border: 0; padding: 0; }
.corps img { max-width: 100%; height: auto; border-radius: var(--rayon); }

/* ── FAQ et suite de lecture ───────────────────────────────────────────── */
.apres { max-width: var(--colonne); margin: 3.5rem auto 0; }
.apres h2 { margin-bottom: 1rem; }
details { border-bottom: 1px solid var(--trait); padding: 1.1rem 0; }
summary { cursor: pointer; font-weight: 620; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; float: right; color: var(--accent); font-weight: 700; }
details[open] summary::after { content: '−'; }
details p { margin-top: 0.7rem; color: var(--encre-doux); }
.liens { list-style: none; padding: 0; margin: 0; }
.liens li { border-bottom: 1px solid var(--trait); padding: 0.9rem 0; }
.liens a { color: var(--encre); text-decoration: none; }
.liens a:hover { color: var(--accent); }

/* ── Appel et pied ─────────────────────────────────────────────────────── */
.appel { background: var(--nuit); text-align: center; margin-top: 4rem; }
footer { border-top: 1px solid var(--trait); padding: 2rem 1.25rem; }
.pied { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--encre-doux); font-size: 0.9rem; }
.pied a { color: var(--encre-doux); }