#contact{
	#contact-img{
		display: grid;
		grid-template-columns: 2fr 3fr;
		gap: 20px;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		p{
			margin-top: 0;
		}
		#container-form{
			container-type: inline-size;
			display: block;
			width: 100%;
		}
		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_enquete{
					width: 100%;
					font-size: 1.1em;
					padding: 10px 20px;
				}
			}
		}
	}
}

/* Media queries pour le formulaire */

	@media (max-width: 700px) {
		#contact-img{
			grid-template-columns: 1fr !important;
		}
	}

	@container (max-width: 400px) {
		#container-form form {
			grid-template-columns: 1fr !important;
			grid-template-areas: 
				"nom"
				"mail"
				"tel"
				"msg"
				"accord"
				"btn" !important
			;
			gap: 10px !important;
			#form-contact-envoi{
				justify-content: center !important;
				.btn_enquete{
					width: min-content !important;
				}
			}
		}
	}
/*  */