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

.fc-wave-grid {
  position: absolute;
  inset: 0;
  /* Derrière tout le contenu du hero (isolation:isolate sur .hero). */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.fc-wave-grid-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Atténue les traits sous la copie ; le décor reste lisible à droite. */
  opacity: 0.42;
}

/* Voile : atténue la grille sous la colonne texte / zone CTA
   (calendrier, puces, PressReader) sans masquer le décor à droite. */
.fc-wave-grid-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(251, 251, 249, 0.97) 0%,
      rgba(251, 251, 249, 0.92) 34%,
      rgba(251, 251, 249, 0.45) 52%,
      rgba(251, 251, 249, 0.08) 68%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 48% 44% at 42% 32%,
      rgba(251, 251, 249, 0.88) 0%,
      rgba(251, 251, 249, 0.35) 55%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      rgba(251, 251, 249, 0.2) 0%,
      transparent 16%,
      transparent 72%,
      rgba(246, 246, 243, 0.75) 100%
    );
}

/* Contenu hero au-dessus du canvas (l’ancien sélecteur #hero était inopérant). */
.hero > .container,
.hero .hero-inner,
.hero .hero-copy,
.hero .hero-demo,
.hero .hero-bottom,
.hero .hero-interface-strip {
  position: relative;
  z-index: 2;
}

/* Grille CSS plate (traits orthogonaux) en double avec le canvas → retirée. */
.hero:has(> #fc-wave-grid) > .hero-grid {
  display: none;
}

@media (max-width: 900px) {
  .fc-wave-grid-veil {
    background:
      linear-gradient(
        180deg,
        rgba(251, 251, 249, 0.97) 0%,
        rgba(251, 251, 249, 0.93) 38%,
        rgba(251, 251, 249, 0.55) 58%,
        rgba(251, 251, 249, 0.12) 78%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 90% 55% at 50% 18%,
        rgba(251, 251, 249, 0.9) 0%,
        rgba(251, 251, 249, 0.4) 60%,
        transparent 80%
      );
  }
}

@media (max-width: 700px) {
  .fc-wave-grid {
    inset: 0;
  }
}