:root {
	--contact-mrg-haut:112px;
	--contact-fond:#f5f5e6;
	--contact-contour:#f5f5e6;
	--contact-titre-txt:#392d2b;
	--contact-label-txt:#392d2b;
	--contact-cadre-input:#d4d2c3;
	--contact-placeholder-input:#392d2b;
	--contact-input-txt:#392d2b;
	--contact-input-fond:#fff;
	--contact-select:#d4d2c3;
	--contact-valider-fond:#7ebaa9;
	--contact-valider-txt:#fff;
	--contact-annuler-fond:#9b202f;
	--contact-annuler-txt:#fff;
	--contact-separateur:#392d2b;
	--contact-msg-txt:#392d2b;
	--contact-phone-txt:#392d2b;
}

main .contact { background-color:#f5f5e6; }

main .contact .content {
	display:flex;
	justify-content:space-between;
	width:100%;
	max-width:1200px;
	margin:auto;
	background:var(--contact-fond);
	padding:20px 40px 45px 40px;
}

main .contact .content h1 {
	font-size: 24px;
	font-weight: 500;
}

main .contact .content .left-side {
	width:25%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:start;
	justify-content:center;
	position:relative;
}

main .contact .content .left-side::before {
	content:"";
	position:absolute;
	height:100%;
	width:2px;
	right:-10%;
	top:0;
	background:var(--contact-separateur);
}

main .contact .content .left-side .details {
	margin-bottom:20px;
	text-align:left;
}

main .contact .content .left-side .details .topic {
	font-size:18px;
	font-weight:500;
	line-height: 2;
}

main .contact .content .left-side .details .text:first-of-type {
	font-weight:600;
	font-size:18px;
}

main .contact .content.left-side .details .text {
	font-size:16px;
	color:var(--contact-msg-txt);
	font-weight:500;
	line-height: 1.4;
}

main .contact .content .left-side .phone.details .text { font-weight:600; }

main .contact .content .right-side { width:65%; }

.modal-body .contact-form { padding:0 20px; }

.contact-form {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	margin-top:12px;
}

.contact-form .topic-text {
	font-size:23px;
	font-weight:500;
	color:var(--footer-fond);
}

.contact-form .input-box {
	height:fit-content;
	width:100%;
}

.contact-form .input-box input,
.contact-form .input-box select,
.contact-form .input-box textarea {
	height:30px;
	width:100%;
	border:none;
	outline:1px solid var(--contact-cadre-input);
	font-size:14px;
	background:var(--contact-input-fond);
	border-radius:0px;
	padding:0 8px;
	resize:none;
}

.contact-form .input-box select {
	background-color:var(--contact-select);
	font-weight:500;
}

.contact-form .input-box textarea {
	padding-top:6px;
	height:110px;
}

.contact-form .button {
	display:inline-block;
	margin-top:12px;
	align-self:center;
}

.contact-form label p { line-height:1.3; }

.contact-form input[type="checkbox"]#Chk_Privacy { margin-right:5px; }


/*	------------------- */


.contact .prestations {
	display:flex;
	flex-direction:column;
	gap:10px;
	background-color: var(--nvbar2dropbgcolor2);
	padding: 15px;
	margin-bottom:20px;
	text-transform:uppercase;
	color:var(--nvbar2droptextcolor1);
	font-weight:600;
	font-size:13px;
}

.contact .prestations h3 {
	font-weight:700;
	font-size:14px;
	color:var(--nvbar2droptextcolor1);
}

.contact .prestations p {
	color:var(--nvbar2droptextcolor3);
	font-weight:700;
	font-size:14px;
}

.contact .prestations p  a, .contact .prestations p a:visited { color: var(--nvbar2droptextcolor1); }

.contact .prestations p a {
	display:inline-block;
	text-decoration:underline;
	text-transform:lowercase;
	font-style:italic;
	font-size:12px;
	font-weight:600;
}

.contact .prestations p a:hover { color:var(--nvbar2droptextcolor1); }

.contact .prestations .dix_pourcent { font-size:23px; }

.contact .prestations .contact {
	background-color:var(--nvbar2dropbgcolor2);
	padding:20px 15px;
}


/*	-------------------	*/

@media (max-width:750px) {
	main .contact .content { flex-direction:column-reverse; }

	main .contact .content .left-side {
		display: flex;
		flex-direction: row;
		align-items: start;
		gap: 20px;
		width: 100%;
		margin-top: 40px;
	}

	main .contact .content .left-side::before { display:none; }

	main .contact .content .right-side {
		width:100%;
		margin-left:0;
	}
}

@media (max-width:390px) {
	main .contact .content .left-side { flex-direction: column; }
}