/* ==========================================================================
   MOTION DESIGN DE L'ACCUEIL (motion.js) : amélioration progressive du site existant
   ========================================================================== */
.mo-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #8c6a1e, #d4af37, #fff2c6); box-shadow: 0 0 12px rgba(212, 175, 55, 0.6); pointer-events: none; }

/* Constellation 3D du héros */
.mo-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.mo-stars.is-on { opacity: 1; }
.hero-section .container { position: relative; z-index: 1; }

/* Titres révélés mot par mot */
.mo-split .mw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.02em 0.06em; margin: -0.08em -0.02em -0.06em; }
.mo-split .mw > span { display: inline-block; transform: translate3d(0, 105%, 0) rotate(4deg); filter: blur(6px); opacity: 0; transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter 1s ease, opacity .8s ease; transition-delay: calc(var(--i) * 70ms + var(--d, 0ms)); }
.mo-split.is-in .mw > span { transform: none; filter: none; opacity: 1; }
.hero-title.mo-split .gold-gradient-text { background-size: 220% 100%; animation: mo-shimmer 6s ease-in-out 1.6s infinite; }
@keyframes mo-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Grilles : apparition en cascade */
.mo-stagger > * { opacity: 0; transform: translate3d(0, 34px, 0) scale(.98); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--mo-i, 0) * 90ms); }
.mo-stagger.is-in > * { opacity: 1; transform: none; }

/* Cartes : inclinaison 3D + reflet qui suit le curseur */
.mo-tilt { transform-style: preserve-3d; will-change: transform; }
.mo-tilt.is-tilting { transition: transform .12s linear, box-shadow .3s ease, border-color .3s ease !important; }
.mo-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .35s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 242, 198, 0.16), transparent 55%); mix-blend-mode: screen; }
.mo-tilt.is-tilting .mo-glare { opacity: 1; }

/* Carte VIP du héros */
.mo-card-wrap { perspective: 1100px; width: 100%; max-width: 480px; }
.mo-card-wrap .hero-card-preview { transform-style: preserve-3d; transition: transform .2s ease-out; }
.mo-card-wrap .hero-card-preview .mo-glare { background: linear-gradient(115deg, transparent 30%, rgba(255, 242, 198, 0.22) var(--gp, 50%), transparent 70%); opacity: .55; }

/* Lueur qui suit le curseur */
.mo-cursor { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(212, 175, 55, 0.09), transparent 62%); opacity: 0; transition: opacity .6s ease; }
.mo-cursor.is-on { opacity: 1; }

/* Bandeau défilant */
.mo-marquee { position: relative; overflow: hidden; padding: 18px 0; border-top: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); background: linear-gradient(90deg, rgba(212, 175, 55, 0.06), rgba(7, 9, 14, 0.4), rgba(212, 175, 55, 0.06)); }
.mo-marquee::before, .mo-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.mo-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-main, #07090e), transparent); }
.mo-marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-main, #07090e), transparent); }
.mo-marquee-track { display: flex; width: max-content; gap: 46px; animation: mo-marquee 38s linear infinite; }
.mo-marquee:hover .mo-marquee-track { animation-play-state: paused; }
.mo-marquee-track span { display: inline-flex; align-items: center; gap: 46px; font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.4rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 226, 158, 0.85); white-space: nowrap; }
.mo-marquee-track span::after { content: '◆'; font-size: 0.6em; color: var(--gold-primary); }
@keyframes mo-marquee { to { transform: translateX(-50%); } }

/* Boutons magnétiques */
.mo-magnet { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }

@media (hover: none), (pointer: coarse) { .mo-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mo-split .mw > span, .mo-stagger > * { transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }
  .mo-marquee-track, .hero-title.mo-split .gold-gradient-text { animation: none; }
  .mo-cursor, .mo-stars { display: none; }
}

/* ==========================================================================
   VERSION TÉLÉPHONE DE L'ACCUEIL : carrousels à balayer + barre d'action fixe
   ========================================================================== */
@media (max-width: 767px) {
  .mo-swipe { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 14px !important; padding: 6px 20px 14px !important; margin: 0 -20px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; grid-template-columns: none !important; }
  .mo-swipe::-webkit-scrollbar { display: none; }
  .mo-swipe > * { flex: 0 0 84% !important; max-width: 84% !important; scroll-snap-align: center; margin: 0 !important; }
  .mo-swipe.pricing-grid > * { flex-basis: 88% !important; max-width: 88% !important; }
  .mo-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 18px; }
  .mo-dots i { width: 6px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); transition: width .3s ease, background .3s ease; }
  .mo-dots i.is-on { width: 20px; background: var(--gold-primary, #d4af37); }
  .mo-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246, 226, 158, 0.7); margin: -4px 0 6px; }

  .mo-mobile-cta { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 900; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: rgba(9, 12, 20, 0.92); border: 1px solid rgba(212, 175, 55, 0.4); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(140%); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
  .mo-mobile-cta.is-on { transform: none; }
  .mo-mobile-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; border-radius: 12px; font-size: 0.84rem; font-weight: 700; text-decoration: none; }
  .mo-mobile-cta a.ghost { color: var(--gold-light, #f6e29e); border: 1px solid rgba(212, 175, 55, 0.35); }
  .mo-mobile-cta a.gold { color: #0b0e17; background: var(--gold-gradient, linear-gradient(135deg, #fbe8aa, #d4af37)); }
  .mo-mobile-cta svg { display: inline-block; flex: none; }
  .hero-title { font-size: clamp(2.6rem, 13vw, 3.4rem); }
}
@media (min-width: 768px) { .mo-mobile-cta, .mo-dots, .mo-swipe-hint { display: none; } }
@media (max-width: 767px) { body.mo-cta-on .ecn-chat-launcher { bottom: 92px !important; transition: bottom .4s ease; } }