/* ============================================================
   FOND D'AMBIANCE — taches de couleur floutées derrière le site
   Calque créé par ambient.js, sous le contenu (z-index -1).
   Les cartes et la navbar restent opaques : la couleur se voit
   entre les blocs. La colonne centrale (lecture) est atténuée
   pour garder le contraste du texte posé directement sur le fond.
   ============================================================ */

.ambient {
  --amb-peach: #efb5a3;
  --amb-terracotta: #c9735a;
  --amb-plum: #6e3b4e;
  --amb-blur: 120px;

  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.22,1,.36,1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.6) 72%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.6) 72%, #000 100%);
}
.ambient.is-ready { opacity: 1; }

/* Trois niveaux : parallaxe (JS) › dérive (CSS) › tache floutée (statique, rastérisée une fois) */
.ambient__parallax { position: absolute; inset: 0; will-change: transform; }
.ambient__drift { position: absolute; will-change: transform; animation: 24s ease-in-out infinite; }
.ambient__blob { width: 100%; height: 100%; border-radius: 50%; filter: blur(var(--amb-blur)); }

.ambient__drift--peach {
  top: -14vw;
  left: -12vw;
  width: 52vw;
  height: 52vw;
  opacity: .24;
  animation-name: ambient-drift-a;
  animation-duration: 26s;
}
.ambient__drift--peach .ambient__blob { background: var(--amb-peach); }

.ambient__drift--terracotta {
  top: 34vh;
  right: -16vw;
  width: 44vw;
  height: 44vw;
  opacity: .2;
  animation-name: ambient-drift-b;
  animation-duration: 22s;
  animation-delay: -8s;
}
.ambient__drift--terracotta .ambient__blob { background: var(--amb-terracotta); }

.ambient__drift--plum {
  bottom: -24vw;
  left: 18vw;
  width: 60vw;
  height: 60vw;
  opacity: .3;
  animation-name: ambient-drift-c;
  animation-duration: 29s;
  animation-delay: -15s;
}
.ambient__drift--plum .ambient__blob { background: var(--amb-plum); }

@keyframes ambient-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(7vw, 5vh, 0) scale(1.08); }
  66% { transform: translate3d(-3vw, 10vh, 0) scale(.94); }
}
@keyframes ambient-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(-8vw, -6vh, 0) scale(1.1); }
  70% { transform: translate3d(-3vw, 6vh, 0) scale(.96); }
}
@keyframes ambient-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  30% { transform: translate3d(-6vw, -8vh, 0) scale(.95); }
  65% { transform: translate3d(6vw, -3vh, 0) scale(1.07); }
}

/* Grain très léger par-dessus les taches (bruit SVG en tuile) */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .04;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Mobile : deux taches, flou réduit */
@media (max-width: 768px) {
  .ambient { --amb-blur: 80px; }
  .ambient__drift--terracotta { display: none; }
  .ambient__drift--peach { top: -10vh; left: -20vw; width: 60vw; height: 60vw; opacity: .2; }
  .ambient__drift--plum { top: 55vh; bottom: auto; left: auto; right: -20vw; width: 60vw; height: 60vw; }
}

/* Mouvement réduit : taches fixes */
@media (prefers-reduced-motion: reduce) {
  .ambient__drift { animation: none; }
}