/* =============================================================================
   3. HEADER DESKTOP
   ============================================================================= */

.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: grid;
    grid-template-columns: 1fr 5fr auto; 
    align-items: center;
    height: 11vh;
    padding: 0 3%;
    box-sizing: border-box;
    transition: background-color 0.5s ease;
    z-index: 1000;
}
.fixed.header { background-color: var(--fond-bandeau) }


/* --- LOGO --- */
.header-logo, .header-logo a {
    height: 100%; 
    display: flex;
    align-items: center;
    overflow: hidden;
}

.header-logo img {
    height: 80%;
    width: auto;
    filter: invert(100%);
    object-fit: contain;
}

/* --- NAVIGATION --- */
.menu_principal {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0; 
    padding: 0 3rem 0 0;
}

.menu_principal li::marker { content: none;}

.menu_principal a {
    position: relative;
    display: block;
    padding: 1rem 0;
    font-family: var(--family-titre);
    font-size: var(--taille-font-base);
    font-weight: 700;
    color: var(--typo-sur-fond-sombre);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.menu_principal a::after {
    content: '';
    position: absolute;
    left: 0; 
    bottom: 0;
    width: 100%; 
    height: 0.2rem; 
    background: var(--fond-page);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu_principal :is(a:hover, li.active > a)::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- CONTACT --- */
.header-contact {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* --- RÉSEAUX SOCIAUX --- */
.btn-partage {
    display: flex;
    gap: 0.6rem;
}

.btn-partage .btnp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    transition: transform 0.4s ease, background-color 0.3s ease;
}

.btn-partage .btnp:hover {
    background-color: var(--fond-bouton);
    transform: rotate(360deg);
}

.btn-partage .icones {
    width: 1rem;  /* 16px */
    height: 1rem;
    fill: var(--typo-sur-fond-sombre);
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .header {
        display: none;
    }
}

@media (max-width: 1376px) {
    .header-infos, .btn-liens-rs { display: none; }
    
    .menu_principal { gap: 0.8rem; } /* ~12.8px */

    .fluid-infos {
        position: fixed;
        top: 20vh; right: 0;
        z-index: 9999;
    }

    .fluid-infos :is(.header-phone, .btn-partage) {
        position: relative;
        left: 9.7rem; /* Converti de 155px */
        background: var(--fond-bouton);
        padding: 0.5rem 1rem;
        transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
    }

    .fluid-infos :is(.header-phone, .btn-partage):hover {
        left: 0;
    }
}