/* Labels Avant/Après */
.ba-label {
  position: absolute;
  top: 20px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 5;
}
.ba-label--before {
  left: 20px;
  background: color-mix(in srgb, var(--gray-light) 40%, var(--white));
  color: var(--black);
}
.ba-label--after {
  right: 20px;
  background: var(--secondary);
  color: var(--on-secondary);
}

.ba-slider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  border-radius: 20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  /* Le ratio est posé en ligne par le composant (--ba-ratio), d'après le format
     auquel l'espace client recadre les photos du site. Une boîte qui n'en
     déclare pas se dimensionne sur son image : haute de zéro tant qu'elle n'est
     pas chargée, et de travers dès qu'un repli s'affiche. En grille, toute la
     rangée se décale. */
  aspect-ratio: var(--ba-ratio, 3 / 2);
}

.ba-slider img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* L'image « après » remplit la boîte : c'est le fond sur lequel l'image
   « avant » est découpée. Les deux font les mêmes dimensions (le module s'en
   assure au dépôt), `cover` ne recadre donc rien — il ne fait que garantir le
   remplissage si un fichier arrivait par un autre chemin. */
.ba-slider > img {
  height: 100%;
  object-fit: cover;
}
.ba-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
/* L'image « avant » doit couvrir la boîte ENTIÈRE, pas la bande visible :
   `.ba-before` n'est large que du curseur, et une image dimensionnée sur elle
   glisserait pendant qu'on le déplace.

   `aspect-ratio` la force à la forme exacte de la boîte — `height: 100%` donne
   alors une largeur égale à celle du slider, quelle que soit la taille réelle
   du fichier. Sans lui, une photo « avant » plus étroite que l'« après » est
   affichée à un autre grossissement : le même point du chantier ne tombe pas au
   même endroit des deux côtés du curseur. Le module dépose des images de taille
   identique, mais un fichier posé en FTP ne passe pas par lui. */
.ba-before img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  min-width: 100%;
  height: 100%;
  aspect-ratio: var(--ba-ratio, 3 / 2);
  object-fit: cover;
}
.ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--white);
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.ba-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--secondary);
  border-radius: 50%;
  z-index: 1;
}
.ba-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.ba-arrows svg {
  width: 12px;
  height: 12px;
  color: var(--white);
}