body {
    background: #f4f6f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dashboard {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* TABLE DESKTOP */

.saas-table {
    width: 100%;
    border-collapse: collapse;
    background: #292c2f;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.saas-table th {
    text-align: left;
    padding: 14px;
    font-size: 14px;
    color: #555;
}

.saas-table td {
    padding: 14px;
    border-top: 1px solid #eee;
    font-size: 14px;
}

.saas-table tr:hover {
    background: #f9fbfd;
}

/* MOBILE CARDS */

.mobile-view {
    display: none;
}

.card {
    background: #292c2f;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.card-header {
    font-size: 16px;
    margin-bottom: 8px;
}

.client {
    font-weight: 600;
    margin-bottom: 4px;
}

.dates {
    color: #666;
    margin-bottom: 8px;
}

.meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge {
    background: #2563eb;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .desktop-view {
        display: none;
    }

    .mobile-view {
        display: block;
    }

}
   .conteneur {
	  display: flex;
	  align-items: center; /* Aligner verticalement les éléments */
	}
   .bordure-arrondie {
	  border: 1px solid black; /* Bordure de 2px de largeur */
	  border-radius: 5px; /* Coins arrondis de 10px */
	  padding-left: 2%; /* Espacement interne pour mieux visualiser la bordure */
	  text-align: center; /* Alignement du texte au centre */
	  background-color: #3b3737;
	  font-size: medium;
	  margin: 10px auto 10px auto;
	}
    table {
      width: 100%; /* La table prend 100% de la largeur de l'écran */
      border-collapse: collapse;
    }
    td {
      border: 1px solid #ddd;
      padding: 10px;
      width: 100px; /* Largeur fixe de chaque cellule */
    }
		.periode { 
			font-size: x-large;
			text-align: center;
			font-family: monospace; 
			color: black;
		}
		.datejourcal {
			font-family: math;
			font-size: 20px;
			text-align: center;
			color: lightslategray;
		}
		.menage {
			font-family: math;
			font-size: 20px;
			text-align: center;
			color: Red;
		}