@charset "utf-8";

/* Fond gothique : noir velours, prune et bordeaux, sans bandes de raccord. */
html {
  min-height: 100%;
  background: #070408;
}

body {
  min-height: 100vh;
  background-color: #070408;
  background-image:
    radial-gradient(ellipse 72% 26% at 14% 4%, rgba(111, 31, 57, .22) 0%, rgba(111, 31, 57, 0) 72%),
    radial-gradient(ellipse 68% 30% at 92% 30%, rgba(72, 20, 48, .18) 0%, rgba(72, 20, 48, 0) 74%),
    radial-gradient(ellipse 76% 28% at 12% 70%, rgba(57, 18, 43, .16) 0%, rgba(57, 18, 43, 0) 76%),
    radial-gradient(ellipse 62% 24% at 88% 94%, rgba(126, 38, 57, .16) 0%, rgba(126, 38, 57, 0) 74%),
    linear-gradient(180deg, #080509 0%, #10070d 24%, #0a060b 52%, #12070e 76%, #1a0911 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;
  isolation: isolate;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 8% 3%, rgba(255,255,255,.13) 0 1px, transparent 1.8px),
    radial-gradient(circle at 28% 17%, rgba(211,175,106,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 7%, rgba(255,255,255,.08) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 30%, rgba(211,175,106,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 58%, rgba(255,255,255,.07) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 72%, rgba(211,175,106,.09) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 90%, rgba(255,255,255,.07) 0 1px, transparent 1.8px);
  background-repeat: no-repeat;
  opacity: .78;
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(ellipse 54% 18% at 50% 10%, rgba(143, 41, 74, .08), transparent 72%),
    radial-gradient(ellipse 48% 15% at 22% 48%, rgba(98, 28, 66, .08), transparent 74%),
    radial-gradient(ellipse 58% 18% at 78% 84%, rgba(150, 48, 62, .08), transparent 74%);
  background-repeat: no-repeat;
  filter: blur(18px);
}

.footer {
  margin: 32px 0 12px;
  font-size: 1rem;
  text-align: center;
  color: rgba(222, 208, 216, .76);
}

@media (max-width: 700px) {
  body {
    background-image:
      radial-gradient(ellipse 110% 20% at 20% 2%, rgba(111, 31, 57, .20), transparent 72%),
      radial-gradient(ellipse 100% 22% at 88% 96%, rgba(126, 38, 57, .14), transparent 74%),
      linear-gradient(180deg, #080509 0%, #10070d 42%, #0a060b 68%, #16080f 100%);
  }
}