body {
    background-color: rgb(215,211,173);
    font-family: "Comic Sans MS", "Comic Sans";
    margin-top: 1.2rem;
}

span.click {
    color: red;
    text-decoration: underline;
}

span.clickbleu {
    color: blue;
    text-decoration: underline;
}

a.fleche-suivant {
    visibility: hidden;
}

a.fleche-suivant:hover {
    filter: brightness(50%);
}

a.fleche-suivant img, a.fleche img {
    padding: 0 3em 3em 0;
}

.conditional-fixed-bottom {
    position: relative;
    margin-top: 2rem;
}

@media (min-width: 576px) {
    .conditional-fixed-bottom {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
    }
}

a.clickable:hover {
    filter: brightness(50%);
}

.question {
    font-weight: bold;
    font-size: calc(1rem + 1vw);
    margin: 0 0 0.7em 0.7em;
}

body.bonne-reponse {
    background-color: rgb(35,255,7) ;
}

:root {
    --hauteurImage: 200px;
    --largeurImage: 200px;
}

.checkmark::before {
    content: "✓";
    color: rgb(35,255,7);
    position: absolute;
    z-index: 1;
    font-size: var(--hauteurImage);
    line-height: 0.8;
    width: var(--largeurImage);
}

.wrongsign::before {
    content: "✗";
    color: rgb(251,0,8);
    position: absolute;
    z-index: 1;
    font-size: var(--hauteurImage);
    line-height: 0.8;
    width: var(--largeurImage);
}

body.mauvaise-reponse {
    background-color: rgb(251,0,8);
}

.opacite {
    filter: brightness(50%);
}

span#score-bonnesrep {
    color: red;
}