/******** Structure de la page ********/

body.construction { border: 1px dashed #999; }
body.construction div.header { border: 1px dashed #ccf; }
body.construction div.header h1 { border: 1px solid #ccf; }
body.construction div.left-column { border: 1px dashed #6f6; }
body.construction div.bloc { border: 1px dashed #f33; }


html {
  background: white;
}

body {
  position: relative;
  z-index: 0;
  /* margin-top set programmatically */
  font-family: Garamond, "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', EBGaramond, Baskerville, "Baskerville Old Face", serif;
}

sup {
  line-height: 0
}

/******** En-tête ********/

div.header {
  position: fixed;
  z-index: 10;
  background: white;
  top: 0px;
  left:0px; /* adjusted programmatically */
  width: 100%;
}

div.header {
  padding-top: 30px;
  padding-bottom: 30px;
}

@media screen and (max-device-width: 768px) { /* 768px est la largeur de l'iPad -- je crois */
  div.header {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

div.header h1 {
  position: relative;
  text-align: center;
  margin: 20px 120px 0px;
  /* font-size set programmatically */
  z-index: 0;
}

div.header h1 div.surtitre {
  position: absolute;
  top: -1em;
  left: 50%;
  margin-left: -3.7em;
  color: rgb(240, 240, 240);
  font-size: 0.2em;
  text-transform: lowercase;
}

div.header h1 a {
  color: #eeeeee;
  text-decoration: none;
}

div.header h2 {
  text-align: center;
  margin-top: -0.3em;
  margin-left: 3%; /* to be centered wrt the image-text line */
  position: relative;
  z-index: 2;
}

/******** Pied de page ********/

div.signature {
  text-align: center;
  margin: 50px 0em 10px 10em;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: #ccc;
}

div.signature a {
  text-decoration: none;
  color: #ccc;
}

div.signature a:hover {
  color: #aaa;
}

/******** Colonne de gauche ********/

div.left-column {
  position: fixed;
  z-index: 10;
  top: 300px; /* adjusted programmatically */
  left:0px; /* adjusted programmatically */
}

div.left-column a.facebook {
  display: block;
  width: 30px;
  height: 30px;
  background: transparent url(/images/logo-facebook-gris.png) no-repeat center center;
  text-indent: -9999px;
  position: fixed;
  right: 20px;
  top: 10px;  opacity: 0.5;
}
div.left-column a.facebook:hover {  opacity: 1;}

/******** Menu ********/

ul.menu {
  margin-left: 1em;
  /* font-size set programmatically */
  font-weight: bold;
}

ul.menu li {
  /* margin-bottom set programmatically */
}

ul.menu a {
  text-decoration: none;
  color: #cccccc; /* hover color set locally */
}

/******** Blocs dans la page ********/

div.bloc {
  background-color: #eeeeee;
  /* height set locally */
  margin-bottom: 25px;
}

div.bloc div.image {
  float: left;
  background: white no-repeat right top;
  /* background-image set locally */
  background-size: contain;
  height: 100%; /* works only when/since container's height is set locally */
  width: 52%; /* relative to the width of the container (that is, div.bloc, which spans over the full page width) */
}

div.bloc div.texte {
  /* padding-top set programmatically */
  padding-bottom: 1px; /* Only so that the margin-bottom of last p isn't collapsed. */
  margin-left: 52%; /* = div.image.width */
  /* font-size set programmatically */
}

div.bloc div.texte h3,
div.bloc div.texte p,
div.bloc div.texte ul {
  margin-left: 0.75em;
}

div.bloc div.texte h3,
div.bloc div.texte span.h3 {
  text-align: left;
  line-height: 1.2em;
  font-weight: bold;
  margin-top: 0.15em;
  margin-bottom: 0.15em;
  margin-right: 0.5em;
}

div.bloc div.texte p {
  text-align: justify;
  line-height: 1.25em;
  margin-bottom: 0.85em;
  /* width set programmatically */
}

div.bloc div.texte span.five-em {
  display: inline-block;
  width: 5em;
}

div.bloc div.texte span.liaison {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

div.bloc div.texte b { font-weight: bold; }
div.bloc div.texte i { font-style: italic; }

div.bloc div.texte ul {
  list-style: square outside;
  margin-top: -0.65em;
  margin-bottom: 0.85em;
}

div.bloc div.texte li {
  text-align: justify;
  line-height: 1.2em;
  margin-bottom: 0.2em;
  margin-left: 2em;
}

div.badge {
  position: absolute;
  left: 83%;
  top: 50%;
}

div.bloc div.badge {
  width: 8em;
  height: 8em;
  margin-top: -5em; /* -(8em de hauteur + 2em de padding) / 2 */
  border-radius: 5em; /* cf margin-top */
  padding: 1em;
  /* background-color set programmatically */
}

div.bloc div.badge > a { text-decoration: none; }
div.bloc div.badge > a p { color: black; }

div.bloc div.badge p {
  /* font-size set programmatically */
  font-style: italic;
  text-align: center;
  line-height: 1.4em;
  margin: 0px;
}

body.page-horaires div.badge {
  top: 35%;
  padding: 0em;
}

body.page-horaires div.badge.telechargement {
  top: 65%;
  background-color: transparent !important;
  border: 4px solid rgb(153, 204, 0);
}
 
div.badge.annonce {
  position: fixed;
  left: 80%;
  /* top set programmatically */
  z-index: 10;
}
div.bloc a.facebook {
  float: left;
  width: 30px;
  height: 30px;
  background: transparent url(/images/logo-facebook.png) no-repeat center center;
  text-indent: -9999px;
  margin-right: 1em;
  margin-top: 0.3em;
}