/* PARISII - Concours de pronostics
   Adaptez les variables ci-dessous aux couleurs du site. */
.prono {
  --p-fond: #ffffff;
  --p-texte: #111418;
  --p-doux: #6b7280;
  --p-ligne: #e5e7eb;
  --p-carte: #f7f7f8;
  --p-accent: #111418;
  --p-accent-texte: #ffffff;
  --p-ok: #15803d;
  --p-err: #b91c1c;
  --p-or: #d4a017;

  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  color: var(--p-texte);
  font-family: inherit;
}
.prono h1 { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .02em; }
.prono h2 { margin: 32px 0 12px; font-size: 1.15rem; text-transform: uppercase; }

.prono-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.prono-nav a {
  padding: 6px 14px; border: 1px solid var(--p-ligne); border-radius: 999px;
  color: var(--p-texte); text-decoration: none; font-size: .9rem;
}
.prono-nav a.actif, .prono-nav a:hover { background: var(--p-accent); color: var(--p-accent-texte); border-color: var(--p-accent); }

.prono-flash { padding: 12px 14px; border-radius: 8px; margin: 0 0 16px; }
.prono-flash-ok   { background: #ecfdf3; color: var(--p-ok); }
.prono-flash-err  { background: #fef2f2; color: var(--p-err); }
.prono-flash-info { background: var(--p-carte); }

.prono-carte {
  background: var(--p-carte); border: 1px solid var(--p-ligne); border-left: 4px solid var(--p-ligne);
  border-radius: 10px; padding: 14px; margin-bottom: 12px;
}
.prono-carte.prono-fait { border-left-color: var(--p-ok); }
.prono-infos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .85rem; color: var(--p-doux); margin-bottom: 10px; }
.prono-compet { font-weight: 600; text-transform: uppercase; }

.prono-saisie { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 8px; }
.prono-equipe { font-weight: 600; }
.prono-saisie .prono-equipe:first-child { text-align: right; }
.prono-nous { text-transform: uppercase; }
.prono-sep { color: var(--p-doux); }
.prono-score {
  width: 64px; padding: 8px 4px; text-align: center; font-size: 1.2rem; font-weight: 700;
  border: 1px solid var(--p-ligne); border-radius: 6px; background: var(--p-fond);
  -moz-appearance: textfield;
}
.prono-score::-webkit-outer-spin-button, .prono-score::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prono-score:disabled { opacity: .5; }

.prono-pied { display: flex; justify-content: space-between; margin-top: 10px; font-size: .85rem; }
.prono-pied a { color: var(--p-doux); }
.prono-ok { color: var(--p-ok); font-weight: 600; }

.prono-btn {
  display: inline-block; width: 100%; padding: 14px; border: 0; border-radius: 8px;
  background: var(--p-accent); color: var(--p-accent-texte); font-weight: 700; font-size: 1rem;
  text-transform: uppercase; cursor: pointer; text-align: center; text-decoration: none;
}
a.prono-btn { width: auto; padding: 10px 20px; }
.prono-aide, .prono-vide { color: var(--p-doux); font-size: .9rem; }

.prono-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prono-table th { text-align: left; font-size: .75rem; text-transform: uppercase; color: var(--p-doux); padding: 8px 6px; border-bottom: 2px solid var(--p-ligne); }
.prono-table td { padding: 10px 6px; border-bottom: 1px solid var(--p-ligne); vertical-align: top; }
.prono-table small { color: var(--p-doux); }
.prono-pts { font-weight: 700; white-space: nowrap; }
.prono-rang { font-weight: 700; width: 2em; }
.prono-podium.prono-rang1 td.prono-rang { color: var(--p-or); }
.prono-moi td { background: #fffbea; }
.prono-exact td.prono-pts::after { content: " \2605"; color: var(--p-or); }

.prono-filtre { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.prono-filtre select { padding: 6px 8px; border: 1px solid var(--p-ligne); border-radius: 6px; }

.prono-entete-match { text-align: center; margin-bottom: 20px; }
.prono-entete-match h1 { margin: 6px 0; }
.prono-score-final { font-size: 2rem; font-weight: 800; margin: 4px 0; }
.prono-date { color: var(--p-doux); }

.prono-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.prono-stats div { background: var(--p-carte); border-radius: 8px; padding: 12px; text-align: center; }
.prono-stats strong { display: block; font-size: 1.3rem; }
.prono-stats span { font-size: .8rem; color: var(--p-doux); }

.prono-bareme { padding-left: 20px; line-height: 1.7; }

@media (max-width: 520px) {
  .prono-opt { display: none; }
  .prono-score { width: 52px; font-size: 1.1rem; }
  .prono-saisie { gap: 6px; font-size: .9rem; }
}

/* Matchs en cours */
.prono-carte.prono-live { border-left-color: #dc2626; }
.prono-badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: #dc2626; color: #fff; font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 4px;
}
.prono-badge-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: prono-pulse 1.4s infinite;
}
@keyframes prono-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .prono-badge-live::before { animation: none; } }
.prono-affiche { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; text-align: center; margin: 4px 0 8px; }
.prono-live-prono { text-align: center; color: var(--p-doux); }
.prono-live-prono strong { color: var(--p-texte); font-size: 1.1rem; }