/* Fond officiel du site — studio bleu */
html,
html:root {
  min-height: 100% !important;
  background-color: #19111a !important;
  background-image:
    linear-gradient(180deg, rgba(24,16,26, .48), rgba(1, 7, 20, .67)),
    url("studio-background-official-v2.png?v=813") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

html body {
  min-height: 100% !important;
  background: transparent !important;
}

html body > .mz-official-background {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(24,16,26, .48), rgba(1, 7, 20, .67)),
    url("studio-background-official-v2.png?v=815") center center / cover no-repeat !important;
}

/* Les sections restent intégrées au nouveau décor. */
html body main,
html body main > section,
html body > section {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html,
  html:root {
    background-attachment: scroll !important;
    background-position: 52% center !important;
  }

  html body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    display: block !important;
    opacity: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(24,16,26, .5), rgba(1, 7, 20, .72)),
      url("studio-background-official-v2.png?v=813") 52% center / cover no-repeat !important;
  }

  html body > .mz-official-background {
    background-position: 52% center !important;
  }
}

@media (max-width: 520px) {
  html,
  html:root,
  html body::before,
  html body > .mz-official-background {
    background-position: 56% center !important;
  }
}