Remplace inline styles

components/4nk/AuthModal.tsx

@@ -57,18 +57,9 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
 >
   {/* Loader affiché tant que l'iframe n'est pas prête */}
   {!isIframeReady && !authSuccess && (
-    <div
+    <div className="flex flex-col items-center justify-center h-96 gap-4">
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        height: "400px",
-        gap: 16,
-      }}
-    >
       <Loader width={40} />
-      <div style={{ fontWeight: 600, fontSize: 18 }}>
+      <div className="font-semibold text-lg">
         Chargement de l'authentification...
       </div>
     </div>
@@ -76,18 +67,8 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
 
   {/* Message de succès */}
   {authSuccess && (
-    <div
+    <div className="flex flex-col items-center justify-center h-96 gap-5 animate-fade-in">
-      style={{
+      <div className="font-semibold text-lg text-green-600">
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        height: "400px",
-        gap: 20,
-        animation: "fadeInSuccess 0.4s ease-out",
-      }}
-    >
-      <div style={{ fontWeight: 600, fontSize: 18, color: "#43a047" }}>
         ✅ Authentification réussie !
       </div>
     </div>
@@ -95,15 +76,7 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
 
   {/* Iframe affichée uniquement si dispo */}
   {!authSuccess && (
-    <div
+    <div className={`${showIframe ? 'flex' : 'hidden'} justify-center items-center w-full min-h-96`}>
-      style={{
-        display: showIframe ? "flex" : "none",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        minHeight: "400px",
-      }}
-    >
       <Iframe iframeUrl={iframeUrl} showIframe={showIframe} />
     </div>
   )}

components/4nk/Iframe.tsx

@@ -17,13 +17,7 @@ function Iframe({ iframeUrl, showIframe = false }: { iframeUrl: string; showIfra
     <iframe
       ref={iframeRef}
       src={iframeUrl}
-      style={{
+      className={`${showIframe ? 'block' : 'hidden'} w-96 h-96 border-none overflow-hidden`}
-        display: showIframe ? 'block' : 'none',
-        width: '400px',
-        height: '400px',
-        border: 'none',
-        overflow: 'hidden'
-      }}
     />
   );
 }

lib/4nk/Loader.tsx

@@ -2,19 +2,11 @@ import { memo } from 'react';
 
 function Loader({ width = 40 }: { width?: number }) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: width }}>
+    <div className="flex items-center justify-center" style={{ width }}>
       <div
-        className='loader'
+        className="animate-spin rounded-full border-4 border-gray-200 border-t-gray-800"
-        style={{
+        style={{ width, height: width }}
-          width,
-          height: width,
-          border: '4px solid #eee',
-          borderTop: '4px solid #333',
-          borderRadius: '50%',
-          animation: 'spin 1s linear infinite',
-        }}
       />
-      <style>{`@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }`}</style>
     </div>
   );
 }

tailwind.config.js

@@ -6,7 +6,17 @@ module.exports = {
       './components/**/*.{js,ts,jsx,tsx}' // tous les composants
     ],
     theme: {
-      extend: {},
+      extend: {
+        animation: {
+          'fade-in': 'fadeIn 0.4s ease-out',
+        },
+        keyframes: {
+          fadeIn: {
+            '0%': { opacity: '0', transform: 'translateY(10px)' },
+            '100%': { opacity: '1', transform: 'translateY(0)' },
+          }
+        }
+      },
     },
     plugins: [],
   }