body {
  background: #0c0f16;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.scene {
  width: 600px;
  height: 840px;
  perspective: 1200px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1); /* transition plus douce */
				scale 0.6s ease, 
				filter 0.6s ease;
  will-change: transform; /* optimisation GPU */
  cursor: pointer;
}

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

/* --- Halo mouvant autour de la carte --- */
@keyframes movingHalo {
  0% { box-shadow: 0 0 15px rgba(102, 242, 255, 0.4), 0 0 30px rgba(102, 242, 255, 0.2); }
  50% { box-shadow: 0 0 25px rgba(102, 242, 255, 0.7), 0 0 50px rgba(102, 242, 255, 0.3); }
  100% { box-shadow: 0 0 15px rgba(102, 242, 255, 0.4), 0 0 30px rgba(102, 242, 255, 0.2); }
}

.card {
  animation: movingHalo 6s infinite ease-in-out;
}
/* --- Halo mouvant autour de la carte FIN --- */


.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: #1a1f2b;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.86, 0, 0.07, 1); /* opacité du flip */
}


/* --- Effet lumineux pulsant autour de la carte --- */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 5px #66f2ff; }
  50% { box-shadow: 0 0 20px #66f2ff; }
  100% { box-shadow: 0 0 5px #66f2ff; }
}

.card__face {
  animation: pulseGlow 4s infinite;
}
/* --- Effet lumineux pulsant autour de la carte fin --- */


.card__face--front {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden; /* Évite tout débordement */
  opacity: 1;
  padding: 20px; /* Assure une marge interne régulière */
  box-sizing: border-box;
}


/* Halo lumineux au survol du recto */
  .card__face--front:hover {
    box-shadow: 0 0 25px 10px rgba(26, 204, 0 , 0.7);
  }

.card__face--front img {
  width: 100%;
  max-height: 600px; /* Limite la hauteur de l'image */
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 15px;
}

.card__face--front h2 {
  margin: 0;
  font-size: 1.5em;
  text-align: center;
}

.card__face--front p {
  margin-top: 8px;
  font-size: 1.1em;
  color: #ccc;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}

.card.is-flipped .card__face--front {  /* pour éviter que le recto bloque le verso pour le flip */
  opacity: 0;  /* pour éviter que le recto bloque le verso pour le flip */
  pointer-events: none; /* pour éviter que le recto bloque le verso pour le flip */
}

.card__face--back {
  transform: rotateY(180deg);
  opacity: 0;  /* pour opacité du flip */
}

.card__face--back ul {
  padding: 0;
  list-style: none;
}

.card__face--back li:hover {
  color: #66f2ff;             /* Survol dynamique sur le verso, rendra les éléments de liste interactifs au survol */
  transform: scale(1.05);		/* Survol dynamique sur le verso */
  transition: 0.3s ease;		/* Survol dynamique sur le verso */
  cursor: pointer;				/* Survol dynamique sur le verso */
  margin-bottom: 10px;
}

.card__face--back blockquote {
  margin-top: 15px;
  font-style: italic;
  color: #ccc;
}

.card.is-flipped .card__face--back {  /* pour opacité du flip */
  opacity: 1;     /* pour opacité du flip */
}


/* Animation des particules flottantes */
@keyframes float {
  0% { transform: translateY(0) translateX(0); opacity: 0.3; }
  50% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
  100% { transform: translateY(0) translateX(0); opacity: 0.3; }
}
/* Animation des particules flottantes FIN */


/* scan sur le recto uniquement */
.card__face--front::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(
    transparent,
    rgba(102, 242, 255, 0.15),
    transparent
  );
  animation: scan 3s linear infinite;
  z-index: 3; /* s'assure que ça reste au-dessus du recto */
  pointer-events: none; /* ne bloque pas les clics */
}
@keyframes scan {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* scan sur le recto uniquement FIN*/


/* particules sur le verso */
.card__face--back::after {
   content: '';
  position: absolute;
  top: 15%;
  left: 10%;
  width: 10px;
  height: 10px;
  background: #ffaa00;
  border-radius: 50%;
  box-shadow:
    25px 540px #ffcc44,
    160px -10px #ffdd66,
    90px 220px #ffbb33,
	400px 100px #ffc766,
    505px 420px #ffb933,
    320px 615px #ffd877,
    100px 85px #ffae22,
    290px 20px #ffdb88,
    505px 95px #ffba44,
    430px 300px #ffcc33;
	
  animation: moveParticlesBack 6s linear infinite;
  opacity: 0.5;
  pointer-events: none;
  z-index: 10;
}
@keyframes moveParticlesBack {
  0% { transform: translate(0, 0) }
  50% { transform: translate(-5px, 5px) }
  100% { transform: translate(0, 0) }
}



.particle {
  position: absolute;
  background: cyan;
  border-radius: 50%;
  animation: float 4s infinite ease-in-out;
  pointer-events: none; /* Les particules ne bloquent pas le clic */
  z-index: 2;

  }

</style>
</head>
<body>

<div class="scene">
  <div class="card" id="card">
    <div class="card__face card__face--front">
      <img src="ton_image.jpg" alt="Image carte">
      <h2>Titre de la carte</h2>
      <p>Description courte de la carte.</p>
    </div>
    <div class="card__face card__face--back">
      <ul>
        <li>Information 1</li>
        <li>Information 2</li>
        <li>Information 3</li>
      </ul>
      <blockquote>Une citation au verso.</blockquote>
    </div>
  </div>
</div>

<script>
  // Flip au clic
  document.getElementById('card').addEventListener('click', function() {
    this.classList.toggle('is-flipped');
  });