/* Missions (page Packs), voir js/missions.js : une liste sobre, sans tuiles
   ni pastilles. Chaque mission est une ligne (intitulé et récompense à
   gauche, compteur ou bouton à droite) avec une barre droite et fine en
   dessous ; les lignes sont séparées par un filet. */
.missions {
  max-width: var(--content-wide);
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-5);
  scroll-margin-top: 5rem;
}
.missions-carte { display: grid; gap: 1rem; }
.missions-titre { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; margin: 0; }

/* jour et semaine : l'un sous l'autre sur téléphone, côte à côte sur ordinateur */
.missions-periodes { display: grid; gap: 1.6rem 2.5rem; }
@media (min-width: 760px) { .missions-periodes { grid-template-columns: 1fr 1fr; align-items: start; } }
.missions-periode { min-width: 0; }
.missions-periode h3 {
  margin: 0; padding-bottom: 0.45rem; border-bottom: 1px solid var(--color-border);
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted);
}
.missions-periode h3 small { font-family: var(--font-body, inherit); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-text-faint); }

.missions-liste { list-style: none; margin: 0; padding: 0; }
.mission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.85rem 0 0;
}
.mission-texte { display: grid; gap: 0.2rem; min-width: 0; }
.mission-libelle { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.mission-texte small { color: var(--color-text-faint); font-size: 0.75rem; }
.mission-aller { font-size: 0.75rem; font-weight: 500; margin-left: 0.35rem; white-space: nowrap; }

/* barre de progression : un trait droit sur toute la largeur, qui sépare aussi les lignes */
.mission-barre { grid-column: 1 / -1; display: block; height: 2px; background: var(--color-divider); overflow: hidden; }
.mission-barre span { display: block; height: 100%; background: var(--color-primary); transition: width 400ms ease; }

.mission-compteur { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mission-faite { font-size: 0.78rem; color: var(--color-text-faint); white-space: nowrap; }
.mission .btn, .missions-bonus .btn { min-height: 36px; padding: 0 0.85rem; font-size: 0.72rem; border-radius: var(--radius-sm); }

/* terminée, à récupérer : l'intitulé passe à la couleur du site */
.mission.terminee:not(.recuperee) .mission-libelle { color: var(--color-primary); }
/* récupérée : en retrait */
.mission.recuperee .mission-texte { opacity: 0.55; }
.mission.recuperee .mission-barre span { background: var(--color-text-faint); }

/* bonus du jour : une ligne de plus, pas une boîte */
.missions-bonus {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);
}
.missions-bonus.pret { color: var(--color-text); }
.missions-bonus.fait { color: var(--color-text-faint); }