/* =========================================================
   TASMIM Smart Showroom — test-interactif.css
   Version V2.4.0 Stable Dashboard
   Pilotage visuel du shortcode [tasmim_smart_showroom]
   Compatible : tasmim-smart-showroom.php V2.0.5 + test-interactif.js V2
   ========================================================= */

:root {
  --tss-fallback-primary: #1C1F2E;
  --tss-fallback-secondary: #151823;
  --tss-fallback-accent: #CBAF5A;
  --tss-fallback-light: #F4F0E6;
  --tss-fallback-dark: #151823;
  --tss-fallback-text: #FFFFFF;
  --tss-fallback-heading-font: Cinzel, Georgia, serif;
  --tss-fallback-body-font: Inter, Arial, sans-serif;
}

/* =========================================================
   01. Base
   ========================================================= */

.tss-v2-showroom,
.tss-v2-showroom *,
.sd-modal-overlay,
.sd-modal-overlay * {
  box-sizing: border-box;
}

.tss-v2-showroom {
  --tss-primary-safe: var(--tss-primary, var(--tss-fallback-primary));
  --tss-secondary-safe: var(--tss-secondary, var(--tss-fallback-secondary));
  --tss-accent-safe: var(--tss-accent, var(--tss-fallback-accent));
  --tss-light-safe: var(--tss-light, var(--tss-fallback-light));
  --tss-dark-safe: var(--tss-dark, var(--tss-fallback-dark));
  --tss-text-safe: var(--tss-text, var(--tss-fallback-text));
  --tss-heading-font-safe: var(--tss-client-heading-font, var(--tss-fallback-heading-font));
  --tss-body-font-safe: var(--tss-client-body-font, var(--tss-fallback-body-font));

  width: 100%;
  padding: clamp(42px, 5vw, 76px) 22px clamp(58px, 6vw, 92px);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--tss-accent-safe) 16%, transparent), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(21, 24, 35, 0.12), transparent 31%),
    linear-gradient(180deg, var(--tss-light-safe) 0%, #fff8e7 100%);
  color: var(--tss-text-safe);
  font-family: var(--tss-body-font-safe);
  isolation: isolate;
}

.tss-v2-showroom a,
.tss-v2-showroom button,
.sd-modal-overlay a,
.sd-modal-overlay button,
.sd-modal-overlay input,
.sd-modal-overlay select,
.sd-modal-overlay textarea {
  font-family: var(--tss-body-font-safe);
}

.tss-v2-showroom a,
.sd-modal-overlay a {
  color: inherit;
}

.tss-v2-showroom button,
.sd-modal-overlay button {
  -webkit-appearance: none;
  appearance: none;
}

.tss-v2-showroom [hidden],
.sd-modal-overlay [hidden] {
  display: none !important;
}

/* =========================================================
   02. Wrapper showroom
   ========================================================= */

.tss-v2-inner {
  position: relative;
  overflow: hidden;
  width: min(1140px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 28%, transparent);
  border-radius: 32px;
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--tss-accent-safe) 15%, transparent), transparent 28%),
    linear-gradient(135deg, var(--tss-primary-safe) 0%, var(--tss-dark-safe) 100%);
  color: #fff;
  box-shadow:
    0 38px 110px rgba(21, 24, 35, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.tss-v2-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.32;
}

.tss-v2-inner > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   03. Header
   ========================================================= */

.tss-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

.tss-v2-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tss-v2-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(circle at 72% 20%, color-mix(in srgb, var(--tss-accent-safe) 20%, transparent), transparent 34%),
    rgba(255, 255, 255, 0.065);
  color: #fff;
  font-size: 16px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.tss-v2-logo img {
  display: block;
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
}

.tss-v2-kicker {
  margin: 0 0 5px;
  color: var(--tss-accent-safe);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tss-v2-title {
  margin: 0;
  color: #fff;
  font-family: var(--tss-heading-font-safe);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.tss-v2-subtitle {
  max-width: 720px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15.5px;
  font-weight: 520;
  line-height: 1.65;
}

/* =========================================================
   04. Filtres
   ========================================================= */

.tss-v2-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}

.tss-v2-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.tss-v2-filter:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tss-accent-safe) 55%, transparent);
  color: #fff;
}

.tss-v2-filter.is-active {
  background: var(--tss-accent-safe);
  border-color: var(--tss-accent-safe);
  color: #151823;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--tss-accent-safe) 24%, transparent);
}

/* =========================================================
   05. Panneau produit sélectionné
   ========================================================= */

.tss-v2-featured-layout {
  margin: 4px 0 28px;
}

.tss-v2-side-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 30%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--tss-accent-safe) 20%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.038));
  color: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.tss-v2-side-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin: 0 0 16px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tss-accent-safe) 11%, transparent);
  color: var(--tss-accent-safe);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.tss-v2-side-panel h3 {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--tss-heading-font-safe);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.tss-v2-side-panel p {
  max-width: 790px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.65;
}

.tss-v2-side-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -4px 0 18px;
}

.tss-v2-side-tools .sd-price-switch {
  margin-left: auto;
}

.tss-v2-side-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}

.tss-v2-side-list div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.058);
}

.tss-v2-side-list span {
  display: block;
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 10.5px;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tss-v2-side-list strong {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 790;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.tss-v2-side-actions,
.sd-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tss-v2-side-actions .tss-v2-btn,
.tss-v2-side-actions .sd-product-action {
  flex: 1 1 160px;
}

/* =========================================================
   06. Switch devise
   ========================================================= */

.sd-price-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.sd-price-currency {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.sd-price-currency:hover {
  transform: translateY(-1px);
  color: #fff;
}

.sd-price-currency.active {
  background: var(--tss-accent-safe);
  color: #151823;
}

/* =========================================================
   07. Catalogue / grille
   ========================================================= */

.tss-v2-content-layout {
  display: block;
}

.tss-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  gap: 22px;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0;
}

.tss-v2-grid::after {
  content: none !important;
  display: none !important;
}

.tss-v2-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: 360px;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 24%, transparent);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
  color: #151823;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}

.tss-v2-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--tss-accent-safe) 72%, transparent);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.tss-v2-card-select {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tss-v2-media {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #f4f0e6;
}

.tss-v2-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(21, 24, 35, 0.26), transparent 52%),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--tss-accent-safe) 18%, transparent), transparent 32%);
  pointer-events: none;
}

.tss-v2-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.tss-v2-card:hover .tss-v2-media img,
.tss-v2-card-select:hover .tss-v2-media img {
  transform: scale(1.035);
}

.tss-v2-media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f4f0e6, #fff);
  color: rgba(21, 24, 35, 0.52);
  font-size: 13px;
  font-weight: 750;
}

.tss-v2-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 23px;
}

.tss-v2-card-body h3 {
  margin: 0 0 14px;
  color: #151823;
  font-family: var(--tss-heading-font-safe);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.tss-v2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.tss-v2-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(21, 24, 35, 0.08);
  border-radius: 999px;
  background: rgba(21, 24, 35, 0.055);
  color: rgba(21, 24, 35, 0.70);
  font-size: 11.5px;
  font-weight: 680;
  line-height: 1;
}

.tss-v2-desc {
  margin: 0 0 18px;
  color: rgba(21, 24, 35, 0.68);
  font-size: 14px;
  line-height: 1.6;
}

.tss-v2-price {
  margin: auto 0 18px;
  color: #151823;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
}

.tss-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.tss-v2-actions .tss-v2-btn {
  flex: 1 1 calc(50% - 5px);
}

.tss-v2-actions .tss-v2-btn-primary {
  flex-basis: 100%;
}

/* =========================================================
   08. Boutons
   ========================================================= */

.tss-v2-btn,
.sd-product-action,
.sd-modal-action,
.sd-doc-btn,
.sd-text-action,
.sd-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(21, 24, 35, 0.12);
  border-radius: 999px;
  background: rgba(21, 24, 35, 0.055);
  color: #151823 !important;
  font-size: 12px;
  font-weight: 730;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.tss-v2-btn:hover,
.sd-product-action:hover,
.sd-modal-action:hover,
.sd-doc-btn:hover,
.sd-text-action:hover,
.sd-upload-btn:hover {
  transform: translateY(-2px);
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary),
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product),
.sd-modal-action.secondary,
.sd-modal-action.ghost,
.sd-doc-btn.secondary,
.sd-text-action {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary):hover,
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product):hover,
.sd-modal-action.secondary:hover,
.sd-modal-action.ghost:hover,
.sd-doc-btn.secondary:hover,
.sd-text-action:hover {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 44%, transparent);
  background: color-mix(in srgb, var(--tss-accent-safe) 12%, transparent);
}

.tss-v2-btn-primary,
.sd-quote-product,
.sd-modal-action.primary,
.sd-doc-btn.primary,
.sd-upload-btn {
  border-color: transparent;
  background: linear-gradient(135deg, #f0d984 0%, var(--tss-accent-safe) 48%, #a9832e 100%);
  color: #151823 !important;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--tss-accent-safe) 22%, transparent);
}

.tss-v2-btn-primary,
.sd-quote-product {
  width: 100%;
  min-height: 42px;
}

.tss-v2-btn-primary:hover,
.sd-quote-product:hover,
.sd-modal-action.primary:hover,
.sd-doc-btn.primary:hover,
.sd-upload-btn:hover {
  background: linear-gradient(135deg, #f3df93 0%, #d3b95f 48%, #ad8833 100%);
  color: #151823 !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--tss-accent-safe) 32%, transparent);
}

/* =========================================================
   09. États / documents
   ========================================================= */

.tss-v2-empty {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.80);
}

.tss-v2-reference {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.74);
}

.tss-v2-reference a {
  color: var(--tss-accent-safe) !important;
  font-weight: 800;
  text-decoration: none;
}

.sd-left-docs,
.sd-right-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.sd-doc-btn.is-disabled,
.sd-left-docs a.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================================
   10. Modale principale
   ========================================================= */

.sd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 86px 18px 28px;
  background: rgba(8, 10, 16, 0.76);
  backdrop-filter: blur(18px);
  color: #fff;
  font-family: var(--tss-body-font-safe, Inter, Arial, sans-serif);
}

.admin-bar .sd-modal-overlay {
  padding-top: 112px;
}

.sd-modal-overlay[hidden] {
  display: none !important;
}

.sd-modal-box {
  position: relative;
  overflow: auto;
  width: min(1040px, calc(100vw - 36px));
  max-height: min(780px, calc(100vh - 116px));
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 34%, transparent);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--tss-accent-safe) 16%, transparent), transparent 28%),
    linear-gradient(135deg, var(--tss-primary-safe, #1C1F2E) 0%, var(--tss-dark-safe, #151823) 100%);
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.52);
}

.admin-bar .sd-modal-box {
  max-height: min(760px, calc(100vh - 138px));
}

.sd-modal-close {
  position: sticky;
  top: 12px;
  z-index: 12;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin: 12px 12px -50px auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(21, 24, 35, 0.88);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.sd-modal-close:hover {
  transform: rotate(90deg);
  border-color: color-mix(in srgb, var(--tss-accent-safe) 44%, transparent);
}

.sd-modal-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
}

.sd-modal-left {
  padding: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sd-modal-content {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.sd-modal-image-wrap {
  position: relative;
  overflow: hidden;
  height: 300px;
  border-radius: 22px;
  background: #111421;
}

.sd-modal-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-modal-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(21, 24, 35, 0.68), transparent 54%),
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--tss-accent-safe) 18%, transparent), transparent 32%);
}

.sd-modal-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 42%, transparent);
  border-radius: 999px;
  background: rgba(21, 24, 35, 0.76);
  color: var(--tss-accent-safe);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sd-modal-kicker,
.sd-modal-subtitle {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 32%, transparent);
  border-radius: 999px;
  color: var(--tss-accent-safe);
  background: color-mix(in srgb, var(--tss-accent-safe) 10%, transparent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sd-modal-content h3 {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--tss-heading-font-safe);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.sd-modal-content p,
.sd-left-panel p,
.sd-regulation-panel p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

/* =========================================================
   11. Modale : panneaux, ambiances, docs
   ========================================================= */

.sd-left-panel,
.sd-guide-bubble,
.sd-right-specs,
.sd-regulation-panel,
.sd-modal-calc,
.sd-quote-preview,
.sd-qualified-card {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 28%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--tss-accent-safe) 14%, transparent), transparent 34%),
    rgba(255, 255, 255, 0.052);
}

.sd-left-panel {
  margin-top: 14px;
}

.sd-left-panel-head span,
.sd-quote-preview-top span,
.sd-qualified-card > span,
.sd-regulation-head span,
.sd-calc-head span,
.sd-guide-bubble > span {
  color: var(--tss-accent-safe);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.sd-left-panel-head strong,
.sd-qualified-card h4,
.sd-quote-preview-top strong,
.sd-regulation-panel h4 {
  display: block;
  margin: 5px 0 12px;
  color: #fff;
  font-family: var(--tss-heading-font-safe);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

.sd-guide-bubble {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 14px;
}

.sd-guide-bubble > span {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--tss-accent-safe);
  color: #151823;
  font-family: var(--tss-heading-font-safe);
  font-size: 13px;
  letter-spacing: 0;
}

.sd-guide-bubble strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.sd-guide-bubble small {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.sd-ambience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.sd-ambience-btn {
  min-height: 74px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.058);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.sd-ambience-btn:hover,
.sd-ambience-btn.active {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 58%, transparent);
  background: color-mix(in srgb, var(--tss-accent-safe) 13%, transparent);
}

.sd-ambience-btn span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 760;
}

.sd-ambience-btn strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.sd-right-specs-grid,
.sd-info-list,
.sd-quote-preview-grid,
.sd-modal-result-grid {
  display: grid;
  gap: 9px;
}

.sd-right-specs-grid,
.sd-quote-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-modal-result-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.sd-info-list div,
.sd-right-specs-grid div,
.sd-quote-preview-grid div,
.sd-modal-result-mini,
.sd-regulation-reference {
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
}

.sd-info-list span,
.sd-right-specs-grid span,
.sd-quote-preview-grid span,
.sd-modal-result-mini span,
.sd-regulation-reference span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10.8px;
  font-weight: 750;
}

.sd-info-list strong,
.sd-right-specs-grid strong,
.sd-quote-preview-grid strong,
.sd-modal-result-mini strong,
.sd-regulation-reference strong {
  display: block;
  color: #fff;
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.3;
}

.sd-info-list small,
.sd-right-specs-grid small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  font-weight: 700;
}

.sd-regulation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sd-regulation-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: rgba(21,24,35,0.72);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.sd-regulation-disclaimer {
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 11.8px !important;
}

/* =========================================================
   12. Modale : upload, calculateur, demande
   ========================================================= */

.sd-upload-btn input {
  display: none;
}

.sd-upload-preview {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sd-upload-preview img {
  width: 96px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 30%, transparent);
}

.sd-upload-preview span {
  display: block;
  margin-bottom: 4px;
  color: var(--tss-accent-safe);
  font-size: 9.8px;
  font-weight: 850;
  text-transform: uppercase;
}

.sd-upload-preview strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.sd-calc-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sd-calc-head strong {
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.sd-modal-calc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.sd-modal-calc label span,
.sd-client-fields label span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.62);
  font-size: 10.8px;
  font-weight: 760;
}

.sd-modal-calc input,
.sd-modal-calc select,
.sd-client-fields input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  outline: none;
}

.sd-modal-calc select option {
  color: #151823;
  background: #fff;
}

.sd-modal-calc input:hover,
.sd-modal-calc select:hover,
.sd-modal-calc input:focus,
.sd-modal-calc select:focus,
.sd-client-fields input:hover,
.sd-client-fields input:focus {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 68%, transparent) !important;
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tss-accent-safe) 12%, transparent);
}

.sd-client-fields input::placeholder,
.sd-modal-calc input::placeholder {
  color: rgba(255,255,255,0.42) !important;
}

.sd-client-fields input.sd-field-error {
  border-color: rgba(248, 113, 113, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

.sd-calc-result-hero {
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 38%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 55%, color-mix(in srgb, var(--tss-accent-safe) 28%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--tss-accent-safe) 18%, transparent), rgba(255,255,255,0.055));
}

.sd-calc-result-hero span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.70);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.sd-calc-result-hero strong {
  display: block;
  color: var(--tss-accent-safe);
  font-family: var(--tss-heading-font-safe);
  font-size: clamp(42px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.95;
}

.sd-calc-result-hero small {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  font-weight: 700;
}

.sd-qualified-request {
  display: grid;
  gap: 14px;
}

.sd-client-fields {
  display: grid;
  gap: 10px;
}

.sd-client-fields label span em {
  float: right;
  color: color-mix(in srgb, var(--tss-accent-safe) 90%, #fff);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.sd-request-preview {
  padding: 13px;
  border: 1px dashed color-mix(in srgb, var(--tss-accent-safe) 34%, transparent);
  border-radius: 15px;
  background: rgba(21,24,35,0.38);
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-line;
}

.sd-modal-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(34,197,94,0.45);
  border-radius: 14px;
  background: rgba(34,197,94,0.13);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 750;
}

.sd-modal-feedback.is-warning {
  border-color: rgba(248,113,113,0.55);
  background: rgba(248,113,113,0.12);
}

.sd-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.sd-modal-action {
  min-height: 38px;
  padding: 0 14px;
  font-size: 11.8px;
}

/* =========================================================
   13. Compatibilité ancienne structure sd
   ========================================================= */

.sd-catalog {
  font-family: var(--tss-client-body-font, Inter, Arial, sans-serif);
}

.sd-catalog h1,
.sd-catalog h2,
.sd-catalog h3,
.sd-catalog h4 {
  font-family: var(--tss-client-heading-font, Cinzel, Georgia, serif);
}

/* =========================================================
   14. Responsive
   ========================================================= */

@media (max-width: 980px) {
  .tss-v2-inner {
    padding: 34px;
  }

  .tss-v2-header {
    flex-direction: column;
  }

  .tss-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tss-v2-card {
    max-width: none;
  }

  .sd-modal-grid {
    grid-template-columns: 1fr;
  }

  .sd-modal-left {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .sd-modal-image-wrap {
    height: 260px;
  }
}

@media (max-width: 720px) {
  .tss-v2-showroom {
    padding: 32px 14px 54px;
  }

  .tss-v2-inner {
    padding: 24px;
    border-radius: 26px;
  }

  .tss-v2-brand {
    align-items: flex-start;
    gap: 12px;
  }

  .tss-v2-logo {
    width: 48px;
    height: 48px;
  }

  .tss-v2-title {
    font-size: 30px;
  }

  .tss-v2-subtitle {
    font-size: 14px;
  }

  .tss-v2-toolbar {
    gap: 8px;
  }

  .tss-v2-filter {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }

  .tss-v2-side-panel {
    padding: 22px;
    border-radius: 22px;
  }

  .tss-v2-side-tools {
    flex-direction: column;
    align-items: flex-start;
  }

  .tss-v2-side-tools .sd-price-switch {
    margin-left: 0;
  }

  .tss-v2-side-list,
  .tss-v2-grid,
  .sd-ambience-grid,
  .sd-right-specs-grid,
  .sd-quote-preview-grid,
  .sd-modal-calc-grid,
  .sd-modal-result-grid {
    grid-template-columns: 1fr;
  }

  .tss-v2-card {
    max-width: none;
  }

  .tss-v2-media {
    height: 190px;
  }

  .tss-v2-card-body {
    padding: 20px;
  }

  .tss-v2-card-body h3 {
    font-size: 22px;
  }

  .tss-v2-side-actions .tss-v2-btn,
  .tss-v2-side-actions .sd-product-action,
  .tss-v2-actions .tss-v2-btn {
    flex-basis: 100%;
    width: 100%;
  }

  .sd-modal-overlay {
    padding: 78px 12px 12px;
  }

  .admin-bar .sd-modal-overlay {
    padding-top: 94px;
  }

  .sd-modal-box {
    width: 100%;
    max-height: calc(100vh - 94px);
    border-radius: 24px;
  }

  .sd-modal-left,
  .sd-modal-content {
    padding: 20px;
  }

  .sd-modal-content h3 {
    font-size: 26px;
  }

  .sd-modal-actions {
    flex-direction: column;
  }

  .sd-modal-action {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .tss-v2-title {
    font-size: 27px;
  }

  .tss-v2-card-body h3 {
    font-size: 20px;
  }

  .sd-modal-image-wrap {
    height: 210px;
  }
}


/* =========================================================
   22. V2.1.0 — Couleurs client stabilisées + Powered by discret
   ========================================================= */

/*
   Objectif :
   - le fond sombre du showroom est piloté par "Fond sombre";
   - l'accent sert aux CTA, badges et filtres actifs;
   - la couleur de texte choisie dans l'admin est réellement respectée;
   - les dégradés restent premium mais ne déforment plus violemment la palette client.
*/

.tss-v2-showroom {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--tss-accent-safe) 7%, transparent), transparent 28%),
    linear-gradient(180deg, var(--tss-light-safe) 0%, color-mix(in srgb, var(--tss-light-safe) 92%, #ffffff 8%) 100%) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-inner {
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--tss-accent-safe) 9%, transparent), transparent 30%),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tss-secondary-safe) 8%, transparent), transparent 38%),
    linear-gradient(135deg, var(--tss-dark-safe) 0%, color-mix(in srgb, var(--tss-dark-safe) 86%, var(--tss-secondary-safe) 14%) 100%) !important;
  color: var(--tss-text-safe) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 26%, transparent) !important;
}

.tss-v2-inner::before {
  opacity: 0.18 !important;
}

.tss-v2-title,
.tss-v2-side-panel h3,
.sd-modal-content h3,
.sd-left-panel-head strong,
.sd-quote-preview-top strong,
.sd-qualified-card h4,
.sd-regulation-panel h4 {
  color: var(--tss-text-safe) !important;
}

.tss-v2-subtitle,
.tss-v2-side-panel p,
.tss-v2-featured-description,
.sd-modal-description,
#sd-modal-description,
.sd-left-panel p,
.sd-regulation-panel p {
  color: color-mix(in srgb, var(--tss-text-safe) 72%, transparent) !important;
}

.tss-v2-kicker,
.tss-v2-side-kicker,
.sd-modal-kicker,
.sd-modal-subtitle,
.sd-left-panel-head span,
.sd-regulation-head span,
.sd-guide-bubble span,
.sd-qualified-card > span {
  color: var(--tss-accent-safe) !important;
}

.tss-v2-side-panel {
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--tss-accent-safe) 10%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--tss-text-safe) 8%, transparent), color-mix(in srgb, var(--tss-text-safe) 3%, transparent)) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 28%, transparent) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-side-list div,
.sd-info-list div,
.sd-right-specs-grid div,
.sd-quote-preview-grid div,
.sd-modal-result-mini,
.sd-client-fields label {
  background: color-mix(in srgb, var(--tss-text-safe) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 13%, transparent) !important;
}

.tss-v2-side-list span,
.sd-info-list span,
.sd-right-specs-grid span,
.sd-quote-preview-grid span,
.sd-modal-result-mini span,
.sd-client-fields span,
.sd-calc-head span {
  color: color-mix(in srgb, var(--tss-text-safe) 56%, transparent) !important;
}

.tss-v2-side-list strong,
.sd-info-list strong,
.sd-right-specs-grid strong,
.sd-quote-preview-grid strong,
.sd-modal-result-mini strong,
.sd-calc-head strong {
  color: var(--tss-text-safe) !important;
}

.tss-v2-filter.is-active,
.sd-price-currency.active {
  background: var(--tss-accent-safe) !important;
  border-color: var(--tss-accent-safe) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-btn-primary,
.sd-quote-product,
.sd-modal-action.primary,
.sd-doc-btn.primary,
.sd-upload-btn {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tss-accent-safe) 82%, #ffffff 18%) 0%,
    var(--tss-accent-safe) 55%,
    color-mix(in srgb, var(--tss-accent-safe) 80%, #000000 20%) 100%
  ) !important;
  color: var(--tss-text-safe) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--tss-accent-safe) 24%, transparent) !important;
}

.tss-v2-btn-primary:hover,
.sd-quote-product:hover,
.sd-modal-action.primary:hover,
.sd-doc-btn.primary:hover,
.sd-upload-btn:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tss-accent-safe) 88%, #ffffff 12%) 0%,
    var(--tss-accent-safe) 55%,
    color-mix(in srgb, var(--tss-accent-safe) 72%, #000000 28%) 100%
  ) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary),
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product),
.sd-modal-action.secondary,
.sd-modal-action.ghost,
.sd-doc-btn.secondary,
.sd-text-action {
  color: var(--tss-text-safe) !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 16%, transparent) !important;
  background: color-mix(in srgb, var(--tss-text-safe) 7%, transparent) !important;
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary):hover,
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product):hover,
.sd-modal-action.secondary:hover,
.sd-modal-action.ghost:hover,
.sd-doc-btn.secondary:hover,
.sd-text-action:hover {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 46%, transparent) !important;
  background: color-mix(in srgb, var(--tss-accent-safe) 13%, transparent) !important;
}

/* Cartes : on garde une lecture claire, quel que soit le thème du panneau */
.tss-v2-card {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 20%, transparent) !important;
}

.tss-v2-chip {
  background: color-mix(in srgb, var(--tss-dark-safe) 6%, transparent) !important;
}

.tss-v2-powered {
  margin-top: 34px !important;
  padding-top: 12px !important;
  color: color-mix(in srgb, var(--tss-text-safe) 58%, transparent) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  opacity: 0.74 !important;
}

/* Logo un peu plus présent */
.tss-v2-logo {
  width: 64px !important;
  height: 64px !important;
}

.tss-v2-logo img {
  max-width: 52px !important;
  max-height: 52px !important;
}

/* Préparation upload photo client : rendu plus grand et plus premium */
.sd-upload-preview {
  width: 100% !important;
  margin-top: 16px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--tss-accent-safe) 22%, transparent) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.06) !important;
}

.sd-upload-preview img {
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
}

.sd-upload-preview div {
  padding: 12px 14px !important;
}

.sd-upload-preview span {
  color: var(--tss-accent-safe) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.sd-upload-preview strong {
  display: block !important;
  margin-top: 4px !important;
  color: var(--tss-text-safe) !important;
  font-size: 12px !important;
}

@media (max-width: 720px) {
  .tss-v2-logo {
    width: 52px !important;
    height: 52px !important;
  }

  .tss-v2-logo img {
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .tss-v2-powered {
    margin-top: 24px !important;
  }
}



/* =========================================================
   99. V2.1.1 — Couleurs client cohérentes + modales
   ========================================================= */

.tss-v2-showroom,
.sd-modal-overlay,
.sd-modal-box {
  --tss-primary-safe: var(--tss-primary, var(--tss-fallback-primary));
  --tss-secondary-safe: var(--tss-secondary, var(--tss-fallback-secondary));
  --tss-accent-safe: var(--tss-accent, var(--tss-fallback-accent));
  --tss-light-safe: var(--tss-light, var(--tss-fallback-light));
  --tss-dark-safe: var(--tss-dark, var(--tss-fallback-dark));
  --tss-text-safe: var(--tss-text, var(--tss-fallback-text));
  --tss-heading-font-safe: var(--tss-client-heading-font, var(--tss-fallback-heading-font));
  --tss-body-font-safe: var(--tss-client-body-font, var(--tss-fallback-body-font));
  --tss-surface-dark: color-mix(in srgb, var(--tss-secondary-safe) 18%, var(--tss-dark-safe));
  --tss-surface-panel: color-mix(in srgb, var(--tss-primary-safe) 14%, var(--tss-dark-safe));
  --tss-border-soft: color-mix(in srgb, var(--tss-accent-safe) 24%, transparent);
  --tss-border-strong: color-mix(in srgb, var(--tss-accent-safe) 42%, transparent);
  --tss-text-muted: color-mix(in srgb, var(--tss-text-safe) 68%, transparent);
  --tss-text-soft: color-mix(in srgb, var(--tss-text-safe) 52%, transparent);
  --tss-cta-soft: color-mix(in srgb, var(--tss-accent-safe) 12%, transparent);
  --tss-cta-hover: color-mix(in srgb, var(--tss-accent-safe) 18%, transparent);
  --tss-button-text: #151823;
}

.tss-v2-showroom {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--tss-accent-safe) 9%, transparent), transparent 28%),
    linear-gradient(180deg, var(--tss-light-safe) 0%, color-mix(in srgb, var(--tss-light-safe) 78%, #ffffff) 100%) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-inner {
  border-color: var(--tss-border-soft) !important;
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--tss-accent-safe) 10%, transparent), transparent 30%),
    radial-gradient(circle at 10% 88%, color-mix(in srgb, var(--tss-primary-safe) 10%, transparent), transparent 32%),
    linear-gradient(135deg, var(--tss-dark-safe) 0%, var(--tss-surface-dark) 52%, var(--tss-dark-safe) 100%) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-inner::before {
  background:
    linear-gradient(color-mix(in srgb, var(--tss-text-safe) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tss-text-safe) 5%, transparent) 1px, transparent 1px) !important;
  opacity: 0.20 !important;
}

.tss-v2-logo {
  width: 64px !important;
  height: 64px !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 16%, transparent) !important;
  background:
    radial-gradient(circle at 72% 20%, color-mix(in srgb, var(--tss-accent-safe) 18%, transparent), transparent 34%),
    color-mix(in srgb, var(--tss-text-safe) 7%, transparent) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-logo img {
  max-width: 50px !important;
  max-height: 50px !important;
}

.tss-v2-kicker,
.tss-v2-side-kicker,
.sd-modal-kicker,
.sd-section-label,
.sd-doc-title {
  color: var(--tss-accent-safe) !important;
}

.tss-v2-title,
.tss-v2-side-panel h3,
.sd-modal-title,
.sd-left-card h3,
.sd-qualified-card h4,
.sd-summary-title {
  color: var(--tss-text-safe) !important;
}

.tss-v2-subtitle,
.tss-v2-side-panel p,
.sd-modal-subtitle,
.sd-step-card p,
.sd-left-card p,
.sd-qualified-card p {
  color: var(--tss-text-muted) !important;
}

.tss-v2-filter {
  border-color: color-mix(in srgb, var(--tss-text-safe) 16%, transparent) !important;
  background: color-mix(in srgb, var(--tss-text-safe) 7%, transparent) !important;
  color: var(--tss-text-muted) !important;
}

.tss-v2-filter:hover {
  border-color: var(--tss-border-strong) !important;
  background: var(--tss-cta-soft) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-filter.is-active,
.sd-price-currency.active {
  background: var(--tss-accent-safe) !important;
  border-color: var(--tss-accent-safe) !important;
  color: var(--tss-button-text) !important;
}

.tss-v2-side-panel,
.sd-left-card,
.sd-step-card,
.sd-product-summary,
.sd-qualified-card,
.sd-calculator-card,
.sd-client-form,
.sd-message-card,
.sd-modal-section,
.sd-upload-card {
  border-color: var(--tss-border-soft) !important;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--tss-accent-safe) 8%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--tss-text-safe) 7%, transparent), color-mix(in srgb, var(--tss-primary-safe) 8%, transparent)) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-side-list div,
.sd-info-cell,
.sd-result-card,
.sd-form-field input,
.sd-form-field textarea,
.sd-form-field select,
.sd-estimate-grid > div,
.sd-summary-grid > div {
  border-color: color-mix(in srgb, var(--tss-text-safe) 13%, transparent) !important;
  background: color-mix(in srgb, var(--tss-text-safe) 6%, transparent) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-side-list span,
.sd-info-cell span,
.sd-result-card span,
.sd-form-field label,
.sd-summary-grid span,
.sd-estimate-grid span {
  color: var(--tss-text-soft) !important;
}

.tss-v2-side-list strong,
.sd-info-cell strong,
.sd-result-card strong,
.sd-summary-grid strong,
.sd-estimate-grid strong {
  color: var(--tss-text-safe) !important;
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary),
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product),
.sd-modal-action.secondary,
.sd-modal-action.ghost,
.sd-doc-btn.secondary,
.sd-text-action {
  border-color: color-mix(in srgb, var(--tss-text-safe) 16%, transparent) !important;
  background: color-mix(in srgb, var(--tss-text-safe) 7%, transparent) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary):hover,
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product):hover,
.sd-modal-action.secondary:hover,
.sd-modal-action.ghost:hover,
.sd-doc-btn.secondary:hover,
.sd-text-action:hover {
  border-color: var(--tss-border-strong) !important;
  background: var(--tss-cta-hover) !important;
  color: var(--tss-text-safe) !important;
}

.tss-v2-btn-primary,
.sd-quote-product,
.sd-modal-action.primary,
.sd-doc-btn.primary,
.sd-upload-btn {
  border-color: transparent !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tss-accent-safe) 68%, #ffffff) 0%,
      var(--tss-accent-safe) 52%,
      color-mix(in srgb, var(--tss-accent-safe) 78%, #000000) 100%) !important;
  color: var(--tss-button-text) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--tss-accent-safe) 22%, transparent) !important;
}

.tss-v2-btn-primary:hover,
.sd-quote-product:hover,
.sd-modal-action.primary:hover,
.sd-doc-btn.primary:hover,
.sd-upload-btn:hover {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tss-accent-safe) 78%, #ffffff) 0%,
      var(--tss-accent-safe) 50%,
      color-mix(in srgb, var(--tss-accent-safe) 86%, #000000) 100%) !important;
  color: var(--tss-button-text) !important;
}

.sd-modal-overlay {
  background: color-mix(in srgb, var(--tss-dark-safe) 78%, transparent) !important;
  color: var(--tss-text-safe) !important;
}

.sd-modal-box {
  border-color: var(--tss-border-strong) !important;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--tss-accent-safe) 9%, transparent), transparent 30%),
    linear-gradient(135deg, var(--tss-dark-safe) 0%, var(--tss-surface-dark) 54%, var(--tss-dark-safe) 100%) !important;
  color: var(--tss-text-safe) !important;
}

.sd-modal-close {
  background: color-mix(in srgb, var(--tss-dark-safe) 88%, transparent) !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 14%, transparent) !important;
  color: var(--tss-text-safe) !important;
}

.sd-modal-box input,
.sd-modal-box textarea,
.sd-modal-box select {
  color: var(--tss-text-safe) !important;
}

.sd-modal-box input::placeholder,
.sd-modal-box textarea::placeholder {
  color: var(--tss-text-soft) !important;
}

.sd-upload-card.has-upload .sd-upload-content,
.sd-upload-card.has-upload .sd-upload-title,
.sd-upload-card.has-upload .sd-upload-text {
  display: none !important;
}

.sd-upload-card.has-upload .sd-upload-preview {
  display: block !important;
  width: 100% !important;
  min-height: 240px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.sd-upload-card.has-upload .sd-upload-preview img {
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
}

.tss-v2-powered,
.tss-powered-by,
[data-tss-powered-by] {
  display: block !important;
  margin-top: 34px !important;
  padding-top: 10px !important;
  color: color-mix(in srgb, var(--tss-text-safe) 44%, transparent) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  opacity: 0.78 !important;
}

@media (max-width: 640px) {
  .tss-v2-logo {
    width: 52px !important;
    height: 52px !important;
  }

  .tss-v2-logo img {
    max-width: 40px !important;
    max-height: 40px !important;
  }
}


/* =========================================================
   99. V2.1.4 — Système couleurs simplifié
   ---------------------------------------------------------
   Apparence :
   - Style visuel : Dégradé premium / Couleurs strictes
   - Ambiance : Claire / Sombre
   - Couleurs : fond, panneau, texte, accent CTA
   ========================================================= */

.tss-v2-showroom,
.sd-modal-overlay,
.sd-modal-box {
  --tss-background-safe: var(--tss-background, var(--tss-light, var(--tss-fallback-light)));
  --tss-panel-safe: var(--tss-panel, var(--tss-dark, var(--tss-fallback-dark)));
  --tss-accent-safe: var(--tss-accent, var(--tss-fallback-accent));
  --tss-text-safe: var(--tss-text, var(--tss-fallback-text));
  --tss-heading-font-safe: var(--tss-client-heading-font, var(--tss-fallback-heading-font));
  --tss-body-font-safe: var(--tss-client-body-font, var(--tss-fallback-body-font));
}

.tss-v2-showroom {
  background: var(--tss-background-safe) !important;
}

.tss-v2-inner {
  color: var(--tss-text-safe) !important;
}

.tss-v2-title,
.tss-v2-side-panel h3,
.sd-modal-content h2,
.sd-modal-content h3,
.sd-left-panel h3,
.sd-qualified-card h3 {
  color: var(--tss-text-safe) !important;
}

.tss-v2-subtitle,
.tss-v2-side-panel p,
.sd-modal-content p,
.sd-left-panel p,
.sd-muted,
.sd-step p {
  color: color-mix(in srgb, var(--tss-text-safe) 78%, transparent) !important;
}

.tss-v2-kicker,
.tss-v2-side-kicker,
.sd-modal-kicker,
.sd-section-label,
.sd-modal-badge,
.sd-docs-title,
.tss-v2-powered-by {
  color: var(--tss-accent-safe) !important;
}

.tss-style-premium .tss-v2-inner {
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--tss-accent-safe) 18%, transparent), transparent 31%),
    radial-gradient(circle at 8% 94%, color-mix(in srgb, var(--tss-panel-safe) 26%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--tss-panel-safe) 92%, var(--tss-accent-safe) 8%) 0%, var(--tss-panel-safe) 100%) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 30%, transparent) !important;
}

.tss-style-premium .tss-v2-side-panel,
.tss-style-premium .sd-modal-box {
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--tss-accent-safe) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--tss-panel-safe) 86%, var(--tss-text-safe) 14%), color-mix(in srgb, var(--tss-panel-safe) 94%, var(--tss-accent-safe) 6%)) !important;
}

.tss-style-strict .tss-v2-showroom {
  background: var(--tss-background-safe) !important;
}

.tss-style-strict .tss-v2-inner,
.tss-style-strict .tss-v2-side-panel,
.tss-style-strict .sd-modal-box {
  background: var(--tss-panel-safe) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 62%, transparent) !important;
  box-shadow: 0 30px 80px rgba(21, 24, 35, 0.14) !important;
}

.tss-style-strict .tss-v2-inner::before,
.tss-style-strict .tss-v2-media::after,
.tss-style-strict .sd-modal-image-wrap::after {
  opacity: 0.06 !important;
}

.tss-style-strict .tss-v2-side-list div,
.tss-style-strict .sd-info-grid > div,
.tss-style-strict .sd-summary-card,
.tss-style-strict .sd-step,
.tss-style-strict .sd-client-form,
.tss-style-strict .sd-message-box,
.tss-style-strict .sd-ambience-option,
.tss-style-strict .sd-modal-note {
  background: color-mix(in srgb, var(--tss-panel-safe) 88%, var(--tss-text-safe) 12%) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 38%, transparent) !important;
  color: var(--tss-text-safe) !important;
}

.tss-style-strict .tss-v2-side-list span,
.tss-style-strict .sd-info-grid span,
.tss-style-strict .sd-summary-card span,
.tss-style-strict .sd-client-form label,
.tss-style-strict .sd-step-number {
  color: color-mix(in srgb, var(--tss-text-safe) 62%, transparent) !important;
}

.tss-style-strict .tss-v2-side-list strong,
.tss-style-strict .sd-info-grid strong,
.tss-style-strict .sd-summary-card strong {
  color: var(--tss-text-safe) !important;
}

.tss-v2-filter.is-active,
.sd-price-currency.active,
.sd-modal-action.primary,
.sd-doc-btn.primary,
.sd-upload-btn,
.tss-v2-btn-primary,
.sd-quote-product {
  background: var(--tss-accent-safe) !important;
  border-color: var(--tss-accent-safe) !important;
  color: #111318 !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--tss-accent-safe) 24%, transparent) !important;
}

.tss-v2-btn-primary:hover,
.sd-quote-product:hover,
.sd-modal-action.primary:hover,
.sd-doc-btn.primary:hover,
.sd-upload-btn:hover {
  background: color-mix(in srgb, var(--tss-accent-safe) 86%, #ffffff 14%) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 86%, #ffffff 14%) !important;
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary),
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product),
.sd-modal-action.secondary,
.sd-modal-action.ghost,
.sd-doc-btn.secondary,
.sd-text-action {
  color: var(--tss-text-safe) !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 20%, transparent) !important;
  background: color-mix(in srgb, var(--tss-panel-safe) 86%, var(--tss-text-safe) 14%) !important;
}

.sd-modal-overlay {
  background: color-mix(in srgb, var(--tss-panel-safe) 78%, transparent) !important;
}

.tss-v2-powered-by {
  display: block;
  margin-top: 34px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  opacity: .46 !important;
}

/* =========================================================
   99. V2.4.0 — Réglages couleur simplifiés + modales claires
   ---------------------------------------------------------
   - Suppression logique du mode clair/sombre côté interface
   - Les couleurs pilotent directement : fond / panneaux / texte / accent
   - Correction switch devise sur fond clair
   - Correction champs blancs et hover dans les modales
   ========================================================= */

.tss-v2-showroom,
.sd-modal-overlay,
.sd-modal-box {
  --tss-background-safe: var(--tss-background, var(--tss-light, var(--tss-fallback-light))) !important;
  --tss-panel-safe: var(--tss-panel, var(--tss-dark, var(--tss-fallback-dark))) !important;
  --tss-accent-safe: var(--tss-accent, var(--tss-fallback-accent)) !important;
  --tss-text-safe: var(--tss-text, var(--tss-fallback-text)) !important;
  --tss-panel-soft: color-mix(in srgb, var(--tss-panel-safe) 92%, var(--tss-text-safe) 8%);
  --tss-panel-softer: color-mix(in srgb, var(--tss-panel-safe) 84%, var(--tss-text-safe) 16%);
  --tss-line-soft: color-mix(in srgb, var(--tss-accent-safe) 34%, transparent);
  --tss-line-strong: color-mix(in srgb, var(--tss-accent-safe) 62%, transparent);
  --tss-muted-safe: color-mix(in srgb, var(--tss-text-safe) 72%, transparent);
  --tss-placeholder-safe: color-mix(in srgb, var(--tss-text-safe) 46%, transparent);
}

/* Mode strict : pas d'interprétation clair/sombre, les couleurs choisies décident. */
.tss-style-strict.tss-v2-showroom {
  background: var(--tss-background-safe) !important;
}

.tss-style-strict .tss-v2-inner,
.tss-style-strict .tss-v2-side-panel,
.sd-modal-overlay.tss-style-strict .sd-modal-box,
.sd-modal-box.tss-style-strict {
  background: var(--tss-panel-safe) !important;
  color: var(--tss-text-safe) !important;
  border-color: var(--tss-line-strong) !important;
}

/* Mode premium : relief léger, mais basé sur les mêmes couleurs. */
.tss-style-premium .tss-v2-inner,
.sd-modal-overlay.tss-style-premium .sd-modal-box,
.sd-modal-box.tss-style-premium {
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--tss-accent-safe) 12%, transparent), transparent 34%),
    linear-gradient(135deg, var(--tss-panel-safe) 0%, color-mix(in srgb, var(--tss-panel-safe) 88%, var(--tss-accent-safe) 12%) 100%) !important;
  color: var(--tss-text-safe) !important;
}

/* Titres / textes : une seule logique lisible. */
.tss-v2-title,
.tss-v2-side-panel h3,
.sd-modal-content h2,
.sd-modal-content h3,
.sd-left-panel h3,
.sd-qualified-card h3,
.sd-modal-title,
.sd-modal-box strong {
  color: var(--tss-text-safe) !important;
}

.tss-v2-subtitle,
.tss-v2-side-panel p,
.sd-modal-content p,
.sd-left-panel p,
.sd-muted,
.sd-step p,
.sd-modal-description,
#sd-modal-description {
  color: var(--tss-muted-safe) !important;
}

/* Switch devise : le bouton inactif doit rester visible sur fond blanc. */
.sd-price-switch {
  border-color: color-mix(in srgb, var(--tss-text-safe) 18%, transparent) !important;
  background: color-mix(in srgb, var(--tss-panel-safe) 86%, var(--tss-text-safe) 14%) !important;
}

.sd-price-currency {
  color: var(--tss-text-safe) !important;
  opacity: 0.74 !important;
}

.sd-price-currency:hover {
  color: var(--tss-text-safe) !important;
  opacity: 1 !important;
}

.sd-price-currency.active {
  background: var(--tss-accent-safe) !important;
  color: #111318 !important;
  opacity: 1 !important;
}

/* Surfaces internes des panneaux et modales. */
.tss-v2-side-list div,
.sd-info-grid > div,
.sd-summary-card,
.sd-step,
.sd-client-form,
.sd-message-box,
.sd-ambience-option,
.sd-modal-note,
.sd-modal-calc,
.sd-modal-result-mini,
.sd-left-panel,
.sd-qualified-card,
.sd-upload-card,
.sd-modal-box .sd-section,
.sd-modal-box .sd-panel,
.sd-modal-box .sd-card {
  background: var(--tss-panel-softer) !important;
  border-color: var(--tss-line-soft) !important;
  color: var(--tss-text-safe) !important;
}

/* Champs modales : fini les hover/focus blancs invisibles. */
.sd-modal-box input,
.sd-modal-box textarea,
.sd-modal-box select,
.sd-modal-calc input,
.sd-modal-calc select,
.sd-client-form input,
.sd-client-form textarea,
.sd-client-form select {
  background: var(--tss-panel-soft) !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 18%, transparent) !important;
  color: var(--tss-text-safe) !important;
  box-shadow: none !important;
}

.sd-modal-box input:hover,
.sd-modal-box textarea:hover,
.sd-modal-box select:hover,
.sd-modal-calc input:hover,
.sd-modal-calc select:hover,
.sd-client-form input:hover,
.sd-client-form textarea:hover,
.sd-client-form select:hover,
.sd-modal-box input:focus,
.sd-modal-box textarea:focus,
.sd-modal-box select:focus,
.sd-modal-calc input:focus,
.sd-modal-calc select:focus,
.sd-client-form input:focus,
.sd-client-form textarea:focus,
.sd-client-form select:focus {
  background: var(--tss-panel-softer) !important;
  border-color: var(--tss-accent-safe) !important;
  color: var(--tss-text-safe) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tss-accent-safe) 18%, transparent) !important;
}

.sd-modal-box input::placeholder,
.sd-modal-box textarea::placeholder,
.sd-modal-calc input::placeholder,
.sd-client-form input::placeholder,
.sd-client-form textarea::placeholder {
  color: var(--tss-placeholder-safe) !important;
}

.sd-modal-box label,
.sd-modal-box label span,
.sd-modal-result-mini span,
.sd-summary-card span,
.sd-info-grid span,
.tss-v2-side-list span {
  color: color-mix(in srgb, var(--tss-text-safe) 62%, transparent) !important;
}

.sd-modal-result-mini strong,
.sd-summary-card strong,
.sd-info-grid strong,
.tss-v2-side-list strong {
  color: var(--tss-text-safe) !important;
}

/* Badges et contours : accent visible, mais pas tout en alerte. */
.tss-v2-side-kicker,
.sd-modal-kicker,
.sd-section-label,
.sd-modal-badge,
.sd-docs-title {
  color: var(--tss-accent-safe) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 40%, transparent) !important;
  background: color-mix(in srgb, var(--tss-accent-safe) 10%, transparent) !important;
}

/* Boutons principaux : accent pur. */
.tss-v2-filter.is-active,
.sd-price-currency.active,
.sd-modal-action.primary,
.sd-doc-btn.primary,
.sd-upload-btn,
.tss-v2-btn-primary,
.sd-quote-product {
  background: var(--tss-accent-safe) !important;
  border-color: var(--tss-accent-safe) !important;
  color: #111318 !important;
}

/* Boutons secondaires : fond contrôlé par le panneau, pas blanc au hover. */
.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary),
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product),
.sd-modal-action.secondary,
.sd-modal-action.ghost,
.sd-doc-btn.secondary,
.sd-text-action {
  color: var(--tss-text-safe) !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 20%, transparent) !important;
  background: var(--tss-panel-soft) !important;
}

.tss-v2-side-panel .tss-v2-btn:not(.tss-v2-btn-primary):hover,
.tss-v2-side-panel .sd-product-action:not(.sd-quote-product):hover,
.sd-modal-action.secondary:hover,
.sd-modal-action.ghost:hover,
.sd-doc-btn.secondary:hover,
.sd-text-action:hover {
  color: var(--tss-text-safe) !important;
  background: var(--tss-panel-softer) !important;
  border-color: var(--tss-accent-safe) !important;
}

/* Overlay : moins lourd en mode clair, mais gardé lisible. */
.sd-modal-overlay {
  background: color-mix(in srgb, var(--tss-background-safe) 38%, rgba(8, 10, 16, 0.64)) !important;
}






/* =========================================================
   TASMIM Smart Showroom V2.4.0 — Patch lisibilité modales
   Corrige les textes/champs oubliés en mode clair/strict
   ========================================================= */

/* Textes secondaires dans les blocs d'étapes */
.sd-modal-overlay .sd-step-card p,
.sd-modal-overlay .sd-step-card small,
.sd-modal-overlay .sd-step-card span,
.sd-modal-overlay .sd-modal-content p,
.sd-modal-overlay .sd-modal-content small,
.sd-modal-overlay .sd-modal-left p,
.sd-modal-overlay .sd-modal-left small {
  color: color-mix(in srgb, var(--tss-text-safe) 72%, transparent) !important;
}

/* Titres et labels dans les modales */
.sd-modal-overlay label,
.sd-modal-overlay .sd-field-label,
.sd-modal-overlay .sd-summary-label,
.sd-modal-overlay .sd-calc-label,
.sd-modal-overlay .sd-result-label,
.sd-modal-overlay .sd-form-label,
.sd-modal-overlay .sd-info-label,
.sd-modal-overlay .sd-product-info span,
.sd-modal-overlay .sd-modal-kicker,
.sd-modal-overlay .sd-section-kicker {
  color: var(--tss-accent-safe) !important;
}

/* Valeurs principales */
.sd-modal-overlay strong,
.sd-modal-overlay .sd-summary-value,
.sd-modal-overlay .sd-result-value,
.sd-modal-overlay .sd-product-info strong,
.sd-modal-overlay .sd-calc-value {
  color: var(--tss-text-safe) !important;
}

/* Champs input / textarea / select */
.sd-modal-overlay input,
.sd-modal-overlay textarea,
.sd-modal-overlay select {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 32%, transparent) !important;
  background: color-mix(in srgb, var(--tss-panel-safe) 86%, #ffffff 14%) !important;
  color: var(--tss-text-safe) !important;
  box-shadow: none !important;
}

/* Placeholder des champs */
.sd-modal-overlay input::placeholder,
.sd-modal-overlay textarea::placeholder {
  color: color-mix(in srgb, var(--tss-text-safe) 46%, transparent) !important;
}

/* Focus / hover des champs */
.sd-modal-overlay input:hover,
.sd-modal-overlay textarea:hover,
.sd-modal-overlay select:hover,
.sd-modal-overlay input:focus,
.sd-modal-overlay textarea:focus,
.sd-modal-overlay select:focus {
  border-color: var(--tss-accent-safe) !important;
  background: color-mix(in srgb, var(--tss-panel-safe) 92%, #ffffff 8%) !important;
  color: var(--tss-text-safe) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tss-accent-safe) 16%, transparent) !important;
}

/* Cartes internes des modales */
.sd-modal-overlay .sd-info-card,
.sd-modal-overlay .sd-product-card,
.sd-modal-overlay .sd-summary-card,
.sd-modal-overlay .sd-qualified-card,
.sd-modal-overlay .sd-calc-card,
.sd-modal-overlay .sd-result-card,
.sd-modal-overlay .sd-form-card,
.sd-modal-overlay .sd-message-card,
.sd-modal-overlay .sd-modal-panel,
.sd-modal-overlay .sd-left-card {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 28%, transparent) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tss-panel-safe) 88%, #ffffff 12%),
      color-mix(in srgb, var(--tss-panel-safe) 78%, var(--tss-accent-safe) 8%)
    ) !important;
  color: var(--tss-text-safe) !important;
}

/* Bloc message généré / résumé WhatsApp */
.sd-modal-overlay .sd-generated-message,
.sd-modal-overlay .sd-message-preview,
.sd-modal-overlay pre,
.sd-modal-overlay code {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 28%, transparent) !important;
  background: color-mix(in srgb, var(--tss-panel-safe) 84%, #000000 6%) !important;
  color: var(--tss-text-safe) !important;
}

/* Correction spéciale : textes blancs invisibles sur fond clair */
.tss-style-strict .sd-modal-overlay .sd-step-card p,
.tss-style-strict .sd-modal-overlay .sd-step-card small,
.tss-style-strict .sd-modal-overlay .sd-modal-content p,
.tss-style-strict .sd-modal-overlay .sd-modal-left p {
  color: color-mix(in srgb, var(--tss-text-safe) 76%, transparent) !important;
}

/* Correction des petits textes de calcul */
.sd-modal-overlay .sd-calc-helper,
.sd-modal-overlay .sd-result-helper,
.sd-modal-overlay .sd-form-helper,
.sd-modal-overlay .sd-muted,
.sd-modal-overlay .sd-note {
  color: color-mix(in srgb, var(--tss-text-safe) 62%, transparent) !important;
}

/* Boutons secondaires modales */
.sd-modal-overlay .sd-modal-action.secondary,
.sd-modal-overlay .sd-modal-action.ghost,
.sd-modal-overlay .sd-doc-btn.secondary {
  border-color: color-mix(in srgb, var(--tss-accent-safe) 28%, transparent) !important;
  background: color-mix(in srgb, var(--tss-panel-safe) 82%, #ffffff 14%) !important;
  color: var(--tss-text-safe) !important;
}

.sd-modal-overlay .sd-modal-action.secondary:hover,
.sd-modal-overlay .sd-modal-action.ghost:hover,
.sd-modal-overlay .sd-doc-btn.secondary:hover {
  border-color: var(--tss-accent-safe) !important;
  background: color-mix(in srgb, var(--tss-accent-safe) 14%, var(--tss-panel-safe) 86%) !important;
  color: var(--tss-text-safe) !important;
}

/* Documents */
.sd-modal-overlay .sd-left-docs a,
.sd-modal-overlay .sd-right-docs a,
.sd-modal-overlay .sd-doc-btn {
  color: var(--tss-text-safe) !important;
}

.sd-modal-overlay .sd-doc-btn.primary,
.sd-modal-overlay .sd-upload-btn,
.sd-modal-overlay .sd-modal-action.primary {
  background: var(--tss-accent-safe) !important;
  color: var(--tss-cta-text-safe, #ffffff) !important;
}


/* =========================================================
   TASMIM Smart Showroom — Patch lisibilité choix ambiances
   Corrige les textes "Salon contemporain", "Salon futur"
   ========================================================= */

.sd-modal-overlay .sd-ambience-grid button,
.sd-modal-overlay .sd-ambience-grid .sd-ambience-option,
.sd-modal-overlay .sd-ambience-grid .sd-ambience-choice,
.sd-modal-overlay .sd-ambience-grid .sd-style-option,
.sd-modal-overlay .sd-ambience-grid [data-ambience],
.sd-modal-overlay .sd-ambience-grid [data-sd-ambience],
.sd-modal-overlay .sd-ambience-grid [data-tss-ambience],
.sd-modal-overlay .sd-ambience-item,
.sd-modal-overlay .sd-style-card {
  color: var(--tss-text-safe) !important;
  border-color: color-mix(in srgb, var(--tss-accent-safe) 30%, transparent) !important;
  background: color-mix(in srgb, var(--tss-panel-safe) 88%, #ffffff 12%) !important;
}

/* Texte interne des choix ambiance */
.sd-modal-overlay .sd-ambience-grid button *,
.sd-modal-overlay .sd-ambience-grid .sd-ambience-option *,
.sd-modal-overlay .sd-ambience-grid .sd-ambience-choice *,
.sd-modal-overlay .sd-ambience-grid .sd-style-option *,
.sd-modal-overlay .sd-ambience-grid [data-ambience] *,
.sd-modal-overlay .sd-ambience-grid [data-sd-ambience] *,
.sd-modal-overlay .sd-ambience-grid [data-tss-ambience] *,
.sd-modal-overlay .sd-ambience-item *,
.sd-modal-overlay .sd-style-card * {
  color: var(--tss-text-safe) !important;
}

/* Ambiance active / sélectionnée */
.sd-modal-overlay .sd-ambience-grid button.is-active,
.sd-modal-overlay .sd-ambience-grid .is-active,
.sd-modal-overlay .sd-ambience-grid .active,
.sd-modal-overlay .sd-ambience-item.is-active,
.sd-modal-overlay .sd-style-card.is-active {
  color: var(--tss-text-safe) !important;
  border-color: var(--tss-accent-safe) !important;
  background: color-mix(in srgb, var(--tss-accent-safe) 16%, var(--tss-panel-safe) 84%) !important;
}

/* Ambiance inactive / disabled */
.sd-modal-overlay .sd-ambience-grid button:disabled,
.sd-modal-overlay .sd-ambience-grid .is-disabled,
.sd-modal-overlay .sd-ambience-grid .disabled {
  opacity: 0.55 !important;
  color: color-mix(in srgb, var(--tss-text-safe) 70%, transparent) !important;
}

/* Hover */
.sd-modal-overlay .sd-ambience-grid button:hover,
.sd-modal-overlay .sd-ambience-grid .sd-ambience-option:hover,
.sd-modal-overlay .sd-ambience-grid .sd-ambience-choice:hover,
.sd-modal-overlay .sd-ambience-grid .sd-style-option:hover,
.sd-modal-overlay .sd-ambience-item:hover,
.sd-modal-overlay .sd-style-card:hover {
  color: var(--tss-text-safe) !important;
  border-color: var(--tss-accent-safe) !important;
  background: color-mix(in srgb, var(--tss-accent-safe) 12%, var(--tss-panel-safe) 88%) !important;
}


/* =========================================================
   TASMIM Smart Showroom V2.1.7 — Consolidation stable
   - Largeur du showroom pilotée depuis Apparence
   - Compatibilité Elementor full width / stretched
   - Mode Couleurs strictes sans dégradés parasites
   - Fond externe, panneau principal et modales stabilisés
   ========================================================= */

/* Largeur interne pilotée par --tss-showroom-width */
.tss-v2-inner {
  width: min(var(--tss-showroom-width, 1140px), 100%) !important;
  max-width: var(--tss-showroom-width, 1140px) !important;
}

.tss-width-compact .tss-v2-inner {
  width: min(960px, 100%) !important;
  max-width: 960px !important;
}

.tss-width-standard .tss-v2-inner {
  width: min(1140px, 100%) !important;
  max-width: 1140px !important;
}

.tss-width-large .tss-v2-inner {
  width: min(1440px, 100%) !important;
  max-width: 1440px !important;
}

.tss-width-full .tss-v2-inner {
  width: 100% !important;
  max-width: none !important;
}

/* Elementor : la section peut être pleine largeur, le plugin garde la largeur choisie */
.elementor-section-full_width .tss-v2-showroom,
.elementor-section-stretched .tss-v2-showroom,
.elementor-widget-container .tss-v2-showroom {
  width: 100% !important;
}

.elementor-section-full_width .elementor-container,
.elementor-section-stretched .elementor-container,
.elementor-section-full_width .elementor-widget-wrap,
.elementor-section-stretched .elementor-widget-wrap {
  max-width: none !important;
}

/* Mode Couleurs strictes : fond externe sans dégradé */
.tss-v2-showroom.tss-style-strict,
.tss-v2-showroom.tss-style-strict.sd-catalog,
.tss-style-strict.tss-v2-showroom,
.tss-style-strict.sd-catalog {
  background: var(--tss-background-safe, var(--tss-background, #F4F0E6)) !important;
  background-image: none !important;
}

.tss-v2-showroom.tss-style-strict::before,
.tss-v2-showroom.tss-style-strict::after,
.tss-style-strict.tss-v2-showroom::before,
.tss-style-strict.tss-v2-showroom::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Mode Couleurs strictes : panneau principal sans reflets parasites */
.tss-v2-showroom.tss-style-strict .tss-v2-inner,
.tss-style-strict .tss-v2-inner {
  background: var(--tss-panel-safe, var(--tss-panel, #FFFFFF)) !important;
  background-image: none !important;
}

.tss-v2-showroom.tss-style-strict .tss-v2-inner::before,
.tss-v2-showroom.tss-style-strict .tss-v2-inner::after,
.tss-style-strict .tss-v2-inner::before,
.tss-style-strict .tss-v2-inner::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* Mode Couleurs strictes : panneaux internes sans mélange visuel excessif */
.tss-v2-showroom.tss-style-strict .tss-v2-side-panel,
.tss-style-strict .tss-v2-side-panel {
  background: var(--tss-panel-safe, var(--tss-panel, #FFFFFF)) !important;
  background-image: none !important;
}

/* Mode premium : conserve un relief doux, mais part toujours du fond choisi */
.tss-v2-showroom.tss-style-premium,
.tss-v2-showroom.tss-style-premium.sd-catalog,
.tss-style-premium.tss-v2-showroom,
.tss-style-premium.sd-catalog {
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--tss-accent-safe) 10%, transparent), transparent 30%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--tss-panel-safe) 10%, transparent), transparent 34%),
    var(--tss-background-safe, var(--tss-background, #F4F0E6)) !important;
}

/* Si Elementor hérite encore d’un fond autour du shortcode */
.elementor-widget-shortcode:has(.tss-v2-showroom.tss-style-strict),
.elementor-widget-container:has(.tss-v2-showroom.tss-style-strict) {
  background: var(--tss-background-safe, var(--tss-background, #F4F0E6)) !important;
  background-image: none !important;
}

/* Modales : sécurité de cohérence en mode strict */
.sd-modal-overlay .tss-style-strict,
.tss-style-strict .sd-modal-box,
.sd-modal-overlay.tss-style-strict .sd-modal-box {
  background: var(--tss-panel-safe, var(--tss-panel, #FFFFFF)) !important;
  background-image: none !important;
}


/* =========================================================
   TASMIM Smart Showroom — Dashboard V2.4.0
   Onglets période cliquables : Semaine / Mois / Année
   ========================================================= */

.tss-dashboard-v234 .tss-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #f8fafc;
}

.tss-dashboard-v234 .tss-tabs button {
  min-height: 32px;
  padding: 0 15px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tss-dashboard-v234 .tss-tabs button:hover {
  color: #071832;
  background: #fff;
}

.tss-dashboard-v234 .tss-tabs button.is-active {
  background: #071832;
  color: #fff;
  box-shadow: 0 8px 18px rgba(7, 24, 50, .18);
}

.tss-dashboard-v234 .tss-chart-render {
  margin-top: 12px;
}


/* =========================================================
   TASMIM Smart Showroom — Dashboard V2.4.0
   Finition onglets période + labels graphiques
   ========================================================= */

.tss-dashboard-v234 .tss-panel-head {
  gap: 16px;
}

.tss-dashboard-v234 .tss-tabs {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.tss-dashboard-v234 .tss-tabs button {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tss-dashboard-v234 .tss-tabs button:hover {
  color: #071832;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}

.tss-dashboard-v234 .tss-tabs button.is-active {
  background: linear-gradient(135deg, #071832, #0d2547);
  color: #fff;
  box-shadow: 0 8px 18px rgba(7, 24, 50, .20);
}

.tss-dashboard-v234 .tss-chart-render {
  margin-top: 10px;
}

.tss-dashboard-v234 .tss-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tss-dashboard-v234 .tss-chart-x-label {
  fill: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

.tss-dashboard-v234 .tss-chart-gridline {
  stroke: #e8edf5;
  stroke-width: 1;
}


/* =========================================================
   TASMIM Smart Showroom — Dashboard V2.4.0
   Finition onglets + labels graphiques S1/S2/S3/S4
   ========================================================= */

.tss-dashboard-v234 .tss-tabs {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.tss-dashboard-v234 .tss-tabs button {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tss-dashboard-v234 .tss-tabs button:hover {
  color: #071832;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
  transform: translateY(-1px);
}

.tss-dashboard-v234 .tss-tabs button.is-active {
  background: linear-gradient(135deg, #071832, #0d2547);
  color: #fff;
  box-shadow: 0 8px 18px rgba(7,24,50,.20);
}

.tss-dashboard-v234 .tss-chart-svg {
  display: block;
  width: 100%;
  height: 132px;
  overflow: visible;
}

.tss-dashboard-v234 .tss-chart-x-label {
  fill: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

.tss-dashboard-v234 .tss-chart-point {
  transition: r .16s ease, filter .16s ease;
}

.tss-dashboard-v234 .tss-chart-point:hover {
  r: 5.2px;
  filter: drop-shadow(0 3px 7px rgba(15,23,42,.20));
}


/* =========================================================
   TASMIM Smart Showroom — V2.4.3
   Actions demandes : clôture sécurisée + demandes terminées
   ========================================================= */

.post-type-tss_request .row-actions .tss-row-action-finish {
  color: #b45309 !important;
  font-weight: 700;
}

.post-type-tss_request .row-actions .tss-row-action-cancel {
  color: #b91c1c !important;
  font-weight: 700;
}

.post-type-tss_request .row-actions .tss-row-action-reopen {
  color: #047857 !important;
  font-weight: 800;
}

.post-type-tss_request .row-actions .tss_duplicate a,
.post-type-tss_request .row-actions .tss-row-action {
  font-weight: 650;
}

/* =========================================================
   TASMIM Smart Showroom — Recovery Step 2.4
   Préparation visuelle sans redesign
   - Chevron visible sur les formats du showroom principal
   - Mode Couleurs strictes : suppression des effets "sales"
     (ombres noires lourdes / halos accent sur cartes et logo)
   - Le mode Premium / dark reste inchangé
   ========================================================= */

/* Le format généré par test-interactif.js doit être identifiable
   immédiatement comme un menu déroulant. */
.sd-modal-overlay select[data-tss-format-select],
.tss-v2-showroom select[data-tss-format-select] {
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 40px 0 12px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--tss-panel-soft, #ffffff) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

/* En Couleurs strictes, les cartes doivent rester propres sur fond clair.
   On conserve le relief mais on supprime l'ombre noire lourde. */
.tss-v2-showroom.tss-style-strict .tss-v2-card,
.tss-style-strict .tss-v2-card {
  background: var(--tss-panel-safe, #ffffff) !important;
  background-image: none !important;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--tss-text-safe) 5%, transparent) !important;
}

.tss-v2-showroom.tss-style-strict .tss-v2-card:hover,
.tss-style-strict .tss-v2-card:hover {
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.11),
    inset 0 0 0 1px color-mix(in srgb, var(--tss-text-safe) 6%, transparent) !important;
}

/* Pas de voile noir / halo accent sur les images en Couleurs strictes. */
.tss-v2-showroom.tss-style-strict .tss-v2-media::after,
.tss-style-strict .tss-v2-media::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Logo propre sur fond clair : pas de halo coloré derrière le visuel. */
.tss-v2-showroom.tss-style-strict .tss-v2-logo,
.tss-style-strict .tss-v2-logo {
  background: var(--tss-panel-safe, #ffffff) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--tss-text-safe) 12%, transparent) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}

/* Les cartes internes des modales restent également neutres en strict.
   Les couleurs de marque restent portées par les bordures / badges / CTA. */
.tss-style-strict .sd-modal-overlay .sd-info-card,
.tss-style-strict .sd-modal-overlay .sd-product-card,
.tss-style-strict .sd-modal-overlay .sd-summary-card,
.tss-style-strict .sd-modal-overlay .sd-qualified-card,
.tss-style-strict .sd-modal-overlay .sd-calc-card,
.tss-style-strict .sd-modal-overlay .sd-result-card,
.tss-style-strict .sd-modal-overlay .sd-form-card,
.tss-style-strict .sd-modal-overlay .sd-message-card,
.tss-style-strict .sd-modal-overlay .sd-modal-panel,
.tss-style-strict .sd-modal-overlay .sd-left-card {
  background: var(--tss-panel-softer, var(--tss-panel-safe, #ffffff)) !important;
  background-image: none !important;
}

/* =========================================================
   TASMIM Smart Showroom — Recovery Step 2.4.1
   Finition du mode Couleurs strictes
   - aucun halo rouge sous les CTA
   - aucune ombre noire sous les cartes produit
   - mode Premium / dark inchangé
   ========================================================= */

.tss-v2-showroom.tss-style-strict .tss-v2-card,
.tss-style-strict .tss-v2-card,
.tss-v2-showroom.tss-style-strict .tss-v2-card:hover,
.tss-style-strict .tss-v2-card:hover {
  box-shadow: none !important;
}

/* CTA / boutons actifs : couleur conservée, ombre supprimée en strict */
.tss-v2-showroom.tss-style-strict .tss-v2-filter.is-active,
.tss-v2-showroom.tss-style-strict .tss-v2-btn-primary,
.tss-v2-showroom.tss-style-strict .sd-quote-product,
.tss-v2-showroom.tss-style-strict .sd-modal-action.primary,
.tss-v2-showroom.tss-style-strict .sd-doc-btn.primary,
.tss-v2-showroom.tss-style-strict .sd-upload-btn,
.tss-style-strict .tss-v2-filter.is-active,
.tss-style-strict .tss-v2-btn-primary,
.tss-style-strict .sd-quote-product,
.tss-style-strict .sd-modal-action.primary,
.tss-style-strict .sd-doc-btn.primary,
.tss-style-strict .sd-upload-btn {
  box-shadow: none !important;
}

.tss-v2-showroom.tss-style-strict .tss-v2-btn-primary:hover,
.tss-v2-showroom.tss-style-strict .sd-quote-product:hover,
.tss-v2-showroom.tss-style-strict .sd-modal-action.primary:hover,
.tss-v2-showroom.tss-style-strict .sd-doc-btn.primary:hover,
.tss-v2-showroom.tss-style-strict .sd-upload-btn:hover,
.tss-style-strict .tss-v2-btn-primary:hover,
.tss-style-strict .sd-quote-product:hover,
.tss-style-strict .sd-modal-action.primary:hover,
.tss-style-strict .sd-doc-btn.primary:hover,
.tss-style-strict .sd-upload-btn:hover {
  box-shadow: none !important;
}

/* =========================================================
   TASMIM Smart Showroom — V2.9.5 Step 2.5A
   PREMIUM UI FOUNDATION
   Objectif :
   - rapprocher visuellement la fiche catalogue de [tasmim_product]
   - calmer les écrans et réduire l'effet "formulaire"
   - améliorer la hiérarchie, les espaces et les actions
   - conserver les couleurs client actuelles
   - préparer la future charte Smart Showroom sans la figer
   ========================================================= */

/* ---------- 1. Catalogue : cartes plus calmes ---------- */

.tss-v2-showroom .tss-v2-grid {
  gap: 22px !important;
  align-items: stretch !important;
}

.tss-v2-showroom .tss-v2-card {
  max-width: 390px !important;
  border-radius: 22px !important;
  border-width: 1px !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background-color .22s ease !important;
}

.tss-v2-showroom .tss-v2-card:hover {
  transform: translateY(-2px) !important;
}

.tss-v2-showroom .tss-v2-media {
  height: 235px !important;
}

.tss-v2-showroom .tss-v2-card-body {
  padding: 20px 20px 18px !important;
}

.tss-v2-showroom .tss-v2-card-body h3 {
  margin-bottom: 10px !important;
  font-size: 23px !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

.tss-v2-showroom .tss-v2-meta {
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.tss-v2-showroom .tss-v2-chip {
  min-height: 24px !important;
  padding: 0 9px !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

.tss-v2-showroom .tss-v2-price {
  margin-top: auto !important;
  padding-top: 8px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
}

.tss-v2-showroom .tss-v2-actions {
  margin-top: 16px !important;
}

.tss-v2-showroom .tss-v2-actions .tss-v2-btn:not([hidden]) {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ---------- 2. Modale : shell premium ---------- */

.sd-modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 74px 20px 22px !important;
  background: rgba(15, 19, 30, .52) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.admin-bar .sd-modal-overlay {
  padding-top: 96px !important;
}

.sd-modal-box {
  width: min(1180px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 118px) !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 80px rgba(10, 18, 32, .22) !important;
  scrollbar-gutter: stable !important;
}

.admin-bar .sd-modal-box {
  max-height: calc(100dvh - 140px) !important;
}

.tss-style-strict .sd-modal-box {
  border-color: color-mix(in srgb, var(--tss-text-safe) 10%, transparent) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .18) !important;
}

.sd-modal-close {
  top: 14px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 14px 14px -54px auto !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .10) !important;
  transition: transform .18s ease, border-color .18s ease !important;
}

.tss-style-strict .sd-modal-close {
  border-color: rgba(15, 23, 42, .10) !important;
  background: rgba(255,255,255,.96) !important;
  color: #151823 !important;
}

.sd-modal-close:hover {
  transform: scale(1.04) !important;
}

/* ---------- 3. Fiche produit principale : 50/50 calme ---------- */

.sd-modal-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.sd-modal-left {
  padding: 28px !important;
}

.sd-modal-content {
  padding: 28px 34px 22px !important;
}

.tss-style-strict .sd-modal-left {
  border-right-color: rgba(15, 23, 42, .08) !important;
}

.sd-modal-image-wrap {
  height: clamp(320px, 42vh, 430px) !important;
  border-radius: 20px !important;
}

.sd-modal-image-wrap img {
  object-fit: contain !important;
}

.tss-style-strict .sd-modal-image-wrap {
  background: #f7f5ef !important;
}

.tss-style-strict .sd-modal-image-wrap::after {
  display: none !important;
}

.sd-modal-badge {
  left: 14px !important;
  bottom: 14px !important;
  padding: 7px 11px !important;
  font-size: 9.5px !important;
}

.sd-modal-kicker {
  margin-bottom: 8px !important;
  padding: 5px 9px !important;
  font-size: 9.5px !important;
}

.sd-modal-content h3 {
  margin-bottom: 7px !important;
  font-size: clamp(28px, 2.5vw, 36px) !important;
  line-height: 1.08 !important;
}

.tss-style-strict .sd-modal-content h3 {
  color: var(--tss-text-safe) !important;
}

.sd-modal-content > p {
  max-width: 650px !important;
  margin-bottom: 18px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Le gros encadré d'aide n'a plus à concurrencer la fiche produit. */
#sd-guide-ambience {
  display: none !important;
}

/* ---------- 4. Ambiances : choix plus discret ---------- */

.sd-modal-ambiences {
  margin-bottom: 18px !important;
}

.sd-modal-subtitle {
  margin-bottom: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 9.5px !important;
  letter-spacing: .10em !important;
}

.sd-ambience-grid {
  gap: 8px !important;
}

.sd-ambience-grid button,
.sd-ambience-btn {
  min-height: 54px !important;
  padding: 11px 13px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.sd-ambience-grid button span,
.sd-ambience-btn span {
  font-size: 13px !important;
  font-weight: 750 !important;
}

.sd-ambience-grid button strong,
.sd-ambience-btn strong {
  margin-top: 3px !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  opacity: .70 !important;
}

/* ---------- 5. Informations produit : plus de faux boutons ---------- */

.sd-right-specs {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

.sd-right-specs > .sd-modal-subtitle {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}

.sd-right-specs-grid {
  gap: 0 18px !important;
}

.sd-right-specs-grid > div {
  min-height: 54px !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

.sd-right-specs-grid span {
  margin-bottom: 3px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.sd-right-specs-grid strong {
  font-size: 13px !important;
  font-weight: 750 !important;
}

.sd-right-specs-grid select[data-tss-format-select] {
  min-height: 34px !important;
  padding-left: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

/* ---------- 6. Documents : liens sobres ---------- */

.sd-right-docs,
.sd-left-docs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

.sd-right-docs .sd-doc-btn,
.sd-left-docs a,
.sd-left-docs button {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.tss-style-strict .sd-right-docs .sd-doc-btn,
.tss-style-strict .sd-left-docs a,
.tss-style-strict .sd-left-docs button {
  color: color-mix(in srgb, var(--tss-text-safe) 76%, transparent) !important;
}

/* ---------- 7. Mon projet : vrai bloc de comparaison ---------- */

.sd-left-upload {
  margin-top: 16px !important;
  padding: 17px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.tss-style-strict .sd-left-upload {
  border: 1px dashed rgba(15,23,42,.16) !important;
  background: #fbfaf7 !important;
  background-image: none !important;
}

.sd-left-upload .sd-left-panel-head span {
  font-size: 9.5px !important;
}

.sd-left-upload .sd-left-panel-head strong {
  margin: 4px 0 7px !important;
  font-size: 17px !important;
}

.sd-left-upload p {
  margin-bottom: 12px !important;
  font-size: 11.5px !important;
}

.sd-upload-btn {
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* ---------- 8. Barre d'actions : navigation évidente ---------- */

.sd-modal-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 8 !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 22px -34px -22px !important;
  padding: 14px 34px 16px !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}

.tss-style-strict .sd-modal-actions {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.sd-modal-action {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.sd-modal-action[data-modal-action="back"] {
  order: -1 !important;
  margin-right: auto !important;
}

.sd-modal-action.primary {
  min-width: 170px !important;
}

/* ---------- 9. Calculateur / Résumé / Coordonnées : premium unifié ---------- */

.sd-modal-calc,
.sd-quote-preview,
.sd-qualified-card,
.sd-left-summary,
.sd-left-commercial {
  border-radius: 18px !important;
  box-shadow: none !important;
}

.tss-style-strict .sd-modal-calc,
.tss-style-strict .sd-quote-preview,
.tss-style-strict .sd-qualified-card,
.tss-style-strict .sd-left-summary,
.tss-style-strict .sd-left-commercial {
  border-color: rgba(15,23,42,.09) !important;
  background: #fbfaf7 !important;
  background-image: none !important;
}

.sd-quote-preview-grid,
.sd-info-list {
  gap: 0 16px !important;
}

.tss-style-strict .sd-quote-preview-grid > div,
.tss-style-strict .sd-info-list > div {
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ---------- 10. Responsive ---------- */

@media (max-width: 980px) {
  .sd-modal-box {
    width: min(760px, calc(100vw - 28px)) !important;
  }

  .sd-modal-grid {
    grid-template-columns: 1fr !important;
  }

  .sd-modal-left {
    padding: 22px !important;
    border-right: 0 !important;
  }

  .sd-modal-content {
    padding: 22px !important;
  }

  .sd-modal-image-wrap {
    height: min(420px, 46vh) !important;
  }

  .sd-modal-actions {
    margin: 20px -22px -22px !important;
    padding: 13px 22px 15px !important;
  }
}

@media (max-width: 720px) {
  .sd-modal-overlay {
    align-items: flex-start !important;
    padding: 66px 8px 8px !important;
  }

  .admin-bar .sd-modal-overlay {
    padding-top: 84px !important;
  }

  .sd-modal-box,
  .admin-bar .sd-modal-box {
    width: 100% !important;
    max-height: calc(100dvh - 76px) !important;
    border-radius: 20px !important;
  }

  .sd-modal-left,
  .sd-modal-content {
    padding: 17px !important;
  }

  .sd-modal-image-wrap {
    height: 300px !important;
    border-radius: 16px !important;
  }

  .sd-right-specs-grid {
    grid-template-columns: 1fr !important;
  }

  .sd-modal-actions {
    position: sticky !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 18px -17px -17px !important;
    padding: 12px 17px 14px !important;
  }

  .sd-modal-action,
  .sd-modal-action.primary {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sd-modal-action[data-modal-action="back"] {
    order: 3 !important;
    margin-right: 0 !important;
  }
}