/* ===== L'Archipel de Lily — style bande dessinée ===== */
:root{
  --ink:#1B1B1F;
  --paper:#FDF6E9;
  --jaune:#FFC933;
  --rouge:#FF5A39;
  --bleu:#2E7DE1;
  --vert:#3BB273;
  --violet:#9B59D0;
  --rose:#FF8FC0;
  --blanc:#FFFFFF;
  --ombre:4px 4px 0 var(--ink);
  --ombre-sm:3px 3px 0 var(--ink);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--paper);
  background-image:radial-gradient(rgba(27,27,31,.07) 1.2px, transparent 1.3px);
  background-size:14px 14px;
  color:var(--ink);
  font-family:'Segoe UI',Roboto,system-ui,sans-serif;
  font-size:17px; line-height:1.45;
  min-height:100vh;
  user-select:none;
}
#app{max-width:520px; margin:0 auto; padding:12px 14px calc(30px + env(safe-area-inset-bottom))}
button{font:inherit; color:inherit; cursor:pointer}

/* ---- typographie BD ---- */
h1,h2,h3,.bd{
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  font-weight:900; letter-spacing:.02em; line-height:1.15;
  margin:0;
}
h1{font-size:1.7rem; text-transform:uppercase}
h2{font-size:1.25rem}
.onoma{
  display:inline-block; font-family:'Trebuchet MS',sans-serif; font-weight:900;
  text-transform:uppercase; font-size:1.6rem; transform:rotate(-4deg);
  color:var(--jaune);
  text-shadow:2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}

/* ---- panneaux / cases de BD ---- */
.case{
  background:var(--blanc); border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--ombre); padding:14px 16px; margin:12px 0;
}
.case.flat{box-shadow:none}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 0 4px;
}
.topbar .titre{display:flex; align-items:center; gap:8px}
.pill{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--blanc); border:3px solid var(--ink); border-radius:999px;
  padding:3px 12px; font-weight:900; font-size:.95rem; box-shadow:var(--ombre-sm);
  font-variant-numeric:tabular-nums;
}
.btn-retour{
  background:var(--blanc); border:3px solid var(--ink); border-radius:12px;
  box-shadow:var(--ombre-sm); font-size:1.2rem; font-weight:900; padding:4px 12px;
}

/* ---- bulle de BD (Aya parle) ---- */
.bulle-row{display:flex; align-items:flex-end; gap:10px; margin:12px 0}
.bulle{
  position:relative; flex:1; background:var(--blanc); border:3px solid var(--ink);
  border-radius:16px; padding:12px 14px; font-weight:600; box-shadow:var(--ombre-sm);
}
.bulle::after{
  content:""; position:absolute; left:-14px; bottom:14px;
  border:10px solid transparent; border-right-color:var(--ink);
}
.bulle::before{
  content:""; position:absolute; left:-9px; bottom:16px; z-index:1;
  border:8px solid transparent; border-right-color:var(--blanc);
}
.bulle-row.droite{flex-direction:row-reverse}
.bulle-row.droite .bulle::after{left:auto; right:-14px; border-right-color:transparent; border-left-color:var(--ink)}
.bulle-row.droite .bulle::before{left:auto; right:-9px; border-right-color:transparent; border-left-color:var(--blanc)}
.aya{flex:none; width:84px; height:84px}
.aya svg{width:100%; height:100%}

/* ---- gros boutons ---- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  border:3px solid var(--ink); border-radius:16px; box-shadow:var(--ombre);
  font-family:'Trebuchet MS',sans-serif; font-weight:900; font-size:1.15rem;
  padding:14px 16px; margin:10px 0; background:var(--jaune); text-transform:uppercase;
  transition:transform .06s, box-shadow .06s;
}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.btn.bleu{background:var(--bleu); color:#fff}
.btn.rouge{background:var(--rouge); color:#fff}
.btn.vert{background:var(--vert); color:#fff}
.btn.violet{background:var(--violet); color:#fff}
.btn.blanc{background:var(--blanc)}
.btn.mini{font-size:.95rem; padding:9px 12px; margin:6px 0; border-radius:12px; box-shadow:var(--ombre-sm)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn .sous{display:block; font-size:.72rem; font-weight:600; text-transform:none; letter-spacing:0; opacity:.85}
.btn-col{text-align:center; flex-direction:column; gap:2px}
.row{display:flex; gap:10px}
.row > *{flex:1}

/* ---- îles (accueil monde) ---- */
.ile{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--blanc); border:3px solid var(--ink); border-radius:16px;
  box-shadow:var(--ombre); padding:12px 14px; margin:10px 0;
  transition:transform .06s, box-shadow .06s;
}
.ile:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.ile .emoji{font-size:2rem; flex:none}
.ile .infos{flex:1}
.ile .nom{display:block; font-weight:900; font-family:'Trebuchet MS',sans-serif; font-size:1.05rem}
.ile .detail{display:block; font-size:.8rem; opacity:.75}
.ceinture{
  flex:none; font-size:.72rem; font-weight:900; color:#fff; padding:3px 10px;
  border-radius:999px; border:2px solid var(--ink); text-transform:uppercase;
}

/* ---- exercices ---- */
.enonce{
  font-size:1.35rem; font-weight:700; text-align:center; padding:14px 10px;
  background:var(--blanc); border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--ombre-sm); margin:10px 0;
}
.enonce.grand{font-size:2rem; font-family:Consolas,monospace; font-variant-numeric:tabular-nums}
.reponse-affichee{
  min-height:56px; font-family:Consolas,monospace; font-size:2rem; font-weight:700;
  text-align:center; background:#FFF; border:3px dashed var(--ink); border-radius:12px;
  padding:6px; margin:8px 0; letter-spacing:.1em;
}
.pave{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0}
.pave button{
  font-family:Consolas,monospace; font-size:1.5rem; font-weight:700; padding:12px 0;
  background:var(--blanc); border:3px solid var(--ink); border-radius:12px; box-shadow:var(--ombre-sm);
}
.pave button:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.pave button.action{background:var(--jaune); font-size:1.1rem}
.pave button.ok{background:var(--vert); color:#fff}
.choix{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0}
.choix button{
  background:var(--blanc); border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--ombre-sm); padding:14px 8px; font-weight:800; font-size:1.05rem;
}
.choix button:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.choix button .emoji{display:block; font-size:1.8rem}
.choix button.bon{background:var(--vert); color:#fff}
.choix button.faux{background:var(--rouge); color:#fff}
textarea.dictee{
  width:100%; min-height:110px; font:inherit; font-size:1.1rem; line-height:1.6;
  border:3px solid var(--ink); border-radius:14px; padding:12px; background:#fff;
  box-shadow:var(--ombre-sm); user-select:text;
}
textarea.dictee:focus{outline:3px solid var(--bleu)}

/* ---- chrono ---- */
.chrono-tete{display:flex; align-items:center; justify-content:space-between; margin:8px 0}
.chrono-temps{
  font-family:Consolas,monospace; font-size:2.4rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.chrono-temps.urgent{color:var(--rouge)}
.paliers{display:flex; justify-content:center; gap:8px; font-size:1.6rem; margin:6px 0}
.paliers span{opacity:.22; transition:opacity .3s, transform .3s}
.paliers span.on{opacity:1; transform:scale(1.15)}
.score-live{text-align:center; font-weight:900; font-size:1.05rem}

/* ---- correction dictée ---- */
.diff{font-size:1.15rem; line-height:2; background:#fff; border:3px solid var(--ink);
  border-radius:14px; padding:12px 14px; box-shadow:var(--ombre-sm)}
.diff .ok{color:var(--vert)}
.diff .err{background:#FFE1DA; color:var(--rouge); font-weight:900; border-radius:6px; padding:0 4px; text-decoration:line-through}
.diff .attendu{background:#DEF3E8; color:#1E7A4C; font-weight:900; border-radius:6px; padding:0 4px}
.lecon{
  background:#FFF6DA; border:3px solid var(--ink); border-radius:12px;
  padding:10px 12px; margin:8px 0; font-size:.95rem;
}
.lecon b{color:var(--rouge)}

/* ---- étoiles / résultat ---- */
.resultat-etoiles{text-align:center; font-size:2.6rem; letter-spacing:.1em; margin:6px 0}
.gain{
  display:flex; justify-content:center; gap:14px; font-weight:900; font-size:1.1rem;
  margin:8px 0;
}
.gain span{background:var(--blanc); border:3px solid var(--ink); border-radius:999px;
  padding:4px 14px; box-shadow:var(--ombre-sm)}

/* ---- boutique / avatar ---- */
.avatar-scene{
  position:relative; height:190px; border:3px solid var(--ink); border-radius:16px;
  box-shadow:var(--ombre); overflow:hidden; margin:10px 0;
  display:flex; align-items:flex-end; justify-content:center;
}
.avatar-scene .fond{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:7rem; opacity:.35}
.avatar-scene .aya-grande{position:relative; width:150px; height:150px}
.boutique-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.article{
  background:var(--blanc); border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--ombre-sm); padding:8px 4px; text-align:center;
}
.article .emoji{font-size:1.9rem}
.article .prix{font-size:.8rem; font-weight:900}
.article.possede{background:#DEF3E8}
.article.equipe{background:var(--jaune)}
.article:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}

/* ---- records ---- */
.record-ligne{display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:2px dashed rgba(27,27,31,.2)}
.record-ligne:last-child{border-bottom:none}
.record-ligne .vehicule{font-size:1.5rem}
.mur{display:block}

/* ---- ardoise ---- */
canvas.ardoise{
  width:100%; height:190px; background:#fff; border:3px solid var(--ink);
  border-radius:14px; box-shadow:var(--ombre-sm); touch-action:none; display:block;
}
.ardoise-outils{display:flex; gap:8px; margin:8px 0}
.ardoise-outils .btn{margin:0}

/* ---- toast + overlays ---- */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(120px);
  background:var(--ink); color:#fff; font-weight:900; padding:10px 22px;
  border-radius:999px; transition:transform .25s; z-index:50; white-space:nowrap;
  font-family:'Trebuchet MS',sans-serif;
}
#toast.visible{transform:translateX(-50%) translateY(0)}
.voile{
  position:fixed; inset:0; background:rgba(27,27,31,.55); z-index:40;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.voile .case{max-width:420px; width:100%; margin:0}

/* ---- confettis ---- */
.confetti{position:fixed; top:-14px; z-index:60; font-size:1.3rem; pointer-events:none;
  animation:tomber 1.6s ease-in forwards}
@keyframes tomber{to{transform:translateY(105vh) rotate(540deg); opacity:.6}}
@media (prefers-reduced-motion: reduce){
  .confetti{display:none}
  .btn,.ile,.article{transition:none}
}

/* ---- vie et rebonds (respecte prefers-reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference){
  #app > *{animation:apparait .34s ease-out backwards}
  #app > *:nth-child(2){animation-delay:.04s}
  #app > *:nth-child(3){animation-delay:.08s}
  #app > *:nth-child(4){animation-delay:.12s}
  #app > *:nth-child(5){animation-delay:.16s}
  #app > *:nth-child(6){animation-delay:.2s}
  #app > *:nth-child(7){animation-delay:.24s}
  #app > *:nth-child(8){animation-delay:.28s}
  @keyframes apparait{from{opacity:0; transform:translateY(12px)}}
  .aya img{animation:respire 2.8s ease-in-out infinite}
  @keyframes respire{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(1.2deg)}}
  @keyframes eclate{0%{transform:scale(.2); opacity:0} 65%{transform:scale(1.18)} 100%{transform:scale(1); opacity:1}}
  .resultat-etoiles{animation:eclate .55s cubic-bezier(.34,1.56,.64,1)}
  .onoma{display:inline-block; animation:eclate .45s cubic-bezier(.34,1.56,.64,1)}
  .gain span{animation:eclate .5s cubic-bezier(.34,1.56,.64,1) backwards}
  .gain span:nth-child(2){animation-delay:.12s}
  .gain span:nth-child(3){animation-delay:.24s}
  .pave button,.choix button{transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
  .jardin span{display:inline-block; animation:eclate .5s cubic-bezier(.34,1.56,.64,1) backwards}
}
.jardin{font-size:1.5rem; letter-spacing:.12em; text-align:center; margin:2px 0 8px}

/* ---- divers ---- */
.centre{text-align:center}
.muted{opacity:.65; font-size:.85rem}
.spacer{height:8px}
.progress-dots{display:flex; gap:6px; justify-content:center; margin:8px 0}
.progress-dots i{width:12px; height:12px; border-radius:50%; border:2px solid var(--ink); background:#fff}
.progress-dots i.fait{background:var(--vert)}
.progress-dots i.actuel{background:var(--jaune)}