/* quiz.css : style du quiz d'auto-évaluation des pages de vente.
   À charger APRÈS style-musicouleurs.css. Couleur d'accent : variable --onglets du site (ou --q-acc sur la section).
   Réglage du menu fixe du site : --q-offset (par défaut 70px). */
#section-quiz{--q-acc:var(--onglets,#b5452a);--q-ok:#2e7d4f;--q-ko:#b3261e;--q-bg:#fff;--q-tx:#2a2420;--q-soft:#f5f1ec;
  padding:3rem 1rem;box-sizing:border-box;background-color: var(--mist);border-top: 1px solid var(--mist-dark)}
#section-quiz *{box-sizing:border-box}
#section-quiz [hidden]{display:none!important}
#section-quiz .q-wrap{max-width:760px;margin:0 auto;background:var(--q-bg);color:var(--q-tx);border-radius:14px;
  padding:2rem 1.5rem;box-shadow:0 2px 18px rgba(0,0,0,.12);font-size:1.05rem;line-height:1.55;scroll-margin-top:calc(var(--q-offset,70px) + 10px)}
#section-quiz h2{margin:0 0 .4rem;text-align:center}
#section-quiz .q-intro{text-align:center;margin:0 0 1.5rem}
#section-quiz .q-choice{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#section-quiz .q-mode{font:inherit;color:inherit;text-align:center;padding:1.2rem 1rem;border:2px solid var(--q-acc);border-radius:12px;background:var(--q-bg);cursor:pointer}
#section-quiz .q-mode:hover{background:var(--q-soft)}
#section-quiz .q-mode b{display:block;font-size:1.15rem;margin-bottom:.3rem}
#section-quiz .q-mode span{font-size:.95rem}
#section-quiz .q-choice.one{grid-template-columns:1fr}
#section-quiz .q-note{margin:1.2rem 0 0;padding:.7rem .9rem;background:var(--q-soft);border-left:5px solid var(--q-acc);border-radius:6px;font-size:.98rem}
#section-quiz #qPlay{min-height:400px;display:flex;flex-direction:column}
#section-quiz #qTitle{margin:0 0 .9rem;font-size:1.15rem;outline:none}
#section-quiz .q-opts{display:grid;gap:.5rem}
#section-quiz .q-opts button{font:inherit;text-align:left;padding:.65rem .9rem;border:2px solid #d8cfc5;border-radius:8px;background:var(--q-bg);color:inherit;cursor:pointer}
#section-quiz .q-opts button:hover:not(:disabled){border-color:var(--q-acc)}
#section-quiz .q-opts button:focus-visible,#section-quiz .q-mode:focus-visible{outline:3px solid var(--q-acc);outline-offset:2px}
#section-quiz .q-opts button.ok{border-color:var(--q-ok);background:#e8f5ed}
#section-quiz .q-opts button.ko{border-color:var(--q-ko);background:#fbeaea}
#section-quiz .q-opts button:disabled{cursor:default}
#section-quiz .q-exp{margin:.9rem 0 0;padding:.6rem .9rem;background:var(--q-soft);border-radius:8px;font-size:.98rem}
#section-quiz .q-nav{margin:1rem 0;text-align:center}
#section-quiz .q-nav button{font:inherit;font-weight:700;padding:.8rem 1.6rem;border:0;border-radius:8px;background:var(--q-acc);color:#fff;cursor:pointer}
#section-quiz .q-nav button:focus-visible{outline:3px solid var(--q-tx);outline-offset:2px}
#section-quiz .q-prog{margin-top:auto;padding:.6rem .9rem .7rem;border:2px solid var(--q-acc);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
#section-quiz .q-stat{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.2rem 1rem;font-size:.92rem;margin-bottom:.4rem}
#section-quiz .q-bar{height:8px;background:var(--q-soft);border-radius:4px;overflow:hidden}
#section-quiz .q-bar i{display:block;height:100%;width:0;background:var(--q-acc);transition:width .3s}
#section-quiz .q-result{padding:1.5rem;border-radius:12px;background:var(--q-soft);border-left:6px solid var(--q-acc);text-align:center;outline:none}
#section-quiz .q-score{font-size:1.4rem;font-weight:700;margin:0 0 .5rem}
#section-quiz .q-result a.btn-acheter-1{display:inline-block;margin:.8rem 0 .4rem;padding: 10px 25px;}
#section-quiz .q-link{font:inherit;margin:.6rem .6rem 0;background:none;border:0;text-decoration:underline;cursor:pointer;color:inherit}
#section-quiz h3#qTitle {text-transform: none;}
@media (max-width:560px){#section-quiz .q-choice{grid-template-columns:1fr}#section-quiz .q-wrap{padding:1.5rem 1rem}}
@media (prefers-reduced-motion:reduce){#section-quiz .q-bar i{transition:none}}