html {
  height: 100%;
  /* conteneur de snapping */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* le body scrolle dans html, mais ne gère pas lui-même le snap */
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: #000;
  overflow-x: hidden;

  /* pour que les sections s’alignent sous le header sticky */
  scroll-padding-top: 80px; /* ajuste si ton header est plus haut/bas */
}



/* Fond galaxie + gradient */

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: -1; /* au-dessus du gradient CSS */
  background: transparent;
}

.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Vraie nuit : noir / bleu profond, reflets violets très légers */
  background:
    radial-gradient(circle at 12% -10%, rgba(70, 60, 160, 0.25), transparent 55%),
    radial-gradient(circle at 88% 0%, rgba(110, 60, 160, 0.23), transparent 55%),
    radial-gradient(circle at -10% 110%, rgba(120, 70, 130, 0.18), transparent 60%),
    radial-gradient(circle at 110% 110%, rgba(70, 90, 170, 0.18), transparent 60%),
    linear-gradient(to bottom, #010007, #000312 40%, #000008 100%);
  pointer-events: none;
}

/* vignette douce pour renforcer la profondeur */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
      circle at 50% 38%,
      transparent 0%,
      transparent 38%,
      rgba(0, 0, 0, 0.5) 100%
    );
}

.page {
  position: relative;
  min-height: 100vh;
}

/* Containers */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(20px);
  background: linear-gradient(
    to bottom,
    rgba(2, 1, 12, 0.98),
    rgba(3, 2, 18, 0.85),
    transparent
  );
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at top left, #ffb347, #ff4b8a);
}

.brand-name {
  font-size: 0.95rem;
}

.nav-main {
  display: flex;
  gap: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.nav-main a:hover {
  color: var(--color-text);
}

.nav-toggle {
  display: none;
  border: 0;
  background: none;
  padding: 0.4rem;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text);
}

/* Sections / slides plein écran */


.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
}

/* Sections génériques */

.section {
  position: relative;
}

/* Footer */

.site-footer {
  scroll-snap-align: end;
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at bottom, #080415, #02000a 70%);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.footer-right {
  display: flex;
  gap: var(--space-4);
}

/* Responsive */

@media (max-width: 880px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 720px) {
  .nav-main {
    position: fixed;
    top: 56px;
    right: var(--space-4);
    left: var(--space-4);
    padding: var(--space-4);
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: rgba(6, 5, 30, 0.96);
    box-shadow: var(--shadow-soft);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-main.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Sections / slides plein écran */
.hero,
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;

  /* scroll-snap : chaque section est un “cran” */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Hero un tout petit peu plus bas à cause du header */
.hero {
  padding-top: 118px;
}

.site-footer {
  scroll-snap-align: end;
  /* ... ton reste de footer ... */
}


.footer-sep {
  opacity: 0.4;
  margin: 0 0.6rem;
}