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

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

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

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

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

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

/*----------------TEXTE----------------*/

.contact {
    width: var(--longueur); /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-top: 50px; /*marge extérieur haut*/
    padding: 0; /*marge intérieur*/
    width: 80%; /*largeur*/
    font-size: 18pt; /*police taille*/
    text-align: center; /*texte alignement*/
}


/*----------------TABLEAU----------------*/

.formulaire {
    width: 90%; /*largeur*/
    max-width: 1100px; /*largeur maximum*/
    margin: 75px auto; /*marge extérieur*/
    padding: 0px 20px 20px 20px; /*marge intérieur*/
    border-radius: 30px; /*bordure arrondi*/
    display: flex; /*apparition des balises*/
    flex-direction: column; /*direction des contenants*/
    justify-content: center; /*centre horizontalement le contenu*/ 
    align-items: center; /*centre verticalement le contenu*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /*bordure ombre*/
    background-color: var(--couleur-coquille-d-oeuf); /*couleur du fond*/
    color: var(--couleur-noir); /*police couleur*/
}

.formulaire .entete {
    width: 100%; /*largeur*/
    height: 100px; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0px 20px; /*marge intérieur*/
    border-radius: 20px 20px 0px 0px; /*bordure arrondi*/
    display: flex; /*apparition des balises*/
    color: var(--couleur-blanc); /*police couleur*/
    background-color: var(--couleur-vermeil); /*couleur du fond*/
}


/*----------------FORMULAIRE----------------*/

form {
    width: 100%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 30px; /*marge intérieur*/
    border-radius: 0px 0px 15px 15px; /*bordure arrondi*/
    display: flex; /*apparition des balises*/
    flex-direction: column; /*direction des contenants*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
    background-color: var(--couleur-blanc); /*couleur du fond*/
}

.volet {
	width: 100%; /*largeur*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/
    justify-content: space-between; /*centre horizontalement le contenu*/
}

.champ {
    width: 47.5%; /*largeur*/
    margin: 0; /*marge extérieur*/
    margin-bottom: 20px; /*marge extérieur bas*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/ 
    flex-direction: column; /*direction des contenants*/
}

.message {
    width: 100%; /*largeur*/
    height: 175px; /*hauteur*/
    margin-bottom: 30px; /*marge extérieur bas*/
}

label {
    margin: 0px 0px 10px 5px; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    font-family: var(--police-bouton); /*police type*/
    font-size: 14pt; /*police taille*/
    text-align: left; /*texte alignement*/
    text-transform: capitalize; /*texte transformer*/
}

input, textarea {
	margin: 0; /*marge extérieur*/
    padding: 4px 10px; /*marge intérieur*/
    border-width: 2px; /*bordure épaisseur*/
    border-style: solid; /*bordure style*/
    border-color: #DCDCDC; /*bordure couleur*/
    border-radius: 6px; /*bordure arrondi*/
    font-family: var(--police-base); /*police type*/
    font-size: 13.5pt; /*police taille*/
    text-align: justify; /*texte alignement*/
    background-color: #FBFBFB; /*couleur du fond*/
}

input:focus, textarea:focus {
    outline-width: 2px; /*bordure exterieur épaisseur*/
    outline-style: solid; /*bordure exterieur style*/ 
    outline-color: #B4B4B4; /*bordure exterieur couleur*/
}

textarea {
    height: 100%; /*hauteur*/
    resize: none; /*redimensionnement*/
}

address {
    width: 80%; /*largeur*/
    font-size: 18pt; /*police taille*/
    text-align: center; /*texte alignement*/
}

/*----------------FORMULAIRE RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
    .volet {
        flex-direction: column; /*direction des contenants*/
    }

    .champ {
        width: 100%; /*largeur*/
    }

    label, input, textarea {
        font-size: 12pt; /*police taille*/
    }
    
    .contact {
        font-size: 16pt; /*police taille*/
    }

    address {
        font-size: 16pt; /*police taille*/
    }
}

/*----------------PARTENAIRE----------------*/

.partenaire {
	width: 80%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/ 
    justify-content: center; /*centre horizontalement le contenu*/
    flex-wrap: wrap; /*disposés en ligne*/
    gap: 50px; /*espace entre les éléments*/
}

.partenaire a {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
}

.partenaire svg {
    --image-partenaire: 500px; /*variable*/
	width: var(--image-partenaire); /*largeur*/
    height: 350px; /*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: filter 0.5s ease-in-out, color 0.5s ease-in-out; /*transiton*/ 
    color: var(--couleur-noir); /*police couleur*/
}

.partenaire svg:hover {
	filter: drop-shadow(0 0 15px var(--couleur-blanc-survol)); /*couleur de l'ombre*/
	color: var(--couleur-blanc-survol); /*couleur image*/
}


/*----------------PARTENAIRE RESPONSIVE----------------*/

@media all and (max-width: 800px) {
    .partenaire {
        gap: 0px; /*espace entre les éléments*/
    }
    .partenaire svg {
        --image-partenaire: 300px; /*variable*/
        height: var(--image-partenaire); /*largeur*/
    } 
}