/* ============================================================ THEME.CSS — Système Dark / Light pour CECCO Microfinance Mode clair = comportement par défaut (aucun attribut) Mode sombre = [data-theme="dark"] sur ============================================================ */ /* ── Variables sémantiques (light = valeurs actuelles) ── */ :root { --text-heading: var(--navy); --text-body: var(--gray-600, #4b5563); --bg-section: var(--white, #ffffff); --bg-alt: var(--gray-50, #f5f7fa); --bg-card: var(--white, #ffffff); --border-ui: var(--gray-200, #dde1ea); } [data-theme="dark"] { --text-heading: rgba(255,255,255,0.92); --text-body: rgba(255,255,255,0.58); --bg-section: #0d1b2e; --bg-alt: #0a1524; --bg-card: #142235; --border-ui: rgba(255,255,255,0.08); } /* ══════════════════════════════════════════════════════ BOUTON TOGGLE THÈME ══════════════════════════════════════════════════════ */ .nv2-theme-btn { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(10,38,71,0.18); cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.25s; color: var(--navy); flex-shrink: 0; padding: 0; } .nv2-theme-btn:hover { background: rgba(10,38,71,0.06); border-color: var(--navy); transform: scale(1.1); } [data-theme="dark"] .nv2-theme-btn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.82); } [data-theme="dark"] .nv2-theme-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); color: #fff; } /* ══════════════════════════════════════════════════════ DARK MODE — BASE BODY ══════════════════════════════════════════════════════ */ [data-theme="dark"] body { background: #0d1b2e; color: rgba(255,255,255,0.85); } /* ══════════════════════════════════════════════════════ DARK MODE — NAVBAR V2 (toutes les pages) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .navbar-v2 { background: #0d1b2e; box-shadow: 0 2px 24px rgba(0,0,0,0.4); } [data-theme="dark"] .nv2-link { color: rgba(255,255,255,0.70); } [data-theme="dark"] .nv2-link:hover, [data-theme="dark"] .nv2-link.active { color: #fff; background: rgba(255,255,255,0.07); } [data-theme="dark"] .nv2-link.active::after { background: var(--gold); } /* Dropdown desktop */ [data-theme="dark"] .nv2-drop-menu { background: #142235; border-color: rgba(255,255,255,0.09); box-shadow: 0 16px 52px rgba(0,0,0,0.55); } [data-theme="dark"] .nv2-drop-menu a { color: rgba(255,255,255,0.60); } [data-theme="dark"] .nv2-drop-menu a:hover { background: rgba(255,255,255,0.07); color: #fff; } /* Mobile nav panel */ [data-theme="dark"] .nv2-nav { background: #0d1b2e; box-shadow: 0 12px 32px rgba(0,0,0,0.5); } [data-theme="dark"] .nv2-dropdown:hover .nv2-drop-menu, [data-theme="dark"] .nv2-nav .nv2-drop-menu { background: #1a2d42; } /* Boutons CTA dans nav */ [data-theme="dark"] .nv2-btn-login { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.80); background: transparent; } [data-theme="dark"] .nv2-btn-login:hover { background: rgba(255,255,255,0.09); color: #fff; border-color: rgba(255,255,255,0.4); } /* Hamburger */ [data-theme="dark"] .nv2-toggle span { background: rgba(255,255,255,0.72); } /* ══════════════════════════════════════════════════════ DARK MODE — NAVBAR V1 (ancien nav sur certaines pages) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .navbar { background: #0d1b2e; box-shadow: 0 2px 24px rgba(0,0,0,0.4); } [data-theme="dark"] .nav-links { background: #0d1b2e; } [data-theme="dark"] .nav-links > a, [data-theme="dark"] .nav-dropdown > a { color: rgba(255,255,255,0.70); } [data-theme="dark"] .nav-links > a:hover, [data-theme="dark"] .nav-dropdown > a:hover { color: #fff; background: rgba(255,255,255,0.07); } [data-theme="dark"] .dropdown-menu { background: #142235; border-color: rgba(255,255,255,0.09); box-shadow: 0 16px 52px rgba(0,0,0,0.55); } [data-theme="dark"] .dropdown-menu a { color: rgba(255,255,255,0.60); } [data-theme="dark"] .dropdown-menu a:hover { background: rgba(255,255,255,0.07); color: #fff; } [data-theme="dark"] .menu-toggle span { background: rgba(255,255,255,0.72); } [data-theme="dark"] .logo { color: rgba(255,255,255,0.9); } /* ══════════════════════════════════════════════════════ DARK MODE — HERO stat cards (flottantes sur hero) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .hero-stat-card { background: #142235; box-shadow: 0 12px 40px rgba(0,0,0,0.55); } [data-theme="dark"] .hero-stat-card .stat-num { color: rgba(255,255,255,0.9); } [data-theme="dark"] .hero-stat-card .stat-label { color: rgba(255,255,255,0.42); } /* ══════════════════════════════════════════════════════ DARK MODE — SECTION STATS ══════════════════════════════════════════════════════ */ [data-theme="dark"] .stats-section { background: #0a1524; border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] .stat-box { border-right-color: rgba(255,255,255,0.07); } [data-theme="dark"] .stat-box::before { background: rgba(255,255,255,0.06); } [data-theme="dark"] .stat-number { color: #fff; } [data-theme="dark"] .stat-desc { color: rgba(255,255,255,0.48); } @media (max-width: 1024px) { [data-theme="dark"] .stat-box:nth-child(3) { border-right-color: rgba(255,255,255,0.07); } [data-theme="dark"] .stat-box:nth-child(3), [data-theme="dark"] .stat-box:nth-child(4) { border-top-color: rgba(255,255,255,0.07); } } /* ══════════════════════════════════════════════════════ DARK MODE — SERVICES (accueil) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .services-section { background: #0d1b2e; } [data-theme="dark"] .service-card { background: #142235; border-color: rgba(255,255,255,0.07); } [data-theme="dark"] .service-card:hover { box-shadow: 0 12px 48px rgba(0,0,0,0.5); border-color: transparent; } [data-theme="dark"] .service-card h3 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .service-card p { color: rgba(255,255,255,0.52); } [data-theme="dark"] .service-link { color: var(--gold); } /* ══════════════════════════════════════════════════════ DARK MODE — ABOUT (accueil) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .about-section { background: #0a1524; } [data-theme="dark"] .about-badge-float, [data-theme="dark"] .about-card-float { background: #142235; box-shadow: 0 12px 40px rgba(0,0,0,0.55); } [data-theme="dark"] .badge-num { color: rgba(255,255,255,0.9); } [data-theme="dark"] .badge-text { color: rgba(255,255,255,0.42); } [data-theme="dark"] .float-bar { background: rgba(255,255,255,0.09); } [data-theme="dark"] .float-row { color: rgba(255,255,255,0.68); } [data-theme="dark"] .about-text h2 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .about-text > p { color: rgba(255,255,255,0.58); } [data-theme="dark"] .about-feat strong { color: rgba(255,255,255,0.9); } [data-theme="dark"] .about-feat span { color: rgba(255,255,255,0.52); } /* ══════════════════════════════════════════════════════ DARK MODE — TÉMOIGNAGES ══════════════════════════════════════════════════════ */ [data-theme="dark"] .testimonials-section { background: #0d1b2e; } [data-theme="dark"] .testimonial-card { background: #142235; border-color: rgba(255,255,255,0.07); box-shadow: 0 4px 24px rgba(0,0,0,0.35); } [data-theme="dark"] .testimonial-card p { color: rgba(255,255,255,0.62); } [data-theme="dark"] .testimonial-author strong { color: rgba(255,255,255,0.9); } [data-theme="dark"] .testimonial-author span { color: rgba(255,255,255,0.38); } [data-theme="dark"] .slider-btn { background: #142235; border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); } [data-theme="dark"] .slider-btn:hover { background: var(--navy); color: #fff; } [data-theme="dark"] .slider-dot { background: rgba(255,255,255,0.18); } [data-theme="dark"] .slider-dot.active { background: var(--gold); } /* ══════════════════════════════════════════════════════ DARK MODE — HEADERS DE SECTION ══════════════════════════════════════════════════════ */ [data-theme="dark"] .section-header h2 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .section-header p { color: rgba(255,255,255,0.55); } /* ══════════════════════════════════════════════════════ DARK MODE — CONTACT (accueil) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .contact-section { background: #0d1b2e; } [data-theme="dark"] .contact-info h2 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .contact-info > p { color: rgba(255,255,255,0.58); } [data-theme="dark"] .contact-item strong { color: rgba(255,255,255,0.88); } [data-theme="dark"] .contact-item span { color: rgba(255,255,255,0.52); } [data-theme="dark"] .contact-icon { background: rgba(255,255,255,0.07); } [data-theme="dark"] .contact-icon svg { color: var(--gold); } [data-theme="dark"] .contact-form-wrapper { background: #142235; } [data-theme="dark"] .form-group label { color: rgba(255,255,255,0.78); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: #0d1b2e; border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); } [data-theme="dark"] .form-group input::placeholder, [data-theme="dark"] .form-group textarea::placeholder { color: rgba(255,255,255,0.28); } [data-theme="dark"] select option { background: #142235; } /* ══════════════════════════════════════════════════════ DARK MODE — BACK TO TOP ══════════════════════════════════════════════════════ */ [data-theme="dark"] .back-to-top { background: var(--gold); color: var(--navy-dark); box-shadow: 0 8px 24px rgba(212,175,55,0.35); } [data-theme="dark"] .back-to-top:hover { background: var(--gold-light); } /* ══════════════════════════════════════════════════════ DARK MODE — PAGES.CSS — SECTIONS PARTAGÉES ══════════════════════════════════════════════════════ */ [data-theme="dark"] .page-section { background: #0d1b2e; } [data-theme="dark"] .page-section.alt { background: #0a1524; } [data-theme="dark"] .page-section-header h2 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .page-section-header p { color: rgba(255,255,255,0.55); } /* Product cards */ [data-theme="dark"] .product-card { background: #142235; border-color: rgba(255,255,255,0.07); } [data-theme="dark"] .product-card:hover { box-shadow: 0 12px 44px rgba(0,0,0,0.5); border-color: transparent; } [data-theme="dark"] .product-card h3 { color: rgba(255,255,255,0.90); } [data-theme="dark"] .product-card p { color: rgba(255,255,255,0.52); } [data-theme="dark"] .pc-feature { color: rgba(255,255,255,0.52); } [data-theme="dark"] .pc-price { color: rgba(255,255,255,0.35); } [data-theme="dark"] .pc-price strong { color: rgba(255,255,255,0.88); } [data-theme="dark"] .pc-link { color: var(--gold); } /* Steps — fix spécificité : .page-section.alt .step-num [spec 20] > .step-num [spec 10] Utiliser !important + multi-sélecteurs pour garantir la victoire en dark mode */ [data-theme="dark"] .step-num, [data-theme="dark"] .page-section .step-num, [data-theme="dark"] .page-section.alt .step-num, [data-theme="dark"] .page-section.dark .step-num { background: rgba(212,175,55,0.14) !important; color: var(--gold) !important; border-color: rgba(212,175,55,0.5) !important; box-shadow: 0 0 0 4px rgba(212,175,55,0.07) !important; } [data-theme="dark"] .step-item h4 { color: rgba(255,255,255,0.88); } [data-theme="dark"] .step-item p { color: rgba(255,255,255,0.52); } /* Feature rows */ [data-theme="dark"] .feature-row { background: #142235; border-color: rgba(255,255,255,0.07); } [data-theme="dark"] .feature-row:hover { border-color: var(--gold); } [data-theme="dark"] .fr-body h4 { color: rgba(255,255,255,0.90); } [data-theme="dark"] .fr-body p { color: rgba(255,255,255,0.52); } /* Rates table */ [data-theme="dark"] .rates-table-wrap { border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .rates-table { background: #142235; } [data-theme="dark"] .rates-table td { border-bottom-color: rgba(255,255,255,0.06); color: rgba(255,255,255,0.80); } [data-theme="dark"] .rates-table tr:hover td { background: rgba(255,255,255,0.04); } [data-theme="dark"] .rate-val { color: rgba(255,255,255,0.92); } /* FAQ */ [data-theme="dark"] .faq-item { background: #142235; border-color: rgba(255,255,255,0.07); } [data-theme="dark"] .faq-question { color: rgba(255,255,255,0.88); } [data-theme="dark"] .faq-question:hover { background: rgba(255,255,255,0.04); } [data-theme="dark"] .faq-answer { color: rgba(255,255,255,0.60); } /* ══════════════════════════════════════════════════════ DARK MODE — PAGE À PROPOS (classes spécifiques) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .micro-section { background: #0d1b2e; } [data-theme="dark"] .micro-header p { color: rgba(255,255,255,0.60); } [data-theme="dark"] .micro-text p { color: rgba(255,255,255,0.60); } [data-theme="dark"] .micro-text h3 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .micro-pillar { background: #142235; border-left-color: var(--gold); } [data-theme="dark"] .micro-pillar:hover { background: #1a2d42; box-shadow: 0 4px 20px rgba(0,0,0,0.35); } [data-theme="dark"] .mp-title { color: rgba(255,255,255,0.88); } [data-theme="dark"] .mp-desc { color: rgba(255,255,255,0.55); } [data-theme="dark"] .timeline-section { background: #0a1524 !important; } [data-theme="dark"] .tl-card { background: #142235 !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .tl-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .tl-year { color: var(--gold) !important; } [data-theme="dark"] .tl-desc { color: rgba(255,255,255,0.58) !important; } [data-theme="dark"] .impact-section { background: #0d1b2e; } [data-theme="dark"] .impact-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .impact-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(212,175,55,0.3); } [data-theme="dark"] .ic-label { color: rgba(255,255,255,0.50); } [data-theme="dark"] .impact-header p { color: rgba(255,255,255,0.60); } [data-theme="dark"] .impact-header h2 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .governance-section { background: #0a1524; } [data-theme="dark"] .governance-section h2 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .governance-section > * > p { color: rgba(255,255,255,0.60); } [data-theme="dark"] .gov-card, [data-theme="dark"] .team-card, [data-theme="dark"] .tc-card { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .gov-name, [data-theme="dark"] .tc-name { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .gov-role, [data-theme="dark"] .tc-role { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .tc-bio { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .certifications-section, [data-theme="dark"] .about-values-section, [data-theme="dark"] .values-section { background: #0d1b2e; } [data-theme="dark"] .cert-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .cert-name { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .cert-desc { color: rgba(255,255,255,0.52) !important; } [data-theme="dark"] .values-section h2 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .values-section p { color: rgba(255,255,255,0.60); } /* ══════════════════════════════════════════════════════ DARK MODE — AUTRES PAGES (epargne, credits, etc.) ══════════════════════════════════════════════════════ */ /* Sections génériques blanches dans les pages */ [data-theme="dark"] .ep-section, [data-theme="dark"] .cr-section, [data-theme="dark"] .inv-section, [data-theme="dark"] .ass-section, [data-theme="dark"] .bm-section, [data-theme="dark"] .be-section, [data-theme="dark"] .cc-section, [data-theme="dark"] .ci-section, [data-theme="dark"] .blog-section, [data-theme="dark"] .press-section, [data-theme="dark"] .career-section, [data-theme="dark"] .login-section, [data-theme="dark"] .reset-section { background: #0d1b2e; } /* Sections grises */ [data-theme="dark"] .ep-section.alt, [data-theme="dark"] .cr-section.alt, [data-theme="dark"] .blog-section.alt, [data-theme="dark"] .career-section.alt { background: #0a1524; } /* Cards génériques avec fond blanc */ [data-theme="dark"] .ep-card, [data-theme="dark"] .cr-card, [data-theme="dark"] .career-card, [data-theme="dark"] .blog-card, [data-theme="dark"] .press-card, [data-theme="dark"] .inv-card, [data-theme="dark"] .ass-card, [data-theme="dark"] .info-card, [data-theme="dark"] .offer-card, [data-theme="dark"] .guarantee-card, [data-theme="dark"] .loan-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } /* Tableaux dans les pages */ [data-theme="dark"] table:not(.rates-table) { background: #142235; } [data-theme="dark"] table:not(.rates-table) td, [data-theme="dark"] table:not(.rates-table) th { border-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.80); } [data-theme="dark"] table:not(.rates-table) tr:hover td { background: rgba(255,255,255,0.04); } [data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); } /* Login / Reset password */ [data-theme="dark"] .login-box, [data-theme="dark"] .auth-box, [data-theme="dark"] .reset-box, [data-theme="dark"] .form-card { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .login-label, [data-theme="dark"] .form-label { color: rgba(255,255,255,0.78) !important; } /* Breadcrumbs */ [data-theme="dark"] .breadcrumb a { color: var(--gold); } /* ══════════════════════════════════════════════════════ DARK MODE — LIENS & TEXTE GÉNÉRAL DANS SECTIONS CLAIRES ══════════════════════════════════════════════════════ */ [data-theme="dark"] .page-section h2, [data-theme="dark"] .page-section h3, [data-theme="dark"] .page-section h4 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .page-section.dark h2, [data-theme="dark"] .page-section.dark h3, [data-theme="dark"] .page-section.dark h4 { color: var(--white); } [data-theme="dark"] .page-section p:not([class]) { color: rgba(255,255,255,0.60); } /* ══════════════════════════════════════════════════════ DARK MODE — SECTION HERO ABOUT (classes inline de about.html) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .ah-mini-stat { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .ah-mini-stat:hover { background: rgba(212,175,55,0.08) !important; border-color: rgba(212,175,55,0.2) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — ABOUT.HTML (valeurs, équipe) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .values-section { background: #0d1b2e; } [data-theme="dark"] .values-header h2 { color: rgba(255,255,255,0.92); } [data-theme="dark"] .values-header p { color: rgba(255,255,255,0.60); } [data-theme="dark"] .vi-icon-wrap { background: #142235 !important; } [data-theme="dark"] .vi-body h4 { color: rgba(255,255,255,0.90); } [data-theme="dark"] .vi-body p { color: rgba(255,255,255,0.58); } [data-theme="dark"] .team-section { background: #0a1524; } [data-theme="dark"] .team-card { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .tc-name { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .tc-bio { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .tc-link { background: #1a2d42 !important; color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .tc-link:hover { background: var(--navy) !important; color: var(--gold) !important; } /* Micro-section heading overrides (inline style color:var(--navy)) */ [data-theme="dark"] .micro-header h2 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .micro-text h3 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .micro-text p { color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .micro-header p { color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .mp-title { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .mp-desc { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .micro-pillar:hover { background: #1a2d42 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.35); } /* Timeline heading overrides */ [data-theme="dark"] .tl-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .tl-desc { color: rgba(255,255,255,0.58) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — CARRIERES.HTML ══════════════════════════════════════════════════════ */ [data-theme="dark"] .culture-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .cc-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .cc-desc { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .job-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .job-card:hover { border-color: rgba(212,175,55,0.5) !important; } [data-theme="dark"] .job-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .job-desc { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .job-date { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .benefit-item { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .benefit-item:hover { border-color: rgba(212,175,55,0.5) !important; } [data-theme="dark"] .benefit-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .benefit-desc { color: rgba(255,255,255,0.55) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — PRESSE.HTML ══════════════════════════════════════════════════════ */ [data-theme="dark"] .press-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .press-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .press-excerpt { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .press-link { color: var(--gold) !important; } [data-theme="dark"] .kit-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .kit-title { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .kit-desc { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .media-logo { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.50) !important; } [data-theme="dark"] .media-logo:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: rgba(212,175,55,0.08) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — BLOG.HTML ══════════════════════════════════════════════════════ */ [data-theme="dark"] .blog-cat { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .blog-cat:hover, [data-theme="dark"] .blog-cat.active { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; } [data-theme="dark"] .blog-side-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .bsc-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .bsc-date, [data-theme="dark"] .bsc-cat { color: rgba(255,255,255,0.38) !important; } [data-theme="dark"] .article-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .ac-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .ac-excerpt { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .ac-read { color: var(--gold) !important; } [data-theme="dark"] .ac-meta { color: rgba(255,255,255,0.38) !important; } /* Newsletter blog input */ [data-theme="dark"] .nb-input { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.85) !important; border: 1px solid rgba(255,255,255,0.12) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — BANQUE-MOBILE.HTML ══════════════════════════════════════════════════════ */ [data-theme="dark"] .app-feature-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .afc-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .afc-desc { color: rgba(255,255,255,0.55) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — BANQUE-ENTREPRISE.HTML ══════════════════════════════════════════════════════ */ [data-theme="dark"] .client-logo { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.50) !important; } [data-theme="dark"] .client-logo:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: rgba(212,175,55,0.08) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — ÉPARGNE-PLACEMENTS.HTML (simulateur) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .simulateur { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .sim-title { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .sim-field label { color: rgba(255,255,255,0.50) !important; } [data-theme="dark"] .sim-field input, [data-theme="dark"] .sim-field select { background: #0d1b2e !important; border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .sim-field input:focus, [data-theme="dark"] .sim-field select:focus { border-color: var(--gold) !important; background: #0d1b2e !important; } /* ══════════════════════════════════════════════════════ DARK MODE — CONTACT.HTML (formulaire complet) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .contact-section { background: #0a1524 !important; } [data-theme="dark"] .contact-form-panel { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 4px 32px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .cfp-head h2 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .cfp-head p { color: rgba(255,255,255,0.58) !important; } /* Floating label inputs */ [data-theme="dark"] .fl-input, [data-theme="dark"] .fl-select, [data-theme="dark"] .fl-textarea { background: #0d1b2e !important; border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .fl-input:focus, [data-theme="dark"] .fl-select:focus, [data-theme="dark"] .fl-textarea:focus { border-color: var(--gold) !important; background: #0d1b2e !important; box-shadow: 0 0 0 4px rgba(212,175,55,0.10) !important; } [data-theme="dark"] .fl-label { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .fl-input:focus ~ .fl-label, [data-theme="dark"] .fl-textarea:focus ~ .fl-label { color: var(--gold) !important; } [data-theme="dark"] .cf-check label { color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .cf-check input[type="checkbox"] { border-color: rgba(255,255,255,0.18) !important; accent-color: var(--gold) !important; } [data-theme="dark"] .cf-success h3 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .cf-success p { color: rgba(255,255,255,0.60) !important; } /* Agences */ [data-theme="dark"] .agences-section { background: #0d1b2e !important; } [data-theme="dark"] .ag-card { background: #142235; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .ag-card:hover { border-color: rgba(212,175,55,0.5) !important; } [data-theme="dark"] .ag-card-body h3 { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .ag-address { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .ag-hours { color: rgba(255,255,255,0.52) !important; } [data-theme="dark"] .ag-tel { background: #1a2d42 !important; color: rgba(255,255,255,0.80) !important; } [data-theme="dark"] .ag-tel:hover { background: var(--navy) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════ DARK MODE — FAQ.HTML (sidebar + items avancés) ══════════════════════════════════════════════════════ */ [data-theme="dark"] .faq-sidebar h3 { color: rgba(255,255,255,0.38) !important; } [data-theme="dark"] .faq-nav-item { color: rgba(255,255,255,0.62) !important; background: transparent !important; } [data-theme="dark"] .faq-nav-item:hover { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .faq-nav-item.active { background: var(--navy) !important; color: #fff !important; } [data-theme="dark"] .faq-search { background: #0d1b2e !important; border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .faq-search:focus { border-color: var(--gold) !important; } [data-theme="dark"] .faq-search::placeholder { color: rgba(255,255,255,0.28) !important; } [data-theme="dark"] .faq-section-title { color: rgba(255,255,255,0.92) !important; border-bottom-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .faq-q-icon { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.80) !important; } [data-theme="dark"] .faq-answer a { color: var(--gold) !important; } [data-theme="dark"] .quick-link { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .quick-link:hover { border-color: rgba(212,175,55,0.5) !important; } [data-theme="dark"] .ql-title { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .ql-count { color: rgba(255,255,255,0.38) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — SMOOTH TRANSITION GLOBALE ══════════════════════════════════════════════════════ */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.3s; transition-timing-function: ease; } /* Exclure les animations existantes de cette transition */ .hc-slide, .hc-content, .hero-circle, .ahb-orb, [data-aos], .sr-item, .page-hero-icon-wrap, .phb-circle, .tl-dot-inner, .hc-track, .bank-card, .cardFloat, .testimonials-track { transition: none !important; } /* Réappliquer les transitions spécifiques après reset */ .hc-slide { transition: opacity 0.9s ease !important; } .hc-content { transition: opacity 0.75s ease 0.35s, transform 0.75s ease 0.35s !important; } [data-aos] { transition: opacity 0.6s ease, transform 0.6s ease !important; } .sr-item { transition: opacity 0.68s cubic-bezier(0.4,0,0.2,1), transform 0.68s cubic-bezier(0.4,0,0.2,1) !important; } .testimonials-track { transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94) !important; } /* ══════════════════════════════════════════════════════ DARK MODE — ADMIN PANEL (admin.html) Override des variables CSS admin + styles premium ══════════════════════════════════════════════════════ */ /* ── Variables spécifiques à l'admin (noms utilisés dans admin.css) ── */ [data-theme="dark"] { --bg: #0a1524; --surface: #142235; --border: rgba(255,255,255,0.08); --text: rgba(255,255,255,0.92); --text-2: rgba(255,255,255,0.65); --text-3: rgba(255,255,255,0.38); --shadow: 0 2px 12px rgba(0,0,0,0.40); --shadow-md: 0 4px 28px rgba(0,0,0,0.55); } /* ── Body + wrapper admin ── */ [data-theme="dark"] .main-wrapper { background: #0a1524; } /* ── Topbar admin — glassmorphism premium ── */ [data-theme="dark"] .topbar-admin { background: rgba(20,34,53,0.97) !important; backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,0.07) !important; box-shadow: 0 2px 24px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .breadcrumb { color: rgba(255,255,255,0.38) !important; } [data-theme="dark"] .bc-sep { color: rgba(255,255,255,0.18) !important; } [data-theme="dark"] .bc-current { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .topbar-date { color: rgba(255,255,255,0.42) !important; } [data-theme="dark"] .menu-toggle-admin span { background: rgba(255,255,255,0.80) !important; } /* ── Topbar icon buttons ── */ [data-theme="dark"] .topbar-icon-btn { background: #1a2d42 !important; border-color: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .topbar-icon-btn:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(212,175,55,0.40) !important; } [data-theme="dark"] .topbar-icon-btn svg { color: rgba(255,255,255,0.65) !important; } [data-theme="dark"] .notif-dot { border-color: #1a2d42 !important; } /* ── Section titles ── */ [data-theme="dark"] .section-title h1 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .section-title p { color: rgba(255,255,255,0.50) !important; } /* ── KPI cards — gradient premium ── */ [data-theme="dark"] .kpi-card { background: linear-gradient(145deg, #142235 0%, #1a2d42 100%) !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .kpi-card:hover { box-shadow: 0 6px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.18) !important; border-color: rgba(212,175,55,0.22) !important; } [data-theme="dark"] .kpi-label { color: rgba(255,255,255,0.45) !important; } [data-theme="dark"] .kpi-value { color: rgba(255,255,255,0.92) !important; } /* ── Chart cards ── */ [data-theme="dark"] .chart-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .chart-header h3 { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .chart-header p { color: rgba(255,255,255,0.42) !important; } [data-theme="dark"] .chart-legend { color: rgba(255,255,255,0.55) !important; } /* ── Stats summary bar ── */ [data-theme="dark"] .stats-summary-bar { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .ssb-item { border-right-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .ssb-num { color: var(--gold) !important; } [data-theme="dark"] .ssb-label { color: rgba(255,255,255,0.42) !important; } /* ── Card containers (table/activity/message cards) ── */ [data-theme="dark"] .big-table-card, [data-theme="dark"] .mini-table-card, [data-theme="dark"] .activity-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .card-header-row h3 { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .view-all { color: var(--gold) !important; } /* ── Data tables ── */ [data-theme="dark"] .data-table th { color: rgba(255,255,255,0.40) !important; border-bottom-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .data-table td { color: rgba(255,255,255,0.82) !important; border-bottom-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .data-table tbody tr:hover td { background: rgba(255,255,255,0.03) !important; } [data-theme="dark"] .messages-table tr.unread td { background: rgba(59,130,246,0.06) !important; } [data-theme="dark"] .tbl-btn { background: #0d1b2e !important; border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .tbl-btn:hover { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; } [data-theme="dark"] .tbl-btn.danger:hover { background: #ef4444 !important; border-color: #ef4444 !important; } /* ── Toolbar + filters ── */ [data-theme="dark"] .tab-filter { background: #0d1b2e !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .tf-btn { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .tf-btn:hover:not(.active) { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .tf-btn:not(.active) .tf-count { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.45) !important; } /* ── Search bars ── */ [data-theme="dark"] .search-bar, [data-theme="dark"] .search-mini { background: #0d1b2e !important; border-color: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .search-bar input, [data-theme="dark"] .search-mini input { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .search-bar input::placeholder, [data-theme="dark"] .search-mini input::placeholder { color: rgba(255,255,255,0.28) !important; } /* ── Filter pills ── */ [data-theme="dark"] .pill { background: #0d1b2e !important; border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .pill:hover:not(.active) { border-color: rgba(212,175,55,0.40) !important; color: var(--gold) !important; } /* ── Badge gray ── */ [data-theme="dark"] .badge-gray { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.50) !important; } /* ── Mini messages ── */ [data-theme="dark"] .mini-msg:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .mini-msg-name { color: rgba(255,255,255,0.85) !important; } /* ── Activity ── */ [data-theme="dark"] .activity-text { color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .activity-text strong { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .activity-line { background: rgba(255,255,255,0.08) !important; } /* ── Legend rows ── */ [data-theme="dark"] .legend-row { color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .legend-row span:last-child { color: rgba(255,255,255,0.85) !important; } /* ── Annonce cards ── */ [data-theme="dark"] .annonce-card { background: linear-gradient(145deg, #142235 0%, #1a2d42 100%) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .annonce-card:hover { border-color: rgba(212,175,55,0.22) !important; box-shadow: 0 6px 32px rgba(0,0,0,0.50) !important; } [data-theme="dark"] .annonce-card h3 { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .annonce-card p { color: rgba(255,255,255,0.58) !important; } [data-theme="dark"] .annonce-meta { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .annonce-dates { color: rgba(255,255,255,0.38) !important; } /* ── Pub cards ── */ [data-theme="dark"] .pub-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .pub-card:hover { border-color: rgba(212,175,55,0.22) !important; } [data-theme="dark"] .pub-preview { background: #0d1b2e !important; } [data-theme="dark"] .pub-preview-placeholder { color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .pub-body h3 { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .pub-body p { color: rgba(255,255,255,0.45) !important; } /* ── Article cards ── */ [data-theme="dark"] .article-card { background: #142235 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .article-card:hover { border-color: rgba(212,175,55,0.22) !important; } [data-theme="dark"] .article-body h3 { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .article-body p { color: rgba(255,255,255,0.58) !important; } [data-theme="dark"] .article-footer { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .article-date { color: rgba(255,255,255,0.38) !important; } /* ── Modals — premium glass ── */ [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.72) !important; backdrop-filter: blur(6px) !important; } [data-theme="dark"] .modal-card { background: #142235 !important; box-shadow: 0 28px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07) !important; } [data-theme="dark"] .modal-header { border-bottom-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .modal-header h3 { color: rgba(255,255,255,0.92) !important; } [data-theme="dark"] .modal-close { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.55) !important; } [data-theme="dark"] .modal-close:hover { background: #ef4444 !important; color: #fff !important; } [data-theme="dark"] .modal-meta { background: #0d1b2e !important; border-bottom-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .modal-meta strong { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .modal-body { color: rgba(255,255,255,0.70) !important; } [data-theme="dark"] .modal-actions { border-top-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .btn-archive-modal, [data-theme="dark"] .btn-cancel { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.72) !important; } [data-theme="dark"] .btn-archive-modal:hover, [data-theme="dark"] .btn-cancel:hover { border-color: rgba(212,175,55,0.40) !important; color: var(--gold) !important; background: rgba(212,175,55,0.07) !important; } /* ── Modal form inputs ── */ [data-theme="dark"] .modal-form .form-group label { color: rgba(255,255,255,0.75) !important; } [data-theme="dark"] .modal-form .form-group input, [data-theme="dark"] .modal-form .form-group select, [data-theme="dark"] .modal-form .form-group textarea { background: #0d1b2e !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .modal-form .form-group input:focus, [data-theme="dark"] .modal-form .form-group select:focus, [data-theme="dark"] .modal-form .form-group textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(212,175,55,0.12) !important; } [data-theme="dark"] .modal-form .form-group input::placeholder, [data-theme="dark"] .modal-form .form-group textarea::placeholder { color: rgba(255,255,255,0.28) !important; } [data-theme="dark"] .upload-zone { border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.38) !important; } [data-theme="dark"] .upload-zone:hover { border-color: rgba(212,175,55,0.40) !important; background: rgba(212,175,55,0.04) !important; } [data-theme="dark"] .upload-link { color: var(--gold) !important; } /* ── Notification panel ── */ [data-theme="dark"] .notif-panel { background: #142235 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.55) !important; } [data-theme="dark"] .notif-panel-header { border-bottom-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .notif-panel-header h4 { color: rgba(255,255,255,0.88) !important; } [data-theme="dark"] .notif-panel-header button { color: var(--gold) !important; } [data-theme="dark"] .notif-item { border-bottom-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .notif-item.unread { background: rgba(59,130,246,0.06) !important; } [data-theme="dark"] .notif-text { color: rgba(255,255,255,0.65) !important; } [data-theme="dark"] .notif-time { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .data-table code { color: var(--gold) !important; }