/* 
Theme Name: Hello Elementor Child
*/

:lang(fr-FR) {
    & header .tp-inline-switcher {
        & .tp-lang-item:first-child {
            background: red;
        }
    }
}

:lang(en-CA) {
    & header .tp-inline-switcher {
        & .tp-lang-item:last-child {
            background: red;
        }
    }
}

.btn-contact-menu .elementor-button-icon svg {
    width: 7px!important;
}
    
    header ul > li:not(:last-child) {
        border-right: 1px solid #fff;
    }
    
    header ul > li > a {
        padding: 5px 20px!important;
        color: rgba(255, 255, 255, 0.70)!important;
        font-family: "Anek Latin"!important;
        font-size: 1.125!important;
        font-style: normal!important;
        font-weight: 500!important;
        line-height: normal!important;
        text-transform: uppercase!important;
    }
    
    header ul > li > a:hover {
        color: var(--e-global-color-primary)!important;
        border: 0!important;
    }
    
    
    header ul > li > a:hover::after,
    header ul > li > a.elementor-item-active::after  {
        display:none!important;
    }

    header ul.sub-menu {
        background: #0d0d0d !important;
        width: fit-content!important;
        padding: 15px 0!important;
        z-index: 2;
        border: 0!important;

        & li {
            border: 0!important;

            & > a {
                padding-top: 10px!important;
                padding-bottom: 10px!important;
            }
        }
    }
    
    @media screen and (max-width: 1024px) {
        header .container-logo-mobile {
            margin-right: auto;
        }
        header  #container-logo-menu {
            width: 150px!important;
        }
    
        header .contact-icon > div .elementor-icon{
            background: var(--e-global-color-primary);
            border-radius: 300px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }
    
        header .contact-icon:hover  > div .elementor-icon {
            background: #fff;
        }

        header .multi-language {
            max-width: 80px;
        }
    }

    @media screen and (max-width: 465px) {
        header .elementor-widget-theme-site-logo.elementor-widget-image img, header .container-logo-mobile {
            max-width: 100px!important;
        }
    }
    
    @media screen and (min-width:1024px)  and (max-width: 1230px){
        header .elementor-widget-theme-site-logo.elementor-widget-image img {
            max-width: 100px!important;
        }
    
        header ul > li > a {
            padding: 5px 10px!important;
            font-size: 1rem!important;
        }
    
        header  #container-logo-menu {
            width: 70%!important;
        }
    }
    
    header {
        padding: 0 10px;
    }

    
/* Forcer l'affichage horizontal */
.tp-inline-switcher {
    display: inline-flex !important;
    align-items: center;
    gap: 5px; /* Espace entre les deux langues */
}

/* Style général des boutons de langue */
.tp-inline-switcher .tp-lang-item {
    text-decoration: none;
    color: #fff; 
    transition: color 0.2s ease;
    
    border-radius: 100%;
    padding: 8px 10px;
    font-family: "Anek Latin";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

/* Style au survol */
.tp-inline-switcher .tp-lang-item:hover {
    background: red;
    
}

/* Style de la langue actuellement active sur la page */
.tp-inline-switcher .tp-lang-item.active {
    font-weight: bold !important;
    color: #000 !important; /* Couleur de la langue active */
    pointer-events: none; /* Rend la langue active non cliquable */
}


.customNavbar a {
    line-height: 1.6rem !important;
}

/* navbar responsive ≤ 1024px */
@media all and (max-width: 767px) {
    body header.elementor-location-header .customNavbar nav {
        padding: 20px 10px 0!important;
    }
}
@media all and (max-width: 1024px) {
    body header.elementor-location-header .customNavbar nav {
        padding: 20px 30px 0;

        & ul.elementor-nav-menu {
            background: #0D0D0D;
            padding: 10px!important;
            border-radius: 10px;
            
            & li {
                border: 0!important;

                & a {
                    border-radius: 5px; 
                    padding: 5px 10px !important; 
                    color: #fff!important;
    
                    &.elementor-item-active,
                    &:hover {
                        color: #cc2026!important;
                        background: transparent!important;
                    }
                }
            }
            

            & li.menu-item { margin-bottom: 5px; }
            & li.menu-item:last-child { margin-bottom: 0px; }
        }
    }
     
}