:root {
  color-scheme: dark;
  --fond: #141018;
  --surface: #201a27;
  --surface-2: #2b2334;
  --bord: #3a3045;
  --texte: #f3edf5;
  --discret: #a99bb5;
  --accent: #e8577e;
  --accent-doux: #e8577e33;
  --vert: #4fc28b;
  --orange: #f0a64a;
  --rayon: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fond); color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 .8em; }
a { color: var(--accent); }
.discret { color: var(--discret); font-size: .92rem; }
.cache { display: none !important; }

.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; margin-bottom: 14px; }

button, .bouton {
  font: inherit; font-weight: 600; color: var(--texte); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: 12px;
  padding: 12px 18px; min-height: 48px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:hover { border-color: var(--discret); }
button:disabled { opacity: .45; cursor: default; }
button.principal, .bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
button.large, .bouton.large { width: 100%; }
button.choisi { border-color: var(--accent); background: var(--accent-doux); }

button.stop {
  background: #c62f45; border-color: #c62f45; color: #fff; font-size: 1.15rem; letter-spacing: .02em; width: 100%; min-height: 64px;
}
button.stop.reprendre { background: var(--vert); border-color: var(--vert); color: #0c2117; }

input[type=text] {
  font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 12px;
  padding: 12px 14px; width: 100%; min-height: 48px;
}
input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

label.reglage { display: block; margin: 14px 0 4px; }
label.reglage span.valeur { float: right; color: var(--discret); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 32px; }

.ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ligne > * { flex: 1 1 auto; }

/* Jauge d'intensité */
.jauge { height: 14px; background: var(--fond); border-radius: 7px; overflow: hidden; border: 1px solid var(--bord); }
.jauge > div { height: 100%; width: 0; background: linear-gradient(90deg, #b03a6d, var(--accent), #ffb0c4); transition: width .1s linear; }

.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--discret); }
.pastille::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--discret); }
.pastille.ok::before { background: var(--vert); }
.pastille.attention::before { background: var(--orange); }

.etats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }

.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.video > * { position: absolute; inset: 0; width: 100%; height: 100%; }

.code-salle { font: 700 2.4rem/1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .18em; text-align: center; margin: 8px 0 14px; }

.message { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--orange); margin-bottom: 14px; }
.message.erreur { border-left-color: #c62f45; }

code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; background: var(--fond); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
pre { white-space: pre-wrap; word-break: break-all; background: var(--fond); padding: 10px 12px; border-radius: 10px; font-size: .85rem; margin: 8px 0; }

/* Mise en page avec menu en colonne à gauche (pilote, tableau de bord) ; sur téléphone il passe au-dessus, en grille. */
.cadre { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.cadre > * { min-width: 0; } /* sinon un long titre de morceau élargit la colonne */
.menu {
  background: var(--surface); border-right: 1px solid var(--bord); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh;
}
.menu .marque { font-weight: 800; font-size: 1.3rem; color: var(--accent); padding: 4px 6px 14px; text-decoration: none; }
.menu button, .menu a.bouton { justify-content: flex-start; }
.menu .bas-menu { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.menu .stop { justify-content: center; }
.contenu { padding: 18px 16px 40px; max-width: 760px; width: 100%; }
@media (max-width: 720px) {
  .cadre { grid-template-columns: 1fr; }
  .menu {
    position: sticky; top: 0; z-index: 2; height: auto; border-right: 0; border-bottom: 1px solid var(--bord);
    display: grid; grid-template-columns: 1fr 1fr; padding: 10px 16px;
  }
  .menu .marque { display: none; }
  .menu button, .menu a.bouton { justify-content: center; padding: 8px 10px; min-height: 44px; font-size: .95rem; }
  .menu .bas-menu { grid-column: 1 / -1; margin-top: 2px; }
  .menu .stop { min-height: 52px; }
}

/* Liste de lecture */
.file { list-style: none; margin: 10px 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--bord); border-radius: 12px; }
.file:empty { display: none; }
.file li + li { border-top: 1px solid var(--bord); }
.piste { width: 100%; border: 0; border-radius: 0; background: transparent; justify-content: space-between; min-height: 44px; padding: 8px 12px; font-weight: 500; text-align: left; }
.piste span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.piste small { color: var(--discret); flex: 0 0 auto; }
.piste.courante { background: var(--accent-doux); font-weight: 700; }
.commandes { margin: 12px 0 6px; display: grid; grid-template-columns: 1fr 2fr 1fr; }
.ajout-musique { display: flex; gap: 8px; margin-bottom: 10px; }
.ajout-musique input { flex: 1 1 auto; min-width: 0; }
.ajout-musique button { flex: 0 0 auto; }
label.bouton-fichier { position: relative; overflow: hidden; }
label.bouton-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
audio.cache-audio { display: none; }
form .champ { display: block; margin-bottom: 12px; }
form .champ span { display: block; margin-bottom: 4px; color: var(--discret); font-size: .92rem; }
input[type=email], input[type=password] {
  font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 12px;
  padding: 12px 14px; width: 100%; min-height: 48px;
}
input[type=email]:focus, input[type=password]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.message.ok { border-left-color: var(--vert); }
.liste-comptes { list-style: none; padding: 0; margin: 0; }
.liste-comptes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--bord); }
.liste-comptes li:first-child { border-top: 0; }
.liste-comptes .nom { font-weight: 700; flex: 1 1 140px; }
.liste-comptes .actions { display: flex; gap: 8px; }