/* ============================================================================
   LE FOND SLING — une seule diagonale, partagée par les trois sites.

   Demandé par Laurent le 03-08-2026 : « un dégradé de couleur sur mes sites
   sling, les trois, foncé en haut en diagonal, et s'éclaircit au scroll, sur
   toutes les sous-pages de tous les sites ».

   Deux couches empilées plutôt qu'une couleur calculée :

   - la BASE est le dégradé sombre, celui du haut de page ;
   - la couche du dessus est le même dégradé, en plus clair, et son opacité
     suit la progression du scroll (`--defile`, de 0 à 1).

   Pourquoi pas `hsl(... calc(...))` : calculer une luminosité dans une couleur
   demande la syntaxe CSS Color 4, arrivée en 2023. Une opacité pilotée par
   variable marche partout depuis 2017, et c'est composé par le GPU — donc
   fluide même sur un téléphone modeste.

   Sans JavaScript, la couche claire reste à 0 : on garde le dégradé sombre,
   qui est déjà le bon fond. Rien ne casse.
   ========================================================================= */

.fond-sling {
  position: fixed;
  inset: 0;
  z-index: -1;              /* derrière tout le contenu, devant le fond du body */
  pointer-events: none;
  /* 152deg : la diagonale descend du coin haut-gauche vers le bas-droit.
     Le plus foncé est donc bien EN HAUT. */
  background: linear-gradient(152deg, #09090B 0%, #0C1018 45%, #10192B 100%);
}

.fond-sling::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(152deg, #101016 0%, #142038 45%, #1D3255 100%);
  opacity: var(--defile, 0);
  /* Le fondu suit le doigt, il ne le poursuit pas : une transition ici
     donnerait un retard visible au scroll rapide. */
}

/* Le halo bleu qui accompagne la diagonale. Il se déplace lui aussi avec la
   progression : en haut de page il est discret, en bas il occupe le coin. */
.fond-sling::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at calc(18% + 44% * var(--defile, 0)) calc(6% + 60% * var(--defile, 0)),
    rgba(10, 132, 255, 0.16),
    transparent 58%
  );
}

/* Un appareil qui demande moins de mouvement garde le fond, pas l'animation :
   la couche claire se fige à mi-course au lieu de suivre le scroll. */
@media (prefers-reduced-motion: reduce) {
  .fond-sling::after { opacity: 0.45 }
  .fond-sling::before {
    background: radial-gradient(circle at 34% 30%, rgba(10, 132, 255, 0.14), transparent 58%);
  }
}