body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* Conteneur du tableau */
.table-container {
    max-height: 90vh;
    overflow-x: auto;
    overflow-y: auto;
    border: 0px solid #ccc;
    background: white;
}

/* Style du tableau */
table {
    border-collapse: collapse;
    width: max-content;
}

th, td {
    padding: 8px;
    white-space: nowrap;
    border: 0px solid #ccc;
}

/* Fixer l'en-tête en haut */
thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: inherit;
}

/* Ajoute une bordure sous l'en-tête */
thead tr {
    border-bottom: 0px solid #000;
}

/* Fixe la colonne "Nom" */
.sticky-name {
    position: sticky;
    left: 0px;
    width: 130px;
    z-index: 5;
    background-color: inherit;
}

.sticky-point {
    position: sticky;
    left: 100px;
    width: 30px;
    z-index: 5;
    background-color: Cyan;
}

	 .sticky-1 {
            position: sticky;
            left: 146px;
            z-index: 4;
            background-color: blue;
        } 
	 .sticky-2 {
            position: sticky;
            left: 146px;
            z-index: 3;
            background-color: lightblue;
        }
	.sticky-3 {
            position: sticky;
            left: 146px;
            z-index: 2;
            background-color: indigo;
        }
        .sticky-4 {
            position: sticky;
            left: 146px;
            z-index: 1;
            background-color: DodgerBlue;
        }

/* Pour mobile */
@media screen and (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        display: block;
    }
    table {
        width: max-content;
    }
	
}

/* Pour PC */
@media screen and (min-width: 769px) {
    .table-container {
        overflow-x: auto;
    }
}