/* Simulateur visuel d'Application Mobile iOS / Android — Prime Vision Solutions */
.msim-hero{position:relative;overflow:hidden;padding-bottom:3.4rem}
.msim-hero-wrap{position:relative;z-index:1;max-width:54rem}
.atelier-switch{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.45rem;
  padding:.35rem;border-radius:999px;margin-bottom:1.35rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
}
.atelier-pill{
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;
  color:#cbd5e1;text-decoration:none;font-size:.84rem;font-weight:600;transition:all .22s ease;
}
.atelier-pill svg{width:16px;height:16px}
.atelier-pill:hover{color:#fff;background:rgba(255,255,255,.08)}
.atelier-pill.is-on{background:#0b5cff;color:#fff;box-shadow:0 8px 22px -6px rgba(11,92,255,.65)}

.msim-kicker{
  display:inline-flex;align-items:center;gap:.5rem;padding:.36rem .9rem;border-radius:999px;
  background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.3);
  color:#bae6fd;font-size:.8rem;font-weight:700;letter-spacing:.03em;margin:0 0 .9rem;
}
.msim-dot{width:8px;height:8px;border-radius:50%;background:#38bdf8;box-shadow:0 0 10px #38bdf8}
.msim-grad{
  background:linear-gradient(95deg,#60a5fa 0%,#38bdf8 52%,#a5f3fc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.msim-sec{padding-top:2.4rem}
.msim-studio{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr);
  gap:1.75rem;align-items:start;
}

/* Panneau de configuration gauche */
.msim-controls{
  background:var(--surface);border:1px solid var(--line);border-radius:1.65rem;
  padding:1.5rem;box-shadow:0 20px 48px -28px rgba(6,18,45,.16);
  display:grid;gap:1.35rem;
}
.msim-ctrl-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.msim-ctrl-kicker{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.msim-ctrl-head h2{margin:.15rem 0 0;font-size:1.35rem}
.msim-head-btns{display:flex;align-items:center;gap:.45rem}
.msim-rand-btn,.msim-reset-btn{
  padding:.46rem .82rem;border-radius:999px;font:600 .8rem/1.2 inherit;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:all .2s ease;
}
.msim-rand-btn{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--accent) 32%,var(--line));color:var(--accent)}
.msim-rand-btn:hover,.msim-reset-btn:hover{border-color:var(--accent);transform:translateY(-1px)}

.msim-block{display:grid;gap:.68rem}
.msim-label{font-size:.86rem;font-weight:700;color:var(--ink)}
.msim-label small{font-weight:500;color:var(--muted)}
.msim-input{
  width:100%;padding:.68rem .9rem;border-radius:.85rem;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:600 .94rem/1.3 inherit;
}
.msim-input:focus{outline:2px solid var(--accent);border-color:transparent}

.msim-step-title{display:flex;align-items:center;gap:.55rem}
.msim-num{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font:800 .75rem/1 "Bricolage Grotesque",sans-serif;
}
.msim-step-title h3{margin:0;font-size:1rem;flex:1}
.msim-screens-out{
  padding:.22rem .65rem;border-radius:999px;background:var(--accent);color:#fff;
  font:700 .78rem/1.3 inherit;
}

.msim-plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.msim-plat{
  text-align:left;padding:.78rem .88rem;border-radius:1rem;border:1.5px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer;display:grid;gap:.28rem;transition:all .2s ease;
}
.msim-plat:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.msim-plat.is-active{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  box-shadow:0 10px 24px -16px rgba(11,92,255,.45);
}
.msim-plat-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.msim-plat-top strong{font-size:.86rem;line-height:1.25}
.msim-plat-top em{
  font-style:normal;font-size:.68rem;font-weight:700;padding:.15rem .45rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted);white-space:nowrap;
}
.msim-plat-top em.msim-rec{background:rgba(16,185,129,.16);color:#059669}
.msim-plat small{font-size:.75rem;color:var(--muted);line-height:1.35}

.msim-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.msim-type{
  display:flex;align-items:flex-start;gap:.6rem;text-align:left;padding:.75rem .85rem;
  border-radius:1rem;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);
  cursor:pointer;transition:all .2s ease;
}
.msim-type svg{width:19px;height:19px;color:var(--accent);flex-shrink:0;margin-top:.12rem}
.msim-type strong{display:block;font-size:.86rem;margin-bottom:.15rem}
.msim-type small{display:block;font-size:.74rem;color:var(--muted);line-height:1.32}
.msim-type.is-active{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}

.msim-visual-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.msim-swatches{display:flex;align-items:center;gap:.48rem}
.msim-sw{
  width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:var(--sw);transition:transform .18s ease,box-shadow .18s ease;
}
.msim-sw.is-active{transform:scale(1.14);border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sw) 35%,transparent)}
.msim-theme-toggle{display:inline-flex;padding:.22rem;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.msim-th{
  padding:.34rem .78rem;border-radius:999px;border:0;background:transparent;color:var(--muted);
  font:600 .78rem/1.2 inherit;cursor:pointer;
}
.msim-th.is-active{background:var(--accent);color:#fff}

.msim-range{width:100%;accent-color:var(--accent);cursor:pointer}
.msim-hint{margin:0;font-size:.77rem;color:var(--muted)}

.msim-mods{display:grid;gap:.5rem}
.msim-mod{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  padding:.68rem .85rem;border-radius:.95rem;border:1.5px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer;transition:all .18s ease;
}
.msim-mod:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.msim-mod.is-on{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
}
.msim-mod.is-locked{opacity:.92;cursor:default}
.msim-mod-chk{
  width:21px;height:21px;border-radius:.45rem;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:.74rem;font-weight:800;color:transparent;flex-shrink:0;
}
.msim-mod.is-on .msim-mod-chk{background:var(--accent);border-color:var(--accent);color:#fff}
.msim-mod-txt{flex:1;min-width:0}
.msim-mod-txt strong{display:block;font-size:.84rem;line-height:1.25}
.msim-mod-txt small{display:block;font-size:.73rem;color:var(--muted);margin-top:.12rem}
.msim-mod-price{
  font-style:normal;font:700 .76rem/1.2 "Bricolage Grotesque",sans-serif;
  padding:.22rem .52rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);white-space:nowrap;
}

/* Colonne droite : Aperçu Smartphone + Carte Devis */
.msim-stage-sticky{position:sticky;top:5.6rem;display:grid;gap:1.1rem}
.msim-preview-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem;
  padding:.55rem .75rem;border-radius:1.1rem;background:var(--surface);border:1px solid var(--line);
}
.msim-os-switch{display:inline-flex;gap:.3rem}
.msim-os-btn{
  padding:.42rem .85rem;border-radius:999px;border:0;background:transparent;color:var(--muted);
  font:700 .8rem/1.2 inherit;cursor:pointer;transition:all .18s ease;
}
.msim-os-btn.is-active{background:#081730;color:#fff}
.msim-test-push{
  padding:.42rem .82rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent);
  font:700 .78rem/1.2 inherit;cursor:pointer;
}
.msim-test-push:hover{background:var(--accent);color:#fff}

.msim-preview-grid{
  display:grid;grid-template-columns:288px minmax(0,1fr);gap:1.15rem;align-items:start;
}

/* Châssis Smartphone réaliste */
.msim-phone-wrap{display:flex;justify-content:center}
.msim-phone{
  --app-bg:#f8fafc;--app-card:#ffffff;--app-ink:#0f172a;--app-muted:#64748b;--app-line:#e2e8f0;
  position:relative;width:284px;min-height:558px;border-radius:2.55rem;padding:.72rem .78rem .6rem;
  background:var(--app-bg);color:var(--app-ink);
  border:8px solid #0b1528;
  box-shadow:0 28px 60px -20px rgba(5,11,30,.55),0 0 0 1px rgba(148,197,255,.28);
  display:flex;flex-direction:column;overflow:hidden;transition:border-radius .25s ease,background .25s ease;
}
.msim-phone.is-dark{
  --app-bg:#070e1f;--app-card:#111c35;--app-ink:#f1f5f9;--app-muted:#94a3b8;--app-line:rgba(255,255,255,.1);
}
.msim-phone.is-android{border-radius:1.85rem;border-width:7px}
.msim-phone-notch{
  align-self:center;width:76px;height:18px;border-radius:999px;background:#020612;margin-bottom:.32rem;
  transition:all .25s ease;
}
.msim-phone.is-android .msim-phone-notch{width:12px;height:12px;border-radius:50%}

.msim-statusbar{
  display:flex;align-items:center;justify-content:space-between;font-size:.66rem;font-weight:700;
  color:var(--app-muted);padding:0 .25rem .45rem;
}
.msim-sb-right{display:inline-flex;align-items:center;gap:.35rem}
.msim-offline-pill{
  padding:.08rem .38rem;border-radius:999px;background:rgba(16,185,129,.18);color:#10b981;font-size:.6rem;
}

.msim-push-toast{
  position:absolute;top:2.35rem;left:.65rem;right:.65rem;z-index:6;
  display:flex;align-items:center;gap:.55rem;padding:.55rem .68rem;border-radius:.95rem;
  background:rgba(11,21,40,.95);color:#fff;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 32px -10px rgba(0,0,0,.55);animation:msimPop .28s ease;
}
@keyframes msimPop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.msim-push-ic{
  width:28px;height:28px;border-radius:.55rem;background:var(--app-accent);color:#fff;
  display:grid;place-items:center;font:800 .78rem/1 "Bricolage Grotesque",sans-serif;flex-shrink:0;
}
.msim-push-body{min-width:0}
.msim-push-body strong{display:block;font-size:.72rem}
.msim-push-body span{display:block;font-size:.67rem;color:#cbd5e1; line-height:1.25}

.msim-app-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  padding:.42rem .2rem .62rem;border-bottom:1px solid var(--app-line);
}
.msim-app-brand{display:flex;align-items:center;gap:.5rem;min-width:0}
.msim-app-logo{
  width:32px;height:32px;border-radius:.68rem;background:var(--app-accent);color:#fff;
  display:grid;place-items:center;font:800 .78rem/1 "Bricolage Grotesque",sans-serif;flex-shrink:0;
}
.msim-app-brand strong{display:block;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:138px}
.msim-app-brand small{display:block;font-size:.63rem;color:var(--app-muted)}
.msim-faceid-badge{
  padding:.18rem .44rem;border-radius:999px;font-size:.6rem;font-weight:700;
  background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);
}

.msim-screen{flex:1;padding:.68rem .15rem;display:flex;flex-direction:column;gap:.58rem;overflow-y:auto}
.msim-hero-banner{
  padding:.78rem .82rem;border-radius:1rem;color:#fff;
  background:linear-gradient(135deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 62%,#06132d));
  display:grid;gap:.28rem;
}
.msim-hero-banner small{font-size:.63rem;opacity:.88;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.msim-hero-banner strong{font-size:.92rem;line-height:1.22}
.msim-hero-banner span{font-size:.7rem;opacity:.92}
.msim-hero-cta{
  margin-top:.28rem;justify-self:start;padding:.28rem .68rem;border-radius:999px;
  background:#fff;color:#0b1528;font-size:.68rem;font-weight:800;border:0;cursor:pointer;
}

.msim-kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.msim-kpi-box{
  padding:.55rem .62rem;border-radius:.82rem;background:var(--app-card);border:1px solid var(--app-line);
}
.msim-kpi-box b{display:block;font-size:.88rem;color:var(--app-accent)}
.msim-kpi-box span{display:block;font-size:.64rem;color:var(--app-muted)}

.msim-card-list{display:grid;gap:.42rem}
.msim-mini-item{
  display:flex;align-items:center;justify-content:space-between;gap:.45rem;
  padding:.52rem .62rem;border-radius:.78rem;background:var(--app-card);border:1px solid var(--app-line);
}
.msim-mini-item strong{display:block;font-size:.73rem}
.msim-mini-item small{display:block;font-size:.63rem;color:var(--app-muted)}
.msim-pill-tag{
  padding:.16rem .45rem;border-radius:999px;font-size:.62rem;font-weight:700;
  background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);white-space:nowrap;
}

.msim-chip-cloud{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto;padding-top:.25rem}
.msim-chip-cloud span{
  padding:.16rem .46rem;border-radius:999px;font-size:.6rem;font-weight:700;
  background:var(--app-card);border:1px solid var(--app-line);color:var(--app-muted);
}

.msim-tabbar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.45rem .15rem .25rem;
  border-top:1px solid var(--app-line);
}
.msim-tab{
  border:0;background:transparent;color:var(--app-muted);padding:.25rem;border-radius:.6rem;
  display:grid;justify-items:center;gap:.16rem;font:700 .65rem/1.1 inherit;cursor:pointer;
}
.msim-tab-dot{width:16px;height:4px;border-radius:99px;background:transparent;transition:background .2s}
.msim-tab.is-active{color:var(--app-accent)}
.msim-tab.is-active .msim-tab-dot{background:var(--app-accent)}
.msim-home-bar{align-self:center;width:86px;height:4px;border-radius:99px;background:var(--app-muted);opacity:.38;margin-top:.3rem}

/* Carte de chiffrage marché à droite du téléphone */
.msim-quote-card{
  background:linear-gradient(160deg,#06122c 0%,#0b1f47 100%);
  color:#f8fafc;border-radius:1.55rem;padding:1.35rem;
  border:1px solid rgba(148,197,255,.22);
  box-shadow:0 24px 52px -24px rgba(5,11,30,.6);
  display:grid;gap:.95rem;
}
.msim-qc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.45rem}
.msim-qc-kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#7dd3fc}
.msim-store-badges{display:flex;flex-wrap:wrap;gap:.32rem}
.msim-store-bdg{
  padding:.18rem .52rem;border-radius:999px;font-size:.68rem;font-weight:700;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);color:#e0f2fe;
}

.msim-price-box{
  padding:.9rem 1rem;border-radius:1.1rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);display:grid;gap:.2rem;
}
.msim-price-lbl{font-size:.75rem;color:#cbd5e1}
.msim-price-val{font:800 1.48rem/1.18 "Bricolage Grotesque",sans-serif;color:#fff}
.msim-price-val small{font-size:.82rem;font-weight:700;color:#93c5fd}
.msim-price-ttc{font-size:.74rem;color:#94a3b8}

.msim-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.msim-meta-item{
  padding:.62rem .75rem;border-radius:.9rem;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
.msim-meta-item span{display:block;font-size:.7rem;color:#94a3b8}
.msim-meta-item strong{display:block;font-size:.84rem;color:#fff;margin-top:.12rem}

.msim-breakdown{
  list-style:none;margin:0;padding:0;display:grid;gap:.36rem;
  max-height:175px;overflow-y:auto;font-size:.76rem;
}
.msim-breakdown li{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.32rem 0;border-bottom:1px dashed rgba(255,255,255,.1);color:#dbeafe;
}
.msim-breakdown li b{color:#7dd3fc;white-space:nowrap}

.msim-own-note{margin:0;font-size:.74rem;color:#a7f3d0;font-weight:600}
.msim-cta-stack{display:grid;gap:.55rem}
.msim-cta-stack .btn{width:100%;justify-content:center;text-align:center}
.msim-cta-stack .btn.alt{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}
.msim-cta-stack .btn.alt:hover{background:rgba(255,255,255,.16)}

/* Tiroir de demande de chiffrage */
.msim-lead-drawer{
  background:var(--surface);border:2px solid var(--accent);border-radius:1.45rem;
  padding:1.35rem;box-shadow:0 24px 55px -24px rgba(11,92,255,.32);
}
.msim-lead-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.msim-lead-head h3{margin:0 0 .25rem;font-size:1.12rem}
.msim-lead-head p{margin:0;font-size:.84rem;color:var(--muted)}
.msim-close-lead{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer;font-weight:700;
}
.msim-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem;align-items:end}
.msim-lead-drawer label{display:block;font-size:.8rem;font-weight:700;margin-bottom:.28rem}
.msim-lead-drawer input[type="text"],
.msim-lead-drawer input[type="email"],
.msim-lead-drawer input[type="tel"],
.msim-lead-drawer textarea{
  width:100%;padding:.62rem .8rem;border-radius:.75rem;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:inherit;font-size:.88rem;
}
.msim-form-full{margin-bottom:.75rem}
.msim-consent{display:flex!important;align-items:flex-start;gap:.6rem;font-weight:500!important;font-size:.82rem!important;line-height:1.45;color:var(--muted);margin-bottom:.85rem;cursor:pointer}
.msim-consent input{flex:none;width:1.125rem;height:1.125rem;min-width:1.125rem;min-height:0;margin:.16rem 0 0;padding:0;accent-color:var(--accent);cursor:pointer}
.msim-form-msg{padding:.65rem .85rem;border-radius:.75rem;font-size:.84rem;font-weight:600;margin:0 0 .8rem}
.msim-form-msg.is-ok{background:rgba(16,185,129,.14);color:#059669;border:1px solid rgba(16,185,129,.35)}
.msim-form-msg.is-err{background:rgba(239,68,68,.12);color:#dc2626;border:1px solid rgba(239,68,68,.3)}

@media (max-width:1160px){
  .msim-studio{grid-template-columns:minmax(0,1fr)}
  .msim-stage-sticky{position:static}
}
@media (max-width:720px){
  .msim-preview-grid,.msim-plat-grid,.msim-type-grid,.msim-form-grid{grid-template-columns:minmax(0,1fr)}
}