/* ============================================================
   Quiz d'orientation — formation-marketing-ia.fr
   Objectif : qualifier le lecteur en 4 questions et l'envoyer
   vers la bonne porte d'entrée LiveMentor, gratuite ou payante.
   ============================================================ */

.quiz{
  background:
    radial-gradient(80% 100% at 100% 0%,rgba(167,139,250,.16),transparent 60%),
    var(--paper);
  border:1px solid var(--line-strong);border-radius:16px;
  padding:clamp(24px,4vw,44px);position:relative;overflow:hidden;
}
.quiz::before{
  content:"";position:absolute;inset:auto auto -40% -20%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(200,255,77,.14),transparent 66%);pointer-events:none;
}
.quiz__bar{height:3px;background:var(--line);border-radius:100px;overflow:hidden;margin-bottom:26px}
.quiz__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rust),var(--pine));
  transition:width .45s var(--ease)}

.quiz__step{display:none;animation:qin .42s var(--ease)}
.quiz__step.is-on{display:block}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.quiz__count{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:12px}
.quiz__q{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.06;
  letter-spacing:-.02em;margin:0 0 22px;text-wrap:balance}

.quiz__opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.quiz__opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px 18px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--line);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.quiz__opt:hover{border-color:var(--rust);background:var(--paper-3);transform:translateX(3px)}
.quiz__opt:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.quiz__opt em{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;font-style:normal;font-size:.72rem;font-weight:800;
  background:rgba(167,139,250,.16);color:var(--rust);
}
.quiz__opt span{font-size:.94rem;font-weight:500;line-height:1.4}

.quiz__back{margin-top:18px;font-size:.8rem;color:var(--ink-soft);text-decoration:underline}
.quiz__back:hover{color:var(--ink-2)}

/* ---------- Résultat ---------- */
.quiz__res{display:none;text-align:center}
.quiz__res.is-on{display:block;animation:qin .5s var(--ease)}
.quiz__res-tag{
  display:inline-block;padding:5px 13px;border-radius:100px;margin-bottom:16px;
  background:var(--pine);color:#fff;
  font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.quiz__res h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,4.4vw,2.7rem);
  line-height:1.05;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.quiz__res p{color:var(--ink-2);max-width:54ch;margin:0 auto 26px;font-size:.98rem}
.quiz__res .cta-row{justify-content:center}
.quiz__res-note{font-size:.76rem;color:var(--ink-soft);margin-top:16px}
.quiz__restart{margin-top:20px;font-size:.8rem;color:var(--ink-soft);text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  .quiz__step,.quiz__res{animation:none}
  .quiz__opt:hover{transform:none}
}


/* Ajustements pour le thème clair du site */
.quiz{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--paper-3)}
.quiz__opt{border:2px solid var(--line-strong);border-radius:8px}
.quiz__opt:hover{border-color:var(--rust)}
.quiz__q,.quiz__res h3{font-family:var(--display);font-weight:800;letter-spacing:-.032em}
.quiz__res-tag{background:var(--pine);color:#fff;border-radius:4px}
.quiz__opt em{border-radius:5px;background:rgba(217,83,43,.14);color:var(--rust)}