:root {
	--primary: #1f5993;
	--primary-light: #4b86c2;
	--secondary: #f98c10;
	--secondary-4: #f98c1069;
	--secondary-2: #f98c103a;
	--secondary-light: #faa938;
	--consolas: "Fira Mono", "Consolas", monospace;
	--txt: #202c3c;
	--disabled: #627084;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	color: rgb(225, 225, 215);
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	outline: none;
	word-wrap: break-word;
	> a {
		display: flex;
		padding: 0.5rem;
		white-space: nowrap;
	}
	> i {
		display: flex;
		place-content: center;
		place-items: center;
	}
}

.htmx-indicator {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.htmx-request .htmx-indicator {
	opacity: 1;
}

html {
	color-scheme: light;
	font-family:
		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol", "Noto Color Emoji";
	scroll-behavior: smooth;
}

body {
	height: 100%;
	width: 100%;
	overflow: auto !important;
	overflow-x: hidden !important;
	background: none !important;
}

.cookie-banner {
	position: fixed;
	inset-inline: 1rem;
	bottom: 1rem;
	z-index: 50;
	max-width: 32rem;
	margin-inline: auto;
	background: #0b1b35;
	color: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
	padding: 1.5rem 1.75rem;
	font-size: 0.95rem;
	line-height: 1.5;
	border: 1px solid #ffffff1a;
	display: none;
	&.hidden {
		display: none;
	}
	.cookie-banner__content {
		h2 {
			font-size: 1.1rem;
			margin-bottom: 0.75rem;
			letter-spacing: -0.02em;
		}
		p {
			margin-bottom: 1rem;
			color: #ffffffb3;
		}
	}
	.cookie-banner__buttons {
		display: flex;
		gap: 0.75rem;
		margin-bottom: 0.75rem;
		button {
			flex: 1;
			border-radius: 999px;
			padding: 0.5rem 0.75rem;
			border: 1px solid #ffffff33;
			background: transparent;
			color: #ffffffcc;
			cursor: pointer;
			font-size: 0.9rem;
			transition:
				background 0.2s,
				color 0.2s,
				border-color 0.2s;
			&.primary {
				background: var(--secondary);
				border-color: var(--secondary);
				color: #0b1220;
				font-weight: 500;
				&:hover {
					filter: brightness(1.05);
				}
			}
			&:hover {
				border-color: #ffffff80;
				background: #ffffff1a;
			}
		}
	}
	a {
		font-size: 0.85rem;
		color: #ffffff99;
		text-decoration: underline;
		text-underline-offset: 2px;
		&:hover {
			color: var(--secondary);
		}
	}
}

#no-cookies,
#no-javascript {
	display: none;
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(0, 0, 0, 0.85);
	backdrop-filter: blur(10px);
	pointer-events: auto;
	place-content: center;
	place-items: center;
	&.active {
		display: flex;
	}
	> .modal-content {
		position: relative;
		background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
		padding: 3rem;
		border-radius: 1.5rem;
		text-align: center;
		max-width: 50vw;
		width: 90%;
		box-shadow:
			0 25px 50px rgba(0, 0, 0, 0.5),
			0 0 0 1px rgba(255, 255, 255, 0.1);
		transform: scale(0.8) !important;
		opacity: 0;
		> .icon-container {
			margin: 0 auto 2rem;
			width: 5rem;
			height: 5rem;
			border-radius: 50%;
			background: linear-gradient(
				135deg,
				rgba(239, 68, 68, 0.2) 0%,
				rgba(239, 68, 68, 0.1) 100%
			);
			border: 3px solid #ef4444;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			opacity: 0;
			&::before {
				content: "";
				position: absolute;
				inset: -10px;
				border-radius: 50%;
				background: radial-gradient(
					circle,
					rgba(239, 68, 68, 0.3) 0%,
					transparent 70%
				);
				opacity: 0.6;
				animation: pulse 2s ease-in-out infinite;
			}
			> .icon-x {
				width: 50px;
				height: 50px;
				position: relative;
				&::before,
				&::after {
					content: "";
					position: absolute;
					width: 100%;
					height: 4px;
					background: #ef4444;
					border-radius: 2px;
					top: 50%;
					left: 0;
				}
				&::before {
					transform: rotate(45deg);
				}
				&::after {
					transform: rotate(-45deg);
				}
			}
		}
		> h2 {
			font-size: 2.5rem;
			font-weight: 700;
			margin-bottom: 1rem;
			background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			opacity: 0;
		}
		> .subtitle {
			font-size: 1.125rem;
			color: #b0b0b0;
			margin-bottom: 0.5rem;
			opacity: 0;
		}
		> .description {
			font-size: 0.9375rem;
			color: #b0b0b0;
			margin-bottom: 2rem;
			opacity: 0;
		}
		> .instructions {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 16px;
			padding: 1.5rem;
			margin-bottom: 2rem;
			text-align: left;
			border: 1px solid rgba(255, 255, 255, 0.1);
			opacity: 0;
			> h3 {
				font-size: 1rem;
				margin-bottom: 1rem;
				color: #3b82f6;
				font-weight: 600;
			}
			> ul {
				list-style: none;
				padding: 0;
				> li {
					padding: 0.75rem 0;
					padding-left: 2rem;
					position: relative;
					color: #b0b0b0;
					font-size: 0.9375rem;
					line-height: 1.6;
					border-bottom: 1px solid rgba(255, 255, 255, 0.05);
					&:last-child {
						border-bottom: none;
					}
					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 8px;
						height: 8px;
						background: #3b82f6;
						border-radius: 50%;
						box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
					}
				}
			}
		}
		> .help-link {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			color: #3b82f6;
			text-decoration: none;
			font-size: 1rem;
			font-weight: 500;
			margin-bottom: 1.5rem;
			opacity: 0;
			transition: all 0.3s ease;
			&:hover {
				gap: 0.75rem;
				text-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
			}
			&::after {
				content: "→";
				font-size: 1.25rem;
			}
		}
		> .notice {
			font-size: 0.9375rem;
			color: #b0b0b0;
			margin-bottom: 1rem;
			opacity: 0;
		}
		> .refresh-button {
			width: 100%;
			padding: 1rem 2rem;
			font-size: 1.125rem;
			font-weight: 600;
			color: #ffffff;
			background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
			border: none;
			border-radius: 12px;
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
			position: relative;
			overflow: hidden;
			opacity: 0;
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					90deg,
					transparent,
					rgba(255, 255, 255, 0.3),
					transparent
				);
				transition: left 0.5s ease;
			}
			&:hover {
				transform: translateY(-2px);
				box-shadow:
					0 8px 25px rgba(59, 130, 246, 0.5),
					0 0 30px rgba(59, 130, 246, 0.4);
				&::before {
					left: 100%;
				}
			}
			&:active {
				transform: translateY(0);
			}
		}
	}
}
#no-javascript {
	display: flex;
	* {
		opacity: 1 !important;
	}
}

header {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	right: 0;
	height: 5rem;
	padding: 1rem;
	padding-left: 5rem;
	padding-right: 5rem;
	place-content: space-between;
	place-items: center;
	border-bottom: solid 1px var(--fav-1);
	transition: border-color 0.3s;
	z-index: 9999;
	background: rgb(255, 255, 255, 0);
	box-shadow: 0 0 0 rgb(0, 0, 0, 0.5);
	transition: all 0.3s;
	&:not(.home) {
		> nav {
			display: none;
		}
		> #infos-contact > #tel {
			display: none;
		}
	}
	&.scrolled {
		background: rgb(255, 255, 255, 1);
		box-shadow: 0 0 15px rgb(0, 0, 0, 0.5);
		> nav > a {
			color: var(--disabled);
			&:hover {
				color: var(--secondary);
				text-decoration: underline;
			}
		}
		> #infos-contact > #tel {
			> span {
				color: var(--primary);
			}
			> i {
				color: var(--primary);
			}
		}
		> #burger > span {
			background: var(--txt);
		}
	}
	> * {
		font-weight: 500;
	}
	> #brand {
		display: flex;
		place-content: center;
		place-items: center;
		gap: 5rem;
		> #title {
			display: flex;
			place-content: center;
			place-items: center;
			gap: 0.5rem;
			> picture > img {
				width: auto;
				height: 4rem;
			}
		}
	}
	> nav {
		display: flex;
		place-self: center;
		place-items: center;
		gap: 1.5rem;
		> a {
			padding: 0.5rem;
			color: #dbdbdbcc;
			transition: all 0.3s;
			&:hover {
				color: var(--secondary);
				text-decoration: underline;
			}
		}
	}
	> #infos-contact {
		display: flex;
		place-content: center;
		place-items: center;
		gap: 1.5rem;
		> #tel {
			display: flex;
			place-content: center;
			place-items: center;
			gap: 0.5rem;
			&:hover {
				> span {
					text-decoration: underline;
					color: var(--secondary);
				}
			}
			> span {
				color: white;
				transition: all 0.3s;
			}
			> i {
				color: white;
			}
		}
		> #ask-quote {
			padding: 1.25rem;
			padding-bottom: 0.75rem;
			padding-top: 0.75rem;
			border-radius: 0.75rem;
			color: white;
			background: linear-gradient(
				to top right,
				var(--secondary) 0%,
				var(--secondary-light) 75%
			);
		}
	}
	> #burger {
		display: none;
		flex-direction: column;
		gap: 0.5rem;
		cursor: pointer;
		padding: 0.5rem;
		background: none;
		border: none;
		&.displayed {
			display: flex;
		}
		&.active {
			> span:nth-child(1) {
				transform: rotate(45deg) translate(8px, 8px);
			}
			> span:nth-child(2) {
				opacity: 0;
			}
			> span:nth-child(3) {
				transform: rotate(-45deg) translate(7px, -7px);
			}
		}
		> span {
			width: 1.5rem;
			height: 2px;
			background: #dbdbdbcc;
			border-radius: 0.5rem;
			transition: all 0.3s;
		}
	}
}
.mobile-menu {
	display: none;
}

main {
	min-height: 100vh;
	> section {
		overflow: hidden;
		place-items: center;
		min-height: 100vh;
		display: flex;
		position: relative;
		padding-left: 5rem;
		padding-right: 5rem;
		/* home */
		&#hero {
			> #hero-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
				> img {
					vertical-align: middle;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				> #gradient-1 {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(180deg, #123354f2 0%, #0d263fd9 100%);
				}
				> #gradient-2 {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-image: radial-gradient(
						circle at 30% 40%,
						rgb(250, 140, 15, 0.1) 0%,
						transparent 50%
					);
				}
			}
			> #hero-content {
				display: flex;
				flex-direction: column;
				place-content: space-between;
				place-items: center;
				height: calc(100vh - 5rem);
				width: 100%;
				margin-top: 5rem;
				padding-top: 5rem;
				padding-bottom: 5rem;
				> #loc {
					display: flex;
					place-self: flex-start;
					place-content: center;
					place-items: center;
					padding: 0.5rem;
					padding-left: 1rem;
					padding-right: 1rem;
					border-radius: 9999px;
					border: solid 1px var(--secondary-4);
					background: var(--secondary-2);
					font-weight: 500;
					cursor: default;
					> i {
						opacity: 0.8;
						margin-right: 0.5rem;
						color: var(--secondary);
						animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none
							running pulse;
					}
				}
				> #brand {
					display: flex;
					flex-direction: column;
					gap: 0.5rem;
					> h1 {
						font-size: 3.5rem;
						font-weight: 500;
						color: white;
						cursor: default;
						> span {
							background: linear-gradient(
								135deg,
								var(--secondary) 0%,
								var(--secondary-light) 100%
							);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
						}
					}
					> p {
						font-size: 1.5rem;
						font-weight: 500;
						color: #dbdbdbcc;
						cursor: default;
					}
				}
				> #cta {
					display: flex;
					gap: 1rem;
					> a {
						display: flex;
						place-items: center;
						place-content: center;
						padding: 2rem;
						padding-bottom: 0.85rem;
						padding-top: 0.85rem;
						border-radius: 0.75rem;
						color: white;
						font-size: 1.1rem;
						font-weight: 500;
						&:nth-child(1) {
							background: linear-gradient(
								to top right,
								var(--secondary) 0%,
								var(--secondary-light) 75%
							);
						}
						&:nth-child(2) {
							background: rgb(255, 255, 255, 0.1);
							border: solid 2px rgb(255, 255, 255, 0.3);
							backdrop-filter: blur(5px);
						}
					}
				}
				> #stats {
					display: flex;
					place-content: space-between;
					place-items: center;
					width: 80%;
					> .stat {
						display: flex;
						flex-direction: column;
						gap: 0.5rem;
						place-content: center;
						place-items: center;
						cursor: default;
						> i {
							color: var(--secondary);
							font-size: 1.5rem;
							text-shadow: 0 0 5px var(--secondary-2);
						}
						> .num {
							font-weight: 700;
							font-size: 2rem;
						}
						> .txt {
							font-weight: 500;
							color: #dbdbdbcc;
						}
					}
				}
			}
		}
		&#services {
			padding-top: 5rem;
			padding-bottom: 5rem;
			display: flex;
			flex-direction: column;
			place-content: center;
			place-items: center;
			gap: 7.5rem;
			background: rgb(235, 240, 225);
			> #brand {
				max-width: 50%;
				display: flex;
				flex-direction: column;
				place-items: center;
				place-content: center;
				text-align: center;
				gap: 1rem;
				> #pop {
					padding: 0.5rem;
					padding-left: 1rem;
					padding-right: 1rem;
					font-weight: 500;
					font-size: 0.9rem;
					border-radius: 9999px;
					color: var(--secondary);
					background: #f98c101a;
					cursor: default;
				}
				> h2 {
					cursor: default;
					color: var(--txt);
					font-size: 3rem;
					> span {
						color: var(--primary);
					}
				}
				> p {
					cursor: default;
					color: var(--disabled);
					font-size: 1.1rem;
				}
			}
			> .tech {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				place-content: center;
				place-items: center;
				width: 100%;
				gap: 5rem;
				&.tech-inspection {
					> #left {
						display: flex;
						flex-direction: column;
						place-content: space-between;
						place-items: flex-start;
						gap: 1.5rem;
						> #brand {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							width: max-content;
							cursor: default;
							> i {
								display: flex;
								width: 3rem;
								height: 3rem;
								font-size: 1.5rem;
								padding: 1rem;
								border-radius: 0.75rem;
								place-content: center;
								place-items: center;
								text-align: center;
								color: white;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
							}
							> #txt {
								> h3 {
									cursor: default;
									color: var(--txt);
									font-size: 2rem;
								}
								> p {
									cursor: default;
									color: var(--disabled);
								}
							}
						}
						> #content {
							cursor: default;
							color: var(--disabled);
							font-size: 1.1rem;
							line-height: 1.5;
						}
						> ul {
							list-style: none;
							gap: 1rem;
							display: flex;
							flex-direction: column;
							> li {
								gap: 0.75rem;
								place-items: flex-start;
								display: flex;
								color: var(--txt);
								cursor: default;
								> svg {
									flex-shrink: 0;
									width: 1.25rem;
									height: 1.25rem;
									margin-top: 0.125rem;
									vertical-align: middle;
								}
							}
						}
						> #cta {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							> #price {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								background: #1f59930d;
								border-radius: 0.75rem;
								> h3 {
									color: var(--primary);
									font-size: 1.5rem;
									cursor: default;
								}
								> span {
									color: var(--disabled);
									cursor: default;
								}
							}
							> a {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								border-radius: 0.75rem;
								color: white;
								font-weight: 500;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
								> i {
									color: white;
									font-weight: 500;
								}
							}
						}
					}
					> #right {
						border-radius: 1rem;
						overflow: hidden;
						position: relative;
						width: 100%;
						box-shadow: 0 20px 50px hsl(210 30% 20% / 0.15);
						&:hover > img {
							transform: translate(0, 0) rotate(0) skew(0) skewY(0) scaleX(1.05)
								scaleY(1.05);
						}
						> img {
							vertical-align: middle;
							width: 100%;
							object-fit: cover;
							height: 27.5rem;
							transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
						}
						> #gradient {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background-image: linear-gradient(
								to top,
								hsl(210 65% 35% / 0.3),
								transparent
							);
						}
					}
				}
				&.tech-curage {
					> #left {
						border-radius: 1rem;
						overflow: hidden;
						position: relative;
						width: 100%;
						box-shadow: 0 20px 50px hsl(210 30% 20% / 0.15);
						&:hover > img {
							transform: translate(0, 0) rotate(0) skew(0) skewY(0) scaleX(1.05)
								scaleY(1.05);
						}
						> img {
							vertical-align: middle;
							width: 100%;
							object-fit: cover;
							height: 27.5rem;
							transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
						}
						> #gradient {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background-image: linear-gradient(
								to top,
								hsl(210 65% 35% / 0.3),
								transparent
							);
						}
					}
					> #right {
						display: flex;
						flex-direction: column;
						place-content: space-between;
						place-items: flex-start;
						gap: 1.5rem;
						> #brand {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							width: max-content;
							cursor: default;
							> i {
								display: flex;
								width: 3rem;
								height: 3rem;
								font-size: 1.5rem;
								padding: 1rem;
								border-radius: 0.75rem;
								place-content: center;
								place-items: center;
								text-align: center;
								color: white;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
							}
							> #txt {
								> h3 {
									cursor: default;
									color: var(--txt);
									font-size: 2rem;
								}
								> p {
									color: var(--disabled);
									cursor: default;
								}
							}
						}
						> #content {
							color: var(--disabled);
							font-size: 1.1rem;
							cursor: default;
							line-height: 1.5;
						}
						> ul {
							list-style: none;
							gap: 1rem;
							display: flex;
							flex-direction: column;
							> li {
								gap: 0.75rem;
								cursor: default;
								place-items: flex-start;
								display: flex;
								color: var(--txt);
								> svg {
									flex-shrink: 0;
									width: 1.25rem;
									height: 1.25rem;
									margin-top: 0.125rem;
									vertical-align: middle;
								}
							}
						}
						> #cta {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							> #price {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								background: #1f59930d;
								border-radius: 0.75rem;
								cursor: default;
								> h3 {
									color: var(--primary);
									font-size: 1.5rem;
								}
								> span {
									color: var(--disabled);
								}
							}
							> a {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								border-radius: 0.75rem;
								color: white;
								font-weight: 500;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
								> i {
									color: white;
									font-weight: 500;
								}
							}
						}
					}
				}
				&.tech-resinage {
					> #left {
						display: flex;
						flex-direction: column;
						place-content: space-between;
						place-items: flex-start;
						gap: 1.5rem;
						> #brand {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							width: max-content;
							cursor: default;
							> i {
								display: flex;
								width: 3rem;
								height: 3rem;
								font-size: 1.5rem;
								padding: 1rem;
								border-radius: 0.75rem;
								place-content: center;
								place-items: center;
								text-align: center;
								color: white;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
							}
							> #txt {
								> h3 {
									cursor: default;
									color: var(--txt);
									font-size: 2rem;
								}
								> p {
									cursor: default;
									color: var(--disabled);
								}
							}
						}
						> #content {
							cursor: default;
							color: var(--disabled);
							font-size: 1.1rem;
							line-height: 1.5;
						}
						> ul {
							list-style: none;
							gap: 1rem;
							display: flex;
							flex-direction: column;
							> li {
								gap: 0.75rem;
								place-items: flex-start;
								display: flex;
								color: var(--txt);
								cursor: default;
								> svg {
									flex-shrink: 0;
									width: 1.25rem;
									height: 1.25rem;
									margin-top: 0.125rem;
									vertical-align: middle;
								}
							}
						}
						> #cta {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							> #price {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								background: #1f59930d;
								border-radius: 0.75rem;
								> h3 {
									color: var(--primary);
									font-size: 1.5rem;
									cursor: default;
								}
								> span {
									color: var(--disabled);
									cursor: default;
								}
							}
							> a {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								border-radius: 0.75rem;
								color: white;
								font-weight: 500;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
								> i {
									color: white;
									font-weight: 500;
								}
							}
						}
					}
					> #right {
						border-radius: 1rem;
						overflow: hidden;
						position: relative;
						width: 100%;
						box-shadow: 0 20px 50px hsl(210 30% 20% / 0.15);
						&:hover > img {
							transform: translate(0, 0) rotate(0) skew(0) skewY(0) scaleX(1.05)
								scaleY(1.05);
						}
						> img {
							vertical-align: middle;
							width: 100%;
							object-fit: cover;
							height: 27.5rem;
							transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
						}
						> #gradient {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background-image: linear-gradient(
								to top,
								hsl(210 65% 35% / 0.3),
								transparent
							);
						}
					}
				}
				&.tech-diagnostic {
					> #left {
						border-radius: 1rem;
						overflow: hidden;
						position: relative;
						width: 100%;
						box-shadow: 0 20px 50px hsl(210 30% 20% / 0.15);
						&:hover > img {
							transform: translate(0, 0) rotate(0) skew(0) skewY(0) scaleX(1.05)
								scaleY(1.05);
						}
						> img {
							vertical-align: middle;
							width: 100%;
							object-fit: cover;
							height: 27.5rem;
							transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
						}
						> #gradient {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background-image: linear-gradient(
								to top,
								hsl(210 65% 35% / 0.3),
								transparent
							);
						}
					}
					> #right {
						display: flex;
						flex-direction: column;
						place-content: space-between;
						place-items: flex-start;
						gap: 1.5rem;
						> #brand {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							width: max-content;
							cursor: default;
							> i {
								display: flex;
								width: 3rem;
								height: 3rem;
								font-size: 1.5rem;
								padding: 1rem;
								border-radius: 0.75rem;
								place-content: center;
								place-items: center;
								text-align: center;
								color: white;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
							}
							> #txt {
								> h3 {
									cursor: default;
									color: var(--txt);
									font-size: 2rem;
								}
								> p {
									color: var(--disabled);
									cursor: default;
								}
							}
						}
						> #content {
							color: var(--disabled);
							font-size: 1.1rem;
							cursor: default;
							line-height: 1.5;
						}
						> ul {
							list-style: none;
							gap: 1rem;
							display: flex;
							flex-direction: column;
							> li {
								gap: 0.75rem;
								cursor: default;
								place-items: flex-start;
								display: flex;
								color: var(--txt);
								> svg {
									flex-shrink: 0;
									width: 1.25rem;
									height: 1.25rem;
									margin-top: 0.125rem;
									vertical-align: middle;
								}
							}
						}
						> #cta {
							display: flex;
							place-content: center;
							place-items: center;
							gap: 1rem;
							> #price {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								background: #1f59930d;
								border-radius: 0.75rem;
								cursor: default;
								> h3 {
									color: var(--primary);
									font-size: 1.5rem;
								}
								> span {
									color: var(--disabled);
								}
							}
							> a {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 0.5rem;
								padding: 1rem;
								padding-left: 1.5rem;
								padding-right: 1.5rem;
								border-radius: 0.75rem;
								color: white;
								font-weight: 500;
								background: linear-gradient(
									to top right,
									var(--secondary) 0%,
									var(--secondary-light) 75%
								);
								> i {
									color: white;
									font-weight: 500;
								}
							}
						}
					}
				}
			}
		}
		&#avantages {
			padding-top: 5rem;
			padding-bottom: 5rem;
			display: flex;
			flex-direction: column;
			place-content: center;
			place-items: center;
			gap: 7.5rem;
			> #brand {
				max-width: 50%;
				display: flex;
				flex-direction: column;
				place-items: center;
				place-content: center;
				text-align: center;
				gap: 1rem;
				> #pop {
					padding: 0.5rem;
					padding-left: 1rem;
					padding-right: 1rem;
					font-weight: 500;
					font-size: 0.9rem;
					border-radius: 9999px;
					color: var(--primary);
					background: #1f59931a;
					cursor: default;
				}
				> h2 {
					color: var(--txt);
					font-size: 3rem;
					cursor: default;
					> span {
						color: var(--secondary);
					}
				}
				> p {
					color: var(--disabled);
					cursor: default;
					font-size: 1.1rem;
				}
			}
			> #table {
				cursor: default;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				border-radius: 1rem;
				box-shadow: 0 0 15px rgb(0, 0, 0, 0.5);
				width: 100%;
				max-width: 60vw;
				> .head {
					display: grid;
					grid-template-columns: repeat(3, minmax(0, 1fr));
					background-color: var(--primary);
					> div {
						padding: 1.5rem;
						font-weight: 500;
						color: white;
						&.col-2 {
							background: var(--secondary);
							text-align: center;
						}
						&.col-3 {
							text-align: center;
						}
					}
				}
				> div:not(.head) {
					display: grid;
					grid-template-columns: repeat(3, minmax(0, 1fr));
					&.row-1 {
						background: #edf0f280;
					}
					> div {
						display: flex;
						place-items: center;
						gap: 0.75rem;
						padding: 1.5rem;
						> i {
							color: var(--primary);
							-webkit-text-stroke: 0.5px;
						}
						&.col-1 {
							color: var(--txt);
							font-weight: 500;
						}
						&.col-2 {
							place-content: center;
							color: var(--secondary);
							font-weight: 500;
						}
						&.col-3 {
							place-content: center;
							color: var(--disabled);
						}
					}
				}
			}
			> #grids {
				display: grid;
				gap: 2rem;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				cursor: default;
				> .grid {
					display: flex;
					flex-direction: column;
					border-radius: 1rem;
					background: #f9fafb;
					padding: 2rem;
					box-shadow: 0 0 15px rgb(0, 0, 0, 0.5);
					gap: 1.5rem;
					> .icon {
						height: 3.5rem;
						width: 3.5rem;
						border-radius: 0.75rem;
						background: var(--primary);
						display: flex;
						place-content: center;
						place-items: center;
						> i {
							font-size: 1.5rem;
							color: white;
						}
					}
					> h3 {
						color: var(--txt);
					}
					> p {
						color: var(--disabled);
					}
				}
			}
		}
		&#intervention {
			padding-top: 5rem;
			padding-bottom: 5rem;
			display: flex;
			flex-direction: column;
			place-content: center;
			place-items: center;
			gap: 7.5rem;
			background: rgb(235, 240, 225);
			> #brand {
				max-width: 50%;
				display: flex;
				flex-direction: column;
				place-items: center;
				place-content: center;
				text-align: center;
				gap: 1rem;
				> #pop {
					padding: 0.5rem;
					padding-left: 1rem;
					padding-right: 1rem;
					font-weight: 500;
					font-size: 0.9rem;
					border-radius: 9999px;
					color: var(--secondary);
					cursor: default;
					background: #f98c101a;
				}
				> h2 {
					cursor: default;
					color: var(--txt);
					font-size: 3rem;
					> span {
						color: var(--primary);
					}
				}
				> p {
					color: var(--disabled);
					font-size: 1.1rem;
					cursor: default;
				}
			}
			> #steps {
				position: relative;
				margin-left: auto;
				margin-right: auto;
				cursor: default;
				> #line {
					display: block;
					left: 50%;
					width: 0.125rem;
					top: 0;
					bottom: 0;
					position: absolute;
					background-color: #dae0e7;
				}
				> .step {
					position: relative;
					margin-bottom: 3rem;
					display: flex;
					place-items: center;
					&.left {
						flex-direction: row;
						> .content {
							padding-right: 4rem;
							text-align: right;
							> .card {
								margin-right: 1rem;
								place-items: flex-end;
								> #brand {
									flex-direction: row-reverse;
								}
								> ul {
									text-align: right;
									> li {
										flex-direction: row-reverse;
									}
								}
							}
						}
					}
					&.right {
						flex-direction: row-reverse;
						> .content {
							padding-left: 4rem;
							text-align: left;
							> .card {
								margin-left: 1rem;
							}
						}
					}
					> .content {
						flex: 1 1 0%;
						> .card {
							display: flex;
							flex-direction: column;
							gap: 1rem;
							border-radius: 1rem;
							background: white;
							box-shadow: 0 0 15px rgb(0, 0, 0, 0.5);
							padding: 2rem;
							> #brand {
								display: flex;
								place-content: center;
								place-items: center;
								gap: 1rem;
								width: max-content;
								> i {
									display: flex;
									width: 3rem;
									height: 3rem;
									font-size: 1.5rem;
									padding: 1rem;
									border-radius: 0.75rem;
									place-content: center;
									place-items: center;
									text-align: center;
									color: white;
									background: linear-gradient(
										to top right,
										var(--secondary) 0%,
										var(--secondary-light) 75%
									);
								}
								> #txt {
									> h3 {
										color: var(--secondary);
										font-size: 0.875rem;
										line-height: 1.25rem;
										font-weight: 500;
									}
									> p {
										color: var(--txt);
										font-size: 1.25rem;
										font-weight: 500;
									}
								}
							}
							> p {
								margin-bottom: 1rem;
								color: var(--disabled);
							}
							> ul {
								list-style: none;
								display: flex;
								flex-direction: column;
								> li {
									display: flex;
									color: var(--txt);
									font-size: 0.875rem;
									line-height: 1.25rem;
									gap: 0.5rem;
									place-items: center;
									> svg {
										vertical-align: middle;
										height: 1rem;
										width: 1rem;
										flex-shrink: 0;
									}
								}
							}
						}
					}
					> .dot {
						position: absolute;
						z-index: 10;
						height: 4rem;
						width: 4rem;
						place-items: center;
						place-content: center;
						border-radius: 9999px;
						background: var(--primary);
						font-size: 1.25rem;
						line-height: 1.75rem;
						font-weight: 700;
						left: 50%;
						display: flex;
						transform: translate(-50%, 0) rotate(0) skew(0) skewY(0) scaleX(1)
							scaleY(1);
					}
					> .hide {
						flex: 1 1 0%;
						display: block;
					}
				}
			}
		}
		&#contact {
			padding-top: 5rem;
			padding-bottom: 5rem;
			display: flex;
			flex-direction: column;
			place-content: center;
			place-items: center;
			gap: 7.5rem;
			> #brand {
				max-width: 50%;
				display: flex;
				flex-direction: column;
				place-items: center;
				place-content: center;
				text-align: center;
				gap: 1rem;
				> #pop {
					cursor: default;
					padding: 0.5rem;
					padding-left: 1rem;
					padding-right: 1rem;
					font-weight: 500;
					font-size: 0.9rem;
					border-radius: 9999px;
					color: var(--primary);
					background: #1f59931a;
				}
				> h2 {
					cursor: default;
					color: var(--txt);
					font-size: 3rem;
					> span {
						color: var(--secondary);
					}
				}
				> p {
					cursor: default;
					color: var(--disabled);
					font-size: 1.1rem;
				}
			}
			> #form-content {
				margin-left: auto;
				margin-right: auto;
				display: grid;
				gap: 3rem;
				max-width: 75vw;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				> #infos {
					> #content {
						height: 100%;
						border-radius: 1rem;
						background: linear-gradient(135deg, #1f5993 0%, #2e73b8 100%);
						padding: 2.5rem;
						> h3 {
							cursor: default;
							margin-bottom: 1.5rem;
							font-size: 1.5rem;
							line-height: 2rem;
							font-weight: 500;
							color: white;
						}
						> p {
							cursor: default;
							margin-bottom: 2rem;
							color: #ffffffcc;
						}
						> #contacts {
							display: flex;
							flex-direction: column;
							gap: 1.5rem;
							> .contact {
								display: flex;
								place-items: flex-start;
								gap: 1rem;
								&:nth-child(5) > #detail > a {
									cursor: default;
									&:hover {
										color: white;
										text-decoration: none;
									}
								}
								> #icon {
									display: flex;
									height: 3rem;
									width: 3rem;
									flex-shrink: 0;
									place-items: center;
									place-content: center;
									border-radius: 0.75rem;
									background: #ffffff1a;
									> i {
										vertical-align: middle;
										height: 1.25rem;
										width: 1.25rem;
									}
								}
								> #detail {
									display: flex;
									flex-direction: column;
									> span {
										font-size: 0.875rem;
										line-height: 1.25rem;
										color: #ffffff99;
										cursor: default;
									}
									> a {
										color: white;
										font-weight: 500;
										transition: all 0.3s;
										&:hover {
											color: var(--secondary);
											text-decoration: underline;
										}
									}
								}
							}
						}
						> #foot {
							margin-top: 2.5rem;
							border-top: solid 1px #ffffff33;
							padding-top: 2rem;
							cursor: default;
							> h4 {
								letter-spacing: -0.025em;
								margin-bottom: 1rem;
								font-weight: 500;
							}
							> #techs {
								display: flex;
								flex-wrap: wrap;
								gap: 0.5rem;
								> span {
									border-radius: 9999px;
									background: #ffffff1a;
									padding-left: 0.75rem;
									padding-right: 0.75rem;
									padding-top: 0.25rem;
									padding-bottom: 0.25rem;
									font-size: 0.875rem;
									line-height: 1.25rem;
								}
							}
						}
					}
				}
				> #form {
					> form {
						border-radius: 1rem;
						background: #f9fafb;
						box-shadow: 0 8px 30px #2433421f;
						padding: 2.5rem;
						> #content {
							> .part-1 {
								display: grid;
								gap: 1.5rem;
								grid-template-columns: repeat(2, minmax(0, 1fr));
								> #user-name {
									> label {
										margin-bottom: 0.5rem;
										font-size: 0.875rem;
										line-height: 1.25rem;
										font-weight: 500;
										color: #202c3c;
									}
									> input {
										display: flex;
										height: 3rem;
										width: 100%;
										border-radius: calc(0.75rem - 2px);
										border: solid 1px #dae0e7;
										background: #f9fafb;
										padding-left: 0.75rem;
										padding-right: 0.75rem;
										padding-top: 0.5rem;
										padding-bottom: 0.5rem;
										font-size: 0.875rem;
										line-height: 1.25rem;
										color: var(--txt);
									}
								}
								> #user-tel {
									> label {
										margin-bottom: 0.5rem;
										font-size: 0.875rem;
										line-height: 1.25rem;
										font-weight: 500;
										color: #202c3c;
									}
									> input {
										display: flex;
										height: 3rem;
										width: 100%;
										border-radius: calc(0.75rem - 2px);
										border: solid 1px #dae0e7;
										background: #f9fafb;
										padding-left: 0.75rem;
										padding-right: 0.75rem;
										padding-top: 0.5rem;
										padding-bottom: 0.5rem;
										font-size: 0.875rem;
										line-height: 1.25rem;
										color: var(--txt);
									}
								}
							}
							> .part-2 {
								margin-top: 1.5rem;
								> label {
									margin-bottom: 0.5rem;
									font-size: 0.875rem;
									line-height: 1.25rem;
									font-weight: 500;
									color: #202c3c;
								}
								> input {
									display: flex;
									height: 3rem;
									width: 100%;
									border-radius: calc(0.75rem - 2px);
									border: solid 1px #dae0e7;
									background: #f9fafb;
									padding-left: 0.75rem;
									padding-right: 0.75rem;
									padding-top: 0.5rem;
									padding-bottom: 0.5rem;
									font-size: 0.875rem;
									line-height: 1.25rem;
									color: var(--txt);
								}
							}
							> .part-3,
							> .part-4 {
								margin-top: 1.5rem;
								> label {
									margin-bottom: 0.5rem;
									font-size: 0.875rem;
									line-height: 1.25rem;
									font-weight: 500;
									color: #202c3c;
								}
								> #contact-preference-hidden,
								> #prestation-hidden {
									position: absolute;
									opacity: 0;
									pointer-events: none;
									width: 0;
									height: 0;
									padding: 0;
									margin: 0;
									border: 0;
								}
								> #contact-pref,
								> #prestation-select {
									&.error .multi-select-toggle {
										border-color: rgb(180, 20, 20);
									}
									> .error-message {
										margin-top: 0.25rem;
										font-size: 0.75rem;
										color: rgb(180, 20, 20);
									}
								}
								> #contact-pref.multi-select,
								> #prestation-select.multi-select {
									position: relative;
									&.open {
										> .multi-select-toggle::after {
											content: "▴";
										}
										> .multi-select-panel {
											display: flex;
											flex-direction: column;
											gap: 0.5rem;
										}
									}
									> .multi-select-toggle {
										width: 100%;
										height: 3rem;
										border-radius: 0.75rem;
										border: 1px solid #dae0e7;
										background: #f9fafb;
										padding: 0.5rem 1rem;
										font-size: 0.875rem;
										line-height: 1.25rem;
										color: var(--txt);
										display: flex;
										align-items: center;
										justify-content: space-between;
										cursor: pointer;
										&::after {
											content: "▾";
											font-size: 0.75rem;
											opacity: 0.7;
										}
									}
									> .multi-select-panel {
										position: absolute;
										z-index: 20;
										top: 3.25rem;
										left: 0;
										right: 0;
										background: #ffffff;
										border-radius: 0.75rem;
										border: 1px solid #dae0e7;
										box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
										padding: 0.5rem 0.75rem;
										display: none;
										> label {
											display: flex;
											align-items: center;
											gap: 0.5rem;
											font-size: 0.875rem;
											padding: 0.5rem;
											color: var(--txt);
											cursor: pointer;
											&:hover {
												background: var(--primary-light);
											}
											&.disabled {
												opacity: 0.6;
												cursor: not-allowed;
											}
											> input {
												flex-shrink: 0;
											}
											> i {
												font-size: 1rem;
												color: var(--primary);
												flex-shrink: 0;
											}
											> span {
												flex: 1;
												color: var(--txt);
											}
										}
									}
								}
							}
							> .part-5 {
								margin-top: 1.5rem;
								> label {
									margin-bottom: 0.5rem;
									font-size: 0.875rem;
									line-height: 1.25rem;
									font-weight: 500;
									color: #202c3c;
								}
								> textarea {
									display: flex;
									min-height: 5rem;
									width: 100%;
									resize: none;
									border-radius: calc(0.75rem - 2px);
									border: solid 1px #dae0e7;
									padding-left: 0.75rem;
									padding-right: 0.75rem;
									padding-top: 0.5rem;
									padding-bottom: 0.5rem;
									font-size: 0.875rem;
									line-height: 1.25rem;
									color: var(--txt);
								}
							}
							> button {
								margin-top: 1.5rem;
								text-transform: none;
								background-image: none;
								cursor: pointer;
								display: inline-flex;
								height: 3.5rem;
								width: 100%;
								place-items: center;
								place-content: center;
								gap: 0.5rem;
								white-space: nowrap;
								border: none;
								border-radius: 0.75rem;
								background: var(--secondary);
								padding-left: 2.5rem;
								padding-right: 2.5rem;
								padding-top: 1.25rem;
								padding-bottom: 1.25rem;
								font-size: 1.125rem;
								line-height: 1.75rem;
								font-weight: 500;
								color: white;
								&.sending {
									> i,
									span {
										mask-image: linear-gradient(
											-75deg,
											rgba(0, 0, 0, 0.6) 30%,
											#000 50%,
											rgba(0, 0, 0, 0.6) 70%
										) !important;
										mask-size: 200% !important;
										-webkit-mask-image: linear-gradient(
											-75deg,
											rgba(0, 0, 0, 0.6) 30%,
											#000 50%,
											rgba(0, 0, 0, 0.6) 70%
										) !important;
										-webkit-mask-size: 200% !important;
										animation: shine 2s infinite !important;
									}
								}
								> i {
									display: flex;
									vertical-align: middle;
									margin-left: 0.5rem;
									pointer-events: none;
									width: 1rem;
									height: 1rem;
									flex-shrink: 0;
								}
							}
							> #status {
								display: none;
								margin-top: 1rem;
								padding: 0.5rem;
								border-radius: 0.5rem;
								font-size: 0.9rem;
								align-items: center;
								gap: 0.5rem;
								&.success {
									display: flex;
									background: rgba(25, 180, 20, 0.1);
									border: solid 2px rgb(25, 180, 20, 0.3);
									backdrop-filter: blur(5px);
									color: rgb(25, 180, 20);
								}
								&.error {
									display: flex;
									background: rgba(180, 20, 20, 0.1);
									border: solid 2px rgba(180, 20, 20, 0.3);
									backdrop-filter: blur(5px);
									color: rgb(180, 20, 20);
								}
							}
							> p:not(#status) {
								margin-top: 1.5rem;
								text-align: center;
								font-size: 0.875rem;
								line-height: 1.25rem;
								color: #627084;
								display: flex;
								place-content: center;
								place-items: center;
								cursor: default;
								> svg {
									vertical-align: middle;
									margin-right: 0.25rem;
									display: inline;
									height: 1rem;
									width: 1rem;
								}
							}
							> #privacy-note {
								margin-top: 1rem;
								color: #627084;
								text-align: center;
							}
						}
					}
				}
			}
		}
		/* mentions legales */
		&#mentions-legales {
			display: flex;
			flex-direction: column;
			place-content: space-between;
			place-items: center;
			width: 100%;
			padding-top: 10rem;
			padding-bottom: 5rem;
			background: rgb(235, 240, 225);
			> #brand {
				max-width: 50%;
				display: flex;
				flex-direction: column;
				place-items: center;
				place-content: center;
				text-align: center;
				margin-bottom: 5rem;
				gap: 1rem;
				> h2 {
					cursor: default;
					color: var(--primary);
					font-size: 2.5rem;
				}
				> p {
					cursor: default;
					color: var(--disabled);
					font-size: 1.1rem;
				}
			}
			> #content {
				display: flex;
				flex-direction: column;
				place-content: center;
				place-items: center;
				> .card {
					width: 100%;
					max-width: 80%;
					margin-bottom: 3rem;
					background: white;
					border-radius: 1rem;
					box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
					padding: 1.5rem;
					> h2 {
						font-size: 1.5rem;
						color: var(--primary);
						margin-bottom: 1rem;
						padding-bottom: 0.5rem;
						border-bottom: solid 2px var(--secondary);
					}
					> h3 {
						color: var(--txt);
						font-size: 1.3rem;
						margin-top: 1.5rem;
						margin-bottom: 0.75rem;
					}
					> p {
						margin-bottom: 1rem;
						color: var(--disabled);
						line-height: 1.8;
						> strong {
							font-weight: 500;
							color: var(--txt);
						}
						> a {
							padding: 0;
							color: var(--primary);
							text-decoration: none;
							transition: color 0.3s;
							display: inline-flex;
							&:hover {
								color: var(--secondary);
								text-decoration: underline;
							}
						}
						> em {
							color: var(--disabled);
						}
					}
					> .info-box {
						background: #f0f4f8;
						border-left: 4px solid var(--secondary);
						padding: 1.5rem;
						margin: 1.5rem 0;
						border-radius: 0.5rem;
						color: var(--txt);
						> strong {
							color: var(--txt);
						}
						> a {
							display: inline-flex;
							padding: 0;
							color: var(--primary);
							text-decoration: none;
							transition: color 0.3s;
							&:hover {
								color: var(--secondary);
								text-decoration: underline;
							}
						}
					}
					> ul {
						margin-left: 1.5rem;
						margin-bottom: 1rem;
						> li {
							color: var(--disabled);
							margin-bottom: 0.5rem;
							line-height: 1.8;
						}
					}
				}
			}
		}
		/* politique de confidentialite */
		&#politique-de-confidentialite {
			display: flex;
			flex-direction: column;
			place-content: space-between;
			place-items: center;
			width: 100%;
			padding-top: 10rem;
			padding-bottom: 5rem;
			background: rgb(235, 240, 225);
			> #brand {
				max-width: 50%;
				display: flex;
				flex-direction: column;
				place-items: center;
				place-content: center;
				text-align: center;
				margin-bottom: 5rem;
				gap: 1rem;
				> h2 {
					cursor: default;
					color: var(--primary);
					font-size: 2.5rem;
				}
				> p {
					cursor: default;
					color: var(--disabled);
					font-size: 1.1rem;
				}
			}
			> #content {
				display: flex;
				flex-direction: column;
				place-content: center;
				place-items: center;
				> .card {
					width: 100%;
					max-width: 80%;
					margin-bottom: 3rem;
					background: white;
					border-radius: 1rem;
					box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
					padding: 1.5rem;
					> h2 {
						font-size: 1.5rem;
						color: var(--primary);
						margin-bottom: 1rem;
						padding-bottom: 0.5rem;
						border-bottom: solid 2px var(--secondary);
					}
					> h3 {
						color: var(--txt);
						font-size: 1.3rem;
						margin-top: 1.5rem;
						margin-bottom: 0.75rem;
					}
					> p {
						margin-bottom: 1rem;
						color: var(--disabled);
						line-height: 1.8;
						> strong {
							font-weight: 500;
							color: var(--txt);
						}
						> a {
							padding: 0;
							color: var(--primary);
							text-decoration: none;
							transition: color 0.3s;
							&:hover {
								color: var(--secondary);
								text-decoration: underline;
							}
						}
						> em {
							color: var(--disabled);
						}
					}
					> .info-box {
						background: #f0f4f8;
						border-left: 4px solid var(--secondary);
						padding: 1.5rem;
						margin: 1.5rem 0;
						border-radius: 0.5rem;
						color: var(--txt);
						> strong {
							color: var(--txt);
						}
						> a {
							padding: 0;
							color: var(--primary);
							text-decoration: none;
							transition: color 0.3s;
							&:hover {
								color: var(--secondary);
								text-decoration: underline;
							}
						}
					}
					> ul {
						margin-left: 1.5rem;
						margin-bottom: 1rem;
						> li {
							color: var(--disabled);
							margin-bottom: 0.5rem;
							line-height: 1.8;
							> strong {
								color: var(--disabled);
								font-weight: 500;
							}
						}
					}
				}
			}
		}
		/* 404 */
		&#t-404 {
			display: flex;
			flex-direction: column;
			place-content: space-between;
			place-items: center;
			width: 100%;
			padding-top: 10rem;
			padding-bottom: 5rem;
			background: rgb(235, 240, 225);
			> #brand {
				max-width: 50%;
				display: flex;
				flex-direction: column;
				place-items: center;
				place-content: center;
				text-align: center;
				margin-bottom: 5rem;
				gap: 1rem;
				> h2 {
					cursor: default;
					color: var(--primary);
					font-size: 2.5rem;
				}
				> p {
					cursor: default;
					color: var(--disabled);
					font-size: 1.1rem;
				}
			}
			> #content {
				display: flex;
				flex-direction: column;
				place-content: center;
				place-items: center;
				> .card {
					width: 100%;
					max-width: 80%;
					margin-bottom: 3rem;
					background: white;
					border-radius: 1rem;
					box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
					padding: 1.5rem;
					> h2 {
						font-size: 1.5rem;
						color: var(--primary);
						margin-bottom: 1rem;
						padding-bottom: 0.5rem;
						border-bottom: solid 2px var(--secondary);
					}
					> p {
						margin-bottom: 1rem;
						color: var(--disabled);
						line-height: 1.8;
					}
					> ul {
						margin-left: 1.5rem;
						margin-bottom: 1rem;
						> li {
							color: var(--disabled);
							margin-bottom: 0.5rem;
							line-height: 1.8;
						}
					}
				}
			}
		}
	}
}

footer {
	background: var(--primary);
	color: white;
	> #container {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 4rem;
		padding-bottom: 4rem;
		> #content {
			display: grid;
			gap: 2.5rem;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			> .part-1 {
				grid-column: span 2 / span 2;
				> img {
					vertical-align: middle;
					max-width: 100%;
					margin-bottom: 1.5rem;
					height: 3.5rem;
					width: auto;
				}
				> p {
					cursor: default;
					margin-bottom: 1.5rem;
					max-width: 30rem;
					color: #ffffffb3;
				}
				> #extra {
					cursor: default;
					display: flex;
					place-items: center;
					gap: 0.5rem;
					> span {
						font-size: 0.875rem;
						line-height: 1.25rem;
						color: #ffffff99;
					}
				}
			}
			> .part-2 {
				> h4 {
					cursor: default;
					letter-spacing: -0.025rem;
					margin-bottom: 1.5rem;
					font-size: 1.125rem;
					line-height: 1.75rem;
					font-weight: 500;
					padding: 0.5rem;
				}
				> ul {
					list-style: none;
					display: flex;
					flex-direction: column;
					gap: 1rem;
					> li {
						> a {
							padding: 0.5rem;
							color: #ffffffb3;
							transition: color 0.3s;
							&:hover {
								color: var(--secondary);
								text-decoration: underline;
							}
						}
					}
				}
			}
			> .part-3 {
				> h4 {
					cursor: default;
					letter-spacing: -0.025rem;
					margin-bottom: 1.5rem;
					font-size: 1.125rem;
					line-height: 1.75rem;
					font-weight: 500;
					padding: 0.5rem;
				}
				> ul {
					list-style: none;
					> li {
						display: flex;
						place-items: flex-start;
						gap: 0.75rem;
						&:nth-child(1),
						&:nth-child(2) {
							> a:hover {
								color: var(--secondary);
								text-decoration: underline;
							}
						}
						&:nth-child(3) > a {
							cursor: default;
						}
						> i {
							padding: 0.5rem;
							vertical-align: middle;
							margin-top: 0.125rem;
							height: 1.25rem;
							width: 1.25rem;
							flex-shrink: 0;
							color: var(--secondary);
						}
						> a {
							padding: 0.5rem;
							color: #ffffffb3;
							transition: color 0.3s;
						}
					}
				}
				.social-links {
					display: flex;
					gap: 0.75rem;
					> a {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						padding: 0.5rem;
						> i {
							color: #ffffffb3;
							font-size: 1.25rem;
							transition: all 0.3s;
						}
						&:hover > i {
							color: var(--secondary);
						}
					}
				}
			}
		}
		> #end {
			margin-top: 3rem;
			display: flex;
			place-items: center;
			place-content: space-between;
			gap: 1rem;
			border-top: solid 1px #ffffff1a;
			padding-top: 2rem;
			> p {
				cursor: default;
				font-size: 0.875rem;
				line-height: 1.25rem;
				color: #ffffff99;
			}
			> #cgu {
				display: flex;
				place-items: center;
				gap: 1.5rem;
				font-size: 0.875rem;
				line-height: 1.25rem;
				> a {
					color: #ffffff99;
					transition: color 0.3s;
					&:hover {
						color: var(--secondary);
						text-decoration: underline;
					}
				}
			}
		}
	}
}

/* Chat bot */
#__EAAPS_PORTAL {
	/* Button */
	> .kimcfv > button {
		background: linear-gradient(
			to right,
			var(--primary) 0%,
			var(--primary-light) 95%
		);
	}
	/* window */
	> .iEuRoy,
	.fSbHaK,
	.fyiBFO {
		background: url(/assets/hero.webp);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		vertical-align: middle;
		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background:
				linear-gradient(180deg, #123354a2 0%, #0d263fb0 100%),
				radial-gradient(
					circle at 30% 40%,
					rgb(250, 140, 15, 0.1) 0%,
					transparent 50%
				);
			backdrop-filter: blur(2px);
		}
		/* header */
		> .kdjVvn {
			background: transparent;
			border-bottom: solid 1px rgb(255, 255, 255, 0.1);
			/* logo container */
			> .bEyESV {
				border-radius: 0;
				/* logo background */
				> .WJfLx {
					border-radius: 0;
					background: none;
					&::after {
						display: none;
					}
					/* logo */
					> img {
						object-fit: contain;
					}
				}
			}
			/* infos */
			> .bNofGA {
				/* name */
				> .eYCnqZ {
					color: white;
				}
				/* description */
				> .kRkkZD {
					color: rgb(225, 225, 215);
				}
			}
			/* buttons */
			> .jVpslT {
				/* resize */
				> button {
					/* container */
					> .cEUBmt {
						/* div */
						> div {
							> svg {
								fill: rgb(225, 225, 215);
							}
						}
					}
				}
			}
		}
		/* messages */
		> .csnOW {
			/* messages container */
			> .scrollable-container__ScrollableContainer-sc-ff9b770a-0 {
				/* first message assistant */
				> .dxWwaV > .gDNyFh > .gqGMMb > .jGGXDb {
					background: linear-gradient(
						to right,
						var(--secondary) 0%,
						var(--secondary-light) 95%
					);
					/* text */
					> .lbHJFk {
						p {
							color: white;
							&.rp-welcome-title {
								font-size: 1.1rem;
								font-weight: 500;
								padding-bottom: 0.5rem;
							}
						}
						> .iPWQRM > time {
							color: white;
						}
					}
					/* corner */
					> svg {
						fill: var(--secondary);
					}
				}
				/* form */
				> .dxWwaV > .gDNyFh > .gqGMMb > .gLmEHk {
					> .lbHJFk {
						> p {
							color: var(--disabled);
						}
						.BkJon,
						input,
						.fSBIol {
							color: var(--disabled) !important;
						}
					}
				}
				/* quick replies container */
				> .ecmKMO {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 0.5rem;
					/* replies */
					> button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						min-height: 40px;
						padding: 0.4rem 0.75rem;
						border: none;
						border-radius: 999px;
						font-size: 0.8rem;
						background: linear-gradient(
							to right,
							var(--primary) 0%,
							var(--primary-light) 95%
						);
						color: white;
						cursor: pointer;
						box-shadow: 0 0 10px black;
						transition:
							transform 0.15s ease,
							box-shadow 0.15s ease,
							background 0.15s ease;
						text-align: center;
						white-space: normal;
						&:hover {
							background: linear-gradient(
								to right,
								var(--primary) 50%,
								var(--primary-light) 95%
							);
							transform: translateY(-1px);
							box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
						}
					}
				}
				/* first reply */
				> .dxWwaV > .lhNJke > .jFJamk > .bofLBr {
					background: linear-gradient(
						to right,
						var(--primary) 0%,
						var(--primary-light) 95%
					);
					> svg {
						fill: var(--primary-light);
					}
				}
			}
			/* new chat button */
			> .widget-window__BottomStickyContainer-sc-f731b4a1-4 > button {
				background: linear-gradient(
					to bottom right,
					var(--primary) 0%,
					var(--primary-light) 75%
				);
			}
		}
		/* footer */
		> .hfDmTk {
			/* footer container */
			> .hVZyVL {
				/* textarea complete */
				> .bIUkSn {
					/* textarea top */
					> .gpDOLA {
						/* placeholder, text */
						.BkJon,
						textarea {
							color: var(--txt) !important;
						}
					}
					/* textarea bottom */
					> .irYThD {
						/* send button */
						> button {
							background-color: var(--primary);
						}
					}
				}
				/* detail */
				> .jwZjRV > .gIBmhB {
					color: rgb(225, 225, 215);
				}
			}
		}
	}
}

@media (max-width: 1024px) {
	header {
		padding-left: 1rem;
		padding-right: 1rem;
		> * {
			scale: 0.9;
		}
	}
	main {
		> section {
			&#hero {
				> #hero-content {
					> #loc,
					#cta,
					#stats {
						scale: 0.9;
					}
					> #brand {
						> h1 {
							font-size: 2.5rem;
						}
						> p {
							font-size: 1.1rem;
						}
					}
				}
			}
			&#services {
				> #brand {
					> h2 {
						font-size: 2rem;
						white-space: nowrap;
					}
					> p {
						font-size: 1rem;
					}
				}

				> .tech.tech-inspection {
					> #left {
						> #brand {
							> i {
								width: 2.5rem;
								height: 2.5rem;
							}
							> #txt > h3 {
								font-size: 1.5rem;
							}
						}
						> #content {
							font-size: 1rem;
						}
						> #cta > * {
							white-space: nowrap;
						}
					}
					> #right > img {
						height: 25rem;
					}
				}

				> .tech.tech-curage {
					> #right {
						> #brand {
							> i {
								width: 2.5rem;
								height: 2.5rem;
							}
							> #txt > h3 {
								font-size: 1.5rem;
							}
						}
						> #content {
							font-size: 1rem;
						}
						> #cta > * {
							white-space: nowrap;
						}
					}
					> #left > img {
						height: 25rem;
					}
				}

				> .tech.tech-resinage {
					> #left {
						> #brand {
							> i {
								width: 2.5rem;
								height: 2.5rem;
							}
							> #txt > h3 {
								font-size: 1.5rem;
							}
						}
						> #content {
							font-size: 1rem;
						}
						> #cta > * {
							white-space: nowrap;
						}
					}
					> #right > img {
						height: 25rem;
					}
				}
			}
			&#avantages {
				gap: 5rem;
				> #brand {
					> h2 {
						font-size: 2rem;
						white-space: nowrap;
					}
					> p {
						font-size: 1rem;
					}
				}
				> #table {
					max-width: 70vw;
					margin-bottom: 1rem;
				}
			}
			&#intervention {
				gap: 5rem;
				> #brand {
					> h2 {
						font-size: 2rem;
						white-space: nowrap;
					}
					> p {
						font-size: 1rem;
					}
				}
			}
			&#contact {
				gap: 5rem;
				> #brand {
					> h2 {
						font-size: 2rem;
						white-space: nowrap;
					}
					> p {
						font-size: 1rem;
					}
				}
			}
		}
	}
	footer > #container {
		padding-top: 3rem;
		padding-bottom: 3rem;
		> #content {
			> .part-1 {
				max-width: 25rem;
			}
			> .part-2,
			.part-3 {
				> h4 {
					margin-bottom: 1rem;
				}
				> ul {
					gap: 0.75rem;
				}
			}
		}
	}
}
/* add burger */
@media (max-width: 800px) {
	header {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	header > nav,
	header > #infos-contact {
		display: none;
	}

	/* Conteneur du menu déroulant */
	header.burger-open {
		/* on garde le header fixe, mais on ne colle pas nav/infos directement dedans */
	}

	/* On sort le menu en overlay sous le header */
	header.burger-open + .mobile-menu {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	/* Burger toujours à droite */
	header > #burger.displayed {
		display: flex;
		margin-left: auto;
	}
	main {
		> section {
			padding-left: 2.5rem;
			padding-right: 2.5rem;
			&#hero {
				> #hero-content {
					> #loc {
						place-self: center;
					}
					> #brand {
						place-items: center;
						> * {
							white-space: nowrap;
						}
					}
				}
			}
			&#services {
				gap: 5rem;

				> .tech.tech-inspection {
					display: flex;
					flex-direction: column;

					> #right > img {
						height: 20rem;
					}
				}

				> .tech.tech-curage {
					display: flex;
					flex-direction: column-reverse;

					> #left > img {
						height: 20rem;
					}
				}

				> .tech.tech-resinage {
					display: flex;
					flex-direction: column;

					> #right > img {
						height: 20rem;
					}
				}

				> .tech.tech-diagnostic {
					display: flex;
					flex-direction: column-reverse;

					> #left > img {
						height: 20rem;
					}
				}
			}
			&#avantages {
				> #grids > .grid {
					padding: 1rem;
					place-content: center;
					place-items: center;
					gap: 1rem;
					> .icon {
						width: 2.5rem;
						height: 2.5rem;
					}
					> p {
						text-align: center;
					}
				}
			}
			&#intervention {
				> #steps {
					display: flex;
					flex-direction: column;
					> #line {
						display: none;
					}
					> .step {
						&.left {
							> .content {
								padding-right: 0;
								text-align: left;
								> .card {
									margin-right: 0;
									place-items: flex-start;
									> #brand {
										flex-direction: row;
									}
									> ul {
										text-align: left;
										> li {
											flex-direction: row;
										}
									}
								}
							}
						}
						&.right {
							> .content {
								padding-left: 0;
								> .card {
									margin-left: 0;
								}
							}
						}
						> .dot,
						.hide {
							display: none;
						}
					}
				}
			}
			&#contact {
				> #form-content {
					display: flex;
					flex-direction: column;
					place-content: center;
					place-items: center;
				}
			}
		}
	}
	footer {
		> #container {
			> #content {
				display: flex;
				flex-direction: column;
				place-content: center;
				place-items: center;
				> .part-1 {
					display: flex;
					flex-direction: column;
					max-width: 100%;
					width: 100%;
					place-content: center;
					place-items: center;
					> p {
						max-width: 80%;
						text-align: center;
					}
				}
			}
		}
	}
}
@media (max-width: 800px) {
	.mobile-menu {
		position: fixed;
		top: 5rem; /* même hauteur que ton header */
		left: 0;
		right: 0;
		background: var(--primary);
		padding: 1rem 1.5rem;
		display: flex;
		place-content: space-between;
		gap: 1rem;
		transform: translateY(-10px);
		opacity: 0;
		pointer-events: none;
		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
		z-index: 9998;
	}

	.mobile-menu nav,
	.mobile-menu #infos-contact-mobile {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.mobile-menu nav a {
		color: #fff;
		padding: 0.5rem 0;
		transition: all 0.3s;
		&:hover {
			color: var(--secondary);
			text-decoration: underline;
		}
	}

	.mobile-menu #infos-contact-mobile #tel-mobile {
		color: #fff;
		transition: all 0.3s;
		> i {
			margin-right: 0.5rem;
		}
		&:hover {
			color: var(--secondary);
			text-decoration: underline;
		}
	}

	.mobile-menu #infos-contact-mobile #ask-quote-mobile {
		align-self: flex-start;
		transition: all 0.3s;
		&:hover {
			color: var(--secondary);
			text-decoration: underline;
		}
	}
}
@media (max-width: 768px) {
	main {
		> section {
			&#hero > #hero-content > #brand > h1 {
				white-space: wrap;
				text-align: center;
			}
		}
	}
}
@media (max-width: 604px) {
	main {
		& > section {
			&#hero {
				> #hero-content {
					> #brand {
						> * {
							white-space: wrap;
							text-align: center;
						}
					}
					> #stats {
						> .stat {
							> .txt {
								text-align: center;
							}
						}
					}
				}
			}
			&#services {
				> #tech-1 {
					> #right {
						> img {
							height: 15rem;
						}
					}
				}
				> #tech-2 {
					> #left {
						> img {
							height: 15rem;
						}
					}
				}
			}
			&#avantages {
				> #table {
					max-width: 100%;
				}
				> #grids {
					display: flex;
					flex-direction: column;
					place-content: center;
					place-items: center;
				}
			}
		}
	}
}
@media (max-width: 480px) {
	header {
		> #brand {
			> #title {
				> picture > img {
					height: 3rem;
				}
			}
		}
	}
	main {
		> section {
			padding-left: 1rem;
			padding-right: 1rem;
			&#hero {
				> #hero-content {
					padding-top: 2.5rem;
					padding-bottom: 2.5rem;
					> #loc {
						text-align: center;
					}
					> #brand {
						> h1 {
							font-size: 2rem;
						}
						> p {
							font-size: 1rem;
						}
					}
					> #cta {
						flex-direction: column;
						> a {
							text-align: center;
						}
					}
					> #stats {
						width: 100%;
						> .stat {
							scale: 0.9;
						}
					}
				}
			}
			&#services {
				gap: 2.5rem;
				> #brand {
					max-width: 100%;
					> h2 {
						white-space: normal;
					}
				}

				> .tech.tech-inspection,
				> .tech.tech-curage,
				> .tech.tech-resinage,
				> .tech.tech-diagnostic {
					gap: 1rem;

					> #left,
					> #right {
						place-items: center;
						scale: 0.9;

						> #content {
							text-align: center;
						}

						> #cta {
							flex-direction: column;
						}
					}
				}
			}
			&#avantages {
				gap: 2.5rem;
				> #brand {
					max-width: 100%;
					> h2 {
						white-space: wrap;
					}
				}
				> #table {
					scale: 0.9;
					min-width: 410px;
					> .head {
						> .col-1,
						.col-2,
						.col-3 {
							padding: 0.5rem;
							text-align: center;
						}
					}
				}
			}
			&#intervention {
				gap: 2.5rem;
				> #brand {
					max-width: 100%;
					> h2 {
						white-space: wrap;
					}
				}
			}
			&#contact {
				gap: 2.5rem;
				> #brand {
					max-width: 100%;
					> h2 {
						white-space: wrap;
					}
				}
			}
		}
	}
	footer {
		> * {
			scale: 0.9;
		}
		> #container > #end {
			flex-direction: column;
			place-content: center;
			place-items: center;
		}
	}
}
@media (max-width: 375px) {
	main {
		> section {
			&#avantages {
				> #table {
					min-width: 0;
					width: 100%;
					scale: 0.85;
				}
			}

			&#services {
				padding-left: 0.5rem;
				padding-right: 0.5rem;

				> .tech.tech-inspection,
				> .tech.tech-curage,
				> .tech.tech-resinage,
				> .tech.tech-diagnostic {
					gap: 0.75rem;

					> #left,
					> #right {
						scale: 0.85;
					}

					> #left > #cta,
					> #right > #cta {
						width: 100%;
						justify-content: center;
					}
				}
			}

			&#intervention {
				> #steps {
					margin-left: 0;
					margin-right: 0;
					> .step {
						scale: 0.9;
						margin-bottom: 0;
					}
				}
			}

			&#contact {
				> #form-content {
					scale: 0.9;
				}
			}
		}
	}
}
@media (max-width: 360px) {
	main {
		> section {
			&#avantages {
				> #table {
					min-width: 360px;
					scale: 0.8;
				}
			}
		}
	}
}
@media (max-width: 320px) {
	main {
		> section {
			&#avantages {
				> #table {
					min-width: 0;
					width: 100%;
					scale: 0.8;
				}
			}

			&#services {
				padding-left: 0.5rem;
				padding-right: 0.5rem;
				gap: 3rem;

				> #brand > h2 {
					font-size: 1.5rem;
				}

				> .tech.tech-inspection,
				> .tech.tech-curage,
				> .tech.tech-resinage,
				> .tech.tech-diagnostic {
					gap: 0.5rem;

					> #left,
					> #right {
						scale: 0.8;
					}

					> #left > #cta,
					> #right > #cta {
						flex-direction: column;
						width: 100%;
					}
				}
			}

			&#intervention {
				> #steps {
					> .step {
						scale: 0.8;
					}
				}
			}

			&#contact {
				gap: 0;
				> #form-content {
					scale: 0.7;
					margin-top: -5rem;
					margin-bottom: -7.5rem;
				}
			}
		}
	}
}

@keyframes pulse {
	50% {
		opacity: 0.5;
	}
}
@keyframes shine {
	from {
		-webkit-mask-position: 150%;
	}

	to {
		-webkit-mask-position: -50%;
	}
}