/*
 * Complements au theme d'origine, pour les elements introduits par la
 * reecriture Node : fenetres modales pilotees par le serveur, boutons de
 * formulaire la ou il y avait des <div> cliquables, piege a robots.
 */

/* Le champ "tel" du formulaire de contact est un piege a robots : invisible
   pour un humain, mais laisse accessible au flux du document. */
.tel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Les modales etaient ouvertes en JavaScript ($.show()). Elles sont
   desormais rendues par le serveur quand la situation l'exige. */
.modal.show-modal {
  display: block;
}

/* Secrets et enchantements sont des boutons de formulaire, la ou le site
   d'origine utilisait des <div onclick>. On leur redonne l'apparence
   d'origine tout en gardant l'accessibilite au clavier. */
.secret-trigger,
#enchantTab button {
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

.secret-trigger:hover,
#enchantTab button:hover {
  background: #ffffff14;
}

.secret-trigger .secret-number {
  color: white;
}

/* Choix du trophee : le bouton radio est masque, c'est la carte entiere qui
   se selectionne. */
.trophy input[type='radio'] {
  position: absolute;
  opacity: 0;
}

.trophy:has(input[type='radio']) {
  cursor: pointer;
}

.trophy:has(input[type='radio']:checked) {
  background: #ffffff94;
}

.trophy:has(input[type='radio']:focus-visible) {
  outline: 2px solid #fff;
}

.history-entry h3 {
  font-size: 22px;
}

.contact .ret.error {
  color: #ff8a8a;
}

.contact .ret.ok {
  color: #8aff8a;
}