/* 
Page créée par Loïc Rotzetter
Page css pour toutes les pages du site où il y a de la navigation
Page créée le 9 janvier 2025 
*/

/* Style pour l'élément actif (bouton actuellement sélectionné) */
#active {
    background-color: #333;            /* Changer la couleur de fond de l'élément actif */
    border-color: #333;                /* Changer la couleur de la bordure de l'élément actif */
    text-decoration: none;             /* Enlever le soulignement */
}

.menu ul li ul li .active, .menu ul li .active, main .sidenav .active, body .sidenav .active{
    background-color: #333;            /* Changer la couleur de fond de l'élément actif */
    border-color: #333;                /* Changer la couleur de la bordure de l'élément actif */
    text-decoration: none;             /* Enlever le soulignement */
}

/* Barre grise pour menu */
.fond-boutons {
    width: 100%;                        /* Largeur adaptable */
    height: 140px;                      /* Hauteur de la barre */
    background: black;                /* Couleur de fond gris */
    border: 1px solid black;          /* Bordure gris foncé */
}

/* Menu */
.menu > ul {
    display: flex;                      /* Utilisation de Flexbox */
    justify-content: space-around;      /* Centrer les boutons */
    padding: 35px;                      /* Retirer les marges intérieures */
    margin: 0;                          /* Retirer les marges extérieures */
}

/* Espacement et positionnement des éléments du menu */
.menu ul li {
    text-align: center;                 /* Centrer le texte dans chaque élément */
    position: relative;                 /* Nécessaire pour positionner le sous-menu */
}

/* Style des boutons du menu */
.menu ul li a, .menu-toggle {
    width: 166px;                       /* Largeur du bouton */
    height: 50px;                       /* Hauteur du bouton */
    background: black;                /* Fond gris */
    color: #FFFFFF;                     /* Texte blanc */
    border-color: #FFFFFF;              /* Bordure blanche */
    border-width: 1px;                  /* Largeur de la bordure */
    border-style: solid;                /* Type de bordure */
    border-radius: 12px;                /* Bordures arrondies */
    font-family: Arial, Helvetica, sans-serif;  /* Police de caractère */
    font-size: 14px;                    /* Taille de la police */
    text-decoration: none;              /* Enlever le soulignement du texte */
    text-align: center;                 /* Centrer le texte */
    display: block;                     /* Prendre toute la hauteur du li */
    line-height: 51px;                  /* Centrer verticalement le texte */
    margin: 15px;                       /* Espacement entre les éléments */
}

/* Effet de survol des éléments du menu */
.menu ul li a:hover {
    background-color: black;            /* Changer la couleur de fond au survol */
    border-color: black;                /* Changer la couleur de la bordure au survol */
    text-decoration: none;             /* Enlever le soulignement au survol */
}

/* Sous-menu caché par défaut (important !) */
.sous-menu {
    padding: 0;                         /* Enlever les marges intérieures */
    display: none;                      /* Cacher le sous-menu par défaut */
    list-style: none;                   /* Enlever les puces de la liste */
    background: black;                /* Fond gris foncé */
    position: absolute;                 /* Positionner absolument par rapport au li parent */
    top: 100%;                          /* Placer le sous-menu juste en dessous du bouton */
    border-radius: 12px;                /* Bordures arrondies */
}

/* Afficher le sous-menu au survol de l'élément parent */
.menu-chassis:hover .sous-menu {
    display: block;                     /* Afficher le sous-menu au survol du menu "Châssis" */
    z-index: 999;                       /* Placer le sous-menu au-dessus des autres éléments */
}

/* Style des liens dans le sous-menu */
.sous-menu li a {
    background-color: #545454;          /* Fond gris */
    color: white;                       /* Texte en blanc */
    text-decoration: none;              /* Enlever le soulignement */
}

/* Effet de survol pour les liens du sous-menu */
.sous-menu li a:hover {
    background-color: #666;             /* Changer la couleur de fond au survol */
}



/* Enlever les puces pour toutes les listes */
ul {
    list-style: none;
}

/* Images adaptatives */
img {
    max-width: 100%;                    /* L'image s'adapte à la largeur du conteneur */
    height: auto;                       /* Maintient les proportions de l'image */
    display: block;                     /* Supprime les espaces blancs en dessous de l'image */
}

/* Logo pour ouvrir le menu */
.logo {
    cursor: pointer;
    display: block; /* S'assure que le logo est visible */
}

/* Menu Latéral */
.sidenav {
    display: none; /* Cache le menu latéral */
    height: 100%;
    width: 0; /* Commence avec une largeur de 0 */
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.7s;
    padding-top: 60px;
    text-align: center;
}

/* Style des liens du menu latéral */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

/* Bouton de fermeture */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Logo en haut à gauche */
.logo {
    cursor: pointer;
}

.bouton-menu{
    display: none;
}
.boutons{
    padding-left: 5px !important;
}
/* Lorsque l'écran est plus petit que 1050px */
@media screen and (max-width: 1050px) {
    .sidenav {
        display: block; /* Le menu latéral devient visible */
        width: 0; /* Initialement caché */
    }
    .fond-boutons {
        height: auto;
    }
    .boutons{
        color: white;
    }
}