/* ============================================================ Όραμα — LE VERRE, ET LE THÈME CLAIR Feuille PARTAGÉE par les cinq surfaces d'Órama : le tableau de bord Ads, le portail (et son panneau d'administration), la vitrine, le module Trading et le module Run. ------------------------------------------------------------ POURQUOI UN SEUL FICHIER. Cinq modules, deux familles de jetons : la famille « Órama » (--panel, --border, --text-1/2/3) et la famille « Trading » (--panel2, --line, --txt/txt2/txt3). Recopier le thème dans chacun garantissait qu'ils divergent au premier ajustement. Ici, une seule vérité, mappée deux fois. COMMENT L'UTILISER. Charger cette feuille APRÈS celle du module, et `orama-theme.js` dans le (il pose l'attribut avant le premier rendu, sans quoi l'écran clignote en noir à l'ouverture). LES DEUX RÈGLES QUE LA MESURE IMPOSE, et non le goût : 1. Une BORDURE ne peut pas être blanche sur du clair. Sur du sombre, un blanc à faible alpha fait fond ET bordure ; sur du clair, une bordure blanche sur un panneau blanc n'existe pas. 2. Les ACCENTS EN TEXTE descendent d'un cran. Sur le verre clair, #4285F4 plafonne à 4,23:1 et #34A853 à 3,95:1, sous les 4,5 exigés pour du texte. #1967D2 (5,05) et #188038 (4,72) passent. Le jaune #FBBC05 est à 2,12:1 : remplissage uniquement, jamais du texte ni un filet fin. ============================================================ */ :root{ /* CE QUE LE NAVIGATEUR DESSINE LUI-MÊME. Aucun jeton n'atteint la croix d'effacement d'un `input[type=search]`, l'icône de calendrier d'un `type=date`, la barre de défilement ni la liste déroulante d'un `select` : le navigateur les peint seul, et il choisit leur camaïeu d'après `color-scheme`, jamais d'après nos couleurs. Le bloc clair le déclarait depuis toujours ; le bloc sombre, qui est le DÉFAUT de la maison, ne le déclarait pas — le navigateur en concluait « page claire » et posait des widgets clairs sur du noir. La conséquence se rattrapait élément par élément, à la main, et cette rustine-là est fausse par construction : `color-scheme:dark` écrit sur un champ précis force un widget sombre dans le thème CLAIR aussi. Déclaré ici, il vaut pour les trois produits et pour tous les widgets d'un coup, et la bascule le remplace par `light` au même endroit. (`orama-theme.js` le pose aussi en ligne avant le premier rendu : les deux ne font pas double emploi — la feuille couvre les surfaces qui ne chargent pas le script, et le script couvre l'instant où la feuille n'est pas encore arrivée.) */ color-scheme: dark; /* --- Le verre, en sombre --- */ --verre: rgba(255,255,255,0.05); --verre-haut: rgba(255,255,255,0.075); --verre-bas: rgba(255,255,255,0.035); --verre-bord: rgba(255,255,255,0.09); --verre-bord-net: rgba(255,255,255,0.14); --verre-liseré: inset 0 1px 0 rgba(255,255,255,0.12); --verre-ombre: 0 16px 36px rgba(0,0,0,0.42); --verre-flou: blur(26px) saturate(150%); --sur-accent: #0B1120; --graphe-grille: rgba(35,48,78,.4); /* LES VOILES. Une modale, une zone de dépôt ou un écran de sélection posent un voile sur la page. Écrit `rgba(0,0,0,.9)`, il reste noir en thème clair et le texte sombre y disparaît : c'est exactement ce qui est arrivé au module Trading. */ --voile-fort: rgba(0,0,0,0.92); --voile: rgba(0,0,0,0.72); --voile-doux: rgba(0,0,0,0.45); /* Repli pour les surfaces qui n'ont pas d'accent d'avertissement. */ --violet: #FBBC05; /* Les champs de lumière : sans eux, un flou sur un aplat ne produit rien — le verre a besoin de quelque chose à filtrer. */ --halo-1: rgba(66,133,244,0.26); --halo-2: rgba(52,168,83,0.18); --halo-3: rgba(251,188,5,0.10); /* ============================================================ CE QUE L'AUDIT VISUEL DU MODULE TRADING A IMPOSÉ (02/09/2026) ------------------------------------------------------------ Trois familles de jetons manquaient, et leur absence se payait en clair par des pans entiers d'écran illisibles. 1. L'ENCRE SUR PASTILLE TEINTÉE. `--acc` posé sur `--acc-dim` n'est pas `--acc` sur le fond de page : la teinte remonte le fond, et le rapport tombe de 5,4 à 4,05. Il faut un cran de plus. Mesuré sur les teintes réelles du module. 2. L'APLAT D'ACCENT PORTANT DU BLANC. Blanc sur #4285F4 = 3,56. C'était faux DANS LE THÈME SOMBRE AUSSI, depuis toujours. 3. LES GRAPHES. La bibliothèque SVG du module peignait en dur pour le noir : libellés #9AA0A6, grille #202124, liseré des points #0A0A0B, centre du donut #FFFFFF. Un SVG ne peut pas lire `var()` dans un attribut de présentation ; le dessin résout donc ces jetons à l'exécution. ============================================================ */ --acc-encre: #8AB4F8; --pos-encre: #81C995; --neg-encre: #F28B82; --warn-encre: #FDD663; /* Les mêmes, sous les noms de la famille « Órama ». Il FAUT les deux jeux ici : un `var()` non défini rend la déclaration invalide et la couleur retombe silencieusement sur l'héritage — un défaut qui ne ressemble pas à une erreur. */ --teal-encre: #81C995; --red-encre: #F28B82; --amber-encre: #8AB4F8; --violet-encre: #FDD663; --acc-plein: #1967D2; /* APLATS DE RÉSULTAT PORTANT DU BLANC. `--pos` et `--neg` sont réglés pour être lus EN TEXTE sur la page ; retournés en fond sous du blanc, le vert #34A853 tombe à 3,06 et le rouge #EA4335 à 3,92. Ces deux-là sont assez profonds pour porter du blanc, et la même valeur convient aux deux thèmes : c'est l'aplat qui décide, pas la page — d'où l'absence de pendant dans le bloc « clair ». */ --pos-plein: #137333; --neg-plein: #C5221F; /* Les mêmes aplats, sous les noms de la famille « Órama » : chaque feuille garde son vocabulaire, la valeur reste unique. */ --teal-plein: #137333; --red-plein: #C5221F; --amber-plein: #1967D2; /* Surfaces neutres translucides — remplacent les `rgba(255,255,255,…)` écrits en dur, qui n'existent tout simplement pas sur du clair. */ --survol: rgba(255,255,255,.05); --creux: rgba(255,255,255,.07); --liseré: rgba(255,255,255,.09); /* Fond des éléments FLOTTANTS (infobulle de graphe). Il ne suit pas `--panel` : une infobulle doit rester opaque au-dessus de tout. */ --flottant: rgba(18,19,22,.97); --graphe-axe: #3C4043; --graphe-halo: #0A0A0B; --graphe-creux: rgba(255,255,255,.03); --graphe-liseré: rgba(255,255,255,.07); --graphe-piste: rgba(255,255,255,.055); --graphe-inactif: rgba(147,160,189,.30); } :root[data-theme="clair"]{ color-scheme: light; /* --- Famille « Órama » : Ads, portail, vitrine --- */ --bg: #EFF2F6; --bg-soft: #E8ECF2; --panel: rgba(255,255,255,0.62); --panel-alt: rgba(255,255,255,0.78); --panel-raised: rgba(255,255,255,0.9); --border: rgba(32,33,36,0.10); --border-soft: rgba(32,33,36,0.07); --border-fort: rgba(32,33,36,0.2); --text-1: #202124; --text-2: #3C4043; --text-3: #5F6368; --amber: #1967D2; --amber-soft: rgba(66,133,244,0.12); --amber-dim: #185ABC; --teal: #188038; --teal-soft: rgba(52,168,83,0.12); --red: #D93025; --red-soft: rgba(234,67,53,0.12); /* L'ambre en texte : #B06000 plafonnait à 4,49 sur une carte et tombait à 3,92 sur `--bg2`. Un cran de plus le fait passer partout (4,90 sur la surface la plus sombre). */ --violet: #9A5300; --violet-soft: rgba(251,188,5,0.16); --src-ads-soft: rgba(66,133,244,0.14); --src-ga4-soft: rgba(227,116,0,0.14); --src-gmb-soft: rgba(25,103,210,0.14); /* L'orange GA4 en TEXTE : #E37400 tient à 3,9:1 sur clair, on descend d'un cran. Le remplissage garde la teinte pleine. */ --src-ga4-texte: #9C4F00; /* MÊME RÈGLE QUE POUR LA FAMILLE TRADING : une pastille pose sa teinte sous son texte. `--teal` sur `--teal-soft` tombe à 4,21 — c'est la pastille « Live » de la barre latérale. Ces encres sont mesurées sur la teinte, pas sur la page. */ --teal-encre: #0D652D; --amber-encre: #1558B0; --red-encre: #A50E0E; --violet-encre: #7A4100; /* --- Famille « Trading / Run » : mêmes surfaces, autres noms --- */ --bg2: #E8ECF2; --panel2: rgba(255,255,255,0.78); --line: rgba(32,33,36,0.10); --line2: rgba(32,33,36,0.2); --txt: #202124; --txt2: #3C4043; --txt3: #5F6368; /* Le vert et le rouge du RÉSULTAT ne vivent pas seulement sur les cartes : le résumé du calendrier et les totaux hebdomadaires sont posés sur `--bg2`, un cran plus sombre. #188038 y tombait à 4,23 et #D93025 à 4,03. Un cran de plus, et ils passent partout : 5,03 et 4,89 sur la surface la plus sombre du module. */ --pos: #0F7332; --pos-dim: rgba(52,168,83,0.14); --neg: #C5221F; --neg-dim: rgba(234,67,53,0.14); --warn: #9A5300; --acc: #1967D2; --acc2: #185ABC; --shadow: 0 8px 26px rgba(32,33,36,0.13); /* La teinte d'identité du module reste telle quelle pour un aplat ou une pastille ; en TEXTE sur fond clair elle plafonne à 2,7:1, d'où ce pendant destiné à l'encre. Il se DÉRIVE de --mod : Trading est vert, Run est ambre, une valeur figée en casserait un des deux. */ --mod-texte: color-mix(in srgb, var(--mod) 55%, #000); /* --- Le verre, en clair --- */ --verre: rgba(255,255,255,0.62); --verre-haut: rgba(255,255,255,0.78); --verre-bas: rgba(255,255,255,0.5); --verre-bord: rgba(32,33,36,0.09); --verre-bord-net: rgba(32,33,36,0.13); --verre-liseré: 0 2px 6px rgba(32,33,36,0.06); --verre-ombre: 0 14px 32px rgba(32,33,36,0.13); --sur-accent: #FFFFFF; --graphe-grille: rgba(32,33,36,.12); --voile-fort: rgba(255,255,255,0.92); --voile: rgba(233,236,241,0.78); --voile-doux: rgba(32,33,36,0.28); --halo-1: rgba(66,133,244,0.40); --halo-2: rgba(52,168,83,0.32); --halo-3: rgba(251,188,5,0.14); /* --- Les mêmes rôles, mesurés sur le verre clair --- */ /* Encre sur pastille teintée : rapports obtenus sur la teinte réelle (14 % de la couleur sur #F7F9FB, 16 % pour l'ambre). acc 5,60 · pos 5,95 · neg 6,21 · warn 7,08 */ --acc-encre: #1558B0; --pos-encre: #0D652D; --neg-encre: #A50E0E; --warn-encre: #7A4100; /* Blanc sur cet aplat : 6,51. */ --acc-plein: #185ABC; --survol: rgba(32,33,36,.045); --creux: rgba(32,33,36,.06); --liseré: rgba(32,33,36,.10); --flottant: rgba(255,255,255,.97); --graphe-axe: rgba(32,33,36,.34); --graphe-halo: #FFFFFF; --graphe-creux: rgba(32,33,36,.045); --graphe-liseré: rgba(32,33,36,.10); --graphe-piste: rgba(32,33,36,.05); --graphe-inactif: rgba(95,99,104,.30); } /* ============================================================ LE VERRE APPLIQUÉ ------------------------------------------------------------ Ces règles visent les conteneurs des DEUX familles. Un module qui n'a pas telle classe ignore simplement la ligne qui la concerne. ============================================================ */ html{ background: var(--bg); } body{ /* Trois arrêts par halo, et non deux : `couleur → transparent` sur un seul intervalle dessine un anneau visible dès que la teinte est franche — ce qui est le cas en thème clair, où les halos doivent être plus soutenus pour exister sur du blanc. La marche intermédiaire à 38 % étale la transition. */ background: radial-gradient(1200px 700px at 78% -14%, var(--halo-1), color-mix(in srgb, var(--halo-1) 38%, transparent) 38%, transparent 72%), radial-gradient(1000px 620px at 114% 70%, var(--halo-2), color-mix(in srgb, var(--halo-2) 38%, transparent) 38%, transparent 72%), radial-gradient(880px 580px at 20% 120%, var(--halo-3), color-mix(in srgb, var(--halo-3) 38%, transparent) 38%, transparent 72%), var(--bg); background-attachment: fixed; /* PAS DE `min-height` ICI. Le portail pose `min-height:100vh` avec un centrage `safe center` ; un `min-height:100%` posé plus tard se résout à `auto` — html n'ayant pas de hauteur — et fait s'effondrer la boîte, donc le centrage. L'écran de sélection s'est retrouvé collé en haut à gauche. Une feuille de THÈME ne touche pas à la géométrie : `html{background}` suffit à couvrir le débordement. */ } .card, .panel, .tile, .bloc, .module-card{ background: var(--verre); backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou); border: 1px solid var(--verre-bord); box-shadow: var(--verre-liseré); } /* ============================================================ LA BASCULE ------------------------------------------------------------ Hors du flux : aucune des cinq surfaces n'a d'en-tête commun, et la commande doit se trouver au même endroit partout. Sous 900 px elle descend en bas à droite — le bandeau mobile occupe déjà le haut, et deux commandes superposées ne se cliquent ni l'une ni l'autre. ============================================================ */ .orama-theme-toggle{ /* 10005 et non 400 : l'écran de choix de profil est posé à 10000 sur les trois modules, et il PASSAIT DEVANT la bascule — impossible de changer de thème avant d'avoir choisi un profil, c'est-à-dire à l'instant précis où l'on ouvre l'application. On reste sous la modale (10010) et sous la notification (10020). */ position: fixed; top: 14px; right: 22px; z-index: 10005; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--verre-haut); backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou); border: 1px solid var(--verre-bord); color: var(--text-2, var(--txt2, #BDC1C6)); font-size: 14px; line-height: 1; cursor: pointer; box-shadow: var(--verre-liseré); transition: color .15s, border-color .15s, transform .15s; } .orama-theme-toggle:hover{ color: var(--text-1, var(--txt, #FFFFFF)); border-color: var(--verre-bord-net); transform: translateY(-1px); } @media (max-width: 900px){ .orama-theme-toggle{ top: auto; bottom: 18px; right: 18px; box-shadow: var(--verre-ombre); } }