/* ───────────────────────────────────────────────────────────────
   Blog : pages générées par tools/build-blog.mjs.
   Même grammaire que la vitrine (tokens, split titre/contenu,
   bandeau inversé) ; aucune couleur en dur, tout vient des tokens.
   ─────────────────────────────────────────────────────────────── */

header nav a[aria-current]{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent-2); text-underline-offset:8px; text-decoration-thickness:1.5px; }
.mobile-nav a[aria-current]{ text-decoration:none; color:var(--accent-2); }

/* Barre de lecture (article) : largeur pilotée par js/blog.js */
header{ position:sticky; }
.read-progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px; z-index:1;
  background:var(--accent-2); transform-origin:0 50%; transform:scaleX(0);
}

/* Sur-titre (fil d'Ariane, compteur) */
.eyebrow{
  margin:0 0 22px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.eyebrow a{ color:var(--accent-2); text-decoration:none; }
.eyebrow a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ── En-tête du blog : titre serif + anneaux de l'accueil (canvas, js/blog.js) ── */
.blog-hero{ padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px); }
.blog-hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center; }
.blog-hero h1{ max-width:12ch; font-size:clamp(48px,6.6vw,92px); }
.blog-hero .lede{ max-width:52ch; margin-top:28px; }
.blog-hero-sm h1{ font-size:clamp(44px,5.4vw,76px); max-width:none; }
.blog-stage{ margin:0; display:flex; justify-content:center; }
/* #rings est aussi stylé par style.css (accueil) : sélecteur plus précis ici. */
.blog-stage #rings{ width:100%; max-width:460px; height:320px; }
.blog-hero-sm .blog-stage #rings{ max-width:360px; height:240px; }

.themes{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:40px; }
.themes-label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* Puces de thème */
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips a{
  display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:6px 13px;
  font-family:var(--font-mono); font-size:12px; color:var(--body); text-decoration:none;
  border:1px solid var(--line-strong); border-radius:999px; background:color-mix(in srgb, var(--bg-card) 60%, transparent);
  transition:border-color .15s, color .15s;
}
.chips a:hover, .chips a[aria-current="page"]{ border-color:var(--accent-2); color:var(--ink); }
.chips a span{ color:var(--faint); }

/* ── Dernier article, mis en avant ── */
.featured-wrap{ padding-bottom:clamp(24px,4vw,48px); }
.featured{
  position:relative; padding:clamp(28px,4vw,52px);
  background:var(--bg-card); border:1px solid var(--line); border-radius:20px;
  transition:border-color .2s ease;
}
.featured:hover{ border-color:color-mix(in srgb, var(--accent-2) 60%, transparent); }
.featured-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.featured-flag{ color:var(--on-accent); background:var(--accent); padding:4px 10px; border-radius:999px; letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.featured h2{ margin-top:26px; max-width:22ch; font-size:clamp(34px,4.6vw,60px); line-height:1.04; letter-spacing:-.015em; }
.featured h2 a{ text-decoration:none; background:linear-gradient(var(--accent-2),var(--accent-2)) 0 100% / 0 2px no-repeat; transition:background-size .35s ease; }
.featured h2 a::after{ content:""; position:absolute; inset:0; }
.featured:hover h2 a{ background-size:100% 2px; }
.featured > p{ max-width:62ch; margin:22px 0 0; font-size:clamp(16.5px,1.4vw,18.5px); line-height:1.65; }
.featured-foot{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-top:30px; }
.featured-foot .link span{ display:inline-block; transition:transform .2s ease; }
.featured:hover .featured-foot .link span{ transform:translateX(4px); }

/* Filets de section alignés sur le texte : sur un .wrap, border-top
   déborderait dans la gouttière. */
.archive .split, .more .split, .post-grid, .pager{ position:relative; border-top:none; }
.archive .split::before, .more .split::before, .post-grid::before, .pager::before{
  content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:var(--line);
}

/* ── Archive par année ── */
.archive{ padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,64px); }
.archive + .archive{ padding-top:0; }
.archive-year h2{ font-size:clamp(44px,5vw,64px); line-height:1; }
.archive-year p{ margin:12px 0 0; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.post-list{ list-style:none; margin:0; padding:0; }
.post-row{ position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px 24px; padding:22px 0; border-bottom:1px solid var(--line); }
.post-row:first-child{ padding-top:0; }
.post-row time{ font-family:var(--font-mono); font-size:13px; color:var(--accent-2); padding-top:4px; }
.post-row h3{ font-size:clamp(19px,1.8vw,22px); line-height:1.3; }
.post-row h3 a{ text-decoration:none; transition:color .15s; }
.post-row h3 a::after{ content:""; position:absolute; inset:0; }
.post-row:hover h3 a{ color:var(--accent-2); }
.post-row p{ margin:8px 0 0; font-size:15.5px; line-height:1.6; max-width:68ch; }
.post-meta{ display:block; margin-top:10px; font-family:var(--font-mono); font-size:11.5px; color:var(--faint); }
.empty{ margin:0; font-size:17px; line-height:1.65; max-width:52ch; }
.empty a{ color:var(--ink); text-underline-offset:4px; }

/* ── Article ── */
.post-head{ padding:clamp(48px,7vw,96px) 0 clamp(36px,5vw,56px); }
.post-head h1{ max-width:20ch; font-size:clamp(40px,5.6vw,76px); line-height:1.02; }
.post-head .lede{ max-width:60ch; margin-top:28px; }
.post-facts{ display:flex; flex-wrap:wrap; gap:8px 0; margin-top:30px; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.post-facts > *:not(:last-child)::after{ content:"·"; margin:0 12px; color:var(--faint); }

.post-grid{
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:clamp(28px,5vw,72px);
  padding-top:48px; padding-bottom:clamp(56px,8vw,96px);
}
.aside-sticky{
  position:sticky; top:104px; display:flex; flex-direction:column; gap:36px;
  max-height:calc(100vh - 128px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
}
.aside-title{ margin:0 0 14px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* Sommaire : l'entrée de la section en cours s'allume (js/blog.js) */
.toc{ display:block; }
.toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.toc li a{
  display:block; margin-left:-1px; padding:7px 0 7px 16px; border-left:2px solid transparent;
  font-size:14px; line-height:1.4; color:var(--muted); text-decoration:none; transition:color .15s, border-color .15s;
}
.toc li.toc-3 a{ padding-left:30px; font-size:13.5px; }
.toc li a:hover{ color:var(--ink); }
.toc li a[aria-current="true"]{ color:var(--ink); border-left-color:var(--accent-2); }

.share{ display:flex; flex-wrap:wrap; gap:8px; }
.share .aside-title{ width:100%; }
.share-btn{
  display:inline-flex; align-items:center; min-height:36px; padding:7px 14px; cursor:pointer;
  font-family:var(--font-body); font-size:13.5px; color:var(--ink); text-decoration:none;
  background:none; border:1px solid var(--line-strong); border-radius:999px; transition:border-color .15s;
}
.share-btn:hover{ border-color:var(--accent-2); }
.share-btn[hidden]{ display:none; }
.share-btn.done{ color:var(--accent-2); border-color:var(--accent-2); }

/* Corps de texte */
.prose{ max-width:70ch; font-size:17.5px; line-height:1.75; color:var(--body); }
.prose > :first-child{ margin-top:0; }
.prose p, .prose ul, .prose ol, .prose .table-wrap, .prose pre, .prose blockquote{ margin:0 0 1.35em; }
.prose h2{ margin:2.3em 0 .7em; font-size:clamp(28px,2.8vw,36px); line-height:1.15; scroll-margin-top:96px; }
.prose h3{ margin:1.9em 0 .6em; font-size:21px; line-height:1.3; scroll-margin-top:96px; }
.prose h4, .prose h5, .prose h6{ margin:1.6em 0 .5em; font-family:var(--font-display); font-weight:600; font-size:17.5px; color:var(--ink); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--ink); text-decoration-color:var(--accent-2); text-underline-offset:4px; text-decoration-thickness:1px; transition:color .15s; }
.prose a:hover{ color:var(--accent-2); }
.prose ul, .prose ol{ padding-left:1.3em; }
.prose li{ margin:.35em 0; padding-left:.2em; }
.prose li::marker{ color:var(--accent-2); }
.prose ol > li::marker{ font-family:var(--font-mono); font-size:.85em; }
.prose li > ul, .prose li > ol{ margin:.35em 0 0; }
.prose hr{ border:none; height:1px; background:var(--line); margin:2.6em 0; }
.prose blockquote{
  padding:4px 0 4px 26px; border-left:2px solid var(--accent-2);
  font-family:var(--font-serif); font-size:clamp(21px,2vw,25px); line-height:1.45; color:var(--ink);
}
.prose blockquote p{ margin:0 0 .6em; }
.prose blockquote p:last-child{ margin:0; }
.prose code{
  font-family:var(--font-mono); font-size:.86em; color:var(--ink);
  background:var(--bg-card); border:1px solid var(--line); border-radius:5px; padding:.1em .38em;
}
.prose pre{
  position:relative; overflow-x:auto; padding:20px 22px; border-radius:12px;
  background:var(--bg-card); border:1px solid var(--line); font-size:14px; line-height:1.65;
}
.prose pre code{ background:none; border:none; padding:0; font-size:inherit; color:var(--ink); }
/* Bouton hors de la zone qui défile : ancré au coin du bloc, pas du code. */
.code-block{ position:relative; margin:0 0 1.35em; }
.code-block pre{ margin:0; }
.code-copy{
  position:absolute; top:10px; right:10px; padding:5px 10px; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; color:var(--muted); background:var(--bg); border:1px solid var(--line-strong); border-radius:6px;
  opacity:0; transition:opacity .15s, color .15s;
}
.code-block:hover .code-copy, .code-copy:focus-visible, .code-copy.done{ opacity:1; }
.code-copy.done{ color:var(--accent-2); }
@media (hover:none){ .code-copy{ opacity:1; } }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.prose table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.prose th, .prose td{ padding:11px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th{ font-family:var(--font-display); font-weight:600; color:var(--ink); background:var(--bg-card); }
.prose tr:last-child td{ border-bottom:none; }
.prose .al-c{ text-align:center; }
.prose .al-r{ text-align:right; }

/* Sources de la veille */
.sources{ max-width:70ch; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.sources h2{ font-size:clamp(24px,2.4vw,30px); margin-bottom:16px; }
.sources ol{ list-style:none; margin:0; padding:0; counter-reset:src; }
.sources li{ counter-increment:src; display:grid; grid-template-columns:28px minmax(0,1fr); padding:10px 0; border-bottom:1px solid var(--line); }
.sources li::before{ content:counter(src, decimal-leading-zero); font-family:var(--font-mono); font-size:12px; color:var(--faint); padding-top:3px; }
.sources a{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13.5px; color:var(--muted); text-decoration:none; overflow-wrap:anywhere; }
.sources a span{ font-family:var(--font-mono); font-size:12.5px; color:var(--accent-2); }
.sources a:hover{ color:var(--ink); }

/* Fin d'article : les deux anneaux en cul-de-lampe */
.post-end{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; max-width:70ch; margin-top:56px; }
.post-end svg circle{ fill:none; stroke-width:1.6; }
.post-end .ring-a{ stroke:var(--ring-a); }
.post-end .ring-b{ stroke:var(--accent-2); }
.post-end .ring-dot{ fill:var(--accent-2); stroke:none; }

/* Articles voisins */
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:28px; padding-bottom:28px; }
.pager a{ display:flex; flex-direction:column; gap:8px; text-decoration:none; font-family:var(--font-serif); font-size:clamp(20px,2vw,24px); line-height:1.25; color:var(--ink); transition:color .15s; }
.pager a:hover{ color:var(--accent-2); }
.pager a span{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pager-next{ text-align:right; align-items:flex-end; }

/* À lire aussi */
.cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.card{
  position:relative; display:flex; flex-direction:column; gap:10px; padding:22px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px; transition:border-color .15s, transform .2s ease;
}
.card:hover{ border-color:var(--accent-2); transform:translateY(-2px); }
.card time{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent-2); }
.card h3{ font-size:18px; line-height:1.3; }
.card h3 a{ text-decoration:none; }
.card h3 a::after{ content:""; position:absolute; inset:0; border-radius:14px; }
.card p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Bandeau d'appel à l'action (reprend .band de la vitrine) */
.blog-cta h2{ color:var(--band-ink); }

/* Mots insécables (URL, espaces de noms PHP, code) : on coupe plutôt que déborder. */
.prose, .prose :not(pre) > code, .post-head h1, .post-head .lede, .featured h2, .featured > p,
.post-row h3, .post-row p, .card h3, .pager a, .blog-hero h1, .sources a{ overflow-wrap:anywhere; }

/* ── Responsive ── */
@media (max-width:900px){
  .post-grid{ grid-template-columns:minmax(0,1fr); padding-top:32px; }
  .aside-sticky{ position:static; max-height:none; overflow:visible; }
  .post-aside{ order:0; }
  .toc{ padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--bg-card); }
  .toc ol{ border-left:none; }
  .toc li a{ padding-left:0; border-left:none; }
  .toc li.toc-3 a{ padding-left:14px; }
  .share{ display:none; }
  .blog-hero-grid{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .blog-stage{ order:-1; justify-content:flex-start; }
  .blog-stage #rings{ max-width:280px; height:170px; }
  .blog-hero-sm .blog-stage{ display:none; }
}
@media (max-width:560px){
  .post-row{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .pager{ grid-template-columns:1fr; }
  .pager-next{ text-align:left; align-items:flex-start; }
  .prose{ font-size:17px; }
}

/* ── Impression : l'article seul ── */
@media print{
  header, .mobile-nav, .skip-link, .post-aside, .pager, .more, .blog-cta, .code-copy, footer .legal, .footer-links{ display:none !important; }
  body{ background:#fff; color:#000; }
  .post-grid{ display:block; border:none; padding:0; }
  .prose, .sources{ max-width:none; color:#000; }
  .prose a::after{ content:" (" attr(href) ")"; font-size:.8em; overflow-wrap:anywhere; }
  .prose pre, .prose blockquote, .prose table{ break-inside:avoid; }
  .prose h2, .prose h3{ break-after:avoid; }
}