body {
      margin: 0;
      font-family: sans-serif;
      background: #f9f9f9;
      transition: padding-left 0.3s ease;
    }



    /* BOUTON BURGER */
    .menu-toggle {
      font-size: 24px;
      color: #198754;
      cursor: pointer;
      position: fixed;
      top: 15px;
      left: 15px;
      z-index: 1100;
      background: white;
      border-radius: 5px;
      padding: 5px 10px;
      box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
    }

    /* MENU */


.menu-vertical {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: white;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.menu-vertical.active {
transform: translateX(0);
}


#menu {
  margin-top: 0;
  padding-top: 0;
}

    body.menu-open {
      padding-left: 250px;
    }

 .logo {
  padding: 15px 20px;
  background: #e9fbe5;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #198754;
  border-bottom: 1px solid #ddd;
}
  .menu-vertical ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  }


    .menu-vertical ul li a {
      display: block;
      padding: 12px 20px;
      text-decoration: none;
      color: #198754;
      border-bottom: 1px solid #eee;
    }

    .menu-vertical ul li a:hover {
      background: #f0f0f0;
    }

    /* SOUS-MENUS */
    .menu-vertical ul ul {
      display: none;
      flex-direction: column;
      background: #f3fdf1;
    }

    .menu-vertical li.open > ul {
      display: flex;
    }

    .menu-vertical ul ul ul {
      background: #ffffff;
      padding-left: 15px;
    }

    @media (max-width: 768px) {
      body.menu-open {
        padding-left: 0;
      }
    }


 .menu {
  padding: 15px 20px;
  background: #e9fbe5;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #198754;
  border-bottom: 1px solid #ddd;
}