/* ============================================================
   TikLive — Animation Layer (additive, non-destructive)
   ============================================================ */

/* Respecte les préférences accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- REVEAL ON SCROLL (renforcé + variantes) ---------- */
.reveal-on-scroll,
.anim-up, .anim-left, .anim-right, .anim-zoom {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.anim-up    { transform: translateY(40px); }
.anim-left  { transform: translateX(-40px); }
.anim-right { transform: translateX(40px); }
.anim-zoom  { transform: scale(.9); }

.reveal-on-scroll.revealed,
.anim-up.revealed, .anim-left.revealed, .anim-right.revealed, .anim-zoom.revealed {
  opacity: 1;
  transform: none;
}

/* Délais en cascade (stagger) */
.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.stagger.revealed > * { opacity: 1; transform: none; }
.stagger.revealed > *:nth-child(1){ transition-delay:.05s }
.stagger.revealed > *:nth-child(2){ transition-delay:.12s }
.stagger.revealed > *:nth-child(3){ transition-delay:.19s }
.stagger.revealed > *:nth-child(4){ transition-delay:.26s }
.stagger.revealed > *:nth-child(5){ transition-delay:.33s }
.stagger.revealed > *:nth-child(6){ transition-delay:.40s }
.stagger.revealed > *:nth-child(7){ transition-delay:.47s }
.stagger.revealed > *:nth-child(8){ transition-delay:.54s }

/* ---------- TILT 3D (cartes) ---------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
  will-change: transform;
}
.tilt:hover { box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(255,0,80,.10); }
.tilt .tilt-inner { transform: translateZ(24px); }

/* ---------- GLOW BOUTONS ---------- */
.btn-primary, .btn-cta, .btn-nav {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .3s ease, filter .3s ease;
}
.btn-primary:hover, .btn-cta:hover, .btn-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,0,80,.45), 0 0 50px rgba(255,0,80,.20);
  filter: brightness(1.08);
}
/* Reflet qui balaye le bouton */
.btn-primary::after, .btn-cta::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn-primary:hover::after, .btn-cta:hover::after { left: 140%; }

/* ---------- TEXTE GRADIENT ANIMÉ ---------- */
.gradient-text, .highlight-text {
  background-size: 200% auto;
  animation: gradient-pan 6s linear infinite;
}
@keyframes gradient-pan { to { background-position: 200% center; } }

/* ---------- FLOAT léger (badges / icônes) ---------- */
.float { animation: float-soft 5s ease-in-out infinite; }
@keyframes float-soft { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* ---------- COMPTEURS ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- BARRE STATS (preuve sociale) ---------- */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--j-border, #1e2030);
  border: 1px solid var(--j-border, #1e2030);
  border-radius: 12px; overflow: hidden;
  max-width: 900px; margin: -2rem auto 0;
}
.stats-strip .stat {
  background: var(--j-bg-card, #0f1117);
  padding: 1.6rem 1rem; text-align: center;
}
.stats-strip .stat-num {
  font-family: var(--font-hud, 'Orbitron', sans-serif);
  font-size: 2rem; font-weight: 800; color: var(--j-text-bright, #fff);
  text-shadow: 0 0 24px rgba(255,0,80,.25);
}
.stats-strip .stat-num .suffix { color: var(--j-red, #ff0050); }
.stats-strip .stat-label {
  font-family: var(--font-mono, monospace); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--j-text-dim, #8b949e); margin-top: .4rem;
}
@media (max-width: 640px){ .stats-strip{ grid-template-columns: repeat(2,1fr); margin-top: 1rem; } }

/* ---------- LIVE: bandeau d'accroche dans le hero ---------- */
.hero-live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 1.25rem; padding: 7px 14px;
  background: rgba(255,0,80,.08); border: 1px solid rgba(255,0,80,.25);
  border-radius: 100px; font-size: .8rem; color: #fff; font-weight: 600;
  cursor: pointer; transition: background .2s, transform .2s; text-decoration: none;
}
.hero-live-pill:hover { background: rgba(255,0,80,.16); transform: translateY(-1px); }
.hero-live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff0050; box-shadow: 0 0 8px #ff0050; animation: blink-live 1.4s ease-in-out infinite; }
@keyframes blink-live { 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* Attire l'oeil sur le widget live quand il y a du monde */
.live-widget.has-live .live-widget-toggle {
  animation: live-attract 2.2s ease-in-out infinite;
  border-color: rgba(255,0,80,.5);
}
@keyframes live-attract {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.4); }
  50%     { box-shadow: 0 4px 24px rgba(255,0,80,.5), 0 0 36px rgba(255,0,80,.25); }
}

/* ============ FEATURES GRID (refonte) ============ */
.section-kicker { display:inline-flex; align-items:center; gap:8px; background:rgba(255,0,80,.07); border:1px solid rgba(255,0,80,.22); border-radius:100px; padding:6px 16px; font-family:var(--font-mono,monospace); font-size:11px; color:var(--j-red,#ff0050); text-transform:uppercase; letter-spacing:.12em; margin-bottom:18px; }
.section-kicker .d { width:6px; height:6px; border-radius:50%; background:var(--j-red,#ff0050); box-shadow:0 0 10px var(--j-red,#ff0050); animation:blink-live 1.6s ease-in-out infinite; }
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.25rem; }
.feat-card { position:relative; background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:16px; padding:1.8rem; overflow:hidden; transition:border-color .3s, transform .25s, box-shadow .25s; }
.feat-card::before { content:""; position:absolute; inset:0; background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), var(--glow,rgba(255,0,80,.12)), transparent 60%); opacity:0; transition:opacity .35s; pointer-events:none; }
.feat-card:hover::before { opacity:1; }
.feat-card:hover { border-color:var(--accent,rgba(255,0,80,.4)); box-shadow:0 16px 44px rgba(0,0,0,.4); }
.feat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.feat-ico { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--icobg,rgba(255,0,80,.1)); border:1px solid var(--icobd,rgba(255,0,80,.22)); }
.feat-num { font-family:var(--font-mono,monospace); font-size:12px; color:var(--j-text-dim,#6e7681); letter-spacing:.1em; }
.feat-card h3 { font-family:var(--font-hud,"Orbitron",sans-serif); font-size:1.15rem; color:var(--j-text-bright,#fff); margin:0 0 .5rem; }
.feat-card p { color:var(--j-text-dim,#8b949e); line-height:1.65; font-size:.92rem; margin:0 0 1.2rem; }
.feat-tag { display:inline-block; font-family:var(--font-mono,monospace); font-size:10px; letter-spacing:.12em; padding:4px 10px; border-radius:6px; background:var(--tagbg,rgba(255,0,80,.08)); color:var(--accent,#ff0050); }

/* ============ CTA banner glow ============ */
.cta-banner { position:relative; overflow:hidden; }
.cta-banner::after { content:""; position:absolute; inset:-2px; background:conic-gradient(from 0deg, transparent, rgba(255,0,80,.25), transparent 30%); animation:cta-rotate 8s linear infinite; pointer-events:none; z-index:0; }
.cta-banner > * { position:relative; z-index:1; }
@keyframes cta-rotate { to { transform:rotate(360deg); } }

/* ============ About reveal accent ============ */
#about .about-card { position:relative; overflow:hidden; }
#about .about-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,#ff0050,#00e5ff,#a78bfa); background-size:200% auto; animation:gradient-pan 5s linear infinite; }

/* ============ TESTIMONIALS (refonte) ============ */
.tm-summary { display:inline-flex; align-items:center; gap:20px; background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:14px; padding:14px 24px; margin:0 auto 2.5rem; }
.tm-score { font-family:var(--font-hud,"Orbitron",sans-serif); font-size:2.1rem; font-weight:800; color:#fff; line-height:1; }
.tm-score small { font-size:1rem; color:var(--j-text-dim,#8b949e); font-weight:400; }
.tm-stars { color:#ffd700; font-size:1rem; letter-spacing:3px; margin-top:6px; }
.tm-meta { font-family:var(--font-mono,monospace); font-size:.7rem; color:var(--j-text-dim,#8b949e); text-transform:uppercase; letter-spacing:.08em; margin-top:5px; }
.tm-divider { width:1px; height:42px; background:var(--j-border,#1e2030); }
.tm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,360px)); gap:1.25rem; justify-content:center; }
.tm-card { position:relative; background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:16px; padding:1.9rem; text-align:left; transition:border-color .3s, transform .25s, box-shadow .25s; }
.tm-card:hover { border-color:rgba(255,0,80,.35); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.tm-quote { position:absolute; top:10px; right:22px; font-family:Georgia,serif; font-size:4rem; line-height:1; color:rgba(255,0,80,.13); }
.tm-text { color:var(--j-text,#c9d1d9); line-height:1.72; font-size:.98rem; margin:0 0 1.5rem; position:relative; z-index:1; }
.tm-author { display:flex; align-items:center; gap:12px; }
.tm-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#ff0050,#ff1a80); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; overflow:hidden; flex-shrink:0; }
.tm-avatar img { width:100%; height:100%; object-fit:cover; }
.tm-name { font-weight:700; color:var(--j-text-bright,#fff); font-size:.92rem; }
.tm-stars2 { color:#ffd700; font-size:.78rem; letter-spacing:1px; }
.tm-verified { display:inline-flex; align-items:center; gap:4px; font-size:.68rem; color:#00ff88; font-family:var(--font-mono,monospace); margin-top:3px; }

/* ============ CTA pro ============ */
.cta2 { position:relative; overflow:hidden; text-align:center; background:radial-gradient(120% 120% at 50% 0%, rgba(255,0,80,.10), transparent 55%), var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:24px; padding:3.6rem 2rem; }
.cta2-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono,monospace); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--j-red,#ff0050); margin-bottom:18px; }
.cta2 h2 { font-family:var(--font-hud,"Orbitron",sans-serif); font-size:clamp(1.8rem,4vw,2.6rem); color:#fff; margin:0 0 14px; }
.cta2 > p { color:var(--j-text-dim,#8b949e); max-width:540px; margin:0 auto 2rem; line-height:1.7; }
.cta2-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta2-reassure { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:2rem; font-size:.82rem; color:var(--j-text-dim,#8b949e); }
.cta2-reassure span { display:inline-flex; align-items:center; gap:7px; }
.cta2-reassure svg { color:#00ff88; flex-shrink:0; }

/* ============ ABOUT pro ============ */
.about2 { display:grid; grid-template-columns:1.1fr .9fr; gap:2.6rem; align-items:center; max-width:980px; margin:0 auto; text-align:left; }
.about2-note p { color:var(--j-text-dim,#8b949e); line-height:1.85; margin:0 0 1rem; }
.about2-values { display:flex; flex-direction:column; gap:14px; }
.about2 .av { display:flex; gap:14px; align-items:flex-start; background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:12px; padding:16px 18px; transition:border-color .3s, transform .25s; }
.about2 .av:hover { border-color:rgba(0,229,255,.35); transform:translateX(4px); }
.about2 .av-ico { width:40px; height:40px; border-radius:10px; background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; }
.about2 .av-t { font-weight:700; color:var(--j-text-bright,#fff); font-size:.92rem; }
.about2 .av-d { color:var(--j-text-dim,#8b949e); font-size:.82rem; margin-top:2px; }
@media (max-width:780px){ .about2 { grid-template-columns:1fr; gap:1.6rem; } }

/* ============ RESPONSIVE GLOBAL ============ */
.launcher-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media (max-width:900px){
  .launcher-grid { grid-template-columns:1fr; gap:2.5rem; }
  .about2 { grid-template-columns:1fr; gap:1.6rem; }
}
@media (max-width:768px){
  section { padding-top:3.2rem !important; padding-bottom:3.2rem !important; }
  .container { padding-left:1.1rem; padding-right:1.1rem; }
  .feat-grid, .tm-grid { grid-template-columns:1fr; }
  .tm-grid { max-width:420px; margin:0 auto; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .cta2 { padding:2.4rem 1.2rem; border-radius:18px; }
  .cta2-actions { flex-direction:column; }
  .cta2-actions .btn-primary, .cta2-actions .btn-secondary { width:100%; justify-content:center; }
  .tm-summary { gap:14px; padding:12px 16px; width:100%; max-width:340px; }
  .hero-live-pill { font-size:.74rem; }
}
@media (max-width:420px){
  .stats-strip { grid-template-columns:1fr 1fr; }
  .stats-strip .stat-num { font-size:1.6rem; }
  .feat-card, .tm-card { padding:1.4rem; }
}
/* Images & médias ne débordent jamais */
img, svg, video, canvas { max-width:100%; }
.hero-content { max-width:100%; }

/* ============ APP SHOWCASE (galerie launcher) ============ */
.app-shot { width:100%; }
.app-window { background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:12px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.app-bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--j-border,#1e2030); }
.app-bar span { width:11px; height:11px; border-radius:50%; background:#2b3040; }
.app-bar span:nth-child(1){ background:#ff5f57; }
.app-bar span:nth-child(2){ background:#febc2e; }
.app-bar span:nth-child(3){ background:#28c840; }
.app-bar em { margin-left:10px; font-family:var(--font-mono,monospace); font-size:11px; color:var(--j-text-dim,#6e7681); font-style:normal; letter-spacing:.08em; }
.app-window img { display:block; width:100%; height:auto; }
.app-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.app-thumb { font-family:var(--font-mono,monospace); font-size:11px; letter-spacing:.05em; color:var(--j-text-dim,#8b949e); background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:8px; padding:7px 12px; cursor:pointer; transition:all .2s; }
.app-thumb:hover { color:#fff; border-color:rgba(255,0,80,.35); }
.app-thumb.active { color:#fff; background:rgba(255,0,80,.12); border-color:var(--j-red,#ff0050); }

/* ============ HERO TRUST BADGE ============ */
.hero-trust { display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; padding:6px 16px 6px 8px; background:rgba(255,255,255,.03); border:1px solid var(--j-border,#1e2030); border-radius:100px; }
.trust-avatars { display:flex; }
.trust-avatars span { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--j-bg-card,#0f1117); border:2px solid var(--j-bg,#030712); margin-left:-10px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.trust-avatars span:first-child { margin-left:0; }
.trust-text { font-size:.85rem; color:var(--j-text-dim,#c9d1d9); white-space:nowrap; }
.trust-text strong { color:var(--j-text-bright,#fff); font-family:var(--font-hud,"Orbitron",sans-serif); }
@media (max-width:480px){ .trust-text { font-size:.76rem; white-space:normal; } }

/* ============ HERO 2 COLONNES (refonte) ============ */
.hero { min-height:100vh; }
.hero-grid { position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; padding:6rem 0 3rem; }
.hero-col-text { text-align:left; }
.hero-col-text .hero-badge { margin-bottom:22px; }
.hero-col-text h1 { font-size:clamp(2.4rem,4.5vw,4rem); font-weight:800; line-height:1.04; letter-spacing:-.02em; margin-bottom:22px; }
.hero-col-text p { font-size:clamp(1rem,1.4vw,1.18rem); color:var(--j-text-dim,#8b949e); max-width:520px; margin:0 0 32px; line-height:1.65; }
.hero-col-text .hero-buttons { justify-content:flex-start; }

/* preuve sociale sous les boutons */
.hero-trust { display:inline-flex; align-items:center; gap:12px; margin-top:26px; }
.hero-trust .trust-avatars { display:flex; }
.hero-trust .trust-avatars span { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--j-bg-card,#0f1117); border:2px solid var(--j-bg,#030712); margin-left:-11px; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.hero-trust .trust-avatars span:first-child { margin-left:0; }
.hero-trust .trust-text { font-size:.88rem; color:var(--j-text-dim,#c9d1d9); }
.hero-trust .trust-text strong { color:#fff; font-family:var(--font-hud,"Orbitron",sans-serif); }

/* fenêtre app à droite */
.hero-col-visual { position:relative; }
.hero-app-window { background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,0,80,.08); transform:perspective(1400px) rotateY(-7deg) rotateX(2deg); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.hero-col-visual:hover .hero-app-window { transform:perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-4px); }
.hero-app-window .app-bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--j-border,#1e2030); }
.hero-app-window .app-bar span { width:11px; height:11px; border-radius:50%; background:#2b3040; }
.hero-app-window .app-bar span:nth-child(1){ background:#ff5f57; }
.hero-app-window .app-bar span:nth-child(2){ background:#febc2e; }
.hero-app-window .app-bar span:nth-child(3){ background:#28c840; }
.hero-app-window .app-bar em { margin-left:10px; font-family:var(--font-mono,monospace); font-size:11px; color:var(--j-text-dim,#6e7681); font-style:normal; letter-spacing:.08em; }
.hero-app-window img { display:block; width:100%; height:auto; }

/* cartes flottantes */
.hero-float { position:absolute; display:flex; align-items:center; gap:10px; background:rgba(15,17,23,.92); backdrop-filter:blur(8px); border:1px solid var(--j-border,#1e2030); border-radius:12px; padding:10px 14px; box-shadow:0 12px 36px rgba(0,0,0,.5); }
.hero-float .hf-ico { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.hero-float .hf-t { font-size:.82rem; font-weight:700; color:#fff; }
.hero-float .hf-d { font-size:.7rem; color:var(--j-text-dim,#8b949e); }
.hero-float-1 { top:14%; left:-26px; animation:float-soft 4.5s ease-in-out infinite; }
.hero-float-2 { bottom:16%; right:-22px; animation:float-soft 5.5s ease-in-out infinite .6s; }

@media (max-width:960px){
  .hero-grid { grid-template-columns:1fr; gap:2.2rem; text-align:center; padding:7rem 0 3rem; }
  .hero-col-text { text-align:center; }
  .hero-col-text p { margin-left:auto; margin-right:auto; }
  .hero-col-text .hero-buttons { justify-content:center; }
  .hero-trust { margin-left:auto; margin-right:auto; }
  .hero-app-window { transform:none; max-width:560px; margin:0 auto; }
  .hero-col-visual:hover .hero-app-window { transform:translateY(-4px); }
  .hero-float-1 { left:0; }
  .hero-float-2 { right:0; }
}
@media (max-width:560px){
  .hero-float { display:none; }
}

/* ============ HERO LIVE SIMULATION ============ */
.live-sim { position:relative; max-width:380px; margin:0 auto; }
.ls-screen { position:relative; aspect-ratio:9/14; background:linear-gradient(165deg,#15101c,#0a0a12 60%); border:1px solid var(--j-border,#1e2030); border-radius:26px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 60px rgba(255,0,80,.10); }
.ls-top { position:absolute; top:0; left:0; right:0; z-index:4; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; }
.ls-live { display:inline-flex; align-items:center; gap:6px; background:#ff0050; color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em; padding:4px 10px; border-radius:6px; }
.ls-dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:blink-live 1.2s ease-in-out infinite; }
.ls-viewers { display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); color:#fff; font-size:12px; padding:4px 10px; border-radius:6px; }
.ls-viewers b { font-variant-numeric:tabular-nums; }

.ls-stage { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ls-trigger { position:absolute; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(255,0,80,.5), transparent 70%); opacity:0; transform:scale(.5); }
.ls-trigger.fire { animation:ls-pop .8s ease-out; }
@keyframes ls-pop { 0%{opacity:.9;transform:scale(.4)} 100%{opacity:0;transform:scale(2.2)} }
.ls-avatar { width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#ff0050,#ff7a00); display:flex; align-items:center; justify-content:center; font-size:42px; border:3px solid rgba(255,255,255,.15); box-shadow:0 0 30px rgba(255,0,80,.4); z-index:2; transition:transform .2s; }
.ls-avatar.bump { transform:scale(1.12); }
.ls-handle { margin-top:12px; font-weight:700; color:#fff; font-size:14px; z-index:2; }
.ls-stats { display:flex; gap:18px; margin-top:16px; z-index:2; }
.ls-stat { display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); padding:6px 12px; border-radius:20px; }
.ls-stat .ls-ico { font-size:14px; }
.ls-stat b { color:#fff; font-size:14px; font-variant-numeric:tabular-nums; }

.ls-hearts { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ls-heart { position:absolute; bottom:90px; font-size:22px; animation:ls-rise 2.6s ease-out forwards; }
@keyframes ls-rise { 0%{opacity:0;transform:translateY(0) scale(.6)} 12%{opacity:1} 100%{opacity:0;transform:translateY(-220px) translateX(var(--dx,0)) scale(1.1)} }

/* flux events en bas */
.ls-feed { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:12px; display:flex; flex-direction:column; gap:7px; }
.ls-msg { display:flex; align-items:center; gap:9px; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); border-radius:10px; padding:7px 11px; transform:translateX(-110%); opacity:0; }
.ls-msg.in { animation:ls-slide .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ls-slide { to{transform:translateX(0);opacity:1} }
.ls-msg-av { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; background:rgba(255,255,255,.1); flex-shrink:0; }
.ls-msg-txt { font-size:12px; color:#e6edf3; line-height:1.3; }
.ls-msg-txt b { color:#fff; }
.ls-msg-tag { margin-left:auto; font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; flex-shrink:0; }

/* bandeau action déclenchée */
.ls-action { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 16px; background:var(--j-bg-card,#0f1117); border:1px solid var(--j-border,#1e2030); border-radius:12px; transition:border-color .3s, background .3s; }
.ls-action.fire { border-color:var(--j-red,#ff0050); background:rgba(255,0,80,.08); }
.ls-action-ico { font-size:18px; }
.ls-action.fire .ls-action-ico { animation:ls-zap .5s ease; }
@keyframes ls-zap { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4) rotate(-12deg)} }
.ls-action-txt { font-size:13px; color:var(--j-text,#c9d1d9); font-weight:600; }
.ls-action.fire .ls-action-txt { color:#fff; }

@media (max-width:560px){ .live-sim { max-width:320px; } }

/* ============ HERO CLEAN (final) ============ */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; }
.hero-inner { position:relative; z-index:2; max-width:840px; margin:0 auto; text-align:center; padding:7rem 1.5rem 4rem; }
.hero-inner .hero-badge { margin-bottom:26px; }
.hero-inner h1 { font-family:var(--font-hud,"Orbitron",sans-serif); font-size:clamp(2.6rem,6.5vw,5rem); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0 0 24px; color:#fff; }
.hero-inner h1 .gradient-text { background:linear-gradient(120deg,#ff0050,#ff7a00); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-inner > p { font-size:clamp(1rem,1.6vw,1.22rem); color:var(--j-text-dim,#8b949e); max-width:620px; margin:0 auto 34px; line-height:1.7; }
.hero-inner .hero-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ligne de réassurance */
.hero-meta { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.hero-meta span { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--j-text-dim,#8b949e); }
.hero-meta svg { color:#00ff88; flex-shrink:0; }

/* preuve sociale */
.hero-trust { display:inline-flex; align-items:center; gap:12px; margin-top:34px; padding:7px 18px 7px 9px; background:rgba(255,255,255,.03); border:1px solid var(--j-border,#1e2030); border-radius:100px; }
.hero-trust .trust-avatars { display:flex; }
.hero-trust .trust-avatars span { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--j-bg-card,#0f1117); border:2px solid var(--j-bg,#030712); margin-left:-11px; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.hero-trust .trust-avatars span:first-child { margin-left:0; }
.hero-trust .trust-text { font-size:.86rem; color:var(--j-text-dim,#c9d1d9); }
.hero-trust .trust-text strong { color:#fff; font-family:var(--font-hud,"Orbitron",sans-serif); }

/* flèche scroll */
.hero-scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:2px solid var(--j-border-strong,#30363d); border-radius:14px; z-index:2; display:flex; justify-content:center; padding-top:7px; }
.hero-scroll span { width:4px; height:8px; border-radius:2px; background:var(--j-red,#ff0050); animation:hero-scroll-dot 1.6s ease-in-out infinite; }
@keyframes hero-scroll-dot { 0%{opacity:0;transform:translateY(-4px)} 50%{opacity:1;transform:translateY(4px)} 100%{opacity:0;transform:translateY(12px)} }
@media (max-width:560px){ .hero-meta { gap:14px 18px; } .hero-scroll { display:none; } }

/* ============ HERO recentrage + trust étoiles ============ */
.hero-inner { padding-top:4rem; padding-bottom:4rem; }
.hero-trust .trust-stars { color:#ffd700; font-size:.95rem; letter-spacing:2px; text-shadow:0 0 10px rgba(255,215,0,.4); }

/* ============ INTRO / OUVERTURE DU SITE ============ */
.site-intro {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:radial-gradient(circle at 50% 45%, #14101e, #030712 70%);
  transition:opacity .6s ease, visibility .6s ease;
}
.site-intro.done { opacity:0; visibility:hidden; }
.intro-logo { display:flex; align-items:center; gap:14px; opacity:0; transform:translateY(14px) scale(.96); animation:intro-in .8s cubic-bezier(.16,1,.3,1) forwards; }
.intro-logo-img { width:54px; height:54px; filter:drop-shadow(0 0 24px rgba(255,0,80,.5)); }
.intro-logo-text { font-family:var(--font-hud,"Orbitron",sans-serif); font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.intro-logo-text span { background:linear-gradient(120deg,#ff0050,#ff7a00); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes intro-in { to{ opacity:1; transform:none; } }
.intro-bar { width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.intro-bar span { display:block; height:100%; width:0; background:linear-gradient(90deg,#ff0050,#ff7a00); border-radius:3px; animation:intro-load 1.5s cubic-bezier(.65,0,.35,1) .25s forwards; }
@keyframes intro-load { to{ width:100%; } }

/* le contenu entre en douceur quand lintro se retire -o/ node_modules/ out/ output/ public/ src-tauri/ src/ vps/

/* ============ HERO recentrage + trust étoiles ============ */
.hero-inner { padding-top: 3rem; padding-bottom: 3rem; }
.hero-trust .trust-stars { color:#ffd700; font-size:.95rem; letter-spacing:2px; text-shadow:0 0 10px rgba(255,215,0,.4); }

/* ============ INTRO / OUVERTURE DU SITE ============ */
.site-intro {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:radial-gradient(circle at 50% 45%, #14101e, #030712 70%);
  transition:opacity .6s ease, visibility .6s ease;
}
.site-intro.done { opacity:0; visibility:hidden; }
.intro-logo { display:flex; align-items:center; gap:14px; opacity:0; transform:translateY(14px) scale(.96); animation:intro-in .8s cubic-bezier(.16,1,.3,1) forwards; }
.intro-logo-img { width:54px; height:54px; filter:drop-shadow(0 0 24px rgba(255,0,80,.5)); }
.intro-logo-text { font-family:var(--font-hud,"Orbitron",sans-serif); font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.intro-logo-text span { background:linear-gradient(120deg,#ff0050,#ff7a00); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes intro-in { to { opacity:1; transform:none; } }
.intro-bar { width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.intro-bar span { display:block; height:100%; width:0; background:linear-gradient(90deg,#ff0050,#ff7a00); border-radius:3px; animation:intro-load 1.5s cubic-bezier(.65,0,.35,1) .25s forwards; }
@keyframes intro-load { to { width:100%; } }

body.intro-active { overflow:hidden; }
.intro-reveal { opacity:0; transform:translateY(20px); }
body.intro-done .intro-reveal { opacity:1; transform:none; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce){ .site-intro { display:none; } }