/* ───────────────────────────────────────────────────────────────────────── DARK-MODE.CSS — Frontend dark theme Activé via : [data-theme="dark"] sur Persistance : localStorage('enovatic-theme') ───────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════ 1. VARIABLES — override de la palette de base ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Couleurs sémantiques */ --color-bg: #0D1117; --color-text: #C9D1D9; --color-muted: #8B949E; --color-border: #30363D; --color-dark: #F0F6FC; /* inversé : utilisé pour titres sur fond clair */ --shadow-card: 0 1px 24px rgba(0, 0, 0, 0.40); /* Palette slate entièrement inversée */ --slate-900: #F0F6FC; --slate-800: #E6EDF3; --slate-700: #C9D1D9; --slate-600: #8B949E; --slate-500: #6E7681; --slate-400: #484F58; --slate-300: #3D444D; --slate-200: #2D333B; --slate-100: #22272E; --slate-50: #1C2128; /* Fuchsia — légèrement plus lumineux sur fond sombre */ --fushia-50: #2A0E31; --fushia-100: #3D1450; /* Blue — teinte sombre pour intérieur */ --blue-50: #0D1E3D; --blue-100: #122240; /* Emerald — teinte sombre */ --emerald-50: #0A2217; --emerald-100: #112E20; } /* ══════════════════════════════════════════════════════════════════════════ 2. SURFACES GÉNÉRIQUES — body, sections, page-hero ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] body { background-color: var(--color-bg); color: var(--color-text); } [data-theme="dark"] .section--alt { background: #161B22; } [data-theme="dark"] .page-hero { background: transparent; /* ::before fournit le fond + les blobs */ } [data-theme="dark"] .page-hero::before { background: radial-gradient(ellipse 70% 70% at 0% 52%, rgba(192, 38, 211, 0.25) 0%, transparent 68%), radial-gradient(ellipse 100% 100% at 100% 0%, rgba(37, 99, 235, 0.20) 0%, transparent 68%), #0D1117; } /* Footer — gradient bleu-marine natif claque sur le fond #0D1117 */ [data-theme="dark"] .site-footer { background: linear-gradient(135deg, #0D1117 0%, #1C2128 100%); border-top: 1px solid var(--color-border); } [data-theme="dark"] .footer-top{ border-color: var(--color-border); } [data-theme="dark"] .site-footer { position: relative; overflow: hidden; } [data-theme="dark"] .site-footer::after { content: ''; position: absolute; top: -200px; left: 0; right: 0; bottom: -220px; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 100% 70% at 0% 70%, rgba(192, 38, 211, 0.25) 0%, transparent 50%), radial-gradient(ellipse 70% 100% at 90% 0%, rgba(37, 99, 235, 0.20) 0%, transparent 50%); } [data-theme="dark"] .site-footer { position: relative; overflow: hidden; } [data-theme="dark"] .page-hero__breadcrumb ol { background: rgba(255,255,255,.04); border-color: var(--color-border); color: var(--color-muted); } [data-theme="dark"] .page-hero__breadcrumb li[aria-current] span { color: var(--slate-900); /* = F0F6FC */ } /* ══════════════════════════════════════════════════════════════════════════ 3. TOP HEADER — déjà sombre, ajustements mineurs ══════════════════════════════════════════════════════════════════════════ */ /* Fond du top-header forcé sombre (--slate-800 est inversé en palette dark) */ [data-theme="dark"] .top-header { background: #161B22; } [data-theme="dark"] .top-header__tagline, [data-theme="dark"] .top-header__tagline i { color: #8B949E; } [data-theme="dark"] .top-header__btn { color: #8B949E; } [data-theme="dark"] .top-header__btn:hover { color: #F0F6FC; } /* Bouton toggle dark mode — intégré comme un lien du top-header */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 0; background: transparent; border: 0; padding-left: 0; margin-left: 6px; cursor: pointer; color: rgba(255,255,255,.65); transition: color var(--transition); flex-shrink: 0; } .dark-mode-toggle:hover { background: transparent; color: #fff; } .dark-mode-toggle i { font-size: 15px; line-height: 1; pointer-events: none; } /* ══════════════════════════════════════════════════════════════════════════ 4. SITE HEADER / NAV ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .site-header.is-scrolled { background: #00000045; box-shadow: 0 4px 20px #0000001a; backdrop-filter: blur(8px); } [data-theme="dark"] .header-nav.is-open { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .nav-toggle:hover { background: var(--slate-100); /* = #22272E */ } /* ── Logos : light affiché par défaut, dark masqué ── */ .site-branding .logo--dark { display: none; } .site-branding .logo--light { display: block; } [data-theme="dark"] .site-branding .logo--light { display: none; } [data-theme="dark"] .site-branding .logo--dark { display: block; } /* ══════════════════════════════════════════════════════════════════════════ 5. BUTTONS — les boutons primaires/accent gardent leurs couleurs vives seuls les variantes outline/ghost s'adaptent ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .btn--outline { background: transparent; color: var(--fushia-400); border-color: var(--fushia-400); } [data-theme="dark"] .btn--outline:hover { background: var(--fushia-600); color: #fff; } [data-theme="dark"] .btn--ghost { color: var(--fushia-400); border-color: var(--fushia-400); background: transparent; } [data-theme="dark"] .btn--ghost:hover { background: rgba(192,38,211,.15); border-color: var(--fushia-500); color: var(--fushia-300); } /* ══════════════════════════════════════════════════════════════════════════ 6. PAGINATION ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .pagination .page-numbers { background: #161B22; color: var(--slate-900); box-shadow: none; border: 1px solid var(--color-border); } [data-theme="dark"] .loop-pagination .page-numbers { background: #161B22; color: var(--slate-700); border-color: var(--color-border); } /* ══════════════════════════════════════════════════════════════════════════ 7. CARDS (cards.css) ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .blog-card, [data-theme="dark"] .formation-card, [data-theme="dark"] .realisation-card { background: #161B22; box-shadow: 0 1px 24px rgba(0,0,0,0.35); } [data-theme="dark"] .blog-card:hover, [data-theme="dark"] .formation-card:hover, [data-theme="dark"] .realisation-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.55); } [data-theme="dark"] .formation-card__thumb { background: var(--slate-100); } [data-theme="dark"] .blog-card__meta .cat-links a { background: var(--fushia-50); color: var(--fushia-400); } [data-theme="dark"] .link-more { background: var(--fushia-50); border-color: transparent; color: var(--fushia-400); } /* ══════════════════════════════════════════════════════════════════════════ 8. HOME (home.css) — hero blobs + svc-cards ══════════════════════════════════════════════════════════════════════════ */ /* Blobs adaptés au fond sombre — ::after utilisé dans home.css (pas ::before) */ [data-theme="dark"] .hero::after { background: radial-gradient(ellipse 70% 70% at 0% 52%, rgba(192, 38, 211, 0.25) 0%, transparent 68%), radial-gradient(ellipse 100% 100% at 100% 0%, rgba(37, 99, 235, 0.20) 0%, transparent 68%); } /* Petites cartes services (bento) */ [data-theme="dark"] .svc-card:not(.svc-card--featured) { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .svc-card--fushia .svc-card__icon { background: var(--fushia-50); } [data-theme="dark"] .svc-card--emerald .svc-card__icon { background: var(--emerald-50); } [data-theme="dark"] .svc-card--blue .svc-card__icon { background: var(--blue-50); } /* CTA cards (section CTA) */ [data-theme="dark"] .cta-card { background: #161B22; box-shadow: none; border: 1px solid var(--color-border); } /* ══════════════════════════════════════════════════════════════════════════ 9. LOOPS (loops.css) — filter bar, search, intro, cta ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .filter-bar { background: rgba(13, 17, 23, 0.90); border-color: var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,.30); } [data-theme="dark"] .loop-search { background: #1C2128; border-color: var(--color-border); } [data-theme="dark"] .loop-search input { color: var(--slate-900); } [data-theme="dark"] .filter-pill { color: var(--slate-700); border-color: var(--color-border); background: transparent; } [data-theme="dark"] .filter-pill:hover { background: var(--fushia-50); color: var(--fushia-400); border-color: var(--fushia-600); } [data-theme="dark"] .loop-pagination .page-numbers { background: #161B22; color: var(--slate-700); border-color: var(--color-border); } [data-theme="dark"] .loop-intro { background: #161B22; border-color: var(--color-border); } /* Loop CTA — var(--color-dark) = #F0F6FC en dark mode → gradient cassé */ [data-theme="dark"] .loop-cta { background: linear-gradient(135deg, #0f172a 0%, #2d1b69 100%); } /* ══════════════════════════════════════════════════════════════════════════ 10. SINGLES (singles.css) ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .single-aside { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .entry-nav__link { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .entry-nav__link:hover { background: var(--fushia-50); border-color: var(--fushia-600); } [data-theme="dark"] .entry-content blockquote { background: var(--fushia-50); border-left-color: var(--fushia-500); } [data-theme="dark"] .entry-content blockquote p { color: var(--slate-800); } [data-theme="dark"] .entry-content h2, [data-theme="dark"] .entry-content h3 { color: var(--slate-900); } [data-theme="dark"] .entry-content p, [data-theme="dark"] .entry-content li { color: var(--slate-700); } [data-theme="dark"] .entry-content strong { color: var(--slate-900); } /* Share buttons */ [data-theme="dark"] .share-btn { background: #1C2128; border-color: var(--color-border); color: var(--slate-700); } /* Formation sidebar card */ [data-theme="dark"] .formation-sidebar-card { background: #161B22; border-color: var(--color-border); } /* ══════════════════════════════════════════════════════════════════════════ 11. SERVICES (services.css) ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .svc-card-listing { background: #161B22; box-shadow: none; border: 1px solid var(--color-border); } [data-theme="dark"] .svc-card-listing:hover { box-shadow: 0 16px 48px rgba(0,0,0,.40); } [data-theme="dark"] .svc-offer-card { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .svc-adv-item { background: #161B22; } [data-theme="dark"] .svc-deliverable-item { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .svc-deliverable-item__icon { background: var(--emerald-50); color: var(--emerald-400); } [data-theme="dark"] .svc-accent-block { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .pricing-card { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .svc-feature-item { background: #161B22; border-color: var(--color-border); } /* ══════════════════════════════════════════════════════════════════════════ 12. LEGAL / ABOUT (legal.css) ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .legal-block { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .legal-toc { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .legal-toc__list li a { color: var(--slate-700); border-color: var(--color-border); } [data-theme="dark"] .legal-toc__list li a:hover, [data-theme="dark"] .legal-toc__list li a.is-active { border-color: var(--fushia-600); background: var(--fushia-600); color: #fff; } [data-theme="dark"] .legal-highlight { background: #1C2128; border-color: var(--color-border); } [data-theme="dark"] .legal-table { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .legal-table th { background: #1C2128; color: var(--slate-900); border-color: var(--color-border); } [data-theme="dark"] .legal-table td { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .about-stat-card { background: #161B22; border-color: var(--color-border); } [data-theme="dark"] .about-value-item { background: #161B22; border-color: var(--color-border); } /* ══════════════════════════════════════════════════════════════════════════ 13. CONTACT (contact.css) ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .contact-intro-banner { background: linear-gradient(135deg, var(--fushia-50) 0%, var(--blue-50) 100%); border-color: var(--fushia-100); } [data-theme="dark"] .contact-input, [data-theme="dark"] .contact-select, [data-theme="dark"] .contact-textarea { background: #1C2128; border-color: var(--color-border); color: var(--slate-900); } [data-theme="dark"] .contact-input:focus, [data-theme="dark"] .contact-select:focus, [data-theme="dark"] .contact-textarea:focus { border-color: var(--fushia-500); box-shadow: 0 0 0 3px rgba(212,70,239,.12); } [data-theme="dark"] .contact-input::placeholder, [data-theme="dark"] .contact-textarea::placeholder { color: var(--slate-400); } [data-theme="dark"] .contact-chip { background: #1C2128; border-color: var(--color-border); color: var(--color-muted); } [data-theme="dark"] .contact-chip-label input:checked + .contact-chip { background: var(--fushia-600); border-color: var(--fushia-600); color: #fff; } /* Le background est sur l'élément interne, pas sur le label parent */ [data-theme="dark"] .contact-type-card span { background: #1C2128; border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .contact-type-card:hover span, [data-theme="dark"] .contact-type-card input:checked + span { background: var(--fushia-50); border-color: var(--fushia-600); } [data-theme="dark"] .contact-type-card input:checked + span i { color: var(--fushia-400); } [data-theme="dark"] .contact-info-block { background: #1C2128; border-color: var(--color-border); } [data-theme="dark"] .contact-feedback--error { background: #2D0A0E; color: #FCA5A5; border-color: #7F1D1D; } [data-theme="dark"] .contact-feedback--success { background: #0A2217; color: #6EE7B7; border-color: #064E3B; } [data-theme="dark"] .contact-label { color: var(--slate-800); } [data-theme="dark"] .contact-check { border-color: var(--slate-200); color: var(--slate-900); background: var(--slate-50); } [data-theme="dark"] .legal-toc__header { border-bottom: 1px solid var(--fushia-900)!important; } [data-theme="dark"] .legal-cta { background: linear-gradient(135deg, var(--fushia-800) 0%, var(--blue-900) 100%); } [data-theme="dark"] .legal-cta__text p{ color: white!important; } [data-theme="dark"] .legal-intro { border: 1px solid var(--fushia-800); } [data-theme="dark"] .hero__image img { filter: saturate(2); }