/* ========================================
   SGI LEASE & GO - Brand Colors Override
   Couleurs officielles: Orange #FF6B35, Bleu marine #0D0D2B
   Ce fichier doit être chargé en DERNIER
   ======================================== */

:root {
    --sgi-orange: #FF6B35;
    --sgi-orange-dark: #E85A2A;
    --sgi-orange-light: #FF8C5A;
    --sgi-blue-marine: #0D0D2B;
    --sgi-blue-marine-light: #1A1A3E;
}

/* ========================================
   HEADER - Couleur bleu marine officielle
   ======================================== */

.header_wrap,
.header_wrap.fixed-top,
.header_wrap.nav-fixed {
    background-color: var(--sgi-blue-marine) !important;
}

.middle-header,
.middle-header.dark_skin {
    background-color: var(--sgi-blue-marine) !important;
}

.bottom_header,
.bottom_header.bg_dark,
.bottom_header.light_skin {
    background-color: var(--sgi-blue-marine) !important;
}

/* Surcharger bg_dark pour utiliser notre bleu marine */
.bg_dark {
    background-color: var(--sgi-blue-marine) !important;
}

/* ========================================
   BOUTONS - Couleur principale Orange
   ======================================== */

.btn-fill-out,
.btn-primary,
a.btn-fill-out,
button.btn-fill-out {
    background: var(--sgi-orange) !important;
    background-color: var(--sgi-orange) !important;
    border-color: var(--sgi-orange) !important;
    color: #fff !important;
}

.btn-fill-out:hover,
.btn-primary:hover,
a.btn-fill-out:hover,
button.btn-fill-out:hover {
    background: var(--sgi-orange-dark) !important;
    background-color: var(--sgi-orange-dark) !important;
    border-color: var(--sgi-orange-dark) !important;
    color: #fff !important;
}

.btn-fill-out::before,
.btn-fill-out::after {
    background-color: var(--sgi-orange) !important;
}

/* Boutons outline */
.btn-line-fill,
.btn-outline-primary {
    border-color: var(--sgi-orange) !important;
    color: var(--sgi-orange) !important;
}

.btn-line-fill:hover,
.btn-outline-primary:hover {
    background: var(--sgi-orange) !important;
    color: #fff !important;
}

/* ========================================
   HEADER & NAVIGATION - Bleu marine
   ======================================== */

.header_wrap,
.middle-header,
.bottom_header,
.navbar {
    background-color: var(--sgi-blue-marine) !important;
}

.navbar-nav .nav-link,
.navbar-nav > li > a {
    color: #fff !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav > li > a:hover {
    color: var(--sgi-orange) !important;
}

/* Menu dropdown */
.dropdown-menu {
    border-top: 3px solid var(--sgi-orange) !important;
}

/* ========================================
   LIENS & TEXTES ACCENTUÉS
   ======================================== */

a:hover,
.product_title a:hover,
.widget_categories a:hover,
.categories_name:hover {
    color: var(--sgi-orange) !important;
}

/* Prix produits */
.product_price .price,
.price {
    color: var(--sgi-orange) !important;
}

/* ========================================
   ÉLÉMENTS D'INTERFACE
   ======================================== */

/* Badges et labels */
.badge-primary,
.bg-primary {
    background-color: var(--sgi-orange) !important;
}

/* Bordures actives */
.product:hover,
.widget_categories li a.active,
.nav-link.active {
    border-color: var(--sgi-orange) !important;
}

/* Focus des inputs */
.form-control:focus {
    border-color: var(--sgi-orange) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25) !important;
}

/* Checkbox et radio personnalisés */
.custome-checkbox .form-check-input:checked,
.custome-radio .form-check-input:checked {
    background-color: var(--sgi-orange) !important;
    border-color: var(--sgi-orange) !important;
}

/* ========================================
   FOOTER - Bleu marine
   ======================================== */

footer,
.footer_dark,
.bottom_footer {
    background-color: #131921 !important;
}

footer a:hover {
    color: var(--sgi-orange) !important;
}

/* ========================================
   ICÔNES & ÉLÉMENTS DÉCORATIFS
   ======================================== */

.icon_box:hover,
.single_service:hover {
    border-color: var(--sgi-orange) !important;
}

.icon_box .icon,
.service_icon,
.contact-info .icon {
    color: var(--sgi-orange) !important;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background-color: var(--sgi-orange) !important;
    border-color: var(--sgi-orange) !important;
    color: #fff !important;
}

/* ========================================
   SIDEBAR WIDGETS
   ======================================== */

.widget_title {
    border-bottom-color: var(--sgi-orange) !important;
}

.widget_categories a.active {
    color: var(--sgi-orange) !important;
    font-weight: 600;
}

/* ========================================
   ALERTES & NOTIFICATIONS
   ======================================== */

.alert-primary {
    background-color: rgba(255, 107, 53, 0.1) !important;
    border-color: var(--sgi-orange) !important;
    color: var(--sgi-orange-dark) !important;
}

/* ========================================
   PRODUITS - Actions
   ======================================== */

.pr_action_btn li a:hover,
.product_action_box a:hover {
    background-color: var(--sgi-orange) !important;
    border-color: var(--sgi-orange) !important;
    color: #fff !important;
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb-item a:hover {
    color: var(--sgi-orange) !important;
}

.breadcrumb-item.active {
    color: var(--sgi-orange) !important;
}

/* ========================================
   MENU CATÉGORIES - Bouton et Dropdown
   ======================================== */

/* Bouton "All Categories" */
.categories_btn,
.categories_btn.categories_menu {
    background-color: var(--sgi-orange) !important;
    border-color: var(--sgi-orange) !important;
    color: #fff !important;
}

.categories_btn:hover,
.categories_btn:focus,
.categories_btn[aria-expanded="true"] {
    background-color: var(--sgi-orange-dark) !important;
    border-color: var(--sgi-orange-dark) !important;
    color: #fff !important;
}

/* Fix positionnement menu catégories */
.categories_wrap {
    position: relative !important;
}

/* Dropdown menu catégories - FOND BLANC */
#navCatContent,
.nav_cat,
.nav_cat.navbar {
    background-color: #fff !important;
    border-top: 3px solid var(--sgi-orange) !important;
    width: 280px !important;
    max-width: 280px !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Liste des catégories */
#navCatContent ul,
.nav_cat ul {
    background-color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#navCatContent ul li,
.nav_cat ul li {
    background-color: #fff !important;
}

/* Items du menu catégories */
#navCatContent .dropdown-item,
.nav_cat .dropdown-item,
#navCatContent .nav-link,
.nav_cat .nav-link {
    color: var(--sgi-blue-marine) !important;
    background-color: #fff !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#navCatContent .dropdown-item:hover,
.nav_cat .dropdown-item:hover,
#navCatContent .nav-link:hover,
.nav_cat .nav-link:hover {
    background-color: rgba(255, 107, 53, 0.1) !important;
    color: var(--sgi-orange) !important;
}

#navCatContent .dropdown-item i,
.nav_cat .dropdown-item i,
#navCatContent .nav-link i,
.nav_cat .nav-link i {
    color: var(--sgi-orange) !important;
    margin-right: 10px !important;
}

/* Sous-menus catégories */
#navCatContent .dropdown-menu,
.nav_cat .dropdown-menu {
    background-color: #fff !important;
    border-left: 3px solid var(--sgi-orange) !important;
}

#navCatContent .mega-menu a:hover,
.nav_cat .mega-menu a:hover {
    color: var(--sgi-orange) !important;
}

/* Plus de catégories */
.more_categories {
    background-color: #f8f9fa !important;
    color: var(--sgi-orange) !important;
    border-top: 1px solid #e0e0e0 !important;
    padding: 12px 15px !important;
    cursor: pointer !important;
}

.more_categories:hover {
    background-color: rgba(255, 107, 53, 0.1) !important;
}

/* ========================================
   ICÔNES DE PAIEMENT FOOTER
   ======================================== */

.footer_payment {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.footer_payment li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer_payment li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer_payment li img {
    height: 28px !important;
    width: auto !important;
    max-width: 45px !important;
    object-fit: contain !important;
    filter: grayscale(0%) !important;
    transition: all 0.3s ease !important;
}

.footer_payment li img:hover {
    transform: scale(1.1) !important;
}

@media (min-width: 992px) {
    .footer_payment {
        justify-content: flex-end !important;
    }
}

@media (max-width: 767px) {
    .footer_payment li img {
        height: 24px !important;
        max-width: 38px !important;
    }
    
    .footer_payment {
        gap: 6px !important;
    }
}

/* ========================================
   HEADER MOBILE/TABLETTE
   ======================================== */

@media (max-width: 991px) {
    /* Header mobile */
    .header_wrap {
        background-color: var(--sgi-blue-marine) !important;
    }
    
    .header_wrap .navbar-brand img {
        max-height: 40px !important;
    }
    
    /* Menu hamburger visible et stylé */
    .navbar-toggler,
    .side_navbar_toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid var(--sgi-orange) !important;
        background-color: transparent !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
    }
    
    .navbar-toggler .ion-android-menu,
    .side_navbar_toggler .ion-android-menu {
        color: var(--sgi-orange) !important;
        font-size: 24px !important;
    }
    
    /* Menu mobile slide-in */
    .mobile_side_menu,
    #navbarSidetoggle {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 280px !important;
        height: 100vh !important;
        background-color: var(--sgi-blue-marine) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        padding: 60px 0 20px 0 !important;
        display: block !important;
    }
    
    .mobile_side_menu.show,
    #navbarSidetoggle.show {
        left: 0 !important;
    }
    
    /* Liens menu mobile */
    .mobile_side_menu .navbar-nav,
    #navbarSidetoggle .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .mobile_side_menu .nav-link,
    .mobile_side_menu .nav_item,
    #navbarSidetoggle .nav-link,
    #navbarSidetoggle .nav_item {
        color: #fff !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: block !important;
    }
    
    .mobile_side_menu .nav-link:hover,
    #navbarSidetoggle .nav-link:hover {
        color: var(--sgi-orange) !important;
        background-color: rgba(255, 107, 53, 0.1) !important;
    }
    
    /* Bouton fermer menu */
    .sidemenu_close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        color: #fff !important;
        font-size: 24px !important;
        cursor: pointer !important;
        z-index: 10000 !important;
    }
    
    /* Middle header mobile */
    .middle-header {
        padding: 10px 0 !important;
        background-color: var(--sgi-blue-marine) !important;
    }
    
    /* Bottom header sur mobile - visible mais simplifié */
    .bottom_header {
        background-color: var(--sgi-blue-marine) !important;
        padding: 10px 0 !important;
    }
    
    /* Icônes header mobile */
    .header_wrap .attr-nav > li > a {
        padding: 5px 8px !important;
        color: #fff !important;
    }
    
    /* Menu catégories mobile */
    #navCatContent {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
    }
    
    #navCatContent.show {
        left: 0 !important;
    }
    
    /* Overlay quand menu ouvert */
    .sidetoggle_active::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
    }
}

/* ========================================
   HEADER TABLETTE (768px - 991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .header_wrap .container {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    
    .middle-header .navbar-brand img {
        max-height: 45px !important;
    }
    
    /* Afficher les icônes sur tablette */
    .header_wrap .attr-nav {
        display: flex !important;
    }
}