/**
 * Sidebar Frontend - Spinomax
 * CSS séparé de l'admin
 */

/* ========================================
   SIDEBAR PRINCIPALE
   ======================================== */

.sidebar-frontend {position: fixed; left: 0; top: 0; width: 250px; height: 100vh; background: #45243e; z-index: 1000; transition: transform 0.3s ease; overflow-y: auto; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);}
.sidebar-frontend.closed {transform: translateX(-250px);}

/* Logo et titre */
.sidebar-logo {padding: 25px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: center;}
.sidebar-logo-img {max-width: 100%; height: auto; margin-bottom: 10px;}
.sidebar-title {color: #FFF; font-size: 1.5em; font-weight: bold; margin: 0;}
.sidebar-subtitle {color: rgba(255, 255, 255, 0.7); font-size: 0.9em; margin-top: 5px;}

/* Navigation */
.sidebar-nav {padding: 20px 0;}
.sidebar-nav-item {display: block; padding: 12px 25px; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: all 0.3s ease; border-left: 3px solid transparent;}
.sidebar-nav-item:hover {background: rgba(255, 255, 255, 0.05); color: #FF6B35; border-left-color: #FF6B35;}
.sidebar-nav-item.active {background: rgba(255, 107, 53, 0.1); color: #FFF; border-left-color: #FF6B35;}
.sidebar-nav-item-icon {margin-right: 10px; font-size: 1.1em;}

/* ========================================
   BOUTON HAMBURGER
   ======================================== */

.sidebar-toggle {position: fixed; left: 10px; top: 10px; z-index: 1001; background: #FF6B35; border: none; width: 41px; height: 41px; border-radius: 8px; cursor: pointer; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease;}
.sidebar-toggle:hover {background: #E55A2B; transform: scale(1.05);}
.sidebar-toggle-bar {width: 24px; height: 3px; background: white; border-radius: 2px; transition: all 0.3s ease;}
.sidebar-toggle.active .sidebar-toggle-bar:nth-child(1) {transform: rotate(45deg) translate(6px, 6px);}
.sidebar-toggle.active .sidebar-toggle-bar:nth-child(2) {opacity: 0;}
.sidebar-toggle.active .sidebar-toggle-bar:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}

/* ========================================
   CONTENU DÉCALÉ (desktop)
   ======================================== */

.content-with-sidebar {margin-left: 250px; transition: margin-left 0.3s ease; height: 100vh; overflow-y: auto;}
.content-with-sidebar.sidebar-closed {margin-left: 0;}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Sidebar en overlay sur mobile */
    .sidebar-frontend {
        transform: translateX(-250px);
    }
    
    .sidebar-frontend.open {
        transform: translateX(0);
    }
    
    /* Afficher le bouton hamburger */
    .sidebar-toggle {
        display: flex;
    }
    
    /* Pas de décalage du contenu sur mobile */
    .content-with-sidebar {
        margin-left: 0 !important;
    }
}