/* =============================================================================
   Écrans : ce qui n'appartient qu'à un écran précis
   ============================================================================= */

/* --- Connexion ------------------------------------------------------------ */
.auth {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  /* clip : contrairement à hidden, la section ne peut pas défiler, même quand
     le navigateur amène un champ au focus (sinon le fond qui déborde décale tout). */
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth__glace {
  position: absolute;
  left: -10%;
  right: -10%;
  top: -120px;
  height: 560px;
  border-radius: 0 0 50% 50%;
  background: var(--patinoire-glace);
  pointer-events: none;
}

.auth__scene {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: max(48px, env(safe-area-inset-top)) var(--space-2xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.auth__logo {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent);
  background: var(--color-accent);
  box-shadow: var(--shadow-accent);
  cursor: default;
}

.auth__logo .logo-flambeau {
  width: 100%;
  height: 100%;
}

.auth__logo .icon {
  width: 32px;
  height: 32px;
}

.auth__cartes {
  position: relative;
  width: 330px;
  height: 170px;
}

.auth__carte {
  position: absolute;
  top: 24px;
  width: 112px;
  padding: var(--space-md);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.auth__carte--gauche {
  left: 0;
  transform: rotate(-9deg);
}

.auth__carte--milieu {
  top: 0;
  left: 109px;
  z-index: 1;
}

.auth__carte--droite {
  right: 0;
  transform: rotate(9deg);
}

.auth__carte-semaine {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.auth__titres {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.auth__titre {
  font-size: 2.375rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.auth__slogan {
  font-size: var(--text-base);
  color: var(--color-text-soft);
}

.auth__panneau {
  position: relative;
  width: calc(100% - 24px);
  max-width: 440px;
  margin: auto 0 max(12px, env(safe-area-inset-bottom));
  padding: 18px 18px var(--space-xl);
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth__formulaire {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth__message {
  min-height: 1.4em;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  color: var(--color-danger-strong);
}

.auth__message:empty {
  display: none;
}

.auth__note {
  font-size: var(--text-sm);
  text-align: center;
  color: var(--color-text-muted);
}

.auth__note:empty {
  display: none;
}

.auth__sous-titre {
  font-size: var(--text-lg);
  font-weight: 700;
  text-align: center;
}

/* Lien discret sous le mot de passe : le bouton garde sa cible de 44 px,
   la marge négative évite d'écarter le bouton d'envoi. */
.auth__oubli {
  align-self: flex-end;
  margin: -10px 0;
  font-size: var(--text-sm);
}

.auth__envoi {
  min-height: 54px;
  border-radius: 18px;
  font-size: 1.0625rem;
}

@media (min-width: 960px) {
  .auth {
    justify-content: center;
    gap: var(--space-3xl);
  }

  .auth__panneau {
    margin: 0 0 var(--space-4xl);
  }
}

/* --- Vitrine : accueil des visiteurs sans compte -------------------------- */
.vitrine {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(var(--space-lg), env(safe-area-inset-top)) var(--space-lg) max(var(--space-4xl), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.vitrine__haut {
  display: flex;
  justify-content: flex-end;
}

.vitrine__heros {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.vitrine__logo {
  width: 64px;
  height: 64px;
  color: var(--color-accent);
}

.vitrine__logo .logo-flambeau {
  width: 100%;
  height: 100%;
}

.vitrine__titre {
  font-size: var(--text-2xl);
  font-weight: 900;
  font-stretch: var(--stretch-titre);
  line-height: 1;
}

.vitrine__slogan {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
}

.vitrine__promesse {
  max-width: 340px;
  line-height: 1.5;
  color: var(--color-text-soft);
}

.vitrine__actions {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.vitrine__cta {
  min-height: 54px;
  border-radius: var(--radius-pill);
  font-size: 1.0625rem;
}

.vitrine__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.vitrine__sous-titre {
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: var(--stretch-sous-titre);
}

.vitrine__legende {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.vitrine__regles .icon {
  color: var(--color-success);
}

.vitrine__lien {
  align-self: flex-start;
}

.vitrine__pied {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Étapes « Comment ça marche » : pastilles numérotées reliées par un trait. */
.etapes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapes__etape {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: var(--space-xl);
}

.etapes__etape:last-child {
  padding-bottom: 0;
}

.etapes__etape:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 2px;
  width: 2px;
  background: var(--color-accent-soft);
}

.etapes__numero {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--color-on-accent);
  background: var(--color-accent);
}

.etapes__titre {
  margin-top: var(--space-xs);
  font-size: 1.0625rem;
  font-weight: 700;
}

.etapes__texte {
  margin-top: var(--space-xs);
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-text-soft);
}

/* « Qui reste debout ? » : ligue illustrée, vivants et éliminés. */
.survivants {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.survivants__joueur {
  padding: var(--space-md) 0;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.survivants__joueur--vivant {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.survivants__joueur--elimine {
  color: var(--color-danger-strong);
  background: var(--color-danger-soft);
}

.survivants__initiale {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  font-weight: 800;
  background: var(--color-surface);
}

@media (min-width: 960px) {
  .vitrine {
    padding-top: var(--space-3xl);
    gap: var(--space-4xl);
  }

  .vitrine__titre {
    font-size: 3.5rem;
  }
}

/* --- Accueil : fenêtre de pick ---------------------------------------------- */
.fenetre {
  gap: 14px;
}

.fenetre__etat {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
}

.fenetre__etat--ferme {
  color: var(--color-text-muted);
}

.fenetre__libelle {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-muted);
}

.compte {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}

.compte__bloc {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.compte__nombre {
  font-size: var(--text-2xl);
  font-weight: 800;
  font-stretch: var(--stretch-chiffre);
  letter-spacing: -0.03em;
  line-height: 1;
}

.compte__unite {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* La jauge est un <progress> : sa valeur se règle sans style posé en JS */
.jauge {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  overflow: hidden;
  color: var(--color-accent);
  background: var(--color-fill);
}

.jauge::-webkit-progress-bar {
  background: var(--color-fill);
}

.jauge::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.jauge::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.fenetre__fin {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pick-resume {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* --- Choisir mon équipe ------------------------------------------------------ */
.match {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.match__info {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.match__equipes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.choix {
  min-height: 64px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border-radius: 18px;
  color: var(--color-text);
  background: var(--glass-bg-strong);
  border: 1px solid var(--color-border);
}

.choix:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.choix__textes {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.choix__nom {
  font-size: var(--text-md);
  font-weight: 700;
}

.choix__note {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choix--actuel {
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
}

.choix--actuel .choix__note {
  font-weight: 700;
  color: var(--color-accent-strong);
}

.choix:disabled {
  opacity: 0.75;
  background: var(--color-fill);
  border-style: dashed;
  border-color: var(--color-border-strong);
}

.choix--actuel:disabled {
  opacity: 1;
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
}

.choix:disabled .logo-equipe {
  filter: grayscale(1);
  opacity: 0.6;
}

.choix--actuel:disabled .logo-equipe {
  filter: none;
  opacity: 1;
}

.puce-ligue {
  min-height: 36px;
  padding: 0 var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}

/* --- Ligue ----------------------------------------------------------------- */
.grille-equipes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.case-equipe {
  min-height: 64px;
  padding: 6px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  color: var(--color-text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.case-equipe__abbr {
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.case-equipe__note {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.case-equipe--prise {
  color: var(--color-on-accent);
  background: var(--color-text);
  border-color: var(--color-text);
}

.case-equipe--prise .case-equipe__note {
  color: var(--color-neutral-soft);
}

.ligne-match {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.ligne-match__equipes {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
}

.ligne-match__a {
  font-weight: 500;
  color: var(--color-text-muted);
}

.ligne-match__heure {
  font-size: var(--text-md);
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}

.ligne-match__equipe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.ligne-match__droite {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ligne-match__score {
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ligne-match__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Match joué : la ligne s'efface, la perdante encore un peu plus. */
.ligne-match--passee .ligne-match__equipes {
  color: var(--color-text-soft);
}

.ligne-match--passee .logo-equipe {
  opacity: 0.6;
}

.ligne-match__equipe--perdante {
  font-weight: 500;
  color: var(--color-text-muted);
}

/* --- Gestion ---------------------------------------------------------------- */
.boite-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 14px;
  border-radius: var(--radius-md);
  background: var(--color-fill);
}

.boite-code__libelle {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.boite-code__valeur {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.statut-bouton {
  min-height: 32px;
  padding: 0 10px;
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.statut-bouton--elimine {
  color: var(--color-danger-strong);
  background: var(--color-danger-soft);
}

/* --- Administration ---------------------------------------------------------- */
.marque-admin {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent);
  background: var(--color-text);
}

.bouton--encre {
  color: var(--color-on-accent);
  background: var(--color-text);
}

.bouton--encre:hover {
  color: var(--color-on-accent);
  background: var(--color-neutral);
}

/* --- Réveil du serveur -------------------------------------------------------- */
.reveil {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 40px + env(safe-area-inset-bottom));
  z-index: 45;
  width: min(420px, calc(100% - 40px));
  padding: var(--space-lg);
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
}

.reveil__titre {
  font-size: var(--text-md);
  font-weight: 700;
}

.reveil__texte {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (min-width: 960px) {
  .reveil {
    bottom: var(--space-2xl);
  }
}

/* --- Pages publiques : règles, confidentialité, conditions ---------------- */
.texte-legal {
  display: grid;
  gap: var(--space-md);
  line-height: 1.6;
}

.texte-legal h2 {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
}

.texte-legal ul {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-left: var(--space-lg);
}

.liens-legaux {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
}