/* Tableau stylé 5x5 */
:root{
  --accent: #FACC15;
  --muted: #999;
  --bg: #fff;
  --card-shadow: rgba(0,0,0,0.08);
}

.table-wrapper{
  width: 100%;
  margin: 30px auto;
  padding: 0 16px;
  overflow-x: auto; /* permet scroll horizontal sur petits écrans */
}


.custom-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px; /* garantit colonnes lisibles sur desktop */
  background: var(--bg);
  font-family: "Poppins", sans-serif;
  box-shadow: 0 6px 30px var(--card-shadow);
  border-radius: 12px;
  overflow: hidden;
}

/* caption */
.custom-table caption{
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  color: #222;
  font-size: 18px;
  background: linear-gradient(90deg, rgba(246,210,56,0.08), transparent);
}

/* en-tête */
.custom-table thead th{
  text-align: left;
  padding: 16px 20px;
  background: #fff;
  color: #444;
  font-weight: 700;
  border-bottom: 2px solid rgba(0,0,0,0.05);
  position: sticky;
  top: 0; /* garde l'entête visible lors du scroll vertical si besoin */
  z-index: 2;
}

/* cellules */
.custom-table tbody td{
  padding: 14px 20px;
  color: #333;
  font-size: 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* première colonne (jours) */
.custom-table tbody td:first-child{
  font-weight: 600;
  color: #222;
  width: 160px;
}

/* effet alterné et hover */
.custom-table tbody tr:nth-child(even){
  background: rgba(246,210,56,0.03);
}
.custom-table tbody tr:hover{
  background: rgba(246,210,56,0.06);
  transform: translateZ(0);
}

/* responsive : compact sur petits écrans */
@media (max-width: 760px){
  .custom-table{
    min-width: 600px; /* on réduit, mais garde lisibilité */
  }
  .custom-table thead th, .custom-table tbody td{
    padding: 12px 10px;
    font-size: 13px;
  }
  .custom-table tbody td:first-child{
    width: 120px;
  }
}

/* option : rendre les cellules centrées si tu préfères */
.custom-table.centered td, .custom-table.centered th{
  text-align: center;
}

p{
    margin: 30px;
}

/* tableau.css ou style.css */
.table-wrapper {
    overflow-x: auto;                /* scroll horizontal si nécessaire */
    -webkit-overflow-scrolling: touch; /* smooth scroll sur iOS */
}

.table-wrapper table {
    min-width: 600px; /* ou la largeur dont tu as besoin */
    border-collapse: collapse;
}