/* ----------------------------------------- */
/*     			Landing page     		     */
/* ----------------------------------------- */

.page-template-landing-page {
	--font-heading: "Onest", sans-serif;
	--font-body: "Inter", sans-serif;

	--color-primary: #cd2d43;
	--color-primary-dark: #9e2133;
	--color-secondary: #040c31;
	--color-white: #ffffff;

	font-family: var(--font-body);

	label {
		font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
		font-weight: 500;
	}

	& h1 {
		font-family: var(--font-heading);
		font-weight: 500;
		font-size: 56px;
	}

	.row {
		@media (max-width: 1024px) {
			margin: unset;
		}
	}

	& .site-footer {
		padding-top: 0;
	}

	/* ---------------- Header ---------------- */

	& .site-header {
		height: 95px;
		box-shadow: none;

		& a > img {
			max-width: inherit;
			image-rendering: auto;
		}

		& .contact-link {
			right: 40px;
			top: 0;
			bottom: 0;
		}

		& .contact {
			color: var(--color-secondary);
			letter-spacing: 1.3px;
			text-transform: uppercase;
			font-size: 13px;
			line-height: 1.1;

			transition: opacity 0.3s ease;

			&:hover {
				opacity: 0.75;
			}
		}
	}

	/* --------------- Left side --------------- */

	& .left-side {
		background: #faf6f0;

		& > div {
			max-width: 568px;
			display: flex;
			flex-direction: column;
			margin: 200px auto 0;

			& > p {
				font-size: 18px;
				line-height: 150%;
				margin-bottom: 0;
			}
		}

		& fieldset {
			margin-top: 60px;
		}

		& .map-selection {
			padding-top: 30px;
			text-align: center;
		}

		& legend {
			font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
			line-height: 125%;
			font-weight: 600;
			margin-bottom: 16px;
			font-family: var(--font-heading);
		}

		& .personal-data .form-field {
			display: inline-block;
			position: relative;
			width: calc(50% - 13px);
			height: 76px;
			margin: 0 10px 28px 0;
			vertical-align: top;

			& label {
				position: absolute;
				left: 0;
				top: calc(50% - 10px);
				margin: 0;
				font-weight: 500;
				font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
				color: var(--color-secondary);
				pointer-events: none;
				transform-origin: left center;
				transition:
					top 0.2s ease,
					left 0.2s ease,
					font-size 0.2s ease,
					font-weight 0.2s ease;
			}

			&:has(input:focus) label,
			&:has(input:not(:placeholder-shown)) label,
			&:has(input:-webkit-autofill) label {
				top: 0;
				font-size: 18px;
			}
		}

		& input[type="text"],
		& input[type="email"],
		& input[type="tel"] {
			-webkit-appearance: none;
			appearance: none;
			display: block;
			width: 100%;
			height: auto;

			margin: 0;
			padding: 29px 0 16px;
			border: none;
			border-bottom: 1px solid var(--color-secondary);
			border-radius: 0;
			background: transparent;
			box-shadow: none;
			outline: none;
			color: var(--color-secondary);
			font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
			font-weight: 400;
			line-height: 1.4;

			&:focus {
				outline: none;
				box-shadow: none;
				border-bottom-color: var(--color-secondary);
			}

			&::placeholder {
				color: transparent;
				opacity: 0;
			}

			&:-webkit-autofill,
			&:-webkit-autofill:hover,
			&:-webkit-autofill:focus {
				-webkit-text-fill-color: #434343;
				-webkit-box-shadow: 0 0 0 30px #faf6f0 inset;
			}
		}

		& .personal-data .iti {
			display: block;
			width: 100%;
			position: relative !important;

			& .iti__flag-container {
				left: 0;
			}

			& .iti__selected-flag {
				font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
				translate: 0 6px;
			}

			& .iti__selected-flag:hover {
				background-color: transparent;
			}
		}

		& input[type="tel"] {
			width: 100%;
		}
	}

	/* ---------------- Submit ---------------- */

	& .left-side form input[type="submit"],
	& .left-side form button[type="submit"],
	& #buttons-submit {
		width: fit-content;
		padding: 18px 36px;
		border: none;
		height: 63px;
		color: #fff;
		background: var(--color-primary);
		border-radius: 100vmax;
		font-family: var(--font-heading);
		font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
		font-weight: 500;
		margin: 60px auto 0 auto;
		display: block;
		transition:
			color 0.4s ease-in-out,
			background-color 0.4s ease-in-out;
	}

	& .left-side form button[type="submit"] {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	& #buttons-submit {
		margin-bottom: 10rem;
	}

	/* --------------- Selectric --------------- */

	& .left-side form {
		& .agency-field .form-field {
			display: block;
			position: relative;
			width: 100%;
			height: 76px;
			margin: 0;

			& label {
				position: absolute;
				left: 0;
				top: calc(50% - 10px);
				z-index: 1;
				margin: 0;
				font-weight: 500;
				font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
				color: var(--color-secondary);
				pointer-events: none;
				transform-origin: left center;
				transition:
					top 0.2s ease,
					font-size 0.2s ease,
					font-weight 0.2s ease;
			}

			&:has(.selectric-open) label,
			&:has(select:valid) label {
				top: 0;
				font-size: 16px;
				font-weight: 700;
			}
		}

		& .selectric-wrapper {
			width: 100%;
			overflow: visible;
		}

		& .selectric {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			width: 100%;
			height: 76px;
			padding: 0;
			overflow: visible;
			border: none !important;
			border-bottom: 1px solid var(--color-secondary) !important;
			border-radius: 0;
			background: transparent;
			color: var(--color-secondary);
			font-style: normal;

			& .label {
				display: block;
				height: auto;
				margin: 0;
				padding: 29px 36px 16px 0;
				font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
				line-height: 1.4;
				color: var(--color-secondary);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			& .button {
				display: block;
				position: absolute;
				top: 29px;
				right: 0;
				bottom: 16px;
				width: 24px;
				height: auto;
				background: transparent;
				line-height: 0;

				&:after {
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					width: 20px;
					height: 12px;
					margin: 0;
					border: none;
					background-color: var(--color-secondary);
					mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' fill='none' viewBox='0 0 20 12'%3E%3Cpath fill='%23040c31' d='M.44.44a1.5 1.5 0 0 1 2.12 0l7.425 7.424L17.41.439a1.5 1.5 0 1 1 2.121 2.122L11.4 10.692a2 2 0 0 1-2.829 0L.44 2.561a1.5 1.5 0 0 1 0-2.122'/%3E%3C/svg%3E")
						center / contain no-repeat;
					-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' fill='none' viewBox='0 0 20 12'%3E%3Cpath fill='%23040c31' d='M.44.44a1.5 1.5 0 0 1 2.12 0l7.425 7.424L17.41.439a1.5 1.5 0 1 1 2.121 2.122L11.4 10.692a2 2 0 0 1-2.829 0L.44 2.561a1.5 1.5 0 0 1 0-2.122'/%3E%3C/svg%3E")
						center / contain no-repeat;
					transform: translate(-50%, -50%);
					transition: transform 0.2s ease;
				}
			}
		}

		& .selectric-open {
			z-index: 20;

			& .selectric .button:after {
				transform: translate(-50%, -50%) rotate(180deg);
			}

			&.selectric-below .selectric,
			&.selectric-above .selectric {
				border-radius: 0;
			}

			&.selectric-below .selectric-items,
			&.selectric-above .selectric-items {
				border-radius: 20px;
			}
		}

		& .selectric-items {
			top: calc(100% + 8px);
			width: max-content !important;
			z-index: 2;
			background: #e6e8ee;
			border: none;
			border-radius: 20px;
			box-shadow: none;
			overflow: hidden;

			& .selectric-scroll {
				max-height: 320px;
			}

			& li {
				position: relative;
				padding: 8px 40px;
				font-size: 18px;
				line-height: 1.4;
				color: var(--color-secondary);
				background: transparent;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;

				&:first-child {
					display: none;
				}

				&.selected {
					padding-left: 44px;
					background: transparent;
					color: var(--color-secondary);

					&:before {
						content: "";
						position: absolute;
						top: 50%;
						left: 20px;
						width: 14px;
						height: 14px;
						transform: translateY(-50%);
						background-color: var(--color-secondary);
						mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
						-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
					}
				}

				&.highlighted,
				&:hover {
					background: rgba(4, 12, 49, 0.06);
					color: var(--color-secondary) !important;
				}
			}
		}

		& .selectric-above .selectric-items {
			top: auto;
			bottom: calc(100% + 8px);
		}
	}

	/* ------------- Property types ------------- */

	& .left-side {
		& li[data-criteria] {
			display: flex;
			flex-direction: column-reverse;
			cursor: pointer;

			& span {
				display: flex;
				justify-content: center;
				font-size: 18px;
			}

			& span.image {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 72px;
				width: 72px;
				border-radius: 50%;
				margin: auto;
				transition: background 0.3s ease-in-out;

				& svg {
					transition: filter 0.3s ease-in-out;
					width: 40px;
					height: 40px;
					object-fit: contain;
				}
			}

			&:hover span.image {
				background-color: #e2e7ec;
				color: #040c31;
			}

			&.active span.image {
				background: var(--color-primary);
				color: #faf6f0;
			}

			&:hover span.image img,
			&.active span.image img {
				filter: brightness(0) invert(1);
			}
		}

		& a.all {
			display: none;
			text-align: center;
			color: var(--color-secondary);
			text-decoration: underline;
			margin: 2rem;
		}
	}

	/* --------------- Right side --------------- */

	& .right-side {
		background: #faf6f0;
		height: 100vh;
		top: 0;
		background: var(--bkg) no-repeat center/cover;

		& p {
			display: none;
		}

		& a.all {
			color: var(--color-secondary);
			font-family: var(--font-heading);
			background: #fff;
			height: 63px;
			text-align: center;
			font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
			font-weight: 500;
			border-radius: 100vmax;
			position: absolute;
			right: 40px;
			bottom: 30px;
			display: flex;
			align-items: center;
			padding: 0 45px;
			transition:
				color 0.4s ease-in-out,
				background 0.4s ease-in-out;

			&:hover {
				background-color: rgba(255, 255, 255, 0.75);
			}
		}
	}

	/* -------------- Range slider -------------- */

	& .range-slider {
		width: 100%;
		margin-top: 28px;
		--progress-shadow: none;
		--progress-flll-shadow: none;
		--primary-color: var(--color-primary);
		--value-offset-y: var(--ticks-gap);
		--value-active-color: white;
		--value-background: transparent;
		--value-background-hover: var(--color-primary);
		--value-font: 700 12px/1 Arial;
		--fill-color: var(--color-primary);
		--progress-background: #fff;
		--progress-radius: 20px;
		--track-height: calc(var(--thumb-size) / 2);
		--min-max-font: 12px Arial;
		--min-max-opacity: 0.5;
		--min-max-x-offset: 10%;
		--thumb-size: 16px;
		--thumb-color: white;
		--thumb-shadow: 0 0 0 13px var(--color-primary) inset;
		--thumb-shadow-hover: 0 0 0 13px var(--color-primary) inset;
		--thumb-shadow-active: 0 0 0 13px var(--color-primary) inset;
		--ticks-thickness: 1px;
		--ticks-height: 5px;
		--ticks-gap: var(--ticks-height, 0);
		--ticks-color: silver;
		--step: 1;
		--ticks-count: Calc(var(--max) - var(--min)) / var(--step);
		--maxTicksAllowed: 30;
		--too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
		--x-step: Max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min)));
		--tickInterval: 100/((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
		--tickIntervalPerc: calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1));
		--value-a: Clamp(var(--min), var(--value, 0), var(--max));
		--value-b: var(--value, 0);
		--text-value-a: var(--text-value, "");
		--completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);
		--completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);
		--ca: Min(var(--completed-a), var(--completed-b));
		--cb: Max(var(--completed-a), var(--completed-b));
		--thumbs-too-close: Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);
		--thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0));
		--thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));
		display: inline-block;
		height: max(var(--track-height), var(--thumb-size));
		background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
		background-size: var(--tickIntervalPerc) var(--ticks-height);
		background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2);
		background-position-y: var(--flip-y, bottom);
		padding-bottom: var(--flip-y, var(--ticks-gap));
		padding-top: calc(var(--flip-y) * var(--ticks-gap));
		position: relative;
		z-index: 1;

		&[data-ticks-position="top"] {
			--flip-y: 1;
		}

		/* Bornes min / max affichées sous le slider */
		&::before,
		&::after {
			--offset: calc(var(--thumb-size) / 2);
			content: var(--prefix) counter(x);
			display: var(--show-min-max, block);
			font: var(--min-max-font);
			position: absolute;
			bottom: var(--flip-y, -2.5ch);
			top: calc(-2.5ch * var(--flip-y));
			opacity: clamp(0, var(--at-edge), var(--min-max-opacity));
			transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
			pointer-events: none;
			color: #434343;
		}

		&::before {
			--before: 1;
			--at-edge: var(--thumb-close-to-min);
			counter-reset: x var(--min);
			left: var(--offset);
		}

		&::after {
			--at-edge: var(--thumb-close-to-max);
			counter-reset: x var(--max);
			right: var(--offset);
			content: var(--prefix) var(--text-value-max);
		}

		& > input {
			-webkit-appearance: none;
			appearance: none;
			width: 100%;
			height: var(--thumb-size);
			margin: 0;
			position: absolute;
			left: 0;
			top: calc(50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1)));
			cursor: -webkit-grab;
			cursor: grab;
			outline: none;
			background: none;

			&:not(:only-of-type) {
				pointer-events: none;
			}

			&::-webkit-slider-thumb {
				-webkit-appearance: none;
				appearance: none;
				height: var(--thumb-size);
				width: var(--thumb-size);
				transform: var(--thumb-transform);
				border-radius: var(--thumb-radius, 50%);
				background: var(--thumb-color);
				box-shadow: var(--thumb-shadow);
				border: none;
				pointer-events: auto;
				-webkit-transition: 0.1s;
				transition: 0.1s;
				margin-top: 4px;
			}

			&::-moz-range-thumb {
				-moz-appearance: none;
				appearance: none;
				height: var(--thumb-size);
				width: var(--thumb-size);
				transform: var(--thumb-transform);
				border-radius: var(--thumb-radius, 50%);
				background: var(--thumb-color);
				box-shadow: var(--thumb-shadow);
				border: none;
				pointer-events: auto;
				-moz-transition: 0.1s;
				transition: 0.1s;
			}

			&::-ms-thumb {
				appearance: none;
				height: var(--thumb-size);
				width: var(--thumb-size);
				transform: var(--thumb-transform);
				border-radius: var(--thumb-radius, 50%);
				background: var(--thumb-color);
				box-shadow: var(--thumb-shadow);
				border: none;
				pointer-events: auto;
				-ms-transition: 0.1s;
				transition: 0.1s;
			}

			&:hover {
				--thumb-shadow: var(--thumb-shadow-hover);
			}

			& + output {
				width: 105px;
				text-align: center;
			}

			&:hover + output {
				--value-background: var(--value-background-hover);
				--y-offset: -5px;
				color: var(--value-active-color);
				/* box-shadow: 0 0 0 3px var(--value-background); */
			}

			&:active {
				--thumb-shadow: var(--thumb-shadow-active);
				cursor: -webkit-grabbing;
				cursor: grabbing;
				z-index: 2;
			}

			&:active + output {
				transition: 0s;
			}

			&:nth-of-type(1) {
				--is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);

				& + output {
					--value: var(--value-a);
					--x-offset: calc(var(--completed-a) * -1%);

					&::after {
						content: var(--prefix, "") var(--text-value-a) var(--suffix, "");
					}
				}
			}

			&:nth-of-type(2) {
				--is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1);

				& + output {
					--value: var(--value-b);
					top: 50px;
				}
			}

			&:only-of-type ~ .range-slider__progress {
				--clip-start: 0;
			}

			& + output {
				--flip: -1;
				--x-offset: calc(var(--completed-b) * -1%);
				--pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);
				pointer-events: none;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				width: max-content;
				z-index: 5;
				background: var(--value-background);
				border-radius: 10px;
				padding: 2px 4px;
				left: var(--pos);
				transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));
				transition:
					all 0.12s ease-out,
					left 0s;

				&::after {
					content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
					font: var(--value-font);
					font-size: 14px;
					display: block;
					width: fit-content;
				}
			}
		}
	}

	& .range-slider__progress {
		--start-end: calc(var(--thumb-size) / 2);
		--clip-end: calc(100% - (var(--cb)) * 1%);
		--clip-start: calc(var(--ca) * 1%);
		--clip: inset(-20px var(--clip-end) -20px var(--clip-start));
		position: absolute;
		left: var(--start-end);
		right: var(--start-end);
		top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2);
		height: calc(var(--track-height));
		background: var(--progress-background, #eee);
		pointer-events: none;
		z-index: -1;
		border-radius: var(--progress-radius);

		&::before {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			-webkit-clip-path: var(--clip);
			clip-path: var(--clip);
			top: 0;
			bottom: 0;
			background: var(--fill-color, black);
			box-shadow: var(--progress-flll-shadow);
			z-index: 1;
			border-radius: inherit;
		}

		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			box-shadow: var(--progress-shadow);
			pointer-events: none;
			border-radius: inherit;
		}
	}

	& .range-slider-mobile {
		display: none;
	}

	/* -------------- New projects -------------- */

	/* & .new-projects {
		& > div {
			position: relative;
		}

		& input[type="checkbox"] {
			visibility: hidden;
			position: absolute;
		}

		& label {
			font-size: 16px;
			font-weight: 600;
			line-height: 125%;
			letter-spacing: 1px;
			position: relative;
			cursor: pointer;
			padding-left: 40px;
			margin-bottom: 0;

			&:before {
				content: "";
				height: 20px;
				left: 7px;
				position: absolute;
				top: 0px;
				width: 20px;
				background: #fff;
				border-radius: 50%;
			}
		}

		& input[type="checkbox"]:checked + label:before {
			background-color: var(--color-primary);
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='14px' height='10px' viewBox='0 0 14 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 59.1 (86144) - https://sketch.com --%3E%3Ctitle%3Echeck%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='ios_modification' transform='translate(-27.000000, -191.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Group-Copy' transform='translate(0.000000, 164.000000)'%3E%3Cg id='ic-check-18px' transform='translate(25.000000, 23.000000)'%3E%3Cpolygon id='check' points='6.61 11.89 3.5 8.78 2.44 9.84 6.61 14 15.56 5.05 14.5 4'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
			background-size: 14px 10px;
			background-repeat: no-repeat;
			background-position: center;
		}
	} */

	/* ------------- Map selection ------------- */

	& .map-selection span {
		display: inline-flex;
		gap: 18px;
		align-items: center;
		justify-content: center;

		padding: 18px 36px;
		width: auto;
		height: 63px;

		color: #fff;
		font-family: var(--font-heading);
		font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
		font-weight: 500;

		background: var(--color-secondary);

		cursor: pointer;
		border-radius: 100vmax;
		transition:
			color 0.4s ease-in-out,
			background-color 0.4s ease-in-out;

		&:before {
			content: "";
			block-size: 27px;
			aspect-ratio: 1;

			background-color: var(--color-white);

			mask-image: url(../images/svg/pin.svg);
			mask-size: 100%;
			mask-repeat: no-repeat;
			mask-position: center;
			mask-composite: exclude;

			transition: background-color 0.4s ease-in-out;
		}

		&:hover {
			background: #434965;
		}
	}

	/* ------------ Submit : états ------------ */

	& #buttons-submit:hover,
	& .left-side form input[type="submit"]:hover,
	& .left-side form button[type="submit"]:hover {
		background: var(--color-primary-dark);
	}

	& .left-side form button[type="submit"][disabled] {
		background: grey;
		color: #fff;

		&:after {
			content: "";
			width: 20px;
			height: 20px;
			background: transparent url(../images/svg/spinner.svg) no-repeat center/cover;
			margin-left: 10px;
		}
	}

	/* --------------- Conditions --------------- */

	& .conditions {
		& div {
			position: relative;
		}

		& label {
			position: relative;
			padding-left: 30px;
			cursor: pointer;

			a {
				color: var(--color-primary);
			}

			&:before {
				content: "";
				height: 16px;
				left: 7px;
				position: absolute;
				top: 4px;
				width: 16px;
				background: transparent;
				border-radius: 50%;
				border: 1px solid var(--color-secondary);
			}
		}
	}

	/* ---------------- Critères ---------------- */

	& .criterias {
		& > fieldset {
			display: none;

			&.shown {
				display: block;
			}

			& > div {
				position: relative;

				& > span {
					background-color: #fff;
					height: 70px;
					position: absolute;
					left: 0;
					top: 0;
					width: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom-left-radius: 35px;
					border-top-left-radius: 35px;
					color: #434343;
					font-family: var(--font-heading);
					font-size: 30px;
					font-weight: 600;
					cursor: pointer;

					&.plus {
						left: inherit;
						right: 0;
						border-radius: 0;
						border-bottom-right-radius: 35px;
						border-top-right-radius: 35px;
					}
				}
			}
		}

		& input[type="number"] {
			-moz-appearance: textfield;
			appearance: textfield;
			width: calc(100% - 60px);
			height: 70px;
			display: block;
			padding: 0;
			margin: 0 auto;
			text-align: center;
			border: 0;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}

		& input:focus {
			outline: 0;
		}
	}

	& .comment-field .form-field {
		position: relative;
		width: 100%;

		& label {
			position: absolute;
			left: 0;
			top: 29px;
			z-index: 1;
			margin: 0;
			font-weight: 500;
			font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
			color: var(--color-secondary);
			pointer-events: none;
			transform-origin: left center;
			transition:
				top 0.2s ease,
				font-size 0.2s ease,
				font-weight 0.2s ease;
		}

		&:has(textarea:focus) label,
		&:has(textarea:not(:placeholder-shown)) label {
			top: 0;
			font-size: 18px;
		}
	}

	& textarea {
		-webkit-appearance: none;
		appearance: none;
		display: block;
		width: 100%;
		height: 140px;
		margin: 0;
		padding: 29px 0 16px;
		border: none;
		border-bottom: 1px solid var(--color-secondary);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		outline: none;
		color: var(--color-secondary);
		font-size: clamp(1.8rem, 1.7515rem + 0.2071vw, 2rem);
		font-weight: 400;
		line-height: 1.4;
		resize: none;

		&:focus {
			outline: none;
			box-shadow: none;
			border-bottom-color: var(--color-secondary);
		}

		&::placeholder {
			color: transparent;
			opacity: 0;
		}
	}

	/* ------------- Popin / carte ------------- */

	& .popin {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 120;
		background-color: rgba(0, 0, 0, 0.85);
		top: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
		transition:
			visibility 0.1s ease-in-out,
			opacity 0.4s ease-in-out;

		&.shown {
			visibility: visible;
			opacity: 1;
		}

		& .map-container {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}

		& .map {
			width: 90%;
			height: 90%;
		}

		& .close {
			background: transparent url(../images/svg/close.svg) no-repeat center/cover;
			cursor: pointer;
			width: 30px;
			height: 30px;
			position: absolute;
			top: 20px;
			right: 20px;
			opacity: 1 !important;
		}

		& .validate {
			right: 6%;
			bottom: 6%;
			color: var(--color-white);
			background: var(--color-secondary);
			height: 52px;
			text-align: center;
			font-size: 16px;
			font-weight: 600;
			line-height: 125%;
			letter-spacing: 1px;
			border-radius: 26px;
			position: absolute;
			display: flex;
			align-items: center;
			padding: 0 45px;
			transition:
				color 0.4s ease-in-out,
				background 0.4s ease-in-out;
			cursor: pointer;

			&:hover {
				background: #434965;
			}
		}
	}

	/* ---------- Landing page boutons ---------- */

	& input.button {
		display: none;
	}

	& label.button {
		text-align: center;
		cursor: pointer;
		background: #fff;
		border-radius: 35px;
		font-size: 18px;
		line-height: 150%;
		padding: 20px 30px;
		transition:
			background 0.4s ease-in-out,
			color 0.4s ease-in-out;
	}

	& input.button:checked + label.button,
	& label.button:hover8694k7avx {
		background: var(--color-secondary);
		color: #fff;
	}

	& .form_response {
		margin-top: 1rem;
		margin-bottom: 9rem !important;

		&.error {
			text-align: center;
		}
	}

	/* ---------------- Responsive ---------------- */

	@media (max-width: 1024px) {
		& h1 {
			display: none;
		}

		& main > .row {
			flex-direction: column-reverse;
		}

		& .site-header {
			margin-top: 0;

			& .contact span {
				display: none;
			}

			& .contact:after {
				content: "";
				background: transparent url(../images/svg/contact.svg) no-repeat center/cover;
				width: 27px;
				height: 22px;
				display: block;
			}
		}

		& .left-side {
			padding: unset;

			& > div {
				margin-top: 80px;
				width: calc(100% - 40px);
				max-width: unset;
			}
		}

		& .right-side {
			height: 75vw;
			flex-basis: auto;
			position: relative !important;

			&:after {
				content: "";
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.2);
				position: absolute;
				top: 0;
				left: 0;
			}

			& a.all {
				right: 0;
				left: 0;
				margin: auto;
				max-width: fit-content;
				bottom: -26px;
				z-index: 1;
			}

			& p {
				display: flex;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;
				color: #fff;
				text-align: center;
				position: relative;
				z-index: 1;
				line-height: 35px;

				& strong {
					position: relative;
					width: 90%;

					&:after {
						content: "";
						width: 24px;
						height: 24px;
						background: transparent url(../images/svg/arrow-down.svg) no-repeat center/cover;
						position: absolute;
						bottom: -50px;
						left: 0;
						right: 0;
						margin: auto;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		& .site-header {
			height: 75px;

			& .pipe {
				height: 42px;
			}

			& .naef-prestige-logo {
				margin-left: 40px;
			}
		}

		& .naef-logo img {
			width: 74px;
		}

		& .naef-prestige-logo img {
			width: 117px;
		}

		& .range-slider > input + output {
			display: none;
		}

		& .range-slider-mobile {
			display: block;
		}
	}

	@media (max-width: 575px) {
		& .site-header {
			& .contact-link {
				right: 15px;
			}

			& .header_logos {
				margin-left: 15px !important;
			}

			& .primary-header > div {
				justify-content: start !important;
			}
		}

		& .left-side {
			padding-right: 0;

			& a.all {
				display: block;
			}

			& .personal-data .form-field {
				width: 100%;
				margin-right: 0;
			}
		}

		& .right-side {
			height: 59vh;

			& a.all {
				display: none;
			}
		}

		& .map-selection span:before {
			background-size: contain;
			width: 22px;
		}

		& .property-types {
			display: grid !important;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
		}

		& div.buttons {
			flex-direction: column;
		}

		& label.button {
			margin-bottom: 2rem;
		}
	}

	.civility {
		display: flex;
		gap: 3rem;
		margin-block: 1rem;
	}

	input[type="checkbox"] + label {
		--_radius: 1rem;
	}

	input[type="radio"] + label {
		--_radius: 100vmax;
	}

	input:is([type="checkbox"], [type="radio"]) {
		opacity: 0;
		visibility: hidden;
		display: none;

		*:has(&) {
			position: relative;
		}

		& + label {
			display: inline-block;
			padding-inline-start: calc(27px + 1rem);

			font-size: 18px;
			font-weight: 500;

			cursor: pointer;
			user-select: none;
			touch-action: manipulation;
			-webkit-tap-highlight-color: transparent;

			&::before {
				content: "";

				position: absolute;
				left: 0;
				top: 2px;
				width: 27px;
				height: 27px;

				background-color: transparent;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px 7px;
				border: 1px solid #c5cfda;
				border-radius: var(--_radius, 50%);

				transition:
					background-color 0.4s ease-in-out,
					border-color 0.4s ease-in-out,
					background-image 0.4s ease-in-out;
			}

			&:hover {
				&::before {
					border-color: #7a8899;
				}
			}
		}

		&:checked + label {
			&::before {
				background-color: #e2e7ec;
				border-color: transparent;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='7' fill='none' viewBox='0 0 15 7'%3E%3Cpath fill='%23040c31' d='M14.386.648 6.123 6.433l-.01.008-.08.055c-.312.208-.688.33-1.093.33-.404 0-.778-.12-1.09-.329l-.084-.058-.008-.006L0 3.651l.453-.648 2.512 1.91 1.254.878h.001q.039.03.078.056l.003.001a1.18 1.18 0 0 0 1.279 0q.042-.026.08-.056l.004-.002 1.252-.877L13.932 0z'/%3E%3C/svg%3E");
			}
		}
	}
}

.new-baseline {
	font-size: 16px;
	font-weight: 500;
	font-family: var(--font-heading);
	color: #040c31;
}