/* Site par Orz · Dylan · NoemaWorks · https://noemaworks.net
   musique.css : le lecteur de musique d'ambiance. Un bouton dans la barre de
   navigation, qui devient un bouton fixe au-dessus de la barre
   « Appeler / Itinéraire » sur mobile. Aplat, aucune ombre, aucun halo. */

/* ----------------------------------------------------------- le groupe */

.musique {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* sans barre de navigation, le lecteur se pose en bas à droite */
.musique--libre {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-nav);
}

/* ---------------------------------------------------------- les boutons */

/* Même vocabulaire que « Faire rugir le dragon » : mono, filet fin, rayon
   unique. Le fond charbon reste opaque pour tenir sur une photo comme sur le
   papier de riz quand le bouton flotte au-dessus de la page. */
.musique__btn,
.musique__suivant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--charcoal);
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  color: var(--text-on-ink);
  transition: border-color 180ms var(--ease-out),
              color 180ms var(--ease-out),
              background-color 120ms var(--ease-out);
}

.musique__btn {
  gap: 10px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

.musique__suivant {
  width: 40px;
  min-width: 40px;
  padding: 0;
  animation: od-musique-entree 180ms var(--ease-out);
}

.musique__suivant[hidden] { display: none; }

.musique__suivant svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

@keyframes od-musique-entree {
  from {
    opacity: 0;
    transform: translate3d(-4px, 0, 0);
  }
}

/* pression : retour immédiat par la couleur, le transform reste libre */
.musique__btn:active,
.musique__suivant:active { background: var(--charcoal-2); }

@media (hover: hover) and (pointer: fine) {
  .musique__btn:hover,
  .musique__suivant:hover {
    border-color: var(--lacquer);
    color: var(--lantern);
  }
}

/* allumé : or lanterne, comme la pastille des horaires quand c'est ouvert */
.musique__btn[aria-pressed="true"] {
  color: var(--lantern);
  border-color: rgb(242 179 58 / .45);
}

/* -------------------------------------------------------- les trois barres */

.musique__icone {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 14px;
  height: 12px;
  flex: none;
}

.musique__icone i {
  display: block;
  width: 2px;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  transform: scaleY(.3);
  transition: transform 220ms var(--ease-out);
}

@keyframes od-musique-barre {
  0%, 100% { transform: scaleY(.3); }
  50% { transform: scaleY(1); }
}

.musique__btn[aria-pressed="true"] .musique__icone i {
  animation: od-musique-barre 1s ease-in-out infinite;
}

.musique__btn[aria-pressed="true"] .musique__icone i:nth-child(1) { animation-duration: .9s; }

.musique__btn[aria-pressed="true"] .musique__icone i:nth-child(2) {
  animation-duration: 1.15s;
  animation-delay: -.3s;
}

.musique__btn[aria-pressed="true"] .musique__icone i:nth-child(3) {
  animation-duration: .8s;
  animation-delay: -.6s;
}

/* ------------------------------------------------- le titre de la piste */

/* Purement visuel (aria-hidden) : l'annonce aux lecteurs d'écran passe par
   la zone .musique__live, toujours présente et jamais masquée. */
.musique__titre {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1;
  max-width: min(60vw, 320px);
  padding: 9px 12px;
  background: var(--charcoal);
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--text-on-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -4px, 0);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0s linear 200ms;
}

.musique__titre.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0s;
}

/* le bandeau d'annonce du gérant est affiché : le titre descend dessous */
:root:has(.annonce:not([hidden])) .musique__titre {
  top: calc(100% + 14px + var(--annonce-h, 40px));
}

/* ------------------------------------------------- le curseur de volume */

/* Visible seulement en lecture, et seulement quand la barre a la place : en
   dessous de 1200 px le volume reste celui de l'appareil. */
.musique__volume {
  display: none;
  width: 88px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--lantern);
  cursor: pointer;
}

@media (min-width: 1200px) {
  .musique__volume:not([hidden]) { display: block; }
}

.musique__volume::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--line-on-ink);
  border-radius: 1px;
}

.musique__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--lantern);
  border: 0;
}

.musique__volume::-moz-range-track {
  height: 2px;
  background: var(--line-on-ink);
  border-radius: 1px;
}

.musique__volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lantern);
  border: 0;
}

.musique__volume:focus-visible {
  outline: 2px solid var(--lantern);
  outline-offset: 2px;
}

/* ---------------------------------------- 1041 à 1199 px : barre pleine */

/* Les cinq liens, le numéro et le bouton tiennent tout juste : l'icône seule
   suffit, le libellé reste lu par les lecteurs d'écran. */
@media (min-width: 1041px) and (max-width: 1199px) {
  .musique__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --------------------------------- 861 à 1040 px : la barre en mode panneau */

/* Les liens sont repliés derrière le burger : le lecteur se range à sa
   gauche, et c'est lui qui prend l'espace libre à la place du burger. */
@media (min-width: 861px) and (max-width: 1040px) {
  .musique { margin-left: auto; }
  .musique ~ .nav__burger { margin-left: 0; }
}

/* -------------------------------- 860 px : bouton fixe au-dessus de la barre */

/* La barre « Appeler / Itinéraire » fait 56 px ; le lecteur flotte 12 px
   au-dessus, contre le bord droit. Le bouton de rugissement est calé à gauche
   sur mobile : aucune collision. La piste suivante se pose au-dessus. */
@media (max-width: 860px) {
  .musique {
    position: fixed;
    right: 16px;
    bottom: 68px;
    z-index: var(--z-nav);
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
  }

  .musique__btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .musique__suivant {
    width: 44px;
    min-width: 44px;
  }

  .musique__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .musique__titre,
  :root:has(.annonce:not([hidden])) .musique__titre {
    top: auto;
    bottom: 0;
    right: calc(100% + 8px);
    max-width: calc(100vw - 100px);
    transform: translate3d(4px, 0, 0);
  }

  .musique__titre.is-visible { transform: none; }

  /* le panneau plein écran est ouvert : le lecteur s'efface, comme la barre du bas */
  body:has(.menu:not([hidden])) .musique { display: none; }
}

/* ------------------------------------------------------ mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .musique__btn[aria-pressed="true"] .musique__icone i {
    animation: none;
    transform: scaleY(.55);
  }

  .musique__btn[aria-pressed="true"] .musique__icone i:nth-child(2) { transform: scaleY(1); }

  .musique__suivant { animation: none; }

  .musique__titre,
  .musique__titre.is-visible { transform: none; }
}