/* Bande supérieure du cockpit — photo marché plein largeur */

.fi-body {
    --topbar-height: 5.5rem;
}

.fi-topbar {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0f2e1c !important;
    background-image: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.fi-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("/hero-market.jpg");
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}

.fi-topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(15, 46, 28, 0.88) 0%,
        rgba(26, 92, 58, 0.72) 45%,
        rgba(15, 46, 28, 0.55) 100%
    );
}

.fi-topbar .fi-logo,
.fi-topbar .fi-logo-text {
    color: #fff !important;
}

/* Blanc réservé au chrome de la topbar — pas aux menus déroulants */
.fi-topbar .fi-topbar-item .fi-icon,
.fi-topbar .fi-topbar-item-label,
.fi-topbar .fi-topbar-item-btn {
    color: rgba(255, 255, 255, 0.92) !important;
}

.fi-topbar .fi-topbar-item-btn:hover,
.fi-topbar .fi-topbar-item-btn:focus-visible,
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: rgba(255, 255, 255, 0.14) !important;
}

.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar .fi-topbar-item.fi-active .fi-icon {
    color: #fff !important;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-end > .fi-btn,
.fi-topbar .fi-topbar-start > .fi-btn {
    color: rgba(255, 255, 255, 0.95) !important;
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar .fi-topbar-end > .fi-btn:hover,
.fi-topbar .fi-topbar-start > .fi-btn:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
}

.fi-topbar .fi-global-search-field input,
.fi-topbar .fi-input {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.fi-topbar .fi-global-search-field input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}

.fi-topbar .fi-badge {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.fi-topbar .fi-user-menu-trigger {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
}

/*
 * Menu avatar (souvent téléporté hors de la topbar) :
 * forcer le gris Filament pour que le blanc de la bande ne s’applique pas.
 */
.fi-user-menu .fi-dropdown-panel,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item-label,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-header,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-header span,
.fi-topbar .fi-dropdown-panel,
.fi-topbar .fi-dropdown-panel .fi-dropdown-list-item,
.fi-topbar .fi-dropdown-panel .fi-dropdown-list-item-label,
.fi-topbar .fi-dropdown-panel .fi-dropdown-header,
.fi-topbar .fi-dropdown-panel .fi-dropdown-header span {
    color: rgb(55 65 81) !important;
}

.fi-user-menu .fi-dropdown-panel .fi-icon,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item > .fi-icon,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-header .fi-icon,
.fi-user-menu .fi-dropdown-panel .fi-btn,
.fi-user-menu .fi-dropdown-panel .fi-icon-btn,
.fi-topbar .fi-dropdown-panel .fi-icon,
.fi-topbar .fi-dropdown-panel .fi-dropdown-list-item > .fi-icon,
.fi-topbar .fi-dropdown-panel .fi-dropdown-header .fi-icon,
.fi-topbar .fi-dropdown-panel .fi-btn,
.fi-topbar .fi-dropdown-panel .fi-icon-btn {
    color: rgb(156 163 175) !important;
}

.fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item:hover,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item:focus-visible,
.fi-topbar .fi-dropdown-panel .fi-dropdown-list-item:hover,
.fi-topbar .fi-dropdown-panel .fi-dropdown-list-item:focus-visible {
    background-color: rgb(249 250 251) !important;
}

.fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item:focus-visible .fi-dropdown-list-item-label,
.fi-topbar .fi-dropdown-panel .fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-topbar .fi-dropdown-panel .fi-dropdown-list-item:focus-visible .fi-dropdown-list-item-label {
    color: rgb(17 24 39) !important;
}

.dark .fi-user-menu .fi-dropdown-panel,
.dark .fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item,
.dark .fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item-label,
.dark .fi-user-menu .fi-dropdown-panel .fi-dropdown-header,
.dark .fi-user-menu .fi-dropdown-panel .fi-dropdown-header span,
.dark .fi-topbar .fi-dropdown-panel,
.dark .fi-topbar .fi-dropdown-panel .fi-dropdown-list-item,
.dark .fi-topbar .fi-dropdown-panel .fi-dropdown-list-item-label,
.dark .fi-topbar .fi-dropdown-panel .fi-dropdown-header,
.dark .fi-topbar .fi-dropdown-panel .fi-dropdown-header span {
    color: rgb(229 231 235) !important;
}

.dark .fi-user-menu .fi-dropdown-panel .fi-icon,
.dark .fi-user-menu .fi-dropdown-panel .fi-dropdown-list-item > .fi-icon,
.dark .fi-user-menu .fi-dropdown-panel .fi-dropdown-header .fi-icon,
.dark .fi-user-menu .fi-dropdown-panel .fi-btn,
.dark .fi-user-menu .fi-dropdown-panel .fi-icon-btn,
.dark .fi-topbar .fi-dropdown-panel .fi-icon,
.dark .fi-topbar .fi-dropdown-panel .fi-dropdown-list-item > .fi-icon,
.dark .fi-topbar .fi-dropdown-panel .fi-dropdown-header .fi-icon,
.dark .fi-topbar .fi-dropdown-panel .fi-btn,
.dark .fi-topbar .fi-dropdown-panel .fi-icon-btn {
    color: rgb(107 114 128) !important;
}