html, body {
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  font-family: Michroma, sans-serif;
  overflow-x:hidden;
  padding-bottom:15vh;
}

/* ====== Fond vidéo ====== */
#bg-video {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  z-index:-1;
  overflow:hidden;
}

/* ====== Avatar cliquable (musical) ====== */
.avatar-bubble {
  display:block;
  margin:6vh auto 6vh;
  width:clamp(12vh,14vw,18vh);
  height:clamp(12vh,14vw,18vh);
  border-radius:50%;
  overflow:hidden;
  border:0.5vh solid rgb(9,132,123);
  box-shadow:0 0 1.5vh rgb(3,215,201);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
}
.avatar-bubble img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.avatar-bubble:hover {
  transform:scale(1.1);
  box-shadow:0 0 2vh rgb(3,215,201);
}

/* Effet "pulse" quand la musique joue */
.avatar-bubble.playing {
  animation:pulse 1.2s infinite ease-in-out;
  box-shadow:0 0 2vh rgb(3,215,201), 0 0 4vh rgba(3,215,201,0.7);
}
@keyframes pulse {
  0% { transform:scale(1); box-shadow:0 0 1.5vh rgb(3,215,201); }
  50% { transform:scale(1.15); box-shadow:0 0 3vh rgb(3,215,201); }
  100% { transform:scale(1); box-shadow:0 0 1.5vh rgb(3,215,201); }
}

/* ====== Carte d’instruction ====== */
.instruction-card-wrapper {
  width:60vw;
  margin:0 auto 6vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.instruction-card {
  width:100%;
  perspective:50vw;
  border-radius:2vw;
}
.instruction-card .inner-card {
  width:100%;
  transform-style:preserve-3d;
  transition:transform 0.6s;
  position:relative;
  display:block;
}
.instruction-card .inner-card.flipped {
  transform:rotateY(180deg);
}
.instruction-card .face {
  position:absolute;
  width:100%;
  min-height:28vh;
  backface-visibility:hidden;
  border-radius:2vw;
  background-color:rgba(15,227,195,0.25);
  color:#fff;
  text-align:center;
  padding:4vh 4vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  box-shadow:0 0 1.5vh rgba(3,215,201,0.5);
}
.instruction-card .face.back {
  transform:rotateY(180deg);
  background-color:rgba(15,227,195,0.3);
}
.instruction-card h1, .instruction-card h2 {
  font-size:3vh;
  margin-bottom:2vh;
}
.instruction-card p {
  font-size:2.1vh;
  line-height:1.6;
  margin-bottom:2vh;
}
.instruction-card a {
  font-size:1.6vh;
  color:#fff;
  text-decoration:none;
  opacity:0.8;
}
.instruction-card a:hover {
  opacity:1;
  color:rgb(0,252,214);
}
.instruction-card .flip-icon {
  position:absolute;
  top:1vh;
  right:2vw;
  width:5vw;
  cursor:pointer;
  z-index:10;
  transition:transform 0.2s ease;
}
.instruction-card .flip-icon:hover {
  transform:scale(1.1);
}

/* ====== Conteneur des cartes principales ====== */
.cards-container {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:4vw;
  flex-wrap:wrap;
  margin-top:50vh;
  margin-bottom:10vh;
}
.card-wrapper {
  width:28vw;
  height:80vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.card {
  width:100%;
  height:100%;
  perspective:50vw;
  position:relative;
  transition:transform 0.3s ease;
}
.card:hover { transform:scale(1.05); }
.inner-card {
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.6s;
}
.inner-card.flipped { transform:rotateY(180deg); }
.face {
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  border-radius:2vw;
  background-color:rgba(15,227,195,0.2);
  display:flex; 
  justify-content:center;
  align-items:center;
  transition:border-color 0.3s ease;
  color: white;
}
.face.back {
  transform:rotateY(180deg);
  background-color:rgba(0,252,214,1);
  color:rgb(0, 0, 0);
}
.card:hover .face { border-color:rgba(255,255,255,0.5); }

object { width:65vw; height:auto; pointer-events:none; }

.flip-icon {
  position:absolute;
  top:1vh; 
  right:2vw; 
  width:5vw; 
  cursor:pointer;
  z-index:10; 
}
.flip-icon:hover { transform:scale(1.1); }

.bottom-link-card {
  display:block;
  margin:50vh auto 30vh;
  width:60vw;
  padding:2vh 2vw;
  text-align:center;
  font-size:2vh;
  color:white;
  background-color:rgba(15,227,195,0.3);
  border-radius:2vw;
  text-decoration:none;
  box-shadow:0 0 1.5vh rgba(3,215,201,0.7);
  transition:transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.bottom-link-card:hover {
  transform:scale(1.05);
  box-shadow:0 0 2vh rgba(3,215,201,0.9);
  background-color:rgba(15,227,195,0.5);
}

.feedback-message {
  opacity: 0;
  transition: opacity 0.5s ease;
  color: white;
}

.feedback-message.show {
  opacity: 1;
}

@media(max-width:1024px){
  .instruction-card-wrapper { width:80vw; } 
  .cards-container { margin-top:40vh; gap:5vw; }
  .card-wrapper { width:45vw; height:60vh; }
  object { width:50vw; }
  .bottom-link-card { width:80vw; font-size:2.2vh; padding:2.5vh 2vw; }
}
@media(max-width:768px){
  body{padding:3vh 2vw;}
  .instruction-card-wrapper{width:80vw;}
  .cards-container{ flex-direction:column; align-items:center; gap:6vh; margin-top:35vh; }
  .card-wrapper{ width:85vw; height:50vh; }
  object{ width:80vw; }
  .avatar-bubble{width:20vw;height:20vw;}
  .bottom-link-card{width:80vw;font-size:2.5vh;padding:2.5vh 2vw;}
}
@media(max-width:480px){
  .instruction-card-wrapper{width:85vw;}
  .card-wrapper{width:85vw;height:45vh;}
  object{ width:90vw; }
  .avatar-bubble{width:25vw;height:25vw;}
  .bottom-link-card{width:95vw;font-size:3vh;padding:3vh 2vw;}
}


/* ===== Boutons sous les cartes ===== */
.buttons-container {
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin-top:2vh;
}

.btn {
  padding:1vh 2vw;
  border:none;
  border-radius:1vw;
  font-size:2vh;
  cursor:pointer;
  transition:transform 0.2s ease, background-color 0.3s ease;
  font-family: Michroma, sans-serif;
  background-color:rgba(15,227,195,0.6); /* Couleur de base turquoise */
  color:white;
}

.btn:hover {
  background-color:rgba(15,227,195,0.9);
  transform:scale(1.05);
}

/* Effets dynamiques selon réponse */
.btn.correct-click {
  background-color:rgba(0,255,128,0.9); /* Vert clair */
}

.btn.wrong-click {
  background-color:rgba(255,85,85,0.9); /* Rouge */
}