/* --- Base Styles (Mode AM: 01:00 - 12:59) --- */
body {
    background-color: white; 
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s; 
}

#digital-time {
    position: absolute;
    top: 5vmin; 
    left: 5vmin;
    color: black; 
    font-size: 3vmin;
    font-family: monospace;
    z-index: 10;
    transition: color 0.5s;
}

#clock-container {
    position: relative;
    width: 80vmin; 
    height: 80vmin;
    box-sizing: border-box;
    overflow: hidden; 
}

/* --- Anneaux Concentriques (Heures) --- */
.hour-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc; 
    border-radius: 50%;
    box-sizing: border-box; 
    transition: border-color 0.1s; 
}

/* La taille de chaque anneau */
.ring-1 { width: 6.66vmin; height: 6.66vmin; } 
.ring-2 { width: 13.32vmin; height: 13.32vmin; } 
.ring-3 { width: 19.98vmin; height: 19.98vmin; }
.ring-4 { width: 26.64vmin; height: 26.64vmin; }
.ring-5 { width: 33.30vmin; height: 33.30vmin; }
.ring-6 { width: 39.96vmin; height: 39.96vmin; }
.ring-7 { width: 46.62vmin; height: 46.62vmin; }
.ring-8 { width: 53.28vmin; height: 53.28vmin; }
.ring-9 { width: 59.94vmin; height: 59.94vmin; }
.ring-10 { width: 66.60vmin; height: 66.60vmin; }
.ring-11 { width: 73.26vmin; height: 73.26vmin; }
.ring-12 { width: 79.92vmin; height: 79.92vmin; } 

.hour-ring.active-ring {
    border: 2px solid black;
}

/* --- Minutes (Ligne Verticale) --- */
#minute-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px; /* MODIFIÉ */
    height: 0;
    background-color: black; 
    transform: translateX(-50%);
    transition: height 0.1s linear; 
}

/* --- Mode PM (13:00 - 00:59) --- */
body.pm-mode {
    background-color: black; 
}

body.pm-mode #digital-time {
    color: white; 
}

body.pm-mode #minute-line {
    background-color: white; 
}

body.pm-mode .hour-ring {
  border-color: #333;
}

body.pm-mode .hour-ring.active-ring {
    border-color: white; 
}