.entete-salon h1 { margin: 0; text-align: left; font-size: clamp(1.75rem, 6vw, 2.5rem); }
.entete-salon h1::after { display: none; }
.entete-salon h1 span { color: var(--laiton); letter-spacing: 0.12em; }
.bloc { margin: 1.5rem 0; }
.bloc label { display: block; margin-bottom: 0.5rem; }
.bloc input[type="text"] {
  width: 100%;
  max-width: 20rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
.bloc input[type="text"]:focus-visible { border-color: var(--laiton); }
.erreur { color: #ffb4a8; }
button.bouton { font: inherit; cursor: pointer; }
button.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
#qr { display: block; margin: 0 auto 0.75rem; background: #fff; border-radius: 0.5rem; }
.sieges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.siege {
  padding: 0.75rem;
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--laiton);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, var(--surface-survol), var(--surface));
}
.siege.libre { color: var(--texte-discret); border-top-color: var(--bordure); background: transparent; border-style: dashed; border-top-style: dashed; }
.siege.moi { border-color: var(--accent-perfweb); border-top-color: var(--accent-perfweb); }
.siege .numero { display: block; font-size: 0.8rem; color: var(--texte-discret); }
.siege .groupe, .siege .absence { display: block; font-size: 0.85rem; color: var(--texte-discret); }
.siege .absence { color: var(--accent-asser); }
.joueurs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0; list-style: none; }
.joueurs button {
  padding: 0.6rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}
.joueurs button:hover:not(:disabled) { background: var(--surface-survol); }
.joueurs button:disabled { opacity: 0.4; cursor: not-allowed; }

/* En-tête du salon : titre à gauche, micro et son à droite (passent à la ligne sur petit écran). */
.entete-salon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.vocal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.vocal[hidden] { display: none; }
.controles-son { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 100%; min-width: 0; }
.controles-son button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0.4rem; }
.controles-son input[type="range"] { flex: 0 0 7rem; width: 7rem; min-width: 5rem; max-width: 100%; min-height: 2.75rem; cursor: pointer; accent-color: var(--accent-perfweb); }
.controles-son input[type="range"]:disabled { cursor: not-allowed; }
.controles-son .barre { display: none; }
.controles-son .coupe .ondes { display: none; }
.controles-son .coupe .barre { display: inline; }

/* La table de jeu a besoin de largeur : le salon et « Jouer » s'élargissent sur ordinateur. */
/* Sous 600 px : le curseur garde une largeur utilisable (jamais écrasé à 0), la barre passe à la ligne.
   Le bouton muet garde sa largeur naturelle (le .bouton mobile global le met à flex-basis 100 %). */
@media (max-width: 599px) {
  .controles-son #son-muet { flex: 0 0 auto; }
  .controles-son input[type="range"] { flex: 0 1 7rem; min-width: 6rem; }
}

@media (min-width: 900px) {
  main { max-width: 72rem; }
  .sieges { max-width: 40rem; margin-inline: auto; }
}