.marquee-container {
    overflow: hidden;
    position: relative;
}

.bandeauAnnonce {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    /*padding-left: 100%;*/
    color: #212121;
    font-weight: bold;
    font-size: 16px;
    /* animation paramétrable via variables CSS */
    animation: marquee linear infinite;
    animation-duration: var(--duration, 10s); /* fixé par JS */
}
.marquee-text {
    display: inline-block; /* élément de mesure */
    white-space: nowrap; /* empêche le retour à la ligne */
    color: green;
    font-size: 24px;
}
/* Le défilement se fait de "from" à "to" (valeurs injectées en px) */
@keyframes marquee {
    from {
        transform: translateX(var(--from, 100%));
    }

    to {
        transform: translateX(var(--to, -100%));
    }}

/* Page de connexion : bandeau encadré dans la carte, sous les créneaux de consultation */
#bandeau-marquee-container {
    margin-top: -8px;
    padding: 5px 0;
    background-color: #eef2fe;
    border-left: 4px solid #4368F7;
}

.ecranConnexion .marquee-text {
    color: #23429a;
    font-size: 17px;
    font-weight: 600;
}

/* Sans animation : le message s'affiche en entier, sur plusieurs lignes si besoin */
@media (prefers-reduced-motion: reduce) {
    #bandeau-marquee-container .bandeauAnnonce {
        animation: none;
        display: block;
        white-space: normal;
        padding: 0 12px;
    }

    #bandeau-marquee-container .marquee-text {
        white-space: normal;
    }
}