/* ============================================================================
   QUIZ « Combien facturer ton site WordPress » — design WPMalter (dark)
   ============================================================================ */
.wpm-quiz { position:relative; }

/* ---- INTRO ---------------------------------------------------------------- */
.quiz-intro { position:relative; overflow:hidden; padding:clamp(60px,9vw,120px) 0 clamp(50px,7vw,90px); text-align:center; }
.quiz-intro-inner { position:relative; z-index:1; max-width:760px; }
.quiz-intro .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; }
.quiz-intro h1 { font-family:var(--wpm-font-display); font-size:clamp(32px,5.2vw,56px); line-height:1.04; letter-spacing:-0.03em; margin:0 0 20px; }
.quiz-intro .lede { font-size:clamp(16px,2vw,19px); line-height:1.6; color:var(--wpm-text-secondary); max-width:60ch; margin:0 auto 32px; }
.quiz-intro-proof { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:34px;
  font-size:14px; color:var(--wpm-text-muted); }
.quiz-intro-proof .stat b { color:var(--wpm-text-primary); }
.quiz-intro-proof .sep { width:4px; height:4px; border-radius:50%; background:var(--wpm-border-strong); }

/* ---- RUN ------------------------------------------------------------------ */
.quiz-run { padding:clamp(40px,6vw,80px) 0; }
.quiz-run-inner { max-width:720px; }

.quiz-progress { margin-bottom:30px; }
.quiz-progress-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.quiz-cat { font-family:var(--wpm-font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--wpm-brand-300); }
.quiz-step { font-size:14px; color:var(--wpm-text-muted); }
.quiz-step b { color:var(--wpm-text-primary); }
.quiz-progress-bar { height:6px; border-radius:var(--wpm-radius-pill); background:var(--wpm-surface-2); overflow:hidden; }
.quiz-progress-bar span { display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,var(--wpm-brand-400),var(--wpm-brand)); transition:width .35s var(--wpm-ease); }

.quiz-card { background:var(--wpm-surface-1); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-lg);
  padding:clamp(24px,3vw,38px); }
.quiz-q-head { margin-bottom:24px; }
.quiz-q { font-family:var(--wpm-font-display); font-size:clamp(22px,3vw,30px); line-height:1.2; letter-spacing:-0.02em; margin:0; }
.quiz-q-desc { font-size:15px; line-height:1.6; color:var(--wpm-text-secondary); margin:10px 0 0; }
.quiz-q-hint { display:inline-block; margin:14px 0 0; font-family:var(--wpm-font-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--wpm-text-muted); background:var(--wpm-surface-2); border:1px solid var(--wpm-border-subtle); padding:4px 10px; border-radius:var(--wpm-radius-pill); }

.quiz-options { display:flex; flex-direction:column; gap:12px; }
.quiz-opt { display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%; cursor:pointer;
  padding:16px 18px; border-radius:var(--wpm-radius-md); background:var(--wpm-surface-2);
  border:1px solid var(--wpm-border); transition:var(--wpm-transition); color:inherit; }
.quiz-opt:hover { border-color:var(--wpm-border-strong); transform:translateY(-1px); }
.quiz-opt-mark { flex-shrink:0; width:22px; height:22px; margin-top:1px; border-radius:50%; border:2px solid var(--wpm-border-strong);
  position:relative; box-sizing:border-box; transition:var(--wpm-transition); }
.quiz-card.is-multiple .quiz-opt-mark { border-radius:7px; }
/* puce radio (choix unique) : point centre */
.quiz-opt-mark::after { content:""; position:absolute; top:50%; left:50%; box-sizing:border-box;
  width:10px; height:10px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%) scale(0); transition:transform var(--wpm-dur-fast) var(--wpm-ease); }
.quiz-opt.is-selected .quiz-opt-mark::after { transform:translate(-50%,-50%) scale(1); }
/* coche (choix multiple) : check centre, dessine avec deux bordures */
.quiz-card.is-multiple .quiz-opt-mark::after { top:46%; width:11px; height:6px; border-radius:0; background:none;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:translate(-50%,-50%) rotate(-45deg) scale(0); }
.quiz-card.is-multiple .quiz-opt.is-selected .quiz-opt-mark::after { transform:translate(-50%,-50%) rotate(-45deg) scale(1); }
.quiz-opt-label { display:block; font-size:15.5px; font-weight:600; color:var(--wpm-text-primary); }
.quiz-opt-desc { display:block; font-size:13px; line-height:1.5; color:var(--wpm-text-muted); margin-top:3px; }
.quiz-opt.is-selected { border-color:var(--wpm-brand); background:var(--wpm-brand-surface); }
.quiz-opt.is-selected .quiz-opt-mark { border-color:var(--wpm-brand); background:var(--wpm-brand); }

.quiz-nav { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:24px; }
.quiz-nav .btn[disabled] { opacity:.4; pointer-events:none; }

/* ---- RESULTS -------------------------------------------------------------- */
.quiz-results { padding:clamp(40px,6vw,80px) 0; }
.quiz-results-head { max-width:680px; margin:0 auto 40px; text-align:center; }
.quiz-results-head .eyebrow { display:inline-block; margin-bottom:16px; }
.quiz-results-head h2 { font-family:var(--wpm-font-display); font-size:clamp(26px,3.6vw,40px); line-height:1.12; letter-spacing:-0.025em; margin:0 0 12px; }
.quiz-results-head .sub { font-size:16px; line-height:1.6; color:var(--wpm-text-secondary); }

.quiz-price-card { position:relative; overflow:hidden; max-width:760px; margin:0 auto 34px; text-align:center;
  border:1px solid var(--wpm-brand); border-radius:var(--wpm-radius-lg);
  background:linear-gradient(160deg, var(--wpm-brand-surface), var(--wpm-surface-1)); padding:clamp(28px,4vw,48px); }
.qp-label { display:block; font-family:var(--wpm-font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--wpm-brand-300); margin-bottom:16px; }
.qp-range { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.qp-amount { font-family:var(--wpm-font-display); font-weight:700; font-size:clamp(36px,6vw,60px); line-height:1; letter-spacing:-0.03em; color:#fff; }
.qp-amount-max { color:var(--wpm-brand-300); }
.qp-sep { font-size:18px; color:var(--wpm-text-muted); }
.qp-breakdown { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 0; text-align:left; }
.qp-bd { display:flex; flex-direction:column; gap:4px; background:var(--wpm-surface-1); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-md); padding:14px 16px; }
.qp-bd svg { width:18px; height:18px; color:var(--wpm-brand-300); }
.qp-bd span { font-size:12.5px; color:var(--wpm-text-muted); }
.qp-bd b { font-size:14.5px; color:var(--wpm-text-primary); }
.qp-note { display:flex; align-items:flex-start; gap:9px; justify-content:center; margin:26px 0 0; font-size:13.5px; line-height:1.55; color:var(--wpm-text-secondary); }
.qp-note svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--wpm-accent-warm); }

.quiz-recap, .quiz-analysis, .quiz-tips, .quiz-capture { max-width:880px; margin:0 auto 28px; }
.quiz-recap h3, .quiz-tips h3, .qa-col h3 { display:flex; align-items:center; gap:9px; font-family:var(--wpm-font-display);
  font-size:19px; letter-spacing:-0.015em; margin:0 0 18px; }
.quiz-recap h3 svg, .quiz-tips h3 svg, .qa-col h3 svg { width:19px; height:19px; color:var(--wpm-brand-300); }
.quiz-recap-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.qr-item { display:flex; flex-direction:column; gap:5px; background:var(--wpm-surface-1); border:1px solid var(--wpm-border);
  border-radius:var(--wpm-radius-md); padding:14px 16px; }
.qr-item-full { grid-column:1 / -1; }
.qr-k { font-size:12.5px; color:var(--wpm-text-muted); }
.qr-v { font-size:14.5px; font-weight:600; color:var(--wpm-text-primary); }
.qr-tags { display:flex; flex-wrap:wrap; gap:7px; }
.qr-tag { font-size:12.5px; color:var(--wpm-brand-200); background:var(--wpm-brand-surface);
  border:1px solid color-mix(in srgb, var(--wpm-brand) 30%, transparent); padding:4px 10px; border-radius:var(--wpm-radius-pill); }

.quiz-analysis { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.qa-col { background:var(--wpm-surface-1); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-lg); padding:24px; }
.qa-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.qa-list li { position:relative; padding-left:28px; font-size:14px; line-height:1.55; color:var(--wpm-text-secondary); }
.qa-list li::before { position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.qa-strengths li::before { content:"\2713"; background:var(--wpm-success, #1f9d6b); }
.qa-improve li::before { content:"\2192"; background:var(--wpm-accent-warm); color:#3a1404; }

.quiz-tips-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.quiz-tip { display:flex; gap:14px; background:var(--wpm-surface-1); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-md); padding:18px; }
.quiz-tip-n { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--wpm-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.quiz-tip p { margin:0; font-size:13.5px; line-height:1.55; color:var(--wpm-text-secondary); }

/* ---- GATE : capture e-mail AVANT le resultat (double opt-in) -------------- */
.quiz-gate { position:relative; overflow:hidden; padding:clamp(50px,7vw,100px) 0; text-align:center; }
.quiz-gate-inner { position:relative; z-index:1; max-width:600px; }
.quiz-gate .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; }
.quiz-gate h2 { font-family:var(--wpm-font-display); font-size:clamp(26px,3.6vw,40px); line-height:1.12; letter-spacing:-0.025em; margin:0 0 14px; }
.quiz-gate p { font-size:16px; line-height:1.6; color:var(--wpm-text-secondary); max-width:52ch; margin:0 auto 30px; }
.quiz-lead-form { max-width:460px; margin:0 auto; text-align:left; }
.qlf-fields { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.qlf-input { width:100%; padding:14px 16px; font-size:15px; color:var(--wpm-text-primary);
  background:var(--wpm-surface-2); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-md);
  transition:var(--wpm-transition); }
.qlf-input::placeholder { color:var(--wpm-text-muted); }
.qlf-input:focus { outline:none; border-color:var(--wpm-brand); box-shadow:0 0 0 3px var(--wpm-brand-surface); }
.qlf-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.qlf-error { margin:12px 0 0; font-size:14px; color:var(--wpm-accent-warm); text-align:center; }
.qlf-disclaimer { display:flex; align-items:center; justify-content:center; gap:7px; margin:16px 0 0;
  font-size:12.5px; line-height:1.5; color:var(--wpm-text-muted); text-align:center; }
.qlf-disclaimer svg { width:14px; height:14px; flex-shrink:0; }
.quiz-capture-proof { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:26px;
  font-size:13.5px; color:var(--wpm-text-muted); }
.quiz-capture-proof .stat b { color:var(--wpm-text-primary); }
.quiz-capture-proof .sep { width:4px; height:4px; border-radius:50%; background:var(--wpm-border-strong); }

/* note de confirmation double opt-in (dans les resultats) */
.quiz-confirm-note { display:flex; align-items:flex-start; gap:12px; max-width:880px; margin:0 auto 28px;
  background:var(--wpm-brand-surface); border:1px solid color-mix(in srgb, var(--wpm-brand) 30%, transparent);
  border-radius:var(--wpm-radius-md); padding:16px 20px; font-size:14.5px; line-height:1.55; color:var(--wpm-text-secondary); }
.quiz-confirm-note svg { width:20px; height:20px; flex-shrink:0; color:var(--wpm-brand-300); margin-top:1px; }

.quiz-restart-wrap { text-align:center; margin-top:14px; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:760px) {
  .qp-breakdown { grid-template-columns:1fr; }
  .quiz-recap-grid, .quiz-analysis, .quiz-tips-grid { grid-template-columns:1fr; }
}