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

html {
	--espace: 25px; /*variable*/
}

h1 {
	margin-bottom: 75px; /*marge extérieur bas*/
}

form {
	width: 60%; /*largeur*/
	margin: auto; /*marge extérieur*/
	margin-bottom: 30px; /*marge extérieur bas*/
	padding: var(--espace); /*marge intérieur*/
	font-family: var(--police-texte-medium); /*police type*/
    font-size: 13pt; /*police taille*/
	text-transform: uppercase; /*texte transformer*/
	border-radius: 20px; /*bordure arrondi*/
	border: 2px solid var(--couleur-bordure); /*bordure tout en un*/
	box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.1); /*bordure ombre*/
}

form .information {
	display: grid;
	grid-template-columns: 1fr 1fr; /* deux colonnes */
	gap: var(--espace) 50px; /* espace entre colonnes et lignes */
}

form .champ {
	width: 100%; /*largeur*/
	display: flex; /*apparition des balises*/
	flex-direction: column; /*direction des contenants*/
}

form .mini {
	text-transform: none; /*texte transformer*/
	color: var(--couleur-noir); /*police couleur*/
}

form label {
	margin-bottom: 5px; /*marge extérieur bas*/
}

form span {
	margin-left: 2px; /*marge extérieur gauche*/
	color: red; /*police couleur*/
}

form input {
	padding: 2px 8px; /*marge intérieur*/
	height: 30px; /*hauteur*/
}

form textarea {
	padding: 10px; /*marge intérieur*/
	resize: vertical; /*redimensionnement*/ 
}

form input:focus, textarea:focus {
	outline: 1px solid var(--couleur-bouton); /*bordure exterieur*/
}

form input, textarea {
	border-radius: 10px; /*bordure arrondi*/
	border: 1px solid var(--couleur-gris-130); /*bordure tout en un*/
	font-family: var(--police-texte); /*police type*/
    font-size: 11pt; /*police taille*/
	color: var(--couleur-gris-100); /*police couleur*/
}

form input#nom, form input#ville, form input#pays {
  text-transform: uppercase; /*texte transformer*/
}

form input#prenom, form input#adresse  {
  text-transform: capitalize; /*texte transformer*/
}

form input#mail {
  text-transform: lowercase; /*texte transformer*/
}

form input[type="file"] {
	margin: auto 0; /*marge extérieur*/
	padding: auto; /*marge intérieur*/
	padding-left: 0px; /*marge intérieur gauche*/
	border: none; /* les file inputs ont un style natif */
	border-radius: 0px; /*bordure arrondi*/
	box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
	font-family: var(--police-texte); /*police type*/
    font-size: 12pt; /*police taille*/
	color: var(--couleur-gris-100); /*police couleur*/
}

form input:focus[type="file"] {
	outline: none; /*bordure exterieur*/
}

form .champ-message {
	margin-top: var(--espace); /*marge extérieur haut*/
	display: flex; /*apparition des balises*/
	flex-direction: column; /*direction des contenants*/
}

form p {
	margin-top: 10px; /*marge extérieur haut*/
	font-family: var(--police-texte); /*police type*/
    font-size: 11pt; /*police taille*/
	text-transform: none; /*texte transformer*/
}

form .bouton {
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/
}

form .bouton button {
    width: 240px; /*largeur*/
    padding: 12px 0px; /*marge intérieur : haut, droite, bas, gauche*/
    border: none; /*bordure tout en un*/
    border-radius: 100px; /*bordure arrondi*/
    cursor: pointer; /*type de curseur*/
    text-decoration: none; /*texte decoration*/
	text-transform: uppercase; /*texte transformer*/
    text-align: center; /*texte alignement*/ 
    font-family: var(--police-texte-gras); /*police type*/
    font-size: var(--taille-police-bouton); /*police taille*/
    background-color: var(--couleur-bouton); /*couleur du fond*/
    color: var(--couleur-blanc); /*police couleur*/
}

address {
	width: 60%; /*largeur*/
	margin: auto; /*marge extérieur*/
	margin-bottom: 75px; /*marge extérieur bas*/
	display: flex; /*apparition des balises*/
	flex-direction: column; /*direction des contenants*/
	align-items: center; /*centre verticalement le contenu*/
	font-family: var(--police-texte); /*police type*/
    font-size: 13pt; /*police taille*/
	font-style: normal; /*police style*/ 
	color: var(--couleur-noir); /*police couleur*/
}

address a {
	text-decoration: none; /*texte decoration*/
	color: var(--couleur-noir); /*police couleur*/
}

address a + a {
	margin-top: 10px; /*marge extérieur haut*/
}

address a:hover {
	text-decoration: none; /*texte decoration*/
}


/*----------------POP UP----------------*/

.popup {
	width: 100vw; /*largeur*/
	height: 60px; /*hauteur*/
	position: fixed; /*type de positionnement*/
	top: 60px; /*position en partant du haut*/
	left: 0; /*position en partant de la gauche*/
	opacity: 1; /*opacité*/
	display: none; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/ 
	align-items: center; /*centre verticalement le contenu*/
	font-family: var(--police-texte-medium); /*police type*/
    font-size: var(--taille-police-14); /*police taille*/
	font-style: normal; /*police style*/ 
	color: var(--couleur-blanc); /*police couleur*/
}

.popup:has(.succes) {
    background: green; /*couleur du fond*/
}

.popup:has(.erreur) {
    background: red; /*couleur du fond*/
}