:root{
  /* ------- thème bleu (défaut) ------- */
  --fond:#141B3D; --fond-2:#1E2A5C; --carte:#212B5C;
  --texte:#FFF3E0; --texte-doux:#B9AFD8;
  --accent:#FFC23C; --accent-2:#6B5BE0; --lueur:#FFC23C;
  --menthe:#34B394; --grenade:#E8604C; --bord:rgba(255,243,224,.16);
  --titre:"Baloo Bhaijaan 2","Trebuchet MS",system-ui,sans-serif;
  --corps:"Nunito",system-ui,-apple-system,sans-serif;
}
[data-theme="rose"]{
  --fond:#4A1235; --fond-2:#7A1E52; --carte:#6B1A49;
  --texte:#FFF0F6; --texte-doux:#F1BEDA;
  --accent:#FFC23C; --accent-2:#FF5FA2; --lueur:#FFD27A;
  --menthe:#4ECFA8; --grenade:#FF7A6B; --bord:rgba(255,240,246,.2);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--corps);font-size:17px;color:var(--texte);
  background:var(--fond);
  background-image:radial-gradient(circle at 15% 0%, var(--fond-2), transparent 55%),
                   radial-gradient(circle at 85% 100%, var(--accent-2), transparent 60%);
  background-attachment:fixed;
  min-height:100vh;padding-bottom:92px;
  transition:background-color .3s,color .3s;
}
a{color:inherit;text-decoration:none}
.ecran{max-width:760px;margin:0 auto;padding:14px 16px 20px}

/* ---------------- en-tête ---------------- */
.entete{
  max-width:760px;margin:0 auto;padding:14px 16px 6px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.marque{display:flex;align-items:center;gap:10px}
.marque-lanterne{width:30px;color:var(--accent);display:block}
.marque-lanterne svg{width:100%;height:auto}
.marque strong{display:block;font-family:var(--titre);font-size:1.5rem;line-height:1}
.marque em{display:block;font-style:normal;font-size:.72rem;color:var(--texte-doux)}
.reglages{display:flex;gap:8px;align-items:center}
.select{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.1);border:1.5px solid var(--bord);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:.82rem;font-weight:700;
  color:var(--texte);cursor:pointer;
}
.select select{background:none;border:none;color:inherit;font:inherit;font-weight:700}
.select select option{color:#222}
.pastille-theme{width:16px;height:16px;border-radius:50%;background:var(--accent-2);display:inline-block}

/* ---------------- accueil ---------------- */
.heros{
  position:relative;background:rgba(255,255,255,.07);
  border:1.5px solid var(--bord);border-radius:26px;padding:20px 18px 18px;margin-bottom:14px;
  display:flex;gap:14px;align-items:center;
}
.heros-texte h1{font-family:var(--titre);font-size:1.9rem;margin:0 0 4px;line-height:1.05}
.heros-texte p{margin:0;color:var(--texte-doux);font-size:.95rem}
.heros-illustration{width:64px;flex:none;color:var(--accent)}
.heros-illustration svg{width:100%;height:auto}
.bulle{
  position:absolute;right:14px;bottom:-14px;max-width:60%;
  background:var(--carte);border:1.5px solid var(--bord);border-radius:14px;
  padding:8px 12px;font-size:.78rem;margin:0;line-height:1.35;
}
.raccourcis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0 22px}
.raccourcis a{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);border:1.5px solid var(--bord);
  border-radius:20px;padding:12px 6px;font-size:.72rem;font-weight:700;text-align:center;
}
.raccourcis span{width:26px;height:26px;color:var(--accent)}
.raccourcis svg{width:100%;height:100%}

.rubrique{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--titre);font-size:1.15rem;margin:22px 0 12px;
}
.rubrique a{font-family:var(--corps);font-size:.78rem;color:var(--accent);font-weight:700}

/* ---------------- cartes de contes ---------------- */
.grille-contes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.grille-contes--large{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.carte-conte{
  display:block;background:var(--carte);border:1.5px solid var(--bord);
  border-radius:20px;overflow:hidden;
}
.carte-image{display:block;line-height:0}
.carte-image svg{width:100%;height:auto;display:block}
.carte-corps{display:block;padding:10px 12px 12px}
.carte-corps strong{display:block;font-family:var(--titre);font-size:.95rem;line-height:1.2;margin-bottom:5px}
.carte-meta{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--texte-doux)}
.carte-meta--fin{margin-top:3px}
.drapeau{font-size:.95rem}
.point{opacity:.5;margin:0 2px}

.carte-reprise{display:flex;gap:12px;align-items:center;background:var(--carte);
  border:1.5px solid var(--accent);border-radius:20px;padding:10px;overflow:hidden}
.carte-reprise .carte-image{width:110px;flex:none;border-radius:14px;overflow:hidden}
.carte-reprise strong{font-family:var(--titre);display:block;margin-bottom:4px}

/* ---------------- explorer ---------------- */
.titre-page{font-family:var(--titre);font-size:1.6rem;margin:6px 0 4px}
.sous-titre{margin:0 0 16px;color:var(--texte-doux);font-size:.92rem}
.pastilles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pastille{
  display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;
  background:rgba(255,255,255,.08);border:1.5px solid var(--bord);
  border-radius:999px;padding:8px 14px;
}
.pastille.on{background:var(--menthe);border-color:var(--menthe);color:#06231C}

/* ---------------- fiche ---------------- */
.retour{display:inline-block;margin-bottom:10px;font-weight:700;color:var(--texte-doux)}
.fiche-image{border-radius:22px;overflow:hidden;border:1.5px solid var(--bord);margin-bottom:14px}
.fiche-image svg{width:100%;height:auto;display:block}
.fiche-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.82rem;color:var(--texte-doux);margin:0 0 12px}
.fiche-resume{line-height:1.65;margin:0 0 18px}
.actions{display:flex;flex-direction:column;gap:10px}
.bouton{
  display:block;text-align:center;font-family:var(--titre);font-weight:800;font-size:1.05rem;
  color:#1A1428;background:var(--accent);border:none;border-radius:999px;padding:14px 24px;cursor:pointer;
}
.bouton--calme{background:transparent;color:var(--texte);border:2px solid var(--bord)}
.note{font-size:.82rem;color:var(--texte-doux);line-height:1.55;margin-top:14px}
.vide{color:var(--texte-doux);text-align:center;padding:24px 8px}

/* ---------------- lecture immersive ---------------- */
body[data-page="lecture"] .entete,
body[data-page="lecture"] .onglets{display:none}
body[data-page="lecture"]{padding-bottom:20px}
.lecture-barre{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.lecture-titre{font-family:var(--titre);font-size:1rem}
.rond{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1.5px solid var(--bord);color:var(--texte);
  font-size:1.15rem;cursor:pointer;flex:none;
}
.rond.actif{background:var(--grenade);border-color:var(--grenade)}
.modes{display:flex;gap:8px;justify-content:center;margin-top:16px}
.mode{
  font:inherit;font-size:.8rem;font-weight:700;color:var(--texte);
  background:rgba(255,255,255,.08);border:1.5px solid var(--bord);
  border-radius:999px;padding:7px 16px;cursor:pointer;
}
.mode.on{background:var(--accent);color:#1A1428;border-color:var(--accent)}
.lecture[data-mode="ecouter"] .lp-texte{font-size:.98rem;opacity:.86}
.lecture[data-mode="lire"] .lp-texte{font-size:1.14rem;line-height:1.95}

/* ---------------- feuillets (fin, quiz) ---------------- */
.feuillet{
  background:var(--carte);border:1.5px solid var(--bord);border-radius:26px;
  padding:24px 20px;text-align:center;margin-top:18px;
}
.feuillet h2{font-family:var(--titre);font-size:1.5rem;margin:10px 0 6px}
.feuillet p{margin:0 0 14px;color:var(--texte-doux)}
.feuillet .bouton{margin-top:10px}
.fin-lanterne{width:78px;margin:0 auto;color:var(--accent)}
.fin-lanterne svg{width:100%;height:auto}
.fin-lueur{font-family:var(--titre);color:var(--accent)}
.quiz-entete{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.quiz-entete span{font-size:.82rem;color:var(--texte-doux)}
.quiz-jauge{height:6px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-bottom:16px}
.quiz-jauge i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.quiz-reponses{display:grid;gap:11px;text-align:start}
.reponse{
  display:flex;align-items:center;gap:12px;width:100%;
  font:inherit;font-weight:700;font-size:.98rem;color:var(--texte);
  background:rgba(255,255,255,.08);border:2px solid var(--bord);
  border-radius:18px;padding:12px 14px;cursor:pointer;min-height:64px;text-align:start;
}
.reponse .visuel{width:52px;height:52px;flex:none;border-radius:14px;background:rgba(255,255,255,.1);overflow:hidden}
.reponse .visuel svg{width:100%;height:100%}
.reponse.juste{background:rgba(52,179,148,.3);border-color:var(--menthe)}
.reponse.presque{background:rgba(232,96,76,.22);border-color:var(--grenade)}
.quiz-retour{margin-top:14px;font-size:.92rem;color:var(--texte)}

/* ---------------- lanternes ---------------- */
.compteur{font-family:var(--corps);font-size:.9rem;color:var(--accent)}
.grille-lanternes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.lanterne-case{
  aspect-ratio:1;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1.5px solid var(--bord);border-radius:18px;color:var(--accent);
}
.lanterne-case svg{width:54%;height:auto}
.lanterne-case .allumee{display:none}
.lanterne-case.on .allumee{display:block}
.lanterne-case.on .eteinte{display:none}

/* ---------------- onglets ---------------- */
.onglets{
  position:fixed;left:0;right:0;bottom:0;height:76px;z-index:20;
  background:color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--bord);
  display:flex;align-items:flex-start;padding-top:9px;
}
.onglets a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:.66rem;font-weight:700;color:var(--texte-doux);
}
.onglets a.on{color:var(--accent)}
.onglets svg{width:23px;height:23px}

@media (min-width:780px){
  body{padding-bottom:20px}
  .onglets{position:static;max-width:760px;margin:10px auto 0;border-radius:22px;border:1px solid var(--bord)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}