.categories_list{
    padding:12px;
    display: flex;
    justify-content: center;
    border: 1px solid #7e2121;
    border-radius: 30px;
}
.categories_list ul {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.categories_list ul li{
    list-style: none;
    height: 100%;
    padding: 0.5rem 1rem;
    font-weight: 300;
    font-size: 19px;
    cursor: pointer;
    margin-left: 9px;
    border-radius: 20px;
}
.categories_list ul li:hover{
    background-color: #faf3f34f;
}
.categories_list ul li.active{
    background-color: #7e2121;
}

/* 📱 Responsive : Mobile & Tablette */
@media (max-width: 768px) {
    .categories_list {
        justify-content: flex-start;
        margin-top: 20%;
        overflow-x: auto;      /* permet de scroller horizontalement */
        white-space: nowrap;   /* empêche les items de se couper */
         /* cache scrollbar Firefox */
         -webkit-overflow-scrolling: touch;
         padding-bottom: 6px; 
         border:#7e2121;
         box-shadow: 1PX 2PX 12PX rgb(62, 27, 27);
         
    }

    .categories_list::-webkit-scrollbar {
        width: 2px;
        overflow: hidden;
        border-radius: 90px;
        left: 30%;
        height: 7px;/* cache scrollbar Chrome/Safari */
    }
    .categories_list::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 80%;
      }
      .categories_list::-webkit-scrollbar-thumb {
        background-color: rgb(55, 19, 19);
        border-radius: 80px;
      }
    .categories_list ul {
        display: inline-flex;  /* réduit la largeur au contenu */
        flex-wrap: nowrap;     /* interdit retour à la ligne */
        min-width: max-content;
    }

    .categories_list ul li {
        font-size: 16px;
        flex-shrink: 0; /* empêche les items de rétrécir */
    }
    
}

/* 📱 Très petits téléphones */
@media (max-width: 480px) {
    .categories_list ul li {
        font-size: 14px;
        padding: 0.4rem 0.7rem;
    }
}
@media (max-width: 769px) {
    .sidebar {
      position: sticky;
      bottom: 20;
      width: 160px;
      background-color: #191717;
      transition: all 0.4s ease;
  
    }
    .sidebar-toggle i{
      bottom: 4;
    }
    .sidebar_container{
      top: 205;
    }
  }