/*----------------VARIABLE----------------*/

html {
	--longueur: 60%; /*variable*/
}

@media all and (max-width: 1500px) {
    html {
        --longueur: 70%; /*variable*/
    }
}

@media all and (max-width: 1000px) {
    html {
        --longueur: 85%; /*variable*/
    }
}


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

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

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

/*carte*/
.fond:nth-of-type(5) {
    padding: 150px 0px 155px 0px; /*marge intérieur*/
}

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

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

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


/*----------------PRESENTATION----------------*/

.presentation {
    width: var(--longueur); /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 75px 0px; /*marge intérieur*/
}

.ville {
    width: calc(var(--longueur) + 2.5%); /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    text-align: center; /*texte alignement*/
}

.ville hr {
	width: 100%; /*largeur*/
	height: 4px; /*hauteur*/
	margin: auto; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	border-width: 0; /*bordure épaisseur*/
	background-color: var(--couleur-blanc); /*couleur du fond*/
}

.ville h3 {
    margin: 20px auto; /*marge extérieur*/
    font-size: 44pt; /*police taille*/
    letter-spacing: 6pt; /*espace entre lettre*/
}

/*----------------PRESENTATION RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .ville h3 {
        font-size: 40pt; /*police taille*/
    }
}

@media all and (max-width: 800px) {
    .ville h3 {
        font-size: 32pt; /*police taille*/
    }
}


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

.professeur {
    width: calc(var(--longueur) + 2.5%); /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-top: 50px; /*marge extérieur haut*/
    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*/
}

.gris .professeur .titre {
    text-align: right; /*texte alignement*/
}

/*----------------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: var(--longueur); /*largeur*/
        margin: auto; /*marge extérieur*/
        margin-top: 75px; /*marge extérieur haut*/
    }
    .gris .professeur .titre {
        text-align: initial; /*texte alignement*/
    }
}

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


/*----------------CARTE----------------*/

address {
    width: 80%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 30px 0px; /*marge intérieur*/
    text-align: center; /*texte alignement*/
}


/*----------------SUIVEZ-NOUS----------------*/

.suivez-nous {
	top: -24px; /*position en partant du haut*/
}

/*----------------SUIVEZ-NOUS RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
	.suivez-nous {
        top: 100px; /*position en partant du haut*/
	}

}


/*----------------SIGNATURE----------------*/

.signature {
    margin-top: -74px; /*marge extérieur*/
	padding: 0px 0px 50px 0px; /*marge intérieur*/
}

/*----------------SIGNATURE RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
	.signature {
		margin-top: 0px; /*marge extérieur*/
		padding: 40px 0px; /*marge intérieur*/
	}
}