/* ===========================================================================
   Sellavi-Homepage — Catalogue B2B
   Styles partagés : boutique.html, boutique-produit.html, panier.html
   Préfixe .cat-* pour ne pas entrer en conflit avec .sx-*, .mp-*, etc.
   Design : dark cosmique cohérent avec marketplaces.html / agents-ia.html.
   =========================================================================== */

:root {
  /* Reprise stricte du design system Sellavi (cf. marketplaces.html) */
  --violet-deep: #200642;
  --violet-brand: #431E96;
  --violet-bright: #7C3AFF;
  --accent: #A202C7;
  --magenta: #FF2DBE;
  --green: #00C46A;
  --amber: #F59E0B;
  --bg-cosmic: #07020F;
  --bg-elevated: #0D0420;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.38);
  --card-bg: rgba(255, 255, 255, 0.025);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-border-hover: rgba(124, 58, 255, 0.45);
}

/* ============================================================
   Page wrapper
   ============================================================ */
.cat-main {
  position: relative;
  min-height: 100vh;
}
.cat-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   Hero (entête)
   ============================================================ */
.cat-hero {
  position: relative;
  padding: 140px 32px 60px;
  /* Phase 3.9 : transparent en dark - fond porte par body via bg-continuum.
     Le motif de points (::before) est conserve. */
  background: transparent;
  overflow: hidden;
}
.cat-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none; opacity: 0.5; z-index: 0;
}
.cat-hero-inner {
  position: relative; z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
}
.cat-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cat-hero-head { flex: 1 1 380px; }
.cat-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(162, 2, 199, 0.08);
  border: 1px solid rgba(162, 2, 199, 0.22);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: #D9B8FF; text-transform: uppercase;
  margin-bottom: 20px;
}
.cat-hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(162, 2, 199, 0.6);
}
.cat-hero-title {
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--text-primary);
}
.cat-hero-title-accent {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 60%, #FF2DBE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-hero-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0;
}

/* Bouton panier dans le hero */
.cat-cart-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px; font-weight: 600;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}
.cat-cart-pill:hover {
  border-color: rgba(124, 58, 255, 0.5);
  background: rgba(124, 58, 255, 0.08);
  transform: translateY(-1px);
}
.cat-cart-pill svg { width: 18px; height: 18px; }
.cat-cart-pill-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  font-size: 12px; font-weight: 700;
  border-radius: 999px;
}

/* Recherche */
/* anciennes regles cat-search RETIREES Lot 10 - voir bloc Lot 10 final */

/* ============================================================
   Body section + layout 2 col
   ============================================================ */
.cat-body {
  /* Phase 3.9 : transparent - fond porte par body.page--boutique via bg-continuum. */
  background: transparent;
  padding: 48px 32px 80px;
}
.cat-body-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 1024px) {
  .cat-body-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   Filtres sidebar
   ============================================================ */
/* Phase 3.7.4 : sidebar filtres premium - padding, fond, border, radius
   sur les deux themes. Aucun scrollbar interne : la sidebar grandit
   naturellement avec la page. */
.cat-filters {
  position: sticky;
  top: 24px;
  padding: 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  /* Pas d overflow-y: la page entiere scrolle, plus de scrollbar interne. */
}
@media (max-width: 1024px) {
  .cat-filters {
    position: relative;
    top: auto;
    padding: 20px;
  }
}
.cat-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cat-filter-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin: 0;
}
.cat-filter-reset {
  background: transparent; border: none; cursor: pointer;
  color: #D9B8FF;
  font-size: 11.5px; font-weight: 600;
  display: none; align-items: center; gap: 4px;
}
.cat-filter-reset.visible { display: inline-flex; }
.cat-filter-reset:hover { color: #FFF; text-decoration: underline; }
.cat-results-count {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-bottom: 22px;
  font-family: 'JetBrains Mono', monospace;
}
.cat-filter-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 0;
}
.cat-filter-group:first-of-type { border-top: none; padding-top: 0; }
.cat-filter-group-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.cat-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  min-width: 0;
}
.cat-filter-option:hover { color: var(--text-primary); }
.cat-filter-option input[type="radio"],
.cat-filter-option input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}
.cat-filter-option-label {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.35;
}
.cat-filter-option-count {
  font-size: 11px;
  color: var(--text-muted);
}
.cat-filter-price-row {
  display: flex; align-items: center; gap: 8px;
}
.cat-filter-price-row input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  /* hide spinner */
  -moz-appearance: textfield;
}
.cat-filter-price-row input::-webkit-outer-spin-button,
.cat-filter-price-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cat-filter-price-row input:focus {
  border-color: rgba(124, 58, 255, 0.5);
}
.cat-filter-price-dash { color: var(--text-muted); }
/* Regles select Lot 1 RETIREES Lot 10 (redondantes avec Lot 4) */
.cat-filter-select option { color: #111; }

/* ============================================================
   Grille produits
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
  gap: 18px;
}
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 339px) {
  .cat-grid { grid-template-columns: 1fr; gap: 12px; }
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  backdrop-filter: blur(12px);
  /* Phase 3.7.5 : empeche les cartes orphelines (resultat 1 produit) de
     prendre toute la largeur. Combine avec justify-content sur .cat-grid. */
  max-width: 320px;
}
.cat-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.035);
}
.cat-card-media {
  display: block;
  aspect-ratio: 1 / 1;
  /* Phase 3.6 : fond image produit toujours blanc (dark + light).
     Les visuels fournisseurs sont sur fond blanc, on ne doit jamais
     voir de noir derriere une image produit. */
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.cat-card-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Padding interieur pour eviter l'effet "image ecrasee sur les bords". */
  padding: 14px;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}
.cat-card:hover .cat-card-media img { transform: scale(1.04); }
.cat-card-featured {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
}
.cat-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 16px;
  flex: 1;
}
.cat-card-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: #D9B8FF;
  text-transform: uppercase;
  min-height: 14px;
}
.cat-card-name {
  font-size: 14px; font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.cat-card-name:hover { color: #D9B8FF; }
.cat-card-cat {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.cat-card-avail {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  margin-top: 2px;
}
.cat-card-avail-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.cat-card-avail.in_stock     .cat-card-avail-dot { background: var(--green); box-shadow: 0 0 6px rgba(0, 196, 106, 0.6); }
.cat-card-avail.in_stock     { color: #6FE1A7; }
.cat-card-avail.low_stock    .cat-card-avail-dot { background: var(--amber); }
.cat-card-avail.low_stock    { color: #FACC72; }
.cat-card-avail.out_of_stock .cat-card-avail-dot { background: rgba(255, 255, 255, 0.3); }
.cat-card-avail.out_of_stock { color: var(--text-muted); }

.cat-card-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}
/* ancienne regle .cat-card-price-wrap (column) RETIREE Lot 9 */
.cat-card-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.cat-card-vat-mention {
  font-size: 10.5px;
  color: var(--text-muted);
}
.cat-card-add {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  border: none; border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
  box-shadow: 0 4px 12px rgba(67, 30, 150, 0.4);
}
.cat-card-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 255, 0.5);
}
.cat-card-add.added {
  background: var(--green);
  box-shadow: 0 4px 12px rgba(0, 196, 106, 0.5);
}
.cat-card-add:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.cat-card-add svg { width: 16px; height: 16px; }

/* Empty state */
.cat-empty {
  padding: 80px 20px;
  text-align: center;
}
.cat-empty-icon {
  width: 48px; height: 48px;
  color: var(--text-muted);
  margin: 0 auto 14px;
  display: block;
}
.cat-empty-title {
  font-size: 16px; font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.cat-empty-sub {
  font-size: 13.5px;
  color: var(--text-tertiary);
  margin: 0;
}

/* Load more */
.cat-load-more {
  display: flex; justify-content: center;
  margin-top: 40px;
}
.cat-load-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(124, 58, 255, 0.4);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.cat-load-more-btn:hover {
  background: rgba(124, 58, 255, 0.10);
  border-color: rgba(124, 58, 255, 0.7);
}

/* Réassurance bar */
.cat-reassurance {
  background: var(--bg-elevated);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 48px 32px;
}
.cat-reassurance-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 800px) {
  .cat-reassurance-inner { grid-template-columns: 1fr; gap: 20px; }
}
.cat-reassurance-item h3 {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.cat-reassurance-item p {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}
.cat-reassurance-item svg {
  width: 22px; height: 22px;
  color: #D9B8FF;
  margin-bottom: 10px;
}

/* ============================================================
   Fiche produit
   ============================================================ */
.cat-pdp {
  /* Phase 3.9 : transparent - fond porte par body.page--boutique-produit via bg-continuum.
     Phase 3.9.3 : min-height retire (inutile car fond porte par body). */
  background: transparent;
  padding: 32px 32px 80px;
}
/* Phase 3.6.1 - Fil d'Ariane PDP : passage Inter (JetBrains Mono inadapte aux accents). */
.cat-pdp-breadcrumb {
  max-width: 1200px;
  margin: 0 auto 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-tertiary);
}
.cat-pdp-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.cat-pdp-breadcrumb a:hover { color: #D9B8FF; }
.cat-pdp-breadcrumb-sep {
  color: var(--text-quaternary);
  font-weight: 400;
  margin: 0 2px;
  user-select: none;
}
.cat-pdp-current {
  color: var(--text-primary);
  font-weight: 600;
  /* Tronquer si trop long pour eviter retour ligne moche sur titres ASUS/Lenovo verbeux */
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Light override breadcrumb */
body[data-catalog-theme="light"] .cat-pdp-breadcrumb { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-breadcrumb a { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-breadcrumb a:hover { color: #6B1B82; }
body[data-catalog-theme="light"] .cat-pdp-current { color: var(--cat-text); }

.cat-pdp-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
@media (max-width: 980px) { .cat-pdp-main { grid-template-columns: 1fr; gap: 32px; } }

.cat-pdp-gallery {
  display: flex; flex-direction: column; gap: 14px;
}
.cat-pdp-main-img {
  aspect-ratio: 1 / 1;
  /* Phase 3.6 : fond image produit PDP toujours blanc.
     Phase 3.7.6 : radius 18px + padding 32px (aligne maquette validee Sam). */
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.cat-pdp-main-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 32px;
  box-sizing: border-box;
}
.cat-pdp-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFF;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cat-pdp-nav:hover { background: rgba(124, 58, 255, 0.4); }
.cat-pdp-nav.prev { left: 12px; }
.cat-pdp-nav.next { right: 12px; }
.cat-pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.cat-pdp-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  /* Phase 3.6 : fond thumb PDP toujours blanc. */
  background: #FFFFFF;
  border: 2px solid var(--card-border);
  cursor: pointer;
  padding: 0;
}
.cat-pdp-thumb.active { border-color: var(--accent); }
.cat-pdp-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

/* Phase 3.6 : bloc info PDP redescendu legerement sur desktop
   pour respirer par rapport au haut de la colonne droite (galerie). */
.cat-pdp-info {
  padding-top: 8px;
}
@media (max-width: 980px) {
  .cat-pdp-info { padding-top: 0; }
}
.cat-pdp-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: #D9B8FF;
  text-transform: uppercase;
  /* Phase 3.6 : un peu plus d'air entre la marque et le titre. */
  margin-bottom: 14px;
}
.cat-pdp-title {
  /* Phase 3.6 : taille reduite et plus equilibree (etait clamp(24, 3.2vw, 32)).
     line-height legerement plus aere, max-width pour eviter
     que le titre ne prenne toute la largeur de la colonne. */
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
  max-width: 92%;
  margin: 0 0 18px;
}
@media (max-width: 980px) {
  .cat-pdp-title { max-width: 100%; }
}
.cat-pdp-refs {
  display: flex; flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.cat-pdp-refs strong { color: var(--text-secondary); font-weight: 600; }
.cat-pdp-avail {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.cat-pdp-avail .cat-card-avail-dot { width: 8px; height: 8px; }
.cat-pdp-avail-extra {
  color: var(--text-tertiary);
  font-size: 12.5px;
  margin-left: 4px;
}
.cat-pdp-short {
  font-size: 15.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 26px;
}

.cat-pdp-buybox {
  padding: 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  margin-bottom: 24px;
}
.cat-pdp-price-row {
  display: flex; align-items: baseline; gap: 10px;
}
.cat-pdp-price {
  font-size: 30px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}
.cat-pdp-ht-tag {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.cat-pdp-vat-mention {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.cat-pdp-actions {
  display: flex; flex-wrap: wrap;
  gap: 12px; align-items: center;
  margin-top: 18px;
  /* Phase 3.7.8 : marge bas obligatoire pour ne pas coller au trust grid */
  margin-bottom: 24px;
}
/* Phase 3.7.7 : stepper qty + CTA add to cart alignes meme hauteur 48px,
   fond/bordure visibles en dark ET light. */
.cat-qty {
  display: inline-flex;
  align-items: stretch;
  min-height: 48px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  overflow: hidden;
}
.cat-qty-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.cat-qty-btn:hover:not(:disabled) { background: rgba(124, 58, 255, 0.12); }
.cat-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cat-qty-input {
  width: 56px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  -moz-appearance: textfield;
}
.cat-qty-input::-webkit-outer-spin-button,
.cat-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Phase 3.7.7 : light theme stepper qty visible (fond blanc + bordure nette) */
body[data-catalog-theme="light"] .cat-qty {
  background: #FFFFFF;
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-qty-btn { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-qty-btn:hover:not(:disabled) { background: rgba(124, 58, 255, 0.08); }
body[data-catalog-theme="light"] .cat-qty-input { color: var(--cat-text); }
.cat-pdp-add {
  flex: 1;
  min-width: 240px;
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.3s ease;
  /* Phase 3.7.9 : glow violet plus marque (alignement maquette) */
  box-shadow: 0 12px 32px rgba(124, 58, 255, 0.45);
}
.cat-pdp-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(124, 58, 255, 0.55);
}
.cat-pdp-add.added {
  background: var(--green);
  box-shadow: 0 8px 24px rgba(0, 196, 106, 0.5);
}
.cat-pdp-add:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.cat-pdp-add svg { width: 18px; height: 18px; }

.cat-pdp-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
@media (max-width: 700px) { .cat-pdp-trust { grid-template-columns: 1fr; } }
.cat-pdp-trust-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--text-tertiary);
  line-height: 1.45;
}
.cat-pdp-trust-item svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: #D9B8FF;
}

.cat-pdp-sections {
  max-width: 1200px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
}
@media (max-width: 980px) { .cat-pdp-sections { grid-template-columns: 1fr; gap: 32px; } }
.cat-pdp-section-title {
  font-size: 18px; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.cat-pdp-long {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  white-space: pre-line;
}
.cat-pdp-side h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.cat-pdp-specs {
  font-size: 13.5px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.cat-pdp-specs li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cat-pdp-specs li span:first-child { color: var(--text-tertiary); }
.cat-pdp-specs li span:last-child { color: var(--text-primary); font-weight: 500; }

.cat-pdp-compats { list-style: none; padding: 0; margin: 0 0 28px; font-size: 13.5px; }
.cat-pdp-compats li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0;
  color: var(--text-secondary);
}
.cat-pdp-compats svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--green); margin-top: 3px; }

.cat-pdp-logistics dt { color: var(--text-tertiary); font-size: 13px; }
.cat-pdp-logistics dd { color: var(--text-primary); font-size: 13.5px; margin: 2px 0 12px; }

/* ============================================================
   Panier
   ============================================================ */
.cat-cart {
  /* Phase 3.9 : transparent - fond porte par body.page--panier via bg-continuum.
     Phase 3.9.3 : min-height retire car panier.html contient 2 sections .cat-cart
     (stepper + contenu) : chacune prenait 100vh -> 200vh+ de hauteur cumulee,
     creant un grand vide entre stepper et contenu reel. Le fond etant porte
     par le body (bg-continuum), min-height n est plus necessaire. */
  background: transparent;
  padding: 32px 32px 80px;
}
.cat-cart-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.cat-cart-empty {
  text-align: center;
  padding: 80px 20px;
}
.cat-cart-empty svg {
  width: 56px; height: 56px;
  color: var(--text-muted);
  margin: 0 auto 18px;
  display: block;
}
.cat-cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 980px) { .cat-cart-grid { grid-template-columns: 1fr; } }

.cat-cart-lines {
  display: flex; flex-direction: column;
  gap: 12px;
}
.cat-cart-line {
  display: flex; align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}
.cat-cart-line-img {
  width: 84px; height: 84px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  /* Phase 3.10 : fond blanc coherent avec .cat-card-media et .cat-search-product-img.
     Aucun visuel produit ne doit jamais etre sur fond viole. */
  background: #FFFFFF;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cat-cart-line-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}
.cat-cart-line-body { flex: 1; min-width: 0; }
.cat-cart-line-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D9B8FF;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cat-cart-line-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-cart-line-name:hover { color: #D9B8FF; }
.cat-cart-line-unit {
  font-size: 12px; color: var(--text-tertiary);
  margin-top: 4px;
}
.cat-cart-line-unit strong { color: var(--text-secondary); font-weight: 600; }
.cat-cart-line-controls {
  display: flex; flex-wrap: wrap;
  gap: 12px; align-items: center;
  margin-top: 12px;
}
.cat-cart-line-remove {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-tertiary);
  font-family: inherit; font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.cat-cart-line-remove:hover { color: #FCA5A5; }
.cat-cart-line-remove svg { width: 13px; height: 13px; }
.cat-cart-line-total {
  flex-shrink: 0;
  text-align: right;
}
.cat-cart-line-total-amount {
  font-size: 16px; font-weight: 800;
  color: var(--text-primary);
}
.cat-cart-line-total-mention {
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================
   PAGE PANIER mobile : hitbox tactile 44x44 sans agrandir les icones
   - boutons +/- (.cat-qty-btn) : min 44x44 (svg 14x14 inchange)
   - input quantite (.cat-qty-input) : min-height 44 pour alignement
   - bouton "Retirer" (.cat-cart-line-remove, contient svg + texte)
     -> min-height 44 + padding pour hitbox confortable
   - espacement gap suffisant pour eviter mistap
   ============================================================ */
@media (max-width: 768px) {
  .cat-cart-line-controls {
    gap: 14px;
  }
  .cat-qty-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cat-qty-input {
    min-height: 44px;
    width: 56px;
    padding: 0;
  }
  .cat-cart-line-remove {
    min-height: 44px;
    padding: 8px 12px 8px 8px;
    border-radius: 8px;
  }
  .cat-cart-line-remove svg { width: 16px; height: 16px; }
}

.cat-cart-footrow {
  display: flex; justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}
.cat-cart-footrow a {
  color: #D9B8FF;
  font-size: 13.5px;
  text-decoration: none;
}
.cat-cart-footrow a:hover { text-decoration: underline; }
.cat-cart-clear {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-tertiary);
  font-family: inherit; font-size: 12.5px;
}
.cat-cart-clear:hover { color: #FCA5A5; }

.cat-cart-summary {
  position: sticky;
  /* Phase 3.10 : top augmente pour rester sous le header sticky (~90px). */
  top: 100px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 22px;
}
.cat-cart-summary h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.cat-cart-row {
  display: flex; justify-content: space-between;
  font-size: 13.5px;
  padding: 6px 0;
}
.cat-cart-row dt { color: var(--text-secondary); margin: 0; }
.cat-cart-row dd { color: var(--text-primary); margin: 0; font-weight: 600; }
.cat-cart-row-muted dt, .cat-cart-row-muted dd {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 12.5px;
}

/* Phase 3.10 : ligne frais de livraison avec icone inline */
.cat-cart-row-shipping dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  margin: 0;
}
.cat-cart-row-shipping dt svg {
  width: 16px; height: 16px;
  color: #A78BFA;
  flex-shrink: 0;
}
.cat-cart-row-shipping dd {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 12.5px;
  margin: 0;
  text-align: right;
}
.cat-cart-row-shipping {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
body[data-catalog-theme="light"] .cat-cart-row-shipping dt svg {
  color: #7C3AFF;
}
.cat-cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cat-cart-total-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cat-cart-total-value { font-size: 26px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.02em; }

.cat-cart-cta {
  width: 100%;
  margin-top: 18px;
  padding: 13px 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 60%, #FF2DBE 100%);
  color: #FFF;
  border: none; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(67, 30, 150, 0.4);
}
.cat-cart-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(124, 58, 255, 0.55);
}
.cat-cart-cta svg { width: 16px; height: 16px; }
.cat-cart-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255, 213, 130, 0.95);
  line-height: 1.5;
  display: flex; align-items: flex-start; gap: 8px;
}

/* Phase 3.10 : mention indicatif sous le total */
.cat-cart-total-mention {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Phase 3.10 : note "compte B2B requis" sous le CTA */
.cat-cart-account-required {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(124, 58, 255, 0.08);
  border: 1px solid rgba(124, 58, 255, 0.22);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cat-cart-account-required svg {
  width: 16px; height: 16px;
  color: #A78BFA;
  flex-shrink: 0;
  margin-top: 1px;
}
.cat-cart-account-required strong {
  color: var(--text-primary);
  font-weight: 700;
}
body[data-catalog-theme="light"] .cat-cart-account-required {
  background: rgba(67, 30, 150, 0.05);
  border-color: rgba(67, 30, 150, 0.18);
  color: var(--cat-text);
}
body[data-catalog-theme="light"] .cat-cart-account-required svg {
  color: #7C3AFF;
}
body[data-catalog-theme="light"] .cat-cart-account-required strong {
  color: var(--cat-text);
}

/* Phase 3.10 : Trust bar B2B reassurance */
.cat-cart-trust {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cat-cart-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px) {
  .cat-cart-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .cat-cart-trust-grid { grid-template-columns: 1fr; gap: 10px; }
}
.cat-cart-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cat-cart-trust-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.cat-cart-trust-item svg {
  width: 22px; height: 22px;
  color: #A78BFA;
  flex-shrink: 0;
}
.cat-cart-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cat-cart-trust-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.cat-cart-trust-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.3;
}
body[data-catalog-theme="light"] .cat-cart-trust {
  border-top-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-cart-trust-item {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-cart-trust-item:hover {
  background: rgba(67, 30, 150, 0.04);
  border-color: rgba(67, 30, 150, 0.20);
}
body[data-catalog-theme="light"] .cat-cart-trust-item svg {
  color: #7C3AFF;
}
body[data-catalog-theme="light"] .cat-cart-trust-title { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-cart-trust-sub { color: var(--cat-muted); }
.cat-cart-note svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--amber); margin-top: 2px; }

/* ============================================================
   Placeholder validation
   ============================================================ */
.cat-checkout-placeholder {
  /* Phase 3.9 : transparent - fond porte par body via bg-continuum. */
  background: transparent;
  padding: 90px 32px;
  text-align: center;
  min-height: 100vh;
}
.cat-checkout-placeholder-inner {
  max-width: 520px;
  margin: 0 auto;
}
.cat-checkout-placeholder-icon {
  display: inline-flex;
  width: 64px; height: 64px;
  background: rgba(162, 2, 199, 0.10);
  border: 1px solid rgba(162, 2, 199, 0.3);
  border-radius: 50%;
  align-items: center; justify-content: center;
  margin-bottom: 22px;
  color: #D9B8FF;
}
.cat-checkout-placeholder-icon svg { width: 28px; height: 28px; }

/* ============================================================
   Footer (gros block reset)
   ============================================================ */
.cat-nav-spacer { height: 72px; }

/* ============================================================
   PHASE 3.5 LOT 1-bis — Light/dark switch + nav adapt + logo light
   ============================================================
   Corrige Lot 1 :
   - bouton switch integre au header (.cat-hero-top) + cat-actions-bar
     pour PDP/panier, plus de fixed/floating
   - light mode : nav transparente avec liens violet sombre lisibles
   - light mode : logo bascule sur version fuchsia (sellavi-logo.png)
   - light mode : Connexion / liens / S'inscrire renforces
   - footer transition douce
   - corrections diverses light premium
   ============================================================ */

/* Defaults (dark) - les --cat-* sont reference uniquement, le CSS de base utilise
   les variables --bg-cosmic etc. originales */
body[data-catalog-theme="dark"] {
  --cat-bg: #07020F;
  --cat-surface: #0D0420;
  --cat-card: rgba(255, 255, 255, 0.025);
  --cat-text: #FFFFFF;
  --cat-muted: rgba(255, 255, 255, 0.55);
  --cat-border: rgba(255, 255, 255, 0.08);
  --cat-input: rgba(255, 255, 255, 0.04);
  --cat-hover: rgba(124, 58, 255, 0.08);
  --cat-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Light premium */
body[data-catalog-theme="light"] {
  --cat-bg: #F7F5FB;
  --cat-surface: #FFFFFF;
  --cat-card: #FFFFFF;
  --cat-text: #24113F;
  --cat-muted: #6E6480;
  --cat-border: #E5E0EE;
  --cat-input: #FFFFFF;
  --cat-hover: #F1ECF8;
  --cat-shadow: 0 2px 14px rgba(67, 30, 150, 0.07);

  /* Remap des variables existantes scoped a body[light] */
  --bg-cosmic: var(--cat-bg);
  --bg-elevated: var(--cat-surface);
  --card-bg: var(--cat-card);
  --card-border: var(--cat-border);
  --card-border-hover: rgba(67, 30, 150, 0.40);
  --text-primary: var(--cat-text);
  --text-secondary: #3A2E5C;
  --text-tertiary: #6E6480;
  --text-muted: #9C92AD;

  background: var(--cat-bg);
  color: var(--cat-text);
}

/* ============================================================
   NAV GLOBALE en LIGHT MODE
   On rend la nav claire pour cohérence avec le corps clair.
   La nav reste structurellement la meme (markup sx-1-nav non touche),
   on override uniquement quand body[data-catalog-theme="light"].
   ============================================================ */
body[data-catalog-theme="light"] .sx-1-nav {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--cat-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Logo : bascule vers version fuchsia (file separe, non-destructif) */
body[data-catalog-theme="light"] .sx-1-nav-logo img {
  content: url("/assets/sellavi-logo.png");
}

/* Liens menu : violet sombre lisible (recommandation Sam #24113F / #431E96) */
body[data-catalog-theme="light"] .sx-1-nav-menu a {
  color: #3A2E5C;
  font-weight: 600;
}
body[data-catalog-theme="light"] .sx-1-nav-menu a:hover {
  color: #431E96;
}
body[data-catalog-theme="light"] .sx-1-nav-menu a[aria-current="page"] {
  color: #431E96;
}

/* Connexion : meme traitement, plus contraste */
body[data-catalog-theme="light"] .sx-1-nav-login {
  color: #3A2E5C;
  font-weight: 600;
}
body[data-catalog-theme="light"] .sx-1-nav-login:hover {
  color: #431E96;
}

/* CTA S'inscrire : gradient inchange (identitaire) mais legere shadow pour pop sur fond clair */
body[data-catalog-theme="light"] .sx-1-nav-cta {
  box-shadow: 0 6px 20px rgba(124, 58, 255, 0.22);
}

/* ============================================================
   FOOTER en LIGHT MODE
   Transition douce avant footer sombre : fade out leger en bas du body
   pour eviter la coupe brutale. Le footer lui-meme reste sombre
   (decision : pas de refonte footer dans ce lot).
   ============================================================ */
body[data-catalog-theme="light"] {
  position: relative;
}
body[data-catalog-theme="light"]::before {
  content: "";
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 2, 15, 0.04) 60%, rgba(7, 2, 15, 0.10) 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

/* ============================================================
   THEME SWITCH BUTTON - integre au header maintenant
   Le pill switch est dimensionne et style EXACTEMENT comme .cat-cart-pill
   pour alignement visuel parfait dans .cat-hero-top.
   ============================================================ */
.cat-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease, color 0.25s ease;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  white-space: nowrap;
}
.cat-theme-switch:hover {
  background: rgba(124, 58, 255, 0.08);
  border-color: rgba(124, 58, 255, 0.40);
  transform: translateY(-1px);
}
.cat-theme-switch:focus-visible {
  outline: 2px solid rgba(124, 58, 255, 0.6);
  outline-offset: 2px;
}
.cat-theme-switch svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.cat-theme-switch-label {
  white-space: nowrap;
}
/* Icone affichee selon theme courant : moon = dark (propose light), sun = light (propose dark) */
.cat-theme-switch .icon-sun { display: none; }
.cat-theme-switch .icon-moon { display: inline-block; }
body[data-catalog-theme="light"] .cat-theme-switch .icon-sun { display: inline-block; }
body[data-catalog-theme="light"] .cat-theme-switch .icon-moon { display: none; }

/* LIGHT : pill blanc avec ombre legere */
body[data-catalog-theme="light"] .cat-theme-switch {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  color: var(--cat-text);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-theme-switch:hover {
  background: var(--cat-hover);
  border-color: rgba(67, 30, 150, 0.40);
}

/* ============================================================
   BARRE D'ACTIONS CATALOGUE (.cat-actions-bar)
   Utilisee sur PDP et /panier : conteneur top-right pour le couple
   [switch][panier pill]. Sur /boutique on n'utilise PAS cette barre :
   le couple est directement dans .cat-hero-top.
   ============================================================ */
.cat-actions-bar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px 0;
  flex-wrap: wrap;
}

/* ============================================================
   HEADER /boutique : aligner switch a cote de cart-pill
   Dans .cat-hero-top, on garde le head a gauche et un cluster
   d'actions a droite (.cat-hero-actions) contenant [switch][cart-pill].
   ============================================================ */
.cat-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   LIGHT MODE - surcharges de surfaces catalogue
   ============================================================ */

/* HERO : retirer gradient sombre + pattern blanc, fond clair doux */
body[data-catalog-theme="light"] .cat-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 58, 255, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #FBFAFD 0%, var(--cat-bg) 100%);
}
body[data-catalog-theme="light"] .cat-hero::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(67, 30, 150, 0.04) 1px, transparent 1px);
  opacity: 0.7;
}
body[data-catalog-theme="light"] .cat-hero-lead {
  color: #4A3D6A;
}
body[data-catalog-theme="light"] .cat-hero-eyebrow {
  background: rgba(162, 2, 199, 0.08);
  border-color: rgba(162, 2, 199, 0.22);
  color: #6B1B82;
}

/* CART PILL */
body[data-catalog-theme="light"] .cat-cart-pill {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  color: var(--cat-text);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-cart-pill:hover {
  background: var(--cat-hover);
  border-color: rgba(124, 58, 255, 0.35);
}

/* SEARCH */
body[data-catalog-theme="light"] .cat-search-input {
  background: var(--cat-input);
  border-color: var(--cat-border);
  color: var(--cat-text);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-search-input:focus {
  border-color: rgba(124, 58, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(124, 58, 255, 0.12);
}
body[data-catalog-theme="light"] .cat-search-input::placeholder { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-search-icon { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-search-clear { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-search-clear:hover { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-search-dropdown {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-search-suggestion { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-search-suggestion:hover,
body[data-catalog-theme="light"] .cat-search-suggestion:focus { background: var(--cat-hover); }
body[data-catalog-theme="light"] .cat-search-suggestion-img { background: #F4F1F9; }
body[data-catalog-theme="light"] .cat-search-suggestion-brand,
body[data-catalog-theme="light"] .cat-search-suggestion-price { color: var(--cat-muted); }

/* BODY catalogue : fond global */
/* Phase 3.8 : light mode garde le halo cosmique tres subtil sur fond clair. */
body[data-catalog-theme="light"] .cat-body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 255, 0.06) 0%, transparent 55%),
    var(--cat-bg);
}

/* FILTRES */
body[data-catalog-theme="light"] .cat-filters {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  box-shadow: 0 2px 8px rgba(67, 30, 150, 0.04);
}
body[data-catalog-theme="light"] .cat-filter-group { border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-filter-group-title,
body[data-catalog-theme="light"] .cat-filter-title { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-filter-option { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-filter-option:hover { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-filter-option-count { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-filter-reset { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-filter-reset:hover { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-filter-price-row input,
body[data-catalog-theme="light"] .cat-filter-select {
  background: var(--cat-input);
  border-color: var(--cat-border);
  color: var(--cat-text);
}
body[data-catalog-theme="light"] .cat-filter-price-row input:focus,
body[data-catalog-theme="light"] .cat-filter-select:focus {
  border-color: rgba(124, 58, 255, 0.55);
}
body[data-catalog-theme="light"] .cat-filter-price-dash { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-results-count { color: var(--cat-muted); }

/* PRODUCT CARDS */
body[data-catalog-theme="light"] .cat-card {
  background: var(--cat-card);
  border-color: var(--cat-border);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-card:hover {
  background: var(--cat-card);
  border-color: rgba(124, 58, 255, 0.45);
  box-shadow: 0 8px 32px rgba(67, 30, 150, 0.10);
}
/* Phase 3.6 : conserve fond blanc image produit en light (etait #F4F1F9). */
body[data-catalog-theme="light"] .cat-card-media { background: #FFFFFF; }
body[data-catalog-theme="light"] .cat-card-brand { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-card-name { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-card-name:hover { color: #6B1B82; }
body[data-catalog-theme="light"] .cat-card-cat { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-card-add:disabled {
  background: #F0EBF7;
  color: var(--cat-muted);
}

/* AVAIL labels */
body[data-catalog-theme="light"] .cat-card-avail.in_stock { color: #047C4A; }
body[data-catalog-theme="light"] .cat-card-avail.low_stock { color: #8B5A00; }
body[data-catalog-theme="light"] .cat-card-avail.out_of_stock { color: #8B1A1A; }

/* LOAD MORE */
body[data-catalog-theme="light"] .cat-load-more-btn {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  color: var(--cat-text);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-load-more-btn:hover {
  background: var(--cat-hover);
  border-color: rgba(124, 58, 255, 0.35);
}

/* REASSURANCE */
body[data-catalog-theme="light"] .cat-reassurance {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}

/* PDP */
body[data-catalog-theme="light"] .cat-pdp {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 255, 0.07) 0%, transparent 50%),
    var(--cat-bg);
}
/* Phase 3.6 : conserve fond blanc images PDP en light, garde border light. */
body[data-catalog-theme="light"] .cat-pdp-main-img,
body[data-catalog-theme="light"] .cat-pdp-thumb {
  background: #FFFFFF;
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-pdp-nav {
  background: rgba(255, 255, 255, 0.85);
  color: var(--cat-text);
  border: 1px solid var(--cat-border);
}

/* CART (panier) */
body[data-catalog-theme="light"] .cat-cart {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 255, 0.07) 0%, transparent 50%),
    var(--cat-bg);
}
body[data-catalog-theme="light"] .cat-checkout-placeholder {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 255, 0.07) 0%, transparent 50%),
    var(--cat-bg);
}
body[data-catalog-theme="light"] .cat-cart-line,
body[data-catalog-theme="light"] .cat-cart-side,
body[data-catalog-theme="light"] .cat-cart-summary,
body[data-catalog-theme="light"] .cat-cart-empty {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-cart-line-img { background: #FFFFFF; border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-cart-line-name { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-cart-line-brand,
body[data-catalog-theme="light"] .cat-cart-line-unit,
body[data-catalog-theme="light"] .cat-cart-line-remove { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-cart-line-remove:hover { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-cart-qty-btn {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  color: var(--cat-text);
}
body[data-catalog-theme="light"] .cat-cart-qty-btn:hover { background: var(--cat-hover); }
body[data-catalog-theme="light"] .cat-cart-qty-value { color: var(--cat-text); }

/* ============================================================
   RESPONSIVE - mobile
   Sur mobile, la cat-actions-bar reste lisible. Le bouton switch
   masque son label (icone seule) pour gagner de la place.
   ============================================================ */
@media (max-width: 768px) {
  .cat-actions-bar {
    padding: 14px 16px 0;
    gap: 8px;
  }
  .cat-theme-switch {
    padding: 9px 11px;
    gap: 0;
  }
  .cat-theme-switch-label {
    display: none;
  }
  .cat-hero-actions {
    gap: 8px;
  }
}

/* ============================================================
   PHASE 3.5 LOT 2 — Commerce Interaction Layer
   Toast queue + Drawer + Modal + Cart drawer + Mini-cart
   All variables --cat-* + --bg-* + --text-* reused (theme-aware).
   ============================================================ */

/* Body scroll lock when overlay open */
body[data-srn-scroll-locked="true"] {
  overflow: hidden;
}

/* ============================================================
   TOAST
   ============================================================ */
.srn-toast-container {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.srn-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 360px;
  max-width: 100%;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  font-family: 'Inter', system-ui, sans-serif;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.srn-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.srn-toast.is-leaving {
  opacity: 0;
  transform: translateX(20px);
}
.srn-toast-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.srn-toast-icon svg { width: 16px; height: 16px; }
.srn-toast--success .srn-toast-icon { background: rgba(0, 196, 106, 0.14); color: #00C46A; }
.srn-toast--error .srn-toast-icon   { background: rgba(220, 38, 38, 0.14); color: #DC2626; }
.srn-toast--info .srn-toast-icon    { background: rgba(124, 58, 255, 0.14); color: #7C3AFF; }
.srn-toast-body {
  flex: 1;
  min-width: 0;
}
.srn-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.srn-toast-text {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
  word-break: break-word;
}
.srn-toast-action {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #7C3AFF;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.srn-toast-action:hover { color: #A202C7; }
.srn-toast-close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.srn-toast-close svg { width: 14px; height: 14px; }
.srn-toast-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }

body[data-catalog-theme="light"] .srn-toast {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  box-shadow: 0 12px 32px rgba(67, 30, 150, 0.10);
}
body[data-catalog-theme="light"] .srn-toast-close:hover {
  background: var(--cat-hover);
}

@media (max-width: 768px) {
  .srn-toast-container {
    top: auto;
    bottom: 24px;
    right: 16px;
    left: 16px;
    align-items: center;
  }
  .srn-toast { width: 100%; max-width: 480px; }
}

/* ============================================================
   DRAWER
   ============================================================ */
.srn-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 2, 15, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.srn-drawer-overlay.is-open { opacity: 1; }

body[data-catalog-theme="light"] .srn-drawer-overlay {
  background: rgba(67, 30, 150, 0.18);
}

.srn-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  /* Ordre fallback->cible : navigateurs anciens prennent vh, recents ecrasent avec dvh */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  width: 420px;
  max-width: 100vw;
  background: var(--bg-elevated);
  z-index: 91;
  display: flex;
  flex-direction: column;
  /* Sans min-height: 0, un enfant flex avec overflow peut refuser de shrink */
  min-height: 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
  border-left: 1px solid var(--card-border);
  font-family: 'Inter', system-ui, sans-serif;
}
.srn-drawer-panel.is-open { transform: translateX(0); }
.srn-drawer-panel:focus { outline: none; }

body[data-catalog-theme="light"] .srn-drawer-panel {
  background: var(--cat-surface);
  border-left-color: var(--cat-border);
  box-shadow: -16px 0 48px rgba(67, 30, 150, 0.12);
}

.srn-drawer-header {
  position: relative;
  flex-shrink: 0;
  padding: 22px 56px 18px 24px;
  border-bottom: 1px solid var(--card-border);
}
body[data-catalog-theme="light"] .srn-drawer-header { border-bottom-color: var(--cat-border); background: #FBFAFD; }
.srn-drawer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.srn-drawer-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
}
.srn-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.srn-drawer-close svg { width: 16px; height: 16px; }
.srn-drawer-close:hover { background: rgba(124, 58, 255, 0.08); color: var(--text-primary); border-color: rgba(124, 58, 255, 0.30); }
body[data-catalog-theme="light"] .srn-drawer-close { border-color: var(--cat-border); }
body[data-catalog-theme="light"] .srn-drawer-close:hover { background: var(--cat-hover); border-color: rgba(124, 58, 255, 0.30); }

.srn-drawer-body {
  flex: 1 1 0;
  /* Cle pour permettre au flex item de shrinker en-dessous du contenu */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 0;
}
.srn-drawer-footer {
  flex-shrink: 0;
  /* safe-area iOS : evite que le CTA soit mange par le home indicator */
  padding: 18px 24px max(22px, calc(22px + env(safe-area-inset-bottom)));
  border-top: 1px solid var(--card-border);
  background: var(--bg-elevated);
}
body[data-catalog-theme="light"] .srn-drawer-footer { background: #FBFAFD; border-top-color: var(--cat-border); }

/* ============================================================
   CART DRAWER specific
   ============================================================ */
.srn-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srn-cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--card-border);
  align-items: flex-start;
}
.srn-cart-line:last-child { border-bottom: none; }
body[data-catalog-theme="light"] .srn-cart-line { border-bottom-color: var(--cat-border); }

.srn-cart-line-img {
  width: 72px; height: 72px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-catalog-theme="light"] .srn-cart-line-img { background: #F4F1F9; }
.srn-cart-line-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.srn-cart-line-body { min-width: 0; }
.srn-cart-line-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.srn-cart-line-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
  text-decoration: none;
  word-break: break-word;
}
.srn-cart-line-name:hover { color: #D9B8FF; }
body[data-catalog-theme="light"] .srn-cart-line-name:hover { color: #6B1B82; }
.srn-cart-line-unit {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.srn-cart-line-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.srn-cart-qty {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
}
body[data-catalog-theme="light"] .srn-cart-qty { background: var(--cat-input); border-color: var(--cat-border); }
.srn-cart-qty-btn {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.srn-cart-qty-btn:hover { background: rgba(124, 58, 255, 0.10); }
.srn-cart-qty-value {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.srn-cart-line-remove {
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.srn-cart-line-remove svg { width: 14px; height: 14px; }
.srn-cart-line-remove:hover { background: rgba(220, 38, 38, 0.10); color: #EF4444; }

.srn-cart-line-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* CART empty state in drawer */
.srn-cart-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-tertiary);
}
.srn-cart-empty svg {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  color: var(--text-muted);
  display: block;
}
.srn-cart-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.srn-cart-empty-text {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.srn-cart-empty-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.srn-cart-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124, 58, 255, 0.30); }

/* Totals in drawer footer */
.srn-cart-totals { margin-bottom: 14px; }
.srn-cart-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.srn-cart-row-muted span { color: var(--text-tertiary); font-size: 12px; }
.srn-cart-row-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
body[data-catalog-theme="light"] .srn-cart-row-total { border-top-color: var(--cat-border); }
.srn-cart-row-total span:last-child {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

.srn-cart-cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srn-cart-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.srn-cart-cta svg { width: 16px; height: 16px; }
.srn-cart-cta--primary {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  border: none;
}
.srn-cart-cta--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124, 58, 255, 0.32); }
.srn-cart-cta--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--card-border);
}
.srn-cart-cta--secondary:hover { background: rgba(124, 58, 255, 0.08); border-color: rgba(124, 58, 255, 0.30); }
body[data-catalog-theme="light"] .srn-cart-cta--secondary {
  border-color: var(--cat-border);
  background: var(--cat-surface);
}
body[data-catalog-theme="light"] .srn-cart-cta--secondary:hover {
  background: var(--cat-hover);
  border-color: rgba(124, 58, 255, 0.30);
}

/* Mobile drawer = pleine largeur + handle bar + croix 44x44 + footer compact */
@media (max-width: 768px) {
  .srn-drawer-panel { width: 100vw; max-width: none; }
  /* Handle bar visuelle (indicateur swipe-down) */
  .srn-drawer-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 22px;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
  }
  .srn-drawer-handle::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.20);
  }
  body[data-catalog-theme="light"] .srn-drawer-handle::before {
    background: rgba(67, 30, 150, 0.22);
  }
  .srn-drawer-handle.is-grabbing { cursor: grabbing; }

  .srn-drawer-header {
    padding: 10px 56px 14px 18px;
  }
  /* Croix mobile 44x44 (deja garanti via le bloc pointer:coarse, mais on rend explicite) */
  .srn-drawer-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
  .srn-drawer-close svg { width: 18px; height: 18px; }

  .srn-cart-line { padding-left: 18px; padding-right: 18px; }

  /* Footer compact mobile :
     - padding vertical reduit ;
     - note auth retiree du footer (rendue inline dans le body via JS) ;
     - safe-area conservee. */
  .srn-drawer-footer {
    padding: 14px 18px max(16px, calc(16px + env(safe-area-inset-bottom)));
  }
  /* Totaux : padding et font reduits sur mobile */
  .srn-drawer-footer .srn-cart-totals { margin-bottom: 10px; }
  .srn-drawer-footer .srn-cart-row { padding: 4px 0; font-size: 12.5px; }
  .srn-drawer-footer .srn-cart-row-total { font-size: 14px; }
  /* CTAs : gap reduit, hauteur conservee 48px (tap target) */
  .srn-drawer-footer .srn-cart-cta-row { gap: 6px; }

  /* ----------------------------------------------------------
     Cart controls : hitbox tactile 44x44 sans agrandir l'icone
     - boutons qty +/- : min 44x44 (visuellement compact via padding)
     - bouton remove : min 44x44, svg 14x14 inchange
     - espacement controls : gap augmente a 12 (vs 10) pour eviter mistap
     ---------------------------------------------------------- */
  .srn-cart-line-controls {
    gap: 12px;
  }
  .srn-cart-qty-btn {
    min-width: 44px;
    min-height: 44px;
    /* width/height implicites par min-* : la pill grandit horizontalement
       mais reste compacte verticalement grace au align-items du parent */
    padding: 0 8px;
  }
  .srn-cart-qty-value {
    min-width: 28px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .srn-cart-line-remove {
    min-width: 44px;
    min-height: 44px;
    /* SVG reste 14x14 : hitbox elargie via padding */
    padding: 0;
  }
}

/* ============================================================
   MODAL
   ============================================================ */
.srn-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 2, 15, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 95;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.srn-modal-overlay.is-open { opacity: 1; }
body[data-catalog-theme="light"] .srn-modal-overlay { background: rgba(67, 30, 150, 0.22); }

.srn-modal-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 96;
  width: min(420px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', system-ui, sans-serif;
}
.srn-modal-panel.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.srn-modal-panel:focus { outline: none; }
body[data-catalog-theme="light"] .srn-modal-panel {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  box-shadow: 0 24px 64px rgba(67, 30, 150, 0.18);
}
.srn-modal-header {
  position: relative;
  padding: 22px 56px 14px 24px;
}
.srn-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.srn-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.srn-modal-close svg { width: 16px; height: 16px; }
.srn-modal-close:hover { background: rgba(124, 58, 255, 0.08); color: var(--text-primary); }
body[data-catalog-theme="light"] .srn-modal-close { border-color: var(--cat-border); }
body[data-catalog-theme="light"] .srn-modal-close:hover { background: var(--cat-hover); }

.srn-modal-body {
  padding: 0 24px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.srn-modal-body p { margin: 0 0 10px; }
.srn-modal-body p:last-child { margin-bottom: 0; }
.srn-modal-summary {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(124, 58, 255, 0.08);
  border: 1px solid rgba(124, 58, 255, 0.20);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-secondary);
}
.srn-modal-summary strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.srn-modal-actions {
  display: flex;
  gap: 10px;
  padding: 16px 24px 22px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.srn-modal-btn {
  height: 42px;
  padding: 0 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.srn-modal-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--card-border);
}
.srn-modal-btn--ghost:hover { background: rgba(124, 58, 255, 0.08); }
body[data-catalog-theme="light"] .srn-modal-btn--ghost { border-color: var(--cat-border); }
body[data-catalog-theme="light"] .srn-modal-btn--ghost:hover { background: var(--cat-hover); }
.srn-modal-btn--primary {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
}
.srn-modal-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(124, 58, 255, 0.32); }
.srn-modal-btn--danger {
  background: #DC2626;
  color: #FFF;
}
.srn-modal-btn--danger:hover { background: #B91C1C; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(220, 38, 38, 0.32); }

@media (max-width: 500px) {
  .srn-modal-actions { flex-direction: column-reverse; }
  .srn-modal-actions .srn-modal-btn { width: 100%; }
}

/* ============================================================
   MINI-CART HOVER (desktop only)
   ============================================================ */
.srn-mini-cart {
  position: absolute;
  z-index: 80;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40);
  font-family: 'Inter', system-ui, sans-serif;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  overflow: hidden;
}
.srn-mini-cart.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.srn-mini-cart[hidden] { display: none; }
body[data-catalog-theme="light"] .srn-mini-cart {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  box-shadow: 0 16px 40px rgba(67, 30, 150, 0.14);
}

.srn-mini-cart-inner { padding: 14px 16px; }
.srn-mini-cart-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.srn-mini-cart-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.srn-mini-cart-line {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}
.srn-mini-cart-img {
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-catalog-theme="light"] .srn-mini-cart-img { background: #F4F1F9; }
.srn-mini-cart-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.srn-mini-cart-line-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srn-mini-cart-line-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.srn-mini-cart-more {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  font-style: italic;
}
.srn-mini-cart-totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--card-border);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
body[data-catalog-theme="light"] .srn-mini-cart-totals { border-top-color: var(--cat-border); }
.srn-mini-cart-totals strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.srn-mini-cart-cta-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.srn-mini-cart-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.srn-mini-cart-cta--primary {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
}
.srn-mini-cart-cta--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124, 58, 255, 0.30); }
.srn-mini-cart-cta--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--card-border);
}
.srn-mini-cart-cta--secondary:hover { background: rgba(124, 58, 255, 0.08); border-color: rgba(124, 58, 255, 0.30); }
body[data-catalog-theme="light"] .srn-mini-cart-cta--secondary {
  border-color: var(--cat-border);
  background: var(--cat-surface);
}
body[data-catalog-theme="light"] .srn-mini-cart-cta--secondary:hover { background: var(--cat-hover); }

.srn-mini-cart-empty {
  padding: 20px 8px;
  text-align: center;
}
.srn-mini-cart-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.srn-mini-cart-empty-cta {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(124, 58, 255, 0.10);
  color: #D9B8FF;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
body[data-catalog-theme="light"] .srn-mini-cart-empty-cta { background: var(--cat-hover); color: #431E96; }
.srn-mini-cart-empty-cta:hover { background: rgba(124, 58, 255, 0.18); }
body[data-catalog-theme="light"] .srn-mini-cart-empty-cta:hover { background: rgba(124, 58, 255, 0.18); color: #431E96; }

/* Hide mini-cart on mobile/tablet */
@media (max-width: 1023px) {
  .srn-mini-cart { display: none !important; }
}

/* ============================================================
   CART BADGE animation (.cat-cart-pill-badge + futur badges)
   ============================================================ */
.cat-cart-pill-badge.is-bumped,
[data-cart-badge].is-bumped {
  animation: srn-badge-bump 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes srn-badge-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ============================================================
   PHASE 3.5 LOT 3 — Catalog Layout + Cards Premium + B2B Volume Pricing UX
   Premium B2B redesign : 1440px max-width, view switcher grid4/grid3/list,
   mobile filters drawer, active chips bar, premium cards with inline qty
   stepper, premium cart icon, volume pricing UX-only display.
   ============================================================ */

/* ============================================================
   Layout container : passage 1200 -> 1440px
   ============================================================ */
.cat-body-inner {
  max-width: 1440px;
}

/* ============================================================
   Results bar : count + sort + filters mobile + view switch
   ============================================================ */
.cat-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
}
body[data-catalog-theme="light"] .cat-results-bar { border-bottom-color: var(--cat-border); }

.cat-results-bar-left,
.cat-results-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-results-bar-count {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Mobile filters btn (only visible <1024) */
.cat-results-bar-filtersbtn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cat-results-bar-filtersbtn svg { width: 16px; height: 16px; }
.cat-results-bar-filtersbtn:hover { background: rgba(124, 58, 255, 0.10); border-color: rgba(124, 58, 255, 0.30); }
.cat-results-bar-filtersbtn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
body[data-catalog-theme="light"] .cat-results-bar-filtersbtn { border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-results-bar-filtersbtn:hover { background: var(--cat-hover); }

@media (max-width: 1023px) {
  .cat-results-bar-filtersbtn { display: inline-flex; }
}

/* View switcher segmented */
.cat-view-switch {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  gap: 2px;
}
body[data-catalog-theme="light"] .cat-view-switch {
  background: var(--cat-input);
  border-color: var(--cat-border);
}
.cat-view-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.cat-view-switch-btn svg { width: 14px; height: 14px; }
.cat-view-switch-btn:hover { color: var(--text-primary); }
.cat-view-switch-btn.is-active {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
}
/* Mobile : grid5 et grid4 absurdes sur petit ecran (degradent a 1-2 cols),
   on ne propose que grid3 et list. */
@media (max-width: 900px) {
  .cat-view-switch-btn[data-view="grid5"] { display: none; }
}
@media (max-width: 600px) {
  .cat-view-switch-btn[data-view="grid4"] { display: none; }
}

/* ============================================================
   Active chips bar
   ============================================================ */
.cat-active-chips {
  margin: 14px 0 18px;
  min-height: 32px;
}
.cat-active-chips[hidden] { display: none; }
.cat-active-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cat-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: rgba(124, 58, 255, 0.10);
  border: 1px solid rgba(124, 58, 255, 0.22);
  border-radius: 999px;
  color: #D9B8FF;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cat-active-chip svg {
  width: 11px;
  height: 11px;
  opacity: 0.8;
}
.cat-active-chip:hover {
  background: rgba(124, 58, 255, 0.18);
  border-color: rgba(124, 58, 255, 0.40);
}
body[data-catalog-theme="light"] .cat-active-chip {
  background: rgba(67, 30, 150, 0.08);
  border-color: rgba(67, 30, 150, 0.18);
  color: #431E96;
}
body[data-catalog-theme="light"] .cat-active-chip:hover {
  background: rgba(67, 30, 150, 0.14);
  border-color: rgba(67, 30, 150, 0.32);
}
.cat-active-chips-clear {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 6px;
}
.cat-active-chips-clear:hover { color: var(--text-primary); }

/* ============================================================
   GRID — variantes grid4, grid3, list
   ============================================================ */
.cat-grid {
  display: grid;
  gap: 20px;
  /* Phase 3.7.5 : si la grille n est pas pleine (1-2 cards apres recherche),
     les cards restent en haut a gauche, taille normale, jamais etalees. */
  justify-content: start;
}
.cat-grid--g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cat-grid--g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-grid--g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-grid--list {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Auto fallback : si JS ne s'est pas exécuté, on prend grid3.
   Phase 3.7.5 : auto-fill + max-width 320px pour eviter l etirement
   quand peu de cartes (ex: resultat de recherche avec 1 produit). */
.cat-grid:not(.cat-grid--g5):not(.cat-grid--g4):not(.cat-grid--g3):not(.cat-grid--list) {
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
}

/* Phase 3.7.5 : breakpoints avec g5 inclus */
@media (max-width: 1439px) {
  .cat-grid--g5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .cat-grid--g5,
  .cat-grid--g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cat-grid--g5,
  .cat-grid--g4,
  .cat-grid--g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cat-grid--g5,
  .cat-grid--g4,
  .cat-grid--g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 339px) {
  .cat-grid--g5,
  .cat-grid--g4,
  .cat-grid--g3 { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   CARD — base + GRID variant
   ============================================================ */
.cat-card {
  /* Reset some inherited rules from base block — these override the earlier .cat-card */
}
.cat-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* Restructure card-body : on supprime cat-card-foot ancien, on utilise cat-card-price-block + cat-card-actions */
.cat-card-body {
  gap: 8px;
  padding: 14px 14px 14px;
}
.cat-card-name { min-height: 38px; }
.cat-card-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
}

.cat-card-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
}
.cat-card-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cat-card-price {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.cat-card-vat-mention {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.cat-card-volume-mention {
  font-size: 11px;
  font-weight: 600;
  color: #D9B8FF;
  letter-spacing: 0.01em;
}
body[data-catalog-theme="light"] .cat-card-volume-mention {
  color: #A202C7;
}

/* Card actions zone (stepper + add btn) */
.cat-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Stepper : caché par défaut, visible si in-cart ou au hover desktop */
.cat-card-qty {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  height: 36px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  pointer-events: none;
}
.cat-card:hover .cat-card-qty,
.cat-card.is-in-cart .cat-card-qty {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cat-card.is-in-cart .cat-card-qty {
  border-color: rgba(124, 58, 255, 0.40);
}
body[data-catalog-theme="light"] .cat-card-qty {
  background: var(--cat-input);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-card.is-in-cart .cat-card-qty {
  border-color: rgba(67, 30, 150, 0.32);
}
.cat-card-qty-btn {
  width: 28px;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.cat-card-qty-btn svg { width: 12px; height: 12px; }
.cat-card-qty-btn:hover:not(:disabled) { background: rgba(124, 58, 255, 0.14); }
.cat-card-qty-btn:disabled { color: var(--text-muted); cursor: not-allowed; }
.cat-card-qty-value {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Bouton Ajouter premium (remplace l'ancien bouton 38x38 +) */
.cat-card-add {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFF;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 12px rgba(67, 30, 150, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
}
.cat-card-add:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 255, 0.50);
}
.cat-card-add-icon { width: 18px; height: 18px; flex-shrink: 0; }
.cat-card-add-label {
  font-weight: 700;
}
.cat-card.is-in-cart .cat-card-add {
  background: rgba(0, 196, 106, 0.18);
  color: #6FE1A7;
  box-shadow: none;
  border: 1px solid rgba(0, 196, 106, 0.40);
}
.cat-card.is-in-cart .cat-card-add:hover {
  background: rgba(0, 196, 106, 0.26);
  transform: translateY(-1px);
}
body[data-catalog-theme="light"] .cat-card.is-in-cart .cat-card-add {
  background: rgba(5, 150, 105, 0.10);
  color: #047857;
  border-color: rgba(5, 150, 105, 0.30);
}
.cat-card-add:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
body[data-catalog-theme="light"] .cat-card-add:disabled {
  background: var(--cat-input);
  color: var(--text-muted);
}

/* Adaptive label : icône seule si card étroite (grid4 sur écran < 1280) */
@media (max-width: 1279px) {
  .cat-grid--g4 .cat-card-add-label { display: none; }
  .cat-grid--g4 .cat-card-add { padding: 0; flex: 0 0 36px; width: 36px; }
}
@media (max-width: 700px) {
  .cat-grid--g3 .cat-card-add-label { display: none; }
  .cat-grid--g3 .cat-card-add { padding: 0; flex: 0 0 36px; width: 36px; }
}
/* Mobile 2 cols : compresser le bouton "Ajouter" en icone seule (cards etroites)
   - couvre .cat-grid--g5 (cas localStorage utilisateur) et .cat-grid auto-fit
   - .cat-grid--list non concerne (regle inline a la fin) */
@media (max-width: 600px) {
  .cat-grid--g5 .cat-card-add-label,
  .cat-grid:not(.cat-grid--list):not(.cat-grid--g3):not(.cat-grid--g4):not(.cat-grid--g5) .cat-card-add-label { display: none; }
  .cat-grid--g5 .cat-card-add,
  .cat-grid:not(.cat-grid--list):not(.cat-grid--g3):not(.cat-grid--g4):not(.cat-grid--g5) .cat-card-add { padding: 0; flex: 0 0 36px; width: 36px; }
}

/* Mobile : stepper toujours visible (pas de hover) */
@media (max-width: 1023px) {
  .cat-card-qty {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ============================================================
   CARD — LIST variant
   ============================================================ */
.cat-card--list {
  flex-direction: row;
  align-items: stretch;
}
.cat-grid--list .cat-card {
  display: flex;
  flex-direction: row;
  border-radius: 14px;
  /* Lot FRONT-CATALOG-LIST-1 : override du max-width: 320px de .cat-card (ligne 303, pose en Phase 3.7.5 pour eviter l etirement d une card orpheline en vue grille). En vue liste, chaque card doit occuper toute la largeur disponible du conteneur produits. */
  max-width: none;
}
.cat-grid--list .cat-card-media {
  flex-shrink: 0;
  width: 120px;
  height: auto;
  min-height: 120px;
  aspect-ratio: auto;
}
/* Phase 3.6 : padding mode liste cumule avec base 14px -> on garde 14px,
   inutile d'imposer 8px. Conserve fond blanc. */
.cat-grid--list .cat-card-media img { padding: 14px; }
.cat-grid--list .cat-card-featured {
  font-size: 9px;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
}
.cat-grid--list .cat-card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  padding: 16px 18px;
  align-items: center;
}
.cat-grid--list .cat-card-meta {
  grid-column: 1 / 2;
  margin-bottom: 0;
}
.cat-grid--list .cat-card-name {
  grid-column: 1 / 2;
  min-height: 0;
  -webkit-line-clamp: 1;
  font-size: 15px;
}
.cat-grid--list .cat-card-desc {
  grid-column: 1 / 2;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
}
.cat-grid--list .cat-card-price-block {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  align-self: center;
  align-items: flex-end;
  text-align: right;
  margin-top: 0;
  padding-top: 0;
  min-width: 160px;
}
.cat-grid--list .cat-card-price-wrap { justify-content: flex-end; }
.cat-grid--list .cat-card-volume-mention { text-align: right; }
.cat-grid--list .cat-card-actions {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  justify-self: flex-end;
  margin-top: 8px;
  min-width: 240px;
  justify-content: flex-end;
}
/* En vue list, stepper toujours visible (densité dense) */
.cat-grid--list .cat-card-qty {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cat-grid--list .cat-card-add-label { display: inline; }
.cat-grid--list .cat-card-add { width: auto; flex: 0 1 auto; padding: 0 16px; }

@media (max-width: 768px) {
  .cat-grid--list .cat-card {
    flex-direction: column;
  }
  .cat-grid--list .cat-card-media {
    width: 100%;
    height: 160px;
    min-height: 0;
  }
  .cat-grid--list .cat-card-body {
    display: flex;
    flex-direction: column;
  }
  .cat-grid--list .cat-card-price-block {
    align-items: flex-start;
    text-align: left;
    margin-top: 8px;
    min-width: 0;
  }
  .cat-grid--list .cat-card-price-wrap { justify-content: flex-start; }
  .cat-grid--list .cat-card-volume-mention { text-align: left; }
  .cat-grid--list .cat-card-actions {
    justify-self: stretch;
    min-width: 0;
    width: 100%;
  }
  .cat-grid--list .cat-card-add { flex: 1 1 auto; }
}

/* ============================================================
   PDP — bloc tarifs dégressifs B2B
   ============================================================ */
.cat-pdp-volume-block {
  margin: 16px 0;
  padding: 16px 18px;
  background: rgba(124, 58, 255, 0.06);
  border: 1px solid rgba(124, 58, 255, 0.20);
  border-radius: 12px;
}
body[data-catalog-theme="light"] .cat-pdp-volume-block {
  background: rgba(67, 30, 150, 0.04);
  border-color: rgba(67, 30, 150, 0.16);
}
.cat-pdp-volume-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cat-pdp-volume-head svg {
  width: 16px;
  height: 16px;
  color: #D9B8FF;
}
body[data-catalog-theme="light"] .cat-pdp-volume-head svg { color: #7C3AFF; }
.cat-pdp-volume-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}
.cat-pdp-volume-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 13px;
}
.cat-pdp-volume-table tr {
  border-bottom: 1px solid rgba(124, 58, 255, 0.16);
}
.cat-pdp-volume-table tr:last-child { border-bottom: none; }
body[data-catalog-theme="light"] .cat-pdp-volume-table tr {
  border-bottom-color: rgba(67, 30, 150, 0.12);
}
.cat-pdp-volume-table th,
.cat-pdp-volume-table td {
  padding: 9px 4px;
  text-align: left;
}
.cat-pdp-volume-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  width: 40%;
}
.cat-pdp-volume-table td {
  color: var(--text-secondary);
  font-weight: 500;
}
.cat-pdp-volume-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-tertiary);
}
.cat-pdp-volume-note svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ============================================================
   PANIER — badge remise quantité (qty >= 5)
   ============================================================ */
.cat-cart-volume-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 5px 10px;
  background: rgba(192, 38, 211, 0.10);
  border: 1px solid rgba(192, 38, 211, 0.28);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #C026D3;
  line-height: 1.3;
  max-width: max-content;
}
.cat-cart-volume-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
body[data-catalog-theme="light"] .cat-cart-volume-badge {
  background: rgba(162, 2, 199, 0.08);
  border-color: rgba(162, 2, 199, 0.22);
  color: #A202C7;
}

/* ============================================================
   DRAWER CART — badge volume + auth note (Lot 3 additions to Lot 2)
   ============================================================ */
.srn-volume-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 5px 10px;
  background: rgba(192, 38, 211, 0.10);
  border: 1px solid rgba(192, 38, 211, 0.28);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #C026D3;
  line-height: 1.3;
  max-width: max-content;
}
.srn-volume-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
body[data-catalog-theme="light"] .srn-volume-badge {
  background: rgba(162, 2, 199, 0.08);
  border-color: rgba(162, 2, 199, 0.22);
  color: #A202C7;
}

/* Phase 3.6 : note auth drawer plus visible.
   Bloc alerte informative B2B propre, plus discrete petite ligne grise. */
.srn-cart-auth-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(124, 58, 255, 0.14);
  border: 1px solid rgba(124, 58, 255, 0.40);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #E8DAFF;
}
.srn-cart-auth-note-title {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
  color: #F4E9FF;
  margin-bottom: 2px;
  letter-spacing: 0.005em;
}
.srn-cart-auth-note-body {
  display: block;
  color: #D2BFF0;
}
.srn-cart-auth-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #C8A8FF;
  margin-top: 1px;
}
/* Note auth dans le body scrollable (mobile) : version plus discrete */
.srn-cart-auth-note--in-body {
  margin-top: 14px;
  margin-left: 18px;
  margin-right: 18px;
  margin-bottom: 4px;
}

/* Phase 3.6 : note auth drawer light theme — fond violet tres clair,
   texte violet fonce pour contraste. */
body[data-catalog-theme="light"] .srn-cart-auth-note {
  background: rgba(67, 30, 150, 0.08);
  border-color: rgba(67, 30, 150, 0.28);
  color: #431E96;
}
body[data-catalog-theme="light"] .srn-cart-auth-note-title { color: #2A0F60; }
body[data-catalog-theme="light"] .srn-cart-auth-note-body { color: #431E96; }
body[data-catalog-theme="light"] .srn-cart-auth-note svg { color: #7C3AFF; }

/* ============================================================
   FILTRES MOBILE : quand déplacés dans le drawer
   ============================================================ */
.cat-filters.cat-filters--in-drawer {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  padding: 18px 24px;
  background: transparent;
  border: none;
  border-radius: 0;
}
.cat-filters.cat-filters--in-drawer .cat-filter-head {
  display: none; /* le drawer fournit déjà le header + croix */
}

/* ============================================================
   Small-touchups : compat layout 1440 + spacing
   ============================================================ */
.cat-body { padding: 36px 32px 80px; }
.cat-body-inner { gap: 32px; }

/* ============================================================
   Sort field intégré dans la barre résultats (à terme).
   Pour Lot 3, on garde le sort dans la sidebar filtres.
   Le sort reste accessible via le drawer mobile via l'aside déplacée.
   ============================================================ */

/* ============================================================
   PHASE 3.5 LOT 4 — Premium polish : icon-only buttons, left drawer
   filters, price slider, PDP redesign, free shipping ≥ 200 € HT.
   ============================================================ */

/* ============================================================
   Drawer LEFT-side variant
   ============================================================ */
.srn-drawer-panel.srn-drawer-panel--left {
  right: auto;
  left: 0;
  transform: translateX(-105%);
  border-left: none;
  border-right: 1px solid var(--card-border);
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
}
.srn-drawer-panel.srn-drawer-panel--left.is-open {
  transform: translateX(0);
}
body[data-catalog-theme="light"] .srn-drawer-panel.srn-drawer-panel--left {
  border-right-color: var(--cat-border);
  box-shadow: 24px 0 60px rgba(67, 30, 150, 0.10);
}

/* ============================================================
   Layout : modes filtres (Phase 3.7.2)
   - inline (defaut)  : sidebar 240px visible cote produits
   - drawer (option)  : sidebar masquee, accessible via panneau slide
   ============================================================ */
/* La sidebar source reste dans le DOM pour permettre le move dans le drawer. */
.cat-body-inner { max-width: 1600px; }

/* Mode drawer : sidebar masquee, grille pleine largeur */
body[data-cat-filters-mode="drawer"] .cat-body-inner {
  display: block;
}
body[data-cat-filters-mode="drawer"] .cat-body-inner > .cat-filters {
  display: none;
}
body[data-cat-filters-mode="drawer"] .cat-body-inner > .cat-main-col {
  width: 100%;
}

/* Mode inline (defaut) : sidebar visible 240px + main 1fr (deja defini ligne 149) */
/* Aucune regle supplementaire necessaire : on laisse le grid 240px 1fr s appliquer */

/* Quand l aside .cat-filters est deplacee dans le drawer, elle s affiche dedans */
.cat-filters.cat-filters--in-drawer {
  display: block;
}

/* ============================================================
   Bandeau livraison gratuite global (catalogue)
   ============================================================ */
.cat-free-shipping-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.08) 0%, rgba(16, 185, 129, 0.10) 100%);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.cat-free-shipping-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.15), transparent 60%);
  pointer-events: none;
}
.cat-free-shipping-banner svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: #10B981;
  z-index: 1;
}
.cat-free-shipping-banner-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 1;
}
.cat-free-shipping-banner-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.cat-free-shipping-banner-text span {
  font-size: 13px;
  color: var(--text-secondary);
}
body[data-catalog-theme="light"] .cat-free-shipping-banner {
  background: linear-gradient(135deg, rgba(67, 30, 150, 0.05) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-color: rgba(5, 150, 105, 0.32);
}
body[data-catalog-theme="light"] .cat-free-shipping-banner svg { color: #059669; }
@media (max-width: 600px) {
  .cat-free-shipping-banner { padding: 12px 14px; gap: 10px; }
  .cat-free-shipping-banner svg { width: 22px; height: 22px; }
}

/* ============================================================
   Results bar : bouton "Filtrer & Trier" visible TOUTES résolutions
   ============================================================ */
.cat-results-bar-filtersbtn { display: inline-flex; }
@media (max-width: 1023px) { .cat-results-bar-filtersbtn { display: inline-flex; } }
.cat-results-bar-filtersbtn {
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.08) 0%, rgba(162, 2, 199, 0.04) 100%);
}
.cat-results-bar-filtersbtn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.16) 0%, rgba(162, 2, 199, 0.08) 100%);
  border-color: rgba(124, 58, 255, 0.40);
}

/* ============================================================
   Cards — alignement HT inline + icone-seule + badge livraison
   ============================================================ */
.cat-card-price-wrap {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: nowrap;
}
.cat-card-vat-mention {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  /* déjà mono via Lot 3 */
}

/* Badge "Livraison offerte" sur les cards (si price >= 200) */
.cat-card-shipping-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.92), rgba(5, 150, 105, 0.92));
  color: #FFF;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35);
  backdrop-filter: blur(4px);
}
.cat-card-shipping-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .cat-card-shipping-badge { font-size: 9.5px; padding: 3px 7px; }
}

/* Bouton .cat-card-add : icone-seule strict, taille carré 40px */
.cat-card-add {
  width: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  height: 40px;
  gap: 0;
  position: relative;
  border-radius: 11px;
}
.cat-card-add-icon { width: 18px; height: 18px; }
.cat-card-add::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.20), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cat-card-add:hover::after { opacity: 1; }
/* Override pour la vue list (icone seule aussi, mais carré) */
.cat-grid--list .cat-card-add {
  width: 44px !important;
  flex: 0 0 44px !important;
  height: 44px;
}
/* Override le label : il n'existe plus dans le DOM, mais on garde un fallback no-display */
.cat-card-add-label { display: none !important; }

/* Stepper card en list : hauteur match bouton */
.cat-grid--list .cat-card-qty { height: 44px; }
.cat-grid--list .cat-card-actions { gap: 10px; }

/* ============================================================
   FILTRES : refonte premium dans le drawer left
   ============================================================ */
.cat-filters.cat-filters--in-drawer {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  padding: 20px 24px 24px;
  background: transparent;
  border: none;
  border-radius: 0;
}
.cat-filters.cat-filters--in-drawer .cat-filter-head { display: none; }
.cat-filters.cat-filters--in-drawer .cat-results-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}
body[data-catalog-theme="light"] .cat-filters.cat-filters--in-drawer .cat-results-count {
  border-bottom-color: var(--cat-border);
}

.cat-filter-group {
  padding: 16px 0;
  border-bottom: 1px solid var(--card-border);
}
body[data-catalog-theme="light"] .cat-filter-group { border-bottom-color: var(--cat-border); }
.cat-filter-group:last-of-type { border-bottom: none; }
.cat-filter-group-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cat-filter-group-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: linear-gradient(180deg, #7C3AFF 0%, #A202C7 100%);
  border-radius: 2px;
}

/* Filter option (radio / checkbox) premium */
.cat-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
  font-size: 13px;
  color: var(--text-secondary);
}
.cat-filter-option:hover {
  background: rgba(124, 58, 255, 0.08);
  color: var(--text-primary);
}
body[data-catalog-theme="light"] .cat-filter-option:hover {
  background: rgba(67, 30, 150, 0.06);
}
.cat-filter-option input[type="radio"],
.cat-filter-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--card-border);
  background: transparent;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cat-filter-option input[type="radio"] { border-radius: 50%; }
.cat-filter-option input[type="checkbox"] { border-radius: 4px; }
.cat-filter-option input[type="radio"]:checked,
.cat-filter-option input[type="checkbox"]:checked {
  border-color: #7C3AFF;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
}
.cat-filter-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #FFF;
}
.cat-filter-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cat-filter-option input:focus-visible {
  outline: 2px solid rgba(124, 58, 255, 0.50);
  outline-offset: 2px;
}
.cat-filter-option-label {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.35;
}
.cat-filter-option-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Select Tri premium */
.cat-filter-select {
  width: 100%;
  padding: 10px 12px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
  /* Reset apparence native cross-browser (Lot 10 hardened) */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Chevron custom via background-image (jamais en shorthand pour preserver no-repeat) */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23D9B8FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px;
}
/* Firefox : retirer l'effet de focus interne du select */
.cat-filter-select::-ms-expand { display: none; }
.cat-filter-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--text-primary);
}
.cat-filter-select:hover { border-color: rgba(124, 58, 255, 0.40); }
.cat-filter-select:focus { outline: none; border-color: #7C3AFF; box-shadow: 0 0 0 3px rgba(124, 58, 255, 0.18); }
body[data-catalog-theme="light"] .cat-filter-select {
  background-color: var(--cat-input);
  border-color: var(--cat-border);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237C3AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ============================================================
   Price slider double thumb premium
   ============================================================ */
.cat-filter-price-wrap { display: flex; flex-direction: column; gap: 12px; padding: 6px 4px 0; }
.cat-filter-price-slider {
  position: relative;
  height: 28px;
  margin: 0 12px;
  touch-action: none;
}
.cat-filter-price-track,
.cat-filter-price-track-active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
}
.cat-filter-price-track {
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.10);
}
body[data-catalog-theme="light"] .cat-filter-price-track {
  background: rgba(67, 30, 150, 0.10);
}
.cat-filter-price-track-active {
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #7C3AFF 0%, #A202C7 100%);
  box-shadow: 0 0 12px rgba(124, 58, 255, 0.35);
}
.cat-filter-price-thumb {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: #FFF;
  border: 2.5px solid #7C3AFF;
  border-radius: 50%;
  cursor: grab;
  padding: 0;
  transform: translateY(-50%);
  transition: box-shadow 0.18s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(67, 30, 150, 0.30);
  touch-action: none;
}
.cat-filter-price-thumb:hover,
.cat-filter-price-thumb:focus-visible {
  box-shadow: 0 4px 14px rgba(124, 58, 255, 0.55), 0 0 0 4px rgba(124, 58, 255, 0.20);
  outline: none;
  transform: translateY(-50%) scale(1.08);
}
.cat-filter-price-thumb:active { cursor: grabbing; }
body[data-catalog-theme="light"] .cat-filter-price-thumb { border-color: #431E96; }

.cat-filter-price-bounds {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 0 2px;
}
.cat-filter-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-filter-price-row input {
  flex: 1;
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cat-filter-price-row input:focus {
  outline: none;
  border-color: #7C3AFF;
  background: rgba(124, 58, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(124, 58, 255, 0.14);
}
body[data-catalog-theme="light"] .cat-filter-price-row input {
  background: var(--cat-input);
  border-color: var(--cat-border);
}
.cat-filter-price-dash { color: var(--text-muted); font-weight: 700; }

/* Info dégressifs en bas du drawer */
.cat-filter-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(124, 58, 255, 0.06);
  border: 1px solid rgba(124, 58, 255, 0.18);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.45;
}
.cat-filter-info svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #D9B8FF;
  margin-top: 2px;
}
body[data-catalog-theme="light"] .cat-filter-info {
  background: rgba(67, 30, 150, 0.04);
  border-color: rgba(67, 30, 150, 0.14);
}
body[data-catalog-theme="light"] .cat-filter-info svg { color: #7C3AFF; }

/* ============================================================
   PDP — prix HT inline + bouton premium
   ============================================================ */
.cat-pdp-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px;
}
.cat-pdp-price {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cat-pdp-ht-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--card-border);
  border-radius: 4px;
}
body[data-catalog-theme="light"] .cat-pdp-ht-tag { border-color: var(--cat-border); }

/* Bouton PDP "Ajouter" : keep label but icon premium */
.cat-pdp-add {
  position: relative;
  overflow: hidden;
}
.cat-pdp-add::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cat-pdp-add:hover::after { opacity: 1; }
.cat-pdp-add svg { width: 20px; height: 20px; }

/* ============================================================
   PDP — Trust block 4 items premium
   ============================================================ */
.cat-pdp-trust {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cat-pdp-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--card-border);
  border-radius: 11px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.2s ease;
}
.cat-pdp-trust-item:hover {
  background: rgba(124, 58, 255, 0.06);
  border-color: rgba(124, 58, 255, 0.28);
  transform: translateY(-1px);
}
.cat-pdp-trust-item--accent {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(124, 58, 255, 0.05) 100%);
  border-color: rgba(16, 185, 129, 0.32);
}
.cat-pdp-trust-item--accent:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(124, 58, 255, 0.10) 100%);
  border-color: rgba(16, 185, 129, 0.50);
}
body[data-catalog-theme="light"] .cat-pdp-trust-item {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-pdp-trust-item:hover {
  background: rgba(67, 30, 150, 0.04);
  border-color: rgba(67, 30, 150, 0.22);
}
body[data-catalog-theme="light"] .cat-pdp-trust-item--accent {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(67, 30, 150, 0.04) 100%);
  border-color: rgba(5, 150, 105, 0.32);
}

.cat-pdp-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: rgba(124, 58, 255, 0.10);
  border-radius: 9px;
  color: #D9B8FF;
  transition: background 0.18s ease, color 0.18s ease;
}
.cat-pdp-trust-icon svg { width: 20px; height: 20px; }
.cat-pdp-trust-item--accent .cat-pdp-trust-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
}
body[data-catalog-theme="light"] .cat-pdp-trust-icon {
  background: rgba(67, 30, 150, 0.08);
  color: #7C3AFF;
}
body[data-catalog-theme="light"] .cat-pdp-trust-item--accent .cat-pdp-trust-icon {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
}

.cat-pdp-trust-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-pdp-trust-body strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.cat-pdp-trust-body span {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .cat-pdp-trust { grid-template-columns: 1fr; }
}

/* ============================================================
   PDP — Sections Description + Caractéristiques premium
   ============================================================ */
.cat-pdp-sections {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
@media (max-width: 980px) {
  .cat-pdp-sections { grid-template-columns: 1fr; gap: 24px; }
}

.cat-pdp-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}
.cat-pdp-card:hover { border-color: rgba(124, 58, 255, 0.22); }
body[data-catalog-theme="light"] .cat-pdp-card {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-pdp-card:hover { border-color: rgba(67, 30, 150, 0.20); }

.cat-pdp-card-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}
body[data-catalog-theme="light"] .cat-pdp-card-head { border-bottom-color: var(--cat-border); }
.cat-pdp-card-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D9B8FF;
  margin-bottom: 6px;
  padding: 3px 10px;
  background: rgba(124, 58, 255, 0.10);
  border-radius: 999px;
}
body[data-catalog-theme="light"] .cat-pdp-card-eyebrow {
  color: #7C3AFF;
  background: rgba(67, 30, 150, 0.06);
}
.cat-pdp-card-title {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.cat-pdp-long {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.cat-pdp-long-lead {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.cat-pdp-long-lead::first-letter {
  font-size: 36px;
  font-weight: 800;
  float: left;
  line-height: 1;
  margin: 4px 8px 0 0;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Caractéristiques : dl premium */
.cat-pdp-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cat-pdp-specs-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
  align-items: baseline;
}
.cat-pdp-specs-row:last-child { border-bottom: none; }
body[data-catalog-theme="light"] .cat-pdp-specs-row { border-bottom-color: var(--cat-border); }
.cat-pdp-specs-row dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cat-pdp-specs-row dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Compatibilités : liste check */
.cat-pdp-compats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-pdp-compats li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.cat-pdp-compats li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #10B981;
}
body[data-catalog-theme="light"] .cat-pdp-compats li svg { color: #059669; }

/* ============================================================
   PHASE 3.5 LOT 5 — Hero shipping card + toggle theme refacto +
   filtres bouton violet + PDP HT inline + bouton à droite +
   logos paiement + grid 5/6 cols.
   ============================================================ */

/* ============================================================
   3. BOUTON "FILTRER & TRIER" — fond violet plein
   ============================================================ */
.cat-results-bar-filtersbtn {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%) !important;
  border-color: transparent !important;
  color: #FFF !important;
  box-shadow: 0 4px 14px rgba(124, 58, 255, 0.30);
}
.cat-results-bar-filtersbtn:hover {
  background: linear-gradient(135deg, #8A4DFF 0%, #B11AD9 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(124, 58, 255, 0.45);
  transform: translateY(-1px);
}
.cat-results-bar-filtersbtn svg { color: #FFF; }
.cat-results-bar-filtersbtn-count {
  background: #FFF;
  color: #7C3AFF;
}

/* ============================================================
   4. PDP — HT inline (force display:flex, fix bug observe)
   ============================================================ */
.cat-pdp-price-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px !important;
  flex-wrap: nowrap;
}
.cat-pdp-price-row > .cat-pdp-price,
.cat-pdp-price-row > .cat-pdp-ht-tag {
  display: inline-block;
}


/* ============================================================
   6. PDP — Bloc paiement & sécurité (logos + mention SSL)
   ============================================================ */
.cat-pdp-payment {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
body[data-catalog-theme="light"] .cat-pdp-payment {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}
.cat-pdp-payment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--card-border);
}
body[data-catalog-theme="light"] .cat-pdp-payment-head {
  border-bottom-color: var(--cat-border);
}
.cat-pdp-payment-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-primary);
}
.cat-pdp-payment-secure svg {
  width: 16px;
  height: 16px;
  color: #10B981;
}
body[data-catalog-theme="light"] .cat-pdp-payment-secure svg {
  color: #059669;
}
.cat-pdp-payment-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cat-pdp-payment-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #FFF;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cat-pdp-payment-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.cat-pdp-payment-logo svg {
  display: block;
  width: 42px;
  height: auto;
}
body[data-catalog-theme="light"] .cat-pdp-payment-logo {
  box-shadow: 0 1px 3px rgba(67, 30, 150, 0.10);
}
body[data-catalog-theme="light"] .cat-pdp-payment-logo:hover {
  box-shadow: 0 3px 9px rgba(67, 30, 150, 0.18);
}
@media (max-width: 480px) {
  .cat-pdp-payment-logo svg { width: 36px; }
}



/* ============================================================
   PHASE 3.5 LOT 6 — Hero packshot premium + toggle clone strict
   + grid 5 max (correction).
   ============================================================ */

/* ============================================================
   1. NOUVELLE ARCHITECTURE HERO TOP
   Grid 2 colonnes sur desktop : [head] | [right-col]
   Sur mobile : stack vertical (1 col)
   ============================================================ */
.cat-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 580px);
  gap: 36px;
  align-items: start;
  flex-wrap: initial;
  margin-bottom: 28px;
}
.cat-hero-head {
  flex: initial;
  min-width: 0;
}
.cat-hero-right-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}
.cat-hero-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 980px) {
  .cat-hero-top {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .cat-hero-actions { justify-content: flex-start; }
}

/* ============================================================
   2. TOGGLE THEME — CLONE STRICT de .cat-cart-pill
   Meme structure CSS (background, border, border-radius, padding,
   font, gap, transitions). SEULES differences:
   - contenu (lune/soleil + label "Mode clair/sombre")
   - icone lune en violet visible (#A78BFA)
   Hover : meme comportement que cart-pill.
   ============================================================ */
.cat-theme-switch {
  /* Identique au strict cat-cart-pill */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.cat-theme-switch:hover {
  border-color: rgba(124, 58, 255, 0.5);
  background: rgba(124, 58, 255, 0.08);
  transform: translateY(-1px);
}
.cat-theme-switch:focus-visible {
  outline: 2px solid rgba(124, 58, 255, 0.6);
  outline-offset: 2px;
}
.cat-theme-switch svg {
  /* Identique cart-pill svg : 18px */
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Icone lune visible (violet plein, comme dans la maquette Sam) */
.cat-theme-switch .icon-moon { color: #A78BFA; }
.cat-theme-switch .icon-sun  { color: #F59E0B; }
/* Switching icon selon theme */
.cat-theme-switch .icon-sun { display: none; }
.cat-theme-switch .icon-moon { display: inline-block; }
body[data-catalog-theme="light"] .cat-theme-switch .icon-sun { display: inline-block; }
body[data-catalog-theme="light"] .cat-theme-switch .icon-moon { display: none; }
.cat-theme-switch-label { white-space: nowrap; }

/* LIGHT theme — identique cart-pill light */
body[data-catalog-theme="light"] .cat-theme-switch {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  color: var(--cat-text);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-theme-switch:hover {
  background: var(--cat-hover);
  border-color: rgba(67, 30, 150, 0.40);
}
body[data-catalog-theme="light"] .cat-theme-switch .icon-moon { color: #7C3AFF; }

/* ============================================================
   3. HERO PACKSHOT CARD — Style produit premium
   Composition : carton 3D isometrique + camion + etiquette + sparks
   Format ~ 580x340px sur desktop, scale-down responsive.
   ============================================================ */
.cat-hero-packshot {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;
  align-items: stretch;
  padding: 26px 28px;
  min-height: 220px;
  background:
    radial-gradient(circle at 80% 30%, rgba(16, 185, 129, 0.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(124, 58, 255, 0.14) 0%, rgba(67, 30, 150, 0.18) 60%, rgba(15, 15, 26, 0.50) 100%);
  border: 1px solid rgba(124, 58, 255, 0.32);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}
.cat-hero-packshot::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.55), rgba(16, 185, 129, 0.30), transparent 65%);
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}
/* Tres legere texture grille */
.cat-hero-packshot::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 80%);
}
body[data-catalog-theme="light"] .cat-hero-packshot {
  background:
    radial-gradient(circle at 80% 30%, rgba(5, 150, 105, 0.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(167, 139, 250, 0.14) 0%, rgba(67, 30, 150, 0.10) 60%, rgba(255, 255, 255, 0.85) 100%);
  border-color: rgba(67, 30, 150, 0.22);
}
body[data-catalog-theme="light"] .cat-hero-packshot::before {
  background: linear-gradient(135deg, rgba(67, 30, 150, 0.30), rgba(5, 150, 105, 0.18), transparent 65%);
  opacity: 0.55;
}

/* Bloc contenu (gauche) */
.cat-hero-packshot-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.cat-hero-packshot-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.20) 0%, rgba(5, 150, 105, 0.30) 100%);
  border: 1px solid rgba(16, 185, 129, 0.50);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #34D399;
  align-self: flex-start;
  width: max-content;
  text-transform: uppercase;
}
.cat-hero-packshot-badge svg { width: 12px; height: 12px; }
body[data-catalog-theme="light"] .cat-hero-packshot-badge {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.10) 0%, rgba(5, 150, 105, 0.18) 100%);
  border-color: rgba(5, 150, 105, 0.45);
  color: #059669;
}
.cat-hero-packshot-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.cat-hero-packshot-title-lead {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.cat-hero-packshot-title-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #FFFFFF 0%, #D9B8FF 70%, #A78BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.cat-hero-packshot-title-amount span {
  font-size: 22px;
  font-weight: 700;
  color: #D9B8FF;
  -webkit-text-fill-color: #D9B8FF;
  letter-spacing: 0.04em;
}
body[data-catalog-theme="light"] .cat-hero-packshot-title-amount {
  background: linear-gradient(135deg, #431E96 0%, #7C3AFF 50%, #A202C7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-catalog-theme="light"] .cat-hero-packshot-title-amount span {
  color: #7C3AFF;
  -webkit-text-fill-color: #7C3AFF;
}
.cat-hero-packshot-title-trail {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.cat-hero-packshot-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 360px;
}

/* Stage visuelle (droite) */
.cat-hero-packshot-stage {
  position: relative;
  width: 100%;
  min-height: 220px;
  display: block;
}
.cat-hero-packshot-floor {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 90%;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.32) 0%, transparent 70%);
  transform: translateX(-50%);
  filter: blur(8px);
  z-index: 0;
}
.cat-hero-packshot-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: drop-shadow(0 20px 30px rgba(67, 30, 150, 0.45));
  animation: cat-packshot-float 4.8s ease-in-out infinite;
}
@keyframes cat-packshot-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 6px)); }
}
.cat-hero-packshot-label {
  transform-origin: center;
  animation: cat-packshot-label-pulse 3.6s ease-in-out infinite;
}
@keyframes cat-packshot-label-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* Mini camion : posit en bas a gauche de la stage, roule lentement */
.cat-hero-packshot-truck {
  position: absolute;
  bottom: 12px;
  left: -10px;
  width: 80px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 6px 12px rgba(162, 2, 199, 0.45));
  animation: cat-packshot-truck-drive 7.2s ease-in-out infinite;
}
@keyframes cat-packshot-truck-drive {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(18px); }
}
.cat-hero-packshot-wheel {
  transform-origin: center;
  transform-box: fill-box;
  animation: cat-packshot-wheel-spin 0.85s linear infinite;
}
@keyframes cat-packshot-wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Particules emerald flottantes */
.cat-hero-packshot-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #34D399 0%, rgba(52, 211, 153, 0.3) 50%, transparent 80%);
  pointer-events: none;
  filter: blur(0.4px);
  z-index: 3;
}
.cat-hero-packshot-spark-1 { top: 14%; right: 8%;  animation: cat-packshot-spark 3.4s ease-in-out infinite; }
.cat-hero-packshot-spark-2 { top: 30%; right: 22%; animation: cat-packshot-spark 4.0s ease-in-out infinite 0.5s; }
.cat-hero-packshot-spark-3 { top: 56%; right: 6%;  animation: cat-packshot-spark 3.8s ease-in-out infinite 1.1s; }
.cat-hero-packshot-spark-4 { top: 70%; right: 24%; animation: cat-packshot-spark 4.4s ease-in-out infinite 1.8s; }
@keyframes cat-packshot-spark {
  0%   { transform: translate(0, 0) scale(0.5);  opacity: 0; }
  25%  { opacity: 1; }
  60%  { transform: translate(-22px, -16px) scale(1.0); opacity: 0.75; }
  100% { transform: translate(-50px, -34px) scale(0.4); opacity: 0; }
}

/* Responsive */
@media (max-width: 1100px) {
  .cat-hero-packshot { grid-template-columns: 1fr 200px; padding: 22px 24px; }
  .cat-hero-packshot-title-amount { font-size: 48px; }
  .cat-hero-packshot-box { width: 170px; }
  .cat-hero-packshot-truck { width: 70px; }
}
@media (max-width: 768px) {
  .cat-hero-packshot {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
    min-height: auto;
  }
  .cat-hero-packshot-stage { min-height: 180px; }
  .cat-hero-packshot-title-amount { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-packshot-box,
  .cat-hero-packshot-truck,
  .cat-hero-packshot-wheel,
  .cat-hero-packshot-label,
  .cat-hero-packshot-spark { animation: none !important; }
}



/* ============================================================
   PHASE 3.5 LOT 7 — Étiquette FedEx + grid g5 dedie +
   PDP actions space-between (bouton colle bord droit).
   ============================================================ */

/* ============================================================
   1. CATALOGUE GRID g5 — classe dediee 5 cols
   g4 retrouve son role natif (4 cols strict).
   ============================================================ */
.cat-grid--g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Auto fallback inclut g5 */
.cat-grid:not(.cat-grid--g5):not(.cat-grid--g4):not(.cat-grid--g3):not(.cat-grid--list) {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Responsive degressif pour g5 :
   1280-1439 : 4 cols (g5 trop dense)
    900-1279 : 3 cols
    600-899  : 2 cols
   <600       : 1 col */
@media (max-width: 1439px) {
  .cat-grid--g5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .cat-grid--g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cat-grid--g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cat-grid--g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 339px) {
  .cat-grid--g5 { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   2. PDP ACTIONS — space-between
   Stepper qty taille fixe a gauche, bouton "Ajouter" colle au
   bord droit du container. Plus de bouton flottant au milieu.
   ============================================================ */
.cat-pdp-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 24px;
}
.cat-pdp-actions .cat-qty {
  flex: 0 0 auto;
}
.cat-pdp-actions .cat-pdp-add {
  /* Phase 3.7.8 : CTA prend tout l espace restant apres le stepper.
     Plus de gap vide au milieu, alignement compact stepper + CTA. */
  flex: 1 1 auto;
  margin-left: 0;
}
@media (max-width: 600px) {
  .cat-pdp-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cat-pdp-actions .cat-qty { align-self: stretch; }
  .cat-pdp-actions .cat-pdp-add { width: 100%; }
}

/* ============================================================
   PHASE 3.5 LOT 8 — Packshot agrandi + bascule + card-actions
   space-between (bouton panier colle bord droit sur cards).
   ============================================================ */

/* ============================================================
   1. PACKSHOT BOX — agrandissement + effet bascule 3D
   Avant : width 200px + float vertical 6px
   Apres : width 280px + bascule rotateY 4deg <-> -4deg (perspective)
   ============================================================ */
.cat-hero-packshot-stage {
  /* Activer perspective pour que rotateY produise un vrai 3D subtil */
  perspective: 1000px;
  perspective-origin: 50% 40%;
}
.cat-hero-packshot-box {
  /* Override Lot 6: agrandir et changer animation */
  width: 280px !important;
  animation: cat-packshot-tilt 5.4s ease-in-out infinite !important;
  transform-style: preserve-3d;
}
@keyframes cat-packshot-tilt {
  0%, 100% {
    transform: translate(-50%, -50%) rotateY(-4deg) rotateX(2deg);
  }
  50% {
    transform: translate(-50%, calc(-50% - 4px)) rotateY(4deg) rotateX(-1deg);
  }
}
@media (max-width: 1100px) {
  .cat-hero-packshot-box { width: 230px !important; }
}
@media (max-width: 768px) {
  .cat-hero-packshot-box { width: 200px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-packshot-box {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ============================================================
   2. CARDS CATALOGUE — bouton panier colle au bord droit
   Avant : flex avec gap 8px, stepper + bouton consecutifs
   Apres : justify-content space-between => bouton tout a droite
   ============================================================ */
.cat-card-actions {
  justify-content: space-between;
}
.cat-card-actions .cat-card-qty {
  flex: 0 0 auto;
}
.cat-card-actions .cat-card-add {
  flex: 0 0 auto;
  margin-left: auto;
}
/* Vue list : conserver le justify-content: flex-end deja present */
.cat-grid--list .cat-card-actions {
  justify-content: flex-end;
}

/* ============================================================
   PHASE 3.5 LOT 9 — Toggle theme SEGMENTE (Dark/Light)
   Style : pill arrondi 12px (match cart-pill) avec 2 segments,
   segment actif violet plein avec moon/sun blanche,
   segment inactif transparent texte secondaire.
   ============================================================ */
.cat-theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  /* Pas de transition globale pour eviter effet diffus au survol */
  font-family: 'Inter', system-ui, sans-serif;
  /* Aucun hover sur le wrapper */
}
.cat-theme-toggle-seg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.20s ease, color 0.20s ease;
  white-space: nowrap;
}
.cat-theme-toggle-seg:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.cat-theme-toggle-seg:focus-visible {
  outline: 2px solid rgba(124, 58, 255, 0.55);
  outline-offset: 2px;
}
.cat-theme-toggle-seg.is-active {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(124, 58, 255, 0.32);
}
.cat-theme-toggle-seg.is-active:hover {
  background: linear-gradient(135deg, #8A4DFF 0%, #B11AD9 100%);
  color: #FFFFFF;
}
.cat-theme-toggle-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.cat-theme-toggle-seg.is-active .cat-theme-toggle-icon { color: #FFFFFF; }
.cat-theme-toggle-seg:not(.is-active) .cat-theme-toggle-icon { color: var(--text-muted); }

/* Light theme : adapter le wrapper */
body[data-catalog-theme="light"] .cat-theme-toggle {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  box-shadow: var(--cat-shadow);
}
body[data-catalog-theme="light"] .cat-theme-toggle-seg {
  color: var(--text-tertiary);
}
body[data-catalog-theme="light"] .cat-theme-toggle-seg:hover {
  background: var(--cat-hover);
  color: var(--cat-text);
}
body[data-catalog-theme="light"] .cat-theme-toggle-seg.is-active {
  background: linear-gradient(135deg, #431E96 0%, #A202C7 100%);
  color: #FFFFFF;
}
body[data-catalog-theme="light"] .cat-theme-toggle-seg:not(.is-active) .cat-theme-toggle-icon { color: #7C3AFF; }

@media (max-width: 600px) {
  .cat-theme-toggle-seg { padding: 7px 11px; font-size: 13px; gap: 6px; }
  .cat-theme-toggle-icon { width: 14px; height: 14px; }
}

/* ============================================================
   PHASE 3.5 LOT 12 — Searchbar overlay A1 + dropdown T3 cosmic
   - Icone loupe dans nav-actions
   - Au clic: searchbar overlay (position absolute) sous le nav
   - Background transparent + blur = match exact du nav
   - Dropdown T3: gradient cosmic violet teinte semi-transparent
   ============================================================ */

/* ============================================================
   0. NAV STICKY (conservation Lot 11)
   ============================================================ */
.page--boutique .sx-1-nav {
  position: sticky;
  top: 0;
  z-index: 51;
}

/* ============================================================
   1. BOUTON LOUPE dans nav-actions
   ============================================================ */
.cat-nav-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
  font-family: inherit;
}
.cat-nav-search-trigger svg {
  width: 18px;
  height: 18px;
}
.cat-nav-search-trigger:hover {
  background: rgba(124, 58, 255, 0.12);
  border-color: rgba(124, 58, 255, 0.30);
  color: #C9A8FF;
}
.cat-nav-search-trigger:focus-visible {
  outline: 2px solid rgba(124, 58, 255, 0.55);
  outline-offset: 2px;
}
.cat-nav-search-trigger[aria-expanded="true"] {
  background: rgba(124, 58, 255, 0.20);
  border-color: rgba(124, 58, 255, 0.50);
  color: #FFFFFF;
}

/* Note : ancien bloc mobile reduisant la loupe a 36x36 supprime ;
   la regle tap-target ci-dessous (pointer: coarse) garantit 44x44 minimum sur touch. */

/* ============================================================
   2. SEARCHBAR OVERLAY (A1)
   Position absolute SOUS le nav, pleine largeur.
   Background transparent + blur = match nav exact.
   ============================================================ */
.cat-searchbar {
  position: fixed;
  top: var(--cat-nav-height, 66px);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 18px 32px;
  /* Match nav exact pour continuite visuelle */
  background: rgba(15, 15, 26, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(124, 58, 255, 0.20);
  /* Animation d'apparition */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.32, 0.72, 0.45, 1);
  pointer-events: none;
}
.cat-searchbar[hidden] {
  display: none;
}
.cat-searchbar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cat-searchbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* Backdrop overlay : masque le contenu de la page quand la searchbar est ouverte */
.cat-search-backdrop {
  position: fixed;
  top: var(--cat-nav-height, 66px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 5, 12, 0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 49;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.cat-search-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Light theme : overlay violet doux au lieu d'un noir 50% tonalement faux */
body[data-catalog-theme="light"] .cat-search-backdrop {
  background: rgba(67, 30, 150, 0.18);
}

/* ============================================================
   3. INPUT premium
   ============================================================ */
.cat-search {
  position: relative;
  width: 100%;
}
.cat-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #A78BFA;
  pointer-events: none;
}
.cat-search-clear {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  color: var(--text-tertiary);
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.18s ease;
  padding: 0;
}
.cat-search-clear svg { width: 14px; height: 14px; }
.cat-search.has-value .cat-search-clear { display: inline-flex; }
.cat-search-clear:hover {
  color: var(--text-primary);
  background: rgba(124, 58, 255, 0.18);
  border-color: rgba(124, 58, 255, 0.32);
}
/* Bouton close (croix) en haut a droite, toujours visible */
.cat-search-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  color: var(--text-tertiary);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.18s ease;
  padding: 0;
}
.cat-search-close svg { width: 16px; height: 16px; }
.cat-search-close:hover {
  color: var(--text-primary);
  background: rgba(124, 58, 255, 0.18);
  border-color: rgba(124, 58, 255, 0.40);
}

.cat-search-input {
  width: 100%;
  height: 56px;
  padding: 0 110px 0 56px;
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.04) 0%, rgba(162, 2, 199, 0.03) 100%);
  border: 1.5px solid rgba(124, 58, 255, 0.30);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  outline: none;
  transition: all 0.22s ease;
}
.cat-search-input::placeholder { color: var(--text-tertiary); font-weight: 400; }
.cat-search-input:focus {
  border-color: rgba(124, 58, 255, 0.60);
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.08) 0%, rgba(162, 2, 199, 0.05) 100%);
  box-shadow: 0 0 0 4px rgba(124, 58, 255, 0.14);
}

/* ============================================================
   4. DROPDOWN T3 — Cosmic violet teinte semi-transparent
   ============================================================ */
.cat-search-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  /* T3 : gradient cosmic violet semi-transparent + blur */
  background: linear-gradient(180deg, rgba(26, 15, 38, 0.92) 0%, rgba(15, 10, 26, 0.94) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(124, 58, 255, 0.24);
  border-radius: 18px;
  box-shadow:
    0 32px 80px rgba(67, 30, 150, 0.32),
    0 0 0 1px rgba(124, 58, 255, 0.08),
    inset 0 1px 0 rgba(124, 58, 255, 0.10);
  padding: 24px;
  max-height: 640px;
  overflow-y: auto;
  display: none;
  z-index: 52;
}
.cat-search-dropdown.open {
  display: block;
  animation: catDropdownIn 0.24s cubic-bezier(0.32, 0.72, 0.45, 1);
}
@keyframes catDropdownIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar custom dropdown */
.cat-search-dropdown::-webkit-scrollbar { width: 8px; }
.cat-search-dropdown::-webkit-scrollbar-track { background: transparent; }
.cat-search-dropdown::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 255, 0.20);
  border-radius: 4px;
}
.cat-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 255, 0.40); }

/* ============================================================
   5. QUICK FILTERS (chips toggles)
   ============================================================ */
.cat-search-quickfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(124, 58, 255, 0.12);
}
.cat-search-quickfilter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(124, 58, 255, 0.04);
  border: 1px solid rgba(124, 58, 255, 0.14);
  border-radius: 999px;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.cat-search-quickfilter svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.cat-search-quickfilter:hover {
  background: rgba(124, 58, 255, 0.10);
  border-color: rgba(124, 58, 255, 0.30);
  color: var(--text-primary);
}
.cat-search-quickfilter.is-active {
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.24) 0%, rgba(162, 2, 199, 0.18) 100%);
  border-color: rgba(124, 58, 255, 0.50);
  color: #FFFFFF;
}
.cat-search-quickfilter.is-active svg { color: #C9A8FF; }

/* ============================================================
   6. SECTIONS du dropdown
   ============================================================ */
.cat-search-section { margin-bottom: 24px; }
.cat-search-section:last-child { margin-bottom: 0; }
.cat-search-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cat-search-section-header h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A8FF;
}
.cat-search-section-header-bar {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(124, 58, 255, 0.40) 0%, transparent 100%);
}
.cat-search-section-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: #C9A8FF;
  background: rgba(124, 58, 255, 0.18);
  padding: 3px 8px;
  border-radius: 10px;
}

/* ============================================================
   7. SECTIONS contenus
   ============================================================ */

/* 7a. Populaires */
.cat-search-popular {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-search-popular-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.10) 0%, rgba(162, 2, 199, 0.06) 100%);
  border: 1px solid rgba(124, 58, 255, 0.20);
  border-radius: 999px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.cat-search-popular-chip svg {
  width: 12px;
  height: 12px;
  color: #A78BFA;
  flex-shrink: 0;
}
.cat-search-popular-chip:hover {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  border-color: transparent;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 255, 0.30);
}
.cat-search-popular-chip:hover svg { color: #FFFFFF; }

/* 7b. Produits */
.cat-search-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-search-product {
  display: block;
  background: linear-gradient(180deg, rgba(124, 58, 255, 0.06) 0%, rgba(124, 58, 255, 0.02) 100%);
  border: 1px solid rgba(124, 58, 255, 0.14);
  border-radius: 14px;
  padding: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.cat-search-product:hover {
  border-color: rgba(124, 58, 255, 0.40);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(124, 58, 255, 0.20);
}
.cat-search-product-img {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  /* Phase 3.9.2 : fond image produit toujours blanc (coherent avec .cat-card-media).
     Les visuels fournisseurs sont sur fond blanc, jamais de violet derriere. */
  background: #FFFFFF;
}
.cat-search-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
}
.cat-search-product-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cat-search-product-badge.is-featured {
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.85) 0%, rgba(162, 2, 199, 0.85) 100%);
}
.cat-search-product-badge.is-new {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.85) 0%, rgba(5, 150, 105, 0.85) 100%);
}
.cat-search-product-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 36px;
  line-height: 1.3;
}
.cat-search-product-brand {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.cat-search-product-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cat-search-product-price {
  font-size: 15px;
  font-weight: 800;
  color: #D9B8FF;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cat-search-product-vat {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* 7c. Categories */
.cat-search-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cat-search-cat-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(124, 58, 255, 0.04);
  border: 1px solid rgba(124, 58, 255, 0.12);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  font-family: inherit;
}
.cat-search-cat-tile:hover {
  background: rgba(124, 58, 255, 0.10);
  border-color: rgba(124, 58, 255, 0.30);
  transform: translateX(2px);
}
.cat-search-cat-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(124, 58, 255, 0.25);
}
.cat-search-cat-icon svg { width: 18px; height: 18px; }
.cat-search-cat-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-search-cat-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.cat-search-cat-count {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

/* 7d. Marques */
.cat-search-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-search-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(124, 58, 255, 0.04);
  border: 1px solid rgba(124, 58, 255, 0.12);
  border-radius: 999px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cat-search-brand-chip svg {
  width: 13px;
  height: 13px;
  color: #A78BFA;
  flex-shrink: 0;
}
.cat-search-brand-chip:hover {
  background: rgba(124, 58, 255, 0.14);
  border-color: rgba(124, 58, 255, 0.35);
  color: #FFFFFF;
}

/* ============================================================
   8. FOOTER du dropdown (CTA "Voir tout")
   ============================================================ */
.cat-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  margin-top: 8px;
  border-top: 1px solid rgba(124, 58, 255, 0.12);
}
.cat-search-footer-text {
  color: var(--text-tertiary);
  font-size: 13px;
}
.cat-search-footer-text strong {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cat-search-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  border: 0;
  border-radius: 10px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}
.cat-search-footer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124, 58, 255, 0.40);
}
.cat-search-footer-cta svg { width: 14px; height: 14px; }

/* ============================================================
   9. MISE EN EVIDENCE terme + etats loading/empty
   ============================================================ */
.cat-search-mark {
  background: rgba(162, 2, 199, 0.30);
  color: #E0C4FF;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 700;
}

.cat-search-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}
.cat-search-state svg {
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cat-search-state-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.cat-search-state-hint {
  font-size: 12.5px;
  color: var(--text-tertiary);
  max-width: 320px;
  line-height: 1.5;
}
.cat-search-spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(124, 58, 255, 0.16);
  border-top-color: #7C3AFF;
  border-radius: 50%;
  animation: catSpin 0.8s linear infinite;
  margin-bottom: 4px;
}
@keyframes catSpin { to { transform: rotate(360deg); } }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cat-search-products { grid-template-columns: repeat(3, 1fr); }
  .cat-search-cats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cat-searchbar { padding: 14px 16px; }
  .cat-search-input { font-size: 14px; height: 50px; padding: 0 100px 0 50px; }
  .cat-search-icon { left: 16px; width: 18px; height: 18px; }
  .cat-search-clear { right: 56px; width: 28px; height: 28px; }
  .cat-search-close { right: 12px; width: 32px; height: 32px; }
  .cat-search-dropdown { padding: 16px; max-height: 70vh; }
  .cat-search-products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-search-product-img { height: 100px; }
  .cat-search-cats-grid { grid-template-columns: 1fr; }
  .cat-search-footer { flex-direction: column; gap: 12px; align-items: stretch; }
  .cat-search-footer-cta { justify-content: center; }
  .cat-search-quickfilters { gap: 6px; }
  .cat-search-quickfilter { padding: 6px 11px; font-size: 12px; }
}

/* ============================================================
   11. LIGHT THEME
   ============================================================ */
body[data-catalog-theme="light"] .cat-nav-search-trigger {
  background: rgba(67, 30, 150, 0.04);
  border-color: var(--cat-border);
  color: var(--cat-text);
}
body[data-catalog-theme="light"] .cat-nav-search-trigger:hover {
  background: rgba(67, 30, 150, 0.10);
  border-color: rgba(67, 30, 150, 0.30);
  color: #431E96;
}
body[data-catalog-theme="light"] .cat-searchbar {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(67, 30, 150, 0.18);
}
body[data-catalog-theme="light"] .cat-search-input {
  background: var(--cat-input);
  border-color: rgba(67, 30, 150, 0.30);
  color: var(--cat-text);
}
body[data-catalog-theme="light"] .cat-search-input:focus {
  border-color: rgba(67, 30, 150, 0.55);
  box-shadow: 0 0 0 4px rgba(67, 30, 150, 0.14);
}
body[data-catalog-theme="light"] .cat-search-dropdown {
  background: linear-gradient(180deg, rgba(248, 245, 255, 0.94) 0%, rgba(255, 255, 255, 0.96) 100%);
  border-color: rgba(67, 30, 150, 0.18);
  box-shadow: 0 24px 60px rgba(67, 30, 150, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);
}
body[data-catalog-theme="light"] .cat-search-section-header h3 { color: #5B167A; }
body[data-catalog-theme="light"] .cat-search-product { background: rgba(67, 30, 150, 0.02); border-color: rgba(67, 30, 150, 0.10); color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-search-product:hover { border-color: rgba(67, 30, 150, 0.30); box-shadow: 0 12px 28px rgba(67, 30, 150, 0.14); }
body[data-catalog-theme="light"] .cat-search-product-price { color: #7C3AFF; }
body[data-catalog-theme="light"] .cat-search-cat-tile { background: rgba(67, 30, 150, 0.03); border-color: rgba(67, 30, 150, 0.10); color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-search-cat-tile:hover { background: rgba(67, 30, 150, 0.08); border-color: rgba(67, 30, 150, 0.32); }
body[data-catalog-theme="light"] .cat-search-quickfilter { background: rgba(67, 30, 150, 0.03); border-color: var(--cat-border); color: var(--text-tertiary); }
body[data-catalog-theme="light"] .cat-search-quickfilter.is-active { background: linear-gradient(135deg, rgba(67, 30, 150, 0.14) 0%, rgba(162, 2, 199, 0.10) 100%); border-color: rgba(67, 30, 150, 0.40); color: #431E96; }
body[data-catalog-theme="light"] .cat-search-brand-chip { background: rgba(67, 30, 150, 0.04); border-color: var(--cat-border); color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-search-mark { background: rgba(162, 2, 199, 0.14); color: #5B167A; }

/* ============================================================
   TAP TARGETS - touch devices uniquement (>= 44x44 Apple HIG)
   Cible (hover: none) and (pointer: coarse) : ne touche pas desktop.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .cat-nav-search-trigger,
  .cat-view-switch-btn,
  .srn-drawer-close,
  .cat-theme-toggle-seg {
    min-width: 44px;
    min-height: 44px;
  }
  /* view-switcher : conserver le rendu compact, agrandir uniquement la hit area */
  .cat-view-switch-btn {
    width: auto;
    padding: 0 12px;
  }
}

/* ============================================================
   PHASE 3.6 - VISUAL QA PREMIUM (15 mai 2026)
   Stepper panier + bloc reco + hero polish
   ============================================================ */

/* --- Stepper panier (4 etapes) ----------------------------- */
.cat-cart-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 32px;
  max-width: 920px;
  padding: 6px 0;
}
.cat-cart-stepper-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}
.cat-cart-stepper-num {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-tertiary);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cat-cart-stepper-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cat-cart-stepper-bar {
  flex: 1 1 24px;
  min-width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin: 0 14px;
}
.cat-cart-stepper-item.is-active .cat-cart-stepper-num {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  border-color: #A202C7;
  color: #FFFFFF;
  box-shadow: 0 4px 18px rgba(124, 58, 255, 0.35);
}
.cat-cart-stepper-item.is-active .cat-cart-stepper-label {
  color: var(--text-primary);
}

/* Phase 3.10 : etapes verrouillees (2, 3, 4) - cadenas SVG + opacity reduite. */
.cat-cart-stepper-item.is-locked {
  cursor: not-allowed;
  opacity: 0.6;
}
.cat-cart-stepper-item.is-locked .cat-cart-stepper-num {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: var(--text-tertiary);
}
.cat-cart-stepper-item.is-locked .cat-cart-stepper-num svg {
  width: 13px; height: 13px;
}
.cat-cart-stepper-item.is-locked .cat-cart-stepper-label {
  color: var(--text-tertiary);
}
body[data-catalog-theme="light"] .cat-cart-stepper-item.is-locked .cat-cart-stepper-num {
  background: var(--cat-surface);
  border: 1px dashed var(--cat-border);
  color: var(--cat-muted);
}
body[data-catalog-theme="light"] .cat-cart-stepper-item.is-locked .cat-cart-stepper-label {
  color: var(--cat-muted);
}
body[data-catalog-theme="light"] .cat-cart-stepper-num {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  color: var(--cat-muted);
}
body[data-catalog-theme="light"] .cat-cart-stepper-label { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-cart-stepper-bar { background: var(--cat-border); }
body[data-catalog-theme="light"] .cat-cart-stepper-item.is-active .cat-cart-stepper-label {
  color: var(--cat-text);
}

/* Stepper mobile : version compacte, conserve les 4 etapes lisibles */
@media (max-width: 720px) {
  .cat-cart-stepper {
    gap: 0;
    padding: 4px 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-cart-stepper::-webkit-scrollbar { display: none; }
  .cat-cart-stepper-num { width: 26px; height: 26px; font-size: 11px; }
  .cat-cart-stepper-label { font-size: 11.5px; }
  .cat-cart-stepper-bar { margin: 0 8px; min-width: 12px; }
}
@media (max-width: 480px) {
  /* Sur tres petit ecran, on cache les labels et garde uniquement les numeros + bars */
  .cat-cart-stepper-label { display: none; }
  .cat-cart-stepper { gap: 0; }
}

/* --- Bloc "Completez votre panier" ------------------------- */
.cat-cart-reco {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cat-cart-reco-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.cat-cart-reco-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.cat-cart-reco-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin: 0;
}
.cat-cart-reco-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) {
  .cat-cart-reco-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cat-cart-reco-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.cat-cart-reco-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.cat-cart-reco-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}
.cat-cart-reco-card-media {
  display: block;
  aspect-ratio: 1 / 1;
  /* Fond blanc comme les cards catalogue */
  background: #FFFFFF;
  overflow: hidden;
}
.cat-cart-reco-card-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}
.cat-cart-reco-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cat-cart-reco-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.cat-cart-reco-card-name:hover { color: #D9B8FF; }
.cat-cart-reco-card-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 2px;
}
.cat-cart-reco-card-price-mention {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-left: 2px;
  font-weight: 500;
}
.cat-cart-reco-card-add {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(124, 58, 255, 0.10);
  border: 1px solid rgba(124, 58, 255, 0.30);
  border-radius: 8px;
  color: #D9B8FF;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cat-cart-reco-card-add:hover {
  background: rgba(124, 58, 255, 0.20);
  border-color: rgba(124, 58, 255, 0.50);
}
.cat-cart-reco-card-add svg { width: 12px; height: 12px; }

/* Light overrides reco bloc */
body[data-catalog-theme="light"] .cat-cart-reco {
  border-top-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-cart-reco-card {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-cart-reco-card-name { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-cart-reco-card-name:hover { color: #6B1B82; }
body[data-catalog-theme="light"] .cat-cart-reco-card-price { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-cart-reco-card-add {
  background: rgba(67, 30, 150, 0.06);
  border-color: rgba(67, 30, 150, 0.20);
  color: #431E96;
}
body[data-catalog-theme="light"] .cat-cart-reco-card-add:hover {
  background: rgba(67, 30, 150, 0.12);
  border-color: rgba(67, 30, 150, 0.40);
}

/* --- Pt 6 : Hero polish (reduction padding-top + spacing) -- */
/* Reduit l'espace vertical entre nav et hero pour eviter l'effet
   "boutons flottants en haut". Etait 140px en haut. */
@media (min-width: 981px) {
  .cat-hero {
    padding-top: 96px;
    padding-bottom: 48px;
  }
}
@media (max-width: 980px) {
  .cat-hero {
    padding-top: 88px;
    padding-bottom: 36px;
  }
}

/* Resserre la zone actions theme + panier dans le hero pour mieux
   les rattacher au reste. */
.cat-hero-actions {
  padding: 2px 0;
}

/* ============================================================
   PHASE 3.7 - REFONTE CATALOGUE
   - Hero refondu : search bar + stats + bloc ecosysteme
   - Trust bar sous hero
   - Cards : badges + favori
   - Toggle sidebar filtres
   - Value section bas catalogue
   ============================================================ */

/* --- HERO : search bar + stats --- */
.cat-hero-search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 6px;
  margin-top: 24px;
  max-width: 540px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cat-hero-search:focus-within {
  border-color: rgba(124, 58, 255, 0.50);
  background: rgba(255, 255, 255, 0.06);
}
.cat-hero-search-icon {
  width: 20px; height: 20px;
  margin-left: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.cat-hero-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
  padding: 12px 16px;
  font-family: inherit;
  min-width: 0;
}
.cat-hero-search-input::placeholder { color: var(--text-tertiary); }
.cat-hero-search-btn {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #fff;
  border: 0;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(124, 58, 255, 0.25);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.cat-hero-search-btn:hover { box-shadow: 0 8px 24px rgba(124, 58, 255, 0.40); }
.cat-hero-search-btn:active { transform: translateY(1px); }

/* Phase 3.7.4 : Stats hero en 3 cards visuelles avec backgrounds doux,
   separateurs verticaux subtils, plus de border-top fade. */
.cat-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
  max-width: 540px;
}
.cat-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cat-hero-stat:hover {
  background: rgba(124, 58, 255, 0.06);
  border-color: rgba(124, 58, 255, 0.25);
}
.cat-hero-stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1;
}
.cat-hero-stat-value .accent {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-hero-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* --- HERO ECO bloc (remplace packshot livraison) --- */
.cat-hero-eco {
  background:
    radial-gradient(ellipse 80% 80% at 20% 20%, rgba(124, 58, 255, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 80% 80%, rgba(162, 2, 199, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #1A0E36 0%, #15082E 100%);
  border: 1px solid rgba(124, 58, 255, 0.30);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.cat-hero-eco::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(124, 58, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
}
.cat-hero-eco > * { position: relative; z-index: 1; }
.cat-hero-eco-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #D9B8FF;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}
.cat-hero-eco-eyebrow svg { color: currentColor; }
.cat-hero-eco-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--text-primary);
}
.cat-hero-eco-title .accent {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-hero-eco-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 22px;
  line-height: 1.55;
}
.cat-hero-eco-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cat-hero-eco-feature {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cat-hero-eco-feature svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: #D9B8FF;
}
.cat-hero-eco-feature-text { font-size: 12.5px; line-height: 1.4; }
.cat-hero-eco-feature-text strong {
  display: block;
  color: var(--text-primary);
  font-weight: 700;
  margin-bottom: 1px;
}
.cat-hero-eco-feature-text span { color: var(--text-tertiary); }

/* Light overrides hero eco */
body[data-catalog-theme="light"] .cat-hero-eco {
  background:
    radial-gradient(ellipse 80% 80% at 20% 20%, rgba(124, 58, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 80% 80%, rgba(162, 2, 199, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, #F8F5FB 0%, #F1ECF6 100%);
  border-color: rgba(124, 58, 255, 0.25);
}
body[data-catalog-theme="light"] .cat-hero-eco::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(67, 30, 150, 0.05) 1px, transparent 1px);
}
body[data-catalog-theme="light"] .cat-hero-eco-eyebrow { color: #7C3AFF; }
body[data-catalog-theme="light"] .cat-hero-eco-title { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-hero-eco-desc { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-hero-eco-feature {
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(67, 30, 150, 0.10);
}
body[data-catalog-theme="light"] .cat-hero-eco-feature svg { color: #7C3AFF; }
body[data-catalog-theme="light"] .cat-hero-eco-feature-text strong { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-hero-eco-feature-text span { color: var(--cat-muted); }

/* Light overrides search hero + stats */
body[data-catalog-theme="light"] .cat-hero-search {
  background: rgba(255, 255, 255, 0.70);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-hero-search:focus-within {
  background: #FFFFFF;
  border-color: rgba(124, 58, 255, 0.40);
}
body[data-catalog-theme="light"] .cat-hero-search-input { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-hero-search-input::placeholder { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-hero-stat {
  background: rgba(255, 255, 255, 0.70);
  border-color: var(--cat-border);
  box-shadow: 0 2px 8px rgba(67, 30, 150, 0.04);
}
body[data-catalog-theme="light"] .cat-hero-stat:hover {
  background: rgba(124, 58, 255, 0.04);
  border-color: rgba(124, 58, 255, 0.25);
}
body[data-catalog-theme="light"] .cat-hero-stat-value { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-hero-stat-label { color: var(--cat-muted); }

/* --- Hero right column adapté pour eco bloc --- */
/* On retire les contraintes spécifiques au packshot pour donner toute la place a l'eco */
.cat-hero-right-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}
@media (max-width: 980px) {
  .cat-hero-eco { padding: 24px; }
  .cat-hero-eco-features { grid-template-columns: 1fr; }
  .cat-hero-stats { gap: 8px; }
  .cat-hero-stat { padding: 12px 14px; }
  .cat-hero-stat-value { font-size: 22px; }
}

/* --- TRUST BAR --- */
.cat-trust-bar-section {
  padding: 0 32px;
  margin: -8px auto 0;
  max-width: 1600px;
}
.cat-trust-bar {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cat-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1 1 auto;
  min-width: 0;
}
.cat-trust-item svg {
  width: 18px; height: 18px;
  color: #D9B8FF;
  flex-shrink: 0;
}
.cat-trust-item strong {
  color: var(--text-primary);
  font-weight: 700;
  margin-right: 4px;
}
body[data-catalog-theme="light"] .cat-trust-bar {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-trust-item { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-trust-item strong { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-trust-item svg { color: #7C3AFF; }
@media (max-width: 980px) {
  .cat-trust-bar { padding: 14px 18px; gap: 14px; }
  .cat-trust-item { flex-basis: calc(50% - 7px); font-size: 12px; }
}
@media (max-width: 560px) {
  .cat-trust-item { flex-basis: 100%; }
}

/* --- CARDS : favori --- */
.cat-card-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  z-index: 2;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cat-card-fav:hover {
  background: #fff;
  transform: scale(1.05);
}
.cat-card-fav svg {
  width: 16px;
  height: 16px;
  color: #6B7280;
  transition: color 0.15s ease;
}
.cat-card-fav.is-active svg {
  color: #A202C7;
  fill: currentColor;
}

/* --- Phase 3.7.2 : MODE FILTRES INLINE vs DRAWER --- */
/* Defaut : data-cat-filters-mode="inline" => sidebar visible cote produits.
   Option   : data-cat-filters-mode="drawer" => sidebar masquee, bouton
              "Filtrer & Trier" desktop ouvre un panneau slide from left. */

/* Pictogramme discret en haut de la sidebar inline (passe en drawer) */
.cat-filter-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Pictogramme toggle filtre (haut sidebar inline) - visible permanent */
.cat-filters-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(124, 58, 255, 0.08);
  border: 1px solid rgba(124, 58, 255, 0.25);
  border-radius: 8px;
  color: #D9B8FF;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.cat-filters-mode-toggle:hover {
  background: rgba(124, 58, 255, 0.18);
  border-color: rgba(124, 58, 255, 0.50);
  color: #FFFFFF;
}
.cat-filters-mode-toggle:active { transform: scale(0.95); }
.cat-filters-mode-toggle svg { display: block; }

/* Bouton inverse, injecte dynamiquement dans le header du drawer */
.cat-filters-mode-to-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-left: 8px;
  background: rgba(124, 58, 255, 0.10);
  border: 1px solid rgba(124, 58, 255, 0.30);
  border-radius: 8px;
  color: #D9B8FF;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cat-filters-mode-to-inline:hover {
  background: rgba(124, 58, 255, 0.18);
  border-color: rgba(124, 58, 255, 0.50);
  color: #FFFFFF;
}

/* DESKTOP comportement par mode :
   les regles display:none/block sur la sidebar et la grille sont gerees
   plus haut par le bloc \"Layout : modes filtres\" (ligne ~3140).
   Ici on s occupe seulement de rendre visible le bouton \"Filtrer & Trier\". */
@media (min-width: 1024px) {
  body[data-cat-filters-mode="drawer"] .cat-results-bar-filtersbtn {
    display: inline-flex;
  }
}

/* Light theme */
body[data-catalog-theme="light"] .cat-filters-mode-toggle {
  background: rgba(67, 30, 150, 0.08);
  border-color: rgba(67, 30, 150, 0.25);
  color: #7C3AFF;
}
body[data-catalog-theme="light"] .cat-filters-mode-toggle:hover {
  background: rgba(67, 30, 150, 0.14);
  border-color: rgba(67, 30, 150, 0.45);
  color: #431E96;
}
body[data-catalog-theme="light"] .cat-filters-mode-to-inline {
  background: rgba(67, 30, 150, 0.08);
  border-color: rgba(67, 30, 150, 0.25);
  color: #431E96;
}
body[data-catalog-theme="light"] .cat-filters-mode-to-inline:hover {
  background: rgba(67, 30, 150, 0.14);
  border-color: rgba(67, 30, 150, 0.45);
  color: #2A0F60;
}

/* --- VALUE SECTION bas catalogue (remplace cat-reassurance) --- */
.cat-value-section {
  max-width: 1600px;
  /* Phase 3.9.1 : margin-bottom 80px pour respiration avant footer. */
  margin: 56px auto 80px;
  padding: 0 32px;
}
.cat-value-section-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cat-value-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px;
}
.cat-value-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.16) 0%, rgba(162, 2, 199, 0.10) 100%);
  border: 1px solid rgba(124, 58, 255, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.cat-value-icon svg {
  width: 22px;
  height: 22px;
  color: #D9B8FF;
}
.cat-value-title {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.cat-value-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
body[data-catalog-theme="light"] .cat-value-card {
  background: var(--cat-surface);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-value-icon {
  background: linear-gradient(135deg, rgba(124, 58, 255, 0.10) 0%, rgba(162, 2, 199, 0.06) 100%);
  border-color: rgba(124, 58, 255, 0.25);
}
body[data-catalog-theme="light"] .cat-value-icon svg { color: #7C3AFF; }
body[data-catalog-theme="light"] .cat-value-title { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-value-desc { color: var(--cat-muted); }
@media (max-width: 980px) {
  .cat-value-section-inner { grid-template-columns: 1fr; gap: 14px; }
  .cat-value-card { padding: 22px; }
}

/* ============================================================
   PHASE 3.7.3 - REFONTE PDP
   Info bloc droite premium + tabs + similaires + bloc eco bas
   ============================================================ */

/* ---------- INFO BLOC droite ---------- */

/* Brand mono violet plus net */
.cat-pdp .cat-pdp-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D9B8FF;
  margin: 0 0 14px;
}
body[data-catalog-theme="light"] .cat-pdp .cat-pdp-brand { color: #7C3AFF; }

/* Titre PDP : reduit, lisible, max-width 92% */
.cat-pdp .cat-pdp-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 92%;
  margin: 0 0 14px;
  color: var(--text-primary);
}
@media (max-width: 980px) {
  .cat-pdp .cat-pdp-title { font-size: 22px; }
}

/* Meta-row sous le titre : SKU, EAN, usage */
.cat-pdp-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.cat-pdp-meta-row .meta-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.cat-pdp-meta-row strong {
  color: var(--text-secondary);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
body[data-catalog-theme="light"] .cat-pdp-meta-row { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-meta-row strong { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-meta-row .meta-dot { background: var(--cat-border); }

/* Bloc disponibilite vert (in_stock/low_stock/out) */
.cat-pdp-availability {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 10px;
}
.cat-pdp-availability .availability-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cat-pdp-availability-text { font-size: 13.5px; flex: 1; }
.cat-pdp-availability-text strong { font-weight: 700; }
.cat-pdp-availability-eta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
}
.cat-pdp-availability.is-in-stock {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.cat-pdp-availability.is-in-stock .availability-dot {
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}
.cat-pdp-availability.is-in-stock .cat-pdp-availability-text { color: var(--text-secondary); }
.cat-pdp-availability.is-in-stock .cat-pdp-availability-text strong { color: var(--text-primary); }
.cat-pdp-availability.is-low-stock {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.30);
}
.cat-pdp-availability.is-low-stock .availability-dot {
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
}
.cat-pdp-availability.is-low-stock .cat-pdp-availability-text { color: #FBBF24; }
.cat-pdp-availability.is-low-stock .cat-pdp-availability-text strong { color: #FDE68A; }
.cat-pdp-availability.is-out {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.30);
}
.cat-pdp-availability.is-out .availability-dot { background: #EF4444; }
.cat-pdp-availability.is-out .cat-pdp-availability-text { color: #FCA5A5; }
.cat-pdp-availability.is-out .cat-pdp-availability-text strong { color: #FECACA; }
/* Phase 3.7.7 : en light, le texte du badge stock est en gris foncé neutre
   (le vert reste sur le dot et la bordure, suffisant comme signal). */
body[data-catalog-theme="light"] .cat-pdp-availability.is-in-stock {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.28);
}
body[data-catalog-theme="light"] .cat-pdp-availability.is-in-stock .cat-pdp-availability-text { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-availability.is-in-stock .cat-pdp-availability-text strong { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-availability.is-low-stock { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }
body[data-catalog-theme="light"] .cat-pdp-availability.is-low-stock .cat-pdp-availability-text { color: #B45309; }
body[data-catalog-theme="light"] .cat-pdp-availability.is-low-stock .cat-pdp-availability-text strong { color: #92400E; }
body[data-catalog-theme="light"] .cat-pdp-availability.is-out { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.35); }
body[data-catalog-theme="light"] .cat-pdp-availability.is-out .cat-pdp-availability-text { color: #B91C1C; }
body[data-catalog-theme="light"] .cat-pdp-availability.is-out .cat-pdp-availability-text strong { color: #991B1B; }
body[data-catalog-theme="light"] .cat-pdp-availability-eta { color: var(--cat-muted); }

/* Bloc prix structure : HT/TTC + tarifs degressifs */
.cat-pdp-price-block {
  /* Phase 3.7.9 : bloc prix avec fond violet profond solide (maquette).
     Sur le fond cosmique, ce bloc se detache visuellement. */
  background: #1A0E36;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
}
.cat-pdp-price-block-main {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 4px;
}
.cat-pdp-price-block-value {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1;
}
.cat-pdp-price-block-suffix {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.cat-pdp-price-block-ttc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.cat-pdp-price-block-ttc strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.cat-pdp-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.cat-pdp-tier {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.cat-pdp-tier-qty {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.cat-pdp-tier-label {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.cat-pdp-tier-unit {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
  opacity: 0.75;
}
.cat-pdp-tier-badge {
  position: absolute;
  top: -7px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px -4px rgba(162, 2, 199, 0.55);
  white-space: nowrap;
}
.cat-pdp-tier.is-active {
  background: linear-gradient(180deg, rgba(124, 58, 255, 0.16), rgba(124, 58, 255, 0.06));
  border-color: rgba(162, 2, 199, 0.40);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cat-pdp-tier.is-active .cat-pdp-tier-qty { color: #D9B8FF; }
.cat-pdp-tier.is-active .cat-pdp-tier-label { color: #FFFFFF; }
.cat-pdp-tier.is-active .cat-pdp-tier-unit { color: rgba(217, 184, 255, 0.75); }
.cat-pdp-tiers-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.cat-pdp-tiers-note svg { width: 12px; height: 12px; flex-shrink: 0; }

body[data-catalog-theme="light"] .cat-pdp-price-block { background: var(--cat-surface); border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-price-block-value { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-price-block-suffix { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-price-block-ttc { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-price-block-ttc strong { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-tier { background: rgba(255,255,255,0.40); border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-tier-qty { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-tier-label { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-tier-unit { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-tier.is-active .cat-pdp-tier-label { color: #431E96; }
body[data-catalog-theme="light"] .cat-pdp-tier.is-active { background: rgba(124,58,255,0.08); border-color: rgba(124,58,255,0.35); }
body[data-catalog-theme="light"] .cat-pdp-tier.is-active .cat-pdp-tier-qty { color: #7C3AFF; }
body[data-catalog-theme="light"] .cat-pdp-tier.is-active .cat-pdp-tier-unit { color: rgba(67, 30, 150, 0.65); }
body[data-catalog-theme="light"] .cat-pdp-tiers-note { color: var(--cat-muted); }

/* 4 trust badges en grid 2x2 (refonte) */
.cat-pdp-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.cat-pdp-trust-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.cat-pdp-trust-card svg {
  width: 18px; height: 18px;
  color: #D9B8FF;
  flex-shrink: 0;
}
.cat-pdp-trust-card-text { font-size: 12.5px; line-height: 1.3; }
.cat-pdp-trust-card-text strong {
  display: block;
  color: var(--text-primary);
  font-weight: 700;
}
.cat-pdp-trust-card-text span { color: var(--text-tertiary); }
body[data-catalog-theme="light"] .cat-pdp-trust-card { background: var(--cat-surface); border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-trust-card svg { color: #7C3AFF; }
body[data-catalog-theme="light"] .cat-pdp-trust-card-text strong { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-trust-card-text span { color: var(--cat-muted); }

/* Bloc identifiants SKU/EAN/Poids/Categorie/Marque */
/* Phase 3.7.7 : bloc identifiants refondu - chaque paire sur 2 lignes
   (label uppercase mono dessus, valeur en sans-serif dessous) pour
   meilleure lisibilite et hiérarchie typographique premium. */
.cat-pdp-ids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 24px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 20px;
}
.cat-pdp-id-pair {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cat-pdp-id-pair-lbl {
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cat-pdp-id-pair-val {
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
  line-height: 1.35;
}
body[data-catalog-theme="light"] .cat-pdp-ids { background: var(--cat-surface); border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-id-pair-lbl { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-id-pair-val { color: var(--cat-text); }

/* ---------- TABS DETAILS bas PDP ---------- */
.cat-pdp-tabs-section {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 0;
  /* Lot FRONT-PDP-1 : reserve l'espace du nav fixed (.sx-1-nav, h=~70px) lors d'un scroll programmatique ou ancre vers les onglets, evite la superposition nav/tabs. */
  scroll-margin-top: 92px;
}
.cat-pdp-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Lot FRONT-PDP-1 : meme reservation pour la barre de tabs si elle est ciblee directement. */
  scroll-margin-top: 92px;
}
.cat-pdp-tabs-nav::-webkit-scrollbar { display: none; }
.cat-pdp-tab-btn {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cat-pdp-tab-btn:hover { color: var(--text-secondary); }
.cat-pdp-tab-btn.is-active {
  color: var(--text-primary);
  border-bottom-color: #A202C7;
}
.cat-pdp-tabs-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}
.cat-pdp-tab-panel { display: none; }
.cat-pdp-tab-panel.is-active { display: block; }
.cat-pdp-tab-prose {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.cat-pdp-tab-prose h3 {
  color: var(--text-primary);
  font-size: 17px;
  margin: 24px 0 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cat-pdp-tab-prose h3:first-child { margin-top: 0; }
.cat-pdp-tab-prose p { margin-bottom: 12px; }
.cat-pdp-tab-prose ul { padding-left: 20px; margin-bottom: 12px; }
.cat-pdp-tab-prose li { margin-bottom: 4px; }
.cat-pdp-tab-prose-empty {
  padding: 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--card-border);
  border-radius: 12px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13.5px;
}
.cat-pdp-specs-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 24px;
}
.cat-pdp-specs-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.cat-pdp-specs-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-pdp-specs-card-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--card-border);
}
.cat-pdp-specs-card-list li:last-child { border-bottom: 0; }
.cat-pdp-specs-card-lbl {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.cat-pdp-specs-card-val {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}
body[data-catalog-theme="light"] .cat-pdp-tabs-nav { border-bottom-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-tab-btn { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-tab-btn:hover { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-tab-btn.is-active { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-tab-prose { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-tab-prose h3 { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-tab-prose-empty {
  background: var(--cat-surface);
  border-color: var(--cat-border);
  color: var(--cat-muted);
}
body[data-catalog-theme="light"] .cat-pdp-specs-card { background: var(--cat-surface); border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-specs-card-title { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-specs-card-list li { border-bottom-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-specs-card-lbl { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-specs-card-val { color: var(--cat-text); }

/* ---------- PRODUITS SIMILAIRES ---------- */
.cat-pdp-similar-section {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 0;
}
.cat-pdp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.cat-pdp-section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}
.cat-pdp-section-link {
  color: #D9B8FF;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}
.cat-pdp-section-link:hover { color: #FFFFFF; text-decoration: underline; }
.cat-pdp-similar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-pdp-similar-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cat-pdp-similar-card:hover {
  border-color: rgba(124, 58, 255, 0.35);
  transform: translateY(-2px);
}
.cat-pdp-similar-card-media {
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cat-pdp-similar-card-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cat-pdp-similar-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cat-pdp-similar-card-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D9B8FF;
  font-weight: 700;
}
.cat-pdp-similar-card-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.cat-pdp-similar-card-price {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: auto;
  padding-top: 6px;
}
.cat-pdp-similar-card-price span {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 2px;
}
.cat-pdp-similar-empty {
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--card-border);
  border-radius: 12px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}
body[data-catalog-theme="light"] .cat-pdp-section-title { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-section-link { color: #6B1B82; }
body[data-catalog-theme="light"] .cat-pdp-similar-card { background: var(--cat-surface); border-color: var(--cat-border); }
body[data-catalog-theme="light"] .cat-pdp-similar-card-name { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-similar-card-brand { color: #7C3AFF; }
body[data-catalog-theme="light"] .cat-pdp-similar-card-price { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-similar-card-price span { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-similar-empty { background: var(--cat-surface); border-color: var(--cat-border); color: var(--cat-muted); }

/* ---------- BLOC ECO BAS PDP ---------- */
/* Phase 3.7.6 : eco bloc reproduit a l identique de la maquette validee Sam.
   Grid 1.4fr/1fr (texte gauche + stats droite), padding 40px, radius 24px,
   gradient violet/magenta, CTA gradient + 4 stats (2M+ produits, 5 marketplaces, 6 agents IA, 24/7). */
.cat-pdp-eco-section {
  max-width: 1200px;
  /* Phase 3.9.1 : margin-bottom 80px pour respiration avant footer. */
  margin: 56px auto 80px;
  padding: 0;
}
.cat-pdp-eco {
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(124, 58, 255, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(162, 2, 199, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #1A0E36 0%, #15082E 100%);
  border: 1px solid rgba(124, 58, 255, 0.30);
  border-radius: 24px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.cat-pdp-eco-text { min-width: 0; }
.cat-pdp-eco-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.cat-pdp-eco-title .accent {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-pdp-eco-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 24px;
}
.cat-pdp-eco-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  color: #FFFFFF;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  box-shadow: 0 8px 22px rgba(124, 58, 255, 0.30);
}
.cat-pdp-eco-cta:hover { box-shadow: 0 12px 30px rgba(124, 58, 255, 0.45); }
.cat-pdp-eco-cta:active { transform: translateY(1px); }
.cat-pdp-eco-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cat-pdp-eco-stat {
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}
.cat-pdp-eco-stat-value {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cat-pdp-eco-stat-value .accent {
  background: linear-gradient(135deg, #7C3AFF 0%, #A202C7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-pdp-eco-stat-label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Light theme eco bloc */
body[data-catalog-theme="light"] .cat-pdp-eco {
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(124, 58, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(162, 2, 199, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, #F8F5FB 0%, #F1ECF6 100%);
  border-color: rgba(124, 58, 255, 0.25);
}
body[data-catalog-theme="light"] .cat-pdp-eco-title { color: var(--cat-text); }
body[data-catalog-theme="light"] .cat-pdp-eco-desc { color: var(--cat-muted); }
body[data-catalog-theme="light"] .cat-pdp-eco-stat {
  background: rgba(255, 255, 255, 0.60);
  border-color: var(--cat-border);
}
body[data-catalog-theme="light"] .cat-pdp-eco-stat-label { color: var(--cat-muted); }

/* Responsive PDP refonte */
@media (max-width: 980px) {
  .cat-pdp-tabs-content { grid-template-columns: 1fr; }
  .cat-pdp-specs-card { position: static; }
  .cat-pdp-similar-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-pdp-trust-grid { grid-template-columns: 1fr; }
  .cat-pdp-tiers { gap: 6px; }
  .cat-pdp-tier-qty { font-size: 10px; }
  .cat-pdp-tier-label { font-size: 12px; }
  .cat-pdp-price-block-value { font-size: 32px; }
  .cat-pdp-eco { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
}
@media (max-width: 560px) {
  .cat-pdp-similar-grid { grid-template-columns: 1fr 1fr; }
  .cat-pdp-eco-section { margin: 40px auto 60px; }
}

/* Phase 3.7.5 : si la grille a tres peu de cards (resultat de recherche
   restreint), on bascule en auto-fill compact pour eviter les colonnes
   vides desequilibrees. Selector :has() largement supporte en 2026. */
.cat-grid--g5:has(> .cat-card:nth-last-child(-n+3):first-child),
.cat-grid--g4:has(> .cat-card:nth-last-child(-n+3):first-child),
.cat-grid--g3:has(> .cat-card:nth-last-child(-n+2):first-child) {
  grid-template-columns: repeat(auto-fill, 280px) !important;
  justify-content: start;
}



/* ============================================================
   PHASE 3.9 — BACKGROUND BODY UNIFIE BG-CONTINUUM (DARK ONLY)
   Sam constate des bandes noires / coupures de fond entre header,
   sections, eco-bloc, et footer. Cause : chaque conteneur portait
   son halo, mais le body etait #07020F plat. Solution : porter le
   fond cosmique sur le BODY lui-meme via bg-continuum (copie de la
   homepage), conteneurs transparents (deja faits Phase 3.9 etape 1).
   Light : pas touche (Sam valide light tel quel).
   ============================================================ */

/* Fond continu sombre couvrant toute la page B2B (catalogue/PDP/panier). */
body.page--boutique:not([data-catalog-theme="light"]),
body.page--boutique-produit:not([data-catalog-theme="light"]),
body.page--panier:not([data-catalog-theme="light"]) {
  position: relative;
  background: #07020F;
  background-image:
    radial-gradient(ellipse 65% 35% at 18% 8%,  rgba(124, 58, 255, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 22%, rgba(255, 45, 190, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 32% at 12% 42%, rgba(162, 2, 199, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 30% at 88% 58%, rgba(124, 58, 255, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 28% at 25% 78%, rgba(255, 45, 190, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 32% at 80% 92%, rgba(124, 58, 255, 0.12) 0%, transparent 60%);
  background-attachment: fixed;
}

/* Pattern de points subtil sur l ensemble du body (homepage parity). */
body.page--boutique:not([data-catalog-theme="light"])::before,
body.page--boutique-produit:not([data-catalog-theme="light"])::before,
body.page--panier:not([data-catalog-theme="light"])::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}

/* Le footer wrap garde son propre fond (identite visuelle preservee comme homepage),
   mais on lisse la transition en dark en retirant son linear-gradient qui creait
   une bande sombre marquee. On garde seulement le radial halo + dot pattern. */
body.page--boutique:not([data-catalog-theme="light"]) .sx-10-footer-wrap,
body.page--boutique-produit:not([data-catalog-theme="light"]) .sx-10-footer-wrap,
body.page--panier:not([data-catalog-theme="light"]) .sx-10-footer-wrap {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124, 58, 255, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, transparent 0%, rgba(7, 2, 15, 0.4) 30%, rgba(7, 2, 15, 0.7) 100%);
  border-top: 1px solid rgba(124, 58, 255, 0.12);
}

/* ============================================================
   LOT BG-LIGHT-FIX : bg-continuum pour le LIGHT MODE
   Bug : en light, body = #F7F5FB plat mais nav fixed avec backdrop-blur 
   creait une bande visuellement plus claire en haut -> coupure visible sous header.
   Fix : degrade subtil violet-blanc cale sur #F7F5FB qui couvre tout le body,
   integrant la nav en transition douce (pas de border-bottom marquee).
   ============================================================ */
body.page--boutique[data-catalog-theme="light"],
body.page--boutique-produit[data-catalog-theme="light"],
body.page--panier[data-catalog-theme="light"] {
  position: relative;
  background: #F7F5FB;
  background-image:
    radial-gradient(ellipse 70% 40% at 18% 6%,  rgba(124, 58, 255, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 55% 32% at 85% 20%, rgba(255, 45, 190, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 60% 35% at 12% 50%, rgba(162, 2, 199, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 88% 65%, rgba(124, 58, 255, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 55% 30% at 25% 85%, rgba(255, 45, 190, 0.03) 0%, transparent 65%);
  background-attachment: fixed;
}

/* Pattern de points TRES subtil sur l'ensemble du body en light (parity homepage). */
body.page--boutique[data-catalog-theme="light"]::before,
body.page--boutique-produit[data-catalog-theme="light"]::before,
body.page--panier[data-catalog-theme="light"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(67, 30, 150, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Sections enfants restent transparentes pour laisser passer le bg-continuum (light) aussi. */
body.page--boutique[data-catalog-theme="light"] .cat-hero,
body.page--boutique[data-catalog-theme="light"] .cat-trust-bar,
body.page--boutique[data-catalog-theme="light"] .cat-trust-bar-inner,
body.page--boutique[data-catalog-theme="light"] .cat-body,
body.page--boutique[data-catalog-theme="light"] .cat-value-section,
body.page--boutique-produit[data-catalog-theme="light"] .cat-pdp,
body.page--boutique-produit[data-catalog-theme="light"] .cat-pdp-tabs-section,
body.page--boutique-produit[data-catalog-theme="light"] .cat-pdp-similar-section,
body.page--boutique-produit[data-catalog-theme="light"] .cat-pdp-eco-section,
body.page--panier[data-catalog-theme="light"] .cat-cart {
  background: transparent !important;
}

/* Nav light : suppression de la border-bottom marquee pour transition douce
   avec le bg-continuum light. Le backdrop-blur seul suffit a delimiter visuellement. */
body[data-catalog-theme="light"] .sx-1-nav {
  border-bottom: 1px solid transparent !important;
}
body[data-catalog-theme="light"] .sx-1-nav.is-scrolled {
  border-bottom: 1px solid rgba(67, 30, 150, 0.06) !important;
}

/* Sections enfants entierement transparentes pour laisser passer le bg-continuum. */
body.page--boutique:not([data-catalog-theme="light"]) .cat-hero,
body.page--boutique:not([data-catalog-theme="light"]) .cat-trust-bar,
body.page--boutique:not([data-catalog-theme="light"]) .cat-trust-bar-inner,
body.page--boutique:not([data-catalog-theme="light"]) .cat-body,
body.page--boutique:not([data-catalog-theme="light"]) .cat-value-section,
body.page--boutique-produit:not([data-catalog-theme="light"]) .cat-pdp,
body.page--boutique-produit:not([data-catalog-theme="light"]) .cat-pdp-tabs-section,
body.page--boutique-produit:not([data-catalog-theme="light"]) .cat-pdp-similar-section,
body.page--boutique-produit:not([data-catalog-theme="light"]) .cat-pdp-eco-section,
body.page--panier:not([data-catalog-theme="light"]) .cat-cart,
body.page--panier:not([data-catalog-theme="light"]) .cat-checkout-placeholder {
  background: transparent;
}

/* Le bloc eco PDP a son fond solide #1A0E36 (carte) - on le conserve car c est
   intentionnel (carte distincte sur le fond). Idem .cat-pdp-price-block. */


/* Phase 3.9.3 : main.cat-cart-mount couvre la hauteur restante (panier vide ou plein). */
.cat-cart-mount {
  min-height: calc(100vh - 64px); /* nav height approx */
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════════════════════════════════════════
   PDP — Trust grid 3 cols + carriers strip + payment strip
   ════════════════════════════════════════════════════════════════════ */
.cat-pdp-trust-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
  .cat-pdp-trust-grid-3 { grid-template-columns: 1fr; }
}

/* Bloc transporteurs */
/* ════════════════════════════════════════════════════════════════════
   PDP — Strip transporteurs (versions natives dark/light)
   Pas de filter:invert. 2 PNG transparents fournis par Sam : un blanc
   pour dark, un violet pour light. Le CSS affiche/masque selon thème.
   ════════════════════════════════════════════════════════════════════ */

.cat-pdp-strip-plain {
  display: block;
  margin: 28px auto 8px;
  width: 100%;
  max-width: 340px;
  height: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.95;
}

/* Affichage conditionnel par theme : un seul des deux est visible */
.cat-pdp-strip-dark { display: block; }
.cat-pdp-strip-light { display: none; }

body[data-catalog-theme="light"] .cat-pdp-strip-dark { display: none; }
body[data-catalog-theme="light"] .cat-pdp-strip-light { display: block; }

/* Reset des anciens conteneurs s'ils sont injectés ailleurs : invisibles */
.cat-pdp-carriers,
.cat-pdp-payment {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 14px auto 0 !important;
  box-shadow: none !important;
}
.cat-pdp-carriers-label { display: none !important; }