/* Cirkles — ambiance du fond : grain, halos qui dérivent, trame de points. */

/* Grain fixe sur toute la page (bruit SVG, aucune image à charger). */
.site-grain {
  position: fixed;
  inset: 0;
  z-index: 99; /* sous la barre de navigation (100) */
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Calque décoratif placé en tête des sections blanches. */
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Fondu haut/bas : pas de coupure visible entre deux sections. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}
.has-ambient > :not(.ambient) {
  position: relative;
  z-index: 1;
}
/* Trame de points sous le titre, qui s'estompe vers le bas. */
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.11) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 8%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 45% at 50% 8%, #000 0%, transparent 100%);
}
/* Halos bleu-gris qui dérivent lentement. */
.ambient > span {
  position: absolute;
  width: clamp(320px, 48vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 188, 220, 0.38) 0%, rgba(170, 188, 220, 0.12) 38%, transparent 68%);
  will-change: transform;
}
.ambient > span:nth-child(1) {
  top: -12%;
  left: -14%;
  animation: ambDriftA 26s ease-in-out infinite alternate;
}
.ambient > span:nth-child(2) {
  bottom: -18%;
  right: -16%;
  background: radial-gradient(circle, rgba(196, 204, 222, 0.42) 0%, rgba(196, 204, 222, 0.14) 38%, transparent 68%);
  animation: ambDriftB 32s ease-in-out infinite alternate;
}
.ambient--right > span:nth-child(1) { left: auto; right: -14%; }
.ambient--right > span:nth-child(2) { right: auto; left: -16%; }
@keyframes ambDriftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(12vw, 8vh, 0) scale(1.15); }
}
@keyframes ambDriftB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to { transform: translate3d(-10vw, -10vh, 0) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient > span { animation: none; }
}

/* Globe en points (js/globe.js) */
.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}