/* ===== JangaMarket — Recherche intelligente (suggestions) ===== */
.jm-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,0.18); border: 1px solid #e9ecef; overflow: hidden; z-index: 3000; display: none; max-height: 70vh; overflow-y: auto; }
.jm-suggest.open { display: block; animation: jmSuggestIn 0.16s ease; }
@keyframes jmSuggestIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.jm-suggest-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; color: #98a2b3; font-weight: 700; padding: 10px 14px 4px; }
.jm-suggest-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; color: #1c2a24; transition: background 0.12s; }
.jm-suggest-item:hover { background: #f0f7f2; }
.jm-suggest-img, .jm-suggest-ic { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #e9f7ef; color: #198754; }
.jm-suggest-txt { display: flex; flex-direction: column; min-width: 0; }
.jm-suggest-txt strong { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-suggest-txt small { font-size: 0.75rem; color: #98a2b3; }
.jm-suggest-empty { padding: 16px 14px; color: #98a2b3; font-size: 0.85rem; text-align: center; }
.jm-suggest-all { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 10px; font-weight: 700; color: #198754; text-decoration: none; border-top: 1px solid #eef2f0; background: #fafbfc; }
.jm-suggest-all:hover { background: #f0f7f2; }
:root[data-theme="dark"] .jm-suggest { background: #242526; border-color: #3a3b3c; }
:root[data-theme="dark"] .jm-suggest-item { color: #e4e6eb; }
:root[data-theme="dark"] .jm-suggest-item:hover { background: #3a3b3c; }
:root[data-theme="dark"] .jm-suggest-all { background: #1c1d1e; border-color: #3a3b3c; }

/* ===== Feed : lazy + hover + skeleton shimmer ===== */
.fb-product-card, .card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.jm-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.fb-product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.10); }
.jm-skeleton { position: relative; overflow: hidden; background: #e9edf0; border-radius: 10px; }
.jm-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: jmShimmer 1.3s infinite; }
@keyframes jmShimmer { 100% { transform: translateX(100%); } }
:root[data-theme="dark"] .jm-skeleton { background: #3a3b3c; }
:root[data-theme="dark"] .jm-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }

/* ===== Colonne droite : widgets marketplace ===== */
.fb-widget { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); padding: 12px; margin-bottom: 16px; }
.fb-widget-head { font-weight: 800; font-size: 0.9rem; color: #1c2a24; display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; border-bottom: 1px solid #eef2f0; margin-bottom: 6px; }
.fb-reco-shop { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; transition: background 0.15s; }
.fb-reco-shop:hover { background: #f0f7f2; }
.fb-reco-logo { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex-shrink: 0; background: #e9f7ef; color: #198754; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.fb-reco-name { font-weight: 700; font-size: 0.86rem; color: #1c2a24; }
.fb-reco-meta { font-size: 0.74rem; color: #98a2b3; }
.fb-promo-pill { background: #fee2e2; color: #dc2626; font-weight: 800; font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }
.fb-contact-avatar { position: relative; flex-shrink: 0; }
.fb-online-dot { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; background: #22c55e; border: 2px solid #fff; border-radius: 50%; }

/* Sidebar gauche : plus large + sticky + hover + actif vert */
.fb-nav-item { border-radius: 10px; transition: background 0.15s, color 0.15s; }
.fb-nav-item:hover { background: #f0f7f2; }
.fb-nav-item.active { background: #e9f7ef; color: #198754; font-weight: 700; }
.fb-nav-item.active i { color: #198754; }

:root[data-theme="dark"] .fb-widget { background: #242526; }
:root[data-theme="dark"] .fb-widget-head { color: #e4e6eb; border-color: #3a3b3c; }
:root[data-theme="dark"] .fb-reco-name { color: #e4e6eb; }
:root[data-theme="dark"] .fb-reco-shop:hover { background: #3a3b3c; }
:root[data-theme="dark"] .fb-online-dot { border-color: #242526; }
:root[data-theme="dark"] .fb-nav-item:hover { background: #3a3b3c; }
:root[data-theme="dark"] .fb-nav-item.active { background: #2d3b34; color: #4ade80; }

/* ===== Sidebar minimaliste (collapsible, style Facebook) ===== */
.fb-nav-min { display: flex; flex-direction: column; gap: 4px; }
.fb-nav-min .fb-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-weight: 600; font-size: 0.94rem; color: #1c2a24; }
.fb-nav-min .fb-nav-item i:first-child { font-size: 1.15rem; width: 22px; text-align: center; color: #198754; }
.fb-group { border-radius: 10px; }
.fb-group > summary { list-style: none; cursor: pointer; }
.fb-group > summary::-webkit-details-marker { display: none; }
.fb-chevron { margin-left: auto; font-size: 0.8rem !important; width: auto !important; color: #98a2b3 !important; transition: transform 0.25s ease; }
.fb-group[open] > summary .fb-chevron { transform: rotate(180deg); }
.fb-group[open] > summary { background: #f0f7f2; color: #198754; }
.fb-subnav { display: flex; flex-direction: column; padding: 2px 0 6px 46px; }
.fb-subnav a, .fb-subnav-btn { display: block; padding: 8px 12px; border-radius: 8px; font-size: 0.86rem; color: #4b5563; text-decoration: none; border: none; background: none; text-align: left; cursor: pointer; width: 100%; }
.fb-subnav a:hover, .fb-subnav-btn:hover { background: #f0f7f2; color: #198754; }
.fb-subnav .text-danger:hover { background: #fef2f2; color: #dc2626 !important; }

/* Sidebars (gauche + droite) : sticky + défilement interne libre */
.fb-left,
.fb-right {
    align-self: flex-start;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.fb-left::-webkit-scrollbar,
.fb-right::-webkit-scrollbar { width: 8px; }
.fb-left::-webkit-scrollbar-thumb,
.fb-right::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.fb-left::-webkit-scrollbar-thumb:hover,
.fb-right::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.fb-left::-webkit-scrollbar-track,
.fb-right::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="dark"] .fb-left,
:root[data-theme="dark"] .fb-right { scrollbar-color: #4a4b4c transparent; }
:root[data-theme="dark"] .fb-left::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .fb-right::-webkit-scrollbar-thumb { background: #4a4b4c; }
.fb-user-card { margin-bottom: 10px; }

:root[data-theme="dark"] .fb-nav-min .fb-nav-item { color: #e4e6eb; }
:root[data-theme="dark"] .fb-group[open] > summary { background: #2d3b34; color: #4ade80; }
:root[data-theme="dark"] .fb-subnav a, :root[data-theme="dark"] .fb-subnav-btn { color: #b0b3b8; }
:root[data-theme="dark"] .fb-subnav a:hover, :root[data-theme="dark"] .fb-subnav-btn:hover { background: #3a3b3c; color: #4ade80; }

@media (max-width: 991px) {
    .fb-left { position: static; }
}