/* Flash bar — rotating, dismissible, pausable top banner. Each message has its own
 * colour (flash-bar--c{N}, set by JS from the active index). Long messages stay on one
 * line and scroll (marquee) instead of wrapping. JS in core/redesign/js/header.js.
 * Scoped reset so this file works on legacy pages without loading base.css. */
.flash-bar, .flash-bar * {
    box-sizing: border-box;
}

.flash-bar {
    font-family: var(--font-body);
    position: relative;
    z-index: 5;
    height: var(--flash-bar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--orange);
    /* Colour cross-fades when the active message changes. */
    transition: background 0.5s ease;
}

/* Per-message background colours (index matches message order in flash_bar.html).
   One distinct colour per message — no two alike. */
.flash-bar--c0 { background: var(--orange); }        /* Par Mickaël — 230 000+ abonnés YouTube (orange) */
.flash-bar--c1 { background: var(--green-dark); }    /* Delivered countries (teal) */
.flash-bar--c2 { background: #4338ca; }              /* Livraison offerte dès 150 euros (indigo) */
.flash-bar--c3 { background: #e0282e; }              /* 150 000 commandes (rouge) */

.flash-bar.closed {
    display: none;
}

/* CMS/product preview banner is also fixed at top:0 (z-index:1 in legacy
 * _common_css.scss) — lift it above the flash bar (z-index:5) so preview mode
 * stays on top instead of being hidden behind the banner. */
.banner-preview {
    z-index: 1000 !important;
}

.flash-bar-inner {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    /* Leave room for the action buttons pinned on the right. */
    overflow: hidden;
}

.flash-bar-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.flash-bar-msg.active {
    opacity: 1;
    transform: translateY(0);
}

.flash-bar-text {
    white-space: nowrap;
    padding: 0 16px;
}

.flash-bar-msg i {
    margin-right: 6px;
}

/* Emphasised value (number / amount / year) — underline is the highlight. */
.flash-bar-hl {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}

/* Mickaël's face on the first message (replaces an icon). */
.flash-bar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 6px;
}

/* Message too long for one line: pin left and scroll it (marquee) rather than wrap. */
.flash-bar-msg.is-scrolling {
    justify-content: flex-start;
}

/* --marquee-distance / --marquee-duration / --marquee-delay are set per message by
 * header.js from the measured overflow. --marquee-delay holds the text still at the
 * start (so it's readable before it moves); `forwards` holds it on its end frame (no
 * loop, no empty trailing gap); the bar then advances to the next message. */
.flash-bar-msg.is-scrolling .flash-bar-text {
    animation: flash-marquee var(--marquee-duration, 12s) linear var(--marquee-delay, 1.5s) forwards;
}

/* Paused state freezes both the rotation (JS clears the timer) and the marquee. */
.flash-bar.paused .flash-bar-msg.is-scrolling .flash-bar-text {
    animation-play-state: paused;
}

/* Scroll from the visible left-aligned start to the end flush right. The initial
 * "read the start" hold is the animation-delay (--marquee-delay), not a keyframe. */
@keyframes flash-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--marquee-distance, -100%)); }
}

/* Actions are a flex sibling of the message area (not overlaid on top of it), so the
 * text never runs under the pause/close buttons. */
.flash-bar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
}

.flash-bar-pause,
.flash-bar-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    transition: color 0.2s ease;
}

.flash-bar-pause:hover,
.flash-bar-close:hover {
    color: var(--white);
}

@media (max-width: 480px) {
    .flash-bar-msg {
        font-size: 0.82rem;
    }
}

/* Respect reduced-motion: no marquee, no slide — fade only, message truncated if long. */
@media (prefers-reduced-motion: reduce) {
    .flash-bar-msg {
        transform: none;
        transition: opacity 0.4s ease;
    }
    .flash-bar-msg.is-scrolling .flash-bar-text {
        animation: none;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}