:root{
  --bleu:#2B4FD8;
  --bleu-fonce:#1B2E8F;
  --rouge:#E63946;
  --jaune:#FFC53D;
  --vert:#2FB673;
  --encre:#1B2559;
  --fond:#EEF2FF;
  --carte:#FFFFFF;
  --ombre:0 4px 0 rgba(27,37,89,.14);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Nunito',sans-serif;
  background:var(--fond);
  color:var(--encre);
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overscroll-behavior:none;
}
h1,h2,h3,.disp{font-family:'Baloo 2',cursive}
button{font-family:inherit;border:none;cursor:pointer;background:none}

/* ---------- En-tête ---------- */
header{
  position:sticky;top:0;z-index:10;
  background:var(--bleu);
  color:#fff;
  padding:14px 18px 12px;
  border-radius:0 0 22px 22px;
  box-shadow:0 4px 14px rgba(43,79,216,.25);
}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hdr-title{font-family:'Baloo 2';font-weight:800;font-size:1.25rem;letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.flag{display:inline-flex;border-radius:4px;overflow:hidden;width:24px;height:16px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.flag span{flex:1}
.flag .b{background:#0055A4}.flag .w{background:#fff}.flag .r{background:#EF4135}
.stats{display:flex;gap:8px}
.pill{
  background:rgba(255,255,255,.18);
  border-radius:999px;
  padding:4px 12px;
  font-weight:800;
  font-size:.85rem;
  display:flex;align-items:center;gap:5px;
}
.pill .em{font-size:.95rem}

/* ---------- Mascotte ---------- */
.mascotte{
  display:flex;align-items:flex-end;gap:10px;
  padding:16px 18px 4px;
}
.masc-emoji{font-size:2.6rem;filter:drop-shadow(0 3px 4px rgba(27,37,89,.2));animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.masc-emoji{animation:none}}
.bulle{
  background:var(--carte);
  border-radius:16px 16px 16px 4px;
  padding:10px 14px;
  font-weight:700;font-size:.92rem;
  box-shadow:0 3px 0 rgba(27,37,89,.1);
  flex:1;
}

/* ---------- Chemin des leçons ---------- */
main{flex:1;padding:10px 18px 40px}
.chemin{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.lecon{
  background:var(--carte);
  border-radius:20px;
  padding:16px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 3px 0 rgba(27,37,89,.1);
  border:2.5px solid transparent;
  transition:transform .12s;
  width:100%;text-align:left;color:var(--encre);
}
.lecon:active{transform:scale(.98)}
.lecon.done{border-color:var(--vert)}
.lecon.locked{opacity:.45;filter:grayscale(.6)}
.lecon-icon{
  width:56px;height:56px;flex:none;
  background:var(--fond);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;
}
.lecon-info{flex:1;min-width:0}
.lecon-num{font-size:.72rem;font-weight:800;color:var(--bleu);text-transform:uppercase;letter-spacing:.8px}
.lecon-titre{font-family:'Baloo 2';font-weight:700;font-size:1.08rem;line-height:1.15}
.lecon-etoiles{font-size:.95rem;letter-spacing:2px;margin-top:2px}
.chev{color:var(--bleu);font-size:1.4rem;font-weight:800}

.niv-hdr{
  font-family:'Baloo 2';font-weight:800;font-size:1rem;
  color:var(--bleu);
  margin-top:10px;
  display:flex;align-items:center;gap:10px;
}
.niv-hdr::after{content:"";flex:1;height:3px;background:#D9DFFB;border-radius:99px}

/* ---------- Écrans ---------- */
.screen{display:none;flex-direction:column;flex:1}
.screen.on{display:flex}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 18px 4px}
.btn-retour{
  width:42px;height:42px;border-radius:14px;
  background:var(--carte);color:var(--encre);
  font-size:1.3rem;font-weight:800;
  box-shadow:0 3px 0 rgba(27,37,89,.12);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.topbar h2{font-size:1.15rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress{
  height:12px;background:#D9DFFB;border-radius:999px;overflow:hidden;
  margin:12px 18px 0;
}
.progress i{display:block;height:100%;width:0;background:var(--vert);border-radius:999px;transition:width .3s}

/* ---------- Carte d'apprentissage ---------- */
.zone-carte{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px}
.grande-carte{
  background:var(--carte);
  border-radius:26px;
  box-shadow:0 6px 0 rgba(27,37,89,.12);
  padding:34px 22px 28px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  min-height:320px;justify-content:center;
}
.gc-emoji{font-size:4rem;line-height:1}
.gc-fr{font-family:'Baloo 2';font-weight:800;font-size:2rem;color:var(--bleu);line-height:1.1}
.gc-hu{font-weight:800;font-size:1.15rem;color:var(--encre);opacity:.75}
.btn-son{
  margin-top:8px;
  background:var(--jaune);color:var(--encre);
  border-radius:999px;
  padding:12px 26px;
  font-weight:800;font-size:1rem;
  box-shadow:0 4px 0 #D9A21B;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-son:active{transform:translateY(3px);box-shadow:0 1px 0 #D9A21B}
.nav-cartes{display:flex;gap:12px;padding:0 18px 26px}
.btn-nav{
  flex:1;
  border-radius:18px;
  padding:15px;
  font-weight:800;font-size:1.05rem;
  font-family:'Baloo 2';
}
.btn-sec{background:var(--carte);color:var(--encre);box-shadow:0 4px 0 rgba(27,37,89,.12)}
.btn-pri{background:var(--bleu);color:#fff;box-shadow:0 4px 0 var(--bleu-fonce)}
.btn-pri:active,.btn-sec:active{transform:translateY(3px);box-shadow:none}
.btn-pri:disabled,.btn-sec:disabled{opacity:.4}

/* ---------- Quiz ---------- */
.quiz-question{
  padding:24px 18px 8px;text-align:center;
}
.q-consigne{font-size:.85rem;font-weight:800;color:var(--bleu);text-transform:uppercase;letter-spacing:.8px}
.q-mot{font-family:'Baloo 2';font-weight:800;font-size:1.9rem;margin-top:6px;line-height:1.15}
.q-emoji{font-size:3rem;margin-top:4px}
.q-ecoute{
  margin:10px auto 0;
  background:var(--bleu);color:#fff;
  border-radius:999px;padding:14px 30px;
  font-weight:800;font-size:1.05rem;
  box-shadow:0 4px 0 var(--bleu-fonce);
  display:inline-flex;gap:8px;align-items:center;
}
.q-ecoute:active{transform:translateY(3px);box-shadow:none}
.reponses{display:flex;flex-direction:column;gap:11px;padding:18px}
.rep{
  background:var(--carte);
  border-radius:18px;
  padding:16px;
  font-weight:800;font-size:1.05rem;
  color:var(--encre);
  box-shadow:0 3px 0 rgba(27,37,89,.12);
  border:2.5px solid transparent;
  text-align:center;
}
.rep:active{transform:scale(.98)}
.rep.ok{border-color:var(--vert);background:#E6F7EF}
.rep.ko{border-color:var(--rouge);background:#FDEBED}
.rep:disabled{pointer-events:none}
.feedback{
  text-align:center;font-family:'Baloo 2';font-weight:800;font-size:1.15rem;
  min-height:30px;padding:0 18px;
}
.feedback.ok{color:var(--vert)}
.feedback.ko{color:var(--rouge)}

/* ---------- Résultats ---------- */
.resultat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center}
.res-etoiles{font-size:3rem;letter-spacing:6px}
.res-titre{font-size:1.6rem}
.res-score{font-weight:800;font-size:1.1rem;opacity:.75}
.res-xp{
  background:var(--jaune);border-radius:999px;padding:8px 20px;
  font-weight:800;box-shadow:0 3px 0 #D9A21B;
}
confetti{display:none}

/* ---------- Profil dans l'en-tête ---------- */
.hdr-profil{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 10px 3px 4px;font-weight:800;font-size:.85rem;color:#fff}
.hdr-avatar{width:26px;height:26px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}

/* ---------- Écran d'accueil de connexion ---------- */
.auth{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 22px;gap:18px;text-align:center}
.auth-logo{font-size:3.4rem;animation:bob 3s ease-in-out infinite}
.auth h2{font-size:1.6rem;line-height:1.1}
.auth p{font-weight:700;opacity:.7;font-size:.95rem;margin-top:-8px}
.auth-card{background:var(--carte);border-radius:24px;box-shadow:0 6px 0 rgba(27,37,89,.12);padding:22px;width:100%;display:flex;flex-direction:column;gap:12px}
.champ{text-align:left}
.champ label{font-weight:800;font-size:.85rem;display:block;margin-bottom:6px;color:var(--bleu)}
.champ input{width:100%;border:2.5px solid #D9DFFB;border-radius:14px;padding:14px;font-family:inherit;font-weight:800;font-size:1.05rem;color:var(--encre);background:#F7F9FF}
.champ input:focus{outline:none;border-color:var(--bleu)}
.avatar-grille{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.avatar-opt{width:46px;height:46px;border-radius:14px;background:#F7F9FF;border:2.5px solid #D9DFFB;font-size:1.5rem;display:flex;align-items:center;justify-content:center}
.avatar-opt.sel{border-color:var(--bleu);background:#E7ECFF}
.btn-grand{width:100%;background:var(--bleu);color:#fff;border-radius:16px;padding:16px;font-family:'Baloo 2';font-weight:800;font-size:1.1rem;box-shadow:0 4px 0 var(--bleu-fonce)}
.btn-grand:active{transform:translateY(3px);box-shadow:none}
.btn-grand.jaune{background:var(--jaune);color:var(--encre);box-shadow:0 4px 0 #D9A21B}
.btn-grand.jaune:active{box-shadow:none}
.btn-lien{background:none;color:var(--bleu);font-weight:800;font-size:.95rem;text-decoration:underline;padding:6px}
.auth-err{color:var(--rouge);font-weight:800;font-size:.9rem;min-height:20px}
.profil-liste{display:flex;flex-direction:column;gap:10px;width:100%}
.profil-item{display:flex;align-items:center;gap:12px;background:var(--carte);border-radius:16px;padding:12px 14px;box-shadow:0 3px 0 rgba(27,37,89,.1);width:100%;text-align:left;color:var(--encre);font-weight:800;font-size:1.05rem}
.profil-item:active{transform:scale(.98)}
.profil-item .pa{width:40px;height:40px;border-radius:50%;background:var(--fond);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:none}

/* ---------- Bouton quiz mixte sur l'accueil ---------- */
.btn-defi{width:100%;background:linear-gradient(135deg,#FF7EB3,#FF758C);color:#fff;border-radius:20px;padding:18px;font-family:'Baloo 2';font-weight:800;font-size:1.15rem;box-shadow:0 4px 0 #D64D6B;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.btn-defi:active{transform:translateY(3px);box-shadow:none}
.btn-defi small{display:block;font-size:.72rem;font-weight:700;opacity:.9}

/* ---------- Menu profil (déconnexion) ---------- */
.menu-prof{position:fixed;inset:0;background:rgba(27,37,89,.4);display:none;align-items:flex-end;justify-content:center;z-index:50}
.menu-prof.on{display:flex}
.menu-prof .sheet{background:#fff;border-radius:22px 22px 0 0;padding:20px;width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px}
.menu-prof .sheet h3{text-align:center;font-size:1.2rem}

/* ---------- Série de jours + révision (v1.1) ---------- */
.stats{flex-wrap:wrap;justify-content:flex-end}
.pill{padding:4px 10px}
.btn-revision{width:100%;background:linear-gradient(135deg,#3AD1B0,#22A98F);color:#fff;border-radius:20px;padding:18px;font-family:'Baloo 2';font-weight:800;font-size:1.15rem;box-shadow:0 4px 0 #17806c;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.btn-revision:active{transform:translateY(3px);box-shadow:none}
.btn-revision small{display:block;font-size:.72rem;font-weight:700;opacity:.9}

/* ============ v1.2 : modes de production + motivation ============ */
/* Objectif du jour */
.daily-card{background:var(--carte);border-radius:18px;padding:14px 16px;box-shadow:0 3px 0 rgba(27,37,89,.1);margin-bottom:2px}
.daily-top{display:flex;justify-content:space-between;font-weight:800;font-size:.9rem;margin-bottom:8px}
.daily-bar{height:12px;background:#D9DFFB;border-radius:999px;overflow:hidden}
.daily-bar i{display:block;height:100%;background:linear-gradient(90deg,#FFC53D,#2FB673);border-radius:999px;transition:width .4s}
/* Badges */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;background:var(--carte);border-radius:18px;padding:12px;box-shadow:0 3px 0 rgba(27,37,89,.1)}
.badge{font-size:1.6rem}
/* Grille de pratique */
.prat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.btn-prat{border-radius:18px;padding:14px 10px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.btn-prat:active{transform:translateY(3px);box-shadow:none}
.btn-prat .bp-e{font-size:1.7rem}
.btn-prat .bp-t{font-family:'Baloo 2';font-weight:800;font-size:1rem}
.btn-prat .bp-s{font-size:.7rem;font-weight:700;opacity:.9}
.btn-prat.p1{background:#F4785A}.btn-prat.p2{background:#7C5CFF}.btn-prat.p3{background:#2FB673}.btn-prat.p4{background:#E63976}
/* Dictée */
.dictee-wrap{width:100%}
.dictee-hint{text-align:center;font-weight:800;font-size:1.1rem;margin-bottom:12px}
.dictee-in{width:100%;border:2.5px solid #D9DFFB;border-radius:16px;padding:16px;font-family:inherit;font-weight:800;font-size:1.2rem;text-align:center;color:var(--encre);background:#F7F9FF;margin-bottom:12px}
.dictee-in:focus{outline:none;border-color:var(--bleu)}
/* Construction de phrase */
.phrase-ans{min-height:56px;background:#F7F9FF;border:2.5px dashed #C7D0F5;border-radius:16px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;margin-bottom:12px}
.phrase-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{background:var(--carte);border:2.5px solid #D9DFFB;border-radius:12px;padding:10px 14px;font-weight:800;font-size:1.05rem;color:var(--encre);box-shadow:0 3px 0 rgba(27,37,89,.1)}
.chip:active{transform:translateY(2px)}
.chip-sel{background:#E7ECFF;border-color:var(--bleu)}
/* Prononciation */
.kiejtes-wrap{width:100%;text-align:center}
.kiejtes-etat{font-weight:800;opacity:.75;margin:10px 0}
.btn-mic{width:100%;background:var(--rouge);color:#fff;border-radius:16px;padding:18px;font-family:'Baloo 2';font-weight:800;font-size:1.15rem;box-shadow:0 4px 0 #b02a35}
.btn-mic:active{transform:translateY(3px);box-shadow:none}
.btn-mic:disabled{opacity:.5}
/* Confettis */
.fk-confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.fk-confetti i{position:absolute;top:-16px;width:11px;height:11px;border-radius:2px;animation:fk-fall 1.5s linear forwards}
@keyframes fk-fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){.fk-confetti{display:none}}
/* Toast */
.fk-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--encre);color:#fff;font-weight:800;padding:12px 20px;border-radius:999px;z-index:70;opacity:0;transition:.3s;max-width:90%;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.fk-toast.on{opacity:1;transform:translate(-50%,0)}
/* Bouton vitesse dans le menu */
.menu-prof .sheet .btn-lien.vit{color:var(--encre);text-decoration:none;font-weight:800;background:#F2F4FF;border-radius:14px;padding:12px}