html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.horloge {
    position: relative;
    width: 70vmin;
    height: 70vmin;
}

.cercle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
}

/* Tailles des cercles */
#cercle1 { width: 16vmin; height: 16vmin; z-index: 5; }
#cercle2 { width: 33vmin; height: 33vmin; z-index: 4; }
#cercle3 { width: 51vmin; height: 51vmin; z-index: 3; }
#cercle4 { width: 70vmin; height: 70vmin; z-index: 2; }
#cercle5 { width: 90vmin; height: 90vmin; z-index: 1; }


.horizon {
  position: absolute;
  top: 50vmin;
  z-index: 10;
  width: 100vw;
  height: 50vmin;
  background-color: #e2dbdb;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  perspective: 800px;
  perspective-origin: top;
}

/* Curseur */
.curseur {
    position: absolute;
    z-index: 20;
    bottom: 10%;
}

#speedControl {
    width: 60%;
    margin-top: 2rem;
    accent-color: #ffcc00;
}

label {
    color: #eee;
    font-family: sans-serif;
    margin-bottom: 0.5rem;
}

/* Les cercles projetés */
.projection {
  position: absolute;
  top: -15%;
  left: 50%;
  transform-origin: center top;
  transform: translateX(-50%) rotateX(50deg) scaleY(0.6);
  opacity: 0.4;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px) brightness(0.9);
}

/* Même tailles que les cercles originaux */
#proj1 { width: 22vmin; height: 22vmin; z-index: 15; }
#proj2 { width: 30vmin; height: 30vmin; z-index: 14; }
#proj3 { width: 46vmin; height: 46vmin; z-index: 13; }
#proj4 { width: 70vmin; height: 70vmin; z-index: 12; }
#proj5 { width: 102vmin; height: 102vmin; z-index: 11; }

/* Couper la partie haute (on ne voit que l'arc du bas) */
.horizon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #e2dbdb;
  z-index: 10;
}