/* ==========================================================================
   « Par où commencer ? » — parcours en 7 questions
   ========================================================================== */

.quiz-page { padding-top: 40px; padding-bottom: 24px; }
.quiz-header { max-width: 720px; margin-bottom: 28px; }
.quiz-header h1 { font-size: clamp(30px, 4.4vw, 42px); }
.quiz-header p.muted { margin-top: 8px; font-size: 16px; }
.quiz-card { max-width: 820px; }
.quiz-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.quiz-top .caption { white-space: nowrap; font-family: var(--mono); }
.quiz-progress { --p: 0%; flex: 1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.quiz-progress span { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, #4C6EF5, #B79CFF, #F5B8DA); transition: width 200ms var(--ease); }

.quiz-form { padding: 28px 24px; }
.quiz-intro { display: grid; gap: 18px; justify-items: start; }
.quiz-intro h2 { font-size: 22px; }
.quiz-promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.quiz-promises li { display: flex; gap: 10px; align-items: flex-start; color: var(--t2); }
.quiz-promises .ico { margin-top: 3px; color: var(--t1); }
.quiz-promises strong { color: var(--t0); font-weight: 500; }

.quiz-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-step legend { padding: 0; margin-bottom: 10px; }
.quiz-step h2 { font-size: clamp(20px, 2.8vw, 24px); line-height: 1.3; }
.quiz-why { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--t2); }
.quiz-why .ico { margin-top: 3px; color: var(--t3); }
.quiz-why strong { color: var(--t1); font-weight: 500; }
.quiz-options { display: grid; gap: 8px; margin-top: 20px; }
.quiz-option {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.quiz-option:hover { border-color: var(--glass-border-hover); background: var(--glass-hover); }
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option strong { display: block; font-size: 15px; font-weight: 500; color: var(--t0); }
.quiz-option small { display: block; margin-top: 2px; font-size: 13px; color: var(--t2); }
.quiz-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--b3); display: grid; place-items: center; }
.quiz-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 150ms; }
.quiz-option:has(input:checked) { border-color: var(--steel); background: rgba(220,230,255,.08); }
.quiz-option input:checked + .quiz-radio { border-color: var(--blue); background: var(--blue); }
.quiz-option input:checked + .quiz-radio::after { transform: scale(1); }
.quiz-option:has(input:focus-visible) { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 20px; }

/* Résultat */
.quiz-result { display: grid; gap: 28px; }
.quiz-recap { border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 0 18px; background: var(--glass); }
.quiz-recap summary { cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 500; color: var(--t0); }
.quiz-recap ul { list-style: none; margin: 0; padding: 0 0 8px; }
.quiz-recap li { display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--b1); font-size: 14px; }
.quiz-recap li span { color: var(--t3); font-size: 13px; }
.quiz-recap li strong { font-weight: 500; color: var(--t1); }
@media (max-width: 560px) { .quiz-recap li { grid-template-columns: 1fr auto; } .quiz-recap li span { grid-column: 1 / -1; } }

.quiz-alert, .quiz-warning { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; }
.quiz-alert { color: var(--t1); background: rgba(240, 180, 41, 0.08); border: 1px solid rgba(240, 180, 41, 0.3); }
.quiz-alert .ico, .quiz-warning .ico { margin-top: 3px; color: var(--mid); flex: none; }
.quiz-warning { color: var(--t1); background: var(--bg); border: 1px solid var(--b2); }

.quiz-profile { padding: 24px; display: grid; gap: 12px; }
.quiz-profile h2 { font-size: 26px; }
.quiz-profile .eyebrow { margin: 0; }
.quiz-mix { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--b1); display: grid; gap: 10px; }
.quiz-mix-title { font-size: 13px; color: var(--t2); }
.mix-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.mix-bar span { display: block; height: 100%; }
.mix-0 { background: var(--blue-text); }
.mix-1 { background: #7E9CD8; }
.mix-2 { background: var(--lilac); }
.mix-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--t2); }
.mix-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mix-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mix-legend b { font-weight: 500; color: var(--t0); }

.quiz-block h3 { font-size: 17px; margin-bottom: 14px; }
.quiz-why-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--b1); }
.quiz-why-list li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--b1); }
.quiz-why-list strong { font-weight: 500; color: var(--t0); font-size: 14px; }
.quiz-why-list span { color: var(--t2); font-size: 14px; }
.reco-why { padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; line-height: 1.5; color: var(--t1); background: var(--bg); border: 1px solid var(--b1); }
.quiz-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--t1); }
.quiz-steps li::marker { font-family: var(--mono); color: var(--t3); }
.quiz-message { padding: 24px; display: grid; gap: 12px; }
.quiz-message h2 { font-size: 22px; }
.quiz-message ul { margin: 0; padding-left: 20px; color: var(--t2); display: grid; gap: 6px; }
.quiz-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.quiz-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; font-size: 14px; color: var(--t1); }
.quiz-save .ico { color: var(--bull-text); flex: none; }