/* === HEADER === */

/* Conteneur principal du header */
.site-header {
    margin: 30px 50px 0 50px;
}

/* Structure interne du header */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nom / Prénom à gauche */
.site-title a {
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    color: #000;
    font-family: "Inter Tight", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    transition: color 0.3s ease;
}

/* Menu à droite */
.menu-header {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
}

/* Liens du menu (sauf dernier bouton) */
.menu-header li:not(:last-child) a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 16px;
    font-family: "Inter Tight", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    position: relative;           /* pour underline animé */
    transition: color 0.3s ease;
}

/* Underline animé pour tous les liens sauf le dernier bouton */
.menu-header li:not(:last-child) a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;       /* distance sous le texte */
    width: 0%;
    height: 1.5px;      /* épaisseur du trait */
    background-color: #000;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.menu-header li:not(:last-child) a:hover::after,
.menu-header li.current-menu-item a::after {
    width: 100%;        /* le trait s'étend sur toute la largeur */
}

/* Hover simple sur les liens */
.menu-header li:not(:last-child) a:hover {
    color: #000; /* tu peux changer si tu veux un effet couleur */
}

/* Bouton arrondi pour le dernier élément */
.menu-header li:last-child a {
    display: inline-flex;          /* texte + flèche alignés */
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #000;
    padding: 10px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #000;
    font-family: "Inter Tight", sans-serif;
}

/* Hover bouton arrondi */
.menu-header li:last-child a:hover {
    transform: translateY(-2px);
    background-color: #f5f5f5;
}

/* Flèche dans le dernier bouton */
.menu-header li:last-child a img.arrow-icon {
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Animation flèche au hover du bouton */
.menu-header li:last-child a:hover img.arrow-icon {
    transform: translateX(4px);    /* flèche qui bouge vers la droite */
}
 

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

/* Burger icon (desktop hidden by default) */
.burger {
    display: none;               /* caché par défaut (desktop) */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 20px;
    gap: 5px;
    cursor: pointer;
    position: fixed;             /* reste en haut à droite */
    top: 25px;
    right: 40px;
    z-index: 10001;              /* au-dessus de tout */
}

.burger span {
    display: block;
    width: 100%;
    height: 1px;                 /* légèrement plus visible */
    background-color: #000;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animation burger actif -> croix */
.burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px,4px);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px,-4.5px);
}

/* ========================= */
/*        RESPONSIVE         */
/* ========================= */
@media screen and (max-width: 1000px) {

    /* Affiche le burger sur mobile */
    .burger {
        display: flex;
    }

    /* Menu full-screen */
    .menu-header {
        position: fixed;
        top: -50px;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
        gap: 40px;
        border: none;
        border-radius: 0;
        display: none;              /* caché par défaut */
        z-index: 10000;             /* dessous du burger */
        overflow: hidden;           /* empêche le scroll */
    }

    /* Affiche le menu lorsqu'il est ouvert */
    .menu-header.open {
        display: flex;
    }

    /* Liens mobile */
    .menu-header li:not(:last-child) a {
        font-size: 24px;
        text-align: center;

        /* Supprime animation underline */
        position: static;
    }

    .menu-header li:not(:last-child) a::after {
        display: none;
    }

    /* Dernier lien "Contact" devient comme les autres */
    .menu-header li:last-child a {
        justify-content: center;
        font-size: 24px;
        padding: 0;
        border: none;
        border-radius: 0;
        gap: 0;
    }

    /* Supprime la flèche du dernier lien */
    .menu-header li:last-child a img.arrow-icon {
        display: none;
    }


        .site-title a {
        font-size: 14px;       /* un peu plus petit */
        margin-left: -20px;     /* décale vers la gauche */
    }
}