/*----------------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-fond); /*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 { /*:nth-of-type(1)::after, .diaporama a:nth-of-type(n+3)*/
    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 70%, var(--couleur-noir)) /*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: uppercase; /*texte transformer*/
}

.diaporama .information p {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    font-family: var(--police-base); /*police type*/
    font-size: 20pt; /*police taille*/
}

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

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

@media all and (max-width: 800px) {
    .diaporama .information {
        left: 10%; /*position en partant de la gauche*/
    }
    .diaporama .information h1 {
        font-size: 20pt; /*police taille*/
        line-height: normal; /*espace entre ligne*/ 
    }
    .diaporama .information p {
        font-size: 12pt; /*police taille*/
    }
}



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

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

.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;
}

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

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

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

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

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

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


/*----------------POINT----------------*/

.point {
    width: 15px; /*largeur*/
    height: 15px; /*hauteur*/
    margin: 20px 7px 16px 7px; /*marge extérieur*/
    border-radius: 50%; /*bordure arrondi*/
    display: inline-block; /*apparition des balises :block, inline, inline-block, flex, grid, none*/
    cursor: pointer; /*type de curseur : default, pointer, help, wait, crosshair, not-allowed, zoom-in, grab, etc...*/
    transition: all 0.5s ease; /*temps de changement*/
    background-color: var(--couleur-blanc); /*couleur non selectionner*/
}

.point:hover {
    box-shadow: 0px 0px 20px 4px rgb(255, 255, 255); /*couleur de l'ombre*/
}

.point.active {
    background-color: var(--couleur-blanc-survol); /*couleur selectionner*/
}

.point.active:hover {
    box-shadow: 0px 0px 20px 4px rgb(255, 0, 0); /*couleur de l'ombre*/
}