@font-face {
  font-family: "BlueNight-Regular";
  src: url("../assets/fonts/BlueNight-Regular.ttf") format("truetype");
  font-weight: lighter;
  font-style: normal;
}
@media (max-width: 600px) {
  /* pour que ça s'adapte aux ecrans */
  .map-card {
    width: 110px; /* réduit la taille des cartes */
  }
}

body {
  font-family: BlueNight-Regular;
  margin: 0;
  padding: 20px;
  letter-spacing: 1px;
}

body.page-maps {
  background-image: url("../assets/bg/alleys-bg-color-corrected.jpg");
  background-size: cover; /* Image prend toute la surface sans déformation */
  background-position: center; /* Centre l'image */
  background-attachment: fixed; /* L'image reste fixe quand on scroll */
}

body.page-bows {
  background-image: url("../assets/bg/bows-crop-1-C.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body.page-melees {
  background-image: url("../assets/bg/armurerie.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body.page-arrows {
  background-image: url("../assets/bg/arrows.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body.page-skins {
  background-image: url("../assets/bg/skins.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.map-card {
  display: inline-block; /* la carte s'adapte aux dimensions de l'image */
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: auto;
  text-align: center;
}

.map-card img {
  display: block; /* Elimine les espaces blancs sous l'image */
  width: 100%; /* L'image prend toute la largeur de la carte */
  height: 110px; /* Hauteur fixe pour toute les images */
  object-fit: cover; /* L'image remplit son cadre sans deformation */
  max-width: 100%; /* Empêche l'image de dépasser la largeur de la carte */
}

.map-card p {
  margin: 10px 0;
  font-weight: bold;
}

#maps {
  display: flex; /* active flexbox */
  flex-wrap: wrap; /* les cartes passent à la ligne selon taille ecran */
  gap: 1px; /* espace entre les cartes */
  justify-content: left; /* centre les cartes dans le conteneur */
}

.logo {
  display: block; /* Plus simple et plus fiable que flex pour un logo */
  margin: 0 auto; /* Centre horizontalement */
  max-width: 90%; /* Rétrécit dynamiquement selon la largeur de l'écran */
  padding-bottom: 10px;
}
.logo img {
  display: block;
  width: 75%;
  height: auto; /* Garde les proportions */
  max-width: 50px; /* Largeur maximale pour éviter que le logo ne devienne trop grand */
  margin: 0 auto;
}

#left-buttons {
  display: flex;
  flex-direction: column; /* Empile les GROUPES verticalement */
  align-items: center; /* Alignement à gauche */
  gap: 10px;
  margin-right: 0px;
}

.button-group {
  display: flex; /* Aligne le texte et l'icône horizontalement */
  align-items: center;
  gap: 0px;
  width: fit-content;
}

.text-left-button {
  color: white;
  font-size: 23px;
  -webkit-text-stroke: 1px black;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9);
  text-align: right;
  min-width: 90px;
}

.nav-button {
  display: inline-block; /* Assure que l'icône est bien alignée */
}
.text-right-button {
  font-family: "BlueNight-Regular";
  color: white;
  font-size: 23px;
  -webkit-text-stroke: 1px black;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9);
  text-align: left; /* Alignement du texte (par défaut) */
}