@font-face {
    font-family: Genova;
    src: url('../police/Genova.otf') format('truetype');
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Genova;
    src: url('../police/Genova.otf') format('truetype');
}

body.memory-page {
    overflow-y: auto; /* Activer le défilement vertical uniquement sur la page du jeu Memory */
}

body[class^="page-"],
body[class^="chap"] {
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

body.page-1 { background-image: url('../images/hanok_typique.jpg'); }
body.page-2 { background-image: url('../images/hanok_typique.jpg'); }
body.page-3 { background-image: url('../images/chap1.jpg'); }
body.chapitres { background-image: url('../images/chapitres.jpg'); }
body.chap2 { background-image: url('../images/chap2.jpeg'); }
body.chap3 { background-image: url('../images/chap3.jpg'); }
body.chap4 { background-image: url('../images/chap4.jpg'); }
body.chap5 { background-image: url('../images/chap5.jpg'); }
body.chap5b { background-image: url('../images/chap5b.jpg'); }
body.chap6 { background-image: url('../images/chap6.jpg'); }
body.chap7 { background-image: url('../images/chap7.jpg'); }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  }

.menu {
    display: flex;
    padding: 1vh;
    position: fixed;
    top: 10px;
    left: 10px;
    width: calc(100% - 40px); /* Ajuste la largeur du menu pour correspondre à l'écran */
}

.bouton-menu {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    border: none;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.bouton-menu.gauche {margin-right: 15px;}
.bouton-menu.droite {margin-left: 15px;}

.bouton-menu img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

#level, #game {margin-left: auto;}

.fleche {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1000;
}

.fleche a {
  pointer-events: auto;
  cursor: pointer;
  /* Permet de cliquer sur les liens */
}

.previous {margin-left: 0; /* Augmenté pour être plus proche du bord */}
.next {margin-right: 0;/* Augmenté pour être plus proche du bord */}

.previous img, .next img {
    width: 200px; /* Taille augmentée pour les flèches */
    height: auto;
}

/* Styles pour le pop-up */
.popup {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 20px;
  z-index: 9999;
  width: 25%;
}

.popup-content {
  text-align: left;
  font-size: 18px;
}

.popup button {
  padding: 10px 20px;
  background-color: #2d9596;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 4px 8px 12px rgba(32, 100, 91, 0.8);
  font-family: inherit;
}

.popup button:hover {
  background-color: #135d66;
}

.bouton-container1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.bouton-container1 .bouton-mode1 {
    display: block;
    margin: 35px auto;
}

.bouton-mode1 {
    display: inline-block;
    padding: 20px 30px;
    background-color: #2d9596;
    color: #fff;
    border-radius: 30px;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 4px 8px 12px rgba(32, 100, 91, 0.8);
    border: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    justify-content: center;
    font-family: inherit;
}

.bouton-container {
    position: fixed;
    bottom: 2vh; /* Abaisse légèrement les boutons */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%; /* Largeur de 80% de la fenêtre */
    max-width: 600px; /* Limite la largeur maximale */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 999;

}

.bouton-container .bouton-mode {
    display: block;
    margin: 8px auto; /* Marge de 8px en haut et en bas, centrage horizontal */
    padding: 17px 20px; /* Réduction du padding */
    font-size: 18px; /* Réduction de la taille de la police */
    margin-bottom: 15px; /*espace entre boutons chapitre*/

}

.bouton-container .bouton-mode:first-child {margin-top: 50px;}

.bouton-mode {
    padding: 20px 5%; /* Utilisation de pourcentages pour le padding horizontal */
    background-color: #2d9596;
    color: #fff;
    border-radius: 30px;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 4px 8px 12px rgba(32, 100, 91, 0.8);
    width: 40%; /* Utilisation de pourcentages pour la largeur */
    max-width: 200px; /* Limite la largeur maximale des boutons si nécessaire */
}

.bouton {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: #F9B776;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.bouton.gauche {
    margin-right: 20px;
    z-index: 1;
}

.credits {
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 1000;
}

.credits img {
    width: 60px;
    height: 60px;
}

.credits-popup {
    display: none;
    position: fixed;
    bottom: 100px;
    left: 15px;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 400px;
    font-size: 16px;
    border-radius: 20px;
    z-index: 1000; /* Assure que la popup est au-dessus du reste du contenu */
    transition: opacity 0.3s ease-in-out;
}

.credits-popup h2, .mercis-popup h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.credit-columns, .merci-columns {
  display: flex; /* Utilise un affichage flexbox pour les colonnes */
  gap: 20px; /* Espacement entre les colonnes */
}

.credit-column {
  flex: 1; /* Chaque colonne prend autant d'espace que possible */
}

.credit-column.wide {
  flex: 70%; /* Colonnes plus larges prenant 2 fois l'espace */
}

.credit-column.narrow {
  flex: 40%; /* Colonnes plus étroites prenant 1 fois l'espace */
}

.credit-column p, .merci-column p {
  /* Styles facultatifs pour le paragraphe */
  margin-bottom: 10px;
}

.mercis-popup {
    display: none;
    position: fixed;
    top: 40%;
    left: 63%;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 500px;
    font-size: 16px;
    border-radius: 20px;
    z-index: 1000; /* Assure que la popup est au-dessus du reste du contenu */
    transition: opacity 0.3s ease-in-out;
    transform: translate(-50%, -50%);
}

.merci-column {
  flex: 1; /* Chaque colonne prend autant d'espace que possible */
}

#hanok img {
    width: 90%;
    height: 75%;
}

#level img {
  width: 80%;
  height: 130%;
  margin-top: 18px;
}

.bouton img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.bouton-mode:hover {
    background-color: #135d66;
    text-decoration: none;
}

.devant {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    font-size: 23px;
}

.start {
    padding: 10px 20px;
  background-color: #2d9596;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 4px 8px 12px rgba(32, 100, 91, 0.8);
}

.end {
    padding: 10px 20px;
  background-color: #2d9596;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 4px 8px 12px rgba(32, 100, 91, 0.8);
  margin-top: 10px;
  font-family: inherit;

}

.start:hover, .end:hover {
  background-color: #135d66;
}

.devant a {
  text-decoration: none;
}

/* Styles pour les cadres d'information */
.popup-page2 {
  position: fixed;
  top: 50%;
  right: 200px; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  background-color: white;
  padding: 20px; /* Réduire le padding pour une fenêtre plus petite */
  border: 1px solid #ccc;
  width: 400px; /* Réduire la largeur */
  font-size: 16px; /* Ajuster la taille de la police si nécessaire */
  border-radius: 20px;
}

.popup-page2 .popup-content, .popup-chap {
  text-align: left;
}

.popup-page2 button {
  padding: 8px 16px;
  background-color: #2d9596;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px; 
  box-shadow: 4px 8px 12px rgba(32, 100, 91, 0.8);
  font-family: inherit;
}

.popup-page2 button:hover {
  background-color: #135d66;
}

.cadre {
  position: fixed;
  background-color: white;
  padding: 30px; /* Réduire le padding pour une fenêtre plus petite */
  border: 1px solid #ccc;
  font-size: 18px; /* Ajuster la taille de la police si nécessaire */
  border-radius: 20px;
}

.cadre-chap h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.cadre-chap p {
    margin-bottom: 0;
}

.cadre-chap2 {
  top: 40%;
  left: 300px; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  width: 400px; /* Réduire la largeur */
}

.cadre-chap3 {
  top: 80%;
  right: 20%; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  width: 500px; /* Réduire la largeur */
}

.cadre-chap4 {
  top: 40%;
  left: 300px; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  width: 450px; /* Réduire la largeur */
}

.cadre-chap5 {
  top: 40%;
  left: 300px; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  width: 450px; /* Réduire la largeur */
}

.cadre-chap5b {
  top: 80%;
  right: 20%; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  width: 550px; /* Réduire la largeur */
}

.cadre-chap6 {
  top: 45%;
  left: 300px; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  width: 400px; /* Réduire la largeur */
}

.cadre-chap7 {
  top: 85%;
  right: 20%; /* Ajustez la distance de la droite selon vos besoins */
  transform: translateY(-50%);
  width: 550px; /* Réduire la largeur */
}

/*Mylane et Mélanie*/
.personnage {
    width: 55%; /* Largeur adaptative en fonction de la largeur de la fenêtre */
    background-size: cover;
    position: absolute;
    bottom: 0; /* Positionne en bas de la fenêtre */
    left: 0; /* Positionne à gauche de la fenêtre */
    transform: translate(20%, 25%); /* Ajustez la position horizontale selon vos besoins */
}

/*personnages chapitres*/
.personnage-chap {
    width: 55%;
    background-size: cover;
    position: absolute;
    top: 78%;
    left: 70%;
    transform: translate(-130%, -50%);
}

/*personnage architecte*/
.personnage-chap2 {
    width: 16%;
    background-size: cover;
    position: absolute;
    top: 78%;
    left: 90%;
    transform: translate(-130%, -50%);
}

.personnage-chap4 {
    width: 18.5%;
    background-size: cover;
    position: absolute;
    top: 80%;
    left: 90%;
    transform: translate(-130%, -50%);
}

.personnage-chap5 {
    width: 20%;
    background-size: cover;
    position: absolute;
    top: 78%;
    left: 90%;
    transform: translate(-130%, -50%);
}

.personnage-chap6 {
    width: 25%;
    background-size: cover;
    position: absolute;
    top: 78%;
    left: 90%;
    transform: translate(-130%, -50%);
}

#bulle img {
    max-width: 100px; /* Ajustez la taille de la bulle selon votre besoin */
}

.bulle {
    position: absolute;
    transform: translateX(-50%);
    z-index: 1000;
}

.bulle1 {
    top: 50%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 50%; /* Ajustez cette valeur selon votre besoin */
}

.bulle2 {
    top: 50%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 84%; /* Ajustez cette valeur selon votre besoin */
}

.bulle3 {
    top: 55%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 38%; /* Ajustez cette valeur selon votre besoin */
}

.bulle4 {
    top: 52%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 82%; /* Ajustez cette valeur selon votre besoin */
}

.bulle5 {
    top: 50%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 80%; /* Ajustez cette valeur selon votre besoin */
}

.bulle5b {
    top: 55%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 38%; /* Ajustez cette valeur selon votre besoin */
}

.bulle6 {
    top: 50%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 75%; /* Ajustez cette valeur selon votre besoin */
}

.bulle7 {
    top: 55%; /* Ajustez cette valeur pour positionner la bulle au-dessus des personnages */
    left: 38%; /* Ajustez cette valeur selon votre besoin */
}