.details-btn {
  background: linear-gradient(
    90deg,
    #007bff,
    #0056b3
  ); /* Couleur de fond dégradée */
  color: #fff; /* Couleur du texte */
  padding: 10px 15px; /* Ajuste la taille du bouton */
  font-size: 0.9rem; /* Taille de police ajustée */
  border: none; /* Pas de bordure */
  border-radius: 5px; /* Coins arrondis */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre portée */
  transition: background 0.3s, transform 0.3s; /* Animation pour le hover */
}

.details-btn:hover {
  background: linear-gradient(
    90deg,
    #0056b3,
    #007bff
  ); /* Inverser le dégradé au survol */
  transform: translateY(-2px); /* Légère élévation lors du survol */
  text-decoration: none;
  color: #e65c00;
}
/* Style personnalisé pour les boutons */
.custom-btn {
  background: linear-gradient(90deg, #ff7f0e, #ff5722); /* Dégradé de couleur */
  color: #fff; /* Couleur du texte */
  border: none; /* Pas de bordure */
  padding: 10px 15px; /* Espacement interne */
  text-align: center; /* Alignement du texte */
  text-decoration: none; /* Pas de soulignement */
  display: inline-flex; /* Utilisation de flex pour aligner le contenu */
  align-items: center; /* Centrer verticalement */
  justify-content: center; /* Centrer horizontalement */
  border-radius: 5px; /* Coins arrondis */
  transition: background 0.3s, color 0.3s, transform 0.3s; /* Animation pour le hover */
  font-weight: bold; /* Texte en gras */
  font-size: 0.9rem; /* Taille de police ajustée */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre portée */
  margin-left: 5px; /* Espacement entre les boutons */
}

.custom-btn:hover {
  background: linear-gradient(
    90deg,
    #ff5722,
    #ff7f0e
  ); /* Inverser le dégradé au survol */
  transform: translateY(-2px); /* Légère élévation lors du survol */
  text-decoration: none;
  color: ;
}
/* Conteneur principal */
.profile-container {
  display: flex; /* Utilisation de flexbox */
  flex-wrap: nowrap; /* Empêche les éléments de s'enrouler */
  margin-top: 20px;
}

/* Menu latéral */
.profile-menu {
  width: 250px; /* Largeur fixe pour le menu */
  background-color: #343a40;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
  margin-bottom: 20px; /* Espace en bas */
  /* Aucune hauteur définie pour s'ajuster au contenu */
}

/* Les liens du menu */
.profile-menu a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.profile-menu a:hover,
.profile-menu a.active {
  background-color: #ff7f0e; /* Couleur au survol */
}

.profile-menu i {
  margin-right: 10px; /* Espace à droite des icônes */
}

/* Contenu profil */
.profile-content {
  flex: 1; /* Prend le reste de l'espace disponible */
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-left: 20px; /* Espace à gauche du contenu */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.personal-info .list-group-item {
  font-size: 16px;
  padding: 10px 20px;
}

.badge-success {
  background-color: #28a745;
}

.badge-danger {
  background-color: #dc3545;
}

.profile-content h4 {
  margin-top: 20px;
  font-weight: bold;
  color: #333;
}

/* Styles d'image */
.img-circle {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

.img-preview {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  display: none; /* Caché par défaut */
}

/* Boutons */
.btn-orange {
  background-color: #ff7f0e;
  border-color: #ff7f0e;
  color: #fff;
}

.btn-orange:hover {
  background-color: #e65c00; /* Couleur au survol */
  border-color: #e65c00; /* Couleur au survol */
}

@media (min-width: 768px) {
  .profile-container {
    align-items: flex-start; /* Aligne les enfants en haut sur grands écrans */
  }
}

/* Menu déroulant sur les petits écrans */
.dropdown-menu-profile {
  display: none; /* Caché par défaut */
}

@media (max-width: 768px) {
  .profile-menu {
    display: none; /* Cache le menu sur petits écrans */
  }
  .profile-container {
    flex-direction: column; /* Colonne pour les petits écrans */
  }
  .profile-content {
    margin-left: 0; /* Aucune marge sur petits écrans */
  }
  .dropdown-menu-profile {
    display: block; /* Affiche le menu déroulant */
    background-color: #343a40;
    margin-bottom: 15px;
    border-radius: 5px;
    color: #fff;
  }
  .dropdown-menu-profile a {
    color: #fff;
    padding: 10px;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #484e53; /* Bordure entre les liens */
  }
  .dropdown-menu-profile a:hover,
  .dropdown-menu-profile a.active {
    background-color: #ff7f0e; /* Couleur au survol */
  }
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-check {
  display: flex;
  align-items: center;
}

.form-check-input {
  margin-left: 5px;
}

.btn-submit {
  background-color: #ff7f0e;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-submit:hover {
  background-color: #e65c00;
}

.error-message {
  color: red;
  font-size: 0.9rem;
  margin-top: 5px;
}
/* Couleurs pour les champs publics et privés */
.field-private {
  background-color: #ffe6e6; /* Rouge clair pour privé */
}

.field-public {
  background-color: #e6ffe6; /* Vert clair pour public */
}

/* Fichier CSS de style */
.modern-select {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.modern-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.form-inline .form-group {
  margin-right: 15px;
}

.form-inline button {
  margin-top: 5px;
}

.modal-dialog {
  max-width: 100%;
  margin: 10px;
}

/* Alignement des cartes dans une grille */
.card-container {
  display: flex;
  flex-wrap: wrap; /* Permet de faire passer les cartes à la ligne */
  justify-content: center; /* Centre les cartes */
}

.card {
  transition: transform 0.2s; /* Animation douce */
  border-radius: 15px;
  margin: 1rem; /* Ajout d'un espacement autour des cartes */
  flex: 0 0 30%; /* Prend 30% de la largeur pour 3 éléments par ligne */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Styles pour les écrans inférieurs à 1300px */
@media (max-width: 1300px) {
  .card {
    flex: 0 0 45%; /* Prend 45% de la largeur pour 2 éléments par ligne */
  }
}

@media (max-width: 1026px) {
  .card {
    flex: 0 0 100%; /* 1 élément par ligne sur mobile */
  }
}

/* Styles pour les écrans inférieurs à 768px */
@media (max-width: 800px) {
  .card {
    flex: 0 0 100%; /* 1 élément par ligne sur mobile */
  }
}

.card:hover {
  transform: scale(1.03); /* Zoom léger lors du survol */
}

.list-group-item {
  background-color: #f8f9fa; /* Couleur d'arrière-plan des éléments de liste */
}