/* base.css : variables, reset et styles globaux partagés par toute la page */

:root {
  --bg: #0a0e17;
  --bg-alt: #0f1420;
  --card: #121826;
  --border: #1e2636;
  --cyan: #00d4ff;
  --purple: #7b5cff;
  --star: #ffc94a; /* jaune des étoiles d'avis : volontairement hors palette cyan/violet,
                       c'est la couleur que tout le monde reconnaît pour une note */
  --text: #e6ecf5;
  --text-dim: #8b96ab;
}

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

html {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--purple) var(--bg);
}

::selection { background: rgba(123, 92, 255, 0.35); color: var(--text); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, .price, .cta-btn, .btn-primary, .btn-secondary {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

h1, h2 { letter-spacing: -0.02em; }

/* léger grain par-dessus tout : casse le rendu trop lisse des dégradés */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* mode allégé : activé automatiquement par le watchdog FPS (js/hero-orb.js)
   quand la machine ne tient pas la cadence. On coupe ce qui coûte le plus cher au
   compositing : le grain plein écran et le blur de la nav. */
body.perf-lite::after { display: none; }
body.perf-lite nav {
  backdrop-filter: none;
  background: rgba(10, 14, 23, 0.94);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 999px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }

/* fixed + z-index négatif pour rester derrière tout le contenu sans repousser le scroll */
.glow-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,212,255,0.12), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(123,92,255,0.14), transparent 45%),
    var(--bg);
}

/* apparitions au scroll (classe posée par js/main.js) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pricing-grid .price-card:nth-child(2) { transition-delay: 0.08s; }
.pricing-grid .price-card:nth-child(3) { transition-delay: 0.16s; }
.pricing-grid .price-card:nth-child(4) { transition-delay: 0.24s; }
.pricing-grid .price-card:nth-child(5) { transition-delay: 0.32s; }

.stats-strip .stat:nth-child(2) { transition-delay: 0.07s; }
.stats-strip .stat:nth-child(3) { transition-delay: 0.14s; }
.stats-strip .stat:nth-child(4) { transition-delay: 0.21s; }

.work-grid .work-card:nth-child(2) { transition-delay: 0.08s; }
.work-grid .work-card:nth-child(3) { transition-delay: 0.16s; }
.work-grid .work-card:nth-child(4) { transition-delay: 0.24s; }
.work-grid .work-card:nth-child(5) { transition-delay: 0.32s; }

.why-grid .why-item:nth-child(2) { transition-delay: 0.06s; }
.why-grid .why-item:nth-child(3) { transition-delay: 0.12s; }
.why-grid .why-item:nth-child(4) { transition-delay: 0.18s; }
.why-grid .why-item:nth-child(5) { transition-delay: 0.24s; }

.timeline-step:nth-child(2) { transition-delay: 0.1s; }
.timeline-step:nth-child(3) { transition-delay: 0.2s; }
.timeline-step:nth-child(4) { transition-delay: 0.3s; }

.faq-wrap .faq-item:nth-child(2) { transition-delay: 0.06s; }
.faq-wrap .faq-item:nth-child(3) { transition-delay: 0.12s; }
.faq-wrap .faq-item:nth-child(4) { transition-delay: 0.18s; }