.topbar {
  background: var(--slate);
  color: rgba(255,255,255,.85);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: var(--space-1) 0;
}

.topbar a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s;
}
.topbar a:hover {
  color: var(--gold-light);
}

.topbar .sep {
  color: var(--gold);
  margin: 0 var(--space-1);
}

/* Le form ne doit pas casser l'alignement flex du parent */
.topbar form {
  display: contents;
}

.topbar-auth-link {
  color: white;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  text-decoration: none;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  transition: opacity .2s;
}
.topbar-auth-link:hover {
  opacity: .8;
}

/* ============================================================
   TOPBAR — Responsive
   ============================================================ */


/* Hide on extra-large screens (xl and below) */
@media (max-width: 1199.98px) {
  .hide-xl {
    display: none !important;
  }
}

/* Hide on large screens (lg and below) */
@media (max-width: 991.98px) {
  .hide-lg {
    display: none !important;
  }
}

/* Masquer en dessous de md (max-width: 767.98px) */
@media (max-width: 767.98px) {
  .hide-md {
    display: none !important;
  }
}

/* Masquer certains éléments sur petits écrans */
@media (max-width: 575.98px) {

  /* Masquer le lien "Barreau de Lille" */
  .topbar .hide-sm {
    display: none !important;
  }

  /* Réduire les espacements pour éviter les retours à la ligne */
  .topbar {
    font-size: .75rem;
    letter-spacing: .05em;
    padding: var(--space-0) 0;
  }

  /* Réduire les gaps Bootstrap */
  .topbar .d-flex {
    gap: .5rem !important;
  }

  /* Masquer les séparateurs autour des éléments cachés */
  .topbar .sep.hide-sm {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .topbar .d-flex {
    flex-direction: column;
    align-items: center !important; /* centrage horizontal */
    gap: 12px; /* espacement vertical uniforme entre les 3 éléments */
    text-align: center; /* optionnel : si tu veux centrer le contenu interne */
  }

  .sep {
    display: none;
  }

  .topbar-auth-link {
    margin-bottom: 8px;
  }

  .topbar-auth-link span {
    display: inline!important;
  }
}