/* ═══════════════════════════════════════════════════════════
   AppLecteur — la barre de lecture à voix haute (voir appli-lecteur.js)
   Posée DANS la feuille ouverte (dernier enfant de la colonne), ou flottante en bas de l'écran sans parent.
   Couleurs : celles de l'appli (jetons du socle), jamais écrites ici.
   ═══════════════════════════════════════════════════════════ */
.lecteur {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between;
  padding: 8px 12px; background: var(--panneau); border-top: 1.5px solid var(--accent);
}
.lecteur[hidden] { display: none; }
.lecteur-flottant {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--dock-h, 64px) + var(--bas, 0px) + 10px); z-index: 70;
  max-width: 696px; margin: 0 auto; border: 1.5px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.lecteur-lib {
  flex: 1 1 140px; min-width: 0; font-family: var(--police-titre); font-weight: 600; font-size: .95rem; color: var(--accent-fort);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lecteur-cmd { display: flex; gap: 6px; }
.lecteur-btn {
  min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent-clair); color: var(--accent-fort);
  font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center;
}
.lecteur-btn:active { background: var(--accent); color: var(--sur-accent); }
.lecteur-pp { background: var(--accent); color: var(--sur-accent); }
.lecteur-btn:focus-visible { outline: 3px solid var(--accent-fort); outline-offset: 2px; }
/* Le passage lu : un fond doux, pas seulement une couleur de texte (lisible aussi en thème sombre). */
.lu { background: var(--accent-clair); box-shadow: -6px 0 0 var(--accent-clair), 6px 0 0 var(--accent-clair); border-radius: var(--r-xs); }