/*!
 * Lyrics/spicy-lyrics.css
 * ─────────────────────────────────────────────────────────────────────────
 * Port fidèle, ligne par ligne, de deux fichiers réels de l'extension
 * Spicetify "spicy-lyrics" (spicy-lyrics-main.zip) :
 *   - src/css/Lyrics/main.css
 *   - src/css/Lyrics/Mixed.css
 *
 * Chaque règle ci-dessous existe dans le zip d'origine. Seules les
 * transformations suivantes ont été appliquées :
 *   1. Renommage des sélecteurs racine pour coller au DOM de ce site :
 *        #SpicyLyricsPage.SpicyRenderer .LyricsContainer .LyricsContent
 *          → .sl2-lyrics-display
 *        .SpicyLyricsScrollContainer → .sl2-scroll-container
 *      TOUTES les classes internes (.line, .word, .letter, .letterGroup,
 *      .word-group, .dot, .dotGroup, .musical-line, .bg-line, .rtl,
 *      .OppositeAligned, .PartOfWord, .LastWordInLine, .Active/.NotSung/
 *      .Sung, .HasDuetLines, .HasRtlLines, etc. dans le zip d'origine)
 *      sont préfixées ici en .sl2-XXX. C'est une différence volontaire
 *      par rapport au zip : sans ce préfixe, des sélecteurs génériques et
 *      non scopés dans style.css (ex. un `.line` bare qui matchait
 *      n'importe quel `.line` de la page) pouvaient s'appliquer aux
 *      éléments de CE moteur et casser leur rendu (background-clip,
 *      transitions, etc.), peu importe ce que style.css contient ou
 *      change par ailleurs. spicy-lyrics-engine.js applique exactement
 *      le même préfixe partout où il pose une classe — les deux fichiers
 *      doivent rester synchronisés si l'un des deux est modifié.
 *   2. var(--spice-sidebar) (couleur de fond Spotify/Spicetify, absente
 *      ici) → var(--bg-elevated, #080808), l'équivalent le plus proche
 *      déjà défini par ce site dans style.css.
 *   3. Suppression des règles propres à des états Spicetify qui n'ont
 *      pas d'équivalent ici : .Fullscreen/.MinimalLyricsMode/.CompactMode
 *      (mode plein-écran de l'app Spotify), .spicy-pip-wrapper (popup
 *      "Picture-in-Picture" de Spicetify), .Podcast (jamais activé dans
 *      le zip lui-même — code mort), le rendu "Static" (paroles non
 *      synchronisées, hors-sujet ici), et les blocs déjà commentés dans
 *      le zip d'origine (BottomSpacer/TopSpacer, virtualiseur TanStack).
 *   4. font-family: SpicyLyrics !important (police maison Spicetify,
 *      absente ici) → ajout d'un fallback ", sans-serif" pour ne pas
 *      retomber sur la police par défaut du navigateur.
 *
 * Tout le reste (dégradé de balayage --gradient-position, flou
 * --BlurAmount, halo --text-shadow-*, points d'interlude .sl2-dotGroup,
 * lettre par lettre .sl2-letterGroup/.sl2-letter, mode SimpleLyricsMode, lignes
 * en duo .sl2-OppositeAligned, RTL, fondu haut/bas .sl2-lyrics-display) est du
 * CSS d'origine, verbatim.
 *
 * FALLBACK : renommez ce dossier "Lyrics" pour revenir instantanément à
 * l'ancien rendu de style.css (jamais modifié) — voir Lyrics/README.md.
 */

.sl2-lyrics-display {
  position: relative;
}

.sl2-lyrics-display { height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; overflow: hidden; width: 100%; z-index: 4; }

@property --SL-LyricsContent_MaskTopPadding { syntax: '<length>'; inherits: false; initial-value: 0px; }

.sl2-lyrics-display { --TextGlowDef: rgba(255, 255, 255, 0.15) 0px 0px 6px; --ActiveTextGlowDef: rgba(255, 255, 255, 0.4) 0px 0px 14px; --StrongTextGlowDef: rgba(255, 255, 255, 0.68) 0px 0px 16.4px; --StrongerTextGlowDef: rgba(255, 255, 255, 0.74) 0px 0px 16px; --DefaultLyricsSize: clamp(1.85rem, calc(1cqw * 7), 3.5rem); --amll-lyric-player-font-size: var(--DefaultLyricsSize); --Simplebar-Scrollbar-Color: rgba(255, 255, 255, 0.6); --vertical-gap: 0px; overflow-x: hidden !important; overflow-y: auto !important; height: calc(100% - var(--vertical-gap)); width: 100%; font-size: var(--DefaultLyricsSize) !important; font-weight: 700; scrollbar-width: thin; scrollbar-color: transparent transparent; z-index: 9; --ImageMask: linear-gradient( 180deg, transparent 0, transparent 16px, var(--bg-elevated, #080808) calc(64px + var(--SL-LyricsContent_MaskTopPadding)), var(--bg-elevated, #080808) calc(100% - 64px), transparent calc(100% - 16px), transparent ); -webkit-mask-image: var(--ImageMask); mask-image: var(--ImageMask); container-type: size; opacity: 1; transition: opacity 0.25s, --SL-LyricsContent_MaskTopPadding 0.5s; }

.sl2-lyrics-display:not(:has(.LyricsNotice)) * { font-weight: 700 !important; }

.sl2-lyrics-display .sl2-scroll-container {
  width: 100%;
  box-sizing: border-box;
  transition: padding-right 0.4s, padding-left 0.4s;
  display: flex;
  flex-direction: column;
  /* max(cqh, px) : le zip original utilise uniquement des unités cqh
   *    (25cqh/45cqh), qui dépendent d'un "container query" valide sur
   *    .sl2-lyrics-display (container-type: size). Si le conteneur parent de ce
   *    site ne lui donne pas toujours une hauteur définie, cqh peut se
   *    résoudre à une valeur trop faible et laisser la toute première ligne
   *    coincée dans la zone de fondu du haut (--ImageMask, 64px opaques),
   *    avec un scrollTop déjà à 0 : impossible de "remonter" davantage pour
   *    la faire apparaître. Le max() garantit toujours au moins 140px de
   *    dégagement (largement au-dessus des 64px du masque), tout en
   *    conservant la valeur proportionnelle d'origine quand cqh se résout
   *    normalement (ex. 25% d'un conteneur de 800px = 200px > 140px). */
  /* Espace réduit volontairement (demande explicite) : juste assez pour
   *    dégager la zone de fondu opaque du haut (--ImageMask, 64px), sans le
   *    grand vide du margin-top:20vh / padding-top:48vh d'origine. */
  margin-bottom: 45vh;
  margin-top: 0;
  padding: 60px 48px 32vh;
}

:root { --SpicyLyrics-LineSpacing: 0.08cqw 0; }

.sl2-lyrics-display.HideLineBlur .sl2-line { --BlurAmount: 0px !important; }

.sl2-lyrics-display .sl2-line { --font-size: var(--DefaultLyricsSize); display: flex; flex-wrap: wrap; transition: opacity 0.2s cubic-bezier(0.61, 1, 0.88, 1); font-size: var(--font-size) !important; will-change: transform, opacity, text-shadow, scale, background-image; }
/* Insight ported from script.js's own (documented, previously-diagnosed)
 *  engine: a blur/glow effect that paints outside an element's own box
 *  (there: filter:blur(); here: text-shadow with a blur radius via
 *  --BlurAmount, matching the real zip source) can visually bleed into an
 *  adjacent line's space. On repetitive lyrics this reads as duplicated/
 *  ghost text. overflow:hidden contains it to the line's own box; the
 *  padding keeps descenders/accents and the active line's slight scale
 *  bump from being clipped by that containment. */
.sl2-lyrics-display .sl2-line:not(.sl2-musical-line) { overflow: hidden; padding: 0.15em 0.05em; }

.sl2-lyrics-display .sl2-line .sl2-word, .sl2-lyrics-display .sl2-line .sl2-letter { cursor: pointer; font-weight: 700 !important; -webkit-text-fill-color: transparent; background-clip: text; position: relative; will-change: transform, opacity, text-shadow, scale, background-image; }
/* Fix for a confirmed, still-active Chromium bug (crbug.com/41385122):
 *  "if a child element creates a stacking context, background-clip:text in
 *  the parent will be ignored." .sl2-line was declaring background-clip:text
 *  above alongside .sl2-word/.sl2-letter, even though — for word-synced (Syllable)
 *  lyrics — .sl2-line has no direct text of its own (only child .sl2-word/.sl2-letter
 *  elements, each already independently clipped); its children ALWAYS
 *  create their own stacking context via will-change. That combination is
 *  exactly this bug's trigger condition. .sl2-line never needed its own clip
 *  (nothing to clip): dropping it removes the trigger entirely rather than
 *  working around its symptom. For line-synced (LRC) lyrics, .sl2-line DOES
 *  render its own direct text and has no element children at all, so it
 *  is unaffected by this specific bug and still needs its own clip/glow —
 *  restore both explicitly for that case only. */
.sl2-lyrics-display .sl2-scroll-container[data-lyrics-type="Line"] .sl2-line:not(.sl2-musical-line) { cursor: pointer; font-weight: 700 !important; -webkit-text-fill-color: transparent; background-clip: text; position: relative; will-change: transform, opacity, text-shadow, scale, background-image; }

.sl2-lyrics-display .sl2-line, .sl2-lyrics-display .sl2-line .sl2-word, .sl2-lyrics-display .sl2-line .sl2-letter { --gradient-position: -20%; --gradient-color: 255; --gradient-alpha: 0.85; --gradient-alpha-end: 0.5; --gradient-degrees: 90deg; --gradient-offset: 0%; }

@property --SLM_GradientPosition { syntax: "<percentage>"; inherits: false; initial-value: -50%; }

.sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line, .sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line .sl2-word, .sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line .sl2-letter { --gradient-alpha: 1; --gradient-alpha-end: 0.3; }

.sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line .sl2-word:not(.sl2-dot), .sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line .sl2-letter { --SLM_GradientPosition: -50%; --gradient-position: var(--SLM_GradientPosition, -50%) !important; --gradient-offset: 30% !important; }

.sl2-lyrics-display .sl2-line .sl2-word, .sl2-lyrics-display .sl2-line .sl2-letter, .sl2-lyrics-display .sl2-line.sl2-static, .sl2-lyrics-display .sl2-scroll-container[data-lyrics-type="Line"] .sl2-line:not(.sl2-musical-line) { background-image: linear-gradient( var(--gradient-degrees), rgba(255, 255, 255, var(--gradient-alpha)) var(--gradient-position), rgba(255, 255, 255, var(--gradient-alpha-end)) calc(var(--gradient-position) + 20% + var(--gradient-offset)) ); }

.sl2-lyrics-display .sl2-line.sl2-NotSung, .sl2-lyrics-display .sl2-line.sl2-NotSung .sl2-word, .sl2-lyrics-display .sl2-line.sl2-NotSung .sl2-letter { text-shadow: 0 0 var(--BlurAmount, 0) rgba( var(--gradient-color), var(--gradient-color), var(--gradient-color), var(--gradient-alpha-end) ); }

.sl2-lyrics-display .sl2-line { --BlurAmount: 0px; --DefaultLyricsScale: 0.95; --DefaultEmphasisLyricsScale: 0.95; --DefaultLineScale: 1; --Vocal-NotSung-opacity: 0.51; --Vocal-Active-opacity: 1; --Vocal-Sung-opacity: 0.497; --Vocal-Hover-opacity: 1; --gradient-degrees: 180deg !important; --gradient-alpha-end: 0.35 !important; letter-spacing: 0; --lyrics-line-height: 1.1818181818; line-height: var(--lyrics-line-height) !important; direction: ltr; }

.sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line { --Vocal-NotSung-opacity: 0.45; --Vocal-Sung-opacity: 0.35; }

.sl2-lyrics-display .sl2-line.sl2-rtl { direction: rtl !important; transform-origin: right center !important; }

.sl2-lyrics-display .sl2-line.sl2-rtl .sl2-word, .sl2-lyrics-display .sl2-line.sl2-rtl .sl2-letter { --gradient-degrees: -90deg !important; }

.sl2-lyrics-display .sl2-line.sl2-rtl, .sl2-lyrics-display .sl2-line.sl2-rtl .sl2-word, .sl2-lyrics-display .sl2-line.sl2-rtl .sl2-letter, .sl2-lyrics-display .sl2-line.sl2-rtl .sl2-letterGroup { --bottom: 1.25cqw; --top: 1.15cqw; padding-bottom: var(--bottom); padding-top: var(--top); margin-bottom: calc(var(--bottom) * -1 * 2); margin-top: calc(var(--top) * -1 * 2); }

.sl2-lyrics-display .sl2-line .sl2-word, .sl2-lyrics-display .sl2-line .sl2-letterGroup { transform-origin: center center; }

.sl2-lyrics-display .sl2-line .sl2-word.sl2-PartOfWord, .sl2-lyrics-display .sl2-line .sl2-letterGroup.sl2-PartOfWord { transform-origin: right center; }

.sl2-lyrics-display .sl2-line .sl2-word.sl2-PartOfWord + :is(.sl2-word.sl2-PartOfWord, .sl2-letterGroup.sl2-PartOfWord), .sl2-lyrics-display .sl2-line .sl2-letterGroup.sl2-PartOfWord + :is(.sl2-word.sl2-PartOfWord, .sl2-letterGroup.sl2-PartOfWord) { transform-origin: center center; }

.sl2-lyrics-display .sl2-line .sl2-word.sl2-PartOfWord + :is(.sl2-word, .sl2-letterGroup), .sl2-lyrics-display .sl2-line .sl2-letterGroup.sl2-PartOfWord + :is(.sl2-word, .sl2-letterGroup) { transform-origin: left center; }

.sl2-lyrics-display .sl2-line.sl2-rtl .sl2-word.sl2-PartOfWord, .sl2-lyrics-display .sl2-line.sl2-rtl .sl2-letterGroup.sl2-PartOfWord { transform-origin: left center; }

.sl2-lyrics-display .sl2-line.sl2-rtl .sl2-word.sl2-PartOfWord + :is(.sl2-word, .sl2-letterGroup), .sl2-lyrics-display .sl2-line.sl2-rtl .sl2-letterGroup.sl2-PartOfWord + :is(.sl2-word, .sl2-letterGroup) { transform-origin: right center; }

.sl2-lyrics-display .sl2-line .sl2-word, .sl2-lyrics-display .sl2-line .sl2-letter, .sl2-lyrics-display .sl2-line .sl2-letterGroup { --text-shadow-blur-radius: 4px; --text-shadow-opacity: 0%; }

.sl2-lyrics-display .sl2-line:not(.sl2-musical-line) .sl2-word, .sl2-lyrics-display .sl2-line .sl2-letter, .sl2-lyrics-display .sl2-line .sl2-letterGroup { display: inline-block; }

.sl2-lyrics-display .sl2-line.sl2-Active, .sl2-lyrics-display .sl2-line.sl2-Active .sl2-word, .sl2-lyrics-display .sl2-line.sl2-Active .sl2-letter, .sl2-lyrics-display .sl2-line.sl2-Active .sl2-letterGroup { text-shadow: 0 0 var(--text-shadow-blur-radius) rgba(255, 255, 255, var(--text-shadow-opacity)); }

/* ── Couleur : mêmes valeurs alpha que les paroles principales
 *  (--gradient-alpha/--gradient-alpha-end hérités de la règle de base
 *  ligne 120, 0.85/0.5) — avant, cette ligne les réduisait à 0.6/0.3,
 *  ce qui rendait les paroles en arrière-plan visiblement plus ternes/
 *  grisées que les paroles principales au lieu d'avoir la même couleur.
 *  Seule la taille (--font-size plus bas, ligne ~234) doit différer. */

.sl2-lyrics-display .sl2-line.sl2-OppositeAligned { justify-content: flex-end; text-align: end; column-gap: 0.32ch; }

.sl2-lyrics-display .sl2-line.sl2-OppositeAligned .sl2-word:not(.sl2-PartOfWord, .sl2-dot, .sl2-LastWordInLine)::after, .sl2-lyrics-display .sl2-line.sl2-OppositeAligned .sl2-letterGroup:not(.sl2-PartOfWord, .sl2-dot, .sl2-LastWordInLine)::after { margin-right: 0; }

.sl2-lyrics-display .sl2-line.sl2-Sung { opacity: var(--Vocal-Sung-opacity); --gradient-position: 100% !important; }

.sl2-lyrics-display .sl2-line.sl2-Sung, .sl2-lyrics-display .sl2-line.sl2-NotSung { scale: var(--DefaultLineScale); }

.sl2-lyrics-display .sl2-line.sl2-NotSung { opacity: var(--Vocal-NotSung-opacity); --gradient-position: -20% !important; }

.sl2-lyrics-display .sl2-line.sl2-NotSung:hover, .sl2-lyrics-display .sl2-line.sl2-NotSung:hover .sl2-word, .sl2-lyrics-display .sl2-line.sl2-NotSung:hover .sl2-letter, .sl2-lyrics-display .sl2-line.sl2-Sung:hover, .sl2-lyrics-display .sl2-line.sl2-Sung:hover .sl2-word, .sl2-lyrics-display .sl2-line.sl2-Sung:hover .sl2-letter { opacity: var(--Vocal-Hover-opacity, 1) !important; --BlurAmount: 0px !important; }

.sl2-lyrics-display .sl2-line .sl2-word:not(.sl2-PartOfWord, .sl2-dot, .sl2-LastWordInLine)::after, .sl2-lyrics-display .sl2-line .sl2-letterGroup:not(.sl2-PartOfWord, .sl2-dot, .sl2-LastWordInLine)::after { content: ""; margin-right: 0.32ch; }

.sl2-lyrics-display .sl2-line.sl2-NotSung .sl2-word, .sl2-lyrics-display .sl2-line.sl2-NotSung .sl2-letter { --text-shadow-blur-radius: 4px !important; --text-shadow-opacity: 0% !important; --gradient-position: -20% !important; }

.sl2-lyrics-display .sl2-word-group { display: inline-flex; white-space: nowrap; flex-wrap: wrap; justify-content: flex-start; }

.sl2-lyrics-display .sl2-OppositeAligned .sl2-word-group { justify-content: flex-end; }

.sl2-lyrics-display .sl2-line.sl2-Sung .sl2-word, .sl2-lyrics-display .sl2-line.sl2-Sung .sl2-letter { --gradient-position: 100% !important; }

.sl2-lyrics-display .sl2-line.sl2-FeelSung .sl2-word, .sl2-lyrics-display .sl2-line.sl2-FeelSung .sl2-letter { --text-shadow-blur-radius: 4px !important; --text-shadow-opacity: 0% !important; transform: translateY(0) !important; scale: 1 !important; }

.sl2-lyrics-display .sl2-line .sl2-letterGroup { display: inline-flex; }

/* ── Espacement : léger écart au-dessus de la ligne principale associée
 *  (pour aérer, comme demandé), mais moins que l'espacement normal entre
 *  deux lignes classiques (0.08cqw, --SpicyLyrics-LineSpacing) — avant,
 *  la marge du haut était NÉGATIVE (-1cqw), ce qui collait/chevauchait la
 *  ligne background contre celle du dessus au lieu de la distancer un peu.
 *  La marge du bas (1cqw) sépare déjà correctement de la ligne SUIVANTE,
 *  inchangée. */
.sl2-lyrics-display .sl2-line.sl2-bg-line { margin: 0.04cqw 0 1cqw !important; }

.sl2-lyrics-display .sl2-line.sl2-musical-line .sl2-dotGroup { --dot-gap: clamp(0.005rem, 1.7cqw, 0.18rem); display: flex; flex-direction: row; gap: var(--dot-gap); }

.sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line.sl2-musical-line .sl2-dotGroup { --dot-gap: clamp(0.0067rem, 1.76cqw, 0.32rem); }

.sl2-lyrics-display .sl2-line.sl2-musical-line .sl2-dotGroup .sl2-dot { --font-size: calc(var(--DefaultLyricsSize) * 1.3); --opacity-size: 0.35; border-radius: 50%; scale: 0.75; font-size: var(--font-size) !important; opacity: var(--opacity-size); --gradient-position: 100%; line-height: 0.65; }

.sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-line.sl2-musical-line .sl2-dotGroup .sl2-dot { --opacity-size: 0.27; scale: 1; }

.sl2-lyrics-display .sl2-line.sl2-Active { opacity: 1; --BlurAmount: 0px !important; }

.sl2-lyrics-display .sl2-line.sl2-Active .sl2-word, .sl2-lyrics-display .sl2-line.sl2-Active .sl2-letterGroup, .sl2-lyrics-display .sl2-line.sl2-Active .sl2-letterGroup .sl2-letter { opacity: 1; }

.sl2-lyrics-display .sl2-line.sl2-static { cursor: default; --gradient-position: 100%; --gradient-alpha: 1; --gradient-alpha-end: 1; }

.sl2-lyrics-display .sl2-line:not(.sl2-musical-line) { margin: var(--SpicyLyrics-LineSpacing, 1cqw 0); }

.sl2-lyrics-display .sl2-scroll-container[data-lyrics-type="Line"] .sl2-line:not(.sl2-musical-line) { --text-shadow-blur-radius: 4px; --text-shadow-opacity: 0%; transform-origin: left center; transition: scale 0.2s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.2s cubic-bezier(0.37, 0, 0.63, 1) !important; margin: var(--SpicyLyrics-LineSpacing, 2cqw 0); }

.sl2-lyrics-display .sl2-scroll-container[data-lyrics-type="Line"] .sl2-line:not(.sl2-Active):not(.sl2-musical-line) { --text-shadow-blur-radius: 4px !important; --text-shadow-opacity: 0% !important; }

.sl2-lyrics-display .sl2-scroll-container[data-lyrics-type="Line"] .sl2-line.sl2-OppositeAligned { transform-origin: right center; }

.sl2-lyrics-display .sl2-scroll-container.sl2-HasDuetLines .sl2-line.sl2-OppositeAligned:not(.sl2-rtl) { padding-left: 15cqw; }

.sl2-lyrics-display .sl2-scroll-container.sl2-HasDuetLines .sl2-line:not(.sl2-OppositeAligned, .sl2-rtl) { padding-right: 15cqw; }

.sl2-lyrics-display .sl2-scroll-container.sl2-HasDuetLines.sl2-HasRtlLines .sl2-line.sl2-OppositeAligned.sl2-rtl { padding-right: 15cqw; }

.sl2-lyrics-display .sl2-scroll-container.sl2-HasDuetLines.sl2-HasRtlLines .sl2-line.sl2-rtl:not(.sl2-OppositeAligned) { padding-left: 15cqw; }

.sl2-lyrics-display .sl2-scroll-container:not(.sl2-HasDuetLines) .sl2-line { padding-right: 5cqw; }

.sl2-lyrics-display .sl2-scroll-container:not(.sl2-HasDuetLines) .sl2-line.sl2-rtl { padding-left: 5cqw; }

.sl2-lyrics-display .sl2-line.sl2-musical-line { transition: transform 0.14s, opacity 0.14s !important; position: relative; transform-origin: center center !important; font-family: SpicyLyrics, sans-serif !important; z-index: -1; opacity: 0; height: 0 !important; line-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }

.sl2-lyrics-display .sl2-line.sl2-musical-line .sl2-dotGroup { transition: scale 0.3s !important; font-family: SpicyLyrics, sans-serif !important; transform-origin: center center; scale: 1; /* BUGFIX: promotion GPU explicite pour matcher les .dot enfants (déjà promus via will-change en JS) — sans ça, ce parent anime sa propre transition de scale sans être lui-même sur un calque composité, ce qui désynchronise le rendu de ses enfants promus et produit un dédoublement visuel (point animé + copie figée). */ will-change: scale; }

.sl2-lyrics-display .sl2-line.sl2-musical-line:is(.sl2-pre-hidden, :not(.sl2-Active)) .sl2-dotGroup { transition: scale 0.4s linear(0, -0.006 9.4%, -0.029 18%, -0.157 43.3%, -0.185 51.4%, -0.189 55.9%, -0.182 60%, -0.163 63.9%, -0.133 67.6%, -0.074 72.3%, 0.006 76.7%, 0.238 85%, 0.566 92.7%, 1) !important; scale: 0; }

.sl2-lyrics-display .sl2-line.sl2-musical-line.sl2-Active { opacity: 1; overflow: visible !important; height: auto !important; line-height: var(--lyrics-line-height) !important; }

.sl2-lyrics-display.sl2-SimpleLyricsMode .sl2-scroll-container[data-lyrics-type="Line"] .sl2-line { --gradient-position: 100% !important; }

.sl2-lyrics-display .sl2-line.sl2-bg-line, .sl2-lyrics-display .sl2-line.sl2-bg-line .sl2-word, .sl2-lyrics-display .sl2-line.sl2-bg-line .sl2-letterGroup, .sl2-lyrics-display .sl2-line.sl2-bg-line .sl2-letterGroup .sl2-letter { --font-size: calc(var(--DefaultLyricsSize) * 0.75); font-size: var(--font-size) !important; font-weight: 600 !important; }

/* ── États non synchronisés (chargement / texte brut / aucune parole) ──
 *  Délocalisés depuis style.css/script.js : ici pour que toute la gestion
 *  visuelle des paroles vive dans ces deux fichiers, isolée de style.css. */

.sl2-lyrics-display .sl2-placeholder {
  padding: 60px 32px;
  color: var(--text-subdued, rgba(255,255,255,0.6));
  text-align: center;
}

.sl2-lyrics-display .sl2-plain-container {
  width: 100%;
  box-sizing: border-box;
  padding: 32px;
}

.sl2-lyrics-display .sl2-lyrics-plain {
  font-size: var(--DefaultLyricsSize, 1.4rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  white-space: normal;
}

/* ── Thème clair (texte brut / placeholder uniquement — voir note sur le
 *  manque de gestion du thème clair pour les paroles synchronisées) ── */
body.theme-clair .sl2-lyrics-plain {
  color: #121216 !important;
}
body.theme-clair .sl2-placeholder {
  color: #50505a !important;
}