/*
 * mod_beforeafter — Before/After Image Comparison Slider
 * AFTER pleine largeur en fond, BEFORE clipée par-dessus via overflow:hidden
 */

.mod-ba-wrapper {
    margin: 0 auto;
}

/* Conteneur principal */
.mod-ba-slider {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    display: block;
    line-height: 0;
    margin-bottom: 20px;
}

/* ── Image AFTER : référence de hauteur, fond plein ── */
.mod-ba-after {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
}
.mod-ba-after img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ── Image BEFORE : absolutement positionnée sur toute la surface,
       clipée à droite par width du conteneur ── */
.mod-ba-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;         /* valeur initiale — JS le met à jour */
    height: 100%;
    overflow: hidden;
    z-index: 2;
}
.mod-ba-before img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--ba-slider-width, 100%); /* largeur réelle du slider, injectée par JS */
    height: 100%;
    object-fit: cover;
    object-position: left center;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ── Séparateur vertical ── */
.mod-ba-handle {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    height: 100%;
    width: var(--ba-sep-width, 3px);
    background: var(--ba-sep-color, #ffffff);
    transform: translateX(-50%);
    cursor: ew-resize;
    box-shadow: 0 0 8px rgba(0,0,0,.4);
}

/* ── Bouton circulaire ── */
.mod-ba-handle-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ba-sep-color, #ffffff);
    box-shadow: 0 2px 12px rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Flèches gauche / droite */
.mod-ba-handle-btn::before,
.mod-ba-handle-btn::after {
    content: '';
    display: inline-block;
    border: solid rgba(0,0,0,.5);
    border-width: 0 3px 3px 0;
    padding: 5px;
}
.mod-ba-handle-btn::before { transform: rotate(135deg); }   /* ← */
.mod-ba-handle-btn::after  { transform: rotate(-45deg);  }  /* → */

/* ── Étiquettes ── */
.mod-ba-label {
    position: absolute;
    z-index: 8;
    background: rgba(0,0,0,.55);
    color: #fff;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .03em;
    pointer-events: none;
}
.mod-ba-label-before { z-index: 9; }
.mod-ba-label-after  { z-index: 3; }

.mod-ba-top-left     { top: 8px;    left: 8px;  }
.mod-ba-top-right    { top: 8px;    right: 8px; }
.mod-ba-bottom-left  { bottom: 8px; left: 8px;  }
.mod-ba-bottom-right { bottom: 8px; right: 8px; }

/* ── Thème clair ── */
.mod-ba-theme-light .mod-ba-handle     { background: #fff; }
.mod-ba-theme-light .mod-ba-handle-btn { background: #fff; }
.mod-ba-theme-light .mod-ba-handle-btn::before,
.mod-ba-theme-light .mod-ba-handle-btn::after { border-color: rgba(0,0,0,.55); }
.mod-ba-theme-light .mod-ba-label      { background: rgba(255,255,255,.85); color: #222; }

/* ── Thème sombre ── */
.mod-ba-theme-dark .mod-ba-handle     { background: #111; }
.mod-ba-theme-dark .mod-ba-handle-btn { background: #111; }
.mod-ba-theme-dark .mod-ba-handle-btn::before,
.mod-ba-theme-dark .mod-ba-handle-btn::after { border-color: rgba(255,255,255,.7); }
.mod-ba-theme-dark .mod-ba-label      { background: rgba(0,0,0,.75); color: #fff; }

/* ── Auto-slide ── */
@keyframes mod-ba-before-slide {
    0%   { width: 10%; }
    50%  { width: 90%; }
    100% { width: 10%; }
}
@keyframes mod-ba-handle-slide {
    0%   { left: 10%; }
    50%  { left: 90%; }
    100% { left: 10%; }
}
.mod-ba-autoslide .mod-ba-before { animation: mod-ba-before-slide 10s ease-in-out infinite; }
.mod-ba-autoslide .mod-ba-handle { animation: mod-ba-handle-slide 10s ease-in-out infinite; }
.mod-ba-autoslide:hover .mod-ba-before,
.mod-ba-autoslide:hover .mod-ba-handle { animation-play-state: paused; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .mod-ba-wrapper { width: 100% !important; }
}