@charset "utf-8";
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: #f3dbc6 url("../img/bg.svg") repeat;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure,
hr {
  display: block;
}
div,
header,
nav,
article,
section,
aside,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li,
figure,
figcaption,
img,
hr {
  margin: 0;
  padding: 0;
}
img,
object,
embed,
canvas,
video,
audio,
picture,
svg {
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
li {
  list-style: none;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}
a {
  text-decoration: none;
  outline: none;
}
hr {
  border-style: none;
}
main {
  position: relative;
}
section {
  padding: 20px 0;
}
svg {
  display: block;
}
.center {
  width: 90%;
  margin: 0 auto;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
}
.fancybox-bg {
  background-color: #000000;
}
.fancybox-infobar {
  color: #ffffff;
  background-color: #000000;
  font-size: 16px;
  border-radius: 0 0 10px 0;
}
.fancybox-button {
  background-color: #000000;
  color: #ffffff;
}
.fancybox-button--close {
  border-radius: 0 0 0 10px;
}
.fancybox-button--thumbs,
.fancybox-button--play,
.fancybox-button--arrow_left,
.fancybox-button--arrow_right,
.fancybox-button--zoom {
  display: none !important;
}
.fancybox-caption {
  font-size: 20px;
  top: auto;
  bottom: 0;
}
.fancybox-caption h2 span {
  background-color: #927d76;
  background-repeat: no-repeat;
  color: #ffffff;
}
.fancybox-caption h2 .appat {
  background-color: #00000000;
  background-image: url(../img/balls/appat.png);
}
.fancybox-caption h2 .bis {
  background-color: #00000000;
  background-image: url(../img/balls/bis.png);
}
.fancybox-caption h2 .chrono {
  background-color: #00000000;
  background-image: url(../img/balls/chrono.png);
}
.fancybox-caption h2 .copain {
  background-color: #00000000;
  background-image: url(../img/balls/copain.png);
}
.fancybox-caption h2 .envol {
  background-color: #00000000;
  background-image: url(../img/balls/envol.png);
}
.fancybox-caption h2 .faiblo {
  background-color: #00000000;
  background-image: url(../img/balls/faiblo.png);
}
.fancybox-caption h2 .filet {
  background-color: #00000000;
  background-image: url(../img/balls/filet.png);
}
.fancybox-caption h2 .gigamasse {
  background-color: #00000000;
  background-image: url(../img/balls/gigamasse.png);
}
.fancybox-caption h2 .honor {
  background-color: #00000000;
  background-image: url(../img/balls/honor.png);
}
.fancybox-caption h2 .hyper {
  background-color: #00000000;
  background-image: url(../img/balls/hyper.png);
}
.fancybox-caption h2 .hyper-h {
  background-color: #00000000;
  background-image: url(../img/balls/hyper-h.png);
}
.fancybox-caption h2 .love {
  background-color: #00000000;
  background-image: url(../img/balls/love.png);
}
.fancybox-caption h2 .lune {
  background-color: #00000000;
  background-image: url(../img/balls/lune.png);
}
.fancybox-caption h2 .luxe {
  background-color: #00000000;
  background-image: url(../img/balls/luxe.png);
}
.fancybox-caption h2 .masse {
  background-color: #00000000;
  background-image: url(../img/balls/masse.png);
}
.fancybox-caption h2 .masse-h {
  background-color: #00000000;
  background-image: url(../img/balls/masse-h.png);
}
.fancybox-caption h2 .master {
  background-color: #00000000;
  background-image: url(../img/balls/master.png);
}
.fancybox-caption h2 .megamasse {
  background-color: #00000000;
  background-image: url(../img/balls/megamasse.png);
}
.fancybox-caption h2 .niveau {
  background-color: #00000000;
  background-image: url(../img/balls/niveau.png);
}
.fancybox-caption h2 .parc {
  background-color: #00000000;
  background-image: url(../img/balls/parc.png);
}
.fancybox-caption h2 .plume {
  background-color: #00000000;
  background-image: url(../img/balls/plume.png);
}
.fancybox-caption h2 .poke {
  background-color: #00000000;
  background-image: url(../img/balls/poke.png);
}
.fancybox-caption h2 .poke-h {
  background-color: #00000000;
  background-image: url(../img/balls/poke-h.png);
}
.fancybox-caption h2 .propulse {
  background-color: #00000000;
  background-image: url(../img/balls/propulse.png);
}
.fancybox-caption h2 .rapide {
  background-color: #00000000;
  background-image: url(../img/balls/rapide.png);
}
.fancybox-caption h2 .reve {
  background-color: #00000000;
  background-image: url(../img/balls/reve.png);
}
.fancybox-caption h2 .safari {
  background-color: #00000000;
  background-image: url(../img/balls/safari.png);
}
.fancybox-caption h2 .scuba {
  background-color: #00000000;
  background-image: url(../img/balls/scuba.png);
}
.fancybox-caption h2 .soin {
  background-color: #00000000;
  background-image: url(../img/balls/soin.png);
}
.fancybox-caption h2 .sombre {
  background-color: #00000000;
  background-image: url(../img/balls/sombre.png);
}
.fancybox-caption h2 .speed {
  background-color: #00000000;
  background-image: url(../img/balls/speed.png);
}
.fancybox-caption h2 .super {
  background-color: #00000000;
  background-image: url(../img/balls/super.png);
}
.fancybox-caption h2 .super-h {
  background-color: #00000000;
  background-image: url(../img/balls/super-h.png);
}
.fancybox-caption h2 .ultra {
  background-color: #00000000;
  background-image: url(../img/balls/ultra.png);
}
.fancybox-caption span {
  border-radius: 5px;
  transition: 0.3s;
}
.fancybox-caption .go {
  background-color: #0c4da2;
}
.fancybox-caption .us {
  background-color: #ffab3c;
}
.fancybox-caption .epee {
  background-color: #019ee5;
}
.fancybox-caption .lpa {
  background-color: #93cc93;
}
.fancybox-caption .violet {
  background-color: #812096;
}
.fancybox-caption .lpza {
  background-color: #49df40;
}
.fancybox-caption a {
  background-color: #dbcf6b;
  border-radius: 5px;
  transition: 0.3s;
}
.fancybox-caption a:hover {
  text-decoration: none;
  background-color: #f0e477;
}
.loading {
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 0;
  padding-top: 20px;
  position: fixed;
  z-index: 99999;
}
.loading img {
  padding: 0;
  transform-origin: center;
  animation-duration: 7s;
  animation-name: loading_turn;
  animation-iteration-count: infinite;
}
@keyframes loading_turn {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.loading h2 {
  padding-bottom: 5px;
  padding-top: 25px;
  color: #ffffff;
}
.search {
  position: relative;
  background-color: #7E6C66;
  display: block;
  width: 100%;
  height: 30px;
  z-index: 1;
}
.btn-search {
  background: url(../img/icon-loupe.svg) center no-repeat #dbcf6b;
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  left: 40px;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 4px solid #afa152;
  border-radius: 0 0 2px 2px;
  transition: background-color 250ms ease-out;
}
.btn-search:hover {
  background: url(../img/icon-loupe.svg) center no-repeat #f0e477;
}
form {
  display: none;
  background: #927d76;
  padding: 20px 42px;
  text-align: center;
  position: relative;
  transition: background-color 500ms linear;
}
input {
  border: none;
  padding: 10px 0;
  background: none;
  color: #f3dbc6;
  outline: none;
  border-bottom: 1px solid #f3dbc6;
  width: 80%;
  font-size: 26px;
}
input::placeholder {
  color: #f3dbc6;
}
input::-webkit-search-cancel-button {
  display: none;
}
.ui-menu-item {
  position: inherit;
  background-color: #927d76;
  color: #f3dbc6;
  width: 200px;
  padding: 5px;
  z-index: 2;
}
.ui-menu-item:hover {
  background-color: #dbcf6b;
  color: #ffffff;
}
.ui-helper-hidden-accessible {
  display: none;
}
hr {
  border: 2px dashed #afa152;
  padding: 0 20px;
}
footer {
  background-color: #927d76;
  color: #f3dbc6;
  height: 50px;
  align-items: center;
}
footer a {
  color: #f3dbc6;
  text-decoration: underline;
}
footer .sociaux {
  margin-right: 10px;
  text-decoration: none;
  background-color: #f3dbc6;
  color: #927d76;
  padding: 5px;
  border-radius: 5px;
  transition: 0.3s;
}
footer .sociaux:hover {
  background-color: #f0e477;
}
.dex1g,
.dex2g,
.dex3g,
.dex4g,
.dex5g,
.dex6g,
.dex7g,
.dex8g,
.dex9g,
.zarbidex,
.formes,
.fails {
  text-align: center;
  height: 100%;
  width: 100%;
  margin-bottom: 20px;
}
.dex1g h2,
.dex2g h2,
.dex3g h2,
.dex4g h2,
.dex5g h2,
.dex6g h2,
.dex7g h2,
.dex8g h2,
.dex9g h2,
.zarbidex h2,
.formes h2,
.fails h2 {
  display: inline-block;
  padding: 10px 90px;
  margin: 30px 0;
  color: #ffffff;
  background-color: #f0e477;
  border: solid #dbcf6b 5px;
  box-shadow: 0 10px 5px -4px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  font-size: 32px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.dex1g .pokemon a,
.dex2g .pokemon a,
.dex3g .pokemon a,
.dex4g .pokemon a,
.dex5g .pokemon a,
.dex6g .pokemon a,
.dex7g .pokemon a,
.dex8g .pokemon a,
.dex9g .pokemon a,
.zarbidex .pokemon a,
.formes .pokemon a,
.fails .pokemon a {
  display: block;
  background-color: #927d76;
  box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: relative;
  margin: 8px;
  width: 80px;
  transition: 0.3s;
}
.dex1g .pokemon a:hover,
.dex2g .pokemon a:hover,
.dex3g .pokemon a:hover,
.dex4g .pokemon a:hover,
.dex5g .pokemon a:hover,
.dex6g .pokemon a:hover,
.dex7g .pokemon a:hover,
.dex8g .pokemon a:hover,
.dex9g .pokemon a:hover,
.zarbidex .pokemon a:hover,
.formes .pokemon a:hover,
.fails .pokemon a:hover {
  background-color: #7E6C66;
  transform: scale(1.1);
}
.dex1g .manquant,
.dex2g .manquant,
.dex3g .manquant,
.dex4g .manquant,
.dex5g .manquant,
.dex6g .manquant,
.dex7g .manquant,
.dex8g .manquant,
.dex9g .manquant,
.zarbidex .manquant,
.formes .manquant,
.fails .manquant {
  pointer-events: none;
}
.dex1g .manquant a,
.dex2g .manquant a,
.dex3g .manquant a,
.dex4g .manquant a,
.dex5g .manquant a,
.dex6g .manquant a,
.dex7g .manquant a,
.dex8g .manquant a,
.dex9g .manquant a,
.zarbidex .manquant a,
.formes .manquant a,
.fails .manquant a {
  background-color: #cfb8a5;
  border: solid #cfb8a5 5px;
}
.dex1g .manquant a img,
.dex2g .manquant a img,
.dex3g .manquant a img,
.dex4g .manquant a img,
.dex5g .manquant a img,
.dex6g .manquant a img,
.dex7g .manquant a img,
.dex8g .manquant a img,
.dex9g .manquant a img,
.zarbidex .manquant a img,
.formes .manquant a img,
.fails .manquant a img {
  filter: grayscale(100%);
}
@media screen and (max-width: 500px) {
  input {
    font-size: 17px;
  }
}
@media screen and (max-width: 380px) {
  .zarbidex h2,
  .formes h2 {
    padding: 10px 50px;
  }
  footer {
    height: 100px;
  }
}