/* Commandes du lecteur (.player__controls), reprises telles quelles de SelixyWatch : barre de progression avec point de position,
   îlots de verre arrondis (formes plates : voile et flou, sans bord, reflet ni ombre), boutons ronds sans fond, temps sans cadre, volume qui s'ouvre au survol, aperçu au survol de la barre.
   Le fondu de repos s'applique aux îlots et à la barre, jamais au conteneur : un parent à opacité < 1 devient la racine de fond de
   ses enfants, et leur flou attendrait la fin du fondu. --light passe les commandes en foncé sur une image claire. */
.player__controls {
  position: absolute; inset: auto 12px 8px 12px; z-index: 4; display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; transition: transform .25s ease;
}
.player__controls .player__island, .player__controls .player__bar { transition: opacity .25s ease, background-color .3s ease; }
.player--empty .player__controls { display: none; }
.player--idle .player__controls { transform: translateY(8px); }
.player--idle .player__controls .player__island, .player--idle .player__controls .player__bar { opacity: 0; }
.player--idle .player__controls * { pointer-events: none !important; }

.player__row { display: flex; align-items: center; gap: 8px; position: relative; }
.player__spacer { flex: 1; }
.player__island {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; pointer-events: auto;
  background: var(--player-veil);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .player__island { background: rgba(22, 17, 46, .9); } }
.player__island--time {
  padding: 0; background: none; border: 0; box-shadow: none; pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.player__full-only { display: none !important; }
.player--full .player__button.player__full-only { display: inline-grid !important; }
.player--full .player__island.player__full-only { display: inline-flex !important; }

.player__bar { position: relative; height: 20px; margin: 0 2px; display: flex; align-items: center; cursor: pointer; touch-action: none; pointer-events: auto; }
.player__track { position: relative; width: 100%; height: 4.5px; background: rgba(255, 255, 255, .38); border-radius: 4.5px; transition: height .12s ease, background-color .3s ease; }
.player__fill { position: absolute; inset: 0 auto 0 0; width: var(--player-position, 0%); background: var(--player-fill); border-radius: 4.5px; }
.player__fill::after {
  content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--player-fill-end); border-radius: 50%; transition: transform .12s ease;
}
.player__bar:hover .player__track, .player__bar.is-dragging .player__track { height: 9px; }
.player__bar:hover .player__fill::after, .player__bar.is-dragging .player__fill::after { transform: scale(1.25); }
.player__bar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

.player__button {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  color: #fff; background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  transition: color .3s ease, opacity .15s ease, transform .15s ease;
}
.player__button:hover { transform: scale(1.1); }
.player__button:active { transform: scale(.92); }
.player__button:disabled { opacity: .35; cursor: default; transform: none; }
.player__button[aria-pressed='true'], .player__button[aria-expanded='true'] { color: var(--player-accent); }
.player__button:focus-visible { outline: none; color: var(--player-accent); }
.player__time { margin: 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.player__island--time .player__time { margin: 0 2px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.player__volume { display: inline-flex; align-items: center; }
.player__volume input { width: 0; opacity: 0; accent-color: var(--player-accent); transition: width .18s ease, opacity .18s ease; }
.player__volume:hover input, .player__volume:focus-within input { width: 5.5rem; margin: 0 10px 0 2px; opacity: 1; }

.player__preview {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: 10px;
  background: var(--player-veil);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .player__preview { background: rgba(22, 17, 46, .9); } }
.player__preview[hidden], .player__preview-image[hidden] { display: none; }
.player__preview-image { display: block; border-radius: 6px; background-repeat: no-repeat; background-size: auto; }
.player__preview-time { padding: 0 4px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }

.player--light .player__controls .player__button { color: #15141c; }
.player--light .player__controls .player__button[aria-pressed='true'], .player--light .player__controls .player__button[aria-expanded='true'],
.player--light .player__controls .player__button:focus-visible { color: #3a22c0; }
.player--light .player__island--time .player__time { color: rgba(21, 20, 28, .88); text-shadow: 0 1px 3px rgba(255, 255, 255, .7); }
.player--light .player__track { background: rgba(0, 0, 0, .28); }

@media (max-width: 899px) {
  .player__volume:hover input, .player__volume:focus-within input { width: 4.5rem; margin: 0 8px 0 2px; }
  .player__time { margin: 0 4px; font-size: 12px; }
  .player__button { width: 36px; height: 36px; }
  .player__controls { inset: auto 8px 6px 8px; }
  .player__row { gap: 6px; }
  .player__preview { transform: scale(.75); transform-origin: 0 100%; }
}
@media (max-width: 899px) and (hover: none) { .player__volume input { display: none; } }