/* palmares.css - Version Harmonisée */

/* Stylisation spécifique du tableau */
.table thead th {
  border-top: none;
  border-bottom: none;
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

/* Lignes du tableau */
.table tbody tr {
  transition: all 0.3s ease;
}

.table tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.05) !important; /* Léger bleu au survol */
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.table td {
  vertical-align: middle;
  border-top: 1px solid #f0f0f0;
  color: #555;
}

/* Badges de classe */
.badge-info {
  background-color: rgba(13, 110, 253, 0.15);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Responsive Table pour mobile (gardé de ton ancien css mais adapté) */
@media (max-width: 768px) {
  .table thead {
    display: none;
  }

  .table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
  }

  .table td {
    display: block;
    text-align: right;
    border-top: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  .table td::before {
    content: attr(
      data-label
    ); /* On utilisera JS ou structure fixe, ici gardons ton ancienne logique CSS si possible, ou simplifions */
    position: absolute;
    left: 15px;
    width: 45%;
    text-align: left;
    font-weight: bold;
    color: var(--primary-color);
  }

  /* Réassignation des labels pour le mobile */
  .table td:nth-of-type(1):before {
    content: "Nom";
  }
  .table td:nth-of-type(2):before {
    content: "Postnom";
  }
  .table td:nth-of-type(3):before {
    content: "Prénom";
  }
  .table td:nth-of-type(4):before {
    content: "Classe";
  }
  .table td:nth-of-type(5):before {
    content: "Année";
  }
}