.main-wrapper-affichage {
    height: 100vh;
    overflow: hidden;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 90vh;
    padding-top: 3vh;

}

.noDiff {
    padding-top: 20vh;
    height: 73vh;
}

.titre-groupe {
    padding: 0;
    margin: 0;
    width: 32%;
    text-align: center;
    background-color: #162fb0;
    border-radius: 20px;
    margin-bottom: 10px;
}

.titre-groupe h1 {
    padding: 8px 20px;
    font-size: 1.5em;
}

.titre-groupe h2 {
    color: #fff;
}

.containerGroupes {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: top;
    background-color: white;
    max-width: 96vw;

}

.tousGroupes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-right: 20px;
    border: 1px solid black;
    font-size: 1em;
    background-color: white;
    padding: 10px;
}

.tousGroupes:last-child {
    margin-right: 0;
}

.groupeGrid .logo img {
    width: 50px;
}

.g1 {
    width: 22vw;
    font-size: 1.4em;
    height: 100%;
    margin-right: 6vw;
}

.g1 img {
    width: 30px;
}

.g2 {
    width: 22vw;
    font-size: 1.4em;
    height: 100%;
    margin-right: 6vw;
}

.g3 {
    width: 25vw;
    font-size: 1.4em;
    height: 80vh;
}

.g4 {
    width: 20vw;
    font-size: 1.2em;
}

.g6 {
    width: 30vw;
    font-size: 0.6em;
}

.headerGroupes {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    background-color: #2D427B;
    margin-top: 0;
    color: white;

}

.equipesLogo {
    margin-bottom: 10px;
    font-weight: bold;
}

.logo img {
    width: 30px;
    height: auto;
    margin-right: 15px;
}

.logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 15px;
}

.mini img {
    width: 30px;
    margin-right: 15px;
}

.nomGroupe {
    color: white;
    font-size: 1.2em;
}

.groupeGrid {
    display: grid;
    font-size: 2.3em;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    grid-column-gap: 50px;
    grid-row-gap: 8px;
    background-color: white;
    padding: 10px;
    border: 1px solid black;
}

.vide {
    padding: 0;
    border: 0;
}

.matchGrid {
    display: grid;
    font-size: 1.5em;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    grid-column-gap: 50px;
    grid-row-gap: 8px;
    background-color: white;
    padding: 10px;
    border: 1px solid black;
    margin-top: 200px;

}

.pouleGrid {
    display: grid;
    font-size: 1em;
    text-transform: uppercase;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    padding-top: 5px;
    background-color: white;
    width: 35%;

}

.deuxCol {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5px;

}

.troisCol {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0;
    grid-column-gap: 20px;
}



.pouleGridTF {
    display: grid;
    font-size: 1em;
    text-transform: uppercase;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    padding-top: 5px;
    background-color: white;
    width: 30%;
    /*  overflow-x: auto; ajoute un défilement horizontal si nécessaire */


}

.quatreColTF {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* crée 4 colonnes de taille égale */
    gap: 5px;
    /* ajoute un peu d'espace entre les colonnes, ajustez selon vos besoins */
    width: 90%;
    /* Prend 80% de la largeur de l'écran */
    margin-top: 15px;
    margin-bottom: 15px;
}



.matchTitre {
    padding: 10px 30px;
    margin-top: 0;
    background-color: #2D427B;
    color: white;
    text-align: center;
    border-radius: 15px;
}

.matchTitre h1 {
    margin: 0;
    padding: 0;
    font-size: 2.5rem;

}

.matchTitre h2 {
    font-size: 2rem;
}


.equipePouleMatch {
    display: flex;
    align-items: center;
    width: 97%;
    text-shadow: 1px 1px 1px black;
    background-color: #2d427b;
    margin-bottom: 4px;
    padding: 4px;
    color: white;
}

.tableMatch {
    border-collapse: separate;
    border-spacing: 5px;
    background-color: white;
}

.matchRow {
    height: 40px;
}

.matchCell {
    background-color: #2d427b;
    color: white;
    width: 440px;
}

.tabFlex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
    margin: 0;
    padding: 0 10px;
}

.equipeMatch {
    text-transform: uppercase;
    color: white;
    font-size: medium;
    font-weight: bold;
    letter-spacing: 2px;
}

.tiret {
    display: inline-block;
    font-weight: bold;
    font-size: large;
    margin: 0 20px;
    padding: 0;

}

.tableTousMatchs {
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    font-size: medium;
    background-color: #2d427b;
}

.feminin {
    background-color: #2d427b;
}

.enMatch {
    background-color: rgb(92, 92, 92);
    color: rgb(214, 203, 203);
}

.flash-animation,
.flash-animation .tabFlex {
    animation: flash 1s ease-in-out;
}

@keyframes flash {
    0% {
        background-color: transparent;

    }

    50% {
        background-color: rgb(230, 51, 83);

    }

    100% {
        background-color: transparent;
    }
}




/* STYLE TABLEAU FINALE */



.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Défaut pour toutes les colonnes */

}


/* Matches des huitièmes de finale */
.round-1 {
    width: 450px;
    /* Largeur pour les huitièmes de finale */
    height: auto;
    background: #2d427b;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
    /* Espacement entre les matchs */
    margin-left: 25px;
    margin-right: auto;
}





.team {
    height: 20px;
    display: flex;
    /* Utilisez flexbox pour centrer le contenu verticalement */
    align-items: center;
    /* Centrer verticalement les éléments enfants dans la team */
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.team span {
    position: relative;
    top: 2.5px;
    /* Déplace le texte de 5px vers le haut */
}

/* Suppression de la bordure pour le dernier élément team */
.team:last-child {
    border-bottom: none;
}



img.logo {
    width: 25px;
    /* La largeur de votre logo */
    height: 25px;
    /* La hauteur de votre logo */
    margin-right: 10px;
    /* Ajouter un peu d'espace entre le logo et le texte */
}

.match-container {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    width: 90%;
}




.h7 {
    color: #2d427b;
    font-size: 27px;


}

.h8 {
    color: #2d427b;
    font-size: 27px;
    position: relative;
    top: 100px;

}



.h84 {
    color: #2d427b;
    font-size: 27px;
    position: relative;


}


.match {
    position: relative;
    /* Pour la position absolue des pseudo-éléments */
}

.round-2 {

    font-weight: bold;
    margin-left: 50px;
    margin-right: auto;
}

/* Centrage des matches vides dans la deuxième colonne */
.column.round-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centrer horizontalement les matches dans la colonne */
    justify-content: center;
    /* Centrer verticalement si vous voulez aussi centrer verticalement */
}

/* Matches des colonnes suivantes */
.column:not(.round-1) .match.empty {
    width: 250px;
    /* Largeur pour les matchs vides dans les autres colonnes */
    background-color: transparent;
    border: 25px solid;
    border-color: #2d427b;
    /* Pour voir les contours des matchs vides */
    margin-bottom: 85px;
    /* Espacement entre les matchs */
    margin-top: 50px;
}

.column:not(.round-1) .match.emptyF {
    width: 250px;
    /* Largeur pour les matchs vides dans les autres colonnes */
    background-color: transparent;
    border: 25px solid;
    border-color: #2d427b;
    /* Pour voir les contours des matchs vides */
    margin-bottom: 85px;
    /* Espacement entre les matchs */
    margin-top: 50px;
}

/* Ligne de séparation pour les matchs vides */
.match.emptyF:after {
    content: '';
    /* La pseudo-élément doit avoir un contenu, même s'il est vide */
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 1px solid #ddd;
    /* La ligne de séparation */
    z-index: 1;
}

/* Ligne de séparation pour les matchs vides */
.match.empty:after {
    content: '';
    /* La pseudo-élément doit avoir un contenu, même s'il est vide */
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 1px solid #ddd;
    /* La ligne de séparation */
    z-index: 1;
}

/* Style spécifique pour la colonne des quarts de finale */
.round-3 {

    font-weight: bold;
    margin-left: 25px;
    margin-right: auto;
}

.column.round-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centrer horizontalement les matches dans la colonne */
    justify-content: space-around;
    /* Répartir l'espace de manière égale */
}

.column.round-3 .match.empty {
    width: 250px;
    /* Largeur pour les matchs vides dans les autres colonnes */
    background: transparent;
    border: 25px solid;
    /* Pour voir les contours des matchs vides */
    border-color: #2d427b;
    margin-bottom: 170px;
    /* Espacement entre les matchs */
    margin-top: 130px;
}


.column.round-3 .match.emptyF {
    width: 250px;
    /* Largeur pour les matchs vides dans les autres colonnes */
    background: transparent;
    border: 25px solid;
    /* Pour voir les contours des matchs vides */
    border-color: #2d427b;
    margin-bottom: 170px;
    /* Espacement entre les matchs */
    margin-top: 130px;
}

/* Style spécifique pour la colonne des quarts de finale */
.round-4 {

    font-weight: bold;
    margin-left: 100px;
    margin-right: auto;
}

.column.round-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centrer horizontalement les matches dans la colonne */
    justify-content: space-around;
    /* Répartir l'espace de manière égale */
}

.column.round-4 .match.emptyF4 {
    width: 250px;
    /* Largeur pour les matchs vides dans les autres colonnes */
    background: transparent;
    border: 25px solid;
    /* Pour voir les contours des matchs vides */
    border-color: #2d427b;
    margin-bottom: 90px;
    /* Espacement entre les matchs */
    margin-top: 40px;
}

/* ============================================================
   Vue « un groupe » (phase matchs) — style verre / TV
   Surcharge uniquement l'apparence (couleurs, bords, rayons).
   Ne modifie pas la structure ni les autres modes.
   ============================================================ */
.matchTitre {
    background: linear-gradient(90deg, #2d427b, #4a63b4);
    border-radius: 14px;
    position: relative;
}
.matchTitre::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 6px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f2b705, transparent);
}

/* Colonne gauche : composition de la poule */
.pouleGrid {
    background: transparent;
    grid-row-gap: 9px;
}
.equipePouleMatch {
    background: rgba(11, 19, 48, .55);
    border: 1px solid rgba(255, 255, 255, .15);
    border-left: 5px solid #f2b705;
    border-radius: 12px;
    color: #fff;
    text-shadow: none;
    padding: 8px 14px;
    gap: 12px;
    backdrop-filter: blur(5px);
    margin-bottom: 0;
}
.equipePouleMatch img {
    border-radius: 6px;
}
.equipePouleMatch.enMatch {
    background: rgba(70, 70, 70, .6);
    color: #d6cbcb;
}

/* Colonne droite : rencontres */
.tableMatch {
    background: transparent;
}
.matchCell {
    background: rgba(11, 19, 48, .55);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    color: #fff;
    backdrop-filter: blur(5px);
}
.tableMatch .tiret {
    color: #ffde8a;
}

/* Étiquettes division / niveau / tour précédent */
.aff-tag {
    display: inline-block;
    font-weight: 700;
    font-size: .58em;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: none;
}
.aff-tag--div {
    color: #ffde8a;
    border: 1px solid rgba(242, 183, 5, .55);
}
.aff-tag--niv {
    color: #cdd8f5;
    border: 1px solid rgba(205, 216, 245, .45);
}

/* Double flèche « inversion » entre les équipes (mémoire d'une inversion) */
.aff-inversion {
    color: #f2b705;
    font-weight: 700;
    font-size: 1.15em;
    margin-left: 6px;
    vertical-align: middle;
}