Mise à jour des pages d'accueil

frontend/src/pages/Login.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
 import { api } from '../api.js';
+import AuthBgCol from '../components/AuthBgCol.jsx';
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 const DEVICE_KEY = 'cl_device_token';
@@ -12,25 +13,6 @@ function fmtCountdown(sec) {
   return `${m}:${s}`;
 }
 
-// ── Colonne image gauche (partagée) ───────────────────────────────────────
-function BgCol({ appInfo }) {
-  return (
-    <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>
-  );
-}
-
 // ── Header logo (colonne droite) ──────────────────────────────────────────
 function AppHeader({ appInfo }) {
   return (
@@ -188,7 +170,7 @@ export default function Login() {
 
   return (
     <div style={{ display: 'flex', minHeight: '100dvh' }}>
-      <BgCol appInfo={appInfo} />
+      <AuthBgCol appInfo={appInfo} />
 
       <div style={{
         flex: '1 1 50%', display: 'flex', flexDirection: 'column',
@@ -381,9 +363,6 @@ export default function Login() {
         </div>
       </div>
 
-      <style>{`
-        @media (min-width: 768px) { .login-bg-col { display: block !important; } }
-      `}</style>
     </div>
   );
 }