/* ══════════════════════════════════════════════════════════════════ DASH TRADING 2.0 — Feuille de style complète Refonte visuelle intégrale, une seule cascade. Les !important sont limités à trois cas où rien d'autre ne fonctionne : la préférence « moins d'animations », la surcharge des grilles écrites dans les balises, et un bouton dont le script pilote l'affichage. Les noms de variables de la v1 sont conservés (le HTML inline en dépend) ; seules leurs valeurs changent. ══════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ─────────────────────────────────────────────────── */ :root{ /* Fonds — bleu nuit tres profond */ --bg: #06070D; --bg2: #0A0C14; --bg3: #1C2232; --card: #0E1119; --card2: #141824; /* Lignes */ --border: rgba(255,255,255,.065); --border2: rgba(255,255,255,.11); --border3: rgba(255,255,255,.045); /* Accent principal — indigo electrique. Le nom « teal » est conserve : des centaines de styles ecrits dans les balises s'y referent. Seule la valeur change. */ --teal: #7C6CFF; --teal-l: #9B8CFF; --teal-d: #5B4BE0; --teal-dim: rgba(124,108,255,.13); --teal-glow: rgba(124,108,255,.38); /* Accent secondaire — cyan */ --cyan: #22D3EE; --cyan-dim: rgba(34,211,238,.13); /* Semantique */ --green: #22C98A; --green-dim: rgba(34,201,138,.13); --coral: #FF4D6A; --coral-l: #FF8095; --coral-dim: rgba(255,77,106,.13); --red: #FF4D6A; --red-dim: rgba(255,77,106,.13); --amber: #FFB224; --amber-dim: rgba(255,178,36,.13); --violet: #A78BFA; --violet-dim:rgba(167,139,250,.13); /* Texte */ --text: #EEF1F8; --text2: #9BA6BD; --text3: #616C85; /* Rayons — plus genereux que la v1 */ --r-sm: 11px; --r-md: 15px; --r-lg: 20px; --gap: 18px; /* Typographie */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --display: 'Sora', 'Inter', -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Ombres — plus profondes, plus diffuses */ --sh-sm: 0 2px 8px rgba(0,0,0,.30); --sh-md: 0 12px 32px -10px rgba(0,0,0,.60); --sh-lg: 0 32px 70px -24px rgba(0,0,0,.80); /* Gabarit */ --sidebar-w: 250px; --topbar-h: 68px; --spacebar-h:52px; /* Courbe d'animation */ --ease: cubic-bezier(.16,1,.3,1); } /* Thème clair optionnel (data-theme="clair" sur ) */ html[data-theme="clair"]{ --bg:#F4F6FB; --bg2:#FFFFFF; --bg3:#EDF1F8; --card:#FFFFFF; --card2:#F7F9FD; --border:rgba(16,24,40,.10); --border2:rgba(16,24,40,.18); --border3:rgba(16,24,40,.07); --text:#0E1119; --text2:#4A5670; --text3:#7C889F; --teal-dim:rgba(124,108,255,.10); } /* ── 2. BASE ───────────────────────────────────────────────────── */ *, *::before, *::after{ box-sizing:border-box; } html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } body{ min-height:100vh; overflow-x:hidden; } /* Halo d'ambiance discret, purement décoratif */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 500px at 78% -12%, rgba(124,108,255,.10), transparent 60%), radial-gradient(700px 420px at 8% 105%, rgba(167,139,250,.06), transparent 60%); } h1,h2,h3,h4{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; margin:0; } a{ color:var(--teal-l); text-decoration:none; } button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; } /* Sans cette remise a zero, un bouton sans classe garde le gris du navigateur et tranche avec le reste de l'interface. */ button{ cursor:pointer; background:transparent; border:0; color:inherit; padding:0; line-height:inherit; -webkit-appearance:none; appearance:none; } ::selection{ background:var(--teal-dim); color:var(--text); } /* Barres de défilement */ *::-webkit-scrollbar{ width:9px; height:9px; } *::-webkit-scrollbar-track{ background:transparent; } *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.11); border-radius:99px; border:2px solid transparent; background-clip:content-box; } *::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.20); background-clip:content-box; } *{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; } /* ── 3. PAGES ──────────────────────────────────────────────────── */ .page{ display:none; } .page.active{ display:block; } /* ── 4. ÉCRAN DE CONNEXION ─────────────────────────────────────── */ .login-bg{ position:fixed; inset:0; z-index:0; background: radial-gradient(1100px 600px at 50% -10%, rgba(124,108,255,.17), transparent 62%), radial-gradient(800px 500px at 12% 108%, rgba(167,139,250,.10), transparent 60%), var(--bg); } .login-grid-lines{ position:fixed; inset:0; z-index:0; opacity:.35; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); } .login-wrap{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; } .login-logo{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:30px; } .login-logo-box{ width:58px; height:58px; border-radius:17px; background:linear-gradient(145deg, var(--teal), var(--teal-d)); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:19px; letter-spacing:-.5px; color:#04101F; box-shadow:0 12px 34px -8px var(--teal-glow), inset 0 1px 0 rgba(255,255,255,.28); } .login-logo-name{ font-family:var(--display); font-weight:800; font-size:25px; letter-spacing:-.03em; } .login-logo-name span{ color:var(--teal-l); } .login-logo-sub{ font-family:var(--mono); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--text3); } .login-card{ width:100%; max-width:412px; padding:34px 30px; background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--border2); border-radius:22px; box-shadow:var(--sh-lg); } .login-title{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; margin-bottom:5px; } .login-sub{ font-size:12.5px; color:var(--text2); margin-bottom:22px; } .login-footer{ margin-top:26px; font-size:11px; color:var(--text3); text-align:center; } /* ── 5. GABARIT APPLICATIF ─────────────────────────────────────── */ .app-shell{ display:flex; min-height:100vh; position:relative; z-index:1; } /* 5.1 — Panneau latéral */ .sidebar{ width:var(--sidebar-w); flex-shrink:0; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; height:100vh; position:fixed; left:0; top:0; z-index:200; transition:transform .32s var(--ease); } .sidebar-head{ padding:0 18px; height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--border3); } .logo-box{ width:34px; height:34px; border-radius:11px; flex-shrink:0; background:linear-gradient(145deg, var(--teal), var(--teal-d)); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:-.4px; color:#04101F; box-shadow:0 6px 18px -6px var(--teal-glow), inset 0 1px 0 rgba(255,255,255,.26); } .sidebar-brand{ font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.03em; } .sidebar-brand span{ color:var(--teal-l); } .sidebar-nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 12px 20px; } .nav-section-label{ font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); padding:0 10px; margin:20px 0 8px; } .sidebar-nav > .nav-section-label:first-child{ margin-top:0; } .nav-item{ position:relative; display:flex; align-items:center; gap:11px; padding:9px 12px; margin-bottom:2px; border-radius:11px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; user-select:none; transition:background .18s var(--ease), color .18s var(--ease); } .nav-item:hover{ background:var(--bg3); color:var(--text); } .nav-item.active{ background:var(--teal-dim); color:var(--teal-l); font-weight:700; } .nav-item.active::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--teal); box-shadow:0 0 12px var(--teal-glow); } .nav-item-ic{ width:19px; flex-shrink:0; text-align:center; font-size:14px; line-height:1; opacity:.92; } .nav-item-chevron{ margin-left:auto; font-size:15px; color:var(--text3); line-height:1; transition:transform .22s var(--ease); } .nav-item.expanded .nav-item-chevron{ transform:rotate(90deg); } .nav-sub-item{ display:none; padding:7px 12px 7px 42px; margin-bottom:1px; font-size:12px; color:var(--text3); border-radius:9px; cursor:pointer; transition:background .15s, color .15s; } .nav-sub-item.visible{ display:flex; align-items:center; gap:7px; } .nav-sub-item:hover{ background:var(--bg3); color:var(--text); } .nav-sub-item.active{ color:var(--teal-l); font-weight:600; background:var(--teal-dim); } .sidebar-foot{ padding:12px; border-top:1px solid var(--border3); flex-shrink:0; } .user-card{ display:flex; align-items:center; gap:10px; padding:9px; border-radius:12px; cursor:pointer; transition:background .18s; } .user-card:hover{ background:var(--bg3); } .user-avatar{ width:33px; height:33px; border-radius:10px; flex-shrink:0; background:var(--bg3); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:11px; color:var(--teal-l); } .user-meta{ min-width:0; flex:1; } .user-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .user-plan{ font-family:var(--mono); font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.7px; } .btn-logout{ width:100%; margin-top:8px; padding:9px; background:transparent; border:1px solid var(--border2); border-radius:11px; color:var(--text2); font-size:12px; font-weight:500; transition:border-color .18s, color .18s, background .18s; } .btn-logout:hover{ border-color:var(--coral); color:var(--coral-l); background:var(--coral-dim); } .sidebar-backdrop{ position:fixed; inset:0; z-index:150; background:rgba(3,6,12,.68); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; visibility:hidden; /* A l'ouverture le voile apparait tout de suite ; a la fermeture il attend la fin du fondu avant de se retirer. */ transition:opacity .28s var(--ease), visibility 0s linear .28s; } .sidebar-backdrop.open{ opacity:1; visibility:visible; transition:opacity .28s var(--ease), visibility 0s linear 0s; } /* 5.2 — Zone principale */ .main{ flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; } /* 5.3 — Barre supérieure */ .topbar{ position:fixed; top:0; left:var(--sidebar-w); right:0; z-index:120; height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 22px; /* Fond plein, sans flou d'arrière-plan. « backdrop-filter » ferait de cette barre le cadre de référence de tout enfant en position fixed : le choix du fuseau et le panneau de notifications s'en trouvaient décalés et rognés. */ background:var(--bg2); border-bottom:1px solid var(--border); } html[data-theme="clair"] .topbar{ background:#FFFFFF; } /* La zone de gauche doit pouvoir se rétrécir, sinon elle pousse tout le reste hors de la barre au lieu de tronquer son titre. */ .topbar-zone-l{ display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 auto; } .topbar-left{ min-width:0; } .page-title{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.02em; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #topbar-date{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topbar-right{ display:flex; align-items:center; gap:9px; flex-shrink:0; } .hamburger-btn{ display:none; flex-direction:column; justify-content:center; gap:4.5px; width:36px; height:36px; padding:0 8px; flex-shrink:0; background:transparent; border:1px solid var(--border2); border-radius:10px; transition:border-color .18s, background .18s; } .hamburger-btn:hover{ border-color:var(--teal); background:var(--teal-dim); } .hamburger-btn span{ display:block; height:1.5px; width:100%; border-radius:2px; background:var(--text2); transition:transform .28s var(--ease), opacity .2s; } .hamburger-btn.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .hamburger-btn.active span:nth-child(2){ opacity:0; } .hamburger-btn.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } .topbar-btn{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; background:transparent; border:1px solid var(--border2); border-radius:10px; color:var(--text2); font-size:12px; font-weight:500; transition:border-color .18s, color .18s, background .18s; white-space:nowrap; } .topbar-btn:hover{ border-color:var(--teal); color:var(--teal-l); background:var(--teal-dim); } .tb-label{ display:inline; } .tb-sep{ width:1px; height:22px; background:var(--border2); flex-shrink:0; } .tb-tools{ display:flex; align-items:center; gap:7px; } .tb-status{ display:flex; align-items:center; gap:7px; } .live-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); animation:pulseDot 2s ease-in-out infinite; } @keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .live-clock{ font-family:var(--mono); font-size:11px; color:var(--text2); } .market-live{ display:flex; align-items:center; gap:7px; } /* Prochaine annonce économique L'affichage est piloté PAR LE CSS, via la classe « on ». Auparavant le JS posait un display en ligne : un style en ligne bat toujours une media query, donc le bandeau réapparaissait sur les écrans étroits et venait chevaucher l'horloge et les boutons de droite. */ #topbar-eco{ flex:1 1 auto; display:none; justify-content:center; min-width:0; } #topbar-eco.on{ display:flex; } #topbar-eco-main{ display:inline-flex; align-items:center; gap:9px; max-width:100%; min-width:0; overflow:hidden; height:36px; padding:0 14px; background:var(--bg3); border:1px solid var(--border2); border-radius:99px; color:var(--text); font-size:12px; transition:border-color .18s, background .18s; } #topbar-eco-main:hover{ border-color:var(--teal); background:var(--teal-dim); } .te-dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); flex-shrink:0; } .te-flag{ flex-shrink:0; } /* Le titre est la seule partie qui cède : elle se tronque proprement. */ .te-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; min-width:0; flex:0 1 auto; } .te-cd{ font-family:var(--mono); font-size:11px; color:var(--teal-l); font-weight:600; flex-shrink:0; } .te-chev{ font-size:10px; color:var(--text3); flex-shrink:0; } /* 5.4 — Barre d'espaces */ .spacebar{ position:fixed; top:var(--topbar-h); left:var(--sidebar-w); right:0; z-index:115; height:var(--spacebar-h); display:flex; align-items:center; gap:4px; padding:0 22px; background:var(--bg2); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; } html[data-theme="clair"] .spacebar{ background:#FFFFFF; } .spacebar::-webkit-scrollbar{ display:none; } .space{ position:relative; display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:11px; font-size:12.5px; font-weight:600; letter-spacing:-.01em; color:var(--text2); background:transparent; border:none; white-space:nowrap; flex-shrink:0; transition:color .2s, background .2s; } .space:hover{ color:var(--text); background:var(--bg3); } .space.on{ color:var(--teal-l); background:var(--teal-dim); } .space-ic{ font-size:14px; line-height:1; } .space-sub{ display:flex; align-items:center; gap:5px; margin-left:10px; padding-left:12px; border-left:1px solid var(--border2); flex-shrink:0; } /* 5.5 — Contenu */ .content{ padding:calc(var(--topbar-h) + var(--spacebar-h) + 26px) 26px 60px; max-width:1680px; width:100%; } .section{ display:none; } /* Les blocs de premier niveau portaient chacun leur propre marge, posée à la main : on obtenait des écarts de 10, 0, 14 puis 16px dans la même colonne. On passe en colonne flex avec un seul écart, et on neutralise les marges individuelles — la respiration devient régulière partout. */ .section.active{ display:flex; flex-direction:column; gap:var(--gap); animation:sectionIn .34s var(--ease); } .section.active > *{ margin-top:0 !important; margin-bottom:0 !important; } /* Un conteneur que le script n'a pas rempli ne doit pas consommer un écart : il creusait un trou de 32px au milieu de la colonne. Le « !important » est nécessaire : ces conteneurs portent un display:flex écrit directement dans la balise, qui l'emporterait. */ .section.active > :empty{ display:none !important; } @keyframes sectionIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } /* ── 6. CARTES ─────────────────────────────────────────────────── */ .card{ background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); } .card:hover{ border-color:var(--border2); box-shadow:var(--sh-md); } /* Six indicateurs. « auto-fit » produisait cinq colonnes vers 1440px, donc une sixième carte seule sur sa ligne, plus courte que les autres. On impose des nombres de colonnes qui divisent six : 6, 3, puis 2. */ .kpi-row{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--gap); } @media (max-width:1560px){ .kpi-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } .kpi-card{ position:relative; overflow:hidden; padding:18px; background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); } .kpi-card::after{ content:''; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); } .kpi-card:hover{ transform:translateY(-3px); border-color:var(--border2); box-shadow:var(--sh-md); } .kpi-label{ font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.1px; color:var(--text3); margin-bottom:9px; } .kpi-val{ font-family:var(--display); font-weight:800; font-size:25px; letter-spacing:-.035em; line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums; } .kpi-sub{ font-family:var(--mono); font-size:10.5px; color:var(--text3); margin-top:7px; } /* ── 7. BOUTONS ────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 17px; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r-md); color:var(--text); font-size:12.5px; font-weight:600; letter-spacing:-.01em; transition:border-color .18s, background .18s, transform .18s var(--ease), color .18s; white-space:nowrap; } .btn:hover{ border-color:var(--teal); color:var(--teal-l); background:var(--teal-dim); } .btn:active{ transform:scale(.975); } .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; } /* Ces deux classes sont parfois employees sans .btn : elles doivent donc porter elles-memes la mise en forme de base. */ .btn-teal, .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:var(--r-md); font-size:13px; letter-spacing:-.01em; transition:background .18s, box-shadow .18s, transform .18s var(--ease); background:linear-gradient(145deg, var(--teal), var(--teal-d)); border-color:transparent; color:#03101F; font-weight:700; box-shadow:0 8px 22px -10px var(--teal-glow); } .btn-teal:hover, .btn-primary:hover{ background:linear-gradient(145deg, var(--teal-l), var(--teal)); border-color:transparent; color:#03101F; box-shadow:0 12px 28px -10px var(--teal-glow); } .btn-full{ width:100%; } .btn-primary:active, .btn-teal:active{ transform:scale(.98); } .badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); } .badge.b-teal{ background:var(--teal-dim); border-color:rgba(79,141,253,.32); color:var(--teal-l); } /* Boutons de filtre / segments */ .tf-btn, .dash-per-btn, .stat-scope-btn, .jt-fbtn, .eco-view-btn, .cg-btn, .pct-btn, .curve-gran button{ padding:7px 13px; background:transparent; border:1px solid var(--border2); border-radius:10px; color:var(--text2); font-family:var(--mono); font-size:11px; font-weight:500; transition:border-color .18s, color .18s, background .18s; white-space:nowrap; } .tf-btn:hover, .dash-per-btn:hover, .stat-scope-btn:hover, .jt-fbtn:hover, .eco-view-btn:hover, .cg-btn:hover, .pct-btn:hover, .curve-gran button:hover{ border-color:var(--teal); color:var(--teal-l); } .tf-btn.active, .dash-per-btn.dash-per-active, .stat-scope-btn.active, .jt-fbtn.active, .eco-view-btn.active, .cg-btn.active, .pct-btn.active, .curve-gran button.active{ background:var(--teal-dim); border-color:rgba(79,141,253,.42); color:var(--teal-l); font-weight:600; } /* Résultat / plan dans la session de backtest */ .btl-res.btl-res-active, .btl-plan.btl-plan-active{ background:var(--teal-dim); border-color:var(--teal); color:var(--teal-l); } /* ── 8. FORMULAIRES ────────────────────────────────────────────── */ .form-group{ margin-bottom:15px; } .form-label{ display:block; margin-bottom:7px; font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text3); } .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], select, textarea{ width:100%; padding:11px 14px; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r-md); color:var(--text); font-size:13px; transition:border-color .18s, box-shadow .18s, background .18s; } .form-input::placeholder, textarea::placeholder{ color:var(--text3); } .form-input:focus, input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-dim); } textarea, .auto-grow{ resize:vertical; min-height:90px; line-height:1.6; } select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235F6B84' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{ filter:invert(.65); cursor:pointer; } input[type="file"]{ padding:9px; font-size:12px; } /* Interrupteur */ .toggle{ position:relative; width:42px; height:23px; flex-shrink:0; background:var(--bg3); border:1px solid var(--border2); border-radius:99px; cursor:pointer; transition:background .24s var(--ease), border-color .24s; } .toggle::after{ content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--text3); transition:transform .24s var(--ease), background .24s; } .toggle.on{ background:var(--teal-dim); border-color:var(--teal); } .toggle.on::after{ transform:translateX(19px); background:var(--teal); } .settings-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--border3); } .settings-row:last-child{ border-bottom:none; } .settings-nav-item{ padding:9px 13px; border-radius:10px; font-size:12.5px; font-weight:500; color:var(--text2); cursor:pointer; white-space:nowrap; transition:background .18s, color .18s; } .settings-nav-item:hover{ background:var(--bg3); color:var(--text); } .settings-nav-item.active{ background:var(--teal-dim); color:var(--teal-l); font-weight:600; } .stab{ display:none; } .stab.active{ display:block; } /* ── 9. FENÊTRES MODALES ───────────────────────────────────────── */ .overlay{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(3,6,12,.74); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); overflow-y:auto; } /* Le script ouvre les fenetres avec la classe .active ; .show est tolere. */ .overlay.active, .overlay.show{ display:flex; } .modal{ position:relative; width:100%; max-width:480px; max-height:calc(100vh - 44px); overflow-y:auto; padding:28px; background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--border2); border-radius:22px; box-shadow:var(--sh-lg); animation:modalUp .36s var(--ease); } .modal-wide{ max-width:880px; } @keyframes modalUp{ from{ opacity:0; transform:translateY(20px) scale(.985); } to{ opacity:1; transform:none; } } .modal-title{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.02em; margin-bottom:5px; } .modal-sub{ font-size:12.5px; color:var(--text2); margin-bottom:20px; } /* ── 10. TABLEAUX ──────────────────────────────────────────────── */ table{ width:100%; border-collapse:collapse; } th{ padding:11px 13px; text-align:left; font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text3); border-bottom:1px solid var(--border); white-space:nowrap; } td{ padding:12px 13px; border-bottom:1px solid var(--border3); font-size:12.5px; color:var(--text); } tbody tr{ transition:background .18s; } tbody tr:hover{ background:rgba(255,255,255,.022); } tbody tr:last-child td{ border-bottom:none; } /* ── 11. ANALYSEUR D'ERREURS ───────────────────────────────────── */ .ia-wrap{ display:flex; flex-direction:column; gap:var(--gap); } .ia-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .ia-title{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.02em; } .ia-sub{ font-size:12.5px; color:var(--text2); } .ia-lbl{ font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.1px; color:var(--text3); margin-bottom:8px; } .ia-box{ padding:18px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-lg); } .ia-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--gap); } .ia-score{ display:flex; align-items:baseline; gap:9px; } .ia-score-n{ font-family:var(--display); font-weight:800; font-size:38px; letter-spacing:-.04em; line-height:1; } .ia-score-t{ font-family:var(--mono); font-size:10.5px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; } .ia-bar{ height:7px; border-radius:99px; background:var(--bg2); overflow:hidden; margin-top:12px; } .ia-bar > div{ height:100%; border-radius:99px; transition:width .8s var(--ease); } .ia-verdict{ padding:15px 17px; border-radius:var(--r-md); background:var(--teal-dim); border:1px solid rgba(79,141,253,.26); font-size:13px; line-height:1.62; } .ia-constats{ display:flex; flex-direction:column; gap:10px; } .ia-msg, .ia-regle, .ia-fort, .ia-cost, .ia-ctrl, .ia-out{ padding:13px 15px; border-radius:var(--r-md); background:var(--bg3); border:1px solid var(--border); font-size:12.5px; line-height:1.6; } .ia-fort{ border-left:3px solid var(--green); } .ia-cost{ border-left:3px solid var(--coral); } .ia-ctrl{ border-left:3px solid var(--amber); } .ia-regle{ border-left:3px solid var(--teal); } .ia-stamp{ font-family:var(--mono); font-size:10px; color:var(--text3); } .ia-sel{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .ia-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 19px; background:linear-gradient(145deg, var(--teal), var(--teal-d)); border:none; border-radius:var(--r-md); color:#03101F; font-size:13px; font-weight:700; box-shadow:0 8px 22px -10px var(--teal-glow); transition:transform .18s var(--ease), box-shadow .18s; } .ia-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -10px var(--teal-glow); } /* ── 12. DIVERS ────────────────────────────────────────────────── */ .csv-format-card{ padding:16px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-lg); transition:border-color .2s, transform .2s var(--ease); } .csv-format-card:hover{ border-color:var(--teal); transform:translateY(-2px); } .primary{ color:var(--teal-l); } .kdt-widget-hidden{ display:none; } /* Mode confidentiel : simple marqueur d'état, SANS effet visuel. Le masquage se fait déjà dans le JS, qui remplace les chiffres par des points. Flouter la page entière et couper les clics rendait le tableau de bord inutilisable dès qu'on activait le mode. */ .kdt-prive{ /* rien : voir le commentaire ci-dessus */ } .kdt-expanded{ grid-column:1 / -1; } @keyframes kdtDotPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.82); } } /* ── 13. RESPONSIVE ────────────────────────────────────────────── */ /* Une seule cascade : 1240 → 1100 → 780 → 520 */ @media (max-width:1240px){ .content{ padding-left:20px; padding-right:20px; } .tb-label{ display:none; } } /* Bascule du panneau latéral en superposition */ @media (max-width:1100px){ .sidebar{ transform:translateX(-100%); box-shadow:var(--sh-lg); } .sidebar.open{ transform:translateX(0); } .main{ margin-left:0; } .topbar{ left:0; } .spacebar{ left:0; } .hamburger-btn{ display:flex; } .te-title{ max-width:150px; } } /* En dessous de 1000px, le titre de page et le bloc de droite occupent déjà toute la barre : le bandeau « prochaine annonce » n'a plus la place. On le retire, il reste consultable dans la section Marchés. */ @media (max-width:1000px){ #topbar-eco.on{ display:none; } } @media (max-width:780px){ :root{ --topbar-h:58px; --spacebar-h:46px; --gap:12px; } .content{ padding-left:14px; padding-right:14px; padding-bottom:44px; } .topbar{ padding:0 14px; gap:10px; } .spacebar{ padding:0 14px; } .page-title{ font-size:14.5px; } #topbar-eco, #topbar-eco.on{ display:none; } /* L'horloge ouvre le choix du fuseau horaire : elle doit rester atteignable. On ne masque que l'étiquette de séance. */ .tb-status{ display:flex; align-items:center; } .live-clock{ font-size:12px; padding:0 2px; } .kpi-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .kpi-val{ font-size:21px; } .kpi-card{ padding:14px; } .space{ padding:7px 11px; font-size:12px; } .modal{ padding:22px; border-radius:18px; } .ia-2{ grid-template-columns:1fr; } .topbar-btn{ padding:0 10px; } /* Les tableaux larges défilent au lieu de déborder */ .card > table, .section table{ min-width:560px; } .table-scroll, .card:has(> table){ overflow-x:auto; } } /* Sous 520px, la barre du haut n'a plus la place pour tout : le bouton de menu venait littéralement sur l'horloge. On resserre les écarts, on réduit les boutons, et le libellé de date passe à la trappe — l'essentiel (menu, titre, heure, notifications, nouveau trade) reste. */ @media (max-width:520px){ .topbar{ padding:0 10px; gap:6px; } .topbar-right{ gap:5px; } .topbar-zone-l{ gap:8px; } .hamburger-btn{ width:32px; height:32px; padding:0 7px; } #notif-bell, #priv-btn, #kdt-gear-btn{ width:30px !important; height:30px !important; font-size:13px !important; } .topbar-btn{ height:32px; padding:0 8px; } .live-clock{ font-size:11px; } } @media (max-width:400px){ /* Le mode confidentiel et les réglages restent accessibles dans le menu latéral et les paramètres : on libère la barre. */ } @media (max-width:520px){ :root{ --gap:10px; } .content{ padding-left:11px; padding-right:11px; } .kpi-row{ grid-template-columns:1fr 1fr; gap:10px; } .kpi-val{ font-size:19px; } .kpi-label{ font-size:10px; letter-spacing:.9px; } .sidebar{ width:min(292px, 88vw); } .modal{ padding:18px; } .login-card{ padding:26px 20px; } .btn{ padding:9px 14px; font-size:12px; } .space{ padding:8px 11px; } .space-sub{ margin-left:7px; padding-left:8px; } } /* Confort de saisie sur iOS : évite le zoom automatique */ @media (max-width:780px){ input, select, textarea{ font-size:16px; } .form-input{ font-size:16px; } } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } @media print{ .sidebar, .topbar, .spacebar, .hamburger-btn, .overlay, .sidebar-backdrop{ display:none; } .main{ margin-left:0; } .content{ padding:0; } body{ background:#fff; color:#000; } } /* ══════════════════════════════════════════════════════════════════ 14. COMPOSANTS SECONDAIRES Reportés de la v1 puis réaccordés au thème 2.0. ══════════════════════════════════════════════════════════════════ */ #kdt-voile{position:fixed; inset:0; z-index:150; background:rgba(5,8,13,.55); display:none; opacity:0; transition:opacity .25s;} #topbar-eco-drop{display:none; position:fixed; background:var(--card2); border:1px solid var(--border2); border-radius:var(--r-md); box-shadow:0 14px 40px rgba(0,0,0,.55); z-index:400; max-height:60vh; overflow-y:auto;} .te-head{padding:9px 13px; border-bottom:1px solid var(--border3); font-family:var(--mono); font-size:10px; letter-spacing:.9px; text-transform:uppercase; color:var(--text3);} .te-row{display:flex; align-items:center; gap:10px; padding:9px 13px; border-bottom:1px solid rgba(255,255,255,0.035); cursor:pointer; transition:background .13s;} .te-row:last-child{border-bottom:none;} .te-row:hover{background:var(--bg3);} .te-row .h{font-family:var(--mono); font-size:11px; color:var(--text2); width:42px; flex-shrink:0; font-variant-numeric:tabular-nums;} .te-row .i{width:7px;height:7px;border-radius:50%;flex-shrink:0;} .te-row .t{flex:1; min-width:0; font-size:11.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .te-row .c{font-family:var(--mono); font-size:10px; color:var(--text3); flex-shrink:0;} .te-row.past .t, .te-row.past .h{opacity:.42;} .te-foot{padding:9px 13px; text-align:center; font-family:var(--mono); font-size:10px; color:var(--teal-l); cursor:pointer; border-top:1px solid var(--border3);} .te-foot:hover{background:var(--bg3);} .eco-bell{background:transparent; border:1px solid var(--border3); color:var(--text3); border-radius:6px; width:26px; height:26px; flex-shrink:0; cursor:pointer; font-size:11px; line-height:1; transition:all .15s;} .eco-bell:hover:not(:disabled){border-color:var(--teal); color:var(--teal-l);} .eco-bell:disabled{opacity:.25; cursor:default;} #dash-goal .goal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; padding:6px 12px; flex-wrap:nowrap;} #dash-goal .goal-head-left{display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; overflow:hidden;} #dash-goal .goal-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #dash-goal .goal-badge{flex-shrink:0;} #dash-goal .goal-head-right{display:flex; align-items:center; gap:7px; flex-shrink:0;} .jt-lim{border:1px solid var(--border2); background:var(--bg3); color:var(--text2); border-radius:6px; padding:3px 9px; font-family:var(--mono); font-size:10px; cursor:pointer; transition:all .15s;} .jt-lim:hover{border-color:var(--teal);} .jt-lim-off{color:var(--text3); opacity:.7;} .jt-lim-ok{border-color:rgba(34,197,94,.35); color:var(--green);} .jt-lim-warn{border-color:rgba(245,158,11,.4); color:var(--amber);} .jt-lim-full{border-color:rgba(239,68,68,.45); color:var(--red); background:var(--red-dim);} #notif-bell:hover, #kdt-gear-btn:hover{border-color:var(--teal); color:var(--teal-l);} .section-label-line{height:1px; background: var(--border); flex:1;} .btn-coral{background: var(--coral); color:#1a0a06; border:none; font-weight:600;} .btn-coral:hover{background: var(--coral-l);} .b-coral{background: var(--coral-dim); border:1px solid rgba(239,68,68,0.25); color: var(--coral-l);} .b-green{background: var(--green-dim); border:1px solid rgba(62,207,142,0.25); color: var(--green);} .b-red{background: var(--red-dim); border:1px solid rgba(239,68,68,0.25); color: var(--red);} .b-amber{background: var(--amber-dim); border:1px solid rgba(240,185,79,0.25); color: var(--amber);} .rich-wrap{border:1px solid var(--border3); border-radius:9px; overflow:hidden; background:var(--bg3);} .rich-bar{display:flex; align-items:center; gap:3px; padding:7px 9px; background:var(--card2); border-bottom:1px solid var(--border3); flex-wrap:wrap;} .rich-btn{background:transparent; border:1px solid transparent; border-radius:6px; color:var(--text2); font-family:var(--mono); font-size:12.5px; min-width:28px; height:28px; padding:0 7px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; display:inline-flex; align-items:center; justify-content:center;} .rich-btn:hover{background:var(--bg3); color:var(--teal-l); border-color:var(--border2);} .rich-btn:active{transform:translateY(1px);} .rich-sep{width:1px; height:18px; background:var(--border3); margin:0 4px;} .rich-emojis{display:none; padding:8px 9px; background:var(--card2); border-bottom:1px solid var(--border3); flex-wrap:wrap; gap:2px; max-height:130px; overflow-y:auto;} .rich-emoji{background:transparent; border:0; border-radius:6px; font-size:16px; width:30px; height:30px; cursor:pointer; transition:background .12s,transform .12s;} .rich-emoji:hover{background:var(--bg3); transform:scale(1.18);} .rich-area{padding:12px 13px; color:var(--text); font-family:var(--mono); font-size:12.5px; line-height:1.7; outline:none; overflow-wrap:break-word;} .rich-area:focus{box-shadow:inset 0 0 0 1px var(--border2);} .rich-area:empty:before{content:attr(data-placeholder); color:var(--text3);} .rich-area ul, .rich-area ol{margin:6px 0 6px 20px; padding:0;} .rich-area li{margin:3px 0;} .rich-area b, .rich-area strong{color:var(--text); font-weight:700;} .rich-area u{text-decoration-color:var(--teal);} #toast{position:fixed; bottom:24px; right:24px; background: var(--card2); border:1px solid var(--teal); border-radius:10px; padding:13px 18px; font-family:var(--mono); font-size:12px; z-index:999; display:none; box-shadow: 0 10px 40px rgba(0,0,0,0.4);} .cal-day-short{display:none;} .tb-label-short{display:none;} .kdt-cal-has-trade::after{content:"✦";position:absolute;top:4px;right:6px;font-size:10px;color:var(--teal-l);animation:kdtCalSparkle 1.8s ease-in-out infinite;} .kdt-cal-has-trade:hover{box-shadow:0 0 14px rgba(59,130,246,0.35);} .kdt-cal-live{animation:kdtCalLiveGlow 1.6s ease-in-out infinite;} .kdt-cal-live::after{content:"";animation:none;} .kdt-gear-item{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--text2);font-family:var(--display);transition:background .15s,color .15s;white-space:nowrap;} .kdt-gear-item:hover{background:rgba(255,255,255,0.05);color:var(--teal-l);} #kdt-gear-btn:hover{border-color:var(--teal);color:var(--teal-l);} /* ── 15. ÉLÉMENTS CONSTRUITS PAR LE SCRIPT ─────────────────────── */ /* Ces classes n'apparaissent pas dans le HTML : le script les crée à l'exécution. Sans règle, les blocs s'affichaient bruts. */ /* Constats de l'analyseur */ .ia-c{ padding:16px 18px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-lg); transition:border-color .2s, transform .2s var(--ease); } .ia-c:hover{ border-color:rgba(79,141,253,.28); transform:translateY(-2px); } .ia-c-h{ display:flex; align-items:baseline; justify-content:space-between; gap:13px; flex-wrap:wrap; margin-bottom:8px; } .ia-c-t{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.02em; color:var(--text); } .ia-c-d{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--teal-l); background:var(--teal-dim); border:1px solid rgba(79,141,253,.24); padding:3px 10px; border-radius:99px; white-space:nowrap; } .ia-c-e{ margin:0; font-size:12.5px; line-height:1.65; color:var(--text2); } .ia-label{ font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.1px; color:var(--text3); } .ia-spin{ width:15px; height:15px; flex-shrink:0; border:2px solid rgba(3,16,31,.28); border-top-color:#03101F; border-radius:50%; animation:iaSpin .7s linear infinite; } @keyframes iaSpin{ to{ transform:rotate(360deg); } } .ia-verdict p, .ia-regle p{ margin:0; font-family:var(--display); font-weight:600; font-size:14.5px; line-height:1.55; color:var(--text); } .ia-box p{ margin:0; font-size:12.5px; line-height:1.62; color:var(--text2); } .ia-bar span{ display:block; height:100%; border-radius:99px; width:0; background:linear-gradient(90deg, var(--coral), var(--teal)); transition:width 1s var(--ease); } .ia-expanded{ grid-column:1 / -1; } /* Répartition multi-comptes */ .kdt-multi-acc{ display:flex; align-items:center; justify-content:space-between; gap:11px; padding:9px 12px; margin-bottom:6px; background:var(--bg3); border:1px solid var(--border3); border-radius:var(--r-sm); font-size:12px; } .kdt-multi-acc:last-child{ margin-bottom:0; } .kdt-multi-pnl{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; } /* Fiche détaillée d'un compte */ .kdt-acc-detail-card{ background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--border2); border-radius:22px; box-shadow:var(--sh-lg); transform:translateY(16px) scale(.985); transition:transform .32s var(--ease); } /* Ligne de mise en page générique */ .lay-row{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; } /* Chevron du calendrier économique */ .eco-chevron{ display:inline-block; font-size:11px; color:var(--text3); transition:transform .22s var(--ease); } .eco-chevron.open{ transform:rotate(90deg); } /* Libellés de jour du calendrier : long en large, court en étroit */ .cal-day-long{ display:inline; } @media (max-width:640px){ .cal-day-long{ display:none; } .cal-day-short{ display:inline; } } /* Calendriers : sept jours plus une colonne « Semaine ». Les colonnes étaient posées en style direct par le JS, donc hors de portée des media queries : à partir de huit colonnes sur un petit écran, les montants débordaient de 358 px. Le CSS reprend la main, et la colonne de synthèse se retire quand la place manque — le total hebdomadaire reste lisible dans le bloc de statistiques sous le calendrier. */ .kdt-cal-grid{ display:grid; gap:8px; grid-template-columns:repeat(7, minmax(0, 1fr)) 1.1fr; } .kdt-cal-grid > *{ min-width:0; overflow:hidden; } /* Le total de la semaine vient TOUJOURS après le dimanche. Quand la 8e colonne ne tient plus, il devient un bandeau sur toute la largeur, placé juste sous sa semaine : l'information reste, et reste à sa place dans la lecture. */ @media (max-width:860px){ .kdt-cal-grid{ grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; } .kdt-cal-week-h{ display:none; } .kdt-cal-week:not(.kdt-cal-week-h){ grid-column:1 / -1; min-height:0 !important; flex-direction:row !important; align-items:center; justify-content:center; gap:10px; padding:8px 10px !important; } .kdt-cal-week:not(.kdt-cal-week-h) > *{ margin-top:0 !important; } } @media (max-width:420px){ .kdt-cal-grid{ gap:4px; } } /* Montants du calendrier : deux écritures, jamais de troncature. Sur sept colonnes étroites, « +1402.48€ » ne rentre pas et se faisait couper en « +140 » — un chiffre faux. La forme courte arrondit à l'unité : c'est plus honnête qu'un nombre amputé. */ .cal-val .v-court{ display:none; } @media (max-width:760px){ .cal-val .v-long{ display:none; } .cal-val .v-court{ display:inline; } .kdt-cal-grid .cal-val{ font-size:11px !important; letter-spacing:-.02em; } } /* Les huit intervalles du graphique passent à la ligne plutôt que de pousser la page. */ .tf-row{ display:flex; gap:6px; flex-wrap:wrap; min-width:0; } @media (max-width:420px){ .tf-row .tf-btn{ padding:0 8px; font-size:11px; } } /* Un canvas a une largeur propre : sans cette borne il déborde de son conteneur sur les petits écrans. */ canvas{ max-width:100%; } /* Beaucoup d'en-têtes de cartes sont des rangées « titre à gauche, commandes à droite » écrites directement dans les balises, sans autorisation de passer à la ligne. Sur un téléphone, les deux moitiés finissaient l'une sur l'autre. On les laisse se replier. */ @media (max-width:640px){ .section.active [style*="space-between"]{ flex-wrap:wrap !important; } .section.active [style*="space-between"] > *{ min-width:0; } #cal-month-label-dash, #cal-month-label{ min-width:0 !important; } } /* ══════════════════════════════════════════════════════════════════ 16. TENUE EN LARGEUR CONTRAINTE Le HTML porte de nombreuses grilles en style direct, pensees pour un grand ecran. Sous 640 px elles sont ramenees a une colonne. Le calendrier (7 colonnes) et les listes a colonnes fixes sont volontairement laisses de cote : ils defilent lateralement. ══════════════════════════════════════════════════════════════════ */ /* Rien ne doit pousser la page au-dela de la fenetre. */ html{ overflow-x:hidden; } .main, .content, .section, .card{ min-width:0; } .kpi-row > *, .card > *{ min-width:0; } /* Barre du haut : le bloc de droite se comprime au lieu de pousser. Attention : PAS d'overflow:hidden ici. Les menus déroulants (fuseau horaire, notifications, prochaine annonce) sont des enfants de cette barre : les rogner les rendait invisibles. On agit sur min-width. */ .topbar{ min-width:0; } .topbar-right{ min-width:0; } .topbar-left{ overflow:hidden; } .page-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topbar-right{ min-width:0; } /* Barre d'espaces : le debordement reste interne. */ .spacebar{ max-width:100vw; } .space-sub{ flex-shrink:0; } @media (max-width:780px){ /* Ces trois raccourcis existent aussi dans le menu lateral. */ } @media (max-width:640px){ /* TOUTE grille écrite dans une balise passe à une colonne. Auparavant les motifs étaient énumérés un par un : « 1.15fr 1fr » n'y figurait pas, les deux cartes de la section Marchés restaient côte à côte sur un téléphone et se chevauchaient. Une règle qui couvre tous les cas vaut mieux qu'une liste à compléter. */ .section.active [style*="grid-template-columns"]{ grid-template-columns:1fr !important; } /* Exception : les calendriers gardent leurs sept colonnes. */ .section.active [style*="repeat(7,1fr)"], .section.active .kdt-cal-grid{ grid-template-columns:repeat(7, minmax(0, 1fr)) !important; } /* Listes a colonnes fixes : defilement lateral plutot que debordement. */ [style*="grid-template-columns:36px"], [style*="grid-template-columns:80px"], [style*="grid-template-columns:60px"]{ overflow-x:auto; } } /* Le raccourci « retour au tableau de bord » fait doublon avec le menu lateral, qui se referme de lui-meme apres un choix : on le retire des petits ecrans pour laisser respirer le titre. */ @media (max-width:780px){ #kdt-back-dash{ display:none !important; } } /* Le graphique embarque impose parfois sa largeur : on la borne. */ #tv-chart, .tradingview-widget-container, [id*="tradingview"]{ max-width:100%; overflow:hidden; } /* ── 17. VOILE DU MENU : ACCROCHE A L'ETAT REEL DU PANNEAU ────── Le voile et le bouton se reglaient sur leurs propres classes. Si une seule des trois n'etait pas posee, le menu s'ouvrait sans voile et le bouton ne se transformait pas en croix. On lit desormais l'etat du panneau lui-meme : une seule source. */ .app-shell:has(.sidebar.open) .sidebar-backdrop{ opacity:1; visibility:visible; transition:opacity .28s var(--ease), visibility 0s linear 0s; } .app-shell:has(.sidebar.open) .hamburger-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .app-shell:has(.sidebar.open) .hamburger-btn span:nth-child(2){ opacity:0; } .app-shell:has(.sidebar.open) .hamburger-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* Au-dela du point de bascule le panneau est permanent : pas de voile. */ @media (min-width:1101px){ .app-shell:has(.sidebar.open) .sidebar-backdrop{ opacity:0; visibility:hidden; } } /* ── 18. BOUTONS SANS CLASSE ──────────────────────────────────── Certains boutons du HTML n'ont pas de classe : on leur donne la meme allure que les segments de la barre d'espaces. */ .space-sub button, #priv-btn{ padding:7px 13px; border-radius:10px; border:1px solid var(--border2); background:transparent; color:var(--text2); font-size:12px; font-weight:500; white-space:nowrap; transition:border-color .18s, color .18s, background .18s; } .space-sub button:hover, #priv-btn:hover{ border-color:var(--teal); color:var(--teal-l); background:var(--teal-dim); } .space-sub button.on, .space-sub button.active{ background:var(--teal-dim); border-color:rgba(79,141,253,.42); color:var(--teal-l); font-weight:600; } #priv-btn{ padding:0 10px; height:36px; font-size:14px; } /* ══════════════════════════════════════════════════════════════════ 18. FAIRE GLISSER PLUTÔT QUE RÉTRÉCIR Principe : quand la place manque, RIEN ne disparaît. Le contenu reste entier et devient accessible en faisant glisser — sur le côté pour les rangées, de haut en bas pour la page. Les règles qui masquaient des boutons ou des libellés ont été retirées. ══════════════════════════════════════════════════════════════════ */ /* Un repère visuel : un dégradé au bord droit indique qu'il reste du contenu à atteindre. Sans lui, une rangée coupée passe pour un bug. */ .glisse{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:thin; } .glisse::-webkit-scrollbar{ height:6px; } .glisse::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:99px; } .glisse > *{ flex-shrink:0; scroll-snap-align:start; } /* Barre de navigation : tous les espaces restent, on glisse pour les atteindre. Le dégradé de droite signale qu'il y a une suite. */ .spacebar{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); } .spacebar > *{ flex-shrink:0; } /* Le masque ne doit pas s'appliquer quand tout tient déjà. */ @media (min-width:1500px){ .spacebar{ -webkit-mask-image:none; mask-image:none; } } /* Barre du haut : le bloc de droite garde TOUS ses boutons et glisse latéralement si nécessaire. Le menu et le titre, eux, ne bougent pas : sans base fixe, le bloc de droite les poussait hors de l'écran. */ .topbar-zone-l{ flex:0 1 auto; min-width:92px; /* le bouton de menu reste toujours atteignable */ } .topbar-right{ /* « margin-left:auto » plutôt que « justify-content:flex-end » : avec un ancrage à droite, le début du contenu déborde vers la GAUCHE et devient inatteignable — le titre de page se retrouvait par-dessus le premier bouton. Ici la zone se colle à droite tant qu'il y a de la place, puis glisse normalement. */ flex:0 1 auto; min-width:0; margin-left:auto; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } .topbar-right::-webkit-scrollbar{ display:none; } .topbar-right > *{ flex-shrink:0; } /* Repère visuel : un dégradé au bord gauche du bloc de droite. ATTENTION — il est posé sur la BARRE, pas sur la zone qui glisse. « mask-image » fait de l'élément qui le porte le cadre de référence de tout enfant en position:fixed : appliqué sur .topbar-right, il rognait le choix du fuseau horaire. Même piège que « backdrop-filter ». Un pseudo-élément, lui, n'a pas cet effet. */ .topbar::after{ content:''; position:absolute; top:0; bottom:0; right:0; width:0; pointer-events:none; } @media (max-width:1100px){ .topbar{ position:fixed; } .topbar::after{ width:26px; background:linear-gradient(to left, var(--bg2), transparent); opacity:0; } } /* Les calendriers gardent leurs huit colonnes, semaine comprise, et se font glisser sur le côté quand l'écran est étroit. */ @media (max-width:860px){ .kdt-cal-grid{ grid-template-columns:repeat(7, minmax(64px, 1fr)) minmax(78px, 1.1fr) !important; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; } .kdt-cal-week-h{ display:block !important; } .kdt-cal-week:not(.kdt-cal-week-h){ grid-column:auto !important; flex-direction:column !important; } /* En glissement, le montant complet a de nouveau la place. */ .cal-val .v-long{ display:inline !important; } .cal-val .v-court{ display:none !important; } } @media (max-width:640px){ .section.active .kdt-cal-grid{ grid-template-columns:repeat(7, minmax(64px, 1fr)) minmax(78px, 1.1fr) !important; } } /* Tableaux et listes à colonnes : glissement latéral, jamais de colonne retirée. */ .section.active table{ min-width:max-content; } .tw, .table-wrap, .section.active [style*="grid-template-columns:36px"], .section.active [style*="grid-template-columns:80px"], .section.active [style*="grid-template-columns:60px"]{ overflow-x:auto; scrollbar-width:thin; } /* Le panneau latéral défile de haut en bas quand le menu est long. */ .sidebar{ overflow-y:auto; } /* Les fenêtres modales défilent au lieu de déborder de l'écran. */ .modal{ max-height:88vh; overflow-y:auto; } /* ══════════════════════════════════════════════════════════════════ 19. GRAIN DE LA V2 Les jetons ci-dessus portent la palette et les polices. Ce bloc reprend ce qui fait la signature visuelle de la V2 : des cartes plus sobres, des chiffres en Sora serré, un accent indigo qui respire. ══════════════════════════════════════════════════════════════════ */ /* Cartes : fond plat plutôt que dégradé, filet fin, angles généreux. */ .card, .kpi-card{ background:var(--card); border:1px solid var(--line, var(--border)); border-radius:var(--r-lg); box-shadow:none; } .card:hover, .kpi-card:hover{ border-color:var(--border2); box-shadow:var(--sh-sm); transform:none; } /* Les grands chiffres : Sora, très serré, comme dans la V2. */ .kpi-val, .login-logo-name, .page-title{ font-family:var(--display); letter-spacing:-.035em; } .kpi-val{ font-weight:800; } /* Les intitulés en petites capitales : plus d'air entre les lettres. */ .kpi-label{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--text3); } /* Chiffres toujours en chasse fixe et alignés en colonne. */ .kpi-val, .live-clock, [class*="num"]{ font-variant-numeric:tabular-nums; } /* Navigation d'espaces : pilule pleine sur l'espace actif. */ .space{ border-radius:var(--r-sm); font-weight:600; font-size:12.5px; padding:9px 15px; } .space.on{ color:#fff; background:linear-gradient(135deg, var(--teal), var(--teal-d)); box-shadow:0 6px 18px -8px var(--teal-glow); } .space.on .space-ic{ opacity:.9; } /* Menu latéral : l'entrée active se signale par une barre indigo. */ .nav-item{ border-radius:var(--r-sm); } .nav-item.active{ background:var(--teal-dim); color:var(--teal-l); position:relative; } .nav-item.active::before{ content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px; border-radius:0 3px 3px 0; background:var(--teal); } /* Boutons : le bouton principal prend le dégradé indigo. */ .btn{ border-radius:var(--r-sm); font-weight:600; } .btn-teal, .topbar-btn.primary{ background:linear-gradient(135deg, var(--teal), var(--teal-d)); border-color:transparent; color:#fff; box-shadow:0 8px 22px -10px var(--teal-glow); } .btn-teal:hover, .topbar-btn.primary:hover{ filter:brightness(1.08); border-color:transparent; color:#fff; } /* Champs de saisie : fond enfoncé, mise en avant discrète au focus. */ .form-input, .inp, input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea{ background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r-sm); } .form-input:focus, .inp:focus, input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-dim); } /* Barres du haut : opaques, une seule ligne de séparation. */ .topbar, .spacebar{ border-bottom:1px solid var(--border); } /* Fenêtres modales : plus rondes, ombre plus profonde. */ .modal{ border-radius:var(--r-xl, 26px); box-shadow:var(--sh-lg); } /* Le halo d'ambiance passe à l'indigo et au violet. */ body::before{ background: radial-gradient(900px 500px at 78% -12%, rgba(124,108,255,.10), transparent 60%), radial-gradient(700px 420px at 8% 105%, rgba(34,211,238,.05), transparent 60%); }