/* Page Blog — Résidence Majorelle
   Filtre par thème et grille d'articles. */

/* Largeur propre à la grille d'articles, entre --width-content et --width-wide. */
.container--articles { max-width: 1200px; }

.blog-hero__lede { margin-top: var(--space-8); }
.blog__title { margin-bottom: var(--space-8); }

/* ── Filtre par thème ───────────────────────────────────── */

.filter {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}
.filter__chip {
  padding: 0.625rem var(--space-5);
  border: 1px solid var(--gold-700);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-color);
}
.filter__chip:hover {
  background: color-mix(in srgb, var(--gold-700) 12%, transparent);
}
/* La catégorie affichée est marquée côté données (voir js/pages/blog.js). */
.filter__chip.is-active {
  background: var(--surface-gold-deep);
  color: var(--text-on-dark);
}
.filter__chip:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

/* Les cartes d'article (.article) sont dans components.css : l'accueil
   les reprend dans sa section « Blog ». */

/* Zone tactile : 44 px de haut au moins (voir components.css). */
.filter__chip { min-height: 44px; }