:root {
  --padding: 60px;
  --padding2: 30px;
  --back: white;
}



html{
	position: relative;
	margin: 0;

	padding: 0;

	height: fit-content;



	font-family: 'Poppins', sans-serif;

/*background: rgb(2,0,36);

background: linear-gradient(5deg, rgba(2,0,36,1) 17%, rgba(0,0,0,1) 72%);*/

background: black;

scroll-behavior: smooth;

scroll-padding-top: 14vh;

overflow: scroll;

}




@keyframes animWebcup {
	0% {
		letter-spacing: 3px;
		opacity: 0%;
	}
	50%
	{
		opacity: 100%;
	}

	100% {
		letter-spacing: normal;
	}
}





body

{

	margin: 0;

	padding: 0;

	width: 100%;
	position: relative;

}









.header

{



	position:fixed;

	top: 0; /* vaut mieux fixer les valeurs par défaut pour ne pas avoir de mauvaises surprises */

	left: 0;

	right: 0;

	/*background: black;*/

	-webkit-backdrop-filter: blur(10px);

	backdrop-filter: blur(10px);

	z-index: 100;

	height: 14vh;

	min-height: 100px;

}



#logo

{

	height: 8vh;

	position: relative;

	left: 5%;

	top: 3vh;

}













.boutonsFlex

{

	position: absolute;

	max-width: 50%;

	height: 50%;

	right: 5%;

	top: 40%;



	display: flex;

	flex-direction: row-reverse;

	column-gap: 2vw;





	vertical-align: middle;



}



.boutons

{

	text-align: center;



	position: relative;



	text-decoration: none;

	color: white;

	font-size: 2.5vh;

}



.boutons:hover

{

	text-decoration: underline;

}





#corps

{

	background-color: var(--back);
	position: relative;

}







.partie_une

{

	position: relative;

	margin-top: 14vh;

	color: white;

	height: 86vh;

	background: black;

}



#titre

{

	text-align: center;

	font-size: 550%;

	margin-top: 6%;

	font-family: 'Montserrat', sans-serif;

}

#svg{
	
	width: 100%;
	position: absolute;
	bottom: 0;
}

#bienvenue

{

	text-align: center;

	font-size: 150%;

}



#scroll_down_button

{

	text-align: center;



	display: block;

	position: relative;

	width: 5%;

	left: 47.5%;

	top: 25%;



	filter: invert(100%);



	transition: filter 0.2s;



}



#scroll_down_button:hover

{

	filter: invert(50%);

}



#scroll_down_button > img

{

	width: 100%;

}






#corps h1

{

	text-align: center;

	font-family: 'Montserrat', sans-serif;

	align-items: center;

	margin-block: 0;
	padding-block: 0;

}

#corps p span{
	font-weight: bolder;
}




.partie_deux

{

	background-color: var(--back);
	display: none;


	position: relative;

	height: 300px;

	padding: 5%;

}



#nos_jeux_titre

{

	font-family: 'Montserrat', sans-serif;

/*margin-left: 3%;*/

text-align: center;

}





.presentoir_jeux

{

	overflow-x: scroll;

	margin-top: 5%;

	margin-left: 3%;

	display: flex;

	flex-direction: row;

	justify-content: space-around;

	gap: 5%;



	width: 94%;

}
.jeux
{
	display: none;
}

.jeuxM
{
	width: 150px;
	display: inline;
	border-radius: 15px;
	text-decoration: none;
}

.jeuxM img
{
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 100%;
	border-radius: 15px;
}

.jeuxM p
{
	text-decoration: none;
	text-align: center;
	color: black;
	font-weight: bolder;
}



.presentoir_jeux::-webkit-scrollbar {

	width: 16px;

}



.presentoir_jeux::-webkit-scrollbar-track {

	background-color: #e4e4e4;

	border-radius: 100px;

}



.presentoir_jeux::-webkit-scrollbar-thumb {

	background-color: black;

	border-radius: 100px;

}



.presentoir_jeux{

	scrollbar-width: thin;

	scrollbar-color: black;

}






#separateur

{

	width: 80%;

	margin-left: 10%;




	height: 2px;

	background-color: rgba(0, 0, 0, 0.6);

	border-radius: 3px;
	position: relative;

}







.partie_trois

{
	display: none;
	background-color: var(--back);

	padding: 5%;

	flex-direction: column;
	row-gap: var(--padding);

}






.partie_trois p

{

	font-size: 1vw;

	width: 70%;

	position: relative;
	left: 15%;
	margin-block: 0;
	padding-block: 0;
}

.partie_trois #hyperlienImage
{
	display: block;

	position: relative;

	left: 50%;

	width: 50%;

	transform: translateX(-50%);
}


.partie_trois img
{

	width: 100%;
	border-radius: 15px;

	transition: filter 0.2s;

}


.partie_trois img:hover
{
	filter: blur(5px);
}


#hyperlienImage img:hover ~ p
{
	display: initial !important;
	animation-duration: 2s;
	animation-name: animWebcup;
}

.partie_trois a p 
{
	font-family: 'Montserrat', sans-serif;

	font-size: 1vw;
	width: initial;
	color: White;
	font-weight: bolder;

	margin: 0;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
}







.partie_trois #hyperlien

{

	display: block;
	width: fit-content;
	padding-left: 5%;
	padding-right: 5%;
	background-color: transparent;

	position: relative;
	left: 50%;
	transform: translateX(-50%);

	border: solid 3px black;



	font-size: 1.5vw;

	text-align: center;

	text-decoration: none;

	color: black;




	transition: background-color 0.2s, color 0.2s;



}

.partie_trois #hyperlien:hover

{

	background-color: black;

	color: white;

}










.partie_quatre

{
	position: relative;
	background-color: var(--back);

	padding: var(--padding);

	display: flex;
	flex-direction: column;
	row-gap: var(--padding);
	margin: 0;

}



.partie_quatre p{

	font-size: 1vw;

	width: 70%;

	margin-left: 15%;
	margin-block: 0;
	padding-block: 0;


}

.partie_quatre #capturesGrid

{

	position: relative;

	width: 50%;

	left: 25%;
	gap: 2%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;


}

.partie_quatre #capturesGrid img{
	width: 100%;
	border-radius: 15px;
}





#rebondFlex

{

	display: flex;

	justify-content: center;

	gap: 2%;
	align-items: center;

}







#rebondFlex #logoParent
{
	width: 5%;
}

#rebondFlex img{

	width: 100%;
	border-radius: 15px;
	aspect-ratio: 1/1;

}







#rebond a

{

	display: block;
	width: fit-content;
	background-color: transparent;

	position: relative;
	left: 50%;
	transform: translateX(-50%);


	background-color: black;

	border: solid 5px black;
	border-radius: 15px;
	padding-inline: 2%;
	padding-block: 1%;



	font-size: 1.5vw;

	text-align: center;

	text-decoration: none;

	color: white;



	transition: background-color 0.2s, color 0.2s;



}



#rebond a:hover

{

	background-color: transparent;

	color: black;

}






.partie_cinq

{
position: relative;
	background-color: var(--back);


	padding: var(--padding);

	display: flex;
	flex-direction: column;
	row-gap: var(--padding);
	margin: 0;

}



.partie_cinq p{

	font-size: 1vw;

	width: 70%;

	margin-left: 15%;
	padding-block: 0;
	margin-block: 0;



}

.partie_cinq iframe

{

	position: relative;

	width: 50%;

	left: 25%;



}





#blendinFlex

{
	position: relative;
	display: flex;

	justify-content: center;

	gap: 2%;
	align-items: center;

}






#blendinFlex #logoParent
{
	width: 5%;
}

#blendinFlex img{

	width: 100%;
	border-radius: 15px;
	aspect-ratio: 1/1;

}







#blendin a

{

	display: block;
	width: fit-content;
	padding-left: 5%;
	padding-right: 5%;
	background-color: transparent;

	position: relative;
	left: 50%;
	transform: translateX(-50%);


	background-color: black;

	border: solid 5px black;
	border-radius: 15px;
	padding-inline: 2%;
	padding-block: 1%;




	font-size: 1.5vw;

	text-align: center;

	text-decoration: none;

	color: white;



	transition: background-color 0.2s, color 0.2s;



}



#blendin a:hover

{

	background-color: transparent;

	color: black;

}







#nous{
	position: relative;
	padding: var(--padding);
}


.nous_grid

{
	position: relative;
	left: 10%;
	width: 80%;
	margin-top: var(--padding);

	display: grid;

	grid-template-columns: 40% 60%;

}



#nous_logo

{

	filter: invert(100%);



	width: 40%;



	position: relative;

	left: 50%;

	top: 50%;

	transform: translate(-50%, -50%);

}





#nous_description

{

	width: 100%;

	font-size: 1vw;

}