.page-template-moto-ecoles-2025 {
	/* colors */
	--c-white: #fff;
	--c-black: #000;
	--c-red: #e30613;
	--c-grey: #f7f7f7;
	--c-grey-2: #f0f0f0;
	--c-grey-3: #e2e2e2;

	/* font sizes */
	--fs-root: 18px;
	--fs-xxl: 3.5rem; /* 64px */
	--fs-xl: 2.25rem; /* 40px */
	--fs-lg: 1.75rem; /* 32px */
	--fs-md: 1rem; /* 18px */
	--fs-sm: .85rem; /* 16px */
	--fs-xs: .75rem; /* 14px */

	@media (width <= 767px) {
		--fs-root: 16px;
		--fs-xxl: 3rem;
		--fs-xl: 2rem;
		--fs-lg: 1.5rem;
		--fs-md: 1rem;
		--fs-sm: .85rem;
		--fs-xs: .75rem;
	}

	/* line height */
	--lh-root: 1.5;
	--lh-alt: 1.25;

	/* font families */
	--ff-common: Ubuntu, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	--ff-alt: Play, var(--ff-common);

	/* radiuses */
	--radius: 30px;

	/* spacing */
	--space-xxl: 5.5rem;
	--space-lg: 3rem;
	--space-md: 1.75rem;
	--space-sm: .85rem;

	/* sizes */
	--w-container: 1136px;

	/* transitions */
	--transition-normal: .2s ease-in-out;

	font: 400 var(--fs-root)/var(--lh-root) var(--ff-common);
	background: var(--c-white);

	img {
		max-width: 100%;
		vertical-align: top;
	}

	sup {
		line-height: normal
	}

	.form-page {
		max-width: none;
	}

	.container {
		max-width: var(--w-container);
		margin-inline: auto;
		padding-inline: var(--space-md);
	}

	.page-image {
		margin-bottom: var(--space-lg);
	}

	/* components */
	.bikes-selection {
		h2 {
			margin-top: var(--space-lg);
			margin-bottom: 0;
			font: 700 var(--fs-xl)/var(--lh-alt) var(--ff-common);
		}
	}

	.selector {
		display: grid;
		gap: var(--space-md);

		@media (width > 767px) {
			grid-template-columns: repeat(6, 1fr);
			grid-template-rows: repeat(2, auto);
			margin-top: 80px;
		}

		.selector-bike {
			display: grid;
			grid-template-columns: auto 1fr auto;
			grid-template-rows: auto 1fr auto;
			background: var(--c-grey);
			padding: var(--space-sm);
			border-radius: var(--radius);
			cursor: pointer;
			transition: var(--transition-normal);

			@media (width <=767px) {
				grid-template-columns: auto 1fr auto;
				grid-template-rows: repeat(4, auto);
			}

			> * {
				pointer-events: none;
			}

			@media (width > 767px) {
				&:nth-of-type(1) {
					grid-area: 1 / 1 / 2 / 4;
				}

				&:nth-of-type(2) {
					grid-area: 1 / 4 / 2 / 7;
				}

				&:nth-of-type(3) {
					grid-area: 2 / 1 / 3 / 3;
				}

				&:nth-of-type(4) {
					grid-area: 2 / 3 / 3 / 5;
				}

				&:nth-of-type(5) {
					grid-area: 2 / 5 / 3 / 7;
				}
			}

			&:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5) {
				.bike-price {
					font-size: 16px;
					strong {
						font-size: var(--fs-lg);
					}
				}
				.selector-picture {
					grid-area: 2 / 1 / 3 / 4;
					img {
						max-width: 80%;
					}
				}
			}

			.selector-model {
				grid-area: 1 / 1 / 2 / 3;
			}

			.selector-picture {
				grid-area: 1 / 1 / 3 / 4;

				@media (width <= 767px) {
					grid-area: 2 / 1 / 3 / 4;
				}

				display: flex;
				justify-content: center;
				align-items: center;

				img {
					object-fit: contain;
					max-width: 70%;
					height: auto;

					@media (width <=767px) {
						max-width: 85%;
					}
				}
			}

			.selector-footer {
				grid-area: 4 / 1 / 5 / 4;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: end;
				padding: 0 1rem 0 0;

				@media (width <= 767px) {
					grid-area: 4 / 1 / 4 / 4;
				}

				> div {
					width: 50%;
				}
			}

			.selector-pictos {
				grid-area: 2 / 3 / 3 / 4;
				display: flex;
				justify-content: end;
				align-items: center;
				padding: 0 1rem 1rem;
			}

			.selector-input {
				grid-area: 1 / 3 / 2 / 4;
				display: flex;
				justify-content: end;
				align-items: start;

				input {
					opacity: 0;
					&:checked {
						~ svg .checked {
							opacity: 1;
							scale: 1;
						}
					}
				}

				svg {
					.checked {
						opacity: 0;
						scale: 1.25;
						transform-origin: center;
						transition: var(--transition-normal);
					}
				}
			}

			&:has(input[type="radio"]:checked) {
				background: var(--c-white);
				box-shadow: 0 4px 4px 0 #00000040;
			}

			.bike-insurance {
				font: 400 var(--fs-xs)/var(--lh-alt) var(--ff-common);
				color: var(--c-black);
				text-align: right;

				strong {
					font-size: 14px;
					font-weight: 700;
				}
			}

			.bike-name {
				background: var(--c-black);
				color: var(--c-white);
				font: 700 var(--fs-lg)/var(--lh-root) var(--ff-alt);
				border-radius: calc(var(--radius) * 2);
				display: inline-block;
				padding-inline: 14px;
				vertical-align: middle;
			}

			.bike-versions {
				@media (width <= 767px) {
					display: inline-block;
					margin-left: 5px;
					vertical-align: middle;
				}

				@media (width > 767px) {
					display: block;
					margin: 8px 14px;
				}
			}

			.bike-price {
				font: 400 20px var(--ff-alt);
				color: var(--c-red);
				display: flex;
				flex-direction: column;
				align-items: start;

				strong {
					font: 700 var(--fs-xl)/0.75 var(--ff-alt);
				}

				.bike-price_details {
					display: flex;
					align-items: center;
				}

				.bike-price_adds {
					font-size: var(--fs-xs);
				}
			}

			.bike-type {
				display: flex;
				flex-direction: column;
				gap: 5px;
			}
		}
	}

	.selector-body-header h2 {
		font: 700 var(--fs-lg)/var(--lh-alt) var(--ff-common);
		margin: 0;
	}

	.bike-showcase {
		margin-top: var(--space-xxl);
	}

	.bike-presentation {
		padding-block: var(--space-xxl);
		background: var(--c-grey);
		overflow-x: hidden;

		.bike-grid {
			@media (width > 767px) {
				grid-template-columns: auto;
				gap: var(--space-md);
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: repeat(3, auto);
			}
		}

		.bike-header {
			display: flex;
			gap: 0 var(--space-lg);
			align-items: flex-end;
			grid-area: 1 / 1 / 2 / 5;

			@media (width <=767px) {
				grid-area: none;
				flex-wrap: wrap;
				align-items: center;
				gap: 0 var(--space-sm);
			}
		}

		.bike-name {
			font: 700 var(--fs-xxl)/var(--lh-root) var(--ff-alt);
			color: var(--c-black);
			color: var(--c-black);
		}

		.bike-capacity {
			font: 400 var(--fs-xxl)/var(--lh-root) var(--ff-alt);
			color: var(--c-black);
		}

		.bike-price {
			font: 400 var(--fs-xxl)/1 var(--ff-alt);
			color: var(--c-red);

			span {
				font-size: var(--fs-lg);
			}

			div {
				font-size: var(--fs-sm);
			}
		}

		.bike-description {
			@media (width > 767px) {
				grid-area: 2 / 1 / 3 / 4;
			}
		}

		.bike-details {
			@media (width > 767px) {
				grid-area: 3 / 1 / 4 / 3;
			}
		}

		.bike-picture {
			pointer-events: none;

			@media (width > 767px) {
				grid-area: 1 / 3 / 4 / 5;
				position: relative;

				img {
					max-width: none;
					max-height: 100%;
					position: absolute;
					bottom: 0;
					translate: -12% 0;
				}
			}
		}

		.smaller & {
			@media (width > 767px) {
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-template-rows: repeat(4, auto);
			}

			.bike-header {
				@media (width > 767px) {
					grid-area: 2 / 1 / 3 / 3;
					flex-wrap: wrap;
					row-gap: 0;
				}
			}

			.bike-picture {
				@media (width > 767px) {
					grid-area: 1 / 3 / 5 / 5;

					img {
						max-height: 165%;
						max-width: 100vw;
						bottom: -20%;
					}
				}
			}

			.bike-description {
				grid-area: 3 / 1 / 4 / 3;
			}
		}
	}

	.version-y-amt {
		padding-block: var(--space-xxl);
		background: var(--c-grey-2);

		img {
			margin: var(--fs-md);
		}

		.y-amt {
			display: flex;
			justify-content: space-between;
			align-items: center;

			@media (width <= 767px) {
				flex-direction: column;
				gap: var(--space-sm);
			}
		}

		.y-amt-column1 {
			white-space: nowrap;
		}

		.y-amt-price {
			font: 400 var(--fs-xl)/var(--lh-root) var(--ff-alt);
			color: var(--c-red);

			span {
				font-size: var(--fs-md);
			}
		}

		.y-amt-title {
			font: 400 var(--fs-lg)/var(--lh-alt) var(--ff-alt);
		}

		.y-amt-text {
			@media (width > 767px) {
				padding-left: var(--space-xxl);
				margin-left: var(--space-xxl);
				border-left: 1px solid rgb(0 0 0 / .3);
			}
		}
		.y-amt-text-sm {
			font: 400 var(--fs-xs)/var(--lh-alt) var(--ff-alt);
		}
	}

	.services {
		margin-block: var(--space-lg);

		h2 {
			margin-bottom: var(--space-lg);
			font: 700 var(--fs-xl)/var(--lh-alt) var(--ff-common);
		}

		.services-grid {
			display: grid;
			gap: var(--space-lg);

			@media (width > 767px) {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		img {
			width: 100%;
			vertical-align: top;
			margin-bottom: var(--space-sm);
		}
	}
}
