@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400&display=swap');

:root{
  --bg:#101418; --surface:#1A2027; --surface2:#222A33; --line:#2C3640;
  --text:#EDF1F4; --muted:#8A97A3;
  --gold:#E0B84C;
  --encore:#E5484D; --difficile:#7A8A93; --correct:#46A758; --facile:#3E8DE3;
  --near:#D8A03C;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; align-items:center;
  padding:0 1rem calc(1rem + env(safe-area-inset-bottom));
}
.wrap{width:100%;max-width:34rem;display:flex;flex-direction:column;flex:1}

header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0 .6rem;gap:.6rem}
.brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em;white-space:nowrap}
.brand em{color:var(--gold);font-style:normal}
.hbtns{display:flex;gap:.5rem;align-items:center;min-width:0}
.useremail{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11rem}
.authed-only{visibility:hidden}
body.authed .authed-only{visibility:visible}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn{
  background:var(--surface); border:1px solid var(--line); border-radius:.65rem;
  padding:.65rem 1rem; font-size:.95rem; transition:background .15s;
}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--gold);color:#14110a;font-weight:600;border-color:var(--gold)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.small{padding:.4rem .7rem;font-size:.85rem}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--surface)}
.btn.danger{color:var(--encore)}

.screen{display:none;flex:1;flex-direction:column}
.screen.active{display:flex}
.label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.finehint{color:var(--muted);font-size:.8rem;text-align:center}

/* ---------- Connexion ---------- */
#login{justify-content:center;gap:1.4rem;text-align:center;padding-bottom:3rem}
#login h1{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:2rem;line-height:1.15}
#login h1 span{color:var(--gold)}
#login p.sub{color:var(--muted);font-size:.95rem;max-width:27rem;margin:0 auto;line-height:1.5}
.homebtns{display:flex;flex-direction:column;gap:.6rem;align-items:center}
.homebtns .btn{min-width:16rem}

/* ---------- Paquets ---------- */
#decks{gap:1rem;padding-top:.3rem}
.warnbox{
  display:none;background:#3a2020;border:1px solid var(--encore);border-radius:.65rem;
  padding:.8rem 1rem;font-size:.85rem;line-height:1.45;
}
.warnbox.show{display:block}
.newdeck{
  background:var(--surface);border:1px solid var(--line);border-radius:.9rem;
  padding:1rem;display:flex;flex-direction:column;gap:.7rem;
}
textarea{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:.6rem;padding:.7rem;
  font-family:inherit;font-size:.95rem;resize:vertical;min-height:4.5rem;
}
select{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:.5rem;padding:.55rem .6rem;font-size:.9rem}
.newdeckrow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.newdeckrow .btn{flex:1}
.listlabel{margin-top:.3rem}
#deckList{display:flex;flex-direction:column;gap:.6rem}

.deckcard{
  background:var(--surface);border:1px solid var(--line);border-radius:.9rem;
  padding: .9rem 1rem;display:flex;flex-direction:column;gap:.55rem;
}
.deckhead{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.deckname{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.05rem}
.deckmeta{font-size:.78rem;color:var(--muted)}
.deckbrief{font-size:.8rem;color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.deckbtns{display:flex;gap:.5rem;align-items:center}
.deckbtns .btn{flex:0 0 auto}
.chip{font-size:.72rem;padding:.15rem .55rem;border-radius:1rem;font-weight:600;white-space:nowrap}
.chip.generating{background:#3a3320;color:var(--gold)}
.chip.error{background:#3a2020;color:var(--encore)}
.spin{
  display:inline-block;width:.8rem;height:.8rem;border:2px solid var(--gold);
  border-top-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:.35rem;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.minibar{height:4px;background:var(--surface2);border-radius:2px;overflow:hidden}
.minibar div{height:100%;background:var(--correct)}

/* ---------- Étude ---------- */
#study{padding-top:.15rem}
.studytop{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.studydeckname{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progressbar{height:4px;background:var(--surface);border-radius:2px;overflow:hidden;margin-bottom:.4rem}
.progressbar div{height:100%;width:0;background:var(--gold);transition:width .3s}
.counter{font-size:.75rem;color:var(--muted);text-align:right;margin-bottom:1.1rem}
.prompt{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(1.7rem,6.5vw,2.4rem);line-height:1.2;text-align:center;
  margin:auto 0 1.2rem; padding-top:1.2rem;
}
.hint{color:var(--muted);font-size:.85rem;text-align:center;margin-bottom:1.4rem}

.miczone{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-bottom:auto;padding-bottom:2rem}
#micBtn{
  width:5.2rem;height:5.2rem;border-radius:50%;
  background:var(--surface2);border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;position:relative;transition:transform .15s;
}
#micBtn:active{transform:scale(.95)}
#micBtn.listening{background:var(--gold)}
#micBtn.listening::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid var(--gold);opacity:.6;animation:pulse 1.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion: reduce){
  #micBtn.listening::before,.spin{animation:none}
  *{transition:none !important}
}
.miclabel{font-size:.85rem;color:var(--muted)}
#interim{
  font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--gold);
  min-height:1.4rem;text-align:center;padding:0 .5rem;word-break:break-word;
}

/* ---------- Résultat ---------- */
#result{display:none;flex-direction:column;gap:1rem;margin-bottom:auto;padding-bottom:1rem}
#result.show{display:flex}
.scorehead{display:flex;align-items:baseline;justify-content:center;gap:.8rem}
.scorenum{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:3rem;line-height:1}
.gradepill{
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1rem;
  padding:.3rem .9rem;border-radius:2rem;color:#fff;
}
.gradepill.encore{background:var(--encore)} .gradepill.difficile{background:var(--difficile)}
.gradepill.correct{background:var(--correct)} .gradepill.facile{background:var(--facile)}

.verdict{
  background:var(--surface);border:1px solid var(--line);border-radius:.8rem;
  padding:1rem;display:flex;flex-direction:column;gap:.7rem;
}
.words{font-family:"Space Grotesk",sans-serif;font-size:1.3rem;font-weight:500;line-height:1.5;display:flex;flex-wrap:wrap;gap:.15rem .5rem;align-items:center}
.words .w.ok{color:var(--correct)}
.words .w.near{color:var(--near);border-bottom:2px dotted var(--near)}
.words .w.miss{color:var(--encore);border-bottom:2px solid var(--encore)}
.words .speak{font-size:1.1rem;margin-left:.2rem}
#heard{font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--muted);word-break:break-word}
#heard .extra{color:var(--near)}

.resbtns{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
#overrideBtn{color:var(--muted);font-size:.8rem;text-decoration:underline;text-underline-offset:3px}
#overrideBtn:hover{color:var(--text)}
#overrideBtn.done{color:var(--correct);text-decoration:none}

/* ---------- Fin ---------- */
#done{justify-content:center;text-align:center;gap:1.3rem}
#done h2{font-family:"Space Grotesk",sans-serif;font-size:1.7rem}
.recap{display:flex;justify-content:center;gap:1.2rem}
.recap div{font-size:.8rem;color:var(--muted)}
.recap b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.6rem}
.recap .r-encore b{color:var(--encore)} .recap .r-difficile b{color:var(--difficile)}
.recap .r-correct b{color:var(--correct)} .recap .r-facile b{color:var(--facile)}

.toast{
  position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  background:var(--surface2);border:1px solid var(--line);border-radius:.6rem;
  padding:.6rem 1rem;font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .25s;z-index:20;
  max-width:90vw;text-align:center;
}
.toast.show{opacity:1}