:root{
  --lp-nuit:#141B3D; --lp-ivoire:#FFF3E0; --lp-safran:#FFC23C;
  --lp-menthe:#34B394; --lp-encre:#2C1A4A;
  --lp-titre:"Baloo Bhaijaan 2","Trebuchet MS",system-ui,sans-serif;
  --lp-texte:"Nunito",system-ui,-apple-system,sans-serif;
}
.lp-lecteur{font-family:var(--lp-texte);color:var(--lp-ivoire);font-size:18px}
.lp-image{border-radius:20px;overflow:hidden;border:2px solid rgba(255,243,224,.25)}
.lp-tableau{display:block;width:100%;height:auto}
.lp-points{display:flex;gap:6px;justify-content:center;margin:12px 0}
.lp-points i{width:7px;height:7px;border-radius:50%;background:rgba(255,243,224,.35)}
.lp-points i.lu{background:var(--lp-menthe)}
.lp-points i.ici{background:var(--lp-safran);width:20px;border-radius:99px}
.lp-texte{font-size:1.05rem;line-height:1.85;margin:0}
.lp-texte .lp-mot{transition:color .15s}
.lp-texte .lp-mot.lu{color:var(--lp-safran)}
.lp-morale{margin-top:14px;padding:12px 14px;border:2px dashed rgba(255,194,60,.6);
  border-radius:16px;font-family:var(--lp-titre);font-weight:700;line-height:1.5}
.lp-barre{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.lp-btn{font-family:var(--lp-titre);font-weight:800;font-size:1rem;color:var(--lp-encre);
  background:var(--lp-safran);border:none;border-radius:999px;padding:12px 22px;cursor:pointer}
.lp-btn[disabled]{opacity:.4;cursor:default}
.lp-ecoute{background:var(--lp-menthe);color:#fff}
.lp-lecteur[dir="rtl"] .lp-texte{text-align:right}

/* Animations nommées dans le manifeste : anim:"flamme" → classe .lp-flamme.
   On anime la propriété CSS « translate » et non « transform » : transform
   écraserait l'attribut transform="translate(...) scale(...)" posé par le
   moteur, et le personnage sauterait à l'origine du cadre. */
.lp-flamme{animation:lp-flamme 1.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lp-flamme{0%,100%{opacity:.85}50%{opacity:1}}
.lp-marche{animation:lp-marche 9s ease-in-out infinite}
@keyframes lp-marche{0%,100%{translate:0}50%{translate:46px 0}}
.lp-flotte{animation:lp-flotte 5s ease-in-out infinite}
@keyframes lp-flotte{0%,100%{translate:0 0}50%{translate:0 -5px}}
.lp-scintille{animation:lp-scintille 3.2s ease-in-out infinite}
@keyframes lp-scintille{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}