{"product_id":"collier-bandana-charms","title":"Collar bandana - Personalizable","description":"\u003cstyle\u003e\n\/* ----- Présentation du concept ----- *\/\n#intro-section {\n  text-align: center;\n  margin-bottom: 25px;\n  padding: 10px 15px;\n  border-top: 1px solid #C8A97E40;\n  border-bottom: 1px solid #C8A97E40;\n}\n\n\/* ----- Titres sections bandana ----- *\/\n.section-title {\n  text-align: left;\n  margin-top: 25px;\n  margin-bottom: 10px;\n  color: #3A2E29;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n\/* ----- Grille bandana et charms ----- *\/\n#bandanas-container, #charms-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));\n  gap: 12px;\n  margin-top: 10px;\n}\n\n.bandana-item, .charm-item {\n  position: relative;\n  border: 1px solid #e5e1de;\n  border-radius: 10px;\n  overflow: hidden;\n  cursor: pointer;\n  background: #faf8f6;\n  transition: all 0.25s ease-in-out;\n}\n.bandana-item:hover, .charm-item:hover {\n  transform: translateY(-4px);\n  border-color: #C8A97E;\n  box-shadow: 0 0 12px #C8A97E44;\n}\n.bandana-item img, .charm-item img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* Tooltip *\/\n.bandana-tooltip, .charm-tooltip {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: #F9F7F6;\n  color: #3A2E29;\n  font-size: 12px;\n  padding: 4px 8px;\n  border: 1px solid #E4DAD2;\n  border-radius: 6px;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.08);\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.25s ease-in-out;\n  z-index: 10;\n}\n.bandana-item:hover .bandana-tooltip,\n.charm-item:hover .charm-tooltip {\n  opacity: 1;\n  transform: translateX(-50%) translateY(-4px);\n}\n\n\/* Sélection visuelle *\/\n.bandana-item.selected, .charm-item.selected {\n  border: 2px solid #C8A97E;\n  box-shadow: 0 0 8px #C8A97E66;\n}\n\n\/* Effet cœur doré *\/\n.heart-effect {\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  color: #C8A97E;\n  font-size: 22px;\n  opacity: 0;\n  animation: popHeart 0.7s ease-out forwards;\n}\n@keyframes popHeart {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }\n  40% { transform: translate(-50%, -60%) scale(1.3); opacity: 1; }\n  100% { transform: translate(-50%, -80%) scale(0.8); opacity: 0; }\n}\n\n\/* ----- Liste charms sélectionnés ----- *\/\n#selection-liste {\n  margin-top: 25px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #3A2E29;\n}\n#selected-charms {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 10px;\n}\n#selected-charms span {\n  background: #f7f3ef;\n  border: 1px solid #e2d8d2;\n  border-radius: 6px;\n  padding: 5px 10px;\n  cursor: pointer;\n  position: relative;\n  transition: all 0.2s ease;\n}\n#selected-charms span:hover {\n  background: #f0eae6;\n}\n#selected-charms span::after {\n  content: \" ✕\";\n  color: #c8a97e;\n  font-weight: bold;\n}\n\n\/* ----- Encadré ordre des charms ----- *\/\n#ordre-charms-box {\n  margin-top: 25px;\n  padding: 15px;\n  border: 1px solid #e2d8d2;\n  border-radius: 8px;\n  background-color: #FAF8F6;\n}\n#ordre-charms-box label {\n  font-weight: 600;\n  font-size: 14px;\n  color: #3A2E29;\n  display: block;\n  margin-bottom: 8px;\n}\n#ordre-charms-text {\n  width: 100%;\n  min-height: 45px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  padding: 6px 10px;\n  font-size: 13px;\n  resize: vertical;\n  color: #3A2E29;\n  background: #fff;\n}\n#ordre-random {\n  margin-top: 10px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: #3A2E29;\n}\n\n\/* ----- Phrase émotionnelle ----- *\/\n#emotion {\n  margin-top: 30px;\n  text-align: center;\n  font-size: 15px;\n  color: #3A2E29;\n  opacity: 0.85;\n  font-style: italic;\n}\n\n\/* ----- Aperçu agrandi ----- *\/\n#preview-box {\n  position: fixed;\n  top: 20%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #ddd;\n  border-radius: 12px;\n  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);\n  padding: 10px;\n  text-align: center;\n  z-index: 9999;\n  display: none;\n  width: 150px;\n}\n#preview-box img {\n  width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n#preview-box p {\n  margin-top: 6px;\n  font-size: 13px;\n  color: #3A2E29;\n  font-weight: 500;\n}\n\u003c\/style\u003e\n\n\u003c!-- HTML --\u003e\n\u003cdiv id=\"intro-section\"\u003e\n\n\u003ch3\u003e Crea tu propio diseño\u003c\/h3\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003ch4 class=\"section-title\"\u003e Elige tu pañuelo:\u003c\/h4\u003e\n\n\u003cdiv id=\"bandanas-container\"\u003e\u003c\/div\u003e\n\n\n\u003ch4 class=\"section-title\"\u003e Elige tus charms:\u003c\/h4\u003e\n\n\u003cdiv id=\"charms-container\"\u003e\u003c\/div\u003e\n\n\n\u003cdiv id=\"selection-liste\"\u003e\n\n\u003cstrong\u003eCharms seleccionados:\u003c\/strong\u003e \n\u003cdiv id=\"selected-charms\"\u003e\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003cdiv id=\"ordre-charms-box\"\u003e\n\n \u003clabel for=\"ordre-charms-text\"\u003eOrden de los charms (de izquierda a derecha mirando la joya):\u003c\/label\u003e \n\u003ctextarea id=\"ordre-charms-text\" placeholder=\"Exemple : Cœur, Soleil, Étoile...\"\u003e\u003c\/textarea\u003e\n\u003cdiv id=\"ordre-random\"\u003e\n\n\u003cinput type=\"checkbox\" id=\"ordre-auto\"\u003e\n\u003clabel for=\"ordre-auto\"\u003eTe confío el pedido de los dijes.\u003c\/label\u003e\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003cdiv id=\"emotion\"\u003e\n\n Cada charm cuenta una historia; elige el tuyo. ✨ \n\n\u003c\/div\u003e\n\n\n\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', function () {\n\n  \/* ----- BANDANAS DORÉS ----- *\/\n  const bandanasData = [\n    [\"Bandana blanc\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_blanc.png?v=1762657471\"],\n    [\"Bandana orange\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_orange.png?v=1762657470\"],\n    [\"Bandana rouge vif\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_rouge_vif.png?v=1762657470\"],\n    [\"Bandana rouge Bordeaux\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_rouge_Bordeaux.png?v=1762657470\"],\n    [\"Bandana fuschia\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_fuschia.png?v=1762657471\"],\n    [\"Bandana bleu violacé\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_bleu_violace.png?v=1762657471\"],\n    [\"Bandana vert foncé\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_vert_fonce.png?v=1762657684\"],\n    [\"Bandana kaki\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_kaki.png?v=1762657683\"],\n    [\"Bandana marron café\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_marron_cafe.png?v=1762657471\"],\n    [\"Bandana gris\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_gris.png?v=1762657684\"],\n    [\"Bandana noir\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Mini_Bandana_noir.png?v=1762657471\"]\n  ];\n\n  const bandanasContainer = document.getElementById('bandanas-container');\n  let selectedBandana = null;\n\n  bandanasData.forEach(([name, url]) =\u003e {\n    const div = document.createElement('div');\n    div.className = 'bandana-item';\n    div.dataset.name = name;\n    div.innerHTML = `\u003cimg src=\"${url}\" alt=\"${name}\"\u003e\u003cspan class=\"bandana-tooltip\"\u003e${name}\u003c\/span\u003e`;\n    bandanasContainer.appendChild(div);\n\n    div.addEventListener('click', () =\u003e {\n      const heart = document.createElement('div');\n      heart.className = 'heart-effect';\n      heart.innerHTML = '❤';\n      div.appendChild(heart);\n      setTimeout(() =\u003e heart.remove(), 700);\n\n      document.querySelectorAll('.bandana-item').forEach(i =\u003e i.classList.remove('selected'));\n      div.classList.add('selected');\n      selectedBandana = name;\n    });\n  });\n\n  \/* ----- CHARMS DORÉS ----- *\/\n  const charmsData = [\n     [\"Étoile de mer blanche 18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_de_mer_blanche_18mm.png?v=1762051707\"],\n[\"Conque\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Conque.png?v=1762051701\"],\n  [\"Coquillage 20x13mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coquillage_20x13mm.png?v=1762051707\"],\n  [\"Cœur blanc nacré doré 20x20mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_blanc_nacre_dore_20x20mm.png?v=1762051711\"],\n [\"Trèfle 17.5mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Trefle_17.5mm.png?v=1762051700\"],\n  [\"Goutte légère 9x17mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Goutte_legere_17x9mm.png?v=1762051690\"],\n [\"Opal imitation 4x11mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Opal_imitation_4x11mm.png?v=1762543157\"],\n [\"Perles blanches 17.7mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Perles_blanches_17.7mm.png?v=1762543157\"],\n\n  \/\/ Beige \/ Doré \/ Jaune \/ orange\n[\"Médaille blanche et fleur 20x14mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_blanche_et_fleur_20x14mm.png?v=1762051719\"],\n  [\"Grande fleur shell blanc 35.5x30mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Grande_fleur_shell_blanc_35.5x30mm.png?v=1762051720\"],\n  [\"Étoile blanche 14x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_blanche_14x16mm.png?v=1762051714\"],\n  [\"Médaille étoile blanche 12.5x2.6mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_etoile_blanche_12.5x2.6mm.png?v=1762051710\"],\n  [\"Coquillage doré 18.5x10.2mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coquillage_18.5x10mm.png?v=1762051715\"],\n  [\"Coquillage spirale doré 20x14mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coquillage_spirale_20x14mm.png?v=1762051713\"],\n  [\"Grande étoile de mer dorée 19x23mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Grande_etoile_de_mer_doree_19x23mm.png?v=1762051707\"],\n [\"Coeur et oeil sacré 15x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_et_oeil_sacre_15x16mm.png?v=1762051720\"],\n [\"Moyen soleil 6x18mm \", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Moyen_soleil_6x18mm.png?v=1762543158\"],\n [\"Petit coeur doré 11x11mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petit_coeur_dore_11x11mm.png?v=1762543157\"],\n [\"Poisson d’or 9x20mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Poisson_d_or_9x20mm.png?v=1762543157\"],\n  [\"Tortue 13x19mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Tortue_13x19mm.png?v=1762051719\"],\n    [\"Petit coquillage 10x12\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petit_coquillage_10x12mm.png?v=1762051717\"],\n    [\"Médaille oeil doré 16x19mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_oeil_dore_16x19mm.png?v=1762051716\"],\n    [\"Petit éléphant 13x10mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petit_elephant_13X10mm.png?v=1762051707\"],\n  [\"Soleil doré 18x21mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Soleil_dore_18x21mm.png?v=1762051717\"],\n  [\"Grand soleil 30x33mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Grand_soleil_30x33mm.png?v=1762051720\"],\n  [\"Plaque œil mystique dorée 23x11mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Plaque_oeil_mystique_doree_23x11m.png?v=1762051719\"],\n  [\"Cœur sacré doré 27.6x15.3mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_sacre_dore_27.6x15.3mm.png?v=1762051716\"],\n  [\"Cœur tournesol doré 18x21mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_tournesol_dore_18x21mm.png?v=1762051717\"],\n  [\"Pièce « AMOUR » 27x23mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Piece__AMOUR__27x23mm.png?v=1762051719\"],\n  [\"Plaque « AMOUR » 17x5mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Plaque__AMOUR__17x5mm.png?v=1762051702\"],\n  [\"Cœur ensoleillé 22.3mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_ensoleille_22.3mm.png?v=1762051697\"],\n  [\"Soleil avec visage 24x30mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Soleil_avec_visage_24x30mm.png?v=1762051716\"],\n[\"Étoile de mer jaune 18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_de_mer_jaune_18mm.png?v=1762051718\"],\n[\"Coeur d’émail orange 9x9mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_d_email_orange_9x9mm.png?v=1762543157\"],\n  [\"Étoile de mer orange 18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_de_mer_orange_18mm.png?v=1762051716\"],\n\n  \/\/ Rouge\n  [\"Petit éclair rouge 10x5mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petit_eclair_rouge_10x5mm.png?v=1762051697\"],\n  [\"Petit cœur rouge 8x9mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petit_coeur_rouge_8x9mm.png?v=1762051701\"],\n[\"Coeur d’émail rouge 9x9mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_d_email_rouge_9x9mm.png?v=1762543158\"],\n\n  \/\/ Rose\n  [\"Pendentif quartz rose\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Pendentif_quartz_rose.png?v=1762051720\"],\n  [\"Médaille rose 21x30mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_rose_21x30mm.png?v=1762051719\"],\n  [\"Médaille éclair rose 13x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_eclair_rose_13x16mm.png?v=1762051716\"],\n  [\"Étoile rose 14x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_rose_14x16mm.png?v=1762051706\"],\n  [\"Petite étoile de mer rose 10x10mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petite_etoile_de_mer_rose_10x10mm.png?v=1762051703\"],\n[\"Petit éclair rose\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petit_eclair_rose_10x5mm.png?v=1762051703\"],\n  [\"Étoile de mer rose 18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_de_mer_rose_18mm.png?v=1762051716\"],\n  [\"Grande fleur rose 23x25mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Grande_fleur_rose_23x25mm.png?v=1762051721\"],\n[\"Pierres roses 4.3x20mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Pierres_roses_4.3x20mm.png?v=1762543157\"],\n\n  \/\/ Violet\n  [\"Étoile mauve 14x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_mauve_14x16mm.png?v=1762051712\"],\n  [\"Étoile de mer mauve 18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_de_mer_mauve_18mm.png?v=1762051716\"],\n  [\"Tortue mauve 22x18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Tortue_mauve_22x18mm.png?v=1762051719\"],\n[\"Améthyste imitation 4x11mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Amethyste_imitation_4x11mm.png?v=1762543157\"],\n [\"Perles violettes 4.3x20mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Perles_violettes_4.3x20mm.png?v=1762543157\"],\n\n  \/\/ Bleu\n  [\"Étoile bleue 14x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_bleue_14x16mm.png?v=1762051719\"],\n  [\"Étoile de mer bleue 17mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_etoile_de_mer_bleue_17mm.png?v=1762051720\"],\n  [\"Étoile de mer bleu clair 18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_de_mer_bleu_clair_18mm.png?v=1762051714\"],\n  [\"Étoile de mer bleu saphir 18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_de_mer_bleu_saphir_18mm.png?v=1762051716\"],\n  [\"Médaille lune bleue 13x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_lune_bleue_13x16mm.png?v=1762051719\"],\n  [\"Tortue bleue 23x18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Tortue_bleue_23x18mm.png?v=1762051720\"],\n[\"Coeur d’émail bleu foncé 9x9mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_d_email_bleu_fonce_9x9mm.png?v=1762543158\"],\n [\"Perles bleu foncé 4.3x20mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Perles_bleu_fonce_4.3x20mm.png?v=1762543158\"],\n\n  \/\/ Marron\n  [\"Petite médaille œil de tigre\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Petite_medaille_oeil_de_tigre.png?v=1762051718\"],\n  [\"Cœur Kintsugi 22x18mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_Kintsugi_22x18mm.png?v=1762051715\"],\n[\"Perles marron 4.3x20mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Perles_marron_4.3x20mm.png?v=1762543157\"],\n\n  \/\/ Noir\n  [\"Médaille fleur noire 20x12mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_fleur_noir_20x12mm.png?v=1762051716\"],\n  [\"Médaille cœur noire 15mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Medaille_coeur_noire_15mm.png?v=1762051706\"],\n  [\"Cœur noir et œil 13x14mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_noir_et_oeil_13x14mm.png?v=1762051717\"],\n  [\"Cœur fond noir 21x21.5mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_fond_noir_21x21.5mm.png?v=1762051721\"],\n  [\"Étoile noire 14x16mm\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Etoile_noire_14x16mm.png?v=1762051712\"],\n  [\"Cœur léopard\", \"https:\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/Coeur_leopard.png?v=1762051719\"]\n  ];\n\n  const charmsContainer = document.getElementById('charms-container');\n  const listContainer = document.getElementById('selected-charms');\n\n  charmsData.forEach(([name, url]) =\u003e {\n    const div = document.createElement('div');\n    div.className = 'charm-item';\n    div.dataset.name = name;\n    div.innerHTML = `\u003cimg src=\"${url}\" alt=\"${name}\"\u003e\u003cspan class=\"charm-tooltip\"\u003e${name}\u003c\/span\u003e`;\n    charmsContainer.appendChild(div);\n\n    div.addEventListener('click', () =\u003e {\n      const heart = document.createElement('div');\n      heart.className = 'heart-effect';\n      heart.innerHTML = '❤';\n      div.appendChild(heart);\n      setTimeout(() =\u003e heart.remove(), 700);\n\n      const existing = [...listContainer.querySelectorAll('span')].find(s =\u003e s.dataset.name === name);\n      if (existing) {\n        existing.remove();\n        div.classList.remove('selected');\n      } else {\n        div.classList.add('selected');\n        const span = document.createElement('span');\n        span.textContent = name;\n        span.dataset.name = name;\n        span.addEventListener('click', () =\u003e {\n          span.remove();\n          div.classList.remove('selected');\n        });\n        listContainer.appendChild(span);\n      }\n    });\n  });\n\n  \/* ----- AJOUT AU PANIER ----- *\/\n  function attachAddToCartInterceptor() {\n    const addBtn = document.querySelector('form[action*=\"\/cart\/add\"] [type=\"submit\"]');\n    if (!addBtn) return;\n    addBtn.addEventListener('click', function (e) {\n      e.preventDefault();\n      const form = addBtn.closest('form');\n      if (!form) return;\n\n      form.querySelectorAll('input[name^=\"properties[\"]').forEach(n =\u003e n.remove());\n\n      if (selectedBandana) {\n        const inputBandana = document.createElement('input');\n        inputBandana.type = 'hidden';\n        inputBandana.name = 'properties[Bandana choisi]';\n        inputBandana.value = selectedBandana;\n        form.appendChild(inputBandana);\n      }\n\n      const selections = [...listContainer.querySelectorAll('span')].map(s =\u003e s.dataset.name);\n      if (selections.length \u003e 0) {\n        const inputCharms = document.createElement('input');\n        inputCharms.type = 'hidden';\n        inputCharms.name = 'properties[Charms choisis]';\n        inputCharms.value = selections.join(', ');\n        form.appendChild(inputCharms);\n      }\n\n      const ordreTexte = document.getElementById('ordre-charms-text').value.trim();\n      const ordreAuto = document.getElementById('ordre-auto').checked;\n      const ordreValue = ordreAuto ? \"Ordre libre (Maison Soleyah)\" : (ordreTexte || \"Non précisé.\");\n      const ordreInput = document.createElement('input');\n      ordreInput.type = 'hidden';\n      ordreInput.name = 'properties[Ordre des charms]';\n      ordreInput.value = ordreValue;\n      form.appendChild(ordreInput);\n\n      form.submit();\n    });\n  }\n  setTimeout(attachAddToCartInterceptor, 300);\n\n  \/* ----- Aperçu agrandi ----- *\/\n  const previewBox = document.createElement('div');\n  previewBox.id = 'preview-box';\n  document.body.appendChild(previewBox);\n\n  function showPreview(name, url) {\n    previewBox.innerHTML = `\u003cimg src=\"${url}\" alt=\"${name}\"\u003e\u003cp\u003e${name}\u003c\/p\u003e`;\n    previewBox.style.display = 'block';\n  }\n  function hidePreview() {\n    previewBox.style.display = 'none';\n  }\n\n  document.addEventListener('mouseover', e =\u003e {\n    const item = e.target.closest('.bandana-item, .charm-item');\n    if (item) {\n      const name = item.dataset.name;\n      const img = item.querySelector('img');\n      showPreview(name, img.src);\n    }\n  });\n  document.addEventListener('mouseout', e =\u003e {\n    if (e.target.closest('.bandana-item, .charm-item')) hidePreview();\n  });\n});\n\u003c\/script\u003e","brand":"Maison Soleyah","offers":[{"title":"1","offer_id":45132333711417,"sku":null,"price":28.0,"currency_code":"CAD","in_stock":true},{"title":"3","offer_id":45132333744185,"sku":null,"price":38.0,"currency_code":"CAD","in_stock":true},{"title":"5","offer_id":45132333776953,"sku":null,"price":45.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0747\/2014\/9561\/files\/IMG_6397.jpg?v=1780427499","url":"https:\/\/maisonsoleyah.com\/es\/products\/collier-bandana-charms","provider":"Maison Soleyah","version":"1.0","type":"link"}