#barre{
	display: inline-block;
	width: 20%;
	margin-right: 0.3%;
}
#barre-reduite{
	display: none;
	text-align: center;
}
.menu{
	text-align: center;
	margin-bottom: 2px;
}
.menu-btn {
	cursor: pointer;
}
#hide-menu-btn-mobile{
	display: none;
}
#show-menu-btn-mobile{
	display: none;
}
#chose-lang{
	display: inline-block;
}
table{
	text-align: center;
	border-collapse: collapse;
	width: 100%;
}
tr{
	background-color: #e0ecf8;
}
tbody tr:nth-child(even) {
  background-color: #ffffff;
}
tbody tr:nth-child(odd) {
  background-color: #f0f4f8;
}
  

/* ========= POP UP REGLES =========== */
#popup-container-rules {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    z-index: 9999;		
  }
  #popup-content-rules {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    max-height: 60%;
    overflow-y: auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px #00000080;
    h2 {
      text-align: center;
      margin-top: 0;
    }	      
  }
    
  /* ========= POP UP HISTORIQUE =========== */
  #popup-container-history {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    z-index: 9999;		
  }
  #popup-content-history {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    max-height: 60%;
    overflow-y: auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px #00000080;		      
    h2 {
      text-align: center;
      margin-top: 0;  
    }
    li{
      margin-top: 8px;
    }
  }
  
  #last-page{
      background-color: #e2e8f0;
      text-align: center;
      p{
          text-align: center;
          margin-bottom: 0px;
      }
  }
  


@media only screen and (max-width: 900px) {
	/* ========= POP UP REGLES =========== */
	#popup-content-rules{
		width: 80%;
		max-height: 80%;
	}
	/* ========= POP UP HISTORIQUE =========== */
	#popup-content-history{
		width: 60%;
	}	
	#barre{
		width: 100%;
	}
	.menu-btn{
		font-size: 2rem;
	}
	#show-menu-btn-mobile{
		font-size: 1.3rem;
		display: inline-block;
	}
	#show-menu-btn{
		display: none;
	}
	#hide-menu-btn-mobile{
		display: inline-block;
	}
	#hide-menu-btn{
		display: none;
	}
	#barre-reduite{
		width: 100%;
	}
}