/* Styles pour le système de bannières header */

/* Force l'alignement à gauche pour toutes les bannières */
div[style*="justify-content"] {
    justify-content: flex-start !important;
}

div[style*="flex-direction"] {
    flex-direction: row !important;
}

.banner-wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: 100px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Règles ultra-spécifiques pour forcer l'alignement gauche */
#header-banner-container * {
    text-align: left !important;
}

#header-banner-container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
}

#header-banner-container > div {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
}

/* S'assurer que le contenu ne cache pas les indicateurs */
#header-banner-container > div:not(.banner-indicators) {
    margin-bottom: 30px !important;
}

/* Force pour toutes les bannières multiples */
.header-banner-container > * {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-direction: row !important;
}

/* Force spécifiquement les images à gauche */
.banner-product-image,
.banner-image-full {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 15px !important;
}

/* Indicateurs de navigation au centre */
.banner-indicators {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 100 !important;
    justify-content: center !important;
}

.banner-indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.6) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(0,0,0,0.2) !important;
}

.banner-indicator.active {
    background: #fff !important;
    border-color: rgba(0,0,0,0.4) !important;
    transform: scale(1.2) !important;
}

/* Badges de position */
.position-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
}

.position-center {
    background-color: #e7f3ff;
    color: #0066cc;
    border-color: #b3d9ff;
}

.position-left {
    background-color: #fff2e7;
    color: #cc6600;
    border-color: #ffcc99;
}

.position-right {
    background-color: #f0e7ff;
    color: #6600cc;
    border-color: #ccb3ff;
}

/* Styles pour les bannières dans le header */
.header-banner-container {
    background: transparent;
    transition: all 0.3s ease;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 140px !important;
    max-height: 220px !important;
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
}

.banner-product-image {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: brightness(1) !important;
}

.banner-product-image:hover {
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.3) !important;
    border-color: rgba(255,107,53,0.5) !important;
}

.banner-image-full {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    filter: brightness(1) contrast(1.1) !important;
}

.banner-content {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 15px 20px !important;
    text-align: left !important;
    z-index: 15 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255,255,255,0.95) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    max-width: 40% !important;
    min-height: 70px !important;
    border: 2px solid rgba(255,140,0,0.8) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    backdrop-filter: blur(1px) !important;
}

.banner-title {
    font-size: 24px !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
    color: #1a1a1a !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
}

.banner-description {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    color: #333333 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.6) !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

.banner-price {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    background: #ff8c00 !important;
    padding: 8px 15px !important;
    border-radius: 25px !important;
    border: 2px solid #ffffff !important;
    margin-top: 5px !important;
    display: inline-block !important;
    box-shadow: 0 2px 10px rgba(255,140,0,0.4) !important;
}

/* Animations pour les transitions entre bannières */
.banner-fade-enter {
    opacity: 0;
    transform: translateX(20px);
}

.banner-fade-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.5s ease;
}

.banner-fade-exit {
    opacity: 1;
    transform: translateX(0);
}

.banner-fade-exit-active {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
}

/* Suppression complète de la superposition sombre */
.header-banner-container::after {
    display: none !important;
}

/* Effet hover sur l'image entière */
.header-banner-container:hover .banner-product-image,
.header-banner-container:hover .banner-image-full {
    transform: scale(1.02) !important;
    filter: brightness(1.1) contrast(1.2) !important;
}

.header-banner-container:hover .banner-content {
    background: rgba(255,255,255,1) !important;
    transform: translateY(-50%) scale(1.05) !important;
    border-color: rgba(255,140,0,1) !important;
    box-shadow: 0 6px 25px rgba(255,140,0,0.4) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

.header-banner-container:hover .banner-title {
    color: #ff8c00 !important;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8) !important;
}

.header-banner-container:hover .banner-price {
    background: #e67300 !important;
    border-color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(255,140,0,0.6) !important;
}

/* Forcer l'affichage de tous les éléments */
.banner-content * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 20 !important;
}

/* Assurer que le contenu reste toujours au-dessus */
.banner-content {
    isolation: isolate !important;
}

/* Responsive */
@media (max-width: 768px) {
    .banner-content {
        max-width: 75% !important;
        left: 15px !important;
        padding: 15px 18px !important;
        min-height: 70px !important;
    }
    
    .banner-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    .banner-description {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    .banner-price {
        font-size: 16px !important;
        padding: 4px 8px !important;
    }
}

@media (max-width: 768px) {
    .header-banner-container {
        min-height: 200px !important;
    }
    .banner-product-image,
    .banner-image-full {
        height: 200px !important;
    }
}

@media (max-width: 480px) {
    .header-banner-container {
        min-height: 180px !important;
    }
    .banner-product-image,
    .banner-image-full {
        height: 180px !important;
    }
    
    .banner-content {
        max-width: 85% !important;
        left: 10px !important;
        padding: 12px 15px !important;
        min-height: 60px !important;
    }
    
    .banner-title {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    .banner-description {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }
    
    .banner-price {
        font-size: 14px !important;
        padding: 3px 6px !important;
    }
}