/* ==========================================================================
   Pages video des realisations - 3DM Concept
   --------------------------------------------------------------------------
   Ces pages s'affichent dans la visionneuse du portfolio, en cadre.

   La video n'occupe plus toute la surface : elle garde sa taille propre, et
   c'est son conteneur qui remplit la fenetre. Un clic a cote de l'image tombe
   donc sur le conteneur et non sur la video, ce qui permet a video-lecture.js
   de fermer la visionneuse comme on le ferait en cliquant hors d'une photo.
   Auparavant la video etait etiree a 100 % et ses bandes noires lui
   appartenaient : il n'y avait aucune zone a cliquer.

   Ce fichier remplace le bloc <style> qui etait recopie dans les 39 pages.
   ========================================================================== */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}

/* Page ouverte seule : les bandes autour de l'image sont noires. */
.video-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Pose par video-lecture.js quand la page est en cadre : le pourtour ferme.
   Presque transparent plutot que noir : c'est le masque de la visionneuse, en
   dessous, qui doit se voir. Le 1 % ne se percoit pas et garantit que la zone
   reste bien une cible de clic. */
.video-background-container.fermable {
  background: rgba(0, 0, 0, 0.01);
  cursor: zoom-out;
}

/* La loupe n'a de sens que sur le pourtour : sur l'image et ses commandes,
   le curseur reste celui du lecteur. */
.video-background-container.fermable video {
  cursor: auto;
}

video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

#titre {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9;
  padding: 6px 22px;
  background-color: #fff;
  border-style: solid;
  color: #3498db;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

/* Pages de demo des configurateurs : acces au configurateur, en face du
   titre, en laissant la place a la croix de la visionneuse. Au-dessus du
   voile du bouton de lecture (z-index 8). */
.demo-configurateur {
  position: absolute;
  top: 20px;
  right: 80px;
  z-index: 9;
  padding: 10px 26px;
  border-radius: 4px;
  background: #3498db;
  color: #fff;
  font-family: "OpenSans Bold", sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: background .2s ease;
}

.demo-configurateur:hover,
.demo-configurateur:focus {
  background: #2178b5;
}

/* Petit ecran : titre et bouton ne tiennent plus cote a cote, le bouton
   passe en bas, loin des commandes du lecteur qui restent sous l'image. */
@media (max-width: 767px) {
  .demo-configurateur {
    top: auto;
    right: 50%;
    bottom: 20px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    white-space: nowrap;
  }
}