From bd6380b7aacddc8604e8c373f7c680fd2f0b92f5 Mon Sep 17 00:00:00 2001
From: streaper2 <streaper2@gmail.com>
Date: Tue, 12 May 2026 20:18:43 +0200
Subject: [PATCH] correction responsive mobile

---
 admin/next.config.ts            |  1 +
 app/actualites/[id]/page.tsx    | 30 ++++++++++++++++++------------
 app/afrolife/[id]/page.tsx      | 33 ++++++++++++++++++---------------
 components/BlogShareButtons.tsx |  7 ++++---
 next.config.mjs                 |  3 ++-
 5 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/admin/next.config.ts b/admin/next.config.ts
index bfd09a1..e643f2d 100644
--- a/admin/next.config.ts
+++ b/admin/next.config.ts
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 import path from "path";
 const nextConfig: NextConfig = {
   output: 'standalone',
+  allowedDevOrigins: ['10.0.2.2'],
 
   // 1. On ignore les erreurs de type et ESLint pour que le build 
   // de production ne plante pas à cause des imports Prisma
diff --git a/app/actualites/[id]/page.tsx b/app/actualites/[id]/page.tsx
index f9a51bc..a0ce78a 100644
--- a/app/actualites/[id]/page.tsx
+++ b/app/actualites/[id]/page.tsx
@@ -101,24 +101,24 @@ export default async function BlogPostPage({ params }: Props) {
   }
 
   return (
-    <article className="bg-gray-50 min-h-screen py-12 relative">
+    <article className="bg-white sm:bg-gray-50 min-h-screen py-0 sm:py-12 relative">
       {/* Injection du style de force pour le texte */}
       <style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
 
-      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex gap-4 lg:gap-8 justify-center relative">
+      <div className="max-w-5xl mx-auto px-0 sm:px-6 lg:px-8 flex gap-4 lg:gap-8 justify-center relative">
         {/* Conteneur principal de l'article */}
-        <div className="w-[calc(100%-3rem)] sm:w-full max-w-3xl relative">
+        <div className="w-full max-w-3xl relative">
 
           {/* Navigation */}
-          <div className="mb-8">
+          <div className="mb-4 sm:mb-8 px-4 sm:px-0 pt-4 sm:pt-0">
             <Link href="/actualites" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
               <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
             </Link>
           </div>
 
-          <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative z-10">
-            {/* Image d'en-tête */}
-          <div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden shadow-md">
+          <div className="bg-white sm:rounded-xl shadow-none sm:shadow-sm sm:p-10 border-none sm:border sm:border-gray-100 relative z-10">
+            {/* Image d'en-tête en pleine largeur sur mobile */}
+          <div className="w-full h-64 md:h-80 relative mb-6 sm:mb-8 sm:rounded-lg overflow-hidden shadow-none sm:shadow-md">
             <LightboxImage 
               src={post.imageUrl} 
               alt={post.title} 
@@ -128,7 +128,7 @@ export default async function BlogPostPage({ params }: Props) {
           </div>
 
           {/* Header de l'article */}
-          <header className="mb-8 border-b border-gray-100 pb-8">
+          <header className="mb-6 sm:mb-8 border-b border-gray-100 pb-6 sm:pb-8 px-4 sm:px-0">
             <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
               <span className="flex items-center">
                 <User className="w-4 h-4 mr-1 text-brand-500" />
@@ -156,7 +156,7 @@ export default async function BlogPostPage({ params }: Props) {
           </header>
 
           {/* Contenu de l'article */}
-          <div className="prose prose-lg prose-orange max-w-none text-gray-600">
+          <div className="prose sm:prose-lg prose-orange max-w-none text-gray-600 px-4 sm:px-0">
             {/* Résumé / Lead */}
             <p className="lead text-xl text-gray-500 font-serif italic mb-6 border-b border-gray-100 pb-6">
               {post.excerpt}
@@ -172,7 +172,7 @@ export default async function BlogPostPage({ params }: Props) {
 
           {/* Sources Section */}
           {Array.isArray(post.sources) && post.sources.length > 0 && (
-            <div className="mt-12 p-6 bg-gray-50 rounded-xl border border-gray-100">
+            <div className="mt-8 sm:mt-12 p-4 sm:p-6 bg-gray-50 sm:rounded-xl border-t sm:border border-gray-100 mx-4 sm:mx-0">
               <h3 className="text-sm font-bold uppercase tracking-wider text-gray-400 mb-4 flex items-center gap-2">
                 <Share2 className="w-4 h-4 text-brand-500" />
                 Sources & Références
@@ -196,8 +196,14 @@ export default async function BlogPostPage({ params }: Props) {
             </div>
           )}
 
+          {/* Partage sur mobile */}
+          <div className="mt-8 pt-6 border-t border-gray-100 block sm:hidden px-4">
+            <p className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-4 text-center">Partager cet article</p>
+            <BlogShareButtons title={post.title} layout="horizontal" />
+          </div>
+
           {/* Partage / Footer */}
-          <div className="mt-12 pt-8 border-t border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-4">
+          <div className="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-4 px-4 sm:px-0">
             <p className="text-gray-500 font-medium">Vous avez aimé cet article ?</p>
             <Link 
               href="/actualites" 
@@ -211,7 +217,7 @@ export default async function BlogPostPage({ params }: Props) {
         </div>
 
         {/* Sidebar flottante verticale à droite (suit l'article et s'arrête à la fin) */}
-        <div className="w-10 shrink-0 relative">
+        <div className="hidden sm:block w-10 shrink-0 relative">
           <div className="sticky top-32 z-50">
             <BlogShareButtons title={post.title} />
           </div>
diff --git a/app/afrolife/[id]/page.tsx b/app/afrolife/[id]/page.tsx
index 3522c88..d1366e2 100644
--- a/app/afrolife/[id]/page.tsx
+++ b/app/afrolife/[id]/page.tsx
@@ -6,6 +6,7 @@ import { sanitizeHTML } from '../../../lib/sanitize';
 import { prisma } from '../../../lib/prisma';
 import { InterviewType } from '@prisma/client';
 import LightboxImage from '@/components/LightboxImage';
+import BlogShareButtons from '../../../components/BlogShareButtons';
 
 import { Metadata } from 'next';
 
@@ -91,13 +92,15 @@ export default async function AfroLifeDetailPage({ params }: Props) {
 
     return (
         <div className="bg-white min-h-screen">
-            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-                <Link href="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 mb-8 transition-colors">
-                    <ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
-                </Link>
+            <div className="max-w-4xl mx-auto px-0 sm:px-6 lg:px-8 py-0 sm:py-12">
+                <div className="pt-4 sm:pt-0 px-4 sm:px-0 mb-6 sm:mb-8">
+                    <Link href="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 transition-colors">
+                        <ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
+                    </Link>
+                </div>
 
                 {/* Header Info */}
-                <div className="text-center mb-10">
+                <div className="text-center mb-8 sm:mb-10 px-4 sm:px-0">
                     <div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-bold uppercase tracking-wider mb-4">
                         {isEvent ? 'Événement' : (isVideo ? 'Interview Vidéo' : 'Grand Entretien')}
                     </div>
@@ -143,9 +146,9 @@ export default async function AfroLifeDetailPage({ params }: Props) {
                     </div>
                 </div>
 
-                {/* Main Content Area */}
+                {/* Main Content Area en pleine largeur sur mobile */}
                 {isVideo ? (
-                    <div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
+                    <div className="bg-black rounded-none sm:rounded-xl overflow-hidden shadow-none sm:shadow-2xl aspect-w-16 aspect-h-9 mb-8 sm:mb-10 w-full">
                         {(interview as any).videoUrl ? (
                             <iframe
                                 src={getEmbedUrl((interview as any).videoUrl) || ''}
@@ -161,7 +164,7 @@ export default async function AfroLifeDetailPage({ params }: Props) {
                         )}
                     </div>
                 ) : (
-                    <div className="relative h-64 md:h-96 rounded-xl overflow-hidden shadow-lg mb-10">
+                    <div className="relative h-64 md:h-96 rounded-none sm:rounded-xl overflow-hidden shadow-none sm:shadow-lg mb-8 sm:mb-10 w-full">
                         <LightboxImage 
                             src={item!.thumbnailUrl} 
                             alt={item!.title} 
@@ -172,7 +175,7 @@ export default async function AfroLifeDetailPage({ params }: Props) {
                 )}
 
                 {/* Description / Article Content / Event Content */}
-                <div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600">
+                <div className="prose sm:prose-lg prose-orange max-w-none mx-auto text-gray-600 px-4 sm:px-0">
                     {isEvent ? (
                         <div dangerouslySetInnerHTML={{ __html: sanitizeHTML((event as any).description) }} />
                     ) : (
@@ -188,7 +191,7 @@ export default async function AfroLifeDetailPage({ params }: Props) {
 
                 {/* Event Link Action */}
                 {isEvent && (event as any).link && (
-                    <div className="mt-10 text-center">
+                    <div className="mt-10 text-center px-4 sm:px-0">
                         <Link 
                             href={(event as any).link} 
                             target="_blank" 
@@ -199,12 +202,12 @@ export default async function AfroLifeDetailPage({ params }: Props) {
                     </div>
                 )}
 
-                {/* Footer Actions */}
-                <div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
-                    <button className="flex items-center px-6 py-3 rounded-full bg-brand-50 text-brand-700 font-medium hover:bg-brand-100 transition-colors">
-                        <Share2 className="w-5 h-5 mr-2" />
+                {/* Footer Actions / Partage */}
+                <div className="mt-10 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-100 px-4 sm:px-0 pb-8 sm:pb-0">
+                    <p className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-4 text-center">
                         Partager {isEvent ? "cet événement" : "cette interview"}
-                    </button>
+                    </p>
+                    <BlogShareButtons title={item!.title} layout="horizontal" />
                 </div>
             </div>
         </div>
diff --git a/components/BlogShareButtons.tsx b/components/BlogShareButtons.tsx
index 5da7340..6779ea7 100644
--- a/components/BlogShareButtons.tsx
+++ b/components/BlogShareButtons.tsx
@@ -6,9 +6,10 @@ import toast from 'react-hot-toast';
 
 interface Props {
   title: string;
+  layout?: 'vertical' | 'horizontal';
 }
 
-export default function BlogShareButtons({ title }: Props) {
+export default function BlogShareButtons({ title, layout = 'vertical' }: Props) {
   const [copied, setCopied] = useState(false);
   const [url, setUrl] = useState('');
 
@@ -32,12 +33,12 @@ export default function BlogShareButtons({ title }: Props) {
   if (!url) return null;
 
   return (
-    <div className="flex flex-col gap-3 z-50">
+    <div className={`flex ${layout === 'horizontal' ? 'flex-row gap-4 justify-center flex-wrap' : 'flex-col gap-3'} z-50`}>
       <a 
         href={shareLinks.facebook}
         target="_blank"
         rel="noopener noreferrer"
-        className="w-10 h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        className="w-10 h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
         title="Partager sur Facebook"
       >
         <Facebook className="w-5 h-5" />
diff --git a/next.config.mjs b/next.config.mjs
index b60e230..d70c12c 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -9,6 +9,7 @@ const nextConfig = {
     reactStrictMode: true,
     //output: 'standalone',
     poweredByHeader: false,
+    allowedDevOrigins: ['10.0.2.2'],
     turbopack: {
         root: __dirname,
     },
@@ -28,7 +29,7 @@ const nextConfig = {
                     },
                     {
                         key: 'Content-Security-Policy',
-                        value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https:; font-src 'self' data:; media-src 'self' https:; connect-src 'self' wss: https:; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; object-src 'none';",
+                        value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https: http:; font-src 'self' data:; media-src 'self' https: http:; connect-src 'self' ws: wss: https: http:; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; object-src 'none';",
                     },
                     {
                         key: 'X-Content-Type-Options',