body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
}

.card {
  width: 250px;
  height: 150px;
  margin: 50px auto;
  perspective: 1000px;
  cursor: pointer;
}

.card div {
  width: 100%;
  height: 100%;
  display: flex;              /* Ajout */
  justify-content: center;    /* Ajout */
  align-items: center;        /* Ajout */
  text-align: center;
  font-size: 20px;
  padding: 10px;              /* Ajout pour éviter que le texte colle aux bords */
  border: 2px solid #333;
  border-radius: 10px;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.6s;
}


.front {
  background: #f39c12;
  color: white;
}

.back {
  background: #27ae60;
  color: white;
  transform: rotateY(180deg);
}

.card.flipped .front {
  transform: rotateY(180deg);
}

.card.flipped .back {
  transform: rotateY(360deg);
}