/* ============================================================================
   SONCRUSH — LANDING (page visiteur)
   S'appuie sur les tokens du design system. Aucune couleur en dur hors marque.
   ============================================================================ */

/* --- Navbar --- */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  transition: background var(--dur-std) var(--ease), backdrop-filter var(--dur-std) var(--ease), box-shadow var(--dur-std) var(--ease);
}
.lp-nav.scrolled {
  background: rgba(13, 13, 15, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lp-nav__brand { display: inline-flex; align-items: center; }
.lp-nav__brand img { height: 56px; width: auto; display: block; }
@media (max-width: 640px) { .lp-nav__brand img { height: 46px; } }
.lp-nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
.lp-nav__actions .btn { height: 42px; }
@media (max-width: 640px) { .lp-nav__link-login { display: none; } }

/* --- Hero --- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px var(--sp-6) var(--sp-16);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(255, 62, 127, 0.25), transparent 60%),
    radial-gradient(90% 70% at 10% 90%, rgba(212, 175, 55, 0.14), transparent 55%),
    var(--sc-black);
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: url('../img/favicon/android-chrome-512x512.png') center/min(420px,60%) no-repeat;
  opacity: 0.05; filter: blur(1px);
}
.hero__grid {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: var(--sp-12);
  align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.1fr 0.9fr; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: var(--border-soft);
  font-size: var(--fs-sm); color: var(--sc-grey); margin-bottom: var(--sp-6);
}
.hero__title {
  font-size: clamp(38px, 8vw, var(--fs-3xl));
  line-height: 1.05; margin-bottom: var(--sp-4);
}
.hero__subtitle { font-size: var(--fs-md); color: var(--sc-grey); max-width: 520px; margin-bottom: var(--sp-8); }
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.hero__trust { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-6); color: var(--sc-grey); font-size: var(--fs-sm); }
.hero__trust .avatars { display: flex; }
.hero__trust .avatars span {
  width: 30px; height: 30px; border-radius: 50%; margin-left: -8px;
  border: 2px solid var(--sc-black); background: var(--grad-crush);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

/* Mockup téléphone flottant */
.phone-wrap { display: flex; justify-content: center; perspective: 1200px; }
.phone {
  position: relative; width: 300px; max-width: 80vw; aspect-ratio: 9 / 19;
  background: #050506; border-radius: 44px;
  border: 10px solid #16161c;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), var(--shadow-glow-rose);
  transform: rotateY(-14deg) rotateX(4deg) rotateZ(1deg);
  animation: floaty 6s ease-in-out infinite;
  overflow: hidden;
}
@keyframes floaty { 0%, 100% { transform: rotateY(-14deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-14deg) rotateX(4deg) translateY(-14px); } }
.phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; background: #050506; border-radius: 0 0 14px 14px; z-index: 5; }
.phone__screen { position: absolute; inset: 0; }
.phone__screen .profile-card { border-radius: 34px; height: 100%; }

/* --- Sections génériques --- */
.section { padding: var(--sp-16) var(--sp-6); max-width: 1200px; margin: 0 auto; }
.section__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-12); }
.section__eyebrow { color: var(--sc-gold); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.section__title { font-size: clamp(28px, 5vw, var(--fs-2xl)); margin: var(--sp-2) 0; }
.section__sub { color: var(--sc-grey); }

/* --- Comment ça marche (3 étapes) --- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: var(--sp-8); position: relative; text-align: center; }
.step__num {
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--grad-crush);
  font-family: var(--font-title); font-size: var(--fs-xl); font-weight: 700;
  box-shadow: var(--shadow-glow-rose);
}
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.step p { color: var(--sc-grey); font-size: var(--fs-sm); }

/* --- Chiffres animés --- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: var(--sp-6); }
.stat__value { font-family: var(--font-title); font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--sc-grey); font-size: var(--fs-sm); margin-top: 4px; }

/* --- Témoignages glassmorphism --- */
.testimonials { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 800px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testi { padding: var(--sp-6); }
.testi__stars { color: var(--sc-gold); margin-bottom: var(--sp-3); letter-spacing: 2px; }
.testi__text { font-size: var(--fs-md); line-height: 1.6; margin-bottom: var(--sp-4); }
.testi__author { display: flex; align-items: center; gap: var(--sp-3); }
.testi__author .ava { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-crush); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.testi__author .name { font-weight: 600; }
.testi__author .loc { color: var(--sc-grey); font-size: var(--fs-xs); }

/* --- CTA final --- */
.cta-band {
  margin: var(--sp-16) var(--sp-6); max-width: 1000px; margin-left: auto; margin-right: auto;
  padding: var(--sp-16) var(--sp-8); text-align: center; border-radius: var(--r-modal);
  background: var(--grad-crush); position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.cta-band h2 { font-size: clamp(28px, 5vw, var(--fs-2xl)); color: #fff; margin-bottom: var(--sp-3); position: relative; }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin-bottom: var(--sp-6); position: relative; }
.cta-band .btn { position: relative; }

/* --- Footer --- */
.lp-footer { border-top: var(--border-soft); padding: var(--sp-12) var(--sp-6) var(--sp-8); }
.lp-footer__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
@media (min-width: 800px) { .lp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.lp-footer__logo { height: 64px; width: auto; margin-bottom: var(--sp-3); }
.lp-footer h4 { font-family: var(--font-body); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-grey); margin-bottom: var(--sp-3); }
.lp-footer a { display: block; color: var(--sc-grey); padding: 4px 0; transition: color var(--dur-std) var(--ease); }
.lp-footer a:hover { color: var(--sc-white); }
.lp-footer__brand { font-family: var(--font-title); font-size: var(--fs-lg); }
.lp-footer__bottom { max-width: 1200px; margin: var(--sp-8) auto 0; padding-top: var(--sp-6); border-top: var(--border-hair); color: var(--sc-grey-2); font-size: var(--fs-xs); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }

/* --- Révélation au scroll (amélioration progressive) ---
   Le contenu est visible par défaut. Il n'est masqué pour animation QUE si le JS
   est actif (classe .js-anim posée avant le rendu). Sans JS : tout reste visible. */
.reveal { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-anim .reveal { opacity: 0; transform: translateY(24px); }
.js-anim .reveal.in { opacity: 1; transform: none; }
/* Sécurité mouvement réduit : pas de masquage. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; }
}