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

:root{

    --primary:
    #0b1220;

    --secondary:
    #F7E887;

    --accent:
    #7cd0ad;

    --white:
    #f8fafc;

    --dark:
    #080f1d;

    --text:
    #94a3b8;

    --border:
    rgba(248,250,252,0.15);

    --shadow:
    0 20px 80px rgba(15,23,42,0.16);

    --radius:
    28px;

}

body{

    font-family:
    'Outfit',
    sans-serif;

    background:
    #f7f9fc;

    color:
    var(--dark);

    overflow-x:
    hidden;

}

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

.top-header{

    position:
    relative;

    width:
    100%;

    background:
    linear-gradient(
        135deg,
        #1D3557,
        #284b7a
    );

    padding:
    14px 0;

    overflow:
    hidden;

    z-index:
    1000;

}

.top-header::before{

    content:
    '';

    position:
    absolute;

    width:
    350px;
    height:
    350px;

    background:
    rgba(255,255,255,0.04);

    border-radius:
    50%;

    top:
    -180px;

    right:
    -100px;

}

.top-header-content{

    display:
    flex;

    justify-content:
    space-between;

    align-items:
    center;

    gap:
    20px;

}

.top-header-left,
.top-header-right{

    display:
    flex;

    align-items:
    center;

    gap:
    25px;

}

.top-header-item{

    display:
    flex;

    align-items:
    center;

    gap:
    10px;

    color:
    rgba(255,255,255,0.85);

    font-size:
    14px;

    font-weight:
    500;

}

.top-header-item i{

    color:
    #F7E887;

}

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

.main-header{

    position:
    fixed;

    top:
    0;

    left:
    0;

    width:
    100%;

    z-index:
    9999;

    padding:
    22px 0;

    transition:
    0.4s ease;

}

/* rendre la barre de navigation lisible par défaut */
.main-header{
    background: rgba(8,15,29,0.60);
    backdrop-filter: blur(8px);
}

.main-header.scrolled{

    background:
    rgba(8,15,29,0.92);

    backdrop-filter:
    blur(18px);

    box-shadow:
    0 18px 55px rgba(0,0,0,0.22);

    border-bottom:
    1px solid rgba(248,250,252,0.08);

    padding:
    16px 0;

}

/* =========================================
   NAVBAR
========================================= */

.navbar-wrapper{

    display:
    flex;

    justify-content:
    space-between;

    align-items:
    center;

    gap:
    16px;

}

.logo{

    display:
    flex;

    align-items:
    center;

    gap:
    14px;

    text-decoration:
    none;

}

.logo-icon{

    width:
    56px;

    height:
    56px;

    border-radius:
    18px;

    background:
    linear-gradient(
        135deg,
        #F7E887,
        #7BC8A4
    );

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    color:
    #fff;

    font-size:
    24px;

    box-shadow:
    0 10px 30px rgba(247,232,139,0.4);

}

.logo-text{

    display:
    flex;

    flex-direction:
    column;

}

.logo-text strong{

    font-size:
    24px;

    font-weight:
    800;

    color:
    #fff;

    line-height:
    1;

}

.main-header.scrolled
.logo-text strong{

    color:
    var(--primary);

}

.logo-text span{

    color:
    rgba(255,255,255,0.75);

    font-size:
    13px;

}

.main-header.scrolled
.logo-text span{

    color:
    #6c757d;

}

/* =========================================
   NAV MENU
========================================= */

.nav-menu{
    display:
    flex;

    align-items:
    center;

    gap:
    18px;

    /* espace entre le logo et le bouton (gauche/droite du menu) */
    margin: 0 20px;
    flex: 1;
    justify-content: center;
}

.nav-menu li{

    position:
    relative;

}

.nav-menu ul{

    display: flex;

    gap: 14px;

    align-items: center;

    list-style: none;

    margin: 0;

    padding: 0;

}

.nav-menu li a{

    position:
    relative;

    color:
    rgba(248,250,252,0.92);

    font-size:
    14px;

    font-weight:
    700;

    transition:
    0.28s ease;

    padding:
    8px 0;
    white-space: nowrap;

}

.main-header.scrolled
.nav-menu li a{

    color:
    rgba(248,250,252,0.92);

}

.nav-menu li a.active,
.nav-menu li a.active:hover{

    color:
    #F7E887;

}

.nav-menu li a::after{

    content:
    '';

    position:
    absolute;

    left:
    0;

    bottom:
    -4px;

    width:
    0;

    height:
    2px;

    border-radius:
    20px;

    background:
    linear-gradient(
        135deg,
        #F7E887,
        #7BC8A4
    );

    transition:
    0.4s ease;

}

.nav-menu li a:hover::after{

    width:
    100%;

}

.nav-menu li a:hover{

    color:
    #F7E887;

}

/* =========================================
   NAV BUTTONS
========================================= */

.header-actions{

    display:
    flex;

    align-items:
    center;

    gap:
    18px;

}

.btn-header{

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    padding:
    11px 20px;

    border-radius:
    60px;

    font-size:
    13px;

    /* bouton en jaune fade */
    background: linear-gradient(135deg, rgba(247,232,139,1), rgba(244,224,122,1));

    color: #0f172a;

    font-weight: 800;

    transition: 0.3s ease;

    box-shadow: 0 20px 60px rgba(244,224,122,0.18);
    white-space: nowrap;

}

.btn-header:hover{

    transform:
    translateY(-3px);

    box-shadow: 0 24px 72px rgba(244,224,122,0.24);

}

.btn-header:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 20px 40px rgba(247,232,139,0.35);

}

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

.mobile-toggle{

    width:
    54px;

    height:
    54px;

    border-radius:
    18px;

    background:
    linear-gradient(
        135deg,
        #F7E887,
        #7BC8A4
    );

    display:
    none;

    align-items:
    center;

    justify-content:
    center;

    cursor:
    pointer;

    color:
    #fff;

    font-size:
    22px;

    box-shadow:
    0 10px 30px rgba(247,232,139,0.35);

}

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

.mobile-menu{

    position:
    fixed;

    top:
    0;

    right:
    -340px;

    width:
    340px;

    height:
    100vh;

    background:
    rgba(17, 27, 50, 0.98);

    backdrop-filter:
    blur(22px);

    padding:
    140px 35px 35px;

    transition:
    0.45s cubic-bezier(.2,.8,.2,1);

    z-index:
    99999;

    box-shadow:
    -20px 0 70px rgba(0,0,0,0.35);

}

.mobile-menu.active{

    right:
    0;

}

.mobile-menu ul{

    display:
    flex;

    flex-direction:
    column;

    gap:
    24px;

}

.mobile-menu ul li a{

    color:
    #f8fafc;

    font-size:
    18px;

    font-weight:
    700;

    transition:
    0.28s ease;

}

.mobile-menu ul li a:hover{

    color:
    #F7E887;

}

.mobile-close{

    position:
    absolute;

    top:
    30px;

    right:
    30px;

    width:
    50px;

    height:
    50px;

    border-radius:
    16px;

    background:
    #f1f5f9;

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    cursor:
    pointer;

    color:
    var(--primary);

    font-size:
    20px;

}

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

.menu-backdrop{

    position:
    fixed;

    inset:
    0;

    background:
    rgba(0,0,0,0.45);

    opacity:
    0;

    visibility:
    hidden;

    transition:
    0.3s ease;

    z-index:
    9999;

}

.menu-backdrop.active{

    opacity:
    1;

    visibility:
    visible;

}

/* =========================================
   RESPONSIVE
========================================= */

/* =========================================
   RESPONSIVE NAVBAR
========================================= */

.mobile-toggle{
    display: none;
}

@media screen and (max-width: 992px){

    .nav-menu{
        display: none !important;
    }

    .btn-header{
        display: none;
    }

    .mobile-toggle{
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .navbar-wrapper{
        justify-content: space-between;
    }

    .logo{
        z-index: 100000;
    }

}

/* Hamburger visual */
.mobile-toggle .hamburger{
    width: 22px;
    height: 2px;
    background: #fff;
    display: block;
    position: relative;
}

.mobile-toggle .hamburger::before,
.mobile-toggle .hamburger::after{
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: 0.25s ease;
}

.mobile-toggle .hamburger::before{
    top: -7px;
}

.mobile-toggle .hamburger::after{
    top: 7px;
}

.mobile-menu ul li a.btn-header{
    display: inline-block;
    margin-top: 12px;
}




.mobile-menu{

    display: block;

}

@media screen and (min-width: 993px){

    .mobile-menu,
    .menu-backdrop{
        display: none !important;
    }

}