@media screen and (max-width: 800px) {
	
		body{
			margin: 0px;
			padding: 0px;
			font-family: Calibri, Sans Serif;
			background: linear-gradient(to right, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
		}
		
		.navigation{
			background: linear-gradient(to left, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
			width: 100%;
			position: sticky;
			height: auto;
			z-index: 100;
			top: 0px;
			margin: 0px;
			padding: 0px;
		}
		
		.liste_ul{
			display: flex;
			width: 100%;
			align-items: left;
			justify-content: left;
			margin: 0px 0px 0px 40px;
			padding: 0px;
		}
		
		a{
			text-decoration: none;
			color: rgb(100,100,100);
		}		

		a:visited{
			color: rgb(150,150,150);
		}
		
		li{
			list-style-type: none;
		}
		
		.liste_li{						
			flex-direction: column;
			margin-left: 20px;				
			padding: 10px;
		}
		
		#premier_li{
			margin-left: 0%;
		}		
		
		.fa-solid{
			font-size: 16px;		
		}
	
		.contact{
			display: flex;
			flex-direction: column;			
			height: 400px;
			width: 100%;
		}
		
		.types-contacts{
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,225,255), rgb(240,255,220));
			width: 100%;
			height: 34%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}
		
		.zone-contact{
			font-size: 20px;
			font-weight: bolder;
			color: #333;
			font-size: 14px;
			padding: 20px;
		}
		
		.contact-par-mail{
			background: linear-gradient(to right, rgb(240,255,255), rgb(225,255,255), rgb(210,255,255));
			width: 100%;
			height: 22%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}
		
		.bouton-mail{
			border-color: cyan;
			background: linear-gradient(to right, rgb(200,255,255), rgb(185,255,255), rgb(170,255,255));			
		}
		
		.bouton-mail:hover{			
			background: linear-gradient(to right, rgb(100,255,255), rgb(85,255,255), rgb(070,255,255));
		}
		
		.contact-par-sms{			
			background: linear-gradient(to left, rgb(240,205,255), rgb(255,225,255), rgb(255,210,255));
			width: 100%;
			height: 22%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}
		
		.bouton-message{
			border-color: rgb(255,0,255);
			background: linear-gradient(to right, rgb(255,200,255), rgb(255,185,255), rgb(255,170,255));
		}
		
		.bouton-message:hover{			
			background: linear-gradient(to right, rgb(255,100,255), rgb(255,85,255), rgb(255,70,255));
		}
		
		.contact-par-telephone{
			background: linear-gradient(to right, rgb(255,255,240), rgb(255,255,225), rgb(255,255,210));
			width: 100%;
			height: 22%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}

		.bouton-phone{
			border-color: yellow;
			background: linear-gradient(to right, rgb(255,255,200), rgb(255,255,185), rgb(255,255,170));
		}
		
		.bouton-phone:hover{		
			background: linear-gradient(to right, rgb(255,255,100), rgb(255,255,85), rgb(255,255,70));
		}
		
				
		.bouton-contact{
			border-radius: 10px;
			padding: 10px;
			cursor: pointer;
		}
		
		.contact-moi, .fa-envelope, .fa-sms, .fa-mobile-alt{
			font-size: 18px;
		}	
}		
		
@media screen and (min-width: 801px) {
	
		body{
			margin: 0px;
			padding: 0px;
			font-family: Calibri, Sans Serif;
			background: linear-gradient(to right, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
		}
		
		.navigation{
			background: linear-gradient(to left, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
			width: 100%;
			position: sticky;
			height: auto;
			z-index: 100;
			top: 0px;
			margin: 0px;
			padding: 0px;
		}
		
		.liste_ul{
			display: flex;
			width: 100%;
			align-items: right;
			justify-content: right;
			margin: 0px 0px 0px -80px;
			padding: 0px;
		}
		
		a{
			text-decoration: none;
			color: rgb(100,100,100);
		}		

		a:visited{
			color: rgb(150,150,150);
		}
		
		li{
			list-style-type: none;
		}
		
		.liste_li{						
			flex-direction: column;
			margin-left: 40px;				
			padding: 10px;
		}
		
		#premier_li{
			margin-left: 0%;
		}		
		
		.fa-solid{
			font-size: 24px;		
		}
		

		.contact{
			display: flex;
			flex-direction: column;			
			height: 800px;
			width: 100%;
		}
		
		.types-contacts{
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,225,255), rgb(240,255,220));
			width: 100%;
			height: 25%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}
		
		.zone-contact{
			font-size: 20px;
			margin-right: 100px;
			margin-left: 100px;
			font-weight: bolder;
			color: #333;
		}
		
		.contact-par-mail{
			background: linear-gradient(to right, rgb(240,255,255), rgb(225,255,255), rgb(210,255,255));
			width: 100%;
			height: 25%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}
		
		.bouton-mail{
			border-color: cyan;
			background: linear-gradient(to right, rgb(200,255,255), rgb(185,255,255), rgb(170,255,255));			
		}
		
		.bouton-mail:hover{			
			background: linear-gradient(to right, rgb(100,255,255), rgb(85,255,255), rgb(070,255,255));
		}
		
		.contact-par-sms{			
			background: linear-gradient(to left, rgb(240,205,255), rgb(255,225,255), rgb(255,210,255));
			width: 100%;
			height: 25%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}
		
		.bouton-message{
			border-color: rgb(255,0,255);
			background: linear-gradient(to right, rgb(255,200,255), rgb(255,185,255), rgb(255,170,255));
		}
		
		.bouton-message:hover{			
			background: linear-gradient(to right, rgb(255,100,255), rgb(255,85,255), rgb(255,70,255));
		}
		
		.contact-par-telephone{
			background: linear-gradient(to right, rgb(255,255,240), rgb(255,255,225), rgb(255,255,210));
			width: 100%;
			height: 25%;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			justify-content: center;			
			align-items: center;
		}

		.bouton-phone{
			border-color: yellow;
			background: linear-gradient(to right, rgb(255,255,200), rgb(255,255,185), rgb(255,255,170));
		}
		
		.bouton-phone:hover{		
			background: linear-gradient(to right, rgb(255,255,100), rgb(255,255,85), rgb(255,255,70));
		}
		
				
		.bouton-contact{
			border-radius: 10px;
			padding: 10px;
			cursor: pointer;
		}
		
		.contact-moi, .fa-envelope, .fa-sms, .fa-mobile-alt{
			font-size: 36px;
		}
}