/* Menu */

#header #menu {
  width: 1024px;
  font-size: 15px;
  line-height: 18px;
  background: #ffffff;
  position:center;
  margin-left:auto;
  margin-right:auto;
  
  
  /*
  display:block; 
    background:#3f3f3f; 
    margin:0 auto; 
    padding:20px; 
    width:260px;
    box-shadow:0 1px 3px #171717;*/
}
  
#menu li {
  float: left;
  /*
  display:block; 
    padding:8px 10px 8px 5px; 
    margin:0;
    border-bottom:solid 1px #2e2e2e;
    border-top:solid 1px #4c4c4c;
	*/
}

#menu a {
  padding: 13px 13px;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  color: #525252;
}
/*
#menu a:hover,
#menu a:focus {
  color: #523296;
} 
*/
/*
#menu #en-cours a {
  background: #523296;
  color: #ffffff;
}*/

#menu li:first-child{border-top:none;} /* le selecteur first-child permet 
de cibler le premier élément pour lui enlever la bordure */
#menu li:last-child{border-bottom:none;} /* le selecteur last-child permet 
de cibler le dernier élément pour lui enlever la bordure */

#menu li a:before{
/* création de la puce avec le selecteur before et l'élément content */
    content:''; 
    display:inline-block; 
    width:6px; 
    height:6px; 
    background:/*#707575; */ #ffffff;
    margin-right:5px; 
    margin-bottom:2px;
}
#menu li a{
    font-family: 'Exo 2', sans-serif;
    font-size:18px; 
    color:#000000; 
    text-decoration:none;
}
/* transition */
#menu li,
#menu li:hover,
#menu li a, 
#menu li:hover a,  
#menu li a:before, 
#menu li:hover a:before{transition : all 0.4s ease-out;} 

#menu li:hover a:before{
	
    background:#0052BC;
    width:6px; /* on agrandi la taille du carré lors du survol de la liste */
    height:6px;
    
	margin-right:5px; /* on déplace également le carré */
    margin-bottom:2px; 
    transform:rotate(405deg); /* on fait faire une rotation de la puce */
    -webkit-transform:rotate(405deg); /* pour google chrome, safari et android */
	-moz-transform: rotate(405deg);
	-o-transform: rotate(405deg);
	
}
#menu li:hover a, #menu #en-cours a{
    /*padding:0 0 0 10px;*/ /* au survol de la liste on déplace le lien en lui 
donnant un padding de 10px à gauche */
	padding: 13px 13px;
    color:/*#1dd9e0;*/#0052BC;
	border-bottom:solid 1px #1dd9e0;;
}