.mhp{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.32,.72,0,1);--ease-io:cubic-bezier(.65,0,.35,1);--mhp-ink:#13294d;--mhp-blue:#275fe9;--mhp-blue-d:#214eb6;--mhp-paper:#f3f7fd;--mhp-line:#dce6f5;--mhp-muted:#52657f;
  position:relative;padding:clamp(56px,8vw,110px) 16px;background:linear-gradient(180deg,#fff 0%,var(--mhp-paper) 100%);overflow:hidden;font-family:"DM Sans",system-ui,sans-serif;color:var(--mhp-ink)}
.mhp *{box-sizing:border-box}
.mhp-wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.mhp-kicker{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:99px;background:#e6efff;color:var(--mhp-blue-d);font:700 13px/1 "DM Sans",sans-serif;letter-spacing:.02em}
.mhp h2{margin:0 0 16px;font:700 clamp(30px,4.2vw,46px)/1.08 Sora,"DM Sans",sans-serif;letter-spacing:-.02em;color:var(--mhp-ink)}
.mhp-lead{margin:0 0 28px;max-width:470px;font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--mhp-muted)}
.mhp-steps{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px;max-width:470px}
.mhp-steps li{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--mhp-line);border-radius:16px;background:#fff;transition:border-color .35s,box-shadow .35s,transform .35s}
.mhp-steps li>span{flex:0 0 32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--mhp-paper);color:var(--mhp-muted);font:700 14px Sora,sans-serif;transition:.35s}
.mhp-steps b{display:block;font-size:15.5px}.mhp-steps small{display:block;color:var(--mhp-muted);font-size:14px;margin-top:2px}
.mhp-steps li{position:relative;overflow:hidden;transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .6s var(--ease-spring)}
.mhp-steps li::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--mhp-blue);transform:scaleX(0);transform-origin:0 50%}
.mhp-steps li.is-on::after{transform:scaleX(1);transition:transform var(--dur,4s) linear}
.mhp-steps li.is-done::after{transform:scaleX(1);opacity:.25}
.mhp-steps li.is-on{border-color:#b9cdfa;box-shadow:0 10px 30px #275fe91a;transform:translateX(4px)}
.mhp-steps li.is-on>span,.mhp-steps li.is-done>span{background:var(--mhp-blue);color:#fff}
.mhp-actions{display:flex;flex-wrap:wrap;gap:10px}
.mhp-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:1px solid transparent;font:700 15.5px "DM Sans",sans-serif;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s}
.mhp-btn svg{width:20px;height:20px;fill:currentColor}
.mhp-play{background:var(--mhp-ink);color:#fff;box-shadow:0 10px 24px #13294d33}.mhp-play:hover{background:#0c1d3a;transform:translateY(-1px)}
.mhp-btn:focus-visible,.mhp-tap:focus-visible,.mhp-replay:focus-visible{outline:3px solid #8fb0ff;outline-offset:3px}
.mhp-note{margin:16px 0 0;font-size:13px;color:#7b8aa0}

/* ---------- Téléphone ---------- */
.mhp-stage{position:relative;display:grid;justify-items:center;gap:18px}
.mhp-glow{position:absolute;inset:8% 0 auto;height:80%;background:radial-gradient(closest-side,#5b8cff55,transparent);filter:blur(30px);pointer-events:none}
.mhp-phone{--w:clamp(250px,74vw,320px);position:relative;width:var(--w);aspect-ratio:9/19.3;border-radius:calc(var(--w)*.17);padding:calc(var(--w)*.035);
  background:linear-gradient(145deg,#4a4f57 0%,#1d2026 18%,#2b2f36 50%,#15171b 82%,#40444c 100%);
  box-shadow:0 0 0 1.5px #0b0c0e,inset 0 0 0 1.5px #6b7079,inset 0 0 0 4px #121418,0 40px 80px -20px #0b1a3a66,0 18px 36px -18px #0b1a3a80;
  --rx:3deg;--ry:-10deg;--ty:0px;transform:perspective(1400px) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));will-change:transform}
.mhp-phone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(calc(110deg + var(--ry)*4),transparent 30%,#ffffff2e 48%,transparent 60%);pointer-events:none;z-index:30;mix-blend-mode:screen}
.mhp-stage{transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.mhp.is-ready:not(.is-in) .mhp-stage{opacity:0;transform:translateY(40px) scale(.96)}
.mhp.is-in .mhp-stage{opacity:1;transform:none}
.mhp-copy>*{transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.mhp.is-ready:not(.is-in) .mhp-copy>*{opacity:0;transform:translateY(18px)}
.mhp.is-in .mhp-copy>*{opacity:1;transform:none}
.mhp.is-in .mhp-copy>*:nth-child(2){transition-delay:.08s}.mhp.is-in .mhp-copy>*:nth-child(3){transition-delay:.16s}.mhp.is-in .mhp-copy>*:nth-child(4){transition-delay:.24s}.mhp.is-in .mhp-copy>*:nth-child(5){transition-delay:.32s}.mhp.is-in .mhp-copy>*:nth-child(6){transition-delay:.4s}
.mhp-btn-side{position:absolute;width:4px;border-radius:3px;background:linear-gradient(90deg,#2a2d33,#555a63)}
.mhp-s1{left:-3px;top:17%;height:5%}.mhp-s2{left:-3px;top:25%;height:9%}.mhp-s3{left:-3px;top:36%;height:9%}.mhp-s4{right:-3px;top:28%;height:14%}
.mhp-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.135);overflow:hidden;background:#0b1630;color:#fff;isolation:isolate}
.mhp-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#ffffff14 0%,transparent 35%);pointer-events:none;z-index:20}
.mhp-island{position:absolute;top:2.2%;left:50%;width:33%;height:4.4%;transform:translateX(-50%);background:#000;border-radius:99px;z-index:15}
.mhp-status{position:absolute;top:0;left:0;right:0;height:9%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 11%;font:600 calc(var(--w)*.048)/1 -apple-system,"DM Sans",sans-serif;z-index:14}
.mhp-icons{display:flex;gap:5px;align-items:center}.mhp-icons svg{height:calc(var(--w)*.036);fill:currentColor}
.mhp-view{position:absolute;inset:0;padding:22% 7% 9%;opacity:0;visibility:hidden;filter:blur(6px);transform:scale(1.06);transition:opacity .55s var(--ease-out),visibility .55s,transform .7s var(--ease-spring),filter .55s var(--ease-out)}
.mhp-view.is-on{opacity:1;visibility:visible;transform:none;filter:none}
.mhp-view.is-out{transform:scale(.94)}

/* Verrouillé */
.mhp-v-lock{background:radial-gradient(120% 80% at 20% 10%,#3a6df0 0%,transparent 55%),radial-gradient(90% 70% at 90% 90%,#7b5cff 0%,transparent 60%),#0d1a3a;text-align:center}
.mhp-lock-time{margin-top:6%;font:300 calc(var(--w)*.24)/1 -apple-system,"DM Sans",sans-serif;letter-spacing:-.03em}
.mhp-lock-date{font-size:calc(var(--w)*.05);opacity:.85;margin-top:4px}
.mhp-lock-hint{position:absolute;left:0;right:0;bottom:12%;display:grid;justify-items:center;gap:12px;font-size:calc(var(--w)*.043);opacity:.92}
.mhp-tap{width:calc(var(--w)*.22);height:calc(var(--w)*.22);border-radius:50%;border:0;background:#ffffff26;backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;animation:mhp-pulse 2s infinite}
.mhp-tap svg{width:42%;fill:#fff;margin-left:6%}
@keyframes mhp-pulse{0%{box-shadow:0 0 0 0 #ffffff55}70%{box-shadow:0 0 0 18px #ffffff00}100%{box-shadow:0 0 0 0 #ffffff00}}

/* Appel entrant */
.mhp-v-ring{background:linear-gradient(180deg,#1b2b52,#0b1630 70%);text-align:center}
.mhp-ring-label{margin:6% 0 10%;font-size:calc(var(--w)*.045);opacity:.75}
.mhp-avatar{position:relative;width:34%;aspect-ratio:1;margin:0 auto 7%;border-radius:50%;background:linear-gradient(135deg,#8aa7d8,#4f6fa8);display:grid;place-items:center;font:600 calc(var(--w)*.09) Sora,sans-serif}
.mhp-avatar i{position:absolute;inset:0;border-radius:50%;border:2px solid #9cb8ff;animation:mhp-ring 1.6s infinite ease-out}
.mhp-avatar i+i{animation-delay:.8s}
@keyframes mhp-ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.mhp-ring-name{margin:0;font:600 calc(var(--w)*.075)/1.2 -apple-system,"DM Sans",sans-serif}
.mhp-ring-sub{margin:4px 0 0;opacity:.7;font-size:calc(var(--w)*.045)}
.mhp-ring-mh{position:absolute;left:7%;right:7%;bottom:10%;display:flex;gap:10px;align-items:center;text-align:left;padding:12px;border-radius:18px;background:#ffffff14;border:1px solid #ffffff22;font-size:calc(var(--w)*.042);line-height:1.3;animation:mhp-up .6s .5s both}
@keyframes mhp-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mhp-logo{flex:0 0 auto;width:calc(var(--w)*.12);height:calc(var(--w)*.12);border-radius:28%;display:grid;place-items:center;background:var(--mhp-blue);color:#fff;font:800 calc(var(--w)*.045)/1 Sora,sans-serif;letter-spacing:-.02em}

/* Appel en cours */
.mhp-v-call{background:linear-gradient(180deg,#f7f9fe,#eef3fc);color:var(--mhp-ink);padding:19% 0 0;display:flex;flex-direction:column}
.mhp-v-call~.mhp-status,.mhp.is-call .mhp-status{color:var(--mhp-ink)}
.mhp-call-head{display:flex;gap:10px;align-items:center;padding:0 6% 3%}
.mhp-call-head b{display:block;font-size:calc(var(--w)*.05)}
.mhp-call-head small{display:flex;align-items:center;gap:5px;color:var(--mhp-muted);font-size:calc(var(--w)*.038)}
.mhp-live{width:7px;height:7px;border-radius:50%;background:#1fbf6a;box-shadow:0 0 0 3px #1fbf6a33}
.mhp-wave{display:flex;gap:3px;align-items:center;justify-content:center;height:calc(var(--w)*.1);margin:0 6% 2%;padding:0 6px;border-radius:12px;background:#fff;border:1px solid var(--mhp-line)}
.mhp-wave i{width:3px;height:70%;border-radius:2px;background:var(--mhp-blue);opacity:.35;transform:scaleY(var(--v,.22));transition:transform .08s linear}
.mhp.is-agent .mhp-wave i{opacity:1}
.mhp.is-agent .mhp-wave i{animation:mhp-bar .9s infinite ease-in-out}
.mhp.is-caller .mhp-wave i{background:#8a97ab;opacity:.9;animation:mhp-bar 1.1s infinite ease-in-out}
.mhp-wave i:nth-child(2n){animation-delay:-.3s}.mhp-wave i:nth-child(3n){animation-delay:-.6s}.mhp-wave i:nth-child(5n){animation-delay:-.15s}
@keyframes mhp-bar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
.mhp-chat{flex:1;overflow-y:auto;padding:2% 5% 4%;display:flex;flex-direction:column;gap:7px;scroll-behavior:smooth;scrollbar-width:none;mask-image:linear-gradient(180deg,transparent 0,#000 18px)}
.mhp-chat::-webkit-scrollbar{display:none}
.mhp-msg{max-width:84%;padding:8px 11px;border-radius:16px;font-size:calc(var(--w)*.041);line-height:1.38;animation:mhp-pop .55s var(--ease-spring) both}
.mhp-msg.agent{transform-origin:0 100%}.mhp-msg.caller{transform-origin:100% 100%}
@keyframes mhp-pop{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:none}}
.mhp-msg .w{opacity:.15;transition:opacity .25s}.mhp-msg .w.on{opacity:1}
.mhp-msg small{display:block;font-size:.78em;font-weight:700;opacity:.7;margin-bottom:2px}
.mhp-msg.agent{align-self:flex-start;background:var(--mhp-blue);color:#fff;border-bottom-left-radius:5px}
.mhp-msg.caller{align-self:flex-end;background:#fff;color:var(--mhp-ink);border:1px solid var(--mhp-line);border-bottom-right-radius:5px}
.mhp-typing{align-self:flex-end;display:flex;gap:4px;padding:10px 12px;background:#fff;border:1px solid var(--mhp-line);border-radius:16px}
.mhp-typing i{width:6px;height:6px;border-radius:50%;background:#9aa7ba;animation:mhp-dot 1s infinite}.mhp-typing i:nth-child(2){animation-delay:.15s}.mhp-typing i:nth-child(3){animation-delay:.3s}
@keyframes mhp-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.mhp-card{margin:0 5% 3%;padding:11px 12px;border-radius:16px;background:#fff;border:1px solid #bfe8d0;box-shadow:0 10px 24px #1f8a5520;animation:mhp-pop .7s var(--ease-spring) both;transform-origin:50% 100%}
.mhp-card path{stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:mhp-draw .6s .35s var(--ease-out) forwards}
@keyframes mhp-draw{to{stroke-dashoffset:0}}
.mhp-card dl div{opacity:0;animation:mhp-up .5s var(--ease-out) forwards}.mhp-card dl div:nth-child(1){animation-delay:.45s}.mhp-card dl div:nth-child(2){animation-delay:.55s}.mhp-card dl div:nth-child(3){animation-delay:.65s}.mhp-card dl div:nth-child(4){animation-delay:.75s}
.mhp-card-top{display:flex;gap:6px;align-items:center;color:#15803d;font:700 calc(var(--w)*.044) "DM Sans",sans-serif;margin-bottom:6px}
.mhp-card-top svg{width:18px}
.mhp-card dl{margin:0;display:grid;gap:3px}.mhp-card dl div{display:flex;gap:8px;font-size:calc(var(--w)*.038)}
.mhp-card dt{flex:0 0 31%;color:var(--mhp-muted)}.mhp-card dd{margin:0;font-weight:600}
.mhp-callbar{display:flex;justify-content:space-around;align-items:center;padding:3.5% 8% 9%;background:#fff;border-top:1px solid var(--mhp-line)}
.mhp-callbar span{width:calc(var(--w)*.13);height:calc(var(--w)*.13);border-radius:50%;display:grid;place-items:center;background:var(--mhp-paper)}
.mhp-callbar svg{width:46%;fill:var(--mhp-ink)}
.mhp-callbar .mhp-hang{background:#ef4444}.mhp-callbar .mhp-hang svg{fill:#fff}

/* Notification SMS */
.mhp-sms{position:absolute;left:4%;right:4%;top:7%;display:flex;gap:10px;padding:11px 12px;border-radius:20px;background:#ffffffeb;backdrop-filter:blur(14px);color:#111;box-shadow:0 12px 30px #0003;z-index:18;transform:translateY(-150%) scale(.9);opacity:0;transition:transform .75s var(--ease-spring),opacity .4s var(--ease-out)}
.mhp.is-sms .mhp-sms{transform:none;opacity:1}
.mhp.is-sms .mhp-v-call{filter:brightness(.92)}
.mhp-sms-ico{flex:0 0 auto;width:calc(var(--w)*.1);height:calc(var(--w)*.1);border-radius:24%;background:linear-gradient(#5ff777,#13c13a);display:grid;place-items:center}
.mhp-sms-ico svg{width:62%;fill:#fff}
.mhp-sms b{display:flex;justify-content:space-between;font-size:calc(var(--w)*.04)}.mhp-sms b small{font-weight:400;color:#777}
.mhp-sms p{margin:2px 0 0;font-size:calc(var(--w)*.038);line-height:1.32}
.mhp-home{position:absolute;bottom:1.4%;left:50%;width:36%;height:4px;border-radius:4px;transform:translateX(-50%);background:#fff;opacity:.85;z-index:16}
.mhp.is-call .mhp-home{background:#13294d;opacity:.5}
.mhp-replay{border:1px solid var(--mhp-line);background:#fff;color:var(--mhp-ink);border-radius:99px;padding:10px 18px;font:700 14.5px "DM Sans",sans-serif;cursor:pointer}

@media (max-width:860px){
  .mhp{padding:48px 16px 56px}
  .mhp-wrap{grid-template-columns:1fr;gap:18px;text-align:center}
  .mhp-copy{display:contents}
  .mhp-kicker{order:1;justify-self:center;margin:0}
  .mhp h2{order:2;margin:0}
  .mhp-lead{order:3;margin:0 auto;max-width:520px}
  .mhp-stage{order:4;margin:10px 0 4px}
  .mhp-v-call,.mhp-sms{text-align:left}
  .mhp-actions{order:5;justify-content:center}
  .mhp-actions .mhp-btn{width:100%;max-width:340px;justify-content:center}
  .mhp-steps{order:6;margin:8px auto 0;width:100%;text-align:left}
  .mhp-note{order:7;margin:0}
  .mhp-phone{--w:clamp(260px,74vw,320px)}
  .mhp-steps li.is-on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mhp *{animation:none!important;transition:none!important}
  .mhp-phone{transform:none!important}
  .mhp-stage,.mhp-copy>*{opacity:1!important;transform:none!important}
  .mhp-card dl div{opacity:1}
  .mhp-card path{stroke-dashoffset:0}
}