/**
 * Le lecteur.
 *
 * Une barre posée en bas, flottante, avec une ligne de progression fine sur
 * son arête supérieure. Pas de gros disque qui tourne, pas de dégradé :
 * l'objet doit se faire oublier entre deux écoutes et rester lisible d'un
 * coup d'œil pendant.
 */

.loma-lecteur {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 16px;
  width: calc(100% - 32px);
  max-width: 1120px;
  transform: translate(-50%, calc(100% + 24px));
  background: var(--graphite);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms linear;
  overflow: hidden;
}

:root[data-theme="light"] .loma-lecteur {
  background: var(--carbone);
  box-shadow: 0 18px 44px rgba(10, 10, 12, 0.14);
}

.loma-lecteur.est-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* -------- La progression
   Sur l'arête du lecteur plutôt qu'au milieu : on la lit sans la chercher,
   et elle ne prend aucune place. -------- */

.loma-lecteur__progres {
  position: relative;
  height: 4px;
  background: var(--trait);
  cursor: pointer;
}

.loma-lecteur__progres::before {
  /* Zone de clic élargie vers le bas, sans épaissir la ligne visible.
     Une ligne de 4 px est trop fine à viser au doigt. */
  content: "";
  position: absolute;
  inset: -8px 0;
}

.loma-lecteur__progres-fait {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bleu-500);
  transition: width 120ms linear;
}

.loma-lecteur__progres:hover .loma-lecteur__progres-fait,
.loma-lecteur__progres:focus-visible .loma-lecteur__progres-fait {
  background: var(--bleu-400);
}

.loma-lecteur__progres:focus-visible {
  outline: 2px solid var(--bleu-400);
  outline-offset: 2px;
}

/* -------- Le corps -------- */

.loma-lecteur__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.loma-lecteur__bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-large);
  height: var(--cible-large);
  flex-shrink: 0;
  padding: 0;
  background: var(--contraste);
  border: none;
  border-radius: var(--pilule);
  color: var(--sur-contraste);
  transition: transform var(--transition), opacity var(--transition);
}
.loma-lecteur__bouton:hover { transform: scale(1.06); }
.loma-lecteur__bouton:active { transform: scale(0.97); }

.loma-lecteur__pochette {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-petit);
  overflow: hidden;
  background: var(--carbone);
}
.loma-lecteur__pochette img { width: 100%; height: 100%; object-fit: cover; }

.loma-lecteur__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;          /* sans ça, l'ellipse ne se déclenche jamais */
  flex-grow: 1;
}

.loma-lecteur__titre {
  font-size: var(--ui);
  font-weight: 700;
  color: var(--texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loma-lecteur__titre:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }

.loma-lecteur__meta {
  font-size: var(--meta-petit);
  color: var(--texte-doux);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loma-lecteur__temps {
  flex-shrink: 0;
  display: flex;
  gap: 5px;
  font-size: var(--meta-petit);
  font-weight: 600;
  color: var(--texte-doux);
}
.loma-lecteur__temps-sep { color: var(--texte-faible); }

.loma-lecteur__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.loma-lecteur__acheter { min-height: 42px; padding: 0 18px; }

/* -------- L'erreur
   Une panne sur un fichier ne doit pas faire croire que le site est cassé.
   Le message reste dans le lecteur, le reste de la page ne bouge pas. -------- */

.loma-lecteur__erreur {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--alerte-fond);
  border-top: 1px solid var(--trait);
  font-size: var(--meta);
  color: var(--alerte-doux);
}
.loma-lecteur__erreur .loma-bouton { min-height: 34px; padding: 0 14px; margin-left: auto; }

:root[data-theme="light"] .loma-lecteur__erreur { color: var(--alerte); }

/* ==================================================================
   Les boutons de lecture dans les listes et la grille
   ================================================================== */

.loma-lire {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  flex-shrink: 0;
  padding: 0;
  background: var(--graphite);
  border: none;
  border-radius: var(--pilule);
  color: var(--texte);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.loma-lire:hover { background: var(--contraste); color: var(--sur-contraste); }
.loma-lire.est-actif { background: var(--bleu-500); color: var(--sur-accent); }

/* Le morceau en cours : la ligne entière se distingue, pas seulement l'icône. */
[data-loma-ligne].est-en-lecture { background: var(--graphite); }
[data-loma-ligne].est-en-lecture .loma-piste__titre { color: var(--texte); }

/* Trois barres qui bougent, posées sur la pochette du morceau en cours.
   C'est le seul endroit du site où quelque chose s'anime en continu :
   ailleurs, une animation qui tourne en boucle fatigue. */
.loma-egaliseur {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
[data-loma-ligne].est-en-lecture .loma-egaliseur { display: flex; }

.loma-egaliseur span {
  width: 3px;
  background: var(--bleu-400);
  border-radius: 2px;
  animation: loma-pulse 900ms ease-in-out infinite;
}
.loma-egaliseur span:nth-child(1) { height: 60%; animation-delay: 0ms; }
.loma-egaliseur span:nth-child(2) { height: 100%; animation-delay: 160ms; }
.loma-egaliseur span:nth-child(3) { height: 40%; animation-delay: 320ms; }

@keyframes loma-pulse {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .loma-egaliseur span { animation: none; height: 70%; }
}

/* ==================================================================
   Mobile
   Le lecteur colle au bord, perd le temps écoulé et le bouton suivant :
   sur 390 px, le titre et le prix valent mieux que quatre commandes.
   ================================================================== */

@media (max-width: 767px) {
  .loma-lecteur {
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: translate(0, 100%);
    border-radius: var(--r) var(--r) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .loma-lecteur.est-visible { transform: translate(0, 0); }

  .loma-lecteur__progres { height: 3px; }
  .loma-lecteur__inner { gap: 11px; padding: 10px 14px; }
  .loma-lecteur__pochette { width: 42px; height: 42px; }
  .loma-lecteur__temps,
  .loma-lecteur__fermer,
  .loma-lecteur__actions [data-loma-suivant] { display: none; }
  .loma-lecteur__acheter { min-height: 38px; padding: 0 14px; font-size: var(--meta); }
}