/*!**** Styles généraux */

a.email {
  color: blue;
}

/* Petit R entouré d'un rond et autres exposants */

sup {
  line-height: 0;
}

sup.copyright {
  font-size: 75%;
  margin-right: 0.15em;
}

/*!**** Textes et images de contenus */

div.contenu p, div.contenu ul {
  font-weight: 300;
  font-size: 90%;
  padding-right: 5em;
}

div.contenu ul {
  list-style: disc;
  margin-left: 2em;
}

div.contenu ul.sans-puce {
  list-style: none;
}

a.to-top { /* pas utilisé */
  display: block;
  cursor: pointer;
  text-align: right;
  font-size: 0.9em;
  margin: 0.75em -0.5em;
  padding-top: 0.75em;
}

/* Titres */

div.contenu h1 {
  font-family: Interstate, sans-serif;
  font-weight: 200;
  font-size: 3em;
  line-height: 0.9;
  margin-top: 0.5em;
}

div.contenu .adroite + h1 {
  padding-top: 1em;
}

div.contenu h1 .sous-titre {
  display: block;
  font-size: 0.6em;
  line-height: 1.2;
}

div.contenu h2 {
  font-family: Interstate, sans-serif;
  font-weight: 200;
  font-size: 2em;
}

div.contenu h2 a {
  text-decoration: none;
  color: #666666; /* on utiliserait volontiers inherit, mais ce n'est pas supporté par IE7 */
}

div.contenu h2 img {
  display: block;
}


/* Images dans le texte */

div.illustration {
  margin: 1em 0em;
}

div.illustration.agauche {
  float: left;
  margin: 0px 1em 1em 0px;
}

div.illustration.adroite {
  float: right;
  margin: 0px 20px 1em 1em;
}

div.illustration img {
  display: block;
  margin: 0px auto;
  max-width: 100%;
}

div.illustration p {
  text-align: center;
  font-size: 0.75em;
  color: #999;
  margin-top: 0.5em;
  padding-right: 0px; /* ràz du réglage de 5em de div.contenu */
}


/* Vidéo embarquée */

div.video {
  margin-top: 2em;
}

div.video h3 {
  font-weight: bold;
  padding-left: 40px;
  background: url(../images/picto-video.png) no-repeat left center;
}

div.video iframe {
  padding: 10px 20px 30px 10px;
  background: url(../images/habillage-video.jpg) no-repeat top left;
}


/* Vignettes */

div.vignettes div.vignette {
  display: inline-block;
  border-right: 1px solid #eaeaea;
}

div.vignettes div.vignette:first-child {
  border-left: 1px solid #eaeaea;
}

div.vignettes div.vignette a img {
  opacity: 0.4;
}

div.vignettes div.vignette a:hover img,
div.vignettes div.vignette.selection a img {
  opacity: 1;
}



/*!**** Bloc d'infos */

div.bloc-infos {
  display: none; /* enlever quand le bloc infos sera disponible */
  background: #ffee00;
  color: #000000;
  padding: 1em 1.5em 2em 1em;
}

div.bloc-infos h2 {
  color: #ff0000;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 0em;
  margin-bottom: 0.5em; /* pour retrouver les 0.75em en tenant compte de la font-size de l'élément lui-même */
}

div.bloc-infos p {
  font-size: 0.9em;
}

div.bloc-infos .date {
  font-weight: bold;
}

div.bloc-infos .date:after {
  content: " : ";
}

/*!**** Page d'accueil */

body.pagetype-accueil div.bloc-infos {
  float: left;
  width: 315px;
  margin-left: 10px;
  margin-top: 20px;
}

/* Les 3 blocs */

div.bloc-accueil {
  position: relative; /* pour les positionnements absolus */
  float: left;
  width: 175px; /* = 215px - 25px - 35px */
  padding: 10px 80px 0px 80px;
  font-size: 0.85em;
  color: #999999;
  border-left: 1px solid #cccccc;
}

div.bloc-accueil:first-child {
  border-left: none
}

div.bloc-accueil h2 {
  display: inline-block;
  margin-left: -10px;
  border: 3px solid black;
  padding: 0.5em 1em;
  font-size: 1.1em;
  line-height: 1;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1.25em;
}

div.bloc-accueil a.lire-plus { /* recopié plus bas (plusieurs fois) */
  position: absolute;
  bottom: 20px;
  right: 25px;
  display: inline-block;
  color: #999999;
  border: 1px solid #999999;
  padding: 0.25em 0.5em;
  margin-right: 20px;
  font-size: 0.7em;
  line-height: 1;
  text-transform: uppercase;
}

div.bloc-accueil-produits h2, div.bloc-accueil-produits a.lire-plus:hover {
  color: #009966;
  border-color: #009966;
  text-decoration: none;
}

div.bloc-accueil-services h2, div.bloc-accueil-services a.lire-plus:hover {
  color: #ff6600;
  border-color: #ff6600;
  text-decoration: none;
}

div.bloc-accueil-references h2, div.bloc-accueil-references a.lire-plus:hover {
  color: #666666;
  border-color: #ffff00;
  text-decoration: none;
}

/* Les annonces de salon */

div.espace-bandeaux-annonces {
  position: relative;
  background-color: #333322;
}

div.bandeaux-annonces {
  position: relative;
  width: 1024px; /* = 936 + 2 x 44, où 936px = largeur d'un bandeau, 44px = marge horizontale (cf. left ci-dessous) */
  height: 194px; /* = 164 + 2 x 15, où 164px = heuteur d'un bandeau, 15px = marge verticale (cf. top ci-dessous) */
}

div.bandeau-annonce {
  position: absolute;
  left: 44px;
  top: 15px;
}

div.espace-bandeaux-annonces .accroche {
  position: absolute;
  top: -1.9em;
  left: 3em;
  font-size: 1.5em;
  line-height: 1;
  font-weight: bold;
  color: #ffffff;
  background-color: #333322;
  padding: 0.5em 1.2em;
  border-radius: 0.75em 0.75em 0em 0em;
  box-shadow: 8px -3px 10px rgba(0,0,0,0.3);
}

div.espace-bandeaux-annonces .accroche > span {
  color: #ccff00;
}

/* La zone de contenu (édito) */

body.pagetype-accueil div.contenu {
  position: relative; /* pour le positionnement absolu du lien Lire plus */
  margin-left: 20px;
}

body.pagetype-accueil div.contenu h2 {
  display: inline-block;
  margin-top: 2em;
  color: #cccc00;
  border: 3px solid #cccc00;
  padding: 0.5em 1em;
  font-size: 1.1em;
  line-height: 1;
  font-weight: bold;
  text-transform: uppercase;
}

body.pagetype-accueil div.contenu > h3,
body.pagetype-accueil div.contenu > p,
body.pagetype-accueil div.contenu > ul {
  padding-right: 200px;
}

body.page-accueil div.contenu a.lire-plus {
  /* recopié/inspiré de div.bloc-accueil a.lire-plus ci-dessus */
  position: absolute;
  right: 200px;
  display: inline-block;
  color: #999999;
  border: 1px solid #999999;
  padding: 0.25em 0.5em;
  font-size: 0.7em;
  line-height: 1;
  text-transform: uppercase;
}

body.page-accueil div.contenu a.lire-plus:hover {
  color: #cccc00;
  border-color: #cccc00;
  text-decoration: none;
}


/*!**** Page Services */

body.page-services div.contenu h2 {
  background: transparent no-repeat left bottom;
  padding-left: 50px;
}


/*!**** Pages du catalogue */

div.catalogue {
  position: relative; /* pour le z-index */
  z-index: 40;
  background: white;
  text-align: center;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

div.catalogue div.vignettes {
  display: inline-block; /* Pour que le text-align:center dans div.catalogue fonctionne */
  padding-top: 15px;
  padding-bottom: 10px;
}

div.associes {
  border-top: 1px dotted #999999;
  margin-top: 2.5em;
}

div.associes h3 {
  color: black;
  font-weight: bold;
  margin: 1.5em 0em;
}

/*!**** Page Offre */

div.espace-bandeaux-pub {
  position: relative;
}

div.bandeaux-pub {
  position: relative; /* pour le z-index */
  z-index: 30;
  width: 1024px;
  height: 400px;
}

div.espace-bandeaux-pub > a.bouton-fermeture {
  /* recopié/inspiré de div.bloc-accueil a.lire-plus ci-dessus */
  position: absolute;
  top: 20px;
  right: 25px;
  display: inline-block;
  color: #999999;
  border: 1px solid #999999;
  padding: 0.25em 0.5em;
  font-size: 0.7em;
  line-height: 1;
  text-transform: uppercase;
  /* ajouté */
  z-index: 50;
  color: #cccccc;
  border-color: #cccccc;
  font-size: 0.65em;
}

div.espace-bandeaux-pub > a.bouton-fermeture:hover {
  text-decoration: none;
  color: #ff6600;
  border-color: #ff6600;
}

div.espace-bandeaux-pub > a.bouton-ouverture {
  display: none;
  position: absolute;
  top: -1.8em;
  right: 40px;
  z-index: 50;
  font-size: 0.65em;
  line-height: 1;
  text-transform: uppercase;
  color: #333333;
  background-color: #cccccc;
  border: 1px solid #666666;
  padding: 0.4em 0.6em;
  border-bottom: none;
  border-radius: 0.75em 0.75em 0em 0em;
  opacity: 0.3;
}

div.espace-bandeaux-pub > a.bouton-ouverture:hover {
  color: #ffffff;
  background-color: #ff6600;
  opacity: 0.85;
  text-decoration: none;
}

body.page-offre div.contenu div.illustration.agauche {
  margin-top: 10px;
  margin-left: -30px;
  margin-bottom: 0em;
}

body.page-offre div.contenu div.illustration.adroite {
  margin-top: -80px;
}