/* =========================================================
   RÉMIX — Cours de chant | Design system "Dark néon / IA 2026"
   ========================================================= */

:root {
  --bg: #05030c;
  --bg-2: #0b0718;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.1);
  --text: #ECE9F5;
  --muted: #9B95B8;
  --violet: #8B5CFF;
  --violet-2: #B388FF;
  --cyan: #19E3FF;
  --pink: #FF4DCB;
  --glow-violet: rgba(139, 92, 255, 0.55);
  --glow-cyan: rgba(25, 227, 255, 0.45);
  /* ---- Glassmorphism ---- */
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-blur: 22px;
  --glass-shadow: 0 12px 40px -12px rgba(0,0,0,0.55);
  --glass-hi: rgba(255, 255, 255, 0.5);
  --radius: 20px;
  --maxw: 1180px;
  --font: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ---- Mesh gradient / aura de fond animée ---- */
body::before {
  content: "";
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 120vh;
  z-index: -2;
  background:
    radial-gradient(40% 35% at 20% 15%, rgba(139,92,255,0.30), transparent 60%),
    radial-gradient(35% 35% at 85% 10%, rgba(25,227,255,0.22), transparent 60%),
    radial-gradient(45% 40% at 70% 80%, rgba(255,77,203,0.16), transparent 65%),
    radial-gradient(40% 40% at 10% 90%, rgba(139,92,255,0.18), transparent 60%);
  filter: blur(20px);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-4%,0) scale(1.08); }
}

/* ---- Grain texture overlay ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* =================== NAV =================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  background: rgba(5,3,12,0.45);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px -16px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo {
  font-weight: 700; font-size: 1.25rem; letter-spacing: 1px;
  text-decoration: none; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.logo .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--glow-cyan), 0 0 24px var(--glow-cyan);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.6} }
.logo .grad { background: linear-gradient(90deg, var(--violet-2), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 0.93rem; font-weight: 500;
  padding: 8px 14px; border-radius: 10px; transition: all .2s ease;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 8px var(--glow-violet);
}
.nav-cta {
  padding: 9px 18px !important; border-radius: 12px !important;
  background: linear-gradient(90deg, var(--violet), var(--cyan)) !important;
  color: #05030c !important; font-weight: 600 !important;
  box-shadow: 0 0 18px var(--glow-violet);
}
.nav-cta:hover { box-shadow: 0 0 28px var(--glow-violet); transform: translateY(-1px); }

.burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }

/* =================== TYPO =================== */
h1, h2, h3 { font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.eyebrow .blip { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--glow-cyan); }
.grad-text { background: linear-gradient(100deg, var(--violet-2) 10%, var(--cyan) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); font-size: 1.12rem; max-width: 620px; }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 14px; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all .22s ease;
}
.btn-primary {
  background: linear-gradient(90deg, var(--violet), var(--cyan)); color: #05030c;
  box-shadow: 0 0 24px var(--glow-violet);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 38px var(--glow-violet); }
.btn-ghost {
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.btn-ghost:hover { background: var(--glass-strong); border-color: var(--violet); transform: translateY(-2px); }

/* =================== SECTIONS =================== */
section { padding: 90px 0; position: relative; }
.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 16px; }

/* =================== HERO =================== */
.hero { padding: 110px 0 90px; text-align: left; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin-bottom: 24px; }
.hero .lead { font-size: 1.25rem; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 56px; }
.hero-badges .b {
  padding: 18px 22px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 40%), var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  transition: transform .25s ease, border-color .25s ease;
}
.hero-badges .b:hover { transform: translateY(-4px); border-color: var(--violet); }
.hero-badges .b strong { display: block; font-size: 1.8rem; background: linear-gradient(90deg,var(--violet-2),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-badges .b span { color: var(--muted); font-size: 0.9rem; }

/* =================== CARDS =================== */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 40%),
    var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: var(--radius); padding: 30px; position: relative; overflow: hidden;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  padding: 1px; background: linear-gradient(135deg, var(--violet), transparent 40%, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px -20px var(--glow-violet), inset 0 1px 0 var(--glass-hi); }
.card:hover::before { opacity: 1; }
.card .ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.4rem; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(139,92,255,.25), rgba(25,227,255,.18));
  border: 1px solid var(--border);
}
.card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.97rem; }

/* feature/list rows */
.steps { display: grid; gap: 18px; counter-reset: s; }
.step {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 45%), var(--glass);
  border: 1px solid var(--glass-border); border-radius: 16px; padding: 24px;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.step .num {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 700; color: #05030c; background: linear-gradient(135deg,var(--violet),var(--cyan));
  box-shadow: 0 0 16px var(--glow-violet);
}
.step h3 { font-size: 1.15rem; margin-bottom: 6px; }
.step p { color: var(--muted); }

.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pill {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--text); font-size: 0.92rem;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--glass-hi); transition: transform .2s ease, border-color .2s ease;
}
.pill:hover { transform: translateY(-2px); border-color: var(--violet); }

/* =================== CTA BANNER =================== */
.cta-banner {
  border-radius: 28px; padding: 64px 48px; text-align: center; position: relative; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(139,92,255,0.18), rgba(25,227,255,0.10)), var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.cta-banner h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: 16px; }
.cta-banner p { color: var(--muted); max-width: 520px; margin: 0 auto 30px; }

/* =================== FORM =================== */
.form { display: grid; gap: 18px; max-width: 560px; }
.form label { font-size: 0.9rem; color: var(--muted); margin-bottom: 6px; display: block; }
.form input, .form textarea, .form select {
  width: 100%; padding: 14px 16px; border-radius: 12px; font-family: var(--font); font-size: 1rem;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .2s;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,92,255,.18); }
.form textarea { min-height: 130px; resize: vertical; }

/* =================== CHATBOT PLACEHOLDER =================== */
.bot-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 62px; height: 62px; border-radius: 20px; border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--violet), var(--cyan)); color: #05030c;
  display: grid; place-items: center; font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 0 26px var(--glow-violet); transition: transform .2s;
}
.bot-fab:hover { transform: scale(1.07) rotate(-4deg); }
.bot-fab .soon {
  position: absolute; top: -8px; right: -8px; font-size: 0.6rem; font-weight: 700;
  background: var(--pink); color: #fff; padding: 3px 7px; border-radius: 999px; box-shadow: 0 0 10px rgba(255,77,203,.6);
}

/* =================== CHATBOT IA — DEMO WHATSAPP =================== */
.bot-feature {
  display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: center;
  border-radius: 28px; padding: 56px; position: relative; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(139,92,255,0.16), rgba(25,227,255,0.08)), var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.bot-feature .lead { margin-bottom: 26px; }
.bot-feature .feat-list { display: grid; gap: 14px; margin: 6px 0 30px; }
.bot-feature .feat-list li { list-style: none; display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.bot-feature .feat-list .ck {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .8rem; color: #05030c;
  background: linear-gradient(135deg, var(--violet), var(--cyan)); box-shadow: 0 0 12px var(--glow-violet);
}
.bot-tag { display:inline-flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.bot-tag span { font-size:.78rem; padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--violet-2); }

/* --- Phone frame --- */
.phone {
  width: 320px; max-width: 100%; margin: 0 auto;
  background: #0B141A; border-radius: 38px; padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px -30px var(--glow-violet), 0 0 0 1px rgba(0,0,0,.4) inset;
  position: relative;
}
.phone::before { /* notch */
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:22px; background:#000; border-radius:0 0 16px 16px; z-index:3;
}
.wa { border-radius: 28px; overflow: hidden; background:
  linear-gradient(rgba(11,20,26,0.96), rgba(11,20,26,0.96)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.2' fill='%23ffffff' opacity='0.05'/%3E%3C/svg%3E");
  display:flex; flex-direction:column; height: 560px; }
.wa-head {
  display:flex; align-items:center; gap:12px; padding:34px 14px 12px; background:#1F2C34; color:#E9EDEF;
}
.wa-head .av {
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem;
  background:linear-gradient(135deg, var(--violet), var(--cyan)); color:#05030c;
}
.wa-head .who { line-height:1.2; }
.wa-head .who b { font-size:.95rem; }
.wa-head .who small { color:#8FA3AD; font-size:.74rem; }
.wa-head .dots { margin-left:auto; color:#8FA3AD; letter-spacing:2px; }
.wa-body { flex:1; padding:16px 12px; overflow:hidden; display:flex; flex-direction:column; gap:8px; }
.wa-body::-webkit-scrollbar { display:none; }
.bubble {
  max-width:80%; padding:8px 11px; border-radius:12px; font-size:.82rem; line-height:1.4; color:#E9EDEF;
  position:relative; opacity:0; transform:translateY(8px); animation: pop .35s ease forwards;
  box-shadow:0 1px 1px rgba(0,0,0,.2); word-wrap:break-word;
}
@keyframes pop { to { opacity:1; transform:none; } }
.bubble.in { align-self:flex-start; background:#1F2C34; border-top-left-radius:3px; }
.bubble.out { align-self:flex-end; background:#005C4B; border-top-right-radius:3px; }
.bubble .t { display:block; text-align:right; font-size:.62rem; color:#8FA3AD; margin-top:3px; }
.bubble.out .t { color:#9FE8D5; }
/* voice note bubble */
.voicenote { display:flex; align-items:center; gap:9px; min-width:170px; }
.voicenote .play { width:26px; height:26px; border-radius:50%; background:#0B141A; color:#9FE8D5; display:grid; place-items:center; font-size:.7rem; flex:0 0 auto; }
.voicenote .wave { flex:1; height:22px; display:flex; align-items:center; gap:2px; }
.voicenote .wave i { display:block; width:2px; border-radius:2px; background:#9FE8D5; opacity:.7; }
.voicenote .dur { font-size:.66rem; color:#9FE8D5; }
/* typing indicator */
.typing { align-self:flex-start; background:#1F2C34; padding:11px 14px; border-radius:12px; border-top-left-radius:3px; display:flex; gap:4px; }
.typing i { width:6px; height:6px; border-radius:50%; background:#8FA3AD; animation: blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
.wa-foot { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#1F2C34; }
.wa-foot .fakeinput { flex:1; background:#0B141A; color:#8FA3AD; border-radius:18px; padding:9px 14px; font-size:.78rem; }
.wa-foot .mic { width:36px; height:36px; border-radius:50%; background:#00A884; color:#05030c; display:grid; place-items:center; flex:0 0 auto; }
.demo-note { text-align:center; color:var(--muted); font-size:.78rem; margin-top:14px; opacity:.8; }

@media (max-width: 880px) {
  .bot-feature { grid-template-columns: 1fr; padding: 36px 22px; gap: 36px; }
  .phone { order:-1; }
}

/* =================== FOOTER =================== */
.footer { border-top: 1px solid var(--border); padding: 50px 0 40px; margin-top: 40px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer h4 { font-size: 1.1rem; margin-bottom: 8px; }
.footer p, .footer a { color: var(--muted); font-size: 0.92rem; text-decoration: none; }
.footer a:hover { color: var(--cyan); }
.footer .col { display: grid; gap: 8px; align-content: start; }
.footer .copy { margin-top: 30px; color: var(--muted); font-size: 0.82rem; text-align: center; opacity: .7; }

/* =================== REVEAL ANIM =================== */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* =================== RESPONSIVE =================== */
@media (max-width: 880px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    background: rgba(5,3,12,0.96); backdrop-filter: blur(20px); padding: 16px 24px; gap: 4px;
    border-bottom: 1px solid var(--border); transform: translateY(-130%); transition: transform .3s ease; }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 14px; }
  .burger { display: flex; }
  .footer-inner { flex-direction: column; }
  section { padding: 64px 0; }
  .cta-banner { padding: 44px 24px; }
}

/* =========================================================
   PREMIUM LAYER — curseur, spotlight, tilt, sheen, halos
   ========================================================= */

/* ---- Barre de progression de scroll ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--pink));
  box-shadow: 0 0 12px var(--glow-cyan);
  transition: width .1s linear;
}

/* ---- Hero : halo conique animé + spotlight souris ---- */
.hero { overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -30%; right: -10%; width: 620px; height: 620px; max-width: 90vw;
  background: conic-gradient(from 0deg, var(--violet), var(--cyan), var(--pink), var(--violet));
  filter: blur(90px); opacity: .35; border-radius: 50%;
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(280px 280px at var(--mx, 70%) var(--my, 30%), rgba(25,227,255,0.14), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
.hero:hover::after { opacity: 1; }

/* ---- Titre : shimmer du dégradé ---- */
.grad-text {
  background-size: 220% auto;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---- Cards : tilt 3D + sheen au survol ---- */
.grid { perspective: 1200px; }
.card { transform-style: preserve-3d; }
.card > * { position: relative; z-index: 1; }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius);
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .7s ease; pointer-events: none;
}
.card:hover::after { transform: translateX(120%); }
.card .ic { transition: transform .3s ease; }
.card:hover .ic { transform: translateY(-3px) scale(1.06) rotate(-3deg); }

/* ---- CTA primaire : balayage lumineux ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
}
.btn-primary:hover::after { left: 130%; }

/* ---- Nav : soulignement animé au survol ---- */
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav-links a:not(.nav-cta):hover::before { transform: scaleX(1); }

/* ---- FAB : anneau pulsé ---- */
.bot-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--glow-violet); animation: ring 2.6s ease-out infinite;
}
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(139,92,255,.5); } 100% { box-shadow: 0 0 0 22px rgba(139,92,255,0); } }

/* ---- Préchargement ---- */
.preloader {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: var(--bg); transition: opacity .6s ease, visibility .6s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader .eq { display: flex; gap: 6px; align-items: flex-end; height: 46px; }
.preloader .eq i { width: 6px; border-radius: 3px; background: linear-gradient(var(--cyan), var(--violet));
  animation: eq 1s ease-in-out infinite; }
.preloader .eq i:nth-child(2){ animation-delay:.15s } .preloader .eq i:nth-child(3){ animation-delay:.3s }
.preloader .eq i:nth-child(4){ animation-delay:.45s } .preloader .eq i:nth-child(5){ animation-delay:.6s }
@keyframes eq { 0%,100% { height: 12px; } 50% { height: 44px; } }

/* ---- Respect prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .hero::before { animation: none; }
  .reveal { opacity: 1; transform: none; }
}