@font-face {
    font-family: 'expletus_sansregular';
    src: url('font/expletussans-regular.eot');
    src: url('font/expletussans-regular.eot?#iefix') format('embedded-opentype'),
         url('font/expletussans-regular.woff2') format('woff2'),
         url('font/expletussans-regular.woff') format('woff'),
         url('font/expletussans-regular.ttf') format('truetype'),
         url('font/expletussans-regular.svg#expletus_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Webfont: Luciole-Regular */
@font-face {
    font-family: 'Luciole';
    src: url('font/Luciole-Regular/Luciole-Regular.eot'); /* IE9 Compat Modes */
    src: url('font/Luciole-Regular/Luciole-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('font/Luciole-Regular/Luciole-Regular.woff') format('woff'), /* Modern Browsers */
         url('font/Luciole-Regular/Luciole-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('font/Luciole-Regular/Luciole-Regular.svg#Luciole-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
body {
	background-color: #fff;
	font-family: Luciole, Liberation Sans, Arial;
}
/* FLAGS */

.flags form {
	position:relative;
	display:inline;
	width:100%;
	float:middle;
}
.flags input {
	height:56px;
}
button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
input[class="valid"] {
	background-color:#F6F6E7;
	border-radius: 10%;
	border: 1px black solid;
	padding:2px 5px 2px 5px;
	font-family: Luciole, Liberation Sans, Arial;
	font-size:0.9em;
}
/* EN-TETES */
header {
	height: 120px;
	width:auto;
	border-bottom:1px black solid;
}
header #wf_header img {
	float:left;
	margin-left:100px;
	width:200px;
}
header #rech_form {
	float:right;
	width:600px;
	margin-right:250px;
}
header #rech_fin {
	float:right;
	width:900px;
	margin-right:50px;
	font-size:0.9em;
}
header #rech_fin img {
	height:80px;
	margin-left:30px;
}
header #rech_fin img, header #rech_fin p {
	vertical-align:middle;
	margin-top:-2px;
}
header #rech_form input#rech_form {
	height:50px;
	width:400px;
}
header #input_rech {
	float:left;
	margin-top:5px;
	width: 400px;
	height: 80px
}

.form {
    font-size:1.2em;
	width: 50%;
	padding: 10px 35px 10px 15px;
	border: 1px solid grey;
	border-radius: 100px;
	outline: none;
}
.search_button {
	background: transparent;
  	border: none;
 	outline: none;
  	margin-left: -33px;
}
/* PARTIE PRINCIPALE */
.main {
	min-height:100%;
	overflow:auto;
    padding-bottom: 25px;
	position:relative;
}

/* TEXTES */
h1, p, ul {
	font-family:Luciole, Calibri,Tahoma,Arial;
	font-size:1.4em;
}
table {
	font-family:Luciole, Calibri,Tahoma,Arial;
}
ul {
	margin-top:-25px;
	margin-left:200px;
}
.border_blue {
	border: 3px solid blue;
	border-radius: 10px;
	margin:auto;
	margin-bottom:10px;
	width:750px;
	padding:30px;
}
.border_red {
	margin:auto;
	margin-bottom:10px;	
	padding:10px;
}
.intro h1, p {
	font-size:1.6em;
	font-weight:normal;
	text-align:center;
}
.expletus {
	font-family:expletus_sansregular,Luciole, Liberation Sans, Arial;
	font-size:1.6em;
}
.index2 {
	font-size:0.8em;
}
.red {
	color: #B9121B;
}
.right {
	float:right;
}
#mode, #level, #essais, #tryagain, #tryagain1, #tryagain2, #check1, #check0, #check2, #check3 {
	color: #fff;
	font-size:0.1em;
}
.soluce {
	float:left;
	margin:10px;
	font-family:Luciole, Liberation Sans, Arial;
	margin-top:-20px;
}
/* TABLEAUX et IMAGES DANS TABLEAUX */
table.border_red, table.border_blue {
	border:1px black solid;
	border-spacing:0;
	border: 1px solid #B9121B;
	border-radius: 5px;
	margin:auto;
	margin-bottom:10px;
	width:750px;
	padding:30px;
}
table.border_blue {
	border: 3px solid blue;
	border-radius: 5px;
}
table.border_red td {
	font-size:1.2em;
	font-weight:normal;
	padding:10px;
	border : 1px solid #000;
	border-radius: 5px;
	font-family:Luciole, Calibri,Tahoma,Arial;
}
table.border_blue td {
	font-size:1.4em;
	text-align:center;
	font-weight:normal;
	padding:10px;
	font-family:Luciole, Calibri,Tahoma,Arial;
}
table.border_red ul, table.border_blue ul {
	font-size:1em;
	font-weight:normal;
	font-family:Luciole, Calibri,Tahoma,Arial;
}
table.border_red th {
	font-size:1.3em;
	text-align:center;
	padding:10px;
	border : 1px solid #000;
	border-radius: 5px;
	font-family:Luciole, Calibri,Tahoma,Arial;
}
table {
	margin:auto;
}
#tab_intro td {
	border: 2px #40A497 solid;
	border-radius: 5px;
	padding:5px;
	margin:10px;
}
#tab_intro img {
	height:120px;
}
#tab_cercle .minus {
	height:60px;
}
.tab_cercle_border {
	border: 2px #40A497 solid;
	border-radius: 5px;

}
#logo1 {
	height:120px;
}

/* TABLEAUX BDD */

.bdd table {
	border-radius: 5px;
	border-spacing:0;
 }
.bdd td { 
	border:1px black solid;
	border-radius: 5px;
	text-align:center;
	/*background-color:#ABC8E2;*/
	/*background-color:#F8F8F6;*/
 }
.bdd th { 
	border:1px black solid;
	border-radius: 5px;
	text-align:center;
	font-weight:bold;
	background-color:#F6F6E7;
}
/* Appliquer des styles aux lignes paires */
.bdd tr:nth-child(even) {
  background-color: #b2babb; /* Couleur de fond pour les lignes paires */
}

/* Appliquer des styles aux lignes impaires */
.bdd tr:nth-child(odd) {
  background-color: #ffffff; /* Couleur de fond pour les lignes impaires */
}
table.tablesorter thead th {
    position: relative;
    padding:18px;
}

table.tablesorter thead tr .header::before,
table.tablesorter thead tr .headerSortUp::before,
table.tablesorter thead tr .headerSortDown::before {
    font-family: 'Font Awesome 5 Free'; /* Nom de la police FontAwesome */
    font-weight: 900; /* Poids de la police */
    display: inline-block; /* Affiche l'icône en tant que bloc en ligne */
    vertical-align: top; /* Alignement vertical en haut */
    position: absolute; /* Position absolue pour le positionnement précis */
    top: 0; /* Place l'icône en haut de la cellule */
    right: 0; /* Place l'icône à droite de la cellule */
    margin-right: 5px; /* Espacement à droite de l'icône */
    margin-top: 5px; /* Espacement à droite de l'icône */
}

table.tablesorter thead tr .header::before {
    content: "\e4af"; /* Code Unicode de l'icône FontAwesome par défaut (e4af) */   
}
/* Pour l'icône d'ascension */
table.tablesorter thead tr .headerSortUp::before {
    content: "\f103"; /* Code Unicode de l'icône FontAwesome d'ascension */
}

/* Pour l'icône de descente */
table.tablesorter thead tr .headerSortDown::before {
    content: "\f102"; /* Code Unicode de l'icône FontAwesome de descente */
}
th.sorted {
  background-color:  #f1c40f ; /* Changer la couleur de fond pour l'entête de la colonne triée */
  /* Autres styles */
}
.bdd td.special {
	font-weight:bold;
}
.bdd td.rank {
	background-color:red;
	font-weight:bold;
}

/* CENTRE */
.centre {
	width:auto;
}
.exos {
	border-bottom: 1px solid black;
}
.exos p, h2 {
	text-align:center;
	font-family:Luciole, Calibri,Tahoma,Arial;
	font-size:1.5em;
}
.bdd {
	margin-left:410px;
	text-align:center;
	padding-bottom:10px;
}
.bdd p, h2 {
	text-align:center;
	font-family:Luciole, Calibri,Tahoma,Arial;
	font-size:1.5em;
}
.tri {
	font-size:1.4em;
}

/* COLONNE RESULTATS */
.resultats {
	float:left;
	width:400px;
	/*min-height:1350px;*/
	overflow:auto;
	background-color:#183152;
	border-right: 2px solid black;
	/*border-top: 2px solid black;*/
	margin-top:-2px;
}
.resultats:before {
    content: '';
    position: absolute;
    top: 80px;
    padding-bottom: -25px;
    z-index: -1;
    left: 0;
    background: #183152;
}
.resultats_aff, .resultats_aff:before {
	width:390px;
	padding-left:5px;
	padding-right:5px;
}
.resultats_aff {
	float:left;
	min-height:1300px;
	background-color:#fff;
	border-right: 2px solid black;
	font-family:Luciole, Calibri,Tahoma,Arial;
	padding-left:5px;
	padding-right:5px;
}
.resultats_aff:before {
    content: '';
	border-right: 2px solid black;
    position: absolute;
    top: 80px;
    bottom:25px;
	padding-bottom:-25px;
    z-index: -1;
    left: 0;
    background-color: #fff;
}
.resultats_aff2, .resultats_aff2:before {
	width:390px;
	padding-left:5px;
	padding-right:5px;
}
.resultats_aff2 {
	float:left;
	margin-left:10px;
	background-color:#fff;
	border-right: 2px solid black;
	font-family:Luciole, Calibri,Tahoma,Arial;
	
}
.resultats_aff2:before {
    content: '';
    position: absolute;
	border-right: 2px solid black;
    top: 80px;
	bottom:25px;
	padding-bottom:-25px;
    z-index: -1;
    margin-left: -5px;
    background-color: #fff;
}
.resultats_aff3, .resultats_aff3:before {
	
	padding-left:5px;
	padding-right:5px;
	margin-right:50px;
}
.resultats_aff3 {
	width:390px;
	float:right;
	height:auto;
	background-color:#fff;
	border-right: 2px solid black;
	font-family:Luciole, Calibri,Tahoma,Arial;
}
.resultats_aff3:before {
    content: '';
    position: absolute;
	width:395px;
	border-right: 2px solid black;
    top: 80px;
    bottom:25px;
	padding-bottom:-25px;
    z-index: -1;
    background-color: #fff;
}

.tit_result {
	font-size:1.2em;
	font-weight:bold;
	font-style:italic;
}

.titre a {
	text-decoration:none;
}
.titre a:hover {
	text-decoration:underline;
}
.url {
	color:#148721;
}
.text {
	font-size:0.9em;
}
.annonce {
	font-size:0.7em;
	color:#148721;
	background-color:#fff;
	border: 1px solid #148721;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
p.border_red {
	font-size:1.4em;
}

/* FOOTER */

/* footer principal */
footer {
	position: relative;
    clear:both;
	border-top: 2px solid black;
    margin-top: -25px;
    height: 25px;
	
}
footer p, a {
	font-size:1em;
	text-decoration:none;
}

/* footer de la page index.php */
.intro_footer {
	float:center;
}
.intro_footer_left {
	float:center;
}
.options_footer_right {
	float:center;
}
#tab_options td {
	margin-right:100px;
	padding:30px;
}
