/*---------------------------------------------------CSS de base modifié---------------------------------------------------*/

/*---Couleurs du site---*/
/*

Bleu foncé (16,76,167) #104CA7
Bleu clair (16,125,230) #107DE6
Bleu pâle (227,240,250) #E3F0FA
Blanc (250,250,250) #FAFAFA

*/


body{
    margin:0px;
    padding:0px;
    background: #104CA7 url(../../images/Site/Fond.webp) no-repeat top center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: cover;
}

@font-face {
  font-family: "Bebas neue";
  src: url(../../Fonts/Site/BebasNeue-Regular.ttf);
}

h1, h2, h3, h4, p, a, li, th, tr, td, span{
    margin: 0px;
    padding: 0px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

h1{
    font-size: 30px;
}

h2{
    font-size: 23px;
    margin: 50px 0px 20px 0px;
    padding-bottom: 5px;
    border-bottom: 2px solid #104CA7;
}

h3{
    margin: 30px 0px 20px 0px;
}

p{
    text-align: justify;
}

a{
    color: #104CA7;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

iframe{
    border: none;
    display: block;
}

table{
    border-collapse: collapse;
}

th{
    height:30px;
    margin-right: 5px;
    line-height: 30px;
    background-color: #104CA7;
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
    border: 2px solid #104CA7;
}

table>tbody>tr>td:first-child{
    border-left: 2px solid #104CA7;
}

table>tbody>tr>td:last-child{
    border-right: 2px solid #104CA7;
}

table>tbody>tr:last-child>td{
    border-bottom: 2px solid #104CA7;
}

table>tbody>tr:nth-child(1n+2)>td{
    border-top: 2px solid #104ca74d;
}

table>tbody>tr>td:nth-child(1n+2){
    border-left: 2px solid #104ca74d;
}


table tbody>tr>td{
    padding: 10px;
    border: 1px solid #104ca74d;
}

table tbody>tr>td>img{
    max-width: 100%;
    display: block;
    margin : 0px auto 0px auto;
}

table tbody>tr>td>a>img{
    max-width: 100%;
    display: block;
    margin : 0px auto 0px auto;

}

table>tbody>tr:nth-child(even) {
    background: #E3F0FA;
}

table>tbody>tr:nth-child(odd) {
    background: #FAFAFA;
}

th, td, tr{
    text-align: center;
}

ul{
    padding-left: 30px;
    margin: 20px 0px 20px 0px;
}

ul>li{
    margin-top: 4px;
}

button, a:hover{
    cursor: pointer;
}

button{
    border: none;
    background-color: #FAFAFA;
    font-weight: bold;
}



/*---------------------------------------------------Passe partout---------------------------------------------------*/



.FondBlanc{
    background-color: #FAFAFA;
}

.FondBleuPale{
    background-color: #E3F0FA;
}

.Displayed{
    display: block !important;
}

.Grided{
    display: grid !important;
}

.Hidden{
    display: none !important;
}

.Clear{
    clear: both;
}

.BoutonRemonter {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 3%;
    right: 5%;
    z-index: 99;
    border:  none;
    outline: none;
    background-color: #104CA7;
    cursor: pointer;
    padding: 2px 0px 0px 0px;
    color: white;
    font-size: 25px;
    border-radius: 3px;
    display: none;
}

.BoutonRemonter:hover {
    background-color: #107DE6;
}

.BoutonRemonter>img {
    margin-top: 5px;
    width: 32px;
}
}


.Overflow{
    overflow: auto;
}

.InformationsSite{}

.InformationsSite>h1{
    text-align: center;
}

.InformationsSite>div{
    width: 100%;
    font-size: 0;
}

.InformationsSite>div>div{
    width: 49%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
}

.InformationsSite>div>div:nth-child(0n+1){
    margin-right: 1%;
}

.InformationsSite>div>div:nth-child(0n+2){
    margin-left: 1%;
}

.InformationsSite>div>div>a>img{
    width: 100%;
    display: block;
}

.InformationsSite>div>div>p{
    font-size: 16px;
}



/*---------------------------------------------------Erreur 404, 403, etc.---------------------------------------------------*/

.Erreur{
    width: 100%;
    text-align: center;
}

.Erreur>h1{
    font-size: 27px;
    margin-bottom: 50px;
}

.Erreur>p{
    text-align: center;
    margin-bottom: 30px;
}



/*---------------------------------------------------Boutons d'action (éditer actualité, voir actualité, etc.)---------------------------------------------------*/

.BoutonAction{
    display: inline-block;
    padding: 11px;
    width: 35px;
    height: 35px;
    margin: 0px 2px 0px 2px;
    font-size: 13px;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    background-color: #104CA7;
    box-sizing: border-box;
}

.BoutonAction:hover{
    background-color: #107DE6;
}

.BoutonAction>i{
    max-width: 13px;
    max-height: 13px;
}


/*---------------------------------------------------Emplacement du Logo---------------------------------------------------*/

.EnteteLogo{
    display: block;
    margin: 0px auto 0px auto;
    padding: 50px 15px 50px 15px;
    font-size: 0;
    text-align: center;
    max-width: 1200px;
}

@media screen and (max-width: 900px) {
  .EnteteLogo{
        display: none;
  }
}

.EnteteLogo>a{
    max-width: 100%;
    max-height: 230px;
    padding: 0px;
}

.EnteteLogo>a>img{
    max-width: 60%;
}



/*---------------------------------------------------Menu Principal---------------------------------------------------*/

.MenuPrincipal{
    font-size: 0;
    max-width: 1200px;
    padding: 0px 20px 0px 20px;
    display: block;
    height: 60px;
    margin: 0px auto 0px auto;
    background-color: rgba(16,76,167,0.9);
    box-shadow: 3px 0px 0px rgba(0,0,0,0.10), -3px 0px 0px rgba(0,0,0,0.10);
    border-radius: 5px 5px 0px 0px;
    text-align: center;
}

@media screen and (max-width: 900px) {
  .MenuPrincipal{
        display: none;
  }
}

.MenuPrincipal>a{
    font-size: 17px;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    color: white;
    height: 60px;
    box-sizing: border-box;
    padding: 10px 20px 10px 20px;
    font-size: 21px;
    display: inline-block;
    font-weight: 800;
    vertical-align: middle;
    line-height: 2;
}

.MenuPrincipal>a:hover{
    background-color: #107DE6;
    text-decoration: none;
}

.MenuPrincipalActif{
    background-color: #107DE6;
}


/*---------------------------------------------------Menus pour la partie mobile---------------------------------------------------*/

.MenuPrincipalMobile{
    display: none;
}

.SousMenuPrincipalMobile{
    display: none;
}

.SousMenuRechercheMobile{
    display: none;
}


@media screen and (max-width: 900px) {
  /*-----Menu principal mobile-----*/
  .MenuPrincipalMobile{
      display: block;
      position: sticky;
      padding-top: 5px;
      top: 0px;
      width: 100%;
      height: 60px;
      background-color: #104CA7;
      z-index: 1000;
      font-size: 0;
      box-sizing: border-box;
  }

  .MenuPrincipalMobileDescendu{
      box-shadow: 0px 4px 6px rgb(17 17 17 / 45%);
  }

  .MenuPrincipalMobile>div{
      width: 33.333333333%;
      display: inline-block;
      box-sizing: border-box;
  }


  .MenuPrincipalMobile>div>a{
      display: inline-block;
      vertical-align: middle;
  }

  .MenuPrincipalMobile>div>a>i{
      font-size: 22px;
      color: white;
  }

  .MenuPrincipalMobile>div>a>img{
      height: 32px;
      display: block;
      padding: 7px 0 7px 0;
  }


  .MenuPrincipalMobile>div:nth-child(0n+1){
      text-align: left;
      padding-left: 15px;
  }

  .MenuPrincipalMobile>div:nth-child(0n+2){
      text-align: center;
  }

  .MenuPrincipalMobile>div:nth-child(0n+3){
      text-align: right;
      padding-right: 15px;
  }

  /*-----Sous menu principal mobile-----*/
  .SousMenuPrincipalMobile{
      width:100%;
      height: 100%;
      background-color: rgba(16,76,167,0.7);
      position: fixed;
      z-index: 2000;
      top: 0px;
      left: 0px;
      display: none;
  }

  .SousMenuPrincipalMobile>div{
      width: 65%;
      height: 100%;
      background-color: #107DE6;
  }

  .SousMenuPrincipalMobile>div>ul{
      margin: 0px;
      padding: 0px;
      list-style-type: none;
  }

  .SousMenuPrincipalMobile>div>ul>a>li{
      height: 50px;
      padding: 7px;
      padding: 7px 15px 7px 15px;
      color: white;
      font-size: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #104CA7;
      line-height: 1.8;
  }

  .SousMenuPrincipalMobile>div>ul>a>li>img{
      padding-top: 5px;
      height: 32px;
  }

  .SousMenuPrincipalMobile>div>ul>a:nth-child(0n+1)>li{
      height: 60px;
      font-size: 25px;
      padding-left: 17px;
  }

  .SousMenuPrincipalMobile>div>ul>a>li:nth-child(0n+1)>i{
      padding-top: 10px;
  }

  .SousMenuPrincipalMobile>div>ul>a{
      text-decoration: none;
  }

  .SousMenuPrincipalMobile>div>ul>a:active{
      background-color: red;
  }

  /*-----Recherche mobile-----*/
  .SousMenuRechercheMobile{
      width:100%;
      height: 100%;
      background-color: rgba(16,76,167,0.7);
      position: fixed;
      z-index: 2000;
      top: 0px;
      left: 0px;
      display: none;
  }

  .SousMenuRechercheMobile>div{
      width: 100%;
      background-color: #107DE6;
  }

  .SousMenuRechercheMobile>div>ul{
      margin: 0px;
      padding: 0px;
      list-style-type: none;
  }

  .SousMenuRechercheMobile>div>ul>a{
      text-decoration: none;
  }


  .SousMenuRechercheMobile>div>ul>a>li, .SousMenuRechercheMobile>div>ul>li{
      height: 56px;
      padding: 10px;
      box-sizing: border-box;
      text-align: right;
      border-bottom: 1px solid #104CA7;
  }


  .SousMenuRechercheMobile>div>ul>a>li:nth-child(0n+1){
      height: 60px;
      font-size: 25px;
      padding-right: 17px;
      padding-bottom: 20px;
      color: white;
  }

  .SousMenuRechercheMobile>div>ul>a>li:nth-child(0n+1)>i{
      display: block;
      margin-top: 6px;
  }


  .SousMenuRechercheMobile>div>ul>li{
      margin-top: 0px;
  }

  .SousMenuRechercheMobile>div>ul>a>li{
      padding-right: 15px;
      line-height: 2.4;
      color: white;
      font-size: 22px;
  }

  .SousMenuRechercheMobile>div>ul>li>form{
      box-sizing: border-box;
      font-size: 0;
      vertical-align: top;
  }

  .SousMenuRechercheMobile>div>ul>li>form>button{
      height: 36px;
      width: 9%;
      border: none;
      color: white;
      background-color: #104CA7;
  }

  .SousMenuRechercheMobile>div>ul>li>form>button::-webkit-search-cancel-button {
      display: none;
  }

  .SousMenuRechercheMobile>div>ul>li>form>input{
      height: 36px;
      width: 90%;
      margin-right: 1%;
      box-sizing: border-box;
      border: none;
      padding: 0px 0px 0px 10px;
      border: 3px solid #FAFAFA;
  }

  .SousMenuRechercheMobile>div>ul>li>form>input:active{
      outline: none;
  }

  .SousMenuRechercheMobile>div>ul>li>form>input:focus{
      outline: none;
      border: 3px solid #104CA7;
  }
}

/*---------------------------------------------------Sous menu principal---------------------------------------------------*/

.MobilePresentationJeux{
    width: 100%;
    font-size: 0px;
}

.MobilePresentationJeux>a{
    width: 49%;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid #104CA7;
}

.MobilePresentationJeux>a:nth-child(2n+1){
    margin-right: 1%;
}

.MobilePresentationJeux>a:nth-child(2n+2){
    margin-left: 1%;
}

.MobilePresentationJeux>a:nth-child(1n+3){
    margin-top: 15px;
}

.MobilePresentationJeux>a>img{
    width: 100%;
}



/*---------------------------------------------------Page des jeux principaux et dérivés ---------------------------------------------------*/

.JeuxPrincipauxDerives{
    width: 100%;
}

.JeuxPrincipauxDerives>h1{
    text-align: center;
}


.PageJeux{
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1%;
    grid-row-gap: 15px;
}

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

    .PageJeux{
        grid-template-columns: repeat(3, 1fr);

    }
  
  }

.ChoixPrincipal{
    padding: 0px;
    border-radius: 0px;
    border: 3px solid #104CA7;
    opacity: 1;
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    
}

.ChoixPrincipal:hover .ChoixPrincipalOverlay{
    opacity: 1;
}

.ChoixPrincipal a{
    padding: 0;
}

.ChoixPrincipal a>img{
    width:100%;
    display: block;
    border-radius: 0px;
}

.ChoixPrincipalOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(255,255,255,0.5);
    border-radius: 0px;
}

.ChoixPrincipalOverlay img{
    max-width: 95%;
    max-height: 95%;
    white-space: nowrap;
    color: white;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}



/*---------------------------------------------------Contenu du site (tout le contenu d'une page)---------------------------------------------------*/

.ContenuPage{
    max-width: 1200px;
    min-height: 500px;
    padding: 20px 20px 20px 20px;
    margin: 0px auto 0px auto;
    
    background-color: #FAFAFA;
    box-shadow: 3px 0px 0px rgba(0,0,0,0.10), -3px 0px 0px rgba(0,0,0,0.10);
}

.FondParties{
    background-color: #E3F0FA;
    display: flex;
}

.FondPartieGaucheActualite{
    
}

.PartieGauche{
    
    width: 75%;
    padding-left: 0px;
    padding-right: 20px;
    box-sizing: border-box;
    background-color: #FAFAFA;
}

.PartieDroite{
    width: 25%;
    box-sizing: border-box;
}

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

  .PartieGauche{
      float: none;
      width: 100%;
      padding-right: 0px;
  }

  .PartieDroite{
      display: none;
  }

}


/*---------------------------------------------------Pied du site/Infos---------------------------------------------------*/

.PiedInfos{
    font-size: 0;
    color: white;
    background-color: rgba(16,76,167,0.9);
    max-width: 1200px;
    box-shadow: 3px 0px 0px rgba(0,0,0,0.10), -3px 0px 0px rgba(0,0,0,0.10);
    margin: 0px auto 50px auto;
    padding: 20px;
    border-radius: 0px 0px 5px 5px;
    text-align: center;
}

.PiedInfos>div:nth-child(0n+1){
    padding-bottom: 20px;
    border-bottom: 2px solid #107DE6;
}

.PiedInfos>div:nth-child(0n+1)>a:nth-child(0n+1){
    display: block;
    padding-bottom: 20px;
}

.PiedInfos>div:nth-child(0n+1)>a{
    display: inline-block;
}

.PiedInfos>div:nth-child(0n+2){
    padding-top: 20px;
}

.PiedInfos>div{
    width: 100%;
}

.PiedInfos>div>a{
    max-width: 100%;
    padding: 0px;
}

.PiedInfos>div>a>img{
    max-width: 25%;
    display: block;
    margin: 0px auto 0px auto;
}

.PiedInfos>div>p{
    font-size: 16px;
    text-align: center;
    color: rgb(170,170,170);
    padding: 0px;
}

.PiedInfos>div>p:nth-child(0n+1){
    margin-bottom: 10px;
}

.PiedInfos>div>p>a{
    color: white;
}

.PiedInfos>div>p>a:hover{
    color: white;
}

@media screen and (max-width: 900px) {
  .PiedInfos{
      background-color: rgba(16,76,167,1);
      max-width: 1140px;
      box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 10%) inset, 0px 1px 4px 0px rgb(0 0 0 / 10%);
      margin: 0px auto 0px auto;
      padding: 20px 15px 20px 15px;
      border-radius: 0px;
  }

  .PiedInfos>div:nth-child(0n+1){
      padding-bottom: 0px;
      border-bottom: none;
  }

  .PiedInfos>div:nth-child(0n+1)>a:nth-child(0n+1){
      padding-bottom: 0px;
  }

  .PiedInfos>div:nth-child(0n+2){
      display: none;
  }

  .PiedInfos>div>a>img{
      display: none;
  }
}

.BarreRS{
    width: 100%;
    margin-bottom: 20px;
}

.BarreRS>a{
    padding: 0px 5px 0px 5px;
}

.BarreRS>a>img{
    width: 35px;
    
}

.BarreRS>a>i:hover{
    color: #107DE6;
}


/*---------------------------------------------------Accueil - Titre principal et Barre de Recherche---------------------------------------------------*/

.TitreRechercheAccueil{
    width: 100%;
    display: block;
    margin-bottom: 25px;
    font-size: 0;
}

.TitreRechercheAccueil>h1{
    height: 33px;
    font-size: 27px;
    line-height: 1.8;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    text-align: left;
}

.TitreRechercheAccueil>form{
    vertical-align: top;
    text-align: right;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
}

.TitreRechercheAccueil>form>input{
    width: 50%;
    height: 35px;
    padding: 0px 10px 0px 10px;
    border-radius: 0px;
    border-top: 1px solid #104CA7;
    border-right: none;
    border-bottom: 1px solid #104CA7;
    border-left: 1px solid #104CA7;
    box-sizing: border-box;
}

.TitreRechercheAccueil>form>input:focus{
    outline: none;
    border-top: 1px solid #107DE6;
    border-right: none;
    border-bottom: 1px solid #107DE6;
    border-left: 1px solid #107DE6;
}

.TitreRechercheAccueil>form>input::-webkit-search-cancel-button {
    display: none;
}

.TitreRechercheAccueil>form>button{
    width: 35px;
    height: 35px;
    vertical-align: bottom;
    background-color: #104CA7;
}

.TitreRechercheAccueil>form>button:hover{
    background-color: #107DE6;
}

.TitreRechercheAccueil>form>button>img{
    max-width: 25px;
    display: block;
}

@media screen and (max-width: 900px) {
  .TitreRechercheAccueil{
      margin-bottom: 20px;
  }

  .TitreRechercheAccueil>h1{
      font-size: 30px;
      vertical-align: top;
      width: 100%;
      text-align: center;
  }

  .TitreRechercheAccueil>form{
      display: none;
  }
}


/*---------------------------------------------------Affichages des actualités (accueil, recherche et toutes)---------------------------------------------------*/


.Actualites{
    width: 100%;
    font-size: 0px;
    display: grid;
}

.ActualitesGrandes{
    grid-template-columns: repeat(2, 49%);
    grid-column-gap: 2%;
    margin-bottom: 20px;
}

.ActualitesPetites{
    grid-template-columns: repeat(3, 32%);
    grid-column-gap: 2%;
    grid-row-gap: 20px;
}

.Actualites>div{
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-color: #E3F0FA;
}

.Actualites>div:hover{
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease-in-out;
}

.Actualites a{
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

.Actualites a:hover{
    text-decoration: none;
    color: white;
}

.Actualites>div>div:nth-child(0n+1){
    position: relative;
}

.Actualites>div>div:nth-child(0n+1)>a{
    width:100%;
}

.Actualites>div>div:nth-child(0n+1)>a:hover img{
    filter: brightness(105%) grayscale(0%);
}

.Actualites>div>div:nth-child(0n+1)>a img{
    width: 100%;
    aspect-ratio: 28 / 13;
    filter: brightness(100%) grayscale(10%);
}

.Actualites>div>div:nth-child(0n+1)>a>div{
    padding: 7px;
    border-right: 1px solid #107DE6;
    border-left: 1px solid #107DE6;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(16,125,230,0.85);
}

.Actualites>div>div:nth-child(0n+1)>a>div>h2{
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    border-bottom: none;
}

.Actualites>div>div:nth-child(0n+2){
    text-align: right;
    padding: 5px;
    border-right: 1px solid #107DE6;
    border-bottom: 1px solid #107DE6;
    border-left: 1px solid #107DE6;
}

.Actualites>div>div:nth-child(0n+2)>span{
    font-size: 13px;

}

.Actualites>div>div:nth-child(0n+2)>span>a{
    color : #104CA7;
    text-shadow: none;
    text-decoration: none;
}

@media screen and (max-width: 900px) {
    .ActualitesGrandes{
        grid-template-columns: repeat(1, 100%);
        grid-column-gap: 2%;
        grid-row-gap: 20px;
        margin-bottom: 20px;
    }
    
    .ActualitesPetites{
        grid-template-columns: repeat(1, 100%);
        grid-column-gap: 2%;
        grid-row-gap: 20px;
    }
}


/*---------------------------------------------------Page d'une actualité---------------------------------------------------*/

/*-----Entete avec l'image et la date de parution-----*/

.ActualiteEntete{
    width: 100%;
}

.ActualiteEntete>p{
    width: 100%;
    text-align: right;
    margin: 10px 0px 30px 0px;
}

@media screen and (max-width: 900px) {
  .ActualiteEntete>p{
      font-size: 12px;
  }
}

.ActualiteEntete>a{
    width: 40px;
    height: 40px;
    display: block;
    margin: 0px auto 30px auto;
}

.ActualiteEntete>a>button{
    width: 40px;
    height: 40px;
    padding: 0px;
    margin: 0px;
}

.ActualiteEntete>a>button{
    background-color: #104CA7;
    padding: 6px 7px 8px 7px;
    font-size: 26px;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

.ActualiteEntete>a>button:hover{
    background-color: #107DE6;
}

.ActualiteEntete>a>button>i{}

.ActualiteEntete>div{
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.ActualiteEntete>div>img{
    width: 100%;
    aspect-ratio: 28 / 13;
    display: block;
}

.ActualiteEntete>div>div{
    width: 100%;
    position: absolute;
    bottom: 0%;
    padding: 30px 0px 30px 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    background-color: rgba(16,125,230,0.85);
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

@media screen and (max-width: 900px) {
  .ActualiteEntete>div>div{
      height: 100%;
      padding: 0px 5px 0px 5px;
      box-sizing: border-box;
      display: table;
  }

  .ActualiteEntete>div>div>h1{
      display: table-cell;
      vertical-align: middle;
      font-size: 25px;
  }

}

/*-----Côté gauche contenu d'une actualité, boutons partager et Disqus-----*/

.ActualiteContenu{}

.ActualiteBoutonsPartager{
    width:100%;
    display: block;
    margin: 40px 0px 40px 0px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0px
}

.ActualiteBoutonsPartager>a{}

.ActualiteBoutonsPartager>a:hover{
    text-decoration: none;
}

.ActualiteBoutonsPartager>a>button{
    width: 40px;
    height: 40px;
    padding: 6px 7px 8px 7px;
    color: white;
    font-size: 26px;
    box-sizing: border-box;
    margin: 0px 5px 0px 5px;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

.ActualiteBoutonsPartager>a:first-child>button{
    background-color: rgb(85,172,238);
}

.ActualiteBoutonsPartager>a:first-child>button:hover{
    background-color: rgb(111,185,255);
}

.ActualiteBoutonsPartager>a:last-child>button{
    background-color: rgb(59,89,152);
}

.ActualiteBoutonsPartager>a:last-child>button:hover{
    background-color: rgb(94,123,183);
}

.ActualiteBoutonsPartager>a>button>img{
    width: 100%;
}

/*-----Côté droit dernières actualités-----*/

.ActualiteDerniere{
    padding: 20px;
    box-sizing: border-box;
}

.ActualiteDerniere>h2{
    text-align: center;
    font-size: 23px;
    margin: 0px;
    padding-bottom: 15px;
    border-bottom: none;
}

.ActualiteDerniere{
    width: 100%;
    font-size: 0px;
}

.ActualiteDerniere>div{
    width: 100%;
    box-sizing: border-box;
    display: block;
    vertical-align: top;
    margin: 0px 0px 25px 0px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-color: #E3F0FA;
    box-sizing: border-box;
}

.ActualiteDerniere>div:last-child{
    margin: 0px;
}

.ActualiteDerniere>div:hover{
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease-in-out;
}

.ActualiteDerniere a{
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

.ActualiteDerniere a:hover{
    text-decoration: none;
    color: white;
}

.ActualiteDerniere>div>div:nth-child(0n+1){
    position: relative;
}

.ActualiteDerniere>div>div:nth-child(0n+1)>a{
    width:100%;
}

.ActualiteDerniere>div>div:nth-child(0n+1)>a:hover img{
    filter: brightness(105%) grayscale(0%);
}

.ActualiteDerniere>div>div:nth-child(0n+1)>a img{
    width:100%;
    filter: brightness(100%) grayscale(10%);
}

.ActualiteDerniere>div>div:nth-child(0n+1)>a>div{
    padding: 7px;
    border-right: 1px solid #107DE6;
    border-left: 1px solid #107DE6;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(16,125,230,0.85);
}

.ActualiteDerniere>div>div:nth-child(0n+1)>a>div>h2{
    font-size: 17px;
    margin: 0px 0px 0px 0px;
    border-bottom: none;
}

.ActualiteDerniere>div>div:nth-child(0n+2){
    text-align: right;
    padding: 5px;
    border-right: 1px solid #107DE6;
    border-bottom: 1px solid #107DE6;
    border-left: 1px solid #107DE6;
}

.ActualiteDerniere>div>div:nth-child(0n+2)>span{
    font-size: 13px;
}

.ActualiteDerniere>div>div:nth-child(0n+2)>span>a{
    color : #104CA7;
    text-shadow: none;
    text-decoration: none;
}



/*---------------------------------------------------Accueil - Bouton Toutes les actualités---------------------------------------------------*/

.BoutonActualitesAccueil{
    max-width: 20%;
    margin: 50px auto 50px auto;
    padding: 8px 10px 10px 10px;
    background-color: #104CA7;
    color: white;
    display: block;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

@media screen and (max-width: 900px) {
  .BoutonActualitesAccueil{
      max-width: 100%;
      margin: 25px auto 25px 0px;
  }
}

.BoutonActualitesAccueil>i{
    margin-left: 5px;
}

.BoutonActualitesAccueil>img{
    margin-left: 10px;
}

.BoutonActualitesAccueil:hover{
    background-color: #107DE6;
    text-decoration: none;
}

.NombreActualiteRecherche{
    width: 100%;
    text-align: center;
    margin: 50px 0px 10px 0px;
}



/*---------------------------------------------------Pagination (recherche et toutes les actualités)---------------------------------------------------*/

.Pagination{
    margin: 50px 0px 30px 0px;
    width: 100%;
    text-align: center;
    font-size: 0px;
}

.Pagination>a{
    min-width: 30px;
    padding: 5px;
    margin: 0px 2px 0px 2px;
    display: inline-block;
    font-size: 20px;
}

@media screen and (max-width: 900px) {
  .Pagination>a{
      min-width: 5%;
      max-width: 5%;
  }
}

.Pagination>a:hover{
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    text-decoration: none;
    background-color: #107DE6;
}

.Pagination a.PageActive:hover{
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    background-color: #104CA7;
    cursor: text;
}

.PageActive{
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    background-color: #104CA7;
}

.CommentairesCompteur::after{
    font-family: "FontAwesome";
    font: var(--fa-font-regular);
    content: " \f4ad";
    vertical-align: baseline;

}

/*---------------------------------------------------Actualites - Créer et éditer---------------------------------------------------*/

.ActualiteEdition{
    width: 100%;
}

.ActualiteEdition>h1{
    text-align: center;
}

.ActualiteEdition>form>input:nth-of-type(0n+1){
    width: 100%;
    font-size: 20px;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    margin-bottom: 5px;
    display: block;
}

.ActualiteEdition>form>input:nth-of-type(0n+2){
    width: 100%;
    font-size: 16px;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    margin-bottom: 5px;
    display: block;
}

.ActualiteEdition>form>span{
    width: 100%;
    text-align: right;
    font-size: 17px;
    display: block;
}

.ActualiteEdition>form>textarea{
    width: 100%;
    height: 70px;
    resize: none;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    margin-bottom: 5px;
    display: block;
}

.ActualiteEdition>form>select{
   min-width: 70px;
   font-size: 19px;
   padding: 5px;
}

.ActualiteEdition>form>p{
    margin: 20px 0px 5px 0px;
}

.ActualiteEdition>form>ul{
    margin-top: 5px;
}

.ActualiteEdition>form>img{
    width: 100%;
    border: 2px solid #104CA7;
    box-sizing: border-box;
}

.ActualiteEdition>form>button{
    display: block;
    margin: 50px auto 30px auto;
    color: white;
    background-color: #104CA7;
    font-size: 19px;
    padding: 10px;

}

.ActualiteEdition>form>button:hover{
    background-color: #107DE6;
}



/*---------------------------------------------------Accueil - Prochaines sorties---------------------------------------------------*/

.ProchainesSorties{
    display: block;
    width: 100%;
    padding-top: 20px;
    border-top: 2px solid #104CA7;
    font-size: 0;
    text-align: center!important;;
}

.ProchainesSorties>h2{
    text-align: center;
    border: 0px solid black;
    margin: 0px 0px 20px 0px;
}

.ProchainesSorties .PSGrille {
  display: grid;
  grid-template-columns: repeat(3, 32%);
  grid-column-gap: 2%;
  grid-row-gap: 20px;
}

.ProchainesSorties .PSSortie {
  background: #E3F0FA;
  /*padding: 20px;
  border-radius: 6px;*/
  text-align: center;
}

.PSSortie{
    font-size: 17px;
    display: grid;
    grid-template-columns: 40% 59%;
    gap: 1%;
}

.PSSortie >h3{
    margin: 0;
}

.PSSIllustration img{
    width: 100%;
    display: block;
}

.PSSInformations{
    padding: 10px;
    
}

.PSSInformations{}


@media screen and (max-width: 900px) {
    .ProchainesSorties .PSGrille {
        grid-template-columns: repeat(1, 100%);
        grid-column-gap: 0%;
    }

    .PSSortie{
        grid-template-columns: 35% 64%;
        gap: 1%;
    }
}


/*---------------------------------------------------Administration, inscription/connexion---------------------------------------------------*/

.FormCompte{
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.FormCompte>h1{
    margin-bottom: 50px;
}

.FormCompte>form>input{
    display: block;
    margin: auto auto 25px auto;
    width: 350px;
    height: 25px;
    padding: 5px 10px 5px 10px;
    font-size: 18px;
    border: 2px solid rgba(16,76,167);

}

.FormCompte>form>input:focus{
    border: 2px solid rgba(16,125,230);
    outline: none;
}

.FormCompte>form>button{
    margin: auto;
    padding: 10px 10px 10px 10px;
    background-color: #104CA7;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    display: block;
    text-align: center;
    font-size: 17px;
    text-decoration: none;
}

.FormCompte>form>button:hover{
    background-color: rgba(16,125,230);
}


/*---------------------------------------------------Administration, Bloc utilisateur---------------------------------------------------*/

.BlocUtilisateur{
    width: 100%;
    height: 35px;
    margin-bottom: 20px;
    font-size: 0;
    box-sizing: border-box;
}

.BlocUtilisateur>div{
    text-align: right;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.BlocUtilisateur>div>a:nth-child(2n+1){
    margin-left: 0px;
}

.BlocUtilisateur>div>div{
    padding: 5px 10px 5px 10px;
    margin-left: 10px;
    color: white;
    vertical-align: top;
    display: inline-block;
    min-height: 35px;
    font-size: 20px;
    background-color: #107DE6;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    box-sizing: border-box;
}



/*---------------------------------------------------Administration, Profil---------------------------------------------------*/

.ProfilInformations{
    width: 100%;
    margin-bottom: 50px;
}

.ProfilInformations>div:nth-child(0n+2){
    display: inline-block;
    width: 15%;
}

.ProfilInformations>div:nth-child(0n+2)>img{
    width: 100%;
    display: block;
    margin: 0px auto 0px auto;
    box-sizing: border-box;
    border: 2px solid #104CA7;
}

.ProfilInformations>div:nth-child(0n+3){
    display: inline-block;
    width: 85%;
}

.ProfilGestion{
    width: 100%;
    font-size: 0;
    text-align: center;
}

.ProfilGestion>div{
    display: inline-block;
    width: 50%;
    font-size: 17px;
}

.ProfilGestion>div>h2{
    margin-top: 0px;
    border: none;
}

.ProfilGestion>div>a{
    padding: 5px 10px 5px 10px;
    margin-left: 10px;
    color: white;
    vertical-align: top;
    display: inline-block;
    min-height: 35px;
    min-width: 250px;
    font-size: 20px;
    background-color: #104CA7;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    box-sizing: border-box;
    text-decoration: none;
}

.ProfilGestion>div>a>i{
    float: left;
    padding-top: 3px;
}

.ProfilGestion>div>a:hover{
    background-color: #107DE6;
}



/*---------------------------------------------------Administration, Profil - Mes actualités---------------------------------------------------*/

.ProfilMesActualites{
    width: 100%;
}

.ProfilMesActualites>thead>tr>th:nth-child(0n+1){
    width: 20%;
}

.ProfilMesActualites>thead>tr>th:nth-child(0n+2){
    width: 40%;
}

.ProfilMesActualites>thead>tr>th:nth-child(0n+3){
    width: 20%;
}

.ProfilMesActualites>thead>tr>th:nth-child(0n+4){
    width: 10%;
}



/*---------------------------------------------------Administration, Prochaines sorties---------------------------------------------------*/

.ProchainesSorties>thead>tr>th>a{
    color: white;
    float: right;
    padding-right: 10px;
}

.AdministrationProchainesSorties>table{
    width:100%;
    margin: 50px 0px 20px 0px;
}

.AdministrationProchainesSorties>table>tbody>tr>td:nth-child(0n+1){
    text-align: left;
}

.AdministrationProchainesSorties>table>tbody>tr>td>a:nth-child(0n+2){
    background-color: rgb(167,55,16);
}

.AdministrationProchainesSorties>table>tbody>tr>td>a:nth-child(0n+2):hover{
    background-color: rgb(230,36,16);
}

.AdministrationProchainesSorties>a{
    display: block;
    margin: 0px auto 0px auto;
}


/*--------------------------------------------------- Affichage d'images en mode Solo ou Multiples ---------------------------------------------------*/

.ImageSolo{
    width: 100%;
}

.ImageSolo>a>img{
    width: 100%;
    display: block;
}

.ImageSoloMoitie{
    width: 100%;
}

.ImageSoloMoitie>a>img{
    width: 50%;
    display: block;
    margin: 0px auto 0px auto;
}

.ImageImpairQuete{
    margin-top: 15px;
}

@media screen and (max-width: 900px) {
  .ImageSoloMoitie>a>img{
      width: 100%;
  }
  .ImageImpairQuete{
    margin-top: 10px;
}
}

.ImagesMultiples{
    width: 100%;
    font-size: 0;
}

.ImagesMultiples>a>img{
    display: inline-block;
    width: 49%;
}

.ImagesMultiples>a:nth-child(2n+1)>img{
    margin-right: 1%;
}

.ImagesMultiples>a:nth-child(2n+2)>img{
    margin-left: 1%;
}

.ImagesMultiples>a:nth-child(1n+3)>img{
    margin-top: 15px;
}

.ratio16-9 img{
    aspect-ratio: 16 / 9;
}

.ratio4-3 img{
    aspect-ratio: 4 / 3;
}

.ratioDS img{
    aspect-ratio: 4 / 3;
}

.vocationIllustration3, .vocationIllustration9{
    width: 100%;
    text-align: center;
}

.vocationIllustration3>img{
    width: 50%;
}

.vocationIllustration9>img{
    width: 30%;
}

@media screen and (max-width: 900px) {
    .vocationIllustration3>img{
        width: 100%;
    }

    .vocationIllustration9>img{
        width: 50%;
    }
  }



/*---------------------------------------------------Sommaire ---------------------------------------------------*/

.Sommaire{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #104CA7;
    background-color: #E3F0FA;
}



/*---------------------------------------------------Bannière ---------------------------------------------------*/

.Banniere{
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.Banniere>img{
    width: 100%;
    aspect-ratio: 38 / 11;
    display: block;
}

.Banniere>div{
    width: 100%;
    position: absolute;
    bottom: 0%;
    padding: 30px 0px 30px 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    background-color: rgba(16,125,230,0.85);
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

@media screen and (max-width: 900px) {
  .Banniere>div{
      height: 100%;
      padding: 0px 5px 0px 5px;
      left: 50%;
      box-sizing: border-box;
      display: table;
  }

  .Banniere>div>h1{
      display: table-cell;
      vertical-align: middle;
      font-size: 25px;
  }
}


/*---------------------------------------------------Menu avec Logo ---------------------------------------------------*/

.Menu{
    width: 100%;
    box-sizing: border-box;
    margin: 0px 0px 100px 0px;
}

.Menu>div{
    width: 100%;
    padding: 20px;
    padding-bottom: 0px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.Menu>div>a>img{
    width: 100%;
    display: block;
    padding-bottom: 20px;
    border-bottom: 2px solid #104CA7;
}

.Menu>ul{
    width: 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.Menu>ul>a>li{
    padding: 7px 0px 7px 20px;
}

.Menu>ul>a>li>img{
    padding: 5px 15px 0px 0px;
    height: 32px;
}

.Menu>ul>a:nth-child(0n+1){
    display: none;
}

.Menu>ul>a:hover{
    text-decoration: none;
}

.Menu>ul>a:target {
    text-decoration: underline;
}

.Menu>ul>a>li:hover{
    background-color: #107DE6;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

.MenuActif{
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    background-color: #107DE6;
}

@media screen and (max-width: 900px) {
  .Menu{
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      z-index: 2000;
      background-color: rgba(16,76,167,0.7);
      overflow: auto;
  }

  .Menu>div{
      display: none;
  }

  .Menu>ul{
      float: right;
      width: 70%;
      min-height: 100%;
      background-color: #107DE6;
  }

  .Menu>ul>a>li{
      height: 50px;
      color: white;
      border-bottom: 1px solid #104CA7;
      font-size: 20px;
      box-sizing: border-box;
      line-height: 1.8;

  }

  .Menu>ul>a:nth-child(0n+1){
      display: list-item;
      text-align: right;
  }

  .Menu>ul>a:nth-child(0n+1)>li{
      height: 60px;
  }

  .Menu>ul>a:nth-child(0n+1)>li>i{
      font-size: 25px;
      margin: 9px 17px auto auto;
  }

  .MenuActif{
      text-shadow: none;
  }
}

/*--------------------------------------------------- Choix de la version du jeu ---------------------------------------------------*/

.ChoixVersion {
    padding: 0;
    width: 75%;
    font-size: 0;
    position: sticky;
    top: 20px;
    text-align: center;
    margin-bottom: 20px;
    z-index: 200;
    padding-right: 20px;
    box-sizing: border-box;
}

.ChoixVersion > button {
    height: 31px;
    width: 20%;
    padding: 7px 0;
    font-size: 16px;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    position: relative;
    border: none;
}

.ChoixVersionActive::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid;
}

.ChoixVersion > button:first-child {
    background-color: #c8282e;
}

.ChoixVersion > button:first-child::after {
    border-top-color: #c8282e;
}

.ChoixVersion > button:last-child {
    background-color: #2566a7;
}

.ChoixVersion > button:last-child::after {
    border-top-color: #2566a7;
}

.ChoixVersion > button:first-child:hover {
    background-color: #f13137;
}

.ChoixVersion > button:first-child:hover::after {
    border-top-color: #f13137;
}

.ChoixVersion > button:last-child:hover {
    background-color: #348ee7;
}

.ChoixVersion > button:last-child:hover::after {
    border-top-color: #348ee7;
}

@media screen and (max-width: 900px) {
    .ChoixVersion {
        width: 100%;
        padding-right: 0px;
        top: 75px;
    }

    .ChoixVersion > button {
        width: 30%;
    }
}


/*--------------------------------------------------- Portages et éditions ---------------------------------------------------*/

.PortagesEditions{
    width: 100%;
    font-size: 0;
}

.PortagesEditions>p{
    font-size: 16px;
}

.PortagesEditions>table{
    width: 100%;
    margin: 0px 0px 50px 0px;
}

.PortagesEditions>table:last-of-type{
    margin: 0px 0px 0px 0px;
}

.PortagesEditions>table th, td{
    font-size: 16px;
}

.PortagesEditions>table>tbody>tr:first-child>td>a>img{
    max-width: 100%;
    max-height: 200px;
}

.PortagesEditions>table>tbody>tr>td:last-child{
    text-align: left;
}

.PortagesEditions>table>tbody>tr>td:last-child>img{
    display: inline-block;
}

.PortagesEditions>table>tbody>tr:nth-child(1n+2)>td{
    width: 50%;
}

.PortagesEditions>table>tbody>tr:nth-child(1n+2)>td:nth-child(0n+1)>img{
    width: 45%;
}



/*--------------------------------------------------- Personnages ---------------------------------------------------*/

.Personnage{
    width: 100%;
}

.Personnage h3{
    text-align: center;
}

.Personnage>img:nth-child(0n+1){
    max-width: 60%;
    max-height: 500px;
    display: block;
    margin: 0 auto 0 auto;
}

.Personnage>a>img{
    width: 100%;
    display: block;
    margin: 0 auto 0 auto;
}

.Personnage>div:nth-of-type(0n+1){
    width: 100%;
    box-sizing: border-box;
    background-color: #E3F0FA;
    padding: 20px;
}

.Personnage ul{
    margin-bottom: 0px;
}

.Personnage table{
    width: 100%;
}


/*---Tableau des sorts---*/

.PersonnageSortsAptitudes{
    margin: 20px 0px 0px 0px;
    width: 100%;
}

.PersonnageSortsAptitudes>thead>tr>th:nth-child(2n+1){
    width: 10%;
}

.PersonnageSortsAptitudes>thead>tr>th:nth-child(0n+2){
    width: 20%;
}

.PersonnageSortsAptitudes>thead>tr>th:nth-child(0n+4){
    width: 60%;
}

.PersonnageSortsAptitudes>tbody>tr>td:last-child{
    text-align: justify;
}


/*---Tableau des equipements---*/

.PersonnageEquipements{
    margin: 50px 0px 0px 0px;
}
.PersonnageEquipements>thead>tr>th:nth-child(0n+1){
    width: 25%;
}

.PersonnageEquipements>thead>tr>th:nth-child(0n+2){
    width: 15%;
}

.PersonnageEquipements>thead>tr>th:nth-child(0n+3){
    width: 60%;
}

.PersonnageEquipements>thead>tr>th:nth-child(0n+1){
    width: 25%;
}

.PersonnageEquipements>tbody>tr>td:last-child{
    text-align: justify;
}

.PersonnageEquipements>tbody>tr>td:last-child ul{
    margin: 0px;
}

.PersonnageEquipements>tbody>tr>td:first-child:nth-child(even){
    width: 75%;
}

/*---Tableau des caractéristiques---*/

.PersonnageCaractérisiques>thead>tr>th{
    width: 33%;
}


/*---------------------------------------------------Affichage des sorts et aptitudes---------------------------------------------------*/

.SortsAptitudesDetails{
    width: 100%;
    margin: 0 0 20px 0;
}

.SortsAptitudesDetails:last-of-type{
    margin: 0 0 0 0;
    
}

.SortsAptitudesDetails>thead>tr>th:nth-child(0n+1){
    text-align: left;
    padding-left: 10px;
    width: 60%;
}

.SortsAptitudesDetails>thead>tr>th:nth-child(0n+2){
    text-align: right;
    padding-right: 10px;
    width: 40%;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+1){
    text-align: justify;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+2){
    font-size: 0;
    text-align: left;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+2)>p{
    font-size: 14px;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+2)>div{
    display: flex;
    width: 100%;
    margin: 0 0 10px 0;
    border: 2px solid #104ca74d;
    box-sizing: border-box;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+2)>div:last-child{
    margin: 0px;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+2)>div>span{
    font-size: 16px;
    box-sizing: border-box;
    display: table-cell;
    padding: 5px;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+2)>div>span:nth-child(0n+1){
    width: 70%;
    align-self: center;
}

.SortsAptitudesDetails>tbody>tr>td:nth-child(0n+2)>div>span:nth-child(0n+2){
    width: 30%;
    background-color: #E3F0FA;
    text-align: center;
}

.supinfos ul{
    margin: 10px 0px 0px 0px;
    
}



/*---------------------------------------------------Affichage liste armes, protections, objets---------------------------------------------------*/

.ListeTOME>a{}

.ListeTOME>a:hover{
    text-decoration: none;
}

.ListeTOME>a:hover table>tbody>tr>td{
    border-color: #107DE6;
}

.ListeTOME>a:hover table>tbody>tr:nth-child(0n+1)>td:nth-child(0n+2){
    background-color: #107DE6;
    border-right: 2px solid #107DE6;
}

.ListeTOME>a>table td{
    border: 2px solid #104CA7;
}

.ListeTOME>a>table{
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.ListeTOME:last-of-type>a>table{
    margin-bottom: 0px;
}

.ListeTOME>a>table:hover{
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease-in-out;
}

.ListeTOME>a>table>tbody>tr:nth-child(0n+1)>td:nth-child(0n+1){
    width: 15%;
}

.ListeTOME>a>table>tbody>tr:nth-child(0n+1)>td:nth-child(0n+2){
    width: 85%;
    font-size: 19px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #104CA7;
    text-align: left;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    border-left: none;
    border-right: none;
    font-weight: bold;
    height: 19px;
    border-right: 2px solid #104CA7;
}

.ListeTOME>a>table>tbody>tr:nth-child(0n+1)>td:nth-child(0n+2)>span{
    float: right;
}

.ListeTOME>a>table>tbody>tr:nth-child(0n+2)>td:nth-child(0n+1){
    width: 70%;
    color: black;
    text-align: justify;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ListeTOME>a>table>tbody>tr:nth-child(0n+2)>td:nth-child(0n+1) ul{
    margin: 0px;
}

.ListeTOME>a>table>tbody>tr:nth-child(0n+2)>td:nth-child(0n+2){
    background-color: #FAFAFA;
    color: black
}



.PresentationTOME>img{
    display: block;
    margin: 0px auto 0px auto;
}

.PresentationTOME>table{
    width: 100%;
}

.PresentationTOME>table>tbody>tr>td>ul{
    margin:0px;
}

.PresentationTOME>table>tbody>tr>td:nth-child(0n+1){
    width: 20%;
    background-color: #104CA7;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    border: 1px solid #104CA7;
    font-weight: bold;
    text-align: right;
}

.PresentationTOME>table>tbody>tr>td:nth-child(0n+2){
    width: 80%;
    text-align: left;
}

.PresentationTOME>table>tbody>tr:nth-child(0n+1)>td:nth-child(0n+2){
    border-top: 2px solid #104CA7;
}

.PresentationTOME>table>tbody>tr:first-child>td:nth-child(0n+1){
    border-top: 2px solid #104CA7;
}

.PresentationTOME>table>tbody>tr:last-child>td:nth-child(0n+1){
    border-bottom: 2px solid #104CA7;
}

.PresentationTOME>table>tbody>tr>td:nth-child(0n+2)>img{
    float: left;
    width: 8.4%;
    margin: 0px 0.8% 0px 0.8%;
    box-sizing: border-box;
    border: 2px solid #104ca74d;
    border-radius: 5px;
}

.PresentationTOME>table>tbody>tr>td:nth-child(0n+2)>img:nth-child(1n+11){
    margin-top: 10px;
}

.PresentationTOME>table>tbody>tr>td{
    background-color: #FAFAFA;
}

@media screen and (max-width: 900px) {
  .PresentationTOME>table>tbody>tr>td:nth-child(0n+1){
      width: 27%;
  }

  .PresentationTOME>table>tbody>tr>td:nth-child(0n+2){
      width: 73%;
  }

  .PresentationTOME>table>tbody>tr>td:nth-child(0n+2)>img{
      width: 18%;
      margin: 0px 1% 0px 1%;
  }

  .PresentationTOME>table>tbody>tr>td:nth-child(0n+2)>img:nth-child(1n+6){
      margin-top: 10px;
  }

  .PresentationTOME>table>tbody>tr>td:nth-child(0n+2)>img{
      float: left;
      width: 18.4%;
      margin: 0px 0.8% 0px 0.8%;
      box-sizing: border-box;
      border: 1px solid #104ca74d;
      border-radius: 5px;
  }

  .PresentationTOME>table>tbody>tr>td:nth-child(0n+2)>img:nth-child(1n+11){
      margin-top: 10px;
  }
}


.PresentationTOME ul{
    margin-bottom: 20px;
}

.PresentationTOME ul>ul{
    margin-bottom: 20px;
}

.PresentationTOME ul>li>ul{
    margin-top: 13px;
}


.PresentationTOME ul>ul:last-child{
    margin-bottom: 0x;
}


/*---------------------------------------------------Affichage monstre---------------------------------------------------*/

.ListeMonstre{
    width: 100%;
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-column-gap: 2%;
    grid-row-gap: 15px;
}

.ListeMonstre>a>div:hover{
    border: 2px solid #107DE6;
    background-color: #E3F0FA;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease-in-out;
}

.ListeMonstre>a>div:hover h3{
    background-color: #107DE6;
}

.ListeMonstre>a>div{   
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid #104CA7;
    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
}

.ListeMonstre>a>div>h3{
    font-size: 16px;
    color: white;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
    text-align: center;
    background-color: #104CA7;
    margin: 0px;
    padding: 7px 0px 7px 0px;
}

.ListeMonstre>a>div>img{
    width: 70%;
    display: block;
    margin: 5px auto 5px auto;
}

@media screen and (max-width: 900px) {
    .ListeMonstre{
        grid-template-columns: repeat(2, 49%);
    }
}


/*---------------------------------------------------Boutons des vocations (DQ III)---------------------------------------------------*/

.VocationsBoutons{
    text-align: center;
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(4, 23.5%);
    grid-column-gap: 2%;
    grid-row-gap: 15px;
}

.VocationsBoutons>a>button{
    width: 100%;;
    font-size: 17px;
    padding: 5px 0px 5px 0px;
    border: 2px solid #104CA7;
    box-sizing: border-box;
}

.VocationsBoutons>a:last-child:nth-child(odd)>button{
    margin-right: 1%;
    margin-left: 1%;
}

.VocationsBoutons > a > button:hover{
    color: white;
    background-color: #104CA7;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

@media screen and (max-width: 900px) {
    .VocationsBoutons{
        grid-template-columns: repeat(2, 49%);
    }
}

/*---------------------------------------------------Boutons des vocations (DQ III)---------------------------------------------------*/

.MonstresRecrutablesBoutons{
    width: 100%;
    font-size: 0;
    margin: 50px 0px 50px 0px;
}

.MonstresRecrutablesBoutons>div{
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-column-gap: 2%;
    grid-row-gap: 15px;
}

.MonstresRecrutablesBoutons>div>button{
    font-size: 17px;
    padding: 5px 0px 5px 0px;
    box-sizing: border-box;
    border: 2px solid #104CA7;
}


.MonstresRecrutablesBoutons>div>button:hover{
    color: white;
    background-color: #104CA7;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

@media screen and (max-width: 900px) {
    .MonstresRecrutablesBoutons>div{
        grid-template-columns: repeat(2, 49%);
    }
}


/*---------------------------------------------------Boutons divers (Compétences DQVIII, Vocations DQIII)---------------------------------------------------*/

.BoutonsLigne1, .BoutonsLigne2, .BoutonsLigne3{
    width: 100%;
    font-size: 0;
    margin: 50px 0px 0px 0px;
}

.BoutonsLigne1>div, .BoutonsLigne2>div, .BoutonsLigne3>div{
    display: grid;
    grid-column-gap: 2%;
    grid-row-gap: 15px;
}

.BoutonsLigne1>div{
    grid-template-columns: repeat(5, 18.4%);
}

.BoutonsLigne2>div{
    grid-template-columns: repeat(3, 32%);
}

.BoutonsLigne3>div{
    grid-template-columns: repeat(4, 23.5%);
}

.BoutonsLigne1>div>button, .BoutonsLigne2>div>button, .BoutonsLigne3>div>button{
    font-size: 17px;
    padding: 5px 0px 5px 0px;
    box-sizing: border-box;
    border: 2px solid #104CA7;
}


.BoutonsLigne1>div>button:hover, .BoutonsLigne2>div>button:hover, .BoutonsLigne3>div>button:hover{
    color: white;
    background-color: #104CA7;
    text-shadow: 2px 2px rgb(0 0 0 / 50%);
}

@media screen and (max-width: 900px) {
    .BoutonsLigne1>div, .BoutonsLigne2>div, .BoutonsLigne3>div{
        grid-template-columns: repeat(2, 49%);
    }
}

/*---------------------------------------------------Boutons de classement pour Catégories (persos, équipements, Alphabétique, etc.)---------------------------------------------------*/

.JeuCategorieFiltre{
    font-size: 0px;
    text-align: center;
    margin-top: 50px;
}

.JeuCategorieFiltre>button{
    display: inline-block;
    width: 6.33333333%;
    padding: 5px;
    margin: 0px 1% 0px 1%;
    box-sizing: border-box;
    border: 2px solid #104CA7;
    overflow: hidden;
}

.JeuCategorieFiltre>button:hover{
    background-color: #104CA7;
}

.JeuCategorieFiltre>button:hover img{
    filter: brightness(2000%);
}

.JeuCategorieFiltre>button:nth-child(1n+13){
    margin-top: 15px;
}

.JeuCategorieFiltre>button>img{
    width: 100%;
    display: block;
}

.JeuCategorieFiltreActif{
    background-color: #104CA7;
}

.JeuCategorieFiltreActif>img{
    filter: brightness(2000%);
}

.JeuPortraitFiltre{
    font-size: 0px;
    text-align: center;
    margin-top: 50px;
}

.JeuPortraitFiltre>button{
    display: inline-block;
    width: 6.33333333%;
    padding: 0px;
    margin: 0px 1% 0px 1%;
    box-sizing: border-box;
    border: 2px solid #104CA7;
    overflow: hidden;
}

.JeuPortraitFiltre>button:hover{
    background-color: #104CA7;
}

.JeuPortraitFiltre>button:nth-child(1n+13){
    margin-top: 15px;
}

.JeuPortraitFiltre>button>img{
    width: 100%;
    display: block;
}

@media screen and (max-width: 900px) {
  .JeuCategorieFiltre>button{
      width: 14.6666666667%;
  }

  .JeuCategorieFiltre>button:nth-child(1n+7){
      margin-top: 10px;
  }

  .JeuCategorieFiltre>button:nth-child(1n+13){
      margin-top: 10px;
  }

  .JeuPortraitFiltre>button{
      width: 14.6666666667%;
  }

  .JeuPortraitFiltre>button:nth-child(1n+7){
      margin-top: 10px;
  }

  .JeuPortraitFiltre>button:nth-child(1n+13){
      margin-top: 10px;
  }
}

.BoutonActif{
    background-color: #104CA7;
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
}

.BoutonActif>img{
    filter: brightness(2000%);
}

.BoutonPortraitActif{
    background-color: #104CA7;
}


/*---------------------------------------------------Boutons de classement par pages (Numéros ou Lettres).---------------------------------------------------*/

.JeuPageFiltre{
    margin: 40px 0px 40px 0px;
    width: 100%;
    text-align: center;
    font-size: 0px;
    display: none;
}

.JeuPageFiltre>button{
    border: 2px solid #104CA7;
    padding: 4px 3px 3px 3px;
    width : 34px;
    height : 34px;
    margin: 5px 5px 5px 5px;
    font-size: 17px;
}

.JeuPageFiltre>button:hover{
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
    background-color: #104CA7;
}



/*---------------------------------------------------Boutons de classement par Rangs (Gluodrome et Concours de mode).---------------------------------------------------*/

.JeuRangsFiltre{
    width: 100%;
    text-align: center;
    margin-top: 50px;
}

.JeuRangsFiltre>button{
    display: inline-block;
    width: 6.33333333%;
    padding: 5px 0px 5px 0px;
    margin: 0px 1% 0px 1%;
    box-sizing: border-box;
    border: 2px solid #104CA7;
    overflow: hidden;
    font-size: 25px;
}

.JeuRangsFiltre>button:hover{
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
    background-color: #104CA7;
}

@media screen and (max-width: 900px) {
  .JeuRangsFiltre>button{
      width: 14.6666666667%;
  }

  .JeuRangsFiltre>button:nth-child(1n+6){
      margin-top: 15px;
  }
}


/*---------------------------------------------------Boutons de classement autre (Différence PS2/N3DS DQVIII).---------------------------------------------------*/

.JeuDifferenceFiltre{
    width: 100%;
    text-align: center;
    font-size: 0;
    margin: 50px 0px 50px 0px;
}

.JeuDifferenceFiltre>button{
    width: 20%;
    padding: 7px 10px 7px 10px;
    margin: 0px 5px 0px 5px;
    font-size: 17px;
    border: 2px solid #104CA7;

}

.JeuDifferenceFiltre>button:hover{
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
    background-color: #104CA7;
}

@media screen and (max-width: 900px) {
  .JeuDifferenceFiltre>button{
      width: 48%;
      margin: 0px 1% 0px 1%;
  }
}




/*---------------------------------------------------Quêtes : vignettes d'affichage---------------------------------------------------*/

.Vignettes{
    width: 100%;
    text-align: center;
    font-size: 0px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 49%));
    grid-column-gap: 2%;
    grid-row-gap: 20px;
}

.Vignettes>a{
    position: relative;
    display:inline-block;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.Vignettes>a:hover{
    text-decoration: none;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease-in-out;
    background-color: #E3F0FA;
}

.Vignettes>a:hover img{
    filter: brightness(105%) grayscale(0%);
}

.Vignettes>a>img{
    width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0px auto 0px auto;
    filter: brightness(100%) grayscale(10%);
}

.VignettesPersonnages>a>img{
    width: auto;
    padding: 10px;
    max-height: 240px;
}

.Vignettes>a>div{
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #107de6d9;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px #00000080;
    box-sizing: border-box;
}

@media screen and (max-width: 900px) {
    .Vignettes{
        grid-template-columns: repeat(1, 100%);
        grid-column-gap: 0%;
    }
  }


/*---------------------------------------------------Quêtes : Spoiler pour afficher qqch de caché---------------------------------------------------*/

.Spoiler{
    width: 100%;
    border: 1px solid #104CA7;
    box-sizing: border-box;

}

.Spoiler>button{
    font-size: 20px;
    width: 100%;
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
    background-color: #104CA7;
    display: block;
    padding: 10px 0px 10px 0px;
}

.Spoiler>button:hover{
    background-color: #107DE6;
}


.Spoiler>div{
    width: 100%;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    background-color: #E3F0FA;
}


/*---------------------------------------------------Tableaux divers (notamment pour les quêtes annexes)---------------------------------------------------*/

/*--- Tableau à 2 colonnes et réduit à 70% de largeur ---*/

.TableauC2{
    width: 70%;
    margin: 0px auto 0px auto;
}

.TableauC2>thead>tr>th{
    width:50%;
}

@media screen and (max-width: 900px) {
  .TableauC2{
      width: 100%;
  }
}

/*--- Tableau des caractéristiques des vocations ---*/

.TableauCaracteristiques{
    width: 100%;
    overflow: auto;
}

.TableauCaracteristiques>table{
    width: 100%;
}

.TableauCaracteristiques>table>thead>tr>th{
    width: 14.2857142%;
}

@media screen and (max-width: 900px) {
  .TableauCaracteristiques>table>thead>tr>th{
      width: auto;
      min-width: 100px;
  }
}


/*--- Tableau des mini médailles ---*/

.TableauMiniMedailles{
    width: 100%;
}

.TableauMiniMedailles>thead>tr>th{
    border: 2px solid #104CA7;
}

.TableauMiniMedailles>thead>tr>th:first-child{
    width:10%;
}

.TableauMiniMedailles>thead>tr>th{
    width:45%;
}

.TableauMiniMedailles>tbody>tr>td:nth-child(1n+2){
    text-align: left;
}


.TableauMiniMedailles>tbody>tr>td>a>img{
    display: block;
    max-width: 100%;
}

/*--- Tableau pour les boss dans les quêtes ---*/

.TableauBoss{
    width: 100%;
    text-align: center;
    font-size: 0;
}

.TableauBoss th, .TableauBoss td{
    font-size: 16px;
}

.TableauBossDuo>table{
    max-width: 49%;
    display: inline-block;
    vertical-align: top;
}

.TableauBossSolo>table{
    max-width: 70%;
    display: inline-block;
    vertical-align: top;
}

.TableauBoss table:nth-of-type(2n+1){
    margin-right: 1%;
}

.TableauBoss table:nth-of-type(2n){
    margin-left: 1%;
}

.TableauBoss>table>tbody th{
    width: 20%;
}

.TableauBoss ul{
   text-align: left;
   margin: 0;
}

@media screen and (max-width: 900px) {
    .TableauBoss>table{
        max-width: 100%;
        width: 100%;
        display: table!important;
    }

    .TableauBoss table:nth-of-type(2n+1){
        margin-right: 0px;
    }
    
    .TableauBoss table:nth-of-type(2n){
        margin-left: 0px;
        margin-top: 20px;
    }
}

/*--- Tableau pour le TNT ---*/

.TableauTNT{
    width: 100%;
}

.TableauTNT img{
    display: inline-block;
}

.TableauTNT>thead>tr>th:nth-child(0n+1){
    width: 30%;
}

.TableauTNT>thead>tr>th:nth-child(0n+2){
    width: 70%;
}

.TableauTNT>tbody>tr>td:nth-child(0n+2){
    text-align: justify;
}

/*--- DQVI - Tableau Forge de la mode ---*/

.TableauForgeDeLaMode{
    width: 100%;
}

.TableauForgeDeLaMode>thead>tr>th{
    width: 33.333333%;
}

/*--- DQVI - Tableau récompenses concours de mode ---*/

.TableauRecompensesMode{
    width: 100%;
}

.TableauRecompensesMode>thead>tr>th{
    width: 20%;
}

.TableauRecompensesMode>thead>tr>th:last-child{
    width: 40%;
}

/*--- DQVI - Tableau récompenses Gluodrome ---*/

.TableauRecompensesGluodrome{
    width: 100%;
}

.TableauRecompensesGluodrome>thead>tr>th:nth-child(0n+1){
    width: 20%;
}

.TableauRecompensesGluodrome>thead>tr>th:nth-child(0n+2){
    width: 50%;
}

.TableauRecompensesGluodrome>thead>tr>th:nth-child(0n+3){
    width: 30%;
}

/*--- DQVI - Tableau pour le concours de mode---*/

.TableauMode{
    width: 70%;
    margin: 0 auto 0 auto;
}

.TableauMode>thead>tr>th:nth-child(0n+1){
    width: 30%;
}

.TableauMode>thead>tr>th:nth-child(0n+2){
    width: 50%;
}

.TableauMode>thead>tr>th:nth-child(0n+3){
    width: 30%;
}

@media screen and (max-width: 900px) {
    .TableauMode{
        width: 100%;
    }
  }


/*--- DQ IX - Tableau des récompenses de Boss ---*/

.TableauDQ9Boss{
    width: 100%;
}

.TableauDQ9Boss>table{
    width: 100%;
}

.TableauDQ9Boss>table>thead>tr>th:nth-child(1){
    width: 20%
}

.TableauDQ9Boss>table>thead>tr>th:nth-child(2){
    width: 39%
}

.TableauDQ9Boss>table>thead>tr>th:nth-child(3){
    width: 6%
}

.TableauDQ9Boss>table>thead>tr>th:nth-child(4){
    width: 29%
}

.TableauDQ9Boss>table>thead>tr>th:nth-child(5){
    width: 6%
}

.FondBC{
    background-color: rgb(227, 240, 250)
}

.FondBL{
    background-color: rgb(250, 250, 250)
}

.BordureBasse{
    border-bottom: 2px solid #104CA7;
}

/*--- DQ XI - Tableau des récompenses de courses ---*/

.TableauRecompensesCourses{
    width: 100%;
}

.TableauRecompensesCourses>thead>tr>th{
    width: 20%;
}

.TableauRecompensesCourses>thead>tr>th:last-child{
    width: 40%;
}

.TableauRecompensesCourses>tbody>tr>td:last-child{
    text-align: left;
}

.TableauRecompensesCourses>tbody>tr:nth-child(even)>td:first-child{
    border-left: 2px solid #104ca74d;
}

.TableauRecompensesCourses>tbody>tr:nth-child(0n+9)>td:first-child{
    border-bottom: 2px solid #104CA7;
}

/*--- DQ IV - Citoyens ---*/

.VillePionniersCitoyens{
    width: 100%;
    text-align: center;
    font-size: 0;
    /*width: 100%;
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(4, 15%);
    grid-column-gap: 2%;
    grid-row-gap: 15px;*/
}

.VillePionniersCitoyens>div{
    display: inline-block;
    width: 15%;
}

.VillePionniersCitoyens>div>p{
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
}

.VillePionniersCitoyens>div>img{
    width: 40px;
}

@media screen and (max-width: 900px) {
    .VillePionniersCitoyens>div{
        width: 50%;
    }

    .VillePionniersCitoyens>div:nth-child(1n+3){
        margin-top: 20px;
    }
}

/*--- DQ IV - Récompenses Boss Donjon Bonus ---*/

.DonjonBonusRecompenses{
    display: grid;
    grid-template-columns: repeat(2, 48%);
    grid-column-gap: 2%;
    grid-row-gap: 20px;
    font-size: 0;
    
}

.DonjonBonusRecompenses div{
    box-sizing: border-box;
    border: 2px solid #104CA7;
    background-color: #E3F0FA;
}

.DonjonBonusRecompenses h3{
    text-align: center;
    background-color: #104CA7;
    color: #fff;
    margin: 0px;
    padding: 10px;
    font-size: 19px;
}

.DonjonBonusRecompenses img{
    width: 100%;
    font-size: 0;
    border-bottom: 2px solid #104CA7;
}

.DonjonBonusRecompenses p{
    
    font-size: 16px;
    padding: 10px;
}

@media screen and (max-width: 900px) {
    .DonjonBonusRecompenses{
        display: grid;
        grid-template-columns: repeat(1, 100%);
        grid-column-gap: 0%;
        grid-row-gap: 20px;
        font-size: 0;
        
    }
}

/*--- DQ V - TNT Cases ---*/

.TNTCases{
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-column-gap: 2%;
    grid-row-gap: 20px;
    font-size: 0;
    
}

.TNTCases>div{
    box-sizing: border-box;
    border: 2px solid #104CA7;
    background-color: #fafafa;    
}

.TNTCases h3{
    text-align: center;
    background-color: #104CA7;
    color: #fff;
    margin: 0px;
    padding: 10px;
    font-size: 19px;
}

.TNTCases img{
    display: block;
    margin: 10px auto 10px auto;
    width: 20%;
    font-size: 0;
    
}

.TNTCases p{
    font-size: 16px;
    padding: 10px;
    background-color: #fafafa;
}

.TNTCases>div>div{
    background-color: #fafafa;
}

.TNTCases table{
    font-size: 0;
    width: 47%;
    display: inline-table;
    box-sizing: border-box;
    margin : 0px 1.5% 5px 1.5%;
}

.TNTCases table>tbody>tr>td:nth-child(0n+1){
    width: 25%;
}

.TNTCases table>tbody>tr>td:nth-child(0n+2){
    width: 75%;
}

.TNTCases table>thead>tr>th, .TNTCases table>tbody>tr>td{
    font-size: 16px;
}

.TNTCases table:last-of-type>tbody>tr:nth-child(0n+4)>td:nth-child(0n+2){
    border-bottom: 2px solid #104CA7;
}


@media screen and (max-width: 900px) {
    .TNTCases{
        display: grid;
        grid-template-columns: repeat(2, 48%);
        grid-column-gap: 2%;
        grid-row-gap: 20px;
        font-size: 0;
        
    }

    .TNTCases table:last-of-type{
        width: 39.41%;
    }
}



/*---------------------------------------------------Affichage de la liste des quêtes---------------------------------------------------*/

.QuetesListe{
    width: 100%;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.QuetesListe>a>li{
    margin-bottom: 7px;
}



/*---------------------------------------------------Affichage de la navigation en bas de page---------------------------------------------------*/

.QuetesNavigation{
    width: 100%;
    font-size: 0;
}

.QuetesNavigation>div{
    font-size: 16px;
    width: 50%;
    display: inline-block;
}

.QuetesNavigation>div:nth-child(0n+1){
    text-align: left;
}

.QuetesNavigation>div:nth-child(0n+2){
    text-align: right;
}


/*---------------------------------------------------Affichage des trophées---------------------------------------------------*/

.Trophees{
    margin-top: 50px;
}

.Trophees>div{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #104ca74d;
    font-size: 0;
}

.Trophees h3{
    font-size: 20px;
    margin: 0 0 10px 0;
    padding: 0;
}

.Trophees p, li{
    font-size: 16px;
}

.Trophees>div:nth-child(1n+2){
    margin-top: 20px;
}

.Trophees>div>div:nth-child(0n+1){
    border-bottom: 2px solid #104ca74d;
    padding: 5px;
    background-color: #E3F0FA;
}

.Trophees>div>div:nth-child(0n+2){
    padding: 10px;
}

.Trophees>div>div:nth-child(0n+1)>div{
    display: inline-block;
}

.Trophees>div>div:nth-child(0n+1)>div:nth-child(0n+1){
    width: 10%;
    box-sizing: border-box;
}

.Trophees>div>div:nth-child(0n+1)>div:nth-child(0n+2){
    width: 80%;
    vertical-align: top;
    padding: 0px 10px 0px 10px;
    box-sizing: border-box;
}

.Trophees>div>div:nth-child(0n+1)>div:nth-child(0n+3){
    width: 10%;
    box-sizing: border-box;
}

.Trophees>div>div:nth-child(0n+1)>div>img{
    max-width: 100%;
}


/*--------------------------------------------------- Dragon Quest 11 3D/2D ---------------------------------------------------*/

.BoutonsDQ113D2D{
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
}

.BoutonsDQ113D2D > button{
    border: solid 2px #104CA7;
}


/*---------------------------------------------------Dragon Quest Rivals---------------------------------------------------*/


/*--------------------------Cartes-------------------------------------*/
.DQRivalsExempleCarte{
    width:100%;
    text-align: center;

}

.DQRivalsExempleCarte>img{
    width:25%;
    margin-left: 2%;
    margin-right: 2%;

}






/*--------------------------Cartes-------------------------------------*/
.DQRivalsNombreDeCartes{
    margin-bottom: 30px;
    display: block;
    float: none;
}

.DQRivalsNombreDeCartes>p{
    text-align: center;
}

.DQRivalsFiltres{
  background: #E3F0FA;
  padding: 10px 0 10px 0;
}

.DQRivalsFiltres>button{

  display: block;
  margin: 10px auto 0px auto;
  outline: none;
  padding:5px 7px 5px 7px;
  background-color: #104CA7;
  color: white;
  border-radius: 4px;
  border:  1px solid rgba(63,67,69, 0.5);
  display: block;
  text-align: center;
  font-size: 17px;
  text-decoration: none;
}

.DQRivalsFiltres>button:hover{
    background-color: #107DE6;
    text-decoration: none;
}





.DQRivalsFiltres>table{
  width:100%;
}

.DQRivalsFiltres>table>tbody>tr>td{
    border: none;
    background: #E3F0FA;
}

.DQRivalsFiltres>table>tbody>tr>td:first-child{
    text-align: right;
    font-weight: bold;
    width: 20%;
}

.DQRivalsFiltres>table>tbody>tr>td:last-child{
    text-align: left;
    width: 80%;
}

.DQRivalsFiltres>table>tbody>tr>td>select{
    height: 30px;
    width: 100%;
    border-top : none;
    border-right : none;
    border-bottom: 2px solid rgba(16,76,167, 1);
    border-left : none;
    font-size: 17px;
}

.DQRivalsFiltres>table>tbody>tr>td>select:focus{
    outline-color: rgba(16,76,167, 1);
    outline-style: solid;
    outline-width: 2px;
}



.DQRivalsFiltres>table>tbody>tr>td>label:hover{
    border: 2px solid rgba(16,76,167, 1);
}


.DQRivalsFiltresFiltreTitre>tbody>tr>td>input{
    display: inline;
    width: 99%;
    padding-left: 1%;
    border: none;
    height: 30px;
    outline: none;
    font-size: 17px;
}



.DQRivalsFiltresFiltreTitre>tbody>tr>td>input:focus{
    outline-color: rgba(16,76,167, 1);
    outline-style: solid;
    outline-width: 2px;
}

.DQRivalsFiltresFiltreCarre>tbody>tr>td>input{
    display: none;
}

.DQRivalsFiltresFiltreCarre>tbody>tr>td>label:first-of-type{
    margin-left: 0px;
}

.DQRivalsFiltresFiltreCarre>tbody>tr>td>label{
    height: 40px;
    width: 50px;
    margin: 0px 10px 5px 0px;
    border : 2px solid rgba(16,76,167, 0);
    border-radius: 5px;
    display: inline-block;
    float: left;
    text-align: center

}

.DQRivalsFiltresFiltreLong>tbody>tr>td>input{
    display: none;
}

.DQRivalsFiltresFiltreLong>tbody>tr>td>label:first-of-type{
    margin-left: 0px;
}

.DQRivalsFiltresFiltreLong>tbody>tr>td>label{
    min-width: 40px;
    margin: 0px 10px 5px 0px;
    padding: 6px;
    border : 2px solid rgba(16,76,167, 0);
    border-radius: 5px;
    display: inline-block;
    text-align: center

}

.DQRivalsFiltresFiltreLong>tbody>tr>td>label>img{
    max-height: 15px;
}



.DQRivalsFiltresCaches{
  display: none;
}
.DQRivalsFiltresAffiches{
  display: table;
}




.DQRivalsCartes{
    width: 100%;
    margin-bottom: 20px;
}

.DQRivalsCartes>div{
    width: 25%;
    float: left;
    height: auto;
}

.DQRivalsCartes>div>a>img{
    width: 100%;

}

.DQFCarte>a{
    position: relative;
    display: inline-block;
}

.DQFCarte:hover .DQFCarteInfobulle{
    width: 300px;
    display: inline;
    background-color: black;
    color: #fff;
    text-align: justify;
    border-radius: 6px;
    position: absolute;
    z-index: 1;

}

.DQFCarte:hover .DQFCarteInfobulle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.DQFCarteInfobulle{
    display: none;

}

.DQFCarteInfobulle>div{
    margin: 0 10px 10px 10px;
    padding: 0;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.DQFCarteInfobulle>div>a{
    float: none;
    color: #107DE6;
}

.DQFCarteInfobulle>div>ul>li>a{
    float: none;
    color: #107DE6;
}

.DQFCarteInfobulle>h4{
    margin: 10px 0px 0px 0px;
    text-align: center;
    font-size: 18px;
}










.DQRivalsVoirCarteImage{
    width: 40%;
    float: left;
}

.DQRivalsVoirCarteImage img{
    width: 100%;
}

.DQRivalsVoirCarteInformations{
    width: 58%;
    float: right;
}

.DQRivalsVoirCarteInformations table{
    width: 100%;
}

.DQRivalsVoirCarteInformations table>tbody>tr>td{
    border: none;
}

.DQRivalsVoirCarteInformations table>tbody>tr>td:first-child{
    text-align: right;
    width: 30%;
    vertical-align: text-top;
}

.DQRivalsVoirCarteInformations table>tbody>tr>td:last-child{
    text-align: left;
    width: 70%;
    vertical-align: text-top;
}


.DQRivalsVoirCarteInformations table>tbody>tr>td>img{
    max-height: 13px;
}



.DQRivalsCartesMecanique{
    cursor: help;
    position: relative;
    display: inline;
}

.DQRivalsCartesMecaniqueTexte{
    width: 300px;
    padding: 5px;
    border-radius: 3px;
    color: white;
    background-color: rgba(0,0,0, 0.9);
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0%;
    z-index: 1;
}

.DQRivalsCartesMecanique:hover .DQRivalsCartesMecaniqueTexte{
    visibility: visible;
}


.DQRivalsMecaniquesH3{
    margin-top: 30px;
}