/*----------------FOND----------------*/

/*présentation*/
.fond:nth-of-type(1) {
    padding: 150px 0px 200px 0px; /*marge intérieur*/
}

/*hip hop*/
.fond:nth-of-type(3) {
    padding: 20px 0px 50px 0px; /*marge intérieur*/
}


/*----------------FOND RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
    .fond:nth-of-type(1) {
        padding: 150px 0px 100px 0px; /*marge intérieur*/
    }

    .fond:nth-of-type(n+2) {
        padding: 0px 0px 100px 0px; /*marge intérieur*/
    }
}


/*----------------PROFESSEUR----------------*/

.professeur {
    width: 62.5%; /*largeur*/
    margin: 50px auto 25px auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    flex-direction: row; /*direction des contenants*/
    justify-content: space-between; /*centre horizontalement le contenu*/
}

.professeur img {
    --image: 400px; /*variable*/
    width: var(--image); /*largeur*/
    height: var(--image); /*hauteur*/
    margin: auto 0px; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    border-radius: var(--image); /*bordure arrondi*/
    object-fit: cover; /*ajuster à la taille de son contenant*/  
	object-position: center; /*position du contenu*/
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); /*bordure ombre*/
}

.professeur .paragraphe {
    width: 55%; /*largeur*/
    margin: auto 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
}

.professeur .titre {
    width: 100%; /*largeur*/
    margin-bottom: 25px; /*marge extérieur bas*/
    text-align: left; /*texte alignement*/
    text-transform: none; /*texte transformer*/
}


/*----------------PROFESSEUR RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .professeur {
        width: 100%; /*largeur*/
        flex-direction: column; /*direction des contenants*/
    }
    .professeur img {
        margin: auto;
        order: -1; /*définit l'ordre*/
    }
    .professeur .paragraphe {
        width: 85%; /*largeur*/
        margin: auto; /*marge extérieur*/
        margin-top: 75px; /*marge extérieur haut*/
    }
}

@media all and (max-width: 800px) {
    .titre {
        font-size: 18pt; /*police taille*/
    }
    .principal {
        font-size: 28pt; /*police taille*/
    }
    .professeur img {
        --image: 300px; /*variable*/
    }
    .professeur .titre {
        font-size: 18pt; /*police taille*/
    }
}

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

.galerie-media {
    width: 85%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 75px 0px 0px 0px; /*marge intérieur*/
}

.galerie-media ul {
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/ 
    gap: 20px; /*espace entre les éléments*/
}

.galerie-media ul::after {
    content: ""; /*ne gere que son contenu*/
    display: block; /*apparition des balises*/
    flex-grow: 10; /*utilise l'espace disponible*/
}

.galerie-media li {
    height: 350px; /*hauteur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: relative; /*type de positionnement*/
    flex-grow: 1; /*utilise l'espace disponible*/
    overflow: hidden; /*dépassement du contenant*/
    cursor: pointer; /*type de curseur*/
    list-style-type: none; /*marqueur style*/
}

.galerie-media img {
    width: 100%; /*largeur*/
    height: 100%; /*hauteur*/
    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-media img:hover {
    transform: scale(1.2); /*transforme*/
}

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

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

@media all and (max-width: 700px) {
    .galerie-media li {
        height: 250px; /*hauteur*/
    }
}


/*----------------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----------------*/

.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*/
}

.fleche:hover {
    color: var(--couleur-blanc-survol); /*couleur*/
}

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

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

@media all and (max-width: 1000px) {
    .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-fond); /*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-blanc-survol); /*police couleur*/
}


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

.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-rouge); /*couleur*/
}

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

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