.carousel-background{
    width: 100%;
    background-color: black;
    background-size: cover;
    overflow-x: hidden;
}

.carousel-container{
    transform: translateX(0px);
    display: flex;
    gap:4vw;
    overflow-x: scroll;
    /*cache la scrollbar*/
    -ms-overflow-style: none;  /* IE et Edge */
    scrollbar-width: none;  /* Firefox */
}


.carousel-container::-webkit-scrollbar{
    /*cache la scrollbar pour chrome safari et opera*/
    display: none;
}

.carousel-overlay{
    background-color: hsla(0, 0%, 0%, 0.714);
    height: 100%;
}
.carousel-item-container{
    position:relative;
    min-width: 33.22vw;
    min-height: 32vw;
    flex-shrink: 1;
}

.carousel-type-container{
    padding:4vw var(--lr-spacing-dt);
}

.carousel-arrow-container{
    display: flex;
    gap:1.11vw;
    justify-content: flex-end;
    margin-top: 1.6vw;
    margin-right: 3.33vw;
}

.carousel-button:enabled:hover{
    transform:scale(1.2);
}
.carousel-right-arrow{
    transform: rotate(180deg);
}
.carousel-right-arrow:enabled:hover{
    transform: rotate(180deg) scale(1.2);
}


.carousel-type0-text{
    margin-top: 1.5vw;
    margin-bottom: 2vw;

}

.carousel-type0-btn{
    display: flex;
    justify-content: space-between;
    width:8vw;
    position:absolute;
    bottom:3vw;
    margin-bottom:1.5vw;
}
.carousel-type0-btn img{
    width: 2vw;
    height: 2vw;
}
.carousel-grey-overlay{
    width: 100%;
    background-color: rgba(34, 34, 34, 0.816);
    height: 100%;
}
.carousel-type1-text{
    margin-top:1.5vw;
}
.carousel-icone-container{
    background-color: grey;
    width: 10.695vw;
    height: 5.695vw;
    margin-bottom:1.5vw;
}

.carousel-image-container{
    background-color: grey;
    width: 26.18vw;
    height: 25.625vw;
    margin-bottom:1.5vw;
}
.carousel-image-container>img{
    height: 100%;
    width: 100%;
    object-fit: fill;
}

/* Reset le checkbox */
.carousel-type3-checkbox input{
    appearance: none;
    background-image: url('/images/icon/icon_checkbox_unchecked.png');
    background-size:cover;
    margin:0;
    width:3.5vw;
    height: 3.5vw;
}

.carousel-type3-checkbox input:checked{
    background-image: url('/images/icon/icon_checkbox_checked.png');
}

.carousel-type3-titre{
    margin: 2vw 0;
}


/***********************************/
/***********************************/
/*            MOBILE               */
/***********************************/
/***********************************/
@media screen and (max-width: 768px) and (orientation: portrait) {
    body{
        --lr-spacing-dt : var(--lr-spacing-mob);
    }
    .carousel-background{
        height: fit-content;
    }
    .carousel-container{
        gap:3vw;
    }
    .carousel-item-container{
        min-width: 79.48vw;
    }
    .carousel-type-container{
        margin: 0 auto;
        padding-top:11vw;
    }
    .carousel-arrow-container{
        display: none;
    }
    .carousel-type0-text{
        margin-bottom:7vw;
    }
    .carousel-type0-btn{
        width: 18vw;
    }
    .carousel-type0-btn img{
        height:100%;
        width:5vw;
    }
    .carousel-image-container{
        width:77.43vw;
        height: 77.43vw;
    }
    .carousel-type1{
        height:auto;
    }
    .carousel-type1-titre{
        font-size: 5.64vw;
    }
    .carousel-type1-overlay{
        padding:3vw;
    }
    .carousel-icone-container{
        background-color: unset;
        width: 14.97vw;
        height: 20.28vw;
        margin-bottom: unset;
    }
    .type2-mobile{
        height: fit-content;
        min-width: unset;
        width: 87.53vw;
        padding-top:2vw;
    }
    .carousel-type3-checkbox input{
        width: 9.74vw;
        height: 9.74vw;
        margin-left:3vw;
    }
    .carousel-type3{
        margin-left:-3vw;
    }
    .carousel-icone{
        max-width: unset;
        height:80%;
    }
    .carousel-type3-text{
        margin-left:3vw;
    }
    .carousel-type3-titre{
        margin-left:3vw;
    }
}