@media (max-width: 768px) /* Tablette & petits écrans */
{
	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: 22px !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:-50%; 
		 min-height:100%;
		 min-width:100.5%;
		 bottom:0;
		 padding: 0;
		 transform: translateZ(-1px) scale(2);
		 z-index: -1000;
	}

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

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

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

	#decouvrir-banniere-bouton
	{
		border:solid 2px white;
		height:9vh;
		width:35%;
		border-radius: 35px;
		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: 30px !important;
		position: absolute;
		width: 100%;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}

	/* Articles */ 

	.article-texte-div
	{
		height:60%;
		padding: 0 15%;
	}

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

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

	section
	{
		min-height: 100%;
		overflow:hidden;
		position:relative;
		background-color: #363636;
	}

	article>.row
	{
		min-height:100vh;
		position: relative;
		overflow: hidden;
	}


	.contenu-article
	{
		position: relative;
		/*margin-top:40%;*/
	}

	.image-article
	{
		width:100%; 
		height:40%; 
		margin-top: 10%;
		padding: 0 !important;
	}

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

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

	}

	.separation-article
	{
		position: relative;
		margin-bottom: 15%;
		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
	}

	footer
	{
		height:50vh;
	}


	#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%);
	}


	#tel-footer, #mail-footer
	{
		margin-left:6%;
	}

	
}