/* 1. On s'assure que la navbar a un fond opaque et reste au-dessus */
.navbar { 
    background-color: #ffffff !important; /* Mettez la couleur de votre choix */
    position: relative;
    z-index: 1000;
    margin-bottom: 0; /* Évite un espace blanc non voulu */
}

/* 2. On corrige la bannière pour qu'elle ne "glisse" pas sous la navbar */
.banner, .hero-section { /* Remplacez par le nom de classe de votre bannière */
    margin-top: 0;
    padding-top: 20px; /* Ajustez pour créer de l'espace interne si besoin */
    display: block;
    clear: both;
}

/* 1. On empêche la fusion des marges du titre H1 */
.hero-section {
    display: flow-root; /* Solution moderne pour contenir les marges internes */
    border-top: 1px solid transparent; /* Sécurité supplémentaire */
}

/* 2. Si votre navbar est FIXE (collée en haut) */
/* Ajoutez un espace au-dessus de la section pour ne pas qu'elle soit cachée */
body {
    padding-top: 0; /* Ajustez selon la hauteur réelle de votre navbar */
}

/* 3. Si votre navbar n'a pas de couleur de fond par défaut */
/* On force la navbar à être opaque pour ne pas voir le bleu de la bannière derrière */


.navbar {
    position: fixed;   /* Fixe le menu par rapport à l'écran */
    margin-top: 0 !important;
    top: 0;            /* Le colle tout en haut */
    left: 0;
    right: 0;
    width: 100%;       /* Obligatoire pour qu'il prenne toute la largeur */
    z-index: 9999;     /* S'assure qu'il passe par-dessus tout le reste */
    background-color: rgba(255, 255, 255, 0.8) !important; /* Force la couleur pour ne pas qu'il soit transparent */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Optionnel : ajoute une petite ombre pour le relief */
}

/* 1. On supprime les marges par défaut du navigateur */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Évite un défilement horizontal inutile */
}