/* =====================================================================
   mesh.css — Fond "fusion" bleu-blanc-rouge discret
   Mesh gradient radial multi-couches, fixe, sous le contenu.
   Toute intensite/couleur se pilote depuis tokens.css.
   ===================================================================== */

.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 50% at 12% 18%,
      color-mix(in srgb, var(--mesh-bleu) calc(22% * var(--mesh-intensity)), transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 45% at 88% 12%,
      color-mix(in srgb, var(--mesh-rouge) calc(14% * var(--mesh-intensity)), transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 70% 55% at 50% 92%,
      color-mix(in srgb, var(--mesh-bleu) calc(10% * var(--mesh-intensity)), transparent) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 45% 40% at 78% 78%,
      color-mix(in srgb, var(--mesh-rouge) calc(7% * var(--mesh-intensity)), transparent) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, var(--mesh-ivoire) 0%, var(--mesh-creme) 100%);
  opacity: var(--mesh-opacity);
  animation: mesh-drift 32s ease-in-out infinite alternate;
}

@keyframes mesh-drift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 75% 75%, 0 0; }
  100% { background-position: 3% 2%, 97% 4%, 48% 96%, 72% 78%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh-bg { animation: none; }
}

/* Fallback pour navigateurs sans color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
  .mesh-bg {
    background:
      radial-gradient(ellipse 60% 50% at 12% 18%, rgba(30,58,111,0.12) 0%, transparent 60%),
      radial-gradient(ellipse 55% 45% at 88% 12%, rgba(139,46,46,0.08) 0%, transparent 62%),
      radial-gradient(ellipse 70% 55% at 50% 92%, rgba(30,58,111,0.06) 0%, transparent 65%),
      linear-gradient(180deg, #fbfaf6 0%, #f4f0e6 100%);
  }
}