/* Les défis photo. Reprend le vocabulaire visuel du carnet : cartes en papier, filet
   discret, pastille d'état comme sur les feuillets — c'est une page du carnet, pas un
   module à part. */

.jeux-tete { max-width: var(--mesure); }
.jeux-vide { color: var(--muted); font-style: italic; }

.jeux-liste { list-style: none; margin: var(--esp-5) 0 0; padding: 0; }

.defi {
  margin: 0 0 var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--border);
  border-radius: var(--rayon-3);
  background: var(--panel);
}
/* Un défi à venir est présent mais en retrait : il annonce, il ne réclame rien.

   Le retrait se faisait par `opacity: .72`, posée sur la carte entière. Une opacité sur un
   conteneur de texte, c'est un mélange du texte avec son fond : la consigne — la meilleure
   chose à lire de cette page — tombait à 3,29:1, sous le seuil de 4,5:1. Or huit défis sur
   huit sont à venir : la page entière était sous le seuil.

   Le retrait passe donc par la COULEUR (--usuzumi tient 4,5:1 sur tous les fonds du site) et
   par la bordure, qui elle peut être atténuée sans que personne n'ait à la lire. Le titre
   garde --ink : c'est ce qu'on parcourt du regard pour choisir quoi lire. */
.defi--a_venir {
  border-color: color-mix(in srgb, var(--border) 55%, var(--paper));
  background: var(--paper);
}
.defi--a_venir .defi__consigne,
.defi--a_venir .defi__compte { color: var(--usuzumi); }

.defi__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-3);
}
.defi__titre { margin: 0; font-size: var(--fs-500); }

.defi__etat {
  padding: 2px 10px;
  border-radius: var(--rayon-pilule);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--panel-raised);
  color: var(--muted);
}
/* Seul « en cours » appelle une action : c'est le seul qui porte une couleur vive. */
.defi__etat--ouvert { background: var(--gold-soft); color: var(--gold-text); }
.defi__etat--termine { background: var(--torii-soft); color: var(--torii-dark); }

/* La consigne est le texte que cette page existe pour faire lire : elle prend la mesure de
   lecture du site, et l'interligne de prose. */
.defi__consigne {
  margin: var(--esp-2) 0 0;
  max-width: var(--mesure);
  line-height: var(--lh-lecture);
}
.defi__compte { margin: var(--esp-3) 0 0; font-size: var(--fs-300); color: var(--muted); }

.defi__photos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: var(--esp-3);
  margin: var(--esp-4) 0 0;
  padding: 0;
}
.defi-photo {
  margin: 0;
  padding: var(--esp-2);
  border: 1px solid var(--border);
  border-radius: var(--rayon-2);
  background: var(--panel-raised);
  text-align: center;
}
.defi-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rayon-1);
  display: block;
}
.defi-photo__par { margin: var(--esp-2) 0 0; font-size: var(--fs-300); }
.defi-photo__voix { margin: var(--esp-1) 0 0; font-size: var(--fs-300); color: var(--muted); }

/* La sienne se repère sans qu'on ait à lire le nom : on la cherche du regard en premier. */
.defi-photo--mienne { border-color: var(--gold); }
/* La gagnante porte le rouge torii, la couleur des choses arrêtées sur ce site. */
.defi-photo--gagnante {
  border-color: var(--torii);
  box-shadow: 0 0 0 2px var(--torii-soft);
}

.defi-photo__vote {
  margin-top: var(--esp-2);
  min-height: 34px;
  padding: var(--esp-1) var(--esp-4);
  border: 1px solid var(--border);
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-300);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.defi-photo__vote:hover { border-color: var(--torii); color: var(--torii-dark); }
/* Un bouton qu'on presse s'enfonce : le retour est immédiat, avant même la réponse du
   serveur. Neutralisé plus bas sous prefers-reduced-motion. */
.defi-photo__vote:active { transform: translateY(1px); }
.defi-photo__vote--actif {
  background: var(--torii-soft);
  border-color: var(--torii);
  color: var(--torii-dark);
  font-weight: 700;
}
.defi-photo__vote:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

.defi__depot { margin-top: var(--esp-4); }
.defi__depot-ouvrir {
  min-height: 44px;
  padding: var(--esp-2) var(--esp-4);
  border: 1px dashed var(--gold-text);
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--gold-text);
  font-size: var(--fs-300);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.defi__depot-ouvrir:hover { background: var(--gold-soft); border-style: solid; }
.defi__depot-ouvrir:active { transform: translateY(1px); }
.defi__depot-ouvrir:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

/* Le message d'erreur du serveur, nommé plutôt que générique. */
.jeux-erreur {
  margin-top: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  border-left: 3px solid var(--torii);
  background: var(--torii-soft);
  color: var(--torii-dark);
}

/* ---- le dialogue de choix ---- */
.jeux-dialogue {
  width: min(760px, 92vw);
  max-height: 82vh;
  padding: var(--esp-5);
  border: 1px solid var(--border);
  border-radius: var(--rayon-3);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
/* Le voile commun du site : un noir en dur s'éclaircit en thème sombre au point d'éclairer
   la page qu'il devait éteindre. --voile est sombre dans les deux thèmes. */
.jeux-dialogue::backdrop { background: var(--voile); }
.jeux-dialogue__fermer { display: flex; justify-content: flex-end; }
.jeux-dialogue__fermer button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--rayon-2);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-500);
  cursor: pointer;
}
.jeux-dialogue__fermer button:hover { color: var(--torii-dark); }
.jeux-dialogue__fermer button:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

.jeux-choix {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr));
  gap: var(--esp-3);
  margin: var(--esp-3) 0 0;
  padding: 0;
  overflow-y: auto;
  max-height: 58vh;
}
.jeux-choix button {
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--rayon-2);
  background: none;
  cursor: pointer;
}
/* Le focus ne peut pas rester porté par la seule bordure de survol : elle est identique à
   l'état actif et disparaît au clavier. On garde la convention du site. */
.jeux-choix button:hover { border-color: var(--torii); }
.jeux-choix button:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }
.jeux-choix img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rayon-1);
  display: block;
}

/* Le fichier ne portait aucune neutralisation de mouvement. Les deux seules animations qu'il
   introduit sont les enfoncements de bouton ci-dessus : on les coupe. */
@media (prefers-reduced-motion: reduce) {
  .defi-photo__vote,
  .defi__depot-ouvrir { transition: none; }
  .defi-photo__vote:active,
  .defi__depot-ouvrir:active { transform: none; }
}