body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#horloge{
    border: 3px solid black;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
}
.number {
    --rotation: 0deg;
    
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    text-align: center;
    font-size: 1.5rem;
    transform: rotate(var(--rotation))
}
.number.number1 {
    --rotation: 30deg;
}
.number.number2 {
    --rotation: 60deg;
}
.number.number3 {
    --rotation: 90deg;
}
.number.number4 {
    --rotation: 120deg;
}
.number.number5 {
    --rotation: 150deg;
}
.number.number6 {
    --rotation: 180deg;
}
.number.number7 {
    --rotation: 210deg;
}
.number.number8 {
    --rotation: 240deg;
}
.number.number9 {
    --rotation: 270deg;
}
.number.number10 {
    --rotation: 300deg;
}
.number.number11 {
    --rotation: 330deg;
}
.number.number12 {
    --rotation: 0deg;
}