/* ==========================================================
   Retrait-Litigieux.fr
   Bandeau actualités V1
   ========================================================== */

.rl-ticker {
    position: relative;
    z-index: 20;

    width: 100%;

    overflow: hidden;

    background: #f6f9fa;

    border-top: 1px solid #e1e8eb;
    border-bottom: 1px solid #d8e2e6;

    color: #293b43;

    font-size: 13px;
    line-height: 1.25;
}

.rl-ticker__viewport {
    width: 100%;
    overflow: hidden;
}

.rl-ticker__track {
    display: flex;
    align-items: center;

    width: max-content;

    min-height: 38px;

    animation:
        rl-ticker-scroll
        52s
        linear
        infinite;

    will-change: transform;
}

.rl-ticker__group {
    display: flex;
    align-items: center;
    flex: none;

    white-space: nowrap;

    padding-right: 44px;
}

.rl-ticker__item {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 38px;

    padding:
        0
        20px;

    border-right:
        1px solid
        rgba(41, 59, 67, 0.12);
}

.rl-ticker__label {
    display: inline-flex;
    align-items: center;

    padding:
        3px
        7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}

.rl-ticker__item--decision
.rl-ticker__label {
    background: #e5f0f5;
    color: #315c70;
}

.rl-ticker__item--actor
.rl-ticker__label {
    background: #f2ecdd;
    color: #725f31;
}

.rl-ticker__item--facebook
.rl-ticker__label {
    background: #e9edf7;
    color: #425a8a;
}

.rl-ticker__date {
    color: #6c7d84;

    font-size: 11px;

    font-weight: 600;
}

.rl-ticker__link,
.rl-ticker__text {
    color: #293b43;

    font-weight: 500;

    text-decoration: none;
}

.rl-ticker__link:hover,
.rl-ticker__link:focus {
    color: #0d5a72;

    text-decoration: underline;
}

.rl-ticker:hover
.rl-ticker__track,
.rl-ticker:focus-within
.rl-ticker__track {
    animation-play-state: paused;
}


@keyframes rl-ticker-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .rl-ticker {
        font-size: 12px;
    }

    .rl-ticker__track,
    .rl-ticker__item {
        min-height: 36px;
    }

    .rl-ticker__item {
        gap: 6px;

        padding:
            0
            14px;
    }

    .rl-ticker__label {
        font-size: 9px;
    }

    .rl-ticker__date {
        font-size: 10px;
    }
}


/* ==========================================================
   ACCESSIBILITE — MOUVEMENT REDUIT
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .rl-ticker__viewport {
        overflow-x: auto;
    }

    .rl-ticker__track {
        animation: none;

        transform: none;

        will-change: auto;
    }

    .rl-ticker__group--duplicate {
        display: none;
    }
}

/* RL-TICKER-MOBILE-V3-START */

@media (max-width: 700px) {

    /*
     * Empêche Safari iOS de grossir certains textes
     * différemment des autres.
     */

    .rl-ticker {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;

        min-height: 38px;
    }

    .rl-ticker__viewport,
    .rl-ticker__track,
    .rl-ticker__group,
    .rl-ticker__item {
        min-height: 38px;
    }

    /*
     * Défilement mobile volontairement calme.
     */

    .rl-ticker__track {
        animation-duration: 68s;
    }

    .rl-ticker__group {
        gap: 28px;
    }

    .rl-ticker__item {
        gap: 8px;

        font-family: inherit;
        font-size: 13px !important;
        line-height: 1.15;
    }

    /*
     * Une seule taille de caractères.
     *
     * Les différences visuelles viennent uniquement
     * de la graisse et de la pastille.
     */

    .rl-ticker__label,
    .rl-ticker__date,
    .rl-ticker__link,
    .rl-ticker__text {
        font-family: inherit;
        font-size: 13px !important;
        line-height: 1.15;

        white-space: nowrap;

        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .rl-ticker__label {
        padding: 4px 8px;

        font-weight: 700;

        letter-spacing: .03em;
    }

    .rl-ticker__date {
        font-weight: 500;
    }

    .rl-ticker__link,
    .rl-ticker__text {
        font-weight: 600;
    }
}

/* RL-TICKER-MOBILE-V3-END */
