/* background.css
   - image en fond (cover)
   - overlay sombre pour lisibilité
   - optimisé pour header fixe et contenu
*/

/* variables faciles à ajuster */
:root{
  background-color: #2b1432; /* necessaire avant affichage de l'image de fond */
  --bg-image: url("../images/background.jpg"); /* <-- change ici si besoin */
  --bg-overlay-color: rgba(0,0,0,0.45);     /* <-- ajuste l'opacité (0.0..0.8) */
  --bg-blur: 0px;                            /* <-- flou optionnel (ex: 4px) */
}

/* on place l'image + overlay via pseudo-éléments pour rester indépendant du HTML */
html, body {

  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent; /* s'assurer qu'aucun background hérité ne gêne */
}

/* couche image fixe */
body::before{
  content: "";
  position: fixed;
  inset: 0;                      /* top:0; right:0; bottom:0; left:0 */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--bg-blur));
  transform: translateZ(0);      /* GPU hint */
  z-index: -2;                   /* derrière tout */
  pointer-events: none;
}

/* overlay sombre pour lisibilité */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--bg-overlay-color);
  z-index: -1;                   /* entre l'image et le contenu */
  pointer-events: none;
}

/* contenu principal : s'assurer qu'il soit au-dessus */
.page-content, .main-content, #content {
  position: relative;
  z-index: 0;
}

/* si tu as un header fixe avec z-index élevé, rien à changer
   mais si le header est masqué par l'overlay, augmente son z-index */
.site-header {
  z-index: 1000; /* déjà recommandé pour header fixe */
}

/* petit fallback responsive pour mobiles (optionnel) */
@media (max-width: 600px) {
  :root { --bg-overlay-color: rgba(0,0,0,0.55); }
}