/* ==========================================================================
   COMPOSEUR EN 2 ÉTAPES + supports triés + pastilles doré/argenté
   (custom-composeur-etapes.js). Tailles en px. Charte : Encre #3A343C.
   ========================================================================== */

/* ---------- ce qui s'affiche à chaque étape ---------- */
html.ody-compo-etape-1 .wooco_components_block {
  display: none !important;
}
html.ody-compo-etape-2 .support-component {
  display: none !important;
}
/* Étape 1 : « Choisis tes charms » à la place de « Ajouter au panier » (et l'écrin se choisit à la fin) */
html.ody-compo-etape-1 .custom-product-fixed-bar .single_add_to_cart_button,
html.ody-compo-etape-1 .custom-product-fixed-bar .odyssee-ecrin {
  display: none !important;
}
html:not(.ody-compo-etape-1) .ody-etapes-cta {
  display: none !important;
}
.ody-etapes-cta svg {
  width: 15px;
  height: 10px;
  margin-left: 4px;
}
/* Le bandeau d'étapes remplace les titres « Type de support » et « Les charms » */
html.ody-compo .support-component > .wooco_component_name,
html.ody-compo .wooco_components_charms-title {
  display: none !important;
}

/* ---------- bandeau « 1/2 Choisis ton support » ---------- */
.ody-etapes {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 4px 0 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(58, 52, 60, 0.15);
  border-bottom: 1px solid rgba(58, 52, 60, 0.15);
}
.ody-etapes__titre {
  flex: 1;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font: 600 14px/1.3 'Manrope', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3a343c;
}
/* le thème passe certains <span> en block : « 1/2 » et le texte restent sur une ligne */
.ody-etapes__titre span {
  display: inline !important;
}
.ody-etapes__num {
  color: #6e4a5a;
  margin-right: 4px;
}
.ody-etapes__prec,
.ody-etapes__suiv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #3a343c;
  cursor: pointer;
}
.ody-etapes__prec svg,
.ody-etapes__suiv svg {
  width: 18px;
  height: 12px;
}
.ody-etapes__prec:disabled,
.ody-etapes__suiv:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ---------- supports : titres de section + une tuile par modèle ---------- */
.support-component .ody-support-titre {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  font: 600 12px/1.3 'Manrope', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3a343c;
}
.support-component .ody-support-titre[data-type="0"] {
  margin-top: 0;
}
.support-component .wooco_component_product_selection_item.ody-support-masque {
  display: none !important;
}

/* Pastilles sous le nom : la tuile s'allonge de 26px, le bandeau du nom remonte d'autant */
.support-component .wooco_component_product_selection_item.ody-avec-pastilles {
  padding-bottom: 26px !important;
  aspect-ratio: auto !important; /* la tuile était forcée carrée : l'image rétrécissait */
  height: auto !important;
}
.support-component .wooco_component_product_selection_item.ody-avec-pastilles::after {
  bottom: 26px !important;
}
.ody-pastilles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
}
.ody-pastille {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(58, 52, 60, 0.15);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* zone de toucher élargie (doigt) sans agrandir la pastille */
.ody-pastille::before {
  content: '';
  position: absolute;
  inset: -6px;
}
.ody-pastille--or {
  background: linear-gradient(135deg, #f5e6b8, #d4af37 45%, #a67c00);
}
.ody-pastille--argent {
  background: linear-gradient(135deg, #f4f4f4, #c9c9c9 50%, #9d9d9d);
}
.ody-pastille.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #3a343c;
}

@media (max-width: 767px) {
  .ody-etapes__titre {
    font-size: 13px;
    letter-spacing: 0.04em;
  }
}

/* ---------- présentation « global » : Doré | Argenté en haut de l'étape 1 ---------- */
.support-component .ody-metal-global {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 0 0 14px;
}
.ody-metal-global__choix {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font: 600 12px/1.2 'Manrope', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a939b;
  cursor: pointer;
}
.ody-metal-global__choix.is-active {
  color: #3a343c;
  border-bottom-color: #3a343c;
}

/* ---------- présentation « texte » : Doré · Argenté sous le nom ---------- */
.ody-pastilles.ody-pastilles--texte {
  gap: 12px;
}
.ody-pastille.ody-pastille--texte {
  width: auto;
  height: auto;
  padding: 2px 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  background: none;
  box-shadow: none;
  font: 600 10px/1.1 'Manrope', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a939b;
}
.ody-pastille.ody-pastille--texte.is-active {
  color: #3a343c;
  border-bottom-color: #3a343c;
  box-shadow: none;
}

/* ---------- retouches 30/09 (retour Mathilde) ---------- */
/* Nom des supports : le thème ajoute une marge sous le bandeau du nom des 6 supports
   d'origine (Vestige, Instant, Horizon, bracelets, chaîne de corps) → même rendu que
   les supports ajoutés (Cascade, perles) : bandeau collé en bas de l'image. */
html.ody-compo .support-component .wooco_component_product_selection_item::after {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  /* « Compose ton bijou » remonté sous l'aperçu (27px → 10px) */
  html.ody-compo .is-custom-product .single-product__summary {
    padding-top: 10px !important;
  }
  /* « Colliers » remonté sous le bandeau 1/2 (34px → 12px) */
  html.ody-compo .ody-etapes {
    margin-bottom: 8px;
  }
  html.ody-compo .support-component {
    padding-top: 0 !important;
  }
  html.ody-compo .support-component > .wooco_component_product {
    margin-top: 4px !important;
  }
}