/*
 * Mise en page robuste des étapes de finale — V8
 * Fichier séparé volontairement : son nouveau nom évite les anciennes versions
 * de CSS gardées en cache par les navigateurs et certains hébergeurs.
 */

/* Le contenu des étapes ne dépend plus du rendu natif fieldset/legend. */
.final-score-details,
.special-prediction-grid.final-score-details,
.special-admin-grid.final-score-details {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 0 !important;
}

.final-stage {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: .9rem 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.final-stage--regulation {
  padding-top: 0 !important;
  border-top: 0 !important;
}
.final-stage-header,
.final-stage-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .85rem !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.final-stage-heading-main,
.final-stage-heading > div {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  min-width: 0 !important;
}
.final-stage-heading-main > span:last-child,
.final-stage-heading > div > span:last-child {
  display: block !important;
  min-width: 0 !important;
}
.final-stage-header strong,
.final-stage-heading strong {
  display: block !important;
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.25 !important;
  color: var(--text) !important;
}
.final-stage-header small,
.final-stage-heading small {
  display: block !important;
  margin-top: .12rem !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
.final-stage-number {
  display: inline-flex !important;
  flex: 0 0 1.85rem !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.85rem !important;
  height: 1.85rem !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: var(--accent-strong) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.stage-points {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  min-height: 1.85rem !important;
  margin: 0 !important;
  padding: .3rem .55rem !important;
  border: 1px solid var(--accent-soft-border) !important;
  border-radius: 999px !important;
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.stage-points-earned {
  border-color: #86efac !important;
  background: #ecfdf5 !important;
  color: #166534 !important;
}

/* Étapes 1 et 2 : même grille d'équipe et même taille de score. */
.final-stage .matchline,
.final-stage-scoreline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: .75rem !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: .8rem !important;
  padding: 0 !important;
}
.final-stage .matchline > .team:first-child { justify-self: start !important; text-align: left !important; }
.final-stage .matchline > .team:last-child { justify-self: end !important; text-align: right !important; flex-direction: row-reverse !important; }
.final-stage .team {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  min-width: 0 !important;
  font-weight: 700 !important;
}
.final-stage .team-name {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.final-stage .scorebox,
.final-stage .scorebox--final,
.admin-side .score.score--final {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  width: auto !important;
  min-width: 0 !important;
}
.final-stage .scorebox input,
.final-stage .scorebox--final input,
.admin-side .score.score--final input,
.extra-time-score .extra-score-square {
  display: block !important;
  box-sizing: border-box !important;
  width: 3.4rem !important;
  min-width: 3.4rem !important;
  max-width: 3.4rem !important;
  height: 3.4rem !important;
  min-height: 3.4rem !important;
  margin: 0 !important;
  padding: .35rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  text-align: center !important;
  font: inherit !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  -webkit-appearance: none !important;
  appearance: textfield !important;
}
.final-stage input[type=number]::-webkit-inner-spin-button,
.final-stage input[type=number]::-webkit-outer-spin-button,
.admin-side .score input[type=number]::-webkit-inner-spin-button,
.admin-side .score input[type=number]::-webkit-outer-spin-button {
  margin: 0 !important;
  -webkit-appearance: none !important;
}
.final-stage .scorebox input:disabled,
.extra-time-score .extra-score-square:disabled {
  background: #fff !important;
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Admin : la prolongation ne doit jamais étirer les champs sur toute la largeur. */
.special-admin-row > td {
  width: 100% !important;
  padding: 0 .35rem !important;
}
.extra-time-score {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: end !important;
  gap: .75rem !important;
  width: 100% !important;
  max-width: 28rem !important;
  margin: .8rem auto 0 !important;
}
.extra-time-score label {
  display: grid !important;
  justify-items: center !important;
  gap: .45rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
.extra-time-score label:first-child { justify-self: end !important; }
.extra-time-score label:last-child { justify-self: start !important; }
.extra-time-score > span {
  align-self: end !important;
  padding-bottom: 1.02rem !important;
  color: var(--muted) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}
.final-stage-note {
  margin: .65rem 0 0 !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* Tirs au but : deux lignes propres, cinq vrais cercles par équipe. */
.penalty-instruction {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .4rem !important;
  margin: .7rem 0 .35rem !important;
  color: var(--muted) !important;
  font-size: .75rem !important;
  line-height: 1.4 !important;
}
.penalty-instruction .legend-goal,
.penalty-instruction .legend-miss {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.65rem !important;
  padding: .2rem .48rem !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}
.penalty-instruction .legend-goal { background: #dcfce7 !important; color: #166534 !important; }
.penalty-instruction .legend-miss { background: #fee2e2 !important; color: #991b1b !important; }
.penalty-team-row {
  display: grid !important;
  grid-template-columns: minmax(9rem, .8fr) minmax(0, 1.5fr) !important;
  align-items: center !important;
  gap: .9rem !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: .7rem 0 !important;
  border-top: 1px solid #edf0f4 !important;
}
.penalty-team-row:first-of-type { border-top: 0 !important; }
.penalty-team-row > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  min-width: 0 !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}
.penalty-kicks {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: .55rem !important;
  width: auto !important;
  min-width: 0 !important;
}
.penalty-kick-wrap {
  display: flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
button.penalty-kick,
.penalty-kick {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 2.75rem !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  max-width: 2.75rem !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  max-height: 2.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  background-image: none !important;
  color: #64748b !important;
  box-shadow: none !important;
  opacity: 1 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
button.penalty-kick.is-goal,
.penalty-kick.is-goal,
button.penalty-kick.is-goal:disabled,
.penalty-kick.is-goal:disabled {
  border-color: #15803d !important;
  background: #22c55e !important;
  color: #fff !important;
}
button.penalty-kick.is-miss,
.penalty-kick.is-miss,
button.penalty-kick.is-miss:disabled,
.penalty-kick.is-miss:disabled {
  border-color: #b91c1c !important;
  background: #ef4444 !important;
  color: #fff !important;
}
button.penalty-kick:disabled,
.penalty-kick:disabled {
  cursor: default !important;
  opacity: 1 !important;
}
.penalty-kick-number { display: none !important; }
.penalty-kick-symbol {
  display: block !important;
  color: inherit !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Résultat officiel : pastilles également rondes. */
.penalty-result-strip {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .35rem !important;
}
.penalty-result-dot {
  display: inline-flex !important;
  flex: 0 0 1.75rem !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 50% !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.penalty-result-dot.is-goal { border-color: #16a34a !important; background: #22c55e !important; color: #fff !important; }
.penalty-result-dot.is-miss { border-color: #dc2626 !important; background: #ef4444 !important; color: #fff !important; }
.penalty-result-dot.is-empty { background: #e5e7eb !important; color: #64748b !important; }

/* Ligne score 90′ dans l'administration. */
.admin-side { min-width: 0 !important; }
.admin-score-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .5rem !important;
  margin-top: .1rem !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
.admin-score-step .final-stage-number {
  flex-basis: 1.55rem !important;
  width: 1.55rem !important;
  height: 1.55rem !important;
  font-size: .7rem !important;
}

@media (max-width: 720px) {
  .final-stage-header,
  .final-stage-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: .55rem !important;
  }
  .stage-points { white-space: normal !important; }
  .final-stage .matchline,
  .final-stage-scoreline {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: .4rem !important;
  }
  .final-stage .scorebox input,
  .final-stage .scorebox--final input,
  .extra-time-score .extra-score-square {
    width: 3rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    height: 3rem !important;
    min-height: 3rem !important;
  }
  .final-stage .team { align-items: flex-start !important; font-size: .88rem !important; }
  .final-stage .matchline > .team:last-child { align-items: flex-end !important; }
  .penalty-team-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .55rem !important;
  }
  .penalty-kicks { gap: .45rem !important; }
  button.penalty-kick,
  .penalty-kick {
    flex-basis: 2.55rem !important;
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    max-width: 2.55rem !important;
    height: 2.55rem !important;
    min-height: 2.55rem !important;
    max-height: 2.55rem !important;
  }
}

@media (max-width: 430px) {
  .final-stage .matchline,
  .final-stage-scoreline {
    gap: .3rem !important;
  }
  .final-stage .scorebox,
  .final-stage .scorebox--final { gap: .22rem !important; }
  .final-stage .scorebox input,
  .final-stage .scorebox--final input {
    width: 2.7rem !important;
    min-width: 2.7rem !important;
    max-width: 2.7rem !important;
    height: 2.8rem !important;
    min-height: 2.8rem !important;
    font-size: 1rem !important;
  }
  .penalty-kicks { gap: .35rem !important; }
  button.penalty-kick,
  .penalty-kick {
    flex-basis: 2.35rem !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    max-width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    max-height: 2.35rem !important;
  }
}