/**
 * NAVBAR - Styles centralisés
 * ProClimat Congo - Système de gestion de contenu
 * 
 * Ce fichier contient TOUS les styles relatifs à la navbar
 * pour le site public et le back-office
 */

/* =============================================
   VARIABLES CSS POUR LA NAVBAR - CHARTE OFFICIELLE
   ============================================= */
:root {
    /* Charte graphique ProClimat Congo */
    --navbar-primary-color: #66BB6A;
    --navbar-primary-dark: #2e7d32;
    --navbar-bg-white: #ffffff;
    --navbar-text-color: #333333;
    --navbar-text-muted: #6c757d;
    
    /* Dimensions et comportement */
    --navbar-height: 80px;
    --navbar-bg: rgba(255, 255, 255, 0.98);
    --navbar-shadow: 0 2px 20px rgba(0,0,0,0.1);
    --navbar-z-index: 99999;
    --navbar-transition: all 0.3s ease;
    
    /* Couleurs des liens */
    --nav-link-color: #333333;
    --nav-link-hover: #66BB6A;
    --nav-link-active: #66BB6A;
    
    /* Dropdowns */
    --dropdown-bg: #ffffff;
    --dropdown-shadow: 0 2px 10px rgba(0,0,0,0.08);
    --dropdown-border-radius: 10px;
}

/* =============================================
   PADDING BODY POUR NAVBAR FIXE
   ============================================= */
/* Padding uniquement pour le site public (pas le back-office en desktop) */
body:not(.backoffice) {
    padding-top: var(--navbar-height) !important;
}

/* Padding pour le back-office en mobile uniquement (quand navbar mobile visible) */
@media (max-width: 991.98px) {
    body.backoffice {
        padding-top: var(--navbar-height) !important;
    }
}

/* =============================================
   NAVBAR PRINCIPALE - FOND BLANC UNIQUEMENT
   ============================================= */
.navbar-main,
nav.navbar {
    background: var(--navbar-bg-white) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: var(--navbar-shadow) !important;
    transition: var(--navbar-transition) !important;
    z-index: var(--navbar-z-index) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: var(--navbar-height) !important;
    overflow: visible !important;
}

.navbar-expand-lg {
    position: fixed !important;
    top: 0 !important;
    z-index: var(--navbar-z-index) !important;
}

/* =============================================
   NAVBAR BRAND (LOGO)
   ============================================= */
.navbar-brand {
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: var(--nav-link-hover) !important;
    transition: var(--navbar-transition) !important;
}

.navbar-brand:hover {
    color: var(--navbar-primary-color) !important;
    transform: scale(1.05);
}

/* =============================================
   LIENS DE NAVIGATION
   ============================================= */
.navbar-nav .nav-link {
    font-weight: 500 !important;
    color: var(--nav-link-color) !important;
    padding: 0.75rem 1rem !important;
    transition: var(--navbar-transition) !important;
    position: relative !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--navbar-primary-color) !important;
}

/* Effet de soulignement animé - Vert officiel */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--navbar-primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 80%;
}

/* =============================================
   DROPDOWNS
   ============================================= */
.navbar .dropdown {
    position: relative;
}

.navbar .dropdown-toggle {
    cursor: pointer !important;
    user-select: none;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

.navbar .dropdown-toggle::after {
    transition: transform 0.3s ease;
}

.navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    border: none !important;
    box-shadow: var(--dropdown-shadow) !important;
    border-radius: var(--dropdown-border-radius) !important;
    padding: 0.5rem 0 !important;
    background: var(--dropdown-bg) !important;
    margin-top: 0.5rem !important;
    /* Styles de base communs */
    display: none; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

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

.dropdown-item {
    padding: 0.75rem 1.5rem !important;
    transition: var(--navbar-transition) !important;
    color: var(--nav-link-color) !important;
}

.dropdown-item:hover {
    background-color: #F1F8E9 !important;
    color: var(--navbar-primary-color) !important;
    transform: translateX(5px);
}

.dropdown-item:active {
    background-color: #E8F5E8 !important;
}

/* Icônes dans les dropdowns */
.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
}

/* =============================================
   NAVBAR TOGGLER (BOUTON HAMBURGER MOBILE)
   ============================================= */
.navbar-toggler {
    border: none !important;
    padding: 0.5rem !important;
    transition: var(--navbar-transition) !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2366BB6A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.5rem;
    height: 1.5rem;
}

.navbar-toggler:hover .navbar-toggler-icon {
    transform: scale(1.1);
}

/* =============================================
   NAVBAR COLLAPSE (MENU MOBILE)
   ============================================= */
.navbar-collapse {
    transition: var(--navbar-transition) !important;
}

/* Desktop : Pas de scrollbar, le contenu doit dépasser (pour les dropdowns) */
@media (min-width: 992px) {
    .navbar-collapse {
        overflow: visible !important;
        max-height: none !important;
    }
}

/* Mobile : Scroll vertical autorisé si le menu est trop long */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Bloquer le scroll du body quand la navbar mobile est ouverte */
body.navbar-open {
    overflow: hidden !important;
}

/* CRITIQUE : Forcer l'affichage du collapse quand la classe .show est présente */
.navbar-collapse.collapse.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: calc(100vh - var(--navbar-height)) !important;
    overflow-y: auto !important;
}

/* CRITIQUE : S'assurer que le collapse est caché par défaut (MOBILE UNIQUEMENT) */
@media (max-width: 991.98px) {
    .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }
}

/* =============================================
   DESKTOP - DROPDOWN FONCTIONNEL
   ============================================= */
@media (min-width: 992px) {
    /* Styles spécifiques Desktop */
    .navbar .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 99999 !important;
        min-width: 250px !important;
        transform: translateY(-10px); /* Position initiale pour animation */
    }
    
    /* Afficher le dropdown quand il a la classe .show */
    .navbar .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    /* SOLUTION DE SECOURS : Afficher aussi au survol (Hover) sur Desktop
       Cela garantit que le menu est accessible même si le JS de clic échoue */
    .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    /* Styles des items du dropdown en desktop */
    .navbar .dropdown-item {
        padding: 0.75rem 1.5rem !important;
        transition: var(--navbar-transition) !important;
        color: var(--nav-link-color) !important;
    }
    
    .navbar .dropdown-item:hover {
        background-color: #F1F8E9 !important;
        color: var(--navbar-primary-color) !important;
        transform: translateX(5px);
    }
}

/* Animation du menu mobile */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--navbar-bg);
        padding: 1rem;
        margin-top: 1rem;
        border-radius: var(--dropdown-border-radius);
        box-shadow: var(--dropdown-shadow);
    }
    
    .navbar-nav {
        gap: 0.5rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 8px;
        white-space: normal !important; /* Permettre le retour à la ligne */
        word-wrap: break-word !important; /* Couper les mots longs si nécessaire */
        line-height: 1.4 !important; /* Meilleur espacement entre les lignes */
        text-align: left !important; /* Aligner le texte à gauche */
    }
    
    .navbar-nav .nav-link:hover {
        background-color: #F1F8E9;
    }
    
    .navbar-nav .nav-link::after {
        display: none;
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: none;
        background: transparent;
        padding-left: 1rem;
        position: static !important;
        float: none !important;
        width: 100% !important;
        /* Forcer l'affichage en mobile - le JS gère la classe .show */
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    
    .dropdown-item {
        padding: 0.5rem 1rem !important;
        border-radius: 6px;
        white-space: normal !important; /* Permettre le retour à la ligne pour les sous-menus */
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }
}

/* =============================================
   NAVBAR SCROLLED (EFFET AU SCROLL) - FOND BLANC
   ============================================= */
.navbar-main.scrolled,
nav.navbar.scrolled {
    background: var(--navbar-bg-white) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.15) !important;
    height: 70px !important;
}

.navbar-main.scrolled .navbar-brand,
nav.navbar.scrolled .navbar-brand {
    font-size: 1.3rem !important;
}

/* =============================================
   NAVBAR MOBILE ADMIN (BACK-OFFICE) - CHARTE BLANCHE + VERT
   ============================================= */
.navbar-mobile-admin {
    background: var(--navbar-bg-white) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 3px solid var(--navbar-primary-color);
    /* Scroll vertical pour menu long */
    max-height: 100vh;
    overflow-y: auto;
}

/* CRITIQUE : Forcer l'affichage du collapse dans la navbar mobile admin */
.navbar-mobile-admin .navbar-collapse.collapse.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    transform: scaleY(1) !important;
}

/* CRITIQUE : Masquer le collapse par défaut dans la navbar mobile admin */
.navbar-mobile-admin .navbar-collapse.collapse:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transform: scaleY(0) !important;
}

.navbar-mobile-admin .navbar-brand {
    color: var(--navbar-primary-color) !important;
    font-weight: 700;
}

.navbar-mobile-admin .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2366BB6A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-mobile-admin .nav-link {
    color: var(--navbar-text-color) !important;
    transition: var(--navbar-transition);
}

.navbar-mobile-admin .nav-link:hover {
    color: var(--navbar-primary-color) !important;
    background-color: #F1F8E9;
    border-radius: 6px;
}

.navbar-mobile-admin .nav-link.active {
    color: white !important;
    background: linear-gradient(135deg, var(--navbar-primary-color) 0%, var(--navbar-primary-dark) 100%);
    border-radius: 6px;
    font-weight: 600;
}

/* Badge de notification dans la navbar mobile admin */
.navbar-mobile-admin .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    background: var(--navbar-primary-color);
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Tablette (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    nav.navbar {
        height: 70px !important;
    }
    
    body {
        padding-top: 70px !important;
    }
    
    .navbar-brand {
        font-size: 1.3rem !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.95rem;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    nav.navbar {
        height: 60px !important;
    }
    
    body {
        padding-top: 60px !important;
    }
    
    .navbar-brand {
        font-size: 1.2rem !important;
    }
    
    .navbar-brand img {
        max-height: 40px;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
    }
}

/* Très petits écrans (< 576px) */
@media (max-width: 575.98px) {
    nav.navbar {
        height: 56px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    body {
        padding-top: 56px !important;
    }
    
    .navbar-brand {
        font-size: 1.1rem !important;
    }
    
    .navbar-brand img {
        max-height: 35px;
    }
}

/* =============================================
   DESKTOP - MASQUER NAVBAR MOBILE ADMIN
   ============================================= */
@media (min-width: 992px) {
    .navbar-mobile-admin {
        display: none !important;
    }
}

/* =============================================
   ANIMATIONS SUPPLÉMENTAIRES
   ============================================= */

/* Animation d'apparition de la navbar au chargement */
@keyframes navbarSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

nav.navbar {
    animation: navbarSlideDown 0.5s ease-out;
}

/* Animation des liens au hover */
.navbar-nav .nav-link {
    overflow: hidden;
}

.navbar-nav .nav-link:hover {
    animation: navLinkPulse 0.6s ease;
}

@keyframes navLinkPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* =============================================
   ACCESSIBILITÉ
   ============================================= */

/* Focus visible pour la navigation au clavier - Vert officiel */
.navbar-nav .nav-link:focus,
.dropdown-item:focus,
.navbar-toggler:focus {
    outline: 2px solid var(--navbar-primary-color);
    outline-offset: 2px;
}

/* Amélioration du contraste pour l'accessibilité - FOND BLANC UNIQUEMENT */
@media (prefers-contrast: high) {
    .navbar-main,
    nav.navbar {
        background: var(--navbar-bg-white) !important;
        border-bottom: 2px solid #000;
    }
    
    .navbar-nav .nav-link {
        color: #000 !important;
    }
    
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: var(--navbar-primary-color) !important;
        text-decoration: underline;
    }
}

/* NOTE: Mode sombre supprimé - Charte graphique unique (blanc + vert) */

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    nav.navbar {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
    }
}

/* =============================================
   UTILITAIRES NAVBAR
   ============================================= */

/* Classe pour cacher la navbar temporairement */
.navbar-hidden {
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease !important;
}

/* Classe pour forcer l'affichage de la navbar */
.navbar-visible {
    transform: translateY(0) !important;
}

/* Séparateur vertical dans la navbar */
.navbar-divider {
    width: 1px;
    height: 30px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 1rem;
}

/* Badge de notification dans les liens navbar - Vert officiel */
.nav-link .badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    background: var(--navbar-primary-color);
}

/* =============================================
   FAQ - MARQUAGE VISUEL DE L'ÉLÉMENT ACTIF
   ============================================= */

/* Style par défaut des items FAQ */
.faq-item {
    transition: all 0.3s ease;
    border: 2px solid transparent !important;
}

/* Style de l'item FAQ actif (ouvert) */
.faq-item.faq-active {
    border: 2px solid var(--navbar-primary-color) !important;
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.05) 0%, rgba(102, 187, 106, 0.02) 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 187, 106, 0.2) !important;
    transform: scale(1.02);
}

/* Bouton de l'accordion actif */
.faq-item.faq-active .accordion-button {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.1) 0%, rgba(102, 187, 106, 0.05) 100%) !important;
    color: var(--navbar-primary-dark) !important;
    font-weight: 600 !important;
}

/* Icône de l'accordion actif */
.faq-item.faq-active .accordion-button i {
    color: var(--navbar-primary-color) !important;
    transform: scale(1.2);
}

/* Animation de pulsation pour l'item actif */
@keyframes faqActivePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(102, 187, 106, 0.2);
    }
    50% {
        box-shadow: 0 6px 20px rgba(102, 187, 106, 0.3);
    }
}

.faq-item.faq-active {
    animation: faqActivePulse 2s ease-in-out infinite;
}

/* Responsive - Réduire l'effet sur mobile */
@media (max-width: 767.98px) {
    .faq-item.faq-active {
        transform: scale(1.01);
        animation: none;
    }
}

/* =============================================
   ANIMATIONS AU SCROLL
   ============================================= */

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
}

/* Animation fade-in */
.animate-on-scroll[data-animation="fade-in"] {
    opacity: 0;
}

.animate-on-scroll[data-animation="fade-in"].animated {
    opacity: 1;
}

/* Animation fade-in-up */
.animate-on-scroll[data-animation="fade-in-up"] {
    opacity: 0;
    transform: translateY(50px);
}

.animate-on-scroll[data-animation="fade-in-up"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Animation fade-in-down */
.animate-on-scroll[data-animation="fade-in-down"] {
    opacity: 0;
    transform: translateY(-50px);
}

.animate-on-scroll[data-animation="fade-in-down"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Animation fade-in-left */
.animate-on-scroll[data-animation="fade-in-left"] {
    opacity: 0;
    transform: translateX(-50px);
}

.animate-on-scroll[data-animation="fade-in-left"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* Animation fade-in-right */
.animate-on-scroll[data-animation="fade-in-right"] {
    opacity: 0;
    transform: translateX(50px);
}

.animate-on-scroll[data-animation="fade-in-right"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* Animation zoom-in */
.animate-on-scroll[data-animation="zoom-in"] {
    opacity: 0;
    transform: scale(0.9);
}

.animate-on-scroll[data-animation="zoom-in"].animated {
    opacity: 1;
    transform: scale(1);
}

/* Animation slide-up */
.animate-on-scroll[data-animation="slide-up"] {
    opacity: 0;
    transform: translateY(100px);
}

.animate-on-scroll[data-animation="slide-up"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive - Réduire les animations sur mobile */
@media (max-width: 767.98px) {
    .animate-on-scroll {
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .animate-on-scroll[data-animation="fade-in-up"],
    .animate-on-scroll[data-animation="fade-in-down"] {
        transform: translateY(30px);
    }
    
    .animate-on-scroll[data-animation="fade-in-left"],
    .animate-on-scroll[data-animation="fade-in-right"] {
        transform: translateX(30px);
    }
    
    .animate-on-scroll[data-animation="slide-up"] {
        transform: translateY(50px);
    }
}

/* =============================================
   FIN DU FICHIER NAVBAR.CSS
   ============================================= */