/* Simulateur de prix — styles propres au composant. Mobile d'abord (testé à 390 px).
   Toutes les classes sont préfixées .simu pour ne rien heurter dans style.css.
   Les variables reprennent celles du site avec des replis sûrs. */

.simu{
  --simu-navy: var(--navy, #12305a);
  --simu-orange: var(--orange, #e8730c);
  --simu-line: var(--line, #dfe5ee);
  --simu-muted: var(--muted, #61708a);
  --simu-bg: var(--bg, #f6f8fb);
  --simu-ink: var(--ink, #1b2430);
  --simu-ok: #1f7a4d;
  --simu-err: #b3261e;
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 16px 24px;
  background: #fff;
  border: 1px solid var(--simu-line);
  border-radius: 14px;
  color: var(--simu-ink);
  box-shadow: 0 12px 34px rgba(18,48,90,.08);
}

/* ---------- en-tête ---------- */
.simu-entete{margin-bottom:14px}
.simu-titre{font-size:1.35rem;margin:0 0 .3em;color:var(--simu-navy);line-height:1.2}
.simu-sous-titre{margin:0;color:var(--simu-muted);font-size:.98rem}
.simu-confiance{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;
  padding:7px 12px;background:#eef7f0;border:1px solid #cfe6d6;border-radius:999px;
  font-size:.86rem;color:#1f5c3d}
.simu-confiance strong{font-weight:700}
.simu-confiance-coche{font-weight:800;color:var(--simu-ok)}

/* ---------- barre de progression ---------- */
.simu-progress{height:8px;background:var(--simu-bg);border:1px solid var(--simu-line);
  border-radius:999px;overflow:hidden;margin:6px 0 8px}
.simu-progress-bar{height:100%;background:var(--simu-orange);width:25%;
  transition:width .25s ease}
.simu-progress-txt{margin:0 0 16px;font-size:.88rem;color:var(--simu-muted);font-weight:600}

/* ---------- étapes ---------- */
.simu-etape{border:0;margin:0;padding:0}
.simu-step-titre{font-size:1.15rem;margin:0 0 .35em;color:var(--simu-navy)}
.simu-step-titre:focus-visible{outline:3px solid var(--simu-orange);outline-offset:3px;border-radius:6px}
.simu-step-sub{margin:0 0 18px;color:var(--simu-muted);font-size:.95rem}

/* ---------- champs ---------- */
.simu-field{margin-bottom:16px}
.simu-label{display:block;font-weight:600;font-size:.92rem;color:var(--simu-navy);margin-bottom:6px}
.simu-opt-txt{font-weight:400;color:var(--simu-muted)}
.simu-input{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:1rem;
  color:var(--simu-ink);background:#fff;border:1px solid var(--simu-line);border-radius:10px}
.simu-input:focus{outline:2px solid var(--simu-orange);border-color:var(--simu-orange)}
.simu-fieldset{border:0;margin:0 0 18px;padding:0}
.simu-fieldset legend{margin-bottom:8px}

/* ---------- cartes de l'étape 1 ---------- */
.simu-cartes{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:18px}
@media (min-width:560px){.simu-cartes{grid-template-columns:1fr 1fr}}
.simu-carte{position:relative;display:block;padding:16px 16px 16px 48px;min-height:64px;
  background:#fff;border:2px solid var(--simu-line);border-radius:12px;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s}
.simu-carte:hover{border-color:#c3cfe0}
.simu-carte.simu-on{border-color:var(--simu-orange);background:#fff7ef;
  box-shadow:0 6px 18px rgba(232,115,12,.16)}
.simu-carte-corps{display:block}
.simu-carte-titre{display:block;font-weight:700;color:var(--simu-navy);margin-bottom:2px}
.simu-carte-desc{display:block;font-size:.88rem;color:var(--simu-muted);line-height:1.45}
.simu-carte:focus-within{outline:3px solid var(--simu-orange);outline-offset:2px}

/* pastille radio dessinée (l'input natif reste présent, focusable) */
.simu-radio{position:absolute;left:16px;top:18px;width:22px;height:22px;margin:0;
  appearance:none;-webkit-appearance:none;border:2px solid #b9c4d6;border-radius:50%;
  background:#fff;cursor:pointer}
.simu-radio:checked{border-color:var(--simu-orange);background:
  radial-gradient(circle,var(--simu-orange) 0 45%,#fff 46% 100%)}
.simu-radio:focus-visible{outline:3px solid var(--simu-orange);outline-offset:2px}

/* ---------- options de l'étape 3 ---------- */
.simu-opts{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){.simu-opts{grid-template-columns:1fr 1fr}}
.simu-opt{position:relative;display:flex;align-items:center;min-height:52px;
  padding:12px 14px 12px 46px;background:#fff;border:2px solid var(--simu-line);
  border-radius:10px;cursor:pointer;font-weight:600;color:var(--simu-navy);
  transition:border-color .15s,background .15s}
.simu-opt:hover{border-color:#c3cfe0}
.simu-opt.simu-on{border-color:var(--simu-orange);background:#fff7ef}
.simu-opt:focus-within{outline:3px solid var(--simu-orange);outline-offset:2px}
.simu-opt .simu-radio{top:50%;transform:translateY(-50%)}

/* ---------- aide surface ---------- */
.simu-aide{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 10px}
.simu-aide-txt{font-size:.9rem;color:var(--simu-muted);font-weight:600}
.simu-chip{min-height:48px;padding:10px 16px;font:inherit;font-size:.95rem;font-weight:600;
  color:var(--simu-navy);background:var(--simu-bg);border:1px solid var(--simu-line);
  border-radius:999px;cursor:pointer}
.simu-chip:hover{background:#eef3fa;border-color:#c3cfe0}
.simu-chip:focus-visible{outline:3px solid var(--simu-orange);outline-offset:2px}
.simu-indice{margin:0 0 6px;font-size:.85rem;color:var(--simu-muted)}
.simu-inconnu{margin-top:12px;padding:14px;background:var(--simu-bg);
  border:1px dashed var(--simu-line);border-radius:12px}
.simu-inconnu-intro{margin:0 0 12px;font-size:.92rem;color:var(--simu-navy)}
.simu-msg{margin:8px 0 0;font-size:.92rem}
.simu-msg-ok{color:var(--simu-ok);font-weight:600}

/* ---------- consentement, piège, erreurs, navigation ---------- */
.simu-consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 16px;
  font-size:.9rem;color:var(--simu-ink);cursor:pointer}
.simu-consent input{width:24px;height:24px;flex:0 0 auto;margin-top:2px;accent-color:var(--simu-orange)}
.simu-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.simu-erreur{margin:6px 0 12px;padding:10px 12px;background:#fdecea;border:1px solid #f3c2bd;
  border-radius:8px;color:var(--simu-err);font-size:.92rem;font-weight:600}
.simu-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.simu-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 22px;font:inherit;font-size:1rem;font-weight:700;
  border-radius:10px;border:2px solid transparent;text-decoration:none;cursor:pointer;
  line-height:1.2}
.simu-btn:focus-visible{outline:3px solid var(--simu-navy);outline-offset:2px}
.simu-btn-primary{background:var(--simu-orange);color:#fff}
.simu-btn-primary:hover{background:var(--orange-d,#c85f04)}
.simu-btn-primary:disabled{opacity:.65;cursor:progress}
.simu-btn-ghost{background:#fff;color:var(--simu-navy);border-color:var(--simu-line)}
.simu-btn-ghost:hover{background:var(--simu-bg)}
.simu-btn-submit{flex:1 1 auto}
.simu-nav .simu-btn-ghost{flex:0 0 auto}

/* ---------- écran final ---------- */
.simu-final{text-align:center;padding:8px 0 4px}
.simu-final-libelle{margin:0 0 8px;color:var(--simu-muted);font-weight:600}
.simu-final-fourchette{display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:0 0 12px}
.simu-final-entre,.simu-final-et{font-size:.95rem;color:var(--simu-muted);font-weight:600}
.simu-final-fourchette strong{font-size:2rem;line-height:1.15;color:var(--simu-navy);
  letter-spacing:-.01em}
.simu-final-surface{margin:0 0 10px;font-size:.9rem;color:var(--simu-muted)}
.simu-final-note{margin:0 auto 14px;max-width:52ch;font-size:.88rem;color:var(--simu-muted)}
.simu-final-cta-texte{margin:0 0 14px;font-size:.98rem;color:var(--simu-ink);font-weight:600}
.simu-final-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
@media (min-width:560px){.simu-final-actions{flex-direction:row;justify-content:center}}
.simu-final-actions .simu-btn{justify-content:center}

/* réduit les animations si l'appareil le demande */
@media (prefers-reduced-motion:reduce){
  .simu-progress-bar{transition:none}
}