.weapons-container {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.weapons-container > div {
  margin-right: 20px; /* Ajoute un espacement à droite */
}

/* Conteneur de la carte de l'arme */
.weapon-card {
  display: flex;
  flex-direction: column; /* Organise les éléments en colonne */
  gap: 20px; /* Ajoute un espacement entre les sections */
  margin-bottom: 20px; /* Ajoute un espacement entre les cartes */
}

/* Conteneur pour l'image et les stats */
.weapon-header {
  display: flex; /* Aligne l'image et les stats horizontalement */
  align-items: flex-start; /* Aligne les éléments en haut */
  gap: 20px; /* Ajoute un espacement entre l'image et les stats */
}

/* Style pour l'image de l'arme */
.weapon-image img {
  width: 300px; /* Largeur de l'image */
  height: auto; /* Conserve les proportions */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour un effet visuel */
}

/* Conteneur des stats de l'arme */
.weapon-stats {
  flex: 1; /* Permet aux stats de prendre tout l'espace restant */
  text-align: left; /* Aligne le texte à gauche */
  display: flex;
  flex-direction: column; /* Organise les stats verticalement */
  justify-content: center; /* Centre verticalement les stats */
}

/* Images dans les descriptions des skills */
.weapon-stats img {
  height: 1em; /* Définit la hauteur des images à la taille de la police */
  width: auto; /* Maintient les proportions de l'image */
  vertical-align: -0.2em; /* Ajuste légèrement la position verticale */
  display: inline; /* S'assure que les images restent dans le flux du texte */
  margin: 0; /* Supprime tout espacement supplémentaire */
}

.weapon-stats strong,
.weapon-stats p {
  text-align: justify;
  margin: 0;
}

/* Section des évolutions */
.weapon-evolutions {
  margin-top: 20px; /* Espace au-dessus de la section */
  padding: 15px; /* Ajoute un padding interne */
  border-radius: 8px; /* Coins arrondis */
}

/* Titre des évolutions */
.weapon-evolutions h3 {
  color: #ffcc00; /* Couleur dorée pour le titre */
  font-size: 18px; /* Taille du texte */
  margin-bottom: 15px; /* Espace sous le titre */
  text-align: center; /* Centre le titre */
}

/* Liste des évolutions */
.weapon-evolutions ul {
  list-style-type: none; /* Supprime les puces */
  padding: 0; /* Supprime le padding interne */
  margin: 0; /* Supprime les marges */
}

/* Élément individuel de la liste */
.weapon-evolutions li {
  display: flex;
  flex-direction: column; /* Place l'image au-dessus du texte */
  align-items: left; /* Centre le contenu horizontalement */
  text-align: left; /* Centre le texte */
}

.weapon-evolutions li img {
  margin-bottom: 10px; /* Ajoute un espacement entre l'image et le texte */
  margin-right: 0; /* Supprime l'espacement à droite */
}

.weapon-evolutions li span {
  text-align: left; /* Centre le texte sous l'image */
}

/* Dernier élément sans marge */
.weapon-evolutions li:last-child {
  margin-bottom: 0; /* Supprime l'espace sous le dernier élément */
}

/* Image des évolutions */
.weapon-evolutions li img {
  margin-right: 10px; /* Espace entre l'image et le texte */
  border-radius: 8px; /* Coins arrondis pour les images */
}

/* Texte des évolutions */
.weapon-evolutions li span {
  color: #b3b3b3; /* Couleur grise pour le texte */
  font-style: italic; /* Texte en italique */
}

/* Images dans les descriptions (dans les balises <span>) */
.weapon-evolutions li span img {
  height: 1em; /* Définit la hauteur des images à la taille de la police */
  width: auto; /* Maintient les proportions de l'image */
  vertical-align: -0.2em; /* Ajuste légèrement la position verticale pour aligner avec le texte */
  display: inline; /* S'assure que les images restent dans le flux du texte */
  margin: 0; /* Supprime tout espacement supplémentaire */
}

/* Identifiant des évolutions */
.weapon-evolutions li strong {
  color: #ffcc00; /* Couleur dorée pour les identifiants */
  font-weight: bold; /* Texte en gras */
  margin-right: 5px; /* Espace entre l'identifiant et le texte */
}

/* Style général pour les images des évolutions */
.weapon-evolution-image {
  width: 120px; /* Taille par défaut des images */
  height: auto;
  margin-right: 10px; /* Espace entre l'image et le texte */
  border-radius: 8px; /* Coins arrondis */
}

/* Style spécifique pour les images des évolutions avec une plage (range) */
.weapon-evolution-range {
  width: 150px; /* Taille plus grande pour les images avec une plage */
  height: auto; /* Conserve les proportions */
}

/* Tableau des armes */
#weapons-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#weapons-table td {
  text-align: center;
  padding: 10px;
}

.weapon-card-codex {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.weapon-card-codex img {
  width: 150px;
  height: auto;
  border-radius: 8px;
}

#weapons-table .weapon-name {
  font-weight: bold;
  margin-top: 10px;
}

#weapon-table .weapon-description {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
}

.weapon-card-codex img:hover {
  transform: scale(1.1); /* Agrandit légèrement l'image au survol */
}

@media (max-width: 767px) {
  /* Style pour l'arme sur téléphone */
  .weapons-container {
    display: flex;
    flex-direction: column; /* Place l'image et les stats en colonne */
    align-items: center; /* Centre le contenu horizontalement */
    text-align: center; /* Centre le texte */
  }

  .weapon-stats img {
    height: 1em; /* Définit la hauteur des images à la taille de la police */
    width: auto; /* Maintient les proportions de l'image */
    vertical-align: -0.2em; /* Ajuste légèrement la position verticale */
    display: inline; /* S'assure que les images restent dans le flux du texte */
    margin: 0; /* Supprime tout espacement supplémentaire */
  }
  .weapon-header {
    flex-direction: column; /* Passe en colonne sur les petits écrans */
    align-items: center; /* Centre les éléments horizontalement */
    text-align: center; /* Centre le texte */
  }

  .weapon-image img {
    max-width: 250px; /* S'assure que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Conserve les proportions */
    border-radius: 8px; /* Ajoute un léger arrondi aux coins */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre pour un effet visuel */
    margin-right: 20px; /* Ajoute un espacement à droite */
  }

  .weapon-stats {
    text-align: center; /* Centre les stats sous l'image */
    margin-top: 0; /* Supprime tout espacement supplémentaire */
    line-height: 1.5; /* Ajuste l'espacement vertical entre les lignes */
  }

  /* Affichage des évolutions */
  .weapon-evolutions li {
    display: flex;
    flex-direction: column; /* Place l'image au-dessus du texte */
    align-items: center; /* Centre le contenu horizontalement */
    text-align: center; /* Centre le texte */
  }

  .weapon-evolutions li img {
    margin-bottom: 10px; /* Ajoute un espacement entre l'image et le texte */
    margin-right: 0; /* Supprime l'espacement à droite */
  }

  .weapon-evolutions li span {
    text-align: center; /* Centre le texte sous l'image */
  }

  /* Images dans les descriptions (dans les balises <span>) */
  .weapon-evolutions li span img {
    height: 1em; /* Définit la hauteur des images à la taille de la police */
    width: auto; /* Maintient les proportions de l'image */
    vertical-align: -0.2em; /* Ajuste légèrement la position verticale pour aligner avec le texte */
    display: inline; /* S'assure que les images restent dans le flux du texte */
    margin: 0; /* Supprime tout espacement supplémentaire */
  }
  /* Supprimer les puces des listes des évolutions */
  .weapon-evolutions ul {
    list-style-type: none; /* Supprime les puces */
    padding: 0; /* Supprime le padding interne */
    margin: 0; /* Supprime les marges */
  }

  .container {
    width: 95%; /* Réduit légèrement la largeur du conteneur */
    margin: 0 auto; /* Centre le conteneur */
    padding: 10px; /* Réduit le padding */
  }

  table {
    width: 100%; /* S'assure que le tableau occupe toute la largeur */
  }

  table img {
    width: 100px; /* Réduit encore la taille des images */
  }

  td {
    padding: 5px; /* Réduit l'espacement dans les cellules */
    flex: 1 1 50%; /* Chaque image occupe environ 50% de la largeur */
    max-width: 50%; /* Limite la largeur maximale */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
  }

  td img {
    margin: 0 auto; /* Centre l'image horizontalement */
    display: block; /* S'assure que l'image est un bloc centré */
  }

  td p {
    margin: 5px auto 0 auto; /* Centre le texte sous l'image */
    font-size: 0.9rem; /* Réduit légèrement la taille du texte */
    text-align: center; /* Centre le texte */
    width: 100%; /* S'assure que le texte occupe toute la largeur de la cellule */
  }

  tr {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne suivante si nécessaire */
    justify-content: center; /* Centre les images sur la ligne */
  }
}

@media (max-width: 480px) {
  #weapons-table {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne suivante si nécessaire */
    justify-content: center; /* Centre les lignes horizontalement */
    gap: 10px; /* Ajoute un espacement entre les cellules */
    padding: 0;
    margin: 0 auto; /* Centre le tableau */
  }

  #weapons-table td {
    flex: 0 0 calc(50% - 10px); /* Chaque cellule occupe exactement 50% de la largeur moins l'espacement */
    max-width: calc(50% - 10px); /* Limite la largeur maximale à 50% moins l'espacement */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    padding: 5px; /* Ajoute un espacement interne */
    text-align: center; /* Centre le contenu dans la cellule */
  }

  #weapons-table td img {
    margin: 0 auto; /* Centre l'image horizontalement */
    display: block; /* S'assure que l'image est un bloc centré */
    width: 100%; /* L'image occupe toute la largeur de la cellule */
    max-width: 120px; /* Limite la taille maximale de l'image */
    height: auto; /* Conserve les proportions */
  }

  #weapons-table td p {
    margin: 5px auto 0 auto; /* Centre le texte sous l'image */
    font-size: 0.8rem; /* Réduit légèrement la taille du texte */
    text-align: center; /* Centre le texte */
    width: 100%; /* S'assure que le texte occupe toute la largeur de la cellule */
  }

  #weapons-table tr {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne suivante si nécessaire */
    justify-content: center; /* Centre les images sur la ligne */
    margin: 0; /* Supprime les marges */
    padding: 0; /* Supprime le padding */
  }
}