:root {
  /* palette de couleur */
  --main-black: #171717;
  --main-white: #ffffff;
  --main-blue: #185abd;
  --main-orange: #f89a0e;
  --main-vert:#00b04693;
  --main-gris:#dfdfdf;
}

body { 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  position: relative; /* Ajouté */
  font-family: 'Open Sans', sans-serif;
  font-size: small; 
} 

body::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: url('images/joueur.png') no-repeat center center fixed; 
  background-size: cover; 
  z-index: -1; /* Place le pseudo-élément derrière le contenu de la page */
}

header, footer {
  color: var(--main-white);
  width: 100%;
  text-align: center;
  font-size: medium;
}

header {
  background-color: var(--main-black);
}

header nav ul, .navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

header nav ul li {
  display: inline-block;
  margin: 0 10px;
}

header nav ul li a {
  text-transform: uppercase;
  color: var(--main-white);
  text-decoration: none;
  display: block;
  height: 100%;
  padding: 10px;
}

main {
  display: flex;
  width: 99%;
  filter: none;
}

.navigation {
  min-width: 160px;
  padding: 10px;
}

.nav-block {
  margin-bottom: 20px;
  border-radius: 10px 10px 0 0; /* Coins arrondis en haut */
  overflow: hidden;
  background-color: var(--main-white);
}

.nav-block h4 {
  background-color: var(--main-blue);
  color: white;
  padding: 10px;
  margin: 0;
  text-align: center;
}

.nav-block ul {
  padding: 10px;
  margin: 0;
  list-style-type: none;
  text-align: center;
}

.nav-block p {
  text-align: center;
}

.nav-block ul li a {
  color: var(--main-black); /* Couleur des liens */
  text-decoration: none;
}

.nav-block ul li a:hover {
  color: var(--main-orange);
}

.nav-block ul li a.active { 
  display: block;
  background-color: var(--main-orange); 
  color: var(--main-white); /* Pour que le texte reste lisible sur fond gris */ 
}

.content {
  width: 100%;
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content:space-evenly;
}

.title {
  width: 100%;
  margin: 10px;
  padding: 0px;
  text-align: center;
  background-color: var(--main-blue);
  color: var(--main-white);
  opacity: 0.9;
}

#mySelect {
  width: 200px; /* Largeur de la liste déroulante */
  padding: 5px; /* Espacement interne */
  border: 2px solid var(--main-blue); /* Bordure */
  border-radius: 5px; /* Coins arrondis */
  background-color: var(--main-white); /* Couleur de fond */
  color: var(--main-blue); /* Couleur du texte */
  margin-bottom:5px;
  text-align:center;
}

#mySelect option {
  background-color: var(--main-white); /* Couleur de fond des options */
  color: var(--main-blue); /* Couleur du texte des options */
  padding: 5px; /* Espacement interne des options */
  text-align:center;
}


.block {
  width: 380px;
  margin:10px;
  padding:0 10px 10px 10px;
  border-radius: 10px 10px 0 0; /* Coins arrondis en haut */
  background-color: var(--main-white);
  opacity: 0.9;
  text-align:center;
  font-size:12px;
}

.block table {
  margin: 0 auto;
  border-collapse:collapse;
  width:360px;
}

.block tr:hover{
  cursor:pointer;
}

.block table .un {
  width:50px;
  min-width:40px;
}

.block table .trois{
  width:10px;
  min-width:10px;
}

.block table .gauche {
  text-align:right;
  width:120px;
  min-width:130px;
}

.block table .droite {
  text-align:left;
  width:120px;
  min-width:130px;
}

.block table .cinq {
  width:50px;
  min-width:50px;
}

.block .nonencode {
  color:var(--main-orange);
}


.block .highlight {
  background-color:var(--main-vert);
}

.block .highlightnonencode {
  background-color:var(--main-gris);
  color:var(--main-orange);
}


/* Media query pour les petits écrans */ 
@media (max-width: 600px) { 
  .block {
    width:360px;
  }
  
  .navigation {
    display: none;
  } 
}