/*Position fixe du header au scroll*/
#header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: white;
    display: flex;
    align-items: center;
}

/*Effet brume en bas du header*/
#header::after{
  content: "";
  position: absolute;
  bottom: -1px; /* dépasse légèrement pour bien recouvrir */
  left: 0;
  width: 100%;
  height: 80px; /* hauteur de la brume */
  background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  filter: blur(10px); /* intensité du flou */
  pointer-events: none; /* ne bloque pas les interactions */
  z-index: -1; /* derrière le header */
}

/*Garder la marge avec le body et le header*/
body {
  padding-top: 80px; /* adapte à la hauteur réelle de ton header */
}