/**
 * Styles CSS pour l'amélioration tactile des sliders
 * Compatible avec tous les sliders des pages produit
 */

/* Styles de base pour les conteneurs de sliders tactiles */
.slider-container.touch-slider-enabled {
  cursor: grab;
  touch-action: pan-y; /* Permettre le scroll vertical, gérer horizontalement */
  user-select: none; /* Empêcher la sélection de texte */
  transition: transform 0.2s ease-out;
}

.slider-container.touch-slider-enabled:active {
  cursor: grabbing;
}

/* Focus pour l'accessibilité clavier */
.slider-container:focus {
  outline: 2px solid #4072d8;
  outline-offset: 2px;
}

/* Zone tactile élargie pour les dots sur mobile uniquement */
@media (max-width: 768px) {
  .slider-dots .dot {
    padding: 6px; /* Zone tactile légèrement élargie sur mobile */
  }
}

/* Amélioration des boutons de navigation pour tactile */
.slider-nav {
  min-width: 50px;
  min-height: 50px;
  touch-action: manipulation; /* Optimiser pour les interactions tactiles */
}

/* États visuels pendant l'interaction */
.slider-container.dragging {
  transition: none; /* Pas de transition pendant le drag */
}

/* Responsive - Amélioration pour mobile */
@media (max-width: 768px) {
  .slider-nav {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Animation lors du swipe */
.slider-container.swipe-feedback {
  transition: transform 0.1s ease-out;
}

/* États pour le feedback visuel */
.slider-container.swipe-left {
  transform: translateX(-5px);
}

.slider-container.swipe-right {
  transform: translateX(5px);
}

/* Masquer les éléments de navigation sur très petits écrans si nécessaire */
@media (max-width: 480px) {
  .slider-nav {
    opacity: 0.7;
  }

  .slider-nav:active {
    opacity: 1;
  }
}