{"id":207,"date":"2026-02-26T14:35:29","date_gmt":"2026-02-26T14:35:29","guid":{"rendered":"https:\/\/grossenoix.com\/?page_id=207"},"modified":"2026-02-26T15:40:57","modified_gmt":"2026-02-26T15:40:57","slug":"207-2","status":"publish","type":"page","link":"https:\/\/grossenoix.com\/index.php\/207-2\/","title":{"rendered":"hmmm"},"content":{"rendered":"\n<style>\n  :root{\n    \/* Premium Dark UI Palette *\/\n    --bg: #09090b;\n    --txt: #f4f4f5;\n    --muted: #a1a1aa;\n    --line: rgba(255,255,255,0.08);\n\n    --pad: clamp(16px, 2.6vw, 44px);\n    --radius: 18px;\n\n    --btn: rgba(255,255,255,0.03);\n    --btnb: rgba(255,255,255,0.15);\n    --btnHovBg: #f4f4f5;\n    --btnHovTxt: #09090b;\n\n    --navH: 0px;\n    --topGap: clamp(18px, 2.4vw, 36px);\n\n    \/* Dock *\/\n    --dockAR: 2 \/ 3;\n    --dockMaxW: 760px;\n    --dockMaxH: 900px;\n\n    \/* Scroll parallax *\/\n    --pxBg: 0.025; \n    --pxDockY: 0.080;\n    --pxDockX: 0.015;\n    --pxText: 0.090;\n    --pxText2: 0.050;\n\n    \/* Soft mouse-follow on Dock *\/\n    --dockFollow: 10;      \n    --dockTiltX: 3.5;      \n    --dockTiltY: 4.5;      \n    --dockInner: 12;       \n\n    \/* Softness \/ damping *\/\n    --mouseSmoothing: 0.08; \n    --ease: cubic-bezier(.2,.9,.15,1);\n\n    color-scheme: dark;\n  }\n\n  \/* WP Overrides to force full screen behavior *\/\n  html, body {\n    height: 100%;\n    margin: 0 !important;\n    padding: 0 !important;\n    background: var(--bg) !important;\n    color: var(--txt);\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n    overflow-x: hidden;\n  }\n  html { scroll-behavior: smooth; }\n  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }\n\n  \/* =========================\n     NAV \n     ========================= *\/\n  .orbitNav{\n    position:fixed;\n    z-index:9999;\n    left:50%;\n    top: 16px;\n    transform: translateX(-50%);\n    display:flex;\n    gap:8px;\n    padding:8px;\n    border-radius: 999px;\n    border: 1px solid rgba(255,255,255,0.08);\n    background: rgba(9,9,11,0.65);\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n    box-shadow: 0 4px 24px -6px rgba(0,0,0,0.5);\n    max-width: calc(100vw - 24px);\n    overflow:auto;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width:none;\n  }\n  .orbitNav::-webkit-scrollbar{display:none;}\n  .orbitNav a{\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    padding:8px 14px;\n    border-radius: 999px;\n    font-size: 12px;\n    font-weight: 500;\n    letter-spacing:.04em;\n    border:1px solid transparent;\n    text-decoration:none;\n    opacity:.50;\n    white-space:nowrap;\n    transition: all 0.3s ease;\n    color: var(--txt);\n  }\n  .orbitNav a.isActive{\n    opacity:1;\n    border-color: rgba(255,255,255,0.15);\n    background: rgba(255,255,255,0.08);\n  }\n  .orbitNav a:hover:not(.isActive) {\n    opacity: .8;\n  }\n\n  \/* =========================\n     SECTION\n     ========================= *\/\n  .ttrade-section{\n    position:relative;\n    min-height:100vh;\n    isolation:isolate;\n    border-bottom:1px solid var(--line);\n\n    display:grid;\n    align-items:end;\n    gap: clamp(14px, 2.2vw, 28px);\n\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto;\n    padding: var(--pad);\n\n    overflow:hidden;\n    scroll-margin-top: 90px;\n\n    opacity: 0;\n    transform: translate3d(0, 40px, 0) scale(0.98);\n    transition: opacity 900ms var(--ease), transform 1100ms var(--ease);\n  }\n  .ttrade-section.isOn{\n    opacity: 1;\n    transform: translate3d(0,0,0) scale(1);\n  }\n\n  @media (min-width: 980px){\n    .ttrade-section{\n      grid-template-columns: minmax(320px, 1fr) minmax(360px, 0.95fr);\n      grid-template-rows: 1fr;\n      align-items:end;\n    }\n  }\n  @media (min-width: 1400px){\n    .ttrade-section{\n      grid-template-columns: minmax(420px, 1fr) 640px;\n    }\n  }\n\n  #hero .ttrade-content{\n    padding-top: calc(var(--navH) + var(--topGap));\n  }\n\n  \/* =========================\n     BACKGROUND \n     ========================= *\/\n  .bgVideo{\n    position:absolute;\n    inset:0;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    z-index:-5;\n    opacity: 0; \n    filter: saturate(1.1) contrast(1.1);\n    transform: translate3d(0,0,0) scale(1.05);\n    will-change: transform, opacity;\n    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .ttrade-section.bgActive .bgVideo {\n    opacity: 0.5; \n  }\n\n  .ttrade-overlay{\n    position:absolute;\n    inset:0;\n    z-index:-4;\n    background-color: rgba(0, 0, 0, 0.5); \n    background-image: radial-gradient(circle at center, transparent 30%, var(--bg) 100%),\n                      linear-gradient(to top, var(--bg) 0%, transparent 40%);\n    pointer-events:none;\n  }\n\n  \/* =========================\n     DOCK \n     ========================= *\/\n  .mediaDock{\n    grid-column: 1;\n    grid-row: 1;\n    width: 100%;\n    aspect-ratio: var(--dockAR);\n    max-height: min(74vh, var(--dockMaxH));\n    margin-top: calc(var(--navH) + 10px);\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    overflow: visible;\n    cursor: pointer;\n    position: relative;\n    align-self: start;\n    justify-self: center;\n    transform: translate3d(0,0,0);\n    will-change: transform;\n    touch-action: pan-y;\n    user-select:none;\n    -webkit-user-select:none;\n    --mx: 0; \n    --my: 0;\n    --tx: 0; \n    --ty: 0;\n    --pxX: 0px;\n    --pxY: 0px;\n  }\n\n  @media (min-width: 980px){\n    .mediaDock{\n      grid-column: 2;\n      grid-row: 1;\n      margin-top: 0;\n      height: calc(100vh - (var(--pad) * 2));\n      width: auto;\n      aspect-ratio: var(--dockAR);\n      max-height: calc(100vh - (var(--pad) * 2));\n      max-width: min(44vw, var(--dockMaxW));\n      align-self: center;\n      justify-self: end;\n    }\n  }\n\n  \/* \u2705 CORRECTION FLICKER : 3-State Transition System *\/\n  .dockLayer{\n    position:absolute;\n    inset:0;\n    width:100%;\n    height:100%;\n    object-fit: contain;\n    object-position: center;\n    \n    \/* Base State (Waiting on the right) *\/\n    opacity: 0;\n    z-index: 1;\n    transform: translate3d(calc(var(--mx) * var(--dockInner) * 1px + 100px),\n                          calc(var(--my) * var(--dockInner) * 1px), 0) scale(0.92);\n    \n    transition: opacity 0.8s ease, transform 1s cubic-bezier(0.25, 1.15, 0.3, 1);\n    will-change: transform, opacity;\n    pointer-events:none;\n  }\n\n  .dockLayer.isOn{\n    \/* Active State (In center) *\/\n    opacity: 1;\n    z-index: 2; \/* Forces new image above the old one *\/\n    transform: translate3d(calc(var(--mx) * var(--dockInner) * 1px),\n                          calc(var(--my) * var(--dockInner) * 1px), 0) scale(1);\n  }\n\n  .dockLayer.isOut{\n    \/* Exit State (Sliding to the left) *\/\n    opacity: 0;\n    z-index: 1; \/* Drops below the new incoming image *\/\n    transform: translate3d(calc(var(--mx) * var(--dockInner) * 1px - 80px),\n                          calc(var(--my) * var(--dockInner) * 1px), 0) scale(0.96);\n    \n    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .dockSheen{\n    position:absolute;\n    inset:-60px;\n    background: radial-gradient(560px 460px at calc(50% + var(--mx) * 18%)\n                                              calc(50% + var(--my) * 18%),\n      rgba(255,255,255,.12), rgba(255,255,255,0) 62%);\n    opacity:0;\n    pointer-events:none;\n    transition: opacity 220ms ease;\n    mix-blend-mode: screen;\n    z-index: 10;\n  }\n  .mediaDock.isHover .dockSheen{opacity:1;}\n\n  \/* =========================\n     CONTENT\n     ========================= *\/\n  .ttrade-content{\n    grid-column: 1;\n    grid-row: 2;\n    width: 100%;\n    max-width: 900px;\n    padding-bottom: calc(var(--pad) * 0.6);\n    text-align:center;\n    justify-self:center;\n    transform: translate3d(0,0,0);\n    will-change: transform;\n  }\n  @media (min-width: 980px){\n    .ttrade-content{\n      grid-column: 1;\n      grid-row: 1;\n      align-self: end;\n      text-align:left;\n      justify-self:start;\n      padding-right: clamp(10px, 1.5vw, 18px);\n    }\n  }\n\n  .ttrade-kicker{\n    letter-spacing:.2em;\n    text-transform:uppercase;\n    font-size: 11px;\n    color: var(--muted);\n    margin:0 0 16px;\n    font-weight: 600;\n  }\n  .ttrade-section h1, .ttrade-section h2{\n    margin:0 0 12px;\n    letter-spacing:-0.03em;\n    line-height:1.06;\n    color: var(--txt);\n  }\n  .ttrade-section h1{font-size: clamp(38px, 5vw, 72px); font-weight: 700;}\n  .ttrade-section h2{font-size: clamp(32px, 4vw, 54px); font-weight: 600;}\n  .ttrade-section p{\n    margin: 0 0 24px;\n    max-width: 62ch;\n    line-height:1.6;\n    color: var(--muted);\n    font-size: clamp(15px, 1.2vw, 18px);\n  }\n  .drift2{ display:block; will-change: transform; }\n\n  .ttrade-btnRow{\n    display:flex;\n    gap:12px;\n    flex-wrap:wrap;\n    margin-top: 14px;\n    justify-content:center;\n  }\n  @media (min-width:980px){ .ttrade-btnRow{justify-content:flex-start;} }\n  \n  .ttrade-btn{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    padding: 12px 20px;\n    border-radius: 999px;\n    text-decoration:none;\n    border:1px solid var(--btnb);\n    background: var(--btn);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    font-size: 13px;\n    font-weight: 500;\n    letter-spacing:.03em;\n    user-select:none;\n    -webkit-user-select:none;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    color: var(--txt);\n  }\n  .ttrade-btn:hover{\n    background: var(--btnHovBg);\n    color: var(--btnHovTxt);\n    border-color: var(--btnHovBg);\n    transform: translateY(-2px);\n  }\n  .ttrade-dot{\n    width:6px;height:6px;border-radius:50%;\n    background: currentColor; \n    display:inline-block;\n    transition: background 0.3s;\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .dockLayer{transition:none; animation:none;}\n    .ttrade-section{transition:none; opacity:1; transform:none;}\n  }\n<\/style>\n\n<nav class=\"orbitNav\" aria-label=\"Orbit sections\">\n  <a href=\"#hero\" data-nav=\"hero\" class=\"isActive\">INTRO<\/a>\n  <a href=\"#bull\" data-nav=\"bull\">BULL<\/a>\n  <a href=\"#bear\" data-nav=\"bear\">BEAR<\/a>\n  <a href=\"#volatile\" data-nav=\"volatile\">VOL<\/a>\n  <a href=\"#liquidity-pool\" data-nav=\"liquidity-pool\">POOL<\/a>\n<\/nav>\n\n<section class=\"ttrade-section isOn\" id=\"hero\"\n  data-bg='[{\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/IntroTT_TT.mp4\"}]'\n  data-dock='[]'\n>\n  <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n  <div class=\"ttrade-overlay\"><\/div>\n\n  <div class=\"ttrade-content\">\n    <span class=\"drift2\"><p class=\"ttrade-kicker\">\/\/ Introducing<\/p><\/span>\n    <h1>TTRADE UNIVERSE<\/h1>\n    <span class=\"drift2\"><p>Built For The EveryDay Traders<\/p><\/span>\n    <div class=\"ttrade-btnRow\">\n      <a class=\"ttrade-btn\" href=\"#bull\"><span class=\"ttrade-dot\"><\/span> ENTER<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"ttrade-section\" id=\"bull\"\n  data-bg='[{\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/bullTTT.mp4\"}]'\n  data-dock='[\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE02_BEAR.png\"},\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE01_BEAR.png\"}\n  ]'\n>\n  <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n  <div class=\"ttrade-overlay\"><\/div>\n\n  <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n    <div class=\"dockSheen\"><\/div>\n    <img class=\"dockLayer\" data-layer=\"1\" alt=\"\" \/>\n    <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n    <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n  <\/div>\n\n  <div class=\"ttrade-content\">\n    <span class=\"drift2\"><p class=\"ttrade-kicker\">\/\/ Mode<\/p><\/span>\n    <h1>Bull<\/h1>\n    <span class=\"drift2\"><p>Upward structure \/\/ Controlled force<\/p><\/span>\n    <div class=\"ttrade-btnRow\">\n      <a class=\"ttrade-btn\" href=\"#bear\"><span class=\"ttrade-dot\"><\/span> Next<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"ttrade-section\" id=\"bear\"\n  data-bg='[{\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/bearTTT.mp4\"}]'\n  data-dock='[\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE01_BEAR.png\"},\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE02_BEAR.png\"}\n  ]'\n>\n  <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n  <div class=\"ttrade-overlay\"><\/div>\n\n  <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n    <div class=\"dockSheen\"><\/div>\n    <img class=\"dockLayer\" data-layer=\"1\" alt=\"\" \/>\n    <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n    <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n  <\/div>\n\n  <div class=\"ttrade-content\">\n    <span class=\"drift2\"><p class=\"ttrade-kicker\">\/\/ Mode<\/p><\/span>\n    <h2>Bear<\/h2>\n    <span class=\"drift2\"><p>Downward pressure \/\/ Calculated control.<\/p><\/span>\n    <div class=\"ttrade-btnRow\">\n      <a class=\"ttrade-btn\" href=\"#volatile\"><span class=\"ttrade-dot\"><\/span> Next<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"ttrade-section\" id=\"volatile\"\n  data-bg='[{\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/sablier.mp4\"}]'\n  data-dock='[\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/ALLOVER-1.png\"},\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/SNAKE.png\"}\n  ]'\n>\n  <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n  <div class=\"ttrade-overlay\"><\/div>\n\n  <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n    <div class=\"dockSheen\"><\/div>\n    <img class=\"dockLayer\" data-layer=\"1\" alt=\"\" \/>\n    <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n    <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n  <\/div>\n\n  <div class=\"ttrade-content\">\n    <span class=\"drift2\"><p class=\"ttrade-kicker\">\/\/ Mode<\/p><\/span>\n    <h2>Volatile<\/h2>\n    <span class=\"drift2\"><p>Unstable conditions \/\/ Limited Times Offer<\/p><\/span>\n    <div class=\"ttrade-btnRow\">\n      <a class=\"ttrade-btn\" href=\"#liquidity-pool\"><span class=\"ttrade-dot\"><\/span> Next<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"ttrade-section\" id=\"liquidity-pool\"\n  data-bg='[{\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/SnakeTTT.mp4\"}]'\n  data-dock='[\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/SNAKE.png\"},\n    {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/ALLOVER-1.png\"}\n  ]'\n>\n  <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n  <div class=\"ttrade-overlay\"><\/div>\n\n  <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n    <div class=\"dockSheen\"><\/div>\n    <img class=\"dockLayer\" data-layer=\"1\" alt=\"\" \/>\n    <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n    <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n  <\/div>\n\n  <div class=\"ttrade-content\">\n    <span class=\"drift2\"><p class=\"ttrade-kicker\">\/\/ Mode<\/p><\/span>\n    <h2>Liquidity Pool<\/h2>\n    <span class=\"drift2\"><p>A shared structure that delivers depth and execution.<\/p><\/span>\n    <div class=\"ttrade-btnRow\">\n      <a class=\"ttrade-btn\" href=\"#hero\"><span class=\"ttrade-dot\"><\/span> Back to top<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(() => {\n  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const clamp = (v,a,b)=>Math.max(a,Math.min(b,v));\n\n  document.querySelectorAll('a[href^=\"#\"]').forEach(a=>{\n    a.addEventListener('click', (ev)=>{\n      const id = a.getAttribute('href');\n      const el = document.querySelector(id);\n      if(!el) return;\n      ev.preventDefault();\n      el.scrollIntoView({behavior: prefersReduced ? 'auto' : 'smooth', block:'start'});\n      history.replaceState(null,'',id);\n    });\n  });\n\n  const navEl = document.querySelector('.orbitNav');\n  const setNavHeightVar = () => {\n    if(navEl) {\n      const h = Math.ceil(navEl.getBoundingClientRect().height);\n      document.documentElement.style.setProperty('--navH', `${h + 14}px`);\n    }\n  };\n  window.addEventListener('resize', setNavHeightVar, { passive:true });\n  setNavHeightVar();\n\n  const sections = Array.from(document.querySelectorAll('.ttrade-section'));\n  const navLinks = Array.from(document.querySelectorAll('.orbitNav a[data-nav]'));\n\n  const safeParse = (json, fallback=[]) => {\n    try { return JSON.parse(json || '[]'); } catch { return fallback; }\n  };\n\n  const setNavActive = (id) => {\n    navLinks.forEach(a => a.classList.toggle('isActive', a.dataset.nav === id));\n  };\n\n  const setup = (sec) => {\n    const bgV = sec.querySelector('video.bgVideo');\n    const dock = sec.querySelector('.mediaDock');\n    const sheen = dock ? sec.querySelector('.dockSheen') : null;\n    const img1 = dock ? sec.querySelector('.dockLayer[data-layer=\"1\"]') : null;\n    const img2 = dock ? sec.querySelector('.dockLayer[data-layer=\"2\"]') : null;\n    const vid  = dock ? sec.querySelector('.dockLayer[data-layer=\"v\"]') : null;\n\n    const bgList   = safeParse(sec.dataset.bg);\n    const dockList = safeParse(sec.dataset.dock);\n\n    return {\n      sec, bgV, dock, sheen, img1, img2, vid,\n      bgList, bgIndex:0, dockList, dockIndex:0, dockTimer:null, initialTimer:null,\n      showing:1, active:false\n    };\n  };\n\n  const states = sections.map(setup);\n\n  const applyBG = (st, item) => {\n    if (!item || !st.bgV) return;\n    if (item.type === 'video'){\n      if (st.bgV.src !== item.src) st.bgV.src = item.src;\n      st.bgV.play().catch(()=>{});\n    }\n  };\n\n  const applyDock = (st, item) => {\n    if (!item || !st.dock) return;\n    const stopVid = () => {\n      st.vid.pause();\n      st.vid.currentTime = 0;\n      st.vid.removeAttribute('src');\n      st.vid.load();\n      st.vid.classList.remove('isOn');\n      st.vid.classList.remove('isOut');\n    };\n\n    if (item.type === 'video'){\n      st.img1.classList.remove('isOn', 'isOut');\n      st.img2.classList.remove('isOn', 'isOut');\n      st.vid.src = item.src;\n      st.vid.classList.remove('isOn', 'isOut');\n      void st.vid.offsetWidth; \n      st.vid.classList.add('isOn');\n      st.vid.play().catch(()=>{});\n      return;\n    }\n\n    stopVid();\n    st.showing = (st.showing === 1) ? 2 : 1;\n    const on  = (st.showing === 1) ? st.img1 : st.img2;\n    const off = (st.showing === 1) ? st.img2 : st.img1;\n\n    \/* \u2705 CORRECTION FLICKER : Application fluide des classes isOut et isOn *\/\n    off.classList.remove('isOn');\n    off.classList.add('isOut');\n\n    on.src = item.src;\n    on.classList.remove('isOut');\n    void on.offsetWidth; \/* Force le navigateur \u00e0 enregistrer la position de d\u00e9part avant la transition *\/\n    on.classList.add('isOn');\n  };\n\n  const advanceDock = (st) => {\n    if (!st.active || !st.dock || st.dockList.length <= 1) return;\n    st.dockIndex = (st.dockIndex + 1) % st.dockList.length;\n    applyDock(st, st.dockList[st.dockIndex]);\n  };\n\n  const stopTimers = (st) => {\n    if (st.dockTimer) { clearInterval(st.dockTimer); st.dockTimer = null; }\n    if (st.initialTimer) { clearTimeout(st.initialTimer); st.initialTimer = null; }\n  };\n\n  const startDockPlaylist = (st) => {\n    if (st.dockTimer) clearInterval(st.dockTimer);\n    if (!prefersReduced && st.dock && st.dockList.length > 1){\n      st.dockTimer = setInterval(() => advanceDock(st), 4000); \n    }\n  };\n\n  const activate = (st) => {\n    st.active = true;\n    st.sec.classList.add('bgActive');\n    applyBG(st, st.bgList[st.bgIndex] || st.bgList[0]);\n    \n    if (st.dock && st.dockList.length){\n      st.dockIndex = 0; \n      if (st.img1) st.img1.classList.remove('isOn', 'isOut');\n      if (st.img2) st.img2.classList.remove('isOn', 'isOut');\n      \n      st.initialTimer = setTimeout(() => {\n        if(st.active) {\n          applyDock(st, st.dockList[0]);\n          startDockPlaylist(st);\n        }\n      }, 800);\n    }\n  };\n\n  const deactivate = (st) => {\n    st.active = false;\n    st.sec.classList.remove('bgActive');\n    stopTimers(st);\n    if (st.bgV){\n      setTimeout(() => { if (!st.active) st.bgV.pause(); }, 1200); \n    }\n    if (st.vid){\n      st.vid.pause();\n      st.vid.currentTime = 0;\n    }\n  };\n\n  const revealObs = new IntersectionObserver((entries)=>{\n    entries.forEach(e=>{\n      if (e.isIntersecting){ e.target.classList.add('isOn'); }\n    });\n  }, { threshold: 0.18 });\n\n  sections.forEach(s=>revealObs.observe(s));\n\n  const activeObs = new IntersectionObserver((entries) => {\n    entries.forEach(e => {\n      const st = states.find(s => s.sec === e.target);\n      if (!st) return;\n\n      if (e.isIntersecting && e.intersectionRatio >= 0.58) {\n        states.forEach(s => { if (s !== st) deactivate(s); });\n        activate(st);\n        setNavActive(st.sec.id);\n      }\n    });\n  }, { threshold: [0.35, 0.58, 0.78] });\n\n  sections.forEach(s => activeObs.observe(s));\n\n  if(states.length > 0) {\n    activate(states[0]);\n    setNavActive(states[0].sec.id);\n  }\n\n  const root = document.documentElement;\n  const pxBg    = parseFloat(getComputedStyle(root).getPropertyValue('--pxBg'))    || 0.018;\n  const pxDockY = parseFloat(getComputedStyle(root).getPropertyValue('--pxDockY')) || 0.060;\n  const pxDockX = parseFloat(getComputedStyle(root).getPropertyValue('--pxDockX')) || 0.012;\n  const pxText  = parseFloat(getComputedStyle(root).getPropertyValue('--pxText'))  || 0.080;\n  const pxText2 = parseFloat(getComputedStyle(root).getPropertyValue('--pxText2')) || 0.045;\n\n  let raf=null;\n  const parallaxTick=()=>{\n    raf=null;\n    const vh = window.innerHeight;\n\n    for (const st of states){\n      const r = st.sec.getBoundingClientRect();\n      const center = r.top + r.height * 0.5;\n      const t = (center - vh * 0.5) \/ (vh * 0.5);\n      const prog = clamp(t, -1, 1);\n\n      if (st.bgV){\n        const y = prog * vh * pxBg;\n        st.bgV.style.transform = `translate3d(0, ${y}px, 0) scale(1.05)`;\n      }\n\n      const content = st.sec.querySelector('.ttrade-content');\n      if (content){\n        const y3 = prog * vh * pxText;\n        content.style.transform = `translate3d(0, ${y3}px, 0)`;\n      }\n\n      const drift2 = st.sec.querySelectorAll('.drift2');\n      if (drift2 && drift2.length){\n        const y4 = prog * vh * pxText2;\n        drift2.forEach(el => el.style.transform = `translate3d(0, ${y4}px, 0)`);\n      }\n\n      if (st.dock){\n        const baseY = prog * vh * pxDockY;\n        const baseX = prog * vh * pxDockX;\n        st.dock.style.setProperty('--pxX', `${baseX}px`);\n        st.dock.style.setProperty('--pxY', `${baseY}px`);\n      }\n    }\n  };\n\n  const requestParallax=()=>{\n    if (prefersReduced) return;\n    if(!raf) raf=requestAnimationFrame(parallaxTick);\n  };\n  window.addEventListener('scroll', requestParallax, {passive:true});\n  window.addEventListener('resize', requestParallax, {passive:true});\n  requestParallax();\n\n  const followPx = () => parseFloat(getComputedStyle(root).getPropertyValue('--dockFollow')) || 6;\n  const tiltXMax = () => parseFloat(getComputedStyle(root).getPropertyValue('--dockTiltX')) || 2.2;\n  const tiltYMax = () => parseFloat(getComputedStyle(root).getPropertyValue('--dockTiltY')) || 3.2;\n  const smoothing = () => parseFloat(getComputedStyle(root).getPropertyValue('--mouseSmoothing')) || 0.08;\n\n  function composeDockTransform(dock, mx, my){\n    const pxX = dock.style.getPropertyValue('--pxX') || '0px';\n    const pxY = dock.style.getPropertyValue('--pxY') || '0px';\n    const f = followPx();\n    const rx = (-my * tiltXMax()).toFixed(2);\n    const ry = ( mx * tiltYMax()).toFixed(2);\n    dock.style.transform = `translate3d(calc(${pxX} + ${mx*f}px), calc(${pxY} + ${my*f}px), 0) rotateX(${rx}deg) rotateY(${ry}deg)`;\n  }\n\n  function setDockTarget(dock, clientX, clientY){\n    const r = dock.getBoundingClientRect();\n    const x = (clientX - r.left) \/ Math.max(1, r.width);\n    const y = (clientY - r.top) \/ Math.max(1, r.height);\n    const tx = clamp(x*2-1, -1, 1);\n    const ty = clamp(y*2-1, -1, 1);\n    dock.style.setProperty('--tx', tx.toFixed(4));\n    dock.style.setProperty('--ty', ty.toFixed(4));\n  }\n\n  states.forEach(st=>{\n    if (!st.dock) return;\n    const dock = st.dock;\n\n    dock.style.setProperty('--mx', '0');\n    dock.style.setProperty('--my', '0');\n    dock.style.setProperty('--tx', '0');\n    dock.style.setProperty('--ty', '0');\n\n    const onEnter = () => dock.classList.add('isHover');\n    const onLeave = () => {\n      dock.classList.remove('isHover');\n      dock.style.setProperty('--tx', '0');\n      dock.style.setProperty('--ty', '0');\n    };\n\n    dock.addEventListener('click', (e) => {\n      e.preventDefault();\n      advanceDock(st);\n      startDockPlaylist(st); \n    });\n\n    dock.addEventListener('pointerenter', onEnter);\n    dock.addEventListener('pointerleave', onLeave);\n    dock.addEventListener('pointermove', (e)=>{\n      if (e.pointerType === 'touch' && e.buttons === 0) return;\n      setDockTarget(dock, e.clientX, e.clientY);\n    }, {passive:true});\n\n    dock.addEventListener('pointerdown', (e)=>{\n      dock.setPointerCapture?.(e.pointerId);\n      onEnter();\n      setDockTarget(dock, e.clientX, e.clientY);\n    }, {passive:true});\n    dock.addEventListener('pointerup', onLeave, {passive:true});\n    dock.addEventListener('pointercancel', onLeave, {passive:true});\n  });\n\n  let rafMouse = null;\n  const mouseTick = () => {\n    rafMouse = null;\n    const s = smoothing();\n\n    for (const st of states){\n      const dock = st.dock;\n      if (!dock) continue;\n\n      const mx = parseFloat(dock.style.getPropertyValue('--mx')) || 0;\n      const my = parseFloat(dock.style.getPropertyValue('--my')) || 0;\n      const tx = parseFloat(dock.style.getPropertyValue('--tx')) || 0;\n      const ty = parseFloat(dock.style.getPropertyValue('--ty')) || 0;\n\n      const nmx = mx + (tx - mx) * s;\n      const nmy = my + (ty - my) * s;\n\n      dock.style.setProperty('--mx', nmx.toFixed(4));\n      dock.style.setProperty('--my', nmy.toFixed(4));\n\n      composeDockTransform(dock, nmx, nmy);\n    }\n    rafMouse = requestAnimationFrame(mouseTick);\n  };\n\n  if (!prefersReduced) rafMouse = requestAnimationFrame(mouseTick);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>INTRO BULL BEAR VOL POOL \/\/ Introducing TTRADE UNIVERSE Built For The EveryDay Traders ENTER \/\/ Mode Bull Upward structure \/\/ Controlled force Next \/\/ Mode Bear Downward pressure \/\/ Calculated control. Next \/\/ Mode Volatile Unstable conditions \/\/ Limited Times Offer Next \/\/ Mode Liquidity Pool A shared structure that delivers depth and execution. [&#8230;]\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank-landingpage.php","meta":{"footnotes":""},"class_list":["post-207","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":4,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/207\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}