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


:root {
  --color0: 0, 87, 181; /* VMCV bleu */
  --color1: 47, 120, 194; /* 201 - bleu */
  --color2: 217, 156, 194; /* 203 - rose */
  --color3: 219, 145, 64; /* 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-decouverte {
  background: linear-gradient(75deg, rgba(var(--color2), 0.2) 0, rgba(var(--color4), 0.2) 100%) no-repeat;
}

.gradient-bg-header:not(.gradient-bg-header-decouverte ) {
  background: rgb(var(--color0));
}

.gradient-bg-header .gradient1 {
  background: radial-gradient(circle at center, rgba(var(--color1), 1) 0, rgba(var(--color1), 0) 70%) no-repeat;
  top: -50%;
  left: -50%;
  transform-origin: 55% 45%;
  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) 70%) no-repeat;
  bottom: -35%;
  right: -40%;
  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;
}

.gradient-bg-home-decouverte .gradient1 {
  background: radial-gradient(circle at center, rgba(var(--color4), 0.4) 0, rgba(var(--color4), 0) 70%) no-repeat;
  position: relative;
  left: 5%;
  transform-origin: 55% 45%;
  animation: spin 20s linear infinite;
}
.gradient-bg-home-decouverte .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-header-decouverte svg,
.gradient-bg-home-decouverte svg,
.gradient-bg-decouverte svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.wrapper..gradient-bg-home-decouverte {
  overflow: hidden;
}

.gradient-bg-header-decouverte .gradients-container,
.gradient-bg-home-decouverte .gradients-container,
.gradient-bg-decouverte .gradients-container {
  filter: url(#goo) blur(70px);
  width: 100%;
  height: 100%;
  position: absolute;

}

.gradient-bg-home-decouverte .gradient {
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  min-width: 500px;
  aspect-ratio: 1/1;
  border-radius: 100%;
}



.gradient-bg-home-decouverte .gradients-container {
  display: flex;
  justify-content: center;
  align-items: center;
}


.gradient-bg-decouverte {
  background: rgba(var(--color0), 0.13);
}