/* ——— Récompenses côté client ——— */
.recompenses {
  display: grid;
  gap: var(--e4);
}

/* Photo et texte côte à côte, bouton sur toute la largeur en dessous : sur un écran étroit,
   « RÉCLAMER » ne tient pas dans la colonne de texte. */
.recompense {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--e3) var(--e4);
  align-items: start;
  padding: var(--e3);
  background: var(--papier);
  border: var(--bord) solid var(--noir);
  box-shadow: var(--ombre);
}

.recompense > .bouton,
.recompense > .aide {
  grid-column: 1 / -1;
}

.recompense--en-cours {
  grid-template-columns: 1fr;
  border-color: var(--rouge);
}

.recompense__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--noir);
}

.recompense__infos {
  display: grid;
  gap: var(--e2);
}

.recompense__nom {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.recompense__prix {
  font-family: var(--police-main);
  font-size: 1.2rem;
  color: var(--rouge-texte);
}

.qr-recompense {
  display: grid;
  gap: var(--e4);
}

.qr-recompense__etat {
  font-size: 1.05rem;
}

.qr-recompense__fin {
  font-family: var(--police-titre);
  font-size: 2.6rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.qr-recompense__fin--validee {
  color: var(--rouge);
}

/* ——— Mur des gagnants (espace client) ——— */
.mur-gagnants ul {
  display: grid;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  text-transform: uppercase;
}