/* Styles pour les options */
 .tp-td-options {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
  }

  .option {
    margin: 10px; /* Espace entre les cases */
    text-align: center; /* Centre le texte */
    cursor: pointer; /* Curseur en main */
    flex: 1 1 150px; /* Ajuste la taille des éléments */
  }

  /* Styles pour les labels des cases */
  .option-label {
    display: inline-block;
    padding: 15px 30px; /* Espace autour du texte */
    background-color: #FD746C; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    border-radius: 25px; /* Coins arrondis */
    font-size: 18px; /* Taille de la police */
    transition: background-color 0.3s, transform 0.2s; /* Animation de couleur et de transformation */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre pour le bouton */
  }

  .option-label:hover {
    background-color: black; /* Couleur de fond au survol */
    transform: scale(1.05); /* Légère augmentation de la taille */
  }

  /* Styles pour le contenu des TP/TD */
  .tp-td-content {
    text-align: center; /* Centre le texte */
  }

  .tp-td-category {
    display: none; /* Par défaut caché */
  }

  .cyber-container,
  .sisr-container,
  .slam-container {
    display: flex; /* Affiche les éléments côte à côte */
    justify-content: center; /* Centre les éléments */
    flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
  }

  .tptd-item {
    flex: 1 1 200px; /* Ajuste la taille des éléments */
    max-width: 200px; /* Limite la largeur */
    text-align: center; /* Centre le texte */
    margin: 10px; /* Espace entre les items */
    border-radius: 15px; /* Coins arrondis */
    padding: 20px; /* Espace intérieur */
    background-color: #f9f9f9; /* Couleur de fond des items */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre pour le contenu */
    transition: transform 0.3s; /* Animation de transformation */
  }

  .tptd-item:hover {
    transform: translateY(-5px); /* Légère élévation au survol */
  }

  .tptd-img {
    width: 50px; /* Ajustez la taille de l'image */
    height: 50px; /* Ajustez la taille de l'image */
    margin-bottom: 10px; /* Espace entre l'image et le texte */
  }

  /* Media queries pour la réactivité */
  @media (max-width: 768px) {
    .option {
      flex: 1 1 100%; /* Les options prennent toute la largeur */
      margin: 10px 0; /* Espace entre les cases */
    }

    .tptd-item {
      flex: 1 1 100%; /* Les items prennent toute la largeur */
      max-width: 100%; /* Limite la largeur */
    }
  }

  @media (max-width: 480px) {
    .option-label {
      font-size: 16px; /* Réduit la taille de la police */
      padding: 10px 20px; /* Réduit l'espace autour du texte */
    }

    .tptd-item {
      padding: 15px; /* Réduit l'espace intérieur */
    }
  }