.flash-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 10px 20px; /* Réduction de la hauteur globale */
    min-height: 47px; /* Réduction d'un tiers */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    animation: slideDown 0.5s ease-in-out;
    text-align: center;
    overflow: hidden; /* Empêche les débordements visuels */
}

.flash-banner h1, .flash-banner h2, .flash-banner h3, .flash-banner h4,
.flash-banner h5, .flash-banner h6, .flash-banner p {
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

.flash-banner .flash-text {
    display: inline-block;
    white-space: nowrap;
    overflow: visible;
    animation: scroll-text 23s linear infinite; /* Défilement du texte (désactivé sur mobile) */
}

.flash-banner .flash-close {
    position: fixed;
    top: 0px;
    right: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: 18px;
    color: #FFF;
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
}

.flash-banner .flash-close:hover {
    color: #FFF; /* Change la couleur de la croix au survol */
}

@keyframes scroll-text {
    from {
        transform: translateX(150%); /* Commence en dehors de la bannière à droite */
    }
    to {
        transform: translateX(-190%); /* Défile complètement hors écran à gauche */
    }
}

/* Responsive fixes */
@media (max-width: 768px) {
    .flash-banner {
        padding: 8px 15px; /* Réduction de la hauteur */
        min-height: 40px;
    }

    .flash-banner .flash-text {
        animation: none; /* Désactiver le défilement */
        white-space: normal; /* Permettre le retour à la ligne */
        word-wrap: break-word; /* Couper le texte si nécessaire */
        overflow: visible;
        text-align: center; /* Centrage du texte */
    }

    .flash-banner .flash-close {
        top: 10px;
        right: 10px;
        font-size: 20px; /* Réduction de la taille */
    }
}

@media (max-width: 480px) {
    .flash-banner {
        padding: 6px 10px; /* Ajustement pour très petits écrans */
        min-height: 37px;
    }

    .flash-banner .flash-text {
        animation: none; /* Désactiver le défilement */
        white-space: normal;
        word-wrap: break-word;
        overflow: visible;
        text-align: center;
    }

    .flash-banner .flash-close {
        top: 8px;
        right: 8px;
        font-size: 18px; /* Taille encore réduite */
    }
}

/* Texte clignotant amélioré */
.blink .flash-text {
    animation: blink-text 4s ease-in-out infinite; /* Animation sur 4 secondes */
}

@keyframes blink-text {
    0%, 80% { /* Le texte reste visible 80% du temps */
        opacity: 1;
    }
    90%, 100% { /* Le texte disparaît brièvement */
        opacity: 0;
    }
}

/* Texte avec effet zoom */
.zoom .flash-text {
    animation: zoom-text 2s ease-in-out infinite;
}

@keyframes zoom-text {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Texte descendant */
.slide .flash-text {
    animation: slide-text 1s ease-in-out;
}

@keyframes slide-text {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Effet combiné */
.combo .flash-text {
    animation: scroll-text 40s linear infinite, blink-text 1.5s steps(2, start) infinite, zoom-text 2s ease-in-out infinite;
}

@keyframes scroll-text {
    from {
        transform: translateX(100%); /* Commence à droite */
    }
    to {
        transform: translateX(-100%); /* Défile complètement à gauche */
    }
}

/* Mode paysage mobile */
@media (max-height: 480px) and (orientation: landscape) {
    .flash-banner .flash-text {
        animation: scroll-text 10s linear infinite; /* Réduit le temps d'animation */
    }
}