/*!**** Header */

div.header {
  background: #ffffff;
  opacity: 0.95;
  position: absolute; /* par rapport à body, et pour le z-index */
  z-index: 50;
  left: 0px;
  top: 20px;
  height: 85px;
  width: 100%;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}

div.header div.in-body {
  position: relative; /* pour les positionnements absolus */
  height: 100%;
}

div.header img.logo {
  position: absolute; /* par rapport à div.header div.in-body */
  top: 20px;
  left: 30px;
}

div.header a.login-button {
  position: absolute; /* par rapport à div.header div.in-body */
  bottom: 0px;
  left: 100px;
  background: url(/site/images/login.png) center center no-repeat;
  width: 43px;
  height: 16px;
  text-indent: -9999px;
}

div.body-header {
  background: url(/site/images/bg-header.jpg) center top no-repeat;
  position: absolute; /* par rapport à body, et pour le z-index */
  z-index: 5;
  left: 0px;
  top: 0px;
  height: 355px; /* bg-header.jpg fait 240px de haut mais les images-titres des pages de texte font 355px */
  width: 100%;
}

/*!**** Menu */

/* Barre de menus */

div.header ul.menu-bar {
  position: absolute; /* par rapport à div.header div.in-body */
  top: 25px;
  right: 30px;
  background: url(/site/images/logo-ee.png) right center no-repeat;
  padding-right: 60px;
}

ul.menu-bar > li {
  display: inline-block;
  padding-top: 0em; /* ràz le réglage général des li */
}

ul.menu-bar > li.entree {
  position: relative; /* pour les positionnements absolus des sous-menus */
  border-right: 1px solid #eeeeee;
}

ul.menu-bar > li.entree > a {
  display: inline-block;
  color: #cccccc;
  font-size: 0.9em;
  font-weight: bold;
  padding: 0.4em 1em;
  margin: 0px 1em;
  border-bottom: 3px solid transparent; /* pour éviter un saut à l'apparition de la border-bottom au hover */
  border-top: 3px solid transparent; /* pour maintenir le centrage du "ee" */
}

ul.menu-bar > li.entree > a:hover,
ul.menu-bar > li.entree.selection > a,
ul.menu-bar > li.entree.menu-ouvert > a {
  text-decoration: none;
  color: #000000;
  border-bottom: 3px solid #dfff00;
}

ul.menu-bar > li.entree.menu-ouvert > a {
  cursor: default;
}

/* Menus */

ul.menu ul.menu li.separateur {
  display: none;
}

ul.menu-bar ul.menu li.entree span {
  display: inline-block;
  font-size: 0.8em;
  font-weight: bold;
  padding: 0.8em 1em;
  line-height: 1;
  white-space: nowrap;
}

ul.menu-bar > li.entree > ul.menu {
  position: absolute; /* par rapport à l'entrée du menu */
  min-width: 100%;
/*   opacity: 0.8; */
  margin-top: 10px;
  padding-top: 10px;
  background: transparent url(/site/images/triangle-menu.png) 50px top no-repeat;
}

ul.menu-bar > li.entree > ul.menu > li.entree {
  display: block;
  padding-top: 0em; /* ràz le réglage général des li */
  background-color: #dfff00;
}

ul.menu-bar > li.entree > ul.menu > li.entree:first-child {
  padding-top: 0.6em;
}

ul.menu-bar > li.entree > ul.menu > li.entree:last-child {
  padding-bottom: 0.6em;
}

ul.menu-bar > li.entree > ul.menu > li.entree > a {
  display: inline-block;
  color: #808852;
  text-transform: none;
  width: 100%;
  cursor: default; /* pour le cas des a sans href */
}

ul.menu-bar > li.entree > ul.menu > li.entree > a[href]:hover {
  color: #494949;
  background-color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

ul.menu-bar > li.entree > ul.menu > li.entree > a[^href] {
}

/* Sous-menus */

ul.menu-bar > li.entree > ul.menu > li.entree ul.menu {
  margin-left: 1em;
  margin-bottom: 0em; /* ràz le réglage général des ul */
}

ul.menu-bar > li.entree > ul.menu > li.entree li.entree {
  display: inline-block;
  padding-top: 0em; /* ràz le réglage général des li */
}

ul.menu-bar > li.entree > ul.menu > li.entree li.entree:before {
  content: "•";
  font-size: 0.8em;
  margin-left: 0.25em;
  margin-right: -0.25em;
}

ul.menu-bar > li.entree > ul.menu > li.entree li.entree a {
  color: #808852;
}

ul.menu-bar > li.entree > ul.menu > li.entree li.entree a:hover {
  color: black;
  text-decoration: none;
}

ul.menu-bar > li.entree > ul.menu > li.entree li.entree a span {
  font-weight: normal;
  padding: 0.5em 0.5em;
}


/*!**** Page */

div.body {
  padding-top: 105px; /* = header.bottom = 20 de top + 85 de height */
  padding-bottom: 220px; /* hauteur du footer */
  min-height: 300px; /* juste pour faire joli */
}

div.page {
  position: relative; /* pour les positionnements absolus et le z-index */
  z-index: 10;
}

div.page-header {
  height: 250px; /* = 355px de div.body-header - 105px de padding-top de div.body */
}

/* Colonnes */

div.deux-colonnes {
  overflow: hidden; /* Pour que le div contienne tous ses floats */
}

div.deux-colonnes > div {
  float: left;
}

div.deux-colonnes > div.grande-colonne {
  width: 600px;
  padding: 10px;
}

div.deux-colonnes > div.petite-colonne {
  width: 350px;
  padding: 20px;
}

div.deux-colonnes > div.colonne-gauche {
  margin-left: 14px;
}

div.deux-colonnes > div.grande-colonne.sans-marges {
  padding: 0px;
}

div.deux-colonnes > div.grande-colonne.grande-largeur {
  width: 674px;
}

div.deux-colonnes > div.petite-colonne.sans-marges {
  padding: 0px;
}

div.deux-colonnes > div.colonne-gauche.sans-marges {
  margin-left: 0px;
}

/* Contenu */

div.contenu {
  padding-bottom: 1.5em;
}


/*!**** Footer */

div.footer { /* /!\ reporter la hauteur en padding-bottom du div.body plus haut dans ce fichier */
  position: relative; /* pour les positionnements absolus et le z-index */
  position: absolute; /* par rapport à body, et pour le z-index */
  z-index: 10;
  left: 0px;
  bottom: 0px;
  width: 100%;
  background-image: linear-gradient(150deg, #556066, #222929); /* TODO: tester sur FF & IE */
  background-image: -webkit-linear-gradient(-60deg, #556066, #222929);
  color: #888888;
  font-size: 0.8em;
}

div.footer table.sitemap {
  margin: 20px 20px 0px;
}

div.footer table.sitemap td {
  width: 220px;
  padding-left: 20px;
  padding-right: 5px;
  border-right: 1px solid #333;
  vertical-align: top;
}

div.footer table.sitemap li.produit {
  float: left;
  margin-right: 1.5em;
}

div.footer table.sitemap li:first-child.produit {
  /* on rétablit le padding standard, annulé ordinairement pour le 1er item, dans le cas où ce 1er item est ".produit", parce qu'ils sont float
     et qu'il y en aura d'autres sur la même ligne; ça crée un espace plus grand dans la colonne PRODUITS, mais ça s'en ira dès qu'on aura
     autre chose à mettre au-dessus */
  padding-top: 0.5em;
}

div.footer table.sitemap li.produit:before {
  content: "•";
  padding-right: 0.25em;
}


div.footer div.signature {
  text-align: center;
  line-height: 1.4;
  margin: 1.5em;
  border-top: 1px solid #333333;
  padding-top: 1.5em;
}

div.footer div.signature a {
  text-decoration: underline;
}

div.footer h3 {
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 2em;
}

div.footer h3:first-child {
  margin-top: 0em;
}

div.footer a {
  color: #888888;
}