/*
 * Module Blog — compléments au design system (rhema.css / front.css).
 * Uniquement des mises en page absentes du socle : grille liste + colonne latérale,
 * sommaire d'article, partage, fil de commentaires, encart auteur.
 * Aucune couleur, taille de police ni rayon nouveaux : uniquement les jetons existants.
 */

/* Liste d'articles : contenu + colonne latérale (catégories, étiquettes) */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-8); align-items: start; }
.blog-sidebar { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: grid; gap: var(--space-5); }
.blog-sidebar h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--space-3); }
.blog-sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.blog-sidebar li a { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--heading); text-decoration: none; padding: .3rem 0; }
.blog-sidebar li a:hover, .blog-sidebar li a[aria-current="page"] { color: var(--cyan-dark); }
.blog-sidebar li a span { color: var(--muted); font-size: var(--fs-xs); }

/* Article : corps + sommaire ancré */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-10); align-items: start; }
.article-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); border-left: 2px solid var(--line); padding-left: var(--space-4); }
.article-toc h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--space-3); }
.article-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--fs-sm); }
.article-toc .lvl-3 { padding-left: var(--space-4); }
.article-toc a { color: var(--fg-2); text-decoration: none; }
.article-toc a:hover { color: var(--cyan-dark); }

.article-cover { width: 100%; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); }
.article-cover img { width: 100%; height: auto; display: block; }

.article-body h2 { font-size: var(--fs-2xl); margin-top: var(--space-10); }
.article-body h3 { font-size: var(--fs-xl); margin-top: var(--space-8); }
.article-body img { border-radius: var(--radius-md); height: auto; }
.article-body blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--gold); background: var(--light); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-body pre { background: var(--ink); color: #E4ECF3; padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-sm); }
.article-body table { width: 100%; border-collapse: collapse; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }

/* Partage : liens d'intention, sans script ni traceur externe */
.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-block: var(--space-8); }
.article-share span { font-size: var(--fs-sm); color: var(--muted); }

/* Encart auteur */
.author-box { display: flex; gap: var(--space-5); align-items: flex-start; background: var(--light); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.author-box .avatar { width: 64px; height: 64px; font-size: var(--fs-lg); flex: none; }
.author-box p { margin: .35rem 0 0; }

/* Commentaires */
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.comment { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.comment header { display: flex; flex-wrap: wrap; gap: .35rem var(--space-4); align-items: baseline; margin-bottom: var(--space-2); }
.comment header strong { color: var(--heading); }
.comment p { margin: 0; }

@media (max-width: 1024px) {
  .blog-layout, .article-layout { grid-template-columns: minmax(0, 1fr); }
  .blog-sidebar, .article-toc { position: static; }
  .article-toc { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--space-4); }
}