Nexus CRM - Réseau Professionnel Intelligent

Nexus CRM

Réseau Professionnel Intelligent

Réseau Professionnel

Visualisation du Réseau

Disposition

Catégorie

Statut

Options

Labels Liens

Gestion des Contacts

Recherche

Catégorie

Statut

Tableaux par Catégorie

Total des contacts: 0

Contacts par catégorie:

Localisation Géographique

Catégorie

Statut

Actions

Clusters Heatmap Marqueurs Perso Ma Position Recherche

Contacts sur la carte

Marqueurs personnalisés

Statistiques et Analyses

Thème

Détail

Type de graphique

Couleurs

Animation

Mode d'affichage

Documents du Réseau

Recherche

Type de document

Contact

Chronologie des Événements

Type d'événement

Tri

Période

Actions

Galerie Photos du Réseau

Archives et Sauvegardes

Contacts Archivés

Sauvegardes

Nom	Entreprise	Date d'archivage	Actions

Nom de la sauvegarde	Date de création	Taille	Actions

Paramètres et Configuration

Général

Affichage

Intelligence Artificielle

Données

Profil

Nom du réseau

Options générales

Sauvegarde automatique Notifications Analyses automatiques

Thème

Disposition réseau par défaut

Taille des nœuds 50px

Options d'affichage

Afficher les labels Afficher les connexions

Fournisseur IA

Clé API Nécessaire pour utiliser l'assistant IA.

Niveau d'analyse

Options IA

Activer l'IA Analyse automatique Recommandations

Fréquence de sauvegarde

Gestion des données

Nom complet

Poste/Rôle

Biographie

Changer la photo Le stockage dans le navigateur est limité en taille.

Assistant IA

nexus

Blog

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

juillet 20, 2025

:root { --primary-color: #4facfe; --secondary-color: #00f2fe; --accent-color: #ff6b6b; --success-color: #51cf66; --warning-color: #ffd43b; --danger-color: #ff6b6b; --info-color: #74c0fc; --text-color: #2c3e50; --text-muted: #6c757d; --bg-color: #ffffff; --light-bg: #f8f9fa; --dark-bg: #343a40; --border-color: #dee2e6; --shadow: 0 2px 10px rgba(0,0,0,0.1); --shadow-hover: 0 4px 20px rgba(0,0,0,0.15); --cat-lead-color: #ff6b6b; --cat-client-color: #51cf66; --cat-professionnel-color: #4facfe; --cat-personnel-color: #ffd43b; --cat-famille-color: #ff8cc8; --cat-other-color: #868e96; --border-radius: 8px; --transition: all 0.3s ease; } [data-theme="dark"] { --text-color: #ffffff; --text-muted: #adb5bd; --bg-color: #1a1a1a; --light-bg: #2d3748; --dark-bg: #1a202c; --border-color: #4a5568; --shadow: 0 2px 10px rgba(0,0,0,0.3); --shadow-hover: 0 4px 20px rgba(0,0,0,0.4); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.6; transition: var(--transition); } .app-container { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 280px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 20px; overflow-y: auto; box-shadow: var(--shadow); z-index: 100; transition: var(--transition); } .sidebar.collapsed { width: 80px; } .sidebar.collapsed .nav-text { display: none; } .sidebar.collapsed .logo h1 { display: none; } .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .header { background: var(--bg-color); padding: 15px 30px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); z-index: 50; } .content-area { flex: 1; padding: 30px; overflow-y: auto; background: var(--light-bg); } .logo { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); } .logo h1 { font-size: 24px; font-weight: 700; margin-bottom: 5px; } .logo p { font-size: 12px; opacity: 0.8; } .nav-menu { list-style: none; } .nav-item { margin-bottom: 5px; } .nav-link { display: flex; align-items: center; padding: 12px 15px; color: rgba(255,255,255,0.9); text-decoration: none; border-radius: var(--border-radius); transition: var(--transition); cursor: pointer; } .nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.2); color: white; transform: translateX(5px); } .nav-link i { margin-right: 12px; width: 20px; text-align: center; } .sidebar-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); } .header-left { display: flex; align-items: center; gap: 20px; } .header-right { display: flex; align-items: center; gap: 15px; } .search-container { position: relative; } .search-input { padding: 8px 40px 8px 15px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--bg-color); color: var(--text-color); width: 300px; transition: var(--transition); } .search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1); } .search-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; } .btn { padding: 10px 20px; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); background: var(--primary-color); color: white; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-lg { padding: 15px 30px; font-size: 16px; } .btn-primary { background: var(--primary-color); } .btn-secondary { background: var(--text-muted); } .btn-success { background: var(--success-color); } .btn-warning { background: var(--warning-color); color: var(--text-color); } .btn-danger { background: var(--danger-color); } .btn-info { background: var(--info-color); } .btn-outline { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); } .btn-outline:hover { background: var(--primary-color); color: white; } .card { background: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; transition: var(--transition); } .card:hover { box-shadow: var(--shadow-hover); } .card-header { padding: 20px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; font-weight: 600; display: flex; align-items: center; gap: 10px; } .card-body { padding: 20px; position: relative; } .card-footer { padding: 15px 20px; background: var(--light-bg); border-top: 1px solid var(--border-color); } .form-group { margin-bottom: 20px; } .form-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-color); } .form-control { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: var(--bg-color); color: var(--text-color); font-size: 14px; transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1); } .form-control:disabled { background: var(--light-bg); color: var(--text-muted); cursor: not-allowed; } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; backdrop-filter: blur(5px); } .modal.show { display: flex; align-items: center; justify-content: center; } .modal-content { background: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow-hover); max-width: 90vw; max-height: 90vh; overflow-y: auto; animation: modalSlideIn 0.3s ease; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-title { font-size: 18px; font-weight: 600; color: var(--text-color); } .modal-close { background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--transition); } .modal-close:hover { background: var(--light-bg); color: var(--text-color); } .modal-body { padding: 20px; } .modal-footer { padding: 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; } .tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; } .tab { padding: 12px 20px; cursor: pointer; border-bottom: 3px solid transparent; transition: var(--transition); color: var(--text-muted); font-weight: 500; } .tab:hover, .tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } .tab-content { display: none; } .tab-content.active { display: block; } .table-container { overflow-x: auto; border-radius: var(--border-radius); box-shadow: var(--shadow); } table { width: 100%; border-collapse: collapse; background: var(--bg-color); } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); } th { background: var(--light-bg); font-weight: 600; color: var(--text-color); position: sticky; top: 0; z-index: 10; } tr:hover { background: var(--light-bg); } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary-color); } .text-success { color: var(--success-color); } .text-warning { color: var(--warning-color); } .text-danger { color: var(--danger-color); } .bg-primary { background: var(--primary-color); } .bg-success { background: var(--success-color); } .bg-warning { background: var(--warning-color); } .bg-danger { background: var(--danger-color); } .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .d-grid { display: grid; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .m-0 { margin: 0; } .m-1 { margin: 10px; } .m-2 { margin: 20px; } .p-0 { padding: 0; } .p-1 { padding: 10px; } .p-2 { padding: 20px; } .w-100 { width: 100%; } .h-100 { height: 100%; } .fade-in { animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-up { animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .app-container { flex-direction: column; } .sidebar { width: 100%; height: auto; order: 2; } .main-content { order: 1; } .content-area { padding: 15px; } .search-input { width: 200px; } } .theme-switch-wrapper { display: flex; align-items: center; gap: 10px; } .theme-switch { position: relative; display: inline-block; width: 50px; height: 24px; } .theme-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--primary-color); } input:checked + .slider:before { transform: translateX(26px); } .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; } .toast { background: var(--bg-color); border-left: 4px solid var(--primary-color); border-radius: var(--border-radius); box-shadow: var(--shadow-hover); padding: 15px 20px; margin-bottom: 10px; min-width: 300px; animation: toastSlideIn 0.3s ease; opacity: 0; transition: opacity 0.3s ease; } .toast.success { border-left-color: var(--success-color); } .toast.warning { border-left-color: var(--warning-color); } .toast.error { border-left-color: var(--danger-color); } .toast.info { border-left-color: var(--info-color); } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; } [data-theme="dark"] .loading-spinner { border-color: rgba(255,255,255,0.3); border-top-color: #fff; } [data-theme="light"] .loading-spinner { border-color: rgba(0,0,0,0.3); border-top-color: #333; } @keyframes spin { to { transform: rotate(360deg); } } .contact-card { background: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 20px; transition: var(--transition); cursor: pointer; } .contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .contact-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; } .contact-name { font-size: 18px; font-weight: 600; margin-bottom: 5px; color: var(--text-color); } .contact-role { color: var(--text-muted); font-size: 14px; margin-bottom: 10px; } .contact-tags { display: flex; flex-wrap: wrap; gap: 5px; } .tag { background: var(--primary-color); color: white; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 25px; border-radius: var(--border-radius); text-align: center; } .stat-number { font-size: 36px; font-weight: 700; margin-bottom: 10px; } .stat-label { font-size: 14px; opacity: 0.9; } .network-container { width: 100%; height: 600px; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); } .map-wrapper { position: relative; flex: 1; } .map-container { width: 100%; height: 500px; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); } .network-controls { position: absolute; top: 10px; right: 10px; z-index: 100; display: flex; gap: 5px; background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: var(--border-radius); box-shadow: var(--shadow); } .network-control-btn { background: var(--primary-color); color: white; border: none; padding: 8px 12px; border-radius: var(--border-radius); cursor: pointer; font-size: 12px; transition: var(--transition); } .network-control-btn:hover { background: var(--secondary-color); transform: scale(1.05); } @media print { .sidebar, .header, .btn, .modal, #aiChatbotWidget { display: none !important; } .main-content { margin: 0; padding: 0; } .content-area { padding: 20px; } } [data-theme="dark"] .card { border: 1px solid var(--border-color); } [data-theme="dark"] .modal-content { border: 1px solid var(--border-color); } [data-theme="dark"] .form-control { border-color: var(--border-color); } [data-theme="dark"] .table-container { border: 1px solid var(--border-color); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light-bg); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .view-container { display: none; } .view-container.active { display: block; } .photo-upload { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .photo-preview { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--border-color); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--light-bg); cursor: pointer; } .photo-preview img { width: 100%; height: 100%; object-fit: cover; } .file-upload { display: none; } .upload-btn-container { flex: 1; } .photo-actions-container { display: flex; gap: 10px; margin-top: 10px; } .dynamic-list { border: 1px solid var(--border-color); border-radius: var(--border-radius); max-height: 200px; overflow-y: auto; } .dynamic-list-item { padding: 10px 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .dynamic-list-item:last-child { border-bottom: none; } .action-btn { background: none; border: none; color: var(--primary-color); cursor: pointer; padding: 5px; border-radius: 3px; transition: var(--transition); } .action-btn:hover { background: var(--light-bg); } .contact-list-card { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 15px; margin-bottom: 15px; transition: var(--transition); } .contact-list-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .contact-details { margin: 10px 0; color: var(--text-muted); font-size: 14px; } .contact-actions { display: flex; gap: 10px; margin-top: 15px; } .details-link { color: var(--primary-color); text-decoration: none; } .details-link:hover { text-decoration: underline; } .tag-badge { background: var(--primary-color); color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; margin-right: 5px; } .photo-cell-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .icon-cell-sm { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; } .contact-info-cell { display: flex; flex-direction: column; gap: 5px; } .contact-name-text { font-weight: 600; } .contact-link-icons { display: flex; gap: 8px; } .contact-link-icons a { color: var(--primary-color); text-decoration: none; font-size: 14px; } .contact-link-icons a:hover { color: var(--secondary-color); } .wrap-text { word-wrap: break-word; max-width: 200px; } .map-link-icon { color: var(--primary-color); text-decoration: none; margin-left: 5px; } .map-link-icon:hover { color: var(--secondary-color); } .description-cell { cursor: pointer; } .table-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; } .filter-group { display: flex; gap: 10px; align-items: center; } .table-actions-bar { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; } .table-actions-bar button:disabled { opacity: 0.5; cursor: not-allowed; } .status-badge { padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .status-actif { background: var(--success-color); color: white; } .status-inactif { background: var(--text-muted); color: white; } .status-en-attente { background: var(--warning-color); color: white; } .status-prospect { background: var(--info-color); color: white; } .last-contact-info { font-size: 12px; color: var(--text-muted); margin: 8px 0; display: flex; align-items: center; gap: 5px; } .last-contact-info.no-contact { color: var(--warning-color); } .location-info { font-size: 12px; color: var(--primary-color); margin: 5px 0; display: flex; align-items: center; gap: 5px; } .btn-email { background: var(--success-color); color: white; } .btn-email:hover { background: #45a049; } .btn-phone { background: var(--info-color); color: white; } .btn-phone:hover { background: #5a9fd4; } .btn-qr { background: var(--accent-color); color: white; } .btn-qr:hover { background: #e55a5a; } .btn-location { background: var(--warning-color); color: white; } .btn-location:hover { background: #e6c200; } #aiChatbotWidget { position: fixed; bottom: 20px; right: 20px; width: 350px; height: 500px; background: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow-hover); display: none; flex-direction: column; z-index: 1000; border: 1px solid var(--border-color); } #aiChatbotWidget.show { display: flex; } #aiChatbotWidget .chatbot-header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 15px; border-radius: var(--border-radius) var(--border-radius) 0 0; display: flex; justify-content: space-between; align-items: center; } #aiChatbotWidget .chatbot-controls { display: flex; gap: 10px; } #aiChatbotWidget .chatbot-controls button { background: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 5px 8px; border-radius: 3px; cursor: pointer; transition: var(--transition); } #aiChatbotWidget .chatbot-controls button:hover { background: rgba(255, 255, 255, 0.3); } #aiChatbotWidget .chatbot-body { flex: 1; padding: 15px; overflow-y: auto; background: var(--light-bg); } #aiChatbotWidget .chatbot-footer { padding: 15px; border-top: 1px solid var(--border-color); } #aiChatbotWidget .chat-input-form { display: flex; gap: 10px; } #aiChatbotWidget .chat-input { flex: 1; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: var(--bg-color); color: var(--text-color); } #aiChatbotWidget .chat-send-btn { background: var(--primary-color); color: white; border: none; padding: 10px 15px; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); } #aiChatbotWidget .chat-send-btn:hover { background: var(--secondary-color); } #aiChatbotWidget .chat-message { margin-bottom: 15px; padding: 10px; border-radius: var(--border-radius); max-width: 80%; } #aiChatbotWidget .chat-message.user { background: var(--primary-color); color: white; margin-left: auto; } #aiChatbotWidget .chat-message.ai { background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); } .map-contact-list { max-height: 300px; overflow-y: auto; } .map-contact-item { padding: 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: var(--transition); } .map-contact-item:hover { background: var(--light-bg); } .map-contact-item:last-child { border-bottom: none; } .map-contact-name { font-weight: 600; color: var(--text-color); margin-bottom: 5px; } .map-contact-details { font-size: 12px; color: var(--text-muted); } .custom-markers-list { max-height: 200px; overflow-y: auto; } .custom-marker-item { padding: 8px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .custom-marker-item:last-child { border-bottom: none; } .custom-marker-info { flex: 1; } .custom-marker-name { font-weight: 500; font-size: 12px; color: var(--text-color); } .custom-marker-coords { font-size: 10px; color: var(--text-muted); } .custom-marker-actions { display: flex; gap: 5px; } .custom-marker-actions button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 3px; transition: var(--transition); } .custom-marker-actions button:hover { color: var(--primary-color); background: var(--light-bg); } .map-search-container { position: relative; background: var(--light-bg); padding: 15px; border-radius: var(--border-radius); border: 1px solid var(--border-color); z-index: 10; } .checkbox-label { display: inline-flex; align-items: center; gap: 5px; margin-right: 15px; cursor: pointer; } .checkbox-label input[type="checkbox"] { margin: 0; } #bulkEditModal .modal-content { background: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow-hover); width: 600px; max-height: 80vh; overflow-y: auto; } .custom-attributes-list { border: 1px solid var(--border-color); border-radius: var(--border-radius); max-height: 300px; overflow-y: auto; } .custom-attribute-item { padding: 10px 15px; border-bottom: 1px solid var(--border-color); display: flex; gap: 10px; align-items: center; } .custom-attribute-item:last-child { border-bottom: none; } .custom-attribute-item input { flex: 1; padding: 5px 10px; border: 1px solid var(--border-color); border-radius: 4px; } .custom-attribute-item button { background: var(--danger-color); color: white; border: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; } .heatmap-legend { position: absolute; bottom: 10px; left: 10px; background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: var(--border-radius); box-shadow: var(--shadow); z-index: 1000; } .heatmap-legend h4 { margin: 0 0 10px 0; font-size: 14px; } .heatmap-gradient { width: 200px; height: 20px; background: linear-gradient(to right, blue, cyan, lime, yellow, red); border-radius: 10px; margin-bottom: 5px; } .heatmap-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .gallery-masonry { column-count: 3; column-gap: 15px; } .gallery-masonry .gallery-item { break-inside: avoid; margin-bottom: 15px; } .gallery-list { display: flex; flex-direction: column; gap: 15px; } .gallery-list-item { background: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow); transition: var(--transition); cursor: pointer; } .gallery-list-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .gallery-item img { display: block; width: 100%; height: auto; } .gallery-drop-zone { border: 2px dashed var(--border-color); border-radius: var(--border-radius); padding: 40px; text-align: center; cursor: pointer; background: var(--light-bg); margin-bottom: 20px; transition: background 0.3s ease; } .gallery-drop-zone:hover { background: var(--border-color); } .gallery-drop-zone .drop-zone-content { color: var(--text-muted); } .gallery-actions { opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-actions { opacity: 1; } .gallery-item { position: relative; } .gallery-item .gallery-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 5px; } .gallery-item .gallery-actions button { background: rgba(255,255,255,0.8); color: var(--text-color); border: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; } .gallery-item .gallery-actions button:hover { background: white; } .map-layer-controls { position: absolute; top: 10px; left: 10px; z-index: 1000; background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: var(--border-radius); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .map-layer-controls label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-color); cursor: pointer; } .map-layer-controls button { margin-top: 5px; } [data-theme="dark"] .map-layer-controls { background: rgba(45, 55, 72, 0.9); } [data-theme="dark"] .map-layer-controls label { color: var(--text-color); } .table-wrapper { max-height: 450px; overflow-y: auto; position: relative; border: 1px solid var(--border-color); border-radius: var(--border-radius); } .table-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(to top, var(--bg-color), transparent); pointer-events: none; opacity: 0; transition: opacity 0.3s; } .table-wrapper.has-more-content::after { opacity: 1; } .table-summary-info { color: var(--text-muted); font-size: 14px; margin-top: 15px; margin-bottom: 15px; } .table-footer-actions { display: flex; justify-content: center; margin-top: 20px; } .btn-load-more { background: var(--primary-color); color: white; } .table-empty-state td { text-align: center; padding: 50px 20px !important; color: var(--text-muted); } .table-empty-state i { font-size: 32px; margin-bottom: 15px; display: block; color: var(--primary-color); } @keyframes fadeInRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } tr.new-row { animation: fadeInRow 0.5s ease-out forwards; } .actions-cell { position: relative; } .actions-dropdown-container { position: relative; } .actions-dropdown-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 5px 10px; border-radius: 50%; width: 35px; height: 35px; } .actions-dropdown-btn:hover { background: var(--light-bg); color: var(--primary-color); } .actions-dropdown-menu { display: none; position: absolute; right: 30px; top: 5px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow); z-index: 100; padding: 5px 0; min-width: 180px; } .actions-dropdown-menu.show { display: block; } .actions-dropdown-menu .btn { display: flex; width: 100%; justify-content: flex-start; padding: 8px 15px; background: none; color: var(--text-color); border-radius: 0; } .actions-dropdown-menu a.btn { text-decoration: none; } .actions-dropdown-menu .btn:hover { background: var(--primary-color); color: white; transform: none; box-shadow: none; } .actions-dropdown-menu .btn i { width: 25px; text-align: left; }

Glissez-déposez vos images ici

Nouveau Contact

Adresse

Modification groupée

Détails du Contact

Import/Export

QR Code

Assistant IA

Sélectionner un contact

Blog

Hello world!