/* ── Tokens design system - partagés entre toutes les pages ── */ :root { --blue: #018ffa; --blue-dk: #0075d1; /* Fond des boutons PLEINS à texte blanc. Distinct de --blue, qui sert AUSSI de couleur de texte et s'éclaircit donc en thème sombre : l'employer en fond y donnait du blanc sur bleu clair, à 2,62:1. */ --btn-primaire: var(--blue); --btn-primaire-h: var(--blue-dk); --blue-50: #e8f4ff; --blue-100: #bfdfff; --gold: #feb019; --pink: #db2777; /* rose - zone Investir / argent réel */ --teal: #14b8a6; /* accent secondaire (2026-07-17) : liserés, points, remplissages */ --teal-dk: #0f766e; /* aplats à texte blanc (badges, boutons), textes teal */ --teal-50: #e6f6f4; /* fonds doux */ --teal-100: #9fd9d1; /* bordures douces */ /* ══ REPÈRE DE DOMAINE - palette A (2026-08-11) ═══════════════════════ Une couleur par grande partie du site, en RENFORCEMENT du repère : c'est l'icône et le nom écrit qui identifient. Mesuré : sur les deux thèmes et en protanopie/deutéranopie, cinq accents ne dépassent pas ΔE 8,5 - trop juste pour porter seuls l'information. Ne jamais y porter un chiffre financier. */ --dom-marche: #0163b8; --dom-marche-lo: #e6f1fb; /* Section « Analyser » - listes ET stratégies (décision 2026-08-16) : une seule teinte pour toute la section. --dom-liste en est l'alias historique, conservé parce qu'il est cité dans beaucoup de règles. */ --dom-analyser: #0f766e; --dom-analyser-lo: #e2f4f1; --dom-liste: #0f766e; --dom-liste-lo: #e2f4f1; --dom-strat: #6d28d9; --dom-strat-lo: #f0eafd; --dom-prod: #be185d; --dom-prod-lo: #fdeaf2; --dom-patri: #334155; --dom-patri-lo: #eef1f5; --navy: #0f172a; --text: #013A6B; --text-2: #374151; --text-3: #64748b; --text-4: #94a3b8; --bg: #f1f5f9; --surface: #ffffff; --border: #e2e8f0; --border-lt: #e1e7ee; /*#f1f5f9;*/ --r: 12px; --r-sm: 8px; --sh-sm: 0 2px 6px rgba(0,0,0,.07); --sh: 0 4px 12px rgba(0,0,0,.09); --tr: .18s cubic-bezier(.4,0,.2,1); } /* ── `hidden` signifie CACHÉ, toujours ───────────────────────────────────── L'attribut `hidden` ne tient son `display:none` que de la feuille de style du navigateur : n'importe quelle règle de classe posant un `display` le neutralise en silence. Le piège s'est reproduit dix-huit fois dans huit feuilles (menus, champs de formulaire, options d'ordre, boutons d'archétype…), chaque fois rattrapé après coup. Une seule règle globale suffit, et aucune feuille du site n'affiche volontairement un élément porteur de `hidden`. */ [hidden] { display: none !important; } /* ── Thème SOMBRE : on ne redéfinit QUE les tokens (les composants passent toujours par les tokens). Défaut = préférence système ; l'interrupteur (data-theme sur ) prime dans les deux sens. ─────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blue:#4aa6f2; --blue-dk:#2f8ae0; --blue-50:#13293c; --blue-100:#284c66; --btn-primaire:#2f8ae0; --btn-primaire-h:#2673bc; --gold:#e0a94a; --pink:#f472b6; --teal:#2dd4bf; --teal-dk:#14b8a6; --teal-50:#0f2b29; --teal-100:#1f4a45; /* Repère de domaine - nuances claires, lisibles sur --surface #131f2b */ --dom-marche:#4aa6f2; --dom-marche-lo:#13293c; --dom-analyser:#2dd4bf; --dom-analyser-lo:#0f2b29; --dom-liste: #2dd4bf; --dom-liste-lo: #0f2b29; --dom-strat: #a78bfa; --dom-strat-lo: #221b3a; --dom-prod: #f472b6; --dom-prod-lo: #331726; --dom-patri: #94a3b8; --dom-patri-lo: #1c2733; --navy:#e8eff5; --text:#e8eff5; --text-2:#c3d0db; --text-3:#98a8b6; --text-4:#6f8291; --bg:#0c1420; --surface:#131f2b; --border:#26333f; --border-lt:#223039; --sh-sm:0 2px 6px rgba(0,0,0,.4); --sh:0 8px 20px rgba(0,0,0,.55); } } :root[data-theme="dark"] { --blue:#4aa6f2; --blue-dk:#2f8ae0; --blue-50:#13293c; --blue-100:#284c66; --btn-primaire:#2f8ae0; --btn-primaire-h:#2673bc; --gold:#e0a94a; --pink:#f472b6; --teal:#2dd4bf; --teal-dk:#14b8a6; --teal-50:#0f2b29; --teal-100:#1f4a45; /* Repère de domaine - nuances claires, lisibles sur --surface #131f2b */ --dom-marche:#4aa6f2; --dom-marche-lo:#13293c; --dom-analyser:#2dd4bf; --dom-analyser-lo:#0f2b29; --dom-liste: #2dd4bf; --dom-liste-lo: #0f2b29; --dom-strat: #a78bfa; --dom-strat-lo: #221b3a; --dom-prod: #f472b6; --dom-prod-lo: #331726; --dom-patri: #94a3b8; --dom-patri-lo: #1c2733; --navy:#e8eff5; --text:#e8eff5; --text-2:#c3d0db; --text-3:#98a8b6; --text-4:#6f8291; --bg:#0c1420; --surface:#131f2b; --border:#26333f; --border-lt:#223039; --sh-sm:0 2px 6px rgba(0,0,0,.4); --sh:0 8px 20px rgba(0,0,0,.55); } html { background: var(--bg); } body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } /* --------------------------------------------------------------------------- Badge d'environnement Saxo - convention UNIFIÉE sur tout le site : VERT = simulation (Saxo SIM), ROSE = argent réel (Saxo Live). Utilisé partout où l'on AFFICHE l'environnement (hub, mes productions, transmissions, modales…). Ne pas recréer de variantes locales. --------------------------------------------------------------------------- */ .saxo-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; line-height: 1.5; vertical-align: middle; } /* Teintes DÉRIVÉES de la surface courante : la convention de couleur est conservée (vert = simulation, rose = réel, bleu = email), mais le fond suit le thème - en dur, ces pastilles restaient des taches claires dans les tableaux et les modales en thème sombre. Encre éclaircie en sombre. */ .saxo-badge-sim { background: color-mix(in srgb, #12813f 16%, var(--surface)); color: #12813f; border: 1px solid color-mix(in srgb, #12813f 38%, var(--surface)); } .saxo-badge-live { background: color-mix(in srgb, #db2777 14%, var(--surface)); color: #b81b5f; border: 1px solid color-mix(in srgb, #db2777 38%, var(--surface)); } /* Gestion des ordres PAR EMAIL (aucune transmission au courtier) : BLEU, même gabarit que les badges Saxo pour que la ligne « Gestion des ordres » ait la même allure quel que soit le mode. */ .saxo-badge-email { background: color-mix(in srgb, var(--blue) 16%, var(--surface)); color: #0b5394; border: 1px solid color-mix(in srgb, var(--blue) 38%, var(--surface)); } :root[data-theme="dark"] .saxo-badge-sim { color: #35c46a; } :root[data-theme="dark"] .saxo-badge-live { color: #f472b6; } :root[data-theme="dark"] .saxo-badge-email { color: #5db0ef; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .saxo-badge-sim { color: #35c46a; } :root:not([data-theme="light"]) .saxo-badge-live { color: #f472b6; } :root:not([data-theme="light"]) .saxo-badge-email { color: #5db0ef; } } /* ── Capsule glissante des contrôles segmentés (segment_glisse.js, 2026-09-07) ── Le conteneur [data-glisse] porte une .seg-pill absolue qui glisse vers le bouton actif ; le bouton actif ne peint plus son propre fond (il passe devant la capsule). */ [data-glisse] { position: relative; isolation: isolate; } [data-glisse] > .seg-pill { position: absolute; z-index: 0; border-radius: 999px; opacity: 0; background: var(--seg-pill, var(--blue, #018ffa)); pointer-events: none; } [data-glisse] > .seg-pill.seg-pill-anime { transition: left .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1), opacity .15s; } [data-glisse] > button { position: relative; z-index: 1; } [data-glisse] > button.active, [data-glisse] > button.actif { background: transparent !important; } /* ── Anneau « note sur 100 » PARTAGÉ (2026-09-09) : tableau de composition de /liste, colonne Note de /marches et de /favoris. Piloté par --pct (0-100) et la bande ok/moy/bas (70/50). Dessin identique à l'anneau de /mes_listes (30 px) en 28 px, pour tenir dans une ligne de tableau. ── */ .note-anneau { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; background: conic-gradient(var(--note-c, var(--blue)) calc(var(--pct, 0) * 1%), var(--border-lt, var(--border)) 0); } .note-anneau::before { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--surface, #fff); } .note-anneau-val { position: relative; font-size: .66rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); } .note-anneau.ok { --note-c: #12a35a; } .note-anneau.moy { --note-c: #eaa11a; } .note-anneau.bas { --note-c: #d0473d; } /* ── Note de LISTE = chiffre + JAUGE horizontale (2026-09-10, style « C » choisi par François) : se distingue de l'anneau .note-anneau réservé aux notes des TITRES. Piloté par --pct (0-100) et --note-c (bleu par défaut). Tailles : .note-jauge-sm (tableaux), .note-jauge-md (tuile du rail), .note-jauge-lg (vue). ── */ .note-jauge { display: inline-flex; flex-direction: column; gap: 3px; width: 64px; vertical-align: middle; } .note-jauge b { font-size: .86rem; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; text-align: left; } .note-jauge i { display: block; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; } .note-jauge i::before { content: ''; display: block; height: 100%; width: calc(var(--pct, 0) * 1%); border-radius: 999px; background: var(--note-c, var(--blue)); } .note-jauge-md { width: 62px; gap: 4px; } .note-jauge-md b { font-size: 1.2rem; } .note-jauge-md i { height: 6px; } .note-jauge-lg { width: 128px; gap: 6px; } .note-jauge-lg b { font-size: 1.7rem; } .note-jauge-lg i { height: 8px; }