.sidebar {
      position: fixed;
      top: 0;
      left: -500px; /* cachée à gauche */
      width: 500px;
      height: 100%;
      background-color: white;
      padding-top: 60px;
      transition: 1s ease;
      z-index: 1000;
      color: rgb(10, 28, 46);
      font-family: 'LXGW Marker Gothic', sans-serif;  
      font-size: 15px;
      overflow-y: scroll;
       font-family: 'LXGW Marker Gothic', sans-serif; 
       box-sizing: border-box;
    }

    .sidebar.active {
      left: 0; /* visible */
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
        }

    .sidebar ul li {
      padding: 15px 20px;
      padding-left: 50px;
    }
     #acceuil {
      padding: 20px;
      border-bottom: 1px solid rgb(225, 228, 233);
      padding-left: 50px;
    }

    details ul{
      border-bottom: 1px solid rgb(225, 228, 233);
    }
    .sidebar ul li a {
      color: rgb(10, 28, 46);
      text-decoration: none;
      font-weight: 500;
    }
    summary a{
      padding-left: 5px;
      margin-bottom: 5px;
    }
    .sidebar .title:hover{
      background-color: rgba(19, 42, 73, 0.283);
    }
    /* Masquer l'icône native */
    details summary {
      list-style: none;
    }

    /* Supprimer le curseur triangle */
    details summary::-webkit-details-marker {
      display: none;
    }

    /* Styliser l’icône personnalisée */
    summary .icon {
      display: inline-block;
      margin-right: 8px;
      transition: transform 0.3s ease;
    }

    /* Tourner l’icône quand ouvert */
    details[open] > summary .icon {
      transform: rotate(180deg);
    }