/* ==========================================================================
   Blog du site (« Le carnet »), docs/blog.md § 7. Chargée après site.css,
   dont elle reprend les jetons : papier, encre, sang-de-bœuf, Newsreader,
   tampons et hachures. La liste se lit comme un registre : la date dans sa
   colonne, l'article sur sa ligne. Un article se lit comme une page de
   carnet : filets, marge à gauche, lettrine, sections numérotées.
   Classes bl-* seulement. Le corps d'un article sort de render.ts sans
   classe (hors .bl-figure) : tout s'y règle par les balises.
   Aucun style en ligne ailleurs : la CSP des pages n'en autorise pas.
   ========================================================================== */

.bl-main{padding-bottom:0}
.nav a[aria-current]{color:var(--ink)}
.ftr a[aria-current]{color:var(--ink)}

/* Lien de rubrique et méta d'une entrée */
.bl-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.bl-meta a{position:relative;z-index:1;color:var(--ox);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px}
.bl-meta a:hover{color:var(--ox-hover);text-decoration:underline;text-underline-offset:3px}

/* Fil d'Ariane au-dessus d'un titre */
.bl-crumb{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
.bl-crumb a{color:var(--muted);border-bottom:1px solid var(--line-2)}
.bl-crumb a:hover{color:var(--ink);border-color:var(--ink)}

/* Tampon du temps de lecture : le .stamp du site, un chiffre et son unité */
.bl-stamp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;flex:none;border-radius:50%;border:1.5px solid var(--ox);color:var(--ox);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--ox);transform:rotate(-8deg);font-family:var(--mono);line-height:1}
.bl-stamp b{font-weight:400;font-size:21px;letter-spacing:-.03em}
.bl-stamp>span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}

/* Titre de la liste */
.bl-mast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;padding:88px 0 56px}
.bl-mast .kicker{display:block;margin-bottom:24px}
.bl-mast .bl-crumb{display:flex}
.bl-mast h1{font-size:calc(clamp(44px,7.4vw,100px)*var(--hs));letter-spacing:-.025em;line-height:.98}
.bl-mast h1 em{display:block;color:var(--ox)}
.bl-mast .lead{margin-top:28px;font-size:18px;max-width:52ch}
.bl-mast .seal{align-self:end}
.bl-mast-small{grid-template-columns:minmax(0,1fr);padding:72px 0 44px}
.bl-mast-small h1{font-size:clamp(38px,5.6vw,72px);max-width:20ch}
.bl-mast-small h1 em{display:inline}

/* Rubriques : un filet d'encre, comme l'en-tête d'un registre */
.bl-rub{position:relative;display:flex;flex-wrap:wrap;gap:0 28px;padding:9px 0 0;border-bottom:1px solid var(--ink)}
.bl-rub:before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--hatch);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.bl-rub a{display:inline-flex;align-items:center;min-height:44px;margin-bottom:-1px;border-bottom:2px solid transparent;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bl-rub a:hover{color:var(--ink)}
.bl-rub a[aria-current]{color:var(--ox);border-bottom-color:var(--ox)}

/* Toute la carte est cliquable : le lien du titre la recouvre, le lien de rubrique passe au-dessus */
.bl-card{position:relative}
.bl-card h2 a{color:inherit}
.bl-card h2 a:after{content:"";position:absolute;inset:0}
.bl-card:hover h2 a{color:var(--ox)}
.bl-card h2 a:focus-visible{outline:0}
.bl-card h2 a:focus-visible:after{outline:2px solid var(--accent);outline-offset:4px}

/* Article de tête */
.bl-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;padding:48px 0 56px;align-items:center}
.bl-lead-plain{grid-template-columns:minmax(0,1fr)}
.bl-lead-fig{margin:0;border:1px solid var(--line-2);background:var(--card);overflow:hidden}
.bl-lead-fig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.bl-lead-text{position:relative;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.bl-lead h2{font-size:clamp(32px,3.6vw,50px);letter-spacing:-.022em;line-height:1.06}
.bl-lead-plain h2{font-size:clamp(34px,5.4vw,68px);letter-spacing:-.025em;line-height:1.02;max-width:20ch}
.bl-lead-excerpt{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.4;color:var(--muted);max-width:44ch}
.bl-lead-plain .bl-lead-excerpt{font-size:22px;max-width:56ch}
.bl-lead .bl-stamp{margin-top:8px}

/* Registre : une ligne par article */
.bl-register{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.bl-row{display:grid;grid-template-columns:96px minmax(0,1fr) 196px;gap:0 32px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line)}
.bl-row:not(:has(.bl-thumb)){grid-template-columns:96px minmax(0,1fr)}
.bl-register:last-child .bl-row:last-child{border-bottom:0}
.bl-date{display:flex;flex-direction:column;gap:5px;padding-top:3px;font-family:var(--mono);color:var(--muted)}
.bl-day{font-size:30px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.bl-month{font-size:11.5px;letter-spacing:.04em;white-space:nowrap}
.bl-row-text{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:66ch}
.bl-row h2{font-size:27px;letter-spacing:-.015em;line-height:1.16}
.bl-row-excerpt{color:var(--muted);font-size:15.5px}
.bl-thumb{margin:0;border:1px solid var(--line);overflow:hidden;background:var(--card)}
.bl-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Liste vide */
.bl-empty{display:flex;align-items:center;gap:24px;padding:64px 0 96px;font-family:var(--serif);font-size:clamp(24px,3vw,34px);letter-spacing:-.015em;line-height:1.2}
.bl-empty .stamp{width:88px;height:88px;font-size:12px;box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 5.5px var(--ox)}

/* Pages de la liste */
.bl-pages{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin-top:0;padding:24px 0 96px;border-top:1px solid var(--ink);font-size:14px}
.bl-pages a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--ink)}
.bl-pages a:hover{color:var(--accent)}
.bl-pages a[rel="next"]{justify-self:end}
.bl-pages a[rel="prev"]{justify-self:start}
.bl-pages-at{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.bl-register+.bl-pages{border-top:0}

/* Article : en-tête */
.bl-art-head{padding:80px 0 48px;max-width:980px}
.bl-art-head .kicker{margin-bottom:24px}
.bl-art-head h1{font-size:clamp(38px,5.8vw,76px);letter-spacing:-.025em;line-height:1.02;max-width:20ch}
.bl-art-lead{margin-top:24px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,25px);line-height:1.38;color:var(--muted);max-width:52ch}

/* Article : marge à gauche, texte à droite, la grille des sections du site */
.bl-art-grid{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px;padding:56px 0 80px}
.bl-art-grid:before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--hatch);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.bl-rail{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.bl-facts{margin:0;display:flex;flex-direction:column;gap:12px}
.bl-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bl-facts dd{margin:0;font-size:14px}
.bl-facts a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.bl-facts a:hover{color:var(--accent);border-color:var(--accent)}
.bl-art-main{min-width:0;max-width:680px}
.bl-cover{margin:0 0 40px;border:1px solid var(--line-2);background:var(--card);overflow:hidden}
.bl-cover img{display:block;width:100%;height:auto}

/* Article : corps, écrit à la plume plutôt qu'à l'écran */
.bl-body{counter-reset:bl-section;font-family:var(--serif);font-size:20px;line-height:1.62;font-synthesis:none;overflow-wrap:break-word}
.bl-body p{margin:0 0 20px}
.bl-body>p:first-child:first-letter{float:left;margin:7px 10px 0 0;font-size:4.05em;line-height:.76;color:var(--ox)}
.bl-body h2{counter-increment:bl-section;margin:52px 0 18px;font-size:33px;letter-spacing:-.018em;line-height:1.14}
.bl-body h2:before{content:counter(bl-section,decimal-leading-zero);display:block;margin-bottom:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ox)}
.bl-body h3{margin:36px 0 12px;font-size:24px;letter-spacing:-.012em;line-height:1.2}
.bl-body>:first-child{margin-top:0}
.bl-body>:not(p){clear:both}
.bl-body>:last-child{margin-bottom:0}
.bl-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.bl-body strong{font-weight:500;color:var(--ink);background:linear-gradient(transparent 70%,var(--accent-soft) 70%)}
.bl-body em{font-style:italic}
.bl-body ul,.bl-body ol{margin:0 0 20px;padding-left:1.3em}
.bl-body li{margin-bottom:8px;padding-left:.2em}
.bl-body li>p{margin:0}
.bl-body li>p+p,.bl-body li>ul,.bl-body li>ol{margin-top:8px}
.bl-body li::marker{color:var(--ox)}
.bl-body ol>li::marker{font-family:var(--mono);font-size:.78em}
.bl-body blockquote{position:relative;margin:32px 0;padding:2px 0 2px 28px;font-style:italic;font-size:23px;line-height:1.42;color:var(--ink)}
.bl-body blockquote:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--hatch);border-left:1px solid var(--ox)}
.bl-body blockquote p{margin:0 0 12px}
.bl-body blockquote p:last-child{margin-bottom:0}
.bl-body hr{margin:44px 0;height:9px;border:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--hatch)}
.bl-figure{margin:32px 0;border:1px solid var(--line);background:var(--card)}
.bl-figure img{display:block;width:100%;height:auto}

.bl-back{margin-top:48px;padding-top:20px;border-top:1px solid var(--line-2);font-size:14px}
.bl-back a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--ink)}
.bl-back a:hover{color:var(--accent)}

/* Fin d'article : l'appel final du site, resserré */
.bl-cta{position:relative;display:block;padding-top:72px;padding-bottom:88px}
.bl-cta:before{content:"";position:absolute;left:32px;right:32px;top:0;height:9px;background:var(--hatch);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.bl-cta .kicker{display:block;margin-bottom:20px}
.bl-cta h2{font-size:clamp(32px,4.6vw,60px);letter-spacing:-.025em;line-height:1.02;max-width:18ch}
.bl-cta h2 em{color:var(--ox)}
.bl-cta .actions{margin-top:36px}
.bl-cta .wl-note{margin-top:14px}

@media (max-width:1000px){
  .bl-mast{padding:72px 0 44px}
  .bl-lead{gap:32px}
  .bl-row{grid-template-columns:84px minmax(0,1fr) 150px;gap:0 24px}
  .bl-row:not(:has(.bl-thumb)){grid-template-columns:84px minmax(0,1fr)}
  .bl-art-grid{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:44px}
  .bl-rail{position:static;flex-direction:row;align-items:center;gap:20px}
  .bl-facts{flex-direction:row;flex-wrap:wrap;gap:8px 28px}
  .bl-art-main{max-width:680px}
}

@media (max-width:760px){
  .bl-mast{grid-template-columns:minmax(0,1fr);padding:56px 0 36px;gap:0}
  .bl-mast .lead{font-size:17px;margin-top:20px}
  .bl-mast .seal{display:none}
  .bl-mast-small{padding:48px 0 28px}
  .bl-rub{gap:0 20px}
  .bl-lead{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 0 36px}
  .bl-lead-excerpt{font-size:18px}
  .bl-lead-plain .bl-lead-excerpt{font-size:19px}
  .bl-row{grid-template-columns:minmax(0,1fr) 88px;gap:8px 16px;padding:20px 0}
  .bl-row:not(:has(.bl-thumb)){grid-template-columns:minmax(0,1fr)}
  .bl-date{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:6px;padding-top:0}
  .bl-day{font-size:12px;letter-spacing:.04em;color:var(--muted)}
  .bl-row h2{font-size:22px;line-height:1.2}
  .bl-row-excerpt{font-size:15px}
  .bl-row-text{gap:8px}
  .bl-thumb{align-self:start}
  .bl-thumb img{aspect-ratio:1}
  .bl-empty{flex-direction:column;align-items:flex-start;gap:20px;padding:40px 0 72px}
  .bl-pages{padding-bottom:64px}
  .bl-art-head{padding:48px 0 32px}
  .bl-art-head .kicker{margin-bottom:18px}
  .bl-art-lead{margin-top:18px}
  .bl-art-grid{gap:28px;padding:36px 0 56px}
  .bl-rail{gap:16px}
  .bl-stamp{width:56px;height:56px}
  .bl-stamp b{font-size:18px}
  .bl-stamp>span{font-size:9px}
  .bl-cover{margin-bottom:28px}
  .bl-body{font-size:19px;line-height:1.58}
  .bl-body h2{font-size:27px;margin-top:44px}
  .bl-body h3{font-size:22px;margin-top:30px}
  .bl-body blockquote{font-size:21px;padding-left:22px}
  .bl-cta{padding-top:56px;padding-bottom:64px}
  .bl-cta:before{left:20px;right:20px}
}

@media (max-width:480px){
  .bl-pages{grid-template-columns:1fr 1fr}
  .bl-pages-at{grid-row:2;grid-column:1/-1;justify-self:center}
}
@media (max-width:380px){
  .bl-cta:before{left:16px;right:16px}
}
@media (prefers-reduced-motion:reduce){
  .bl-card h2 a{transition:none}
}
@media print{
  .hdr,.ftr,.bl-rail,.bl-cta,.bl-back,.bl-rub{display:none}
  .bl-art-grid{grid-template-columns:minmax(0,1fr);padding-top:0}
  .bl-art-grid:before{display:none}
  .bl-body{font-size:12pt}
}