/* Jante SM landing — accent orange (#FF3D0D), style SupermotLife dans le shell GXS */



.jante-sm-page {

  --jante-orange: #ff3d0d;

  --jante-orange-dim: rgba(255, 61, 13, 0.16);

  --jante-orange-glow: rgba(255, 61, 13, 0.35);

  --jante-panel: rgba(12, 12, 14, 0.88);

  --jante-border: rgba(255, 255, 255, 0.12);

  --jante-muted: rgba(232, 238, 245, 0.68);

  color: #e8eef5;

  padding-bottom: 4rem;

}



.jante-sm-flash {

  margin: 1rem 0;

  padding: 0.75rem 1rem;

  border: 1px solid var(--jante-orange);

  background: var(--jante-orange-dim);

  border-radius: 8px;

}



/* —— Full-bleed hero video —— */

.jante-sm-hero {

  position: relative;

  min-height: min(78vh, 720px);

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  margin: 0 0 2.5rem;

  border-bottom: 1px solid var(--jante-border);

}



.jante-sm-hero-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

}



.jante-sm-hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0.78) 100%),

    linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 45%);

  pointer-events: none;

}



.jante-sm-hero-inner {

  position: relative;

  z-index: 2;

  padding: 3.5rem 0 3rem;

  max-width: 42rem;

}



.jante-sm-kicker {

  margin: 0 0 0.55rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--jante-orange);

}



.jante-sm-title {

  margin: 0 0 0.85rem;

  font-size: clamp(2.2rem, 5vw, 3.6rem);

  line-height: 1.02;

  text-transform: uppercase;

  color: #fff;

}



.jante-sm-lead {

  margin: 0 0 1.4rem;

  color: var(--jante-muted);

  font-size: 1.05rem;

  line-height: 1.55;

  max-width: 36rem;

}



.jante-sm-hero-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 2.75rem;

  padding: 0.65rem 1.4rem;

  background: var(--jante-orange);

  color: #fff;

  font-weight: 700;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  border-radius: 6px;

  box-shadow: 0 8px 28px var(--jante-orange-glow);

  transition: transform 0.2s ease, background 0.2s ease;

}



.jante-sm-hero-cta:hover {

  background: #ff5528;

  color: #fff;

  transform: translateY(-2px);

}



/* —— Configurator layout —— */

.jante-sm-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);

  gap: 1.5rem;

  align-items: start;

  margin-bottom: 3rem;

}



@media (max-width: 900px) {

  /* Flex (pas grid 1 col) : sticky a besoin d’un parent continu stage+config. */
  .jante-sm-layout {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    overflow: visible;

  }



  .jante-sm-hero {

    min-height: 58vh;

  }

}



.jante-sm-stage,

.jante-sm-config {

  background: var(--jante-panel);

  backdrop-filter: blur(14px);

  border: 1px solid var(--jante-border);

  border-radius: 12px;

  padding: 1.25rem 1.35rem;

}



/* Preview collé au scroll desktop (config longue à droite). */

@media (min-width: 901px) {

  .jante-sm-stage {

    position: sticky;

    top: calc(var(--header-height, 72px) + 1rem);

    z-index: 2;

    align-self: start;

  }

}



.jante-sm-stage-toolbar {

  display: flex;

  gap: 0.5rem;

  margin-bottom: 0.85rem;

}



.jante-sm-view-btn {

  appearance: none;

  border: 1px solid var(--jante-border);

  background: rgba(0, 0, 0, 0.45);

  color: #fff;

  padding: 0.45rem 0.95rem;

  border-radius: 6px;

  cursor: pointer;

  font-size: 0.85rem;

  font-weight: 600;

}



.jante-sm-view-btn.is-active {

  border-color: var(--jante-orange);

  background: var(--jante-orange);

  color: #fff;

}



.jante-sm-preview-wrap {

  position: relative;

  aspect-ratio: 1 / 1;

  border-radius: 10px;

  overflow: hidden;

  background:

    radial-gradient(circle at 40% 30%, rgba(255, 61, 13, 0.12), transparent 55%),

    #050506;

}



.jante-sm-preview-wrap.is-hidden {

  display: none;

}



.jante-sm-preview {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.75));

}



.jante-sm-c3d {

  width: 100%;

  height: 100%;

  display: block;

  touch-action: none;

}



.jante-sm-3d-status {

  position: absolute;

  left: 0.75rem;

  bottom: 0.75rem;

  z-index: 3;

  margin: 0;

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.75);

  background: rgba(0, 0, 0, 0.5);

  padding: 0.35rem 0.55rem;

  border-radius: 6px;

}

/* « Photo non contractuelle » vertical — même pattern que la galerie produit moto. */
.jante-sm-preview-wrap .jante-sm-photo-disclaimer {
  z-index: 4;
  color: rgba(255, 255, 255, 0.42);
}

/* Mobile : aperçu 2D/3D sticky (après styles de base pour gagner en cascade). */
@media (max-width: 900px) {
  /* overflow-x:clip sur #main-content casse sticky sur certains WebKit — visible ici. */
  #main-content.jante-sm-page {
    overflow-x: visible;
  }

  .jante-sm-stage {
    position: sticky;
    top: var(--product-gallery-sticky-top, calc(var(--header-height, 72px) + 0.5rem));
    z-index: 30;
    align-self: stretch;
    max-height: calc(100dvh - var(--product-gallery-sticky-top, 72px) - 0.5rem);
    overflow: hidden;
    padding: 0.7rem 0.85rem 0.85rem;
    background: rgba(10, 10, 12, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  }

  .jante-sm-stage-toolbar {
    margin-bottom: 0.5rem;
  }

  .jante-sm-view-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Hauteur bornée : couleurs visibles en même temps que le visuel. */
  .jante-sm-preview-wrap {
    width: min(100%, min(46vh, 300px));
    max-height: min(46vh, 300px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

  .jante-sm-3d-status {
    font-size: 0.68rem;
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.25rem 0.45rem;
  }
}



/* —— Numbered sections + orange tiles —— */

.jante-sm-fieldset {

  border: 0;

  margin: 0 0 1.4rem;

  padding: 0;

}



.jante-sm-legend {

  display: flex;

  align-items: baseline;

  gap: 0.45rem;

  font-family: inherit;

  font-weight: 700;

  font-size: 1.05rem;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  margin-bottom: 0.75rem;

  color: rgba(255, 255, 255, 0.55);

}



.jante-sm-step {

  color: var(--jante-orange);

}



.jante-sm-sublabel {

  margin: 0 0 0.55rem;

  font-size: 0.8rem;

  color: var(--jante-muted);

  text-transform: uppercase;

  letter-spacing: 0.06em;

}



.jante-sm-options,
.jante-sm-options--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

@media (max-width: 520px) {
  .jante-sm-options,
  .jante-sm-options--2 {
    grid-template-columns: 1fr;
  }
}



.jante-sm-option {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 0.35rem;

  padding: 0.95rem 0.75rem;

  border: 1px solid rgba(160, 160, 160, 0.45);

  border-radius: 6px;

  cursor: pointer;

  background: rgba(0, 0, 0, 0.55);

  color: #fff;

  font-weight: 700;

  font-size: 0.88rem;

  line-height: 1.25;

  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;

}



.jante-sm-option span {

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

  align-items: center;

}



.jante-sm-option small,

.jante-sm-option em {

  font-weight: 500;

  font-style: normal;

  font-size: 0.72rem;

  opacity: 0.7;

}



.jante-sm-option input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.jante-sm-option:hover {

  border-color: rgba(255, 255, 255, 0.35);

}



.jante-sm-option:has(input:checked) {

  background: var(--jante-orange);

  border-color: var(--jante-orange);

  color: #fff;

  box-shadow: 0 6px 18px var(--jante-orange-glow);

}



.jante-sm-option:has(input:checked) small,

.jante-sm-option:has(input:checked) em {

  opacity: 0.9;

}



.jante-sm-option--format {

  position: relative;

}



.jante-sm-option-inner {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.4rem;

}



.jante-sm-format-icon {

  width: 2.1rem;

  height: 2.1rem;

  color: currentColor;

  opacity: 0.92;

}



.jante-sm-option-label {

  font-size: 0.88rem;

  line-height: 1.25;

}



.jante-sm-colors {

  display: flex;

  flex-wrap: wrap;

  gap: 0.65rem;

  margin-bottom: 0.85rem;

}



.jante-sm-color {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.3rem;

  cursor: pointer;

  padding: 0.2rem;

}



.jante-sm-color input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.jante-sm-swatch {

  width: 2.35rem;

  height: 2.35rem;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);

  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;

}



.jante-sm-color:has(input:checked) .jante-sm-swatch {

  border-color: #fff;

  transform: scale(1.12);

  box-shadow: 0 0 0 2px var(--jante-orange), 0 0 16px rgba(255, 255, 255, 0.18);

}



.jante-sm-color-name {

  font-size: 0.68rem;

  text-align: center;

  color: var(--jante-muted);

  max-width: 4.5rem;

}



.jante-sm-dual-toggle {

  margin: 0.35rem 0 0.85rem;

}



.jante-sm-dual-toggle.is-hidden,

.jante-sm-dual-hint.is-hidden,

.jante-sm-dual-modes.is-hidden,

.jante-sm-color-block.is-hidden {

  display: none;

}



.jante-sm-dual-hint {

  margin: 0.55rem 0 0;

  padding: 0 0.15rem;

  font-size: 0.78rem;

  line-height: 1.45;

  color: var(--jante-muted);

}



.jante-sm-dual-check {

  display: flex;

  align-items: flex-start;

  gap: 0.6rem;

  cursor: pointer;

  padding: 0.75rem 0.9rem;

  border: 1px solid var(--jante-border);

  border-radius: 6px;

  background: rgba(255, 61, 13, 0.06);

  font-size: 0.9rem;

  color: #fff;

}



.jante-sm-dual-check input {

  margin-top: 0.15rem;

  accent-color: var(--jante-orange);

}



.jante-sm-dual-check em {

  font-style: normal;

  color: var(--jante-orange);

  font-weight: 700;

}



.jante-sm-dual-modes {

  margin-top: 0.75rem;

}



.jante-sm-dual-mode-options {

  display: grid;

  gap: 0.55rem;

}



.jante-sm-dual-mode {

  display: flex;

  align-items: flex-start;

  gap: 0.65rem;

  cursor: pointer;

  padding: 0.7rem 0.85rem;

  border: 1px solid var(--jante-border);

  border-radius: 6px;

  background: rgba(12, 12, 14, 0.55);

  transition: border-color 0.15s ease, background 0.15s ease;

}



.jante-sm-dual-mode:has(input:checked) {

  border-color: rgba(255, 61, 13, 0.55);

  background: rgba(255, 61, 13, 0.1);

}



.jante-sm-dual-mode input {

  margin-top: 0.2rem;

  accent-color: var(--jante-orange);

  flex-shrink: 0;

}



.jante-sm-dual-mode strong {

  display: block;

  color: #fff;

  font-size: 0.92rem;

  font-weight: 700;

}



.jante-sm-dual-mode small {

  display: block;

  margin-top: 0.2rem;

  color: var(--jante-muted);

  font-size: 0.78rem;

  line-height: 1.35;

}



.jante-sm-summary {

  margin-top: 1.5rem;

  padding-top: 1.1rem;

  border-top: 1px solid var(--jante-border);

}



.jante-sm-price {

  margin: 0 0 0.85rem;

  font-size: 1.7rem;

  font-weight: 800;

  color: #fff;

}



.jante-sm-cta {

  width: 100%;

  min-height: 3.15rem;

  background: #fff !important;

  color: #000 !important;

  border: none !important;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  border-radius: 6px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);

  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;

}



.jante-sm-cta:hover {

  background: var(--jante-orange) !important;

  color: #fff !important;

  transform: translateY(-2px);

}



.jante-sm-summary-line {

  margin: 0.85rem 0 0;

  font-size: 0.85rem;

  color: var(--jante-muted);

}



.jante-sm-stock-warn {

  color: #ffb4a8;

  margin: 0.5rem 0;

}



/* —— Features + SEO —— */

.jante-sm-features {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 2.5rem;

}



@media (max-width: 760px) {

  .jante-sm-features {

    grid-template-columns: 1fr;

  }

}



.jante-sm-feature {

  padding: 1.4rem 1.25rem;

  background: var(--jante-panel);

  border: 1px solid var(--jante-border);

  border-top: 3px solid var(--jante-orange);

  border-radius: 10px;

}



.jante-sm-feature h3 {

  margin: 0 0 0.4rem;

  font-size: 1.35rem;

  text-transform: uppercase;

  color: #fff;

}



.jante-sm-feature p {

  margin: 0;

  color: var(--jante-muted);

  font-size: 0.95rem;

  line-height: 1.45;

}



.jante-sm-seo {

  margin-bottom: 2rem;

  padding: 2rem 1.75rem;

  background: rgba(8, 8, 10, 0.85);

  border: 1px solid var(--jante-border);

  border-radius: 14px;

}



.jante-sm-seo-title {

  margin: 0 0 1.25rem;

  font-size: clamp(1.6rem, 3vw, 2.2rem);

  text-transform: uppercase;

  color: var(--jante-orange);

}



.jante-sm-seo-body {

  color: var(--jante-muted);

  line-height: 1.7;

  font-size: 1.02rem;

}



.jante-sm-seo-body h4 {

  margin: 1.6rem 0 0.75rem;

  color: #fff;

  font-size: 1.15rem;

  text-transform: uppercase;

}



.jante-sm-seo-body p {

  margin: 0 0 1rem;

}



.jante-sm-seo-body ul {

  margin: 0 0 1rem;

  padding-left: 1.25rem;

}



.jante-sm-seo-body li {

  margin-bottom: 0.45rem;

}



.jante-sm-seo-body strong {

  color: #fff;

}



/* Cartes vinyle site (renderProductVinylChoices) dans le configurateur Jante SM */
.jante-sm-vinyl-intro {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--jante-muted);
  line-height: 1.45;
}

.jante-sm-vinyl-host {
  margin-top: 0.25rem;
}

.jante-sm-vinyl-host .product-vinyl-choices {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.jante-sm-vinyl-host .product-vinyl-group .label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 238, 245, 0.85);
}

.jante-sm-vinyl-host .vinyl-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.jante-sm-vinyl-host .vinyl-choice-btn {
  border-color: var(--jante-border);
  background: rgba(255, 255, 255, 0.04);
}

.jante-sm-vinyl-host .vinyl-choice-btn.selected {
  border-color: var(--jante-orange);
  box-shadow: 0 0 0 1px var(--jante-orange-dim);
}

.jante-sm-vinyl-host .vinyl-pair-advice {
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 61, 13, 0.35);
  background: var(--jante-orange-dim);
  color: #e8eef5;
  font-size: 0.85rem;
}