/* public/css/quiz-inflammation.css */
:root { --qz-blue:#0EA5E9; --qz-ember:#ef4444; --qz-ink:#0f172a; --qz-muted:#475569; }

.qz-screen { animation: qz-in .35s ease both; }
@keyframes qz-in { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
.qz-reveal { animation: qz-reveal .55s .1s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes qz-reveal { from { opacity:0; transform:translateY(10px) scale(.96) } to { opacity:1; transform:none } }

/* --- Jauge instrument (SVG habillé par CSS) --- */
.qz-gauge { position:relative; max-width:360px; margin:0 auto 18px; }
.qz-gauge-label { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--qz-muted); text-align:center; margin-bottom:6px; }
.qz-gauge-track { position:relative; height:16px; border-radius:99px; background:linear-gradient(90deg,#22c55e 0%,#f59e0b 55%,#ef4444 100%); box-shadow:0 2px 4px rgba(15,23,42,.08); }
.qz-gauge-ticks { position:absolute; inset:0; display:flex; justify-content:space-between; padding:0 3px; pointer-events:none; }
.qz-gauge-ticks i { width:1px; height:16px; background:rgba(15,23,42,.28); opacity:.3; }
.qz-gauge-zones { display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--qz-muted); margin-top:5px; }
.qz-gauge-needle { position:absolute; top:-5px; width:3px; height:26px; background:var(--qz-ink); border-radius:2px; box-shadow:0 0 0 2px #fff; left:0; transition:left .5s cubic-bezier(.34,1.56,.64,1); }
.qz-gauge-needle::after { content:''; position:absolute; left:-4px; top:-4px; width:11px; height:11px; border-radius:50%; background:var(--qz-ink); }

/* --- Question + options (>=48px) --- */
.qz-q { font-size:15px; font-weight:700; color:var(--qz-ink); line-height:1.35; letter-spacing:.01em; margin:14px 0 12px; text-align:center; }
.qz-opts { display:flex; flex-direction:column; gap:8px; }
.qz-opt { display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:14px; color:#334155; background:#fff; cursor:pointer; text-align:left; transition:border-color .15s, background .15s; }
.qz-opt:hover { border-color:#94a3b8; }
.qz-opt.is-picked { border-color:var(--qz-blue); background:linear-gradient(135deg, rgba(16,185,129,.05), rgba(14,165,233,.09)); }
.qz-opt:focus-visible { outline:2px solid var(--qz-blue); outline-offset:2px; }
.qz-opt .qz-letter { width:22px; height:22px; border-radius:6px; background:#f1f5f9; color:#64748b; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qz-opt.is-picked .qz-letter { background:var(--qz-blue); color:#fff; }

/* --- Progression non-numérique --- */
.qz-progress-dots { display:flex; gap:5px; justify-content:center; margin-top:14px; }
.qz-progress-dots i { width:6px; height:6px; border-radius:50%; background:#e2e8f0; }
.qz-progress-dots i.done { background:var(--qz-blue); }
.qz-almost { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--qz-muted); text-align:center; margin-top:8px; }

/* --- Interstitiel + assemblage terminal --- */
.qz-inter { background:#f0f9ff; border:1px solid #bae6fd; border-radius:12px; padding:14px 16px; font-size:13px; color:#0369a1; line-height:1.5; }
.qz-term { background:#0b1220; border-radius:12px; padding:14px; font-family:'JetBrains Mono',monospace; }
.qz-term .qz-tl { font-size:10px; color:#38bdf8; letter-spacing:.08em; }
.qz-term .qz-line { font-size:11px; color:#cbd5e1; margin-top:6px; opacity:0; }
.qz-term .qz-line.show { opacity:1; transition:opacity .3s; }

/* --- Résultat --- */
.qz-badge { display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.qz-badge .qz-lvl { font-weight:800; font-size:24px; line-height:1.15; letter-spacing:-.01em; color:var(--qz-ink); }
#result-root { scroll-margin-top: 84px; }
.qz-badge .qz-dom { font-size:11px; color:var(--qz-muted); }
.qz-hero { position:relative; border:1.5px solid var(--qz-blue); border-radius:14px; padding:16px 14px; background:linear-gradient(135deg, rgba(14,165,233,.06), #fff); margin-top:14px; }
.qz-hero .qz-tag { position:absolute; top:-9px; left:12px; background:var(--qz-blue); color:#fff; font-size:9px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:99px; }
.qz-stair-step { border-left:3px solid #e2e8f0; padding:2px 0 2px 12px; margin:10px 0; }
.qz-stair-step.is-active { border-left-color:var(--qz-blue); }
.qz-stair-step .qz-st { font-size:11px; font-weight:800; color:var(--qz-ink); }
.qz-oto { border:1px dashed var(--qz-blue); border-radius:12px; padding:14px; margin-top:16px; }
.qz-timer { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:18px; color:var(--qz-ink); }
@media (max-width:480px) { .qz-timer { font-size:16px; } }

/* --- Carte-produit UNIFIÉE : héros / compacte / consultation (même ADN, densité variable) --- */
.qz-pcard { display:flex; gap:12px; align-items:center; padding:12px; border:1px solid #E2EAF2; border-radius:14px; background:#fff; text-decoration:none; color:inherit; min-height:72px; transition:border-color .15s, box-shadow .15s, transform .15s; }
a.qz-pcard:hover { border-color:var(--qz-blue); box-shadow:0 6px 18px rgba(2,132,199,.10); }
a.qz-pcard:active { transform:scale(.995); }
.qz-pcover { flex:0 0 auto; width:44px; aspect-ratio:5/7; border-radius:3px; overflow:hidden; box-shadow:0 2px 6px rgba(15,23,42,.14); background:#eef2f6; }
.qz-pcover img { width:100%; height:100%; object-fit:cover; display:block; }
.qz-pbody { min-width:0; flex:1 1 auto; }
.qz-pkicker { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#64748b; margin-bottom:1px; }
.qz-pname { font-size:14px; font-weight:600; color:var(--qz-ink); line-height:1.25; }
.qz-pmeta { display:flex; align-items:center; gap:5px; flex:0 0 auto; color:var(--qz-blue); font-weight:700; white-space:nowrap; font-size:14px; }

/* Héros : la carte focale (couverture 88px + halo bleu + OTO fondu dedans) */
.qz-pcard--hero { flex-direction:column; align-items:stretch; gap:0; padding:16px; border:1.5px solid var(--qz-blue); background:linear-gradient(135deg,rgba(14,165,233,.06),#fff); position:relative; overflow:hidden; }
.qz-pcard--hero .qz-hero-top { display:flex; gap:14px; align-items:flex-start; }
.qz-pcard--hero .qz-pcover { width:88px; border-radius:3px 6px 6px 3px; box-shadow:0 3px 10px rgba(15,23,42,.14); }
.qz-hero-tag { display:inline-block; background:var(--qz-blue); color:#fff; font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:99px; margin-bottom:8px; }
.qz-hero-oto { margin-top:12px; padding-top:12px; border-top:1px solid #E2EAF2; }

/* Consultation : tuile-service SVG à la place d'une couverture */
.qz-ptile { flex:0 0 auto; width:44px; height:62px; border-radius:6px; background:linear-gradient(135deg,#F0F9FF,#EAF1F8); border:1px solid #E2EAF2; display:flex; align-items:center; justify-content:center; color:var(--qz-blue); }

/* --- Bandeau-chapitre : liant narratif entre les sections --- */
.qz-chapter { display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--qz-ink); font-weight:800; margin:28px 0 10px; padding-top:18px; border-top:1px solid #E2EAF2; }
.qz-chapter::before { content:''; flex:0 0 auto; width:18px; height:3px; border-radius:2px; background:var(--qz-blue); }
.qz-lead { font-size:13.5px; color:var(--qz-muted); line-height:1.55; margin:0 0 12px; }

/* --- Tête dashboard : 6 barres systèmes sous la jauge --- */
.qz-sysbars { max-width:360px; margin:-6px auto 16px; }
.qz-sysbars-track { display:flex; gap:5px; align-items:flex-end; height:30px; }
.qz-sysbars-track > i { flex:1; border-radius:2px 2px 0 0; background:#CBD5E1; min-height:3px; transition:height .55s ease; }
.qz-sysbars-labels { display:flex; gap:5px; margin-top:4px; }
.qz-sysbars-labels > span { flex:1; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.01em; text-transform:uppercase; color:#64748b; text-align:center; white-space:nowrap; overflow:hidden; }

/* --- Accessibilité mouvement --- */
@media (prefers-reduced-motion: reduce) {
  .qz-screen, .qz-reveal, .qz-gauge-needle, .qz-term .qz-line, .qz-sysbars-track > i { animation:none !important; transition:none !important; }
}