/* VTComptes - mouvement Maybach. Transform / opacity uniquement. Actif seulement si JS pose .mx-on. */
:root{--mx-ease:cubic-bezier(.22,.8,.24,1)}

/* Apparitions : cascade douce */
.mx-on .reveal{transition-duration:.7s,.7s;transition-timing-function:var(--mx-ease);transition-delay:calc(var(--mx-i,0)*90ms)}
.mx-on .reveal:not(.is-visible){transform:translateY(18px)}
.mx-h{opacity:0;transform:translateY(18px)}
.mx-h.mx-in{opacity:1;transform:none;transition:opacity .65s var(--mx-ease),transform .65s var(--mx-ease)}

/* Haut de page : la fenêtre flotte, les pastilles dérivent et suivent la souris */
.mx-on .mockup-frame{animation:mxBob 8s ease-in-out infinite}
@keyframes mxBob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.hero-mockup{--mx-px:0;--mx-py:0}
.mx-pill{translate:calc(var(--mx-px)*var(--mx-dx,10px)) calc(var(--mx-py)*var(--mx-dy,8px));transition:translate .5s var(--mx-ease)}
.float-badge-1{--mx-dx:-14px;--mx-dy:-10px}
.float-badge-2{--mx-dx:12px;--mx-dy:10px}
.mx-pill-3{top:-86px;left:38%;--mx-dx:-16px;--mx-dy:-8px;animation-delay:-1.5s}
.mx-pill-4{bottom:26%;left:-170px;--mx-dx:16px;--mx-dy:8px;animation-delay:-4.5s}
.mx-pill{font-size:.92em}
.mx-pill strong{white-space:nowrap}
.mx-off .mockup-frame,.mx-off .float-badge{animation-play-state:paused}
.float-badge-1,.float-badge-2{translate:calc(var(--mx-px)*var(--mx-dx)) calc(var(--mx-py)*var(--mx-dy));transition:translate .5s var(--mx-ease)}
@media (max-width:1280px){.mx-pill-4{left:-56px}}
@media (max-width:1024px){
  .hero-mockup{padding-top:80px;padding-bottom:64px}
  .float-badge-1{top:0}
  .mx-pill-3{top:auto;bottom:-15px;left:auto;right:10px}
  .mx-pill-4{display:none}
}
@media (max-width:480px){.mx-pill-3{display:none}}

/* Survol : reflet de lumière + ombre qui se creuse */
.mx-glow{position:relative;transition:box-shadow .45s var(--mx-ease),transform .45s var(--mx-ease)}
.mx-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(235,238,244,.2),rgba(155,27,48,.1) 45%,transparent 70%);
  transition:opacity .4s var(--mx-ease)}
@media (hover:hover){
  .mx-glow:hover::before{opacity:1}
  .mx-glow:not(.btn):hover{box-shadow:0 18px 44px -14px rgba(0,0,0,.75),0 0 0 1px rgba(235,238,244,.16)}
  .btn.mx-glow:hover{box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
}