/* ============ Slider de base (inchangé) ============ */
.bbas-slider{position:relative;overflow:hidden;user-select:none;font-size:0}
.bbas-img{display:block;width:100%;height:auto;pointer-events:none}
.bbas-after {
  position: absolute;
  left: 0;
  top: 0;
  clip-path: inset(0 calc(100% - var(--bbas-pos, 50%)) 0 0);
  transition: clip-path .3s var(--bbas-ease, ease-in-out);
}

.bbas-placeholder{width:100%;height:auto;display:block;aspect-ratio:4/3}
.bbas-placeholder[data-side="before"]{background:#ccc}
.bbas-placeholder[data-side="after"] {background:#eee}
.bbas-slider.dragging .bbas-after,
.bbas-slider.dragging .bbas-handle{transition:none!important}

/* ============ Barre verticale ============ */
.bbas-handle{
    position:absolute;top:0;left:var(--bbas-pos,50%);
    transform:translateX(-50%);
    width:3px;height:100%;
    background:#fff;
    border-left:1px solid #000;border-right:1px solid #000;
    cursor:ew-resize;
    transition:left .3s var(--bbas-ease,ease-in-out);
}

.bbas-select {
  pointer-events: auto !important;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15);
}
/* ============ Poignée SVG ============ */
.bbas-handle::after{
    content:'';
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:44px;height:44px;
    background:no-repeat center/contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174.4 174.4'%3E%3Ccircle fill='%23ffffff' cx='87.2' cy='87.2' r='84.2'/%3E%3Cpolygon points='54 87.2 78 68 78 106'/%3E%3Cpolygon points='120.4 87.2 96.4 106 96.4 68'/%3E%3C/svg%3E");

}

/* → Au survol : on change simplement l’icône (blanc → vert) */
@media (hover:hover){
  .bbas-handle:hover::after{
      background:no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174.4 174.4'%3E%3Ccircle fill='%238CC63E' cx='87.2' cy='87.2' r='84.2'/%3E%3Cpolygon points='54 87.2 78 68 78 106'/%3E%3Cpolygon points='120.4 87.2 96.4 106 96.4 68'/%3E%3C/svg%3E");
  }
}