/* En-tête spécifique à l'accueil */
#accueil-header {
  text-align: center;
  padding: 20px;
  background-color: #000; /* Fond noir pour l'en-tête */
}

#accueil-header h1 {
  font-family: 'Old English Text MT', serif;
  font-size: 3em;
  color: #fff; /* Texte blanc pour le titre */
}

/* Corps de la page pour l'accueil */
body {
  background-color: #000; /* Assurez-vous que le fond de la page est noir */
  color: #fff; /* Le texte principal est blanc */
  font-family: Arial, sans-serif;
  margin: 0;
}

#accueil-main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}

.accueil-section {
  margin: 0 20px;
  text-align: center;
  padding: 20px;
  width: 300px;
  color: #fff; /* Texte blanc dans les sections */
}

.accueil-section h2 {
  font-family: 'Old English Text MT', serif;
  font-size: 1.5em;
  color: #fff; /* Texte blanc pour les sous-titres */
  margin-bottom: 10px;
  position: relative;
}

/* Styles pour l'image afin qu'elle soit correctement dimensionnée et centrée */
.accueil-image-container {
  text-align: center;
  margin: 15px 0; /* Ajoutez un peu de marge autour de l'image */
  margin-top: 5%;
}

.accueil-image-container img {
  width: 50%;
  max-width: 600px;
  height: auto;
}

/* Footer spécifique à l'accueil */
#accueil-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #111; /* Fond légèrement plus clair que le body pour le contraste */
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 2px solid #fff;
}

#accueil-footer div {
  color: #fff; /* Texte blanc dans le footer */
}

/* Styles spécifiques aux sous-titres dans les sections de l'accueil */
.accueil-section h2 {
  font-family: 'Old English Text MT', serif;
  font-size: 1.5em;
  color: #fff; /* Texte blanc pour les sous-titres */
  margin-bottom: 10px;
  position: relative;
}

.accueil-section h2::before,
.accueil-section h2::after {
  content: '';
  display: block;
  width: 50%; /* Largeur des bordures */
  height: 2px;
  background-color: #fff; /* Couleur de la bordure */
  position: absolute;
  left: 25%; /* Centrage de la bordure */
}

.accueil-section h2::before {
  top: -10px;
}

.accueil-section h2::after {
  bottom: -10px;
}

/* Styles pour les liens sous les sous-titres */
.accueil-section a {
  color: #ff69b4; /* Couleur rose pour les liens */
  text-decoration: none; /* Pas de soulignement */
  display: block; /* Afficher les liens en blocs pour qu'ils commencent sur une nouvelle ligne */
  margin-top: 15px; /* Espacement au-dessus de chaque lien */
}

.accueil-section a:hover {
  text-decoration: underline; /* Soulignement au survol pour indiquer un lien cliquable */
}

/* Retirer le format de liste et les puces */
.accueil-section ul {
  list-style: none;
  padding: 0;
  margin: 0; /* Suppression de la marge par défaut des ul */
}

/* Styles spécifiques à la page mangas */

/* Bouton de retour */
.btn-retour {
  margin-left: 7%;
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background-color: #222; /* Fond noir légèrement différent */
  color: #ff69b4; /* Texte rose */
  border: none;
  cursor: pointer;
  z-index: 999; /* Assure que le bouton est au-dessus de tout le reste */
}

/* Titre de la page */
.page-title {
  font-family: 'Old English Text MT', serif;
  font-size: 3em;
  color: #fff; /* Texte blanc */
  text-align: center; /* Centré horizontalement */
  margin-top: 20px; /* Marge au-dessus du titre */
}

/* Conteneur pour les tomes */
.tomes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* Espacement entre les tomes */
  padding: 20px;
}

/* Styles des sections de tomes */
.tome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #111; /* Fond légèrement plus clair */
  border: 2px solid #fff; /* Bordure blanche */
  flex: 1 1 calc(33.333% - 40px); /* Pour trois tomes par ligne */
  box-sizing: border-box;
  margin-bottom: 20px; /* Espace en bas des tomes */
  position: relative; /* Nécessaire pour les lignes horizontales */
}

.tome:before,
.tome:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.tome:before {
  top: 0;
}

.tome:after {
  bottom: 0;
}

.tome-content {
  text-align: center; /* Centrer le contenu */
}

.tome h2 {
  font-family: 'Old English Text MT', serif;
  font-size: 1.5em;
  color: #fff; /* Texte blanc pour les titres de tome */
  margin-bottom: 10px;
}

.tome .info {
  color: #fff; /* Texte blanc pour les informations de tome */
  margin-top: 10px; /* Marge en haut des infos */
}

/* Image du tome */
.tome-image {
  margin-top: 10px; /* Espace au-dessus de l'image */
}

.tome img {
  width: 100%; /* Largeur maximale de l'image */
  height: auto;
  border: 2px solid #fff; /* Bordure blanche autour des images */
}

/* Styles pour le footer de la page mangas */
.footer-manga {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #111; /* Fond légèrement plus clair que le body pour le contraste */
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 2px solid #fff;
}

.footer-manga div {
  color: #fff; /* Texte blanc dans le footer */
}

/* Styles spécifiques à la page map */

/* Bouton de retour */
.btn-retour {
  position: fixed;
  margin-left: 7%;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background-color: #222; /* Fond noir légèrement différent */
  color: #ff69b4; /* Texte rose */
  border: none;
  cursor: pointer;
  z-index: 999; /* Assure que le bouton est au-dessus de tout le reste */
}

/* Titre de la page */
.page-title {
  font-family: 'Old English Text MT', serif;
  font-size: 3em;
  color: #fff; /* Texte blanc */
  text-align: center; /* Centré horizontalement */
  margin-top: 20px; /* Marge au-dessus du titre */
}

/* Styles pour la section de la carte */
.map-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 100px auto; /* Centrer verticalement et horizontalement la carte */
  background-color: #111; /* Fond légèrement plus clair */
  border: 2px solid #fff; /* Bordure blanche */
  width: 80%; /* Réduire la largeur pour centrer la carte */
  box-sizing: border-box;
  position: relative; /* Nécessaire pour les lignes horizontales */
}

.map-container:before,
.map-container:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.map-container:before {
  top: 0;
}

.map-container:after {
  bottom: 0;
}

.map-container h2 {
  font-family: 'Old English Text MT', serif;
  font-size: 1.5em;
  color: #fff; /* Texte blanc pour les titres de la carte */
  margin-bottom: 10px;
  position: relative;
}

#map {
  width: 100%;
  height: 650px; /* Taille de la carte */
  border: 2px solid #fff; /* Bordure blanche autour de la carte */
}

/* Styles pour le footer de la page map */
.footer-map {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #111; /* Fond légèrement plus clair que le body pour le contraste */
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 2px solid #fff;
}

.footer-map div {
  color: #fff; /* Texte blanc dans le footer */
}
/* Styles spécifiques à la page de fiche de personnage */

/* Bouton de retour */
#btn-back {
  position: fixed;
  margin-left: 7%;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background-color: #222; /* Fond noir légèrement différent */
  color: #ff69b4; /* Texte rose */
  border: none;
  cursor: pointer;
  z-index: 999; /* Assure que le bouton est au-dessus de tout le reste */
}

/* Titre de la page */
header h1 {
  font-family: 'Old English Text MT', serif;
  font-size: 3em;
  color: #fff; /* Texte blanc */
  text-align: center; /* Centré horizontalement */
  margin-top: 20px; /* Marge au-dessus du titre */
}

/* Boîte de caractère */
.character-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 50px; /* Marge au-dessus de la boîte de caractère */
}

/* Image du personnage */
.character-image {
  margin-right: 20px; /* Espacement à droite de l'image */
}

.character-image img {
  width: 200px; /* Taille de l'image du personnage */
  border-radius: 5px;
}

/* Informations du personnage */
.character-info {
  color: #fff; /* Texte blanc */
}

.character-info h2 {
  font-size: 2em;
}

/* Description du personnage */
.character-description {
  text-align: justify;
  margin: 0 20px; /* Marge gauche et droite */
  margin-top: 50px; /* Marge au-dessus de la description */
}

.character-description h2 {
  font-family: 'Old English Text MT', serif;
  font-size: 1.5em;
  color: #fff; /* Texte blanc pour le titre de la description */
}

.character-description p {
  color: #fff; /* Texte blanc pour le contenu de la description */
}


/* Styles pour le footer de la page light */
.footer-cara {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #111; /* Fond légèrement plus clair que le body pour le contraste */
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 2px solid #fff;
}

.footer-cara div {
  color: #fff; /* Texte blanc dans le footer */
}

#dateHeure {
  position: fixed;
  top: 10px;
  right: 20px;
  font-family: 'Old English Text MT', serif;
  font-size: 1.2em;
  color: #fff;
  z-index: 1000; /* Assurez-vous qu'il est au-dessus des autres éléments */
}

#languageSelector {
  position: fixed;
  top: 10px;
  left: 20px;
  padding: 5px;
  background-color: #222;
  color: #fff;
  border: none;
  z-index: 1000;
  font-family: Arial, sans-serif;
  font-size: 1em;
  cursor: pointer;
}