/* ========================================
   HEADER-CONTENT.CSS
   Auteur                : Renaud
   Création              : 26 octobre 2025
   Dernière modification : 20 novembre 2025
   ======================================== */

.header-content {
    display: grid;
    /* 
    Définition des colonnes:
    - 1ère colonne du logo (largeur auto, prend la taille du logo)
    - 2ème colonne du titre et du slogan (prend l'espace flexible restant)
    - 3ème colonne de la navigation (largeur auto, prend la taille des boutons)
    */
    /*grid-template-columns: auto 1fr auto;*/

     /* Logo (auto) | Branding (flexible) | Nav/Burger (auto) */
    grid-template-columns: auto minmax(0, 1fr) auto;

    /* 
    Une seule ligne principale car nous voulons que le logo, le branding et la nav soient 
    côte à côte. Les éléments internes (titre/slogan) seront gérés par une grille imbriquée. 
       */
/*    grid-template-rows: auto; /* Une seule ligne, hauteur auto */
    align-items: center; /* Centre verticalement tous les éléments principaux dans leur ligne */
    padding: 0.5rem 1rem; /* Garde le padding global du header */
    column-gap: 1rem;/*7rem; /* Espace entre les colonnes */
}

.header-logo     { grid-column: 1; /*grid-row: 1;*/}
.header-branding { grid-column: 2; /*grid-row: 1;*/}
.header-nav      { grid-column: 3; /*grid-row: 1;*/}


.header-content {
    position: sticky; /* ou 'fixed' si vous voulez qu'il soit toujours en haut */
    top: 0;
    width: 100%; /* S'assure qu'il prend toute la largeur */
    z-index: 1000; /* Assure qu'il reste au-dessus des autres contenus */
    background-color: var(--color-background-header);
    box-shadow: 0 2px 5px var(--color-gris-030-shadow);
box-sizing: border-box; /* Important pour les largeurs */   
}


.header-logo { 
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--logo-image-width);

     /* --- CORRECTIF 1 --- */
    margin: 0; /* OBLIGATOIRE : Supprime les marges par défaut que le navigateur ajoute à <figure> */
    padding: 0;
}

/* --- CORRECTIF 2 --- */
.header-logo a {
    display: flex; /* Remplace 'block'. Flex épouse parfaitement la taille de l'image enfant */
    text-decoration: none; /* Sécurité */
    border-radius: 5px; /* Pour que le focus (tabulation) suive l'arrondi de l'image */
}

.header-logo-img {
    display: block;
    width: auto;/*var(--logo-image-width, 150px);*/
    height: auto;
    max-width: var(--logo-image-width); 
    max-height: var(--logo-image-height);

    object-fit: contain;
    border-radius: 5px;

    border: 2px solid transparent;
    transition: border-color 0.2s ease-in-out;
}
/* Interaction sur le survol du LIEN qui affecte l'IMAGE */
.header-logo a:hover .header-logo-img,
.header-logo a:focus .header-logo-img {
    border-color: var(--color-logo-hover);/**/
}

.header-logo a:active .header-logo-img {
    border-color: var(--color-logo-active);
    transform: scale(0.98); /* Petit effet de clic */
}


/*.header-branding {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.2rem;
    align-items: center;
    justify-content: start;
    padding: 0
}

.header-title   { grid-column: 1;grid-row: 1; }
.header-tagline { grid-column: 1;grid-row: 2; }


.header-title {
    padding-left: 0;
    display: flex;
    align-items: flex-end;
    margin: 0;
    white-space: nowrap;
}
.header-title a {
    text-decoration: none;
    color: inherit;
}

.header-tagline {
    margin: 0;
    padding-left: 0;
    font-size: 1rem;
    align-self: start;
    white-space: nowrap;
}
.header-tagline em {
    font-style: italic;
}*/


/* --- 2. BRANDING --- */
.header-branding {
    display: flex; /* Flex pour aligner verticalement titre/slogan */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Aligné à gauche */
    padding-left: 0.5rem;
/*    overflow: hidden; /* Empêche le texte de casser le layout */
min-width: 0;
}

.header-title {
    margin: 0;
    line-height: 1.1;
    /* CORRECTIF DESKTOP : Permet au titre de passer à la ligne si l'écran est étroit */
    white-space: normal; 
/*    word-wrap: break-word;*/
overflow: hidden;
text-overflow: ellipsis; /* Ajoute "..." si ça coupe */
width: 100%; /* Prend la largeur dispo */


}

.header-title a { 
    text-decoration: none; 
    color: inherit; 
}

.header-tagline {
    margin: 0.2rem 0 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
    white-space: normal; /* Idem, le slogan peut passer à la ligne */
overflow: hidden;
text-overflow: ellipsis;
width: 100%;

}


.header-nav { /* Conteneur du menu de navigation */
/*    padding: 0;*/
    display: flex;
/*    align-items: center;*/
    justify-content: flex-end;
/*    align-self: flex-end;*/
}

.header-nav ul {
    display: flex;
/*    justify-content: flex-end;*/
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav li {
    margin: 0 0.3rem;
}


/* --- 4. BURGER (Caché sur Desktop) --- */
/* C'est le code qu'il manquait ! */
.header-burger {
    display: none; /* CRUCIAL : Cache le bouton sur grand écran */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    justify-content: space-around;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 1001;
}

.burger-bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-logo-default);
    border-radius: 2px;
    transition: all 0.3s ease;
}


/* ==========================================================================
   MEDIA QUERIES : VERSION MOBILE & TABLETTE (< 1024px)
   On passe en mobile un peu plus tôt pour éviter que le Branding ne casse tout
   ========================================================================== */
@media (max-width: 1024px) {

    .header-content {
/*        column-gap: 1rem;*/
        padding: 0.5rem ;/*1rem;*/
    }

    /* Ajustement Logo Mobile */
    .header-logo-img {
        max-width: 100px;/*120px; /* Taille raisonnable sur tablette/mobile */
        max-height: 3.5rem;
    }

    /* Ajustement Branding Mobile */
/*    .header-branding {
        padding-left: 0.5rem;
    }
*/

    .header-title {
        font-size: 1.1rem; /* Titre plus petit */
    }

    .header-tagline {
        display: none; /* On cache le slogan pour aérer */
    }

    /* Navigation Desktop Cachée */
    .header-nav { display: none; }

    /* Burger Visible */
    .header-burger {
        display: flex;
        grid-column: 3;
/*        margin-left: auto;*/
    }

/* --- MENU MOBILE DÉROULANT --- */
    .header-nav {
        /* CORRECTIF : On force le menu à sortir de la colonne 3 pour prendre toute la ligne */
        grid-column: 1 / -1; 
        
        position: absolute;
        top: 100%; 
        left: 0; /* Colle à gauche de l'écran */
        width: 100%; /* Prend 100% de la largeur */
        
        background-color: var(--color-background-header);
        border-top: 1px solid var(--color-gris-180);
        box-shadow: 0 10px 15px rgba(0,0,0,0.2);
        z-index: 999;
        box-sizing: border-box;
        
        display: none; /* Caché par défaut */
    }

    .header-nav.is-open {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    .header-nav ul {
        /* CORRECTIF MENU TRONQUÉ : Supprime le padding par défaut du navigateur */
        padding: 0; 
        margin: 0;
        
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre les boutons horizontalement */
        width: 100%;
        padding-bottom: 1.5rem;

padding-top: 1rem;        
    }

    .header-nav li {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0.5rem 0;
padding: 0;        
    }

    /* Style des liens (Boutons) */
    .header-nav .buttons-nav {
/*        display: block;*/
        width: 90%; /*80%; /* Largeur du bouton (80% de l'écran) */
        max-width: 400px; /*300px; /* Pas trop large sur tablette */
text-align: center;
/* Force le texte à passer à la ligne (CORRECTIF "TRONQUÉ") */
white-space: normal ;/*!important; */


/*word-wrap: break-word;
height: auto; /* Hauteur automatique selon le texte */



/*        text-align: center;*/
        padding: 0.8rem;
/*        font-size: 1.1rem;*/
        /* Sécurité pour que le padding ne casse pas la largeur */
        box-sizing: border-box; 
    }
    
    /* Animation Burger */
    .header-burger.is-open .burger-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .header-burger.is-open .burger-bar:nth-child(2) { opacity: 0; }
    .header-burger.is-open .burger-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}

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