/* Polices & global */

@font-face {
font-family: Merienda;
src: url(fonts/Merienda-Regular.ttf);
}

@font-face {
font-family: Merienda-Bold;
src: url(fonts/Merienda-Bold.ttf);
}

@font-face {
font-family: OpenSans-Light;
src: url(fonts/OpenSans-Light.ttf);
}

@font-face {
font-family: OpenSans-Regular;
src: url(fonts/OpenSans-Regular.ttf);
}


/*DESKTOP*/
@media (min-width: 769px)
{
	
	html,body 
	{
		height:100vh;
		width:100%;
		overflow-x: hidden;
		overflow-y: hidden;
		z-index: 300;
		position: relative;
	}

	header
	{
		height: 100%;
		position:relative;
		overflow: hidden;
	}

	#wrapper
	{
		overflow-y: scroll;
		overflow-x: hidden;
		width:100%; 
		height:100%;  
		perspective: 1px; 
		perspective-origin: center; 
		transform-style: preserve-3d; 
		margin: 0;
		scroll-behavior: smooth;
	}


	.button
	{
		cursor:pointer;
	}

	/* Menu de Navigation */

	#nav-row
	{
		padding-top: 1.25%
	}

	.nav-link, h1, h2, #decouvrir 
	{
		color: white !important;

	}

	.nav-link
	{
		font-family: OpenSans-Light !important;
		font-size: 17px !important;
		padding-left: 30px;
		padding-right: 30px;
		text-decoration: none !important;
		
	}
	.nav-link:after
	{
		  content: "";
		  display:flex;
		  width: 100%;
		  height: 2px;
		  background-color: white;
		  visibility: hidden;
		  transform: scaleX(0);
		  transition: all 0.3s ease-in-out 0s;
		  overflow: hidden;
	}

	.nav-link:hover:after
	{
		  visibility: visible;
		  -webkit-transform: scaleX(1);
		  transform: scaleX(1);
	}


	.nav-separation
	{
		height :50% ;
		transform: translate(0px,50%);
		border-right:solid 1px white;
		margin-left:1px;
		opacity: 0.3;
	}

	/* Bannière */

	#video-piano
	{
		 position:absolute; 
		 left:-0.5%; 
		 min-height:100%;
		 min-width:100.5%;
		 bottom:0;
		 padding: 0;
		 transform: translateZ(-1px) scale(2);
		 z-index: -1000;
	}

	#nom-banniere
	{
		position:relative;
		top:24%;
	}

	#cours-banniere
	{
		position: relative;
		top: 26%;	
	}

	#decouvrir-banniere
	{
		position: relative;
		top: 42%;
		z-index:1000;
		
	}

	#decouvrir-banniere-bouton
	{
		border:solid 2px white;
		height:8vh;
		width:30%;
		border-radius: 30px;
		box-sizing: border-box;
	}

	#decouvrir-banniere-bouton>a
	{
		text-decoration: none;
		display:block; 
		position: relative; 
		left:-10%; 
		width:120%; 
		height:100%; 
	}

	h2
	{
		font-family: Merienda-Bold !important;
		font-size: 77px !important;
	}

	h1
	{
		font-family: Merienda !important;
		font-size: 36px !important;
	}

	#decouvrir
	{
		font-family: OpenSans-Light !important;
		font-size: 22px !important;
		position: absolute;
		width: 100%;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}

	/* Articles */

	#photo-profil
	{
		max-width:17%;
		height:auto;
		z-index: 200; 
		left:50%; 
		transform: translateX(-50%); 
		position:absolute; 
		top:3%; border: 
		solid 3px #cc9966;"
	}

	#photo-profil>img
	{
		max-width: 100%; 
		object-fit: cover !important;
	}

	section
	{
		
		position:relative;
		background-color: #363636;
	}

	article>.row
	{
		max-height:125vh;
		position: relative;
		overflow: hidden;
	}


	.contenu-article
	{
		position: relative;
		margin-top:20%;
		margin-bottom: 15%;
	}


	.titre-article
	{
		position: relative;
		margin-top: 10%;
		margin-bottom: 10%;
		color: white;
		font-family: Merienda !important;
		font-size: 42px !important;

	}

	.separation-article
	{
		position: relative;
		width:124px; 
		height:0px; 
		border-bottom : 
		solid 1px #cc9966;
	}



	.cle-sol-article
	{
		position: absolute; 
		top: 20%; 
		right:0%; 
		opacity:0.3
	}

	.cle-fa-article
	{
		height: 40%; 
		position: absolute; 
		top: 30%; 
		right:0%; 
		opacity:0.3
	}


	.image-article
	{
	
		padding: 0 !important;
	}

	.image-article>img
	{
		height:100%;
		/*height:100%;*/ 
		object-fit: cover !important; 
		max-width: 100%;
	}

	footer
	{
		height: 62vh;
	}


	#contenu-footer
	{
		height:80%;
		width:100%;
		margin:0;
		position: relative;
	}

	#copyright-footer
	{
		height:20%;
		width: 100%;
		position: absolute;
		bottom : 0px;
		margin:0px;
		background-color: #605243;
	}

	#copyright
	{
		position: absolute;
		font-family: OpenSans-Light !important;
		font-size: 22px !important;
		color: white;
		display: block;
		width: 100%;
		top: 50%;
		text-align: center;
	  	transform: translate(0,-50%);
	}


	


}





/* Articles */






p

{
	
	font-family: OpenSans-Light !important;
	font-size: 19px !important;
	color: white;
}

.contenu-article>p
{
	
}

/* Footer */



footer
{
	
	overflow:hidden;
	position:relative;
	background-color: #333333;
	padding: 0;
}

#container-footer
{
	width:100%; 
	height:100%; 
	position: relative; 
	padding: 0;
}

#row-mail
{
	height:45%; 
	width:100%; 
	margin:0; 
	top:5%; 
	position: absolute;
}

#row-tel
{
	height:45%; 
	width:100%; 
	margin:0; 
	top:50%; 
	position: absolute;
}

#row-separation
{
	height:1px;
	position: absolute;
	top:50%;
	border-bottom: solid 1px #cc9966;
	width:40%; 
	left:10%;
}

.infos-footer
{
	position: relative; 
	height:100%;
}

#mail-footer
{
	font-family: OpenSans-Light !important;
	font-size: 22px !important;
	color:white;
	position: absolute;
	top:50%;
	transform: translate(0%,-50%);
}

#footer-mail-svg
{
	position: absolute;
	top:50%;
	transform: translate(0%,-50%);
	height:40%
}


#tel-footer
{
	font-family: OpenSans-Light !important;
	font-size: 22px !important;
	color:white;
	position: absolute;
	top:50%;
	transform: translate(0%,-50%);
}

#footer-tel-svg
{
	position: absolute;
	top:50%;
	transform: translate(0%,-50%);
	height:40%
}

#contactez-footer-div
{
	position: absolute;
	height: 55%;
	width: 90%;
	top:50%;
	transform: translate(0%,-50%);
	border: solid 1px #ff9966;
	transition: border-color 0.5s;
	text-align: center;
	border-radius: 45px;
	cursor:pointer;

}

#contactez-footer-div:hover
{
	border-color: white;
	transition: border-color 0.5s;

}


#contactez-footer
{
	font-family: Merienda !important;
	font-size: 22px !important;
	color:white;
	position: absolute;
	width: 100%;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);

}

#mesure-svg
{
	display: block;
	position: absolute;
	width: 100%;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	opacity: 0.5;
	height:70%

}