/* =============================================================================
 * SONOYA - nb-header.css
 * -----------------------------------------------------------------------------
 * Composants du header et de la navigation desktop :
 *   1. header-top-bar   : bande promo + countdown + close dismissable
 *   2. header-middle    : logo + search (cat + input + btn) + phone + langue + theme + 4 actions
 *   3. header-menu      : nav sticky 10 liens + sidebar-toggle + badges variantes
 *   4. mega-menus       : 9 panneaux (flash, new, shorts, lives, deals, sellers, brands, delivery, help)
 *   5. sidebar          : 14 categories + hover + off-canvas mobile
 *   6. sidebar-dropdown : panel hover 4 colonnes (subcats, brands, bestsellers, vendors)
 *
 * Design Sonoya original : accent terre cuite, cascade @layer, container queries,
 * pas de gradient sur boutons (D-011 #26), micro-interactions avec easings maison.
 * ============================================================================= */


/* ============================================================================
 * 1. HEADER TOP BAR
 * ============================================================================ */
@layer components {

  .nb-header-top {
    position: relative;
    z-index: var(--nb-z-header-top);
    background: var(--nb-color-text);
    color: var(--nb-color-text-inverse);
    overflow: hidden;
    transition: height var(--nb-dur-normal) var(--nb-ease-out-quart),
                opacity var(--nb-dur-normal) var(--nb-ease-standard);
  }
  .nb-header-top.is-hidden {
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .nb-header-top__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nb-space-4);
    padding: var(--nb-space-2) var(--nb-container-pad);
    max-width: var(--nb-container-max);
    margin-inline: auto;
    min-height: var(--nb-header-top-h);
    font-size: var(--nb-fs-xs);
  }

  .nb-header-top__promo {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex: 1;
    min-width: 0;
  }
  .nb-header-top__promo-icon {
    display: inline-flex;
    color: var(--nb-color-warning);
    filter: drop-shadow(0 0 6px color-mix(in oklch, var(--nb-color-warning) 45%, transparent));
    animation: nb-bolt-flicker 3s var(--nb-ease-out-expo) infinite;
  }
  @keyframes nb-bolt-flicker {
    0%, 100%   { transform: scale(1); }
    45%        { transform: scale(1); }
    47%        { transform: scale(1.15); }
    49%        { transform: scale(1); }
    52%        { transform: scale(1.10); }
    55%        { transform: scale(1); }
  }
  .nb-header-top__promo-text {
    display: inline-flex;
    gap: var(--nb-space-2);
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nb-header-top__promo-label {
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-warning);
    letter-spacing: var(--nb-ls-wider);
    text-transform: uppercase;
  }
  .nb-header-top__promo-title {
    opacity: 0.92;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
  }
  .nb-header-top__promo-discount {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: var(--nb-color-danger);
    color: white;
    border-radius: var(--nb-radius-xs);
    font-weight: var(--nb-fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--nb-ls-tight);
    font-size: 0.72rem;
  }

  .nb-header-top__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: 4px var(--nb-space-3);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    border-radius: var(--nb-radius-md);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-header-top__cta:hover {
    background: var(--nb-color-accent-hover);
    color: var(--nb-color-accent-contrast);
    transform: translateX(2px);
  }

  .nb-header-top__countdown {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--nb-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-inverse);
  }
  .nb-header-top__countdown-label {
    margin-inline-end: var(--nb-space-2);
    opacity: 0.72;
    font-family: var(--nb-font-body);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    font-size: 0.68rem;
  }
  .nb-header-top__countdown-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 3px 6px;
    background: oklch(100% 0 0 / 0.12);
    color: white;
    border-radius: var(--nb-radius-xs);
    font-size: 0.78rem;
    font-weight: var(--nb-fw-bold);
    line-height: 1;
    border: 1px solid oklch(100% 0 0 / 0.06);
  }
  .nb-header-top__countdown-sep {
    opacity: 0.5;
    font-weight: var(--nb-fw-bold);
  }

  .nb-header-top__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: white;
    opacity: 0.65;
    border-radius: var(--nb-radius-sm);
    transition: opacity var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-header-top__close:hover {
    opacity: 1;
    background: oklch(100% 0 0 / 0.10);
  }

  @media (max-width: 1024px) {
    .nb-header-top__promo-title { display: none; }
  }
  @media (max-width: 768px) {
    .nb-header-top__inner { gap: var(--nb-space-2); padding-inline: var(--nb-space-3); }
    .nb-header-top__countdown-label { display: none; }
    .nb-header-top__cta { display: none; }
  }
  @media (max-width: 480px) {
    .nb-header-top__countdown { display: none; }
  }
}


/* ============================================================================
 * 2. HEADER MIDDLE
 * ============================================================================ */
@layer components {

  .nb-header-middle {
    position: sticky;
    top: 0;
    z-index: var(--nb-z-header);
    background: var(--nb-color-surface);
    border-bottom: 1px solid var(--nb-color-border);
    transition: box-shadow var(--nb-dur-normal) var(--nb-ease-standard);
  }
  .nb-header-middle.is-scrolled {
    box-shadow: var(--nb-shadow-sm);
  }

  .nb-header-middle__inner {
    display: grid;
    grid-template-columns: auto minmax(340px, 1fr) auto;
    align-items: center;
    gap: var(--nb-space-6);
    padding: var(--nb-space-4) var(--nb-container-pad);
    max-width: var(--nb-container-max);
    margin-inline: auto;
    min-height: var(--nb-header-middle-h);
  }

  /* ---------- Brand ---------- */
  .nb-header-middle__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    color: var(--nb-color-text-strong);
    transition: transform var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-header-middle__brand:hover {
    color: var(--nb-color-text-strong);
    transform: translateY(-1px);
  }
  .nb-header-middle__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    border-radius: var(--nb-radius-md);
    font-family: var(--nb-font-heading);
    font-size: 1.45rem;
    font-weight: var(--nb-fw-heavy);
    letter-spacing: var(--nb-ls-tighter);
    line-height: 1;
  }
  .nb-header-middle__brand-text {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xl);
    font-weight: var(--nb-fw-heavy);
    letter-spacing: var(--nb-ls-wide);
    line-height: 1;
  }

  /* ---------- Search - prend toute la largeur de sa colonne (450-780px selon viewport) ---------- */
  .nb-header-middle__search {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--nb-color-surface-alt);
    border: 2px solid transparent;
    border-radius: var(--nb-radius-lg);
    width: 100%;
    min-width: 0;
    height: 48px;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
    overflow: hidden;
  }
  .nb-header-middle__search:hover { background: var(--nb-color-surface-hover); }
  .nb-header-middle__search:focus-within {
    border-color: var(--nb-color-accent);
    background: var(--nb-color-surface);
    box-shadow: var(--nb-shadow-accent);
  }

  .nb-header-middle__search-cat {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: 0 var(--nb-space-4);
    background: transparent;
    color: var(--nb-color-text-muted);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-medium);
    border-right: 1px solid var(--nb-color-border);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-header-middle__search-cat:hover { color: var(--nb-color-text); }
  .nb-header-middle__search-cat-label {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nb-header-middle__search-input {
    flex: 1;
    padding: 0 var(--nb-space-4);
    background: transparent;
    font-size: var(--nb-fs-sm);
    line-height: 1;
    min-width: 0;
    color: var(--nb-color-text);
  }
  .nb-header-middle__search-input::placeholder { color: var(--nb-color-text-faint); }
  .nb-header-middle__search-input:focus { outline: none; box-shadow: none; }

  .nb-header-middle__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
    padding: 0 var(--nb-space-5);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-weight: var(--nb-fw-semibold);
    font-size: var(--nb-fs-sm);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-header-middle__search-btn:hover { background: var(--nb-color-accent-hover); color: var(--nb-color-accent-contrast); }
  .nb-header-middle__search-btn-text { display: inline; }

  /* ---------- Actions container ---------- */
  .nb-header-middle__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nb-space-1);
    flex-wrap: nowrap;
  }

  /* Separateur visuel entre les groupes utilitaires et les actions principales */
  .nb-header-middle__actions-sep {
    width: 1px;
    height: 28px;
    background: var(--nb-color-border);
    flex-shrink: 0;
    margin-inline: var(--nb-space-2);
  }

  /* Telephone */
  .nb-header-middle__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2);
    color: var(--nb-color-text-muted);
    border-radius: var(--nb-radius-md);
    text-decoration: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-header-middle__phone:hover {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
  }
  .nb-header-middle__phone > svg,
  .nb-header-middle__phone > i { flex-shrink: 0; font-size: 1.3rem; }

  /* Langue */
  .nb-header-middle__lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--nb-space-1) var(--nb-space-2);
    font-size: 0.68rem;
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-muted);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    letter-spacing: var(--nb-ls-wider);
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                border-color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-header-middle__lang:hover {
    color: var(--nb-color-text-strong);
    border-color: var(--nb-color-border-hover);
  }

  /* Theme toggle */
  .nb-header-middle__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--nb-color-text-muted);
    border-radius: var(--nb-radius-md);
    font-size: 1.2rem;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-header-middle__theme:hover {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
  }
  .nb-header-middle__theme-icon--dark { display: none; }
  [data-theme="dark"] .nb-header-middle__theme-icon--light { display: none; }
  [data-theme="dark"] .nb-header-middle__theme-icon--dark { display: inline-block; }

  /* Action (compte, favoris, notifications, panier) */
  .nb-header-middle__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2);
    color: var(--nb-color-text);
    background: transparent;
    border: 0;
    border-radius: var(--nb-radius-md);
    cursor: pointer;
    font-family: var(--nb-font-body);
    text-decoration: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-header-middle__action:hover {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
  }

  .nb-header-middle__action-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex-shrink: 0;
    font-size: 1.45rem;
  }
  .nb-header-middle__action-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--nb-color-danger);
    color: white;
    font-size: 0.56rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--nb-color-surface);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .nb-header-middle__action-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    gap: 1px;
  }
  .nb-header-middle__action-label {
    font-size: 0.6rem;
    color: var(--nb-color-text-faint);
    font-weight: var(--nb-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
  }
  .nb-header-middle__action-value {
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    white-space: nowrap;
  }
  .nb-header-middle__action-amount {
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--nb-ls-tight);
    white-space: nowrap;
  }

  /* Le panier est le CTA principal - il ressort visuellement */
  .nb-header-middle__action--cart {
    background: var(--nb-color-accent-soft);
    border-radius: var(--nb-radius-lg);
    padding: var(--nb-space-2) var(--nb-space-3);
  }
  .nb-header-middle__action--cart:hover {
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
  }
  .nb-header-middle__action--cart:hover .nb-header-middle__action-value,
  .nb-header-middle__action--cart:hover .nb-header-middle__action-amount { color: var(--nb-color-accent-contrast); }
  .nb-header-middle__action--cart:hover .nb-header-middle__action-label { color: oklch(1 0 0 / 0.7); }

  /* Responsive header middle */
  @media (max-width: 1440px) {
    .nb-header-middle__action-text { display: none; }
    .nb-header-middle__action--cart .nb-header-middle__action-text {
      display: flex;
    }
    .nb-header-middle__action--cart .nb-header-middle__action-label { display: none; }
  }
  @media (max-width: 1200px) {
    .nb-header-middle__phone,
    .nb-header-middle__lang,
    .nb-header-middle__theme,
    .nb-header-middle__actions-sep:first-of-type { display: none; }
    .nb-header-middle__actions { gap: var(--nb-space-1); }
  }
  @media (max-width: 1024px) {
    .nb-header-middle__inner {
      grid-template-columns: auto 1fr auto;
      gap: var(--nb-space-4);
    }
    .nb-header-middle__action--cart .nb-header-middle__action-text { display: none; }
  }
  @media (max-width: 768px) {
    .nb-header-middle__inner {
      gap: var(--nb-space-3);
      padding-block: var(--nb-space-3);
      min-height: 64px;
    }
    .nb-header-middle__brand-text { display: none; }
    .nb-header-middle__brand-mark { width: 40px; height: 40px; font-size: 1.25rem; }
    .nb-header-middle__search { height: 42px; }
    .nb-header-middle__search-cat { display: none; }
    .nb-header-middle__search-btn { padding: 0 var(--nb-space-4); }
    .nb-header-middle__search-btn-text { display: none; }
    .nb-header-middle__actions-sep { display: none; }
    .nb-header-middle__action-icon { font-size: 1.3rem; }
  }
  @media (max-width: 480px) {
    .nb-header-middle__inner { padding-inline: var(--nb-space-3); }
  }
}


/* ============================================================================
 * 3. HEADER MENU
 * ============================================================================ */
@layer components {

  .nb-header-menu {
    position: sticky;
    top: var(--nb-header-middle-h);
    z-index: calc(var(--nb-z-header) - 1);
    background: var(--nb-color-surface);
    border-bottom: 1px solid var(--nb-color-border);
  }
  .nb-header-menu__inner {
    display: flex;
    align-items: stretch;
    gap: var(--nb-space-2);
    padding-inline: var(--nb-container-pad);
    max-width: var(--nb-container-max);
    margin-inline: auto;
    min-height: var(--nb-header-menu-h);
  }

  .nb-header-menu__sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
    width: var(--nb-sidebar-w);
    flex-shrink: 0;
    padding: 0 var(--nb-space-4);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-family: var(--nb-font-body);
    font-weight: var(--nb-fw-semibold);
    font-size: var(--nb-fs-sm);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
    margin-left: calc(-1 * var(--nb-container-pad));
  }
  .nb-header-menu__sidebar-toggle:hover { background: var(--nb-color-accent-hover); }
  .nb-header-menu__sidebar-toggle > svg,
  .nb-header-menu__sidebar-toggle > i { flex-shrink: 0; font-size: 1.2rem; }

  .nb-header-menu__nav {
    display: flex;
    align-items: center;
    gap: var(--nb-space-1);
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .nb-header-menu__nav::-webkit-scrollbar { display: none; }

  .nb-header-menu__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2) var(--nb-space-3);
    color: var(--nb-color-text-muted);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-medium);
    border-radius: var(--nb-radius-md);
    text-decoration: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
    white-space: nowrap;
  }
  .nb-header-menu__link:hover,
  .nb-header-menu__link.is-active {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
  }
  .nb-header-menu__link.is-active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: var(--nb-space-3);
    right: var(--nb-space-3);
    height: 2px;
    background: var(--nb-color-accent);
    border-radius: 2px 2px 0 0;
  }
  .nb-header-menu__link-icon,
  .nb-header-menu__link > i {
    display: inline-flex;
    color: currentColor;
    opacity: 0.85;
    font-size: 1.05rem;
  }
  .nb-header-menu__link:hover .nb-header-menu__link-icon,
  .nb-header-menu__link:hover > i,
  .nb-header-menu__link.is-active .nb-header-menu__link-icon,
  .nb-header-menu__link.is-active > i { opacity: 1; }
  .nb-header-menu__link-label { font-weight: inherit; }

  /* Badges dans le menu (Flash Sales HOT, Nouveautes NEW, Shorts NEW, Super Deals PROMO) */
  .nb-header-menu__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 0.58rem;
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    border-radius: var(--nb-radius-xs);
    line-height: 1.3;
  }
  .nb-header-menu__badge--hot   { background: var(--nb-color-danger);  color: white; }
  .nb-header-menu__badge--new   { background: var(--nb-color-info);    color: white; }
  .nb-header-menu__badge--promo { background: var(--nb-color-warning); color: var(--nb-color-text-strong); }

  @media (max-width: 1024px) { .nb-header-menu { display: none; } }
}


/* ============================================================================
 * 4. MEGA MENUS
 * ============================================================================ */
@layer components {

  .nb-mega {
    position: absolute;
    top: calc(var(--nb-header-top-h) + var(--nb-header-middle-h) + var(--nb-header-menu-h));
    left: 0;
    right: 0;
    background: var(--nb-color-surface);
    border-top: 1px solid var(--nb-color-border);
    border-bottom: 1px solid var(--nb-color-border);
    box-shadow: var(--nb-shadow-md);
    z-index: var(--nb-z-dropdown);
    animation: nb-mega-in var(--nb-dur-normal) var(--nb-ease-out-expo);
    max-height: calc(100vh - var(--nb-header-total-h));
    overflow-y: auto;
  }
  @keyframes nb-mega-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nb-mega[hidden] { display: none; }

  .nb-mega__inner {
    padding: var(--nb-space-8) var(--nb-container-pad);
    max-width: var(--nb-container-max);
    margin-inline: auto;
  }
  .nb-mega__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.3fr;
    gap: var(--nb-space-8);
  }
  .nb-mega__col {
    min-width: 0;
  }
  .nb-mega__col-title {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    margin-bottom: var(--nb-space-4);
    padding-bottom: var(--nb-space-2);
    border-bottom: 2px solid var(--nb-color-accent);
  }
  .nb-mega__col-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nb-mega__link {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: 6px 0;
    color: var(--nb-color-text-muted);
    font-size: var(--nb-fs-sm);
    line-height: var(--nb-lh-snug);
    text-decoration: none;
    border-radius: 0;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                padding-left var(--nb-dur-fast) var(--nb-ease-out-quart);
    position: relative;
  }
  .nb-mega__link::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--nb-color-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-mega__link:hover {
    color: var(--nb-color-accent);
    padding-left: var(--nb-space-3);
  }
  .nb-mega__link:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
  }
  .nb-mega__link--all {
    color: var(--nb-color-accent);
    font-weight: var(--nb-fw-semibold);
    margin-top: var(--nb-space-2);
    padding-top: var(--nb-space-2);
    border-top: 1px dashed var(--nb-color-border);
  }
  .nb-mega__link--seller {
    justify-content: space-between;
    gap: var(--nb-space-2);
  }
  .nb-mega__link-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nb-mega__link-rating {
    font-size: 0.72rem;
    color: var(--nb-color-star);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
  }
  .nb-mega__badge-local {
    display: inline-flex;
    padding: 1px 5px;
    background: var(--nb-color-success);
    color: white;
    font-size: 0.58rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-xs);
    letter-spacing: var(--nb-ls-wider);
    margin-inline-start: 4px;
  }

  /* ---------- Promo card (colonne 5) - plat, sans radial ---------- */
  .nb-mega__promo {
    padding: var(--nb-space-5);
    background: var(--nb-color-surface-alt);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
  }
  .nb-mega__promo--flash   { background: var(--nb-color-warning-soft); border-color: transparent; }
  .nb-mega__promo--new     { background: var(--nb-color-info-soft); border-color: transparent; }
  .nb-mega__promo--shorts  { background: color-mix(in oklch, oklch(60% 0.22 300) 10%, var(--nb-color-surface)); border-color: transparent; }
  .nb-mega__promo--lives   { background: var(--nb-color-live-soft); border-color: transparent; }
  .nb-mega__promo--deals   { background: var(--nb-color-danger-soft); border-color: transparent; }
  .nb-mega__promo--sellers { background: var(--nb-color-success-soft); border-color: transparent; }

  .nb-mega__promo-label {
    align-self: flex-start;
    padding: 3px var(--nb-space-2);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-size: 0.65rem;
    font-weight: var(--nb-fw-bold);
    letter-spacing: var(--nb-ls-wider);
    text-transform: uppercase;
    border-radius: var(--nb-radius-xs);
  }
  .nb-mega__promo--lives .nb-mega__promo-label { background: var(--nb-color-live); }
  .nb-mega__promo--shorts .nb-mega__promo-label { background: oklch(60% 0.22 300); }
  .nb-mega__promo--flash .nb-mega__promo-label  { background: var(--nb-color-warning); color: var(--nb-color-text-strong); }
  .nb-mega__promo--new .nb-mega__promo-label    { background: var(--nb-color-info); }
  .nb-mega__promo--deals .nb-mega__promo-label  { background: var(--nb-color-danger); }
  .nb-mega__promo--sellers .nb-mega__promo-label{ background: var(--nb-color-success); }

  .nb-mega__promo-title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    line-height: var(--nb-lh-tight);
    letter-spacing: var(--nb-ls-tight);
  }
  .nb-mega__promo-text {
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);
    line-height: var(--nb-lh-snug);
    flex: 1;
  }
  .nb-mega__promo-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2) var(--nb-space-4);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    border-radius: var(--nb-radius-md);
    text-decoration: none;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-mega__promo-btn:hover {
    background: var(--nb-color-accent-hover);
    color: var(--nb-color-accent-contrast);
  }

  /* ---------- Panel Shorts (D-024) : videos grid ---------- */
  .nb-mega__col--videos { grid-column: span 2; }
  .nb-mega__videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nb-space-3);
  }
  .nb-mega__video-item {
    border-radius: var(--nb-radius-md);
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: transform var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-mega__video-item:hover { transform: translateY(-3px); }
  .nb-mega__video-thumb {
    position: relative;
    aspect-ratio: 9/16;
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-md);
    overflow: hidden;
  }
  .nb-mega__video-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .nb-mega__video-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 2px 5px;
    background: oklch(0% 0 0 / 0.75);
    color: white;
    font-size: 0.6rem;
    border-radius: var(--nb-radius-xs);
    font-variant-numeric: tabular-nums;
  }
  .nb-mega__video-views {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 5px;
    background: oklch(0% 0 0 / 0.75);
    color: white;
    font-size: 0.6rem;
    border-radius: var(--nb-radius-xs);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Panel Lives (D-025) : cards horizontales ---------- */
  .nb-mega__lives-list {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
  }
  .nb-mega__live-item {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-2);
    border-radius: var(--nb-radius-md);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
    text-decoration: none;
  }
  .nb-mega__live-item:hover { background: var(--nb-color-surface-alt); }
  .nb-mega__live-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--nb-radius-sm);
    flex-shrink: 0;
  }
  .nb-mega__live-item.is-live img {
    outline: 2px solid var(--nb-color-live);
    outline-offset: -2px;
    box-shadow: 0 0 12px var(--nb-color-live-glow);
  }
  .nb-mega__live-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .nb-mega__live-title {
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
    line-height: var(--nb-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nb-mega__live-seller {
    font-size: 0.68rem;
    color: var(--nb-color-text-faint);
  }
  .nb-mega__live-viewers {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--nb-color-live);
    font-weight: var(--nb-fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .nb-mega__live-when {
    font-size: 0.68rem;
    color: var(--nb-color-info);
    font-weight: var(--nb-fw-semibold);
    font-variant-numeric: tabular-nums;
  }
  .nb-mega__live-replay-views {
    font-size: 0.68rem;
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;
  }

  .nb-mega__empty {
    padding: var(--nb-space-4);
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-md);
    color: var(--nb-color-text-faint);
    font-size: var(--nb-fs-xs);
    font-style: italic;
    text-align: center;
  }

  @media (max-width: 1280px) {
    .nb-mega__cols { grid-template-columns: repeat(3, 1fr) 1.2fr; }
    .nb-mega__col--videos { grid-column: span 2; }
    .nb-mega__col:nth-child(4):not(.nb-mega__promo) { display: none; }
  }
  @media (max-width: 1024px) {
    .nb-mega { display: none !important; }
  }
}


/* ============================================================================
 * 5. SIDEBAR CATEGORIES
 * ============================================================================ */
@layer components {

  /* Sidebar categories - dropdown flottant sur desktop, off-canvas sur mobile.
     Elle est cachee par defaut, s'ouvre via [.is-open] gere par global.js
     (hover ou clic sur le bouton "Toutes les categories"). */
  .nb-sidebar {
    position: fixed;
    top: calc(var(--nb-header-middle-h) + var(--nb-header-menu-h));
    left: 0;
    width: var(--nb-sidebar-w);
    max-height: calc(100vh - var(--nb-header-middle-h) - var(--nb-header-menu-h));
    background: var(--nb-color-surface);
    border-right: 1px solid var(--nb-color-border);
    border-bottom: 1px solid var(--nb-color-border);
    box-shadow: var(--nb-shadow-xl);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    z-index: var(--nb-z-dropdown);
    scrollbar-width: thin;
    scrollbar-color: var(--nb-color-border) transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-sidebar.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  body.nb-header-top-closed .nb-sidebar {
    top: var(--nb-header-menu-h);
    max-height: calc(100vh - var(--nb-header-menu-h));
  }

  .nb-sidebar__header {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-3) var(--nb-space-4);
    background: #f5f5f7;
    border-bottom: 1px solid var(--nb-color-border);
    color: var(--nb-color-text-strong);
    font-family: var(--nb-font-heading);
    font-weight: var(--nb-fw-bold);
    font-size: var(--nb-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
  }
  .nb-sidebar__close {
    display: none;
    margin-inline-start: auto;
    padding: 4px;
    color: white;
    opacity: 0.85;
    border-radius: var(--nb-radius-sm);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .nb-sidebar__close:hover { opacity: 1; background: oklch(100% 0 0 / 0.15); }

  .nb-sidebar__list {
    flex: 1;
    overflow-y: auto;
    padding: var(--nb-space-2);
  }
  .nb-sidebar__item { margin-bottom: 2px; }
  .nb-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-3);
    color: var(--nb-color-text);
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-medium);
    text-decoration: none;
    border-radius: var(--nb-radius-md);
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard),
                padding-left var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-sidebar__link:hover {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
    padding-inline-start: var(--nb-space-4);
  }
  .nb-sidebar__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    width: 20px;
    color: var(--nb-color-text);
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-spring);
  }
  .nb-sidebar__link:hover .nb-sidebar__link-icon {
    color: var(--nb-color-accent);
    transform: scale(1.1);
  }
  .nb-sidebar__link-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nb-sidebar__link-count {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    background: var(--nb-color-surface-alt);
    border-radius: var(--nb-radius-pill);
    font-weight: var(--nb-fw-medium);
  }
  .nb-sidebar__link-arrow {
    color: var(--nb-color-text-faint);
    opacity: 0;
    transition: opacity var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-sidebar__link:hover .nb-sidebar__link-arrow {
    opacity: 1;
    transform: translateX(2px);
    color: var(--nb-color-accent);
  }
  .nb-sidebar__item.is-active > .nb-sidebar__link {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
    font-weight: var(--nb-fw-semibold);
  }

  .nb-sidebar__footer {
    padding: var(--nb-space-3);
    border-top: 1px solid var(--nb-color-border);
    background: var(--nb-color-surface-alt);
  }
  .nb-sidebar__see-all {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2) var(--nb-space-3);
    color: var(--nb-color-accent);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    text-decoration: none;
    transition: gap var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-sidebar__see-all:hover { gap: var(--nb-space-3); color: var(--nb-color-accent-hover); }

  @media (max-width: 1024px) {
    .nb-sidebar {
      top: 0;
      left: 0;
      bottom: 0;
      width: 320px;
      max-width: 85vw;
      max-height: 100dvh;
      min-height: 100dvh;
      height: 100dvh;
      z-index: var(--nb-z-drawer);
      border-radius: 0;
      opacity: 1;
      transform: translateX(-100%);
      transition: transform var(--nb-dur-normal) var(--nb-ease-out-expo);
      box-shadow: var(--nb-shadow-xl);
    }
    .nb-sidebar.is-open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }
    .nb-sidebar__close { display: inline-flex; }
  }
}


/* ============================================================================
 * 6. SIDEBAR DROPDOWN — Design SONOYA premium
 *    Dense, contraste, micro-interactions, identite propre.
 * ============================================================================ */
@layer components {

  /* ===================== Conteneur principal ===================== */
  .nb-sidebar-dropdown {
    position: fixed;
    top: calc(var(--nb-header-middle-h) + var(--nb-header-menu-h));
    left: var(--nb-sidebar-w);
    right: auto;
    width: auto;
    max-width: calc(100vw - var(--nb-sidebar-w));
    height: calc(100vh - var(--nb-header-middle-h) - var(--nb-header-menu-h));
    background: var(--nb-color-surface);
    border-right: 1px solid var(--nb-color-border);
    border-bottom: 1px solid var(--nb-color-border);
    box-shadow: 4px 4px 24px oklch(0% 0 0 / 0.12);
    z-index: calc(var(--nb-z-dropdown) + 10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition: opacity 180ms var(--nb-ease-out-quart),
                visibility 180ms var(--nb-ease-out-quart),
                transform 180ms var(--nb-ease-out-quart);
  }
  .nb-sidebar-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  body.nb-header-top-closed .nb-sidebar-dropdown {
    top: var(--nb-header-menu-h);
    height: calc(100vh - var(--nb-header-menu-h));
  }

  /* ===================== Contenu : 3 colonnes ===================== */
  .nb-sidebar-dropdown__content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }
  .nb-sidebar-dropdown__col {
    overflow-y: auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--nb-color-accent-200) transparent;
    border-right: 1px solid var(--nb-color-border);
  }
  .nb-sidebar-dropdown__col:last-child { border-right: none; }

  /* COL 1 — Sous-categories : largeur adaptative au contenu */
  .nb-sidebar-dropdown__col--subs {
    flex: 0 0 auto;
    padding: var(--nb-space-5) var(--nb-space-4);
    display: flex;
    flex-direction: column;
  }

  /* COL 2 — Marques : largeur adaptative */
  .nb-sidebar-dropdown__col--brands {
    flex: 0 0 auto;
    padding: var(--nb-space-5) var(--nb-space-4);
    display: flex;
    flex-direction: column;
  }

  /* COL 3 — Bestsellers + banniere : prend le reste */
  .nb-sidebar-dropdown__col--highlights {
    flex: 1 1 0;
    min-width: 280px;
    padding: var(--nb-space-5) var(--nb-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-4);
  }

  /* ===================== Titres de section ===================== */
  .nb-sidebar-dropdown__title {
    font-family: var(--nb-font-heading);
    font-weight: var(--nb-fw-bold);
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-accent);
    margin-bottom: var(--nb-space-4);
    padding-bottom: var(--nb-space-3);
    border-bottom: 1px solid var(--nb-color-border);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: var(--nb-lh-snug);
  }

  /* ===================== Sous-categories ===================== */
  .nb-sidebar-dropdown__subs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
  }
  .nb-sidebar-dropdown__sub-link {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: 6px var(--nb-space-2);
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-medium);
    color: var(--nb-color-text);
    border-radius: var(--nb-radius-sm);
    text-decoration: none;
    transition: all 140ms var(--nb-ease-out-quart);
    border-left: 2px solid transparent;
  }
  .nb-sidebar-dropdown__sub-link:hover {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
    border-left-color: var(--nb-color-accent);
    padding-left: var(--nb-space-3);
  }
  .nb-sidebar-dropdown__sub-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nb-color-surface-alt);
    flex-shrink: 0;
    transition: all 140ms var(--nb-ease-out-quart);
  }
  .nb-sidebar-dropdown__sub-chevron svg {
    width: 8px;
    height: 8px;
    color: var(--nb-color-text-faint);
    transition: all 140ms var(--nb-ease-out-quart);
  }
  .nb-sidebar-dropdown__sub-link:hover .nb-sidebar-dropdown__sub-chevron {
    background: var(--nb-color-accent);
  }
  .nb-sidebar-dropdown__sub-link:hover .nb-sidebar-dropdown__sub-chevron svg {
    color: white;
    transform: translateX(1px);
  }
  .nb-sidebar-dropdown__sub-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
  }
  .nb-sidebar-dropdown__sub-count {
    font-size: 0.62rem;
    font-weight: var(--nb-fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--nb-color-text-faint);
    background: var(--nb-color-surface-alt);
    padding: 0 6px;
    border-radius: var(--nb-radius-pill);
    flex-shrink: 0;
    line-height: 1.6;
  }
  .nb-sidebar-dropdown__sub-link:hover .nb-sidebar-dropdown__sub-count {
    background: var(--nb-color-accent);
    color: white;
  }

  /* Lien "Voir tous les produits" */
  .nb-sidebar-dropdown__sub-see-all {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    margin-top: auto;
    padding: 6px var(--nb-space-3);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-accent-contrast);
    background: var(--nb-color-accent);
    text-decoration: none;
    border-radius: var(--nb-radius-pill);
    letter-spacing: 0.04em;
    transition: all 140ms var(--nb-ease-out-quart);
  }
  .nb-sidebar-dropdown__sub-see-all:hover {
    background: var(--nb-color-accent-hover);
    transform: translateX(2px);
  }
  .nb-sidebar-dropdown__sub-see-all svg {
    transition: transform 140ms;
  }
  .nb-sidebar-dropdown__sub-see-all:hover svg {
    transform: translateX(3px);
  }

  /* ===================== Marques — grille 3 colonnes ===================== */
  .nb-sidebar-dropdown__brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nb-space-3);
  }
  .nb-sidebar-dropdown__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
    height: 52px;
    padding: var(--nb-space-2);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all 140ms var(--nb-ease-out-quart);
  }
  .nb-sidebar-dropdown__brand:hover {
    border-color: var(--nb-color-accent);
    box-shadow: 0 0 0 1px var(--nb-color-accent);
    color: var(--nb-color-accent);
  }
  .nb-sidebar-dropdown__brand-initial {
    width: 24px;
    height: 24px;
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .nb-sidebar-dropdown__brand-name {
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nb-sidebar-dropdown__brand:hover .nb-sidebar-dropdown__brand-name {
    color: var(--nb-color-accent);
  }

  /* ===================== Bestsellers ===================== */
  .nb-sidebar-dropdown__section-title {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nb-color-accent);
    margin-bottom: var(--nb-space-4);
    padding-bottom: var(--nb-space-3);
    border-bottom: 1px solid var(--nb-color-border);
  }
  .nb-sidebar-dropdown__section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-size: 0.6rem;
    font-weight: var(--nb-fw-heavy);
    border-radius: var(--nb-radius-pill);
    margin-left: auto;
  }
  .nb-sidebar-dropdown__bestsellers-list {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
  }
  .nb-sidebar-dropdown__bestseller {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2);
    border-radius: var(--nb-radius-md);
    text-decoration: none;
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    transition: all 140ms var(--nb-ease-out-quart);
    position: relative;
  }
  .nb-sidebar-dropdown__bestseller:hover {
    border-color: var(--nb-color-accent-300);
    box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
    transform: translateY(-1px);
  }

  /* Rang numerote (1, 2, 3, 4) */
  .nb-sidebar-dropdown__bestseller-rank {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nb-color-text-strong);
    color: var(--nb-color-surface);
    font-family: var(--nb-font-heading);
    font-size: 0.6rem;
    font-weight: var(--nb-fw-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .nb-sidebar-dropdown__bestseller:first-child .nb-sidebar-dropdown__bestseller-rank {
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
  }

  /* Image produit */
  .nb-sidebar-dropdown__bestseller-img {
    width: 52px;
    height: 52px;
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-surface-alt);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }
  .nb-sidebar-dropdown__bestseller-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 200ms var(--nb-ease-out-quart);
  }
  .nb-sidebar-dropdown__bestseller:hover .nb-sidebar-dropdown__bestseller-img img {
    transform: scale(1.06);
  }

  /* Badge promo -X% */
  .nb-sidebar-dropdown__bestseller-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: oklch(55% 0.25 29);
    color: white;
    font-family: var(--nb-font-heading);
    font-size: 0.55rem;
    font-weight: var(--nb-fw-heavy);
    padding: 1px 4px;
    border-radius: 0 0 var(--nb-radius-sm) 0;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  /* Infos produit */
  .nb-sidebar-dropdown__bestseller-info {
    flex: 1;
    min-width: 0;
  }
  .nb-sidebar-dropdown__bestseller-name {
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nb-sidebar-dropdown__bestseller-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
  }
  .nb-sidebar-dropdown__bestseller-stars {
    color: oklch(80% 0.18 85);
    font-size: 0.65rem;
    letter-spacing: 0.5px;
  }
  .nb-sidebar-dropdown__bestseller-prices {
    display: flex;
    align-items: baseline;
    gap: var(--nb-space-1);
    margin-top: 1px;
  }
  .nb-sidebar-dropdown__bestseller-price {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-accent);
    font-variant-numeric: tabular-nums;
  }
  .nb-sidebar-dropdown__bestseller-old {
    font-size: 0.6rem;
    font-weight: var(--nb-fw-medium);
    color: var(--nb-color-text-faint);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
  }

  /* ===================== Banniere pub ===================== */
  .nb-sidebar-dropdown__ad-section {
    margin-top: auto;
  }
  .nb-sidebar-dropdown__ad-link {
    display: block;
    border-radius: var(--nb-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: transform 200ms var(--nb-ease-out-quart);
  }
  .nb-sidebar-dropdown__ad-link:hover { transform: scale(1.015); }

  /* Banniere avec image de fond */
  .nb-sidebar-dropdown__ad-banner {
    width: 100%;
    min-height: 90px;
    background-size: cover;
    background-position: center;
    border-radius: var(--nb-radius-md);
    position: relative;
    overflow: hidden;
  }
  .nb-sidebar-dropdown__ad-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, oklch(0% 0 0 / 0.6) 0%, oklch(0% 0 0 / 0.25) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--nb-space-3);
    gap: var(--nb-space-2);
  }
  .nb-sidebar-dropdown__ad-title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-heavy);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 4px oklch(0% 0 0 / 0.4);
  }
  .nb-sidebar-dropdown__ad-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: 4px var(--nb-space-3);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-family: var(--nb-font-heading);
    font-size: 0.68rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-pill);
    letter-spacing: 0.04em;
    transition: all 140ms;
  }
  .nb-sidebar-dropdown__ad-link:hover .nb-sidebar-dropdown__ad-cta {
    background: var(--nb-color-accent-contrast);
    color: var(--nb-color-accent);
  }
  .nb-sidebar-dropdown__ad-cta svg {
    transition: transform 140ms;
  }
  .nb-sidebar-dropdown__ad-link:hover .nb-sidebar-dropdown__ad-cta svg {
    transform: translateX(3px);
  }

  /* Banniere placeholder (pas d'image) */
  .nb-sidebar-dropdown__ad-placeholder {
    width: 100%;
    padding: var(--nb-space-4) var(--nb-space-3);
    background: linear-gradient(135deg, var(--nb-color-accent) 0%, var(--nb-color-accent-hover) 100%);
    border-radius: var(--nb-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 200ms;
  }
  .nb-sidebar-dropdown__ad-link:hover .nb-sidebar-dropdown__ad-placeholder {
    filter: brightness(1.08);
  }

  /* ===================== Footer vendeurs ===================== */
  .nb-sidebar-dropdown__footer {
    padding: var(--nb-space-4) var(--nb-space-5);
    border-top: 1px solid var(--nb-color-border);
    background: var(--nb-color-surface);
  }
  .nb-sidebar-dropdown__footer-title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nb-color-text-muted);
    margin-bottom: var(--nb-space-3);
  }
  .nb-sidebar-dropdown__vendors {
    display: flex;
    gap: var(--nb-space-4);
  }
  .nb-sidebar-dropdown__vendor {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-3) var(--nb-space-4);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    transition: all 140ms var(--nb-ease-out-quart);
    cursor: pointer;
    text-decoration: none;
    flex: 1;
    min-width: 0;
  }
  .nb-sidebar-dropdown__vendor:hover {
    border-color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px oklch(0% 0 0 / 0.05);
  }
  .nb-sidebar-dropdown__vendor.is-live {
    border-color: oklch(55% 0.25 29);
  }
  .nb-sidebar-dropdown__vendor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nb-color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-accent-contrast);
    flex-shrink: 0;
  }
  .nb-sidebar-dropdown__vendor-info {
    flex: 1;
    min-width: 0;
  }
  .nb-sidebar-dropdown__vendor-name {
    display: flex;
    align-items: center;
    gap: var(--nb-space-1);
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nb-sidebar-dropdown__vendor-verified {
    color: oklch(62% 0.19 250);
    flex-shrink: 0;
    width: 12px;
    height: 12px;
  }
  .nb-sidebar-dropdown__vendor-meta {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-medium);
    color: var(--nb-color-text-muted);
    margin-top: 2px;
  }
  .nb-sidebar-dropdown__vendor-stars {
    color: oklch(80% 0.18 85);
    letter-spacing: 0.5px;
  }
  .nb-sidebar-dropdown__vendor-sep {
    color: var(--nb-color-border);
  }
  .nb-sidebar-dropdown__vendor-live {
    background: oklch(55% 0.25 29);
    color: white;
    font-size: 0.5rem;
    font-weight: var(--nb-fw-heavy);
    padding: 0 4px;
    border-radius: var(--nb-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    animation: nb-live-pulse 1.5s ease-in-out infinite;
  }
  @keyframes nb-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  @media (max-width: 1024px) {
    .nb-sidebar-dropdown { display: none !important; }
  }
}