/* =====================================================================
   MyKortex — scènes animées du site
   ===================================================================== */
.mkm { position: relative; width: 100%; }
.mkm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
.mkm-inner { position: absolute; inset: 0; }
.mkm-iris { position: absolute; border-radius: 50%; border: 3px solid rgba(160,214,255,.95); opacity: 0; pointer-events: none; }
.mkm, .mkm * { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.mkm .abs { position: absolute; }
.mkm .ui { background: #fff; color: #111827; border-radius: 14px; box-shadow: 0 30px 70px -14px rgba(0,5,25,.65), 0 0 0 1px rgba(255,255,255,.06); }
.mkm .glass { background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0,5,25,.7); }
.mkm .tnum { font-variant-numeric: tabular-nums; }
.mkm .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.mkm .pill.g { background: #D1FAE5; color: #047857; }
.mkm .pill.r { background: #FEE2E2; color: #B91C1C; }
.mkm .pill.b { background: #DBEAFE; color: #1D4ED8; }
.mkm .pill.a { background: #FEF3C7; color: #B45309; }
.mkm .pill.v { background: #EDE9FE; color: #6D28D9; }
.mkm .pill.n { background: #F3F4F6; color: #374151; }
.mkm svg { overflow: visible; }

/* ---------- en-tête animé ---------- */
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .06em .16em; margin: -.08em -.06em -.16em; }
.mw > .wi { display: inline-block; will-change: transform; }
.mw > .wi.gradient-text { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.mkm-pre .hero h1 { visibility: hidden; }
html.mkm-pre .hero-badge, html.mkm-pre .hero-desc, html.mkm-pre .hero-ctas > a, html.mkm-pre .hero-stat-item, html.mkm-pre .hero-trust-badge { opacity: 0; }
html.mkm-pre #mainNav { opacity: 0; }
html.mkm-js .hero-badge, html.mkm-js .hero h1, html.mkm-js .hero-desc, html.mkm-js .hero-ctas, html.mkm-js .hero-stats, html.mkm-js .hero-trust-badges, html.mkm-js .hero-visual { animation: none !important; }
.hero-ctas > a { will-change: transform; }
/* halo qui pulse sur le bouton principal une fois l'intro terminée */
.hero-ctas > a.btn-primary { position: relative; }
.hero-ctas > a.btn-primary.mkm-ready-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 14px; border: 2px solid rgba(96,165,250,.7); animation: mkmPulse 2.8s ease-out 1.2s infinite; pointer-events: none; }
@keyframes mkmPulse { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12, 1.35); } }
.hero-visual .mockup-window { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-ctas > a.btn-primary.mkm-ready-btn::after { animation: none; }
}

/* ---------- mise en page : plus de place pour les scènes ---------- */
.hero-content { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; }
.feat-section-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
.feat-section-inner .mkm { width: calc(100% + 80px); max-width: none; }
.feat-section-inner:not(.reverse) .mkm { margin-left: 0; margin-right: -80px; }
.feat-section-inner.reverse .mkm { margin-left: -80px; margin-right: 0; }
.hero-visual .mkm { width: calc(100% + 70px); margin-right: -70px; }
.mkm-wide { max-width: 1100px; margin: 10px auto 44px; }
.mkm-pricing { margin: 26px auto 4px; }
.cta-section { position: relative; overflow: hidden; }
.cta-section .cta-inner { position: relative; z-index: 1; }
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; }
  .feat-section-inner { grid-template-columns: 1fr; gap: 40px; }
  .feat-section-inner .mkm, .feat-section-inner:not(.reverse) .mkm, .feat-section-inner.reverse .mkm, .hero-visual .mkm { width: 100%; max-width: 660px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) { .mkm-wide { margin-bottom: 28px; } }

/* ---------- grille des fonctionnalités ---------- */
.feat-hub-card { --mx: 50%; --my: 50%; }
.feat-hub-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(59,158,255,.2), transparent 62%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.feat-hub-card:hover::before { opacity: 1; }
.feat-hub-card:hover .feat-hub-icon { animation: hubIcon .9s ease; }
@keyframes hubIcon { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(1.08) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
html.mkm-js .feat-hub-card { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), border-color .25s; }
html.mkm-js .feat-hub-card.in { opacity: 1; transform: none; }
html.mkm-js .feat-hub-card.in:hover { transform: translateY(-3px); transition: transform .25s, border-color .25s; }
@media (prefers-reduced-motion: reduce) { html.mkm-js .feat-hub-card { opacity: 1; transform: none; } }

/* ---------- correctif : les variantes « reveal-left / right / scale » restaient décalées après l'apparition
   (même spécificité que .reveal.visible mais déclarées après → le texte restait à ±50 px, surtout visible sur mobile) ---------- */
.reveal.visible, .reveal.reveal-left.visible, .reveal.reveal-right.visible, .reveal.reveal-scale.visible { opacity: 1; transform: none; }