* {margin: 0;
padding: 0;}

/* Menu */

#header {margin-top: 0;}

#nav {overflow: auto;
background: black;}

#menu ul, #menu li {list-style-type:none;
height: 2.9em;}

#menu li {float:left;
width:14.2%;
text-align:center;}

#menu a {display:block;
text-decoration: none;
font-family: "Helvetica Neue";
font-size: 1.2em;
color:#ffffff;
line-height:200%;
padding-top:0.2em;}

#menu #en-cours {color: #cfcccc;}
	
#menu a:hover {color: #dcd9d9;}

.loupe {width: 16px;
height: 16px;
margin-top: 0.62em;}

#recherche h2 {font: 195%/100% "Helvetica Neue", Helvetica;
text-align: center;
font-size: 1.5em;
margin: 1em 0 1.5em 0;
color: #464646;}

#recherche {width: 85%;
padding-top: 4em;
padding-bottom: 3em;
margin: auto;}

/* Fin du menu */

.hr {width: 85%;
margin-left: 4.5em;
border: 0 none #c7c2c2;
border-top: 1px solid #ddd;
clear: both;
margin-bottom: 2.5em;}

h1 {font: 195%/100% "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
margin-top: 2.5em;
margin-bottom: 1em;
margin-left: 2.1em;
margin-right: 2em;
color: #6d6b6b;
font-size: 2em;}

h5,h4,h2,h3 {margin-top: 30px;
margin-bottom: 30px;
padding-left: 70px;
padding-right: 50px;
color: #3d3c3c;}

/* footer */

#footer {width: 80%;
font-size: 0.9em;
margin-bottom: 5em;
margin-left: 5.7em;}

#footer p {padding: 1em 1em 2em 0;}

/* Fin du footer */

#chemin {width: 88%;
padding: 0.5em 0 0.5em 1em;
margin: auto;
margin-top: 6em;
margin-bottom: 1em;
text-align: left;
font: 0.9em "Helvetica Neue", Helvetica;
background-repeat: repeat-x;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

a {color: #008bcc;
text-decoration: none;
outline: none;}

a:hover, a:active {text-decoration: underline;}

.niveau {border-style: none;
margin:0px 10px -5px 0px;}

.banniere {text-align:center;
margin:auto;
margin-top: 100px;
margin-bottom: 80px;}

.publicite1 {text-align:center;
margin:auto;}

@media screen and (max-width: 640px)

{
	
#menu a {display:block;overflow: scroll;}

#menu li {float:none;
	width:100%;}
	
#menu {clear:both;
	width:100%;height: 50px;}
	
#chemin {width:85%;margin-left:1em;margin-top:2em;}

.hr {width:85%;margin: auto;}

h1 {margin: 2em 0.5em 1.5em 0;
	padding-left: 0.6em;
font-size: 1.6em;}

#footer {width:90%;
	margin-left:1.2em;
	font-size:0.9em;
	margin-top:2em;
	margin-bottom: 2em;}
	
.publicite {display: none;margin: 0;}

.publicite1 {display: none;margin: 0;}
	
}

@media (prefers-color-scheme: dark) {

#nav {background: #262626;}

#chemin {border: 1px solid #fff;
color: white;}

h1, h2, h3, h4, h5 {color: white;}
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #848484;
  color: black;
}

.topnav a.active {
  background-color: #484848;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}