/* ═══════════════════════════════════════════════════════════════
   FranceConcours — Grille 3D gravitationnelle (HERO)
   Isolé : fc-landing-wave-grid.js + #fc-wave-grid
   ═══════════════════════════════════════════════════════════════ */

#hero.hero-bg {
  position: relative;
  overflow: hidden;
  background: #F8FAFC;
}

.fc-wave-grid {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #F8FAFC;
}

.fc-wave-grid-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.fc-wave-grid-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 42% 40% at 50% 28%,
      rgba(248, 250, 252, 0.88) 0%,
      rgba(248, 250, 252, 0.5) 42%,
      rgba(248, 250, 252, 0.1) 68%,
      transparent 82%
    ),
    linear-gradient(
      180deg,
      rgba(248, 250, 252, 0.15) 0%,
      transparent 14%,
      transparent 76%,
      rgba(248, 250, 252, 0.65) 100%
    );
}

#hero > .hero-copy,
#hero > .fc-wave-grid + * {
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .fc-wave-grid {
    inset: -4% -4%;
  }
  .fc-wave-grid-veil {
    background:
      radial-gradient(
        ellipse 86% 52% at 50% 26%,
        rgba(248, 250, 252, 0.9) 0%,
        rgba(248, 250, 252, 0.6) 48%,
        transparent 78%
      ),
      linear-gradient(
        180deg,
        transparent 68%,
        rgba(248, 250, 252, 0.85) 100%
      );
  }
}