/* * Ispayout — Verrouillage en mode clair (v4 EXHAUSTIF) * * Stratégie : recenser TOUTES les classes ciblées par les règles * `body.dark`, `body.dark-mode` et `@media (prefers-color-scheme: dark)` * de facebook-feed.css (≈ 50 classes), et les forcer une à une en * arrière-plan blanc + texte foncé. * * Ce fichier est inclus en DERNIER dans (cf. head.php) pour gagner * la cascade. Toutes les règles utilisent !important + spécificité élevée * (préfixe html ou body.dark/body.dark-mode) pour battre les règles * d'origine. * * Composants intentionnellement préservés (NON listés ici) : * - .td-mob-shell-header (gradient sombre voulu) * - .td-mob-bottom-nav (gradient violet voulu) * - .td-mob-kyc-pill.* (couleurs KYC) * - Boutons d'action verts/rouges (.tdcc-btn, etc.) * - Backdrops modaux (.tdpr-backdrop, .tdd-pin-overlay, .tdkr-overlay) */ /* ─── Niveau racine : verrouillage du color-scheme ──────────────────────── */ :root, html, body { color-scheme: only light !important; } html, body { background-color: #ffffff !important; color: #1a1a1a !important; } /* Si le thème pose .dark / .dark-mode sur ou via JS */ body.dark, body.dark-mode, html.dark, html.dark-mode { background-color: #ffffff !important; color: #1a1a1a !important; } /* ─── Inputs ───────────────────────────────────────────────────────────── */ input, select, textarea { background-color: #ffffff !important; color: #1a1a1a !important; } input::placeholder, textarea::placeholder { color: #6b7280 !important; } /* ─── Couleurs faibles (gris clair) → quasi-noir pour la lisibilité ───── */ [style*="color:#aaa"], [style*="color: #aaa"], [style*="color:#bbb"], [style*="color: #bbb"], [style*="color:#ccc"], [style*="color: #ccc"], [style*="color:#ddd"], [style*="color: #ddd"], [style*="color:#eee"], [style*="color: #eee"] { color: #1a1a1a !important; } .text-muted-light, .text-light-gray, .text-faded { color: #1a1a1a !important; } /* ════════════════════════════════════════════════════════════════════════ PARTIE 1 — Classes posées par body.dark / body.dark-mode (hors @media) ──────────────────────────────────────────────────────────────────────── Le thème pose ces classes via JS au démarrage selon les préférences utilisateur. Ces règles sont actives en permanence si la classe est posée, donc on doit les battre explicitement avec la même spécificité (1 classe parent + 1 classe enfant) ET !important. ════════════════════════════════════════════════════════════════════════ */ /* Container principal du contenu */ body.dark .content, body.dark-mode .content, body.dark .container, body.dark-mode .container, body.dark .container.primary, body.dark-mode .container.primary, body.dark #main, body.dark-mode #main, body.dark .main-content, body.dark-mode .main-content, body.dark .home-area, body.dark-mode .home-area, body.dark section, body.dark-mode section, body.dark article, body.dark-mode article, body.dark aside, body.dark-mode aside, body.dark main, body.dark-mode main { background-color: #ffffff !important; color: #1a1a1a !important; border-color: #e5e7eb !important; } /* Header desktop (.td-header et ses enfants) */ body.dark .td-header, body.dark-mode .td-header { background: #ffffff !important; color: #1a1a1a !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } body.dark .td-hd-bar, body.dark-mode .td-hd-bar { background: #f3f4f6 !important; border-color: #e5e7eb !important; } body.dark .td-hd-bar:hover, body.dark-mode .td-hd-bar:hover, body.dark .td-hd-bar:focus-within, body.dark-mode .td-hd-bar:focus-within { background: #f9fafb !important; border-color: #d1d5db !important; } body.dark .td-hd-bar input, body.dark-mode .td-hd-bar input { color: #1a1a1a !important; background: transparent !important; } body.dark .td-hd-bar input::placeholder, body.dark-mode .td-hd-bar input::placeholder { color: #6b7280 !important; } body.dark .td-hd-bar select, body.dark-mode .td-hd-bar select { color: #1a1a1a !important; background: transparent !important; } body.dark .td-hd-loc-text, body.dark-mode .td-hd-loc-text { color: #4b5563 !important; } body.dark .td-hd-seg, body.dark-mode .td-hd-seg { color: #1a1a1a !important; } body.dark .td-hd-seg:hover, body.dark-mode .td-hd-seg:hover { background: rgba(0,0,0,0.04) !important; } body.dark .td-hd-seg label, body.dark-mode .td-hd-seg label { color: #1a1a1a !important; } body.dark .td-hd-sep, body.dark-mode .td-hd-sep { background: #d1d5db !important; } body.dark .td-hd-icon, body.dark-mode .td-hd-icon { background: #f3f4f6 !important; color: #4b5563 !important; } body.dark .td-hd-icon:hover, body.dark-mode .td-hd-icon:hover { background: #e5e7eb !important; color: #1a1a1a !important; } body.dark .td-hd-avatar, body.dark-mode .td-hd-avatar { background: #e5e7eb !important; } body.dark .td-hd-left, body.dark-mode .td-hd-left { background: transparent !important; } /* "Quoi de neuf" composant (.td-qdn) */ body.dark .td-qdn, body.dark-mode .td-qdn { background: #ffffff !important; border-color: #e5e7eb !important; } body.dark .td-qdn:hover, body.dark-mode .td-qdn:hover { background: #f9fafb !important; } body.dark .td-qdn-field span, body.dark-mode .td-qdn-field span { background: #f3f4f6 !important; color: #4b5563 !important; } body.dark .td-qdn:hover .td-qdn-field span, body.dark-mode .td-qdn:hover .td-qdn-field span { background: #e5e7eb !important; } body.dark .td-qdn-av img, body.dark-mode .td-qdn-av img { border: none !important; } body.dark .td-qdn-link, body.dark-mode .td-qdn-link { background: #f3f4f6 !important; color: #4b5563 !important; } body.dark .td-qdn-link:hover, body.dark-mode .td-qdn-link:hover { background: #e5e7eb !important; color: #1a1a1a !important; } body.dark .td-qdn-link-success, body.dark-mode .td-qdn-link-success { background: #d4f5dd !important; color: #15803D !important; border-color: #15803D !important; } body.dark .td-qdn-link-badge, body.dark-mode .td-qdn-link-badge { background: #DBEAFE !important; color: #1e40af !important; } body.dark .td-qdn-link-abo, body.dark-mode .td-qdn-link-abo { background: #f3f4f6 !important; color: #4b5563 !important; } /* Modale générique (.td-m-*) */ body.dark .td-m-box, body.dark-mode .td-m-box { background: #ffffff !important; } body.dark .td-m-hd, body.dark-mode .td-m-hd { border-color: #e5e7eb !important; background: #ffffff !important; } body.dark .td-m-hd-txt strong, body.dark-mode .td-m-hd-txt strong { color: #0f172a !important; } body.dark .td-m-hd-txt span, body.dark-mode .td-m-hd-txt span { color: #4b5563 !important; } body.dark .td-m-hd-title, body.dark-mode .td-m-hd-title { color: #0f172a !important; } body.dark .td-m-close, body.dark-mode .td-m-close { background: #f3f4f6 !important; color: #4b5563 !important; } body.dark .td-m-close:hover, body.dark-mode .td-m-close:hover { background: #e5e7eb !important; color: #1a1a1a !important; } /* Cartes de feed (.td-card et enfants) */ body.dark .td-card, body.dark-mode .td-card { background: #ffffff !important; color: #1a1a1a !important; border-color: #e5e7eb !important; } body.dark .td-card.td-c-prem, body.dark-mode .td-card.td-c-prem { background: #fffbeb !important; border-color: #fde68a !important; } body.dark .td-card:hover, body.dark-mode .td-card:hover { background: #f9fafb !important; } body.dark .td-card-title, body.dark-mode .td-card-title { color: #0f172a !important; } body.dark .td-card-title:hover, body.dark-mode .td-card-title:hover { color: #16A34A !important; } body.dark .td-card-desc, body.dark-mode .td-card-desc { color: #4b5563 !important; } body.dark .td-card-more, body.dark-mode .td-card-more { color: #6b7280 !important; } body.dark .td-card-who strong a, body.dark-mode .td-card-who strong a { color: #0f172a !important; } body.dark .td-card-who > span, body.dark-mode .td-card-who > span { color: #6b7280 !important; } body.dark .td-card-stats, body.dark-mode .td-card-stats { color: #6b7280 !important; border-color: #e5e7eb !important; } body.dark .td-card-av img, body.dark-mode .td-card-av img { border-color: #e5e7eb !important; } body.dark .td-card-av-def, body.dark-mode .td-card-av-def { background: #e5e7eb !important; } body.dark .td-card-media, body.dark-mode .td-card-media { background: #f3f4f6 !important; } body.dark .td-card-actions, body.dark-mode .td-card-actions { background: transparent !important; } body.dark .td-act, body.dark-mode .td-act { background: #f3f4f6 !important; color: #1a1a1a !important; } body.dark .td-act-wa, body.dark-mode .td-act-wa { background: #25D366 !important; color: #ffffff !important; } body.dark .td-act-call, body.dark-mode .td-act-call { background: #16A34A !important; color: #ffffff !important; } body.dark .td-gold-title, body.dark-mode .td-gold-title { color: #92400e !important; } /* Sidebar de droite (.td-rs-*) */ body.dark .td-rs, body.dark-mode .td-rs { background: #ffffff !important; } body.dark .td-rs-title, body.dark-mode .td-rs-title { color: #0f172a !important; } body.dark .td-rs-card, body.dark-mode .td-rs-card { background: #ffffff !important; border-color: #e5e7eb !important; } body.dark .td-rs-card-title, body.dark-mode .td-rs-card-title { color: #0f172a !important; } body.dark .td-rs-card-loc, body.dark-mode .td-rs-card-loc { color: #6b7280 !important; } body.dark .td-rs-item, body.dark-mode .td-rs-item { background: #ffffff !important; } body.dark .td-rs-item-title, body.dark-mode .td-rs-item-title { color: #0f172a !important; } body.dark .td-rs-item-loc, body.dark-mode .td-rs-item-loc { color: #6b7280 !important; } /* Sidebar (sponsored, etc.) */ body.dark .td-sidebar-list, body.dark-mode .td-sidebar-list { background: #ffffff !important; } body.dark .td-sidebar-title, body.dark-mode .td-sidebar-title { color: #0f172a !important; } body.dark .td-sp-name, body.dark-mode .td-sp-name { color: #0f172a !important; } body.dark .td-sp-loc, body.dark-mode .td-sp-loc { color: #6b7280 !important; } body.dark .td-sp-thumb, body.dark-mode .td-sp-thumb { background: #f3f4f6 !important; } /* Navigation utilisateur (.td-nav-*) */ body.dark .td-nav-dropdown, body.dark-mode .td-nav-dropdown { background: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; } body.dark .td-nav-wrap, body.dark-mode .td-nav-wrap { background: #ffffff !important; } body.dark .td-nav-item, body.dark-mode .td-nav-item { color: #1a1a1a !important; } body.dark .td-nav-item:hover, body.dark-mode .td-nav-item:hover { background: #f3f4f6 !important; } body.dark .td-nav-create, body.dark-mode .td-nav-create { background: #16A34A !important; color: #ffffff !important; } body.dark .td-nav-avatar, body.dark-mode .td-nav-avatar { background: #e5e7eb !important; } body.dark .td-nav-profile, body.dark-mode .td-nav-profile { background: #ffffff !important; } body.dark .td-nav-profile-main, body.dark-mode .td-nav-profile-main { color: #1a1a1a !important; } body.dark .td-nav-user-info, body.dark-mode .td-nav-user-info { color: #4b5563 !important; } body.dark .td-nav-badge, body.dark-mode .td-nav-badge { background: #DC2626 !important; color: #ffffff !important; } /* Header mobile EXISTANT (#td-mob-header) qu'on doit garder masqué — voir td-mobile-shell.css pour le masquage. En dark, ne rien forcer ici sauf pour le logo. */ body.dark .td-mob-logo, body.dark-mode .td-mob-logo { background: transparent !important; } body.dark .td-mob-mini-bar, body.dark-mode .td-mob-mini-bar { background: #f3f4f6 !important; border-color: #e5e7eb !important; } body.dark .td-mob-mini-search, body.dark-mode .td-mob-mini-search { background: #ffffff !important; } body.dark .td-mob-mini-loc-text, body.dark-mode .td-mob-mini-loc-text { color: #4b5563 !important; } body.dark .td-mob-mini-seg, body.dark-mode .td-mob-mini-seg { color: #1a1a1a !important; } body.dark .td-mob-mini-sep, body.dark-mode .td-mob-mini-sep { background: #d1d5db !important; } /* Boost / propulsion */ body.dark .td-boost-act, body.dark-mode .td-boost-act { background: #16A34A !important; color: #ffffff !important; } body.dark .td-boost-info-bar, body.dark-mode .td-boost-info-bar { background: #DBEAFE !important; color: #1e40af !important; border-color: #93c5fd !important; } body.dark .td-boost-info-btn, body.dark-mode .td-boost-info-btn { background: #1e40af !important; color: #ffffff !important; } body.dark .td-boost-info-title, body.dark-mode .td-boost-info-title { color: #0f172a !important; } body.dark .td-boost-info-sub, body.dark-mode .td-boost-info-sub { color: #4b5563 !important; } body.dark .td-card-actions-boost, body.dark-mode .td-card-actions-boost { background: transparent !important; } body.dark .td-card-boost-cta, body.dark-mode .td-card-boost-cta { background: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important; } body.dark .td-card-boost-cta-text, body.dark-mode .td-card-boost-cta-text { color: #92400e !important; } body.dark .td-card-sponsored, body.dark-mode .td-card-sponsored { color: #6b7280 !important; } body.dark .td-card-body, body.dark-mode .td-card-body { color: #1a1a1a !important; } /* Tableaux et listes en dark → blanc / noir */ body.dark table, body.dark-mode table, body.dark thead, body.dark-mode thead, body.dark tbody, body.dark-mode tbody, body.dark tr, body.dark-mode tr, body.dark td, body.dark-mode td, body.dark th, body.dark-mode th, body.dark ul, body.dark-mode ul, body.dark ol, body.dark-mode ol, body.dark li, body.dark-mode li { background-color: #ffffff !important; color: #1a1a1a !important; border-color: #e5e7eb !important; } /* Inputs dans body.dark */ body.dark input, body.dark-mode input, body.dark select, body.dark-mode select, body.dark textarea, body.dark-mode textarea { background-color: #ffffff !important; color: #1a1a1a !important; border-color: #d1d5db !important; } body.dark input::placeholder, body.dark-mode input::placeholder { color: #6b7280 !important; } /* Logos en dark : pas de filter:invert */ body.dark header .logo img, body.dark-mode header .logo img, body.dark .td-hd-left .logo img, body.dark-mode .td-hd-left .logo img, body.dark .td-mob-logo img, body.dark-mode .td-mob-logo img, body.dark footer p.logo img, body.dark-mode footer p.logo img { filter: none !important; opacity: 1 !important; } /* Boîtes & cartes génériques (.box, .card, .panel, .modal) */ body.dark .box, body.dark-mode .box, body.dark .panel, body.dark-mode .panel, body.dark .card, body.dark-mode .card, body.dark .item, body.dark-mode .item, body.dark .item-row, body.dark-mode .item-row, body.dark .listing, body.dark-mode .listing, body.dark .ad-card, body.dark-mode .ad-card, body.dark .modal-content, body.dark-mode .modal-content, body.dark .modal-body, body.dark-mode .modal-body, body.dark .dropdown-menu, body.dark-mode .dropdown-menu, body.dark .home-categories, body.dark-mode .home-categories, body.dark .home-search, body.dark-mode .home-search, body.dark .home-premium, body.dark-mode .home-premium, body.dark .home-users, body.dark-mode .home-users { background-color: #ffffff !important; color: #1a1a1a !important; border-color: #e5e7eb !important; } /* Texte secondaire / muted en dark : remonté à #4b5563 */ body.dark .text-muted, body.dark-mode .text-muted, body.dark .help-block, body.dark-mode .help-block, body.dark small, body.dark-mode small, body.dark .small, body.dark-mode .small, body.dark .meta, body.dark-mode .meta, body.dark .description, body.dark-mode .description, body.dark .subtitle, body.dark-mode .subtitle, body.dark p, body.dark-mode p { color: #1a1a1a !important; } /* ════════════════════════════════════════════════════════════════════════ PARTIE 2 — @media (prefers-color-scheme: dark) ──────────────────────────────────────────────────────────────────────── Si le navigateur est en mode sombre système, on rebat tous les conteneurs vers leur palette claire. Mêmes sélecteurs que ci-dessus. ════════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html, body { background-color: #ffffff !important; color: #1a1a1a !important; color-scheme: only light !important; } :root { background-color: #ffffff !important; color-scheme: only light !important; } /* Catch-all : tout élément structurel courant en clair */ html div, html section, html article, html aside, html main, html header, html nav, html footer, html ul, html ol, html li, html table, html thead, html tbody, html tr, html td, html th, html form, html fieldset, html label, html legend { background-color: #ffffff !important; color: #1a1a1a !important; border-color: #e5e7eb !important; } /* Toutes les classes .td-* du thème (mêmes overrides qu'en body.dark) */ html .content, html .container, html .container.primary, html #main, html .main-content, html .home-area, html .td-header, html .td-hd-bar, html .td-hd-icon, html .td-hd-avatar, html .td-hd-seg, html .td-hd-sep, html .td-hd-loc-text, html .td-hd-left, html .td-qdn, html .td-qdn-field, html .td-qdn-link, html .td-qdn-av, html .td-m-box, html .td-m-hd, html .td-m-close, html .td-card, html .td-card-actions, html .td-card-av, html .td-card-av-def, html .td-card-media, html .td-card-body, html .td-card-stats, html .td-rs, html .td-rs-card, html .td-rs-item, html .td-sidebar-list, html .td-sp-thumb, html .td-nav-dropdown, html .td-nav-wrap, html .td-nav-item, html .td-nav-avatar, html .td-nav-profile, html .td-nav-user-info, html .td-mob-mini-bar, html .td-mob-mini-search, html .td-mob-mini-seg, html .box, html .panel, html .card, html .modal-content, html .item, html .item-row, html .listing, html .home-categories, html .home-search, html .home-premium { background-color: #ffffff !important; color: #1a1a1a !important; border-color: #e5e7eb !important; } /* Textes des classes .td-* en clair */ html .td-card-title, html .td-card-desc, html .td-card-more, html .td-card-who, html .td-card-who > span, html .td-rs-title, html .td-rs-card-title, html .td-rs-card-loc, html .td-rs-item-title, html .td-rs-item-loc, html .td-sidebar-title, html .td-sp-name, html .td-sp-loc, html .td-m-hd-title, html .td-m-hd-txt strong, html .td-m-hd-txt span, html .td-mob-mini-loc-text, html .td-hd-loc-text, html .td-boost-info-title, html .td-boost-info-sub, html .td-card-boost-cta-text, html .td-card-sponsored { color: #1a1a1a !important; } html .td-card-desc, html .td-card-more, html .td-card-stats, html .td-card-who > span, html .td-rs-card-loc, html .td-rs-item-loc, html .td-sp-loc, html .td-m-hd-txt span, html .td-mob-mini-loc-text, html .td-hd-loc-text, html .td-boost-info-sub, html .td-card-sponsored { color: #4b5563 !important; } /* Inputs en mode clair */ html input, html select, html textarea { background-color: #ffffff !important; color: #1a1a1a !important; border-color: #d1d5db !important; } html input::placeholder, html textarea::placeholder { color: #6b7280 !important; } /* Logos */ html header .logo img, html .td-hd-left .logo img, html .td-mob-logo img, html footer p.logo img, html .tdpl-logo-wrap img { filter: none !important; opacity: 1 !important; } /* ─── EXCEPTIONS : composants à fond sombre/coloré préservé ─────── */ /* 1. Header mobile shell (gradient sombre voulu) */ html .td-mob-shell-header { background: linear-gradient(180deg, rgba(60,60,60,0.92) 0%, rgba(20,20,20,0.92) 100%) !important; color: #f3f4f6 !important; } html .td-mob-shell-header .td-mob-greet { background: transparent !important; color: #f3f4f6 !important; } html .td-mob-shell-header .td-mob-greet b { color: #ffffff !important; } html .td-mob-avatar { background: #1a7c4a !important; } html .td-mob-bell { background: #DC2626 !important; } html .td-mob-bell svg { color: #fff !important; } html .td-mob-settings { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.18) !important; } html .td-mob-settings svg { color: #fff !important; } /* 2. Bottom-nav mobile (gradient violet voulu) */ html .td-mob-bottom-nav { background: linear-gradient(95deg, #8FE3B8 0%, #D4D2F7 35%, #C4B5FD 65%, #8B7BE0 100%) !important; } html .td-mob-bottom-nav .td-mob-tab { background: transparent !important; } html .td-mob-bottom-nav .td-mob-tab:not(.is-active), html .td-mob-bottom-nav .td-mob-tab:not(.is-active) .lbl { color: #ffffff !important; } html .td-mob-bottom-nav .td-mob-tab.is-active, html .td-mob-bottom-nav .td-mob-tab.is-active .lbl { color: #15803D !important; } /* 3. KYC pills colorées */ html .td-mob-kyc-pill.unverified { background: #d4f5dd !important; color: #15803D !important; } html .td-mob-kyc-pill.pending { background: #FEF3C7 !important; color: #92400E !important; } html .td-mob-kyc-pill.verified { background: #DBEAFE !important; color: #1e40af !important; } /* 4. Boutons d'action verts/rouges (pages cartes) */ html .tdcc-btn, html .tdwd-go, html .tdcw-go, html .print-btn, html .tdcwa-pay-ok, html .tdcwa-pay-ok-soft, html .tdpr-btn, html .tdd-pin-btn, html .tdrr-btn, html .tdrp-btn, html .tdcprx-btn:not(.secondary) { background: #16A34A !important; color: #fff !important; } html .tdcprx-btn.secondary { background: #e2e8f0 !important; color: #334155 !important; } html .tdcwa-pay-cancel, html .tdkr-btn { background: #DC2626 !important; color: #fff !important; } /* 5. Backdrops sombres des modaux (KYC rejected, PIN, recovery) */ html .tdpr-backdrop { background: rgba(15,23,42,0.78) !important; } html .tdd-pin-overlay { background: rgba(15,23,42,0.78) !important; } html #td-kyc-rejected-overlay { background: rgba(15,23,42,0.86) !important; } html #td-kyc-validate-overlay { background: rgba(15,23,42,0.78) !important; } html .tdpr-modal, html .tdd-pin-modal, html .tdkr-modal, html .kyc-vo-modal, html .tdrr-card, html .tdrp-card { background: #ffffff !important; color: #1a1a1a !important; } /* 6. Inputs PIN spécifiques (fond légèrement gris pour distinguer) */ html .tdpr-pin-input, html .tdd-pin-input { background-color: #f8fafc !important; color: #0f172a !important; } html .tdpr-pin-input:focus, html .tdd-pin-input:focus { background-color: #fff !important; } /* 7. Pop-under PWA reste blanc même en système sombre */ html .td-pwa-prompt { background: #ffffff !important; } html .td-pwa-title { color: #1a1a1a !important; } html .td-pwa-sub { color: #1a1a1a !important; } } /* ════════════════════════════════════════════════════════════════════════ PARTIE 3 — Pop-under PWA hors @media (cas body.dark posé par JS) ════════════════════════════════════════════════════════════════════════ */ body.dark .td-pwa-prompt, body.dark-mode .td-pwa-prompt { background: #ffffff !important; } body.dark .td-pwa-title, body.dark-mode .td-pwa-title { color: #1a1a1a !important; } body.dark .td-pwa-sub, body.dark-mode .td-pwa-sub { color: #1a1a1a !important; }