/* ============= Mega Menu Base ============= */
/* =========================================
   GENERAL NAVBAR DROPDOWN FIXES
========================================= */
.navbar-nav .dropdown-menu {
    border-radius: 0;
    border: 1px solid #ddd;
    margin-top: 0;
}

/* =========================================
   ARROWS FOR SUBMENU ITEMS
========================================= */
.dropdown-item.submenu-toggle {
    position: relative;
    padding-right: 25px;
}

.dropdown-item.submenu-toggle::after {
    content: "›";
    position: absolute;
    right: 8px;
    font-weight: bold;
    font-size: 18px;
}

/* =========================================
   MEGASUBMENU — DESKTOP VERSION
========================================= */
@media (min-width: 992px) {
    .megasubmenu {
        display: none;
        left: 100%;
        top: 0;
        min-width: 800px;  /* desktop width */
        padding: 20px;
        z-index: 1000;
        position: absolute;
    }

    /* Hover opens submenu on desktop */
    .dropdown-menu > .has-megasubmenu:hover > .megasubmenu {
        display: block;
    }
}

/* =========================================
   MOBILE BEHAVIOUR (accordion-like)
========================================= */
@media (max-width: 991px) {

    /* Mega menu becomes normal block, no 800px width */
    .megasubmenu {
        position: static !important;
        display: none;
        left: 0 !important;
        top: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0;
        /*margin-left: 15px;*/
        border: none;
        overflow-x: hidden !important;
    }

    /* Open when clicking */
    .has-megasubmenu.open > .megasubmenu {
        display: block !important;
    }

    /* Stack Bootstrap grid columns */
    .navbar .megasubmenu .row {
        display: block !important;
    }

    .navbar .megasubmenu [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Arrow formatting */
    .navbar .dropdown-item.submenu-toggle {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
}

/* =========================================
   Optional Styling
========================================= */
.megasubmenu .title {
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

.megasubmenu .dropdown-item h5,
.megasubmenu .dropdown-item h6 {
    margin-bottom: 10px;
}

.dropdown-item:hover {
    background: #f5f5f5;
}

/* =========================================
   WRAPPING FIXES
========================================= */

/* WRAP LEVEL 2 & 3 (inside mega submenu) — ALWAYS */
.navbar .megasubmenu,
.navbar .megasubmenu * {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* WRAP LEVEL 3 specifically */
.navbar .megasubmenu ul li a.dropdown-item {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* WRAP FIRST-LEVEL ITEMS ONLY ON MOBILE */
@media (max-width: 991px) {
    .navbar .dropdown-menu > li > a.dropdown-item {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ============================================================
   ELEGANT COLOR SCHEME FOR DROPDOWNS (ALL LEVELS)
============================================================ */

/* ----------------------------------------
   LEVEL 1 – First dropdown (Produits)
   Slightly tinted light background
---------------------------------------- */
.navbar-nav .dropdown-menu {
    background-color: #fafafa;
    border: 1px solid #e6e6e6;
}

/* ----------------------------------------
   LEVEL 2 – Mega submenu panel
   Light gray background (distinct from level 1)
---------------------------------------- */
.megasubmenu {
    background-color: #f3f3f3 !important;
    border-left: 3px solid #7a0000; /* subtle brand accent */
    padding: 20px;
}

/* Titles inside mega menu */
.megasubmenu .title {
    color: #7a0000;
    font-weight: 700;
}

/* ----------------------------------------
   LEVEL 3 – Items inside nested UL
   Slightly darker but clean
---------------------------------------- */
.megasubmenu ul.list-unstyled li a.dropdown-item {
    background-color: #f7f7f7 !important;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 7px 10px;
    margin-bottom: 4px;
    transition: background 0.2s ease;
}

/* Hover for level 3 */
.megasubmenu ul.list-unstyled li a.dropdown-item:hover {
    background-color: #ececec !important;
}

/* ----------------------------------------
   Level 2 items hover
---------------------------------------- */
.megasubmenu .dropdown-item:hover {
    background-color: #efefef !important;
}

/* ----------------------------------------
   Chevron color (keep consistent)
---------------------------------------- */
.dropdown-item.submenu-toggle::after {
    color: #7a0000;
}