#logo {
    margin-left: auto;
    margin-right: auto;
    
    height: 100px;
  }
  
  .menu-mob {
    border-top: 1px solid black;
    display: flex;
    width: 100%;
  }
  
  .menu-mob>a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    background-color: rgba(173, 173, 173, 0.348);
    width: 25%;
    text-align: center;
  }
  
  #gauche {
    border-left: 1px solid rgba(0, 0, 0, 0.5);
  }
  
  #droite {
    border-right: 1px solid rgba(0, 0, 0, 0.5);
  }
  
  .logo-menu {
    display: none;
  }
  
  #entete {
    display: flex;
  }
  
  .menu-mob>a:hover {
    background-color: white;
  }
  
  a.OngletActif {
    background-color: rgba(62, 62, 62, 0.764);
    color: white;
  }
  
  a.OngletActif:hover {
    background-color: rgba(62, 62, 62, 0.764);
  }
  
  a {
    text-decoration: none;
    color: black;
  }

  /*Je définis des paramètres différents pour quand 
l'écran/la fenêtre large de moins de 600px*/
@media screen and (max-width: 600px) {


    /*je définis un animation pour le menu afin que chacunes de ses parties s'agrandissent petit à petit*/
    @keyframes deroulement {
        0% {
            height: 0px;
        }

        5% {
            height: 5px;
        }

        10% {
            height: 10px;
        }

        15% {
            height: 15px;
        }

        20% {
            height: 20px;
        }

        25% {
            height: 25px;
        }

        30% {
            height: 30px;
        }

        35% {
            height: 35px;
        }

        40% {
            height: 40px;
        }

        45% {
            height: 45px;
        }

        50% {
            height: 50px;
        }

        55% {
            height: 55px;
        }

        60% {
            height: 60px;
        }

        65% {
            height: 65px;
        }

        70% {
            height: 70px;
        }

        75% {
            height: 75px;
        }

        80% {
            height: 80px;
        }

        85% {
            height: 85px;
        }

        90% {
            height: 90px;
        }

        95% {
            height: 95px;
        }

        100% {
            height: auto;
        }
    }

    #entete {
        display: block;
    }

    header {
        display: flex;
        position: static;
        border-bottom: 1px solid black;
        z-index: 0;
    }

    .menu-mob>a {
        border: 1px solid rgba(0, 0, 0, 0.5);
        background-color: rgba(173, 173, 173, 1);
        width: 99.5%;
        text-align: center;
        font-size: larger;
    }

    a.OngletActif {
        background-color: rgb(62, 62, 62);
        color: white;
    }

    a.OngletActif:hover {
        background-color: rgba(62, 62, 62);
    }

    .menu {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .logo-menu {
        display: block;
        max-width: 25%;
        margin-left: 40%;
        right: 0;
    }

    .menu-mob {
        display: none;
        border-top: none;
        width: 100%;
    }

    .menu:hover .logo-menu {
        transform: rotate(90deg);
    }

    .menu:hover .menu-mob {
        display: flex;
        flex-direction: column;
        left: 0;
        right: 0;
        top: 12.5%;
        width: 100%;
        position: absolute;
        max-height: 5%;
    }

    .menu:hover .menu-mob>a {
        z-index: 10;
        display: block;
        animation: deroulement 0.5s forwards;
    }
}