/* --- BARRE DE NAVIGATION (Globale) --- */
nav {
    display: flex;
    justify-content: center; /* Centre le menu sur PC */
    align-items: center;
    padding: 2rem 3.75rem; 
    background-color: var(--color-01);
    border-bottom: 2px solid var(--color-02); 
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000; 
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 6.25rem; 
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-02);
    font-size: 1rem; 
    letter-spacing: 0.0625rem; 
    transition: opacity 0.3s ease;
    font-weight: 400;
}

.nav-links a:hover {
    color: var(--color-03);
}

/* Espace au centre de la nav sur PC */
.spacer {
    width: 6.25rem; 
    pointer-events: none;
}

/* --- LA FLEUR INTERACTIVE --- */
.logo-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 1005; /* Reste par-dessus tout */
}

#flower-container {
    position: absolute;
    height: 6.25rem;
    left: 50%; 
    transform: translateX(-50%); 
    top: -2rem; /* Décalage PC */
}

#flower-base {
    width: 120px; 
    display: block;
}

#flower-eyes {
    position: absolute;
    width: 30px; 
    top: 30px; 
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out; 
}

/* --- BURGER MENU (Caché sur Desktop) --- */
.burger {
    display: none;
    cursor: pointer;
    z-index: 1010; /* Doit être le plus haut pour refermer le menu ! */
}

.burger div {
    width: 28px;
    height: 3px;
    background-color: var(--color-02);
    margin: 6px;
    transition: all 0.3s ease;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1000px) {
    nav {
        padding: 1rem 2rem;
        justify-content: flex-end; /* Aligne le burger à droite */
    }

    .spacer {
        display: none; /* Disparaît sur mobile */
    }

    /* 1. La Fleur Fixée en haut à gauche */
    .logo-wrapper {
        position: fixed;
        top: -30px;
        left: -30px;
        width: 150px;
        transform: none; /* Annule le centrage PC */
        margin: 0;
    }

    #flower-container {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }

    #flower-base {
        width: 150px;
        rotate: -45deg; 
    }

    #flower-eyes {
        width: 35px;
        top: 54px;
        left: 65px;
        transform: translate(-50%, -50%);
    }

    /* 2. Le Burger Fixé en haut à droite */
    .burger {
        display: block;
        position: relative;
    }

    /* 3. Le Menu Déroulant */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--color-01);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem; 
        
        transform: translateX(100%); /* Caché par défaut à droite */
        transition: transform 0.4s ease-in-out;
        z-index: 1001; /* En dessous de la fleur et du burger */
    }

    .nav-links.nav-active {
        transform: translateX(0); /* Fait apparaître le menu */
    }

    /* Animation de la croix du burger */
    .burger.toggle .line1 { transform: rotate(-45deg) translate(-6px, 6px); }
    .burger.toggle .line2 { opacity: 0; }
    .burger.toggle .line3 { transform: rotate(45deg) translate(-6px, -6px); }
}

@keyframes fadeInLink {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}