.avant_apres {
    .avant_apres__content {
        display: flex;
        gap: 60px;
        align-items: center;

        @media (max-width: 991px) {
            flex-direction: column;

            &.reverse {
                flex-direction: column-reverse;
            }
        }

        @media (min-width: 992px) {
            flex-direction: row;

            &.reverse {
                flex-direction: row-reverse;
            }
        }
    }

    .avant_apres__para {
        flex: 1;

        >*:first-child {
            margin-top: 0;
        }

        p:last-child {
            margin-bottom: 0;
        }

        .section__btn {
            margin: 0;
        }

        .cta {
            margin-top: 0 !important;
        }
    }

    .avant_apres__media {
        flex: 1;
    }

    /* == Slider de comparaison ============================================= */
    .avant_apres__inner {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: var(--border-radius);
        -webkit-user-select: none;
        user-select: none;
        cursor: col-resize;

        /* Les deux images occupent tout l'espace */
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;
            display: block;
        }

        /* Image "après" : calque de base */
        .avant_apres__apres {
            position: absolute;
            inset: 0;
        }

        /* Image "avant" : calque clipé depuis la gauche */
        .avant_apres__avant {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 50%; /* piloté par JS */
            overflow: hidden;

            img {
                /* L'image doit avoir la largeur du widget complet,
                   pas du conteneur clippé. JS la définit en px. */
                width: 100%; /* remplacé par JS (offsetWidth du parent) */
                max-width: none;
                object-position: left center;
            }
        }

        /* Labels superposés */
        .avant_apres__label {
            position: absolute;
            bottom: 12px;
            padding: 4px 10px;
            background: #7646d3;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            border-radius: 4px;
            pointer-events: none;
            white-space: nowrap;
            z-index: 2;

            &.avant_apres__label--avant {
                left: 12px;
            }

            &.avant_apres__label--apres {
                right: 12px;
            }
        }

        /* Poignée centrale */
        .avant_apres__handle {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* piloté par JS */
            transform: translateX(-50%);
            width: 3px;
            background: #fff;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;

            svg {
                width: 40px;
                height: 40px;
                filter: drop-shadow(0 2px 6px #4766ff48);
                flex-shrink: 0;
                color: #4766ff;
            }
        }

        /* Input range transparent par-dessus tout */
        .avant_apres__range {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: col-resize;
            margin: 0;
            -webkit-appearance: none;
            appearance: none;
            z-index: 4;
        }
    }
    /* ====================================================================== */
}