/* VoteMusique — styles communs. Thème sombre (salle sombre) ; thème clair au choix sur les pages de gestion. */

:root {
  --fond: #0e0f14;
  --surface: #181a22;
  --surface-2: #222530;
  --bordure: #2e3240;
  --texte: #f2f3f7;
  --texte-2: #a4a9b8;
  --accent: #ffb020;        /* ambre : étoiles, éléments actifs */
  --accent-texte: #1a1200;
  --en-cours: #3ddc97;      /* vert : morceau en cours, connecté */
  --danger: #ff5d5d;
  --rayon: 16px;
  --ombre: 0 6px 24px rgba(0, 0, 0, .35);
  --entete-fond: rgba(14, 15, 20, .94);
  --danger-doux: #ff8a8a;   /* texte d'alerte */
  color-scheme: dark;
}

/* Thème clair (bouton ☀️ / 🌙 de la première ligne des pages de gestion) */
:root[data-theme="clair"] {
  --fond: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #e9ebf1;
  --bordure: #d3d7e0;
  --texte: #16181f;
  --texte-2: #5b6173;
  --accent: #b06a00;
  --accent-texte: #ffffff;
  --en-cours: #14a467;
  --danger: #d93636;
  --ombre: 0 6px 20px rgba(20, 24, 40, .12);
  --entete-fond: rgba(243, 244, 247, .94);
  --danger-doux: #c62828;
  color-scheme: light;
}

.bouton-theme { flex: none; padding: .4em .8em; font-size: .85rem; white-space: nowrap; }
@media print { .bouton-theme { display: none; } }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  padding: .7em 1.1em;
  touch-action: manipulation;
}
button:disabled { opacity: .45; cursor: default; }
button.principal { background: var(--accent); color: var(--accent-texte); font-weight: 700; }
button.danger { background: var(--danger); color: #fff; font-weight: 700; }

input, select, textarea {
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: .6em .8em;
  width: 100%;
}

.conteneur { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }
.large { max-width: 1200px; }

.entete {
  position: sticky; top: 0; z-index: 5;
  background: var(--entete-fond);
  backdrop-filter: blur(8px);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--bordure);
}
.entete h1 { font-size: 1.05rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete .sous { color: var(--texte-2); font-size: .8rem; font-weight: 400; display: block; }

.pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--texte-2); flex: none; }
.pastille.ok { background: var(--en-cours); box-shadow: 0 0 8px var(--en-cours); }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px;
  margin: 12px 0;
}

.message-central {
  text-align: center;
  padding: 18vh 24px 24px;
}
.message-central .icone { font-size: 4rem; }
.message-central h2 { font-size: 1.5rem; margin: .4em 0; }
.message-central p { color: var(--texte-2); }

.muet { color: var(--texte-2); }
.petit { font-size: .85rem; }
.cache { display: none !important; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(150%);
  background: var(--surface-2); border: 1px solid var(--bordure);
  padding: 12px 18px; border-radius: 12px; box-shadow: var(--ombre);
  max-width: calc(100% - 32px); transition: transform .25s ease; z-index: 50;
}
#toast.visible { transform: translateX(-50%) translateY(0); }
#toast.erreur { border-color: var(--danger); }

.connexion { max-width: 360px; margin: 18vh auto 0; padding: 0 16px; }
.connexion h1 { font-size: 1.4rem; }
.connexion form { display: grid; gap: 12px; }

/* Page protégée : tant que la connexion n'est pas acceptée, seul le formulaire est affiché */
body.verrouille > *:not(.connexion):not(#toast) { display: none !important; }

/* Dessin « salle fermée » (pages des cellulaires) */
.dessin-ferme { width: min(62vw, 230px); height: auto; display: block; margin: 0 auto 6px; }