/* GoFactoX, blog. Chargé après site.css, dont il reprend les jetons
   et les classes (art-head, prose, toc, guides, bc). Ajoute :
   1. ce que les articles Markdown contiennent en plus (citations, code, h4) ;
   2. l'index des guides : thèmes, « Les plus récents », cartes par thème. */

/* ---------- 1. Articles ---------- */
.art-layout-solo{grid-template-columns:minmax(0,760px)}
/* un nom de balise XML de 43 lettres (GuidelineSpecifiedDocumentContextParameter) ne doit pas élargir la page */
.prose{overflow-wrap:break-word}
.prose h4{margin-top:1.6em;font-size:1.05rem;letter-spacing:-.01em}
.prose h4+*{margin-top:.6em}
.prose em{font-style:italic}
/* citation : fond écume, rayon uniforme et petit soleil en tête (pas de filet latéral) */
.prose blockquote{position:relative;margin-inline:0;padding:18px 22px 18px 52px;border-radius:var(--r-m);background:var(--ecume);color:var(--encre)}
.prose blockquote::before{content:"";position:absolute;left:22px;top:calc(18px + .55em);width:16px;height:8px;border-radius:8px 8px 0 0;background:var(--soleil-levant)}
.prose blockquote p{font-size:1.02rem;line-height:1.6}
.prose blockquote p+p{margin-top:.6em}
.prose pre{margin-inline:0;padding:18px 20px;border-radius:var(--r-m);background:var(--ecume);box-shadow:inset 0 0 0 1px var(--filet);white-space:pre-wrap;overflow-wrap:anywhere;font:500 .82rem/1.65 var(--mono);color:var(--encre)}
.prose pre code{font:inherit;background:none;padding:0;border-radius:0}
.prose code{overflow-wrap:anywhere}
.prose picture{display:block}
.related-list a{align-content:start}
.prose .shot-frame img{height:auto}

/* ---------- 2. Index des guides ---------- */
.blog-head h1{max-width:15em}
.blog-lead{margin-top:18px;max-width:38em;font-size:clamp(1.0625rem,1rem + .25vw,1.2rem);line-height:1.6;color:var(--ardoise)}
.blog-themes{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.blog-themes a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px 8px 18px;border-radius:999px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--filet);color:var(--encre);font-weight:620;font-size:.97rem;text-decoration:none;transition:box-shadow var(--t-1) var(--ease)}
.blog-themes .bt-n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--eau);color:var(--lagon-p);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.blog-themes a:hover{box-shadow:inset 0 0 0 2px var(--lagon);color:var(--encre)}}

.blog-sec{padding-block:clamp(48px,6vw,88px)}
.blog-sec .sec-head{margin-bottom:clamp(24px,3vw,40px)}
.blog-sec h2{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem);line-height:1.08;letter-spacing:-.028em}
.blog-sec.sec-ecume{background:var(--ecume)}
.page-blog .site-foot{padding-top:12px}

.post-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post-grid>li{display:flex}
.post-card{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;padding:24px 24px 22px;border-radius:var(--r-l);background:var(--ecume);color:var(--encre);text-decoration:none;isolation:isolate;transition:transform var(--t-1) var(--ease)}
.post-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--sh-2);opacity:0;transition:opacity var(--t-1) var(--ease);z-index:-1}
.sec-ecume .post-card{background:var(--blanc)}
.pc-meta{font-size:.88rem;color:var(--ardoise)}
.pc-title{font-size:1.18rem;line-height:1.3;letter-spacing:-.015em;font-weight:700}
.pc-desc{font-size:.97rem;line-height:1.5;color:var(--ardoise)}
.pc-more{display:inline-flex;align-items:center;gap:.4em;margin-top:auto;padding-top:6px;font-weight:650;color:var(--lagon)}
.pc-more .ico{transition:transform var(--t-1) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .post-card:hover{transform:translateY(-4px);color:var(--encre)}
  .post-card:hover::after{opacity:1}
  .post-card:hover .pc-title{color:var(--lagon-p)}
  .post-card:hover .pc-more .ico{transform:translateX(3px)}
}
.post-card:focus-visible{outline-offset:4px;border-radius:var(--r-l)}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.post-grid{grid-template-columns:minmax(0,1fr)}.blog-themes a{font-size:.93rem}}