/* ==========================================================================
   LYRICS — plein écran. Ligne active blanche + remplissage gauche→droite ;
   passées en blanc atténué, futures très discrètes. Fond quasi noir.
   ========================================================================== */

.lyrics-sheet {
  background: var(--bg);
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 100vh;   /* repli : iOS < 15.4 ne connaît pas dvh */
  height: 100dvh;
}
.lyrics-sheet[hidden] { display: none; }
/* fond = pochette (mono, gris) très floutée et sombre — juste une texture */
.lyrics-bg { position: absolute; inset: -40px; z-index: 0; pointer-events: none; }
.lyrics-bg canvas {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(70px) brightness(.35) saturate(0);
  transform: scale(1.15);
}
.lyrics-bg i {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg), rgba(12,12,13,.55) 30%, rgba(12,12,13,.55) 60%, var(--bg));
}
.lyrics-sheet > *:not(.lyrics-bg) { position: relative; z-index: 1; }

/* ---------- en-tête ---------- */
.lyrics-top { display: flex; align-items: flex-start; gap: var(--s2); padding-top: 2px; }
.lyrics-title {
  margin: 2px 0 0; font-size: 18px; font-weight: var(--w-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.light-dim { color: rgba(255,255,255,.55); }
#ly-src { text-transform: lowercase; letter-spacing: .02em; }
#ly-offset-minus, #ly-offset-plus {
  font-size: 12px; font-weight: var(--w-bold); width: auto; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-round); min-height: 44px;
}

/* ---------- lignes ---------- */
.lyrics-lines {
  position: relative;
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 14vh 2px 34vh; padding: 14dvh 2px 34dvh;
  scrollbar-width: none;
}
.lyrics-lines::-webkit-scrollbar { display: none; }

/* à venir : lisible (plus le gris quasi invisible d'avant) */
.ly-line {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 500; line-height: 1.4;
  color: rgba(255,255,255,.52);
  padding: 11px 2px; margin: 0;
  cursor: pointer;
  transform-origin: left center;
  transition: color var(--slow) var(--ease), transform var(--slow) var(--ease);
}
/* déjà chantée : légèrement réduite + italique, façon souvenir qui s'efface —
   distincte d'un simple gris plat, pas juste "moins opaque". */
.ly-line.past {
  color: rgba(255,255,255,.6);
  font-style: italic;
  transform: scale(.95);
}
/* active : remplissage gauche→droite. La partie PAS ENCORE chantée reste bien
   lisible (0.78) — avant elle était à 0.30 et on ne lisait pas le texte à venir.
   --p (0–100%) posé chaque frame par views-lyrics.js. */
.ly-line.cur {
  font-size: 27px; font-weight: 600;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(
    90deg,
    #ffffff 0,
    #ffffff calc(var(--p, 0%) - 1.2%),
    rgba(255,255,255,.78) calc(var(--p, 0%) + 1.2%),
    rgba(255,255,255,.78) 100%
  );
}
/* ---- mode MOT À MOT (timings de la source TTML) ----
   Le remplissage global de la ligne est neutralisé : chaque mot porte son
   propre état. C'est ce qui règle le cas d'une ligne qui passe sur deux
   rangées (le dégradé remplissait les deux en même temps). */
.ly-line.cur.wline {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: rgba(255,255,255,.62);
}
.ly-line.wline .w {
  color: rgba(255,255,255,.62);
  -webkit-text-fill-color: currentColor;
  transition: color 90ms linear;
}
.ly-line.wline .w.on { color: #ffffff; }
/* mot en cours : il s'allume en blanc avec un halo rouge (seul accent du thème) */
.ly-line.cur.wline .w.cur {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 45, 53, .5);
}
@media (prefers-reduced-motion: reduce) {
  .ly-line.cur { background-image: none; color: #fff; -webkit-text-fill-color: #fff; }
  .ly-line.cur.wline .w.cur { text-shadow: none; }
}
.ly-line.blank { min-height: 14px; }
/* section [Refrain] : petit label rouge, pas de remplissage */
.ly-line.section {
  color: var(--red); font-size: 12px; font-weight: var(--w-bold);
  letter-spacing: .1em; text-transform: uppercase;
}
.ly-line.section.cur {
  color: var(--red); background-image: none;
  -webkit-text-fill-color: var(--red); font-size: 12px;
}

.lyrics-empty { text-align: center; color: rgba(255,255,255,.55); padding-top: 22dvh; }
.lyrics-empty .big { font-size: 40px; display: block; margin-bottom: var(--s2); }

.lyrics-foot { display: flex; justify-content: center; gap: 4px; padding-bottom: 4px; text-align: center; font-size: var(--t-micro); }
.lyrics-sheet.focus .lyrics-top { opacity: 0; pointer-events: none; }
.lyrics-top { transition: opacity var(--slow); }

@media (orientation: landscape) and (max-height: 500px) {
  .ly-line { font-size: 18px; padding: 6px 2px; }
  .ly-line.cur { font-size: 20px; }
  .lyrics-lines { padding: 8dvh 2px 24dvh; }
}