Placements des inputs après CSS

Bonjour,

J'ai suivi le tuto sur la personnalisation des checkbox en CSS (ici) et j'ai un souci de compréhension sur le placement de mes inputs.

ce que j'avais avant

Choix des agences : [ ] Levage [ ] Ouest [ ] Centre [ ] Bretagne [ ] Val de Loire [ ] Mayenne [Bouton Envoyer]

Donc tout sur la même ligne ce qui me convient tout à fait (en fait c'est même ce que je veux)

ce que j'ai après personnalisation CSS de mes checkbox

Choix des agences :
[ ] Levage
[ ] Ouest
[ ] Centre
[ ] Bretagne
[ ] Val de Loire
[ ] Mayenne
[Bouton Envoyer]

Donc saut de ligne à chaque input (ce n'est pas du tout ce que je veux)

J'avoue avoir du mal à capter les positionnements en CSS alors du coup un coup de main serait le bienvenu pour m'expliquer le pourquoi du comment.

Le code HTML :

<div class="form-check">
                Choix des agences :
                <input type=checkbox id=Levage name=levage>
                <label for=Levage>Levage</label>
                <input type=checkbox id=Ouest name=ouest>
                <label for=Ouest>Ouest</label>
                <input type=checkbox id=Centre name=centre>
                <label for=Centre>Centre</label>
                <input type=checkbox id=Bretagne name=bretagne>
                <label for=Bretagne>Bretagne</label>
                <input type=checkbox id="Val de Loire" name=valdeloire>
                <label for="Val de Loire">Val de Loire</label>
                <input type=checkbox id=Mayenne name=mayenne>
                <label for=Mayenne>Mayenne</label>
                <input type="submit" class="ui-button" name="bouton">
  </div>

Le CSS :

.form-check {
    --border: grey;
    --unckecked: lightgrey;
    --cursor: grey;
    --checked: #CE3632;
    --checked-cursor: #FFF;
    position: relative;
}

.form-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.form-check label {
    display: grid;
    grid-template-columns: 2em 4em;
    grid-template-areas: "checkbox label";
    gap: 0.7em;
    text-align: left;
}

.form-check label::before,
.form-check label::after {
    grid-area: checkbox;
    content: '';
    display: block;
    margin-top: .3em;
}

.form-check label::before {
    width: 100%;
    height: 1em;
    border-radius: 1em;
    background-color: var(--unckecked);
    border: solid 1px var(--border);
    transition : background-color .3s, border-color .3s, box-shadow .3s;
}

.form-check label::after {
    position: relative;
    width: calc(1em - 2px);
    height: calc(1em - 2px);
    left: 1px;
    top: 1px;
    border-radius: 50%;
    background-color: var(--cursor);
    transition : background-color .3s, transform .3s;
}

.form-check input[type="checkbox"]:checked + label::before{
    background-color: var(--checked);
    border-color: var(--checked);
}

.form-check input[type="checkbox"]:checked + label::after{
    background-color: var(--checked-cursor);
    transform: translateX(1em); 
}

.form-check input[type="checkbox"]:focus + label::before{
    box-shadow: 0 0 0 0.25em #ce373275;
    border-color: var(--checked);
}

Merci d'avance

iLtG