/* ============================================================
   Impact Web — Filtre par catégorie de l'index /blog
   Complément à main.css, chargé uniquement sur /blog.
   Réutilise les tokens (--iw-*, --radius-*, --fw-*) de main.css.
   La barre est construite par /js/blog-filter.js ; sans JS elle
   reste masquée (attribut hidden) et toutes les cartes s'affichent.
   ============================================================ */

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  max-width: 920px;
  margin: 0 auto 40px;
}
.blog-filter[hidden] { display: none; }

.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--iw-ink);
  background: var(--iw-white);
  border: 1.5px solid var(--border-subtle);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.blog-filter-btn:hover {
  border-color: var(--iw-red);
  color: var(--iw-red-deep);
}
.blog-filter-btn[aria-pressed="true"] {
  background: var(--iw-red-deep);
  border-color: var(--iw-red-deep);
  color: var(--iw-cream);
}

.blog-filter-count {
  font-size: 0.72rem;
  font-weight: var(--fw-extrabold);
  opacity: 0.7;
}
.blog-filter-btn[aria-pressed="true"] .blog-filter-count { opacity: 0.9; }

/* Annonce du nombre de résultats : sur sa propre ligne, discrète. */
.blog-filter-status {
  flex-basis: 100%;
  text-align: center;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  font-size: 0.85rem;
  margin: 4px 0 0;
}

/* Masquage pour le filtrage : n'altère pas l'ordre DOM d'origine. */
.card-article.is-filtered-out { display: none; }

@media (max-width: 560px) {
  .blog-filter { gap: 8px; }
  .blog-filter-btn { font-size: 0.8rem; padding: 8px 13px; }
}