/* ============================================================
   JEU / QUIZ — Design, ergonomie, animations, responsive
   Chargé via pouchounet_assets() avec version bust
   ============================================================ */

/* --- Keyframes --- */
@keyframes jeu-slide-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jeu-pop-success {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  65%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes jeu-shake-fail {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
@keyframes jeu-pulse-badge {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@keyframes jeu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes jeu-card-glow {
  0%   { box-shadow: 0 0 0 0 rgba(107,159,255,0); }
  50%  { box-shadow: 0 0 14px 4px rgba(107,159,255,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(107,159,255,0); }
}

/* ============================================================
   CONTENEURS — animations d'entrée
   ============================================================ */
.container_formulaire_question {
  width: 100% !important;
  max-width: 600px !important;
  margin-top: 40px !important;
  animation: jeu-slide-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.container_formulaire_question_photos {
  animation: jeu-slide-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ============================================================
   BLOC QUESTION TEXTE
   ============================================================ */
.question {
  width: 100% !important;
  max-width: 600px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.14) !important;
  animation: jeu-slide-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ============================================================
   ZONE RÉPONSES TEXTE
   ============================================================ */
.container_reponses {
  width: 100% !important;
  max-width: 600px !important;
  animation: jeu-slide-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* --- Boutons réponse texte --- */
ul.checkedbox li label {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 20px !important;
  border: 2px solid #dde3ec !important;
  border-radius: 14px !important;
  background-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  cursor: pointer;
  transition: background-color 0.15s ease,
              border-color 0.15s ease,
              transform 0.13s ease,
              box-shadow 0.15s ease !important;
}
ul.checkedbox li label:hover {
  background-color: #f0f5ff !important;
  border-color: #6b9fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 16px rgba(107,159,255,0.22) !important;
}

/* Bonne réponse */
ul.checkedbox li input.quiz_success[type="radio"]:checked + label {
  background-color: #027a0b !important;
  border-color: #027a0b !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(2,122,11,0.4) !important;
  animation: jeu-pop-success 0.4s ease both !important;
  pointer-events: none !important;
}

/* Mauvaise réponse */
ul.checkedbox li input.quiz_fail[type="radio"]:checked + label {
  background-color: #e0402e !important;
  border-color: #e0402e !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(224,64,46,0.4) !important;
  animation: jeu-shake-fail 0.38s ease both !important;
  pointer-events: none !important;
}

/* Désactiver hover sur les autres options après sélection */
ul.checkedbox:has(input[type="radio"]:checked) li label:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  background-color: #fff !important;
  border-color: #dde3ec !important;
  cursor: default !important;
}
/* Garder le style sur la réponse sélectionnée (override le reset :hover sur mobile) */
ul.checkedbox:has(input.quiz_success[type="radio"]:checked) li input.quiz_success[type="radio"]:checked + label {
  background-color: #027a0b !important;
  border-color: #027a0b !important;
  color: #fff !important;
  transform: none !important;
}
ul.checkedbox:has(input.quiz_fail[type="radio"]:checked) li input.quiz_fail[type="radio"]:checked + label {
  background-color: #e0402e !important;
  border-color: #e0402e !important;
  color: #fff !important;
  transform: none !important;
}

/* ============================================================
   RÉPONSES PHOTO — cartes
   ============================================================ */

/* Survol de la carte avant sélection */
.item_photos_reponses .card:not(.card--flipped) {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  border-radius: 12px;
}
.item_photos_reponses .card:not(.card--flipped):hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;
  z-index: 2;
}

/* Carte retournée : légère lueur */
.item_photos_reponses .card.card--flipped {
  animation: jeu-card-glow 0.6s ease both;
}

/* Contenu de la face arrière */
.item_photos_reponses .card__back {
  border-radius: 12px;
}
.item_photos_reponses .nom_card_back {
  font-size: 1rem !important;
  padding: 6px 10px;
}

/* ============================================================
   CARTOUCHE / BADGE DU JEU
   ============================================================ */
.numero_du_jeu {
  border-radius: 20px !important;
  padding: 5px 16px !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.03em;
  animation: jeu-pulse-badge 2.5s ease-in-out infinite;
  margin-bottom: 10px !important;
}

.titre_cartouche_jeu {
  font-size: 1.22rem !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  animation: jeu-fade-in 0.5s ease both;
}

/* ============================================================
   BOUTONS REJOUER / NIVEAUX
   ============================================================ */
.bouton_modele_jeu {
  transition: transform 0.14s ease,
              box-shadow 0.14s ease,
              filter 0.14s ease !important;
  will-change: transform;
}
.bouton_modele_jeu:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 7px 20px rgba(0,0,0,0.3) !important;
  filter: brightness(1.12) !important;
}
.bouton_modele_jeu:active {
  transform: scale(0.97) !important;
  transition-duration: 0.07s !important;
}

.container_niveaux_top {
  gap: 12px !important;
  margin-top: 22px !important;
  margin-bottom: 22px !important;
}

/* ============================================================
   ICÔNE RECHARGEMENT + BARRE PROCHAINE QUESTION
   ============================================================ */
#reload_jeu {
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  opacity: 0.65;
}
#reload_jeu:hover {
  transform: rotate(180deg) !important;
  opacity: 1 !important;
}

#jeu-next-progress {
  display: none;
  align-self: center;
  flex-shrink: 0;
  margin-left: 8px;
}
#jeu-next-bar {
  transition: none;
}

/* ============================================================
   RÉSULTATS FINAUX
   ============================================================ */
.question_results {
  border-radius: 12px 12px 0 0 !important;
  padding: 18px 22px !important;
}

/* ============================================================
   RESPONSIVE MOBILE ≤ 600px
   ============================================================ */
@media (max-width: 600px) {
  .container_formulaire_question {
    margin-top: 18px !important;
  }
  .container_formulaire_question_photos {
    margin-top: 18px !important;
  }
  ul.checkedbox {
    gap: 8px !important;
  }
  ul.checkedbox li label {
    min-height: 54px !important;
    font-size: 0.95rem !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
  }
  .question {
    font-size: 1rem !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
  .titre_cartouche_jeu {
    font-size: 1.1rem !important;
  }
  .bouton_modele_jeu {
    font-size: 0.88rem !important;
    padding: 8px 14px !important;
  }
  .container_niveaux_top {
    gap: 8px !important;
  }
  /* Pas de hover lift sur tactile */
  .item_photos_reponses .card:not(.card--flipped):hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 400px) {
  ul.checkedbox li label {
    font-size: 0.9rem !important;
  }
  .nom_espece_question {
    font-size: 1.2rem !important;
  }
  .container_niveaux_top {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .container_niveaux_top .bouton_modele_jeu {
    text-align: center !important;
    width: 100% !important;
  }
}

/* ============================================================
   BOUTON AUDIO AMBIANCE
   ============================================================ */
.ambiance-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  margin-left: 8px;
  flex-shrink: 0;
  transition: opacity 0.2s ease, transform 0.15s ease;
  vertical-align: middle;
}
.ambiance-toggle-btn.ambiance-on {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  opacity: 1;
}
.ambiance-toggle-btn.ambiance-off {
  background: rgba(243, 108, 90, 0.85);
  color: #ffffff;
  opacity: 1;
}
.ambiance-toggle-btn.ambiance-waiting {
  background: rgba(243, 108, 90, 0.25);
  color: #f36c5a;
  opacity: 1;
  animation: jeu-pulse-badge 1.8s ease-in-out infinite;
}
.ambiance-toggle-btn:hover {
  transform: scale(1.15);
  opacity: 1 !important;
}

/* ============================================================
   DÉVOILEMENT DES RÉPONSES TEXTE (classe .revele ajoutée par JS)
   ============================================================ */

/* Bonne réponse non sélectionnée : vert foncé */
ul.checkedbox.revele li input.quiz_success[type="radio"]:not(:checked) + label {
  background-color: #027a0b !important;
  border-color: #027a0b !important;
  color: #fff !important;
  animation: jeu-fade-in 0.4s ease both !important;
}

/* Mauvaises réponses non sélectionnées : rouge */
ul.checkedbox.revele li input.quiz_fail[type="radio"]:not(:checked) + label {
  background-color: #e0402e !important;
  border-color: #e0402e !important;
  color: #fff !important;
  animation: jeu-fade-in 0.4s ease both !important;
}