@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);


/*------------------------------FOOTER----------------------------------*/

footer{
  margin-top: 5em;
  background-color: #333;
  font-size: 0.9em;
  color:#F1F1F1;
  text-transform: uppercase;
}

footer div.container{
  background-color: #333;
  border-bottom: none;
}

.copy{
  display: initial;
}

.logo-footer{
  margin-left: 3em;
}

#email{
  text-transform: lowercase;
}

#contact{
  margin-left: 3em;
}

/*----------------------------RELIQUAT---------------------------------*/
.contenu{box-shadow: 0px 0px 1em 1em rgba(0,0,0,0.25); border-radius: 1em;}

.all{margin-left: 5em;}

.ligne{display: inline-block;}

.deroul {
width: 100%;background-color: transparent;
appearance: unset;
    -moz-appearance: unset;
    -o-appearance: unset;
    -ms-appearance: unset;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    box-sizing: border-box;
    -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
    border:none;border-bottom: 0.12em solid #999;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    margin-bottom: 0em;
    margin-left: 0em;
    color: #999;
}

      

      table.reliquat tr td{text-align: center;border-collapse: collapse; padding: 0.5em;}
      table.reliquat{border-spacing: 0em;margin: auto; width: 100%;padding:2em;padding-left: 4em;}
      .contenu{width: 80%}
      table.reliquat tr td.left{border: 1px solid; border-color:  black transparent black black ; border-top-left-radius: 0.5em;border-bottom-left-radius: 0.5em;}
      table.reliquat tr td.right{border: 1px solid; border-color:  black black black transparent ; border-top-right-radius: 0.5em;border-bottom-right-radius: 0.5em;}
      table.reliquat tr td.top{border: 1px solid; border-color:  black transparent transparent transparent ;width: 3em;}
      table.reliquat tr td.middle{border: 1px solid; border-color: transparent black  transparent transparent ;}
      table.reliquat tr td.topright{border: 1px solid; border-color:  black black transparent transparent ; border-top-right-radius: 0.5em;}
      table.reliquat tr td.bottomright{border: 1px solid; border-color: transparent black black  transparent ; border-bottom-right-radius: 0.5em;}
      table.reliquat tr td.bottomright svg{fill :white;}
      table.reliquat tr td#totalreliquat{padding-left: 1em;width: 8em;font-size: 15px;}
      
      table.reliquat tr td#totalrune{padding-left: 1em;width: 8em;font-size: 15px;}
      

      .no{display: none;}

      input.plusline {opacity: 0; margin-left: -2em; width: 2em; cursor: pointer;}

      .espace{width: 2em;}

      table#reliquatprem{padding-bottom: 1em;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
      table#reliquatdeux{border-top-left-radius: 0;border-top-right-radius: 0;margin-top: -3em;border-top: transparent;}

.result{color: #F1F1F1; font-weight: bolder;}

#deb{border-right: solid 0.1em #666;}

.reliquat tr:hover {color: #F1F1F1;}  
.reliquat {text-align: center; border-spacing: 1em; border: solid 0.5em #640043; margin-left: 2em; background-color: #333;color: #F1F1F1;border-radius: 1em;}
.reliquat tr td.nombre {width: 3em;padding-left: 1em;}
.nbr{
width: 100%;background-color: transparent;
appearance: unset;
    -moz-appearance: unset;
    -webkit-appearance: unset;
    -o-appearance: unset;
    -ms-appearance: unset;
    outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    box-sizing: border-box;
    -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
    border:none;border-bottom: 0.12em solid #999;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0em;
    margin-left: 0em;
    color: #F1F1F1;
  }

  input.nbr:focus{
  border-bottom: 0.1em solid #2bb33e;
}

nav.navigation{margin-top: 0;}


#reliquatprempetit{display: none;}
#reliquatprem{display: table;}
#reliquatdeuxpetit{display: none;}
#reliquatdeux{display: table;}
div#deco, div#decobas{display: none;}


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

  .contenu, div#deco, div#decobas{display: inline-block;}
  .contenu{width: 45em;}

  table.reliquat{border-spacing: 0em;margin: auto; width: 45em;padding:2em;padding-left: 4em;}
  div#decobas{padding: 0;}
      ul.deco li {margin-top: 3em;}
      ul.deco li {margin-bottom: 3em;}
      ul.deco img{border-radius: 0.5em;}
      .deco{margin: 2em;}
      div#deco{padding: 0; }      

      #decobas{margin-left: -5em;
          margin-top: 1em;
          position: absolute;}
      #deco{margin-left: -3em;
          margin-top: 1em;
          position: absolute;}

}

@media only screen and (max-width: 714px) {

  #reliquatprempetit{display: table;}
  #reliquatdeuxpetit{display: table;border-top-left-radius: 0;border-top-right-radius: 0;margin-top: -5em;border-top: transparent;}
}
/*----------------------------SPECIAL PAGE---------------------------------*/

#forgemagie{padding: 1em;}
#forgemagie td{ padding: 0.5em;}

table.vrais-dofus, table.faux-dofus {display: none;}
table.petitscreen td{padding: 0.5em; width: 30%; }
table.petitscreen, table.craftpetitscreen {display: table; width: 90%;}
table.craftpetitscreen td{padding: 0.5em; width: 20%; }



@media only screen and (min-width: 1024px) {
  table.vrais-dofus, table.faux-dofus {display: table;}
  table.petitscreen, table.craftpetitscreen {display: none;}
}

td{text-align: center;border-collapse: collapse;}
table{border-spacing: 1em 0em;margin-right: 1em;}
td.haut {border: 1px solid;vertical-align: top;border-color:  #333  #333 transparent  #333;}
td.bas{border: 1px solid;vertical-align: top;border-color: transparent #333 #333 #333 ;}
td.milieu{border: 1px solid;vertical-align: middle;border-color: transparent #333;}

.vrais-dofus td{width: 15%; padding: 0.5em;}
.faux-dofus td{width: 14%; padding: 0.5em;}

ul{margin: 0;padding: 0;}

ul.menu{margin-top: 1em;}

#forgelave{
  margin: 0.35em;
}

.imgmetier:hover{
  filter: drop-shadow(-0px 0px 4px #999);
  transition: 0.1s;
}

.imgmetier{
  border-radius: 1em;
}

.titre-box{
  text-transform: uppercase;
  font-size: 1.1em;
  color: #333;
  font-weight: 400;
  margin-bottom: 0.5em;
}

.body-box{
  font-style: italic;
  margin-bottom: 0.2em;
}

.jour{width: 20%;}
      .bonus{width: 40%;}
      .lieu{width: 40%;}

.tabmetier{    
        margin-left: 2em;
        border: solid 0.2em #333;
        border-collapse: collapse;
        max-width: 50em;
    }

    .tabmetier tr td{
      padding: 0.5em;
      padding-left: 1em;
      padding-right: 1em;
      border-right: solid 0.1em #333;
    }

    .tetecol td {background-color: #666; color: white; font-weight: bolder;border-bottom: solid 0.2em #333;}

    .important {background-color: #FEEACD;}

.marge{margin-left: 5em;}

.quet{
  width: 80%;
  text-align: left;
  margin-left: 2em;
  }
  .titquet{
    vertical-align: middle;
    margin-top: 1em;
    margin-right: 1em;
  }
  .lienquet{
    vertical-align: middle;
    margin-top: 0.7em;
  }

  svg#liens{width: 2.5em;}

.tab-metier tr td#c1{background-color: #D9DBDA;}
    .tab-metier tr td#c2{background-color: #EEEEEE;}
    
    .tab-metier tr td{border: 1px solid #333;padding: 0.5em;text-align: center; width: 10%;}
  .tab-metier{border-collapse: collapse;border: 2px solid black;color: #444;width: 80%;}
  .tab-metier tr td.tete-tab{border-color: #333 #333 black #333 ; border-width: 1px 1px 2px 1px; color: white;font-weight: bolder;background-color: #555;}
  .tab-metier tr:hover {color: white;}  
  .tab-metier tr:hover td#c1 {background-color: #999;} 
  .tab-metier tr:hover td#c2 {background-color: #999;} 
  .lien-page{margin: auto; box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0,0.5);}
  ul#boutton{padding: 0; margin-left: 10%;}
  .titre-boutton{text-align: center;
    width: 90%;}

    .lien-page:hover .titre-icon svg{fill: #999;}
    .lien-page:hover .titre-boutton{color: #999;text-align: center;
    width: 90%;}
    .img:hover{
    filter: drop-shadow(-10px 10px 4px #666);
    transition: 0.3s;
  }

  .titre-img{position: relative; top: -2.1em; font-weight: bolder;color: transparent;}

  .metier{width: 7em; display: inline-block; text-align: center;margin-right: 2em;  }
  .metier img{border-radius: 1em;}

  .metier:hover .titre-img{color: white; filter: drop-shadow(-1px 1px 2px #333); transition: 0.3s;}
  .metier img:hover { box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0,0.5);transition: 0.3s;}

  .liste{
    list-style: initial;
    margin: 1em;
    margin-left: 3em;
  }

  ul#fleche.liste li::before {content: "\2713"; color: #46CE01;margin-left: -1.1em;margin-right: 0.5em;}

  ul#fleche.liste {list-style: none;}

/*-------------------------------NOS SERVICES------------------------------*/

[aria-label]:hover:after,
[aria-label]:focus:after {
  content: "▲";
  position: absolute;
  bottom: -1em;
  left: 50%;
  transform: translateX(-50%); 
  font-size: 20px;
  color: #333;
  font-size: 1em;
}

.lieumetier:hover:before,
.lieumetier:focus:before {
  content: attr(aria-label);  
  position: absolute;
  bottom: -2.4em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1; 
  white-space: nowrap;  
  padding-right: 1em;
  padding-left: 1em;
  border-radius: 4px;
  font-size: 0.9em;
  background: #333;
  color: #999;
}

.lieumetier:hover{
  filter: drop-shadow(-0.2em 0.2em 0.3em rgba(0,0,0,0.5));
  transition: 0.3s;
  position: relative;
}


.titre:after{
  width: 80px;
  height: 1px;
  background: #46CE01;
  content: ' ';
  display: block;
  margin-top: 0.5em;
}

.titre{
  margin-top: 2em;
  color:#666;
  font-size: 1.2em;font-weight: initial;
}


.box{
  margin-top: 2em;
  display: inline-block;
  width: 45%;
  text-align: center;
   border: 1px solid #333;
   padding: 0.2em;
   padding-bottom: 0.5em;
   margin-right: 0.5em;
}


.lien-page{
  fill: #46CE01;
  background-color: #666;
  padding: 0.1em;
  border-radius: 3em;
}

.lien-page:hover{
  fill: #999;
  background-color: #333;
  padding: 0.5em;
  border-radius: 1em;
  box-shadow: -1px 1px, -2px 2px, -3px 3px, -2px 2px;
      transform: translate3d(1px, -1px, 0);
      color:  #666;
      transition: 0.3s;
}

.titre-box{
  text-transform: uppercase;
  font-size: 1.1em;
  color: #333;
  font-weight: 400;
  margin-bottom: 0.5em;
}

.body-box{
  font-style: italic;
  margin-bottom: 0.2em;
}


/*-------------------------------BARRE 1-----------------------------------*/

a.boutton:hover svg { fill: #666; }
a.boutton:hover #user { border: 2px solid  #666; }

@media only screen and (min-width: 780px) {
  div#deco table{border-spacing: 2em;margin: auto;}

  .logo-titre:after{
  width: 80px;
  height: 1px;
  background: #46CE01;
  content: ' ';
  display: block;
  margin-left: 0em;
  margin-top: 0.5em;
  }

  .presentation {
  text-align: justify;
  }

}

.logo-titre{
  color:#FFFFFF;
  font-size: 1.2em;font-weight: initial;
}

.logo-titre:after{
  width: 80px;
  height: 1px;
  background: #46CE01;
  content: ' ';
  display: block;
  margin-top: 0.5em;
}


#user{
  border: 2px solid  #46CE01;
  padding-right: 0.3em;
  padding-left: 0.3em;
  border-radius: 3em;
  margin-right: 0.2em;

}

.container {
  background-color: #444;
  padding: 1em;
  display: flex;
  margin: 0em;
  margin-top: 0px;
  border-bottom: 2px solid BLACK;
}

.push-right {
  margin-left: auto;
    margin-top: 0.5em;
}

.item {
  padding: 0px;
}


a.boutton {
  text-decoration: none;
  color: black;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #666;
  padding: 0.5em;
  margin-right: 1em;
  box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0,0.25);
  font-size: 0.8em;
}


a.boutton:hover{
  background-color:#D4D4D4;
  box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px;
      transform: translate3d(4px, -4px, 0);
      color:  #666;
      transition: 0.5s;
}


.presentation{
  margin-left: 0em;
  width: 50%;
  color:#DCDCDC;
}

.presentation h2{
  color: #FFFFFF;
}

/*-----------------------HEADER--------------------------*/

header{
  margin-right: 0px;
  margin-left: 0px;
  width: 100%;
  background: url(img/4244782.jpg) no-repeat ; background-size : cover;
  padding-bottom: 2em;
  padding-top: 1.8em;
  text-align: right;
}

.logo{
  margin: 1em;
  margin-right :2em;
}