:root {
  --site-transition-black: #0a0a0a;
}

#accueil,
#presentation,
#chaos-plus,
#personnage-custom,
#avis-communaute,
#temoignages,
.footer {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

#accueil {
  position: relative;
  isolation: isolate;
}

#accueil::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: clamp(220px, 28vw, 430px);
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.55) 52%, rgba(10, 10, 10, 0.94) 88%, var(--site-transition-black) 100%);
  pointer-events: none;
}

#accueil .hero-content {
  position: relative;
  z-index: 1;
}

#presentation {
  background:
    radial-gradient(ellipse at 22% 48%, rgba(0, 179, 255, 0.24) 0%, rgba(0, 104, 170, 0.12) 32%, transparent 68%),
    radial-gradient(ellipse at 78% 52%, rgba(255, 255, 255, 0.12) 0%, rgba(200, 235, 255, 0.055) 28%, transparent 62%),
    linear-gradient(180deg, var(--site-transition-black) 0%, #0a1016 13%, #08243a 48%, #0c1822 76%, var(--site-transition-black) 100%) !important;
}

#chaos-plus {
  background:
    radial-gradient(ellipse at 24% 48%, rgba(255, 173, 0, 0.22) 0%, rgba(133, 73, 0, 0.1) 31%, transparent 66%),
    radial-gradient(ellipse at 78% 52%, rgba(255, 0, 51, 0.25) 0%, rgba(142, 0, 31, 0.12) 30%, transparent 66%),
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.07) 0%, transparent 52%),
    linear-gradient(180deg, var(--site-transition-black) 0%, #160e09 14%, #271008 43%, #260811 66%, #13090c 82%, var(--site-transition-black) 100%) !important;
}

#personnage-custom {
  background:
    radial-gradient(ellipse at 28% 45%, rgba(113, 69, 255, 0.32) 0%, rgba(83, 46, 177, 0.16) 31%, transparent 67%),
    radial-gradient(ellipse at 76% 48%, rgba(255, 255, 255, 0.15) 0%, rgba(220, 211, 255, 0.075) 27%, transparent 61%),
    linear-gradient(180deg, var(--site-transition-black) 0%, #0d0b12 12%, #161026 34%, #1b1530 52%, #120f1e 74%, var(--site-transition-black) 100%) !important;
}

#avis-communaute {
  background:
    radial-gradient(ellipse at 20% 48%, rgba(0, 190, 126, 0.23) 0%, rgba(0, 104, 79, 0.12) 31%, transparent 67%),
    radial-gradient(ellipse at 80% 52%, rgba(255, 255, 255, 0.1) 0%, rgba(204, 255, 238, 0.045) 27%, transparent 62%),
    linear-gradient(180deg, var(--site-transition-black) 0%, #08130f 13%, #08251b 47%, #0b1b17 75%, var(--site-transition-black) 100%) !important;
}

#temoignages {
  background:
    radial-gradient(ellipse at 25% 48%, rgba(112, 69, 255, 0.15) 0%, rgba(66, 38, 133, 0.08) 31%, transparent 66%),
    radial-gradient(ellipse at 78% 50%, rgba(255, 0, 81, 0.24) 0%, rgba(135, 0, 48, 0.12) 31%, transparent 67%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 52%),
    linear-gradient(180deg, var(--site-transition-black) 0%, #130b14 14%, #221022 48%, #1b0b17 74%, var(--site-transition-black) 100%) !important;
}

.footer {
  background: linear-gradient(180deg, var(--site-transition-black) 0%, #050505 100%) !important;
}

@media (max-width: 700px) {
  #accueil::after {
    height: 260px;
  }
}