.header-site {
    /* Mise en page Flexbox : Logo à gauche, Menu à droite */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Design */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1rem 2rem; /* Espacement interne */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    max-height: 100px;
    
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000; 
}

/* --- LE LOGO --- */
.header-site .custom-logo-link img,
.header-site .wp-block-site-logo img {
    max-height: 60px; /* Limite la hauteur pour pas que le logo explose */
    width: auto;
    transition: transform 0.3s ease;
}

/* Petit effet au survol du logo */
.header-site .wp-block-site-logo img:hover {
    transform: scale(1.05);
}

/* --- LES LIENS DU MENU --- */
/* Ciblage précis des liens dans le bloc navigation WordPress */
.header-site .wp-block-navigation a {
    font-family: var(--font-titre, sans-serif); /* On utilise ta police Braah One si tu veux */
    font-size: 1.1rem;
    color: var(--clr-primaire, #000);
    text-decoration: none; /* Enlève le soulignement moche par défaut */
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

/* Effet au survol des liens */
.header-site .wp-block-navigation a:hover {
    color: var(--clr-secondaire, blue);
    background-color: rgba(0,0,0,0.05); /* Petit fond gris clair au survol */
    border-radius: 5px;
}

.header-site > div > div {
    display: flex;
    justify-content: space-between; /* Écarte le logo et le menu */
    align-items: center;
    width: 100%; /* Force la largeur totale */
    max-width: 1200px; /* Optionnel : pour ne pas que ce soit trop large sur grands écrans */
    margin: 0 auto; /* Centre le contenu si tu as mis une max-width */
    padding: 1rem 2rem; /* C'est ici qu'on met le padding maintenant */
}