body {
    background-image: url('images/fond.png'); /* Chemin vers votre image PNG */
    background-size: cover; /* Redimensionne l'image pour couvrir l'ensemble de la page */
    background-position: center; /* Centre l'image de fond */
    background-attachment: fixed;
    height: 100vh; /* Ajuste la hauteur de la page à la hauteur de l'écran */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espaces internes par défaut */
    justify-content: start; /* Centre horizontalement les éléments */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre verticalement les éléments */
    text-align: center; /* Centre le texte à l'intérieur des éléments */
    color: #FFE076;
	font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif; 
    background-color: #082012;
}

body.index {
    background-image: url('images/fond-index.png'); /* Image spécifique pour la page index.php */
}

h1 {
    padding-top: 30px;
    font-size: 3em; /* Taille de la police pour le titre */
    margin-bottom: 0px; /* Marge en bas du titre */
    font-weight: 300;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

h2 {
    font-size: 1em; /* Environ 24px ou 32px, selon le navigateur */
    font-weight: bold; /* Environ 700 */
    margin-bottom: 0px; /* Marge en bas du titre */
    line-height: 1.2; /* Espacement des lignes ajusté à la taille de la police */
    text-align: left; /* Alignement du texte à gauche */
}
 
button:hover {
    background-color: #0056b3; /* Couleur de fond du bouton au survol */
}

p{
    /*text-transform: uppercase;*/
    font-size: 16px; 
    font-weight: 200; /* Fonte plus fine */
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.welcome_text {
    padding: 10px;
}

/*Inscription au départ*/
.form-container {
    border: 1px solid #FFE076; /* Bordure couleur jaune */
    padding: 20px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    max-width: 280px; /* Réduit la largeur maximale du formulaire */
    margin: 0 auto 20px auto; /* Centre le formulaire et ajoute un espace en bas */
    background-color: #082012; /* Couleur de fond légèrement transparente */
    color: #FFE076; /* Couleur du texte */
}

/* Style pour le texte du placeholder dans les champs de texte */
.form-container input[type="text"]::placeholder {
    font-style: italic; /* Rend le texte en italique */
    color: #888; /* Couleur gris clair pour le texte */
}

.form-container label {
    display: block; /* Les labels prennent toute la largeur */
    margin-bottom: 5px; /* Un peu d'espace sous les labels */
    font-weight: bold; /* Texte en gras pour les labels */
}

.form-container input[type="text"], 
.form-container select {
    width: 100%; /* Assure que les inputs et le selecteur occupent toute la largeur du conteneur */
    padding: 8px; /* Espacement interne pour les inputs */
    margin-bottom: 15px; /* Espace sous chaque champ */
    border: 1px solid #FFE076; /* Bordure des inputs */
    border-radius: 5px; /* Coins arrondis */
    background-color: transparent; /* Fond transparent */
    color: #888; /* Couleur du texte */
    box-sizing: border-box; /* Assure que padding et border sont inclus dans la largeur */
    font-style: italic;
}

.text_enigme{
    margin :10px;
}

.title_block {
    margin-bottom: 20px; /* Marge en bas du titre */
}

/*code de l'énigme*/
.num_enigme{
    color: #FFE076; /* Texte marron foncé pour le bouton */
    border: 1px solid #FFE076;
    padding: 2px 5px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    position: fixed;
    top: 10px;
    left: 10px;
    font-family: "Century Gothic", Arial, sans-serif; 
    font-weight: 200; /* Fonte plus fine */
    font-size: small;
}


/* Style de la barre de réponse */
.barre-reponse {
    background-color: #082012; /* Marron foncé pour la couleur de fond */
    color: #dbcb99; /* Jaune clair pour la couleur du texte */
    border: 2px solid #dbcb99; /* Bordure jaune clair */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    font-family: "Century Gothic", Arial, sans-serif; /* Police de caractères */
    margin-bottom: 30px;
}

.fixed-chrono {
    font-size: 2em; /* Taille de la police pour le titre */
    margin-bottom: 20px; /* Marge en bas du titre */
    font-weight: 300;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Style pour le bouton de soumission */
button {
    background-color: #cbaf63; /* Fond jaune clair pour le bouton */
    color: #082012; /* Texte marron foncé pour le bouton */
    border: none; /* Supprime la bordure */
    padding: 8px 20px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur de type pointer pour indiquer que le bouton est cliquable */
    font-family: "Century Gothic", Arial, sans-serif; /* Police de caractères */
}

/* Style pour le bouton de soumission au survol */
button:hover {
    background-color: #cbaf63;
}

/*Bouton de la page success.php */
#nextButton {
    background-color: gray;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: not-allowed;
    margin-top: 20px;
    align-items: center;
}
#nextButton.enabled {
    background-color: #cbaf63; /* Fond jaune clair pour le bouton */
    color: #082012; /* Texte marron foncé pour le bouton */
    border: none; /* Supprime la bordure */
    padding: 8px 20px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur de type pointer pour indiquer que le bouton est cliquable */
    font-family: "Century Gothic", Arial, sans-serif; /* Police de caractères */
    align-items: center;
}

/* chrono */
#chrono {
    /*background-color: #dcdfd4; /* Fond jaune clair pour le bouton */
    color: #FFE076; /* Texte marron foncé pour le bouton */
    border: 1px solid #FFE076;
    padding: 2px 5px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    position: fixed;
    top: 10px;
    right: 10px;
    font-family: "Century Gothic", Arial, sans-serif; 
    font-weight: 200; /* Fonte plus fine */
    font-size: small;
}

.chrono_logo {
    position: fixed;
    top: 10.5px;
    right: -165px;
    /*padding: 0px;*/
}

/* Tableau final des temps */
table {
    font-size: 16px; 
    font-weight: 200; /* Fonte plus fine */
    max-width: 350px;
    flex-direction: column;
    border-collapse: collapse; /* Les bordures adjacentes se fusionnent */
    margin-bottom: 30px;
}

table, th, td {
    padding-top: 20px;
    border: 1px solid #FFE076; /* Bordure noire pour les cellules et le tableau */
}

th {
    padding: 5px; /* Espacement interne dans les cellules */
    text-align: center; /* Centre le texte dans les cellules d'en-tête */
}

td {
    padding: 5px; /* Espacement interne dans les cellules */
    text-align: left; /* Alignement du texte à gauche */
}

/*Selecteur de langues*/
.language-selector {
    position: fixed;
    top: 40px;
    right: -330px;
    display: inline-block;
}

.language-selector select {
    display: none; /* Cacher le select par défaut */
}

.dropdown-content {
    display: none;
    position: fixed;
    top: 60px;
    right: 0px;
    background-color: #cbaf63;
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    font-size: small;
}

.dropdown-content img {
    width: 30px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
}

.dropdown-content div {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: black;  
}

.dropdown-content div:hover {
    background-color: #f1f1f1;
}

.show {display: block;}

.selected {
    background-color: #d1e7dd; /* Couleur de fond pour l'élément sélectionné */
}

.question-form {
    border: 1px solid #FFE076 !important; /* Bordure couleur jaune */
    padding: 20px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    max-width: 300px; /* Réduit la largeur maximale du formulaire */
    margin: 0 auto 20px auto; /* Centre le formulaire et ajoute un espace en bas */
    background-color: #082012; /* Couleur de fond légèrement transparente */
    color: #FFE076; /* Couleur du texte */
}

.question-label {
    /*text-transform: uppercase;*/
    font-size: 16px; 
    font-weight: 200; /* Fonte plus fine */
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 5px;
}

textarea {
    width: 100%; /* Largeur du textarea égale à celle du conteneur */
    height: 40px; /* Hauteur suffisante pour répondre */
    margin-bottom: 25px; /* Espacement entre les textarea */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    border: 1px solid #ccc; /* Bordure légère */
    box-sizing: border-box; /* Inclut padding et border dans la largeur totale */
    resize: vertical; /* Permet de redimensionner verticalement seulement */
    background-color: #082012; /* Couleur de fond blanche */
    color: #888; /* Couleur du texte */
    font-style: italic;
}

.check_answer{
    margin-top: 20px;
}