/* Slider container */
.wallaby-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%; /* ajustable */
}

/* Image avant - reste dans le flux pour définir la hauteur */
.wallaby-before img {
  width: 100%;
  display: block;
}

/* Image après - positionnée par-dessus */
.wallaby-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* largeur initiale */
  overflow: hidden;
  z-index: 5;
}

/* Image après - garder proportions */
.wallaby-after img {
  width: auto;
  height: 100%;
  max-width: none;
  display: block;
}

/* Handle */
.wallaby-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--accent);
  cursor: ew-resize;
  z-index: 10;  
}

/* Cercle ou flèche au-dessus de la barre */
.wallaby-handle::after {
  content: "";
  position: absolute;       /* positionnement indépendant */
  top: 50%;                 /* centre verticalement */
  left: 50%;                /* centre horizontalement */
  transform: translate(-50%, -50%); /* centrage parfait */
  width: 16px;              /* taille du cercle */
  height: 16px;
  background: #fff;         /* couleur */
  border-radius: 50%;       /* cercle */
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  z-index: 20;              /* au-dessus de la barre */
}


/* Empêche la sélection de texte et d'images */
.wallaby-slider,
.wallaby-slider img {
  user-select: none;       /* désactive la sélection du texte */
  -webkit-user-drag: none; /* désactive le drag sur Safari/Chrome */
  -webkit-touch-callout: none; /* désactive le menu contextuel iOS */
  -moz-user-select: none;   /* Firefox */
  -ms-user-select: none;    /* IE/Edge */
}