/* Show "Recherche" only on small screens */
@media (max-width: 767px) {
  #search-menu-item span {
    display: inline;
  }
}

/* Hide "Recherche" on larger screens */
@media (min-width: 768px) {
  #search-menu-item span {
    display: none;
  }
}

/* Styling for the responsive menu */
@media (max-width: 767px) {
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.9); /* Light transparent background */
    padding: 10px;
    overflow-y: auto; /* Prevent overflow and scrollbar */
  }

  .navbar-collapse a {
    color: #000; /* Ensure the text is readable against the light background */
  }

  .navbar-nav > li > a {
    color: #000; /* Ensure the menu item text is readable */
  }

  /* Specific styling for search menu item on mobile */
  #search-menu-item a {
    display: flex;
    align-items: center;
  }

  #search-menu-item a span {
    margin-left: 5px;
  }
}


/* Style pour la popup */
.popup {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    animation: fadeIn 0.5s;
    transition: opacity 0.5s ease; /* Ajout de la transition */
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Style pour le contenu de la popup */
  .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 600px;
    transition: transform 0.5s ease; /* Ajout de la transition */

/* Autres styles */
font-family: 'Roboto', sans-serif; /* Utilisation de la police Roboto */
font-size: 16px; /* Taille de police confortable */
letter-spacing: 0.5px; /* Légère augmentation de l'espacement des lettres */
font-weight: normal; /* Épaisseur de police normale */
color: #333; /* Couleur de police légèrement foncée pour le contraste */

  }
  
  /* Le bouton pour fermer la popup */
  .close {
    color: #aaaaaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    transition: color 0.2s;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    cursor: pointer;
  }
  
.popup-button {
    background-color: #007bff; /* Couleur plus vive */
        color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background-color 0.2s, box-shadow 0.2s;
  }
  
  .popup-button:hover {
    background-color: #0056b3; /* Couleur plus foncée pour le survol */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    cursor: pointer;
  }
  
  /* Pour les grands écrans */
  @media (min-width: 768px) {
    .popup-content {
      width: 600px; /* ou une autre taille fixe appropriée */
    }
  }
  
  /* Effet de flou sur le reste de la page */
  .blur-background {
    filter: blur(5px);
  }


/* Style pour le bouton "Confirmer" */
.popup-button.confirm {
  background-color: #28a745; /* Couleur verte pour indiquer la confirmation */
  color: white;
  height: 40px; /* Assurez-vous que cela correspond à la hauteur de #classSelection */
  border: none;
  border-radius: 5px;
  padding: 8px 12px; /* Réglez le padding pour correspondre à celui du sélecteur de classe */
  font-size: 14px; /* Ajustez la taille de la police au besoin */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background-color 0.2s, box-shadow 0.2s;
}


.popup-button.confirm:hover {
    background-color: #218838; /* Légère modification de la couleur au survol */
    cursor: pointer;
}

/* Ajout d'une icône de validation à côté du texte du bouton */
.popup-button.confirm:before {
    content: '\2714'; /* Code Unicode pour une coche */
    margin-right: 5px; /* Espacement entre l'icône et le texte */
}
/* Style pour le sélecteur de classe */
#classSelection {
    font-size: 14px; /* Taille de police identique au bouton "Confirmer" */
    padding: 8px 12px; /* Taille du padding similaire au bouton "Confirmer" */
    flex: 1; /* Permet au sélecteur de s'étirer pour remplir l'espace */
  /* Ajoutez cette ligne si vous n'avez pas de styles pour la hauteur */
  height: 40px; /* Hauteur arbitraire, ajustez en fonction de vos besoins */
}



/* REPONSE A LA REQUETE POPUP CHANGEMENT CLASSE */
.response-message {
  margin-top: 15px; /* Espacement au-dessus du message */
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  display: none; /* Caché par défaut */
  text-align: center;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.1); /* Ombre subtile */
  font-size: 0.9em; /* Taille de police adaptée */
  width: calc(100% - 80px); /* Largeur avec un padding horizontal */
}

.success-message {
  background-color: #28a745; /* Vert pour le succès */
}

.error-message {
  background-color: #dc3545; /* Rouge pour l'erreur */
}

/* Animation pour l'apparition du message */
.response-message-enter {
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  from {
      transform: translateY(20px);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}
.auto-close-message {
  font-size: 0.8em; /* Petite taille de police */
  color: #6c757d; /* Couleur grisâtre pour le message secondaire */
  margin-top: 10px; /* Un peu d'espacement au-dessus du message */
  display: none; /* Caché par défaut */
}