/* ═════════════════════════════════════════════════════════════════════════
   BLOG — feuille autonome des pages rendues côté serveur
   =========================================================================

   Ces pages (/blog, /blog/mon-article) ne chargent PAS app.css : ce sont des
   documents statiques, pas l'application. Elles n'ont besoin ni du layout
   d'app, ni des 1200 lignes de composants — seulement d'une colonne de
   lecture propre.

   Les jetons ci-dessous sont donc RECOPIÉS depuis app.css, pas importés.
   Si la palette du site change là-bas, elle doit être répercutée ici. C'est
   le prix d'une page indépendante qui s'affiche même si l'app est cassée.

   Préfixe volontaire : b* (bh = en-tête, bw = colonne, bc = carte,
   ba = article, bf = pied). Aucune collision possible avec les classes de
   l'application.

   Le thème sombre suit la préférence système : il n'y a pas de bouton ici,
   le visiteur n'est pas connecté et on ne pose aucun cookie sur ces pages.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:oklch(0.984 0.004 190);
  --sur:#ffffff;
  --brd:oklch(0.915 0.006 210);
  --txt:oklch(0.24 0.02 235);
  --mut:oklch(0.55 0.016 235);
  --acc:oklch(0.55 0.13 157);
  --acc-strong:oklch(0.47 0.12 157);
  --acd:oklch(0.55 0.13 157 / 0.10);
  --sec-bg:oklch(0.28 0.09 157);
  --sec-txt:oklch(0.98 0.01 150);
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --code-bg:oklch(0.955 0.006 210);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:oklch(0.175 0.012 240);
    --sur:oklch(0.215 0.015 240);
    --brd:oklch(0.315 0.016 240);
    --txt:oklch(0.95 0.005 240);
    --mut:oklch(0.66 0.018 240);
    --acc:oklch(0.76 0.15 158);
    --acc-strong:oklch(0.82 0.15 158);
    --acd:oklch(0.76 0.15 158 / 0.16);
    --sec-bg:oklch(0.225 0.075 157);
    --code-bg:oklch(0.255 0.015 240);
  }
}

*{box-sizing:border-box;margin:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--bg);color:var(--txt);
  line-height:1.65;
  /* 16px minimum : en dessous, iOS Safari zoome au premier tap sur un champ. */
  font-size:16px;
}
a{color:var(--acc-strong);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px;}
img{max-width:100%;height:auto;}

/* ── En-tête ── */
.bh{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1080px;margin:0 auto;padding:16px 20px;
}
.bh-brand{display:flex;align-items:center;gap:10px;color:var(--txt);}
.bh-brand:hover{text-decoration:none;}
.bh-logo{
  width:30px;height:30px;flex:none;border-radius:9px;background:var(--acc);
  display:flex;align-items:center;justify-content:center;
}
.bh-name{font-size:.95rem;font-weight:800;letter-spacing:-.01em;}
.bh-name b{color:var(--acc-strong);font-weight:800;}
.bh-cta{
  font-size:.82rem;font-weight:800;color:var(--txt);
  border:1px solid var(--brd);border-radius:var(--r-pill);
  padding:8px 16px;background:var(--sur);
  transition:border-color .15s,color .15s;
}
.bh-cta:hover{border-color:var(--acc);color:var(--acc-strong);text-decoration:none;}

/* ── Colonne de lecture ──
   68ch : la ligne reste confortable à lire sans devenir une bande étroite. */
.bw{max-width:68ch;margin:0 auto;padding:24px 20px 8px;}

/* ── Tête de la liste ── */
.bi-head{padding:20px 0 34px;border-bottom:1px solid var(--brd);margin-bottom:34px;}
.bi-eyebrow{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;
  font-weight:800;color:var(--acc-strong);margin-bottom:10px;
}
.bi-t{
  font-size:clamp(1.7rem,4vw + .5rem,2.4rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.15;text-wrap:balance;margin-bottom:12px;
}
.bi-s{font-size:1rem;color:var(--mut);text-wrap:pretty;max-width:52ch;}
.bi-empty-cta{
  display:inline-block;margin-top:20px;background:var(--acc);color:#fff;
  font-weight:800;font-size:.92rem;padding:12px 24px;border-radius:var(--r-sm);
}
.bi-empty-cta:hover{filter:brightness(1.05);text-decoration:none;}

/* ── Cartes d'article ── */
.bi-list{display:flex;flex-direction:column;gap:14px;}
.bc{
  background:var(--sur);border:1px solid var(--brd);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color .18s,transform .18s;
}
.bc:hover{border-color:var(--acc);transform:translateY(-2px);}
.bc-cover{display:block;line-height:0;}
.bc-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.bc-body{padding:20px;}
.bc-meta{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--mut);margin-bottom:8px;
}
.bc-t{font-size:1.15rem;font-weight:800;letter-spacing:-.015em;line-height:1.3;margin-bottom:8px;}
.bc-t a{color:var(--txt);}
.bc-t a:hover{color:var(--acc-strong);text-decoration:none;}
.bc-s{font-size:.9rem;color:var(--mut);text-wrap:pretty;margin-bottom:12px;}
.bc-more{font-size:.84rem;font-weight:800;color:var(--acc-strong);}

/* ── Article ── */
.ba-back{padding:4px 0 18px;}
.ba-back a{font-size:.82rem;font-weight:700;color:var(--mut);}
.ba-back a:hover{color:var(--acc-strong);text-decoration:none;}
.ba-head{padding-bottom:24px;}
.ba-meta{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--mut);margin-bottom:12px;
}
.ba-t{
  font-size:clamp(1.8rem,4.5vw + .5rem,2.6rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.12;text-wrap:balance;margin-bottom:14px;
}
.ba-s{font-size:1.08rem;color:var(--mut);text-wrap:pretty;line-height:1.6;}
.ba-cover{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-lg);border:1px solid var(--brd);margin-bottom:8px;
}

/* Corps rédactionnel. Toutes les balises produites par lib/markdown.js sont
   stylées ici — cette liste et celle du convertisseur doivent rester
   alignées : une balise rendue sans style ici s'afficherait en Times. */
.ba-body{padding-top:18px;}
.ba-body > * + *{margin-top:1.15em;}
.ba-body p{font-size:1.02rem;text-wrap:pretty;}
.ba-body h2{
  font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;
  margin-top:2em;text-wrap:balance;
}
.ba-body h3{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin-top:1.7em;}
.ba-body h4{font-size:1rem;font-weight:800;margin-top:1.5em;}
.ba-body ul,.ba-body ol{padding-left:1.35em;}
.ba-body li + li{margin-top:.4em;}
.ba-body li{font-size:1.02rem;}
.ba-body strong{font-weight:800;}
.ba-body a{font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.ba-body blockquote{
  border-left:3px solid var(--acc);padding:2px 0 2px 18px;
  color:var(--mut);font-style:italic;
}
.ba-body hr{border:none;border-top:1px solid var(--brd);margin:2.2em 0;}
.ba-body code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em;
  background:var(--code-bg);border:1px solid var(--brd);border-radius:var(--r-sm);
  padding:2px 6px;
}
.ba-body pre{
  background:var(--code-bg);border:1px solid var(--brd);border-radius:var(--r-md);
  padding:16px;overflow-x:auto;
}
.ba-body pre code{background:none;border:none;padding:0;font-size:.85rem;line-height:1.55;}
.ba-body img{border-radius:var(--r-md);border:1px solid var(--brd);}

/* ── À lire aussi ── */
.ba-next{margin-top:56px;padding-top:32px;border-top:1px solid var(--brd);}
.ba-next-t{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--mut);margin-bottom:16px;}

/* ── Pied de page ── */
.bf{max-width:68ch;margin:0 auto;padding:56px 20px 40px;}
.bf-cta{
  background:var(--sec-bg);color:var(--sec-txt);
  border-radius:var(--r-lg);padding:34px 26px;text-align:center;
}
.bf-cta-t{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;text-wrap:balance;}
.bf-cta-s{font-size:.92rem;opacity:.86;text-wrap:pretty;max-width:44ch;margin:0 auto 20px;}
.bf-cta-b{
  display:inline-block;background:#fff;color:oklch(0.32 0.09 157);
  font-weight:800;font-size:.95rem;padding:13px 28px;border-radius:var(--r-sm);
}
.bf-cta-b:hover{text-decoration:none;filter:brightness(.97);}
.bf-links{text-align:center;font-size:.78rem;color:var(--mut);margin-top:26px;}
.bf-links a{color:var(--mut);}
.bf-links a:hover{color:var(--acc-strong);}

@media (min-width:760px){
  .bw{padding-top:34px;}
  .bc-body{padding:24px;}
  .bf-cta{padding:44px 34px;}
}
@media (prefers-reduced-motion:reduce){
  .bc{transition:none;}
  .bc:hover{transform:none;}
}