app/src/components/Sidenote.astro

---

---

<div class="sidenote-container">
  <aside class="sidenote">
    <slot />
  </aside>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const containers = document.querySelectorAll(".sidenote-container");

    containers.forEach((container) => {
      // Find the previous element (sibling just before)
      const previousElement = container.previousElementSibling;

      if (previousElement) {
        // Make the sidenote container relative to the previous element
        previousElement.style.position = "relative";

        // Move the sidenote container as child of the previous element
        previousElement.appendChild(container);

        // Style the container so it positions correctly
        container.style.position = "absolute";
        container.style.top = "0";
        container.style.right = "-292px"; // 260px width + 32px gap
        container.style.width = "260px";

        // Display the container with a fade-in
        container.style.display = "block";
        container.style.opacity = "0";

        // Fade-in with transition
        setTimeout(() => {
          container.style.opacity = "1";
        }, 10);
      }
    });
  });
</script>

<style is:global>
  .sidenote-container {
    /* Caché par défaut, sera affiché par JS */
    display: none;
    margin: 0 ;
    /* Transition for fade-in */
    transition: opacity 0.3s ease-in-out;
  }

  .sidenote {
    border-radius: 8px;
    padding: 0 30px;
    font-size: 0.9rem;
    color: var(--muted-color);
    margin: 0;
  }

  @media (--bp-content-collapse) {
    .sidenote-container {
      position: static !important;
      width: auto !important;
      right: auto !important;
      top: auto !important;
      margin-top: 8px;
      /* Affichage normal sur mobile */
      display: block !important;
      opacity: 1 !important;
    }

    .sidenote {
      padding: 0;
    }
  }
</style>