.navbar {
  background-color: #fff; 
  padding: 0px 30px;
  height: 60px;
  display: flex;
  justify-content: space-between; /* Ajoute cette ligne pour aligner les éléments aux extrémités */
  align-items: center;
  border-bottom: 1px solid rgb(212, 212, 212); /* Trait noir de 1px d'épaisseur */
  transition: all 0.3s ease; /* Ajoute une transition fluide */

  grid-row: 1; /* Place la navbar sur la première ligne de la grille */
  grid-column: 1 /-1 ; /* Étend la navbar sur les deux colonnes */
}
/* Animation de l'ampoule */
.navbar button:hover .fa-lightbulb {
  color: yellow; /* Change la couleur en jaune */
  text-shadow: 0 0 10px yellow; /* Ajoute une lueur */
}

/* Animation du point d'interrogation (rotation subtile) */
.navbar button:hover .fa-question-circle {
  animation: rotateQuestion 0.5s linear infinite alternate; /* Ajoute une animation */
}

@keyframes rotateQuestion {
  from { transform: rotate(0deg); }
  to { transform: rotate(30deg); }
}

/* Animation de l'immeuble (éclairage des fenêtres) */
.navbar button:hover .fa-building {
  animation: lightUpBuilding 0.8s linear infinite alternate;
}

@keyframes lightUpBuilding {
  0% {
    filter: brightness(0.8); /* Immeuble légèrement sombre au départ */
  }
  100% {
    filter: brightness(1.2); /* Immeuble plus lumineux à la fin */
  }
}

.navbar button, .pdf button{
  border-color: #4285f4;
  color: #333; 
  border: none;
  padding: 5px 15px;
  margin-left: 15px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  transition: all 0.3s ease; /* Transition plus fluide */
}

.navbar button:hover, .pdf button:hover {
  background-color: #e9ecef; /* Gris légèrement plus foncé au survol */
  transform: translateY(-2px); /* Léger effet de soulèvement */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); 
}

.navbar button i, .pdf button i {
  margin-right: 8px; 
}



.navbar .search-bar {
  margin-left: 0px;
  flex-grow: 1; /* Permet à la barre de recherche de prendre l'espace disponible */
  margin-right: 20px; /* Ajoute une marge à droite pour l'espacement */

  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.navbar .search-bar input[type="text"] {
  padding: 5px;
  border: 1px solid #ced4da; /* Gris clair Bootstrap */
  border-radius: 5px;
  width: 100%; /* Prend toute la largeur du conteneur */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); /* Ombre intérieure subtile */
  transition: border-color 0.3s ease;
}

.navbar .search-bar input[type="text"]:focus {
  border-color: #4285f4; /* Bleu au focus */
  outline: none; /* Supprime le contour bleu par défaut */
}
/* Styles de l'icône de profil */
.navbar .profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #4285f4; /* Bleu */
  border-color: #a8bffc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #4285f4;
  margin-left: 20px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.navbar .profile-icon i {
  color : #fff
}

.navbar .profile-icon i:hover {
  color : #fff
}

.navbar .profile-icon:hover {
  background-color: #4285f4; /* Bleu plus foncé au survol */
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.container {
  width: 100%; /* Ajustez selon vos besoins */
}
.left-side {
  display: flex;
  align-items: center;
  /* Pousse le contenu de left-side vers la gauche */
}

.right-align {
  display: flex;           /* Active flexbox pour le conteneur */
  justify-content: flex-end; /* Aligner les éléments à droite */
  margin: 10px;
}
.right-align a {
  margin-left: 10px; /* Ajoute une marge à gauche de chaque lien */
}
.right-align a i {
  font-size: 14px; /* Ajuste la taille de l'icône comme tu le souhaites */
}

.right-side {
  margin-left: auto; 
  display: flex;
  align-items: center;
}
.logo {
  font-weight: bold;
  text-decoration: none; /* Enlever le soulignement du lien */
  color: black; /* Couleur du texte du logo */
}
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; /* Assure que le menu est au-dessus des autres éléments */
  right: 0; /* Aligner le menu déroulant à droite */
}

.dropdown-content a{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover, .dropdown-content form:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block; 

}


.right-side .sync-label {
  background-color: #4CAF50; /* Vert */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block; /* Pour que l'étiquette s'adapte au contenu */
 
}

.right-side .warning-label {
background-color: red;
color: white;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
margin-right: 10px;
font-weight: bold;
position:relative;
}

.tooltip-warning {
visibility: hidden;
opacity: 0;
width: 400px; /* Ajustez la largeur selon vos besoins */
background-color: #333;
color: #fff;
text-align: center;
padding: 15px 20px; /* Augmenter le padding */
border-radius: 6px;

/* Positionnement du tooltip */
position: absolute;
z-index: 1;
top: calc(100% + 20px); /* Espacement en dessous de la div */
left: 50%;
transform: translateX(-50%); /* Centrer le tooltip */
margin-left: 40px; /* Ajustez l'espacement */
/* Transition pour un effet fondu */
transition: opacity 0.3s;
}

.warning-label:hover .tooltip-warning {
visibility: visible;
opacity: 1;
}

.warning-label:hover {
transform: scale(1.2); /* Agrandit légèrement l'icône au survol */
cursor: pointer; /* Change le curseur en pointeur */
}



.right-side .label-text {
  font-weight: bold;
}
/* Ajouter une classe pour le dropdown mobile */
.mobile-dropdown {
display: none;
}
.label-text-pc {
display: inline-block; /* Afficher par défaut sur PC */
}

.label-text-mobile {
display: none; /* Cacher par défaut sur PC */
}
@media (max-width: 1200px) {
.navbar button span { 
  font-size: 14px; 
}
}

@media (max-width: 992px) {
.navbar button span { /* On cible le texte dans les boutons */
  display: none; 
}
}

/* Media query pour les écrans de petite taille */
/* Media query pour les écrans de petite taille */
@media (max-width: 768px) {
.navbar .right-side > a,
.navbar .right-side > .dropdown:not(.profile-dropdown) {
    display: none; /* Cacher les boutons et dropdowns */
}

.navbar .profile-dropdown .dropdown-content {
    display: none; /* Cacher le contenu du dropdown du profil par défaut */
}

.navbar .profile-dropdown .dropdown-content .mobile-dropdown {
    display: block; /* Afficher les éléments cachés dans le dropdown du profil */
}

.navbar .profile-dropdown.active .dropdown-content {
    display: block; /* Afficher le contenu du dropdown du profil lorsqu'il est actif */
}
.label-text-pc {
  display: none; /* Cacher le texte "Dernière synchronisation" sur mobile */
}

.label-text-mobile {
  display: inline-block; /* Afficher le texte de synchronisation sur mobile */
}}