/*  ========================================
    HEADER-BURGER.CSS
    Auteur                : Renaud
    Création              : 07 décembre 2025
    Dernière modification : 11 décembre 2025
    ========================================
*/
/**
*   @project   DEVENIR-ARTISAN.NET
*   Gère le bouton Burger ET le comportement du menu mobile déroulant.
*   
*   @file  css/header-burger.css
*
*   @see   includes/header-burger.php (JS + HTML)
*   @see   css/colors-semantic.css
*/

/* --- LE BOUTON BURGER (Trigger) --- */
.header-burger {
    /* PLACEMENT */
    display: none; /* Caché par défaut sur Desktop */
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    flex-direction: column;
    justify-content: space-around;
    z-index: 1002; /* Au-dessus du menu ouvert */
    
    /* VISUEL */
    background: none;
    border: none;

    /* EFFET */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* --- ELEMENT : Bar --- */
.header-burger__bar {
    /* PLACEMENT */
    width: 100%;
    height: 3px;

    /* VISUEL */
    background-color: var(--color-headings);
    border-radius: 2px;

    /* EFFET */
    transition: all 0.3s ease;
}


/* --- GESTION RESPONSIVE & MENU DÉROULANT --- */

/* À 1150px (Breakpoint Tablette défini ailleurs), le Burger apparaît */
@media (max-width: 1150px) {

    /* --- AFFICHER LE BOUTON --- */
    .header-burger {
        display: flex;
    }

    /* --- MODIFICATION DU BLOCK : NAV (Mobile) --- */
    /* Note : On surcharge le header-nav.css ici */
    .header-nav {
        /* PLACEMENT */
        display: none; /* Caché par défaut */
        position: fixed;
        top: 70px;      /* Hauteur du header Tablette */
        left: 0;
        width: 100%;
        max-height: calc(100vh - 70px); 
        padding: 0;
        z-index: 999;
        overflow-y: auto;
        
        /* VISUEL */
        background-color: var(--color-background-mobile-menu); 
        border-top: 1px solid var(--color-border-mobile-menu);
        box-shadow: 0 50px 100px rgba(0,0,0,0.2); 
    }
    
    /* Correction position header mobile (60px) */
    @media (max-width: 768px) {
        .header-nav { 
            top: 60px; 
            max-height: calc(100vh - 60px); }
    }


    /* --- ÉTAT OUVERT (.is-open ajouté par JS) --- */
    .header-nav.is-open {
        display: block; /* Affiche le panneau */
        animation: slideDown 0.3s ease-out;
    }


    /* --- STYLE DES LIENS MOBILES (Reset du style Flex Desktop) --- */
    .header-nav__list {
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    /* --- MODIFICATION ELEMENT : Item (Mobile) --- */
    .header-nav__item {
        width: 100%;
        margin: 0;
        /* Ligne de séparation */
        border-bottom: 1px solid var(--color-border-mobile-menu); 
        text-align: center;
    }

    /* Liens Texte (Accueil, Blog...) */
     /* --- STYLE DES LIENS TEXTE (Mobile) --- */
    /* On cible spécifiquement les liens dans les items */
    .header-nav__item .buttons-nav {
        display: block;
        width: 100%;
        padding: 1rem 0;
        
        /* Reset du style desktop */
        border-radius: 0; 
        background-color: transparent;
        font-size: 1.1rem;
        color: var(--color-nav-text-default);
    }
    
    /* Hover Mobile */
    .header-nav__item .buttons-nav:active {
        background-color: var(--color-background-block);
        color: var(--color-nav-text-active);
    }


    /* --- CAS PARTICULIER : LE CTA (Mobile) --- */
    /* On utilise le Modifier BEM défini dans header-nav.php */
    .header-nav__item--cta {
        padding: 2rem;
        background-color: var(--color-background-block); /* Fond grisé */
        border-bottom: none;
    }

    .header-nav a.buttons-cta {
        /* On garde le style bouton (Rond + Orange) */
        display: inline-flex; 
        width: 100%;
        max-width: 300px; /* Pas trop large non plus */
        
        /* Réinitialisation de styles spécifiques mobile */
        margin: 0 auto; 
    }


    /* --- ANIMATION DE L'ICÔNE CROIX --- */
    /* Barre 1 : Rotation + Translation */
    .header-burger.is-open .header-burger__bar:nth-child(1) { 
        transform: rotate(45deg) translate(5px, 6px); 
        background-color: var(--color-red-120); 
    }
    /* Barre 2 : Disparition */
    .header-burger.is-open .header-burger__bar:nth-child(2) { 
        opacity: 0; 
    }
    /* Barre 3 : Rotation inverse + Translation */
    .header-burger.is-open .header-burger__bar:nth-child(3) { 
        transform: rotate(-45deg) translate(5px, -6px); 
        background-color: var(--color-red-120);
    }
}

/* --- KEYFRAMES --- */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}