body {
    font-family:Arial, Helvetica, sans-serif;
    
}

.barre_menu {
    width: 100%;
    background-color: #413e3e;
    border: 1px solid #0a0a0a;

}

.menu {
    margin: 0px;                /* Collage du menu juste sous l'entete */
    display: block;             /* Transformation en block -> permet de recaler le menu dans la page */
    padding:0;                  /* Suppression des marges internes */
    justify-content: left;     /* Alignements des liens dans le menu */
}

.menu li {
    list-style-type: none ;       /* Suppression des puces */
}

.menu a {
    float: left;                  /* Place le menu à gauche */
    display:block;                /* Transformation en block */    
    margin: 0.2rem;           /* Marges externes (1 valeurs = 4 directions) */
    padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */   
    background-color: #1d1c1c;    /* Couleur d'arrière-plan */
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #0a0a0a;       /* Ajout d'une bordure */
    border-radius: 4px;  /* Arrondis des bordures */              
}

@media screen and (max-width: 1024px) {
    .menu a {        
        min-width: 90px;             /* Largeur minimale des liens */              
        font-size: 12px;          
    }
}

@media screen and (min-width: 1025px) {
    .menu a {        
        min-width: 120px;             /* Largeur minimale des liens */        
    }
}

.menu a:hover {
    background-color: #000000;
    color: #ff0000;
    border-color: #ff0000;
  }