/* =========================================================================
   KERIA — Simulateur « coût des désistements » (Promoteurs)
   S'appuie sur les tokens de keria.css. Navy d'autorité + cobalt signal,
   crème éditoriale, vert de validation pour le gain. Aucun doré actif.
   ========================================================================= */

.dsim{position:relative}

/* ---------- Grille : contrôles (clair) | résultat (navy) ---------- */
.dsim-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(28px,3.4vw,46px);align-items:start;margin-top:50px}
@media(max-width:980px){.dsim-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- Carte de contrôles (surface claire) ---------- */
.dsim-controls{border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3vw,38px);background:var(--surface);box-shadow:var(--shadow)}
.dsim-step{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.dsim-step:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.dsim-step-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.dsim-step-head .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:.82rem;font-weight:500;background:var(--cobalt-bg);border:1px solid var(--cobalt-line);color:var(--cobalt-ink)}
.dsim-step-head h3{font-size:1.12rem;font-weight:600;margin:0;letter-spacing:-.01em}
.dsim-step-head .cap{margin-left:auto;font-family:var(--font-caps);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:600}

.dsim-field{margin-bottom:24px}
.dsim-field:last-child{margin-bottom:0}
.dsim-field .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.dsim-field label{font-size:.92rem;color:var(--ink-soft);font-weight:600}
.dsim-field .val{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dsim-scale{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--font-mono);font-size:.68rem;color:var(--muted-2)}

/* Champs montant € */
.dsim-money{position:relative;display:flex;align-items:center}
.dsim-money input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 46px 14px 16px;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1.12rem;font-variant-numeric:tabular-nums;transition:.2s}
.dsim-money input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-bg)}
.dsim-money .cur{position:absolute;right:16px;color:var(--muted-2);font-weight:600;font-size:1.05rem;pointer-events:none}
.dsim-money.dark input{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#fff}
.dsim-money.dark input:focus{border-color:var(--cobalt-bright);box-shadow:0 0 0 3px rgba(102,153,245,.22);background:rgba(255,255,255,.09)}
.dsim-money.dark .cur{color:var(--on-navy-3)}

/* Curseurs tactiles confortables */
.dsim .range-light{height:6px}
@media(max-width:600px){
  .dsim .range-light{height:11px}
  .dsim .range-light::-webkit-slider-thumb{width:28px;height:28px}
  .dsim .range-light::-moz-range-thumb{width:28px;height:28px}
  .dsim .range{height:8px}
  .dsim .range::-webkit-slider-thumb{width:26px;height:26px}
  .dsim .range::-moz-range-thumb{width:24px;height:24px}
}

.dsim-controls-note{margin-top:26px;display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.5;color:var(--muted-2)}
.dsim-controls-note svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--muted-2)}

/* ---------- Carte résultat (navy spectaculaire) ---------- */
.dsim-result{border-radius:var(--r-xl);padding:clamp(26px,3vw,40px);color:var(--on-navy);position:relative;overflow:hidden;
  background:radial-gradient(640px 360px at 100% -22%,rgba(37,99,235,.24),transparent 58%),linear-gradient(160deg,var(--navy-3),var(--navy-2));
  border:1px solid var(--navy-soft);box-shadow:var(--shadow-navy)}
.dsim-result::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.9),transparent)}
.dsim-result .tag{font-family:var(--font-caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-bright);font-weight:600;display:inline-flex;align-items:center;gap:.7em}
.dsim-result .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cobalt-bright);flex:none}
.dsim-total{font-family:var(--font-display);font-weight:700;font-size:clamp(2.9rem,7.2vw,4.5rem);line-height:1;letter-spacing:-.03em;margin:12px 0 6px;font-variant-numeric:tabular-nums;color:#fff}
.dsim-total em{font-style:normal;color:var(--cobalt-bright);font-size:.32em;margin-left:.14em;font-weight:600;letter-spacing:0;vertical-align:baseline}
.dsim-result .sub{color:var(--on-navy-2);font-size:.92rem;margin-bottom:8px;max-width:42ch}

/* Décomposition (barres) */
.dsim-bk{display:grid;gap:17px;margin:28px 0 4px}
.dsim-bk .row{display:grid;gap:9px}
.dsim-bk .row .l{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dsim-bk .row .l span{display:inline-flex;align-items:center;gap:10px;color:var(--on-navy-2);font-size:.92rem}
.dsim-bk .row .l span::before{content:"";width:11px;height:11px;border-radius:3px;flex:none;background:var(--c,var(--cobalt))}
.dsim-bk .row .l b{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.dsim-bk .track{height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.dsim-bk .track i{display:block;height:100%;border-radius:5px;background:var(--c,var(--cobalt));transition:width .55s var(--ease)}
.dsim-c-decote{--c:var(--cobalt)}
.dsim-c-portage{--c:var(--cobalt-soft)}
.dsim-c-admin{--c:#9FB1D6}

/* Pied : 3 repères chiffrés */
.dsim-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.dsim-foot .f .n{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.dsim-foot .f .l{font-size:.72rem;color:var(--on-navy-3);margin-top:6px;line-height:1.32}
@media(max-width:480px){.dsim-foot{grid-template-columns:1fr 1fr;gap:18px 14px}}

/* Capture lead (réutilise .lc de keria.css) */
.dsim-result .lc{margin-top:24px;padding-top:22px}

/* ---------- Section impact Keria ---------- */
.dsim-impact{margin-top:44px}
.dsim-hyp{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:end;padding:22px 24px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13)}
.dsim-hyp .hfield .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:11px}
.dsim-hyp label{color:var(--on-navy);font-size:.88rem;font-weight:500}
.dsim-hyp .val{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.dsim-hyp .reset{align-self:end}
.dsim-hyp .reset button{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:var(--on-navy);font-family:inherit;font-weight:600;font-size:.86rem;padding:13px 18px;border-radius:var(--r);cursor:pointer;transition:.2s;white-space:nowrap}
.dsim-hyp .reset button:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.45);color:#fff}
.dsim-hyp .reset button svg{width:15px;height:15px}
@media(max-width:760px){.dsim-hyp{grid-template-columns:1fr;gap:20px}.dsim-hyp .reset button{width:100%;justify-content:center}}

.dsim-payoff{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:34px}
@media(max-width:980px){.dsim-payoff{grid-template-columns:1fr;gap:36px}}

/* Barres comparatives Avant / Après */
.dsim-compare{display:flex;align-items:flex-end;justify-content:center;gap:clamp(30px,7vw,72px);padding:8px 4px 0}
.dsim-bar{flex:1;max-width:172px;text-align:center}
.dsim-bar .amt{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2.3vw,1.7rem);color:#fff;margin-bottom:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dsim-bar .track{height:248px;display:flex;align-items:flex-end;border-radius:11px}
.dsim-bar .col{width:100%;align-self:flex-end;border-radius:11px 11px 0 0;min-height:8px;transition:height .6s var(--ease);position:relative}
.dsim-bar.avant .col{background:linear-gradient(180deg,#6B7693,#49526e)}
.dsim-bar.apres .col{background:linear-gradient(180deg,var(--cobalt-bright),var(--cobalt))}
.dsim-bar .cap{margin-top:15px;font-family:var(--font-caps);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-2);font-weight:600}
.dsim-bar.apres .cap{color:var(--cobalt-bright)}
.dsim-bar .capn{display:block;font-family:var(--font-body);letter-spacing:0;text-transform:none;color:var(--on-navy-3);font-size:.74rem;margin-top:3px;font-weight:500}

/* Gain annuel (vert = validation) */
.dsim-gain{padding:28px 30px;border-radius:var(--r-lg);background:var(--green-bg);border:1px solid rgba(5,150,105,.3);position:relative;overflow:hidden}
.dsim-gain::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.dsim-gain .tag{font-family:var(--font-caps);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700}
.dsim-gain .big{font-family:var(--font-display);font-weight:700;font-size:clamp(2.5rem,5.4vw,3.4rem);line-height:1;color:var(--green);margin:8px 0 0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dsim-gain p{color:var(--ink-soft);font-size:.9rem;margin:10px 0 0;line-height:1.5}

/* Carte ROI */
.dsim-roi{margin-top:18px;padding:24px 28px;border-radius:var(--r-lg);background:rgba(255,255,255,.05);border:1px solid rgba(102,153,245,.32);display:flex;align-items:center;gap:24px}
.dsim-roi .x{font-family:var(--font-display);font-weight:800;font-size:clamp(2.7rem,6.2vw,3.7rem);line-height:.95;color:var(--cobalt-bright);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.dsim-roi .x i{font-style:normal;font-size:.5em;font-weight:700;margin-left:1px}
.dsim-roi .rt b{display:block;color:#fff;font-weight:600;font-size:1.02rem;line-height:1.25}
.dsim-roi .rt p{color:var(--on-navy-2);font-size:.86rem;margin:6px 0 0;line-height:1.5}

.dsim-disclaimer{display:flex;gap:10px;align-items:flex-start;margin-top:26px;font-size:.79rem;line-height:1.55;color:var(--on-navy-3);max-width:84ch}
.dsim-disclaimer svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--on-navy-3)}

/* ---------- "Je ne sais pas" toggle ---------- */
.dsim-top-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

.dsim-unk{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:20px;font-size:.72rem;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--line-2);background:transparent;color:var(--muted-2);transition:border-color .18s,color .18s,background .18s;white-space:nowrap;line-height:1.6}
.dsim-unk::before{content:"?";width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;flex:none;transition:inherit}
.dsim-unk:hover{border-color:var(--cobalt);color:var(--cobalt);background:var(--cobalt-bg)}
.dsim-unk.active{border-color:var(--cobalt);color:var(--cobalt);background:var(--cobalt-bg)}
.dsim-unk.active::before{content:"\2713";background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
/* dark (section nocturne) */
.dsim-unk.dark{border-color:rgba(255,255,255,.22);color:var(--on-navy-3)}
.dsim-unk.dark:hover,.dsim-unk.dark.active{border-color:var(--cobalt-bright);color:var(--cobalt-bright);background:rgba(102,153,245,.12)}
.dsim-unk.dark.active::before{background:var(--cobalt-bright);border-color:var(--cobalt-bright);color:var(--navy-2)}

/* ---------- Valeur estimée sectorielle ---------- */
.dsim-sect-val{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--r);border:1px dashed var(--cobalt-line);background:var(--cobalt-bg);margin-top:2px}
.dsim-sect-badge{font-family:var(--font-caps);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);font-weight:700;flex:none}
.dsim-sect-num{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto}
/* dark variant */
.dsim-sect-val.dark{border-color:rgba(102,153,245,.35);background:rgba(102,153,245,.09)}
.dsim-sect-val.dark .dsim-sect-badge{color:var(--cobalt-bright)}
.dsim-sect-val.dark .dsim-sect-num{color:#fff}
/* Icônes source (ⓘ) + popover */
.dsim-src-wrap{position:relative;flex:none;display:inline-flex}
.dsim-sect-info{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:3px;cursor:pointer;color:var(--cobalt);opacity:.55;transition:opacity .18s,color .18s;border-radius:4px;line-height:1}
.dsim-sect-info:hover,.dsim-sect-info.open{opacity:1}
.dsim-sect-info.open{color:var(--cobalt);background:var(--cobalt-bg)}
.dsim-sect-info.dark{color:var(--cobalt-bright)}
.dsim-sect-info.dark.open{background:rgba(102,153,245,.15)}
.dsim-sect-info svg{width:14px;height:14px;display:block}
/* Popover */
.dsim-src-pop{position:absolute;right:0;top:calc(100% + 8px);width:272px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px 12px;box-shadow:0 8px 32px rgba(0,0,0,.13);z-index:200}
.dsim-src-pop::before{content:"";position:absolute;right:8px;top:-5px;width:9px;height:9px;background:var(--surface);border-top:1px solid var(--line);border-left:1px solid var(--line);transform:rotate(45deg)}
.dsim-src-text{font-size:.8rem;line-height:1.55;color:var(--ink-soft);margin:0}
.dsim-src-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:.78rem;font-weight:600;color:var(--cobalt);text-decoration:none;transition:color .15s}
.dsim-src-link:hover{text-decoration:underline}
.dsim-src-link svg{width:11px;height:11px;flex:none}
/* Dark */
.dsim-src-pop.dark{background:var(--navy-2,#1a2540);border-color:rgba(255,255,255,.18)}
.dsim-src-pop.dark::before{background:var(--navy-2,#1a2540);border-color:rgba(255,255,255,.18)}
.dsim-src-pop.dark .dsim-src-text{color:var(--on-navy-2)}
.dsim-src-pop.dark .dsim-src-link{color:var(--cobalt-bright)}
@media(max-width:480px){.dsim-src-pop{right:auto;left:0;width:calc(100vw - 48px)}}
/* Suppression anciens styles source */
.dsim-sect-src,.dsim-sect-link{display:none}

/* ---------- Hint contextuel ---------- */
.dsim-hint{font-size:.76rem;color:var(--cobalt);background:var(--cobalt-bg);border:1px solid var(--cobalt-line);border-radius:6px;padding:6px 10px;margin:-4px 0 10px;line-height:1.45}

/* ---------- Formule de calcul ---------- */
.dsim-formula{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin:18px 0 22px;padding:14px 16px;background:rgba(255,255,255,.06);border-radius:var(--r);border:1px solid rgba(255,255,255,.1)}
.dsim-formula .fv{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--cobalt-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
.dsim-formula .fo{color:var(--on-navy-3);font-size:.84rem;font-weight:500;padding:0 2px}
.dsim-formula .fr{font-family:var(--font-display);font-weight:800;font-size:1rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- KPI opérationnel ---------- */
.dsim-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:40px}
@media(max-width:860px){.dsim-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.dsim-kpi-grid{grid-template-columns:1fr}}
.dsim-kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;display:flex;flex-direction:column;gap:8px;transition:.2s}
.dsim-kpi-card:hover{box-shadow:var(--shadow);border-color:var(--cobalt-line)}
.dsim-kpi-ico{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r);background:var(--cobalt-bg);border:1px solid var(--cobalt-line)}
.dsim-kpi-ico svg{width:17px;height:17px;color:var(--cobalt)}
.dsim-kpi-val{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.5vw,2.4rem);color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;margin-top:4px}
.dsim-kpi-val span{font-size:.55em;font-weight:600;color:var(--cobalt);margin-left:2px}
.dsim-kpi-label{font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3}
.dsim-kpi-sub{font-size:.78rem;color:var(--ink-soft);line-height:1.45;margin-top:2px}

/* ---------- Boîte tarification attestations ---------- */
.dsim-pricing-box{display:grid;gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.15);margin-top:20px}
.pb-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.pb-row.pb-credit{background:rgba(102,153,245,.06)}
.pb-label{font-size:.8rem;color:var(--on-navy-3);flex:1;font-weight:500}
.pb-calc{font-family:var(--font-mono);font-size:.76rem;color:var(--on-navy-2);white-space:nowrap}
.pb-val{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:80px;text-align:right}
.pb-credit .pb-val{color:var(--cobalt-bright)}
.pb-total{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.05);font-size:.88rem;font-weight:600;color:#fff}
.pb-total.pb-free{background:rgba(5,150,105,.12);color:var(--green)}
.pb-total svg{display:inline;vertical-align:middle}

/* ---------- Mandataires : bannière "Keria gratuit" ---------- */
.dsim-free-banner{display:flex;align-items:flex-start;gap:16px;padding:18px 22px;border-radius:var(--r-lg);background:rgba(102,153,245,.1);border:1px solid rgba(102,153,245,.35);margin-top:32px}
.dsim-free-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r);background:rgba(102,153,245,.18);flex:none;margin-top:1px}
.dsim-free-ico svg{width:20px;height:20px;color:var(--cobalt-bright)}
.dsim-free-banner b{display:block;color:#fff;font-size:1rem;font-weight:700;margin-bottom:5px}
.dsim-free-banner p{color:var(--on-navy-2);font-size:.88rem;line-height:1.5;margin:0}
.dsim-free-banner strong{color:var(--cobalt-bright);font-weight:700}

/* ---------- Mandataires : grille gains ---- */
.dsim-mand-gains{display:grid;gap:14px}
.dsim-keria-rev{padding:22px 26px;border-radius:var(--r-lg);background:rgba(102,153,245,.12);border:1px solid rgba(102,153,245,.38);position:relative;overflow:hidden}
.dsim-keria-rev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cobalt-bright)}
.dsim-keria-rev .tag-rev{font-family:var(--font-caps);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-bright);font-weight:700;display:block;margin-bottom:6px}
.dsim-keria-rev .big-rev{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1;color:var(--cobalt-bright);margin:0 0 6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dsim-keria-rev p{color:var(--on-navy-2);font-size:.88rem;margin:0;line-height:1.4}
.dsim-mand-total{padding:22px 26px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(5,150,105,.18),rgba(102,153,245,.12));border:1px solid rgba(5,150,105,.35);position:relative;overflow:hidden}
.dsim-mand-total::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--green),var(--cobalt-bright))}
.dsim-mand-total .tag{color:var(--green);font-family:var(--font-caps);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:6px}
.dsim-mand-total .big-total{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;color:var(--green);margin:0 0 6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dsim-mand-total p{color:var(--on-navy-2);font-size:.86rem;margin:0;line-height:1.4}

/* ---------- Entrée en scène (sans dépendre du reveal de keria.js) ---------- */
.dsim-in{opacity:0;transform:translateY(20px);animation:dsimIn .7s cubic-bezier(.16,1,.3,1) forwards}
@media(prefers-reduced-motion:reduce){.dsim-in{opacity:1;transform:none;animation:none}
  .dsim-bk .track i,.dsim-bar .col{transition:none}}
@keyframes dsimIn{to{opacity:1;transform:none}}