/* La barre de lecture : UNE barre fixe en bas, toujours là, silence par
   défaut. Ambre pour ce qui agit (lecture, progression), tilleul pour ce qui
   parle (le titre), acier pour ce qui informe (numéro, temps). */

:root { --lecteur-h: 3.5rem; }

#lecteur { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; }
body[data-rendu="socle"] #lecteur { display: none; }
#lecteur audio { display: none; }

.lecteur {
  position: relative;
  height: var(--lecteur-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.8rem, 3vw, 2rem);
  padding: 0 clamp(1rem, 4vw, 3rem);
  background: rgba(31, 31, 31, .9);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--trait);
  color: var(--blanc);
  font-family: var(--raleway);
}

/* La progression est le bord supérieur de la barre : un fil ambre qui
   avance sur le trait. La poignée n'apparaît qu'à la main ou au clavier. */
.lecteur__barre {
  position: absolute;
  left: 0; right: 0; top: -2px;
  width: 100%;
  height: 3px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--ambre) calc(var(--avance, 0) * 100%), var(--trait) 0);
  cursor: pointer;
}
.lecteur__barre::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ambre);
  opacity: 0;
  transition: opacity .2s ease;
}
.lecteur__barre::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%;
  background: var(--ambre);
  opacity: 0;
  transition: opacity .2s ease;
}
.lecteur__barre::-moz-range-track { background: transparent; }
.lecteur__barre:hover::-webkit-slider-thumb,
.lecteur__barre:focus-visible::-webkit-slider-thumb { opacity: 1; }
.lecteur__barre:hover::-moz-range-thumb,
.lecteur__barre:focus-visible::-moz-range-thumb { opacity: 1; }
.lecteur__barre:focus-visible { outline: 2px solid var(--tilleul); outline-offset: 4px; }

.lecteur__boutons { display: flex; align-items: center; gap: .3rem; }
.lecteur__boutons button {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--blanc);
  display: grid; place-items: center;
  padding: 0;
  cursor: pointer;
}
.lecteur__boutons button svg { width: 1rem; height: 1rem; fill: currentColor; }
.lecteur__boutons button:hover { color: var(--tilleul); }
.lecteur__boutons button:focus-visible { outline: 2px solid var(--tilleul); outline-offset: 2px; }
.lecteur__boutons button:disabled { opacity: .35; cursor: default; }
.lecteur__boutons .lecteur__lire { background: var(--ambre); color: var(--encre); border-color: var(--ambre); }
.lecteur__boutons .lecteur__lire:hover { color: var(--encre); filter: brightness(1.08); }

.lecteur__titre { display: flex; align-items: baseline; gap: .8rem; min-width: 0; }
.lecteur__nom {
  font: 400 1.25rem/1 var(--anton);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--tilleul);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

.lecteur__temps {
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  color: var(--acier);
  white-space: nowrap;
}
.lecteur__ecoule { color: var(--blanc); font-weight: 600; }

@media (max-width: 720px) {
  .lecteur { gap: .6rem; padding: 0 .8rem; }
  .lecteur__num { display: none; }
  .lecteur__nom { font-size: 1.1rem; }
  .lecteur__boutons button { width: 2.2rem; height: 2.2rem; }
  .lecteur__temps { font-size: .8rem; }
}