/* Lecteur « Écouter » : texte synchronisé (ligne et mot en cours), mini-lecteur, mobile. Chargé après listen.css. */
.ls-lyrics{ position:relative; min-height:0; display:flex; flex-direction:column; border-radius:26px; background:var(--ls-chip); border:1px solid var(--ls-line); overflow:hidden; }
.ls-lyrics-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px 6px; }
.ls-lyrics-h small{ color:var(--ls-soft); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.ls-follow{ padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:700; border:0; cursor:pointer; color:#1c150c; background:var(--ls-acc2); }
.ls-lines{ flex:1; min-height:0; overflow-y:auto; padding:8px 22px 45vh; scroll-behavior:auto; outline:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 60px),transparent); mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 60px),transparent); }
.ls-line{ font-family:var(--serif); font-size:1.22rem; line-height:1.75; margin:0 0 14px; padding:4px 10px; border-radius:14px; color:var(--ls-soft);
  cursor:pointer; transition:color .35s, background .35s, opacity .35s; opacity:.72; }
.ls-line.is-h{ font-size:1.42rem; font-weight:500; color:var(--ls-ink); opacity:.85; margin-top:12px; }
.ls-line.is-read{ color:var(--ls-read); opacity:.62; }
.ls-line.is-cur{ color:var(--ls-ink); opacity:1; background:linear-gradient(90deg,rgba(201,168,106,.14),rgba(201,168,106,.04)); }
[dir="rtl"] .ls-line.is-cur{ background:linear-gradient(270deg,rgba(201,168,106,.14),rgba(201,168,106,.04)); }
.ls-w{ border-radius:6px; transition:color .2s, background .2s; }
.ls-w.is-read{ color:var(--ls-ink); }
.ls-w.is-on{ color:var(--ls-ink); background:linear-gradient(90deg,var(--ls-on) calc(var(--k,0) * 100%),rgba(201,168,106,.12) calc(var(--k,0) * 100%));
  box-shadow:0 0 0 2px rgba(201,168,106,.14); }
[dir="rtl"] .ls-w.is-on{ background:linear-gradient(270deg,var(--ls-on) calc(var(--k,0) * 100%),rgba(201,168,106,.12) calc(var(--k,0) * 100%)); }
.ls:not(.is-playing) .ls-w.is-on{ background:var(--ls-on); }

.ls-mini{ position:fixed; z-index:60; inset-inline:12px; bottom:calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto;
  display:flex; align-items:center; gap:8px; padding:8px; border-radius:22px; color:#f5ecd9;
  background:linear-gradient(140deg,rgba(29,43,34,.96),rgba(22,36,28,.96) 55%,rgba(43,37,23,.96)); border:1px solid rgba(226,206,160,.3); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); animation:rise .4s var(--ease) both; }
.ls-mini[hidden]{ display:none; }
.ls-mini-play{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:0; cursor:pointer; color:#1c150c;
  background:radial-gradient(circle at 34% 32%,#fff4d6,#e2c792 50%,#b0894f); }
.ls-mini-play svg{ width:20px; height:20px; }
.ls-mini-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:start; background:none; border:0; color:inherit; cursor:pointer; padding:0 4px; }
.ls-mini-t small{ color:#e8cf9c; font-size:.72rem; font-weight:700; }
.ls-mini-t b{ font-family:var(--serif); font-weight:500; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ls-mini-bar{ display:block; height:3px; margin-top:4px; border-radius:3px; background:rgba(245,236,217,.18); overflow:hidden; }
.ls-mini-bar u{ display:block; height:100%; width:0; background:#e2c792; }
.ls-mini .ls-ibtn{ width:38px; height:38px; color:#f5ecd9; background:rgba(245,236,217,.08); border-color:rgba(245,236,217,.14); }
.ls-mini .ls-ibtn svg{ width:18px; height:18px; }

@media (max-width:860px){
  .ls-main{ padding-inline:14px; }
  .ls-body{ display:flex; flex-direction:column; gap:12px; }
  .ls-player{ flex:none; gap:10px; }
  .ls-art{ width:min(150px,36vw); }
  .ls-meta h2{ font-size:1.15rem; }
  .ls-play{ width:62px; height:62px; }
  .ls-ctrl{ gap:10px; }
  .ls-lyrics{ flex:1; border-radius:22px; }
  .ls-lines{ padding:6px 14px 40vh; }
  .ls-line{ font-size:1.08rem; padding:3px 8px; }
  .ls-line.is-h{ font-size:1.22rem; }
}
@media (max-height:640px) and (max-width:860px){
  .ls-art{ display:none; }
}
/* ── Préparation de la voix, prête à écouter, erreur ── */
.ls-pwait{ width:100%; max-width:380px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.ls-pwait[hidden]{ display:none; }
.ls-pwait b{ font-family:var(--serif); font-weight:500; font-size:1.12rem; color:var(--ls-ink); font-variant-numeric:tabular-nums; }
.ls-pwait small{ color:var(--ls-soft); font-size:.84rem; line-height:1.45; }
.ls-wave{ display:flex; align-items:center; gap:5px; height:30px; }
.ls-wave i{ width:5px; height:100%; border-radius:4px; background:linear-gradient(180deg,var(--ls-acc2),var(--ls-acc)); transform-origin:center; animation:lsWave 1.3s ease-in-out infinite; }
.ls-wave i:nth-child(2){ animation-delay:-.2s; } .ls-wave i:nth-child(3){ animation-delay:-.4s; } .ls-wave i:nth-child(4){ animation-delay:-.6s; } .ls-wave i:nth-child(5){ animation-delay:-.8s; }
@keyframes lsWave{ 0%,100%{ transform:scaleY(.25); opacity:.55; } 50%{ transform:scaleY(1); opacity:1; } }
.ls-pbar{ display:block; width:100%; height:8px; border-radius:8px; background:var(--ls-line); overflow:hidden; }
.ls-pbar u{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--ls-acc),var(--ls-acc2),var(--sage-2)); transition:width .5s var(--ease); }
.ls.is-prep .ls-seek, .ls.is-prep .ls-ctrl, .ls.is-prep .ls-sub{ opacity:.45; pointer-events:none; }
.ls-retry{ padding:10px 22px; border-radius:999px; border:0; cursor:pointer; font-weight:800; color:#fff; background:linear-gradient(140deg,var(--forest-2),var(--forest)); }
[data-theme="dark"] .ls-retry{ color:#1c150c; background:linear-gradient(140deg,#e8cf9c,#b0894f); }
.ls-retry[hidden]{ display:none; }
.ls.is-tap .ls-status{ font-size:1.05rem; }
.ls.is-tap .ls-play{ width:88px; height:88px; animation:lsPulse 1.6s ease-in-out infinite; }
@keyframes lsPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,168,106,.55), 0 16px 34px -14px rgba(63,90,58,.9); } 50%{ box-shadow:0 0 0 16px rgba(201,168,106,0), 0 16px 34px -14px rgba(63,90,58,.9); } }

@media (prefers-reduced-motion:reduce){
  .ls, .ls-orbit, .ls-halo, .ls-moon, .ls-bg i, .ls-wave i, .ls-play{ animation:none !important; transition:none !important; }
  .ls-wave i{ transform:scaleY(.6); }
}