body {
    background-image: url('images/accueil/Fond_accueil.png'); /* image de fond */
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: #000000; /* La couleur du texte qui correspond au design */
    font-weight: bold; /* 700 correspond à 'bold' pour Roboto */

}

#home {
    margin: 20px;
    padding: 20px;
}

#mousquetairePortrait {
    width: 80%; /* Ou une autre largeur pour une meilleure apparence sur mobile */
    max-width: 300px; /* Ajustement de la taille de l image */
    border: 4px solid #D3A625; /* La couleur de la bordure du cadre */
}

/* Boutons interactifs */
.interactive-button {
    cursor: pointer; /* Rend les images cliquables */
    transition: transform 0.3s; /* Effet de transition pour le survol */
}

/* Effet de survol pour les boutons */
.interactive-button:hover {
    transform: scale(1.05); /* Légère augmentation de taille au survol */
}

#sponsor, .flag {
    /* Styles pour le sponsor et les drapeaux */
    display: inline-block;
    /* ... autres styles ... */
}

#rulesButton,
#goodLuckImage,
#startButton {
    display: block;
    margin: 10px auto; /* Centrer les images */
    width: 80%; /* Ou la largeur  */
    max-width: 300px; /* Ou la largeur maximale */
}

/* ... autres styles ... */

/* Styles pour les écrans de moins de 768px de large */
@media (max-width: 768px) {
    #mousquetairePortrait {
        width: 100%; /* Les images doivent occuper la largeur complète sur mobile */
    }

    #sponsor, .flag {
        display: block; /* Les drapeaux et le sponsor prennent toute la largeur */
       /* margin: 10px auto; /* Centrer le sponsor et les drapeaux */
    }

    #rulesButton, #startButton {
        font-size: 14px; /* Taille de police plus petite pour les boutons */
        padding: 8px 16px;
    }

    footer {
        position: relative; /* Si le footer est en position absolue */
        /* margin-top: 20px; Ajout de l'espace au-dessus du footer */
    }
}

/* Ajustements pour les mobiles */
@media (max-width: 768px) {
    #rulesButton,
    #goodLuckImage,
    #startButton {
        width: 90%; /* Les images doivent être plus grandes sur mobile */
        max-width: none; /* Annuler la largeur maximale pour les petits écrans */
    }
}

#pseudoInputContainer {
    /* ... */
}

#pseudoInput {
    font-size: 18px; /* ou la taille qui convient à votre design */
    padding: 10px 20px; /* ajustement du padding pour correspondre à la hauteur du bouton-image */
    background-color: #f8e8c1; /* la couleur de fond de l image de bouton */
    border: none; /* enlève la bordure */
    border-radius: 20px; /* si le bouton-image a des coins arrondis */
    text-align: center; /* centre le texte dans l'input */
    width: 80%; /* ou la largeur qui convient au design */
    max-width: 300px; /* ajustement de la largeur du bouton-image */
    margin: 0 auto; /* pour centrer l'input si nécessaire */
    display: block; /* pour remplacer le display:none initial */
}

/* Cache le texte "Pseudo" lorsqu'on commence à écrire */
#pseudoInput::placeholder {
    color: transparent;
}

#pseudoInput:focus {
    outline: none; /* enlève l'outline lors de la sélection de l'input */
}

#pseudoButton {
    cursor: pointer;
    width: auto; /* ou une valeur fixe qui convient mieux, ex. : 150px */
    max-width: 90%; /* pour s'assurer qu'elle n'est pas plus large que son conteneur */
    height: auto; /* pour maintenir le ratio */
    /* d'autres styles au besoin */
}


/* Responsivité */
@media (max-width: 768px) {
    #pseudoInput, #mousquetairePortrait, #pseudoButton {
        width: 90%; /* Ajustement pour les mobiles */
    }
}

#rulesPage {
    padding: 20px;
    font-family: 'Arial', sans-serif;
    /* background-color: #fff8e1;  ou toute autre couleur de fond appropriée */
    color: #000; /* Adapté à la lisibilité du texte sur le fond */
    /* plus de styles selon vos préférences */
}

#rulesContent {
    text-align: left;
    margin-bottom: 20px;
}

#validationButton {
    display: block;
    margin: 0 auto; /* Centre le bouton */
    cursor: pointer; /* Indique que l'image est cliquable */
}

@media (max-width: 768px) {
    #rulesContent {
        font-size: 14px; /* Taille de police réduite pour les mobiles */
    }
    /* Autres ajustements pour la responsivité */
}
#rulesText {
    background-color: transparent; /* le fond transparent */
    /*color: #543D1A;  Définissez la couleur du texte, ajustez si nécessaire */
    padding: 30px; /*  plus d'espace autour du texte */
    line-height: 1.6; /* Espacement entre les lignes pour améliorer la lisibilité */
    font-size: 18px; /*  la taille de la police */
    text-align: justify; /* Justifie le texte pour une présentation uniforme */
    margin: 0 20px auto; /* Conserve un espace au-dessus et en dessous du texte */
    max-width: 800px; /* Limite la largeur du texte pour les grands écrans */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Optionnel: une ombre douce pour détacher le texte du fond */
    border-radius: 10px; /* Optionnel: arrondit les coins si le fond n'est pas transparent */
}

/* Media queries pour un design responsive */
@media (max-width: 768px) {
    #rulesText {
        padding: 20px; /* Moins de padding sur les écrans plus petits */
        font-size: 16px; /* Taille de police plus petite sur les écrans plus petits */
        max-width: 90%; /* Utilise plus de l'espace disponible */
    }
}
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-image: url('images/accueil/Fond_accueil.png'); /* image de fond */
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: #000000; /* La couleur du texte qui correspond au design */
    font-weight: bold; /* 700 correspond à 'bold' pour Roboto */

}

#gameContainer {
    text-align: center;
    padding: 0.5em;
}

header {
    display: flex;
    justify-content: space-between;
}


#timer {
    background: url('images/Ecran\ Enigme\ 1/Timming_1_x27,7_y2,8.png') no-repeat center center;
    background-size: contain; /* utiliser 'contain' pour s'assurer que l'image de fond s'adapte à la taille du conteneur sans être coupée */
    border-radius: 100px; /* ajuster si nécessaire pour les bords arrondis */
    width: 120px; /* ajuster la largeur selon la taille de votre image */
    height: 42px; /* ajuster la hauteur selon la taille de votre image */
    line-height: 42px; /* cela centrera votre texte verticalement */
    display: block; /* 'block' pour que le conteneur prenne toute la largeur de son parent */
    color: #bb1f1f; /* la couleur du texte */
    font-size: 1.5em; /* ajuster la taille du texte selon vos besoins */
    text-align: center; /* assurer que le texte est centré horizontalement */
    margin-bottom: -5px; /* Ajuster cela pour que l'image du texte "Temps" se rapproche du timer */
}

#timeTextImage {
    display: block; /* Pour s'assurer que l'image est sur sa propre ligne */
    width: auto; /* Ou définir une largeur spécifique si nécessaire */
    height: auto; /* Ou définir une hauteur spécifique si nécessaire */
    margin-top: 20px;
}

#timerWrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Ceci centrera les éléments horizontalement */
}

/* Pour les écrans plus petits, vous pouvez ajuster la taille */
@media (max-width: 768px) {
    #timer {
        font-size: 1.5em;
        padding: 5px 10px;
    }
}


main {
   /* background: url('images/accueil/Fond_accueil.png') no-repeat center center;
    background-size: contain; */

}
img#hintButton {

    height: 4.5em;
}
#enigmaVideo {
    max-width: 100%;
    height: 15em;
}

/*#enigmaText {
    padding: 1em;
}

#answerSection {
    margin: 2em 0;
}*/

#answerInput {
    font-size: 1rem;
    margin-bottom: 1em;
    padding: .5em;
    width: 80%;
}

#validateButton, #hintButton {
    cursor: pointer;
    display: block;
    margin: .5em auto;
}
#bookIcon {
    height: 75%;
}
footer {
    display: flex;
    justify-content: space-between; /* Cela éloignera "Aide" et "Sponsor" sur les côtés opposés */
    align-items: center; /* Cela alignera les éléments verticalement au centre */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    #answerInput {
        width: 90%;
    }
}


body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    text-align: center;
}

#bookContainer {
    background-size: cover;
    color:black;
    padding: 20px;
}

header h1 {
    background-image: url('images/accueil/Fond_accueil.png'); /* image de fond */
}

 main {
    /*background: rgba(0, 0, 0, 0.5);  Fond semi-transparent pour les indices 
    border-radius: 10px;
    padding: 20px;
    margin: 20px;*/
    background-image: url('images/accueil/Fond_accueil.png'); /* image de fond */

}


ul {
    text-align: left;
}

footer button {
    padding: 10px 20px;
    background-image: url('images/accueil/Fond_accueil.png'); /* image de fond */
    border: none;
    border-radius: 5px;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

footer button:hover {
    background-image: url('images/accueil/Fond_accueil.png'); /* image de fond */
}
/* Styles pour le sponsor dans le footer */
#sponsor {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alignement à gauche */
    padding-left: 0px; /* Ajouter un padding à gauche si nécessaire */
}

#sponsor img {
    width: 150px; /* Réduire la taille des logos */
    height: auto; /* Maintenir les proportions */
    margin-right: 5px; /* Espacement entre les logos si plusieurs */
}