/* navbar */
nav .logo img {
  padding: 0;
  margin: 0;
  max-height: 100px;
}

.navbar-main {
  position: relative; /* Position initiale */
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.navbar-fixed {
  position: fixed;
  top: 0; /* Laissez un espace en haut pour éviter qu'il ne touche le bord */
  left: 50%;
  transform: translateX(-50%); /* Centrer horizontalement */
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Optionnel : effet d'ombre pour démarquer la barre */
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25px !important;
  z-index: 15;
}

.top-header {
  font-size: 0.9em;
  border-bottom: 1px solid #ddd;
}

.top-header .social-icons a {
  color: #333;
  transition: color 0.3s;
  margin: 0 8px;
}

.top-header .social-icons a:hover {
  color: #007bff;
}

/* Par défaut, la section est en haut */
.top-header {
  position: static;
  z-index: 10; /* Assurez-vous qu'elle reste au-dessus si besoin */
  background-color: #f8f9fa;
}

/* En mode mobile, fixer en bas */
@media (max-width: 768px) {
  .top-header {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1050; /* Au-dessus des autres éléments */
    border-top: 1px solid #ddd; /* Optionnel, pour la séparation visuelle */
  }
  .top-header .text-yelian {
    font-size: 0.85em; /* Réduire la taille pour économiser de l'espace */
  }
  .top-header .social-icons {
    text-align: center;
    margin-top: 5px;
    font-size: 1.2em;
  }
}

.contact-info a .contact-text {
  display: inline; /* Les textes sont affichés */
}

/* En mode mobile, masquer les textes */
@media (max-width: 768px) {
  .contact-info a .contact-text {
    display: none; /* Les textes des contacts sont masqués */
  }

  .contact-info a i {
    font-size: 1.2rem; /* Ajustez la taille des icônes pour qu'elles soient bien visibles */
    margin-right: 5px; /* Espacement entre les icônes si nécessaire */
  }

  .top-header {
    text-align: center; /* Centrer les icônes pour un meilleur rendu */
  }
}

/* Ajouter des traits verticaux entre les liens */
.contact-info .contact-link {
  position: relative;
  display: inline-block;
  padding: 0 10px; /* Espacement horizontal autour du texte */
}

/* Ajouter un trait après chaque lien sauf le dernier */
.contact-info .contact-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 90%; /* Ajuster la hauteur du trait */
  width: 2px; /* Largeur du trait */
  background-color: #9c4f07; /* Couleur du trait */
}

/* En mode mobile, ajuster les espacements */
@media (max-width: 768px) {
  .contact-info .contact-link {
    padding: 0 5px; /* Réduire l'espacement en mode mobile */
  }

  .contact-info .contact-link:not(:last-child)::after {
    height: 50%; /* Réduire la hauteur du trait en mode mobile */
  }
}

/* Au survol le menu déroulant apparaît automatiquement */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu {
  margin-top: 0; /* Ajuste l'espacement */
  transition: all 0.3s ease; /* Transition douce */
}

/* Mode jour (light-mode) */
body.light-mode {
  background-color: #fff;
  color: #333; /* Texte en noir en mode jour */
}

.navbar.light-mode {
  background-color: rgba(255, 255, 255, 0.8); /* Fond clair et légèrement transparent */
}

.navbar.light-mode .nav-link {
  color: #333; /* Liens en noir en mode jour */
}

.navbar.light-mode .navbar-brand {
  color: #333; /* Logo en noir en mode jour */
}

.navbar.light-mode .social-icons a {
  color: #333; /* Icônes en noir en mode jour */
}

/* Mode nuit (dark-mode) */
body.dark-mode {
  background-color: #121212;
  color: white;
}

body.light-mode {
  background-color: white;
  color: black;
}

.navbar.dark-mode {
  background-color: #333;
  color: white;
}

.navbar.light-mode {
  background-color: #f8f9fa;
  color: black;
}

body.dark-mode {
  background-color: #1c1c1c; /* Fond sombre en mode nuit */
  color: #fff; /* Texte en blanc en mode nuit */
}

.navbar.dark-mode {
  background-color: #333; /* Fond sombre de la navbar en mode nuit */
}

.navbar.dark-mode .nav-link {
  color: #fff; /* Liens en blanc en mode nuit */
}

.navbar.dark-mode .navbar-brand {
  color: #fff; /* Logo en blanc en mode nuit */
}

.navbar.dark-mode .social-icons a {
  color: #fff; /* Icônes en blanc en mode nuit */
}

/* Au survol des éléments de la navbar */
.navbar.light-mode .nav-link:hover,
.navbar.dark-mode .nav-link:hover {
  color: #007bff; /* Liens en bleu au survol */
}

.navbar.light-mode .social-icons a:hover,
.navbar.dark-mode .social-icons a:hover {
  color: #007bff; /* Icônes en bleu clair au survol */
}