/* ==========================================================================
   HEADER - Refonte nav 2 niveaux (Chat 1)
   ========================================================================== */

.tfd-header {
    position: relative;
}

.tfd-header__sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* --------------------------------------------------------------------------
   Barre principale
   -------------------------------------------------------------------------- */

.tfd-header__primary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
}

.tfd-header__logo {
    justify-self: start;
}

.tfd-header__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.tfd-header__logo-name {
    font-weight: 700;
    font-size: 22px;
    color: #222;
}

.tfd-header__cta-wrap {
    justify-self: center;
}

.tfd-header__actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 20px;
}

.tfd-header__icon-link,
.tfd-header__account-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: #444;
    text-decoration: none;
    font: inherit;
    padding: 0;
}

.tfd-header__icon-link:hover,
.tfd-header__account-trigger:hover {
    color: var(--primary);
}

/* La classe hp-link (conservée pour le JS HivePress) porte un style de survol
   natif qui prenait le pas sur le nôtre (Sign In devenait jaune au survol).
   On resserre la spécificité pour reprendre la main sur cet élément précis. */
.tfd-header__actions .tfd-header__icon-link.hp-link:hover {
    color: var(--primary);
}

.tfd-header__actions .tfd-header__icon-link.hp-link:hover .tfd-header__icon,
.tfd-header__actions .tfd-header__icon-link.hp-link:hover .tfd-header__icon-label {
    color: var(--primary);
}

.tfd-header__icon {
    font-size: 18px;
}

.tfd-header__icon-label {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* Dropdown compte */

.tfd-header__account {
    position: relative;
}

.tfd-header__account-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: none;
    flex-direction: column;
    min-width: 180px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    z-index: 50;
}

.tfd-header__account-panel.is-open {
    display: flex;
}

.tfd-header__account-panel a {
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.tfd-header__account-panel a:hover {
    background: #f7f7f7;
    color: var(--primary);
}

/* Bouton Post an ad */

.tfd-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.tfd-header__cta i {
    font-size: 12px;
}

.tfd-header__cta:hover {
    background: var(--hover);
}

/* Burger (masqué sur desktop) */

.tfd-header__burger {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Barre secondaire (catégories)
   -------------------------------------------------------------------------- */

.tfd-header__secondary {
    border-top: 1px solid #f0f0f0;
}

.tfd-header__categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    list-style: none;
}

.tfd-header__category {
    position: relative;
}

/* Annule margin-bottom: .5rem imposé par une règle générique tierce
   (ol/ul li:not(:last-child), specificité 0,1,2) qui n'exclut pas notre nav.
   Ancré sur .tfd-header__categories pour obtenir une specificité de 0,2,0,
   supérieure à la règle tierce sans recourir à !important. */
.tfd-header__categories > .tfd-header__category {
    margin-bottom: 0;
}

.tfd-header__category > a {
    display: inline-block;
    padding: 12px 0;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.tfd-header__category > a:hover {
    color: var(--primary);
}

/* Mega panel (contenu géré en Chat 2, structure seulement ici) */

.tfd-header__mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 240px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 16px;
    z-index: 50;
}

.tfd-header__category.is-open .tfd-header__mega-panel {
    display: block;
}

.tfd-header__more-panel {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    min-width: 240px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 16px;
    z-index: 50;
}

.tfd-header__category--more.is-open .tfd-header__more-panel {
    display: block;
}

/* --------------------------------------------------------------------------
   Menu mobile (fallback V1 - liste empilée)
   -------------------------------------------------------------------------- */

.tfd-header__mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 100;
    overflow-y: auto;
    padding: 24px;
}

.tfd-header__mobile-menu.is-open {
    display: block;
}

.tfd-header__mobile-categories,
.tfd-header__mobile-account {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfd-header__mobile-categories li a,
.tfd-header__mobile-account li a {
    display: block;
    padding: 14px 0;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.tfd-header__mobile-separator {
    border: none;
    border-top: 1px solid #eee;
    margin: 16px 0;
}

/* --------------------------------------------------------------------------
   Responsive - bascule desktop / mobile à 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .tfd-header__icon-label {
        display: none;
    }

    .tfd-header__secondary {
        display: none;
    }

    .tfd-header__burger {
        display: inline-flex;
    }

    .tfd-header__primary {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
    }
}