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

.header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:.35s ease;

}

.header.scrolled{

    background:rgba(245,240,225,.92);

    backdrop-filter:blur(14px);

    box-shadow:0 8px 30px rgba(0,0,0,.06);

}

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

.header__container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

}

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

.header__logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

    margin-left:5px;

}

.header__logo img{

    width:140px;

    height:auto;

    display:block;

    transition:.35s ease;

}

/* Logo légèrement plus petit au scroll */

.header.scrolled .header__logo img{

    width:120px;

}

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

.header__menu{

    display:flex;

    gap:42px;

    list-style:none;

    margin:0;

    padding:0;

}

.header__menu a{

    position:relative;

    color:var(--color-text);

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.header__menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--color-primary);

    transition:.35s;

}

.header__menu a:hover{

    color:var(--color-primary);

}

.header__menu a:hover::after{

    width:100%;

}

/*==================================================
BURGER
==================================================*/

.header__burger{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

}

.header__burger span{

    display:block;

    width:28px;

    height:3px;

    margin:6px auto;

    background:var(--color-text);

    border-radius:20px;

}

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

@media (max-width:992px){

    .header__container{

        min-height:80px;

    }

    .header__logo img{

        width:200px;

    }

    .header.scrolled .header__logo img{

        width:185px;

    }

    .header__burger{

        display:block;

        z-index:1002;

    }


    .header__nav{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:var(--color-background);

        box-shadow:0 15px 35px rgba(0,0,0,.08);

        display:none;

        padding:25px;

    }

    .header__nav.active{

        display:block;

    }

    .header__menu{

        flex-direction:column;

        gap:25px;

        align-items:center;

    }

}

@media (max-width:992px){

    .header__cta{

        display:none;

    }

}