/* --- BANDEAU DÉFILEMENT (Combats) --- */
/* --- BANDEAU STYLE "CHAMPIONSHIP GOLD" --- */
.bandeau-combat {
    /* Fond Or avec un dégradé subtil pour l'effet métallique */
   /*background: linear-gradient(to bottom, #fddb66 0%, #edc13b 50%, #dca318 100%);*/
   /* background:linear-gradient(to bottom, #EAEAEA 0%, #ccc 75%, #EAEAEA 100%);*/
   background:#ebebeb;
    /* Bordures noires pour bien encadrer le bandeau */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    
    /* Petite ombre pour le faire ressortir du fond gris */
    box-shadow: 0 0 10px rgba(237, 193, 59, 0.2);

    /* Texte de base */
    color: #000;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem; /* Un peu plus gros pour la lisibilité sur fond clair */
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}

/* Le conteneur du slide */
.bandeau-combat .carousel-item {
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    padding-left: 10px;
}

/* --- LES LIENS (Adaptés pour le fond Or) --- */
.ticker-link {
    color: #111 !important; /* NOIR FORCE (Encre) */
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500; /* Gras pour bien contraster avec le jaune */
    letter-spacing: 0.7px;
    display: inline-block;
    transition: all 0.2s ease;
}

/* Au survol, le texte devient BLANC avec une ombre noire */
.ticker-link:hover {
    color: #fc7d01 !important; 
    text-decoration: none;
}

/* Le séparateur (Barre verticale) */
.ticker-separator {
    color: #000;
    margin: 0 12px;
    font-size: 0.8rem;
    opacity: 0.4; /* Noir un peu transparent pour être discret */
    font-weight: normal;
}
/* --- CAROUSEL VERTICAL (Hack Bootstrap 5) --- */

/* 1. On s'assure que le conteneur a bien une hauteur fixe (déjà fait, mais on sécurise) */
.bandeau-combat.vertical .carousel-inner {
    height: 100%; /* Occupe toute la hauteur des 42px */
}

/* 2. On change l'axe de transition de Horizontal à Vertical */
.bandeau-combat.vertical .carousel-item {
    transition: transform 0.6s ease-in-out; /* Vitesse du glissement */
    border: none; /* Sécurité */
}

/* 3. On annule le comportement horizontal par défaut */
.bandeau-combat.vertical .carousel-item-next,
.bandeau-combat.vertical .carousel-item-prev,
.bandeau-combat.vertical .carousel-item.active {
    display: block;
}

.bandeau-combat.vertical .carousel-item-next,
.bandeau-combat.vertical .carousel-item-prev {
    position: absolute;
    top: 0;
    left: 0; /* Force l'alignement à gauche */
    width: 100%;
}

/* --- ANIMATION : DU BAS VERS LE HAUT (Standard News) --- */

/* Position de départ (l'élément qui arrive attend en BAS) */
.bandeau-combat.vertical .carousel-item-next:not(.carousel-item-start) {
    transform: translateY(100%); 
}

/* Position de fin (l'élément qui part monte vers le HAUT) */
.bandeau-combat.vertical .active.carousel-item-start {
    transform: translateY(-100%);
}

/* L'élément actif reste au milieu */
.bandeau-combat.vertical .carousel-item-next.carousel-item-start,
.bandeau-combat.vertical .active {
    transform: translateY(0);
}
/* (Optionnel) Si jamais on veux de HAUT vers BAS, on inverse juste les 100% et -100% ci-dessus */