#formulaire::-webkit-scrollbar { width: 0; } 

#formulaire {
	width: var(--form); height: 99.9vh;
	overflow-y: auto;
	background-color: white;
	box-shadow: 0px 0px 23px hsl(0deg 0% 0% / 33%);
	position: fixed; top: 0; right: 0; z-index: 1000;
	color: black;
}
#formulaire form { padding: var(--padd) var(--padd2d); }

::placeholder { color: black; }
#formulaire .placeholder {
	margin-bottom: 5px;
	font-weight: bold;
	text-align: center;
}
#formulaire .title {
	background-color: var(--secondary); color: white;
	text-align: center;
	padding: var(--padd) var(--padd2d);
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
}
#formulaire .title .logo { width: 10vw; }
#formulaire .title h2 { margin-bottom: var(--padd2d); color: white; }
#picto_phone, #picto_phone path { fill: white; stroke: white; }
#formulaire .mab_radio { margin: var(--padd4d) 0 var(--padd2d); }
#formulaire .mab_radio__control {
	border-color: var(--secondary);
	border-radius: 0;
}
#formulaire .mab_radio input:checked+.mab_radio__control {
	background-color: var(--secondary);
}
#formulaire .btn {
	width: 100%; height: max(55px, 3vw);
	color: white; font-weight: bold;
	background: linear-gradient(to right, var(--primary), var(--secondary));
	margin: 0 auto;
	display: flex;
	cursor: pointer;
	border-radius: 5px;
}
#formulaire input, #formulaire select {
	margin-bottom: var(--padd4d);
	background-color: white;
	border: 1px solid var(--secondary); color: black; border-radius: 5px;
	width: 100%; height: 2vw;
	padding: 0 max(0.5vw, 15px);
	font-size: 75%;
	font-family: "klavika-web", sans-serif;
}
[name="commentaire"] { margin-bottom: var(--padd); }
#formulaire [aria-labelledby="typologie"] { margin-bottom: 0; width: 100%; height: 100%; }
#formulaire .mab_checkbox {
	height: 2.4vw;
	border-radius: 5px; 
	margin: 0;
}
#formulaire .mab_checkbox label, #projet .mab_radio label { border-color: var(--secondary); color: black; font-weight: normal; }
#formulaire .mab_checkbox input:checked+label { background-color: var(--secondary); color: white; }
#container_input {
	display: grid; grid-template-columns: 1fr 1fr;
	column-gap: 0.7vw;
}
#container_typo {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: var(--padd4d);
	font-size: 75%; 
	font-weight: bold;
	gap: 0.7vw; 
	margin: 1vw 0;
}

#mab_completion__list.active {
	transform: translateY(15px);
	border: 1px solid var(--secondary);
	min-width: 200px;
}
#formulaire svg { transform: translateY(15%); width: max(1.5vw, 20px); height: max(1.5vw, 20px) }
#confirmation {
	padding: var(--padd);
	text-align: center;
}

.form-group { margin-top: 15px; text-align:center; }
.form-group .form-control { color:#5D0030; border:solid 1px #5D0030; height:40px; }
.form-group .form-control::placeholder { color:#5D0030; }
.form-group .control {
	display: flex;
	justify-content: center;
	gap: 0.7vw;
}

.form-group#civilite .control,
.form-group#projet .control { text-align:center;}
.form-group#optin1 label { font-size:12px; font-weight:normal; line-height:1.1em; }
.mentions { text-align:start; color:#5D0030; margin-bottom:20px; }
.btn-send { display:block; height:50px; line-height:50px; width:250px; text-align:center; font-size:14px; font-weight:bold; color:#fff; background:linear-gradient(to right, #5A002E, #9B1935); text-decoration:none; border-radius:25px; margin:auto; text-transform:uppercase; border:none; }

#documentation a { text-decoration:underline; color:#5D0030; }
.form-group.error .form-control { border:solid 1px #ff0000 !important; }
.form-group.error .checkbox-inline, .form-group.error .checkbox-inline label { color:#ff0000 !important; }

#documentation .form-group.projet .control-label { display:block; color:#000; text-align:center; font-weight:bold; }
ul.projet { list-style-type:none; margin:0; padding:0; display: flex; justify-content: center; gap: 1vw}
ul.projet > li { margin-bottom: var(--padd4d); border: solid 1px var(--secondary); border-radius: 5px; }
ul.projet > li [type="radio"] { display:none; }
ul.projet > li [type="radio"] + label { height:2vw; line-height:0.5vw; text-align: center ; color:#000000; font-size: 75%; border-radius:5px; user-select:none; }
ul.projet > li [type="radio"]:checked + label { background:#a40356; color:white;  }

#formulaire ul#projet li input,  {
	margin-bottom: var(--padd4d);
    background-color: white;
    border: 1px solid var(--secondary);
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 2vw;
    padding: 0 max(0.5vw, 15px);
    font-size: 75%;
    font-family: "klavika-web", sans-serif;
}

.placeholder {
	text-align: center;
}

#formulaire #projet .mab_radio {
	border-radius: 5px;
	font-size: 75%;
	text-align: center;
	display: block;
}

@media (max-width: 768px) {
	#formulaire #projet .mab_radio {font-size: 90%;}
	#container_input {column-gap: 3vw;}
	#container_typo { font-size: 85%; margin-top: 5vw;}
	.form-group .control {
		gap: 3vw;
	}
}

#projet .mab_radio label {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid var(--secondary);
    border-radius: inherit;
    transition: all 0.3s ease;
    padding: 5px max(0.5vw, 10px);
    line-height: 1vw;
}

#formulaire #projet .mab_radio input:checked+label {
    background-color: var(--secondary);
    color: white;
    width: 100%;
    height: 100%;
}

.mab_radio input {
	right: 0;
}

.text-required {
	margin: 1vw 0 1.5vw 0;
}

.disabled {
	background: #8080806e;
    color: grey;
    border-color: #808080b5;
}

/* Style CSS pour le modal du form	*/

#avertissement-location { padding-top: 20px; }
#avertissement-location p { text-align:center; margin-top:30px; margin-bottom:8px; line-height: 1.3rem; color: #5D0030}
#avertissement-location .btn-send { width:auto; }
.btn-send2 { 
	height:50px; 
	line-height:22px; 
	padding:15px 30px; 
	border-radius:5px; 
	text-transform:uppercase; 
	font-size:15px;
	display: block;
    width: 25%;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to right, #5A002E, #9B1935);
    text-decoration: none;
    margin: auto;
    border: none;
    cursor: pointer;
}
.mab_modal__wrapper #offre-speciale { text-transform: uppercase; display:block; height:50px; line-height:50px; background:linear-gradient(to right, #5A002E, #9B1935); color:#fff; text-align:center; font-size:15px; vertical-align:middle; }

.mab_modal__wrapper {
	padding: 0 0 42px !important;
	width: 50vw !important;
	border-radius: 8px;
}

.mab_modal__close {
	display: none;
}

@media (max-width: 768px) {
	#avertissement-location p { padding: 0 15px; }
	.btn-send2 { width: 90%; }
}

@media (max-width: 1024px) {
	.mab_modal__wrapper {
		width: 100% !important;
	}
}

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

@media (max-width: 1024px) {
	

	#formulaire {
		position: fixed; top: 0; left: 0; right: 0; bottom: 0;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}
	#formulaire.active { transform: translateX(0); }
	#formulaire button.btn { margin-bottom: var(--padd); margin-top: 5vw}
	#formulaire .mab_checkbox { width: 15vw; height: 12.5vw; }
	#formulaire input, #formulaire select { font-size: 90%; margin-bottom: var(--padd2d); height: 40px; }
	#mab_completion__list.active { transform: translateY(20px); }
	#formulaire .btn { background-color: var(--secondary); }
	#formulaire .title > div:first-child { display: none; }
	#formulaire .title .logo { width: 50vw; margin-top: var(--padd); }
	#formulaire .close { position: absolute; top: var(--padd2d); right: var(--padd2d); }

	.form-group#projet .control {
		margin: 4vw 0 4vw 0;
	}

	#projet .mab_radio label {
		line-height: 5vw;
	}

	.text-required {
		margin: 5vw 0 6vw 0;
	}

	.mab_modal__wrapper #offre-speciale { 
		padding: 2.5vw 1vw 0 1vw;
		line-height: 4vw;  
		font-size: 13px;
	}
}