/**
 * Fichier  : /ott/features/swiper/assets/css/slides.css
 * Fonction : slides du swiper
 */


/* ==================================================
   SLIDE
================================================== */

#library .swiper-slide {
    position: relative;
    flex-shrink: 0;
}

#library .swiper-slide {
    width: var(--swiper-slide-width-desktop, 80%);
    opacity: .45;
}

#library .swiper-slide {
    transition:
        opacity .45s ease;
}

#library .swiper-slide-prev,
#library .swiper-slide-next {
    opacity: .72;
}

#library .swiper-slide-active {
    z-index: 20;
    opacity: 1;
}

#library .swiper.swiper-no-transition .swiper-slide,
#library .swiper.swiper-no-transition .swiper-slide .visual,
#library .swiper.swiper-no-transition .swiper-slide img {
    transition: none !important;
}


/* ==================================================
   CARD
================================================== */

#library .swiper-slide a {
    position: relative;
    overflow: hidden;
}

#library .swiper-slide a {
    display: block;
}

#library .swiper-slide a {
    aspect-ratio: var(--swiper-ratio-desktop, 16 / 9);
}

#library .swiper-slide a {
    border-radius: 22px;
}


/* ==================================================
   VISUAL
================================================== */

#library .swiper-slide .visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

#library .swiper-slide .visual {
    border-radius: 22px;
}

#library .swiper-slide .visual {
    transform: scale(.86);
    transform-origin: center center;
}

#library .swiper-slide .visual {
    transition:
        transform .65s ease,
        box-shadow .45s ease,
        filter .45s ease;
}

#library .swiper-slide .visual {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );

    border: 1px solid rgba(255,255,255,.12);
}

#library .swiper-slide .visual {
    box-shadow:
        0 22px 60px rgba(0,0,0,.38);
}


/* ==================================================
   VISUAL STATES
================================================== */

#library .swiper-slide-prev .visual,
#library .swiper-slide-next .visual {
    transform: scale(var(--swiper-preview-scale-desktop, .88));
    filter: blur(2px) brightness(.9);
}

#library .swiper-slide-prev .visual {
    transform-origin: right center;
}

#library .swiper-slide-next .visual {
    transform-origin: left center;
}

#library .swiper-slide-active .visual {
    transform: scale(1);
    transform-origin: center center;
    filter: blur(0) brightness(1);
}

#library .swiper-slide-active .visual {
    box-shadow:
        0 28px 80px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.16);
}


/* ==================================================
   IMAGE
================================================== */

#library .swiper-slide picture,
#library .swiper-slide img {
    display: block;
}

#library .swiper-slide picture,
#library .swiper-slide img {
    width: 100%;
    height: 100%;
}

#library .swiper-slide img {
    object-fit: cover;
    object-position: center;
}

#library .swiper-slide img {
    transform: scale(1);
}

#library .swiper-slide img {
    transition:
        transform .6s ease;
}

#library .swiper-slide:hover img {
    transform: scale(1.04);
}