/* ============================================================
   BLOG.CSS — Présentation des articles corpoream.fr/blog
   V1 : reprend la mise en page magazine (classes ed-* / mag-*).

   PORTE OUVERTE : ce fichier peut DIVERGER plus tard pour donner au
   blog une présentation dédiée, SANS toucher aux leçons (qui chargent
   directement lecon-magazine.css). Le blog, lui, passe par ce fichier.
   ============================================================ */

@import url("/static/css/lecon-magazine.css");

/* --- Article : colonne de lecture centrée --- */
.blog-article {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 24px 24px;
}

.blog-article-head { margin-bottom: 10px; }

.blog-crumb {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    color: #8a8a8a;
    margin-bottom: 14px;
}
.blog-crumb a { color: #8a8a8a; text-decoration: none; }
.blog-crumb a:hover { color: #1A5D68; }

/* Titre de l'article = LE <h1> de la page (rendu par le gabarit, pas dans le contenu) */
.blog-article-head h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 900;
    color: #0F2B4C;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin: 6px 0 20px;
    text-wrap: balance;
}

/* Bandeau auteur/date/temps de lecture */
.blog-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.blog-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: radial-gradient(circle at 30% 25%, #2C7C88, #1A5D68 70%);
    color: #fff;
    font-family: 'DM Sans', 'Nunito', sans-serif;
    font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
.blog-who {
    font-family: 'Nunito', sans-serif;
    font-weight: 700; color: #0F2B4C; font-size: 15px;
}
.blog-who small {
    display: block; font-weight: 500;
    color: #6E655B; font-size: 13px;
}

.blog-body { margin-top: 12px; }
/* Le contenu magazine (ed-*/mag-*) est mis en page par lecon-magazine.css via .lecon-content */

@media (max-width: 600px) {
    .blog-article { padding: 28px 18px 14px; }
}