/* Index du blog (en complément de blog.css) */
.blog-hero { padding: 72px 24px 52px; text-align: center; border-bottom: 1px solid var(--border); }
.hero-badge { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }
.blog-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin-bottom: 16px; }
.hero-sub { font-size: 17px; color: var(--text-muted); max-width: 560px; margin: 0 auto; line-height: 1.65; }

.filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 24px; border-bottom: 1px solid var(--border); }
.filter-btn { padding: 7px 16px; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all .2s; }
.filter-btn:hover { border-color: var(--border-med); color: var(--text-sub); }
.filter-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.filter-count { opacity: .6; font-weight: 400; margin-left: 2px; }

.grid-wrapper { max-width: 1100px; margin: 0 auto; padding: 48px 24px 80px; }
.section-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 20px; font-family: inherit; }
.filter-empty { text-align: center; color: var(--text-muted); padding: 40px 0; }

.article-featured { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 44px; transition: border-color .2s; text-decoration: none; }
.article-featured:hover { border-color: var(--border-med); }
.featured-body { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.featured-body h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2.5vw, 26px); color: var(--text); line-height: 1.25; margin: 0 0 12px; }
.featured-body p { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 20px; }

.article-tag { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; color: var(--tag-color, var(--accent)); }
.article-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.read-more { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); transition: gap .2s; }
.article-featured:hover .read-more, .article-card:hover .read-more { gap: 8px; }

.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.article-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color .2s; }
.article-card[hidden], .article-featured[hidden] { display: none; }
.article-card:hover { border-color: var(--border-med); }
.card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--text); line-height: 1.3; margin: 0 0 8px; }
.card-body p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

.blog-cta { border-top: 1px solid var(--border); padding: 60px 24px; text-align: center; background: var(--bg-card); }
.blog-cta h2 { font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 12px; }
.blog-cta p { color: var(--text-muted); font-size: 15px; margin: 0 auto 28px; max-width: 520px; }

@media (max-width: 768px) {
  .blog-hero { padding: 48px 16px 36px; }
  .filters { padding: 18px 16px; }
  .grid-wrapper { padding: 32px 16px 60px; }
  .featured-body { padding: 24px; }
}

/* ── Design 2026 (voir blog.css) ── */
.filter-btn { border: 0; background: var(--bg-card); color: var(--text); border-radius: 14px; min-height: 40px; }
.filter-btn[aria-pressed="true"], .filter-btn.active { background: #080A0F; color: #fff; }
.section-label { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text-sub); }
.article-card, .article-featured { border: 0 !important; background: var(--bg-card); border-radius: 14px; }
.blog-cta { border-top: 0; background: var(--gold); color: #080A0F; }
.blog-cta p { color: #080A0F; }