/* Quiz : uniquement les variables de la charte (DESIGN.md). Aucune valeur de couleur ou de taille en dur hors du bareme. */
.mqz-card { width: 100%; box-sizing: border-box; max-width: 68rem; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 0.4rem; padding: var(--space-l); }
.mqz-progress { margin-bottom: var(--space-m); }
.mqz-count { font-size: var(--text-s); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 var(--space-xs); }
.mqz-bar { height: 0.4rem; background: var(--surface-muted); border-radius: 0.4rem; overflow: hidden; }
.mqz-bar-fill { display: block; height: 100%; background: var(--accent); }
.mqz-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mqz-q { font-family: Fraunces; font-weight: 600; font-size: var(--text-xl); line-height: 1.15; color: var(--ink); margin: 0 0 var(--space-s); padding: 0; }
.mqz-q:focus { outline: none; }
.mqz-help, .mqz-meta { font-size: var(--text-s); line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--space-s); }
.mqz-text { font-size: var(--text-m); line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--space-s); }
.mqz-lead { font-size: var(--text-l); line-height: 1.45; color: var(--ink); margin: 0 0 var(--space-m); }
.mqz-link { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.mqz-opt { position: relative; display: block; margin: 0 0 var(--space-xs); cursor: pointer; }
.mqz-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mqz-opt-text { display: block; box-sizing: border-box; min-height: 3.2rem; padding: var(--space-s) var(--space-m) var(--space-s) calc(var(--space-m) + var(--space-l)); border: 1px solid var(--line); border-radius: 0.4rem; background: var(--surface); font-size: var(--text-m); line-height: 1.4; color: var(--ink); position: relative; }
.mqz-opt-text::before { content: ""; position: absolute; left: var(--space-m); top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; box-sizing: border-box; border: 2px solid var(--ink-soft); border-radius: 50%; background: var(--surface); }
.mqz-opt-check .mqz-opt-text::before { border-radius: 0.3rem; }
.mqz-opt:hover .mqz-opt-text { border-color: var(--ink-soft); }
.mqz-opt input:checked + .mqz-opt-text { border-color: var(--accent); background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--accent); }
.mqz-opt input:checked + .mqz-opt-text::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 0.25rem var(--surface-muted); }
.mqz-opt input:focus-visible + .mqz-opt-text { outline: 3px solid var(--accent); outline-offset: 2px; }
.mqz-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; margin-top: var(--space-m); }
.mqz-next, .mqz-go { display: inline-block; background: var(--accent); color: #ffffff; font-family: Work Sans; font-weight: 600; font-size: var(--text-m); line-height: 1.2; padding: var(--space-s) var(--space-l); border: 0; border-radius: 0.4rem; text-decoration: none; cursor: pointer; }
.mqz-next:hover, .mqz-go:hover { background: var(--accent-dark); color: #ffffff; }
.mqz-next:disabled { background: var(--ink-soft); cursor: not-allowed; opacity: 0.75; }
.mqz-secondary { background: var(--ink); }
.mqz-secondary:hover { background: var(--ink-soft); }
.mqz-back { background: transparent; border: 1px solid var(--line); border-radius: 0.4rem; color: var(--ink); font-family: Work Sans; font-size: var(--text-m); line-height: 1.2; padding: var(--space-s) var(--space-m); cursor: pointer; }
.mqz-back:hover { border-color: var(--ink); }
.mqz-urgent { font-size: var(--text-m); line-height: 1.5; font-weight: 600; color: var(--ink); background: var(--surface-muted); border-left: 0.4rem solid var(--accent); padding: var(--space-s) var(--space-m); margin: 0 0 var(--space-s); }
.mqz-reasons { margin: 0 0 var(--space-s); padding-left: var(--space-m); font-size: var(--text-m); line-height: 1.55; color: var(--ink-soft); }
.mqz-reasons li { margin: 0 0 var(--space-2xs); }
.mqz-block { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line); }
.mqz-h3 { font-family: Fraunces; font-weight: 600; font-size: var(--text-l); line-height: 1.2; color: var(--ink); margin: 0 0 var(--space-xs); }
.mqz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); margin-top: var(--space-s); }
.mqz-prod { box-sizing: border-box; background: var(--surface-muted); border-radius: 0.4rem; padding: var(--space-m); display: flex; flex-direction: column; }
.mqz-prod-fit { font-size: var(--text-s); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 var(--space-xs); }
.mqz-prod-fit.is-bon { color: var(--sage); }
.mqz-prod-name { font-family: Fraunces; font-weight: 600; font-size: var(--text-l); line-height: 1.2; color: var(--ink); margin: 0 0 var(--space-xs); }
.mqz-prod-brand { display: block; font-family: Work Sans; font-size: var(--text-s); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); }
.mqz-price { font-size: var(--text-m); line-height: 1.45; color: var(--ink); margin: 0 0 var(--space-xs); }
.mqz-prod-cta { margin-top: auto; padding-top: var(--space-s); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.mqz-badge { font-size: var(--text-s); font-weight: 600; color: var(--ink); border: 1px solid var(--ink); border-radius: 0.4rem; padding: var(--space-2xs) var(--space-xs); }
.mqz-empty { background: var(--surface-muted); border-left: 0.4rem solid var(--accent); padding: var(--space-s) var(--space-m); margin: var(--space-s) 0; border-radius: 0.4rem; }
.mqz-empty .mqz-text:last-child { margin-bottom: 0; }
@media (max-width: 991px) { .mqz-grid { grid-template-columns: 1fr; } }
@media (max-width: 478px) { .mqz-card { padding: var(--space-m) var(--space-s); } .mqz-actions .mqz-next, .mqz-actions .mqz-back { width: 100%; text-align: center; box-sizing: border-box; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.mqz-result { max-width: 96rem; }