/* * {
	border: 1px solid green;
} */

::-webkit-scrollbar {
	width: 0;
}

:root {
	--height-image: 30vh;
	--text: #f6d4dd;
	--text-purple: #ECD9FA;
	--background: #181118;
	--interactive: #351A35;
	--font: 'Poppins', sans-serif;
	--font-bold: 'Heebo', sans-serif;
	--text-shadow-color: #225075;
	--dark-text: #FFD1D9;
}

body {
	background: var(--background);
	padding: 0;
	margin: 0;
	z-index: -1;
}

#card {
	margin: 0;
	padding: 0;
	z-index: -1;
}

body:last-child {
	margin-bottom: 50vh;
}

p {
	font-family: var(--font);
}

#scrollpath {
	position: fixed;
	top: 0;
	right: 0;
	width: 5px;
	height: 100%;
	z-index: 15;
	background: rgba(255, 255, 255, 0.05);
}

#progressbar {
	position: fixed;
	top: 0;
	right: 0;
	width: 5px;
	height: 0;
	z-index: 15;
	background: linear-gradient(to top, #008aff, #00ffe7);
	animation: animate 5s linear infinite;
}

#progressbar:before,
#progressbar:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, #008aff, #00ffe7);
	filter: blur(10px);
}

#progressbar:after {
	filter: blur(30px);
}

@keyframes animate {
	0%,
	100% {
		filter: hue-rotate(0deg);
	}
	50% {
		filter: hue-rotate(360deg);
	}
}


/* -------------------------------------------------------------------------------- */

.parallax {
	height: 400vh;
	width: 100%;
}

.bande {
	width: 100%;
	height: 25vh;
	background-color: var(--background);
	position: relative;
	overflow: hidden;
}

.bande p {
	font-size: 15vh;
	position: absolute;
	top: -14vh;
	color: var(--text);
}

.jaime {
	left: 110%;
	width: 440vh;
}

.omg {
	right: 115vh;
	width: 300vh;
}

.corps section {
	width: 100%;
	height: 50vh;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}

.corps {
	position: relative;
	display: flex;
	flex-direction: column;
}

.ciel {
	width: 120vh;
	height: auto;
	object-fit: cover;
	transform: scale(2);
}

.avion {
	height: 12vh;
	transform: rotate(30deg);
	position: absolute;
	top: -12vh;
	left: -20%;
	filter: sepia(20%);
}

.city {
	width: 130vh;
	height: auto;
	object-fit: cover;
	position: absolute;
	bottom: -30vh;
}

.parallax-content p {
	color: var(--text-purple);
	font-size: 5vh;
	z-index: 0;
	position: absolute;
	text-shadow:
	2vh 2vh 1vh rgba(11, 64, 121, 0.5),
	0 0 1vh rgba(11, 64, 121, 0.5),
	0 0 1vh rgba(11, 64, 121, 0.5),
	0 0 1vh rgba(11, 64, 121, 0.5);
}

.bienvenue {
	top: 52vh;
	font-family: var(--font-bold);
}

.parallax-m {
	text-align: center;
	color: black;
}


/* -------------------------------------------------------------------------------- */

img {
	height: var(--height-image);
	width: auto;
	padding: 0;
	margin: 0;
}

.troisd {
	background-color: var(--pink);
	height: 50vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: -4;
}

.troisd .ville .titre {
	height: 40vh;
	margin-top: 10vh;
	font-size: 7vh;
	font-weight: 900;
	text-shadow:
	2vh 2vh 1vh rgba(104, 104, 104, 0.5),
	0 0 1vh rgba(104, 104, 104, 0.5),
	0 0 1vh rgba(104, 104, 104, 0.5),
	0 0 1vh rgba(104, 104, 104, 0.5);
	position: absolute;
	transform: translateY(var(--ty-titre));
	text-align: center;
}

.troisd .ville p {
	position: sticky;
	top: 20vh;
	padding-bottom: 2vh;
	margin: 0;
	text-decoration: none;
	z-index: 0;
	font-family: var(--font-bold);
	color: var(--text);
	z-index: 0;
}

.ville {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	object-fit: cover;
	overflow: hidden;
	align-items: center;
	z-index: 0;
}

.ville img {
	position: absolute;
}

video {
	z-index: -5;
	position: absolute;
	height: auto;
	width: 100%;
	filter: blur(3px);
}

.video-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.brouillard {
	z-index: 0;
}

.avant {
	width: 100%;
	height: var(--height-image);
	display: flex;
	margin-top: calc(25vh - var(--height-image));
	position: relative;
}

.avant img {
	filter: drop-shadow(0 0 2vh #333) sepia(25%);
}

.avant .vu,
.avant .vd {
	filter:
	drop-shadow(0 0 1vh #000000),
	drop-shadow(0 0 1vh #000000),
	drop-shadow(0 0 1vh #000000),
	drop-shadow(0 0 1vh #000000);
}

.avant .vmu img,
.avant .vmd img {
	filter: blur(1px) drop-shadow(0 0 2vh #333) sepia(25%);
}

.arriere {
	width: 100%;
	height: 50%;
	display: flex;
	position: relative;
}

.arriere img {
	filter: drop-shadow(0 0 1vh #333) blur(2px) sepia(15%);
	opacity: 0.9;
}

.ny-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ny {
	height: auto;
	width: 126vh;
	margin-top: 3vh;
	margin-left: calc(-126vh / 2 + 50%);
	filter: blur(3px);
	opacity: 0.8;
	z-index: -3;
	transform: translate(calc(var(--tx)), calc(var(--ty)));
}

.vu {
	z-index: 4;
	margin-left: -12%;
	margin-top: 4vh;
	transform: translate(calc(-1.2 * var(--tx)), calc(-1.2 * var(--ty)));
}

.vmu {
	z-index: 2;
	margin-left: calc(50% - 32vh);
	margin-top: 8vh;
	filter: blur(1px);
	transform: translate(calc(-0.5 * var(--tx)), calc(-0.5 * var(--ty)));
}

.vmd {
	z-index: 1;
	margin-left: calc(50% + 2vh);
	margin-top: 2.5vh;
	filter: blur(1px);
	transform: translate(calc(-0.5 * var(--tx)), calc(-0.5 * var(--ty)));
}

.vd {
	z-index: 3;
	height: 35vh;
	margin-left: calc(100% - 35vh + 3vh);
	margin-top: -2vh;
	transform: translate(calc(-1 * var(--tx)), calc(-1 * var(--ty)));
}

.vfu {
	z-index: -2;
	height: 50vh;
	width: auto;
	margin-top: 0vh;
	margin-left: -15vh;
	transform: translate(calc(0.3 * var(--tx)), calc(0.3 * var(--ty)));
}

.vfd {
	z-index: -1;
	margin-left: calc(100% - 25vh);
	margin-top: 15vh;
	transform: translate(calc(0.35 * var(--tx)), calc(0.35 * var(--ty)));
}

.vfd img {
	height: 40vh;
	width: 40vh;
}


/* -------------------------------------------------------------------------------- */

.zone-card {
	height: 50vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 50vh;
	overflow: hidden;
}

.zone-card .nature {
	width: 100%;
	height: auto;
	object-fit: cover;
	position: absolute;
	top: 0;
	margin: 0;
	left: 0;
	padding: 0;
	filter: blur(0.5vh) brightness(70%);
}

.gravity {
	width: 30vh;
	height: 40vh;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}

.card {
	transition: all .1s ease;
	width: 25vh;
	height: 35vh;
	transform: rotateY(var(--rx)) rotateX(var(--ry));
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	box-shadow: 0 0 3vh 1vh rgb(37, 47, 36);
	border-radius: 1vh;
	border: 1px solid rgb(110, 110, 110);
}

.card-image {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: 100%;
	object-fit: cover;
	filter: brightness(80%);
}

.glare {
	transition: transform .1s ease;
	width: 0;
	height: 0;
	position: absolute;
	box-shadow: 0 0 5vh 6vh rgba(255, 244, 232, 0.288);
	border-radius: 50%;
	z-index: 2;
}


/* -------------------------------------------------------------------------------- */

.icone {
	height: 50vh;
	width: 100%;
	display: flex;
	position: relative;
	align-items: center;
	z-index: 0;
}

.icone img {
	width: 90%;
	height: 100%;
}

.black {
	height: 100%;
	width: 100%;
	background-color: #000000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 1;
}

.black-container {
	width: 45vh;
	height: 45vh;
	margin: 1vh;
}

.white {
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
}

.white-show {
	z-index: 1;
}

.white-container {
	width: 45vh;
	height: 45vh;
	margin: 1vh;
}

.btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6vh;
	height: 6vh;
	margin-left: 2vh;
	z-index: 1;
}

.abc,
.awc {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}

.abc {
	border: .3vh solid white;
}

.awc {
	border: .3vh solid black;
}

.awc-show {
	z-index: 10;
}

.abc img,
.awc img {
	width: auto;
	height: 83%;
	position: absolute;
}


/* -------------------------------------------------------------------------------- */

.liquid {
	width: 100%;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #183954;
}

.liquid p {
	position: absolute;
	font-size: 35vw;
	font-family: var(--font-bold);
}

.liquid p:nth-child(1) {
	color: #ffffff;
	text-shadow:
	-2px 2px 0 var(--text-shadow-color),
	-3px 3px 0 var(--text-shadow-color),
	-4px 4px 0 var(--text-shadow-color),
	-5px 5px 0 var(--text-shadow-color),
	-6px 6px 0 var(--text-shadow-color),
	-7px 7px 0 var(--text-shadow-color),
	-8px 8px 0 var(--text-shadow-color),
	-18px 18px 0 rgba(0, 0, 0, 0.5),
	-18px 18px 50px rgba(0, 0, 0, 1);
}

.liquid p:nth-child(2) {
	color: #2196f3;
	opacity: 0.5;
	animation: waterd 4.5s ease-in-out infinite;
}

.liquid p:nth-child(3) {
	color: #2196f3;
	opacity: 0.5;
	animation: waterd 5.5s ease-in-out infinite;
}

.liquid p:nth-child(4) {
	color: #2196f3;
	animation: wateru 5s ease-in-out infinite;
}

@keyframes waterd {
	0%,
	50%,
	100% {
		clip-path: polygon(0 49%, 11% 48%, 24% 49%, 36% 53%, 46% 59%,
		58% 63%, 68% 66%, 78% 66%, 90% 64%, 100% 60%, 100% 99%, 0% 99%);
	}
	25%,
	75% {
		clip-path: polygon(0 56%, 11% 61%, 23% 64%, 38% 62%, 49% 58%,
		57% 54%, 66% 49%, 77% 46%, 89% 46%, 100% 48%, 100% 99%, 0% 99%);
	}
}

@keyframes wateru {
	0%,
	50%,
	100% {
		clip-path: polygon(0 44%, 11% 45%, 21% 47%, 31% 51%, 43% 57%,
		54% 63%, 66% 65%, 79% 64%, 91% 61%, 100% 55%, 100% 100%, 0 100%);
	}
	25%,
	75% {
		clip-path: polygon(0 64%, 10% 66%, 21% 66%, 32% 63%, 43% 57%,
		53% 52%, 64% 48%, 77% 46%, 88% 47%, 100% 50%, 100% 100%, 0 100%);
	}
}


/* -------------------------------------------------------------------------------- */

.verre {
	height: 50vh;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(20, 20, 40);
	overflow: hidden
}

.verre img {
	width: 100%;
	height: auto;
	position: absolute;
	filter: brightness(80%);
}

.panneau {
	height: 35vh;
	width: 20vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 3vh;
	backdrop-filter: blur(var(--panneau-blur)) brightness(120%);
	-webkit-backdrop-filter: blur(var(--panneau-blur)) brightness(120%);
	box-shadow:
	1px 1px rgba(0, 0, 0, 0.1),
	0 1px rgba(0, 0, 0, 0.1),

	-1px -1px rgba(255, 255, 255, 0.5),
	0 -1px rgba(255, 255, 255, 0.5),

	1vh 2.5vh 1.5vh rgba(0, 0, 0, 0.4),

	inset 0.4vh 1vh 1.5vh rgba(255, 255, 255, 0.2),
	inset -0.4vh -1vh 1.5vh rgba(0, 0, 0, 0.3);
}

.panneau p {
	color: rgba(255, 255, 255, 0.4);
	padding: 0;
	margin: 0;
}

.glassmorphism {
	top: 2vh;
	font-size: 2vh;
	text-shadow:
	-0.2vh -0.5vh 1vh rgba(0, 0, 0, 0.6),
	0.2vh 0.5vh 1vh rgba(255, 255, 255, 0.4);
	position: absolute;
}

.boule {
	width: 4vh;
	height: 4vh;
	border-radius: 50%;
	top: 14vh;
	position: absolute;
	background: linear-gradient(156.4deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.4));
	box-shadow:
	-1px -1px rgba(255, 255, 255, 0.5),
	0 -1px rgba(255, 255, 255, 0.5),
		
	1px 1px rgba(0, 0, 0, 0.05),
	0 1px rgba(0, 0, 0, 0.05),

	0.2vh 0.5vh 1vh rgba(0, 0, 0, 0.3),
	0.4vh 1vh 1.5vh 0.5vh rgba(0, 0, 0, 0.3),
	0.6vh 1.5vh 1.5vh -0.5vh rgba(0, 0, 0, 0.2),

	1vh 2vh 1.5vh -0.5vh rgba(0, 0, 0, 0.2),
	1.25vh 3.125vh 1.7vh -0.7vh rgba(0, 0, 0, 0.2),
	1.5vh 3.75vh 2vh -1vh rgba(0, 0, 0, 0.2),
	2vh 5vh 2.5vh -1.5vh rgba(0, 0, 0, 0.3),

	-0.2vh -0.5vh 1vh rgba(0, 0, 0, 0.3),
	-0.4vh -1vh 1.5vh rgba(0, 0, 0, 0.3),

	inset -0.4vh -1vh 1.5vh rgba(0, 0, 0, 0.4),
	inset -0.2vh -0.4vh 1vh rgba(0, 0, 0, 0.4),

	inset 0.4vh 1vh 1.5vh rgba(255, 255, 255, 0.4),
	inset 0.2vh 0.5vh 1vh rgba(255, 255, 255, 0.5);
}

.css {
	top: 27vh;
	text-shadow:
	-0.2vh -0.5vh 1vh rgba(0, 0, 0, 0.7),
	-0.2vh -0.5vh 2vh rgba(0, 0, 0, 0.7),
	0.2vh 0.5vh 1vh rgba(255, 255, 255, 0.5),
	0.2vh 0.5vh 2vh rgba(255, 255, 255, 0.5);
	font-size: 4vh;
	position: absolute;
}

.verre .slider-container {
	position: absolute;
	display: flex;
	align-items: center;
	height: 100%;
	top: 0;
	left: 0;
	width: 100%;
}

.verre .slider {
	height: 40vh;
	width: 1vh;
	position: absolute;
	left: 3vh;
	border-radius: 100vh;
	backdrop-filter: blur(5vh) brightness(130%);
	border: 0.1vh solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 1vh rgb(0, 0, 0);
}

.verre .slider .poignee {
	height: 3vh;
	width: 3vh;
	border-radius: 50%;
	background: linear-gradient(156.4deg, rgb(255, 113, 113), rgb(7, 210, 0));
	box-shadow: 0 0 0.3vh rgb(0, 0, 0);
	border: 0.2vh solid rgba(255, 255, 255, 0.5);
	position: absolute;
	left: calc(0.5vh - 0.3vh / 2 - 3vh / 2);
	top: calc(var(--poignee-top) - 3vh / 2);
}


/* -------------------------------------------------------------------------------- */

.check-container {
	width: 100%;
	height: 10vh;
	background-color: var(--background);
	display: flex;
	align-items: center;
	justify-content: center;
	filter: contrast(30);
}

.button {
	transition: all 0.1s ease-in-out;
	background-color: var(--text-purple);
	width: 16vh;
	height: 8vh;
	position: absolute;
	margin-left: 1vh;
	border-radius: 16vh;
	cursor: pointer;
	display: flex;
	align-items: center;
	filter: blur(4.5px);
}

.button::before {
	transition: all 0.1s ease-in-out;
	content: '';
	position: absolute;
	height: 7vh;
	width: 7vh;
	border-radius: 50%;
	left: 0.5vh;
	background-color: var(--interactive);
	animation: animate 5s linear infinite;
	filter: blur(10000px);
}

.check-container input {
	display: none;
}

.check-container input:checked+.button {
	background-color: var(--text);
}

.check-container input:checked+.button::before {
	transform: translateX(8vh);
}


/* -------------------------------------------------------------------------------- */


.swiper {
	width: 100%;
	height: 55vh;
	background-color: black;
	color: var(--dark-text);
	font-family: var(--font);
	position: relative;

	.swiper-wrapper {
		position: relative;
		width: 100%;
		height: 40vh;
		top: 0;
		text-align: center;

		.swiper-slide {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			background-color: #000000;
			z-index: 3;

			.before, .after {
				font-size: 20vh;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
			}

			.before {
				z-index: -1;
			}
		
			.after {
				z-index: 2;
				color: transparent;
				-webkit-text-stroke: 2px var(--dark-text);
			}

			img {
				height: 37vh;
				width: 55vh;
				object-fit: cover;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		
		}
	}

	.bottom {
		width: 100%;
		height: 12vh;
		position: absolute;
		top: 43vh;
		font-size: 1.5vh;

		.text {
			position: absolute;
			left: 5vh;
		}

		.btn {
			position: absolute;
			left: 90%;
			top: 30%;
			transform: translate(-100%, -70%);
			display: flex;
			gap: 3vh;
			width: 17vh;

			.swiper-button-prev, .swiper-button-next {
				transition: 0.2s ease-in-out;
				height: 5vh;
				width: 5vh;
				border-radius: 50%;
				position: relative;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				color: grey;

				&:hover {
					color: var(--dark-text);
				}
			}
		}
	}
}


/* -------------------------------------------------------------------------------- */


.improvisation-container {
	width: 100%;
	min-height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(circle, rgb(0, 183, 255), rgb(74, 254, 221));
}

.improvisation {
	position: relative;
	width: 30vh;
	height: 30vh;
	border-radius: 50%;
	box-shadow:
	0 0 5vh blue,
	inset 0 0 15vh blue;
	border: 1px solid blue;
	display: flex;
	justify-content: center;
	align-items: center;
}

.improvisation::before {
	content: '';
	display: block;
	position: absolute;
	height: 10vh;
	width: 50vh;
	display: flex;
	justify-content: end;
	align-items: center;
}

.improvisation::before::before {
	content: '';
	display: block;
	height: 10vh;
	width: 10vh;
	border-radius: 50%;
	border: 1px solid red;
}


/* -------------------------------------------------------------------------------- */


@media screen and (min-width: 120vh) {
	#card {
		max-width: 120vh;
		margin-left: calc(50vw - 120vh / 2);
	}
	.liquid p {
		font-size: 42vh;
	}
}

@media screen and (max-width: 90vh) {
	video {
		height: 100%;
		width: auto;
	}
}

@media screen and (max-width: 75vh) {
	.zone-card .nature {
		height: 100%;
		width: auto;
	}
}

@media screen and (max-width: 60vh) {
	.troisd .ville .titre {
		font-size: 5vh;
	}
	.icone {
		flex-direction: column;
		height: 60vh;
	}
	.btn {
		margin-top: 50vh;
		margin-left: 0;
	}
	.white,
	.black {
		justify-content: start;
	}
}

@media screen and (max-width: 50vh) {
	.white,
	.black {
		width: 100vw;
	}
	.white-container,
	.black-container {
		width: 90vw;
		height: 90vw;
	}
	.icone {
		height: 120vw;
	}
	.btn {
		margin-top: 100vw;
		height: 10vw;
		width: 10vw;
	}
	.parallax-content .excuse {
		font-size: 4vh;
	}
	.verre img {
		width: auto;
		height: 100%;
	}
}

@media screen and (max-width: 43vh) {
	.troisd .ville .titre {
		font-size: 3vh;
	}
	.parallax-content .excuse {
		font-size: 3vh;
	}
}