/* GENERAL */
body {
  background: linear-gradient(to right, #f5cfa9, #a9f5e6);
  color: var(--txt-clr);
  font-family: var(--df-font);
  font-size: var(--df-text-size);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}


/* HEADER */
header {
  background-color: var(--pmr-clr);
  color: var(--wth-clr);
  font-family: var(--title-font);
  text-align: center;
  padding: 10px 0;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

#logo {
  width: 50px;
}

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

header h1 {
  font-size: var(--df-title-size);
  margin: 0;
}

/* MENU */
nav {
  margin-top: 15px;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.menu li {
  position: relative;
}

.menu li a {
  color: var(--wth-clr);
  text-decoration: none;
  padding: 5px 15px;
  border-radius: 10px;
}

.menu button {
  all: unset;
  color: var(--wth-clr);
  font-family: var(--title-font);
  font-size: var(--df-text-size);
  padding: 10px 10px;
  border-radius: 10px;
}

.menu li a:hover {
  background-color: var(--wth-clr);
  color: var(--blk-clr);
}

.menu button:hover {
  background-color: var(--wth-clr);
  color: var(--blk-clr);
}

.menu li .submenu {
  background-color: var(--sdr-clr);
  text-align: center;
  display: none;
  position: absolute;
  padding: 10px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  list-style: none;
  border-radius: 10px;
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.menu li .submenu li {
  margin-bottom: 5px;
}

.menu li .submenu li a {
  padding: 5px 10px;
  display: block;
}

.menu li:hover .submenu {
  display: block;
}

.menu-icon {
  display: none;
  cursor: pointer;
  font-size: var(--df-title-size);
  position: absolute;
  top: 20px;
  right: 20px;
  transition: transform 0.3s ease;
}

.menu-icon::before {
  content: '☰';
}

.menu.show+.menu-icon::before {
  content: '✖';
  transform: rotate(45deg);
}


/* CONTENU */
main {
  flex: 1;
  padding: 20px;
  text-align: center;
}

section {
  border: 2px solid #666;
  padding: 10px 0;
  border-radius: 10px;
}

p {
  margin: 0;
  padding-top: 5px;
}

/* BANDE D'ANNONCE */
.announcement-bar {
  display: block;
  position: relative;
  background-color: var(--pmr-clr);
  white-space: nowrap;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.announcement-text p {
  display: inline-block;
  color: var(--wth-clr);
  font-family: var(--btn-font);
  padding-left: 100%;
  animation: scroll-text 60s linear infinite 1s;
}

@keyframes scroll-text {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

.close-announce {
  background-color: #999;
  position: absolute;
  color: var(--blk-clr);
  font-size: var(--df-text-size);
  right: 10px;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
}

.close-announce:hover {
  background-color: var(--del-hvr);
  color: var(--del-clr);
  transition: 0.3s ease-in-out;
}


/* HERO */
.hero {
  border: none;
  padding: 10px 0;
}

#hero-img {
  width: 40%;
  display: block;
  margin: 0 auto;
  border-radius: 100px 100px 50px 50px;
  box-shadow: 0 2px 5px #000;
  animation: hero-img 2s linear infinite alternate;
}

@keyframes hero-img {
  from {
    transform: translate(-100px);
  }

  to {
    transform: translate(100px);
  }
}

.hero h1 {
  color: var(--pmr-clr);
  font-size: var(--df-title-size);
  margin: 5px auto;
}

.letter {
  display: inline-block;
  opacity: 0;
}

/* Animations */
.slide-in-left {
  animation: slideInLeft 1s forwards;
}

@keyframes slideInLeft {
  0% {
    transform: scale(3) translateX(-100%);
    opacity: 0.5;
  }

  100% {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
}

.slide-in-top {
  animation: slideInTop 1s forwards;
}

@keyframes slideInTop {
  0% {
    transform: scale(3) translateY(-100%);
    opacity: 0.5;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.rotate-in {
  animation: rotateIn 1s forwards;
}

@keyframes rotateIn {
  0% {
    transform: scale(3) rotate(-360deg);
    opacity: 0.5;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}


/* RECHERCHE ET FILTRES */
.search-filters {
  display: inline-block;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}

#search-bar {
  width: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  border-bottom: 2px solid #000;
  border-radius: 10px;
}

.recent-searches {
  background-color: var(--wth-clr);
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: auto;
  margin-top: 10px;
  padding-bottom: 0;
  width: 50%;
  padding: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.recent-searches ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-searches li {
  border-bottom: 1px #ccc solid;
  padding: 5px;
  margin: auto;
  cursor: pointer;
  transition: 0.5s ease;
}

.recent-searches li:hover {
  background-color: var(--pop-bg);
}

.delete-search {
  all: unset;
  font-size: var(--df-text-size);
  cursor: pointer;
  margin-left: 10px;
  padding: 5px;
  border-radius: 50%;
}

.delete-search:hover {
  background-color: var(--del-hvr);
  transition: 0.2s ease-in-out
}

#clear-all-searches {
  display: block;
  background-color: var(--del-clr);
  color: var(--wth-clr);
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s ease;
}

#clear-all-searches:hover {
  background-color: var(--del-hvr);
}

.filters {
  display: inline;
  gap: 20px;
}

.filters select {
  padding: 10px;
  border: 1px solid #ccc;
  border-bottom: 2px solid #000;
  border-radius: 10px;
}


/* JEUX ET APPLICATION */
.gamapp {
  color: var(--pmr-clr);
  font-size: var(--df-title-size);
  margin-bottom: 0;
}

.games,
.apps {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

.game,
.app {
  display: none;
  border: 1px solid #000;
  padding: 20px;
  width: 300px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game {
  background: var(--game-bg);
  border-radius: 20px 50px 20px 50px;
}

.app {
  background: var(--app-bg);
  border-radius: 50px 20px 50px 20px;
}

.game:nth-child(-n+3),
.app:nth-child(-n+3) {
  display: block;
}

.game:hover,
.app:hover {
  border-radius: 50px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
  transition: 0.6s ease-in-out;
}

.game h2,
.app h2 {
  margin-top: 0;
  color: var(--blk-clr);
}

.game p,
.app p {
  font-size: var(--df-text-size);
  color: var(--wth-clr);
}

.game a,
.app a {
  background-color: var(--blk-clr);
  color: var(--wth-clr);
  font-family: var(--btn-font);
  text-decoration: none;
  border-radius: 10px;
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.game a:hover,
.app a:hover {
  background-color: var(--txt-clr);
  border-radius: 50px;
  transition: 0.6s ease-in-out;
}

#soon {
  background-color: var(--del-clr);
  pointer-events: none;
  opacity: 0.5;
}


/* VOIR PLUS / VOIR MOINS */
.gamapp-btn {
  display: flex;
  margin: auto;
  justify-content: center;
  gap: 20px;
}

.toggle-btn,
.all-gamapp {
  all: unset;
  color: var(--txt-clr);
  margin: 10px 0;
  font-size: var(--df-text-size);
  font-weight: bolder;
  cursor: pointer;
}

.toggle-btn:hover,
.all-gamapp:hover {
  color: var(--sdr-clr);
}


/* LIGNE HORIZONTALE*/
hr {
  border: none;
  height: 1px;
  background-color: #999;
  width: 80%;
  margin: 20px auto;
}


/* SOUTIEN */
.soutien {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.kkiapay-button,
#pay-btn,
.direct {
  all: unset;
  color: var(--txt-clr);
  font-size: var(--df-text-size);
  cursor: pointer;
  font-weight: bolder;
}

.kkiapay-button:hover,
#pay-btn:hover,
.direct:hover {
  color: var(--sdr-clr);
}


/* POPUP */
.popup,
.rate-popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background: var(--pop-bg);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  width: 80%;
  max-width: 500px;
  position: relative;
}

.popup-content h2 {
  color: var(--pmr-clr);
}

.popup-close,
.popup-content .close-btn {
  font-size: var(--df-title-size);
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.popup-close:hover,
.popup-content #popup-close-btn:hover {
  font-weight: bolder;
  color: var(--del-hvr);
}

#poplogo {
  width: 100px;
}

#popup a {
  color: var(--txt-clr);
  text-decoration: none;
  font-weight: bolder;
}

/* POPUP AVIS */
.emoji-container {
  margin: 10px 0;
}

.emoji {
  font-size: var(--df-text-size);
  cursor: pointer;
  margin: 0 5px;
  opacity: 0.5;
}

.emoji:hover {
  font-size: var(--df-title-size);
  opacity: 0.8;
  transition: 0.3s ease-in-out;
}

.emoji.selected {
  font-size: calc(var(--df-title-size)*var(--nb));
  opacity: 1;
}

#comment {
  padding: 10px;
  width: 80%;
  border-radius: 10px;
  border: 1px solid var(--blk-clr);
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 10px;
}

#submit-rating-btn {
  background-color: var(--blk-clr);
  color: var(--wth-clr);
  border: none;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: var(--df-text-size);
  cursor: pointer;
  border-radius: 5px;
}

#submit-rating-btn:hover {
  background-color: var(--txt-clr);
}

/* FOOTER */
footer {
  background-color: var(--pmr-clr);
  color: var(--wth-clr);
  font-family: var(--title-font);
  text-align: center;
  display: block;
  justify-content: center;
  position: relative;
  bottom: 0;
  width: 100%;
}

footer .actions {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

footer .userful,
footer .more {
  border: none;
  padding: 0;
}

footer h3 {
  font-family: var(--btn-font);
  padding: 0 5px;
  margin-bottom: 1rem;
  font-size: calc(var(--df-text-size)*var(--nb));
}

footer p {
  margin-bottom: 10px;
}

footer ul,
footer .action li {
  list-style-type: none;
  padding: 0;
}

footer a {
  all: unset;
  color: var(--wth-clr);
  font-family: var(--title-font);
  padding: 0 10px;
  font-weight: lighter;
}

footer a:hover {
  font-weight: bolder;
  text-decoration: underline;
}

footer .bottom {
  display: flex;
  margin: 10px auto;
  justify-content: center;
  gap: 10px;
}

footer .bottom a {
  border: 1px solid var(--wth-clr);
  border-radius: 50%;
  margin-right: 15px;
}

footer .bottom a:hover {
  background-color: var(--wth-clr);
  color: var(--blk-clr);
  text-decoration: none;
}


/* TRADUCTION */
.notranslate {
  translate: no;
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
  }

  .menu {
    display: none;
    flex-direction: column;
    background-color: var(--sdr-clr);
    position: absolute;
    top: 60px;
    right: 20px;
    width: 200px;
    padding: 20px 0;
    border-radius: 10px;
    gap: 20px;
  }

  .menu li {
    width: 100%;
  }

  .menu-icon {
    display: block;
  }

  .menu.show {
    display: flex;
  }

  .menu li .submenu {
    width: 100%;
  }

  .hero h1 {
    font-size: calc(var(--df-title-size)/var(--nb));
  }

  #hero-img {
    border-radius: 120px 120px 50px 50px;
    animation: cover-image 3s linear infinite alternate;
  }

  @keyframes cover-image {
    from {
      transform: translate(-20px);
    }

    to {
      transform: translate(20px);
    }
  }
}


/* ANIMATION DE CHARGEMENT */
.loader {
  display: flex;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 9999;
}

.loader p {
  color: #fff;
  position: absolute;
  text-align: center;
  margin-top: 100px;
  padding: 0 20px;
  animation: load-text 0.5s ease-in-out infinite alternate;
}

@keyframes load-text {
  to {
    translate: -10px;
  }

  from {
    translate: 10px;
  }
}

.loading:before,
.loading:after {
  position: absolute;
  background-color: #fff;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  content: '';
  animation: sliding-tile 1.25s infinite linear;
}

.loading:after {
  animation: sliding-tile 1.25s -0.625s infinite linear;
}

@keyframes sliding-tile {
  0% {
    transform: translate(-50%, -50%) translate(-50%, -50%);
  }

  25% {
    transform: translate(-50%, -50%) translate(50%, -50%);
  }

  50% {
    transform: translate(-50%, -50%) translate(50%, 50%);
  }

  75% {
    transform: translate(-50%, -50%) translate(-50%, 50%);
  }

  100% {
    transform: translate(-50%, -50%) translate(-50%, -50%);
  }
}


/* PERSONNALISATION */
#theme-message,
#font-message,
#size-message {
  display: none;
  position: fixed;
  background-color: var(--sdr-clr);
  color: var(--wth-clr);
  text-align: center;
  border-radius: 5px;
  padding: 5px 10px;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1000;
}

.perso {
  display: grid;
  position: fixed;
  background-color: var(--sdr-clr);
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  top: 50%;
  right: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  transition: height 0.5s ease-in-out;
}

#perso-content {
  transition: opacity 0.5s ease-in-out;
}

.hidden {
  display: none;
}

.perso select {
  background-color: var(--sdr-clr);
  color: var(--wth-clr);
  border: none;
  border-bottom: 1px solid var(--wth-clr);
  text-align: center;
  margin: 0;
  padding: 5px;
}

#toggle-perso {
  font-size: var(--df-text-size);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#toggle-perso:hover {
  transform: scale(0.8) rotate(180deg);
  transition: 0.3s ease-in-out;
}


/* THEME */
/* --- Clair --- */
body.light {
  background: linear-gradient(to right, #b0afad, #989797);
  color: var(--thm-blk);
}

body.light .perso select {
  background-color: var(--thm-wth);
  color: var(--thm-blk);
  border-bottom: 1px solid var(--thm-blk);
}

body.light #theme-message,
body.light #font-message,
body.light #size-message,
body.light .menu li a:hover,
body.light .menu button:hover,
body.light .recent-searches li:hover,
body.light .game a,
body.light .app a,
body.light hr,
body.light #submit-rating-btn,
body.light footer .bottom a:hover {
  background-color: var(--thm-blk);
  color: var(--thm-wth);
}

body.light header,
body.light footer,
body.light .perso {
  background-color: var(--thm-wth);
  color: var(--thm-blk);
}

body.light .menu li a,
body.light .menu button,
body.light .announcement-text p,
body.light .hero h1,
body.light .gamapp,
body.light .game h2,
body.light .app h2,
body.light .game p,
body.light .app p,
body.light .toggle-btn,
body.light .kkiapay-button,
body.light #pay-btn,
body.light .direct,
body.light .popup-content h2,
body.light #popup a,
body.light .popup-close,
body.light .popup-content .close-btn,
body.light footer a {
  color: var(--thm-blk);
}

body.light .menu li .submenu {
  background-color: var(--thm-wth);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

body.light .announcement-bar,
body.light .recent-searches,
body.light .popup-content {
  background-color: var(--thm-wth);
}

body.light .cover-image {
  box-shadow: 0 2px 5px #333;
}

body.light #search-bar {
  border-bottom: 2px solid #333;
}

body.light .recent-searches li {
  border-bottom: 1px #000 solid;
}

body.light .game,
body.light .app {
  border: 1px solid #000;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

body.light .game {
  background: var(--wth-game);
}

body.light .app {
  background: var(--wth-app);
}

body.light .game a:hover,
body.light .app a:hover {
  background-color: var(--blk-clr);
}

body.light #soon {
  color: var(--thm-wth);
}

body.light .toggle-btn:hover,
body.light .kkiapay-button:hover,
body.light #pay-btn:hover,
body.light .direct:hover,
body.light .popup-close:hover {
  color: var(--del-clr);
}

body.light .popup,
body.light .rate-popup {
  background-color: rgba(0, 0, 0, 0.5);
}

body.light #submit-rating-btn:hover {
  background-color: var(--blk-clr);
  ;
}

body.light footer .bottom a {
  border: 1px solid var(--thm-blk);
}

/* --- Sombre --- */
body.dark {
  background: linear-gradient(to right, #2d2d2d, #383838);
  color: var(--thm-wth);
}

body.dark .perso select {
  background-color: var(--thm-blk);
  color: var(--thm-wth);
  border-bottom: 1px solid var(--thm-wth);
}

body.dark #theme-message,
body.dark #font-message,
body.dark #size-message,
body.dark .menu li a:hover,
body.dark .menu button:hover,
body.dark .recent-searches li:hover,
body.dark .game a,
body.dark .app a,
body.dark hr,
body.dark #submit-rating-btn,
body.dark footer .bottom a:hover {
  background-color: var(--thm-wth);
  color: var(--thm-blk);
}

body.dark header,
body.dark footer,
body.dark .perso {
  background-color: var(--thm-blk);
  color: var(--thm-wth);
}

body.dark .menu li a,
body.dark .menu button,
body.dark .announcement-text p,
body.dark .hero h1,
body.dark .gamapp,
body.dark .game h2,
body.dark .app h2,
body.dark .game p,
body.dark .app p,
body.dark .toggle-btn,
body.dark .kkiapay-button,
body.dark #pay-btn,
body.dark .direct,
body.dark .popup-content h2,
body.dark #popup a,
body.dark .popup-close,
body.dark .popup-content .close-btn,
body.dark footer a {
  color: var(--thm-wth);
}

body.dark .menu li .submenu {
  background-color: var(--thm-blk);
  box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.5);
}

body.dark .announcement-bar,
body.dark .recent-searches,
body.dark .popup-content {
  background-color: var(--thm-blk);
}

body.dark .cover-image {
  box-shadow: 0 2px 5px #ddd;
}

body.dark #search-bar {
  border-bottom: 2px solid #ccc;
}

body.dark .recent-searches li {
  border-bottom: 1px #fff solid;
}

body.dark .game,
body.dark .app {
  border: 1px solid #fff;
  box-shadow: 0 5px 5px rgba(255, 255, 255, 0.5);
}

body.dark .game {
  background: var(--blk-game);
}

body.dark .app {
  background: var(--blk-app);
}

body.dark .game a:hover,
body.dark .app a:hover {
  background-color: var(--wth-clr);
}

body.dark #soon {
  color: var(--thm-wth);
}

body.dark .toggle-btn:hover,
body.dark .kkiapay-button:hover,
body.dark #pay-btn:hover,
body.dark .direct:hover,
body.dark .popup-close:hover {
  color: var(--del-hvr);
}

body.dark .popup,
body.dark .rate-popup {
  background-color: rgba(255, 255, 255, 0.5);
}

body.dark #submit-rating-btn:hover {
  background-color: var(--wth-clr);
  ;
}

body.dark footer .bottom a {
  border: 1px solid var(--thm-wth);
}

/* Mobile */
@media (max-width: 768px) {
  body.light .menu {
    background-color: var(--wth-clr);
  }

  body.dark .menu {
    background-color: var(--blk-clr);
  }
}

/* POLICE */
/* --- Moderne --- */
body.modern,
body.modern select,
body.modern input,
body.modern #comment,
body.modern .kkiapay-button,
body.modern #pay-btn {
  font-family: var(--mdn-font);
}

body.modern header,
body.modern .menu button,
body.modern footer,
body.modern footer a {
  font-family: var(--mdn-title);
}

body.modern .announcement-text p,
body.modern .game a,
body.modern .app a,
body.modern footer h3 {
  font-family: var(--mdn-btn);
}

/* --- Classique --- */
body.tradi,
body.tradi select,
body.tradi input,
body.tradi #comment,
body.tradi .kkiapay-button,
body.tradi #pay-btn {
  font-family: var(--trd-font);
}

body.tradi header,
body.tradi .menu button,
body.tradi footer,
body.tradi footer a {
  font-family: var(--trd-title);
}

body.tradi .announcement-text p,
body.tradi .game a,
body.tradi .app a,
body.tradi footer h3 {
  font-family: var(--trd-btn);
}

/* TAILLE */
/* --- Minimale --- */
body.mini,
body.mini .kkiapay-button,
body.mini #pay-btn,
body.mini .direct,
body.mini .emoji,
body.mini #submit-rating-btn,
body.mini #toggle-perso,
body.mini select {
  font-size: var(--mn-text-size);
}

body.mini header h1,
body.mini .hero h1,
body.mini .menu-icon,
body.mini .gamapp,
body.mini .popup-close,
body.mini .popup-content .close-btn,
body.mini .emoji:hover {
  font-size: var(--mn-title-size);
}

body.mini .emoji.selected {
  font-size: calc(var(--mn-title-size)*var(--nb));
}

body.mini footer h3 {
  font-size: calc(var(--mn-text-size)*var(--nb));
}

/* --- Maximale --- */
body.maxi,
body.maxi .kkiapay-button,
body.maxi #pay-btn,
body.maxi .direct,
body.maxi .emoji,
body.maxi #submit-rating-btn,
body.maxi #toggle-perso,
body.maxi select {
  font-size: var(--mx-text-size);
}

body.maxi header h1,
body.maxi .hero h1,
body.maxi .menu-icon,
body.maxi .gamapp,
body.maxi .popup-close,
body.maxi .popup-content .close-btn,
body.maxi .emoji:hover {
  font-size: var(--mx-title-size);
}

body.maxi .emoji.selected {
  font-size: calc(var(--mx-title-size)*var(--nb));
}

body.maxi footer h3 {
  font-size: calc(var(--mx-text-size)*var(--nb));
}

/* Mobile */
@media (max-width: 768px) {
  body.mini .hero h1 {
    font-size: calc(var(--mn-title-size)/var(--nb));
  }

  body.maxi .hero h1 {
    font-size: calc(var(--mx-title-size)/var(--nb));
  }
}

/* BLOQUER LE ZOOM */
html,
body {
  touch-action: manipulation;
}