/* ========================================
   ATMOSPHÈRES
======================================== */

.atmosphere-neutral,
.atmosphere-eveil,
.atmosphere-clarte {

    position: relative;
    overflow: hidden;
    isolation: isolate;

}
/* ========================================
   NIVEAU 0 — Neutre
   Usage : Sections simples
======================================== */

.atmosphere-neutral{

    background:#fff;

}

/* ========================================
   NIVEAU 1 — ÉVEIL
   Usage : Hero et sections importantes
======================================== */

.atmosphere-eveil {
  background:
    radial-gradient(
      circle at 8% 28%,
      rgba(240, 90, 40, 0.10),
      transparent 36%
    ),
    radial-gradient(
      circle at 90% 68%,
      rgba(32, 184, 208, 0.08),
      transparent 34%
    ),
    var(--color-white);
}

/* Vague chaude */

.atmosphere-eveil::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: -58vw;
  top: 28%;

  width: 120vw;
  height: 60%;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      transparent 8%,
      rgba(255, 255, 255, 0.95) 38%,
      rgba(255, 239, 214, 0.72) 48%,
      rgba(240, 90, 40, 0.12) 64%,
      transparent 82%
    );

  opacity: 0.55;
  filter: blur(1px);

  transform: rotate(18deg);

  pointer-events: none;
}

/* Vague froide */

.atmosphere-eveil::after {
  content: "";

  position: absolute;
  z-index: -1;

  right: -60vw;
  bottom: -2%;

  width: 120vw;
  height: 60%;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      transparent 8%,
      rgba(255, 255, 255, 0.95) 38%,
      rgba(222, 247, 252, 0.72) 50%,
      rgba(32, 184, 208, 0.14) 66%,
      transparent 84%
    );

  opacity: 0.55;
  filter: blur(1px);

  transform: rotate(-18deg);

  pointer-events: none;
}

/* ------------------------------------------------------
   Atmosphère — Analyse
------------------------------------------------------ */

.atmosphere-analyse {
  position: relative;
  overflow: hidden;

  background:
    repeating-radial-gradient(
      ellipse at 4% 42%,
      transparent 0 72px,
      rgba(255, 255, 255, 0.52) 73px 75px,
      transparent 76px 132px
    ),
    repeating-radial-gradient(
      ellipse at 102% 38%,
      transparent 0 92px,
      rgba(255, 255, 255, 0.46) 93px 95px,
      transparent 96px 166px
    ),
    radial-gradient(
      ellipse at 10% 18%,
      rgba(253, 195, 0, 0.24) 0%,
      rgba(253, 195, 0, 0.11) 30%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 50% 96%,
      rgba(86, 197, 84, 0.18) 0%,
      rgba(86, 197, 84, 0.08) 32%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 94% 22%,
      rgba(106, 184, 255, 0.22) 0%,
      rgba(106, 184, 255, 0.09) 34%,
      transparent 62%
    ),
    linear-gradient(
      135deg,
      #fffdf3 0%,
      #f8fdf6 50%,
      #f2faff 100%
    );

  background-size:
    125% 145%,
    125% 145%,
    auto,
    auto,
    auto,
    auto;

  background-position:
    -12% 12%,
    112% 2%,
    center,
    center,
    center,
    center;
}

.atmosphere-analyse > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 780px) {
  .atmosphere-analyse {
    background-size:
      175% 145%,
      175% 145%,
      auto,
      auto,
      auto,
      auto;
  }
}