/* =============================================
   Before After Slider — CSS v2
   ============================================= */

/*
   ─── FIX CRITIQUE : conteneur Elementor en direction ROW ───
   
   Quand un conteneur Elementor est en "flex-direction: row",
   chaque widget enfant peut s'effondrer à zéro si aucune
   largeur n'est définie. On force min-width:0 + flex:1 sur
   toute la chaîne d'imbrication Elementor → widget → container.
   
   Elementor génère le nom de classe depuis get_name() en
   remplaçant les underscores par des tirets :
   'before_after_slider' → .elementor-widget-before-after-slider
*/

/* Niveau 1 : widget Elementor */
.elementor-widget-before-after-slider {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    align-self: stretch;
    box-sizing: border-box;
}

/* Niveau 2 : conteneur interne généré par Elementor */
.elementor-widget-before-after-slider > .elementor-widget-container {
    display: block;
    width: 100%;
    height: 100%;
}

/* ─── Wrapper du widget ─── */
.ba-wrapper {
    display: block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* ─── Conteneur principal ─── */
.ba-container {
    position: relative;
    width: 100%;
    height: 500px;      /* Défaut — overridé par le control Elementor via {{WRAPPER}} .ba-container */
    min-height: 200px;
    overflow: hidden;
    cursor: col-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

/* ─── Images ─── */
.ba-img-before,
.ba-img-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ba-img-before img,
.ba-img-after img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

/* AVANT en dessous */
.ba-img-before { z-index: 1; }

/* APRÈS clippé — clip-path mis à jour par JS */
.ba-img-after { z-index: 2; clip-path: inset(0 0 0 50%); }

/* ─── Diviseur vertical ─── */
.ba-divider {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #ffffff;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    will-change: left;
}

/* ─── Handle ─── */
.ba-handle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; gap: 4px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
}
.ba-handle-arrow { color: #fff; font-size: 13px; line-height: 1; display: block; }
.ba-handle-dot   { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.ba-handle-line .ba-handle { background: transparent !important; box-shadow: none !important; }

/* ─── Labels ─── */
.ba-label {
    position: absolute; z-index: 5;
    font-size: 0.85rem; font-weight: 600;
    color: #fff; background: rgba(0,0,0,0.45);
    padding: 6px 14px; border-radius: 4px;
    pointer-events: none; white-space: nowrap; user-select: none;
}
.ba-label-pos-bottom-left .ba-label-before { bottom: 16px; left: 16px; }
.ba-label-pos-bottom-left .ba-label-after  { bottom: 16px; right: 16px; }
.ba-label-pos-top-left    .ba-label-before { top: 16px; left: 16px; }
.ba-label-pos-top-left    .ba-label-after  { top: 16px; right: 16px; }
.ba-label-pos-center      .ba-label-before { top: 50%; left: 16px;  transform: translateY(-50%); }
.ba-label-pos-center      .ba-label-after  { top: 50%; right: 16px; transform: translateY(-50%); }

/* ─── Responsive ─── */
@media (max-width: 767px) {
    .ba-container  { height: 280px !important; cursor: ew-resize; }
    .ba-handle     { width: 36px; height: 36px; }
    .ba-handle-arrow { font-size: 11px; }
    .ba-label      { font-size: 0.75rem; padding: 4px 10px; }
}