.belt-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.belt {
    --belt-stroke-color: #100;
    --belt-dan-fill-color: #000000;
    --belt-dan-stroke-color: #ffed0d;
    width: 90px;
    height: 20px;
    margin: 5px 0 10px 0;
}

/* Le reboot Bootstrap applique vertical-align: middle à tout <svg>, ce qui
   décale la ceinture vers le bas de sa boîte (visible dans les lignes des
   pages « Engagement et résultats » et « Grades & progressions »). On aligne
   la ceinture en haut. */
.belt svg {
    vertical-align: top;
}

/* Single Color Belts */
.belt-white {
}

.belt-yellow {
}

.belt-orange {
}

.belt-green {
}

.belt-blue {
}

.belt-purple {
    --belt-stroke-color: #ccc;
}

.belt-brown {
}

.belt-black {
    --belt-stroke-color: #ccc;
    --belt-dan-fill-color: #ccc;
    --belt-dan-stroke-color: #ccc;
}

.belt-red {
}