#hours-grid {
    user-select: none;
    font-size: 0.8rem;
}

#hours-grid .hour-header,
#hours-grid .day-label {
    background-color: #f8f9fa;
    white-space: nowrap;
}

#hours-grid td.hour-cell {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    padding: 0;
    touch-action: none; /* le glisser tactile peint la grille, il ne doit pas faire défiler la page */
}

#hours-grid td.hour-cell.on {
    background-color: #198754;
}

#hours-grid td.hour-cell.off {
    background-color: #e9ecef;
}

#hours-grid td.hour-cell:hover {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

/* Vue standard (PC) : surligne l'heure et le jour en en-tête pendant le
   survol d'une cellule, pour les lire sans avoir à compter les lignes/colonnes. */
#hours-grid .hour-header.hour-highlight,
#hours-grid .day-label.day-highlight {
    background-color: #0d6efd;
    color: #fff;
}

/* Vue mobile : la grille 7 jours x 24 heures est transposée (heures en
   lignes, jours en colonnes) pour garder des cellules assez grandes pour le
   doigt, quitte à défiler verticalement — un geste naturel sur téléphone,
   contrairement au défilement horizontal qu'imposait l'ancienne mise en page. */
#hours-grid.transposed {
    table-layout: fixed;
    width: 100%;
    font-size: 0.75rem;
}

#hours-grid.transposed .hour-label {
    width: 2.6rem;
}

#hours-grid.transposed td.hour-cell {
    width: auto;
    height: 2.3rem;
}

/* En vue transposée on n'a plus besoin du défilement horizontal du tableau
   (7 colonnes tiennent toujours à l'écran) : on le désactive pour que
   l'en-tête des jours puisse rester collé en haut pendant le défilement de
   la page à travers les 24 lignes d'heures. */
#grid-scroll.grid-mobile {
    overflow-x: visible;
}

#grid-scroll.grid-mobile thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}