/* ===== GD – Boutons catégories inline (style Elementor) ===== */

/* conteneur en ligne, retour à la ligne si trop long */
.gd-term-list--inline{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 12px;            /* espace entre boutons */
  align-items:center;
  margin: .5rem 0;
}

/* lien → bouton pill */
.gd-term-list--inline a{
  --btn-bg: transparent;
  --btn-fg: var(--e-global-color-accent);   /* Bronze (accent) */
  --btn-bd: var(--e-global-color-accent);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .5rem .5rem;      /* taille du bouton */
  border: 1px solid var(--btn-bd);
  border-radius: 9999px;     /* pill */
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration:none;
  line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
  will-change: transform;
}

/* hover / focus : inversion à la Elementor */
.gd-term-list--inline a:hover,
.gd-term-list--inline a:focus-visible{
  --btn-bg: var(--e-global-color-accent);
  --btn-fg: #fff;
  transform: translateY(-1px);
  outline: none;
}

/* focus ring accessible */
.gd-term-list--inline a:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-global-color-accent) 25%, transparent);
}

/* état actif (optionnel) si tu ajoutes une classe .is-active côté PHP) */
a.is-active{
  background-color: var(--e-global-color-accent) !important;  
   color:#fff !important;
}

/* version “liste UL” (au cas où tu utilises layout=list) */
.gd-term-list--ul{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 12px;
  list-style:none;
  padding:0;
  margin:.5rem 0;
}
.gd-term-list--ul .gd-term-item a{ /* même style que ci-dessus */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.3rem .5rem;
  border:1px solid var(--e-global-color-primary);
  border-radius:9999px;
  background:transparent;
  color:var(--e-global-color-primary);
  text-decoration:none;
  line-height:1;
  transition: background .2s, color .2s, border-color .2s, transform .08s;
}
.gd-term-list--ul .gd-term-item a:hover,
.gd-term-list--ul .gd-term-item a:focus-visible{
  background: var(--e-global-color-accent);
  color:#fff;
  outline:none;
}

.gd-terms-infinite {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.gd-terms-infinite[data-state="loading"] {
  opacity: 0.8;
}

.gd-terms-infinite[data-state="done"] {
  display: none;
}