/* ================================================================== * Easy Softwares — Moteur de thèmes * ------------------------------------------------------------------ * Les couleurs/typographies viennent du bloc :root injecté par * ThemeService::cssVariables(). Ce fichier applique les VARIANTES de * présentation (mode clair/sombre, header, héros, cartes, footer, * boutons) posées en data-* sur — ce qui fait qu'un thème * change réellement toute l'allure du site, pas seulement la palette. * ================================================================== */ :root { --es-surface: #ffffff; /* fond des cartes */ --es-surface-2: #f8fafd; /* fond secondaire */ } /* ================================================================== * MODE SOMBRE — bascule l'intégralité du site * ================================================================ */ body[data-mode="dark"] { --es-white: #0B1220; --es-light: #131E33; --es-ink: #DCE7F5; --es-muted: #8CA0BD; --es-border: #26334C; --es-surface: #16223A; --es-surface-2: #0F1A2E; background: #0B1220; color: var(--es-ink); } body[data-mode="dark"] h1, body[data-mode="dark"] h2, body[data-mode="dark"] h3, body[data-mode="dark"] h4, body[data-mode="dark"] h5, body[data-mode="dark"] .section-title, body[data-mode="dark"] .font-heading { color: #F1F6FC; } /* Surfaces (cartes & blocs clairs) → surface sombre */ body[data-mode="dark"] .product-card, body[data-mode="dark"] .feature-card, body[data-mode="dark"] .team-card, body[data-mode="dark"] .testimonial-card, body[data-mode="dark"] .tech-card, body[data-mode="dark"] .tech-badge, body[data-mode="dark"] .sx-card, body[data-mode="dark"] .sx-choice, body[data-mode="dark"] .lead-word, body[data-mode="dark"] .ceo-force, body[data-mode="dark"] .ceo-step-body, body[data-mode="dark"] .ceo-letter, body[data-mode="dark"] .ceo-products, body[data-mode="dark"] .ceo-dom, body[data-mode="dark"] .partner-card, body[data-mode="dark"] .client-chip, body[data-mode="dark"] .process-card, body[data-mode="dark"] .fc-card, body[data-mode="dark"] .hero-float-card, body[data-mode="dark"] .faq-accordion .accordion-item, body[data-mode="dark"] .accordion-button { background: var(--es-surface) !important; border-color: var(--es-border); color: var(--es-ink); } /* Titres/textes internes aux cartes qui étaient forcés en sombre */ body[data-mode="dark"] .product-card h3 a, body[data-mode="dark"] .team-card .name, body[data-mode="dark"] .tech-card .name, body[data-mode="dark"] .tech-badge .name, body[data-mode="dark"] .lw-name, body[data-mode="dark"] .sx-card-title, body[data-mode="dark"] .testimonial-card .content, body[data-mode="dark"] .testimonial-card .author .name, body[data-mode="dark"] .accordion-button, body[data-mode="dark"] .client-chip-text .name, body[data-mode="dark"] .partner-name { color: #F1F6FC !important; } body[data-mode="dark"] .accordion-button:not(.collapsed) { background: var(--es-surface-2) !important; } body[data-mode="dark"] .bg-light-es { background: var(--es-surface-2) !important; } body[data-mode="dark"] .page-hero { background: linear-gradient(180deg, var(--es-surface-2), var(--es-white)); } body[data-mode="dark"] .es-stats { box-shadow: 0 0 0 1px var(--es-border); } body[data-mode="dark"] .form-control, body[data-mode="dark"] .form-select { background: var(--es-surface-2); border-color: var(--es-border); color: var(--es-ink); } body[data-mode="dark"] .form-control::placeholder { color: #6C7F9C; } /* ================================================================== * BOUTONS — forme * ================================================================ */ body[data-btn="pill"] .btn, body[data-btn="pill"] .btn-es-primary, body[data-btn="pill"] .btn-es-outline, body[data-btn="pill"] .btn-es-gold, body[data-btn="pill"] .btn-es-ghost, body[data-btn="pill"] .hero-badge, body[data-btn="pill"] .pill { border-radius: 999px !important; } body[data-btn="square"] .btn, body[data-btn="square"] .btn-es-primary, body[data-btn="square"] .btn-es-outline, body[data-btn="square"] .btn-es-gold, body[data-btn="square"] .btn-es-ghost { border-radius: 3px !important; } /* ================================================================== * CARTES — traitement (ombre / bordure / plat) * ================================================================ */ body[data-card="border"] .product-card, body[data-card="border"] .feature-card, body[data-card="border"] .team-card, body[data-card="border"] .testimonial-card, body[data-card="border"] .tech-card, body[data-card="border"] .sx-card, body[data-card="border"] .lead-word { box-shadow: none !important; border-width: 1.5px; } body[data-card="flat"] .product-card, body[data-card="flat"] .feature-card, body[data-card="flat"] .team-card, body[data-card="flat"] .testimonial-card, body[data-card="flat"] .tech-card, body[data-card="flat"] .sx-card, body[data-card="flat"] .lead-word { box-shadow: none !important; border-color: transparent !important; background: var(--es-surface-2) !important; } body[data-card="flat"][data-mode="dark"] .product-card, body[data-card="flat"][data-mode="dark"] .feature-card, body[data-card="flat"][data-mode="dark"] .team-card, body[data-card="flat"][data-mode="dark"] .sx-card { background: var(--es-surface) !important; } /* ================================================================== * HEADER — habillage * ================================================================ */ body[data-header="dark"] .es-header { background: var(--es-dark); border-bottom-color: rgba(255,255,255,.08); } body[data-header="dark"] .es-header .nav-link { color: #C9D6E8; } body[data-header="dark"] .es-header .nav-link:hover, body[data-header="dark"] .es-header .nav-link.active { color: #fff; background: rgba(255,255,255,.08); } body[data-header="dark"] .es-header .nav-link > i { color: #8CA0BD; } body[data-header="dark"] .es-header .hdr-tool, body[data-header="dark"] .es-header .hdr-btn:not(.hdr-cta) { color: #C9D6E8; } body[data-header="dark"] .es-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.35); } body[data-header="glass"] .es-header { background: rgba(255,255,255,.55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: rgba(255,255,255,.4); } body[data-header="glass"][data-mode="dark"] .es-header { background: rgba(11,18,32,.6); } body[data-header="gradient"] .es-header { background: var(--es-gradient); border-bottom: none; } body[data-header="gradient"] .es-header .nav-link { color: rgba(255,255,255,.9); } body[data-header="gradient"] .es-header .nav-link:hover, body[data-header="gradient"] .es-header .nav-link.active { color: #fff; background: rgba(255,255,255,.16); } body[data-header="gradient"] .es-header .nav-link > i, body[data-header="gradient"] .es-header .hdr-tool { color: rgba(255,255,255,.85); } /* ================================================================== * HÉROS — habillage * ================================================================ */ body[data-hero="dark"] .es-hero, body[data-hero="dark"] .page-hero { background: radial-gradient(120% 130% at 15% 0%, #0E2A54 0%, var(--es-dark) 60%, #04122A 100%); border-bottom: none; } body[data-hero="dark"] .es-hero h1, body[data-hero="dark"] .page-hero .section-title, body[data-hero="dark"] .es-hero .section-kicker, body[data-hero="dark"] .page-hero .section-kicker { color: #fff; } body[data-hero="dark"] .es-hero .lead, body[data-hero="dark"] .page-hero .section-sub { color: #C6D8EE; } body[data-hero="gradient"] .es-hero, body[data-hero="gradient"] .page-hero { background: linear-gradient(120deg, var(--es-primary), var(--es-secondary)); border-bottom: none; } body[data-hero="gradient"] .es-hero h1, body[data-hero="gradient"] .page-hero .section-title { color: #fff; } body[data-hero="gradient"] .es-hero h1 .grad { -webkit-text-fill-color: #FFE9B8; color: #FFE9B8; } body[data-hero="gradient"] .es-hero .lead, body[data-hero="gradient"] .page-hero .section-sub { color: rgba(255,255,255,.9); } body[data-hero="gradient"] .hero-badge { background: rgba(255,255,255,.18); color: #fff; } body[data-hero="split"] .es-hero { background: linear-gradient(100deg, var(--es-light) 0%, var(--es-light) 52%, #ffffff 52%, #ffffff 100%); } body[data-hero="split"][data-mode="dark"] .es-hero { background: linear-gradient(100deg, var(--es-surface-2) 0%, var(--es-surface-2) 52%, var(--es-white) 52%); } /* ================================================================== * FOOTER — habillage * ================================================================ */ body[data-footer="light"] .es-footer { background: var(--es-light); color: var(--es-ink); } body[data-footer="light"] .es-footer h6 { color: var(--es-dark); } body[data-footer="light"] .es-footer a, body[data-footer="light"] .es-footer .about { color: var(--es-muted); } body[data-footer="light"] .es-footer a:hover { color: var(--es-primary); } body[data-footer="light"] .es-footer .bottom { border-top-color: var(--es-border); } body[data-footer="gradient"] .es-footer { background: linear-gradient(135deg, var(--es-dark), var(--es-primary)); } /* ================================================================== * Densité — compacité globale pilotée par --es-density * (déjà consommée par app.css ; ici on ajuste les sections) * ================================================================ */ body { transition: background-color .25s ease, color .25s ease; }