/*https://colorlib.com/preview/#education*/
/*http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php*/

/*http://www.frogweb.fr/menu-deroulant-horizontal/*/
/*https://coolors.co/*/
 
 /*un reset CSS des marges intérieures et extérieures*/
 body{ margin:0; padding:0;background-color:#fbfbff; }
 
 #container{
	 width:100%;
	 max-width:1200px;
/* background-color:red;*/
background-color:#ebf2fa;
 margin: 0 auto;
 box-shadow: 0 0px 10px #666666;
 
 }
 
 #header{
	/* background-color:yellow;*/
	 width:98%;
	 padding:10px;
	 padding-left:1%;
	 padding-right:1%;
	 
	 display: flex;
flex-wrap: wrap;
	 }
 
 #logo{
	 width:30%;
	 /*height:50px;*/
	 /*background-color:green;*/
	 text-align:center;
	 }

#logo img
{
width: 60%;
}	
	 
/****************************DEBUT MISE EN FORME MENU ***********************/	 
/*reset CSS des marges intérieures et extérieures pour les enfants directs de nav*/
nav#menu > ul {
	margin:0;
	padding:0
	}	


/*largeur du menu*/	
nav#menu{
	width:70%;
	/*background-color:#424558;*/
	
	
}

/*on aligne les items des enfants directs de #menu*/
#menu > ul {

display: flex;
flex-wrap: wrap;
}


 /*on supprime les puces*/
nav#menu li {
	list-style-type:none;
	} 

/*largeur des menus principaux,centrer horizontal et vertical*/	
 ul  li.nav-menu {
width:25%;
color:white;
text-align:center;
line-height:50px;
position:relative;
background-color:#0070bb;

}	

/*survol des lien parents*/
.nav-menu:hover{
	border-top:5px solid #0070bb;
	background-color:RGBa(000,112,192,0.15);
	height:45px; /*on enleve la bordure à la hauteur pour eviter le decalage*/
	
}

/*survol des lien parents qui ont un sous-menu*/
.nav-menu:hover .submenu{
	display:block;
	position:absolute;
	top:100%;
	padding:0px;
}


/*couleur lien*/
#menu  li a{
text-decoration:none;
color:white;
display:block; /*transforme en bloc pour augmenter la taille de survol*/

}

#menu  li a:hover{

color:black;


}	
	

/*on cache les sous-menu par defaut*/
.submenu{
	display:none;
	position: relative;
z-index: 1000;
	}

/* style des sous-menus*/	
.submenu li {
width:250px;
color:white;
line-height:50px;
background-color:RGB(000,160,240);
border-bottom:1px solid #ccc;
}

/*survol des liens des sous-menus*/
.submenu li:hover {

background-color:RGB(000,115,200);

}	

/****************************FIN MISE EN FORME MENU ***********************/	 


/*banner*/

#banner{
	
	width:100%;
	padding:1%;
	
}

#banner img{
	max-width:1200px;
	width:98%;
	border-radius:10px;
	
	display: block;/*pour l'animation pour utiliser top*/
position: relative;/*pour l'animation pour utiliser top*/
-moz-animation-name: chgt-position; /* Mozilla */
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 
 -webkit-animation-name: chgt-position; /* chrome,safari */
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 
 animation-name: chgt-position; 
 animation-duration: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}

/*Pour Mozilla*/
@-moz-keyframes chgt-position{
    0% {top: -20px; }
    100% {top: 20px; }

}

/*Pour chrome,safari*/
@-webkit-keyframes chgt-position{
    0% {top: -20px; }
    100% {top: 20px; }

}

/*standard*/
@keyframes chgt-position{
    0% {top: -20px; }
    100% {top: 20px; }

}

/*section 1*/

@media screen and (min-width: 890px){

#section1{
	padding:1%;
	width:98%;

	display: flex;
flex-wrap: wrap;
justify-content:Space-between;
}


#section1 article{
	width:68%;
	background-color:white;
	border-radius:10px;
	padding:10px;
}


#section1 aside{
	width:27%;
	background-color:white;
	border-radius:10px;
	padding:10px;
	transition: transform 5s;
}

}

#section1 article{
	/*transition: transform 1s;*/
	transition: box-shadow 0.3s , transform 0.3s ,background-color 3s; /*ou transition: 0.3s*/
	
}

#section1 article:hover{
	/*background:-moz-linear-gradient(top,red,yellow);*/
	transform: scale(1.02) ;
background-color:yellow; 	
box-shadow: 0 10px 20px rgba(0,0,0,0.19);
}


#section1 aside{
	
	transition: transform 2s;
}
#section1 aside:hover{
	
	transform:rotate(10deg);
}

@media screen and (max-width: 890px){
   #section1{
	padding:1%;
	width:98%;

}

#section1 article{
	width:98%;
	background-color:white;
	border-radius:10px;
	padding:10px;
}

#section1 aside{
	width:98%;
	margin-top:10px;
	background-color:white;
	border-radius:10px;
	padding:10px;
}

}





/*section 2*/
#section2{
	margin:1%;
	/*width:98%;*/

	background-color:white;
	border-radius:10px;

	padding:10px;
	

}

/*footer*/
@media screen and (min-width: 720px){
#footer{
width:98%;	
padding:1%;

display: flex;
flex-wrap: wrap;
justify-content:Space-between;

}

#footer nav{
	width:30%;
	background-color:white;
	border-radius:10px;
	padding:10px;
}

 /*on supprime les puces*/
#footer nav li {
	list-style-type:none;
	} 

	/*couleur lien*/
#footer  li a{
text-decoration:none;
color:black;
display:block; /*transforme en bloc pour augmenter la taille de survol*/

}

}

@media screen and (max-width: 720px){
#footer{
width:98%;	
padding:1%;



}

#footer nav{
	width:98%;
	margin-top:1%;
	background-color:white;
	border-radius:10px;
	padding:1%;
}

 /*on supprime les puces*/
#footer nav li {
	list-style-type:none;
	} 

	/*couleur lien*/
#footer  li a{
text-decoration:none;
color:black;
display:block; /*transforme en bloc pour augmenter la taille de survol*/

}

}