/* ==========================================================
   Gestio — Fond premium SAFE — diagonales plus discrètes
   Version : ne modifie que le fond, sans toucher au layout.

   À charger après les autres CSS :
   <link rel="stylesheet" href="css/fond-gestio-premium-diagonales-discretes.css?v=4" />
   ========================================================== */

:root{
  --gestio-bg-0:#030913;
  --gestio-bg-1:#061522;
  --gestio-bg-2:#08213a;
  --gestio-blue-soft:rgba(92,178,255,.20);
  --gestio-blue-line:rgba(158,215,255,.038);
  --gestio-purple-soft:rgba(128,94,255,.13);
  --gestio-green-soft:rgba(35,211,180,.09);
}

html,
body{
  min-height:100%;
  background:
    radial-gradient(circle at 50% 8%, var(--gestio-blue-soft) 0%, rgba(92,178,255,.08) 22%, transparent 43%),
    radial-gradient(circle at 92% 35%, var(--gestio-purple-soft) 0%, rgba(128,94,255,.055) 25%, transparent 48%),
    radial-gradient(circle at 8% 72%, var(--gestio-green-soft) 0%, rgba(35,211,180,.04) 28%, transparent 54%),
    repeating-linear-gradient(
      135deg,
      transparent 0 28px,
      var(--gestio-blue-line) 28px 29px,
      transparent 29px 58px
    ),
    linear-gradient(180deg, var(--gestio-bg-2) 0%, var(--gestio-bg-1) 46%, var(--gestio-bg-0) 100%) !important;
  background-attachment:fixed !important;
}

/* Uniquement le décor de fond : aucun impact sur les boutons, bandeaux ou cartes. */
.hero-bg{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  pointer-events:none !important;
  overflow:hidden !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(92,178,255,.24) 0%, rgba(92,178,255,.10) 22%, transparent 43%),
    radial-gradient(circle at 92% 35%, rgba(128,94,255,.15) 0%, rgba(128,94,255,.06) 25%, transparent 48%),
    radial-gradient(circle at 8% 72%, rgba(35,211,180,.11) 0%, rgba(35,211,180,.045) 28%, transparent 54%),
    repeating-linear-gradient(
      135deg,
      transparent 0 28px,
      rgba(158,215,255,.04) 28px 29px,
      transparent 29px 58px
    ),
    linear-gradient(180deg, #08213a 0%, #061522 46%, #030913 100%) !important;
}

.hero-bg::before{
  content:"";
  position:absolute;
  inset:-16%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(93,176,255,.17) 0%, transparent 34%),
    radial-gradient(ellipse at 82% 44%, rgba(139,92,246,.10) 0%, transparent 38%),
    radial-gradient(ellipse at 18% 78%, rgba(45,212,191,.075) 0%, transparent 40%);
  filter:blur(22px);
  opacity:.9;
}

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.024) 45%, transparent 62%),
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.035) 0%, transparent 30%);
  opacity:.70;
  mix-blend-mode:screen;
}

@media (max-width:640px){
  html,
  body{
    background:
      radial-gradient(circle at 50% 7%, rgba(92,178,255,.20) 0%, rgba(92,178,255,.08) 23%, transparent 44%),
      radial-gradient(circle at 95% 38%, rgba(128,94,255,.13) 0%, rgba(128,94,255,.052) 25%, transparent 50%),
      radial-gradient(circle at 5% 74%, rgba(35,211,180,.09) 0%, rgba(35,211,180,.036) 28%, transparent 54%),
      repeating-linear-gradient(
        135deg,
        transparent 0 26px,
        rgba(158,215,255,.036) 26px 27px,
        transparent 27px 54px
      ),
      linear-gradient(180deg, #08213a 0%, #061522 48%, #030913 100%) !important;
    background-attachment:fixed !important;
  }

  .hero-bg{
    background:
      radial-gradient(circle at 50% 7%, rgba(92,178,255,.24) 0%, rgba(92,178,255,.09) 23%, transparent 44%),
      radial-gradient(circle at 95% 38%, rgba(128,94,255,.14) 0%, rgba(128,94,255,.055) 25%, transparent 50%),
      radial-gradient(circle at 5% 74%, rgba(35,211,180,.10) 0%, rgba(35,211,180,.04) 28%, transparent 54%),
      repeating-linear-gradient(
        135deg,
        transparent 0 26px,
        rgba(158,215,255,.038) 26px 27px,
        transparent 27px 54px
      ),
      linear-gradient(180deg, #08213a 0%, #061522 48%, #030913 100%) !important;
  }
}