UI: make floating share buttons stop at the end of the article

app/blog/[id]/page.tsx

@@ -73,10 +73,9 @@ export default async function BlogPostPage({ params }: Props) {
   }
 
   return (
-    <article className="bg-gray-50 min-h-screen py-12 relative">
+    <article className="bg-gray-50 min-h-screen py-12 relative overflow-x-clip">
       {/* Injection du style de force pour le texte */}
       <style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
-      <BlogShareButtons title={post.title} />
 
       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Navigation */}
@@ -86,7 +85,14 @@ export default async function BlogPostPage({ params }: Props) {
           </Link>
         </div>
 
-        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100">
+        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative">
+          
+          {/* Conteneur pour les boutons flottants (s'arrête à la fin de l'article) */}
+          <div className="absolute top-0 bottom-0 right-4 lg:-right-16 pointer-events-none z-50 h-full">
+            <div className="sticky top-auto bottom-4 lg:top-1/2 lg:-translate-y-1/2 lg:bottom-auto pointer-events-auto pt-24 lg:pt-0">
+              <BlogShareButtons title={post.title} />
+            </div>
+          </div>
           {/* Image d'en-tête */}
           <div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
             <img

components/BlogShareButtons.tsx

@@ -32,7 +32,7 @@ export default function BlogShareButtons({ title }: Props) {
   if (!url) return null;
 
   return (
-    <div className="fixed bottom-4 right-4 lg:top-1/2 lg:right-8 lg:-translate-y-1/2 lg:bottom-auto flex flex-col gap-3 z-50">
+    <div className="flex flex-row lg:flex-col gap-3 z-50">
       <a 
         href={shareLinks.facebook}
         target="_blank"