body a{
cursor: url(images/iconesdejeu/icn_hand_32.png), pointer;
}

button:hover {
	cursor: url(images/iconesdejeu/icn_hand_32.png), pointer;
}

/* Vos règles CSS pour les Ordi */
#page{
	width:98%;
	margin: auto;
	background-color:#F4F4F4;
	border: 1px black solid;
	/* POUR EPOUSER LE BORDER RADIUS DU HEADER (CA PASSE EN DESSOUS)*/
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	font-family: Arial, Helvetica, sans-serif;
	}


	
/* Vos règles CSS pour les mobiles ici */

@media all and (max-device-width: 480px)
{	
	#page
	{
	     width: auto;
	}
}

header {
	display: flex;	
	background-color: black;
	padding-top: 10px;
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	margin-bottom:0px;
	align-items: center;
}

.header {
  background-color: #f1f1f1;
  padding-top: 10px;
  text-align: center;
  color: black;
}

.header:nth-child(1) {
	padding-left: 0px;
	color:white;
	flex: 1;
}

.header:nth-child(2) {
	
	padding-left: 0px;
	color:white;
	flex: 2;
}



#img_logo{
	height: auto;
}

#connect {
	background-color:black;
}

#infos{
	display:flex;
	flex-wrap: wrap;
	margin-top: 0px;
	margin-bottom:0px;

}



#barre_d_infos{
	flex:1;
	background-color:#F4F4F4;
	color: white;
	padding-left: 10px;
	text-align: center;
	font-family:Arial black, Helvetica, sans-serif;
	font-size:1em;
}

#barre_d_infos form input{
	width: 99%;
	height:30px;
	background-color: #F4F4F4;
	color: black;
	border: 0px;
	font-size: 1.2em;
}










/*  ******************************************  Le top menu css 3 Schools **********************************************************************  */




/*    necessite le sticky javascript             */
#navbar {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

#navbar a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px;
  text-decoration: none;

  font-size:50px;
  text-shadow:2px 2px 4px #000000; 
  line-height: 2px;
}

#navbar a:hover {
  background-color: #777;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

span.menuText {
	font-size: 0.2em;
}



/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.conteneurBlocs {
  padding: 0px;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .conteneurBlocs {
  padding-top: 100px;
}


/*  le menu den dropdown  */

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;

}

/* Links inside the navbar */
.navbar a {
  float: left;
  border-right: 1px white solid;
  border-left: 1px white solid;
  font-size: 25px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 25px; 
  border: none;
  border-right: 1px white solid;
  outline: none;
  color: white;
  padding: 14px 16px;
 background-color: inherit;
}

/* ACTIF */
.dropdown-actif {
  font-size: 25px; 
  border: none;
  border-right: 1px white solid;
  outline: none;
  color: white;
  padding: 14px 16px;
 background-color: #4CAF50;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* ************** dropdown content actif (niveau 2) ********************* */
/* Links inside the dropdown */
.dropdown-content a.dropdown-content-actif {
  color: black;
  background-color: red;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a.dropdown-content-actif:hover {
  background-color: red;
}


/* --------------- fin dropdown menu actif niveau 2 ----------------------------*/

/* Quelques media queries pour adapter au portables */

@media all and (max-device-width: 480px){
.navbar a {   font-size: 35px; }
.dropdown .dropbtn { font-size: 35px; }
.dropdown-actif { font-size: 35px; 
}
}


/* --------------------------------------------------------------------------------------------------------------------------------------  */






/* -------------------    le titre animé de la page   -------------------------*/

.ml9 {
  position: relative;
  font-weight: 200;
  font-size: 2em;
  text-align: center;
  color: white;
  font-weight: 900;
}

.ml9 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml9 .letter {
  transform-origin: 50% 100%;
  display: inline-block;
  line-height: 1em;
}




/******************  fil d info  *******************************/

.filInfos {

-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);

    font-family: 'Aldrich'; 
    font-size: 1em;
    width: 92%; 
    margin:auto; 
    padding: 0.5em; 
    display: flex; 
    background: lightgrey;   
    flex-wrap: wrap; 
    justify-content: space-around; 
    margin-top: 10px; 
    margin-bottom: 10px;
}

.filInfos:hover{
	width:94%;
	font-size: 1.2em;
}


@media all and (max-device-width: 480px){

	.filInfos {
	    height: 3.5em;
	}
}


	.conteneurArticles { 
		width: 100%; 
		display: flex;
		background: white;   
		flex-wrap: wrap; 
		justify-content: space-around;  
		margin-bottom: 0em;

	 }

@media all and (max-device-width: 900px){

	.conteneurArticles { 
	    display: block;
	}
}	
	.article {
		flex: 1; 
		background: #F8F8FF; 
		text-align: center; 
		padding:3px;
		overflow-wrap: break-word;
		line-height: 2em;
		margin: 4px;
		border: 1px black solid;
		border-radius: 5px;
		box-shadow: 6px 6px 3px;
		margin-bottom: 0.5em;
	}

	.article:hover {
 		 box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),
           			 -1px 2px 10px rgba(0, 0, 0, 0.7) inset;  

}


/**********************************  Menu Joueurs Stars ***************************/
#menuJoueursStars ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

#menuJoueursStars li {
    float: left;
	
}

#menuJoueursStars li a {
    display: block;
    color: white;
    font-size:1.3em;
	text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	
}

/* Change the link color to #111 (black) on hover */
#menuJoueursStars li a:hover {
    background-color: #111;
}

#menuJoueursStars .active {
    background-color: #4CAF50;
}

#menuJoueursStars .faq {
	float: right;
    background-color: red;
	
}









#nav_top-menu {
	display: flex;
	background-color:black;
	color: white;
	margin-top: 0px;
}

#top_menu{
	flex:1;
}

#onglets li {		
	border-right: 1px white solid;
	display: inline-block;
	padding: 10px 20px 10px 10px;
	margin: 0px;
	font-size: 1.5em;
	color: white;	
	background-color: black;
	list-style: none;
	font-family:Arial, Helvetica, sans-serif;
}

#onglets li.top_menu-actif{
	background-color:orange;
	color:black;
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

}

#onglets li.top_menu-actif a{
	color:black;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
}


#onglets li a{
	padding: 0px 0px 0px 10px;
	color:white;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
}

#onglets li:hover{
	background-color:orange;
	color:black;
	
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1000ms;
	
	-moz-transition-property: background-color;
	-moz-transition-duration: 1000ms;

	-ms-transition-property: background-color;
	-ms-transition-duration: 1000ms;

	-o-transition-property: background-color;
	-o-transition-duration: 1000ms;
}

#onglets li a:hover{
	color:black;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;

}

#contenu {
	display:flex;
	flex-wrap: wrap;
	background-color: #F4F4F4;
	margin-top : 0px;
	justify-content: space-around;
	align-items: flex-start;
}

@media all and (max-device-width: 680px)
{	
		
	#contenu
	
	{
	display: block;
	width: 100%;
	font-size: 2em;
	}
	
	#contenu form select
	{
		font-size: 1em;
	}
	
	#contenu form input 
	
	{
	font-size: 1.8em;
	}

	

}


p {
	text-indent: 30px;
	padding: 0 10px 0 5px;
	font-size:1.2em;
}



form {
	padding-left: 20px;
}

#infos_tarifs {
	
	color: black;
	background:orange;
	font-size:1.5em;
	padding: 0 10px 0 10px;
}

#article_principal {
	flex:3;
	padding-left: 30px;
	padding-right: 10px;
	font-size: 1.5em;
}
#article_principal h1{
	padding-left: 50px;
	padding-right: 10px;
	
}

#joueur_entraineur {
	font-size:0.8em;
	display:flex;
	flex-wrap: wrap;
	margin-bottom:20px;
}

#j_e_gauche {
	padding-right:30px;
}
#j_e_droite{
}

li.alaligne {
	display: inline;
}






/********************  Configuration des menus aside *******************************/


#aside {
  flex: 1;
  overflow-x:auto;

}

@media all and (max-device-width: 480px)
{
	#aside {
	overflow-x:auto;
	display: inline;
	
	}
}

#chatAccueilMembre {
	width: 100%;
	word-wrap: break-word;
	height: 500px;
  	overflow-y: auto;
}


@media all and (min-device-width: 481px)
{
	.uniquementPourPortable {
			display:none;
	}
}


/********************* FIN DES MENUS ASIDE **************************************************************************/
#facebook {
	background-color: black;
	flex:1;
	text-align:center;
	margin: 0px 10px 10px 10px;
	padding-bottom:20px;
	border: 0px black solid;
	font-size:1.2em;
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

#facebook h1{
	color:black;
	text-align: center;
	background-color:orange;
	border: 1px black solid;
	font-size:1.5em;
	padding: 0px;

		
	-moz-border-radius:10px 10px 0px 0px;
	-webkit-border-radius:10px 10px 0px 0px;
	border-radius:10px 10px 0px 0px;


}
.fb-page{
	padding: 0 10px 0 10px;
}


.menu_right {
	background-color:black;
	flex:1;
	margin: 20px 10px 10px 10px;
	padding-top:0px;
	padding-bottom:10px;
	border: 0px black solid;
	font-size:1.2em;
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	
	
}

.menu_right h1{
	color:black;
	text-align: center;
	background-color:orange;
	border: 1px black solid;

		
	-moz-border-radius:10px 10px 0px 0px;
	-webkit-border-radius:10px 10px 0px 0px;
	border-radius:10px 10px 0px 0px;


}

.menu_right ul{
	list-style: none;
	margin-left: 5px;
	padding-right: 20px;
	padding-left:10px;
	border-left:8px orange solid;
}

.menu_right li{
	color: white;
	margin: 10px 0 10px 0;
	padding: 0 10px 0 10px;
}

.menu_right a{
	text-decoration: none;
}


.menu_right li:hover{
	color: black;
	background-color:orange;
	margin-left:12px;	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1000ms;
	
	-moz-transition-property: background-color;
	-moz-transition-duration: 1000ms;

	-ms-transition-property: background-color;
	-ms-transition-duration: 1000ms;

	-o-transition-property: background-color;
	-o-transition-duration: 1000ms;

	
	
}

.menu_right li.menu_left-actif {
	background:orange;
		-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

}
.menu_right a li.menu_left-actif {
	color:black;



}

aside {
	background-color:orange;
	border: 1px black solid;
	margin: 10px 10px 10px 10px;
	padding-left: 10px;
	padding-right: 10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

}



/*************** blocs page d accueil index **************************/


@media all and (min-device-width: 801px)
{

		 .conteneurBlocs
		{
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-around;

		}


		 .bloc1
		{
		    flex: 1;
		    background: #19160f;
		}

		 .bloc2
		{
		    flex: 1;	
		    background: green;
		    padding: 10px;
		    color:white;
		    text-align: center;
		}

		 .bloc2 td
		{
		    color:black;		    
		}




		 .bloc3
		{
		    flex: 5;	
		    background: #19160f;
		    color: #f6f193;
		    padding: 10px;   
		}

		 .bloc4
		{
		    flex: 1;	
		    background: #f7f7f7;
		    color: #000;
		    padding: 10px;
		    
		}		


		.bloc5 		{
		    flex: 1;	
		    color: #fff;
		    padding-top: 1em;
		    margin-top: 0px;			    
		}

		.blocSocial

		{

			flex: 1;
			margin-bottom: 0.3em;
		
		}





}


 
@media all and (max-device-width: 800px)
{

		 .conteneurBlocs
		{
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-around;

		}


		 .bloc1
		{
		    flex: 1;
		    background: #19160f;
 			margin-top: 10px;	 


		}

		 .bloc2
		{
		    flex: 1;	
		    background: green;
		    padding: 10px;
		    margin-top: 10px;	
		    color: white;
		    text-align: center;
		    
		}

		 .bloc2 td
		{
		    color:black;		    
		}

		 .bloc3
		{
		    flex: 5;	
		    background: #19160f;
		    color: #f6f193;
		    padding: 10px;
		    margin-top: 10px;		    
		}

		 .bloc4
		{
		    flex: 1;	
		    background: #f7f7f7;
		    color: #000;
		    padding: 10px;
		    margin-top: 10px;		    
		}

		.bloc5 		{
		    flex: 1;	

		    color: #fff;
		    padding-top: 1em;
		    margin-top: 0px;			    
		}


		.blocSocial

		{

			flex: 1;
			margin-bottom: 0.3em;
		}


}

/*********************************************************************/
/* Style all font awesome icons */
.fa {
  padding: 10px;
  font-size: 15px;
  width: 40px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

.fab {
  padding: 10px;
  font-size: 16px;
  width: 40px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fab:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

/* messenger */
.fa-facebook-messenger {
  color: white;
  background-image:linear-gradient(#00C6FF, #0078FF);
}







/* modal */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

}




/*********************** barreInfosNiveau *****************************/

#niveau_joueur {
	display: flex;
	justify-content: center;
}

.barreInfosNiveau  table {
	margin-right: 20px;
	border-collapse: collapse;

		
}

.barreInfosNiveau th, tr, td{
	text-align: center;
	padding-left: 25px;
	padding-right: 25px;
	margin-right: 20px;

}



#bas_de_page {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: #F4F4F4;
	font-size:1.2em;
	margin-right: 15px;
}

#bas_de_page h1 {
	font-size:1.4em;
	text-decoration: underline;
}

footer{
	display: flex;
	background-color:black;
	color: white;
	padding-left: 10px;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
	}

.bouton_noir{
	background-color:Black;
	color:white;
	text-decoration:none;
	padding:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.bouton_noir:hover{
	background-color:#F4F4F4;
	color:black;
	text-decoration:none;
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1000ms;
	
	-moz-transition-property: background-color;
	-moz-transition-duration: 1000ms;

	-ms-transition-property: background-color;
	-ms-transition-duration: 1000ms;

	-o-transition-property: background-color;
	-o-transition-duration: 1000ms;

}
.video {
	text-align:center;
}

.images {

	width: 30%;
	border: 1px black solid;
		-webkit-transition-property: all;
	-webkit-transition-duration: 1000ms;
	
	-moz-transition-property: all;
	-moz-transition-duration: 1000ms;

	-ms-transition-property: all;
	-ms-transition-duration: 1000ms;

	-o-transition-property: all;
	-o-transition-duration: 1000ms;

}

.images:hover {
	width: 60%;
	border: 2px orange solid;
}

.imageContact {
	width: 50%;
	border: 1px black solid;
	-webkit-transition-property: all;
	-webkit-transition-duration: 1000ms;
	
	-moz-transition-property: all;
	-moz-transition-duration: 1000ms;

	-ms-transition-property: all;
	-ms-transition-duration: 1000ms;

	-o-transition-property: all;
	-o-transition-duration: 1000ms;

}


.imageContact:hover {
	width: 80%;
	border: 2px orange solid;
}


/********** 2. Les services ****************/


#services_services{
	flex:3;
}







#services_services h1{
	text-align:center;
}




#menu_left {
	background-color:black;
	flex:1;
	margin: 20px 10px 10px 10px;
	padding-top:20px;
	padding-right: 20px;
	border-left: 1px black solid;
	font-size:1.2em;
}

@media all and (max-device-width: 480px)
{
	#menu_left {
		width: 98%;
		margin:auto;
	}
}


#menu_left ul{
	list-style: none;
	margin-left: 5px;
	padding-left:10px;
	border-left:8px orange solid;

}

#menu_left li{
	color: white;
	margin: 10px 0 10px 0;
	padding: 0 10px 0 10px;
}

#menu_left a{
	text-decoration: none;
}


#menu_left li:hover{
	color: black;
	background-color:orange;
	margin-left:12px;	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1000ms;
	
	-moz-transition-property: background-color;
	-moz-transition-duration: 1000ms;

	-ms-transition-property: background-color;
	-ms-transition-duration: 1000ms;

	-o-transition-property: background-color;
	-o-transition-duration: 1000ms;

	
	
}

#menu_left li.menu_left-actif {
	background:orange;
		-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

}
#menu_left a li.menu_left-actif {
	color:black;

}



/************     MENU navigation ******************************/


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    height: 34px;
    padding-top: 0px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}




/************************************************************/



/*    tableauuuuuuuuuuuuuu */

/*
#table_services{

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:1.5em;
    border-collapse: collapse;
    border: 1px black solid;
    width: 50%;
	margin: auto;
	background-color: silver;
	text-align:center;

}


@media all and (max-device-width: 680px)
{
	#table_services{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 90%;
	margin: auto;
	}

}


#table_services th{
	border: 1px black solid;
	padding: 10px;
	background-color:#DFDFDF;
}


#table_services td{
	border: 1px black solid;
	padding: 3px;
}

#table_services td.case_noire_morte{

background:black;
color:white;
}


#table_services td.case_noire{

	background:black;
	color:white;
}

#table_services td a {
	display:block;
	background:black;
	color:white;
	text-decoration:none;
}

#table_services td.case_noire:hover{

	background:orange;


	-webkit-transition-property: background-color;
	-webkit-transition-duration: 2000ms;
	
	-moz-transition-property: background-color;
	-moz-transition-duration: 2000ms;

	-ms-transition-property: background-color;
	-ms-transition-duration: 2000ms;

	-o-transition-property: background-color;
	-o-transition-duration: 2000ms;

}

#table_services td.case_noire a:hover{

	background:orange;
	color:black;
	text-decoration:none;
}

#table_services tr.rangee:hover{

	background:orange;


	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1500ms;
	
	-moz-transition-property: background-color;
	-moz-transition-duration: 1500ms;

	-ms-transition-property: background-color;
	-ms-transition-duration: 1500ms;

	-o-transition-property: background-color;
	-o-transition-duration: 1500ms;

}
*/
/*   *********************           fin tableau              *************** */






#table_services {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 50%;
	margin: auto;
	background-color: silver;
}

#table_services td, #table_services th {
    border: 1px solid #ddd;
    padding: 3px;
	text-align: center;
}

#table_services tr:nth-child(even){background-color: #f2f2f2;}

#table_services tr:hover {background-color: #ddd;}

#table_services th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #4CAF50;
    color: white;
}


#table_services tr.rangee:hover{

	background:orange;


	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1500ms;
	
	-moz-transition-property: background-color;
	-moz-transition-duration: 1500ms;

	-ms-transition-property: background-color;
	-ms-transition-duration: 1500ms;

	-o-transition-property: background-color;
	-o-transition-duration: 1500ms;

}

@media all and (max-device-width: 680px)
{	
	#table_services {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 90%;
	margin: auto;
	}
	

}


.submitBoutton {
	color: red;
	font-size: 1em;
}

@media all and (max-device-width: 680px)
{	
	.submitBoutton {
	color: red;
	font-size: 0,5em;
	}
	

}













/* *************** Listes a puce et num *********************** */
dl{
	padding-left: 10px;
	padding-right: 5px;
}

dt {
	font-size:1.6em;
}

dd {
	font-size:1.2em;
	padding-bottom:12px;
}

ol {
	font-size:1.5em;
	text-align:justify;
}

ol li {
		padding: 0 5px 0 5px; 
}

/* *******************************  Infobulles ******************* */

.info {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* On souligne le texte. */
}
.info span {
   display: none; /* On masque l'infobulle. */
}
.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;

   white-space: wrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   top: 30px; /* On positionne notre infobulle. */
   left: 20px;

   background: white;
	font-size:0.8em;
   color: black;
   padding: 3px;

   border: 1px solid orange;
   border-left: 4px solid orange;
}

#number {
  width: 6em;
  height: 1em;
  font-size: 0.9em;
}

.case {
  width: 1em;
  height: 1em;
  font-size: 0.9em;
}








.boutonsValider {
   background-color: #4CAF50;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
	font-size: 0.7em;

}

.boutonsValider:hover {
    background-color: green;
}	

/************* tooltip *****************/

	/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px solid black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 9999;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}



/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 52%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
} 


.tooltipGauche .tooltiptextGauche {
	left: -50%;
}

.tooltip .tooltiptextGauche::after {
    left: 75%;

}


/*  Le Conteneur du score suivi match */


.pageSuiviMatch {
	border: 2px black solid;
}

.tableauScore {
/*			justify-content: center;
			
			
			margin-bottom: 20px;
			align-items: center;
			border: 3px black solid;
			background-color: #4CAF50;
*/
			justify-content: center;
			width:75%;
			margin:auto;
			margin-top: 2em;
			margin-bottom: 20px;
			border: 0px black solid;
			background-color: #4CAF50;
			padding: 0px;
-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);

}

.titreScore {
	
	text-align: center;	
	font-size: 1.2em;
	color: white;
	background: #444;
	width: 30%;
	margin: auto;
	margin-top: 0.5em;
	margin-bottom: 1em;
	padding: 0.8em;
	box-shadow: 8px 8px 3px #000;
}




.containerScore {
	/*
			display: flex;
			justify-content: center;
			margin:auto;
			align-items: center;
			padding: 0px 40px 0px 40px;
			flex-wrap: nowrap;
*/

	width: 85%;
	display: flex;
	justify-content: center;
	margin:auto;
	align-items: center;
	padding: 0px 0px 0px 0px;
	flex-wrap: nowrap;


		}

	
		.equipeScoreA {
/*			width:45%;
			text-align:right;
			word-wrap: break-word;
*/

			flex:6;
			text-align:right;
			font-size: 1.5em;
			color: white;
			background: #444;
			margin-left: 0.2em;
			margin-right: 0em;
			padding-right: 0.3em;
			box-shadow: 8px 8px 3px #000;


		}
		
		.equipeScoreB {
/*			width:45%;
			text-align:left;
			word-wrap: break-word;
*/
			flex:6;
			text-align:left;
			font-size: 1.5em;
			color: white;
			margin-right: 0.2em;
			background: #444;
			padding-left: 0.3em;
			box-shadow: 8px 8px 3px #000;



		}
		
		.score {


			flex:1;
			text-align: center;
			font-size: 1.5em;
			color: #fff;
			background-color: #444;
			box-shadow: 8px 8px 3px #000;
		}
		

		
		.stadeScore {

		    display: flex;

			justify-content: center;
			text-align: center;
			color: white;
			font-size: 1.2em;
			margin-top: 1em;
			padding-bottom: 20px;
		}
		

		.stadeScoreGauche {
			flex: 1;


		}

		.stadeScoreDroite {
			flex: 1;
		}

		.nomDuSTade {
			text-align: center;
			font-size: 1em;
		}




		
		.containerPub {
			display: flex;
			background: #1a150f;
			justify-content: center;
			width:75%;
			margin-left:12.5%;
			align-items: center;
			flex-wrap: nowrap;
			box-shadow: 8px 8px 3px #000;
		}
		
@media all and (max-device-width: 680px)
{

.pageSuiviMatch {
	border: none;
}

.tableauScore {
			justify-content: center;
			width:98%;
			margin-bottom: 20px;
			border: 0px black solid;
			background-color: #4CAF50;
			padding: 0px;
			margin-top: 0em;
-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.6);
}	


.titreScore {
	
	text-align: center;	
	font-size: 1.2em;
	color: white;
	background: #444;
	width: 30%;
	margin: auto;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.8em;
	box-shadow: 8px 8px 3px #000;
}


.containerScore {

	width: 85%;
	display: flex;
	justify-content: center;
	margin:auto;
	align-items: center;
	padding: 0px 0px 0px 0px;
	flex-wrap: nowrap;

		}
		
	
		.equipeScoreA {
			flex:6;
			text-align:right;
			font-size: 1em;
			color: white;
			background: #444;
			margin-left: 0.2em;
			margin-right: 0em;
			padding-right: 0.3em;
			box-shadow: 8px 8px 3px #000;
		}
		
		.equipeScoreB {
			flex:6;
			text-align:left;
			font-size: 1em;
			color: white;
			margin-right: 0.2em;
			background: #444;
			padding-left: 0.3em;
			box-shadow: 8px 8px 3px #000;
		}
		
		.score {
			flex:1;
			text-align: center;
			font-size: 1em;
			color: #fff;
			background-color: #444;
			box-shadow: 8px 8px 3px #000;
		}
		
		.stadeScore {

		    display: flex;

			justify-content: center;
			color: white;
			font-size: 0.8em;
			margin-top: 1em;
			padding-bottom: 20px;
		}
		

		.stadeScoreGauche {
			flex: 1;

		}

		.stadeScoreDroite {
			flex: 1;
		}

		.nomDuSTade {
			text-align: center;
			font-size: 0.7em;
		}


		.containerPub {
			display: flex;
			justify-content: center;
			width:98%;
			margin-left: 0px;
			align-items: center;
			flex-wrap: nowrap;


			

		}


}
/********************* liens en boutons *****************************/

/*rouge*/
a:link.rouge, a:visited.rouge {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
	font-size: 0.5em;
	box-shadow: 8px 8px 3px #000;
}

a:hover.rouge, a:active.rouge {
    background-color: red;
}

/*vert*/
a:link.vert, a:visited.vert {
    background-color: #4CAF50;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
	font-size: 0.7em;
}

a:hover.vert, a:active.vert {
    background-color: green;
}


/*rouge*/
a:link.rouge, a:visited.rouge {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
	font-size: 0.5em;
}

a:hover.rouge, a:active.rouge {
    background-color: red;
}

/*or*/
a:link.or, a:visited.or {
    background-color: gold;
    color: black;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
	font-size: 0.7em;
}

a:hover.or, a:active.or {
    background-color: yellow;
}






	





/*********************** boutons récompense   *************************/


.recompenses
{
width:300px;
height: 200px;
background-image:url("habillage/recompenses2.gif");
background-size: 370px;
border: 3px solid gold;
}

/******************** Boites d'Alerte ***********************************/

.alert {
    padding: 20px;
    width: 50%;
	margin: auto;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
	
}

@media all and (max-device-width: 680px)
{
	
.alert {
    padding: 20px;
    width: 90%;
	margin: auto;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
	
}


}


.alert.success {background-color: #4CAF50;}
.alert.bleu {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;

    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}



/***********************************    recompenses          ******************************/

#recompense {

  	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  	transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
	width:100%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;

}

#recompense h1{

	text-align: center;
	color: red;
	font-size: 1.5em;

}