/*TODO : A rajouter : .mt5i;mb5i;bgc_d;mt0;vac;bw0d4;bc_bv;bc_r;mw1i;
 *btlr0d3;btrr0d3;bblr0d3;bbrr0d3;h2d5
ml30p; + padding right
*/
/*
========================================================================
========================================================================
    Les unités sont référencées par défaut en EM.
    Les pourcentages sont diférenciés avec P. ( Exemple : mtminp )
    La couleur par défaut est claire. Sinon le foncé est spécifié avec f.
========================================================================
========================================================================
*/

/***********************************************************************
************************DÉFINITIONS DES CLASSES************************
***********************************************************************/

.box{
    box-sizing: border-box;
}

/*********************
*****MIN-WIDTH EM*****
**********************/

.mnw2 {
	min-width: 2em;
}

.mw1i{
	min-width: 1em !important;
}

/*********************
*******WIDTH EM*******
**********************/

.wauto {
	width: auto;
}

.w0d8{
    width: 0.8em;
}

.w0d9{
    width: 0.9em;
}

.w1{
    width: 1em;
}

.w1d8{
    width: 1.8em;
}

.w2{
    width: 2em;
}

.w3 {
    width: 3em;
}

.w4{
    width: 4em;
}

.w5{
    width: 5em;
}

.w6 {
	width: 6em;
}

.w7 {
	width: 7em;
}

.w8 {
    width: 8em;
}

.w10{
    width: 10em;
}

.w12{
    width: 12em;
}

.w15{
    width: 15em;
}

.w20{
    width: 20em;
}

.w22 {
	width: 22em;
}

.w25{
    width: 25em;
}

.w40{
    width: 40em;
}

/**********************
****WIDTH POURCENT*****
***********************/

.w5p{
	width: 5%;
}

.w6p {
	width: 6%;
}

.w10p{
    width: 10%;
}

.w15p{
    width: 10%;
}

.w20p{
    width: 20%;
}

.w25p {
	width: 25%;
}


.w30p{
    width: 30%;
}

.w33p {
	width: 33.3%;
}


.w40p {
	width: 40%;
}

.w45p {
	width: 45%;
}


.w50p {
	width: 50%;
}


.w60p {
    width: 60%;
}

.w66p{
    width: 66.6%;
}

.w70p{
    width: 70%;
}

.w75p{
    width: 75%;
}

.w80p{
    width: 80%;
}

.w90p {
    width: 90%;
}

.w98p {
	width: 98%;
}


.w100p {
	width: 100%;
}

/************************
******HEIGHT EM*******
*************************/

.hauto {
	height: auto;
}

.h0d8{
    height: 0.8em;
}

.h0d9{
    height: 0.9em;
}

.h1{
    height: 1em;
}

.h1d5{
    height: 1.5em;
}

.h2{
    height:  2em;
}

.h2d5{
  height: 2.5em;
}

.h5{
    height: 5em;
}

.h7 {
	height: 7em;
}

.h10{
    height: 10em;
}

.h11 {
     height: 11em;
}

.h12{
    height: 12em;
}

.h13 {
    height: 13em;
}

.h15{
    height: 15em;
}

.h20{
    height: 20em;
}

.h25 {
    height: 25em;
}

.h27 {
    height: 27em;
}

.h30{
    height: 30em;
}

.h35{
    height: 35em;
}

.h36 {
    height:36em;
}

.h45{
    height: 45em;
}

/***********************
 *****HEIGHT POURCENT*****
 ***********************/

.h75p {
    height: 75%;
}

.h100p {
    height: 100%;
}

/***********************
******HEIGHT VH*****
************************/
.h10v{
    height: 10vh;
}

.h25v{
    height: 25vh;
}

.h30v{
    height: 30vh;
}

.h66v {
    height: 66vh;
}

.h70v{
    height: 70vh;
}

.h86v{
    height: 86vh;
}

.h88v {
    height: 88vh;
}

.h90v{
    height: 90vh;
}

.h97v{
    height: 97vh;
}

.h100v{
    height: 100vh;
}
/***********************
******HEIGHT MAX VH*****
************************/
.mnh100v {
	min-height: 100vh;
}

.mh66v {
    max-height: 66vh;
}

.mh70v{
    max-height: 70vh;
}

.mh88v {
    max-height: 88vh;
}



/***********************
******HEIGHT MAX EM*****
************************/

.mh7 {
	max-height: 7em;
}

/************************
********PADDING EM**********
*************************/

.p0 {
	padding: 0;
}

.p0d1{
    padding: 0.1em;
}

.p0d2{
    padding: 0.2em;
}

.p0d5{
    padding: 0.5em;
}

.p1 {
    padding: 1em;
}

/***********************
 ****PADDING BOTTOM*****
 ***********************/
.pb0d2{
    padding-bottom: 0.2em;
}

.pb0d5{
    padding-bottom: 0.5em;
}

.pb1{
    padding-bottom: 1em;
}

.pb3d7 {
    padding-bottom: 3.7em;
}

/***********************
 ****PADDING TOP*****
 ***********************/

.pt0d1{
    padding-top: 0.1em;
}

.pt0d2{
    padding-top: 0.2em;
}

.pt0d5 {
    padding-top: 0.5em; 
}

.pt1 {
    padding-top: 1em;
}

.pt3{
    padding-top: 3em;
}
/***********************
 ****PADDING LEFT*****
 ***********************/

.pl1{
    padding-left: 1em;
}

.pl1p {
    padding-left : 1%;
}

/***********************
 ****PADDING RIGHT*****
 ***********************/

.pr1{
    padding-right: 1em;
}

.pr1p {
    padding-right:  1%;
}


/***********************
*****MARGIN LEFT EM*****
************************/

.m0 {
	margin: 0;
}

.mlauto {
	margin-left: auto;
}

.ml0 {
    margin-left: 0;
}

.ml0d2{
    margin-left: 0.2em;
}

.ml0d5{
    margin-left: 0.5em;
}

.ml1{
    margin-left: 1em;
}

.ml1d5{
    margin-left: 1.5em;
}

.ml2{
    margin-left: 2em;
}

.ml4{
    margin-left: 4em;
}

.ml5{
    margin-left: 5em;
}

.ml8{
    margin-left: 8em;
}

.ml10{
    margin-left: 10em;
}

.ml12{
    margin-left: 12em;
}

.ml15{
    margin-left: 15em;
}


/**********************
*****MARGIN RIGHT EM
***********************/

.mrauto {
	margin-right: auto;
}

.mr0 {
    margin-right: 0;
}

.mr0d2{
    margin-right: 0.2em;
}

.mr0d5{
    margin-right: 0.5em;
}

.mr1{
    margin-right: 1em;
}

.mr1d5{
    margin-right: 1.5em;
}

.mr2{
    margin-right: 2em;
}

.mr4{
    margin-right: 4em;
}

.mr5{
    margin-right: 5em;
}

.mr8{
    margin-right: 8em;
}

.mr10{
    margin-right: 10em;
}

.mauto {
	margin: auto;
}

/***************************
 *MARGIN BOTTOM ******
****************************/

.mb0d1 {
    margin-bottom: 0.1em;
}

.mb0d2 {
    margin-bottom: 0.2em;
}

.mb0d5 {
    margin-bottom: 0.5em;
}

.mb1{
    margin-bottom: 1em;
}

.mb2{
    margin-bottom: 2em;
}

.mb5i{
	margin-bottom: 5em!important;
}
/***************************
 *MARGIN LEFT POURCENT******
****************************/
.ml1p{
    margin-left: 1%;
}

.ml1d5p{
    margin-left: 1.5%;
}

.ml2p {
    margin-left: 2%;
}

.ml5p {
    margin-left: 5%;
}

.ml6p {
    margin-left: 6%;
}

.ml15p {
    margin-left: 15%;
}

.ml10p {
    margin-left: 10%;
}

.ml25p {
    margin-left: 25%;
}

.ml30p {
	margin-left: 30%;
}

.ml35p {
    margin-left: 35%;
}

.ml40p {
    margin-left: 40%;
}

.ml50p{
    margin-left: 50%;
}

/*************************
 *******MARGIN TOP EM ****
 ************************/
.mt0{
  margin-top: 0px !important;
}

.mt0d1 {
    margin-top: 0.1em;
}

.mt0d2 {
    margin-top: 0.2em;
}

.mt0d5 {
    margin-top: 0.5em;
}

.mt1 {
    margin-top: 1em;
}

.mt1d5{
    margin-top: 1.5em;
}

.mt2 {
    margin-top: 2em;
}

.mt3d9 {
    margin-top: 3.9em;
}

.mt5 {
	margin-top: 5em;
}

.mt5i{
	margin-top: 5em!important;
}
/*************************
 **MARGIN TOP POURCENT****
 ************************/
.mt1p{
    margin-top: 1%;
}

.mt2p {
    margin-top: 2%;
}

.mt5p{
    margin-top: 5%;
}

.mt10p {
    margin-top: 10%;
}

/************************
**MARGIN RIGHT POURCENT**
*************************/
.mr1p{
    margin-right: 1%;
}

.mr1d5p{
    margin-right: 1.5%;
}

.mr2p {
	margin-right: 2%;
}

.mr10p {
	margin-right: 10%;
}

.mr25p {
	margin-right: 25%;
}


/*************************
**********FLOAT***********
**************************/

.fl {
	float: left;
}

.fr {
	float: right;
}

.fn{
    clear: both;
}


/************************
********TEXT_ALIGN*******
*************************/

.tar {
	text-align: right;
}

.tal {
	text-align: left;
}

.tac {
	text-align: center;
}


/**********************
********FONT-SIZE******
***********************/

.fs0d7{
    font-size: 0.7em;
}

.fs0d9{
    font-size: 0.9em;
}

.fsmedium {
	font-size: medium;
}

.fslarger {
    font-size: larger;
}

.fs1d5{
    font-size: 1.5em;
}

.fs2 {
	font-size: 2em;
}

/***********************
******FONT-WEIGHT*******
************************/

.fwnormal {
	font-weight: normal;
}

.fwbold {
    font-weight: bold;
}



/************************
**********DISPLAY********
*************************/

.dnone {
	display: none;
}

.dflex {
	display: flex;
    flex-direction: column;
}

.db {
	display: block;
}

.di {
	display: inline;
}

.dib {
	display: inline-block;
}

.dt {
	display: table;
}

.tlfixed {
	table-layout: fixed;
}

.f1{
    flex: 1;
}

/************************
********BORDER-WIDTH*****
*************************/
.bw0d2{
    border-width: 0.2em;
}

.bw0d4{
    border-width: 0.4em;
}

.bwthin {
    border-width: thin;
}

.bbw0d2{
    border-bottom: 0.2em;
}

.bbwthin {
    border-bottom-width: thin; 
}

.btw0d2{
    border-top: 0.2em;
}

.btw1d5 {
    border-top-width: 1.5em; 
}

.btwthin {
    border-top-width: thin; 
}

.tdu {
    text-decoration: underline;
}

.tdn{
	text-decoration: none;
}

/**************************
********BORDER-STYLE*******
***************************/

.bsnone {
	border-style: none;
}

.bs_s {
	border-style: solid;
}

.bs_g {
	border-style: groove;
}

.bls_s {
	border-left-style: solid;
}

.brs_s {
	border-right-style: solid;
}

.bts_s {
	border-top-style: solid;
}

.bbs_s {
    border-bottom-style: solid; 
}

.btc_r {
	border-top-color: red;
}

.btc_v {
	border-top-color: #5ba207;
}

.btc_vf {
	border-top-color: #007D40;
}

.bcp_c {
	border-collapse: collapse;
}

.bcp_s {
	border-collapse: separate;
}


/******************************
***********BORDER-COLOR********
*******************************/

.bc_bc {
	border-color: #77B5FE;
}

.bc_g {
	border-color: #999999;
}

.bc_gf {
	border-color: #4c4c4c;
}

.bc_blf {
	border-color: #0568cd;
}

.bc_v {
	border-color: #5ba207;
}

.bc_vf {
	border-color: #007d40;
}

.bc_of{
	border-color: #e67300;
}

.bc_w {
	border-color: white;
}

.bc_i {
	border-color: initial;
}

.bc_bv{
  border-color:#3a0092;
}
.bc_r{
  border-color:red;
}

/**************************
******BORDER-RADIUS********
***************************/

.br0d2 {
	border-radius: 0.2em;
}

.br0d5 {
	border-radius: 0.5em;
}

.br50p {
    border-radius: 50%;
}

.btlr0d3{
  border-top-left-radius: 0.3em;
}
.btrr0d3{
  border-top-right-radius: 0.3em;
}
.bblr0d3{
  border-bottom-left-radius: 0.3em;
}
.bbrr0d3{
  border-bottom-right-radius: 0.3em;
}

/****************************
******BACKGROUND-COLOR*******
*****************************/
.bgc_bcc {
    background-color: #e6f3ff;
}

.bgc_b {
    background-color: #B8D7F2;
}


.bgc_bc {
    background-color: #3399FF;
}

.bgc_bccy {
    background-color: #ddeeea;
}

.bgc_bciel {
    background-color: #AEC5F2;
}

.bgc_bcy {
	background-color: #51cbff;
}

.bgc_bf {
	background-color: #0568CD;
}

.bgc_bn {
    background-color: #184EA5;
}

.bgc_bnf {
    background-color: #042E59;
}
.bgc_d{
  background-color:#424242; 
}
.bgc_g {
    background-color: #d9d9d9;
}

.bgc_gf {
	background-color: #4C4C4C;
}

.bgc_r {
	background-color: red;
}

.bgc_rf{
    background-color: #c03333;
}

.bgc_j {
	background-color: #ffff99;
}

.bgc_v {
    /*background-color: #0acc64;*/
    background-color: #71c174;
}

.bgc_vc {
    background-color: #92DB95;
}

.bgc_vf {
	background-color: #007d40;
}

.bgc_vfl {
	background-color: #00cc00;
}

.bgc_o {
	background-color: orange;
}

.bgc_oc{
    /*background-color: #ff9933;*/
	background-color: #ffbc00;
}

.bgc_occ{
    /*background-color: #ffa64d;*/
	background-color: #ff9933;
}

.bgc_of{
    background-color: #e67300;
}

.bgc_br {
	background-color: #e6dccb;   
}

.bgc_brf {
	background-color: #d6c5a9;
}

.bgc_p{
    background-color: #f6f;
}

.bgc_vi{
    background-color: #c0c;
}

.bgc_vif{
    background-color: #606;
}

.bgc_w{
  background-color: white;
}

.bgc_n{
  background-color: black;
}

.bgc_creme{
    background-color: #fdf6e3;
}

.bg_lgg {
	background: #007D40;
	/* la definition au dessus est en cas de non interprétation du gradient */
	background: linear-gradient(#70B890, #007D40);
}
.bg_lgb {
	background: #042E59;
	/* la definition au dessus est en cas de non interprétation du gradient */
	background: linear-gradient(#22427C,#042E59);
}
.bg_lgr {
    background: #900101;
    /* la definition au dessus est en cas de non interprétation du gradient */
    background: linear-gradient(#b91d1d,#fff);
}

.sil_n{
    filter: brightness(0);
}
/**********************
*******COLOR***********
***********************/

.clr_g{
    color: #999999;
}

.clr_gf{
    color: #4c4c4c;
}

.clr_b {
	color: #B8D7F2;
}

.clr_bc {
    color: #3399FF;
}

.clr_bf {
    color: #0568CD;
}

.clr_bcy {
    color: #51cbff;
}

.clr_w {
	color: white;
}

.clr_n{
    color: black;
}

.clr_r {
	color: #cc0000;
}

.clr_v {
    /*background-color: #0acc64;*/
    color: #71c174;
}

.clr_vc {
    color: #92DB95;
}

.clr_vf {
	color: #007d40;
}

.clr_o{
    color: orange;
}

.clr_of{
	color: #e67300;
}

.clr_j{
    color: #eedf24;
}

.clr_br {
    color: #e6dccb;   
}

.clr_brf {
    color: #d6c5a9;
}

.clr_vi{
    color: #c0c;
}

.clr_vic{
    color: #f0f;
}

.clr_vif{
    color: #606;
}

.clr_p{
    color: #f6f;
}

.clrh_r:hover{
    color: #c00;
}

.clrh_b:hover{
    color: #0568CD;
}

.clrh_j:hover{
    color: #fecb1c;
}

.clr_i{
    color:inherit;
}


/************************
********OVERFLOW*********
*************************/

.oauto {
	overflow: auto;
}

.ohidden {
    overflow: hidden;
}

.oyscroll {
    overflow-y: scroll;
}
/************************
**********TR*************
*************************/

.bgco_br:nth-child(odd) {
	background-color: #e6dccb;
}

.bgce_brf:nth-child(even) {
	background-color: #d6c5a9;
}

.bgco_blf:nth-child(odd) {
	background-color: #eff5f5;
}

.bgce_blf:nth-child(even) {
	background-color: #B5C9FC;
}

/*!!! NE SURTOUT PAS DEPLACER HOVER !!! ( Bug si mis avant nth-child... CSS T_T )*/

.bgh_v:hover {
	background-color: #71c174;
}

.bgh_vc:hover {
	background-color: #92DB95;
}
.bgh_j:hover {
	background-color: #ffff99;
}
.bgh_b:hover{
    background-color: #0568CD;
}
.bgh_bcy:hover {
    background-color:  #51cbff;
}
.bgh_r:hover{
    background-color: #cc0000;
}
.bgh_oc:hover{
    background-color: #ff9933;
}

.bgh_n:hover{
	background-color:#424242; 
}

.bgh_g:hover{
	background-color: #a5a1a1;
}

/**********************
*****LIST STYLE TYPE***
***********************/
.lstn {
	list-style-type: none;
}

.wsnowrap {
    white-space: nowrap;
}

.pabs {
    position: absolute;
}
.psta {
    position: static;
}
.prel {
    position: relative;
}

.l0 {
    left : 0;
}

.l1{
    left: 1em;
}

.r0 {
    right : 0;
}

.t0 {
    top : 0
}

.b0 {
    bottom: 0;
}

.vat{
    vertical-align: top;
}

.vab{
    vertical-align: bottom;
}

.vac{
  vertical-align: 50%;
}

.menuHover:hover{
    background-color: white;
    color: black;
    border-color: white;
}

.bouton{
    border-style: solid;
    border-width: thin;
    border-radius: 0.2em;
    display: inline-block;
    text-align: center;
    padding: 0.2em;
    min-width: 5em;
}
.bouton:hover,.bouton:focus{
    background-color: #51CBFF;
    border-color: white;
    cursor: pointer;
}
.cpointer{
    cursor: pointer;
}
.z1{
    z-index: -1;
}
#menu_vertical{
    display: none;
}
#div_classement_mobile{
    display: none !important;
}
.clavier_vertical{
    display: none;
}
@media screen and (max-width: 1025px) {

    .ligne
    {
        display: block;
        width:  100%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        float: none;
    }
    .image {
        max-width: 100%;
        height: auto;
    }
    .lignednone
    {
        display: none;
    }
    /*pour ne pas afficher les boutons liés à l'impression*/
    .bprint{
        display: none;
    }

    
    /*pas d'overflow vertical en responsive*/
    /*.oauto{
        overflow: visible;
    }*/
}

/*
 * Définition pour les petites resolutions
 */
@media screen and (max-width: 1025px) {
	button {
		margin: 0;
	}
	.dib {
		display: block;
        width:  100%;
	}

    div[name="image_minijeux"]{
        height: 85vh;
        overflow: scroll;
    }

    img[name="logo_pokejeux"]{
        width: 100%;
    }

    span[name="clavier"]{
        display: inline-block;
        width: 8%;
    }
    
	.wmax,
	.mlmaxp,
	.mr25p {
		margin: 0.5em;
		width: auto;
	}
    
    .ml0d2,
    .ml0d5,
    .ml1,
    .ml1d5,
    .ml2,
    .ml5,
    .ml8,
    .ml10,
    .ml12,
    .ml15,
    .ml15p,
    .ml40p
    {
        margin: auto;
    }
    
    .w33p,
    .w50p,
    .w66p,
    .w70p,
    .w75p,
    .w98p{
        width: 100%;
        margin:  0;
    }
    
	.w12{
        width: auto;
    }

    .w15{
        width: 100%;
        margin:  0;
    }
    
	.tal {
		text-align: left;
	}
    
    .fl,
    .fr{
        float:none;
    }

    #menu_horizontal{
        display: none;
    }
    #menu_droite{
        display: none;
    }
    #footer{
        text-align: center;
    }
    #menu_vertical{
        display: block;
    }
    #layout_jeu{
        display: flex;
        flex-wrap: wrap;
    }

    #div_mini_jeux {
        order: 2;
        height: auto !important;
    }
    #partie_encours {
        order: 1;
    }
    #div_classement{
        display: none !important;
    }
    #div_classement_mobile{
        display: flex !important;
        flex-direction: column;
        order: 3;
        width: 100%;
    }
    .ligne_clavier{
        margin-top: 1em;
    }
    .clavier_horizontal{
        display: none;
    }
    .clavier_vertical{
        display: inline;
    }
    .saisie_poketus{
        display: none;
    }
    #menu{
        height: auto;
        width: 100%;
        background: linear-gradient(#b91d1d,#ffbcbc);
        z-index: 9;
    }
}