/* CleanyPest : quiz et outils interactifs des articles (23/10/2026). Mêmes jetons que v3.css (--bg2, --dark2, --accent, --r2). */
.outil,.quiz{margin:40px 0;background:var(--bg2);border-radius:var(--r);padding:clamp(22px,3.2vw,36px)}
.outil-tete,.quiz-tete{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);font-weight:600}
.outil h3,.quiz h3{margin:0 0 8px;font-size:clamp(22px,2.4vw,28px)}
.outil-intro,.quiz-intro{color:var(--texte2);margin:0 0 22px;font-size:16px}
.outil fieldset{margin:0 0 18px;padding:0;border:0}
.outil legend{font-weight:600;font-size:16.5px;margin:0 0 10px;padding:0}
.outil-choix{display:flex;flex-wrap:wrap;gap:8px}
.outil-choix label{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ligne);border-radius:980px;padding:10px 16px;font-size:15.5px;cursor:pointer;line-height:1.3;transition:border-color .2s,background .2s}
.outil-choix label:hover{border-color:var(--texte3)}
.outil-choix input{accent-color:var(--accent);margin:0}
.outil-choix label:has(input:checked){border-color:var(--accent);background:#fff5f5}
.outil-res{background:var(--dark2);color:#f5f5f7;border-radius:var(--r2);padding:22px 24px;margin-top:8px}
.outil-res h4{color:#fff;font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
.outil-res p{margin:0 0 10px;font-size:16px;line-height:1.5;color:#e8e8ed}
.outil-res ul{margin:0 0 12px;padding-left:20px;color:#e8e8ed;font-size:16px;line-height:1.5}
.outil-res a{color:#ff8a8a}
.outil-res .outil-base{font-size:13.5px;color:#a1a1a6;margin:8px 0 0}
.outil-attente{color:#a1a1a6;font-size:15.5px;margin:0}
/* sans JavaScript, tous les verdicts restent lisibles, les uns sous les autres */
.outil:not(.outil-js) [data-verdict]+[data-verdict]{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;margin-top:14px}
.outil:not(.outil-js) [data-attente]{display:none}
/* checklist */
.cl-zone{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center;background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:14px 16px;margin:0 0 10px}
.cl-zone p{margin:0;font-size:15.5px;line-height:1.45}
.cl-zone b{display:block;font-size:16px}
.cl-zone .outil-choix label{padding:8px 14px;font-size:14.5px}
.cl-zone.z-ok{border-color:#9fd3ad}
.cl-zone.z-alerte{border-color:var(--accent);background:#fff5f5}
.cl-avance{display:flex;align-items:center;gap:12px;margin:4px 0 16px;font-size:14.5px;color:var(--texte2)}
.cl-barre{flex:1;height:8px;border-radius:980px;background:var(--bg3);overflow:hidden}
.cl-barre i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease2)}
@media (max-width:640px){.cl-zone{grid-template-columns:1fr}}
/* quiz */
.quiz-q{margin:0 0 22px}
.quiz-q>p{font-weight:600;font-size:16.5px;margin:0 0 10px}
.quiz-opts{display:grid;gap:8px}
.quiz-opt{font:inherit;font-size:15.5px;text-align:left;background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:12px 16px;cursor:pointer;color:var(--texte);transition:border-color .2s,background .2s}
.quiz-opt:hover:not(:disabled){border-color:var(--texte3)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.bon{border-color:#1a7f37;background:#eef8f1}
.quiz-opt.faux{border-color:var(--accent);background:#fff5f5}
.quiz-explic{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--texte2)}
.quiz-js .quiz-explic{display:none}
.quiz-js .repondu .quiz-explic{display:block}
.quiz-js .q-bon .quiz-explic::before{content:"Bonne réponse. ";font-weight:600;color:#1a7f37}
.quiz-js .q-faux .quiz-explic::before{content:"Pas tout à fait. ";font-weight:600;color:var(--accent2)}
.quiz:not(.quiz-js) .quiz-opt[data-ok]{border-color:#1a7f37}
.quiz-score{background:var(--dark2);color:#f5f5f7;border-radius:var(--r2);padding:20px 22px}
.quiz-score p{margin:0 0 8px;color:#e8e8ed;font-size:16px;line-height:1.5}
.quiz-score .qs-total{font-size:22px;color:#fff;font-weight:600}
.quiz-score button{font:inherit;font-size:15px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:980px;padding:8px 16px;cursor:pointer;margin-top:6px}