/* Les Histoires de Julia — feuille de style (extraite de index.html, deplacement pur). */
/* ============ CONFIG VISUELLE ============ */
:root{
  --bg:#3a2a6d; --bg2:#5b3a9e; --bg3:#7c4dcf;
  --card:#fffaf0; --ink:#2c2556; --muted:#7d76a8;
  --p1:#ff8a5c; --p2:#3fc7c0; --p3:#ffce3a; --p4:#ff7bb0; --p5:#8a7bff;
  --syl1:#d6336c; --syl2:#1c7ed6;
  --ok:#37b24d; --no:#fa5252;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Fredoka',system-ui,sans-serif;
  background:linear-gradient(160deg,var(--bg),var(--bg2) 55%,var(--bg3));
  color:var(--ink);
  overflow:hidden;
  user-select:none;-webkit-user-select:none;
}
#stars-bg{position:fixed;inset:0;pointer-events:none;z-index:0;}
.app{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}

/* ============ ECRANS ============ */
.screen{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;gap:18px;}
.screen.on{display:flex;animation:pop .35s ease;}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ============ BOUTONS ============ */
.btn{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.5rem;color:#fff;
  border:none;border-radius:26px;padding:20px 30px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 7px 0 rgba(0,0,0,.22),0 10px 22px rgba(0,0,0,.28);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.22);}
.btn .em{font-size:1.7rem;}
.btn-1{background:var(--p1);} .btn-2{background:var(--p2);}
.btn-3{background:var(--p4);} .btn-4{background:var(--p5);}
.btn-big{font-size:1.9rem;padding:26px 40px;min-width:300px;}
.btn-round{
  width:62px;height:62px;border-radius:50%;padding:0;font-size:1.55rem;
  background:rgba(255,255,255,.92);color:var(--ink);
  display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 5px 0 rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.25);
}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;
  font-size:1.15rem;padding:12px 22px;border-radius:18px;}

/* ============ ACCUEIL ============ */
.title{font-weight:700;color:#fff;text-align:center;line-height:1.05;
  text-shadow:0 4px 0 rgba(0,0,0,.22);}
.title .l1{font-size:2rem;display:block;color:var(--p3);}
.title .l2{font-size:3.4rem;display:block;}
.mascotte{font-size:5.5rem;animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.stars-count{
  background:rgba(255,255,255,.16);color:#fff;border-radius:30px;
  padding:8px 20px;font-size:1.25rem;font-weight:600;display:flex;gap:8px;align-items:center;
}
.gear{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:14px;}
.bday-banner{background:linear-gradient(120deg,#ffce3a,#ff7bb0);
  font-size:1.25rem;padding:14px 26px;color:var(--ink);}

/* ============ GRILLE THEMES ============ */
.head{color:#fff;font-size:1.7rem;font-weight:700;text-align:center;
  text-shadow:0 3px 0 rgba(0,0,0,.2);}
.sub{color:#e9e3ff;font-size:1.05rem;text-align:center;margin-top:-8px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  width:100%;max-width:760px;overflow-y:auto;padding:6px;}
.tile{
  background:var(--card);border-radius:22px;padding:14px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 5px 0 rgba(0,0,0,.16);transition:transform .1s;
  border:4px solid transparent;
}
.tile:active{transform:scale(.95);}
.tile.sel{border-color:var(--p3);background:#fff7d6;}
.tile .ico{font-size:2.6rem;}
.tile .lab{font-size:.95rem;font-weight:600;text-align:center;color:var(--ink);}

/* selecteur mode + perso */
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.chip{
  background:rgba(255,255,255,.16);color:#fff;border-radius:18px;
  padding:10px 16px;font-size:1.05rem;font-weight:600;cursor:pointer;
  border:3px solid transparent;display:flex;align-items:center;gap:6px;
}
.chip.sel{background:var(--p3);color:var(--ink);border-color:#fff;}
.persos{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:740px;}
.perso{
  background:var(--card);border-radius:16px;padding:8px 12px;cursor:pointer;
  font-size:1rem;font-weight:600;color:var(--ink);display:flex;gap:6px;align-items:center;
  border:3px solid transparent;box-shadow:0 4px 0 rgba(0,0,0,.14);
}
.perso .em{font-size:1.5rem;}
.perso.sel{border-color:var(--p2);background:#e3fbfa;}
.perso.lock{opacity:.95;border-color:var(--p3);background:#fff7d6;}

/* ============ CHARGEMENT ============ */
.load-emoji{font-size:5.5rem;animation:bounce .8s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-26px) rotate(6deg)}}
.load-msg{color:#fff;font-size:1.4rem;font-weight:600;text-align:center;min-height:2.4em;}
.dots{display:flex;gap:10px;}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--p3);
  animation:blink 1s infinite;}
.dots i:nth-child(2){animation-delay:.2s;background:var(--p1);}
.dots i:nth-child(3){animation-delay:.4s;background:var(--p4);}
@keyframes blink{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* ============ LECTEUR ============ */
#reader{justify-content:flex-start;padding:0;}
.reader-top{width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 6px;gap:10px;}
.pager{display:flex;gap:7px;}
.pager i{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.32);}
.pager i.on{background:var(--p3);transform:scale(1.25);}
.book{
  background:var(--card);border-radius:28px;margin:6px 14px;
  flex:1;width:calc(100% - 28px);max-width:560px;align-self:center;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.illu{
  width:100%;flex:none;aspect-ratio:1/1;background:linear-gradient(150deg,#e7defc,#cdeef0);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.illu img{width:100%;height:100%;object-fit:cover;display:block;}
.illu .ph{font-size:3.4rem;animation:bounce 1s infinite;}
.illu .ph small{display:block;font-size:.9rem;color:var(--muted);font-weight:600;margin-top:6px;animation:none;}
.story-text{
  flex:1;padding:18px 22px;overflow-y:auto;min-height:0;
  display:flex;flex-direction:column;
  font-family:'Andika',sans-serif;font-size:1.7rem;line-height:2;color:var(--ink);
  text-align:left;
}
.story-inner{margin:auto 0;width:100%;}
.story-text.lvl-facile{font-size:2rem;}
.story-text.lvl-fort{font-size:1.5rem;}
.word{cursor:pointer;border-radius:6px;padding:0 1px;transition:background .15s;}
.word:active{background:var(--p3);}
.word.play{background:var(--p3);}
.s0{color:var(--syl1);} .s1{color:var(--syl2);}
.reader-bottom{
  width:100%;max-width:560px;align-self:center;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 14px calc(env(safe-area-inset-bottom) + 12px);
}
.btn-nav{font-size:1.15rem;padding:14px 22px;border-radius:20px;}

/* ============ QUIZ ============ */
.quiz-card{background:var(--card);border-radius:26px;padding:24px;max-width:620px;width:100%;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);}
.quiz-q{font-size:1.5rem;font-weight:700;color:var(--ink);text-align:center;}
.quiz-a{
  font-family:'Fredoka',sans-serif;font-size:1.35rem;font-weight:600;color:var(--ink);
  background:#f1ecff;border:4px solid transparent;border-radius:20px;padding:16px;
  cursor:pointer;text-align:center;transition:transform .08s;
}
.quiz-a:active{transform:scale(.97);}
.quiz-a.good{background:#d3f9d8;border-color:var(--ok);}
.quiz-a.bad{background:#ffe3e3;border-color:var(--no);animation:shake .35s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.quiz-prog{color:#e9e3ff;font-weight:600;}

/* ============ RECOMPENSE ============ */
.reward-stars{font-size:2.5rem;letter-spacing:3px;animation:pop .5s ease;}
.level-box{background:var(--card);border-radius:22px;padding:14px 20px;
  max-width:440px;width:100%;display:flex;flex-direction:column;gap:7px;align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);}
.level-up{font-size:1.35rem;font-weight:700;color:var(--p1);animation:pop .5s ease;}
.level-name{font-size:1.15rem;font-weight:700;color:var(--ink);}
.level-bar{width:100%;height:18px;border-radius:10px;background:#e9e3ff;overflow:hidden;}
.level-bar span{display:block;height:100%;border-radius:10px;
  background:linear-gradient(90deg,var(--p3),var(--p1));transition:width .6s ease;}
.level-hint{font-size:.95rem;color:var(--muted);font-weight:600;}
.sticker-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.sticker-new{
  background:var(--card);border-radius:22px;width:84px;height:84px;
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  box-shadow:0 0 0 5px var(--p3),0 8px 18px rgba(0,0,0,.3);
  animation:reveal .55s ease backwards;
}
@keyframes reveal{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1) rotate(0)}}

/* ============ BIBLIOTHEQUE ============ */
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  width:100%;max-width:760px;overflow-y:auto;padding:6px;}
.lib-item{background:var(--card);border-radius:20px;padding:14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  box-shadow:0 5px 0 rgba(0,0,0,.16);position:relative;}
.lib-item:active{transform:scale(.96);}
.lib-item .ico{font-size:2.6rem;}
.lib-item .tt{font-size:.95rem;font-weight:600;color:var(--ink);}
.lib-item .dl{position:absolute;top:4px;right:4px;background:#fff;border-radius:50%;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.empty{color:#e9e3ff;font-size:1.2rem;text-align:center;}

/* ============ REGLAGES ============ */
.set-card{background:var(--card);border-radius:24px;padding:22px;max-width:540px;width:100%;
  display:flex;flex-direction:column;gap:20px;box-shadow:0 10px 30px rgba(0,0,0,.3);}
.set-row{display:flex;flex-direction:column;gap:10px;}
.set-row .lbl{font-size:1.2rem;font-weight:700;color:var(--ink);}
.seg{display:flex;gap:8px;}
.seg button{flex:1;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;
  padding:12px;border-radius:16px;border:3px solid #e6e0ff;background:#f4f0ff;
  color:var(--ink);cursor:pointer;}
.seg button.on{background:var(--p2);color:#fff;border-color:#fff;}
.toggle{display:flex;justify-content:space-between;align-items:center;}
.sw{width:64px;height:36px;border-radius:20px;background:#d8d2f0;position:relative;cursor:pointer;}
.sw b{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;
  background:#fff;transition:left .15s;box-shadow:0 2px 5px rgba(0,0,0,.3);}
.sw.on{background:var(--ok);} .sw.on b{left:31px;}
/* ============ ALBUM ============ */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
  gap:8px;width:100%;max-width:740px;flex:1;min-height:0;overflow-y:auto;padding:10px;
  background:rgba(255,255,255,.08);border-radius:20px;}
.album-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;background:var(--card);border-radius:14px;
  filter:grayscale(1);opacity:.25;}
.album-cell.got{filter:none;opacity:1;box-shadow:0 3px 0 rgba(0,0,0,.12);}

/* ============ BOUTIQUE ============ */
.shop-packs{display:flex;flex-direction:column;gap:14px;width:100%;max-width:460px;}
.pack{font-family:'Fredoka',sans-serif;cursor:pointer;border:none;
  background:var(--card);border-radius:22px;padding:14px 18px;
  display:flex;align-items:center;gap:14px;color:var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.16);}
.pack:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.16);}
.pack.off{opacity:.5;}
.pack-em{font-size:2.6rem;}
.pack-txt{display:flex;flex-direction:column;text-align:left;}
.pack-txt b{font-size:1.2rem;font-weight:700;}
.pack-txt small{font-size:.92rem;color:var(--muted);font-weight:600;}
.pack-prix{margin-left:auto;font-size:1.25rem;font-weight:700;color:var(--p1);
  background:#fff3e6;border-radius:14px;padding:8px 13px;white-space:nowrap;}

/* ============ BOOSTER (ouverture de pochette) ============ */
#booster{position:fixed;inset:0;z-index:60;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:rgba(24,14,54,.93);overflow:hidden;}
#booster.on{display:flex;}
.boost-title{color:#fff;font-size:1.5rem;font-weight:700;text-align:center;
  text-shadow:0 3px 0 rgba(0,0,0,.3);padding:0 20px;}
.boost-pack{font-size:8rem;animation:boostShake .5s ease-in-out 2;}
@keyframes boostShake{0%,100%{transform:rotate(-9deg) scale(1)}
  25%{transform:rotate(9deg) scale(1.08)}50%{transform:rotate(-9deg) scale(1.05)}
  75%{transform:rotate(9deg) scale(1.12)}}
.boost-pack.burst{animation:boostBurst .5s ease-out forwards;}
@keyframes boostBurst{0%{transform:scale(1.1)}
  40%{transform:scale(1.6);filter:brightness(2.5)}
  100%{transform:scale(3.4);opacity:0}}
.boost-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at center,#fff,transparent 62%);}
.boost-flash.go{animation:bflash .6s ease-out;}
@keyframes bflash{0%{opacity:0}28%{opacity:.95}100%{opacity:0}}
.boost-cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:92vw;}
.boost-card{width:88px;height:88px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-size:3.1rem;
  background:var(--card);box-shadow:0 0 0 5px var(--p3),0 10px 22px rgba(0,0,0,.45);
  animation:cardFlip .6s cubic-bezier(.2,1.5,.5,1) backwards;}
@keyframes cardFlip{0%{transform:scale(.2) rotateY(180deg)}
  60%{transform:scale(1.18) rotateY(0)}100%{transform:scale(1) rotateY(0)}}
.confetti{position:absolute;left:50%;top:44%;width:13px;height:13px;border-radius:3px;
  pointer-events:none;animation:conf 1.3s ease-out forwards;}
@keyframes conf{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(600deg);opacity:0}}


/* ============ DIVERS ============ */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
  background:#2c2556;color:#fff;padding:14px 24px;border-radius:20px;
  font-size:1.05rem;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.4);
  max-width:90vw;text-align:center;}
.spin{width:30px;height:30px;border:4px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:rot 1s linear infinite;}
@keyframes rot{to{transform:rotate(360deg)}}
@media(max-width:560px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .lib-grid{grid-template-columns:repeat(2,1fr);}
  .title .l2{font-size:2.7rem;}
  .story-text{font-size:1.5rem;}
}
/* ===== PAYSAGE : image a gauche, texte a droite (livre ouvert) ===== */
@media(orientation:landscape){
  .book{flex-direction:row;max-width:980px;}
  .illu{width:auto;height:100%;max-width:58%;}
  .reader-bottom{max-width:980px;}
}