.user-page-container {  
    width: 100%;  
    min-height: 100vh;  
    padding: clamp(1rem, 3vw, 1.5rem);  
    padding-top: calc(60px + clamp(1rem, 3vw, 1.5rem));  
    box-sizing: border-box;  overflow-x: hidden;  margin-top: 0;
}
.category-filter {
    display: flex;  
    gap: clamp(0.5rem, 2vw, 0.8rem);  
    overflow-x: auto;  
    padding-bottom: clamp(1rem, 3vw, 1.5rem);  
    margin-bottom: clamp(1rem, 3vw, 1.5rem);  
    scrollbar-width: none;  -ms-overflow-style: none;
}
.category-filter::-webkit-scrollbar {  
    display: none;
}
.category-button {
    background-color: transparent;  
    color: white;  
    border: 2px solid rgba(255, 255, 255, 0.3);  
    border-radius: 25px;  
    padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1.2rem, 3vw, 1.5rem);  
    font-size: clamp(0.9rem, 3vw, 1rem);  
    font-weight: 600;  cursor: pointer;  
    transition: all 0.3s ease;  
    white-space: nowrap;  
    -webkit-tap-highlight-color: transparent;  
    flex-shrink: 0;
}
.category-button:active {  
    transform: scale(0.95);
}
.category-button.active {  
    background-color: white; 
    color: black;  
    border-color: white;
}
@media (hover: none) {  
    .category-button:hover {    
        background-color: transparent;    
        color: white;  
    }    
    .category-button.active:hover {    
        background-color: white;    
        color: black;  
    }
    .products-grid {  
        display: grid;  
        grid-template-columns: repeat(2, 1fr);  
        gap: clamp(0.8rem, 3vw, 1.2rem);  
        width: 100%;  
        max-width: 1200px;  
        margin: 0 auto;  
        padding-top: 0;
    }
    /* Petits téléphones */
    @media (max-width: 360px) {  
        .products-grid {    gap: 0.6rem;  }    
        .user-page-container {    
            padding: 0.8rem;    
            padding-top: calc(60px + 0.8rem);  
        }
    }
    /* Tablettes portrait */
    @media (min-width: 600px) {
        .products-grid {    
            grid-template-columns: repeat(3, 1fr);    
            gap: 1.5rem;  
        }    
        .user-page-container {    
            padding: 2rem;    
            padding-top: calc(60px + 2rem);  
        }
    }
    /* Tablettes paysage */
    @media (min-width: 900px) {  
        .products-grid {    
            grid-template-columns: repeat(4, 1fr);    
            gap: 1.5rem;  
        }
    }
    /* Désactiver hover sur tactile */
    @media (hover: none) {  
        .user-header .back-link:hover {    
            background-color: transparent;  
        }
    }
}