div#fondcorps
{
	background-image: url(../../images/accueil-eleves-mains.png);
	background-position: 100% 25%;
}

div#div_form
{
	display: grid;
	grid-template-columns: 1fr 6fr;
  	grid-gap: 10px;
  	
  	margin-top: 5px;
}

div#div_form div.titre_form, div#div_form div.champ_form
{
	border: 1px solid var(--couleur-header-bordure);
	padding: 5px;
	
	display: flex;
	column-gap: 5px;
	align-items: center;
	flex-wrap: wrap;
}

div#div_form div.double
{
	grid-column: 1 / 3;
}

div#div_form div.var_form
{
	display: none;
	opacity: 0;
}

div#div_form div#contenant_captcha
{
	width: 100%;
	text-align: center;
	
}

div#div_form input[type="text"], div#div_form input[type="tel"], div#div_form input[type="email"]
{
	width: calc(100% - 10px);
}

div#div_form textarea#message
{
	width: calc(100% - 10px);
	height: 300px;
}

div#div_form input.bouton_envoyer
{
	width: 100%;
	
	padding: 10px;
	
	font-size: 20px;
	color: white;
	
	background: linear-gradient(var(--couleur-header1), var(--couleur-header2));
	border: 3px solid var(--couleur-header-bordure);
	border-radius: 2px;
}

div#div_form input.bouton_envoyer:hover, div#div_form input.bouton_envoyer:active
{
	transform: translate(1px, 1px);
	background: linear-gradient(var(--couleur-menu-actif1), var(--couleur-menu-actif2));
}

div#div_form input.bouton_envoyer:active
{
	filter: brightness(75%);
}

/* Gestion des radio */

div#div_form div.div_radio
{
	margin: 2px;
	padding: 4px;
	
	flex: 1 1 auto;
	
	text-align: center;
	
	background-color: var(--couleur-gris-clair);
	border: 1px dotted var(--couleur-gris1);
	border-radius: 2px;
}

div#div_form div#div_preciser_autre
{
	width: 100%;
	margin-top: 5px;
}

div#div_form div#div_preciser_autre:has(input#preciser_autre:placeholder-shown)
{
	display: none;
}

/* Réponse formulaire */

div#reponse_formulaire
{
	
	display: flex;
	
	padding: 10px;
	
	border-width: 2px;
	border-style: solid;
	border-radius: 5px;
	
	margin: 10px;
}

div.formulaire_valide
{
	border-color: var(--couleur-valide2);
	background-color: var(--couleur-valide1);
}

div.formulaire_invalide
{
	border-color: var(--couleur-invalide2);
	background-color: var(--couleur-invalide1);
}

div#img_reponse_formulaire
{
	display: flex;
	align-items: center;
	
	padding-left: 10px;
	padding-right: 10px;
	
	font-size: 40px;
}

div.formulaire_valide div#img_reponse_formulaire
{
	color: var(--couleur-valide2);
}

div.formulaire_invalide div#img_reponse_formulaire
{
	color: var(--couleur-invalide2);
}

div.formulaire_valide
{
	border-color: var(--couleur-valide2);
	background-color: var(--couleur-valide1);
	
	margin: 10px;
}

div#texte_reponse_formulaire
{
	text-align: justify;
}

/* Gestion des erreurs */

	/* Validation css */
	div#div_form div.div_error
	{
		border: 1px solid var(--couleur-invalide2);
		background-color: var(--couleur-invalide1);
		
		margin-top: -5px;
		
		padding: 2px;
	}
	
	div#div_form div.div_error ul
	{
		margin: 0;
	}
	div#div_form div.div_error li
	{
		margin: 2px;
	}
	
	div#div_form input:invalid, div#div_form textarea:invalid, div#div_form input.error, div#div_form textarea.error
	{
		border-color: var(--couleur-invalide2);
		background-color: var(--couleur-invalide1);
	}

/* Cacher Formulaire */

div#formulaire_contact
{
	margin: 0;
	padding: 0;
	
	position: relative;
	
	overflow-x: scroll;
}

div#formulaire_contact div#cacher_formulaire_contact
{
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
	
	z-index: 100;
	
	background: repeating-linear-gradient(
	  45deg,
	  var(--couleur-gris1-transparent),
	  var(--couleur-gris1-transparent) 10px,
	  var(--couleur-gris2-transparent) 10px,
	  var(--couleur-gris2-transparent) 20px
	);
	
	display: flex;
	align-items: center;
	justify-content: center;
	
}

div#formulaire_contact div#cacher_formulaire_contact_texte
{

	padding: 30px;
	border-radius: 30px;
	
	background: radial-gradient(var(--couleur-blanc),var(--couleur-blanc), transparent);
	
	font-size: larger;
}