:root{
  --qsm-bg:#eef5ff;
  --qsm-card:#ffffff;
  --qsm-ink:#0f172a;
  --qsm-muted:#64748b;
  --qsm-blue:#2563eb;
  --qsm-cyan:#06b6d4;
  --qsm-green:#10b981;
  --qsm-red:#ef4444;
  --qsm-orange:#f59e0b;
  --qsm-border:#dbeafe;
  --qsm-shadow:0 18px 45px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:radial-gradient(circle at top left,rgba(14,165,233,.18),transparent 35%),linear-gradient(180deg,#f8fbff,#eef5ff);
  color:var(--qsm-ink);
}
a{text-decoration:none;color:inherit}
.main-area{min-height:100vh}
.topbar{
  max-width:1180px;
  margin:0 auto;
  padding:18px 18px 0;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.topbar a{
  font-weight:900;
  background:#fff;
  border:1px solid var(--qsm-border);
  border-radius:999px;
  padding:10px 14px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.whatsapp{color:#065f46!important;border-color:#bbf7d0!important;background:#ecfdf5!important}
.qsm-step-shell{max-width:1180px;margin:0 auto;padding:22px 18px 44px}
.qsm-step-hero{
  background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(15,118,110,.92));
  color:white;
  border-radius:30px;
  padding:30px;
  box-shadow:var(--qsm-shadow);
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.qsm-step-pill{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  color:#dff7ff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.qsm-step-hero h1{margin:14px 0 8px;font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.04em}
.qsm-step-hero p{margin:0;color:rgba(255,255,255,.86);max-width:760px;line-height:1.65}
.qsm-step-btn{
  border:0;
  border-radius:16px;
  padding:13px 17px;
  font-weight:950;
  cursor:pointer;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.qsm-step-btn.primary,.qsm-step-btn.next{color:white;background:linear-gradient(135deg,var(--qsm-blue),var(--qsm-cyan));box-shadow:0 10px 24px rgba(37,99,235,.26)}
.qsm-step-btn.secondary{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}
.qsm-step-btn.ghost{color:white;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24)}
.qsm-step-progress-card,.qsm-step-card,.qsm-step-empty,.portal-card{
  background:white;
  border:1px solid var(--qsm-border);
  border-radius:24px;
  box-shadow:var(--qsm-shadow);
}
.qsm-step-progress-card{padding:18px;margin-bottom:18px}
.qsm-step-progress-top{display:flex;justify-content:space-between;gap:14px;font-weight:950;margin-bottom:12px}
#qsmStepPercent{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:7px 11px;font-weight:950}
.qsm-step-progress-bar{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden}
#qsmStepProgressFill{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--qsm-blue),var(--qsm-cyan))}
.qsm-step-scoreline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;color:#334155}
.qsm-step-scoreline span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:9px 12px;font-weight:850}
.qsm-step-reset-small{border:1px solid #fed7aa;color:#9a3412;background:#fff7ed;border-radius:999px;padding:9px 12px;font-weight:950;cursor:pointer}
.qsm-step-resume-box{margin-top:14px;background:#ecfdf5;border:1px solid #86efac;color:#065f46;border-radius:16px;padding:12px;line-height:1.5}
.qsm-step-card{padding:24px}
.qsm-step-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.qsm-step-mini,.qsm-step-section,.qsm-step-type{
  display:inline-flex;
  border-radius:999px;
  padding:8px 12px;
  font-weight:950;
}
.qsm-step-mini{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.qsm-step-section{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}
.qsm-step-type{border:1px solid #ccfbf1;color:#0f766e;background:#f0fdfa}
.qsm-step-type.multiple{color:#7c2d12;border-color:#fed7aa;background:#fff7ed}
.qsm-step-question{margin:0 0 18px;font-size:clamp(22px,3vw,34px);line-height:1.25;letter-spacing:-.03em}
.qsm-step-options{display:grid;gap:12px}
.qsm-step-option{
  display:grid;
  grid-template-columns:46px 1fr 34px;
  align-items:center;
  gap:14px;
  border:2px solid #dbeafe;
  background:#f8fbff;
  border-radius:20px;
  padding:14px;
  cursor:pointer;
  min-height:70px;
}
.qsm-step-option:hover{border-color:#93c5fd}
.qsm-step-option input{display:none}
.qsm-step-option-key{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#0f172a;color:white;font-weight:950;font-size:18px}
.qsm-step-option-text{font-size:16px;line-height:1.55}
.qsm-step-option-mark{width:28px;height:28px;border-radius:999px;border:2px solid #cbd5e1;display:grid;place-items:center;font-weight:950}
.qsm-step-option.selected{border-color:#2563eb;background:#eff6ff}
.qsm-step-option.selected .qsm-step-option-mark{border-color:#2563eb;background:#2563eb;color:white}
.qsm-step-option.selected .qsm-step-option-mark:after{content:"✓"}
.qsm-step-option.is-correct{border-color:#10b981;background:#dcfce7}
.qsm-step-option.is-correct .qsm-step-option-key,.qsm-step-option.is-correct .qsm-step-option-mark{background:#10b981;border-color:#10b981;color:white}
.qsm-step-option.is-correct .qsm-step-option-mark:after{content:"✓"}
.qsm-step-option.is-wrong{border-color:#ef4444;background:#fee2e2}
.qsm-step-option.is-wrong .qsm-step-option-key,.qsm-step-option.is-wrong .qsm-step-option-mark{background:#ef4444;border-color:#ef4444;color:white}
.qsm-step-option.is-wrong .qsm-step-option-mark:after{content:"×"}
.qsm-step-feedback{margin-top:18px;border-radius:20px;padding:16px;line-height:1.65;border:1px solid #dbeafe;background:#f8fbff}
.qsm-step-feedback.good{background:#ecfdf5;border-color:#86efac;color:#065f46}
.qsm-step-feedback.bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.qsm-step-feedback-title{font-weight:950;font-size:18px;margin-bottom:6px}
.qsm-step-correct-answer{font-weight:900;margin:6px 0}
.qsm-step-footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.qsm-step-empty{padding:28px;text-align:center}
.qsm-step-empty h2{margin-top:0;color:#0f766e}
.portal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.portal-card{padding:22px}
.portal-card h2{margin:0 0 8px}
.portal-card p{color:var(--qsm-muted);line-height:1.6}
.portal-card .qsm-step-btn{margin-top:10px}
@media(max-width:800px){
  .qsm-step-hero,.qsm-step-card{padding:18px}
  .qsm-step-option{grid-template-columns:42px 1fr 30px;gap:10px}
  .portal-grid{grid-template-columns:1fr}
}

/* QSM Résidanat subscription paywall */
.qsm-res-paywall{
  border:1px solid #fed7aa!important;
  background:linear-gradient(180deg,#fff 0%,#fff7ed 100%)!important;
}
.qsm-res-paywall input:focus{
  outline:3px solid rgba(23,107,255,.18);
  border-color:#176bff!important;
}