/* ============================================================
   MEGA MENU SWIMIT
   ============================================================ */


/* ── MASQUAGE HEADER KONTE ───────────────────────────────── */
.header-main,
.header-v10 .site-branding,
.header-v10 .header-main .header-right-items {
    height: 0px;
}

.header-bottom {
    height: 0px;
}

.header-mobile {
    height: 0px;
}


/* ── NAV DESKTOP SPLIT ───────────────────────────────────── */
#wrapper-menuv2-gauche,
#wrapper-menuv2-droit {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
    gap: 32px;
}

#wrapper-menuv2-gauche > .e-con,
#wrapper-menuv2-droit > .e-con {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
}

#wrapper-menuv2-droit {
    margin-left: auto !important;
}

/* ── VARIABLES ───────────────────────────────────────────── */
.mm-wrap {
    --mm-color-active:   var(--e-global-color-primary, #00D1EA);
    --mm-color-text:     var(--e-global-color-text, #000000);
    --mm-color-white:    #ffffff;
    --mm-color-border:   #EBEBEB;
    --mm-font-nav:       var(--e-global-typography-47a5208-font-family, "National2", sans-serif);
    --mm-font-body:      "function_pro", sans-serif;
    --mm-font-size-nav:  0.95em;
    --mm-font-size-sub:  0.88rem;
    --mm-left-width:     280px;
    --mm-item-height:    52px;
    --mm-transition:     0.15s ease;
}

/* ── WRAPPER ─────────────────────────────────────────────── */
.mm-wrap {
    display: flex;
    position: relative;
    width: 100vw;
    left: 50%;
    padding-left:20px;
    padding-top: 40px;
    padding-bottom: 50px;
    transform: translateX(-50%);
    background: var(--mm-color-white);
   	border-top: 1px solid var(--mm-color-border); */
    overflow: hidden;
    
}

/* ── COLONNE GAUCHE ──────────────────────────────────────── */
.mm-left {
    list-style: none;
    margin: 0;
    padding: 15px 0;
    padding-right: 30px;
    width: var(--mm-left-width);
    min-width: var(--mm-left-width);
    flex-shrink: 0;
    background: var(--mm-color-white);
    border-right: 1px solid var(--mm-color-active);
    margin-right:20px;
}

.mm-left__item {
    margin: 0;
    padding: 0;
    list-style: none;


}

.mm-left__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px 0 16px;
    height: var(--mm-item-height);
    text-decoration: none;
    color: var(--mm-color-text);
    font-family: var(--mm-font-nav);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background var(--mm-transition), color var(--mm-transition);
    cursor: pointer;
    border-radius: 8px;
}

.mm-left__link:hover,
.mm-left__item.is-active .mm-left__link {
    background: var(--mm-color-active);
    color: var(--mm-color-white);
}

.mm-left__icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    transition: filter var(--mm-transition);
}

.mm-left__item.is-active .mm-left__icon,
.mm-left__item:hover .mm-left__icon {
    filter: brightness(0) invert(1);
}

.mm-left__label {
    flex: 1;
    min-width: 0;
}

.mm-left__arrow {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--mm-transition);
}

.mm-left__item.is-active .mm-left__arrow {
    opacity: 1;
}

.mm-left__item.is-bientot .mm-left__link {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* ── PANNEAUX DROITE ─────────────────────────────────────── */
.mm-right {
    flex: 1;
    min-width: 0;
    padding: 15px 30px;
}

#mega-menu-wrap .mm-panel {
    display: none;
}

#mega-menu-wrap .mm-panel.is-active {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 32px;
    align-items: start;
}

#mega-menu-wrap .mm-panel__col {
    min-width: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

#mega-menu-wrap .mm-panel__group-title {
    margin: 0 0 0 0;
    padding: 0;
    list-style: none;
}

#mega-menu-wrap .mm-panel__group-title > a {
    display: inline-block;
    position: relative;
    font-family: var(--mm-font-nav);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mm-color-text);
    text-decoration: none;
    padding-bottom: 3px;
    transition: color var(--mm-transition);
}

#mega-menu-wrap .mm-panel__group-title > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mm-color-active);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

#mega-menu-wrap .mm-panel__group-title > a:hover::after {
    transform: scaleX(1);
}

#mega-menu-wrap .mm-panel__group-title > a:hover {
    /*color: var(--mm-color-active);*/
}

#mega-menu-wrap .mm-panel__item {
    font-size: 1rem;
	margin: 0;
    padding: 0;
    list-style: none;
}
#mega-menu-wrap .mm-panel__item > a {
    display: inline-block;
    position: relative;
    padding:2px 0;
}

#mega-menu-wrap .mm-panel__item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--mm-color-active);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

#mega-menu-wrap .mm-panel__item > a:hover::after {
    transform: scaleX(1);
}

#mega-menu-wrap .mm-panel__item > a:hover {
    /*color: var(--mm-color-active);*/
    text-decoration: none;
}



#mega-menu-wrap .mm-panel__item.is-bientot > a,
#mega-menu-wrap .mm-panel__group-title.is-bientot > a {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Badge "Bientôt" - Desktop */
.mm-badge-bientot {
display: inline-block;
font-size: 0.6rem;
font-family: National2;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background: #ffffff;
color: #858585;
border: 1px solid #858585;
padding: 2px 5px 2px 5px;
border-radius: 4px;
margin-left: 5px;
margin-top:-4px;
vertical-align: middle;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1200px) {
    #mega-menu-wrap .mm-panel.is-active {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .mm-wrap {
        --mm-left-width: 220px;
    }
    .mm-right {
        padding: 24px 28px;
    }
    #mega-menu-wrap .mm-panel.is-active {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mm-wrap {
        flex-direction: column;
        width: 100%;
        left: 0;
        transform: none;
    }
    .mm-left {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--mm-color-border);
        padding: 0;
    }
    .mm-left__link {
        height: 48px;
    }
    .mm-left__arrow {
        display: none;
    }
    .mm-right {
        padding: 16px;
    }
    #mega-menu-wrap .mm-panel.is-active {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   MOBILE SLIDE-IN
   ============================================================ */

/* ── OVERLAY ─────────────────────────────────────────────── */
.mm-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9998;
}

.mm-mobile-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* ── SLIDE-IN PANEL ──────────────────────────────────────── */
.mm-mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 400px;
    background: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.mm-mobile-panel.is-active {
    transform: translateX(0);
}

/* ── HEADER PANEL ────────────────────────────────────────── */
.mm-mobile-header {
    position: sticky;
    top: 0;
    background: #ffffff;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mm-color-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
}

.mm-mobile-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    color: var(--mm-color-text);
}

/* ── SEARCH BAR ──────────────────────────────────────────── */
.mm-mobile-search {
    padding: 20px 20px;
    border-bottom: 1px solid var(--mm-color-border);
}

.mm-mobile-search input {
width: 100%;
padding: 10px 16px!important;
border: 1px solid #EBEBEB!important;
border-radius: 100px !important;
font-size: 1.4rem;
font-family: National2, sans-serif;
background: #f7f7f7;
}

/* ── CONTENEUR FLEX NIVEAU 1 ────────────────────────────── */
.mm-mobile-main-nav {
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1;
}

/* ── ITEMS NIVEAU 1 (style uniforme) ─────────────────────── */
.mm-mobile-nav-item__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-family: National2, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mm-color-text);
    text-decoration: none;
    border-bottom: 1px solid #EBEBEB;
    cursor: pointer;
}

.mm-mobile-nav-item__link:hover {
    background: #f9f9f9;
}

.mm-mobile-arrow {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mm-mobile-nav-item.is-open .mm-mobile-arrow {
    transform: rotate(180deg);
}

/* ── SUBMENU CATÉGORIES (niveau 0) ──────────────────────── */
.mm-mobile-submenu--lvl0 {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
}

.mm-mobile-nav-item.is-open > .mm-mobile-submenu--lvl0 {
    display: block;
}

/* Niveau 1 : Catégories principales */
.mm-mobile-nav__item--lvl1 > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-family: National2, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mm-color-text);
    text-decoration: none;
    cursor: pointer;
}

.mm-mobile-nav__item--lvl1 > a .mm-mobile-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.mm-mobile-nav__item--lvl1 > a > span:first-of-type {
    flex: 1;
}

.mm-mobile-nav__item--lvl1 > a .mm-mobile-arrow {
    margin-left: auto;
    flex-shrink: 0;
    display: none !important;
}

.mm-mobile-nav__item--lvl1.is-open > a .mm-mobile-arrow {
    transform: rotate(180deg);
}

/* Sous-menu niveau 1 */
.mm-mobile-submenu--lvl1 {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
}

.mm-mobile-nav__item--lvl1.is-open > .mm-mobile-submenu--lvl1 {
    display: block;
}

/* Niveau 2 : Sous-catégories */
.mm-mobile-nav__item--lvl2 > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 12px 56px;
    font-family: National2, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mm-color-text);
    text-decoration: none;
}

.mm-mobile-nav__item--lvl2 > a > span:first-of-type {
    flex: 1;
}

.mm-mobile-nav__item--lvl2 > a .mm-mobile-arrow {
    margin-left: auto;
    flex-shrink: 0;
    display: none !important;    
}

.mm-mobile-nav__item--lvl2.is-open > a .mm-mobile-arrow {
    transform: rotate(180deg);
}

/* Sous-menu niveau 2 */
.mm-mobile-submenu--lvl2 {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

.mm-mobile-nav__item--lvl2.is-open > .mm-mobile-submenu--lvl2 {
    display: block;
}

/* Niveau 3 : Produits finaux */
.mm-mobile-nav__item--lvl3 > a {
    display: block;
    padding: 10px 20px 10px 80px;
    font-family: var(--mm-font-body);
    font-size: 1rem;
    color: var(--mm-color-text);
    text-decoration: none;
}

.mm-mobile-nav__item--lvl3 > a:active {
    background: #f0f0f0;
}

/* Badge "Bientôt" - Mobile */
.mm-mobile-badge-bientot {
display: inline-block;
font-size: 0.6rem;
font-family: National2;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background: #ffffff;
color: #858585;
border: 1px solid #858585;
padding: 2px 5px 2px 5px;
border-radius: 4px;
margin-left: 5px;
margin-top:-4px;
vertical-align: middle;
}

.mm-mobile-nav__item--bientot > a {
    opacity: 0.4;
    pointer-events: none;
}

/* ── FOOTER ICONS ────────────────────────────────────────── */
.mm-mobile-footer {
    margin-top: auto;
    padding: 20px;
	/* border-top: 1px solid #EBEBEB; */
    border-bottom: 1px solid #EBEBEB;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mm-mobile-footer__icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    text-decoration: none;
    color: var(--mm-color-text);
    font-family: National2, sans-serif;
    text-transform:uppercase;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--mm-color-border);
}

.mm-mobile-footer__icon:last-child {
    border-bottom: none;
}

.mm-mobile-footer__icon span {
    order: 1;
}

.mm-mobile-footer__icon img {
    width: 30px;
    height: 30px;
    order: 2;
}

/* ── BREAKPOINTS ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mm-wrap {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .mm-mobile-panel,
    .mm-mobile-overlay {
        display: none !important;
    }
}

/* Hide in Elementor editor */
.elementor-editor-active .mm-mobile-panel,
.elementor-editor-active .mm-mobile-overlay {
    display: none !important;
}

.swimit-mobile-menu-trigger {
    cursor: pointer !important;
}

.swimit-mobile-menu-trigger * {
    cursor: pointer !important;
}