diff --git a/resources/js/schema-bullet-points.js b/resources/js/schema-bullet-points.js
index b92893d..ee5b2c4 100644
--- a/resources/js/schema-bullet-points.js
+++ b/resources/js/schema-bullet-points.js
@@ -1,65 +1,73 @@
-export default function SchemaBulletPointsInit() {
-  const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
-  if (!focusBulletPoints) return;
+function initBullet(focusPoint) {
+  const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
+  const focusPointPosition = {
+    x: focusPoint.getAttribute('data-postion-x'),
+    y: focusPoint.getAttribute('data-postion-y'),
+  };
 
-  function initBullet(focusPoint) {
-    const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
-    const focusPointPosition = {
-      x: focusPoint.getAttribute('data-postion-x'),
-      y: focusPoint.getAttribute('data-postion-y'),
-    };
+  const focusPointPopupContainer = document.createElement('div');
+  focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
 
-    const focusPointPopupContainer = document.createElement('div');
-    focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
+  const focusPointPopupTitle = document.createElement('h4');
+  // focusPointPopupTitle.textContent = focusTitle;
+  focusPointPopupTitle.innerHTML = focusTitle;
+  focusPointPopupTitle.className = 'tooltip-title';
+  focusPointPopupContainer.style.left = `${focusPointPosition.x}%`;
+  focusPointPopupContainer.style.top = `${focusPointPosition.y}%`;
+  focusPointPopupContainer.appendChild(focusPointPopupTitle);
 
-    const focusPointPopupTitle = document.createElement('h4');
-    // focusPointPopupTitle.textContent = focusTitle;
-    focusPointPopupTitle.innerHTML = focusTitle;
-    focusPointPopupTitle.className = 'tooltip-title';
-    focusPointPopupContainer.style.left = `${focusPointPosition.x}%`;
-    focusPointPopupContainer.style.top = `${focusPointPosition.y}%`;
-    focusPointPopupContainer.appendChild(focusPointPopupTitle);
+  // console.log(focusPointPosition);
 
-    // console.log(focusPointPosition);
+  // focusPointPopupContainer.style.left = `${focusPoint.getAttribute}px`;
+  // focusPoint.appendChild(focusPointPopupContainer);
+  focusPoint.parentNode.insertBefore(focusPointPopupContainer, focusPoint.nextSibling);
 
-    // focusPointPopupContainer.style.left = `${focusPoint.getAttribute}px`;
-    // focusPoint.appendChild(focusPointPopupContainer);
-    focusPoint.parentNode.insertBefore(focusPointPopupContainer, focusPoint.nextSibling);
+  focusPoint.setAttribute('data-hovered', '');
+  // focusPoint.style.zIndex = 1;
+  // focusPointPopupContainer.style.zIndex = 99;
+}
+function getCurrentPos(entry) {
+  return parseInt(getComputedStyle(entry.target, null).getPropertyValue('left'));
+}
 
-    focusPoint.setAttribute('data-hovered', '');
-    // focusPoint.style.zIndex = 1;
-    // focusPointPopupContainer.style.zIndex = 99;
-  }
-  function handleVisibility(focusPoint) {
-    // console.log(focusPoint);
-  }
-  // Register IntersectionObserver
+async function observeBullets(focusBulletPoints) {
   const bulletsObserver = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
-      // Check aspect ratio to be sure the element is visible
-      const aspect = entry.intersectionRatio > 0;
+      const margin = 10;
 
-      if (entry.isIntersecting) {
-        // console.log(entry.target);
-        // console.log(entry.intersectionRatio);
-        // Add 'active' class if observation target is inside viewport
-        // entry.target.classList.add('active');
-        // const blockId = entry.target.getAttribute('id');
-        // const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
-        // handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
-      } else {
-        // Remove 'active' class otherwise
-        // entry.target.classList.remove('active');
+      if (!entry.isIntersecting) {
+        return;
+      }
+      // DEPASSE À GAUCHE
+      if (entry.boundingClientRect.x < 0) {
+        const currentPos = getCurrentPos(entry);
+        const missingSpace = Math.abs(entry.boundingClientRect.x);
+        entry.target.style.left = `${currentPos + missingSpace + margin}px`;
+        entry.target.style.setProperty('--bullet-x-position', '15%');
+      }
+      // DEPASSE À DROITE
+      if (entry.boundingClientRect.x + entry.boundingClientRect.width > window.innerWidth) {
+        const currentPos = getCurrentPos(entry);
+        const difference = entry.boundingClientRect.width - entry.intersectionRect.width;
+        entry.target.style.left = `${currentPos - difference - margin}px`;
+        entry.target.style.setProperty('--bullet-x-position', `85% `);
       }
     });
   });
 
-  focusBulletPoints.forEach((focusPoint) => {
-    const focusPointsContainer = focusPoint.parentElement;
-    initBullet(focusPoint);
-    const focusPointTooltipContainer = focusPoint.querySelector(
-      '.homegrade-blocks-focus-point-bullet__tooltip-container'
-    );
-    // bulletsObserver.observe(focusPointTooltipContainer);
+  focusBulletPoints.forEach((focusBullet) => {
+    const bulletExplanationSibling = focusBullet.nextElementSibling;
+    console.log(bulletExplanationSibling);
+    bulletsObserver.observe(bulletExplanationSibling);
   });
 }
+
+export default function SchemaBulletPointsInit() {
+  const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
+  if (!focusBulletPoints) return;
+
+  focusBulletPoints.forEach((focusPoint) => {
+    initBullet(focusPoint);
+  });
+  observeBullets(focusBulletPoints);
+}