.main, .footer {background-color: transparent}

/* Par défaut : clair */
body {
  background-image: url('../img/bg_light.svg');
  background-repeat: repeat;          /*  Le fond se répète dans les deux directions */
  background-position: top left;      /* point de départ du motif */
  background-size: auto;              /* garde la taille naturelle du SVG */
  background-attachment: scroll;      /* défile avec le texte */
}

/* Mode sombre automatique (préférence système) */
@media (prefers-color-scheme: dark) {
  body {
    background-image: url('../img/bg_dark.svg');
  }
}

/* Si tu utilises html[data-theme="dark"] pour forcer le thème */
html[data-theme="dark"] body {
  background-image: url('../img/bg_dark.svg');
}
html[data-theme="light"] body {
  background-image: url('../img/bg_light.svg');
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.6); /* clair = atténue le fond */
  z-index: -1;
}

footer.footer {
    border-top: 1px solid #666;
}
h1, h2, h3, h4{
  font-family: "Metamorphous", serif;
  font-weight: 400;
  font-style: normal;
}
h3, .h3, .s3 {font-weight: bold; font-style: italic;}