/* Odyssée — supports supplémentaires du composeur : cadre + positions des charms.
   Chargé APRÈS le CSS compilé (via functions.php). Coordonnées en rem dans le cadre
   du wrapper (50x60rem mobile / 70x80rem tablette), comme les supports d'origine. */

/* Cascade / Petites perles / Perles : VISIBLES sur mobile pour les clientes.
   Positions mobile calées le 13/08 (au doigt via ?calage), images argentées en place
   le 14/08 -> masquage mobile RETIRÉ le 14/08 = ouverture aux clientes.
   Citrine reste masqué < 768px : il est en RUPTURE (donc absent du composeur) et pas
   encore calé sur mobile. Le mode ?showsupports (html.odyssee-show-new-supports) le
   montre quand même en aperçu privé, pour le caler avant de le réactiver un jour. */
@media (max-width: 767px) {
  html:not(.odyssee-show-new-supports) .support-component .wooco_component_product_selection_list_item.collier-citrine {
    display: none !important;
  }
}

/* Cadre du wrapper des boutons-charms (identique aux supports d'origine) */
.charms-buttons-wrapper.is-collier-cascade,
.charms-buttons-wrapper.is-collier-citrine,
.charms-buttons-wrapper.is-collier-petites-perles-d-eau-douces,
.charms-buttons-wrapper.is-collier-perles-d-eau-douce {
  margin: 0 auto;
  width: 50rem;
  height: 60rem;
}
@media (min-width: 768px) {
  .charms-buttons-wrapper.is-collier-cascade,
  .charms-buttons-wrapper.is-collier-citrine,
  .charms-buttons-wrapper.is-collier-petites-perles-d-eau-douces,
  .charms-buttons-wrapper.is-collier-perles-d-eau-douce {
    width: 70rem;
    height: 80rem;
  }
}

/* ==================== COLLIER CASCADE — 2 charms (retombée en Y) — VALIDÉ ==================== */
.wooco_components:has(.collier-cascade.wooco_item_selected)
  :is(.third-charm, .fourth-charm, .fifth-charm, .sixth-charm, .seventh-charm) {
  display: none;
}
.charms-buttons-wrapper.is-collier-cascade .charm-button--third,
.charms-buttons-wrapper.is-collier-cascade .charm-button--fourth,
.charms-buttons-wrapper.is-collier-cascade .charm-button--fifth,
.charms-buttons-wrapper.is-collier-cascade .charm-button--sixth,
.charms-buttons-wrapper.is-collier-cascade .charm-button--seventh {
  display: none;
}
.is-collier-cascade[data-visible-charms="2"] .charm-button--first {
  left: 21rem; top: 31.1rem; transform: rotate(0deg);
}
.is-collier-cascade[data-visible-charms="2"] .charm-button--second {
  left: 20.7rem; top: 36rem; transform: rotate(0deg);
}
@media (min-width: 768px) {
  .is-collier-cascade[data-visible-charms="2"] .charm-button--first {
    left: 29rem; top: 45rem;
  }
  .is-collier-cascade[data-visible-charms="2"] .charm-button--second {
    left: 28.55rem; top: 54.5rem;
  }
}

/* ============ PETITES PERLES D'EAU DOUCE — 7 charms (gabarit collier-instant, à affiner) ============ */
/* MOBILE (cadre 50x60rem) */
.is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--first   { left: 12.4rem; top: 14.4rem; transform: rotate(85deg); }
.is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--second  { left: 13.5rem; top: 19.5rem; transform: rotate(75deg); }
.is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--third   { left: 16.6rem; top: 23.8rem; transform: rotate(53deg); }
.is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--fourth  { left: 21.8rem; top: 26.5rem; transform: rotate(0deg); }
.is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--fifth   { left: 27.2rem; top: 23.8rem; transform: rotate(-49deg); }
.is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--sixth   { left: 30.3rem; top: 19.4rem; transform: rotate(-75deg); }
.is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--seventh { left: 32rem; top: 14.3rem; transform: rotate(-85deg); }
/* TABLETTE + (cadre 70x80rem) */
@media (min-width: 768px) {
  .is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--first   { left: 11rem;    top: 11.55rem; transform: rotate(85deg); }
  .is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--second  { left: 13.2rem;  top: 21.55rem; transform: rotate(75deg); }
  .is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--third   { left: 19.35rem; top: 30.3rem; transform: rotate(53deg); }
  .is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--fourth  { left: 30.8rem;  top: 36.25rem; transform: rotate(0deg); }
  .is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--fifth   { left: 42.2rem;  top: 30.4rem; transform: rotate(-49deg); }
  .is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--sixth   { left: 48.35rem; top: 21.35rem; transform: rotate(-75deg); }
  .is-collier-petites-perles-d-eau-douces[data-visible-charms="7"] .charm-button--seventh { left: 51.8rem;  top: 11.1rem; transform: rotate(-85deg); }
}

/* ============ PERLES D'EAU DOUCE — 7 charms (base = Petites perles validé, à affiner) ============ */
/* MOBILE (cadre 50x60rem) */
.is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--first { left: 12.4rem; top: 20.4rem; transform: rotate(65deg); }
.is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--second { left: 14.5rem; top: 23.4rem; transform: rotate(60deg); }
.is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--third { left: 17.4rem; top: 26.1rem; transform: rotate(38deg); }
.is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--fourth { left: 21.7rem; top: 27.3rem; transform: rotate(0deg); }
.is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--fifth { left: 26rem; top: 25.9rem; transform: rotate(-28deg); }
.is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--sixth { left: 29.7rem; top: 23.1rem; transform: rotate(-60deg); }
.is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--seventh { left: 31.3rem; top: 19.6rem; transform: rotate(-65deg); }
/* TABLETTE + (cadre 70x80rem) */
@media (min-width: 768px) {
  .is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--first { left: 11.5rem; top: 23.45rem; transform: rotate(65deg); }
  .is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--second { left: 15.2rem; top: 29.55rem; transform: rotate(60deg); }
  .is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--third { left: 21.25rem; top: 34.9rem; transform: rotate(38deg); }
  .is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--fourth { left: 30.55rem; top: 37.55rem; transform: rotate(0deg); }
  .is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--fifth { left: 39.4rem; top: 34.75rem; transform: rotate(-28deg); }
  .is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--sixth { left: 46.8rem; top: 28.95rem; transform: rotate(-60deg); }
  .is-collier-perles-d-eau-douce[data-visible-charms="7"] .charm-button--seventh { left: 50.25rem; top: 21.85rem; transform: rotate(-65deg); }
}

/* ==================== COLLIER CITRINE — 5 charms (première passe, à affiner) ==================== */
/* Masque les composants charms 6 et 7 quand Citrine est sélectionné */
.wooco_components:has(.collier-citrine.wooco_item_selected) :is(.sixth-charm, .seventh-charm) { display: none; }
/* Masque les boutons-charms 6 et 7 (le JS le fait aussi) */
.charms-buttons-wrapper.is-collier-citrine .charm-button--sixth,
.charms-buttons-wrapper.is-collier-citrine .charm-button--seventh { display: none; }
/* MOBILE (cadre 50x60rem) */
.is-collier-citrine[data-visible-charms="5"] .charm-button--first  { left: 7.79rem;  top: 12.39rem; transform: rotate(75deg); }
.is-collier-citrine[data-visible-charms="5"] .charm-button--second { left: 11.35rem;  top: 22.08rem;  transform: rotate(48deg); }
.is-collier-citrine[data-visible-charms="5"] .charm-button--third  { left: 20.55rem; top: 28.16rem; transform: rotate(0deg); }
.is-collier-citrine[data-visible-charms="5"] .charm-button--fourth { left: 29.23rem; top: 23.81rem; transform: rotate(-33deg); }
.is-collier-citrine[data-visible-charms="5"] .charm-button--fifth  { left: 34.51rem; top: 14.93rem; transform: rotate(-65deg); }
/* TABLETTE + (cadre 70x80rem) */
@media (min-width: 768px) {
  .is-collier-citrine[data-visible-charms="5"] .charm-button--first  { left: 9.7rem;   top: 16.45rem; transform: rotate(75deg); }
  .is-collier-citrine[data-visible-charms="5"] .charm-button--second { left: 15.9rem; top: 29.4rem;  transform: rotate(48deg); }
  .is-collier-citrine[data-visible-charms="5"] .charm-button--third  { left: 28.8rem; top: 37.55rem; transform: rotate(0deg); }
  .is-collier-citrine[data-visible-charms="5"] .charm-button--fourth { left: 41.35rem;  top: 31.7rem; transform: rotate(-33deg); }
  .is-collier-citrine[data-visible-charms="5"] .charm-button--fifth  { left: 48.75rem; top: 19.85rem; transform: rotate(-65deg); }
}

/* ==================== NOM SOUS L'IMAGE — AUTOMATIQUE pour tout support ajouté ====================
   custom-composer-supports.js pose `data-band-label` (dérivé du titre du produit) sur CHAQUE
   support qui n'a pas déjà une bande d'origine (les 6 supports du thème sont détectés et laissés
   intacts). La bande ci-dessous est calquée sur celle des supports d'origine : ancrée au bas du
   carré (bottom:0) pour ne jamais être rognée par overflow:hidden. Ajouter un nouveau collier ne
   demande donc AUCUN CSS supplémentaire ici. */
.support-component .wooco_component_product_selection_list_item[data-band-label] {
  position: relative;
  overflow: hidden;
}
.support-component .wooco_component_product_selection_list_item[data-band-label]::after {
  content: attr(data-band-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5rem;
  background-color: #ffffff85;
  font: 400 1.2rem/1.2 Manrope, sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .support-component .wooco_component_product_selection_list_item[data-band-label]::after {
    font-size: 1.6rem;
    height: 4rem;
  }
}
@media (min-width: 1200px) {
  .support-component .wooco_component_product_selection_list_item[data-band-label]::after {
    font-size: 1.2rem;
    height: 2.5rem;
  }
}

/* ==================== HALO LUMINEUX SUR L'ICÔNE LUNE DES EMPLACEMENTS (aperçu) ====================
   Chaque emplacement de charm affiche par défaut une icône croissant de lune
   (.charm-button__img-placeholder = charms_lune.png). `drop-shadow` épouse la forme du
   croissant (respecte la transparence du fichier). Desktop : halo au survol de l'emplacement.
   Tactile : douce pulsation en continu sur les emplacements visibles (pas de survol au doigt).
   100% CSS, aucun JS. */
.charm-button__img-placeholder {
  transition: filter 0.4s ease, opacity 0.4s ease;
}
/* Desktop (souris) : l'icône lune s'illumine (0.4 -> 1) + halo bleu clair-de-lune.
   Le halo est BLEUTÉ (pas blanc) pour rester visible sur le fond gris clair de l'aperçu. */
@media (hover: hover) {
  .charm-button:hover .charm-button__img-placeholder,
  .charm-button__img-wrapper:hover .charm-button__img-placeholder {
    opacity: 1;
    filter:
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 14px rgba(140, 175, 235, 0.9));
  }
}
/* Tactile (mobile) : pulsation lumineuse douce, emplacements visibles uniquement */
@media (hover: none) {
  .charm-button:not(.is-hidden):not([hidden]) .charm-button__img-placeholder {
    animation: odyssee-lune-halo 2.8s ease-in-out infinite;
  }
}
@keyframes odyssee-lune-halo {
  0%, 100% {
    opacity: 0.4;
    filter: drop-shadow(0 0 1px rgba(140, 175, 235, 0.4));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 15px rgba(140, 175, 235, 0.8));
  }
}
@media (prefers-reduced-motion: reduce) {
  .charm-button__img-placeholder { animation: none; }
}