/* Tris et regroupements communs (cf. commun/tri.js). */

/* Changement d'élément / de type d'arme : nouvelle ligne de la grille. */
.debut-ligne {
  grid-column-start: 1;
}

/* "Réinitialiser les filtres" (logo filtre barré) : apparence de base,
   sans priorité (:where) pour que chaque page puisse la surcharger (fond,
   survol doré...). */
:where(.btn-clear-filtres) {
  border-radius: 0.5625rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  color: white;
  font-size: 1.125rem;
  cursor: pointer;
  opacity: 0.8;
  white-space: nowrap;
}

:where(.btn-clear-filtres:hover) {
  opacity: 1;
}

.btn-clear-filtres img {
  display: block;
  width: auto;
  height: 1.5rem;
}

/* Boutons de tri et "réinitialiser les filtres" : même carré que les
   filtres d'élément, contenu centré. */
.tri-btn,
.btn-clear-filtres {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.4375rem;
  min-width: 2.4375rem;
  height: 2.4375rem;
  padding: 0;
  overflow: visible;
}

.tri-btn[hidden] {
  display: none;
}

/* Liste des comptes : libellé + flèche alignés. */
.tri-compte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tri-compte-btn[hidden] {
  display: none;
}

/* Logos à la place du texte des tris (points, élément, constellation, niveau). */
.tri-logo {
  display: block;
  height: 1.5rem;
  width: auto;
}

/* Stella fortuna : +4 px ; stella (niveau) : +5 px. */
.tri-logo-constellation {
  height: 1.75rem;
}

.tri-logo-niveau {
  height: 1.8125rem;
}

/* Rareté : étoile seule, plus grande. */
.tri-etoile {
  font-size: 1.5em;
  line-height: 1;
}

/* Sens du tri : petite flèche dans le coin, sans décaler le logo. */
.fleche-tri:not(:empty) {
  position: absolute;
  right: 0.125rem;
  bottom: 0.0625rem;
  font-size: 0.5625rem;
  line-height: 1;
}

/* Filtres Vœux (Intertwined / Acquaint Fate) : logos +4 px. */
.filtre-voeu[hidden] {
  display: none !important;
}

.filtre-voeu .filtre-icone-btn,
.filtre-voeu .filtre-icone img {
  padding: 0.1875rem;
}

/* Filtres et tris : au survol, seul le contour devient doré ; le fond doré
   est réservé aux boutons sélectionnés. */
.tri-btn:not(.active):hover,
.filtre-icone-btn:not(.active):hover,
.filtre-etoile-btn:not(.active):hover,
.filtre-proprietaire-btn:not(.active):hover,
.btn-clear-filtres:hover,
.filtre-texte input:not(:checked) + span:hover,
.filtre-icone input:not(:checked) + img:hover {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(20, 20, 20, 0.45);
}