html { scroll-behavior: smooth; }
/* --- 1. VARIABLES : DARK MODE (Khaki Green Style) --- */
:root {
/* Backgrounds : Deep Carbon */
--bg-color: #0c0d10;
--card-bg: #16181d;
/* Text : Soft White */
--text-main: #f3f4f6;
--text-muted: #8b92a5;
/* The Accent : Dark Khaki Green */
--accent: #8a9a5b;
/* Borders : Glass effect */
--border: rgba(255, 255, 255, 0.06);
--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
--hover-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
/* Navigation and Sidebar */
--ind-bg: #0c0d10;
--ind-border: rgba(255, 255, 255, 0.04);
--ind-accent: #8a9a5b;
/* Logo & Inputs */
--logo-color: #ffffff;
--input-bg: rgba(255, 255, 255, 0.05);
--hover-bg: rgba(255, 255, 255, 0.08);
/* Semantic Colors */
--fast-grower: #10b981; --success: #10b981;
--stalwart: #3b82f6;
--slow-grower: #6b7280;
--cyclical: #f59e0b; --warning: #f59e0b;
--turnaround: #ef4444; --danger: #ef4444;
--asset-play: #8b5cf6;
/* Journal : note libre vs log structuré */
--j-note: #f59e0b;
--j-log: #3b82f6;
/* ---- SYSTÈME TYPOGRAPHIQUE ----
3 familles, une par couche : UI (sans) pour l'interface et les
titres, MONO pour tout ce qui est chiffre / ticker / horodatage,
SERIF réservée au corps de texte éditorial (leçons Academy).
8 tailles, une par rôle — on ne met JAMAIS une autre valeur de
font-size ailleurs, on pointe un de ces tokens. */
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
--font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
/* Échelle calée sur la fiche action (.sd-page), la référence :
sans-serif + font-variant-numeric partout, PAS de monospace
pour les données. */
--fs-hero: 2.5rem; /* hero d'en-tête de fiche : nom + cours */
--fs-display: 1.5rem; /* le grand nombre unique d'un encart (= .sd-val) */
--fs-title: 1.5rem; /* titre de page / de leçon */
--fs-h2: 1.15rem; /* titre de carte / de section (= .sd-page h2) */
--fs-h3: 1rem; /* sous-titre */
--fs-read: 0.82rem; /* corps des leçons : cale la HAUTEUR optique sur le reste
de l'app — Georgia a une œil plus grande, donc un poil
sous --fs-body pour un rendu équivalent. L'« éditorial »
vient de la serif + l'interligne, pas d'un corps plus gros */
--fs-body: 0.85rem; /* texte d'interface, cellules, lignes (= .sd-stat-row) */
--fs-sm: 0.78rem; /* labels, texte secondaire (= .sd-label) */
--fs-eyebrow: 0.78rem; /* libellés MAJUSCULES (= .sd-subhead) */
--fs-xs: 0.72rem; /* méta, horodatages, pastilles (= .sd-note) */
}
/* --- 2. VARIABLES : LIGHT MODE (Anthracite — fonds gris foncé, accent vert conservé) --- */
body.light-mode {
/* Backgrounds : style Apple — gris très clair, cartes quasi blanches */
--bg-color: #f0f0f2;
--card-bg: #fbfbfd;
/* Text : quasi-noir Apple */
--text-main: #1d1d1f;
--text-muted: #6e6e73;
/* The Accent : vert plus foncé pour fond clair */
--accent: #5f7040;
/* Borders & ombres : élévation douce */
--border: rgba(0, 0, 0, 0.07);
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px -4px rgba(0, 0, 0, 0.06);
--hover-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 16px 32px -8px rgba(0, 0, 0, 0.10);
/* Navigation */
--ind-bg: #f7f7f9;
--ind-border: rgba(0, 0, 0, 0.06);
--ind-accent: #5f7040;
/* Logo & Inputs */
--logo-color: #1d1d1f;
--input-bg: #ffffff;
--hover-bg: #e8e8ec;
--slow-grower: #86868b;
}
/* --- 3. STRUCTURE GENERALE ET SHAPES (Bord-radius) --- */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-color); color: var(--text-main); margin: 0; padding: 0; min-height: 100vh; transition: background-color 0.3s, color 0.3s; }
.page-title { font-size: var(--fs-display); font-weight: 700; color: var(--text-main); margin: 0 0 5px 0; }
.page-subtitle { color: var(--text-muted); font-size: var(--fs-h3); margin-top: 0; }
/* utilitaire : bascule un fragment en police chiffres */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Au chargement : on masque l'encart de connexion tant que /api/me n'a
pas répondu — sinon il apparaît une fraction de seconde avant que
l'app connectée ne prenne le dessus. Fond neutre le temps du check. */
body.booting #login-screen > * { visibility: hidden; }
/* --- Arrondis généreux et Ombres Apple pour TOUS les encarts --- */
.login-box, .module-card, .table-container, .filter-panel, .widget, .sd-card, .lesson-item, .lesson-content, .tv-chart-container, #section-overview, .sd-hero {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--card-shadow); /* <-- L'ombre s'applique maintenant au tableau et aux filtres ! */
transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
/* En-tete d'une fiche (action ou fonds) : la carte qui porte le nom,
le cours et les reperes. La fiche action l'avait en styles inline sur
son seul id ; c'est une classe pour que les deux fiches la partagent. */
.sd-hero { padding: 30px; margin-bottom: 30px; }
.login-box { padding: 40px; text-align: center; box-shadow: var(--hover-shadow); width: 100%; max-width: 380px; box-sizing: border-box; }
/* --- 1. Login & Textareas (Sans impacter le reste de l'application) --- */
.login-input, .sd-textarea {
width: 100%; padding: 12px 15px; margin: 8px 0; border-radius: 12px;
border: 1px solid var(--border); background-color: var(--input-bg);
color: var(--text-main); box-sizing: border-box; font-size: var(--fs-h3); transition: 0.2s;
}
.login-input:focus, .sd-textarea:focus { outline: none; border-color: var(--accent); background-color: var(--hover-bg); }
/* --- 2. Formulaires & Filtres du Screener (Correction des marges) --- */
.filter-group select, .filter-group input[type="number"], .columns-dropdown-btn {
height: 40px; border: 1px solid var(--border); border-radius: 10px;
padding: 0 12px; width: 100%; box-sizing: border-box; margin: 0;
background-color: var(--input-bg); color: var(--text-main); transition: 0.2s;
}
.filter-group select:focus, .filter-group input[type="number"]:focus {
outline: none; border-color: var(--accent);
}
/* --- 3. Correction des Menus Déroulants (Select) --- */
/* Les options doivent avoir un fond plein pour être lisibles au clic */
.filter-group select option {
background-color: var(--card-bg);
color: var(--text-main);
}
/* --- 4. Correction des Cases à Cocher (Menu Colonnes) --- */
/* On force le style natif pour ne pas hériter des gros arrondis Finary */
.columns-dropdown-menu input[type="checkbox"] {
width: auto !important; height: auto !important; margin: 0 8px 0 0 !important;
padding: 0 !important; display: inline-block; appearance: auto !important;
background-color: initial !important; border: none !important;
}
/* --- Arrondis pilules 10px Finary Style pour les boutons --- */
.login-btn, button, .nav-link, .tab-btn {
border-radius: 10px; /* Arrondi pilule Finary */
cursor: pointer; transition: 0.2s;
}
.login-btn { width: 100%; padding: 12px; margin-top: 20px; background-color: var(--accent); color: #fff; font-size: var(--fs-h3); font-weight: 700; border: none; }
.login-btn:hover { filter: brightness(1.1); }
/* box-sizing: sinon `width: 100%` + le décalage du rail (padding-left)
déborde la fenêtre de la largeur du rail — barre de défilement
horizontale, et tout le contenu poussé de travers. */
#app-container { display: none; width: 100%; box-sizing: border-box; }
.top-navbar { position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: var(--ind-bg); border-bottom: 1px solid var(--ind-border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 160; box-sizing: border-box; transition: 0.3s; }
.nav-left { display: flex; align-items: center; gap: 15px; min-width: 0; }
.hamburger-btn { background: none; border: none; color: var(--ind-accent); font-size: var(--fs-display); }
/* --- CORRECTION LOGO : Logo Blanc Pur ou Foncé --- */
.ascii-logo { font-family: 'Courier New', Courier, monospace; color: var(--logo-color) !important; font-size: var(--fs-h3); font-weight: 900; line-height: 1.1; cursor: pointer; margin: 0; transition: color 0.3s; }
/* --- 4. GESTION DU BOUTON DE MODE CONTEXTUEL A COTÉ DE LOGOUT --- */
.nav-right { display: flex; gap: 10px; align-items: center; }
/* Le Bouton Mode Contextuel (Style Finary, Cuivre en sombre, Gris en clair) */
#go-light-btn {
display: inline-flex; align-items: center; justify-content: center; width: auto;
padding: 6px 12px; font-size: var(--fs-body); font-weight: 700; text-transform: uppercase;
border-radius: 8px; /* Arrondi léger pilule */
transition: 0.2s;
}
/* Style Sombre : Cuivré/Or */
#go-light-btn { background-color: var(--accent); color: #fff; border: none; }
#go-light-btn:hover { filter: brightness(1.1); }
/* Style Clair : Gris carbone */
.light-mode #go-light-btn { background-color: var(--card-bg); color: var(--text-main); border: 1px solid var(--border); }
.light-mode #go-light-btn:hover { background-color: rgba(255,255,255,0.08); }
.logout-btn { padding: 6px 12px; background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-body); transition: 0.2s; }
.logout-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-main); }
/* --- 5. MENU LATERAL : rail d'icônes (icône + libellé d'un mot) --- */
.sidebar {
/* bottom: 0 plutôt qu'une hauteur en 100vh : sur mobile, 100vh compte
la barre d'adresse même quand elle est masquée, et Settings /
Log out finissaient sous le bas réel de l'écran. Ancrer les deux
bords tient toujours, peu importe ce que fait la barre du navigateur. */
position: fixed; top: 65px; bottom: 0; left: -90px; width: 76px;
background-color: var(--bg-color); border-right: 1px solid var(--border); z-index: 150;
padding: 10px 0 22px; box-sizing: border-box; overflow-y: auto;
display: flex; flex-direction: column;
transition: left 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), background-color 0.3s;
}
.sidebar.open { left: 0; }
.sidebar-brand { display: none; } /* les libellés de groupe disparaissent : deux filets suffisent */
.nav-link { display: flex; align-items: center; gap: 12px; color: var(--text-muted); padding: 10px 12px; text-decoration: none; font-weight: 600; margin-bottom: 4px; font-size: var(--fs-body); border-radius: 8px; transition: 0.15s;}
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.05); color: var(--accent); }
.sidebar .nav-link {
flex-direction: column; align-items: center; gap: 5px;
padding: 9px 4px 8px; margin: 0 6px 2px; border-radius: 10px;
position: relative; border-left: 0; font-weight: 600;
}
.sidebar .nav-link span {
font-size: var(--fs-xs); letter-spacing: 0.01em; line-height: 1;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar .nav-link:hover { background: rgba(138, 154, 91, 0.10); color: var(--text-main); }
.sidebar .nav-link.active {
background: rgba(138, 154, 91, 0.16); color: var(--text-main); font-weight: 700;
}
.sidebar .nav-link.active::before {
content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px;
width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-sep { height: 1px; background: var(--border); margin: 8px 16px; flex: 0 0 auto; }
.nav-spacer { flex: 1 1 auto; min-height: 8px; }
/* Icônes du menu : trait fin hérité de la couleur du libellé, donc
elles s'allument avec lui. Légèrement estompées au repos pour que
le texte reste ce qu'on lit en premier. La largeur est figée afin
que tous les libellés s'alignent, quel que soit le dessin. */
.nav-ico {
width: 18px; height: 18px; flex: 0 0 18px;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
opacity: 0.7; transition: opacity 0.15s;
}
.sidebar .nav-link .nav-ico { width: 22px; height: 22px; flex: 0 0 22px; }
.sidebar .nav-link:hover .nav-ico,
.sidebar .nav-link.active .nav-ico { opacity: 1; }
.sidebar .nav-link.active .nav-ico { color: var(--accent); }
.sidebar-overlay { display: none; position: fixed; top: 65px; left: 0; width: 100vw; height: calc(100vh - 65px); background: rgba(0, 0, 0, 0.6); z-index: 140; backdrop-filter: blur(4px); }
.sidebar-overlay.open { display: block; }
/* Rail repliable (desktop) : « ‹ Hide menu » en tête du rail pour le
ranger, et un ☰ flottant en haut à gauche pour le rappeler. */
.rail-collapse { display: none; }
.rail-open { display: none; position: fixed; top: 76px; left: 12px; z-index: 200;
width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
background: var(--card-bg); color: var(--text-main);
border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,0.35);
font-size: var(--fs-h2); line-height: 1; padding: 0; transition: 0.15s; }
.rail-open:hover { border-color: var(--accent); color: var(--accent); background: var(--card-bg); }
/* Desktop : rail toujours visible, plus de tiroir */
@media (min-width: 1024px) {
.hamburger-btn { display: none; }
.sidebar { left: 0; }
.sidebar-overlay { display: none !important; }
#app-container { padding-left: 76px; }
/* Ranger le rail : un chevron discret en tête, un ☰ flottant pour
le rappeler. Le rail — même à 76 px — se replie et rend sa place. */
.rail-collapse {
display: flex; align-items: center; justify-content: center;
color: var(--text-muted); font-size: var(--fs-h3); line-height: 1;
cursor: pointer; height: 24px; margin: 0 6px 6px; border-radius: 8px;
transition: color 0.15s, background 0.15s; flex: 0 0 auto;
}
.rail-collapse:hover { color: var(--accent); background: rgba(138, 154, 91, 0.10); }
body.rail-collapsed .sidebar { left: -90px; }
/* Gouttière de la largeur du bouton, sinon le ☰ passe par-dessus le
titre. Symétrique à droite : une marge d'un seul côté déséquilibre
toute la page. */
body.rail-collapsed #app-container { padding-left: 58px; padding-right: 58px; }
body.rail-collapsed .rail-open { display: block; }
}
/* Une seule largeur de contenu pour toutes les vues : passer du Dashboard
à une fiche action ne doit pas faire sauter la mise en page. Seul
Settings reste étroit (un formulaire long est illisible). */
.view-container { padding: 90px 28px 24px; max-width: 1600px; margin: 0 auto; width: 100%; box-sizing: border-box; display: none; }
#view-dashboard { flex-direction: column; align-items: center; }
.dashboard-header { text-align: center; margin-bottom: 40px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; width: 100%; max-width: 1200px;}
.module-card { padding: 35px 25px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: 0.3s; }
.module-card:hover, .widget:hover, .sd-card[onclick]:hover {
box-shadow: var(--hover-shadow) !important;
transform: translateY(-2px);
border-color: var(--accent);
}
.module-icon { font-size: var(--fs-display); font-weight: 800; margin-bottom: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--accent); }
.module-title { font-size: var(--fs-h2); font-weight: 600; margin-bottom: 12px; color: var(--text-main); }
.module-desc { font-size: var(--fs-h3); color: var(--text-muted); }
.segmented-control { display: inline-flex; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 2px; margin-bottom: 15px; border: 1px solid var(--border);}
/* Taille de référence = le bouton EUR/USD du portefeuille. Toutes les
bascules « choix multiple » grises s'y alignent. */
.seg-btn { padding: 5px 14px; border: none; background: transparent; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; transition: 0.2s;}
.seg-btn.active { background: var(--card-bg); color: var(--text-main); box-shadow: 0 1px 5px rgba(0,0,0,0.2); }
.tabs-container { display: flex; justify-content: center; margin-bottom: 20px; gap: 8px; }
.tab-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 8px 16px; font-size: var(--fs-body); font-weight: 600; transition: 0.2s;}
.tab-btn.active { background-color: rgba(138, 154, 91, 0.1); color: var(--accent); border-color: rgba(138, 154, 91, 0.3); }
.filter-panel { padding: 18px; margin-bottom: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; transition: 0.3s; }
.filter-group { display: flex; flex-direction: column; gap: 6px; position: relative; }
label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
/* --- IN-PLACE EXPANSION CARDS (Effet Apple / Pinterest) --- */
.expandable-card {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden; /* Empêche le texte de déborder pendant l'animation */
box-sizing: border-box;
}
/* L'état quand la carte est cliquée */
.expandable-card.expanded {
grid-column: 1 / -1; /* Demande à la carte de prendre 100% de la largeur de la grille */
/* Pas de scale() ici : à pleine largeur, le 1% de zoom faisait
déborder le contour de la carte sur celui de la leçon / des
cartes voisines. L'ombre + la bordure accent suffisent. */
box-shadow: 0 15px 40px -5px rgba(0,0,0,0.15) !important;
border-color: var(--accent) !important;
z-index: 10;
}
/* Gestion de l'affichage du contenu */
.expandable-card .hidden-detail { display: none; }
.expandable-card.expanded .hidden-detail {
display: block;
animation: fadeInDetail 0.5s ease forwards;
}
/* Quand c'est ouvert, on cache le petit résumé */
.expandable-card.expanded .card-summary { display: none; }
@keyframes fadeInDetail {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============ LEÇONS (format éditorial) ============ */
/* #lesson-body porte la classe .lesson-content, qui reçoit bordure +
ombre + fond par la règle globale des encadrés. Dans la nouvelle
mise en page (Notes), il est DÉJÀ dans une carte (.ac-lesson-card) :
on lui retire donc son propre contour — c'est lui qui faisait « le
tour » collé au texte. */
#lesson-body.lesson-content {
border: none; box-shadow: none; background: transparent; border-radius: 0;
}
/* Deux polices seulement, comme la fiche action (.sd-page) :
· lecture -> var(--font-serif) + var(--fs-read) (p, li, leads, encadrés) — l'éditorial
· reste -> var(--font-ui) + var(--fs-*) (titres, labels, tableaux, nombres)
Les nombres s'alignent via font-variant-numeric: tabular-nums, PAS via
du monospace. Aucune autre valeur de font-size dans ce bloc. */
#lesson-body .lesson {
max-width: 900px; margin: 8px auto 0; color: var(--text-main);
font-family: var(--font-serif);
animation: lessonFade .4s ease both;
}
/* Leçons "masterclass" (cartes dépliantes) : couche lecture en sans */
#lesson-body .lesson:has(.grid-container),
#lesson-body .lesson:has(.expandable-card) { font-family: var(--font-ui); }
/* Fiches "13 traits" (Lynch) : ouverture ~1.5x plus large */
dialog[id^="trait-modal-"] {
max-width: 780px !important; width: 92% !important; padding: 34px !important;
}
dialog[id^="trait-modal-"] h3 { font-size: var(--fs-h2) !important; margin: 0 0 16px !important; }
dialog[id^="trait-modal-"] p { font-size: var(--fs-read) !important; line-height: 1.65 !important; }
dialog[id^="trait-modal-"] button {
font-size: var(--fs-body) !important; padding: 10px 20px !important; margin-top: 20px !important;
}
@keyframes lessonFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* --- couche structure (sans) --- */
#lesson-body .lesson .l-title {
font-family: var(--font-ui);
font-size: var(--fs-title); font-weight: 750; line-height: 1.2; color: var(--text-main);
margin: 0 0 1.9rem; padding-bottom: 1.15rem; border-bottom: 2px solid var(--border);
}
#lesson-body .lesson .l-sec { margin-top: 2.3rem; }
#lesson-body .lesson .l-sec:first-of-type { margin-top: 0; }
#lesson-body .lesson h2 {
font-family: var(--font-ui);
font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; color: var(--text-main);
margin: 0 0 .9rem; display: flex; gap: .6rem; align-items: baseline;
}
#lesson-body .lesson h2 .l-num {
font-size: var(--fs-eyebrow); font-weight: 800; color: var(--accent); letter-spacing: .03em;
flex-shrink: 0; font-variant-numeric: tabular-nums;
}
#lesson-body .lesson h3 {
font-family: var(--font-ui);
font-size: var(--fs-h3); font-weight: 700; color: var(--text-main); margin: 1.4rem 0 .4rem;
}
#lesson-body .lesson .l-eg-label,
#lesson-body .lesson .l-warn-label,
#lesson-body .lesson .l-note-label,
#lesson-body .lesson .l-recap-label {
font-family: var(--font-ui);
font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-main); margin-bottom: .6rem;
}
#lesson-body .lesson .l-recap-label { color: var(--accent); }
/* Encadré « attention » (Limitation / Common mistake) : triangle ambre,
même facture que les icônes des notes explicatives. */
#lesson-body .lesson .l-warn-label::before {
content: ""; display: inline-block; width: 13px; height: 13px;
margin-right: 6px; vertical-align: -2px;
background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
/* --- couche lecture (serif, une seule taille) ---
Corps au contraste PLEIN (--text-main : noir sur clair, blanc sur
sombre) — le gris muté était trop pâle pour lire un texte long. */
#lesson-body .lesson p,
#lesson-body .lesson li,
#lesson-body .lesson .l-eg p,
#lesson-body .lesson .l-warn p,
#lesson-body .lesson .l-note p {
font-size: var(--fs-read); line-height: 1.62; margin: 0 0 .85em; color: var(--text-main);
}
#lesson-body .lesson li { line-height: 1.55; margin-bottom: .4em; }
#lesson-body .lesson .l-eg p,
#lesson-body .lesson .l-warn p,
#lesson-body .lesson .l-note p { line-height: 1.55; margin: 0 0 .55rem; color: var(--text-main); }
#lesson-body .lesson .l-eg p:last-child,
#lesson-body .lesson .l-warn p:last-child,
#lesson-body .lesson .l-note p:last-child { margin-bottom: 0; }
#lesson-body .lesson strong { color: var(--text-main); font-weight: 600; }
#lesson-body .lesson em.l-term { font-style: normal; border-bottom: 1px dotted var(--text-muted); }
#lesson-body .lesson a { color: var(--accent); }
#lesson-body .lesson .l-lead {
font-size: var(--fs-read); line-height: 1.55; color: var(--text-main); margin: 0 0 2.4rem;
padding-bottom: 1.7rem; border-bottom: 1px solid var(--border);
}
#lesson-body .lesson ul, #lesson-body .lesson ol { margin: 0 0 1em; padding-left: 1.25em; }
/* Encadrés : exemple chiffré / attention / à retenir */
#lesson-body .lesson .l-eg,
#lesson-body .lesson .l-warn,
#lesson-body .lesson .l-note {
margin: 1.35rem 0; padding: 1.05rem 1.2rem; border-radius: 6px; border-left: 4px solid;
}
#lesson-body .lesson .l-eg { border-left-color: var(--stalwart); background: rgba(59, 130, 246, .10); }
#lesson-body .lesson .l-warn { border-left-color: var(--cyclical); background: rgba(245, 158, 11, .12); }
#lesson-body .lesson .l-note { border-left-color: var(--accent); background: rgba(138, 154, 91, .12); }
/* --- nombres : sans-serif + tabular-nums (comme .sd-page), pas de mono --- */
#lesson-body .lesson .l-eg .n {
font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-main);
}
#lesson-body .lesson .l-eg-tbl {
width: 100%; max-width: 560px; border-collapse: collapse; margin: 1rem 0 1.1rem;
font-family: var(--font-ui); font-size: var(--fs-body);
border: 1px solid rgba(128,128,128,.3); border-radius: 4px; overflow: hidden;
}
#lesson-body .lesson .l-eg-tbl td {
padding: .7rem .85rem; border-bottom: 1px solid rgba(128,128,128,.22);
text-align: right; color: var(--text-main); background: var(--card-bg);
font-variant-numeric: tabular-nums;
}
#lesson-body .lesson .l-eg-tbl tr:last-child td { border-bottom: none; }
#lesson-body .lesson .l-eg-tbl td:first-child {
text-align: left; color: var(--text-main); font-weight: 500;
border-right: 1px solid rgba(128,128,128,.22);
font-family: var(--font-ui);
}
#lesson-body .lesson .l-eg-cap {
font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-muted); margin-top: .5rem;
}
#lesson-body .lesson .l-recap { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }
#lesson-body .lesson .l-recap ul { margin: 0; padding: 0; list-style: none; }
#lesson-body .lesson .l-recap li {
font-family: var(--font-ui);
font-size: var(--fs-body); line-height: 1.5; color: var(--text-main);
padding: .75rem 0 .75rem 1.4rem; position: relative; border-bottom: 1px solid var(--border);
}
#lesson-body .lesson .l-recap li:last-child { border-bottom: none; }
#lesson-body .lesson .l-recap li::before { content: "\2014"; position: absolute; left: 0; color: var(--accent); }
@media (max-width: 720px) {
#lesson-body .lesson { max-width: 100%; }
}
/* TABLE CSS */
/* La hauteur est ajustée en JS (_fitTableHeight) : la valeur ci-dessous
n'est qu'un repli avant le premier calcul. Elle était figée à
100vh - 250px, réservé pour le bandeau Annual/Rolling et le panneau
de filtres qui ont disparu — d'où une bande vide sous le tableau. */
.table-container { overflow-x: auto; max-height: calc(100vh - 210px); overflow-y: auto; transition: 0.3s; }
/* table-layout: fixed = colonnes de largeur égale ; min-width réglé en JS
selon le nombre de colonnes visibles (peu de colonnes -> remplit l'écran, sans scroll) */
table { width: 100%; text-align: left; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; }
/* 2. Gestion stricte du texte : retours à la ligne autorisés, mots trop longs coupés */
th, td {
padding: 10px 8px; /* Espacement légèrement réduit pour tout faire rentrer proprement */
border-bottom: 1px solid var(--border);
color: var(--text-main);
white-space: normal; /* Les suites de mots vont à la ligne naturellement */
overflow-wrap: break-word; /* Si un seul mot est trop long, il est coupé */
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis; /* Ajoute des "..." si ça déborde d'un bloc non cassable */
}
th { position: sticky; top: 0; background-color: var(--card-bg); z-index: 40; color: var(--text-muted); cursor: grab; user-select: none; }
tr.stock-row:hover { background-color: rgba(255,255,255,0.03); cursor: pointer; }
/* Bord droit de la colonne figée : une ombre portée plutôt qu'un trait —
on sent la colonne « au-dessus » du reste sans ligne dure. (box-shadow
n'est pas rognée par l'overflow:hidden des cellules, contrairement à
un ::after.) */
.col-ticker { width: 120px; position: sticky; left: 0; background-color: var(--card-bg); z-index: 30; box-shadow: 10px 0 12px -8px rgba(0,0,0,0.28); }
th.col-ticker { position: sticky; left: 0; top: 0; background-color: var(--card-bg); z-index: 50; box-shadow: 10px 0 12px -8px rgba(0,0,0,0.28); }
body.light-mode .col-ticker, body.light-mode th.col-ticker { box-shadow: 8px 0 10px -8px rgba(0,0,0,0.10); }
/* Catégorie Lynch : une pastille de couleur + un mot, pas un gros badge
sur chaque ligne. */
.cat-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.cat-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
/* Score Investor Lens : une jauge courte + le ratio. */
td.col-lens { text-align: center; }
th.col-metric, td.col-metric { text-align: center; white-space: nowrap; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
th.col-metric { font-weight: 600; color: var(--text-muted); }
.lens-score { display: inline-flex; align-items: center; gap: 7px; }
.lens-bar { width: 40px; height: 5px; border-radius: 3px; background: var(--input-bg); overflow: hidden; flex: 0 0 auto; }
.lens-bar i { display: block; height: 100%; }
.lens-n { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Tableau ETFs : la colonne d'identité se fige comme celle des actions,
même ombrage portée (pas un simple filet) pour dire « ça glisse
sous moi », les autres prennent une largeur adaptée à ce qu'elles
portent. */
.col-etf-fund { width: 190px; text-align: left; position: sticky; left: 0; background-color: var(--card-bg); z-index: 30; box-shadow: 10px 0 12px -8px rgba(0,0,0,0.28); }
th.col-etf-fund { position: sticky; left: 0; top: 0; background-color: var(--card-bg); z-index: 50; box-shadow: 10px 0 12px -8px rgba(0,0,0,0.28); }
body.light-mode .col-etf-fund, body.light-mode th.col-etf-fund { box-shadow: 8px 0 10px -8px rgba(0,0,0,0.10); }
/* Toutes les colonnes centrées — titres et valeurs — sauf la première :
l'identité (ticker/nom, fonds) reste serrée à gauche, figée. Même
traitement que les tableaux du dashboard (#pf-table, #pos-lots). */
#stocksTable th, #stocksTable td, #etfTable th, #etfTable td, #cryptoTable th, #cryptoTable td { text-align: center; }
/* Pays de résidence : libellés courts, on évite qu'un « United States »
n'élargisse la colonne — coupe proprement. */
#stocksTable td.col-country, #stocksTable th.col-country { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
#stocksTable th.col-ticker, #stocksTable td.col-ticker,
#etfTable th.col-etf-fund, #etfTable td.col-etf-fund,
#cryptoTable th.col-crypto-coin, #cryptoTable td.col-crypto-coin { text-align: left; }
/* Tableau Crypto : même traitement que la colonne Fund des ETFs —
colonne d'identité figée avec ombrage porté, largeur adaptée au
plus long nom (« Binance Coin » etc.). */
.col-crypto-coin { width: 130px; text-align: left; position: sticky; left: 0; background-color: var(--card-bg); z-index: 30; box-shadow: 10px 0 12px -8px rgba(0,0,0,0.28); }
th.col-crypto-coin { position: sticky; left: 0; top: 0; background-color: var(--card-bg); z-index: 50; box-shadow: 10px 0 12px -8px rgba(0,0,0,0.28); }
body.light-mode .col-crypto-coin, body.light-mode th.col-crypto-coin { box-shadow: 8px 0 10px -8px rgba(0,0,0,0.10); }
/* Aucune largeur sur les autres colonnes, comme au tableau des actions :
`table-layout: fixed` les répartit à égalité et le plancher posé par
updateTableWidth() leur garantit de quoi tenir sur une ligne. Des
largeurs sur mesure plus étroites que ce plancher faisaient replier
les libellés et triplaient la hauteur des lignes. */
/* Vertical Fine Line Finary Style */
th.border-separator, td.border-separator { border-right: 1px solid var(--border) !important; }
/* Le conteneur du menu déroulant (Nouvelles règles pour le faire flotter avec un fond) */
.columns-dropdown-menu {
display: none;
position: absolute;
top: 75px; /* Le place sous le bouton */
right: 0;
background-color: var(--card-bg) !important;
border: 1px solid var(--border);
border-radius: 12px;
padding: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
z-index: 999; /* Force le passage au premier plan, au-dessus de la table */
flex-direction: column;
min-width: 200px;
}
.columns-dropdown-menu input[type="checkbox"] { width: auto !important; height: auto !important; margin: 0 8px 0 0 !important; display: inline-block; appearance: auto !important; }
.columns-dropdown-menu label { font-size: var(--fs-body); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text-main); }
.fav-btn { cursor: pointer; background: transparent; border: none; font-size: var(--fs-h2); color: #4b5563; padding: 0; line-height: 1; transition: 0.2s; outline: none; }
.fav-btn:hover { transform: scale(1.2); }
.fav-btn.active { color: var(--accent); text-shadow: 0 0 8px rgba(229, 181, 129, 0.3); }
/* BADGES (Fond transparent teinté Finary Style) */
.badge { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: var(--fs-xs); font-weight: normal; text-transform: uppercase; }
.bg-fast { background: rgba(16, 185, 129, 0.1); color: var(--fast-grower); border: 1px solid rgba(16, 185, 129, 0.2); }
.bg-stalwart { background: rgba(59, 130, 246, 0.1); color: var(--stalwart); border: 1px solid rgba(59, 130, 246, 0.2); }
.bg-slow { background: rgba(156, 163, 175, 0.1); color: var(--slow-grower); border: 1px solid rgba(156, 163, 175, 0.2); }
.bg-cyclical { background: rgba(245, 158, 11, 0.1); color: var(--cyclical); border: 1px solid rgba(245, 158, 11, 0.2); }
.bg-turnaround { background: rgba(239, 68, 68, 0.1); color: var(--turnaround); border: 1px solid rgba(239, 68, 68, 0.2); }
.bg-asset { background: rgba(139, 92, 246, 0.1); color: var(--asset-play); border: 1px solid rgba(139, 92, 246, 0.2); }
.warn-text { color: var(--danger); font-weight: bold; }
.good-text { color: var(--success); font-weight: bold; }
.slow-grower { color: var(--text-muted); }
/* MACRO WIDGETS AND STOCK DETAILS (Structure rétablie) */
.tab-content { display: none; } .tab-content.active { display: block; }
.widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.widget { padding: 24px; display: flex; flex-direction: column; cursor: pointer; }
.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.widget-title { font-size: var(--fs-h3); color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.widget-value { font-size: var(--fs-display); font-weight: bold; margin-bottom: 10px; color: var(--text-main); }
.widget-footer { font-size: var(--fs-sm); color: var(--text-muted); display: flex; justify-content: space-between; }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.sd-card { padding: 15px; }
.sd-val { font-size: var(--fs-display); font-weight: bold; color: var(--text-main); }
/* --- Fiches (action ET fonds) : echelle typographique unifiee ---
Regles portees par la classe `.sd-page`, pas par l'id d'une vue :
la fiche d'un fonds doit se lire exactement comme celle d'une
action, et un id ne se partage pas. */
.sd-page h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--text-main); margin: 0; line-height: 1.3; }
.sd-page h3, .sd-page .sd-subhead {
font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
color: var(--accent); margin: 0 0 10px 0;
}
.sd-page .sd-label {
font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
display: block; margin-bottom: 5px; text-transform: none; letter-spacing: 0;
}
.sd-page .sd-val {
font-size: var(--fs-h2); font-weight: 700; color: var(--text-main);
font-variant-numeric: tabular-nums;
}
.sd-page .sd-stat-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 5px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body);
}
.sd-page .sd-stat-row .k { color: var(--text-muted); }
.sd-page .sd-stat-row .v {
color: var(--text-main); font-weight: 600; text-align: right;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sd-page .sd-note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.sd-page .sd-section-desc { font-size: var(--fs-body); color: var(--text-muted); margin: 0 0 15px 0; line-height: 1.45; }
/* Chevron d'accès à la fiche explicative, à côté du nom de l'indicateur */
.cs-doc {
display: inline-block; margin-left: 5px; cursor: pointer;
color: var(--text-muted); opacity: 0.5; font-weight: 700;
transition: opacity 0.15s, color 0.15s;
}
.cs-doc:hover { opacity: 1; color: var(--accent); }
.sd-stat-row:hover .cs-doc { opacity: 0.9; }
/* Cascade « du chiffre d'affaires au bénéfice net » (sous le tableau FS) */
.fs-wf { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.fs-wf:empty { display: none; }
.fs-wf-head { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.6px;
text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.fs-wf-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center;
gap: 12px; padding: 3px 0; }
.fs-wf-lbl { font-size: var(--fs-sm); color: var(--text-main); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.fs-wf-drop .fs-wf-lbl { color: var(--text-muted); padding-left: 10px; }
.fs-wf-track { height: 14px; background: var(--input-bg); border-radius: 3px; overflow: hidden; }
.fs-wf-drop .fs-wf-track { height: 10px; }
.fs-wf-bar { display: block; height: 100%; border-radius: 3px; }
.fs-wf-rev { background: var(--text-muted); }
.fs-wf-ebitda { background: var(--accent); }
.fs-wf-net { background: var(--success); }
.fs-wf-cost { background: var(--danger); opacity: 0.55; }
.fs-wf-val { font-size: var(--fs-sm); font-weight: 700; color: var(--text-main);
font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-wf-drop .fs-wf-val { font-weight: 600; color: var(--danger); }
.fs-wf-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 10px; }
@media (max-width: 560px) {
.fs-wf-row { grid-template-columns: 1fr auto; }
.fs-wf-track { grid-column: 1 / -1; order: 3; }
}
/* Santé du bilan (façon Simply Wall St) : deux colonnes de blocs
proportionnels, même hauteur (Actif = Passif + Capitaux propres). */
.fs-bh-cols { display: flex; gap: 20px; margin-top: 6px; }
.fs-bh-col { flex: 1 1 0; min-width: 0; }
.fs-bh-cap { font-size: var(--fs-sm); font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.fs-bh-bar { display: flex; flex-direction: column; gap: 2px; height: 240px;
border-radius: 6px; overflow: hidden; background: var(--input-bg); }
.fs-bh-seg { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
min-height: 28px; padding: 4px 10px; overflow: hidden; color: #fff; }
.fs-bh-t { font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.fs-bh-v { font-size: var(--fs-sm); font-weight: 800; line-height: 1.25;
font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-bh-a1 { background: var(--success); }
.fs-bh-a2 { background: var(--success); opacity: 0.55; }
.fs-bh-l1 { background: var(--danger); }
.fs-bh-l2 { background: var(--danger); opacity: 0.55; }
.fs-bh-eq { background: var(--stalwart); }
@media (max-width: 560px) {
.fs-bh-cols { flex-direction: column; }
.fs-bh-bar { height: auto; }
.fs-bh-seg { min-height: 44px; }
}
/* --- Investor Lens (test panel) --- */
.sd-page .lens-btn {
background: transparent; border: 1px solid var(--border); color: var(--text-muted);
padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm);
font-weight: 700; transition: 0.15s; white-space: nowrap;
}
.sd-page .lens-btn:hover { border-color: var(--accent); color: var(--text-main); }
.lens-crit {
display: grid; grid-template-columns: 20px 1fr auto; gap: 3px 10px;
padding: 10px 0; border-bottom: 1px solid var(--border); align-items: baseline;
}
.lens-crit .lc-icon { font-weight: 700; }
.lens-crit .lc-name { font-weight: 600; color: var(--text-main); font-size: var(--fs-body); }
.lens-crit .lc-val {
font-weight: 700; font-variant-numeric: tabular-nums; text-align: right;
font-size: var(--fs-body); white-space: nowrap;
}
.lens-crit .lc-desc { grid-column: 2 / 4; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
/* --- Sous-titre de zone sur la fiche action --- */
.sd-page .sd-zone-head { margin: 8px 2px -6px; }
.sd-page .sd-zone-head p {
font-size: var(--fs-body); color: var(--text-muted); margin: 0; line-height: 1.45; max-width: 60ch;
}
/* --- Onglets de la fiche action (style fiscal.ai) --- */
.sd-page .sd-tabs {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
border-bottom: 2px solid var(--border); padding-bottom: 12px; margin-bottom: 22px;
}
.sd-page .sd-tab {
background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted);
padding: 8px 14px; border-radius: 9px; cursor: pointer; letter-spacing: 0.2px;
font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 700;
white-space: nowrap; transition: 0.15s;
}
.sd-page .sd-tab:hover { color: var(--text-main); border-color: var(--accent); }
.sd-page .sd-tab.active {
color: #fff; background: var(--accent); border-color: var(--accent);
box-shadow: 0 2px 12px rgba(138, 154, 91, 0.4);
}
.sd-page #lens-start-thesis,
.sd-page #lens-learn-method {
padding: 9px 18px; border-radius: 9px; cursor: pointer; letter-spacing: 0.3px;
font-size: var(--fs-body); font-weight: 800; white-space: nowrap; transition: 0.15s;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); text-align: center;
}
.sd-page #lens-start-thesis { background: #ec9c4a; color: #3a2400; border: 1px solid #e0913c; }
.sd-page #lens-learn-method { background: #3b82f6; color: #fff; border: 1px solid #2f6fd6; }
.sd-page #lens-start-thesis:hover,
.sd-page #lens-learn-method:hover { filter: brightness(1.05); }
.sd-page .sd-panes { display: flex; gap: 24px; align-items: flex-start; }
.sd-page .sd-panes.is-single { max-width: 1180px; margin: 0 auto; }
.sd-page .sd-pane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.sd-page .sd-pane.is-hidden { display: none; }
.sd-page .sd-panes.is-split .sd-pane {
max-height: calc(100vh - 210px); overflow-y: auto;
position: sticky; top: 80px;
border: 1px solid var(--border); border-radius: 12px; padding: 16px;
background: var(--bg, var(--card-bg));
}
@media (max-width: 1100px) {
.sd-page .sd-panes.is-split { flex-direction: column; }
.sd-page .sd-panes.is-split .sd-pane {
max-height: none; overflow: visible; position: static;
}
}
.back-btn { background: transparent; border: 1px solid var(--border); padding: 8px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; margin-bottom: 20px; color: var(--text-main); transition: 0.2s; }
.back-btn:hover { background: var(--hover-bg); }
.btn-outline { background: transparent; border: 1px solid var(--border); padding: 8px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: var(--fs-body); color: var(--text-main); transition: 0.2s;}
.btn-outline:hover { background: var(--hover-bg); }
.btn-primary { background: var(--accent); border: none; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: var(--fs-body); color: #fff; transition: 0.2s;}
.btn-primary:hover { filter: brightness(1.1); }
.tv-chart-container { width: 100%; height: 450px; margin-bottom: 30px; background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border); padding: 15px; box-sizing: border-box; }
.toast { visibility: hidden; min-width: 200px; background-color: var(--accent); color: #fff; text-align: center; border-radius: 10px; padding: 12px; position: fixed; z-index: 300; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: var(--fs-body); font-weight: bold; opacity: 0; transition: opacity 0.3s; }
.toast.show { visibility: visible; opacity: 1; }
.info-trigger { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; background: rgba(255,255,255,0.1); border-radius: 50%; width: 10px; height: 10px; font-size: var(--fs-xs); font-weight: bold; border: 1px solid var(--border); color: var(--text-muted);}
.modal-overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(12, 13, 16, 0.8); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.modal-box { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; width: 90%; max-width: 650px; padding: 28px; box-shadow: var(--hover-shadow); position: relative; max-height: 85vh; overflow-y: auto; color: var(--text-main); }
.modal-close { position: absolute; top: 14px; right: 18px; font-size: var(--fs-h2); cursor: pointer; font-weight: bold; color: var(--text-muted); transition: 0.2s; }
.modal-close:hover { color: var(--accent); }
/* --- PORTFOLIO / HOLDINGS --- (tokens typo : mêmes rôles que .sd-page) */
.pf-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.pf-kpi .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; }
.pf-kpi .v { font-size: var(--fs-h2); font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.pf-kpi .s { font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; }
/* Bandeau du dashboard : valeur · composition · risque, en une carte
découpée par des filets — pas trois sous-cartes. */
:root { --pf-c-etf:#3b82f6; --pf-c-stock:#8a9a5b; --pf-c-crypto:#8b5cf6; --pf-c-cash:#8b92a5; --pf-c-copy:#f59e0b; }
body.light-mode { --pf-c-stock:#7a8b4f; --pf-c-cash:#64748b; }
.pf-band { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; display: grid; grid-template-columns: 1fr 1.15fr 1fr; margin-bottom: 12px; }
.pf-band > .pf-z { padding: 20px 22px; }
.pf-band > .pf-z + .pf-z { border-left: 1px solid var(--border); }
/* Échelle typographique calme : les libellés ne sont pas des micro-
capitales, et ils sont assez grands pour se lire à côté des chiffres
(rapport ~2× au titre, pas 3,5×). */
.pf-z .zl { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; margin: 0 0 14px; display: flex; justify-content: space-between; align-items: baseline; }
.pf-z .big { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-main); }
.pf-z .sub { font-size: var(--fs-sm); color: var(--text-muted); margin: 8px 0 14px; }
.pf-splitbar { height: 6px; border-radius: 3px; overflow: hidden; display: flex; background: var(--input-bg); margin-bottom: 16px; }
.pf-splitbar i { display: block; height: 100%; }
.pf-deltas { display: grid; gap: 10px; }
.pf-deltas .d { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pf-deltas .d .k { font-size: var(--fs-body); color: var(--text-muted); }
.pf-deltas .d .v { font-size: var(--fs-h3); font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-deltas .d .p { font-size: var(--fs-sm); font-weight: 600; margin-left: 6px; opacity: 0.85; }
.pf-comp { display: flex; gap: 18px; align-items: center; }
.pf-donut { position: relative; width: 116px; height: 116px; flex: 0 0 116px; }
.pf-donut canvas { width: 116px; height: 116px; display: block; }
.pf-donut .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pf-donut .mid .m1 { font-size: var(--fs-xs); color: var(--text-muted); }
.pf-donut .mid .m2 { font-size: var(--fs-body); font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.pf-legend { flex: 1; display: grid; gap: 7px; min-width: 0; }
.pf-legend .r { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; font-size: var(--fs-body); }
.pf-legend .dot { width: 9px; height: 9px; border-radius: 2px; }
.pf-legend .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main); }
.pf-legend .pc { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-legend .r.faint { opacity: 0.62; }
.pf-risk .rh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pf-risk .rh .n { font-size: var(--fs-h2); font-weight: 700; color: var(--text-main); }
.pf-risk .rh .vv { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-meter { display: flex; gap: 3px; margin: 14px 0 5px; }
.pf-meter i { flex: 1; height: 9px; border-radius: 2px; opacity: 0.3; }
.pf-meter i.on { opacity: 1; }
.pf-mrk { position: relative; height: 0; }
.pf-mrk i { position: absolute; top: -3px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--text-main); transform: translateX(-50%); }
.pf-mscale { display: flex; justify-content: space-between; margin-top: 6px; }
.pf-mscale span { font-size: var(--fs-xs); color: var(--text-muted); }
.pf-drivers { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
.pf-drivers li { font-size: var(--fs-sm); color: var(--text-muted); }
.pf-drivers li b { color: var(--text-main); font-weight: 700; }
.pf-stats { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 8px; }
.pf-stats .hd { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; padding: 15px 18px 6px; }
.pf-stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.pf-stats .s { padding: 13px 18px; border-top: 1px solid var(--border); }
.pf-stats .s:nth-child(-n+4) { border-top: 0; }
.pf-stats .s + .s { border-left: 1px solid var(--border); }
.pf-stats .s:nth-child(4n+1) { border-left: 0; }
.pf-stats .s .k { font-size: var(--fs-sm); color: var(--text-muted); }
/* (i) discret : juste un petit « i » atténué, pas la pastille pleine. */
.pf-stats .s .k .pf-i { width: auto; height: auto; border: 0; background: transparent;
font-weight: 700; font-style: italic; opacity: .55; margin-left: 3px; cursor: help; }
.pf-stats .s .k .pf-i:hover { opacity: 1; color: var(--accent); }
.pf-stats .s .v { font-size: var(--fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-main); margin-top: 3px; }
.pf-stats .s .x { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
/* Colonne Name : ticker en tête, société atténuée à côté, sur UNE
ligne. La colonne est calée pour que le plus long nom de société
du portefeuille tienne pile ; les libellés de fonds, plus longs,
se terminent par « … ». */
.pf-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-nm .cd { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.pf-nm .tk { font-weight: 700; color: var(--text-main); flex: 0 0 auto; }
.pf-nm .co { font-size: var(--fs-body); color: var(--text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
.pf-band { grid-template-columns: 1fr; }
.pf-band > .pf-z + .pf-z { border-left: 0; border-top: 1px solid var(--border); }
.pf-stats .grid { grid-template-columns: repeat(2, 1fr); }
.pf-stats .s:nth-child(-n+4) { border-top: 1px solid var(--border); }
.pf-stats .s:nth-child(2n+1) { border-left: 0; }
.pf-stats .s:nth-child(1), .pf-stats .s:nth-child(2) { border-top: 0; }
}
#pf-table th, #pf-closed-wrap th { text-align: center; padding: 8px 10px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
/* En-tête du tableau dashboard : libellé + tri + entonnoir alignés en
flex ; l'entonnoir et le caret ne rétrécissent jamais, seul le
libellé se tronque si vraiment à l'étroit. */
#pf-table thead th, #pf-closed-wrap thead th, #pos-lots thead th { padding: 7px 8px; font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
#pos-lots thead th { border-bottom: 1px solid var(--border); color: var(--text-muted); }
/* Même rythme que les autres tableaux de l'app (#pf-table…) : padding
régulier, filet fin sous chaque ligne, survol, pas de retour à la
ligne. Toutes les colonnes centrées, à parts égales — aucune n'a
plus de poids qu'une autre. */
#pos-lots th, #pos-lots td { width: calc(100% / 11); text-align: center; }
/* Side ne porte que 4 lettres ("BUY"/"SELL") ; P/L porte un montant ET
un pourcentage ("184 $ +67.1%") et se faisait tronquer. La largeur
reprise à Side va intégralement à P/L, les 9 autres colonnes gardent
leur part égale. */
#pos-lots th:nth-child(2), #pos-lots td:nth-child(2) { width: 5.09%; }
#pos-lots th:nth-child(9), #pos-lots td:nth-child(9) { width: 13.09%; }
#pos-lots td { padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--border); }
#pos-lots tbody tr:hover td { background: var(--hover-bg); }
#pos-lots tfoot td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 700; padding: 10px 12px; white-space: nowrap; }
#pos-lots select { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; }
#pf-table thead th .th-in, #pf-closed-wrap thead th .th-in { display: flex; align-items: center; gap: 3px; justify-content: center; }
#pos-lots thead th .th-in { display: flex; align-items: center; gap: 3px; justify-content: center; }
#pf-table thead th.pf-th-name .th-in, #pf-closed-wrap thead th.pf-th-name .th-in { justify-content: flex-start; }
#pf-table thead th .th-lbl, #pf-closed-wrap thead th .th-lbl, #pos-lots thead th .th-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pf-table thead th .col-filter, #pf-table thead th .pf-sc,
#pf-closed-wrap thead th .col-filter, #pf-closed-wrap thead th .pf-sc,
#pos-lots thead th .col-filter, #pos-lots thead th .pf-sc { flex: 0 0 auto; }
#pf-table th.sortable, #pf-closed-wrap th.sortable, #pos-lots th.sortable { cursor: pointer; user-select: none; }
#pf-table th.sortable:hover, #pf-closed-wrap th.sortable:hover, #pos-lots th.sortable:hover { color: var(--text-main); }
#pf-table th.sorted, #pf-closed-wrap th.sorted, #pos-lots th.sorted { color: var(--text-main); }
#pf-table th .pf-sc, #pf-closed-wrap th .pf-sc, #pos-lots th .pf-sc { font-size: 0.9em; }
.pf-tbl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 2px 10px; }
.pf-tbl-toolbar[hidden], .pf-tbl-toolbar:empty { display: none; }
#pf-table th:first-child, #pf-closed-wrap th:first-child { text-align: left; }
#pf-table td, #pf-closed-wrap td { text-align: center; padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pf-table td:first-child, #pf-closed-wrap td:first-child { text-align: left; white-space: nowrap; }
/* Largeur calée sur le plus long nom de SOCIÉTÉ du portefeuille
(« UnitedHealth Group Incorporated », 31 car.) + la pastille et le
ticker. Les noms de fonds, plus longs, sont tronqués. table-layout
est fixed : cette largeur est honorée, le reste se partage la place. */
#pf-table th:first-child, #pf-table td:first-child { width: 280px; }
#pf-closed-wrap th:first-child, #pf-closed-wrap td:first-child { width: 260px; }
#pf-table tbody tr.pf-pos { cursor: pointer; }
#pf-table tbody tr.pf-pos:hover { background: var(--hover-bg); }
.pf-lots td { background: rgba(255,255,255,0.02); font-size: var(--fs-sm); color: var(--text-muted); }
.pf-wbar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); vertical-align: middle; margin-left: 6px; }
#txModal label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
#txModal input, #txModal select, #txModal textarea { background: var(--bg-main, rgba(0,0,0,0.2)); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text-main); font-size: var(--fs-body); font-family: inherit; }
#txModal input:focus, #txModal select:focus, #txModal textarea:focus { outline: none; border-color: var(--accent); }
#pf-ind-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* --- SIDE-PEEK PANEL --- */
#side-peek {
position: fixed;
top: 65px;
right: -500px;
width: 450px;
max-width: 90vw;
height: calc(100vh - 65px);
background-color: var(--card-bg);
border-left: 1px solid var(--border);
box-shadow: -8px 0 30px rgba(0, 0, 0, 0.1);
z-index: 125;
transition: right 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
overflow-y: auto;
padding: 30px;
box-sizing: border-box;
}
#side-peek.open {
right: 0;
}
.side-peek-close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
font-size: var(--fs-h2);
color: var(--text-muted);
font-weight: bold;
transition: 0.2s;
padding: 5px 10px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.05);
}
.side-peek-close:hover {
color: var(--danger);
background: rgba(239, 68, 68, 0.1);
}
/* --- 5. OVERRIDES FORCÉS (Nettoyage des couleurs claires écrites en dur) --- */
/* 1. Cartes standards (On ne traque plus le #eff6ff ici) */
[style*="background: #f8fafc"], [style*="background:#f8fafc"],
[style*="background: #f1f5f9"], [style*="background:#f1f5f9"], /* NOUVEAU : Barre d'outils du journal */
[style*="background: #fff"], [style*="background:#fff"],
[style*="background: white"], [style*="background:white"] {
background-color: var(--card-bg) !important;
color: var(--text-main) !important;
border-color: var(--border) !important;
}
/* 2. Cartes-métriques cliquables (P/E, PEG, EPS…) — teinte bleue,
UNIQUEMENT dans la fiche action. Ailleurs, les cartes cliquables
gardent le fond standard. */
.sd-page .sd-card[onclick] {
background-color: rgba(59, 130, 246, 0.1) !important;
color: var(--text-main) !important;
transition: 0.2s !important;
}
.sd-page .sd-card[onclick]:hover {
border-color: var(--accent) !important;
background-color: rgba(59, 130, 246, 0.15) !important;
}
/* Cartes cliquables hors fiche action : fond normal, léger survol */
.sd-card[onclick] { color: var(--text-main); transition: 0.2s; }
.sd-card[onclick]:hover { border-color: var(--accent) !important; background-color: var(--hover-bg); }
/* 3. Correction spécifique pour la zone de saisie du Journal */
#detailNewEntryText {
background-color: var(--card-bg) !important;
color: var(--text-main) !important;
}
/* ===================================================================
BARRE D'OUTILS DU TABLEAU + FILTRES PAR COLONNE
Les filtres ont quitté le bandeau au-dessus du tableau : ils sont
maintenant sur l'en-tête de la colonne qu'ils filtrent. Ne reste en
barre d'outils que ce qui porte sur le tableau entier — le compte de
lignes, les filtres actifs, le choix des colonnes.
=================================================================== */
.table-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin: 0 0 12px;
}
/* --- En-tête de la page Stocks : titre + résumé vivant + outils --- */
.scr-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; }
.scr-hdr-main { min-width: 0; }
.scr-hdr .page-title { margin: 0; }
.scr-sub { margin: 5px 0 0; font-size: var(--fs-body); color: var(--text-muted); font-weight: 500; }
.scr-sub strong { color: var(--text-main); font-weight: 700; }
.scr-sub:empty { display: none; } /* comptage déplacé dans le bandeau */
.scr-hdr-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scr-stats {
display: flex; flex-wrap: wrap; align-items: stretch;
border: 1px solid var(--border); border-radius: 12px;
background: var(--card-bg); margin: 0 0 14px;
/* pas d'overflow:hidden — sinon le menu ⚙ (position:absolute) est coupé */
}
.scr-stats .s:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.scr-stats .s { flex: 1 1 128px; padding: 6px 14px; border-right: 1px solid var(--border); }
.scr-stats .s.s-shown { flex: 1.5 1 210px; }
.scr-stats .s:last-of-type { border-right: 0; }
.scr-stats .s .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; }
.scr-stats .s .v { font-size: var(--fs-body); font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; margin-top: 1px; }
/* unité (%, B, T, yr, / N) : MÊME taille que le nombre — plus de nombre géant
collé à une unité minuscule. Juste un poil plus discret en couleur. */
.scr-stats .s .v .u { font-size: 1em; color: var(--text-muted); margin-left: 3px; font-weight: 600; }
/* le tri, À DROITE du comptage, sans faire grandir la case */
.scr-stats .s-sortby { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; margin-left: 12px; white-space: nowrap; }
.scr-stats .s-cov { height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 4px; }
.scr-stats .s-cov i { display: block; height: 100%; background: var(--accent); }
/* ⚙ choix des tuiles */
.scr-stats .s-gear { position: relative; margin-left: auto; align-self: center; padding: 0 10px; }
.scr-stats .s-gear > button {
background: transparent; border: 1px solid var(--border); border-radius: 8px;
color: var(--text-muted); font-size: var(--fs-body); padding: 5px 9px; cursor: pointer; line-height: 1;
}
.scr-stats .s-gear > button:hover { border-color: var(--accent); color: var(--accent); }
.scr-stats .s-gear-pop {
display: none; position: absolute; right: 8px; top: calc(100% + 6px); z-index: 200;
background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4); padding: 8px; min-width: 200px;
max-height: 60vh; overflow-y: auto;
}
.scr-stats .s-gear-pop label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: var(--fs-body); color: var(--text-main); cursor: pointer; border-radius: 6px; }
.scr-stats .s-gear-pop label:hover { background: var(--hover-bg); }
.scr-stats .s-gear-pop input { width: auto; margin: 0; }
.scr-chips-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.scr-chips-row:has(#filterChips:empty):has(#clearFiltersBtn[hidden]) { display: none; }
.scr-chips-row:has(#etfFilterChips:empty):has(#etfClearFiltersBtn[hidden]) { display: none; }
.scr-chips-row:has(#cryptoFilterChips:empty):has(#cryptoClearFiltersBtn[hidden]) { display: none; }
/* Macro — planche « Quiet board » : cartes carrées, mais la couleur ne se
dépense que sur les lectures vraiment extrêmes (percentile ≤10 ou ≥90).
Ailleurs le filet en tête de carte et le sparkline restent neutres — le
silence visuel EST l'information : « rien à signaler ici ». */
/* Cartes à taille FIXE, jamais étirées ; 5 par ligne au maximum. */
.d-grid { display: flex; flex-wrap: wrap; gap: 14px; max-width: calc(224px * 5 + 14px * 4); }
.d-grid .d-card { flex: 0 0 224px; max-width: 100%; }
.d-card {
background: var(--card-bg); border: 1px solid var(--border); border-top: 2px solid var(--border);
border-radius: 10px; padding: 16px 18px 14px; cursor: pointer; transition: border-color .12s, transform .12s;
}
.d-card:hover { transform: translateY(-2px); border-color: var(--text-muted); }
.d-card.extreme { border-top-color: var(--rail); }
.d-card .nm { font-size: var(--fs-body); font-weight: 700; margin: 0 0 3px; color: var(--text-main); }
.d-card .ds { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 10px; min-height: 2.1em; line-height: 1.4; }
.d-card svg { display: block; margin: 0 0 10px; }
.d-card .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.d-card .val { font-size: var(--fs-display); font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.d-card.extreme .val { font-weight: 800; }
.d-card .pct { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.d-card .verdict { font-size: var(--fs-xs); font-weight: 700; margin-top: 6px; }
.d-empty { background: transparent; border-style: dashed; cursor: default; }
.d-empty:hover { transform: none; border-color: var(--border); }
.d-empty .nm { color: var(--text-muted); }
.d-empty .ds { min-height: 0; margin-bottom: 0; }
@media (max-width: 760px) {
.scr-stats .s { flex-basis: 44%; border-bottom: 1px solid var(--border); }
.scr-stats .s-save { flex-basis: 100%; margin: 8px 12px; }
}
/* Le compteur « x of y — sorted by Z » de la barre d'outils. La règle est
portée par une classe, pas par l'id d'un tableau : les deux tableaux
(Stocks, ETFs) disent la même chose et doivent se lire pareil. */
.table-count { font-size: var(--fs-body); color: var(--text-muted); font-weight: 600; }
.table-count strong { color: var(--text-main); font-size: var(--fs-h3); }
.toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-wrap { position: relative; }
.tb-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
color: var(--text-main); background: var(--input-bg);
border: 1px solid var(--border); border-radius: 8px; transition: 0.15s;
}
.tb-btn:hover { border-color: var(--accent); color: var(--accent); }
.tb-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tb-btn--primary:hover { filter: brightness(1.08); color: #fff; }
.tb-btn--clear { color: var(--text-muted); }
.tb-ico { width: 14px; height: 14px; fill: currentColor; opacity: .75; }
/* Pastilles : ce qui restreint la liste, lisible sans ouvrir un menu */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 6px 4px 10px; border-radius: 999px; font-size: var(--fs-sm);
color: var(--text-main); background: rgba(138, 154, 91, 0.14);
border: 1px solid rgba(138, 154, 91, 0.35);
}
.chip strong { font-weight: 700; }
.chip-x {
border: none; background: none; cursor: pointer; padding: 0 3px;
font-size: var(--fs-h3); line-height: 1; color: var(--text-muted);
}
.chip-x:hover { color: var(--danger); }
/* L'entonnoir se remplit quand la colonne filtre — repère visuel immédiat */
th .col-filter {
display: inline-flex; align-items: center; justify-content: center;
width: 17px; height: 17px; margin-left: 5px; vertical-align: middle;
border-radius: 4px; cursor: pointer; transition: 0.15s;
}
th .col-filter svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; opacity: .45; }
th .col-filter:hover { background: rgba(138, 154, 91, 0.18); }
th .col-filter:hover svg { opacity: 1; }
th .col-filter.on { background: var(--accent); }
th .col-filter.on svg { fill: #fff; stroke: #fff; opacity: 1; }
.col-filter-pop {
position: absolute; z-index: 400; width: 244px; max-height: 60vh;
display: flex; flex-direction: column;
background: var(--card-bg, var(--input-bg)); color: var(--text-main);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
}
.cf-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-body);
}
.cf-clear {
border: none; background: none; cursor: pointer; padding: 0;
font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
}
.cf-clear:hover { color: var(--danger); }
.cf-body { padding: 10px 12px; overflow-y: auto; }
.cf-opt {
display: flex; align-items: center; gap: 8px; padding: 4px 0;
font-size: var(--fs-body); cursor: pointer;
}
.cf-opt input { width: auto !important; height: auto !important; margin: 0 !important; appearance: auto !important; }
.cf-sep { height: 1px; background: var(--border); margin: 9px 0; }
.cf-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-range label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; display: block; }
.cf-range input, .col-filter-pop input[type="text"] {
/* box-sizing : sans lui, 100 % + 16 px de marge intérieure + 2 px de
bordure débordent de la colonne de grille, et les deux champs Min et
Max se chevauchent. La feuille n'a pas de box-sizing global. */
box-sizing: border-box;
width: 100%; min-width: 0; margin-top: 3px; padding: 6px 8px; font-size: var(--fs-body);
color: var(--text-main); background: var(--input-bg);
border: 1px solid var(--border); border-radius: 6px;
}
.cf-range > label { min-width: 0; }
.cf-note { font-size: var(--fs-xs); color: var(--text-muted); margin: 8px 0 0; line-height: 1.4; }
.cf-foot { padding: 10px 12px; border-top: 1px solid var(--border); text-align: right; }
/* Les menus de la barre d'outils s'ancrent sous leur propre bouton */
.tb-wrap .columns-dropdown-menu { top: calc(100% + 6px); right: 0; left: auto; min-width: 226px; }
/* Repère à droite d'une tranche : convention de place (Micro, Small…)
ou ordre de grandeur du nombre de titres concernés. Jamais le critère. */
.cf-hint {
margin-left: auto; padding-left: 10px; font-size: var(--fs-xs);
color: var(--text-muted); font-weight: 600;
}
/* Combinaisons de filtres enregistrées */
.view-row { display: flex; align-items: center; gap: 4px; }
.view-pick {
flex: 1; text-align: left; padding: 6px 8px; font-size: var(--fs-body); font-weight: 600;
color: var(--text-main); background: none; border: none; border-radius: 6px; cursor: pointer;
}
.view-pick:hover { background: rgba(138, 154, 91, 0.14); color: var(--accent); }
.view-del {
border: none; background: none; cursor: pointer; padding: 2px 6px;
font-size: var(--fs-h3); line-height: 1; color: var(--text-muted);
}
.view-del:hover { color: var(--danger); }
@media (max-width: 640px) {
.table-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
.col-filter-pop { width: calc(100vw - 24px); }
}
/* --- Base de calcul portée par la colonne ------------------------------- */
th .col-basis {
display: block; margin: 2px auto 0; font-size: var(--fs-xs); font-weight: 600;
letter-spacing: .02em; text-transform: none; color: var(--text-muted);
cursor: pointer; border-radius: 4px; padding: 1px 3px;
width: fit-content; transition: 0.15s;
}
th .col-basis:hover { background: rgba(138, 154, 91, 0.18); color: var(--accent); }
/* Pastille de base figée : même graisse/police, mais inerte. */
th .col-basis-static { cursor: default; }
th .col-basis-static:hover { background: none; color: var(--text-muted); }
th .cb-car { margin-left: 2px; opacity: .6; }
.tb-val {
padding: 1px 6px; border-radius: 5px; font-size: var(--fs-sm);
color: var(--accent); background: rgba(138, 154, 91, 0.16);
}
.cf-group {
margin: 8px 0 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--text-muted);
}
.cf-group:first-child { margin-top: 0; }
.basis-opt {
display: block; width: 100%; text-align: left; padding: 6px 8px; margin-bottom: 2px;
font-size: var(--fs-body); font-weight: 600; color: var(--text-main);
background: none; border: none; border-radius: 6px; cursor: pointer;
}
.basis-opt:hover { background: rgba(138, 154, 91, 0.14); color: var(--accent); }
.basis-opt.on { background: var(--accent); color: #fff; }
/* Lecture d'une série : la conclusion, avant la courbe qui la justifie.
Volontairement plus lisible que la légende du graphique — c'est la ligne
qu'on retient, le tracé n'est que la preuve. */
.fund-read {
margin: 8px 2px 4px; padding: 0;
font-size: var(--fs-sm); line-height: 1.7; font-weight: 500;
color: var(--text-muted); font-variant-numeric: tabular-nums;
}
/* superposition de 2 courbes dans le panneau History */
.fund-ov { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.fund-ov-sel {
font-family: var(--font-ui); font-size: var(--fs-xs); padding: 4px 8px;
border: 1px solid var(--border); border-radius: 7px;
background: var(--card-bg); color: var(--text-main); cursor: pointer;
}
.fund-ov-norm {
font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
padding: 4px 10px; border: 1px solid var(--accent); border-radius: 7px;
background: transparent; color: var(--accent); cursor: pointer;
}
.fund-read b { color: var(--text-main); font-weight: 700; }
.fund-read .fr-zone {
display: inline-block; padding: 0 7px; border-radius: 999px;
font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px; vertical-align: 1px;
}
.fund-read .fr-cheap { color: var(--success); border: 1px solid var(--success); }
.fund-read .fr-mid { color: var(--text-muted); border: 1px solid var(--border); }
.fund-read .fr-exp { color: var(--warning); border: 1px solid var(--warning); }
/* Journal : pastille qui dit d'un coup d'œil « note » ou « log ». */
.j-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.4px;
text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
border: 1px solid currentColor; line-height: 1.6;
}
.j-chip::before { content: "●"; font-size: 0.7em; }
.j-chip.note { color: var(--j-note); }
.j-chip.log { color: var(--j-log); }
.j-card {
border: 1px solid var(--border); border-left-width: 3px;
border-radius: 8px; padding: 14px 16px; margin-bottom: 12px;
/* surface explicite : les entrées s'alignent sur le blanc de l'éditeur,
pas sur le fond de carte (qui paraît gris à côté, surtout en Split). */
background: var(--input-bg);
transition: border-color .15s;
}
.j-card.note { border-left-color: var(--j-note); }
.j-card.log { border-left-color: var(--j-log); }
.j-card.log.clickable { cursor: pointer; }
.j-card.log.clickable:hover { border-color: var(--j-log); }
.j-card-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 8px;
}
.j-card-head .j-actions { margin-left: auto; display: flex; gap: 12px; }
.j-card-head .j-actions span { cursor: pointer; font-weight: 700; }
.j-card.pinned { border-left-color: var(--accent); background: rgba(138,154,91,0.05); }
.j-card.is-archived, .sd-card.is-archived { opacity: 0.62; }
.j-pin { cursor: pointer; user-select: none; font-size: var(--fs-body); line-height: 1; }
.j-pin.on { color: var(--accent); }
.j-pin:not(.on) { color: var(--text-muted); opacity: .55; }
.j-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.j-tag {
font-size: var(--fs-xs); font-weight: 600; letter-spacing: .3px;
padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border);
color: var(--text-muted); cursor: pointer;
}
.j-tag:hover, .j-tag.active { color: var(--accent); border-color: var(--accent); }
.j-tk { font-family: inherit; font-size: var(--fs-xs); color: var(--accent); font-weight: 700; }
.notes-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
/* ===== Notes — layout « Reader » : liste à gauche, lecture à droite ===== */
/* Composeur de note : bien détaché du panneau liste en dessous. */
#journal-note-form { margin-bottom: 26px; }
.notes-pane {
display: grid; grid-template-columns: 300px 1fr;
border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
background: var(--card-bg); min-height: 460px;
}
@media (max-width: 820px) { .notes-pane { grid-template-columns: 1fr; }
.notes-pane.reading .notes-list { display: none; }
.notes-pane:not(.reading) .notes-reader { display: none; } }
.notes-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.notes-list .notes-toolbar { margin: 0; padding: 9px 11px; gap: 7px; border-bottom: 1px solid var(--border); }
.notes-list .notes-toolbar input[type=search] { flex: 1 1 90px; min-width: 80px; padding: 4px 8px; font-size: var(--fs-xs); border-radius: 6px; }
.notes-list .notes-toolbar label { font-size: var(--fs-xs); }
.notes-list .notes-toolbar .seg-btn { font-size: var(--fs-xs); }
.notes-list #notes-tagbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 7px 11px 0; }
.notes-list #notes-tagbar:empty { display: none; }
.notes-list .rows { overflow-y: auto; flex: 1; }
.nr-compose { margin-top: 16px; border: 1px dashed var(--border); border-radius: 8px; padding: 8px 11px;
display: flex; align-items: center; gap: 9px; }
.nr-compose input { flex: 1; border: 0; background: transparent; color: var(--text-main);
font-family: var(--font-ui); font-size: var(--fs-body); outline: none; }
.nr-compose input::placeholder { color: var(--text-muted); }
.nr-compose button { border: 0; background: var(--accent); color: #fff; font-family: var(--font-ui);
font-weight: 600; font-size: var(--fs-xs); padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.nl-grp { font-size: var(--fs-sm); font-family: var(--font-ui); font-weight: 600;
color: var(--text-main); padding: 9px 13px 6px; border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: baseline; gap: 10px; cursor: pointer; }
.nl-grp:hover { color: var(--accent); }
.nl-grp > span:last-child { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted);
white-space: nowrap; flex: none; }
.nl-it { padding: 9px 13px; border-bottom: 1px solid var(--border); cursor: pointer;
display: flex; flex-direction: column; gap: 3px; }
.nl-it:hover { background: var(--hover-bg); }
.nl-it.on { background: rgba(138,154,91,0.10); box-shadow: inset 3px 0 0 var(--accent); }
.nl-it .r1 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.nl-it .r1 .tk { font-family: var(--font-ui); font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.nl-it .r1 .kd { width: 6px; height: 6px; border-radius: 50%; background: var(--j-note); flex: none; }
.nl-it .r1 .kd.log { background: var(--j-log); border-radius: 1px; }
.nl-it .r1 .kd.pin { background: var(--accent); }
.nl-it .r1 .wh { margin-left: auto; font-variant-numeric: tabular-nums; }
.nl-it .r2 { font-size: var(--fs-sm); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-reader { padding: 20px 26px; overflow-y: auto; min-width: 0; }
.notes-reader .nr-empty { color: var(--text-muted); font-size: var(--fs-body); padding: 40px 10px; text-align: center; }
.nr-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.nr-head .tk { font-family: var(--font-ui); font-weight: 700; color: var(--text-main);
font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer; }
.nr-head .name { font-size: var(--fs-h3); font-weight: 600; color: var(--text-main); cursor: pointer; }
.nr-head .tk:hover, .nr-head .name:hover { color: var(--accent); }
.nr-head .meta { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.nr-strip { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: 15px; flex-wrap: wrap;
padding: 8px 0 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.nr-strip b { color: var(--text-main); font-weight: 600; }
.nr-strip .lk { color: var(--accent); cursor: pointer; }
.nr-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; align-items: baseline; }
.nr-tags .wh { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.nr-body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.6;
color: var(--text-main); max-width: 68ch; }
.nr-log { font-family: var(--font-ui); }
/* ===== Investment log — rendu « brief + scorecard » ===================== */
.ilog { font-family: var(--font-ui); color: var(--text-main); }
.ilog-h { position: relative; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.ilog-id { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; padding-right: 155px; }
.ilog-h .tk { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm);
background: var(--input-bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; cursor: pointer; }
.ilog-h .nm { font-size: var(--fs-h3); font-weight: 600; cursor: pointer; }
.ilog-h .tk:hover, .ilog-h .nm:hover { color: var(--accent); }
.ilog-h .fw { font-size: var(--fs-sm); color: var(--j-log); font-weight: 600; }
.ilog-h .dt { font-size: var(--fs-xs); color: var(--text-muted); }
.ilog-score { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 8px; }
.ilog-h .grade { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.ilog-h .grade b { font-size: var(--fs-h3); font-weight: 700; color: var(--text-main); }
.ilog-h .grade .of { font-size: var(--fs-sm); color: var(--text-muted); }
.ilog-h .grade .gbar { width: 74px; height: 5px; border-radius: 3px; background: var(--input-bg); overflow: hidden; }
.ilog-h .grade .gbar i { display: block; height: 100%; background: var(--accent); }
.ilog-h .grade .cap { font-size: var(--fs-eyebrow); color: var(--text-muted); letter-spacing: .02em; }
.ilog-h .conv { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .03em;
padding: 2px 8px; border-radius: 5px; border: 1px solid currentColor; text-transform: uppercase; }
.ilog-h .conv.hi { color: var(--success); }
.ilog-h .conv.mid { color: var(--warning); }
.ilog-h .conv.lo { color: var(--danger); }
.ilog-h .act { position: absolute; top: 13px; right: 16px; display: flex; gap: 13px; font-size: var(--fs-eyebrow); }
.ilog-h .act span { cursor: pointer; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); }
.ilog-h .act span:hover { color: var(--accent); }
.ilog-h .act .del:hover { color: var(--danger); }
.ilog-b { padding: 2px 16px 14px; }
.ilog-sec { padding: 13px 0; border-bottom: 1px solid var(--border-soft, var(--border)); }
.ilog-sec:last-child { border-bottom: 0; padding-bottom: 2px; }
.ilog-lbl { font-size: var(--fs-eyebrow); letter-spacing: .09em; text-transform: uppercase;
font-weight: 700; color: var(--accent); margin: 0 0 5px; }
.ilog-sec.exit .ilog-lbl { color: var(--danger); }
.ilog-lbl .sub { color: var(--text-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.ilog-prose { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.55; color: var(--text-main); }
.ilog-prose p { margin: 0 0 .5em; } .ilog-prose p:last-child { margin-bottom: 0; }
.ilog-prose i { color: var(--text-muted); }
.ilog-crit { margin-top: 3px; }
.ilog-cr { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 9px 0;
border-top: 1px solid var(--border-soft, var(--border)); }
.ilog-cr:first-child { border-top: 0; }
.ilog-cr .ver { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .02em; }
.ilog-cr .ver.ok { color: var(--success); }
.ilog-cr .ver.mid { color: var(--warning); }
.ilog-cr .ver.no { color: var(--danger); }
.ilog-cr .ver.na { color: var(--text-muted); font-weight: 600; font-style: italic; }
.ilog-cr .k { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 2px; }
.ilog-cr .d { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5; color: var(--text-muted); }
.ilog-cr .d i { color: var(--text-muted); }
.nr-body p { margin: 0 0 .6em; }
.nr-body ul { margin: .3em 0 .7em; padding-left: 1.3em; }
.nr-sec { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; margin: 14px 0 3px; }
.nr-foot { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border);
display: flex; gap: 14px; font-size: var(--fs-xs); }
.nr-foot span { cursor: pointer; color: var(--text-muted); }
.nr-foot span:hover { color: var(--accent); }
.nr-foot .del:hover { color: var(--danger); }
.nr-earlier { margin-top: 18px; }
.nr-earlier .nr-sec { margin-bottom: 6px; }
.nr-earlier .row { font-family: var(--font-ui); font-size: var(--fs-body); color: var(--text-muted);
line-height: 1.5; margin: 0 0 .4em; cursor: pointer; }
.nr-earlier .row:hover { color: var(--text-main); }
.nr-earlier .row em { color: var(--j-log); font-style: normal; }
.notes-toolbar input[type=search] {
flex: 1 1 220px; min-width: 160px; background: var(--card-bg);
border: 1px solid var(--border); color: var(--text-main);
padding: 7px 12px; border-radius: 8px; font-size: var(--fs-body); outline: none;
}
.notes-toolbar label { font-size: var(--fs-body); color: var(--text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.jn-ac {
position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 320;
max-height: 220px; overflow-y: auto; background: var(--card-bg);
border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.jn-ac div {
padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between;
gap: 12px; font-size: var(--fs-body); color: var(--text-main); border-bottom: 1px solid var(--border);
}
.jn-ac div:last-child { border-bottom: 0; }
.jn-ac div.on, .jn-ac div:hover { background: var(--hover-bg); }
.jn-ac .sub { color: var(--text-muted); font-size: var(--fs-sm); }
/* ===== Fiche ETF — encart Performance (by window + by calendar year) ===== */
.etf-perf-hd { display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.etf-perf-lbl { font-size: var(--fs-eyebrow); letter-spacing: .13em; text-transform: uppercase;
font-weight: 700; color: var(--text-muted); margin: 16px 0 0; }
.etf-win-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 8px 0 2px; }
.etf-win { padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.etf-win:first-child { padding-left: 0; }
.etf-win + .etf-win::before { content: ""; position: absolute; left: 0; top: 50%;
transform: translateY(-50%); width: 1px; height: 28px; background: var(--border); }
.etf-win .w { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.etf-win .ret { font-size: var(--fs-h2); font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.etf-win .ret.pos { color: var(--success); } .etf-win .ret.neg { color: var(--danger); }
.etf-win .sub { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; min-height: 1em; }
@media (max-width: 620px) {
.etf-win-grid { grid-template-columns: repeat(2, 1fr); row-gap: 6px; }
.etf-win + .etf-win::before { display: none; }
.etf-win { padding-left: 12px; }
}
.etf-yr { display: grid; grid-template-columns: 38px 1fr 56px; align-items: center; gap: 10px; padding: 2px 0; }
.etf-yr .yl { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.etf-yr .tk { position: relative; height: 15px; }
.etf-yr .tk::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border); }
.etf-yr .tk i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.etf-yr .tk i.pos { left: 50%; background: var(--success); }
.etf-yr .tk i.neg { right: 50%; background: var(--danger); }
.etf-yr .yv { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.etf-yr .yv.pos { color: var(--success); } .etf-yr .yv.neg { color: var(--danger); }
/* ===== Fiche crypto — onglet Data réorganisé ===== */
.sd-beta { font-size: var(--fs-xs); font-weight: 700; color: var(--warning);
border: 1px solid var(--warning); border-radius: 4px; padding: 1px 5px;
vertical-align: middle; letter-spacing: .04em; }
/* Marqueur de couverture : la série sous-jacente est plus courte que ce que
le libellé promet (ex. « 5Yr Avg » calculé sur 4 ans). Discret, info au survol. */
.ind-beta { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-muted);
letter-spacing: .03em; cursor: help; vertical-align: super; line-height: 0; margin-left: 2px; }
/* ===== Insertion de hashtag dans une note (Ctrl/⌘+clic ou bouton +) ===== */
/* Quand un champ de note/log est actif, les indicateurs cliquables se signalent. */
body.tag-insert-armed [data-tag] { cursor: copy; position: relative; }
body.tag-insert-armed [data-tag]:hover { outline: 1px dashed var(--accent); outline-offset: 2px; border-radius: 3px; }
.tag-add { font-family: var(--font-ui); font-size: var(--fs-xs); line-height: 1;
border: 1px solid var(--border); background: var(--card-bg); color: var(--accent);
border-radius: 4px; padding: 1px 5px; margin-left: 6px; cursor: pointer; vertical-align: middle; }
.tag-add:hover { border-color: var(--accent); background: var(--accent); color: #0c0d10; }
.tag-insert-flash { animation: tagInsertFlash .5s ease-out; }
@keyframes tagInsertFlash { from { background: color-mix(in srgb, var(--accent) 30%, transparent); } to { background: transparent; } }
.cryd-pstrip { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: baseline;
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cryd-pstrip > div { display: flex; flex-direction: column; gap: 2px; }
.cryd-pstrip .k { font-size: var(--fs-eyebrow); letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.cryd-pstrip .v { font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.cryd-pstrip > div:first-child .v { font-size: var(--fs-h2); }
.cryd-pstrip .d { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.cryd-statcols { display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--border-soft, var(--border)); border-radius: 10px; overflow: hidden; }
.cryd-statcols > div { padding: 12px 14px; border-right: 1px solid var(--border-soft, var(--border));
border-bottom: 1px solid var(--border-soft, var(--border)); }
.cryd-statcols > div:nth-child(4n) { border-right: 0; }
.cryd-statcols > div:nth-last-child(-n+4) { border-bottom: 0; }
@media (max-width: 720px) {
.cryd-statcols { grid-template-columns: repeat(2, 1fr); }
.cryd-statcols > div:nth-child(2n) { border-right: 0; }
.cryd-statcols > div:nth-last-child(-n+2) { border-bottom: 0; }
}
.cryd-statcols .col-h { font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.cryd-statcols .kv { display: flex; justify-content: space-between; gap: 10px;
font-size: var(--fs-sm); padding: 3px 0; }
.cryd-statcols .kv .k { color: var(--text-muted); }
.cryd-statcols .kv .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.cryd-statcols .kv .v.pos { color: var(--success); }
.cryd-statcols .kv .v.warn { color: var(--warning); }
.cryd-statcols .kv .v.neg { color: var(--danger); }
.cryd-person { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft, var(--border)); }
.cryd-person:last-of-type { border-bottom: 0; }
.cryd-person .av { width: 38px; height: 38px; border-radius: 50%; background: var(--input-bg);
border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
font-weight: 700; color: var(--text-muted); flex: 0 0 auto; font-size: var(--fs-sm); }
.cryd-person .who { min-width: 0; }
.cryd-person .nm { font-weight: 700; }
.cryd-person .rl { font-size: var(--fs-xs); color: var(--accent); font-weight: 600;
text-transform: uppercase; letter-spacing: .04em; }
.cryd-person .cv { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.cryd-assess { margin-top: 14px; background: var(--card-2, var(--input-bg));
border: 1px solid var(--border-soft, var(--border)); border-radius: 10px; padding: 12px 14px; }
.cryd-assess .lbl { font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
/* =====================================================================
INTRO CINÉMATIQUE (#intro) — le cercle qui s'ouvre + « Welcome on board »
Palette sombre par défaut ; claire sous body.light-mode.
===================================================================== */
#intro{
position:fixed; inset:0; z-index:100000; overflow:hidden;
display:grid; place-items:center;
/* palette sombre */
--i-bg:#050604;
--i-ring:#9bb05f;
--i-ring2:rgba(195,212,147,.6);
--i-ring-glow:rgba(155,176,95,.4);
--i-core:#edeee4;
--i-core-glow:rgba(237,238,228,.7);
--i-bloom:rgba(155,176,95,.55);
--i-mark:#edeee4;
--i-pr:#9bb05f;
--i-welcome:#7f8574;
background:var(--i-bg);
}
body.light-mode #intro{
--i-bg:#f8f7f2;
--i-ring:#5c6c35;
--i-ring2:rgba(108,125,64,.5);
--i-ring-glow:rgba(108,125,64,.22);
--i-core:#23261c;
--i-core-glow:rgba(35,38,28,.26);
--i-welcome:#76796a;
--i-bloom:rgba(108,125,64,.30);
--i-mark:#1c1e17;
--i-pr:#6c7d40;
}
#intro[hidden]{ display:none !important; }
#intro.leaving{ animation:intro-out .45s ease-in forwards; }
@keyframes intro-out{ to{ opacity:0; visibility:hidden; } }
.intro-aperture{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.intro-bloom{
position:absolute; width:36%; aspect-ratio:1; border-radius:50%;
background:radial-gradient(circle, var(--i-bloom), transparent 70%); opacity:0;
}
.intro-ring{
position:absolute; width:7%; aspect-ratio:1; border-radius:50%;
border:2.5px solid var(--i-ring); box-shadow:0 0 22px var(--i-ring-glow); opacity:0;
}
.intro-ring.r2{ border-color:var(--i-ring2); box-shadow:none; }
.intro-dot{
position:absolute; width:8px; aspect-ratio:1; border-radius:50%;
background:var(--i-core); box-shadow:0 0 26px 6px var(--i-core-glow); opacity:0;
}
.intro-endcard{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.intro-mark{
font-family:'Courier New', Courier, monospace; font-weight:700;
font-size:clamp(1.8rem, 6vw, 3.4rem); letter-spacing:-.01em; color:var(--i-mark); opacity:1;
}
.intro-mark .pr{ color:var(--i-pr); }
.intro-welcome{
font-family:'Courier New', Courier, monospace; font-size:clamp(.66rem,1.6vw,.85rem);
letter-spacing:.36em; text-transform:uppercase; color:var(--i-welcome); margin-top:14px; opacity:1;
}
/* --- séquence (ajoutée quand #intro reçoit .running) --- */
#intro.running .intro-dot{ animation:intro-dot .5s ease-out both; }
@keyframes intro-dot{ 0%{opacity:0;transform:scale(.4);} 30%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(.6);} }
#intro.running .intro-bloom{ animation:intro-bloom 1.7s ease-out both; }
@keyframes intro-bloom{ 0%{opacity:0;transform:scale(.2);} 22%{opacity:.95;} 70%{opacity:.5;} 100%{opacity:0;transform:scale(4);} }
#intro.running .intro-ring{ animation:intro-ring 1.7s cubic-bezier(.45,.03,.15,1) both; }
#intro.running .intro-ring.r2{ animation-delay:.16s; }
@keyframes intro-ring{
0%{opacity:0;transform:scale(.35);}
8%{opacity:1;}
88%{opacity:1;transform:scale(30);} /* ~210% de la largeur du cadre */
100%{opacity:0;transform:scale(40);}
}
#intro.running .intro-mark{ animation:intro-markin 1s cubic-bezier(.2,.7,.2,1) 1.15s both; }
@keyframes intro-markin{ 0%{opacity:0;transform:scale(.92);filter:blur(6px);} 60%{opacity:1;filter:blur(0);} 100%{opacity:1;transform:scale(1);} }
#intro.running .intro-welcome{ animation:intro-welin .8s ease-out 2s both; }
@keyframes intro-welin{ 0%{opacity:0;letter-spacing:.5em;} 100%{opacity:1;letter-spacing:.36em;} }
/* au repos (avant .running) l'aperture est masquée : on ne voit que l'écran de fin */
#intro:not(.running) .intro-aperture{ opacity:0; }
@media (prefers-reduced-motion:reduce){
#intro.running .intro-aperture{ opacity:0 !important; }
#intro.running .intro-mark, #intro.running .intro-welcome{ animation:none !important; opacity:1 !important; }
}
/* =====================================================================
ACADEMY — parcours guidé (Path) / libre (Browse)
===================================================================== */
.ac-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
#academy-continue{ margin-bottom:18px; }
.ac-continue{
display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
background:var(--card-bg); border:1px solid var(--border); border-left:3px solid var(--accent);
border-radius:14px; padding:18px 22px;
}
.ac-continue h3{ margin:4px 0 4px; font-size: var(--fs-display); color:var(--text-main); }
.ac-continue .ac-tag{ font-size: var(--fs-xs); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.ac-continue .ac-sub{ font-size: var(--fs-body); color:var(--text-muted); }
#academy-spine{ margin-bottom:20px; }
.ac-spine-svg{ display:block; width:100%; max-width:680px; margin:0 auto; height:auto; overflow:visible; }
.ac-tracks{ display:flex; flex-direction:column; gap:12px; }
.ac-track{
display:flex; align-items:center; justify-content:space-between; gap:18px;
background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
padding:16px 20px; cursor:pointer; transition:border-color .15s;
}
.ac-track:not(.locked):hover{ border-color:var(--accent); }
.ac-track.locked{ opacity:0.55; cursor:default; }
.ac-track-main h3{ margin:0 0 4px; font-size: var(--fs-h2); color:var(--text-main); }
.ac-track-main p{ margin:0; font-size: var(--fs-body); color:var(--text-muted); line-height:1.4; }
.ac-track-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.ac-lock{ font-size: var(--fs-body); }
.ac-secbar{
height:7px; width:150px; border-radius:99px; background:var(--border);
overflow:hidden; display:block;
}
.ac-secbar i{
display:block; height:100%; border-radius:99px;
background:linear-gradient(90deg,var(--accent),var(--fast-grower));
}
.ac-count{ font-size: var(--fs-sm); color:var(--text-muted); font-variant-numeric:tabular-nums; }
#section-view-progress{ display:flex; align-items:center; gap:12px; }
/* liste des leçons dans une section */
.ac-lesson-row{
display:flex; align-items:center; gap:16px;
background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
padding:14px 18px; cursor:pointer; transition:border-color .15s;
}
.ac-lesson-row:not(.locked):hover{ border-color:var(--accent); }
.ac-lesson-row.locked{ opacity:0.5; cursor:default; }
.ac-lesson-row.done{ border-left:3px solid var(--fast-grower); }
.ac-lesson-row.reading{ border-left:3px solid var(--accent); }
.ac-lr-num{
flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
font-family:var(--font-ui); font-variant-numeric:tabular-nums;
font-size:var(--fs-eyebrow); font-weight:700; color:var(--text-muted); border:1px solid var(--border);
}
.ac-lesson-row.done .ac-lr-num{ background:var(--fast-grower); color:#fff; border-color:transparent; }
.ac-lr-body{ flex:1 1 auto; min-width:0; }
.ac-lr-body h4{ margin:0 0 3px; font-size:var(--fs-h3); color:var(--text-main); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ac-lr-body p{ margin:0; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.4; }
.ac-lr-go{ flex:0 0 auto; color:var(--accent); font-size:var(--fs-sm); font-weight:700; }
.ac-badge{ font-size:var(--fs-xs); font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid currentColor; }
.ac-badge.done{ color:var(--fast-grower); }
.ac-badge.reading{ color:var(--accent); }
.ac-badge.lock{ color:var(--text-muted); }
/* page leçon */
#lesson-progress{ position:sticky; top:0; z-index:40; height:4px; background:var(--border); border-radius:99px; }
#lesson-progress i{ display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .1s linear; }
.ac-lesson-grid{ display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:24px; align-items:start; }
/* Cadre du texte : PAS de bordure (elle se confondait avec les filets des
encarts). On garde le fond + l'ombre douce de .sd-card pour délimiter,
et une marge intérieure large pour que le contenu ne colle à rien. */
.ac-lesson-card{ border:none; padding:44px 60px; }
.ac-lesson-meta{ font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--text-muted); margin:4px 0 22px; }
.ac-lesson-foot{ display:flex; gap:12px; flex-wrap:wrap; margin-top:38px; padding-top:26px; border-top:1px solid var(--border); }
.ac-outline{ position:sticky; top:24px; font-family:var(--font-ui); font-size:var(--fs-sm); }
.ac-outline-t{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.ac-outline a{ display:block; color:var(--text-muted); text-decoration:none; padding:4px 0 4px 8px; border-left:2px solid transparent; line-height:1.35; }
.ac-outline a .l-num,
.ac-outline a .ac-out-n{ color:var(--accent); font-weight:700; margin-right:.5em; font-variant-numeric:tabular-nums; }
.ac-outline a.on{ color:var(--accent); border-left-color:var(--accent); font-weight:600; }
@media (max-width:860px){
.ac-lesson-grid{ grid-template-columns:1fr; }
.ac-outline{ position:static; order:-1; border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:6px; }
}
/* --- Academy : quiz de fin de leçon --- */
.ac-badge.quiz { color: var(--stalwart); }
.ac-quiz {
border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
background: var(--card-bg); flex: 1 1 100%;
}
.ac-quiz-h { font-weight: 700; font-size: var(--fs-h3); color: var(--text-main); margin-bottom: 12px; }
.ac-quiz-h span { display: block; font-weight: 500; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.ac-quiz ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }
.ac-quiz li { padding-left: 4px; }
.ac-quiz li.ac-q-ok { list-style: '✓ '; }
.ac-quiz li.ac-q-bad { list-style: '✗ '; }
.ac-quiz li.ac-q-ok::marker { color: var(--fast-grower); font-weight: 700; }
.ac-quiz li.ac-q-bad::marker { color: var(--danger); font-weight: 700; }
.ac-quiz .q { margin: 0 0 8px; font-weight: 600; font-size: var(--fs-body); color: var(--text-main); }
.ac-opt {
display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; margin-bottom: 5px;
border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: var(--fs-body);
color: var(--text-main); line-height: 1.4;
}
.ac-opt:hover { border-color: var(--accent); }
.ac-opt input { margin-top: 2px; flex: 0 0 auto; }
.ac-q-ok .ac-opt input:checked + span { color: var(--fast-grower); font-weight: 600; }
.ac-q-bad .ac-opt input:checked + span { color: var(--danger); font-weight: 600; }
.ac-quiz-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.ac-quiz-foot #ac-quiz-res { font-size: var(--fs-body); font-weight: 600; }
/* ============================ ALERTES ============================ */
/* Panneau de la cloche : une ligne = une notification (un TYPE, pas une alerte). */
.al-notif {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px;
border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
.al-notif:hover { background: var(--input-bg); border-color: var(--border); }
.al-notif.is-read { opacity: 0.62; }
.al-nic {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700;
font-size: var(--fs-xs); letter-spacing: -0.02em;
}
.al-nic.metric { background: rgba(138,154,91,0.16); color: var(--accent); }
.al-nic.company { background: rgba(239,68,68,0.14); color: var(--danger); }
.al-notif-t { font-size: var(--fs-body); font-weight: 600; color: var(--text-main); line-height: 1.35; }
.al-notif-s { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
background: var(--accent); margin-top: 6px; }
/* Brique commune : une ligne d'alerte avec sa piste baseline -> seuil -> maintenant. */
.al-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.al-row:last-child { border-bottom: 0; }
.al-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-row-tk { font-family: var(--font-ui); font-weight: 700; color: var(--accent); font-size: var(--fs-body); }
.al-row-metric { font-weight: 600; color: var(--text-main); font-size: var(--fs-body); }
.al-row-cur { font-family: var(--font-ui); font-weight: 700; color: var(--text-main); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.al-chip {
font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor;
}
.al-row-rule { font-size: var(--fs-sm); color: var(--text-muted); margin: 5px 0 7px; }
.al-row-note { color: var(--accent); cursor: pointer; text-decoration: underline; }
.al-row-act { display: inline-flex; gap: 10px; margin-left: auto; }
.al-row-act a { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); cursor: pointer; }
.al-row-delta { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.al-track { position: relative; height: 7px; border-radius: 999px; background: var(--input-bg); overflow: hidden; }
.al-track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.al-track-mark { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--text-main); opacity: 0.8; }
/* Onglet « Alerts » : le builder une ligne. */
.al-builder {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
padding-bottom: 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-body);
color: var(--text-main);
}
.al-builder select, .al-builder input {
font-family: inherit; font-size: var(--fs-body); background: var(--input-bg);
border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; color: var(--text-main);
}
.al-tab-sum {
font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 4px;
}
/* Fenêtre « Alerts from these notes » : une ligne par #indicateur. */
.al-brow {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body);
}
.al-brow:last-child { border-bottom: 0; }
.al-brow select, .al-brow input {
font-family: inherit; font-size: var(--fs-body); background: var(--input-bg);
border: 1px solid var(--border); border-radius: 7px; padding: 4px 7px; color: var(--text-main);
}
.al-brow-chk { display: inline-flex; align-items: center; }
.al-brow-tag { font-weight: 700; color: var(--text-main); }
/* ============================ MACRO WORKBENCH ============================ */
.mw-chart-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
padding: 14px 16px 10px; margin-bottom: 16px; }
.mw-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mw-chart-card .tv-chart-container { height: 320px; margin: 0; border: none; padding: 0; background: transparent; }
.mw-empty { text-align: center; color: var(--text-muted); font-size: var(--fs-body); padding: 60px 20px; }
.mw-legend { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; margin-top: 10px;
font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-main); }
.mw-lg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.mw-lg:hover { background: var(--input-bg); }
.mw-lg.focus { font-weight: 700; }
.mw-lg b { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.mw-lg a { color: var(--text-muted); font-weight: 700; padding: 0 3px; }
.mw-lg a:hover { color: var(--danger); }
.mw-corr { color: var(--accent); }
.mw-focus { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 0;
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
background: var(--card-bg); margin-bottom: 18px; }
.mw-focus .mw-f-col { padding: 14px 16px; border-right: 1px solid var(--border); }
.mw-focus .mw-f-col:last-child { border-right: 0; }
.mw-f-ttl { font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.13em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 8px; }
.mw-f-val { font-size: var(--fs-display); font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; }
.mw-gauge { position: relative; height: 15px; border-radius: 5px; display: flex; gap: 1px; margin: 14px 0 5px; }
.mw-gauge i { display: block; }
.mw-gauge i:first-child { border-radius: 5px 0 0 5px; }
.mw-gauge i:last-of-type { border-radius: 0 5px 5px 0; }
.mw-gauge .pin { position: absolute; top: -5px; bottom: -5px; width: 3px; background: var(--text-main);
border-radius: 2px; box-shadow: 0 0 0 1.5px var(--card-bg); left: 50%; transform: translateX(-50%); }
/* tick médian : le « normal » de la fenêtre, discret, sous le curseur */
.mw-gauge .tick { position: absolute; top: 1px; bottom: 1px; width: 2px; background: var(--text-main);
opacity: 0.3; transform: translateX(-50%); }
.mw-f-pctile { font-size: var(--fs-body); color: var(--text-main); }
.mw-f-verdict { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; margin-top: 6px; }
.mw-f-default { margin-top: 12px; font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--accent);
border: 1px solid var(--accent); background: transparent; border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.mw-f-default.on { background: var(--accent); color: #fff; }
.mw-f-howto { font-size: var(--fs-body); line-height: 1.55; color: var(--text-main); }
.mw-f-riw { display: flex; flex-direction: column; gap: 8px; }
.mw-riw-row { display: flex; align-items: center; gap: 8px; }
.mw-riw-row a { font-size: var(--fs-body); color: var(--accent); cursor: pointer; }
.mw-i { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--accent);
color: var(--accent); font-family: var(--font-ui); font-size: var(--fs-xs); display: inline-flex;
align-items: center; justify-content: center; cursor: pointer; }
/* Bouton « ouvre la leçon » — même traitement que les autres accès leçon
(accent plein), distinct du bouton contour « période par défaut » au-dessus. */
.mw-f-learn { display: inline-block; margin-top: 10px; font-family: var(--font-ui);
font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
background: var(--accent); color: #fff; border: 1px solid var(--accent);
border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.mw-f-learn:hover { filter: brightness(1.05); }
.macro-pop { position: absolute; z-index: 4000; max-width: 340px; background: var(--card-bg);
border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--hover-shadow);
padding: 12px 14px; font-size: var(--fs-body); line-height: 1.5; color: var(--text-main); }
.macro-info-body h4 { margin: 16px 0 5px; font-size: var(--fs-body); text-transform: uppercase;
letter-spacing: 0.05em; color: var(--accent); }
.macro-info-body h4:first-child { margin-top: 4px; }
.macro-info-body p { font-size: var(--fs-body); line-height: 1.6; color: var(--text-main); margin: 0; }
.d-card.mw-on { border-color: var(--accent); }
.d-card .mw-cardacts { display: flex; gap: 6px; margin-top: 9px; border-top: 1px solid var(--border); padding-top: 8px; }
.d-card .mw-cardacts button { flex: 1; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.02em;
border: 1px solid var(--border); background: var(--input-bg); border-radius: 6px; padding: 5px 3px;
color: var(--text-muted); cursor: pointer; }
.d-card .mw-cardacts button.pri { background: rgba(138,154,91,0.12); border-color: var(--accent); color: var(--accent); }
.d-card .mw-cardacts button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 860px) {
.mw-focus { grid-template-columns: 1fr; }
.mw-focus .mw-f-col { border-right: 0; border-bottom: 1px solid var(--border); }
.mw-focus .mw-f-col:last-child { border-bottom: 0; }
}
/* Chart intégré à une leçon Academy (piste macro) */
.ac-macro-chart { border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg);
padding: 10px; }
.ac-macro-chart canvas { display: block; }
/* Macro workbench : recherche « + Add series » + tag de série dans la légende */
.mw-add-wrap { position: relative; }
#mw-add-in { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border);
border-radius: 8px; padding: 6px 10px; font-size: var(--fs-body); font-weight: 600; width: 190px; outline: none; }
#mw-add-in:focus { border-color: var(--accent); }
.mw-add-res { position: absolute; top: calc(100% + 4px); right: 0; width: 300px; max-height: 300px;
overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
box-shadow: var(--hover-shadow); z-index: 1200; }
.mw-add-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: var(--fs-body); }
.mw-add-row:last-child { border-bottom: 0; }
.mw-add-row:hover { background: var(--input-bg); }
.mw-add-sub { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.mw-lg-tag { font-family: var(--font-ui); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 5px; }
.mw-lg.focus .mw-lg-tag { color: var(--accent); border-color: var(--accent); }
/* ============================ OVERVIEW (Cockpit / Briefing) ============================ */
/* Typo : MÊME vocabulaire que la fiche action (.sd-page) — sans-serif +
font-variant-numeric, aucun monospace pour les données. */
.ov-r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
padding: 6px 0; border-bottom: 1px solid var(--border);
font-family: var(--font-ui); font-size: var(--fs-body); }
.ov-r:last-child { border-bottom: 0; }
.ov-r[onclick] { cursor: pointer; }
.ov-r[onclick]:hover { background: var(--input-bg); }
.ov-mt { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-muted);
font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-dim { color: var(--text-muted); font-size: var(--fs-sm); }
.ov-hd { font-size: var(--fs-body); color: var(--text-main); line-height: 1.35; }
.ov-big { font-family: var(--font-ui); font-size: var(--fs-display); font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums; margin: 2px 0; }
.ov-kpi { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 6px; }
.ov-kpi > div { font-size: var(--fs-eyebrow); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ov-kpi b { display: block; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--text-main);
font-weight: 700; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.ov-empty { color: var(--text-muted); font-size: var(--fs-sm); padding: 14px 4px; margin: 0; }
.ov-cap { font-size: var(--fs-xs); color: var(--text-muted); margin: 8px 2px 0; }
.ov-sep { height: 1px; background: var(--border); margin: 6px 0; }
/* sélecteur d'univers (Greatest movers) — visible aussi hors mode édition */
.ov-seg { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.ov-seg-b { font-family: var(--font-ui); font-size: var(--fs-xs); padding: 3px 9px; border-radius: 6px;
border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); cursor: pointer; }
.ov-seg-b.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ov-pill { display: inline-block; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }
.ov-pill.hit { background: rgba(239,68,68,0.14); color: var(--danger); }
.ov-pill.near { background: rgba(245,158,11,0.16); color: var(--warning); }
.ov-r .up, .ov-fr .up { color: var(--fast-grower); font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-r .down, .ov-fr .down { color: var(--danger); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Encart Portfolio (Home) : colonne chiffres à gauche, camembert à droite. */
.ov-pf { display: flex; align-items: center; gap: 18px; }
.ov-pf-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ov-pf-day { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-muted); }
.ov-pf-pl { font-family: var(--font-ui); font-size: var(--fs-body); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ov-pf-pl > span:first-child { color: var(--text-muted); }
.ov-pf-pl .up { color: var(--fast-grower); font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-pf-pl .down { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-pf-donut { flex: 0 0 auto; width: 88px; height: 88px; }
.ov-pf-donut canvas { width: 88px; height: 88px; }
.ov-pf-leg { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.ov-pf-leg span { display: flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: var(--fs-xs); color: var(--text-muted); }
.ov-pf-leg i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.ov-pf-leg b { font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ov-pf { flex-wrap: wrap; }
.ov-pf-l { flex-basis: 100%; } }
/* Bento : grille 12 colonnes, tuiles ¼…plein, hauteur = contenu. Édition :
poignée ⠿ pour déplacer, bord droit pour redimensionner (accroche aux crans). */
.ov-top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.ov-edit-btn { font-size: var(--fs-sm); padding: 5px 12px; }
/* Bento LIBRE : chaque tuile est posée en coordonnées explicites
(grid-column: x / span w ; grid-row: y / span h). Rangées de hauteur fixe
(--ov-row) : on peut laisser autant de vide qu'on veut, le seul interdit
est le chevauchement (géré en JS, retour visuel .ov-bad). */
.ov-bento { display: grid; grid-template-columns: repeat(12, 1fr);
grid-auto-rows: var(--ov-row, 46px); gap: 12px; align-items: stretch; }
.ov-bento > .ov-tile { grid-column: span 6; } /* défaut si le style inline manque */
.ov-tile { position: relative; border: 1px solid var(--border); border-radius: 12px;
background: var(--card-bg); padding: 12px 14px; min-width: 0; display: flex;
flex-direction: column; overflow: hidden; }
.ov-bento.is-edit .ov-tile { border-style: dashed; }
.ov-tile-body { flex: 1 1 auto; overflow: auto; min-height: 0; }
.ov-tile-drag { opacity: 0.75; z-index: 5; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); }
.ov-tile.ov-bad { outline: 2px solid var(--danger); outline-offset: -2px; }
.ov-tile-h { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex: 0 0 auto; }
/* libellé d'encart = .sd-subhead de la fiche action */
.ov-tile-lab { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700;
letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); }
.ov-tile-h-edit { flex-wrap: wrap; }
.ov-grip { font-size: var(--fs-h3); color: var(--text-muted); cursor: grab; touch-action: none; padding: 0 2px; }
.ov-grip:active { cursor: grabbing; }
.ov-pick { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; background: var(--input-bg);
border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; color: var(--text-main); max-width: 55%; }
.ov-sz { font-family: var(--font-ui); font-size: var(--fs-xs); background: var(--input-bg); border: 1px solid var(--border);
border-radius: 6px; padding: 3px 7px; color: var(--accent); cursor: pointer; }
.ov-rm { margin-left: auto; font-family: var(--font-ui); font-size: var(--fs-sm); background: transparent; border: 0;
color: var(--danger); cursor: pointer; }
.ov-rz { position: absolute; touch-action: none; display: flex; align-items: center;
justify-content: center; z-index: 3; }
.ov-rz::before { content: ""; border-radius: 3px; background: var(--accent); opacity: 0.55; }
.ov-rz-w { top: 10px; bottom: 10px; right: -5px; width: 14px; cursor: ew-resize; }
.ov-rz-w::before { width: 4px; height: 34px; max-height: 60%; }
.ov-rz-h { left: 10px; right: 10px; bottom: -5px; height: 14px; cursor: ns-resize; }
.ov-rz-h::before { height: 4px; width: 34px; max-width: 40%; }
.ov-rz:active::before { opacity: 1; }
.ov-addbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border);
border-radius: 10px; background: var(--card-bg); }
.ov-addbar-lab { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.6px;
text-transform: uppercase; color: var(--text-muted); }
.ov-more-row { text-align: center; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 5px; }
.ov-more { font-family: var(--font-ui); font-size: var(--fs-xs); background: transparent; border: 0; color: var(--accent);
cursor: pointer; letter-spacing: 0.03em; }
@media (max-width: 620px) {
.ov-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
.ov-tile[style] { grid-column: 1 / -1 !important; grid-row: auto !important; }
.ov-tile { overflow: visible; }
.ov-tile-body { overflow: visible; }
.ov-rz { display: none; }
}
/* (le « briefing » — flux + panneau Sources & priority — a été retiré) */
.ov-hint { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-muted); margin-top: 10px; line-height: 1.5; }