.match-box {
    background-color: #3d8ca6;
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
}

[data-bs-theme="dark"] .match-box{
    background-color: #25140a;
}

.match-box .vs {
    font-weight: bold;
}

/* Utilisation du CSS fourni par l'utilisateur, mais ajout des styles d'interaction */
.match-box {
    cursor: pointer;
    transition: background-color 0.2s;
    /* Note: background-color: #3d8ca6; color: white; est déjà dans votre match.css */
}
.match-box:hover {
    /* Légèrement plus foncé au survol pour le feedback utilisateur */
    background-color: #317288 !important; 
}

[data-bs-theme="dark"] .match-box:hover{
    background-color: #25140a;
}

/* Assurer que les liens d'équipe héritent de la couleur blanche et sont cliquables */
.match-box a.team-link {
    color: inherit !important;
    text-decoration: none;
}

.match-box a.team-link:hover {
    color: #D0662A;
    text-decoration: underline;
}

/* Style du bouton "Afficher" pour correspondre à votre .filtre-btn */
.btn-filtre-custom {
    background-color: #D0662A;
    border-color: black;
    color: white;
}
.btn-filtre-custom:hover {
    background-color: #e67834;
    border-color: black;
    color:white;
}

/* Styles spécifiques pour le centrage du score */
.match-team-section {
    /* Permet au conteneur de l'équipe de prendre tout l'espace disponible */
    flex: 1 1 0%; 
    min-width: 0;
}
.match-score-section {
    /* Taille fixe pour le score afin qu'il reste centré */
    width: 120px; 
    text-align: center;
}

.tete-match {
    display: flex;
}

.match-info{
    display: flex;
}

@media (max-width: 800px) {
    .match-team-section a{
        display: none;
    }

    .tete-match {
        display: block;
    }

    .match-box{
        display: block;
    }

    .match-info{
        display: contents;
    }
  
  
    .match-info-badge{
        font-size: 0.1rem;
    }

    .score-display {
        font-size: 1.5rem;
    }

    .h3, h3 {
        font-size: 1.1rem !important;
    }

    .team-logo {
        width: 70px;
        height: 70px;
    }

}