.contenuDialog {
    width: 90%;
    max-width: 500px;
    background: linear-gradient(179deg, rgb(0 0 0 / 87%), rgb(24 66 31));
    border: 2px dashed #b79b46;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 -20px 80px 30px rgb(70 120 60 / 50%);
    ;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: scaleIn 0.4s ease;
}

.formulaire {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "titre titre"
        "montant multiple"
        "valider valider";
    gap: 2rem 0;
}

.titreDialog {
    font-size: 2rem;
    text-align: center;
    grid-area: titre;
}

.montantBJ,
.multiple {
    display: flex;
    flex-direction: column;
    font-size: 1.15em;
    gap: 0.3rem;
}

input[type=radio] {
    margin-right: 0.3em;
}

.lineClose {
    grid-area: valider;
    display: flex;
    justify-content: center;
}


/* ******************************************************** */

.affichageCalcul {
    border: white solid 2px;
    background-color: #684713;
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.question {
    font-size: 2rem;
    color: white;
    text-align: center;
    font-family: "Lora";
}

.encartReponse {
    padding: 3rem;
    box-shadow: 0px 0px 20px 20px transparent;
    border-radius: 15%;
}


.formulaireReponse {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    input {
        height: 2.5rem;
        width: 7.5rem;
        display: flex;
        text-align: center;
        font-size: 2rem;
    }

    button {
        width: 5.5rem;
        font-size: 1.2rem;
    }
}

.mauvaiseReponse {
    padding: 3rem;
    box-shadow: 0px 0px 20px 20px rgb(255 0 0 / 58%);
    border-radius: 15%;

}

.bonneReponse {
    padding: 3rem;
    box-shadow: 0px 0px 20px 20px rgba(38, 255, 0, 0.58);
    border-radius: 15%;
}


/* telephone portrait */
@media (max-width: 450px) {

    .titreDialog {
        font-size: 1.3rem;
    }

    .couleurText {
        font-size: 0.7rem;
    }

    .couleurText {
        input {
            height: 0.7rem;
        }
    }
}

/* telephone paysage */
@media (max-height: 450px) {
    .titreDialog {
        font-size: 1.3rem;
    }

    .couleurText {
        font-size: 0.85rem;
    }

    .couleurText {
        input {
            height: 0.85rem;
        }
    }

    .btnClose {
        font-size: 0.8rem;
    }
}