/* =====================================================
   LE MUSÉE DU TEMPS VOLÉ — Coffre-fort et fins de partie
   Molettes du coffre, écrans victoire / défaite / pause,
   menu enseignant.
   ===================================================== */

.coffre-zone { text-align: center; }
.molettes { display: flex; justify-content: center; gap: 14px; margin: 30px 0 8px; }
.molettes input {
  width: 84px; height: 100px;
  font-size: 52px;
  text-align: center;
  border-radius: 10px;
  border: 3px solid var(--or);
  background: var(--fond);
  color: var(--or-clair);
  font-weight: 800;
}
.molettes input:focus { outline: none; border-color: var(--or-clair); }
.molettes.secousse { animation: secousse 0.4s; }
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.numeration { color: var(--texte2); font-size: 15px; }

/* ---------- Fond photographique du coffre-fort ---------- */
/* dans la salle : porte du coffre fermée, en noir et blanc d'époque
   (relevé HABS, domaine public) ; à la victoire : grande porte de la
   Réserve fédérale de Cleveland (Spamguy, Wikimedia Commons, CC BY 2.5).
   Les deux sont assombries pour laisser lire les encarts. */
#ecran-coffre {
  background: linear-gradient(rgba(10, 10, 22, 0.78), rgba(10, 10, 22, 0.88)),
    url("../img/coffre-ferme.jpg") center / cover no-repeat;
}
#ecran-victoire {
  background: linear-gradient(rgba(10, 10, 22, 0.6), rgba(10, 10, 22, 0.85)),
    url("../img/coffre-fort.jpg") center / cover no-repeat;
}

/* ---------- Ouverture du coffre et félicitations ---------- */
.lumiere-ouverture {
  width: 140px;
  height: 140px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 201, 107, 0.9) 0%,
              rgba(242, 201, 107, 0.3) 45%, transparent 70%);
  animation: souffle-lumiere 1.8s ease-out forwards;
}
@keyframes souffle-lumiere {
  from { transform: scale(0.15); opacity: 0; }
  35% { opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}
.felicitations {
  color: var(--or-clair);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 12px auto 0;
  max-width: 640px;
  animation: apparait 0.9s ease 0.4s backwards;
}

/* ---------- Trois étapes du coffre ---------- */
.associations { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 14px 0 4px; }
.colonne-assoc { min-width: 260px; }
.colonne-assoc ul { list-style: none; margin: 8px 0 0; padding: 0; }
.colonne-assoc .choix { display: block; width: 100%; margin: 6px 0; text-align: left; }
.colonne-assoc .choix.actif { border-color: var(--or-clair); box-shadow: 0 0 0 2px var(--or-clair); }
.colonne-assoc .choix.associe { opacity: 0.55; }
.paires-assoc { min-height: 20px; color: var(--texte2); font-size: 14px; margin: 8px 0; }
#temps-forts { margin: 14px auto 4px; max-width: 480px; text-align: left; }
.temps-fort { margin: 6px 0; }
.temps-fort b { color: var(--or-clair); }

/* ---------- Victoire / Défaite ---------- */
.grand-sceau {
  width: 90px; height: 90px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 4px solid var(--or);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px; color: var(--or-clair); font-weight: 800;
}
.grand-sceau.vert { border-color: var(--vert); color: var(--vert); }
.grand-sceau.rouge { border-color: var(--rouge); color: var(--rouge); }
.liste-heloines { margin-top: 20px; }
.liste-heloines article {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-left: 5px solid var(--or);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 10px 0;
}
.liste-heloines h4 { color: var(--or-clair); font-size: 19px; }
.liste-heloines p { color: var(--texte2); font-size: 16px; margin-top: 4px; }

/* ---------- Menu enseignant ---------- */
#panneau-enseignant .solutions td { border: 1px solid var(--bord); padding: 8px 12px; }
#panneau-enseignant .solutions { border-collapse: collapse; margin: 12px 0; }
#panneau-enseignant .solutions td:first-child { color: var(--or-clair); font-weight: 700; }