/* ─── HMM Filter ─────────────────────────────────────── */

/* Variables CSS des filtres — isolées de --hmm-accent du parent */
.hmm-filter {
  --hmm-f-color:        inherit;
  --hmm-f-active-bg:    #1a1a2e;    /* défaut neutre — overridé par inline si custom */
  --hmm-f-active-color: #ffffff;
  --hmm-f-title-color:  inherit;     /* couleur spécifique du bouton « Tous » */
  --hmm-f-title-size:   var(--hmm-f-font-size, 11px); /* taille spécifique du bouton « Tous » */
}

/* ── Conteneur filtre ── */
.hmm-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-bottom: 16px; /* Marge entre filtres et contenu */
}

/* Quand le filtre est dans la barre de titre : aligné à droite */
.hmm-heading .hmm-filter {
  margin-left: auto;
  justify-content: flex-end;
}

/* ── Bouton base ── */
.hmm-filter__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  background: transparent;
  color: var(--hmm-f-color, inherit);
  font-size: var(--hmm-f-font-size, 11px);
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1.5;
  white-space: nowrap;
  border: none;
}

/* ── Styles : pill-border ── */
.hmm-filter--pill-border .hmm-filter__btn {
  border: 1.5px solid currentColor;
  border-radius: 30px;
  opacity: .7;
}
.hmm-filter--pill-border .hmm-filter__btn:hover,
.hmm-filter--pill-border .hmm-filter__btn--active {
  background: var(--hmm-f-active-bg);
  color: var(--hmm-f-active-color) !important;
  border-color: var(--hmm-f-active-bg);
  opacity: 1;
}

/* ── Styles : pill-solid ── */
.hmm-filter--pill-solid .hmm-filter__btn {
  border-radius: 30px;
  border: 1.5px solid transparent;
  background: rgba(0,0,0,.06);
  opacity: .75;
}
.hmm-filter--pill-solid .hmm-filter__btn:hover,
.hmm-filter--pill-solid .hmm-filter__btn--active {
  background: var(--hmm-f-active-bg);
  color: var(--hmm-f-active-color) !important;
  opacity: 1;
}

/* ── Styles : text ── */
.hmm-filter--text .hmm-filter__btn {
  padding: 4px 8px;
  border-radius: 0;
  opacity: .6;
}
.hmm-filter--text .hmm-filter__btn:hover,
.hmm-filter--text .hmm-filter__btn--active {
  opacity: 1;
  color: var(--hmm-f-active-bg) !important;
}

/* ── Styles : underline ── */
.hmm-filter--underline .hmm-filter__btn {
  padding: 4px 8px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  opacity: .65;
}
.hmm-filter--underline .hmm-filter__btn:hover,
.hmm-filter--underline .hmm-filter__btn--active {
  border-bottom-color: var(--hmm-f-active-bg);
  color: var(--hmm-f-active-bg) !important;
  opacity: 1;
}

/* ── Animation items filtrés ── */
.hmm-grid__item {
  transition: opacity .2s ease, transform .2s ease;
}
.hmm-grid__item.hmm-hidden {
  display: none !important;
}

/* ── Bouton « Tous » — taille et couleur séparées ── */
.hmm-filter__btn--all {
  font-size: var(--hmm-f-title-size, var(--hmm-f-font-size, 11px));
  color: var(--hmm-f-title-color, var(--hmm-f-color, inherit));
}

/* ── Styles : underline-top (trait au-dessus) ── */
.hmm-filter--underline-top .hmm-filter__btn {
  padding: 4px 8px;
  border-radius: 0;
  border-top: 2px solid transparent;
  opacity: .65;
}
.hmm-filter--underline-top .hmm-filter__btn:hover,
.hmm-filter--underline-top .hmm-filter__btn--active {
  border-top-color: var(--hmm-f-active-bg);
  color: var(--hmm-f-active-bg) !important;
  opacity: 1;
}

/* ── Styles : border-left (trait à gauche) ── */
.hmm-filter--border-left .hmm-filter__btn {
  padding: 4px 8px 4px 12px;
  border-radius: 0;
  border-left: 3px solid transparent;
  opacity: .65;
}
.hmm-filter--border-left .hmm-filter__btn:hover,
.hmm-filter--border-left .hmm-filter__btn--active {
  border-left-color: var(--hmm-f-active-bg);
  color: var(--hmm-f-active-bg) !important;
  opacity: 1;
}

/* ── Styles : border-right (trait à droite) ── */
.hmm-filter--border-right .hmm-filter__btn {
  padding: 4px 12px 4px 8px;
  border-radius: 0;
  border-right: 3px solid transparent;
  opacity: .65;
}
.hmm-filter--border-right .hmm-filter__btn:hover,
.hmm-filter--border-right .hmm-filter__btn--active {
  border-right-color: var(--hmm-f-active-bg);
  color: var(--hmm-f-active-bg) !important;
  opacity: 1;
}

/* ── Styles : square (boutons carrés/rectangulaires plein) ── */
.hmm-filter--square .hmm-filter__btn {
  border-radius: 2px;
  border: 1.5px solid transparent;
  background: rgba(0,0,0,.06);
  opacity: .75;
}
.hmm-filter--square .hmm-filter__btn:hover,
.hmm-filter--square .hmm-filter__btn--active {
  background: var(--hmm-f-active-bg);
  color: var(--hmm-f-active-color) !important;
  opacity: 1;
}