/* ============================================================ POLICES — hebergees ici, JAMAIS depuis Google Fonts /!\ L'espace client est AUTHENTIFIE : l'adresse IP envoyee a Google a chaque visite serait une donnee nominative, et cette pratique a deja ete sanctionnee en Europe. Six ecrans les chargeaient depuis Google (connexion, inscription, mots de passe oublies, demande, souscription) — rapatriees le 2026-08-16. Geist et JetBrains Mono sont sous licence OFL : l'hebergement local est permis. Seuls les sous-ensembles latin et latin-ext sont embarques (308 Ko) ; les alphabets cyrillique, grec et vietnamien de Google sont ecartes. ============================================================ */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/Geist-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/Geist-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Geist-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Geist-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Geist-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Geist-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Geist-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Geist-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/Geist-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/Geist-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/JetBrainsMono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/JetBrainsMono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/JetBrainsMono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/JetBrainsMono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ TVNI — Charte graphique v3 (light only, vanilla CSS) Source de vérité unique pour tous les tokens design. ============================================================ */ /* ============================================================ :root — Design tokens ============================================================ */ :root { /* Surfaces */ /* ====================================================================== SOMBRE — le seul thème. Décision du fondateur, 2026-08-16. Palette reprise de la vitrine (`landing/index.html`) : les deux partageaient déjà `#4A3B7A`, l'application n'en était que l'expression claire. Elle rejoint la sombre. /!\ Le mode clair est ABANDONNÉ. Ses valeurs sont dans l'historique git — ne pas les laisser traîner en commentaire ici. ====================================================================== */ --background: #0A0B10; --card: #14161F; --muted: #1A1D27; --border: rgba(255,255,255,0.07); /* Liseré plus affirmé, pour ce qui doit se détacher du fond : boutons secondaires, champs au survol, cartes posées sur une surface déjà sombre. Vient des écrans d'authentification, qui portaient leur propre vocabulaire (`--border-2`) — rapatrié ici le 2026-08-16. */ --border-strong: rgba(255,255,255,0.12); /* Haut du degrade du bouton principal, et lueur qui le fait flotter. Viennent des ecrans d'authentification, ou ce bouton etait le plus abouti de l'application — promu ici le 2026-08-16 pour que tous les ecrans en heritent. */ --accent-hi: #C8BEFF; --accent-glow: rgba(139,127,224,0.30); --accent-glow-strong: rgba(139,127,224,0.45); /* Survol (repris de la vitrine, 2026-08-16) : un liseré d'accent tres discret sur une carte qu'on souleve, et un voile de la meme teinte sur un bloc qui s'eclaire sans bouger. Trois valeurs, pas une : le liseré d'une carte doit s'effacer devant celui d'un bloc directement survolé. */ --accent-ring: rgba(180,168,255,0.12); --accent-ring-strong: rgba(180,168,255,0.25); --accent-wash: rgba(180,168,255,0.04); --ring: #B4A8FF; /* Texte */ --foreground: #F5F4F0; --muted-foreground: rgba(245,244,240,0.62); --disabled-foreground: rgba(245,244,240,0.40); --on-primary: #0A0B10; --on-accent: #14161F; /* Marque /!\ L'accent CHANGE de valeur par rapport au thème clair (#4A3B7A) : un violet foncé sur fond noir ne se lit pas. C'est le RÔLE qui est stable, pas la valeur — c'est exactement à ça que servent ces variables. */ --primary: #8B7FE0; --accent: #B4A8FF; /* Sémantique */ --success: #4ADE80; --error: #F87171; --warning: #FBBF24; --warning-text: #FCD34D; --info: #7DD3FC; /* Trading */ --profit: #4ADE80; --loss: #F87171; --neutral: rgba(245,244,240,0.55); /* Charts */ --chart-1: #B4A8FF; --chart-2: #8B7FE0; --chart-3: #7DD3FC; --chart-4: #4ADE80; --chart-5: rgba(245,244,240,0.55); /* Typographie */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; /* /!\ `--font-mono` n'est PLUS une police a chasse fixe (2026-08-24, demande du fondateur : « je n'aime pas la police des titres de KPI, mets la meme que l'autre »). Le nom reste parce qu'il est cite ~120 fois, dans la charte ET dans les gabarits : le repointer ICI change toute l'application d'un geste — etiquettes, chiffres, badges compris. L'alignement des colonnes ne tenait deja pas a la chasse fixe mais a `font-variant-numeric: tabular-nums`, pose partout ou il compte. Pour du VRAI monospace (cle, code, chemin), il reste `--font-code`. */ --font-mono: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; --font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ============================================================ L'ECHELLE DE TEXTE : dix crans, et un seul endroit pour les regler ============================================================ Posee le 2026-09-12, choix du fondateur (« je veux vraiment agrandir la police sans zoomer », option « texte courant a 16 px » parmi trois montrees cote a cote sur un fragment d'ecran reconstitue). /!\ CE QUE CETTE ECHELLE REMPLACE. L'application ecrivait ses tailles a la main : 972 declarations `font-size: Npx` dans 69 fichiers, pour 32 valeurs distinctes dont NEUF tassees entre 9 et 15,5 px — et ces neuf-la portaient 90 % du texte. Entre 12 px et 12,5 px l'oeil ne voit rien, mais ce sont deux reglages a tenir, et c'est ce tassement qui rendait tout agrandissement impossible a viser. Les dix crans ci-dessous les rangent : il n'existe plus de 12,5 px a cote d'un 13 px. /!\ POURQUOI EN `rem` ET PAS EN `px`. Un cran vaut une part de la taille de reference du NAVIGATEUR (1rem = 16 px par defaut, et aucune regle de ce depot ne pose de `font-size` sur `html` ou `:root` — ne pas en poser, ce serait reprendre au client ce qu'on vient de lui rendre). Consequence : un client qui regle son navigateur en gros caracteres est enfin ECOUTE. Le zoom, lui, l'ignorait completement. /!\ CE N'EST PAS UN RETOUR DU ZOOM, et la difference est le coeur du chantier : le zoom grossissait le texte ET ses boites parce qu'il ne savait pas faire autrement. Ici les boites suivent leur texte parce qu'elles sont exprimees en `em` — voir la section « LES BOITES QUI SUIVENT LEUR TEXTE ». `--echelle` reste a 1 et n'a pas a remonter. */ /* Les DIX jetons d'avant, rebranches sur les crans. Ils sont cites 103 fois dans la charte et les gabarits : les repointer ICI fait grandir tout ce qui passait deja par eux, sans toucher a un seul gabarit. /!\ Ils ne sont PAS deprecies et ne partiront pas : ils disent le ROLE (« une legende », « une cellule de donnee »), la ou un cran ne dit que la taille. Le role est ce qu'on veut lire dans un gabarit. /!\ Les GRANDS ne bougent pas — h4, display-3, kpi, display-2, display-1 gardent leur taille. La plainte n'a jamais porte sur les titres, et les grossir couterait des lignes a l'ecran sans rien rendre plus lisible. */ --leading-tight: 1.0; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-wordmark: 0.28em; --tracking-eyebrow: 0.22em; --tracking-mono-data: 0.04em; --tracking-tight: -0.01em; /* Le CADRE : la largeur d'une page, et la colonne d'explication d'un encadre de reglage. Deux valeurs, jamais reecrites dans un gabarit : voir la section « Le CADRE » plus bas pour le pourquoi. */ /* /!\ **1150 depuis le 2026-09-12** (fondateur, apres comparaison sur le tableau de bord). 1280 etait la place disponible a droite du menu sur son ecran de 1536 points : la page y remplissait l'ecran d'un bord a l'autre. Avec l'echelle a 1,08, une ligne de 1280 devient une ligne de 1382 points reels, et une phrase de cette longueur se relit mal. Le cadre cede, la lisibilite gagne. Les deux valeurs se sont choisies ENSEMBLE, on ne touche pas l'une sans regarder l'autre. */ /* MAQUETTE — VARIANTE 4, PLEIN ECRAN PLAFONNE (2026-09-17). UNE SEULE largeur, portee par `.wrap` et `.cadre` : tout l'espace client la recoit d'un coup, aucun ecran ne reste en arriere a 1150. /!\ **2000 N'EST PAS UN CHIFFRE ROND, C'EST LE POSTE DU FONDATEUR.** Sous ce plafond (1440, 1920), la page occupe la fenetre et replier la barre elargit VRAIMENT le contenu. Au-dessus (2560), elle s'arrete et se centre : les memes proportions qu'a 1920, des marges symetriques, et aucune des rangees orphelines que la variante 3 fabriquait. */ --cadre: 2000px; --cadre-large: 2000px; --explication: 300px; /* L'ECHELLE de toute l'application. Voir la section « L'ECHELLE » plus bas : c'est le seul bouton pour grossir ou reduire l'ensemble, et il n'en existait aucun avant le 2026-08-18. */ /* Pose a 1.2 le matin du 2026-08-18 (« il faut qu'on agrandisse la police, on ne voit pas grand chose »), ramene a 1 l'apres-midi (« dezoome l'appli »), arrete a 1.1 dans la foulee (« agrandis tout de 10 % au lieu de 20 »). Un seul nombre, trois essais, aucune ligne de code touchee entre les deux. /!\ POURQUOI un zoom et pas une taille de police, malgre la demande litterale « uniquement la taille des textes ». Essaye le 2026-08-18 : l'application ecrit ses tailles EN DUR, 796 fois dans 63 fichiers, sans variable qui les commande. Les grossir demande de reecrire les 796 — ce qui a ete fait, puis defait le jour meme. Et cela laisse le texte grossir DANS des boites restees petites : les etiquettes en capitales sont a 10 px dans des pastilles de 22. Le zoom fait grossir le texte ET ce qui le contient, dans la meme proportion. C'est la seule facon, ici, d'agrandir sans rien casser. /!\ REVISION DU 2026-09-12 : « ici » a cesse d'etre vrai, et c'etait le but. Ce paragraphe decrivait un manque, pas une preference — le zoom avait ete choisi FAUTE DE MIEUX, parce qu'aucune variable ne commandait les tailles. Ce mieux existe maintenant : voir « L'ECHELLE DE TEXTE » dans `:root`, dix crans en `rem`, et les boites qui suivent leur texte en `em`. /!\ CE QUI EN DECOULE POUR CE NOMBRE : il reste a 1 et il n'a plus de raison de bouger. Le remonter pour « regler » une police jugee petite rouvrirait par la fenetre ce que ce chantier ferme, et la police se regle desormais par `--text-base`, un cran a la fois. /!\ NE PAS LE SUPPRIMER pour autant : `tests/test_echelle_hauteurs.py` epingle mot pour mot `body { zoom: var(--echelle); }` et la derivation de `--fenetre`, qui protege les hauteurs calees sur la fenetre. Le retirer est une decision du fondateur, pas un nettoyage. */ /* /!\ **1,08 depuis le 2026-09-12**, et ce chiffre a une histoire courte : 1,1 jusqu'au 2026-09-11 (« on peut dezoomer l'application et la remettre a 100% »), puis 1 la meme journee, puis 1,08 le lendemain apres que le fondateur a compare quatre reglages sur le tableau de bord. Le dezoom avait rendu l'application plus petite qu'il ne le voulait ; 1,08 rend le confort d'avant sans revenir au 1,1 juge trop gros. /!\ IL SE REGLE AU CENTIEME, sans rien casser : c'est tout l'interet de ce mecanisme, explique ci-dessus. Les tailles ecrites en dur dans les 63 fichiers suivent, et les boites avec elles. */ /* /!\ **RETOUR A 1 le 2026-09-12**, et c'est une DECISION, pas un reglage : le fondateur veut agrandir la POLICE sans zoomer l'application (« je veux vraiment agrandir la police sans zoomer »). Le zoom grossit le texte ET les boites ; lui veut le premier sans le second. /!\ CE QUE CELA COUTE, MESURE LE JOUR MEME, pour que personne ne reprenne ce chantier en croyant qu'il est court : **948 tailles ecrites en dur dans 68 fichiers**, dont 144 a 12px, 141 a 13px, 122 a 12,5px. Et 298 hauteurs ou rembourrages en dur dans la seule charte, qui devront suivre — sinon le texte grossit dans des boites restees petites, ce qui est exactement le defaut qui avait fait defaire l'essai du 2026-08-18. /!\ NE PAS REMONTER CETTE VALEUR pour « regler » une police jugee petite : ce serait rouvrir le zoom par la fenetre. Le levier est desormais la typographie, pas l'echelle. */ --echelle: 1; /* La hauteur reellement disponible, une fois l'echelle appliquee. TOUTE hauteur calee sur la fenetre doit passer par elle : `100vh` seul deborde de l'ecran du facteur d'echelle. */ --fenetre: calc(100vh / var(--echelle)); /* Spacing (grille 4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Radius (plafond 12) */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* Grande carte posée sur le fond — l'arrondi de la vitrine. Rapatrie le `--r-xl` que les écrans d'authentification déclaraient chacun de leur côté. /!\ L'échelle existante (4/6/10) n'est PAS modifiée : seuls deux écrans employaient cet arrondi, et le changer aurait adouci tous les coins de l'application sans que personne l'ait demandé. */ --radius-xl: 22px; --radius-pill: 999px; /* Shadows (teintées slate) */ --shadow-xs: 0 1px 2px rgb(28 35 51 / 0.04); --shadow-sm: 0 1px 3px rgb(28 35 51 / 0.06), 0 1px 2px rgb(28 35 51 / 0.04); --shadow-md: 0 4px 8px rgb(28 35 51 / 0.08), 0 2px 4px rgb(28 35 51 / 0.04); --shadow-lg: 0 8px 16px rgb(28 35 51 / 0.10), 0 4px 6px rgb(28 35 51 / 0.04); --shadow-drawer: -8px 0 24px rgb(28 35 51 / 0.10); /* Motion */ --motion-fast: 100ms; --motion-base: 150ms; --motion-slow: 200ms; --motion-slower: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Z-index */ --z-dropdown: 100; --z-sticky: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ LA MOLETTE DU TEXTE (28/10/2026) : les dix crans et leurs alias, ici et nulle part ailleurs ============================================================ Le fondateur, après Rich Circles (« réduire la police de l'app comme on a fait pour ReachCircles ») : chaque cran se multiplie par `--echelle-texte`, et toute taille encore écrite en dur aussi (`calc(Npx * var(--echelle-texte))`). À 1, rien ne change au pixel près ; l'ESPACE ÉQUIPE et l'ESPACE CLIENT la posent à 13/15 (le texte courant de 15 à 13 px), comme Rich Circles (le client aussi : décision du fondateur, le même jour, qui remplace pour la taille le « texte courant à 16 px » du 12/09). Les pages publiques (connexion, paiement) la prennent aussi depuis le 31/10/2026, et la vitrine pose la sienne (`landing/`), à la même valeur. /!\ POURQUOI UN BLOC À PART, déclaré aussi sur le corps des deux espaces : une variable se calcule là où elle est déclarée. Déclarés seulement sur `:root`, les crans garderaient la molette de la racine ; redéclarés sur le corps de page, ils prennent la sienne. /!\ PAS AU TÉLÉPHONE (moins de 900 px) : sous 16 px, l'iPhone zoome sur un champ qu'on touche ; Rich Circles garde ses tailles mobiles pour la même raison. /!\ Ce n'est pas un retour du zoom (voir « L'ECHELLE DE TEXTE » plus haut) : les boîtes suivent leur texte parce qu'elles sont en `em`. */ :root { --echelle-texte: 1; } @media (min-width: 900px) { body.espace-equipe, body.espace-client, body.espace-public { --echelle-texte: 0.8667; } } /* 31/10/2026 (fondateur : « les pages de connexion sont trop grosses ») : les pages publiques (`espace-public`) prennent la même molette que l'espace. */ :root, body.espace-equipe, body.espace-client, body.espace-public { --text-2xs: calc(0.6875rem * var(--echelle-texte)); /* 11px — capitales espacees, mentions */ --text-xs: calc(0.75rem * var(--echelle-texte)); /* 12px — legendes sous un chiffre */ --text-sm: calc(0.8125rem * var(--echelle-texte)); /* 13px — cellules de tableau, pastilles */ --text-base: calc(0.9375rem * var(--echelle-texte)); /* 15px — LE TEXTE COURANT, le cran choisi */ --text-md: calc(1.0625rem * var(--echelle-texte)); /* 17px — intitules de bloc, champs */ --text-lg: calc(1.1875rem * var(--echelle-texte)); /* 19px — titres de carte */ --text-xl: calc(1.375rem * var(--echelle-texte)); /* 22px — titres de page */ --text-2xl: calc(1.75rem * var(--echelle-texte)); /* 28px — les grands chiffres */ --text-3xl: calc(2.125rem * var(--echelle-texte)); /* 34px — KPI, accueil */ --text-4xl: calc(2.8125rem * var(--echelle-texte)); /* 45px — le seul titre de vitrine */ --text-eyebrow: var(--text-2xs); /* 10px -> 12px */ --text-caption: var(--text-xs); /* 12px -> 13px */ --text-body-sm: var(--text-sm); /* 13px -> 14px */ --text-data-cell: var(--text-sm); /* 13px -> 14px */ --text-body: var(--text-base); /* 14px -> 16px, le cran choisi */ --text-h4: var(--text-md); /* 18px, inchange */ --text-display-3: var(--text-xl); /* 24px, inchange */ --text-kpi: var(--text-3xl); /* 36px, inchange */ --text-display-2: var(--text-3xl); /* 36px, inchange */ --text-display-1: var(--text-4xl); /* 48px, inchange */ } /* ============================================================ `--fenetre` SUR UN TELEPHONE (2026-09-20, demande TVNI-93) ============================================================ /!\ AJOUT, pas correction : la declaration d'origine reste au-dessus, mot pour mot, et `tests/test_echelle_hauteurs.py` continue de l'epingler. Ce bloc la REDEFINIT seulement la ou le navigateur sait faire mieux. /!\ Ce que `100vh` vaut sur un telephone, et que personne ne voit au bureau : la HAUTEUR BARRE D'ADRESSE MASQUEE, c'est-a-dire la plus grande des deux. Tant que la barre est visible - c'est-a-dire a l'ouverture de la page, et des qu'on remonte - l'ecran est plus court que `100vh` d'environ 60 a 90 points. Tout ce qui est cale sur la fenetre depasse donc par le BAS : le pied d'une fenetre modale et son bouton de validation passent sous la barre, et rien ne le signale. /!\ `svh` ET PAS `dvh`, et c'est le choix qui compte ici. `dvh` suit la barre d'adresse pendant le defilement : les hauteurs se recalculent a chaque geste, et une fenetre modale ouverte sursaute. `svh` est la hauteur la plus PETITE des deux, donc une constante : rien ne saute, et rien ne passe jamais sous la barre. Ce qu'on paie est une bande de 60 a 90 points sous un panneau pleine hauteur quand la barre se retire - visible, sans consequence. /!\ Decision prise SANS le fondateur (carnet du chantier). La reouvrir, c'est passer a `dvh` et accepter le sursaut, ou revenir a `vh` et accepter le pied coupe : il n'y a pas de troisieme valeur. /!\ Sur un ordinateur `svh` vaut exactement `vh` : ce bloc n'y change rien. /!\ La condition teste `top` et NON `height`, et ce n'est pas un caprice : `test_echelle_hauteurs.py` interdit, dans TOUT ce fichier, une ligne qui nomme une propriete de hauteur suivie d'une unite en `vh` - or `svh` se termine par ces deux lettres. La condition ecrite avec la propriete de hauteur faisait donc rougir le test qui protege cette variable, et ce commentaire lui-meme doit eviter d'ecrire les deux cote a cote. `top: 1svh` pose exactement la meme question au navigateur : « sais-tu lire cette unite ? ». /!\ Et ce `@supports` n'est PAS decoratif, meme si tous les navigateurs courants savent lire `svh` depuis 2022 : la valeur d'une propriete personnalisee n'est pas verifiee a la declaration. Un navigateur qui ignore `svh` accepterait quand meme cette ligne, puis rendrait la hauteur invalide a l'usage - donc AUCUNE hauteur du tout. Le garde evite ca. */ @supports (top: 1svh) { :root { --fenetre: calc(100svh / var(--echelle)); } } /* ============================================================ UN SEUL THÈME — le sombre /!\ La consigne « le projet est light only, ne pas ajouter de prefers-color-scheme: dark » qui occupait ce bloc a été RÉVOQUÉE le 2026-08-16, à la demande du fondateur. Ne pas la rétablir. Il n'y a plus de bascule ni de second thème : les valeurs sombres sont dans `:root` ci-dessus, point. Un `[data-theme]` serait du décor. ============================================================ */ /* ============================================================ Reset minimal + base body ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* /!\ Ce que le NAVIGATEUR dessine lui-meme ne suit pas nos variables : une case a cocher non cochee, le menu deroulant d'un `` par un `.liste-bouton` et masque le natif a 1x1 px (il reste dans le formulaire, il porte la valeur). Ne styler que `select.saisie` habillait donc un element invisible : mesure au banc, le filtre rendait un controle de 1 px de haut sur 1 px de large. Le natif garde quand meme sa regle, c'est lui qui s'affiche si le script ne se charge pas. */ /* `.liste.liste--compact` et pas `.liste--compact` seul : `.liste { display: block }`, declaree plus bas, gagnait a poids egal, et la liste compacte prenait toute la ligne hors d'une rangee flex (2026-09-17). */ .liste.liste--compact { display: inline-block; vertical-align: middle; } .liste--compact > select.saisie, .liste--compact > .liste-bouton { width: auto; padding: 6px 13px 6px 11px; font-size: var(--text-base); border-radius: var(--radius-pill); } .liste--compact > select.saisie { padding-right: 32px; } .liste--compact > .liste-bouton { gap: 8px; } .liste--compact::after { right: 13px; width: 6px; height: 6px; margin-top: -4px; } /* /!\ **LA REGLE DE LA BARRE DE FILTRES EST DEVENUE LA REGLE GENERALE** (2026-09-15) : « le panneau deplie ne peut pas suivre la largeur d'un bouton compact » etait vrai de TOUT champ etroit, pas seulement d'un filtre. Elle vit desormais sur `.liste-panneau`, et il n'y a plus rien a redire ici. */ /* ============================================================ Verre — la surface de la vitrine, portee dans l'application (2026-08-16) ============================================================ Ce qui fait le verre : un degrade diagonal tres clair par-dessus un fond sombre translucide, un REFLET d'un pixel en haut de la surface, et un LISERE en degrade qui s'allume dans l'angle superieur gauche et s'eteint en bas. /!\ SANS `backdrop-filter`, et c'est un choix mesure, pas un oubli. La vitrine elle-meme avertit qu'il « recompose sa zone a CHAQUE frame de defilement » et n'en pose que deux dans toute la page. Ici le fond de l'application est un APLAT (`--background`) : il n'y a rien derriere a flouter, le filtre ne changerait donc RIEN a l'image tout en coutant une recomposition par carte, sur une liste qui peut en compter dix. Le jour ou un fond texture apparait, c'est ici qu'on ajoute `backdrop-filter: blur(32px) saturate(165%)`. /!\ La bordure est TRANSPARENTE et le liseré est peint par `::before` : un `border-color` classique donnerait un trait d'epaisseur uniforme, alors que tout l'effet tient dans son degrade. Ne pas rajouter de `border` par-dessus. */ .verre { position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.035) 100%), /* /!\ 0,55 -> 0,97 le 2026-09-11 (fondateur : « le fond est transparent, du coup on voit trop le texte de la page derrière »). Le voile de fond (`::backdrop`, 0,72) ne suffisait pas : c'est le PANNEAU lui-même qui laissait lire la page au travers, et un formulaire posé dessus devenait illisible. Le verre garde son reflet et son liseré — il perd seulement sa transparence. */ rgba(18, 20, 29, 0.97); border: 1px solid transparent; border-radius: var(--radius-xl); box-shadow: 0 34px 90px -24px rgba(0,0,0,0.68), inset 0 1px 0 0 rgba(255,255,255,0.14); } .verre::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255,255,255,0.28) 0%, rgba(180,168,255,0.16) 38%, rgba(255,255,255,0.04) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Une zone DANS une surface de verre. Pas de bordure : un cadre dans un cadre fabrique l'empilement de boites que la refonte cherche a supprimer. Elle se distingue par un voile et un filet en haut, rien de plus. */ .verre-zone { position: relative; background: rgba(255,255,255,0.028); border: 0; border-radius: var(--radius-md); } /* ============================================================ Survol — les deux idiomes de la vitrine, repris tels quels (2026-08-16) ============================================================ La vitrine en a DEUX, et ils ne disent pas la meme chose : `--survol` la CARTE se souleve, prend un liseré violet et une ombre portee. Elle se detache du fond : « cet ensemble est un objet ». `--survol-bloc` le BLOC INTERNE se teinte, sans bouger. Il reste dans la carte : « cette zone est vivante », sans concurrencer la carte. /!\ OPT-IN, jamais sur `.panel` tout court. Une liste d'administration ou un tableau dense ou chaque ligne se souleverait au passage de la souris devient illisible. Le mouvement se merite : on le pose sur ce qu'on manipule. /!\ Le bloc `prefers-reduced-motion` plus haut ramene deja les durees a 0,01 ms pour qui demande moins d'animation — le deplacement reste, mais instantane. */ .panel--survol { transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); } .panel--survol:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--accent-ring); } /* Sur une surface de verre, le liseré est peint par `::before` : ecraser `border-color` n'aurait aucun effet, et l'ombre doit garder le reflet interne sans quoi il disparait au survol. */ .verre.panel--survol:hover { box-shadow: 0 40px 100px -24px rgba(0,0,0,0.72), 0 0 0 1px var(--accent-ring), inset 0 1px 0 0 rgba(255,255,255,0.20); } .verre.panel--survol:hover::before { background: linear-gradient(140deg, rgba(255,255,255,0.38) 0%, rgba(180,168,255,0.30) 38%, rgba(255,255,255,0.06) 70%); } .bloc--survol { transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out); } .bloc--survol:hover { border-color: var(--accent-ring-strong); background: var(--accent-wash); } /* Une valeur qu'on recopie ailleurs — une cle, un identifiant, une commande. Le bouton REMPLACE la selection a la souris : sur une chaine de 40 caracteres en chasse fixe, un double-clic n'attrape qu'un morceau et l'utilisateur ne le voit pas. Le retour ecrit (« Copie ») est obligatoire : sans lui, rien ne distingue un clic reussi d'un clic rate, et l'utilisateur recolle l'ancienne valeur. /!\ `navigator.clipboard` n'existe QUE sur une origine sure (https ou localhost). En clair sur une IP, il est `undefined` : le script le teste et laisse alors le texte selectionnable plutot que d'echouer en silence. */ .copiable { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); } .copiable code { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--foreground); overflow-wrap: anywhere; } .copiable .copier { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; appearance: none; cursor: pointer; padding: 6px 12px; font-family: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--foreground); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); } .copiable .copier:hover { border-color: var(--accent); color: var(--accent); } .copiable .copier[data-fait="oui"] { color: var(--success); border-color: var(--success); } /* ============================================================ L'ENCADRE et le CHAMP : le modele du formulaire de connexion (2026-08-16) ============================================================ L'ecran de connexion etait le seul endroit ou une boite et un champ avaient ete dessines ; partout ailleurs regnait `.panel` > `.drawer-section`, herite du theme clair (bordures et ombres bleu-gris sur une page devenue noire) et qui empile DEUX cadres pour une seule idee. Ces deux primitives sont sa promotion : une boite, un champ, definis une fois. /!\ Ce qu'on promeut est le MODELE, pas le fichier. `login.html` garde sa carte a lui (`.login-card`) : elle est plein ecran, seule, avec sa lueur haute. `.encadre` est la meme surface reglee pour une SUITE de boites qui s'empilent dans une page. /!\ Migration ECRAN PAR ECRAN, decision du fondateur du 2026-08-16. Les ~470 champs `.fi`/`.fl` du reste de l'application ne bougent pas : ils changeront quand leur ecran sera refait et regarde. Les deux vocabulaires cohabitent donc pour un temps, c'est voulu et pas un oubli. */ .encadre, .carte { position: relative; padding: 26px 28px; background: radial-gradient(600px 300px at 50% -10%, rgba(139,127,224,0.15), transparent 60%), linear-gradient(180deg, rgba(26,29,39,0.92) 0%, rgba(20,22,31,0.92) 100%); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset; } /* ============================================================ La CARTE : meme surface que l'encadre, mais VIVANTE (2026-08-17) ============================================================ Demande du fondateur : les cartes de « Mes traders » prennent le style des encadres, « mais par contre pour les cards elle doit etre plus dynamique, c'est-a-dire qu'au survol il y a une petite animation avec une surbrillance violette. Ce sera un modele a part qu'on reutilisera pour toutes les pages avec des cards. » La difference entre les deux dit quelque chose de vrai : `.encadre` une boite qui CONTIENT des reglages. On la lit, on la remplit. Elle ne bouge pas : dix encadres qui se soulevent au passage de la souris, sur un formulaire de trente champs, rendent l'ecran nerveux et illisible. `.carte` un OBJET de la liste, qu'on manipule (ouvrir, activer, dupliquer). Elle se souleve et s'allume : le survol dit « celle-ci ». /!\ La surbrillance est peinte par `::before` AU-DESSUS du fond, et le contenu passe au-dessus d'elle par `.carte > *`. Premiere tentative, ratee : `::before` en `z-index: -1` avec `isolation: isolate` sur la carte. Sur le papier le negatif passe entre le fond et le contenu ; en pratique il s'est retrouve DERRIERE le fond de la carte, qui est opaque a 92 % — donc invisible. Verifie en peignant la couche en rouge vif : rien ne se voyait. Ne pas y revenir. /!\ `.carte > *` prend donc `position: relative`, ce qui fait de chaque enfant direct un bloc de reference pour ce qu'il contient en absolu. Rien a signaler sur les cartes actuelles ; a garder en tete si une carte doit un jour porter un panneau flottant qui depasse d'elle. /!\ Le bloc `prefers-reduced-motion` plus haut ramene les durees a 0,01 ms pour qui demande moins d'animation. La lueur reste, elle devient instantanee. /!\ Ne pas empiler `.carte` et `.panel--survol` : deux mouvements de survol sur le meme element se combattent. `.panel--survol` reste pour les surfaces qui ne sont pas des cartes. */ .carte { /* La marge horizontale de la carte, pour que le filet d'une `.carte-zone` aille d'un bord a l'autre. Elle vaut le padding declare plus haut ; un ecran qui resserre ce padding (une liste de dix cartes) redeclare les deux ensemble. */ --carte-marge: 28px; transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); } .carte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(900px 300px at 50% -8%, rgba(139,127,224,0.34), transparent 62%), linear-gradient(180deg, rgba(180,168,255,0.05) 0%, transparent 45%); opacity: 0; transition: opacity 320ms var(--ease-out); pointer-events: none; } .carte > * { position: relative; } .carte:hover { transform: translateY(-3px); border-color: var(--accent-ring-strong); box-shadow: 0 38px 96px -24px rgba(0,0,0,0.72), 0 0 0 1px var(--accent-ring-strong), 0 0 48px -10px var(--accent-glow-strong), inset 0 1px 0 0 rgba(200,190,255,0.28); } .carte:hover::before { opacity: 1; } /* Le clavier doit voir la meme chose que la souris, sinon le survol est un privilege de la souris. Plus discret : on ne souleve pas la carte, le deplacement pendant une tabulation ferait sauter la page. */ .carte:focus-within { border-color: var(--accent-ring-strong); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--accent-ring), inset 0 1px 0 0 rgba(200,190,255,0.20); } .carte:focus-within::before { opacity: 0.55; } /* ── AU TELEPHONE, la surface rend sa marge au contenu (02/10/2026) ── 26 × 28 points de marge interieure, c'est le bon souffle sur un ecran de bureau ; sur 375 points, un encadre dans la page en mangeait 56 de large, et un encadre dans un encadre plus de cent : les listes (le journal, les positions) se lisaient dans une colonne de 240 points, en mots coupes. Le bureau ne bouge pas. `--carte-marge` suit, pour les filets de `.carte-zone`. */ @media (max-width: 720px) { .encadre, .carte { padding: 18px 16px; } .carte { --carte-marge: 16px; } .encadre .encadre, .carte .encadre { padding: 14px 12px; } } /* Le titre d'une carte : plus present que celui d'un encadre, parce qu'il NOMME l'objet (« Scalp ES matin ») au lieu d'annoncer une rubrique. */ /* ── Une carte ENTIEREMENT cliquable (2026-08-17) ── Demande du fondateur : « lorsqu'on clique sur la carte, ça affiche le détail ». Elle se soulevait deja au survol ; il ne lui manquait que d'etre cliquable. Le contrat tient en deux classes : `.carte-lien` le VRAI lien (le titre, en general). Son `::after` s'etend sur toute la carte et devient la surface cliquable. `.carte-dessus` tout ce qui doit rester cliquable PAR-DESSUS : un autre lien, un bouton, un formulaire. /!\ Pas de `` autour de la carte, et pas de `onclick` sur un `
`. Un lien qui enveloppe d'autres liens est du HTML invalide, et un `div` cliquable est invisible au clavier comme au lecteur d'ecran. Ici il y a UN lien, il porte un nom, et la tabulation l'atteint. /!\ Tout element interactif de la carte DOIT porter `.carte-dessus`. Un element positionne avec `z-index: 1` passe au-dessus de tous les `z-index: auto`, quel que soit l'ordre du code : oublier la classe rend le bouton inerte, et c'est le genre de panne qu'on ne voit qu'en essayant de cliquer. /!\ Contrepartie assumee : la selection du texte a la souris devient difficile sur la zone couverte. Sur une carte de resume, on clique bien plus souvent qu'on ne copie. */ /* /!\ Le lien doit etre un ENFANT DIRECT de la carte, et il reste `position: static`. `.carte > *` pose `position: relative` sur tous les enfants directs (c'est ce qui les fait passer au-dessus de la lueur) : un lien positionne devient le bloc conteneur de son propre `::after`, et la surface ne couvre alors que le lien. Premiere tentative faite sur le titre : la zone cliquable s'arretait au nom du trader, et seule une sonde `elementFromPoint` l'a montre. */ .carte > .carte-lien { position: static; } .carte-lien { text-decoration: none; color: inherit; } .carte-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } /* Le lien porte un texte pour lecteur d'ecran, donc pas de boite visible : l'anneau de focus se pose sur la SURFACE, ce qui entoure la carte entiere au clavier. */ .carte-lien:focus-visible { outline: none; } .carte-lien:focus-visible::after { outline: 2px solid var(--ring); outline-offset: -3px; } .carte-dessus { position: relative; z-index: 2; } .carte-titre { margin: 0 0 4px; font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--foreground); } .cartes { display: flex; flex-direction: column; gap: 14px; } /* ============================================================ La MISE EN ROUTE (2026-08-28) : cinq marches, chacune cochee sur un fait observe par le serveur, jamais a la main. ============================================================ /!\ La puce dit un ETAT, pas une identite : pleine et de la couleur du succes quand la marche est faite, creuse (juste un contour) sinon. Aucune couleur codee en dur, tout vient des variables de la charte. */ .mise-en-route-sous { margin: 0 0 16px; color: var(--muted-foreground); font-size: var(--text-body-sm); } .marches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .marche { display: flex; align-items: flex-start; gap: 12px; } .marche-puce { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: var(--radius-pill); border: 2px solid var(--border-strong); background: transparent; transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out); } .marche--faite .marche-puce { background: var(--success); border-color: var(--success); } .marche-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .marche-titre { font-weight: 600; color: var(--foreground); } .marche--faite .marche-titre { color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: var(--border-strong); } .marche-phrase { color: var(--muted-foreground); font-size: var(--text-body-sm); } /* ============================================================ LA MISE EN ROUTE (refaite le 2026-09-14) ============================================================ Demande du fondateur : « je n'aime pas du tout, vraiment pas. Mets-toi du point de vue de l'utilisateur (...) il faut que tout soit user-friendly. » /!\ **CE QUI CLOCHAIT ETAIT UNE CONTRAINTE DE PLACE, PAS UNE COULEUR.** Le bandeau etait une BANDE : il devait loger une jauge, deux phrases et trois commandes sur quelques dizaines de points de haut. Le texte se coupait en deux lignes serrees, la jauge etait un trait gris de trois points, et « Voir les 6 etapes », « Continuer » et « Je m'en passe » se disputaient le coin droit. Aucune retouche de couleur ne repare une boite trop petite. /!\ **UN SEUL COMPOSANT, DEUX TAILLES** : une CARTE sur les deux pages d'arrivee (`/user`, `/user/traders`), une LIGNE partout ailleurs. La carte a la place de respirer parce qu'elle ne vit que la ; la ligne est courte parce qu'elle ne repete rien, elle renvoie a la carte. /!\ Aucune regle `display` n'est posee sur un element que le gabarit cache par l'attribut `hidden` : la charte porte ce piege ailleurs, on ne le rejoue pas. Ici rien ne se replie : les six etapes sont visibles d'un coup, et c'est justement ce qui remplace le bouton « Voir les 6 etapes ». */ .mer-carte { margin: 0 0 26px; padding: 20px 24px 6px; border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); /* Un fond a peine tiede : la carte doit se distinguer du fond de page sans crier, puisqu'elle disparaitra pour de bon a la derniere etape. */ background: linear-gradient(180deg, var(--accent-wash, rgba(124,108,246,.07)), transparent 140px), var(--card, rgb(18, 20, 29)); } .mer-carte-titre { margin: 0 0 4px; font-family: var(--font-sans); font-size: var(--text-2xl, 1.45rem); font-weight: 600; letter-spacing: -0.02em; } .mer-carte-sous { margin: 0; max-width: 62ch; font-size: var(--text-body-sm); line-height: 1.55; color: var(--muted-foreground); } /* La progression, LUE D'UN COUP : un segment par etape. Un trait continu ne disait ni combien il en restait, ni combien il y en avait. */ .mer-jauge { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .mer-jauge-segments { display: flex; gap: 4px; } .mer-jauge-segments i { display: block; width: 26px; height: 5px; border-radius: 3px; background: var(--border); } .mer-jauge-segments i[data-faite] { background: var(--primary, rgb(124,108,246)); } .mer-jauge b { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .mer-jauge b span { color: var(--muted-foreground); font-weight: 500; } /* ── Les six etapes ─────────────────────────────────────────────────────── */ .mer-etapes { list-style: none; margin: 16px 0 0; padding: 0; } .mer-etape { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.06)); } .mer-etape:first-child { border-top: 0; } /* La pastille porte le numero, puis la coche. C'est elle qui fait lire la liste comme un chemin plutot que comme des puces. */ .mer-puce { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); font-size: var(--text-xs, .75rem); font-weight: 600; color: var(--muted-foreground); } .mer-puce svg { width: 14px; height: 14px; } .mer-etape--faite .mer-puce { border-color: transparent; background: var(--success-wash, rgba(52, 199, 123, .16)); color: var(--success, rgb(52, 199, 123)); } .mer-etape--courante .mer-puce { border-color: transparent; background: var(--primary, rgb(124,108,246)); color: var(--on-primary, #fff); } .mer-etape-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mer-etape-titre { font-size: var(--text-body); color: var(--muted-foreground); } .mer-etape--courante .mer-etape-titre { color: var(--foreground); font-weight: 600; } /* /!\ Ce qui est FAIT se barre et s'efface : c'est la recompense, et elle doit se voir sans disputer l'attention a ce qui reste. */ .mer-etape--faite .mer-etape-titre { color: var(--disabled-foreground, rgba(255,255,255,.38)); text-decoration: line-through; text-decoration-color: var(--border-strong, rgba(255,255,255,.22)); } .mer-etape-btn { white-space: nowrap; } /* Le rendez-vous PRIS, en une ligne dans la carte (TVNI-242, 24/09/2026) : il n'est plus une etape, il reste un rappel discret, avec sa seule commande. « Je m'en passe » est parti avec l'etape. */ .mer-rdv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255,255,255,.02); font-size: var(--text-body-sm); color: var(--muted-foreground); } .mer-rdv b { color: var(--foreground); font-weight: 500; } .mer-rdv-visage { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(10px * var(--echelle-texte)); font-weight: 600; letter-spacing: .02em; color: #14101F; background: linear-gradient(145deg, #D9D2FF, #9C8FF0); } .mer-rdv-texte { flex: 1 1 240px; min-width: 0; } .mer-rdv-gerer { margin-left: auto; white-space: nowrap; color: var(--accent); text-decoration: none; transition: color 160ms var(--ease-out); } .mer-rdv-gerer:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; } /* ── La ligne, sur toutes les autres pages ──────────────────────────────── */ .mer-ligne { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 11px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card, rgb(18, 20, 29)); color: inherit; text-decoration: none; transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); } .mer-ligne:hover { border-color: var(--border-strong); background: var(--accent-wash); } .mer-jauge--mince .mer-jauge-segments i { width: 16px; height: 4px; } .mer-ligne-texte { flex: 1 1 auto; min-width: 0; font-size: var(--text-body-sm); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mer-ligne-texte b { color: var(--foreground); font-weight: 600; } .mer-ligne-fin { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-body-sm); font-weight: 600; color: var(--primary, rgb(124,108,246)); white-space: nowrap; } .mer-ligne-fin svg { width: 12px; height: 12px; } /* ============================================================ LA PRISE DE RENDEZ-VOUS, EN FENETRE (2026-09-14) ============================================================ Demande du fondateur : « la fenetre de rdv je veux que ce soit une popup pas une page entiere ». /!\⚠️ **`dialog.rdv-fenetre.verre`, ET LES TROIS MORCEAUX COMPTENT.** Le guide et la pop-up d'accueil s'en tirent avec `dialog.` parce que leurs feuilles sont chargees APRES `charte.css` : a specificite egale, c'est l'ordre de source qui tranche, et elles passent en dernier. Ce bloc-ci vit DANS `charte.css`, AU-DESSUS de `dialog.verre` (plus bas dans le meme fichier) : a egalite, c'est `.verre` qui gagnait, et la fenetre s'ouvrait a 460 px avec le calendrier tasse sur une colonne. Mesure a l'ecran. On monte donc d'une classe, ce qui rend la regle independante de l'ordre. /!\ **LE CONTENU EST UNE IFRAME**, donc la fenetre doit lui donner une HAUTEUR FERME : une iframe n'a pas de hauteur naturelle, et sans cette regle elle se rend a 150 px par defaut, ce qui coupe le calendrier a la deuxieme ligne. */ dialog.rdv-fenetre.verre { width: min(980px, 94vw); max-width: none; /* /!\ **`var(--fenetre)` ET SURTOUT PAS `92vh`.** La charte pose un `zoom: 1.1` sur `body` : une hauteur exprimee en `vh` brut est calculee sur la fenetre REELLE puis agrandie de 10 %, donc elle deborde de l'ecran d'exactement ce facteur. `--fenetre` vaut `calc(100vh / var(--echelle))` et corrige ca. `tests/test_echelle_hauteurs.py` balaie cette feuille, et il a attrape celle-ci. */ height: min(760px, calc(var(--fenetre) - 80px)); max-height: none; padding: 0; border: 0; overflow: hidden; /* /!\ La hauteur ci-dessus est le REPLI, pas la regle : `rdv-fenetre.js` pose `data-ajustee` des que la page servie a dit sa hauteur, et la fenetre epouse alors son contenu (2026-09-16). Sans JavaScript, on garde la hauteur figee -- et la page, elle, s'etire pour la remplir (cf. le `min-height` de `rdv_client.html`), donc pas de bande vide non plus. */ color: var(--foreground); /* Opaque, comme le guide : le verre est dessine pour trois lignes de confirmation, pas pour un calendrier. */ background: var(--card, rgb(18, 20, 29)); } dialog.rdv-fenetre.verre[open] { display: flex; flex-direction: column; } dialog.rdv-fenetre.verre::backdrop { background: rgba(5, 6, 10, 0.78); } .rdv-fenetre-tete { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px 13px; border-bottom: 1px solid var(--border); } .rdv-fenetre-mots { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rdv-fenetre-mots b { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; } .rdv-fenetre-mots span { font-size: var(--text-body-sm); line-height: 1.5; color: var(--muted-foreground); } .rdv-fenetre-fermer { flex: none; background: none; border: 0; cursor: pointer; font-size: var(--text-2xl); line-height: 1; padding: 0 4px; color: var(--muted-foreground); } .rdv-fenetre-fermer:hover { color: var(--foreground); } .rdv-fenetre-fermer:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .rdv-fenetre-cadre { flex: 1; min-height: 0; width: 100%; border: 0; display: block; } /* La fenetre qui a recu la hauteur de sa page : elle la suit, jusqu'au plafond que le script applique lui-meme sur le cadre. /!\ **`fit-content`, ET SURTOUT PAS `auto`.** Mesure a l'ecran : avec `auto`, la fenetre s'etirait sur TOUTE la hauteur de l'ecran (900 px sur un ecran de 900) alors que son cadre faisait 233. La raison est dans la feuille du navigateur : `dialog` y vaut `height: fit-content` avec `inset-block: 0 0` et `margin: auto`. Ecrire `auto` par-dessus rend les deux bords opposes contraignants, et la boite remplit l'espace entre eux -- exactement le contraire de ce qu'on demandait. On REND donc la valeur du navigateur au lieu de la remplacer. /!\ **ET ON REMET UN `max-height`**, que le bloc du dessus avait mis a `none` parce que la hauteur y etait figee : sans lui, une page longue sur un petit ecran ferait sortir la fenetre de l'ecran. Le script borne deja le cadre ; les deux gardes sont voulues, l'une ne depend pas de JavaScript. */ dialog.rdv-fenetre.verre[data-ajustee] { height: fit-content; max-height: calc(var(--fenetre) - 80px); } dialog.rdv-fenetre.verre[data-ajustee] .rdv-fenetre-cadre { flex: none; } /* ── L'ecran etroit ──────────────────────────────────────────────────────── /!\ Sous cette largeur, le bouton de l'etape courante ne tient plus a cote de son titre : il passe dessous, aligne sur le texte et non sur la pastille. */ @media (max-width: 760px) { .mer-carte { padding: 18px 16px 6px; } .mer-etape { flex-wrap: wrap; } .mer-etape-gestes { width: 100%; padding-left: 38px; margin-top: 8px; } .mer-jauge b { font-size: var(--text-body); } /* ⚠️ **`white-space: normal` NE SUFFISAIT PAS, et le resultat etait illisible** (releve a 390 px le 2026-09-16). La ligne ne passe pas a la ligne : la jauge (96 px) et « Reprendre ma mise en route » (195 px, insecable) mangeaient les 298 px disponibles, et le texte se repliait dans les CINQ points restants : une lettre par ligne, sur cent trente points de haut. Autoriser le retour a la ligne sans donner de place au texte ne fait que choisir la forme du degat. */ .mer-ligne { flex-wrap: wrap; row-gap: 8px; } /* Le texte reste a cote de la jauge, avec de quoi ecrire : une base de 120 px tient (96 + 14 + 120 = 230), et `1 1` lui rend tout ce qui traine. */ .mer-ligne-texte { white-space: normal; flex: 1 1 120px; } /* Le lien prend sa propre ligne plutot que d'ecraser la phrase qu'il conclut. */ .mer-ligne-fin { flex: 1 0 100%; } } /* La GRILLE de cartes : elles se posent cote a cote et reviennent a la ligne toutes seules (2026-08-18, demande du fondateur sur « Mes traders »). /!\ Les cartes d'une meme rangee ont la MEME HAUTEUR, et c'est ce qui separe une grille rangee d'un escalier. C'est `align-items: stretch` (le defaut d'une grille) qui le donne ; encore faut-il que la carte, elle, sache occuper la hauteur qu'on lui offre : d'ou la colonne flexible ci-dessous. Un contenu plus court laisse alors son vide en BAS de la carte, jamais entre deux blocs. /!\ La largeur d'une colonne se regle en un seul endroit, `--carte-min`, et jamais dans un gabarit : c'est la lecon du 2026-08-18 (dix-sept largeurs ecrites en dur). `auto-fill` et non `auto-fit` : `auto-fit` etire une carte unique sur tout le cadre, ce qui donne une carte de 1280 de large quand un client n'a qu'un trader. */ .cartes--grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--carte-min, 320px), 1fr)); /* /!\ `1fr` sur les rangees implicites, et non `auto` : sans lui, seules les cartes d'une MEME rangee ont la meme hauteur, et la deuxieme rangee est plus courte que la premiere. Les boutons d'une carte du bas ne tombent alors pas a la meme hauteur que ceux d'une carte du haut. Avec `1fr`, toutes les rangees prennent la hauteur de la plus grande et TOUTES les cartes de la grille sont identiques. */ grid-auto-rows: 1fr; gap: 14px; } /* La carte devient une colonne : ce qui doit tomber en bas (les actions) porte `margin-top: auto` et s'y colle, quelle que soit la hauteur de la rangee. */ .cartes--grille > .carte { display: flex; flex-direction: column; margin-bottom: 0; } .carte-bas { margin-top: auto; } /* Les ZONES d'une carte, separees par un filet (2026-08-18). Demande du fondateur, apres avoir vu la grille : « l'interieur manque de relief ». Il ne manquait pas de relief, il manquait de STRUCTURE : tout etait du texte gris aligne a gauche, a la meme taille, sauf le titre. Une carte se lit mieux en trois temps : ce que c'est, ce que ça produit, ce qu'on peut en faire. /!\ Le filet est pose en `border-top` sur la zone SUIVANTE, jamais en `
` : un element vide de plus dans le flux serait lu a voix haute par un lecteur d'ecran sans rien signifier. /!\ Il deborde du padding de la carte (marges negatives) pour aller d'un bord a l'autre. Un filet qui s'arrete avant les bords ressemble a un soulignement rate. */ .carte-zone { border-top: 1px solid var(--border); margin-left: calc(-1 * var(--carte-marge, 28px)); margin-right: calc(-1 * var(--carte-marge, 28px)); padding: 12px var(--carte-marge, 28px) 0; } /* ============================================================ Les MESURES : etiquette AU-DESSUS, valeur en dessous (2026-08-18) ============================================================ Deux ou trois chiffres poses cote a cote dans une carte. Plus leger que `.chiffre`, qui est une TUILE (fond, bordure, lisere, survol) : une tuile posee dans une carte fait une boite dans une boite, et deux boites imbriquees se disputent le regard. /!\ L'etiquette est AU-DESSUS de la valeur, jamais apres. La carte ecrivait « rien analyse aujourd'hui » : on lit la valeur avant de savoir de quoi elle parle, et deux mesures empilees ne ressemblent plus a une paire. Au-dessus, l'oeil descend d'une colonne a l'autre et compare. /!\ Les colonnes sont de largeur EGALE (`1fr`). Deux mesures qui repondent a deux questions de meme rang doivent avoir le meme poids ; la premiere qui s'elargirait parce que sa valeur est plus longue ferait croire a une hierarchie qui n'existe pas. */ /* ── CE QU'UN TRADER FAIT EN CE MOMENT (2026-08-21) ───────────────────────── La zone qui a remplace les chiffres de performance sur la carte d'un trader. /!\ La COULEUR porte l'etat, et c'est tout l'interet : dix cartes se lisent d'un regard sans lire un mot. Bleu en position, orange ordre posé, gris au repos. /!\ Ce sont les couleurs SEMANTIQUES (`--info`, `--warning`), pas l'accent de marque : elles disent un etat, pas une identite. Et jamais `--success`/`--error` ici -- une position ouverte n'est ni gagnante ni perdante, le serveur ne recoit aucun prix en direct et l'ignore. /!\ La pastille double la couleur du texte au lieu de la remplacer : une teinte seule est illisible pour huit hommes sur cent, et le mot reste le porteur. */ /* Le bloc de CLE POSE SUR UNE CARTE (2026-08-21). Le meme composant qu'ailleurs, resserre pour tenir dans une colonne de 320 px. /!\ L'etiquette « Cle du plugin » n'est pas SUPPRIMEE, elle est rendue invisible a l'oeil et gardee pour les lecteurs d'ecran. Elle occupait 110 px de la premiere ligne, ce qui renvoyait les trois boutons a la ligne suivante et faisait grandir chaque carte d'une rangee -- soit dix rangees pour dix traders, exactement le « ce sera indigestible » qui avait fait retirer ce bloc des cartes le 2026-08-17. Sur la carte, le contexte et les trois icones disent deja de quoi il s'agit. */ /* ⚠️ **`.trader-carte` N'EXISTE PLUS** (refonte « l'équipe », 2026-09-15) : la carte d'un trader est `.tr`. Ces règles la suivent plutôt que de rester à viser une classe morte — un style sans balise finit par être recopié ailleurs « parce qu'il existe ». ⚠️ **L'ÉTIQUETTE RESTE MASQUÉE**, comme sur l'ancienne carte, et pour la raison d'alors : elle prend la largeur d'un bouton et renvoie les trois icônes à la ligne, ce qui fait grandir chaque carte d'une rangée. Ce qu'elle disait est désormais écrit EN TOUTES LETTRES sous le bloc (« Collez cette clé dans le plugin NinjaTrader »), là où quelqu'un qui installe son plugin pour la première fois le lira vraiment. Elle reste dans le balisage pour les lecteurs d'écran. */ .tr .trader-cle .spec-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tr .trader-cle { padding: 8px 10px; gap: 8px; margin: 0; } /* Le masque ne revient JAMAIS a la ligne : coupe, il se lit comme deux cles. */ .tr .trader-cle code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; } /* Les trois icones tiennent sur la MEME ligne que le code : a la ligne, elles font grandir chaque carte d'une rangee. */ .tr .trader-cle .btn-icon { width: 30px; height: 30px; flex: none; } .vivant { display: flex; align-items: flex-start; gap: 10px; } /* Le resultat du JOUR, pousse au bout de la ligne d'etat (2026-08-21). Il tient la parce que la carte fait 460 px ; sous 400, la grille passe a une colonne et la ligne a de la place de reste. Aligne a droite : un montant se lit par sa fin. */ .vivant-jour { margin-left: auto; text-align: right; flex: none; } .vivant-pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--disabled-foreground); } .vivant-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .vivant-titre { font-size: var(--text-md); font-weight: 500; color: var(--muted-foreground); } .vivant-note { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted-foreground); } .vivant--position .vivant-pastille { background: var(--info); box-shadow: 0 0 0 3px rgba(125,211,252,0.16); } .vivant--position .vivant-titre { color: var(--info); } .vivant--ordre .vivant-pastille { background: var(--warning); box-shadow: 0 0 0 3px rgba(251,191,36,0.16); } .vivant--ordre .vivant-titre { color: var(--warning); } /* Au repos et a l'arret : rien ne se detache. Une carte calme ne doit pas attirer l'oeil autant qu'une carte qui porte de l'argent en risque. */ .vivant--rien .vivant-titre, .vivant--arret .vivant-titre { font-weight: 400; } .mesures { display: grid; grid-template-columns: repeat(var(--mesures, 2), 1fr); gap: 14px; } .mesure { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mesure-l { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted-foreground); } .mesure-v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Une mesure qui n'a pas de nombre a montrer (« hors seance ») : le mot prend la place du chiffre, mais pas son poids. Il DIT quelque chose, il ne se compare pas. */ .mesure-v--mot { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; color: var(--muted-foreground); } .mesure-n { font-size: var(--text-caption); color: var(--muted-foreground); } /* Une mesure cliquable garde le texte du dessus et prend la teinte au survol. */ a.mesure { text-decoration: none; border-radius: var(--radius-md); margin: -4px -6px; padding: 4px 6px; transition: background var(--motion-base) var(--ease-out); } a.mesure:hover, a.mesure:focus-visible { background: var(--accent-wash); } /* ============================================================ Le SOMMAIRE : naviguer dans une page longue (2026-08-17) ============================================================ Demande du fondateur : « c'est assez chiant de devoir tout defiler pour acceder aux differentes sections ». La fiche d'un trader en compte une dizaine. Une barre qui reste en haut, une puce par section, celle qu'on lit s'allume. `sommaire.js` s'occupe de la surbrillance. /!\ Pourquoi PAS des onglets DANS le formulaire : il est UN tout, valide d'un bloc, et un refus portant sur un champ range dans un onglet ferme serait invisible. Le client lirait « refuse » sans voir quoi. Le formulaire reste donc entier sur sa page, et le sommaire n'y deplace rien : il fait defiler. /!\ A ne pas confondre avec le decoupage en PAGES du 2026-08-17 (Reglages / Regles / Gerer). Ce qui est parti sur une autre page n'appartenait pas au formulaire : ni la cle du plugin, ni les regles, ni l'arret ne s'enregistrent avec lui, ils agissent tout de suite. L'objection ci-dessus tient toujours, elle ne visait que le fait de CACHER une partie d'un meme formulaire. /!\ `top` vaut la hauteur de la barre d'application (56 px), qui est elle-meme collante. Sans cela le sommaire se glisserait DESSOUS et disparaitrait. /!\ `backdrop-filter` est ici justifie, a l'inverse de `.verre` : du contenu defile REELLEMENT derriere cette barre. Une seule zone a recomposer, pas dix cartes. /!\ Les sections cibles ont besoin de `scroll-margin-top` : sans lui, l'ancre les amene sous les deux barres collantes, et on atterrit sur un titre cache. */ .sommaire { position: sticky; top: 56px; z-index: 40; display: flex; align-items: center; gap: 2px; margin: 0 0 18px; padding: 5px; overflow-x: auto; background: rgba(16, 18, 26, 0.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius-pill); scrollbar-width: none; } .sommaire::-webkit-scrollbar { height: 0; } .sommaire > a { flex: 0 0 auto; padding: 6px 13px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; line-height: 1; color: var(--muted-foreground); text-decoration: none; border-radius: var(--radius-pill); white-space: nowrap; transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); } .sommaire > a:hover { color: var(--foreground); background: rgba(255,255,255,0.05); } .sommaire > a[aria-current="true"] { background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.35); } /* 56 de barre d'application + 46 de sommaire + une respiration. */ [data-section] { scroll-margin-top: 116px; } /* La CHAINE : les etapes d'un ordre, de gauche a droite (2026-08-18). ============================================================ Choix du fondateur parmi trois maquettes (frise verticale, chaine, tableau) : « j'aime bien le B, avec toutes les informations utiles ». /!\ Ce qu'elle dit et qu'une liste ne disait pas : que c'est une SUITE. Chaque etape pointe vers la suivante, et la derniere se teinte du resultat. Les rangees d'avant alignaient trois blocs sans lien visible entre eux, et le montant partait a l'extreme droite, a mille pixels de l'etape qui l'avait produit. /!\ Sa limite est REELLE et il faut la connaitre avant d'y mettre autre chose : au-dela de quatre ou cinq etapes elle se replie sur deux lignes, et le detail de chaque etape doit rester court. Un ordre en compte trois dans le cas courant (pose, rempli, sorti), deux s'il est annule, un s'il attend encore. /!\ La fleche est un CARRE tourne a 45 degres, pas un caractere : elle doit prendre le fond et la bordure de l'etape qu'elle prolonge, y compris quand celle-ci est teintee. Un « > » textuel ne saurait pas suivre. */ .chaine { display: flex; align-items: stretch; flex-wrap: wrap; } .chaine-etape { flex: 1 1 190px; min-width: 0; position: relative; padding: 14px 18px 14px 22px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-left: 0; } .chaine-etape:first-child { border-left: 1px solid var(--border); border-radius: var(--radius-lg) 0 0 var(--radius-lg); padding-left: 18px; } .chaine-etape:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .chaine-etape + .chaine-etape::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: rgba(255,255,255,0.02); border-top: 1px solid var(--border); border-right: 1px solid var(--border); transform: rotate(45deg); } .chaine-rang { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted-foreground); } .chaine-quoi { margin-top: 4px; font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; color: var(--foreground); } .chaine-motif { font-weight: 400; color: var(--muted-foreground); } .chaine-heure { margin-top: 3px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); } .chaine-detail { margin-top: 7px; font-size: var(--text-sm); line-height: 1.5; color: var(--disabled-foreground); } .chaine-montant { margin-top: 7px; font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; } /* L'etape qui SOLDE prend la teinte de son resultat — et sa fleche avec elle, sinon le raccord se voit. */ .chaine-etape--gain { background: rgba(60,190,130,0.06); border-color: rgba(60,190,130,0.30); } .chaine-etape--gain::before { background: rgba(60,190,130,0.06); } .chaine-etape--perte { background: rgba(214,90,90,0.06); border-color: rgba(214,90,90,0.30); } .chaine-etape--perte::before { background: rgba(214,90,90,0.06); } /* Sous 640 px les etapes s'empilent : la fleche laterale n'a plus de sens, les coins se remettent d'aplomb. */ @media (max-width: 640px) { .chaine-etape, .chaine-etape:first-child, .chaine-etape:last-child { flex: 1 1 100%; border-left: 1px solid var(--border); border-radius: var(--radius-lg); } .chaine-etape + .chaine-etape { margin-top: 8px; } .chaine-etape + .chaine-etape::before { display: none; } } /* Le RELEVE D'UN TRADE (recette du 24/09/2026) : « Ce que ça a donné ». ============================================================ /!\ **LA BANDE `.verdict` EST PARTIE** (montant en gros a gauche, deux tuiles a droite) : le fondateur a demande le style du relevé de la synthèse du journal, `.releve` plus bas, avec tous les chiffres du trade. On ne garde ici que ce que la fiche ajoute : son espace avant le bandeau du rejeu, et un MOT lisible (le type d'ordre, le modèle) qui n'est pas un « - » grisé. */ .releve--trade { margin-bottom: 16px; } .releve dd.releve-mot--clair { color: var(--foreground); } /* La POSITION EN TROP refermée (24/09/2026) : un relevé à part, sous celui du trade, bordé de l'ocre de `.badge-warning` : son résultat n'est pas celui du trade. */ .releve--excedent { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid rgb(251 191 36 / 0.35); } .releve--excedent .releve-titre { margin: 0 0 10px; } .releve--excedent > .t-caption { margin: 10px 0 0; } /* ══ LE DÉTAIL D'UNE ANALYSE, REPENSÉ (fondateur, 27/09/2026) ═══════════════════ « Je ne la trouve pas du tout user-friendly. » Trois changements, un motif chacun : - les chiffres de « Ce que ça a donné » se GROUPENT par sens (l'ordre, la position, l'analyse) : trois `.releve-groupe`, une colonne chacun, côte à côte au bureau et empilés au téléphone, sans media query (`auto-fit`) ; - le déroulé sort de son repli : les rangées du journal, un liseré par fait ; - « Ce qu'il avait sous les yeux » montre les DONNÉES (`.yeux-*`), jamais le texte envoyé au modèle : une bande de repères (`.bande`, la charte), puis des cartes plates, le cadre de `.bloc-plat` en plus serré. */ .rejeu-ligne { margin: 0 0 16px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--muted-foreground); } .rejeu-ligne > .badge { margin-right: 8px; } .reglage-groupe > p.rejeu-ligne { max-width: none; } .releve--groupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px 34px; } .releve--groupes dl { columns: auto; } .releve-groupe { min-width: 0; } .releve-groupe > .releve-titre, .deroule > .releve-titre { margin: 0 0 2px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-foreground); } /* Le DÉROULÉ : les rangées du journal (`.rangees` / `.rangee`, et le liseré des tickets, `.ticket--*`), pas une frise à elle — la charte l'interdit depuis le 2026-09-15 (« NE PAS REFABRIQUER `.frise-*` »), et la même page portait déjà la même liste sous une autre forme. Visible, plus replié. */ .deroule { margin: 26px 0 0; } .deroule > .rangees { margin-top: 6px; } .deroule-note { margin: 8px 0 0; } /* ── Ce qu'il avait sous les yeux ── */ .yeux-bande { margin: 6px 0 18px; } .yeux-bande .yeux-mot { font-family: var(--font-sans); } .yeux-carte { min-width: 0; margin: 0 0 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .yeux-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; } .yeux-titre { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--foreground); } .yeux-note { margin: 2px 0 0; } .yeux-defile { margin-top: 10px; max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); } .yeux-defile--court { max-height: 250px; } .yeux-table { width: 100%; border-collapse: separate; border-spacing: 0; } .yeux-table th { position: sticky; top: 0; z-index: 1; background: var(--card); padding: 8px 10px; text-align: right; white-space: nowrap; font-size: var(--text-2xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); border-bottom: 1px solid var(--border); } .yeux-table td { padding: 6px 10px; text-align: right; white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(255,255,255,0.04); } .yeux-table th:first-child, .yeux-table td:first-child { text-align: left; } .yeux-table tbody tr:last-child td { border-bottom: 0; } /* La bougie la plus RÉCENTE, celle de la décision, en haut et marquée. */ .yeux-table tbody tr:first-child td { background: rgba(180,168,255,0.07); } .yeux-table .yeux-large { text-align: left; white-space: normal; min-width: 16em; font-size: var(--text-xs); } .yeux-h { color: var(--muted-foreground); } .yeux-hausse { color: var(--success); } .yeux-baisse { color: var(--error); } .yeux-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; gap: 14px; margin: 0 0 14px; } .yeux-grille > .yeux-carte { margin: 0; } .yeux-valeurs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 24px; margin: 10px 0 0; } .yeux-valeurs > div { display: flex; flex-direction: column; } .yeux-grand { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--foreground); } .yeux-depli { margin-top: 10px; } .yeux-depli > summary { padding: 8px 2px 0; } .yeux-liste { margin: 8px 0 0; padding-left: 18px; font-size: var(--text-body-sm); color: var(--foreground); } .yeux-liste li + li { margin-top: 3px; } .yeux-manques { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; margin: 0 0 14px; font-size: var(--text-body-sm); color: var(--muted-foreground); } .yeux-annonces { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .yeux-annonces li { display: grid; grid-template-columns: 3.4em auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; } .yeux-annonces li .t-caption { grid-column: 3; } .yeux-annonces .yeux-h { font-family: var(--font-mono); font-size: var(--text-sm); } .yeux-annonce-nom { color: var(--foreground); font-size: var(--text-body-sm); } .yeux-barres { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; } .yeux-barre { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 4.4em; gap: 10px; align-items: center; padding: 0 8px; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; } .yeux-barre-prix { text-align: right; color: var(--muted-foreground); } .yeux-barre-q { text-align: right; color: var(--foreground); } .yeux-barre-piste { height: 10px; border-radius: 3px; background: rgba(255,255,255,0.03); overflow: hidden; } .yeux-barre-piste > i { display: block; height: 100%; border-radius: 3px; background: rgba(180,168,255,0.30); } .yeux-barre--valeur .yeux-barre-piste > i { background: rgba(180,168,255,0.55); } .yeux-barre--poc .yeux-barre-piste > i { background: var(--accent); } .yeux-barre--poc .yeux-barre-prix { color: var(--accent); font-weight: 600; } .yeux-barre--vente .yeux-barre-piste > i { background: rgb(248 113 113 / 0.5); } .yeux-barre--achat .yeux-barre-piste > i { background: rgb(74 222 128 / 0.45); } .yeux-barre-milieu { margin: 4px 0; padding: 4px 0; text-align: center; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); font-size: var(--text-2xs); color: var(--muted-foreground); } .yeux-seances { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 10px; } .yeux-seance { min-width: 0; } .yeux-seance-titre { margin: 0; font-weight: 500; color: var(--foreground); } .yeux-reperes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--foreground); } .yeux-reperes b { margin-right: 4px; font-family: var(--font-sans); font-weight: 500; color: var(--muted-foreground); } .yeux-seance .yeux-defile { border: 0; margin-top: 6px; } /* ── LE GRAPHIQUE D'UN TRADE, ET L'APERCU DE SES COULEURS ──────────────────── /!\ **L'ECHELLE DE PRIX VERTICALE A ETE PURGEE LE 2026-09-15**, avec ses dix-huit classes `.ech-*` et `performance.echelle_de_prix` : le graphique porte le plan a son HEURE, avec les bougies autour, et deux dessins du meme trade c'etait un de trop. Ne pas la remettre : ce qu'elle disait -- les DISTANCES entre le stop, l'entree et l'objectif -- se lit mieux sur le graphique, qui montre en plus ce que le marche a fait entre les deux. /!\ Le cours du jour et la plus-value LATENTE s'affichaient sur elle. Ils ont ete reportes sur le graphique le meme jour : ils avaient disparu de l'ecran sans que rien ne le dise, et c'est la purge qui l'a montre (`tests/test_latent_sur_le_dessin.py`). /!\ **L'APERCU SVG DE QUATRE BOUGIES A ETE PURGE LE 2026-09-15**, avec ses classes `.ch-*` et `.chandelles` et l'onglet « Graphique » du profil qui l'hebergeait (fondateur : « retire la page des reglages des graphiques du profil »). Il vivait dans `user_profile.html` et dessinait a la main ce que le canevas peint : c'est comme ca qu'il s'est retrouve NOIR SUR NOIR sans que rien ne crie, en septembre. **L'apercu est desormais le VRAI graphique**, repeint par `graphique-trade.js` dans la fenetre de reglages -- un seul peintre, donc plus de second dessin a tenir d'accord. Ne pas les remettre : les variables `--ch-*`, elles, restent, et c'est le canevas qui les lit. */ /* LE GRAPHIQUE D'UN TRADE — le cadre, la barre de lecture, la toile. /!\ Le DESSIN vit dans `static/js/graphique-trade.js` : il se fait dans le navigateur depuis le 2026-09-15, parce qu'un graphique ou l'on NAVIGUE ne peut pas etre rendu d'avance — seul le navigateur sait quelle fenetre le client regarde. Ce bloc ne porte donc que le cadre et les teintes ; les couleurs elles-memes sont posees sur l'element par le serveur, depuis le profil du client. */ .graphique-trade { position: relative; padding: 0; overflow: hidden; } /* Les teintes que le SCRIPT lit sur le cadre, en plus des huit du client : elles viennent de la charte, pas d'un defaut ecrit en JavaScript. /!\ **DEUX SELECTEURS, UNE SEULE DECLARATION** : l'apercu de la fenetre de reglages est peint par le MEME script, qui lit ces memes variables sur LUI. Les redeclarer pour lui, ce serait deux jeux de teintes a tenir d'accord -- et l'apercu qui ment. */ .graphique-trade, .rg-apercu { --ch-texte: var(--foreground); --ch-discret: var(--muted-foreground); --ch-grille: rgba(255,255,255,0.055); --ch-fond: var(--card); --ch-alerte: var(--warning); } .gt-toile { display: block; width: 100%; height: 480px; cursor: crosshair; touch-action: none; } .gt-toile.ch-glisse { cursor: grabbing; } /* La barre du haut : LE PLAN a gauche, le zoom et le recadrage a droite. /!\ **LE PLAN Y EST DEPUIS LE 2026-09-15**, quand il a quitte les bougies (fondateur : « je n'aime pas l'affichage et le texte sur le graphique »). Une SEULE barre, pas deux empilees : le dessin perdait trente points de hauteur pour redire ce que celle-ci disait deja. /!\ `flex-wrap` n'est pas un detail : a trois jetons plus le cours plus trois boutons, une barre qui ne se replie pas pousse les boutons hors du cadre sur un telephone. */ .gt-barre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .gt-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } /* B5 (23/09/2026) : LES ONGLETS d'une analyse, un par serie lue. /!\ Ils passent a la ligne au telephone : jamais de defilement horizontal (plan § 8). */ .gt-onglets { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .gt-onglet { font: inherit; font-family: var(--font-mono); font-size: var(--text-xs); padding: 4px 11px; border-radius: 999px; cursor: pointer; color: var(--muted-foreground); background: transparent; border: 1px solid var(--border); } .gt-onglet:hover { color: var(--foreground); } .gt-onglet--actif { color: var(--foreground); background: rgba(255,255,255,0.06); border-color: var(--foreground); } .gt-dit { margin-top: 8px; } /* LE JETON d'un niveau : une pastille, sa couleur en point, son prix en gras. /!\ La COULEUR vient du profil du client, comme le trait qu'elle designe -- la feuille ne connait que la recette (`var(--ch-stop)` & consorts, posees sur le cadre par le gabarit). Un vert et un rouge ecrits ici divergeraient du dessin le jour ou il change ses teintes. */ .gt-jeton { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1.5; color: var(--muted-foreground); background: rgba(255,255,255,0.035); border: 1px solid var(--border); } .gt-jeton b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; } .gt-jeton .gt-sec { font-weight: 400; font-variant-numeric: tabular-nums; opacity: 0.8; } .gt-jeton .gt-pt { align-self: center; width: 7px; height: 7px; border-radius: 99px; } .gt-jeton--entree .gt-pt { background: rgba(var(--ch-entree), 1); } .gt-jeton--stop .gt-pt { background: rgba(var(--ch-stop), 1); } .gt-jeton--objectif .gt-pt { background: rgba(var(--ch-objectif), 1); } .gt-jeton--cours .gt-pt { background: var(--foreground); } /* /!\ SUR UN TELEPHONE, CHAQUE JETON PREND SA LIGNE, et quatre lignes de bandeau poussaient le dessin d'autant. On resserre plutot que de cacher : ce qui est ecrit la -- la distance en ticks, ce que le niveau coute en dollars -- est justement ce qui a quitte le dessin, et le masquer sur telephone le perdrait pour de bon. */ @media (max-width: 640px) { .gt-jeton { padding: 3px 9px 3px 7px; font-size: calc(11px * var(--echelle-texte)); gap: 5px; } .gt-jeton .gt-pt { width: 6px; height: 6px; } .gt-plan { gap: 5px; } .gt-barre { padding: 7px 10px; gap: 7px 10px; } } /* LA LEGENDE : les valeurs de la bougie survolee, POSEES SUR LE DESSIN. /!\ Elle vivait dans la barre du haut, hors du cadre ; le fondateur ne l'y voyait pas bouger (2026-09-15 : « en haut a gauche les valeurs OHLCV »). C'est le meme texte, deplace la ou le regard suit deja le repere. /!\ `pointer-events: none` n'est pas un detail : sans lui, la legende volerait au dessin le glissement et la molette des qu'on passe dessus. */ .gt-scene { position: relative; } .gt-legende { position: absolute; top: 7px; left: 12px; z-index: 2; pointer-events: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; max-width: calc(100% - 80px); padding: 5px 10px; border-radius: 8px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.4; color: var(--muted-foreground); /* /!\ LE FOND N'EST PAS DE LA DECORATION : le haut du dessin porte deja l'etiquette de l'objectif, et sans lui les deux textes se superposaient — illisibles tous les deux. Le repli sert les navigateurs sans `color-mix`. */ background: var(--card); background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(3px); } .gt-legende b { color: var(--foreground); font-weight: 600; letter-spacing: 0.02em; } .gt-legende i { font-style: normal; opacity: 0.75; margin-right: 4px; } /* La valeur prend la couleur de la bougie — celles du profil du client, posees en ligne par le script : la feuille ne peut pas savoir si la bougie monte ou descend. */ .gt-legende em { font-style: normal; font-weight: 600; } /* LE GESTE de la bougie survolee (« entree 10 », « sorties partielles 4 »). /!\ Il s'ecrivait A MEME LE DESSIN jusqu'au 2026-09-15 ; il se lit ici depuis que le dessin ne porte plus de texte. La couleur est posee en ligne par le script : elle depend du geste, que la feuille ne connait pas. */ .gt-legende .gt-geste { font-weight: 600; } .gt-legende .gt-geste::before { content: '●'; margin-right: 5px; font-size: 0.7em; vertical-align: 1px; } .gt-gestes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .gt-bouton { min-width: 28px; padding: 4px 9px; cursor: pointer; line-height: 1.2; font-size: var(--text-sm); color: var(--muted-foreground); background-color: rgba(255,255,255,0.035); border: 1px solid var(--border-strong); border-radius: 6px; } .gt-bouton:hover { color: var(--foreground); border-color: var(--ring); } .gt-recadrer { font-size: var(--text-xs); } .gt-aide { margin: 0; padding: 6px 12px 10px; color: var(--muted-foreground); border-top: 1px solid var(--border); } /* AUDIT DE LA SÉANCE (22/10/2026) : « Ses horaires » / « Toute la journée » en mots, et la légende À SYMBOLES sous le dessin, les mêmes formes que le script peint (`graphique-trade.js`, marques de la séance). Le mode d'emploi est derrière « ? ». */ .gt-vues { display: flex; gap: 4px; margin-right: auto; } .gt-symboles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 12px 10px; color: var(--muted-foreground); border-top: 1px solid var(--border); } .gt-symboles > span { display: inline-flex; align-items: center; gap: 6px; } .gt-symboles .gt-aide { margin-left: auto; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; width: 18px; height: 18px; justify-content: center; cursor: help; font-weight: 600; } .gt-sym { display: inline-block; width: 10px; height: 10px; flex: none; } /* Les teintes sont CELLES QUE LE CLIENT RÈGLE (« Vos trades sur la séance »). */ .gt-sym--achat { width: 0; height: 0; border: 5px solid transparent; border-bottom: 9px solid rgb(var(--ch-trade-achat)); border-top: 0; } .gt-sym--vente { width: 0; height: 0; border: 5px solid transparent; border-top: 9px solid rgb(var(--ch-trade-vente)); border-bottom: 0; } .gt-sym--gain { border-radius: 50%; background: rgb(var(--ch-sortie-gain)); box-shadow: 0 0 0 1.5px rgba(245,244,240,.9); } .gt-sym--perte { border-radius: 50%; background: rgb(var(--ch-sortie-perte)); box-shadow: 0 0 0 1.5px rgba(245,244,240,.9); } .gt-sym--lu { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-foreground); opacity: .6; } .gt-sym--horaires { width: 16px; height: 3px; border-radius: 2px; background: rgba(var(--ch-horaires), var(--ch-horaires-o)); } .gt-aide kbd, .aide-texte kbd { display: inline-block; min-width: 1.5em; padding: 0 5px; text-align: center; font: 600 10.5px/1.6 var(--font-mono); color: var(--foreground); background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); border-radius: 4px; } /* ══ LA PAGE D'UNE ANALYSE, POUR CELUI QUI L'OUVRE TOUS LES JOURS (09/10/2026) ═════ Fondateur : « mets-toi vraiment à la place d'un client qui regarde sa page tous les jours. Il faut que ce soit clair, que ce soit un plaisir d'y naviguer. » Le graphique passe en tête et grandit ; dessous, quatre onglets ; on dessine dessus, et on peut le prendre en plein écran. /!\ Les dessins sont peints par `graphique-trade.js` ; cette feuille ne porte que la barre, la palette, le champ de texte et l'atelier plein écran. */ .an-graphique { margin: 0 0 20px; } .an-graphique-dit { margin: 0 0 10px; max-width: 95ch; font-size: var(--text-body-sm); color: var(--muted-foreground); } .an-voisines { display: inline-flex; gap: 6px; margin-right: 6px; } .an-voisines [aria-disabled="true"] { opacity: .35; cursor: default; } /* /!\ `[hidden]` ne gagne pas contre une classe qui pose `display` (`.yeux-grille`, `.yeux-carte`) : sans cette ligne, un panneau « caché » restait affiché. */ [data-an-panneau][hidden], [data-yeux-panneau][hidden], .gt-palette[hidden] { display: none !important; } .an-onglets { margin: 6px 0 22px; } /* Dans un onglet, une partie est seule à l'écran : sa pastille numérotée ne compte plus rien, et la phrase d'introduction reprend sa marge. */ .an-panneaux .reglage-groupe { margin-bottom: 28px; } /* Le journal de séance (21/10/2026) : les analyses d'une séance, une ligne chacune, toute la ligne cliquable (la page d'une séance a le même style qu'une analyse). */ .se-analyses { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .se-analyses li { border-bottom: 1px solid var(--border); } .se-analyse { display: flex; align-items: center; gap: 14px; padding: 12px 6px; color: var(--foreground); text-decoration: none; font-size: var(--text-body-sm); } .se-analyse:hover, .se-analyse:focus-visible { background: var(--muted); } .se-heure { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; } .se-doux { color: var(--muted-foreground); } .se-ouvrir { margin-left: auto; color: var(--muted-foreground); display: inline-flex; } /* La note d'une analyse (30/10/2026) : son icône sous la ligne, alignée sur le sens (le retrait de la ligne, plus la colonne de l'heure, plus l'écart). */ .se-analyses .jp-ligne { padding: 0 6px 8px calc(6px + 46px + 14px); margin-top: -6px; } .seance-faits { margin: 0; padding-left: 18px; font-size: var(--text-body-sm); } .seance-faits li { margin: 0 0 8px; } .an-panneaux .reglage-groupe > h2::before { display: none; } .an-panneaux .reglage-groupe > h2 + p { margin-left: 0; } /* LES GESTES de la barre : des icônes carrées, la même taille que l'écrou. */ .gt-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .gt-bouton > svg { display: block; } .gt-bouton[aria-pressed="true"] { color: var(--foreground); border-color: var(--accent); background-color: rgba(180,168,255,0.16); } .gt-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 3px; flex: 0 0 auto; } .gt-si-plein { display: none; } .gt-atelier--plein .gt-si-normal { display: none; } .gt-atelier--plein .gt-si-plein { display: inline-flex; } .gt-toile:focus { outline: none; } .gt-toile:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .gt-toile[data-outil]:not([data-outil="curseur"]) { cursor: crosshair; } .gt-toile[data-outil="gomme"] { cursor: cell; } .gt-toile.gt-sur-dessin { cursor: move; } /* LA PALETTE DE DESSIN : les outils, cinq teintes, annuler, tout effacer, et l'état de l'enregistrement à droite. /!\ `flex-wrap` : au téléphone elle passe sur deux lignes plutôt que de pousser des outils hors du cadre. */ .gt-palette { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: rgba(180,168,255,0.04); } .gt-outils, .gt-teintes { display: inline-flex; align-items: center; gap: 4px; } .gt-outil { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; cursor: pointer; color: var(--muted-foreground); background: transparent; border: 1px solid transparent; border-radius: 7px; } .gt-outil:hover { color: var(--foreground); background: rgba(255,255,255,0.05); } .gt-outil[aria-pressed="true"] { color: var(--foreground); background: rgba(180,168,255,0.18); border-color: var(--accent); } .gt-teinte { width: 18px; height: 18px; padding: 0; cursor: pointer; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--border-strong); } .gt-teinte[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--foreground); } .gt-teinte--ambre { background: #f59e0b; } .gt-teinte--bleu { background: #60a5fa; } .gt-teinte--rose { background: #f472b6; } .gt-teinte--vert { background: #34d399; } .gt-teinte--blanc { background: #f5f4f0; } .gt-etat { margin-left: auto; white-space: nowrap; } .gt-etat[data-etat="echec"] { color: var(--warning); } /* Le champ d'un TEXTE, posé à l'endroit cliqué, au-dessus du dessin. */ .gt-saisie { position: absolute; z-index: 4; width: 220px; max-width: calc(100% - 80px); padding: 5px 8px; resize: none; overflow: hidden; font: 600 12.5px/1.4 var(--font-mono); color: var(--foreground); background: var(--card); border: 1px solid var(--accent); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } /* L'ATELIER : sur la page, il n'est que le cadre ; en PLEIN ÉCRAN, le cadre prend tout et le raisonnement se lit à côté (`.gt-volet`), masquable. */ .gt-atelier { position: relative; } .gt-volet, .gt-volet-ouvrir { display: none; } html.gt-plein-ouvert { overflow: hidden; } /* /!\ Le contenu de la coquille vit dans un parent `z-index: 1` : sans cette ligne, l'atelier « par-dessus tout » passait SOUS le menu de gauche et la barre du haut (vu à l'écran, 09/10/2026). Le temps du plein écran, ses parents cessent d'empiler. */ html.gt-plein-ouvert *:has(> * .gt-atelier--plein), html.gt-plein-ouvert *:has(> .gt-atelier--plein) { z-index: auto !important; } .gt-atelier--plein { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; padding: 12px; background: var(--background); } .gt-atelier--plein.gt-atelier--sans-volet { grid-template-columns: minmax(0, 1fr); } .gt-atelier--plein > .graphique-trade { display: flex; flex-direction: column; min-height: 0; height: 100%; margin: 0; } .gt-atelier--plein .gt-scene { flex: 1 1 auto; min-height: 0; } .gt-atelier--plein .gt-toile { height: 100%; } .gt-atelier--plein .gt-volet { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); } .gt-atelier--plein.gt-atelier--sans-volet .gt-volet { display: none; } .gt-volet-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gt-volet-titre { margin: 0; font-weight: 600; color: var(--foreground); } .gt-volet-texte { margin: 10px 0 0; overflow: auto; white-space: pre-wrap; font-size: var(--text-body-sm); line-height: 1.65; color: var(--foreground); } .gt-atelier--plein .gt-volet-ouvrir:not([hidden]) { display: inline-flex; position: absolute; right: 22px; bottom: 54px; z-index: 5; } @media (max-width: 720px) { .gt-atelier--plein { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 6px; gap: 6px; } .gt-atelier--plein .gt-volet { max-height: calc(var(--fenetre) * 0.3); } .gt-atelier--plein .gt-aide { display: none; } } /* LES DONNÉES REÇUES, une source à la fois ; une ligne de bougie mène au graphique. */ .yeux-onglets { margin: 2px 0 14px; } .yeux-carte--etroite { max-width: 620px; } .yeux-table tr[data-t] { cursor: pointer; } .yeux-table tr[data-t]:hover td, .yeux-table tr[data-t]:focus-visible td { background: rgba(180,168,255,0.12); } .yeux-table tr[data-t]:focus-visible { outline: none; } /* L'ECROU, dans la barre du graphique : la porte des reglages (2026-09-15). Meme bouton que le zoom, avec une icone a la place d'un signe -- deux habillages pour des boutons voisins, ca se voit tout de suite. */ .gt-bouton--ecrou { display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; } /* ════ LA FENETRE DE REGLAGES DU GRAPHIQUE (2026-09-15) ══════════════════════ Elle REMPLACE l'onglet « Graphique » du profil (fondateur : « retire la page des reglages des graphiques du profil et mets une icone a gauche avec un ecrou »). /!\ **ELLE SE DEROULE DEDANS, PAS DERRIERE** : `max-height` + un corps en `overflow-y: auto`, pour que la tete et surtout le PIED -- Appliquer, Annuler, Reinitialiser -- restent visibles sans chercher. Un `dialog` qui deborde de l'ecran cache ses propres boutons, et c'est le geste qu'on vient faire qu'on ne trouve plus. */ /* /!\ **`--fenetre`, ET JAMAIS `vh` BRUT** : la charte pose `zoom: var(--echelle)` sur le corps, donc un enfant qui demande `92vh` obtient 92 % de la hauteur DIVISEE par l'echelle -- il deborde de l'ecran, et ce sont ses boutons du bas qu'on perd. `--fenetre` vaut `calc(100vh / var(--echelle))`. Un test l'epingle (`test_echelle_hauteurs.py`), et il a attrape celle-ci. */ .rg-fenetre { width: min(760px, 94vw); max-height: calc(var(--fenetre) * 0.92); padding: 0; border: 0; color: var(--foreground); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.6); } .rg-fenetre::backdrop { background: rgba(0,0,0,0.62); backdrop-filter: blur(2px); } .rg-fenetre form { display: flex; flex-direction: column; max-height: calc(var(--fenetre) * 0.92); } .rg-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .rg-tete h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; } .rg-croix { display: inline-flex; padding: 6px; cursor: pointer; line-height: 0; color: var(--muted-foreground); background: none; border: 1px solid transparent; border-radius: 8px; } .rg-croix:hover { color: var(--foreground); border-color: var(--border-strong); } /* /!\ **AUCUN REMBOURRAGE EN HAUT, et c'est l'apercu collant qui l'impose** : un `padding-top` sur le conteneur laisse une bande au-dessus de l'element colle, et les lignes de reglage defilaient DANS cette bande -- du texte coupe qui flotte au-dessus de l'apercu. L'air du haut est donc porte par la marge de l'apercu lui-meme. */ .rg-corps { padding: 0 20px 4px; overflow-y: auto; flex: 1 1 auto; } /* L'APERCU reste SOUS LES YEUX pendant qu'on deroule les couleurs : c'est lui qu'on regarde en reglant, et le faire partir en haut de page viderait la fenetre de sa raison d'etre. */ .rg-apercu { position: sticky; top: 0; z-index: 3; margin: 18px 0 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .rg-apercu-toile { display: block; width: 100%; height: 190px; } .rg-quoi { margin: 12px 0 18px; font-size: var(--text-sm); color: var(--muted-foreground); } .rg-groupe { margin: 0 0 20px; } .rg-groupe h3 { margin: 0 0 10px; font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted-foreground); } .rg-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 20px; flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--card); } .rg-pied-droite { display: flex; gap: 10px; } @media (max-width: 640px) { .rg-fenetre { width: 100vw; max-height: var(--fenetre); border-radius: 0; border: 0; } .rg-fenetre form { max-height: var(--fenetre); } .rg-corps { padding: 0 14px 4px; } .rg-apercu { margin-top: 14px; } .rg-tete, .rg-pied { padding: 12px 14px; } .rg-apercu-toile { height: 150px; } /* /!\ L'empilement de la ligne de reglage sur telephone est DEJA dans la charte (media 720px, `.reglage-ligne`) : le redire ici en ferait une seconde regle, et c'est celle qu'on oublierait le jour ou l'autre bouge. */ } /* LA FENETRE DE PARTAGE d'un trade (2026-09-15). */ .partage { width: min(680px, 92vw); padding: 22px; color: var(--foreground); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.6); } .partage::backdrop { background: rgba(0,0,0,0.6); } .partage h2 { margin: 0 0 14px; font-size: var(--text-lg); } .partage-fermer { position: absolute; top: 14px; right: 14px; margin: 0; } .partage-apercu { display: block; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); } .partage-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; } .partage-mot { margin: 0 0 14px; font-size: var(--text-sm); color: var(--muted-foreground); } .partage-reseaux { display: flex; flex-wrap: wrap; gap: 8px; } .partage-reseaux a { text-decoration: none; } /* LA FENETRE DE PARTAGE, EN DEUX TEMPS (2026-09-16, arbitrage 3 du fondateur). /!\ **ELLE EST DANS LA CHARTE, PAS DANS UN GABARIT.** Le style de l'ancienne fenetre « Publier dans la communaute » vivait dans `user_trade_detail.html`, au motif que « rien de ce qu'elle dessine ne sert ailleurs » -- vrai tant qu'un seul ecran la portait. Le journal filtre ouvre desormais la MEME fenetre : recopie, ce bloc aurait montre deux fenetres differentes pour un seul geste. Meme motif que la carte d'analyse partagee, descendue ici le meme jour pour la meme raison. /!\ **PLUS D'ETAPE « OU » DEPUIS LE 24/09/2026** (TVNI-242) : la fenetre s'ouvre sur l'apercu, et la communaute est une destination parmi les reseaux. Les grandes cibles de l'etape partie (`.pa-cible`) servent desormais les TROIS SORTES de destination de la communaute (`.pa-sorte`) : un salon public, un message prive, un groupe. */ .pa-sortes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } /* Chaque sorte dit CE QU'ELLE FAIT, pas seulement son nom. */ .pa-sorte { display: block; width: 100%; text-align: left; cursor: pointer; padding: 10px 12px; color: var(--foreground); background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); font: inherit; transition: border-color var(--motion-fast) var(--ease-out); } .pa-sorte:hover, .pa-sorte:focus-visible { border-color: var(--accent-ring-strong); outline: none; } .pa-sorte[aria-selected="true"] { border-color: var(--accent-ring-strong); background: var(--accent-ring); } /* /!\ **UNE DESTINATION IMPOSSIBLE RESTE LISIBLE.** Elle n'est pas cliquable, mais sa phrase explique pourquoi -- c'est tout ce qu'elle a a faire. Un `opacity` trop bas la rendrait illisible et reviendrait a la cacher, ce que ce bloc existe precisement pour eviter. */ .pa-sorte[disabled] { cursor: default; opacity: 0.72; } .pa-sorte[disabled]:hover { border-color: var(--border); } .pa-sorte[disabled] span { color: var(--warning-text); } .pa-sorte b { display: block; font-size: var(--text-sm); font-weight: 600; } .pa-sorte span { display: block; margin-top: 3px; font-size: var(--text-xs); line-height: 1.4; color: var(--muted-foreground); } .pa-dest-titre { margin: 14px 0 8px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); } /* « Communaute TVNI », en tete des reseaux : la seule destination ou TVNI publie lui-meme. Elle porte l'accent de la charte, les reseaux non. */ .pa-communaute-bouton { color: var(--foreground); border-color: var(--accent-ring-strong); background: var(--accent-ring); } .pa-communaute-bouton[disabled] { opacity: .6; cursor: default; } .pa-destinations .partage-mot { margin: 8px 0 0; } .pa-destinations [data-partage-refus] { margin-top: 8px; } .pa-lieu--prive span::before { content: "@"; font-size: var(--text-xs); opacity: .8; } /* UN JOURNAL SANS TRADE (TVNI-242) : une phrase, et rien a emporter. */ .partage[data-partage-vide] { width: min(460px, 92vw); } .pa-vide { margin: 4px 0 0; padding: 26px 4px 8px; text-align: center; } .pa-vide b { display: block; font-size: var(--text-base); font-weight: 600; } .pa-vide span { display: block; margin-top: 6px; font-size: var(--text-sm); color: var(--muted-foreground); } .pa-vide-gestes { justify-content: center; } @media (max-width: 560px) { .pa-sortes { grid-template-columns: minmax(0, 1fr); } } .pa-cases { list-style: none; margin: 0 0 4px; padding: 0; } .pa-case { margin: 0 0 9px; } .pa-case label { display: flex; gap: 9px; align-items: flex-start; font-size: var(--text-sm); cursor: pointer; } .pa-case input { margin-top: 3px; flex: none; } /* /!\ L'aide est DANS l'etiquette de la case, pas a cote : c'est au moment de cocher qu'elle compte, pas trois lignes plus bas. */ .pa-case em { display: block; margin-top: 2px; font-style: normal; font-size: var(--text-xs); color: var(--muted-foreground); } /* /!\ **CE QUI EST SENSIBLE SE VOIT AVANT D'ETRE COCHE.** L'argent et le raisonnement du modele partent decoches ; leur aide passe en teinte d'avertissement pour que la difference se lise au coup d'oeil, et pas seulement dans la case qui n'est pas remplie. */ .pa-case--sensible em { color: var(--warning-text); } .pa-raison { margin: 4px 0 0; padding: 9px 11px; max-height: 160px; overflow-y: auto; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.55; color: var(--muted-foreground); white-space: pre-wrap; overflow-wrap: anywhere; } /* OÙ PUBLIER dans la communauté (2026-09-17) : des puces, pas une liste déroulante (un `select` ne s'habille pas). */ .pa-lieux { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; } .pa-lieux legend { padding: 0; margin-bottom: 6px; font-size: var(--text-sm); color: var(--muted-foreground); } .pa-lieux-choix { display: flex; flex-wrap: wrap; gap: 6px; } .pa-lieu { position: relative; cursor: pointer; } .pa-lieu input { position: absolute; opacity: 0; pointer-events: none; } .pa-lieu span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--muted); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); } .pa-lieu--groupe span::before { content: ""; width: 9px; height: 10px; flex: none; border: 1.5px solid currentColor; border-radius: 2px; border-top-width: 4px; opacity: .8; } .pa-lieu input:checked + span { background: var(--accent-ring); border-color: var(--accent-ring-strong); color: var(--foreground); } .pa-lieu input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; } /* LES LIEUX SONT REMONTES AU-DESSUS DES CASES (2026-09-20). La fenetre demande d'abord OU puis QUOI, et le salon est un « ou » ; la marge suit le demenagement — en derniere position, le bloc n'avait besoin que d'un blanc AU-DESSUS. /!\ Regle AJOUTEE, `.pa-lieux` n'est pas touchee : deux chantiers travaillaient cette feuille le meme jour. */ .pa-quoi .pa-lieux { margin: 0 0 16px; } .pa-mot { display: block; margin-top: 14px; } .pa-mot span { display: block; margin-bottom: 6px; font-size: var(--text-sm); color: var(--muted-foreground); } .pa-mot em { font-style: normal; font-size: var(--text-xs); } .pa-mot textarea { width: 100%; box-sizing: border-box; resize: vertical; background: var(--muted); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 11px; font: inherit; font-size: var(--text-base); line-height: 1.5; } .pa-mot textarea:focus-visible { outline: none; border-color: var(--accent-ring-strong); box-shadow: 0 0 0 3px var(--accent-wash); } /* LA FENETRE A DEUX COLONNES (24/09/2026, TVNI-241 point 5) : les cases a gauche, l'image a droite, EN DIRECT. Le premier temps (« ou ») garde la fenetre etroite ; le second l'elargit (`.partage--large`, pose par `partage.js`). /!\ Sous 860 px, les colonnes S'EMPILENT : l'apercu passe AU-DESSUS des cases, parce que c'est lui qu'on vient voir, et les gestes restent sous l'apercu. */ .partage.partage--large { width: min(1120px, 96vw); } .pa-grille { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; } .pa-choix { min-width: 0; } .pa-bloc { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; } .pa-bloc legend { padding: 0; margin-bottom: 8px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); } .pa-bloc-dit { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); } .pa-bloc-dit--alerte { color: var(--warning-text); } /* Un graphique a cocher : son titre, et dessous ses indicateurs. */ .pa-case--graphique label { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); } .pa-case--graphique label:has(input:checked) { border-color: var(--accent-ring-strong); } .pa-rendu { min-width: 0; position: sticky; top: 0; } .pa-apercu-cadre { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-height: min(calc(var(--fenetre) * .62), 640px); overflow-y: auto; padding: 10px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-md); transition: opacity var(--motion-fast) var(--ease-out); } .pa-apercu-cadre--calcul { opacity: .7; } .pa-apercu-cadre .partage-apercu { border: 0; } .pa-jointes { display: flex; flex-direction: column; gap: 10px; } .pa-apercu-vide { margin: 0; padding: 36px 12px; text-align: center; font-size: var(--text-sm); color: var(--muted-foreground); } .pa-rendu .partage-gestes { margin: 12px 0 8px; } /* 30/09/2026 : ce que le partage montre du trader, dit sous l'aperçu. */ .pa-trader-visible { margin: 8px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); } .pa-rendu .partage-gestes [data-partage-retour] { margin-right: auto; } @media (max-width: 860px) { .partage.partage--large { width: 100vw; max-width: 100vw; max-height: var(--fenetre); border-radius: 0; padding: 16px; } .pa-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pa-rendu { position: static; order: -1; } .pa-apercu-cadre { max-height: calc(var(--fenetre) * .52); padding: 6px; } } /* TROIS FACONS DE CHOISIR UNE TEINTE, sur une ligne de reglage : la pastille (qui ouvre notre nuancier), le code hexadecimal, et les puces de la palette. /!\ **TOUT EST A NOUS, et c'est la raison d'etre de ce bloc** (fondateur, 2026-09-14, capture a l'appui) : `input type="color"` et `select` ouvrent des fenetres dessinees par le NAVIGATEUR -- fond gris, champs R/G/B en anglais, aucune de nos teintes. Aucune feuille de style ne les atteint. On les a donc remplaces, pas rhabilles. */ .choix-teinte { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; position: relative; } .choix-teinte-haut { display: flex; gap: 8px; align-items: center; } /* La pastille qui OUVRE le nuancier : elle montre la teinte en cours. */ .choix-ouvre { width: 64px; height: 34px; padding: 0; cursor: pointer; background: var(--teinte); border: 1px solid var(--border-strong); border-radius: var(--radius-md); transition: box-shadow var(--motion-fast) var(--ease-out); } .choix-ouvre:hover, .choix-ouvre[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--ring); } .choix-hex { width: 92px; padding: 7px 9px; text-align: center; text-transform: lowercase; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--foreground); background-color: rgba(255,255,255,0.035); border: 1px solid var(--border-strong); border-radius: 8px; outline: none; } .choix-hex:focus { border-color: var(--ring); } /* /!\ Le code INCOMPLET n'est pas une faute : on le signale sans rien effacer ni corriger pendant la frappe. « #22 » est une couleur en cours d'ecriture. */ .choix-hex--faux { border-color: var(--warning); } /* LE NUANCIER -- le notre. Il flotte sous la pastille, comme les autres fenetres de l'application. */ .nuancier { position: absolute; top: 42px; right: 0; z-index: 30; width: 268px; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(0,0,0,0.55); } /* Le carre saturation / luminosite : la teinte pure en fond, du blanc en travers, du noir vers le bas. Trois couches, aucune image. */ .nuancier-sv { position: relative; height: 132px; border-radius: var(--radius-md); background: var(--fond); cursor: crosshair; touch-action: none; overflow: hidden; } .nuancier-sv-blanc, .nuancier-sv-noir { position: absolute; inset: 0; } .nuancier-sv-blanc { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); } .nuancier-sv-noir { background: linear-gradient(to top, #000, rgba(0,0,0,0)); } .nuancier-viseur { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #fff; border-radius: 50%; background: var(--teinte); box-shadow: 0 0 0 1px rgba(0,0,0,0.5); pointer-events: none; } /* Le curseur des TEINTES : l'arc-en-ciel, dans un `range` habille. */ .nuancier-teintes { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; cursor: pointer; outline: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } .nuancier-teintes::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 18px; border-radius: 4px; background: var(--foreground); border: 1px solid rgba(0,0,0,0.6); cursor: pointer; } .nuancier-teintes::-moz-range-thumb { width: 14px; height: 18px; border-radius: 4px; background: var(--foreground); border: 1px solid rgba(0,0,0,0.6); cursor: pointer; } /* LE TYPE DE TRAIT : trois boutons qui DESSINENT le trait. /!\ Dessine plutot que nomme : « pointilles » se comprend mieux vu qu'ecrit -- et une liste deroulante ouvrirait, la aussi, une fenetre du navigateur. */ .choix-trait { display: flex; gap: 4px; } .trait-choix { width: 46px; height: 26px; padding: 0 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); background-color: rgba(255,255,255,0.035); border: 1px solid var(--border-strong); border-radius: 8px; transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); } .trait-choix svg { width: 100%; height: 8px; } .trait-choix:hover { color: var(--foreground); } .trait-choix[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background-color: rgba(180,168,255,0.10); } /* L'OPACITE, a cote de la teinte : un curseur et son chiffre. */ .choix-opacite { display: flex; align-items: center; gap: 8px; } .choix-opacite input[type=range] { width: 150px; accent-color: var(--accent); cursor: pointer; } .choix-opacite-v { min-width: 42px; text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); } .palette-couleurs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; } .puce-couleur { width: 22px; height: 22px; padding: 0; cursor: pointer; background: var(--puce); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .puce-couleur:hover { transform: scale(1.12); } /* /!\ `puce-couleur` et NON `pastille` : la charte porte deja une `.pastille` (l'etiquette cliquable des filtres), declaree 900 lignes plus bas -- elle gagnait donc toute egalite de specificite et repeignait chaque puce en violet a 6 %. Vu a l'ecran, et tranche par le style CALCULE : la variable etait juste, le fond ne l'etait pas. La teinte EN COURS se marque : sans ce repere, le client ne sait plus laquelle il a choisie des qu'il en essaie une seconde. */ .puce-couleur--choisie { border-color: var(--foreground); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--foreground); } /* /!\ Le selecteur natif est minuscule et colle au bord : on lui donne la taille d'un geste, pas celle d'une case a cocher. */ .choix-couleur { width: 64px; height: 34px; padding: 3px; cursor: pointer; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); } .choix-couleur::-webkit-color-swatch-wrapper { padding: 0; } .choix-couleur::-webkit-color-swatch { border: none; border-radius: 4px; } .choix-couleur::-moz-color-swatch { border: none; border-radius: 4px; } /* ============================================================ `.depli` : UN BLOC QU'ON OUVRE ET QU'ON FERME (2026-09-15) ------------------------------------------------------------ Une barre cliquable, et ce qu'elle cache en dessous. `
` natif : il s'ouvre, se ferme et se prend au clavier sans une ligne de script. /!\ Il est NÉ sur le tableau de bord (« Le fil de ses décisions », sous chaque trader), et le détail d'un trade a demandé le même le jour suivant. Il vit donc dans la charte plutôt qu'en deux exemplaires : deux replis recopiés se ressemblent le jour où on les écrit, et plus jamais ensuite. /!\ Le triangle est en `::before` sur le `summary`, et le marqueur natif est retiré : Safari le dessine ailleurs que Firefox, et deux flèches valent mieux qu'aucune. ============================================================ */ .depli { border-top: 1px solid var(--border); } .depli > summary { list-style: none; cursor: pointer; padding: 10px 2px; font-size: var(--text-body-sm); color: var(--accent); } .depli > summary::-webkit-details-marker { display: none; } .depli > summary::before { content: "\25B8\00a0\00a0"; } .depli[open] > summary::before { content: "\25BE\00a0\00a0"; } .depli-dedans { padding: 2px 0 10px; } /* ⚠️ **LA FRISE N'A PLUS DE STYLES À ELLE** (2026-09-15). Elle en avait deux vies : une grille `auto-fit` de cartes, puis des rangées flex écrites pour l'occasion. Le fondateur a tranché la troisième : « je trouve ça trop gros, inspire-toi de ce qu'on a fait sur le journal ». Le journal ne s'est rien inventé : il pose `.rangees` / `.rangee` + `.rangee-rang` (l'heure), `.rangee-corps` et `.rangee-argent`, la grille à trois colonnes de la charte, avec `.jr-heure` pour la chasse fixe. La frise dit exactement la même chose -- quand, quoi, combien -- donc elle prend exactement les mêmes classes. ⚠️ **NE PAS REFABRIQUER `.frise-*`.** Deux listes de la même chose finissent par ne plus se ressembler : c'est ce qui s'était produit ici, et l'écart se voyait sur la même page à un écran d'intervalle. `.jr-*` reste le préfixe du JOURNAL, et il est réutilisé tel quel, pas recopié. ⚠️ **PLUS DE TEINTE VERTE OU ROUGE SUR LA RANGÉE** : le journal ne colore que le MONTANT (`montant-gain` / `montant-perte`). Un fond coloré sur toute la largeur est ce qui faisait « trop gros ». */ /* Le graphique en BARRES EMPILEES de « Mes analyses » (2026-08-18). ============================================================ Maquette « A », choisie par le fondateur parmi trois (empilees, groupees, divergentes). Une barre par periode : sa HAUTEUR dit combien le trader a analyse, ses trois segments disent ce qu'il en a fait. /!\ Pourquoi les empilees : l'abstention est la decision LA PLUS FREQUENTE (six analyses sur dix sur les donnees reelles du jour). Empilee, elle garde son poids visuel et le volume analyse se lit d'un coup ; groupee, elle devient une barre grise parmi trois et le total disparait. /!\ Chaque barre est un LIEN, comme sa rangee : on clique ce qu'on regarde. C'est aussi pour ca qu'elle porte `data-bulle` -- le meme mecanisme d'infobulle que les rangees de trades, pas un second. */ /* ⚠️ UNE BARRE A UNE LARGEUR BORNÉE (2026-09-22) : `flex: 1 1 0` étirait une période UNIQUE sur toute la largeur du cadre — un bloc vert/rouge/gris de 1 100 px qui ne se lisait plus comme une barre. Au plus 56 px, et les barres se RÉPARTISSENT à intervalles réguliers quand elles sont peu nombreuses ; nombreuses, elles se resserrent comme avant. */ .barres { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 160px; padding: 0 2px; margin-bottom: 26px; } .barre { flex: 0 1 56px; min-width: 0; max-width: 56px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; text-decoration: none; border-radius: 4px 4px 0 0; transition: opacity var(--motion-fast) var(--ease-out); } /* /!\ L'ensemble palit et la barre visee reste pleine : teinter la seule barre survolee ne se voit pas sur une colonne de 6 px de large. */ .barres:hover .barre { opacity: .45; } .barres .barre:hover { opacity: 1; } .barre-pile { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px 3px 0 0; overflow: hidden; /* Une periode VIDE garde sa colonne : un trait suffit a dire qu'elle existe et qu'il ne s'y est rien passe. La faire disparaitre resserrerait les autres. */ min-height: 2px; } .barre-seg { display: block; width: 100%; } .barre-seg--achat { background: var(--success); } .barre-seg--vente { background: var(--error); } .barre-seg--abst { background: rgba(255,255,255,0.13); } /* A5b : un ordre REFUSÉ n'est pas une abstention ; la teinte d'avertissement de la frise (le refus y est déjà jaune), jamais le gris des abstentions. */ .barre-seg--refus { background: var(--warning); } .barre-quand { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: var(--text-2xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Trois barres au plus : il y a de la place autour, la date s'écrit en entier (« septembre 2026 » se coupait en « septembr… » sous une barre de 56 px). */ .barre:first-child:nth-last-child(-n+3) .barre-quand, .barre:first-child:nth-last-child(-n+3) ~ .barre .barre-quand { left: -34px; right: -34px; } .barres-axe { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted-foreground); margin-bottom: 6px; } .barres-legende { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--muted-foreground); } /* /!\ « puce » et non « pastille » : le second appartient aux FILTRES de « Mes trades » (le mot du fondateur, valide sur maquette). Les deux ont coexiste une heure le 2026-08-18, et les pastilles de filtre heritaient des 10 px de ce point de legende -- elles se chevauchaient toutes. Deux objets differents ne partagent pas un nom. */ .puce { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .puce--achat { background: var(--success); } .puce--vente { background: var(--error); } .puce--abst { background: rgba(255,255,255,0.16); } .puce--refus { background: var(--warning); } /* Sous 640 px les etiquettes de date ne tiennent plus sous des colonnes de 8 px : on les retire plutot que de les laisser se chevaucher. L'infobulle les porte toujours. */ @media (max-width: 640px) { .barres { gap: 4px; } .barre-quand { display: none; } /* …sauf quand il y a de la place : trois barres au plus. */ .barre:first-child:nth-last-child(-n+3) .barre-quand, .barre:first-child:nth-last-child(-n+3) ~ .barre .barre-quand { display: block; } } /* La PAGINATION d'une longue liste (2026-08-18). /!\ Elle porte son ETAT en toutes lettres (« analyses 201 a 400 sur 1 894 »), et pas seulement des fleches. Un « suivant » seul ne dit ni ou l'on est, ni combien il reste : le client ne sait pas s'il a tout vu, ce qui est exactement le defaut que la pagination vient corriger. */ .pagination { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .pagination-etat { font-size: var(--text-base); color: var(--muted-foreground); } .pagination-etat strong { color: var(--foreground); font-weight: 600; } /* La RANGEE D'AJOUT : ce qui ouvre le formulaire d'un element de liste (2026-08-18). Remarque du fondateur sur « Ajouter une regle » : « je trouve le bouton pas du tout esthetique ». /!\ Il avait raison, et pas seulement sur le dessin : un bouton PLEIN, de la couleur d'accent, pose au-dessus de la liste, criait plus fort que les regles elles-memes. C'est l'action la plus rare de l'ecran (on ecrit une regle une fois, on relit la liste souvent) et elle portait l'accent le plus vif. /!\ Il descend donc EN BOUT DE LISTE, en pointille : c'est la ligne suivante qu'on n'a pas encore ecrite. Le geste se lit sans qu'aucune couleur ne le reclame, et il est la ou l'oeil finit sa lecture. */ .rangee-ajout { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 10px; padding: 13px 16px; appearance: none; background: none; cursor: pointer; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-family: inherit; font-size: var(--text-base); font-weight: 500; color: var(--muted-foreground); transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out); } .rangee-ajout:hover, .rangee-ajout:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } /* ============================================================ Les GESTES d'un en-tete, et leur menu (2026-08-18) ============================================================ Demande du fondateur : arreter un trader, le dupliquer, voir ses trades « en un clic », « dans l'en-tete, pour que ce soit user-friendly ». Une page « Gerer » entiere a disparu au profit de cette rangee. /!\ `align-items: flex-start` : l'en-tete peut tenir sur deux lignes de titre, les gestes restent en haut, alignes sur la premiere. /!\ `flex-wrap` : cinq boutons plus un menu ne tiennent pas a cote d'un titre sur un ecran etroit. Ils passent a la ligne plutot que de comprimer le titre. */ .e-gestes { /* /!\ `center` depuis le 2026-09-11 : la rangee ne porte plus que des boutons de meme hauteur. La CLE du plugin y est entree (un bloc, plus haut qu'un bouton), et avec `flex-start` les boutons se collaient a son bord SUPERIEUR au lieu de s'aligner sur son milieu. Vu a l'ecran. */ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } /* LES TROIS ENTREES D'UN TRADER (29/09/2026 ; 30/09/2026, fondateur : « au meme format que les autres ») : trois `cle-icone`, comme la cle et le plugin. La page ouverte porte la couleur d'accent. */ .cle-icone.e-entree { text-decoration: none; } .cle-icone.e-entree--ici { border-color: var(--accent-ring-strong); color: var(--accent); background: var(--accent-wash); } /* La cle est un bloc d'ecran ramene dans une barre d'outils : elle y perd sa hauteur de carte, pas ses trois gestes. */ .e-gestes .trader-cle { padding: 5px 10px; margin: 0; } .e-gestes .trader-cle .spec-label { font-size: var(--text-2xs); } /* L'ETAT, dans le titre. C'est la premiere question qu'on se pose en ouvrant la fiche d'un trader — est-ce qu'il tourne ? — et elle n'etait ecrite nulle part. /!\ La pastille est GRISE par defaut et verte seulement si le trader est actif : un point colore qui ne dit rien ne sert a rien. */ .titre-avec-etat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .etat-pastille { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 11px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; color: var(--muted-foreground); } .etat-pastille b { color: var(--foreground); font-weight: 600; } .etat-pastille > span + span::before { content: "·"; margin-right: 8px; color: var(--muted-foreground); } .etat-point { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--disabled-foreground); } .etat-pastille--on .etat-point { background: var(--success); } /* LES ÉTATS D'UN CONTRAT (programme, 11/10/2026) : en ATTENTE (à signer, en préavis) en ambre, ROMPU (faute grave) en rouge ; gris reste « terminé », vert « en vigueur » (`--on`). La couleur n'est jamais seule : le mot est dans la pastille. `--vive` teinte aussi le liseré, pour les pages qui la mettent en avant (Mon programme, le contrat à signer). */ .etat-pastille--attente .etat-point { background: var(--warning); } .etat-pastille--rompu .etat-point { background: var(--error); } .etat-pastille--vive.etat-pastille--on { border-color: color-mix(in srgb, var(--success) 38%, transparent); } .etat-pastille--vive.etat-pastille--attente { border-color: color-mix(in srgb, var(--warning) 40%, transparent); } .etat-pastille--vive.etat-pastille--rompu { border-color: color-mix(in srgb, var(--error) 40%, transparent); } /* AU TELEPHONE, la pastille passe a la ligne ENTRE ses mentions, jamais dedans (02/10/2026) : « Client depuis le / 02/10/2026 » se cassait en deux, coince a cote de « Français ». */ @media (max-width: 720px) { .etat-pastille { flex-wrap: wrap; row-gap: 2px; column-gap: 12px; max-width: 100%; } .etat-pastille > * { white-space: nowrap; } /* Le point median ouvrirait la seconde ligne : l'ecart suffit a separer. */ .etat-pastille > span + span::before { content: none; } } /* ══ LE BADGE DE VERSION, DEVENU LE DECLENCHEUR DU MENU (2026-09-13) ═════════ Demande du fondateur : la liste des versions s'ouvre en cliquant le badge a gauche, et la pastille de droite disparait — elle disait la meme chose au meme moment. /!\ **IL DOIT RESSEMBLER AU RESTE DU BADGE, PAS A UN BOUTON.** Ce qui l'entoure (« Actif », « ES ») est du texte ; un bouton dessine au milieu ferait lire le badge comme une barre d'outils. Il ne se signale qu'au survol et a la mise au point. */ .lentille--badge { display: inline-flex; } .lentille-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 5px; margin: -1px -2px; border-radius: var(--radius-sm); color: var(--muted-foreground); cursor: pointer; transition: background .12s ease, color .12s ease; } .lentille-badge:hover { background: rgba(255, 255, 255, .07); color: var(--foreground); } .lentille-badge:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } /* /!\ Le chevron est DISCRET au repos : c'est la seule chose qui distingue ce morceau du texte voisin, et un chevron plein ferait un bouton. */ .lentille-badge > .chev { font-size: .7em; opacity: .55; } .lentille-badge:hover > .chev { opacity: 1; } /* L'explication, DANS le panneau et non dans une bulle au survol : on la lit au moment ou l'on choisit. /!\ La bulle s'ouvrait au survol, le menu au clic, et la souris est forcement sur le badge au moment du clic : elle se posait par-dessus la liste des versions. */ .v-quoi { margin: 2px 10px 8px; max-width: 34ch; font-size: var(--text-body-sm); color: var(--muted-foreground); line-height: var(--leading-relaxed); } /* Sous la lentille, le badge prend la couleur de l'avertissement : on ne regarde pas la version en service, et ca doit se voir sans lire. */ .lentille-badge--archive { color: var(--warning-text); } /* /!\ Le panneau s'ouvre SOUS le badge, aligne a gauche : ancre a droite comme celui de la rangee de gestes, il sortait de l'ecran a gauche du titre. */ .lentille--badge > .cmd-liste { left: 0; right: auto; } /* /!\ Le separateur « · » du badge ne doit PAS se poser avant le menu : il est deja rendu par la regle generique `span + span`, et le `
` n'est pas un `span`. On le remet a la main pour que « Actif · v1 · ES » garde ses deux points. */ .etat-pastille > details.lentille::before { content: "·"; margin-right: 8px; color: var(--muted-foreground); } /* Le MENU des gestes rares. Un `
` : il s'ouvre, se ferme, se prend au clavier et s'annonce, sans une ligne de script. `menu.js` ne fait que le refermer quand on clique ailleurs — ce que `
` ne sait pas faire seul. /!\ Ce qui vit ici n'y est pas par manque de place : ce sont les gestes qui NE SE DEFONT PAS. Un bouton « Supprimer » aligne a cote de « Dupliquer » est un accident qui attend son heure. */ .menu { position: relative; } /* La fleche que le navigateur ajoute a tout `` n'a pas sa place sur un bouton d'icone : elle doublerait les trois points. */ .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::marker { content: ""; } .menu-panneau { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 18px 44px -16px rgba(0,0,0,0.7); } .menu-item { appearance: none; background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; font-family: inherit; font-size: var(--text-base); font-weight: 500; text-align: left; color: var(--foreground); border-radius: var(--radius-md); transition: background var(--motion-fast) var(--ease-out); } .menu-item:hover, .menu-item:focus-visible { background: var(--muted); } /* /!\ SANS CETTE LIGNE, `hidden` NE CACHE RIEN ICI. Le `display: flex` juste au-dessus est une regle d'AUTEUR, et elle bat le `display: none` que l'agent utilisateur applique a `[hidden]`. Piege deja paye dans ce depot. C'est ce qui permet a `rappel-guide.js` de ne laisser qu'une entree d'onglet dans le menu du point d'interrogation ; ne pas la retirer en croyant nettoyer. */ .menu-item[hidden] { display: none; } .menu-item--danger { color: var(--error); } /* Une ligne de menu qui n'est plus un GESTE mais un ETAT (« demande, en attente », vague 4 C) : meme place, meme hauteur, mais elle ne repond pas au survol -- un element qui s'eclaire sous la souris promet un clic. */ .menu-item--inerte { color: var(--muted-foreground); cursor: default; } .menu-item--inerte:hover { background: none; color: var(--muted-foreground); } /* /!\ Le trait n'est pas decoratif : il separe ce qui se defait de ce qui ne se defait pas. Sous lui, arreter et supprimer. */ .menu-trait { height: 1px; background: var(--border); margin: 5px 4px; } a.menu-item { text-decoration: none; } /* L'HOTE d'un menu ouvert (TVNI-280, 26/09/2026) : `menu.js` pose cette classe sur les ancetres positionnes du menu, le temps qu'il est ouvert. Une carte atténuée (`opacity`) forme un calque à part : sans elle, le panneau passait sous la carte suivante, à demi transparent. Une seule règle pour tous les menus : pas de rustine écran par écran. */ .menu-hote { z-index: 5; opacity: 1 !important; } /* Le titre d'un GROUPE d'entrees, quand le menu en porte deux sortes (le rappel du guide, dans la barre du haut : les ecrans a rejouer, puis le guide ecrit). /!\ UN NOM NEUF, et c'est delibere. La tentation etait de reprendre `.menu-item` en le neutralisant, ou l'un des `.popover-label` d'a cote : une classe partagee par deux objets differents a deja coute deux fois ici, avec des boutons ecrases sans qu'aucun test ne le voie. Ce titre n'est pas cliquable, il n'a donc rien a partager avec une entree. */ .menu-titre { margin: 2px 4px 4px; padding: 0 7px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted-foreground); } /* ============================================================ Les ONGLETS : une page longue coupee en vues (2026-08-18) ============================================================ Demande du fondateur : « je trouve la page Mes Trades tres lourde avec les trois parties ». Le sommaire FAISAIT DEFILER une page de dix mille pixels ; les onglets n'en affichent qu'un tiers a la fois. /!\ Ce n'est PAS un composant de plus : c'est `.seg`, le selecteur segmente deja en place partout (« Tous 3 · Actifs 2 · Desactives 1 » sur la liste des traders), avec le seul ajout dont un onglet a besoin. Le fondateur l'a tranche le 2026-08-18 en montrant ce selecteur : « mets juste les onglets sur ce gabarit-la ». Un premier jet avait duplique `.seg` sous le nom `.onglets`, avec ses propres teintes — deux composants pour un geste, qui auraient diverge. Ce que le modificateur ajoute, et rien de plus : - il ne deborde pas (neuf onglets sur un ecran etroit defilent a plat) ; - il peut suivre le lecteur (`--collant`), pour une page dont un onglet fait dix mille pixels. /!\ Deux facons de dire « celui-la », et `.seg` les porte deja toutes deux : `aria-current="page"` quand l'onglet est une ADRESSE (« Mes trades », ou chaque onglet est une page), `aria-selected` quand il bascule SANS quitter la page (les parties des reglages d'un trader, qui sont UN formulaire et ne peuvent pas se recharger sans perdre ce qui est saisi). /!\ `type="button"` est obligatoire sur la seconde forme : un bouton dans un formulaire l'ENVOIE par defaut, et cliquer un onglet enregistrerait le trader. */ .seg--onglets { /* /!\ `inline-flex`, comme `.seg` : la barre EPOUSE ses onglets au lieu de s'etirer sur toute la largeur. C'est ce que le fondateur a montre en pointant le selecteur « Tous 3 · Actifs 2 · Desactives 1 ». Etiree, une barre de trois onglets laissait huit cents points de pilule vide a droite. `max-width` + `overflow-x` gardent le cas inverse : neuf onglets sur un ecran etroit defilent a plat plutot que de deborder. */ display: inline-flex; vertical-align: top; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; } .seg--onglets::-webkit-scrollbar { height: 0; } .seg--onglets > * { flex: 0 0 auto; } /* /!\ **UN ONGLET QUI PORTE UNE ICONE DEVIENT UNE RANGEE** (2026-09-14, demande du fondateur). Sans contexte flex, le SVG se pose sur la ligne de base du texte et descend sous lui ; et `gap` ne separe que des ELEMENTS, d'ou le `` autour du libelle dans le gabarit — un noeud de texte nu n'aurait rien a espacer. /!\ La regle vise `:has(svg)` : les barres `.seg` SANS icone — les filtres « Tous / Actifs / Desactives », les etats des consignes — gardent exactement le rendu qu'elles avaient. Une barre de filtres n'est pas une barre d'onglets. */ .seg--onglets > *:has(> svg) { display: inline-flex; align-items: center; } /* L'icone accompagne le mot, elle ne se lit pas a sa place : plus pale au repos, au ton du libelle quand l'onglet est choisi ou survole. */ /* /!\ Marge, et non `gap` : cf. la note de `.t-onglets a > svg`. Le libelle reste un noeud de texte NU, que les releves de tests savent lire. */ .seg--onglets > * > svg { flex: 0 0 auto; margin-right: 7px; opacity: .62; transition: opacity .14s; } .seg--onglets > *:hover > svg, .seg--onglets > *[aria-selected="true"] > svg, .seg--onglets > *[aria-current="page"] > svg { opacity: 1; } /* /!\ `top` vaut la hauteur de la barre d'application (56 px), qui est elle-meme collante. Sans cela la barre d'onglets se glisserait DESSOUS et disparaitrait. */ .seg--collant { position: sticky; top: 56px; z-index: 40; } /* ============================================================ Le PERIMETRE : la barre de filtres qui se replie (2026-08-18) ============================================================ Meme demande. Les cinq filtres qui gouvernent toute la page occupaient deux rangees en permanence, sur chacun des trois onglets. Elle se replie sur UNE ligne, et cette ligne continue de DIRE le perimetre. /!\ Le RESUME n'est pas decoratif, il est la condition du repli. Replier une barre de filtres sans rien laisser voir transforme tous les chiffres du dessous en chiffres sans leur cadre -- « +412 $ » sur quoi, sur quelle periode, sur quel trader ? C'est precisement ce que cette page combat depuis le 2026-08-12. Le repli cache les COMMANDES, jamais l'etat. /!\ L'en-tete est un vrai `