:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --text:#0F172A; --muted:#475569; --border:#E2E8F0;
  --primary:#10B981; --secondary:#8B5CF6; --secondary-strong:#7C3AED; --accent:#22D3EE;
  --ok:#16A34A; --warn:#B45309; --error:#DC2626;
  --gradient: linear-gradient(135deg, #10B981, #8B5CF6);
  --shadow:0 8px 24px rgba(2,6,23,.08); --radius:16px;
}
:root{
  --ink:#0B132B; --ink-soft:#475569; --surface:#FFFFFF; --panel:#F8FAFF;
  --violet:#7C3AED; --violet-500:#8B5CF6; --violet-600:#7C3AED; --violet-700:#6D28D9;
  --cyan:#22D3EE; --teal:#10B981;
  --ring: 0 10px 30px rgba(124,58,237,.18);
  --ring-strong: 0 18px 60px rgba(124,58,237,.22);
  --inner: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(2,6,23,.05);
  --emboss: 0 12px 30px rgba(2,6,23,.06), 0 4px 10px rgba(2,6,23,.04);
  --rounded: 18px;
}
body{font-family:"Plus Jakarta Sans", system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--ink)}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#FFFFFF;color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(2,6,23,.04)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--gradient);color:#052e2b;font-weight:900}
.brand-title{font-weight:800}
.brand-sub{color:var(--muted);font-size:12px;margin-top:-2px}
.top-actions{display:flex;gap:12px}

.wrap{max-width:650px;margin:24px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--border);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card h2{margin:0 0 12px;font-size:18px;font-weight:700}
.card h3{margin:4px 0 8px;font-size:16px}

.row{display:grid;grid-template-columns:1fr 1fr; gap:12px}
.row-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.row,.row-3{grid-template-columns:1fr}}

label{font-size:13px;color:var(--muted);display:block;margin:6px 0}
input, select{width:100%; padding:12px 12px; border-radius:12px; border:1px solid #E5E7EB;
  background:#FFFFFF; color:var(--text); outline: none;}
input:focus, select:focus{border-color:var(--secondary)}
.suffix{display:flex;align-items:center;gap:8px}
.suffix span{opacity:.7}

.help{font-size:12px;color:var(--muted);margin-top:6px}
.actions-row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}

.totals{display:grid;grid-template-columns:1fr; gap:16px}
.stat{padding:14px;border-radius:14px;background:#F8FAFC; border:1px solid #E2E8F0}
.stat h3{margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#64748B}
.stat .val{font-size:24px; font-weight:800}

.footer{opacity:.8;font-size:12px;margin:20px;color:var(--muted)}
.btn{display:inline-block;background:var(--primary);border:none;color:#052e2b;font-weight:800;padding:10px 14px;border-radius:12px;cursor:pointer}
.link{color:var(--secondary)}
.q:hover::after{content:attr(data-tip);position:absolute;left:0;transform:translateY(8px);background:#FFFFFF;border:1px solid rgba(139,92,246,.35);padding:10px 12px;border-radius:10px;white-space:normal;width:280px;z-index:20;box-shadow:0 8px 24px rgba(2,6,23,.08);color:var(--text)}


/* Single-block unified card */
.card-unified{padding:0; overflow:hidden}
.card-unified .hero{position:relative;padding:28px 20px;background:linear-gradient(135deg,#7C3AED,#22D3EE);color:#0b0b14;border-top-left-radius:20px;border-top-right-radius:20px;overflow:hidden}
.card-unified .hero::after{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.35), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.18), transparent 60%);filter:blur(20px);animation:shine 12s linear infinite}
@keyframes shine{0%{transform:translateX(-10%) translateY(0)}50%{transform:translateX(10%) translateY(5%)}100%{transform:translateX(-10%) translateY(0)}}
.card-unified .hero h1{margin:0;font-weight:900;letter-spacing:.2px}
.card-unified .hero .sub{margin:6px 0 0;color:#0b0b14;opacity:.85}

.uni-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:0}
@media (max-width: 980px){.uni-grid{grid-template-columns:1fr}}

.uni-left{padding:18px 20px}
.uni-right{
  padding:18px 20px;
  border-left:1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF, #F8FAFF);
}
@media (max-width:980px){.uni-right{border-left:none;border-top:1px solid var(--border)}}

.stat.big{padding:18px;border-radius:14px;background:#FBFBFF;border:1px solid #EAEAF8}
.stat.big h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#6B7280}
.stat.big .val{font-size:42px;font-weight:900}

.btn-primary{background:var(--secondary);color:#0b0b14}
.btn-primary:hover{background:var(--secondary-strong)}

/* Inputs inside unified card */
.card-unified input, .card-unified select{
  background:#FFFFFF;border:1px solid #E5E7EB;
}
/* Slider thicker and violet */
input[type="range"]{appearance:none;width:100%;height:6px;border-radius:999px;background:#E9D5FF}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#7C3AED;border:2px solid #fff;box-shadow:0 2px 6px rgba(2,6,23,.16)}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#7C3AED;}

/* Center brand on topbar if no actions */
.topbar{justify-content:center}

.hero .build{margin-top:6px;font-size:12px;background:#ffffffcc;color:#1f2937;display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb}


/* ===== Mobile portrait optimizations ===== */
@media (max-width: 640px){
  .wrap{max-width:650px;margin:24px auto;padding:0 16px}
  .topbar{padding:10px 14px; box-shadow:0 1px 6px rgba(2,6,23,.05)}
  .brand-title{font-size:16px}
  .brand-sub{font-size:11px}

  .card{border-radius:14px}
  .card-unified .hero{position:relative;padding:28px 20px;background:linear-gradient(135deg,#7C3AED,#22D3EE);color:#0b0b14;border-top-left-radius:20px;border-top-right-radius:20px;overflow:hidden}
.card-unified .hero::after{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.35), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.18), transparent 60%);filter:blur(20px);animation:shine 12s linear infinite}
@keyframes shine{0%{transform:translateX(-10%) translateY(0)}50%{transform:translateX(10%) translateY(5%)}100%{transform:translateX(-10%) translateY(0)}}
  .card-unified .hero h1{
    font-size: clamp(20px, 6vw, 26px);
  }
  .card-unified .hero .sub{
    font-size: 13px;
  }
  .hero .build{font-size:11px}

  .uni-grid{grid-template-columns:1fr}
  .uni-left, .uni-right{padding:14px}
  .uni-right{border-left:none;border-top:1px solid var(--border)}

  .row, .row-3{grid-template-columns:1fr; gap:10px}
  label{font-size:14px}
  input, select{
    font-size:16px; /* iOS: avoid zoom */
    padding:14px 12px;
    min-height:44px; /* touch target */
  }
  .suffix span{font-size:13px}

  .btn, .btn-primary, .btn-secondary{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    font-weight:800;
  }
  .actions-row{gap:8px}

  .stat.big{padding:16px}
  .stat.big .val{
    font-size: clamp(28px, 9vw, 40px);
    line-height:1.15;
    word-wrap:anywhere;
  }

  /* Sliders: bigger thumb & track for touch */
  input[type="range"]{height:8px}
  input[type="range"]::-webkit-slider-thumb{width:24px;height:24px}
  input[type="range"]::-moz-range-thumb{width:24px;height:24px}
}


/* 2-column form layout */

.form-2col .cell{display:flex;flex-direction:column}
.form-2col .span2{grid-column:1 / -1}
.form-2col label{font-size:13px;color:var(--muted);margin:2px 0 6px}
.form-2col .suffix{display:flex;align-items:center;gap:8px}
.form-2col input[type="number"], .form-2col select{width:100%}
@media (max-width: 640px){ 
.residual-block .center{display:flex;justify-content:center;align-items:center}
.residual-block .residual-amount{max-width:260px;text-align:center}
.residual-block .residual-slider{width:100%;max-width:440px}
.residual-block label{display:block;text-align:center}


/* Keep 2 columns even on very small screens (≤374px) by tightening the UI */
@media (max-width: 374px){
  .wrap{max-width:650px;margin:24px auto;padding:0 16px}
  
  .form-2col .cell{min-width:0}
  .form-2col label{font-size:12px; margin:2px 0 4px}
  .form-2col .suffix{gap:6px}
  .form-2col input[type="number"],
  .form-2col select{
    font-size:14px;
    padding:10px 10px;
    min-height:40px;
  }
  .form-2col .suffix span{font-size:12px; opacity:.8}
  .btn, .btn-primary, .btn-secondary{
    padding:12px 12px;
    font-size:14px;
  }
  /* Residual stacked block: narrower max widths */
  .residual-block .residual-amount{max-width:220px}
  .residual-block .residual-slider{max-width:320px}
}


/* Prevent page from moving while dragging the slider (mobile) */
html, body { overscroll-behavior-y: none; }
.residual-block, .card-unified { overscroll-behavior: contain; }
input[type="range"], .residual-slider { touch-action: none; }
* { -webkit-tap-highlight-color: transparent; }

/* Unified single-column after moving result inside left */
.card-unified .uni-grid{display:block;gap:0}
.card-unified .stat.big{margin-top:14px}
.card-unified .stat.big .val{font-size:40px}


/* Narrower & taller layout adjustments */
.card-unified{min-height:760px}
.card-unified .hero{position:relative;padding:28px 20px;background:linear-gradient(135deg,#7C3AED,#22D3EE);color:#0b0b14;border-top-left-radius:20px;border-top-right-radius:20px;overflow:hidden}
.card-unified .hero::after{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.35), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.18), transparent 60%);filter:blur(20px);animation:shine 12s linear infinite}
@keyframes shine{0%{transform:translateX(-10%) translateY(0)}50%{transform:translateX(10%) translateY(5%)}100%{transform:translateX(-10%) translateY(0)}}
.card-unified .uni-left{width:100%!important;max-width:none!important;padding-left:8px;padding-right:8px}
.card-unified .stat.big{margin-top:22px}

/* mobile guard narrow/tall */

@media (max-width: 640px){
  .wrap{max-width:650px;margin:24px auto;padding:0 16px}
  .card-unified{min-height:unset}
  .card-unified .hero{position:relative;padding:28px 20px;background:linear-gradient(135deg,#7C3AED,#22D3EE);color:#0b0b14;border-top-left-radius:20px;border-top-right-radius:20px;overflow:hidden}
.card-unified .hero::after{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.35), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.18), transparent 60%);filter:blur(20px);animation:shine 12s linear infinite}
@keyframes shine{0%{transform:translateX(-10%) translateY(0)}50%{transform:translateX(10%) translateY(5%)}100%{transform:translateX(-10%) translateY(0)}}
}

/* Premium subtitle and result-at-bottom spacing */
.hero-sub{
  margin: 0;
  padding: 10px 0 6px;
  text-align:center;
  color:#0b0b14;
  opacity:.9;
  font-weight:600;
  letter-spacing:.2px;
}
.card-unified .stat.big{margin-top:16px}
.card-unified .stat.big .val{font-size:40px}


/* Ensure form stays two columns on desktop */

.form-2col .cell{display:flex;flex-direction:column}
.form-2col .span2{grid-column:1 / -1}
.center-stat{text-align:center}
.center-stat .val{font-size:42px}
/* Residual block centering */
.residual-block .residual-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.residual-block .center{display:flex;justify-content:center;align-items:center}
.residual-block .residual-amount{max-width:260px;text-align:center}
.residual-block .residual-slider{width:100%;max-width:440px}
.residual-block label{display:block;text-align:center}
/* Mobile micro-breakpoint: keep 2 columns up to 374px by tightening */
@media (max-width: 374px){
  
  .form-2col label{font-size:12px;margin:2px 0 4px}
  .form-2col input[type="number"], .form-2col select{font-size:14px;padding:10px 10px;min-height:40px}
  .residual-block .residual-amount{max-width:220px}
  .residual-block .residual-slider{max-width:320px}
}


/* ==== Fluid desktop fields ==== */
.form-2col .cell{min-width:0}
.form-2col .suffix{
  display:grid;
  grid-template-columns: 1fr auto; /* input grows, unit stays tight */
  align-items:center;
  gap:8px;
  width:100%;
}
.form-2col input[type="number"],
.form-2col select{
  width:100%;
  min-width:0; /* allow shrink inside grid */
}
/* Residual amount: allow full width on desktop */
@media (min-width: 641px){
  .residual-block .residual-amount{max-width:none}
  .residual-block .residual-slider{max-width:none}
}


/* ==== Proportional scaling at non-100% zoom ==== */
:root{
  --fs-input: clamp(14px, 0.95rem, 16px);
  --pad-input-y: clamp(10px, 0.75rem, 12px);
  --pad-input-x: clamp(10px, 0.75rem, 12px);
  --gap-field: clamp(6px, 1.2vw, 10px);
}


.form-2col .cell{min-width:0}
.form-2col .suffix{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto; /* field shrinks with container */
  align-items:center;
  gap: var(--gap-field);
  width:100%;
}
.form-2col input[type="number"],
.form-2col select{
  width:100%;
  min-width:0;
  font-size: var(--fs-input);
  padding: var(--pad-input-y) var(--pad-input-x);
}
.form-2col .suffix span{
  white-space:nowrap;  /* keep CHF / mois compact */
}

/* Residual controls should also scale and not cap on desktop */
@media (min-width: 641px){
  .residual-block .residual-amount{max-width:none}
  .residual-block .residual-slider{max-width:none}
}

/* Tighten slightly when viewport gets narrower (even on desktop at 90% zoom) */
@container style(--container){}
@media (max-width: 720px){
  
}
@media (max-width: 680px){
  
}

/* Remove phantom right column spacing */
.card-unified .uni-right{display:none !important;border-left:none !important;padding:0 !important;margin:0 !important}
.card-unified .uni-grid{display:block;gap:0}
.card-unified .uni-left{width:100%!important;max-width:none!important;padding-left:8px;padding-right:8px}

.card-unified{border-radius:20px; box-shadow: var(--emboss), var(--ring); background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFF 60%,#F6F9FF 100%)}
.card{border:1px solid #E7ECF5}
.wrap{max-width:650px;margin:28px auto;padding:0 16px}

input, select{
  border-radius:14px;
  border:1px solid #E5EAF5;
  background:linear-gradient(180deg,#FFFFFF 0%, #F9FAFE 100%);
  box-shadow: var(--inner), 0 6px 14px rgba(2,6,23,.05);
  transition: box-shadow .2s ease, border-color .2s ease, transform .02s ease;
}
input:focus, select:focus{
  border-color:rgba(124,58,237,.45);
  box-shadow: 0 0 0 4px rgba(124,58,237,.10), var(--inner), 0 8px 20px rgba(124,58,237,.15);
}

input[type="range"]{height:10px;border-radius:999px;background:linear-gradient(90deg, rgba(139,92,246,.18), rgba(34,211,238,.18)); box-shadow:inset 0 2px 5px rgba(2,6,23,.08), 0 1px 0 rgba(255,255,255,.6)}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#8B5CF6,#6D28D9);border:2px solid #fff;box-shadow:0 3px 10px rgba(124,58,237,.4)}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:linear-gradient(180deg,#8B5CF6,#6D28D9);box-shadow:0 3px 10px rgba(124,58,237,.4)}

.stat.big{background:linear-gradient(180deg,#F9FAFF,#F3F6FF);border:1px solid #E5EAF6;border-radius:18px;box-shadow: var(--emboss)}
.stat.big .val{font-size:48px;text-shadow:0 1px 0 #fff}
@media (hover:hover){
  .stat.big{transition: transform .12s ease, box-shadow .2s ease}
  .stat.big:hover{transform:translateY(-2px) scale(1.01); box-shadow: var(--emboss), var(--ring-strong)}
}

.topbar{background:rgba(255,255,255,.75);backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(231,236,245,.9)}

/* ===== Centered form & adaptive widths ===== */
.form-shell{width:100%;display:block}
/* Two equal columns that shrink with the container but never below 280px */
.form-shell 
.form-shell .form-2col .cell{min-width:0}
/* Inputs stretch while unit stays compact */
.form-shell .suffix{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
}
.form-shell input[type="number"], .form-shell select{
  width:100%;
  min-width:0;
}
/* Result card spans full width under the slider */
.form-shell .span2{grid-column:1 / -1}

/* Keep two columns even on small widths if requested micro-breakpoint applies */
@media (max-width: 374px){
  .form-shell 
  .form-shell .suffix{gap:6px}
}

/* ===== Premium hero title ===== */
.hero-title{
  margin: 4px 0 6px;
  text-align:center;
  font-weight: 800;
  font-size: clamp(20px, 3.2vw, 26px);
  letter-spacing:.2px;
  background: linear-gradient(90deg,#ffffff,#E6E1FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}


/* Fill remaining width; keep units compact */
.form-shell .suffix{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
}
.form-shell input[type="number"],
.form-shell select{
  width:100%;
  min-width:0;
}
/* Slider full width */
.residual-block .residual-slider{width:100%}


/* ===== Ensure proportional shrink under 650px ===== */
@media (max-width: 650px){
  .wrap{max-width:100%; padding:0 14px; margin:16px auto;}
  .card-unified{min-height:unset; overflow:visible;}
  .form-shell 
  .form-shell .suffix{
    grid-template-columns: 1fr auto;
    gap:8px;
  }
  .form-shell input[type="number"], .form-shell select{
    width:100%; min-width:0;
  }
  .residual-block .residual-amount{max-width:none}
  .residual-block .residual-slider{max-width:none; width:100%}
}


/* ===== Keep 2 columns under 650px: scale fields instead of stacking ===== */
@media (max-width: 650px){
  .wrap{max-width:100%; padding:0 12px; margin:16px auto;}
  .card-unified{min-height:unset; overflow:visible;}
  .form-shell 
  .form-shell .suffix{
    grid-template-columns: minmax(0,1fr) auto;
    gap:8px;
  }
  .form-shell input[type="number"], .form-shell select{
    width:100%; min-width:0;
    font-size: clamp(13px, 2.5vw, 15px);
    padding: 10px 10px;
    min-height: 40px;
  }
  .form-2col label{font-size:13px}
  .form-shell .suffix span{font-size:13px; white-space:nowrap}
  .residual-block .residual-amount{max-width:none}
  .residual-block .residual-slider{max-width:none; width:100%}
}


/* ===== Force full-width usage of the card ===== */
.card-unified .uni-grid{display:block;gap:0}
.card-unified .uni-left{width:100%!important;max-width:none!important;padding-left:8px;padding-right:8px}
.form-shell{width:100%;display:block}
.form-shell 
.form-shell .suffix{grid-template-columns:minmax(0,1fr) auto}
.form-shell input[type="number"], .form-shell select{width:100%; min-width:0}
/* Keep two columns down to 650px with scaling */
@media (max-width: 650px){
  .form-shell 
}

/* stretch inputs, compact unit */
.form-shell .suffix{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%}
.form-shell input[type="number"], .form-shell select{width:100%;min-width:0}

/* keep two columns to 650px */
@media (max-width: 650px){
  .form-shell 
  .card-unified .uni-left{width:100%!important;max-width:none!important;padding-left:8px;padding-right:8px}
}

/* v3 stretch */
.form-shell .suffix{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%}
.form-shell input[type="number"], .form-shell select{width:100%;min-width:0}

/* v3 keep two cols */
@media (max-width: 650px){
  .form-shell 
  .card-unified .uni-left{padding-left:6px;padding-right:6px}
}
@media (max-width: 600px){
  .form-shell 
}


/* === Adaptive fields (keep original columns) === */
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.form-2col .cell{display:flex;flex-direction:column;min-width:0}
.form-2col .suffix{display:flex;align-items:center;gap:8px}
.form-2col .suffix input{flex:1 1 auto;min-width:0;width:100%}
.form-2col .suffix span{flex:0 0 auto;white-space:nowrap}
.form-2col select,.form-2col input[type="number"]{width:100%}

/* Small phones: stack to avoid overflow (same behavior as avant) */
@media (max-width:640px){
  .form-2col{grid-template-columns:1fr}
}

.center-actions{display:flex;justify-content:center;margin-top:10px}





/* === How it works (v2) === */
.hiw{
  position: relative;
  margin: 28px auto 0;
  border-radius: var(--rounded, 18px);
  overflow: hidden;
  background: #0b1220;
  color: #e5e7eb;
  isolation: isolate;
}
.hiw::before,
.hiw::after{
  content:"";
  position:absolute;
  inset:auto;
  z-index:-1;
  filter: blur(40px);
  opacity:.8;
}
.hiw::before{
  width: 700px; height: 700px;
  left: -220px; top: -260px;
  background: radial-gradient(closest-side, rgba(34,211,238,.35), transparent 70%);
}
.hiw::after{
  width: 800px; height: 800px;
  right: -260px; top: -300px;
  background: radial-gradient(closest-side, rgba(124,58,237,.35), transparent 70%);
}
.hiw-wrap{ max-width: 1100px; margin: 0 auto; padding: 56px 20px 46px; text-align:center; }
.hiw-title{ margin: 0 0 10px; font-size: clamp(26px, 3.6vw, 42px); color:#fff; font-weight: 800; letter-spacing:.2px; }
.hiw-sub{ margin: 0 auto 30px; max-width: 780px; color:#b6c2d6; }

/* reset list numbers hard to avoid bullets showing */
.hiw-steps{ list-style:none; padding:0; margin:32px 0 0; display:grid; gap:18px; counter-reset: none; }
.hiw-steps > li{ list-style:none; }

.hiw-step{ display:grid; justify-items:center; gap:14px; }

.hiw .dot{
  width: 76px; height: 76px; border-radius: 50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.1)),
              linear-gradient(135deg, #1e90ff, #7c3aed);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.24), 0 16px 32px rgba(2,6,23,.42);
  border: 4px solid rgba(255,255,255,.12);
}
.hiw .dot span{ color:#fff; font-weight:800; font-size:22px; }

.hiw .card{
  background: rgba(17, 24, 39, .72);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px rgba(2,6,23,.44);
  border-radius: 16px;
  padding: 24px 18px;
  text-align:center;
  max-width: 380px;
}
.hiw .card h3{ margin:4px 0 10px; color:#c7d2fe; font-size: clamp(18px, 2.2vw, 22px); }
.hiw .card p{ margin:0; color:#cbd5e1; }

@media (min-width: 860px){
  .hiw-steps{ grid-template-columns: repeat(3, 1fr); align-items:start; }
  .hiw-step{ position:relative; }
  .hiw-step::before{
    content:''; position:absolute; top:38px; left:-8px; right:-8px; height:3px;
    background: linear-gradient(90deg, rgba(59,130,246,.38), rgba(16,185,129,.38));
    z-index:0;
  }
  .hiw-step:first-child::before{ left:50%; }
  .hiw-step:last-child::before{ right:50%; }
  .hiw .dot{ z-index:1; }
}



/* === Benefits row cards === */
.benefits{ margin: 28px 0 0; }
.benefits-wrap{ max-width: 1100px; margin: 0 auto; padding: 6px 12px 6px; display: grid; gap: 16px; }
.benefit-card{
  display:flex; gap:16px; align-items:flex-start;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px;
  padding:18px; box-shadow: var(--emboss, 0 10px 24px rgba(2,6,23,.06));
}
.benefit-ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#eff6ff; border:1px solid #bfdbfe;
  flex:0 0 auto;
}
.benefit-text h3{ margin:0 0 6px; color:#0b0b14; font-size:18px; font-weight:800; }
.benefit-text p{ margin:0; color:#475569; }
@media (min-width: 900px){
  .benefits-wrap{ grid-template-columns: repeat(3, 1fr); }
  .benefit-card{ padding:22px; }
}


/* === Mega Footer (global) === */
.mega-footer{
  background:#0b0b14;
  color:#cbd5e1;
  border-top:1px solid #111827;
  margin-top:24px;
}
.mega-footer .container{ max-width:1100px; margin:0 auto; padding:40px 20px; }
.mf-top{ display:grid; grid-template-columns: 1fr; gap:28px; }
.mf-col h3{ margin:0 0 12px; color:#e2e8f0; }
.mf-logo{ font-weight:900; font-size:28px; letter-spacing:.2px; color:#e2e8f0; margin-bottom:10px; text-transform: lowercase; }
.mf-list{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.mf-list li{ display:flex; gap:12px; align-items:flex-start; }
.mf-ico{ width:28px; height:28px; display:grid; place-items:center; color:#9fb3c8; }
.mf-label{ font-size:12px; color:#9fb3c8; margin-bottom:2px; }
.mf-list a{ color:#e2e8f0; text-decoration:none; }
.mf-list a:hover{ text-decoration:underline; }
.mf-bottom{ border-top:1px solid #111827; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; color:#9fb3c8; font-size:14px; }
@media (min-width: 900px){
  .mf-top{ grid-template-columns: 1.2fr 1fr; }
}


/* Subtle ghost button for "Retour" */
.btn-ghost{
  display:inline-block;
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  font-weight:700;
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  text-align:center;
  text-decoration:none;
}
.btn-ghost:hover{ background:#f8fafc; color:var(--text); }
.btn-ghost:focus-visible{ outline:2px solid rgba(124,58,237,.22); outline-offset:2px; }



/* Keep the topbar always visible (sticky header) */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
}
/* Stronger shadow only after scrolling a bit */
body.is-scrolled .topbar{
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
  border-bottom-color: rgba(226,232,240,.8);
}



/* === Lead hero (top) === */
.lead-hero{
  margin: 8px 0 18px;
  border-radius: var(--rounded, 18px);
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(1000px 540px at 110% -30%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, #eef2ff, #f8fafc);
  overflow:hidden;
}
.lead-wrap{ max-width: 1100px; margin: 0 auto; padding: 48px 20px 36px; }
.lead-title{
  font-size: clamp(28px, 6vw, 68px);
  line-height: 1.02;
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #0b0b14;
}

.nowrap{ white-space: nowrap; }
.lead-points{
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.lead-points li{
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  column-gap: 12px;
  color: #0b0b14;
  font-size: clamp(14px, 2.2vw, 18px);
}
.lead-points li::before{
  content: "✓";
  width: 22px;
  height: 22px;
  display: grid;
  place-items:center;
  border-radius: 50%;
  font-weight: 900;
  color: #16a34a; /* ok green */
  border: 2px solid #16a34a;
}
.lead-actions{ margin-top: 8px; }
.lead-actions .btn{ width: auto; padding: 14px 18px; }

@media (min-width: 920px){
  .lead-wrap{ padding: 64px 28px 46px; }
}



/* Flashy green accent for "n'importe quel véhicule" */



/* Neon green accent (no gradient) */
.lead-title .accent{
  color: #39FF14; /* neon green */
}


/* --- Buttons: clean + never underlined --- */
.btn, .btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active {
  text-decoration: none !important;
}

/* Primary CTA look (violet) */
.center-actions .btn,
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
}

.btn-primary{
  background-image: linear-gradient(180deg, var(--secondary), var(--secondary-strong));
  color: #fff;
  border: none;
  box-shadow: 0 10px 22px rgba(124, 58, 237, .28);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(124, 58, 237, .34);
}
.btn-primary:focus-visible{
  outline: 3px solid rgba(124, 58, 237, .5);
  outline-offset: 2px;
}

/* Remove any underline inherited by descendants */
.btn * { text-decoration: inherit !important; }



/* === How it works – light theme override === */
.hiw{
  background: #ffffff;
  color: #0b0b14;
  border: 1px solid var(--border);
}
.hiw::before, .hiw::after{ display:none; }
.hiw-title{ color:#0b0b14; }
.hiw-sub{ color:#475569; }

.hiw .card{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.hiw .card h3{ color:#0b0b14; }
.hiw .card p{ color:#475569; }

@media (min-width: 860px){
  .hiw-step::before{
    background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(16,185,129,.18));
  }
}



/* Pastel dots for light background */
.hiw .dot{
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 3px solid #bfdbfe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(2,6,23,.08);
}
.hiw .dot span{ color:#1e3a8a; }
@media (min-width: 860px){
  .hiw-step::before{
    background: linear-gradient(90deg, rgba(59,130,246,.15), rgba(16,185,129,.15));
  }
}



/* light violet */
  border: 1px solid #e9d5ff;       /* soft violet border */
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.hiw .card h3{ color:#4c1d95; }    /* deep violet heading */
.hiw .card p{ color:#334155; }     /* slate text for good contrast */



/* === How it works: blue cards that pair with violet === */
.hiw .card{
  background: #EEF2FF;            /* indigo/blue-50 */
  border: 1px solid #C7D2FE;       /* indigo/blue-200 */
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.hiw .card h3{ color:#1E3A8A; }     /* blue-900 for titles */
.hiw .card p{ color:#334155; }      /* slate-700 for body */



/* === How it works: very dark cards (fits violet & blue) === */
.hiw .card{
  background: #0B0F1A;                 /* near-black, slightly bluish */
  border: 1px solid rgba(124,58,237,.22); /* subtle violet edge */
  box-shadow: 0 16px 36px rgba(2,6,23,.35);
}
.hiw .card h3{ color:#E6E7FF; }        /* soft off-white with a hint of indigo */
.hiw .card p{ color:#C8D0E0; }         /* slate-light text for readability */



/* === HIW dark cards: hover blue outline + violet glow === */
.hiw .card{
  transition: border-color .2s ease, box-shadow .25s ease, transform .18s ease;
}
.hiw .card:hover{
  border-color: #60A5FA; /* blue-400 liseré */
  box-shadow:
    0 22px 48px rgba(37,99,235,.28),      /* blue shadow */
    0 0 0 1px rgba(37,99,235,.12),        /* crisp outline */
    0 0 24px rgba(124,58,237,.25);        /* violet glow */
  transform: translateY(-2px);
}
/* Highlight the number dot when hovering the step */
.hiw-step:hover .dot{
  border-color: #60A5FA;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 28px rgba(37,99,235,.22);
}
@media (prefers-reduced-motion: reduce){
  .hiw .card{ transition: none; }
  .hiw .card:hover{ transform: none; }
}



/* === HIW titles accents === */
.hiw-steps .hiw-step:nth-child(2) .card h3{ color:#3B82F6 !important; } /* Recevez votre offre - blue */
.hiw-steps .hiw-step:nth-child(3) .card h3{ color:#39FF14 !important; } /* Roulez en toute sérénité - neon green */


.mf-tagline{ margin:10px 0 0; line-height:1.6; color:#9fb3c8; max-width: 640px; }


/* === Center footer brand + tagline === */
footer .mf-logo{
  display:block;
  text-align:center;
  margin: 0 auto .25rem auto;
}
footer .mf-tagline{
  margin: 8px auto 0 auto;
  text-align:center;
}
/* If the logo and tagline sit inside a flex/grid column, force inner centering */
footer .mf-brand, footer .footer-brand, footer .brand, footer .brand-col{
  text-align:center;
}



/* Centered brand block so 'fastleasing' is above and aligned with the tagline */
footer .mf-brand-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 6px;
  margin: 0 auto;
}



/* === Fastleasing: footer 3 colonnes (desktop only) final === */
@media (min-width: 900px){
  footer.fl-footer{ padding-top:28px; padding-bottom:28px }
  .fl-footer .fl-container{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap:32px;
    align-items:start;
  }
  .fl-left{ order:1 }
  .fl-middle{ order:2; display:flex; justify-content:center; align-items:flex-start }
  .fl-right{ order:3; display:flex; flex-direction:column; gap:12px }
  .fl-brand{ display:block; font-weight:800; font-size:40px; line-height:1; letter-spacing:0.2px }
  .fl-desc{ margin-top:10px; line-height:1.6 }
  .fl-small{ color:#aab3bf; margin:6px 0 0 0; text-align:center }
  .fl-item .fl-label{ display:block; font-weight:600; margin-bottom:4px }
  .fl-link{ text-decoration:none }
  .fl-link:hover{ text-decoration:underline }
}
/* === Fin footer 3 colonnes final === */

/* Compact 'Durée' select so it fits alongside 'Apport' on desktop */
@media (min-width: 1024px){
  select#duree{ width: 220px !important; max-width: 220px !important; }
}

/* Center monthly estimate card */
.result, .result .head, .result .val { text-align: center !important; }
.result { margin-left: auto; margin-right: auto; }

/* Layout tweaks: center monthly stat and right-align CTA */
.stat.big.center-stat { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.center-actions { display: flex; justify-content: flex-end; }
.center-actions .btn { margin-left: auto; }

/* Center CTA within its block */
.center-actions { display:flex !important; justify-content:center !important; }
.center-actions .btn { margin-left:0 !important; margin-right:0 !important; }

/* Robust centering for monthly block */
.stat.big.center-stat{display:table !important;margin:0 auto !important;text-align:center !important;}
.stat.big.center-stat .head,.stat.big.center-stat .val{ text-align:center !important;}

/* Footer 2-column layout: force earlier breakpoint */
.mf-top{ align-items:start; }
@media (min-width: 768px){
  .mf-top{ grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
}
@media (min-width: 1200px){
  .mf-top{ grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
}

/* Simulation page two-column layout */
@media (min-width: 768px){
  #sim-form{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start; }
  #sim-form .cell{ margin:0; }
  /* Ensure large blocks span both columns */
  #sim-form .cell.full,
  #sim-form .result-wrap,
  #sim-form .slider-wrap{ grid-column: 1 / -1; }
}

/* Contact page: actions row */
.form-actions.two-sides{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; }
.form-actions.two-sides .btn{ min-width:148px; text-align:center; }
.btn.btn-secondary{ background:#E5E7EB; color:#0F172A; border:none; padding:10px 16px; border-radius:12px; font-weight:700; }
.btn.btn-secondary:hover{ filter:brightness(0.95); }

/* Force actions row to full width with buttons at extremes */
.form-actions.two-sides{ display:flex !important; justify-content:space-between !important; align-items:center; width:100% !important; }
.form-actions.two-sides .btn{ margin:0; }


/* Explicit areas so contact sits on the right on homepage footer */
@media (min-width: 768px){
  .mega-footer .mf-top{ 
    display:grid; 
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
    grid-template-areas: "brand contact";
  }
  .mega-footer .mf-top .mf-col.brand{ grid-area: brand; }
  .mega-footer .mf-top .mf-col.contact{ grid-area: contact; }
}

.legal-note{margin-top:10px;font-size:12px;line-height:1.4;color:#64748B}
.legal-note a{color:#64748B;text-decoration:underline}