body {
    text-align: center;
    background-color: #fff1c3;
}

/* Bares de défilement transparentes */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Petite maison qui ramène à la page d'accueil */
#menu {
    position: fixed;
    left: 1%;
    bottom: 1%;
}

/* Fond gris pour une popup */
#fond_gris {
    display: none;
    color: #ffffff00;
    background-color: #38383883;
    position: absolute;
    border: none;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 20;
}

#fond_gris:hover {
    cursor: pointer;
}

/* Bouton marron avec texte or */
.grand-gabari {

    background-color: #8b4300;
    color: #e8df3c;
    font-size: large;
    font-weight: bold;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 20px;
    border: none;
    box-shadow: 3px 3px 5px #55555572;
}

.grand-gabari:hover {
    cursor: pointer;
    box-shadow: 1px 1px 5px #55555572;
}

/* Mise en forme du sélecteur de réponses */
div.choix-reponse {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    display: flex;
    background-color: #8b4300;
    height: fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 5px;
    border-radius: 10px;
    flex-flow: row wrap;
    justify-content: center;
}

div.choix-reponse button {
    background-color: transparent;
    border: none;
    color: #e8df3c;
    font-weight: bold;
    /* idée de rajout
    border-style: outset;
    border-color: #7e3d00;
    border-radius: 7px;*/
}

div.choix-reponse button:hover {
    cursor: pointer;
}

div.choix-reponse select,
div.choix-reponse input {
    padding: 2px;
    border-radius: 7px;
    border: none;
    background-color: #ffffffaa;
    margin-right: 5px;
}

div.choix-reponse * {
    font-size: medium;
}

#suivant {
    display: none;
}

/* "Bravo !" qui s'affiche à la victoire */

#bravo {
    display: none;
    font-size: xx-large;
    font-weight: 800;
    color: #754003;
    text-align: center;
}

/* Fond blanc et bords or */

.texte-encadre {
    background-color: #fefefed0;
    /*remarque: la transparence n'était pas là partout*/
    border: solid;
    border-style: inset;
    border-color: #d4a405;
    border-width: 2px;
    border-radius: 5px;
    text-align: center;
    overflow-y: overlay;
    padding: 5px;
}

/* Sélection du niveau, de la difficulté, ... */

select.personalisation {
    background-color: #fefefe;
    border-radius: 5px;
    border-color: #870014;
    border-width: 2px;
}

/* Panneau bleu avec écriture blanche */

.panneau-bleu {
    border-radius: 30px;
    width: -moz-fit-content;
    width: fit-content;
    height: fit-content;
    border-color: rgb(232, 232, 232);
    background-color: #3c6bb0;
    color: #fff;
    border-width: 3px;
    font-size: large;
}

.panneau-bleu:hover {
    cursor: pointer;
}

button.fermer {
    position: fixed;
    right: 0;
    top: 0;
    width: 5%;
    height: 5%;
    font-weight: bold;
    border: none;
    border-bottom-left-radius: 5px;
}

button.fermer:hover {
    background-color: red;
    color: #fff;
    cursor: pointer;
}

/* Mise en forme d'une popup*/

div.popup {
    z-index: 50;
    display: none;
    background-color: #fefefe;
    width: 50%;
    height: 60%;
    box-shadow: 1px 1px 30px #555;
    padding: 2%;
    vertical-align: top;
    overflow-y: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div.tableau {
    max-height: 80vh;
    overflow: auto;
    overflow-y: auto;

}

#compteur_pts {
    position: absolute;
    right: 1%;
    top: 0;
}

#compteur_pts:hover {
    cursor: pointer;
    font-weight: bolder;
}

/* Feuille blanche avec bords dorés et ombre */
.etiquette {
    background-color: #fff;
    color: #000;
    font-size: medium;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: 3px 3px 5px #55555572;
    border: solid;
    border-width: 1px;
    border-color: #f1c338;
    margin: 5px;
}

@media screen and (max-width : 780px) {
    .fermer {
        width: 10%;
    }

    #compteur_pts {
        position: relative;
        text-align: right;
    }

    div.popup {
        width: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}