/* ============================================================================
   BLOG — grille d'articles + mise en page article (prose, citations, TL;DR)
   Réutilise les tokens de brand.css. Chargé uniquement sur les pages de blog.
   ============================================================================ */

/* --- Grille d'articles (index) --- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.blog-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease; text-decoration: none; color: inherit; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card img { display: block; width: 100%; height: 176px; object-fit: cover; background: var(--c-bg-alt); }
.blog-card-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.blog-cat { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--c-accent-dark); }
.blog-card h3 { margin: 0; font-size: 1.2rem; }
.blog-card .blog-excerpt { color: var(--c-body); font-size: .95rem; margin: 0; }
.blog-card .blog-more { margin-top: auto; font-weight: 700; color: var(--c-accent-dark); }

/* --- Page article --- */
.article-banner { width: 100%; height: auto; border-radius: var(--radius); display: block; margin-bottom: var(--s-6); box-shadow: var(--shadow-sm); border: 1px solid var(--c-line); }
.article-meta { color: var(--c-muted); font-size: .9rem; margin-bottom: var(--s-6); display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; align-items: center; }
.article-meta span { display: inline-flex; align-items: center; gap: .35em; }

.tldr { background: var(--c-primary-light); border-left: 4px solid var(--c-accent); border-radius: var(--radius-sm); padding: var(--s-5) var(--s-6); margin: 0 0 var(--s-8); }
.tldr .tldr-label { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--c-accent-dark); margin-bottom: var(--s-2); }
.tldr p { margin: 0; color: var(--c-ink); }

.article-body h2 { margin-top: var(--s-10); margin-bottom: var(--s-3); }
.article-body h3 { margin-top: var(--s-6); margin-bottom: var(--s-2); }
.article-body p, .article-body ul, .article-body ol { margin-bottom: var(--s-4); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li { margin-bottom: var(--s-2); }
.article-body a { color: var(--c-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--c-primary); }

/* Citation mise en avant */
.pullquote { border-left: 4px solid var(--c-accent); background: var(--c-bg-alt); border-radius: var(--radius-sm); padding: var(--s-5) var(--s-6); margin: var(--s-6) 0; font-size: 1.05rem; }
.pullquote cite { display: block; margin-top: var(--s-2); font-size: .85rem; font-style: normal; color: var(--c-muted); }

/* Liste de sources */
.sources-list { font-size: .92rem; }
.sources-list li { margin-bottom: var(--s-3); }
.sources-list a { word-break: break-word; }