/* Sidebar coulissante */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 60px;                     /* largeur réduite quand rétractée */
    background: #822EF5;
    padding-top: 20px;
    border-right: 1px solid rgb(255, 255, 255)EF5;
    transition: width 0.3s ease;
    overflow: hidden;
    z-index: 999;
}
.sidebar li a {
    text-decoration: none; /* supprime la barre sous le texte */
    color: inherit;        /* conserve la couleur du li */
    display: flex;
    align-items: center;   /* pour garder l’alignement icône + texte */
}


/* Bloc logo + nom */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    opacity: 0;                 /* caché tant que sidebar est rétractée */
    transition: opacity 0.3s ease;
}

/* Affichage au survol (PC) */
.sidebar:hover .sidebar-brand {
    opacity: 1;
}

/* Logo */
.sidebar-logo {
    width: 55px;                /* taille adaptée à ta sidebar */
    height: auto;
    margin-bottom: 8px;
}

/* Nom boutique */
.sidebar-title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}

/* Mobile : affichage quand active */
@media screen and (max-width: 900px) {
    .sidebar.active .sidebar-brand {
        opacity: 1;
    }
}


/* Déploiement au survol */
.sidebar:hover {
    width: 220px;                    /* largeur complète */
}

/* Titre (optionnel, seulement visible au déploiement) */
.sidebar h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 16px; /* Taille réduite */
}


/* Affiche le titre au survol */
.sidebar:hover h2 {
    opacity: 1;
}

/* Liste des items */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Items individuels */
.sidebar li {
    margin: 10px 0;
    padding: 10px;
    background: #822EF5;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    transition: background 0.2s, padding-left 0.3s ease;
}

/* Survol léger sur les boutons */
.sidebar li:hover {
    background: #adadad;
    padding-left: 20px;  /* léger effet de déplacement */
}

/* Icônes ou texte caché quand rétractée */
.sidebar li span {
    margin-left: 10px;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

/* Affiche le texte au survol de la sidebar */
.sidebar:hover li span {
    opacity: 1;
}

/* Tablettes et mobiles */
@media screen and (max-width: 900px) {
    .sidebar {
        position: fixed;
        width: 0;
        overflow-x: hidden;
        transition: width 0.3s ease;
    }

    /* Quand on ajoute la classe .active via JS ou hover */
    .sidebar.active {
        width: 200px;
    }

    .sidebar:hover h2,
    .sidebar.active h2 {
        opacity: 1;
    }

    .sidebar li span {
        opacity: 0;
    }

    .sidebar:hover li span,
    .sidebar.active li span {
        opacity: 1;
    }
}

/* Optionnel : bouton hamburger */
.hamburger {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1000;
    width: 35px;
    height: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger div {
    background: #fff;
    height: 5px;
    border-radius: 2px;
}

@media screen and (max-width: 900px) {
    .hamburger {
        display: flex;
    }
}

/* Petite langette visible sur mobile pour la sidebar */
@media screen and (max-width: 900px) {
    .sidebar::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -20px; /* légèrement à l'extérieur */
        width: 20px;
        height: 60px;
        background: #822EF5;
        border-radius: 0 8px 8px 0;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 1001;
    }

    /* Rendre le ::before cliquable avec le hamburger */
    .sidebar.active::before {
        display: none; /* disparaît quand sidebar ouverte */
    }
}