*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.sizeSiteMax {

    max-width: 2000px;
    text-align: center;

}

h1, p {

    margin-top: 25px;
    margin-bottom: 25px;

}

h1 {

    font-size: 40px;
    font-weight: lighter;
    font-family: Russo One, Arial, Helvetica, sans-serif;
    margin-bottom: 100px;

}

.question, .reponse {

    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 10px;
    margin-right: 25%;
    margin-left: 25%;
    padding: 20px;
    box-shadow: 0px 2px 10px grey;

}

.leBouton input {

    outline: none;
    cursor: pointer;
    font-size: 25px;
    margin: 25px auto;
    padding: 20px 40px;
    border-radius: 10px;

}

.question p {

    text-align: left;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 30px;

}

.question div {

    text-align: left;
    font-size: 20px;
    margin-bottom: 15px;
    transition: all 1s;

}

.question label {

    padding-left: 25px;

}

.q1a #b1, 
.q1b #b2, 
.q1c #b3, 
.q2a #b4, 
.q2b #b5, 
.q2c #b6, 
.q3a #b7, 
.q3b #b8, 
.q3c #b9, 
.q4a #b10, 
.q4b #b11, 
.q4c #b12, 
.q5a #b13, 
.q5b #b14, 
.q5c #b15 {

    display: none;

}

.q1a #b1 + label, 
.q1b #b2 + label, 
.q1c #b3 + label, 
.q2a #b4 + label, 
.q2b #b5 + label, 
.q2c #b6 + label, 
.q3a #b7 + label, 
.q3b #b8 + label, 
.q3c #b9 + label, 
.q4a #b10 + label, 
.q4b #b11 + label, 
.q4c #b12 + label, 
.q5a #b13 + label, 
.q5b #b14 + label, 
.q5c #b15 + label {

    position: relative;
    cursor: pointer;

}

.q1a #b1 + label::before, .q1a #b1 + label::after, 
.q1b #b2 + label::before, .q1b #b2 + label::after, 
.q1c #b3 + label::before, .q1c #b3 + label::after, 
.q2a #b4 + label::before, .q2a #b4 + label::after, 
.q2b #b5 + label::before, .q2b #b5 + label::after, 
.q2c #b6 + label::before, .q2c #b6 + label::after, 
.q3a #b7 + label::before, .q3a #b7 + label::after, 
.q3b #b8 + label::before, .q3b #b8 + label::after, 
.q3c #b9 + label::before, .q3c #b9 + label::after, 
.q4a #b10 + label::before, .q4a #b10 + label::after, 
.q4b #b11 + label::before, .q4b #b11 + label::after, 
.q4c #b12 + label::before, .q4c #b12 + label::after, 
.q5a #b13 + label::before, .q5a #b13 + label::after, 
.q5b #b14 + label::before, .q5b #b14 + label::after, 
.q5c #b15 + label::before, .q5c #b15 + label::after {

    content: '';
    top: 0px;
    left: 0px;
    position: absolute;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 2%;

}


.q1a #b1 + label::before, 
.q1b #b2 + label::before, 
.q1c #b3 + label::before, 
.q2a #b4 + label::before, 
.q2b #b5 + label::before, 
.q2c #b6 + label::before, 
.q3a #b7 + label::before, 
.q3b #b8 + label::before, 
.q3c #b9 + label::before, 
.q4a #b10 + label::before, 
.q4b #b11 + label::before, 
.q4c #b12 + label::before, 
.q5a #b13 + label::before, 
.q5b #b14 + label::before, 
.q5c #b15 + label::before {

    background-color: rgb(255, 255, 255);
    border: 2px solid grey;

}

.q1a #b1:checked + label::after, 
.q1b #b2:checked + label::after, 
.q1c #b3:checked + label::after, 
.q2a #b4:checked + label::after, 
.q2b #b5:checked + label::after, 
.q2c #b6:checked + label::after, 
.q3a #b7:checked + label::after, 
.q3b #b8:checked + label::after, 
.q3c #b9:checked + label::after, 
.q4a #b10:checked + label::after, 
.q4b #b11:checked + label::after, 
.q4c #b12:checked + label::after, 
.q5a #b13:checked + label::after, 
.q5b #b14:checked + label::after, 
.q5c #b15:checked + label::after {

    background-color: blue;
    border: 2px solid blue;

}

.reponse p {

    font-size: 25px;
    font-weight: bold;

}