/* ============================================================
   Bandeaux infos — effet FLASH visible
   L'Épice Rit Aiguines

   Emplacement :
   public_html/nouveau-site/public/assets/css/bandeaux.css

   Effet :
   - le bandeau fait un vrai flash lumineux bref
   - le texte reste toujours lisible
   - aucune modification de hauteur
   ============================================================ */

.flash-banner {
    position: relative;
    z-index: 65;
    overflow: hidden;
    animation: flash-banner-alert 3.2s ease-in-out infinite;
}

/* Petit point d'alerte animé */
.flash-pulse {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ffd761;
    box-shadow: 0 0 0 0 rgba(255, 215, 97, .85);
    animation: flash-dot 1.6s ease-out infinite;
}

/* Le titre ressort un peu plus pendant le flash */
.flash-title {
    color: #ffd761;
    font-weight: 800;
}

/* Flash lumineux bref sur toute la barre */
.flash-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0);
    animation: flash-overlay 3.2s ease-in-out infinite;
}

@keyframes flash-banner-alert {
    0%,
    78%,
    100% {
        filter: brightness(1);
        box-shadow: none;
    }

    82% {
        filter: brightness(1.18);
        box-shadow:
            0 0 18px rgba(255, 215, 97, .38),
            inset 0 0 22px rgba(255, 255, 255, .12);
    }

    86% {
        filter: brightness(1);
        box-shadow: none;
    }

    90% {
        filter: brightness(1.12);
        box-shadow:
            0 0 13px rgba(255, 215, 97, .25),
            inset 0 0 16px rgba(255, 255, 255, .08);
    }

    94% {
        filter: brightness(1);
        box-shadow: none;
    }
}

@keyframes flash-overlay {
    0%,
    78%,
    100% {
        background: rgba(255, 255, 255, 0);
    }

    82% {
        background: rgba(255, 255, 255, .16);
    }

    86% {
        background: rgba(255, 255, 255, 0);
    }

    90% {
        background: rgba(255, 255, 255, .09);
    }

    94% {
        background: rgba(255, 255, 255, 0);
    }
}

@keyframes flash-dot {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 97, .75);
    }

    70% {
        transform: scale(1.18);
        box-shadow: 0 0 0 9px rgba(255, 215, 97, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 97, 0);
    }
}

/* Respect du réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
    .flash-banner,
    .flash-banner::before,
    .flash-pulse {
        animation: none;
    }
}