.table-wrapper {
  overflow-x: auto;
  margin: 40px auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

th, td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #4B0082;
  color: white;
}

tr {
  animation: fadeIn 0.5s ease forwards;
}

.up {
  color: green;
  font-weight: bold;
}

.down {
  color: red;
  font-weight: bold;
}

.stable {
  color: gray;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.club {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.intro {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
  color: #555;
}

/*  PARTIE CSS ADMIN CLASSEMENT */

.admin-classement-container {
      width: 30%;
      margin: 50px auto;
      padding: 30px 25px;
      background-color: #fff;
      border-radius: 0 !important;
      box-shadow: 0 0 0 rgba(0,0,0,0.00) !important;
  }

.admin-classement-container h2 {
      text-align: center;
      color: #4B0082;
      margin-bottom: 30px;
      font-size: 24px;
    
  }

.admin-classement-container form {
      display: flex;
      flex-direction: column;
      gap: 15px;
  }

.admin-classement-container select,
.admin-classement-container input[type="number"],
.admin-classement-container input[type="date"] {
      padding: 12px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
  }

.admin-classement-container button {
      background-color: #4B0082;
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
  }

.admin-classement-container button:hover {
      background-color: #5e00a3;
  }

.equipe1{
      color: #333333;
      font-weight: bold;
  }

.equipe2{
      color: #444444;
      font-weight: bold;
  }

.angles-down::before,
.angles-up::before,
.arrows-left-right::before {
  font-weight: bold;
  display: inline-block;
  margin-left: 5px;
}

.angles-up::before {
  content: "↑";
  font-size: 1.2em;
  color: green;
}

.angles-down::before {
  content: "↓";
  font-size: 1.2em;
  color: red;
}

.arrows-left-right::before {
  content: "⇄";
  font-size: 1.2em;
  color: #999;
}



/* ---------------------------- */



/* Responsive : scroll horizontal sur mobile */
@media screen and (max-width: 480px) {
  

  .page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
  }

  footer {
    background-color: #4B0082;
    color: white;
    text-align: center;
    padding: 5px;
  }

  footer p{
      color: #FFD700;
  }


  .admin-classement-container {
      width: 90%;
      margin: 50px auto;
      padding: 30px 25px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0,0,0,0.05);
  }




}