/* ============================================================
   Lingora — Styles (bleu / vert, thèmes clair & profond)
   ============================================================ */
:root {
  --bg:#EEF3F9; --surface:#FFFFFF; --surface2:#F4F8FB; --ink:#0E2A47;
  --muted:#5B7590; --primary:#1D6FE0; --primary-dark:#1657B8; --green:#12B981;
  --line:#E2EAF3; --danger:#E23D3D; --amber:#F59E0B; --violet:#8B5CF6;
}
[data-theme="profond"] {
  --bg:#0A1B30; --surface:#10273F; --surface2:#16324F; --ink:#EAF2FF;
  --muted:#93AEC9; --primary:#4A93FF; --primary-dark:#2F7BF0; --green:#2BD3A0; --line:#21405F;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Nunito",system-ui,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:"Baloo 2","Nunito",sans-serif; font-weight:700; line-height:1.15; }
a { color:var(--primary); text-decoration:none; } a:hover { color:var(--primary-dark); }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font-family:inherit; }
::selection { background:var(--primary); color:#fff; }
img { max-width:100%; }

@keyframes lg-pop { 0%{transform:scale(.92);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes lg-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes lg-wave { 0%,100%{height:18%} 50%{height:100%} }
@keyframes lg-spin { to { transform:rotate(360deg) } }

.spin { width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:lg-spin .8s linear infinite; }
.center { min-height:100vh;display:grid;place-items:center; }
.fade { animation:lg-fade .4s ease; }
.pop { animation:lg-pop .3s ease; }
.hidden { display:none !important; }

/* boutons génériques */
.btn { padding:14px 24px;border-radius:14px;font-weight:800;font-size:16px;transition:.15s; }
.btn-primary { background:var(--primary);color:#fff; } .btn-primary:hover { background:var(--primary-dark); }
.btn-ghost { background:var(--surface2);color:var(--ink);border:1px solid var(--line); }
.field { width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;background:var(--surface);color:var(--ink);outline:none; }
.field:focus { border-color:var(--primary); }
.card { background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 2px 10px rgba(16,42,80,.04); }

/* ---------- LOGIN ---------- */
.login { min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr; }
.login-hero { background:linear-gradient(150deg,var(--primary),#0E4FB0 55%,var(--green));color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden; }
.login-hero .blob { position:absolute;border-radius:50%;background:rgba(255,255,255,.08); }
.login-form { display:flex;align-items:center;justify-content:center;padding:40px; }
.brand { display:flex;align-items:center;gap:12px; }
.brand .logo { width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:26px; }
.brand .name { font-family:"Baloo 2";font-weight:800;font-size:26px; }
.gbtn { width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);font-weight:700;font-size:16px;color:var(--ink);box-shadow:0 2px 10px rgba(16,42,80,.05);transition:.15s; }
.gbtn:hover { border-color:var(--primary);transform:translateY(-1px); }
.sep { display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--muted);font-size:13px; }
.sep::before,.sep::after { content:"";flex:1;height:1px;background:var(--line); }
.err { color:var(--danger);font-size:13px;font-weight:700;margin:6px 0; }

/* ---------- ONBOARDING ---------- */
.onb { min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px; }
.onb-bar { width:100%;max-width:360px;height:8px;background:var(--line);border-radius:6px;margin:20px 0 34px;overflow:hidden; }
.onb-bar > div { height:100%;background:linear-gradient(90deg,var(--primary),var(--green));border-radius:6px;transition:width .4s; }
.onb-card { width:100%;max-width:640px;padding:40px;border-radius:24px; }
.choice { display:flex;align-items:center;gap:16px;padding:18px;border-radius:16px;border:2px solid var(--line);background:var(--surface2);text-align:left;width:100%;transition:.15s; }
.choice:hover { border-color:var(--primary); }
.choice.on { border-color:var(--primary);background:rgba(29,111,224,.06); }
.chip { display:flex;align-items:center;gap:6px;padding:11px 16px;border-radius:30px;font-weight:700;font-size:15px;border:2px solid var(--line);background:var(--surface2);color:var(--ink);transition:.15s; }
.chip.on { border-color:var(--primary);background:rgba(29,111,224,.08); }

/* ---------- APP SHELL ---------- */
.app { display:flex;min-height:100vh; }
.side { width:236px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh; }
.nav { display:flex;flex-direction:column;gap:4px;margin-top:8px; }
.nav button { display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-weight:700;font-size:15px;color:var(--muted);width:100%;text-align:left;transition:.15s; }
.nav button .i { font-size:19px; }
.nav button.on { background:var(--primary);color:#fff; }
.main { flex:1;overflow-y:auto;height:100vh;padding:34px 40px 60px; }
.avatar { border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff; }

.pill { display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px; }
.grid-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px; }

/* ---------- LESSON ---------- */
.lesson { min-height:100vh;display:flex;flex-direction:column;background:var(--bg); }
.lesson-head { display:flex;align-items:center;gap:16px;padding:18px 30px;background:var(--surface);border-bottom:1px solid var(--line); }
.lesson-bar { flex:1;height:14px;background:var(--line);border-radius:8px;overflow:hidden; }
.lesson-bar > div { height:100%;background:linear-gradient(90deg,var(--primary),var(--green));border-radius:8px;transition:width .35s; }
.lesson-body { flex:1;display:grid;place-items:center;padding:30px 20px; }
.opt { padding:18px 16px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:16px;text-align:center;transition:.12s; }
.opt.sel { background:rgba(29,111,224,.08);border-color:var(--primary); }
.opt.ok { background:rgba(18,185,129,.12);border-color:var(--green);color:var(--green); }
.opt.bad { background:rgba(226,61,61,.10);border-color:var(--danger);color:var(--danger); }
.opt.dim { color:var(--muted); }

/* ---------- ADMIN ---------- */
.admin { min-height:100vh;background:#0A1B30;color:#EAF2FF; }
.admin-head { display:flex;align-items:center;gap:14px;padding:18px 30px;background:#0E2A47;border-bottom:1px solid #1c3c5e;position:sticky;top:0;z-index:10; }
.acard { background:#10273F;border:1px solid #1c3c5e;border-radius:16px; }
.arow { display:grid;grid-template-columns:2fr 1fr 1.4fr .8fr 1.2fr 1.8fr;padding:14px 20px;align-items:center; }

/* ---------- modale ---------- */
.overlay { position:fixed;inset:0;background:rgba(8,20,38,.55);display:grid;place-items:center;z-index:60;padding:20px; }

/* ---------- responsive ---------- */
@media (max-width:860px) {
  .login { grid-template-columns:1fr; }
  .login-hero { display:none; }
  .app { flex-direction:column; }
  .side { width:100%;height:auto;position:sticky;bottom:0;top:auto;flex-direction:row;order:2;padding:8px;border-top:1px solid var(--line);border-right:none; }
  .side .brand, .side .userbox { display:none; }
  .nav { flex-direction:row;margin:0;width:100%;justify-content:space-around; }
  .nav button { flex-direction:column;gap:3px;font-size:11px;padding:8px 4px; }
  .nav button .i { font-size:22px; }
  .main { order:1;height:auto;padding:22px 16px 40px; }
  .two-col, .grid-2 { grid-template-columns:1fr !important; }
  .arow { grid-template-columns:1.4fr 1fr;gap:8px; }
  .arow .hide-m { display:none; }
}