/**
 * Bquery Bandeau Top - Frontend Styles
 * Animation verticale style Caudalie
 * 
 * @package Bquery_Bandeau_Top
 * @version 1.1.0
 */

/* ==========================================================================
   Reset et conteneur principal
   ========================================================================== */

.bquery-bandeau-top {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 99999;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.bquery-bandeau-top *,
.bquery-bandeau-top *::before,
.bquery-bandeau-top *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Slider vertical
   ========================================================================== */

.bandeau-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Items (messages)
   ========================================================================== */

.bandeau-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
}

/* État actif - visible */
.bandeau-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* État sortant vers le haut */
.bandeau-item.exit-up {
    opacity: 0;
    transform: translateY(-100%);
}

/* État sortant vers le bas */
.bandeau-item.exit-down {
    opacity: 0;
    transform: translateY(100%);
}

/* État entrant par le bas */
.bandeau-item.enter-up {
    transform: translateY(100%);
}

/* État entrant par le haut */
.bandeau-item.enter-down {
    transform: translateY(-100%);
}

/* ==========================================================================
   Liens
   ========================================================================== */

.bandeau-item a {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}

.bandeau-item a:hover {
    opacity: 0.8;
}

/* ==========================================================================
   Styles pour le texte
   ========================================================================== */

.bandeau-item strong,
.bandeau-item b {
    font-weight: 700;
}

.bandeau-item em,
.bandeau-item i {
    font-style: italic;
}

/* ==========================================================================
   Pause au survol
   ========================================================================== */

.bquery-bandeau-top.pause-on-hover.is-paused .bandeau-item {
    transition: none;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .bandeau-item {
        padding: 0 15px;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .bandeau-item {
        padding: 0 10px;
        letter-spacing: 0.01em;
    }
}

/* ==========================================================================
   Accessibilité - Réduction des mouvements
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .bandeau-item {
        transition: opacity 0.1s ease !important;
        transform: none !important;
    }
    
    .bandeau-item.active {
        transform: none !important;
    }
    
    .bandeau-item.exit-up,
    .bandeau-item.exit-down {
        transform: none !important;
    }
}

/* ==========================================================================
   Mode d'impression
   ========================================================================== */

@media print {
    .bquery-bandeau-top {
        display: none !important;
    }
}