/*
 * Fichier      : assets/css/slider.css
 * Description  : Styles pour l’interface d’administration du plugin Azurio Slider.
 * Auteur       : Julien
 * Version      : 1.0.6
 */

.azurio-slider {
    position: relative;
    max-height: fit-content;
    overflow: initial;
    margin: 0 !important;
    padding: 0 !important;

}

.azurio-track {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 0 !important;
    margin: 0;
    background: #fff;

}

@media screen and (max-width: 960px) {
    .azurio-slider {

        height: calc(100dvh - 60px);
    }

    .azurio-track {

        height: calc(100dvh - 60px);
    }
}

.azurio-slide {
    flex: 0 0 100%;
    position: relative;
    scroll-snap-align: start;
    list-style: none;
    display: flex;
    padding: 0 !important;
}

.azurio-slide>a {
    width: 100%;
}

.azurio-slide-bloc {
    width: 100%;
    display: block;
    background-color: #3c6c08 !important;
    /*#679d2d !important;*/
    padding: 0 !important;
}

.azurio-slide picture,
.azurio-slide img {
    width: 100%;
    /* min-height: 60vh;
    height: 60vh; */
    /* min-height: 49vh;
    height: 49vh; */
    min-height: 56.585vh;
    height: 56vh;

    object-fit: cover;
    object-position: bottom;
}

@media screen and (max-width: 768px) {

    .azurio-slide picture,
    .azurio-slide img {
        min-height: 56.585vh;
        height: 70vh;
    }
}


.azurio-slide-bloc.hide-bloc {
    display: none;
}

@media screen and (max-width: 1600px) {

    .azurio-slide-bloc.hide-bloc+picture,
    .azurio-slide-bloc.hide-bloc+picture img {
        height: auto;
        min-height: 60vh;
    }
}

.azurio-caption {
    position: absolute;
    bottom: 32%;
    left: calc(50% + 3%);
    text-shadow: 0 4px 8px rgba(164, 164, 164, .2);
    max-width: 90%
}

.azurio-caption h1 {
    margin: 8px 0;
    font-size: 52px;
}

@media screen and (max-width: 1600px) {
    .azurio-caption {
        left: calc(50% + 1%);
        /* left: 8%; */
    }

}

@media screen and (max-width: 960px) {
    .azurio-slide-bloc {
        display: none;
    }

    .azurio-caption {
        bottom: 11%;
        left: calc(50% - 3%);
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 768px) {
    .azurio-slide-bloc {
        display: none;
    }

    .azurio-caption {
        bottom: 10%;
        left: calc(50% - 3%);
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 540px) {
    .azurio-slide-bloc {
        display: none;
    }

    .azurio-caption {
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }
}

@media screen and (max-width: 460px) {
    .azurio-caption {
        width: 90%;
    }

    .azurio-btn-arrondi {
        width: -webkit-fill-available;
    }
}

.azurio-caption h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    /* color: #fff !important; */
    margin: 0 0 .5rem !important;
    padding: 0 !important;
    text-align: left !important;
    max-width: 30vw;
}

@media screen and (max-width: 1600px) {
    .azurio-caption h2 {
        max-width: 40vw;
    }
}

@media screen and (max-width: 768px) {
    .azurio-caption h2 {
        font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
        max-width: 100vw;
    }
}

.azurio-sub {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 1rem;
    max-width: 30vw;
    margin: 0 0 40px;
}

@media screen and (max-width: 1600px) {
    .azurio-sub {
        max-width: 40vw;
    }
}

@media screen and (max-width: 768px) {
    .azurio-sub {
        font-size: clamp(1rem, 4vw, 1.25rem);
        max-width: 100vw;
        margin: 0 0 50px;
    }
}

.azurio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 16px;
    /* padding: .75rem 2.2rem .95rem; */
    padding: .3rem .4rem .4rem 1.5rem;
    border-radius: 2rem;
    background: #539f01 !important;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    height: 40px;
}

@media screen and (max-width: 960px) {
    .azurio-btn {
        width: calc(100% - 1.9rem);
    }
}

.azurio-btn-arrondi {
    border-radius: 2rem;
}

.azurio-btn-carre {
    border-radius: 0;
}

.azurio-btn-oblong {
    border-radius: 0.6rem;
}

.azurio-btn img {
    display: block;
    width: 38px;
    height: 38px;
    min-height: 36px;
}

@media (max-width: 768px) {
    .azurio-btn img {
        display: none;
    }
}

.azurio-prev,
.azurio-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .2) !important;
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 3rem;
}

@media screen and (max-width: 768px) {

    .azurio-prev,
    .azurio-next {
        /* top: 100%; */
        transform: translateY(-100%);
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.3em;
        background: rgba(0, 0, 0, .4) !important;
        /* display: none !important; */
    }
}

.azurio-prev {
    left: .5rem
}

.azurio-next {
    right: .5rem
}

.azurio-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0
}

.azurio-dots button {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    border: none;
    background: rgba(232, 232, 232, .6) !important;
    cursor: pointer;
    padding: 0 !important;
}

.azurio-dots .active,
.azurio-dots button:hover {
    background: #679932
        /*#679d2d */
        !important;
}

@media (prefers-reduced-motion:reduce) {
    .azurio-track {
        scroll-behavior: auto
    }
}


@media screen and (max-width: 768px) {
    .azurio-caption h1 {
        margin: 8px 0;
        font-size: 44px;
        line-height: 1.1;
    }

    .azurio-slide-bloc.hide-bloc+picture+.azurio-caption h2,
    .azurio-slide-bloc.hide-bloc+picture+.azurio-caption p {
        /* color: #fff !important; */
    }

    .azurio-slide picture {
        min-height: 80vh;
        height: 83vh;
        padding: 0 0 0 0;
    }
}

@media screen and (max-width: 460px) {
    .azurio-slide picture {
        min-height: 77vh;
    }

    .azurio-caption h1 {
        font-size: 32px !important;
    }
}

/* @media screen and (max-width: 768px) {

    .azurio-caption,
    .azurio-caption h1,
    .azurio-caption h2,
    .azurio-caption h3,
    .azurio-caption p,
    .azurio-caption .azurio-sub {
         color: #fff !important; 
    }

    .azurio-caption a.azurio-btn {
         color: #fff !important; 
    }

    .azurio-slider .azurio-caption .azurio-sub,
    .azurio-slider .azurio-caption h1,
    .azurio-slider .azurio-caption h2,
    .azurio-slider .azurio-caption h3,
    .azurio-slider .azurio-caption p {
         color: #fff !important; 
    }

    .azurio-slider .azurio-caption a.azurio-btn {
         color: #fff !important; 
    }
} */