/*
  main.css
  --> ce fichier contiendra la mise en page de votre affiche
*/


#affiche {
  /* vous pouvez éditer le bloc #affiche mais uniquement pour lui ajouter du padding ou changer sa mise en forme (changer sa couleur de fond, sa famille de caractères, etc.) de manière à ne pas casser la gestion du bloc dans la page */
  padding: 10vh;
}

/*
  début du code CSS pour la mise en forme des éléments de l’affiche
*/

h1 {
  font-size:4vh;
  margin-top: 0;
}

* {
  box-sizing: border-box; /* 1 */
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: red;
  color: black;

  font-family: 'Space Mono', monospace;
}

#affiche {
  overflow: hidden;
  position: relative;
  width: 64vh;
  height: 90vh;
  /* le ratio est celui d’une feuille A4 (format ISO) environ */
  background: white;
  box-shadow: 0 4px 8px 0px rgba(0,0,0,.22);
}

h1,h2,h3,h4 {
  font-family: inherit;
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  #affiche {
  }
}

.carte {
  float:left;
  position: relative;
  width:calc(50% - 10px);
  height:100px;
  margin: 5px 5px 5px 5px;

}

.carte > .front{

  background: url(image/visuel1.jpg);
  background-size: 200%;
}

.carte#A1 > .front{
    background-position:0% 0%;
}
.carte#A2 > .front{
    BACKGROUND-POSITION: -100% 0%;
}

.carte#B1 > .front{
    background-position:0% 31%;
}

.carte#B2 > .front{
    background-position:100% 30%;
}

.carte#C1 > .front{
    background-position:0% 65%;
}

.carte#C2 > .front{
    background-position:100% 70%;
}

.carte#D1 > .front{
    background-position:0% 100%;
}
.carte#D2 > .front{
    background-position:100% 100%;
}
  .flip3D{

  }
  .flip3D > .front{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
  .flip3D > .back{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 180deg );
    transform: perspective( 600px ) rotateY( 180deg );
    background:green;
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
  .flip3D:hover > .front{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
  }
  .flip3D:hover > .back{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
  }

  #boite img {
width :50%;
height: 50%;

  }