/*----------------VARIABLE----------------*/
html {
    --image-galerie: 350px; /*variable*/
}


/*----------------GALERIE MEDIA----------------*/

.galerie {
    width: 80%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 50px 0px; /*marge intérieur*/
}

.galerie ul {
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: grid; /*apparition des balises*/
    grid-template-columns: repeat(auto-fill, var(--image-galerie)); /*3ème colonnes égales*/
    grid-gap: 35px; /*espace entre les éléments de la grille*/
    justify-content: center; /*centre horizontalement le contenu*/
}

.galerie li {
	width: var(--image-galerie); /*largeur*/
    height: var(--image-galerie); /*hauteur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    overflow: hidden; /*dépassement du contenant*/
    cursor: pointer; /*type de curseur*/
    list-style-type: none; /*marqueur style*/
    /*border-width: 2px; /*bordure épaisseur*/
    /*border-style: solid; /*bordure style*/ 
    /*border-color: var(--couleur-blanc-casser); /*bordure couleur*/
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); /*bordure ombre*/
}

.galerie img {
	width: var(--image-galerie); /*largeur*/
    height: var(--image-galerie); /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    object-position: center; /*position du contenu*/
    transform: scale(1); /*transforme*/
    transition: transform 1s ease-in-out; /*transiton*/
}

.galerie img:hover {
    transform: scale(1.1); /*transforme*/
}

.galerie video {
    width: 100%; /*largeur*/
    height: 100%; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    object-position: center; /*position du contenu*/ 
}

/*----------------GALERIE RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
    .galerie {
        width: 100%; /*largeur*/
    }
    .galerie ul {
        grid-template-columns: repeat(auto-fill, 95%); /*3ème colonnes égales*/
    }    
    .galerie img, .galerie li {
    	width: 100%; /*largeur*/
        height: 350px; /*hauteur*/
    }

}

@media all and (max-width: 800px) {
    .galerie ul {
        grid-template-columns: repeat(auto-fill, 85%); /*3ème colonnes égales*/
    }  
}


/*----------------VISIONNEUR----------------*/

.visionneuse {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: none; /*apparition des balises*/
    justify-content: center; /*centre horizontalement le contenu*/ 
    align-items: center; /*centre verticalement le contenu*/
    position: fixed; /*type de positionnement*/
    top: 0; /*position en partant du haut*/
    right: 0; /*position en partant de la droite*/
    bottom: 0; /*position en partant du bas*/
    left: 0; /*position en partant de la gauche*/
    z-index: 3; /*position au dessus ou au dessous*/
    background-color: rgba(0, 0, 0, 0.9); /*couleur du fond*/  
}

.visionneuse.active {
    display: flex; /*apparition des balises*/
}

.visionneuse .cadre {
    width: auto; /*largeur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
}


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

.visionneuse .fleche {
    width: 100px; /*largeur*/
    margin: 0px 10px; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    transition: color 0.5s ease; /*transiton*/
    flex-shrink: 0; /*reduction du contenant*/ 
    cursor: pointer; /*type de curseur*/
    color: var(--couleur-blanc); /*couleur*/
}

.visionneuse .fleche:hover {
    color: var(--couleur-beige); /*couleur*/
}

.visionneuse .suivant {
    transform: scaleX(-1); /*transforme*/
}

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

@media all and (max-width: 1000px) {
    .visionneuse .fleche {
        width: 55px; /*largeur*/
        margin: 0px 2px; /*marge extérieur*/
    }
}


/*----------------MEDIA----------------*/

.media {
    margin: 0; /*marge extérieur*/
    padding: 15px; /*marge intérieur*/
    border-radius: 5px; /*bordure arrondi*/
    position: relative; /*type de positionnement*/
    background-color: var(--couleur-noir); /*couleur du fond*/
}

.media img {
    width: 100%; /*largeur*/
    max-height: 80vh; /*hauteur maximum*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
}

.media figcaption p {
    font-size: 12pt; /*police taille*/
}

.media figcaption a {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    color: var(--couleur-blanc); /*police couleur*/
}

.media figcaption a:hover {
    color: var(--couleur-beige); /*police couleur*/
}


/*----------------CROIX----------------*/

.visionneuse .croix-fermer-visionneuse {
	width: 20px; /*largeur*/
    height: 20px; /*hauteur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/
    top: 30px; /*position en partant du haut*/
    right: 30px; /*position en partant de la droite*/
    cursor: pointer; /*type de curseur*/
	color: var(--couleur-blanc); /*couleur*/
}

/*----------------GALERIE RESPONSIVE----------------*/

@media all and (max-width: 700px) {
    .visionneuse .croix-fermer-visionneuse {
        width: 15px; /*largeur*/
        height: 15px; /*hauteur*/
        top: 20px; /*position en partant du haut*/
        right: 20px; /*position en partant de la droite*/
    }
}