/* Lecteur audio (partial lecteur, assets/js/lecteur.js), sur l'accueil et la page musique.
   Un bloc à filet bronze : pochette, titre, trois touches, la forme d'onde tracée en traits
   fins, le temps en mono. Les pistes sont des lignes alignées : LED, numéro, titre, durée.
   Le soleil ne sert qu'à la piste qui joue. Les variables viennent de site.css. */

.lecteur-place { margin-bottom: var(--e-4); }
.lecteur {
  --onde-jouee: var(--soleil);
  --onde-reste: #3f6a73;
  --onde-trait: 1;          /* épaisseur d'un trait de l'onde, en pixels (lu par lecteur.js) */
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  grid-template-areas:
    "pochette infos"
    "onde onde"
    "temps temps"
    "commandes commandes";
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3);
  background: rgb(14 43 55 / 0.55);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.lecteur__pochette { grid-area: pochette; }
.lecteur__pochette img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.lecteur__infos { grid-area: infos; min-width: 0; }
.lecteur__titre, .lecteur__album { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lecteur__titre { padding-top: 0.15em; font-family: var(--titre); font-size: var(--taille-m); letter-spacing: 0.1em; text-transform: uppercase; }
.lecteur__album { color: var(--pierre); font-family: var(--mono); font-size: var(--taille-xs); text-transform: uppercase; letter-spacing: 0.06em; }

.lecteur__commandes { grid-area: commandes; display: grid; grid-template-columns: 1fr 1.6fr 1fr; border: 1px solid var(--bronze); border-radius: var(--rayon); overflow: hidden; }
.lecteur__bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivoire);
  cursor: pointer;
}
.lecteur__bouton + .lecteur__bouton { border-left: 1px solid var(--bronze); }
.lecteur__bouton:hover { background: var(--ivoire); color: var(--nuit); }
.lecteur__bouton:disabled { color: rgb(164 140 112 / 0.5); background: transparent; cursor: default; }
.lecteur__bouton svg { width: 1.125rem; height: 1.125rem; }
.lecteur.est-en-lecture .lecteur__lecture { color: var(--nuit); background: var(--soleil); }
.lecteur.est-en-lecture .lecteur__lecture:hover { color: var(--nuit); }
.lecteur__icone-pause, .lecteur.est-en-lecture .lecteur__icone-lecture { display: none; }
.lecteur.est-en-lecture .lecteur__icone-pause { display: block; }

.lecteur__onde { grid-area: onde; position: relative; height: 3.5rem; }
.lecteur__onde canvas { width: 100%; height: 100%; }
.lecteur__onde:has(:focus-visible) { outline: 2px solid var(--soleil); outline-offset: 2px; }
.lecteur__position {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Le temps : écoulé ──────── total */
.lecteur__temps {
  grid-area: temps;
  display: grid;
  grid-template-columns: auto minmax(var(--e-4), 1fr) auto;
  align-items: center; column-gap: var(--e-3);
  margin: 0;
  color: var(--pierre);
  font-family: var(--mono);
  font-size: var(--taille-xs);
}
.lecteur__temps::after { content: ""; grid-column: 2; grid-row: 1; border-top: 1px solid var(--filet); }
.lecteur__ecoule { grid-column: 1; grid-row: 1; }
.lecteur__total { grid-column: 3; grid-row: 1; }
.lecteur.est-en-lecture .lecteur__ecoule { color: var(--soleil-clair); }

@media (min-width: 40rem) {
  .lecteur {
    grid-template-columns: 4.5rem minmax(0, 1fr) 11rem;
    grid-template-areas:
      "pochette infos commandes"
      "onde onde onde"
      "temps temps temps";
  }
}

/* Mini-lecteur : collé en bas d'écran quand le lecteur est sorti de la vue pendant l'écoute.
   L'en-tête et son bouton Booker restent en haut, rien ne les recouvre. */
.lecteur.est-flottant {
  position: fixed; z-index: 40;
  left: 0; right: 0; bottom: 0;
  grid-template-columns: 2.75rem minmax(0, 1fr) 8.5rem;
  grid-template-areas:
    "pochette infos commandes"
    "onde onde onde";
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) var(--gouttiere) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
  border-width: 1px 0 0;
  border-color: var(--bronze);
  border-radius: 0;
  background: var(--nuit);
}
.lecteur.est-flottant .lecteur__temps { display: none; }
.lecteur.est-flottant .lecteur__onde { height: 1.75rem; }
.lecteur.est-flottant .lecteur__titre { font-size: var(--taille-s); }
.lecteur.est-flottant .lecteur__album { font-size: var(--taille-xs); }
body:has(.lecteur.est-flottant) .pied { padding-bottom: 8rem; }

@media (min-width: 52rem) {
  .lecteur.est-flottant {
    left: 50%; right: auto; bottom: 0;
    width: min(48rem, 100%);
    transform: translateX(-50%);
    border-width: 1px 1px 0;
    padding: var(--e-2) var(--e-3);
  }
}

/* Listes de pistes : une ligne par pas */
.pistes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.piste { border-bottom: 1px solid var(--filet); }
.piste__bouton, .piste.est-muette {
  display: grid;
  grid-template-columns: 0.625rem 2rem minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-1);
  font: inherit;
  text-align: left;
}
.piste__bouton {
  border: 0;
  background: transparent;
  color: var(--ivoire);
  cursor: pointer;
}
.piste__bouton:hover { background: var(--sarcelle); }
.piste__n, .piste__duree { color: var(--pierre); font-family: var(--mono); font-size: var(--taille-xs); }
.piste__n { color: var(--bronze); }
.piste__titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 0.15em; font-family: var(--titre); font-size: var(--taille-s); letter-spacing: 0.1em; text-transform: uppercase; }
.piste.est-muette { color: var(--pierre); }
.piste.est-muette .led { border-style: dashed; }
/* La piste chargée : LED cerclée d'orange, allumée quand elle joue */
.piste__bouton[aria-current] .piste__titre { color: var(--soleil-clair); font-weight: 600; }
.piste__bouton[aria-current] .led { border-color: var(--soleil); }
body:has(.lecteur.est-en-lecture) .piste__bouton[aria-current] .led { background: var(--soleil); }