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;
/* Inputs */
--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;
/* Catégories crypto sans équivalent Lynch (DeFi, RWA) : deux
teintes à elles, pour ne pas faire lire « Fast Grower » ou
« Asset Play » dans une pastille de protocole ou de fonds tokenisé. */
--cat-defi: #06b6d4;
--cat-rwa: #b08850;
/* Aucune des 6 strategies ETF (broad core, secteur, factor,
levier/inverse, matieres premieres, cash) n'a de couleur dediee
dans l'app -- un seul ton neutre pour les tuiles de suggestion
plutot qu'inventer une palette a 6 teintes sans base existante. */
--cat-fund: #0d9488;
/* « Unknown » n'est pas une 7e catégorie Lynch : c'est l'absence de
classement (pas d'historique de BPA sur 3 ans). Teinte neutre et
plus sourde que --slow-grower, pour qu'elle ne se lise pas comme
un verdict (audit ELEC 2026-10). */
--unknown-cat: #8a8a93;
/* Verdict de l'Investor Lens (pass/warn/fail/na) : palette dédiée,
distincte des 6 couleurs de catégorie Lynch ci-dessus (un check
"pass" en vert émeraude Fast Grower prêtait à confusion : est-ce
le verdict, ou la catégorie du titre ?). --v-pass reprend l'accent
de la marque plutôt que --fast-grower ; --v-warn est un ambre plus
sourd que --cyclical ; --v-fail réutilise --danger (le rouge
"danger" est un code universel, sans ambiguïté celui-là). */
--v-pass: #8a9a5b; --v-pass-dim: rgba(138, 154, 91, 0.16);
--v-warn: #c2870c; --v-warn-dim: rgba(194, 135, 12, 0.16);
--v-fail: #ef4444; --v-fail-dim: rgba(239, 68, 68, 0.14);
--v-na: #6b7280; --v-na-dim: rgba(107, 114, 128, 0.14);
/* 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: "Literata", 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é) ---
Sélecteur sur html.light-mode EN PLUS de body.light-mode : un script
inline dans (index.html) pose la classe sur avant même
que le CSS charge, pour peindre le bon fond au tout premier rendu --
sans ça, la page s'affichait en blanc pur (fond par défaut du
navigateur) puis basculait sur le gris foncé du dark mode (variante
sans classe, voir plus haut) avant que app.js, chargé en tout dernier
dans , ne pose enfin body.light-mode -- un flash blanc -> noir
-> gris clair bien visible au chargement. */
html.light-mode, body.light-mode {
/* Backgrounds : le même vert très pâle que les pages Tools publiques
(#f4f7f6), pour qu'ouvrir un outil depuis le Terminal ne fasse
pas de rupture de fond. Les cartes restent quasi blanches : c'est
leur contraste avec ce fond qui les détache. */
--bg-color: #f4f7f6;
--card-bg: #ffffff;
/* 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;
/* Inputs */
--input-bg: #ffffff;
--hover-bg: #e8e8ec;
--slow-grower: #86868b;
/* Verdict de l'Investor Lens, variante fond clair. */
--v-pass: #5f7040; --v-pass-dim: rgba(95, 112, 64, 0.12);
--v-warn: #a15c00; --v-warn-dim: rgba(161, 92, 0, 0.12);
--v-fail: #d1373b; --v-fail-dim: rgba(209, 55, 59, 0.10);
--v-na: #86868b; --v-na-dim: rgba(134, 134, 139, 0.12);
}
/* --- 3. STRUCTURE GENERALE ET SHAPES (Bord-radius) --- */
body { font-family: var(--font-ui); 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, .comm-rail, .comm-feed {
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); }
/* --- LOGO : deux SVG superposés (couleurs multiples -> pas gérable
par un simple currentColor), celui qui correspond au thème actif
est affiché via body.light-mode. Même marque partout maintenant :
les feuilles seules (--mark) dans le terminal, la marque + le nom
(taille par défaut) sur l'accueil public et l'écran de connexion. --- */
.brand-logo { display: flex; align-items: center; cursor: pointer; }
.brand-logo .logo-img { height: 54px; width: auto; display: block; }
.brand-logo .logo-img--light { display: none; }
body.light-mode .brand-logo .logo-img--dark { display: none; }
body.light-mode .brand-logo .logo-img--light { display: block; }
@media (max-width: 480px) { .brand-logo .logo-img { height: 44px; } }
.brand-logo--mark .logo-img { height: 38px; }
@media (max-width: 480px) { .brand-logo--mark .logo-img { height: 32px; } }
/* "exsys" sous la marque (demandé pour la version icône seule, dans
le terminal) : passe en colonne, icône gardée à sa taille d'avant
(38px / 32px mobile ci-dessus, inchangé) -- seul le bloc logo
grandit un peu pour loger le libellé, pas la top-navbar
(height:65px fixe, voir plus haut) : son align-items:center
recentre tout seul le bloc, tant que le total reste
confortablement sous 65px. */
.brand-logo--mark { flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.brand-logo-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--text-muted); line-height: 1; }
@media (max-width: 480px) {
.brand-logo-label { font-size: var(--fs-xs); letter-spacing: 1px; }
}
/* --- 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; }
/* --- Command Center : colonne admin sur la bande DROITE de l'écran ---
Toujours en bleu-violet effacé (--admin-*), jamais la couleur d'accent
du reste du site : ce ton signale à lui seul "réservé à l'admin",
sur l'icône comme sur le panneau qu'elle ouvre. display:none par
défaut, révélé par initApp() selon le rôle (jamais dans le rendu
HTML initial pour un compte non-owner). */
:root {
--admin-color: #8577e6;
--admin-bg: rgba(133, 119, 230, 0.10);
--admin-bg-strong: rgba(133, 119, 230, 0.18);
--admin-border: rgba(133, 119, 230, 0.38);
}
.admin-rail { display: none; position: fixed; top: 0; right: 0; height: 100vh;
width: 72px; z-index: 210; flex-direction: column; align-items: stretch;
background: var(--card-bg); border-left: 1px solid var(--admin-border);
box-shadow: -6px 0 18px rgba(0,0,0,0.25); overflow-y: auto;
transform: translateX(100%); transition: transform 0.2s; }
body.has-admin-rail .admin-rail { display: flex; }
body.has-admin-rail .admin-rail.open { transform: translateX(0); }
/* Bouton pour refermer le rail SANS cacher le contenu (jamais un simple
display:none sur #app-container) -- présent en haut du rail, comme le
chevron « ‹ » du menu de gauche (.rail-collapse), miroir à droite. */
.admin-rail-collapse { display: flex; align-items: center; justify-content: center;
color: var(--admin-color); opacity: 0.75; cursor: pointer; height: 24px;
margin: 6px 6px 0; border-radius: 8px; font-size: var(--fs-h3); line-height: 1;
transition: color 0.15s, background 0.15s, opacity 0.15s; }
.admin-rail-collapse:hover { opacity: 1; background: var(--admin-bg); }
/* Petit bouton de rappel (mêmes proportions que .rail-open, à gauche) --
seul élément visible quand le rail est masqué : il ne recouvre jamais
de contenu, il occupe juste le coin où le rail apparaîtrait. */
.admin-rail-open { display: none; position: fixed; top: 76px; right: 12px; z-index: 200;
width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
background: var(--card-bg); color: var(--admin-color);
border: 1px solid var(--admin-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; }
.admin-rail-open:hover { background: var(--admin-bg); }
body.has-admin-rail .admin-rail-open { display: flex; align-items: center; justify-content: center; }
body.has-admin-rail .admin-rail.open ~ .admin-rail-open { display: none; }
/* Tiroir mobile/tablette (<1024px) : fermé par défaut (juste le bouton
⚙), ouvert par-dessus le contenu avec un fond assombri -- jamais en
permanence dans la mise en page, comme le tiroir du menu de gauche. */
.admin-rail-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.6); z-index: 205; backdrop-filter: blur(4px); }
.admin-rail-overlay.open { display: block; }
.admin-rail-label { color: var(--admin-color); font-size: var(--fs-xs); font-weight: 700;
letter-spacing: 0.08em; text-align: center; padding: 4px 4px 8px; }
.admin-rail-link { display: flex; flex-direction: column; align-items: center; gap: 4px;
background: none; border: none; cursor: pointer; color: var(--admin-color);
padding: 12px 4px; font-size: var(--fs-xs); line-height: 1.15; text-align: center;
border-left: 3px solid transparent; opacity: 0.75; transition: 0.15s;
text-decoration: none; }
.admin-rail-link:hover { opacity: 1; background: var(--admin-bg); }
.admin-rail-link.active { opacity: 1; background: var(--admin-bg-strong); border-left-color: var(--admin-color); }
.admin-rail-link .admin-ico { font-size: var(--fs-h3); line-height: 1; }
.admin-rail-badge { display: inline-block; min-width: 15px; padding: 0 4px; border-radius: 8px;
background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: 700;
line-height: 15px; margin-top: -2px; }
.admin-panel { display: none; position: fixed; top: 0; right: 72px; height: 100vh;
width: 420px; max-width: calc(100vw - 72px); z-index: 209; flex-direction: column;
background: var(--card-bg); border-left: 1px solid var(--admin-border);
box-shadow: -10px 0 24px rgba(0,0,0,0.3); }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid var(--admin-border); color: var(--admin-color); }
.admin-panel-head strong { color: var(--admin-color); font-size: var(--fs-h3); }
.admin-panel-close { cursor: pointer; color: var(--admin-color); font-weight: 700; padding: 2px 8px; }
.admin-panel-body { flex: 1; overflow-y: auto; padding: 16px; font-size: var(--fs-sm); }
.admin-panel-body h4 { color: var(--admin-color); font-size: var(--fs-body); margin: 0 0 8px; }
.admin-panel-body table { width: 100%; border-collapse: collapse; }
.admin-panel-body th, .admin-panel-body td { padding: 6px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.admin-stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.admin-alert { border-left: 3px solid var(--admin-color); background: var(--admin-bg);
border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.admin-alert.lvl-error { border-left-color: var(--danger); }
.admin-alert.lvl-warn { border-left-color: #d69e2e; }
.admin-btn { background: none; border: 1px solid var(--admin-color); color: var(--admin-color);
border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: var(--fs-sm); }
.admin-btn:hover { background: var(--admin-bg); }
@media (max-width: 760px) {
.admin-rail { width: 58px; }
.admin-rail-link span:last-child { display: none; }
.admin-panel { right: 58px; width: calc(100vw - 58px); max-width: none; }
}
.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; }
/* Command Center (bande droite) : espace réservé en permanence tant
que le rail est visible -- jamais superposé au contenu, contrairement
au tiroir mobile ci-dessus (overlay). Repli en un petit bouton ⚙,
miroir du chevron « ‹ » / ☰ du menu de gauche. */
body.has-admin-rail .admin-rail { transform: translateX(0); }
body.has-admin-rail .admin-rail-overlay { display: none !important; }
body.has-admin-rail #app-container { padding-right: 72px; }
body.has-admin-rail.admin-rail-collapsed .admin-rail { transform: translateX(100%); }
body.has-admin-rail.admin-rail-collapsed .admin-rail-open { display: flex; align-items: center; justify-content: center; }
body.has-admin-rail:not(.admin-rail-collapsed) .admin-rail-open { display: none; }
body.has-admin-rail.admin-rail-collapsed #app-container { padding-right: 58px; }
}
/* 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); }
/* max-width:100% + overflow-x:auto (+ min-width:0, le même flexbug
que .sd-card : .segmented-control est enfant d'un conteneur flex,
voir ex. la barre d'options du graphique) : sans ces trois, une
rangée de boutons qui ne wrap jamais (ex. les périodes du
graphique -- 1D/5D/1M/.../MAX) reste AU MOINS aussi large que
tous ses boutons mis côte à côte, quel que soit l'espace dispo --
avec overflow:hidden seul (sans ce fix), rien ne la force à
rétrécir, elle déborde donc de son encart en mode Split (panneau
étroit) au lieu d'y être contenue. overflow-y:hidden conservé
(au lieu de overflow:hidden) pour garder les coins arrondis nets
sur les boutons internes tout en permettant overflow-x:auto --
visible/non-visible ne peuvent pas se mélanger entre les deux axes
(règle CSS), hidden/auto le peuvent. */
.segmented-control { display: inline-flex; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 0; margin-bottom: 15px; border: 1px solid var(--border);
overflow-x: auto; overflow-y: hidden; max-width: 100%; min-width: 0; }
/* 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); }
/* Terme porteur d'une fiche : cliquable, avec le meme « i » en
exposant que partout ailleurs sur le site. Un terme souligne mais
muet se lit comme une definition qu'on ne peut pas ouvrir. */
#lesson-body .lesson .l-term[data-doc] { font-style: normal; cursor: pointer;
border-bottom: 1px dotted var(--accent); color: inherit; }
#lesson-body .lesson .l-term[data-doc]:hover { border-bottom-style: solid; }
#lesson-body .lesson .l-term[data-doc]::after { content: "\00a0i"; font-size: .7em;
vertical-align: super; color: var(--accent); font-weight: 700; }
#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; }
/* Ligne "Last updated" des pages légales (legal/*.html) : métadonnée,
pas du corps de texte — sans, elle hérite du serif pleine taille
comme un paragraphe normal. */
#lesson-body .lesson .legal-updated {
font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-muted);
margin: -0.6rem 0 1.6rem;
}
/* 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);
}
/* Tableaux de rendements : plus de deux colonnes, et un vrai en-tête.
`position: static` explicite parce que le `th { position: sticky }`
global du screener collerait sinon ces en-têtes en haut de la page
pendant qu'on lit la leçon. */
#lesson-body .lesson .l-eg-scroll { overflow-x: auto; margin: 1rem 0 .4rem; }
#lesson-body .lesson .l-eg-tbl.wide { max-width: 100%; min-width: 440px; margin: 0; }
#lesson-body .lesson .l-eg-tbl thead th {
position: static; z-index: auto; cursor: default;
padding: .6rem .85rem; text-align: right; font-weight: 700;
background: var(--hover-bg); color: var(--text-muted);
font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
border-bottom: 1px solid rgba(128,128,128,.3);
}
#lesson-body .lesson .l-eg-tbl thead th:first-child { text-align: left; }
#lesson-body .lesson .l-eg-cap {
font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-muted); margin-top: .5rem;
}
/* « In short » : encadré d'OUVERTURE, plus une section de clôture. On
lit l'essentiel avant d'entrer dans la leçon, pas après l'avoir
finie -- d'où l'encadré plein plutôt que l'ancien filet horizontal
de fin de page (margin-top: 3rem / border-top). */
#lesson-body .lesson .l-recap {
margin: 0 0 2.4rem; padding: 1.1rem 1.3rem 1.2rem; border-radius: 8px;
border: 1px solid rgba(138, 154, 91, .35); background: rgba(138, 154, 91, .10);
/* Encadré volontairement plus étroit que le corps de texte (-40%) :
c'est un résumé, pas le cours -- la différence de largeur le
signale avant même qu'on l'ait lu. Les phrases reviennent à la
ligne normalement. Plancher en px pour qu'il reste lisible sur
mobile, où 60% d'une colonne déjà étroite ne tiendrait pas. */
max-width: min(60%, 100%); min-width: min(320px, 100%);
}
#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: .55rem 0 .55rem 1.4rem; position: relative;
border-bottom: 1px solid rgba(138, 154, 91, .22);
}
#lesson-body .lesson .l-recap li:last-child { border-bottom: none; padding-bottom: 0; }
#lesson-body .lesson .l-recap li:first-child { padding-top: 0; }
/* Puce ronde plutôt qu'un tiret cadratin : le tiret ouvrait chaque
ligne sur un ton sec, presque télégraphique. */
#lesson-body .lesson .l-recap li::before {
content: "\2022"; position: absolute; left: .25rem;
color: var(--accent); font-size: 1.15em;
}
@media (max-width: 720px) {
#lesson-body .lesson { max-width: 100%; }
/* Sur mobile la colonne est déjà étroite : rétrécir le résumé de
40% de plus le rendrait illisible. Il reprend toute la largeur. */
#lesson-body .lesson .l-recap { max-width: 100%; min-width: 0; }
}
/* 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.) */
/* 150px (pas 120px) : assez pour qu'un ticker à 4-5 lettres + la
plupart des noms de société tiennent sans renvoi à la ligne — un
nom trop long est tronqué en "…" (voir renderTable) plutôt que
d'élargir encore la colonne. Compensé côté JS par
TABLES.stocks.extraWidth() pour ne pas resserrer les autres
colonnes. */
.col-ticker { width: 150px; 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); }
/* Inventory : le détail entre parenthèses ("+12% vs Rev +2%") passait
à la ligne dans la largeur partagée par défaut (~132px) et ajoutait
une 3e ligne à la cellule — élargie comme la colonne Ticker
ci-dessus, même compensation dans extraWidth(). */
.col-stocks { width: 158px; }
/* 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 : le ratio seul, coloré. Pas de jauge — elle
portait la même information que la couleur et, partageant la classe
`.lens-score` avec le bloc de la fiche action (plus bas, avec son
padding), elle rehaussait chaque ligne du screener. */
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-n { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Composition d'un ETF (fiche fonds) : 4 tuiles côte à côte. Top
holdings est la seule aux libellés longs (noms de sociétés) -> deux
colonnes dès qu'il y a la place, le reste des tuiles n'affichant que
des noms de secteurs ou de pays. */
.etf-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
/* 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 td.col-pea, #stocksTable th.col-pea, #etfTable td.col-etf-pea, #etfTable th.col-etf-pea { white-space: nowrap; }
#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); }
/* Menu "+ Add data" (Portfolio) : point d'entrée unique pour saisie
manuelle, import, cash, brokers API et gestion des imports. */
.pf-add-wrap { position: relative; }
.pf-add-menu {
display: none; position: absolute; top: calc(100% + 6px); right: 0;
background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
padding: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); z-index: 999; min-width: 260px;
}
.pf-add-menu.open { display: block; }
.pf-add-menu button {
display: block; width: 100%; text-align: left; background: none; border: none;
font: inherit; color: var(--text-main); font-size: var(--fs-body); font-weight: 700;
padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.pf-add-menu button:hover { background: var(--hover-bg); }
.pf-add-menu .pf-add-menu-desc { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }
.pf-add-menu hr { border: none; border-top: 1px solid var(--border); margin: 5px 4px; }
.pf-add-menu .pf-add-menu-group { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 6px 10px 2px; font-weight: 700; }
.pf-add-menu .pf-add-menu-tag {
display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 6px;
font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); vertical-align: 1px;
}
.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; }
/* #tag inséré dans une note/thèse : même bleu que les autres badges
d'identité du site (Stalwart, ETF) plutôt qu'un jaune arbitraire qui
jurait avec la palette et n'avait aucun sens (pas "d'avertissement"). */
.badge.tag-chip { background: rgba(59, 130, 246, 0.12); color: var(--stalwart); border: 1px solid rgba(59, 130, 246, 0.3); padding: 2px 7px; border-radius: 6px; margin: 0 3px; text-transform: none; font-weight: 600; }
.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); }
.bg-unknown { background: rgba(138, 138, 147, 0.1); color: var(--unknown-cat); border: 1px dashed rgba(138, 138, 147, 0.35); }
.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; }
/* min-width:0 : .sd-grid (ex. le wrapper autour de la carte
Governance, #section-management) est lui-même un enfant direct de
.sd-pane -- même flexbug que .sd-card (voir plus bas) mais un
niveau plus haut. Sans ce min-width:0, .sd-grid restait au moins
aussi large que le contenu de sa carte (ex. le tableau de
gouvernance), ce qui forçait tout le PANNEAU à s'élargir au lieu
de laisser l'encart gérer son propre scroll horizontal (overflow-
x:auto sur .sd-card, qui lui n'a jamais eu l'occasion de s'activer
puisque la carte n'était jamais vraiment "trop étroite" -- c'est
.sd-grid qui s'élargissait en amont). */
.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; min-width: 0; }
/* min-width:0 + overflow-x:auto : chaque encart scroll HORIZONTALEMENT
DANS SES PROPRES BORNES si son contenu est trop large pour la
colonne qui le contient (mode Split, panneau étroit) -- uniforme
pour TOUS les encarts, qu'ils contiennent un tableau, une grille
ou un simple bloc de texte. Avant ce `min-width:0`, un encart,
enfant d'un flex column (.sd-pane), gardait par défaut la largeur
MINIMALE de son contenu (min-width:auto, un flexbug classique) :
certains s'élargissaient donc davantage que la colonne (scroll
visible, par chance, au niveau du panneau) et d'autres -- ceux
dont le contenu ne force pas cette largeur minimale -- laissaient
simplement leur contenu déborder sans aucun moyen de le voir en
entier. Sans effet hors Split : un encart pleine largeur n'a
presque jamais de contenu plus large que lui-même. */
/* flex-shrink:0 : en mode Split, .sd-pane est un flex column à
hauteur bornée (max-height:calc(100vh-210px), voir plus bas) --
sans ce flex-shrink:0, le flex-shrink:1 par défaut COMPRIME
chaque encart (proportionnellement à sa hauteur naturelle) pour
faire rentrer toute la colonne dans cette hauteur, au lieu de
laisser le panneau scroller (ce qui est tout l'objet de son
overflow-y:auto). Un encart haut (graphique, grille de stats)
pouvait ainsi se retrouver compressé à quelques mm -- visible
avant ce fix car le contenu débordait du cadre (moche mais
lisible), invisible depuis l'ajout de overflow-x:auto ci-dessus
(qui force overflow-y à 'auto' aussi, par la règle CSS qui
aligne les deux axes dès que l'un n'est pas 'visible' -- donc
maintenant CLIPPÉ dans la mini-boîte au lieu de déborder). */
.sd-card { padding: 15px; min-width: 0; overflow-x: auto; flex-shrink: 0; }
/* Encart replié (sdToggleCollapse, app.js) : seul l'en-tête reste. */
.sd-card.sd-collapsed > :not(.sd-collapse-head) { display: none !important; }
.sd-card.sd-collapsed > .sd-collapse-head { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.sd-collapse-btn { border: none; background: transparent; color: var(--text-muted); cursor: pointer;
font-size: 0.85em; padding: 0 6px 0 0; line-height: 1; vertical-align: middle; }
.sd-collapse-btn:hover { color: var(--accent); }
.doubt-pop { position: absolute; z-index: 3000; background: var(--card-bg); color: var(--text-main);
border: 1px solid var(--v-warn, #c08a00); border-radius: 8px; padding: 10px 12px;
box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: var(--fs-sm); line-height: 1.45; }
.doubt-pop p { margin: 2px 0 8px; color: var(--text-muted); }
.doubt-pop code { font-size: var(--fs-xs); }
.doubt-pop-foot { font-size: var(--fs-xs); margin: 0 !important; opacity: .8; }
/* Note de section repliée en lien pointillé (pop-up), voir drawCompanyStats. */
.cs-note-link { display: inline-block; margin: -4px 0 6px; font-size: var(--fs-xs); color: var(--text-muted);
border-bottom: 1px dotted var(--text-muted); cursor: pointer; }
.cs-note-link:hover { color: var(--accent); border-color: var(--accent); }
/* Pastille de doute (admin seulement, _doubtBadge dans app.js). */
.doubt-badge { display: inline-block; width: 14px; height: 14px; line-height: 14px; border-radius: 50%;
font-size: var(--fs-xs); font-weight: 800; text-align: center; vertical-align: middle; cursor: help;
background: var(--v-warn, #c08a00); color: #fff; margin-left: 4px; }
.doubt-badge.lvl2 { background: var(--v-warn, #c08a00); }
.doubt-badge.lvl3 { background: var(--v-fail, #c0392b); }
.doubt-pop.lvl3 { border-color: var(--v-fail, #c0392b); }
.doubt-pop ul { margin: 2px 0 8px 16px; padding: 0; color: var(--text-muted); }
.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; }
/* Onglet Position (fiche action ET fiche ETF, même composant
renderSdPosition) : 6 colonnes fixes pour les indicateurs de
synthèse — avec 11 tuiles, un auto-fit(minmax(120px,1fr)) en
casait 8 sur la 1re ligne et 3 sur la 2e ; 6 colonnes répartit
6+5, la meilleure répartition possible sur 2 lignes. */
.sd-pos-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 20px; margin-bottom: 16px; }
@media (max-width: 820px) { .sd-pos-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sd-pos-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tableau des lots de l'onglet Position : 7 colonnes visibles + une
dernière pour "edit". Sans largeurs explicites, le navigateur les
dimensionne au contenu -> Side (juste "BUY"/"SELL") finissait
aussi large que Date, et Log (menu déroulant + liens "+ log/+
note") était écrasé. Les 5 colonnes de chiffres/dates restent
égales entre elles, Side est réduite, Log est élargie. */
.sd-pos-table { table-layout: fixed; }
.sd-pos-table col.c-date, .sd-pos-table col.c-shares, .sd-pos-table col.c-cumul,
.sd-pos-table col.c-price, .sd-pos-table col.c-pl { width: 13%; }
.sd-pos-table col.c-side { width: 7%; }
.sd-pos-table col.c-log { width: 21%; }
.sd-pos-table col.c-edit { width: 7%; }
.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; }
/* Tuile Fundamentals sélectionnée : anneau superposé plutôt que
bordure/fond en dur, pour ne pas écraser le style de pertinence
(Analysis Framework) posé au rendu sur la même tuile. */
.fund-tile.selected { box-shadow: 0 0 0 2px var(--accent) inset; }
/* Panneau Peers d'une tuile Fundamentals : sélecteur de période —
moyenne notre valeur ET celle des pairs sur leurs n derniers
exercices (voir enrichir_peers_ref_local côté moteur) — même
composant segmented-control que partout ailleurs sur le site, juste
resserré pour tenir dans la largeur d'une tuile. */
.fund-peer-period { margin-bottom: 10px; }
.fund-peer-period .seg-btn { padding: 5px 14px; font-size: var(--fs-sm); }
.fund-peer-period .seg-btn:disabled { opacity: 0.35; cursor: default; }
/* Insider transactions : bande de tuiles cliquables par fenêtre,
remplace l'ancien petit tableau à 5 colonnes clairsemées. Cliquer
une tuile filtre le tableau détaillé en dessous (setInsidersWindow). */
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ins-tile { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px;
cursor: pointer; background: var(--card-bg); transition: box-shadow .12s, border-color .12s; }
.ins-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ins-tile-eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .6px;
text-transform: uppercase; color: var(--text-muted); }
.ins-tile.active .ins-tile-eyebrow { color: var(--accent); }
.ins-tile-net { font-size: var(--fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
.ins-tile-break { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.ins-tile-cnt { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.ins-showing { font-size: var(--fs-sm); color: var(--text-muted); margin: 10px 2px 0; }
.ins-showing strong { color: var(--text-main); }
.ins-clear { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); cursor: pointer;
text-transform: uppercase; letter-spacing: .3px; }
/* Governance : clusters thématiques, chaque tuile porte sa propre
lecture (pas de liste de flags séparée répétant le même chiffre).
Le cluster "Board composition" embarque directement la liste des
officers qui le fonde, 4e colonne croisée avec l'insider trading. */
.gov-cluster { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.gov-cluster-hd { display: flex; align-items: center; gap: 8px; padding: 11px 14px;
background: var(--ind-bg); border-bottom: 1px solid var(--border); }
.gov-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gov-cluster-title { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px;
text-transform: uppercase; color: var(--text-muted); }
.gov-cluster-body { padding: 14px; }
/* overflow-x:auto (+ overflow-y:hidden pour rester cohérent avec le
coin arrondi du .gov-cluster parent) : grid-template-columns est
en minmax(Npx,1fr) (fixé en JS -- voir renderGovernance), donc la
grille déborde proprement en panneau étroit (mode Split) au lieu
de comprimer ses tuiles jusqu'à l'illisible comme avant. */
.gov-tiles { display: grid; gap: 10px; overflow-x: auto; overflow-y: hidden; }
.gov-tile { background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 5px; }
.gov-tile-lbl { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.gov-tile-val { font-size: var(--fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; }
.gov-tile-sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }
.gov-tile-read { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; }
.gov-link-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
border-top: 1px dashed var(--border); font-size: var(--fs-xs); color: var(--text-muted); background: var(--ind-bg); }
.gov-link-row b { color: var(--text-main); }
/* overflow-x:auto ICI (pas juste sur .sd-card en amont) : .gov-officers
vit à l'intérieur de .gov-cluster (cluster "Board composition"),
qui a overflow:hidden pour son coin arrondi -- sans ce scroll
local, ce overflow:hidden coupait le tableau des officers
(.gov-off-head/.gov-off-row, min-width:480px) avant même qu'il
puisse déborder jusqu'au conteneur scrollable de la carte. */
.gov-officers { padding: 0 14px 6px; overflow-x: auto; }
.gov-off-head { display: grid; grid-template-columns: 1fr 56px 84px 150px; gap: 10px; padding: 9px 0 6px;
font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
color: var(--text-muted); border-bottom: 1px solid var(--border);
/* Les 3 colonnes chiffrées sont en px FIXE (jamais plus étroites,
sans quoi âge/rémunération deviennent illisibles) -- sous cette
largeur, .gov-off-head/.gov-off-row doivent dépasser l'encart
plutôt que de s'écraser, pour que le scroll horizontal de
.sd-card (voir plus haut) prenne le relais au lieu de tasser
les chiffres. Même largeur mini pour l'en-tête et les lignes :
elles défilent ensemble, alignées, dans le même conteneur. */
min-width: 480px; }
.gov-off-head .r { text-align: right; }
.gov-off-row { display: grid; grid-template-columns: 1fr 56px 84px 150px; gap: 10px; align-items: baseline;
padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body); min-width: 480px; }
.gov-off-row:last-child { border-bottom: none; }
.gov-off-name { font-weight: 700; }
.gov-off-title { color: var(--text-muted); font-size: var(--fs-xs); margin-left: 6px; }
.gov-off-age { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--fs-sm);
text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.gov-off-pay { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--fs-sm); text-align: right; }
.gov-off-act { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); text-align: right; }
.gov-age-flag { width: 6px; height: 6px; border-radius: 50%; background: var(--cyclical); flex-shrink: 0; }
.gov-note { font-size: var(--fs-xs); color: var(--text-muted); margin: 6px 2px 0; }
@media (max-width: 680px) {
.gov-off-head, .gov-off-row { grid-template-columns: 1fr 44px 64px 110px; gap: 6px; }
}
/* Les deux analyses (cascade + bilan) côte à côte, même hauteur, sous
le tableau brut. .fs-wf est la colonne : flex vertical pour que la
note se pousse en bas et occupe toute la hauteur de la ligne. */
.fs-twocol { display: none; grid-template-columns: 1fr 1fr; gap: 24px;
margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); align-items: stretch; }
.fs-twocol:has(.fs-wf:not(:empty)) { display: grid; }
.fs-wf { display: flex; flex-direction: column; }
.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; }
/* Étapes comptables en colonnes verticales (pas en lignes) : la
hauteur de chaque barre occupe tout l'espace dispo dans la colonne,
au lieu de rester collée en haut comme une petite liste de lignes. */
.fs-wf-cols { display: flex; align-items: flex-end; gap: 10px; flex: 1 1 auto; min-height: 170px; }
.fs-wf-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column;
align-items: center; justify-content: flex-end; }
.fs-wf-col-val { font-size: var(--fs-xs); font-weight: 700; color: var(--text-main);
font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 4px; }
.fs-wf-col-drop .fs-wf-col-val { font-weight: 600; color: var(--danger); }
.fs-wf-col-track { width: 100%; max-width: 54px; flex: 1 1 auto; display: flex; align-items: flex-end;
background: var(--input-bg); border-radius: 4px 4px 0 0; overflow: hidden; }
.fs-wf-col-bar { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.fs-wf-rev { background: var(--text-muted); }
.fs-wf-ebitda { background: var(--success); }
.fs-wf-net { background: color-mix(in srgb, var(--success) 65%, black); }
.fs-wf-cost { background: var(--danger); }
.fs-wf-col-lbl { font-size: var(--fs-xs); color: var(--text-muted); text-align: center;
line-height: 1.25; margin-top: 6px; min-height: 2.5em; }
.fs-wf-note { font-size: var(--fs-xs); color: var(--text-muted); padding-top: 10px; }
@media (max-width: 780px) {
.fs-twocol { grid-template-columns: 1fr; gap: 18px; }
}
/* Même repli, mais basé sur la largeur du panneau (utile en mode Split,
où le panneau est étroit sans que le viewport le soit). */
@container (max-width: 780px) {
.fs-twocol { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
.fs-wf-cols { gap: 5px; }
.fs-wf-col-track { max-width: 36px; }
}
/* 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); }
.fs-bh-mi { background: var(--stalwart); opacity: 0.55; }
@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 4px 10px 10px; border-bottom: 1px solid var(--border); align-items: baseline;
/* Liseré de verdict à gauche : scannable même sans lire l'icône ni
la valeur — l'œil descend vite sur mobile. Transparent par défaut
(ligne "info" ou verdict non reconnu), coloré par .v-. */
border-left: 3px solid transparent; margin-left: -10px; padding-left: 13px;
}
.lens-crit.v-pass { border-left-color: var(--v-pass); }
.lens-crit.v-fail { border-left-color: var(--v-fail); }
.lens-crit.v-warn { border-left-color: var(--v-warn); }
.lens-crit.v-na { border-left-color: color-mix(in srgb, var(--v-na) 45%, transparent); }
.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; }
/* Réponse manuelle à un critère « Judge » du lens ETF : trois petits
boutons en fin de description, puis le rappel de la réponse donnée.
Discret — c'est une action secondaire, la description reste le texte
qu'on lit. */
.lens-ans { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: 8px;
font-size: var(--fs-xs); color: var(--text-muted); }
.lens-ans b { color: var(--text-main); font-weight: 600; }
.lens-ans-b { font-family: inherit; font-size: var(--fs-xs); font-weight: 600; line-height: 1;
padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border);
background: var(--card-bg); color: var(--text-muted); cursor: pointer; }
.lens-ans-b:hover { border-color: var(--text-muted); color: var(--text-main); }
.lens-ans-b.v-pass:hover { border-color: var(--v-pass); color: var(--v-pass); }
.lens-ans-b.v-warn:hover { border-color: var(--v-warn); color: var(--v-warn); }
.lens-ans-b.v-fail:hover { border-color: var(--v-fail); color: var(--v-fail); }
/* Réponse périmée : la ligne garde son verdict (on n'efface pas le
travail de l'utilisateur) mais le dit. */
.lens-ans.stale { color: var(--v-warn); }
.lens-crit.is-stale { background: color-mix(in srgb, var(--v-warn) 6%, transparent); }
/* Score : puces comptées + petit anneau (proportion scored), pas une
grosse fraction — un lens Lynch est une checklist à parcourir, pas
une note à optimiser. */
.lens-score { display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 4px; }
.lens-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lens-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
font-weight: 700; padding: 5px 11px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.lens-chip.v-pass { background: var(--v-pass-dim); color: var(--v-pass); }
.lens-chip.v-fail { background: var(--v-fail-dim); color: var(--v-fail); }
.lens-chip.v-warn { background: var(--v-warn-dim); color: var(--v-warn); }
.lens-chip.v-na { background: var(--v-na-dim); color: var(--v-na); }
.lens-chip.v-irrelevant { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); font-weight: 600; }
.lens-ring-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lens-ring-cap { font-size: var(--fs-sm); color: var(--text-muted); text-align: right; line-height: 1.2;
text-transform: uppercase; letter-spacing: .07em; }
.lens-ring-cap b { display: block; color: var(--text-main); font-variant-numeric: tabular-nums;
font-size: var(--fs-display); font-weight: 800; letter-spacing: normal; text-transform: none; line-height: 1.15; }
/* Tiroir des critères hors-sujet pour la catégorie courante (même
registre que .fund-stats-toggle : petit bouton bordé, pas un lien nu). */
.lens-hidden-toggle {
display: inline-flex; align-items: center; gap: 5px; margin: 10px 0 2px;
font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
padding: 4px 10px; border: 1px solid var(--border); border-radius: 7px;
background: transparent; color: var(--text-muted); cursor: pointer;
}
.lens-hidden-toggle:hover { background: var(--hover-bg); color: var(--text-main); }
#lens-hidden-crit .lens-crit:first-child { border-top: 1px solid var(--border); margin-top: 8px; }
/* --- 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: 5px 14px; border-radius: 9px; cursor: pointer; letter-spacing: 0.2px;
font-family: var(--font-ui); font-size: var(--fs-sm); 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 #etfd-lens-start-thesis,
.sd-page #cryd-lens-start-thesis,
.sd-page #lens-learn-method,
.sd-page #etfd-lens-learn,
.sd-page #cryd-lens-learn {
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,
.sd-page #etfd-lens-start-thesis,
.sd-page #cryd-lens-start-thesis { background: #ec9c4a; color: #3a2400; border: 1px solid #e0913c; }
.sd-page #lens-learn-method,
.sd-page #etfd-lens-learn,
.sd-page #cryd-lens-learn { background: #3b82f6; color: #fff; border: 1px solid #2f6fd6; }
.sd-page #lens-start-thesis:hover,
.sd-page #etfd-lens-start-thesis:hover,
.sd-page #cryd-lens-start-thesis:hover,
.sd-page #lens-learn-method:hover,
.sd-page #etfd-lens-learn:hover,
.sd-page #cryd-lens-learn: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;
/* Permet aux grilles internes (ex. .fs-twocol) de se replier sur la
largeur RÉELLE de ce panneau plutôt que sur celle du viewport :
en mode Split, le panneau peut être étroit sur un écran large,
ce qu'un @media classique ne détecte jamais. */
container-type: inline-size; }
.sd-page .sd-pane.is-hidden { display: none; }
.sd-page .sd-panes.is-split .sd-pane {
max-height: calc(100vh - 210px); overflow-y: auto; overflow-x: auto;
position: sticky; top: 80px;
border: 1px solid var(--border); border-radius: 12px; padding: 16px;
background: var(--bg, var(--card-bg));
}
/* Sous 680px (téléphone, voir le même seuil ligne 941) seulement :
même une tablette en portrait (≥768px) garde les deux panneaux
côte à côte -- juste plus étroits -- grâce aux container queries
internes (ex. .fs-twocol ligne ~980) qui replient déjà le contenu
à l'échelle du panneau, pas du viewport. */
@media (max-width: 680px) {
/* flex-direction:column fait basculer l'axe transversal sur la
largeur -- sans ce align-items:stretch, align-items:flex-start
(ligne 1111, pensé pour le mode row où il gère la hauteur)
réduit chaque panneau à la largeur de son contenu : tout se
retrouve collé à gauche, le texte wrap en cascade et les
panneaux s'étirent en hauteur/se chevauchent. */
.sd-page .sd-panes.is-split { flex-direction: column; align-items: stretch; }
.sd-page .sd-panes.is-split .sd-pane {
max-height: none; overflow-y: visible; overflow-x: auto; position: static;
width: 100%;
}
}
/* Mode Split, panneau étroit (container query sur .sd-pane -- la
largeur RÉELLE du panneau, pas du viewport, voir ligne 1114) :
le scroll horizontal ci-dessus est un filet, pas la solution --
certains boutons (CTA Investor Lens, .btn-outline/.btn-primary)
ont un padding/texte pensés pour la pleine largeur et débordaient
visiblement avant même d'atteindre ce filet. Rétrécis UNIQUEMENT
en split (le mode Single, ~pleine largeur de l'écran, ne descend
quasi jamais sous ce seuil) : jamais touché hors split. */
@container (max-width: 480px) {
.sd-panes.is-split .sd-pane .btn-outline,
.sd-panes.is-split .sd-pane .btn-primary,
.sd-panes.is-split .sd-pane .lens-btn,
.sd-panes.is-split .sd-pane .lens-hidden-toggle,
.sd-panes.is-split .sd-pane #lens-learn-method,
.sd-panes.is-split .sd-pane #lens-start-thesis,
.sd-panes.is-split .sd-pane #etfd-lens-learn,
.sd-panes.is-split .sd-pane #etfd-lens-start-thesis,
.sd-panes.is-split .sd-pane #cryd-lens-learn,
.sd-panes.is-split .sd-pane #cryd-lens-start-thesis {
padding: 5px 10px; font-size: var(--fs-xs); white-space: normal; text-align: center;
}
}
/* L'en-tête Investor Lens (titre + "Pick your fighter" à gauche,
Learn the method/New log entry à droite) est en justify-content:
space-between + flex-wrap:wrap, avec min-width:220px à gauche et
flex-shrink:0 à droite -- les deux ensemble ne laissent AUCUNE
marge pour rétrécir, donc le wrap fait tomber les boutons sous le
menu dès que le panneau est plus étroit que ~220px + boutons + gap.
Contrairement au rapetissage des boutons ci-dessus (cosmétique,
ne sert qu'en dessous de 480px), CE seuil de wrap peut survenir
bien au-delà de 480px de large -- donc pas de @container ici,
appliqué à TOUT panneau en Split, large ou étroit : le