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

.carrousel {
    width: 100%; /*largeur*/
    display: flex; /*apparition des balises*/
    justify-content: center; /*centre horizontalement le contenu*/
    position: relative; /*type de positionnement*/
}

/*----------------DIAPORAMA----------------*/

.diaporama {
    width: 100vw; /*largeur*/
    height: calc(100dvh - 60px); /*hauteur*/
    display: flex; /*apparition des balises :block, inline, inline-block, flex, none*/
    overflow: hidden; /*dépassement du contenant : visible, hidden, clip, scroll, auto*/
}

.diaporama li {
    width: 100%; /*largeur*/
    flex-shrink: 0; /*reduction du contenant*/
    transition: transform ease-in-out 0.7s; /*transition*/
    transform: translateX(-100%); /*transforme*/
}

.diaporama li::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: var(--degrader); /*dégradé*/
    opacity: 0.6; /*opacité*/
}

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

.diaporama .logo {
    width: 50%; /*largeur*/
    position: absolute; /*type de positionnement*/
    top: 50%; /*position en partant du haut*/
    left: 50%; /*position en partant de la gauche*/
    transform: translate(-50%, -50%); /*transforme*/  
    z-index: 1; /*position au dessus ou au dessous*/
    color: var(--blanc); /*couleur*/
}

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

.diaporama .information {
    width: fit-content; /*largeur*/
    position: absolute; /*type de positionnement*/  
    bottom: 15%; /*position en partant du bas*/
    left: 15%; /*position en partant de la gauche*/
    color: var(--blanc); /*police couleur*/
    z-index: 1; /*position au dessus ou au dessous*/
}

.diaporama .information h4 {
    width: 100%; /*largeur*/
    padding: 0px; /*marge intérieur*/
    text-align: left; /*texte alignement*/
    color: inherit; /*police couleur*/
    font-size: var(--32); /*police taille*/
}

.diaporama .information p {
    width: 100%; /*largeur*/
    margin-bottom: 0px; /*marge extérieur bas*/
    color: inherit; /*police couleur*/
    font-size: var(--18); /*police taille*/
}


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

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

.fleche {
    width: 200px; /*largeur*/
    margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    padding-left: 100px; /*marge intérieur gauche*/
    display: flex; /*apparition des balises*/
    align-items: center; /*centre verticalement le contenu*/
    position: absolute; /*type de positionnement*/
    top: 0; /*position en partant du haut*/
    bottom: 0; /*position en partant du bas*/
	border-radius: 0px; /*bordure arrondi*/
    transition: all 0.5s ease; /* Ajoutez une transition*/
    user-select: none; /*opération de sélection*/
    opacity: 0; /*opacité*/
    background-color: transparent; /*couleur*/
    color: var(--blanc); /*couleur de la flèche*/
    z-index: 1; /*position au dessus ou au dessous*/
}

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

.precedant {
    left: 0%; /*position en partant de la gauche*/
}

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