/*-----Grands Ecrans-----------------*/

@media all and (min-width: 1024px) and ( max-width: 2000px){
	body{
		width: auto;
	}

h1{

	margin-bottom: 10px;

	text-align: center;
	margin-top: ;
	font-family: calibri;
}

p{
	font-family: calibri;
	}
	
header{
	width: 100%;
	height: auto;

}

.div_logo{
	margin-top: -70px;
}
.slogan{
	margin-top: -5px;
	color: red;
}


main{
	height: 100%;
	width: 100%;
}
  
nav{
	background-image: url("./fond_lune.jpg");
	height: 240px;
	display: flex;
	margin-bottom: 1%;
}

main nav a p{
	margin-top: 190px;
    color: yellow;
}


a{
	color: blue;
	text-decoration: none;
	margin-left: 5%;
	font-size: 120%;
}

a:hover{
	color: red;
}


section{
	
	height: 100%;
	padding: 20px;
}

footer{
	background: black ; 
	height:150px ;
	color: white;
	margin-top: 20%;
	text-align: center;
}

.div_contact{
	display: flex;
	margin-left: 35%;
}

.nav_div{
	display: flex;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}

.div_section{
	display: flex;
}

.numerique,.sante{
	margin-right: 5px;
}

.p_article{
	text-align: center;
}

.a_article{
	/*color: green;*/
	font-size: 90%;
}

.ul_droit{
	text-align: left;
}

}
/*---------Moyens Ecrans----------------*/

@media screen and (min-width: 750px) and (max-width: 1023px){

body{
	width: 100%;
	height: auto;
}

header{
	width: 100%;
	height: 150px;
}

h1{
		text-align: center;
	}


	p{
		font-family: calibri;
	}

	.logo{
		width: 80px;
		height: 80px;
	}

	.div_logo{
		margin-left: 10px;
		margin-top: -70px;
	}

	.slogan{
		color: red;
	}

	nav{
		height: 200px;
		background-image: url("./fond_lune3.jpg");
		margin-top: -15px;
		display: flex;
	}

	nav a{
		color: yellow;
		font-size: 20px;
		margin-left: 20px;
		margin-top: 150px;
	}

	a:hover{
		color: red;
	}

	.div_section{
		display: flex;
	}

	section{
		padding: 25px;
	}
	
	.numerique{
		background: ivory;
	}	

	.droit{
		background: cornsilk;
	}

	a{
		text-decoration: none;
		color: blue;
	}

footer{
	background: black;
	color: white;
	text-align: center;
	padding: 3px;
}

footer a{
	color: yellow;
}


}

/*--------Petits Ecrans---------------------*/

@media screen and (max-width: 749px){
	body{
		width: 100%;
		height: auto;
	}
	
	header{
		width: 100%;
		height: 100px;
	}

	h1{
		text-align: center;
	}

	p{
		font-family: calibri;
	}
  
	.logo{
		width: 60px;
		height: 60px;
	}

	.div_logo{
		display: flex;
		margin-top: -35px;
		margin-left: 5px; 
	}

	.slogan{
		color: red;
	}


nav{
	background-image: url("./fond_lune2.jpg");
	width: 100%;
	height: 150px;
	margin-top: 0px;
	display: flex;

}
  nav a{
 	text-decoration: none;
 	color: yellow; 
 	margin-left: 20px;
 	margin-top: 90px;	
 }

 a{
 	margin-left: 20px;
 	text-decoration: none;
 	color: blue;
 }

 a:hover{
 	color: red;
 	transform: scale(1.2);
 }


  .nav_div, .div_section{
  	text-align: center;
  	margin-left: 0px;
  }

section{
	margin-bottom: 10px;
}

.numerique{
	background: ivory;
	padding: 20px;
}

.sante{
	padding: 20px;
}

.droit{
	background: cornsilk ;
	padding: 15px;
	margin-left: -2px;
	margin-right: -5px;
}

li{
	list-style-type: none;
}

footer{
	background: black;
	color: white;
	text-align: center;
	padding: 0px;
	margin-top: -8px;

}

footer a{
	color: yellow;
	margin-left: 20%;
}

.div_contact{
	display: flex;
}
  
}
/*------------------------------------------------*/

.bande-accueil{
	/*background-image: url('./bande_jour.png');*/
	background-image:linear-gradient(white,lightyellow) ;
	width: auto;
	height: 150px;
	text-align: center;
	color: midnightblue;
	font-size: 180%;
}