/* Loterie de la Nation — page publique. Reprend les couleurs de CSS/style.css. */
.loterie {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(30, 90, 169, 0.35), transparent 60%),
    linear-gradient(180deg, var(--night-blue) 0%, var(--night) 55%);
  min-height: 100vh;
}
.lot-main { margin: 0 auto; max-width: 1120px; padding: 2.5rem 1.25rem 3rem; }
.lot-hero { padding: 1.5rem 0 2rem; text-align: center; }
.lot-eyebrow, .lot-etiquette {
  color: var(--gold); font-family: "DM Mono", monospace; font-size: 0.74rem; letter-spacing: 0.18em; margin: 0 0 0.6rem; text-transform: uppercase;
}
.lot-hero h1 { color: var(--gold-bright); font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: 0.04em; margin: 0 0 0.9rem; text-shadow: 0 2px 18px rgba(226, 186, 105, 0.25); }
.lot-intro { color: var(--muted); font-family: var(--body-font); font-size: 1.12rem; line-height: 1.6; margin: 0 auto; max-width: 46rem; }
.lot-intro strong { color: var(--gold-bright); }

.lot-panneau {
  background: linear-gradient(180deg, rgba(10, 27, 55, 0.88), rgba(5, 11, 22, 0.92));
  border: 1px solid rgba(226, 186, 105, 0.28);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  margin: 0 0 1.5rem;
  padding: 1.5rem;
}
.lot-panneau h2 { color: var(--gold-bright); font-size: 1.35rem; margin: 0 0 1rem; }
.lot-panneau h3 { color: var(--ivory); font-size: 1.05rem; margin: 1.2rem 0 0.6rem; }
.lot-erreur { color: var(--gold-bright); font-family: var(--body-font); text-align: center; }

/* Cagnotte et compte à rebours */
.lot-entete { align-items: stretch; display: grid; gap: 1rem; grid-template-columns: 1.4fr 1fr; }
.lot-cagnotte { border-right: 1px solid rgba(226, 186, 105, 0.18); padding-right: 1rem; }
.lot-montant { color: var(--gold-bright); display: block; font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 800; line-height: 1.05; margin: 0.2rem 0 0.5rem; }
.lot-note { color: var(--muted); font-family: var(--body-font); font-size: 0.98rem; line-height: 1.5; margin: 0.25rem 0; }
.lot-note strong { color: var(--ivory); }
.lot-rebours { display: flex; flex-direction: column; justify-content: center; }
.lot-compteur { display: flex; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.lot-compteur div { background: rgba(30, 90, 169, 0.22); border: 1px solid rgba(30, 90, 169, 0.6); border-radius: 10px; flex: 1; padding: 0.55rem 0.2rem; text-align: center; }
.lot-compteur strong { color: var(--ivory); display: block; font-family: "DM Mono", monospace; font-size: 1.7rem; }
.lot-compteur span { color: var(--muted); font-family: var(--body-font); font-size: 0.75rem; text-transform: uppercase; }

.lot-chiffres { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, 1fr); margin-top: 1.2rem; }
.lot-chiffre { background: rgba(5, 11, 22, 0.55); border: 1px solid rgba(186, 200, 220, 0.14); border-radius: 10px; padding: 0.75rem; text-align: center; }
.lot-chiffre span { color: var(--muted); display: block; font-family: var(--body-font); font-size: 0.8rem; text-transform: uppercase; }
.lot-chiffre strong { color: var(--ivory); display: block; font-size: 1.35rem; margin-top: 0.2rem; }

/* Les trois prix */
.lot-prix { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.lot-prix-carte {
  background: linear-gradient(160deg, rgba(30, 90, 169, 0.28), rgba(5, 11, 22, 0.75));
  border: 1px solid rgba(226, 186, 105, 0.35); border-radius: 14px; padding: 1.2rem 1rem; position: relative; text-align: center;
}
.lot-prix-carte--3 { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(226, 186, 105, 0.35), 0 10px 30px rgba(226, 186, 105, 0.12); }
.lot-medaille {
  align-items: center; background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #9c7a35);
  border-radius: 50%; color: #14213a; display: inline-flex; font-weight: 800; height: 2.6rem; justify-content: center; margin-bottom: 0.6rem; width: 2.6rem;
}
.lot-prix-carte h3 { color: var(--muted); font-family: var(--body-font); font-size: 0.85rem; letter-spacing: 0.08em; margin: 0; text-transform: uppercase; }
.lot-prix-carte .lot-pct { color: var(--gold); font-family: "DM Mono", monospace; font-size: 0.85rem; }
.lot-prix-carte strong { color: var(--gold-bright); display: block; font-size: 1.6rem; margin: 0.35rem 0 0.2rem; }
.lot-gagnant { color: var(--ivory); font-family: var(--body-font); font-size: 1.05rem; margin: 0.6rem 0 0; }
.lot-gagnant b { color: var(--gold-bright); }
.lot-reporte { color: #f3b3a0; font-family: var(--body-font); font-size: 0.98rem; margin: 0.6rem 0 0; }
.lot-roll { background: rgba(0, 0, 0, 0.35); border-radius: 8px; color: #c8d6ec; font-family: "DM Mono", monospace; font-size: 0.78rem; line-height: 1.6; margin: 0.8rem 0 0; padding: 0.5rem 0.6rem; text-align: left; }
.lot-roll .ok { color: var(--gold-bright); }
.lot-roll .relance { color: #8ea3c2; }
.lot-banque { color: var(--muted); font-family: var(--body-font); margin: 1rem 0 0; text-align: center; }

/* Numéros */
.lot-recherche { background: rgba(5, 11, 22, 0.7); border: 1px solid rgba(186, 200, 220, 0.3); border-radius: 8px; color: var(--ivory); font-family: var(--body-font); font-size: 1rem; margin: 0 0 1rem; max-width: 22rem; padding: 0.6rem 0.8rem; width: 100%; }
.lot-numeros { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.lot-numeros li { background: rgba(5, 11, 22, 0.55); border: 1px solid rgba(186, 200, 220, 0.14); border-radius: 10px; padding: 0.7rem 0.8rem; }
.lot-numeros .nom { color: var(--ivory); display: block; font-family: var(--body-font); font-size: 1.02rem; font-weight: 700; margin-bottom: 0.35rem; }
.lot-puce { background: rgba(30, 90, 169, 0.35); border-radius: 6px; color: var(--ivory); display: inline-block; font-family: "DM Mono", monospace; font-size: 0.82rem; margin: 0.12rem; padding: 0.1rem 0.4rem; }
.lot-puce--gagnant { background: var(--gold); color: #14213a; font-weight: 700; }
.lot-puce--non-gagnant { background: rgba(243, 179, 160, 0.16); border: 1px dashed rgba(243, 179, 160, 0.6); color: #f3b3a0; }
.lot-empreinte { color: #8ea3c2; font-family: "DM Mono", monospace; font-size: 0.72rem; margin: 1rem 0 0; overflow-wrap: anywhere; }

.lot-regles ol { color: var(--muted); font-family: var(--body-font); font-size: 1.02rem; line-height: 1.65; margin: 0; padding-left: 1.3rem; }
.lot-regles strong { color: var(--ivory); }
.lot-badge { background: rgba(226, 186, 105, 0.15); border: 1px solid rgba(226, 186, 105, 0.5); border-radius: 999px; color: var(--gold-bright); display: inline-block; font-family: var(--body-font); font-size: 0.82rem; margin-left: 0.4rem; padding: 0.1rem 0.6rem; vertical-align: middle; }
.lot-badge--ferme { background: rgba(243, 179, 160, 0.12); border-color: rgba(243, 179, 160, 0.5); color: #f3b3a0; }

@media (max-width: 820px) {
  .lot-entete { grid-template-columns: 1fr; }
  .lot-cagnotte { border-bottom: 1px solid rgba(226, 186, 105, 0.18); border-right: 0; padding: 0 0 1rem; }
  .lot-chiffres { grid-template-columns: repeat(2, 1fr); }
  .lot-prix { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .lot-prix-carte { transition: transform 180ms ease; }
  .lot-prix-carte:hover { transform: translateY(-2px); }
}