@keyframes gentle-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px); /* small upward move */
	}
}

@keyframes scroll-logo-container {
	from {
		height: var(--section-height);
	}
	to {
		transform: translate(-13.5%, 11.6%);
		height: var(--section-short-height);
	}
}

@keyframes cercles-container-entree {
	0% {
		top: var(--cercles-y-start);
		left: var(--cercles-x-start);
	}
	90% {
		top: var(--cercles-y-start);
		left: var(--cercles-x-start);
	}
	100%{
		top: 0;
		left: 0;
	}
}


@keyframes entree-section-slogan {
	0% {
		height: 100dvh;
	}
	60% {
		height: 100dvh;
	}
	80% {
		height: var(--section-short-height);
	}
}

@keyframes entree-slogan {
	0% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes entree-bouton-langue {
	0% {

		background-color: white;
		border: 1px solid white;
		border-radius: 50%;
		color: white;

	}
	0.5% {

		background-color: white;
		border: 1px solid black;
		border-radius: 50%;
		color: black;

	}
	80% {
		background-color: white;
		background-color: white;
		border: 1px solid black;
		border-radius: 50%;
		color: black;
	}
	100% {
		visibility: visible;
		background-color: black;
		border: 1px solid white;
		border-radius: 50%;
		color: white;

	}
}

@keyframes scroll-background {
	0% {
		background-color: black;
	}
	9% {
		background-color: black;
	}
	12% {
		background-color: white;
	}
	45% {
		background-color: white;
	}
	50% {
		background-color: black;
	}

	100% {
		background-color: black;
	}
}

@media (min-width: 48rem) {
	@keyframes scroll-background {
		0% {
			background-color: black;
		}
		9% {
			background-color: black;
		}
		12% {
			background-color: white;
		}
		50% {
			background-color: white;
		}
		60% {
			background-color: black;
		}

		100% {
			background-color: black;
		}
	}
}

@keyframes entree-background {
	0% {
		background-color: white;
	}
	80% {
		background-color: white;
	}
	100% {
		background-color: black;
	}
}

@keyframes entree-first-section {
	0% {
		height: 100dvh;
		background-color: white;
	}
	80% {
		height: 100dvh;
		background-color: white;
	}
	100% {
		height: var(--section-short-height);
		background-color: black;
	}
}

@keyframes entree-logo-texte {
	0% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes pre-entree-vert {
		from {
		position: relative;
		top: -1000px;
		left: 0;
		transform: scale(1);
	}
	to {
		position: relative;
		top: 0;
		left: 0;
		transform: scale(1);
	}
}

@keyframes entree-vert {
	0% {
		position: relative;
		/* top: -1000px;
		left: 0; */
		transform: scale(1);
	}
	7% {
		position: relative;
		/* top: 0;
		left: 0; */
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	31% {
		transform: translate(0, 0) scale(1);
	}
	34% {
		transform: translate(var(--vert-translate-x), var(--vert-translate-y)) scale(var(--cercles-bigger-scale));
	}
	80% {
		transform: translate(var(--vert-translate-x), var(--vert-translate-y)) scale(var(--cercles-bigger-scale));
	}
}
@keyframes entree-vert-ol {
	0% {
		position: relative;
		/* top: -1000px;
		left: 0; */
		transform: scale(1);
	}
	7% {
		position: relative;
		/* top: 0;
		left: 0; */
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	31% {
		transform: translate(0, 0) scale(1);
	}
	34% {
		transform: translate(calc(var(--vert-translate-x) + var(--ol)), var(--vert-translate-y)) scale(var(--cercles-bigger-scale));
	}
	80% {
		transform: translate(calc(var(--vert-translate-x) + var(--ol)), var(--vert-translate-y)) scale(var(--cercles-bigger-scale));
	}
}

@keyframes entree-edition {
	0% {
		opacity: 0;
		/* transform: scale(0.1); */
	}
	40% {
		opacity: 0;

		/* transform: scale(0.1); */
		filter: blur(var(--headers-blur));
	}
	58% {
		opacity: 1;

		/* transform: scale(1); */
		filter: blur(0);
	}
	80% {
		opacity: 1;

		filter: blur(0);
	}

	90% {

		transform: translate(0, 0);		
	}
	100% {

		transform: translate(0, -100dvh);		
	}
}

@keyframes pre-entree-jaune {
	0% {
		top: 0px;
		left: 1000px;
		transform: scale(1);
	}
	100% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
}


@keyframes entree-jaune {
	0% {
		/* top: 0px;
		left: 1000px; */
		transform: scale(1);
	}
	2% {
		/* top: 0px;
		left: 1000px; */
		transform: scale(1);
	}
	9% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	39% {
		transform: translate(0, 0) scale(1);
	}
	42% {
		transform: translate(var(--jaune-translate-x), var(--jaune-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
	80% {
		transform: translate(var(--jaune-translate-x), var(--jaune-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
}
@keyframes entree-jaune-ol {
	0% {
		/* top: 0px;
		left: 1000px; */
		transform: scale(1);
	}
	2% {
		/* top: 0px;
		left: 1000px; */
		transform: scale(1);
	}
	9% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	39% {
		transform: translate(0, 0) scale(1);
	}
	42% {
		transform: translate(calc( var(--jaune-translate-x) + var(--ol) ), var(--jaune-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
	80% {
		transform: translate(calc( var(--jaune-translate-x) + var(--ol) ), var(--jaune-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
}

@keyframes entree-interactif {
	0% {
		opacity: 0;
		/* transform: scale(0.1); */
	}
	46% {
		opacity: 0;
		/* transform: scale(0.1); */
		filter: blur(var(--headers-blur));
	}
	64% {
		opacity: 1;
		/* transform: scale(1); */
		filter: blur(0);
	}
	80% {
		opacity: 1;

		filter: blur(0);
	}

	90% {

		transform: translate(0, 0);		
	}
	100% {

		transform: translate(0, -100dvh);		
	}
}

@keyframes pre-entree-magenta {
	0% {
		top: 0px;
		left: -1000px;
		transform: scale(1);
	}
	100% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
}

@keyframes entree-magenta {
	0% {
		/* top: 0px;
		left: -1000px; */
		transform: scale(1);
	}
	4% {
		/* top: 0px;
		left: -1000px; */
		transform: scale(1);
	}
	11% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	34% {
		transform: translate(0, 0) scale(1);
	}
	38% {
		transform: translate(var(--magenta-translate-x), var(--magenta-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
	80% {
		transform: translate(var(--magenta-translate-x), var(--magenta-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
}
@keyframes entree-magenta-ol {
	0% {
		/* top: 0px;
		left: -1000px; */
		transform: scale(1);
	}
	4% {
		/* top: 0px;
		left: -1000px; */
		transform: scale(1);
	}
	11% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	34% {
		transform: translate(0, 0) scale(1);
	}
	38% {
		transform: translate(calc(var(--magenta-translate-x) + var(--ol)), var(--magenta-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
	80% {
		transform: translate(calc(var(--magenta-translate-x) + var(--ol)), var(--magenta-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
}

@keyframes entree-graphisme {
	0% {
		opacity: 0;
		/* transform: scale(0.5); */
	}
	44% {
		opacity: 0;
		/* transform: scale(0.5); */
		filter: blur(var(--headers-blur));
	}
	58% {
		opacity: 1;
		/* transform: scale(1); */
		filter: blur(0);
	}
	80% {
		opacity: 1;

		filter: blur(0);
	}

	90% {

		transform: translate(0, 0);		
	}
	100% {

		transform: translate(0, -100dvh);		
	}
}

@keyframes pre-entree-cyan {
	0% {
		top: 1000px;
		left: 1000px;
		transform: scale(1);
	}
	100% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
}

@keyframes entree-cyan {
	0% {
		/* top: 1000px;
		left: 1000px; */
		transform: scale(1);
	}
	6% {
		/* top: 1000px;
		left: 1000px; */
		transform: scale(1);
	}
	13% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	42% {
		transform: translate(0, 0) scale(1);
	}
	45% {
		transform: translate(var(--cyan-translate-x), var(--cyan-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
	80% {
		transform: translate(var(--cyan-translate-x), var(--cyan-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
}

@keyframes entree-cyan-ol {
	0% {
		/* top: 1000px;
		left: 1000px; */
		transform: scale(1);
	}
	6% {
		/* top: 1000px;
		left: 1000px; */
		transform: scale(1);
	}
	13% {
		top: 0;
		left: 0;
		transform: scale(1);
	}
	15% {
		transform: scale(1);
	}
	16% {
		transform: scale(1.1);
	}
	17% {
		transform: scale(0.9);
	}
	18% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	21% {
		transform: scale(1.1);
	}
	22% {
		transform: scale(0.9);
	}
	23% {
		transform: scale(1);
	}
	42% {
		transform: translate(0, 0) scale(1);
	}
	45% {
		transform: translate(calc(var(--cyan-translate-x) + var(--ol)), var(--cyan-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
	80% {
		transform: translate(calc(var(--cyan-translate-x) + var(--ol)), var(--cyan-translate-y)) scale(var(--cercles-bigger-scale));
		opacity: 1;
	}
}

@keyframes entree-sites-web {
	0% {
		opacity: 0;
		/* transform: scale(0.5); */
	}
	49% {
		opacity: 0;
		/* transform: scale(0.5); */
		filter: blur(var(--headers-blur));
	}
	64% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
	80% {
		opacity: 1;

		filter: blur(0);
	}

	90% {

		transform: translate(0, 0);		
	}
	100% {

		transform: translate(0, -100dvh);		
	}
}

@keyframes bolden {
	0% {
		font-weight: 400;
	}
	90% {
		font-weight: 400;
		transform: scale(1) translate(0, 0);
	}
	95% {
		font-weight: 800;
		transform: scale(1.25) translate(0, -2px);
	}
	100% {
		font-weight: 800;
		transform: scale(1) translate(0, 0);
	}
}

@keyframes focus-in {
	0% {
		font-weight: 800;
		opacity: 0;
	}
	90% {
		font-weight: 800;
		transform: scale(1) translate(0, 0);
		opacity: 0.8;
		filter: blur(4px);
	}
	100% {
		font-weight: 800;
		transform: scale(1) translate(0, 0);
		opacity: 1;
	}
}

@keyframes leRotateYZoomIn {
	0% {
		transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
		opacity: 1;
	}
	90% {
		transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
		opacity: 1;
	}
	100% {
		transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg);
		opacity: 1;
	}
}


@keyframes sortie-encadre-1 {
	0% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}

	22% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}
	32% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
	100% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
}
@keyframes sortie-encadre-2 {
	0% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}

	37% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}
	47% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
	100% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
}
@keyframes sortie-encadre-3 {
	0% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}

	49% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}
	59% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
	100% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
}

@media (min-width: 48rem) {
@keyframes sortie-encadre-1 {
	0% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}

	22% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}
	32% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
	100% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
}
@keyframes sortie-encadre-2 {
	0% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}

	37% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}
	47% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
	100% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
}
@keyframes sortie-encadre-3 {
	0% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}

	49% {
		top: 20px;
		transform: scale3d(1, 1, 1);
	}
	59% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
	100% {
		top: 20px;
		transform: scale3d(0.8, 0.8, 1);
	}
}
}

@keyframes block-scrolls-away-1 {
	0% {
		transform: scale3d(1, 1, 1);
	}
	21% {
		transform: scale3d(1, 1, 1);
	}
	24% {
		transform: scale3d(0.9, 0.9, 1);
	}
	100% {
		transform: scale3d(0.9, 0.9, 1);
	}
}


@keyframes slide-up {
	0% {
		transform: translateY(150%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}