/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status / -badges),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/*
 * Habillage Nacre : mise en page et composants façon Lumen.
 * Jetons, icônes et mesures repris de Lumen, Copyright Ledger SAS,
 * sous licence Apache 2.0 (http://www.apache.org/licenses/LICENSE-2.0).
 * Modifié : transposé en CSS pour un thème SellAuth.
 */

/* ── Jetons ──────────────────────────────────────────────────────────────── */

:root,
[data-scheme="dark"] {
  --nc-canvas: #000000;
  --nc-surface: #151515;
  --nc-surface-hover: #1f1f1f;
  --nc-surface-pressed: #3c3c3c;
  --nc-surface-t: rgba(255, 255, 255, 0.08);
  --nc-muted: #1f1f1f;
  --nc-muted-hover: #3c3c3c;
  --nc-muted-pressed: #565656;
  --nc-muted-t: rgba(255, 255, 255, 0.12);
  --nc-muted-t-hover: rgba(255, 255, 255, 0.2);
  --nc-muted-t-pressed: rgba(255, 255, 255, 0.3);
  --nc-base-t-hover: rgba(255, 255, 255, 0.1);
  --nc-base-t-pressed: rgba(255, 255, 255, 0.2);
  --nc-interactive: #ffffff;
  --nc-interactive-hover: #e1e1e1;
  --nc-interactive-pressed: #c3c3c3;
  --nc-on-interactive: #000000;
  --nc-text: #ffffff;
  --nc-text-muted: #9c9c9c;
  --nc-text-disabled: #565656;
  --nc-accent: #d4a0ff;
  --nc-accent-hover: #ddb3ff;
  --nc-on-accent: #000000;
  --nc-success: #70cb5d;
  --nc-warning: #ffbd42;
  --nc-error: #ff8486;
  --nc-error-t: rgba(255, 132, 134, 0.14);
  --nc-warning-t: rgba(255, 189, 66, 0.12);
  --nc-accent-t: rgba(212, 160, 255, 0.12);
  --nc-blue: #8b9bec;
  --nc-overlay: rgba(0, 0, 0, 0.7);
  --nc-ring: rgba(212, 160, 255, 0.9);
}

[data-scheme="light"] {
  --nc-canvas: #ffffff;
  --nc-surface: #f7f7f7;
  --nc-surface-hover: #f1f1f1;
  --nc-surface-pressed: #e1e1e1;
  --nc-surface-t: rgba(0, 0, 0, 0.04);
  --nc-muted: #f1f1f1;
  --nc-muted-hover: #e1e1e1;
  --nc-muted-pressed: #c3c3c3;
  --nc-muted-t: rgba(0, 0, 0, 0.06);
  --nc-muted-t-hover: rgba(0, 0, 0, 0.1);
  --nc-muted-t-pressed: rgba(0, 0, 0, 0.16);
  --nc-base-t-hover: rgba(0, 0, 0, 0.05);
  --nc-base-t-pressed: rgba(0, 0, 0, 0.1);
  --nc-interactive: #000000;
  --nc-interactive-hover: #3c3c3c;
  --nc-interactive-pressed: #565656;
  --nc-on-interactive: #ffffff;
  --nc-text: #000000;
  --nc-text-muted: #6a6a6a;
  --nc-text-disabled: #c3c3c3;
  --nc-accent: #9f3bf5;
  --nc-accent-hover: #8a2ad9;
  --nc-on-accent: #ffffff;
  --nc-success: #2e8b1f;
  --nc-warning: #b36b00;
  --nc-error: #d92d33;
  --nc-error-t: rgba(217, 45, 51, 0.1);
  --nc-warning-t: rgba(179, 107, 0, 0.1);
  --nc-accent-t: rgba(159, 59, 245, 0.1);
  --nc-overlay: rgba(0, 0, 0, 0.4);
  --nc-ring: rgba(159, 59, 245, 0.8);
}

html,
body {
  background: var(--nc-canvas);
  color: var(--nc-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--nc-accent);
  color: var(--nc-on-accent);
}

.nc-only-mobile { display: inline-flex; }
.nc-only-desktop { display: none !important; }
@media (min-width: 1024px) {
  .nc-only-mobile { display: none !important; }
  .nc-only-desktop { display: inline-flex !important; }
}

/* ── Icônes Lumen ────────────────────────────────────────────────────────── */

.nc-icon {
  flex-shrink: 0;
  display: block;
  stroke-width: 1.2;
}
.nc-icon[width="16"] { stroke-width: 1.3; }
.nc-icon [stroke] { stroke-width: inherit; }

/* ── Mise en page du site ────────────────────────────────────────────────── */

.nc-app {
  background: var(--nc-canvas);
}

.nc-app .wrap {
  padding-inline: 20px;
}
@media (min-width: 1024px) {
  .nc-app .wrap { padding-inline: 40px; }
}

.nc-header {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--nc-muted-t);
}
[data-scheme="light"] .nc-header { background: rgba(255, 255, 255, 0.8); }

/* Barre de navigation */
.nc-nav { position: relative; }

.nc-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.nc-bar-lead {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nc-bar-links {
  display: none;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
@media (min-width: 1024px) {
  .nc-bar-links { display: flex; }
}

.nc-bar-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
@media (min-width: 1024px) {
  .nc-bar-trail { margin-left: 0; }
}

.nc-navlink {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 9999px;
  color: var(--nc-text-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nc-navlink:hover { color: var(--nc-text); background: var(--nc-base-t-hover); }
.nc-navlink.is-active { color: var(--nc-text); background: var(--nc-muted-t); }

.nc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--nc-text);
  text-decoration: none;
}
.nc-brand-logo {
  height: 32px;
  width: auto;
  border-radius: 8px;
}
.nc-brand-name {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -1px;
  font-weight: 700;
  color: var(--nc-text);
  white-space: nowrap;
}

/* Liens du menu mobile */
.nc-side-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nc-side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--nc-text-muted);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nc-side-item:hover { background: var(--nc-base-t-hover); color: var(--nc-text); }
.nc-side-item.is-active { background: var(--nc-muted-t); color: var(--nc-text); }
.nc-side-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* IconButton gris, rond */
.nc-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--nc-muted);
  color: var(--nc-text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.nc-icon-btn:hover { background: var(--nc-muted-hover); }
.nc-icon-btn:active { background: var(--nc-muted-pressed); }
.nc-icon-btn--sm { width: 32px; height: 32px; }
.nc-icon-btn--card {
  background: var(--nc-muted-t);
}
.group:hover .nc-icon-btn--card {
  background: var(--nc-interactive);
  color: var(--nc-on-interactive);
}

.nc-dot-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--nc-accent);
  color: var(--nc-on-accent);
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
}

.nc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--nc-accent), var(--nc-blue));
  color: #000;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.nc-avatar--guest {
  background: var(--nc-muted);
  color: var(--nc-text);
}
.nc-avatar--guest:hover { background: var(--nc-muted-hover); }

/* Puce (devise, langue) et menu déroulant */
.currency-selector,
.language-selector {
  position: relative;
}

.nc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 9999px;
  background: var(--nc-muted);
  color: var(--nc-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.nc-chip:hover { background: var(--nc-muted-hover); }
.nc-chip-chevron {
  display: inline-flex;
  color: var(--nc-text-muted);
  transition: transform 0.2s ease;
}
.nc-chip-chevron.is-open { transform: rotate(180deg); }

.nc-menu {
  position: absolute;
  right: 0;
  z-index: 40;
  width: 208px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 8px;
  background: var(--nc-muted);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  scrollbar-width: none;
}
.nc-menu--down { top: calc(100% + 8px); }
.nc-menu--up { bottom: calc(100% + 8px); }

.nc-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nc-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nc-menu-item:hover { background: var(--nc-muted-t-hover); }
.nc-menu-item.is-selected { background: var(--nc-muted-t); }
.nc-menu-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--nc-muted-t);
  color: var(--nc-text-muted);
  font-size: 12px;
  font-weight: 600;
}
.nc-menu-hint {
  margin-left: auto;
  color: var(--nc-text-muted);
  font-size: 12px;
  font-weight: 400;
}
.nc-menu-check {
  margin-left: auto;
  display: inline-flex;
  color: var(--nc-text);
}

/* Menu mobile */
.nc-mobile-menu {
  margin: 0 16px 16px;
  padding: 16px;
  border-radius: 24px;
  background: var(--nc-surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .nc-mobile-menu { display: none !important; }
}
.nc-mobile-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--nc-muted-t);
}
.nc-mobile-pickers {
  display: flex;
  gap: 8px;
}
.nc-mobile-pickers .nc-menu { left: 0; right: auto; }

/* Bandeau d'annonce */
.sa-announcement,
.nc-header .announcement {
  background: linear-gradient(90deg, rgba(212, 160, 255, 0.18), rgba(139, 155, 236, 0.18)) !important;
  color: var(--nc-text) !important;
  font-weight: 600;
}

/* Fil d'Ariane */
.nc-crumbs {
  padding-top: 0;
  padding-bottom: 8px;
}
.nc-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nc-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
}
.nc-crumbs a {
  color: var(--nc-text-muted);
  text-decoration: none;
  border-radius: 8px;
  padding: 2px 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nc-crumbs a:hover {
  background: var(--nc-base-t-hover);
  color: var(--nc-text);
}
.nc-crumbs [aria-current] {
  color: var(--nc-text);
  font-weight: 600;
  padding: 2px 6px;
}
.nc-crumbs-sep {
  display: inline-flex;
  color: var(--nc-text-disabled);
}

/* ── Boutons Lumen ───────────────────────────────────────────────────────── */

.nc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nc-buttons--center { justify-content: center; }
.nc-buttons--right { justify-content: flex-end; }

.nc-btn,
.nc-app .sa-btn.nc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nc-btn:disabled,
.nc-btn[aria-disabled="true"] {
  opacity: 1;
  background: var(--nc-muted) !important;
  color: var(--nc-text-disabled) !important;
  cursor: not-allowed;
}

.nc-btn--sm { padding: 10px 16px; font-size: 14px; line-height: 20px; }
.nc-btn--md { padding: 12px 16px; font-size: 16px; line-height: 24px; }
.nc-btn--lg { padding: 16px; font-size: 16px; line-height: 24px; }
.nc-btn--full { width: 100%; }

.nc-btn--base { background: var(--nc-interactive); color: var(--nc-on-interactive); }
.nc-btn--base:hover { background: var(--nc-interactive-hover); }
.nc-btn--base:active { background: var(--nc-interactive-pressed); }

.nc-btn--gray { background: var(--nc-muted); color: var(--nc-text); }
.nc-btn--gray:hover { background: var(--nc-muted-hover); }
.nc-btn--gray:active { background: var(--nc-muted-pressed); }

.nc-btn--no-background { background: transparent; color: var(--nc-text); }
.nc-btn--no-background:hover { background: var(--nc-base-t-hover); }
.nc-btn--no-background:active { background: var(--nc-base-t-pressed); }

.nc-btn--danger { color: var(--nc-error); }
.nc-btn--danger:hover { background: var(--nc-error-t); }

/* ── Titres de section (Subheader) ───────────────────────────────────────── */

.nc-subheader {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.nc-subheader--center { align-items: center; text-align: center; }
.nc-subheader--right { align-items: flex-end; text-align: right; }

.nc-subheader-eyebrow {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--nc-text-muted);
}
.nc-subheader-title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--nc-text);
}
.nc-subheader--h1 .nc-subheader-title {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -1.5px;
}
.nc-subheader--display .nc-subheader-title {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -2px;
}
.nc-subheader-subtitle {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
}

/* ── Hero du site ────────────────────────────────────────────────────────── */

.nc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 0 !important;
}

.nc-hero-halo {
  position: absolute;
  z-index: -1;
  inset: -10% -10% auto auto;
  width: 900px;
  height: 640px;
  max-width: 100%;
  pointer-events: none;
  background: linear-gradient(200deg, var(--nc-accent) 10%, var(--nc-blue) 60%, transparent 90%);
  -webkit-mask-image:
    radial-gradient(circle at center, #000 1.2px, transparent 1.7px),
    radial-gradient(ellipse 60% 60% at 70% 40%, #000 0%, rgba(0, 0, 0, 0.4) 45%, transparent 75%);
  -webkit-mask-size: 6px 6px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at center, #000 1.2px, transparent 1.7px),
    radial-gradient(ellipse 60% 60% at 70% 40%, #000 0%, rgba(0, 0, 0, 0.4) 45%, transparent 75%);
  mask-size: 6px 6px, 100% 100%;
  mask-composite: intersect;
  opacity: 0.6;
}

.nc-hero-card {
  position: relative;
  padding: 48px 0 32px;
}
@media (min-width: 1024px) {
  .nc-hero-card { padding: 88px 0 64px; }
}
.nc-hero--small .nc-hero-card { padding-block: 40px; }
.nc-hero--large .nc-hero-card { padding-block: 120px 96px; }

.nc-hero-card--image {
  overflow: hidden;
  isolation: isolate;
  border-radius: 32px;
  padding: 72px 24px;
  margin-top: 24px;
  color: #fff;
}
.nc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nc-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.85));
}

.nc-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.nc-hero-text--center { align-items: center; text-align: center; margin-inline: auto; max-width: 820px; }
.nc-hero-text--right { align-items: flex-end; text-align: right; }

.nc-hero-title {
  margin: 0;
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -2px;
  font-weight: 600;
  color: var(--nc-text);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .nc-hero-title { font-size: 64px; line-height: 68px; letter-spacing: -3px; }
}
@media (min-width: 1280px) {
  .nc-hero-title { font-size: 76px; line-height: 80px; letter-spacing: -3.5px; }
}
.nc-hero-title .mk {
  background: linear-gradient(100deg, var(--nc-accent), var(--nc-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nc-hero-subtitle {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 28px;
  color: var(--nc-text-muted);
}
.nc-hero-actions { margin-top: 8px; }
.nc-hero-actions .nc-btn { padding: 16px 28px; font-size: 16px; line-height: 24px; }
.nc-hero-search { width: 100%; max-width: 440px; }

.nc-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.nc-hero-trust--center { justify-content: center; margin-top: 16px; }
.nc-hero-trust li,
.nc-hero-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
}
.nc-hero-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: rgba(112, 203, 93, 0.16);
  color: var(--nc-success);
}
.nc-hero-trust > span svg { color: var(--nc-success); width: 14px; height: 14px; }

.nc-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.nc-hero-split {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .nc-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .nc-hero-split--reverse > :first-child { order: 2; }
}
.nc-hero-media-frame {
  display: block;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.nc-hero-spot .nc-card { background: var(--nc-surface); }

/* Pile de cartes cadeaux */
.nc-stack-visual {
  position: relative;
  width: 90%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1.25;
}
.nc-stack-glow {
  position: absolute;
  inset: 15% 10%;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(212, 160, 255, 0.35), rgba(139, 155, 236, 0.15) 60%, transparent);
  filter: blur(40px);
}
.nc-stack-card {
  position: absolute;
  width: 72%;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nc-stack-card .nc-gc { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
.nc-stack-card--0 { left: 0; top: 6%; transform: rotate(-10deg); }
.nc-stack-card--1 { left: 14%; top: 22%; transform: rotate(-2deg); }
.nc-stack-card--2 { left: 28%; top: 40%; transform: rotate(6deg); }
.nc-stack-visual:hover .nc-stack-card--0 { transform: rotate(-14deg) translate(-12px, -10px); }
.nc-stack-visual:hover .nc-stack-card--2 { transform: rotate(10deg) translate(12px, 10px); }

/* Carte cadeau */
.nc-gc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.586;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7% 7.5%;
  border-radius: 20px;
  color: #000;
  container-type: inline-size;
}
.nc-gc--fill { aspect-ratio: auto; height: 100%; min-height: 100%; border-radius: inherit; }
.nc-gc--violet { background: linear-gradient(135deg, #e7c9ff 0%, #d4a0ff 40%, #8b9bec 100%); }
.nc-gc--blue { background: linear-gradient(135deg, #c7d0ff 0%, #8b9bec 45%, #5161c9 100%); }
.nc-gc--mono { background: linear-gradient(145deg, #2a2a2a 0%, #151515 55%, #0b0b0b 100%); color: #fff; }
.nc-gc--image { padding: 0; background: var(--nc-muted); }
.nc-gc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nc-gc-dots {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: currentColor;
  opacity: 0.18;
  -webkit-mask-image:
    radial-gradient(circle at center, #000 1px, transparent 1.5px),
    radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, transparent 70%);
  -webkit-mask-size: 6px 6px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at center, #000 1px, transparent 1.5px),
    radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, transparent 70%);
  mask-size: 6px 6px, 100% 100%;
  mask-composite: intersect;
}
.nc-gc--mono .nc-gc-dots {
  background: linear-gradient(200deg, var(--nc-accent), var(--nc-blue));
  opacity: 0.7;
}

.nc-gc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nc-gc-brand {
  font-size: clamp(14px, 7cqi, 26px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-gc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 11cqi, 40px);
  height: clamp(28px, 11cqi, 40px);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.12);
}
.nc-gc--mono .nc-gc-mark { background: rgba(255, 255, 255, 0.12); }

.nc-gc-chip {
  width: 15%;
  aspect-ratio: 1.3;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.25));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.nc-gc--mono .nc-gc-chip { background: linear-gradient(135deg, #d4a0ff, #8b9bec); }

.nc-gc-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.nc-gc-title {
  min-width: 0;
  font-size: clamp(11px, 4.6cqi, 16px);
  line-height: 1.3;
  font-weight: 600;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-gc-amount {
  flex-shrink: 0;
  font-size: clamp(16px, 9cqi, 34px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.nc-gc-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.9s ease;
}
.group:hover .nc-gc-shine,
.nc-stack-visual:hover .nc-gc-shine { transform: translateX(120%); }

/* Galerie produit sans image */
.nc-gallery-empty {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12% 10%;
  border-radius: 24px;
  background: var(--nc-surface);
  overflow: hidden;
}
.nc-gallery-empty .nc-stack-glow { z-index: -1; }
.nc-gallery-card {
  max-width: 440px;
  transform: rotate(-4deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

/* Cartes fantômes quand la boutique est vide */
.nc-ghost-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .nc-ghost-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.nc-ghost-card {
  aspect-ratio: 1.586;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0.35;
}
.nc-ghost-text {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
}

/* ── Étiquettes (Tag) ────────────────────────────────────────────────────── */

.nc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--nc-muted-t);
  color: var(--nc-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-decoration: none;
}
.nc-tag--link { transition: background-color 0.15s ease; }
.nc-tag--link:hover { background: var(--nc-muted-t-hover); }
.nc-tag--solid { background: var(--nc-accent); color: var(--nc-on-accent); }
.nc-tag--accent { background: var(--nc-accent-t); color: var(--nc-accent); }
.nc-tag-badge {
  padding: 0 6px;
  border-radius: 4px;
  background: var(--nc-accent);
  color: var(--nc-on-accent);
}

.nc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-badges--float { position: absolute; top: 12px; z-index: 2; }
.nc-badges--left { left: 12px; }
.nc-badges--right { right: 12px; }

.nc-label {
  font-size: 12px;
  line-height: 16px;
  color: var(--nc-text-muted);
}
.nc-label--group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0 4px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Cartes (Card) ───────────────────────────────────────────────────────── */

.nc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--nc-surface);
  color: var(--nc-text);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
a.nc-card:hover,
button.nc-card:hover { background: var(--nc-surface-hover); }
a.nc-card:active { background: var(--nc-surface-pressed); }
.nc-card--static:hover { background: var(--nc-surface); }
.nc-card--pad { padding: 16px; }
@media (min-width: 768px) {
  .nc-card--pad { padding: 20px; }
}

.nc-card-media-rounded {
  margin: 8px 8px 0;
  border-radius: 12px;
}
.nc-card .sa-product-card-media img { display: block; }

.nc-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.nc-card--tile .nc-card-body { padding: 12px 12px 12px 16px; }

.nc-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nc-card-row--foot { align-items: flex-end; }

.nc-card-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nc-card-trailing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.nc-card-title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--nc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-card--tile .nc-card-title { font-size: 16px; line-height: 24px; }

.nc-card-heading {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: var(--nc-text);
}
.nc-mb { margin-bottom: 12px; }

.nc-price {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--nc-text);
}
.nc-card--tile .nc-price { font-size: 20px; line-height: 28px; letter-spacing: -1px; }
.nc-price-slash {
  font-size: 12px;
  line-height: 16px;
  color: var(--nc-text-muted);
}
.nc-stock {
  margin: 0;
  font-size: 12px !important;
  line-height: 16px;
}
.nc-stock svg { width: 12px; height: 12px; }

.nc-card-status { position: absolute; top: 12px; z-index: 2; }
.nc-card-status--left { left: 12px; }
.nc-card-status--right { right: 12px; }

.nc-card--overlay .sa-product-card-media img { min-height: 220px; object-fit: cover; }
.nc-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 40px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
}
.nc-card--overlay .nc-card-title { color: #fff; font-size: 16px; line-height: 24px; }
.nc-card--overlay .nc-price { color: #fff; }
.nc-card-overlay-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.nc-card-badges-inline { margin-bottom: 0; }

.nc-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--nc-muted-t);
  color: var(--nc-text-muted);
}

.nc-spot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--nc-muted-t);
  color: var(--nc-text);
}
.nc-spot--lg { width: 56px; height: 56px; }

/* Grilles de produits */
.sa-products-items,
.sa-page-products-items {
  gap: 16px !important;
}

/* ── Listes (ListItem) ───────────────────────────────────────────────────── */

.nc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nc-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 8px;
  border-radius: 12px;
  color: var(--nc-text);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.nc-list-item:hover { background: var(--nc-base-t-hover); }
.nc-list-item:active { background: var(--nc-base-t-pressed); }
.sa-product-card--compact-row.nc-list-item {
  background: var(--nc-surface);
  padding: 8px 12px 8px 8px;
}
.sa-product-card--compact-row.nc-list-item:hover { background: var(--nc-surface-hover); }

.nc-list-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--nc-muted-t);
}
.nc-list-thumb .sa-product-card-media,
.nc-list-thumb img,
.nc-list-thumb .nc-media-empty {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  object-fit: cover;
}
.nc-list-thumb .nc-spot { width: 32px; height: 32px; background: transparent; }

.nc-list-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nc-list-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nc-list-title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--nc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-list-desc {
  margin: 0;
  font-size: 12px !important;
  line-height: 16px;
  color: var(--nc-text-muted);
}
.nc-list-trailing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nc-list-chevron { display: inline-flex; color: var(--nc-text-muted); }
.nc-list-amount {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--nc-text);
}

/* ── Champs (TextInput) ──────────────────────────────────────────────────── */

.nc-app .input,
.sa-search-modal .input,
.sa-cart-panel .input {
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--nc-muted);
  color: var(--nc-text);
  font-size: 16px;
  line-height: 24px;
  box-shadow: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.nc-app .input:hover { background: var(--nc-muted-hover); }
.nc-app .input:focus,
.nc-app .input:focus-visible {
  outline: none;
  background: var(--nc-muted);
  box-shadow: 0 0 0 2px var(--nc-ring);
}
.nc-app .input::placeholder { color: var(--nc-text-muted); }
.nc-app .input.pl-9 { padding-left: 40px; }
.nc-app .input.pr-8 { padding-right: 36px; }
.nc-app textarea.input { height: auto; min-height: 96px; padding: 12px 16px; }
.nc-app .sa-searchbar .input { border-radius: 9999px; background: var(--nc-muted-t); }

.nc-app .input-stepper,
.nc-stepper {
  height: 40px;
  border: 0;
  border-radius: 9999px;
  background: var(--nc-muted);
  box-shadow: none;
}
.nc-app .input-stepper:focus-within { box-shadow: 0 0 0 2px var(--nc-ring); }
.nc-app .input-stepper > button {
  width: 40px !important;
  color: var(--nc-text);
  border: 0;
  font-size: 18px;
}
.nc-app .input-stepper > button:hover { background: var(--nc-muted-hover); }
.nc-app .input-stepper > input,
.nc-app .input-stepper > span {
  border: 0 !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--nc-text);
}

/* ── Bannières, vide, chargement ─────────────────────────────────────────── */

.nc-banner {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  background: var(--nc-muted-t);
  color: var(--nc-text);
}
.nc-banner--warning { background: var(--nc-warning-t); color: var(--nc-warning); }
.nc-banner--error { background: var(--nc-error-t); color: var(--nc-error); margin-top: 12px; }
.nc-banner--info { background: var(--nc-accent-t); }
.nc-banner--info p { margin: 0; font-size: 14px; color: var(--nc-text-muted); }
.nc-banner--info .nc-banner-title { color: var(--nc-text); font-weight: 600; }

.nc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 16px;
  text-align: center;
}
.nc-empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
}

.nc-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2px solid var(--nc-muted-t);
  border-top-color: var(--nc-text);
  animation: nc-spin 0.8s linear infinite;
}
@keyframes nc-spin { to { transform: rotate(360deg); } }

.nc-note {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--nc-text-muted);
}
.nc-stack { display: flex; flex-direction: column; gap: 16px; }

/* ── Tiroir et fenêtres (Dialog) ─────────────────────────────────────────── */

.nc-drawer {
  background: var(--nc-surface);
  border: 0;
  box-shadow: none;
}
@media (min-width: 640px) {
  .nc-drawer {
    top: 16px !important;
    bottom: 16px;
    right: 16px !important;
    height: auto !important;
    border-radius: 24px;
  }
}

.nc-dialog {
  overflow: hidden;
  border-radius: 24px;
  background: var(--nc-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.nc-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 24px 24px 16px;
}
.nc-dialog-title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--nc-text);
}
.nc-dialog-count {
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--nc-text-muted);
}
.nc-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}
.nc-dialog-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--nc-muted-t);
}
.nc-dialog-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Lignes du panier */
.nc-line {
  padding: 12px;
  border-radius: 16px;
  background: var(--nc-muted-t);
}
.nc-line--page {
  padding: 16px;
  background: var(--nc-surface);
}
.nc-line-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.nc-line-row > .min-w-0 { flex: 1; min-width: 0; }
.nc-line-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--nc-muted-t);
  color: var(--nc-text-muted);
}
.nc-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-line-thumb--lg { width: 64px; height: 64px; }
.nc-line-thumb--sm { width: 40px; height: 40px; border-radius: 9999px; }
.nc-line-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--nc-text);
  text-decoration: none;
}
.nc-line-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.nc-line-desc {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--nc-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-line-amount {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--nc-text);
}
.nc-line-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.nc-line-actions--start { justify-content: flex-start; }

.nc-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nc-summary .text-lg { font-size: 20px; line-height: 28px; letter-spacing: -1px; }

/* Recherche */
.nc-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px;
  padding: 0 8px 0 16px;
  height: 48px;
  border-radius: 9999px;
  background: var(--nc-muted-t);
  color: var(--nc-text-muted);
}
.nc-search-field:focus-within { box-shadow: 0 0 0 2px var(--nc-ring); }
.nc-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--nc-text);
  font-size: 16px;
  line-height: 24px;
}
.nc-search-input::placeholder { color: var(--nc-text-muted); }
.nc-search-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0 8px 8px;
}
.nc-search-hint {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
}

/* Fenêtres SellAuth existantes (connexion client, groupe, coupon) */
.nc-app [role="dialog"]:not(.nc-drawer):not(.nc-dialog) {
  border-radius: 24px;
  border: 0;
  background: var(--nc-surface);
}

/* ── Page produit ────────────────────────────────────────────────────────── */

.nc-page-title {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -1.5px;
  font-weight: 600;
  color: var(--nc-text);
}
@media (min-width: 768px) {
  .nc-page-title { font-size: 40px; line-height: 48px; letter-spacing: -2px; }
}
.nc-buybox .nc-page-title { font-size: 24px; line-height: 32px; letter-spacing: -1px; }

.nc-status { gap: 8px; }
.nc-status .size-3 { width: 8px; height: 8px; }

.nc-amount {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -1.5px;
  font-weight: 600;
  color: var(--nc-text);
}

.nc-price-bar {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--nc-muted-t);
}

.nc-buybox { gap: 0; }

.nc-live {
  margin-top: 16px;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
}
.nc-live svg { color: var(--nc-accent); }

/* Onglets : SegmentedControl */
.nc-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 9999px;
  background: var(--nc-muted-t);
}
.nc-segment {
  padding: 8px 16px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--nc-text-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nc-segment:hover { color: var(--nc-text); }
.nc-segment.is-active {
  background: var(--nc-interactive);
  color: var(--nc-on-interactive);
}

.nc-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  color: var(--nc-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.nc-accordion-head:hover { background: var(--nc-surface-hover); }
.nc-accordion > div { padding: 0 20px 20px; }

.nc-editor {
  color: var(--nc-text);
  font-size: 14px;
  line-height: 22px;
}
.nc-editor a { color: var(--nc-accent); }

/* Galerie */
.sa-product-gallery .splide__slide,
.sa-product-gallery img,
.sa-page-product .splide.main {
  border-radius: 16px;
  overflow: hidden;
}
.sa-page-product .splide.thumbnails .splide__slide {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent !important;
  opacity: 0.6;
}
.sa-page-product .splide.thumbnails .splide__slide.is-active {
  border-color: var(--nc-text) !important;
  opacity: 1;
}
.sa-page-product .splide__arrow {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--nc-muted);
  opacity: 1;
}
.sa-page-product .splide__arrow svg { fill: var(--nc-text); width: 14px; height: 14px; }

/* Formulaire d'achat : la logique SellAuth reste, seul l'habillage change */
.sa-product-form label,
.sa-product-form .text-sm.font-medium.text-t-primary {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--nc-text);
}
.sa-product-form .border-theme { border-color: var(--nc-muted-t) !important; }
.sa-product-form .rounded-input.border,
.sa-product-form .rounded-btn.border {
  border-color: transparent;
  border-radius: 12px;
  background-color: var(--nc-muted);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.sa-product-form .rounded-input.border:hover:not(:disabled),
.sa-product-form .rounded-btn.border:hover:not(:disabled) {
  background-color: var(--nc-muted-hover);
}
.sa-product-form .border-accent-500,
.sa-product-form [class*="border-accent-500"].rounded-input,
.sa-product-form [class*="border-accent-500"].rounded-btn {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 2px var(--nc-accent);
}
.sa-product-form .rounded-btn.border:not(.sa-add-to-cart) { border-radius: 9999px; }
.sa-product-form .text-accent-500 { color: var(--nc-accent) !important; }
.sa-product-form .bg-accent-500 { background-color: var(--nc-accent) !important; color: var(--nc-on-accent) !important; }

.sa-product-form button.w-full.rounded-btn:not(.sa-add-to-cart) {
  border: 0 !important;
  border-radius: 9999px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  background: var(--nc-muted);
  color: var(--nc-text);
}
.sa-product-form button.w-full.rounded-btn:not(.sa-add-to-cart):hover:enabled {
  background: var(--nc-muted-hover);
}

.sa-add-to-cart {
  min-height: 48px;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: var(--nc-interactive) !important;
  color: var(--nc-on-interactive) !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease;
}
.sa-add-to-cart:hover:enabled { background: var(--nc-interactive-hover) !important; }
.sa-add-to-cart:active:enabled { background: var(--nc-interactive-pressed) !important; }
.sa-add-to-cart:disabled {
  opacity: 1 !important;
  background: var(--nc-muted) !important;
  color: var(--nc-text-disabled) !important;
}

.sa-product-form-badge {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--nc-accent-t) !important;
}

/* ── Liste des produits ──────────────────────────────────────────────────── */

.nc-filters { padding: 12px; }
.nc-filters .border-theme { border-color: var(--nc-muted-t) !important; }
.nc-filters .nc-side-item { min-height: 40px; padding: 10px 12px; }
.nc-filters input[type="checkbox"] + span {
  border-radius: 4px;
  border-color: var(--nc-muted-t-hover);
}

.sa-pagination a,
.sa-pagination button,
.sa-pagination span {
  border-radius: 9999px !important;
  border: 0 !important;
  background: var(--nc-muted);
  color: var(--nc-text);
  font-weight: 600;
}
.sa-pagination [aria-current],
.sa-pagination .bg-accent-500 {
  background: var(--nc-interactive) !important;
  color: var(--nc-on-interactive) !important;
}

/* ── Pied de page ────────────────────────────────────────────────────────── */

.nc-footer {
  margin-top: 32px;
  border-top: 0;
}
.nc-footer > .wrap {
  border-top: 1px solid var(--nc-muted-t);
}
.nc-footer .border-theme { border-color: var(--nc-muted-t) !important; }
.nc-footer .nc-brand-name { font-size: 20px; line-height: 28px; }
.nc-footer-link {
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nc-footer-link:hover { color: var(--nc-text); }
.nc-footer .nc-icon-btn i { font-size: 16px; }

/* ── Notifications, avis, couleurs génériques ────────────────────────────── */

.sa-toast {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--nc-muted) !important;
  color: var(--nc-text) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

.sa-feedback-card {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--nc-surface) !important;
  box-shadow: none !important;
}

.nc-app .text-t-muted { color: var(--nc-text-muted); }
.nc-app .text-success { color: var(--nc-success); }
.nc-app .text-warning { color: var(--nc-warning); }
.nc-app .text-error { color: var(--nc-error); }
.nc-app .shadow-card,
.nc-app .shadow-btn { box-shadow: none !important; }

/* ── Sections du site ────────────────────────────────────────────────────── */

.nc-app .py-section {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 1024px) {
  .nc-app .py-section { padding-top: 64px; padding-bottom: 64px; }
}

.nc-subheader { gap: 8px; margin-bottom: 28px; }
.nc-subheader-eyebrow {
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-accent);
}
.nc-subheader-title,
.nc-subheader--h1 .nc-subheader-title {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -1.5px;
}
@media (min-width: 768px) {
  .nc-subheader-title { font-size: 40px; line-height: 48px; letter-spacing: -2px; }
}
.nc-subheader-title .mk {
  background: linear-gradient(100deg, var(--nc-accent), var(--nc-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nc-subheader-subtitle { font-size: 16px; line-height: 24px; }

.nc-input-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--nc-text-muted);
  pointer-events: none;
}
.nc-app .nc-input-icon + .input { padding-left: 44px; }

.nc-icon-btn--ghost { background: transparent; }
.nc-icon-btn--ghost:hover { background: var(--nc-base-t-hover); }

/* Cartes produits de la boutique */
.nc-shop-card {
  border-radius: 24px;
  transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nc-shop-card:hover { transform: translateY(-4px); }
.nc-shop-card .nc-card-media-rounded {
  margin: 8px 8px 0;
  border-radius: 18px;
}
.nc-shop-card .nc-card-body { gap: 16px; padding: 16px 16px 16px 20px; }
.nc-shop-card .nc-card-title { font-size: 16px; line-height: 24px; white-space: normal; }
.nc-shop-card .nc-price { font-size: 20px; line-height: 28px; letter-spacing: -1px; }
.sa-products-items,
.sa-page-products-items { gap: 20px !important; }

/* Atouts (features) */
.sa-features-items { gap: 16px !important; }
.sa-features-item {
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--nc-surface) !important;
  box-shadow: none !important;
  padding: 24px !important;
}
.sa-features-item > span:first-child,
.sa-features-item .rounded-input {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 20px;
  border-radius: 9999px !important;
  background: var(--nc-muted-t) !important;
  color: var(--nc-text) !important;
  font-size: 18px;
}
.sa-features-item h3 {
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: var(--nc-text);
}
.sa-features-item p { font-size: 14px; line-height: 20px; color: var(--nc-text-muted); }

/* Étapes */
.sa-steps--grid .sa-steps-item {
  padding: 24px;
  border-radius: 24px;
  background: var(--nc-surface);
}
.sa-steps--grid .sa-steps-items { column-gap: 16px !important; row-gap: 16px !important; }
.sa-steps-item .text-accent-500 {
  color: var(--nc-accent) !important;
  font-size: 14px;
}
.sa-steps-item .h-px { background: var(--nc-muted-t) !important; }
.sa-steps-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  background: var(--nc-muted-t) !important;
  color: var(--nc-text) !important;
  font-size: 18px;
}
.sa-steps-item h3 { font-size: 18px; line-height: 26px; letter-spacing: -0.5px; font-weight: 600; }
.sa-steps-item p { color: var(--nc-text-muted); }
.sa-steps--timeline .sa-steps-item > span:first-child {
  border: 0 !important;
  background: var(--nc-interactive) !important;
  color: var(--nc-on-interactive) !important;
  box-shadow: none !important;
}

/* FAQ */
.sa-faq-item {
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--nc-surface) !important;
  box-shadow: none !important;
}
.sa-faq-item > button {
  padding: 20px 24px !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600 !important;
}
.sa-faq-item > button:hover { background: var(--nc-surface-hover); }
.sa-faq-item .faq-panel-inner > div {
  padding: 0 24px 20px !important;
  font-size: 14px !important;
  line-height: 22px;
}
.sa-faq .rounded-card:not(.sa-faq-item) {
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(212, 160, 255, 0.16), rgba(139, 155, 236, 0.1)) !important;
  box-shadow: none !important;
}
.sa-faq .rounded-card:not(.sa-faq-item) a {
  border-radius: 9999px !important;
  background: var(--nc-interactive) !important;
  color: var(--nc-on-interactive) !important;
  border: 0 !important;
  font-weight: 600;
}

/* Avis */
.sa-feedbacks .rounded-card,
.sa-feedback-card {
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--nc-surface) !important;
  box-shadow: none !important;
}

/* Pied de page plus « site » */
.nc-footer > .wrap { padding-top: 56px; padding-bottom: 40px; }
.nc-footer .nc-brand-name { font-size: 24px; line-height: 32px; }

/* Menu mobile sous la barre */
.nc-mobile-menu {
  margin-top: 0;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
@media (max-width: 1023px) {
  .nc-bar { gap: 12px; height: 64px; }
  .nc-bar-trail { gap: 6px; }
}