:root {
	--vert: #90ca64;
	--rose: #f06299;
	--jaune: #ffdd00;
	--bleu: #40c6d8;
	--entree-duration: 4.5s;
	--entree-slogan-duration: 5s;
	--entree-logo-duration: 8.25s;
	--entree-titres-duration: 4s;
	--titres-delay: 0s;
	--headers-blur: 0.5px;
	--real-hov-speed: 0.75s;
	--delai-lettres: 0.08s;
	--circles-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
	--circles-timing-function-2: cubic-bezier(0, 0, 0.6, 1);
	--dl-1: calc(var(--delai-lettres) * 1);
	--dl-2: calc(var(--delai-lettres) * 2);
	--dl-3: calc(var(--delai-lettres) * 3);
	--dl-4: calc(var(--delai-lettres) * 4);
	--dl-5: calc(var(--delai-lettres) * 5);
	--dl-6: calc(var(--delai-lettres) * 6);
	--dl-7: calc(var(--delai-lettres) * 7);
	--dl-8: calc(var(--delai-lettres) * 8);
	--dl-9: calc(var(--delai-lettres) * 9);
	--dl-10: calc(var(--delai-lettres) * 10);
	--dl-11: calc(var(--delai-lettres) * 11);
	--dl-12: calc(var(--delai-lettres) * 12);
	--dl-13: calc(var(--delai-lettres) * 13);
	--dl-14: calc(var(--delai-lettres) * 14);
	--dl-15: calc(var(--delai-lettres) * 15);

	--section-short-height: 50dvh;

	--cercles-x-start: calc(50dvw - 260px);
	--cercles-y-start: calc(50dvh - 100px - 2rem);

	--cercles-bigger-scale: 2.5;

	--vert-translate-x: -11dvw;
	--vert-translate-y: -49dvh;

	--magenta-translate-x: 43dvw;
	--magenta-translate-y: -28dvh;

	--jaune-translate-x: 28dvw;
	--jaune-translate-y: 2dvh;

	--cyan-translate-x: -25dvw;
	--cyan-translate-y: 21dvh;

	--ol: -3rem;
}






@media all and (min-width: 40rem) {
	:root {
		


	--cercles-bigger-scale: 2;

	--vert-translate-x: -13dvw;
	--vert-translate-y: -46dvh;

	--magenta-translate-x: 16dvw;
	--magenta-translate-y: -26dvh;

	--jaune-translate-x: 36dvw;
	--jaune-translate-y: 0dvh;

	/* --cyan-translate-x: -36dvw; */

	/* --cyan-translate-y: 20dvh; */
	}
}
@media all and (min-width: 48rem) and (min-height: 20rem) {
	:root {



		--cercles-bigger-scale: 2.5;

		--vert-translate-x: -5dvw;
		--vert-translate-y: -25dvh;

		--magenta-translate-x: 7dvw;
		--magenta-translate-y: -11dvh;

		--jaune-translate-x: 13dvw;
		--jaune-translate-y: 13dvh;
		
		--cyan-translate-y: 25dvh;
		--cyan-translate-x: -9dvw; 


	}
}

@media all and (min-width: 745px) and (max-width: 1200px) and (min-height: 20rem) {
	:root {
			--cercles-y-start: calc(50dvh - 160px - 2rem);
		--cercles-bigger-scale: 2.5;
		--cercles-x-start: calc(50dvw - 420px);
		--jaune-translate-y: 14dvh;

		/* --cyan-translate-y: 16dvh; */
		/* --cyan-translate-x: -14dvw; */

	}
}
@media all and (min-width: 1200px) and (min-height: 20rem) {
	:root {
			--cercles-y-start: calc(50dvh - 160px - 2rem);
		--cercles-bigger-scale: 2.8;
		--cercles-x-start: calc( 50dvw - ( ( 100dvw - 1200px ) / 2 ) - 430px);
		--jaune-translate-y: 14dvh;

		/* --cyan-translate-y: 16dvh;
		--cyan-translate-x: -14dvw; */
	}
}
/* * {
  outline: 1px solid red;
} */

body {
	overflow: visible;
	cursor: url("../img/cursor.svg") 10 10, auto;
}

/* **** H2 fade-in-titles **** */
.fading-in {
	animation: slide-up 1s ease-out forwards;
}

/* **** Indicateur de scroll **** */

.scroll-indicator {
	bottom: -30px;
	transition: opacity 0.5s ease-in-out;
	animation: gentle-bounce 1.5s ease infinite;
}

.scroll-indicator.scroll {
	opacity: 0;
}

/* **** MAIN **** */

.main-class {
	animation-play-state: paused;
	animation: entree-background var(--entree-duration) forwards;
	animation-play-state: paused;
}

.main-class.scroll {
	animation: scroll-background forwards;
	animation-timeline: scroll(root);
	view-timeline-name: --main-timeline;
	animation-range: --main-timeline 0% 100%;
}

/* **** Titres et logo (cercles) **** */

.cercles-container {
  position: relative;
	top: var(--cercles-y-start);
	left: var(--cercles-x-start);
  will-change: top, left;
  transition: all 1s ease;
  animation: cercles-container-entree var(--entree-duration) ease forwards;
  animation-play-state: paused;
  z-index: 100;
}

.cercles-container.scroll {
	animation: none;
	top: 0;
	left: 0;
}
.headers-container {
	z-index: 2;
}

.cercle-vert, .cercle-rose, .cercle-jaune, .cercle-bleu {
	position: relative;
	top:0;
	left:0;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
	z-index: 50;

}

.cercle-vert {
	animation-name: pre-entree-vert;
	/* animation-play-state: paused; */
}

.cercle-jaune {
	animation-name: pre-entree-jaune;
	/* animation-play-state: paused; */
}

.cercle-rose {
	animation-name: pre-entree-magenta;
	/* animation-play-state: paused; */
}

.cercle-bleu {
	animation-name: pre-entree-cyan;
	/* animation-play-state: paused; */
}

.cercle-vert.scroll,
.cercle-jaune.scroll,
.cercle-rose.scroll,
.cercle-bleu.scroll {
	transition: all 1s linear;
}



  .h-edition,
  .h-graphisme,
  .h-interactif,
  .h-sites-web {
    position: relative;
    font-size: 2rem;
	font-weight: 100;
    overflow: visible;
	opacity: 0;
    width: 10rem;
	z-index: 60;
	animation-play-state: paused;
  }

  .h-edition {
    top: 0px;
    left: -20px;
    animation: entree-edition var(--entree-titres-duration) forwards linear;
	animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }

  .h-graphisme {
    top: 0px;
    left: -70px;
    animation: entree-graphisme var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }

  .h-interactif {
    top: 0px;
    left: -90px;
    animation: entree-interactif var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }
  .h-sites-web {
    top: 0px;
    left: 0px;
    animation: entree-sites-web var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }
  .h-edition-en,
  .h-graphisme-en,
  .h-interactif-en,
  .h-sites-web-en {
    position: relative;
    font-size: 2rem;
	font-weight: 100;
    overflow: visible;
	opacity: 0;
    width: 10rem;
	z-index: 60;
	animation-play-state: paused;
  }

  .h-edition-en {
    top: 0px;
    left: -48px;
    animation: entree-edition var(--entree-titres-duration) forwards linear;
	animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }

  .h-graphisme-en {
    top: 0px;
    left: -143px;
    animation: entree-graphisme var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }

  .h-interactif-en {
    top: 0px;
    left: -90px;
    animation: entree-interactif var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }
  .h-sites-web-en {
    top: 0px;
    left: -55px;
    animation: entree-sites-web var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }

@media (min-width: 40rem) {
  .h-edition,
  .h-graphisme,
  .h-interactif,
  .h-sites-web {
    position: relative;
	opacity: 0;
    font-size: 2rem;
	font-weight: 100;
    overflow: visible;
    width: 10rem;
		animation-play-state: paused;
  }

  .h-edition {
    top: 0px;
    left: -20px;
    animation: entree-edition var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }

  .h-graphisme {
    top: 0px;
    left: -70px;
    animation: entree-graphisme var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }

  .h-interactif {
    top: 0px;
    left: -90px;
    animation: entree-interactif var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }
  .h-sites-web {
    top: 0px;
    left: 0px;
    animation: entree-sites-web var(--entree-titres-duration) forwards linear;
		animation-delay: var(--titres-delay);
	animation-play-state: paused;
  }
}





.first-section {
	min-height: 430px;
	animation: entree-first-section var(--entree-duration) ease forwards;
		animation-play-state: paused;
}

.first-section.scroll, .section-slogan.scroll {
	position: relative;
	min-height: 430px;
	height: 50dvh;
	animation: none;
}

.logo-pige-texte {
	animation: entree-logo-texte var(--entree-duration) forwards ease;
		animation-play-state: paused;
  position: relative;
  /* left: 42rem;
  bottom: 2rem; */
}

.encadre-couleur-container {
	position: relative;
	overflow: clip;
	/* view-timeline-name: --encadre-couleur-container; */
}

.encadre-couleur {

  border: 0px solid white;
  border-radius: 0.5rem;
  overflow: hidden;
}
.encadre-couleur:not(:last-child) {
	position: sticky;
	top: 20px;
	animation-timeline: scroll();
  	animation-range: 0% 95%;
}
	.encadre-couleur:nth-child(1) {
	
		animation-name: sortie-encadre-1;
	}

	.encadre-couleur:nth-child(2) {
		animation-name: sortie-encadre-2;
	}

	.encadre-couleur:nth-child(3) {
		animation-name: sortie-encadre-3;
	}


	.encadre-couleur:last-child {
		view-timeline-name: --last-encadre;
	z-index: 400;
	}

@media (min-width: 48rem) {
	.encadre-couleur {
		overflow: hidden;
		border: 0px solid white;
		border-radius: 0.5rem;
		box-shadow: none;
	}



}

.section-slogan {
	min-height: 430px;
	animation: entree-section-slogan var(--entree-slogan-duration) forwards;
		animation-play-state: paused;
}

.section-slogan.scroll {
	height: 50dvh;
}

.slogan {
	animation: entree-slogan var(--entree-slogan-duration) forwards ease-in;
		animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
	.realisations-item .realisations-overlay {
		will-change: left, top;
		transition: all var(--real-hov-speed) ease-in-out;
	}

	.realisations-item:first-child:hover .realisations-overlay {
		left: -100%;
	}
	.realisations-item:not(:first-child):not(:last-child):hover .realisations-overlay {
		top: -100%;
	}
	.realisations-item:last-child:hover .realisations-overlay {
		left: 100%;
	}

	.realisations-container .realisations-item {
		will-change: width;
		transition: all var(--real-hov-speed) ease-in-out;
	}

	.realisations-container > div:first-child:hover > .realisations-item {
		width: 25%;
	}

	.realisations-container > div:last-child:hover > .realisations-item {
		width: 40%;
	}
}

.service > span {
	display: inline-block;
	position: relative;
	animation: bolden var(--entree-slogan-duration) ease forwards;
		animation-play-state: paused;
	transform-style: preserve-3d;
}

#se-01 {
	animation-delay: var(--dl-1);
}
#se-02 {
	animation-delay: var(--dl-2);
}
#se-03 {
	animation-delay: var(--dl-3);
}
#se-04 {
	animation-delay: var(--dl-4);
}
#se-05 {
	animation-delay: var(--dl-5);
}
#se-06 {
	animation-delay: var(--dl-6);
}
#se-07 {
	animation-delay: var(--dl-7);
}
#se-08 {
	animation-delay: var(--dl-8);
}
#se-09 {
	animation-delay: var(--dl-9);
}
#se-10 {
	animation-delay: var(--dl-10);
}
#se-11 {
	animation-delay: var(--dl-11);
}
#se-12 {
	animation-delay: var(--dl-12);
}
#se-13 {
	animation-delay: var(--dl-13);
}
#se-14 {
	animation-delay: var(--dl-14);
}
#se-15 {
	animation-delay: var(--dl-15);
}

.video-pair, .encadre-couleur  {
  overflow: hidden;
}

@media (min-width: 48rem) {
  .video-pair  {


    overflow: hidden;
  }
}

.realisations-item * {
	border-radius: 0.5rem;
}

.bouton-langue {
	visibility: hidden;
	text-decoration: none;
	text-align: center;
	padding-top: 0.15rem;
	position: absolute;
	font-size: 0.9rem;;
	right: 3rem;
	top: 2rem;
	width: 2rem;
	height: 2rem;
	z-index: 1000;
	background-color: white;
	color:white;
	border-color: white;
	animation: entree-bouton-langue var(--entree-duration) ease forwards;
	animation-play-state: paused;
}



.bouton-langue:hover {
	filter: invert(100%);
}

@media screen and (max-width: 40rem) {
	.bouton-langue {
		top: 1rem;
		right: 1rem;
	}
}

.left-offset-1 {
	left: -2rem;
}

.bg-rapport-1 {
	background-image: url('../img/mockups/Mockup_Rapport_UPA.jpg');
}