/* ===========================================================================
   spotifyPL — styles partagés par toutes les pages
   Thème sombre type « salle de fête », accent vert Spotify.
   =========================================================================== */

:root {
  --fond: #0e0e12;
  --surface: #1a1a22;
  --surface-2: #25252f;
  --texte: #f5f5f7;
  --texte-2: #9b9ba6;
  --accent: #1db954;
  --accent-fonce: #169c46;
  --or: #ffce3d;
  --danger: #e25c5c;
  --rayon: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  min-height: 100vh;
}

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }

h1, h2, h3 { margin: 0 0 8px; }

a { color: var(--accent); }

/* --- Logo ----------------------------------------------------------------- */
.logo {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--texte);
  text-decoration: none;
}
.logo span { color: var(--accent); }
.logo.petit { font-size: 1.1rem; }

.sous-titre { color: var(--texte-2); margin: 4px 0 24px; }

/* --- Cartes ----------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 20px;
  margin: 14px 0;
}
.carte h2 { font-size: 1.05rem; }

.indication { color: var(--texte-2); font-size: 0.85rem; margin: 4px 0 12px; }

/* --- Formulaires ----------------------------------------------------------- */
input, select {
  background: var(--surface-2);
  border: 1px solid #36363f;
  border-radius: 8px;
  color: var(--texte);
  padding: 10px 12px;
  font-size: 1rem;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }

label { display: block; font-size: 0.85rem; color: var(--texte-2); margin: 10px 0 4px; }

.ligne-form { display: flex; gap: 10px; align-items: end; }
.ligne-form > * { flex: 1; }

/* --- Boutons ----------------------------------------------------------------- */
.btn {
  background: var(--surface-2);
  border: none;
  border-radius: 999px;
  color: var(--texte);
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.15); }
.btn.principal { background: var(--accent); color: #04240f; }
.btn.principal:hover { background: var(--accent-fonce); }
.btn.petit { padding: 5px 12px; font-size: 0.8rem; }
.btn.danger { background: rgba(226, 92, 92, 0.15); color: var(--danger); }
.btn:disabled { opacity: 0.45; cursor: default; }

/* --- Messages ----------------------------------------------------------------- */
.erreur {
  background: rgba(226, 92, 92, 0.12);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
}
.info {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
}

/* --- Listes de titres ---------------------------------------------------- */
.liste-titres { list-style: none; margin: 0; padding: 0; }
.titre-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #2a2a33;
}
.titre-item:last-child { border-bottom: none; }
.titre-item img, .pochette-vide {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
}
.titre-infos { flex: 1; min-width: 0; }
.titre-infos .nom {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.titre-infos .detail {
  color: var(--texte-2); font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 2px 0 0;
}
.titre-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* --- Badges et scores -------------------------------------------------------- */
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge.style { background: rgba(255, 206, 61, 0.15); color: var(--or); }
.badge.valide { background: rgba(29, 185, 84, 0.18); color: var(--accent); }
.badge.score { background: var(--surface-2); color: var(--texte); }

.btn-vote {
  border: 1px solid #36363f;
  background: var(--surface-2);
  color: var(--texte);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 1rem;
  cursor: pointer;
}
.btn-vote.actif-oui { background: rgba(29, 185, 84, 0.25); border-color: var(--accent); }
.btn-vote.actif-non { background: rgba(226, 92, 92, 0.25); border-color: var(--danger); }

/* ===========================================================================
   Écran de vidéoprojection
   =========================================================================== */
.ecran {
  max-width: none;
  padding: 3vh 3vw;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2vh 2vw;
  height: 100vh;
  overflow: hidden;
}
.ecran header { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: center; }
.ecran h1 { font-size: 2.2vw; }

.ecran .lecteur { display: flex; flex-direction: column; gap: 1.5vh; min-height: 0; }
.ecran .en-cours {
  display: flex; align-items: center; gap: 1.5vw;
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 2vh 1.5vw;
  border-left: 5px solid var(--accent);
}
.ecran .en-cours img { width: 9vw; height: 9vw; border-radius: 8px; }
.ecran .en-cours .nom { font-size: 1.9vw; font-weight: 800; margin: 0; }
.ecran .en-cours .artistes { font-size: 1.2vw; color: var(--texte-2); margin: 0.5vh 0 0; }
.ecran .etiquette {
  text-transform: uppercase; letter-spacing: 2px;
  font-size: 0.8vw; color: var(--accent); font-weight: 700;
  margin: 0 0 0.5vh;
}
.ecran .suivantes { background: var(--surface); border-radius: var(--rayon); padding: 1.5vh 1.5vw; flex: 1; overflow: hidden; }
.ecran .suivantes .titre-item { padding: 0.9vh 0; }
.ecran .suivantes .nom { font-size: 1.1vw; }
.ecran .suivantes .detail { font-size: 0.85vw; }
.ecran .suivantes img, .ecran .suivantes .pochette-vide { width: 3vw; height: 3vw; }

.ecran .lateral { display: flex; flex-direction: column; gap: 2vh; min-height: 0; }
.ecran .qr {
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 1.5vh 1vw;
  text-align: center;
}
.ecran .qr img { width: 11vw; height: 11vw; border-radius: 8px; background: #fff; padding: 0.4vw; }
.ecran .qr .code { font-size: 1.4vw; letter-spacing: 4px; color: var(--accent); font-weight: 800; margin: 0.8vh 0 0; }
.ecran .qr .url { font-size: 0.75vw; color: var(--texte-2); margin: 0.4vh 0 0; }

.ecran .votes-en-cours { background: var(--surface); border-radius: var(--rayon); padding: 1.5vh 1vw; flex: 1; overflow: hidden; }
.ecran .votes-en-cours .titre-item { padding: 0.7vh 0; gap: 0.7vw; }
.ecran .votes-en-cours .nom { font-size: 0.95vw; }
.ecran .votes-en-cours .detail { font-size: 0.75vw; }
.ecran .votes-en-cours img, .ecran .votes-en-cours .pochette-vide { width: 2.4vw; height: 2.4vw; }
.ecran .votes-en-cours .badge { font-size: 0.8vw; }

.ecran .bandeau-style {
  background: rgba(255, 206, 61, 0.1);
  border: 1px solid rgba(255, 206, 61, 0.35);
  color: var(--or);
  border-radius: var(--rayon);
  padding: 1.2vh 1vw;
  text-align: center;
  font-size: 1.1vw;
  font-weight: 700;
}

/* Animation « jackpot » quand une chanson est validée */
.jackpot {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: apparition 0.3s ease-out;
}
.jackpot .gros-titre {
  font-size: 4vw;
  font-weight: 900;
  color: var(--or);
  text-shadow: 0 0 30px rgba(255, 206, 61, 0.6);
  animation: pulsation 0.8s ease-in-out infinite alternate;
  text-align: center;
}
.jackpot .quoi { font-size: 2.2vw; margin-top: 2vh; text-align: center; }
.jackpot .qui { font-size: 1.3vw; color: var(--texte-2); margin-top: 1vh; }
.jackpot img { width: 14vw; height: 14vw; border-radius: 12px; margin-top: 3vh; }

@keyframes apparition { from { opacity: 0; transform: scale(0.9); } }
@keyframes pulsation { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Confettis du jackpot */
.confetti {
  position: fixed;
  top: -20px;
  width: 12px; height: 12px;
  z-index: 51;
  animation: chute linear forwards;
}
@keyframes chute {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* ===========================================================================
   Page mobile participant
   =========================================================================== */
.onglets { display: flex; gap: 8px; margin: 14px 0; }
.onglets .btn { flex: 1; }
.onglets .btn.actif { background: var(--accent); color: #04240f; }

.toast {
  position: fixed;
  left: 16px; right: 16px; bottom: 20px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  z-index: 40;
  animation: apparition 0.25s ease-out;
}

/* ===========================================================================
   Tableau de bord admin
   =========================================================================== */
.entete-admin { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tableau th, .tableau td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #2a2a33; }
.tableau th { color: var(--texte-2); font-weight: 600; }
.barre-stat {
  background: var(--accent);
  height: 14px;
  border-radius: 4px;
  min-width: 2px;
}
.coche { width: auto; }

@media (max-width: 640px) {
  .grille-2 { grid-template-columns: 1fr; }
}