/* Design tokens (extend as needed). */
$color-primary: #26363d;
$accent-green: #ddf9ac;


/* SCSS entry: import partials and set global states. */
@use "./components/mobile-menu";
@use "./components/accordion";
@use "./components/autodots";
@use "./components/mega-menu";
@use "./components/clients-swiper";
@use "./components/category-pills";
@use "./components/contact";
@use "./components/sticky-toggle";
@use "./components/pricing";
@use "./components/accordion-faq";




/* Global lock when menu is open (optional if you prefer body class only) */
body.menu-open {
    overflow: hidden;
}

.header.scrolled{
    box-shadow: 0 4px 32px #05142d0f;
    border: 1px solid #a4a9aa80;
    background-color: #fff;
}


// Hover btn

.cta-home-hero, .demo-btn, .black-btn {
    &:hover {
        background-color: black;
    }
}

.green-btn {
    &:hover {
        background-color: #BBDA84;
    }
}

/* Visually hide Weglot switcher but keep it in the accessibility tree. */
.weglot_switcher.country-selector {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}


// Lotti debug / fix
// Target any element with both data-lottie-en and data-lottie-fr
[data-lottie-en][data-lottie-fr] {
    svg:nth-of-type(2) {
        display: none !important;
    }
}




// under 1280px
@media (max-width: 1280px) {
    .flag-right{
        display: none;
    }
    .guys-with-phone {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-43%);
        height: 90%;
        width: auto;
        max-width: none;
    }
    
    .col-3-al-left {
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: none;
        align-items: flex-start;
        .t-col-left{
            align-self: start;
        }
    }

    .reverse-logo.w--current {
        width: auto;
    }
}
@media (max-width: 1080px) {
    .guys-with-phone {
        transform: translateX(-39%);
    }
    .menu-open-cms.menu-open {
        left: -30%;
    }
}

@media screen and (max-width: 479px) {
    .chatbot-ia-mobile {
        max-width: 276px;
    }
}


@media screen and (max-width: 375px) {
    // Fix
    section.section-service-help-mobile,
    .bloc-2{
        max-width: 100vw;
        overflow-x: hidden;
    }

}
