[{"_1":2,"_183":-5,"_184":-5},"loaderData",{"_3":4,"_95":96},"root",{"_5":6,"_36":37,"_68":69},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isBusinessOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","9482d6a85defc047e7d1f1641eacf38e5d402415","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","API_URL","https://api.val.town","clerkState",{"_70":71},"__internal_clerk_state",{"_72":73,"_74":47,"_75":76,"_77":76,"_78":20,"_79":76,"_80":76,"_81":76,"_82":76,"_83":84,"_93":20,"_94":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_85":20,"_19":20,"_86":76,"_87":88,"_89":76,"_90":47,"_91":20,"_92":76},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_97":98,"_99":100,"_101":102,"_103":104,"_157":158,"_180":181,"_182":-5},"handle","ncf","name","blast","path","ARCHIVES/backup2703.ts","project",{"_105":106,"_99":100,"_107":108,"_109":-5,"_110":20,"_111":112,"_113":-5,"_114":-5,"_12":115,"_116":-5,"_117":20,"_118":-5,"_119":-5,"_120":33,"_14":121,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":135,"_138":139,"_143":144,"_156":20},"id","defa3682-05cf-11f1-9b96-42dde27851f2","createdAt",["D",1770652578242],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","51e0f890-4215-11f0-8fa4-2945475a7e7e","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","9d7676f2-7a4d-4e3f-975a-15aca5bcc997","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_97":98,"_136":137},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ5NWtrVUd1NlAwbmxWS2NMVFB4N0Ezb0drSyJ9","org",{"_97":98,"_140":137,"_12":115,"_141":142},"avatar","tier","free","branch",{"_145":146,"_99":45,"_105":147,"_148":106,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":100,"_155":98},"version",522,"defac886-05cf-11f1-9b96-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_105":159,"_99":160,"_161":162,"_163":164,"_165":147,"_166":167,"_168":169,"_107":170,"_145":171,"_172":173,"_174":175,"_176":20,"_177":-5,"_101":178},"92b36c5c-2c45-11f1-9eed-42dde27851f2","backup2703.ts","fileId","dcf9c4be-29e3-11f1-ac38-42dde27851f2","parentId","784ea9f8-2c45-11f1-a013-42dde27851f2","branchId","branchVersion",498,"latest",true,["D",1774881275051],3,"fileType","script","content","/* =========================\n 📆 UPDATE 27-03-2026_14:49\n ========================= */\n\n/* =========================\n ✅ GESTION TYPEFORM (laisser en haut)\n ========================= */\n\n(function () {\n /* =========================\n CONFIG\n ========================= */\n\n const CONFIG = {\n triggerSelector: '[OpenTf=\"trigger\"]',\n iframeSelector: \".tf-v1-iframe-wrapper iframe\",\n iframeDelayMs: 400, // délai pour laisser Typeform injecter l’iframe\n };\n\n /* =========================\n HELPERS\n ========================= */\n\n function getEmailFromElement(element) {\n const mailInput =\n element.querySelector('input[type=\"email\"]')?.value?.replace(\n /\\+/g,\n \"%2B\",\n ) || \"\";\n if (mailInput) console.log(mailInput);\n return mailInput;\n }\n\n function updateIframeParams(params) {\n const iframe = document.querySelector(CONFIG.iframeSelector);\n if (!iframe) return;\n\n let currentSrc = iframe.getAttribute(\"src\");\n let newSrc = currentSrc;\n\n if (params.email) {\n const sep = currentSrc.includes(\"?\") ? \"&\" : \"?\";\n newSrc = `${currentSrc}${sep}email=${params.email}`;\n }\n\n iframe.setAttribute(\"src\", newSrc);\n console.log(\"Updated iframe src:\", iframe.src);\n }\n\n function openTf({ email = \"\" } = {}) {\n const trigger = document.querySelector(CONFIG.triggerSelector);\n if (!trigger) {\n console.warn(\"Typeform trigger not found\");\n return;\n }\n\n // 1 — ouvrir popup\n trigger.click();\n\n // 2 — injecter email après création iframe\n if (email) {\n setTimeout(() => {\n updateIframeParams({ email });\n }, CONFIG.iframeDelayMs);\n }\n }\n\n /* =========================\n LISTENERS\n ========================= */\n\n // submit formulaire → récupère email\n document.querySelectorAll('[OpenTf=\"form\"]').forEach((form) => {\n form.addEventListener(\"submit\", function (event) {\n event.preventDefault();\n const email = getEmailFromElement(form);\n openTf({ email });\n });\n });\n\n // clic simple → ouvre juste\n document.querySelectorAll('[OpenTf=\"btn\"]').forEach((el) => {\n el.addEventListener(\"click\", function (event) {\n event.preventDefault();\n openTf();\n });\n });\n})();\n\n/* =========================\n ✅ NAVBAR\n ========================= */\n\n// Animation BG navbar\n// Vérifie si la largeur de la fenêtre est inférieure à 769px (tablette et mobile)\nif (window.innerWidth < 769) {\n document.addEventListener(\"DOMContentLoaded\", function () {\n const menuButton = document.querySelector(\"#menuButton\");\n const navbarMenus = document.querySelectorAll(\".navbar5_menu\");\n const mainWrapper = document.querySelector(\".main-wrapper\");\n const backgroundNavbar = document.querySelector(\".background-navbar\");\n\n function updateBackgroundNavbarStyles() {\n // Vérifie si au moins un .navbar5_menu est en display flex\n const atLeastOneMenuOpen = Array.from(navbarMenus).some((menu) => {\n return window.getComputedStyle(menu).display === \"flex\";\n });\n\n if (atLeastOneMenuOpen) {\n // Quand au moins un menu est ouvert\n backgroundNavbar.style.position = \"absolute\";\n backgroundNavbar.style.top = \"0\";\n backgroundNavbar.style.left = \"0\";\n backgroundNavbar.style.width = \"100vw\";\n backgroundNavbar.style.height = \"100vh\";\n backgroundNavbar.style.transform = \"translateY(0)\";\n backgroundNavbar.style.display = \"block\";\n\n // Appliquer le filtre blur de 4px\n mainWrapper.style.filter = \"blur(4px)\";\n mainWrapper.style.transition =\n \"filter 0.5s cubic-bezier(.165, .84, .44, 1)\";\n\n // Bloquer le scroll\n document.body.style.overflow = \"hidden\";\n } else {\n // Quand tous les menus sont fermés\n backgroundNavbar.style.display = \"none\";\n backgroundNavbar.style.transform = \"translateY(-100%)\";\n\n // Remettre le filtre blur à 0px\n mainWrapper.style.filter = \"blur(0px)\";\n\n // Force tous les .navbar5_menu en display none\n navbarMenus.forEach((menu) => {\n menu.style.display = \"none\";\n });\n\n // Réactiver le scroll\n document.body.style.overflow = \"\";\n }\n }\n\n // Appel initial de la fonction pour mettre à jour les styles\n updateBackgroundNavbarStyles();\n\n // Écouteur d'événement au clic sur #menuButton\n if (menuButton) {\n menuButton.addEventListener(\"click\", () => {\n // Petit délai pour laisser le temps au menu de s'ouvrir/fermer\n setTimeout(updateBackgroundNavbarStyles, 50);\n });\n }\n\n // Observer les changements de style sur chaque .navbar5_menu\n navbarMenus.forEach((menu) => {\n const observer = new MutationObserver(updateBackgroundNavbarStyles);\n observer.observe(menu, {\n attributes: true,\n attributeFilter: [\"style\", \"class\"],\n });\n });\n });\n}\n\n/* =========================\n ✅ GSAP ANIM GLOBAL\n ========================= */\n\ngsap.registerPlugin(ScrollTrigger);\n\nfunction animateElements() {\n ScrollTrigger.getAll().forEach((trigger) => trigger.kill());\n\n // Masquer tous les finals dès le départ\n document.querySelectorAll('[display=\"final\"]').forEach((final) => {\n gsap.set(final, { display: \"none\", opacity: 0 });\n });\n\n gsap.utils.toArray('[data-animate=\"fade-up\"]').forEach((element) => {\n const delay = parseFloat(element.dataset.delay) || 0;\n const startY = element.dataset.startY;\n const startX = element.dataset.startX;\n const endY = element.dataset.endY;\n const endX = element.dataset.endX;\n const startRotate = element.dataset.startRotate || 0;\n const endRotate = element.dataset.endRotate || 0;\n\n const skeletons = element.querySelectorAll('[display=\"skeleton\"]');\n const finals = element.querySelectorAll('[display=\"final\"]');\n\n gsap.fromTo(element, {\n opacity: 0,\n y: startY,\n x: startX,\n rotate: startRotate,\n }, {\n opacity: 1,\n y: endY,\n x: endX,\n rotate: endRotate,\n duration: 1,\n delay: delay,\n ease: \"power3.out\",\n scrollTrigger: {\n trigger: element,\n start: \"top 95%\",\n toggleActions: \"play none none none\",\n once: true,\n onEnter: () => {\n if (!skeletons.length || !finals.length) return;\n\n const skeletonDuration = 500;\n\n setTimeout(() => {\n skeletons.forEach((skeleton, i) => {\n const final = finals[i];\n if (!final) return;\n\n const tl = gsap.timeline();\n\n tl.to(skeleton, {\n opacity: 0,\n duration: 0.3,\n ease: \"power2.in\",\n onComplete: () => gsap.set(skeleton, { display: \"none\" }),\n });\n\n tl.set(final, { display: \"block\" });\n\n tl.to(final, {\n opacity: 1,\n duration: 0.4,\n ease: \"power2.out\",\n });\n });\n }, (delay * 1) + skeletonDuration);\n },\n },\n });\n });\n}\n\n// ============================================\n// INIT\n// ============================================\n\nanimateElements();\n\ndocument.querySelectorAll('[gsap-trigger=\"click\"]').forEach((trigger) => {\n trigger.addEventListener(\"click\", function () {\n setTimeout(() => {\n animateElements();\n }, 300);\n });\n});\n\n/* =========================\n ✅ BENTO TO TABS TABLET/MOBILE\n ========================= */\n\nconst mediaQuery = window.matchMedia(\"(max-width: 991px)\");\n\nfunction initCardBlurTabs() {\n if (!mediaQuery.matches) {\n document.querySelectorAll('[card-blur-tabs=\"list\"]').forEach((list) => {\n list.style.height = \"\";\n list.style.overflow = \"\";\n list.style.display = \"\";\n });\n return;\n }\n\n document.querySelectorAll('[card-blur-tabs=\"list\"]').forEach((list) => {\n const isFirst = list.getAttribute(\"card-blur-tabs-load\") === \"first\";\n\n if (isFirst) {\n list.style.setProperty(\"height\", \"auto\", \"important\");\n list.style.setProperty(\"overflow\", \"visible\", \"important\");\n list.style.setProperty(\"display\", \"flex\", \"important\");\n } else {\n list.style.setProperty(\"height\", \"0px\", \"important\");\n list.style.setProperty(\"overflow\", \"hidden\", \"important\");\n list.style.setProperty(\"display\", \"none\", \"important\");\n }\n });\n\n setTimeout(updateDropdownStyles, 100);\n}\n\nfunction updateDropdownStyles() {\n if (!mediaQuery.matches) {\n document.querySelectorAll('[card-blur-tabs=\"dropdown\"]').forEach(\n (dropdown) => {\n const dropdownChild = dropdown.children[0];\n if (dropdownChild) dropdownChild.style.transform = \"\";\n dropdown.style.color = \"\";\n dropdown.style.backgroundImage = \"\";\n },\n );\n\n document.querySelectorAll('[card-blur-tabs=\"dropdown-dark\"]').forEach(\n (dropdown) => {\n const dropdownChild = dropdown.children[0];\n if (dropdownChild) dropdownChild.style.transform = \"\";\n dropdown.style.backgroundColor = \"\";\n dropdown.style.color = \"\";\n dropdown.style.border = \"\";\n },\n );\n return;\n }\n\n document.querySelectorAll('[card-blur-tabs=\"toggle\"]').forEach((toggle) => {\n const dropdown = toggle.querySelector('[card-blur-tabs=\"dropdown\"]');\n const dropdownDark = toggle.querySelector(\n '[card-blur-tabs=\"dropdown-dark\"]',\n );\n\n const siblingLists = Array.from(\n toggle.parentElement.querySelectorAll('[card-blur-tabs=\"list\"]'),\n );\n\n const isAnyListOpen = siblingLists.some((list) => {\n const style = window.getComputedStyle(list);\n return style.height !== \"0px\" && style.display !== \"none\";\n });\n\n // Gestion dropdown-close couleur\n toggle.querySelectorAll(\"[dropdown-close]\").forEach((el) => {\n const closeColor = el.getAttribute(\"dropdown-close\");\n if (!closeColor) return;\n el.style.setProperty(\"transition\", \"color 0.3s ease\", \"important\");\n if (isAnyListOpen) {\n el.style.setProperty(\"color\", \"white\", \"important\");\n } else {\n el.style.setProperty(\"color\", closeColor, \"important\");\n }\n });\n\n // Gestion dropdown normal\n if (dropdown) {\n const dropdownChild = dropdown.children[0];\n if (isAnyListOpen) {\n if (dropdownChild) {\n dropdownChild.style.setProperty(\n \"transition\",\n \"transform 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdownChild.style.setProperty(\n \"transform\",\n \"rotate(0deg)\",\n \"important\",\n );\n });\n }\n dropdown.style.setProperty(\n \"transition\",\n \"color 0.3s ease, background-image 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdown.style.setProperty(\"color\", \"white\", \"important\");\n dropdown.style.setProperty(\"background-image\", \"none\", \"important\");\n });\n } else {\n if (dropdownChild) {\n dropdownChild.style.setProperty(\n \"transition\",\n \"transform 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdownChild.style.setProperty(\n \"transform\",\n \"rotate(180deg)\",\n \"important\",\n );\n });\n }\n dropdown.style.setProperty(\n \"transition\",\n \"color 0.3s ease, background-image 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdown.style.setProperty(\"color\", \"\", \"important\");\n dropdown.style.setProperty(\"background-image\", \"\", \"important\");\n });\n }\n }\n\n // Gestion dropdown-dark\n if (dropdownDark) {\n const dropdownDarkChild = dropdownDark.children[0];\n if (isAnyListOpen) {\n if (dropdownDarkChild) {\n dropdownDarkChild.style.setProperty(\n \"transition\",\n \"transform 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdownDarkChild.style.setProperty(\n \"transform\",\n \"rotate(0deg)\",\n \"important\",\n );\n });\n }\n dropdownDark.style.setProperty(\n \"transition\",\n \"background-color 0.3s ease, color 0.3s ease, border 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdownDark.style.setProperty(\n \"background-color\",\n \"#00094A\",\n \"important\",\n );\n dropdownDark.style.setProperty(\"color\", \"white\", \"important\");\n dropdownDark.style.setProperty(\"border\", \"none\", \"important\");\n });\n } else {\n if (dropdownDarkChild) {\n dropdownDarkChild.style.setProperty(\n \"transition\",\n \"transform 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdownDarkChild.style.setProperty(\n \"transform\",\n \"rotate(180deg)\",\n \"important\",\n );\n });\n }\n dropdownDark.style.setProperty(\n \"transition\",\n \"background-color 0.3s ease, color 0.3s ease, border 0.3s ease\",\n \"important\",\n );\n requestAnimationFrame(() => {\n dropdownDark.style.setProperty(\"background-color\", \"\", \"important\");\n dropdownDark.style.setProperty(\"color\", \"\", \"important\");\n dropdownDark.style.setProperty(\"border\", \"\", \"important\");\n });\n }\n }\n });\n}\n\nfunction handleCardBlurTabsClick() {\n document.querySelectorAll('[card-blur-tabs=\"toggle\"]').forEach((button) => {\n button.addEventListener(\"click\", () => {\n if (!mediaQuery.matches) return;\n\n const siblingLists = Array.from(\n button.parentElement.querySelectorAll('[card-blur-tabs=\"list\"]'),\n );\n\n const isOpen = siblingLists.some((list) => {\n const style = window.getComputedStyle(list);\n return style.height !== \"0px\" && style.display !== \"none\";\n });\n\n // Changer les couleurs dropdown-close immédiatement au clic\n button.querySelectorAll(\"[dropdown-close]\").forEach((el) => {\n const closeColor = el.getAttribute(\"dropdown-close\");\n if (!closeColor) return;\n el.style.setProperty(\"transition\", \"color 0.3s ease\", \"important\");\n if (isOpen) {\n // On ferme → retour à closeColor\n el.style.setProperty(\"color\", closeColor, \"important\");\n } else {\n // On ouvre → blanc\n el.style.setProperty(\"color\", \"white\", \"important\");\n }\n });\n\n document.querySelectorAll('[card-blur-tabs=\"list\"]').forEach((list) => {\n list.style.setProperty(\"height\", \"0px\", \"important\");\n list.style.setProperty(\"overflow\", \"hidden\", \"important\");\n list.style.setProperty(\"display\", \"none\", \"important\");\n });\n\n if (!isOpen) {\n siblingLists.forEach((list) => {\n list.style.setProperty(\"height\", \"auto\", \"important\");\n list.style.setProperty(\"overflow\", \"visible\", \"important\");\n list.style.setProperty(\"display\", \"flex\", \"important\");\n });\n }\n\n setTimeout(updateDropdownStyles, 100);\n });\n });\n}\n\nmediaQuery.addEventListener(\"change\", () => {\n initCardBlurTabs();\n updateDropdownStyles();\n});\n\nif (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", () => {\n initCardBlurTabs();\n handleCardBlurTabsClick();\n });\n} else {\n initCardBlurTabs();\n handleCardBlurTabsClick();\n}\n\n/* =========================\n ✅ IM MARQUEE INVESTIR : GESTION HIGHLIGHT\n ========================= */\nfunction startRandomHighlight() {\n const viewport = document.querySelector(\"[data-marquee-viewport]\");\n\n if (!viewport) {\n return;\n }\n\n let currentHighlightedItem = null;\n let currentLineIndex = 0;\n let rotationInterval = null;\n\n function getLines() {\n const lines = viewport.querySelectorAll(\"[data-line]\");\n return Array.from(lines);\n }\n\n function getVisibleItemsInLine(line) {\n const viewportRect = viewport.getBoundingClientRect();\n const items = line.querySelectorAll(\"[data-highlight-target]\");\n const visibleItems = [];\n\n const margin = 50;\n const visibleLeft = viewportRect.left + margin;\n const visibleRight = viewportRect.right - margin;\n\n items.forEach((item) => {\n const itemRect = item.getBoundingClientRect();\n const itemCenter = itemRect.left + itemRect.width / 2;\n const isVisible = itemCenter > visibleLeft && itemCenter < visibleRight;\n\n if (isVisible) {\n visibleItems.push({\n element: item,\n center: itemCenter,\n text: item.textContent.trim(),\n });\n }\n });\n\n return visibleItems;\n }\n\n function isItemStillVisible(item) {\n if (!item) return false;\n\n const viewportRect = viewport.getBoundingClientRect();\n const itemRect = item.element.getBoundingClientRect();\n const itemCenter = itemRect.left + itemRect.width / 2;\n\n const margin = 50;\n const visibleLeft = viewportRect.left + margin;\n const visibleRight = viewportRect.right - margin;\n\n return itemCenter > visibleLeft && itemCenter < visibleRight;\n }\n\n function removeHighlight() {\n if (currentHighlightedItem) {\n currentHighlightedItem.element.classList.remove(\"is-highlighted\");\n\n // Retirer la classe couleur du label\n const labelElement = currentHighlightedItem.element.querySelector(\n \".label-industrie\",\n );\n if (labelElement) {\n labelElement.classList.remove(\"text-color-custom\");\n }\n\n // Remettre l'opacité à 0 pour .gradient-industrie\n const gradientElement = currentHighlightedItem.element.querySelector(\n \".gradient-industrie\",\n );\n if (gradientElement) {\n gradientElement.style.opacity = \"0\";\n }\n\n currentHighlightedItem = null;\n }\n }\n\n function applyRandomHighlightOnCurrentLine() {\n const lines = getLines();\n const currentLine = lines[currentLineIndex];\n\n if (!currentLine) return false;\n\n const visibleItems = getVisibleItemsInLine(currentLine);\n\n if (visibleItems.length === 0) {\n return false;\n }\n\n const randomIndex = Math.floor(Math.random() * visibleItems.length);\n const selectedItem = visibleItems[randomIndex];\n\n currentHighlightedItem = selectedItem;\n selectedItem.element.classList.add(\"is-highlighted\");\n\n // Ajouter la classe couleur au label\n const labelElement = selectedItem.element.querySelector(\".label-industrie\");\n if (labelElement) {\n labelElement.classList.add(\"text-color-custom\");\n }\n\n // Mettre l'opacité à 1 pour .gradient-industrie\n const gradientElement = selectedItem.element.querySelector(\n \".gradient-industrie\",\n );\n if (gradientElement) {\n gradientElement.style.opacity = \"1\";\n }\n\n return true;\n }\n\n function findNextLineWithVisibleItems() {\n const lines = getLines();\n let attempts = 0;\n const maxAttempts = lines.length;\n\n while (attempts < maxAttempts) {\n currentLineIndex = (currentLineIndex + 1) % lines.length;\n attempts++;\n\n if (applyRandomHighlightOnCurrentLine()) {\n return true;\n }\n }\n\n return false;\n }\n\n function applyRandomHighlightOnNextLine() {\n removeHighlight();\n\n if (findNextLineWithVisibleItems()) {\n resetRotationInterval();\n }\n }\n\n function checkVisibility() {\n if (currentHighlightedItem && !isItemStillVisible(currentHighlightedItem)) {\n removeHighlight();\n\n if (!applyRandomHighlightOnCurrentLine()) {\n findNextLineWithVisibleItems();\n }\n\n resetRotationInterval();\n }\n }\n\n function resetRotationInterval() {\n if (rotationInterval) {\n clearInterval(rotationInterval);\n }\n\n rotationInterval = setInterval(() => {\n applyRandomHighlightOnNextLine();\n }, 4000);\n }\n\n setInterval(checkVisibility, 100);\n\n setTimeout(() => {\n if (!applyRandomHighlightOnCurrentLine()) {\n findNextLineWithVisibleItems();\n }\n\n resetRotationInterval();\n }, 100);\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n setTimeout(() => {\n startRandomHighlight();\n }, 500);\n});\n\n/* =========================\n 🚧 Auto animate Startup Tags on map\n ========================= */\nwindow.initTagsAnimateOnMap = initTagsAnimateOnMap;\nfunction initTagsAnimateOnMap() {\n // ── CONFIG ──\n var INTERVAL = 2000;\n var FADE = 1200;\n var STAGGER = 1200;\n\n function shuffle(arr) {\n var a = arr.slice();\n for (var i = a.length - 1; i > 0; i--) {\n var j = Math.floor(Math.random() * (i + 1));\n var tmp = a[i];\n a[i] = a[j];\n a[j] = tmp;\n }\n return a;\n }\n\n document.querySelectorAll(\"[data-tag-rotator]\").forEach(function (container) {\n var opacityOnly = container.dataset.tagFade === \"opacity\";\n var pool = Array.from(container.querySelectorAll(\"[data-tag]\"));\n var slots = Array.from(container.querySelectorAll(\"[data-tag-slot]\"))\n .filter(function (slot) {\n return getComputedStyle(slot).display !== \"none\";\n });\n\n var poolIndex = 0;\n function nextTag() {\n var tag = pool[poolIndex].cloneNode(true);\n poolIndex = (poolIndex + 1) % pool.length;\n return tag;\n }\n\n // ── Visibilité par slot ──\n var visibleSlots = new Set();\n\n var slotObserver = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n visibleSlots.add(entry.target);\n } else {\n visibleSlots.delete(entry.target);\n }\n });\n }, { threshold: 0.1 });\n\n // ── Affichage initial ──\n slots.forEach(function (slot) {\n slot.innerHTML = \"\";\n slot.style.width = \"auto\";\n slot.style.height = \"auto\";\n slot.appendChild(nextTag());\n\n if (opacityOnly) {\n slot.style.opacity = \"0\";\n slot.style.transition = \"opacity \" + FADE + \"ms ease\";\n slot.style.opacity = \"1\";\n } else {\n slot.classList.add(\"visible\");\n }\n\n slotObserver.observe(slot);\n });\n\n // ── Cycle batch — uniquement sur les slots visibles ──\n function runBatch() {\n var visible = shuffle(Array.from(visibleSlots));\n if (visible.length === 0) return;\n\n var count = Math.floor(Math.random() * Math.min(3, visible.length)) + 1;\n var picked = visible.slice(0, count);\n\n picked.forEach(function (slot, i) {\n setTimeout(function () {\n if (opacityOnly) {\n slot.style.opacity = \"0\";\n setTimeout(function () {\n slot.innerHTML = \"\";\n slot.appendChild(nextTag());\n slot.style.opacity = \"1\";\n }, FADE);\n } else {\n slot.classList.remove(\"visible\");\n slot.classList.add(\"exit\");\n setTimeout(function () {\n slot.innerHTML = \"\";\n slot.appendChild(nextTag());\n slot.style.transition = \"none\";\n slot.classList.remove(\"exit\");\n slot.offsetHeight;\n slot.style.transition = \"\";\n slot.classList.add(\"visible\");\n }, FADE);\n }\n }, i * STAGGER);\n });\n }\n\n // ── Démarrage ──\n runBatch();\n setInterval(runBatch, INTERVAL);\n });\n}\n/* =========================\n ✅ AUTO ROTATE FAKE TABS ANIMATION\n ========================= */\n\nwindow.AutoRotateFakeTabs = AutoRotateFakeTabs;\nfunction AutoRotateFakeTabs() {\n // ---- FIND ELEMENTS ----\n var wrap = document.querySelector(\"[data-tabs-wrap]\");\n var triggers = wrap.querySelectorAll(\"[data-tabs-trigger]\");\n var panels = wrap.querySelectorAll(\"[data-tabs-panel]\");\n var bars = wrap.querySelectorAll(\"[data-tabs-progress-bar]\");\n var duration = Number(wrap.getAttribute(\"data-tabs-duration\")) || 5000;\n\n // ---- STATE ----\n var currentIndex = 0;\n var timer = null;\n\n // ---- SWITCH TO A TAB ----\n function switchToTab(index) {\n // 1. Remove \"is-active\" from all triggers and panels\n for (var i = 0; i < triggers.length; i++) {\n triggers[i].classList.remove(\"is-active\");\n panels[i].classList.remove(\"is-active\");\n }\n\n // 2. Add \"is-active\" to the chosen trigger and panel\n triggers[index].classList.add(\"is-active\");\n panels[index].classList.add(\"is-active\");\n\n // 3. Reset all progress bars to 0\n for (var i = 0; i < bars.length; i++) {\n bars[i].style.transition = \"none\";\n bars[i].style.width = \"0%\";\n }\n\n // 4. Animate the active progress bar to 100%\n void bars[index].offsetWidth; // force browser to apply the reset before animating\n bars[index].style.transition = \"width \" + duration + \"ms linear\";\n bars[index].style.width = \"100%\";\n\n // 5. Update state\n currentIndex = index;\n }\n\n // ---- GO TO NEXT TAB ----\n function goToNextTab() {\n var nextIndex = (currentIndex + 1) % triggers.length;\n switchToTab(nextIndex);\n }\n\n // ---- START / STOP AUTOPLAY ----\n function startAutoplay() {\n stopAutoplay();\n timer = setInterval(goToNextTab, duration);\n }\n\n function stopAutoplay() {\n clearInterval(timer);\n }\n\n // ---- CLICK ON A TAB ----\n for (var i = 0; i < triggers.length; i++) {\n (function (index) {\n triggers[index].addEventListener(\"click\", function () {\n switchToTab(index);\n startAutoplay(); // restart timer after manual click\n });\n })(i);\n }\n\n // ---- PAUSE ON HOVER ----\n //wrap.addEventListener(\"mouseenter\", stopAutoplay);\n //wrap.addEventListener(\"mouseleave\", startAutoplay);\n\n // ---- INIT ----\n switchToTab(0);\n startAutoplay();\n // Mark as ready — this activates the CSS that hides inactive panels\n // Without JS (e.g. in the Webflow Designer), all panels stay visible\n wrap.setAttribute(\"data-tabs-ready\", \"\");\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n AutoRotateFakeTabs();\n});\n\n/* =========================\n ✅ VIDEO MAGNETIC BTN\n ========================= */\n\n/* ---------- Magnetic Effect ---------- */\nfunction initMagneticEffect() {\n // On sélectionne maintenant la zone \"wrapper\" (.btn-magnetic) qui est plus grande\n const magnets = document.querySelectorAll(\".btn-magnetic\");\n if (window.innerWidth <= 991) return;\n\n // Fonction pour tuer les tweens et réinitialiser\n const resetEl = (el, immediate) => {\n if (!el) return;\n gsap.killTweensOf(el);\n (immediate ? gsap.set : gsap.to)(el, {\n x: \"0em\",\n y: \"0em\",\n rotate: \"0deg\",\n clearProps: \"all\",\n ...(!immediate && { ease: \"elastic.out(1, 0.3)\", duration: 1.6 }),\n });\n };\n\n const resetOnEnter = (e) => {\n const m = e.currentTarget;\n const target = m.querySelector(\".btn-magnetic__click\");\n if (!target) return;\n resetEl(target, true);\n resetEl(target.querySelector(\"[data-magnetic-inner-target]\"), true);\n };\n\n const moveMagnet = (e) => {\n const m = e.currentTarget; // Le wrapper invisible grand format\n const target = m.querySelector(\".btn-magnetic__click\"); // Le bouton visuel\n if (!target) return;\n\n const b = m.getBoundingClientRect(),\n strength = parseFloat(target.getAttribute(\"data-magnetic-strength\")) ||\n 25,\n inner = target.querySelector(\"[data-magnetic-inner-target]\"),\n innerStrength =\n parseFloat(target.getAttribute(\"data-magnetic-strength-inner\")) ||\n strength,\n // offsetX et Y calculent la position par rapport au wrapper (350x350)\n offsetX = ((e.clientX - b.left) / m.offsetWidth - 0.5) * (strength / 16),\n offsetY = ((e.clientY - b.top) / m.offsetHeight - 0.5) * (strength / 16);\n\n // On déplace le bouton \".btn-magnetic__click\" à l'intérieur du wrapper\n gsap.to(target, {\n x: offsetX + \"em\",\n y: offsetY + \"em\",\n rotate: \"0.001deg\",\n ease: \"power4.out\",\n duration: 1.6,\n });\n\n if (inner) {\n const innerOffsetX = ((e.clientX - b.left) / m.offsetWidth - 0.5) *\n (innerStrength / 16),\n innerOffsetY = ((e.clientY - b.top) / m.offsetHeight - 0.5) *\n (innerStrength / 16);\n gsap.to(inner, {\n x: innerOffsetX + \"em\",\n y: innerOffsetY + \"em\",\n rotate: \"0.001deg\",\n ease: \"power4.out\",\n duration: 2,\n });\n }\n };\n\n const resetMagnet = (e) => {\n const m = e.currentTarget;\n const target = m.querySelector(\".btn-magnetic__click\");\n if (!target) return;\n\n const inner = target.querySelector(\"[data-magnetic-inner-target]\");\n\n // Retour fluide au centre\n gsap.to(target, {\n x: \"0em\",\n y: \"0em\",\n ease: \"elastic.out(1, 0.3)\",\n duration: 1.6,\n clearProps: \"all\",\n });\n if (inner) {\n gsap.to(inner, {\n x: \"0em\",\n y: \"0em\",\n ease: \"elastic.out(1, 0.3)\",\n duration: 2,\n clearProps: \"all\",\n });\n }\n };\n\n magnets.forEach((m) => {\n m.addEventListener(\"mouseenter\", resetOnEnter);\n m.addEventListener(\"mousemove\", moveMagnet);\n m.addEventListener(\"mouseleave\", resetMagnet);\n });\n}\n\n/* ---------- Init Vimeo Lightbox ---------- */\nfunction initVimeoLightboxAdvanced() {\n // Single lightbox container\n const lightbox = document.querySelector(\"[data-vimeo-lightbox-init]\");\n if (!lightbox) return;\n\n // Open & close buttons\n const openButtons = document.querySelectorAll(\n '[data-vimeo-lightbox-control=\"open\"]',\n );\n const closeButtons = document.querySelectorAll(\n '[data-vimeo-lightbox-control=\"close\"]',\n );\n\n // Core elements inside lightbox\n let iframe = lightbox.querySelector(\"iframe\"); // ← now let\n const placeholder = lightbox.querySelector(\".vimeo-lightbox__placeholder\");\n const calcEl = lightbox.querySelector(\".vimeo-lightbox__calc\");\n const wrapEl = lightbox.querySelector(\".vimeo-lightbox__calc-wrap\");\n const playerContainer = lightbox.querySelector(\n \"[data-vimeo-lightbox-player]\",\n );\n\n // State\n let player = null;\n let currentVideoID = null;\n let videoAspectRatio = null;\n let globalMuted = lightbox.getAttribute(\"data-vimeo-muted\") === \"true\";\n const isTouch = (\"ontouchstart\" in window) || navigator.maxTouchPoints > 0;\n const playedOnce = new Set(); // track first play on touch\n\n // Format time (seconds → \"m:ss\")\n function formatTime(s) {\n const m = Math.floor(s / 60);\n const sec = Math.floor(s % 60).toString().padStart(2, \"0\");\n return `${m}:${sec}`;\n }\n\n // Clamp wrap height\n function clampWrapSize(ar) {\n const w = calcEl.offsetWidth;\n const h = calcEl.offsetHeight;\n wrapEl.style.maxWidth = Math.min(w, h / ar) + \"px\";\n }\n\n // Adjust sizing in \"cover\" mode\n function adjustCoverSizing() {\n if (!videoAspectRatio) return;\n const cH = playerContainer.offsetHeight;\n const cW = playerContainer.offsetWidth;\n const r = cH / cW;\n const wEl = lightbox.querySelector(\".vimeo-lightbox__iframe\");\n if (r > videoAspectRatio) {\n wEl.style.width = (r / videoAspectRatio * 100) + \"%\";\n wEl.style.height = \"100%\";\n } else {\n wEl.style.height = (videoAspectRatio / r * 100) + \"%\";\n wEl.style.width = \"100%\";\n }\n }\n\n // Close & pause lightbox\n function closeLightbox() {\n lightbox.setAttribute(\"data-vimeo-activated\", \"false\");\n document.body.style.overflow = \"\";\n if (player) {\n player.pause();\n lightbox.setAttribute(\"data-vimeo-playing\", \"false\");\n }\n }\n\n // Wire Escape key & close buttons\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") closeLightbox();\n });\n closeButtons.forEach((btn) => btn.addEventListener(\"click\", closeLightbox));\n\n // Close when clicking outside the video\n lightbox.addEventListener(\"click\", (e) => {\n // Ignorer si le clic est sur le composant vidéo en lui-même (data-vimeo-lightbox-player)\n if (e.target.closest(\"[data-vimeo-lightbox-player]\")) return;\n\n // Ignorer si le clic est sur un bouton de contrôle (play/pause/timeline...)\n if (e.target.closest(\"[data-vimeo-control]\")) return;\n\n // Ignorer si le clic est sur une autre action interne (*à l'exception* de l'arrière-plan/fermeture).\n // On vérifie que c'est un bouton \"open\" ou qu'on ne cible pas la classe background.\n if (\n e.target.closest('[data-vimeo-lightbox-control=\"open\"]') ||\n (e.target.closest(\"[data-vimeo-lightbox-control]\") &&\n !e.target.closest(\".vimeo-lightbox__bg\") &&\n !e.target.closest('[data-vimeo-lightbox-control=\"close\"]')) // Le bouton close ferme déjà seul, c'est optionnel\n ) {\n return;\n }\n\n // Sinon, on ferme.\n closeLightbox();\n });\n\n // Setup Vimeo Player event handlers\n function setupPlayerEvents() {\n // Hide placeholder when playback starts\n player.on(\"play\", () => {\n lightbox.setAttribute(\"data-vimeo-loaded\", \"true\");\n lightbox.setAttribute(\"data-vimeo-playing\", \"true\");\n });\n // Close on video end\n player.on(\"ended\", closeLightbox);\n\n // Paused\n player.on(\"pause\", () => {\n lightbox.setAttribute(\"data-vimeo-playing\", \"false\");\n });\n\n // Duration UI\n const durEl = lightbox.querySelector(\"[data-vimeo-duration]\");\n player.getDuration().then((d) => {\n if (durEl) durEl.textContent = formatTime(d);\n lightbox.querySelectorAll('[data-vimeo-control=\"timeline\"],progress')\n .forEach((el) => el.max = d);\n });\n\n // Timeline & progress updates\n const tl = lightbox.querySelector('[data-vimeo-control=\"timeline\"]');\n const pr = lightbox.querySelector(\"progress\");\n player.on(\"timeupdate\", (data) => {\n if (tl) tl.value = data.seconds;\n if (pr) pr.value = data.seconds;\n if (durEl) durEl.textContent = formatTime(Math.trunc(data.seconds));\n });\n if (tl) {\n [\"input\", \"change\"].forEach((evt) =>\n tl.addEventListener(evt, (e) => {\n const v = e.target.value;\n player.setCurrentTime(v);\n if (pr) pr.value = v;\n })\n );\n }\n\n // Hover → hide controls after a timeout\n let hoverTimer;\n playerContainer.addEventListener(\"mousemove\", () => {\n lightbox.setAttribute(\"data-vimeo-hover\", \"true\");\n clearTimeout(hoverTimer);\n hoverTimer = setTimeout(() => {\n lightbox.setAttribute(\"data-vimeo-hover\", \"false\");\n }, 3000);\n });\n\n // Fullscreen toggle on player container\n const fsBtn = lightbox.querySelector('[data-vimeo-control=\"fullscreen\"]');\n if (fsBtn) {\n const isFS = () =>\n document.fullscreenElement || document.webkitFullscreenElement;\n if (!(document.fullscreenEnabled || document.webkitFullscreenEnabled)) {\n fsBtn.style.display = \"none\";\n }\n fsBtn.addEventListener(\"click\", () => {\n if (isFS()) {\n lightbox.setAttribute(\"data-vimeo-fullscreen\", \"false\");\n (document.exitFullscreen || document.webkitExitFullscreen).call(\n document,\n );\n } else {\n lightbox.setAttribute(\"data-vimeo-fullscreen\", \"true\");\n (playerContainer.requestFullscreen ||\n playerContainer.webkitRequestFullscreen)\n .call(playerContainer);\n }\n });\n [\"fullscreenchange\", \"webkitfullscreenchange\"].forEach((evt) =>\n document.addEventListener(\n evt,\n () =>\n lightbox.setAttribute(\n \"data-vimeo-fullscreen\",\n isFS() ? \"true\" : \"false\",\n ),\n )\n );\n }\n }\n\n // Run sizing logic\n async function runSizing() {\n const mode = lightbox.getAttribute(\"data-vimeo-update-size\");\n const w = await player.getVideoWidth();\n const h = await player.getVideoHeight();\n const ar = h / w;\n const bef = lightbox.querySelector(\".vimeo-lightbox__before\");\n\n if (mode === \"true\") {\n if (bef) bef.style.paddingTop = (ar * 100) + \"%\";\n clampWrapSize(ar);\n } else if (mode === \"cover\") {\n videoAspectRatio = ar;\n if (bef) bef.style.paddingTop = \"0%\";\n adjustCoverSizing();\n } else {\n clampWrapSize(ar);\n }\n }\n\n // Re-run sizing on viewport resize\n window.addEventListener(\"resize\", () => {\n if (player) runSizing();\n });\n\n // Open or switch video\n async function openLightbox(id, placeholderBtn) {\n // Enter loading state immediately\n lightbox.setAttribute(\"data-vimeo-activated\", \"loading\");\n document.body.style.overflow = \"hidden\";\n lightbox.setAttribute(\"data-vimeo-loaded\", \"false\");\n\n // — FULL RESET if new video ID —\n if (player && id !== currentVideoID) {\n await player.pause();\n await player.unload();\n\n // Replace old iframe with a fresh one\n const oldIframe = iframe;\n const newIframe = document.createElement(\"iframe\");\n newIframe.className = oldIframe.className;\n newIframe.setAttribute(\"allow\", oldIframe.getAttribute(\"allow\"));\n newIframe.setAttribute(\"frameborder\", \"0\");\n newIframe.setAttribute(\"allowfullscreen\", \"true\");\n newIframe.setAttribute(\"allow\", \"autoplay; encrypted-media\");\n oldIframe.parentNode.replaceChild(newIframe, oldIframe);\n\n // Reset state\n iframe = newIframe;\n player = null;\n currentVideoID = null;\n lightbox.setAttribute(\"data-vimeo-playing\", \"false\");\n }\n\n // Update placeholder image attributes\n if (placeholderBtn) {\n [\"src\", \"srcset\", \"sizes\", \"alt\", \"width\"].forEach((attr) => {\n const val = placeholderBtn.getAttribute(attr);\n if (val != null) {\n placeholder.setAttribute(attr, val);\n } else {\n placeholder.removeAttribute(attr);\n }\n });\n }\n\n // Build a brand-new player if needed\n if (!player) {\n iframe.src =\n `https://player.vimeo.com/video/${id}?api=1&background=1&autoplay=0&loop=0&muted=0`;\n player = new Vimeo.Player(iframe);\n setupPlayerEvents();\n currentVideoID = id;\n await runSizing();\n }\n\n // Now sizing is ready — show lightbox\n lightbox.setAttribute(\"data-vimeo-activated\", \"true\");\n\n // Autoplay logic\n if (!isTouch) {\n player.setVolume(globalMuted ? 0 : 1).then(() => {\n lightbox.setAttribute(\"data-vimeo-playing\", \"true\");\n setTimeout(() => player.play(), 50);\n });\n } else {\n // Sur mobile (isTouch), on lance la vidéo au premier clic\n if (!playedOnce.has(currentVideoID)) {\n // Pour que le navigateur accepte l'autoplay sur mobile, on doit souvent forcer le mute au lancement\n player.setVolume(0).then(() => {\n lightbox.setAttribute(\"data-vimeo-playing\", \"true\");\n player.play();\n // On remet le son après un court instant si ce n'était pas muet globalement\n if (!globalMuted) {\n setTimeout(() => {\n player.setVolume(1);\n lightbox.setAttribute(\"data-vimeo-muted\", \"false\");\n }, 100);\n }\n playedOnce.add(currentVideoID);\n });\n } else {\n player.setVolume(globalMuted ? 0 : 1).then(() => {\n lightbox.setAttribute(\"data-vimeo-playing\", \"true\");\n player.play();\n });\n }\n }\n }\n\n // Internal controls\n lightbox.querySelector('[data-vimeo-control=\"play\"]').addEventListener(\n \"click\",\n () => {\n if (isTouch) {\n if (!playedOnce.has(currentVideoID)) {\n player.setVolume(0).then(() => {\n lightbox.setAttribute(\"data-vimeo-playing\", \"true\");\n player.play();\n if (!globalMuted) {\n setTimeout(() => {\n player.setVolume(1);\n lightbox.setAttribute(\"data-vimeo-muted\", \"false\");\n }, 100);\n }\n playedOnce.add(currentVideoID);\n });\n } else {\n player.setVolume(globalMuted ? 0 : 1).then(() => {\n lightbox.setAttribute(\"data-vimeo-playing\", \"true\");\n player.play();\n });\n }\n } else {\n player.setVolume(globalMuted ? 0 : 1).then(() => {\n lightbox.setAttribute(\"data-vimeo-playing\", \"true\");\n setTimeout(() => player.play(), 50);\n });\n }\n },\n );\n\n lightbox.querySelector('[data-vimeo-control=\"pause\"]').addEventListener(\n \"click\",\n () => {\n player.pause();\n },\n );\n\n lightbox.querySelector('[data-vimeo-control=\"mute\"]').addEventListener(\n \"click\",\n () => {\n globalMuted = !globalMuted;\n player.setVolume(globalMuted ? 0 : 1).then(() =>\n lightbox.setAttribute(\n \"data-vimeo-muted\",\n globalMuted ? \"true\" : \"false\",\n )\n );\n },\n );\n\n // Wire up open buttons\n openButtons.forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n const vid = btn.getAttribute(\"data-vimeo-lightbox-id\");\n const img = btn.querySelector(\"[data-vimeo-lightbox-placeholder]\");\n console.log(\"--- Vimeo Lightbox Clicked ---\");\n console.log(\"Video ID found:\", vid);\n console.log(\"Thumbnail (img) found:\", img);\n openLightbox(vid, img);\n });\n });\n}\n\n/* ---------- Parallax Effect ---------- */\nfunction initParallaxLayers() {\n document.querySelectorAll(\"[data-parallax-layers]\").forEach(\n (triggerElement) => {\n let tl = gsap.timeline({\n scrollTrigger: {\n trigger: triggerElement,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: 1,\n },\n });\n const isMobile = window.innerWidth < 768;\n const layers = [\n { layer: \"1\", yPercentFrom: 0, yPercent: isMobile ? -12 : -20 },\n { layer: \"2\", yPercentFrom: 0, yPercent: isMobile ? -15 : -25 },\n ];\n layers.forEach((layerObj, idx) => {\n tl.fromTo(\n triggerElement.querySelectorAll(\n `[data-parallax-layer=\"${layerObj.layer}\"]`,\n ),\n {\n yPercent: layerObj\n .yPercentFrom,\n },\n { yPercent: layerObj.yPercent, ease: \"none\" },\n idx === 0 ? undefined : \"<\",\n );\n });\n },\n );\n}\n\n/* =========================\n ✅ MAP RENCONTRER CITY ROTATOR\n ========================= */\nwindow.initMapRotator = initMapRotator;\nfunction initMapRotator() {\n const DELAY_BETWEEN_CITIES = 200;\n const VISIBLE_DURATION = 500;\n const FADE_DURATION = 500;\n const MIN_GROUP_SIZE = 1;\n const MAX_GROUP_SIZE = 3;\n\n const cityRotator = document.querySelector(\"[data-city-rotator]\");\n if (!cityRotator) return;\n\n const cityElements = cityRotator.querySelectorAll(\"[data-city]\");\n if (cityElements.length === 0) return;\n\n function showCityElement(el) {\n el.style.opacity = \"1\";\n el.style.transform = \"translateY(0)\";\n }\n\n function hideCityElement(el) {\n el.style.opacity = \"0\";\n el.style.transform = \"translateY(10px)\";\n }\n\n function wait(ms) {\n return new Promise((resolve) => setTimeout(resolve, ms));\n }\n\n function shuffleArray(array) {\n const shuffled = [...array];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n }\n\n function randomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n }\n\n function getExclusions(el) {\n const raw = el.dataset.cityExclude;\n if (!raw) return [];\n return raw.split(\",\").map((s) => s.trim());\n }\n\n function isCompatible(el, group) {\n const elCity = el.dataset.city;\n const elExclusions = getExclusions(el);\n return group.every((groupEl) => {\n const groupCity = groupEl.dataset.city;\n const groupExclusions = getExclusions(groupEl);\n return !elExclusions.includes(groupCity) &&\n !groupExclusions.includes(elCity);\n });\n }\n\n async function startLoop() {\n while (true) {\n const shuffled = shuffleArray([...cityElements]);\n let i = 0;\n while (i < shuffled.length) {\n const groupSize = Math.min(\n randomInt(MIN_GROUP_SIZE, MAX_GROUP_SIZE),\n shuffled.length - i,\n );\n const group = [shuffled[i]];\n for (let j = i + 1; j < i + groupSize; j++) {\n if (isCompatible(shuffled[j], group)) {\n group.push(shuffled[j]);\n }\n }\n i += groupSize;\n group.forEach((el, index) => {\n setTimeout(() => showCityElement(el), index * DELAY_BETWEEN_CITIES);\n });\n await wait(FADE_DURATION + VISIBLE_DURATION);\n group.forEach((el, index) => {\n setTimeout(() => hideCityElement(el), index * DELAY_BETWEEN_CITIES);\n });\n await wait(DELAY_BETWEEN_CITIES);\n }\n }\n }\n\n startLoop();\n}\n\n/* =========================\n ✅ CSS HowTo Progress Tabs\n ========================= */\n\n(function () {\n const tabs = document.querySelectorAll(\"[auto-tab]\");\n const images = document.querySelectorAll(\"[auto-tab-image]\");\n const media = document.querySelector(\"[auto-tabs-media]\");\n\n // On lance le script uniquement si des tabs existent sur la page\n if (!tabs.length) return;\n\n const DURATION = 6000; // Durée par tab en ms\n\n let currentIndex = 0;\n let startTime = null;\n let animFrame = null;\n\n /* ----------------------------------------------------------\n Injection des styles CSS au runtime\n → Invisible en édition Webflow, actif uniquement en live\n ---------------------------------------------------------- */\n\n function injectStyles() {\n const style = document.createElement(\"style\");\n style.textContent = `\n [auto-tab] { opacity: 0.4; transition: opacity 0.4s ease; cursor: pointer; }\n [auto-tab][active] { opacity: 1; }\n [auto-tab-body] { opacity: 0; transition: opacity 0.4s ease; }\n [auto-tab-progress] { height: 2px !important; overflow: hidden; background: rgba(0, 9, 74, 0.1); }\n [auto-tab-bar] { height: 2px !important; display: block; background: #FF4920; }\n [auto-tabs-media] { position: relative; }\n [auto-tab-image] { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }\n [auto-tab-image][active]{ opacity: 1; pointer-events: auto; }\n `;\n document.head.appendChild(style);\n }\n\n /* ----------------------------------------------------------\n Calcul de la hauteur du wrapper d'images\n → Les images sont en position absolute, donc le wrapper\n perd sa hauteur naturelle — on la force en JS\n ---------------------------------------------------------- */\n\n function setMediaHeight() {\n if (!media || !images.length) return;\n\n // Affichage temporaire de toutes les images pour pouvoir les mesurer\n images.forEach(function (img) {\n img.style.display = \"block\";\n });\n const height = images[0].offsetHeight;\n images.forEach(function (img) {\n img.style.display = \"\";\n });\n\n if (height > 0) media.style.height = height + \"px\";\n }\n\n /* ----------------------------------------------------------\n Activation d'une tab\n → Reset de tout, puis activation de la tab ciblée\n ---------------------------------------------------------- */\n\n function setActive(index) {\n // Reset de toutes les tabs\n tabs.forEach(function (tab) {\n tab.removeAttribute(\"active\");\n\n const bar = tab.querySelector(\"[auto-tab-bar]\");\n const body = tab.querySelector(\"[auto-tab-body]\");\n const number = tab.querySelector(\"[auto-tab-number]\");\n\n if (bar) bar.style.width = \"0%\";\n if (body) {\n body.style.display = \"none\";\n body.style.opacity = \"0\";\n }\n if (number) number.style.color = \"\";\n });\n\n // Reset de toutes les images\n images.forEach(function (img) {\n img.removeAttribute(\"active\");\n });\n\n // Activation de la tab et de l'image ciblées\n const activeTab = document.querySelector(\n '[auto-tab][tab-index=\"' + index + '\"]',\n );\n const activeImg = document.querySelector(\n '[auto-tab-image][tab-index=\"' + index + '\"]',\n );\n\n if (activeTab) {\n activeTab.setAttribute(\"active\", \"\");\n\n const body = activeTab.querySelector(\"[auto-tab-body]\");\n const number = activeTab.querySelector(\"[auto-tab-number]\");\n\n if (number) number.style.color = \"#FF4920\";\n if (body) {\n body.style.display = \"block\";\n // rAF nécessaire pour que la transition CSS se déclenche après le display:block\n requestAnimationFrame(function () {\n body.style.opacity = \"1\";\n });\n }\n }\n\n if (activeImg) activeImg.setAttribute(\"active\", \"\");\n\n // Réinitialisation de l'animation\n currentIndex = index;\n startTime = null;\n cancelAnimationFrame(animFrame);\n animFrame = requestAnimationFrame(animate);\n }\n\n /* ----------------------------------------------------------\n Animation de la barre de progression\n → Appelée ~60x/s par le navigateur via requestAnimationFrame\n ---------------------------------------------------------- */\n\n function animate(timestamp) {\n if (!startTime) startTime = timestamp;\n\n const elapsed = timestamp - startTime;\n const percentage = Math.min((elapsed / DURATION) * 100, 100);\n\n const activeTab = document.querySelector(\n '[auto-tab][tab-index=\"' + currentIndex + '\"]',\n );\n if (activeTab) {\n const bar = activeTab.querySelector(\"[auto-tab-bar]\");\n if (bar) bar.style.width = percentage + \"%\";\n }\n\n if (percentage < 100) {\n animFrame = requestAnimationFrame(animate);\n } else {\n // % toutesLesTabs.length permet de revenir à 0 après la dernière tab\n setActive((currentIndex + 1) % tabs.length);\n }\n }\n\n /* ----------------------------------------------------------\n Clic manuel sur une tab\n ---------------------------------------------------------- */\n\n tabs.forEach(function (tab) {\n tab.addEventListener(\"click\", function () {\n cancelAnimationFrame(animFrame);\n setActive(parseInt(tab.getAttribute(\"tab-index\")));\n });\n });\n\n /* ----------------------------------------------------------\n Init\n ---------------------------------------------------------- */\n\n injectStyles();\n setMediaHeight();\n window.addEventListener(\"resize\", setMediaHeight);\n setActive(0);\n})();\n\n/* ----------------------------------------------------------\n Init Page Scripts\n ---------------------------------------------------------- */\n\nfunction initPageScripts() {\n document.querySelector(\"[data-magnetic-wrapper]\") && initMagneticEffect();\n document.querySelector(\"[data-vimeo-lightbox-id]\") &&\n initVimeoLightboxAdvanced();\n document.querySelector(\"[data-parallax-layers]\") && initParallaxLayers();\n document.querySelector(\"[data-city-rotator]\") && initMapRotator();\n document.querySelector(\"[data-tag-rotator]\") && initTagsAnimateOnMap();\n}\ninitPageScripts();","deleted","label",[179,160],"ARCHIVES","permalink","https://www.val.town/x/ncf/blast/code/ARCHIVES/backup2703.ts","extension","actionData","errors"]