.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* IMPORTANT : L'image doit être plus haute que l'écran.
       150vh (150% de la hauteur de la fenêtre) est une bonne base de départ.
       Plus cette valeur est élevée, plus l'effet de parallaxe sera subtil. */
    height: 150vh;
    background-image: url(image_background.jpg);
    background-size: cover;
    background-color: black;
    /* On aligne l'image en haut pour commencer. */
    background-position: center top;
    z-index: -2;
    background-repeat: no-repeat;
    
    will-change: transform, filter;
    transition: filter 0.1s ease-out;
}



main {
    /* Il est important de définir une position relative et un z-index
       pour s'assurer que le contenu principal passe bien "par-dessus"
       l'image de fond qui est en position: fixed. */
    position: relative;
    z-index: 1;
}

/* Ajout d'une surcouche pour le vignettage */
body::after {
    content: ''; /* Obligatoire pour qu'un pseudo-élément s'affiche */
    position: fixed; /* Reste attaché à la fenêtre, ne défile pas */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Votre dégradé radial */
    background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.6) 100%);
    
    /* z-index entre l'image de fond (-2) et le contenu (1) */
    z-index: -1;
    
    /* Très important : empêche cet élément de bloquer les clics sur le contenu */
    pointer-events: none;
}