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

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

.galerie {
	width: 80%; /*largeur*/
    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 a {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    text-decoration: none; /*texte decoration*/
}

.galerie figure {
    width: 100%; /*largeur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    overflow: hidden; /*dépassement du contenant*/
    position: relative; /*type de positionnement*/
}

.galerie figure::after {
    content: ""; /*ne gere que son contenu*/
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/
    top: 0; /*position en partant du haut*/
    left: 0; /*position en partant de la gauche*/
	opacity: 0; /*opacité*/
    pointer-events: none; /*événements de pointer*/
    transition: opacity 1s ease-in-out 0.1s; /*transition*/
	background-color: var(--couleur-noir); /*couleur du fond*/
}

.galerie figure:hover::after {
    opacity: 0.6; /*opacité*/
}

.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);
	transition: transform 0.6s ease-in-out 0.1s; /*transiton*/
}

.galerie figure:hover img {
    transform: scale(1.1); /*transformation échelle*/
}

.galerie figcaption {
	width: 100%; /*largeur*/
    height: 100%; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
	position: absolute; /*type de positionnement*/ 
    left: 50%; /*position en partant de la gauche*/
    transform: translate(-50%); /*transforme*/
    z-index: 1; /*position au dessus ou au dessous*/
    color: var(--couleur-blanc); /*police couleur*/
    background-image: linear-gradient(to bottom, transparent 60%, #00a0c4); /*dégradé*/
}

.galerie .titre {
    width: 100%; /*largeur*/
    margin: 10px auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/ 
    top: 0px; /*position en partant du haut*/
    font-family: var(--police-evenement); /*police type*/
    font-size: 32pt; /*police taille*/
    font-weight: normal; /*police poid*/
    text-align: center; /*texte alignement*/
    text-transform: uppercase; /*texte transformer*/
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /*ombre texte*/
    transform: scaleY(0.8) scaleX(1); /*transforme*/
}

.galerie .artiste {
    width: 100%; /*largeur*/
    position: absolute; /*type de positionnement*/ 
    bottom: 20px; /*position en partant du bas*/
    font-family: var(--police-titre); /*police type*/
    font-size: 26pt; /*police taille*/
    text-align: center; /*texte alignement*/
    text-transform: uppercase; /*texte transformer*/
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /*ombre texte*/
}

.galerie .date {
    width: 100%; /*largeur*/
    position: absolute; /*type de positionnement*/ 
    bottom: 0px; /*position en partant du bas*/
    font-family: var(--police-bouton); /*police type*/
    font-size: 14pt; /*police taille*/
    text-align: center; /*texte alignement*/
    text-transform: uppercase; /*texte transformer*/
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /*ombre texte*/
}


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

@media all and (max-width: 1200px) {
    .galerie {
        width: 100%; /*largeur*/
        grid-template-columns: repeat(auto-fill, 100%); /*3ème colonnes égales*/
    }
    .galerie img {
    	width: 100%; /*largeur*/
        height: 350px; /*hauteur*/
    }
    .galerie .titre {
        font-size: 56pt; /*police taille*/
    }
}

@media all and (max-width: 800px) {
    .galerie .titre {
        font-size: 46pt; /*police taille*/
    }
    .galerie .artiste {
        font-size: 20pt; /*police taille*/
    }
    .galerie .date {
        font-size: 12pt; /*police taille*/
    }
}