
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Roboto',sans-serif;background:#f5f7fa;min-height:100vh;padding:1.5rem 1rem}
.w{max-width:760px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.08);padding:2rem 1.5rem}
.title{font-size:22px;font-weight:700;text-align:center;color:#1a1a1a;margin-bottom:2rem}





/* Titres */
.stitle{font-size:20px;font-weight:700;text-align:center;color:#1a1a1a;margin-bottom:.5rem}
.sdesc{font-size:13px;color:#6b7280;text-align:center;margin-bottom:1.5rem}
.sec{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:10px;padding-bottom:6px;border-bottom:1.5px solid #f3f4f6;margin-top:1.5rem;display:flex;align-items:center;gap:6px}

/* ═══ STEP 1 Besoin ═══ */
.besoin-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:1.75rem}
@media(max-width:600px){.besoin-cards{grid-template-columns:1fr}}
.besoin-card{border:1.5px solid #e5e7eb;border-radius:14px;padding:1.5rem 1rem;cursor:pointer;background:#fff;transition:all .2s;display:flex;flex-direction:column;align-items:center;text-align:center}
.besoin-card:hover{border-color:#0099FF;box-shadow:0 4px 16px rgba(0,153,255,.12);transform:translateY(-2px)}
.besoin-card.sel{border-color:#0099FF;border-width:2px;box-shadow:0 4px 16px rgba(0,153,255,.15)}
.besoin-icon-wrap{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;flex-shrink:0}
.besoin-icon-wrap.blue{background:#E6F1FB}
.besoin-icon-wrap.red{background:#FDE8E8}
.besoin-icon-wrap.purple{background:#F3E8FD}
.besoin-icon-wrap svg{width:32px;height:32px}
.besoin-title{font-size:14px;font-weight:500;color:#1a1a1a;margin-bottom:5px}
.besoin-sub{font-size:12px;color:#6b7280;margin-bottom:12px}
.besoin-inclut{border-radius:8px;padding:8px 10px;font-size:11px;line-height:1.5;width:100%;text-align:center}
.besoin-inclut b{font-weight:700}
.besoin-inclut.blue{background:#E6F1FB;color:#0055AA}
.besoin-inclut.red{background:#FDE8E8;color:#CC2222}
.besoin-inclut.purple{background:#F3E8FD;color:#7E22CE}

/* ═══ Puissance ═══ */
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
@media(max-width:560px){.mcards{grid-template-columns:1fr}}
.mcard{border:1.5px solid #e5e7eb;border-radius:12px;padding:1rem;cursor:pointer;background:#fff;display:flex;flex-direction:column;transition:all .15s}
.mcard:hover{border-color:#0099FF}
.mcard.sel-s{border-color:#0099FF;border-width:2px;background:#eff6ff}
.mcard.sel-p{border-color:#ef4444;border-width:2px;background:#fef2f2}
.badge{font-size:11px;padding:2px 7px;border-radius:5px;display:inline-block;margin-top:3px;font-weight:500}
.bg{background:#eff6ff;color:#2563eb}
.bo{background:#fef2f2;color:#ef4444}
.mcard-foot{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #f3f4f6;margin-top:auto}
.btn-sv{font-size:11px;background:none;border:none;cursor:pointer;padding:0;font-weight:500}
.btn-sv.s{color:#0099FF}.btn-sv.p{color:#ef4444}

/* ═══ Formulaire ═══ */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:.875rem}
.fg1{grid-column:1/-1}
@media(max-width:560px){.fg{grid-template-columns:1fr}}
.fl label{font-size:12px;color:#374151;display:block;margin-bottom:4px;font-weight:600}
.fl input,.fl select,.fl textarea{width:100%;font-size:13px;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;color:#1a1a1a;outline:none;transition:border-color .15s;font-family:'Roboto',sans-serif}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:#0099FF}
.fl .hint{font-size:11px;color:#9ca3af;margin-top:3px}
.fl textarea{resize:vertical;min-height:70px}

/* ═══ Résultat puissance ═══ */
.result-bloc{background:#f8fafc;border-radius:12px;border:1.5px solid #0099FF;padding:14px 16px;margin-bottom:1.25rem}
.result-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.result-kw-sm{font-size:28px;font-weight:800;color:#0099FF}
.btn-detail{font-size:11px;color:#6b7280;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:5px 11px;cursor:pointer;white-space:nowrap}
.btn-detail:hover{border-color:#0099FF;color:#0099FF}
.detail-calc{margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb;font-size:12px;color:#6b7280;line-height:2}
.detail-calc b{color:#1a1a1a}

/* ═══ Résultat FINAL grand ═══ */
.result-main{border-radius:16px;padding:24px 20px;background:linear-gradient(135deg,#eff6ff,#f0f9ff);border:2px solid #0099FF;margin-bottom:1.5rem;text-align:center}
.result-label{font-size:13px;color:#6b7280;margin-bottom:8px}
.result-kw{font-size:64px;font-weight:800;color:#0099FF;line-height:1}
.result-unit{font-size:22px;font-weight:600;color:#0099FF}
.result-watts{font-size:14px;color:#6b7280;margin-top:4px}
.result-params{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.rp-item{background:#fff;border-radius:10px;padding:6px 12px;font-size:12px;color:#374151;border:1px solid #bfdbfe}
.rp-item b{color:#1e40af}
.detail-toggle-btn{margin:12px auto 0;display:flex;align-items:center;gap:5px;font-size:12px;color:#6b7280;background:transparent;border:none;cursor:pointer;padding:4px 10px;border-radius:8px}
.detail-toggle-btn:hover{background:rgba(0,153,255,.08);color:#0099FF}
.detail-box{background:#fff;border-radius:12px;padding:14px 16px;margin-top:12px;text-align:left;border:1px solid #bfdbfe}
.detail-formula{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:10px}
.detail-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:.5px solid #f3f4f6;font-size:12px}
.detail-row:last-child{border:none;font-weight:700;font-size:13px;padding-top:10px;color:#0099FF}
.detail-row .dk{color:#6b7280}
.detail-row .dv{color:#1a1a1a;font-weight:600}

/* ═══ 4 Actions ═══ */
.actions-title{font-size:13px;font-weight:700;color:#374151;text-align:center;margin-bottom:12px}
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:.5rem}
@media(max-width:500px){.actions-grid{grid-template-columns:1fr}}
.action-btn{border-radius:12px;padding:14px 12px;cursor:pointer;border:2px solid;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:all .2s;position:relative;overflow:hidden}
.action-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.action-btn:active{transform:translateY(0)}
.action-btn.print{border-color:#e5e7eb;background:#fff}
.action-btn.print:hover{border-color:#6b7280;background:#f9fafb}
.action-btn.equip{border-color:#0099FF;background:#eff6ff}
.action-btn.equip:hover{border-color:#0077CC;background:#dbeafe}
.action-btn.visite{border-color:#FF1E1E;background:#fff5f5}
.action-btn.visite:hover{border-color:#dc2626;background:#fee2e2}
.action-btn.exit{border-color:#e5e7eb;background:#f9fafb}
.action-btn.exit:hover{border-color:#9ca3af;background:#f3f4f6}
.action-icon{font-size:28px;line-height:1}
.action-label{font-size:13px;font-weight:700;line-height:1.2}
.action-sub{font-size:11px;opacity:.75;line-height:1.3}
.action-badge{position:absolute;top:8px;right:8px;background:#FF1E1E;color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px}

/* ═══ Ballon compteurs ═══ */
.counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1rem}
.counter-box{border:1.5px solid #e5e7eb;border-radius:12px;padding:12px 14px;background:#fff}
.counter-label{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:2px}
.counter-sub{font-size:11px;color:#6b7280;margin-bottom:8px}
.counter-ctrl{display:flex;align-items:center;gap:12px;justify-content:center}
.counter-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid #e5e7eb;background:#f8fafc;color:#1a1a1a;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;font-weight:700;transition:all .15s}
.counter-btn:hover{background:#eff6ff;border-color:#0099FF;color:#0099FF}
.counter-val{font-size:26px;font-weight:800;color:#1a1a1a;min-width:36px;text-align:center}

/* ═══ Résultat ballon ═══ */
.ballon-result{border-radius:14px;padding:16px;background:linear-gradient(135deg,#eff6ff,#f8fafc);border:2px solid #0099FF;margin-bottom:1.25rem}
.ballon-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.ballon-vol{font-size:42px;font-weight:800;color:#0099FF;line-height:1}
.ballon-models{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.bmodel{background:#fff;border-radius:10px;padding:10px;text-align:center;border:1.5px solid #e5e7eb}
.bmodel.ok{border-color:#0099FF;border-width:2px}
.bmodel-vol{font-size:18px;font-weight:800;color:#1a1a1a}
.bmodel-sub{font-size:10px;color:#6b7280;margin-top:2px}
.bmodel-badge{font-size:10px;background:#0099FF;color:#fff;border-radius:5px;padding:2px 7px;margin-top:4px;display:inline-block;font-weight:600}

/* ═══ Combined ═══ */
.combined-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.25rem}
@media(max-width:560px){.combined-results{grid-template-columns:1fr}}
.combined-card{border-radius:14px;padding:14px;border:2px solid}
.combined-card.heat{border-color:#f97316;background:#fff7ed}
.combined-card.ecs{border-color:#0099FF;background:#eff6ff}
.combined-val{font-size:30px;font-weight:800}
.combined-val.heat{color:#f97316}
.combined-val.ecs{color:#0099FF}

/* ═══ Équipement ═══ */
.equip-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.25rem}
@media(max-width:500px){.equip-cards{grid-template-columns:1fr}}
.eq-card{border:1.5px solid #e5e7eb;border-radius:12px;padding:.875rem;cursor:pointer;background:#fff;transition:all .15s}
.eq-card:hover{border-color:#0099FF;background:#eff6ff}
.eq-card.sel{border-color:#0099FF;border-width:2px;background:#eff6ff}
.eq-icon{font-size:22px;margin-bottom:5px}
.eq-title{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:2px}
.eq-sub{font-size:11px;color:#6b7280}
.eq-check{font-size:11px;color:#0099FF;margin-top:4px;font-weight:700}

/* ═══ Info boxes ═══ */
.ibox{border-radius:12px;padding:12px 14px;font-size:12px;margin-bottom:1rem}
.ibox b{color:#1a1a1a;display:block;margin-bottom:4px;font-size:13px}
.ibox ul{padding-left:14px;margin-top:4px}.ibox li{margin-bottom:3px}
.ibox.success{background:#f0fdf4;color:#16a34a;border:1px solid #86efac}
.ibox.info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.ibox.warn{background:#fffbeb;color:#d97706;border:1px solid #fde68a}

/* ═══ Contact form ═══ */
.contact-form{background:#f8fafc;border-radius:14px;border:1.5px solid #e5e7eb;padding:1.5rem;margin-bottom:1.25rem}
.form-success{background:#f0fdf4;border:2px solid #86efac;border-radius:14px;padding:2rem;text-align:center}
.form-success .check{font-size:52px;margin-bottom:12px}
.form-success h3{font-size:18px;font-weight:700;color:#166534;margin-bottom:8px}
.form-success p{font-size:13px;color:#15803d;line-height:1.7}

/* ═══ Navigation ═══ */
.nav{display:flex;justify-content:space-between;margin-top:1.5rem;gap:10px}
.bbk{padding:8px 20px;border:1.5px solid #e5e7eb;border-radius:10px;background:#fff;color:#374151;cursor:pointer;font-size:13px;font-weight:600;flex:1;transition:all .15s}
.bbk:hover{border-color:#0099FF;color:#0099FF}
.bnx{padding:8px 20px;border-radius:10px;background:#FF1E1E;border:none;color:#fff;cursor:pointer;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;flex:1;justify-content:center;transition:all .15s}
.bnx:hover{background:#dc2626}
.bnx:disabled{background:#e5e7eb;cursor:not-allowed;color:#9ca3af}
.bnx.blue{background:#0099FF}.bnx.blue:hover{background:#0077CC}
.cta{padding:13px;border:none;border-radius:12px;color:#fff;cursor:pointer;width:100%;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;margin-bottom:8px}
.cta.red{background:#FF1E1E}.cta.red:hover{background:#dc2626;transform:translateY(-1px)}
.reset-btn{width:100%;padding:8px;border:1.5px solid #e5e7eb;border-radius:10px;background:#fff;color:#6b7280;cursor:pointer;font-size:12px}

/* ═══ Print Modal ═══ */
#print-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center}
#print-modal.show{display:flex}
.pm-box{background:#fff;border-radius:16px;padding:1.5rem;width:min(400px,90vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pm-title{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:4px}
.pm-sub{font-size:12px;color:#6b7280;margin-bottom:1rem}
.pm-field{margin-bottom:.75rem}
.pm-field label{font-size:11px;font-weight:600;color:#374151;display:block;margin-bottom:4px}
.pm-field input{width:100%;padding:8px 11px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:'Roboto',sans-serif;outline:none;box-sizing:border-box}
.pm-field input:focus{border-color:#0099FF}
.pm-btns{display:flex;gap:8px;margin-top:1rem;flex-wrap:wrap}
.pm-btn-main{flex:1;padding:9px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;border:none;background:#0099FF;color:#fff}
.pm-btn-skip{flex:1;padding:9px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;border:none;background:#f3f4f6;color:#374151}
.pm-btn-cancel{padding:9px 14px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;background:#fff;color:#9ca3af;border:1.5px solid #e5e7eb}

/* ═══ Impression ═══ */
@media print{
  body{background:#fff;padding:0}
  .w{box-shadow:none;border-radius:0}
  .actions-title,.actions-grid,.nav,.no-print{display:none!important}
  .result-main{border:2px solid #0099FF}
  .detail-box{display:block!important}
}

/* ═══ Header Energoprime ═══ */
.ep-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:1.75rem;padding-bottom:1.25rem;border-bottom:1.5px solid #f3f4f6}
.ep-logo{display:flex;align-items:center;gap:8px}
.ep-logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#0099FF,#0055CC);border-radius:10px;display:flex;align-items:center;justify-content:center}
.ep-logo-icon svg{width:20px;height:20px}
.ep-logo-text{font-size:16px;font-weight:800;color:#1a1a1a;letter-spacing:-0.3px}
.ep-logo-text span{color:#0099FF}
.ep-badge{font-size:10px;background:#f0fdf4;color:#16a34a;border:1px solid #86efac;border-radius:5px;padding:2px 7px;font-weight:600;margin-left:auto}

/* ═══ Progress Bar ═══ */
.progress-wrap{margin-bottom:1.75rem}
.progress-steps{display:flex;align-items:center;gap:0;margin-bottom:8px}
.progress-step{display:flex;align-items:center;flex:1}
.ps-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;transition:all .3s;z-index:1}
.ps-circle.done{background:#0099FF;color:#fff}
.ps-circle.active{background:#FF1E1E;color:#fff;box-shadow:0 0 0 4px rgba(255,30,30,.15)}
.ps-circle.todo{background:#f3f4f6;color:#9ca3af;border:1.5px solid #e5e7eb}
.ps-line{flex:1;height:2px;transition:background .3s}
.ps-line.done{background:#0099FF}
.ps-line.todo{background:#e5e7eb}
.progress-labels{display:flex;justify-content:space-between;padding:0 2px}
.pl-item{font-size:10px;font-weight:600;text-align:center;flex:1;transition:color .3s}
.pl-item.active{color:#FF1E1E}
.pl-item.done{color:#0099FF}
.pl-item.todo{color:#9ca3af}

/* ═══ Screen Transition ═══ */
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
#sc{animation:fadeSlideIn .25s ease}
.screen-anim{animation:fadeSlideIn .25s ease}

/* ═══ Toast ═══ */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1a1a1a;color:#fff;padding:10px 20px;border-radius:12px;font-size:13px;font-weight:600;z-index:9999;transition:transform .3s ease;pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ═══ Result highlight ═══ */
.kw-hero{font-size:72px;font-weight:900;color:#0099FF;line-height:1;letter-spacing:-2px}
.kw-unit{font-size:26px;font-weight:700;color:#0099FF}

/* ═══ Step title ═══ */
.step-eyebrow{font-size:11px;font-weight:700;color:#FF1E1E;text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:4px}

/* ═══ Mobile sticky CTA ═══ */
@media(max-width:600px){
  .sticky-cta{position:sticky;bottom:0;left:0;right:0;background:#fff;padding:10px 0 6px;border-top:1.5px solid #f3f4f6;margin:0 -1.5rem -2rem;padding:10px 1.5rem 16px;z-index:100}
}
