/* =============================================================================
 * SONOYA GUINEE - nb-global.css
 * =============================================================================
 * Design system racine, charge en priorite sur toutes les pages.
 *
 * Conventions D-011 :
 *   1.  Mode clair par defaut (data-theme="light"), sombre en opt-in
 *   2.  Zero police Inter - Bricolage Grotesque (titres) + Manrope (texte)
 *   3.  Couleurs en oklch(), derivations via color-mix()
 *   4.  Cascade layers @layer reset,tokens,base,layout,components,pages,utilities
 *   5.  Nesting CSS natif dans les composants
 *   6.  Container queries pour composants adaptatifs
 *   7.  <dialog> et popover natifs (pas de is-open + body.overflow)
 *  14.  Easings maison : --ease-*, jamais 'ease'
 *  15.  Radius : echelle deliberee avec angles vifs assumes
 *
 * Sections :
 *   1.  @font-face + @layer declaration
 *   2.  Reset moderne
 *   3.  Tokens : couleurs, typographie, spacing, radius, shadows, easings, z-index
 *   4.  Base : html/body/typography/links/forms/tables/scrollbar
 *   5.  Layout globaux : container, page-wrapper, main, sections, skip-link, overlay
 *   6.  Primitives buttons : nb-btn (8 variantes x 4 sizes + states)
 *   7.  Primitives badges : nb-badge (solid/soft/outline x 8 colors)
 *   8.  Primitives chips + tags
 *   9.  Primitives forms : input/textarea/select/checkbox/radio/switch/file
 *   10. Primitives cards : nb-card (base/elevated/outlined/interactive)
 *   11. Primitives avatars : nb-avatar (4 sizes + status dot + initials)
 *   12. Primitives rating & prix : nb-rating, nb-price
 *   13. Primitives progress + skeleton + spinner
 *   14. Primitives tooltip + popover
 *   15. Primitives tabs + accordion
 *   16. Primitives breadcrumb + pagination
 *   17. Primitives toasts + alerts
 *   18. Primitives divider
 *   19. Composants Sonoya-specifiques :
 *       - nb-live-badge (D-025) pulsant
 *       - nb-follow-btn (D-022) avec toggle
 *       - nb-chat-icon (D-023) avec online dot
 *       - nb-video-thumb (D-024) mini-preview
 *   20. Typography helpers
 *   21. Utilities (display, flex, grid, gap, spacing, text, size, radius, shadow, position, misc)
 *   22. Global animations (fade, slide, pulse, shimmer, zoom, spin, bounce)
 * ============================================================================= */


/* ============================================================================
 * 1. FONTS - Auto-hebergees dans /assets/fonts/ (D-016)
 * ============================================================================ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-variable.woff2") format("woff2-variations");
}

/* Cascade layers - ordre canonique Sonoya */
@layer reset, tokens, base, layout, components, pages, utilities;


/* ============================================================================
 * 2. RESET MODERNE
 * ============================================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
  }
  html:focus-within { scroll-behavior: smooth; }
  body {
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
    overflow-y: auto;
  }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  img { font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 1rem; }
  input, button, textarea, select { font: inherit; color: inherit; background: none; border: none; }
  button { cursor: pointer; }
  button:disabled { cursor: not-allowed; }
  a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  ul, ol { list-style: none; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { border: 0; }
  legend { padding: 0; }
  ::selection { background: var(--nb-color-accent); color: var(--nb-color-accent-contrast); }
  dialog { border: 0; padding: 0; background: transparent; color: inherit; }
  dialog::backdrop { background: oklch(15% 0.010 60 / 0.55); backdrop-filter: blur(6px); }
  dialog[open] { animation: nb-dialog-in var(--nb-dur-normal) var(--nb-ease-out-quart); }

  [hidden] { display: none !important; }
  [tabindex="-1"]:focus { outline: none; }

  /* Prefers reduced motion : neutralise toutes les animations */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}


/* ============================================================================
 * 3. TOKENS - Design system Sonoya
 * ============================================================================ */
@layer tokens {

  :root {
    /* ---------- Couleurs neutres chaudes (D-014) ---------- */
    --nb-neutral-0:    oklch(100% 0 0);
    --nb-neutral-25:   oklch(99%  0.005 70);
    --nb-neutral-50:   oklch(97%  0.010 70);
    --nb-neutral-100:  oklch(95%  0.012 70);
    --nb-neutral-200:  oklch(90%  0.013 70);
    --nb-neutral-300:  oklch(82%  0.014 70);
    --nb-neutral-400:  oklch(70%  0.014 60);
    --nb-neutral-500:  oklch(58%  0.014 60);
    --nb-neutral-600:  oklch(46%  0.014 60);
    --nb-neutral-700:  oklch(34%  0.014 60);
    --nb-neutral-800:  oklch(24%  0.014 60);
    --nb-neutral-900:  oklch(16%  0.012 60);
    --nb-neutral-950:  oklch(10%  0.010 60);

    /* ---------- Surfaces derivees (mode clair par defaut) ---------- */
    --nb-color-bg:            var(--nb-neutral-50);
    --nb-color-surface:       var(--nb-neutral-0);
    --nb-color-surface-alt:   var(--nb-neutral-100);
    --nb-color-surface-sunk:  var(--nb-neutral-200);
    --nb-color-surface-hover: color-mix(in oklch, var(--nb-color-surface-alt) 65%, var(--nb-color-surface));

    /* ---------- Texte ---------- */
    --nb-color-text:          var(--nb-neutral-900);
    --nb-color-text-strong:   var(--nb-neutral-950);
    --nb-color-text-muted:    var(--nb-neutral-600);
    --nb-color-text-faint:    var(--nb-neutral-500);
    --nb-color-text-disabled: var(--nb-neutral-400);
    --nb-color-text-inverse:  var(--nb-neutral-0);
    --nb-color-text-on-accent:oklch(100% 0 0);

    /* ---------- Bordures ---------- */
    --nb-color-border:        var(--nb-neutral-200);
    --nb-color-border-alt:    var(--nb-neutral-100);
    --nb-color-border-strong: var(--nb-neutral-300);
    --nb-color-border-hover:  var(--nb-neutral-400);

    /* ---------- Accent Sonoya : orange terre cuite chaud (D-014) ---------- */
    --nb-color-accent:            oklch(66% 0.192 42);
    --nb-color-accent-100:        color-mix(in oklch, var(--nb-color-accent) 8%,  var(--nb-color-surface));
    --nb-color-accent-200:        color-mix(in oklch, var(--nb-color-accent) 18%, var(--nb-color-surface));
    --nb-color-accent-300:        color-mix(in oklch, var(--nb-color-accent) 32%, var(--nb-color-surface));
    --nb-color-accent-400:        color-mix(in oklch, var(--nb-color-accent) 55%, var(--nb-color-surface));
    --nb-color-accent-hover:      color-mix(in oklch, var(--nb-color-accent) 88%, black);
    --nb-color-accent-active:     color-mix(in oklch, var(--nb-color-accent) 78%, black);
    --nb-color-accent-soft:       color-mix(in oklch, var(--nb-color-accent) 12%, var(--nb-color-surface));
    --nb-color-accent-soft-hover: color-mix(in oklch, var(--nb-color-accent) 20%, var(--nb-color-surface));
    --nb-color-accent-contrast:   oklch(100% 0 0);
    --nb-color-accent-glow:       color-mix(in oklch, var(--nb-color-accent) 35%, transparent);

    /* ---------- Semantic ---------- */
    --nb-color-success:       oklch(62% 0.155 148);
    --nb-color-success-soft:  color-mix(in oklch, var(--nb-color-success) 14%, var(--nb-color-surface));
    --nb-color-success-hover: color-mix(in oklch, var(--nb-color-success) 88%, black);

    --nb-color-warning:       oklch(76% 0.175 82);
    --nb-color-warning-soft:  color-mix(in oklch, var(--nb-color-warning) 16%, var(--nb-color-surface));
    --nb-color-warning-hover: color-mix(in oklch, var(--nb-color-warning) 88%, black);

    --nb-color-danger:        oklch(60% 0.225 25);
    --nb-color-danger-soft:   color-mix(in oklch, var(--nb-color-danger) 14%, var(--nb-color-surface));
    --nb-color-danger-hover:  color-mix(in oklch, var(--nb-color-danger) 88%, black);

    --nb-color-info:          oklch(60% 0.155 240);
    --nb-color-info-soft:     color-mix(in oklch, var(--nb-color-info) 14%, var(--nb-color-surface));
    --nb-color-info-hover:    color-mix(in oklch, var(--nb-color-info) 88%, black);

    /* ---------- Live rouge pulsant (D-025) ---------- */
    --nb-color-live:      oklch(57% 0.232 24);
    --nb-color-live-soft: color-mix(in oklch, var(--nb-color-live) 15%, var(--nb-color-surface));
    --nb-color-live-glow: color-mix(in oklch, var(--nb-color-live) 45%, transparent);

    /* ---------- Rating stars ---------- */
    --nb-color-star:       oklch(78% 0.170 82);
    --nb-color-star-empty: var(--nb-color-border-strong);

    /* ---------- Shadows chaudes (elevation) ---------- */
    --nb-shadow-xs:  0 1px 2px  oklch(20% 0.012 60 / 0.05);
    --nb-shadow-sm:  0 2px 4px  oklch(20% 0.012 60 / 0.06), 0 1px 2px oklch(20% 0.012 60 / 0.04);
    --nb-shadow-md:  0 4px 12px oklch(20% 0.012 60 / 0.08), 0 2px 4px oklch(20% 0.012 60 / 0.05);
    --nb-shadow-lg:  0 12px 24px oklch(20% 0.012 60 / 0.10), 0 4px 8px oklch(20% 0.012 60 / 0.06);
    --nb-shadow-xl:  0 24px 48px oklch(20% 0.012 60 / 0.14), 0 8px 16px oklch(20% 0.012 60 / 0.08);
    --nb-shadow-2xl: 0 32px 64px oklch(20% 0.012 60 / 0.18), 0 16px 32px oklch(20% 0.012 60 / 0.10);
    --nb-shadow-inner: inset 0 2px 4px oklch(20% 0.012 60 / 0.06);

    /* Shadow d'accent */
    --nb-shadow-accent: 0 8px 24px var(--nb-color-accent-glow);

    /* ---------- Typography (D-016) ---------- */
    --nb-font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --nb-font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --nb-font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Echelle fluide clamp(min, preferred, max) - modular scale 1.20 */
    --nb-fs-2xs:  clamp(0.65rem, 0.62rem + 0.15vw, 0.72rem);
    --nb-fs-xs:   clamp(0.72rem, 0.68rem + 0.20vw, 0.80rem);
    --nb-fs-sm:   clamp(0.82rem, 0.78rem + 0.20vw, 0.90rem);
    --nb-fs-base: clamp(0.94rem, 0.90rem + 0.20vw, 1.00rem);
    --nb-fs-md:   clamp(1.05rem, 1.00rem + 0.25vw, 1.15rem);
    --nb-fs-lg:   clamp(1.20rem, 1.14rem + 0.30vw, 1.32rem);
    --nb-fs-xl:   clamp(1.44rem, 1.34rem + 0.50vw, 1.62rem);
    --nb-fs-2xl:  clamp(1.76rem, 1.60rem + 0.80vw, 2.05rem);
    --nb-fs-3xl:  clamp(2.10rem, 1.85rem + 1.25vw, 2.55rem);
    --nb-fs-4xl:  clamp(2.55rem, 2.15rem + 2.00vw, 3.30rem);
    --nb-fs-5xl:  clamp(3.10rem, 2.55rem + 2.75vw, 4.20rem);
    --nb-fs-6xl:  clamp(3.80rem, 3.10rem + 3.50vw, 5.30rem);

    --nb-lh-tight:   1.10;
    --nb-lh-snug:    1.25;
    --nb-lh-normal:  1.50;
    --nb-lh-relaxed: 1.65;
    --nb-lh-loose:   1.80;

    --nb-ls-tighter: -0.03em;
    --nb-ls-tight:   -0.015em;
    --nb-ls-normal:  0;
    --nb-ls-wide:    0.02em;
    --nb-ls-wider:   0.05em;
    --nb-ls-widest:  0.10em;

    --nb-fw-light:    300;
    --nb-fw-normal:   400;
    --nb-fw-medium:   500;
    --nb-fw-semibold: 600;
    --nb-fw-bold:     700;
    --nb-fw-heavy:    800;

    /* ---------- Spacing (baseline 4px) ---------- */
    --nb-space-0:   0;
    --nb-space-px:  1px;
    --nb-space-0-5: 0.125rem;
    --nb-space-1:   0.25rem;
    --nb-space-1-5: 0.375rem;
    --nb-space-2:   0.5rem;
    --nb-space-2-5: 0.625rem;
    --nb-space-3:   0.75rem;
    --nb-space-3-5: 0.875rem;
    --nb-space-4:   1rem;
    --nb-space-5:   1.25rem;
    --nb-space-6:   1.5rem;
    --nb-space-7:   1.75rem;
    --nb-space-8:   2rem;
    --nb-space-9:   2.25rem;
    --nb-space-10:  2.5rem;
    --nb-space-12:  3rem;
    --nb-space-14:  3.5rem;
    --nb-space-16:  4rem;
    --nb-space-20:  5rem;
    --nb-space-24:  6rem;
    --nb-space-28:  7rem;
    --nb-space-32:  8rem;

    /* ---------- Radius (D-011 #15 : echelle deliberee, angles vifs assumes) ---------- */
    --nb-radius-none:  0;
    --nb-radius-2xs:   1px;
    --nb-radius-xs:    3px;
    --nb-radius-sm:    6px;
    --nb-radius-md:    10px;
    --nb-radius-lg:    14px;
    --nb-radius-xl:    20px;
    --nb-radius-2xl:   28px;
    --nb-radius-3xl:   40px;
    --nb-radius-pill:  9999px;

    /* ---------- Easings maison (D-011 #14 : jamais 'ease') ---------- */
    --nb-ease-out-expo:      cubic-bezier(0.19, 1.00, 0.22, 1.00);
    --nb-ease-out-quart:     cubic-bezier(0.25, 1.00, 0.50, 1.00);
    --nb-ease-out-circ:      cubic-bezier(0.08, 0.82, 0.17, 1.00);
    --nb-ease-in-quart:      cubic-bezier(0.50, 0.00, 0.75, 0.00);
    --nb-ease-in-out-quart:  cubic-bezier(0.76, 0.00, 0.24, 1.00);
    --nb-ease-in-out-expo:   cubic-bezier(0.87, 0.00, 0.13, 1.00);
    --nb-ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1.00);
    --nb-ease-spring-strong: cubic-bezier(0.20, 2.00, 0.30, 1.00);
    --nb-ease-standard:      cubic-bezier(0.40, 0.00, 0.20, 1.00);
    --nb-ease-emphasize:     cubic-bezier(0.30, 0.00, 0.10, 1.00);

    /* ---------- Durations ---------- */
    --nb-dur-instant: 60ms;
    --nb-dur-fast:    120ms;
    --nb-dur-normal:  200ms;
    --nb-dur-slow:    320ms;
    --nb-dur-slower:  500ms;
    --nb-dur-slowest: 800ms;

    /* ---------- Z-index scale ---------- */
    --nb-z-below:      -1;
    --nb-z-base:        1;
    --nb-z-raised:     10;
    --nb-z-dropdown:  100;
    --nb-z-sticky:    200;
    --nb-z-header:    300;
    --nb-z-header-top:350;
    --nb-z-overlay:   400;
    --nb-z-drawer:    500;
    --nb-z-dialog:    600;
    --nb-z-popover:   700;
    --nb-z-tooltip:   800;
    --nb-z-toast:     900;
    --nb-z-max:      1000;

    /* ---------- Layout sizes ---------- */
    --nb-header-top-h:    38px;
    --nb-header-middle-h: 86px;
    --nb-header-menu-h:   50px;
    --nb-header-total-h:  174px;
    --nb-mobile-nav-h:    64px;
    --nb-sidebar-w:       264px;
    --nb-container-max:   1600px;
    --nb-container-max-narrow: 960px;
    --nb-container-max-wide:   1760px;
    --nb-container-pad:   clamp(1rem, 3.5vw, 2.5rem);
    --nb-section-y:       clamp(1.5rem, 3.5vw, 1rem);

    /* ---------- Focus ring (a11y) ---------- */
    --nb-focus-ring: 0 0 0 3px color-mix(in oklch, var(--nb-color-accent) 45%, transparent);
    --nb-focus-ring-danger: 0 0 0 3px color-mix(in oklch, var(--nb-color-danger) 45%, transparent);

    /* ---------- Scrollbars ---------- */
    --nb-scrollbar-thumb: color-mix(in oklch, var(--nb-color-text) 25%, transparent);
    --nb-scrollbar-thumb-hover: color-mix(in oklch, var(--nb-color-text) 45%, transparent);
    --nb-scrollbar-track: transparent;
  }

  /* ---------- Mode sombre (opt-in via data-theme="dark") ---------- */
  [data-theme="dark"] {
    --nb-color-bg:            var(--nb-neutral-950);
    --nb-color-surface:       var(--nb-neutral-900);
    --nb-color-surface-alt:   var(--nb-neutral-800);
    --nb-color-surface-sunk:  color-mix(in oklch, var(--nb-neutral-950) 60%, black);
    --nb-color-surface-hover: color-mix(in oklch, var(--nb-color-surface-alt) 55%, var(--nb-color-surface-sunk));

    --nb-color-text:          var(--nb-neutral-50);
    --nb-color-text-strong:   var(--nb-neutral-0);
    --nb-color-text-muted:    var(--nb-neutral-300);
    --nb-color-text-faint:    var(--nb-neutral-400);
    --nb-color-text-disabled: var(--nb-neutral-500);
    --nb-color-text-inverse:  var(--nb-neutral-950);

    --nb-color-border:        var(--nb-neutral-700);
    --nb-color-border-alt:    var(--nb-neutral-800);
    --nb-color-border-strong: var(--nb-neutral-600);
    --nb-color-border-hover:  var(--nb-neutral-500);

    --nb-color-accent:        oklch(70% 0.195 42);

    --nb-shadow-xs:  0 1px 2px  oklch(0% 0 0 / 0.40);
    --nb-shadow-sm:  0 2px 4px  oklch(0% 0 0 / 0.45), 0 1px 2px oklch(0% 0 0 / 0.35);
    --nb-shadow-md:  0 4px 12px oklch(0% 0 0 / 0.50), 0 2px 4px oklch(0% 0 0 / 0.35);
    --nb-shadow-lg:  0 12px 24px oklch(0% 0 0 / 0.55), 0 4px 8px oklch(0% 0 0 / 0.40);
    --nb-shadow-xl:  0 24px 48px oklch(0% 0 0 / 0.65), 0 8px 16px oklch(0% 0 0 / 0.45);
  }
}


/* ============================================================================
 * 4. BASE - html/body/typography/links/forms/scrollbar
 * ============================================================================ */
@layer base {
  html {
    font-family: var(--nb-font-body);
    font-size: 16px;
    line-height: var(--nb-lh-normal);
    color: var(--nb-color-text);
    background: var(--nb-color-bg);
    color-scheme: light;
    accent-color: var(--nb-color-accent);
    text-underline-offset: 0.15em;
  }
  [data-theme="dark"] { color-scheme: dark; }

  body {
    font-size: var(--nb-fs-base);
    font-weight: var(--nb-fw-normal);
    text-rendering: optimizeLegibility;
    background: var(--nb-color-bg);
    color: var(--nb-color-text);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--nb-font-heading);
    font-weight: var(--nb-fw-bold);
    line-height: var(--nb-lh-tight);
    letter-spacing: var(--nb-ls-tight);
    color: var(--nb-color-text-strong);
    font-variation-settings: "wdth" 100;
  }
  h1 { font-size: var(--nb-fs-4xl); letter-spacing: var(--nb-ls-tighter); }
  h2 { font-size: var(--nb-fs-3xl); letter-spacing: var(--nb-ls-tighter); }
  h3 { font-size: var(--nb-fs-2xl); }
  h4 { font-size: var(--nb-fs-xl); }
  h5 { font-size: var(--nb-fs-lg); }
  h6 { font-size: var(--nb-fs-md); font-weight: var(--nb-fw-semibold); letter-spacing: var(--nb-ls-normal); }

  p { color: var(--nb-color-text); }
  strong, b { font-weight: var(--nb-fw-semibold); color: var(--nb-color-text-strong); }
  small { font-size: var(--nb-fs-sm); color: var(--nb-color-text-muted); }
  code, kbd, samp {
    font-family: var(--nb-font-mono);
    font-size: 0.9em;
    padding: 0.15em 0.35em;
    background: var(--nb-color-surface-alt);
    border-radius: var(--nb-radius-xs);
  }
  kbd {
    border: 1px solid var(--nb-color-border);
    box-shadow: 0 1px 0 var(--nb-color-border-strong);
  }

  a {
    color: var(--nb-color-accent);
    text-decoration: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  a:hover { color: var(--nb-color-accent-hover); }
  a:focus-visible {
    outline: 2px solid var(--nb-color-accent);
    outline-offset: 3px;
    border-radius: var(--nb-radius-xs);
  }

  hr {
    border: 0;
    height: 1px;
    background: var(--nb-color-border);
    margin-block: var(--nb-space-4);
  }

  input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    box-shadow: var(--nb-focus-ring);
  }
  button:focus-visible {
    outline: none;
    box-shadow: var(--nb-focus-ring);
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track { background: var(--nb-scrollbar-track); }
  ::-webkit-scrollbar-thumb {
    background: var(--nb-scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid var(--nb-color-bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--nb-scrollbar-thumb-hover); }
  ::-webkit-scrollbar-corner { background: transparent; }
  * { scrollbar-width: thin; scrollbar-color: var(--nb-scrollbar-thumb) transparent; }
}


/* ============================================================================
 * 5. LAYOUT - Structure globale, container, main, sections, skip-link, overlay
 * ============================================================================ */
@layer layout {
  .nb-app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .nb-page-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .nb-page-body {
    flex: 1 0 auto;
    display: flex;
    gap: var(--nb-space-6);
    padding-inline: var(--nb-container-pad);
    max-width: var(--nb-container-max);
    margin-inline: auto;
    width: 100%;
  }

  .nb-main {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: var(--nb-space-4);
  }
  .nb-main--vendor,
  .nb-main--admin {
    max-width: var(--nb-container-max);
    margin-inline: auto;
    padding-inline: var(--nb-container-pad);
    padding-block: var(--nb-space-6);
    width: 100%;
  }

  .nb-container {
    width: 100%;
    max-width: var(--nb-container-max);
    margin-inline: auto;
    padding-inline: var(--nb-container-pad);
  }
  .nb-container--narrow { max-width: var(--nb-container-max-narrow); }
  .nb-container--wide   { max-width: var(--nb-container-max-wide); }
  .nb-container--fluid  { max-width: none; }

  .nb-section {
    padding-block: var(--nb-section-y);
  }

  /* Skip link (a11y WCAG 2.1) */
  .nb-skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: var(--nb-z-max);
    padding: var(--nb-space-3) var(--nb-space-4);
    background: var(--nb-color-text);
    color: var(--nb-color-text-inverse);
    border-radius: var(--nb-radius-md);
    font-weight: var(--nb-fw-semibold);
    font-size: var(--nb-fs-sm);
    box-shadow: var(--nb-shadow-lg);
    transition: top var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-skip-link:focus-visible { top: 12px; color: var(--nb-color-text-inverse); }

  /* Overlay pour drawers/sidebar mobile */
  .nb-overlay {
    position: fixed;
    inset: 0;
    background: oklch(15% 0.010 60 / 0.55);
    backdrop-filter: blur(4px);
    z-index: var(--nb-z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nb-dur-normal) var(--nb-ease-standard);
  }
  .nb-overlay.is-open,
  .nb-overlay:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  /* Responsive layout global */
  @media (max-width: 1024px) {
    .nb-page-body { padding-inline: var(--nb-space-3); }
    .nb-main { padding-block: var(--nb-space-4); }
  }
  @media (max-width: 768px) {
    body { padding-bottom: var(--nb-mobile-nav-h); }
    .nb-page-body { padding-inline: var(--nb-space-2); gap: var(--nb-space-3); }
    .nb-main { padding-block: var(--nb-space-2); }
  }
  @media (max-width: 480px) {
    .nb-page-body { padding-inline: var(--nb-space-1); }
    .nb-main { padding-block: var(--nb-space-1); }
  }
}


/* ============================================================================
 * 6. PRIMITIVES BUTTONS - nb-btn (8 variantes x 4 sizes + states + icon)
 * ============================================================================ */
@layer components {

  .nb-btn {
    /* Base */
    --_nb-btn-bg: var(--nb-color-surface-alt);
    --_nb-btn-color: var(--nb-color-text);
    --_nb-btn-border: transparent;
    --_nb-btn-bg-hover: var(--nb-color-surface-hover);
    --_nb-btn-color-hover: var(--nb-color-text-strong);
    --_nb-btn-shadow: none;
    --_nb-btn-shadow-hover: var(--nb-shadow-sm);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-3) var(--nb-space-5);
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    line-height: 1;
    letter-spacing: var(--nb-ls-normal);
    color: var(--_nb-btn-color);
    background: var(--_nb-btn-bg);
    border: 1px solid var(--_nb-btn-border);
    border-radius: var(--nb-radius-md);
    box-shadow: var(--_nb-btn-shadow);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    isolation: isolate;
    transition:
      background var(--nb-dur-fast) var(--nb-ease-standard),
      border-color var(--nb-dur-fast) var(--nb-ease-standard),
      color var(--nb-dur-fast) var(--nb-ease-standard),
      box-shadow var(--nb-dur-fast) var(--nb-ease-standard),
      transform var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-btn:not(:disabled):hover {
    background: var(--_nb-btn-bg-hover);
    color: var(--_nb-btn-color-hover);
    box-shadow: var(--_nb-btn-shadow-hover);
    transform: translateY(-1px);
  }
  .nb-btn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: var(--_nb-btn-shadow);
  }
  .nb-btn:disabled,
  .nb-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }
  .nb-btn[aria-busy="true"] {
    cursor: wait;
    color: transparent !important;
  }
  .nb-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--_nb-btn-color);
    animation: nb-spin var(--nb-dur-slower) linear infinite;
  }

  /* Sizes */
  .nb-btn--2xs { padding: var(--nb-space-1) var(--nb-space-2);   font-size: var(--nb-fs-2xs); border-radius: var(--nb-radius-sm); gap: 4px; }
  .nb-btn--xs  { padding: var(--nb-space-1-5) var(--nb-space-3); font-size: var(--nb-fs-xs); border-radius: var(--nb-radius-sm); }
  .nb-btn--sm  { padding: var(--nb-space-2) var(--nb-space-4);   font-size: var(--nb-fs-xs); }
  /* .nb-btn--md : taille par defaut, herite du selecteur .nb-btn */
  .nb-btn--lg  { padding: var(--nb-space-4) var(--nb-space-6);   font-size: var(--nb-fs-md); border-radius: var(--nb-radius-lg); }
  .nb-btn--xl  { padding: var(--nb-space-5) var(--nb-space-8);   font-size: var(--nb-fs-lg); border-radius: var(--nb-radius-lg); }

  /* Variants - Primary (accent solide) */
  .nb-btn--primary {
    --_nb-btn-bg: var(--nb-color-accent);
    --_nb-btn-color: var(--nb-color-accent-contrast);
    --_nb-btn-bg-hover: var(--nb-color-accent-hover);
    --_nb-btn-color-hover: var(--nb-color-accent-contrast);
    --_nb-btn-shadow: var(--nb-shadow-sm);
    --_nb-btn-shadow-hover: var(--nb-shadow-accent);
  }

  /* Variants - Secondary (contrast fort) */
  .nb-btn--secondary {
    --_nb-btn-bg: var(--nb-color-text);
    --_nb-btn-color: var(--nb-color-text-inverse);
    --_nb-btn-bg-hover: color-mix(in oklch, var(--nb-color-text) 85%, black);
    --_nb-btn-color-hover: var(--nb-color-text-inverse);
    --_nb-btn-shadow: var(--nb-shadow-sm);
  }

  /* Variants - Ghost (transparent + border) */
  .nb-btn--ghost {
    --_nb-btn-bg: transparent;
    --_nb-btn-border: var(--nb-color-border-strong);
    --_nb-btn-color: var(--nb-color-text);
    --_nb-btn-bg-hover: var(--nb-color-surface-alt);
    --_nb-btn-color-hover: var(--nb-color-text-strong);
    --_nb-btn-shadow: none;
    --_nb-btn-shadow-hover: none;
  }

  /* Variants - Soft (accent tint) */
  .nb-btn--soft {
    --_nb-btn-bg: var(--nb-color-accent-soft);
    --_nb-btn-color: var(--nb-color-accent-hover);
    --_nb-btn-bg-hover: var(--nb-color-accent-soft-hover);
    --_nb-btn-color-hover: var(--nb-color-accent-hover);
  }

  /* Variants - Link (transparent, souligne au hover) */
  .nb-btn--link {
    --_nb-btn-bg: transparent;
    --_nb-btn-color: var(--nb-color-accent);
    --_nb-btn-bg-hover: transparent;
    --_nb-btn-color-hover: var(--nb-color-accent-hover);
    padding-inline: 0;
    box-shadow: none;
  }
  .nb-btn--link:not(:disabled):hover { text-decoration: underline; transform: none; }

  /* Variants - Semantic */
  .nb-btn--danger {
    --_nb-btn-bg: var(--nb-color-danger);
    --_nb-btn-color: white;
    --_nb-btn-bg-hover: var(--nb-color-danger-hover);
    --_nb-btn-color-hover: white;
  }
  .nb-btn--danger:focus-visible { box-shadow: var(--nb-focus-ring-danger); }

  .nb-btn--success {
    --_nb-btn-bg: var(--nb-color-success);
    --_nb-btn-color: white;
    --_nb-btn-bg-hover: var(--nb-color-success-hover);
    --_nb-btn-color-hover: white;
  }

  .nb-btn--warning {
    --_nb-btn-bg: var(--nb-color-warning);
    --_nb-btn-color: var(--nb-color-text-strong);
    --_nb-btn-bg-hover: var(--nb-color-warning-hover);
    --_nb-btn-color-hover: var(--nb-color-text-strong);
  }

  /* Modifiers */
  .nb-btn--pill  { border-radius: var(--nb-radius-pill); }
  .nb-btn--block { width: 100%; }
  .nb-btn--icon {
    padding-inline: var(--nb-space-3);
    aspect-ratio: 1;
  }
  .nb-btn--icon.nb-btn--sm  { padding-inline: var(--nb-space-2); }
  .nb-btn--icon.nb-btn--xs  { padding-inline: 6px; }
  .nb-btn--icon.nb-btn--lg  { padding-inline: var(--nb-space-4); }
  .nb-btn--circle {
    padding: 0;
    border-radius: 50%;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nb-btn--circle.nb-btn--xs  { width: 28px; height: 28px; font-size: 0.85rem; }
  .nb-btn--circle.nb-btn--sm  { width: 34px; height: 34px; font-size: 1rem; }
  .nb-btn--circle.nb-btn--lg  { width: 44px; height: 44px; font-size: 1.2rem; }

  /* Variants - WhatsApp */
  .nb-btn--whatsapp {
    --_nb-btn-bg: transparent;
    --_nb-btn-border: var(--nb-color-border);
    --_nb-btn-color: var(--nb-color-text-muted);
    --_nb-btn-bg-hover: oklch(85% 0.12 145);
    --_nb-btn-color-hover: oklch(45% 0.18 145);
    --_nb-btn-shadow: none;
    --_nb-btn-shadow-hover: none;
  }
  .nb-btn--whatsapp:hover { border-color: oklch(65% 0.16 145); }

  /* Variants - Share */
  .nb-btn--share {
    --_nb-btn-bg: transparent;
    --_nb-btn-border: var(--nb-color-border);
    --_nb-btn-color: var(--nb-color-text-muted);
    --_nb-btn-bg-hover: var(--nb-color-info-soft);
    --_nb-btn-color-hover: var(--nb-color-info);
    --_nb-btn-shadow: none;
    --_nb-btn-shadow-hover: none;
  }
  .nb-btn--share:hover { border-color: var(--nb-color-info); }

  .nb-btn--upper {
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    font-size: var(--nb-fs-xs);
  }

  .nb-btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }
  .nb-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    background: color-mix(in oklch, currentColor 25%, transparent);
    border-radius: var(--nb-radius-pill);
    font-size: 0.72em;
    font-variant-numeric: tabular-nums;
  }

  /* Button group (segmented) */
  .nb-btn-group {
    display: inline-flex;
    isolation: isolate;
  }
  .nb-btn-group > .nb-btn {
    border-radius: 0;
    margin-inline-start: -1px;
  }
  .nb-btn-group > .nb-btn:first-child {
    border-start-start-radius: var(--nb-radius-md);
    border-end-start-radius: var(--nb-radius-md);
    margin-inline-start: 0;
  }
  .nb-btn-group > .nb-btn:last-child {
    border-start-end-radius: var(--nb-radius-md);
    border-end-end-radius: var(--nb-radius-md);
  }
  .nb-btn-group > .nb-btn:focus-visible { z-index: 1; }
}


/* ============================================================================
 * 7. PRIMITIVES BADGES - nb-badge (solid/soft/outline x 8 colors + sizes)
 * ============================================================================ */
@layer components {

  .nb-badge {
    --_nb-badge-bg: var(--nb-color-surface-alt);
    --_nb-badge-color: var(--nb-color-text-muted);
    --_nb-badge-border: transparent;

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--nb-space-2);
    background: var(--_nb-badge-bg);
    color: var(--_nb-badge-color);
    border: 1px solid var(--_nb-badge-border);
    border-radius: var(--nb-radius-sm);
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    line-height: 1.4;
    letter-spacing: var(--nb-ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Variants solid */
  .nb-badge--accent  { --_nb-badge-bg: var(--nb-color-accent);  --_nb-badge-color: var(--nb-color-accent-contrast); }
  .nb-badge--success { --_nb-badge-bg: var(--nb-color-success); --_nb-badge-color: white; }
  .nb-badge--warning { --_nb-badge-bg: var(--nb-color-warning); --_nb-badge-color: var(--nb-color-text-strong); }
  .nb-badge--danger  { --_nb-badge-bg: var(--nb-color-danger);  --_nb-badge-color: white; }
  .nb-badge--info    { --_nb-badge-bg: var(--nb-color-info);    --_nb-badge-color: white; }
  .nb-badge--dark    { --_nb-badge-bg: var(--nb-color-text);    --_nb-badge-color: var(--nb-color-text-inverse); }
  .nb-badge--live    { --_nb-badge-bg: var(--nb-color-live);    --_nb-badge-color: white; box-shadow: 0 0 12px var(--nb-color-live-glow); }

  /* Variants soft */
  .nb-badge--soft-accent  { --_nb-badge-bg: var(--nb-color-accent-soft);  --_nb-badge-color: var(--nb-color-accent-hover); }
  .nb-badge--soft-success { --_nb-badge-bg: var(--nb-color-success-soft); --_nb-badge-color: var(--nb-color-success-hover); }
  .nb-badge--soft-warning { --_nb-badge-bg: var(--nb-color-warning-soft); --_nb-badge-color: var(--nb-color-warning-hover); }
  .nb-badge--soft-danger  { --_nb-badge-bg: var(--nb-color-danger-soft);  --_nb-badge-color: var(--nb-color-danger-hover); }
  .nb-badge--soft-info    { --_nb-badge-bg: var(--nb-color-info-soft);    --_nb-badge-color: var(--nb-color-info-hover); }

  /* Variants outline */
  .nb-badge--outline {
    --_nb-badge-bg: transparent;
    --_nb-badge-border: var(--nb-color-border-strong);
  }

  /* Sizes */
  .nb-badge--xs { font-size: 0.6rem; padding: 1px 5px; }
  .nb-badge--lg { padding: 4px var(--nb-space-3); font-size: var(--nb-fs-xs); }

  /* Shapes */
  .nb-badge--pill  { border-radius: var(--nb-radius-pill); }
  .nb-badge--dot::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
  }
  .nb-badge--count {
    min-width: 1.2rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }
}


/* ============================================================================
 * 8. PRIMITIVES CHIPS + TAGS - Selection, filtre, close
 * ============================================================================ */
@layer components {

  .nb-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: 4px var(--nb-space-3);
    background: var(--nb-color-surface-alt);
    color: var(--nb-color-text);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-pill);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-medium);
    line-height: 1.4;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard),
                border-color var(--nb-dur-fast) var(--nb-ease-standard);
    cursor: default;
  }
  .nb-chip--interactive { cursor: pointer; }
  .nb-chip--interactive:hover {
    background: var(--nb-color-surface-hover);
    border-color: var(--nb-color-border-strong);
  }
  .nb-chip.is-active,
  .nb-chip[aria-pressed="true"] {
    background: var(--nb-color-accent-soft);
    border-color: var(--nb-color-accent);
    color: var(--nb-color-accent-hover);
  }
  .nb-chip__close {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    color: currentColor;
    opacity: 0.55;
    border-radius: 50%;
    margin-inline-end: -4px;
    transition: opacity var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-chip__close:hover { opacity: 1; background: color-mix(in oklch, currentColor 15%, transparent); }
  .nb-chip__count {
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    background: color-mix(in oklch, currentColor 20%, transparent);
    border-radius: var(--nb-radius-pill);
    font-size: 0.7em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nb-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--nb-space-2);
    background: var(--nb-color-surface-sunk);
    color: var(--nb-color-text-muted);
    border-radius: var(--nb-radius-xs);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-medium);
    letter-spacing: var(--nb-ls-wide);
  }
  .nb-tag--terroir { background: var(--nb-color-success-soft); color: var(--nb-color-success-hover); }
  .nb-tag--flash   { background: var(--nb-color-warning-soft); color: var(--nb-color-warning-hover); }
  .nb-tag--pro     { background: var(--nb-color-info-soft);    color: var(--nb-color-info-hover); }
}


/* ============================================================================
 * 9. PRIMITIVES FORMS - input/textarea/select/checkbox/radio/switch/file
 * ============================================================================ */
@layer components {

  .nb-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-4);
  }
  .nb-form-group--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--nb-space-3);
  }

  .nb-label {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text);
    line-height: 1.3;
  }
  .nb-label--required::after {
    content: "*";
    color: var(--nb-color-danger);
    font-weight: var(--nb-fw-bold);
    margin-inline-start: 2px;
  }
  .nb-form-hint {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    line-height: 1.4;
  }
  .nb-form-error {
    display: flex;
    align-items: center;
    gap: var(--nb-space-1);
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-danger);
    font-weight: var(--nb-fw-medium);
  }

  .nb-input,
  .nb-textarea,
  .nb-select {
    display: block;
    width: 100%;
    padding: var(--nb-space-3) var(--nb-space-4);
    background: var(--nb-color-surface);
    color: var(--nb-color-text);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-sm);
    line-height: 1.4;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                box-shadow var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-input::placeholder,
  .nb-textarea::placeholder { color: var(--nb-color-text-faint); }

  .nb-input:hover,
  .nb-textarea:hover,
  .nb-select:hover { border-color: var(--nb-color-border-hover); }

  .nb-input:focus-visible,
  .nb-textarea:focus-visible,
  .nb-select:focus-visible {
    outline: none;
    border-color: var(--nb-color-accent);
    box-shadow: var(--nb-focus-ring);
  }

  .nb-input:disabled,
  .nb-textarea:disabled,
  .nb-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--nb-color-surface-sunk);
  }
  .nb-input[aria-invalid="true"],
  .nb-textarea[aria-invalid="true"],
  .nb-select[aria-invalid="true"] {
    border-color: var(--nb-color-danger);
  }
  .nb-input[aria-invalid="true"]:focus-visible {
    box-shadow: var(--nb-focus-ring-danger);
  }

  .nb-input--sm,
  .nb-textarea--sm,
  .nb-select--sm { padding: var(--nb-space-2) var(--nb-space-3); font-size: var(--nb-fs-xs); border-radius: var(--nb-radius-sm); }
  .nb-input--lg,
  .nb-textarea--lg,
  .nb-select--lg { padding: var(--nb-space-4) var(--nb-space-5); font-size: var(--nb-fs-md); border-radius: var(--nb-radius-lg); }

  .nb-textarea { resize: vertical; min-height: 100px; line-height: var(--nb-lh-normal); }

  .nb-select {
    appearance: none;
    padding-inline-end: var(--nb-space-8);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--nb-space-3) center;
    background-size: 16px;
  }

  .nb-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    isolation: isolate;
  }
  .nb-input-group > .nb-input {
    border-radius: 0;
    margin-inline-start: -1px;
  }
  .nb-input-group > .nb-input:first-child {
    border-start-start-radius: var(--nb-radius-md);
    border-end-start-radius: var(--nb-radius-md);
    margin-inline-start: 0;
  }
  .nb-input-group > .nb-input:last-child {
    border-start-end-radius: var(--nb-radius-md);
    border-end-end-radius: var(--nb-radius-md);
  }
  .nb-input-group__addon {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--nb-space-3);
    background: var(--nb-color-surface-alt);
    color: var(--nb-color-text-muted);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    font-size: var(--nb-fs-sm);
  }
  .nb-input-group__icon {
    position: absolute;
    top: 50%;
    inset-inline-start: var(--nb-space-3);
    transform: translateY(-50%);
    color: var(--nb-color-text-faint);
    pointer-events: none;
    z-index: 1;
  }
  .nb-input-group__icon ~ .nb-input {
    padding-inline-start: var(--nb-space-9);
  }

  .nb-input-search {
    padding-inline-start: var(--nb-space-9);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
    background-repeat: no-repeat;
    background-position: left var(--nb-space-3) center;
    background-size: 16px;
  }

  /* Checkbox */
  .nb-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text);
    line-height: 1.4;
  }
  .nb-checkbox input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--nb-color-surface);
    border: 1.5px solid var(--nb-color-border-strong);
    border-radius: var(--nb-radius-xs);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard),
                border-color var(--nb-dur-fast) var(--nb-ease-standard);
    flex-shrink: 0;
  }
  .nb-checkbox input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transform-origin: center;
    transition: transform var(--nb-dur-fast) var(--nb-ease-spring);
    background-color: var(--nb-color-accent-contrast);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }
  .nb-checkbox input[type="checkbox"]:checked {
    background: var(--nb-color-accent);
    border-color: var(--nb-color-accent);
  }
  .nb-checkbox input[type="checkbox"]:checked::before { transform: scale(1); }
  .nb-checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--nb-focus-ring);
  }
  .nb-checkbox input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Radio */
  .nb-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text);
  }
  .nb-radio input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--nb-color-surface);
    border: 1.5px solid var(--nb-color-border-strong);
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard);
    flex-shrink: 0;
  }
  .nb-radio input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--nb-color-accent);
    border-radius: 50%;
    transform: scale(0);
    transition: transform var(--nb-dur-fast) var(--nb-ease-spring);
  }
  .nb-radio input[type="radio"]:checked { border-color: var(--nb-color-accent); }
  .nb-radio input[type="radio"]:checked::before { transform: scale(1); }
  .nb-radio input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--nb-focus-ring);
  }

  /* Switch */
  .nb-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-3);
    cursor: pointer;
    user-select: none;
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text);
  }
  .nb-switch__track {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--nb-color-border-strong);
    border-radius: var(--nb-radius-pill);
    transition: background var(--nb-dur-normal) var(--nb-ease-standard);
    flex-shrink: 0;
  }
  .nb-switch__track::before {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: var(--nb-shadow-sm);
    transition: transform var(--nb-dur-normal) var(--nb-ease-spring);
  }
  .nb-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .nb-switch input[type="checkbox"]:checked + .nb-switch__track { background: var(--nb-color-accent); }
  .nb-switch input[type="checkbox"]:checked + .nb-switch__track::before { transform: translateX(18px); }
  .nb-switch input[type="checkbox"]:focus-visible + .nb-switch__track {
    box-shadow: var(--nb-focus-ring);
  }
}


/* ============================================================================
 * 10. PRIMITIVES CARDS - nb-card (base/elevated/outlined/interactive)
 * ============================================================================ */
@layer components {

  .nb-card {
    display: flex;
    flex-direction: column;
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-lg);
    overflow: hidden;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                box-shadow var(--nb-dur-normal) var(--nb-ease-standard),
                transform var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  .nb-card--elevated {
    border-color: transparent;
    box-shadow: var(--nb-shadow-md);
  }
  .nb-card--outlined { background: transparent; }
  .nb-card--sunk { background: var(--nb-color-surface-sunk); border-color: transparent; }
  .nb-card--interactive {
    cursor: pointer;
  }
  .nb-card--interactive:hover {
    border-color: var(--nb-color-accent);
    box-shadow: var(--nb-shadow-lg);
    transform: translateY(-3px);
  }
  .nb-card--interactive:active { transform: translateY(0); }
  .nb-card--flat { border-radius: 0; border-width: 0 0 1px; }

  .nb-card__media {
    position: relative;
    aspect-ratio: 1;
    background: var(--nb-color-surface-sunk);
    overflow: hidden;
  }
  .nb-card__media > img,
  .nb-card__media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  .nb-card--interactive:hover .nb-card__media > img { transform: scale(1.05); }

  .nb-card__body {
    padding: var(--nb-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    flex: 1;
  }
  .nb-card__body--compact { padding: var(--nb-space-3); }
  .nb-card__body--spacious { padding: var(--nb-space-6); }

  .nb-card__header {
    padding: var(--nb-space-4);
    border-bottom: 1px solid var(--nb-color-border-alt);
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
  }
  .nb-card__footer {
    padding: var(--nb-space-3) var(--nb-space-4);
    border-top: 1px solid var(--nb-color-border-alt);
    background: var(--nb-color-surface-alt);
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
  }
  .nb-card__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-md);
    font-weight: var(--nb-fw-bold);
    line-height: var(--nb-lh-snug);
    color: var(--nb-color-text-strong);
    margin: 0;
  }
  .nb-card__subtitle {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
  }
}


/* ============================================================================
 * 11. PRIMITIVES AVATARS - nb-avatar (sizes + shapes + status + initials)
 * ============================================================================ */
@layer components {

  .nb-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--nb-color-surface-alt);
    color: var(--nb-color-text-muted);
    border-radius: 50%;
    overflow: hidden;
    font-family: var(--nb-font-heading);
    font-weight: var(--nb-fw-bold);
    font-size: var(--nb-fs-sm);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: var(--nb-ls-tight);
    flex-shrink: 0;
    isolation: isolate;
  }
  .nb-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .nb-avatar--rounded { border-radius: var(--nb-radius-md); }
  .nb-avatar--square  { border-radius: var(--nb-radius-xs); }

  /* Sizes */
  .nb-avatar--2xs { width: 20px; height: 20px; font-size: 0.6rem; }
  .nb-avatar--xs  { width: 28px; height: 28px; font-size: 0.7rem; }
  .nb-avatar--sm  { width: 34px; height: 34px; font-size: 0.75rem; }
  /* .nb-avatar--md : taille par defaut 40x40, herite du selecteur .nb-avatar */
  .nb-avatar--lg  { width: 56px; height: 56px; font-size: var(--nb-fs-md); }
  .nb-avatar--xl  { width: 72px; height: 72px; font-size: var(--nb-fs-lg); }
  .nb-avatar--2xl { width: 96px; height: 96px; font-size: var(--nb-fs-xl); }
  .nb-avatar--3xl { width: 128px; height: 128px; font-size: var(--nb-fs-2xl); }

  /* Status dot (D-023 : online/away/offline) */
  .nb-avatar__status {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30%;
    height: 30%;
    min-width: 8px;
    min-height: 8px;
    max-width: 14px;
    max-height: 14px;
    background: var(--nb-color-text-faint);
    border: 2px solid var(--nb-color-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 0 transparent;
  }
  .nb-avatar__status--online  { background: var(--nb-color-success); }
  .nb-avatar__status--away    { background: var(--nb-color-warning); }
  .nb-avatar__status--busy    { background: var(--nb-color-danger); }
  .nb-avatar__status--offline { background: var(--nb-color-text-faint); }
  .nb-avatar__status--live    {
    background: var(--nb-color-live);
    animation: nb-live-pulse-ring 1.6s var(--nb-ease-out-expo) infinite;
  }

  /* Avatar stack (superposition partielle) */
  .nb-avatar-stack {
    display: inline-flex;
    align-items: center;
  }
  .nb-avatar-stack > .nb-avatar {
    border: 2px solid var(--nb-color-surface);
    margin-inline-start: -10px;
  }
  .nb-avatar-stack > .nb-avatar:first-child { margin-inline-start: 0; }
  .nb-avatar-stack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-inline: var(--nb-space-2);
    margin-inline-start: var(--nb-space-2);
    background: var(--nb-color-surface-alt);
    border-radius: var(--nb-radius-pill);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-muted);
  }
}


/* ============================================================================
 * 12. PRIMITIVES RATING + PRIX
 * ============================================================================ */
@layer components {

  .nb-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    line-height: 1;
  }
  .nb-rating__stars {
    color: var(--nb-color-star);
    font-size: var(--nb-fs-sm);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
  }
  .nb-rating__stars--interactive {
    cursor: pointer;
  }
  .nb-rating__stars--interactive > span { transition: transform var(--nb-dur-fast) var(--nb-ease-spring); }
  .nb-rating__stars--interactive > span:hover { transform: scale(1.15); }
  .nb-rating__value {
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
    font-variant-numeric: tabular-nums;
  }
  .nb-rating__count {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Prix GNF entier (D-006) */
  .nb-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--nb-space-1);
    font-family: var(--nb-font-heading);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--nb-ls-tight);
    line-height: 1;
  }
  .nb-price__amount { font-size: var(--nb-fs-md); }
  .nb-price__currency {
    font-size: 0.7em;
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-muted);
    letter-spacing: var(--nb-ls-normal);
  }
  .nb-price--lg .nb-price__amount { font-size: var(--nb-fs-xl); }
  .nb-price--xl .nb-price__amount { font-size: var(--nb-fs-2xl); }
  .nb-price--2xl .nb-price__amount { font-size: var(--nb-fs-3xl); }
  .nb-price--sm .nb-price__amount { font-size: var(--nb-fs-sm); }
  .nb-price--neutral { color: var(--nb-color-text-strong); }

  .nb-price-old {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-faint);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-variant-numeric: tabular-nums;
  }
  .nb-price-discount {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: var(--nb-color-danger);
    color: white;
    font-size: 0.7rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-xs);
    line-height: 1.3;
    letter-spacing: var(--nb-ls-wide);
    font-variant-numeric: tabular-nums;
  }

  .nb-prices {
    display: inline-flex;
    align-items: baseline;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
  }
}


/* ============================================================================
 * 13. PRIMITIVES PROGRESS + SKELETON + SPINNER
 * ============================================================================ */
@layer components {

  .nb-progress {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-pill);
    overflow: hidden;
  }
  .nb-progress__bar {
    position: absolute;
    inset: 0;
    background: var(--nb-color-accent);
    border-radius: var(--nb-radius-pill);
    transform-origin: left;
    transition: transform var(--nb-dur-slow) var(--nb-ease-out-quart);
  }
  .nb-progress--sm { height: 4px; }
  .nb-progress--lg { height: 10px; }
  .nb-progress--danger  .nb-progress__bar { background: var(--nb-color-danger); }
  .nb-progress--warning .nb-progress__bar { background: linear-gradient(90deg, var(--nb-color-danger), var(--nb-color-warning)); }
  .nb-progress--success .nb-progress__bar { background: var(--nb-color-success); }
  .nb-progress--live    .nb-progress__bar { background: var(--nb-color-live); }
  .nb-progress--stripes .nb-progress__bar {
    background-image: linear-gradient(45deg,
      rgba(255,255,255,0.15) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,0.15) 50%,
      rgba(255,255,255,0.15) 75%, transparent 75%);
    background-size: 12px 12px;
    animation: nb-progress-stripes 1s linear infinite;
  }
  @keyframes nb-progress-stripes {
    to { background-position: 12px 0; }
  }

  /* Progress circulaire */
  .nb-progress-circular {
    position: relative;
    width: 44px;
    height: 44px;
  }
  .nb-progress-circular svg { transform: rotate(-90deg); width: 100%; height: 100%; }
  .nb-progress-circular circle { fill: none; stroke-width: 4; }
  .nb-progress-circular__track { stroke: var(--nb-color-border); }
  .nb-progress-circular__bar {
    stroke: var(--nb-color-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--nb-dur-slow) var(--nb-ease-out-quart);
  }

  /* Skeleton (loading placeholder) */
  .nb-skeleton {
    display: inline-block;
    background: linear-gradient(90deg,
      var(--nb-color-surface-sunk) 0%,
      color-mix(in oklch, var(--nb-color-surface-sunk) 60%, var(--nb-color-surface)) 50%,
      var(--nb-color-surface-sunk) 100%);
    background-size: 200% 100%;
    border-radius: var(--nb-radius-sm);
    animation: nb-shimmer 1.6s linear infinite;
  }
  .nb-skeleton--text { height: 1em; margin-block: 0.35em; }
  .nb-skeleton--title { height: 1.5em; margin-block: 0.5em; width: 60%; }
  .nb-skeleton--circle { border-radius: 50%; }
  .nb-skeleton--rect { border-radius: var(--nb-radius-md); }
  .nb-skeleton--card { height: 200px; border-radius: var(--nb-radius-lg); }
  @keyframes nb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Spinner */
  .nb-spinner {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: nb-spin var(--nb-dur-slower) linear infinite;
  }
  .nb-spinner--sm { width: 0.85em; height: 0.85em; border-width: 1.5px; }
  .nb-spinner--lg { width: 1.75em; height: 1.75em; border-width: 3px; }
  .nb-spinner--xl { width: 2.5em; height: 2.5em; border-width: 4px; }
  @keyframes nb-spin { to { transform: rotate(360deg); } }
}


/* ============================================================================
 * 14. PRIMITIVES TOOLTIP + POPOVER (via [data-tooltip] + <div popover>)
 * ============================================================================ */
@layer components {

  [data-tooltip] {
    position: relative;
    cursor: help;
  }
  [data-tooltip]::before,
  [data-tooltip]::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-out-quart);
    z-index: var(--nb-z-tooltip);
  }
  [data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
    padding: var(--nb-space-2) var(--nb-space-3);
    background: var(--nb-color-text);
    color: var(--nb-color-text-inverse);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-medium);
    border-radius: var(--nb-radius-sm);
    white-space: nowrap;
    max-width: 240px;
    box-shadow: var(--nb-shadow-md);
  }
  [data-tooltip]::after {
    content: "";
    bottom: calc(100% + 2px);
    transform: translate(-50%, 4px);
    border: 6px solid transparent;
    border-top-color: var(--nb-color-text);
  }
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::before,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  [data-tooltip-position="bottom"]::before {
    bottom: auto;
    top: calc(100% + 8px);
  }
  [data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: var(--nb-color-text);
  }

  /* Popover (utilise l'API native <div popover>) */
  [popover] {
    position: absolute;
    padding: var(--nb-space-4);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    box-shadow: var(--nb-shadow-xl);
    max-width: 320px;
    inset: unset;
    margin: 0;
  }
  [popover]:popover-open {
    animation: nb-popover-in var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  [popover]::backdrop { background: transparent; }
  @keyframes nb-popover-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ============================================================================
 * 15. PRIMITIVES TABS + ACCORDION
 * ============================================================================ */
@layer components {

  .nb-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--nb-space-1);
    border-bottom: 1px solid var(--nb-color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nb-tabs::-webkit-scrollbar { display: none; }
  .nb-tab {
    position: relative;
    padding: var(--nb-space-3) 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: 0;
    cursor: pointer;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
    white-space: nowrap;
  }
  .nb-tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--nb-color-accent);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  .nb-tab:hover { color: var(--nb-color-text); }
  .nb-tab[aria-selected="true"],
  .nb-tab.is-active {
    color: var(--nb-color-accent);
  }
  .nb-tab[aria-selected="true"]::after,
  .nb-tab.is-active::after { transform: scaleX(1); }
  .nb-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    margin-inline-start: 6px;
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-pill);
    font-size: 0.7em;
    font-variant-numeric: tabular-nums;
  }

  /* Tabs pills variant */
  .nb-tabs--pills {
    border-bottom: none;
    gap: var(--nb-space-2);
  }
  .nb-tabs--pills .nb-tab {
    padding: var(--nb-space-2) var(--nb-space-4);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-color-surface-alt);
  }
  .nb-tabs--pills .nb-tab::after { display: none; }
  .nb-tabs--pills .nb-tab[aria-selected="true"] {
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
  }

  /* Accordion (utilise <details>) */
  .nb-accordion { border-block: 1px solid var(--nb-color-border); }
  .nb-accordion__item {
    border-bottom: 1px solid var(--nb-color-border);
  }
  .nb-accordion__item:last-child { border-bottom: none; }
  .nb-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4) var(--nb-space-2);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text);
    cursor: pointer;
    list-style: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-accordion__header:hover { color: var(--nb-color-accent); }
  .nb-accordion__header::-webkit-details-marker { display: none; }
  .nb-accordion__header::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / contain;
    transition: transform var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  .nb-accordion__item[open] .nb-accordion__header::after { transform: rotate(180deg); }
  .nb-accordion__body {
    padding: 0 var(--nb-space-2) var(--nb-space-4);
    color: var(--nb-color-text-muted);
    line-height: var(--nb-lh-relaxed);
    font-size: var(--nb-fs-sm);
  }
}


/* ============================================================================
 * 16. PRIMITIVES BREADCRUMB + PAGINATION
 * ============================================================================ */
@layer components {

  .nb-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--nb-space-1);
    flex-wrap: wrap;
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    padding-block: var(--nb-space-3);
  }
  .nb-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
  }
  .nb-breadcrumb__item::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><path d='M9 6l6 6-6 6'/></svg>") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><path d='M9 6l6 6-6 6'/></svg>") no-repeat center / contain;
    opacity: 0.5;
    margin-inline-start: var(--nb-space-1);
  }
  .nb-breadcrumb__item:last-child::after { display: none; }
  .nb-breadcrumb__link { color: var(--nb-color-text-muted); }
  .nb-breadcrumb__link:hover { color: var(--nb-color-accent); }
  .nb-breadcrumb__item[aria-current="page"] { color: var(--nb-color-text); font-weight: var(--nb-fw-semibold); }

  .nb-pagination {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding-block: var(--nb-space-4);
  }
  .nb-pagination__page,
  .nb-pagination__prev,
  .nb-pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding-inline: var(--nb-space-2);
    background: var(--nb-color-surface);
    color: var(--nb-color-text-muted);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-medium);
    font-variant-numeric: tabular-nums;
    transition: all var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-pagination__page:hover:not([aria-disabled="true"]),
  .nb-pagination__prev:hover:not([aria-disabled="true"]),
  .nb-pagination__next:hover:not([aria-disabled="true"]) {
    color: var(--nb-color-accent);
    border-color: var(--nb-color-accent);
  }
  .nb-pagination__page[aria-current="page"] {
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    border-color: var(--nb-color-accent);
    font-weight: var(--nb-fw-bold);
  }
  .nb-pagination__page[aria-disabled="true"],
  .nb-pagination__prev[aria-disabled="true"],
  .nb-pagination__next[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .nb-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    color: var(--nb-color-text-faint);
  }
}


/* ============================================================================
 * 17. PRIMITIVES TOASTS + ALERTS
 * ============================================================================ */
@layer components {

  .nb-toast-container {
    position: fixed;
    top: calc(var(--nb-header-total-h) + var(--nb-space-4));
    right: var(--nb-space-4);
    z-index: var(--nb-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    max-width: 380px;
    pointer-events: none;
  }
  .nb-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4);
    background: var(--nb-color-surface);
    color: var(--nb-color-text);
    border: 1px solid var(--nb-color-border);
    border-left: 4px solid var(--nb-color-info);
    border-radius: var(--nb-radius-md);
    box-shadow: var(--nb-shadow-lg);
    font-size: var(--nb-fs-sm);
    pointer-events: auto;
    animation: nb-toast-in var(--nb-dur-normal) var(--nb-ease-spring);
  }
  .nb-toast--success { border-left-color: var(--nb-color-success); }
  .nb-toast--warning { border-left-color: var(--nb-color-warning); }
  .nb-toast--danger  { border-left-color: var(--nb-color-danger); }
  .nb-toast__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--nb-color-info);
  }
  .nb-toast--success .nb-toast__icon { color: var(--nb-color-success); }
  .nb-toast--warning .nb-toast__icon { color: var(--nb-color-warning); }
  .nb-toast--danger  .nb-toast__icon { color: var(--nb-color-danger); }
  .nb-toast__body { flex: 1; min-width: 0; }
  .nb-toast__title {
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
    margin-bottom: 2px;
  }
  .nb-toast__message {
    color: var(--nb-color-text-muted);
    line-height: var(--nb-lh-snug);
  }
  .nb-toast__close {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    color: var(--nb-color-text-faint);
    border-radius: var(--nb-radius-sm);
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-toast__close:hover {
    color: var(--nb-color-text);
    background: var(--nb-color-surface-alt);
  }
  @keyframes nb-toast-in {
    from { opacity: 0; transform: translateX(120%); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Alert (bloc statique dans le flux) */
  .nb-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4);
    background: var(--nb-color-info-soft);
    color: var(--nb-color-info-hover);
    border-radius: var(--nb-radius-md);
    border-left: 4px solid var(--nb-color-info);
  }
  .nb-alert--success { background: var(--nb-color-success-soft); color: var(--nb-color-success-hover); border-left-color: var(--nb-color-success); }
  .nb-alert--warning { background: var(--nb-color-warning-soft); color: var(--nb-color-warning-hover); border-left-color: var(--nb-color-warning); }
  .nb-alert--danger  { background: var(--nb-color-danger-soft);  color: var(--nb-color-danger-hover);  border-left-color: var(--nb-color-danger); }
  .nb-alert__title {
    font-weight: var(--nb-fw-bold);
    margin-bottom: 4px;
  }
  .nb-alert__message {
    font-size: var(--nb-fs-sm);
    line-height: var(--nb-lh-snug);
  }
}


/* ============================================================================
 * 18. PRIMITIVES DIVIDER
 * ============================================================================ */
@layer components {

  .nb-divider {
    height: 1px;
    background: var(--nb-color-border);
    border: 0;
    margin-block: var(--nb-space-4);
  }
  .nb-divider--strong { background: var(--nb-color-border-strong); }
  .nb-divider--vertical {
    height: auto;
    width: 1px;
    align-self: stretch;
    margin-block: 0;
    margin-inline: var(--nb-space-4);
  }
  .nb-divider--label {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    text-align: center;
    color: var(--nb-color-text-faint);
    font-size: var(--nb-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    margin-block: var(--nb-space-6);
    background: transparent;
    height: auto;
  }
  .nb-divider--label::before,
  .nb-divider--label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--nb-color-border);
  }
}


/* ============================================================================
 * 19. COMPOSANTS SONOYA-SPECIFIQUES
 * ============================================================================ */
@layer components {

  /* ---------- nb-live-badge (D-025) ---------- */
  .nb-live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: 3px 8px;
    background: var(--nb-color-live);
    color: white;
    font-family: var(--nb-font-body);
    font-size: 0.7rem;
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    border-radius: var(--nb-radius-sm);
    line-height: 1;
    box-shadow: 0 0 12px var(--nb-color-live-glow);
  }
  .nb-live-badge__dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 0 oklch(100% 0 0 / 0.7);
    animation: nb-live-pulse 1.4s var(--nb-ease-out-expo) infinite;
  }
  .nb-live-badge__count {
    padding-inline-start: 4px;
    padding-inline-end: 2px;
    font-variant-numeric: tabular-nums;
  }
  .nb-live-badge--compact { padding: 2px 6px; font-size: 0.62rem; }
  .nb-live-badge--inline  { padding: 4px 10px; font-size: 0.75rem; }
  .nb-live-badge--seller  { padding: 5px 11px; font-size: 0.75rem; }
  .nb-live-badge--lg      { padding: 6px 12px; font-size: 0.85rem; }

  @keyframes nb-live-pulse {
    0%   { box-shadow: 0 0 0 0 oklch(100% 0 0 / 0.7); }
    70%  { box-shadow: 0 0 0 6px oklch(100% 0 0 / 0); }
    100% { box-shadow: 0 0 0 0 oklch(100% 0 0 / 0); }
  }
  @keyframes nb-live-pulse-ring {
    0%   { box-shadow: 0 0 0 0 var(--nb-color-live-glow); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* ---------- nb-follow-btn (D-022) ---------- */
  .nb-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: var(--nb-space-2) var(--nb-space-4);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    border: 0;
    border-radius: var(--nb-radius-pill);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    cursor: pointer;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard),
                color var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-spring);
    white-space: nowrap;
  }
  .nb-follow-btn:hover { background: var(--nb-color-accent-hover); transform: scale(1.03); }
  .nb-follow-btn:active { transform: scale(0.98); }
  .nb-follow-btn[aria-pressed="true"],
  .nb-follow-btn.is-following {
    background: var(--nb-color-surface-alt);
    color: var(--nb-color-text);
    border: 1px solid var(--nb-color-border);
  }
  .nb-follow-btn[aria-pressed="true"]:hover {
    background: var(--nb-color-danger-soft);
    color: var(--nb-color-danger-hover);
    border-color: var(--nb-color-danger);
  }
  .nb-follow-btn[aria-pressed="true"] .nb-follow-btn__label--follow,
  .nb-follow-btn:not([aria-pressed="true"]) .nb-follow-btn__label--following,
  .nb-follow-btn:not([aria-pressed="true"]):hover .nb-follow-btn__label--following,
  .nb-follow-btn[aria-pressed="true"]:hover .nb-follow-btn__label--following { display: none; }
  .nb-follow-btn[aria-pressed="true"]:hover .nb-follow-btn__label--unfollow { display: inline; }
  .nb-follow-btn__label--unfollow { display: none; }
  .nb-follow-btn__count {
    padding-inline-start: 6px;
    padding-inline-end: 2px;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    font-weight: var(--nb-fw-semibold);
  }

  /* ---------- nb-chat-icon (D-023) ---------- */
  .nb-chat-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--nb-color-surface-alt);
    color: var(--nb-color-text-muted);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    cursor: pointer;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard),
                border-color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-chat-icon:hover {
    color: var(--nb-color-accent);
    background: var(--nb-color-accent-soft);
    border-color: var(--nb-color-accent);
  }
  .nb-chat-icon__dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--nb-color-success);
    border: 2px solid var(--nb-color-surface);
    border-radius: 50%;
  }
  .nb-chat-icon__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nb-color-danger);
    color: white;
    font-size: 0.62rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-pill);
    border: 2px solid var(--nb-color-surface);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- nb-video-thumb (D-024) ---------- */
  .nb-video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-md);
    overflow: hidden;
    isolation: isolate;
  }
  .nb-video-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  .nb-video-thumb:hover > img { transform: scale(1.06); }
  .nb-video-thumb__duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 2px 5px;
    background: oklch(0% 0 0 / 0.75);
    color: white;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    border-radius: var(--nb-radius-xs);
    z-index: 1;
  }
  .nb-video-thumb__views {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    background: oklch(0% 0 0 / 0.75);
    color: white;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    border-radius: var(--nb-radius-xs);
    z-index: 1;
  }
  .nb-video-thumb__play {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: oklch(0% 0 0 / 0);
    opacity: 0;
    transition: opacity var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-normal) var(--nb-ease-standard);
    z-index: 1;
  }
  .nb-video-thumb:hover .nb-video-thumb__play {
    opacity: 1;
    background: oklch(0% 0 0 / 0.35);
  }
}


/* ============================================================================
 * 20. TYPOGRAPHY HELPERS
 * ============================================================================ */
@layer utilities {
  .nb-text-2xs   { font-size: var(--nb-fs-2xs); }
  .nb-text-xs    { font-size: var(--nb-fs-xs); }
  .nb-text-sm    { font-size: var(--nb-fs-sm); }
  .nb-text-base  { font-size: var(--nb-fs-base); }
  .nb-text-md    { font-size: var(--nb-fs-md); }
  .nb-text-lg    { font-size: var(--nb-fs-lg); }
  .nb-text-xl    { font-size: var(--nb-fs-xl); }
  .nb-text-2xl   { font-size: var(--nb-fs-2xl); }
  .nb-text-3xl   { font-size: var(--nb-fs-3xl); }
  .nb-text-4xl   { font-size: var(--nb-fs-4xl); }

  .nb-font-heading { font-family: var(--nb-font-heading); }
  .nb-font-body    { font-family: var(--nb-font-body); }
  .nb-font-mono    { font-family: var(--nb-font-mono); }

  .nb-fw-light    { font-weight: var(--nb-fw-light); }
  .nb-fw-normal   { font-weight: var(--nb-fw-normal); }
  .nb-fw-medium   { font-weight: var(--nb-fw-medium); }
  .nb-fw-semibold { font-weight: var(--nb-fw-semibold); }
  .nb-fw-bold     { font-weight: var(--nb-fw-bold); }
  .nb-fw-heavy    { font-weight: var(--nb-fw-heavy); }

  .nb-text-left   { text-align: left; }
  .nb-text-center { text-align: center; }
  .nb-text-right  { text-align: right; }

  .nb-text-uppercase { text-transform: uppercase; letter-spacing: var(--nb-ls-wider); }
  .nb-text-capitalize { text-transform: capitalize; }
  .nb-text-lowercase { text-transform: lowercase; }

  .nb-text-tnum { font-variant-numeric: tabular-nums; }

  .nb-text-color         { color: var(--nb-color-text); }
  .nb-text-color-strong  { color: var(--nb-color-text-strong); }
  .nb-text-color-muted   { color: var(--nb-color-text-muted); }
  .nb-text-color-faint   { color: var(--nb-color-text-faint); }
  .nb-text-color-inverse { color: var(--nb-color-text-inverse); }
  .nb-text-color-accent  { color: var(--nb-color-accent); }
  .nb-text-color-success { color: var(--nb-color-success); }
  .nb-text-color-warning { color: var(--nb-color-warning); }
  .nb-text-color-danger  { color: var(--nb-color-danger); }
  .nb-text-color-info    { color: var(--nb-color-info); }
  .nb-text-color-live    { color: var(--nb-color-live); }

  .nb-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nb-line-clamp-1,
  .nb-line-clamp-2,
  .nb-line-clamp-3,
  .nb-line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nb-line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
  .nb-line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
  .nb-line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
  .nb-line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

  .nb-nowrap { white-space: nowrap; }
  .nb-italic { font-style: italic; }
  .nb-underline { text-decoration: underline; text-underline-offset: 0.15em; }
  .nb-strike { text-decoration: line-through; }
}


/* ============================================================================
 * 21. UTILITIES - Display, flex, grid, gap, spacing, size, radius, shadow, position
 * ============================================================================ */
@layer utilities {

  /* Display */
  .nb-block        { display: block; }
  .nb-inline       { display: inline; }
  .nb-inline-block { display: inline-block; }
  .nb-flex         { display: flex; }
  .nb-inline-flex  { display: inline-flex; }
  .nb-grid         { display: grid; }
  .nb-inline-grid  { display: inline-grid; }
  .nb-hidden       { display: none; }
  .nb-contents     { display: contents; }

  /* Flex */
  .nb-flex-row     { flex-direction: row; }
  .nb-flex-col     { flex-direction: column; }
  .nb-flex-wrap    { flex-wrap: wrap; }
  .nb-flex-nowrap  { flex-wrap: nowrap; }
  .nb-items-start  { align-items: flex-start; }
  .nb-items-center { align-items: center; }
  .nb-items-end    { align-items: flex-end; }
  .nb-items-stretch { align-items: stretch; }
  .nb-items-baseline { align-items: baseline; }
  .nb-justify-start   { justify-content: flex-start; }
  .nb-justify-center  { justify-content: center; }
  .nb-justify-end     { justify-content: flex-end; }
  .nb-justify-between { justify-content: space-between; }
  .nb-justify-around  { justify-content: space-around; }
  .nb-justify-evenly  { justify-content: space-evenly; }
  .nb-flex-1     { flex: 1 1 0%; }
  .nb-flex-auto  { flex: 1 1 auto; }
  .nb-flex-none  { flex: none; }
  .nb-grow       { flex-grow: 1; }
  .nb-grow-0     { flex-grow: 0; }
  .nb-shrink     { flex-shrink: 1; }
  .nb-shrink-0   { flex-shrink: 0; }

  /* Grid */
  .nb-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nb-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nb-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nb-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nb-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nb-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nb-col-span-2   { grid-column: span 2 / span 2; }
  .nb-col-span-3   { grid-column: span 3 / span 3; }
  .nb-col-span-4   { grid-column: span 4 / span 4; }
  .nb-col-span-full { grid-column: 1 / -1; }

  /* Gap */
  .nb-gap-0    { gap: 0; }
  .nb-gap-1    { gap: var(--nb-space-1); }
  .nb-gap-2    { gap: var(--nb-space-2); }
  .nb-gap-3    { gap: var(--nb-space-3); }
  .nb-gap-4    { gap: var(--nb-space-4); }
  .nb-gap-5    { gap: var(--nb-space-5); }
  .nb-gap-6    { gap: var(--nb-space-6); }
  .nb-gap-8    { gap: var(--nb-space-8); }
  .nb-gap-10   { gap: var(--nb-space-10); }
  .nb-gap-12   { gap: var(--nb-space-12); }
  .nb-gap-x-4  { column-gap: var(--nb-space-4); }
  .nb-gap-y-4  { row-gap: var(--nb-space-4); }

  /* Margin */
  .nb-m-0    { margin: 0; }
  .nb-m-auto { margin: auto; }
  .nb-mx-auto { margin-inline: auto; }
  .nb-my-auto { margin-block: auto; }
  .nb-mt-1  { margin-top: var(--nb-space-1); }
  .nb-mt-2  { margin-top: var(--nb-space-2); }
  .nb-mt-3  { margin-top: var(--nb-space-3); }
  .nb-mt-4  { margin-top: var(--nb-space-4); }
  .nb-mt-6  { margin-top: var(--nb-space-6); }
  .nb-mt-8  { margin-top: var(--nb-space-8); }
  .nb-mb-1  { margin-bottom: var(--nb-space-1); }
  .nb-mb-2  { margin-bottom: var(--nb-space-2); }
  .nb-mb-3  { margin-bottom: var(--nb-space-3); }
  .nb-mb-4  { margin-bottom: var(--nb-space-4); }
  .nb-mb-6  { margin-bottom: var(--nb-space-6); }
  .nb-mb-8  { margin-bottom: var(--nb-space-8); }

  /* Padding */
  .nb-p-0  { padding: 0; }
  .nb-p-2  { padding: var(--nb-space-2); }
  .nb-p-3  { padding: var(--nb-space-3); }
  .nb-p-4  { padding: var(--nb-space-4); }
  .nb-p-5  { padding: var(--nb-space-5); }
  .nb-p-6  { padding: var(--nb-space-6); }
  .nb-p-8  { padding: var(--nb-space-8); }
  .nb-px-2 { padding-inline: var(--nb-space-2); }
  .nb-px-3 { padding-inline: var(--nb-space-3); }
  .nb-px-4 { padding-inline: var(--nb-space-4); }
  .nb-px-6 { padding-inline: var(--nb-space-6); }
  .nb-py-2 { padding-block: var(--nb-space-2); }
  .nb-py-3 { padding-block: var(--nb-space-3); }
  .nb-py-4 { padding-block: var(--nb-space-4); }
  .nb-py-6 { padding-block: var(--nb-space-6); }

  /* Size */
  .nb-w-full    { width: 100%; }
  .nb-w-auto    { width: auto; }
  .nb-w-screen  { width: 100vw; }
  .nb-h-full    { height: 100%; }
  .nb-h-auto    { height: auto; }
  .nb-h-screen  { height: 100dvh; }
  .nb-min-h-0     { min-height: 0; }
  .nb-min-h-full  { min-height: 100%; }
  .nb-min-h-screen{ min-height: 100dvh; }
  .nb-min-w-0     { min-width: 0; }
  .nb-max-w-full  { max-width: 100%; }

  /* Radius */
  .nb-rounded-none { border-radius: 0; }
  .nb-rounded-sm   { border-radius: var(--nb-radius-sm); }
  .nb-rounded-md   { border-radius: var(--nb-radius-md); }
  .nb-rounded-lg   { border-radius: var(--nb-radius-lg); }
  .nb-rounded-xl   { border-radius: var(--nb-radius-xl); }
  .nb-rounded-2xl  { border-radius: var(--nb-radius-2xl); }
  .nb-rounded-pill { border-radius: var(--nb-radius-pill); }
  .nb-rounded-full { border-radius: 50%; }

  /* Shadow */
  .nb-shadow-none { box-shadow: none; }
  .nb-shadow-xs   { box-shadow: var(--nb-shadow-xs); }
  .nb-shadow-sm   { box-shadow: var(--nb-shadow-sm); }
  .nb-shadow-md   { box-shadow: var(--nb-shadow-md); }
  .nb-shadow-lg   { box-shadow: var(--nb-shadow-lg); }
  .nb-shadow-xl   { box-shadow: var(--nb-shadow-xl); }

  /* Position */
  .nb-static   { position: static; }
  .nb-relative { position: relative; }
  .nb-absolute { position: absolute; }
  .nb-fixed    { position: fixed; }
  .nb-sticky   { position: sticky; }
  .nb-inset-0  { inset: 0; }

  /* Overflow */
  .nb-overflow-hidden { overflow: hidden; }
  .nb-overflow-auto   { overflow: auto; }
  .nb-overflow-x-auto { overflow-x: auto; }
  .nb-overflow-y-auto { overflow-y: auto; }
  .nb-overflow-x-hidden { overflow-x: hidden; }
  .nb-overflow-y-hidden { overflow-y: hidden; }

  /* Cursor */
  .nb-cursor-pointer  { cursor: pointer; }
  .nb-cursor-default  { cursor: default; }
  .nb-cursor-not-allowed { cursor: not-allowed; }

  /* User select */
  .nb-select-none { user-select: none; }
  .nb-select-text { user-select: text; }

  /* Isolation */
  .nb-isolate { isolation: isolate; }

  /* A11y */
  .nb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Responsive helpers : classes marker actives uniquement dans leur media query */
  @media (max-width: 768px) { .nb-hidden-mobile { display: none !important; } }
  @media (min-width: 769px) and (max-width: 1024px) { .nb-hidden-tablet { display: none !important; } }
  @media (min-width: 1025px) { .nb-hidden-desktop { display: none !important; } }
  .nb-only-mobile { display: none; }
  @media (max-width: 768px) { .nb-only-mobile { display: initial; } }
  .nb-only-desktop { display: none; }
  @media (min-width: 1025px) { .nb-only-desktop { display: initial; } }
}


/* ============================================================================
 * 22. GLOBAL ANIMATIONS - fade, slide, pulse, shimmer, zoom, spin, bounce
 * ============================================================================ */
@keyframes nb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nb-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes nb-slide-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nb-slide-in-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nb-slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nb-slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nb-zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nb-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}
@keyframes nb-dialog-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nb-bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.06); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes nb-pulse-scale {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.8; }
}

/* Animation utilities */
@layer utilities {
  .nb-animate-fade-in    { animation: nb-fade-in var(--nb-dur-normal) var(--nb-ease-out-quart); }
  .nb-animate-slide-up   { animation: nb-slide-in-up var(--nb-dur-normal) var(--nb-ease-out-expo); }
  .nb-animate-slide-down { animation: nb-slide-in-down var(--nb-dur-normal) var(--nb-ease-out-expo); }
  .nb-animate-zoom-in    { animation: nb-zoom-in var(--nb-dur-normal) var(--nb-ease-spring); }
  .nb-animate-bounce-in  { animation: nb-bounce-in var(--nb-dur-slow) var(--nb-ease-spring); }
  .nb-animate-pulse      { animation: nb-pulse-scale 2s var(--nb-ease-out-expo) infinite; }
  .nb-animate-spin       { animation: nb-spin var(--nb-dur-slower) linear infinite; }
}