/* --- Conteneur du menu --- */
.menu {
  background: transparent;
  position: relative;
  margin-bottom: 25px;  /* Ajustez la valeur : 20, 30, 40px… */
}

/* --- Bouton hamburger (invisible sur PC) --- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 12px;   /* espace entre les barres */
  width: 70px;  /* largeur plus grande */
  cursor: pointer;
  margin-top: 50px;   /* ajustez à votre goût */
  font-family: Arial, sans-serif;
}

.hamburger span {
  height: 8px;  /* épaisseur des barres */
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  transition: 0.3s ease;
}

/* --- Liste horizontale pour PC --- */
.menu__list {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  font-size: 20px;
  font-family: Arial, sans-serif;
  margin-top: 30px;   /* ajustez à votre goût */
}

.menu__link {
  display: inline-block;
  padding: 10px 14px;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 160ms ease, transform 160ms ease;
  font-weight: 500;
}

.menu__link:hover,
.menu__link:focus {
  background-color: rgba(0,0,0,0.06);
  outline: none;
  transform: translateY(-1px);
}

.menu__link.active {
  background: linear-gradient(90deg,#ed0c16,#cfcccc);
  color: white;
  box-shadow: 0 4px 10px rgba(16,24,40,0.08);
}





/* Styles généraux pour le tableau */
table {
  margin: 0 auto; /* Cette règle est essentielle pour le centrage horizontal par défaut */
  width: 100%; /* S'assure que le tableau prend toute la largeur disponible sur mobile */
  display: table;
/* Autres styles : border, padding, etc. */
}

/* Média query pour les écrans de petite taille (smartphones, largeur max 600px) */
@media screen and (max-width: 600px) {
  table {
    /* Assure que la marge auto fonctionne correctement sur petits écrans */
    display: block; 
    margin-left: auto;
    margin-right: auto;
  }
}




/* --- Responsive : hamburger sur mobile --- */
@media (max-width: 768px) {

  .hamburger {
    display: flex;
  }

  .menu__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(0,0,0,0.4);
    padding: 12px;
    border-radius: 8px;
    margin-top: 10px;
  }

  /* Quand la classe .open est ajoutée par le JS */
  .menu.open .menu__list {
    display: flex;
  }
}