/* Grille de la semaine — styles propres à ce mode. Tout le reste (.screen,
   .btn, .field, .ranking, .sheet…) vient de style.css : ce fichier ne
   redéfinit rien, il complète. */

.semaine-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.semaine-badge {
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 2px 8px;
}

/* ─── Défis ──────────────────────────────────────────────────────────────── */

.defis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.defi {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: background var(--t-state) linear, border-color var(--t-state) linear;
}

/* Toute la carte est cliquable : c'est ce qui déplie la liste des mots déjà
   trouvés pour CE défi (bouton plutôt que <li> nu, pour l'accessibilité). */
.defi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.defi-mark {
  flex: 0 0 auto;
  width: 1.4rem;
  text-align: center;
}

.defi-label {
  flex: 1 1 auto;
}

/* Nombre de mots déjà trouvés pour ce défi précis — une fraction pour le défi
   de quantité (d1), un simple compte pour les autres (un seul mot suffit à
   les remplir, mais rien n'empêche d'en trouver plusieurs). */
.defi-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Un défi rempli change de fond plutôt que de disparaître : le joueur doit
   pouvoir se relire la liste entière et voir ce qu'il a déjà fait. */
.defi--done {
  background: var(--brass-soft);
  border-color: var(--accent);
  color: var(--text);
}

.defi--done .defi-mark {
  color: var(--valid);
}

.defi--done .defi-count {
  color: var(--text);
}

/* Liste des mots trouvés pour ce défi — dépliée au clic, jamais affichée
   d'office : c'est ce qui évite de refaire un mot déjà trouvé. */
.defi-mots {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.defi-mot {
  background: var(--felt-500);
  border-radius: var(--r-chip);
  padding: 2px 9px;
  font-size: 0.82rem;
}

.defi--done .defi-mot {
  background: var(--surface);
}

.defi-mots-vide {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* Indice facultatif : discret tant qu'on ne le demande pas. */
.defi-indice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.defi-indice-masque {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.defi-indice-alerte {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 0.82rem;
}

.defi-indice-btn {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.defi-indice-btn--ghost {
  border-color: transparent;
}

.semaine-compteur {
  margin: 0;
}

.semaine-fini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  padding: 14px 18px;
  border-radius: var(--r-panel);
  background: var(--brass-soft);
  border: 1px solid var(--accent);
  max-width: 360px;
}

.semaine-fini[hidden] {
  display: none;
}

/* ─── Classement ─────────────────────────────────────────────────────────── */

.ranking .when {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
}

.en-cours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.en-cours-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.en-cours-who {
  flex: 0 0 auto;
  min-width: 88px;
}

.en-cours-bar {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 4px;
  background: var(--felt-500);
  overflow: hidden;
}

.en-cours-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.en-cours-count {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--muted);
  width: 2.4rem;
  text-align: right;
}