body {
    font-family: "Trebuchet MS";
}

.menu { /* Cadre arriere plan du menu */
    display: flex;                /* Transformation en flexbox */
    flex-wrap: wrap;
    flex-direction: row;
    padding:0;                    /* Suppression des marges internes */
    background-color: #bfbfbf;    /* Ajout de la couleur d'arrière-plan */
    justify-content: space-around;/* Alignements des liens dans le menu */
}

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

}
.menu a { /* Bloc pour chaque element du menu */
    display:block;                /* Transformation en block */

    flex-direction: column;
    flex-basis: 0px;
    flex-grow: 1;
    flex-shrink: 1;

    /*min-width: 120px;              Largeur minimale des liens */

    margin: 0.5rem;               /* Marges externes */
    padding: 0.4rem 0.4rem;            /* Marges internes */
    text-align: center;           /* Centrage du texte */
    font-weight: bold;            /* Mise en gras du texte */
    background-color: #fff;       /* Arrière-plan */
    color: #000;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;       /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */

    transition: all 1s ;          /* Ajout des effets de transition */
}

.menu a.actif { /* Bloc de l'élément actif du menu */
    background-color: #267CB9 ;     /* Background color */
    color: #fff ;                   /* Text color */
    border-color: #267CB9 ;         /* Border fff */
}
.menu a:hover, /* effet au survol des boutons */
.menu a:hover.actif{ /* Bloc de l'élément actif et fix du menu */
    background-color: #267CB9;      /* Background color */
    color: #fff;                 /* Text color */
    border-color: #267CB9;          /* Border fff */
}