/* Flou progressif fixe sur les bords haut et bas de l'écran : quatre couches de backdrop-filter
   masquées, la force du flou doublant d'une couche à l'autre. Purement décoratif, CSS seul.
   Performance : chaque couche est limitée à sa bande utile (37,5 % de la hauteur) au lieu de couvrir
   tout le bord, et les couches sous 1 px de flou, invisibles à l'œil, sont supprimées.
   Ordinateur et tablette seulement. z-index 10 : au-dessus du contenu, sous le header. */
.progressive-blur {
  position: fixed;
  z-index: 10;
  right: 0;
  left: 0;
  height: 200px;
  overflow: hidden;
  pointer-events: none;
}

.progressive-blur.top-blur {
  --blur-direction: to bottom;
  top: -32px;
}

.progressive-blur.bottom-blur {
  --blur-direction: to top;
  bottom: -32px;
}

.progressive-blur .layer {
  position: absolute;
  right: 0;
  left: 0;
  height: 37.5%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--blur-direction), transparent 0%, #000 33.33% 66.67%, transparent 100%);
  mask-image: linear-gradient(var(--blur-direction), transparent 0%, #000 33.33% 66.67%, transparent 100%);
}

.progressive-blur .blur-5 { z-index: 5; -webkit-backdrop-filter: blur(1.25px); backdrop-filter: blur(1.25px); }
.progressive-blur .blur-6 { z-index: 6; -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
.progressive-blur .blur-7 { z-index: 7; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.progressive-blur .blur-8 { z-index: 8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Position de chaque bande, du bord vers l'intérieur */
.top-blur .blur-8 { top: 0; }
.top-blur .blur-7 { top: 12.5%; }
.top-blur .blur-6 { top: 25%; }
.top-blur .blur-5 { top: 37.5%; }
.bottom-blur .blur-8 { bottom: 0; }
.bottom-blur .blur-7 { bottom: 12.5%; }
.bottom-blur .blur-6 { bottom: 25%; }
.bottom-blur .blur-5 { bottom: 37.5%; }

@media (max-width: 767.98px) {
  .progressive-blur {
    display: none;
  }
}