Connexion

Accédez à votre espace de gestion

Adresse email

Mot de passe

Besoin d'aide ?

Contactez votre administrateur système

/* Gradient TransOb amélioré */ .gradient-bg { background: linear-gradient(135deg, #B91C2C 0%, #991B1B 50%, #7F1D1D 100%); position: relative; overflow: hidden; } .gradient-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0,0,0,0.1) 0%, transparent 50%); pointer-events: none; } /* Animations professionnelles */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes floatCircle { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(10px, -10px); } 50% { transform: translate(-10px, 10px); } 75% { transform: translate(-15px, -5px); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* Logo Animation Container */ .logo-container { position: relative; animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .logo-shine { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 40px rgba(185, 28, 44, 0.3); } .logo-shine::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); animation: shimmer 3s infinite; } .logo-float { animation: float 6s ease-in-out infinite; } /* Cercles flottants décoratifs */ .floating-circles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 1; } .circle { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: floatCircle 20s infinite ease-in-out; } .circle-1 { width: 300px; height: 300px; top: -100px; right: -50px; animation-delay: 0s; } .circle-2 { width: 200px; height: 200px; bottom: -50px; left: -30px; animation-delay: 5s; } .circle-3 { width: 150px; height: 150px; top: 50%; left: 10%; animation-delay: 10s; } /* Card avec glassmorphism amélioré */ .glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .glass-card:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.35); } /* Form inputs avec design moderne */ .input-field { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; } .input-field:focus { border-color: #B91C2C; box-shadow: 0 0 0 4px rgba(185, 28, 44, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); outline: none; } .input-field::placeholder { color: #9CA3AF; font-weight: 400; } /* Bouton professionnel avec gradient */ .btn-primary { background: linear-gradient(135deg, #B91C2C 0%, #DC2626 100%); box-shadow: 0 4px 20px rgba(185, 28, 44, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { background: linear-gradient(135deg, #991B1B 0%, #B91C2C 100%); box-shadow: 0 8px 30px rgba(185, 28, 44, 0.45); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 12px rgba(185, 28, 44, 0.3); } /* Image cards professionnelles */ .image-card { background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; border-radius: 20px; border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .image-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%); z-index: 1; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .image-card:hover::before { background: linear-gradient(180deg, rgba(185,28,44,0.3) 0%, rgba(185,28,44,0.85) 100%); } .image-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 20px 50px rgba(0,0,0,0.35); border-color: rgba(255, 255, 255, 0.4); } .image-card-content { position: relative; z-index: 2; } /* Layout forcé plein écran */ .main-container { width: 100vw; height: 100vh; display: flex; } .left-section { width: 50%; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; position: relative; z-index: 2; } .right-section { width: 50%; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 3rem; background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 50%, #F3F4F6 100%); position: relative; } .right-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 20%, rgba(185,28,44,0.03) 0%, transparent 40%), radial-gradient(circle at 70% 80%, rgba(185,28,44,0.02) 0%, transparent 40%); pointer-events: none; } /* Animations d'entrée */ .animate-fade-in { animation: fadeIn 0.8s ease-out; } .animate-slide-left { animation: slideInLeft 0.6s ease-out; } .animate-slide-right { animation: slideInRight 0.6s ease-out; } .animate-slide-up { animation: slideInUp 0.6s ease-out; } /* Mobile responsive */ @media (max-width: 1023px) { .left-section { display: none; } .right-section { width: 100%; background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%); } } /* Checkbox personnalisé */ .custom-checkbox:checked { background-color: #B91C2C; border-color: #B91C2C; } /* Scrollbar personnalisée */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #B91C2C 0%, #991B1B 100%); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #991B1B 0%, #7F1D1D 100%); }

Transport & Maintenance

Gestion Complète & Inventaire

Gestion Complète

Véhicules, maintenance et inventaire

Stock de Pièces

Suivi en temps réel de votre inventaire

Tableaux de Bord

Statistiques et rapports détaillés