html {
	--main-color: white;
	--second-color: #2333ad;
	background-color: var(--second-color);
	margin: 0%;
	padding: 0;
	color: var(--main-color);
	font-family: GTFlexa_thin;
	line-height: 135%;
	font-size: .7vmax;
}
body{
	margin: 0%;
	padding: 0;
}
a{
	color: var(--main-color);
	text-decoration: none;
}
a:link {
	color: var(--main-color);
	text-decoration: none;
}
a:visited {
	color: var(--main-color);
	text-decoration: none;
}
a:focus {
	color: var(--main-color);
	text-decoration: none;
}
a:hover{
}
a:active {
	color: var(--main-color);
	text-decoration: none;
}
#container-footer a {
	/* Vos styles ici */
	color: white; /* Exemple */
	text-decoration: none;
}
#container-footer a:visited {
	/* Vos styles ici */
	color: white; /* Exemple */
	text-decoration: none;
}

#container-footer a:link {
	/* Vos styles ici */
	color: white; /* Exemple */
	text-decoration: none;
}
iframe{
	width: 100%;
}
p{
	margin: 0;
	padding: 0;
}
.button-text{
	text-decoration: underline;
}
/* Animation Intro */
#container-animation {
	position: fixed;
	width: 100%;
	height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 100;
}
#grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 50px); /* Create a grid of boxes */
    grid-template-rows: repeat(auto-fill, 50px);
    position: relative;
    width: fit-content; /* Automatically adjust to fit all boxes */
    height: fit-content;
    margin: 0;
    padding: 0;
}
.box {
    width: 50px;
    height: 50px;
    background-color: var(--second-color);
    margin: 0; /* Avoid spacing between boxes */
}
#grid_back{
	background-color: var(--second-color);
	position: absolute;
	width: 100%;
	height: 100%;
}
/* Animation Intro */ 

/* */

#name{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	/* transform-origin: 0% 50%; */
	position: fixed;
	top: 100vh;
	background: var(--main-color);
}
#name-desktop{
	position: absolute;
	width: 100%;
}
.container {
	position: fixed; /* Fixé en bas de la page */
	bottom: 2%;
	width: 70.1%;
	display: flex;
	justify-content: space-between;
	padding: 0 0%;
}

.block {

	font-size: 1.5rem;
	color: var(--main-color);
	position: relative;
}

.block-left {
	width: 39%;
}

.block-right {
	font-size: .8vmax;
	width: 50%;
}
/* */


#container_total{
	padding: 2% 2% 2% 2%;
}

#container_1{
	width: 100%;
	display: flex;
	justify-content: space-between;

}
#container_left{
	width: 73%;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 100vh;
}
#container_right{
	position: fixed;
	right: 2%;
	width: 24%;
	height: 20vh;
}
#logo{
	position: absolute;
	width: 100%;
}
#logo-above{
	position: absolute;
	width: 100%;
}
.image-blue{
	opacity: 0;
}
#space_bar{
	position: absolute;
	margin-top: 105%;
	width: 100%;
	border-top: 2px solid var(--main-color);

}


/* NAV */
#nav{
	position: absolute;
	margin-top: 109%;
	flex: 1 1 0px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: .6vmax;
}
.nav_container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
	#nav_first, #nav_second, #nav_third{
		width: 25%;
	}
	.hover-item:hover{
	}	
		.nav_text_animated{
			letter-spacing: 0.05em;
			transition: letter-spacing .3s ease-out;
		}
		.nav_text_animated:hover{
			letter-spacing: 0.10em;
			font-family: GTFlexa_bold;
			overflow: visible;
			white-space: nowrap;
		}

/* NAV */


#info{
	position: sticky;
	margin-top: 57%; /* 48% de base*/ 
	top: 88vh;
	width: 100%;
	height: 9vh;
	border: 2px solid var(--main-color);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	letter-spacing: 0.1em;
}
	#title_project{
		width: 30%;
		flex: 1 1 auto;
		margin: 1%;
	}
		#title_project-image{
			height: 100%;
			max-width: 100%;
			object-fit: contain;
		}
	#type_project{
		margin: 1%;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#soft_project{
		flex: 1 1 auto;
		margin: 1%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#view_project{
		display: none;
		flex: 1 1 auto;
		align-content: flex-end;
		align-items: flex-end;
		margin: 1%;
		flex-direction: column;
		justify-content: space-between;
	}
		.bold{
			font-family: GTFlexa_bold;
		}
.video_project{
	padding-top: 35%;
}
#videoproject_4{
	display: flex;
	justify-content: center;
}
#iframevideoproject_4{
	width: 60%;
}
lite-vimeo {
	aspect-ratio: 16/9;
	overflow: hidden;
  }
  .video-square {
	aspect-ratio: 1/1;
	overflow: hidden;
  }
  .video-square iframe {
	object-fit: cover;
  }
#space_first{
	width: 100%;
	height: 100vh;
}
#space{
	width: 100%;
	height: 10vh;
}
#award_part{
	display: flex;
}
#award_part_left{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
#award_image{
	width: 1%;
}

.follow-box {
	position: absolute;
	color: var(--main-color);
	padding: 3px 10px 0px 10px;
	transform: translate(+15%, +50%);
	font-family: GTFlexa_light;
	letter-spacing: 1px;
	font-size: .5vmax;
	white-space: nowrap;
	z-index: 10000;
	display: block;
	background-color: var(--second-color);
}
iframe{
	/*pointer-events: none;*/
}


#info-bar-top{
	position: fixed;
	top: 2%;
	width: 70.1%;
	display: flex;
	justify-content: space-between;
	letter-spacing: .1em;
	text-transform: lowercase;
	font-size: .6vmax;

}
#left-bar-top{
	width: 39%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#right-bar-top{
	width: 50%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.square-bar-top{
	background-color: var(--main-color);
	height: .5vw;
	width: .5vw;
}




/* footer */
#container-footer{
	background-color: #2333ad;
	color: white;
	position: absolute;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	font-family: GTFlexa_light;
	font-size: .6vmax;
	letter-spacing: 0.1em;
	line-height: 135%;
}
	#footer-left-part{
		width: 50%;
		height: 40%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 2%;
	}
	#footer-left-part-top{
		display: flex;
		flex-direction: row;
	}
		#footer-message-thanks{
			width: 35%;
		}
			#footer-time{
				display: inline-flex;
			}
			#container-footer-time-info{
				display: flex;
				align-items: center;
				display: inline-flex;
			}
				#footer-time-badge{
					margin-left: .5vw;
					width: 12px;          	  /* Taille de la pastille  */
					height: 12px;             /* Taille de la pastille  */
					border-radius: 50%;  	  /* Rend la pastille ronde */
					background-color: red;  /* Couleur par défaut     */
				}
		#footer-date-link{
			padding-left: 6%;
		}
		#footer-link-social{
			padding-left: 6%;
			display: flex;
			flex-direction: column;
			height: 70%;
		}
		#mailtocopy{
			display: inline-flex;
		}

#footer-right-part{
	width: 50%;
	height: 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2%;
}
	#name-desktop-footer{
		width: 100%;
	}
	#container-footer-right-part-name{
		padding-top:3%;
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;	
	}
		#footer-work-field{
			width: 40%;
		}
		#footer-typography-one{
			width: 25%;
		}
		#footer-typography-two{

		}
	#container-footer-right-bottom{
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		bottom: 0;
	}
		#footer-copyright{
			width: 40%;
		}
		#footer-update{
			width: 25%;
		}
		#footer-version{

		}

.square-footer{
	background-color: white;
	height: .35vw;
	width: .35vw;
	border: none;
	outline: none;
	display: inline-flex;
	margin-right: 1vw;
}

/* FOOTER */

.in-line{
	display: inline-flex;
}






#info-mobile{
	display: none;
}
#mobile-project-info{
	display: none;
}
#mobile-container-top-nav{
	display: none;
}
#space-bar-mobile-top{
	display: none;
}
#nav-mobile{
	display: none;
}
#videoproject_1{
	margin-top: 35%;
}
.video-project{
	margin-bottom: 30%;
}




#logo-white-wrapper {
	position: fixed; /* Le logo suit le scroll */
	top: 0;
	left: 0;
	width: 100px; /* Taille du logo */
	height: 100px;
	z-index: 10;
	pointer-events: none;
}

#logo-above {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(100% 0 0 0); /* Par défaut invisible */
	transition: clip-path 0s ease-out;
}

#logo-white-wrapper-mobile {
	display: none;
}

#logo-above-mobile {
	display: none;
}
#name-white-wrapper-mobile{
	display: none;
}
#name-mobile-above{
	display: none;
}
#container-footer-mobile{

	display: none;
}