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

#digital-time {
    position: absolute;
    top: 5vmin; 
    left: 5vmin;
    color: white; /* Blanc la nuit */
    font-size: 3vmin;
    font-family: monospace;
    z-index: 10;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(23, 1fr); 
    grid-template-rows: repeat(59, 1fr);
    
    width: 40vmin; 
    height: 90vmin; 
    position: relative; 
}

.pixel {
    background-color: black; /* Fond des pixels noir absolu */
    transition: none;
    /* Dessin du quadrillage gris */
    border-right: 1px solid #222; 
    border-bottom: 1px solid #222;
    box-sizing: border-box;
}

/* Bordures extérieures (gauche et haut) */
.grid-container .pixel:nth-child(23n + 1) {
    border-left: 1px solid #222; 
}
.grid-container .pixel:nth-child(n + 1):nth-child(-n + 23) {
    border-top: 1px solid #222; 
}

/* Axes superposés (Blancs la nuit) */
#axis-v, #axis-h {
    position: absolute;
    background-color: white; 
    z-index: 20; 
}

#axis-v {
    width: 1px;
    top: 0;
    height: 100%;
}

#axis-h {
    height: 1px;
    left: 0;
    width: 100%;
}

/* --- Mode Jour (00:00 - 11:59) --- */
body.day-mode {
    background-color: white; /* Fond blanc */
}

body.day-mode #digital-time {
    color: black; /* Texte noir le jour */
}

/* Inversion des axes en noir le jour */
body.day-mode #axis-v, body.day-mode #axis-h {
    background-color: black; 
}

/* --- Mode Jour (00:00 - 11:59) --- */
body.day-mode {
    background-color: white; /* Fond principal du body en blanc */
}

body.day-mode #digital-time {
    color: black; /* Texte noir le jour */
}

/* 1. NOUVEAU : Pixels */
body.day-mode .pixel {
    background-color: #fff; /* Fond des pixels en Jaune */
    /* NOUVEAU : Grille en Vert (remplace le gris #222) */
    border-right: 1px solid #ddd; /* Vert foncé */
    border-bottom: 1px solid #ddd; /* Vert foncé */
}

/* 2. NOUVEAU : Bordures extérieures (Gauche et Haut) */
body.day-mode .grid-container .pixel:nth-child(23n + 1) {
    border-left: 1px solid #ddd; /* Vert foncé */
}
body.day-mode .grid-container .pixel:nth-child(n + 1):nth-child(-n + 23) {
    border-top: 1px solid #ddd; /* Vert foncé */
}

/* 3. Inversion des axes en noir le jour */
body.day-mode #axis-v, body.day-mode #axis-h {
    background-color: black; 
}