/* ============================================================================
   MODULE HEADER [ft-header] - CSS PURE ET SCOPÉ
   ============================================================================ */

#ft-header nav {
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 1.25rem 4rem;
    background: rgba(253, 252, 250, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #e4e0d8;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.admin-bar #ft-header nav {
    top: 32px;
}

#ft-header .nav-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f0f0e;
    text-decoration: none;
    z-index: 1001; /* Pour rester au dessus du menu mobile */
}

#ft-header .nav-links {
    display: flex; 
    gap: 2.5rem; 
    list-style: none;
    margin: 0;
    padding: 0;
}

#ft-header .nav-links a {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a7672;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

#ft-header .nav-links a:hover { 
    color: #0f0f0e; 
}

/* Cache le bouton CTA du menu sur Desktop */
#ft-header .mobile-only-li {
    display: none;
}

/* --- GROUPE DE DROITE --- */
#ft-header .header-right-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 1001;
}

#ft-header .social-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#ft-header .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#ft-header .social-links a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

#ft-header .social-links svg {
    width: 20px;
    height: 20px;
}

#ft-header .nav-cta {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #0f0f0e;
    color: #f7f4ef;
    padding: 0.6rem 1.4rem;
    text-decoration: none;
    transition: background 0.2s;
    font-weight: 500;
}

#ft-header .nav-cta:hover { 
    background: #b85c38; 
}

/* Bouton Hamburger caché par défaut (sur Desktop) */
#ft-header .hamburger-menu {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 18px;
    position: relative;
    padding: 0;
}

#ft-header .hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: #0f0f0e;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

#ft-header .hamburger-menu span:nth-child(1) { top: 0; }
#ft-header .hamburger-menu span:nth-child(2) { top: 8px; }
#ft-header .hamburger-menu span:nth-child(3) { top: 16px; }

/* Animation du Hamburger quand il est actif (Croix) */
#ft-header .hamburger-menu.active span:nth-child(1) { top: 8px; transform: rotate(45deg); }
#ft-header .hamburger-menu.active span:nth-child(2) { opacity: 0; }
#ft-header .hamburger-menu.active span:nth-child(3) { top: 8px; transform: rotate(-45deg); }


/* =======================================================
   RESPONSIVE MOBILE (Menu Déroulant)
   ======================================================= */
@media (max-width: 900px) {
    #ft-header nav { 
        padding: 1rem 1.2rem; 
    }
    .admin-bar #ft-header nav {
        top: 46px; 
    }

    /* On cache le bouton classique, on affiche le hamburger */
    #ft-header .desktop-cta { 
        display: none; 
    }
    #ft-header .hamburger-menu { 
        display: block; 
    }

    /* Ajustement de l'espacement à droite */
    #ft-header .header-right-actions {
        gap: 1.2rem;
    }
    #ft-header .social-links {
        gap: 0.8rem;
    }
    #ft-header .social-links svg {
        width: 18px; 
        height: 18px;
    }

   /* === LE MENU DÉROULANT MOBILE (Minimaliste & Aligné à droite) === */
    #ft-header .nav-links {
        position: absolute;
        top: calc(100% + 10px); /* Léger décalage vers le bas pour l'effet flottant */
        right: 1.2rem; /* Aligné sur la marge droite de l'écran */
        left: auto; /* Annule la largeur totale */
        width: 240px; /* Largeur fixe de la petite boîte */
        background: #fdfcfa; 
        border: 1px solid #e4e0d8; /* Bordure élégante tout autour */
        border-radius: 6px; /* Coins légèrement arrondis */
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Ombre portée pour détacher la boîte du fond */
        flex-direction: column;
        align-items: flex-start; /* Aligne les liens à gauche dans la boîte */
        padding: 1.5rem;
        gap: 1.25rem;
        
        /* Caché par défaut */
        transform: translateY(-15px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }

    #ft-header .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    #ft-header .nav-links a {
        font-size: 0.82rem; /* Taille affinée */
        display: block;
        width: 100%;
        text-align: left; /* Texte aligné à gauche */
    }

    /* Le bouton "Work With Me" dans le petit menu */
    #ft-header .mobile-only-li {
        display: block;
        margin-top: 0.5rem;
        width: 100%;
    }
    
    #ft-header .mobile-only-li .nav-cta {
        display: block;
        width: 100%;
        text-align: center; /* On garde le texte du bouton centré */
        padding: 0.8rem;
        box-sizing: border-box;
        border-radius: 2px;
    }
}

@media (max-width: 380px) {
    #ft-header .header-right-actions {
        gap: 0.8rem;
    }
}