/*----------------CARROUSEL----------------*/

.carrousel {
    width: 100%; /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-top: 65px; /*marge extérieur haut*/
    padding: 0; /*marge intérieur*/
    text-align: center; /*alignement : left, right, center, justify*/
    background-color: var(--couleur-noir); /*couleur du fond*/
}

.cadre {
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises :block, inline, inline-block, flex, grid, none*/
    justify-content: center; /*centre horizontalement le contenu*/
    position: relative; /*type de positionnement*/ 
}

.diaporama {
    width: 100%; /*largeur*/
    max-width: 100vw; /*largeur maximum*/
    max-height: 85vh; /*hauteur maximum*/
    margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises :block, inline, inline-block, flex, none*/
    overflow: hidden; /*dépassement du contenant : visible, hidden, clip, scroll, auto*/
}

.diaporama a {
    width: 100%; /*largeur*/
    margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    position: relative; /*type de positionnement*/ 
    text-decoration: none; /*texte decoration*/
    flex-shrink: 0; /*reduction du contenant*/
    transition: transform 1s ease; /*transition*/
    transform: translateX(-100%); /*transforme*/
}

.diaporama a::after {
    content: ""; /*ne gere que son contenu*/
    width: 100%; /*largeur*/
    height: 100%; /*hauteur*/
    position: absolute; /*type de positionnement*/
    bottom: 0; /*position en partant du bas*/
    left: 0; /*position en partant de la gauche*/
    background-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.8)) /*dégradé*/
}

.diaporama img {
    width: 100%; /*largeur*/
    height: 100%; /*hauteur*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    object-position: center; /*position du contenu*/
}


/*----------------CARROUSEL RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .diaporama {
        max-height: 60vh; /*hauteur maximum*/
    }

}

@media all and (max-width: 800px) {
    .diaporama {
        max-height: 40vh; /*hauteur maximum*/
    }

}


/*----------------INFORMATION----------------*/

.diaporama .information {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/  
    bottom: 10%; /*position en partant du bas*/
    left: 15%; /*position en partant de la gauche*/
    text-align: left; /*texte alignement*/
    letter-spacing: 0.6pt; /*espace entre lettre*/
    line-height: 0.5; /*espace entre ligne*/
    z-index: 1; /*position au dessus ou au dessous*/
    color: var(--couleur-blanc); /*police couleur*/
}

.diaporama .information h1 {
    margin: 0; /*marge extérieur*/
    padding: 20px 0px; /*marge intérieur*/
    font-family: var(--police-titre); /*police type*/
    font-size: 40pt; /*police taille*/
    text-transform: capitalize; /*texte transformer*/
}

/*----------------INFORMATION RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .diaporama .information h1 {
        font-size: 30pt; /*police taille*/
    }
}

@media all and (max-width: 800px) {
    .diaporama .information h1 {
        font-size: 20pt; /*police taille*/
    }
}



/*----------------FLÈCHE----------------*/

.carrousel .cadre:hover .fleche {
    opacity: 1; /*opacité*/
}

.carrousel .fleche {
    width: 125px; /*largeur maximum*/
    margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/
    top: 50%; /*position en partant du haut*/
    user-select: none; /*opération de sélection*/
    flex-shrink: 0; /*reduction du contenant*/
    opacity: 0; /*opacité*/
    cursor: pointer; /*type de curseur : default, pointer, help, wait, crosshair, not-allowed, zoom-in, grab, etc...*/
    transition: all 0.5s ease; /* Ajoutez une transition*/
    color: var(--couleur-blanc); /*couleur de la flèche*/
    z-index: 1;
}

.carrousel .fleche:hover {
    color: var(--couleur-rouge-tomate); /*couleur de la flèche*/
}

.carrousel .suivant {
    transform: scaleX(-1) translate(0%, -50%); /*transforme*/
    right: 6%; /*position en partant de la droite*/
}

.carrousel .precedant {
    transform: translate(0%, -50%); /*postion*/
    left: 6%; /*position en partant de la gauche*/
}

/*----------------CARROUSEL RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .carrousel .fleche {
        width: 100px; /*largeur maximum*/
    }
}

@media all and (max-width: 800px) {
    .carrousel .cadre:hover .fleche {
        opacity: 0; /*opacité*/
    }
}