/* ═══════════════════════════════════════════════════
   MathBoost LMS — Frontend Styles
   ═══════════════════════════════════════════════════ */

:root {
  --mb-primary: #6c5ce7;
  --mb-primary-dark: #5a4bd1;
  --mb-accent: #00cec9;
  --mb-success: #00b894;
  --mb-danger: #e17055;
  --mb-warning: #fdcb6e;
  --mb-bg: #f8f9fe;
  --mb-card: #ffffff;
  --mb-text: #2d3436;
  --mb-text-light: #636e72;
  --mb-border: #e0e0e0;
  --mb-radius: 12px;
  --mb-shadow: 0 4px 20px rgba(108,92,231,.08);
  --mb-font: 'Nunito', sans-serif;
}

/* ── Base ──────────────────────────────────────── */
.mb-resources-wrap, .mb-course-wrap, .mb-qcm-list-wrap,
.qcm-wrap, .mb-locked-wrap, .mb-activation-wrap, .mb-payment-wrap {
  font-family: var(--mb-font);
  color: var(--mb-text);
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ── Buttons ──────────────────────────────────── */
.mb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}
.mb-btn-start { background: var(--mb-primary); color: #fff; }
.mb-btn-start:hover { background: var(--mb-primary-dark); transform: translateY(-1px); }
.mb-btn-upgrade { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; }
.mb-btn-upgrade:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,92,231,.3); }
.mb-btn-outline { background: transparent; color: var(--mb-primary); border: 2px solid var(--mb-primary); }
.mb-btn-outline:hover { background: var(--mb-primary); color: #fff; }
.mb-btn-login { background: var(--mb-accent); color: #fff; }
.mb-btn-large { padding: 14px 32px; font-size: 16px; border-radius: 10px; }

/* ── Breadcrumb ───────────────────────────────── */
.mb-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px; font-size: 14px; flex-wrap: wrap;
}
.mb-breadcrumb a { color: var(--mb-primary); text-decoration: none; font-weight: 600; }
.mb-breadcrumb a:hover { text-decoration: underline; }
.mb-breadcrumb span { color: var(--mb-text-light); }
.mb-breadcrumb-top {
  padding: 10px 0 0;
}
.mb-breadcrumb-top a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px;
  background: var(--mb-bg); border: 1px solid var(--mb-border);
  font-size: 14px; font-weight: 700; color: var(--mb-primary);
  text-decoration: none; transition: all .2s;
}
.mb-breadcrumb-top a:hover { background: var(--mb-primary); color: #fff; }

/* ── Resources / Levels ───────────────────────── */
.mb-resources-header { text-align: center; margin-bottom: 32px; }
.mb-resources-title { font-size: 28px; font-weight: 800; color: var(--mb-text); }
.mb-resources-sub { color: var(--mb-text-light); margin-top: 8px; }

.mb-level-section { margin-bottom: 28px; }
.mb-section-title {
  font-size: 16px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--mb-primary);
  padding: 8px 0; margin-bottom: 12px;
  border-bottom: 2px solid var(--mb-primary);
}
.mb-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.mb-level-card {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 16px; background: var(--mb-card);
  border-radius: var(--mb-radius); box-shadow: var(--mb-shadow);
  font-weight: 700; font-size: 15px;
  color: var(--mb-text); text-decoration: none;
  border: 2px solid transparent;
  transition: all .25s;
}
.mb-level-card:hover {
  border-color: var(--mb-primary); transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(108,92,231,.15);
}

/* ── Course Selector ──────────────────────────── */
.mb-course-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.mb-course-header-inner { flex: 1; }
.mb-course-title { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.mb-course-sub { color: var(--mb-text-light); margin: 0; font-size: 14px; }
.mb-premium-pill {
  padding: 6px 16px; border-radius: 20px;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* QCM section (category grouping) */
.mb-qcm-section { margin-bottom: 28px; }
.mb-section-heading {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; margin-bottom: 10px;
  border-bottom: 2px solid var(--mb-border);
}
.mb-section-heading-name {
  font-size: 15px; font-weight: 800; color: var(--mb-text);
}
.mb-section-count {
  background: var(--mb-primary); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px;
}

/* Old category blocks (kept for backwards compat) */
.mb-category-block { margin-bottom: 24px; background: var(--mb-card); border-radius: var(--mb-radius); box-shadow: var(--mb-shadow); overflow: hidden; }
.mb-category-header {
  padding: 14px 20px; font-weight: 800; font-size: 15px;
  background: linear-gradient(135deg, var(--mb-primary), #a29bfe); color: #fff;
}
.mb-category-content { padding: 8px; }
.mb-category-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-radius: 8px;
  color: var(--mb-text); text-decoration: none;
  transition: background .2s;
}
.mb-category-item:hover { background: var(--mb-bg); }
.mb-cat-count { font-size: 12px; color: var(--mb-text-light); font-weight: 600; }

/* ── QCM List ─────────────────────────────────── */
.mb-qcm-list-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding: 16px 20px;
  background: var(--mb-card); border-radius: var(--mb-radius); box-shadow: var(--mb-shadow);
}
.mb-qcm-list-header h2 { font-size: 20px; font-weight: 800; margin: 0; }
.mb-qcm-list-header p { color: var(--mb-text-light); margin: 4px 0 0; font-size: 14px; }

.mb-premium-badge {
  padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
  background: #ffeaa7; color: #d35400;
}
.mb-premium-badge.is-premium { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; }

.mb-qcm-items { display: flex; flex-direction: column; gap: 10px; }
.mb-qcm-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: var(--mb-card);
  border-radius: var(--mb-radius); box-shadow: var(--mb-shadow);
  border-left: 4px solid var(--mb-success);
  transition: all .2s;
}
.mb-qcm-item:hover { transform: translateX(4px); }
.mb-qcm-item.is-locked { border-left-color: var(--mb-danger); opacity: .75; }

.mb-qcm-item-left { display: flex; align-items: center; gap: 14px; }
.mb-qcm-num {
  background: var(--mb-primary); color: #fff;
  padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 800;
}
.mb-qcm-item-info { display: flex; flex-direction: column; gap: 2px; }
.mb-qcm-item-title { font-weight: 700; font-size: 15px; }
.mb-qcm-item-sub { font-size: 13px; color: var(--mb-text-light); }
.mb-qcm-item-meta { font-size: 12px; color: var(--mb-text-light); }
.mb-qcm-item-right { display: flex; align-items: center; gap: 10px; }
.mb-lock-icon { font-size: 20px; }

/* ── Upgrade CTA ──────────────────────────────── */
.mb-upgrade-cta {
  margin-top: 24px; padding: 24px; border-radius: var(--mb-radius);
  background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff;
}
.mb-upgrade-cta-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mb-upgrade-icon { font-size: 40px; }
.mb-upgrade-text { flex: 1; }
.mb-upgrade-text strong { font-size: 18px; }
.mb-upgrade-text p { margin: 6px 0 0; opacity: .9; font-size: 14px; }
.mb-upgrade-cta .mb-btn { background: #fff; color: var(--mb-primary); }

/* ── QCM Single / Quiz Player (matches HTML design) ───────────────────── */
*{box-sizing:border-box}

.qcm-wrap{max-width:840px;margin:0 auto;padding:24px 16px}

/* Header */
.qcm-header{background:linear-gradient(135deg,#E8604C,#F07A62);color:#fff;border-radius:16px;padding:28px 32px;margin-bottom:20px;text-align:center;box-shadow:0 4px 20px rgba(232,96,76,.3)}
.qcm-header h1{font-size:1.65em;font-weight:800;margin-bottom:6px}
.qcm-header p{font-size:.95em;opacity:.9;margin:0}

/* Score bar */
.qcm-score-bar{background:#fff;border-radius:12px;padding:12px 20px;margin-bottom:20px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);font-weight:700;font-size:.95em;color:#E8604C;position:sticky;top:6px;z-index:100}
.qcm-score-label{flex:1}
.qcm-score-badge{background:#E8604C;color:#fff;border-radius:20px;padding:4px 14px;font-size:1.05em;min-width:70px;text-align:center;font-weight:800}
.qcm-progress-track{flex:2;height:10px;background:#FFE8E4;border-radius:5px;overflow:hidden}
.qcm-progress-fill{height:100%;background:linear-gradient(90deg,#E8604C,#F5A823);width:0%;transition:width .4s ease;border-radius:5px}

/* Question cards */
.qcm-card{background:#fff;border-radius:14px;padding:22px 24px;margin-bottom:18px;box-shadow:0 2px 12px rgba(0,0,0,.07);border-left:5px solid #E8604C;transition:box-shadow .2s}
.qcm-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.11)}
.qcm-q-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.qcm-q-num{background:#E8604C;color:#fff;font-weight:800;font-size:.85em;border-radius:8px;padding:4px 10px;white-space:nowrap;flex-shrink:0;margin-top:3px}
.qcm-q-text{font-size:1.05em;font-weight:700;line-height:1.55}

/* Answer grids */
.qcm-answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.qcm-answers-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
@media(max-width:520px){.qcm-answers-grid{grid-template-columns:1fr}}

/* Answer labels */
.qcm-answer{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:all .18s ease;user-select:none;font-size:.93em;font-weight:800;line-height:1.4}
.qcm-answer:hover{transform:translateY(-1px);filter:brightness(.97)}
.qcm-answer input[type="radio"]{display:none}
.qcm-answer-icon{width:24px;height:24px;border-radius:50%;border:2.5px solid currentColor;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9em;font-weight:900;transition:all .2s}

.qcm-ans-a{background:#DCF0FF;border-color:#2E86C1;color:#1a5276}
.qcm-ans-b{background:#FFF3CC;border-color:#E09000;color:#7A4800}
.qcm-ans-c{background:#EDE0FF;border-color:#7D3C98;color:#5b2c6f}
.qcm-ans-d{background:#D6F4F2;border-color:#3AADA6;color:#0d4f4d}

.qcm-answer.selected-correct{border-color:#228B22!important;background:#DCFFDC!important;color:#155215!important;box-shadow:0 0 0 3px rgba(34,139,34,.25)}
.qcm-answer.selected-correct .qcm-answer-icon{background:#228B22;border-color:#228B22;color:#fff}
.qcm-answer.selected-correct .qcm-answer-icon::after{content:'✓'}
.qcm-answer.selected-wrong{border-color:#9B0000!important;background:#E00000!important;color:#fff!important;box-shadow:0 0 0 3px rgba(155,0,0,.35);animation:shake .3s ease}
.qcm-answer.selected-wrong .qcm-answer-icon{background:#fff;border-color:#fff;color:#9B0000}
.qcm-answer.selected-wrong .qcm-answer-icon::after{content:'⚠'}
.qcm-answer.show-correct{border-color:#228B22!important;background:#DCFFDC!important;color:#155215!important}
.qcm-answer.show-correct .qcm-answer-icon{background:#228B22;border-color:#228B22;color:#fff}
.qcm-answer.show-correct .qcm-answer-icon::after{content:'✓'}
.qcm-answered .qcm-answer{cursor:default}
.qcm-answered .qcm-answer:not(.selected-correct):not(.selected-wrong):not(.show-correct):hover{transform:none;filter:none}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}

/* Correction toggle & report buttons */
.qcm-btn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.qcm-toggle-btn{background:none;border:2px solid #E8604C;color:#E8604C;border-radius:8px;padding:8px 16px;font-family:'Nunito',sans-serif;font-size:.9em;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.qcm-toggle-btn:hover,.qcm-toggle-btn.open{background:#E8604C;color:#fff}
.qcm-toggle-btn.disabled{opacity:.35;cursor:not-allowed;border-color:#bbb;color:#bbb}
.qcm-toggle-btn.disabled:hover{background:none;color:#bbb}
.qcm-report-btn{background:none;border:2px solid #bbb;color:#888;border-radius:8px;padding:8px 14px;font-family:'Nunito',sans-serif;font-size:.88em;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.qcm-report-btn:hover{border-color:#E09000;color:#E09000;background:#FFFBE8}

/* Correction panel */
.qcm-correction{display:none;margin-top:14px;padding:16px;background:#f8fafc;border-radius:10px;border:1px solid #F5C8C0;font-size:.92em;line-height:1.68}
.qcm-correction.visible{display:block;animation:slideDown .25s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.qcm-correction p{margin:6px 0;overflow-x:auto}
.qcm-correction ul{margin:6px 0 6px 20px}
.qcm-correction ol{margin:6px 0 6px 20px}
.qcm-correction li{margin:3px 0}
.qcm-correction .math-center{text-align:center;padding:8px 0;overflow-x:auto}
.steps .math-center{padding:2px 0}

/* Correction colour boxes */
.qcm-box{border-radius:8px;padding:10px 14px;margin:10px 0;border-left:4px solid}
.qcm-box-green{background:#DCFFDC;border-color:#228B22;color:#1a4f1a}
.qcm-box-red{background:#FFECEC;border-color:#C81E1E;color:#6b0000}
.qcm-box-blue{background:#FFE8E4;border-color:#E8604C;color:#7a1a0a}
.qcm-box-yellow{background:#FFF3CC;border-color:#E09000;color:#5a3500}
.qcm-box-violet{background:#EDE0FF;border-color:#7D3C98;color:#3d0a52}
.qcm-box .box-title{display:inline;font-size:.94em;font-weight:800;margin-right:4px}
.qcm-box-red .box-title{color:#C81E1E}
.qcm-box-blue .box-title{color:#1a4f7a}
.qcm-box-yellow .box-title{color:#7a4800}
.qcm-box-violet .box-title{color:#5b2c8a}
.qcm-box-green .box-title{color:#145214}
.ok{color:#1a7a1a;font-weight:800}
.ko{color:#C00000;font-weight:800}

/* Underbrace HTML table helper */
.ub-wrap{text-align:center;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0}
.ub-wrap table{border-collapse:collapse;display:inline-table;font-size:.95em}
.ub-wrap td{padding:2px 6px;font-weight:700;color:#1a1a2e}
.ub-top{border-bottom:2px solid #555}
.ub-lbl{font-size:.73em;font-weight:400;color:#666;padding-top:1px;text-align:center}

/* Intro */
.qcm-intro{background:#fff;border-radius:14px;padding:26px 28px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.07);border-left:5px solid #E8604C}
.qcm-intro h2{color:#1a1a2e;font-size:1.15em;font-weight:800;margin-bottom:10px}
.qcm-intro p{margin-bottom:10px;font-size:.97em}
.qcm-intro-rules{background:#FFF0EE;border-radius:10px;padding:14px 18px;margin-top:12px;border-left:4px solid #E8604C}
.qcm-intro-rules strong{color:#1a1a2e;display:block;margin-bottom:8px;font-size:1em}
.qcm-intro-rules ul{list-style:none;margin:0;padding:0}
.qcm-intro-rules li{margin-bottom:10px;padding:0}
.rule-title{display:block;font-weight:800;color:#1a1a2e;margin-bottom:2px}
.rule-desc{display:block;font-weight:400;color:#444;font-size:.93em;padding-left:4px}

/* Final score bilan */
.score-bilan{background:#fff;border-radius:14px;padding:28px 22px;margin-top:28px;text-align:center;box-shadow:0 3px 16px rgba(0,0,0,.09);border:2px solid #E8604C;display:none}
.score-bilan.visible{display:block;animation:fadeInBilan .5s ease}
@keyframes fadeInBilan{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.bilan-coupe{font-size:5em;margin:10px 0;animation:bilanBounce .6s ease infinite alternate}
@keyframes bilanBounce{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.bilan-emoji{font-size:3.5em;margin-bottom:10px;line-height:1}
.bilan-titre{font-size:1.25em;font-weight:800;color:#1a1a2e;margin-bottom:6px}
.bilan-score{font-size:2em;font-weight:800;color:#E8604C;margin:8px 0}
.bilan-msg{font-size:.97em;color:#444;font-weight:600;line-height:1.55;margin-bottom:20px}
.bilan-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Locked / Payment ─────────────────────────── */
.mb-locked-wrap, .mb-payment-wrap { text-align: center; }
.mb-locked-icon, .mb-payment-success-icon { font-size: 50px; margin-bottom: 10px; }
.mb-locked-title { font-size: 24px; font-weight: 800; }
.mb-locked-desc { color: var(--mb-text-light); max-width: 500px; margin: 10px auto 20px; }
.mb-locked-features, .mb-payment-features {
  display: inline-flex; flex-direction: column; gap: 8px; text-align: left;
  margin-bottom: 20px;
}
.mb-locked-feature, .mb-pay-feature { font-size: 15px; }
.mb-locked-price { margin-bottom: 20px; }
.mb-price-tag { font-size: 36px; font-weight: 800; color: var(--mb-primary); }
.mb-price-tag small { font-size: 14px; color: var(--mb-text-light); display: block; }
.mb-locked-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mb-locked-code-hint { margin-top: 20px; font-size: 14px; color: var(--mb-text-light); }
.mb-locked-code-hint a { color: var(--mb-primary); }

/* Payment card */
.mb-payment-card {
  background: var(--mb-card); border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow); padding: 32px; max-width: 500px; margin: 0 auto;
}
.mb-payment-header { margin-bottom: 20px; }
.mb-payment-badge {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff;
  font-size: 12px; font-weight: 800; margin-bottom: 10px;
}
.mb-payment-title { font-size: 22px; font-weight: 800; margin: 8px 0; }
.mb-payment-price { font-size: 40px; font-weight: 800; color: var(--mb-primary); }
.mb-price-unit { font-size: 20px; }
.mb-payment-desc { color: var(--mb-text-light); font-size: 14px; }
.mb-payment-success-card {
  background: var(--mb-card); padding: 32px; border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow); max-width: 400px; margin: 0 auto;
}
.mb-payment-login-note {
  padding: 12px; background: #fff9e6; border-radius: 8px;
  margin-bottom: 16px; font-size: 14px; color: #d35400;
}

/* ── Activation form ──────────────────────────── */
.mb-activation-card {
  background: var(--mb-card); padding: 32px; border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow); max-width: 500px; margin: 0 auto; text-align: center;
}
.mb-activation-icon { font-size: 40px; margin-bottom: 10px; }
.mb-activation-title { font-size: 20px; font-weight: 800; }
.mb-activation-desc { color: var(--mb-text-light); margin: 8px 0 20px; font-size: 14px; }
.mb-code-input-row { display: flex; gap: 10px; }
.mb-code-input {
  flex: 1; padding: 12px 16px; border: 2px solid var(--mb-border);
  border-radius: 8px; font-size: 18px; font-weight: 700;
  font-family: monospace; text-align: center; letter-spacing: 2px;
}
.mb-code-input:focus { border-color: var(--mb-primary); outline: none; }
.mb-activation-msg {
  padding: 12px; border-radius: 8px; margin-top: 12px; font-weight: 700; font-size: 14px;
}
.mb-activation-msg.is-success { background: #e6fff8; color: #00b894; }
.mb-activation-msg.is-error { background: #fff5f3; color: #e17055; }

/* ── Notices ──────────────────────────────────── */
.mb-notice {
  padding: 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px;
}
.mb-notice-info { background: #f0efff; color: var(--mb-primary); }
.mb-notice-success { background: #e6fff8; color: #00b894; }
.mb-notice a { color: inherit; font-weight: 700; }

.mb-empty {
  text-align: center; padding: 40px; color: var(--mb-text-light);
  font-size: 15px;
}

/* ── Report Modal ─────────────────────────────── */
.qcm-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.qcm-modal-overlay.open,
.qcm-modal-overlay.is-active { display: flex; }
.qcm-modal {
  background: #fff; border-radius: var(--mb-radius); padding: 28px;
  max-width: 480px; width: 90%; position: relative;
  animation: fadeInUp .3s ease;
}
.qcm-modal-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 20px; cursor: pointer;
}
.qcm-modal h3 { font-size: 18px; margin: 0 0 8px; }
.modal-sub { color: var(--mb-text-light); font-size: 14px; margin-bottom: 12px; }
.qcm-modal label { font-weight: 700; font-size: 14px; }
.qcm-modal textarea {
  width: 100%; min-height: 100px; padding: 12px; border: 2px solid var(--mb-border);
  border-radius: 8px; margin-top: 8px; font-family: var(--mb-font);
  font-size: 14px; resize: vertical;
}
.qcm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.qcm-modal-cancel {
  padding: 8px 18px; border: 1px solid var(--mb-border); border-radius: 8px;
  background: #fff; cursor: pointer; font-weight: 600;
}
.qcm-modal-send {
  padding: 8px 18px; border: none; border-radius: 8px;
  background: var(--mb-primary); color: #fff; cursor: pointer; font-weight: 700;
}

/* Grid for list page */
.mb-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mb-list-title { font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.mb-list-cat-card {
  padding: 20px; background: var(--mb-card); border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow); text-align: center;
  font-weight: 700; color: var(--mb-text); text-decoration: none;
  transition: all .2s;
}
.mb-list-cat-card:hover { transform: translateY(-3px); border-color: var(--mb-primary); }

/* ── Animations ───────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Card entrance animation — only animate when JS has confirmed IntersectionObserver works */
.js-io-ready .mb-level-card,
.js-io-ready .mb-category-item,
.js-io-ready .mb-qcm-item {
  opacity: 0; transform: translateY(15px);
  transition: opacity .4s ease, transform .4s ease;
}
.mb-level-card.is-visible,
.mb-category-item.is-visible,
.mb-qcm-item.is-visible {
  opacity: 1 !important; transform: translateY(0) !important;
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 600px) {
  .mb-qcm-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mb-qcm-item-right { align-self: flex-end; }
  .mb-qcm-list-header { flex-direction: column; gap: 10px; }
  .mb-code-input-row { flex-direction: column; }
  .mb-upgrade-cta-inner { flex-direction: column; text-align: center; }
  .qcm-score-bar { flex-wrap: wrap; }
  .bilan-actions { flex-direction: column; }
  .mb-level-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}