/* ═══════════════════════════════════════════════════════════════════ TIMAJE — Theme Override CSS Universel ═══════════════════════════════════════════════════════════════════ Ce fichier permet à n'importe quelle page du site de basculer entre mode sombre et mode clair via [data-theme="light/dark"] sur . Stratégie : - Mode sombre = état par défaut (pages déjà sombres = inchangées) - Mode clair = overrides ciblés appliqués sur les patterns courants Pour les pages déjà claires natives (CGV, contact, etc.) qui utilisent des variables CSS standards (--bg, --text), on redéfinit ces variables en mode sombre. ═══════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────── Variables des pages "claires natives" (CGV, contact, success, etc.) On les redéfinit en mode sombre pour qu'elles basculent. ────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0a0f1a; --bg-alt: #16213e; --text: #e8e8e8; --text-light: rgba(255,255,255,.55); --border: rgba(255,255,255,.1); --secondary: #1a1a2e; } :root[data-theme="light"] { --bg: #fafaf7; --bg-alt: #f5f3ee; --text: #1a1a2e; --text-light: #6b7280; --border: #e5e7eb; --secondary: #2c3e50; } /* ────────────────────────────────────────────────────────────────── Bouton toggle thème — style commun à toutes les pages ────────────────────────────────────────────────────────────────── */ .theme-toggle { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important; color: rgba(255,255,255,.7) !important; padding: 6px 10px !important; border-radius: 6px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 600 !important; transition: all .2s !important; font-family: inherit !important; } .theme-toggle:hover { background: rgba(230,126,34,.1) !important; border-color: rgba(230,126,34,.3) !important; color: #e67e22 !important; } .theme-toggle svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } /* Style du toggle en mode clair (pour pages sombres natives qui basculent en clair) */ :root[data-theme="light"] .theme-toggle { background: rgba(26,26,46,.05) !important; border: 1px solid rgba(26,26,46,.1) !important; color: rgba(26,26,46,.7) !important; } :root[data-theme="light"] .theme-toggle:hover { background: rgba(211,84,0,.1) !important; border-color: rgba(211,84,0,.3) !important; color: #d35400 !important; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ────────────────────────────────────────────────────────────────── MODE CLAIR — Overrides pour les pages "sombres natives" (index, tarifs, fiches outils, démos, essai, packs, à propos, 404) Ces pages ont : - body { background:#0a0f1a; color:#e8e8e8 } - Hero gradient sombre - Cards rgba(255,255,255,.03-.08) - Texte rgba(255,255,255,.X) - Bordures rgba(255,255,255,.X) - Titre h1/h2/etc. color:#fff - Accent #e67e22 partout En mode clair, on inverse tout via des sélecteurs ciblés. ────────────────────────────────────────────────────────────────── */ /* Body et background global */ html[data-theme="light"] body, html[data-theme="light"] { background: #fafaf7 !important; color: #1a1a2e !important; } /* Hero / sections avec gradient sombre — remplacé par gradient beige */ html[data-theme="light"] .hero, html[data-theme="light"] section.hero, html[data-theme="light"] div.hero, html[data-theme="light"] .header, html[data-theme="light"] .timaje-header { background: linear-gradient(135deg, #f5f3ee 0%, #ede9e0 50%, #e8e3d6 100%) !important; } /* Navigation */ html[data-theme="light"] .timaje-nav, html[data-theme="light"] nav.timaje-nav { background: rgba(250,250,247,.95) !important; border-bottom-color: rgba(26,26,46,.08) !important; } html[data-theme="light"] .timaje-nav-logo { color: #1a1a2e !important; } html[data-theme="light"] .timaje-nav-links a { color: rgba(26,26,46,.55) !important; } html[data-theme="light"] .timaje-nav-links a:hover { color: #1a1a2e !important; background: rgba(26,26,46,.05) !important; } html[data-theme="light"] .timaje-nav-links a.active { color: #d35400 !important; } html[data-theme="light"] .timaje-nav-cta { color: #fff !important; } /* Titres */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { color: #1a1a2e !important; } /* Logo letters (pastilles TIMAJE) */ html[data-theme="light"] .logo-letter:not(:first-child) { background: rgba(26,26,46,.06) !important; color: rgba(26,26,46,.4) !important; } /* Textes secondaires (.sub, .subtitle, .tagline, descriptions) */ html[data-theme="light"] .sub, html[data-theme="light"] .subtitle, html[data-theme="light"] .tagline { color: rgba(26,26,46,.65) !important; } /* KPIs */ html[data-theme="light"] .kpi { background: #fff !important; border-color: rgba(26,26,46,.08) !important; box-shadow: 0 4px 16px rgba(26,26,46,.04) !important; } html[data-theme="light"] .kpi-label { color: rgba(26,26,46,.5) !important; } /* Cards génériques : .tool, .scenario, .way, .pack-card, .faq-item, .plan, .card */ html[data-theme="light"] .tool, html[data-theme="light"] .scenario, html[data-theme="light"] .way, html[data-theme="light"] .pack-card, html[data-theme="light"] .faq-item, html[data-theme="light"] .plan, html[data-theme="light"] .feature-card, html[data-theme="light"] .axe-card, html[data-theme="light"] .roi-card, html[data-theme="light"] .constat, html[data-theme="light"] .mission, html[data-theme="light"] .card { background: #fff !important; border-color: rgba(26,26,46,.08) !important; box-shadow: 0 4px 16px rgba(26,26,46,.04) !important; } html[data-theme="light"] .tool:hover, html[data-theme="light"] .scenario:hover, html[data-theme="light"] .way:hover, html[data-theme="light"] .plan:hover { border-color: rgba(211,84,0,.3) !important; box-shadow: 0 8px 24px rgba(26,26,46,.08) !important; } /* Cards "featured" (mises en avant) */ html[data-theme="light"] .plan.featured, html[data-theme="light"] .pack-card.featured, html[data-theme="light"] .way-featured, html[data-theme="light"] .pack { background: rgba(211,84,0,.04) !important; border-color: rgba(211,84,0,.3) !important; } /* Tool head numbers / way nums (badges typo orange) */ html[data-theme="light"] .tool-num, html[data-theme="light"] .way-num, html[data-theme="light"] .plan-tag, html[data-theme="light"] .expertise-num, html[data-theme="light"] .card-num { background: rgba(211,84,0,.08) !important; color: #d35400 !important; } /* Textes dans les cards */ html[data-theme="light"] .tool-name, html[data-theme="light"] .pack-card .name, html[data-theme="light"] .plan-name, html[data-theme="light"] .way-name, html[data-theme="light"] .scenario h3 { color: #1a1a2e !important; } html[data-theme="light"] .tool-desc, html[data-theme="light"] .way-desc, html[data-theme="light"] .plan-desc, html[data-theme="light"] .scenario .s-sub, html[data-theme="light"] .pack .sub2, html[data-theme="light"] .pack-card .count { color: rgba(26,26,46,.65) !important; } /* Tool foot (séparateur dans les cards) */ html[data-theme="light"] .tool-foot { border-top-color: rgba(26,26,46,.08) !important; } /* Tags (chips informatives dans les cards) */ html[data-theme="light"] .tag { background: rgba(26,26,46,.05) !important; color: rgba(26,26,46,.55) !important; } /* Prix : on garde l'orange, c'est l'accent de marque */ html[data-theme="light"] .price, html[data-theme="light"] .pprice, html[data-theme="light"] .s-val, html[data-theme="light"] .plan-price, html[data-theme="light"] .kpi-val, html[data-theme="light"] .perpetual-table .price { color: #d35400 !important; } html[data-theme="light"] .price-sub, html[data-theme="light"] .pmeta, html[data-theme="light"] .plan-period, html[data-theme="light"] .way-period, html[data-theme="light"] .s-meta { color: rgba(26,26,46,.5) !important; } html[data-theme="light"] .plan-price small, html[data-theme="light"] .way-price small { color: rgba(26,26,46,.5) !important; } html[data-theme="light"] .plan-price .strike { color: rgba(26,26,46,.35) !important; } /* Notes et investissements (en bas des cards) */ html[data-theme="light"] .plan-note { color: #d35400 !important; } html[data-theme="light"] .s-investment { color: rgba(26,26,46,.55) !important; border-top-color: rgba(26,26,46,.08) !important; } html[data-theme="light"] .s-investment strong { color: #1a1a2e !important; } html[data-theme="light"] .scenarios-note { color: rgba(26,26,46,.55) !important; } /* Boutons CTA — l'orange reste partout, mais les "ghost" en mode clair */ html[data-theme="light"] .btn-ghost, html[data-theme="light"] .btn-secondary, html[data-theme="light"] .cta-ghost { background: rgba(26,26,46,.04) !important; color: #1a1a2e !important; border-color: rgba(26,26,46,.15) !important; } html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .btn-secondary:hover, html[data-theme="light"] .cta-ghost:hover { background: rgba(26,26,46,.08) !important; border-color: rgba(211,84,0,.3) !important; } /* Sections alternées (.scenarios, .section-alt, etc.) */ html[data-theme="light"] .scenarios, html[data-theme="light"] .section-alt, html[data-theme="light"] section.alt { background: #f5f3ee !important; border-top-color: rgba(26,26,46,.08) !important; border-bottom-color: rgba(26,26,46,.08) !important; } /* Toggle bar (mensuel/annuel sur tarifs) */ html[data-theme="light"] .toggle-bar { background: rgba(26,26,46,.04) !important; border: 1px solid rgba(26,26,46,.08) !important; } html[data-theme="light"] .toggle-btn:not(.active) { color: rgba(26,26,46,.65) !important; } /* Tableau de bascule perpétuelle (tarifs) */ html[data-theme="light"] .perpetual-highlight { background: rgba(211,84,0,.05) !important; border-color: rgba(211,84,0,.2) !important; } html[data-theme="light"] .perpetual-table th { color: rgba(26,26,46,.5) !important; border-bottom-color: rgba(26,26,46,.08) !important; } html[data-theme="light"] .perpetual-table td { color: rgba(26,26,46,.85) !important; border-bottom-color: rgba(26,26,46,.05) !important; } /* FAQ */ html[data-theme="light"] .faq-q { color: #1a1a2e !important; } html[data-theme="light"] .faq-a { color: rgba(26,26,46,.65) !important; } /* Footer */ html[data-theme="light"] footer { border-top-color: rgba(26,26,46,.08) !important; color: rgba(26,26,46,.4) !important; } html[data-theme="light"] footer a { color: #d35400 !important; } /* Section personnalisation (marque blanche, violette) */ html[data-theme="light"] .perso-section { background: linear-gradient(135deg, rgba(142,68,173,.05), transparent) !important; border-color: rgba(142,68,173,.2) !important; } html[data-theme="light"] .perso-feat { background: #fff !important; border-color: rgba(26,26,46,.08) !important; } html[data-theme="light"] .perso-feat-label { color: rgba(26,26,46,.5) !important; } html[data-theme="light"] .perso-feat-text { color: rgba(26,26,46,.75) !important; } html[data-theme="light"] .perso-price { background: rgba(142,68,173,.05) !important; border-color: rgba(142,68,173,.2) !important; } html[data-theme="light"] .perso-price-sub { color: rgba(26,26,46,.5) !important; } html[data-theme="light"] .perso-delay { color: rgba(26,26,46,.4) !important; } /* Page essai / formulaire */ html[data-theme="light"] main { background: #fafaf7 !important; } html[data-theme="light"] .card, html[data-theme="light"] form.card { background: #fff !important; border-color: rgba(26,26,46,.08) !important; box-shadow: 0 4px 16px rgba(26,26,46,.06) !important; } html[data-theme="light"] label { color: rgba(26,26,46,.6) !important; } html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email], html[data-theme="light"] select { background: rgba(26,26,46,.03) !important; border-color: rgba(26,26,46,.12) !important; color: #1a1a2e !important; } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus { border-color: #d35400 !important; background: #fff !important; } html[data-theme="light"] select option { background: #fff !important; color: #1a1a2e !important; } html[data-theme="light"] .benefits { background: rgba(211,84,0,.05) !important; border-color: rgba(211,84,0,.2) !important; } html[data-theme="light"] .benefits li { color: rgba(26,26,46,.8) !important; } html[data-theme="light"] .legal { color: rgba(26,26,46,.5) !important; } html[data-theme="light"] .legal a { color: rgba(26,26,46,.7) !important; } /* Fiches outils — éléments spécifiques */ html[data-theme="light"] .axe-card, html[data-theme="light"] .feature-card, html[data-theme="light"] .roi-card, html[data-theme="light"] .module-card, html[data-theme="light"] .formation-card { background: #fff !important; border-color: rgba(26,26,46,.08) !important; } html[data-theme="light"] .axe-title, html[data-theme="light"] .roi-title, html[data-theme="light"] .feature-title { color: #1a1a2e !important; } html[data-theme="light"] .axe-desc, html[data-theme="light"] .roi-desc, html[data-theme="light"] .feature-desc, html[data-theme="light"] .formation li, html[data-theme="light"] .module-list li { color: rgba(26,26,46,.7) !important; } html[data-theme="light"] .price-label, html[data-theme="light"] .roi-label { color: rgba(26,26,46,.5) !important; } /* Constats / Missions (titres de section avec border-left) */ html[data-theme="light"] .constat-block, html[data-theme="light"] .mission-block, html[data-theme="light"] .roi-section { background: #fff !important; border-color: rgba(26,26,46,.08) !important; } /* Page À propos — sections expertises */ html[data-theme="light"] .expertise-card, html[data-theme="light"] .pillar, html[data-theme="light"] .timeline-item, html[data-theme="light"] .credential { background: #fff !important; border-color: rgba(26,26,46,.08) !important; } html[data-theme="light"] .expertise-card h3, html[data-theme="light"] .pillar h3, html[data-theme="light"] .timeline-title { color: #1a1a2e !important; } html[data-theme="light"] .expertise-card p, html[data-theme="light"] .pillar p, html[data-theme="light"] .timeline-desc { color: rgba(26,26,46,.7) !important; } /* Démos — masquer le footer info-démo si pas adapté */ html[data-theme="light"] .demo-banner, html[data-theme="light"] .info-bar { background: rgba(211,84,0,.08) !important; border-color: rgba(211,84,0,.2) !important; color: rgba(26,26,46,.85) !important; } /* ────────────────────────────────────────────────────────────────── MODE SOMBRE — Overrides pour les pages "claires natives" (CGV, contact, mentions, confidentialité, success) Ces pages utilisent --bg --text --secondary --border etc. Comme on a redéfini ces variables ci-dessus pour data-theme="dark", elles basculent automatiquement. Mais quelques overrides spécifiques sont nécessaires : ────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] body.legal-page, html[data-theme="dark"] .legal-page { background: #0a0f1a !important; color: #e8e8e8 !important; } html[data-theme="dark"] .header { background: #16213e !important; } html[data-theme="dark"] .content { background: #0a0f1a !important; } html[data-theme="dark"] .content h2, html[data-theme="dark"] .content h3 { color: #fff !important; } html[data-theme="dark"] .content p, html[data-theme="dark"] .content li { color: rgba(255,255,255,.75) !important; } html[data-theme="dark"] .content section { border-bottom-color: rgba(255,255,255,.08) !important; } html[data-theme="dark"] .info-box { background: rgba(255,255,255,.04) !important; border-color: rgba(230,126,34,.3) !important; } html[data-theme="dark"] .info-box strong { color: #fff !important; } html[data-theme="dark"] .footer { background: #050810 !important; color: rgba(255,255,255,.5) !important; } html[data-theme="dark"] table th { background: rgba(255,255,255,.04) !important; color: #fff !important; } html[data-theme="dark"] table td { border-bottom-color: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.75) !important; }