@media print {
  nav {
    display: none;
  }
}

body {                                              /* à supprimer ?*/
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    nav {
      position: relative;
      height: 50px;
      background-color: transparent;
    }

    .menu-btn {
      position: absolute;
      top: 15px;
      right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      background: none;
      border: none;
      cursor: pointer;
      transition: all 0.5s ease-in-out;
    }

    .line {
      width: 24px;
      height: 4px;
      background-color: #0066cc;
      border-radius: 4px;
      transition: all 0.5s ease-in-out;
    }

    .line:not(:last-child) {
      margin-bottom: 4px;
    }

    .menu-btn.active .line-1 {
      transform: rotate(45deg) translate(4px, 4px);
    }

    .menu-btn.active .line-2 {
      opacity: 0;
    }

    .menu-btn.active .line-3 {
      transform: rotate(-45deg) translate(4px, -4px);
    }

    nav .menu {
      position: fixed;
      top: 50px;
      right: -250px;
      width: 250px;
      height: calc(100vh - 50px);
      overflow: auto;
      background-color: transparent;
      transition: right 0.3s ease-in-out;
    }

    nav .menu li {
      display: block;
    }

    nav .menu li a {
      color: #fff;
      padding: 15px 20px;
      display: block;
      background-color: #5333ED;
      border-radius: 20px;
      margin-bottom: 10px;
      text-decoration: none;
      font-weight: bold;
      font-size: 18px;
    }

    nav .menu li a:hover {
      background-color: #004c99;
    }

    nav .menu-btn.active ~ .menu {
      right: 0;
    }

    main {                                    /*.   A supprmer ?*/
      margin-top: 70px;
    }