/* ============================================
   🍷 NAVBARS BISTRONOMIE — Styles harmonisés
   Direction Artistique : Marie
   Palette globale bistronomie pour les navbars
   ============================================ */

/* ============================================
   VARIABLES CSS — Palette Bistronomie
   ============================================ */
:root {
    /* Couleurs principales — mappées sur le système universel 60-30-10 */
    --bistro-bordeaux: var(--color-accent, #8B1538);
    --bistro-turquoise: var(--color-primary, #6B8E8E);
    --bistro-black: #1A1A1A;
    --bistro-light: #F5F5F5;
    --bistro-white: #FFFFFF;
    --bistro-gold: var(--color-accent, #D4AF37);

    /* Couleurs texte */
    --bistro-text-primary: #1A1A1A;
    --bistro-text-inverse: #FFFFFF;
    --bistro-text-secondary: rgba(255,255,255,0.85);

    /* Accents interaction */
    --bistro-bordeaux-hover: var(--color-secondary, #A91B4D);
    --bistro-turquoise-hover: var(--color-secondary, #557E7E);
}

/* ============================================
   NAVBAR SUPÉRIEURE (navbar-bistronomie)
   ============================================ */
.navbar-bistronomie {
    background: linear-gradient(135deg, 
        var(--bistro-black) 0%, 
        #2A2A2A 100%) !important;
    border-bottom: 3px solid var(--bistro-bordeaux) !important;
    box-shadow: 
        0 4px 20px rgba(var(--color-accent-rgb, 139, 21, 56), 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.05) !important;
    color: var(--bistro-text-inverse) !important;
}

.navbar-bistronomie .navbar-brand {
    color: var(--bistro-text-inverse) !important;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.navbar-bistronomie .navbar-brand:hover {
    color: var(--bistro-gold) !important;
}

.navbar-bistronomie .menu-title h4 {
    color: var(--bistro-turquoise) !important;
    font-weight: 600;
    font-size: 1rem;
}

.navbar-bistronomie img {
    filter: drop-shadow(0 2px 8px rgba(var(--color-accent-rgb, 139, 21, 56), 0.4));
}

/* ============================================
   NAVBAR INFÉRIEURE (navbar-bistronomie-bottom)
   ============================================ */
.navbar-bistronomie-bottom {
    background: linear-gradient(135deg, 
        var(--bistro-black) 0%, 
        #2A2A2A 100%) !important;
    border-top: 3px solid var(--bistro-bordeaux) !important;
    box-shadow: 
        0 -8px 32px rgba(0, 0, 0, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.08) !important;
    color: var(--bistro-text-inverse) !important;
}

/* Boutons triggers (compacts) */
.navbar-bistronomie-bottom .bottom-nav__trigger {
    color: var(--bistro-bordeaux) !important;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.navbar-bistronomie-bottom .bottom-nav__trigger i,
.navbar-bistronomie-bottom .bottom-nav__arrow {
    color: var(--bistro-bordeaux) !important;
}

/* Liens de navigation */
.navbar-bistronomie-bottom .bottom-nav__page-link,
.navbar-bistronomie-bottom button.bottom-nav__page-link,
.navbar-bistronomie-bottom a.bottom-nav__page-link {
    color: var(--bistro-text-secondary) !important;
    background: transparent !important;
    transition: all 0.25s ease;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.3) !important;
    text-decoration: none !important;
}

.navbar-bistronomie-bottom .bottom-nav__page-link:hover {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.2) !important;
    color: var(--bistro-bordeaux) !important;
    border-color: rgba(var(--color-accent-rgb, 139, 21, 56), 0.5);
}

.navbar-bistronomie-bottom .bottom-nav__page-link.active {
    background: var(--bistro-bordeaux) !important;
    color: var(--bistro-white) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb, 139, 21, 56), 0.4);
}

/* Barre de recherche */
.navbar-bistronomie-bottom .bottom-nav__search-bar {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.12) !important;
    border: 2px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.4) !important;
    border-radius: 50px;
}

.navbar-bistronomie-bottom .bottom-nav__search-bar i {
    color: var(--bistro-bordeaux) !important;
}

.navbar-bistronomie-bottom .bottom-nav__input {
    color: var(--bistro-text-inverse) !important;
}

.navbar-bistronomie-bottom .bottom-nav__input::placeholder {
    color: var(--bistro-text-secondary) !important;
}

/* Chips filtres */
.navbar-bistronomie-bottom .bottom-nav__chip {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.15) !important;
    border: 1px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.4) !important;
    color: var(--bistro-text-inverse) !important;
    font-weight: 500;
    border-radius: 20px;
}

.navbar-bistronomie-bottom .bottom-nav__chip:hover {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.3) !important;
    border-color: var(--bistro-bordeaux) !important;
}

.navbar-bistronomie-bottom .bottom-nav__chip.active {
    background: var(--bistro-bordeaux) !important;
    color: var(--bistro-white) !important;
    border-color: transparent !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb, 139, 21, 56), 0.4);
}

/* Panneau filtres avancés */
.navbar-bistronomie-bottom .bottom-nav__advanced-panel {
    background: linear-gradient(180deg, 
        rgba(26, 26, 26, 0.98) 0%, 
        rgba(42, 42, 42, 0.98) 100%) !important;
    border: 2px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.3) !important;
    border-radius: 16px;
}

.navbar-bistronomie-bottom .bottom-nav__filter-title {
    color: var(--bistro-bordeaux) !important;
    font-weight: 700;
    text-transform: uppercase;
}

/* Bouton collapse */
.navbar-bistronomie-bottom .bottom-nav__collapse-btn {
    background: linear-gradient(180deg, 
        var(--bistro-black) 0%, 
        #2A2A2A 100%) !important;
    color: var(--bistro-bordeaux) !important;
    border: 2px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.5) !important;
    border-bottom: none !important;
}

/* Badge compteur */
.navbar-bistronomie-bottom .bottom-nav__badge {
    background: linear-gradient(135deg, 
        var(--bistro-bordeaux) 0%, 
        #A91B4D 100%) !important;
    color: var(--bistro-white) !important;
    font-weight: 800;
}

/* Langues */
.navbar-bistronomie-bottom .bottom-nav__lang-flag {
    color: var(--bistro-text-secondary) !important;
}

.navbar-bistronomie-bottom .bottom-nav__lang-flag.active {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.25) !important;
    color: var(--bistro-bordeaux) !important;
}

/* Bouton carte cadeau */
.navbar-bistronomie-bottom .bottom-nav__gift-card {
    background: linear-gradient(135deg, 
        rgba(var(--color-accent-rgb, 139, 21, 56), 0.2) 0%, 
        rgba(169, 27, 77, 0.3) 100%) !important;
    border: 2px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.5) !important;
    color: var(--bistro-bordeaux) !important;
    font-weight: 600;
    border-radius: 12px;
}

.navbar-bistronomie-bottom .bottom-nav__gift-card:hover {
    background: linear-gradient(135deg, 
        rgba(var(--color-accent-rgb, 139, 21, 56), 0.4) 0%, 
        rgba(169, 27, 77, 0.5) 100%) !important;
    color: var(--bistro-white) !important;
    transform: scale(1.05);
}

/* Boutons actions */
.navbar-bistronomie-bottom .bottom-nav__clear,
.navbar-bistronomie-bottom .bottom-nav__action-btn {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.15) !important;
    color: var(--bistro-text-inverse) !important;
    border: 1px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.3) !important;
}

.navbar-bistronomie-bottom .bottom-nav__clear:hover,
.navbar-bistronomie-bottom .bottom-nav__action-btn:hover {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.3) !important;
}

/* Compteur résultats */
.navbar-bistronomie-bottom .bottom-nav__count {
    color: var(--bistro-bordeaux) !important;
    font-weight: 600;
}

/* ============================================
   PANNEAU RÉSULTATS DE RECHERCHE
   ============================================ */
.search-results-panel.navbar-bistronomie-bottom {
    background: linear-gradient(180deg, 
        rgba(26, 26, 26, 0.98) 0%, 
        rgba(42, 42, 42, 0.98) 100%);
    border: 2px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.35);
    border-bottom: none;
    color: var(--bistro-text-inverse);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__header {
    border-bottom: 1px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.25);
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__summary {
    color: var(--bistro-text-inverse);
    font-weight: 600;
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__summary i {
    color: var(--bistro-bordeaux);
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__toggle {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.15);
    border: 1px solid rgba(var(--color-accent-rgb, 139, 21, 56), 0.4);
    color: var(--bistro-bordeaux);
    font-weight: 600;
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__toggle:hover {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.3);
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__item {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.08);
    border: 1px solid transparent;
    border-radius: 10px;
    margin-bottom: 0.35rem;
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__item:hover {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.18);
    border-color: rgba(var(--color-accent-rgb, 139, 21, 56), 0.4);
    transform: translateX(4px);
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__item-name {
    color: var(--bistro-text-inverse);
    font-weight: 600;
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__item-section {
    color: var(--bistro-text-secondary);
}

.search-results-panel.navbar-bistronomie-bottom .search-results-panel__item-price {
    color: var(--bistro-bordeaux);
    font-weight: 700;
}

/* ============================================
   TABS HEADER (Navigation supérieure)
   ============================================ */
.tabs-header--bistronomie {
    background: linear-gradient(135deg, 
        var(--bistro-black) 0%, 
        #2A2A2A 100%) !important;
    border-bottom: 3px solid var(--bistro-bordeaux) !important;
    box-shadow: 0 2px 12px rgba(var(--color-accent-rgb, 139, 21, 56), 0.3);
}

.tabs-header--bistronomie .tabs-header__link {
    color: var(--bistro-text-secondary) !important;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

.tabs-header--bistronomie .tabs-header__link:hover {
    background: rgba(var(--color-accent-rgb, 139, 21, 56), 0.15) !important;
    color: var(--bistro-bordeaux) !important;
    border-color: rgba(var(--color-accent-rgb, 139, 21, 56), 0.3);
}

.tabs-header--bistronomie .tabs-header__link.active {
    background: var(--bistro-bordeaux) !important;
    color: var(--bistro-white) !important;
    border-color: var(--bistro-bordeaux) !important;
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb, 139, 21, 56), 0.4);
}

/* ============================================
   RESPONSIVE — Mobile First
   ============================================ */
@media (max-width: 768px) {
    .navbar-bistronomie .navbar-brand {
        font-size: 1.1rem;
    }
    
    .navbar-bistronomie-bottom .bottom-nav__trigger {
        font-size: 0.8rem;
        padding: 0.6rem 0.85rem;
    }
    
    .tabs-header--bistronomie .tabs-header__link {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .navbar-bistronomie .menu-title h4 {
        font-size: 0.9rem;
    }
    
    .navbar-bistronomie-bottom .bottom-nav__page-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .tabs-header--bistronomie .tabs-header__link {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}