Mise à jour des pages d'accueil

frontend/src/pages/ForgotPassword.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import AuthBgCol from '../components/AuthBgCol.jsx';
 
 export default function ForgotPassword() {
   const [email,   setEmail]   = useState('');
@@ -35,39 +36,8 @@ export default function ForgotPassword() {
   return (
     <div style={{ display: 'flex', minHeight: '100dvh' }}>
 
-      {/* ── Colonne gauche — image ───────────────────────────── */}
-      <div className="login-bg-col" style={{
-        flex: '1 1 50%',
-        display: 'none',
-        position: 'relative',
-        overflow: 'hidden',
-        background: '#0d0d0d',
-      }}>
-        <img
-          src="/login-bg.jpg"
-          alt=""
-          aria-hidden="true"
-          onError={e => { e.target.style.display = 'none'; }}
-          style={{
-            position: 'absolute', inset: 0,
-            width: '100%', height: '100%',
-            objectFit: 'cover', opacity: 0.85,
-          }}
-        />
-        <div style={{
-          position: 'absolute', bottom: 40, left: 40,
-          color: '#fff',
-          display: 'flex', alignItems: 'center', gap: 12,
-        }}>
-          {appInfo.iconUrl && (
-            <img src={appInfo.iconUrl} alt="" width={36} height={36}
-                 style={{ borderRadius: 8, flexShrink: 0 }} />
-          )}
-          <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.3px' }}>
-            {appInfo.appName}
-          </span>
-        </div>
-      </div>
+      <AuthBgCol appInfo={appInfo} />
+
 
       {/* ── Colonne droite — formulaire ──────────────────────── */}
       <div style={{
@@ -212,12 +182,6 @@ export default function ForgotPassword() {
 
         </div>
       </div>
-
-      <style>{`
-        @media (min-width: 768px) {
-          .login-bg-col { display: block !important; }
-        }
-      `}</style>
     </div>
   );
 }