*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(to right, #b993d6, #8ca6db); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.grille {

  background: rgb(195, 195, 195);
  display: grid;
  grid-template: repeat(3, 200px) / repeat(4, 200px);
  width: 800px;
  height: 600px;
  margin: 75px auto 0;

}

.carte {

  background-color: transparent;
  perspective: 1000px;
  margin: 5px;

}

.double-face {

  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;

}

.face, .arriere {

  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}

.face {

  background: #333;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;

}

.face img {

  width: 120px;

}

.arriere {

  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;

}

.active {

  transform: rotateY(180deg);

}