/* ==========================================================================
   Promotion du moment (inc/promotion.php)
   - Bandeau d'annonce tout en haut du site, au-dessus de l'en-tête
   - Lien « Promotions » de la barre du haut, à gauche de « Actualité »
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandeau d'annonce
   -------------------------------------------------------------------------- */

html body a.sa-bandeau-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 10px 16px;
    background: #262626;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

html body a.sa-bandeau-promo:hover .sa-bandeau-promo__texte,
html body a.sa-bandeau-promo:focus-visible .sa-bandeau-promo__texte {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body a.sa-bandeau-promo:focus-visible {
    outline: 3px solid #FFDB2B;
    outline-offset: -3px;
}

.sa-bandeau-promo__etiquette {
    padding: 3px 8px;
    border-radius: 3px;
    background: #FFDB2B;
    color: #262626;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sa-bandeau-promo__fleche {
    flex: 0 0 auto;
    color: #FFDB2B;
    transition: transform .15s;
}

html body a.sa-bandeau-promo:hover .sa-bandeau-promo__fleche {
    transform: translateX(3px);
}

@media (max-width: 781px) {
    html body a.sa-bandeau-promo {
        flex-wrap: nowrap;
        gap: 8px;
        font-size: 13px;
    }

    .sa-bandeau-promo__etiquette {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Lien « Promotions » (CSS du brief, adapté) : fond anthracite, texte blanc
   gras ; pendant l'offre, pastille rouge et pulsation douce toutes les 3 s,
   arrêtée au survol. Centré verticalement dans la barre (les autres liens
   en occupent toute la hauteur, css/parts/header.css).
   -------------------------------------------------------------------------- */
.rt-top-bar a.menu-promo {
    display: inline-flex;
    align-self: center;
    align-items: center;
    margin-right: 4px;
    padding: 4px 12px;
    border-radius: 4px;
    background: #262626;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.rt-top-bar a.menu-promo:hover,
.rt-top-bar a.menu-promo:focus-visible {
    background: #000000;
    color: #FFFFFF;
}

.rt-top-bar a.menu-promo--en-cours {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 2px #C62828, 0 0 8px 2px rgba(198, 40, 40, 0.55);
    animation: promo-pulse 2s ease-in-out infinite;
}

.rt-top-bar a.menu-promo--en-cours:hover {
    animation: none;
}

/* Sélecteur renforcé : le thème force « .rt-top-bar * { color: #151515 } » */
.rt-top-bar a.menu-promo .menu-promo__pastille {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #C62828;
    color: #FFFFFF;
    font-size: 0.8em;
    font-weight: 700;
}

/* Halo rouge bien visible : contour rouge + lueur permanents, qui
   s'intensifient et s'élargissent toutes les 2 s (respiration douce,
   pas de clignotement). */
@keyframes promo-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px #C62828, 0 0 8px 2px rgba(198, 40, 40, 0.55);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 3px #C62828, 0 0 18px 8px rgba(198, 40, 40, 0.85);
    }
}

/* --------------------------------------------------------------------------
   Lien « Promotions » du pied de page : jaune (les autres liens sont gris)
   -------------------------------------------------------------------------- */
.footer_widgets a.footer-promo-link,
.footer_widgets a.footer-promo-link:visited {
    color: #FFDB2B;
}

.footer_widgets a.footer-promo-link:hover,
.footer_widgets a.footer-promo-link:focus-visible {
    color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    .sa-bandeau-promo__fleche {
        transition: none;
    }

    .rt-top-bar a.menu-promo--en-cours {
        animation: none;
    }
}