/* ========================
   GLOBAL: MASQUER TOUS LES LOGOS PAR DÉFAUT + Z-INDEX
   (scopé à .header-site pour éviter les conflits avec le bloc Navigation)
======================== */
.header-site .logo-white,
.header-site .logo-color,
.header-site .logo-black {
    display: none !important;
    z-index: 99 !important;
    position: relative !important;
}

/* LOGO CONTAINER : assure la pile correcte */
.header-site .logo-container,
.header-site .wp-block-group.logo-container {
    z-index: 99 !important;
    position: relative !important;
}

/* BOUTONS : toujours au-dessus, jamais masqués */
.header-site .btn-filled,
.header-site .btn-border {
    z-index: 99 !important;
    position: relative !important;
}

/* HEADER : sur tout le contenu, sauf overlays spéciaux (menu mobile, etc.) */
.header-site {
    position: fixed !important;
    z-index: 100 !important;
    width: 100%;
    transition: all 0.2s ease;
    top: 0;
    left: 0;
}

/* ========================
   AFFICHAGE DU BON LOGO PAR VARIANTE (état initial, sans scroll)
======================== */
body.header-variant-clair .header-site .logo-color {
    display: block !important;
}
body.header-variant-fonce .header-site .logo-white {
    display: block !important;
}
body.header-variant-noir .header-site .logo-black {
    display: block !important;
}

/* ========================
   HEADER TRANSPARENT : style de base selon la variante
======================== */
body.header-transparent.header-variant-clair .header-site {
    background: transparent;
}
body.header-transparent.header-variant-clair .header-site a {
    color: #000;
}
body.header-transparent.header-variant-fonce .header-site {
    background: transparent;
}
body.header-transparent.header-variant-fonce .header-site a {
    color: #fff;
}
body.header-transparent.header-variant-noir .header-site {
    background:  transparent;
}
body.header-transparent.header-variant-noir .header-site a {
    color: #000;
}

/* ========================
   AU SCROLL : header blanc, logo couleur pour tous, textes noirs
======================== */
body.header-transparent .header-site.scrolled {
    background: #fff !important;
}
body.header-transparent .header-site.scrolled a {
    color: #000 !important;
}
body.header-transparent .header-site.scrolled .logo-white,
body.header-transparent .header-site.scrolled .logo-black {
    display: none !important;
}
body.header-transparent .header-site.scrolled .logo-color {
    display: block !important;
}

/* ========================
   AFFICHAGE PAR VARIANTE EN MODE TRANSPARENT, AVANT SCROLL
   (pour éviter tout conflit et forcer le bon logo dès le départ)
======================== */
body.header-variant-clair .header-site:not(.scrolled) .logo-color {
    display: block !important;
}
body.header-variant-fonce .header-site:not(.scrolled) .logo-white {
    display: block !important;
}
body.header-variant-noir .header-site:not(.scrolled) .logo-black {
    display: block !important;
}

/* ========================
   SOUS-MENUS DU BLOC NAVIGATION DANS LE HEADER
   Override uniquement le style visuel, pas position/visibility (géré par le bloc)
======================== */
.header-site .wp-block-navigation__submenu-container {
    min-width: 220px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 0.5rem 0;
}

.header-site .wp-block-navigation-item.has-child {
    position: relative;
}

/* Bouton toggle : neutraliser le carré blanc visible */
.header-site .wp-block-navigation__submenu-toggle,
.header-site button.wp-block-navigation__submenu-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.header-site .wp-block-navigation__submenu-toggle svg {
    display: none;
}

/* ========================
   BOUTONS (outline / filled) : styles de base et transition au scroll
======================== */

/* BOUTON OUTLINE (ex : Agir avec nous) */
.header-site .btn-border {
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    transition: all 0.3s ease;
    border-radius: 10px;
}
.header-site.scrolled .btn-border {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}

/* BOUTON PLEIN (ex : Faire un don) */
.header-site .btn-filled {
    background-color: #fff !important;
    color: #000 !important;
    transition: all 0.3s ease;
    border-radius: 10px;
}
.header-site.scrolled .btn-filled {
    background-color: #000 !important;
    color: #fff !important;
}
.header-site.scrolled .btn-filled .wp-block-button__link {
    color: #fff !important;
}

/* ========================
   VARIANTES DE COULEUR DES BOUTONS PAR HEADER (avant scroll)
======================== */

/* CLAIR & NOIR : boutons noirs */
body.header-variant-clair .header-site .btn-border,
body.header-variant-noir .header-site .btn-border {
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
}
body.header-variant-clair .header-site .btn-border .wp-block-button__link,
body.header-variant-noir .header-site .btn-border .wp-block-button__link {
    color: #000 !important;
}
body.header-variant-clair .header-site .btn-filled,
body.header-variant-noir .header-site .btn-filled {
    background: #000 !important;
    color: #fff !important;
}
body.header-variant-clair .header-site .btn-filled .wp-block-button__link,
body.header-variant-noir .header-site .btn-filled .wp-block-button__link {
    color: #fff !important;
}

/* FONCÉ : boutons blancs */
body.header-variant-fonce .header-site .btn-border {
    background: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}
body.header-variant-fonce .header-site .btn-border .wp-block-button__link {
    color: #fff !important;
}
body.header-variant-fonce .header-site .btn-filled {
    background: #fff !important;
    color: #000 !important;
}
body.header-variant-fonce .header-site .btn-filled .wp-block-button__link {
    color: #000 !important;
}

/* ========================
   HOVER EFFECTS (facultatif)
======================== */
.header-site .btn-border:hover {
    background-color: rgb(0, 0, 0)!important;
    color: #000;
}
.header-site .btn-filled:hover {
    opacity: 0.9;
}
body.header-variant-clair .header-site .btn-border:hover,
body.header-variant-noir .header-site .btn-border:hover {
    background: rgba(0, 0, 0, 0.05);
}
/* FONCÉ : au hover, fond blanc donc texte noir pour visibilité */
body.header-variant-fonce .header-site .btn-border:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #000 !important;
}
body.header-variant-fonce .header-site .btn-border:hover .wp-block-button__link {
    color: #000 !important;
}
body.header-variant-clair .header-site .btn-filled:hover,
body.header-variant-noir .header-site .btn-filled:hover,
body.header-variant-fonce .header-site .btn-filled:hover {
    opacity: 0.9;
}
/* SCROLLÉ : au hover, texte noir pour visibilité sur fond clair */
.header-site.scrolled .btn-filled:hover {
    color: #000 !important;
}
.header-site.scrolled .btn-filled:hover .wp-block-button__link {
    color: #000 !important;
}