/** FORMULAIRE MULTI ETAPES **/

:is(.page-id-2269, .page-id-2265, .page-id-2267) .gform_wrapper :is(h2, h3, h4, h5, h6) {
	margin: 15px 0 !important;
	font-weight: 500 !important;
}

:is(.page-id-2269) .gform_page_footer {
	display: flex;
}

.gform_wrapper [type=radio] {
	accent-color: #012D46;
}

.progressive-sentence {
	padding: 16px;
	border-radius: 16px;
	background: #F3F3F3;
	color: #747474;
}

.progressive-sentence span {
	font-weight: bold;
	text-transform: lowercase;
}

.gf_progressbar_wrapper {
	display: none !important;
}

.gform_page_fields .gfield:first-child .wide-radio__container {
	margin-top: 30px;
	margin-bottom: 5px;
}

.gform_page_fields .gfield:last-child .wide-radio__container {
	margin-bottom: 30px;
	margin-top: 5px;
}

.wide-radio__container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 25px;
}

.wide-radio__choice {
	flex: 1 1 calc(50% - 25px);
	max-width: 50%;
	border-radius: 24px;
	background: #FEFEFE;
	box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.18);
	padding: 40px;
	cursor: pointer
}

@media screen and (max-width: 767px) {
	.wide-radio__choice {
		max-width: 100%;
		flex: 1 1 100%;
	}
}

.wide-radio__choice--selected {
	background-color: #FFD46F;
}

:is(.page-id-2267) .wide-radio__choice--selected {
	background-color: rgba(117, 184, 255, 0.6);
}

.wide-radio__choice p {
	margin: 0;
	text-align: left;
	font-size: 22px;
}

.gform_next_button,
:is(.page-id-2269, .page-id-2265) .gform_wrapper [type=submit] {
	border-radius: 32px !important;
	background: #FAB30C !important;
	padding: 8px 30px !important;
	color: #012D46 !important;
	margin-left: auto !important;
	box-shadow: 0px 2px 16px 0px rgba(1, 45, 70, 0.16) !important;
}

.gform_previous_button {
	padding: 8px 30px !important;
	border: 2px solid #FAB30C !important;
	box-shadow: 0px 2px 16px 0px rgba(1, 45, 70, 0.16) !important;
	color: #FAB30C !important;
	border-radius: 32px !important;
	background-color: transparent !important;
}

:is(.page-id-2267) .gform_next_button,
:is(.page-id-2267) .gform_wrapper [type=submit] {
	border-radius: 32px !important;
	background: #75B8FF !important;
	padding: 8px 30px !important;
	color: #FEFEFE !important;
	margin-left: auto !important;
	box-shadow: 0px 2px 16px 0px rgba(1, 45, 70, 0.16) !important;
}

:is(.page-id-2267) .gform_previous_button {
	padding: 8px 30px !important;
	border: 2px solid #75B8FF !important;
	box-shadow: 0px 2px 16px 0px rgba(1, 45, 70, 0.16) !important;
	color: #75B8FF !important;
	border-radius: 32px !important;
	background-color: transparent !important;
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	padding: 0 !important;
	background-color: transparent !important;
	border: none !important;
}

.gform_wrapper.gravity-theme .gform_validation_errors {
	border-radius: 24px !important;
	padding: 20px 30px !important;
}

#gform_8 .gchoice {
	border: none;
	padding: 0;
}

#gform_8 .gfield_radio {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}

#gform_8 h4 {
	text-align: center;
	font-weight: 500;
}

#gform_fields_8 .h4Reg {
	text-align: center;
}

.choice-with-image .wide-radio__choice {
	display: flex;
	gap: 40px;
	align-items: center;
}

.choice-with-image .wide-radio__choice::before {
	content: "";
	display: block;
	width: 50%;
	height: 120px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.choice-with-image .wide-radio__choice p {
	width: 50%;
}

.choice-with-image .wide-radio__choice:nth-child(1)::before {
	background-image: url('/wp-content/uploads/2024/09/abri.png');
}

.choice-with-image .wide-radio__choice:nth-child(2)::before {
	background-image: url('/wp-content/uploads/2024/09/toiture-batiment.png');
}

.choice-with-image .wide-radio__choice:nth-child(3)::before {
	background-image: url('/wp-content/uploads/2024/09/toiture-location.png');
}

.orientation .wide-radio__choice {
	flex: unset;
	width: fit-content;
}

@media screen and (max-width: 991px) {
	.wide-radio__choice {
		padding: 25px;
	}

	.wide-radio__choice p {
		font-size: 18px;
	}
}

@media screen and (max-width: 850px) {
	.choice-with-image .wide-radio__choice {
		flex-direction: column;
		gap: 20px;
	}

	.choice-with-image .wide-radio__choice p,
	.choice-with-image .wide-radio__choice::before {
		width: 100%;
	}

}