/* =============================================================================
   LOGUETOWN — Premium header polish (2026)
   Enhances existing .header-lbc-leboncoin markup without changing it.
   Loaded after the existing bundle-header-nav.css so values override cleanly.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Top header — glass-on-scroll, refined spacing
   ----------------------------------------------------------------------------- */
.header-lbc-leboncoin {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--lt-header-bg, rgba(253, 252, 250, 0.88));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition:
    background     var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    border-color   var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    box-shadow     var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
  will-change: background, box-shadow;
}
.header-lbc-leboncoin.is-scrolled {
  background: var(--lt-header-bg-scrolled, rgba(255, 255, 255, 0.85));
  border-bottom-color: var(--lt-color-border, rgba(11, 13, 16, 0.06));
  box-shadow: 0 1px 0 rgba(11, 13, 16, 0.02), 0 8px 24px rgba(11, 13, 16, 0.04);
}

body.lt-accueil-gl .header-lbc-leboncoin,
body.lt-acheter-gl .header-lbc-leboncoin,
[data-theme="dark"] .header-lbc-leboncoin {
  background: var(--lt-header-bg, rgba(8, 16, 30, 0.78));
}
body.lt-accueil-gl .header-lbc-leboncoin.is-scrolled,
body.lt-acheter-gl .header-lbc-leboncoin.is-scrolled,
[data-theme="dark"] .header-lbc-leboncoin.is-scrolled {
  background: var(--lt-header-bg-scrolled, rgba(8, 16, 30, 0.92));
  border-bottom-color: var(--lt-color-border, rgba(240, 236, 226, 0.06));
}

.header-content-lbc {
  max-width: var(--lt-container-xl, 1320px);
  margin-inline: auto;
  padding: var(--lt-s-3, 0.75rem) clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  gap: var(--lt-s-6, 1.5rem);
  min-height: var(--lt-header-height, 68px);
}

/* -----------------------------------------------------------------------------
   Logo block — tighter, refined "connecté" status
   ----------------------------------------------------------------------------- */
.logo-lbc {
  flex-shrink: 0;
}
.logo-lbc .logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: transform var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.logo-lbc a:hover .logo-img { transform: scale(1.03); }

.logo-lbc .login-state {
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-xs, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--lt-r-pill, 999px);
  color: var(--lt-color-text-muted, #5b6470);
  background: var(--lt-color-surface-muted, #f7f5f1);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.06));
}

/* -----------------------------------------------------------------------------
   Search bar — pill, premium, refined
   ----------------------------------------------------------------------------- */
.search-bar-lbc {
  position: relative;
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: var(--lt-r-pill, 999px);
  background: var(--lt-color-surface, #ffffff);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.10));
  padding: 0 0.3rem 0 var(--lt-s-5, 1.25rem);
  box-shadow: var(--lt-elev-1, 0 1px 2px rgba(0,0,0,0.04));
  transition:
    border-color var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    box-shadow   var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.search-bar-lbc:hover { border-color: var(--lt-color-border-strong, rgba(11,13,16,0.16)); }
.search-bar-lbc:focus-within {
  border-color: var(--lt-color-accent, #b8841a);
  box-shadow: var(--lt-ring-gold, 0 0 0 3px rgba(184,132,26,0.18));
}
.search-bar-input {
  flex: 1;
  height: 100%;
  border: 0; outline: 0;
  background: transparent;
  padding-inline: var(--lt-s-2, 0.5rem);
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-md, 0.9375rem);
  color: var(--lt-color-text, #1c2024);
  min-width: 0;
}
.search-bar-input::placeholder {
  color: var(--lt-color-text-subtle, #8b95a3);
}
.search-bar-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 36px;
  padding-inline: var(--lt-s-4, 1rem);
  border: 0;
  border-radius: var(--lt-r-pill, 999px);
  background: var(--lt-color-primary-strong, #0b0d10);
  color: #ffffff;
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    transform  var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.search-bar-btn svg { stroke: currentColor; }
.search-bar-btn:hover {
  background: var(--lt-color-accent, #b8841a);
  transform: scale(1.02);
}
.search-bar-btn:active { transform: scale(0.97); }

/* Search suggestions popover */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--lt-color-surface, #ffffff);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.10));
  border-radius: var(--lt-r-lg, 16px);
  box-shadow: var(--lt-elev-4, 0 24px 48px rgba(11,13,16,0.10));
  padding: var(--lt-s-2, 0.5rem);
  z-index: 200;
  overflow: hidden;
  display: none;
  animation: lt-fade-down 200ms var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
@keyframes lt-fade-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-suggestion-item {
  display: flex; align-items: center; gap: var(--lt-s-3, 0.75rem);
  padding: 0.55rem 0.7rem;
  border-radius: var(--lt-r-sm, 8px);
  font-size: var(--lt-text-sm, 0.8125rem);
  color: var(--lt-color-text, #1c2024);
  cursor: pointer;
  transition: background var(--lt-dur-fast, 160ms) ease;
}
.search-suggestion-item:hover,
.search-suggestion-item.active {
  background: var(--lt-color-surface-muted, #f7f5f1);
}
.search-suggestion-icon { flex-shrink: 0; opacity: 0.7; }
.search-suggestion-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-type {
  font-size: var(--lt-text-xs, 0.75rem);
  font-weight: 500;
  color: var(--lt-color-text-muted, #5b6470);
  padding: 0.15rem 0.45rem;
  border-radius: var(--lt-r-sm, 8px);
  background: var(--lt-gold-wash, rgba(184,132,26,0.08));
  color: var(--lt-color-accent, #b8841a);
}

/* -----------------------------------------------------------------------------
   Header actions — refined icons + the "Déposer une annonce" CTA
   ----------------------------------------------------------------------------- */
.header-actions-lbc {
  display: flex;
  align-items: center;
  gap: var(--lt-s-2, 0.5rem);
  flex-shrink: 0;
}
.header-action-icon {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--lt-r-pill, 999px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--lt-color-text, #1c2024);
  cursor: pointer;
  text-decoration: none;
  font-size: 18px;
  transition:
    background   var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    border-color var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    transform    var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.header-action-icon:hover {
  background: var(--lt-color-surface-muted, #f7f5f1);
  border-color: var(--lt-color-border, rgba(11,13,16,0.06));
  transform: translateY(-1px);
}
.header-action-icon:active { transform: scale(0.95); }
.header-action-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: var(--lt-r-pill, 999px);
  background: var(--lt-color-accent, #b8841a);
  color: var(--lt-on-gold, #fff);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.header-action-badge.d-none { display: none; }

/* CTA button "Déposer une annonce" — gold accent */
.btn-lbc-annonce {
  display: inline-flex; align-items: center; gap: var(--lt-s-2, 0.5rem);
  height: 42px;
  padding-inline: var(--lt-s-5, 1.25rem);
  border-radius: var(--lt-r-pill, 999px);
  background: var(--lt-color-accent, #b8841a);
  color: var(--lt-on-gold, #fff);
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  box-shadow: 0 1px 2px var(--lt-gold-shadow, rgba(184,132,26,0.22)),
              0 4px 12px var(--lt-gold-shadow, rgba(184,132,26,0.22));
  transition:
    transform  var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    background var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    box-shadow var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.btn-lbc-annonce:hover {
  background: var(--lt-color-accent-hover, #9e6f12);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--lt-gold-shadow, rgba(184,132,26,0.22)),
              0 10px 24px var(--lt-gold-shadow, rgba(184,132,26,0.22));
}
.btn-lbc-annonce:active { transform: translateY(0) scale(0.985); }

/* -----------------------------------------------------------------------------
   User menu — refined avatar + dropdown
   ----------------------------------------------------------------------------- */
.user-menu-container { position: relative; }
.user-menu-btn {
  display: inline-flex; align-items: center; gap: var(--lt-s-2, 0.5rem);
  height: 42px;
  padding: 0.25rem 0.75rem 0.25rem 0.4rem;
  border-radius: var(--lt-r-pill, 999px);
  background: var(--lt-color-surface, #ffffff);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.10));
  color: var(--lt-color-text, #1c2024);
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    background   var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    box-shadow   var(--lt-dur-fast, 160ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.user-menu-btn:hover {
  border-color: var(--lt-color-border-strong, rgba(11,13,16,0.16));
  background: var(--lt-color-surface-muted, #f7f5f1);
}
.user-menu-btn .user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.user-menu-btn .user-name {
  max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--lt-color-surface, #ffffff);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.10));
  border-radius: var(--lt-r-lg, 16px);
  box-shadow: var(--lt-elev-4, 0 24px 48px rgba(11,13,16,0.10));
  padding: var(--lt-s-2, 0.5rem);
  z-index: 200;
  display: none;
  animation: lt-fade-down 200ms var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.user-menu-container.is-open .user-dropdown,
.user-menu-container:focus-within .user-dropdown {
  display: block;
}
.user-dropdown a {
  display: flex; align-items: center;
  padding: 0.6rem 0.8rem;
  border-radius: var(--lt-r-sm, 8px);
  color: var(--lt-color-text, #1c2024);
  text-decoration: none;
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 500;
  transition: background var(--lt-dur-fast, 160ms) ease, color var(--lt-dur-fast, 160ms) ease;
}
.user-dropdown a:hover {
  background: var(--lt-color-surface-muted, #f7f5f1);
  color: var(--lt-color-accent, #b8841a);
}
.user-dropdown .logout-link { color: #b91c1c; }
.user-dropdown .logout-link:hover { background: rgba(220,38,38,0.06); color: #b91c1c; }
.user-dropdown hr {
  border: 0;
  height: 1px;
  background: var(--lt-color-border, rgba(11,13,16,0.06));
  margin: var(--lt-s-2, 0.5rem) 0;
}
.user-dropdown .user-info {
  display: flex; align-items: center; gap: var(--lt-s-3, 0.75rem);
  padding: 0.5rem 0.8rem 0.8rem;
}
.user-dropdown .dropdown-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.user-dropdown .user-info strong {
  display: block;
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-md, 0.9375rem);
  font-weight: 600;
  color: var(--lt-color-text, #1c2024);
}
.user-dropdown .user-info small {
  display: block;
  font-size: var(--lt-text-xs, 0.75rem);
  color: var(--lt-color-text-muted, #5b6470);
  margin-top: 0.1rem;
}

/* -----------------------------------------------------------------------------
   Main nav — refined links with animated underline
   ----------------------------------------------------------------------------- */
.main-nav {
  background: var(--lt-color-bg, #fdfcfa);
  border-bottom: 1px solid var(--lt-color-border, rgba(11,13,16,0.06));
  position: sticky;
  top: var(--lt-header-height, 68px);
  z-index: 90;
}
.header-lbc-leboncoin.is-scrolled + .main-nav {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
body.lt-accueil-gl .main-nav,
body.lt-acheter-gl .main-nav,
[data-theme="dark"] .main-nav {
  background: var(--lt-color-bg, #08101e);
  border-bottom-color: var(--lt-color-border, rgba(240,236,226,0.06));
}

.nav-container {
  max-width: var(--lt-container-xl, 1320px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lt-s-1, 0.25rem);
  list-style: none;
  margin: 0; padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-menu::-webkit-scrollbar { display: none; }
.nav-item { position: relative; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0.85rem 0.9rem;
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--lt-color-text-muted, #5b6470);
  text-decoration: none;
  border-radius: var(--lt-r-sm, 8px);
  transition: color var(--lt-dur-fast, 160ms) ease, background var(--lt-dur-fast, 160ms) ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: -1px;
  height: 2px;
  background: var(--lt-color-accent, #b8841a);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.nav-link:hover {
  color: var(--lt-color-text, #1c2024);
  background: var(--lt-color-surface-muted, #f7f5f1);
}
.nav-link:hover::after,
.nav-item.is-active > .nav-link::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* Dropdown */
.nav-item.has-dropdown > .nav-link::before {
  content: "▾";
  margin-left: 0.4rem;
  font-size: 9px;
  opacity: 0.6;
  transition: transform var(--lt-dur-fast, 160ms) ease;
}
.nav-item.has-dropdown:hover > .nav-link::before { transform: rotate(-180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--lt-color-surface, #ffffff);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.06));
  border-radius: var(--lt-r-md, 12px);
  box-shadow: var(--lt-elev-4, 0 24px 48px rgba(11,13,16,0.10));
  padding: var(--lt-s-1, 0.25rem);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity    var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    transform  var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    visibility 0s linear var(--lt-dur-base, 240ms);
  z-index: 110;
}
.nav-item.has-dropdown:hover > .dropdown-menu,
.nav-item.has-dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}
.dropdown-menu li a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--lt-r-sm, 8px);
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 500;
  color: var(--lt-color-text, #1c2024);
  text-decoration: none;
  transition: background var(--lt-dur-fast, 160ms) ease, color var(--lt-dur-fast, 160ms) ease;
}
.dropdown-menu li a:hover {
  background: var(--lt-color-surface-muted, #f7f5f1);
  color: var(--lt-color-accent, #b8841a);
}

/* -----------------------------------------------------------------------------
   Mobile responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .header-content-lbc { gap: var(--lt-s-3, 0.75rem); }
  .user-menu-btn .user-name { display: none; }
  .logo-lbc .login-state { display: none; }
}
@media (max-width: 768px) {
  .header-content-lbc {
    flex-wrap: wrap;
    padding-block: var(--lt-s-2, 0.5rem);
  }
  .logo-lbc { order: 1; }
  .header-actions-lbc { order: 2; margin-left: auto; gap: var(--lt-s-1, 0.25rem); }
  .search-bar-lbc { order: 3; flex-basis: 100%; max-width: none; }
  .btn-lbc-annonce { padding-inline: var(--lt-s-3, 0.75rem); height: 38px; font-size: 12px; }
  .btn-lbc-annonce::before { content: "+"; font-size: 18px; line-height: 0.5; margin-right: 0.15rem; }
  .nav-link { padding: 0.7rem 0.75rem; }
}
@media (max-width: 480px) {
  .header-action-icon { width: 36px; height: 36px; }
  .btn-lbc-annonce {
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .btn-lbc-annonce > * { display: none; }
  .btn-lbc-annonce::before { content: "+"; font-size: 22px; line-height: 1; margin: 0; }
}

/* -----------------------------------------------------------------------------
   Skip link refinement
   ----------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 0.6rem 1rem;
  border-radius: var(--lt-r-sm, 8px);
  background: var(--lt-color-primary-strong, #0b0d10);
  color: #ffffff;
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; }