/*
====================================================
HEADER
====================================================
*/

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(15,23,42,.06);

    transition:all .35s ease;

}

.site-header.scrolled{

    min-height:80px;

    box-shadow:0 15px 40px rgba(15,23,42,.08);

}

/*
====================================================
HEADER CONTAINER
====================================================
*/

.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:92px;

    gap:40px;

}

/*
====================================================
LOGO
====================================================
*/

.site-logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

    text-decoration:none;

}

.site-logo img,

.site-logo .custom-logo{

    display:block;

    width:auto;

    max-width:100%;

    height:68px;

    transition:all .35s ease;

}

.site-header.scrolled .site-logo img,

.site-header.scrolled .custom-logo{

    height:60px;

}

/*
====================================================
NAVIGATION
====================================================
*/

.main-navigation{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.main-menu{

    display:flex;

    align-items:center;

    gap:52px;

    margin:0;

    padding:0;

    list-style:none;

}

.main-menu>li{

    position:relative;

}

.main-menu>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    height:92px;

    color:var(--text);

    font-size:17px;

    font-weight:600;

    text-decoration:none;

    transition:all .3s ease;

}

.main-menu>li>a:hover{

    color:var(--primary);

}

.main-menu>.current-menu-item>a,

.main-menu>.current-menu-parent>a,

.main-menu>.current-menu-ancestor>a{

    color:var(--primary);

}

/*
====================================================
ACTIVE LINE
====================================================
*/

.main-menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:22px;

    width:0;

    height:3px;

    border-radius:999px;

    background:var(--primary);

    transition:.35s ease;

}

.main-menu>li:hover>a::after,

.main-menu>.current-menu-item>a::after,

.main-menu>.current-menu-parent>a::after,

.main-menu>.current-menu-ancestor>a::after{

    width:100%;

}

/*
====================================================
ARROW
====================================================
*/

.main-menu>.menu-item-has-children>a{

    padding-right:8px;

}

.main-menu>.menu-item-has-children>a::before{

    content:"";

    display:none;

}

.main-menu>.menu-item-has-children>a span{

    display:inline-flex;

    align-items:center;

}

.main-menu>.menu-item-has-children>a::selection{

    background:transparent;

}

.main-menu>.menu-item-has-children>a{

    position:relative;

}

.main-menu>.menu-item-has-children>a::after{

    content:"⌄";

    position:relative;

    margin-left:8px;

    font-size:14px;

    font-weight:700;

    transform-origin:center;

    transition:.3s ease;

}

.main-menu>.menu-item-has-children:hover>a::after{

    transform:rotate(180deg);

}

/*
====================================================
HEADER ACTIONS
====================================================
*/

.header-actions{

    display:flex;

    align-items:center;

    gap:18px;

    flex-shrink:0;

}

/*
====================================================
CONTACT BUTTON
====================================================
*/

.header-contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:56px;

    padding:0 28px;

    border-radius:999px;

    background:var(--primary);

    color:#FFFFFF;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:all .35s ease;

    box-shadow:0 15px 35px rgba(30,99,233,.25);

}

.header-contact-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(30,99,233,.35);

}

.header-contact-btn i{

    font-size:17px;

}

/*
====================================================
DESKTOP SUB MENU
====================================================
*/

.main-menu .sub-menu{

    position:absolute;

    top:110%;

    left:0;

    min-width:280px;

    padding:14px 0;

    margin:0;

    list-style:none;

    background:#FFFFFF;

    border-radius:22px;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:0 30px 70px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(18px);

    transition:all .35s ease;

    z-index:999;

}

.main-menu li:hover>.sub-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.main-menu .sub-menu li{

    width:100%;

}

.main-menu .sub-menu a{

    display:flex;

    align-items:center;

    padding:15px 24px;

    color:var(--text);

    font-size:15px;

    font-weight:500;

    transition:all .3s ease;

}

.main-menu .sub-menu a:hover{

    background:#F5F8FF;

    color:var(--primary);

    padding-left:30px;

}

/*
====================================================
3RD LEVEL
====================================================
*/

.main-menu .sub-menu .sub-menu{

    top:0;

    left:100%;

    margin-left:12px;

}

/*
====================================================
MENU TOGGLE
====================================================
*/

.menu-toggle{

    display:none;

    position:relative;

    width:52px;

    height:52px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:16px;

    background:#F5F8FF;

    transition:all .35s ease;

}

.menu-toggle:hover{

    background:#EAF2FF;

}

.menu-toggle span{

    position:absolute;

    left:14px;

    width:24px;

    height:2.5px;

    background:var(--primary);

    border-radius:999px;

    transition:all .35s ease;

}

.menu-toggle span:nth-child(1){

    top:17px;

}

.menu-toggle span:nth-child(2){

    top:24px;

}

.menu-toggle span:nth-child(3){

    top:31px;

}

/*
====================================================
HAMBURGER ANIMATION
====================================================
*/

.menu-toggle.active span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}

/*
====================================================
MOBILE OVERLAY
====================================================
*/

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(6px);

    -webkit-backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/*
====================================================
MOBILE PANEL
====================================================
*/

.mobile-panel{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    max-width:360px;

    height:100vh;

    background:#FFFFFF;

    display:flex;

    flex-direction:column;

    transition:.4s ease;

    box-shadow:-15px 0 50px rgba(15,23,42,.15);

    z-index:9999;

    overflow-y:auto;

}

.mobile-panel.active{

    right:0;

}

/*
====================================================
HEADER
====================================================
*/

.mobile-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:28px 24px;

    border-bottom:1px solid var(--border);

}

.mobile-title{

    font-size:22px;

    font-weight:700;

    color:var(--text);

}

.mobile-close{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:14px;

    background:#F5F8FF;

    color:var(--primary);

    cursor:pointer;

    transition:.3s;

}

.mobile-close:hover{

    background:#EAF2FF;

}

/*
====================================================
NAVIGATION
====================================================
*/

.mobile-navigation{

    flex:1;

    padding:20px 24px;

}

.mobile-menu{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin:0;

    padding:0;

    list-style:none;

}

.mobile-menu>li{

    border-bottom:1px solid #EEF2F7;

}

.mobile-menu>li>a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 0;

    font-size:17px;

    font-weight:600;

    color:var(--text);

    text-decoration:none;

    transition:.3s;

}

.mobile-menu>li>a:hover{

    color:var(--primary);

}

.mobile-menu .current-menu-item>a{

    color:var(--primary);

}

/*
====================================================
SUB MENU
====================================================
*/

.mobile-menu .sub-menu{

    display:none;

    margin:0;

    padding:0 0 12px 18px;

    list-style:none;

}

.mobile-menu li.menu-open>.sub-menu{

    display:block;

}

.mobile-menu .sub-menu li{

    margin:4px 0;

}

.mobile-menu .sub-menu a{

    display:block;

    padding:12px 0;

    color:var(--text-light);

    font-size:15px;

    transition:.3s;

}

.mobile-menu .sub-menu a:hover{

    color:var(--primary);

    padding-left:8px;

}

/*
====================================================
FOOTER
====================================================
*/

.mobile-panel-footer{

    padding:24px;

    border-top:1px solid var(--border);

}

.mobile-contact-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    height:56px;

    border-radius:999px;

    background:var(--primary);

    color:#FFFFFF;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 15px 35px rgba(30,99,233,.20);

}

.mobile-contact-btn:hover{

    background:var(--primary-dark);

}

/*
====================================================
TABLETTE
====================================================
*/

@media (max-width: 992px){

    .header-container{

        min-height:82px;

        gap:20px;

    }

    .site-logo img,
    .site-logo .custom-logo{

        height:56px;

    }

    .main-navigation{

        display:none;

    }

    .header-contact-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        flex-shrink:0;

    }

}

/*
====================================================
MOBILE
====================================================
*/

@media (max-width:768px){

    .site-header{

        border-bottom:1px solid rgba(15,23,42,.08);

    }

    .header-container{

        min-height:76px;

    }

    .site-logo img,
    .site-logo .custom-logo{

        height:48px;

    }

    .mobile-panel{

        max-width:340px;

    }

}

/*
====================================================
PETITS MOBILES
====================================================
*/

@media (max-width:576px){

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    .header-container{

        min-height:72px;

    }

    .site-logo img,
    .site-logo .custom-logo{

        height:42px;

    }

    .menu-toggle{

        width:46px;

        height:46px;

        border-radius:14px;

    }

    .menu-toggle span{

        left:12px;

        width:22px;

    }

    .mobile-panel{

        width:100%;

        max-width:100%;

    }

    .mobile-panel-header{

        padding:22px 20px;

    }

    .mobile-navigation{

        padding:18px 20px;

    }

    .mobile-panel-footer{

        padding:20px;

    }

    .mobile-title{

        font-size:20px;

    }

}

/*
====================================================
LARGE DESKTOP
====================================================
*/

@media (min-width:1400px){

    .header-container{

        min-height:100px;

    }

    .site-logo img,
    .site-logo .custom-logo{

        height:74px;

    }

}

/*
====================================================
BODY LOCK
====================================================
*/

body.menu-open{

    overflow:hidden;

}

/*
====================================================
SMOOTH
====================================================
*/

.site-header,
.main-navigation,
.main-menu a,
.sub-menu,
.menu-toggle,
.mobile-panel,
.mobile-overlay,
.mobile-contact-btn,
.header-contact-btn{

    transition:all .35s ease;

}