/* ================================= */
/* STYLE GÉNÉRAL DU MENU              */
/* ================================= */

/* 
   On sélectionne le conteneur principal
   du menu.
*/
.navbar {
    position: relative;
    padding: 20px;
}


/* ================================= */
/* BOUTON BURGER                      */
/* ================================= */

/*
   On sélectionne le bouton qui contient
   les trois barres.
*/
.burger {

    /* Retire la bordure par défaut du bouton */
    border: none;

    /* Rend le fond du bouton transparent */
    background: transparent;

    /* Change le curseur en petite main */
    cursor: pointer;

    /* 
       Permet d'empiler les trois <span>
       verticalement.
    */
    display: flex;

    /* Place les éléments verticalement */
    flex-direction: column;

    /* Espace entre les trois barres */
    gap: 5px;

    /* Largeur du bouton */
    width: 40px;

    /* Hauteur du bouton */
    height: 40px;

    /* Centre les barres horizontalement */
    align-items: center;

    /* Centre les barres verticalement */
    justify-content: center;
}


/*
   On sélectionne les trois <span>
   qui se trouvent dans le bouton burger.
*/
.burger span {

    /* Rend chaque span visible comme un bloc */
    display: block;

    /* Largeur de chaque barre */
    width: 30px;

    /* Épaisseur de chaque barre */
    height: 3px;

    /* Couleur de la barre */
    background-color: black;

    /* Arrondit légèrement les extrémités */
    border-radius: 5px;

    /*
       Ajoute une petite animation lorsque
       la classe "active" sera ajoutée.
    */
    transition: 0.3s;
}


/* ================================= */
/* MENU                               */
/* ================================= */

/*
   On sélectionne la liste <ul>.
*/
.menu {

    /* Retire les puces de la liste */
    list-style: none;

    /* Retire les marges par défaut */
    margin: 0;

    /* Retire les espacements internes */
    padding: 0;

    /* 
       Le menu est caché par défaut.
    */
    display: none;

    /*
       Place le menu sous le bouton burger.
    */
    position: absolute;

    /* Distance par rapport au haut */
    top: 70px;

    /* Distance par rapport à la gauche */
    left: 20px;

    /* Donne un fond blanc au menu */
    background-color: white;

    /* Ajoute une petite bordure */
    border: 1px solid #ddd;

    /* Ajoute une ombre */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

    /* Place le menu au-dessus du reste */
    z-index: 1000;
}


/*
   Cette classe sera ajoutée par JavaScript
   lorsque l'utilisateur clique sur le burger.
*/
.menu.active {

    /* Rend le menu visible */
    display: block;
}


/* ================================= */
/* LIENS DU MENU                      */
/* ================================= */

/*
   On sélectionne les liens <a>
   présents dans le menu.
*/
.menu a {

    /* Permet de contrôler largeur et hauteur */
    display: block;

    /* Espacement intérieur */
    padding: 15px 25px;

    /* Retire le soulignement */
    text-decoration: none;

    /* Couleur du texte */
    color: black;

    /* Évite que le texte soit trop petit */
    font-size: 16px;
}


/*
   :hover s'active lorsque la souris
   passe au-dessus du lien.
*/
.menu a:hover {

    /* Change la couleur de fond */
    background-color: #eeeeee;
}