/*
 * Bandeau défilant. Le débordement est masqué par le conteneur, la piste est
 * translatée par le contrôleur. `flex: none` sur les éléments empêche flexbox
 * de les comprimer pour tenir dans la fenêtre — sans ça, la boucle se tasse.
 */

.bandeau {
    position: relative;
    overflow: clip;
    padding-block: clamp(1.5rem, 3vw, 2.75rem);
    border-block: 1px solid var(--trait);
}

.bandeau__piste {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    inline-size: max-content;
    will-change: transform;
}

.bandeau__element {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--police-titre);
    font-size: clamp(1.35rem, 0.9rem + 2vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
    color: var(--texte);
}

/*
 * Un élément sur deux en contour : la respiration du bandeau. Le trait est
 * tiré du texte et non de --trait-fort : à 26 % d'encre sur blanc, un contour
 * d'un pixel disparaissait.
 */
.bandeau__element:nth-child(even) {
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--texte) 70%, transparent);
}

.bandeau__puce {
    inline-size: 0.4em;
    block-size: 0.4em;
    border-radius: 50%;
    background: var(--flux);
    flex: none;
}

/* — Variante « logos » : plus petite, alignée, sourde — */
.bandeau--logos .bandeau__element {
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--texte-doux);
    letter-spacing: -0.01em;
}

.bandeau--logos .bandeau__element:nth-child(even) {
    color: var(--texte-doux);
    -webkit-text-stroke: 0;
}

.bandeau--sans-bord {
    border: 0;
}

/*
 * Variante « console » : une bande nuit tramée sous le héros clair, bordée de
 * deux filets néon, qu'une lueur balaie en continu. Les mots pleins sont
 * blancs, les mots en contour cyan, et les puces deviennent les nœuds carrés
 * du circuit.
 */
.bandeau--console {
    border: 0;
    box-shadow:
        inset 0 1px 0 rgb(46 163 242 / 0.55),
        inset 0 -1px 0 rgb(154 92 255 / 0.55),
        0 0 40px -6px rgb(46 163 242 / 0.35);
}

.bandeau--console::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 28%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(46 163 242 / 0.16), transparent);
    animation: balayage 7s linear infinite;
}

/* Plus discrète que le bandeau standard : environ moitié moins haute. */
.bandeau--console {
    padding-block: clamp(0.85rem, 1.6vw, 1.4rem);
}

.bandeau--console .bandeau__piste {
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.bandeau--console .bandeau__element {
    font-size: clamp(1.05rem, 0.8rem + 1vw, 1.9rem);
    color: #fff;
}

.bandeau--console .bandeau__element:nth-child(even) {
    /* Les textes en bleu, en Poppins (rédaction, 13/10). */
    font-family: var(--police-texte);
    color: transparent;
    -webkit-text-stroke: 1.25px var(--cyan);
    filter: drop-shadow(0 0 10px rgb(46 163 242 / 0.55));
}

.bandeau--console .bandeau__puce {
    border-radius: 0;
    inline-size: 0.28em;
    block-size: 0.28em;
    background: var(--cyan);
    box-shadow: 0 0 0 0.18em rgb(46 163 242 / 0.2), 0 0 14px rgb(46 163 242 / 0.9);
}

@keyframes balayage {
    from { transform: translateX(-100%); }
    to { transform: translateX(460%); }
}