.table-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.table-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin: 10px 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: rgba(192, 191, 188, 0.24);
}
.nuit{
    background: linear-gradient(90deg, rgba(61, 73, 94, 0.5), rgb(255, 255, 255));
}
.matin{
    background: linear-gradient(90deg, rgba(151, 191, 22, 0.5), rgb(255, 255, 255));
}
.apres-midi{
    background: linear-gradient(90deg, rgba(238, 204, 98, 0.5), rgb(255, 255, 255));
}
.chauffe-eau{
    background: linear-gradient(90deg, rgba(23, 91, 192, 0.15), rgb(255, 255, 255));
}

.table-row:last-child {
    border-bottom: none;
}

.table-header {
    font-weight: bold;
    background: #82a1c6;
    color: white;
}

.table-cell {
    flex: 1;
    padding: 8px;
    display: flex;
    align-items: center;
}

/* Largeur spécifique par colonne si nécessaire */
.table-cell:nth-child(1) { flex: 0 2 60px; } /*ID*/
.table-cell:nth-child(2){ flex: 0 1 60px; }/*Tado*/
.table-cell:nth-child(3) { flex: 0 1 60px; }/*Vaillant*/
.table-cell:nth-child(4) { flex: 0 1 60px; }/*Heure analogique*/
.table-cell:nth-child(5) { flex: 0 0 120px; }/*Heure*/
.table-cell:nth-child(6) { flex: 0 0 100px; }/*Delta time*/
.table-cell:nth-child(7) { flex: 4 0 400px;}/*Barre de temps*/

/* Graph */
.graph_container {
    display: flex;
    gap: 4px;
    width: 100%;
}

.graph_diff_time {
    height: 6px;
    border-radius: 3px;
}
@media (max-width: 768px) {
    .table-header {
        display: none;
    }
    .table-row {
        flex-wrap: wrap;   /* autorise le retour à la ligne */
    }

    .table-cell:last-child {
        flex: 0 0 100%;    /* prend toute la largeur */
        margin-top: 8px;
    }

}