:root{
  --brand:#0b4e7a; --brand-600:#0d5d91; --brand-300:#cfe5f2;
  --ink:#0f2740; --text:#3f5368; --muted:#6b7a8a;
  --bg:#f7fbff; --card:#ffffff; --line:#e6eef5; --shadow:0 10px 28px rgba(13,93,145,.12);
  --radius:16px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
color:var(--text);background:
radial-gradient(1200px 500px at 50% -200px,#fff,var(--bg)),
radial-gradient(800px 600px at 110% 20%, rgba(13,93,145,.06), transparent 60%),
radial-gradient(900px 700px at -10% 70%, rgba(13,93,145,.05), transparent 60%);
min-height:100%}
.container{max-width:784px;margin:10px auto 30px;padding:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.soft{background:#fff6ef;border:none}
.stack{display:flex;flex-direction:column;gap:18px}
h1{color:var(--ink);font-size:44px;margin:10px 0 10px;line-height:1.15;text-align:center}
h2{color:var(--ink);font-size:20px;margin:0 0 8px}
.lead{color:var(--ink); opacity:.9;text-align:center}


nav.stepper{display:flex;justify-content:center;align-items:center;gap:18px;padding:18px;margin:0 auto 24px}
.stepper .line{display:none !important;}
.stepper ol{display:flex;gap:14px;list-style:none;padding:8px 14px;margin:0;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.stepper .step{display:flex;align-items:center;gap:10px}
.stepper .dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--brand);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--brand)}
.stepper .step.active .dot{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 6px 16px rgba(13,93,145,.25)}
.stepper .label{font-weight:600;color:var(--muted)}
@media (max-width:680px){.stepper .label{display:none}}
.section{padding:18px}
.section .row{display:flex;flex-wrap:wrap;gap:14px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{padding:14px 18px; box-shadow:0 10px 24px rgba(13,93,145,.08);border-radius:14px;background:#fff;border:1px solid var(--line)}
.kpi strong{color:var(--ink)}


.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;color:#fff;background:var(--brand);font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow);cursor:pointer;border:none}
.pill:focus{outline:3px solid var(--brand-300)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media (max-width:860px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
label{font-weight:700;color:var(--ink)}
input,select{border:1px solid var(--line);border-radius:12px;padding:12px 12px;min-height:44px;font-size:16px;color:var(--ink);background:#fff}
input[type=range]{padding:0}
.hint{font-size:12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 16px;border-radius:12px;border:1px solid var(--brand);color:#fff;background:var(--brand);font-weight:800;cursor:pointer}
.btn.secondary{background:#fff;color:var(--brand)}
.tabs{display:flex;gap:12px;padding:10px}
.tab{flex:1;text-align:center;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700;color:var(--ink)}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.drawer{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.drawer-header{padding:14px 16px;display:flex;align-items:center;gap:10px;cursor:pointer}
.drawer-header .chev{transition:transform .18s ease}
.drawer.open .drawer-header .chev{transform:rotate(90deg)}
.drawer-body{padding:0 16px 16px;display:none}
.drawer.open .drawer-body{display:block; padding-bottom:24px; overflow:visible;}
.chart{height:280px;width:100%;display:block}
.legend{display:flex;gap:16px;justify-content:center;margin-top:8px;color:var(--ink); opacity:.9;font-size:14px}
.legend .dot{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}
.dot.inv{background:linear-gradient(#0b4e7a,#0d5d91)}
.dot.proj{background:linear-gradient(#f59e0b,#ffbd4a)}
.footer-nav{display:flex;justify-content:center}
.footer-nav .btn{min-width:240px;margin:0 auto;display:block}


/* Chart aesthetics inspired by previous simulator */
.chart{ position: relative; }
.chart svg text{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; fill:#6b7a8a; font-size:12px; }
.chart .axis { stroke:#e6eef5; stroke-width:1; }
.chart .grid { stroke:#eef4f8; stroke-width:1; }
.chart .axis-bold { stroke:#dde8f2; stroke-width:2; }
.chart .note { fill:#0f2740; font-weight:700; }


/* --- Form validation states --- */
.field.error input, .field.error select { border-color: #e76f51; box-shadow: 0 0 0 3px rgba(231,111,81,.15); }
.field .error-text { color: #e76f51; font-size: 12px; }
.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }


/* City select placeholder style aligns with inputs */
#villeSelect:invalid { color: #9aa3af; }
#villeSelect option[disabled][value=""] { display:none; }


/* ---- Ville select polished ---- */
#villeSelectWrap { position: relative; }
#villeSelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  padding-right: 2.5rem;
}
#villeSelectWrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #0b2d45; /* same as primary text */
  pointer-events: none;
}
/* Placeholder-like style */
#villeSelect:invalid { color: #9aa3af; }
#villeSelect option[value=""] { color: #9aa3af; }


/* --- Mensualité: slider + badge fusion --- */
.mens-control{ position:relative; padding:22px 6px 6px; }
.mens-control input[type=range]{ width:100%; }
.mens-badge{
  position:absolute; top:0; left:6px;
  transform:translateX(-50%);
  background:#0b2d45; color:#fff; font-weight:600; font-size:12px;
  padding:6px 10px; border-radius:999px; box-shadow:0 4px 10px rgba(11,45,69,.18);
  pointer-events:none; user-select:none;
}
.help-text{ font-size:12px; color:#6b7280; margin-top:6px; }

/* slider theming (keeps your brand look) */
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:#e6edf3; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#0d5d91; box-shadow:0 2px 6px rgba(13,93,145,.35); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#0d5d91; box-shadow:0 2px 6px rgba(13,93,145,.35); cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:linear-gradient(90deg,#0d5d91 0,#0d5d91 var(--track-fill,0%),#e6edf3 var(--track-fill,0%),#e6edf3 100%); }

/* Mensualité: range + input side by side */
.mens-row{ display:grid; grid-template-columns: 1fr 140px; gap:12px; align-items:center; }
.mens-row input[type=number]{ text-align:right; font-weight:600; }
.help-text{ font-size:12px; color:#6b7280; margin-top:6px; }

@media (min-width: 768px){
  .grid-two{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
}

.span-2{grid-column:span 2}

/* Thin line slider with round thumb */
.mens-only input[type=range]{ width:100%; -webkit-appearance:none; appearance:none; background:transparent; }
.mens-only input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:#e6edf3; }
.mens-only input[type=range]::-moz-range-track{ height:6px; border-radius:999px; background:#e6edf3; }
.mens-only input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; margin-top:-6px; width:18px; height:18px; border-radius:50%; background:#0d5d91; box-shadow:0 2px 6px rgba(13,93,145,.35); cursor:pointer; }
.mens-only input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#0d5d91; box-shadow:0 2px 6px rgba(13,93,145,.35); cursor:pointer; }





/* Mensualité: input au-dessus + slider fin */
.mens-only{ display:flex; flex-direction:column; gap:8px; }
.mens-only .mens-value{ width:160px; font-weight:600; text-align:right; }

/* Ligne fine + bord arrondi, knob bleu */
.mens-only input[type=range]{ width:100%; -webkit-appearance:none; appearance:none; background:transparent; }
.mens-only input[type=range]::-webkit-slider-runnable-track{ height:10px; border-radius:999px; background:#f3f5f7; border:1px solid #d1d5db; }
.mens-only input[type=range]::-moz-range-track{ height:10px; border-radius:999px; background:#f3f5f7; border:1px solid #d1d5db; }
.mens-only input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; margin-top:-6px; width:18px; height:18px; border-radius:50%; background:#1172c2; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; }
.mens-only input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#1172c2; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; }


/* 3 columns: CP | Ville | Canton — robust shrink */
.grid-3{ display:grid; gap:16px; align-items:start; grid-template-columns: 0.9fr 1.3fr 0.8fr; }
.grid-3 > *{ min-width:0; }
.col-ville{ min-width:0; }
.col-ville .field{ margin:0; }
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 0.9fr 1.3fr 0.8fr; }
}

/* Ensure the CP|Ville|Canton row spans full card width */
.span-2{ grid-column: span 2; }
/* 3 columns across the full width */
.grid-3{ display:grid; gap:16px; align-items:start; grid-template-columns: 0.9fr 1.3fr 0.8fr; }
.grid-3 > *{ min-width:0; }
.col-ville{ min-width:0; }
.col-ville .field{ margin:0; }
@media (max-width: 960px){
  .grid-3{ grid-template-columns: 0.9fr 1.3fr 0.8fr; }
}


/* Centrer le titre de section */
.card.section > h2{ text-align:center; }

/* Mensualité : centrer le champ et le conteneur */
#mensWrap .mens-only{ align-items:center; }
#mensWrap .mens-value{ margin:0 auto; text-align:center; }


#mensWrap .mens-label{ display:block; text-align:center; margin-bottom:6px; font-weight:600; color:var(--ink); }
#mensWrap .mens-only{ align-items:center; }
#mensWrap .mens-value{ margin:0 auto; text-align:center; }
.footer-nav{ display:flex; justify-content:center; }
.footer-nav .btn{ margin: 0 auto; }

select#villeSelect{ width:100%; height:56px; border:1px solid var(--border); border-radius:14px; padding:0 16px; font-size:18px; outline:none; background:#fff; }

/* === Unified form control look for Ville & Canton === */
#ville, #canton, #villeSelect {
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 18px;
  outline: none;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
#ville::placeholder{ color:#9aa3af; }

/* Give both the same dropdown caret */
#canton, #villeSelect, #ville {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%230b2d45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  padding-right: 44px;
}

/* Focus state unify */
#ville:focus, #canton:focus, #villeSelect:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(13,93,145,.15);
}

/* Error state already handled by .field.error */
/* === Overrides: match 'Code postal' control height === */
#ville, #canton, #villeSelect { 
  height: auto; 
  min-height: 44px; /* same as global input,select min-height */
  font-size: 16px; 
  padding: 12px 12px; 
}
/* Do not show dropdown caret on the free-text city input */
#ville{ background-image:none !important; padding-right:12px; }
/* === Caret unification: Canton & VilleSelect identical === */
#canton, #villeSelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%230b2d45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  padding-right: 44px;
}

/* Remove old custom arrow on Ville wrapper to avoid double caret/misalignment */
#villeSelectWrap::after { content: none !important; display: none !important; }

/* === Fix Ville field height to match CP & Canton === */
#villeSelect{
  height: 44px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* === Mensualité: label like other fields, positioned above the number input === */
#mensWrap .mens-only{
  display: grid !important;
  grid-template-columns: 1fr 160px;
  grid-template-rows: auto auto;
  grid-template-areas: "slider label" "slider input";
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
}
#mensRange{ grid-area: slider; }
#mensWrap .mens-label{
  grid-area: label;
  margin: 0 0 2px 0;
  font-weight: 700;
  color: var(--ink);
  text-align: left !important; /* like other labels */
}
#mensWrap .mens-value{
  grid-area: input;
  width: 100%;
  justify-self: stretch;
  text-align: right;
  font-weight: 600;
  min-height: 44px;
  padding: 12px 12px;
}

/* === Force exact same control height (Ville / CP / Canton) === */
#ville, #villeSelect, #canton {
  height: 44px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  line-height: 44px !important; /* vertical centering like selects */
}
/* keep numeric fields aligned */
#cp { height: 44px !important; padding: 0 12px !important; line-height: 44px !important; }

/* === Mensualité layout: label above slider, close to number input === */
#mensWrap .mens-only{
  display: grid !important;
  grid-template-columns: 1fr 160px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "label input" "slider input";
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
}
#mensWrap .mens-label{
  grid-area: label;
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
#mensRange{ grid-area: slider; }
#mensWrap .mens-value{
  grid-area: input;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  line-height: 44px;
  text-align: right;
  font-weight: 600;
}

/* === Fix: ensure 'Ville' fields and 'Mensualité' input match height and are fully editable === */
#ville, #villeSelect, #canton, #cp { 
  height: 44px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  line-height: normal !important;
}
/* Mensualité number input always clickable and above slider */
#mensWrap .mens-value{
  position: relative;
  z-index: 2;
  pointer-events: auto;
  height: 44px !important;
  padding: 10px 12px !important;
  line-height: normal !important;
}
#mensRange{ position: relative; z-index: 1; }
/* Center 'Continuer' button */
.footer-nav{ display:flex !important; justify-content:center !important; }
.footer-nav .btn{ margin-left:auto; margin-right:auto; }

/* === Strong centering for 'Continuer' button === */
.footer-nav{ width:100% !important; display:block !important; text-align:center !important; }
.footer-nav .btn{ display:inline-flex !important; margin: 0 auto !important; float:none !important; }

/* === Ensure mensualité input is editable and on top === */
#mensualite{
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

/* === Final: robust mensualité grid, no overlap === */
#mensWrap .mens-only{ position: relative; }
#mensRange{ grid-area: slider !important; width: 100% !important; }
#mensualite{ grid-area: input !important; width: 180px !important; background:#fff; border:1px solid var(--line); border-radius:12px; }
#mensWrap .mens-value{ width: 180px !important; }

/* === Center 'Continuer' with grid centering and full width === */
.footer-nav{
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin-top: 12px;
}
.footer-nav .btn{
  display: inline-flex !important;
  margin: 0 auto !important;
  float: none !important;
}

/* === Make number input fully editable; remove spinners === */
#mensualite{
  -moz-appearance: textfield;
}
#mensualite::-webkit-outer-spin-button,
#mensualite::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}

/* === FINAL OVERRIDE: center the 'Continuer' button robustly === */
.card.section > .footer-nav,
.footer-nav{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.footer-nav #go.btn{
  display: inline-flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* === Center 'Continuer' inside the card section === */
.card.section .footer-nav{
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin-top: 16px;
}
.card.section .footer-nav .btn{
  display: inline-flex !important;
  margin: 0 auto !important;
  float: none !important;
}

/* === Mensualité: label + numeric centered ABOVE the slider === */
#mensWrap .mens-only{
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas: "label input" "slider slider";
  justify-content: center;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}
#mensWrap .mens-label{
  grid-area: label;
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--ink);
}
#mensWrap .mens-value{
  grid-area: input;
  width: 180px !important;
  min-height: 44px;
  height: 44px;
  padding: 10px 12px;
  text-align: right;
  font-weight: 600;
}
#mensRange{ grid-area: slider; width: 100%; }

/* === Emphasize the section title with decorative blue lines (like stepper) === */
.card.section > h2{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.card.section > h2::before,
.card.section > h2::after{
  content: "";
  height: 2px !important;
  flex: 1;
  max-width: 180px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0));
  box-shadow: 0 8px 20px rgba(13,93,145,.15);
}
.card.section > h2::after{
  background: linear-gradient(to left, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0));
}

/* === Extend decorative lines to the card edges === */
.card.section > h2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin: 0 0 18px 0;
}
.card.section > h2::before,
.card.section > h2::after{
  content:"";
  height: 2px !important;
  flex: 1 1 auto;            /* fill all space */
  max-width: none !important;/* no cap */
  border-radius:999px;
  background: linear-gradient(to right, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0));
  box-shadow: 0 8px 24px rgba(13,93,145,.20);
}
.card.section > h2::after{
  background: linear-gradient(to left, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0));
}

/* === Bulletproof centering for the 'Continuer' button === */
body[data-page="simulation"] .card.section .footer-nav{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  padding: 8px 0 0 0;
}
body[data-page="simulation"] .card.section .footer-nav #go.btn{
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display:inline-flex !important;
  margin: 0 !important;
  float: none !important;
}

/* === Thinner decorative lines for the title === */
.card.section > h2::before,
.card.section > h2::after{
  height: 2px !important;
  box-shadow: 0 6px 18px rgba(13,93,145,.18) !important;
}

/* === Slider track styled like the title lines === */
#mensRange::-webkit-slider-runnable-track{
  height: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0)) !important;
  box-shadow: 0 8px 20px rgba(13,93,145,.18) inset, 0 2px 6px rgba(13,93,145,.12) !important;
}
#mensRange::-moz-range-track{
  height: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0)) !important;
  box-shadow: 0 8px 20px rgba(13,93,145,.18) inset, 0 2px 6px rgba(13,93,145,.12) !important;
}

/* keep thumb consistent */
#mensRange::-webkit-slider-thumb{
  width: 18px !important; height: 18px !important; border-radius: 50% !important;
  background: #0d5d91 !important; border: 2px solid #0b4e7a !important;
  margin-top: -4px; /* vertically center on 10px track */
}
#mensRange::-moz-range-thumb{
  width: 18px !important; height: 18px !important; border-radius: 50% !important;
  background: #0d5d91 !important; border: 2px solid #0b4e7a !important;
}

/* === Absolute centering for the 'Continuer' button with grid middle column === */
.card.section .footer-nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  padding-top: 10px;
}
.card.section .footer-nav #go.btn{
  grid-column: 2 !important;
  margin: 0 !important;
  justify-self: center !important;
}

/* === Center 'Continuer' at the bottom of the block === */
.card.section{ display:flex; flex-direction:column; }
.card.section .footer-nav{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-top: 18px;
  padding-bottom: 4px;
}
.card.section .footer-nav #go.btn{
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  float: none !important;
}

/* === Enlarge slider width and keep it centered === */
#mensRange{
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
}

/* === FINAL: center 'Continuer' absolutely at bottom === */
body[data-page="simulation"] .card.section > .footer-nav{
  position: relative !important;
  display: block !important;
  height: 64px !important; /* reserve space */
  text-align: center !important;
}
body[data-page="simulation"] .card.section > .footer-nav > #go.btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  float: none !important;
}

/* === FINAL: widen the slider visibly === */
#mensWrap .mens-only{ justify-content: center !important; }
#mensWrap .mens-only #mensRange{
  width: 80% !important;           /* larger visible width */
  max-width: 1100px !important;    /* allow big screens */
  min-width: 520px !important;     /* keep decent size */
  margin: 0 auto !important;
}

/* === Mensualité: rapprocher label et champ + centrer l'ensemble === */
#mensWrap .mens-only{
  display: grid !important;
  grid-template-columns: auto 150px !important; /* label + input */
  grid-template-rows: auto auto !important;
  grid-template-areas: "label input" "slider slider" !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 8px !important; /* rapproché */
  row-gap: 6px !important;
}
#mensWrap .mens-label{ grid-area: label !important; margin: 0 !important; text-align: right !important; }
#mensWrap .mens-value{ grid-area: input !important; width: 150px !important; height: 44px !important; min-height: 44px !important; padding: 10px 12px !important; text-align: right !important; }
#mensRange{ grid-area: slider !important; width: 84% !important; max-width: 1100px !important; margin: 0 auto !important; }

/* === Footer nav: centrer le bouton avec des traits bleus de chaque côté === */
.card.section > .footer-nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 16px !important;
  position: relative !important;
}
.card.section > .footer-nav::before,
.card.section > .footer-nav::after{
  content: "" !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0)) !important;
  box-shadow: 0 6px 18px rgba(13,93,145,.18) !important;
}
.card.section > .footer-nav::after{
  background: linear-gradient(to left, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0)) !important;
}
.card.section > .footer-nav .btn{
  grid-column: 2 !important;
  justify-self: center !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
  transform: none !important;
}

/* === Mensualité: bloc largeur identique au slider pour centrage parfait === */
#mensWrap .mens-only{
  width: min(90%, 1100px) !important;  /* même largeur visuelle que le slider */
  margin: 0 auto !important;           /* centré */
  display: grid !important;
  grid-template-columns: auto 160px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "label input" "slider slider" !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
}
#mensWrap .mens-label{ grid-area: label !important; text-align: right !important; margin:0 !important; }
#mensWrap .mens-value{ grid-area: input !important; width:160px !important; height:44px !important; min-height:44px !important; padding:10px 12px !important; text-align:right !important; }
#mensRange{ grid-area: slider !important; width:100% !important; margin:0 auto !important; }

/* === Bouton 'Continuer' : centrage simple et fiable === */
.card.section > .footer-nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 16px !important;
}
.card.section > .footer-nav #go.btn{
  grid-column: 2 !important;          /* colonne centrale */
  position: static !important;        /* annule tout absolute précédent */
  left: auto !important; transform:none !important;
  margin: 0 auto !important;          /* au cas où */
  float: none !important;
}

/* === Mensualité: centre exact du duo label+input au-dessus du slider === */
#mensWrap .mens-only{
  width: min(92%, 1100px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: max-content 160px !important; /* largeur exacte : texte + champ */
  grid-template-rows: auto auto !important;
  grid-template-areas: "label input" "slider slider" !important;
  justify-content: center !important;  /* centre le bloc sur la largeur */
  align-content: center !important;
  column-gap: 6px !important;          /* rapproché */
  row-gap: 8px !important;
}
#mensWrap .mens-label{
  grid-area: label !important;
  margin: 0 !important;
  text-align: right !important;
  justify-self: end !important;         /* colle au champ */
}
#mensWrap .mens-value{
  grid-area: input !important;
  width: 160px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  text-align: right !important;
  justify-self: start !important;
}
#mensRange{
  grid-area: slider !important;
  width: 92% !important;                /* plus large et centré */
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* === Bouton 'Continuer' : centrage garanti dans le bloc === */
.card.section > .footer-nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 16px !important;
}
.card.section > .footer-nav #go.btn{
  grid-column: 2 !important;
  justify-self: center !important;
  margin: 0 auto !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  float: none !important;
  width: fit-content !important;
}

/* === Offset 'Continuer' 2cm to the right from center === */
.card.section > .footer-nav #go.btn{
  transform: translateX(2cm) !important;
}

/* === HARD RESET for prior overrides (Simulation page only) === */
body[data-page="simulation"] .footer-nav{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  position: static !important;
}
body[data-page="simulation"] .footer-nav #go.btn{
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  float: none !important;
}

/* === Mensualité centered duo above slider === */
#mensWrap .mens-only{
  width: 92% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: max-content 160px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "label input" "slider slider" !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  column-gap: 6px !important;
  row-gap: 10px !important;
}
#mensWrap .mens-label{
  grid-area: label !important;
  margin: 0 !important;
  text-align: right !important;
  justify-self: end !important;
}
#mensWrap .mens-value{
  grid-area: input !important;
  width: 160px !important;
  height: 44px !important;
  padding: 10px 12px !important;
  text-align: right !important;
  justify-self: start !important;
}
#mensWrap #mensRange{
  grid-area: slider !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* === Robust centering: Mensualité (label + input) === */
#mensWrap .mens-only{
  width: 92% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  text-align: center !important;           /* center inline-block children */
}
#mensWrap .mens-label,
#mensWrap .mens-value{
  display: inline-block !important;
  vertical-align: middle !important;
}
#mensWrap .mens-label{
  margin: 0 !important;
  padding-right: 6px !important;           /* small gap */
  text-align: right !important;
}
#mensWrap .mens-value{
  width: 160px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  text-align: right !important;
}
#mensWrap #mensRange{
  display: block !important;
  width: 92% !important;
  max-width: 1100px !important;
  margin: 10px auto 0 auto !important;
}

/* === Bulletproof center for the button relative to the card === */
.card.section{ position: relative !important; }
.card.section > .footer-nav{
  position: relative !important;
  height: 72px !important;                  /* reserve space for absolute child */
}
.card.section > .footer-nav #go.btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 8px !important;
  margin: 0 !important;
  float: none !important;
}

/* === FINAL: Mensualité centered using FLEX (robust) === */
#mensWrap .mens-only{
  width: min(92%, 1100px) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}
#mensWrap .mens-label{ order: 0 !important; margin:0 !important; }
#mensWrap .mens-value{ order: 1 !important; width:160px !important; height:44px !important; padding:10px 12px !important; text-align:right !important; }
#mensWrap #mensRange{ order: 2 !important; width: 100% !important; margin: 8px auto 0 auto !important; }

/* === FINAL: Button centered with grid middle column === */
body[data-page="simulation"] .card.section{ position: relative !important; }
body[data-page="simulation"] .card.section > .footer-nav{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  height: auto !important;
  padding: 8px 0 4px !important;
}
body[data-page="simulation"] .card.section > .footer-nav #go.btn{
  grid-column: 2 !important;
  position: static !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* === Center 'Continuer' (robust, high specificity) === */
body[data-page="simulation"] .card.section > .footer-nav{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  place-items: center !important;          /* center both axes */
  text-align: center !important;
  position: relative !important;
}
body[data-page="simulation"] .card.section > .footer-nav #go.btn{
  grid-column: 2 !important;               /* middle column */
  justify-self: center !important;
  align-self: center !important;
  display: inline-flex !important;
  margin: 0 auto !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  float: none !important;
}

/* === Center the number text in the Mensualité input === */
#mensualite{
  text-align: center !important;
}

/* === ULTRA FORCE: center 'Continuer' regardless of previous rules === */
body[data-page="simulation"] .card.section > .footer-nav{
  position: relative !important;
  width: 100% !important;
  display: block !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 72px !important; /* reserve space for absolute child */
}
body[data-page="simulation"] .card.section > .footer-nav > #go.btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  right: auto !important;
  float: none !important;
}

/* --- Ensure the CTA button is perfectly centered --- */
body[data-page="simulation"] .card.section > .footer-nav{
  position: relative !important;
  width: 100% !important;
  display: block !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 72px !important;
  text-align: center !important;
}
body[data-page="simulation"] .card.section > .footer-nav > #go.btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  right: auto !important;
  float: none !important;
}

/* === Outside CTA centered under the card, with blue lines like the title === */
.section-cta-outside{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 8px 0 24px 0;
}

.section-cta-outside .btn{
  grid-column: 2;
  justify-self: center;
}

/* Ensure previous in-card footer styles don't affect the new CTA button */
.section-cta-outside #go.btn{
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  float: none !important;
}

/* === Slider edge labels (min/max) === */


/* High-specificity centering of input value */
#mensWrap #mensualite{
  text-align: center !important;
}

/* === Place 'Epargne Mensuelle' above the number (centered) === */
#mensWrap .mens-only{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}
#mensWrap .mens-label{
  order: 0 !important;
  flex-basis: 100% !important;   /* takes full row */
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 4px 0 !important;  /* just above the number */
}
#mensWrap .mens-value{
  order: 1 !important;
  margin: 0 auto !important;     /* center the number chip */
  width: 160px !important;
}

/* Slider stays on its own row, full width */
#mensWrap #mensRange{
  order: 2 !important;
  width: 100% !important;
  margin: 8px auto 0 auto !important;
}

/* === Bring min/max closer to the slider and align widths === */
#mensEdges{
  order: 3 !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 2px auto 0 auto !important;   /* closer to the track */
}


/* === Tighter spacing for the savings area === */
#mensWrap .mens-label{
  margin: 0 0 2px 0 !important;   /* label just above the number */
}
#mensWrap #mensRange{
  margin: 4px auto 0 auto !important;  /* number closer to the slider */
}
#mensEdges,


/* === Ultra-tight interline for savings area === */
#mensWrap .mens-label{
  margin: 0 0 0 0 !important;   /* label directly above the number */
  line-height: 1.1 !important;
}
#mensWrap .mens-value{
  line-height: 1 !important;
}
#mensWrap #mensRange{
  margin: 2px auto 0 auto !important;  /* number closer to the slider */
}
#mensEdges,


/* === Closest spacing: number chip sits right above the slider === */
#mensWrap .mens-value{ margin-bottom: 0 !important; }
#mensWrap #mensRange{ margin: 0 auto 0 auto !important; }  /* no gap */

/* === Projections: title lines like simulation === */
body[data-page="projections"] h1{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom: 10px;
}
body[data-page="projections"] h1::before,
body[data-page="projections"] h1::after{
  content:"";
  height:4px;
  flex:1 1 auto;
  border-radius:999px;
  background: linear-gradient(to right, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0));
  box-shadow: 0 6px 18px rgba(13,93,145,.18);
}
body[data-page="projections"] h1::after{
  background: linear-gradient(to left, rgba(13,93,145,0), rgba(13,93,145,.25), rgba(13,93,145,0));
}

/* === Outside CTA under the stack (like simulation) === */
.section-cta-outside{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  width:100%;
  margin: 8px 0 24px 0;
}

.section-cta-outside .btn{ grid-column:2; justify-self:center; }

/* === Tax module (Projections) === */
.tax-module h2{
  text-align:center;
  margin: 2px 0 8px;
}
.tax-grid{ 
  display:grid; 
  grid-template-columns: 1fr auto; 
  gap: 8px 16px; 
  align-items:center;
  max-width: 760px; 
  margin: 0 auto;
}
.tax-grid .row{ display:contents; }
.tax-grid .lab{ color:#0f2a3b; font-weight:600; }
.tax-grid .chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 120px; padding: 8px 14px; border-radius: 12px;
  border:1px solid rgba(13,93,145,.18); background: #fff; box-shadow: 0 2px 8px rgba(13,93,145,.06) inset;
}
.tax-grid .chip.strong{ font-weight:700; }
.tax-grid .input-unit{ display:inline-flex; align-items:center; gap:8px; }
.tax-grid .input-unit input{ width:90px; text-align:right; }
.tax-grid .input-unit .unit{ font-weight:600; color:#0f2a3b; }
.tax-grid .hint{ grid-column: 1 / -1; text-align:center; font-size:12px; color:#6b7280; margin: 2px 0 0; }

/* === Simple ICC module === */
.simple-icc h2{ text-align:center; margin: 2px 0 8px; }
.icc-grid{
  display:grid; grid-template-columns: repeat(4, minmax(160px,1fr)); gap: 12px;
  align-items: end; max-width: 1000px; margin: 0 auto;
}
.icc-grid label{ display:flex; flex-direction:column; gap:6px; font-weight:600; color:#0f2a3b; }
.icc-grid input, .icc-grid select{ height:44px; border-radius:12px; padding:8px 12px; border:1px solid rgba(13,93,145,.18); }
.icc-out{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.icc-out .lab{ font-weight:600; color:#0f2a3b; }
.icc-out .chip{ min-width:140px; padding:8px 14px; border-radius:12px; border:1px solid rgba(13,93,145,.18); background:#fff; box-shadow: inset 0 2px 8px rgba(13,93,145,.06); font-weight:700; }
.simple-icc .hint{ text-align:center; font-size:12px; color:#6b7280; margin-top:6px; }
@media (max-width: 900px){
  .icc-grid{ grid-template-columns: 1fr 1fr; }
}

/* v18 fixes */

#mensWrap 

#mensWrap 
#mensWrap 

/* v19 - UI tidy: remove duplicate Ville label when select is shown */
#villeSelectWrap > label { display:none; }

/* v19 - Make Ville field styling identical */
.col-ville .field select,
.col-ville .field input#ville {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}

/* v19 - Mensualité layout: input above slider, min/max at extremes */
#mensWrap .mens-col{ display:flex; flex-direction:column; gap:8px; }

#mensWrap 

#mensWrap 
#mensWrap input[type=number]{ max-width:220px; }
/* Remove any floating badge over the track */
.mens-badge{ display:none !important; }

/* v20 - Place slider min/max outside the track */

#mensWrap 

#mensWrap 
#mensWrap 
#mensWrap 
#mensWrap 

/* number input above slider and centered */
#mensWrap .mens-input{ display:flex; justify-content:center; margin-top:10px; }
#mensWrap .mens-input input[type=number]{ max-width:220px; text-align:center; }

/* v21 - Clean Mensualité layout */
#mensWrap { text-align:center; }
#mensWrap .mens-label { font-weight:700; margin-bottom:4px; display:block; }
#mensWrap .mens-input { margin-bottom:8px; }
#mensWrap .mens-input input { text-align:center; max-width:200px; margin:0 auto; }

#mensWrap 

#mensWrap 
#mensWrap 
#mensWrap 
#mensWrap 

/* v21 - Force correct layout for Mensualité block */
#mensWrap{ overflow: visible; }
#mensWrap .mens-only{ display:flex; flex-direction:column; gap:10px; }
#mensWrap .mens-input{ display:flex; justify-content:center; }
#mensWrap .mens-input input[type=number]{ max-width:220px; text-align:center; }

#mensWrap 

#mensWrap 
#mensWrap 
#mensWrap 

/* v22 - Keep min/max at slider edges */

#mensWrap 

#mensWrap 
#mensWrap 

/* v23 - Slider with min/max aligned at track edges */
#mensWrap .mens-only{ display:flex; flex-direction:column; gap:10px; }
#mensWrap .mens-input{ display:flex; justify-content:center; }
#mensWrap .mens-input input{ max-width:220px; text-align:center; }

#mensWrap 

#mensWrap 
#mensWrap 

/* v23 - Keep min/max inline in the range-line */

#mensWrap 

#mensWrap 
#mensWrap 
 /* legacy container, hidden */

/* v24 - Use CSS Grid to lock positions: [min] [slider] [max] */

#mensWrap 

#mensWrap 
#mensWrap 

/* v25 - Range-line with labels on each side of slider */

#mensWrap 

#mensWrap 
#mensWrap 

/* v25 - Hard override: ensure min | slider | max are on one line */
.range-line.range-grid{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  column-gap:16px !important;
}
.range-line.range-grid input[type=range]{
  width:100% !important;
  min-width:0 !important;
}
.range-line.range-grid .edge{
  white-space:nowrap !important;
  font-weight:700 !important;
}

/* v26 - Force hide any legacy range-edges and ensure width */
.range-edges{ display:none !important; }
#mensWrap 

/* v27 - Robust min/max using pseudo-elements on the slider wrapper */
#mensWrap 
#mensWrap .range-line .range-wrap{ position:relative; width:100%; }
#mensWrap .range-line .range-wrap::before{
  content: attr(data-min);
  position:absolute; left:-64px; top:50%; transform:translateY(-50%);
  font-weight:700; white-space:nowrap;
}
#mensWrap .range-line .range-wrap::after{
  content: attr(data-max);
  position:absolute; right:-64px; top:50%; transform:translateY(-50%);
  font-weight:700; white-space:nowrap;
}
#mensWrap 


/* === Patch: center slider + inline min/max labels for mens section === */
#mensWrap .mens-only{ display:flex; flex-direction:column; gap:6px; }
#mensWrap .mens-input{ margin-top:2px; }

.range-line .range-edge{ font-size:14px; color:var(--ink); opacity:.9; white-space:nowrap; }



/* Fix Ville input width in 'single field + optional dropdown' layout */
#ville { width:100% !important; display:block; }
#villeSelectWrap select { width:100%; display:block; }
.col-ville{ display:flex; flex-direction:column; gap:8px; }


/* Combobox dropdown for Ville */
.combo-menu{
  position:absolute;
  z-index:50;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  max-height:260px;
  overflow:auto;
}
.combo-menu .combo-item{
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid #eef3f7;
}
.combo-menu .combo-item:last-child{ border-bottom:none; }
.combo-menu .combo-item.active{ background:#edf6fd; }

.canton-menu{ max-height: 220px; }

.input-hint{ font-size:12px; color:#6b7280; } /* neutral hint under inputs */


/* --- Compact spacing for the Epargne Mensuelle block --- */
#mensWrap{ margin-top:8px; }
#mensWrap > *{ margin-top:0; margin-bottom:0; }
#mensWrap > * + *{ margin-top:10px; }       /* vertical rhythm between title, value and slider */
#mensWrap     /* reduce gap just above the slider */
#mensWrap input[type="range"]{ margin:0; }  /* no extra margin on the range itself */
@media (max-width: 768px){
  #mensWrap > * + *{ margin-top:8px; }      /* a tad tighter on mobile */
}
/* --- End compact spacing --- */


/* --- KPI Drawer --- */
.kpi-card{ position:relative; padding-bottom:26px; }
.drawer-tab{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; font-weight:600; color:var(--ink); box-shadow:var(--shadow);
  cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:8px;
}
.drawer-tab .chev{ display:inline-block; transition:transform .2s ease; }
.kpi-drawer.open .drawer-tab .chev{ transform:rotate(180deg); }

.kpi-drawer + .drawer-body{
  max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .25s ease;
}
.kpi-drawer.open + .drawer-body{
  max-height:520px; opacity:1;
}

.drawer-body{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin-top:14px; padding:16px; box-shadow:var(--shadow); }
.drawer-body .hint{ margin:0; color:var(--muted); }


/* --- Drawer integration / seamless extension --- */
.kpi-card{ position:relative; padding-bottom:26px; }
.kpi-drawer + .drawer-body{ margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }
.kpi-drawer.open .kpi-card{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.kpi-drawer.open + .drawer-body{ border-top:none; }

.icc-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; align-items:end;
}
@media (max-width: 820px){
  .icc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .icc-grid{ grid-template-columns: 1fr; }
}
.form-field label{ display:block; font-weight:600; color:var(--ink); margin-bottom:6px; }
.form-field input, .form-field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.pill{ display:inline-block; padding:10px 12px; border-radius:999px; background:#f2f7fb; font-weight:700; color:var(--ink); }


/* === In-card Drawer (KPI) === */
.kpi-card{ position:relative; overflow:hidden; }
.drawer-tab.pretty{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; font-weight:700;
  color:#0B508A; background:linear-gradient(180deg,#ffffff, #f6fbff);
  border:1px solid var(--line); box-shadow:0 8px 20px rgba(13,93,145,.10);
}
.drawer-tab .chev{ transition:transform .25s ease; }
.kpi-card[data-drawer="open"] .drawer-tab .chev{ transform:rotate(180deg); }

.drawer-panel{
  max-height:0; overflow:hidden; transition:max-height .35s ease, opacity .2s ease, padding .2s ease;
  opacity:0; padding:0 2px;
  border-top:1px solid var(--line); margin-top:12px;
}
.kpi-card[data-drawer="open"] .drawer-panel{
  max-height:640px; opacity:1; padding:12px 2px 2px;
}

.drawer-panel .icc-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; align-items:end;
}
@media (max-width: 820px){
  .drawer-panel .icc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .drawer-panel .icc-grid{ grid-template-columns: 1fr; }
}
.drawer-panel .form-field label{ display:block; font-weight:600; color:var(--ink); margin-bottom:6px; }
.drawer-panel .form-field input, .drawer-panel .form-field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.drawer-panel .pill{ display:inline-block; padding:10px 12px; border-radius:999px; background:#f2f7fb; font-weight:700; color:var(--ink); }

/* Fallback: open drawer when targeted via URL hash */
#kpi-drawer-panel:target{
  max-height:640px; opacity:1; padding:12px 2px 2px;
}


/* === Full-width drawer trigger === */
.drawer-tab.pretty{
  position:static;
  width:100%;
  margin-top:10px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; font-weight:700;
  color:#0B508A;
  background:linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(13,93,145,.08);
  text-decoration:none;
}
.kpi-card[data-drawer="open"] .drawer-tab.pretty{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.drawer-panel{
  background:#ffffff;
  border:1px solid var(--line);
  border-top:none;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  box-shadow:0 12px 28px rgba(13,93,145,.10);
}


/* Custom focus ring matching theme */
.drawer-tab.pretty:focus{ outline: none; }
.drawer-tab.pretty:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,80,138,.18), 0 6px 16px rgba(13,93,145,.10);
}

/* Panel animation improvements */
.drawer-panel{
  transition: max-height .38s cubic-bezier(.22,.61,.36,1), opacity .22s ease, padding .22s ease;
  will-change: max-height, opacity;
}


/* === Drawer as bottom of infos block === */
.kpi-card{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: visible; }

/* Full-width bottom bar inside the card (becomes the visible bottom edge) */
.drawer-tab.pretty{
  position: static;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin: 10px 0 0 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 12px 14px;
  font-weight: 700; color:#0B508A;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

/* When opened, the button becomes the header of the extended panel */
.kpi-card[data-drawer="open"] .drawer-tab.pretty{
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* Panel aligns with card edges and extends below */
.drawer-panel{
  background:#ffffff;
  margin: 0;
  width: calc(100% + 2px);
  margin-left: -1px;
  border: 1px solid var(--line);
  border-top: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(13,93,145,.10);
}


/* Force the trigger to span the full card width and center content */
.kpi-card{ display:block; }
.kpi-card > .drawer-tab.pretty{
  display:block !important;
  width:100% !important;
  align-self:stretch !important;
  grid-column:1 / -1;
  box-sizing:border-box;
  text-align:center;
}


/* --- Align drawer trigger exactly under the Infos block --- */
.drawer-tab.pretty{
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* --- Make the drawer trigger the exact bottom edge of the Infos card --- */
.card.section.kpi-card{ overflow:hidden; padding-bottom:0; }

/* Extend trigger to card edges by offsetting internal card padding (18px) */
.card.section.kpi-card > .drawer-tab.pretty{
  display:block; width:calc(100% + 36px); margin:12px -18px 0 -18px;
  border-radius:0 0 var(--radius) var(--radius);
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
  box-shadow:none; /* no drop shadow below the card */
}

/* When open, the trigger becomes the card's bottom border, and panel attaches underneath seamlessly */
.kpi-card[data-drawer="open"] .drawer-panel{
  border-top:none;
}


/* Downward cue on the drawer trigger */
.drawer-tab.pretty{ position: relative; }
.drawer-tab.pretty::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:20px; height:12px;
  background: linear-gradient(180deg, #f6fbff 0%, #eaf4ff 100%);
  border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  border-bottom-left-radius:10px; border-bottom-right-radius:10px;
  box-shadow: 0 8px 18px rgba(13,93,145,.10);
  transition: opacity .2s ease, transform .2s ease;
}
.kpi-card[data-drawer="open"] .drawer-tab.pretty::after{ opacity:0; transform:translateX(-50%) translateY(2px); }


/* Seamless block when open */
.kpi-card[data-drawer="open"] > .drawer-tab.pretty{
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 60%);
  border-bottom: none;
}
.kpi-card[data-drawer="open"] > .drawer-tab.pretty + .drawer-panel{
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
  border-top: none;
}

/* Keep radius consistent across the whole block */
.kpi-card[data-drawer="open"]{
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.input-row{ display:flex; gap:8px; align-items:center; }
.pill-btn{ padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#f2f7fb; cursor:pointer; font-weight:600; }
.pill-btn:hover{ filter:brightness(0.97); }


/* Make rate row inline with button */
.input-row{ display:flex; gap:8px; align-items:center; }
.input-row > input{ flex:1 1 auto; min-width:0; }
.input-row > .pill-btn{ flex:0 0 auto; white-space:nowrap; height:40px; display:inline-flex; align-items:center; }

.notice.info{ background:#eef6ff; color:#0b508a; padding:8px 12px; border-radius:8px; border:1px solid var(--line); margin-bottom:8px; font-weight:700; }
/* Segmented toggle (Résident / Non-résident) */
.seg-toggle{ margin-left:auto; margin-right:auto; 
  display:inline-flex; align-items:center; border:1px solid var(--line);
  background:linear-gradient(180deg,#f6fbff,#f0f6fb);
  border-radius:999px; overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.04), inset 0 1px 0 rgba(255,255,255,.6);
  margin:8px 0 12px; user-select:none;
}
.seg-btn{
  appearance:none; border:0; padding:10px 16px; font-weight:700; cursor:pointer;
  background:transparent; color:#7a8aa0; min-width:150px;
}
.seg-btn.is-active{ filter:drop-shadow(0 1px 0 rgba(11,80,138,.15)); 
  color:#0b508a; background:linear-gradient(180deg,#d9f0ff,#bbe4ff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(11,80,138,.15);
}
.seg-btn:first-child{ border-right:1px solid rgba(0,0,0,.06); }
.seg-btn:focus{ outline:none; box-shadow:0 0 0 2px rgba(17,105,255,.25) inset; border-radius:inherit; }
@media (max-width:640px){
  .seg-btn{ min-width:120px; padding:10px 12px; }
}

#frFields, #fieldCpFr{ display:none !important; }

/* 3D segmented toggle styling */
.seg-toggle{
  display:flex;
  justify-content:center;
  gap:0;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:linear-gradient(180deg,#f9fbff,#eef5fb);
  box-shadow:0 2px 6px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.7);
  padding:4px;
  width:fit-content;
}
.seg-btn{
  position:relative;
  appearance:none;
  border:0;
  padding:10px 18px;
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#f3f7fc);
  color:#6a7f95;
  border-radius:999px;
  transition:transform .08s ease, box-shadow .12s ease, color .12s ease, background .12s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.04);
}
.seg-btn:hover{ color:#0b508a; }
.seg-btn.is-active{
  color:#093e6b;
  background:linear-gradient(180deg,#d9efff,#bfe5ff);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.9), inset 0 -2px 6px rgba(11,80,138,.12), 0 2px 6px rgba(11,80,138,.08);
  transform:translateY(-1px);
}
/* Reduce space between amount and slider */
input[type="range"]{
  margin-top:8px !important;
}

/* Center & enlarge segmented toggle */
.seg-toggle{
  margin: 8px auto 18px !important;
  justify-content: center;
  width: fit-content;
  padding: 6px !important;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg,#f9fbff,#eef5fb);
  box-shadow: 0 2px 6px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.seg-btn{
  min-width: 190px !important;
  padding: 12px 26px !important;
  font-size: 1.02rem !important;
  border-radius: 999px !important;
}
.seg-btn.is-active{
  transform: translateY(-1px);
}

#cp{display:block;}


/* EUR toggle switch */
.fx-switch{position:relative;display:inline-block;width:46px;height:24px;vertical-align:middle}
.fx-switch input{opacity:0;width:0;height:0}
.fx-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#d1d5db;transition:.2s;border-radius:9999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fx-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background:#fff;transition:.2s;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.fx-switch input:checked + .fx-slider{background:#0B508A}
.fx-switch input:checked + .fx-slider:before{transform:translateX(22px)}

/* Internal 2-col layout only; card sizing unchanged */
.kpi-card .kpis.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:768px){.kpi-card .kpis.two-cols{grid-template-columns:1fr}}



/* Match chart card width to info card */
.stack > .card.section.kpi-card{ max-width: 920px; margin-left:auto; margin-right:auto; }
.stack > .card.section.kpi-card + .card.section{ max-width: 920px; margin-left:auto; margin-right:auto; }
@media (max-width: 980px){
  .stack > .card.section.kpi-card,
  .stack > .card.section.kpi-card + .card.section{ max-width: 100%; }
}



/* === Width lock for Projections Frontalier (948px) === */
body.projections-frontalier .card.section,
body.projections-frontalier .card.section.kpi-card,
body.projections-frontalier .section-cta-outside{
  max-width: 948px !important;
  width: 948px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}




/* Frontalier – style fixes */
body.projections-frontalier .card.section.kpi-card{ margin-bottom: 2px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  margin-bottom: 4px; /* reduced gap */
}
body.projections-frontalier .card.section.kpi-card + .card.section{
  margin-top: 4px; /* pull chart closer */
}
body.projections-frontalier #eurToggleBox #fxNote{
  margin-top: 6px;
  font-size: 12px;
  opacity: .75;
}


/* === Frontalier: kpi/toggle spacing + theme switch === */
body.projections-frontalier #eurToggleBox{
  padding-top: 18px;
  padding-bottom: 18px;
}
body.projections-frontalier #eurToggleBox > div{
  display: flex;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 6px !important;
}
body.projections-frontalier #eurToggleBox label[for="fxToEUR"]{
  line-height: 1.1;
  margin-bottom: 2px;
}
body.projections-frontalier #eurToggleBox #fxNote{
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}

/* bring chart a bit closer to info card */
body.projections-frontalier .card.section.kpi-card{ margin-bottom: 2px; margin-bottom: 4px; }

/* Theme switch: slightly larger, pill style matching brand */
body.projections-frontalier .fx-switch{ width:52px; height:28px; }
body.projections-frontalier .fx-slider{
  background:#E9F2F8;
  border-radius:9999px;
  box-shadow: inset 0 0 0 1px rgba(11,80,138,.15);
}
body.projections-frontalier .fx-slider:before{
  height:22px;
  width:22px;
  left:3px;
  top:3px;
  border-radius:9999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
}
body.projections-frontalier .fx-switch input:checked + .fx-slider{ background:#0B508A; }
body.projections-frontalier .fx-switch input:checked + .fx-slider:before{ transform: translateX(24px); }
body.projections-frontalier .fx-switch input:focus + .fx-slider{
  outline:2px solid rgba(11,80,138,.35);
  outline-offset:2px;
}



/* ——— Frontalier : tuiles 2e rangée plus compactes ——— */
body.projections-frontalier .card.section.kpi-card .kpi:nth-child(n+3){
  padding-top: 10px;
  padding-bottom: 10px;
}

/* la tuile EUR recompactée */
body.projections-frontalier #eurToggleBox{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* note sous l’interrupteur : fine pour conserver la hauteur */
body.projections-frontalier #eurToggleBox #fxNote{
  font-size: 11px;
  line-height: 1.25;
  margin-top: 4px;
}

/* ajustement global du card si besoin d'un léger équilibrage */
body.projections-frontalier .card.section.kpi-card{ margin-bottom: 2px;
  padding-bottom: 14px;
}


/* Stepper moved into CTA bar */
.section-cta-outside nav.stepper{ flex:1; display:flex; align-items:center; justify-content:center; margin: 0 12px; }
.section-cta-outside nav.stepper .line{display:none !important;} /* cleaner in the bar */
.section-cta-outside nav.stepper ol{ margin:0; }


/* Frontalier: reduce vertical gap between cards */
body.projections-frontalier .stack{ gap: 10px; }

/* CTA bar layout and blue separators around stepper */
.section-cta-outside{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.section-cta-outside nav.stepper{ grid-column: 2; position: relative; padding: 0 12px; }
.section-cta-outside nav.stepper::before,
.section-cta-outside nav.stepper::after{
  content:"";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 2px;
  background: #d9e8f4;
  box-shadow: inset 0 -1px 0 rgba(11,80,138,.15);
  border-radius: 2px;
}
.section-cta-outside nav.stepper::before{ right: 100%; margin-right: 12px; }
.section-cta-outside nav.stepper::after{ left: 100%; margin-left: 12px; }



/* CTA layout and rails next to stepper (no overlap on buttons) */
.section-cta-outside{ display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; }
.section-cta-outside nav.stepper{ position:relative; padding:0 12px; }
.section-cta-outside nav.stepper::before,
.section-cta-outside nav.stepper::after{
  content:"";
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:72px; height:2px;
  background:#d9e8f4; box-shadow: inset 0 -1px 0 rgba(11,80,138,.15);
  border-radius:2px; z-index:0;
}
.section-cta-outside nav.stepper::before{ right:100%; margin-right:12px; }
.section-cta-outside nav.stepper::after{  left:100%;  margin-left:12px; }
.section-cta-outside .btn, .section-cta-outside nav.stepper{ z-index:1; }


/* Simulation page: more padding bottom in info card to host CTA button */
body[data-page="simulation"] .card.section{ padding-bottom: 20px; }
body[data-page="simulation"] .card.section .actions{ margin-top: 8px; display:flex; justify-content:flex-end; }

.chart-tagline{
  text-align:center;
  margin: 8px 0 2px;
  font-size: 14px;
  color: #325d80;
  opacity: .9;
}
.simu-tagline{
  text-align:center;
  margin: 4px 0 12px;
  font-size: 16px;
  font-weight: 500;
  color:#0B508A;
}


/* Frontalier: tighter gap between info card and chart */
body.projections-frontalier .card.section.kpi-card{ margin-bottom: 6px !important; }
body.projections-frontalier .kpi-card + .card.section{ margin-top: 6px !important; }



/* Rails only on projections pages, anchored to stepper (avoid buttons) */
body[data-page="projections"] .section-cta-outside nav.stepper,
body.projections-frontalier .section-cta-outside nav.stepper{ position:relative; padding:0 12px; }
body[data-page="projections"] .section-cta-outside nav.stepper::before,
body[data-page="projections"] .section-cta-outside nav.stepper::after,
body.projections-frontalier .section-cta-outside nav.stepper::before,
body.projections-frontalier .section-cta-outside nav.stepper::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:84px; height:2px; background:#d9e8f4;
  box-shadow: inset 0 -1px 0 rgba(11,80,138,.15);
  border-radius:2px; z-index:0;
}
body[data-page="projections"] .section-cta-outside nav.stepper::before,
body.projections-frontalier .section-cta-outside nav.stepper::before{ right:100%; margin-right:16px; }
body[data-page="projections"] .section-cta-outside nav.stepper::after,
body.projections-frontalier .section-cta-outside nav.stepper::after{ left:100%; margin-left:16px; }

/* Simulation page: no rails (no double CTA buttons) */
body[data-page="simulation"] .section-cta-outside nav.stepper::before,
body[data-page="simulation"] .section-cta-outside nav.stepper::after{ display:none; }



/* Center CTA under slider + blue rails */
.actions-under-slider {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:8px;
}




/* Simulation page: bring stepper closer to form and add rails */
body[data-page="simulation"] .section-cta-outside{ margin-top: 12px; }
body[data-page="simulation"] .section-cta-outside nav.stepper{ position:relative; padding: 0 12px; }
body[data-page="simulation"] .section-cta-outside nav.stepper::before,
body[data-page="simulation"] .section-cta-outside nav.stepper::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:90px; height:2px; background:#d9e8f4;
  border-radius:2px; box-shadow: inset 0 -1px 0 rgba(11,80,138,.15);
}
body[data-page="simulation"] .section-cta-outside nav.stepper::before{ right:100%; margin-right:12px; }
body[data-page="simulation"] .section-cta-outside nav.stepper::after{  left:100%;  margin-left:12px; }

/* Global hero title on each page */
.global-hero{
  margin-bottom:12px;
  margin: 10px auto 15px;font-size:clamp(20px, 2.4vw, 32px);font-weight:900;color:var(--brand);text-align:center;line-height:1.15;max-width:784px;padding:0 16px;position:relative;letter-spacing:.2px;}



/* Center 'Voir ma simulation' under the numeric value (span full grid) */
body[data-page="simulation"] .actions-under-slider {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:8px;
}







.range-line span {
  font-weight: 600;
  color: var(--ink);
  min-width: 60px;
  text-align: center;
}

/* Keep min/max labels on the same line as the slider */
.range-line span { white-space: nowrap; }


.range-line {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  gap:12px;
}



.range-line .edge {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
}


/* Range line: labels on the sides, slider takes all middle space */
.range-line {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  gap:12px;
}

.range-line .edge{
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  min-width:60px;
  text-align:center;
}



/* Side blue lines around the stepper */
nav.stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 auto 0px;
  width:100%;
  position:relative;
}
nav.stepper::before,
nav.stepper::after{
  content:"";
  flex:1 1 auto;
  height:2px;
  background:linear-gradient(90deg, var(--brand-300), var(--brand));
  border-radius:999px;
  box-shadow:var(--shadow);
  max-width:200px;
}






/* Slider takes 90% width to leave room for the right label */


/* Slider takes 70% width, labels fixed at extremities */
.range-line {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  gap:12px;
}

.range-line .edge{
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}




/* Range line with absolute-positioned edge labels */
.range-line {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.range-line .edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.range-line .edge.min {
  left: 0;
}
.range-line .edge.max {
  right: 0;
}


/* Precise label placement at slider ends */
.range-line{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 64px; /* reserve space for labels on both sides */
  gap: 0;
}
.range-line input[type=range]{
  flex: 1;
  margin: 0;
}

#mensMinLabel{ left: 0; }
#mensMaxLabel{ right: 0; }



/* Labels at slider ends: crisp text, above the track */
#mensMinLabel, #mensMaxLabel{
  position:absolute; top:50%; transform:translateY(-50%);
  font-weight:700; color:var(--ink); white-space:nowrap;
  pointer-events:none; z-index:2;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* Range container: narrower, centered; reserve sides for labels */
.range-line{
  position:relative; display:flex; align-items:center; width:100%;
  max-width: 860px; margin: 0 auto;
  padding: 0 64px; gap:0;
}
@media (min-width: 1024px){
  .range-line{ max-width: 780px; } /* reduce width a bit on large screens */
}

/* Slider fills available center area */
.range-line input[type=range]{ flex:1; margin:0; }

/* Safety: hide any extra label clones accidentally injected */
.range-line span.edge:not(#mensMinLabel):not(#mensMaxLabel){ display:none !important; }



/* Decorative lines around top hero title */
.global-hero{
  margin-bottom:12px;
  margin: 10px auto 15px;font-size:clamp(20px, 2.4vw, 32px);font-weight:900;color:var(--brand);text-align:center;line-height:1.15;max-width:784px;padding:0 16px;position:relative;letter-spacing:.2px;}

.global-hero::after{ display:none; } /* keep only one line below title to avoid clutter */



.actions-under-slider{ margin-top:18px; }
.actions-under-slider .btn{ min-width:240px; }



nav.stepper::before, nav.stepper::after{
  max-width: 260px; opacity:.9;
}


/* Rails bleus identiques autour du CTA */
.actions-under-slider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:16px;
  width:100%;
}
\0px;
  background: linear-gradient(90deg, var(--brand-300), var(--brand), var(--brand-300));
  box-shadow: 0 4px 10px rgba(13,93,145,.08);
}
.actions-under-slider .btn{ min-width:240px; }

/* Constrain hero width to align with blocks */
.global-hero{
  margin-bottom:12px;
  margin: 10px auto 15px;font-size:clamp(20px, 2.4vw, 32px);font-weight:900;color:var(--brand);text-align:center;line-height:1.15;max-width:784px;padding:0 16px;position:relative;letter-spacing:.2px;}

.global-hero::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  height:2px;
  top: calc(100% + 6px);
  background: linear-gradient(90deg, transparent, var(--brand-300), var(--brand), var(--brand-300), transparent);
  border-radius:999px;
  box-shadow: 0 4px 10px rgba(13,93,145,.08);
}




/* === CTA Rails (robust) === */
.actions-under-slider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:100%;
  margin-top:16px;
}
.actions-under-slider::before,
.actions-under-slider::after{
  content:"";
  height:2px;
  background: linear-gradient(90deg, var(--brand-300), var(--brand), var(--brand-300));
  flex:1 1 auto;
  max-width:360px;
  border-radius:999px;
  box-shadow: 0 4px 10px rgba(13,93,145,.08);
}
.actions-under-slider .btn{ min-width:240px; display:inline-flex; justify-content:center; }


/* Decorative rails (no content) */
.rails-only{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin: 18px auto 8px;
  width:100%;
}
.rails-only::before,
.rails-only::after{
  content:"";
  height:2px;
  background: linear-gradient(90deg, var(--brand-300), var(--brand), var(--brand-300));
  flex:1 1 auto;
  max-width:360px;
  border-radius:999px;
  box-shadow: 0 4px 10px rgba(13,93,145,.08);
}


/* ===== Simulation-only visual tweaks ===== */
body[data-page="simulation"] .global-hero{
  margin-bottom:12px;
  margin: 10px auto 15px;
  margin: 10px auto 15px;
  /* Reduce ~10–15% vs global to align with central block */
  font-size: clamp(20px, 2.4vw, 32px);
}

body[data-page="simulation"] nav.stepper{ margin: 0 auto 24px;
}

body[data-page="simulation"] .actions-under-slider::before,
body[data-page="simulation"] .actions-under-slider::after{
  /* Slightly longer rails; thickness harmonized with stepper (2px) */
  max-width: 420px;
  height: 2px;
}



/* Inward-facing rail gradients (right side inverted) */
nav.stepper::before{background: linear-gradient(90deg, rgba(11,80,138,0), var(--brand-300), var(--brand));}
nav.stepper::after{background: linear-gradient(90deg, var(--brand), var(--brand-300), rgba(11,80,138,0));}
.actions-under-slider::before{background: linear-gradient(90deg, rgba(11,80,138,0), var(--brand-300), var(--brand));}
.actions-under-slider::after{background: linear-gradient(90deg, var(--brand), var(--brand-300), rgba(11,80,138,0));}
.rails-only::before{background: linear-gradient(90deg, rgba(11,80,138,0), var(--brand-300), var(--brand));}
.rails-only::after{background: linear-gradient(90deg, var(--brand), var(--brand-300), rgba(11,80,138,0));}


/* Mirror rails: darker near the stepper, fade outward */
nav.stepper::before{ background: linear-gradient(90deg, rgba(11,80,138,0), var(--brand-300), var(--brand)) !important; }
nav.stepper::after { background: linear-gradient(90deg, var(--brand), var(--brand-300), rgba(11,80,138,0)) !important; }
.actions-under-slider::before{ background: linear-gradient(90deg, rgba(11,80,138,0), var(--brand-300), var(--brand)) !important; }
.actions-under-slider::after { background: linear-gradient(90deg, var(--brand), var(--brand-300), rgba(11,80,138,0)) !important; }
.rails-only::before{ background: linear-gradient(90deg, rgba(11,80,138,0), var(--brand-300), var(--brand)) !important; }
.rails-only::after { background: linear-gradient(90deg, var(--brand), var(--brand-300), rgba(11,80,138,0)) !important; }



/* Slightly larger CTA text */
.actions-under-slider .btn{
  font-size: 1.0625rem; /* ~17px */
}
@media (max-width: 480px){
  .actions-under-slider .btn{ font-size: 1rem; } /* keep it tidy on small screens */
}



/* --- Render Simulation page at ~80% size on 100% browser zoom --- */
body[data-page="simulation"]{ zoom: 0.8; } /* Chrome/Edge/Opera */
@supports not (zoom: 1){
  /* Fallback for browsers that don't support 'zoom' */
  body[data-page="simulation"] .sim-scale{
    transform: scale(0.8);
    transform-origin: top center;
    width: 125%;
  }
  html { overflow-x: hidden; }
}



/* === Unified shadow on fields (same as stepper) === */
.field:not(.error) input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.field:not(.error) select {
  box-shadow: var(--shadow);
  background: #fff;
}
/* Subtle focus ring that stacks with the shadow */
.field:not(.error) input:focus,
.field:not(.error) select:focus {
  outline: none;
  border-color: var(--brand-300);
  box-shadow: 0 0 0 3px rgba(13,93,145,.10), var(--shadow);
}
/* Keep error ring dominant */
.field.error input,
.field.error select {
  box-shadow: 0 0 0 3px rgba(231,111,81,.15) !important;
}



/* Ensure Ville & Canton get the unified shadow */
.col-ville .field input#ville,
.field select#canton {
  box-shadow: var(--shadow) !important;
  background: #fff;
}



/* Shadow on CTA button (match stepper) */
.actions-under-slider .btn{
  box-shadow: var(--shadow);
}



/* Keep inner area white on all fields (Ville, Canton, DOB, etc.) */
.field input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.field select{
  background: #fff !important;
  color: var(--ink);
}

/* Also white when disabled or readonly (no grey tint) */
.field input:disabled,
.field select:disabled,
.field input[readonly]{
  background: #fff !important;
  color: var(--ink);
  opacity: 1;
}

/* Ensure CTA keeps the shadow */
.actions-under-slider .btn{
  box-shadow: var(--shadow) !important;
}



body.projections-frontalier .stack{ gap: 8px; } /* was 18px */
body.projections-frontalier .card.section.kpi-card{ margin-bottom: 0 !important; padding-bottom: 8px; }
body.projections-frontalier .card.section.kpi-card + .card.section{ margin-top: 2px !important; }



/* === No gap between KPI and chart (projections frontalier) === */
body.projections-frontalier .stack{ gap: 0 !important; }
body.projections-frontalier .card.section.kpi-card{ margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.projections-frontalier .card.section.kpi-card + .card.section{ margin-top: 0 !important; border-top-left-radius: 0; border-top-right-radius: 0; }



/* Fuse KPI and Chart cards on projections frontalier */
body.projections-frontalier .stack{ gap:0 !important; }
body.projections-frontalier .kpi-card{ margin-bottom:-8px !important; padding-bottom:0 !important; border-bottom-left-radius:0; border-bottom-right-radius:0; }
body.projections-frontalier .kpi-card + .card.section{ margin-top:0 !important; border-top-left-radius:0; border-top-right-radius:0; }



/* Remove the white band between KPI and chart on frontalier */
body.projections-frontalier .card.section.kpi-card{ padding-bottom:0 !important; margin-bottom:0 !important; border-bottom-left-radius:0; border-bottom-right-radius:0; }
body.projections-frontalier .card.section.kpi-card + .card.section{ padding-top:0 !important; margin-top:0 !important; border-top-left-radius:0; border-top-right-radius:0; }
body.projections-frontalier .card.section.kpi-card + .card.section .tabs{ padding-top:0 !important; }



/* Zero vertical gap between KPI block and chart block (frontalier) */
body.projections-frontalier .kpi-card{ padding-bottom: 0 !important; margin-bottom: 0 !important; border-bottom-left-radius:0; border-bottom-right-radius:0; }
body.projections-frontalier .chart-card{
  margin-top: -10px;
}
body.projections-frontalier .chart-card .tabs{ padding-top: 0 !important; }



/* Compact KPI & FX cards (frontalier) */
body.projections-frontalier .card.section.kpi-card,
body.projections-frontalier .card.section.fx-card{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 56px;
}

/* Fine-tune texts inside for tighter vertical rhythm */
body.projections-frontalier .kpi-card .label,
body.projections-frontalier .kpi-card .value{
  line-height: 1.15;
}

/* Tighter FX note & toggle spacing */
body.projections-frontalier .fx-card #fxNote{ margin-top: 4px !important; font-size: 12px; opacity: .8; }
body.projections-frontalier .fx-card .switch{ transform: scale(.95); }



/* Align cards to 948px centered on frontalier projections */
body.projections-frontalier .card.section,
body.projections-frontalier .card.section.kpi-card,
body.projections-frontalier .section-cta-outside{
  max-width: 948px !important;
  width: 948px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}



/* FX row: label + switch on one line */
.fx-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.fx-row .fx-switch{ flex:0 0 auto; }



.fx-row{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap; }
.fx-label{ font-weight:600; display:inline-block; }
.fx-row .fx-switch{ flex:0 0 auto; }



/* Force label + switch on the same line in EUR toggle */
#eurToggleBox .fx-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}
#eurToggleBox .fx-row .fx-label{ display:inline-flex; margin-right:2px; }
#eurToggleBox .fx-row .fx-switch{ margin-left:0; flex:0 0 auto; }
#eurToggleBox #fxNote{ margin-top:8px; }



/* EUR toggle: text + switch on one line */
#eurToggleBox > .label{ display:none !important; } /* hide auto label to avoid double line */
#eurToggleBox .fx-row{ display:inline-flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; }
#eurToggleBox .fx-row .switch{ margin:0 !important; }
#eurToggleBox #fxNote{ margin-top:8px; }



/* Inline toggle: switch + text on one line (frontalier) */
#eurToggleBox > .label{ display:none !important; }
#eurToggleBox .toggle-inline{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
#eurToggleBox .toggle-inline input{ position:absolute; opacity:0; width:0; height:0; }
#eurToggleBox .toggle-inline .track{
  position:relative; width:44px; height:24px; border-radius:999px;
  background: var(--brand-50); box-shadow: inset 0 0 0 2px rgba(13,93,145,.08);
  transition: .2s ease;
}
#eurToggleBox .toggle-inline .track::before{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow: var(--shadow); transition: .2s ease;
}
#eurToggleBox .toggle-inline input:checked + .track{ background: var(--brand-200); }
#eurToggleBox .toggle-inline input:checked + .track::before{ transform: translateX(20px); }
#eurToggleBox .toggle-inline .txt{ font-weight:600; }
#eurToggleBox #fxNote{ margin-top:8px; }



/* Segmented currency control */
#eurToggleBox .seg-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#eurToggleBox .seg-label{ font-weight:600; }
#eurToggleBox .seg-toggle{
  display:inline-grid; grid-auto-flow:column; background:#fff;
  border:1px solid rgba(13,93,145,.18); border-radius:999px; overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(13,93,145,.06);
}
#eurToggleBox .seg-toggle input{ position:absolute; opacity:0; pointer-events:none; }
#eurToggleBox .seg-option{
  padding:8px 18px; font-weight:600; cursor:pointer; user-select:none;
  color:#0b508a;
}
#eurToggleBox .seg-option.active{ color:#fff; }



/* Segmented currency control – slider highlight */
#eurToggleBox .seg-row{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
#eurToggleBox .seg-label{ font-weight:600; }
#eurToggleBox .seg-toggle{
  position:relative; display:inline-grid; grid-auto-flow:column; gap:0;
  background:#fff; border:1px solid rgba(13,93,145,.18); border-radius:999px;
  box-shadow: inset 0 1px 2px rgba(13,93,145,.06);
  padding:2px;
}
#eurToggleBox .seg-toggle::before{
  content:''; position:absolute; top:2px; left:2px; width:calc(50% - 2px); height:calc(100% - 4px);
  border-radius:999px; background: linear-gradient(180deg,#0b508a,#2e6fa5);
  box-shadow: 0 6px 12px rgba(11,80,138,0.18);
  transition: transform .25s ease;
}
#eurToggleBox .seg-toggle.eur::before{ transform: translateX(100%); }
#eurToggleBox .seg-toggle input{ position:absolute; opacity:0; pointer-events:none; }
#eurToggleBox .seg-option{ position:relative; z-index:1; padding:8px 18px; font-weight:600; cursor:pointer; user-select:none; color:#0b508a; }
#eurToggleBox .seg-option.active{ color:#fff; } /* no rectangular bg, just text color */



/* Hide legacy segmented row; use neo toggle instead */
#eurToggleBox .seg-row{ display:none !important; }

/* Neumorphic Light toggle inline */
#eurToggleBox .neu-row{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
#eurToggleBox .seg-label{ font-weight:700; color:#163246; }

#eurToggleBox .neo-toggle{ position:relative; width:56px; height:28px; display:inline-block; vertical-align:middle; }
#eurToggleBox .neo-toggle input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:2; cursor:pointer; }

#eurToggleBox .neo-toggle .track{
  position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(180deg,#f7faff,#e6eef9);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -7px 16px rgba(13,93,145,.16),
    0 6px 18px rgba(13,93,145,.18);
  overflow:hidden;
  transition: background .2s ease;
}

/* blue fill that grows when ON */
#eurToggleBox .neo-toggle .track::after{
  content:""; position:absolute; top:3px; bottom:3px; left:3px; right:calc(50% + 3px);
  border-radius:999px;
  background: linear-gradient(180deg,#cfe9ff,#a7d0fb);
  box-shadow: 0 10px 20px rgba(11,80,138,.25);
  transition: right .28s cubic-bezier(.2,.8,.2,1);
}

/* knob */
#eurToggleBox .neo-toggle .track::before{
  content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(180deg,#ffffff,#e7edf5);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    0 10px 18px rgba(13,93,145,.20);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

/* ON state */
#eurToggleBox .neo-toggle input:checked + .track::before{ transform: translateX(28px); }
#eurToggleBox .neo-toggle input:checked + .track::after{ right:3px; }

#eurToggleBox #fxNote{ margin-top:8px; }



/* Force text + toggle strictly inline via single label */
#eurToggleBox .neo-inline{ display:inline-flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; cursor:pointer; }
#eurToggleBox .neo-inline .txt{ font-weight:700; color:#163246; margin-right:2px; }

#eurToggleBox .neo-inline .neo-toggle{ position:relative; width:56px; height:28px; display:inline-block; vertical-align:middle; }
#eurToggleBox .neo-inline .neo-toggle input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:2; cursor:pointer; }

#eurToggleBox .neo-inline .neo-toggle .track{
  position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(180deg,#f7faff,#e6eef9);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -7px 16px rgba(13,93,145,.16),
    0 6px 18px rgba(13,93,145,.18);
  overflow:hidden;
  transition: background .2s ease;
}
#eurToggleBox .neo-inline .neo-toggle .track::after{
  content:""; position:absolute; top:3px; bottom:3px; left:3px; right:calc(50% + 3px);
  border-radius:999px;
  background: linear-gradient(180deg,#cfe9ff,#a7d0fb);
  box-shadow: 0 10px 20px rgba(11,80,138,.25);
  transition: right .28s cubic-bezier(.2,.8,.2,1);
}
#eurToggleBox .neo-inline .neo-toggle .track::before{
  content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(180deg,#ffffff,#e7edf5);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    0 10px 18px rgba(13,93,145,.20);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
#eurToggleBox .neo-inline .neo-toggle input:checked + .track::before{ transform: translateX(28px); }
#eurToggleBox .neo-inline .neo-toggle input:checked + .track::after{ right:3px; }



/* ===== COLONNE UNIQUE & ALIGNEMENT ROBUSTE ===== */
:root { --colW: 784px; --gutter: 16px; }

/* Page-specific layout variables for projections pages */
body[data-page="projections"],
body.projections-frontalier{
  --colW: 784px;
  --gutter: 0px;
}



/* Applique même largeur/padding aux blocs clefs */
body.projections-frontalier :is(h1, nav.stepper, .card.section, .chart-card, .section-cta-outside),
body.projections-resident   :is(h1, nav.stepper, .card.section, .chart-card, .section-cta-outside){
  max-width: var(--colW);
  width: 100%;
  margin-inline: auto !important;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Container aussi contraint pour les fonds */
body.projections-frontalier .container,
body.projections-resident   .container{
  max-width: var(--colW);
  margin: 28px auto 56px !important;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Neutralise décalages hérités */
body.projections-frontalier :is(h1, nav.stepper, .card.section, .chart-card),
body.projections-resident   :is(h1, nav.stepper, .card.section, .chart-card){
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  left: auto !important;
}

/* KPI grid */
body.projections-frontalier .kpi-grid,
body.projections-resident   .kpi-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px){
  body.projections-frontalier .kpi-grid,
  body.projections-resident   .kpi-grid{ grid-template-columns: 1fr; }
}

/* Paddings homogènes */
body.projections-frontalier .card.section,
body.projections-resident   .card.section{ padding: 20px 24px !important; }
body.projections-frontalier .chart-card,
body.projections-resident   .chart-card{ padding: 24px !important; }

/* Toggle inline */
#eurToggleBox .neo-inline{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}



/* === User-requested sizing vars (override) === */
:root{
  --colW: 784px;
  --gutter: 0px;
}


/* === User override: widths/centering for cards & CTA === */
body.projections-frontalier .card.section,
body.projections-frontalier .card.section.kpi-card,
body.projections-frontalier .section-cta-outside{
  max-width: 784px !important;
  width: 948px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mirror for resident */
body.projections-resident .card.section,
body.projections-resident .card.section.kpi-card,
body.projections-resident .section-cta-outside{
  max-width: 784px !important;
  width: 948px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== TYPO & RYTHME — HOMOGÉNISATION PAGES 1 & 2 ===== */
/* Titres H1 identiques (Simulation + Projections) */
body.simulation h1,
body.projections-frontalier h1,
body.projections-resident h1{
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}

/* Stepper & onglets graph — même échelle */
nav.stepper .step,
nav.stepper .pill,
nav.stepper li > a{
  min-height: 44px;
  line-height: 44px;
  padding: 0 14px;
  font-size: 14px;
}
.chart-card .tabs .tab,
.chart-card .tabs button,
.chart-card .tab{
  min-height: 44px;
  line-height: 44px;
  padding: 0 14px;
  font-size: 14px;
}

/* Bouton principal — aligné avec le stepper (Simulation) */
button.btn-primary,
.btn-primary{
  height: 44px;
  line-height: 44px;
  padding: 0 22px;
  font-size: 16px;
}

/* Toggle EUR — baseline alignée */
#eurToggleBox .neo-inline{ align-items: center; gap: 8px; }
#eurToggleBox .neo-inline .txt{ font-size: 15px; }

/* Slider — échelle texte des repères */
.range-wrap .labels{ font-size: 14px; line-height: 28px; }



/* ===== Unification des proportions Simulation vs Projections ===== */
:root{ --colW: 784px; --gutter: 16px; }

/* Colonne centrale identique sur Simulation */
body.simulation .container{
  max-width: var(--colW) !important;
  margin: 28px auto 56px !important;
  padding: 0 var(--gutter) !important;
  box-sizing: border-box;
}

/* Stepper, cartes et CTA alignés sur la même colonne (Simulation) */
body.simulation :is(nav.stepper, .card.section, .section-cta-outside){
  max-width: var(--colW) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
  box-sizing: border-box;
}

/* Projections : on garde la même colonne pour tout */
body.projections-frontalier :is(h1, nav.stepper, .stack, .card.section, .chart-card, .section-cta-outside),
body.projections-resident   :is(h1, nav.stepper, .stack, .card.section, .chart-card, .section-cta-outside){
  max-width: var(--colW) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
  box-sizing: border-box;
}

/* Supprime d’anciens width forcés qui cassent les proportions */
body.projections-frontalier .card.section,
body.projections-frontalier .card.section.kpi-card,
body.projections-frontalier .section-cta-outside,
body.projections-resident   .card.section,
body.projections-resident   .card.section.kpi-card,
body.projections-resident   .section-cta-outside{
  width: auto !important;              /* remplace 948px hérités */
}

/* Harmonise les paddings internes */
body.simulation .card.section{ padding: 20px 24px !important; }
body.projections-frontalier .card.section,
body.projections-resident   .card.section{ padding: 20px 24px !important; }
body.projections-frontalier .chart-card,
body.projections-resident   .chart-card{ padding: 24px !important; }




/* === Page-scale: reduce size by 20% on pages other than Page 1 (simulation) === */
/* Applies proportionally to all elements: fonts, blocks, charts, etc. */
body[data-page="projections"],
body.projections-frontalier,
body[data-page="form"]{
  /* Primary scaling (Chromium/WebKit) */
  zoom: 0.8;
}

/* Fallback for browsers that don't support zoom */
@supports not (zoom: 0.8){
  body[data-page="projections"],
  body.projections-frontalier,
  body[data-page="form"]{
    transform: scale(0.8);
    transform-origin: top center;
  }
  /* Ensure the layout has room when using transform fallback */
  body[data-page="projections"] .container,
  body.projections-frontalier .container,
  body[data-page="form"] .container{
    width: calc(100% / 0.8);
  }
}
/* === End page-scale block === */


/* Tighten gap between page title and stepper (match Simulation) */
body[data-page="projections"] .global-hero,
body.projections-frontalier .global-hero,
body[data-page="form"] .global-hero{
  margin-bottom:12px;
}


/* Rounded corners for the info block */
.kpi-card{
  border-radius: var(--radius) !important;
  overflow: hidden;
}
/* If another card follows, keep them visually separated */
.kpi-card + .card.section{
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}


/* Subtle hero title shadow (lighter, closer to original) */
.global-hero{
  margin-bottom:12px;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.75),
    0 8px 18px rgba(11,80,138,0.15);
}



/* === Segmented control 3D style (matches buttons/paddles) === */
.seg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(240,246,251,0.9));
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.10),
    inset 0 1px 2px rgba(255,255,255,0.65);
}

.seg-toggle .seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(11,80,138,0.66);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 9999px;
  line-height: 1.1;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
  cursor: pointer;
}

.seg-toggle .seg-btn:hover {
  color: rgba(11,80,138,0.9);
  background: rgba(11,80,138,0.06);
}

.seg-toggle .seg-btn.is-active,
.seg-toggle .seg-btn.active,
.seg-toggle .seg-btn[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%);
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.30),
    inset 0 -3px 6px rgba(0,0,0,0.30);
}

.seg-toggle .seg-btn:active {
  transform: scale(0.98);
}

@media (max-width: 640px){
  .seg-toggle { padding: 4px; gap: 4px; }
  .seg-toggle .seg-btn { padding: 8px 14px; font-weight: 700; }
}



/* === Stepper dots 3D + labels stronger === */
nav.stepper .dot{
  width: 28px; height: 28px;
  display: inline-flex; align-items:center; justify-content:center;
  border-radius: 9999px;
  border: 1.5px solid #0B508A;
  background: #fff;
  color: #0B508A;
  font-weight: 800;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 -1px 1px rgba(0,0,0,0.18),
    0 2px 6px rgba(11,80,138,0.12);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
nav.stepper .step:hover .dot{ background: rgba(11,80,138,0.06); }

nav.stepper .step.active .dot{
  border-color: rgba(0,0,0,0.25);
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%);
  color: #fff;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35);
}

nav.stepper .label{
  color: #0B508A;
  font-weight: 800;
  letter-spacing: .2px;
}

@media (max-width:640px){
  nav.stepper .dot{ width: 26px; height: 26px; }
  nav.stepper .label{ font-weight: 800; }
}




/* === CTA buttons (bottom of page) — match stepper glossy style === */
.footer-nav .btn,
.section-cta-outside .btn,
.actions-under-slider .btn,
.btn.btn-primary,
a.btn.btn-primary,
#go.btn {
  color: #fff !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
.footer-nav .btn:hover,
.section-cta-outside .btn:hover,
.actions-under-slider .btn:hover,
.btn.btn-primary:hover,
a.btn.btn-primary:hover,
#go.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.26),
    inset 0 3px 7px rgba(255,255,255,0.35),
    inset 0 -4px 8px rgba(0,0,0,0.40) !important;
}
.footer-nav .btn:active,
.section-cta-outside .btn:active,
.actions-under-slider .btn:active,
.btn.btn-primary:active,
a.btn.btn-primary:active,
#go.btn:active {
  transform: scale(0.98);
}


/* === Profile Toggle (Résident / Frontalier) — match stepper glossy style === */
.seg-toggle .seg-btn,
#regimeToggle .seg-btn,
#regimeGroup .seg-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.20) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%) !important;
  color: var(--brand) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.08),
    inset 0 3px 6px rgba(255,255,255,0.50),
    inset 0 -3px 6px rgba(0,0,0,0.06) !important;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.seg-toggle .seg-btn:hover,
#regimeToggle .seg-btn:hover,
#regimeGroup .seg-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.12),
    inset 0 3px 7px rgba(255,255,255,0.55),
    inset 0 -4px 8px rgba(0,0,0,0.08) !important;
}

/* Active state — exact same look as the stepper active dot */
.seg-toggle .seg-btn.is-active,
.seg-toggle .seg-btn.active,
.seg-toggle .seg-btn[aria-selected="true"],
#regimeToggle .seg-btn.is-active,
#regimeToggle .seg-btn.active,
#regimeToggle .seg-btn[aria-selected="true"],
#regimeGroup .seg-btn.is-active,
#regimeGroup .seg-btn.active,
#regimeGroup .seg-btn[aria-selected="true"] {
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35) !important;
}

.seg-toggle .seg-btn:active,
#regimeToggle .seg-btn:active,
#regimeGroup .seg-btn:active {
  transform: scale(.98);
}


/* === Scenario Tabs (Sécurité / Mixte / Rendement) — glossy like stepper === */
.tabs .tab{
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.20) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%) !important;
  color: var(--brand) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.08),
    inset 0 3px 6px rgba(255,255,255,0.50),
    inset 0 -3px 6px rgba(0,0,0,0.06) !important;
  font-weight: 800 !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tabs .tab:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.12),
    inset 0 3px 7px rgba(255,255,255,0.55),
    inset 0 -4px 8px rgba(0,0,0,0.08) !important;
}
.tabs .tab:active{ transform: scale(.98); }

/* Active state — exact same look as the stepper active dot */
.tabs .tab.active{
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35) !important;
}


/* === EUR Toggle — glossy theme like stepper === */
#eurToggleBox .neo-inline{ display:flex; align-items:center; gap:14px; }
#eurToggleBox .neo-inline .txt{ font-weight:800; color: var(--ink); }

.neo-toggle{ position: relative; display:inline-block; width: 62px; height: 30px; }
.neo-toggle input{ position:absolute; opacity:0; width:0; height:0; }

.neo-toggle .track{
  position: absolute; inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
  border: 1px solid rgba(0,0,0,0.20);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.08),
    inset 0 3px 6px rgba(255,255,255,0.50),
    inset 0 -3px 6px rgba(0,0,0,0.06);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* knob */
.neo-toggle .track::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(180deg, #BEE0FF 0%, #A6CCE9 100%);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.16),
    inset 0 3px 5px rgba(255,255,255,0.60),
    inset 0 -3px 5px rgba(0,0,0,0.12);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

/* active (EUR) */
.neo-toggle input:checked + .track{
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%);
  border-color: rgba(0,0,0,0.25);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35);
}
.neo-toggle input:checked + .track::after{
  transform: translateX(32px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FB 100%);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.20),
    inset 0 3px 5px rgba(255,255,255,0.70),
    inset 0 -3px 6px rgba(0,0,0,0.18);
}

/* focus-visible for accessibility */
.neo-toggle input:focus-visible + .track{
  outline: 2px solid rgba(44,141,219,0.55);
  outline-offset: 2px;
}


/* === EUR Toggle (.fx-switch) — glossy override to match stepper === */
.fx-switch{ position:relative; display:inline-block; width:62px !important; height:30px !important; vertical-align:middle; }
.fx-switch .fx-slider{
  position:absolute; inset:0;
  cursor:pointer;
  border-radius:9999px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%) !important;
  border: 1px solid rgba(0,0,0,0.20) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.08),
    inset 0 3px 6px rgba(255,255,255,0.50),
    inset 0 -3px 6px rgba(0,0,0,0.06) !important;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fx-switch .fx-slider:before{
  content:"";
  position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  background: linear-gradient(180deg, #BEE0FF 0%, #A6CCE9 100%) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.16),
    inset 0 3px 5px rgba(255,255,255,0.60),
    inset 0 -3px 5px rgba(0,0,0,0.12) !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.fx-switch input:checked + .fx-slider{
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%) !important;
  border-color: rgba(0,0,0,0.25) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35) !important;
}
.fx-switch input:checked + .fx-slider:before{
  transform: translateX(32px) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FB 100%) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.20),
    inset 0 3px 5px rgba(255,255,255,0.70),
    inset 0 -3px 6px rgba(0,0,0,0.18) !important;
}
/* END EUR Toggle glossy override */


/* chart width fix */
.card.section{max-width:784px;margin-left:auto;margin-right:auto;}

/* === KPI inline aesthetic (match Frontalier) === */
.kpi-card .form-grid{ grid-template-columns:1fr 1fr; gap:16px 22px; }
.kpi-card .field{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
.kpi-card .field label{ margin:0; font-weight:700; color:var(--ink); }
.kpi-card .field .pill{
  display:inline-flex; align-items:center; justify-content:flex-end;
  min-width:140px; padding:10px 16px;
  border-radius:16px; background:#f2f7fb; border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(13,93,145,.06);
  font-weight:700; color:var(--ink);
}
@media (max-width:860px){
  .kpi-card .form-grid{ grid-template-columns:1fr; }
}

/* === KPI aesthetic same as Frontalier === */
.kpi-card .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;}
.kpi-card .field{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 18px;box-shadow:0 6px 12px rgba(13,93,145,.06);
}
.kpi-card .kpi-label{font-weight:700;color:var(--ink);}
.kpi-card .kpi-value{font-weight:700;color:var(--ink);}
@media(max-width:860px){.kpi-card .form-grid{grid-template-columns:1fr;}}


/* === KPI block styled like Frontalier "boxes" === */
.kpi-card .form-grid{ grid-template-columns:1fr 1fr; gap:16px 22px; }
.kpi-card .field{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; box-shadow:0 10px 24px rgba(13,93,145,.08);
}
.kpi-card .field label{ margin:0; font-weight:700; color:var(--ink); }
.kpi-card .field .pill{
  background:transparent; border:none; box-shadow:none;
  padding:0; min-width:unset;
  font-weight:700; color:var(--ink);
}
@media (max-width:860px){
  .kpi-card .form-grid{ grid-template-columns:1fr; }
}


/* === KPI = style like capture 1 (inline label/value, no inner bubble) === */
.kpi-card .form-grid{ grid-template-columns:1fr 1fr; gap:16px 22px; }
.kpi-card .field{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; box-shadow:0 10px 24px rgba(13,93,145,.08);
}
.kpi-card .field label{ margin:0; font-weight:700; color:var(--ink); }
.kpi-card .field .pill{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; min-width:unset !important; }
.kpi-card .field .value{ font-weight:700; color:var(--ink); }
@media (max-width:860px){ .kpi-card .form-grid{ grid-template-columns:1fr; } }


/* === Projections chart card layout fixes === */
.chart-card{ max-width:784px; margin:0 auto; }
.chart-card .tabs{ display:flex !important; flex-direction:row !important; align-items:center; justify-content:space-between; gap:12px; padding:10px; }
.chart-card .tab{ height:auto !important; min-height:unset !important; padding:10px 16px !important; border-radius:999px !important; display:inline-flex !important; align-items:center; justify-content:center; }
#chartHost{ height:360px !important; }
#chartHost canvas{ width:100% !important; height:100% !important; display:block; }
.section-cta-outside{ max-width:784px; margin:24px auto; }
.fx-toggle.inline{ margin-left:auto; }


/* === Margin harmonisation between KPI block and chart === */
#kpiBlock{margin-bottom:24px;}
.chart-card{margin-top:0 !important;}


/* === Align KPI block and chart card left/right === */
#kpiBlock, .chart-card {
  max-width:784px;
  margin-left:auto;
  margin-right:auto;
}
.chart-card {
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}


/* Bouton Economie Fiscale - même style que CTA */
.btn-economie {
  background-color: #0B508A;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-economie:hover {
  background-color: #09406d;
}


/* Make the ICC drawer toggle look like CTA (blue background, white text) */
#icc-tab.drawer-tab.pretty{
  background:#0B508A !important;
  color:#ffffff !important;
  border:none !important;
}
#icc-tab.drawer-tab.pretty:hover{
  filter:brightness(0.92);
}


/* Style CTA arrondi bleu pour le bouton Economie fiscale */
#icc-tab.drawer-tab.pretty {
  background: linear-gradient(180deg, #1e90ff 0%, #0B508A 100%) !important; /* dégradé */
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important; /* arrondi complet */
  padding: 12px 30px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important; /* ombre */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Effet hover identique aux autres boutons CTA */
#icc-tab.drawer-tab.pretty:hover {
  background: linear-gradient(180deg, #3aa0ff 0%, #09406d 100%) !important;
  filter: none !important;
}


/* Positionner le bouton Economie fiscale en bas du bloc KPI */
.kpi-card {
  display: flex;
  flex-direction: column;
}

#icc-tab.drawer-tab.pretty {
  margin-top: auto !important;  /* pousse le bouton en bas */
  align-self: center !important; /* centré horizontalement */
}


/* Place the ICC toggle at the bottom of the KPI block */
.kpi-card{
  display:flex;
  flex-direction:column;
}
#icc-tab.drawer-tab.pretty{
  position: static !important;
  margin-top: auto !important;  /* pushes it to the bottom */
  align-self: center !important;
  margin-bottom: 8px !important;
}


/* Bouton Economie fiscale en bas du bloc Infos, style CTA plein */
.kpi-card {
  display: flex;
  flex-direction: column;
}

#icc-tab.drawer-tab.pretty {
  order: 99;
  margin-top: auto !important;
  align-self: stretch !important;   /* prend toute la largeur */
  margin-bottom: 0 !important;      /* collé en bas */
  border-radius: 12px !important;   /* arrondi comme CTA */
  width: 100% !important;
}


/* CTA plein largeur pour le bouton Economie fiscale, collé en bas du bloc Infos */
.kpi-card{
  display:flex;
  flex-direction:column;
}
#icc-tab.drawer-tab.pretty{
  position: static !important;
  order: 99;
  margin-top: auto !important;
  align-self: stretch !important;  /* full width */
  width: 100% !important;
  border-radius: 12px !important;  /* arrondi CTA */
  margin-bottom: 0 !important;     /* collé en bas */
}


/* Drawer body default hidden; open when kpi-card has data-drawer="open" */
.drawer-body{ display:none; }
.kpi-card[data-drawer="open"] > .drawer-body{ display:block; }


/* Layout bottom placement for ICC drawer inside KPI block */
#kpiBlock{
  display:flex;
  flex-direction:column;
}
#kpiBlock .kpi-drawer{
  order: 99;
  margin-top:auto;
}
#kpiBlock .kpi-drawer .drawer-tab.pretty{
  align-self:stretch;
  width:100%;
}


/* Align ICC CTA at the very bottom of the info block */
#kpiBlock{
  /*padding-bottom: 8px !important*/ /* reduce inner bottom space */
  display: flex;
  flex-direction: column;
}
#kpiBlock .kpis{ margin-bottom: 12px; }
#kpiBlock .kpi-drawer{ margin-top: 12px; margin-bottom: 0; }
#kpiBlock .drawer-tab{ position: static !important; left:auto !important; bottom:auto !important; transform:none !important; }
#kpiBlock .drawer-body{ margin-top: 8px; }


/* === Global focus ring (brand blue, gentle) === */
/* Reset default outline only if replaced */
:where(input, textarea, select, button, a):focus{ outline: none; }
/* Text inputs, areas, selects */
:where(input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"], textarea, select):focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand, #0B508A) 20%, transparent),
    inset 0 0 0 1px #9ec2da;
  border-color:#9ec2da !important;
}
/* Buttons & links styled as buttons */
:where(.btn, .btn-3d, button):focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand, #0B508A) 18%, transparent),
    0 6px 16px rgba(11,78,122,.20);
}
/* Labels react when their field is focused (where supported) */
.field:has(:focus-visible) > label{
  color: var(--brand, #0B508A);
}
/* Ensure focus is visible on keyboard nav even on custom controls */
[role="listbox"]:focus-visible, [role="button"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #0B508A) 20%, transparent);
  border-radius: 10px;
}


/* === Preferred glossy CTA style === */
.btn-3d--glossy{
  position: relative;
  background: linear-gradient(180deg, #2d8bc6 0%, #1f73ad 55%, #0d5f94 100%);
  border: 1px solid #08456b;
  color:#fff !important;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 12px 24px rgba(13,95,148,.28);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-3d--glossy:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn-3d--glossy:active{
  filter: brightness(.98);
  transform: translateY(0);
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,.10),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 8px 20px rgba(13,95,148,.24);
}
.btn-3d.btn-lg.btn-3d--glossy{ padding: 0 24px; font-size: 16px; }

/* emergency interactivity */
html,body{pointer-events:auto !important;}
#overlay,.overlay,.modal-backdrop,.backdrop,.scrim,.screen{pointer-events:none !important;}


/* === Resident projections: longer rails under CTA (match capture 2) === */
body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside nav.stepper::before,
body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside nav.stepper::after{
  width: clamp(200px, 28vw, 360px) !important;
  background: linear-gradient(90deg, rgba(11,80,138,0.08) 0%, rgba(11,80,138,0.25) 40%, rgba(11,80,138,0.40) 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(11,80,138,.18) !important;
}


/* === Tight edges for CTA on resident projections (no inner gap) === */
body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside{
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === FORCE CTA WIDTH ON RESIDENT PROJECTIONS === */
body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside {
  width: 784px !important;
  max-width: 784px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* === Mirror frontalier aesthetics on RESIDENT projections (visual only) === */
body[data-page="projections"]:not(.projections-frontalier) .card.section.chart-card{
  max-width: 784px !important;
  width: 784px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 12px !important;
}
body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside{
  margin-top: 8px !important; /* bring CTA closer to card like frontalier */
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 784px !important;
  max-width: 784px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Ensure rails length visually matches frontalier */
body[data-page="projections"]:not(.projections-frontalier) .rails-only::before,
body[data-page="projections"]:not(.projections-frontalier) .rails-only::after{
  width: clamp(220px, 38vw, 360px) !important;
}


/* === Center and normalize Resident chart to match Frontalier === */
body[data-page="projections"]:not(.projections-frontalier) #chartHost {
  max-width: 784px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important; /* remove unwanted zoom */
}


/* === Harmonize inner paddings + center CTA on Resident projections === */
body[data-page="projections"]:not(.projections-frontalier) .card.section.chart-card{
  padding: 18px 24px 18px 24px !important; /* same look & breathing as frontalier */
}

body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 784px !important;
  max-width: 784px !important;
  margin: 8px auto 24px auto !important; /* center under card */
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body[data-page="projections"]:not(.projections-frontalier) .rails-only{
  margin-left: 0 !important;
  margin-right: 0 !important;
}


body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside{
  position: relative;
  left: -6px; /* adjust this offset if needed */
}


/* === Final Resident CTA alignment (per user screenshot) === */
body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside {
  position: relative;
  left: -100px;
}

body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 20px auto 24px auto !important;
  gap: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}


/* === ICC note placement (Resident): below the ICC block, only when drawer is open === */
.kpi-drawer .icc-source-note{ 
  display: none; 
  font-size: 0.85em; 
  color:#556; 
  margin: 10px 6px 0 6px;
}
.kpi-drawer.open .icc-source-note{ display:block; }

/* Extra breathing at bottom of the ICC panel */
.kpi-drawer .drawer-panel{ padding-bottom: 18px !important; }
.kpi-drawer .drawer-body{ padding-bottom: 12px !important; }


/* === ICC note placement corrected (inside drawer-body) === */
.drawer-body .icc-source-note{ 
  display:none; 
  font-size:0.85em; 
  color:#556; 
  margin-top:10px;
}
.kpi-drawer.open .drawer-body .icc-source-note{ display:block; }


/* === ICC note inside KPI block bottom === */
#kpiBlock{ /*padding-bottom:50px !important*/ }
#kpiBlock .icc-source-note{
  position:absolute;
  bottom:12px;
  left:16px;
  right:16px;
  font-size:0.85em;
  color:#556;
  display:none;
}
#kpiBlock.open .icc-source-note{ display:block; }


/* === Collapsible ICC note: expands only when drawer is open === */
.icc-source-wrap{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0 6px 0 6px;
  transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease;
}
.icc-source-note{
  font-size: 0.90em;
  color: #556;
}
/* When the drawer is open, reveal the note and reserve space */


/* === ICC source note under drawer, visible only when open === */
.icc-source-wrap{ max-height:0; opacity:0; overflow:hidden; margin:0 6px; transition:max-height .25s ease, opacity .2s ease, margin-top .2s ease; }
.icc-source-note{ font-size:.90em; color:#556; }
.kpi-drawer.open ~ .icc-source-wrap{ max-height:80px; opacity:1; margin-top:10px; }


/* === ICC note shows only when eco3a-v2 panel is open === */
.icc-source-wrap{ max-height:0; opacity:0; overflow:hidden; margin:0 6px; transition:max-height .25s ease, opacity .2s ease, margin-top .2s ease; }
.icc-source-note{ font-size:.90em; color:#556; }
#eco3a-v2-panel[data-open] + .icc-source-wrap{ max-height:80px; opacity:1; margin-top:10px; }


/* === Reveal ICC note when ICC drawer is open (panel[data-open]) === */
#eco3a-v2-panel[data-open] .icc-source-wrap{ max-height:80px; opacity:1; margin-top:10px; }


/* === ICC note inside the white ICC card === */
#eco3a-v2-panel .eco3a-v2-card{ padding-bottom: 28px !important; }
#eco3a-v2-panel .eco3a-icc-note{ font-size: .90em; color: #556; margin-top: 10px; }


/* === UI: show only TOTAL in ICC card (keep box size) === */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  font-size:26px !important;
  font-weight:800 !important;
}
/* Hide the breakdown (Base / Communal) but keep space so the card size doesn't change */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum + div{
  visibility: hidden !important;
}


/* === 3D emphasis for ICC total + period label (no layout change) === */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  font-size:28px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing: .3px;
  /* 3D layered shadow */
  text-shadow:
    0 1px 0 #ffffff,
    0 2px 0 #e8eef6,
    0 3px 0 #dbe6f2,
    0 8px 12px rgba(11, 80, 138, .25);
}
/* Add "par an" under the number without changing HTML */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum::after{
  content: "par an";
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: .7;
  margin-top: 4px;
}


/* === Enhanced styled ICC total box with blue accents === */
#eco3a-v2-panel .eco3a-v2-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 12px !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  position: relative;
  font-weight:700;
  color:#0B508A;
  margin-bottom:14px;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"";
  position:absolute;
  top:50%;
  width:40%;
  height:2px;
  background:#0B508A;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before{ left:-45%; }
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{ right:-45%; }

#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  font-size:32px !important;
  font-weight:800 !important;
  color:#0B508A;
  padding:10px 26px;
  border:2px solid #0B508A;
  border-radius:12px;
  display:inline-block;
  background: linear-gradient(180deg, #fff 0%, #f4f8fc 100%);
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #e0ebf5,
    0 6px 12px rgba(11,80,138,0.25);
}


/* === ICC total block aligned with graph title style === */
#eco3a-v2-panel .eco3a-v2-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 8px !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  font-size:18px;
  font-weight:700;
  color:#0B508A;
  text-transform:none;
  margin-bottom:12px;
  position:relative;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"";
  position:absolute;
  top:50%;
  width:38%;
  height:2px;
  background:#0B508A;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before{ left:-42%; }
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{ right:-42%; }

#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  font-size:26px !important;
  font-weight:800 !important;
  color:#233b53;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #e0ebf5,
    0 5px 8px rgba(11,80,138,0.25);
  margin-top:6px;
}


/* === Clean ICC total block style === */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  border:none !important;
  background:none !important;
}
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum::after{
  content:none !important;
}


/* === Style ICC block title like graph titles === */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  font-size:18px !important;
  font-weight:700 !important;
  color:#0B508A !important;
  text-align:center !important;
  margin-bottom:12px;
  position:relative;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"";
  position:absolute;
  top:50%;
  width:38%;
  height:2px;
  background:#0B508A;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before{ left:-42%; }
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{ right:-42%; }

#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  font-size:24px !important;
  font-weight:800 !important;
  color:#233b53 !important;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #e0ebf5,
    0 5px 8px rgba(11,80,138,0.25);
  margin-top:6px;
  text-align:center;
}


/* === Fix: keep ICC title lines inside the card (no overflow overlap) === */
#eco3a-v2-panel .eco3a-v2-card{ position:relative; overflow:hidden; }
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  max-width:100% !important;
  margin: 8px 6px 10px 6px !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"" !important;
  flex:1 1 auto !important;
  height:2px !important;
  background:#0B508A !important;
  opacity:.85 !important;
  border-radius:2px !important;
  position:static !important; /* become real flex items, not abs pos */
}
/* Slightly smaller number for balance and to keep within card */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  font-size:24px !important;
}


/* === ICC card clean white background, styled like input box === */
#eco3a-v2-panel .eco3a-v2-card{
  background:#fff !important;
  border:1px solid #e0e6ed !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

/* Title styled like graph titles */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  font-size:18px !important;
  font-weight:700 !important;
  color:#0B508A !important;
  text-align:center !important;
  margin-bottom:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:#0B508A;
  opacity:0.5;
}


/* === Force ICC card to pure white (no tint/gradient/overlay) === */
#eco3a-v2-panel .eco3a-v2-card{
  background-color:#fff !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}
#eco3a-v2-panel .eco3a-v2-card::before,
#eco3a-v2-panel .eco3a-v2-card::after{
  content:none !important;
  display:none !important;
}
/* If an inner wrapper exists, ensure it's white too */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-card-inner,
#eco3a-v2-panel .eco3a-v2-card > .inner,
#eco3a-v2-panel .eco3a-v2-card > .content{
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* === Strong white ICC card (resident) === */
#eco3a-v2-panel .eco3a-v2-card{
  background-color:#ffffff !important;
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #e5ebf2 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  position:relative;
  overflow:hidden;
}
#eco3a-v2-panel .eco3a-v2-card *{
  background:transparent !important;
  background-image:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Title line style to match section headings */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  color:#0B508A !important;
  font-weight:700 !important;
  font-size:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  margin:8px 4px 10px 4px !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"";
  flex:1;
  height:1px;
  background:#0B508A;
  opacity:.35;
  border-radius:1px;
}


/* === Visible tapered lines for ICC title (grid + min width) === */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap:12px !important;
  align-items:center !important;
  justify-items:center !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"" !important;
  width:100%;
  min-width:56px;   /* ensures lines stay visible even if title wraps */
  height:2px;
  border-radius:2px;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before{
  background: linear-gradient(to left,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,0.08) 25%,
    rgba(11,80,138,0.35) 55%,
    rgba(11,80,138,0.60) 80%,
    rgba(11,80,138,0.85) 95%,
    rgba(11,80,138,1) 100%);
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  background: linear-gradient(to right,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,0.08) 25%,
    rgba(11,80,138,0.35) 55%,
    rgba(11,80,138,0.60) 80%,
    rgba(11,80,138,0.85) 95%,
    rgba(11,80,138,1) 100%);
}


/* === Resident ICC: pure white card + title like section with tapered lines === */
#eco3a-v2-panel .eco3a-v2-card{
  background:#fff !important;
  background-image:none !important;
  border:1px solid #e5ebf2 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  position:relative; overflow:hidden;
}
#eco3a-v2-panel .eco3a-v2-card *{ background:transparent !important; }

#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  color:#0B508A !important; font-weight:700 !important; font-size:16px !important;
  display:grid !important; grid-template-columns:1fr auto 1fr !important;
  gap:12px !important; align-items:center !important; justify-items:center !important;
  margin:10px 6px 12px 6px !important; text-align:center !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:""; width:100%; min-width:56px; height:2px; border-radius:2px;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before{
  background:linear-gradient(to left,
    rgba(11,80,138,0) 0%, rgba(11,80,138,0.12) 30%, rgba(11,80,138,0.6) 80%, rgba(11,80,138,1) 100%);
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  background:linear-gradient(to right,
    rgba(11,80,138,0) 0%, rgba(11,80,138,0.12) 30%, rgba(11,80,138,0.6) 80%, rgba(11,80,138,1) 100%);
}

/* Total: center + subtle 3D */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum{
  font-size:24px !important; font-weight:800 !important; color:#233b53 !important;
  text-shadow:0 1px 0 #fff, 0 2px 0 #e0ebf5, 0 5px 8px rgba(11,80,138,.25);
  text-align:center !important; margin-top:2px !important;
}

/* Hide Base/Communal breakdown but keep layout height */
#eco3a-v2-panel .eco3a-v2-card #eco3a-v2-sum + div{ visibility:hidden !important; }

/* Collapsible ICC note below the drawer */
.icc-source-wrap{ max-height:0; opacity:0; overflow:hidden; margin:0 6px; transition:max-height .25s ease, opacity .2s ease, margin-top .2s ease; }
.icc-source-note{ font-size:.90em; color:#556; }
.kpi-drawer.open ~ .icc-source-wrap{ max-height:80px; opacity:1; margin-top:10px; }


/* === Euro toggle card: center content === */
#eurToggleBox{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:14px 12px;
  min-height:120px;
}
#eurToggleBox .neu-row{ display:flex; align-items:center; justify-content:center; gap:12px; }
#eurToggleBox .neu-row .txt{ font-weight:700; }
#eurToggleBox .fx-caption{ margin-top:6px; }
#eurToggleBox .seg-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; }
#eurToggleBox .seg-row .seg-label{ opacity:.7; margin-right:4px; }
#eurToggleBox .seg-row .seg-toggle{ display:inline-flex; gap:6px; }


/* === Force Euro toggle box content centered (robust) === */
#eurToggleBox{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:128px !important;
}
#eurToggleBox > *{ width:100%; }
#eurToggleBox .neu-row,
#eurToggleBox .seg-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}
#eurToggleBox .fx-caption,
#eurToggleBox .rate-row,
#eurToggleBox .fx-line{
  text-align:center !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
#eurToggleBox .neu-row .toggle,
#eurToggleBox .neu-row .switch,
#eurToggleBox .seg-row .toggle,
#eurToggleBox .seg-row .switch{
  margin:0 !important;
}


/* === Remove the segmented currency buttons in the Euro toggle card === */
#eurToggleBox .seg-row{ display:none !important; }


/* === Prevent blue divider lines from overlapping text (both pages) === */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  display:grid !important;
  grid-template-columns: minmax(56px,1fr) auto minmax(56px,1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:12px !important;
  text-align:center !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  position: static !important;   /* stop absolute overlap */
  width: clamp(56px, 18vw, 140px) !important;
  height: 1px !important;
  border-radius: 1px !important;
  background: none !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before{
  background-image: linear-gradient(to left,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,.18) 30%,
    rgba(11,80,138,.55) 75%,
    rgba(11,80,138,1) 100%) !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  background-image: linear-gradient(to right,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,.18) 30%,
    rgba(11,80,138,.55) 75%,
    rgba(11,80,138,1) 100%) !important;
}
@media (max-width: 480px){
  #eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
    grid-template-columns: minmax(40px,1fr) auto minmax(40px,1fr) !important;
    gap:8px !important;
  }
  #eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
  #eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
    width: clamp(40px, 22vw, 100px) !important;
  }
}


/* === Scenario title line fix: never overlap text === */
.chart-card .chart-tagline{
  display: grid;
  grid-template-columns: minmax(40px,1fr) auto minmax(40px,1fr);
  align-items: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: #0B508A;
  font-weight: 700;
}
.chart-card .chart-tagline::before,
.chart-card .chart-tagline::after{
  content: "";
  width: clamp(40px, 18vw, 160px);
  height: 2px;
  border-radius: 2px;
  background: none;
}
.chart-card .chart-tagline::before{
  background-image: linear-gradient(to left,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,.12) 30%,
    rgba(11,80,138,.6) 85%,
    rgba(11,80,138,1) 100%);
}
.chart-card .chart-tagline::after{
  background-image: linear-gradient(to right,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,.12) 30%,
    rgba(11,80,138,.6) 85%,
    rgba(11,80,138,1) 100%);
}
@media (max-width: 520px){
  .chart-card .chart-tagline{
    grid-template-columns: minmax(30px,1fr) auto minmax(30px,1fr);
    gap: 8px;
  }
  .chart-card .chart-tagline::before,
  .chart-card .chart-tagline::after{
    width: clamp(30px, 22vw, 100px);
  }
}


/* === Scenario title: make lines responsive and never overlap text (global) === */
.chart-tagline{
  display: grid !important;
  grid-template-columns: minmax(40px,1fr) auto minmax(40px,1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 12px !important;
  text-align: center !important;
}
.chart-tagline::before,
.chart-tagline::after{
  content: "" !important;
  position: static !important;   /* cancel absolute positioning from older styles */
  width: clamp(40px, 18vw, 160px) !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: none !important;
}
.chart-tagline::before{
  background-image: linear-gradient(to left,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,.12) 30%,
    rgba(11,80,138,.6) 85%,
    rgba(11,80,138,1) 100%) !important;
}
.chart-tagline::after{
  background-image: linear-gradient(to right,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,.12) 30%,
    rgba(11,80,138,.6) 85%,
    rgba(11,80,138,1) 100%) !important;
}
@media (max-width: 520px){
  .chart-tagline{
    grid-template-columns: minmax(30px,1fr) auto minmax(30px,1fr) !important;
    gap: 8px !important;
  }
  .chart-tagline::before,
  .chart-tagline::after{
    width: clamp(30px, 22vw, 100px) !important;
  }
}


/* === Scenario title polish: centered lines, correct taper, no overlap === */
.chart-tagline{
  display: grid !important;
  grid-template-columns: minmax(40px,1fr) auto minmax(40px,1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 12px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
.chart-tagline::before,
.chart-tagline::after{
  content: "" !important;
  position: static !important;
  align-self: center !important;
  width: clamp(40px, 18vw, 160px) !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: none !important;
}

/* Left line: strong near text (right edge), fade outward to the left */
.chart-tagline::before{
  background-image: linear-gradient(to left,
    rgba(11,80,138,0) 0%,
    rgba(11,80,138,0.12) 30%,
    rgba(11,80,138,0.6) 85%,
    rgba(11,80,138,1) 100%) !important;
}

/* Right line: strong near text (left edge), fade outward to the right */
.chart-tagline::after{
  background-image: linear-gradient(to right,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,0.6) 15%,
    rgba(11,80,138,0.12) 70%,
    rgba(11,80,138,0) 100%) !important;
}

@media (max-width: 520px){
  .chart-tagline{
    grid-template-columns: minmax(30px,1fr) auto minmax(30px,1fr) !important;
    gap: 8px !important;
  }
  .chart-tagline::before,
  .chart-tagline::after{
    width: clamp(30px, 22vw, 100px) !important;
  }
}


/* === Scenario title — perfectly centered lines, thick near text, tapered outward === */
.chart-tagline{
  display:grid !important;
  grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:12px !important;
  line-height:1 !important;          /* tighten to center optic */
  text-align:center !important;
}
.chart-tagline::before,
.chart-tagline::after{
  content:"" !important;
  position:static !important;
  align-self:center !important;
  width:clamp(40px,18vw,160px) !important;
  height:2px !important;
  border-radius:2px !important;
  background:none !important;
}
/* Left line: strong at the inner (right) edge, fades outward to the left */
.chart-tagline::before{
  background-image:linear-gradient(to left,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.65) 20%,
    rgba(11,80,138,.18) 70%,
    rgba(11,80,138,0) 100%) !important;
}
/* Right line: strong at the inner (left) edge, fades outward to the right */
.chart-tagline::after{
  background-image:linear-gradient(to right,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.65) 20%,
    rgba(11,80,138,.18) 70%,
    rgba(11,80,138,0) 100%) !important;
}
@media (max-width:520px){
  .chart-tagline{ grid-template-columns:minmax(30px,1fr) auto minmax(30px,1fr) !important; gap:8px !important; }
  .chart-tagline::before, .chart-tagline::after{ width:clamp(30px,22vw,100px) !important; }
}


/* === Scenario title fine-tune: more spacing + symmetric taper === */
.chart-tagline{
  gap:16px !important;            /* extra space between text and lines */
  padding:0 2px !important;       /* tiny padding to avoid edge clipping */
  line-height:1.15 !important;    /* optical centering */
}
/* Left line: strong near text (right edge), fade to outside */
.chart-tagline::before{
  background-image:linear-gradient(to left,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.85) 22%,
    rgba(11,80,138,.30) 70%,
    rgba(11,80,138,0) 100%) !important;
}
/* Right line: strong near text (left edge), fade to outside */
.chart-tagline::after{
  background-image:linear-gradient(to right,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.85) 22%,
    rgba(11,80,138,.30) 70%,
    rgba(11,80,138,0) 100%) !important;
}


/* === Scenario title — copy stepper line style (darker near text, fade out) === */
.chart-tagline{
  display:grid !important;
  grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:18px !important;             /* more breathing room */
  text-align:center !important;
  line-height:1.2 !important;
}
.chart-tagline::before,
.chart-tagline::after{
  content:"" !important;
  position:static !important;
  align-self:center !important;
  width:clamp(48px,20vw,180px) !important;
  height:2px !important;
  border-radius:2px !important;
  background:none !important;
}
/* Left bar: strong at text (right edge), fades to the left */
.chart-tagline::before{
  background-image:linear-gradient(to left,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.75) 25%,
    rgba(11,80,138,.22) 75%,
    rgba(11,80,138,0) 100%) !important;
}
/* Right bar: strong at text (left edge), fades to the right */
.chart-tagline::after{
  background-image:linear-gradient(to right,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.75) 25%,
    rgba(11,80,138,.22) 75%,
    rgba(11,80,138,0) 100%) !important;
}
@media (max-width:520px){
  .chart-tagline{
    grid-template-columns:minmax(36px,1fr) auto minmax(36px,1fr) !important;
    gap:12px !important;
  }
  .chart-tagline::before, .chart-tagline::after{
    width:clamp(36px,26vw,120px) !important;
  }
}


/* === Scenario title lines – micro centering === */
.chart-tagline::before,
.chart-tagline::after{
  transform: translateY(0.5px) !important; /* tiny vertical nudge so bars align optically with text */
}


/* === Scenario title: more spacing + exact vertical centering === */
.chart-tagline{
  gap:24px !important;           /* more space between text and the lines */
  line-height:1.2 !important;    /* keep optical balance with font */
  align-items:center !important; /* vertical center grid items */
}
.chart-tagline::before,
.chart-tagline::after{
  align-self:center !important;  /* vertical center the lines vs text */
  transform: translateY(1px) !important; /* tiny nudge for perfect alignment */
}


/* === Scenario title spacing update === */
.chart-tagline{ gap:35px !important; }


/* === Scenario title spacing update to 50px === */
.chart-tagline{ gap:50px !important; }


/* === ICC card title lines: keep inside the card and centered === */
#eco3a-v2-panel .eco3a-v2-card{ overflow:hidden !important; }
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label{
  display:grid !important;
  grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:14px !important;
  padding:0 14px !important;     /* keeps lines off the rounded border */
  text-align:center !important;
}
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before,
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  content:"" !important;
  position:static !important;
  align-self:center !important;
  width:100% !important;         /* stretch within grid cell */
  height:2px !important;
  border-radius:2px !important;
  background:none !important;
}
/* Left line: strong near text, fade outward */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::before{
  background-image:linear-gradient(to left,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.75) 25%,
    rgba(11,80,138,.22) 75%,
    rgba(11,80,138,0) 100%) !important;
}
/* Right line: strong near text, fade outward */
#eco3a-v2-panel .eco3a-v2-card .eco3a-v2-label::after{
  background-image:linear-gradient(to right,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.75) 25%,
    rgba(11,80,138,.22) 75%,
    rgba(11,80,138,0) 100%) !important;
}

/* === Scenario title lines: stepper-like, centered, no overflow === */
.chart-tagline{
  display:grid !important;
  grid-template-columns:minmax(36px,1fr) auto minmax(36px,1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:50px !important;           /* requested spacing */
  text-align:center !important;
}
.chart-tagline::before,
.chart-tagline::after{
  content:"" !important;
  position:static !important;
  align-self:center !important;
  width:clamp(28px, calc(20vw - 50px), 130px) !important; /* narrowed so they don't exceed the block */
  height:2px !important;
  border-radius:2px !important;
  background:none !important;
  transform: translateY(1px);    /* optical centering */
}
.chart-tagline::before{
  background-image:linear-gradient(to left,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.75) 25%,
    rgba(11,80,138,.22) 75%,
    rgba(11,80,138,0) 100%) !important;
}
.chart-tagline::after{
  background-image:linear-gradient(to right,
    rgba(11,80,138,1) 0%,
    rgba(11,80,138,.75) 25%,
    rgba(11,80,138,.22) 75%,
    rgba(11,80,138,0) 100%) !important;
}

/* Ensure spacing between label colon and amount in KPI blocks */
.kpis .kpi > span { margin-left: 6px; }


/* Intro card styling, aligned with existing cards */
.intro-card{ margin: 0 0 16px 0; max-width: none !important; width: 100% !important; align-self: stretch !important; }
.intro-card h2{ color: var(--ink); font-size:20px; font-weight:800; letter-spacing:.1px; text-align:center; margin:6px 0 4px; position:relative; display:flex; align-items:center; gap:12px; justify-content:center; text-shadow:0 1px 0 rgba(255,255,255,.75);}
.intro-card p{ margin: 6px 0 8px; }
.intro-card ul{ margin:8px 0 10px; padding:0; list-style:none; }
.intro-card li{ position:relative; padding-left:18px; line-height:1.65; margin:4px 0; }
.intro-card .note{ text-align:center; font-size:12px; color: var(--muted); margin-top: 6px; opacity:.75; }
@media (max-width:680px){
  .intro-card h2{ color: var(--ink); font-size:20px; font-weight:800; letter-spacing:.1px; text-align:center; margin:6px 0 4px; position:relative; display:flex; align-items:center; gap:12px; justify-content:center; text-shadow:0 1px 0 rgba(255,255,255,.75);}
}

.intro-card ul + p{ margin-top:6px; }

.intro-card li{ position:relative; padding-left:18px; line-height:1.65; margin:4px 0; }



/* Intro title aesthetic to match theme */
.intro-card h2{ color: var(--ink); font-size:20px; font-weight:800; letter-spacing:.1px; text-align:center; margin:6px 0 4px; position:relative; display:flex; align-items:center; gap:12px; justify-content:center; text-shadow:0 1px 0 rgba(255,255,255,.75);}

@media (max-width:680px){
  .intro-card h2{ color: var(--ink); font-size:20px; font-weight:800; letter-spacing:.1px; text-align:center; margin:6px 0 4px; position:relative; display:flex; align-items:center; gap:12px; justify-content:center; text-shadow:0 1px 0 rgba(255,255,255,.75);}
  
}


.intro-card h2::before,
.intro-card h2::after{
  content:"";
  height:2px;
  flex:1;
  border-radius:999px;
}
.intro-card h2::before{
  background: linear-gradient(90deg, rgba(13,93,145,0), rgba(13,93,145,.45));
}
.intro-card h2::after{
  background: linear-gradient(90deg, rgba(13,93,145,.45), rgba(13,93,145,0));
}
@media (max-width:680px){
  .intro-card h2{ color: var(--ink); font-size:20px; font-weight:800; letter-spacing:.1px; text-align:center; margin:6px 0 4px; position:relative; display:flex; align-items:center; gap:12px; justify-content:center; text-shadow:0 1px 0 rgba(255,255,255,.75);}
}


/* 3D bullets for intro list */
.intro-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.58em;
  width:10px;
  height:10px;
  border-radius:999px;
  background:
    radial-gradient(35% 35% at 32% 30%, rgba(255,255,255,.9), rgba(255,255,255,.2) 60%, rgba(255,255,255,0)),
    linear-gradient(180deg, var(--brand-600), var(--brand) 60%, #083d69);
  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    inset 0 1px 1px rgba(255,255,255,.6),
    0 0 0 2px rgba(13,93,145,.12);
}
@media (max-width:680px){
  .intro-card h2{ font-size:19px; gap:10px; }
}

/* Concluding CTA line in intro */
.intro-card .cta-line{
  text-align:center;
  font-weight:700;
  margin-top:8px;
  color: var(--ink);
}

/* CTA button below intro text */
.intro-card .cta-line{ text-align:center; margin-top:10px; }
.intro-card .cta-button{ display:inline-flex; align-items:center; gap:10px; }
.intro-card .cta-button:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(13,93,145,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.intro-card .cta-button:active{ transform:translateY(0); }
.intro-card .cta-button .label{ font-weight:700; color:var(--ink); }
.intro-card .cta-button .arrows{ display:inline-flex; gap:8px; }

/* 3D circular arrows styled like bullets */
.intro-card .dot-arrow{
  position:relative; width:18px; height:18px; border-radius:999px;
  background:
    radial-gradient(35% 35% at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 60%, rgba(255,255,255,0)),
    linear-gradient(180deg, var(--brand-600), var(--brand) 60%, #083d69);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.6);
}
.intro-card .dot-arrow::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-36%);
  width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:7px solid rgba(255,255,255,.95);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
}

/* Make dots smaller on mobile */
@media (max-width:680px){
  .intro-card .cta-button{ display:inline-flex; align-items:center; gap:10px; }
  .intro-card .dot-arrow{ width:16px; height:16px; }
  .intro-card .dot-arrow::after{ border-left-width:4px; border-right-width:4px; border-top-width:6px; }
}

/* Arrow dots sized for CTA button */


/* Flip the left arrow to point right-to-left for symmetry? We'll keep both downwards as requested 'vers le bas' originally.
   If we want left/right chevrons, we can rotate differently. Here keep 'down' arrows as in spec earlier.
*/
.intro-card .cta-button .label{ font-weight:800; color:#fff; }



.intro-card .cta-button{ display:inline-flex; align-items:center; gap:10px; }
.intro-card .cta-button:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(13,95,148,.20),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.intro-card .cta-button:active{ transform: translateY(0); }
.intro-card .cta-button .label{ color:#fff; }




/* Intro text sizing */
.intro-card p, .intro-card li{ font-size:17px; }
.intro-card p.sublead{
  font-weight:700;
  color: var(--ink);
  margin: 8px 0 4px;
}

/* Slight size tweak on small screens */
@media (max-width:680px){
  
}




/* CTA rail outside the card */
.cta-rail{
  display:flex;
  align-items:center;
  gap:16px;
  margin: 10px 0 12px;
  justify-content:center;
}
.cta-rail .rail-line{
  flex:1;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(13,93,145,0), rgba(13,93,145,.40) 50%, rgba(13,93,145,0));
  box-shadow: 0 1px 0 rgba(255,255,255,.8);
}
@media (max-width:680px){
  .cta-rail{ gap:12px; }
}

/* Note under CTA */
.cta-note{ display:block; width:100%; text-align:center; font-size:12px; color: var(--muted); margin: 6px 0 12px; }

.cta-rail .actions-under-slider.outer{ margin-top:0; }

#info-section + .cta-rail{ margin-top:-6px; }


/* Tighter spacing for the intro CTA rail */
#cta-intro-rail{ margin-top:-8px; margin-bottom:2px; }
#cta-intro-rail .actions-under-slider { margin-top: -15px; } /* keep slight lift, but less than -25px */
#cta-intro-rail + .cta-note { margin: -20px 0 6px; }



/* =========================
   PATCH MOBILE-ONLY (SAFE)
   ========================= */

/* 1) Slider Mensualité : empêcher le débordement */
@media (max-width: 520px){
  #mensWrap .mens-only #mensRange,
  #mensWrap #mensRange{
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* 2) Ajout de “respiration” sur les côtés */
@media (max-width: 480px){
  .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 3) CTA bas de page : empiler proprement les boutons */
@media (max-width: 480px){
  .footer-nav{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
    place-items: stretch !important;
  }
  .footer-nav .btn{
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 4) Titres/hero : garder une taille confortable et fluide */
@media (max-width: 480px){
  .global-hero h1{
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.2 !important;
  }
}

/* 5) Petites retouches de formulaires pour éviter les casses */
@media (max-width: 480px){
  input, select, textarea{
    max-width: 100% !important;
  }
}


/* ===== MOBILE PATCH v2 ===== */

/* A) Masquer les paddles latéraux en mobile pour éviter la superposition */
@media (max-width: 520px){
  .paddle, .paddle.up, .paddle.down {
    display: none !important;
  }
}

/* B) Bloc ICC - éviter les débordements & empiler les colonnes */
@media (max-width: 520px){
  .icc-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .icc-grid > *{
    min-width: 0 !important; /* empêche overflow interne */
  }
  .icc-right, .icc-estimate-card, .icc-panel, .icc-aside{
    width: auto !important;
    max-width: 100% !important;
  }
  .icc-estimate-card h3, .icc-estimate-card .kpi{
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* Bouton/tiroir ICC pleine largeur en mobile */
  .icc-trigger, .icc-trigger .btn, .icc .btn-icc{
    width: 100% !important;
  }
}

/* C) Graphiques - s'adapter à la largeur */

@media (max-width: 520px){
  .chart-wrap, .chart-container, .chart-box, .graph-block, .graph-container{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  canvas{
    max-width: 100% !important;
    height: auto !important; /* fallback si maintainAspectRatio */
  }
  /* Légendes/captions qui cassent la ligne */
  .chart-legend, .graph-legend, .chart-caption{
    display: block !important;
    white-space: normal !important;
  }
}

/* D) CTA des pages Projections - empiler en mobile */
@media (max-width: 520px){
  .projections .footer-nav,
  .projections .cta-row,
  .projections .cta-group,
  .footer-nav.projections{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }
  .projections .footer-nav .btn,
  .projections .cta-row .btn,
  .projections .cta-group .btn,
  .footer-nav.projections .btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}


/* ===== MOBILE PATCH v3 — ICC fields ===== */
@media (max-width: 520px){
  /* Assure un box-sizing correct et évite les débordements */
  .icc, .icc *{
    box-sizing: border-box;
  }

  /* Force une mise en colonne simple dans le bloc ICC */
  .icc .form-grid,
  .icc .icc-grid-left,
  .icc .icc-form,
  .icc .form-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Chaque "field" s'étire correctement */
  .icc .field, 
  .icc .field-wrap,
  .icc .input-wrap{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Inputs & selects prennent toute la largeur utile */
  .icc input[type="text"],
  .icc input[type="number"],
  .icc input[type="tel"],
  .icc input[type="date"],
  .icc select,
  .icc textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Libellés au-dessus pour gagner de la place */
  .icc label{
    display: block !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
  }

  /* Groupes radio/inline en wrap propre */
  .icc .inline,
  .icc .radio-group{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Petite astuce pour les lignes CP / Ville / Canton si elles existent en row */
  .icc .row-cp-ville-canton{
    display: grid !important;
    grid-template-columns: 1fr !important; /* 1 par ligne en mobile */
    gap: 10px !important;
  }

  /* Cartes/chiffres à droite prennent 100% en mobile (déjà v2 mais on renforce) */
  .icc-right, .icc-estimate-card{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ===== MOBILE PATCH v4 — normalisation largeur + charts + ICC ===== */
@media (max-width: 520px){

  /* 0) Normalisation globale des blocs pour éviter une section plus "étroite" que les autres */
  .page, .page-wrap, .content, .section, .container, .card, .box, .panel, .kpi-grid, .icc, .graphs, .projections{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 1) KPI/top stats : forcer une grille fluide */
  .kpi-grid{
    display: grid !important;
    grid-template-columns: 1fr !important; /* 1 colonne en mobile */
    gap: 12px !important;
  }
  .kpi-grid > *{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2) ICC : robustesse du layout */
  .icc .row, .icc .form-row{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .icc .col, .icc .field, .icc .field-wrap, .icc .input-wrap, .icc .form-control{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .icc input, .icc select, .icc textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px; /* touch friendly */
  }

  /* 3) Graphiques : les conteneurs occupent 100% + canvas fluide */
  .graph-block, .graph-container, .chart-wrap, .chart-container, .chart-box{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .graph-block canvas, .graph-container canvas, .chart-wrap canvas, .chart-container canvas, .chart-box canvas, canvas.chartjs-render-monitor{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* si Chart.js maintainAspectRatio */
    aspect-ratio: 16 / 9;
  }

  /* 4) CTA en bas de sections Projections : pile verticale pleine largeur */
  .projections .footer-nav, .footer-nav.projections, .projections .cta-row, .projections .cta-group{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }
  .projections .footer-nav .btn, .footer-nav.projections .btn, .projections .cta-row .btn, .projections .cta-group .btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}


/* ===== MOBILE PATCH v5 — selectors agnostiques ===== */
@media (max-width: 520px){

  /* A) ICC : forcer 1 colonne, même si les classes diffèrent */
  .icc form,
  .icc [class*="grid"],
  .icc [class*="row"],
  .icc [class*="columns"],
  .icc [class*="cols"]{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .icc [class*="col"],
  .icc [class*="field"],
  .icc [class*="wrap"],
  .icc [class*="group"],
  .icc [class*="item"]{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .icc input, .icc select, .icc textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  .icc label{
    display: block !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
  }

  .icc [class*="inline"], .icc [class*="radio"], .icc [role="group"]{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* B) Graphiques : canvas toujours 100% largeur */
  section canvas, .section canvas, .card canvas, .box canvas,
  [class*="graph"] canvas, [class*="chart"] canvas{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  [class*="graph"], [class*="chart"], .card, .box{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* C) CTA : toute "row" de boutons passe en colonne unique */
  [class*="footer-nav"], [class*="cta-row"], [class*="cta-group"]{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }
  [class*="footer-nav"] .btn, [class*="cta-row"] .btn, [class*="cta-group"] .btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  /* D) Normalisation de largeur des blocs "haut de page" */
  [class*="kpi"], [class*="hero"], [class*="top"], [class*="header"], [class*="stats"]{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ===== MOBILE PATCH v6 — KPI top block en 2 colonnes sur 320px ===== */
@media (max-width: 360px){
  /* Conserve 2 colonnes même en petit écran */
  .kpi-grid, .top-kpi, .kpi-block{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  /* Cartes KPI */
  .kpi-grid > *, .top-kpi > *, .kpi-block > *{
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px !important;
  }
  /* Typo compacte dans les KPI pour tenir en 140px */
  .kpi-grid h3, .kpi-grid h4, .kpi-grid .title, .kpi-grid .label{
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px 0 !important;
  }
  .kpi-grid .value, .kpi-grid .amount, .kpi-grid .kpi{
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
  /* Le bouton ICC sous les KPI à 100% largeur */
  .kpi-grid + .btn, .top-kpi + .btn, .kpi-block + .btn,
  .kpi-cta, .kpi-cta .btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  /* Nettoyage marges du container top pour éviter un rétrécissement visuel */
  .top-section, .top, .hero, .kpi-wrapper{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ===== MOBILE PATCH v7 — selectors exacts ===== */

/* 1) KPIs en 2 colonnes sur mobile S (<=360px) */
@media (max-width: 360px){
  #kpiBlock .kpis{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }
  #kpiBlock .kpis .kpi{
    min-width: 0 !important;
    padding: 10px !important;
  }
  #kpiBlock .kpis .kpi strong{ font-size: 12px !important; line-height: 1.2 !important; }
  #kpiBlock .kpis .kpi span{ font-size: 16px !important; line-height: 1.1 !important; }
}

/* 2) Projections — CTA rails & container: reset en mobile */
@media (max-width: 520px){
  body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  body[data-page="projections"]:not(.projections-frontalier) .section-cta-outside .btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  /* Rails décoratifs: éviter l'overflow en mobile */
  body[data-page="projections"]:not(.projections-frontalier) .rails-only::before,
  body[data-page="projections"]:not(.projections-frontalier) .rails-only::after{
    width: auto !important;
    max-width: 100% !important;
  }
  body[data-page="projections"]:not(.projections-frontalier) .rails-only{
    max-width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Chart card: largeur fluide */
  .chart-card{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Host & canvas 100% */
  #chartHost{ width: 100% !important; height: auto !important; }
  #chartHost canvas{ width: 100% !important; height: auto !important; display: block !important; }
}

.merci-card{max-width:627px;margin-left:auto;margin-right:auto;}


/* Center hero + card vertically and horizontally on the page */
.merci-center{
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px; /* space between title and card */
  padding: 24px 12px;
}
@media (max-width: 660px){
  .merci-center{ min-height: calc(100vh - 80px); padding: 16px 10px; }
}
/* Remove extra bottom margin from global-hero when centered (gap handles it) */
.global-hero{ margin-bottom: 0 !important; }


/* Merci page: slightly smaller hero title (match other pages) */
.global-hero.merci-hero h1{
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
@media (max-width: 660px){
  .global-hero.merci-hero h1{
    font-size: 26px;
  }
}


/* Merci - ligne bleue alignée au bloc (627px) */
.global-hero.merci-hero .hero-underline{
  width: 627px;
  max-width: 90vw;
  height: 4px;
  background: #0B508A;
  margin: 8px auto 0;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(11,80,138,.25);
}

/* Merci - centrement + espacements */
.merci-center{
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px; /* 12px entre titre et bloc */
  padding: 24px 12px;
  padding-bottom: 36px; /* 32–40px sous le bloc -> 36px */
}
@media (max-width: 660px){
  .merci-center{ min-height: calc(100vh - 80px); padding: 16px 10px; padding-bottom: 36px; }
}

/* Le titre de la page merci, taille harmonisée */
.global-hero.merci-hero h1{
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

@media (max-width: 660px){
  .global-hero.merci-hero h1{ font-size: 26px; }
}



/* When the orientation overlay is visible, hide paddles and sticky UI */
body.orientation-overlay-on .paddle,
body.orientation-overlay-on .paddle-left,
body.orientation-overlay-on .paddle-right,
body.orientation-overlay-on [data-role="paddle"],
body.orientation-overlay-on .sticky-cta,
body.orientation-overlay-on .floating-btn {
  display: none !important;
}



/* Hide scroll indicators while orientation overlay is visible */
body.orientation-overlay-on .scroll-indicator,
body.orientation-overlay-on #scroll-indicator-up,
body.orientation-overlay-on #scroll-indicator-down {
  display: none !important;
}



/* Hide paddles in LANDSCAPE when width < 620px (requested) */
@media screen and (orientation: landscape) and (max-width: 700px){
  .scroll-indicator,
  #scroll-indicator-up,
  #scroll-indicator-down,
  .paddle,
  .paddle-left,
  .paddle-right,
  [data-role="paddle"],
  .floating-btn,
  .sticky-cta {
    display: none !important;
  }
}



/* Keep key blocks in TWO COLUMNS in LANDSCAPE under 620px */
@media screen and (orientation: landscape) and (max-width: 700px){
  /* generic form grids used in KPI / ICC blocks */
  .form-grid,
  .kpi-card .form-grid,
  .icc-grid,
  .drawer-panel .icc-grid,
  .icc .form-grid,
  .icc [class*="grid"].form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  /* fields marked as full width should still span both columns */
  .form-grid .full, .form-grid .span-2,
  .icc-grid .full, .icc-grid .span-2 {
    grid-column: 1 / -1 !important;
  }
}



/* ===== Fullscreen option ===== */
.fs-chip{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 2147483647;
  padding: 10px 14px;
  border-radius: 22px;
  border: 1px solid rgba(11,80,138,.25);
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  color: #0B508A;
  font: 600 14px/1 "Inter", Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(11,80,138,.18);
  cursor: pointer;
}
.fs-chip:active{ transform: translateY(1px); }

/* Hide fs chip when overlay is on */
body.orientation-overlay-on .fs-chip{ display: none !important; }

/* Real fullscreen */
body.fullscreen-active, body.fullscreen-active html{
  background: #fff;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

/* Pseudo fullscreen fallback */
body.pseudo-fullscreen{
  background:#fff;
  overflow:hidden;
  height: 100vh;
  height: 100dvh;
}



/* Improve pseudo/fullscreen scrolling behavior */
html, body{
  overscroll-behavior-y: contain; /* reduce rubber-banding while in pseudo-fullscreen */
}
/* Hide the chip entirely (auto handling) */
.fs-chip{ display:none !important; }


/* === Keyboard spacer (mobile only) === */
#kb-spacer { width: 100%; height: 0; }
@media (max-width: 590px) {
  html, body { height: 100%; }
  body.keyboard-open { padding-bottom: var(--kb-safe, 0px); }
}


/* Toolbar under chart */
.chart-toolbar{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap;position:relative;clear:bothjustify-content:center; margin-left:auto; margin-right:auto; }
.chart-toolbar .yd-label{font-weight:600;color:#0B508A}
.yd-select-shell{display:inline-flex;align-items:center;height:32px;padding: 0 8px 0 8px;border-radius:12px;border:1px solid rgba(11,80,138,.25);background:#fff;box-shadow:0 10px 20px rgba(11,80,138,.08);position:relative}
.yd-select-shell::after{content:'';position:absolute;right:10px;top:50%;margin-top:-3px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #0B508A}
.yd-select-shell select.yd-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:0;outline:0;font-size:13px;height:28px;line-height:28px;padding:0 0 0 2px;min-width:96px}
.chart-toolbar .yd-display{height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:12px;border:1px solid rgba(11,80,138,.18);background:#fff;box-shadow:0 10px 20px rgba(11,80,138,.08);font-weight:600;color:#0B508A;white-space:nowrap}
@media (max-width:760px){ .chart-toolbar .yd-display{white-space:normal} }

/* Arrow / select click fix */
.yd-select-shell{ position:relative; cursor:pointer; }
.yd-select-shell::after{ pointer-events:none; } /* let clicks pass to the select */
.yd-select-shell select.yd-select{ width:100%; padding-right:24px; } /* select covers whole shell */


/* Remove inner blue focus ring from the native <select> (Edge/Windows) */
.yd-select-shell select.yd-select{
  border: 0 !important;
  border-radius: 0 !important;   /* avoid "button-in-button" look */
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
.yd-select-shell select.yd-select:focus,
.yd-select-shell select.yd-select:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
/* Firefox specifics */
.yd-select-shell select.yd-select::-moz-focus-inner{ border:0 !important; }
.yd-select-shell select.yd-select:-moz-focusring{ outline: none !important; }

/* Keep an accessible (subtle) focus on the outer shell instead */
.yd-select-shell:focus-within{
  box-shadow: 0 0 0 2px rgba(11,80,138,.15), 0 10px 20px rgba(11,80,138,.08);
}





/* === Patch: align mobile width for Date de naissance with Statut === */
@media (max-width: 860px) {
  .form-grid input[type="date"],
  .icc .form-grid input[type="date"],
  .drawer-panel .form-grid input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}
/* === End Patch === */


/* === Patch: mobile DOB width matches Statut === */
@media (max-width: 860px) {
  .form-grid .field #dob,
  .form-grid input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}
/* === End Patch === */


/* === Patch: mobile LANDSCAPE - Date de naissance same width as Statut === */
@media (max-width: 860px) and (orientation: landscape) {
  .form-grid .field { min-width: 0 !important; } /* allow children to expand */
  .form-grid .field #dob,
  .form-grid .field input[type="date"] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    flex: 1 1 100% !important;
  }
  /* Safari/iOS quirks: ensure inner editable area doesn't constrain width */
  .form-grid .field input[type="date"]::-webkit-date-and-time-value { min-width: 100% !important; }
  .form-grid .field input[type="date"]::-webkit-datetime-edit { min-width: 100% !important; }
}
/* === End Patch === */


/* === Patch: force date input inner fields to full width (mobile) === */
@media (max-width: 860px) {
  .form-grid .field input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
  }
  /* WebKit internals (iOS/Android Chrome) */
  .form-grid .field input[type="date"]::-webkit-date-and-time-value { min-width: 100% !important; }
  .form-grid .field input[type="date"]::-webkit-datetime-edit { display: inline-block !important; min-width: 100% !important; }
  .form-grid .field input[type="date"]::-webkit-datetime-edit-fields-wrapper { display: inline-block !important; min-width: 100% !important; }
}
/* === End Patch === */

/* --- auto patch: hide fullscreen overlays when running as installed PWA/TWA --- */
@media (display-mode: standalone), (display-mode: fullscreen) {
  #overlay, .overlay,
  #fullscreen-overlay, .fullscreen-overlay,
  [data-overlay], [data-fullscreen-overlay],
  .fs-overlay, #fs-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html.no-fullscreen-overlay, body.no-fullscreen-overlay { overflow: auto !important; }
}


/* ===== FAQ (scopé) ===== */
#faq-mini{ margin:24px 0 8px; }
#faq-mini .section-title{
  display:flex; align-items:center; justify-content:center; gap:16px;
  color:#0B508A; font-weight:800; font-size:22px; letter-spacing:.2px; margin:0 0 14px;
}
#faq-mini .section-title::before,#faq-mini .section-title::after{
  content:""; height:2px; flex:1; border-radius:2px;
  background:linear-gradient(90deg,rgba(13,93,145,0) 0%,rgba(13,93,145,.25) 55%,rgba(13,93,145,.55) 82%,rgba(13,93,145,.85) 100%);
}
#faq-mini .section-title::after{
  background:linear-gradient(270deg,rgba(13,93,145,0) 0%,rgba(13,93,145,.25) 55%,rgba(13,93,145,.55) 82%,rgba(13,93,145,.85) 100%);
}
#faq-mini .faq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 18px; }
#faq-mini .faq-item{ display:flex; flex-direction:column; gap:10px; }
#faq-mini .faq-btn{
  width:100%; height:64px; min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px 22px; white-space:normal; line-height:1.2; color:#fff !important;
  border-radius:999px; border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(180deg,#2C8DDB 0%, #0B508A 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.22), inset 0 3px 6px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  font-weight:800;
}
#faq-mini .faq-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.26), inset 0 3px 7px rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,0,0,.40);
}
#faq-mini .faq-body{
  background:#fff; border-radius:14px; padding:16px 18px;
  box-shadow:0 10px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
}


/* ===== FAQ (scopé) ===== */
#faq-mini{ margin:24px 0 8px; }
#faq-mini .section-title{
  display:flex; align-items:center; justify-content:center; gap:16px;
  color:#0B508A; font-weight:800; font-size:22px; letter-spacing:.2px; margin:0 0 14px;
}
#faq-mini .section-title::before,#faq-mini .section-title::after{
  content:""; height:2px; flex:1; border-radius:2px;
  background:linear-gradient(90deg,rgba(13,93,145,0) 0%,rgba(13,93,145,.25) 55%,rgba(13,93,145,.55) 82%,rgba(13,93,145,.85) 100%);
}
#faq-mini .section-title::after{
  background:linear-gradient(270deg,rgba(13,93,145,0) 0%,rgba(13,93,145,.25) 55%,rgba(13,93,145,.55) 82%,rgba(13,93,145,.85) 100%);
}
#faq-mini .faq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 18px; }
#faq-mini .faq-item{ display:flex; flex-direction:column; gap:10px; }
#faq-mini .faq-btn{
  width:100%; height:64px; min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px 22px; white-space:normal; line-height:1.2; color:#fff !important;
  border-radius:999px; border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(180deg,#2C8DDB 0%, #0B508A 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.22), inset 0 3px 6px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  font-weight:800;
}
#faq-mini .faq-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.26), inset 0 3px 7px rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,0,0,.40);
}
#faq-mini .faq-body{
  background:#fff; border-radius:14px; padding:16px 18px;
  box-shadow:0 10px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
}


/* ===== FAQ: JS-free toggling via <details>/<summary> ===== */
#faq-mini details.faq-item .faq-body{ display:none; }
#faq-mini details[open].faq-item .faq-body{ display:block; }
#faq-mini summary.faq-btn{ list-style:none; cursor:pointer; }
#faq-mini summary.faq-btn::-webkit-details-marker{ display:none; }


/* FAQ spacing for readability */
#faq-mini .faq-body p { margin: 0 0 6px; line-height: 1.45; }
#faq-mini .faq-body .faq-list { margin: 0; padding-left: 1.1rem; }
#faq-mini .faq-body .faq-list li { margin: 4px 0; line-height: 1.45; }


/* FAQ kicker/note */
#faq-mini .faq-kicker{ margin: 0 0 4px; line-height:1.35; }
#faq-mini .faq-note{ margin: 6px 0 0; opacity:.9; }