/* WiT? · Section Quiz · styles (couleurs et polices de la charte : fiche.css et charte.css) */
.qz-page { max-width: 820px; padding-bottom: 80px; }
.qz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.qz-menu { font: 600 1rem/1.2 var(--font-label, "Barlow Condensed", system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.qz-menu:hover, .qz-menu:focus-visible { text-decoration: underline; }
#qz { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.qz-bloc { background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.qz-bloc > p, .qz-bloc > ul, .qz-bloc > ol { margin: 0; }
.qz-h { margin: 0; font-size: 1.5rem; }
.qz-note { color: var(--muted); font-size: .95rem; margin: 0; }
.qz-champs { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.qz-champ { display: flex; flex-direction: column; gap: 4px; }
.qz-champs > .qz-champ { min-width: min(100%, 220px); flex: 1 1 220px; }
.qz-champ select { font: 1rem var(--font-text, Georgia, serif); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; max-width: 100%; }
.qz-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.qz-opt input { margin-top: .3em; width: 1.1em; height: 1.1em; flex: none; accent-color: var(--accent); }
.qz-opt small { display: block; color: var(--muted); font-size: .88rem; }
.qz-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.qz-import { cursor: pointer; }
.qz-liens { margin: 0; }
.qz-liens a { color: var(--accent); font-weight: 600; }
.qz-hist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.qz-hist li { display: grid; grid-template-columns: 4.5em 1fr auto auto; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--line); padding: 3px 0; }
.qz-hist li span:first-child, .qz-hist li span:nth-child(3) { color: var(--muted); font-size: .9rem; }
/* question */
.qz-etat { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font: 600 .9rem/1.3 var(--font-label, "Barlow Condensed", system-ui, sans-serif); letter-spacing: .04em; text-transform: uppercase; }
.qz-retour { color: var(--c-retenir, #855C0E); }
.qz-barre { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: -8px; }
.qz-barre span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.qz-carte { background: var(--surface); border: 2px solid var(--ink); border-radius: 10px; padding: 16px 18px; }
.qz-enonce { font-weight: 600; font-size: 1.1rem; margin: 0 0 12px; }
.qz-aff { list-style: none; padding: 0; margin: -4px 0 12px; }
.qz-aff li { margin: 3px 0; padding-left: 2.2em; text-indent: -2.2em; }
.qz-aff b { display: inline-block; width: 2.2em; text-indent: 0; color: var(--c-question, #35597A); font-family: var(--font-label, system-ui); }
.qz-choix { display: flex; flex-direction: column; gap: 8px; }
.qz-choix button { display: flex; gap: 12px; align-items: baseline; text-align: left; font: 1rem/1.4 var(--font-text, Georgia, serif); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; min-height: 48px; }
.qz-choix button:hover:not(:disabled), .qz-choix button:focus-visible { border-color: var(--ink); }
.qz-choix button .l { font: 700 .95rem var(--font-label, system-ui); color: var(--muted); min-width: 1.1em; }
.qz-choix button:disabled { cursor: default; }
.qz-choix button.juste { border-color: var(--c-conseil, #3B6A4C); background: color-mix(in srgb, var(--c-conseil, #3B6A4C) 12%, var(--surface)); }
.qz-choix button.faux { border-color: var(--bad, #A13A1C); background: color-mix(in srgb, var(--bad, #A13A1C) 12%, var(--surface)); }
.qz-choix button.juste .l::after { content: " ✓"; color: var(--c-conseil, #3B6A4C); }
.qz-choix button.faux .l::after { content: " ✗"; color: var(--bad, #A13A1C); }
#qz-retourne:not(:empty) { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
#qz-retourne p { margin: 0; }
.qz-verdict { font: 700 1.1rem var(--font-label, system-ui); letter-spacing: .03em; }
.qz-verdict.ok, .qz-ok { color: var(--c-conseil, #3B6A4C); }
.qz-verdict.ko, .qz-ko { color: var(--bad, #A13A1C); }
.qz-expl { background: color-mix(in srgb, var(--c-question, #35597A) 8%, var(--surface)); border-radius: 8px; padding: 8px 10px; }
.qz-bas { justify-content: flex-end; }
/* état des lieux */
.qz-grand { font: 600 2.6rem/1 var(--font-titre, "Cormorant Garamond", Georgia, serif); color: var(--accent); }
.qz-grand small { font-size: 1.2rem; margin-left: .5em; color: var(--muted); }
.qz-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.qz-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; }
.qz-table td:nth-child(n+2) { text-align: right; white-space: nowrap; width: 4.5em; }
.qz-table a { color: inherit; }
.qz-ratees { padding-left: 1.3em; display: flex; flex-direction: column; gap: 14px; }
.qz-ratees > li > p { margin: 4px 0; }
.qz-ratees .qz-enonce { font-size: 1rem; margin: 0; }
.qz-badges { padding-left: 1.2em; }
@media (max-width: 520px) { .qz-carte { padding: 14px 12px; } .qz-hist li { grid-template-columns: 4em 1fr auto; } .qz-hist li span:nth-child(3) { display: none; } }