.champ-bouton {
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(6, 54, 5, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(20, 255, 12, 0.65);
  padding: 10px;
}

.fixed-filter {
  z-index: 9999;
  margin-bottom: 10px; /* Un peu d'espace entre les filtres */
}

.fixed-filter .filter-btn {
  background-color: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: #07ff28;
  font-size: 1rem;
}

/* Au survol du champ-bouton */
.champ-bouton :hover {
  background-color: #36ff03a9;
  color: rgb(3, 53, 4);
  border-radius: 0 5px 5px 5px;
}

/* MENU DÉROULANT */

/* Propriétés pour la disposition en grid sans affecter display */
.fixed-filter .filter-menu {
  display: none;  /* Cache le menu par défaut */
  position: absolute;
  bottom: 50px; 
  background: rgba(20, 255, 12, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 255, 12, 0.65);
  border-radius: 16px 16px 16px 0;
  padding: 10px;
  margin: 0;
  list-style: none;
  z-index: 99999;
  /* Ajout des propriétés de grid pour la disposition */
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 5px;
}

/* Affiche le menu au survol du conteneur fixed-filter */
.fixed-filter:hover .filter-menu {
  display: grid;
}

.filter-menu li {
  color: rgb(0, 255, 8);
  padding: 5px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 5px;
}

.filter-menu li:hover {
  background-color: #36ff03a9;
  color: rgb(3, 53, 4);
}

/* Optionnel : style pour l'élément sélectionné */
.filter-menu li.selected {
  background-color: #36ff03a9;
  color: rgb(3, 53, 4);
}