/* ============================================================ 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; --text-display-1: 48px; --text-display-2: 36px; --text-display-3: 24px; --text-h4: 18px; --text-body: 14px; --text-body-sm: 13px; --text-caption: 12px; --text-eyebrow: 10px; --text-kpi: 36px; --text-data-cell: 13px; --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. */ --cadre: 1280px; --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. */ --echelle: 1.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; } /* ============================================================ 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--compact { display: inline-block; } .liste--compact > select.saisie, .liste--compact > .liste-bouton { width: auto; padding: 6px 13px 6px 11px; font-size: 13px; 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; } /* Le panneau deplie ne peut pas suivre la largeur d'un bouton compact : « La semaine derniere » y serait coupe. Il repart du bord gauche et prend la place qu'il lui faut. */ .liste--compact > .liste-panneau { right: auto; min-width: 100%; width: max-content; } /* ============================================================ 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%), rgba(18, 20, 29, 0.55); 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: 12.5px; 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; } /* 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: 19px; 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); } /* ============================================================ LE BANDEAU de mise en route (2026-08-30) : la meme liste, mais sur TOUTES les pages de l'espace client, en une ligne au lieu d'une carte. ============================================================ /!\ Il se pose EN HAUT du contenu et prend toute la largeur du `main`, dont il annule le padding lateral par des marges negatives : un bandeau qui s'arrete avant le bord se lit comme une carte, pas comme un bandeau. /!\ AUCUNE regle `display` sur `.bandeau-mer-liste` : le repli passe par l'attribut `hidden`, qu'une regle d'auteur ecraserait (piege connu du depot). Le JS du fragment ne fait que poser/retirer `hidden`. */ .bandeau-mer { margin: -32px -40px 24px; background: linear-gradient(90deg, var(--accent-ring-strong), var(--accent-wash)); border-bottom: 1px solid var(--border); } .bandeau-mer-ligne { display: flex; align-items: center; gap: 14px; padding: 12px 40px; } .bandeau-mer-jauge { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .bandeau-mer-jauge-barre { width: 120px; height: 6px; border-radius: var(--radius-pill); background: var(--border-strong); overflow: hidden; } .bandeau-mer-jauge-barre > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width 320ms var(--ease-out); } .bandeau-mer-compte { font-size: var(--text-body-sm); color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; } .bandeau-mer-texte { flex: 1 1 auto; min-width: 0; } .bandeau-mer-texte b { font-weight: 600; color: var(--foreground); } .bandeau-mer-texte i { font-style: normal; color: var(--muted-foreground); } /* Le replieur est une PASTILLE discrete, pas un lien souligne : pose a cote du bouton plein « Continuer », un souligne brut se lit comme une note de bas de page collee sur un bandeau. Le chevron porte le sens du geste. */ .bandeau-mer-plier { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: none; border: 1px solid var(--border); cursor: pointer; color: var(--muted-foreground); font-size: var(--text-body-sm); font-family: inherit; white-space: nowrap; transition: color 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out); } .bandeau-mer-plier:hover { color: var(--foreground); background: var(--accent-wash); border-color: var(--border-strong); } .bandeau-mer-chevron { width: 12px; height: 12px; flex: 0 0 auto; transition: transform 200ms var(--ease-out); } .bandeau-mer-plier[aria-expanded="true"] .bandeau-mer-chevron { transform: rotate(180deg); } .bandeau-mer-btn { flex: 0 0 auto; padding: 7px 14px; border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); font-size: var(--text-body-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .bandeau-mer-btn:hover { background: var(--accent-hi); } .bandeau-mer-liste { padding: 2px 40px 16px; } /* Sous 900 points la ligne ne tient plus : le texte passe sous la jauge et les deux commandes restent cote a cote, plutot que de se compresser jusqu'a l'illisible. */ @media (max-width: 900px) { .bandeau-mer { margin: -20px -20px 18px; } .bandeau-mer-ligne { flex-wrap: wrap; padding: 12px 20px; } .bandeau-mer-texte { flex-basis: 100%; order: 3; } .bandeau-mer-liste { padding: 2px 20px 16px; } } /* 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 .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; } .trader-carte .trader-cle { padding: 7px 9px; gap: 6px; } /* Le masque ne revient JAMAIS a la ligne : coupe, il se lit comme deux cles. */ .trader-carte .trader-cle code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; } .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: 14px; 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: 17px; 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: 12.5px; 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: 10.5px; 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: 14px; 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: 12px; color: var(--muted-foreground); } .chaine-detail { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--disabled-foreground); } .chaine-montant { margin-top: 7px; font-family: var(--font-mono); font-size: 15px; 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 VERDICT : la reponse a la question qu'on vient poser (2026-08-18). ============================================================ Une bande, pas une rangee de tuiles : le montant a gauche, gros, et ce qui le qualifie a droite, plus petit. C'etait cinq tuiles de meme poids, ou le resultat -- la seule chose qu'un client vient chercher -- se lisait comme le cout de l'analyse. /!\ Le lisere suit le SIGNE du montant, jamais l'etat. Une issue inconnue et une abstention restent neutres : il n'y a pas de montant a annoncer, et un vert sur « aucun trade » se lirait comme un gain. */ .verdict { display: flex; align-items: stretch; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; background: var(--card); } .verdict-gros { flex: 0 0 auto; min-width: 210px; padding: 16px 26px 16px 20px; border-right: 1px solid var(--border); } .verdict-reste { flex: 1 1 380px; display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .verdict-case { padding: 16px 18px; border-left: 1px solid var(--border); } .verdict-case:first-child { border-left: 0; } .verdict-l { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 5px; } .verdict-v { display: block; font-size: 27px; font-weight: 600; line-height: 1.05; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .verdict-case .verdict-v { font-size: 17px; font-weight: 500; } .verdict-v--mot { font-family: var(--font-sans); font-size: 19px; font-weight: 500; } .verdict-n { display: block; font-size: 11.5px; color: var(--muted-foreground); margin-top: 4px; } .verdict--gain { border-color: rgba(60,190,130,0.34); background: rgba(60,190,130,0.05); } .verdict--gain .verdict-gros { border-right-color: rgba(60,190,130,0.30); } .verdict--perte { border-color: rgba(214,90,90,0.34); background: rgba(214,90,90,0.05); } .verdict--perte .verdict-gros { border-right-color: rgba(214,90,90,0.30); } @media (max-width: 720px) { .verdict-gros { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--border); } } /* L'ECHELLE DE PRIX : le trade entier sur un axe (2026-08-18). ============================================================ Maquette « C », choisie par le fondateur parmi trois. Ce qu'elle dit et qu'aucune liste ne disait : les DISTANCES. Trois nombres empiles (5209 / 5200 / 5191) ne montrent pas qu'on risquait exactement ce qu'on visait ; deux zones a l'echelle le montrent sans une phrase. Et quand la sortie tombe sur l'objectif, le point s'y pose tout seul. /!\ Les hauteurs viennent de `performance.echelle_de_prix`, en POURCENTAGES : c'est de l'arithmetique sur des prix, pas de la mise en page. Le CSS ne fait que les poser. /!\ CE PARAGRAPHE DISAIT LE CONTRAIRE JUSQU'AU 2026-08-20, et il faut savoir ce qui l'a fait changer. Il affirmait qu'on gardait les positions vraies « plutot que de les ecarter, ecarter mentirait ». La gestion de position a tranche la question dans les faits : un stop suiveur produit une dizaine de deplacements a quelques ticks les uns des autres, et sept lignes l'une sur l'autre ne montrent RIEN du tout. Un dessin illisible ne dit pas la verite plus fidelement, il ne dit plus rien. Le compromis retenu, et il ne ment pas : le POINT et le TRAIT restent a leur hauteur vraie (`y`), seul le TEXTE se decale du minimum necessaire (`y_etiq` a gauche, `y_texte` a droite). Et avant meme d'ecarter, `performance.etapes_du_trade` REGROUPE : une serie de crans est un seul fait, donc une seule marque. Regrouper d'abord, ecarter ensuite. */ /* /!\ Le CADRE interieur n'est pas une coquetterie : les etiquettes sont centrees sur leur trait (`translateY(-50%)`), donc celle du prix le plus haut deborde de la moitie de sa hauteur au-dessus de `top: 0`. Sans cette marge elle chevauchait le titre de la section, et celle du bas mordait sur la frise. Les pourcentages se lisent DANS ce cadre, ce qui garde les distances exactes. */ .echelle { position: relative; height: 268px; margin: 4px 0 18px; } .echelle-cadre { position: absolute; left: 0; right: 0; top: 26px; bottom: 26px; } .echelle-axe { position: absolute; left: 190px; top: 0; bottom: 0; width: 2px; background: var(--border); } .ech-trait { position: absolute; left: 190px; right: 0; border-top: 1px dashed var(--border); } .ech-etiq { position: absolute; left: 0; width: 178px; text-align: right; transform: translateY(-50%); font-size: 12px; line-height: 1.35; } .ech-etiq b { display: block; font-size: 15px; font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ech-etiq span { display: block; color: var(--muted-foreground); font-size: 11.5px; } .ech-pt { position: absolute; left: 184px; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%); border: 2px solid var(--background); } .ech-pt--stop { background: var(--error); } .ech-pt--objectif { background: var(--success); } .ech-pt--entree, .ech-pt--annulation { background: var(--muted-foreground); } /* Les FAITS remontes par le plugin, colonne de droite. /!\ `right: 184px` reserve la bande ou vivent les libelles de zone. Les deux partageaient la meme colonne, et « risque -98 $ · 2.5 pts » passait par-dessus une marque : vu a l'ecran le 2026-08-20, sur un trade ou le suiveur avait travaille. La zone de risque est MINCE quand le R:R est de 8, donc son libelle tombe pile a hauteur d'entree -- exactement la ou toutes les marques se concentrent. */ .ech-fait { position: absolute; left: 218px; right: 184px; transform: translateY(-50%); font-size: 12px; color: var(--muted-foreground); } .ech-fait b { color: var(--foreground); font-weight: 500; } .ech-zone { position: absolute; left: 192px; right: 0; } .ech-zone--risque { background: rgba(214,90,90,0.07); border-left: 2px solid rgba(214,90,90,0.40); } .ech-zone--gain { background: rgba(60,190,130,0.07); border-left: 2px solid rgba(60,190,130,0.40); } /* /!\ A DROITE, et non a gauche de la zone : voir `.ech-fait` ci-dessus. Le libelle d'une zone n'a pas d'ancrage horizontal naturel -- il decrit une BANDE, pas un point -- donc c'est lui qui cede la colonne aux marques, qui ont un prix a designer. */ .ech-zone-t { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); max-width: 168px; text-align: right; font-size: 11.5px; } /* Sous 720 px l'axe n'a plus la place de porter trois colonnes : les annotations du reel passent SOUS leur etiquette, et le dessin garde ses distances. */ @media (max-width: 720px) { .echelle { height: 330px; } .echelle-axe, .ech-trait { left: 118px; } .ech-zone { left: 120px; } .ech-etiq { width: 106px; } .ech-pt { left: 112px; } .ech-fait { left: 146px; font-size: 11px; } /* Le libelle de zone disparait ici, donc `.ech-fait` reprend toute la largeur : lui laisser la reserve de 184 px la couperait pour rien. */ .ech-fait { right: 8px; } .ech-zone-t { display: none; } } /* La FRISE : les memes etapes, en toutes lettres, sous le dessin. /!\ Elle n'est pas un doublon de l'echelle : le dessin porte les PRIX, la frise porte les HEURES et les durees, qu'aucune hauteur ne peut dire. */ .frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* /!\ Les separateurs sont une OMBRE, pas une bordure, et ce n'est pas un caprice. La grille est en `auto-fit` : elle se replie sur plusieurs rangees des que les cartes sont nombreuses, ce que la gestion de position rend courant. Avec une `border-left`, `:first-child` ne dé-bordait que la premiere carte du DOM -- a partir de la deuxieme rangee, la carte de gauche gardait un trait orphelin, et rien ne separait les rangees. Une ombre portee ne prend AUCUNE place, donc elle ne decale pas la grille ; celles des bords tombent sous la bordure du cadre, que `overflow: hidden` rogne. Et les cellules vides de la derniere rangee restent invisibles, ce qu'un `gap` colore sur fond de bordure n'aurait pas permis : il y aurait dessine un bloc gris. */ .frise-e { padding: 11px 14px; box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); } .frise-q { font-size: 13px; font-weight: 500; } .frise-h { font-size: 11.5px; color: var(--muted-foreground); margin-top: 3px; font-variant-numeric: tabular-nums; } .frise-e--gain { background: rgba(60,190,130,0.06); } .frise-e--perte { background: rgba(214,90,90,0.06); } /* 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. */ .barres { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 0 2px; margin-bottom: 26px; } .barre { flex: 1 1 0; min-width: 0; 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); } .barre-quand { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barres-axe { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-foreground); margin-bottom: 6px; } .barres-legende { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 12px; 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); } /* 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; } } /* 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: 13px; 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: 13px; 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 { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } /* 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: 12.5px; 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); } /* 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: 13px; 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); } /* /!\ 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; } /* 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: 11px; 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; } /* /!\ `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 `