/* Lecteur audio commun (commun/lecteur.js) et etat "en lecture" des boutons d'ecoute.
   Jetons de la charte (lecon.css ou index.html) : --feuille, --feuille-2, --encre, --encre-2, --rose,
   --rose-clair, --rose-texte, --or, --or-fond, --filet-2, --sur-accent, --ombre. */
.lecteur{display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px 12px 12px; border-radius:22px;
  background:var(--feuille); border:1px solid var(--filet-2); box-shadow:var(--ombre); color:var(--encre)}
.lecteur-bouton{flex:none; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--rose-texte); color:var(--sur-accent); box-shadow:0 6px 16px rgba(160,79,92,.28), 0 0 0 4px var(--rose-clair)}
.lecteur-bouton svg{width:26px; height:26px; fill:currentColor}
.lecteur-bouton:disabled{opacity:.5; cursor:default}
.lecteur-bouton:focus-visible{outline:3px solid var(--or); outline-offset:3px}
.lecteur[data-etat="lecture"] .lecteur-bouton{background:var(--encre); box-shadow:0 6px 16px rgba(58,46,44,.25), 0 0 0 4px var(--or-fond)}
.lecteur-corps{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
.lecteur-titre{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--encre); line-height:1.2}
.lecteur-barre{position:relative; height:24px; cursor:pointer; border-radius:999px; touch-action:none}
.lecteur-barre::before{content:""; position:absolute; left:0; right:0; top:9px; height:6px; border-radius:999px; background:var(--rose-clair)}
.lecteur-avance{position:absolute; left:0; top:9px; height:6px; width:0; border-radius:999px; background:linear-gradient(90deg,var(--rose-texte),var(--rose))}
.lecteur-curseur{position:absolute; top:5px; left:0; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--feuille); border:3px solid var(--rose-texte); box-shadow:var(--ombre); pointer-events:none}
.lecteur-barre:focus-visible{outline:3px solid var(--or); outline-offset:2px}
.lecteur-bas{display:flex; align-items:center; justify-content:space-between; gap:10px}
.lecteur-temps{font-size:.9rem; color:var(--encre-2); font-variant-numeric:tabular-nums}
/* les ondes : 5 barres, immobiles tant que rien ne joue */
.lecteur-ondes{display:inline-flex; align-items:flex-end; gap:3px; height:18px; opacity:.35}
.lecteur-ondes i{display:block; width:3px; height:6px; border-radius:2px; background:var(--rose-texte)}
[data-etat="lecture"] .lecteur-ondes, .lit .lecteur-ondes{opacity:1}
@media (prefers-reduced-motion: no-preference){
  [data-etat="lecture"] .lecteur-ondes i, .lit .lecteur-ondes i{animation:lecteur-onde .9s ease-in-out infinite alternate}
  .lecteur-ondes i:nth-child(2){animation-delay:.15s} .lecteur-ondes i:nth-child(3){animation-delay:.3s}
  .lecteur-ondes i:nth-child(4){animation-delay:.1s} .lecteur-ondes i:nth-child(5){animation-delay:.25s}
  .lecteur-avance{transition:width .25s linear}
  @keyframes lecteur-onde{from{height:5px} to{height:18px}}
}
@media (prefers-reduced-motion: reduce){
  [data-etat="lecture"] .lecteur-ondes i, .lit .lecteur-ondes i{height:14px}
}
/* boutons d'ecoute (cours, bulles) : le rond passe en pause et les ondes s'allument quand ca joue */
.lit .p{background:var(--encre) !important}
.ecouter.lit, .ecouter-fiche.lit, .podcast-cours button.lit{background:var(--or-fond)}