/* Navbar Styles */

/* Prévenir le débordement horizontal */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Smooth scroll pour tout le document */
html {
    scroll-behavior: smooth;
}

/* Styles pour les liens de navigation */
.smooth-scroll {
    transition: all 0.3s ease-in-out;
    position: relative;
}

/* Effet de soulignement au hover pour la navbar desktop */
.smooth-scroll::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: currentColor;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.smooth-scroll:hover::after {
    width: 100%;
}

/* Styles spéciaux pour les icônes */
.smooth-scroll i {
    transition: all 0.3s ease-in-out;
}

.smooth-scroll:hover i {
    color: inherit;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* Animation pour le menu mobile */
.mobile-nav-transition {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Styles pour améliorer la visibilité des liens actifs */
.smooth-scroll:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease-in-out;
}

/* Animation pour les boutons de la navbar */
.navbar button, .navbar a {
    transition: all 0.2s ease-in-out;
}

.navbar button:hover, .navbar a:hover {
    transform: translateY(-1px);
}

/* Styles pour le menu mobile */
#mobile-nav {
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    position: fixed !important;
    z-index: 10000 !important;
    top: 10px !important; /* Ajustez selon la hauteur de votre navbar */
    right: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Styles pour les liens du menu mobile */
.mobile-nav-link {
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.mobile-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease-in-out;
}

.mobile-nav-link:hover::before {
    left: 100%;
}

.mobile-nav-link:hover {
    background-color: rgba(59, 130, 246, 0.05);
    transform: translateX(-4px);
}

/* Animation pour les icônes du menu mobile */
#open-btn, #close-btn {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Animations pour les boutons d'action */
.navbar a[href^="tel"] {
    position: relative;
    overflow: hidden;
}

.navbar a[href^="tel"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease-in-out;
}

.navbar a[href^="tel"]:hover::before {
    left: 100%;
}

/* Animation de pulsation pour le bouton de devis */
@keyframes pulse-subtle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.navbar a[href^="tel"]:last-child {
    animation: pulse-subtle 3s ease-in-out infinite;
}

.navbar a[href^="tel"]:last-child:hover {
    animation: none;
}