/*==================================================
    VARIABLES DU HEADER
==================================================*/

:root{

    --header-height:72px;

    --header-width:min(1600px,92%);

    --header-transition:.35s cubic-bezier(.4,0,.2,1);

}


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

#site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:var(--header-height);

    z-index:1000;

    background:rgba(8,8,8,.94);

    transition:
        background-color var(--header-transition),
        backdrop-filter var(--header-transition),
        box-shadow var(--header-transition);

}


#site-header.scrolled{

    background:rgba(8,8,8,.78);

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

    box-shadow:0 12px 40px rgba(0,0,0,.35);

}


/*==================================================
    CONTENU
==================================================*/

.header-inner{

    width:var(--header-width);

    height:100%;

    margin:0 auto;

    display:grid;

    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);

    align-items:center;

    padding-bottom:0;

}


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

.site-logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:white;

}


.site-logo h1{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-weight:400;

    font-size:1.85rem;

    line-height:1;

    letter-spacing:.03em;

}


.site-logo span{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:4px;

    color:#a0a0a0;

    font-size:.58rem;

    font-weight:500;

    letter-spacing:.35em;

    text-transform:uppercase;

    white-space:nowrap;

}


.site-logo span::before,
.site-logo span::after{

    content:"";

    width:34px;

    height:1px;

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

}


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

.nav-left,
.nav-right{

    display:flex;

    align-items:center;

    gap:34px;
    flex-wrap:nowrap;
}


.nav-left{

    justify-self:start;

}


.nav-right{

    justify-self:end;

}


/*==================================================
    LIENS
==================================================*/

.nav-left a,
.nav-right a{

    position:relative;

    color:#d5d5d5;

    text-decoration:none;

    font-size:.82rem;

    font-weight:500;

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:color .3s ease;

}


.nav-left a:hover,
.nav-right a:hover{

    color:white;

}


/* Soulignement animé */

.nav-left a::after,
.nav-right a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:1px;

    background:white;

    transition:width .3s ease;

}


.nav-left a:hover::after,
.nav-right a:hover::after{

    width:100%;

}


/*==================================================
    ICÔNE INSTAGRAM
==================================================*/

.nav-right i{

    font-size:1rem;

}


/*==================================================
    ÉTAT ACTIF
==================================================*/

.nav-left a.active{

    color:white;

}


.nav-left a.active::after{

    width:100%;

}


/*==================================================
    ACCESSIBILITÉ
==================================================*/

.nav-left a:focus-visible,
.nav-right a:focus-visible,
.site-logo:focus-visible{

    outline:2px solid white;

    outline-offset:5px;

}

/*==================================================
    MENU MOBILE — ÉLÉMENTS CACHÉS SUR ORDINATEUR
==================================================*/

.mobile-menu-button,
.mobile-menu-overlay,
.mobile-menu{

    display:none;

}

/*==================================================
    HEADER COMPACT — PETITS ORDINATEURS
==================================================*/

@media (min-width:901px) and (max-width:1150px){

    :root{

        --header-width:calc(100% - 32px);

    }

    .header-inner{

        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);

        column-gap:18px;

    }

    .nav-left,
    .nav-right{

        gap:14px;

        flex-wrap:nowrap;

    }

    .nav-left a,
    .nav-right a{

        font-size:.68rem;

        letter-spacing:.1em;

        white-space:nowrap;

    }

    .site-logo h1{

        font-size:1.55rem;

    }

    .site-logo span{

        font-size:.48rem;

        gap:7px;

        letter-spacing:.24em;

    }

    .site-logo span::before,
    .site-logo span::after{

        width:18px;

    }

}


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

@media (max-width:900px){

    /*----------------------------------------------
        HEADER
    ----------------------------------------------*/

    :root{

        --header-height:68px;
        --header-width:calc(100% - 36px);

    }


    #site-header{

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

    }


    #site-header.scrolled{

        background:rgba(8,8,8,.82);

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

    }


    .header-inner{

        display:flex;

        align-items:center;

        justify-content:center;

        position:relative;

    }


    /* Cache les menus pour ordinateur */

    .desktop-navigation{

        display:none;

    }


    /*----------------------------------------------
        LOGO
    ----------------------------------------------*/

    .site-logo{

        position:relative;

        margin:0 auto;

    }


    .site-logo h1{

        font-size:1.55rem;

    }

    .site-logo span{

        font-size:.5rem;

        gap:8px;

        letter-spacing:.28em;

    }

    .site-logo span::before,
    .site-logo span::after{

        width:22px;

    }


    /*----------------------------------------------
        BOUTON HAMBURGER
    ----------------------------------------------*/

    .mobile-menu-button{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        width:44px;
        height:44px;

        padding:0;

        border:0;

        background:transparent;

        cursor:pointer;

        position:absolute;

        right:0;

        top:50%;

        transform:translateY(-50%);

        z-index:1200;

    }


    .mobile-menu-button span{

        display:block;

        width:25px;
        height:1px;

        margin:3.5px 0;

        background:white;

        transform-origin:center;

        transition:

            transform .35s ease,
            opacity .25s ease;

    }


    /* Animation hamburger vers X */

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

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

    }


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

        opacity:0;

    }


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

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

    }


    /*----------------------------------------------
        FOND ASSOMBRI
    ----------------------------------------------*/

    .mobile-menu-overlay{

        position:fixed;

        inset:0;

        display:block;

        z-index:1050;

        background:rgba(0,0,0,.68);

        opacity:0;

        visibility:hidden;

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

        transition:

            opacity .35s ease,
            visibility .35s ease;

    }


    .mobile-menu-overlay.active{

        opacity:1;

        visibility:visible;

    }


    /*----------------------------------------------
        PANNEAU LATÉRAL
    ----------------------------------------------*/

    .mobile-menu{

        position:fixed;

        top:0;
        right:0;

        display:flex;

        flex-direction:column;

        width:min(86vw,380px);
        height:100dvh;

        padding:28px 32px 40px;

        z-index:1100;

        background:#0a0a0a;

        box-shadow:
            -20px 0 60px rgba(0,0,0,.45);

        transform:translateX(100%);

        visibility:hidden;

        transition:

            transform .4s cubic-bezier(.4,0,.2,1),
            visibility .4s ease;

    }


    .mobile-menu.active{

        transform:translateX(0);

        visibility:visible;

    }


    /*----------------------------------------------
        EN-TÊTE DU PANNEAU
    ----------------------------------------------*/

    .mobile-menu-header{

        display:flex;

        align-items:center;
        justify-content:space-between;

        min-height:42px;

        margin-bottom:64px;

    }


    .mobile-menu-title{

        color:#888;

        font-size:.7rem;

        font-weight:500;

        letter-spacing:.22em;

        text-transform:uppercase;

    }


    .mobile-menu-close{

        display:flex;

        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        padding:0;

        border:0;

        background:transparent;

        color:white;

        font-family:Arial,sans-serif;

        font-size:2rem;
        font-weight:200;
        line-height:1;

        cursor:pointer;

        transition:

            color .25s ease,
            transform .25s ease;

    }


    .mobile-menu-close:hover{

        color:#aaa;

        transform:rotate(90deg);

    }


    /*----------------------------------------------
        NAVIGATION PRINCIPALE
    ----------------------------------------------*/

    .mobile-menu-navigation{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:28px;

    }


    .mobile-menu-navigation a{

        position:relative;

        color:white;

        text-decoration:none;

        font-family:"Cormorant Garamond",serif;

        font-size:2rem;
        font-weight:400;

        letter-spacing:.015em;

        transition:

            color .25s ease,
            transform .25s ease;

    }


    .mobile-menu-navigation a:hover{

        color:#aaa;

        transform:translateX(5px);

    }


    /*----------------------------------------------
        SÉPARATEUR
    ----------------------------------------------*/

    .mobile-menu-separator{

        width:100%;
        height:1px;

        margin:48px 0 32px;

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

    }


    /*----------------------------------------------
        NAVIGATION SECONDAIRE
    ----------------------------------------------*/

    .mobile-menu-secondary{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }


    .mobile-menu-secondary a{

        display:flex;

        align-items:center;

        gap:12px;

        color:#aaa;

        text-decoration:none;

        font-size:.76rem;
        font-weight:500;

        letter-spacing:.16em;

        text-transform:uppercase;

        transition:color .25s ease;

    }


    .mobile-menu-secondary a:hover{

        color:white;

    }


    .mobile-menu-secondary i{

        font-size:1rem;

    }

    #contact_menu_mobile {

        font-size:0.9rem;
    }


    /*----------------------------------------------
        ACCESSIBILITÉ
    ----------------------------------------------*/

    .mobile-menu-button:focus-visible,
    .mobile-menu-close:focus-visible,
    .mobile-menu a:focus-visible{

        outline:2px solid white;

        outline-offset:5px;

    }

}


/*==================================================
    PETITS TÉLÉPHONES
==================================================*/

@media (max-width:480px){

    .site-logo h1{

    font-size:1.4rem;

    }

    .site-logo span{
        font-size:.45rem;
        gap:6px;
        letter-spacing:.22em;
    }

    .site-logo span::before,
    .site-logo span::after{
        width:16px;
    }

    .mobile-menu{
        width:90vw;
        padding:
            24px
            26px
            36px;
    }

    .mobile-menu-header{
        margin-bottom:50px;
    }

    .mobile-menu-navigation{
        gap:24px;
    }

    .mobile-menu-navigation a{
        font-size:1.75rem;
    }
}