body{    
    background-color:seagreen;
    padding-top: 90px;  /* repousse le contenu de 90px (pour la barre de navigation) */
}



/******************************  ARRIERE PLAN BODY ICONES  ***********************************/

/* Conteneur d'icônes en arrière-plan */
.bg-icons-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1; /* <--- Passe impérativement sous tout le contenu */
    overflow: hidden;
}
/* Style de base pour chaque icône générée */
.random-icon {
    position: absolute;
    color: rgba(0, 20, 0, 0.2);  /* Couleur de l'icône (ajustez selon votre fond) */
    /*text-shadow: 0 0 2px rgba(0, 100, 0, 0.4);*/ /* Effet d'ombre/lueur vert foncé (ex: DarkGreen #006400) */
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* S'assurer que le vrai contenu passe au-dessus des icônes */
.content-overlay {
    position: relative;
    z-index: 1;
}


/******************************  ANIMATION BOUTON PANIER  ***********************************/


/* Élément fantôme qui vole vers le panier (animation "Ajout Panier") */
.animation-vol-panier {
    position: fixed;
    z-index: 9999;
    width: 150px;
    height: 150px;
    background-color: Goldenrod;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none; /* Évite de bloquer les clics pendant le vol */
    transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1); /* Courbe de vitesse fluide */
    opacity: 1;
    transform: scale(2);
}




/******************************  BARRE DE NAVIGATION  ***********************************/

nav {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9998;
}

.nav-item a:hover{
    color: #00DD00 !important;
    transition: color 0.5s ease;
}
.nav-item a.active{
    color: #00DD00 !important;
}

.dropdown-item.hover, .dropdown-item:hover {
  background-color: #212529 !important;   /* equivalent Bootstrap 'dark' */
}
.dropdown-item.active, .dropdown-item:active {
  background-color: #212529 !important;   /* equivalent Bootstrap 'dark' */
}
.dropdown-item.focus, .dropdown-item:focus {
  background-color: #212529 !important;   /* equivalent Bootstrap 'dark' */
}


/* Prépare le sous-menu pour l'animation */
.navbar-nav .dropdown-menu {
    display: block !important; /* Force le bloc pour permettre l'animation */
    visibility: hidden;
    opacity: 0;
    max-height: 0;            /* Hauteur de départ obligatoire */
    overflow: hidden;         /* Cache le texte pendant qu'il est fermé */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* Animation fluide de la hauteur et du fondu */
    transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.4s;
    border: none;
}

/* Déclenche l'animation du haut vers le bas lorsque le sous-menu est actif */
.navbar-nav .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    max-height: 300px;        /* Valeur d'arrivée obligatoire (ajustez selon votre besoin) */
    padding-top: 0.5rem !important; /* Restaure l'espace interne de Bootstrap */
    padding-bottom: 0.5rem !important;
}


/* Applique une marge de sécurité au moment du scroll sur toutes vos sections */
section[id] {
  scroll-margin-top: 70px; /* 50px pour la hauteur du menu + 20px d'espace esthétique */
}



  /* Définition de l'ombre personnalisée */
  .text-shadow-perso {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  }