/* =====================================================================
   LE LABO — article.css  (détail article de blog + liste blog)
   ===================================================================== */
.article-page { padding-bottom: 64px; }
.article-wrap { max-width: 900px; margin-inline: auto; padding-inline: var(--space-5); }
.article-hero { width: 100%; max-width: 1306px; margin: 40px auto 0; padding-inline: var(--space-5); }
.article-hero img { width: 100%; height: 420px; object-fit: cover; border-radius: 20px; border: 2px solid var(--ink); }
.article-page h1 { font-size: var(--h2); margin: 36px 0 16px; }
.article-lead { font-size: var(--t-important); margin-bottom: 32px; }
.article-section { margin-bottom: 32px; }
.article-section h2 { font-size: var(--h3); margin-bottom: 14px; }
.article-section h2 .num { color: var(--pink-strong); }
.article-section p { max-width: 72ch; }

/* Encadré conseil / le savais-tu (avec chat) */
.article-note { display: flex; align-items: center; gap: 18px; background: var(--cream); border: 2px solid var(--ink); border-radius: 18px; padding: 16px 20px; margin: 16px 0 4px; max-width: 760px; }
.article-note img { width: 76px; flex: none; }
.article-note p { margin: 0; font-size: var(--t-base); }
.article-outro { max-width: 72ch; margin-top: 28px; }

.article-cta { max-width: var(--w-band); margin: 48px auto; padding-inline: var(--space-5); }
.article-cta .band--pink { background: var(--accent); padding: 32px 36px; }
.article-cta h2 { font-size: var(--h3); margin-bottom: 12px; }
.article-cta p { margin-bottom: 22px; max-width: 60ch; }

.article-more { max-width: var(--w-band); margin: 0 auto; padding-inline: var(--space-5); }
.article-more h2 { font-size: var(--h3); margin-bottom: 20px; }

/* Liste blog */
.blog-page { padding-block: 48px 72px; }
.blog-wrap { max-width: var(--w-nav); margin-inline: auto; padding-inline: var(--space-5); }
.blog-page h1 { font-size: var(--h2); margin-bottom: 8px; }
.blog-page > .blog-wrap > p { margin-bottom: 32px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

@media (max-width: 820px) { .blog-grid { grid-template-columns: 1fr; } .article-hero img { height: 240px; } }