/* Style pour le menu principal */
#menu-principal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;  /* Fond blanc */
    display: flex;
    align-items: center;  /* Centrer verticalement les éléments du menu */
    flex-wrap: wrap;  /* Permet d'enrouler les éléments si nécessaire */
    height: 64px;
    z-index: 1000;
    transition: top 0.3s ease; /* Transition fluide pour le menu principal */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre pour le menu */
    padding-left: 20px;  /* Espacement à gauche pour aligner le contenu du menu à gauche */
}
.logomn {
  position: absolute;
  margin-top: -14%;
  margin-left: 32%;
  width: 38%;
}



/* Menu principal (les éléments du menu) */
#menu-principal nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;  /* Utilisation de flexbox pour aligner les éléments */
    justify-content: flex-start;  /* Aligner les éléments à gauche */
    width: 100%;
    font-family: 'Orbitron', monospace;

}

#menu-principal nav ul li {
    margin-right: 20px;  /* Espacement entre les éléments */
}

#menu-principal nav ul li a {
    color: #333;
    text-decoration: none;
    font-size: 22px;
    font-family: 'Orbitron', monospace;

}

/* Style pour le menu secondaire */
#menu-secondaire {
    position: fixed;
    top: 30px;  /* Placer le menu secondaire juste en dessous du menu principal */
    left: 50%;  /* Le placer au centre horizontalement */
    transform: translateX(-50%);  /* Décalage de moitié de la largeur du menu pour le centrer parfaitement */
    background-color: #fff;
    border-radius: 50px;  /* Coins arrondis */
    display: flex;
    justify-content: center;  /* Centrer les éléments dans le menu secondaire */
    padding: 0px;
    width: fit-content;  /* Largeur ajustée au contenu */
    z-index: 999;
    opacity: 0;  /* Menu secondaire invisible par défaut */
    transition: top 0.3s ease, opacity 0.3s ease; /* Transition fluide pour l'apparition du menu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* Légère ombre */
     font-family: 'Orbitron', monospace;
}

#menu-secondaire nav ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;  /* Utilisation de flexbox pour centrer les éléments */
    justify-content: center;
}

#menu-secondaire nav ul li {
    margin-right: 20px;
}

#menu-secondaire nav ul li a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    padding: 12px 20px;  /* Espacement autour du texte */
    transition: background-color 0.3s ease, color 0.3s ease;  /* Animation sur le survol */
    border-radius: 50px;  /* Coins arrondis */
    display: flex;  /* Flexbox pour centrer le texte */
    align-items: center;  /* Centrer le texte verticalement */
    -webkit-box-align: center; /* Alignement centré pour les anciens navigateurs */
    -ms-flex-align: center; /* Alignement centré pour les anciens navigateurs */
    height: 48px;  /* Hauteur des liens */
}

/* Effet au survol du lien */
#menu-principal nav ul li a:hover, 
#menu-secondaire nav ul li a:hover {
   background-color: #f0f0f0;
  color: #007bff;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 8px;
}

/* Ajouter un fond coloré lorsqu'un élément est cliqué */
#menu-principal nav ul li a.active, 
#menu-secondaire nav ul li a.active {
    background-color: #007bff; /* Fond bleu lors de la sélection */
    color: white; /* Texte blanc lors de la sélection */
}

/* Contenu de la page */
.content {
    padding-top: 160px; /* Pour éviter que le menu principal et secondaire ne cachent le contenu */
}

/* Style pour les sections */
section {
  padding: 100px 0;
  height: 73vh;
}

/*section h2 {
    text-align: center;
    margin-bottom: 20px;
}*/

/* Style pour les liens dans les menus */
#menu-principal nav ul li a, 
#menu-secondaire nav ul li a {
    color: #5f6368; /* Couleur du texte */
    -webkit-box-align: center; /* Alignement centré pour les anciens navigateurs */
    -ms-flex-align: center; /* Alignement centré pour les anciens navigateurs */
    align-items: center; /* Alignement centré des éléments */
    border-radius: 50px; /* Coins arrondis */
    display: -webkit-box; /* Flexbox pour aligner les éléments dans le menu (ancien support) */
    display: -ms-flexbox; /* Flexbox pour aligner les éléments dans le menu (ancien support) */
    display: flex; /* Flexbox pour aligner les éléments dans le menu */
    height: 50px; /* Hauteur du lien */
    padding: 12px 20px; /* Espacement autour du texte */
    text-decoration: none; /* Supprimer la décoration du texte (soulignement) */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transition fluide pour les interactions */
}

/* Effet au survol du lien */
#menu-principal nav ul li a:hover, 
#menu-secondaire nav ul li a:hover {
    background-color: #f0f0f0; /* Change la couleur de fond lorsque survolé */
    color: #007bff; /* Change la couleur du texte au survol */
}

/* Ajouter un fond coloré lorsqu'un élément est cliqué */
#menu-principal nav ul li a.active, 
#menu-secondaire nav ul li a.active {
    background-color: #007bff; /* Fond bleu lors de la sélection */
    color: white; /* Texte blanc lors de la sélection */
}

/* Highlight menu item when corresponding section is hovered */
#menu-secondaire nav ul li a.hovered {
    background-color: #f0f0f0;  /* Change background color */
    color: #007bff;  /* Change text color */
    transition: background-color 0.3s ease, color 0.3s ease;  /* Smooth transition */
}

/* Media Queries pour les appareils mobiles et tablettes */

/* Pour les tablettes */
@media (max-width: 768px) {
    .logomn {
  display: none;
}
    #menu-principal {
        height: 56px; /* Réduire la hauteur du menu principal sur tablette */
        padding-left: 10px; /* Réduire l'espacement à gauche */
    }

    #menu-principal nav ul li {
        margin-right: 15px; /* Réduire l'espacement entre les éléments du menu */
    }

    /* Menu secondaire en bas pour les appareils mobiles et tablettes */
    #menu-secondaire {
        position: fixed;
        bottom: 0;  /* Positionner le menu secondaire en bas */
        top: unset;  /* Annuler la position 'top' */
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Ombre pour le menu secondaire en bas */
        padding: 8px 0;
    }

    /* Réduire la taille du texte dans le menu secondaire */
    #menu-secondaire nav ul li a {
        font-size: 14px;
        padding: 10px 15px; /* Réduire l'espacement des liens */
    }

    /* Réduire la taille de la police dans le menu principal */
    #menu-principal nav ul li a {
        font-size: 16px;
    }
}

/* Pour les téléphones mobiles */
@media (max-width: 480px) {
    .logomn {
  display: none;
}



#menu-secondaire nav {
  background: white;
  width: 100%;
  margin-bottom: -4%;
}
    #menu-principal {
        height: 48px; /* Hauteur du menu principal encore plus petite pour les mobiles */
    }

    #menu-principal nav ul li {
        margin-right: 10px;  /* Réduire encore plus l'espacement entre les éléments du menu */
    }

    /* Menu secondaire en bas pour les appareils mobiles */
    #menu-secondaire {
        position: fixed;
/*        bottom: 0; /* Toujours en bas */*/
        left: 0;
        right: 0;  /* Couvre toute la largeur de l'écran */
        transform: unset;  /* Annuler le translateX */
        border-radius: 0;  /* Pas de coins arrondis */
        padding: 8px 0;
    }

    /* Réduire la taille du texte dans le menu secondaire */
    #menu-secondaire .SEC ul li a {
        font-size: 12px;
        padding: 8px 10px; /* Espacement plus petit */
    }  #menu-secondaire nav {
  position: fixed;
  bottom: 13px;
}
}



/* -------------------- MENU HAMBURGER -------------------- */

/* Bouton hamburger */
#hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    padding: 12px 20px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 2000;
}

/* Par défaut sur mobile : menu caché */
@media (max-width: 768px) {
/*    #menu-principal nav ul {
        display: none;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        z-index: 1500;
    }*/
    #menu-principal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 64px;
  z-index: 1000;
  transition: top 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding-left: 20px;
}

    #menu-principal nav ul.show {
        display: flex;
    }

    #menu-principal nav ul li {
        margin: 10px 0;
        text-align: center;
    }

    #hamburger {
        display: block;
    }
}