/* ========================
   GLOBAL: MASQUER TOUS LES LOGOS PAR DÉFAUT + Z-INDEX
======================== */
.logo-white,
.logo-color,
.logo-black {
    display: none !important;
    z-index: 99 !important;
    position: relative !important;
}

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

/* BOUTONS : toujours au-dessus, jamais masqués */
.btn-filled,
.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 .logo-color {
    display: block !important;
}
body.header-variant-fonce .logo-white {
    display: block !important;
}
body.header-variant-noir .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;
}

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

/* BOUTON OUTLINE (ex : Agir avec nous) */
.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) */
.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 .btn-border,
body.header-variant-noir .btn-border {
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
}
body.header-variant-clair .btn-border .wp-block-button__link,
body.header-variant-noir .btn-border .wp-block-button__link {
    color: #000 !important;
}
body.header-variant-clair .btn-filled,
body.header-variant-noir .btn-filled {
    background: #000 !important;
    color: #fff !important;
}
body.header-variant-clair .btn-filled .wp-block-button__link,
body.header-variant-noir .btn-filled .wp-block-button__link {
    color: #fff !important;
}

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

/* ========================
   HOVER EFFECTS (facultatif)
======================== */
.btn-border:hover {
    background-color: rgb(0, 0, 0)!important;
}
.btn-filled:hover {
    opacity: 0.9;
}
body.header-variant-clair .btn-border:hover,
body.header-variant-noir .btn-border:hover {
    background: rgba(0, 0, 0, 0.05);
}
body.header-variant-fonce .btn-border:hover {
    background: rgba(255, 255, 255, 0.1);
}
body.header-variant-clair .btn-filled:hover,
body.header-variant-noir .btn-filled:hover,
body.header-variant-fonce .btn-filled:hover {
    opacity: 0.9;
}