/* =============================================================================
 * SONOYA - vendeurDetails.css
 * -----------------------------------------------------------------------------
 * Boutique vendeur publique (ecran 5). Prefixe sp-* (seller page, vitrine).
 *
 * Mobile-first strict. Reutilise nb-product, nb-badge, nb-chip, nb-follow-btn,
 * nb-live-badge, nb-breadcrumb, pd-stars / pd-review__reply (avis).
 * Carte : Leaflet auto-heberge (vendor-leaflet.css / .js), tuiles OSM.
 * ============================================================================= */

@layer pages {

  /* ===============================================
   * PAGE
   * =============================================== */
  .sp-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) {
    .sp-page { padding-bottom: var(--nb-space-16); }
  }

  .sp-block-title {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);

    & > i { color: var(--nb-color-accent); font-size: 1.15em; }
  }

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


  /* ===============================================
   * HERO - cover photo du vendeur + carte identite
   * 100% tokens de theme : suit le mode clair / sombre du site.
   * =============================================== */
  .sp-hero {
    position: relative;
    background: var(--nb-color-surface);
    border-block: 1px solid var(--nb-color-border-alt);
    margin-inline: calc(-1 * var(--nb-container-pad));
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .sp-hero {
      margin-inline: 0;
      margin-top: var(--nb-space-2);
      border: 1px solid var(--nb-color-border);
      border-radius: var(--nb-radius-xl);
      box-shadow: var(--nb-shadow-sm);
    }
  }

  /* ---------- Cover : photo paysage de la boutique ---------- */
  .sp-hero__cover {
    height: clamp(120px, 26vw, 240px);
    background: var(--nb-color-surface-alt);

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .sp-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-4);
    padding: var(--nb-space-4) var(--nb-container-pad) var(--nb-space-4);
  }
  @media (min-width: 768px) {
    .sp-hero__body {
      padding: var(--nb-space-5) var(--nb-space-8) var(--nb-space-6);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "top    actions"
        "meta   actions"
        "stats  stats";
      align-items: start;
      column-gap: var(--nb-space-8);
    }
  }

  .sp-hero__top {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    min-width: 0;
  }
  @media (min-width: 768px) {
    .sp-hero__top { gap: var(--nb-space-4); }
  }
  /* Avec cover : l'avatar chevauche la photo */
  .sp-hero__body--overlap .sp-hero__top { align-items: flex-end; }
  .sp-hero__body--overlap .sp-hero__avatar {
    margin-top: calc(-1 * var(--nb-space-10));
    border: 3px solid var(--nb-color-surface);
    box-shadow: var(--nb-shadow-md);
  }
  @media (min-width: 768px) {
    .sp-hero__body--overlap .sp-hero__avatar { margin-top: calc(-1 * var(--nb-space-14)); }
  }

  .sp-hero__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--nb-radius-lg);
    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-lg);
  }
  @media (min-width: 768px) {
    .sp-hero__avatar { width: 84px; height: 84px; font-size: var(--nb-fs-2xl); border-radius: var(--nb-radius-xl); }
  }
  .sp-hero__avatar.is-online::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--nb-color-success);
    border: 3px solid var(--nb-color-surface);
  }

  .sp-hero__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .sp-hero__name {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    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) {
    .sp-hero__name { font-size: var(--nb-fs-3xl); }
  }
  .sp-hero__verified { color: var(--nb-color-info); flex-shrink: 0; font-size: 0.8em; }
  .sp-hero__tagline {
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sp-hero__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    margin-inline-start: auto;
    border: 1.5px solid var(--nb-color-border);
    border-radius: 50%;
    background: var(--nb-color-surface);
    color: var(--nb-color-text-muted);
    font-size: 1.2rem;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                border-color var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-spring);
  }
  .sp-hero__share:hover {
    color: var(--nb-color-accent);
    border-color: var(--nb-color-accent);
    transform: scale(1.06);
  }
  .sp-hero__share:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }

  /* ---------- Meta : chips + localisation + statut ---------- */
  .sp-hero__meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
  }
  .sp-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px var(--nb-space-3);
    border: 1px solid var(--nb-color-border-strong);
    border-radius: var(--nb-radius-pill);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    letter-spacing: var(--nb-ls-wider);
    text-transform: uppercase;
    color: var(--nb-color-text-muted);
    white-space: nowrap;
  }
  .sp-hero__chip--official {
    border-color: color-mix(in oklch, var(--nb-color-warning) 60%, transparent);
    background: var(--nb-color-warning-soft);
    color: var(--nb-color-warning-hover);
  }
  .sp-hero__loc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    white-space: nowrap;

    & > i { color: var(--nb-color-accent); font-size: 1.05rem; }
  }
  .sp-hero__online {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-success);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
  }
  .sp-hero__online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nb-color-success);
    animation: sp-online-pulse 2s var(--nb-ease-in-out-quart) infinite;
  }
  @keyframes sp-online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--nb-color-success) 45%, transparent); }
    50%      { box-shadow: 0 0 0 5px transparent; }
  }

  /* ---------- Stats integrees : rangee dense a filets ---------- */
  .sp-hero__stats {
    grid-area: stats;
    display: flex;
    align-items: stretch;
    margin-inline: calc(-1 * var(--nb-container-pad));
    padding-inline: var(--nb-container-pad);
    padding-top: var(--nb-space-3);
    border-top: 1px solid var(--nb-color-border-alt);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sp-hero__stats::-webkit-scrollbar { display: none; }
  @media (min-width: 768px) {
    .sp-hero__stats {
      margin-inline: 0;
      padding-inline: 0;
      padding-top: var(--nb-space-4);
    }
  }
  .sp-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    padding-inline: var(--nb-space-4);
    border-inline-start: 1px solid var(--nb-color-border-alt);
  }
  .sp-hero__stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .sp-hero__stat-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-md);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;

    & > i { color: var(--nb-color-star); font-size: 0.8em; }
  }
  .sp-hero__stat-value--success { color: var(--nb-color-success); }
  .sp-hero__stat-label {
    font-size: var(--nb-fs-2xs);
    color: var(--nb-color-text-faint);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    white-space: nowrap;
  }

  /* ---------- Actions ---------- */
  .sp-hero__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
  }
  @media (min-width: 768px) {
    .sp-hero__actions {
      flex-direction: column;
      align-items: stretch;
      min-width: 220px;
      align-self: center;
    }
  }
  .sp-hero__follow {
    flex: 1;
    justify-content: center;
    padding-block: var(--nb-space-3);
    font-size: var(--nb-fs-sm);
  }
  .sp-hero__chat {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
    min-width: 0;
    padding: var(--nb-space-3) var(--nb-space-4);
    background: var(--nb-color-accent-soft);
    border-radius: var(--nb-radius-pill);
    color: var(--nb-color-accent-hover);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    white-space: nowrap;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);

    & > i { font-size: 1.2em; }
  }
  .sp-hero__chat:hover { background: var(--nb-color-accent-soft-hover); }
  .sp-hero__chat:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }


  /* ===============================================
   * BANDEAU LIVE
   * =============================================== */
  .sp-live {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    flex-wrap: wrap;
    margin-top: var(--nb-space-3);
    padding: var(--nb-space-3) var(--nb-space-4);
    background: var(--nb-color-live-soft);
    border: 1px solid color-mix(in oklch, var(--nb-color-live) 35%, transparent);
    border-radius: var(--nb-radius-md);
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text);
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                box-shadow var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  a.sp-live:hover {
    border-color: var(--nb-color-live);
    box-shadow: 0 4px 16px var(--nb-color-live-glow);
  }
  .sp-live__title {
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
  .sp-live__viewers {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .sp-live__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    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;
  }
  .sp-live--scheduled {
    color: var(--nb-color-text-muted);
    background: var(--nb-color-surface-alt);
    border-color: var(--nb-color-border);

    & > i { color: var(--nb-color-accent); font-size: 1.15rem; }
  }


  /* ===============================================
   * DOCK MOBILE - suivre + chat, apparait au scroll
   * =============================================== */
  .sp-dock {
    position: fixed;
    inset-inline: 0;
    bottom: var(--nb-mobile-nav-h);
    z-index: var(--nb-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-2) var(--nb-space-3);
    padding-bottom: max(var(--nb-space-2), env(safe-area-inset-bottom));
    background: color-mix(in oklch, var(--nb-color-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--nb-color-border-alt);
    transform: translateY(calc(100% + var(--nb-mobile-nav-h)));
    transition: transform var(--nb-dur-slow) var(--nb-ease-out-expo);
  }
  .sp-dock.is-visible { transform: translateY(0); }
  @media (min-width: 1024px) {
    .sp-dock { display: none; }
  }
  .sp-dock__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);
  }
  .sp-dock__id {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    margin-inline-end: auto;
  }
  .sp-dock__name {
    font-family: var(--nb-font-heading);
    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;
  }
  .sp-dock__sub {
    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;
    white-space: nowrap;

    & > i { color: var(--nb-color-star); }
  }
  .sp-dock__follow { flex-shrink: 0; }
  .sp-dock__chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1.5px solid var(--nb-color-border);
    border-radius: 50%;
    background: var(--nb-color-surface);
    color: var(--nb-color-text);
    font-size: 1.3rem;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                border-color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .sp-dock__chat:hover { color: var(--nb-color-accent); border-color: var(--nb-color-accent); }
  .sp-dock__chat:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }


  /* ===============================================
   * NAV DE BOUTIQUE - fusionnee au hero, sticky, indicateur glissant
   * =============================================== */
  .sp-nav-sentinel { height: 1px; }

  .sp-nav {
    position: sticky;
    top: 0;
    z-index: var(--nb-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    margin-inline: calc(-1 * var(--nb-container-pad));
    padding-inline: var(--nb-container-pad);
    background: color-mix(in oklch, var(--nb-color-bg) 90%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--nb-color-border);
    transition: box-shadow var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  @media (min-width: 1024px) {
    .sp-nav { top: var(--nb-header-menu-h); }
  }
  .sp-nav.is-stuck {
    box-shadow: var(--nb-shadow-sm);
  }

  /* Identite compressee - revelee quand la nav est collee */
  .sp-nav__mini {
    display: none;
    align-items: center;
    gap: var(--nb-space-2);
    min-width: 0;
    opacity: 0;
    translate: -8px 0;
    transition: opacity var(--nb-dur-normal) var(--nb-ease-out-quart),
                translate var(--nb-dur-normal) var(--nb-ease-out-expo);
  }
  @media (min-width: 768px) {
    .sp-nav__mini { display: inline-flex; }
  }
  .sp-nav.is-stuck .sp-nav__mini {
    opacity: 1;
    translate: 0 0;
  }
  .sp-nav__mini-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--nb-radius-sm);
    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-2xs);
  }
  .sp-nav__mini-name {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  .sp-nav__tabs {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sp-nav__tabs::-webkit-scrollbar { display: none; }

  .sp-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-shrink: 0;
    padding: var(--nb-space-4) var(--nb-space-3);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-muted);
    white-space: nowrap;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);

    & > i { font-size: 1.2em; }
  }
  @media (min-width: 768px) {
    .sp-nav__tab { padding-inline: var(--nb-space-4); }
  }
  .sp-nav__tab:hover { color: var(--nb-color-text); }
  .sp-nav__tab.is-active {
    color: var(--nb-color-text-strong);

    & > i { color: var(--nb-color-accent); }
  }
  .sp-nav__tab:focus-visible { outline: none; box-shadow: inset var(--nb-focus-ring); }
  .sp-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: var(--nb-radius-pill);
    background: var(--nb-color-surface-sunk);
    color: var(--nb-color-text-muted);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .sp-nav__tab.is-active .sp-nav__count {
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
  }

  /* Indicateur glissant pilote par JS (left / width) */
  .sp-nav__indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--nb-color-accent);
    border-radius: var(--nb-radius-pill) var(--nb-radius-pill) 0 0;
    transition: left var(--nb-dur-slow) var(--nb-ease-out-expo),
                width var(--nb-dur-slow) var(--nb-ease-out-expo);
  }

  .sp-nav__follow {
    display: none;
    flex-shrink: 0;
    opacity: 0;
    translate: 8px 0;
    transition: opacity var(--nb-dur-normal) var(--nb-ease-out-quart),
                translate var(--nb-dur-normal) var(--nb-ease-out-expo);
  }
  @media (min-width: 768px) {
    .sp-nav__follow { display: inline-flex; }
    .sp-nav.is-stuck .sp-nav__follow {
      opacity: 1;
      translate: 0 0;
      pointer-events: auto;
    }
    .sp-nav:not(.is-stuck) .sp-nav__follow { pointer-events: none; }
  }


  /* ===============================================
   * PANNEAU PRODUITS : layout sidebar + grille
   * =============================================== */
  .sp-products {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-space-5);
  }
  @media (min-width: 1024px) {
    .sp-products {
      grid-template-columns: 264px minmax(0, 1fr);
      gap: var(--nb-space-8);
      align-items: start;
    }
  }
  .sp-products__main { min-width: 0; }

  /* ---------- Facettes : <dialog> mobile / sidebar sticky desktop ---------- */
  .sp-filters__body {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-5);
  }

  .sp-facet {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
  }
  .sp-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);
  }
  .sp-facet__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sp-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);
  }
  .sp-facet__option:hover { background: var(--nb-color-surface-hover); }
  .sp-facet__option.is-active {
    background: var(--nb-color-accent-soft);
    color: var(--nb-color-accent-hover);
    font-weight: var(--nb-fw-bold);
  }
  .sp-facet__option:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }
  .sp-facet__option.is-zero {
    opacity: 0.38;
    pointer-events: none;
  }
  .sp-facet__option-label {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    min-width: 0;
  }
  .sp-facet__star { color: var(--nb-color-star); }
  .sp-facet__deal-icon { color: var(--nb-color-success); }
  .sp-facet__deal-icon--flash { color: var(--nb-color-live); }
  .sp-facet__option-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);
  }
  .sp-facet__option.is-active .sp-facet__option-count { color: inherit; }

  .sp-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);
  }
  .sp-filters__reset:hover { color: var(--nb-color-danger); border-color: var(--nb-color-danger); }

  .sp-side-contact {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    padding: var(--nb-space-4);
    background: var(--nb-color-accent-soft);
    border-radius: var(--nb-radius-md);
  }
  .sp-side-contact__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
  }
  .sp-side-contact__sub {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
  }

  /* Mobile : bottom-sheet <dialog> */
  @media (max-width: 1023px) {
    .sp-filters {
      position: fixed;
      inset: auto 0 0 0;
      width: 100%;
      max-width: none;
      max-height: 86dvh;
      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);
    }
    .sp-filters[open] {
      display: flex;
      animation: sp-sheet-in var(--nb-dur-slow) var(--nb-ease-out-expo);
    }
    .sp-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);
    }
    .sp-filters__title {
      font-family: var(--nb-font-heading);
      font-size: var(--nb-fs-md);
      font-weight: var(--nb-fw-heavy);
    }
    .sp-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;
    }
    .sp-filters__body {
      flex: 1;
      overflow-y: auto;
      padding: var(--nb-space-4) var(--nb-space-5);
    }
    .sp-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);
    }
    .sp-filters__apply { flex: 1; }
    .sp-side-contact { display: none; }
  }
  @keyframes sp-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) {
    .sp-filters,
    .sp-filters:not([open]) {
      display: flex;
      flex-direction: column;
      gap: var(--nb-space-5);
      position: sticky;
      top: calc(var(--nb-header-menu-h) + 74px);
      inset-inline: auto;
      width: auto;
      max-height: calc(100dvh - var(--nb-header-menu-h) - 90px);
      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;
    }
    .sp-filters__head,
    .sp-filters__foot { display: none; }
  }

  /* ---------- Chips de filtres actifs ---------- */
  .sp-active {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
    margin-top: var(--nb-space-3);
  }
  .sp-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);
  }
  .sp-active__chips {
    display: contents;
  }
  .sp-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);
  }
  .sp-active__chip:hover { background: var(--nb-color-accent-soft-hover); }
  .sp-active__chip > i { font-size: 0.95em; }
  .sp-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);
  }
  .sp-active__reset:hover { color: var(--nb-color-danger); }

  /* ---------- Bouton Filtrer (mobile) ---------- */
  .sp-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; }
  }
  .sp-toolbar__filters:hover { border-color: var(--nb-color-border-hover); }
  .sp-toolbar__filters:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }
  @media (min-width: 1024px) {
    .sp-toolbar__filters { display: none; }
  }
  .sp-toolbar__filters-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;
  }

  .sp-panel {
    display: none;
    padding-top: var(--nb-space-5);
  }
  .sp-panel.is-active { display: block; }


  /* ===============================================
   * PANNEAU PRODUITS
   * =============================================== */
  .sp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
  }
  .sp-toolbar__search {
    position: relative;
    flex: 1;
    min-width: 0;

    & > 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;
    }
  }
  .sp-toolbar__search-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);
  }
  .sp-toolbar__search-input:hover { background: color-mix(in oklch, var(--nb-color-surface-sunk) 70%, var(--nb-color-surface)); }
  .sp-toolbar__search-input:focus-visible {
    outline: none;
    background: var(--nb-color-surface);
    border-color: var(--nb-color-accent);
    box-shadow: var(--nb-focus-ring);
  }
  .sp-toolbar__sort { flex-shrink: 0; }

  .sp-grid__count {
    margin-top: var(--nb-space-3);
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;
  }

  .sp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nb-space-2);
    margin-top: var(--nb-space-3);
  }
  @media (min-width: 480px) {
    .sp-grid { gap: var(--nb-space-3); }
  }
  @media (min-width: 768px) {
    .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .sp-grid { gap: var(--nb-space-4); }
  }
  @media (min-width: 1440px) {
    .sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 1920px) {
    .sp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
  .sp-grid__card.is-filtered { display: none; }

  .sp-grid__empty {
    padding: var(--nb-space-12) var(--nb-space-4);
    text-align: center;
    color: var(--nb-color-text-faint);
    font-size: var(--nb-fs-sm);
  }


  /* ===============================================
   * PANNEAU A PROPOS + CARTE
   * =============================================== */
  .sp-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-space-6);
  }
  @media (min-width: 1024px) {
    .sp-about {
      grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
      gap: var(--nb-space-10);
      align-items: start;
    }
  }

  .sp-about__main {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-6);
  }
  .sp-about__block {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
  }
  .sp-about__text {
    font-size: var(--nb-fs-sm);
    line-height: var(--nb-lh-relaxed);
    color: var(--nb-color-text);
    max-width: 72ch;
  }
  .sp-about__info {
    display: flex;
    flex-direction: column;
  }
  .sp-about__info-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nb-space-3);
    padding-block: var(--nb-space-2);
    font-size: var(--nb-fs-sm);

    & > dt { color: var(--nb-color-text-muted); }
    & > dd {
      font-weight: var(--nb-fw-semibold);
      color: var(--nb-color-text-strong);
      text-align: end;
    }
  }
  .sp-about__info-row + .sp-about__info-row { border-top: 1px dashed var(--nb-color-border-alt); }

  .sp-about__chat {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);

    & > li {
      display: flex;
      align-items: center;
      gap: var(--nb-space-2);
      font-size: var(--nb-fs-sm);
    }
    & > li > i { color: var(--nb-color-accent); font-size: 1.1rem; }
  }

  .sp-about__social {
    display: flex;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
  }
  .sp-about__social-item {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2) var(--nb-space-3);
    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);
    color: var(--nb-color-text);

    & > i { font-size: 1.15rem; }
  }
  .sp-about__social-item--whatsapp  > i { color: oklch(60% 0.16 150); }
  .sp-about__social-item--facebook  > i { color: oklch(55% 0.17 258); }
  .sp-about__social-item--instagram > i { color: oklch(58% 0.21 350); }
  .sp-about__social-item--tiktok    > i { color: var(--nb-color-text-strong); }

  .sp-about__map-col {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
  }
  .sp-map {
    height: 280px;
    border-radius: var(--nb-radius-md);
    border: 1px solid var(--nb-color-border);
    background: var(--nb-color-surface-alt);
    overflow: hidden;
    isolation: isolate;
    z-index: var(--nb-z-base);
  }
  @media (min-width: 768px) {
    .sp-map { height: 380px; }
  }
  .sp-map__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nb-space-3);
    flex-wrap: wrap;
  }
  .sp-map__address {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);

    & > i { color: var(--nb-color-danger); font-size: 1.15rem; }
  }
  .sp-map__note {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-faint);
    line-height: var(--nb-lh-snug);
  }

  /* Marqueur maison (divIcon Leaflet) - plat, sans image */
  .sp-map__marker {
    position: relative;
    width: 34px;
    height: 34px;
    background: var(--nb-color-accent);
    border: 3px solid var(--nb-color-surface);
    border-radius: 50% 50% 50% 4px;
    rotate: -45deg;
    box-shadow: var(--nb-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sp-map__marker::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nb-color-surface);
  }
  .sp-map .leaflet-popup-content-wrapper {
    border-radius: var(--nb-radius-md);
    box-shadow: var(--nb-shadow-lg);
    font-family: var(--nb-font-body);
  }
  .sp-map .leaflet-popup-content {
    margin: var(--nb-space-3) var(--nb-space-4);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
  }


  /* ===============================================
   * PANNEAU AVIS
   * =============================================== */
  .sp-reviews {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-4);
    max-width: 860px;
  }
  .sp-reviews__summary {
    display: flex;
    align-items: baseline;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
  }
  .sp-reviews__average {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-3xl);
    font-weight: var(--nb-fw-heavy);
    line-height: 1;
    color: var(--nb-color-text-strong);
    font-variant-numeric: tabular-nums;
  }
  .sp-reviews__count {
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
  }
  .sp-reviews__list {
    display: flex;
    flex-direction: column;
  }
  .sp-reviews__empty {
    padding: var(--nb-space-10);
    text-align: center;
    color: var(--nb-color-text-faint);
    font-size: var(--nb-fs-sm);
  }

  .sp-review {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    padding-block: var(--nb-space-4);
    border-bottom: 1px solid var(--nb-color-border-alt);
  }
  .sp-review__head {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
  }
  .sp-review__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--nb-color-surface-alt);
    color: var(--nb-color-text-muted);
    font-weight: var(--nb-fw-bold);
    font-family: var(--nb-font-heading);
  }
  .sp-review__who {
    display: flex;
    flex-direction: column;
    margin-inline-end: auto;
    min-width: 0;
  }
  .sp-review__name {
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-strong);
  }
  .sp-review__date {
    font-size: var(--nb-fs-2xs);
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;
  }
  .sp-review__title {
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-strong);
  }
  .sp-review__content {
    font-size: var(--nb-fs-sm);
    line-height: var(--nb-lh-relaxed);
    max-width: 72ch;
  }
  .sp-review__product {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    align-self: flex-start;
    padding: var(--nb-space-1) var(--nb-space-3) var(--nb-space-1) var(--nb-space-1);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-pill);
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                color var(--nb-dur-fast) var(--nb-ease-standard);

    & > img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  .sp-review__product:hover {
    border-color: var(--nb-color-accent);
    color: var(--nb-color-accent);
  }


  /* ===============================================
   * PANNEAU VIDEOS
   * =============================================== */
  .sp-videos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nb-space-3);
  }
  @media (min-width: 768px) {
    .sp-videos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 1280px) {
    .sp-videos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--nb-space-4); }
  }

  .sp-video__link {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
  }
  .sp-video__media {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--nb-radius-md);
    overflow: hidden;
    background: var(--nb-color-surface-sunk);

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--nb-dur-slow) var(--nb-ease-out-quart);
    }
  }
  .sp-video__link:hover .sp-video__media > img { transform: scale(1.05); }
  .sp-video__duration {
    position: absolute;
    right: var(--nb-space-2);
    bottom: var(--nb-space-2);
    padding: 2px 6px;
    border-radius: var(--nb-radius-xs);
    background: oklch(15% 0.01 60 / 0.75);
    color: white;
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .sp-video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 44px;
    height: 44px;
    font-size: 2.75rem;
    color: oklch(100% 0 0 / 0.9);
    filter: drop-shadow(0 2px 8px oklch(15% 0.01 60 / 0.5));
    transition: transform var(--nb-dur-fast) var(--nb-ease-spring);
  }
  .sp-video__link:hover .sp-video__play { transform: scale(1.12); }
  .sp-video__title {
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text);
    line-height: var(--nb-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sp-video__stats {
    display: flex;
    gap: var(--nb-space-3);
    font-size: var(--nb-fs-2xs);
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;

    & > span {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
  }
}