/* === NAVBAR COMPONENT === */

.navbar {
    background: var(--background-warm);
    /* backdrop-filter: var(--glass-backdrop-filter) ; */
    border: var( --border-color-light); 
    box-shadow: var(--box-shadow);
}


.navbar:hover {
    box-shadow: var(--box-shadow-hover) !important;
}

.navbar-brand {
    margin-left: var(--spacing-md) ;
    margin-right: var(--spacing-md) ;
}


.navbar-menu {
    margin-right: var(--spacing-md);
    padding-top: var(--spacing-sm);
}

/* Menu items avec animations */
.navbar-item {
    font-weight: var(--font-weight-normal);
    color: var(--primary-color) !important;
    position: relative;
    /* padding-top: var(--spacing-sm); */
    transition: all var(--transition-speed) var(--transition-easing);
    overflow: hidden;
}


.navbar-item:hover {
    background-color: var(--glass-background-strong) !important;
    color: var(--secondary-color) !important;
    text-decoration: none;
    border-radius: var(--border-radius-large);
    transform: translateY(-1px);
    box-shadow: none !important;
}

/* Force avec une spécificité plus élevée */
.navbar .navbar-item:hover {
    background-color: var(--glass-background) !important;
     box-shadow: none !important;
}

/* Force absolue sur tous les pseudo-éléments */
.navbar-item:hover::before,
.navbar-item:hover::after {
    display: none !important;
}


/* État actif */
.navbar-item.is-active {
    color: var(--secondary-color) !important;
    font-weight: var(--font-weight-semibold);
    background-color: var(--glass-background-strong) !important;
    border-radius: var(--border-radius-large);
    position: relative;
}

.navbar-item.is-active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, var(--warm-color), var(--secondary-color));
    border-radius: var(--border-radius-small);
}


/* Burger menu responsive */
.navbar-burger {
    color: var(--primary-color) !important;
    transition: all var(--transition-speed) var(--transition-easing);
}

.navbar-burger:hover {
    background: none;
    transform: rotate(90deg);
}

.navbar-burger.is-active {
    transform: rotate(180deg);
}

.navbar-burger span {
    transition: all var(--transition-speed) var(--transition-easing);
}

/* Menu mobile - override uniquement pour le mobile ouvert */
@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        background: var(--background-warm) !important;
        margin-left: auto;
        margin-right: auto;
        /* border-radius: var(--border-radius-large);
        border-top: var(--glass-border) !important;
        box-shadow: var(--glass-shadow) !important; */
    }
}

@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        animation: slideDown var(--transition-speed) var(--transition-easing);
    }
    
    .navbar-item {
        border-radius: var(--border-radius-small);
        margin: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Animation pour le menu mobile */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Effet de focus pour l'accessibilité */
.navbar-item:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-small);
}

/* Animation des liens avec effet de vague */
@keyframes wave {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.navbar-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    transition: transform var(--transition-speed-slow) var(--transition-easing);
}

.navbar-item:hover::after {
    animation: wave var(--transition-speed-slow) var(--transition-easing);
}

/* === ICONE RESERVATION === */
.navbar-item.reservation-icon {
    color: var(--secondary-color) !important;
    transition: all var(--transition-speed) var(--transition-easing);
    position: relative;
}

.navbar-item.reservation-icon:hover {
    color: var(--secondary-color-hover) !important;
    transform: scale(1.1);
}

.navbar-item.reservation-icon .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-item.reservation-icon i {
    font-size: 1.25rem;
    transition: all var(--transition-speed) var(--transition-easing);
}

.navbar-item.reservation-icon:hover i {
    transform: rotate(10deg);
}

/* Animation d'apparition */
.navbar-item.reservation-icon {
    animation: fadeInScale 0.4s var(--transition-easing);
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive */
@media screen and (max-width: 1023px) {
    .navbar-item.reservation-icon {
        justify-content: flex-start;
        padding-left: 1rem;
    }
}

/* === ANIMATION DU BRAND === */
.brand-animate {
    animation: brandSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
    transition: all var(--transition-speed) var(--transition-easing);
}

@keyframes brandSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px) scale(0.9) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1) translateZ(0);
    }
}

/* Animation au hover du brand */
.brand-animate:hover {
    transform: scale(1.05) translateZ(0);
    transition: transform 0.2s var(--transition-easing);
     box-shadow: none !important;
     border: none;
}

/* Désactiver l'effet glass sur le hover du titre */
.navbar-brand .title.is-navbar.brand-animate:hover {
    background-color: transparent !important;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transform: scale(1.05) translateZ(0);
    border-radius: 0 !important;
}

.brand-animate:hover img {
    filter: brightness(1.1);
    transition: filter 0.2s var(--transition-easing);
}

/* Animation spéciale pour le titre du site */
.title.is-navbar.brand-animate {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    overflow: hidden;
}

.title.is-navbar.brand-animate::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shineHover 10s infinite;
    animation-delay: 2s;
}

.title.is-navbar.brand-animate:hover::after {
    animation: shineHover 1.5s ease-out;
}

/* Animation automatique périodique */
@keyframes shineAuto {
    0%, 85% {
        left: -100%;
    }
    15%, 70% {
        left: 100%;
    }
}

/* Animation lente au hover */
@keyframes shineHover {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}