/* pilule.css : bouton rond « Écouter » avec durée et progression discrète. */
.pilule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: var(--pilule-hauteur);
  padding: var(--bouton-marge-interieure);
  overflow: hidden;
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-rond);
  background: var(--fond-survol);
  color: var(--bleu-marque);
  font: inherit;
  font-size: var(--taille-petite);
  font-weight: var(--graisse-semi);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--duree-courte), border-color var(--duree-courte);
}
.pilule-texte { white-space: nowrap; }
.pilule:hover { border-color: var(--bleu-lien); }
.pilule.joue { background: var(--bleu-marque); border-color: var(--bleu-marque); color: var(--texte-sur-marque); }
.pilule:disabled {
  background: var(--fond-desactive);
  border-color: var(--fond-desactive);
  color: var(--texte-desactive);
  cursor: default;
}
.pilule-progression {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pilule-progression);
  background: currentColor;
  opacity: var(--opacite-desactive);
  transform: scaleX(var(--avance, 0));
  transform-origin: left;
  transition: transform var(--duree-courte) linear;
}