*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:"Poppins", sans-serif;
}

:root{
    --handiDebout:#4fb825;
    --fauteuil:#B87D25;
    --diabetique:#a862a0;
    --malentendant:#2578b8;
    --malMarchant:#a1865e;
    --malvoyant:#b825aa;
    --psychique:#8c9987;
    --raideursArticulaires:#6d9ec4;
    --feminin:#869fb1;
    --brules:#8ec07a;
  }

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  
.fond_header{
    width:100vw;
    background: linear-gradient(94deg, #ff65a3 , #0e4daa);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1{
    text-align: center;
    color: white;
    margin-top: 50px;
}

.match{
    background-color: white;
    max-width: 90vw;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0,55);
    margin-top:25px;
}

.match_container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px;
    /* justify-items: center; */
    align-items:center;
}

.partenaire .row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
  
  /* Create four equal columns that sits next to each other */
  
.partenaire .row img {
    margin: auto;
    width: 180px;
  }

.matchs_en_cours{
    border: solid 2px rgb(27, 27, 27);
    border-radius: 5px;
    overflow:hidden;
}

p{
    text-align: center;
}

.joueur_match p:first-child{
    padding:5px;
    border-bottom:1px solid black;
}

.joueur_match p.default{
    background-color: #e084ec;
}

.joueur_match p.Handi-debout{
    background-color: var(--handiDebout);
}

.joueur_match p.Fauteuil{
    background-color: var(--fauteuil);
}

.joueur_match p.Diabétique{
    background-color: var(--diabetique);
}

.joueur_match p.Malentendant{
    background-color: var(--malentendant);
}

.joueur_match p.Mal-marchant{
    background-color: var(--malMarchant);
}

.joueur_match p.Malvoyant{
    background-color: var(--malvoyant);
}

.joueur_match p.Psychique{
    background-color: var(--psychique);
}

.joueur_match p.Raideurs{
    background-color: var(--raideursArticulaires);
}

.joueur_match p.Féminin{
    background-color: var(--feminin);
}

.joueur_match p.Brulés{
    background-color: var(--brules);
}
.joueur_match p{
    padding: 7px;
}
.joueur_match .joueur_info{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px;
}
.joueur_match img {
    width: 35px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    align-items: center;
}

.table{
    border: none;
    padding: 0;
    margin: 0;
}

table{
    width: 100%;
    border-collapse: collapse;
}

th{
    width: 110px;
    border: solid 2px black;
    background-color: #0e4daa;
    padding: 10px;
    color: white;
}

td{
    border: solid 2px black;
    padding: 6px;
}

td.score{
    width: 30px;
    text-align: center;
}

.win{
    color: green;
    font-weight: 700;
}

.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}

/* .match_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 50px;
} */

.match_finale{
    display: grid;
    margin: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.joueurs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.joueur_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.images_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.images_container img {
    width: 100px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.vs_text {
    margin: 0 10px;
    font-size: 24px; /* Adjust as needed */
    font-weight: bold;
}

.banner {
    margin-top: 20px; /* Adjust the spacing as needed */
    width: 400px;
    height: 45px;
    border: 1px solid #8a1;
    font: normal 22px/45px 'Poppins';
    text-align: center;
    color: rgb(31, 31, 31);
    background: #9b2;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,0.15) inset, 0 6px 10px rgba(0,0,0,.15);
}

.banner.Visuel{
    background: var(--visuel); 
    border: 1px solid var(--visuel);
}

.banner.Neurologique{
    background: var(--neurologique); 
    border: 1px solid var(--neurologique);
}

.banner.Mental{
    background: var(--mental); 
    border: 1px solid var(--mental);
}

.banner.Moteur{
    background: var(--moteur); 
    border: 1px solid var(--moteur);
}

.banner.Diabétiques{
    background: var(--diabetique); 
    border: 1px solid var(--diabetique);
}

.banner.Auditif{
    background: var(--auditif); 
    border: 1px solid var(--auditif);
}

.finale{
    margin: auto;
}
/* 9b2 */
/* border : 8a1 */