/*
 * Styles pour les filtres de catégories sur mobile
 */

@media only screen and (max-width: 768px) {
  /* Styles généraux pour les boutons de catégorie sur mobile */
  .filter-bullets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 20px auto; /* Centrage amélioré avec auto à gauche et à droite */
    padding: 10px;
    width: calc(100% - 40px); /* Réduire la largeur pour éviter le débordement */
    max-width: 95vw; /* Limiter la largeur maximale à 95% de la fenêtre */
    box-sizing: border-box; /* Inclure le padding dans la largeur */
    left: 0;
    right: 0;
  }

  .category-bullet {
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* Supprimer le highlight sur tap */
    user-select: none; /* Empêcher la sélection de texte */
    touch-action: manipulation; /* Optimiser pour les interactions tactiles */
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .category-bullet.active {
    background-color: var(--main-decor-color);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }

  /* État au toucher */
  .category-bullet.touch-active {
    background-color: rgba(var(--main-decor-color-rgb), 0.7);
    transform: scale(0.98);
  }

  /* Augmenter la taille de la cible tactile */
  .category-bullet {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Pour les écrans encore plus petits */
@media only screen and (max-width: 480px) {
  .filter-bullets {
    padding: 5px;
    gap: 5px;
    width: 90%; /* Réduire encore plus la largeur pour les très petits écrans */
    max-width: 90vw; /* Limiter la largeur maximale à 90% de la fenêtre */
    margin: 15px auto; /* Marges verticales réduites */
    left: 0;
    right: 0;
    position: relative; /* Assurer que le positionnement fonctionne */
    transform: none; /* Pas de transformation qui pourrait affecter le centrage */
  }
  
  .category-bullet {
    padding: 6px 10px; /* Réduire légèrement le padding */
    font-size: 12px; /* Réduire légèrement la taille de police */
    min-height: 36px; /* Réduire légèrement la hauteur */
    flex-shrink: 1; /* Permettre aux boutons de se rétrécir si nécessaire */
    margin: 2px; /* Réduire les marges entre les boutons */
  }
}