/* Styles de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-width: 100%;
    font-family: sans-serif, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue";
    
}

.modal {
    display: none; /* Masqué par défaut */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Arrière-plan sombre */
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 90%;
    height: 80%;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover, .close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.menulive {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr 3fr; /* Crée 4 colonnes avec des tailles égales */
    gap: 10px; /* Espacement entre les éléments de la grille */
    padding: 0px;
    margin: 0;
    height: auto; 
    width: 100%;
}

/* Style pour la barre de navigation des rounds */
#rounds-nav {
    display: flex; /* Utilise Flexbox pour aligner les éléments fils */
    flex-wrap:wrap;
    /*overflow-x: auto; /* Permet le défilement horizontal si les éléments débordent */
    justify-content:center;
    /*gap:10px;*/
    white-space: nowrap; /* Empêche les entrées de fichier de passer à la ligne suivante */
    padding: 10px;
    border-bottom: 1px solid #ddd;
    /*margin-bottom: 20px; /* Espacement entre la navbar des fichiers et le contenu suivant */
}

/* Boutons de la navigation */
.round-entry {
     cursor: pointer;
    /* padding: 2vw 2vw;*/ /* Ajustez le padding selon vos préférences */
    margin-right: 10px; /* Espacement entre chaque entrée de fichier */
    /* background-color: #e2e2e2; /* Couleur de fond pour distinguer les entrées */
    color: black;
    border-radius: 5px; /* Bords arrondis pour les entrées */
    height: 5vw;
    min-height: 40px;
    display: flex;
    vertical-align: center;
    /* border: 2px solid gray; */
    display: inline-flex;
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.51426px;
  line-height: 31.5px;
  min-width: 64px;
  outline: rgb(255, 255, 255) none 0px;
  padding: 4px 16px ;
  position: relative;
  text-decoration: none solid rgb(255, 255, 255);
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  vertical-align: middle;
  width: auto;
  height: 40px;
    
}

.round-entry:last-child {
    margin-right: 0; /* Supprime la marge droite pour le dernier élément pour un alignement propre */
}

.round-entry:hover {
    background-color: #d1d1d1; /* Changement de couleur au survol */
}

.round-entry.selected {
    background-color: darkslateblue; /* Couleur de fond pour l'élément sélectionné */
    color: rgb(255, 255, 255);
}


#files-nav {
    display: flex; /* Utilise Flexbox pour aligner les éléments fils */
    flex-wrap:wrap;
    /*overflow-x: auto; /* Permet le défilement horizontal si les éléments débordent */
    justify-content:center;
    /*gap:10px;*/
    white-space: nowrap; /* Empêche les entrées de fichier de passer à la ligne suivante */
    padding-top: 20px;
    border-bottom: 1px solid #ddd;
    /*margin-bottom: 20px; /* Espacement entre la navbar des fichiers et le contenu suivant */
}

.file-entry {
    cursor: pointer;
    /* padding: 2vw 2vw;*/ /* Ajustez le padding selon vos préférences */
    margin-right: 10px; /* Espacement entre chaque entrée de fichier */
    /* background-color: #e2e2e2; /* Couleur de fond pour distinguer les entrées */
    color: black;
    border-radius: 5px; /* Bords arrondis pour les entrées */
    height: 5vw;
    min-height: 40px;
    display: flex;
    vertical-align: center;
    /* border: 2px solid gray; */
    display: inline-flex;
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.51426px;
  line-height: 31.5px;
  min-width: 64px;
  outline: rgb(255, 255, 255) none 0px;
  padding: 4px 16px ;
  position: relative;
  text-decoration: none solid rgb(255, 255, 255);
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  vertical-align: middle;
  width: auto;
  height: 40px;
}

.file-entry:last-child {
    margin-right: 0; /* Supprime la marge droite pour le dernier élément pour un alignement propre */
}

.file-entry:hover {
    background-color: #d1d1d1; /* Changement de couleur au survol */
}

.file-entry.selected {
    background-color: darkslateblue; /* Couleur de fond pour l'élément sélectionné */
    color: rgb(255, 255, 255);
}

.heat-progression {
    border: 2px solid black; /* Encadrer avec une bordure noire */
    padding: 3px 3px; /* Ajouter un peu de padding pour l'espacement interne */
    margin-right: 8px; /* Espacement à droite entre le score et le nom */
    color: #808080; /* Police légèrement grise */
    font-weight: normal; /* Police normale */
    border-radius: 5px; /* Coins légèrement arrondis */   
}

.competitor-photo {
    width: 50px; /* Diamètre de l'image */
    height: 50px; /* Diamètre de l'image */
    border-radius: 50%; /* Rend l'image circulaire */
    object-fit: cover;
    z-index: 1; /* Assure que l'image est au-dessus du cercle de couleur */
    position: relative;
    
}
.competitor-flag {
    width: 20px; /* Diamètre de l'image */
    height: 20px; /* Diamètre de l'image */
    margin-left: 8px;
    
    
}
.nationality {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr ; /* Espace alloué pour chaque type de détail, ajuster selon besoin */
    gap: 5px;
    margin-bottom: 10px; /* Espacement entre les compétiteurs */
    position: relative;
    display: flex;
    align-items: left;
    
}
.color-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px; /* Doit correspondre au diamètre de l'image */
    height: 50px; /* Doit correspondre au diamètre de l'image */
    border-radius: 50%; /* Rend le cercle parfaitement rond */
    z-index: 2; /* Positionne le cercle derrière l'image */
    display: inline-block;
    /*border-radius: 100%;*/
    border: 2px solid black;
}

/* Responsive design pour les mobiles */

.position {
    width: 20px;
    height: 20px;
    font-size: 13px;
    text-align: center;
    border: 2px solid;
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    vertical-align: top;
    /* padding: 2px; */
    color: black;
    border-radius: 50%;
    background-color: slategray;
    color: white;
}


/* Conteneur pour les matches */
#matches-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content:space-evenly;
    padding: 5px;
    
}


/* Div de chaque match */
.match {
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(33.33% - 20px); /* 2 matches par ligne, ajuster le gap si nécessaire */
    padding: 10px;
    margin-bottom: 5px; /* Espacement entre les matches */
    background-color: white;
    -webkit-box-shadow: 5px 5px 7px -2px rgba(0,0,0,0.4); 
box-shadow: 5px 5px 7px -2px rgba(0,0,0,0.4);
        margin-left: 3px;
    
}


/* Grille pour les détails des compétiteurs */
.heat-competitor {
    display: grid;
    grid-template-columns: 1fr 6fr 1fr ; /* Espace alloué pour chaque type de détail, ajuster selon besoin */
    gap: 5px;
    margin-bottom: 1px; /* Espacement entre les compétiteurs */
    position: relative;
    /*display: flex;*/
    align-items:normal;
    clear: both;
    
    
}

/* Div pour les détails de chaque compétiteur */
.competitor-detail {
    display: flex;
    /*align-items: center;*/
    padding: 0px;
    border-radius: 4px;
    /*background-color: #ddd;*/
    /*text-align: left; /* Aligner le texte au centre de chaque détail */
    font-family:  -apple-system,BlinkMacSystemFont,"Systemic",sans-serif;*/
    
}

/* Style spécifique pour chaque type de détail pour une meilleure visibilité */
.detail-name { overflow-x: hidden; font-size: 15px; font-weight: bold; text-transform: capitalize;}
.detail-country { font-size: 12px; }
.detail-score {text-align: right; font-size: 14px; font-weight: bold; }
.detail-rank {font-size: 0.8rem; font-size: 12px; color:gray}

/* Titre pour chaque Heat */
.heat-title {
    font-size: 1.1rem;
    //font-weight: bold;
    margin-bottom: 5px;
    float: left;
      
    font-weight: bold;
}
.heat-details-title {
    font-size: 1.1rem;
    //font-weight: bold;
    margin-bottom: 5px;
    float: right;
}
/*.competitor-color-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}*/

/* Classes spécifiques pour la couleur de fond de l'indicateur de couleur */
.colorx-1 { border-color: #F20606; }
.color-2 { border-color: #FFEC33; }
.color-3 { border-color: #063FF2; }
.color-4 { border-color: #FFFFFF; }
.color-5 { border-color: darkgrey; }


/* Ajoutez plus de classes pour d'autres couleurs si nécessaire */

@media (max-width: 1200px) {
    #matches-container {
        
        
    }

    .match {
        width: calc(50% - 20px); /* 1 match par ligne sur mobile */
    }
    
    .competitor {
        /*grid-template-columns: repeat(4, 1fr); /* Colonne égales pour la vue mobile */
    }
}

@media (max-width: 900px) {
    #matches-container {
       
        
    }

    .match {
        width: 200%; /* 1 match par ligne sur mobile */
    }
    
    .heat-competitor {
        display: grid;
    grid-template-columns: 1.3fr 5fr 1.3fr;
        /*grid-template-columns: repeat(4, 1fr); /* Colonne égales pour la vue mobile */
    }
}