/*
 * ==========================================================================
 * FICHIER CSS PRINCIPAL - INNOVIX
 * ==========================================================================
 */

/* --- COMPORTEMENT GLOBAL --- */
html {
  scroll-behavior: smooth; 
}

/*
 * ==========================================================================
 * STYLES DU SLIDER (CURSEUR) AVANT / APRÈS
 * ==========================================================================
 */

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem; 
  user-select: none; 
}

/* Photo de fond (APRÈS) */
.slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* Calque superposé contenant l'image AVANT */
.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%; 
  overflow: hidden;
}

/* Photo superposée (AVANT) */
.slider-overlay img {
  height: 100%;
  object-fit: cover;
  max-width: none; 
}

/* Ligne blanche verticale */
.slider-handle {
  position: absolute;
  top: 0;
  left: 50%; 
  bottom: 0;
  width: 3px; 
  background-color: white;
  cursor: ew-resize; 
  transform: translateX(-50%);
  z-index: 10; 
}

/* Le bouton rond central avec les flèches (Mis à jour selon la maquette) */
.slider-handle::after {
  content: '‹ ›'; /* Flèches minimalistes */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  background-color: #0B132B; /* Fond Bleu foncé */
  color: white; /* Flèches Blanches */
  border: 2px solid white; /* Contour blanc comme sur l'image */
  border-radius: 50%; 
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  letter-spacing: -2px; /* Rapproche légèrement les flèches */
  box-shadow: 0 4px 6px rgba(0,0,0,0.3); 
}