.ml-slider,
.ml-slider * {
    box-sizing: border-box;
}

.ml-slider {
    --ml-slider-radius: 25px;
    --ml-slider-nav-size: clamp(44px, 4vw, 58px);
    --ml-slider-externe-gap: clamp(28px, 6vw, 72px);
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.ml-slider__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: clamp(240px, 42vw, 520px);
    border-radius: var(--ml-slider-radius);
    overflow: hidden;
    background: #eef4f8;
}

.ml-slider__loader {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ml-slider-radius);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(232, 240, 246, 0.9));
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ml-slider__loader-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(2, 46, 85, 0.14);
    border-top-color: #022e55;
    border-radius: 50%;
    animation: ml-slider-spin 0.8s linear infinite;
}

.ml-slider__swiper,
.ml-slider__swiper .swiper-wrapper,
.ml-slider__slide {
    height: 100%;
}

.ml-slider__swiper {
    width: 100%;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ml-slider.is-ready .ml-slider__swiper {
    opacity: 1;
}

.ml-slider.is-ready .ml-slider__loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ml-slider__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: block;
}

.ml-slider__swiper:not(.swiper-initialized) .ml-slider__slide {
    display: none;
}

.ml-slider__swiper:not(.swiper-initialized) .ml-slider__slide:first-child {
    display: block;
}

.ml-slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--ml-slider-radius);
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.ml-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ml-slider-nav-size);
    height: var(--ml-slider-nav-size);
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ml-slider__nav:hover {
    transform: translateY(-50%) scale(1.04);
}

.ml-slider__nav.swiper-button-disabled {
    opacity: 0.45;
    cursor: default;
}

.ml-slider__nav img {
    display: block;
    width: 100%;
    height: auto;
}

.ml-slider--overlay .ml-slider__nav--prev {
    left: 18px;
}

.ml-slider--overlay .ml-slider__nav--next {
    right: 18px;
}

.ml-slider--externe {
    padding-inline: var(--ml-slider-externe-gap);
}

.ml-slider--externe .ml-slider__nav--prev {
    left: max(0px, calc(var(--ml-slider-externe-gap) * 0.08));
}

.ml-slider--externe .ml-slider__nav--next {
    right: max(0px, calc(var(--ml-slider-externe-gap) * 0.08));
}

.ml-slider--externe .ml-slider__nav {
    width: calc(var(--ml-slider-nav-size) + 6px);
    height: calc(var(--ml-slider-nav-size) + 6px);
}

@keyframes ml-slider-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .ml-slider--externe {
        padding-inline: clamp(16px, 4vw, 28px);
    }

    .ml-slider--externe .ml-slider__nav--prev {
        left: 4px;
    }

    .ml-slider--externe .ml-slider__nav--next {
        right: 4px;
    }
}

@media (max-width: 640px) {
    .ml-slider {
        --ml-slider-nav-size: 42px;
    }

    .ml-slider__frame {
        aspect-ratio: 4 / 3;
        min-height: 220px;
    }

    .ml-slider--overlay .ml-slider__nav--prev {
        left: 10px;
    }

    .ml-slider--overlay .ml-slider__nav--next {
        right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ml-slider__loader,
    .ml-slider__swiper,
    .ml-slider__nav {
        transition: none;
    }

    .ml-slider__loader-spinner {
        animation: none;
    }
}