label {
    margin-right: 20px
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    min-height: 100%;
    word-break: break-word;
    word-wrap: break-word;
}

body {
    margin: auto;
    line-height: 1.2;
    font-family: arial, sans-serif;
}

img,
iframe,
video,
picture {
    max-width: 100%;
}

.container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

header {
    height: 50px;
    background-color: #263036;
}

    header h1 {
        text-align: center;
        margin: auto;
        color: white;
    }

main {
    padding: 50px 0 0;
}

h3 {
    text-align: center;
    color: lightslategray;
}

.stargrey {
    color: #96969d;
}

.yellow {
    color: #fedc18;
}

.star:hover {
    cursor: pointer;
}

input[type="radio"].star, input[type="radio"].carre {
    display: none;
}

    input[type="radio"].star + label {
        margin-right: 20px
    }

    input[type="radio"].star + label::before {
        font-family: "Font Awesome 5 Free";
        font-size: 1.2em;
        color: #ccc;
        margin: 0 0.5rem;
    }

    input[type="radio"].star.yellow + label::before {
        color: #fedc18;
        content: '\f005';
        font-weight: 900;
    }

    input[type="radio"].star.stargrey + label::before {
        color: #96969d;
        content: '\f005';
        font-weight: 900;
    }

    input[type="radio"].carre + label {
        margin-right: 4px
    }


    input[type="radio"].carre.yellow + label {
        background-color: #fedc18;
        color: #fff;
        border-radius: 7px;
        width: 30px;
        height: 28px;
        padding-top: 8px;
        padding-bottom: 24px;
        text-align: center;
    }

    input[type="radio"].carre.stargrey + label {
        background-color: #96969d;
        color: #fff;
        border-radius: 7px;
        width: 30px;
        height: 28px;
        padding-top: 8px;
        padding-bottom: 24px;
        text-align: center;
    }

.radio, .star { float: left  }

.left { text-align: left }
.right { text-align: right }

.deplacement { margin-left: 20% }



@media only screen and (max-width: 1000px) {
    .radio {
        clear: both;
    }
    .stars .radio {
        clear: none;
    }
    .deplacement {
        margin-left: 50%
    }
}

@media only screen and (max-width: 767px) {
    .left {
        text-align: left;
        padding-left: 45%;
    }
    .left.stars {
        text-align: left;
        padding-left: 25%;
    }
        .left.autre {
            text-align: left;
            padding-left: 2%;
        }
    .right {
        text-align: center
    }
    .stars .radio {
        clear: none
    }
    .deplacement {
        margin-left: 45%
    }
}

@media only screen and (max-width: 666px) {
    .left.stars {
        text-align: left;
        padding-left: 15%;
    }
    .deplacement {
        margin-left: 45%
    }
}