/* Conteneur principal de la bannière */
.cathoretro-banniere-wrapper {
    width: 100%;
    position: relative;
}

/* Bannière statique */
.cathoretro-banniere {
    width: 100%;
    padding: 15px;
    margin: 0;
    text-align: center;
    background-color: inherit;
}

/* Bannière fixe */
.cathoretro-banniere-sticky {
    position: fixed;
    top: var(--topbar-height, 0);
    left: 0;
    width: 100%;
    padding: 8px;
    margin: 0;
    text-align: center;
    z-index: 999999;
    background-color: inherit;
    display: none;
}

/* État actif de la bannière fixe */
.cathoretro-banniere-sticky.is-active {
    display: block;
}

/* Ajustements pour la barre d'admin WordPress */
.admin-bar .cathoretro-banniere-sticky {
    top: calc(var(--topbar-height, 0) + 32px);
}

/* Styles spécifiques mobile (max-width: 959px) */
@media screen and (max-width: 959px) {
    .cathoretro-banniere-sticky {
        top: 60px;
    }
    
    .admin-bar .cathoretro-banniere-sticky {
        top: 60px;
    }

    /* Ajout du padding au wrapper global quand la bannière est fixée */
    body.has-sticky-banner .global_content_wrapper {
        padding-top: var(--banner-height, 0);
    }
}



@media screen and (max-width: 782px) {
    .admin-bar .cathoretro-banniere {
        top: 46px; /* Hauteur de la barre d'admin sur mobile */
    }
}


/* Ajout d'un espace pour le contenu sous la bannière fixe */
.cathoretro-banniere-spacer {
    display: none;
}

.cathoretro-banniere-spacer.is-active {
    display: block;
}

.cathoretro-banniere-content {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.4;
}

.cathoretro-banniere-content p {
    margin: 0;
}

.cathoretro-banniere-content a,
.cathoretro-banniere-content a:hover,
.cathoretro-banniere-content a:active,
.cathoretro-banniere-content a:focus,
.cathoretro-banniere-content a:visited {
    color: inherit;
    text-decoration: underline;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.cathoretro-banniere-content a:hover,
.cathoretro-banniere-content a:active,
.cathoretro-banniere-content a:focus {
    opacity: 0.8;
}

/* Styles responsifs */
@media screen and (max-width: 768px) {
    .cathoretro-banniere {
        padding: 10px;
    }

    .cathoretro-banniere-content {
        font-size: 14px;
    }
}