@import 'reset.css';
@import 'font.css';

:root {
	--jaune-rgb: 255 214 0;
	--gris-rgb: 60 69 77;
	--gris-dark-rgb: 36 41 45;
	--gris-light-rgb: 160 164 166;
	--blanc-casse-rgb: 242 242 242;
	--blanc-casse2-rgb: 211 215 217;
}

button,
a.btn,
strong.btn {
	background-color: rgb(var(--jaune-rgb));
	color: black;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	padding: 0.3125rem 0.75rem;
	border: none;
	border-radius: 10rem;
	cursor: pointer;

	&:disabled {
		opacity: 0.5;
	}

	&[href="#inscription"]:not(#carte a),
	&.big {
		padding: calc(1rem * 14 / 16) calc(1rem * 25 / 16) calc(1rem * 10 / 16);
		border-radius: 0.5rem;
		font-family: 'Cactus';
		font-weight: 700;
		font-style: italic;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		line-height: 1;
		font-size: 1.5rem;

		:where(&) {
			margin: 0 auto 0.5rem;
		}

		&:not([type="submit"]) {

			@media (min-width: 55rem) {
				padding: 0.75rem 1.5rem 0.5rem;
				font-size: 1.75rem;
			}
		}
	}

	&[href="#inscription"].disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	&[href="#leaderboard"] {
		background-color: white;
		border: 1px solid currentColor;
	}
}



fieldset {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	&:not(.radio-group)>legend {
		font-size: 0.9em;
		font-weight: 500;
	}

	>*+label:not(:has(>input)) {
		padding-top: 0.25rem;
	}

	>label:has(>input[type="checkbox"], >input[type="radio"]) {
		color: rgb(var(--gris-light-rgb));

		&:hover {
			color: rgb(var(--gris-rgb));
		}

		&:has(>:checked) {
			color: rgb(var(--gris-rgb));

			&:has(>input[type="radio"]) {
				font-weight: 500;
			}
		}

		>input {
			margin-right: 0.5rem;
		}
	}

	>.group {
		display: flex;
		gap: 0.5rem;

		>.flex {
			flex: 1;
		}
	}
}

input[type="checkbox"].switch {
	--size: 1.5rem;
	--space: 2px;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	background: rgb(var(--jaune-rgb));
	width: calc(var(--size) * 2);
	height: var(--size);
	padding: 0;
	display: grid;
	place-content: center;
	border: none;
	/* border: 1px solid hsl(var(--foreground) / var(--border-opacity)); */
	border-radius: var(--size);
	margin-right: 0;
	/* overflow: hidden; */
	transition-property: background-color;

	&::before {
		content: "";
		position: absolute;
		display: block;
		left: var(--space);
		top: var(--space);
		background-color: white;
		width: calc(var(--size) - var(--space) * 2);
		height: calc(var(--size) - var(--space) * 2);
		/* border: inherit; */
		border-radius: inherit;
		/* box-shadow: var(--px-1) var(--px-1) calc(6 * var(--px-1)) var(--px-1) hsl(var(--background) / 0.38); */
		transition-property: left, background-color;
	}

	&:checked {
		/* background-color: black; */

		&::before {
			left: calc(100% - var(--size) + var(--space));
			/* background-color: hsl(var(--white) / 60%); */
		}
	}

	label:has(+&:not(:checked)),
	&:checked+label {
		font-weight: 600;
		color: black;
		transition-property: color;
	}

	label:has(+&:checked),
	&:not(:checked)+label {
		font-weight: 600;
		color: rgb(0 0 0 / 0.6);
		transition-property: color;
	}
}

body {
	max-width: 120rem;
	margin: auto;

	font-family: 'Gotham';
	--font-size: calc(1rem * 14 / 16);
	font-size: var(--font-size);
	line-height: 1.4;
	text-align: left;
	color: black;
	background-color: white;

	>nav {
		position: sticky;
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 1rem;
		top: 0px;
		width: 100%;
		height: 3.5rem;
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem;
		background-color: rgb(var(--gris-dark-rgb));
		z-index: 1000;

		>a {
			margin: 0;

			&:nth-of-type(2) {
				grid-column-start: 3;
			}

			&:nth-of-type(3) {
				grid-column-start: 4;
			}

			>img {
				height: 2rem;
				width: auto;
			}
		}

		&:has(>a:nth-of-type(3)) {
			grid-template-columns: auto 1fr auto auto;
		}
	}

	@media (min-width: 55rem) {
		--font-size: 1rem;
		font-size: var(--font-size);

		>nav {
			height: 4rem;
			padding: 0 2rem;
		}
	}

	@media (max-width: 38rem) {
		>nav:has(>a:nth-of-type(3)) {
			grid-template-columns: auto 1fr auto;
			gap: 0;
			padding: 0 0.5rem;

			>a {
				&:nth-of-type(2) {
					display: none;
				}
			}
		}
	}


	h2 {
		font-family: 'Cactus';
		font-weight: 700;
		font-style: italic;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: 3.75rem;
		line-height: 1;
		padding-bottom: 0.5rem;

		@media (min-width: 55rem) {
			font-size: 4.75rem;
		}
	}

	p {
		margin-bottom: 0.5rem;
	}

	small {
		font-size: 0.75em;
	}

	/* Form elements */
	fieldset {
		border: none;

		>legend {
			display: block;
			float: left;
		}
	}

	input:not([type="radio"], [type="checkbox"]),
	select {
		padding: 0.5rem 1rem;
		border: 1px solid rgb(var(--gris-light-rgb));
		border-radius: 0.25rem;
		background: white;

		&::placeholder {
			accent-color: rgb(var(--gris-light-rgb));
			color: rgb(var(--gris-light-rgb));
		}
	}

	:is(input, select).invalid {
		border-color: red;
	}


	/* Dialog */
	dialog {
		opacity: 0;
		transition-property: opacity;
		width: min(90%, 45rem);
		margin: auto;
		padding: 2.5rem 1rem;
		position: fixed;
		inset: 0;
		border: none;
		background-color: rgb(var(--blanc-casse-rgb));
		border-radius: 1.25rem;
		padding: 2rem 1rem;
		overflow: auto;

		&::backdrop {
			background: black;
			opacity: 0.4;
		}

		&[open] {
			opacity: 1;
		}

		>button.close {
			position: absolute;
			top: 0.5rem;
			right: 0.5rem;
			width: 2rem;
			height: 2rem;
			background: transparent;
			border: none;
			font-size: 1.5rem;
			cursor: pointer;
			padding: 0;
		}

		@media (min-width: 55rem) {
			padding: 2.5rem;
			background-color: white;

			>button.close {
				top: 1rem;
				right: 1rem;
			}
		}
	}

	button#leaderboard-more-infos {
		position: absolute;
		right: 2.5rem;
	}


	nav.pagination {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding-top: 1rem;
	}

	>header {
		--padding-bottom: 6rem;

		position: relative;
		text-align: center;
		background-image: url('/img/bg/header-mobile.webp');
		background-size: cover;
		background-position: 100% 20%;
		padding-top: 6rem;
		padding-bottom: var(--padding-bottom);

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 6rem;
			background-color: linear-gradient(to bottom, rgb(var(--gris-dark-rgb)), transparent);
		}

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc(var(--padding-bottom) + 3rem);
			background-color: linear-gradient(to top, rgb(var(--gris-dark-rgb)), transparent);
		}

		>h1 {
			>img {
				width: min(60%, 23.25rem);
				height: auto;
			}

			+p {
				font-family: 'Cactus';
				font-weight: bold;
				font-style: italic;
				line-height: 1;
				text-transform: uppercase;
				letter-spacing: 0.04em;
				font-size: clamp(1.5rem, 7vw, 2.5rem);
				color: white;
				padding-top: 1rem;

				>strong {
					display: block;
					font-weight: inherit;
					color: rgb(var(--jaune-rgb));
				}
			}
		}

		&:has(+main>#top-blocks) {
			--padding-bottom: clamp(4rem, 20vw, 20rem);
		}

		>a[href="#inscription"] {
			position: absolute;
			right: 1rem;
			bottom: calc(100% + 0.75rem);
		}

		@media (min-width: 55rem) {
			background-image: url('/img/bg/header.webp');
			background-position: 80% center;
			padding-top: 2rem;

			>a[href="#inscription"] {
				right: 2rem;
				bottom: calc(100% + 1rem);
			}
		}
	}

	>main {
		>#top-blocks {
			position: relative;
			max-width: 74rem;
			margin: auto;
			margin-top: calc(-1 * clamp(3rem, 15vw, 15rem));
			padding: 0 1rem 2.5rem;
			display: grid;
			gap: 1rem;

			>li {
				background-color: rgb(var(--jaune-rgb));
				padding: 2.5rem 1rem;
				text-align: center;
				border-radius: 1.2rem;
				container-type: inline-size;

				>h2 {
					font-size: clamp(2rem, 5vw, 3rem);
				}

				>small {
					padding-top: 0.5rem;
				}


				>ul.epreuves {
					display: grid;
					grid-template-columns: 1fr 1fr;
					width: 17rem;
					margin: auto;
					gap: 0.5rem;
					text-transform: uppercase;
					font-weight: bold;
					padding-top: 1rem;

					>li {
						text-align: left;

						&::before {
							content: url('/img/icon/checked.svg');
							display: inline-block;
							vertical-align: sub;
							width: 1rem;
							height: 1rem;
							margin-right: 0.5rem;
						}
					}
				}

				>ul.recompenses {
					display: flex;
					flex-direction: column;
					width: 18rem;
					margin: auto;
					gap: 0.5rem;
					text-transform: uppercase;
					font-weight: bold;
					padding-top: 0.5rem;

					>li {
						text-align: left;

						&::before {
							content: url('/img/icon/burning.svg');
							display: inline-block;
							vertical-align: sub;
							width: 1rem;
							height: 1rem;
							margin-right: 0.5rem;
						}
					}
				}

				&.finale {
					>time {
						display: block;
						width: fit-content;
						background-color: rgb(var(--gris-dark-rgb));
						color: white;
						padding: 0.5rem 1rem 0.375rem;
						border-radius: 0.5rem;
						font-family: 'Cactus';
						font-weight: 700;
						font-style: italic;
						text-transform: uppercase;
						letter-spacing: 0.04em;
						font-size: 1.5rem;
						line-height: 1;
						margin: 0 auto 0.5rem;

						@media (min-width: 55rem) {
							padding: 0.75rem 1.5rem 0.5rem;
							font-size: 2rem;
						}
					}
				}

				&.countdown {
					color: white;
					container-type: inline-size;
					background-image: url('/img/bg/countdown-mobile.webp');
					background-size: cover;
					padding: 5.5rem 1.5rem 5rem;

					>h2 {
						color: rgb(var(--jaune-rgb));
					}

					>p {
						font-weight: bold;
						max-width: 40rem;
						margin-left: auto;
						margin-right: auto;
					}

					>ul {
						display: grid;
						grid-template-columns: 1fr 1fr;
						column-gap: 1rem;
						row-gap: 1.2rem;
						width: 9.75rem;
						margin: auto;
						padding-top: 1rem;

						>li {
							position: relative;
							font-family: 'Cactus';
							font-weight: 900;
							font-style: italic;
							text-transform: uppercase;
							letter-spacing: 0.04em;
							font-size: 3.75rem;
							line-height: 1;

							&::before {
								content: attr(data-unit);
								display: block;
								font-family: 'Gotham';
								font-size: calc(1rem * 11 / 16);
								line-height: 1.4;
								font-weight: normal;
								font-style: normal;
								text-transform: uppercase;
								letter-spacing: 0;
								padding-bottom: 0.25rem;
								color: rgb(var(--gris-light-rgb));
								text-shadow: 0 0 0.25rem rgb(var(--gris-dark-rgb));
							}

							&::after {
								content: '';
								position: absolute;
								display: block;
								height: 100%;
								width: 0.125rem;
								background-color: rgb(var(--jaune-rgb));
								right: 0;
								bottom: 0;
								transform-origin: left bottom;
								transform: rotate(13.2deg);
							}

							&:nth-of-type(2n)::after {
								display: none;
							}
						}
					}

					a[href="#inscription"] {
						margin-top: 0.75rem;
					}

					@media (min-width: 35rem) {
						background-image: url('/img/bg/countdown.webp');
						background-position: 80% 0%;
						padding: 4.5rem 2rem;

						>ul {
							grid-template-columns: 1fr 1fr 1fr 1fr;
							width: 25rem;
							padding-top: 1.5rem;
							column-gap: 1.5rem;

							>li {
								font-size: 4.75rem;

								&:nth-of-type(2)::after {
									display: block;
								}
							}
						}
					}
				}
			}

			@media (min-width: 55rem) {
				grid-template-columns: 1fr 1fr;
				gap: 2.5rem;
				padding-bottom: 5rem;

				>li>ul.epreuves {
					padding-top: 2rem;

					p:has(+ &) {
						padding-top: 1rem;
					}
				}

				>li.countdown {
					grid-column: span 2;
				}
			}
		}

		>aside {
			padding: 1.5rem 1rem 3rem;
			text-align: center;
			background-color: rgb(var(--gris-dark-rgb));
			color: white;

			>a.block {
				display: block;
				max-width: 35rem;
				padding: clamp(1rem, 4%, 2rem) clamp(1rem, 5%, 2.5rem);
				text-align: left;
				margin: auto;
				background-color: rgb(var(--gris-rgb));
				border-radius: 0.5rem;
				text-decoration: none;

				>h2 {
					font-size: 1.5rem;
					font-weight: bold;
					line-height: 1.2;

					>strong {
						display: block;
						font-weight: inherit;
						color: rgb(var(--jaune-rgb));
					}
				}
			}

			&#app {
				>p {
					padding-bottom: 1rem;
				}

				>a.block {
					background-image: url('/img/bg/app.webp');
					background-position: calc(50% + 9rem) 100%;
				}
			}

			&#inscription-club>a.block {
				background-image: linear-gradient(120deg, rgb(var(--gris-rgb)), rgb(var(--gris-rgb) / 0) calc(30% + 10em)),
					url('/img/bg/club.webp');
				background-size: cover;
			}

			@media (min-width: 55rem) {
				padding-top: 2.5rem;
				padding-bottom: 5rem;

				&#app {
					display: none;
				}
			}
		}

		>ol,
		>section>ol {
			counter-reset: element-counter;

			>li {
				position: relative;
				flex: 1;
				padding: 20vw 1rem;
				text-align: center;
				color: white;
				background-size: cover;

				&::before {
					--size: 2em;
					counter-increment: element-counter;
					content: counter(element-counter);
					display: block;
					margin: auto;
					width: var(--size);
					height: var(--size);
					padding-top: calc(var(--size) / 4);
					color: rgb(var(--jaune-rgb));
					font-size: 0.63em;
					font-weight: 600;
					border: 0.1em solid;
					border-radius: 50%;
					margin-bottom: calc(var(--size) / 4);
				}
			}

			&#phases>li,
			>li::before,
			>li>h2 {
				font-family: 'Cactus';
				font-weight: 900;
				font-style: italic;
				text-transform: uppercase;
				letter-spacing: 0.04em;
				line-height: 1;
				font-size: clamp(2rem, 15vw, 4rem);
				text-shadow: 0 0 0.25rem rgb(var(--gris-dark-rgb));
			}

			&#phases {
				>li {

					&:nth-of-type(1) {
						background-image: url('/img/bg/step-1-mobile.webp');
					}

					&:nth-of-type(2) {
						background-image: url('/img/bg/step-2-mobile.webp');
					}

					&:nth-of-type(3) {
						background-image: url('/img/bg/step-3-mobile.webp');
					}
				}
			}

			&:is(#epreuves>ol)>li {
				overflow: hidden;

				&.vitesse {
					background-image: url('/img/bg/epreuve-vitesse.webp');
					background-position: 50% 0%;
				}

				&.force {
					background-image: url('/img/bg/epreuve-force.webp');
					background-position: 0% 50%;
				}

				&.resistance {
					background-image: url('/img/bg/epreuve-resistance.webp');
					background-position: 50% 0%;
				}

				&.intensite {
					background-image: url('/img/bg/epreuve-intensite.webp');
					background-position: 0% 50%;
				}

				&::after {
					--text-opacity: 1;
					--bg-opacity: 0;
					content: "Plus d'informations";
					display: flex;
					flex-direction: column;
					justify-content: end;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					padding: 1rem;
					color: rgb(255 255 255 / var(--text-opacity));
					background-color: rgb(0 0 0 / var(--bg-opacity));
					text-shadow: 0 0 0.25rem rgb(var(--gris-dark-rgb) / var(--text-opacity));
					text-decoration: underline;
					transition-property: color, background-color;
				}

				>p {
					position: absolute;
					font-weight: bold;
					left: 0;
					width: 100%;
					padding: 0.5rem 1rem;
					opacity: 0;
					z-index: 5;
					pointer-events: none;

					margin: auto;

					&:first-of-type {
						bottom: 100%;
						transition-property: bottom, opacity;
					}

					&:last-of-type {
						top: 100%;
						transition-property: top, opacity;
					}
				}

				&:hover {
					&::after {
						--text-opacity: 0;
						--bg-opacity: 0.6;
					}

					>p {
						opacity: 1;

						&:first-of-type {
							bottom: 50%;
						}

						&:last-of-type {
							top: 50%;
						}
					}
				}
			}

			@media (min-width: 40rem) {
				display: flex;

				>li {
					flex: 1;
					padding: 10vw 1rem;

					&::before {
						margin-bottom: 1.5rem;
					}
				}

				&#phases {
					>li {
						font-size: clamp(2rem, 5vw, 4rem);

						&:nth-of-type(1) {
							background-image: url('/img/bg/step-1.webp');
						}

						&:nth-of-type(2) {
							background-image: url('/img/bg/step-2.webp');
						}

						&:nth-of-type(3) {
							background-image: url('/img/bg/step-3.webp');
						}
					}
				}

				&:is(#epreuves>ol)>li {

					&::before,
					&>h2 {
						font-size: clamp(1.5rem, 3vw, 3rem);
					}
				}
			}
		}

		>#epreuves {
			padding-top: 1rem;

			>h2 {
				padding: 1rem;
				max-width: 74rem;
				margin: auto;
			}
		}

		>#partenaires {
			padding: 3rem 1rem;

			>h2 {
				text-align: center;
				font-size: 1.875rem;
			}

			>nav {
				display: flex;
				justify-content: center;
				gap: 1rem;
				padding-top: 1.5rem;
				flex-wrap: wrap;

				>a {
					padding: 0.75rem 1rem;
					border: 1px solid rgb(var(--gris-dark-rgb));
					border-radius: 0.5rem;
					background-color: transparent;
					transition-property: background-color;

					&.square {
						padding: 0.5rem 1rem;
					}

					&:hover {
						background-color: rgb(var(--blanc-casse-rgb));
					}
				}
			}
		}

		>#carte {
			padding: 3rem 1rem;
			background-color: rgb(var(--blanc-casse-rgb));

			>dialog>ul {
				display: flex;
				flex-direction: column;
				list-style-type: disc;
				padding-left: 1rem;
				gap: 0.5rem;

				>li>time {
					font-weight: bold;

					&::after {
						content: " : ";
					}
				}
			}

			>form {
				position: relative;
				padding-top: 1.5rem;

				>label {
					display: block;
					padding-bottom: 0.5rem;
				}

				>input {
					width: 100%;
					padding: 0.5rem 1rem;
					padding-right: 3rem;
					border: 1px solid rgb(var(--gris-light-rgb));
					border-radius: 0.25rem;
					background: white;

					&::placeholder {
						color: rgb(var(--gris-light-rgb));
					}
				}

				>button {
					position: absolute;
					right: 0.25rem;
					bottom: 0.25rem;
				}
			}

			>ul {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				height: 70vh;
				overflow: auto;
				padding: 1rem;
				padding-top: 0.25rem;
				margin-top: 0.75rem;
				margin-left: -1rem;
				margin-right: -1rem;
				margin-bottom: -1rem;

				>li {
					padding: 1.5rem 1rem 1rem;
					background-color: white;
					border: 1px solid white;
					border-radius: 1.25rem;
					box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 0.15);

					&.active {
						border-color: rgb(var(--gris-dark-rgb));
						order: -1;
					}

					>h3 {
						font-size: 1.6em;
						margin-bottom: 1rem;

						&::before {
							content: "Fitness Park ";
						}
					}

					>time,
					>.adresse {
						position: relative;
						padding-left: 1.5rem;

						&::before {
							content: "";
							position: absolute;
							display: block;
							width: 1rem;
							height: 1rem;
							background-image: url(../img/icon/calendar.svg);
							top: 0.125rem;
							left: 0;
						}
					}

					>time {
						display: block;
						font-weight: bold;
						margin-bottom: 0.5rem;
					}

					>.adresse {
						&::before {
							background-image: url(../img/icon/pin.svg);
						}

						>small {
							padding-top: 0.25rem;
							display: block;
							font-style: italic;
						}

						>a {
							margin-top: 0.5rem;
							display: block;
							width: fit-content;
						}
					}

					>a.btn {
						display: block;
						width: fit-content;
						margin: 1.5rem auto 0;
					}
				}
			}

			>aside {
				display: none;
			}

			@media (min-width: 55rem) {
				display: grid;
				grid-template-columns: repeat(2, min(34.5rem, calc(50% - 1rem)));
				grid-template-rows: repeat(4, auto) 1fr;
				justify-content: center;
				column-gap: 2rem;

				>* {
					grid-column-start: 1;
					grid-column-end: -1;
				}

				>a {
					justify-self: start;
				}

				>form {
					grid-column-end: 1;
					position: relative;
				}

				>ul {
					position: relative;
					height: min(51vw, 39.75rem);
					grid-column-end: 1;

					>li {
						padding: 2rem 2.5rem;

						>a.btn {
							margin-left: 0;
						}
					}
				}

				>aside {
					--lat-offset: 321%;
					--lon-offset: -12.5%;
					--ratio: 7.1%;
					--zoom: 1;
					--paris-lat-offset: -27%;
					--paris-lon-offset: 4.5%;
					display: block;
					position: relative;
					padding: 5%;
					grid-column-start: 2;
					grid-row: 4 / span 2;
					align-self: start;
					background-color: rgb(var(--gris-light-rgb));
					border-radius: 1.25rem;
					overflow: hidden;

					&::before,
					&::after {
						content: "";
						display: block;
						aspect-ratio: 487 / 528;
						width: 100%;
						background-image: url(../img/map/france.svg);
					}

					&::before {
						background-size: calc(100% * var(--zoom));
						background-position: calc(50% + var(--paris-lon-offset)) calc(50% + var(--paris-lat-offset));
						transition-property: background-size;
					}

					&::after {
						margin-top: 10%;
						aspect-ratio: 482 / 84;
						background-image: url(../img/map/drom-com.svg);
						background-size: auto 100%;
						background-position: center;
						transition-property: opacity;
						transform: scale(1.25);
						transform-origin: bottom center;
					}

					>ul {
						>li {
							--scale: 0.8;
							position: absolute;
							aspect-ratio: 34 / 44;
							width: 2rem;
							top: calc(50% + var(--paris-lat-offset) + var(--zoom) * (var(--lat-offset) - var(--paris-lat-offset) + -1 * var(--ratio) * var(--lat)));
							left: calc(50% + var(--paris-lon-offset) + var(--zoom) * (var(--lon-offset) - var(--paris-lon-offset) + var(--ratio) * var(--lon)));
							background-image: url(../img/map/pin.svg);
							background-size: contain;
							shape-outside: url(../img/map/pin.svg);
							transform-origin: center bottom;
							transform: translate(-50%, -100%) scale(var(--scale));
							transition-property: opacity, transform, top, left;
							cursor: pointer;
							z-index: 1;

							&:hover,
							&.active {
								--scale: 1;
								z-index: 100;
							}

							/* DROM-COM */
							&[style*="--lat: 14.5"] {
								top: 91%;
								left: 50.5%;
							}

							&[style*="--lat: 14.6"] {
								top: 89.5%;
								left: 48.5%;
							}

							&[style*="--lat: 16.23"] {
								top: 87.5%;
								left: 79%;
							}

							&[style*="--lat: 16.27"] {
								top: 86.8%;
								left: 80.6%;
							}

							&[style*="--lat: 4."] {
								top: 85%;
								left: 21%;
							}
						}
					}

					>button {
						--background-opacity: 0;
						--vertical-offset: 50%;
						position: absolute;
						width: 11%;
						aspect-ratio: 1;
						top: -1rem;
						left: 54.5%;
						background-color: rgb(var(--jaune-rgb) / var(--background-opacity));
						border: 1px solid rgb(var(--jaune-rgb));
						transform-origin: center center;
						transform: translate(-50%, 238%);
						transition-property: background-color;
						z-index: 2;

						&::before {
							content: "+";
							position: absolute;
							top: 50%;
							left: 50%;
							font-size: 3rem;
							font-weight: bold;
							opacity: 0;
							transform: translate(-50%, -50%);
							transition-property: opacity;
						}

						&:hover {
							--background-opacity: 0.4;

							&::before {
								opacity: 1;
							}
						}
					}

					&.zoom {
						--background-opacity: 0.4;
						--zoom: 11;

						&::after {
							opacity: 0;
						}


						>ul>li {

							&:not([style*="--lat: 4"]),
							&[style*="--lat: 4."] {
								opacity: 0;
								pointer-events: none;
							}
						}

						>button {
							width: 3rem;
							height: 3rem;
							top: 1rem;
							left: 1rem;
							background: rgb(var(--jaune-rgb));
							transform: none;

							&::before {
								content: "\2039";
								opacity: 1;
								top: 42%;
								left: 45%;
							}
						}
					}
				}
			}
		}

		>iframe {
			display: block;
			background-color: black;
			width: 100%;
			max-width: 74rem;
			margin: 3rem auto;
			border: none;
			aspect-ratio: 16 / 9;
		}

		>#edition2023 {
			--v-padding: 3rem;
			--h-padding: 1rem;
			max-width: 74rem;
			margin: auto;
			padding: var(--v-padding) var(--h-padding);

			>h3 {
				text-transform: uppercase;
				border-top: 0.1875rem solid rgb(var(--jaune-rgb));
				margin-top: 1.5rem;
				padding: 0.5rem 0;
				font-size: 1rem;
				font-weight: bold;
			}

			>ul {
				display: flex;
				justify-content: start;
				gap: 1.5rem;
				margin-left: calc(var(--h-padding) * -1);
				width: calc(100% + var(--h-padding) * 2);
				padding-left: inherit;
				padding-right: inherit;
				overflow-x: auto;

				>li {
					>h4 {
						padding-top: 1rem;
						padding-bottom: 0.25rem;
						font-weight: bold;
						text-transform: uppercase;
					}

					>p::before {
						content: "FP ";
					}
				}
			}

			@media (min-width: 55rem) {
				--v-padding: 5rem;

				>h3 {
					margin-top: 2rem;
				}

				>ul {
					gap: 2rem;
				}
			}
		}

		>#openleaderboard {
			background-color: rgb(var(--blanc-casse-rgb));
			padding: 3rem max(1rem, calc((100% - 74rem) / 2));

			>dialog#leaderboard {
				width: min(90%, 60rem);

				>form {
					display: flex;
					flex-direction: column;
					gap: 1.5rem;
					padding: 1rem 0;

					>label {
						position: relative;
						display: block;
						max-width: 30rem;

						>input {
							display: block;
							width: 100%;
							padding: 0.5rem 1rem;
							padding-right: 3rem;
							border: 1px solid rgb(var(--gris-light-rgb));
							border-radius: 0.25rem;
							background: white;

							&::placeholder {
								color: rgb(var(--gris-light-rgb));
							}
						}

						>button {
							position: absolute;
							right: 0.25rem;
							bottom: 0.25rem;
						}
					}
				}

				>section {
					padding-top: 1rem;
					>h3 {
						font-weight: bold;
					}
				}

				>form>fieldset,
				>section>nav.civilite {
					display: flex;
					gap: 0.5rem;
					flex-direction: row;
					align-items: center;

					>label {
						padding-top: 0;
					}

					&:is(nav) {
						padding: 1rem 0;
					}
				}

				div {
					width: 100%;
					overflow-x: auto;

					>table {
						width: 100%;
						min-width: 32rem;
						border-collapse: collapse;
						text-align: center;
						border-spacing: 0;
						border-collapse: separate;
						border-radius: 0.25rem;
						overflow: hidden;

						& [data-name="nom"] {
							text-align: left;
							padding-left: 1.5rem;
						}

						>thead {
							background-color: rgb(var(--gris-dark-rgb));
							color: white;

							& th {
								padding: 0.5rem 0.25rem;
							}
						}

						>tbody {
							>tr {
								background-color: rgb(var(--blanc-casse-rgb));

								&:nth-of-type(2n) {
									background-color: rgb(var(--blanc-casse2-rgb));
								}

								>th {
									font-weight: bold;
									padding: 0.5rem 0.5rem;
								}

								&>td {
									padding: 0.25rem 0.125rem;
									vertical-align: text-top;
								}

								>td[data-name="nom"] {
									>p {
										font-size: 95%;
									}

									>ul {
										display: none;
										font-size: 90%;
										text-transform: uppercase;
										padding-bottom: 0.5rem;

										>li {
											white-space: nowrap;
										}
									}
								}

								>td[data-name="details"]>button {
									text-transform: uppercase;
								}

								&.open {

									>td[data-name="nom"]>ul {
										display: block;
									}

									>td[data-name="details"]>button {
										font-size: 0px;

										&::before {
											content: "Masquer";
											font-size: 13.33px;
										}
									}
								}
							}
						}
					}
				}

				>section>nav.civilite:has(input:not(:checked))~div.homme,
				>section>nav.civilite:has(input:checked)~div.femme {
					display: none;
				}
			}
		}

		>dialog:is(#inscription, #detail-participant) {
			padding: 2.5rem 1rem;

			>form {
				display: flex;
				flex-direction: column;
				gap: 1.5rem;

				>button {
					align-self: center;
				}

				p.error {
					color: red;
					text-align: left;
					font-weight: 500;
					font-size: 85%;
				}
			}

			h2 {
				font-size: 2.5rem;
			}

			>h2,
			>p {
				text-align: center;
			}

			@media (min-width: 55rem) {
				padding: 2.5rem;

				>form {
					gap: 2rem;
				}

				h2 {
					font-size: 3rem;
				}
			}
		}

		>section.base {
			--v-padding: 3rem;
			--h-padding: 1rem;
			max-width: 74rem;
			margin: auto;
			padding: var(--v-padding) var(--h-padding);

			@media (min-width: 55rem) {
				--v-padding: 5rem;
			}
		}
	}

	>footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		padding: 2rem 1rem;
		text-align: center;
		background-color: rgb(var(--gris-dark-rgb));
		color: white;

		>p:first-of-type {
			font-weight: bold;
			text-transform: uppercase;
			margin-bottom: 0;
		}

		>nav {
			display: flex;
			column-gap: 1rem;
			row-gap: 0.5rem;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;

			>a {
				flex-shrink: 0;
			}

			&.social>a {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				background-color: rgb(var(--jaune-rgb));
				color: rgb(var(--gris-dark-rgb));
				width: 1.75rem;
				height: 1.75rem;
				border-radius: 50%;
			}
		}

		@media (min-width: 55rem) {
			padding: 3.5rem 1rem 2rem;
		}
	}
}