body{
  color: white ;
  margin: 0 auto ;
  font-family: 'Open Sans', sans-serif;
  height: 100% ;
  background-color: #404040 ;
  text-underline-position: under;
  width: 100%;
  overflow-x: hidden;
  min-width: 200px ;
}

img{
  -ms-interpolation-mode: bicubic;
}

html{
  height: 100% ;
  width: 100% ;
}

main.cadre{
  display: block;
  padding: 0 3em 5em 3em;
  margin: 0 0 0 22% ;
  background-color: #404040 ;
  position: relative;
  min-height: 82% ;
  animation-name: fondu;
  animation-duration: 1s;
  overflow: hidden;
}


div.pop-up{
  position: fixed;
  height: 100% ;
  width: 100% ;
  background-image: url('../images/fonds/fond-noir-80.png');
  z-index: 200 ;
  display: none;
  overflow: hidden;
  top: 0 ;
  left: 0 ;
}


.padding-pop{
  padding-right: 17px ;
}

.padding-pop body{
  overflow: hidden;
}


div.pop-up div.message-pop-up{
  margin: auto ;
  padding: 2em ;
  position: relative;
  min-width: 30% ;
  max-width: 90% ;
  max-height: 80% ;
  overflow: auto;
  box-sizing: border-box;
}

div.pop-up div.fermer{
  position: absolute;
  right: 0.5em ;
  top: 0.2em ;
  color: Gray ;
  font-weight: 600 ;
  font-size: 2em ;
  cursor: pointer ;

}

  /* Custom CSS Scrollbar */
::-webkit-scrollbar-track {
    background-color: #999999;
}

::-webkit-scrollbar {
    width: 9px;
    height:9px ;
    background-color: #999999;
}

::-webkit-scrollbar-thumb {
    background-color: black;
}



div.lang{
position: absolute;
right: 1.2em ;
top: 1em ;
z-index: 100 ;
font-size: 0.7em ;
}


header.ban{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#161616+0,424242+99 */
background: rgb(22,22,22); /* Old browsers */
background: -moz-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(66,66,66,1) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(22,22,22,1) 0%,rgba(66,66,66,1) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(22,22,22,1) 0%,rgba(66,66,66,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
  position: fixed;
  top: 0% ;
  left: 0% ;
  width: 22% ;
  height: 100% ;
  text-align: center;
  z-index: 100 ;
  border-right: 1px solid Gray ;
  background-position: center 100%  ;
  background-size: 140% auto ;
  background-repeat: no-repeat;

}

header.ban input{
  margin:0 auto;
  display: block;
  width: 100% ;
border : 0px solid transparent;
border-radius: 0 ;
padding: 0.8em 1.5em ;
}

div.fond-pokeball{

  background-position: bottom center ;
  background-repeat: repeat-x; 
  height: 100% ;
  width: 100% ;
}

nav.menu{
  border-radius: 0.5em ;
  background-image: url('../images/fonds/fond-gris-90.png') ;
  text-align: left;
  padding: 0.3em 0 ;
  white-space: nowrap;

}

nav.menu div{
  padding: 0.3em 0.5em;
}

span.elipt{
  display: block;
  max-width: 90% ;
  overflow:hidden;
  text-overflow: ellipsis;
}



#menu-mobile{
  max-height: 55% ;
  margin: 2em 1em ;

}
nav.menu div:hover{
  background-color: #1a1a1a ;
}

nav.menu .notifications_menu{
  background-color: #801c00;
  animation-name: notif;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;


}

nav.menu .notifications_menu:hover{
  background-color : #1a0600 ;
}


div.sous-menu{
  position: relative;
}

div.sous-menu:hover div.deroule{
  display: block;
}


div.sous-menu div.deroule{
  display: none;
  position: absolute;
  left: 100% ;
  top:-2.4em ;
  border : 1px solid Gray  ;
  background-color: black ;
  z-index: 20 ;
  width: 20em ;
  white-space: nowrap;
  padding: 1em ;
}


div.deroule::after{
  content: '' ;
  background-color: black;
  border-bottom : 1px solid Gray ;
  border-right: 1px solid Gray ;
  transform: rotate(135deg);
  height: 1em ;
  width: 1em ;
  position: absolute;
  top: 3em ;
  left: -0.55em ;
}


span.notif{
  background-color: #C70039 ;
  border-radius: 0.5em ;
  color: white ;
  padding: 0.25em 0.5em  ;
  font-size: 0.8em ;
}


h1, h2, h3, h4,h5,h6{
  font-weight: 600 ;
  font-size: 1.3em ;
  color: #7c6eff ;
  margin: 0.5em 0 ;
  display: block;
}


.vert{
  background-color: #339961 ;
}


.vert2{
  background-color: #00664d !important ;
}

.bleu{
  background-color: Teal ;
}

.bleu2{
  background-color: #00b3b3 ;
}

.rouge{
  background-color: #c33c3c ;
}

.orange{
  background-color:#800000;
}

.orange2{
  background-color: DarkOrange ;
}



.violet{
  background-color: Purple ;
}


.rouge2{
  background-color: #660000;
}

.gris{
  background-color: #404040;
}

.gris2{
  background-color: #1a1a1a ;
}

.blanc{
  background-color: #a6a6a6 ;
}

.gris-fonce{
  background-color: #1a1a1a;

}

.fond-contraste{
background-color: black ;
}

strong{
  font-weight: 700 ;
}

.base-bouton{
  font-weight: 600;
  padding: 0.4em 0.6em ;
  border-radius: 0.3em ;
  font-size: 0.9em ;
  text-align: left;
  border : 0px solid transparent;
  color: white ;
}

button.base-bouton{ cursor: pointer ;}


.base-bouton2{
  font-weight: 600;
  padding: 0.8em ;
  font-size: 1.2em ;
  text-align: left;
  cursor: pointer ;
  border : 1px silver solid;
  margin : 0.2em ;
  border-radius: 0.3em ;
}


.lien_pseudo{
  font-weight: 600;
  padding: 0.2em 0.5em ;
  margin: 0.1em ;
  border-radius: 0.2em ;
  font-size: 1em ;
  color: Black ;
  white-space: nowrap;
}

.padding{
  padding : 0.5em ;
}

.base-bordure{
  border : 2px solid Gainsboro ;
}


.lien_pseudo img{
  height: 1.1em ;
  margin-bottom: 0.2em ;

}



div.padding-menu{
  padding: 0.8em 1em ;
}


img.logo{
  max-width: 100% ;
}

 #bouton-menu-mobile{
  display: none;
}



div.contenu-entete{
  /*background-color: #e2e1e1; */
}

div.login-entete{
  font-weight: 600 ;
  width: 100% ;
background-color: #333333;
  text-align: left;
  position: absolute;
  left: 0 ;
  bottom: 0 ;

}

div.login-entete-after{
  display: block;
  height: 0.2em ;
}

div.boutons-membre{
  padding: 1em 0.5em ;
  text-align: center;
}

div.pseudo-profil{
  font-weight: 600 ;
  color: white;
  text-align: left;
  font-size: 1.1em ;
  white-space: nowrap;

}
span.span-pseudo{
  padding: 0.5em ;
  max-width: 80% ;
  overflow: hidden;
  text-overflow: ellipsis;
}


div.avatar{
  height: 2.1em ;
  width: 2.1em ;
  margin-right: 0.1em ;
  background-color: #4d4d4d ;
  padding: 0.4em ;
  background-position: center center ;
  background-size: cover ;
}


.inline-block-middle{
  display: inline-block;
  vertical-align: middle;
}


.inline-block-top{
  display: inline-block;
  vertical-align: top;
}

.icone{
  height: 2em ;
  margin-top: -0.1em ;
  vertical-align: middle;
}

.miniat{
  height: 1.2em ;
  margin-top: -0.1em ;
  vertical-align: middle;
}

.effet-hover:hover{
  opacity: 0.6 ; 
}

.effet-hover2:hover{
  background-color: #262626 ;
  border-color: #737373 !important;
}

.ombre{
  -webkit-box-shadow: 2px 2px 5px -3px rgba(118,119,128,1);
  -moz-box-shadow: 2px 2px 5px -3px rgba(118,119,128,1);
  box-shadow: 2px 2px 5px -3px rgba(118,119,128,1);
}

.border-radius{
  border-radius: 0.3em ;
}

form{
  display: inline;
  margin: auto ;
}


input[type="text"],input[type="email"], input[type="number"],input[type="search"],input[type="password"],textarea, select{
  background-color: #595959 ;
  font-family: 'Open Sans', sans-serif;
  padding: 0.2em 0.5em ;
  font-size: 1.1em ;
  border: 2px solid #737373 ;
  border-radius: 0.3em ;
  box-sizing: border-box; 
  -webkit-appearance: none;
  color: white ;
}

input::placeholder, textarea::placeholder, select::placeholder{
color: whitesmoke ;
}

input[type="checkbox"]{
    -webkit-appearance: checkbox;

}

input[type="radio"]{
    -webkit-appearance: radio;

}
button{
  font-family: 'Open Sans', sans-serif;
-webkit-appearance: none;
}

input:focus, textarea:focus, button:focus{
 outline:  none;
}


input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }



.current:focus{
  border-color: MediumTurquoise ;
  background-color: LightCyan ;
}


.text-align-center{
  text-align: center;
}

.text-align-left{
  text-align: left;
}

.text-align-right{
  text-align: right;
}

.block-base1{
  text-align: left;
  padding: 1em  ;
  background-color: #262626 ;
  border-radius: 0.2em ;
  border: 1px solid black ;
}

.block-base2{
  background-color: black ;
  border : 1px solid #595959 ;
}


.block-base3{
  text-align: left;
  padding: 0.8em 0 ;
  border-top: 2px solid Silver ;
}


.small-font{
  font-size: 0.9em ;
}

.big-font{
  font-size: 1.3em ;
}

.texte-gris{
  color: Silver ;
}

.texte-blanc{
  color: white ;
}


.texte-rouge{
  color: #ff3300 ;
}

.texte-bleu{
  color: #0099ff ;
}


.texte-vert{
  color: #00cc00 ;
}

a{
  text-decoration: none;
  color: white ;
}

div.erreur, div.message-validation{
  color: Whitesmoke ;
  padding: 0.8em 1em ;
  font-weight: 600 ;
  text-align: left;
  white-space: normal;
  margin-left: -3em ;
  margin-right: -3em ;
}



div.erreur{
  background-color: IndianRed ;
}

div.message-validation{
  background-color: MediumSeaGreen  ;
}

img.mini-emoji{
  height: 1.3em ;
}


div.valid{
  text-align: right;
  margin-top: 2em ;
}

.espacement{
  margin-top: 2em ;
}

.espacement-bas{
  margin-bottom: 0.5em ;
}

.invisible{
  display: none;
}

footer{

  background-color: #1E1E1E ;
  margin: 0 0 0 22% ;
  display: block;
}

footer div{
  margin: auto;
  padding: 1em ;
  min-width: 90% ;
}

span.lien-footer{
  margin: 0.5em  ;
}

.licence{ color: DarkGray  ;
}



div.mini{
  background-color: White ;
  padding: 0.3em ;
  border-radius: 0.5em ;
  border : 1px solid Gainsboro;
  margin: 0.2em 0 ;
}


.bold{
  font-weight: 600 ;
}

.info{
  position: relative;
  cursor: pointer;

}

.info:hover{
  background-color: LightCyan ;
}

.info div.explication{
  position: absolute;
  top: 90% ;
  right: 0; 
  display: none;
  width: 10em ;
  background-color: whitesmoke ;
  padding: 0.5em ;
  white-space: normal;
  font-size: 0.75em ;
  border:1px solid Silver;
  text-align: left;
  border-radius: 0.5em ;
  z-index: 10 ;

}

.info:hover div.explication{
  display: block;
}


div.message-ab{
  position: relative;
  padding: 2.5em 1em ;
  margin: 1em 0.5em ;
}


div.message-ab div.img-ab{
  position: absolute;
  right: 0.8em ;
  top: -0.8em ;

}




div.titre-page{
  width: 22em ;
  max-width: 70% ;
  position: relative;
  padding: 0.5em 1em ;
  padding-right: 3em ;
  text-align: left;
  margin: 1em auto 3em auto ;
  border-radius: 0.3em ;
  font-size: 1.1em ;
  font-weight: 600 ;
  border: 1px solid Gainsboro;
}


div.titre-page img{
  position: absolute;
  right: 0.5em ;
  height: 2.5em ;
  top: -0.6em ;
}

nav.arbre{
  margin-bottom: 3em ;
  color: white;
  font-weight: 600;
  background-color: #262626;
  padding: 1.5em 2em ;
  margin-left: -3.2em ;
  margin-right: -3.3em ;
  border-bottom: 6px solid black ;
  white-space: nowrap;
  overflow: auto;
}

nav.arbre a{
  color: white ;
}

nav.arbre div.arbre-navigation{
  display: inline-block;
  vertical-align: middle;
  background-color: #666699 ;
  padding: 0.5em 1em ;
  position: relative;
  margin-right: 2em ;
  z-index: 1 ;

}

nav.arbre div .droite{
  position: absolute;
  left: 99.5% ;
  top: 0 ;
  height: 100% ;
  z-index: 0 ;

}

nav.arbre div .gauche{
  position: absolute;
  right: 99.5% ;
  top: 0 ;
  height: 100% ;
  z-index: 0 ;
}

span.alt{
  font-size: 0.8em ;
  vertical-align: middle;
  display: inline-block;
  padding: 0.2em 0.5em ;
  border-radius: 0.3em ;
  margin-top: -0.1em ;
  font-weight: 600 ;
}


div.type, button.type{
  display: inline-block;
  padding: 0.3em 0.5em ;
  width: 9em ;
  text-align: center;
  font-size: 0.8em ;
  font-weight: 600 ;
  color: white ;
  background-image: url('../images/fonds/fond-noir-25.png');
  background-size: 100% 50% ;
  background-position: bottom center;
  background-repeat: no-repeat;
  margin: 0.1em  ;
  text-transform: uppercase;
  border: 0px solid transparent;
  opacity: 0.9 ;
}


.infobulle{
  cursor: pointer;
  position: relative;
}

#load-infobulle{
position: absolute; 
z-index: 10 ;
}


#load-infobulle aside.infobulle-contenu{
  font-size: 12px ;
  color: white ;
  background-color: #4d4d4d ;
  border-radius: 0.5em ;
  padding: 6px ;
  font-weight: 600 ;
  width: 120px ;
  margin-bottom: 12px ;
  z-index: 10 ;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  white-space: normal;
  position: relative;
}

.infobulle aside.infobulle-contenu{
  display: none;
}


#load-infobulle aside.infobulle-contenu::after { 
 content: '';
 position: absolute;
 background-image: url('../images/utilitaires/after-infobulle.png');
 top : 97%;
 left: 0 ;
 width: 100% ;
 height: 15px ;
 background-position: center bottom;
 background-size: auto 100% ;
 background-repeat: no-repeat;
 margin-top: -2px ;
 z-index: 9 ;

}


#load-infobulle aside.infobulle-contenu:hover{ 
display: none;

}


header .recherche{
  width: 100% ;
  margin: 0 auto ;
}

.recherche{
  position: relative;
}

.recherche .resultat{
  position: absolute;
  left: 0 ;
  background-color: black;
  padding: 0.5em ;
  box-sizing: border-box;
  top: 100% ;
  display: none;
  width: 100% ;
  margin-top: 0.2em ;
  border : 1px solid Silver;
  text-align: left;
  z-index: 30 ;
  cursor: pointer;
}

.recherche .resultat div.liste-recherche{
  padding: 0.2em ;
  border: 1px solid ;
  border-color: transparent;
  white-space: nowrap;
  display: block;
  position: relative;
}


.recherche .resultat span{
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70% ; 
}


.recherche .resultat-fiche{
  font-size: 0.8em ;
}


div.filtre_pokemon{
  background-color: white ; margin-right: 0.5em;
  width: 10em ;
  white-space: nowrap;

}

div.filtre_pokemon span{
  text-overflow: ellipsis; 
  width: 75% ;
  overflow: hidden;

}

div.filtre_pokemon img{
  margin-top: -0.1em ;
}


@keyframes fondu {
  from {opacity: 0 ;}
  to {opacity: 1;}
}


@keyframes notif {
  from {background-color: #661600 ;}
  to {background-color: #660022;}
}





div.ads{
  background-color: #737373; 
  margin-bottom: 2em ;
  overflow: hidden;
}



#chargement{
min-height: 25em ;
}

@media only screen and (max-width: 900px), (max-height: 500px) {



div.lang{
position: fixed;
left: 0em ;
top: 0em ;
box-sizing: border-box;
padding-left: 0.5em ;
padding-top: 0.3em ;
z-index: 100 ;
font-size: 0.7em ;
z-index: 99 ;
height: 3em ;
width: 100% ;
overflow: hidden;
background-color: Dimgray ;
}

  header.ban{
    top: 0 ;
    bottom: auto ;
    left: 0 ;
    width: 100% ;
    height: auto ;
    border-right: 0px solid transparent ;
    padding: 0.2em 0 ;
  }

  #menu-mobile{
    display: none;
  }



  img.logo{
    display: inline-block;
    max-height: 5em ;
    max-width: 100% ;
  }

  div.padding-menu{
    padding: 0;
  }

  #bouton-menu-mobile{
    display: inline-block;
    vertical-align: middle;
    height: 2.5em ;
    margin-left: 0.5em ;
    cursor: pointer;
  }


  div.sous-menu:hover div.deroule{
    display: none;
  }

   div.contenu-entete{
    display: inline-block;
    vertical-align: middle;
    max-width: 25% ;
    overflow: hidden;
    padding: 0.3em ;
  }

  div.recherche{
    display: inline-block;
    vertical-align: middle;
    width: 45% ;
    padding: 0.2em ;
  }


.recherche .resultat{
font-size: 0.9em ;
}

  header.ban input{
    display: block;
    width: 100% ;
    box-sizing: border-box;
    border-radius: 0.5em ;
    padding: 0.5em 1em ;

  }

  nav.menu{
    margin-bottom: 6em ;
    font-size: 0.9em ;
  }




  div.login-entete{
    font-size: 0.9em ;
  }
  div.fond-pokeball{
    background-image: none;

  }

  main.cadre{
padding: 6em 0.5em 5em ;
    margin: 0  ;

  }

  nav.arbre{
    margin-top: 3em ;
    margin-bottom: 3em ;
    margin-left: 0;
    margin-right: 0 ;
    font-size: 0.7em ;
    border: 2px solid black ;

  }


  nav.arbre .texte-gris{
    display: block;
    margin-top: 1em ;
    white-space: normal;

  }


  .padding-pop{
    padding-right: 0 ;
  }


  div.pop-up div.message-pop-up{

    max-width: 80% ;
    max-height: 90% ;
  }



div.erreur, div.message-validation{
border-radius: 0.3em ;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1em ;
  margin-bottom: 1em ;
}



div.erreur{
  background-color: IndianRed ;
}

div.message-validation{
  background-color: MediumSeaGreen  ;
}


  footer{

    margin: 0  ;

  }

footer a{
display: block;
padding: 0.5em ;
}


.block-base1{
  padding: 0.6em  ;
}



}

  @media only screen and (min-width: 1600px) {

    html{
      font-size: 1.2em ;
    }

  }