/* ============================================
   RDConnect Frontend Logo Styles
   Optimisation pour pages publiques
   ============================================ */

/* Logo dans header frontend */
.header-area .logo img {
    max-height: 45px;
    width: auto;
    transition: all 0.3s ease;
}

.header-area .logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Logo dans footer frontend */
footer .logo img {
    max-height: 40px;
    width: auto;
    margin-bottom: 20px;
}

/* Styles responsive pour logo frontend */
@media (max-width: 991px) {
    .header-area .logo img {
        max-height: 40px;
    }
}

@media (max-width: 767px) {
    .header-area .logo img {
        max-height: 35px;
    }
    
    footer .logo img {
        max-height: 35px;
    }
}

/* Menu mobile - logo optimisé */
@media (max-width: 991px) {
    .main-nav .logo {
        display: inline-flex;
        align-items: center;
    }
}

/* Animation de chargement du logo */
.header-area .logo img,
footer .logo img {
    animation: logoFadeIn 0.5s ease-out;
}

@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sticky header - logo optimisé */
.header-area.header-sticky.sticky .logo img {
    max-height: 38px;
    transition: all 0.3s ease;
}

/* Logo dans les variantes de couleur */
.header-area.header-sticky {
    
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Dark mode support pour frontend */
@media (prefers-color-scheme: dark) {
    .header-area .logo img {
        filter: brightness(0) invert(1);
    }
    
    /* Logo blanc déjà chargé dans footer - pas de modification nécessaire */
}

/* Optimisation de performance */
.logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Print styles */
@media print {
    .header-area .logo img,
    footer .logo img {
        max-height: 50px;
    }
}

/* ============================================
   FIX MENU HAMBURGER MOBILE - 3 BARRES
   Correction: Afficher 3 barres au lieu de X
   ============================================ */

/* Force l'affichage du menu hamburger avec 3 barres sur mobile */
@media (max-width: 991px) {
    .header-area .main-nav .menu-trigger {
        display: block !important;
        cursor: pointer;
        position: absolute;
        top: 23px;
        width: 32px;
        height: 40px;
        text-indent: -9999em;
        z-index: 99;
        right: 20px;
    }
    
    /* FORCER les 3 barres horizontales - État initial */
    .header-area .main-nav .menu-trigger span,
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        background-color: #012C4C !important;
        display: block !important;
        position: absolute;
        width: 30px !important;
        height: 3px !important;
        left: 0;
        transition: all 0.4s ease;
    }
    
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        content: "" !important;
    }
    
    /* Position de la barre du milieu */
    .header-area .main-nav .menu-trigger span {
        top: 16px !important;
        transform: none !important;
    }
    
    /* Position de la barre du haut */
    .header-area .main-nav .menu-trigger span:before {
        top: -10px !important;
        transform: none !important;
    }
    
    /* Position de la barre du bas */
    .header-area .main-nav .menu-trigger span:after {
        top: 10px !important;
        transform: none !important;
    }
    
    /* Animation quand le menu est OUVERT (devient X) */
    .header-area .main-nav .menu-trigger.active span {
        background-color: transparent !important;
    }
    
    .header-area .main-nav .menu-trigger.active span:before {
        transform: translateY(10px) rotate(45deg) !important;
        background-color: #012C4C !important;
        top: 0 !important;
    }
    
    .header-area .main-nav .menu-trigger.active span:after {
        transform: translateY(-10px) rotate(-45deg) !important;
        background-color: #012C4C !important;
        top: 0 !important;
    }
}

/* Cacher le menu desktop sur mobile */
@media (max-width: 991px) {
    .header-area .main-nav .nav {
        display: none;
    }
    
    /* Afficher le menu quand il est activé */
    .header-area .main-nav .nav.active {
        display: block;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 20px;
        z-index: 999;
    }
    
    .header-area .main-nav .nav.active li {
        display: block;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 0;
    }
    
    .header-area .main-nav .nav.active li:last-child {
        border-bottom: none;
    }
}