/**
 * BIHA Matches Banner - styles communs (structure).
 *
 * Cette feuille pose la structure partagee par les deux styles :
 * wrapper, fleches de navigation, viewport, piste, colonnes de jour,
 * indicateur de chargement. Les couleurs et l'habillage specifiques
 * sont dans banner-biha.css et banner-nhl.css.
 *
 * Les fleches sont en position:absolute DANS le bandeau : elles ne
 * masquent jamais le header ni le contenu de la page.
 */

.biha-mb-banner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
    contain: layout style;
}

/* Viewport : zone visible entre les deux fleches. */
.biha-mb-viewport {
    position: relative;
    margin: 0 32px;
    height: 100%;
    box-sizing: border-box;
}

/* Titre de la semaine. */
.biha-mb-week-title {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-sizing: border-box;
}

/* Piste horizontale defilante : colonnes de jour alignees. */
.biha-mb-track {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    box-sizing: border-box;
}

.biha-mb-track::-webkit-scrollbar {
    height: 4px;
}

.biha-mb-track::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 2px;
}

/* Colonne d'un jour : etiquette de date + cartes de ce jour. */
.biha-mb-day {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.biha-mb-day-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.biha-mb-day-name {
    font-weight: bold;
    line-height: 1.1;
}

.biha-mb-day-date {
    line-height: 1.1;
}

.biha-mb-day-matches {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Carte de match. */
.biha-mb-card {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Ligne d'une equipe dans la carte. */
.biha-mb-team {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.biha-mb-logo {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.biha-mb-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.biha-mb-logo-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
}

/* Indicateur "ouvrir dans une fenetre". */
.biha-mb-open-indicator {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 11px;
    font-weight: bold;
    opacity: 0.7;
}

/* Badges de statut. */
.biha-mb-badge {
    font-weight: bold;
    text-transform: uppercase;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Categories. */
.biha-mb-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.biha-mb-category {
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Resultat W / D / L pour les U10/U12. */
.biha-mb-wdl {
    font-weight: bold;
}

/* ---- Contexte playoff / serie ---------------------------------------- */

/* Bandeau de serie affiche en haut de la carte (phase, Best of, score). */
.biha-mb-serie {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biha-mb-serie-icon {
    flex: 0 0 auto;
    line-height: 1;
}

.biha-mb-serie-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Marqueur "qualifie" a cote du nom de l'equipe. */
.biha-mb-qualified {
    font-weight: bold;
}

/* Fleches de navigation : contenues dans le bandeau (absolute). */
.biha-mb-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    user-select: none;
    transition: background 0.2s ease;
}

.biha-mb-nav-left {
    left: 0;
}

.biha-mb-nav-right {
    right: 0;
}

/* Indicateur de chargement. */
.biha-mb-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    z-index: 30;
}

.biha-mb-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    animation: biha-mb-spin 0.8s linear infinite;
}

@keyframes biha-mb-spin {
    to { transform: rotate(360deg); }
}

.biha-mb-is-loading .biha-mb-track {
    opacity: 0.5;
}

/* Etat "fin de donnees" : petit rebond sur la fleche concernee. */
.biha-mb-bump-left .biha-mb-nav-left {
    animation: biha-mb-bump-l 0.4s ease;
}

.biha-mb-bump-right .biha-mb-nav-right {
    animation: biha-mb-bump-r 0.4s ease;
}

@keyframes biha-mb-bump-l {
    50% { transform: translateX(-5px); }
}

@keyframes biha-mb-bump-r {
    50% { transform: translateX(5px); }
}

/* Message semaine vide (cas de securite). */
.biha-mb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-style: italic;
}

/* Bandeau intersaison (aucun match en base). */
.biha-mb-intersaison-banner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.biha-mb-intersaison-label {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Flash visuel quand on franchit une intersaison. */
.biha-mb-crossed-intersaison .biha-mb-week-title {
    animation: biha-mb-flash 1.5s ease;
}

@keyframes biha-mb-flash {
    0%, 100% { opacity: 1; }
    25%      { opacity: 0.3; }
}