/* Variables à remplacer */
:root{
  --color-active: var(--theme-color);
  --color-darken: var(--theme-color-darken);
  --black: #222;
  --white: #fff;
}

.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.list-inline-item {
  list-style-type: none;
}

/**
* Apparence des boutons
*/
.list-inline-item a,
.list-inline-item button{
  background-color: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  border-radius: 10px;
  margin-bottom: .3rem;
  display: block;
}

.list-inline-item a:not(#btn-all) {
  text-transform: uppercase;
}

.list-inline-item a span {
  font-size: 1.2rem;
  font-weight: 500;
}

/**
* Bouton au survol
*/
.list-inline-item a:not([disabled]):hover {
  background-color: var(--color-darken);
  color: var(--white);
}

/**
* Bouton actif
*/
.list-inline-item a.active,
.list-inline-item a.active:hover {
  font-weight: 700;
  background-color: var(--color-active);
  border-color: var(--color-active);
  color:  var(--white);
}

/**
* Bouton avec 0 résultat
*/
.list-inline-item button[disabled] {
  opacity: .5;
}

/**
* Liste des définitions
*/
.glossary-wrapper dl {
  /* display: none; */
}
/* On affiche la définition avec une classe "show" */
.glossary-wrapper dl.show {
  display: block;
}

/**
* Style de la pagination ici
*/
.page-numbers {
  padding: .75rem 1rem;
  background-color: transparent;
  color: var(--black);
  border-radius: 10px;
  margin-bottom: .3rem;
}

.page-numbers.current {
  background-color: var(--color-active);
  color: var(--white);
  pointer-events: none; /* Désactive les interactions */
  cursor: default;
}

.page-numbers:not(.dots, .current):where(:hover, :active, :focus) {
  background-color: var(--color-darken);
  color:var(--white);
}