#Corp{
	width: 100vw;
}

/*Page principale*/
#Home{
	width: 100vw;
	height: 100vh;
	background: var(--color-bleu);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#Home img{
	filter: opacity(30%);
	position: fixed;
	top: 0;
	left: 0;
	max-width: 100vw;		
}
#Home h1{
	font-size: 10em;
	text-align: center;
	width: 50%;
	color: var(--color-blanc);
	font-family: 'Roboto', sans-serif;
}
.home_bottom{
	position: absolute;
	z-index: 1;
	width: 100vw;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.home_bottom svg{
	fill: var(--color-blanc);
	width: 40px;
	height: 40px;
	color: var(--color-blanc);;
}
.Incrustation_video{
	position: absolute;
	top: 15vh;
	right: 3vw;
}
.Incrustation_video iframe{
	width: 280px;
	height: 167px;
}
.Incrustation_video h3{
	text-align: center;
	color: var(--color-blanc);
}
@media screen and (min-width: 0px) and (max-width: 1000px) {		
	#Home h1{
		font-size: 7em;
		width: 100%;
	}
	.Incrustation_video{display: none;}
}

/*header*/
header{
	width: 100vw;
	display: flex;
	text-align: center;
	justify-content: space-between;
	align-items: center;
	background: transparent;
	border-bottom: 2px solid var(--color-blanc);
	position: absolute;
	z-index: 5;
	color: var(--color-blanc);		
}
.header_titre{
	font-size: 30px;
	padding-left: 20px;		
	text-align: left;
}
.header_menu{ width: 40%; }
.header_menu ul{		
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;		
}
.header_menu ul li{
	margin: 15px 30px 15px 30px;
	list-style: none;		
} 
.header_menu ul li a{
	color: var(--color-blanc);
	text-decoration: none;
	font-size: 20px;
	font-weight: 700;
}
.header_boutons{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
}
.header_bouton{
	font-size: 15px;
	padding: 7px 20px 7px 20px;
	margin: 20px 20px 20px 20px;
	border: 1px solid var(--color-blanc);
	text-align: center;
	font-weight: 600;
	box-shadow: 0px 0px 0px 2px rgb(255 255 255 / 95%);
	transition: 0.3s;
}
.header_bouton:hover{
	transition: 0.5s;
	box-shadow: none;
}
@media screen and (min-width: 0px) and (max-width: 1300px) {
	header{ 
		flex-direction: column; 
		justify-content: left;
	}
	.header_titre{ display: none;}
	.header_menu{ 
		margin: 15px;			
		width: 100%; 
	}
	.header_boutons{
		justify-content: space-between;
		width: 80%;
	}
}

/*decoration*/
.lumiere{
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: var(--color-blanc);
	filter: opacity(50%) blur(70px);		
	position: absolute;
	z-index: 2;				
}	
.lum-1{
	top: 0;
	background: var(--color-blanc);
	animation: 3s ease-in animLumieres infinite;
}
@keyframes animLumieres{
	0%,100%{
		filter: opacity(50%) blur(70px);
	}
	50%{
		filter: opacity(50%) blur(50px);
	}
}

/*Section de téléchargement*/
#Download{
	width: 100vw;
	height: 100vh;
	background: var(--color-bleu);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	overflow: hidden;
}
#dowload_maison{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	min-width: 100vw;
	margin: 0;
}
#dowload_maison img{
	width: 20%;				
}			
.download_partie{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
.download_partie p{
	color: var(--color-blanc);
	text-align: center;
	font-size: 23px;
	max-width: 40vw;
	font-weight: 800;
	margin-bottom: 50px;
}
.download_partie p a{
	text-decoration: none;
	color: var(--color-rouge);
	transition: 0.5s;
}
.download_partie p a:hover{
	transition: 0.3s;
	filter: brightness(1.5);
}
.download_bouton{
	display: flex;
	justify-content: space-around;
	align-items: center;
	color:  var(--color-blanc);
	font-size: 30px;
	width: 250px;
	border:  1px solid var(--color-blanc);
	padding: 5px 30px 5px 30px;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	box-shadow: 0px 0px 0px 2px rgb(255 255 255 / 95%);
	transition: 0.3s;
}
.download_bouton:hover{
	transition: 0.5s;
	box-shadow: none;
}
.download_bouton svg{
	width: 35px;
	height: 35px;
	margin-top: -8px;
}

/*Section d'aide*/
#Help{
	width: 100vw;
	height: 100vh;
	background: var(--color-bleu);
	display: flex;
	align-items: center;
	justify-content: space-around;
	overflow: hidden;		
}
#Help img{
	filter: opacity(20%);
	position: absolute;
	bottom: 20px;
	right: 20px;
	height: 50vh;		
}
#Help:before{
	content: 'Help';
	font-size: 210px;
	height: 80vh;
	width: auto;
	color: var(--color-blanc);
	-webkit-text-stroke:  4px black;
	filter: opacity(15%);
	position: absolute;
	bottom: 0;
	left: -4vw;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-align: right;
}
.help_gauche{
	width: 25vw;
	color: var(--color-blanc);
	border-radius: 20px;
	margin: auto 5vw auto 5vw;
	padding-left: 20px;
}
/*Partie droite*/
.help_incrustation_video{
	width: 50%;
	padding: auto 5vw auto 5vw;
	margin-top: 175px;
}
.help_incrustation_video iframe{
	width: 40vw;
	height: calc(40vw * 0.5625);
	border-radius: 10px;
}
.help_incrustation_video h3{
	text-align: left;
	color: var(--color-blanc);
}
@media screen and (min-width: 0px) and (max-width: 1200px) {
	#Help{
		flex-direction: column;
	}
	.help_incrustation_video{
		width: 100vw;
	}
	.help_incrustation_video iframe{
		width: 80vw;
		height: calc(80vw * 0.5625);
		margin-left: 10vw;
	}
	.help_incrustation_video h3{
		margin-left: 10vw;
		font-size: 50px;
	}
	.help_gauche{
		display: none;
	}
}

/*Section des statistiques*/
#Stats, #Profil{
	width: 100vw;
	padding: 5vh auto 5vh auto;
	background-color: var(--color-blanc);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: #1d2857;
}
.Stats_element{
	min-width: 300px;
	min-height: 100px;
	padding: 30px;
}
.Stats_element h4{
	text-align: center;
	font-size: 23px;
	color: black;
	filter: opacity(80%) contrast(500%);
}
.Stats_element h3{
	text-align: center;
	font-size: 40px;
	color: var(--color-blanc);
}

/*Section des classement*/
#Classement{
	width: 100vw;
	height: 100vh;
	background: var(--color-bleu);
	display: flex;
	justify-content: space-around;
	align-items: center;
}
#Classement h1{
	font-size: 20vw;
	color: #091126;
	width: 40%;
}
.Classement_element{
	background: var(--color-blanc);
	color: var(--color-bleu);
	border-radius: 40px;
	width: 400px;
}
.Classement_Title{
	text-align: center;
	width: 100%;				
	margin-bottom: 20px;
	margin-top: 20px;
}
.Classement_ligne{
	display: flex;
	align-items: center;				
	justify-content: space-evenly;				
	height: 100px;
}			
.points{
	position: absolute;
	right: 0;
	top: 0;
	margin-top:-2vw;
	font-size: 4vw;
	font-weight: bolder;
	color: #c9c40d;
}

/*Footer*/
footer{
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bleu);
}
footer p{
	width: 100vw;
	color: var(--color-blanc);
	text-align: center;
	background-color: var(--color-bleu);
	margin: 10vh auto 10vh auto;
}