/* ============================================================
   FRANÇAIS + CODE — feuille de style
   ============================================================ */
:root{
  --ink:#101219; --panel:#191c26; --panel2:#212533; --line:#2e3345;
  --text:#eceae5; --dim:#98a0b4; --faint:#666e84;
  --accent:#e2583f; --accent-soft:#3a2320;
  --blue:#5b8ce0; --blue-soft:#1c2740;
  --good:#33b57c; --good-soft:#12291f;
  --bad:#e05a5a; --bad-soft:#2e1a1c;
  --gold:#d9a441;
  --r:14px; --rs:9px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="light"]{
  --ink:#f6f4ef; --panel:#ffffff; --panel2:#f0eee8; --line:#dcd8ce;
  --text:#1c1e26; --dim:#5f6675; --faint:#8b91a0;
  --accent:#c9412a; --accent-soft:#fbe9e5;
  --blue:#2b5fc0; --blue-soft:#e6edfb;
  --good:#1c8a5a; --good-soft:#e2f5ec;
  --bad:#c0392b; --bad-soft:#fbe6e3;
  --shadow:0 6px 24px rgba(30,25,15,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
  padding-bottom:84px;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.2; margin:0 0 .4em}
h1{font-size:1.75rem} h2{font-size:1.3rem} h3{font-size:1.05rem}
a{color:var(--blue)}
button{font-family:inherit; font-size:1rem; cursor:pointer}
input,textarea,select{font-family:inherit; font-size:1rem}

/* ---------- structure ---------- */
.wrap{max-width:780px; margin:0 auto; padding:0 16px}
header.top{
  position:sticky; top:0; z-index:40; background:rgba(16,18,25,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
[data-theme="light"] header.top{background:rgba(246,244,239,.93)}
.top-in{display:flex; align-items:center; gap:12px; padding:10px 16px; max-width:780px; margin:0 auto}
.brand{font-family:var(--serif); font-size:1.05rem; font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--text); display:flex; align-items:center; gap:9px; min-width:0; overflow:hidden; white-space:nowrap}
.flag{width:20px; height:14px; border-radius:2px; overflow:hidden; display:inline-flex; box-shadow:0 0 0 1px var(--line)}
.flag i{flex:1} .flag i:nth-child(1){background:#2a4fa8} .flag i:nth-child(2){background:#f2f0ea} .flag i:nth-child(3){background:#cf2b2b}
.top-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.streak{font-size:.8rem; color:var(--dim); background:var(--panel2); border:1px solid var(--line); padding:4px 9px; border-radius:99px; white-space:nowrap}
.streak b{color:var(--gold)}
.icon-btn{background:var(--panel2); border:1px solid var(--line); color:var(--dim); width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:.95rem}
.icon-btn:hover{color:var(--text); border-color:var(--faint)}

main{padding:20px 0 10px}
.page-head{margin-bottom:16px}
.page-head p{color:var(--dim); margin:.2em 0 0; font-size:.94rem}
.kicker{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:6px}

/* ---------- barre de navigation basse ---------- */
nav.tabs{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:var(--panel); border-top:1px solid var(--line);
  display:flex; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
nav.tabs a{
  flex:1; text-align:center; text-decoration:none; color:var(--faint);
  font-size:.66rem; padding:5px 2px; border-radius:10px; letter-spacing:.02em;
}
nav.tabs a span{display:block; font-size:1.25rem; line-height:1.25; margin-bottom:1px; filter:grayscale(1) opacity(.65)}
nav.tabs a.on{color:var(--text); background:var(--panel2)}
nav.tabs a.on span{filter:none}

/* ---------- cartes ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px}
.card.tight{padding:13px}
.grid{display:grid; gap:12px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.tile{
  display:block; text-decoration:none; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); padding:15px; transition:.15s;
  position:relative; overflow:hidden;
}
.tile:hover{border-color:var(--accent); transform:translateY(-1px)}
.tile .ic{font-size:1.5rem; display:block; margin-bottom:7px}
.tile b{display:block; font-family:var(--serif); font-size:1.05rem; font-weight:600}
.tile small{color:var(--dim); display:block; margin-top:3px; line-height:1.4}
.tile .badge{position:absolute; top:11px; right:11px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:700; padding:2px 7px; border-radius:99px}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  padding:11px 16px; border-radius:var(--rs); text-decoration:none; font-weight:600; font-size:.95rem;
  transition:.13s;
}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.sm{padding:7px 12px; font-size:.85rem}
.btn:disabled{opacity:.45; cursor:default}
.btn-row{display:flex; gap:9px; flex-wrap:wrap}

.chip{
  background:var(--panel2); border:1px solid var(--line); color:var(--dim);
  padding:6px 12px; border-radius:99px; font-size:.85rem; cursor:pointer; transition:.13s; user-select:none;
}
.chip.on{background:var(--blue-soft); border-color:var(--blue); color:var(--text)}
.chip-row{display:flex; gap:7px; flex-wrap:wrap; margin:9px 0}

/* ---------- exercice ---------- */
.progress{height:5px; background:var(--panel2); border-radius:99px; overflow:hidden; margin-bottom:16px}
.progress i{display:block; height:100%; background:var(--accent); transition:width .3s}
.qmeta{display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--faint); margin-bottom:12px; flex-wrap:wrap}
.qmeta .tag{background:var(--panel2); border:1px solid var(--line); padding:3px 9px; border-radius:99px; color:var(--dim)}
.qmeta .tag.hot{border-color:var(--accent); color:var(--accent)}

.prompt{font-family:var(--serif); font-size:1.4rem; line-height:1.4; margin:0 0 4px}
.prompt em{color:var(--accent); font-style:normal; font-weight:700}
.prompt .blank{color:var(--accent); letter-spacing:1px}
.sub{color:var(--dim); font-size:.92rem; margin:0 0 14px}

.answer-in{
  width:100%; background:var(--panel2); border:2px solid var(--line); color:var(--text);
  padding:14px; border-radius:var(--rs); font-size:1.18rem; font-family:var(--serif); outline:none;
}
.answer-in:focus{border-color:var(--blue)}
.answer-in.ok{border-color:var(--good)} .answer-in.no{border-color:var(--bad)}

.opts{display:grid; gap:9px; margin:6px 0 4px}
.opt{
  text-align:left; background:var(--panel2); border:2px solid var(--line); color:var(--text);
  padding:13px 15px; border-radius:var(--rs); display:flex; gap:11px; align-items:flex-start; transition:.12s;
}
.opt:hover:not(:disabled){border-color:var(--faint)}
.opt .k{
  flex:none; width:23px; height:23px; border-radius:6px; background:var(--panel); border:1px solid var(--line);
  display:grid; place-items:center; font-size:.75rem; font-weight:700; color:var(--dim); margin-top:1px;
}
.opt.sel{border-color:var(--blue)} .opt.sel .k{background:var(--blue); color:#fff; border-color:var(--blue)}
.opt.ok{border-color:var(--good); background:var(--good-soft)} .opt.ok .k{background:var(--good); color:#fff; border-color:var(--good)}
.opt.no{border-color:var(--bad); background:var(--bad-soft)} .opt.no .k{background:var(--bad); color:#fff; border-color:var(--bad)}

.verdict{border-radius:var(--rs); padding:13px 15px; margin-top:14px; border:1px solid var(--line); animation:pop .18s ease-out}
.verdict.ok{background:var(--good-soft); border-color:var(--good)}
.verdict.no{background:var(--bad-soft); border-color:var(--bad)}
.verdict.warn{background:var(--accent-soft); border-color:var(--gold)}
.verdict .vtitle{font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:5px}
.verdict .good-answer{font-family:var(--serif); font-size:1.2rem; margin:5px 0}
.verdict .why{color:var(--dim); font-size:.92rem; line-height:1.5}
.verdict .why b{color:var(--text)}
@keyframes pop{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}

.speak-btn{background:none; border:none; color:var(--blue); font-size:1.15rem; padding:2px 6px; border-radius:6px}
.speak-btn:hover{background:var(--blue-soft)}

/* ---------- tables de conjugaison ---------- */
.conj-table{width:100%; border-collapse:collapse; font-size:.96rem}
.conj-table td{padding:7px 9px; border-bottom:1px solid var(--line)}
.conj-table td:first-child{color:var(--faint); width:40%; font-size:.86rem}
.conj-table tr:last-child td{border-bottom:none}
.conj-table b{color:var(--accent); font-weight:600}

/* ---------- panneaux du code ---------- */
.sign-box{display:flex; justify-content:center; margin:4px 0 16px}
.sign-svg{width:132px; height:132px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.sign-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px}
.sign-cell{background:var(--panel); border:1px solid var(--line); border-radius:var(--rs); padding:10px; text-align:center}
.sign-cell .sign-svg{width:66px; height:66px; margin-bottom:5px}
.sign-cell small{display:block; color:var(--dim); font-size:.72rem; line-height:1.3}

/* ---------- dialogues ---------- */
.line{display:flex; gap:10px; margin-bottom:11px; align-items:flex-start}
.line .who{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:700; background:var(--panel2); border:1px solid var(--line); color:var(--dim)}
.line.moi .who{background:var(--accent); color:#fff; border-color:var(--accent)}
.line .bubble{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:9px 13px; flex:1}
.line.moi .bubble{background:var(--accent-soft); border-color:#4a2e29}
[data-theme="light"] .line.moi .bubble{border-color:#f0cdc5}
.line .bubble .fr{font-size:1.02rem}
.line .bubble .en{color:var(--faint); font-size:.85rem; margin-top:2px; display:none}
.line .bubble.show-en .en{display:block}
.line .bubble .note{margin-top:6px; font-size:.82rem; color:var(--gold); border-left:2px solid var(--gold); padding-left:8px}

/* ---------- statistiques ---------- */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:10px}
.stat{background:var(--panel2); border:1px solid var(--line); border-radius:var(--rs); padding:11px; text-align:center}
.stat b{display:block; font-family:var(--serif); font-size:1.5rem; line-height:1.1; color:var(--text)}
.stat small{color:var(--faint); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase}
.bars{display:flex; align-items:flex-end; gap:4px; height:64px; margin:12px 0 4px}
.bars .b{flex:1; background:var(--panel2); border-radius:3px 3px 0 0; position:relative; min-height:3px}
.bars .b i{position:absolute; bottom:0; left:0; right:0; background:var(--accent); border-radius:3px 3px 0 0}
.bars-x{display:flex; justify-content:space-between; font-size:.68rem; color:var(--faint)}

.err-item{border-left:3px solid var(--bad); padding:7px 0 7px 11px; margin-bottom:10px}
.err-item .q{font-size:.9rem; color:var(--dim)}
.err-item .a{font-family:var(--serif); font-size:1.02rem}

.note-box{background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--gold); padding:11px 13px; border-radius:0 var(--rs) var(--rs) 0; font-size:.88rem; color:var(--dim)}
.note-box b{color:var(--text)}

.result-big{text-align:center; padding:22px 0}
.result-big .score{font-family:var(--serif); font-size:3.4rem; line-height:1; margin-bottom:5px}
.result-big .score.pass{color:var(--good)} .result-big .score.fail{color:var(--bad)}
.result-big p{color:var(--dim); margin:4px 0 0}

.timer{font-family:var(--serif); font-size:1.5rem; color:var(--gold); font-variant-numeric:tabular-nums}
.hidden{display:none !important}
.muted{color:var(--dim)}
.small{font-size:.86rem}
.center{text-align:center}
hr.sep{border:none; border-top:1px solid var(--line); margin:16px 0}
.mic-live{color:var(--accent); font-weight:600}
.spacer{height:8px}
kbd{background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 6px; font-size:.78rem; font-family:var(--sans); color:var(--dim)}

/* ---------- histoire ---------- */
.story-tile{
  background:linear-gradient(145deg,var(--panel2),var(--panel));
  border-color:var(--gold);
}
.story-tile .badge{background:var(--gold); color:#1b1710}
.story-tile b{font-size:1.35rem; letter-spacing:.2px}
.story-tile small{margin-top:5px}

.card.ep{padding:14px}
.card.ep.locked{opacity:.5}
.ep-head{display:flex; gap:12px; align-items:flex-start}
.ep-num{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel2); border:1px solid var(--line); color:var(--dim);
  font-family:var(--serif); font-weight:700; font-size:.95rem;
}
.card.ep b{font-family:var(--serif); font-size:1.06rem}
.ep-flag{font-size:.7rem; color:var(--faint); align-self:center; white-space:nowrap}
.ep-flag.done{color:var(--good); border:1px solid var(--good); border-radius:99px; padding:2px 8px}

.scene{margin-bottom:15px; padding-left:12px; border-left:2px solid var(--line); transition:.2s}
.scene.reading{border-left-color:var(--accent); background:var(--panel2); border-radius:0 8px 8px 0}
.scene-fr{font-family:var(--serif); font-size:1.14rem; line-height:1.6; margin:0}
.scene-en{color:var(--faint); font-size:.88rem; margin:5px 0 0; display:none}
#view.show-en .scene-en{display:block}
.note-inline{
  margin:7px 0 0; font-size:.82rem; color:var(--gold);
  background:var(--panel2); border-radius:6px; padding:6px 9px;
}
.chosen{font-family:var(--serif); font-size:1.1rem; color:var(--accent); margin:2px 0 10px}
.suite{
  border-left:3px solid var(--accent); background:var(--panel2);
  padding:11px 14px; border-radius:0 var(--rs) var(--rs) 0;
}
.suite p{margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.6}

/* ---------- petits écrans ---------- */
@media (max-width:430px){
  .top-in{padding:9px 12px; gap:8px}
  .brand{font-size:.95rem}
  .streak{font-size:.72rem; padding:3px 8px}
  .icon-btn{width:31px; height:31px; font-size:.85rem}
  .wrap{padding:0 12px}
  .card{padding:14px}
  .prompt{font-size:1.28rem}
  h1{font-size:1.5rem}
}
@media (max-width:340px){
  .brand .brand-txt{display:none}
}

/* ---------- glose anglaise ---------- */
.gloss{display:block; color:var(--faint); font-size:.8rem; font-style:italic; margin-top:1px}
.gloss-line{
  color:var(--blue); font-size:.95rem; font-style:italic; margin:2px 0 8px;
  padding-left:10px; border-left:2px solid var(--blue);
}
.why-en{
  margin-top:7px; padding-top:7px; border-top:1px dashed var(--line);
  font-style:italic; color:var(--faint);
}

/* ---------- liste des modèles ---------- */
.model-list{display:flex; flex-direction:column}
.model-row{
  display:flex; align-items:center; gap:11px; padding:9px 4px; text-decoration:none;
  color:inherit; border-bottom:1px solid var(--line);
}
.model-row:last-child{border-bottom:none}
.model-row:hover{background:var(--panel2); border-radius:7px}
.model-n{
  flex:none; width:28px; height:28px; border-radius:7px; background:var(--panel2);
  border:1px solid var(--line); display:grid; place-items:center;
  font-size:.78rem; font-weight:700; color:var(--dim);
}
.model-t{flex:1; min-width:0}
.model-t b{display:block; font-family:var(--serif); font-size:1rem}
.model-t small{display:block; color:var(--faint); font-size:.78rem}
.model-c{flex:none; color:var(--faint); font-size:.78rem}