:root{
  --navy:#0d1b2a;
  --navy-2:#14283c;
  --blue:#2477f3;
  --blue-soft:#eaf2ff;
  --gold:#ffb547;
  --green:#1f9d67;
  --red:#d64545;
  --ink:#182230;
  --muted:#667085;
  --line:#dce3eb;
  --bg:#f3f6fa;
  --white:#ffffff;
  --shadow:0 18px 50px rgba(13,27,42,.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
button,select,input{font:inherit}
button{cursor:pointer}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:250px;
  background:linear-gradient(180deg,var(--navy),#0a1520);
  color:#fff;
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  z-index:10;
}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px}
.brand-mark{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),#65a3ff);
  display:grid;place-items:center;font-weight:800;font-size:22px;
}
.brand strong,.brand span{display:block}
.brand span{font-size:12px;color:#9fb0c2;letter-spacing:.12em;margin-top:2px}
.sidebar nav{display:flex;flex-direction:column;gap:8px}
.nav-link{
  width:100%;border:0;background:transparent;color:#b7c4d0;
  text-align:left;padding:13px 14px;border-radius:10px;font-weight:650;
}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.09);color:#fff}
.sidebar-tip{
  margin-top:auto;padding:16px;border:1px solid rgba(255,255,255,.11);
  border-radius:14px;background:rgba(255,255,255,.05)
}
.sidebar-tip strong,.sidebar-tip span{display:block}
.sidebar-tip span{font-size:13px;color:#aebcca;margin-top:5px}
.main{margin-left:250px;padding:28px 34px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.topbar h1{margin:3px 0 0;font-size:30px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--blue);margin:0}
.top-actions{display:flex;align-items:center;gap:14px}
.profile-badge{
  width:42px;height:42px;border-radius:50%;background:var(--navy);
  color:#fff;display:grid;place-items:center;font-weight:800
}
.ghost-btn,.secondary-btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;padding:10px 14px;font-weight:700
}
.primary-btn{
  border:0;background:linear-gradient(135deg,var(--blue),#4f91ff);
  color:#fff;border-radius:10px;padding:11px 17px;font-weight:800;
  box-shadow:0 8px 20px rgba(36,119,243,.25)
}
.view{display:none}
.view.active{display:block}
.hero{
  background:linear-gradient(130deg,#0e2135,#173b5c);
  color:#fff;border-radius:22px;padding:34px;
  display:grid;grid-template-columns:1.5fr .65fr;gap:28px;
  box-shadow:var(--shadow);overflow:hidden
}
.hero h2{font-size:34px;line-height:1.12;margin:14px 0 12px;max-width:780px}
.hero p{color:#c8d7e5;max-width:700px;line-height:1.7}
.pill{display:inline-flex;background:rgba(255,255,255,.12);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}
.hero-actions{display:flex;gap:10px;margin-top:22px}
.hero-score{
  border:1px solid rgba(255,255,255,.13);border-radius:18px;
  padding:28px;background:rgba(255,255,255,.07);
  display:flex;flex-direction:column;justify-content:center
}
.hero-score span{color:#bdd0df}
.hero-score strong{font-size:54px;margin:8px 0}
.hero-score small{color:#a8bdcd}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0
}
.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;
  box-shadow:0 8px 25px rgba(13,27,42,.05)
}
.stat-card span{display:block;color:var(--muted);font-size:13px}
.stat-card strong{display:block;font-size:30px;margin-top:8px}
.stat-card.large{padding:24px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin:34px 0 14px}
.section-heading h3{margin:4px 0 0;font-size:24px}
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.topic-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;
  transition:.2s;cursor:pointer
}
.topic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.topic-icon{
  width:46px;height:46px;border-radius:12px;background:var(--blue-soft);
  display:grid;place-items:center;color:var(--blue);font-weight:900;margin-bottom:14px
}
.topic-card h4{margin:0 0 8px}
.topic-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.progress-bar{height:8px;background:#e9eef4;border-radius:999px;overflow:hidden;margin-top:15px}
.progress-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#6ca8ff)}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;
  box-shadow:0 8px 25px rgba(13,27,42,.05);margin-bottom:20px
}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.panel h2{margin:5px 0 0}
.timer-box{background:var(--navy);color:#fff;border-radius:12px;padding:10px 16px;text-align:center}
.timer-box span{display:block;font-size:11px;color:#b6c4d1}
.timer-box strong{font-size:22px}
.training-controls{
  display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:12px;align-items:end
}
label{font-size:13px;font-weight:750;color:var(--muted)}
select,input[type="text"],input[type="number"]{
  width:100%;margin-top:7px;border:1px solid var(--line);border-radius:10px;
  padding:11px;background:#fff;color:var(--ink)
}
.exercise-zone{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;
  min-height:270px;box-shadow:0 8px 25px rgba(13,27,42,.05)
}
.empty-state{text-align:center;display:grid;place-items:center;align-content:center;color:var(--muted)}
.hidden{display:none}
.question-card{
  border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;
  display:grid;grid-template-columns:52px 1fr 170px;align-items:center;gap:15px
}
.question-number{
  width:40px;height:40px;border-radius:10px;background:var(--blue-soft);
  color:var(--blue);display:grid;place-items:center;font-weight:900
}
.question-text{font-size:18px;font-weight:750}
.answer-input{margin:0!important}
.question-card.correct{border-color:#9ed8bf;background:#f2fbf7}
.question-card.wrong{border-color:#efb0b0;background:#fff6f6}
.result-line{margin-top:7px;font-size:13px;color:var(--muted)}
.actions-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.score-box{
  padding:12px 16px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font-weight:850
}
.courses-layout{display:grid;grid-template-columns:285px 1fr;gap:18px}
.course-list,.course-content{
  min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;
  box-shadow:0 8px 25px rgba(13,27,42,.05)
}
.course-list{height:fit-content;position:sticky;top:20px}
.course-item{
  width:100%;border:0;background:transparent;text-align:left;padding:13px;border-radius:10px;
  font-weight:750;color:var(--muted)
}
.course-item.active,.course-item:hover{background:var(--blue-soft);color:var(--blue)}
.course-content h2{font-size:30px;margin:4px 0 12px}
.course-content h3{margin-top:28px}
.course-content p,.course-content li{line-height:1.72;color:#3d4a59}
.note{
  border-left:4px solid var(--blue);padding:15px 17px;background:var(--blue-soft);
  border-radius:0 12px 12px 0;margin:18px 0
}
.warning{border-left-color:var(--gold);background:#fff8e8}
.example{
  background:#0e2033;color:#fff;border-radius:14px;padding:18px;margin:16px 0;
  font-family:Consolas,monospace;line-height:1.8
}
.mini-exercises{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px
}
.mini-exercises span{border:1px dashed #b8c4d0;border-radius:10px;padding:12px}
.progress-row{
  display:grid;grid-template-columns:180px 1fr 70px;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid #edf1f5
}
.progress-row:last-child{border-bottom:0}
.history-item{
  display:flex;justify-content:space-between;align-items:center;padding:15px 0;
  border-bottom:1px solid #edf1f5
}
.history-item:last-child{border-bottom:0}
.history-item small{color:var(--muted)}
.exam-intro ul{line-height:1.9;color:var(--muted)}
.toast{
  position:fixed;right:24px;bottom:24px;background:var(--navy);color:#fff;
  padding:14px 18px;border-radius:12px;opacity:0;transform:translateY(15px);
  transition:.25s;pointer-events:none;z-index:20
}
.toast.show{opacity:1;transform:translateY(0)}
@media (max-width:1000px){
  .sidebar{width:210px}
  .main{margin-left:210px;padding:22px}
  .stats-grid,.topic-grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr}
  .training-controls{grid-template-columns:1fr 1fr}
}

/* ==================================================================
   MOBILE (≤ 860px) — refonte complète : navigation basse type appli,
   colonnes uniques, cibles tactiles agrandies, zones sûres iOS/Android
   ================================================================== */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust:100%; }

.bottom-nav{ display:none; }

@media (max-width:860px){
  body{ padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  .sidebar{ display:none; }
  .main{ margin-left:0; padding:14px 14px 18px; }

  .topbar{
    align-items:center; margin-bottom:18px; gap:10px;
    position:sticky; top:0; z-index:15; background:var(--bg);
    padding:10px 2px 12px; margin:-14px -14px 14px; padding-left:16px; padding-right:16px;
    border-bottom:1px solid var(--line);
  }
  .topbar h1{ font-size:21px; margin-top:1px; }
  .eyebrow{ font-size:10px; }
  .top-actions{ gap:8px; }
  .profile-badge{ width:36px; height:36px; font-size:13px; }
  .ghost-btn{ padding:9px 11px; font-size:13px; }

  .hero{ padding:22px 18px; border-radius:16px; gap:20px; }
  .hero h2{ font-size:22px; line-height:1.2; margin:10px 0 8px; }
  .hero p{ font-size:14.5px; line-height:1.6; }
  .hero-actions{ flex-direction:column; }
  .hero-actions button{ width:100%; text-align:center; }
  .hero-score{ padding:20px; border-radius:14px; }
  .hero-score strong{ font-size:40px; }

  .stats-grid,.topic-grid,.courses-layout,.training-controls{ grid-template-columns:1fr; }
  .stats-grid{ gap:10px; margin:16px 0; }
  .stat-card{ padding:16px; }
  .stat-card strong{ font-size:24px; }
  .section-heading{ margin:26px 0 12px; align-items:flex-start; flex-direction:column; gap:6px; }

  .topic-card{ padding:16px; display:flex; flex-direction:column; }

  /* Cours : liste en puces horizontales défilantes, sticky sous le header */
  .courses-layout{ display:block; min-width:0; }
  .course-content{ min-width:0; max-width:100%; overflow-wrap:break-word; }
  .course-list{
    position:sticky; top:64px; z-index:10; min-width:0; max-width:100%;
    display:flex; flex-direction:row; overflow-x:auto; gap:8px;
    padding:10px; height:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .course-list::-webkit-scrollbar{ display:none; }
  .course-group-label{ display:none; }
  .course-item{
    flex:0 0 auto; white-space:nowrap; padding:10px 15px; border-radius:999px;
    background:var(--bg); border:1px solid var(--line);
  }
  .course-item.active{ background:var(--blue); color:#fff; }
  .course-content{ padding:18px 16px; }
  .course-content h2{ font-size:23px; }

  .panel{ padding:18px 16px; border-radius:14px; }
  .panel-head{ flex-wrap:wrap; gap:10px; }
  .timer-box{ padding:8px 13px; }
  .timer-box strong{ font-size:18px; }

  .training-controls{ gap:12px; }
  .training-controls > label:last-of-type{ order:1; }
  #start-training{ order:2; width:100%; padding:14px; font-size:15.5px; }
  select,input[type="text"],input[type="number"]{ padding:13px; font-size:16px; }

  .exercise-zone{ padding:18px 14px; border-radius:14px; }
  .question-card{
    grid-template-columns:38px 1fr; gap:10px; padding:14px; border-radius:12px;
  }
  .question-number{ width:32px; height:32px; font-size:14px; border-radius:8px; }
  .question-text{ font-size:16px; }
  .answer-input{
    grid-column:1/-1; margin-top:10px!important; padding:13px; font-size:16px;
  }
  .actions-row{ flex-direction:column-reverse; gap:12px; align-items:stretch; }
  .actions-row .primary-btn{ width:100%; padding:14px; }
  .score-box{ text-align:center; }

  .qcm-options{ flex-direction:column; gap:8px; }
  .qcm-opt{ width:100%; min-width:0; padding:13px 14px; font-size:15px; }
  .qcm-options.visual{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .qcm-options.visual .qcm-opt{ width:auto; flex:0 0 calc(50% - 8px); }

  .attention-grid{ font-size:13px; padding:10px; gap:2px; max-width:100%; }
  .codage-legend span{ font-size:13px; padding:7px 10px; }
  .codage-sequence{ font-size:19px; letter-spacing:4px; padding:13px; }

  .memo-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .memo-symbol{ font-size:30px; }

  .exam-intro{ padding:20px 16px; }
  .exam-intro ul{ font-size:14.5px; }
  .courses-layout .course-content, .exam-intro, .panel, .exercise-zone{ box-shadow:none; }

  .heli-grid .heli-card{ grid-template-columns:1fr; min-width:0; }
  .heli-card{ min-width:0; }
  .heli-icon-wrap{ width:100%; height:110px; }
  .heli-specs{ grid-template-columns:1fr 1fr; }

  .history-item{ align-items:flex-start; }
  .progress-row{ grid-template-columns:1fr; gap:6px; }
  .progress-row span{ justify-self:flex-end; }

  .toast{ left:14px; right:14px; bottom: calc(66px + env(safe-area-inset-bottom)); text-align:center; }
}

/* Barre de navigation basse — visible uniquement sur mobile/tablette étroite */
.nav-link .nav-icon{ display:inline-flex; vertical-align:-4px; margin-right:8px; }
.nav-link .nav-icon svg{ display:block; width:17px; height:17px; }

@media (max-width:860px){
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
    height:56px; padding-bottom:env(safe-area-inset-bottom);
    background:var(--navy); border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -6px 20px rgba(13,27,42,.22);
  }
  .bottom-nav .nav-link{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; background:transparent; border:0; color:#8fa0b2; padding:4px 2px;
    border-radius:0; font-size:10px; font-weight:700; line-height:1.1; text-align:center;
  }
  .bottom-nav .nav-link .nav-icon{ margin:0; vertical-align:0; }
  .bottom-nav .nav-link .nav-icon svg{ width:20px; height:20px; }
  .bottom-nav .nav-link.active{ color:#fff; }
}

@media (max-width:400px){
  .heli-specs{ grid-template-columns:1fr; }
  .qcm-options.visual .qcm-opt{ flex:0 0 100%; }
}