html, body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

:root {
  --color0: 247, 235, 45; /* VMCV bleu */
  --color1: 247, 235, 45; /* 201 - orange */
  --color2: 247, 235, 45; /* 203 - vert */
  --color3: 247, 235, 45; /* 204 - orange */
  --color4: 100, 220, 255; /* 211 - turquoise */
  --circle-size: 80%;
  --blending: overlay; /* soft-light overlay */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.gradient-bg-header,
.gradient-bg-home1,
.gradient-bg-home2,
.gradient-bg-page {
  /* width: 100vw;
  height: 100vh;
  position: relative; */
  overflow: hidden;
  /* background: white;
  top: 0;
  left: 0; */
}

.wrapper.gradient-bg-header {
  width: 100%;
  /* aspect-ratio: 2.2; */
  min-height: 750px;
  max-height: 800px;
}

.wrapper-header.gradient-bg-header {
  width: 100%;
  height: 100%;
}



.gradient-bg-header svg,
.gradient-bg-home1 svg,
.gradient-bg-home2 svg,
.gradient-bg-page svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.gradient-bg-header .gradients-container,
.gradient-bg-home1 .gradients-container,
.gradient-bg-home2 .gradients-container,
.gradient-bg-page .gradients-container {
  filter: url(#goo) blur(70px);
  width: 100%;
  height: 100%;
  position: absolute;
}
.gradient-bg-header .gradient,
.gradient-bg-home1 .gradient,
.gradient-bg-home2 .gradient,
.gradient-bg-page .gradient {
  position: absolute;
  // mix-blend-mode: var(--blending);
  width: var(--circle-size);
  min-width: 500px;
  aspect-ratio: 1/1;
  // border-radius: 100%;
}

.gradient-bg-header .gradient3 {
  width: 500px;
}

.gradient-bg-header .gradient1 {
  width: 1600px;
}

.gradient-bg-header {
  background: white;
}
.gradient-bg-header .gradient1 {
  // background: radial-gradient(circle at center, rgba(var(--color1), 1) 5%, rgba(var(--color1), 0) 80%) no-repeat;
  top: 20%;
  left: 40%;
  transform-origin: 70% 60%;
  animation: spin 20s linear infinite;
}
.gradient-bg-header .gradient2 {
  background: radial-gradient(circle at center, rgba(var(--color4), 0.5) 0, rgba(var(--color4), 0) 70%) no-repeat;
  bottom: -45%;
  right: 5%;
  transform-origin: 45% 55%;
  animation: spin 18s linear reverse infinite;
}
.gradient-bg-header .gradient3 {
background: radial-gradient(circle at center, rgba(var(--color2), 0.6) 0, rgba(var(--color2), 0) 100%) no-repeat;
bottom: 40%;
right: 10%;
transform-origin: 45% 55%;
animation: spin 22s linear infinite;
}

.gradient-bg-home1 .gradients-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gradient-bg-home1 .gradient1 {
  background: radial-gradient(circle at center, rgba(var(--color3), 0.4) 0, rgba(var(--color3), 0) 70%) no-repeat;
  position: relative;
  left: 5%;
  transform-origin: 55% 45%;
  animation: spin 20s linear infinite;
}
.gradient-bg-home1 .gradient2 {
  background: radial-gradient(circle at center, rgba(var(--color2), 0.5) 0, rgba(var(--color2), 0) 70%) no-repeat;
  position: relative;
  right: 5%;
  transform-origin: 45% 55%;
  animation: spin 18s linear reverse infinite;
}
.gradient-bg-home1 .gradient3 {
  background: radial-gradient(circle at center, rgba(var(--color4), 0.4) 0, rgba(var(--color4), 0) 70%) no-repeat;
  top: -50%;
  right: -50%;
  transform-origin: 45% 55%;
  animation: spin 22s linear infinite;
}

.gradient-bg-home2 {
  background: rgba(var(--color0), 0.1);
}
.gradient-bg-home2 .gradient1 {
  background: radial-gradient(circle at center, rgba(var(--color0), 0.3) 0, rgba(var(--color0), 0) 70%) no-repeat;
  bottom: -50%;
  left: -30%;
  transform-origin: 55% 45%;
  animation: spin 20s linear infinite;
}
.gradient-bg-home2 .gradient2 {
  background: radial-gradient(circle at center, rgba(var(--color2), 0.5) 0, rgba(var(--color2), 0) 70%) no-repeat;
  bottom: -45%;
  right: -25%;
  transform-origin: 45% 55%;
  animation: spin 18s linear reverse infinite;
}

.gradient-bg-page .gradient1 {
  background: radial-gradient(circle at center, rgba(var(--color3), 0.5) 0, rgba(var(--color3), 0) 70%) no-repeat;
  bottom: -50%;
  left: -50%;
  transform-origin: 55% 45%;
  animation: spin 20s linear infinite;
}
.gradient-bg-page .gradient2 {
  background: radial-gradient(circle at center, rgba(var(--color2), 0.5) 0, rgba(var(--color2), 0) 70%) no-repeat;
  bottom: -45%;
  right: 5%;
  transform-origin: 45% 55%;
  animation: spin 18s linear reverse infinite;
}
.gradient-bg-page .gradient3 {
  background: radial-gradient(circle at center, rgba(var(--color4), 0.5) 0, rgba(var(--color4), 0) 70%) no-repeat;
  bottom: -35%;
  right: -40%;
  transform-origin: 45% 55%;
  animation: spin 22s linear infinite;
}