:root { /* v0.9.400 — THÈME NOIR (option « sombre »). Monochrome : fonds noirs, accent BLANC. Le vert/rouge ne sert QUE pour le P&L (profit/perte). Plus de vert d'accent. */ --bg: #000000; --bg2: #0c0c0e; --bg3: #161618; --bg4: #202024; --border: rgba(255,255,255,0.10); --border2: rgba(255,255,255,0.18); --text: #f5f5f7; --muted: #9a9aa0; /* WCAG AA fix : #737378 = 4.6:1 sur #000 (was #5c5c63 = 2.2:1, fail) */ --muted2: #737378; /* Sémantiques trading (P&L uniquement) */ --green: #30d158; --green-dim: rgba(48,209,88,0.14); --red: #ff453a; --red-dim: rgba(255,69,58,0.14); --amber: #ff9f0a; --amber-dim: rgba(255,159,10,0.14); --blue: #0a84ff; --blue-dim: rgba(10,132,255,0.14); /* Accent NEUTRE = blanc (sur noir) */ --accent: #ffffff; --accent-l: #ffffff; --accent-d: #d4d4d8; --accent-dim: rgba(255,255,255,0.12); --on-accent: #000000; /* texte/icônes sur fond accent blanc → noir */ --pink: #d4d4d8; --cyan: #0a84ff; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; --font-sans: 'Geist', 'Inter', -apple-system, sans-serif; /* Coins doux (look propre, ni neon ni terminal) */ --r: 10px; --r-sm: 7px; --r-lg: 14px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-card: 0 1px 3px rgba(0,0,0,0.5); --shadow-pop: 0 12px 40px rgba(0,0,0,0.6); --sidebar-bg: #000000; --pill-bg: rgba(255,255,255,0.05); --pill-border: var(--border); --hover-bg: rgba(255,255,255,0.06); --active-bg: rgba(255,255,255,0.10); color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════════════════════ v0.9.240 — LIGHT MODE (palette douce slate/blue, style Linear/Notion) Activé via `` (géré dans theme.js). Principes : - Pas de blanc pur agressif → tons gris bleutés (slate) doux à l'œil - Surfaces différenciées : sidebar (plus claire) vs main (encore plus clair) vs cards (blanc) - Ombres subtiles sur les cards/inputs pour donner de la profondeur - Couleurs sémantiques (green/red/amber) assombries pour contraste sur clair - Accents brand (violet) inchangés (le violet var(--accent) rend bien sur clair) ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* v0.9.244 : palette PURE GRAYSCALE (pas de bleu, pas de slate) — nuances de gris/blanc neutre. Plus minimaliste, "papier" propre. bg = sidebar (gris clair) bg2 = main content ("page" gris plus clair) bg3 = cards, inputs (blanc pur) bg4 = chips, badges hover, états actifs (gris medium) */ /* v0.9.401 — BLANC défaut. Page en GRIS clair, cartes BLANCHES → séparation nette (avant : page et cartes toutes deux blanches = trop fade, zéro contraste). */ --bg: #fbfbfc; /* sidebar quasi-blanc */ --bg2: #eef0f2; /* page = gris clair (les cartes blanches ressortent) */ --bg3: #ffffff; /* cards blanc pur */ --bg4: #e4e6e9; /* chips / états */ /* Borders plus marquées (avant trop pâles) */ --border: rgba(0, 0, 0, 0.14); --border2: rgba(0, 0, 0, 0.24); /* Texte : contraste max */ --text: #0d0d0f; --muted: #5a5a61; --muted2: #8a8a91; /* Couleurs sémantiques trading — assombries pour contraste fond clair */ --green: #15803d; /* emerald-700 */ --green-dim: rgba(21,128,61,0.10); --red: #b91c1c; /* red-700 */ --red-dim: rgba(185,28,28,0.10); --amber: #b45309; --amber-dim: rgba(180,83,9,0.12); --blue: #1e40af; /* blue-800 (juste pour Entry trade) */ --blue-dim: rgba(30,64,175,0.10); /* Accent NEUTRE = noir (sur blanc). Plus de vert d'accent. v0.9.400 */ --accent: #111111; --accent-l: #333333; --accent-d: #000000; --accent-dim: rgba(0,0,0,0.06); --on-accent: #ffffff; /* texte/icônes sur fond accent noir → blanc */ --pink: #111111; --cyan: #1e40af; /* Surfaces sidebar / pill — pur grayscale */ --sidebar-bg: #fbfbfc; --pill-bg: rgba(0,0,0,0.04); --pill-border: rgba(0,0,0,0.12); --hover-bg: rgba(0,0,0,0.05); --active-bg: rgba(0,0,0,0.08); /* v0.9.265 — ombres douces adaptées au clair (plus légères que le dark) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.08); --shadow-pop: 0 12px 40px rgba(0,0,0,0.18); color-scheme: light; } /* ───────────────────────────────────────────────────────────────────────────── Ajustements light mode : ombres + différenciation visuelle des surfaces ───────────────────────────────────────────────────────────────────────────── */ /* Page = bg2 doux (le plus clair des slate) */ [data-theme="light"] body { background: var(--bg2); } /* Overlays modales : voile noir grayscale */ [data-theme="light"] .modal-overlay, [data-theme="light"] .consent-modal { background: rgba(0, 0, 0, 0.45); } /* Cards / surfaces principales : ombres grayscale v0.9.244 */ [data-theme="light"] .metric-card, [data-theme="light"] .info-card, [data-theme="light"] .settings-section, [data-theme="light"] .level-card, [data-theme="light"] .goal-card, [data-theme="light"] .trade-item, [data-theme="light"] .modal-card, [data-theme="light"] .modal, [data-theme="light"] .login-card, [data-theme="light"] .consent-modal-box, [data-theme="light"] .contact-panel, [data-theme="light"] .dash-empty, [data-theme="light"] .page-section, [data-theme="light"] .ico-btn { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); border: 1px solid var(--border); } [data-theme="light"] .trade-item:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } [data-theme="light"] .toast { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06); } [data-theme="light"] .form-input, [data-theme="light"] .ac-input, [data-theme="light"] .pro-code-input { background: var(--bg3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); } [data-theme="light"] .form-input:focus, [data-theme="light"] .ac-input:focus, [data-theme="light"] .pro-code-input:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(140,140,150,0.15); } /* Sidebar — gérée via --sidebar-bg dans :root + [data-theme="light"]. Bordure reste sur le sélecteur principal `.sidebar { border-right: ... }`. */ /* v0.9.245 : Contact bubble — ombre violette douce, sans halo blanc */ [data-theme="light"] .contact-bubble { background: var(--accent); border: none; box-shadow: 0 4px 14px rgba(140,140,150, 0.30), 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="light"] .contact-bubble:hover { box-shadow: 0 6px 18px rgba(140,140,150, 0.42), 0 2px 6px rgba(0, 0, 0, 0.10); } /* Dot online : bordure blanche (matche le futur fond du bouton) pour bien le séparer */ [data-theme="light"] .contact-bubble-dot { border-color: #ffffff; } /* v0.9.242 : Topbar — différenciation visuelle vs main content en light */ [data-theme="light"] .topbar { background: var(--bg); border-bottom: 1px solid var(--border); } /* Sidebar stats values readable on light pill background */ [data-theme="light"] .sidebar-stats { color: var(--text); } [data-theme="light"] .user-pill-name, [data-theme="light"] .user-pill-avatar { color: var(--text); } /* Boutons primaires — ombre violette pour le pop sur fond clair */ [data-theme="light"] .btn-primary, [data-theme="light"] .login-btn, [data-theme="light"] .new-trade-btn { box-shadow: 0 2px 6px rgba(140,140,150, 0.28), 0 1px 2px rgba(0, 0, 0, 0.05); } /* v0.9.243 : Chips/segments — fond bg2 sur container (pour les distinguer du card blanc parent), border marquée, hover bg4 plus prononcé. */ [data-theme="light"] .seg-control { background: var(--bg2); border: 1px solid var(--border); } [data-theme="light"] .filter-chip:hover, [data-theme="light"] .seg-btn:hover { background: var(--bg4); color: var(--text); } [data-theme="light"] .filter-chip, [data-theme="light"] .seg-btn { color: var(--text); /* texte plus foncé que --muted pour lisibilité */ } [data-theme="light"] .filter-chip.active, [data-theme="light"] .seg-btn.active { background: rgba(140,140,150,0.16); color: var(--accent-d); } /* v0.9.243 : Recherche topbar — fond bg3 contrasté avec border marquée */ [data-theme="light"] .search-wrap { background: var(--bg3); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15,23,42,0.04); } /* v0.9.243 : Badges (LONG/SHORT, Gain/Perte) — borders + fonds saturés pour qu'ils restent lisibles sur background clair */ [data-theme="light"] .trade-dir-badge, [data-theme="light"] .trade-outcome-badge, [data-theme="light"] .dir-badge, [data-theme="light"] .badge { border: 1px solid currentColor; font-weight: 600; } /* Loader / skeleton shimmer adapté light mode (vu sombre sur clair sinon) */ [data-theme="light"] .page-skeleton .skl-bar { background: linear-gradient(90deg, var(--bg4) 0%, var(--bg3) 50%, var(--bg4) 100%); } /* Scroll bars grayscale */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); } /* Login — gradient gris doux (sans teinte bleue). Le loader (.zt-loader) reste un splash sombre dans les deux thèmes (cf. bloc LOADER-UI). */ [data-theme="light"] .login-screen, [data-theme="light"] .auth-screen { background: linear-gradient(160deg, #f0f0f0 0%, #f7f7f7 60%, #ffffff 100%); } /* v0.9.244 : Force visibilité logos en light mode (overrides éventuels) */ [data-theme="light"] .logo-text { color: var(--text); } [data-theme="light"] .logo-mark { color: #ffffff; } /* svg stroke=currentColor → blanc sur fond violet */ [data-theme="light"] .logo-mark svg { color: #ffffff; stroke: #ffffff; } [data-theme="light"] .login-logo-mark svg { color: #ffffff; } [data-theme="light"] .lp-nav-logo-mark { color: #ffffff; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Focus visible — WCAG 2.1 AA (clavier & lecteurs d'écran) ─── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* Éléments avec leur propre shape */ .btn-primary:focus-visible, .login-btn:focus-visible, .new-trade-btn:focus-visible { border-radius: var(--r); } .modal:focus-visible { outline: none; } /* modale gère son propre focus */ /* Réduction motion : supprime l'outline animé si besoin */ @media (prefers-reduced-motion: reduce) { :focus-visible { transition: none; } } body { font-family: 'Geist', sans-serif; background: var(--bg); color: var(--text); /* 100dvh = dynamic viewport height, évite le bug Safari mobile avec la barre d'adresse */ height: 100dvh; display: flex; overflow: hidden; font-size: 13px; line-height: 1.4; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; } /* ─── Touch — suppression du 300ms tap delay sur mobile ─── */ a, button, [role="button"], [tabindex] { touch-action: manipulation; } /* ─── Utilitaires accessibilité ─── */ /* Visually hidden : visible pour les lecteurs d'écran, invisible visuellement */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip link a11y — invisible par défaut, visible au focus clavier uniquement */ .skip-link { position: absolute; top: -100px; left: 8px; z-index: 9999; padding: 8px 16px; background: var(--accent); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; transition: top 0.15s; } .skip-link:focus { top: 8px; } /* ─── SIDEBAR ─── */ .sidebar { width: 220px; min-width: 220px; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 10; } .logo { padding: 22px 20px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .logo-mark { width: 28px; height: 28px; background: var(--accent); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-mark svg { width: 16px; height: 16px; display: block; stroke: #fff; } .logo-text { font-family: 'Geist Mono', monospace; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; color: var(--text); } .nav { padding: 10px; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; color: var(--muted); font-size: 13px; transition: all 0.15s; margin-bottom: 3px; user-select: none; border: none; background: transparent; width: 100%; text-align: left; } .nav-item svg { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .nav-item:hover { color: var(--text); background: var(--hover-bg); } .nav-item.active { color: var(--accent); background: var(--active-bg); font-weight: 500; } .nav-item.active svg { color: var(--accent); } .nav-divider { height: 1px; background: var(--border); margin: 8px 0; } /* v0.9.262 — libellé de groupe dans la nav (ex. « Analyse ») */ .nav-group-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); opacity: 0.6; padding: 10px 12px 4px; } .sidebar-stats { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .stat-row { display: flex; justify-content: space-between; align-items: center; } .stat-label { font-size: 11px; color: var(--muted); } .stat-val { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; } .new-trade-btn { margin: 12px 12px 16px; background: var(--accent); color: #fff; border: none; border-radius: var(--r); padding: 10px 0; min-height: 44px; box-shadow: 0 4px 14px rgba(140,140,150,0.35); font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; width: calc(100% - 24px); display: flex; align-items: center; justify-content: center; gap: 6px; transition: opacity 0.15s, transform 0.1s; flex-shrink: 0; } .new-trade-btn:hover { opacity: 0.9; } .new-trade-btn:active { transform: scale(0.98); } /* ─── MAIN ─── */ .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .topbar { height: 56px; min-height: 56px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0; } /* v0.9.271 — en-tête riche : titre + sous-titre contextuel */ .topbar-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; } .topbar-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; } .topbar-subtitle { font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v0.9.270 — bouton aide (?) dans l'en-tête (Guide sorti de la nav) */ .topbar-help-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border2); background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .topbar-help-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--active-bg); } .search-wrap { display: flex; align-items: center; gap: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; width: 220px; } .search-wrap svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; } .search-wrap input { background: none; border: none; outline: none; color: var(--text); font-family: 'Geist', sans-serif; font-size: 12px; width: 100%; } .search-wrap input::placeholder { color: var(--muted); } /* v0.9.304 — Centre de notifications (cloche à droite de la recherche) */ .notif-wrap { position: relative; flex-shrink: 0; } .notif-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border2); background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.15s; } .notif-btn svg { width: 15px; height: 15px; } .notif-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--active-bg); } .notif-btn.has-unread { color: var(--accent); border-color: var(--accent); } .notif-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg2); } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 32px); max-height: 60vh; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); z-index: 1000; display: flex; flex-direction: column; overflow: hidden; } .notif-panel[hidden] { display: none; } /* sinon display:flex écrase l'attribut hidden */ .notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; } .notif-clear { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 11.5px; font-family: inherit; transition: color 0.15s; } .notif-clear:hover { color: var(--accent); } .notif-list { overflow-y: auto; flex: 1; } .notif-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.35; } .notif-item:last-child { border-bottom: none; } .notif-item.unread { background: var(--active-bg); } .notif-item.error { border-left: 3px solid var(--red); } .notif-item-msg { color: var(--text); word-break: break-word; } .notif-item-time { color: var(--muted); font-size: 10.5px; } .notif-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 12px; } /* ═══ v0.9.267 — DÉTAILS « PRO » (scrollbars fines, sélection accent, lissage typo) ═══ */ * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted2); background-clip: padding-box; } ::selection { background: rgba(140,140,150,0.30); color: var(--text); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ─── PAGES ─── */ .page { display: none; flex: 1; overflow: hidden; min-height: 0; } /* v0.9.238 : fade-in léger au switch page (perçu plus pro) */ .page.active { display: flex; animation: page-fade-in 180ms ease-out; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page.active { animation: none; } } /* ─── JOURNAL ─── */ .journal-layout { display: flex; width: 100%; overflow: hidden; } .trade-list { width: 310px; min-width: 310px; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .list-filters { padding: 10px 10px 8px; display: flex; gap: 5px; flex-wrap: wrap; border-bottom: 1px solid var(--border); flex-shrink: 0; } .chip { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); color: var(--muted); background: transparent; transition: all 0.12s; font-family: 'Geist', sans-serif; } .chip:hover { color: var(--text); border-color: var(--border2); } .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } .list-body { flex: 1; overflow-y: auto; padding: 10px 0; } /* v0.9.266 — refonte : chaque trade devient une carte douce (plus d'air, pas de lignes dures) */ .trade-item { padding: 12px 14px; margin: 0 10px 8px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--border); cursor: pointer; transition: all 0.12s; display: flex; gap: 10px; align-items: stretch; } .trade-item:hover { background: var(--bg3); border-color: var(--border2); } .trade-item.selected { background: var(--active-bg); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .trade-bar { width: 3px; border-radius: 99px; flex-shrink: 0; min-height: 40px; } .trade-item-body { flex: 1; min-width: 0; } .trade-item-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .trade-instr { font-weight: 600; font-size: 13px; } .dir-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; } .dir-long { background: var(--green-dim); color: var(--green); } .dir-short { background: var(--red-dim); color: var(--red); } .outcome-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; margin-left: auto; } .ob-win { background: var(--green-dim); color: var(--green); } .ob-loss { background: var(--red-dim); color: var(--red); } .ob-be { background: var(--amber-dim); color: var(--amber); } .ob-open { background: var(--blue-dim); color: var(--blue); } .trade-item-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); } .trade-rr { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; margin-left: auto; } .trade-pnl { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; } .trade-setup { font-size: 11px; color: var(--muted2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty-list { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; gap: 10px; color: var(--muted2); padding: 20px; } .empty-list svg { width: 36px; height: 36px; opacity: 0.3; } .empty-list p { font-size: 12px; text-align: center; line-height: 1.6; } /* ─── DETAIL ─── */ .detail-panel { flex: 1; overflow-y: auto; background: var(--bg); } .detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--muted2); } .detail-empty svg { width: 48px; height: 48px; opacity: 0.2; } .detail-empty p { font-size: 13px; } /* v0.9.261 — accueil guidé (compte vide) dans le panneau détail */ .onboarding-card { max-width: 460px; margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; } .onb-hi { font-size: 40px; line-height: 1; margin-bottom: 12px; } .onb-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .onb-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; } .onb-steps { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; } .onb-step { display: flex; gap: 14px; align-items: flex-start; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .onb-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } .onb-step-body { flex: 1; min-width: 0; } .onb-step-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; } .onb-step-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; } .onb-step-desc:last-child { margin-bottom: 0; } .onb-btn { font-size: 13px; padding: 7px 14px; } .detail-content { padding: 28px 28px 60px; } .detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .detail-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .detail-instr { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .detail-date { font-size: 12px; color: var(--muted); margin-top: 5px; } .detail-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* ─── BUTTONS ─── */ .btn-ghost { padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid var(--border2); background: transparent; color: var(--muted); font-family: 'Geist', sans-serif; font-size: 12px; cursor: pointer; transition: all 0.12s; } .btn-ghost:hover { color: var(--text); border-color: var(--border2); background: var(--bg3); } .btn-primary { padding: 8px 16px; border-radius: var(--r-sm); border: none; background: var(--accent); color: #fff; font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.12s; } .btn-primary:hover { opacity: 0.85; } .btn-danger { color: var(--red); border-color: rgba(240,82,79,0.2); } .btn-danger:hover { background: var(--red-dim); color: var(--red); } /* v0.9.179 (A11y) : focus ring uniforme pour tous les boutons clavier-only */ .btn-ghost:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible, .dir-btn:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ─── METRICS ─── */ .metrics-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin-bottom: 22px; } .metric-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-card); } .mc-label { font-size: 10px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; } .mc-val { font-family: 'Geist Mono', monospace; font-size: 20px; font-weight: 600; line-height: 1; } .mc-sub { font-size: 10px; color: var(--muted); margin-top: 4px; } /* ─── LEVELS ─── */ .levels-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .level-card { flex: 1; min-width: 90px; border-radius: var(--r); padding: 12px; text-align: center; } .lc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; opacity: 0.7; } .lc-price { font-family: 'Geist Mono', monospace; font-size: 17px; font-weight: 700; margin-bottom: 3px; } .lc-ticks { font-size: 10px; opacity: 0.5; } .lc-entry { background: var(--blue-dim); border: 1px solid rgba(77,156,255,0.15); color: var(--blue); } .lc-sl { background: var(--red-dim); border: 1px solid rgba(240,82,79,0.15); color: var(--red); } .lc-tp { background: var(--green-dim); border: 1px solid rgba(45,212,160,0.15); color: var(--green); } .lc-exit { background: var(--amber-dim); border: 1px solid rgba(245,166,35,0.15); color: var(--amber); } /* ─── APEX BAR ─── */ .apex-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 12px; margin-bottom: 16px; } .apex-bar svg { width: 14px; height: 14px; flex-shrink: 0; } .apex-bar .apex-right { margin-left: auto; font-size: 11px; color: var(--muted); } .apex-ok { background: var(--green-dim); border: 1px solid rgba(45,212,160,0.2); color: var(--green); } .apex-warn { background: var(--amber-dim); border: 1px solid rgba(245,166,35,0.2); color: var(--amber); } .apex-err { background: var(--red-dim); border: 1px solid rgba(240,82,79,0.2); color: var(--red); } /* ─── INFO CARD ─── */ .info-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-card); } .info-card h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; } .info-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; } .info-row:last-child { margin-bottom: 0; } .info-key { font-size: 12px; color: var(--muted); width: 100px; flex-shrink: 0; } .info-val { font-size: 12px; flex: 1; white-space: pre-wrap; line-height: 1.6; } /* ─── FORMS ─── */ .form-grid { display: grid; gap: 12px; } .form-grid-2 { grid-template-columns: 1fr 1fr; } .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; } .form-field { display: flex; flex-direction: column; gap: 5px; } .form-label { font-size: 11px; color: var(--muted); } .form-input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; color: var(--text); font-family: 'Geist', sans-serif; font-size: 13px; outline: none; transition: border-color 0.15s; -webkit-appearance: none; appearance: none; width: 100%; } /* iOS auto-zoom fix : font-size 16px minimum + touch target 44px sur mobile */ @media (max-width: 768px) { .form-input { font-size: 16px; min-height: 44px; } } .form-input:focus { border-color: rgba(140,140,150,0.6); box-shadow: 0 0 0 3px rgba(140,140,150,0.1); } /* v0.9.239 : toggle thème (auto / dark / light) dans Réglages */ .theme-toggle-group { display: inline-flex; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; } .theme-btn { appearance: none; background: transparent; border: none; padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; border-radius: 6px; transition: background 0.15s, color 0.15s; font-family: inherit; } .theme-btn:hover { color: var(--text); } .theme-btn.is-active { background: var(--accent); color: #fff; } .theme-btn.is-active:hover { color: #fff; } /* v0.9.238 : validation temps réel signup */ .form-input.input-valid { border-color: rgba(34,197,94,0.55); box-shadow: 0 0 0 3px rgba(34,197,94,0.08); } .form-input.input-invalid { border-color: rgba(239,68,68,0.55); box-shadow: 0 0 0 3px rgba(239,68,68,0.08); } .form-input.input-valid:focus { border-color: rgba(34,197,94,0.8); } .form-input.input-invalid:focus { border-color: rgba(239,68,68,0.8); } .form-input.mono { font-family: 'Geist Mono', monospace; } /* v0.9.287 — barre de force du mot de passe (#audit) */ .pwd-strength { margin: -2px 0 10px; } .pwd-strength-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; } .pwd-strength-bar span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.25s ease, background-color 0.25s ease; } .pwd-strength[data-level="1"] #pwdStrengthFill, .pwd-strength span.lvl1 { width: 33%; background: #ef4444; } .pwd-strength[data-level="2"] #pwdStrengthFill, .pwd-strength span.lvl2 { width: 66%; background: #f59e0b; } .pwd-strength[data-level="3"] #pwdStrengthFill, .pwd-strength span.lvl3 { width: 100%; background: #22c55e; } .pwd-strength-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; } .pwd-strength-label { font-size: 11px; font-weight: 600; } .pwd-strength-reqs { font-size: 10.5px; color: var(--muted); text-align: right; line-height: 1.4; } .pwd-req-ok { color: #22c55e; } .pwd-req-miss { color: var(--muted); } select.form-input { cursor: pointer; } textarea.form-input { resize: vertical; min-height: 72px; line-height: 1.5; } .seg-control { display: flex; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; gap: 3px; } .seg-btn { flex: 1; padding: 5px 0; border: none; border-radius: 4px; background: transparent; color: var(--muted); font-family: 'Geist', sans-serif; font-size: 12px; cursor: pointer; transition: all 0.12s; } .seg-btn.active { background: rgba(140,140,150,0.14); color: var(--accent); font-weight: 600; } .live-calc { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .lc-stat { display: flex; flex-direction: column; gap: 2px; } .lc-stat-label { font-size: 10px; color: var(--muted); } .lc-stat-val { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 600; } /* ─── DASHBOARD ─── */ .dash-page { flex: 1; overflow-y: auto; padding: 24px; } .page-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; } .kpi-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: var(--shadow-card); } .kpi-card:hover { border-color: var(--border2); } .kpi-val { font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 700; margin-bottom: 4px; } .kpi-label { font-size: 11px; color: var(--muted); margin-bottom: 2px; } .kpi-sub { font-size: 11px; color: var(--muted2); font-family: 'Geist Mono', monospace; } /* v0.9.273 — sparkline (mini-courbe P&L) en pied de carte KPI */ .kpi-spark { display: block; width: 100%; height: 28px; margin-top: 12px; opacity: 0.75; } .chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 16px; } .chart-card h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px; } .chart-area { height: 220px; position: relative; } /* ─── DASHBOARD SELECTOR ─── */ .dash-selector-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .dash-account-select { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); color: var(--text); font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 500; padding: 9px 36px 9px 14px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a82b8' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; min-width: 200px; transition: border-color 0.15s; } .dash-account-select:hover { border-color: var(--accent); } .dash-account-select:focus { border-color: var(--accent); } .dash-account-select option, .dash-account-select optgroup { background: var(--bg3); color: var(--text); } /* v0.9.396 — sélecteur Focus dans la topbar (compact, app-wide) */ .focus-scope-select { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); color: var(--text); font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 600; padding: 7px 30px 7px 12px; min-height: 40px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a82b8' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; max-width: 220px; flex-shrink: 0; text-overflow: ellipsis; transition: border-color 0.15s; } .focus-scope-select:hover { border-color: var(--accent); } .focus-scope-select:focus { border-color: var(--accent); } .focus-scope-select option, .focus-scope-select optgroup { background: var(--bg3); color: var(--text); } @media (max-width: 768px) { .focus-scope-select { max-width: 140px; font-size: 12px; padding: 6px 26px 6px 10px; } } @media (max-width: 480px) { .focus-scope-select { max-width: 110px; } } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ─── ANALYTICS TABLE ─── */ .a-table { width: 100%; border-collapse: collapse; } .a-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 0 10px; text-align: left; border-bottom: 1px solid var(--border); } .a-table td { padding: 9px 0; font-size: 12px; border-bottom: 1px solid var(--border); color: var(--text); } .a-table td:last-child { text-align: right; } .wr-bar-wrap { display: flex; align-items: center; gap: 8px; } .wr-bar-bg { flex: 1; height: 5px; background: var(--bg4); border-radius: 3px; overflow: hidden; } .wr-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s; } /* ─── SETTINGS ─── */ .settings-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; margin-bottom: 16px; max-width: 600px; box-shadow: var(--shadow-card); } .settings-section h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); gap: 16px; } .settings-row:last-child { border-bottom: none; } /* v0.9.175 : :not(.switch) pour ne pas stretcher le toggle. .settings-row label avait une spécificité (0,2,0) > .switch (0,1,0), donc flex:1 gagnait sur flex:0 0 44px → toggle géant. */ .settings-row label:not(.switch) { font-size: 13px; flex: 1; } .settings-row .form-input { width: 160px; flex: none; } /* ─── MODAL ─── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--bg2); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); width: 560px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(14px); transition: transform 0.2s; box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(140,140,150,0.06); } .modal-overlay.open .modal { transform: translateY(0); } /* ── Trade Wizard ── */ .trade-wizard { width: 460px; max-height: 90vh; overflow-y: auto; padding: 24px; display: block; } .wiz-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .wiz-dots { display: flex; align-items: center; gap: 0; } .wdot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); background: var(--bg2); transition: all 0.25s; flex-shrink: 0; } .wdot.active { border-color: var(--text); background: var(--text); color: var(--bg); } .wdot.done { border-color: var(--green); background: var(--green); color: #000; } .wdot.done::after { content: '✓'; font-size: 11px; } .wdot-line { width: 32px; height: 1.5px; background: var(--border2); transition: background 0.25s; } .wdot-line.done { background: var(--green); } .wiz-pane-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .wiz-dir-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.05em; } /* Step 1 */ .dir-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; } .dir-btn { padding: 36px 16px 28px; border-radius: 12px; border: 1.5px solid var(--border2); background: var(--bg3); color: var(--text); font-family: 'Geist Mono', monospace; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: all 0.18s; } .dir-btn:hover { background: var(--bg4); border-color: var(--border2); transform: translateY(-2px); } .dir-btn.active-long { background: var(--green-dim); border-color: var(--green); color: var(--green); } .dir-btn.active-short { background: var(--red-dim); border-color: var(--red); color: var(--red); } /* Step 2 drop zone */ .wizard-drop-zone { border: 1.5px dashed var(--border2); border-radius: 12px; padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; min-height: 110px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; margin-bottom: 12px; } .wizard-drop-zone:hover { border-color: var(--accent); background: rgba(140,140,150,0.06); } .wizard-drop-zone.has-image { border-color: var(--accent); border-style: solid; } .wizard-drop-zone.dz-dragover { border-color: var(--accent); background: rgba(140,140,150,0.1); border-style: solid; transform: scale(1.01); } .wizard-drop-zone kbd { background: var(--bg3); border: 1px solid var(--border2); border-radius: 3px; padding: 0 4px; font-size: 10px; font-family: inherit; } .wi-clear-btn { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted2); border: none; color: var(--text); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wi-clear-btn:hover { background: var(--red); } .wiz-analysis-status { font-size: 12px; margin-bottom: 8px; } .wiz-analysis-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .wpill { background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-family: 'Geist Mono', monospace; display: flex; align-items: center; gap: 5px; } .wpill span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: 'Geist', sans-serif; } .wpill-sl { border-color: rgba(240,82,79,0.35); } .wpill-tp { border-color: rgba(45,212,160,0.35); } .wpill-edit input[type="number"] { background: transparent; border: none; outline: none; color: var(--text); font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 700; width: 72px; text-align: right; -moz-appearance: textfield; } .wpill-edit input[type="number"]::-webkit-outer-spin-button, .wpill-edit input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } .wpill-edit input[type="number"]:focus { color: var(--accent); } /* Step 3 */ .wiz-text-supplement { margin-bottom: 10px; } .wiz-text-supplement .form-input { font-size: 12px; font-family: 'Geist Mono', monospace; } /* v0.9.261 — indice « capture optionnelle » sous le champ texte de l'étape 2 */ .wiz-skip-hint { font-size: 11px; color: var(--muted); text-align: center; margin: -2px 0 8px; opacity: 0.85; } .wiz-opt-toggle { background: none; border: none; color: var(--muted); font-size: 12px; font-family: inherit; cursor: pointer; padding: 0; margin-top: 8px; display: block; transition: color 0.15s; } .wiz-opt-toggle:hover { color: var(--text); } /* Shared nav */ .wiz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .modal-header { padding: 20px 22px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-title { font-size: 15px; font-weight: 600; } .modal-close { width: 26px; height: 26px; background: var(--bg3); border: none; border-radius: 50%; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.12s; } .modal-close:hover { color: var(--text); } .modal-body { overflow-y: auto; padding: 20px 22px; flex: 1; } .modal-section { margin-bottom: 18px; } .modal-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted2); margin-bottom: 10px; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--bg2); flex-shrink: 0; } /* ─── RECENT TRADE ROW ─── */ .recent-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .recent-row:last-child { border-bottom: none; } .recent-bar { width: 3px; height: 24px; border-radius: 99px; flex-shrink: 0; } .recent-instr { font-weight: 600; width: 40px; font-size: 12px; } .recent-dir { font-size: 11px; width: 40px; } .recent-date { font-size: 11px; color: var(--muted); } .recent-rr { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 11px; } .recent-pnl { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; width: 70px; text-align: right; } /* ─── SETTINGS WIDE ─── */ .settings-section--wide { max-width: none; } .settings-save-row { display: flex; justify-content: flex-end; margin-top: 14px; } /* ─── ACCOUNT CARDS ─── */ .accounts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 4px; } .account-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; } .ac-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .ac-name { background: none; border: none; border-bottom: 1px solid transparent; outline: none; color: var(--text); font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; flex: 1; min-width: 0; padding: 2px 2px; border-radius: 3px; transition: border-color 0.12s; } .ac-name:focus { border-bottom-color: var(--accent); } .ac-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; background: var(--blue-dim); color: var(--blue); padding: 2px 6px; border-radius: 3px; flex-shrink: 0; } .ac-field { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); gap: 8px; } .ac-field:last-child { border-bottom: none; } .ac-label { font-size: 11px; color: var(--muted); flex: 1; } .ac-input { background: var(--bg4); border: 1px solid transparent; border-radius: 4px; padding: 3px 7px; color: var(--text); font-family: 'Geist Mono', monospace; font-size: 12px; outline: none; width: 84px; text-align: right; transition: border-color 0.12s; -webkit-appearance: none; appearance: none; } .ac-input:focus { border-color: var(--border2); } /* ─── MES COMPTES ─── */ .ma-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .ma-row:last-child { border-bottom: none; } .ma-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; } .ma-eval { background: var(--amber-dim); color: var(--amber); } .ma-funded { background: var(--green-dim); color: var(--green); } .ma-name { font-size: 13px; font-weight: 600; min-width: 80px; } .ma-preset { font-size: 11px; color: var(--muted); min-width: 80px; } .ma-stat { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--muted); } .ma-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; } /* ─── OLLAMA / IA ─── */ .ai-section { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 4px; } .ai-input-row { display: flex; gap: 8px; align-items: center; } .ai-btn { padding: 6px 10px; flex-shrink: 0; } .ai-paste-zone { margin-top: 8px; border: 1px dashed var(--border); border-radius: var(--r-sm); padding: 8px 12px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .ai-paste-zone:hover { border-color: var(--accent); background: rgba(255,255,255,0.02); } .ai-paste-zone.has-image { border-color: var(--accent); border-style: solid; } #aiPastePrompt { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 11px; } #aiPastePrompt kbd { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 10px; font-family: inherit; } #aiImagePreview { position: relative; display: inline-block; } #aiPreviewImg { max-width: 100%; max-height: 120px; border-radius: 4px; display: block; margin: 0 auto; } .ai-clear-btn { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted2); border: none; color: var(--fg); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } .ai-clear-btn:hover { background: var(--red); color: #fff; } /* ─── LANDING PAGE ─── */ /* ─── LANDING — DA minimaliste éditoriale ──────────────────────────────────── */ .lp-screen { position: fixed; inset: 0; background: var(--bg); overflow-y: auto; z-index: 2000; } /* ── Nav ── */ .lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 56px; position: sticky; top: 0; background: rgba(13,13,15,0.85); backdrop-filter: blur(16px); z-index: 10; border-bottom: 1px solid rgba(255,255,255,0.04); } .lp-nav-logo { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text); } .lp-nav-logo-mark { width: 26px; height: 26px; background: var(--text); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lp-nav-logo-mark svg { width: 14px; height: 14px; stroke: var(--bg); } .lp-nav-actions { display: flex; gap: 18px; align-items: center; } .lp-nav-link { background: transparent; border: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; padding: 6px 0; transition: color 0.15s; } .lp-nav-link:hover { color: var(--text); } .lp-nav-cta { background: var(--text); color: var(--bg); border: none; padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; font-family: inherit; transition: opacity 0.15s; } .lp-nav-cta:hover { opacity: 0.85; } /* ── Hero ── */ .lp-hero { max-width: 880px; margin: 0 auto; padding: 120px 40px 90px; text-align: center; } .lp-hero h1 { font-size: 56px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 24px; color: var(--text); } .lp-hero p { font-size: 17px; color: var(--muted); max-width: 540px; margin: 0 auto 44px; line-height: 1.6; font-weight: 400; } .lp-cta-group { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 44px; } .lp-cta-btn { padding: 13px 28px; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: opacity 0.15s; border: none; font-family: inherit; } .lp-cta-primary { background: var(--text); color: var(--bg); } .lp-cta-primary:hover { opacity: 0.88; } .lp-cta-text { background: transparent; color: var(--muted); border: none; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; padding: 0; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.15); text-underline-offset: 4px; transition: color 0.15s; } .lp-cta-text:hover { color: var(--text); } .lp-hero-firms { font-size: 12px; color: var(--muted2); letter-spacing: 0.04em; display: flex; gap: 10px; justify-content: center; } .lp-hero-firms span { font-weight: 500; } /* ── Preview app — mockup dashboard ── */ .lp-preview { max-width: 980px; margin: 0 auto; padding: 0 40px 100px; } .lp-preview-frame { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03); } .lp-preview-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); } .lp-preview-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .lp-preview-url { margin-left: 14px; font-size: 11px; color: var(--muted); font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; } .lp-preview-body { padding: 28px 32px; } .lp-preview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 28px; } .lp-preview-stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; font-weight: 500; } .lp-preview-stat-val { font-size: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .lp-preview-chart { height: 140px; margin-top: 4px; } .lp-preview-chart svg { width: 100%; height: 100%; display: block; } /* ── Features ── */ .lp-features { max-width: 980px; margin: 0 auto; padding: 0 40px 100px; } .lp-feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 80px; } .lp-feat-item { display: flex; flex-direction: column; gap: 12px; } .lp-feat-svg { width: 22px; height: 22px; color: var(--text); opacity: 0.85; } .lp-feat-item h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.01em; } .lp-feat-item p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; } /* ── Pricing ── */ .lp-pricing { max-width: 1100px; margin: 0 auto; padding: 0 40px 100px; text-align: center; } .lp-section-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin-bottom: 14px; } .lp-pricing h2 { font-size: 38px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--text); } .lp-pricing-sub { font-size: 15px; color: var(--muted); margin-bottom: 56px; font-weight: 400; } .lp-offers-cards { max-width: 1100px; margin: 0 auto; } .lp-offers-cards .offer-cta { padding: 13px 20px; font-size: 14px; font-weight: 600; } .offer-cta-basic-landing { background: var(--text); color: var(--bg); cursor: pointer; transition: opacity 0.15s; } .offer-cta-basic-landing:hover { opacity: 0.88; } /* ── FAQ ── */ .lp-faq { max-width: 760px; margin: 0 auto; padding: 0 40px 120px; text-align: center; } .lp-faq h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 48px; color: var(--text); } .lp-faq-list { display: flex; flex-direction: column; gap: 32px; text-align: left; } .lp-faq-item h4 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 8px; letter-spacing: -0.01em; } .lp-faq-item p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.65; } /* ── Footer ── */ .lp-footer { border-top: 1px solid var(--border); padding: 36px 40px; } .lp-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .lp-footer-brand { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .lp-footer-cr { font-size: 12px; color: var(--muted2); } .lp-footer-links { display: flex; gap: 24px; flex-wrap: wrap; } .lp-footer-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.15s; } .lp-footer-links a:hover { color: var(--text); } /* ─── RGPD CONSENT — checkboxes signup + modale users existants (v0.9.150) ─── */ .consent-checks { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; text-align: left; } .consent-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.5; /* v1.0.0 hotfix : texte trop pâle → couleur de texte principale (meilleur contraste) */ color: var(--text, #e6edf3); } .consent-label strong { color: var(--text, #e6edf3); font-weight: 600; } .consent-check input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, var(--accent)); } .consent-label a { color: var(--accent-l, var(--accent-l)); text-decoration: underline; } .consent-label a:hover { color: #fff; } /* Consent modal (users existants pre-v0.9.150) */ .consent-modal { position: fixed; inset: 0; z-index: 3500; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; } .consent-modal-box { background: var(--bg2, #161b22); border: 1px solid var(--border, #30363d); border-radius: 12px; padding: 28px; max-width: 480px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.6); } .consent-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--text, #e6edf3); } .consent-intro { margin: 0 0 18px; font-size: 13px; color: var(--muted, #8b949e); line-height: 1.5; } .consent-checks-modal { margin: 0 0 18px; } /* v0.9.396 — wizard de setup obligatoire (profil → firms → instruments) */ .tpm-progress { display: flex; gap: 6px; margin: 0 0 18px; } .tpm-progress span { height: 4px; flex: 1; border-radius: 2px; background: var(--border2, #30363d); transition: background 0.2s; } .tpm-progress span.on { background: var(--accent, var(--accent)); } .tpm-nav { display: flex; gap: 10px; margin-top: 4px; } /* v1.0.0 hotfix : les 2 boutons à parts égales (avant : Retour prenait toute la largeur via width:100% et Continuer/Terminer débordait). */ .tpm-nav .login-btn { flex: 1 1 0; width: auto; min-width: 0; margin-bottom: 0; } .login-btn-ghost { background: transparent; border: 1px solid var(--border2, #30363d); color: var(--text, #e6edf3); box-shadow: none; flex: 0 0 auto; min-width: 96px; width: auto; } .login-btn-ghost:hover { opacity: 1; border-color: var(--accent, var(--accent)); box-shadow: none; } #tpmInstrCats { max-height: 46vh; overflow-y: auto; margin: 0 0 14px; padding-right: 4px; } #tpmFirmPills { margin: 0 0 14px; } /* Toggle switch (Settings → Notifications) */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; /* v0.9.173 : flex:none pour empêcher .settings-row label { flex:1 } de stretcher le toggle (label.switch matchait le sélecteur générique) */ flex: 0 0 44px; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border, #30363d); border-radius: 24px; transition: background 0.2s; } .switch-slider::before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--text, #e6edf3); border-radius: 50%; transition: transform 0.2s; } .switch input:checked + .switch-slider { background: var(--accent, var(--accent)); } .switch input:checked + .switch-slider::before { transform: translateX(20px); } .switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; } /* ─── PASSWORD VISIBILITY TOGGLE (v0.9.149) ─── */ .pwd-toggle-wrap { position: relative; display: block; } .pwd-toggle-wrap .form-input { /* room for the icon on the right */ padding-right: 42px; } .pwd-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: var(--muted, #8b949e); display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: color 0.15s, background 0.15s; } .pwd-toggle:hover { color: var(--text, #e6edf3); background: rgba(255,255,255,0.05); } .pwd-toggle:focus-visible { outline: 2px solid var(--accent-l, var(--accent-l)); outline-offset: 2px; } .pwd-toggle svg { display: block; pointer-events: none; } /* ─── AUTH MODAL (v0.9.146 : fond stylé inspiré landing page) ─── */ .auth-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; /* Fond de base : couleur app */ background: var(--bg); } /* Grid pattern animé en fond */ .auth-modal::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(140,140,150, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,140,150, 0.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, transparent 70%); pointer-events: none; } /* v0.9.405 : glow neutralisé (plus de rose/violet) — vignette très discrète */ .auth-modal::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 600px; background: radial-gradient(ellipse at center, rgba(127,127,127, 0.05) 0%, transparent 60%); filter: blur(40px); pointer-events: none; } @keyframes authGlowDrift { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-48%, -52%) scale(1.06); opacity: 0.9; } } .auth-modal-backdrop { position: absolute; inset: 0; pointer-events: none; /* v0.9.146 : plus de fermeture clic-extérieur */ } .auth-modal-box { position: relative; z-index: 1; } /* ─── LOADER (post-auth) ─── */ /* ─── LOADER-UI (v0.9.318) — écran de chargement animé ───────────────────────── Tout est scopé sous .zt-loader (pas de reset global) → n'affecte que le loader. Vars de couleur réutilisées du thème : --accent / --accent-l / --accent-d / --pink. */ .lp-loader.zt-loader { --l-bg0: var(--bg); /* v0.9.407 : loader suit le thème (blanc en clair, noir en sombre) */ position: fixed; inset: 0; z-index: 2500; display: none; /* affiché en flex par le JS (showLoader) */ background: var(--l-bg0); overflow: hidden; } .zt-loader .stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--l-bg0); } /* v0.9.407 : loader épuré → on masque les orbes/glows colorés */ .zt-loader .orb, .zt-loader .logo-ring { display: none; } .zt-loader .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(140,140,150,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(140,140,150,0.045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%); animation: zt-drift 60s linear infinite; } @keyframes zt-drift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-48px,-48px,0); } } .zt-loader .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none; } .zt-loader .orb-1 { width: 540px; height: 540px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); top: -120px; left: -120px; animation: zt-float-1 24s ease-in-out infinite; } .zt-loader .orb-2 { width: 460px; height: 460px; background: radial-gradient(circle, var(--accent-d) 0%, transparent 70%); bottom: -160px; right: -120px; animation: zt-float-2 28s ease-in-out infinite; } @keyframes zt-float-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,60px) scale(1.15); } } @keyframes zt-float-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-100px,-40px) scale(0.92); } } .zt-loader .core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 40px; opacity: 0; animation: zt-fade-in 600ms 100ms cubic-bezier(.2,.7,.2,1) forwards; } @keyframes zt-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .zt-loader .logo { position: relative; width: 96px; height: 96px; } .zt-loader .logo-tile { width: 100%; height: 100%; border-radius: 22px; background: #15171c; border: 1.5px solid rgba(255,255,255,0.16); box-shadow: var(--shadow-pop); position: relative; overflow: hidden; } [data-theme="light"] .zt-loader .logo-tile { border-color: rgba(0,0,0,0.12); } .zt-loader .logo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-100%); animation: zt-sheen 3.4s ease-in-out infinite; } @keyframes zt-sheen { 0%,30% { transform: translateX(-100%); } 55% { transform: translateX(100%); } 100% { transform: translateX(100%); } } .zt-loader .logo-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .zt-loader .logo-z { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: zt-draw-z 1.4s 0.2s cubic-bezier(.7,.05,.2,1) forwards, zt-z-pulse 2.8s 1.6s ease-in-out infinite; } @keyframes zt-draw-z { to { stroke-dashoffset: 0; } } @keyframes zt-z-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.82; } } .zt-loader .logo-dot { fill: #f472b6; transform-origin: 78px 22px; transform: scale(0); animation: zt-pop-dot 480ms 1.45s cubic-bezier(.34,1.6,.45,1) forwards; } @keyframes zt-pop-dot { 0% { transform: scale(0); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } } .zt-loader .logo-ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(140,140,150,0.18); animation: zt-ring-rotate 12s linear infinite; } .zt-loader .logo-ring::before, .zt-loader .logo-ring::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-l); box-shadow: 0 0 12px var(--accent-l); } .zt-loader .logo-ring::before { top: -2.5px; left: 50%; transform: translateX(-50%); } .zt-loader .logo-ring::after { bottom: -2.5px; left: 50%; transform: translateX(-50%); background: var(--pink); box-shadow: 0 0 12px var(--pink); } @keyframes zt-ring-rotate { to { transform: rotate(360deg); } } .zt-loader .wordmark { display: flex; flex-direction: column; align-items: center; gap: 8px; } .zt-loader .wordmark h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .zt-loader .wordmark .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-l); font-weight: 600; } .zt-loader .status { position: relative; height: 18px; width: 280px; text-align: center; overflow: hidden; } .zt-loader .status-text { position: absolute; inset: 0; font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; transition: opacity 320ms cubic-bezier(.2,.7,.2,1), transform 320ms cubic-bezier(.2,.7,.2,1); opacity: 0; transform: translateY(6px); white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; } .zt-loader .status-text.is-active { opacity: 1; transform: translateY(0); } .zt-loader .status-text .check { display: inline-block; width: 12px; height: 12px; color: #30d158; opacity: 0; animation: zt-check-in 280ms cubic-bezier(.34,1.6,.45,1) forwards; } @keyframes zt-check-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } .zt-loader .progress-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 280px; } .zt-loader .progress { position: relative; width: 100%; height: 3px; background: rgba(140,140,150,0.12); border-radius: 99px; overflow: hidden; } .zt-loader .progress-bar { position: absolute; inset: 0; width: 0%; background: var(--accent); border-radius: 99px; } .zt-loader .progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); transform: translateX(-100%); animation: zt-shimmer 1.6s ease-in-out infinite; } @keyframes zt-shimmer { to { transform: translateX(100%); } } .zt-loader .progress-meta { display: flex; justify-content: space-between; width: 100%; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } .zt-loader .progress-meta .pct { color: var(--accent-l); font-weight: 600; } .zt-loader .corners { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .zt-loader .corner { position: absolute; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; opacity: 0; animation: zt-fade-in 600ms 700ms cubic-bezier(.2,.7,.2,1) forwards; } .zt-loader .corner-tl { top: 28px; left: 32px; } .zt-loader .corner-tr { top: 28px; right: 32px; } .zt-loader .corner-bl { bottom: 28px; left: 32px; } .zt-loader .corner .dot { width: 6px; height: 6px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; animation: zt-pulse-dot 1.8s ease-in-out infinite; } @keyframes zt-pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } .zt-loader.done .progress-bar::after { animation: none; opacity: 0; } .zt-loader.done .status-text { color: var(--text); } .zt-loader.done .logo-tile { box-shadow: 0 18px 50px -12px rgba(140,140,150,0.75), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 0 6px rgba(140,140,150,0.15); transition: box-shadow 400ms; } @media (prefers-reduced-motion: reduce) { .zt-loader .grid, .zt-loader .orb-1, .zt-loader .orb-2, .zt-loader .logo-tile::after, .zt-loader .logo-z, .zt-loader .logo-dot, .zt-loader .logo-ring, .zt-loader .progress-bar::after, .zt-loader .corner .dot { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } .zt-loader .logo-z { stroke-dashoffset: 0; } .zt-loader .logo-dot { transform: scale(1); } } @media (max-width: 480px) { .zt-loader .status, .zt-loader .progress-wrap { width: 240px; } .zt-loader .wordmark h1 { font-size: 24px; } .zt-loader .corner-tl, .zt-loader .corner-tr, .zt-loader .corner-bl { font-size: 9px; } .zt-loader .corner-tl { left: 20px; top: 20px; } .zt-loader .corner-tr { right: 20px; top: 20px; } .zt-loader .corner-bl { left: 20px; bottom: 20px; } } /* ─── SESSION EXPIRÉE ─── */ .session-expired-banner { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); background: var(--amber-dim); border: 1px solid var(--amber); color: var(--amber); padding: 10px 22px; border-radius: var(--r-sm); font-size: 12px; z-index: 9000; animation: slideDown 0.3s ease; } @keyframes slideDown { from { transform: translateX(-50%) translateY(-16px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } @media (max-width: 768px) { .lp-nav { padding: 16px 20px; } .lp-hero { padding: 64px 20px 56px; } .lp-hero h1 { font-size: 36px; } .lp-hero p { font-size: 15px; } .lp-preview, .lp-features, .lp-pricing, .lp-faq { padding-left: 20px; padding-right: 20px; } .lp-preview-stats { grid-template-columns: 1fr 1fr; gap: 18px; } .lp-preview-body { padding: 22px; } .lp-feat-grid { grid-template-columns: 1fr; gap: 36px; } .lp-pricing h2, .lp-faq h2 { font-size: 28px; } .lp-nav-link { display: none; } .lp-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ─── LOGIN SCREEN (legacy, inutilisé mais conservé) ─── */ .login-screen { position: fixed; inset: 0; background: radial-gradient(ellipse at 40% 30%, #1a1a22 0%, #0d0d0f 70%); display: flex; align-items: center; justify-content: center; z-index: 2000; } .login-card { width: 340px; max-width: calc(100vw - 24px); background: var(--bg3); /* v0.9.405 : suit le thème (blanc en clair, sombre en noir) */ border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow-pop); } .login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; } .login-logo-mark { width: 52px; height: 52px; background: var(--accent); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(140,140,150,0.4); } .login-logo-mark svg { width: 34px; height: 34px; display: block; } .login-title { font-size: 20px; font-weight: 600; letter-spacing: 0.06em; } .login-subtitle { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } .login-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .login-error { font-size: 12px; color: var(--red); min-height: 16px; margin-bottom: 6px; } .login-btn { width: 100%; padding: 11px; min-height: 44px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.2s, box-shadow 0.2s; margin-bottom: 14px; box-shadow: 0 4px 16px rgba(140,140,150,0.3); } .login-btn:hover { opacity: 0.88; box-shadow: 0 6px 20px rgba(140,140,150,0.45); } .login-btn:active { opacity: 0.75; } .login-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .login-switch { text-align: center; font-size: 12px; color: var(--muted); } .login-switch span { color: var(--text); text-decoration: underline; cursor: pointer; } /* Loading state */ .login-loader { display: none; flex-direction: column; align-items: center; gap: 28px; } .loader-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; } .loader-user { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } .loader-track { width: 180px; height: 2px; background: var(--border2); border-radius: 1px; overflow: hidden; } .loader-fill { height: 100%; width: 0%; background: var(--text); border-radius: 1px; } /* User pill in sidebar */ .user-pill { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; margin: 0 8px 8px; background: var(--pill-bg); border: 1px solid var(--pill-border); border-radius: var(--r); gap: 8px; } .user-pill-info { display: flex; align-items: center; gap: 8px; min-width: 0; } .user-pill-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-pill-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; /* v0.9.372 (fix B-09) : c'est le NOM qui se tronque, pas le badge de plan */ min-width: 0; } .user-logout-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; flex-shrink: 0; border-radius: 6px; transition: color 0.2s, background 0.2s; } .user-logout-btn:hover { color: var(--red); background: var(--red-dim); } /* ─── DASHBOARD FILTER BAR ─── */ .dash-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .dash-filter-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; color: var(--muted); font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 500; padding: 5px 13px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; white-space: nowrap; } .dash-filter-btn:hover { border-color: var(--border2); color: var(--text); } .dash-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .dash-filter-grp { border-style: dashed; } /* ─── DASHBOARD ACCOUNT CARDS ─── */ .dash-group-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; } .dash-acc-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; } .dac-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; } .dac-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border: 1px solid; border-radius: 3px; flex-shrink: 0; } .dac-name { font-size: 13px; font-weight: 600; margin-left: 7px; } .dac-pnl { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; flex-shrink: 0; opacity: 0.85; } .dac-balance-wrap { text-align: center; padding: 14px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .dac-balance-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .dac-balance { font-family: 'Geist Mono', monospace; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .dac-balance-delta { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; margin-top: 4px; opacity: 0.85; } .dac-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 0; } .dac-kpi { text-align: center; padding: 0 6px; border-right: 1px solid var(--border); } .dac-kpi:last-child { border-right: none; } .dac-kpi-val { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 600; margin-bottom: 2px; } .dac-kpi-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } /* ─── PROGRESS BARS (Apex metrics) ─── */ .dash-progress { margin-bottom: 8px; } .dash-progress:last-child { margin-bottom: 0; } .dp-header { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; } .dp-track { height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; } .dp-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; } /* ─── GROUPES SETTINGS ─── */ .grp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .grp-row:last-child { border-bottom: none; } .grp-name { font-size: 13px; font-weight: 600; min-width: 100px; } .grp-accounts { font-size: 11px; color: var(--muted); flex: 1; } .grp-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; } .grp-checkboxes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; } .grp-check-row { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; } .grp-check-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* ─── OBJECTIFS & RÉCOMPENSES ─── */ .goal-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted2); margin: 20px 0 10px; font-weight: 600; } .goal-section-title:first-of-type { margin-top: 0; } .goal-card { background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; margin-bottom: 16px; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: var(--shadow-card); } .goal-card:hover { border-color: var(--border2); } .goal-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .goal-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; padding: 2px 7px; border-radius: 3px; margin-right: 8px; } .goal-badge--eval { background: var(--amber-dim); color: var(--amber); } .goal-badge--funded { background: var(--green-dim); color: var(--green); } .goal-card-name { font-size: 14px; font-weight: 600; } .goal-pnl { font-family: 'Geist Mono', monospace; font-size: 18px; font-weight: 700; } .goal-rules { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } /* Progress bar */ .goal-progress { } .gp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .gp-label { font-size: 11px; color: var(--muted); } .gp-value { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; } .gp-track { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; } .gp-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } /* Rule rows */ .goal-rule-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .goal-rule-row:last-child { border-bottom: none; } .grr-label { color: var(--muted); } .grr-val { font-family: 'Geist Mono', monospace; font-size: 11px; } .grr-ok { color: var(--green); } .grr-warn { color: var(--amber); } /* v0.9.358 (fix B-11) : violation prop firm = badge rouge plein, pas un ✗ discret. */ .grr-breach { color: #fff; background: var(--red); padding: 2px 8px; border-radius: 6px; font-weight: 700; letter-spacing: .02em; } .grr-pending { color: var(--muted); } /* Section label inside card */ .goal-section-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted2); margin: 14px 0 8px; font-weight: 600; } /* Floor panel — plancher trailing EOD */ .floor-panel { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 16px; } .floor-panel--safe { border-color: rgba(45,212,160,0.3); background: var(--green-dim); } .floor-panel-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .floor-main { display: flex; flex-direction: column; gap: 2px; } .floor-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted2); font-weight: 600; } .floor-value { font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 800; line-height: 1.1; } .floor-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .floor-hwm { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text); } .floor-margin-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; } .floor-safe-badge { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--green); } /* Status banners */ .goal-status { padding: 11px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; text-align: center; margin-top: 8px; } .goal-status--pass { background: var(--green-dim); color: var(--green); border: 1px solid rgba(45,212,160,0.3); } .goal-status--almost { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,166,35,0.3); } .goal-status--eval { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); } /* v0.9.369 : compte éval invalidé par un breach → non éligible au passage en financé */ .goal-status--breach { background: var(--red-dim); color: var(--red); border: 1px solid rgba(248,81,73,0.35); } /* v0.9.366 : bouton de passage éval → financé (apparaît quand l'objectif est validé) */ .goal-convert-btn { display: block; width: 100%; margin-top: 8px; padding: 12px 16px; border: none; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--accent-l), var(--accent), var(--accent-d)); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(140,140,150,0.35); transition: transform .15s, box-shadow .15s; } .goal-convert-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(140,140,150,0.5); } .goal-info-row { font-size: 11px; color: var(--muted); padding: 6px 0 14px; } .goal-info-row strong { color: var(--text); } /* Achievements */ .achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .achievement-badge { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 10px 12px; text-align: center; transition: border-color 0.2s, transform 0.2s; } .achievement-badge:hover { transform: translateY(-2px); } .ach-done { border-color: rgba(45,212,160,0.4); background: rgba(45,212,160,0.05); } .ach-locked { opacity: 0.35; filter: grayscale(0.6); } .ach-icon { font-size: 24px; margin-bottom: 7px; } .ach-label { font-size: 11px; font-weight: 600; margin-bottom: 4px; line-height: 1.2; } .ach-desc { font-size: 10px; color: var(--muted); line-height: 1.35; } /* ─── SECTIONS TRANSVERSALES ─── */ .page-section { margin-bottom: 28px; } .page-section-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .page-section-ttl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); } .page-section-count { font-size: 11px; color: var(--muted); font-family: 'Geist Mono', monospace; } /* ─── GOALS GRID ─── */ .goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 0; } .goals-grid .goal-card { margin-bottom: 0; } /* ─── STAT STRIP (dashboard stats sous le graphique) ─── */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0; padding: 16px 0 4px; border-top: 1px solid var(--border); margin-top: 14px; } .stat-strip-item { text-align: center; padding: 0 10px; border-right: 1px solid var(--border); } .stat-strip-item:last-child { border-right: none; } .stat-strip-val { font-size: 14px; font-weight: 700; font-family: 'Geist Mono', monospace; margin-bottom: 4px; } .stat-strip-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } /* ─── RECENT TRADES TABLE ─── */ .recent-trade-table { width: 100%; border-collapse: collapse; /* v0.9.231 : évite débordement horizontal sur très petits écrans */ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .recent-trade-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted2); padding: 0 12px 10px 0; text-align: left; border-bottom: 1px solid var(--border); } .recent-trade-table th:last-child, .recent-trade-table td:last-child { text-align: right; padding-right: 0; } .recent-trade-table td { padding: 11px 12px 11px 0; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; } .recent-trade-table tr:last-child td { border-bottom: none; } /* ─── DASHBOARD SECTION TITLE ─── */ .dash-section-ttl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* old .dac-kpis overridden below */ /* ─── TOAST ─── */ /* v0.9.167 : décalé au-dessus de la bulle d'assistance (#contactWidget, bubble 52x52 à bottom:24px right:24px → occupe jusqu'à 76px du bas). Toast à bottom: 92px pour laisser 16px de gap visuel. */ .toast { position: fixed; bottom: 92px; right: 24px; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); padding: 12px 16px; font-size: 13px; color: var(--text); z-index: 200; transform: translateY(60px); opacity: 0; transition: all 0.2s; box-shadow: 0 8px 24px rgba(0,0,0,0.4); pointer-events: none; } .toast.show { transform: translateY(0); opacity: 1; } .toast.error { border-color: rgba(240,82,79,0.4); } /* Mobile : bubble visible mais plus petite → toast peut être plus proche */ @media (max-width: 600px) { .toast { bottom: 84px; right: 16px; left: 16px; } } /* ───────────────────────────────────────────────────────────────────────────── CALENDRIER ───────────────────────────────────────────────────────────────────────────── */ .cal-nav-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .cal-month-label { font-size: 16px; font-weight: 700; min-width: 180px; text-align: center; } .cal-nav-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); cursor: pointer; padding: 6px 10px; display: flex; align-items: center; } .cal-nav-btn:hover { background: var(--bg4); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 20px; } .cal-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; padding: 6px 0; text-align: center; } .cal-head--we { color: var(--muted2); } .cal-cell { min-height: 72px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer; transition: border-color 0.15s; position: relative; } .cal-cell:hover { border-color: var(--border2); } .cal-cell--empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; } .cal-cell--we { background: var(--bg); opacity: 0.45; cursor: default; pointer-events: none; } .cal-cell--win { border-color: rgba(45,212,160,0.35); background: rgba(45,212,160,0.06); } .cal-cell--loss { border-color: rgba(240,82,79,0.35); background: rgba(240,82,79,0.06); } .cal-cell--be { border-color: rgba(245,166,35,0.3); background: rgba(245,166,35,0.04); } .cal-cell--today { outline: 2px solid var(--accent); outline-offset: -2px; } .cal-cell--sel { border-color: var(--accent); background: var(--bg3); } .cal-num { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; } .cal-cell--today .cal-num { color: var(--accent); } .cal-pnl { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 700; line-height: 1.1; } .cal-wl { font-size: 9px; color: var(--muted2); margin-top: 3px; } /* Détail du jour sélectionné */ .cal-day-trades { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 64px 16px 20px; /* v0.9.372 (fix B-08) : marge droite pour que la colonne R:R du détail ne soit pas masquée par la bulle support flottante */ } .cdt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .cdt-date { font-size: 13px; font-weight: 700; } .cdt-pnl { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 700; } .cdt-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .cdt-row:last-child { border-bottom: none; } .ob-sm { font-size: 9px; padding: 2px 5px; } .cdt-inst { flex: 1; font-weight: 600; } .cdt-setup { flex: 2; color: var(--muted); font-size: 11px; } .cdt-pnl-val { font-family: 'Geist Mono', monospace; font-weight: 700; } .cdt-rr { color: var(--muted2); font-size: 11px; margin-left: auto; } /* v0.9.358 / v0.9.359 (fix B-04b) : la bulle support (#contactWidget, fixée bottom-right, ~76px de la droite) masquait la colonne P&L NET du récap. Deux mesures : 1) marge basse robuste (!important pour survivre aux media-queries qui forcent padding:8px) → la dernière ligne peut défiler AU-DESSUS de la bulle. 2) padding-droit sur les lignes du récap → la colonne P&L (la plus à droite) sort de la zone horizontale de la bulle, même quand une ligne est pile à sa hauteur. */ #calContent { padding-bottom: 100px !important; } /* Calendar summary (monthly recap list) */ .cal-summary { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-top: 20px; } .cal-summary-header { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: var(--bg3); border-bottom: 1px solid var(--border); } .cal-summary-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--muted); } .cal-summary-meta { display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--muted2); } .cal-sum-head { display: grid; grid-template-columns: 140px 80px 1fr 70px 90px; padding: 6px 64px 6px 16px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted2); border-bottom: 1px solid var(--border); background: var(--bg3); } .cal-sum-row { display: grid; grid-template-columns: 140px 80px 1fr 70px 90px; align-items: center; padding: 10px 64px 10px 16px; border-bottom: 1px solid var(--border); font-size: 12px; cursor: pointer; transition: background 0.12s; } .cal-sum-row:last-child { border-bottom: none; } .cal-sum-row:hover { background: var(--bg3); } .cal-sum-row--sel { background: rgba(140,140,150,0.08) !important; } .cal-sum-date { font-weight: 600; } .cal-sum-count { color: var(--muted2); font-size: 11px; } .cal-sum-badges { display: flex; gap: 5px; align-items: center; } .cal-sum-rr { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--muted2); } .cal-sum-pnl { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 13px; text-align: right; } .cal-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.04em; } .cal-badge--w { background: rgba(45,212,160,0.15); color: var(--green); } .cal-badge--l { background: rgba(240,82,79,0.15); color: var(--red); } .cal-badge--be { background: rgba(245,166,35,0.15); color: var(--amber); } .cal-badge--o { background: rgba(100,100,120,0.15); color: var(--muted); } /* ───────────────────────────────────────────────────────────────────────────── MICRO-ENTREPRENEUR ───────────────────────────────────────────────────────────────────────────── */ .micro-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } @media (max-width: 900px) { .micro-layout { grid-template-columns: 1fr; } } .micro-form, .micro-results-col { display: flex; flex-direction: column; gap: 16px; } .micro-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .micro-sect-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted2); font-weight: 600; margin-bottom: 4px; } .micro-fx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .micro-fx-info { font-size: 12px; color: var(--muted); } .micro-fx-info strong { color: var(--text); } .micro-fx-btn { font-size: 11px; padding: 4px 10px; } .micro-input-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); } .micro-radio-row { display: flex; align-items: center; gap: 10px; font-size: 12px; cursor: pointer; padding: 4px 0; } .micro-radio-row input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; } .micro-radio-row span:nth-child(2) { flex: 1; color: var(--muted); } .micro-radio-amt { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text); } .micro-check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; } .micro-check-row input[type="checkbox"] { accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; } .mc-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; } .mc-sub { font-size: 10px; color: var(--muted); line-height: 1.5; } /* Résultats */ .micro-result-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 0; } .mrg-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12px; border-bottom: 1px solid var(--border); gap: 12px; } .mrg-row:last-child { border-bottom: none; } .mrg-header { font-weight: 600; } .mrg-sub { color: var(--muted); font-size: 11px; } .mrg-mono { font-family: 'Geist Mono', monospace; font-weight: 600; white-space: nowrap; } .mrg-ded { color: var(--red); } .mrg-tag { display: inline-block; background: var(--amber-dim); color: var(--amber); border-radius: 3px; padding: 1px 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; margin-left: 4px; vertical-align: middle; } .mrg-sep { height: 1px; background: var(--border2); margin: 4px 0; } .mrg-net-row { padding: 12px 0; } .mrg-net-row > span:first-child { font-weight: 700; font-size: 13px; } .mrg-net { font-size: 20px !important; font-weight: 800; } .mrg-note { font-size: 10px; color: var(--muted); margin-top: 8px; line-height: 1.6; padding: 8px 10px; background: var(--bg3); border-radius: var(--r-sm); } /* ── Plan badge ────────────────────────────────────────────────────────────── */ .plan-badge { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; flex-shrink: 0; /* v0.9.372 (fix B-09) : badge plan jamais tronqué (ex. « FU… ») */ white-space: nowrap; } .plan-basic { background: var(--bg3); color: var(--muted); border: 1px solid rgba(255,255,255,0.06); } /* v0.9.314 : état « plan en cours de chargement » (évite le flash BASIC au refresh) */ .plan-loading { background: transparent; color: var(--muted); opacity: 0.5; } .plan-pro { background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; box-shadow: 0 0 8px rgba(140,140,150,0.4); } /* v0.9.256 — badges par tier (sidebar) : Funded=violet, Elite=or, Bêta=cyan */ .plan-funded { background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; box-shadow: 0 0 8px rgba(140,140,150,0.4); } .plan-elite { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 0 8px rgba(245,158,11,0.45); } .plan-beta { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; box-shadow: 0 0 8px rgba(6,182,212,0.4); } /* ── Nav offers ────────────────────────────────────────────────────────────── */ .nav-item-offers { color: var(--accent); } .nav-item-offers svg { stroke: var(--accent); } .nav-item-offers.active, .nav-item-offers:hover { background: rgba(140,140,150,.12); } /* ── Offers page ───────────────────────────────────────────────────────────── */ .offers-wrap { max-width: 980px; margin: 0 auto; padding: 32px 24px 48px; } .offers-header { text-align: center; margin-bottom: 36px; } .offers-header h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; } .offers-header p { color: var(--muted); font-size: 13px; } .offers-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 40px; } @media (max-width: 860px) { .offers-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .offers-cards { grid-template-columns: 1fr; } } .offer-card { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 14px; padding: 28px 24px 24px; position: relative; display: flex; flex-direction: column; } .offer-card.offer-pro { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(140,140,150,0.12); } .offer-card.offer-current { border-color: var(--accent); } .offer-badge-pro { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; padding: 3px 14px; border-radius: 20px; box-shadow: 0 2px 8px rgba(140,140,150,0.4); } .offer-badge-current { font-size: 10px; color: var(--accent); font-weight: 700; margin-bottom: 6px; letter-spacing: 0.05em; text-transform: uppercase; height: 16px; } .offer-name { font-size: 20px; font-weight: 800; margin-bottom: 8px; } .offer-price { font-size: 28px; font-weight: 900; color: var(--accent); margin-bottom: 2px; } .offer-price-sub { font-size: 11px; color: var(--muted); margin-bottom: 20px; } .offer-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; } .offer-features li { font-size: 13px; padding: 5px 0; display: flex; align-items: center; gap: 8px; color: var(--text2); } .offer-features li::before { font-size: 13px; } .offer-features li.ok::before { content: '✓'; color: var(--accent); font-weight: 700; } .offer-features li.limit::before { content: '◌'; color: var(--amber); font-weight: 700; } .offer-features li.no::before { content: '✕'; color: var(--muted); } .offer-features li.ok { color: var(--text); } .offer-features li.limit { color: var(--amber); } .offer-features li.no { color: var(--muted); } .offer-cta { display: block; width: 100%; padding: 11px; border-radius: 8px; font-size: 13px; font-weight: 700; text-align: center; border: none; cursor: pointer; margin-top: auto; } .offer-cta-current { background: var(--bg3); color: var(--muted); cursor: default; } .offer-cta-pro { background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; transition: opacity .15s; box-shadow: 0 2px 12px rgba(140,140,150,0.35); } .offer-cta-pro:hover { opacity: .88; } .offer-cta-link { text-decoration: none; display: block; } .offer-cta-elite { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; transition: opacity .15s; box-shadow: 0 2px 12px rgba(245,158,11,0.35); } .offer-cta-elite:hover { opacity: .88; } /* Elite card */ .offer-card.offer-elite { border-color: #d97706; box-shadow: 0 0 0 1px #d9770655, 0 0 24px rgba(245,158,11,0.08); } .offer-badge-elite { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; padding: 3px 14px; border-radius: 20px; box-shadow: 0 2px 8px rgba(245,158,11,0.4); } /* "soon" feature row (Elite upcoming features) */ .offer-features li.soon { color: var(--muted); font-style: italic; } /* ─── Lot 1 — Tagline & per-day price ──────────────────────────────────── */ .offer-tag { font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; line-height: 1.45; min-height: 36px; } /* Push CTA to bottom of each offer card so they align horizontally */ .offer-cta { margin-top: auto; } .offer-features { margin-bottom: 16px; } .offer-perday { font-size: 12px; color: var(--muted); margin-top: -4px; margin-bottom: 14px; min-height: 18px; } .offer-price-suffix { font-size: 13px; color: var(--muted); font-weight: 500; } /* ─── OFF-LANDING — cartes Offres au look de la landing ────────────────────── */ /* Porté de la section pricing de index.html. N'affecte que l'app (la landing est 100 % inline et ne charge pas style.css). + ajouts : .current / CTA app. */ .pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto 8px; } @media (max-width: 980px) { .pricing-cards { grid-template-columns: 1fr; max-width: 460px; } } .pricing-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 28px 26px; position: relative; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; display: flex; flex-direction: column; align-items: center; text-align: center; } .pricing-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 32px rgba(140,140,150,.15); } .pricing-card.featured { border: 2px solid rgba(140,140,150,.55); background: linear-gradient(180deg, rgba(140,140,150,.14) 0%, var(--bg2) 50%); box-shadow: 0 18px 40px -20px rgba(140,140,150,.45); } .pricing-card.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent-l), var(--pink), transparent); } .pricing-card.elite { border: 1px solid rgba(245,158,11,.35); background: linear-gradient(180deg, rgba(245,158,11,.08) 0%, var(--bg2) 50%); } .pricing-card.elite:hover { border-color: #f59e0b; box-shadow: 0 14px 32px rgba(245,158,11,.15); } /* Plan possédé — surlignage vert "c'est ton plan actuel" */ .pricing-card.current { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), 0 14px 32px rgba(140,140,150,.12); } .pricing-current-tag { position: absolute; top: 12px; right: 12px; background: rgba(140,140,150,.15); color: #4ade80; border: 1px solid rgba(140,140,150,.4); border-radius: 20px; font-size: 10px; font-weight: 700; padding: 3px 9px; letter-spacing: .04em; text-transform: uppercase; } .pricing-badge-row { min-height: 26px; margin-bottom: 14px; } /* v0.9.354 : sur le plan ACTUEL, le tag d'angle « ✓ Plan actuel » suffit → on masque le badge « Gratuit à vie » (redondant + il chevauchait le tag sur vue étroite). */ .pricing-card.current .pricing-badge-free { display: none; } .pricing-badge-free { display: inline-block; padding: 4px 10px; background: rgba(140,140,150,.12); color: #4ade80; border: 1px solid rgba(140,140,150,.35); border-radius: 12px; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; } .pricing-badge { display: inline-block; padding: 4px 10px; background: linear-gradient(135deg, var(--accent), var(--pink)); color: #fff; border-radius: 12px; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; box-shadow: 0 4px 14px rgba(140,140,150,.4); } .pricing-badge-elite { display: inline-block; padding: 4px 10px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-radius: 12px; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; box-shadow: 0 4px 14px rgba(245,158,11,.4); } .pricing-card-name { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .pricing-card-tagline { font-size: 12.5px; color: var(--muted); margin-bottom: 22px; line-height: 1.5; min-height: 38px; } .pricing-card-price { font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 4px; letter-spacing: -1px; } .pricing-card-price .price-suffix { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 4px; } .pricing-card-perday { font-size: 12.5px; color: var(--muted); margin-top: -2px; margin-bottom: 14px; min-height: 18px; } /* v0.9.374 : offre de lancement (−40% + essai) sur la page Offres de l'app */ .pricing-launch { display: inline-block; background: rgba(244,114,182,0.12); color: #f472b6; border: 1px solid rgba(244,114,182,0.35); border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 11px; margin-bottom: 10px; } .pricing-card-price .price-old { color: var(--muted); text-decoration: line-through; font-weight: 500; font-size: 0.6em; margin-right: 6px; } .pricing-features { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; text-align: left; align-self: center; width: 100%; } .pricing-features li { font-size: 13px; color: var(--text); padding: 7px 0 7px 24px; position: relative; line-height: 1.45; } .pricing-features li::before { content: ''; position: absolute; left: 0; top: 11px; width: 14px; height: 14px; border-radius: 50%; background: rgba(140,140,150,.15); border: 1px solid rgba(140,140,150,.4); } .pricing-features li::after { content: '✓'; position: absolute; left: 3px; top: 7px; font-size: 10px; color: var(--accent); font-weight: 700; } .pricing-features li.muted { color: var(--muted); } .pricing-features li.muted::before { background: rgba(139,148,158,.1); border-color: rgba(139,148,158,.25); } .pricing-features li.muted::after { content: '–'; color: var(--muted); left: 4px; top: 6px; } .pricing-cta { display: inline-block; width: 100%; align-self: stretch; margin-top: auto; padding: 12px 18px; border-radius: 10px; text-align: center; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: opacity .2s, transform .2s; box-sizing: border-box; } button.pricing-cta { border: none; cursor: pointer; font-family: inherit; } .pricing-cta:hover { transform: translateY(-1px); } .pricing-cta.primary { background: linear-gradient(135deg, var(--accent), var(--pink)); color: #fff; box-shadow: 0 6px 18px rgba(140,140,150,.35); } .pricing-cta.primary:hover { opacity: .92; } .pricing-cta.lifetime { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; box-shadow: 0 6px 18px rgba(124,58,237,.35); } .pricing-cta.lifetime:hover { opacity: .92; } .pricing-cta.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); } .pricing-cta.ghost:hover { border-color: var(--accent); } .pricing-cta.ghost-elite { background: transparent; border: 1px solid rgba(245,158,11,.45); color: #fbbf24; } .pricing-cta.ghost-elite:hover { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: #f59e0b; color: #fff; } .pricing-cta.current { background: rgba(140,140,150,.12); color: #4ade80; border: 1px solid rgba(140,140,150,.35); cursor: default; } .pricing-cta.included { background: transparent; color: var(--muted); border: 1px solid var(--border); cursor: default; } .pricing-cta.current:hover, .pricing-cta.included:hover { transform: none; } /* ─── Lot 4 — Trust banner ─────────────────────────────────────────────── */ .trust-banner { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; padding: 14px 20px; margin: 0 0 28px; background: rgba(140,140,150, 0.06); border: 1px solid rgba(140,140,150, 0.2); border-radius: 10px; } .trust-item { font-size: 12.5px; color: var(--text2); white-space: nowrap; } /* ─── Founding scarcity banner ─────────────────────────────────────────── */ .founding-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; margin: 0 0 22px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(140,140,150, 0.08)); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 10px; } .founding-banner-text { flex: 1; min-width: 0; } .founding-banner-title { font-size: 14px; font-weight: 700; color: #fbbf24; margin-bottom: 3px; } .founding-banner-sub { font-size: 12.5px; color: var(--text2); } .founding-banner-cta { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; } .founding-banner-cta:hover { opacity: 0.9; transform: translateY(-1px); } @media (max-width: 560px) { .founding-banner { flex-direction: column; align-items: stretch; text-align: center; } } /* ─── Lot 2 — Billing toggle (Monthly / Yearly) ────────────────────────── */ .billing-toggle { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin: 0 auto 24px; position: relative; left: 50%; transform: translateX(-50%); } .billing-toggle-btn { background: transparent; border: none; color: var(--muted); padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 7px; cursor: pointer; transition: background 0.2s, color 0.2s; display: inline-flex; align-items: center; gap: 6px; } .billing-toggle-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; box-shadow: 0 2px 8px rgba(140,140,150, 0.35); } .billing-toggle-save { display: inline-block; background: rgba(140,140,150, 0.18); color: #4ade80; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.02em; } .billing-toggle-btn.active .billing-toggle-save { background: rgba(255, 255, 255, 0.18); color: #fff; } .offer-badge-basic { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--bg3); border: 1.5px solid var(--border); color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: 0.1em; padding: 3px 14px; border-radius: 20px; } /* Hidden price */ .offer-price-hidden { font-size: 12px; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 5px; } /* Promo code section */ .offer-promo-section { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 14px; padding: 28px 28px 24px; margin-bottom: 40px; text-align: center; } .offer-promo-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; color: var(--text); } .offer-promo-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; } .offer-promo-row { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 8px; } .offer-promo-row .pro-code-input { flex: 1; margin: 0; } .offer-promo-row .offer-cta-pro { width: auto; padding: 10px 20px; white-space: nowrap; } .offer-promo-active { font-size: 14px; font-weight: 700; color: var(--accent-l); display: flex; align-items: center; justify-content: center; gap: 8px; } .offer-activate { display: flex; flex-direction: column; gap: 10px; } .pro-code-input { width: 100%; padding: 10px 12px; background: var(--bg3); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-family: 'SF Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; box-sizing: border-box; } .pro-code-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140,140,150,0.15); } .pro-code-error { font-size: 11px; color: var(--red); min-height: 14px; } /* ── FAQ ───────────────────────────────────────────────────────────────────── */ .offers-faq { border-top: 1px solid var(--border2); padding-top: 28px; } .offers-faq h3 { font-size: 14px; font-weight: 700; margin-bottom: 16px; } .faq-item { margin-bottom: 14px; } .faq-item b { font-size: 13px; } .faq-item p { font-size: 12px; color: var(--muted); margin: 4px 0 0; } /* ── Contact widget ────────────────────────────────────────────────────────── */ #contactWidget { position: fixed; bottom: 24px; right: 24px; z-index: 9999; } .contact-bubble { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(140,140,150,.4); transition: transform .2s, box-shadow .2s; position: relative; color: #fff; } .contact-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(140,140,150,.55); } .contact-bubble.active { transform: scale(1.05); } .contact-bubble-dot { position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid var(--bg); animation: contactPulse 2s infinite; } @keyframes contactPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } } .contact-panel { position: absolute; bottom: 64px; right: 0; width: 320px; max-width: calc(100vw - 32px); background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.4); overflow: hidden; transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s; } .contact-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; } .contact-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; background: linear-gradient(135deg, var(--bg), var(--bg2)); border-bottom: 1px solid var(--border); } .contact-panel-title { display: flex; align-items: center; gap: 10px; } .contact-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; } .contact-name { font-size: 13px; font-weight: 700; color: var(--text); } .contact-status { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; } .contact-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; } .contact-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 4px; display: flex; align-items: center; transition: color .15s; } .contact-close:hover { color: var(--text); } .contact-body { padding: 16px; } .contact-intro { font-size: 12px; color: var(--text2); background: var(--bg3); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.6; } .contact-field { margin-bottom: 10px; } .contact-field label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 4px; font-weight: 600; } .contact-field input, .contact-field textarea { width: 100%; box-sizing: border-box; background: var(--bg3); border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 12px; font-family: inherit; resize: none; transition: border-color .15s; } .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--accent); } .contact-error { font-size: 11px; color: var(--red); min-height: 14px; margin-bottom: 8px; } .contact-send { width: 100%; padding: 10px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s; } .contact-send:hover { opacity: .88; } .contact-send:disabled { opacity: .5; cursor: not-allowed; } .contact-success { flex-direction: column; align-items: center; text-align: center; padding: 16px 0 8px; gap: 8px; } .contact-success-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(140,140,150,.15); color: var(--accent); font-size: 22px; display: flex; align-items: center; justify-content: center; } .contact-success-title { font-size: 15px; font-weight: 800; } .contact-success-sub { font-size: 12px; color: var(--muted); } /* ── TUTORIAL PAGE ──────────────────────────────────────────────────────── */ .tuto-card { display: flex; gap: 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 16px; } .tuto-step { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: var(--accent); color: #000; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; } .tuto-body { flex: 1; min-width: 0; } .tuto-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .tuto-desc { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.6; } .tuto-steps-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .tuto-step-row { display: flex; gap: 10px; font-size: 12.5px; color: var(--text2); line-height: 1.5; } .tuto-step-row b { color: var(--text); font-weight: 600; } .tuto-step-row em { color: var(--muted); font-style: normal; } .tuto-step-row kbd { background: var(--bg3); border: 1px solid var(--border2); border-radius: 4px; padding: 0 5px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--muted); } .tuto-arrow { color: var(--accent); font-weight: 700; flex-shrink: 0; } .tuto-check { color: var(--green); font-weight: 700; flex-shrink: 0; } .tuto-tip { background: var(--bg3); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; } .tuto-zone-pill { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: 'Geist Mono', monospace; } .tuto-zone-blue { background: rgba(30,100,255,.15); color: #6ea4ff; border: 1px solid rgba(30,100,255,.3); } .tuto-zone-red { background: rgba(240,82,79,.15); color: #f05a4f; border: 1px solid rgba(240,82,79,.3); } .tuto-zone-green { background: rgba(45,212,160,.15); color: #2dd4a0; border: 1px solid rgba(45,212,160,.3); } .tuto-pages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .tuto-page-card { display: flex; gap: 10px; align-items: flex-start; background: var(--bg3); border-radius: 8px; padding: 12px; } .tuto-page-icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; } .tuto-page-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .tuto-page-desc { font-size: 11px; color: var(--muted); line-height: 1.4; } .tuto-cta { margin-top: 20px; } @media (max-width: 500px) { .tuto-card { flex-direction: column; gap: 12px; padding: 16px; } .tuto-pages-grid { grid-template-columns: 1fr; } } /* ─── PLAN DIFFERENTIATION ───────────────────────────────────────────────────── */ /* Sidebar upgrade CTA — visible only for Basic users */ .sidebar-upgrade { margin: 0 12px 10px; } .sidebar-upgrade-text { font-size: 10.5px; color: var(--muted); line-height: 1.45; margin-bottom: 9px; } .sidebar-upgrade-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 0; background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; border: none; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0.04em; transition: opacity .15s; box-shadow: 0 2px 8px rgba(140,140,150,0.3); } .sidebar-upgrade-btn:hover { opacity: .88; } /* Feature lock overlay — for gated sections */ .feature-lock-wrap { position: relative; border-radius: var(--r); overflow: hidden; min-height: 180px; } .feature-lock-placeholder { height: 180px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; opacity: 0.35; } .feature-lock-placeholder-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px; width: 100%; } .feature-lock-placeholder-bar { height: 60px; background: linear-gradient(135deg, var(--bg3), var(--bg4)); border-radius: 6px; } .feature-lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(13,13,15,0.72); backdrop-filter: blur(4px); border-radius: var(--r); z-index: 10; padding: 24px; text-align: center; } .feature-lock-icon { font-size: 26px; margin-bottom: 2px; } .feature-lock-title { font-size: 14px; font-weight: 700; color: var(--text); } .feature-lock-sub { font-size: 12px; color: var(--muted); max-width: 240px; line-height: 1.5; } .feature-lock-cta { margin-top: 4px; padding: 8px 24px; background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; border: none; border-radius: 99px; font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity .15s; box-shadow: 0 2px 10px rgba(140,140,150,0.35); } .feature-lock-cta:hover { opacity: .88; } /* Inline upgrade banner — inside pages */ .upgrade-inline { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: linear-gradient(135deg, rgba(140,140,150,0.1), rgba(140,140,150,0.06)); border: 1px solid rgba(140,140,150,0.22); border-radius: var(--r); margin-bottom: 20px; } .upgrade-inline-icon { font-size: 20px; flex-shrink: 0; } .upgrade-inline-body { flex: 1; min-width: 0; } .upgrade-inline-title { font-size: 13px; font-weight: 600; color: var(--text); } .upgrade-inline-sub { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; } .upgrade-inline-btn { padding: 7px 18px; background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; border: none; border-radius: 99px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity .15s; box-shadow: 0 2px 8px rgba(140,140,150,0.3); } .upgrade-inline-btn:hover { opacity: .88; } /* Pro active banner — on offers page when Pro */ .pro-active-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: linear-gradient(135deg, rgba(140,140,150,0.14), rgba(140,140,150,0.08)); border: 1px solid rgba(140,140,150,0.3); border-radius: 12px; margin-bottom: 28px; } .pro-active-icon { font-size: 22px; color: var(--accent-l); flex-shrink: 0; } .pro-active-title { font-size: 14px; font-weight: 700; color: var(--accent-l); margin-bottom: 2px; } .pro-active-sub { font-size: 12px; color: var(--muted); } /* Offers — feature comparison table */ .offer-compare { margin: 32px 0; border-top: 1px solid var(--border); padding-top: 28px; } .offer-compare-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; } .offer-compare-row { display: grid; grid-template-columns: 1fr 72px 72px; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: center; font-size: 12px; } .offer-compare-row:last-child { border-bottom: none; } .offer-compare-feature { color: var(--text); } .offer-compare-basic, .offer-compare-pro, .offer-compare-lt { text-align: center; font-weight: 600; font-size: 13px; } .offer-compare-basic { color: var(--muted); } .offer-compare-pro { color: var(--accent-l); } .offer-compare-lt { color: #f59e0b; } .offer-compare-header { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted2); padding-bottom: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ HAMBURGER + SIDEBAR TOGGLE ═══════════════════════════════════════════════════════════════════════════ */ .hamburger-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 11px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; border-radius: var(--r-sm); transition: background 0.15s; } .hamburger-btn:hover { background: var(--hover-bg); } .hamburger-btn span { display: block; height: 1.5px; background: var(--muted); border-radius: 2px; transition: background 0.15s; } .hamburger-btn:hover span { background: var(--text); } /* Sidebar overlay (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 190; backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* Sidebar transition for collapse/expand */ .sidebar { transition: transform 0.26s cubic-bezier(0.4,0,0.2,1), width 0.26s cubic-bezier(0.4,0,0.2,1), min-width 0.26s cubic-bezier(0.4,0,0.2,1), opacity 0.26s; } /* ── Desktop collapse ──────────────────────────────────────────────────── */ @media (min-width: 769px) { .sidebar.sb-collapsed { width: 0 !important; min-width: 0 !important; overflow: hidden; border-right: none; opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE — MOBILE (≤768px) ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body { overflow: hidden; } /* ── Sidebar : drawer fixe ── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transform: translateX(-100%); width: 240px !important; min-width: 240px !important; box-shadow: none; } .sidebar.sb-open { transform: translateX(0); box-shadow: 6px 0 32px rgba(0,0,0,0.5); } /* ── Main prend toute la largeur ── */ .main { width: 100%; } /* ── Topbar ── */ .topbar { padding: 0 12px; gap: 8px; } .topbar-title { font-size: 13px; } .search-wrap { width: auto; flex: 1; min-width: 0; } /* ── Journal : liste pleine largeur, panel masqué par défaut ── */ .journal-layout { flex-direction: column; } .trade-list { width: 100% !important; min-width: 0 !important; border-right: none; border-bottom: 1px solid var(--border); max-height: 55vh; } .detail-panel { flex: 1; min-height: 0; } /* Quand un trade est sélectionné sur mobile : montrer seulement le panel */ .journal-layout.has-detail .trade-list { display: none; } .journal-layout.has-detail .detail-panel { flex: 1; } /* Bouton retour dans detail panel mobile */ .detail-back-btn { display: flex !important; align-items: center; gap: 6px; padding: 10px 16px; background: transparent; border: none; color: var(--accent); font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); width: 100%; } /* ── Dashboard / pages scrollables ── */ .dash-page { padding: 16px; } .page-title { font-size: 17px; margin-bottom: 14px; } .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } /* ── Wizard modal : plein écran fixe sur mobile ── */ .modal-overlay { align-items: flex-start; padding: 0; } .trade-wizard { position: relative; width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; padding: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } /* Header collant en haut */ .trade-wizard .wiz-header { position: sticky; top: 0; background: var(--bg2); z-index: 10; padding: 16px 20px 14px; margin-bottom: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; } /* Panes scrollables */ .trade-wizard .wiz-pane { padding: 20px 20px 32px; flex: 1; } /* Titre de pane */ .trade-wizard .wiz-pane-title { font-size: 16px; margin-bottom: 24px; } /* Inputs plus grands, évite le zoom iOS (font-size ≥16px) */ .trade-wizard .form-input { font-size: 16px !important; padding: 12px 14px !important; border-radius: 10px !important; } .trade-wizard select.form-input { padding-right: 36px !important; } .trade-wizard .form-label { font-size: 12px; margin-bottom: 4px; } /* Boutons Long/Short : grands et touch-friendly */ .dir-choice { gap: 16px; margin-top: 8px; } .dir-btn { padding: 40px 16px 32px !important; font-size: 16px !important; border-radius: 14px !important; } .dir-btn svg { width: 40px !important; height: 40px !important; } /* Zone de drop compacte */ .wizard-drop-zone { min-height: 90px !important; } /* Grilles */ .wiz-pane .form-grid-3 { grid-template-columns: 1fr 1fr !important; } .wiz-levels-grid { grid-template-columns: 1fr 1fr 1fr !important; } .wiz-levels-grid .form-input { padding: 12px 8px !important; text-align: center; } /* Live calc */ #wLiveCalc { gap: 8px 12px; padding: 12px; } #wLiveCalc .lc-stat { min-width: calc(33% - 8px); } .lc-stat-val { font-size: 13px !important; } /* Nav boutons collants en bas */ .trade-wizard .wiz-nav { position: sticky; bottom: 0; background: var(--bg2); border-top: 1px solid var(--border); padding: 14px 20px; margin-top: 0; gap: 12px; } #wBtnSave { flex: 1; padding: 13px !important; font-size: 15px !important; } /* Opt toggle */ .wiz-opt-toggle { width: 100%; text-align: left; padding: 12px 0; } /* ── Analytics ── */ .analytics-page { padding: 16px; } /* ── Micro ── */ .micro-content { padding: 16px; } /* ── Goals ── */ .goals-page { padding: 16px; } /* ── Settings ── */ .settings-page { padding: 16px; } .settings-layout { grid-template-columns: 1fr !important; } .settings-sidebar { display: none; } /* ── Calendar ── */ .cal-page { padding: 16px; } /* ── Live calc ── */ .live-calc { flex-wrap: wrap; gap: 8px 14px; } /* ── Inputs : 16px minimum pour éviter zoom iOS ── */ .form-input { font-size: 16px !important; padding: 11px 12px !important; } /* v0.9.231 (VIS-01 fix) : 3 inputs orphelins qui restaient en 12-13px → zoom iOS */ .search-wrap input { font-size: 16px !important; } .ac-input { font-size: 16px !important; padding: 6px 9px !important; } .pro-code-input { font-size: 16px !important; } /* ── Form grid global ── */ .form-grid-3 { grid-template-columns: 1fr 1fr !important; } /* ── Offers ── */ .offers-cards { grid-template-columns: 1fr !important; } .offer-promo-row { flex-direction: column; } .offer-promo-row .offer-cta-pro { width: 100%; } /* ── Dashboard recent trades : masquer Direction + Compte sur mobile ── */ .recent-trade-table th:nth-child(2), .recent-trade-table td:nth-child(2), .recent-trade-table th:nth-child(3), .recent-trade-table td:nth-child(3) { display: none; } /* Conteneur scrollable en fallback si ça déborde encore */ .recent-trade-table { font-size: 12px; } .chart-card .recent-trade-table { overflow-x: auto; display: block; } } .offer-compare-header .offer-compare-pro { color: var(--accent); } .offer-compare-header .offer-compare-lt { color: #d97706; } /* ─── CHANGELOG ─────────────────────────────────────────────────────────────── */ .cl-wrapper { max-width: 680px; padding: 0 24px 48px; overflow-y: auto; flex: 1; } .cl-intro { font-size: 13px; color: var(--muted); margin: 0 0 28px; } .cl-list { display: flex; flex-direction: column; gap: 0; } .cl-entry { position: relative; padding: 0 0 32px 24px; border-left: 2px solid var(--border); } .cl-entry::before { content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); } .cl-entry:last-child { border-left-color: transparent; } .cl-entry-header { margin-bottom: 12px; } .cl-version-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .cl-version { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: 0.03em; } .cl-tags { display: flex; gap: 5px; flex-wrap: wrap; } .cl-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 99px; letter-spacing: 0.04em; text-transform: uppercase; } .cl-date { font-size: 11px; color: var(--muted2); margin-bottom: 5px; font-family: 'Geist Mono', monospace; } .cl-title { font-size: 14px; font-weight: 600; color: var(--fg); } .cl-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .cl-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; } .cl-item-icon { flex-shrink: 0; width: 14px; font-size: 11px; margin-top: 2px; text-align: center; } .cl-item-text { flex: 1; } @media (max-width: 768px) { .cl-wrapper { padding: 0 16px 48px; } } /* ─── OUTILS PAGE ──────────────────────────────────────────────────────────── */ .outils-tabs-bar { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .outils-tab { padding: 8px 18px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; margin-bottom: -1px; transition: color .15s, border-color .15s; } .outils-tab:hover { color: var(--text); } .outils-tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Position Calculator ── */ .calc-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; } .calc-inputs { display: flex; flex-direction: column; gap: 16px; } .calc-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; } .calc-sect-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .calc-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .calc-field:last-child { margin-bottom: 0; } .calc-field label { font-size: 12px; color: var(--muted); font-weight: 500; } .calc-risk-row { display: flex; align-items: center; gap: 10px; } .calc-eq { font-size: 12px; color: var(--muted); white-space: nowrap; } /* ── Result Card ── */ .calc-result-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; min-height: 180px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; } .calc-placeholder { font-size: 13px; color: var(--muted); text-align: center; padding: 32px 0; margin: auto; } .calc-result-big { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .calc-result-contracts { font-size: 52px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -0.02em; } .calc-result-unit { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 4px; } .calc-result-instr { font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; } .calc-result-rows { display: flex; flex-direction: column; gap: 8px; } .calc-result-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .calc-result-lbl { color: var(--muted); } .calc-result-val { font-weight: 600; font-variant-numeric: tabular-nums; } .calc-warn { font-size: 12px; color: var(--yellow, #fbbf24); border-top: 1px solid var(--border); padding-top: 10px; } @media (max-width: 768px) { .calc-wrap { grid-template-columns: 1fr; } .calc-result-card { position: static; } } /* ─── U20 : Bouton "Aujourd'hui" calendrier ─────────────────────────────── */ .cal-today-btn { font-size: 12px; padding: 6px 12px; width: auto !important; height: auto !important; font-weight: 500; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; margin: 0 8px; transition: background 0.15s, border-color 0.15s; } .cal-today-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ─── U24 : Compteur de résultats dans la liste journal (filtre actif) ──── */ .list-counter { padding: 8px 16px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); background: var(--bg2); position: sticky; top: 0; z-index: 1; } /* ─── U21 : Dashboard empty state ───────────────────────────────────────── */ .dash-empty { max-width: 540px; margin: 48px auto; padding: 32px 24px; text-align: center; } .dash-empty-icon { font-size: 56px; margin-bottom: 12px; } .dash-empty-title { font-size: 22px; margin: 0 0 8px; color: var(--text); font-weight: 600; } .dash-empty-text { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 24px; } .dash-empty-steps { display: flex; flex-direction: column; gap: 10px; margin: 20px auto 28px; text-align: left; max-width: 380px; } .dash-empty-step { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); } .dash-empty-num { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .dash-empty-cta { padding: 12px 24px; font-size: 14px; } /* ─── U13 : Touch targets ≥ 44×44 px sur mobile (standard WCAG / Apple HIG) ─ */ /* Évite les mistaps tactiles sur petits boutons / icônes. Activé < 768px. */ @media (max-width: 768px) { /* Chips de filtre journal (Tous / Win / Loss / B/E / Open) */ .chip { min-height: 44px; padding: 10px 14px; font-size: 13px; } /* Boutons d'action génériques */ .btn-ghost, .btn-primary, .btn-secondary { min-height: 44px; padding: 10px 16px; } /* Croix wizard + clear image (étaient ~12×12 — beaucoup trop petits) */ .wiz-close, .wi-clear-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* User pill dans la sidebar */ .user-pill { min-height: 56px; } /* Items nav sidebar */ .nav-item { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } /* Boutons d'action dans tables (admin + settings) */ .btn-gen, .btn-delete, .btn-stripe, .btn-revoke, .btn-copy { min-height: 44px; padding: 10px 14px; font-size: 13px; margin: 2px; } /* Detail panel back button mobile */ .detail-back-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; } /* Inputs : font-size 16px évite le zoom auto iOS lors du focus */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="tel"], input[type="url"], textarea, select { font-size: 16px; min-height: 44px; } /* Wizard direction buttons (LONG / SHORT) */ .dir-btn { min-height: 56px; font-size: 16px; } /* Pills éditables wizard step 2 */ .wiz-pill { min-height: 44px; padding: 10px 14px; } /* Calendar day cells (touch pour ouvrir détail jour) */ .cal-day { min-height: 44px; } /* Cookie banner */ .cookie-banner button { min-height: 44px; padding: 10px 18px; } /* Boutons modale */ .modal-actions button { min-height: 44px; } /* Tab buttons admin / dashboard */ .admin-tab, .stats-tab { min-height: 44px; padding: 12px 16px; } /* Contact bubble : agrandir le touch target */ .contact-bubble { width: 56px; height: 56px; } /* Outcome badges cliquables dans le journal */ .outcome-badge { min-height: 24px; } } /* ════════════════════════════════════════════════════════════════════════════ RESPONSIVE COMPLET (v0.9.116) Stratégie : règles génériques anti-overflow + breakpoints additionnels. Breakpoints : - 1280px : large tablet / petit laptop - 1024px : tablet portrait / petit laptop - 768px : mobile landscape (déjà couvert au-dessus) - 480px : mobile portrait standard - 360px : très petit mobile (iPhone SE 1ère gen, etc.) ════════════════════════════════════════════════════════════════════════════ */ /* ─── Protection générique anti overflow horizontal ─── */ html, body { overflow-x: hidden; max-width: 100vw; } img, video, iframe, canvas, svg { max-width: 100%; height: auto; } img { -webkit-user-drag: none; } /* Texte qui wrappe au lieu de pousser le layout */ .trade-setup, .trade-item-meta, .info-val, .feature-desc, .dash-empty-text, .pricing-text, .faq-item p { word-wrap: break-word; overflow-wrap: break-word; } /* Flex children peuvent shrinker */ .trade-item-body, .trade-item-meta, .info-row { min-width: 0; } /* Tables avec wrapper scrollable horizontal sur petit écran */ .admin-table, .recent-trade-table { width: 100%; max-width: 100%; } /* ─── Breakpoint 1280px : large tablet / 13" laptop ─── */ @media (max-width: 1280px) { .sidebar { width: 200px; min-width: 200px; } .nav-item { font-size: 13px; } } /* ─── Breakpoint 1024px : tablet portrait / petit laptop ─── */ @media (max-width: 1024px) { /* Dashboard : moins de colonnes KPI */ .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Analytics : graphs full width */ .chart-card { padding: 14px; } /* Settings : forms en colonne unique */ .form-grid.form-grid-2 { grid-template-columns: 1fr; } /* Tables admin : font plus compacte */ .admin-table th, .admin-table td { padding: 8px 10px; font-size: 13px; } /* Calendar : cases jours plus compactes */ .cal-day { font-size: 12px; min-height: 56px; } /* Detail panel : plus serré */ .detail-content { padding: 16px; } /* Modals : moins large */ .modal-card { max-width: 90vw; } } /* ─── Breakpoint 480px : mobile portrait standard ─── */ @media (max-width: 480px) { /* Padding écran serré */ .dash-page, .settings-page, .analytics-page, .calendar-page, .goals-page, .outils-page, .micro-page, .offers-page, .changelog-page { padding: 12px !important; } /* Topbar plus compact */ .topbar { padding: 0 8px; gap: 6px; min-height: 48px; } .topbar-title { font-size: 12px; } .topbar-actions { gap: 4px; } /* Stats KPI : 1 seule colonne */ .kpi-grid { grid-template-columns: 1fr !important; } .metrics-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } .metric-card { padding: 10px 12px; } .mc-val { font-size: 17px; } /* Levels (Entry / SL / TP) : 2 colonnes au lieu de 4-5 */ .levels-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } .level-card { padding: 10px; } .lc-price { font-size: 15px; } /* Detail header : compact */ .detail-header { flex-direction: column; align-items: flex-start; gap: 12px; } .detail-actions { width: 100%; } .detail-actions .btn-ghost { flex: 1; } /* Wizard step 3 form : padding réduit */ .wp3-content { padding: 0 12px; } .form-grid { gap: 8px; } /* Calendar : 7 cellules par ligne pas changeables, mais compacter */ .cal-day { font-size: 11px; min-height: 48px; padding: 4px; } .cal-day-num { font-size: 11px; } .cal-day-pnl { font-size: 10px; } .cal-nav-row { flex-wrap: wrap; gap: 6px; } .cal-month-label { font-size: 14px; flex: 1; text-align: center; } .cal-today-btn { padding: 4px 8px; font-size: 11px; margin: 0 4px; } /* Settings tables : compact + scroll horizontal si débordement */ .admin-table, .recent-trade-table { font-size: 11px; display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .admin-table th, .admin-table td { padding: 6px 8px; } /* Modals : pleine largeur */ .modal-card { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 12px; padding: 20px 16px; } /* Trade list compactée */ .trade-item { padding: 10px 12px; } .trade-instr { font-size: 14px; } .trade-item-meta { font-size: 11px; gap: 6px; flex-wrap: wrap; } .trade-setup { font-size: 11px; } /* Contact bubble : plus discret */ .contact-bubble { bottom: 70px; right: 16px; width: 48px; height: 48px; } /* Cookie banner sur mobile */ .cookie-banner { padding: 12px 16px !important; flex-direction: column !important; gap: 10px !important; } /* Sidebar mobile : drawer un peu plus étroit */ .sidebar { width: 220px !important; min-width: 220px !important; } /* Bouton "Nouveau trade" reste accessible (sticky bottom) */ .btn-new-trade-wrap { padding: 8px 12px; } /* v0.9.227 — Login card mobile : padding réduit pour gagner de l'espace */ .login-card { padding: 28px 22px 24px; gap: 16px; } .login-title { font-size: 18px; } /* v0.9.227 — Touch targets ≥ 44px (Apple HIG / WCAG AAA) */ .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .topbar-btn, .nav-item, .dir-btn, .pricing-cta, .modal-btn, .wiz-nav-btn, .contact-btn { min-height: 44px; } /* v0.9.227 — Wizard drop zone touch target plus généreux */ .wizard-drop-zone { min-height: 110px !important; padding: 16px 12px !important; } .wizard-drop-zone .drop-icon { width: 32px; height: 32px; } } /* ─── Breakpoint 360px : iPhone SE 1ère gen, très petits Android ─── */ @media (max-width: 360px) { .dash-page, .settings-page, .analytics-page, .calendar-page { padding: 8px !important; } .kpi-grid { gap: 6px; } .metric-card { padding: 8px 10px; } .mc-val { font-size: 15px; } .mc-label { font-size: 10px; } .nav-item { padding: 8px 12px; font-size: 12px; } .sidebar { width: 200px !important; min-width: 200px !important; } .modal-card { padding: 16px 12px; } /* Titres page plus petits */ .page-title { font-size: 15px !important; } /* Cal day cells encore plus compactes */ .cal-day { min-height: 40px; font-size: 10px; } } /* ─── v0.9.231 (VIS-02) — Skeleton loader pour pages au rendu lourd ─── */ .page-skeleton { padding: 24px; max-width: 1200px; margin: 0 auto; } .page-skeleton .skl-bar { height: 16px; background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%); background-size: 200% 100%; border-radius: 6px; margin-bottom: 12px; animation: skl-shimmer 1.2s linear infinite; } .page-skeleton .skl-bar-tall { height: 28px; width: 45%; margin-bottom: 24px; } .page-skeleton .skl-bar-block { height: 240px; margin-top: 16px; border-radius: 12px; } .page-skeleton .skl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .page-skeleton .skl-row .skl-bar { height: 64px; margin-bottom: 0; border-radius: 10px; } @keyframes skl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 480px) { .page-skeleton { padding: 12px; } .page-skeleton .skl-row { grid-template-columns: 1fr 1fr; } .page-skeleton .skl-bar-block { height: 160px; } } @media (prefers-reduced-motion: reduce) { .page-skeleton .skl-bar { animation: none; background: var(--bg3); } } /* ─── Landscape mobile (orientation paysage sur mobile) ─── */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { /* En landscape sur mobile, on tente de garder la sidebar visible mais compacte */ .topbar { min-height: 40px; } .modal-overlay { align-items: center; } /* Wizard fullscreen reste OK */ } /* ─── Print (au cas où user veut imprimer le journal pour archive prop firm) ─── */ @media print { .sidebar, .topbar, .contact-bubble, .cookie-banner, .modal-overlay { display: none !important; } body { background: #fff !important; color: #000 !important; } .main { width: 100% !important; } .trade-item, .metric-card, .info-card { break-inside: avoid; } a { color: #000 !important; text-decoration: underline !important; } } /* ─── Réduit le motion pour accessibilité (prefers-reduced-motion) ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ v0.9.335 — VISITE GUIDÉE (onboarding 1er login) Spotlight via 4 masques sombres autour de la cible + anneau accent + popover. z-index 100000+ : au-dessus de tout le chrome app (plafond existant = 9999). ═══════════════════════════════════════════════════════════════════════════════ */ .zt-tour-mask { position: fixed; background: rgba(0, 0, 0, 0.66); z-index: 100000; pointer-events: auto; /* bloque l'interaction avec l'app pendant le tour */ } .zt-tour-ring { position: fixed; z-index: 100001; pointer-events: auto; /* intercepte les clics sur la cible (pas d'ouverture accidentelle) */ border-radius: 12px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(140,140,150, 0.32), 0 10px 34px rgba(140,140,150, 0.25); transition: left .25s cubic-bezier(.2,.7,.2,1), top .25s cubic-bezier(.2,.7,.2,1), width .25s, height .25s; animation: ztTourPulse 1.9s ease-in-out infinite; } @keyframes ztTourPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(140,140,150, 0.30), 0 10px 34px rgba(140,140,150, 0.18); } 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 10px rgba(140,140,150, 0.10), 0 10px 34px rgba(140,140,150, 0.30); } } .zt-tour-pop { position: fixed; z-index: 100010; width: 330px; max-width: calc(100vw - 24px); background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 18px 18px 14px; transition: left .25s cubic-bezier(.2,.7,.2,1), top .25s cubic-bezier(.2,.7,.2,1); animation: ztTourPopIn .3s ease; } @keyframes ztTourPopIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .zt-tour-count { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--accent-l); text-transform: uppercase; margin-bottom: 7px; } .zt-tour-title { font-size: 16px; font-weight: 650; color: var(--text); margin: 0 0 6px; line-height: 1.3; } .zt-tour-text { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; } .zt-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .zt-tour-navbtns { display: flex; gap: 8px; } .zt-tour-skip { background: none; border: none; color: var(--muted2); font-size: 12px; cursor: pointer; padding: 6px 2px; transition: color .12s; } .zt-tour-skip:hover { color: var(--muted); } .zt-tour-prev, .zt-tour-next { border-radius: 8px; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer; border: 1px solid var(--border2); transition: background .12s, opacity .12s; } .zt-tour-prev { background: var(--bg4); color: var(--text); } .zt-tour-prev:hover { background: var(--hover-bg); } .zt-tour-next { background: var(--accent); color: #fff; border-color: var(--accent); } .zt-tour-next:hover { opacity: .88; } /* Carte « relancer le tour » en tête du Guide */ .tuto-replay-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(140,140,150, 0.14), rgba(244, 114, 182, 0.07)); border: 1px solid var(--border2); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 28px; } .tuto-replay-title { font-size: 14px; font-weight: 650; color: var(--text); margin-bottom: 3px; } .tuto-replay-desc { font-size: 12.5px; color: var(--muted); } .tuto-replay-btn { white-space: nowrap; flex-shrink: 0; padding: 10px 18px; font-size: 13px; } /* ─── v0.9.394 : Mes instruments (sélection par pills, Réglages) ───────────── */ .instr-cat { margin-bottom: 14px; } .instr-cat-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 7px; } .instr-pills { display: flex; flex-wrap: wrap; gap: 7px; } .instr-pill { background: var(--surface); border: 1px solid var(--border2); color: var(--muted); font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .instr-pill:hover { border-color: var(--accent-l); color: var(--text); } .instr-pill.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ v0.9.398 — THÈME VERT (aligné landing). L'accent est désormais vert vif : tout contenu (texte/icône/chiffre) posé SUR un fond accent doit passer en sombre pour rester lisible (la landing met du texte noir sur ses boutons verts). --on-accent = #06080d en dark, #fff en light. Ces overrides arrivent en fin de feuille → gagnent sur les `color:#fff` d'origine (même spécificité). ═══════════════════════════════════════════════════════════════════════════ */ .btn-primary, .new-trade-btn, .notif-badge, .chip.active, .onb-num, .theme-btn.is-active, .login-btn, .user-pill-avatar, .dash-filter-btn.active, .goal-convert-btn, .plan-pro, .plan-funded, .offer-badge-pro, .offer-cta-pro, .pricing-badge, .pricing-cta.primary, .billing-toggle-btn.active, .contact-avatar, .contact-send, .contact-bubble, .tuto-step, .sidebar-upgrade-btn, .feature-lock-cta, .upgrade-inline-btn, .dash-empty-num, .zt-tour-next, .instr-pill.on { color: var(--on-accent); } /* Logo « Z » : était blanc sur violet ; sur vert vif → tracé sombre (comme la landing) */ /* Ces 3 logos ont une boîte TOUJOURS sombre (#15171c, !important) → le tracé doit être blanc dans TOUS les thèmes. `--on-accent` basculait en sombre sur fond sombre (Z invisible) depuis que le défaut est passé en noir. */ .logo-mark svg, .logo-mark svg path, .logo-mark svg polyline, .login-logo-mark svg, .login-logo-mark svg path, .zt-loader .logo-tile svg path { stroke: #fff; } /* Badge « POPULAR » des cartes pricing (texte sur fond accent) */ .pricing-card.featured::before { color: var(--on-accent); } /* ═══════════════════════════════════════════════════════════════════════════ v0.9.400 — SKIN MONOCHROME PROPRE (blanc défaut / noir option). Plus de vert d'accent ni de gimmick terminal. Mono UNIQUEMENT sur les chiffres (data). ═══════════════════════════════════════════════════════════════════════════ */ /* Mono sur la data chiffrée seulement (le reste = sans, propre) */ .kpi-val, .kpi-sub, .stat-val, .dac-balance, .dac-pnl, .dac-kpi-val, .recent-trade-table td, #appVersionLabel { font-family: var(--font-mono); } /* nav active : liseré accent neutre, pas de préfixe */ .nav-item.active { background: var(--active-bg); border-left: 2px solid var(--accent); } /* ═══════════════════════════════════════════════════════════════════════════ v0.9.402 — BOUTONS OUTLINE (au lieu de blocs noirs pleins). Bordure + texte accent, fond transparent ; se remplit (accent) au survol. Bloc final. ═══════════════════════════════════════════════════════════════════════════ */ .btn-primary, .new-trade-btn, .login-btn, .price-cta.primary, .pricing-cta.primary, .zt-tour-next, .tuto-replay-btn, .sidebar-upgrade-btn { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; } .btn-primary:hover, .new-trade-btn:hover, .login-btn:hover, .price-cta.primary:hover, .pricing-cta.primary:hover, .zt-tour-next:hover, .tuto-replay-btn:hover, .sidebar-upgrade-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* filtres / chips actifs : outline aussi (plus de pavé noir) */ .chip.active, .lp-billing-btn.active, .dash-filter-btn.active, .pill.active { background: transparent; color: var(--accent); border: 1px solid var(--accent); } /* ═══════════════════════════════════════════════════════════════════════════ v0.9.406 — LOGO de marque FIXE : carré sombre + Z blanc + point rose (identique partout, ne s'inverse plus). En thème NOIR : contour blanc pour rester visible sur fond noir. En thème clair : fine bordure pour définir le carré sur le blanc. ═══════════════════════════════════════════════════════════════════════════ */ .logo-mark, .login-logo-mark { background: #15171c !important; border: 1.5px solid rgba(255,255,255,0.92); box-shadow: none; } [data-theme="light"] .logo-mark, [data-theme="light"] .login-logo-mark { border: 1px solid rgba(0,0,0,0.12); } .logo-mark svg, .logo-mark svg path, .logo-mark svg polyline, .login-logo-mark svg, .login-logo-mark svg path { stroke: #ffffff !important; } .logo-mark .logo-dot, .login-logo-mark .logo-dot, .logo-mark svg circle, .login-logo-mark svg circle { fill: #f472b6 !important; stroke: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ Éco — News RSS custom renderer (fj-news-list) ═══════════════════════════════════════════════════════════════════════════ */ .fj-news-list { display:flex; flex-direction:column; gap:0; max-height:580px; overflow-y:auto; padding:8px 0; } .fj-news-row { display:grid; grid-template-columns:54px 1fr auto; align-items:baseline; gap:10px; padding:8px 16px; border-bottom:1px solid var(--border); transition:background .15s; } .fj-news-row:last-child { border-bottom:none; } .fj-news-row:hover { background:var(--surface2); } .fj-news-time { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .fj-news-title { font-size:13px; line-height:1.4; } .fj-news-title a { color:var(--text); text-decoration:none; } .fj-news-title a:hover { color:var(--accent); } .fj-news-src { font-size:10px; color:var(--muted); white-space:nowrap; opacity:.7; } .fj-news-tag { font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:4px; background:var(--bg2); border:1px solid var(--border); color:var(--muted); margin-left:6px; vertical-align:1px; letter-spacing:.03em; } /* ═══════════════════════════════════════════════════════════════════════════ Éco — Calendrier économique natif (v1.0.4 : ForexFactory via CF) + filtres ═══════════════════════════════════════════════════════════════════════════ */ .econ-h { margin:0 0 10px; font-size:15px; color:var(--text); } .econ-h .econ-sub { font-weight:400; font-size:11.5px; color:var(--muted); margin-left:6px; } .econ-loading, .econ-empty { padding:18px 4px; color:var(--muted); font-size:13px; } .ecal-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 12px; } .ecal-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; } .ecal-seg button { background:transparent; border:none; color:var(--muted); font-size:12px; padding:6px 13px; cursor:pointer; transition:background .15s,color .15s; } .ecal-seg button:not(:last-child) { border-right:1px solid var(--border); } .ecal-seg button.on { background:var(--bg2); color:var(--text); font-weight:600; } .ecal-cur { background:var(--bg2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; padding:6px 10px; outline:none; cursor:pointer; } .ecal-day { font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:18px 0 4px; } .ecal-day.today { color:var(--green); } /* Grille à colonnes fixes : time · dot · devise · event(1fr) · Prév · Préc — alignées verticalement */ .ecal-head, .ecal-row { display:grid; grid-template-columns:48px 12px 40px minmax(0,1fr) 78px 92px; column-gap:10px; align-items:center; padding:0 8px; } .ecal-head { padding-bottom:8px; margin-top:2px; border-bottom:1px solid var(--border2); } .ecal-head span { text-align:right; font-size:10px; font-weight:600; color:var(--muted2); text-transform:uppercase; letter-spacing:.06em; } .ecal-row { padding-top:9px; padding-bottom:9px; border-bottom:1px solid var(--border); font-size:13px; } .ecal-row:last-child { border-bottom:none; } .ecal-row.past { opacity:.5; } .ecal-time { font-variant-numeric:tabular-nums; color:var(--muted); font-size:12px; } .ecal-dot { width:9px; height:9px; border-radius:50%; } .ecal-dot.high { background:var(--red); } .ecal-dot.medium { background:var(--amber); } .ecal-dot.low { background:var(--muted2); } .ecal-dot.holiday { background:transparent; border:1px solid var(--muted2); } .ecal-cur-tag { font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.04em; } .ecal-title { color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ecal-val { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:13.5px; white-space:nowrap; } .ecal-val.fcst { color:var(--text); } .ecal-val.prev { color:var(--muted); } .news-tags { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; } .news-tag { font-size:11.5px; padding:4px 11px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all .15s; } .news-tag:hover { color:var(--text); border-color:var(--border2); } .news-tag.on { background:var(--bg2); border-color:var(--border2); color:var(--text); font-weight:600; } @media (max-width: 640px) { .ecal-head, .ecal-row { grid-template-columns:40px 10px 32px minmax(0,1fr) 58px 66px; column-gap:6px; } .ecal-val { font-size:12px; } } /* ═══════════════════════════════════════════════════════════════════════════ Dashboard — Graphiques avancés (adv-charts-grid) ═══════════════════════════════════════════════════════════════════════════ */ .adv-charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; } .adv-chart-half { grid-column: span 1; } .adv-chart-full { grid-column: span 2; } .chart-card-title { font-size:13px; font-weight:600; color:var(--text); margin:0 0 12px; letter-spacing:.02em; } .chart-area-sm { height:200px; position:relative; } @media (max-width: 640px) { .adv-charts-grid { grid-template-columns:1fr; } .adv-chart-half, .adv-chart-full { grid-column: span 1; } } /* ═══════════════════════════════════════════════════════════════════════════ Dashboard — Section headers + Calendar heatmap ═══════════════════════════════════════════════════════════════════════════ */ .adv-section-hd { font-size:13px; font-weight:700; color:var(--text); letter-spacing:.04em; text-transform:uppercase; margin:28px 0 12px; padding-left:2px; opacity:.7; } .cal-heatmap { display:flex; gap:8px; padding:8px 0; overflow-x:auto; } .cal-days { display:flex; flex-direction:column; gap:3px; padding-top:18px; } .cal-day-lbl { font-size:10px; color:var(--muted); height:14px; line-height:14px; text-align:right; padding-right:6px; font-family:'Geist Mono',monospace; } .cal-weeks { display:flex; gap:3px; } .cal-week { display:flex; flex-direction:column; gap:3px; } /* Heatmap dashboard : classes dédiées (ex-.cal-cell → collision avec le calendrier des trades) */ .cal-hm-cell { width:14px; height:14px; border-radius:3px; cursor:default; transition:transform .1s; } .cal-hm-cell:hover { transform:scale(1.3); } .cal-hm-cell-empty { background:transparent; } /* ─── v1.0.5 : bannière d'essai + mur de fin d'essai ─────────────────────────── */ .trial-banner { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:9px 16px; background:var(--bg2); border-bottom:1px solid var(--border); font-size:13px; color:var(--text); } .trial-banner b { color:var(--accent); font-weight:700; } .trial-banner button { background:var(--accent); color:var(--on-accent); border:none; border-radius:8px; padding:6px 14px; min-height:32px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Geist',sans-serif; transition:opacity .15s; } .trial-banner button:hover { opacity:.9; } .paywall-overlay { position:fixed; inset:0; z-index:5000; padding:24px; background:rgba(8,8,12,0.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; animation:paywallIn .25s ease; } @keyframes paywallIn { from { opacity:0; } to { opacity:1; } } .paywall-card { width:100%; max-width:440px; background:var(--bg2); border:1px solid var(--border); border-radius:18px; padding:36px 30px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.5); } .paywall-card .paywall-icon { font-size:38px; margin-bottom:10px; } .paywall-card h2 { margin:0 0 10px; font-size:21px; color:var(--text); } .paywall-card p { margin:0 0 22px; font-size:14px; line-height:1.6; color:var(--muted); } /* CTA rempli, thème-correct : bg --accent + texte --on-accent (pas de #fff en dur) */ .paywall-card .btn-primary { width:100%; min-height:48px; border-radius:12px; font-size:15px; margin-top:4px; background:var(--accent); color:var(--on-accent); border:none; } .paywall-logout { margin-top:14px; background:none; border:none; color:var(--muted2); font-size:13px; cursor:pointer; text-decoration:underline; font-family:'Geist',sans-serif; } .paywall-logout:hover { color:var(--text); } .paywall-warn { color:#f59e0b; font-size:13px; line-height:1.45; margin-top:2px; } .trial-banner-urgent { background:rgba(239,68,68,0.14); } .paywall-export { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:9px 16px; font-size:13px; font-weight:500; cursor:pointer; font-family:'Geist',sans-serif; margin-top:6px; transition:border-color .15s; } .paywall-export:hover { border-color:var(--accent); } /* v1.0.5 — gate d'inscription (carte obligatoire) : choix de formule */ .onboard-plans { display:flex; flex-direction:column; gap:10px; width:100%; margin:8px 0 4px; } .onboard-plan { display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; padding:13px 16px; border:1px solid var(--border); border-radius:11px; background:var(--bg2); color:var(--text); cursor:pointer; font-family:'Geist',sans-serif; transition:border-color .15s, transform .12s; } .onboard-plan span { font-size:15px; font-weight:700; } .onboard-plan small { font-size:12px; color:var(--muted); } .onboard-plan:hover { border-color:var(--accent); transform:translateY(-1px); } .onboard-plan-reco { border-color:#7c3aed; } .onboard-plan-reco:hover { border-color:#a78bfa; } /* v1.0.5 — menu compte (bas de sidebar, façon Claude) */ .acct-moved { display:none !important; } /* Réglages / Offres déplacés dans le menu compte */ .account-wrap { position:relative; margin:0 8px 8px; } .user-pill { display:flex; align-items:center; width:100%; box-sizing:border-box; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none; font:inherit; color:inherit; text-align:left; } .user-pill-chevron { margin-left:auto; flex:none; color:var(--muted); transition:transform .15s; } #accountBtn[aria-expanded="true"] .user-pill-chevron { transform:rotate(180deg); } .account-menu { position:absolute; bottom:calc(100% + 8px); left:0; min-width:262px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:5px; box-shadow:0 16px 46px rgba(0,0,0,.5); z-index:1300; animation:acctIn .14s ease-out; overflow:visible; } @keyframes acctIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } } .account-menu-email { padding:7px 11px 5px; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .account-menu-item { display:flex; align-items:center; gap:11px; width:100%; padding:7px 11px; border:none; background:transparent; color:var(--text); font-family:'Geist',sans-serif; font-size:14px; text-align:left; text-decoration:none; border-radius:9px; cursor:pointer; box-sizing:border-box; transition:background .12s; } .account-menu-item:hover { background:rgba(140,140,150,.16); } .user-pill:focus:not(:focus-visible), .account-menu-item:focus:not(:focus-visible) { outline:none; } .user-pill:focus-visible, .account-menu-item:focus-visible { outline:none; background:rgba(140,140,150,.16); } .account-menu-item svg { width:17px; height:17px; flex:none; color:var(--muted); } .account-menu-item > span:not([class]) { flex:1; min-width:0; text-align:left; } /* libellé seul (pas le drapeau ni la valeur de droite) */ .account-menu-right { flex:none; font-size:12px; color:var(--muted); font-weight:600; } .account-menu-sep { height:1px; background:var(--border); margin:4px 8px; } .account-flyout { position:absolute; left:calc(100% + 6px); top:2px; min-width:244px; white-space:nowrap; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:5px; box-shadow:0 16px 46px rgba(0,0,0,.5); z-index:1310; animation:acctIn .12s ease-out; } .account-menu-item .acct-chevr { width:15px; height:15px; color:var(--muted); flex:none; margin-left:2px; } .account-menu-item .acct-check { width:17px; height:17px; color:var(--accent); flex:none; margin-left:auto; } .acct-flag { font-size:15px; width:18px; flex:none; text-align:center; } .account-menu-back span { font-weight:600; } /* v1.0.5 — bouton « Voir les offres » de la sidebar retiré (redondant : Offres est dans le menu compte) → pied resserré */ #sidebarUpgrade { display:none !important; } /* #btnLogout est un stub caché (compat) — la classe .user-logout-btn écrasait [hidden] → bouton vide 40px. On force le masquage. */ #btnLogout { display:none !important; } /* v1.0.5 — carte Lifetime (page Offres) */ .pricing-badge-lifetime { background:#7c3aed; color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 10px; border-radius:999px; text-transform:uppercase; } .lifetime-card { border-color:rgba(124,58,237,0.55); }