h1 {
    text-align: center;
    margin-bottom: 20px;
}

#tree-container {
    display: flex;
    flex-direction: column; /* Disposition des enfants en colonne */
	justify-content: center;
}

.message {
	
	max-width: 800px;
	width: 100%; /* Prend toute la largeur disponible jusqu'à 800px */
    background-color: #e6eefe;
    border-radius: 10px;
    padding: 15px;
	margin: 0 auto; /* Centre horizontalement */
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.message h2 {
    margin-bottom: 10px;
}

.finalmessage {
    max-width: 800px;
    width: 100%;
    background-color: #fffde7; /* Jaune pâle */
    border-radius: 10px;
    padding: 15px;
    margin: 0 auto;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #ffd700; /* Bordure dorée à gauche */
    // font-weight: bold; /* Texte en gras */
    position: relative; /* Pour le badge "Fin" */
}

/* Badge "Fin" optionnel en haut à droite */
.finalmessage::after {
    content: "Fin";
    position: absolute;
    top: -10px;
    right: 20px;
    background-color: #000091;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: normal;
}

/* Style pour le texte du dernier message */
.finalmessage h2 {
    color: #795548; /* Couleur brune pour les titres */
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

button {
	text-align: left;
    padding: 10px 15px;
    background-color: #f6f6f6 ; 
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5rem;
    color: #000091;
    border-color:  #000091;
    //border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.1s, transform 0.1s; /* Ajouté pour le clic */
    /*box-shadow: 10px 10px 10px #2d6b2d; /* Ombre de base pour l'effet de relief */
}

button:hover {
    background-color: #1212ff; 
	color: rgb(245, 245, 254);
}

button:active {
  background-color: #1212ff ; /* Couleur plus foncée pour le clic */
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Ombre intérieure pour l'effet de relief */
  transform: translateY(2px); /* Effet de déplacement pour le clic */
}

button.clicked {
    background-color: #000091 ; /* Couleur encore différente du bouton cliqué */
	color: rgb(245, 245, 254);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Ombre intérieure pour l'effet de relief */
	transform: translateY(2px); /* Effet de déplacement pour le clic */
}

#restart {
    margin-top: 20px;
	border: none;
	color: #000091;
	background-color: #ffffff ; 
}

#restart i {
    margin-right: 10px; /* Ajoute un espacement entre l'icône et le texte */
}


#restart:hover {
	
    background-color: #f6f6f6; 
	
}