/** * Kricar - Thème clair / sombre * Utilise la classe "theme-dark" sur pour le mode sombre. */ /* Mode clair (défaut) - variables déjà définies dans StyleSideBar.css */ html { color-scheme: light; } /* Mode sombre */ html.theme-dark { color-scheme: dark; } html.theme-dark { --primary-color: #ef4444; --primary-light: #7f1d1d; --hover-color: #f87171; --text-color: #f3f4f6; --text-light: #9ca3af; --bg-white: #1f2937; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } /* Fond global et main */ html.theme-dark body, html.theme-dark #mainContent { background: #111827 !important; background-image: none !important; color: var(--text-color); } /* Sidebar */ html.theme-dark .sidebar-content { background-color: #1f2937; border-right-color: #374151; } html.theme-dark .menu-item { color: var(--text-color); } html.theme-dark .menu-item:hover { background-color: var(--primary-light); color: var(--primary-color); } html.theme-dark .divider-text { color: var(--text-light); } html.theme-dark .user-section { border-top-color: #374151; } html.theme-dark .user-name, html.theme-dark .user-role { color: var(--text-color); } html.theme-dark .notification-card { background-color: #1f2937; border-color: #374151; } html.theme-dark .notification-title { color: var(--text-color); } html.theme-dark .notification-item:hover { background-color: #374151; } /* Cartes et contenus (classes Tailwind / page) */ html.theme-dark .bg-white, html.theme-dark .bg-gray-50 { background-color: #1f2937 !important; } html.theme-dark .bg-gray-100 { background-color: #374151 !important; } html.theme-dark .text-gray-800, html.theme-dark .text-gray-900 { color: #f3f4f6 !important; } html.theme-dark .text-gray-600, html.theme-dark .text-gray-700 { color: #d1d5db !important; } html.theme-dark .text-gray-500 { color: #9ca3af !important; } html.theme-dark .border-gray-200, html.theme-dark .border-gray-300 { border-color: #4b5563 !important; } html.theme-dark .border-gray-100 { border-color: #374151 !important; } /* Inputs et champs */ html.theme-dark input, html.theme-dark select, html.theme-dark textarea { background-color: #374151 !important; border-color: #4b5563 !important; color: #f3f4f6 !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #9ca3af; } /* Info cards (page profil) */ html.theme-dark .info-card { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); border-left-color: var(--primary-color); } html.theme-dark .metric-card { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); border-color: #4b5563; } html.theme-dark .comment-bubble { background: linear-gradient(135deg, #1f2937 0%, #374151 100%); border-color: #4b5563; } html.theme-dark .section-divider { background: linear-gradient(90deg, transparent 0%, #4b5563 50%, transparent 100%); } html.theme-dark .data-label { color: var(--text-light) !important; } html.theme-dark .data-value { color: var(--text-color) !important; } /* Boutons secondaires / gris */ html.theme-dark .bg-gray-100 { background-color: #374151 !important; } html.theme-dark .hover\:bg-gray-200:hover, html.theme-dark .hover\:bg-gray-100:hover { background-color: #4b5563 !important; } /* Liste suggestions / dropdown */ html.theme-dark .bg-gray-50 { background-color: #374151 !important; } /* ===== SOUS-MENUS (sidebar) ===== */ html.theme-dark .menu-item-parent { color: var(--text-color); } html.theme-dark .menu-item-parent:hover { background-color: var(--primary-light); color: var(--primary-color); } html.theme-dark .menu-item-parent.active { background-color: #7f1d1d; color: var(--primary-color); } html.theme-dark .submenu-arrow { color: var(--text-light); } html.theme-dark .submenu { background-color: #111827; } html.theme-dark .submenu-item { color: var(--text-color); } html.theme-dark .submenu-item:hover { background-color: var(--primary-light); color: var(--primary-color); } /* User profile hover (sidebar) */ html.theme-dark .user-profile:hover { background-color: #374151; } html.theme-dark .logout-button { color: var(--text-light); } html.theme-dark .logout-button:hover { color: var(--primary-color); background-color: var(--primary-light); } /* Loading message sidebar */ html.theme-dark .loading-message { color: var(--text-light); } /* ===== HEADER (navbar) ===== */ html.theme-dark header.bg-white { background-color: #1f2937 !important; border-bottom: 1px solid #374151; } html.theme-dark header .text-gray-700 { color: #d1d5db !important; } html.theme-dark header a:hover { color: var(--primary-color) !important; } /* ===== DASHBOARD ===== */ html.theme-dark .section-card { background: #1f2937 !important; border-color: #374151 !important; } html.theme-dark .section-header { background: #374151 !important; border-bottom-color: #4b5563 !important; } html.theme-dark .section-header .text-gray-800 { color: #f3f4f6 !important; } /* Dashboard: breadcrumb */ html.theme-dark .text-gray-500 ol, html.theme-dark nav[aria-label="Breadcrumb"] { color: var(--text-light); } /* Dashboard: cartes actions rapides & stats */ html.theme-dark .bg-gradient-to-br.from-indigo-50, html.theme-dark .bg-gradient-to-br.from-blue-50, html.theme-dark .bg-gradient-to-br.from-emerald-50, html.theme-dark .bg-gradient-to-br.from-purple-50, html.theme-dark .bg-gradient-to-br.from-white { background: #1f2937 !important; } html.theme-dark .from-white.to-blue-50, html.theme-dark .from-white.to-emerald-50, html.theme-dark .from-white.to-violet-50 { background: linear-gradient(to bottom right, #1f2937, #374151) !important; } html.theme-dark .border-indigo-200, html.theme-dark .border-blue-200, html.theme-dark .border-emerald-200, html.theme-dark .border-purple-200, html.theme-dark .border-violet-200 { border-color: #4b5563 !important; } html.theme-dark .text-slate-700, html.theme-dark .text-slate-900 { color: #e5e7eb !important; } html.theme-dark .text-slate-500, html.theme-dark .text-slate-600 { color: #9ca3af !important; } html.theme-dark .bg-slate-100 { background-color: #374151 !important; } html.theme-dark .bg-blue-50, html.theme-dark .bg-emerald-50, html.theme-dark .bg-violet-50 { background-color: #374151 !important; } html.theme-dark .bg-white.text-indigo-600, html.theme-dark .bg-white.text-blue-600, html.theme-dark .bg-white.text-emerald-600, html.theme-dark .bg-white.text-purple-600, html.theme-dark .rounded-lg.bg-white { background-color: #374151 !important; color: #93c5fd !important; } /* Dashboard: icônes dans section-header (bg-blue-100, bg-green-100...) */ html.theme-dark .bg-blue-100, html.theme-dark .bg-green-100 { background-color: #1e3a5f !important; } html.theme-dark .bg-blue-100 .text-blue-600, html.theme-dark .text-blue-600 { color: #93c5fd !important; } html.theme-dark .bg-green-100 .text-green-600, html.theme-dark .text-green-600 { color: #86efac !important; } /* ===== PAGE TRAITES (Gérer traites) ===== */ html.theme-dark .traite-card { background-color: #1f2937; border-color: #374151; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); } html.theme-dark .traite-card:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); } html.theme-dark .card-body { background-color: #1f2937; } /* Traite: info-box (N° Traite, Date) */ html.theme-dark .info-box-blue { background: linear-gradient(to bottom right, #1e3a5f, #1e293b); border-color: #334155; } html.theme-dark .info-box-purple { background: linear-gradient(to bottom right, #4c1d95, #3b0764); border-color: #5b21b6; } html.theme-dark .info-label-text-blue, html.theme-dark .info-value-numero { color: #93c5fd !important; } html.theme-dark .info-label-text-purple, html.theme-dark .info-value-date { color: #c4b5fd !important; } /* Traite: section financière */ html.theme-dark .financial-section { background: linear-gradient(to bottom right, #374151, #1f2937); border-color: #4b5563; } html.theme-dark .financial-header, html.theme-dark .financial-label { color: #d1d5db !important; } html.theme-dark .financial-label-bold { color: #fca5a5 !important; } html.theme-dark .financial-value-gray { color: #f3f4f6 !important; } html.theme-dark .financial-row-border { border-top-color: #4b5563; } html.theme-dark .financial-row-highlight { background-color: #7f1d1d; } /* Traite: stat boxes */ html.theme-dark .stat-box-green { background: linear-gradient(to bottom right, #14532d, #166534); border-color: #15803d; } html.theme-dark .stat-box-red { background: linear-gradient(to bottom right, #7f1d1d, #991b1b); border-color: #b91c1c; } html.theme-dark .stat-box-yellow { background: linear-gradient(to bottom right, #713f12, #854d0e); border-color: #a16207; } html.theme-dark .stat-label, html.theme-dark .stat-value { color: #e5e7eb !important; } /* Traite: boutons Ajouter / Détails / Supprimer */ html.theme-dark .traites-grid .action-button { color: #f3f4f6; } html.theme-dark button.bg-white.text-red-700, html.theme-dark .bg-white.text-red-700 { background-color: #374151 !important; color: #fca5a5 !important; border: 1px solid #4b5563; } html.theme-dark .button-details { background-color: #1e40af !important; border-color: #2563eb; color: #fff !important; } html.theme-dark .button-delete { background-color: #991b1b !important; border-color: #b91c1c; color: #fff !important; } /* Traite: message vide (aucune traite) */ html.theme-dark .bg-blue-50.border-l-4 { background-color: #1e3a5f !important; border-color: #2563eb !important; } html.theme-dark .text-blue-700 { color: #93c5fd !important; } /* Traite: titre "Gérer vos traites" */ html.theme-dark .text-gray-800 { color: #f3f4f6 !important; } /* ===== MES VÉHICULES (liste) ===== */ html.theme-dark .border-slate-200, html.theme-dark .border-slate-300 { border-color: #4b5563 !important; } html.theme-dark .border-slate-100 { border-color: #374151 !important; } html.theme-dark .bg-slate-50 { background-color: #374151 !important; } html.theme-dark .bg-slate-100 { background-color: #4b5563 !important; } html.theme-dark .text-slate-800 { color: #e5e7eb !important; } html.theme-dark .text-slate-600 { color: #9ca3af !important; } /* Cartes véhicules (liste) */ html.theme-dark .border-slate-200.rounded-xl { background-color: #1f2937 !important; border-color: #4b5563 !important; } html.theme-dark .border-t.border-slate-100 { border-color: #374151 !important; } html.theme-dark .bg-slate-100.text-slate-600 { background-color: #4b5563 !important; color: #d1d5db !important; } /* État vide liste véhicules */ html.theme-dark .border-dashed.border-slate-200 { border-color: #4b5563 !important; background-color: #1f2937 !important; } html.theme-dark .bg-slate-50\/50 { background-color: #374151 !important; } /* Modal suppression (liste véhicules) */ html.theme-dark #deleteModalContent, html.theme-dark .bg-white.rounded-2xl { background-color: #1f2937 !important; } html.theme-dark .text-slate-600, html.theme-dark .text-slate-800 { color: #d1d5db !important; } /* ===== AJOUTER VÉHICULE ===== */ html.theme-dark .border-l-4.border-red-600.bg-gray-50, html.theme-dark .border-l-4.border-blue-600.bg-gray-50 { background-color: #374151 !important; border-color: var(--primary-color); } html.theme-dark .section-card .bg-gray-50 { background-color: #374151 !important; } /* Progress bar container (dashboard / traite) */ html.theme-dark .progress-bar-container { background-color: #1f2937; } /* ===== PAGES PUBLIQUES (Accueil, À propos, Contact, Annonces, Détails annonce) ===== */ /* Accueil (acceuille.html): navbar et body */ html.theme-dark .navbar { background-color: transparent; } html.theme-dark .navbar.scrolled { background-color: rgba(31, 41, 55, 0.98); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } html.theme-dark .nav-links a { color: #e5e7eb !important; } html.theme-dark .nav-links a:hover { color: var(--primary-color) !important; } html.theme-dark .logo span { color: #e5e7eb !important; } html.theme-dark .menu-toggle { color: #e5e7eb !important; } html.theme-dark .mobile-menu { background-color: #1f2937; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } html.theme-dark .mobile-menu a { color: #e5e7eb !important; border-bottom-color: #374151; } /* Accueil: cartes annonces, sections */ html.theme-dark body { background-color: #111827 !important; } /* Accueil: section voitures en vedette et cartes annonces */ html.theme-dark .featured-cars { background-color: transparent; } html.theme-dark .section-title { color: #f3f4f6 !important; } html.theme-dark .section-title::after { background-color: var(--primary-color); } html.theme-dark .section-subtitle { color: #9ca3af !important; } html.theme-dark .annonce-card { background-color: #1f2937 !important; border-color: #374151 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } html.theme-dark .annonce-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-color: rgba(239, 68, 68, 0.3) !important; } html.theme-dark .annonce-content { background-color: transparent; } html.theme-dark .annonce-title { color: #f3f4f6 !important; } html.theme-dark .annonce-info { color: #d1d5db !important; } html.theme-dark .annonce-divider { background-color: #374151 !important; } html.theme-dark .annonce-price { color: var(--primary-color) !important; } html.theme-dark .annonce-button { background-color: var(--primary-color) !important; color: #fff !important; } html.theme-dark .annonce-button:hover { background-color: var(--hover-color) !important; } html.theme-dark .no-images-placeholder { background-color: #374151 !important; color: #9ca3af !important; } /* Loader lazy-load (toutes pages annonces + accueil) */ html.theme-dark .image-loader { background: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%) !important; background-size: 200% 100% !important; } html.theme-dark .image-loader i { color: #9ca3af !important; } /* Cartes annonces (annonces.html grille/liste + mes-annonces) */ html.theme-dark .car-card { background-color: #1f2937 !important; border-color: #374151 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); } html.theme-dark .car-card:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); border-color: rgba(239, 68, 68, 0.3) !important; } html.theme-dark .car-card .carousel-container, html.theme-dark .lazy-image-wrapper { background-color: #374151 !important; } html.theme-dark .car-card .p-6, html.theme-dark .car-card .annonce-content { color: #e5e7eb; } html.theme-dark .car-card .text-lg.font-bold.text-gray-900, html.theme-dark .car-card .text-xl.font-bold.text-gray-900, html.theme-dark .car-card h3.text-gray-900 { color: #f3f4f6 !important; } html.theme-dark .car-card .text-gray-600, html.theme-dark .car-card .text-gray-500 { color: #d1d5db !important; } html.theme-dark .car-card .text-red-600 { color: var(--primary-color) !important; } html.theme-dark .car-card .border-t.border-gray-100 { border-color: #374151 !important; } html.theme-dark .car-card a.bg-red-600 { background-color: var(--primary-color) !important; } html.theme-dark .car-card a.bg-red-600:hover { background-color: var(--hover-color) !important; } /* Mes annonces (mes-annonces.html) */ html.theme-dark .section-card.car-card { background-color: #1f2937 !important; border-color: #374151 !important; } html.theme-dark .section-card .annonce-title, html.theme-dark .section-card h3 { color: #f3f4f6 !important; } html.theme-dark .section-card .text-gray-500, html.theme-dark .section-card .text-gray-600 { color: #d1d5db !important; } html.theme-dark .section-card .text-red-600 { color: var(--primary-color) !important; } html.theme-dark .section-card .border-t.border-gray-100 { border-color: #374151 !important; } html.theme-dark .section-card a.bg-red-600 { background-color: var(--primary-color) !important; } html.theme-dark .section-card a.bg-red-600:hover { background-color: var(--hover-color) !important; } /* Accueil: badges statut (disponible / indisponible) */ html.theme-dark .status-available { background-color: #14532d !important; color: #86efac !important; border-color: #15803d !important; } html.theme-dark .status-unavailable { background-color: #7f1d1d !important; color: #fca5a5 !important; border-color: #b91c1c !important; } /* Accueil: bouton "Voir plus" */ html.theme-dark .voir-plus-wrap a.bg-red-500 { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } html.theme-dark .voir-plus-wrap a.bg-red-500:hover { background-color: var(--hover-color) !important; border-color: var(--hover-color) !important; } /* À propos (AboutUs.html) */ html.theme-dark .hero-container { color: var(--text-color); } html.theme-dark .text-content p { color: #d1d5db !important; } html.theme-dark .team-section { background-color: #1f2937 !important; } html.theme-dark .team-header h2 { -webkit-text-fill-color: #e5e7eb; } html.theme-dark .team-header p { color: #9ca3af !important; } html.theme-dark .image-wrapper { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); } /* Contact: sections et cartes (header déjà géré plus haut) */ html.theme-dark section.bg-white { background-color: #1f2937 !important; } html.theme-dark .contact-info-card { background-color: #1f2937 !important; border: 1px solid #374151; } html.theme-dark .contact-info-card .text-gray-800 { color: #f3f4f6 !important; } html.theme-dark .contact-info-card .text-gray-600 { color: #d1d5db !important; } html.theme-dark section.bg-gray-50 { background-color: #374151 !important; } html.theme-dark section.bg-gray-50 .text-gray-900 { color: #f3f4f6 !important; } html.theme-dark section.bg-gray-50 .text-gray-600 { color: #d1d5db !important; } html.theme-dark section.bg-gray-50 .space-y-6.bg-white { background-color: #1f2937 !important; } /* Annonces (annonces.html): filtre et cartes */ html.theme-dark .filter-card { background: linear-gradient(to right, #1f2937, #374151) !important; border-color: #4b5563; } html.theme-dark .location-checkbox { background-color: #374151 !important; border-color: #4b5563 !important; } html.theme-dark .location-checkbox:hover { background-color: #4b5563 !important; border-color: #6b7280 !important; } html.theme-dark .location-checkbox input[type="checkbox"]:checked + label { color: var(--primary-color); } /* Annonce détails (annonce-details.html): popup réservation */ html.theme-dark .popup-content { background-color: #1f2937 !important; border-color: #374151 !important; } html.theme-dark .popup-header { background-color: #374151 !important; border-bottom-color: #4b5563 !important; } html.theme-dark .popup-title { color: #f3f4f6 !important; } /* Détails annonce: cartes infos, formulaire */ html.theme-dark .text-gray-900 { color: #f3f4f6 !important; } html.theme-dark .text-gray-700 { color: #d1d5db !important; } /* Transitions (limité aux zones principales pour éviter flash) */ html.theme-dark #mainContent, html.theme-dark .sidebar-content, html.theme-dark .section-card, html.theme-dark .traite-card, html.theme-dark .info-card, html.theme-dark .menu-item, html.theme-dark .submenu-item, html.theme-dark .menu-item-parent { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }