/*
 * Bandeau « Flash info » (com_piximflash, élément Builder pixim_flash) — 2026-10-27.
 * Couleurs du design system : navy #023859 (comme l'ancien bandeau « En bref »), teal #03BCCF / #4DD0DE.
 * Sans JavaScript : les infos s'empilent (une à la fois) ou se font défiler à la main (bandeau).
 */

.kq-flash {
    --kq-flash-fond: #023859;
    --kq-flash-accent: #03BCCF;
    --kq-flash-lien: #4DD0DE;
    display: flex;
    align-items: stretch;
    min-height: 46px;
    background: var(--kq-flash-fond);
    color: #fff;
    font-size: .9375rem;
    line-height: 1.45;
}

/* Étiquette */
.kq-flash__libelle {
    flex: none;
    display: flex;
    align-items: center;
    gap: .55em;
    margin: 0;
    padding: 0 16px;
    background: var(--kq-flash-accent);
    color: var(--kq-flash-fond);
    font-family: Poppins, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.kq-flash__point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: kq-flash-pouls 1.8s ease-in-out infinite;
}

@keyframes kq-flash-pouls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}

/* Zone des infos */
.kq-flash__fenetre {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 10px 18px;
}

.kq-flash__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kq-flash__item {
    margin: 0;
}

.kq-flash__titre {
    color: #fff;
    font-weight: 700;
}

.kq-flash__texte {
    color: rgba(255, 255, 255, .9);
}

.kq-flash__sep {
    color: var(--kq-flash-accent);
}

.kq-flash .kq-flash__lien {
    color: var(--kq-flash-lien);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.kq-flash .kq-flash__lien:hover,
.kq-flash .kq-flash__lien:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.kq-flash a:focus-visible,
.kq-flash button:focus-visible {
    outline: 2px solid var(--kq-flash-lien);
    outline-offset: 2px;
}

/* Commandes (affichées par le script) */
.kq-flash__controles {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
}

.kq-flash__controles[hidden] {
    display: none;
}

.kq-flash__bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.kq-flash__bouton:hover {
    background: rgba(255, 255, 255, .14);
}

.kq-flash__bouton svg {
    display: block;
    width: 16px;
    height: 16px;
}

.kq-flash__bouton .kq-flash__icone-lecture,
.kq-flash.is-pause .kq-flash__bouton .kq-flash__icone-pause {
    display: none;
}

.kq-flash.is-pause .kq-flash__bouton .kq-flash__icone-lecture {
    display: block;
}

.kq-flash__compteur {
    min-width: 2.6em;
    color: rgba(255, 255, 255, .78);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ── Une info à la fois : toutes dans la même case de grille, la hauteur suit la plus longue ── */
.kq-flash--rotation .kq-flash__piste,
.kq-flash--rotation .kq-flash__liste {
    width: 100%;
}

.kq-flash--rotation .kq-flash__liste > li + li {
    margin-top: 6px;
}

.kq-flash--rotation.kq-flash--pret .kq-flash__liste {
    display: grid;
}

.kq-flash--rotation.kq-flash--pret .kq-flash__liste > li {
    grid-area: 1 / 1;
    align-self: center;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}

.kq-flash--rotation.kq-flash--pret .kq-flash__liste > li.is-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .35s ease, transform .35s ease;
}

/* ── Bandeau continu : la liste est doublée par le script, la piste recule de la moitié de sa largeur ── */
.kq-flash--bandeau .kq-flash__fenetre {
    padding-left: 0;
    padding-right: 0;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

.kq-flash--bandeau .kq-flash__piste {
    display: flex;
    flex: none;
    width: max-content;
}

.kq-flash--bandeau .kq-flash__liste {
    display: flex;
    flex: none;
}

.kq-flash--bandeau .kq-flash__liste > li {
    position: relative;
    flex: none;
    padding: 0 28px;
    white-space: nowrap;
}

.kq-flash--bandeau .kq-flash__liste > li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -3px;
    width: 6px;
    height: 6px;
    background: var(--kq-flash-accent);
    transform: translateY(-50%);
}

.kq-flash--bandeau.kq-flash--pret .kq-flash__fenetre {
    overflow: hidden;
}

.kq-flash--bandeau.kq-flash--pret .kq-flash__piste {
    animation: kq-flash-defile var(--kq-flash-duree, 30s) linear infinite;
}

.kq-flash--bandeau:hover .kq-flash__piste,
.kq-flash--bandeau:focus-within .kq-flash__piste,
.kq-flash--bandeau.is-pause .kq-flash__piste {
    animation-play-state: paused;
}

@keyframes kq-flash-defile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Mobile : une info à la fois passe sous l'étiquette ── */
@media (max-width: 639px) {
    .kq-flash--rotation {
        flex-wrap: wrap;
    }

    .kq-flash--rotation .kq-flash__libelle {
        min-height: 36px;
    }

    .kq-flash--rotation .kq-flash__controles {
        margin-left: auto;
    }

    .kq-flash--rotation .kq-flash__fenetre {
        order: 3;
        flex-basis: 100%;
        padding: 8px 16px 12px;
    }

    .kq-flash--bandeau .kq-flash__libelle {
        padding: 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kq-flash__point {
        animation: none;
    }

    .kq-flash--rotation.kq-flash--pret .kq-flash__liste > li {
        transform: none;
        transition: none;
    }
}