*, ::before, ::after {
  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+ */
}
.titre h1, h2{text-align: center; padding: 10px;}
span{color:orangered;}
.advice{font-size: 1.3em;text-align: center; margin-bottom: 20px;}
.niveaux{display: flex; align-items: center; justify-content: center;}
.niveau{ border-radius: 15px;}
.niveaux a{text-decoration: none; padding: 10px; color: black; background-color: white;margin: 5px 5px 15px 5px; font-size: 1.2em;}
.compteur{background-color: white; text-align: center;padding: 10px; font-size: 1.3em; width: 50%; margin: auto;}
.point, .nbre-coups{width: 50%; margin: 10px auto; background-color: #333; color: white;text-align: center; padding: 10px; font-size: 1.3em;}
.message{color: orangered; font-size: 1.3em; text-align: center;}
/*.jeu{
  background: transparent;
  display: grid;
  grid-template: repeat(4, 200px) / repeat(6, 200px);
  margin: 75px auto 0;
  width: 800px;
  height: auto;
  
}*/
.jeu, .grille{background: transparent; display: flex; flex-direction: row; flex-wrap: wrap; height: auto; margin-left: 20px;}
/*.grille{
  background: transparent;
  display: grid;
  grid-template: repeat(8, 150px) / repeat(6, 150px);
  margin: 75px auto 0;;
  width: 800px;
  height: auto;
}*/
/*img{width: 100%;height: 100%;;background-size: cover;display: none;}*/
.carte, .card{background-color: transparent; perspective: 1000px;margin: 3px; width: 180px; height: 180px;}
.double-face{
  position: relative; width: 100%; height: 100%; 
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.double-faceD{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;
}
.faceD{position: absolute; width: 100%; height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;}
.face, .faceD{ background-color: #333; transform: rotateY(180deg); display: flex; justify-content: center; align-items: center; }
.face img{width: 180px; height: 180px;}
.faceD img{width: 150px; height: 150px;}
.arriere{background-color: #333; display: flex; justify-content: center; align-items: center; font-size: 80px;}
.active{transform: rotateY(180deg);}