/* =========================================================================
   calculator_v2.css — Thème « V2 » du calculateur de consommation (relookage).
   Chargé UNIQUEMENT quand la variante de design est v2 (?ui=v2, session), APRÈS
   le <style> intégré de calculator.html. Ne réécrit AUCUNE logique : il redéfinit
   les variables de design (le calculateur les utilise partout, classes + styles
   en ligne) et affine quelques composants pour coller au parcours V2 (form_v2).
   Scopé sous .calc-v2 → l'actuelle (sans cette classe) reste strictement intacte.
   ========================================================================= */

/* ---- Tokens V2 (lignes chaudes, ombres douces, police mono) ---- */
.calc-v2 {
  --border:#ece7dd; --border-strong:#ded6c7;         /* lignes chaudes V2 (vs bleu-gris) */
  --bg-soft:#fbfaf7;
  --shadow-sm:0 1px 2px rgba(50,40,20,.06);
  --shadow-md:0 10px 30px -12px rgba(40,30,15,.18),0 2px 6px rgba(40,30,15,.05);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --ring:0 0 0 3px rgba(232,130,12,.32);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---- Titres : rythme typographique V2 ---- */
.calc-v2 h1,.calc-v2 .step-title { letter-spacing:-.022em; }
.calc-v2 .step-title { font-size:21px; line-height:1.1; }

/* ---- Carte principale : rayon plus large + ombre V2 ---- */
.calc-v2 .calc-card { border-radius:22px; box-shadow:var(--shadow-md); border-color:var(--border); }

/* ---- En-tête d'étape : pastille numéro en mono ---- */
.calc-v2 .step-num { font-family:var(--mono); border-radius:13px; }

/* ---- Barre d'étapes (stepper) : ronds façon V2 (mono) ---- */
.calc-v2 .cs-circle { font-family:var(--mono); }

/* ---- Champs : rayon V2 + focus orange ---- */
.calc-v2 .field-input { border-radius:12px; border-color:var(--border-strong); }
.calc-v2 .field-input:focus { border-color:var(--orange); box-shadow:var(--ring); }
.calc-v2 .field-label { letter-spacing:.05em; }

/* ---- Cartes d'option / contrat / cases : rayon V2 + sélection orange marquée ---- */
.calc-v2 .opt-card,
.calc-v2 .contract-card,
.calc-v2 .toggle-check { border-radius:13px; }
.calc-v2 .opt-card:has(input:checked) .opt-card-title,
.calc-v2 .contract-card:has(input:checked) .contract-card-title { color:#0F2D52; }

/* ---- Bascule Basique/Expert & pastilles ---- */
.calc-v2 .toggle-group { border-radius:11px; }
.calc-v2 .toggle-btn { border-radius:8px; }
.calc-v2 .dpe-tile-box { border-radius:9px; }
.calc-v2 .zone-badge { border-radius:999px; }

/* ---- Boutons : rayon V2 + relief orange sur le principal ---- */
.calc-v2 .btn { border-radius:12px; }
.calc-v2 .btn-primary { box-shadow:0 8px 20px -6px rgba(232,130,12,.5); }
.calc-v2 .btn-primary:hover { transform:translateY(-1px); }

/* ---- Barre de navigation fixe : filet chaud V2 ---- */
.calc-v2.calc-nav { border-top-color:var(--border); }

/* ---- Encadré info : coins V2 ---- */
.calc-v2 .info-box { border-radius:12px; }

/* ═══ Spécifique au calculateur EXPERT (plannings horaires) — mêmes tokens V2 ═══ */
/* Grille horaire : cases en mono, coins V2 (l'orange actif vient déjà des tokens) */
.calc-v2 .hour-block { border-radius:7px; font-family:var(--mono); }
.calc-v2 .timeline-label { letter-spacing:.05em; }
/* Cartes d'appareil (add/remove + repli) */
.calc-v2 .app-card { border-radius:14px; }
.calc-v2 .app-card-body { border-top-color:var(--border); }
.calc-v2 .kwh-badge { border-radius:8px; font-family:var(--mono); }
.calc-v2 .btn-add-app { border-radius:11px; }
.calc-v2 .btn-danger,
.calc-v2 .btn-collapse { border-radius:9px; }
.calc-v2 .cop-hint { border-radius:7px; }
.calc-v2 .mois-sep { font-family:var(--mono); }
/* Étapes 7-14 « legacy » (frigos, électroménager…) */
.calc-v2 .appareil-item { border-radius:13px; }
.calc-v2 .btn-add-appareil { border-radius:11px; }
/* Barre de progression fine (comme le rapide) : on masque le stepper à pastilles */
.calc-v2 .calc-stepper { display:none; }
.calc-v2 .exp-pbar { height:6px; background:var(--border); border-radius:6px; overflow:hidden; margin-bottom:16px; }
.calc-v2 .exp-pbar i { display:block; height:100%; width:7%; border-radius:6px; background:var(--good); transition:width .3s ease; }
/* En-tête d'étape : icône (SVG) dans la pastille, au lieu du numéro */
.calc-v2 .step-num svg { width:20px; height:20px; }
/* Étape Contrat : on masque les détails de prix des cartes pour matcher le rapide (épuré) */
.calc-v2 .ctr-price { display:none; }
/* Sélecteur « Niveau de précision » — même format que le rapide (calculator_v2.html) */
.calc-v2 .precision { background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:24px; box-shadow:var(--shadow-md); }
.calc-v2 .prec-lbl { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; }
.calc-v2 .prec-opts { display:flex; gap:10px; }
@media(max-width:560px){ .calc-v2 .prec-opts { flex-direction:column; } }
.calc-v2 .prec-opt { flex:1; display:block; text-decoration:none; border:1.5px solid var(--border); border-radius:12px; padding:12px 14px; transition:.15s; background:#fff; }
.calc-v2 .prec-opt:hover { border-color:var(--border-strong); }
.calc-v2 .prec-opt.cur { border-color:var(--orange); background:var(--orange-50); }
.calc-v2 .prec-opt b { display:block; font-size:13.5px; font-weight:700; color:var(--ink); }
.calc-v2 .prec-opt.cur b { color:#a95905; }
.calc-v2 .prec-opt span { display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }