/* ===============================================
   BACKGROUND CONFIGURATION - Fichier centralisé
   ===============================================
   UN SEUL BACKGROUND GLOBAL pour toute la page
   Modifiez les variables ci-dessous sans toucher
   aux fichiers HTML
   =============================================== */

:root {
  /* VARIABLES DE CONTRÔLE - Modifiez ces valeurs */
  --bg-body-gradient-left: #0f172a;
  --bg-body-gradient-right: #164e63;
  --bg-pattern-color: #1a3a52;
  --bg-pattern-size: 40px;
  --bg-mask-position-x: 100%;
  --bg-mask-position-y: 100%;
  --bg-mask-size-x: 80%;
  --bg-mask-size-y: 80%;
  --bg-mask-fade-start: 50%;
  --bg-mask-fade-end: 90%;
}

/* BACKGROUND GLOBAL UNIQUE - Appliqué une seule fois au body */
body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #164e63 50%, #0c4a6e 75%, #082f49 100%);
  background-attachment: scroll;
  position: relative;
}

/* Pattern diagonal unique au body - scroll avec la page */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;

  /* Pattern: ligne diagonale 45deg + ligne diagonale -45deg crée une grille de losanges */
  background-image:
    linear-gradient(45deg, transparent 49%, var(--bg-pattern-color) 49%, var(--bg-pattern-color) 51%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, var(--bg-pattern-color) 49%, var(--bg-pattern-color) 51%, transparent 51%);
  background-size: var(--bg-pattern-size) var(--bg-pattern-size);

  /* Mask: crée un fade radial au coin spécifié (par défaut bas-droit) */
  -webkit-mask-image: radial-gradient(
    ellipse var(--bg-mask-size-x) var(--bg-mask-size-y) at var(--bg-mask-position-x) var(--bg-mask-position-y),
    rgba(0,0,0,1) var(--bg-mask-fade-start),
    transparent var(--bg-mask-fade-end)
  );
  mask-image: radial-gradient(
    ellipse var(--bg-mask-size-x) var(--bg-mask-size-y) at var(--bg-mask-position-x) var(--bg-mask-position-y),
    rgba(0,0,0,1) var(--bg-mask-fade-start),
    transparent var(--bg-mask-fade-end)
  );
}

/* Content stays on top of background */
main {
  position: relative;
  z-index: 1;
}