/* ══════════════════════════════════════════════════════════════ ApexView — système de couleurs Palette dérivée d'apple.com, relevée en production le 13/09/2026. ⚠️ POURQUOI CE FICHIER EXISTE. Le site portait 852 couleurs écrites en dur — 59 rien que sur la page MARCHÉS — issues de trois familles mélangées : zinc (le système déclaré), gray de Tailwind (teinté bleu) et slate. On y trouvait #18181a ET #18181b, #a1a1aa ET #a1a1ab : des écarts d'un chiffre, invisibles au relecteur, perceptibles à l'œil. Basculer les variables ne changeait que 15 % de la surface, le reste étant figé en dur. Un thème ne se change pas tant que le code ne lui obéit pas. ⚠️ CE N'EST PAS SF PRO. La police d'Apple est propriétaire et sa licence ne couvre pas les sites commerciaux. On garde Inter, déjà chargée, dessinée précisément comme équivalent libre de SF pour les interfaces — avec l'interlettrage et la discipline de graisses d'Apple, l'écart est minime. ⚠️ DEUX GRAISSES, PAS SIX. apple.com n'emploie que 400 et 600 sur toute sa page d'accueil. Le site en utilisait jusqu'à 900. La sobriété typographique fait davantage pour l'impression de sérieux que n'importe quelle couleur. ══════════════════════════════════════════════════════════════ */ :root { /* ⚠️ LE SOMBRE EST LE DÉFAUT, DÉLIBÉRÉMENT. Ce fichier est chargé en dernier et redéfinit `--accent`, qui existe déjà dans le site : si le clair était la valeur par défaut, les trente pages basculeraient d'un coup, sans que rien n'ait été vérifié. Partir du sombre laisse l'apparence quasi inchangée — seule la cohérence des teintes s'améliore — et rend le clair activable page par page. */ --s-page: #000000; --s-raised: #1d1d1f; --s-sunken: #161617; --s-inverse: #f5f5f7; --t-fort: #f5f5f7; --t-normal: #d2d2d7; --t-doux: #86868b; --t-faible: #6e6e73; --t-sur-sombre: #1d1d1f; --trait: rgba(255,255,255,.12); --trait-fort: rgba(255,255,255,.22); --accent: #2997ff; --accent-doux: rgba(41,151,255,.14); --hausse: #30d158; --baisse: #ff453a; --alerte: #ff9f0a; --neutre: #86868b; --hausse-doux: rgba(48,209,88,.14); --baisse-doux: rgba(255,69,58,.14); --alerte-doux: rgba(255,159,10,.14); --voile: rgba(255,255,255,.05); /* ── Pont vers l'ancien système ─────────────────────────── ⚠️ C'EST CE BLOC QUI REND LE THÈME EFFECTIF. Convertir les couleurs des rendus JS ne suffisait pas : les surfaces (fond de page, cartes, panneaux) restaient pilotées par les anciennes variables, qui ne connaissaient pas le thème. On les redéfinit donc comme ALIAS des nouveaux jetons. Les propriétés personnalisées CSS se résolvent à l'usage : ces alias suivent donc automatiquement `[data-theme]` sans qu'il faille les redéclarer dans chaque thème. Ce pont est temporaire — il disparaîtra quand les ~700 couleurs en dur restantes du reste du site auront été migrées. En attendant, il fait obéir d'un coup tout ce qui utilisait déjà les variables. */ --bg: var(--s-page); --bg-primary: var(--s-page); --bg-secondary: var(--s-raised); --bg-tertiary: var(--s-sunken); --bg-glass: var(--voile); --panel: var(--s-page); --card: var(--s-raised); --text: var(--t-normal); --text-primary: var(--t-fort); --text-secondary: var(--t-doux); --muted: var(--t-doux); --border: var(--trait); --border-default: var(--trait); --green: var(--hausse); --red: var(--baisse); --police: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --police-mono: 'IBM Plex Mono', 'SF Mono', monospace; --lettre-petit: -0.012em; /* ≤ 19 px — SF Text */ --lettre-grand: 0.007em; /* ≥ 20 px — SF Display */ } /* ══════════════════════════════════════════════════════════════ THÈME CLAIR — la palette d'apple.com ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] { --s-page: #ffffff; --s-raised: #f5f5f7; --s-sunken: #fafafc; --s-inverse: #1d1d1f; --t-fort: #1d1d1f; --t-normal: #333336; --t-doux: #6e6e73; --t-faible: #86868b; --t-sur-sombre: #f5f5f7; --trait: rgba(0,0,0,.12); --trait-fort: rgba(0,0,0,.22); --accent: #0066cc; --accent-doux: rgba(0,102,204,.10); --hausse: #008a20; --baisse: #d70015; --alerte: #b25000; --neutre: #6e6e73; --hausse-doux: rgba(0,138,32,.10); --baisse-doux: rgba(215,0,21,.10); --alerte-doux: rgba(178,80,0,.10); --voile: rgba(0,0,0,.04); } /* ══════════════════════════════════════════════════════════════ Échelle typographique — reprise du relevé sur apple.com ══════════════════════════════════════════════════════════════ */ .ap-titre-xl { font-size:48px; font-weight:600; letter-spacing:var(--lettre-grand); line-height:1.08; color:var(--t-fort); } .ap-titre-l { font-size:28px; font-weight:600; letter-spacing:var(--lettre-grand); line-height:1.14; color:var(--t-fort); } .ap-titre-m { font-size:21px; font-weight:600; letter-spacing:var(--lettre-grand); line-height:1.19; color:var(--t-fort); } .ap-corps { font-size:17px; font-weight:400; letter-spacing:var(--lettre-petit); line-height:1.47; color:var(--t-normal); } .ap-corps-f { font-size:17px; font-weight:600; letter-spacing:var(--lettre-petit); line-height:1.47; color:var(--t-fort); } .ap-petit { font-size:14px; font-weight:400; letter-spacing:var(--lettre-petit); line-height:1.29; color:var(--t-doux); } .ap-petit-f { font-size:14px; font-weight:600; letter-spacing:var(--lettre-petit); line-height:1.29; color:var(--t-normal); } .ap-mention { font-size:12px; font-weight:400; letter-spacing:var(--lettre-petit); line-height:1.34; color:var(--t-faible); } /* Section sombre en alternance, à la manière d'apple.com */ .ap-section-inverse { background: var(--s-inverse); color: var(--t-sur-sombre); } .ap-section-inverse .ap-titre-xl, .ap-section-inverse .ap-titre-l, .ap-section-inverse .ap-titre-m, .ap-section-inverse .ap-corps-f { color: var(--t-sur-sombre); } .ap-section-inverse .ap-corps { color: rgba(245,245,247,.86); } .ap-section-inverse .ap-petit, .ap-section-inverse .ap-mention { color: rgba(245,245,247,.62); } /* ══════════════════════════════════════════════════════════════ Reprise en main du fond de page ⚠️ `design-system.css` impose `body { background: rgb(9,9,11) }` EN DUR, et se charge après `app.css` qui, lui, utilisait bien `var(--bg)`. C'est cette règle qui gagnait : le fond restait noir quel que soit le thème. On la reprend ici, en dernier. ══════════════════════════════════════════════════════════════ */ body { background: var(--s-page) !important; color: var(--t-normal); font-family: var(--police); } /* Les décorations de fond — halos colorés et grain — sont dessinées pour le sombre : sur blanc, elles virent au sale. On les éteint en thème clair plutôt que de les redessiner. */ :root[data-theme="clair"] body::before, :root[data-theme="clair"] body::after { display: none !important; } /* ══════════════════════════════════════════════════════════════ RÈGLE CHROME CLAIR / DONNÉES SOMBRES Tout ce qui se lit en français est clair ; tout ce qui se lit en chiffres est sombre. Ce n'est pas qu'une affaire de goût : une large surface blanche couverte de chiffres denses fatigue davantage qu'un tableau sombre, et le contraste entre les deux donne à la page la hiérarchie qui lui manquait quand tout était uniformément sombre. ⚠️ CETTE FAMILLE NE BASCULE PAS AVEC LE THÈME. Les surfaces de données restent sombres en thème clair ; en thème sombre elles se fondent naturellement dans la page. C'est voulu : sans jetons distincts, l'alternance ne serait qu'un reste de migration incomplète, et le premier bloc converti ensuite la ferait changer au hasard. ══════════════════════════════════════════════════════════════ */ :root { --d-fond: #1d1d1f; --d-carte: #262628; --d-trait: rgba(255,255,255,.12); --d-voile: rgba(255,255,255,.05); --d-fort: #f5f5f7; --d-normal: #d2d2d7; --d-doux: #86868b; } /* Les surfaces de données du périmètre MARCHÉS. Ciblées explicitement : une règle automatique fondée sur la densité de chiffres serait imprévisible au premier contenu qui change. */ #tab-marches .table-wrap, #tab-marches #indices-perf-heatmap, #tab-marches #indices-corr-matrix, #tab-marches #indices-risk-gauge, #tab-marches #indices-yields-container, #tab-marches #indices-vix-container, #tab-marches #forex-carry-container, #tab-marches #forex-seasonal-container, #tab-marches #forex-cross-asset { background: var(--d-fond); color: var(--d-normal); border: 1px solid var(--d-trait); border-radius: 14px; padding: 4px; } /* Les sept cartes COT sont des surfaces de données elles aussi, mais elles portent leur propre mise en page (.cot-carte, app.css) : le `padding: 4px` de la règle ci-dessus les écrasait contre leurs bords. Elles sont donc sorties de la liste, avec la même échelle sombre et leur propre respiration. */ #tab-marches #indices-cot-es, #tab-marches #indices-cot-nq, #tab-marches #indices-cot-gold, #tab-marches #indices-cot-silver, #tab-marches #indices-cot-vix, #tab-marches #forex-cot-eur, #tab-marches #forex-cot-jpy { background: var(--d-fond); color: var(--d-normal); border: 1px solid var(--d-trait); border-radius: 16px; padding: 14px 16px; } /* À l'intérieur d'une surface de données, le texte suit sa propre échelle — sinon il hériterait des couleurs claires de la page. */ #tab-marches .table-wrap th { background: var(--d-carte); color: var(--d-doux); border-bottom-color: var(--d-trait); } #tab-marches .table-wrap td { border-bottom-color: var(--d-trait); color: var(--d-normal); } #tab-marches .table-wrap tbody tr:hover { background: var(--d-voile); } /* ── Les trois défauts de lisibilité relevés sur la capture ── Ce ne sont pas des choix de style : le gras était PLUS CLAIR que le texte normal, ce qui inverse la hiérarchie. */ .syn-verdict, .syn-points li { color: var(--t-normal); } .syn-verdict b, .syn-points b { color: var(--t-fort); } .syn-verdict { border-left-color: var(--accent); } .syn-tech { background: var(--voile); color: var(--t-faible); } .syn-reserve { color: var(--t-faible); border-top-color: var(--trait); } .opt-pane-note { color: var(--t-doux); } #tab-marches .opt-card { background: var(--s-raised); border-color: var(--trait); } #tab-marches .opt-card-title { color: var(--t-doux); } /* Sous-onglets : j'avais laissé #272729 en dur sur l'état actif, qui restait donc sombre au milieu de boutons clairs. */ .mk-subtab-btn { background: var(--s-raised); color: var(--t-doux); border-color: var(--trait); } .mk-subtab-btn:hover { color: var(--t-normal); } .mk-subtab-btn.active { background: var(--accent-doux); color: var(--accent); border-color: var(--accent); } /* Le bloc d'analyse cross-marchés est fait de phrases : il reste clair. */ #tab-marches #indices-cross .form-panel { background: var(--s-raised); border-color: var(--trait); } #tab-marches #indices-cross { color: var(--t-normal); } /* ══════════════════════════════════════════════════════════════ ⚠️ CORRECTIF D'ARCHITECTURE — À LIRE AVANT DE TOUCHER AU RESTE. Première version fautive : les surfaces de données recevaient un fond sombre, mais le texte rendu par le JS à l'intérieur continuait d'utiliser `var(--t-normal)`, qui vaut #333336 en thème clair. Du texte foncé sur fond foncé — mesuré à 32 % des textes de MARCHÉS sous le seuil de 3:1, alors même que la page venait d'être migrée. Corriger appel par appel aurait demandé de distinguer, dans chaque fonction de rendu, si le fragment atterrit sur une surface claire ou sombre — impossible à tenir. Les propriétés personnalisées CSS HÉRITENT : on redéfinit donc la palette de texte SUR la surface de données. Tout `var(--t-*)` écrit à l'intérieur, y compris en style en ligne, se résout alors dans la bonne échelle, sans que le code de rendu ait à le savoir. ══════════════════════════════════════════════════════════════ */ #tab-marches .table-wrap, #tab-marches #indices-perf-heatmap, #tab-marches #indices-corr-matrix, #tab-marches #indices-risk-gauge, #tab-marches #indices-yields-container, #tab-marches #indices-vix-container, #tab-marches #forex-carry-container, #tab-marches #forex-seasonal-container, #tab-marches #forex-cross-asset, #tab-marches #indices-cot-es, #tab-marches #indices-cot-nq, #tab-marches #indices-cot-gold, #tab-marches #indices-cot-silver, #tab-marches #indices-cot-vix, #tab-marches #forex-cot-eur, #tab-marches #forex-cot-jpy { --t-fort: var(--d-fort); --t-normal: var(--d-normal); --t-doux: var(--d-doux); --t-faible: var(--d-doux); --trait: var(--d-trait); --trait-fort: rgba(255,255,255,.22); --voile: var(--d-voile); --s-raised: var(--d-carte); --s-sunken: var(--d-carte); --s-page: var(--d-fond); /* Les couleurs directionnelles reprennent les teintes d'Apple pour fond sombre : le vert assombri du thème clair serait terne ici. */ --hausse: #30d158; --baisse: #ff453a; --alerte: #ff9f0a; --accent: #2997ff; --hausse-doux: rgba(48,209,88,.14); --baisse-doux: rgba(255,69,58,.14); --alerte-doux: rgba(255,159,10,.14); --accent-doux: rgba(41,151,255,.14); } /* ══════════════════════════════════════════════════════════════ PASTILLES ET BOUTONS TEINTÉS ⚠️ LE MOTIF « TEXTE COLORÉ SUR TEINTE DU MÊME COLORIS » NE SURVIT PAS AU PASSAGE EN CLAIR. Sur fond sombre, une teinte à 10 % est foncée et le texte vif se détache. Sur fond clair, la teinte devient presque blanche et le texte coloré s'y dissout : .mk-subtab-btn.active #0066cc sur rgba(0,102,204,.10) 1,3:1 .news-coin-btn actif #0066cc sur rgba(37,99,235,.08) 1,3:1 .opt-info-btn #38bdf8 sur rgba(56,189,248,.12) 1,4:1 La solution d'Apple pour un état actif n'est pas une teinte, c'est un aplat : fond plein, texte blanc. C'est lisible dans les deux thèmes sans condition. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .mk-subtab-btn.active, :root[data-theme="clair"] .news-coin-btn.active, :root[data-theme="clair"] .opt-subtab-btn.active { background: var(--accent); color: #ffffff; border-color: var(--accent); } :root[data-theme="clair"] .news-coin-btn { background: var(--s-raised); color: var(--t-normal); border: 1px solid var(--trait); } :root[data-theme="clair"] .news-coin-btn:hover { color: var(--t-fort); } /* Les pastilles d'aide ⓘ : un aplat plutôt qu'une teinte, elles sont trop petites pour tolérer un contraste faible. */ :root[data-theme="clair"] .opt-info-btn, :root[data-theme="clair"] .cot4-info-btn { background: var(--accent); border-color: var(--accent); color: #ffffff; } :root[data-theme="clair"] .opt-info-btn:hover, :root[data-theme="clair"] .cot4-info-btn:hover { background: #0055ad; } /* En-têtes de tableau de données : le gris doux passait sous le seuil sur la carte sombre. */ #tab-marches .table-wrap th, #tab-marches th { color: var(--d-fort); } /* ══════════════════════════════════════════════════════════════ `.form-panel` — surface de données à part entière ⚠️ Sa correction faisait partie d'un lot interrompu et n'avait donc jamais été appliquée : fond #272729 en dur, texte en `--t-faible` (#6e6e73 en thème clair), soit 1,9:1 sur 17 éléments. Plutôt que de l'éclaircir, on l'assume comme surface de données — c'est ce qu'elle porte : jauges, panneaux de chiffres. ══════════════════════════════════════════════════════════════ */ #tab-marches .form-panel { background: var(--d-fond); border: 1px solid var(--d-trait); --t-fort: var(--d-fort); --t-normal: var(--d-normal); --t-doux: var(--d-doux); --t-faible: var(--d-doux); --trait: var(--d-trait); --voile: var(--d-voile); --s-raised: var(--d-carte); --s-sunken: var(--d-carte); --hausse: #30d158; --baisse: #ff453a; --alerte: #ff9f0a; --accent: #2997ff; } /* Exception : le bloc cross-marchés ne contient que des phrases. */ #tab-marches #indices-cross .form-panel { background: var(--s-raised); border-color: var(--trait); --t-fort: #1d1d1f; --t-normal: #333336; --t-doux: #6e6e73; --t-faible: #86868b; } :root:not([data-theme="clair"]) #tab-marches #indices-cross .form-panel { --t-fort: #f5f5f7; --t-normal: #d2d2d7; --t-doux: #86868b; --t-faible: #6e6e73; } /* ⚠️ DÉFAUT PRÉEXISTANT, PAS INTRODUIT ICI : #52525b sur #18181a donne 1,6:1 — illisible AUSSI en thème sombre. La migration le révèle, elle ne le crée pas. On relève le texte au niveau lisible. */ #tab-marches [style*="#52525b"], #tab-marches [style*="52, 82, 91"] { color: var(--d-doux) !important; } /* Cellules de heatmap : elles portent leur propre échelle de fond, le texte doit donc suivre l'échelle sombre. */ #tab-marches #indices-perf-heatmap * { color: var(--d-fort); } /* ══════════════════════════════════════════════════════════════ Filet large sur les surfaces de données ⚠️ TROIS TENTATIVES DE CIBLAGE CRAN PAR CRAN ONT ÉCHOUÉ. `.table-wrap` portait bien les jetons, mais le fond sombre réel est posé par `.table-scroll`, plus bas, qui reçoit son fond d'une règle générique d'app.css (`header, nav, .stat-card, .panel, .form-panel`). Chercher le bon cran à chaque fois est perdu d'avance sur 26 000 lignes. On applique donc l'échelle sombre à TOUTES les classes de surface connues du périmètre : les jetons héritent, un cran de trop ne coûte rien, un cran de moins laisse du texte illisible. ══════════════════════════════════════════════════════════════ */ #tab-marches .table-wrap, #tab-marches .table-scroll, #tab-marches .panel, #tab-marches .stat-card, #tab-marches table, #tab-marches tbody, #tab-marches thead { --t-fort: var(--d-fort); --t-normal: var(--d-normal); --t-doux: var(--d-doux); --t-faible: var(--d-doux); --trait: var(--d-trait); --voile: var(--d-voile); --s-raised: var(--d-carte); --s-sunken: var(--d-carte); --hausse: #30d158; --baisse: #ff453a; --alerte: #ff9f0a; --accent: #2997ff; --hausse-doux: rgba(48,209,88,.14); --baisse-doux: rgba(255,69,58,.14); --alerte-doux: rgba(255,159,10,.14); --accent-doux: rgba(41,151,255,.14); } /* ══════════════════════════════════════════════════════════════ THÈME MIXTE — CHROME CLAIR, DONNÉES SOMBRES (définition finale) ⚠️ CE BLOC REMPLACE LA DÉFINITION CLAIRE PRÉCÉDENTE, qui éclaircissait TOUTES les surfaces. C'était l'erreur de fond : `app.js` contient 2 375 couleurs écrites en dur, toutes pensées pour un fond sombre. Éclaircir les cartes rendait leur texte invisible et aurait exigé de convertir ces 2 375 valeurs — dont ~1 000 vivent dans des variables pouvant alimenter aussi bien du HTML qu'un canvas, où `var(--x)` échoue en silence. Mesure décisive : seuls 0 à 9 % des textes reposent sur le fond de page ; 91 à 100 % sont dans une carte. En laissant les cartes sombres, tout ce code reste juste, et il ne reste qu'une cinquantaine d'éléments de chrome à traiter sur l'ensemble du site. Le mélange n'est donc pas seulement un choix esthétique validé — il est ce qui rend le thème clair atteignable. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] { /* ── Chrome : la page, la navigation, les titres ── */ --s-page: #ffffff; --bg: #ffffff; --bg-primary: #ffffff; --panel: #ffffff; --t-fort: #1d1d1f; --t-normal: #333336; --t-doux: #6e6e73; --t-faible: #86868b; --text: #333336; --text-primary: #1d1d1f; --text-secondary: #6e6e73; --muted: #6e6e73; --trait: rgba(0,0,0,.12); --trait-fort: rgba(0,0,0,.22); --border: rgba(0,0,0,.12); --border-default: rgba(0,0,0,.12); --voile: rgba(0,0,0,.04); --accent: #0066cc; --accent-doux: rgba(0,102,204,.10); --hausse: #008a20; --baisse: #d70015; --alerte: #b25000; --green: #008a20; --red: #d70015; /* ── Données : inchangées, sombres ── */ --s-raised: #1d1d1f; --s-sunken: #262628; --card: #1d1d1f; --bg-secondary: #262628; --bg-tertiary: #303032; --bg-glass: rgba(255,255,255,.05); } /* Sur une surface de données, la palette de texte et la sémantique rebasculent en clair. Le sélecteur d'attribut attrape les surfaces converties en style en ligne, y compris sur les div anonymes. */ :root[data-theme="clair"] .table-wrap, :root[data-theme="clair"] .table-scroll, :root[data-theme="clair"] .form-panel, :root[data-theme="clair"] .stat-card, :root[data-theme="clair"] .opt-card, :root[data-theme="clair"] .panel, :root[data-theme="clair"] .card, :root[data-theme="clair"] .expert-live-card, :root[data-theme="clair"] table, :root[data-theme="clair"] [style*="var(--s-raised)"], :root[data-theme="clair"] [style*="var(--s-sunken)"], :root[data-theme="clair"] [style*="var(--card)"], :root[data-theme="clair"] [style*="#18181a"], :root[data-theme="clair"] [style*="#272729"] { --t-fort: #f5f5f7; --t-normal: #d2d2d7; --t-doux: #86868b; --t-faible: #6e6e73; --text: #d2d2d7; --muted: #86868b; --trait: rgba(255,255,255,.12); --border: rgba(255,255,255,.12); --voile: rgba(255,255,255,.05); --accent: #2997ff; --hausse: #30d158; --baisse: #ff453a; --alerte: #ff9f0a; --green: #30d158; --red: #ff453a; --accent-doux: rgba(41,151,255,.14); --hausse-doux: rgba(48,209,88,.14); --baisse-doux: rgba(255,69,58,.14); --alerte-doux: rgba(255,159,10,.14); color: var(--t-normal); } /* ══════════════════════════════════════════════════════════════ ÎLOTS CLAIRS — les blocs de texte au sein d'une page La règle « chrome clair / données sombres » ne suffit pas sur une page entièrement composée de cartes : le tableau de bord ressortait uniformément sombre, le blanc ne se voyant que sur les marges. On désigne donc explicitement les blocs de TEXTE comme clairs. Le repère employé pour les identifier est le rapport chiffres/lettres, mesuré sur le rendu réel : bannière IA .......... 2 % -> texte prochain unlock ...... 6 % -> texte stablecoins .......... 72 % -> données top gains ............ 91 % -> données Le choix reste explicite, pas automatique : une règle fondée sur ce rapport basculerait de couleur au premier contenu qui change. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .dashboard-hero, :root[data-theme="clair"] #dash-ia-banner, :root[data-theme="clair"] #dash-verdict-card { /* ⚠️ `!important` INDISPENSABLE ICI. `#dash-ia-banner` pose `background:var(--bg-surface)` en STYLE INLINE, qui bat toute règle de feuille sans `!important`. Sans lui, les jetons de texte passaient en clair pendant que le fond restait sombre : titre à 1,18:1, illisible. Mesuré le 13/09/2026, corrigé le 14/09. */ background: var(--s-page) !important; border: 1px solid rgba(0,0,0,.10) !important; --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --border:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); /* ⚠️ `--s-sunken` MANQUAIT ICI (ajouté le 14/09/2026). Dans cet îlot clair, deux boutons voisins du même bandeau écrivent l'un `background:var(--s-raised)`, l'autre `background:var(--s-sunken)` : le premier passait au clair, le second restait à #262628 avec un texte sombre par-dessus — 1,2:1. Un jeton oublié dans la déclaration d'un îlot ne casse que les rares blocs qui s'en servent, ce qui le rend d'autant plus long à voir. */ --card:#f5f5f7; --s-raised:#f5f5f7; --s-sunken:#ebebef; --bg-secondary:#f5f5f7; --bg-tertiary:#ebebef; --bg-surface:#f5f5f7; --accent:#0066cc; --accent-doux:rgba(0,102,204,.10); --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; color:#333336; } /* ⚠️ MAIS LES TUILES CHIFFRÉES À L'INTÉRIEUR RESTENT SOMBRES. C'est l'alternance elle-même : un panneau clair qui porte des instruments sombres. Sans cette exception, les tuiles hériteraient du clair et leurs couleurs — écrites pour un fond sombre — deviendraient illisibles. */ :root[data-theme="clair"] .dashboard-hero .hero-metric, :root[data-theme="clair"] .dashboard-hero .stat-card, :root[data-theme="clair"] .dashboard-hero .table-wrap, :root[data-theme="clair"] .dashboard-hero canvas, :root[data-theme="clair"] .dashboard-hero .expert-live-card { background: var(--d-fond) !important; border: 1px solid var(--d-trait); --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#86868b; --t-faible:#6e6e73; --text:#d2d2d7; --muted:#86868b; --trait:rgba(255,255,255,.12); --card:#262628; --s-raised:#262628; --bg-secondary:#262628; --bg-tertiary:#303032; --accent:#2997ff; --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --green:#30d158; --red:#ff453a; color:#d2d2d7; } /* Le titre du hero reprend l'échelle typographique d'Apple. */ :root[data-theme="clair"] .hero-title { color: var(--t-fort); } /* ══════════════════════════════════════════════════════════════ Rattrapage des couleurs « pour fond sombre » dans un îlot clair ⚠️ TOUT ÎLOT CLAIR HÉRITE D'UN CONTENU ÉCRIT POUR LE SOMBRE. Mesuré dans la carte de verdict une fois passée en blanc : rgba(255,255,255,.30) -> contraste 1,0 (invisible) rgba(255,255,255,.25) -> contraste 1,0 #9ca3af -> contraste 2,0 Ces valeurs sont posées en style en ligne par le JS. On les rattrape au sélecteur d'attribut, uniquement à l'intérieur des îlots désignés — ailleurs elles restent correctes et ne doivent pas être touchées. Les deux graphies (avec et sans espace après la virgule) sont nécessaires : le JS produit les deux. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .dashboard-hero [style*="color:rgba(255,255,255"], :root[data-theme="clair"] .dashboard-hero [style*="color: rgba(255, 255, 255"], :root[data-theme="clair"] .dashboard-hero [style*="color:rgba(255, 255, 255"], :root[data-theme="clair"] #dash-verdict-card [style*="color:rgba(255,255,255"], :root[data-theme="clair"] #dash-verdict-card [style*="color: rgba(255, 255, 255"], :root[data-theme="clair"] #dash-ia-banner [style*="color:rgba(255,255,255"] { color: var(--t-doux) !important; } :root[data-theme="clair"] .dashboard-hero [style*="#9ca3af"], :root[data-theme="clair"] .dashboard-hero [style*="#d1d5db"], :root[data-theme="clair"] .dashboard-hero [style*="#a1a1aa"], :root[data-theme="clair"] .dashboard-hero [style*="#e4e4e7"], :root[data-theme="clair"] .dashboard-hero [style*="#fafafa"], :root[data-theme="clair"] #dash-verdict-card [style*="#9ca3af"] { color: var(--t-normal) !important; } /* ⚠️ L'AMBRE VIF EST À 1,67:1 SUR BLANC. Mesuré le 14/09/2026 dans le hero : #fbbf24 et #f59e0b servent aux pastilles d'état et aux valeurs « attention ». Ce sont des teintes conçues pour ressortir sur du noir ; sur blanc elles disparaissent. On descend à l'ambre foncé déjà retenu comme --alerte du thème clair (#b25000, 4,6:1 sur blanc). Bornée au hero : ailleurs, sur fond sombre, l'ambre vif reste juste. */ :root[data-theme="clair"] .dashboard-hero [style*="#fbbf24"], :root[data-theme="clair"] .dashboard-hero [style*="#f59e0b"], :root[data-theme="clair"] .dashboard-hero [style*="#fcd34d"], :root[data-theme="clair"] #dash-verdict-card [style*="#fbbf24"], :root[data-theme="clair"] #dash-verdict-card [style*="#f59e0b"], :root[data-theme="clair"] #dash-macro-flash [style*="#fbbf24"], :root[data-theme="clair"] #dash-macro-flash [style*="#f59e0b"] { color: #b25000 !important; } /* Les tuiles sombres à l'intérieur gardent leurs couleurs d'origine : la règle ci-dessus ne doit pas les atteindre. */ :root[data-theme="clair"] .dashboard-hero .hero-metric [style*="color"], :root[data-theme="clair"] .dashboard-hero .stat-card [style*="color"] { color: revert !important; } /* ══════════════════════════════════════════════════════════════ Surfaces sombres supplémentaires — page COT et heatmap ⚠️ ÉNUMÉRER LES CLASSES PAGE PAR PAGE EST LE PRIX DE LA MÉTHODE. Chaque page a ses propres conteneurs sombres ; tant qu'ils ne portent pas de classe commune, ils doivent être désignés. Relevé sur COT : `.num`, `.cot-synthese`, `.cot-etf-actif`, `.cot-select-sem`, `.cot-btn-sem`, plus les `th`/`thead`. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .num, :root[data-theme="clair"] .cot-table, :root[data-theme="clair"] .cot-synthese, :root[data-theme="clair"] .cot-etf-actif, :root[data-theme="clair"] .cot-select-sem, :root[data-theme="clair"] .cot-btn-sem, :root[data-theme="clair"] .cot-etf-sep, :root[data-theme="clair"] .cot-etf-detail-tete, :root[data-theme="clair"] thead, :root[data-theme="clair"] th, :root[data-theme="clair"] select { --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#86868b; --t-faible:#6e6e73; --text:#d2d2d7; --muted:#86868b; --trait:rgba(255,255,255,.12); --accent:#2997ff; --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; } /* ⚠️ LES STYLES EN LIGNE BATTENT UNE RÈGLE DE CLASSE. Le heatmap pose ses couleurs de texte directement sur l'élément ; sans `!important` la règle de l'îlot sombre ne s'applique pas. */ :root[data-theme="clair"] #indices-perf-heatmap * { color: var(--d-fort) !important; } /* La légende COT vit sur le fond blanc : son texte doit être sombre. */ :root[data-theme="clair"] .cot-legend-item, :root[data-theme="clair"] .cot-legend-item * { color: var(--t-normal) !important; } /* Conteneurs sombres du tableau de bord, relevés au même titre que ceux de COT : bannière Rapport IA, liste des signaux, historique. */ :root[data-theme="clair"] #rp-banner-grid, :root[data-theme="clair"] #dash-top-signals-list, :root[data-theme="clair"] #rp-home-history, :root[data-theme="clair"] #dash-next-unlock-card, :root[data-theme="clair"] #expert-funding-card { --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#86868b; --t-faible:#6e6e73; --text:#d2d2d7; --muted:#86868b; --trait:rgba(255,255,255,.12); --accent:#2997ff; --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --green:#30d158; --red:#ff453a; } /* L'étiquette des tuiles chiffrées : #86868b sur le fond de tuile ne donne que 2,7:1. On la remonte d'un cran. */ :root[data-theme="clair"] .hero-metric-label { color: #a1a1a6 !important; } /* ══════════════════════════════════════════════════════════════ CORRECTION DE CLASSEMENT — .opt-card et .news-coin-btn ⚠️ JE LES AVAIS RANGÉES DANS LES SURFACES DE DONNÉES. C'est faux : `.opt-card` porte les synthèses — du français pur, le bloc le plus textuel de la page — et `.news-coin-btn` sont des filtres, donc du chrome. Les avoir assombries contredisait la règle même qu'elles étaient censées servir. Ces deux-là passent en clair ; leur contenu chiffré éventuel reste sombre par les règles d'îlot déjà posées. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .opt-card { background: var(--s-page); border: 1px solid rgba(0,0,0,.10); --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --accent:#0066cc; --accent-doux:rgba(0,102,204,.10); --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; color:#333336; } :root[data-theme="clair"] .opt-card-title { color: var(--t-doux); } :root[data-theme="clair"] .syn-verdict b, :root[data-theme="clair"] .syn-points b { color: var(--t-fort); } :root[data-theme="clair"] .syn-tech { background: rgba(0,0,0,.05); color: var(--t-faible); } /* Filtres : chrome, donc clairs. L'actif prend un aplat plein — une teinte sur fond clair ne tient pas le contraste (voir plus haut). */ :root[data-theme="clair"] .news-coin-btn { background: var(--s-raised, #f5f5f7) !important; color: #333336 !important; border: 1px solid rgba(0,0,0,.12) !important; } :root[data-theme="clair"] .news-coin-btn.active { background: #0066cc !important; color: #ffffff !important; border-color: #0066cc !important; } /* ⚠️ SPÉCIFICITÉ : une règle antérieure `#tab-marches .opt-card` (1,1,0) battait `:root[data-theme="clair"] .opt-card` (0,2,1) — un identifiant l'emporte sur deux classes. La correction doit donc porter le même identifiant pour reprendre la main. */ :root[data-theme="clair"] #tab-marches .opt-card, :root[data-theme="clair"] #tab-options .opt-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,.10) !important; --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --s-raised:#f5f5f7; --s-sunken:#ebebef; --card:#f5f5f7; --accent:#0066cc; --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; color:#333336; } :root[data-theme="clair"] #tab-marches .opt-card *, :root[data-theme="clair"] #tab-options .opt-card * { border-color: rgba(0,0,0,.12); } /* ⚠️ `var(--s-raised, #f5f5f7)` NE POUVAIT PAS MARCHER : dans ce thème, `--s-raised` est volontairement SOMBRE (c'est la surface de données). La valeur de repli n'est utilisée que si la variable est absente — elle ne l'était pas. Il faut la valeur littérale. */ :root[data-theme="clair"] .news-coin-btn, :root[data-theme="clair"] .cot-btn-sem { background: #f5f5f7 !important; color: #333336 !important; border: 1px solid rgba(0,0,0,.12) !important; } :root[data-theme="clair"] .news-coin-btn.active, :root[data-theme="clair"] .cot-btn-sem.active { background: #0066cc !important; color: #ffffff !important; border-color: #0066cc !important; } /* ══════════════════════════════════════════════════════════════ ÎLOTS SOMBRES — pages signaux, listings, news, whales ⚠️ UNE VARIABLE HÉRITÉE M'AVAIT ÉCHAPPÉ : `--bg-surface`, employée 26 fois en fond de carte dans les rendus JS (`background: var(--bg-surface,#18181b)`). Elle donne bien une surface sombre — c'est le comportement voulu — mais le texte à l'intérieur recevait les jetons clairs. D'où 58 % de textes illisibles sur LISTINGS. Plutôt que de la découvrir page après page, la liste ci-dessous a été établie en relevant, sur quatre pages, TOUTES les valeurs de fond en style en ligne dont la couleur calculée est sombre. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] [style*="var(--bg-surface"], :root[data-theme="clair"] [style*="var(--bg-tertiary"], :root[data-theme="clair"] [style*="var(--bg-secondary"], :root[data-theme="clair"] [style*="#374151"], :root[data-theme="clair"] .news-item, :root[data-theme="clair"] .ai-side-card, :root[data-theme="clair"] #conf-macro-bar, :root[data-theme="clair"] #conf-countdown, :root[data-theme="clair"] #track-record-widget, :root[data-theme="clair"] .lr-card, :root[data-theme="clair"] .whale-row { --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#86868b; --t-faible:#6e6e73; --text:#d2d2d7; --text-primary:#f5f5f7; --text-secondary:#86868b; --muted:#86868b; --trait:rgba(255,255,255,.12); --border:rgba(255,255,255,.12); --voile:rgba(255,255,255,.05); --accent:#2997ff; --accent-doux:rgba(41,151,255,.14); --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --green:#30d158; --red:#ff453a; color: var(--t-normal); } /* ══════════════════════════════════════════════════════════════ OPTIONS — retour au sombre, sauf la synthèse ⚠️ J'AVAIS RENDU `#tab-options .opt-card` CLAIRE PAR SYMÉTRIE AVEC MARCHÉS. C'était une erreur d'application de la règle : sur OPTIONS, ces cartes portent des GEX, des greeks, des ratios — des chiffres. Leur contenu est écrit pour le sombre (`#10b981` donne 2,4:1 sur blanc, les gris à 60 % d'opacité disparaissent), et la règle dit précisément que les chiffres restent sombres. Seule la carte qui porte `#opt-synthesis` est du français : elle seule reste claire. `:has()` évite d'avoir à lui poser une classe dans le HTML. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] #tab-options .opt-card { background: #1d1d1f !important; border: 1px solid rgba(255,255,255,.12) !important; --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#86868b; --t-faible:#6e6e73; --text:#d2d2d7; --muted:#86868b; --trait:rgba(255,255,255,.12); --voile:rgba(255,255,255,.05); --s-raised:#262628; --s-sunken:#262628; --accent:#2997ff; --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --green:#30d158; --red:#ff453a; color:#d2d2d7; } :root[data-theme="clair"] #tab-options .opt-card:has(#opt-synthesis) { background: #ffffff !important; border: 1px solid rgba(0,0,0,.10) !important; --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --s-raised:#f5f5f7; --s-sunken:#ebebef; --accent:#0066cc; --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; color:#333336; } /* ══════════════════════════════════════════════════════════════ RYTHME — trois tons plutôt que deux ⚠️ LA RÈGLE BINAIRE « TEXTE = CLAIR, CHIFFRES = SOMBRE » PRODUIT UN DAMIER. Elle était juste pour la lisibilité, insuffisante pour l'œil : deux tons qui alternent sans respiration donnent une page hachée. apple.com emploie TROIS fonds — #ffffff, #f5f5f7 et un sombre — et c'est le ton intermédiaire qui fait le rythme : il sépare sans trancher. On l'introduit ici, avec plus d'air entre les blocs et des rayons plus généreux sur les surfaces sombres, pour qu'elles se lisent comme des objets posés plutôt que comme des trous. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] { --s-bande: #f5f5f7; } /* Respiration : l'ancien espacement était réglé pour des blocs de même couleur, où la séparation ne se voyait pas. */ :root[data-theme="clair"] #tab-marches > .mk-subtab-pane > * { margin-bottom: 22px; } /* Les surfaces sombres deviennent des objets : rayon large, léger détachement, pas de bordure dure. */ :root[data-theme="clair"] #tab-marches .table-wrap, :root[data-theme="clair"] #tab-marches .form-panel, :root[data-theme="clair"] #tab-marches #indices-perf-heatmap { border-radius: 18px !important; border: none !important; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.06); overflow: hidden; } /* Bande intermédiaire pour les blocs de texte qui suivent une surface sombre — c'est là que le gris travaille. */ :root[data-theme="clair"] #tab-marches #indices-cross .form-panel { background: var(--s-bande) !important; border: none !important; border-radius: 18px !important; box-shadow: none !important; padding: 20px 22px !important; --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --muted:#6e6e73; color:#333336; } /* La carte de synthèse reste blanche mais gagne du calme : plus d'air, un trait accent plus discret, un rayon accordé au reste. */ :root[data-theme="clair"] #tab-marches .opt-card { border-radius: 18px !important; border: 1px solid rgba(0,0,0,.08) !important; padding: 24px 26px !important; box-shadow: none !important; } :root[data-theme="clair"] .syn-verdict { border-left-width: 3px; padding-left: 16px; font-size: .95rem; } /* Les sous-onglets : pastilles pleines, à la manière des segments iOS. */ :root[data-theme="clair"] .mk-subtab-bar { background: var(--s-bande); padding: 4px; border-radius: 12px; display: inline-flex; gap: 2px; } :root[data-theme="clair"] .mk-subtab-btn { background: transparent !important; border: none !important; border-radius: 9px !important; color: #6e6e73 !important; } :root[data-theme="clair"] .mk-subtab-btn.active { background: #ffffff !important; color: #1d1d1f !important; box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* ══════════════════════════════════════════════════════════════ GRAMMAIRE VISUELLE — généralisée à toutes les pages Ce qui a été mis au point sur MARCHÉS et validé : trois tons, les surfaces sombres traitées comme des objets posés, un contrôle segmenté pour les sous-onglets, et de l'air entre les blocs. ⚠️ SEULE LA GRAMMAIRE EST GÉNÉRALISÉE, PAS L'AFFECTATION. Décider quel bloc est clair et lequel est sombre relève du sens de la page, pas d'une règle : le même composant `.opt-card` porte une synthèse sur MARCHÉS (donc clair) et des greeks sur OPTIONS (donc sombre). Ces choix restent déclarés page par page. ══════════════════════════════════════════════════════════════ */ /* Surfaces sombres : objets posés, pas trous découpés. */ :root[data-theme="clair"] .tab .table-wrap, :root[data-theme="clair"] .tab .form-panel, :root[data-theme="clair"] .tab .expert-live-card, :root[data-theme="clair"] .tab .stat-card { border-radius: 18px !important; border: none !important; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.06); overflow: hidden; } /* Cartes claires : rayon accordé, bordure ténue, pas d'ombre — elles sont déjà distinguées par leur clarté. */ :root[data-theme="clair"] .tab .opt-card { border-radius: 18px !important; padding: 24px 26px !important; } /* Respiration entre blocs de premier niveau. */ :root[data-theme="clair"] .tab > *, :root[data-theme="clair"] .mk-subtab-pane > *, :root[data-theme="clair"] .opt-subtab-pane > * { margin-bottom: 22px; } /* Contrôle segmenté — les deux barres de sous-onglets du site. */ :root[data-theme="clair"] .mk-subtab-bar, :root[data-theme="clair"] .opt-subtab-bar { background: var(--s-bande); padding: 4px; border-radius: 12px; display: inline-flex; gap: 2px; } :root[data-theme="clair"] .mk-subtab-btn, :root[data-theme="clair"] .opt-subtab-btn { background: transparent !important; border: none !important; border-radius: 9px !important; color: #6e6e73 !important; } :root[data-theme="clair"] .mk-subtab-btn.active, :root[data-theme="clair"] .opt-subtab-btn.active { background: #ffffff !important; color: #1d1d1f !important; box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* ⚠️ Les boutons de période (1J/7J/30J) portent la même classe `opt-subtab-btn` que les vrais onglets — c'est le défaut de sélecteur déjà rencontré dans `_optSwitchTab`. On les exclut du contrôle segmenté, sinon ils héritent d'un fond de barre qui n'existe pas. */ :root[data-theme="clair"] .opt-subtab-btn[id^="opt-hist-"] { background: var(--s-bande) !important; border: 1px solid rgba(0,0,0,.10) !important; border-radius: 8px !important; } :root[data-theme="clair"] .opt-subtab-btn[id^="opt-hist-"].active { background: #0066cc !important; color:#fff !important; border-color:#0066cc !important; } /* ══════════════════════════════════════════════════════════════ ÎLOTS CLAIRS DEMANDÉS — macro et tableau de bord Affectation décidée par l'utilisateur, pas déduite : le calendrier économique, les news critiques, les dernières stats et les deux tops. ⚠️ AUCUN DE CES BLOCS N'A D'IDENTIFIANT PROPRE — ce sont tous des `.table-wrap`. On les distingue par un identifiant INTERNE via `:has()`, ce qui évite d'avoir à modifier le HTML et de risquer de basculer tous les tableaux du site. ⚠️ LES TOPS SONT À 74 ET 91 % DE CHIFFRES. La règle « chiffres = sombre » aurait dit non ; le choix de les éclairer est délibéré et se défend — ce sont des blocs de mise en avant, le clair les fait ressortir sur un fond majoritairement sombre. La règle sert l'œil, elle ne le commande pas. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .table-wrap:has(#dash-news),:root[data-theme="clair"] .table-wrap:has(#dash-today-cal),:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) { background: #ffffff !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06); --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --border:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --s-raised:#f5f5f7; --s-sunken:#ebebef; --card:#f5f5f7; --accent:#0066cc; --accent-doux:rgba(0,102,204,.10); --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; color:#333336; } /* En-têtes de ces tableaux : gris clair plutôt que sombre. */ :root[data-theme="clair"] .table-wrap:has(#dash-news) th,:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) th,:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) th { background: #f5f5f7 !important; color: #6e6e73 !important; } :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#34d399"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#34d399"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#34d399"] { color:#008a20 !important; } :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#ef4444"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#ef4444"] { color:#d70015 !important; } :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="rgba(255,255,255"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="rgba(255,255,255"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="rgba(255,255,255"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="rgba(255,255,255"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="rgba(255,255,255"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="rgba(255,255,255"],255,255"],255,255"] { color: var(--t-doux) !important; } :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#d1d5db"], :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#9ca3af"], :root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#d1d5db"], :root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#9ca3af"], :root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#d1d5db"], :root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#9ca3af"] { color: var(--t-normal) !important; } :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="color:var(--green)"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="color:var(--green)"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="color:var(--green)"] { color:#008a20 !important; } :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="color:var(--red)"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="color:var(--red)"] { color:#d70015 !important; } :root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="color:var(--yellow)"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="color:var(--yellow)"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="color:var(--yellow)"] { color:#b25000 !important; } :root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="color:var(--accent)"], :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="color:var(--accent)"], :root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="color:var(--accent)"] { color:#0066cc !important; } /* ══════════════════════════════════════════════════════════════ ⚠️ CONFLIT : mes règles globales placent `select`, `th` et `thead` parmi les surfaces sombres. À l'intérieur d'un îlot CLAIR, elles réintroduisent l'échelle sombre — d'où du texte #d2d2d7 sur blanc dans le calendrier économique. Il faut réaffirmer l'échelle claire sur ces éléments imbriqués. Et `--t-doux` (#86868b) sur un fond à 81 % de luminance ne donne que 2,9:1 : sous un îlot clair, le gris secondaire descend d'un cran. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .table-wrap:has(#dash-news) th,:root[data-theme="clair"] .table-wrap:has(#dash-news) thead,:root[data-theme="clair"] .table-wrap:has(#dash-news) select,:root[data-theme="clair"] .table-wrap:has(#dash-news) .table-wrap,:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) th,:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) thead,:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) select,:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) .table-wrap,:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) th,:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) thead,:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) select,:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) .table-wrap,:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) .num,:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) .num { --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --accent:#0066cc; --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; background: transparent; color:#333336; } /* Gris secondaire d'un cran plus foncé dans un îlot clair : #86868b plafonne à 2,9:1 sur les fonds à 81 %. */ :root[data-theme="clair"] .table-wrap:has(#cal-date-picker),:root[data-theme="clair"] .table-wrap:has(#dash-today-cal),:root[data-theme="clair"] .table-wrap:has(#dash-news) { --t-doux:#5c5c61; --t-faible:#6e6e73; } /* ══════════════════════════════════════════════════════════════ ⚠️ LES SÉLECTEURS D'ATTRIBUT DÉSIGNENT LES SURFACES SOMBRES OÙ QU'ELLES SOIENT — y compris à l'intérieur d'un îlot clair. Les lignes du calendrier économique portent `background:var(--bg-surface,…)` et récupéraient donc l'échelle sombre : du texte #d2d2d7 sur blanc, sur quatre niveaux de div anonymes. La contre-règle ci-dessous réaffirme l'échelle claire à l'intérieur des îlots désignés. Sa spécificité (identifiant + classes + attribut) dépasse celle du sélecteur d'attribut seul. Elle est engendrée par script : 5 îlots × 11 motifs, écrite à la main elle inviterait la faute de frappe. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="var(--bg-surface"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="var(--bg-tertiary"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="var(--bg-secondary"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="var(--s-raised)"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="var(--s-sunken)"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="var(--card)"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#18181a"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#18181b"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#272729"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#27272a"],:root[data-theme="clair"] .table-wrap:has(#dash-news) [style*="#374151"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="var(--bg-surface"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="var(--bg-tertiary"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="var(--bg-secondary"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="var(--s-raised)"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="var(--s-sunken)"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="var(--card)"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#18181a"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#18181b"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#272729"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#27272a"],:root[data-theme="clair"] .table-wrap:has(#dash-today-cal) [style*="#374151"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="var(--bg-surface"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="var(--bg-tertiary"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="var(--bg-secondary"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="var(--s-raised)"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="var(--s-sunken)"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="var(--card)"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#18181a"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#18181b"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#272729"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#27272a"],:root[data-theme="clair"] .table-wrap:has(#cal-date-picker) [style*="#374151"] { --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#5c5c61; --t-faible:#6e6e73; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --accent:#0066cc; --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; background:#f5f5f7 !important; color:#333336; } /* ══════════════════════════════════════════════════════════════ ORACLE — rattrapage des pastels ⚠️ CETTE PAGE EST DU TEXTE, donc claire — mais son contenu est écrit en pastels de la gamme 200 de Tailwind (#fecaca, #fef08a, #d1fae5), lisibles sur fond noir, invisibles sur blanc. 43 % des textes étaient sous le seuil, dont des listes entières de risques et de convergences. Les `
  • ` n'ont ni classe ni style propre : ils HÉRITENT d'un ancêtre porteur du style en ligne. Le sélecteur d'attribut sur cet ancêtre les couvre donc aussi, sans avoir à les cibler un par un. ⚠️ LES ÉQUIVALENTS SONT CHOISIS PAR USAGE, pas par proximité de teinte : #d1fae5 (vert très pâle) devient un vert FONCÉ (#046c2a), pas un vert pâle — sur blanc, c'est le contraste qui doit être conservé, pas la clarté. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] #tab-oracle [style*="#9ca3af"] { color:#5c5c61 !important; } :root[data-theme="clair"] #tab-oracle [style*="#d1d5db"] { color:#333336 !important; } :root[data-theme="clair"] #tab-oracle [style*="#e2e8f0"] { color:#333336 !important; } :root[data-theme="clair"] #tab-oracle [style*="#cbd5e1"] { color:#333336 !important; } :root[data-theme="clair"] #tab-oracle [style*="#4b5563"] { color:#333336 !important; } :root[data-theme="clair"] #tab-oracle [style*="#6b7280"] { color:#5c5c61 !important; } :root[data-theme="clair"] #tab-oracle [style*="#34d399"] { color:#008a20 !important; } :root[data-theme="clair"] #tab-oracle [style*="#6ee7b7"] { color:#008a20 !important; } :root[data-theme="clair"] #tab-oracle [style*="#d1fae5"] { color:#046c2a !important; } :root[data-theme="clair"] #tab-oracle [style*="#10b981"] { color:#008a20 !important; } :root[data-theme="clair"] #tab-oracle [style*="#22c55e"] { color:#008a20 !important; } :root[data-theme="clair"] #tab-oracle [style*="#eab308"] { color:#8a5a00 !important; } :root[data-theme="clair"] #tab-oracle [style*="#fef08a"] { color:#8a5a00 !important; } :root[data-theme="clair"] #tab-oracle [style*="#fed7aa"] { color:#a04a00 !important; } :root[data-theme="clair"] #tab-oracle [style*="#f59e0b"] { color:#b25000 !important; } :root[data-theme="clair"] #tab-oracle [style*="#fbbf24"] { color:#8a5a00 !important; } :root[data-theme="clair"] #tab-oracle [style*="#fecaca"] { color:#c00012 !important; } :root[data-theme="clair"] #tab-oracle [style*="#f87171"] { color:#d70015 !important; } :root[data-theme="clair"] #tab-oracle [style*="#ef4444"] { color:#d70015 !important; } /* ══════════════════════════════════════════════════════════════ ORACLE — deux corrections au rattrapage précédent ⚠️ MON RATTRAPAGE ÉTAIT TROP LARGE. Il assombrissait toute couleur pâle de la page, y compris celle posée sur les blocs restés SOMBRES (`background:var(--bg-surface)`), où le texte devenait #333336 sur #1d1d1f. Corriger une couleur sans regarder son fond, c'est déplacer le problème. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#e2e8f0"], :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#d1d5db"], :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#9ca3af"], :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#4b5563"] { color:#d2d2d7 !important; } :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#34d399"], :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#6ee7b7"], :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#d1fae5"] { color:#30d158 !important; } :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#eab308"], :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#fed7aa"] { color:#ff9f0a !important; } :root[data-theme="clair"] #tab-oracle [style*="var(--bg-surface"] [style*="#fecaca"] { color:#ff453a !important; } /* Les fonds intermédiaires de la page (64 % et 75 % de luminance) : un vert à #008a20 n'y tient pas les 3:1. Un cran plus foncé. */ :root[data-theme="clair"] #oracle-agents-list [style*="#34d399"], :root[data-theme="clair"] #oracle-agents-list [style*="#10b981"] { color:#046c2a !important; } :root[data-theme="clair"] #oracle-tab-onchain-card [style*="#9ca3af"], :root[data-theme="clair"] #oracle-tab-onchain-card [style*="#86868b"] { color:#4a4a4f !important; } /* ══════════════════════════════════════════════════════════════════ BULLES D'AIDE — refonte du 13/09/2026 ══════════════════════════════════════════════════════════════════ MESURÉ AVANT DE TOUCHER À QUOI QUE CE SOIT (contraste alpha composé, sur apexview.eu) : sombre clair popup OPTIONS 11,6:1 1,38:1 ← illisible popup COT/dash 11,8:1 1,41:1 ← illisible ⚠️ LA CAUSE N'EST PAS LE THÈME CLAIR, C'EST UN FOND CODÉ EN DUR. `.opt-info-popup` porte `background:#0d1b2a` et `.cot4-info-popup` `background:#111827` — deux sombres figés — pendant que leur texte suit `var(--text)`, qui devient sombre en thème clair. Texte sombre sur fond sombre. ⚠️ CORRIGER LA COULEUR DU TEXTE N'AURAIT PAS SUFFI. Le contenu des bulles est écrit en HTML avec des couleurs en dur (`rgba(255,255,255, .3)`, gris clairs) pensées pour un fond sombre. On fait donc de la bulle un ÎLOT SOMBRE explicite : on y redéfinit les jetons, les propriétés héritent, et le contenu reste juste dans les DEUX thèmes sans qu'aucun code de rendu ait à le savoir. C'est le mécanisme déjà employé pour les cartes de données. ────────────────────────────────────────────────────────────────── */ .opt-info-popup, .cot4-info-popup { /* Îlot : les jetons valent le sombre quel que soit le thème de la page */ --s-page:#1c1c1e; --s-raised:#242426; --s-sunken:#161617; --t-fort:#f5f5f7; --t-normal:#e3e3e6; --t-doux:#b8b8bd; --t-faible:#9a9aa0; --trait:rgba(255,255,255,.13); --accent:#4aa8ff; --hausse:#30d158; --baisse:#ff6b61; --alerte:#ffb340; /* Pont vers l'ancien système, comme au niveau racine */ --bg:var(--s-page); --card:var(--s-raised); --bg-surface:var(--s-sunken); --text:var(--t-normal); --muted:var(--t-doux); --border:var(--trait); --green:var(--hausse); --red:var(--baisse); background: #1c1c1e !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important; box-shadow: 0 18px 50px rgba(0,0,0,.55) !important; color: var(--t-normal) !important; } /* ⚠️ Les tons SECONDAIRES étaient déjà faibles en thème sombre — 3,46:1 pour l'exemple COT, 4,12:1 pour celui des options. On les remonte : ces encarts portent souvent l'information la plus concrète. */ .opt-info-popup .opt-info-popup-body, .cot4-info-popup .pop-body { color: var(--t-normal) !important; } .opt-info-popup [style*="var(--muted)"], .cot4-info-popup .pop-example { color: var(--t-doux) !important; } .cot4-info-popup .pop-example { background: rgba(255,255,255,.05) !important; border-left: 2px solid var(--accent) !important; } .opt-info-popup-title, .cot4-info-popup .pop-title { color: var(--accent) !important; } .opt-info-popup-close { color: var(--t-doux) !important; } .opt-info-popup-close:hover { color: var(--t-fort) !important; } /* ── Le déclencheur : plus de pastille bleue ────────────────────── ⚠️ LE GLYPHE EST REMPLACÉ EN CSS, PAS DANS LE HTML. Le caractère « ⓘ » est écrit en dur à 72 endroits du gabarit ; `font-size:0` l'efface et `::before` pose le nouveau. Une seule règle au lieu de 72 modifications, et rien à re-synchroniser plus tard. */ .opt-info-btn, .cot4-info-btn, .av-info { background: transparent !important; border: 1px solid var(--t-faible) !important; color: var(--t-faible) !important; font-size: 0 !important; /* masque le ⓘ du gabarit */ width: 15px !important; height: 15px !important; min-width: 15px !important; opacity: .72; transition: color .15s, border-color .15s, opacity .15s; } .opt-info-btn::before, .cot4-info-btn::before, .av-info::before { content: "?"; font-size: 9.5px; font-weight: 600; font-style: normal; line-height: 1; font-family: var(--title, inherit); } .opt-info-btn:hover, .cot4-info-btn:hover, .av-info:hover { border-color: var(--accent) !important; color: var(--accent) !important; opacity: 1; } @media (pointer: coarse) { /* 15 px se rate au doigt ; la zone tactile élargie existe déjà en ::after, mais le repère visuel doit rester visible. */ .opt-info-btn, .cot4-info-btn, .av-info { width: 19px !important; height: 19px !important; min-width: 19px !important; } .opt-info-btn::before, .cot4-info-btn::before, .av-info::before { font-size: 11px; } } /* ================================================================== NOTE - regle "surfaces sombres inline" RETIREE le 14/09/2026 ================================================================== Ecrite la veille pour eclaircir le texte des blocs posant leur fond via background:var(--bg-surface) en inline. Elle n'a jamais rien change : mesure avant 7,6 % de textes sous 3:1, apres 7,8 %. /!\ DEUX RAISONS, TOUTES DEUX INSTRUCTIVES. 1. Une regle plus large existait deja - [style*="var(--bg-surface"], sans le prefixe background. Doublon non repere avant d'ecrire. 2. Sur le vrai coupable, #dash-ia-banner, une regle d'ILOT CLAIR portant un IDENTIFIANT (1,2,0) battait mon selecteur d'attribut (0,3,0). Le probleme n'etait donc pas le texte mais le FOND, reste sombre faute de !important face au style inline. La lecon : mesurer l'effet d'une regle apres l'avoir posee. Celle-ci matchait bien ses 111 cibles et etait pourtant sans effet. ------------------------------------------------------------------ */ /* ================================================================== TABLEAU DE BORD EN CLAIR — passe de mesure du 14/09/2026 ================================================================== Après le passage du CLAIR en défaut : 22 textes sous 3:1 sur 370. Tous identifiés nommément, deux familles seulement. /!\ LES COULEURS POSEES PAR LE JS SONT SERIALISEES EN rgb(), PAS EN HEXA. `el.style.color = '#34d399'` ressort dans l'attribut comme `color: rgb(52, 211, 153)`. Un sélecteur `[style*="#34d399"]` ne matche donc RIEN — c'est exactement pourquoi la première version de ce rattrapage était sans effet. Toujours vérifier la forme réellement présente dans l'attribut, pas celle écrite dans le source. ------------------------------------------------------------------ */ /* --- A. Surfaces restées SOMBRES dont le texte suivait le clair --- Le fond vient d'un parent sombre ; sans îlot, le texte passait en #333336 sur du sombre (1,28:1). */ :root[data-theme="clair"] #dash-market-summary, :root[data-theme="clair"] #rp-home-history { --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#a1a1a8; --t-faible:#8e8e94; --text:#d2d2d7; --muted:#a1a1a8; --trait:rgba(255,255,255,.12); --border:rgba(255,255,255,.12); --accent:#2997ff; --hausse:#30d158; --baisse:#ff6b61; --alerte:#ffb340; --green:#30d158; --red:#ff6b61; color:#d2d2d7; } /* Couleurs en dur trop foncées pour ces fonds sombres. */ :root[data-theme="clair"] #rp-home-history [style*="#2563eb"], :root[data-theme="clair"] #rp-home-history [style*="rgb(37, 99, 235)"] { color:#2997ff !important; } :root[data-theme="clair"] #dash-market-summary [style*="#52525b"], :root[data-theme="clair"] #dash-market-summary [style*="rgb(82, 82, 91)"] { color:#a1a1a8 !important; } :root[data-theme="clair"] #dash-market-summary [style*="#ef4444"], :root[data-theme="clair"] #dash-market-summary [style*="rgb(239, 68, 68)"] { color:#ff6b61 !important; } /* --- B. Couleurs VIVES sur fond devenu CLAIR --- Teintes conçues pour ressortir sur du noir : 1,67 à 1,92:1 sur blanc. On cible les DEUX écritures (hexa du gabarit, rgb() du JS) et on borne aux blocs clairs — ailleurs, sur fond sombre, elles sont justes. Le signe est préservé : chaque teinte garde sa polarité. */ :root[data-theme="clair"] #dash-macro-flash [style*="rgb(52, 211, 153)"], :root[data-theme="clair"] #dash-macro-flash [style*="#34d399"], :root[data-theme="clair"] #dash-verdict-card [style*="rgb(52, 211, 153)"], :root[data-theme="clair"] #dash-verdict-card [style*="#34d399"] { color:#008a20 !important; } :root[data-theme="clair"] #dash-macro-flash [style*="rgb(251, 191, 36)"], :root[data-theme="clair"] #dash-macro-flash [style*="#fbbf24"], :root[data-theme="clair"] #dash-verdict-card [style*="rgb(251, 191, 36)"], :root[data-theme="clair"] #dash-verdict-card [style*="#fbbf24"] { color:#b25000 !important; } :root[data-theme="clair"] #dash-macro-flash [style*="rgb(239, 68, 68)"], :root[data-theme="clair"] #dash-macro-flash [style*="#ef4444"], :root[data-theme="clair"] #dash-verdict-card [style*="rgb(239, 68, 68)"], :root[data-theme="clair"] #dash-verdict-card [style*="#ef4444"] { color:#d70015 !important; } :root[data-theme="clair"] #dash-verdict-card [style*="rgb(156, 163, 175)"], :root[data-theme="clair"] #dash-verdict-badge[style*="rgb(156, 163, 175)"], :root[data-theme="clair"] #dash-verdict-main[style*="rgb(156, 163, 175)"] { color:#6e6e73 !important; } /* Pied de page : blanc translucide, 1,0:1 — invisible sur blanc. */ :root[data-theme="clair"] footer [style*="rgba(255,255,255"], :root[data-theme="clair"] footer [style*="rgba(255, 255, 255"], :root[data-theme="clair"] footer a { color:#6e6e73 !important; } /* --- C. Les 4 derniers du tableau de bord (14/09/2026) ----------- */ /* Chapeau du hero : #b0a99c, 2,33:1 sur blanc. */ :root[data-theme="clair"] .dashboard-hero .hero-lead { color:#6e6e73 !important; } /* ⚠️ Une règle `#dash-ia-banner button { color:#333336 }` a été essayée ici puis RETIRÉE : elle corrigeait le bouton CHAT IA et cassait son voisin RAPPORT IA, resté sur fond sombre. Le vrai défaut était le jeton `--s-sunken` absent de la déclaration de l'îlot, corrigé plus haut. Soigner le symptôme sur deux boutons voisins en aurait cassé un. ⚠️ SECONDE COUCHE, NÉCESSAIRE. Une règle générique antérieure traite tout élément posant `background:var(--s-raised|--s-sunken)` comme une surface SOMBRE et y rescope les jetons de texte en clair. À l'intérieur de cet îlot, ces boutons sont désormais CLAIRS : la règle générique les rendait blancs sur blanc. On la neutralise ici, et seulement ici — l'ancêtre identifiant (1,2,0) bat le sélecteur d'attribut seul (0,2,0). Bornée à ce bandeau : dans `.dashboard-hero`, les tuiles chiffrées doivent au contraire rester sombres. */ :root[data-theme="clair"] #dash-ia-banner [style*="var(--s-raised)"], :root[data-theme="clair"] #dash-ia-banner [style*="var(--s-sunken)"], :root[data-theme="clair"] #dash-ia-banner [style*="var(--bg-surface)"] { --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --border:rgba(0,0,0,.12); color:#333336; } /* /!\ CELUI-CI N'EST PAS UN DEFAUT DU THEME CLAIR : rgba(255,255,255,.2) donne 1,92:1 sur le fond sombre de la bande, donc AUSSI en thème sombre. Corrigé pour les deux — d'où l'absence de [data-theme]. */ #dash-top-signals-strip [style*="rgba(255,255,255,.2)"], #dash-top-signals-strip [style*="rgba(255, 255, 255, 0.2)"] { color:#a1a1a8 !important; } /* ================================================================== PAGE ACTUALITES EN CLAIR - 14/09/2026 ================================================================== Demandee par l'utilisateur. Coherent avec la regle « chrome clair, donnees sombres » : cette page est presque uniquement du TEXTE. ------------------------------------------------------------------ */ :root[data-theme="clair"] #tab-news { --s-page:#ffffff; --s-raised:#ffffff; --s-sunken:#f0f0f3; --s-bande:#f5f5f7; --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --text-muted:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --border:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --card:#ffffff; --bg-secondary:#ffffff; --bg-tertiary:#f5f5f7; --bg-surface:#f5f5f7; --accent:#0066cc; --accent-doux:rgba(0,102,204,.10); --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; --yellow:#b25000; color:#333336; } /* Les cartes : blanches, posees, avec la bordure de categorie conservee. /!\ `background` en !important : `.news-item` pose la sienne via var(--bg-secondary) que l'on redefinit ci-dessus, mais le survol utilise --bg-tertiary ; on fixe les deux pour eviter un gris sale. */ :root[data-theme="clair"] #tab-news .news-item, :root[data-theme="clair"] #tab-news .news-carte { background:#ffffff !important; border-color:rgba(0,0,0,.10); box-shadow:0 1px 3px rgba(0,0,0,.05); /* /!\ IL FAUT AUSSI REDEFINIR LES JETONS ICI, PAS SEULEMENT SUR #tab-news. Une regle d'ilot SOMBRE anterieure (ligne 769) cible `.news-item` et y remet --text-primary a #f5f5f7 : les jetons clairs poses sur la page etaient ecrases entre la page et le titre, qui s'affichait en blanc sur blanc. Mesure : #f5f5f7 sur #ffffff. */ --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --text-muted:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --border:rgba(0,0,0,.12); --accent:#0066cc; --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; --yellow:#b25000; color:#333336; } :root[data-theme="clair"] #tab-news .news-item:hover, :root[data-theme="clair"] #tab-news .news-carte:hover { background:#f5f5f7 !important; } /* /!\ LES COULEURS DE CATEGORIE SONT ECRITES EN DUR DANS LE JS et pensees pour un fond sombre. Mesure sur blanc : #f59e0b 2,1:1, #10b981 2,3:1, #a78bfa 2,2:1, #06b6d4 2,3:1 - toutes illisibles. On les fonce, en gardant la meme famille pour que le code couleur reste reconnaissable. Les DEUX ecritures sont ciblees : hexa du gabarit et rgb() du JS. */ :root[data-theme="clair"] #tab-news [style*="#f59e0b"]:not(.news-carte-cat), :root[data-theme="clair"] #tab-news [style*="rgb(245, 158, 11)"]:not(.news-carte-cat) { color:#9a5b00 !important; } :root[data-theme="clair"] #tab-news [style*="#10b981"]:not(.news-carte-cat), :root[data-theme="clair"] #tab-news [style*="rgb(16, 185, 129)"]:not(.news-carte-cat) { color:#00733a !important; } :root[data-theme="clair"] #tab-news [style*="#ef4444"]:not(.news-carte-cat), :root[data-theme="clair"] #tab-news [style*="rgb(239, 68, 68)"]:not(.news-carte-cat) { color:#c4111f !important; } :root[data-theme="clair"] #tab-news [style*="#2563eb"]:not(.news-carte-cat), :root[data-theme="clair"] #tab-news [style*="rgb(37, 99, 235)"]:not(.news-carte-cat) { color:#1d4ed8 !important; } :root[data-theme="clair"] #tab-news [style*="#a78bfa"]:not(.news-carte-cat), :root[data-theme="clair"] #tab-news [style*="rgb(167, 139, 250)"]:not(.news-carte-cat) { color:#6d28d9 !important; } :root[data-theme="clair"] #tab-news [style*="#06b6d4"]:not(.news-carte-cat), :root[data-theme="clair"] #tab-news [style*="rgb(6, 182, 212)"]:not(.news-carte-cat) { color:#0e7490 !important; } /* /!\ La bordure gauche garde la teinte VIVE : sur un liere de 3 px, c'est un reperage visuel, pas du texte - le seuil de contraste des textes ne s'y applique pas et la foncer effacerait le code couleur. */ :root[data-theme="clair"] #tab-news .news-item[style*="border-left"] { border-left-width:3px; } /* Blancs translucides herites du sombre : invisibles sur blanc. */ :root[data-theme="clair"] #tab-news [style*="rgba(255,255,255"], :root[data-theme="clair"] #tab-news [style*="rgba(255, 255, 255"] { color:var(--t-doux) !important; } /* La vignette de repli garde son degrade sombre et son texte clair : c'est une image, pas une surface de lecture. */ :root[data-theme="clair"] #tab-news .vignette-repli > span { color:rgba(255,255,255,.9) !important; } /* ================================================================== EN-TETE ET BARRE DE NAVIGATION - 14/09/2026 ================================================================== Signale a l'oeil : logo « Apex » invisible, nom de l'utilisateur connecte invisible. /!\ MEME DEFAUT QUE LE BANDEAU IA : ces deux barres restent SOMBRES en theme clair (mesure : header rgb(24,24,27), nav rgb(39,39,41)) mais leurs jetons de texte suivaient la page et passaient au sombre (rgb(51,51,54)). Le logo ecrit `color:var(--t-fort)` en style inline : #1d1d1f sur #18181b, soit du noir sur du noir. On les declare ilots SOMBRES. C'est aussi le parti pris visuel : une barre sombre au-dessus d'un contenu clair, comme l'alternance retenue pour le reste du site. ------------------------------------------------------------------ */ :root[data-theme="clair"] header, :root[data-theme="clair"] nav.ds-nav { --s-page:#18181b; --s-raised:#262628; --s-sunken:#0f0f11; --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#a1a1a8; --t-faible:#86868b; --text:#d2d2d7; --text-primary:#f5f5f7; --text-secondary:#a1a1a8; --text-muted:#86868b; --muted:#a1a1a8; --trait:rgba(255,255,255,.12); --border:rgba(255,255,255,.12); --card:#262628; --bg-secondary:#262628; --bg-tertiary:#303032; --bg-surface:#262628; --accent:#2997ff; --accent-doux:rgba(41,151,255,.14); --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --green:#30d158; --red:#ff453a; --yellow:#ff9f0a; color:#d2d2d7; } /* /!\ LE LOGO POSE SA COULEUR EN STYLE INLINE (`color:var(--t-fort)`), qui bat toute regle de feuille sans !important. Le jeton redefini ci-dessus suffit puisqu'il est resolu au point d'usage — mais on le verrouille pour que le titre du site ne depende pas d'un ordre de cascade. */ :root[data-theme="clair"] header .logo span { color:#f5f5f7 !important; } :root[data-theme="clair"] header .logo span span { color:#2997ff !important; } /* ── Champs de formulaire de la page Actualites ──────────────────── /!\ CAS INVERSE : le select porte un fond NOIR TRANSLUCIDE (rgba(0,0,0,.22)) qui, pose sur le blanc de la page, donne un gris CLAIR — pendant que son texte restait clair (rgb(210,210,215)). Blanc sur blanc. On l'habille en champ clair. */ :root[data-theme="clair"] #tab-news .form-select, :root[data-theme="clair"] #tab-news input[type="text"], :root[data-theme="clair"] #tab-news input[type="search"] { background:#ffffff !important; border:1px solid rgba(0,0,0,.14) !important; color:#1d1d1f !important; } :root[data-theme="clair"] #tab-news .form-select option { background:#ffffff; color:#1d1d1f; } :root[data-theme="clair"] #tab-news ::placeholder { color:#86868b !important; opacity:1; } /* ================================================================== PAGE CALENDRIER MACRO EN CLAIR - 15/09/2026 ================================================================== Demandee par l'utilisateur, comme la page Actualites. Coherent avec la regle « chrome clair / donnees sombres » : cette page est une LISTE d'evenements datee, pas un tableau de bord chiffre. /!\ LE RENDU N'A QUASIMENT PAS DE COULEURS EN DUR. Releve sur `_calV2Render` : var(--muted) x8, var(--red) x7, var(--yellow) x3, var(--green) x3, var(--text), var(--card), var(--accent)... Redefinir les jetons suffit donc, il n'y a presque rien a rattraper au selecteur d'attribut - contrairement au tableau de bord. /!\ IL FAUT UN IDENTIFIANT DANS LE SELECTEUR. Une regle anterieure declare `.stat-card` (et `[style*="var(--card)"]`) comme ILOT SOMBRE en theme clair, avec une specificite de (0,2,0). `#tab-calendrier .stat-card` vaut (1,2,0) et l'emporte ; sans l'identifiant, les cartes de statistiques seraient restees noires au milieu d'une page blanche. ------------------------------------------------------------------ */ :root[data-theme="clair"] #tab-calendrier { --s-page:#ffffff; --s-raised:#ffffff; --s-sunken:#f0f0f3; --s-bande:#f5f5f7; --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --text-muted:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.12); --border:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --card:#ffffff; --bg-secondary:#ffffff; --bg-tertiary:#f5f5f7; --bg-surface:#f5f5f7; --accent:#0066cc; --accent-doux:rgba(0,102,204,.10); --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; --yellow:#b25000; color:#333336; } /* Cartes de statistiques + lignes d'evenements : surfaces blanches. Les selecteurs d'attribut reprennent ceux de la regle « ilot sombre » generique, prefixes de l'identifiant pour la battre. */ :root[data-theme="clair"] #tab-calendrier .stat-card, :root[data-theme="clair"] #tab-calendrier .panel, :root[data-theme="clair"] #tab-calendrier .card, :root[data-theme="clair"] #tab-calendrier table, :root[data-theme="clair"] #tab-calendrier [style*="var(--card)"], :root[data-theme="clair"] #tab-calendrier [style*="var(--s-raised)"], :root[data-theme="clair"] #tab-calendrier [style*="var(--s-sunken)"] { background:#ffffff !important; border-color:rgba(0,0,0,.10); --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#86868b; --text:#333336; --text-primary:#1d1d1f; --muted:#6e6e73; --text-muted:#6e6e73; --trait:rgba(0,0,0,.12); --border:rgba(0,0,0,.12); --accent:#0066cc; --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; --yellow:#b25000; color:#333336; } :root[data-theme="clair"] #tab-calendrier .stat-card { box-shadow:0 1px 3px rgba(0,0,0,.06); } /* Champs de la barre d'outils (date, vue). Meme cas que la page Actualites : fond noir translucide sur blanc = gris clair, avec un texte clair par-dessus. */ :root[data-theme="clair"] #tab-calendrier .form-input, :root[data-theme="clair"] #tab-calendrier select, :root[data-theme="clair"] #tab-calendrier input { background:#ffffff !important; border:1px solid rgba(0,0,0,.14) !important; color:#1d1d1f !important; } :root[data-theme="clair"] #tab-calendrier option { background:#ffffff; color:#1d1d1f; } /* /!\ Les gris zinc translucides du rendu (rgba(63,63,70,.3) et .15) sont des BORDURES : sur blanc ils donnent un gris visible, ce qui convient. En revanche `.04` servait de fond de ligne alternee et disparait ; on le remplace par un gris clair pour garder le rythme du tableau. */ :root[data-theme="clair"] #tab-calendrier [style*="rgba(63,63,70,.04)"] { background:#f7f7f9 !important; } /* Blancs translucides herites du sombre : invisibles sur blanc. */ :root[data-theme="clair"] #tab-calendrier [style*="rgba(255,255,255"], :root[data-theme="clair"] #tab-calendrier [style*="rgba(255, 255, 255"] { color:var(--t-doux) !important; } /* ================================================================== TROISIEME FAMILLE DE JETONS : --ds-* (design-system.css) ================================================================== /!\ ELLE N'ETAIT RESCOPEE PAR AUCUN ILOT. Constate sur la page calendrier passee en blanc : les chiffres des cartes de statistiques sortaient en rgb(250,250,250) - blanc sur blanc - alors que leur style INLINE disait `color:var(--accent)` et que `--accent` valait bien #0066cc. La cause : `.stat-card .val { color: var(--ds-text) !important }` dans app.css. Un `!important` bat le style inline, et `--ds-text` vaut #fafafa, fixe dans design-system.css. Le site superpose donc TROIS familles : `--t-*` (theme), `--text*` (ancien pont) et `--ds-*` (design system). Un ilot clair doit les redefinir toutes les trois, sinon une regle oubliee ramene du blanc. ------------------------------------------------------------------ */ :root[data-theme="clair"] #tab-calendrier, :root[data-theme="clair"] #tab-calendrier .stat-card, :root[data-theme="clair"] #tab-news, :root[data-theme="clair"] #tab-news .news-item, :root[data-theme="clair"] #tab-news .news-carte { --ds-bg:#ffffff; --ds-surface:#ffffff; --ds-surface-2:#f5f5f7; --ds-surface-3:#ebebef; --ds-border:rgba(0,0,0,.12); --ds-border-2:rgba(0,0,0,.18); --ds-text:#1d1d1f; --ds-text-2:#333336; --ds-muted:#6e6e73; --ds-faint:#86868b; --ds-accent:#0066cc; --ds-accent-hover:#0055ad; --ds-accent-dim:rgba(0,102,204,.10); --ds-positive:#008a20; --ds-negative:#d70015; } /* Le libelle des cartes de stats reste a #a1a1aa (2,3:1 sur blanc) : il suit `--ds-muted`, desormais redefini, mais on verrouille au cas ou une regle en dur subsisterait. */ :root[data-theme="clair"] #tab-calendrier .stat-card .lbl { color:#6e6e73 !important; } /* ================================================================== BLOC « FLUX ETF SPOT » — ILOT SOMBRE (15/09/2026) ================================================================== /!\ MEME PIEGE QUE LE BANDEAU IA ET LA BARRE DE NAVIGATION. Le bloc reste une SURFACE SOMBRE dans une page claire, mais les classes ajoutees ce jour-la (.etf-onglet, .etf-carte, .etf-graph-titre) emploient var(--t-fort) / var(--s-raised), qui valent du sombre en theme clair. Mesure a l'ecran : onglet actif fond rgb(29,29,31) et texte rgb(29,29,31) — soit un contraste de 1:1, un rectangle noir ; titre du graphique invisible ; carte rgb(38,38,40) avec un texte rgb(51,51,54). On declare donc l'ilot sur les elements concernes. Regle a garder en tete pour tout nouveau composant pose sur une surface sombre. ------------------------------------------------------------------ */ :root[data-theme="clair"] .etf-onglets, :root[data-theme="clair"] .etf-onglet, :root[data-theme="clair"] .etf-panneau, :root[data-theme="clair"] .etf-cartes, :root[data-theme="clair"] .etf-carte, :root[data-theme="clair"] .etf-periodes, :root[data-theme="clair"] .etf-periode, :root[data-theme="clair"] .etf-graph-carte { --s-page:#18181b; --s-raised:#303032; --s-sunken:#262628; --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#a1a1a8; --t-faible:#86868b; --text:#d2d2d7; --muted:#a1a1a8; --trait:rgba(255,255,255,.12); --border:rgba(255,255,255,.12); --voile:rgba(255,255,255,.05); --accent:#2997ff; --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --green:#30d158; --red:#ff453a; } /* Verrouillage des deux elements qui etaient carrement illisibles. */ :root[data-theme="clair"] .etf-onglet { color:#a1a1a8 !important; } :root[data-theme="clair"] .etf-onglet.active { background:#303032 !important; color:#f5f5f7 !important; } :root[data-theme="clair"] .etf-graph-titre { color:#f5f5f7 !important; } :root[data-theme="clair"] .etf-graph-sous, :root[data-theme="clair"] .etf-graph-source, :root[data-theme="clair"] .etf-carte-lbl { color:#a1a1a8 !important; } /* Sélecteur de période, ajouté le 15/09/2026 : même surface sombre, donc même verrouillage que les onglets d'actif juste au-dessus. */ :root[data-theme="clair"] .etf-periode { color:#86868b !important; } :root[data-theme="clair"] .etf-periode.active { background:#303032 !important; color:#f5f5f7 !important; } :root[data-theme="clair"] .etf-carte { background:#262628 !important; } :root[data-theme="clair"] .etf-graph-carte { background:#262628 !important; } /* ══════════════════════════════════════════════════════════════ PAGE COMPTE / CONFIGURATION (#tab-settings) — ÎLOT CLAIR Corrigé le 17/09/2026. ⚠️ LE TEXTE Y ÉTAIT INVISIBLE. `.acct-section` et `.cfg-card` posent `background: var(--card)` ; or en thème clair `--card` vaut #1d1d1f, jeton réservé aux surfaces de DONNÉES. Ces cartes devenaient sombres SANS faire partie des îlots qui rebasculent les couleurs de texte : texte #333336 sur #1d1d1f. Mesuré, textes sous 3:1 : Abonnement 28 sur 104 — tout le tableau des fonctionnalités à 1,3:1 Sécurité 2 · Telegram 3 · et 19 à 27 textes entre 3 et 4,5:1 par onglet. Après : 0 texte sous 3:1 (hors avatar, dont le fond est un dégradé que la mesure ne lit pas). ⚠️ CLAIR ET NON SOMBRE : c'est une page de formulaires et de texte, donc du chrome (règle « tout ce qui se lit en français est clair »). ⚠️ `#tab-settings [style]` EST VOULU. Plusieurs règles génériques (`[style*="var(--card)"]`, etc.) réappliquent les jetons SOMBRES aux éléments à style en ligne : le code `/start`, en `var(--accent)`, ressortait à #2997ff sur fond clair (2,5:1). L'identifiant l'emporte sur ces règles sans identifiant. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] #tab-settings, :root[data-theme="clair"] #tab-settings [style], :root[data-theme="clair"] #tab-settings .acct-section, :root[data-theme="clair"] #tab-settings .cfg-card, :root[data-theme="clair"] #tab-settings .plan-card, :root[data-theme="clair"] #tab-settings .table-wrap, :root[data-theme="clair"] #tab-settings table { --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#6e6e73; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.10); --border:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --card:#ffffff; --panel:#f5f5f7; --s-raised:#f5f5f7; --s-sunken:#ebebef; --bg:#ffffff; --bg-secondary:#f5f5f7; --bg-tertiary:#ebebef; --bg-surface:#f5f5f7; --accent:#0066cc; --accent-doux:rgba(0,102,204,.10); --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; /* Jaune et or assombris : #ffc107 fait 1,6:1 sur blanc. */ --green:#008a20; --red:#d70015; --yellow:#8a6100; --gold:#8a6100; /* ⚠️ TROISIÈME FAMILLE, oubliée au premier passage : design-system.css force `[style*="color:var(--green)"]` vers `var(--ds-positive)` en `!important`. Sans ces jetons, les badges « ● ACTIF » des sources de données restaient à #22c55e sur fond clair (2,2:1), alors même que `--green` valait bien #008a20. Voir le bloc calendrier/news plus haut. */ --ds-bg:#ffffff; --ds-surface:#ffffff; --ds-surface-2:#f5f5f7; --ds-surface-3:#ebebef; --ds-border:rgba(0,0,0,.12); --ds-border-2:rgba(0,0,0,.18); --ds-text:#1d1d1f; --ds-text-2:#333336; --ds-muted:#6e6e73; --ds-faint:#6e6e73; --ds-accent:#0066cc; --ds-accent-hover:#0055ad; --ds-accent-dim:rgba(0,102,204,.10); --ds-positive:#008a20; --ds-negative:#d70015; --ds-warning:#8a6100; } /* `!important` : le bandeau de profil pose son fond en style en ligne. */ :root[data-theme="clair"] #tab-settings .acct-section, :root[data-theme="clair"] #tab-settings .cfg-card, :root[data-theme="clair"] #tab-settings #cfg-account-panel > div:first-child, :root[data-theme="clair"] #tab-settings #cfg-progress-bar-wrap { background:#ffffff !important; border:1px solid rgba(0,0,0,.10) !important; color:#333336; } :root[data-theme="clair"] #tab-settings .acct-section-hd { background:#f5f5f7; border-bottom-color:rgba(0,0,0,.08); } :root[data-theme="clair"] #tab-settings .plan-card { background:#f5f5f7 !important; } :root[data-theme="clair"] #tab-settings .avatar-btn-mini, :root[data-theme="clair"] #tab-settings .cfg-btn-outline { color:#333336 !important; } /* Couleurs écrites EN DUR dans les chaînes innerHTML de app.js, pensées pour le sombre. Littérales dans l'attribut (pas sérialisées en rgb(), puisque posées par innerHTML et non par `el.style`). */ :root[data-theme="clair"] #tab-settings [style*="color:#d1d5db"] { color:#333336 !important; } /* puces « Compte créé » */ :root[data-theme="clair"] #tab-settings [style*="color:#00c853"] { color:#008a20 !important; } /* coches du tableau des plans */ :root[data-theme="clair"] #tab-settings [style*="color:#ffd54f"] { color:#8a6100 !important; } /* « Passez au plan PAYANT » */ /* ══════════════════════════════════════════════════════════════ LEXIQUE (#tab-lexique, #lex-modal) — ÎLOT CLAIR, 17/09/2026 Page de texte : claire, selon la règle du site. L'en-tête reste une surface sombre posée, à couleurs LITTÉRALES : il n'est pas concerné. ⚠️ LES TROIS FAMILLES DE JETONS (--t-*, --text/--muted, --ds-*) : la leçon de la page compte, payée deux fois le même jour. Et `[style]` : les cartes portent un style en ligne (--i, --teinte), que les règles génériques `[style*=...]` pourraient sinon rattraper. ⚠️ `--s-raised` = BLANC ICI. Ailleurs en clair il vaut #1d1d1f (jeton de données) : c'est lui qui rendait la page compte illisible. ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] #tab-lexique, :root[data-theme="clair"] #tab-lexique [style], :root[data-theme="clair"] #lex-modal, :root[data-theme="clair"] #lex-modal [style] { --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#6e6e73; --text:#333336; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --muted:#6e6e73; --trait:rgba(0,0,0,.10); --trait-fort:rgba(0,0,0,.20); --border:rgba(0,0,0,.12); --voile:rgba(0,0,0,.04); --card:#ffffff; --panel:#ffffff; --s-raised:#ffffff; --s-sunken:#f5f5f7; --bg:#ffffff; --bg-secondary:#f5f5f7; --bg-tertiary:#ebebef; --bg-surface:#f5f5f7; --accent:#0066cc; --accent-doux:rgba(0,102,204,.10); --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --green:#008a20; --red:#d70015; --yellow:#8a6100; --gold:#8a6100; --ds-bg:#ffffff; --ds-surface:#ffffff; --ds-surface-2:#f5f5f7; --ds-surface-3:#ebebef; --ds-border:rgba(0,0,0,.12); --ds-border-2:rgba(0,0,0,.18); --ds-text:#1d1d1f; --ds-text-2:#333336; --ds-muted:#6e6e73; --ds-faint:#6e6e73; --ds-accent:#0066cc; --ds-accent-hover:#0055ad; --ds-accent-dim:rgba(0,102,204,.10); --ds-positive:#008a20; --ds-negative:#d70015; --ds-warning:#8a6100; } /* Le carrousel sur un gris très léger : il se détache des cartes blanches. */ :root[data-theme="clair"] #tab-lexique .lx-une { background:#fbfbfd; } :root[data-theme="clair"] #tab-lexique .lx-carte:hover { box-shadow:0 20px 40px -24px rgba(0,0,0,.28); } /* ══════════════════════════════════════════════════════════════ COCKPIT OPTIONS — ÎLOT CLAIR des signaux et chapitres (17/09/2026) Le cockpit lui-même (.ox-hero) est à couleurs littérales : non concerné. ⚠️ Trois familles de jetons + `[style]`, comme pour le lexique : les cartes de signaux portent un style en ligne (--i). ══════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] #tab-options .ox-signaux, :root[data-theme="clair"] #tab-options .ox-signaux [style], :root[data-theme="clair"] #tab-options .ox-chapitres, :root[data-theme="clair"] #tab-options .ox-chapitres [style] { --t-fort:#1d1d1f; --t-normal:#333336; --t-doux:#6e6e73; --t-faible:#6e6e73; --text:#333336; --muted:#6e6e73; --trait:rgba(0,0,0,.10); --border:rgba(0,0,0,.12); --voile:rgba(0,0,0,.045); --card:#ffffff; --panel:#ffffff; --s-raised:#ffffff; --s-sunken:#f5f5f7; --accent:#0066cc; --hausse:#008a20; --baisse:#d70015; --alerte:#b25000; --ds-text:#1d1d1f; --ds-text-2:#333336; --ds-muted:#6e6e73; --ds-faint:#6e6e73; --ds-accent:#0066cc; --ds-positive:#008a20; --ds-negative:#d70015; } /* ══ Cockpit COT (17/09/2026) — chapitres et tiroir IA = CHROME ══ Ils se lisent en français : clairs en thème clair. Littéraux obligatoires, `--s-raised` valant du SOMBRE dans ce thème (jeton de données). */ :root[data-theme="clair"] .cx-chapitre, :root[data-theme="clair"] .cx-ia-bloc { background: #ffffff; border-color: #d2d2d7; box-shadow: 0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] .cx-chapitre:hover { border-color: #86868b; } :root[data-theme="clair"] .cx-chapitre b, :root[data-theme="clair"] .cx-ia-titre { color: #1d1d1f; } :root[data-theme="clair"] .cx-chapitre small, :root[data-theme="clair"] .cx-ia-bloc b, :root[data-theme="clair"] .cx-ia-note { color: #6e6e73; } :root[data-theme="clair"] .cx-ia-bloc p { color: #333336; } :root[data-theme="clair"] .cx-ia-titre span { color: #6e6e73; border-color: #d2d2d7; } /* ══ Guide COT (#intel-tuto-modal) — îlot SOMBRE (18/09/2026) ══ La fenêtre est sombre dans les deux thèmes, mais ses `` posent `color:var(--text)` en ligne : en clair, texte sombre sur fond sombre. Défaut antérieur à la refonte, relevé en réécrivant le guide. */ :root[data-theme="clair"] #intel-tuto-modal { --text:#f5f5f7; --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#a1a1a8; --t-faible:#86868b; --muted:#a1a1a8; --trait:rgba(255,255,255,.12); --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --yellow:#ffd60a; --ds-text-primary:#f5f5f7; --ds-text-secondary:#d2d2d7; } :root[data-theme="clair"] #intel-tuto-modal [style*="var(--text)"] { color:#f5f5f7 !important; } /* Vitrine de l'accueil (18/09/2026) : flèches du carrousel = chrome clair. `.ox-fleche` pose --s-raised, SOMBRE dans ce thème (jeton de données). */ :root[data-theme="clair"] .av-vitrine .ox-fleche { background:#ffffff; color:#1d1d1f; border-color:#d2d2d7; box-shadow:0 1px 3px rgba(0,0,0,.08); } :root[data-theme="clair"] .av-vitrine .ox-fleche:hover { background:#f5f5f7; } :root[data-theme="clair"] .av-vitrine-points i { background:#d2d2d7; } :root[data-theme="clair"] .av-vitrine-points i.active { background:#6e6e73; } /* ══ Accueil : « L'essentiel du jour » et bloc IA (18/09/2026) ══ Surfaces sombres dans les deux thèmes → îlots de jetons sombres, pour que les couleurs écrites par le JS historique (var(--text), var(--muted), var(--green)…) restent lisibles sur ces cartes. */ :root[data-theme="clair"] .av-th, :root[data-theme="clair"] .av-ia, :root[data-theme="clair"] .av-pouls, :root[data-theme="clair"] .avv-carte { --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#86868b; --t-faible:#6e6e73; --text:#d2d2d7; --muted:#a1a1a8; --trait:rgba(255,255,255,.12); --accent:#2997ff; --hausse:#30d158; --baisse:#ff453a; --alerte:#ff9f0a; --green:#30d158; --red:#ff453a; --yellow:#ffd60a; --ds-text-primary:#f5f5f7; --ds-text-secondary:#d2d2d7; --ds-positive:#30d158; --ds-negative:#ff453a; } /* Empreinte recalculée sans redémarrage (19/09/2026). */ /* ══ Cockpit Oracle (19/09/2026) ══ Cartes de lecture = CHROME : clair en thème clair (littéraux, `--s-raised` étant SOMBRE ici). Tiroir des agents = îlot SOMBRE : on rétablit les jetons clair-sur-sombre. */ :root[data-theme="clair"] #tab-oracle .orc-carte { background:#ffffff; border-color:#d2d2d7; box-shadow:0 1px 3px rgba(0,0,0,.05); color:#333336; } :root[data-theme="clair"] #tab-oracle .orc-carte--vert { border-left-color:#28a745; } :root[data-theme="clair"] #tab-oracle .orc-carte--rouge { border-left-color:#e0352b; } :root[data-theme="clair"] #tab-oracle .orc-carte--orange { border-left-color:#e08600; } :root[data-theme="clair"] #tab-oracle .orc-carte--jaune { border-left-color:#d4a800; } :root[data-theme="clair"] #tab-oracle .orc-carte-tete b, :root[data-theme="clair"] #tab-oracle .orc-config-actif, :root[data-theme="clair"] #tab-oracle .orc-conclusion { color:#1d1d1f; } :root[data-theme="clair"] #tab-oracle .orc-recit, :root[data-theme="clair"] #tab-oracle .orc-liste li, :root[data-theme="clair"] #tab-oracle .orc-texte, :root[data-theme="clair"] #tab-oracle .orc-onchain p, :root[data-theme="clair"] #tab-oracle .orc-config p { color:#333336; } :root[data-theme="clair"] #tab-oracle .orc-liste li { border-bottom-color:#e8e8ed; } :root[data-theme="clair"] #tab-oracle .orc-onchain small, :root[data-theme="clair"] #tab-oracle .orc-note-ia, :root[data-theme="clair"] #tab-oracle .orc-config small, :root[data-theme="clair"] #tab-oracle .orc-config-conv, :root[data-theme="clair"] #tab-oracle .orc-vide-txt, :root[data-theme="clair"] #tab-oracle .orc-liste li.orc-vide { color:#6e6e73; } :root[data-theme="clair"] #tab-oracle .orc-note-ia, :root[data-theme="clair"] #tab-oracle .orc-config { border-color:#d2d2d7; } :root[data-theme="clair"] #tab-oracle .orc-config-conv i { background:#d2d2d7; } :root[data-theme="clair"] #tab-oracle .orc-config-conv i.on { background:var(--c); } :root[data-theme="clair"] #tab-oracle .orc-conclusion { background:#f5f3ff; border-left-color:#7c3aed; } :root[data-theme="clair"] #tab-oracle .orc-track [style*="color:var(--t-"] { color:#6e6e73 !important; } :root[data-theme="clair"] #tab-oracle .orc-agents { --text:#f5f5f7; --t-fort:#f5f5f7; --t-normal:#d2d2d7; --t-doux:#a1a1a8; --t-faible:#86868b; --muted:#a1a1a8; --trait:rgba(255,255,255,.12); } /* ══ Cockpit MARCHÉS (21/09/2026) — chapitres = CHROME : clairs en thème clair (littéraux : --s-raised y vaut du SOMBRE, jeton de données). ══ */ /* ⚠️ Le « contrôle segmenté » plus haut (:root[data-theme="clair"] .mk-subtab-bar / .mk-subtab-btn, en !important) aplatissait ces chapitres en boutons gris transparents sur une bande : il faut la même force pour en sortir. */ :root[data-theme="clair"] .mk-subtab-bar.mx-chapitres { display: grid; background: none; padding: 0; gap: 8px; border-radius: 0; } :root[data-theme="clair"] .mx-chapitres .mk-subtab-btn { background: #ffffff !important; border: 1px solid #d2d2d7 !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05); color: #1d1d1f !important; } :root[data-theme="clair"] .mx-chapitres .mk-subtab-btn:hover { border-color: #86868b !important; } :root[data-theme="clair"] .mx-chapitres .mk-subtab-btn b { color: #1d1d1f; } :root[data-theme="clair"] .mx-chapitres .mk-subtab-btn small { color: #6e6e73; } :root[data-theme="clair"] .mx-chapitres .mk-subtab-btn.active { background: rgba(0,102,204,.07) !important; border-color: #0066cc !important; box-shadow: 0 0 0 1px #0066cc inset; } :root[data-theme="clair"] .mx-chapitres .mk-subtab-btn.active b { color: #0066cc; } /* ══ Cockpit ACTUALITÉS (21/09/2026) — blocs Breaking / Géopolitique = CHROME : clairs en thème clair (littéraux, --s-raised y étant SOMBRE). ══ */ :root[data-theme="clair"] .nx-bloc { background: #ffffff; border-color: #d2d2d7; box-shadow: 0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] .nx-bloc-tete b, :root[data-theme="clair"] .nx-item-corps b { color: #1d1d1f; } :root[data-theme="clair"] .nx-bloc-tete small, :root[data-theme="clair"] .nx-item-corps small, :root[data-theme="clair"] .nx-vide { color: #6e6e73; } :root[data-theme="clair"] .nx-item { border-top-color: #e8e8ed; } :root[data-theme="clair"] .nx-lien { color: #0066cc; } /* ══ Cockpit LISTING RADAR (21/09/2026) — filtres et cartes = CHROME : clairs en thème clair (littéraux, --s-raised y étant SOMBRE). ══ */ :root[data-theme="clair"] .lr-carte, :root[data-theme="clair"] .lr-type-tog, :root[data-theme="clair"] .lr-pages button { background: #ffffff; border-color: #d2d2d7; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] .lr-type-tog.active { background: #0066cc; border-color: #0066cc; color: #ffffff; } :root[data-theme="clair"] .lr-carte--clic:hover { border-color: #86868b; } :root[data-theme="clair"] .lr-sym, :root[data-theme="clair"] .lr-prix b, :root[data-theme="clair"] .lr-vide b { color: #1d1d1f; } :root[data-theme="clair"] .lr-prix b.lr-h { color: #1a9f4a; } :root[data-theme="clair"] .lr-prix b.lr-b { color: #d7342a; } :root[data-theme="clair"] .lr-pair, :root[data-theme="clair"] .lr-age, :root[data-theme="clair"] .lr-prix small, :root[data-theme="clair"] .lr-compte, :root[data-theme="clair"] .lr-vide, :root[data-theme="clair"] .lr-note { color: #6e6e73; } :root[data-theme="clair"] .lr-evo { background: #e8e8ed; } /* Calendrier (21/09/2026) : champs du BANDEAU sombre. La règle ci-dessus (#tab-calendrier select/input en blanc, !important) visait l'ancienne barre posée sur fond blanc ; dans le bandeau, ils redeviennent translucides. */ :root[data-theme="clair"] #tab-calendrier .cv-hero .cv-champ { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #f5f5f7 !important; } :root[data-theme="clair"] #tab-calendrier .cv-hero .cv-champ option { background: #ffffff; color: #1d1d1f; } /* ══ Macro & risque (21/09/2026) — encart des rendez-vous = CHROME : clair en thème clair (littéraux, --s-raised y étant SOMBRE). ══ */ :root[data-theme="clair"] .mc-rdv { background: #ffffff; border-color: #d2d2d7; box-shadow: 0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] .mc-rdv-tete b, :root[data-theme="clair"] .mc-rdv-quand b { color: #1d1d1f; } :root[data-theme="clair"] .mc-rdv-titre { color: #333336; } :root[data-theme="clair"] .mc-rdv-quand small, :root[data-theme="clair"] .mc-rdv-vide { color: #6e6e73; } :root[data-theme="clair"] .mc-rdv-item { border-top-color: #e8e8ed; } :root[data-theme="clair"] .mc-rdv-lien, :root[data-theme="clair"] .mc-rdv-dev { color: #0066cc; } :root[data-theme="clair"] .hx-toutes-tete b { color: #1d1d1f; } :root[data-theme="clair"] .hx-toutes-tete > span, :root[data-theme="clair"] .hx-note { color: #6e6e73; } /* Whales + Alertes (22/09/2026) : même piège que #tab-news ci-dessus, sélecteur « Vol min » et champs du formulaire d'alerte gris sur gris. */ :root[data-theme="clair"] #tab-whales .form-select, :root[data-theme="clair"] #tab-whales select, :root[data-theme="clair"] #tab-alertes .form-select, :root[data-theme="clair"] #tab-alertes .form-input { background:#ffffff !important; border:1px solid rgba(0,0,0,.14) !important; color:#1d1d1f !important; } :root[data-theme="clair"] #tab-whales select option, :root[data-theme="clair"] #tab-alertes .form-select option { background:#ffffff; color:#1d1d1f; } :root[data-theme="clair"] #tab-alertes ::placeholder { color:#86868b !important; opacity:1; } /* Bas de page Alertes en thème clair : cartes blanches, pistes grises */ :root[data-theme="clair"] #tab-alertes .alx-form, :root[data-theme="clair"] #tab-alertes .alx-paliers { background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] #tab-alertes .alx-quota-piste { background:rgba(0,0,0,.07); } :root[data-theme="clair"] #tab-alertes .alx-tete-titre { color:#1d1d1f; } :root[data-theme="clair"] #tab-alertes .alx-champ > span, :root[data-theme="clair"] #tab-alertes .alx-form-titre, :root[data-theme="clair"] #tab-alertes .alx-section, :root[data-theme="clair"] #tab-alertes .alx-quota, :root[data-theme="clair"] #tab-alertes .alx-paliers { color:#6e6e73; } :root[data-theme="clair"] #tab-alertes .alx-ajout { color:#0071e3; border-color:rgba(0,113,227,.4); } :root[data-theme="clair"] .rpr-mention { color: #6e6e73; } /* Portefeuille en thème clair (25/09/2026) : le bandeau .pf-hero reste sombre (règle « chrome clair / données sombres »), le formulaire et les lignes de position passent en cartes blanches. */ :root[data-theme="clair"] #tab-portfolio .pf-form, :root[data-theme="clair"] #tab-portfolio .pf-ligne { background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] #tab-portfolio .pf-vide { background:#ffffff; border-color:rgba(0,0,0,.14); } :root[data-theme="clair"] #tab-portfolio .pf-entete, :root[data-theme="clair"] #tab-portfolio .pf-qte, :root[data-theme="clair"] #tab-portfolio .pf-note, :root[data-theme="clair"] #tab-portfolio .pf-cell--pnl i, :root[data-theme="clair"] #tab-portfolio .pf-cell small, :root[data-theme="clair"] #tab-portfolio .pf-vide p { color:#6e6e73; } :root[data-theme="clair"] #tab-portfolio .pf-cell, :root[data-theme="clair"] #tab-portfolio .pf-sym, :root[data-theme="clair"] #tab-portfolio .pf-vide b { color:#1d1d1f; } :root[data-theme="clair"] #tab-portfolio .pf-sym:hover { color:#0071e3; } :root[data-theme="clair"] #tab-portfolio .pf-act { color:#1d1d1f; background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); } :root[data-theme="clair"] #tab-portfolio .pf-act:hover { background:rgba(0,0,0,.1); } :root[data-theme="clair"] #tab-portfolio .pf-ligne::before { background:rgba(0,0,0,.14); } :root[data-theme="clair"] #tab-portfolio .pf-ligne--haut::before { background:#248a3d; } :root[data-theme="clair"] #tab-portfolio .pf-ligne--bas::before { background:#d70015; } :root[data-theme="clair"] #tab-portfolio .pf-ligne--haut .pf-cell--pnl b { color:#248a3d; } :root[data-theme="clair"] #tab-portfolio .pf-ligne--bas .pf-cell--pnl b { color:#d70015; } :root[data-theme="clair"] #tab-portfolio .pf-vide-lien a { color:#0071e3; } :root[data-theme="clair"] #tab-portfolio .pf-form ::placeholder { color:#86868b !important; opacity:1; } :root[data-theme="clair"] #tab-portfolio .form-input { background:#ffffff !important; border:1px solid rgba(0,0,0,.14) !important; color:#1d1d1f !important; } /* Banc d'essai en thème clair (25/09/2026) — bandeau sombre, reste en blanc. */ :root[data-theme="clair"] #tab-banc .bc-fam, :root[data-theme="clair"] #tab-banc .bc-reglages, :root[data-theme="clair"] #tab-banc .bc-resultat, :root[data-theme="clair"] #tab-banc .bc-carte-enveloppe { background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] #tab-banc .bc-periode { background:#f5f5f7; border-color:rgba(0,0,0,.08); } :root[data-theme="clair"] #tab-banc .bc-periode--clef { background:#ffffff; border-color:rgba(0,0,0,.2); } :root[data-theme="clair"] #tab-banc .bc-croyance { background:rgba(0,0,0,.03); color:#3a3a3c; } :root[data-theme="clair"] #tab-banc .bc-idee, :root[data-theme="clair"] #tab-banc .bc-verdict span { color:#3a3a3c; } :root[data-theme="clair"] #tab-banc .bc-fam-bilan, :root[data-theme="clair"] #tab-banc .bc-carte-ligne, :root[data-theme="clair"] #tab-banc .bc-carte-col { color:#6e6e73; } :root[data-theme="clair"] #tab-banc .bc-esp, :root[data-theme="clair"] #tab-banc .bc-chiffres b { color:#1d1d1f; } :root[data-theme="clair"] #tab-banc .bc-esp.lr-h { color:#248a3d; } :root[data-theme="clair"] #tab-banc .bc-esp.lr-b { color:#d70015; } :root[data-theme="clair"] #tab-banc .bc-opt { color:#3a3a3c; background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); } :root[data-theme="clair"] #tab-banc .bc-opt--actif { color:#ffffff; background:#0071e3; border-color:#0071e3; } :root[data-theme="clair"] #tab-banc .bc-case { color:#1d1d1f; border-color:rgba(0,0,0,.1); } :root[data-theme="clair"] #tab-banc .bc-v-insuf b, :root[data-theme="clair"] #tab-banc .bc-v-temoin b { color:#1d1d1f; } /* Cartes COT sur la page Marchés (25/09/2026). ⚠️ ELLES RESTENT SOMBRES, c'est la règle « chrome clair / données sombres » ci-dessus : leurs sept identifiants sont déjà dans la liste des surfaces de données. Ce qui n'allait pas, c'est que cette règle impose `padding: 4px` — la carte se retrouvait écrasée contre ses bords en thème clair. On lui rend sa respiration et on accroche le texte à l'échelle sombre `--d-*`. */ #tab-marches .cot-carte--vide { color: var(--d-doux); } #tab-marches .cot-titre { color: var(--d-fort); } #tab-marches .cot-date, #tab-marches .cot-net-lib, #tab-marches .cot-spark-lib, #tab-marches .cot-pied-case small { color: var(--d-doux); } #tab-marches .cot-pied-case b { color: var(--d-normal); } #tab-marches .cot-spark, #tab-marches .cot-pied { border-top-color: var(--d-trait); } :root[data-theme="clair"] #tab-portfolio .pf-lots { background:#fafafa; border-color:rgba(0,0,0,.08); } :root[data-theme="clair"] #tab-portfolio .pf-lot { color:#3a3a3c; } :root[data-theme="clair"] #tab-portfolio .pf-lots-btn { color:#0071e3; } :root[data-theme="clair"] #tab-portfolio .pf-apercu { color:#0058a8; background:rgba(0,113,227,.07); border-color:rgba(0,113,227,.22); } :root[data-theme="clair"] #tab-portfolio .pf-apercu b { color:#1d1d1f; } :root[data-theme="clair"] #tab-portfolio .pf-annuler { color:#3a3a3c; background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); } :root[data-theme="clair"] #tab-portfolio .pf-cell--pnl u { color:#6e6e73; } :root[data-theme="clair"] #tab-portfolio .pf-reco { background:#ffffff; border-color:rgba(0,0,0,.12); box-shadow:0 18px 44px rgba(0,0,0,.14); } :root[data-theme="clair"] #tab-portfolio .pf-reco-item { color:#1d1d1f; } :root[data-theme="clair"] #tab-portfolio .pf-reco-item:hover { background:rgba(0,0,0,.06); } :root[data-theme="clair"] #tab-portfolio .pf-reco-item span { color:#6e6e73; } /* Analyse du portefeuille en thème clair (26/09/2026) */ :root[data-theme="clair"] #tab-portfolio .pfa-carte, :root[data-theme="clair"] #tab-portfolio .pfa-constat { background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 3px rgba(0,0,0,.05); } :root[data-theme="clair"] #tab-portfolio .pfa-attente { background:#fafafa; border-color:rgba(0,0,0,.14); } :root[data-theme="clair"] #tab-portfolio .pfa-constat span { color:#3a3a3c; } :root[data-theme="clair"] #tab-portfolio .pfa-piste { background:rgba(0,0,0,.08); } :root[data-theme="clair"] #tab-portfolio .pfa-per { color:#3a3a3c; background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); } :root[data-theme="clair"] #tab-portfolio .pfa-per--actif { color:#ffffff; background:#0071e3; border-color:#0071e3; } :root[data-theme="clair"] #tab-portfolio .pfa-alerte b { color:#d70015; } :root[data-theme="clair"] #tab-portfolio .pfa-attention b { color:#b25000; } :root[data-theme="clair"] #tab-portfolio .pfa-ok b { color:#248a3d; } :root[data-theme="clair"] #tab-portfolio .pfa-info b { color:#0058a8; } :root[data-theme="clair"] #tab-portfolio .pfc-ligne, :root[data-theme="clair"] #tab-portfolio .pfc-general { background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 3px rgba(0,0,0,.05); color:#3a3a3c; } :root[data-theme="clair"] #tab-portfolio .pfc-fait { color:#3a3a3c; } :root[data-theme="clair"] #tab-portfolio .pfc-tete b { color:#1d1d1f; }