@charset "utf-8";
/* CSS Document */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  perspective: 1000px;
}

.flip-card-container {
  width: 300px;
  height: 200px;
  margin: 10px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s;
  border-radius: 10px;
  overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ;
}

.flip-card-container:hover .flip-card {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
   background: linear-gradient(to bottom,#f5f0e7, #fdd4db);
  border-radius: 10px;
  box-sizing: border-box;
	box-shadow:4px 5px 12px 0px rgb(0, 0, 0, 0.6);
}
.backtext  {background-color:#565656a6;color: #fff;}
.grasgros {font-size: 1.17em; font-weight: bold;}
.flip-card-back {
  transform: rotateY(180deg);
  background:  linear-gradient(#f5f0e7,#f1cbd2);
}
.btn-details {
  margin-top: 15px;
  padding: 8px 15px;
  background: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Effet d'agrandissement au clic */
.flip-card-container.active {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 1000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Fond sombre derrière la carte agrandie */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}