:root {
  --bg: #f7f5ef;
  --card: #ffffff;
  --text: #18302c;
  --muted: #6a7a76;
  --primary: #136f63;
  --primary-soft: #dff1ec;
  --accent: #f3b44d;
  --border: #dfe7e4;
  --danger: #b42318;
  --new: #e9eefc;
  --new-text: #39558f;
  --learning: #fff1cc;
  --learning-text: #76520b;
  --mastered: #ddf3e7;
  --mastered-text: #22633e;
  --radius: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 460px); min-height: 100vh; margin: 0 auto; padding: 24px 18px 40px; }
.brand { text-align: center; margin: 24px 0 32px; }
.brand h1 { margin: 0; font-size: 64px; letter-spacing: -3px; }
.brand p { color: var(--muted); margin: 4px 0 0; }
.nav-stack { display: grid; gap: 12px; }
.nav-card { width: 100%; display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: var(--radius); padding: 18px; text-align: left; box-shadow: 0 6px 20px rgba(15, 45, 39, .06); }
.nav-card.active { background: var(--primary); color: white; border-color: var(--primary); }
.nav-card.disabled { opacity: .58; cursor: default; }
.nav-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.15); font-size: 24px; flex: none; }
.nav-card:not(.active) .nav-icon { background: var(--primary-soft); }
.nav-title { font-size: 18px; font-weight: 800; }
.nav-sub { margin-top: 2px; font-size: 13px; opacity: .78; }
.nav-badge { margin-left: auto; font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.06); }
.header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.back { border: 0; background: transparent; padding: 6px 0; color: var(--muted); font-weight: 700; }
h2 { font-size: 30px; margin: 6px 0 4px; letter-spacing: -1px; }
.muted { color: var(--muted); }
.song-card, .word-card, .quiz-card, .summary-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(15,45,39,.05); }
.song-card { padding: 18px; margin-top: 22px; }
.song-card button { width: 100%; border: 0; background: transparent; text-align: left; padding: 0; color: inherit; }
.progress-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; }
.progress-track { height: 8px; background: #e7eeeb; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-bar { height: 100%; background: var(--primary); width: 0; transition: width .2s ease; }
.toolbar { display: flex; gap: 10px; margin: 18px 0; }
.btn { border: 0; border-radius: 14px; min-height: 48px; padding: 0 16px; font-weight: 800; }
.btn.primary { background: var(--primary); color: white; flex: 1; }
.btn.secondary { background: var(--primary-soft); color: var(--primary); }
.btn.danger { background: #fee4e2; color: var(--danger); }
.words { display: grid; gap: 10px; }
.word-card { padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.word-en { font-weight: 900; font-size: 17px; }
.word-fr { color: var(--muted); margin-top: 2px; }
.status { display: inline-block; margin-top: 8px; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 800; }
.status.nouveau { background: var(--new); color: var(--new-text); }
.status.en-cours { background: var(--learning); color: var(--learning-text); }
.status.maitrise { background: var(--mastered); color: var(--mastered-text); }
.word-actions { display: flex; flex-direction: column; gap: 6px; }
.icon-btn { width: 38px; height: 38px; border: 0; border-radius: 12px; background: #f1f4f3; }
.quiz-top { margin: 10px 0 18px; }
.quiz-counter { font-weight: 900; color: var(--primary); }
.quiz-card { padding: 28px 20px; text-align: center; margin-top: 26px; }
.quiz-index { color: var(--muted); text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.quiz-word { font-size: 42px; font-weight: 900; margin: 28px 0 10px; letter-spacing: -1px; }
.quiz-answer { font-size: 24px; color: var(--primary); font-weight: 900; margin-top: 22px; }
.quiz-controls { display: grid; gap: 10px; margin-top: 20px; }
.quiz-controls.two { grid-template-columns: 1fr 1fr; }
.full { width: 100%; }
.answer-input { width: 100%; height: 48px; margin-top: 18px; border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; text-align: center; background: #fbfcfb; }
.summary-card { padding: 24px; margin-top: 40px; text-align: center; }
.summary-score { font-size: 42px; font-weight: 900; color: var(--primary); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(10,25,22,.45); display: grid; place-items: end center; padding: 14px; z-index: 20; }
.modal { width: min(100%, 460px); background: white; border-radius: 24px; padding: 20px; }
.modal h3 { margin: 0 0 14px; font-size: 22px; }
.field { display: grid; gap: 6px; margin-top: 12px; }
.field label { font-size: 13px; font-weight: 800; }
.field input, .field select { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; background: white; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.note { margin-top: 24px; font-size: 12px; color: var(--muted); text-align: center; }
@media (min-width: 700px) { .app-shell { padding-top: 36px; } }

/* Profil et points — v0.2 */
.profile-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; }
.profile-head h2 { margin: 0 0 2px; }
.profile-head p { margin: 0; }
.avatar { width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 20px; background: var(--primary); color: white; font-size: 28px; font-weight: 900; box-shadow: 0 6px 20px rgba(15,45,39,.10); }
.profile-card, .points-progress { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(15,45,39,.05); padding: 18px; }
.profile-save { margin-top: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat-card { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 8px; text-align: center; }
.stat-number { display: block; color: var(--primary); font-size: 24px; font-weight: 900; }
.stat-label { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.25; font-weight: 700; }
.note.left { text-align: left; margin-bottom: 0; }
.word-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.word-meta .status { margin-top: 0; }
.points-badge { display: inline-block; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 900; background: var(--primary-soft); color: var(--primary); }
.points-earned { display: inline-block; margin: 4px 0 8px; padding: 7px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.field-help { color: var(--muted); font-size: 11px; line-height: 1.35; }

/* Ceintures et répétition espacée — v0.3 */
.belt { display:inline-block; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:900; border:1px solid rgba(0,0,0,.09); }
.belt-white { background:#fff; color:#3e4a47; }
.belt-yellow { background:#f9dc55; color:#604b00; }
.belt-orange { background:#f4a340; color:#603300; }
.belt-green { background:#4e9c68; color:#fff; }
.belt-blue { background:#3978bd; color:#fff; }
.belt-brown { background:#765038; color:#fff; }
.belt-black { background:#1f2423; color:#fff; }
.word-locked { opacity:.74; }
.review-date { margin-top:8px; color:var(--muted); font-size:12px; font-weight:800; }
.availability-line { display:flex; justify-content:space-between; gap:10px; margin-top:10px; color:var(--muted); font-size:12px; font-weight:800; }
.next-review { margin:18px 0 2px; padding:12px; border-radius:14px; background:var(--primary-soft); color:var(--primary); }
.big-emoji { font-size:44px; margin-bottom:8px; }

/* Base de chansons et recherche — v0.4 */
.song-search-card { margin-top: 20px; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(15,45,39,.05); }
.song-search-card .field:first-child { margin-top: 0; }
.search-results, .recent-songs { margin-top: 24px; }
.search-results h3, .recent-songs h3 { margin: 0; font-size: 18px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-title-row > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.song-results { display: grid; gap: 10px; }
.song-result { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 16px; padding: 14px 14px 18px; text-align: left; box-shadow: 0 4px 14px rgba(15,45,39,.04); overflow: hidden; }
.song-result:active { transform: scale(.99); }
.song-result-main { min-width: 0; display: grid; gap: 3px; }
.song-result-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.song-result-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.song-result-side { color: var(--muted); font-size: 11px; font-weight: 800; text-align: right; white-space: nowrap; }
.song-result-arrow { color: var(--primary); font-size: 26px; line-height: 1; }
.song-result-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #e7eeeb; }
.song-result-progress > span { display: block; height: 100%; background: var(--primary); }
.empty-state { margin: 10px 0 0; padding: 16px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.45); font-size: 13px; line-height: 1.45; }

/* Deux niveaux par chanson — v0.5 */
.level-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 14px; }
.level-card { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 16px; padding: 12px; text-align: left; box-shadow: 0 4px 14px rgba(15,45,39,.04); }
.level-card.selected { border-color: var(--primary); background: var(--primary-soft); }
.level-card > span:last-child { min-width: 0; display: grid; gap: 2px; }
.level-card strong { font-size: 14px; line-height: 1.2; }
.level-card small { color: var(--muted); font-size: 11px; }
.level-number { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #eef3f1; color: var(--primary); font-weight: 900; }
.level-card.selected .level-number { background: var(--primary); color: white; }
.level-heading { margin: 6px 0 2px; color: var(--primary); font-size: 13px; }
.level-chip { display: inline-block; margin: 8px 0 12px; padding: 6px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 900; }
@media (max-width: 360px) { .level-switch { grid-template-columns: 1fr; } }

/* v0.8 — comparaison de réponse */
.answer-review { display: grid; gap: 14px; text-align: left; }
.answer-block { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #fbfcfb; }
.answer-label { margin-bottom: 5px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.review-english { font-size: 28px; font-weight: 900; letter-spacing: -.5px; color: var(--text); }
.review-user { font-size: 20px; font-weight: 750; color: var(--text); overflow-wrap: anywhere; }
.correct-answer-block { border-color: rgba(27,111,91,.28); background: rgba(27,111,91,.055); }
.review-correct { font-size: 22px; font-weight: 900; color: var(--primary); overflow-wrap: anywhere; }

/* v0.9 — cycle purge + jeu des paires */
.learning-cycle-card {
  display: grid;
  gap: 6px;
  margin: 16px 0 2px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 13px;
}
.learning-cycle-card strong { color: var(--primary); margin-bottom: 2px; }
.phase-pill {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}
.phase-pill.no-points { background: #f1f3f2; color: var(--muted); }
.matching-progress {
  margin: 14px 0 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}
.pair-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.pair-column {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
}
.pair-heading {
  padding: 0 4px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pair-choice {
  width: 100%;
  min-height: 62px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 14px rgba(15,45,39,.04);
}
.pair-choice.selected {
  border: 2px solid var(--primary);
  background: var(--primary-soft);
}
.pair-choice.matched {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  opacity: .78;
}
.pair-choice.wrong {
  border: 2px solid #b45309;
  background: #fff7ed;
}
.pair-complete {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--primary-soft);
  text-align: center;
  color: var(--primary);
}
@media (max-width: 360px) {
  .pair-grid { gap: 7px; }
  .pair-choice { min-height: 68px; padding: 8px 6px; font-size: 12px; }
}

/* VOCA v0.11 — search pages */
.static-result {
  cursor: default;
  text-align: left;
}


/* VOCA SCHOOL v0.18 */
.school-class-grid,.school-menu{display:grid;gap:12px;margin:18px 0}.school-class,.school-item{width:100%;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:18px;text-align:left;color:inherit}.school-class.active,.school-item{cursor:pointer}.school-class strong{font-size:1.35rem;display:block}.school-class span{display:block;color:var(--muted);margin-top:4px}.school-class b{display:block;margin-top:12px;color:var(--accent)}.school-class.disabled{opacity:.45}.school-item{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:12px}.school-item strong{display:block}.school-item small{display:block;color:var(--muted);margin-top:5px;line-height:1.35}.school-item-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--soft);font-weight:800;font-size:1.15rem}.lesson-kicker{font-size:.78rem;font-weight:800;letter-spacing:.12em;color:var(--accent);margin-top:12px}.lesson-rules{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:16px 0}.lesson-rules h3{margin-top:0}.lesson-rules p{font-size:.93rem;line-height:1.5;margin:10px 0}.lesson-actions{margin:16px 0}.lesson-question-type{text-transform:uppercase;font-size:.75rem;font-weight:800;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}.school-choices{display:grid;gap:10px;margin-top:18px}.school-choice{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px;text-align:left;color:inherit;font-weight:700}.school-choice.selected{outline:2px solid var(--accent);border-color:transparent}.lesson-feedback{margin-top:18px;border-radius:14px;padding:14px;display:grid;gap:6px}.lesson-feedback.correct{background:rgba(47,158,68,.12)}.lesson-feedback.wrong{background:rgba(224,49,49,.12)}.lesson-feedback small{color:var(--muted)}

.drive-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:16px 0}
.drive-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.drive-card-head h3{margin:0 0 4px}
.drive-status{font-size:.78rem;font-weight:800;border-radius:999px;padding:7px 10px;background:var(--soft);white-space:nowrap}
.drive-status.ok{background:rgba(47,158,68,.12)}
.drive-status.error{background:rgba(224,49,49,.12)}
.drive-actions{display:flex;gap:10px;margin-top:14px}
.drive-actions .btn{flex:1}
.drive-last{font-size:.88rem;color:var(--muted);margin:12px 0 0}
.drive-warning{font-size:.9rem;line-height:1.45;background:rgba(224,49,49,.08);border-radius:12px;padding:12px;margin:12px 0}
@media(max-width:520px){.drive-card-head{display:grid}.drive-actions{display:grid}.drive-status{justify-self:start}}

.migration-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:16px 0}
.migration-card-head h3{margin:0 0 4px}
.migration-file-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.migration-file-label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-top:12px;cursor:pointer}
.migration-status{font-size:.9rem;font-weight:700;margin-top:12px;min-height:1.2em}
.migration-status.ok{color:#2f9e44}
.migration-status.error{color:#e03131}

.version-badge{font-size:.78rem;font-weight:800;padding:6px 9px;border-radius:999px;background:var(--soft);color:var(--muted)}

.pwa-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:16px 0}
.pwa-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.pwa-card-head h3{margin:0 0 4px}
.pwa-status{font-size:.78rem;font-weight:800;border-radius:999px;padding:7px 10px;background:var(--soft);white-space:nowrap}
.pwa-installed{padding:13px;border-radius:14px;background:rgba(47,158,68,.12);font-weight:800;text-align:center}
@media(max-width:520px){
  html{font-size:16px}
  body{min-height:100dvh}
  .app-shell{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(18px,env(safe-area-inset-bottom))}
  button,.btn,input{min-height:48px}
  .quiz-word{font-size:clamp(2rem,10vw,3.4rem)}
  .pwa-card-head{display:grid}
  .pwa-status{justify-self:start}
}
@media(display-mode:standalone){
  body{overscroll-behavior-y:none}
}

.school-reward-rule{display:inline-block;margin:4px 0 14px;padding:8px 11px;border-radius:999px;background:var(--soft);font-weight:800;font-size:.88rem}