/* =====================================================================
   Guide de choix « Trouver mon équipement » (wizard 4 questions)
   Complète assets/css/site.css : la base (carte, options, progression)
   reste dans site.css, ce fichier ajoute les écrans du parcours —
   résultats, appel à l'action, message d'indisponibilité.
   ===================================================================== */

/* Les étapes non actives restent masquées même si le CSS de base est ailleurs. */
.wizard-step[hidden] { display: none !important; }

.wizard-step-help { color: var(--muted); font-size: .92rem; margin: -14px 0 22px; max-width: 62ch; }

/* --- Bandeau d'indisponibilité (fail-closed) --- */
.wizard-notice { display: flex; gap: 18px; align-items: flex-start; background: #fdf6ec; border: 1px solid #f2d9b0; border-radius: 14px; padding: 22px 24px; }
.wizard-notice > i { font-size: 1.5rem; color: #b45309; margin-top: 2px; flex-shrink: 0; }
.wizard-notice-corps h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--ink); }
.wizard-notice-corps p { margin: 0 0 16px; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.wizard-notice-actions, .wizard-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* --- Avertissement d'assouplissement du filtrage --- */
.wizard-relax { display: flex; gap: 12px; align-items: flex-start; background: #eef6ff; border: 1px solid #cfe3fb; border-radius: 12px; padding: 14px 18px; margin: 0 0 24px; color: #1f3d5c; font-size: .88rem; line-height: 1.55; }
.wizard-relax i { color: var(--blue); margin-top: 3px; flex-shrink: 0; }

/* --- Cartes de résultats --- */
.wizard-results { display: grid; gap: 18px; margin: 0 0 30px; }
.wizard-result-item { display: flex; gap: 20px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fff; }
.wizard-result-media { width: 148px; flex: 0 0 148px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--paper); border-radius: 10px; overflow: hidden; }
.wizard-result-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wizard-result-sans-image { color: var(--muted); font-size: 1.6rem; }
.wizard-result-body { flex: 1 1 auto; min-width: 0; }
.wizard-result-rang { display: inline-block; font-size: .7rem; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.wizard-result-body h4 { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.3; }
.wizard-result-body h4 a { color: var(--ink); text-decoration: none; }
.wizard-result-body h4 a:hover { color: var(--blue); text-decoration: underline; }
.wizard-result-attributs { margin: 0 0 10px; font-size: .82rem; font-weight: 600; color: var(--blue); }
.wizard-result-why { margin: 0 0 14px; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.wizard-result-why strong { color: var(--ink); }
.wizard-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* --- Appel à l'action et cas sans résultat --- */
.wizard-cta, .wizard-conseil { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; margin-bottom: 22px; }
.wizard-cta h3, .wizard-conseil h3 { margin: 6px 0 10px; font-size: 1.2rem; }
.wizard-cta p, .wizard-conseil p { margin: 0 0 16px; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.wizard-nav-result { justify-content: space-between; flex-wrap: wrap; gap: 12px; }

@media (max-width: 991px) {
    .wizard-result-item { flex-direction: column; }
    .wizard-result-media { width: 100%; flex: 0 0 auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
    .wizard-notice { flex-direction: column; gap: 12px; padding: 20px; }
    .wizard-cta-actions, .wizard-notice-actions { flex-direction: column; align-items: stretch; }
    .wizard-result-actions .button, .wizard-cta-actions .button, .wizard-notice-actions .button { justify-content: center; }
    .wizard-step-help { margin-top: -8px; }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-step.active { animation: none; }
    .wizard-progress-fill { transition: none; }
}