/* --- VARIABLES & RESET --- */
:root {
    --primary-color: #000;
    --accent-beige: #B49282;
    --bg-gray: #f8f9fa;
    --text-dark: #333;
}

* {
    box-sizing: border-box; /* Empêche les problèmes de largeur */
}

/* --- BARRE DE NAVIGATION --- */
.categories-nav {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    width: 100%;
    position: relative;
    z-index: 90;
    /* Ombre légère */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); 
    padding: 0 10px; /* Ajoute un peu de padding général pour les petits écrans */
}

.cat-list {
    list-style: none;
    margin: 0 auto; /* Centre le bloc dans la page */
    padding: 0; /* Pas de padding ici, il est sur .categories-nav */
    display: flex;
    justify-content: center; /* Centre les éléments */
    flex-wrap: wrap; /* ⭐ C'EST ICI QUE LES ÉLÉMENTS PASSENT À LA LIGNE ⭐ */
    gap: 20px; /* Espacement réduit pour les petits écrans */
    max-width: 1200px; /* Aligne la largeur avec le reste du site */
}

.cat-item {
    margin: 0;
    padding: 12px 0; /* Padding vertical réduit pour moins d'espace vertical */
    flex-shrink: 0; /* Empêche les éléments de se réduire */
}

.cat-link {
    text-decoration: none;
    color: var(--text-dark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem; /* Taille de police légèrement réduite */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 5px;
    display: block;
    white-space: nowrap; /* Empêche le texte d'un lien de se couper sur plusieurs lignes */
}

/* Effet de soulignement animé au survol */
.cat-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--accent-beige);
    transition: width 0.3s ease, left 0.3s ease;
}

.cat-link:hover {
    color: var(--accent-beige);
}

.cat-link:hover::after {
    width: 100%;
    left: 0;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .categories-nav {
        padding: 0 5px; /* Padding latéral encore plus petit sur très petits écrans */
    }
    
    .cat-list {
        gap: 15px; /* Espacement encore réduit sur mobile */
    }

    .cat-item {
        padding: 10px 5px; /* Padding vertical et horizontal des items */
    }

    .cat-link {
        font-size: 0.85rem; /* Taille de police minimale sur mobile */
    }
}