@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');



@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot');
  src:  url('fonts/icomoon.eot') format('embedded-opentype'),
    url('fonts/icomoon.ttf') format('truetype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e986";
}
.icon-menu:before {
  content: "\e9bd";
}
.icon-cross:before {
  content: "\ea0f";
}



body {
  font-family: Montserrat, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0e0e23;
}


a {
  list-style: none;
  text-decoration: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


.big-container {
  background-color: #0e0e23;
 
}



table.sort thead th.sorting_asc::after {
  content: "\2191";
  opacity: 1;
  margin-left: 5px;
}

table.sort thead th.sorting_desc::after {
  content: "\2193";
  opacity: 1;
  margin-left: 5px;
}

table.sort thead th.sorting::after {
  content: "\2195";
  opacity: 0.5;
  margin-left: 5px;
}

.grid-container {
  margin: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

table {
  width: 100%;
  max-width: 1100px;
  border-collapse: collapse;
  background-color: #2c274f;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  animation: fadeIn 1.2s;
  transition: transform 0.3s, box-shadow 0.3s;
}

.dataTables_scrollBody thead {
  visibility: hidden;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

table th {
  padding: 30px 10px;
}

table td {
  padding: 15px;
}

table th,
table td {
  /*  padding: 25px; */
  border-bottom: 2px solid #151136;

}

th,
td {
  white-space: nowrap;
}

div.dataTables_wrapper {
  margin: 0 auto;
}

div.container {
  width: auto;
}

.tier-container {
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold; /* Mettre le texte en gras */
  color: black;
}




table th[data-sort="garbage"] {
  width: 20%;
}

table th[data-sort="tier"] {
  /* Tier */
  width: 5%;
}

table th[data-sort="numeric"]:nth-child(4) {
  /* AVG.place */
  width: 5%;
}

table th[data-sort="numeric"]:nth-child(5),
/* Top1 */
table th[data-sort="numeric"]:nth-child(6),
/* Top2 */
table th[data-sort="numeric"]:nth-child(7),
/* Pick Ban 1 */
table th[data-sort="numeric"]:nth-child(9) {
  /* Pick Ban 2 */
  width: 6%;
}

table th:nth-child(8) {
  /* Good with */
  width: 100%;
}

table th:nth-child(1) {
  /* Rank */
  width: 5%;

}

td:nth-child(1) {
  text-align: center;
}

/* ... The rest of your CSS ... */


table th {
  /* background: linear-gradient(to right, #2e3b4e, #1a2435); */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 0.9em;
}

table tr:last-child td {
  border-bottom: none;
}

table tr:not(thead tr) {
  transition: transform 0.3s, background-color 0.3s;
}

table tr:not(thead tr):hover {
  background-color: #2c274f;
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}



table tr:nth-child(odd):not(thead tr):hover {
  background-color: #151136;
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}





.round-icon {
  width: 30px;
  height: 30px;

  margin-right: 15px;
}



.dataTables_filter input {
  padding: 10px 15px;
  border: 1px solid #555;
  border-radius: 6px;
  margin-bottom: 20px;
  background-color: #211d41;
  width: 30%;
  transition: box-shadow 0.3s;
  font-weight: 400;
  color: white;

}

.dataTables_filter input[type="text"]:focus {
  box-shadow: 0 0 15px rgba(58, 207, 227, 0.6) !important;
  outline: none !important;
}



.refresh-btn {
  background-color: transparent;
  border: none;
  margin-left: 10px;
  cursor: pointer;
}

.refresh-btn img {
  height: 30px;
  width: 30px;
}





.reset-button {
  background: linear-gradient(to right, #3acae7, #236b8e);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 10px 25px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-weight: 500;
}

.reset-button:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.reset-button:active {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

td img {
  vertical-align: middle;
  transition: transform 0.3s;
}

/* Styles pour les flèches de tri */








td:nth-child(1),
th:nth-child(1),
td:nth-child(2),
th:nth-child(2),
td:nth-child(3),
th:nth-child(3),
td:nth-child(4),
th:nth-child(4),
/* AVG.place */
td:nth-child(5),
th:nth-child(5),
/* Top1 */
td:nth-child(6),
th:nth-child(6),
/* Top2 */
td:nth-child(7),
th:nth-child(7),
/* Pick Ban 1 */
td:nth-child(8),
th:nth-child(8),
/* Good with */
td:nth-child(9),
th:nth-child(9) {
  color: white;
  text-align: center;
}


tbody tr:nth-child(odd) {
  background: #151136;
}


tr th {
  font-weight: 600;
}


td:nth-child(5),
th:nth-child(5) {
  font-weight: 600;
}

td:nth-child(6),
th:nth-child(6) {
  font-weight: 600;
}

.container-size a {
  color: #f7c345;
  font-weight: 600;
}


.container-size li {
  margin-bottom: 1em;
}

.container-size {
  max-width: 1100px;
  /* ou toute autre largeur que vous souhaitez définir */
  margin: 30px auto;


}
.container-size p {
  width: 100%;
margin: 0 auto;
display: block;
color: #b6becc;
line-height: 1.6;
}

.container-size ul{
  color: #b6becc;
line-height: 1.6;
}

.s{
  margin: 5px;
  background-color: #ff7e83;
  padding: 10px;
  border-radius: 5px;
  color: black;
  font-weight: bold;
}

.ss{
  margin: 5px;
  background-color: #ff4c53;
  padding: 10px;
  border-radius: 5px;
  color: black;
  font-weight: bold;
}

.a{
  margin: 5px;
  background-color: #ffbf7f;
  padding: 10px;
  border-radius: 5px;
  color: black;
  font-weight: bold;
}
.b{
  margin: 5px;
  background-color: #ffdf80;
  padding: 10px;
  border-radius: 5px;
  color: black;
  font-weight: bold;
}

.c{
  margin: 5px;
  background-color: #feff7f;
  padding: 10px;
  border-radius: 5px;
  color: black;
  font-weight: bold;
}

.d{
  margin: 5px;
  background-color: #7ffef8;
  padding: 10px;
  border-radius: 5px;
  color: black;
  font-weight: bold;
}








.container-size  h2 {
  line-height: 1.15;
letter-spacing: -.02em;
}

.background-first {
  position: relative;

  z-index: -1;

  max-width: 100%;
  height: auto;
  transform: none;
  left: auto;
  right: 0;

}

/* .sprite {
  background-image: url("../path/to/your/sprite.png");
  display: inline-block;

} */

.aatrox, .ahri, .akali, .akshan, .alistar, .amumu, .anivia, .annie, .aphelios, .ashe, .aurelionsol, .azir, .bard, .belveth, .blitzcrank, .brand, .braum, .briar, .caitlyn, .camille, .cassiopeia, .chogath, .corki, .darius, .diana, .draven, .drmundo, .ekko, .elise, .evelynn

{
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background-image: url("../img/test.png");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
}

.ezreal, .fiddlesticks, .fiora, .fizz, .galio, .gangplank, .garen, .gnar, .gragas, .graves, .gwen, .hecarim, .heimerdinger, .hwei, .illaoi, .irelia, .ivern, .janna, .jarvaniv, .jax, .jayce, .jhin, .jinx, .kaisa, .kalista, .karma, .karthus, .kassadin, .katarina, .kayle {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background-image: url("../img/sprite2.png");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
}

.kayn, .kennen, .khazix, .kindred, .kled, .kogmaw, .ksante, .leblanc, .leesin, .leona, .lillia, .lissandra, .lucian, .lulu, .lux, .malphite, .malzahar, .maokai, .masteryi, .milio, .missfortune, .monkeyking, .mordekaiser, .morgana, .naafiri, .nami, .nasus, .nautilus, .neeko, .nidalee {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background-image: url("../img/sprite3.png");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
}

.nilah, .nocturne, .nunu, .olaf, .orianna, .pantheon, .poppy, .pyke, .qiyana, .quinn, .rakan, .rammus, .reksai, .rell, .renataglasc, .renekton, .rengar, .riven, .rumble, .ryze, .samira, .sejuani, .senna, .seraphine, .sett, .shaco, .shen, .shyvana, .singed, .sion {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background-image: url("../img/sprite4.png");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
}
.sivir, .skarner, .smolder, .sona, .soraka, .swain, .sylas, .syndra, .tahmkench, .taliyah, .talon, .taric, .teemo, .thresh, .tristana, .trundle, .tryndamere, .twistedfate, .twitch, .udyr, .urgot, .varus, .vayne, .veigar, .velkoz, .vex, .vi, .viego, .viktor, .vladimir {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background-image: url("../img/sprite5.png");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
}
.volibear, .warwick, .xayah, .xerath, .xinzhao, .yasuo, .yone, .yorick, .yuumi, .zac, .zed, .zeri, .ziggs, .zilean, .zoe, .zyra {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background-image: url("../img/sprite6.png");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
}


.ezreal {
  background-position: 0 0; 
  }
  .fiddlesticks {
    background-position: -0px -1242px;
    }


    
.aatrox {
  background-position: 0 0;
}
.ahri {
  background-position: -29px 0;
}
.akali {
  background-position: 0 -29px;
}
.akshan {
  background-position: -29px -29px;
}
.alistar {
  background-position: -58px 0;
}
.amumu {
  background-position: -58px -29px;
}
.anivia {
  background-position: 0 -58px;
}
.annie {
  background-position: -29px -58px;
}
.aphelios {
  background-position: -58px -58px;
}
.ashe {
  background-position: -87px 0;
}
.aurelionsol {
  background-position: -87px -29px;
}
.azir {
  background-position: -87px -58px;
}
.bard {
  background-position: 0 -87px;
}
.belveth {
  background-position: -29px -87px;
}
.blitzcrank {
  background-position: -58px -87px;
}
.brand {
  background-position: -87px -87px;
}
.braum {
  background-position: -116px 0;
}
.briar {
  background-position: -116px -29px;
}
.caitlyn {
  background-position: -116px -58px;
}
.camille {
  background-position: -116px -87px;
}
.cassiopeia {
  background-position: 0 -116px;
}
.chogath {
  background-position: -29px -116px;
}
.corki {
  background-position: -58px -116px;
}
.darius {
  background-position: -87px -116px;
}
.diana {
  background-position: -116px -116px;
}
.draven {
  background-position: -145px 0;
}
.drmundo {
  background-position: -145px -29px;
}
.ekko {
  background-position: -145px -58px;
}
.elise {
  background-position: -145px -87px;
}
.evelynn {
  background-position: -145px -116px;
} 

.ezreal {
  background-position: 0 0;
}
.fiddlesticks {
  background-position: -30px 0;
}
.fiora {
  background-position: 0 -30px;
}
.fizz {
  background-position: -30px -30px;
}
.galio {
  background-position: -60px 0;
}
.gangplank {
  background-position: -60px -30px;
}
.garen {
  background-position: 0 -60px;
}
.gnar {
  background-position: -30px -60px;
}
.gragas {
  background-position: -60px -60px;
}
.graves {
  background-position: -90px 0;
}
.gwen {
  background-position: -90px -30px;
}
.hecarim {
  background-position: -90px -60px;
}
.heimerdinger {
  background-position: 0 -90px;
}
.hwei {
  background-position: -30px -90px;
}
.illaoi {
  background-position: -57px -87px;
}
.irelia {
  background-position: -90px -90px;
}
.ivern {
  background-position: -120px 0;
}
.janna {
  background-position: -120px -30px;
}
.jarvaniv {
  background-position: -120px -60px;
}
.jax {
  background-position: -117px -87px;
}
.jayce {
  background-position: 0 -120px;
}
.jhin {
  background-position: -30px -120px;
}
.jinx {
  background-position: -60px -120px;
}
.kaisa {
  background-position: -90px -120px;
}
.kalista {
  background-position: -120px -120px;
}
.karma {
  background-position: -150px 0;
}
.karthus {
  background-position: -150px -30px;
}
.kassadin {
  background-position: -150px -60px;
}
.katarina {
  background-position: -150px -90px;
}
.kayle {
  background-position: -150px -120px;
} 

.kayn {
  background-position: 0 0;
}
.kennen {
  background-position: -29px 0;
}
.khazix {
  background-position: 0 -29px;
}
.kindred {
  background-position: -29px -29px;
}
.kled {
  background-position: -58px 0;
}
.kogmaw {
  background-position: -58px -29px;
}
.ksante {
  background-position: 0 -58px;
}
.leblanc {
  background-position: -29px -58px;
}
.leesin {
  background-position: -58px -58px;
}
.leona {
  background-position: -87px 0;
}
.lillia {
  background-position: -87px -29px;
}
.lissandra {
  background-position: -87px -58px;
}
.lucian {
  background-position: 0 -87px;
}
.lulu {
  background-position: -29px -87px;
}
.lux {
  background-position: -58px -87px;
}
.malphite {
  background-position: -87px -87px;
}
.malzahar {
  background-position: -116px 0;
}
.maokai {
  background-position: -116px -29px;
}
.masteryi {
  background-position: -116px -58px;
}
.milio {
  background-position: -116px -87px;
}
.missfortune {
  background-position: 0 -116px;
}
.monkeyking {
  background-position: -29px -116px;
}
.mordekaiser {
  background-position: -58px -116px;
}
.morgana {
  background-position: -87px -116px;
}
.naafiri {
  background-position: -116px -116px;
}
.nami {
  background-position: -145px 0;
}
.nasus {
  background-position: -145px -29px;
}
.nautilus {
  background-position: -145px -58px;
}
.neeko {
  background-position: -145px -87px;
}
.nidalee {
  background-position: -145px -116px;
} 



.nilah {
  background-position: 0 0;
}
.nocturne {
  background-position: -29px 0;
}
.nunu {
  background-position: 0 -29px;
}
.olaf {
  background-position: -29px -29px;
}
.orianna {
  background-position: -58px 0;
}
.pantheon {
  background-position: -58px -29px;
}
.poppy {
  background-position: 0 -58px;
}
.pyke {
  background-position: -29px -58px;
}
.qiyana {
  background-position: -58px -58px;
}
.quinn {
  background-position: -87px 0;
}
.rakan {
  background-position: -87px -29px;
}
.rammus {
  background-position: -87px -58px;
}
.reksai {
  background-position: 0 -87px;
}
.rell {
  background-position: -29px -87px;
}
.renataglasc {
  background-position: -58px -87px;
}
.renekton {
  background-position: -87px -87px;
}
.rengar {
  background-position: -116px 0;
}
.riven {
  background-position: -116px -29px;
}
.rumble {
  background-position: -116px -58px;
}
.ryze {
  background-position: -116px -87px;
}
.samira {
  background-position: 0 -116px;
}
.sejuani {
  background-position: -29px -116px;
}
.senna {
  background-position: -58px -116px;
}
.seraphine {
  background-position: -87px -116px;
}
.sett {
  background-position: -116px -116px;
}
.shaco {
  background-position: -145px 0;
}
.shen {
  background-position: -145px -29px;
}
.shyvana {
  background-position: -145px -58px;
}
.singed {
  background-position: -145px -87px;
}
.sion {
  background-position: -145px -116px;
} 



.sivir {
  background-position: 0 0;
}
.skarner {
  background-position: -30px 0;
}
.smolder {
  background-position: 0 -30px;
}
.sona {
  background-position: -30px -30px;
}
.soraka {
  background-position: -60px 0;
}
.swain {
  background-position: -60px -30px;
}
.sylas {
  background-position: 0 -60px;
}
.syndra {
  background-position: -30px -60px;
}
.tahmkench {
  background-position: -60px -60px;
}
.taliyah {
  background-position: -90px 0;
}
.talon {
  background-position: -90px -30px;
}
.taric {
  background-position: -90px -60px;
}
.teemo {
  background-position: 0 -90px;
}
.thresh {
  background-position: -30px -90px;
}
.tristana {
  background-position: -60px -90px;
}
.trundle {
  background-position: -90px -90px;
}
.tryndamere {
  background-position: -120px 0;
}
.twistedfate {
  background-position: -120px -30px;
}
.twitch {
  background-position: -120px -60px;
}
.udyr {
  background-position: -120px -90px;
}
.urgot {
  background-position: 0 -120px;
}
.varus {
  background-position: -30px -120px;
}
.vayne {
  background-position: -60px -120px;
}
.veigar {
  background-position: -90px -120px;
}
.velkoz {
  background-position: -120px -120px;
}
.vex {
  background-position: -150px 0;
}
.vi {
  background-position: -150px -30px;
}
.viego {
  background-position: -150px -60px;
}
.viktor {
  background-position: -150px -90px;
}
.vladimir {
  background-position: -150px -120px;
} 



.volibear {
  background-position: 0 0;
}
.warwick {
  background-position: -29px 0;
}
.xayah {
  background-position: 0 -29px;
}
.xerath {
  background-position: -29px -29px;
}
.xinzhao {
  background-position: -58px 0;
}
.yasuo {
  background-position: -58px -29px;
}
.yone {
  background-position: 0 -58px;
}
.yorick {
  background-position: -29px -58px;
}
.yuumi {
  background-position: -58px -58px;
}
.zac {
  background-position: -87px 0;
}
.zed {
  background-position: -87px -29px;
}
.zeri {
  background-position: -87px -58px;
}
.ziggs {
  background-position: 0 -87px;
}
.zilean {
  background-position: -29px -87px;
}
.zoe {
  background-position: -58px -87px;
}
.zyra {
  background-position: -87px -87px;
} 


/* Bouton avec background transparent et bordure colorée */
.custom-btn {
  color: white;
  background: transparent;   /* Rend l'arrière-plan transparent */
  border: 1px solid #555; /* Ajoute une bordure bleue. Changez la couleur selon votre préférence */
  border-radius: 0px;       /* Arrondit les coins du bouton */
  padding: 10px 15px;       /* Espacement intérieur pour le bouton */
  margin: 0px;            /* Marge autour du bouton pour éviter qu'il ne touche les éléments adjacents */
  transition: 0.3s;         /* Effet de transition pour les hover et focus */
  background-color: #211d41;
  /* Style pour l'image à l'intérieur du bouton, si nécessaire */
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.custom-btn:hover {
  background-color: rgba(52, 152, 219, 0.1); /* Ajoute un léger fond bleu au survol */
  border-color: #2980b9; /* Rend la bordure légèrement plus foncée au survol */
}

.custom-btn:focus {
  outline: none; /* Supprime le contour par défaut au focus */
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.7); /* Ajoute une ombre pour un effet de focus */
}
/* Pour le premier custom-btn */
.custom-btn-right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Pour le dernier custom-btn */
.custom-btn-left {
  border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}


/* .bg-container {
  background-color: #0e0e23;
  margin-right: auto;
  margin-left: auto;
} */



.title-1 {
  color: white;
  text-align: center;
  padding-top: 10px;
}
.title-1 div {
  text-transform: uppercase;
  color : #f7c345; 
}
.container-size {
  color: white;

}

/* navbar */

nav {
  background: #0e0e23;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 70px;
z-index: 20;
}

nav li a {
  text-decoration: none;
  color: #b3b4d0;
}

nav .logo {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
  position: absolute;
}

nav .nav-items {
  display: flex;
  flex: 1;
  height: 70px;
  justify-content: center;

  border-bottom: 1px rgb(255, 255, 255) solid;

}





nav .nav-items li {
  list-style: none;
  padding: 0 15px;

}

nav .nav-items li {
  height: 100%;
  
  /* Ceci centrera verticalement le contenu à l'intérieur du li */
}

nav .nav-items ul {
  display: flex;
  align-items: center;
}

nav .nav-items a:hover {
  box-shadow: 0 1px 0 0 #f7c345;
 /* background: #11132c; */
}



nav .nav-items li a {
  height: 100%;
  display: flex;
  align-items: center;
  /* Ceci centrera verticalement le texte de l'ancre */
  padding: 0 15px;
  /* Ajoutez ceci pour donner du padding horizontal */
  font-weight: 600;
}

nav .nav-items li a:hover {
  color: #f7c345;
}

nav form {
  display: flex;
  height: 40px;
  padding: 2px;
  background: #ffffff;
  min-width: 18% !important;
  border-radius: 2px;
  border: 1px solid rgba(155, 155, 155, 0.2);
  margin-bottom: auto;
  margin-top: auto;
}

nav form .search-data {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: #bebfd6;
  font-size: 17px;
  border: none;
  font-weight: 500;
  background: none;
}

nav form button {
  padding: 0 15px;
  color: #0e0e23;
  font-size: 17px;
  background: #ffffff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

nav form button:hover {
  background: #fffffe;
}

nav .menu-icon,
nav .cancel-icon,
nav .search-icon {
  width: 40px;
  text-align: center;
  margin: 0 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  display: none;
}

nav .menu-icon span,
nav .cancel-icon,
nav .search-icon {
  display: none;
}






.suggestions-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  max-height: 150px;
  overflow-y: auto;
  position: absolute;
  width: calc(100% - 4px);
  border: 1px solid #aaa;
  display: none;
}

.search-data:focus+#suggestions {
  display: block;
}

.suggestions-list li {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.suggestions-list li:hover {
  background-color: #f7f7f7;
}

.suggestions-list li:last-child {
  border-bottom: none;
}



footer {
  font-weight: 500;
  margin-top:80px;
  color:#fff;

  
}

.footer-bottom{
  background-color:#21214a;
  padding: 20px 0;
}


.hub-footer {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #21214a;;
  color: white;
  padding: 20px;
  
}

.hub-section {
  flex: 1 1 20%; /* Adjusts based on minimum width */
  margin: 10px;
}

.hub-brand .title-footer, .hub-section .title-footer {
  color: #f7c345;
  font-weight: 700;
  font-size: 2em;
  text-transform: uppercase;
}

.title-underline {
  height: 2px;
  background-color: #f7c345;
  margin: 5px 0;
  width: 75%;
}

.hub-brand p {
  font-size: 0.9em;
  max-width: 300px;
}

.lol-list, .guide-list {
  list-style: none;
  padding: 0;
}

.lol-list li {
  margin: 10px 0;
  display: flex;
  align-items: center;
  width: 100%; /* Full width for individual brawler entries */
}
.lol-list span {
  margin-bottom: 13px;
  font-size: 1.1em;
  font-weight: 700;
}



.guide-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.new-cat{
  flex-direction: column;
  display: flex;
  margin-left: 20px;
}

.guide-list li {
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%; /* Adjusts for 2 items per line */
}

.lol-list img{
  width: 100px; /* Adjust based on your preference */
  height: 100px;
  margin-bottom: 5px;
}

.guide-list img {
  width: 190px; /* Adjust based on your preference */
  height: 100px;
  margin-bottom: 5px;
}


.lol-list li small, .guide-list li small {
  color: #62c0ff;
}

.social-media a {
  margin-right: 10px;
}

@media (max-width: 768px) {
  .hub-footer {
      flex-direction: column;
      align-items: center;
  }

  .hub-section {
      flex-basis: 100%;
      text-align: center;
  }

  .lol-list li, .guide-list li {
      flex-basis: 100%; /* One item per row on smaller screens */
  }
}

@media (max-width: 480px) {
  .lol-list li, .guide-list li {
      flex-basis: 100%; /* One item per row on very small screens */
  }
}








.footer-content,
.footer-copyright {
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  text-align:center
}
.footer-content {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid #fff;
  padding-bottom:20px
}
.footer-content a,
.footer-copyright p {
  color:#fff;
  margin:0 15px;
  transition:color .3s ease
}
.footer-content a:hover {
  color:#ddd
}
.footer-content img {
  width:24px;
  height:24px;
  margin:0 10px
}
.footer-copyright p {
  margin-top:10px
}


.legal {

  background-color: #22266b;
  color: #333;
  padding: 20px;
}



.legal-mention {

  margin-top: 60px;
  margin-bottom: 60px;
}

.legalWrapper_zx89 {

  max-width: 800px;
  background-color: #fff;
  padding: 30px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.legalTitle_pq42 {
  text-align: center;
  color: #22266b;
  border-bottom: 2px solid #22266b;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.legalSection_xk47 {
  margin-bottom: 20px;
}

.sectionTitle_mn23 {
  font-weight: bold;
  margin-bottom: 15px;
}








#suggestions {
  max-height: 150px;
  overflow-y: scroll;
  border: 1px solid #ddd;
  border-radius: 4px;
  position: absolute;
  /* ceci la positionne relativement à son conteneur parent */
  top: 100%;
  /* juste en dessous de la barre de recherche */
  left: 0;
  /* aligné à gauche avec la barre de recherche */
  width: 100%;
  /* pour s'étendre à toute la largeur du conteneur parent */
  display: none;
  /* initialement caché */
  z-index: 1;
  /* pour être au-dessus des autres éléments */
}


#suggestions li {
  list-style: none;
  padding: 8px 12px;
  cursor: pointer;
}

#suggestions li:hover {
  background-color: #f5f5f5;
}

#suggestions li a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}



.search-container-first {
  position: relative;
  display: inline-block;
  margin-top: auto;
  margin-bottom: auto;
  /* pour permettre d'autres éléments à ses côtés */
}


.search-container-first input {
  height: 40px;
  border-radius: 6px;
  background-color: #45456f;
  border: 2px solid transparent;
  font-size: 16px;
  color: #fff;
  padding: 0 50px 0 20px;



}

.search-container-first input[type="text"] {
  appearance: none;
  box-shadow: none;
  transition: 0.4s;
  border-color: #f9ab00;
}



@media (max-width: 1245px) {
  nav {
    padding: 0 50px;
  }

  nav .logo {
    position: relative;
  }
}

@media (max-width: 1140px) {


nav .nav-items ul {
  display: block;
}


  nav {
    padding: 0px;
    position: fixed;
    margin: auto;
    width: 100%;
  }

  nav .logo {
    flex: 2;
    text-align: center;

  }

  nav .nav-items {
    position: fixed;
    z-index: 99;
    top: 70px;
    width: 100%;
    left: -100%;
    height: 100%;
    padding: 10px 50px 0 50px;
    text-align: center;
    background: #0e0e23;
    display: inline-block;
    transition: left 0.3s ease;

  }

 #newTable_wrapper{
    z-index: 2!important;
  }
  nav .nav-items.active {
    left: 0px;
  }

  nav .nav-items li {
    line-height: 40px;
    margin: 30px 0;
    display: flex;
    height: auto;

  }

  nav .nav-items li a {
    font-size: 20px;
    margin: auto;
  }

  nav form {
    position: absolute;
    top: 80px;
    right: 50px;
    opacity: 0;
    pointer-events: none;
    transition: top 0.3s ease, opacity 0.1s ease;
  }

  nav form {
    left: 100%;
  }


  nav form.active {
    top: 95px;
    opacity: 1;
    pointer-events: auto;
  }

  nav form:before {
    position: absolute;
    content: "";
    top: -13px;
    right: 0px;
    width: 0;
    height: 0;
    z-index: -1;
    border: 10px solid transparent;
    border-bottom-color: #1e232b;
    margin: -20px 0 0;
  }

  nav form:after {
    position: absolute;
    content: '';
    height: 60px;
    padding: 2px;
    background: #1e232b;
    border-radius: 2px;
    min-width: calc(100% + 20px);
    z-index: -2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  nav .menu-icon {
    display: block;
  }

  nav .search-icon,
  nav .menu-icon span {
    display: block;
  }

  nav .menu-icon span.hide,
  nav .search-icon.hide {
    display: none;
  }

  nav .cancel-icon.show {
    display: block;
  }
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

.content header {
  font-size: 30px;
  font-weight: 700;
}

.content .text {
  font-size: 30px;
  font-weight: 700;
}

.space {
  margin: 10px 0;
}

nav .logo.space {
  color: red;
  padding: 0 5px 0 0;
}

@media (max-width: 980px) {
  .big-container{
    padding: 0 30px;
}
  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon {
    margin: 0 20px;
  }

  nav form {
    right: 30px;
  }




}

@media (max-width: 350px) {

  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon {
    margin: 0 10px;
    font-size: 16px;
  }
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content header {
  font-size: 30px;
  font-weight: 700;
}

.content .text {
  font-size: 30px;
  font-weight: 700;
}

.content .space {
  margin: 10px 0;
}

/* Cache les colonnes pour les écrans mobiles */
@media (max-width: 768px) {
  .desktop-col {
    display: none !important;
  }
}




/* news */

.site-header {
  background-color: #0e0e23;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}

.filter-menu {
  margin-top: 10px;
}

.filter-btn {
  padding: 10px 20px;
  border: none;
  background-color: #444;
  color: white;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 5px;
  transition: background-color 0.3s; /* Smooth transition for background color */
}

.filter-btn.active {
  background-color: #888; /* Brighter and more distinct color for active button */
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Adding a shadow for better emphasis */
}

.news-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}
.news-item:hover {
  transform: scale(1.03); /* Slight scale up on hover to indicate interactivity */
}
.news-item {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  width: calc(33% - 20px);
  box-sizing: border-box;
  border-radius: 10px;
  transition: transform 0.3s; /* Adding a subtle effect when news items change */
}


.news-item[data-category="event"] .news-category {
  background-color: #e91e63; /* Pinkish color for events */
}

.news-item[data-category="news"] .news-category {
  background-color: #2196f3; /* Blue color for news */
}

.news-item[data-category="update"] .news-category {
  background-color: #4caf50; /* Green color for updates */
}


.news-title, .news-date, .news-summary {
  margin: 5px 0;
}

.news-image {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  height: 150px;
}


.read-more {
  display: block;
  text-decoration: none;
  color: #0077cc;
  margin-top: 10px;
}


.news-category {
  display: inline-block;
  padding: 5px;
  color: #ffffff;
  border-radius: 5px;
  font-weight: bold;
}


@media (max-width: 768px) {
  .news-item {
      width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .news-item {
      width: 100%;
  }
}




/* solo news */


.game-news-banner {
  background-color: #0e0e23;
  padding: 20px;
  text-align: center;
}

.game-news-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-news-main-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.game-news-meta {
  margin-top: 10px;
  font-size: 0.9rem;
}

.game-news-title{
  color: white;
}

.game-news-published, .game-news-type {
  background-color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 10px;
}

.game-news-article {
  margin-top: 20px;
  text-align: justify;
  padding: 0 15%;
  line-height: 1.6;
  color: #6f7d95;
}

.game-news-article h1 {
  text-align: center;
}

.game-news-article h1, .game-news-article h2, .game-news-article h3 {

  color: white;
}


@media (max-width: 768px) {
  .game-news-article {
      padding: 0 10px;
  }
}


/* Assurez-vous que .tierD est appliquée au td dans votre JavaScript */
/* General style for all tier labels */
.tier-label {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  color: white;
  text-align: center;
  width: auto;
  min-width: 20px; /* Adjust based on content */
}

/* Specific colors for each tier */
.tierSplus { background-color: #ff4c53; } /* Example color for S+ */
.tierS { background-color: #ff7e83; }    /* Example color for S */
.tierA { background-color: #ffbf7f; }    /* Lighter green for A */
.tierB { background-color: #ffdf80; }    /* Example color for B */
.tierC { background-color: #feff7f; }    /* Darker red for C */
.tierD { background-color: #7ffef8; }    /* Example color for D */


.tierSplus, .tierS, .tierA, .tierB , .tierC, .tierD {
  color: black;
  font-weight: 700;
}