#contact{
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../medias/20250507155110photo-des-insoumis-de-montreuil.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

div.contact-bg-blanc{
	max-width: 800px;
	background-color: white;
	border-radius: 30px;
	padding: 40px;
	p{
		font-size: 24px;
		font-variation-settings: "slnt" 0, "wdth" 75, "wght" 400;
		margin-top: 0;
	}
	form{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-areas: 
			"nom nom nom nom"
			"mail mail tel tel"
			"msg msg msg msg"
			"accord accord accord btn"
		;
		gap: 20px;
		align-items: center;
		#form-contact-nom{
			grid-area: nom;
		}
		#form-contact-mail{
			grid-area: mail;
		}
		#form-contact-tel{
			grid-area: tel;
		}
		#form-contact-message{
			grid-area: msg;
		}
		#form-contact-accord{
			grid-area: accord;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: baseline;
			justify-content: flex-start;
			gap: 5px;
		}
		#form-contact-envoi{
			grid-area: btn;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: baseline;
			justify-content: flex-end;
			gap: 5px;
			.btn{
				width: 100%;
				font-size: 1.1em;
				padding: 10px 20px;
			}
		}
	}
}

/* @media screen and (max-width: 810px){
	div.contact-bg-blanc form{
		grid-template-areas: 
			"nom nom nom nom"
			"mail mail mail mail"
			"tel tel tel tel"
			"msg msg msg msg"
			"accord accord accord accord"
			"btn btn btn btn"
		;
	}
} */

/* BASES FORMULAIRES */

	textarea{
		resize: vertical;
	}

	label{
		display: block;
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 400;
	}

	.input{
		width: 100%;
	}

	input, textarea{
		width: 100%;
		padding: 10px;
		border: var(--gris2) 1px solid;
		border-radius: 5px;
	}
	
	input[type="checkbox"]{
		width: min-content;
	}

	.input:has([required]) label::after, fieldset.required legend::after{
		content: " *";
		color: var(--rouge);
		font-weight: 600;
	}

	.input:has(> [disabled]){
		color: #777777 !important;
		label{
			text-decoration: line-through;
		}
		input{
			border-color: #777777;
			color: #777777 !important;

		}
	}

	.invalid{
		border: var(--rouge) 1px solid !important;
	}

	button{
		box-shadow: none;
		border: none;
	}