/* Le bouton de son. Toujours visible, silence par défaut : rien ne joue tant
   qu'on ne l'a pas demandé. */

#son { position: fixed; z-index: 4; left: max(2vw, 14px); bottom: max(2vh, 14px); }
body[data-rendu="socle"] #son { display: none; }

#son audio { display: none; }

.son__bouton {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 9, .62);
  border: 1px solid rgba(239, 233, 220, .3);
  border-radius: 3px;
  padding: 8px 13px;
  color: #efe9dc;
  font: 600 0.66rem/1 'Raleway', system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* La pastille dit l'état sans texte supplémentaire : éteinte au silence,
   ambre à l'écoute. Le libellé accessible, lui, est porté par aria-label. */
.son__bouton::before {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(239, 233, 220, .28);
  transition: background .25s ease, box-shadow .25s ease;
}
.son__bouton[data-son="actif"]::before {
  background: #ffbe00;
  box-shadow: 0 0 10px rgba(255, 190, 0, .8);
}
.son__bouton:hover { border-color: #e0fbab; color: #e0fbab; }
.son__bouton:focus-visible { outline: 2px solid #e0fbab; outline-offset: 3px; }