:root {
  --main-fo-color: black;
  --main-ahover-color: #555;
  --main-actif-color: red;

  --menudegrade-0: #aaaaaa;
  --menudegrade-1: #cccccc;
  --menudegrade-2: #dddddd;
  --menudegrade-3: #eeeeee;
}


body {
  margin: 0; /* pour éviter les marges */
}

#global {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 95%;
  font: 1.0em "Open Sans", sans-serif;
}

ul#menu { 
  width : 100%;
  height : 18px;
  list-style-type : none;
  background-color : var(--bg);
}

ul#menu li {
  padding : 0 1em;
  float : left;
  font: 1.1em "Open Sans", sans-serif;
  /*border-left : 1px dashed black;*/
}

ul#menu a {
  color : var(--main-fo-color);
}

ul#menu a:hover {
  color : #555;
}


#affichage {
  /*content: "";*/
  /*display: table;*/
  /*clear: both;*/
  overflow: hidden;
}

.gauche {
  float: left;
}

#menuDates {
  width : 60px;
  background-color : var(--bg);
  height: 200 px;
  margin-right : 20px;
}

ul#menuDates { 
  width : 100%;
  list-style-type : none;
}

ul#menuDates a {
  color : var(--main-fo-color);
}

ul#menuDates a:hover {
  color : var(--main-ahover-color);
}

ul#menuParam { 
  width : 100%;
  height : 25px;
  list-style-type : none;
  background-color : #bbbbbb;
}

ul#menuEcheances {
  width : 90%;
  height : 36px;
  list-style-type : none;
  background-color : var(--bg);
}

ul#menuEcheances li {
  padding : 0 0.5em;
  float : left;
  font: 1.1em "Open Sans", sans-serif;
}

ul#menuEcheances a {
  color : var(--main-fo-color);
}

ul#menuEcheances a:hover {
  color : #555;
}

.actif {
  color: var(--main-actif-color);
  /*color : red;*/
}

.actif a {
  color: var(--main-actif-color);
  /*color : red;*/
}

#fond {
  width: 100%;
  background-color : var(--bg);
}