/* =============================================================================
 * SONOYA - catalogue.css
 * -----------------------------------------------------------------------------
 * Listing catalogue / categorie (ecran 2). Prefixe cl-* (D-011 #22).
 *
 * Mobile-first strict : ordre DOM unique (breadcrumb, en-tete, sous-categories,
 * outils, grille). Les facettes vivent dans un <dialog> : bottom-sheet sous
 * 1024px, carte sticky au-dela — sans dupliquer le markup.
 *
 * Reutilise nb-product, nb-breadcrumb, nb-btn, nb-select.
 * 100% tokens de theme : suit le mode clair / sombre du site.
 * ============================================================================= */

@layer pages {

  /* ===============================================
   * PAGE
   * =============================================== */
  .cl-page {
    max-width: var(--nb-container-max);
    margin-inline: auto;
    padding-inline: var(--nb-container-pad);
    padding-bottom: calc(var(--nb-mobile-nav-h) + var(--nb-space-10));
  }
  @media (min-width: 1024px) {
    .cl-page { padding-bottom: var(--nb-space-16); }
  }

  .cl-breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .cl-breadcrumb::-webkit-scrollbar { display: none; }
  .cl-breadcrumb__list { display: contents; }


  /* ===============================================
   * EN-TETE DE CATEGORIE
   * =============================================== */
  .cl-header {
    position: relative;
    border-radius: var(--nb-radius-lg);
    overflow: hidden;
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
  }
  .cl-header__media {
    height: clamp(96px, 20vw, 190px);
    background: var(--nb-color-surface-alt);

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .cl-header__body {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    padding: var(--nb-space-4);
  }
  @media (min-width: 768px) {
    .cl-header__body { padding: var(--nb-space-5) var(--nb-space-6); }
  }
  /* Sur-titre des pages promotionnelles (flash, deals, nouveautes, tendances) */
  .cl-header__kicker {
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    color: var(--nb-color-accent);
  }
  .cl-header__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xl);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    letter-spacing: var(--nb-ls-tighter);
    line-height: var(--nb-lh-tight);
  }
  @media (min-width: 768px) {
    .cl-header__title { font-size: var(--nb-fs-2xl); }
  }
  .cl-header__count {
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);

    & > strong {
      color: var(--nb-color-text-strong);
      font-variant-numeric: tabular-nums;
    }
  }
  .cl-header__range { color: var(--nb-color-accent); font-weight: var(--nb-fw-semibold); }

  /* Bandeau de confiance : argument d'achat, visible des le haut de page */
  .cl-header__trust {
    display: flex;
    gap: var(--nb-space-4);
    flex-wrap: wrap;
    margin-top: var(--nb-space-2);

    & > li {
      display: inline-flex;
      align-items: center;
      gap: var(--nb-space-1);
      font-size: var(--nb-fs-2xs);
      font-weight: var(--nb-fw-semibold);
      color: var(--nb-color-text-muted);
    }
    & > li > i { color: var(--nb-color-success); font-size: 1.1rem; }
  }


  /* ===============================================
   * RAYONS (sous-categories)
   * -----------------------------------------------
   * Grille repliable, pas un rail : la navigation doit etre visible d'un coup
   * d'oeil. Tuiles rectangulaires (les visuels produits se recadrent mal en
   * cercle) avec le libelle sur 2 lignes et le nombre de references.
   * =============================================== */
  .cl-subcats {
    margin-top: var(--nb-space-5);
  }
  .cl-subcats__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nb-space-3);
    margin-bottom: var(--nb-space-3);
  }
  .cl-subcats__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-md);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    letter-spacing: var(--nb-ls-tight);
  }
  .cl-subcats__more { flex-shrink: 0; }

  .cl-subcats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nb-space-2);
  }
  @media (min-width: 420px) {
    .cl-subcats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 768px) {
    .cl-subcats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nb-space-3); }
  }
  @media (min-width: 1280px) {
    .cl-subcats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }

  .cl-subcat {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    overflow: hidden;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                box-shadow var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-subcat:hover {
    border-color: var(--nb-color-accent);
    box-shadow: var(--nb-shadow-sm);
  }
  .cl-subcat:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }

  .cl-subcat__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--nb-radius-sm);
    overflow: hidden;
    background: var(--nb-color-surface-alt);
    color: var(--nb-color-accent);
    font-size: 1.35rem;

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--nb-dur-slow) var(--nb-ease-out-quart);
    }
  }
  .cl-subcat:hover .cl-subcat__media > img { transform: scale(1.08); }
  @media (min-width: 768px) {
    .cl-subcat__media { width: 54px; height: 54px; }
  }

  .cl-subcat__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .cl-subcat__name {
    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;
    overflow-wrap: anywhere;
  }
  .cl-subcat__count {
    font-size: var(--nb-fs-2xs);
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }


  /* ===============================================
   * LAYOUT : FACETTES + GRILLE
   * =============================================== */
  .cl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-space-5);
    margin-top: var(--nb-space-5);
  }
  @media (min-width: 1024px) {
    .cl-layout {
      grid-template-columns: 272px minmax(0, 1fr);
      gap: var(--nb-space-8);
      align-items: start;
    }
  }
  .cl-main { min-width: 0; }


  /* ===============================================
   * FACETTES
   * =============================================== */
  .cl-filters__body {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-5);
  }

  /* ---------- Recherche dans le perimetre ---------- */
  .cl-filters__search {
    position: relative;

    & > i {
      position: absolute;
      left: var(--nb-space-3);
      top: 50%;
      translate: 0 -50%;
      color: var(--nb-color-text-faint);
      font-size: 1.05rem;
      pointer-events: none;
    }
    & > input {
      width: 100%;
      padding: var(--nb-space-3) var(--nb-space-3) var(--nb-space-3) var(--nb-space-9);
      border: 1.5px solid transparent;
      border-radius: var(--nb-radius-pill);
      background: var(--nb-color-surface-sunk);
      font-size: var(--nb-fs-sm);
      transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                  background var(--nb-dur-fast) var(--nb-ease-standard);
    }
    & > input:focus-visible {
      outline: none;
      background: var(--nb-color-surface);
      border-color: var(--nb-color-accent);
      box-shadow: var(--nb-focus-ring);
    }
  }

  /* ---------- Fourchette de prix libre ---------- */
  .cl-range {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    margin-top: var(--nb-space-2);
  }
  .cl-range__field { flex: 1; min-width: 0; }
  .cl-range__field > input {
    width: 100%;
    padding: var(--nb-space-2);
    border: 1.5px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-surface);
    font-size: var(--nb-fs-xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
  }
  .cl-range__field > input::-webkit-outer-spin-button,
  .cl-range__field > input::-webkit-inner-spin-button { appearance: none; }
  .cl-range__field > input:focus-visible {
    outline: none;
    border-color: var(--nb-color-accent);
    box-shadow: var(--nb-focus-ring);
  }
  .cl-range__sep { color: var(--nb-color-text-faint); flex-shrink: 0; }
  .cl-range__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-accent-soft);
    color: var(--nb-color-accent-hover);
    font-size: 1.05rem;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-range__go:hover { background: var(--nb-color-accent); color: var(--nb-color-accent-contrast); }
  .cl-range__go:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }

  /* ---------- Vendeur en vedette ---------- */
  .cl-spotlight {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    padding-top: var(--nb-space-4);
    border-top: 1px dashed var(--nb-color-border);
  }
  .cl-spotlight__label {
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    color: var(--nb-color-text-faint);
  }
  .cl-spotlight__card {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-3);
    background: var(--nb-color-accent-soft);
    border-radius: var(--nb-radius-md);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-spotlight__card:hover { background: var(--nb-color-accent-soft-hover); }
  .cl-spotlight__card:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }
  .cl-spotlight__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--nb-radius-md);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-family: var(--nb-font-heading);
    font-weight: var(--nb-fw-heavy);
    font-size: var(--nb-fs-sm);
  }
  .cl-spotlight__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .cl-spotlight__name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    & > i { color: var(--nb-color-info); flex-shrink: 0; }
  }
  .cl-spotlight__meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--nb-fs-2xs);
    color: var(--nb-color-text-muted);
    font-variant-numeric: tabular-nums;

    & > i { color: var(--nb-color-star); }
  }

  .cl-facet {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
  }
  .cl-facet__legend {
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    color: var(--nb-color-text-faint);
    margin-bottom: var(--nb-space-1);
  }
  .cl-facet__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cl-facet__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2) var(--nb-space-3);
    border-radius: var(--nb-radius-sm);
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text);
    text-align: start;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard),
                color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-facet__option:hover { background: var(--nb-color-surface-hover); }
  .cl-facet__option.is-active {
    background: var(--nb-color-accent-soft);
    color: var(--nb-color-accent-hover);
    font-weight: var(--nb-fw-bold);
  }
  .cl-facet__option:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }
  .cl-facet__option.is-zero {
    opacity: 0.38;
    pointer-events: none;
  }
  .cl-facet__label {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cl-facet__star  { color: var(--nb-color-star); }
  .cl-facet__check { color: var(--nb-color-info); font-size: 0.95em; }
  .cl-facet__icon--ok    { color: var(--nb-color-success); }
  .cl-facet__icon--hub   { color: var(--nb-color-info); }
  .cl-facet__icon--flash { color: var(--nb-color-live); }
  .cl-facet__count {
    flex-shrink: 0;
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--nb-color-text-faint);
  }
  .cl-facet__option.is-active .cl-facet__count { color: inherit; }

  .cl-facet__more {
    align-self: flex-start;
    padding: var(--nb-space-1) var(--nb-space-3);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-facet__more:hover { color: var(--nb-color-accent-hover); }
  .cl-facet__more:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }

  .cl-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    align-self: flex-start;
    padding: var(--nb-space-2) var(--nb-space-3);
    border-radius: var(--nb-radius-pill);
    border: 1px dashed var(--nb-color-border-strong);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-muted);
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                border-color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-filters__reset:hover { color: var(--nb-color-danger); border-color: var(--nb-color-danger); }

  /* Mobile : bottom-sheet <dialog> */
  @media (max-width: 1023px) {
    .cl-filters {
      position: fixed;
      inset: auto 0 0 0;
      width: 100%;
      max-width: none;
      max-height: 88dvh;
      margin: 0;
      display: none;
      flex-direction: column;
      background: var(--nb-color-surface);
      border-radius: var(--nb-radius-2xl) var(--nb-radius-2xl) 0 0;
      box-shadow: var(--nb-shadow-2xl);
    }
    .cl-filters[open] {
      display: flex;
      animation: cl-sheet-in var(--nb-dur-slow) var(--nb-ease-out-expo);
    }
    .cl-filters__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--nb-space-4) var(--nb-space-5) var(--nb-space-3);
      border-bottom: 1px solid var(--nb-color-border-alt);
    }
    .cl-filters__title {
      font-family: var(--nb-font-heading);
      font-size: var(--nb-fs-md);
      font-weight: var(--nb-fw-heavy);
    }
    .cl-filters__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--nb-color-surface-alt);
      font-size: 1.1rem;
    }
    .cl-filters__body {
      flex: 1;
      overflow-y: auto;
      padding: var(--nb-space-4) var(--nb-space-5);
    }
    .cl-filters__foot {
      display: flex;
      gap: var(--nb-space-2);
      padding: var(--nb-space-3) var(--nb-space-5);
      padding-bottom: max(var(--nb-space-3), env(safe-area-inset-bottom));
      border-top: 1px solid var(--nb-color-border-alt);
    }
    .cl-filters__apply { flex: 1; }
  }
  @keyframes cl-sheet-in {
    from { translate: 0 40px; opacity: 0.4; }
    to   { translate: 0 0; opacity: 1; }
  }

  /* Desktop : le meme <dialog> devient une carte sidebar sticky */
  @media (min-width: 1024px) {
    .cl-filters,
    .cl-filters:not([open]) {
      display: flex;
      flex-direction: column;
      gap: var(--nb-space-5);
      position: sticky;
      top: calc(var(--nb-header-menu-h) + var(--nb-space-4));
      inset-inline: auto;
      width: auto;
      max-height: calc(100dvh - var(--nb-header-menu-h) - var(--nb-space-10));
      overflow-y: auto;
      margin: 0;
      padding: var(--nb-space-4);
      background: var(--nb-color-surface);
      border: 1px solid var(--nb-color-border);
      border-radius: var(--nb-radius-lg);
      box-shadow: var(--nb-shadow-xs);
      color: inherit;
    }
    .cl-filters__head,
    .cl-filters__foot { display: none; }
  }


  /* ===============================================
   * BARRE D'OUTILS
   * =============================================== */
  .cl-toolbar {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
  }
  .cl-toolbar__filters {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-shrink: 0;
    padding: var(--nb-space-3) var(--nb-space-4);
    border: 1.5px solid var(--nb-color-border);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-color-surface);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    white-space: nowrap;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard);

    & > i { font-size: 1.15rem; }
  }
  .cl-toolbar__filters:hover { border-color: var(--nb-color-border-hover); }
  .cl-toolbar__filters:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }
  @media (min-width: 1024px) {
    .cl-toolbar__filters { display: none; }
  }
  .cl-toolbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: var(--nb-radius-pill);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .cl-toolbar__count {
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);

    & > strong {
      color: var(--nb-color-text-strong);
      font-variant-numeric: tabular-nums;
    }
  }
  .cl-toolbar__right {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    margin-inline-start: auto;
  }
  .cl-toolbar__view {
    display: inline-flex;
    padding: 2px;
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-pill);
  }
  @media (max-width: 479px) {
    .cl-toolbar__view { display: none; }
  }
  .cl-toolbar__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border-radius: var(--nb-radius-pill);
    color: var(--nb-color-text-muted);
    font-size: 1.15rem;
    transition: background var(--nb-dur-normal) var(--nb-ease-out-quart),
                color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-toolbar__view-btn.is-active {
    background: var(--nb-color-surface);
    color: var(--nb-color-accent);
    box-shadow: var(--nb-shadow-xs);
  }
  .cl-toolbar__view-btn:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }


  /* ===============================================
   * CHIPS DE FILTRES ACTIFS
   * =============================================== */
  .cl-active {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
    margin-top: var(--nb-space-3);
  }
  .cl-active__label {
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    color: var(--nb-color-text-faint);
  }
  .cl-active__chips { display: contents; }
  .cl-active__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: 3px var(--nb-space-2) 3px var(--nb-space-3);
    background: var(--nb-color-accent-soft);
    color: var(--nb-color-accent-hover);
    border-radius: var(--nb-radius-pill);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-active__chip:hover { background: var(--nb-color-accent-soft-hover); }
  .cl-active__chip > i { font-size: 0.95em; }
  .cl-active__reset {
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .cl-active__reset:hover { color: var(--nb-color-danger); }


  /* ===============================================
   * GRILLE PRODUITS
   * -----------------------------------------------
   * LAYOUT UNIQUEMENT. La card est le composant canonique nb-product-card
   * (D-030) : aucun style de card ne doit apparaitre dans ce fichier.
   * =============================================== */
  .cl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nb-space-2);
    margin-top: var(--nb-space-4);
  }
  @media (min-width: 480px) {
    .cl-grid { gap: var(--nb-space-3); }
  }
  @media (min-width: 768px) {
    .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-4); }
  }
  @media (min-width: 1440px) {
    .cl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 1920px) {
    .cl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  /* Mode liste : une colonne, la card bascule via sa propre variante --list */
  .cl-grid[data-view="list"] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-space-3);
  }


  /* ===============================================
   * RAILS COMMERCIAUX (flash, sponsorises)
   * Defilement horizontal, cards canoniques a largeur fixe.
   * =============================================== */
  /* Nombre de cards VISIBLES simultanement : la largeur est une fraction du
     conteneur, jamais une valeur en pixels. Une card est donc toujours entiere
     et lisible, et le defilement se fait par groupe complet. */
  .cl-rail {
    --cl-rail-cols: 2;
    --cl-rail-gap: var(--nb-space-2);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
      (100% - (var(--cl-rail-cols) - 1) * var(--cl-rail-gap)) / var(--cl-rail-cols)
    );
    gap: var(--cl-rail-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-block: 2px;
  }
  .cl-rail::-webkit-scrollbar { display: none; }
  .cl-rail > .nb-product-card { scroll-snap-align: start; }

  @media (min-width: 560px) {
    .cl-rail { --cl-rail-cols: 3; --cl-rail-gap: var(--nb-space-3); }
  }
  @media (min-width: 900px) {
    .cl-rail { --cl-rail-cols: 4; }
  }
  @media (min-width: 1440px) {
    .cl-rail { --cl-rail-cols: 5; --cl-rail-gap: var(--nb-space-4); }
  }


  /* ===============================================
   * BANDEAU VENTES FLASH
   * =============================================== */
  .cl-flash {
    margin-top: var(--nb-space-5);
    padding: var(--nb-space-4);
    background: var(--nb-color-live-soft);
    border: 1px solid color-mix(in oklch, var(--nb-color-live) 30%, transparent);
    border-radius: var(--nb-radius-lg);
  }
  .cl-flash__head {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--nb-space-3);
  }
  .cl-flash__title {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    letter-spacing: var(--nb-ls-tighter);

    & > i {
      color: var(--nb-color-live);
      animation: cl-flash-pulse 1.6s var(--nb-ease-in-out-quart) infinite;
    }
  }
  @keyframes cl-flash-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
  }
  .cl-flash__timer {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--nb-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .cl-flash__timer-label {
    font-family: var(--nb-font-body);
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    margin-inline-end: var(--nb-space-1);
  }
  .cl-flash__timer-block {
    min-width: 2ch;
    padding: 3px 5px;
    background: var(--nb-color-text);
    color: var(--nb-color-text-inverse);
    border-radius: var(--nb-radius-xs);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    text-align: center;
  }
  .cl-flash__timer-sep { color: var(--nb-color-live); font-weight: var(--nb-fw-bold); }
  .cl-flash__all {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    margin-inline-start: auto;
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    color: var(--nb-color-live);
    white-space: nowrap;
    transition: gap var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .cl-flash__all:hover { gap: var(--nb-space-2); }


  /* ===============================================
   * PRODUITS SPONSORISES
   * =============================================== */
  .cl-sponsored { margin-bottom: var(--nb-space-5); }
  .cl-sponsored__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nb-space-3);
    margin-bottom: var(--nb-space-3);
  }
  .cl-sponsored__title {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    letter-spacing: var(--nb-ls-tighter);

    & > i { color: var(--nb-color-accent); }
  }


  /* ===============================================
   * BANNIERE PROMO DE FIN DE LISTE
   * =============================================== */
  .cl-banner {
    position: relative;
    display: block;
    margin-top: var(--nb-space-8);
    border-radius: var(--nb-radius-lg);
    overflow: hidden;
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    min-height: 120px;

    & > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.45;
    }
  }
  .cl-banner__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    padding: var(--nb-space-5);
  }
  .cl-banner__headline {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-heavy);
    letter-spacing: var(--nb-ls-tight);
  }
  .cl-banner__sub {
    font-size: var(--nb-fs-sm);
    opacity: 0.92;
  }
  .cl-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    margin-top: var(--nb-space-2);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    transition: gap var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .cl-banner:hover .cl-banner__cta { gap: var(--nb-space-2); }


  /* ===============================================
   * VIDE + PAGINATION
   * =============================================== */
  .cl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-16) var(--nb-space-4);
    text-align: center;
    font-size: var(--nb-fs-md);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text);

    & > i {
      font-size: 2.5rem;
      color: var(--nb-color-text-disabled);
    }
    & > span {
      font-size: var(--nb-fs-sm);
      font-weight: var(--nb-fw-normal);
      color: var(--nb-color-text-muted);
    }
  }

  .cl-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nb-space-2);
    margin-top: var(--nb-space-8);
  }
  .cl-more__progress {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;
  }
  .cl-more__bar {
    width: min(240px, 60vw);
    height: 4px;
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-pill);
    overflow: hidden;

    & > span {
      display: block;
      height: 100%;
      background: var(--nb-color-accent);
      border-radius: var(--nb-radius-pill);
      transition: width var(--nb-dur-slow) var(--nb-ease-out-quart);
    }
  }
  .cl-more__btn { margin-top: var(--nb-space-2); }
}