.form-page {
  min-height: 100vh;
  width: 100%;
  display: flex;

  justify-content: center;
  align-items: center;
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/formulaire.png"); 
}


.session-button {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
}

.session-button button {
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.681);
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition: 0.2s;
}

.session-button button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}




/* Bloc principal formulaire */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;

  padding: 40px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  backdrop-filter: blur(8px);

  color: white;
}

.form-box {
  width: 300px;
}

.recap {
  width: 250px;
}

#playerForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

input,
select {
  padding: 10px;
  border-radius: 6px;
  border: none;
}

button[type="submit"] {
  margin-top: 10px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;

  background-color: #ffd000;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}

button[type="submit"]:hover {
  background-color: #ffffff39;
}




#game {
  width: 100%;
  min-height: 100vh;
}

/* Classe commune à toutes les scènes */
.scene-page {
  min-height: 100vh;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene1 {
  background-image: url("../images/scene1.png");
}
.scene2 {
  background-image: url("../images/scene2.png")
}
.scene3{
  background-image : url("../images/scene3.png")
}
.scene4{
  background-image : url("../images/scene4.png")
}
.scene5{
  background-image : url("../images/scene5.png")
}
.scene6{
  background-image : url("../images/scene6.png")
}
.scene7{
  background-image : url("../images/scene7.png")
}
.scene8{
  background-image : url("../images/scene8.png")
}
.scene9{
  background-image : url("../images/scene9.png")
}
.scene10{
  background-image : url("../images/scene10.png")
}
.scene11{
  background-image : url("../images/scene11.png")
}
.scene12{
  background-image : url("../images/scene12.png")
}

.fin1{
  background-image : url("../images/fin1.png")
}
.fin2{
  background-image : url("../images/fin2.png")
}
.fin3{
  background-image : url("../images/fin3.png")
}

/*header de scene*/

.game-title {
  font-size: 3.5rem;
  color: #ffd700; /* Jaune doré */
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}

.scene {
  max-width: 2000px;
 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 125px;
}

/* Style de base pour les points/boutons de choix */
.choice-dot {
  width: 40px;  
  height: 40px;  
  border-radius: 50%;
  border: 4px solid rgb(0, 0, 0);
  background-color: #ffffff;
  cursor: pointer;
}



/*bouton des scenes*/

.scene-map {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

.choice-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.choice-label {
  color: white;
  font-size: 2rem;
  text-shadow: 1px 1px 3px black;
}

/* Effet quand on passe la souris dessus */
.choice-dot:hover {
  transform: scale(1.1); /* Grossit légèrement */
  background-color: #ffffff; /* Change de couleur */
  border-color: #000000;
}


/*corps de la scene*/

.scene-content {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 16px 24px;
  text-align: center;
}

.scene-title {
  font-size: 2.5rem;
  color: #ffd700;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}

.scene-text {
  font-size: 1.4rem;
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/*===============
  stat-bar
===============*/
.stats-bar {
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  gap: 20px;
  margin-top: 10px;
  border: 1px solid #ffd700;
}

.stat-nom, .stat-pv, .stat-temps, .stat-inventaire {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2rem;
}

.stat-pv { color: #ff4d4d; }
.stat-temps { color: #4da6ff; }
.stat-inventaire {color: #008000;}