/* Jackpot — fenêtre d'évènement et rappel dans « mon compte ».
   La fenêtre est volontairement sans échappatoire : ni croix, ni clic
   extérieur, ni touche Échap. On en sort par un des trois boutons. */

.jackpot-voile {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(8, 11, 22, 0.82);
  backdrop-filter: blur(3px);
}
.jackpot-voile.ouvert { display: flex; }
body.jackpot-bloque { overflow: hidden; }

.jackpot-fenetre {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: auto;
  border-radius: 20px;
  background: #10152a;
  color: #e8ecf7;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Liseré animé : le seul « effet » de la fenêtre, discret et continu. */
.jackpot-fenetre::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f5c451, #e0573e, #6f7cf0, #f5c451);
  background-size: 300% 100%;
  animation: jackpot-liseré 6s linear infinite;
}
@keyframes jackpot-liseré {
  to { background-position: 300% 0; }
}

.jackpot-entete { padding: 26px 28px 18px; }
.jackpot-surtitre {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f5c451;
  margin-bottom: 8px;
}
.jackpot-titre {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
}
.jackpot-intro {
  margin: 0;
  color: #a9b3cc;
  font-size: 14px;
  line-height: 1.6;
}
.jackpot-intro b { color: #f5c451; }

.jackpot-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 28px 18px;
}
.jackpot-chiffre {
  flex: 1 1 150px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
}
.jackpot-chiffre .valeur { font-size: 19px; font-weight: 800; }
.jackpot-chiffre .libelle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8e99b5;
  margin-top: 2px;
}

.jackpot-grille {
  max-height: 46vh;
  overflow-y: auto;
  padding: 0 28px;
  margin-bottom: 6px;
}
.jackpot-ligne {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.jackpot-ligne:last-child { border-bottom: none; }
.jackpot-ligne .competition { font-size: 14px; font-weight: 600; }
.jackpot-ligne .pays {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #8e99b5;
  margin-top: 1px;
}
.jackpot-ligne select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1a2140;
  color: #e8ecf7;
  font-size: 13.5px;
}
.jackpot-ligne select:focus { outline: 2px solid #6f7cf0; outline-offset: 1px; }
.jackpot-ligne.remplie select { border-color: rgba(245, 196, 81, 0.55); }

.jackpot-pied {
  padding: 16px 28px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}
.jackpot-avancement {
  font-size: 12.5px;
  color: #a9b3cc;
  margin-bottom: 12px;
}
.jackpot-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.jackpot-btn {
  flex: 1 1 auto;
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.jackpot-btn.valider {
  flex: 2 1 240px;
  background: linear-gradient(135deg, #f5c451, #e0a020);
  color: #241a02;
}
.jackpot-btn.valider:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: #6f7893;
  cursor: not-allowed;
}
.jackpot-btn.plus-tard {
  background: rgba(255, 255, 255, 0.09);
  color: #e8ecf7;
}
.jackpot-btn.jamais {
  background: transparent;
  color: #7c869f;
  text-decoration: underline;
  font-weight: 500;
}
.jackpot-btn:hover:not(:disabled) { filter: brightness(1.08); }
.jackpot-erreur {
  margin-top: 10px;
  font-size: 13px;
  color: #ff9b8a;
}

/* --- Grille du Jackpot dans « mon compte » ---------------------------------
   La grille est une carte de pari comme les autres : elle prend sa largeur de
   .bet-cards-container et ne fixe donc aucune dimension. Seuls la bordure, le
   halo et l'accent doré la distinguent, parce que l'évènement est ponctuel. */
.bet-card-jackpot {
  position: relative;
  border-color: rgba(245, 196, 81, 0.35);
  background: linear-gradient(180deg, rgba(245, 196, 81, 0.07), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}
/* Halo lent : signale l'évènement sans clignoter. */
.bet-card-jackpot::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle at 30% 50%, rgba(245, 196, 81, 0.14), transparent 55%);
  animation: jackpot-halo 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes jackpot-halo {
  from { transform: translateX(-12%); opacity: 0.5; }
  to   { transform: translateX(12%);  opacity: 1; }
}
.bet-card-jackpot > * { position: relative; z-index: 1; }

.bet-card-jackpot .bjk-surtitre {
  margin: 0 0 3px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f5c451;
}
.bet-card-jackpot .bjk-titre-liste { color: #f5c451; }

.bet-card-jackpot .bjk-liste {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  max-height: 230px;
  overflow-y: auto;
}
.bet-card-jackpot .bjk-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 6px 10px;
}
.bet-card-jackpot .bjk-comp {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.bet-card-jackpot .bjk-eq {
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}
.bet-card-jackpot .bjk-vide {
  padding: 4px 0;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 620px) {
  .jackpot-entete { padding: 22px 18px 14px; }
  .jackpot-chiffres, .jackpot-grille, .jackpot-pied { padding-left: 18px; padding-right: 18px; }
  .jackpot-titre { font-size: 21px; }
  .jackpot-ligne { grid-template-columns: 1fr; gap: 6px; }
  .jackpot-btn { flex: 1 1 100%; }
}