Added optimizations for mobile

components/ConfigurationContent.tsx

@@ -170,6 +170,7 @@ OptionCard.displayName = 'OptionCard';
 export default function ConfigurationContent() {
   const router = useRouter();
   const { showNotification } = useNotification();
+  const [isMobile, setIsMobile] = useState(false);
   const [activeConfigSection, setActiveConfigSection] = useState<'adherents' | 'comptes' | 'roles' | null>('adherents');
   const [options, setOptions] = useState<OptionsByType>({
     situation: [],
@@ -225,6 +226,15 @@ export default function ConfigurationContent() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
   const handleAdd = useCallback(async (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait') => {
     const currentValue = newValue[type]?.trim() || '';
     if (!currentValue) {
@@ -1097,6 +1107,35 @@ export default function ConfigurationContent() {
     );
   };
 
+  // Afficher une modale sur mobile
+  if (isMobile) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+        <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6 md:p-8">
+          <div className="text-center mb-6">
+            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-lblue/10 flex items-center justify-center mx-auto mb-4">
+              <svg className="w-8 h-8 md:w-10 md:h-10 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
+              Configuration sur ordinateur recommandée
+            </h2>
+            <p className="text-sm md:text-base text-gray-600">
+              Pour une meilleure expérience, veuillez utiliser un ordinateur pour accéder à la configuration de la plateforme.
+            </p>
+          </div>
+          <button
+            onClick={() => router.push('/dashboard/parametres')}
+            className="w-full px-4 py-3 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors font-medium text-sm md:text-base"
+          >
+            Retour aux paramètres
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="p-6">
       <div className="mb-6 flex items-center gap-4">